k suara dari
linkage bgm
2. musik.play(0,999); // memainkan musik loop 999x
3.
4. function atur_musik(e:MouseEvent):void{
5. var nama_tombol:String = e.currentTarget.name;
6. if (nama_tombol == "t_play"){
7. SoundMixer.stopAll();
8. musik.play(0,999);
9. }
10. if (nama_tombol == "t_mute"){
11. SoundMixer.stopAll(); //mengentikan semua suara
12. }
13. }
14.
15. t_play.addEventListener(MouseEvent.CLICK, atur_musik);
16. t_mute.addEventListener(MouseEvent.CLICK, atur_musik);
5. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka suara akan terdengar dan
dapat diatur dengan ke 2 tombol ini .
Memainkan File Suara di Luar Aplikasi
Cara lain dalam menambahkan audio ke aplikasi multimedia pembelajaran interaktif
yaitu dengan memainkan file suara yang berada di luar aplikasi. Keuntungan metode ini
yaitu ukuran file aplikasi yang tidak terpengaruh oleh ukuran file suara. Akan tetapi
kelemahan dari metode ini yaitu file suara harus selalu disertakan bersama aplikasi agar
tidak menghasilkan error. Untuk memahami proses membuka suara eksternal berikut
tombol pengatur suara seperti tombol play lagu, pause lagu dan stop lagu, ikuti langkah
berikut :
1. Siapkan file suara bertipe MP3 atau WAV lalu copy ke folder yang sama
dengan folder aplikasi, sebagai contoh digunakan file bernama bgm.mp3.
2. Buatlah sebuah file baru, lalu buatlah 5 buah tombol pengatur suara,
tambahkan instance name pada masing-masing tombol ini . (Lihat gambar).
Gambar 178. Tombol pengatur suara
3. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. var lagu:Sound = new Sound();
2. lagu.load(new URLRequest("bgm.mp3"));
3.
4. var musik:SoundChannel = new SoundChannel();
5. musik = lagu.play(0,1);
6.
7. var pengatur_suara:SoundTransform = new
SoundTransform();
8. var suara_aktif:Boolean = true;
9. var posisi:Number = 0;
10.
11. function tombolSuara(e:MouseEvent):void{
12. var nama_tombol:String = e.currentTarget.name;
13. if (nama_tombol == "t_play"){
14. if (! suara_aktif){
15. musik = lagu.play(posisi,1);
16. suara_aktif = true;
17. musik.soundTransform = pengatur_suara;
18. }
19. }
20. if (nama_tombol == "t_pause"){
21. posisi = musik.position;
22. musik.stop();
23. suara_aktif = false;
24. }
25. if (nama_tombol == "t_stop"){
26. posisi = 0;
27. musik.stop();
28. suara_aktif = false;
29. }
30. if (nama_tombol == "t_vol_min"){
31. pengatur_suara.volume = pengatur_suara.volume -
0.2;
32. if (pengatur_suara.volume <= 0){
33. pengatur_suara.volume = 0;
34. }
35. musik.soundTransform = pengatur_suara;
36. }
37. if (nama_tombol == "t_vol_plus"){
38. pengatur_suara.volume = pengatur_suara.volume +
0.2;
39. if (pengatur_suara.volume >= 1){
40. pengatur_suara.volume = 1;
41. }
42. musik.soundTransform = pengatur_suara;
43. }
44. }
45.
46. t_play.addEventListener(MouseEvent.CLICK, tombolSuara);
47. t_pause.addEventListener(MouseEvent.CLICK, tombolSuara);
141
48. t_stop.addEventListener(MouseEvent.CLICK, tombolSuara);
49. t_vol_min.addEventListener(MouseEvent.CLICK,
tombolSuara);
50. t_vol_plus.addEventListener(MouseEvent.CLICK,
tombolSuara);
4. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka suara akan terdengar dan
dapat diatur dengan tombol-tombol yang ada.
Menambahkan Video ke dalam Multimedia Pembelajaran
Menambahkan video ke dalam aplikasi Flash relatif mudah, hal ini di karenakan sejak
Flash Player 5 Flash sudah mendukung fitur import video, baik itu secara langsung
memasukkan video ke dalam aplikasi atau membuka file video yang berada di luar
aplikasi dengan metode streaming. Syarat utama yang harus dipenuhi yaitu file video
yang digunakan memiliki format yang bisa di"baca" oleh Flash Player. Saat ini kita dapat
memperoleh file video dengan berbagai format seperti AVI, WMV, 3GP, MOV, MKV,
FLV, MP4 dan sebagainya. Akan tetapi Flash hanya bisa membuka file-file jenis tertentu
dengan codec tertentu.
Pada umumnya file yang bisa dibaca oleh flash player yaitu FLV, AVI, MP4, dan
MPG. Cara termudah untuk mendeteksi apakah file video anda bisa dibaca oleh flash
yaitu dengan melakukan proses import, seperti yang akan dijelaskan berikutnya.
Apabila setelah dipublish video tidak muncul, berarti format video masih salah dan harus
anda ubah terlebih dahulu menjadi format FLV. Video yang anda unduh dari Youtube
misalnya atau situs sejenis biasanya berformat FLV, namun demikian file ini
biasanya tidak bisa anda import, hal ini dikarenakan codec yang berbeda - sehingga anda
harus mengconvert ulang file ini .
Untuk mengconvert video menjadi format lain anda bisa memakai software video
editor seperti Adobe Premiere, Windows Movie Maker, Videopad, dan sejenisnya.
Setelah file siap, pastikan file ini berada dalam satu folder yang sama dengan file
FLA aplikasi, hal ini akan mempermudah anda dalam menuliskan path (lokasi file
video). Selanjutnya ikuti langkah-langkah berikut :
1. Buatlah sebuah file baru atau melanjutkan projek yang sedang dikembangkan.
Selanjutnya klik frame tempat dimana anda akan meletakkan video ini .
lalu pilih menu File > Import > Import Video.
Gambar 179. Import video
2. lalu panel Select Video muncul. lalu klik browse dan pilih file
video yang akan anda import, selanjutnya klik tombol next.
Gambar 180. Panel Select video
3. lalu pada bagian Skinning, pilihlah skin yang anda inginkan. Skin yaitu
bagian dari video playback component yang dapat digunakan untuk mengontrol
video, skin disini memiliki tombol seperti play, pause, stop, dan tombol suara.
Tombol-tombol, ini dapat berfungsi secara otomatis tanpa menambahkan
kode. Selanjutnya klik tombol next.
Gambar 181. Skinning video
4. Lanjutkan proses dengan menekan tombol Next sampai dengan tombol Finish.
Setelah itu video akan muncul di stage, lengkap dengan skin nya.
143
5. Jalankan movie dengan menekan Ctrl+Enter dan test apakah video dapat
dimainkan. Apabila video tidak muncul, berarti ada kesalahan (yang paling
umum yaitu salah format, dan salah folder).
Gambar182. Video yang berhasil di import ke dalam aplikasi
6. Jika proses diatas benar, akan anda dapati video ini langsung di mainkan.
Ada dapat mengubah opsi video dengan membuka panel Properties di bagian
component parameter Pada panel ini terdapat beberapa opsi yang dapat
diubah seperti opsi auto play, skin, warna skin, auto hide dsb. Atur opsi ini
sesuai dengan kebutuhan.
Gambar 183. Pengaturan properties component video
Menambahkan tombol Play alternatif
Apabila anda tidak suka dengan skin yang telah disediakan dan ingin membuat tombol
alternatif pengatur video (seperti tombol play dan pause) maka ikutilah langkah-langkah
berikut :
7. Klik video, lalu buka Properties. Selanjutnya di bagian component
parameter pilih skin none untuk menghilangkan skin dari video ini .
8. buatlah sebuah layer baru di atas layer video, lalu ubah nama layer menjadi
layer tombol. Klik frame 1 layer tombol, lalu buatlah sebuah tombol
play.
Gambar 184.Tombol play alternatif
9. Untuk tombol stop atau pause kita membutuhkan sebuah tombol yang tidak
terlihat. Untuk membuatnya - Klik layer tombol, lalu buatlah sebuah kotak
dengan ukuran yang sama dengan ukuran video. Seleksi kotak ini dan
Convert to Symbol menjadi button dengan nama “invisible”.
10. Dobel klik tombol invisible, untuk mengeditnya. lalu drag keyframe UP
menuju frame HIT.
Gambar 185. Mengatur tombol invisible
145
11. Kembali ke scene 1 dengan menekan Ctrl+E.
12. Tahapan selanjutnya yaitu memberi instance name pada masing-masing object.
Berikan nama videoku untuk video, t_play untuk tombol play dan t_stop untuk
tombol invisible.
13. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 lalu saat n
kode berikut :
1. function klikVideo(e:MouseEvent):void{
2. var nama_tombol:String = e.currentTarget.name;
3. if (nama_tombol == "t_play"){
4. videoku.play();
5. t_play.visible = false;
6. t_stop.visible = true;
7. }
8. if (nama_tombol == "t_stop"){
9. videoku.stop();
10. t_play.visible = true;
11. t_stop.visible = false;
12. }
13. }
14.
15. t_play.addEventListener(MouseEvent.CLICK, klikVideo);
16. t_stop.addEventListener(MouseEvent.CLICK, klikVideo);
14. Jalankan aplikasi dengan menekan Ctrl+Enter. Klik pada video untuk
memainkan video dan klik kembali untuk menghentikan sementara (pause)
147
Bab X
Aplikasi Kuis
Salah satu bentuk kompleksitas dari multimedia pembelajaran interaktif yaitu adanya
evaluasi. Evaluasi dapat digunakan sebagai salah satu indikator atau tolak ukur untuk
menguji kefektifan penyampaian materi. Salah satu bentuk evaluasi yang umum
ditemukan yaitu kuis. Model kuis dengan soal yang acak dan jawaban acak menjadi
sebuah daya tarik tersendiri dalam sebuah media pembelajaran. Akan tetapi para pemula
pemrograman biasanya mengalami kesulitan dalam membuat sistem soal acak, jawaban
acak dan sistem penilaian. Pada tutorial berikut ini akan dijelaskan secara sederhana
tentang pembuatan kuis interaktif dengan sistem pengacakan soal, pengacakan jawaban
dan sistem penilaian. Hasil akhir dari aplikasi ini dapat dikembangkan lebih lanjut
menjadi sesuatu yang lebih kompleks semacam game Who Want to be Millionaire, Who
has biggest brain dan sebagainya. Hasil akhir yang diharapkan kurang lebih sebagai
berikut :
Gambar 186. Rencana layout kuis
Untuk membuat aplikasi kuis ini , perhatikan langkah-langkah berikut :
1. Buatlah sebuah file baru. Selanjutnya buatlah sebuah tampilan untuk aplikasi kuis
meliputi background, beberapa static text sebagai pemanis tampilan, dan
dynamic text untuk soal dan untuk score. Perhatikan gambar :
Gambar 187. Pengaturan awal asset aplikasi kuis
2. Seleksi dynamic text untuk soal lalu buka panel properties lalu atur
jenis huruf, matikan opsi selectable dan opsi line type menjadi multi line. Opsi
multi line digunakan agar sebuah dynamic text mampu menampilkan beberapa
baris teks. Selain itu anda harus menekan tombol embed untuk menyertakan file
huruf ke dalam aplikasi, sehingga aplikasi dapat dijalankan di semua tempat
tanpa mengalami distorsi huruf. Perhatikan gambar :
Gambar 188. Pengaturan dynamic text
3. Untuk membuat tombol pilihan jawaban, buatlah sebuah Movieclip baru dengan
memilih menu Insert > New Symbol. Berikan nama “alternatif jawaban” dan
registrasi point berada di tengah, lalu tekan OK.
Selanjutnya buatlah 2 buah Layer, pada Layer 2 (atas) buatlah sebuah dynamic
text untuk menampilkan jawaban. Klik dynamic text ini , buka panel
properties dan tambahkan instance name "jawaban_txt". Pada Layer 1
(bawah) buatlah sebuah background berupa kotak.
149
Untuk mendapatkan efek mouse over, klik frame 2 layer 1 tambahkan
KeyFrame (F6), lalu ubah warna background jawaban menjadi warna lain.
Selanjutnya klik frame 2 layer 2 dan tambahkan Frame (F5). (Catatan : Efek
mouse over dapat ditampilkan secara otomatis pada symbol bertipe button, akan
tetapi button atau tombol tidak dapat menampilkan objek lain seperti dynamic
text di dalamnya, sehingga kita harus memakai symbol bertipe Movieclip).
Perhatikan gambar :
Gambar 189. Susunan movieclip “alternatif jawaban”
4. Kembali ke Scene 1 dengan menekan Ctrl+E, lalu drag Movieclip
alternatif jawaban dari Library ke Stage sebanyak 4 kali. Atur posisinya
masing-masing.
5. Agar masing-masing objek dapat diakses oleh kode, maka perlu ditambahkan
instance name, klik objek, lalu buka panel properties, dan saat n
instance name sesuai dengan gambar berikut:
Gambar 190. Pengaturan instance name
6. lalu untuk menampilkan apakah jawaban pemain benar atau salah,
digunakan metode pop up dengan sedikit animasi. Untuk itu diperlukan sebuah
movieclip yang di dalamnya terdapat beberapa pesan pop up.
Untuk membuatnya buatlah sebuah tampilan popup saat jawaban benar seperti
pada gambar, lalu seleksi dan Convert to Symbol dengan nama hasil_mc,
registrasi point tepat di tengah, centang opsi Export for Actionscript, lalu tekan
OK. Perhatikan gambar :
Gambar 191. Pengaturan popup jawaban pada movieclip “hasil_mc”
7. Edit Movieclip hasil_mc dengan cara dobel klik movieclip ini , lalu
klik frame 2 dan tambahkan Keyframe (F6), lalu edit konten di frame 2 menjadi
tampilan saat jawaban salah. Dengan cara yang sama pada frame 3 buatlah
tampilan saat permainan berakhir (soal telah habis). Perhatikan gambar :
Gambar 192. Struktur movieclip “hasil_mc”
8. Keluar dari mode edit dengan menekan Ctrl+E. lalu buatlah sebuah
layer baru (layer 2). Klik frame 1 layer 2 lalu saat n kode berikut :
151
1. var nilai:Number = 0;
2. var no_soal:Number = 0;
3. var max_soal:Number = 10;
4. var hasil:hasil_mc;
5. // struktur soal [0]= Soal [1-4]= jawaban, Jawaban benar
diletakkan no 1
6. var soal:Array = [["Siapakah penemu mesin uap ?", "James
Watt", "Davinci", "Issac Newton", "James bond"],
7. ["Akar dari 676 yaitu ?", "26", "24",
"16", "34"],
8. ["Bagian tumbuhan yang berperan penting
dalam fotosintesis yaitu ?", "Klorofil", "Kambium",
"Epidermis", "Kromatin"],
9. ["Penulis trilogi Lord of The Ring
yaitu ?", "JRR Tolkien", "JK Rowling", "J Cameron", "J
Thomas"],
10. ["Jumlah seluruh sudut segitiga siku-siku
yaitu ?", "180", "270", "90", "360"],
11. ["Provinsi termuda di Indonesia yaitu ? ",
"Banten", "Bangka belitung", "Batam", "Gorontalo"],
12. ["Hukum gravitasi ditemukan oleh ? ",
"Issac Newton", "Einstein", "T. A. Edison", "Kopernicus"],
13. ["(sin 30) x 8 + (sin 90) = ? ", "5", "8",
"0", "1"],
14. ["Penemu arus listrik bolak balik yaitu ?
", "Nicola Tesla", "T. Alpha Edison", "James Watt", "A.
Graham bell"],
15. ["Komponen elektronik yang mengubah arus
bolak-balik menjadi searah yaitu ? ", "Diode",
"Transistor", "Resistor", "Trafo"],
16. ["Planet ke 5 dari Matahari yaitu ?",
"Yupiter", "Mars", "Uranus", "Saturnus"],
17. ["Dinosaurus terbesar dalam film Jurrasic
World yaitu ?", "Mousaurus", "Indominus Rex",
"Tyranosaurus", "Spinosaurus"],
18. ["Gedung tertinggi di dunia sampai dengan
2015 yaitu ?", "Burj Al Khaifa", "Burj Dubai", "Beijing
Tower", "Petronas"],
19. ["Pesawat komersial dengan kapasitas
terbesar di dunia yaitu ?", "Airbus 380", "Boeing 777",
"Beluga", "Antonov"],
20. ["Juara Dunia MotoGP 2014 yaitu ?", "Mark
Marquez", "Jorge Lorenzo", "Valentino Rossi", "Dani
Pedrosa"]];
21.
22.
23. var temp_soal:Array;
24. var temp_jawaban:Array;
25.
26. function acak_soal():void{
27. //mengacak soal
28. temp_soal = soal.slice(0, soal.length);
29. for (var i:Number = 0; i < soal.length; i++){
30. var acak:Number =
Math.floor(Math.random()*soal.length);
31. var temp:Array = temp_soal[acak];
32. temp_soal[acak] = temp_soal[i];
33. temp_soal[i] = temp;
34. }
35. }
36. function restart():void{
37. //restart kuis, semua variabel reset
38. acak_soal();
39. nilai = 0;
40. no_soal = 0;
41. max_soal = 10;
42. score_txt.text = "0";
43. restart_btn.visible = false;
44. }
45.
46. function tampilkan_soal():void{
47. //tampilkan soal
48. soal_txt.text = temp_soal[no_soal][0];
49. //acak jawaban
50. temp_jawaban = temp_soal[no_soal].slice(1, 5);
51. for (var i:Number = 0; i < temp_jawaban.length; i++){
52. var acak:Number =
Math.floor(Math.random()*temp_jawaban.length);
53. var temp:String = temp_jawaban[acak];
54. temp_jawaban[acak] = temp_jawaban[i];
55. temp_jawaban[i] = temp;
56. }
57. //tampilkan jawaban
58. jawaban_1.jawaban_txt.text = temp_jawaban[0];
59. jawaban_2.jawaban_txt.text = temp_jawaban[1];
60. jawaban_3.jawaban_txt.text = temp_jawaban[2];
61. jawaban_4.jawaban_txt.text = temp_jawaban[3];
62. }
63.
64. function setup_awal():void{
65. restart();
66. tampilkan_soal();
67. //mengatur jawaban
68. jawaban_1.stop();
69. jawaban_2.stop();
70. jawaban_3.stop();
71. jawaban_4.stop();
72. jawaban_1.addEventListener(MouseEvent.CLICK,
cek_jawaban);
73. jawaban_2.addEventListener(MouseEvent.CLICK,
cek_jawaban);
74. jawaban_3.addEventListener(MouseEvent.CLICK,
cek_jawaban);
75. jawaban_4.addEventListener(MouseEvent.CLICK,
cek_jawaban);
76. //listener untuk efek tombol
153
77. jawaban_1.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
78. jawaban_2.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
79. jawaban_3.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
80. jawaban_4.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
81. //mouse out
82. jawaban_1.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
83. jawaban_2.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
84. jawaban_3.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
85. jawaban_4.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
86. //tombol restart
87. restart_btn.addEventListener(MouseEvent.CLICK,
ulangi);
88. }
89. function mouse_over(e:MouseEvent):void{
90. e.currentTarget.gotoAndStop(2);
91. }
92.
93. function mouse_out(e:MouseEvent):void{
94. e.currentTarget.gotoAndStop(1);
95. }
96.
97. function cek_jawaban(e:MouseEvent):void{
98. var no_jawaban:Number =
Number(e.currentTarget.name.substr(8))-1;
99. if (temp_jawaban[no_jawaban] ==
temp_soal[no_soal][1]){
100. //jawaban benar
101. tampilkan_hasil(1);
102. nilai+=10;
103. score_txt.text = String(nilai);
104. }else{
105. //jawaban salah
106. tampilkan_hasil(2);
107. }
108. }
109.
110. function tampilkan_hasil(tp:Number):void{
111. hasil = new hasil_mc();
112. hasil.x = 400;
113. hasil.y = 275;
114. hasil.gotoAndStop(tp);
115. hasil.scaleX = 0.2;
116. hasil.scaleY = 0.2;
117. hasil.waktu = 0;
118. hasil.tp = tp;
119. hasil.addEventListener(Event.ENTER_FRAME,
gerak_hasil);
120. addChild(hasil);
121. }
122.
123. function gerak_hasil(e:Event):void{
124. var ob:Object = e.currentTarget;
125. if (ob.scaleX < 1){
126. ob.scaleX+=0.1;
127. ob.scaleY+=0.1;
128. }
129. if (ob.waktu > -1 && ob.tp < 3){
130. ob.waktu++;
131. if (ob.waktu > 60){
132. ob.waktu = -1;
133. //tambah no soal
134. no_soal++;
135. ob.removeEventListener(Event.ENTER_FRAME,
gerak_hasil);
136. removeChild(DisplayObject(ob));
137. if (no_soal < max_soal){
138. tampilkan_soal();
139. }else{
140. tampilkan_hasil(3);
141. restart_btn.visible = true;
142. }
143. }
144. }
145. }
146. function ulangi(e:MouseEvent):void{
147. hasil.removeEventListener(Event.ENTER_FRAME,
gerak_hasil);
148. removeChild(DisplayObject(hasil));
149. restart();
150. tampilkan_soal();
151. }
152. setup_awal();
9. Jalankan aplikasi dengan menekan Ctrl+Enter. Ujicoba kuis mulai dari awal
sampai akhir, dan restart kembali. Jika langkah benar, maka akan dihasilkan kuis
yang dinamis dari sisi pengacakan kuis, jawaban, dan penilaian.
Untuk pengembangan selanjutnya kuis ini dapat ditambahkan waktu dan variasi
soal dengan memakai XML sebagai database soal.
155
Membuka data XML
XML (eXtended Markup Language) yaitu sebuah bahasa markup yang dapat digunakan
untuk keperluan penyimpanan data secara ringkas dengan format yang dibakukan oleh
W3C (format standar untuk pengkodean web / HTML). XML memiliki format yang
sangat sederhana dan dapat diakses oleh beberapa aplikasi termasuk oleh kode
Actionscript. Contoh dari XML sederhaa yaitu sebagai berikut:
Gambar 193. Contoh XML
Pada contoh XML di atas, terdapat beberapa tag < > yang dapat didefinisikan secara
bebas. Tag pertama yaitu <datasoal> berisi tag <soal>, selanjutnya di dalam tag soal
ini terdapat beberapa tag seperti tag <tanya> dan tag <jawab>. Setiap tag disebut
sebagai node dan nilai dari masing-masing tag disebut sebagai node value. Untuk
menuliskan kode XML ini dapat dilakukan dengan text editor sederhana seperti
Notepad++.
Untuk memahami cara pemakaian XML perhatikan contoh berikut :
1. Buatlah sebuah file XML dengan memakai aplikasi Notepad seperti pada
contoh berikut. Tambahkan data soal sesuai kebutuhan. lalu simpan
dengan nama dataSoal.XML.
<datasoal>
<soal>
<tanya>Siapakah penemu mesin uap ?</tanya>
<jawab1>James Watt</jawab1>
<jawab2>Davinci</jawab2>
<jawab3>Issac Newton</jawab3>
<jawab4>James bond</jawab4>
</soal>
<soal>
<tanya>Provinsi termuda yaitu ?</tanya>
<jawab1>Banten</jawab1>
<jawab2>Bangka belitung</jawab2>
<jawab3>Batam</jawab3>
<jawab4>Gorontalo</jawab4>
</soal>
dst......
<dataSoal>
2. Selanjutnya buat file baru Flash. Klik frame 1 layer 1, lalu buka panel
Action (F9) dan saat n kode berikut :
1. var databaseSoal:XML;
2. var loader:URLLoader = new URLLoader();
3. loader.load(new URLRequest("dataSoal.xml"));
4. loader.addEventListener(Event.COMPLETE, olahData);
5.
6. function olahData(e:Event):void {
7. databaseSoal = new XML(e.target.data);
8. for (var i:int = 0; i < databaseSoal.*.length(); i++){
9. trace((i+1) + ". soal = " +
databaseSoal.soal[i].tanya)
10. trace ("a. "+databaseSoal.soal[i].jawab1);
11. trace ("b. "+databaseSoal.soal[i].jawab2);
12. trace ("c. "+databaseSoal.soal[i].jawab3);
13. trace ("d. "+databaseSoal.soal[i].jawab4);
14. };
15. }
3. Simpan file pada folder yang sama dengan tempat file XML, lalu jalankan
dengan menekan Ctrl+Enter. Maka akan didapati soal dan jawaban tampil pada
output panel.
Mengintegrasi XML ke dalam aplikasi kuis
Setelah memahami proses membuka file XML dan mengolah data yang ada, maka
metode ini dapat diintegrasikan ke dalam aplikasi kuis yang telah dibuat
sebelumnya dengan metode Array. Untuk melakukannya, ubah kode pada aplikasi kuis
di atas, menjadi sebagai berikut :
1. var nilai:Number = 0;
2. var no_soal:Number = 0;
3. var max_soal:Number = 10;
4. var hasil:hasil_mc;
5. var soal:Array = [];
6.
7. var temp_soal:Array;
157
8. var temp_jawaban:Array;
9.
10. var databaseSoal:XML;
11. var loader:URLLoader = new URLLoader();
12. loader.load(new URLRequest("dataSoal.xml"));
13. loader.addEventListener(Event.COMPLETE, olahData);
14.
15. function olahData(e:Event):void {
16. databaseSoal = new XML(e.target.data);
17. for (var i:int = 0; i < databaseSoal.*.length(); i++){
18. var dataSoal:Array = new Array();
19. dataSoal.push(databaseSoal.soal[i].tanya);
20. dataSoal.push(databaseSoal.soal[i].jawab1);
21. dataSoal.push(databaseSoal.soal[i].jawab2);
22. dataSoal.push(databaseSoal.soal[i].jawab3);
23. dataSoal.push(databaseSoal.soal[i].jawab4);
24. soal.push(dataSoal);
25. };
26. setup_awal();
27. }
28.
29. function acak_soal():void{
30. //mengacak soal
31. temp_soal = soal.slice(0, soal.length);
32. for (var i:Number = 0; i < soal.length; i++){
33. var acak:Number =
Math.floor(Math.random()*soal.length);
34. var temp:Array = temp_soal[acak];
35. temp_soal[acak] = temp_soal[i];
36. temp_soal[i] = temp;
37. }
38. }
39. function restart():void{
40. //restart kuis, semua variabel dikembalikan ke posisi
semula
41. acak_soal();
42. nilai = 0;
43. no_soal = 0;
44. max_soal = 10;
45. score_txt.text = "0";
46. restart_btn.visible = false;
47. }
48.
49. function tampilkan_soal():void{
50. //tampilkan soal
51. soal_txt.text = temp_soal[no_soal][0];
52. //acak jawaban
53. temp_jawaban = temp_soal[no_soal].slice(1, 5);
54. for (var i:Number = 0; i < temp_jawaban.length; i++){
55. var acak:Number =
Math.floor(Math.random()*temp_jawaban.length);
56. var temp:String = temp_jawaban[acak];
57. temp_jawaban[acak] = temp_jawaban[i];
58. temp_jawaban[i] = temp;
59. }
60. //tampilkan jawaban
61. jawaban_1.jawaban_txt.text = temp_jawaban[0];
62. jawaban_2.jawaban_txt.text = temp_jawaban[1];
63. jawaban_3.jawaban_txt.text = temp_jawaban[2];
64. jawaban_4.jawaban_txt.text = temp_jawaban[3];
65. }
66.
67. function setup_awal():void{
68. restart();
69. tampilkan_soal();
70. //mengatur jawaban
71. jawaban_1.stop();
72. jawaban_2.stop();
73. jawaban_3.stop();
74. jawaban_4.stop();
75. jawaban_1.addEventListener(MouseEvent.CLICK,
cek_jawaban);
76. jawaban_2.addEventListener(MouseEvent.CLICK,
cek_jawaban);
77. jawaban_3.addEventListener(MouseEvent.CLICK,
cek_jawaban);
78. jawaban_4.addEventListener(MouseEvent.CLICK,
cek_jawaban);
79. //listener untuk efek tombol
80. jawaban_1.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
81. jawaban_2.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
82. jawaban_3.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
83. jawaban_4.addEventListener(MouseEvent.MOUSE_OVER,
mouse_over);
84. //mouse out
85. jawaban_1.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
86. jawaban_2.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
87. jawaban_3.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
88. jawaban_4.addEventListener(MouseEvent.MOUSE_OUT,
mouse_out);
89. //tombol restart
90. restart_btn.addEventListener(MouseEvent.CLICK,
ulangi);
91. }
92.
93. function mouse_over(e:MouseEvent):void{
94. e.currentTarget.gotoAndStop(2);
95. }
96.
97. function mouse_out(e:MouseEvent):void{
98. e.currentTarget.gotoAndStop(1);
99. }
159
100.
101. function cek_jawaban(e:MouseEvent):void{
102. var no_jawaban:Number =
Number(e.currentTarget.name.substr(8))-1;
103. if (temp_jawaban[no_jawaban] ==
temp_soal[no_soal][1]){
104. //jawaban benar
105. tampilkan_hasil(1);
106. nilai+=10;
107. score_txt.text = String(nilai);
108. }else{
109. //jawaban salah
110. tampilkan_hasil(2);
111. }
112. }
113.
114. function tampilkan_hasil(tp:Number):void{
115. hasil = new hasil_mc();
116. hasil.x = 400;
117. hasil.y = 275;
118. hasil.gotoAndStop(tp);
119. hasil.scaleX = 0.2;
120. hasil.scaleY = 0.2;
121. hasil.waktu = 0;
122. hasil.tp = tp;
123. hasil.addEventListener(Event.ENTER_FRAME,
gerak_hasil);
124. addChild(hasil);
125. }
126.
127. function gerak_hasil(e:Event):void{
128. var ob:Object = e.currentTarget;
129. if (ob.scaleX < 1){
130. ob.scaleX+=0.1;
131. ob.scaleY+=0.1;
132. }
133. if (ob.waktu > -1 && ob.tp < 3){
134. ob.waktu++;
135. if (ob.waktu > 60){
136. ob.waktu = -1;
137. //tambah no soal
138. no_soal++;
139. ob.removeEventListener(Event.ENTER_FRAME,
gerak_hasil);
140. removeChild(DisplayObject(ob));
141. if (no_soal < max_soal){
142. tampilkan_soal();
143. }else{
144. tampilkan_hasil(3);
145. restart_btn.visible = true;
146. }
147. }
148. }
149. }
150.
151. function ulangi(e:MouseEvent):void{
152. hasil.removeEventListener(Event.ENTER_FRAME,
gerak_hasil);
153. removeChild(DisplayObject(hasil));
154. restart();
155. tampilkan_soal();
156. }
Penjelasan program :
Jika sebelumnya format soal diatur dalam variabel soal yang bertipe Array, maka pada
contoh ini variabel soal bernilai Array kosong ( [ ] ). Selanjutnya dengan fungsi
olahData, file XML yang berisi data base soal dibuka. Dengan memakai operasi
berulang for loops, data dari tiap-tiap node XML dimasukkan ke dalam variabel soal
dengan memakai metode array push. Dengan cara ini variabel soal akan
terbentuk secara otomatis, sesuai dengan data XML yang terbaca. Setelah proses
pembentukan variabel soal selesai, maka fungsi setup_awal() baru dijalankan.
Candy Eye (Pemanis Tampilan)
Multimedia interaktif sebagai produk desain harus memenuhi prinsip AIDA (Attention –
Interest – Desire – Action), dimana kesan pertama dari aplikasi harus baik sehingga
menarik pengguna untuk menjelajahi media lebih lanjut. Salah satu upaya untuk
memberikan kesan pertama yang baik yaitu dengan memberikan pemanis tampilan atau
diistilahkan dengan candy eye. Beberapa efek sederhana seperti kursor mouse
bergambar, percikan bintang, efek zoom dan sebagainya akan menambah daya tarik
multimedia pembelajaran.
Mengubah kursor mouse
Mouse trail atau objek mengikuti mouse atau mengganti kursor mouse dengan gambar
lain sangat menarik untuk ditambahkan dalam sebuah aplikasi multimedia. Pada
dasarnya untuk mengubah kursor mouse, kita hanya membutuhkan sebuah objek (bisa
berupa moveclip dan mengubah kordinat layar objek ini mengikuti kordinat mouse.
Untuk mendeteksi posisi mouse dengan AS 3, kita dapat memakai kode mouseX
dan mouseY. Setelah itu cukup ditambahkan sebuah listener yang dijalankan secara terus
menerus - yang mengubah posisi objek agar sesuai dengan posisi mouse. Untuk lebih
jelasnya ikuti langkah berikut:
1. Buatlah sebuah file baru. Selanjutnya buatlah movieclip baru yang akan
digunakan sebagai kursor mouse dengan nama tawon.
Gambar 194. Animasi frame by frame movieclip tawon
2. lalu klik movieclip tawon ini , buka panel properties dan saat n
tawon pada kolom instance name.
3. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 lalu saat n
kode berikut :
1. //menyembunyikan kursor mouse
2. Mouse.hide();
3.
4. function ikut_mouse(e:Event):void{
5. tawon.x = mouseX;
6. tawon.y = mouseY;
7. }
8.
9. tawon.addEventListener(Event.ENTER_FRAME, ikut_mouse);
4. Jalankan aplikasi dengan menekan Ctrl+Enter, maka kursor mouse akan
digantikan oleh movieclip tawon.
5. Untuk membuat gerakan tawon lebih natural dapat ditambahkan perlambatan,
sehingga gerakan tawon menjadi lebih lembut dalam mengikuti kursor mouse.
Untuk melakukannya, ubah kode menjadi sebagai berikut :
1. var perlambatan:Number = 20;
2.
3. function ikut_mouse(e:Event):void{
4. tawon.x+= (mouseX-tawon.x)/perlambatan;
5. tawon.y+= (mouseY-tawon.y)/perlambatan;
6. }
7.
8. tawon.addEventListener(Event.ENTER_FRAME, ikut_mouse);
6. Jalankan kembali aplikasi dengan menekan Ctrl+Enter.
Efek Starburst (Percikan bintang)
Salah satu efek yang populer dipakai dalam beberapa aplikasi multimedia yaitu efek
percikan bintang (starburst), contoh saat pengguna selesai melakukan aktifitas tertentu,
saat nilai evaluasi muncul, dan sebagainya. Untuk membuat efek ini perhatikan
langkah berikut :
1. Buatlah file baru. Selanjutnya dengan memakai Polystar Tool, buatlah
sebuah bintang dengan ukuran yang tidak terlalu besar (40 x 40pixel).
163
2. Seleksi bintang ini lalu Convert to Symbol menjadi movieclip
“bintang_mc”, registrasi point tepat di tengah dan centang opsi Export for
Actionscript dengan nama class “bintang_mc”.
Gambar 195. Movieclip “bintang_mc”
3. Hapus movieclip ini dari layar. Selanjutnya klik frame 1 layer 1, buka
panel Action dan saat n kode berikut :
1. function gerakBintang(e:Event):void{
2. var ob:Object = e.currentTarget;
3. ob.x += ob.kecX;
4. ob.y += ob.kecY;
5. ob.kecY++;
6. ob.waktu--;
7. ob.scaleX *= 0.95;
8. ob.scaleY *= 0.95;
9. if (ob.waktu < 0){
10. ob.removeEventListener(Event.ENTER_FRAME,
gerakBintang);
11. removeChild(DisplayObject(ob));
12. }
13. }
14.
15. function tambahBintang(px:int, py:int):void{
16. var bintang:bintang_mc = new bintang_mc;
17. bintang.x = px;
18. bintang.y = py;
19. bintang.kecX = Math.random()*10 - Math.random()*10;
20. bintang.kecY = -Math.random()*15;
21. bintang.waktu = 20 + Math.random()*20;
22. bintang.scaleX = 0.2 + Math.random();
23. bintang.scaleY = bintang.scaleX;
24. bintang.addEventListener(Event.ENTER_FRAME,
gerakBintang);
25. addChild(bintang);
26. }
27.
28. function starBurst(e:MouseEvent):void{
29. for (var i:int = 0; i < 20; i++){
30. tambahBintang(mouseX, mouseY);
31. }
32. }
33.
34. stage.addEventListener(MouseEvent.CLICK, starBurst);
4. Jalankan aplikasi dengan menekan Ctrl+Enter. Klik di area stage untuk
menampilkan efek percikan bintang.
Gambar 196. Hasil efek percikan bintang.
Menampilkan Waktu
Sering kita temui dalam sebuah aplikasi atau widget sebuah blog yang menampilkan
waktu secara realtime. Waktu dalam aplikasi terkadang juga dapat berfungsi sebagai
pengingat, time counter, limitasi pemakaian software dan sebagainya. Untuk
menampilkan waktu dengan kode Actionscript sebenarnya cukup mudah, yaitu dengan
memakai class Date. Untuk lebih jelasnya ikuti langkah berikut :
1. Buatlah file baru. Selanjutnya dengan memakai Text Tool buatlah sebuah
Dynamic Text. Selanjutnya buka panel properties, berikan instance name
“waktu_txt” dan atur beberapa parameter seperti ukuran font, jenis font, warna,
paragraf dan opsi selectable. Jangan lupa untuk mengembed font agar tampil
baik di semua platform.
2. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 lalu saat n
kode berikut :
1. var nama_hari:Array = ["Minggu", "Senin", "Selasa",
"Rabu", "Kamis", "Jumat", "Sabtu"];
2. var nama_bulan:Array = ["Jan", "Feb", "Mar", "Apr",
"Mei", "Jun", "Jul", "Ags", "Sep", "Okt", "Nov", "Des"];
3. var waktu:Date = new Date();
4.
5. function update_waktu(e:Event):void{
6. var waktu_sekarang:String = "";
7. var waktu:Date = new Date();
8. waktu_sekarang = nama_hari[waktu.getDay()]+",
"+waktu.getDate()+" "+nama_bulan[waktu.getMonth()]+"
"+waktu.getFullYear()+".
165
"+waktu.getHours()+":"+waktu.getMinutes()+":"+waktu.getS
econds();
9. waktu_txt.text = waktu_sekarang;
10. }
11.
12. addEventListener(Event.ENTER_FRAME, update_waktu);
3. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka akan didapati tampilan
waktu secara realtime berdasarkan waktu aktif komputer.
Gambar 197. Tampilan waktu
4. Untuk menambahkan gambar jam klasik dengan jarum, buatlah 3 buah
movieclip jarum (detik, menit dan jam) dan 1 background lingkaran. Tambahkan
instance name “detik”, “menit” dan “jam”, lalu atur posisinya sesuai
gambar.
Gambar 198. Pengaturan jarum jam
5. Ubah kode pada frame 1 layer 2 menjadi sebagai berikut :
1. var nama_hari:Array = ["Minggu", "Senin", "Selasa",
"Rabu", "Kamis", "Jumat", "Sabtu"];
2. var nama_bulan:Array = ["Jan", "Feb", "Mar", "Apr",
"Mei", "Jun", "Jul", "Ags", "Sep", "Okt", "Nov", "Des"];
3. var waktu:Date = new Date();
4.
5. function update_waktu(e:Event):void{
6. var waktu_sekarang:String = "";
7. var waktu:Date = new Date();
8. waktu_sekarang = nama_hari[waktu.getDay()]+",
"+waktu.getDate()+" "+nama_bulan[waktu.getMonth()]+"
"+waktu.getFullYear()+".
"+waktu.getHours()+":"+waktu.getMinutes()+":"+waktu.getS
econds();
9. waktu_txt.text = waktu_sekarang;
10. //menampilkan waktu pada jarum jam
11. detik.rotation = waktu.getSeconds()*6;
12. menit.rotation = waktu.getMinutes()*6;
13. jam.rotation = waktu.getHours()*30;
14. }
15.
16. addEventListener(Event.ENTER_FRAME, update_waktu);
6. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka akan didapati tampilan
jarum jam yang tepat.
Gambar 199. Tampilan jarum jam
Pada contoh diatas digunakan listener ENTER_FRAME, agar fungsi update_waktu
dijalankan secara terus menerus. Di dalam fungsi ini terdapat kode var
waktu:Date = new Date(); sehingga aplikasi secara terus menerus mengambil data
waktu yang aktif pada komputer pengguna, lalu beberapa kode seperti getDay,
getDate dan sebagainya digunakan untuk mengakses detail dari class Date.
Pada baris awal terdapat variabel bertipe array yaitu nama_hari dan nama_bulan,
variabel ini diperlukan karena kode getDay() dan getMonth() menghasilkan nilai
bertipe Number antara 0 - 7 untuk day dan 0-11 untuk month. Dengan variabel array,
kita dapat menampilkan nama hari/bulan berdasarkan nilai yang dihasilkan, sebagai
contoh getMonth() menghasilkan nilai 11, maka yang akan muncul yaitu
nama_bulan[11] yaitu "Des".
Membuka file SWF Eksternal
Pada beberapa kasus tertentu, diperlukan akses file SWF dari luar aplikasi. Sebagai
contoh untuk menambahkan intro (animasi di awal) aplikasi, membuka materi berupa
animasi SWF dan sejenisnya. Perhatikan langkah-langkah berikut, dimana aplikasi akan
membuka sebuah file swf animasi bumi dan bulan yang telah dibuat sebelumnya.
1. Buatlah sebuah file baru. Selanjutnya pastikan file yang akan dibuka berada di
folder yang sama.
2. Buatlah 2 buah tombol untuk membuka dan menutup file, lalu tambahkan
instance name “tombol_buka” dan “tombol_tutup”. Letakkan di bagian kiri
bawah layar.
3. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 lalu saat n
kode berikut :
1. var nama_file:String = "animasi bumi bulan.swf";
2. var loader:MovieClip = new MovieClip();
3. var terbuka:Boolean = false;
4. addChild(loader);
5.
6. function bukaFile(e:MouseEvent):void{
7. if (!terbuka){
8. terbuka = true;
9. var fileSWF:Loader = new Loader();
10. var link:URLRequest = new URLRequest(nama_file);
11. fileSWF.load(link);
12. loader.addChild(fileSWF);
13. }
14. }
15.
16. function tutupFile(e:MouseEvent):void{
17. removeChild(loader);
18. loader = new MovieClip();
19. addChild(loader);
20. terbuka = false;
21. }
22.
23. tombol_buka.addEventListener(MouseEvent.CLICK,
bukaFile);
24. tombol_tutup.addEventListener(MouseEvent.CLICK,
tutupFile);
4. Simpan, lalu jalankan aplikasi dengan menekan Ctrl+Enter. Lalu coba klik
tombol buka dan tombol tutup, jika proses benar maka file SWF yang berada di
luar aplikasi dapat dibuka dan ditutup.
Gambar 200. Hasil aplikasi membuka file SWF.
Penambahan efek visual untuk mempercantik tampilan multimedia pembelajaran masih
dapat dikembangkan lagi seiring berkembangnya pemahaman kita terhadap pemakaian
kode.
Publishing
Langkah terakhir dalam proses pengembangan media pembelajaran interaktif yaitu
publishing. Publishing berarti menjadikan proyek yang kita buat menjadi aplikasi yang
dapat dijalankan di komputer pengguna. Flash versi terbaru mendukung beberapa output
diantaranya yaitu :
1. SWF (Desktop dan Web Browser)
File bertipe SWF merupakan file output standart yang dihasilkan oleh aplikasi
flash. File bertipe SWF dapat dijalankan langsung pada PC Desktop apabila
memiliki aplikasi Flash Player (yang dapat di download di situs Adobe), atau
dijalankan di browser yang telah terinstall plugin flash player.
2. Windows Projector (.exe Desktop)
Format Windows projector akan menghasilkan file bertipe EXE yang dapat
dijalankan secara langsung oleh PC Desktop, meskipun komputer pengguna tidak
memiliki aplikasi Flash player.
3. Adobe AIR (Desktop installer)
Format Adobe AIR hampir sama dengan format Windows Projector (.exe).
Dengan format Adobe AIR hasil akhir akan berekstensi .air dan dapat diinstall di
desktop sebagaimana aplikasi berekstensi exe.
4. HTML 5 (Web Browser)
Standart baru HTML yaitu HTML 5 memiliki fitur baru yaitu canvas.
Mempublish flash dengan output HTML 5 akan menghasilkan file HTML yang
menghandle aplikasi flash dalam format HTML canvas.
5. AIR for Android (APK)
Format baru AIR for Android ditujukan untuk pengguna mobilephone berbasis
android.
6. AIR for iOS (IPA)
7. Format baru AIR for iOS akan menghasilkan file berekstensi IPA dan ditujukan
untuk pengguna mobilephone berbasis iOS.
Mempublish Aplikasi untuk PC Desktop
Untuk menghasilkan file bertipe exe untuk media pembelajaran interaktif yang
dijalankan di PC Desktop, perhatikan langkah-langkah berikut :
1. Bukalah projek yang akan dipublish, pastikan semua kode telah bekerja dengan
baik. Pilih menu File>Publish Setting. Agar menghasilkan file bertipe exe,
centang opsi Windows Projector (.exe). lalu klik sub option Flash lalu
naikkan opsi JPEG quality menjadi 100 agar gambar tidak terdistorsi.
Gambar 201. Publish settings
2. Tekan tombol Publish, setelah proses publishing selesai, maka akan
menghasilkan 3 buah file yaitu file bertipe EXE, SWF dan HTML. Buka
Windows explorer anda dan jalankan file yang bertipe EXE (Aplication). Jika
proses yang anda lakukan benar, saat ini movie anda sudah menjadi sebuah
Interactive Multi Media yang bisa dijalankan di sebagian besar komputer .
Gambar 202. Hasil proses publishing bertipe exe.
171
Pada dasarnya proses publishing tidak berhenti sampai disini, terdapat beberapa hal yang
harus ditambahkan dan diperhatikan, diantaranya yaitu :
1. Tampilan media pembelajaran interaktif yang baik yaitu tampil fullscreen.
Untuk menjadikan fullscreen, pada awal kode tambahkan kode berikut :
stage.displayState = StageDisplayState.FULL_SCREEN;
2. Penambahan intro, tombol keluar, dan beberapa pemanis tampilan seperti
animasi, kursor yang kustom dan sebagainya dapat menambah daya tarik media.
3. Aplikasi dapat dipublish ulang memakai software-software tambahan untuk
menambah fitur seperti mencegah klik kanan, menganti icon, membuat installer
dan sebagainya. Salah satu aplikasi yang dapat dipakai yaitu aplikasi MDM
Zinc.
4. Konten aplikasi dapat menampilkan objek 3 dimensional. Untuk menambahkan
fitur 3 Dimensi digunakan aplikasi tambahan seperti Flare3D atau Away 3D dan
akan dibahas di buku lain.
Mempublish menjadi Aplikasi Mobile Android
Pengguna mobile phone berbasi Android di Indonesia sangatlah besar. Hampir 50 juta
pengguna di tahun 2016 merupakan sebuah peluang untuk mempublikasikan media
pembelajaran melalui platform Android. Pada dasarnya mempublish projek Flash
menjadi aplikasi Android tidak terlalu sulit, hanya saja fitur ini dimiliki oleh aplikasi
Flash terbaru seperti Adobe CS6 ke atas dan versi terbaru yaitu Adobe Animate CC.
Pada contoh berikut, projek dipublish dengan memakai aplikasi Adobe Animate
CC. Untuk lebih jelasnya perhatikan langkah berikut :
1. Bukalah projek yang akan dipublish, pastikan semua kode telah bekerja dengan
baik. Pilih menu File>Publish Setting. Pada opsi target pilih AIR for Android.
Gambar 203. Target AIR for Android
2. Sebelum menekan tombol Publish, terdapat beberapa seting yang harus diatur
terkait dengan kebutuhan spesifik untuk mobile phone. Untuk itu klik ikon kunci
pas di pojok kanan atas.
Gambar 204. Tombol setting
3. Pada General Setting, saat n nama pada kolom Outputfile. Atur juga Aspect
ratio untuk menentukan aplikasi berjalan secara landscape atau portrait. Centang
opsi Fullscreen agar aplikasi tampil penuh.
Gambar 205. General Setting
4. Selanjutnya dalam setiap pembuatan aplikasi berbasis Android selalu diperlukan
file sertifikat (.p12). Untuk itu aktifkan tab Deployment dan klik tombol create
untuk membuat certificate.
Gambar 206. Create certificate
5. Isilah semua kolom isian. Isikan nama dan password. Selanjutnya klik OK dan
file berekstensi .p12 akan terbentuk ditandai dengan pesan sukses.
173
Gambar 207. Panel Create Certificate
6. Setelah itu pada panel Deployment kolom certificate akan terisi oleh sertifikat
yang barusaja dibuat. Pada opsi Android deployment type aktifkan opsi Device
release. Pada opsi AIR runtime aktifkan opsi Embed AIR runtime, agar pengguna
langsung dapat menjalankan aplikasi tanpa menginstall Adobe AIR terlebih
dahulu di mobile phonenya.
Gambar 208. Deployment setting
7. Pada panel selanjutnya siapkan file untuk icon aplikasi dengan beberapa ukuran
yang telah ditentukan, yaitu : 36x36 pixel, 48x48 pixel, 72x72 pixel dan 96x96
pixel. Buka masing-masing file dengan menekan tombol browse.
Gambar 209. Icon aplikasi
8. Untuk panel selanjutnya yaitu mengatur ijin pemakaian perangkat. Untuk saat
ini tidak ada fitur khusus yang membutuhkan ijin, sehingga 2 panel ini dapat
dilewati. lalu klik publish dan proses pembentukan file APK akan
berlangsung. Dalam beberapa saat lalu file APK akan tersedia di folder
tempat bekerja.
Gambar 210. File APK hasil proses publishing
9. Copy file APK ini ke perangkat mobile berbasis Android, install dan
jalankan. Apabila tidak ada kesalahan, secara umum aplikasi akan bekerja
dengan baik di berbagai perangkat dengan berbagai ukuran layar.
Gambar 211. Ujicoba media pembelajaran dengan perangkat mobile berbasis
Android
Multimedia Pembelajaran Interaktif merupakan salah satu media yang dapat digunakan
untuk menyampaikan materi pembelajaran kepada peserta didik dengan sangat efektif
dan efisien. Keunggulan utama media pembelajaran interaktif yaitu interaktivitas itu
sendiri membuka berbagai peluang interaksi antara pengguna dengan media. Namun
demikian untuk membentuk interaktivitas yang baik diperlukan pengetahuan yang baik
tentang desain antar muka dan teknik pemrograman, dua hal yang menjadi kelemahan
bagi sebagian besar tenaga pengajar di Indonesia.
Melalui buku ini, penulis mencoba mendeskripsikan proses pembuatan multimedia
pembelajaran interaktif mulai dari desain hingga teknik pemrograman. Meskipun dalam
buku ini telah dibahas beberapa teknik dasar terkait proses pembuatan multimedia
pembelajaran interaktif, akan tetapi pengembangan yang sesungguhnya dikembalikan
kepada masing-masing pembaca.
Multimedia pembelajaran interaktif yang dihasilkan dapat digunakan secara personal,
maupun dipublikasikan untuk kepentingan komersial. Secara personal pemakaian
multimedia pembelajaran interaktif akan sangat membantu peserta didik dalam
memahami suatu materi dengan cara baru yang menyenangkan. Secara komersial, pasar
multimedia pembelajaran interaktif masih terbuka luas dengan banyaknya pemilik
perangkat yang mampu menjalankan aplikasi dan masih sedikit pengembang tanah air
yang melirik bidang multimedia pembelajaran interaktif secara serius.
Semoga buku ini memberikan wawasan dan manfaat bagi pembacanya, sekaligus sebagai
bahan acuan dalam pengembangan multimedia pembelajaran interaktif. Pada akhirnya
penulis ingin berterimakasih kepada seluruh pembaca dan semoga buku ini ditindak
lanjuti dengan banyaknya multimedia pembelajaran interaktif yang berkualitas.
