3.9 MENERAPKAN PENGOLAHAN MULTIMEDIA INTERAKTIF MENGGUNAKAN KODE PROGRAM (CODING)

Guna memahami proses pengembangan interaktifitas dalam media yang akan dibuat, perlu memahami terlebih dahulu dasar-dasar dalam memanipulasi objek. Dengan menggunakan konsep interaktivitas bisa dibedakan tiga level interaktivitas yaitu percakapan tatap muka dengan derajat interaktivitas tertinggi, interaktivitas antara orang dengan medium, atau orang dengan sistem di mana isi dapat dimanipulasi, serta interaktivitas yang diperoleh dalam sistem informasi tanpa adanya intervensi dari user untuk merubah konten. Keunggulan multimedia di dalam interaktivitas adalah media tersebut mampu memaksa user untuk berinteraksi dengan materi secara fisik dan mental. Dengan demikian, interaktivitas sebagai derajat partisipan dalam proses komunikasi memiliki kontrol dan kenmampuan bertukar peran dalam mutual discourse.

1. Properti Movieclip

Setiap objek dalam Adobe Flash memiliki parameter-parameter yang disebut sebagai properties, misalnya movieclip tersebut memiliki posisi dengan bentuk kordinat x dan y (z jika menggunakan mode 3D), rotasi, timeline, skala, warna, dan sebagainya. Movieclip objek sering diaplikasikan dalam multimedia interaktif, sehingga seorang programmer harus mampu memanipulasi Movieclip. Implementasi paling mudah dapat dilihat pada penempatan fitur tanggal dan jam yang terdapat pada pembuatan animasi pada sebuah presentasi, company profile, ataupun khususnya aplikasi animasi CD Interaktif yang ada kalanya dituntut harus tersedia. Fitur ini digunakan dan berfungsi sebagai pengganti tampilan tanggal dan jam yang ada pada Taskbar Windows karena aplikasi animasi Interaktif harus Fullscreen. Langkah-langkah dalam membuat movie clip tanggal dan jam menggunakan Adobe Flash CS6 adalah sebagai berikut.

• Mengaktifkan program Adobe Flash, dan selanjutnya klik pada ActionScript 3 (AS3). Setelah itu membuat sebuah Document baru dan mengubah nama Layer I menjadi "Waktu" (tanpa tanda petik).
• Selanjutnya membuat sebuah sebuah teks kosong kemudian jenis teks pada Panel Properties diubah menjadi Dynamic Text dan memberi nama variabel : "tanggal" (tanpa tanda petik).
• Setelah itu mengatur posisi, lebar dan settingan font seperti gambar berikut.
• Selanjutnya membuat sebuah sebuah teks kosong kemudian jenis teks pada Panel Properties diubah menjadi Dynamic Text dan memberi nama variabel : "jam" (tanpa tanda petik). Setelah itu mengatur posisi, lebar dan settingan font yang digunakan pada jam tersebut.
• Seleksi kedua Dynamic Text dengan cara tahan klik kiri kemudian geser dan kurung kedua objek Dynamic Text tersebut (atau bisa dilakukan dengan cara klik kiri satu kali pada Dynamic Text pertama lalu tahan tombol Shift, diikuti klik kiri satu kali pada Dynamic Text yang kedua).
• Setelah kedua Dynamic Text tersebut terseleksi, lakukan Convert to Symbol menjadi Movie Clip dengan cara klik kanan pada objek lalu pilih Convert to Symbol (bisa tekan tombol F8 pada keyboard).
• Memberi nama Symbol menjadi "mc_waktu" dengan Type : Movie clip dan posisi Registration berada di tengah.
• Langkah selanjutnya adalah memberi Action Script dengan cara klik kanan pada objek Movie clip : "mc_waktu" lalu pilih Actions, atau tekan tombol F9 pada keyboard. kemudian tuliskan script berikut.

• Untuk menjalankan movie clip dilakukan dengan menekan tombol kombinasi CTRL + Enter.

2. Menambah Objek dengan AddChild dan RemoveChild (AS3)

Dalam pembuatan aplikasi menggunakan Adobe Flash CS6 sering menggunakan atau memasang movie clip dalam frame. Hal ini sangat mudah dilakukan, tetapi susah untuk dikendalikan. Guna mempermudah pengendalian tersebut, ada kalanya memasang movieclip tersebut menggunakan Action Script 3 dalam menampilkan movie clip tersebut. Salah satu metode yang paling sering digunakan oleh programmer dalam membuat aplikasi adalah menambahkan objek ke layar menggunakan kode dengan memanfaatkan fasilitas addChild dan removeChild. Script tersebut berguna bagi programmer yang menginginkan objek-objek distage dapat dimasukkan dan dihapus. Script AddChild dan removeChild digunakan untuk memasukkan dan menghapus objek pada sebuah stage. Prosedur pelaksanaannya diawali dengan membuat objek dan memberi linkage pada objek tersebut. Setelah itu baru memberikan script.

• Membuat sebuah dokumen Flash dengan ukuran 450 x 410 pixel dengan warna abu-abu dan FPS=12.00.
• Klik pada Text Tool (T) lalu membuat static text dengan Font jenis Arial, Size 16 pt, Color berwarba putih, dan teks diposisikan di atas Stage. Setelah itu membuat garis putih horizontal dengan Line Tool dan diletakkan di bawah teks pertama.
• Selanjutnya membuat teks langkah di atas, tetapi dengan Size=12 dan diletakkan di bawah garis putih.
• Selanjutnya membuat kursor dengan cara klik pada menu Insert New Symbol (CTRL + F8) dan diberi nama : "DiskCursor" dengan Type=Movie Clip, dan di akhiri dengan menekan klik OK.
• Klik Oval Tool (O) untuk membuat objek lingkaran dengan warna gradasi radial merah putih dengan ukuran 20 x 20 pixel
• Selanjutnya klik menu Edit → Edit Document (Ctrl+E) untuk kembali ke modus edit dokumen. Setelah beralih ke Timeline, ditambahkan layer baru yang bernama Actions
• Klik pada Frame 1 Layer: Actions, sehingga panel Action (F9) terbuka. Pada panel tersebut diisi dengan menuliskan kode-kode script sebagai berikut.

• Jalankan aplikasi dengan menekan tombol kombinasi Ctrl+ Enter.

3. Menambah EventListener

Beberapa event yang dimiliki Actionscript 3 (AS3) sehingga mampu membentuk interaktivitas di antaranya MouseEvent, EnterFrame Event, dan KeyboardEvent. Penggunaan MouseEvent selalu berkaitan den EventListener. EventListener identik dengan sebuah urutan kejadian (event) yang dapat diperintahkan kepada sebuah objek.

>>Implementasi MouseEvent

Implementasi MouseEvent beserta perbedaannya dapat dilihat pada penerapan fitur Drag and Drop maupun Drag dan Snap.

1) Fitur Drag and Drop

Pada dasarnya penggunaan fitur drag and drop masih sebatas mendeteksi posisi movieclip awal sudah berada tepat diposisi movicelip menggunakan teori pythagoras menghitung akar kuadrat (Math.sqrt) dari selisih kordinat dua objek. Secara umum, aplikasi multimedia interaktif banyak ditemukan penggunaan fitur drag and drop. Misalnya dalam simulasi hukum Faraday, di mana objek magnet dapat didrag oleh user dan digerakkan ke area kumparan. Langkah-langkah dalam membuat fitur drag and drop adalah sebagai berikut.

• Diawali mengaktifkan adobe flash dan membuka dokumen baru.
• Selanjutnya membuat gambar kepala dan tubuh lebah secara yang terpisah. Selanjutnya memilih Convert to Symbol pada gambar menjadi movieclip kepala dan movieclip tubuh. Perhatikan letak titik pusat ( +) atau titik registrasi dari movieclip tersebut.
• Klik pada movieclip kepala lebah, kemudian pada isian instance name ketikan: kepalalebah dan isian instance name : tbhlebah digunakan pada movieclip tubuh lebah. Selanjutnya membuat sebuah layer baru dengan cara klik frame 1-layer 2 dan mengaktifkan panel Action (atau menekan tombol F9). Setelah aktif, masukkan kode program sebagai berikut.

• Untuk menjalankan movie clip dilakukan dengan menekan tombol kombinasi CTRL + Enter. Diikuti dengan mengarahkan pointer pada drag kepala lebah tersebut. Hasilnya adalah pada movieclip kepala lebah berjarak kurang dari 60 pixel setelah tombol mouse dilepas, maka kordinat movieclip kepala lebah secara otomatis akan dijadikan sama dengan kordinat movieclip tubuh. Agar posisinya tepat sasaran, dapat diatasi dengan menggunakan efek Snap.

2) Fitur Drag dan Snap

Adakalanya penggunaan fitur drag dan snap tidak sesuai harapan. Penyebab utamanya adalah keberadaan posisi deteksi yang masih terlalu luas (tanpa adanya ukuran jarak), sehingga pada saat kepala lebah baru sedikit saja menyentuh titik terluar tubuh lebah sudah dianggap sebagai dropTarget. dropTarget adalah kode AS3 memiliki sistem deteksi antara dua objek yang di drag menggunakan mouse. Implementasi dari kode AS3 adalah sebagai berikut.

Hasil akhir dari kode diatas setelah dijalankan menggunakan CTRL + Enter temyata kurang sesuai harapan. Untuk hal tersebut, dapat dilakukan dengan langkah-langkah sebagai berikut.

a) Klik pada frame 1-layer 2, setelah itu mengaktifkan panel Action (F9) dan mengubah kode AS3 scbagai berikut.

b) Jalankan aplikasi dengan menekan tombol kombinasi Ctrl + Enter. Klik dan drag kepala lebah tersebut mendekati posisi yang tepat (sekitar leher) untuk menguji coba kode tersebut. Teknik membaca kode pada fitur drag dan snap adalah sebagai berikut.

1. var awalan x:Number = kordinat x dan y dari movieclip kepala disimpan di dalam variabel awalan_x dan awalan_y. Hal ini bertujuan jika kepala tidak didrag pada posisi yang tepat, maka akan kembali ke posisi awalan kepalalebah.addEventListener(MouseEvent.MOUSE_DOWN,th nMouse);
2. Selanjutnya movieclip kepala diberikan listener ketika mouse ditekan. Ketika event terjadi (ketika mouse ditekan), maka fungsi thnMouse akan dijalankan.
3. kepalalebah.startDrag(); merupakan kode untuk memulai mode drag sebuah objek sedangkan kode untuk mengakhiri mode drag sebuah objek adalah kepalalebah.stopDrag();
4. var jrkAwal=Math.sqrt(...); merupakan perhitungan jarak menggunakan metode pythaoras yaitu akar dari selisih kuadrat jarak antara movieclip kepala lebah dengan movieclip tubuh lebah.
5. if (jrkAwal < 50){...}else {.} merupakan kondisi untuk melakukan proses snap. Jika jrkAwal kurang dari 60 pixel maka posisi akan di-snap, sedangkan jika lebih akan dikembalikan ke posisi awalan_x dan awalan_y.

>>Implementasi Enter Frame Event

Langkah-langkah penggunaan EnterFrame Event adalah sebagai berikut.

• Membuat sebuah movieclip animasi lebah yang sedang terbang secara frame by frame. Selanjutnya melakukan convert gambar menjadi movieclip dengan cara menckan tombol F8 sehingga muncul kotak dialog Convert to symbol dan diberi nama : animelebah dan pada Type pilih opsi Movie Clip. Proses ini diakhiri dengan menekan tombol OK.
• Selanjutnya membuat sebuah layer baru dengan nama layer 2. Klik pada frame 1-layer 2 dan mengaktifkan panel Action (atau menekan tombol F9). Setelah itu memasukkan kode script sebagai berikut.

• Untuk melakukan ujicoba dapat dilakukan dengan cara menekan tombol kombinasi Ctrl + Enter. Hasilnya adalah lebah tersebut akan bergerak ke kanan secara terus-menerus sampai keluar dari layar.
• Agar lebah dapat bergerak secara berulang ke kanan dan ke kiri, dapat dilakukan dengan mengubah kode pada frame 1 pada layer 2 menjadi sebagai berikut.

• Jalankan kembali aplikasi dengan menekan tombol kombinasi Ctrl + Enter. Hasilnya adalah animasi lebah tersebut akan terbang secara berulang ke kanan dan ke kiri.

Teknik membaca kode pada EnterFrame Event adalah sebagai berikut.

1. var beequick2:int = 5; merupakan deklarasi beequick2 pada animasi lebah. Nilai dari variabel ini bisa diubah secara dinamis ketika kondisi tertentu (baris 5) terpenuhi.
2. function beefly1(e:Event):void{.} merupakan fungsi yang dijalankan secara berulang-ulang setelah kode addEventListener diaktifkan.
3. var ob:Object = c.currentTarget; merupakan deklarasi variabel yang mengacu pada objek yang diperintah oleh eventListener, di mana dalam hal ini adalah movieclip dengan instance name "animelebah".
4. ob.x += beequick2;berarti setiap frame (karena menggunakan 30 fps, maka setiap l/30 detik) posisi x dari animasi lebah akan ditambah dengan variabel beequick2.
5. if (ob.x > 600 || ob.x < 100) {.. }adalah kondisi di mana ketika posisi animelebah terlalu ke kanan atau ( ||) terlalu ke kiri, maka variabel beequick2 akan dikalikan-1;
6. beequick2 *=-1; berarti ketika kondisi di atas terpenuhi beequick2 akan dibalik. Jika semula adalah 5 maka akan menjadi-5, dan ketika beequick2-5 maka animasi lebah akan bergerak ke kiri sampai kordinat x< 100 dan kondisi if terpenuhi lagi sehingga beequick2 menjadi-5 x- 1 = 5; dan animasi lebah bergerak ke kanan kembali.
7. ob.scaleX = beequick2/Math.abs(beequick2);untuk merubah arah animasi lebah dengan menggunakan skala X. Ketika beequick2 bernilai-5, maka ob.scaleX akan bernilai-5 dibagi nilai absolut becquick2 (5), sehingga hasilnya adalah-1 dan animasi lebah akan berubah arah (flip horizontal).

>>Implementasi Enter Frame Event

Implementasi sederhana berupa simulasi seekor lebah menggunakan tombol panah bisa disebut sebagai Keyboard Event. Keyboard Event identik dengan sebuah event yang terjadi ketika mendapat nilai input dari keyboard. Langkah-langkah dalam membuat simulasi jaluran seekor lebah adalah sebagai berikut.

1) Diawali dengan membuat gambar lebah yang terlihat tampak atas dan menghadap ke atas (atau dapat dilakukan dengan mengimport gambar dengan memilih menu File Import Import to Stage).

2) Setelah itu, melakukan seleksi pada gambar tersebut.

3) Diikuti dengan konversi gambar lebah menjadi movieclip dengan cara menekan tombol F8 sehingga muncul kotak dialog Convert to symbol dan diberi nama : lebah dan pada Type pilih opsi Movie Clip. Proses ini diakhiri dengan menekan tombol OK.

4) Selanjutnya membuat sebuah layer baru dengan nama layer 2. Klik frame 1-layer 2 dan mengaktifkan panel Action (atau menekan tombol F9), setelah itu memasukkan kode AS3 sebagai berikut.

5) Jalankan aplikasi dengan menekan tombol kombinasi Ctrl + Enter, dan aplikasikan dengan menekan tombol panah pada keyboard untuk mengatur jaluran lebah.

Teknik membaca kode pada EnterFrame Event adalah sebagai berikut.

• var arah atas:Boolean-false; merupakan deklarasi variabel untuk mendeteksi apakah tombol atas ditekan (true) atau dilepas (false).
• if (event.keyCode = 37 { arah_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 37.
• ob.x += ob.speed3 * Math.sin(ob.rotation merupakan perhitungan trigonometri sederhana sebuah objek berdasarkan rotasi yang dimilikinya.
• stage.addEventListener(KeyboardEvent.KEY DOWN, keyDownFunction); merupakan deklarasi KeyboardEvent untuk mendeteksi tombol ditekan.