pengertian dan fungsi action script

Actionscript Dasar
1. Mengenal Panel Action
Panel Action adalah tempat untuk menulis perintah atau script yang dilengkapi oleh berbagai fasilitas dan
kecanggihan khusus.
Panel ini dibagi lagi dalam beberapa bagian :
1. 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.
2. KATEGORI, yaitu daftar script fungsi yang disusun rapi berdasarkan kategori. Anda tentunya harus
hafal dan mempelajarinya dulu untuk memanfaatkan fasilitas ini.
3. TEMPAT JELAJAH, yaitu tempat untuk mengetahui, melihat dan mencari secara cepat dimana scriptscript
diletakkan.
4. TEMPAT MENGETIK, yaitu tempat untuk menulis perintah atau script.
Gambar 1.1 Bagian-bagian Panel Action
CATATAN: Bila kita menseleksi (memblok hitam) fungsi trace atau gotoAndPlay, kemudian menekan
tombol F1 (Help), Anda akan dibawa langsung kepada dokumentasi fungsi tersebut secara cepat.
2. Menampilkan Panel Action
Untuk menampilkan Panel Action seperti yang terlihat pada gambar 1.1 caranya adalah :
1. Pilih dan tentukan tempat (lihat gambar 2.1) 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 1.1 akan muncul.
Gambar 2.1 Target tempat untuk meletakkan script
Pada gambar di atas terlihat bahwa gambar tombol sedang diseleksi, sehingga papan catat yang bernama
Property Inspector menginformasikan gambar tersebut tersebut adalah symbol “Button” (Lihat lingkaran
pada gambar 2.1).
3. Mengatur Panel Action
Kadang Panel Action seperti menempel di atas papan catat Property Inspector. Anda bisa mengeluarkannya
dengan menarik “Jerawat” Panel Action keluar. Yah… setiap panel ada “jerawat”-nya untuk memindahmindahkan
kotak panel ke tempat tertentu. Lihat gambar 3.1, Anda bisa tarik setelah kursor berubah
menjadi tanda “+”.
Gambar 3.1 Menarik Panel Action keluar
Setelah di tarik keluar, Panel Action akan seperti melayang (tidak menempel) . Tetapi kadang Anda tidak
berhasil menarik keluar atau bahkan malah menempel di tempat lain. Flash memang sensifif, gerakan Anda
harus terlatih.
Kemudian kadang bagian kategori dan tempat jelajah di Panel Action bisa hilang (sembunyi). Oleh karena
itu Anda bisa menampilkan dan menyembunyikan dengan dua cara, yaitu :
a. Menarik batas antara bagian kiri dan kanan. Setelah kursor berubah tanda (lihat gambar 3.2), maka
Anda bisa memulai menarik ke kanan.
b. Dengan menekan (klik) tombol mouse di tanda (lihat gambar 3.2) yang melekat pada batas antara
bagian kiri dan kanan.
Gambar 3.2 Menampilkan dan menyembunyikan bagian kategori dan tempat jelajah di Panel Action
Kita perlu belajar hal-hal seperti ini supaya tidak kesulitan atau stress. Anda perlu mengenal dengan baik
daerah tempat Actionscript bersemayam tersebut.
4. Syntax Coloring
Saat mengetik script (lihat gambar 4.1), pasti kita akan menemukan perbedaan warna antar kata yang satu
dengan kata yang lain. Warna-warna tersebut mempunyai arti untuk memudahkan kita mengenali perintah
atau untuk melihat apakah ada pengetikan yang salah.
Gambar 4.1 Contoh Script
Untuk melihat atau mengganti arti dari warna tersebut, kini buka kota Preferences.
1. Pilih menu Edit > Preferences … (Ctrl+U)
2. Klik bagian (TAB) ActionScript
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.
Gambar 4.2 Kotak Preferences – Syntax coloring
Perhatikan juga gambar 4.1 untuk mengikuti arti dari warna-warna berikut ini yang ada pada kotak
preferences :
1. Foreground (Hitam) : Warna tulisan script secara umum. Contoh: i=i+1 (lihat gambar 4.1).
2. Background (Putih) : Warna latar tempat mengetik script.
3. Keywords (Merah) : Warna kata kunci yang telah dicadangkan oleh Flash. Contoh: onClipEvent
4. Comments (Abu-abu) : Warna komentar. Contoh: // Ini adalah komentar.
5. Identifiers (Biru Tua) : Warna fungsi yang ada di dalam Flash. Contoh: enterFrame, trace.
6. Strings (Biru) : Warna tulisan berjenis huruf atau kalimat (string). Contoh : “Hello Baba”.
Jadi dengan panduan warna-warna tersebut, Anda setidaknya bisa lebih berhati-hati bila terjadi salah ketik.
Karena komputer tidak mengenal kompromi kalau kurang atau kelebihan satu huruf saja maka jalannya
program akan salah (ERROR).
5. Script di Frame
Script yang diletakkan di frame disebut Framescript. Untuk meletakkan script di frame adalah :
1. Tentukan frame berapa yang ingin diberi script. Misalkan frame 10.
2. Peletakan harus di Keyframe. Kalau di frame 10 belum ada keyframe, Anda harus membuatnya dulu
dengan menekan tombol F6 (Insert Keyframe).
3. Setelah itu baru tekan tombol F9 untuk menampilkan Panel Action.
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.
Gambar 5.1 Informasi lokasi framescript
Bila telah selesai mengetik script, tutup Panel Action. Anda akan menemukan tanda “a” di frame
(keyframe) yang telah diletakkan script (lihat gambar 5.2).
Suatu waktu bila ingin merubah script tersebut, klik tanda “a” di frame (keyframe) dan tekan tombol .
Gambar 5.2 Actionscript di Frame (Keyframe)
Layer tidak ada hubungannya dengan script. Script di Frame 10, diletakkan di layer manapun tidak
masalah. Tetapi untuk menjaga kerapian dan kemudahan, sebaiknya Anda meletakkan framescript dalam
satu layer, misalkan layer “Actionscript”. Bayangkan kalau script-script Anda (gambar 5.2) terpencar di
banyak layer. Pasti kita akan kebingungan dalam pencarian nantinya. Hal-hal kecil ini bila tidak
terorganisir dengan baik akan membuat Anda stress dan membuat pekerjaan menjadi lama.
6. Event di Frame
Setiap perintah atau script yang diketik tentunya harus ada pemicu. Misalkan manusia sudah diberi perintah
(emosi) marah. Perintah atau kejadian tersebut harus ada pemicunya, yaitu kalau ditampar pipinya, maka
kejadian marah akan dijalankan. Pemicu ini disebut Event (kejadian) di Flash.
Setelah Anda mengetik script di frame 10 tadi, pemicunya adalah ketika playhead (lihat gambar 6.1) telah
mencapai frame 10. Kalau playhead belum mencapai frame 10, misalkan masih di frame 8, perintah di
frame 10 tidak akan dijalankan.
Frame hanya mempunyai satu event saja dan hanya dijalankan sekali (bukan berkali-kali).
Gambar 6.1 Playhead sebagai pemicu(Event)
Kalau Anda meletakkan perintah marah di frame 10. Maka perintah marah tersebut hanya dijalankan sekali
saja walaupun playhead berhenti di frame 10. Inilah salah satu sifat script yang diletakkan di frame.
Bagaimana kalau perintah mau dijalankan berkali-kali? Anda harus menyuruh playhead kembali berjalan
dari frame sebelumnya, misalkan frame 8 atau frame 9. Setelah itu playhead kembali melewati lagi frame
10, perintah akan dijalankan kembali dan begitu seterusnya.
7. Enable Simple Frame Actions
Setelah mengenal sebagian daerah kekuasaan di Panel Action. Mari sekarang kita mulai mengetik script.
1. Pilih menu File > New... (Ctrl+N) untuk memulai file baru.
2. Buat keyframe di frame 10
3. Klik keyframe 10 tersebut karena kita akan mengetik script di sana.
4. Tekan tombol F9 untuk menampilkan Panel Action.
5. Ketik di Panel Action script : gotoAndPlay(3);
Gambar 7.1 Melihat jalannya Script
6. Tutup kembali Panel Action
7. Pilih menu Control > Enable Simple Frame Actions
8. Jalankan movie flash tersebut dengan menekan tombol ENTER.
Maka Anda akan melihat playhead akan terus berjalan berulangkali (looping) karena ada perintah di frame
10 untuk menyuruh playhead balik lagi ke frame 3 dan begitu seterusnya.
Mengapa harus mengaktifkan Enable Simple Frame Actions? Hal tersebut untuk melihat jalannya script.
Coba Anda menonaktifkan fasilitas tersebut dengan memilih kembali Enable Simple Frame Action dan
kemudian menekan tombol ENTER. Pasti script tersebut tidak akan berjalan.
Fasilitas ini sangat berguna untuk menunjukkan kepada pemula bagaimana cara kerja script di Frame.
Lebih tepat lagi sebagai sarana ajar saja bagi siswa. Karena tentu sulit menunjukkan kepada orang jalannya
playhead bila sudah jadi movie Flash.
Sesuai dengan namanya Enable Simple Frame Actions. Berarti hanya script-script dasar saja seperti
gotoAndPlay(), gotoAndStop(), Stop() dan Play() yang bisa berjalan. Untuk script yang lebih rumit,
Anda harus menjalankannya dengan cara lain.
8. Script di Button (Tombol)
Script yang diletakkan di button (tombol) disebut Buttonscript. Untuk meletakkan script di tombol adalah :
1. Pastikan tombol yang dimaksud sudah terpilih (diklik). Perhatikan juga informasi (gambar 8.1) di
Property Inspector apakah benar tombol tersebut yang dimaksud.
2. Setelah semuanya dipastikan, tekan F9 untuk menampilkan Panel Action.
Gambar 8.1 Informasi tombol di Property Inspector
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.
Gambar 8.2 Informasi lokasi Buttonscript
Baru setelah melewati berbagai pengecekan dan rintangan di atas, Anda bisa bebas mengetik script.
9. Event di Button
Script di tombol-pun harus ada pemicu. Kalau di frame hanya mempunyai satu pemicu, di tombol punya
banyak sekali pemicu/kejadian (event), antara lain :
• press: kejadian saat tombol mouse ditekan.
• release: kejadian saat tombol mouse ditekan dan kemudian dilepas.
• releaseOutside: kejadian saat tombol mouse ditekan dan kemudian dilepas di luar area objek
tombol.
• rollOver: kejadian saat kursor mouse masuk dalam area objek tombol. Pada saat ini tombol
mouse belum ditekan.
• rollOut: kejadian saat kursor mouse masuk dan kemudian keluar dari area objek tombol. Pada saat
ini tombol mouse belum ditekan.
• dragOver: kejadian saat tombol mouse ditekan dan kemudian keluar dari area tombol. Pada saat
ini tombol mouse masih ditekan, belum dilepas.
• 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.
10. Syntax di Button
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
}
Nama event anda bisa lihat di trik sebelumnya tentang Event di Button.
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.
11. Teknik cepat menampilan Event di Button
Tentu Anda kadang lupa nama-nama event di tombol. Jangan khawatir, ini ada teknik cepat untuk
menampilkan nama event tersebut.
1. Masuk ke dalam Panel Action, pastikan informasi lokasinya “Button”.
2. Saat Anda mengetik on( , maka nama-nama event tombol akan tampil dengan sendirinya.
(Gambar 11.1).
Yang penting Anda ingat saja kalau ingin mengetik script di tombol, hafalkan saja harus dimulai dengan
tulisan on( . Selanjutnya lihat syntax selengkapnya, jangan sampai salah ketik atau lupa. Ada 2 tanda buka
dan tutup kurung di situ.
Gambar 11.1 Informasi lokasi Buttonscript
12. Common Library
Common Library berisi berbagai macam tombol, aplikasi dan program siap pakai. Untuk membuka
Common Library.
1. Pilih menu Window > Other Panels > Common Libraries
2. Ada tiga (3) pilihan Buttons, Classes, Learning Interaction.
3. Pilih saja Buttons, karena kita akan menggunakan tombol yang sudah siap (Gambar 12.1) pakai
sebagai latihan kita berikutnya.
Di sana tombol dibagi dalam berbagai folder atau kategori. Buka saja salah satu folder dan pilih jenis
tombol yang ingin Anda gunakan.
Gambar 12.1 Common Libraries - Buttons
13. Enable Simple Buttons
Sekarang mari kita menguji coba script yang diletakkan di tombol.
1. Pilih menu File > New... (Ctrl+N) untuk memulai file baru.
2. Ambil tombol di folder Arcade buttons > arcade button – orange, dan masukkan ke dalam Stage.
3. Panjangkan frame sampai frame 15. Klik frame 15 dan tekan F5 (Insert Frame).
4. Kemudian ketik script berikut ini. (Gambar 13.1)
Gambar 13.1 Buttonscript
5. Tutup kembali Panel Action
6. Pilih menu Control > Enable Simple Buttons (Ctrl+Alt+B).
7. Sekarang tekan tombol di Stage dan playhead akan lompat ke frame 10.
Kalau diperhatikan saat Anda masuk dalam area objek tombol, kursor mouse akan otomatis berubah
menjadi gambar jari. Saat keluar dari objek tombol, kursor mouse kembali lagi menjadi bentuk panah. Ini
akan memudahkan user (pengguna) untuk tahu objek mana yang bisa diklik dan mana yang tidak.
Mengapa harus mengaktifkan Enable Simple Buttons? Seperti yang telah dijelaskan sebelumnya, hal ini
untuk memudahkan kita belajar melihat jalannya script. Dan hanya script-script dasar saja yang bisa
digunakan.
Untuk merubah atau mengedit script di tombol. Anda harus kembali menonaktifkan fasilitas Enable Simple
Buttons.
14. Memilih perintah dari bagian kategori Panel Actions
Untuk memilih perintah gotoAndPlay(), Anda bisa tidak perlu mengetik. Lihat saja pada bagian kategori
panel action dan pilih perintah yang diinginkan. Langkah-langkahnya adalah :
1. Perintah gotoAndPlay() ada di bagian kategori Global Functions > Timeline Control >
gotoAndPlay [Esc-gpp].
2. Klik saja tulisan gotoAndPlay, maka script akan ditambahkan di bagian pengetikan script (sebelah
kanan).
Gambar 14.1 Script dari Kategori Panel Actions
Kalau diperhatikan ada tanda [Esc-gp]. Itu adalah shortcut atau jalan yang lebih singkat lagi untuk menulis
script. Tekan saja tombol Esc ditambah huruf g dan p bersama-sama, maka perintah gotoAndPlay(); akan
tampil di tempat pengetikan script. Setelah itu Anda tinggal mengisi nomor frame yang diinginkan.
Syarat pengetikan dengan cara ini tentunya Anda harus hafal tempat dan shortcut script tersebut. Tetapi
kalau sering digunakan, biasanya kita sudah otomatis tanpa bersusahpayah lagi menghafal.
15. Frame Label
Anda bisa memberi nama atau label kepada frame untuk memudahkan dalam membaca Timeline. Caranya :
1. Pilih nomor frame yang ingin diberi label. Misalkan frame 1. Label hanya bisa diisi pada
Keyframe. Bila dalam suatu frame belum ada keyframe. Tambahkan keyframe dengan menekan
tombol F6 (Insert Keyframe).
2. Klik frame tersebut dan ketikkan nama label di papan catat Property Inspector (Gambar 15.1).
Pada gambar 15.1 terlihat pada Layer 2, kalau framenya panjang, label “Baba” akan terlihat. Sedangkan di
Layer 1, framenya pendek sekali sehingga frame diberi label tidak terlihat. Tetapi ini hanya pengaruh pada
pandangan mata saja, frame tersebut tetap mempunyai label.
Penggunaan frame label ini akan berguna saat kita menggunakan fungsi-fungsi navigasi.
Gambar 15.1 Frame Label
16. Fungsi-fungsi Navigasi
Fungsi stop(),tujuannya untuk memberhentikan movie Flash pada frame yang diberi script ini.
Fungsi play(),tujuannya untuk menjalankan movie Flash pada frame yang diberi script ini.
Fungsi gotoAndStop([scene,] frame), tujuannya untuk lompat dan berhenti ke nomor frame atau frame
label tertentu. Contoh
gotoAndStop(“Baba”);
gotoAndStop(10);
Fungsi gotoAndPlay([scene,] frame), tujuannya untuk lompat ke nomor frame atau frame label tertentu
dan kemudian tetap berjalan. Contoh
gotoAndPlay(“Baba”);
gotoAndPlay(10);
Anda harus hati-hati dalam mengetik script, huruf besar dan kecil dibedakan oleh Flash, lihat syntax yang
telah diberikan. Oleh karena itu ingat panduan warna script yang telah dibahas pada bab sebelumnya.
17. Komentar
Script merupakan bahasa komputer yang sulit dibaca untuk mereka para pemula. Oleh karena itu, kita bisa
memberinya komentar di tengah-tengah perintah.
Cara ke-1 adalah :
// Perintah untuk berhenti pada frame tertentu
gotoAndStop(10);
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. Tulisan komentar akan berwarna abuabu.
18. Navigasi yang efektif dan efisien
Navigasi berfungsi agar pengguna dapat berinteraksi dengan movie flash yang kita buat. Misalkan mereka
ingin pergi ke bagian tertentu, kita sebagai pembuat telah menyediakan navigasi yang berupa tombol untuk
mereka klik.
Untuk membuat navigasi yang efektif dan efisien dalam pembuatan sebuah situs maka perlu adanya
pengorganisasian yang baik. Berikut adalah hal-hal yang perlu diperhatikan (Gambar 18.1):
1. Setiap nama layer dan nama symnbol harus diberi nama sesuai dengan fungsinya.
2. Begitu juga dengan framelabel, walaupun bisa diletakkan di layer terpisah. Sebaiknya ditempatkan
di dalam satu layer seperti yang terlihat pada gambar.
3. Kalau ada script di frame, sebaiknya juga dijadikan dalam satu layer, misalkan layer framescript.
Gambar 18.1 Timeline yang terorganisir
19. Membuat Navigasi Sederhana
Jalan ceritanya begini…
1. Ada tiga (3) tombol di Stage yang diletakkan dalam satu (1) layer “Button”.
2. Ketika diklik salah satu tombol, maka di Stage akan menampilkan animasi isi (content) yang
berbeda.
Gambar 19.1 Navigasi Sederhana
Caranya begini… (Sambil lihat gambar 1.19)
1. Buat layer “Frame Label”, beri nama label “satu” di frame 1, label “dua” di frame 10 dan label
“tiga” di frame 20. Panjangkan sampai frame 30.
2. Buat layer “Frame Script”, beri framescript stop() di frame 9, 19 dan 30.
3. Buat layer “Button”, dan letakkan tiga (3) tombol seperti yang terlihat pada gambar.
4. Beri script pada tombol ke-1 ( atas )
on(release){
gotoAndPlay("satu");
}
tombol ke-2 ( tengah )
on(release){
gotoAndPlay("dua");
}
tombol ke-3 ( bawa )
on(release){
gotoAndPlay("tiga");
}
5. Buat layer “Content”.
6. Ketik tulisan “Content 1” dengan menggunakan Text Tool, kemudian jadikan symbol. Buat
animasi Fade-In [ Tulisan dari tidak ada (Alpha:0) menjadi ada (Alpha:100) ] dari frame 1 sampai
9.
7. Ketik tulisan “Content 2” dengan menggunakan Text Tool, kemudian jadikan symbol. Buat
animasi FadeIn dari frame 10 sampai 19.
8. Ketik tulisan “Content 3” dengan menggunakan Text Tool, kemudian jadikan symbol. Buat
animasi FadeIn dari frame 20 sampai 30.
9. Aktifkan Enable Simple Buttons dan Enable Simple Frame Actions untuk melihat jalannya
program.
Jadi saat Anda menekan tombol ke-1, maka perintah lompat ke frame label “satu” dijalankan, kemudian
playhead berjalan dari frame 1 sampai frame 9 menampilkan animasi Fade-In tulisan “Content 1”. Begitu
juga yang terjadi pada tombol ke-2 dan ke-3.
SINOPSIS BUKU
Flash seperti software gado-garo di mana di dalamnya terdapat semua
kelengkapan yang dibutuhkan. Mulai dari fitur menggambar, ilustrasi,
mewarnai, animasi dan programming. Oleh karena itu Flash Actionscript sangat
unik untuk dipelajari dan yang pasti menyenangkan.
Untuk membuat suatu animasi atau membuat permainan sederhana di Flash,
scripting yang dibutuhkan tidak rumit dibanding dengan bahasa pemrograman
lain. Jarang ada di suatu software dari mulai menggambar, animasi, dan
programming-nya dilakukan di tempat yang sama. Ini yang membuat Flash
sangat menyenangkan untuk siapa saja.
Actionscript di Flash memang pertamanya sangat sulit dimengerti jika
seseorang yang tidak mempunyai dasar atau mengenal Flash. Tetapi jika sudah
mengenalnya, kita tidak bisa lepas dari Actionscript karena sangat
menyenangkan dan dapat membuat pekerjaan jauh lebih mudah dan cepat. Ini
yang dialami penulis selama mengajar.
Semoga buku ini dapat menjadi dasar keingintahuan Anda terhadap
Actionscript Flash.