BAB XI MACROMEDIA FLASH (7) ACTION SCRIPT Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan motion dan shape tweening, membuat masking dan menambahkan suara. Semua materi tersebut membuat Anda mampu membuat berbagai macam jenis animasi, bahkan animasi yang panjang dan rumit. Tetapi animasi tersebut masih memiliki keterbatasan, yaitu penontonya hanya bisa menyaksikan film tanpa bisa ikut berinteraksi di dalamnya. Flash memiliki kemampuan untuk berinteraksi dengan penontonnya (selanjutnya disebut pengguna atau user), baik interaksi sederhana seperti penekanan tombol maupun interaksi yang lebih rumit seperti pemasukkan nama dan alamat. Tutorial bagian II ini membahas aspek dasar interaksi antara Flash dan pengguna. Untuk aspek interaksi, Flash menyediakan suatu bahasa sebagai alat komunikasi antara Anda sebagai perancang film dan Flash sebagai sebuah software. Bahasa tersebut tidak seperti bahasa manusia yang fleksibel (tapi sering ambigu) seperti Jalankan animasi jamur jika tombol merah ditekan tetapi tidak juga seperti bahasa biner antar komputer yang tidak terbaca oleh manusia seperti 011101010 01011101 110101011. Bahasa yang akan kita pelajari ini disebut ActionScript. Bahasa ini masih dapat dimengerti oleh manusia dan dapat dieksekusi oleh Flash, contoh: on (release) { } gotoandplay (1); 11 Action Script 93
Kode di atas dapat dibaca sebagai saat tombol mouse dilepas, jalankan frame nomor 1. Tidak sulit bukan? Sama halnya dengan bahasa manusia, ActionScript juga memiliki kosa kata dan aturan tata bahasa (grammar) yang harus dipatuhi, tapi sayangnya lebih ketat dari bahasa manusia (coba anda ganti kalimat gotoandplay dengan gotooandplay, Flash tidak akan melakukan apa-apa karena tidak mengerti). Tetapi jangan khawatir, untuk tahap awal, Anda tidak perlu mengetikkan kode actionscript sendiri. Anda tinggal memilih dari menu dan Flash akan menambahkannya. Dengan latihan dan jam terbang yang memadai, bahasa ActionScript mudah dikuasai, karena lebih sederhana dibandingkan dengan bahasa manusia. 11 Action Script 94
Mengenai tutorial ini Tutorial ini adalah lanjutan dari tutorial bagian pertama, Anda diharapkan telah menguasai materi pada tutorial pertama. Beberapa hal yang telah disampaikan pada tuturial 1, tidak akan diulang pada tutorial kedua ini. Jangan ragu untuk melihat tutorial pertama untuk melihat suatu topik. Sangat dianjurkan Anda telah membuat sebuah pro Tutorial bagian II ini terdiri atas.. subtutorial. Tutorial ini menyajikan dasar-dasar membuat interaksi antara Flash dengan pengguna. Tujuan: Setelah menyelesaikan tutorial ini, anda diharapkan mampu: o Menambahkan aksi pada frame dan button. o Mengatur flow suatu film (pause, loncat) o Mengunakan multi scene untuk membagi-bagi film. Flash yang digunakan dalam tutorial ini adalah Flash MX. Dianjurkan untuk mengikuti tutorial ini tahap demi tahap (tidak meloncat). Anda dapat menambah kecepatan pada bagian yang mudah. Jangan khawatir berbuat salah, gunakan fasilitas Undo (ctrl-z) untuk mengembalikan hasil kerja seperti semula dan Redo (ctrl-y) untuk sebaliknya. Silahkan kembangkan kreativitas Anda. Tidak perlu mengikuti secara persis apa yang ada di tutorial ini. Sumber dari tutorial ini adalah buku Foundation Flash 5 oleh Sham Bhangal dkk. dengan beberapa penyederhanaan. Sekali lagi, selamat menikmati dan selamat bersenang-senang! Tutorial Pertama: Mengatur Aliran Film Materi yang dipelajari pada bagian ini adalah: Mengatur aliran film, mem-pause dan loncat ke frame tertentu. Menggunakan scene untuk membagi film. Pada tutorial bagian pertama kita telah membuat simbol button yang dapat bereaksi secara visual saat kursor mouse mendekat atau di-klik oleh pengguna. Tapi kita belum menambahkan 11 Action Script 95
aksi yang akan dilakukan setelah pengguna menekan tombol tersebut. Di tutorial ini, kita akan tambahkan aksi setelah tombol ditekan. Pada tutorial ini, Anda akan membuat dua buah tombol, berwarna merah dan biru. Jika tombol merah ditekan maka akan muncul secara perlahan-lahan tulisan berwarna merah Anda Memilih Merah, setelah itu muncul tombol Kembali yang jika ditekan akan membawa pengguna kembali ke pilihan dua tombol yang pertama. Hal ini juga berlaku untuk tombol biru (teksnya saja yang berbeda). Berikut langkah-langkahnya: 1. Buat file baru. Buat simbol baru dengan Insert -> New Symbol (Ctrl-F8). Beri nama simbol Tombol dan pilih tipenya sebagai button. Buat button berbentuk lingkaran. Kita atur agar saat kursor mouse melayang di atas button ini, ukurannnya membesar. Tambahkan keyframe pada Up dan Over. Pada frame Over ubah ukurannnya menjadi lebih besar dengan scale (jika belum jelas, lihat tutorial bagian pertama yang membahas tentang simbol button). 2. Sekarang kita tambahkan kedua tombol ke stage utama. Kembalikan stage ke scene 1 Munculkan window mendrag simbol ke stage utama. library dengan F11. Tambahkan dua instance simbol tombol dengan 11 Action Script 96
3. Sekarang ubah warna salah satu tombol menjadi merah. Pilih salah satu tombol. Lihat property-nya, ganti color dengan tint dan warna dengan merah. (jika property color tidak muncul, mungkin karena Anda berada di mode edit simbol bukan di scene1, kembali ke scene1) Anda juga dapat mengisi warna dengan nilai RGB-nya (Red-Green-Blue), setiap nilai memiliki range 0 sampai dengan 255. Perhatikan bahwa walaupun telah diganti warnya, tombol merah tetap merupakan simbol Tombol. Inilah salah satu kelebihan dari simbol Flash. Jika kita analogikan simbol tombol sebagai orang tua dan kedua instance di stage sebagai anak maka selain mewarisi karakteristik dari orang tuanya, setiap anak juga dapat memiliki karakteristik khasnya sendiri yang terpisah dengan anak lain. Hebatnya lagi jika ada karateristik orang tua yang berubah, maka setiap anaknya akan langsung ikut berubah. Coba ubah ukuran simbol tombol, maka secara otomatis ukuran kedua instance akan ikut berubah, tapi warnanya tetap merah dan biru. Jika anda pernah mendengar jargon Object-Oriented, inilah salah satu cirinya: inheritance (pewarisan). 11 Action Script 97
4. Tambahkan teks sebagai petunjuk bagi pengguna. Buat teks ini di layer yang terpisah (beri nama layer Teks ). Tes film dengan menekan ctrl-enter. 5. Sekarang kita akan membuat film yang akan dimainkan saat pengguna menekan tombol merah dan biru. Film ini diletakkan di scene yang terpisah. Tampilkan window scene dengan Window -> Scene atau Shift F2. Lalu tambahkan scene baru dengan menekan tombol +. Catatan: Posisi layer yang aktif tidak berpengaruh sebelum window scene dimunculkan. Ganti nama Scene1 dengan Pilihan Pengguna, dengan men-double klik tulisan scene1. Ganti nama Scene2 dengan Output 11 Action Script 98
Pilih scene Output dengan dengan meng-klik tombol Output. Terlihat stage yang masih bersih. Scene dapat dianalogikan dengan babak pada drama. Suatu drama dapat terdiri dari beberapa babak, dan setiap babak dimainkan dengan urutan tertentu. Hal ini juga berlaku pada dokumen Flash yang dapat terdiri atas beberapa scene. Urutan scene dapat dilihat pada window scene (urutan dapat diubah dengan mendrag, mirip seperti mendrag layer). Scene adalah fasilitas Flash yang membantu memecah film menjadi bagian-bagian yang lebih kecil sehingga lebih mudah ditangani. Pada film ini Flash akan mengerjakan scene Pilihan Pengguna kemudian dilanjutkan dengan Output. 6. Kita akan membuat tulisan Anda telah memilih warna merah tulisan ini akan muncul perlahan-lahan (efek alpha). Tambahkan tulisan pada frame 1 dengan warna merah. Ubah menjadi simbol grafis. Pilih teks, pada bagian property ubah alpha menjadi 0%. (jika belum jelas, lihat tutorial bagian pertama mengenai motion tween) Pilih frame 15, tambahkan keyframe. Pilih teks, ubah alphanya menjadi 100%. Tambahkan motion tween. Tes dengan Enter. Tulisan akan muncul perlahan-lahan. 11 Action Script 99
7. Buatlah hal yang sama untuk pilihan biru, pada frame 16 sampai dengan 30. Coba animasi dengan Enter. Tulisan Anda memilih biru muncul perlahan-lahan. 8. Berilah label pada frame untuk memudahkan referensi. Untuk frame 1 dengan merah dan frame 16 dengan biru. Caranya dengan memilih frame 1, lalu pada panel properties ganti frame label dengan merah (gambar bawah). Terjadi perubahan pada panel timeline. Muncul bendera dan tulisan merah. Lakukan hal yang sama untuk frame 16 dengan label biru 9. Tes film dengan ctrl-enter. Apa yang terjadi? Flash akan menjalankan scene pertama Pilihan Pengguna dan langsung dilanjutkan dengan scene berikutnya Output. Pilihan akan ditampilkan sekejap, lalu dilanjutkan dengan pilihan merah dan pilihan biru. Untuk mengatur flow film, Anda harus menggunakan actionscript. Bersiap-siaplah untuk membuat kode ActionScript yang pertama.. 10. Kita harus mem-pause film saat pengguna akan memilih warna. Langkahnya adalah sebagai berikut: Kembali ke scene Pilihan Pengguna (munculkan window scene dengan Shift-F2). Tambahkan satu layer, beri nama Aksi. Pilih layer ini, lalu pilih frame 1. Munculkan window action dengan Window -> Action atau F9. 11 Action Script 100
Pastikan Anda dalam mode normal. Mode expert lebih fleksibel tetapi Anda harus mengisikan secara manual kode, sehingga tidak cocok digunakan pada tutorial ini. Terlihat panel action, bagian atas menyatakan bahwa action ini berlaku untuk frame 1 di layer Aksi. Dapat dikatakan aksi ini menempel pada frame 1. Artinya saat playhead (pemutar film) ada di posisi frame 1, aksi ini akan dijalankan. Bagian kiri adalah kumpulan perintah yang dapat kita gunakan. Untuk mem-pause film, perintah yang akan kita gunakan adalah Stop. Pilih stop, maka di panel kanan akan muncul keterangan. Mau keterangan yang lebih rinci lagi? tekan buku dengan tanda tanya di bagian keterangan. 11 Action Script 101
Untuk menambahkan perintah ini, double klik kata stop atau drag ke window di bagian kanan bawah (disebut script window). Hasilnya akan tampak seperti berikut: (Jika Anda salah memilih, tekan - untuk menghapus) Script di atas dapat dibaca Saat mencapai frame 1, pause film. Selamat, Anda telah berhasil membuat program action script yang pertama. Tidak sulit bukan? Perhatikan perubahan pada panel timeline, ada huruf a kecil diatas frame, yang menandakan adanya aksi. Tes film dengan Ctrl-Enter. Film akan berhenti saat mencapai frame 1 pada scene Pilihan Pengguna. 11 Action Script 102
11. Langkah selanjutnya adalah menambahkan atau lebih tepatnya menempelkan aksi saat tombol merah dan biru ditekan Aksi ini ini menempel pada tombol (bandingkan dengan aksi stop yang menempel pada frame). Pilih tombol merah, munculkan window aksi dengan F9. Terlihat bahwa instance tombol belum diberi nama. Walaupun bukan merupakan keharusan, sebaiknya setiap instance diberi nama. Beri nama instance melalui panel properties. Berilah nama tombol merah dengan tombol_merah dan biru dengan tombol_biru. Pada window aksi akan muncul (tampilkan dengan F9) Aksi yang kita inginkan adalah saat pengguna menekan tombol merah, playhead akan loncat ke scene Output di frame nomor 1 (atau frame dengan label merah ). Hal ini dapat kita lakukan dengan perintah goto. Double klik kata goto. Akan muncul tampilan sebagai berikut: 11 Action Script 103
11 Action Script 104
Jika memilih Goto and Play, playhead akan loncat dan terus berjalan, sedangkan untuk Goto and Stop setelah playhead loncat ia akan stop. Pilihlah opsi Goto and Play (karena ada animasi di frame 1 sd 16). Isi scene dengan Ouput type Frame dengan Label dan frame dengan merah (gambar bawah). Walaupun Anda bisa mengisi langsung, gunakanlah fasilitas dropdown, agar tidak terjadi salah tulis. Isian lengkapnya sebagai berikut: Terlihat bahwa Flash membangkitkan secara otomatis kode untuk gotoandplay. Kode diatas dapat dibaca sebagai: Saat pengguna selesai mengklik tombol merah, loncat dan mainkan frame merah pada scene output. Tes film (ctrl-enter). Apa yang terjadi? setelah tombol merah ditekan, animasi Anda memilih merah muncul, tetapi tulisan Anda memilih biru juga muncul. Hal ini disebabkan setelah perintah gotoandplay dijalankan, playhead akan loncat ke frame merah, dan terus maju, termasuk ke frame 16 sd 30 tempat animasi untuk pilihan biru. 11 Action Script 105
Salah satu solusinya adalah dengan menambahkan aksi stop pada frame 15, yaitu saat animasi merah berakhir. action stop. Pada scene output pilih frame 15, dan pada window action, tambahkan Frame 15 akan berubah menjadi Tes kembali film, maka setelah animasi merah berakhir film akan berhenti. Untuk mengulangnya anda harus me-rewind film (klik kanan -> Rewind). Nanti kita akan tambahkan tombol untuk kembali tanpa harus me-rewind secara manual. Lakukan hal yang sama untuk tombol biru. Pilih tombol biru, munculkan panel action (F9). Tambahkan aksi stop pada frame 30. Timeline akhir pada scene Output akan tampak sebagai berikut: 11 Action Script 106
Tes dengan Ctrl-Enter. Sekarang film kita sudah berjalan dengan benar. Walaupun tampak rumit, alur film yang baru saja kita buat prinsipnya sederhana. Diagram berikut akan memudahkan Anda untuk melihat alur film ini. Scene Pilihan Pengguna Frame 1. Pilihan Warna pilih merah Scene Output Frame 1-15: Animasi Anda Memilih Merah. frame 15: STOP pilih biru Frame 16-30: Animasi Anda Memilih Biru frame 30: STOP Pada scene Output, kita telah menambahkan stop pada frame 15. Sehingga saat playhead mencapai frame 15 maka film akan berhenti (tidak mengalir ke frame 16). Demikian juga perintah stop pada frame 30, akan mencegah playhead kembali ke scene Pilihan Pengguna, frame 1. 12. Berikutnya adalah menambahkan tombol kembali, agar setelah animasi output dijalankan, film kembali ke awal. Dengan adanya tombol kembali diagram tadi akan tampak sebagai berikut: 11 Action Script 107
2..kembali Scene Pilihan Pengguna Scene Output Frame 1. Pilihan Warna 1a.. Pilih merah Frame 1-15: Animasi Anda Memilih Merah. frame 15: STOP Frame 1-30: Tombol Kembali 1b. Pilih biru Frame 16-30 Animasi Anda Memilih Biru frame 30: STOP Angka 1a, 1b dan angka 2 menunjukkan keterurutan kejadian. 11 Action Script 108
Sekarang pilih scene Output, tambahkan layer baru, beri nama kembali. Pilih frame pertama, buka window library (F11). Lalu buat instance simbol tombol ke stage.ganti warna tombol menjadi hitam, isi instance name dengan Kembali. Tambahkan tulisan Kembali di sebelahnya. Sekarang tambahkan aksi jika tombol kembali ini di-klik oleh pengguna, yaitu kembali ke awal film (scene Pilihan Pengguna frame 1). Pilih tombol, buka window aksi (F9). Double klik goto, isi scene dengan Pilihan Pengguna, type dengan Frame Number dan Frame dengan 1. Berbeda dengan dua tombol sebelumnya yang menggunakan frame label, pada tombol ini kita menggunakan Frame Number, yaitu nilai absolut posisi frame. Tes dengan Ctrl-Enter. Sekarang Anda bisa kembali ke awal film dengan menekan tombol Kembali. Sangat menyenangkan bukan? Perhatikan bahwa jika tombol kembali ditekan bahkan ketika animasi belum selesai, animasi akan langsung kembali ke awal film. Dengan perintah yang sedikit (stop,gotoandplay), banyak sekali yang dapat Anda dilakukan. Anda akhirnya terbebas dari ke-linier-an film. Film bisa berhenti atau loncat maju mundur dari satu frame ke frame yang lain atau bahkan dari satu scene ke scene yang lain. 11 Action Script 109
Perhatian: Semakin banyak perintah loncat, maka semakin rumit dokumen flash (.fla), dan semakin sulit juga pemeliharaan dokumen Flash Anda. Hal ini dapat menyebabkan suatu kondisi yang disebut spaghetti code, dimana alur film menjadi ruwet sehingga jika digambarkan akan menyerupai spaghetti. Sedapat mungkin hindarilah kondisi ini. Demikianlah akhir dari tutorial pertama. Pada tutorial pertama ini anda telah belajar: Mengatur alur film dengan perintah Stop, gotoandplay Menempelkan aksi kepada frame dan button. Memecah film menjadi beberapa scene. 11 Action Script 110