Animasi Interaktif melalui Action Script

Wahyullah

Pengertian Animasi Interaktif

• Animasi Interaktif merupakan kumpulan gambar, garis, teks, atau unsur pembentuk objek lain yang memberikan efek gerakan (visual animasi) dan suara (audio) sehingga dengan efek tersebut pengguna dapat menerima pesan-pesan yang disampaikan dan dapat melakukan timbal balik terhadap animasi tersebut. Sebelum melangkah lebih jauh ke dalam pembuatan Animasi Interaktif, Terlebih Dahulu diharuskan untuk mempelajari Action Script yang merupakan media dalam pembuatan Animasi Interaktif.

Action Script

• Action Script merupakan bahasa pemrograman OOP (Object Oriented Programming) dalam flash. Anda dapat menggunakan ActionScript untuk mengontrol objek di Flash, membuat navigasi dan elemen interaktif lain, serta membuat movie Flash dan aplikasi Web yang interaktif.

• Versi ActionScript:1. Actionscript 1.0, Flash Player 7 ke bawah2. Actionscript 2.0, berlaku pada Flash Player 8 ke

atas3. Actionscript 3.0, berlaku pada Flash Player 9 ke

atas

Dasar Action Script

A. Objek dan Kelas

• Objek adalah tipe data seperti suara, gambar, teks yang digunakan untuk mengontrol movie. Semua objek merupakan bagian dari suatu kelas.

• Flash memiliki variasi bentuk objek yang sangat beragam, mulai dari gambar yang kelihatan sampai dengan yang abstrak seperti tanggal, data, atau deteksi masukan dari mouse. Sebelum kita dapat menggunakan objek, kita perlu memberi nama pada objek tersebut, sama seperti tiap orang perlu memiliki nama supaya dapat dikenali. Misalnya Penari, Flintstone, dan Napi dapat dibedakan berdasar nama mereka.

• Di samping objek yang kita definisikan sendiri, Flash juga memiliki predefined class yang dapat digunakan membuat objek-objek untuk dipakai dalam movie. Objek-objek ini berada di dalam kategori Objects di dalam ActionScripts, misalnya MovieClip, Color, Sound, dll. Objek dari predefined class ini juga harus diberi nama. Proses memberi nama objek ini dinamakan instantiating. Karena objek yang berasal dari kelas tertentu, sesungguhnya dapat dianggap bahwa objek tersebut adalah juga merupakan instance dari kelas. Penari, Flintstone, dan Napi masing-masing merupakan instance dari kelas manusia

B. Metode dan proferty

•Setiap objek selain berbeda dalam nama, juga berbeda dalam karakteristik. Setiap orang berbeda dalam berbagai karakteristik seperti jenis kelamin, tinggi badan, berat badan, dan warna rambut. Di dalam ActionScript karakteristik-karakteristik ini dinamakan properti. Misalnya kelas MovieClip memiliki berbagai properti seperti _height, _width, dan _rotation yang mengukur dimensi dan orientasi dari objek movie klip tersebut.

C. Struktur bahasa Action Script

• Seperti halnya dalam menggunakan bahasa alamiah, kita perlu menempatkan kata benda, kata sifat, dan kata kerja dalam susunan yang dimengerti orang lain. Di sini kita menyusun objek, properti dan metode sampai membentuk statement atau pernyataan yang dimengerti Flash.

• Flash menggunakan struktur bahasa sintaks dot. Dot atau titik digunakan untuk menunjukkan properti atau metode yang terkait dengan objek. Contoh:

• Penari.berat = 50 Petualang.berat = 65 • Pernyataan di atas menetapkan nilai 50 untuk

properti berat dari Penari, dan nilai 65 untuk berat dari Petualang.

D. Tanda Baca dalam Action Script

• Seperti dalam bahasa tulisan memiliki tanda baca untuk mengakhiri kalimat, atau mengelompokkan berbagai kalimat menjadi satu paragraf, Flash juga memiliki tanda baca seperti itu.

1. Kurung kurawal dan titik koma• Kurung kurawal, { }, digunakan untuk

melakukan pengelompokan.•on(release) { stopAllSounds(); play();}

•Dalam skrip di atas, kedua metode stopAllSounds dan play akan dieksekusi saat tombol mouse dilepaskan karena berada dalam satu kelompok. Ini seperti paragraf.

•Titik koma berfungsi seperti tanda akhir kalimat yang setelah kalimat pertama berakhir kemudian beralih ke kalimat berikutnya. Di dalam ActionScript, setiap pernyataan dieksekusi dari atas ke bawah secara berurutan. Jadi pada contoh di atas, setelah metode stopAllSounds selesai baru kemudian play dijalankan.

2. Komentar• Script merupakan bahasa komputer yang sulit dibaca. Oleh

karena itu, kita bisa memberinya komentar di tengah-tengah perintah. Komentar berfungsi sebagai dokumentasi yang mudah dikenali jika ada modifikasi program di lain waktu. Komentar juga akan mempermudah programmer untuk melakukan debug atau koreksi terhadap baris program yang mengalami kesalahan. Cara memberi komentar di ActionScript sebagai berikut:

• Cara ke-1 adalah :// Perintah untuk berhenti pada frame tertentugotoAndStop(10);

on(release) { // matikan semua suara stopAllSounds(); // mainkan play();}

•Atau dengan cara ke-2/*Perintah untuk pergi ke frame tertentu

Dan kemudian tetap dijalankan*/gotoAndPlay(10);

•Cara ke-1 dengan tanda “//” untuk memberi komentar per baris. Dan cara ke-2 dengan dimulai tanda “/*” dan diakhiri tanda “*/”untuk memberi komentar lebih dari satu baris.

Action Panel

• Panel Action adalah tempat untuk menulis perintah atau script yang dilengkapi oleh berbagai fasilitas dan kecanggihan khusus.

• Panel ini dibagi lagi dalam beberapa bagian : a. Informasi Lokasi, yaitu informasi di mana script

diletakkan. Frame, Button dan Movieclip adalah tempat bersemayam script-script tersebut. Ketiga tempat tersebut mempunyai sifat dan efek berbeda dalam memperlakukan script.

b. Kategori, yaitu daftar script fungsi yang disusun rapi berdasarkan kategori. Anda tentunya harus hafal dan mempelajarinya dulu untuk memanfaatkan fasilitas ini.

c. Tempat Jelajah, yaitu tempat untuk mengetahui, melihat dan mencari secara cepat dimana scriptscript diletakkan.

d. Tempat Mengetik, yaitu tempat untuk menulis perintah atau script.

Menampilkan Panel Action• Untuk menampilkan Panel Action seperti yang

terlihat pada gambar 2.1 caranya adalah :1. Pilih dan tentukan tempat (lihat gambar 2.2) di

mana Anda ingin meletakkan script. Apakah itu di :• a. Frame• b. Button• c. Movieclip.

2. Klik dengan mouse tempat tersebut. Kalau tempat tersebut terpilih, pasti komputer akan memberi tanda seleksi blok hitam, bila Anda memilih di Frame. Dan tanda seleksi kotak berwarna biru bila Anda memilih Button atau Movieclip.

3. Setelah itu tekan tombol F9. Maka Panel Action seperti yang terlihat pada gambar 2.1 akan muncul

•Pada gambar di atas terlihat bahwa gambar tombol sedang diseleksi, sehingga papan catat yang bernama Property Inspector menginformasikan gambar tersebut tersebut adalah symbol “Button”

Syntax Coloring

•Warna pada script mempunyai arti untuk memudahkan kita mengenali perintah atau untuk melihat apakah ada pengetikan yang salah.

•Untuk melihat atau mengganti arti dari warna tersebut, kini buka kota Preferences.

1. Pilih menu Edit > Preferences … (Ctrl+U)

2. Klik bagian (TAB) ActionScript3. Kemudian Anda akan menemukan

bagian Syntax coloring seperti gambar 4.2 Kata syntax berarti tata bahasa atau grammer. Pengetikan script harus mengikuti aturan (syntax) yang telah ditentukan untuk menghindari terjadinya kesalahan yang tidak diinginkan.

Arti dari warna-warna berikut ini yang ada pada kotak preferences :

• Foreground (Hitam) : Warna tulisan script secara umum. Contoh: i=i+1 (lihat gambar 4.1).

• Background (Putih) : Warna latar tempat mengetik script.• Keywords (Merah) : Warna kata kunci yang telah

dicadangkan oleh Flash. Contoh: onClipEvent• Comments (Abu-abu) : Warna komentar. Contoh: // Ini adalah

komentar.• Identifiers (Biru Tua) : Warna fungsi yang ada di dalam Flash.

Contoh: enterFrame, trace.• Strings (Biru) : Warna tulisan berjenis huruf atau kalimat

(string). Jadi dengan panduan warna-warna tersebut, Anda setidaknya bisa lebih berhati-hati bila terjadi salah ketik.

Frame Script

•Script yang diletakkan di frame disebut FrameScript. Untuk meletakkan script di frame adalah :

1. Buatlah layer baru pada Timeline, berikan nama action

2. Pilih satu keyframe pada layer action.3. Pilih Window > Action untuk membuka

panel Action atau F94. Test Movie (Ctrl+Enter)•Pastikan informasi lokasi di Panel Action

menunjukkan tulisan “Frame” untuk menghindari kesalahan lebih lanjut. Karena sering kali terjadi mereka yang tidak teliti akan menekan mouse di sembarang tempat (bukan di Frame).

•Setelah itu baru Anda bisa bebas mengetik script.

Latihan FrameScript:

1. Buatlah 10 keyframe mulai frame 1 s.d 10

2. Isi masing-masing frame dengan angka 1 s.d 10

3. Buat layer baru untuk script, beri nama script

4. Buat keyframe di frame ke 10 pada layer script, lalu buka action-frame panel (tekan F9), tulisakan gotoAndStop(7)

5. Tekan Ctrl+Enter untuk test movie

Button Script

•Script yang diletakkan di button (tombol) disebut ButtonScript. Script di tombol-pun harus mempunyai pemicu (event). Kalau di frame hanya mempunyai satu pemicu, di tombol punya banyak sekali pemicu, antara lain :

1. press: kejadian saat tombol mouse ditekan.2. release: kejadian saat tombol mouse ditekan

dan kemudian dilepas.3. releaseOutside: kejadian saat tombol mouse

ditekan dan kemudian dilepas di luar area objek tombol.

4. rollOver: kejadian saat kursor mouse masuk dalam area objek tombol. Pada saat ini tombol mouse belum ditekan.

5. rollOut: kejadian saat kursor mouse masuk dan kemudian keluar dari area objek tombol. Pada saat ini tombol mouse belum ditekan.

6. dragOver: kejadian saat tombol mouse ditekan dan kemudian keluar dari area tombol. Pada saat ini tombol mouse masih ditekan, belum dilepas.

7. dragOut: kejadian saat tombol mouse ditekan dan kemudian keluar dari area tombol dan kemudian masuk lagi ke dalam area tombol. Pada saat ini tombol mouse masih ditekan, belum dilepas. Untuk mengetik script di tombol, Anda harus tahu tata bahasa atau syntax agar perintah dapat berjalan dengan benar

•Di bawah ini adalah syntax untuk buttonscript. on ( nama_event ) {perintah atau handler}

• Jadi jelas sekali perbedaan antara framescript dan buttonscript. Framescript hanya punya satu event, jadi Anda bisa langsung mengetik perintah. Sedangkan Buttonscript punya banyak sekali event, sehingga Anda harus mengetik nama eventnya dulu dan baru kemudian mengetik perintah.

Latihan membuat Buttonscript1. Buatlah symbol button pada frame ke-72. Pastikan informasi lokasi di Panel Action

menunjukkan tulisan “Button” (Gambar 8.2) untuk menghindari kesalahan lebih lanjut. Flash sangat rentan atau sensitif kalau sudah masuk ke dalam Actionscript karena banyak jalan menuju ERROR (kesalahan). Tetapi jangan takut, kalau Anda sudah terbiasa, hal-hal yang telah disebutkan di atas jarang sekali terjadi dan kalaupun terjadi akan sangat gampang terdeteksinya.

3. Kemudian buat actionscript fungsi on(press) { gotoAndPlay(1); }

4. Selanjutnya test moviclip (Tekan Ctrl+Enter)

Menyisipkan Sound dalam Animasi

•Untuk menyisipkan suara dalam animasi dilakukan dengan cara:

1. Klik menu File ► Import ► Import to Library hingga tampil kotak dialog Import to Library.

2. Pilih salah satu nama file sound/suara yang ingin digunakan, kemudian klik tombol Open

3. Tambahkan Layer 2 dan diposisikan paling atas dengan cara menekan tombol New Layer

4. Silahkan menyisipkan sound ke dalam frame 1 Layer 2

5. Klik frame 1 Layer 2, Kemudian pilih file sound pada panel Properties

6. Kamu dapat menggunakan pilihan Repeat atau Loop untuk mengatur pengulangan sound

Memberi Sound pada tombol

Memberi sound dengan cara mengimpor

1. Klik menu File ► Import ► Import to Library sehingga tampil kotak dialog Import to Library.

2. Tentukan nama file sound yang ingin di import. Kemudian klik tombol open maka secara otomatis file sound masuk dalam panel Library

3. Selanjutnya edit tombol yang akan diberi sound.4. Klik dua kali tombol itu sehingga masuk pada frame

pengeditan tombol5. Klik frame Over kemudian pilih file sound yang telah

diimpor pada panel Properties6. Tekan CTRL + Enter untuk menjalankan animasi.

Arahkan mouse pada tombol Next maka akan terdengar suara dari file sound yang telah disisipkan.

Memberi Sound Melalui Panel Library1. Buka lembar kerja baru dengan CTRL + N2. Ambil tombol yang telah tersedia

menggunakan perintah Window ►Common Libraries ► Buttons.

3. Klik tahan dan geser salah satu tombol dari panel Library-Buttons ke lembar kerja.

4. Editlah tombol yang telah masuk lembar kerja, kemudian Dobel klik pada objek tombol

5. Selanjutnya tampilkan panel Library-Sounds dengan perintah Window ► Common Libraries ► Sounds

Terima Kasih