utual discourse, pertukaran, kontrol dan partisipan ini dapat
dibedakan tiga level interaktivitas, yaitu percakapan tatap muka dengan derajat
interaktivitas tertinggi; derajat yang berikutnya yaitu interaktivitas yang dimungkinkan
antara orang dengan medium, atau orang dengan sistem di mana isi dapat dimanipulasi;
ketiga yaitu interaktivitas yang diperoleh dalam sistem informasi yang tak
memungkinkan adanya intervensi dari pengguna untuk merubah konten.
Interaktifitas dalam multimedia interaktif yaitu keleluasaan pengguna (operator/user)
dalam mengontrol media dan kemampuan media dalam merespon input yang diberikan
oleh pengguna. Interaktivitas dalam multimedia interaktif terbagi menjadi 2 yaitu
interaktivitas mental dan interaktivitas fisik. Interaktivitas mental yaitu interaktivitas di
mana pengguna mencoba memahami materi dengan cara menangkap informasi-
informasi yang ditampilkan, mengolah dan menyimpannya dalam otak. Sedangkan
interaktivitas secara fisik dalam multimedia interaktif yaitu keterlibatan kegiatan fisik
dari pengguna untuk memberikan interaksi kepada media. Interaktivitas fisik bervariasi
dari yang paling sederhana hingga yang kompleks. Interaktivitas sederhana misalnya
menekan keyboard atau melakukan klik sebuah tombol dengan mouse atau menyentuh
layar untuk berpindah halaman atau memasukkan jawaban dari suatu latihan yang
diberikan oleh aplikasi. Interaktivitas yang komplek misalnya aktivitas di dalam suatu
simulasi sederhana di mana pengguna bisa mengubah-ubah suatu variabel tertentu atau di
dalam simulasi komplek atau interaksi di mana pengguna menggerakkan objek virtual.
93
Gambar 127. Interaktivitas sederhana
Gambar 128. Interaktivitas kompleks
Keunggulan multimedia di dalam interaktivitas yaitu media ini secara inheren mampu
memaksa pengguna untuk berinteraksi dengan materi baik secara fisik dan mental.
Sebagai contoh yaitu simulasi kumparan Faraday di atas. Berbeda halnya jika materi
yang sama disajikan dengan buku atau video, pada simulasi ini pengguna dapat
menggerakkan magnet (interaktivitas fisik), sehingga mengetahui posisi dan gerakan
terbaik dalam kumparan tembaga untuk menghasilkan daya listrik (interaktivitas mental).
Actionscript yang dimiliki oleh Flash mendukung seorang programer untuk
memanipulasi objek baik dari segi posisi, ukuran, gerakan sampai dengan input. Hal
ini dapat dimanfaatkan untuk membangun interativitas dalam multimedia interaktif,
baik itu untuk membentuk interaktifitas yang sederhana sampai interaktifitas kompleks.
Movieclip properties
Untuk memahami proses pengembangan interaktifitas dalam media yang akan dibuat,
perlu dipahami terlebih dahulu dasar dalam memanipulasi objek. Movieclip sebagai
salah satu bentuk objek akan sering diaplikasikan dalam multimedia interaktif, sehingga
seorang programer harus mampu memanipulasi Movieclip.
Dalam Flash setiap objek termasuk movieclip memiliki parameter-parameter yang
disebut sebagai properties. Sebagai contoh movieclip memiliki posisi dalam bentuk
kordinat x dan y (z jika memasuki mode 3D), warna, timeline, skala, rotasi dan
sebagainya. Untuk memahami properties dari movieclip perhatikan contoh berikut :
1. Buatlah sebuah file baru. Selanjutnya dengan buatlah sebuah gambar burung
sederhana dengan Brush tool.
Gambar 129. Brush tool
2. Seleksi gambar ini dan Convert to Symbol menjadi movieclip “animasi
burung”.
3. Dobel klik movieclip “animasi burung” ini , lalu pada mode edit
movieclip buatlah animasi frame by frame (seperti pada contoh bab
sebelumnya).
Gambar 130. Movieclip “animasi burung”
4. Selanjutnya keluar dari mode edit dengan menekan Ctrl+E.
95
Instance Name
Movieclip “animasi burung” ini telah berada di Stage, namun tidak akan terdeteksi
oleh kode karena belum memiliki nama instansi yang spesifik (nama symbol tidak dapat
di deteksi oleh kode secara langsung), sehingga perlu ditambahkan Instance Name.
5. Klik movieclip “animasi burung” ini lalu buka panel properties dan
saat n “burung” pada kolom instance name.
Gambar 131. Instance name “burung”
Dengan menambahkan instance name, movieclip “animasi burung” dapat diakses dengan
kode. Namun demikian akses kode harus diinisiasi dengan nama instance yaitu “burung”.
Untuk lebih jelasnya lanjutkan projek ini , sebagai berikut.
6. Selanjutnya buatlah layer baru (layer 2). Klik frame 1 layer 2, lalu buka
panel Action dan saat n kode berikut
1. burung.x = 300;
2. burung.y = 200;
3. burung.stop();
7. Jalankan aplikasi dengan menekan Ctrl+Enter, maka akan didapati burung
berpindah posisi ke kordinat x = 300 dan y = 200; dan burung dalam kondisi
diam karena adanya kode stop();
Sistem kordinat yang digunakan dalam Flash hampir sama dengan sistem
kordinat kartesian, hanya saja untuk sumbu Y semakin ke bawah semakin
bernilai positif.
Gambar 132. kordinat kartesian
8. Untuk menguji beberapa properties dari movieclip “animasi burung”, klik
kembali frame 1 layer 2 dan tambahkan kode menjadi :
1. burung.x = 300;
2. burung.y = 200;
3. burung.stop();
4. burung.rotation = 45;
5. burung.alpha = 0.4;
6. burung.scaleX = 2;
7. burung.scaleY = 2;
Selain properties di atas, masih ada beberapa properties dari movieclip yang bisa
dimanfaatkan. Dalam tutorial-tutorial selanjutnya akan dibahas secara mendetail tentang
mengatur properties dari movieclip.
Menambah objek dengan AddChild
Salah satu metode yang paling sering digunakan oleh programer dalam membuat aplikasi
yaitu menambahkan objek ke layar dengan memakai kode. Berbeda dengan projek
sebelumnya dimana movieclip “animasi burung” sudah berada di stage, dan harus
diberikan instance name, pada projek berikutnya simbol movieclip ditambahkan ke stage
dengan memakai kode. Untuk lebih jelasnya perhatikan contoh berikut :
1. Buatlah sebuah file baru, lalu buatlah sebuah lingkaran dengan
memakai Oval Tools.
2. Seleksi lingkaran ini lalu Convert to Symbol menjadi movieclip
“bola_mc”. Namun jangan di klik OK terlebih dahulu. Buka panel advanced,
lalu seleksi (centang) opsi Export for Actionscript. Pada kolom Class
saat n “bola_mc” (secara default akan memiliki nama yang sama dengan nama
symbol). Lalu klik OK.
97
Gambar 133. Export for Actionscript
3. Hapus movieclip ini dari layar dengan cara menyeleksi movieclip dan
menekan tombol Delete. Alasan dari menghapus movieclip dari layar (Stage)
yaitu agar layar bersih (tidak ada objek apapun), sehingga penambahan objek
dengan kode tidak terganggu oleh objek lain.
4. Buka panel library dengan menekan Ctrl+L atau memilih menu Window >
Library. Pada panel ini terdapat movieclip “bola_mc”, dan jika dilihat lebih
detail maka akan didapati Linkage : export : bola_mc. Nama yang tertera di
kolom linkage inilah yang dapat diakses dengan memakai kode (hampir
sama dengan instance name).
Gambar 134. Linkage “bola_mc” pada library
5. Klik frame 1 layer 1, lalu buka panel Action (F9). lalu saat n kode
berikut :
1. var bola : bola_mc = new bola_mc();
2. addChild(bola);
6. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka akan didapati bola ini
muncul tepat di pojok kiri atas layar. Hal ini dikarenakan secara default
penambahan objek dengan memakai kode akan meletakkan objek pada
posisi 0,0.
7. Edit kembali kode pada frame 1 layer 2 menjadi sebagai berikut :
1. var bola : bola_mc = new bola_mc();
2. addChild(bola);
3. bola.x = 200;
4. bola.y = 100;
Jalankan aplikasi dengan menekan Ctrl+Enter. Maka bola akan bergeser ke
kordinat 200, 100.
Penjelasan kode :
var bola: bola_mc merupakan deklarasi variabel bola. Variabel bola ini
bertipe object dimana object yang digunakan yaitu bola_mc (nama linkage dari
movieclip bola_mc).
= new bola_mc(); merupakan deklarasi untuk membuat objek baru yang mengacu
pada movieclip dengan linkage bola_mc().
addChild(bola); setelah variabel bola didefinisikan sebagai objek baru, maka objek
ini siap ditambahkan ke layar (Stage) dengan perintah addChild;
bola.x = 200; Setelah objek bola ditambahkan ke layar, objek ini dapat diatur
propertiesnya sebagaimana mengatur properties movieclip.
EventListener
EventListener yaitu sebuah urutan kejadian (event) yang dapat diperintahkan kepada
sebuah objek. Sebagai contoh saat sebuah tombol ditekan, maka akan menjalankan
animasi sebuah movieclip. Berarti pada tombol ini perlu ditambahkan sebuah
EventListener yang berkaitan dengan proses klik mouse yaitu MouseEvent.
Pada dasarnya pada Actionscript 3 terdapat beberapa event, namun untuk membentuk
interaktivitas bagi seorang programer pemula cukup memahami beberapa event saja
yaitu MouseEvent, KeyboardEvent dan EnterFrame Event.
99
MouseEvent
MouseEvent digunakan untuk mendeteksi adanya aktifitas mouse seperti klik kiri, klik
kanan, mouse roll over, mouse roll out, dobel klik dan scroll mouse. Untuk
mempermudah pemahaman tentang mouseEvent perhatikan contoh berikut :
1. Buatlah sebuah file baru. Selanjutnya buatlah sebuah movieclip “animasi
burung”, dimana di dalamnya terdapat animasi burung mengepakkan sayap
secara frame by frame.
2. Klik movieclip “animasi burung” ini lalu buka panel properties dan
ketikkan “burung” pada kolom instance name.
3. Buatlah sebuah kotak dengan memakai Rectangle tool, lalu Convert
to Symbol menjadi tombol (button), dengan nama “tombol”.
4. Klik button “tombol” lalu buka panel properties dan ketikkan “tombol”
pada kolom instance name.
Gambar 135. Pengaturan instance name.
5. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. burung.stop();
2. function jalankanAnimasi(e:MouseEvent):void{
3. burung.play();
4. }
5. tombol.addEventListener(MouseEvent.CLICK,
jalankanAnimasi);
6. Jalankan aplikasi dengan menekan Ctrl+Enter. Klik tombol ini dan
animasi burung akan berjalan.
Penjelasan program :
burung.stop(); merupakan perintah untuk menghentikan animasi movieclip dengan
instance name “burung”.
function jalankanAnimasi() {...} merupakan deklarasi sebuah fungsi
bernama jalankanAnimasi.
e:MouseEvent berarti fungsi ini akan dikaitkan dengan event yang berhubungan
dengan aktivitas mouse.
burung.play(); yang berada dalam blok fungsi jalankanAnimasi berarti animasi
burung akan dijalankan apabila fungsi dipanggil.
tombol.addEventListener(MouseEvent.CLICK, jalankanAnimasi); berarti
tombol diberikan sebuah perintah, dimana apabila tombol diklik dengan memakai
mouse, maka fungsi jalankanAnimasi akan dipanggil.
Aplikasi yang memiliki listener dengan event MouseEvent.CLICK saat dipublish
untuk aplikasi mobile, sama fungsinya dengan efek sentuh (touch).
Drag and Drop
Dalam beberapa kasus, interaktifitas dapat dilakukan dengan cara drag and drop.
Sebagai contoh dalam simulasi hukum Faraday (gambar 13..), objek magnet dapat didrag
oleh pengguna dan digerakkan ke area kumparan. Dalam beberapa aplikasi juga dapat
kita temukan fitur drag and drop. Untuk membuat fitur ini , perhatikan contoh
berikut :
1. Buatlah sebuah file baru. Selanjutnya buatlah 2 buah gambar yaitu kepala panda
dan badan panda yang terpisah, lalu Convert to Symbol masing-masing
gambar menjadi movieclip kepala dan movieclip badan. Perhatikan letak titik
pusat (titik registrasi) dari movieclip ini ( + ).
Gambar 136. Movieclip kepala dan badan panda.
101
2. Klik movieclip kepala, lalu buka panel properties dan saat n “kepala”
pada instance name. Berikan instance name “badan” untuk movieclip badan
3. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. kepala.addEventListener(MouseEvent.MOUSE_DOWN,
pencetMouse);
2. kepala.addEventListener(MouseEvent.MOUSE_UP,
lepasMouse);
3.
4. function pencetMouse(e:MouseEvent):void{
5. kepala.startDrag();
6. }
7. function lepasMouse(e:MouseEvent):void{
8. kepala.stopDrag();
9. }
10. Jalankan aplikasi dengan menekan Ctrl+Enter. Klik dan drag kepala panda
ini untuk menguji coba kode.
Drag dan Snap
Pada contoh di atas untuk mendeteksi apakah movieclip kepala sudah berada tepat
diposisi movieclip badan digunakan metode jarak, yaitu memakai teori pitagoras
sederhana dengan menghitung akar (Math.sqrt) kuadrat dari selisih kordinat 2 objek.
Sehingga saat movieclip kepala berjarak (ber radius) kurang dari 50 pixel dan tombol
mouse dilepas, maka kordinat movieclip kepala dijadikan sama dengan kordinat
movieclip badan sehingga akan muncul efek Snap.
Sebenarnya kode AS3 memiliki sistem deteksi antara 2 objek yang di drag mouse, yaitu
dropTarget. Kodenya kurang lebih sebagai berikut :
1. function lepasMouse(e:MouseEvent):void{
2. kepala.stopDrag();
3. //snap ke badan
4. if (kepala.dropTarget != null){
5. kepala.x = badan.x;
6. kepala.y = badan.y;
7. }
8. }
Akan tetapi kode ini kurang optimal, karena deteksi posisi masih terlalu luas,
sehingga saat kepala baru menyentuh titik terluar badan sudah dianggap sebagai
dropTarget, sehingga lebih baik memakai metode pengukuran jarak agar akurasi
lebih tepat. Untuk lebih jelasnya, perhatikan langkah berikut :
1. Lanjutkan file pada tutorial sebelumnya (drag movieclip).
2. Klik frame 1 layer 2 buka panel Action (F9) dan ubah kodenya menjadi sebagai
berikut :
1. var awal_x:Number = kepala.x;
2. var awal_y:Number = kepala.y;
3.
4. kepala.addEventListener(MouseEvent.MOUSE_DOWN,
pencetMouse);
5. kepala.addEventListener(MouseEvent.MOUSE_UP,
lepasMouse);
6.
7. function pencetMouse(e:MouseEvent):void{
8. kepala.startDrag();
9. }
10. function lepasMouse(e:MouseEvent):void{
11. kepala.stopDrag();
12. //snap ke badan
13. var jarak = Math.sqrt((kepala.x -
badan.x)*(kepala.x - badan.x)+(kepala.y -
badan.y)*(kepala.y - badan.y));
14. if (jarak < 50){
15. kepala.x = badan.x;
16. kepala.y = badan.y;
17. }else{
18. kepala.x = awal_x;
19. kepala.y = awal_y;
20. }
21. }
3. Jalankan aplikasi dengan menekan Ctrl+Enter. Klik dan drag kepala panda
ini mendekati posisi yang tepat (sekitar leher panda) untuk menguji coba
kode.
Penjelasan kode :
var awal_x:Number = kepala.x; Pada awalnya kordinat x dan y dari movieclip
kepala disimpan di dalam variabel awal_x dan awal_y. Hal ini dimaksudkan agar apabila
kepala tidak didrag pada posisi yang tepat, maka akan kembali ke posisi awal
103
kepala.addEventListener(MouseEvent.MOUSE_DOWN,pencetMouse);
Selanjutnya movieclip kepala diberikan listener saat mouse ditekan. saat event
terjadi (yaitu saat Mouse ditekan), maka fungsi pencetMouse akan dijalankan.
kepala.startDrag(); merupakan kode untuk memulai mode drag sebuah objek.
kepala.stopDrag(); merupakan kode untuk mengakhiri mode drag sebuah objek.
var jarak = Math.sqrt(...); merupakan perhitungan jarak memakai
metode pitagoras yaitu akar dari selisih kuadrat jarak antara movieclip kepala dengan
movieclip badan.
if (jarak < 50){...}else {...} merupakan kondisi untuk melakukan proses
snap. Apabila jarak kurang dari 50 pixel maka posisi akan di snap, sedangkan jika lebih
akan dikembalikan ke posisi awal_x dan awal_y.
EnterFrame Event
Enterframe Event merupakan kejadian yang dilakukan secara berulang-ulang sejak
inisialisasi listener sampai dengan dihentikannya listener atau aplikasi ditutup. Sebagai
contoh event ini digunakan untuk mendapatkan gerakan objek secara terus menerus.
Perhatikan contoh berikut :
1. Buatlah sebuah file baru. Selanjutnya buatlah sebuah movieclip “animasi
burung”, dimana di dalamnya terdapat animasi burung mengepakkan sayap
secara frame by frame.
2. Klik movieclip “animasi burung” ini lalu buka panel properties dan
ketikkan “burung” pada kolom instance name.
Gambar 137. Movieclip dengan instance name “burung”
3. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. function terbang(e:Event):void{
2. var ob:Object = e.currentTarget;
3. ob.x += 5;
4. }
5.
6. burung.addEventListener(Event.ENTER_FRAME, terbang);
4. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka burung ini akan
bergerak ke kanan secara terus menerus sampai keluar dari layar.
5. Selanjutnya kita dapat menambahkan sedikit logika agar burung ini dapat
bergerak secara berulang ke kanan dan ke kiri. Ubah kode pada frame 1 layer 2
menjadi sebagai berikut :
1. var kecepatan:int = 5;
2. function terbang(e:Event):void{
3. var ob:Object = e.currentTarget;
4. ob.x += kecepatan;
5. if (ob.x > 600 || ob.x < 100) {
6. kecepatan *= -1;
7. ob.scaleX = kecepatan/Math.abs(kecepatan);
8. }
9. }
10.
11. burung.addEventListener(Event.ENTER_FRAME, terbang);
6. Jalankan kembali aplikasi dengan menekan Ctrl+Enter, dan burung akan
terbang secara berulang ke kanan dan ke kiri.
Penjelasan program :
var kecepatan:int = 5; merupakan deklarasi kecepatan burung. Nilai dari variabel
ini bisa diubah secara dinamis saat kondisi tertentu (baris 5) terpenuhi.
function terbang(e:Event):void{...} merupakan fungsi yang dijalankan
secara berulang-ulang setelah kode addEventListener diaktifkan.
var ob:Object = e.currentTarget; merupakan deklarasi variabel yang mengacu
pada objek yang diperintah oleh eventListener, dimana dalam hal ini yaitu movieclip
dengan instance name “burung”.
105
ob.x += kecepatan; berarti setiap frame (karena memakai 30 fps, maka setiap
1/30 detik) posisi x dari burung akan ditambah dengan variabel kecepatan.
if (ob.x > 600 || ob.x < 100) { .. } yaitu kondisi dimana saat posisi
burung terlalu ke kanan atau ( || ) terlalu ke kiri, maka variabel kecepatan akan dikalikan
-1;
kecepatan *= -1; berarti saat kondisi di atas terpenuhi kecepatan akan dibalik.
Jika semula yaitu 5 maka akan menjadi -5, dan saat kecepatan -5 maka burung akan
bergerak ke kiri sampai kordinat x < 100 dan kondisi if terpenuhi lagi sehingga
kecepatan menjadi -5 x -1 = 5; dan burung bergerak ke kanan kembali.
ob.scaleX = kecepatan/Math.abs(kecepatan); untuk merubah arah burung
dengan memakai skala X. saat kecepatan bernilai -5, maka ob.scaleX akan
bernilai -5 dibagi nilai absolut kecepatan (5), sehingga hasilnya yaitu -1 dan burung
akan berubah arah (flip horizontal)
Keyboard Event
Sebagaimana MouseEvent, Keyboard Event yaitu sebuah event yang terjadi saat ada
masukan dari keyboard. Contoh pemakaian Keyboard Event yaitu pada saat
menggerakkan sebuah objek dengan memakai tombol panah, misalnya saat
membuat simulasi gerakan mobil. Untuk lebih jelasnya perhatikan contoh berikut :
1. Buatlah sebuah file baru. Selanjutnya buatlah sebuah gambar mobil tampak atas
dan menghadap ke atas, atau anda dapat mengimport gambar siap pakai dengan
memilih menu File > Import > Import to Stage.
2. Seleksi gambar mobil ini , lalu Convert to Symbol menjadi movieclip
“mobil”. Agar dapat diakses oleh kode, tambahkan instance name “mobil”.
Gambar 138. Movieclip mobil.
3. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. var tombol_atas:Boolean=false;
2. var tombol_bawah:Boolean=false;
3. var tombol_kiri:Boolean=false;
4. var tombol_kanan:Boolean=false;
5. mobil.kecepatan = 0;
6.
7.
8. function keyDownFunction(event:KeyboardEvent):void {
9. if (event.keyCode == 38) {
10. tombol_atas=true;
11. } else if (event.keyCode == 39) {
12. tombol_kanan=true;
13. } else if (event.keyCode == 40) {
14. tombol_bawah=true;
15. } else if (event.keyCode == 37) {
16. tombol_kiri=true;
17. }
18. }
19. function keyUpFunction(event:KeyboardEvent) {
20. if (event.keyCode == 38) {
21. tombol_atas=false;
22. } else if (event.keyCode == 39) {
23. tombol_kanan=false;
24. } else if (event.keyCode == 40) {
25. tombol_bawah=false;
26. } else if (event.keyCode == 37) {
27. tombol_kiri=false;
28. }
29. }
30.
31. function gerakMobil(e:Event):void{
32. var ob:Object = e.currentTarget;
33. ob.x += ob.kecepatan * Math.sin(ob.rotation * Math.PI
/ 180);
34. ob.y -= ob.kecepatan * Math.cos(ob.rotation * Math.PI
/ 180);
35. //mengatur berdasarkan input tombol
36. if (tombol_atas) {
37. if (ob.kecepatan < 10){
38. ob.kecepatan += 0.2;
39. }
40. }else if (tombol_bawah){
41. ob.kecepatan *= 0.8;
42. }else{
43. ob.kecepatan *= 0.95;
44. }
45. if (tombol_kanan){
46. ob.rotation+=5;
47. }else if (tombol_kiri){
48. ob.rotation-=5;
107
49. }
50.
51. }
52.
53. stage.addEventListener(KeyboardEvent.KEY_DOWN,
keyDownFunction);
54. stage.addEventListener(KeyboardEvent.KEY_UP,
keyUpFunction);
55. mobil.addEventListener(Event.ENTER_FRAME, gerakMobil);
4. Jalankan kembali aplikasi dengan menekan Ctrl+Enter, dan tekan tombol panah
pada keyboard untuk mengatur gerakan mobil.
Penjelasan program :
var tombol_atas:Boolean=false; merupakan deklarasi variabel untuk
mendeteksi apakah tombol atas ditekan (true) atau dilepas (false).
if (event.keyCode == 38) { tombol_atas=true; } Untuk mendeteksi
tombol yang ditekan, setelah listener KeyboardEvent aktif maka kode masing-masing
tombol keyboard bisa dideteksi. Sebagai contoh tombol panah atas memiliki kode 38.
ob.x += ob.kecepatan * Math.sin(ob.rotation * Math.PI / 180);
merupakan perhitungan trigonometri sederhana sebuah objek berdasarkan rotasi yang
dimilikinya.
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownFunction);
merupakan deklarasi KeyboardEvent untuk mendeteksi tombol ditekan.
109
Bab VIII
Navigasi Halaman Interaktif Multimedia
Setelah memahami beberapa dasar desain multimedia interaktif, pemrograman dasar
Actionscript dan dasar interaktivitas, langkah selanjutnya yaitu merancang aplikasi
multimedia interaktif secara keseluruhan. Sebagai contoh akan dibuat sebuah media
pembelajaran interaktif tentang tata surya, maka perlu direncanakan pembagian halaman
dan fitur-fitur yang akan ditampilkan. Berikut contoh perencanaan halaman interaktif
multimedia pembelajaran tata surya untuk anak usia Sekolah Dasar:
Gambar 139. Rencana halaman interaktif multimedia
Desain Halaman
Setelah perencanaan dibuat, tahapan selanjutnya yaitu membuat desain halaman. Pada
bab sebelumnya telah dijelaskan prinsip-prinsip desain agar multimedia yang dibuat
nantinya mampu menarik pengguna dari sisi tampilan visual.
Desain halaman dalam multimedia juga dapat disebut sebagai tampilan antar muka (user
interface). Interface memegang peranan penting karena melalui interface pengguna dapat
berinteraksi dengan media. Untuk itu perencanaan interface harus benar-benar sesuai
dengan kebutuhan, dalam hal ini dikenal istilah layout. Layout yaitu penyusunan dari
elemen elemen desain yang berhubungan ke dalam bidang sehingga membentuk susunan
artistik. Hal ini bertujuan untuk menampilkan gambar dan teks yang komunikatif
sehingga memudahkan pembaca menerima informasi yang disajikan. Layout yang umum
digunakan untuk desain interface yaitu dengan metode grid, yaitu membagi area
menjadi beberapa bagian. Secara umum navigasi dapat diletakkan di bagian atas atau
samping kiri, dan konten diletakkan di tengah area.
Gambar 140. Layout interface dengan sistem grid
Sebagai contoh akan digunakan layout dengan navigasi di atas. Selanjutnya konten yang
dibuat harus disesuaikan dengan target audiense (pengguna). Sebagai contoh, karena
media yang akan dibuat yaitu pembelajaran tentang tata surya untuk anak usia dasar,
maka tampilan yang dibuat bersifat anak-anak dan mengandung elemen yang terkait
dengan tata surya, yang dalam hal ini yaitu astronot.
Gambar 141. Contoh layout halaman depan dengan navigasi di atas.
111
Membuat tombol
Tombol merupakan salah satu elemen penting dalam multimedia interaktif, untuk itu
Flash secara khusus memiliki symbol bertipe button. Berbeda dengan symbol bertipe
movieclip yang memiliki timeline seperti timeline pada stage, tombol hanya memiliki 4
buah frame yaitu frame Up, Over, Down dan Hit.
Gambar 142. Timeline symbol bertipe button.
Up yaitu kondisi saat tombol normal, tidak mengalami aktifitas apapun. Over yaitu
kondisi saat mouse melintas di atas area tombol. Down yaitu kondisi saat mouse
menekan tombol, dan Hit yaitu area yang menjadi deteksi atau sensor dari tombol.
Untuk lebih jelasnya perhatikan langkah-langkah berikut :
1. Buatlah sebuah file baru. Selanjutnya dengan memakai Rectangle tool
buatlah sebuah kotak dengan sudut lengkung (Rounded rectangle). Untuk
melakukannya atur properties Rectangle option.
Gambar 143. Rounded rectangle
2. Selanjutnya klik teks tool, pada panel properties pastikan text engine yaitu
Classic Text dan text type yaitu Static Text. lalu klik di atas kotak dan
ketikkan kata “tombol”.
Gambar 144. Menambahkan teks pada tombol
3. Seleksi kotak dan teks tombol ini , lalu Convert to Symbol menjadi
button dengan nama “tombol”.
4. Dobel klik button “tombol” untuk memasuki mode edit. lalu klik kanan
frame Over dan pilih Insert Keyframe. Selanjutnya ubah warna kotak dan
warna teks (bedakan dengan warna pada frame Up).
5. Klik kanan frame Down dan pilih Insert Keyframe. Selanjutnya ubah kembali
warna kotak dan warna teks.
6. Klik kanan frame Hit dan pilih Insert Keyframe. Untuk frame Hit tidak perlu
dilakukan perubahan apapun, karena hanya digunakan sebagai sensor. Bahkan
pada contoh ini tanpa frame Hit pun area akan dihitung berdasarkan frame
sebelumnya.
Gambar 145. Pengaturan keyframe button “tombol”
7. Jalankan aplikasi dengan menekan Ctrl+Enter. Coba gerakkan mouse ke atas
tombol dan klik tombol ini , maka akan terjadi perubahan warna sesuai
dengan pengaturan frame yang telah dilakukan.
113
Mengatur Halaman
Proses berikutnya yang sangat penting dan cukup rumit dalam proses pengembangan
multimedia pembelajaran interaktif yaitu mengatur halaman. Halaman di atur di dalam
timeline sedemikian rupa sehingga dapat diakses dengan mudah oleh kode dan memiliki
struktur yang memudahkan kita nantinya untuk menambah atau mengubah materi. Ada
beberapa teknik yang dapat digunakan, mulai dari teknik menyusun konten secara
manual di timele sampai dengan teknik pemrograman seutuhnya (menyusun semua
layout dan halaman dengan kode). Pada buku ini akan dijelaskan teknik yang paling
mudah yaitu menyusun konten atau materi secara manual. Untuk lebih jelasnya
perhatikan contoh berikut :
1. Buatlah sebuah file baru. Selanjutnya atur file dengan membuka properties,
sehingga file memiliki ukuran standard untuk aplikasi mobile yaitu 800 x 480
pixel dan 30 FPS.
Gambar 146. Properties dokumen
2. Buatlah sebuah tampilan untuk halaman pertama dari multimedia dengan
memakai drawing tool, atau dengan cara File > Import > Import to Stage.
Gambar 147. Contoh halaman awal multimedia
3. Seleksi gambar ini , lalu buka panel properties, pastikan posisi
gambar berada di kordinat x = 0; y = 0; dan ukuran gambar tepat 800x480 pixel.
Jika belum tepat, nilai ini dapat diedit secara langsung melalui panel
properties.
Gambar 148. Position and size properties
4. Seleksi gambar ini dan Convert to Symbol menjadi movieclip “konten”,
sebelum mengklik tombol OK pastikan titik registrasi movieclip berada di kiri
atas.
Gambar 149. Titik registrasi movieclip konten
5. Dobel klik movieclip konten untuk masuk ke mode edit.
Gambar 150. Mode edit movieclip konten
6. Rename nama layer 1 menjadi layer background (dengan cara dobel klik pada
nama layer) , lalu buatlah buatlah 5 buah layer baru dan ubah nama
masing-masing layer sesuai dengan urutannya mulai dari atas yaitu layer : action,
label, tombol, sub_halaman dan halaman isi.
Gambar 151. Susunan layer movieclip konten
115
7. Klik frame 1 layer tombol lalu buatlah symbol button “tombol_home”
sesuai dengan layout yang telah didesain sebelumnya. Letakkan tombol ini
pada posisi yang sesuai.
Gambar 152. Tombol halaman depan dan posisinya terhadap background
8. Dengan cara yang sama, buatlah 3 tombol selanjutnya yaitu tombol “materi”,
tombol “animasi” dan “tombol kuis”. Untuk mempertahankan konsistensi dan
mempermudah proses pembuatan, dapat digunakan fitur Duplicate Symbol. Klik
kanan “tombol_home” lalu Copy dan Paste kan di sebelah kanannya.
Selanjutnya klik kanan “tombol_home” hasil copy-paste, lalu pilih Duplicate
Symbol. saat n nama baru, yaitu “tombol materi” dan klik OK. lalu
dobel klik untuk mengeditnya.
Gambar 153. Duplicate Symbol
Gambar 154. Pengaturan posisi tombol
9. Klik kanan frame 40 layer tombol lalu pilih Insert Frame, sehingga
tombol akan tampil sampai dengan frame 40 tanpa perubahan apapun. Hal ini
dikarenakan tombol yang ada akan selalu muncul di seluruh halaman.
10. lalu klik kanan frame 10 layer background dan pilih Insert Blank
Keyframe. Selanjutnya buatlah sebuah gambar background atau import gambar
siap pakai ke stage. Pastikan background yang digunakan tidak mengganggu
tampilan materi yang akan ditambahkan. Selanjutnya klik kanan frame 40 layer
background dan pilih Insert frame agar background ini muncul sampai
dengan frame 40.
Gambar 155. Background di frame 10.
11. Klik kanan frame 10 layer halaman isi lalu pilih Insert Blank
Keyframe. Pada frame ini ditujukan untuk meletakkan materi. Pada frame ini
dapat ditambahkan text, animasi movieclip, maupun video sesuai dengan konsep
yang telah dibuat sebelumnya. Untuk sementara, tambahkan sebuah static text
"materi tata surya" pada stage. Pada bab selanjutnya teks ini akan diganti
dengan materi yang lebih kompleks.
Gambar 156. Konten sementara untuk materi tata surya
117
12. Klik kanan frame 20 layer halaman isi lalu pilih Insert Blank
Keyframe. lalu tambahkan sebuah static text "animasi tata surya"
pada stage.
13. Klik kanan frame 30 layer halaman isi lalu pilih Insert Blank
Keyframe. lalu tambahkan sebuah static text "kuis tata surya" pada
stage.
pemakaian kelipatan 10 setiap Keyframe dimaksudkan untuk mempermudah
anda untuk menambahkan efek transisi dan memudahkan proses editing di
lalu hari.
14. Simpan file.
Menambahkan label
Label dalam flash yaitu sebuah tanda dalam bentuk teks (String) yang digunakan untuk
mengidentifikasi frame. Sebagai contoh apabila terdapat animasi berdurasi 200 detik,
lalu pada frame 100 ditambahkan label “tengah”, maka untuk melompat ke frame
ini cukup dengan memakai perintah gotoAndPlay(“tengah”);
Label berfungsi untuk mempermudah dalam mengidentifikasi frame, sehingga saat
struktur keyframe suatu file berubah akibat penambahan atau pengurangan frame, kode
tidak perlu diubah. Untuk lebih jelasnya, lanjutkan file di atas dengan langkah sebagai
berikut :
15. Untuk menambahkan label klik frame 1 layer label lalu buka panel
properties. saat n hal_1 pada kolom Frame label.
Gambar 157. Frame label
16. Klik kanan frame 10 layer label lalu Insert Blank Keyframe. Lalu buka
properties dan tambahkan frame label hal_2. Lakukan hal yang sama pada frame
20 dan 30 untuk halaman 3 dan halaman 4.
Gambar 158. Label secara keseluruhan
17. Simpan file.
Penambahan Instance Name
Seperti pada penjelasan bab sebelumnya, penambahan instance name diperlukan agar
beberapa object bisa diakses oleh actionscipt. Dalam multimedia interaktif yang
dikembangkan pada bab ini, objek utama yang harus memiliki instance name yaitu
tombol-tombol dan movieclip konten.
18. Klik tombol “halaman_depan”, lalu buka panel properties dan ketikkan
“tombol_home” pada kolom instance name.
Gambar 159. Instance name tombol_home
19. Dengan cara yang sama tambahkan instance name “tombol_materi”,
“tombol_animasi” dan “tombol_kuis”.
20. Keluar dari mode edit movieclip “konten” dengan menekan Ctrl+E. Selanjutnya
klik movieclip konten dan tambahkan instance name “konten”.
21. Simpan file.
Penambahan Actionscript untuk Navigasi
Setelah masing-masing elemen tersusun dengan baik dan memiliki instance name,
tahapan berikutnya yaitu menambahkan kode action script. Jika muncul pertanyaan
kenapa seluruh halaman diletakkan di dalam movieclip “konten”, hal ini
dikarenakan pengaturan objek dalam sebuah movieclip akan lebih mudah dilakukan, dan
kode akan dijalankan satu kali saja sehingga tidak membutuhkan memori yang banyak.
119
Dalam pemrograman terdapat istilah garbage collector, dimana listener-listener yang
sudah tidak digunakan harus dihapus. Apabila seluruh konten ditampilkan ke dalam
timeline utama (Scene), maka akan muncul peluang kode yang ada di frame 1 (halaman
depan) berulang beberapa kali, sehingga akan menambah kebutuhan memori dan
memperlambat kerja aplikasi. Dengan memasukkan seluruh konten ke dalam movieclip
kode akan lebih mudah diatur, diaktivasi dan dihapus.
Untuk menambahkan kode navigasi, perhatikan langkah-langkah berikut :
22. Lanjutkan file tutorial sebelumnya. lalu buatlah sebuah layer baru (layer
2).
23. Klik frame 1 layer 2, lalu buka panel Action (F9) dan saat n kode
berikut :
1. konten.stop();
2. konten.tombol_home.addEventListener(MouseEvent.CLICK,
aturNavigasi);
3. konten.tombol_materi.addEventListener(MouseEvent.
CLICK, aturNavigasi);
4. konten.tombol_animasi.addEventListener(MouseEvent.
CLICK, aturNavigasi);
5. konten.tombol_kuis.addEventListener(MouseEvent.CLICK,
aturNavigasi);
6.
7. function aturNavigasi(e:MouseEvent):void{
8. var namaTombol:String = e.currentTarget.name;
9. if (namaTombol == "tombol_home"){
10. konten.gotoAndStop("hal_1");
11. }
12. if (namaTombol == "tombol_materi"){
13. konten.gotoAndStop("hal_2");
14. }
15. if (namaTombol == "tombol_animasi"){
16. konten.gotoAndStop("hal_3");
17. }
18. if (namaTombol == "tombol_kuis"){
19. konten.gotoAndStop("hal_4");
20. }
21. }
24. Jalankan aplikasi dengan menekan Ctrl+Enter. Uji coba tombol dan
navigasinya, pastikan semua bekerja dengan baik. Apabila tidak ada langkah
yang salah, maka sistem navigasi dari media pembelajaran interaktif akan
berfungsi dengan baik.
Membuat Transisi Halaman
Untuk memperoleh sebuah interktif multimedia yang dinamis, pergantian antar halaman
dapat ditambahkan sebuah efek transisi. Efek ini bisa berupa animasi motion tween,
efek fade in/out, efek zoom in/out dan sebagainya. Pada contoh berikut dijelaskan proses
pembuatan transisi halaman dengan memakai movieclip. Untuk lebih jelasnya
perhatikan langkah berikut :
25. Lanjutkan file di atas. Buatlah sebuah layer baru di atas layer 1 (layer 3).
lalu atur kembali nama layer menjadi layer “konten”, “transisi” dan
“kode” (beruturan dari bawah ke atas).
26. Klik frame 1 layer transisi lalu buatlah sebuah kotak dengan ukuran yang
sama persis dengan ukuran stage, dan posisikan tepat menutupi konten.
Selanjutnya buatlah garis horizontal yang membelah kotak ini tepat di
tengah (digunakan untuk membuat animasi transisi yang menutup bagian atas dan
bagian bawah).
Lock layer konten untuk mempermudah proses agar konten tidak terganggu.
Gambar 160. Mengatur transisi
27. Seleksi gambar di layer transisi ini , lalu Convert to Symbol menjadi
movieclip “transisi”. Selanjutnya dobel klik untuk mengeditnya.
28. Pada mode edit, seleksi bagian atas dari kotak yang terbelah, lalu Convert
to Symbol menjadi movieclip “tutup atas”.
29. seleksi bagian bawah dari kotak yang terbelah, lalu Convert to Symbol
menjadi movieclip “tutup bawah”. Hapus outline yang tersisa dari stage,
sehingga hanya menyisakan 2 movieclip.
121
Gambar 161. Movieclip tutup atas dan tutup bawah.
30. Seleksi dua movieclip ini , lalu klik kanan dan pilih Distribute to
Layer.
31. Selanjutnya buatlah sebuah animasi tween membuka dan menutup dengan durasi
30 frame. Pada keyframe 1 dan keyframe 30, posisi penutup sama yaitu
membuka penuh. Sedangkan pada keyframe 15 posisi penutup, menutupi layar
secara penuh. Perhatikan gambar.
Gambar 162. Animasi tween pada movieclip transisi
32. Keluar dari mode edit movieclip “transisi” dengan menekan Ctrl+E.
33. Untuk mengaktifkan transisi, klik frame 1 layer action dan ubah kode yang ada
menjadi sebagai berikut :
1. konten.stop();
2. transisi.stop();
3.
4. konten.tombol_home.addEventListener(MouseEvent.CLICK,
aturNavigasi);
5. konten.tombol_materi.addEventListener(MouseEvent.CLICK,
aturNavigasi);
6. konten.tombol_animasi.addEventListener(MouseEvent.CLICK,
aturNavigasi);
7. konten.tombol_kuis.addEventListener(MouseEvent.CLICK,
aturNavigasi);
8.
9. function jalankanTransisi(e:Event):void{
10. if (transisi.currentFrame == 15){
11. konten.gotoAndStop(transisi.namaHalaman);
12. }
13. if (transisi.currentFrame == 30){
14. transisi.stop();
15. transisi.removeEventListener(Event.ENTER_FRAME,
jalankanTransisi);
16. }
17. }
18.
19. function transisiHalaman(namaHalaman:String):void{
20. transisi.play();
21. transisi.namaHalaman = namaHalaman;
22. transisi.addEventListener(Event.ENTER_FRAME,
jalankanTransisi);
23. }
24.
25. function aturNavigasi(e:MouseEvent):void{
26. var namaTombol:String = e.currentTarget.name;
27. if (namaTombol == "tombol_home"){
28. transisiHalaman("hal_1");
29. }
30. if (namaTombol == "tombol_materi"){
31. transisiHalaman("hal_2");
32. }
33. if (namaTombol == "tombol_animasi"){
34. transisiHalaman("hal_3");
35. }
36. if (namaTombol == "tombol_kuis"){
37. transisiHalaman("hal_4");
38. }
39. }
34. Simpan file dan ujicoba dengan menekan Ctrl+Enter. Jika proses dan kode
benar, maka transisi antar halaman akan muncul setiap tombol ditekan.
Penjelasan kode
transisiHalaman("hal_1"); (baris 30) Pada saat tombol home ditekan, maka
fungsi transisiHalaman akan dipanggil dengan parameter “hal_1”.
transisi.namaHalaman = namaHalaman; (baris 23) maka variabel yang melekat di movieclip
transisi diubah sesuai dengan parameter ini , selanjutnya movieclip transisi
dimainkan dan di cek oleh fungsi jalankanTransisi, saat frame aktif berada pada posisi
123
15 (saat tertutup penuh), maka konten diubah menuju ke frame berlabel sesuai dengan
namaHalaman.
Sub Menu (sub halaman)
Pada perencanaan multimedia pembelajaran interaktif, menu materi memiliki 2 sub menu
yaitu materi 1 dan materi 2. Dalam pengembangan selanjutnya juga dapat dibuat materi 3
dan seterusnya sampai seluruh materi tercover oleh multimedia pembelajaran. Untuk
membuat sub halaman, perhatikan langkah berikut :
35. Lanjutkan file di atas.
36. Dobel klik movieclip konten untuk mengeditnya, karena akan ditambahkan
materi ke dalamnya.
37. Klik kanan frame 10 layer sub halaman, lalu tambahkan Keyframe.
Selanjutnya buatlah sebuah kotak dan teks “materi 1”. Seleksi kotak dan teks
ini lalu Convert to Symbol menjadi movieclip “materi”.
38. Selanjutnya buatlah 2 buah tombol “panah kanan” dan “panah kiri”. Atur
posisinya sesuai gambar.
Gambar 163. Posisi Movieclip materi dan tombol panah.
39. Dobel klik movieclip materi untuk mengeditnya. Klik kanan frame 2 dan
tambahkan KeyFrame. Edit konten (materi yang ada) menjadi materi
selanjutnya. Pada tahapan ini materi yang dimasukkan dapat berupa teks, gambar,
animasi movieclip, dan video.
Gambar 164. Pengaturan materi dalam movieclip “materi”
Konten dibuat secara frame by frame (seolah-olah satu halaman demi halaman).
Lakukan beberapa kali sampai semua materi yang ingin ditampilkan dalam
multimedia interaktif tersampaikan. Prinsip utama dalam membuat materi dalam
media layar yaitu :
- Keterbacaan teks harus teruji, dan dapat dibaca dengan mudah oleh
pengguna, untuk itu perlu digunakan huruf dengan ukuran, ketebalan dan
warna yang baik.
- Jumlah kalimat atau paragraf yang ditampilkan dalam 1 halaman tidak
boleh terlalu banyak, karena multimedia interaktif memiliki fitur jumlah
halaman yang tidak terbatas, sehingga paragraf dan kalimat dapat
didistribusikan secara merata.
- pemakaian gambar atau animasi sebaiknya memakai ukuran yang
sama dengan ukuran layar (tidak diperbesar / diperkecil lagi). Hal ini
dimaksudkan agar gambar dapat ditampilkan dengan sempurna tanpa
distorsi.
- Penambahan video dan operasi teks kompleks akan dijelaskan pada bab
selanjutnya.
40. Kembali ke mode edit movieclip “konten”, lalu tambahkan instance
name “materi” pada movieclip, “tombol_next” dan “tombol_prev” pada
tombol panah.
41. Selanjutnya klik kanan frame 10 layer action pilih Insert Blank Keyframe.
Selanjutnya buka panel Action (F9) dan ketikkan kode berikut :
1. materi.stop();
2.
3. function materiNext(e:MouseEvent):void{
4. materi.nextFrame();
125
5. }
6.
7. function materiPrev(e:MouseEvent):void{
8. materi.prevFrame();
9. }
10.
11. tombol_next.addEventListener(MouseEvent.CLICK,
materiNext);
12. tombol_prev.addEventListener(MouseEvent.CLICK,
materiPrev);
42. Jalankan aplikasi dengan menekan Ctrl+Enter. Cobalah klik tombol materi dan
klik panah kanan dan kiri. Pastikan semuanya berfungsi dengan baik.
127
Bab VIII
Operasi Text
Dalam multimedia pembelajaran interaktif terdapat beberapa hal terkait dengan
pemakaian teks. Pada umumnya teks disajikan secara statis seperti pada materi
pembelajaran, teks dinamis seperti pada kolom soal, kolom waktu dan beberapa variabel
yang berubah secara dinamis, serta teks masukan seperti input nama dan input angka.
Flash memiliki 3 jenis teks yang dapat dimanfaatkan untuk hal ini . Dalam Flash
mode teks terbagi menjadi 3 yaitu :
1. Static text
Static text digunakan untuk menuliskan teks yang tidak mengalami perubahan
apapun sepanjang aplikasi berjalan. Static text sesuai jika diaplikasi untuk
menuliskan materi, judul, nama tombol dan segala teks yang static.
2. Dynamic text
Dynamic text merupakan teks yang dapat diatur value nya. Dengan demikian
dynamic text bersifat dinamis tergantung pengaturannya dengan kode. Dynamic
teks sesuai jika diaplikasikan untuk teks soal yang berubah, teks waktu, teks
score dan sejenisnya.
3. Input text
Input text merupakan jenis masukan dalam bentuk teks, dimana masukan ini
dapat ditangkap dan diproses oleh kode. Input text sesuai jika diaplikasikan untuk
masukan nama pengguna, masukkan nilai-nilai variabel dalam sebuah simulasi
dan sejenisnya.
Scrolling Text
Salah satu elemen utama dari sebuah multimedia pembelajaran yaitu materi dalam
bentuk teks. Akan tetapi sering kali didapati space (ruangan) yang terbatas - sedangkan
teks yang akan ditampilkan cukup banyak. Sebagai solusi atas permasalahan ini
yaitu memakai metode scrolling text. Pada dasarnya terdapat 2 cara mudah untuk
menambahkan teks scroll, yaitu dengan memakai component text area dan
memakai dynamic text.
Scrolling Text memakai Component
Component yaitu sebuah sistem yang telah disiapkan oleh Flash untuk mempermudah
elemen-elemen yang umum digunakan oleh pengembang aplikasi. Salah satu component
yang dapat digunakan untuk mengolah teks yaitu text area. Perhatikan langkah-langkah
berikut untuk membuat scrolling teks dengan memakai component :
1. Pada file Flash, klik Keyframe tempat dimana anda akan menampilkan teks
ini . lalu pilih menu Window > Component. Setelah panel
Component muncul, drag komponen Text Area ke stage. Dengan memakai
Transform Tool atur posisi dan ukurannya.
Gambar 165. Menu components
2. Selanjutnya, klik TextArea ini lalu buka panel properties. Pada
Component Parameter saat n semua teks yang ingin anda tampilkan pada
kolom Text lalu tekan tombol Enter. Maka teks ini akan muncul pada
TextArea yang ada di stage, dan apabila baris text nya melebihi ukuran area teks,
secara otomatis tombol scroll akan muncul.
Gambar 166. Componen parameter text area
3. Jalankan aplikasi dengan menekan Ctrl+Enter. Text akan muncul, dan scroll
langsung dapat difungsikan tanpa penambahan kode apapun.
129
Scrolling memakai Dynamic Text
Apabila menginginkan desain yang fleksibel sesuai dengan keinginan, efek scrolling juga
dapat dibuat dengan memakai dynamic text. Perhatikan langkah-langkah berikut :
1. Buatlah sebuah file baru atau melanjutkan contoh di atas.
2. Klik Text Tool lalu perhatikan panel properties. Pada panel properties,
aturlah opsinya menjadi seperti gambar berikut
Gambar 167. Pengaturan text properties
3. Drag pada stage untuk membuat sebuah area dynamic text sesuai dengan
kebutuhan anda. Atur posisi, jenis huruf, ukuran huruf dan sebaginya
4. Selanjutnya buatlah 2 buah tombol yaitu tombol untuk scroll atas dan tombol
untuk scroll bawah. Lihat gambar.
Gambar 168. Pengaturan teks dan tombol
5. Setelah tahapan membuat objek selesai, tahapan selanjutnya yaitu memberi
instance name pada masing-masing objek. Berikan nama info_txt pada dynamic
text, t_atas pada tombol scroll atas dan t_bawah pada tombol scroll atas.
6. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. info_txt.text = "Multimedia yaitu , dan seterusnya......
sampai selesai";
2.
3. t_atas.addEventListener(MouseEvent.CLICK, scroll_atas);
4. t_bawah.addEventListener(MouseEvent.CLICK,
scroll_bawah);
5.
6. function scroll_atas(e:MouseEvent):void{
7. info_txt.scrollV--;
8. }
9. function scroll_bawah(e:MouseEvent):void{
10. info_txt.scrollV++;
11. }
7. Jalankan aplikasi dengan menekan Ctrl+Enter. Text akan muncul, dan scroll
langsung dapat difungsikan dengan menekan tombol atas dan tombol bawah.
Scrolling text dengan Gambar
Untuk scrolling konten yang mengandung elemen grafis seperti gambar, baik component
maupun dynamic text tidak mendukung, sehingga untuk melakukannya diperlukan
sebuah Movieclip untuk menghandle konten yang akan di scroll. Untuk lebih jelasnya
ikuti langkah berikut :
1. Siapkan gambar yang akan di tampilkan dalam konten scrolling. Dalam contoh
ini akan digunakan 3 buah gambar sepeda.
2. Buatlah sebuah file baru, lalu import gambar ini ke stage dengan
memilih menu File > Import > Import to Stage, lalu atur posisi gambar
ini dan lengkapi dengan static text sehingga menjadi isi dari konten yang
akan di scrol.
3. Seleksi seluruh elemen yang akan dijadikan konten scrolling ini , lalu
Convert to Symbol menjadi movieClip "konten".
131
Gambar 169. Movieclip konten scroll
4. Klik movieclip "konten" ini buka panel properties dan tambahkan instance
name "konten".
5. Seleksi kembali movieClip "konten" ini lalu Convert to Symbol
kembali menjadi movieclip "info_sepeda". Hal ini dimaksukan untuk
menambahkan efek masking ke dalam movieclip konten.
Gambar 170. Mengconvert movieclip “info sepeda”
6. Dobel klik MovieClip "info sepeda" untuk mengeditnya, lalu
tambahkan layer baru dan berikan masking agar area yang terlihat menjadi
terbatas. Langkah ini dimaksudkan agar konten yang berada diluar area scroll
menjadi tertutup oleh masking.
Gambar 171. Penambahan masking
7. Kembali ke scene utama dengan menekan Ctrl+E, lalu buatlah 2 buah
tombol untuk panah atas, dan panah bawah. lalu tambahkan instance
name pada masing-masing objek yaitu info_sepeda, up_btn dan down_btn.
Gambar 172. Pengaturan instance name
8. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. var is_drag:Boolean = false;
2. var scroll_speed:Number = 0;
3.
4. function pencet_mouse(e:MouseEvent):void{
5. var nama:String = e.currentTarget.name;
6. is_drag = true;
7. if (nama == "up_btn") scroll_speed = 10;
8. if (nama == "down_btn") scroll_speed = -10;
9. }
10. function lepas_mouse(e:MouseEvent):void{
11. is_drag = false;
12. scroll_speed = 0;
13. }
14.
133
15. function scroll_tengah(e:MouseEvent):void {
16. info_sepeda.konten.y += e.delta * 3;
17. }
18.
19. function atur_scroll(e:Event):void{
20. if (is_drag) info_sepeda.konten.y+=scroll_speed;
21. if (info_sepeda.konten.y > 0) info_sepeda.konten.y =
0;
22. if (info_sepeda.konten.y < -info_sepeda.konten.height
+ 375) {
23. info_sepeda.konten.y = -
info_sepeda.konten.height + 375;
24. }
25. }
26.
27. up_btn.addEventListener(MouseEvent.MOUSE_DOWN,
pencet_mouse);
28. down_btn.addEventListener(MouseEvent.MOUSE_DOWN,
pencet_mouse);
29. stage.addEventListener(MouseEvent.MOUSE_UP,
lepas_mouse);
30.
31. info_sepeda.addEventListener(Event.ENTER_FRAME,
atur_scroll);
32. info_sepeda.addEventListener(MouseEvent.MOUSE_WHEEL,
scroll_tengah);
9. Jalankan aplikasi dengan menekan Ctrl+Enter. Uji coba tombol dan pastikan
bekerja dengan baik.
Input Text
Input text digunakan untuk membaca masukan berupa teks melalui sebuah teks area.
Sebagai contoh dalam form registrasi/pendaftaran, pengguna diminta untuk memasukkan
nama, alamat, password, dan sejenisnya. Masukan ini dapat dibuat dengan
memakai input text. Untuk lebih memahami tentang input text, perhatikan contoh
berikut :
1. Buatlah sebuah file baru. Selanjutnya dengan memakai text tool buatlah
beberapa text area seperti pada gambar berikut :
Gambar 173. Contoh pemakaian teks type
2. Selanjutnya buatlah sebuah tombol “masuk_btn”.
3. Agar dapat diakses oleh kode tambahkan instance name pada tombol dan teks
sesuai pada gambar 173.
4. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
1. function masuk(e:MouseEvent):void{
2. if (nama_txt.text.length > 4) {
3. if (password_txt.text == "flash"){
4. output_txt.text = "Halo "+nama_txt.text+"
selamat belajar operasi teks pada flash. Latihan ini
tidak sulit kan?";
5. }else{
6. output_txt.text = "Maaf password salah";
7. }
8. }else{
9. output_txt.text = "Maaf nama harus diisi lebih
dari 4 digit";
10. }
11. }
12.
13. masuk_btn.addEventListener(MouseEvent.CLICK, masuk);
5. Jalankan aplikasi dengan menekan Ctrl+Enter. Uji coba dengan memasukkan
nama dan password bervariasi. lalu gunakan password yang benar yaitu
“flash”. Klik tombol masuk dan pada dynamic text akan muncul hasilnya.
135
Penjelasan program :
if (nama_txt.text.length > 4) { digunakan untuk mendeteksi apakah teks
yang diketikkan pada kolom nama panjangnya lebih dari 4 huruf, jika kurang maka akan
muncul pesan di baris9.
if (password_txt.text == "flash"){ digunakan untuk memastikan apakah
password yang disaat n dalam kolom password yaitu “flash”.
output_txt.text = "...”; digunakan untuk mengubah value dari dynamic text.
HTML Text format
Jika diperhatikan pada contoh di atas, tampilan yang muncul pada dynamic text
“output_text” selalu sama dari sisi jenis huruf, warna dan ukuran huruf. Sebagai contoh
saat memberikan peringatan bahwa password salah, maka sebaiknya warna teks
berubah menjadi merah. Permasalah yang muncul yaitu bagaimana cara merubah teks
dalam kondisi tertentu saja, maka solusi yang bisa digunakan yaitu HTML text format.
Untuk lebih jelasnya perhatikan langkah berikut :
6. Lanjutkan file sebelumnya. lalu klik dynamic text “output_txt” dan buka
panel properties. Aktifkan opsi Render text as HTML.
Gambar 174. Opsi Render Test as HTML
7. Klik frame 1 layer 2 buka panel Action (F9) dan ubah kode menjadi sebagai
berikut :
1. function masuk(e:MouseEvent):void{
2. if (nama_txt.text.length > 4) {
3. if (password_txt.text == "flash"){
4. output_txt.htmlText = "Halo
"+nama_txt.text+" selamat belajar operasi teks pada
flash. Latihan ini tidak sulit kan?";
5. }else{
6. output_txt.htmlText = " <b><font color
= '#ff0000'> Maaf password salah</font></b>";
7. }
8. }else{
9. output_txt.htmlText = " <b> Maaf nama harus
diisi lebih dari <font color = '#ff0000'><u> 4
digit</u></font></b>”;
10. }
11. }
12.
13. masuk_btn.addEventListener(MouseEvent.CLICK, masuk);
14. Jalankan aplikasi dengan menekan Ctrl+Enter. Uji coba dengan memasukkan
nama dan password yang salah.
Penjelasan program :
output_txt.htmlText = “....”; dengan merubah text menjadi htmlText, maka
dynamic text dapat menampilkan beberapa <tag> html seperti bold <b>, underline <u>,
pengaturan huruf <font>, breakline <br> dan beberapa tag dasar lainnya.
137
Bab IX
Audio dan Video
Elemen penting berikutnya dalam multimedia pembelajaran interaktif yaitu audio dan
video. Keberadaan audio dan video yang tepat mampu menaikkan pemahaman penguna
media, oleh karena itu pengembang multimedia pembelajaran interaktif wajib
menambahkan audio dan video ke dalam media yang dibuat.
Menambahkan Suara (Audio)
Suara pada interaktif multimedia bisa berupa background musik, efek suara saat
tombol ditekan, suara dubing dari sebuah karakter, atau suara efek yang lain. Flash
mensupport beberapa tipe suara, akan tetapi yang lebih umum untuk digunakan yaitu
suara berformat WAV dan MP3 (lebih spesifik lagi yaitu suara dengan frekuensi
dibawah 44.1). Terdapat 3 cara untuk menambahkan suara ke aplikasi yang kita buat
yaitu :
1. Drag and drop symbol suara dari library ke stage.
Cara ini cukup mudah, akan tetapi memiliki kelemahan karena suara akan sulit
dikendalikan sehingga sering kali terjadi penumpukan suara.
2. Memasukkan file suara langsung ke dalam aplikasi dan mengaturnya dengan
kode.
3. Membuka file suara dari luar aplikasi.
Untuk memahami proses penambahan suara pada aplikasi, ikuti langkah-langkah berikut
:
1. Buatlah sebuah file baru. Selanjutnya klik menu File > Import > Import to
Library. lalu pilih file suara yang akan anda pakai.Setelah anda menekan
tombol OK file suara akan masuk ke dalam library.
Gambar 175. Mengimport suara ke library.
2. Selanjutnya buatlah 2 buah tombol, masing-masing yaitu tombol play untuk
memainkan musik dan tombol mute untuk menghentikan musik.
Gambar 176. Tombol play dan mute
3. Tambahkan instance name “t_play” untuk tombol play dan “t_mute” untuk
tombol mute.
Untuk objek suara, kita tidak dapat memberikan nama instance melalui panel
properties, dikarenakan symbol suara tidak memiliki bentuk fisik, sehingga agar
suara bisa diakses memakai kode suara harus memiliki Linkage.
Untuk menambahkan linkage buka panel Library (window > library)
lalu klik kanan symbol suara dan pilih Properties. Klik tombol
advanced, lalu klik opsi Export for Actionscript dan saat n bgm pada
kolom Class. Klik OK dan akan anda dapati linkage bgm pada library.
Gambar 177. Mengatur linkage symbol suara
4. Buatlah sebuah layer baru (layer 2). Klik frame 1 layer 2 buka panel Action
(F9) dan saat n kode berikut :
139
1. var musik:bgm = new bgm(); //membuat obje
