MEMBANGUN APLIKASI PENGENALAN 4 SEHAT 5 SEMPURNA
MENGGUNAKAN MACROMEDIA FLASH 8
Oleh: Yusuf Ardi Bachtiar
1C114609
3KA21
Bahan – Bahan:
1. Gambar 2D tentang 4 sehat, 5 sempurna.
2. Informasi mengenai setiap makanan 4 sehat, 4 sempurna.
3. Suara/Musik interaktif.
4. Software Macromedia Flash 8
Langkah Pembuatan:
1. Buat dokumen
flash baru dengan cara klik File-New dan Pilih Flash Document.
2. Klik kanan pada Area Kerja dan pilih Document
Properties. Atur ukuran halaman
menjadi 800 x 600 px.
3. Masukkan gambar latar belakang ke dalam
dokumen dengan cara pilih File-Import-Import to Library. Pilih gambar yang akan
dijadikan latar belakang dan pilih OK.
4. Masukkan gambar yang telah di-import ke dalam
halaman dengan cara drag and drop pada gambar latar belakang di jendela
library.
5. Atur ukuran gambar tersebut menjadi lebar 801
dan tinggi 603 pada jendela properties.
6. Atur agar gambar tersebut menutupi seluruh
halaman awal.
7. Masukkan musik latar belakang dengan cara
klik File-Import-Import to Library dan pilih musik yang akan digunakan.
8. Masukkan musik ke dalam halaman dengan cara
drag and drop pada halaman. Pada jendela properties, ubah Sync menjadi Start
dan Loop.
9. Masukkan
sebuah textbox ke dalam halaman awal dengan cara memilih Text Tool pada toolbox.
Ketikkan “Mengenal 4 Sehat, 5 Sempurna”
pada isi textbox tersebut. Atur fontnya menjadi Comic Sans MS dan dan ukuran
font 40 pada jendela properties.
10. Buat
textbox sama seperti langkah 9 namun dengan ukuran font 32. Ketikkan “Silakan Pilih”
pada isi textbox.
11. Buat 5
buah Rectangle dengan cara pilih gambar kotak pada toolbox dan gambarkan pada luar
halaman. Atur warna latar belakang Rectangle menjadi putih dan garisnya menjadi
hitam pada kotak properties. Atur ukurannya menjadi 183 x 118.
12. Buat 5
buah textbox. Ketikkan “Makanan Pokok”, “Lauk Pauk”, “Susu”, “Sayur Mayur”, dan
“Buah-Buahan” pada masing-masing textbox tersebut.
13. Tempatkan
5 buah textbox yang telah dibuat ke dalam masing-masing Rectangle yang telah
dibuat.
14. Pilih
Selection Tool pada toolbox. Drag dan seleksi masing-masing Rectangle yang
telah diisi textbox secara menyeluruh.
15. Klik kanan
pada Rectangle yang telah diseleksi. Pilih Convert to Symbol. Beri nama
“t_makananpokok” untuk Rectangle yang memiliki teks Makanan Pokok, “t_lauk”
untuk Rectangle yang memiliki teks Lauk Pauk, “t_susu” untuk Rectangle yang
memiliki teks Susu, “t_sayur” untuk Rectangle yang memiliki teks Sayur Mayur,
dan “t_buah” untuk Rectangle yang memiliki teks Buah-Buahan. Masing-masing
diberi tipe Button.
16. Buat 1
buah Rectangle dengan ukuran 800 x 57 dengan warna latar belakang biru dan
warna garis hitam.
17. Buat
textbox dengan isi teks “KUIS”. Tempatkan textbox tersebut ke dalam Rectangle
yang dibuat pada langkah 16.
18. Ubah
Rectangle yang telah diisi dengan teks “KUIS” menjadi Button seperti di langkah
15. Beri nama dengan “t_kuis”.
19. Buat layer
baru dengan cara klik Insert Layer pada jendela Timeline.
20. Klik kanan
pada frame 10 di layer 2. Pilih Insert Keyframe.
21. Klik kanan
pada frame 9 di layer 2. Pilih Create Motion Tween.
22. Masukkan
sebuah gambar dengan ukuran 100 x 100 seperti di langkah 3 dan 4.
23. Tempatkan
gambar tersebut pada suatu daerah di halaman awal sebagai posisi awal animasi
pembuka.
24. Klik pada
frame 5 di layer 2.
25. Tempatkan
gambar tersebut pada suatu daerah di halaman awal sebagai posisi akhir animasi
pembuka.
26. Pindah ke
layer 1.
27. Desain
tampilan seperti di gambar 1.
28. Pilih
button t_makananpokok dan tekan F9. Ketikkan script seperti berikut:
on(release) {
gotoAndStop("makanan_pokok");
}
29. Pilih
button t_lauk dan tekan F9. Ketikkan script seperti berikut:
on(release) {
gotoAndStop("lauk_pauk");
}
30. Pilih
button t_susu dan tekan F9. Ketikkan script seperti berikut:
on(release) {
gotoAndStop("susu");
}
31. Pilih
button t_sayur dan tekan F9. Ketikkan script seperti berikut:
on(release) {
gotoAndStop("sayur_mayur");
}
32. Pilih
button t_buah dan tekan F9. Ketikkan script seperti berikut:
on(release) {
gotoAndStop("buah_buahan");
}
33. Berikan
nama Frame dengan mengisi kotak Frame Label di jendela properties. Berikan nama
“menu”.
34. Klik kanan
pada frame 30 di layer 1 dan pilih Insert Blank Keyframe.
35. Berikan
nama frame “makanan_pokok” pada Frame Label di jendela properties.
36. Buat
sebuah Button dengan nama “t_kembalinasi” dan label “Kembali”. Berikan textbox
“Makanan Pokok” dan masukkan gambar 5 makanan pokok dengan ukuran 100 x 100.
Tekan F9 pada button tersebut dan ketikkan script berikut:
on(release) {
gotoAndStop("menu");
}
37. Desain
agar tampilan seperti gambar 2.
38. Ubah
masing-masing gambar menjadi Button.
39. Klik pada
gambar pertama dan tekan tombol F9. Ketikkan script seperti berikut:
on(release) {
gotoAndPlay("nasi");
}
40. Klik kanan
pada frame 31 di layer 1. Pilih Insert Blank Keyframe.
41. Buat
sebuah button “Kembali” seperti di langkah 36. Berikan script seperti di
langkah 44:
on(release) {
gotoAndPlay("makanan_pokok");
}
42. Masukkan 3
buah gambar yang memiliki tema Nasi.
43. Masukkan 2
buah textbox. 1 textbox memiliki teks “Nasi” dengan ukuran font 40 dan 1
textbox memiliki teks mengenai deskripsi nasi dengan ukuran font 20.
44. Berilah
nama frame “nasi” pada jendela properties.
45. Desain
tampilan agar seperti di gambar 3.
46. Ulangi langkah
40-45 dengan tema jagung di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("jagung"); di gambar kedua dan desain tampilan seperti di
gambar 4.
47. Ulangi langkah
40-45 dengan tema gandum di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("gandum"); di gambar ketiga dan desain tampilan seperti
di gambar 5.
48. Ulangi langkah
40-45 dengan tema singkong di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("singkong"); di gambar keempat dan desain tampilan
seperti di gambar 6.
49. Ulangi langkah
40-45 dengan tema sagu di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("sagu"); di gambar kelima dan desain tampilan seperti di
gambar 7.
50. Ulangi
langkah 34-38 dengan tema Lauk-Pauk di frame berbeda. Desain tampilan seperti
di gambar 8.
51. Ulangi
langkah 39 dengan script seperti berikut:
on(release) {
gotoAndPlay("ayam");
}
52. Ulangi
langkah 40-45 dengan tema ayam di frame berbeda. Desain tampilan seperti gambar
9.
53. Ulangi
langkah 40-45 dengan tema ikan di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("ikan"); di gambar kedua dan desain tampilan seperti di
gambar 11.
54. Ulangi
langkah 40-45 dengan tema tahu di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("tahu"); di gambar ketiga dan desain tampilan seperti di
gambar 12.
55. Ulangi
langkah 40-45 dengan tema telur di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("telur"); di gambar keempat dan desain tampilan seperti
di gambar 13.
56. Ulangi
langkah 34-38 dengan tema Sayur-Mayur di frame berbeda. Desain tampilan seperti
di gambar 14.
57. Ulangi
langkah 39 dengan script seperti berikut:
on(release) {
gotoAndPlay("tomat");
}
58. Ulangi langkah
40-45 dengan tema tomat di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("tomat"); di gambar pertama dan desain tampilan seperti
di gambar 15.
59. Ulangi langkah
40-45 dengan tema kentang di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("kentang"); di gambar kedua dan desain tampilan seperti
di gambar 16.
60. Ulangi langkah
40-45 dengan tema wortel di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("wortel"); di gambar ketiga dan desain tampilan seperti
di gambar 17.
61. Ulangi langkah
40-45 dengan tema bawang putih di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("bawang_putih"); di gambar keempat dan desain tampilan
seperti di gambar 18.
62. Ulangi langkah
40-45 dengan tema bawang merah di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("bawang_merah"); di gambar kelima dan desain tampilan
seperti di gambar 19.
63. Ulangi
langkah 34-38 dengan tema Buah-Buahan di frame berbeda. Desain tampilan seperti
di gambar 20.
64. Ulangi
langkah 39 dengan script seperti berikut:
on(release) {
gotoAndPlay("apel");
}
65. Ulangi langkah
40-45 dengan tema apel di frame berbeda dan desain tampilan seperti di gambar
21.
66. Ulangi langkah
40-45 dengan tema mangga di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("mangga"); di gambar kedua dan desain tampilan seperti di
gambar 22.
67. Ulangi langkah
40-45 dengan tema jeruk di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("jeruk"); di gambar ketiga dan desain tampilan seperti di
gambar 23.
68. Ulangi langkah
40-45 dengan tema anggur di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("anggur"); di gambar keempat dan desain tampilan seperti
di gambar 24.
69. Ulangi langkah
40-45 dengan tema nanas di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("nanas"); di gambar kelima dan desain tampilan seperti di
gambar 25.
70. Ulangi langkah
40-45 dengan tema semangka di frame berbeda. Pada langkah 39 ubah menjadi
gotoAndPlay("semangka"); di gambar kelima dan desain tampilan seperti
di gambar 26.
71. Ulangi langkah
40-45 dengan tema semangka di frame berbeda. Pada langkah 41 ubah menjadi gotoAndPlay("menu");
dan desain tampilan seperti di gambar 27.
72. Klik pada
frame 1 di layer 1.
73. Pilih
button t_kuis dan tekan tombol F9. Ketikkan script seperti berikut:
on (release) {
gotoAndStop("kuis");
}
74. Klik kanan
pada frame 80. Pilih Insert Blank Keyframe.
75. Masukkan
gambar sebagai gambar latar belakang dan atur ukurannya seperti di langkah 5
dan langkah 6.
76. Masukkan
sebuah textbox dan isi dengan “Kuis 4 Sehat, 5 Sempurna” dengan ukuran font 40.
77. Buat
sebuah button dengan nama “t_mulai”. Tekan F9 dan ketikkan script berikut:
on (release) {
benar = 0;
salah = 0;
nextFrame();
}
78. Ulangi
langkah 207.
79. Desain
seperti di gambar 28.
80. Klik kanan
pada frame 81. Pilih Insert Blank Keyframe.
81. Masukkan
sebuah textbox dengan isi teks sebuah keterangan yang harus dipilih oleh
pengguna.
82. Masukkan 4
gambar yang harus dipilih pengguna. Masing-masing gambar dijadikan button.
83. Pada
gambar yang benar (sesuai dengan keterangan yang diberikan), ketikkan script:
on
(release) {
benar
+= 1;
nextFrame();
}
84. Pada
gambar yang salah (tidak sesuai dengan keterangan yang diberikan), ketikkan
script:
on
(release) {
salah += 1;
nextFrame();
}
85. Desain
seperti di gambar 29.
86. Ulangi langkah
80-85 di frame 82-90 dan dengan keterangan dan gambar yang berbeda.
87. Klik kanan
pada frame 91. Pilih Insert Blank Keyframe.
88. Masukkan
sebuah textbox dengan isi teks “Gambar apakah ini?”.
89. Masukkan
sebuah gambar yang menjadi sebuah gambar pertanyaan.
90. Masukkan 4
buah textbox yang akan menjadi jawaban dari pertanyaan yang diajukan.
91. Ubah 4
buah textbox tersebut menjadi button.
92. Pada
jawaban yang benar, ketikkan script seperti di langkah 83.
93. Pada
jawaban yang salah, ketikkan script seperti di langkah 84.
94. Desain
seperti di gambar 30.
95. Ulangi
langkah 87-94 di frame 92-100 dan dengan pertanyaan dan jawaban yang
berbeda-beda.
96. Klik kanan
pada frame 101. Pilih Insert Blank Keyframe.
97. Masukkan
sebuah textbox dengan isi teks “Pilih Jawaban” dengan ukuran font 32.
98. Masukkan
sebuah textbox dengan isi teks pertanyaan yang harus dijawab pengguna.
99. Masukkan 4
buah gambar yang akan menjadi jawaban dari pertanyaan yang diberikan.
100. Ubah 4
gambar tersebut menjadi button.
101. Pada
gambar yang menjadi jawaban yang benar, ketikkan script seperti di langkah 83.
102. Pada
gambar yang menjadi jawaban yang salah, ketikkan script seperti di langkah 84.
103. Desain
seperti di gambar 31.
104. Ulangi
langkah 96-103 di frame 102-105 dan dengan pertanyaan dan jawaban yang
berbeda-beda.
105. Klik
kanan pada frame 106. Pilih Insert Blank Keyframe.
106. Ulangi
langkah 97 dan 98.
107. Masukkan
4 buah textbox dengan isi textbox jawaban dari pertanyaan yang diberikan.
108. Ubah
masing-masing textbox menjadi button.
109. Pada
jawaban yang benar, ketikkan script seperti di langkah 83.
110. Pada
jawaban yang salah, ketikkan script seperti di langkah 84.
111. Desain
seperti di gambar 32.
112. Ulangi
langkah 105-111 di frame 106-110 dan dengan pertanyaan dan jawaban yang
berbeda-beda.
113. Klik
kanan pada frame 111. Pilih Insert Blank Keyframe.
114. Masukkan
sebuah gambar sebagai gambar latar belakang.
115. Masukkan
3 buah textbox dengan masing-masing isi teks “Benar:”, “Salah:”, dan “Nilai:”.
116. Masukkan
sebuah textbox ke dalam halaman. Ubah “Static Text” menjadi “Dynamic Text” pada
jendela properties. Berikan nama “jumlahbenar” pada Instance Name di jendela
properties.
117. Ulangi
langkah 116 sebanyak 2x dengan masing-masing nama “jumlahsalah” dan “nilai”.
118. Buat
sebuah button dengan textbox “Kembali”. Ketikkan script seperti berikut:
on(release) {
gotoAndStop("menu");
}
119. Klik pada
frame 111. Tekan tombol F9 dan ketikkan script seperti berikut:
stop();
jumlahbenar.text
= benar;
jumlahsalah.text
= salah;
nilai.text =
benar / 3;
120. Desain
seperti gambar 33.
121. Jalankan aplikasi dengan menekan Ctrl +
Enter.
DAFTAR GAMBAR
Gambar 1
Gambar 2
Gambar 3
Gambar 4
Gambar 5
Gambar 6
Gambar 7
Gambar 8
Gambar 9
Gambar 10
Gambar 11
Gambar 12
Gambar 13
Gambar 14
Gambar 15
Gambar 16
Gambar 17
Gambar 18
Gambar 19
Gambar 20
Gambar 21
Gambar 22
Gambar 23
Gambar 24
Gambar 25
Gambar 26
Gambar 27
Gambar 28
Gambar 29
Gambar 30
Gambar 31
Gambar 32
Gambar 33
Tidak ada komentar:
Posting Komentar