Cara ampuh menguasai macromedia flash mx 2004

Click here to load reader

  • date post

    17-May-2015
  • Category

    Documents

  • view

    3.501
  • download

    2

Embed Size (px)

Transcript of Cara ampuh menguasai macromedia flash mx 2004

  • 1. BAB 7 MOVIE INTERAKTIFMENGGUNAKAN BEHAVIORSDAN ACTIONSCRIPTPada animasi-animasi yang telah kita pelajari sebelumnya, animasidijalankan secara berurutan dari frame ke frame berikutnya. Denganadanya Behaviors dan Actionscript, animasi dapat dibuat menjadimovie yang interaktif sehingga pengguna dapat berperan lebih aktifmenggunakan keyboard dan mouse untuk melompat ke movie lainyang diinginkannya, memindahkan objek, memasukkan informasipada form, mengontrol objek, video, suara, dan lain-lain.Pada bagian ini, kita akan langsung mengimplementasikan Behaviorsdan ActionScript dalam bentuk tutorial dan latihan. Denganmencobanya pada contoh aplikasinya langsung, pembacamemperoleh dasar yang baik untuk memahami dan memudahkanpenguasaan Behaviors dan ActionScript.7.1Menggunakan BehaviorsBehaviors juga termasuk salah satu fitur baru yang sangat menonjoldi Flash MX 2004. Behaviors merupakan ActionScript siap pakai yangdapat diaplikasikan pada suatu objek, baik itu movie clip, videomaupun suara (sound). Fungsi utamanya ialah untuk mengontrolobjek-objek tersebut agar terlihat lebih fleksibel dan interaktif.Asyiknya lagi, semua itu dilakukan secara otomatis tanpa kita perlumenuliskan kode-kode ActionScript secara manual. 185

2. Behaviors lebih ditujukan untuk para developer Flash yang belumterbiasa/familiar dengan ActionScript karena Behaviors telahmenyederhanakan fungsi-fungsi ActionScript yang kompleks sehinggadapat diaplikasikan dengan mudah pada objek, video, suara, danframe.Untuk menampilkan Behaviors Panel, klik menu Window>Development Panels > Behaviors. Lihat Gambar 7.1. Gambar 7.1 Behaviors PanelKalau kita perhatikan pada Gambar 7.1, Behaviors Panel terlihatsangat sederhana karena memang diperuntukkan bagi penggunapemula. Apabila kita ingin memasukkan suatu Action, kita hanyaperlu mengklik tombol , maka akan tampil menu pilihannya, lalukita tinggal memilih kategori dan action yang diinginkan. Untuk lebihjelasnya, langsung saja kita praktekkan ya.7.1.1Membuat Tombol LinkTombol link adalah tombol yang digunakan untuk memanggil alamatatau URL di Internet, misalnya akan memanggil situs Google ataubisa juga untuk berpindah ke halaman web lainnya ketika tomboldiklik.1. Masukkan sebuah tombol dari library Flash (Window > Other Panels > Common Libraries > Buttons). Latihan ini menggunakan tombol arcade button-yellow dari kategori Arcade buttons. Lihat Gambar 7.2.186 3. Gambar 7.2 Tombol arcade button - yellow2. Klik/pilih pada tombol, lalu klik tanda pada Behaviors Panel sehingga akan tampil menu. Pilihlah Web > Go to Web Page. Lihat Gambar 7.3.Gambar 7.3 Memilih action Go to Web Page pada kategori Web3. Akan tampil kotak dialog. Isikan http://www.google.com pada URL dan pilih _blank pada Open in. Lihat Gambar 7.4.Gambar 7.4 Kotak dialog Go to URLUntuk melihat hasilnya, klik menu Control > Test Movie. Coba kliktombol berwarna kuning yang akan langsung membuka browser baru 187 4. (Internet Explorer) dan menampilkan halaman web dari situs Googleapabila komputer Anda terhubung ke Internet.Tip & Trik:Selain dapat memanggil alamat URL di Internet, link juga dapatdigunakan untuk berpindah halaman, contohnya halaman2.htmlatau /data/halaman2.html (kalau filenya di dalam suatusubfolder). Link juga bisa digunakan untuk memanggil email,misalnya mailto: [email protected] Link juga dapatmemanggil suatu movie, misalnya animasi.swf.Link mempunyai parameter Open in yang berisi target untuk linktersebut. Ada empat macam target, yaitu: _self: link akan membuka file yang dipanggil di halaman itu juga. _blank: link akan membuka file yang dipanggil pada halaman/browser yang baru. _parent: link akan membuka file yang dipanggil di frameset induk (digunakan untuk halaman berbentuk frame, sama halnya dengan _top). _top: link akan membuka file yang dipanggil di frameset pada tingkat yang paling atas.7.1.2Memanggil File Movie di Luar FlashAction untuk memanggil file movie yang berada di luar Flash adalahLoad External Movieclip di kategori Movieclip.Pada latihan ini, kita akan memanggil file shockwave dengan namajoke.swf yang berisi animasi kartun lucu.1. Buat file baru (File > New), lalu langsung simpan filenya (File > Save As), misalnya disimpan dengan nama loadswf.fla.2. Klik frame 1, lalu klik tandapada Behaviors Panel sehingga akan tampil menu. Pilihlah Movieclip > Load External Movieclip. Lihat Gambar 7.5.188 5. Gambar 7.5 Memilih action Load External Movieclip pada kategori Movieclip3. Akan tampil sebuah kotak dialog. Isikan nama file swf (shockwave) yang akan dipanggil pada bagian Type the URL to the .swf file you want to load, misalnya joke.swf. Lihat Gambar 7.6. Gambar 7.6 Kotak dialog Load External Movieclip4. Sekarang di Timeline Panel dapat dilihat bahwa pada frame 1 terdapat huruf a yang menandakan bahwa pada frame tersebut terdapat action/behavior. Lihat Gambar 7.7.189 6. Gambar 7.7 Tanda huruf a pada frame 1 di Timeline PanelUntuk melihat hasilnya, klik menu Control > Test Movie. Akanlangsung ditampilkan movie swf (shockwave) yang berupa animasikartun lucu. Lihat Gambar 7.8.Gambar 7.8 Hasil action Load External MovieclipCatatan:File joke.swf harus berada dalam satu folder dengan file loadswf.fla(file yang berisi action untuk memanggil movie tersebut/filejoke.swf).7.1.3Menggandakan ObjekAction untuk menggandakan suatu objek atau gambar adalahDuplicate Movieclip dari kategori Movieclip.190 7. Pada latihan ini, kita akan menggandakan gambar seorang wanitayang sedang menelpon.1. Klik menu File > Import > Import to Stage, lalu carilah sebuah file gambar, dalam latihan ini gambar wanita yang sedang menelpon (wanita1.jpg). Lihat Gambar 7.9.Gambar 7.9 Gambar wanita sedang menelpon2. Klik/pilih pada gambar wanita, lalu ubah menjadi simbol Movie clip.3. Dengan gambar wanita masih dalam keadaan terpilih, isikan nama pada Properties sebagai identitas movie clip tersebut, misalnya wanita. Lihat Gambar 7.10.Gambar 7.10 Memberi nama identitas dari movie clip4. Dengan gambar wanita masih dalam keadaan terpilih, klik tandapada Behaviors Panel sehingga akan tampil menu. Pilihlah Movieclip > Duplicate Movieclip. Lihat Gambar 7.11. 191 8. Gambar 7.11 Memilih action Duplicate Movieclip pada kategori Movieclip5. Akan tampil kotak dialognya. Isikan 110 pada bagian X-offset dan 0 pada Y-offset. Lihat Gambar 7.12. Gambar 7.12 Kotak dialog Duplicate MovieclipUntuk melihat hasilnya, klik menu Control > Test Movie. Coba klikpada gambar wanita. Akan tampil gambar wanita yang sama disamping kanannya, lalu klik lagi gambar wanita sehingga akan tampilgambar wanita yang sama di samping kanannya lagi, begituseterusnya. Lihat Gambar 7.13.192 9. Gambar 7.13 Hasil penggandaaan suatu gambar menggunakan action duplicate movie7.1.4 Drag n Drop pada ObjekKalau Anda sudah sering menggunakan mouse, tentunya Anda sudahmengenal istilah drag and drop, yaitu proses memindahkan objekmenggunakan mouse (klik dan tahan), lalu menyeret (drag) untukmeletakkannya ke tempat yang diinginkan.Pada latihan ini, kita akan membuat sebuah objek/gambar yangdapat dipindahkan menggunakan mouse, dan meletakkannya ditempat yang diinginkan.1. Imporlah sebuah gambar; latihan ini menggunakan gambar binaragawanyangsedang memamerkanototnya (binaragawan.wmf). Lihat Gambar 7.14. Gambar 7.14 Gambar binaragawan yang sedang memamerkan ototnya 193 10. 2. Klik/pilih pada gambar binaragawan, lalu ubah menjadi simbol Movie clip.3. Dengan gambar binaragawan masih dalam keadaan terpilih, isikan identitas movie clip tersebut pada Properties, misalnya binaraga (untuk caranya, lihat lagi Gambar 7.10).4. Dengan gambar binaragawan masih dalam keadaan terpilih, klik tandapada Behaviors Panel sehingga akan tampil menu. Pilihlah Movieclip > Start Dragging Movieclip pada menu tersebut. Lihat Gambar 7.15.Gambar 7.15 Memilih action Start Dragging Movieclip pada kategori Movieclip5. Pada kotak dialog yang tampil, klik OK. Lihat Gambar 7.16. Gambar 7.16 Kotak dialog Start Dragging Movieclip194 11. 6. Pada Behaviors Panel, klik tanda panah ke bawahyang terdapat di samping kanan Event On Release sehingga akan tampil pilihannya. Gantilah event-nya dengan memilih Event On Press. Lihat Gambar 7.17.Gambar 7.17 Mengganti suatu Event7. Masih di Behaviors Panel, klik tandasehingga akan tampil menu. Pilihlah Movieclip > Stop Dragging Movieclip, maka akan tampil kotak dialognya. Klik OK saja. Lihat Gambar 7.18.Gambar 7.18 Kotak dialog Stop Dragging Movieclip8. Sekarang di Behaviors Panel terdapat dua perintah, yaitu Event On Press dengan Action Start Dragging Movieclip dan Event On Release dengan Action Stop Dragging Movieclip. Lihat Gambar 7.19. Gambar 7.19 Dua action di Behaviors Panel 195 12. Untuk melihat hasilnya, klik menu Control > Test Movie. Coba klikpada gambar binaragawan, lalu drag ke tempat manapun yang Andainginkan.Keterangan Action:Event-event Mouse/Keyboard, yaitu:Press: Keadaan ketika kursor mouse berada di atas tombol danmouse sedang ditekan.Release: Keadaan ketika kursor mouse berada di atas tomboldan mouse sudah ditekan dan dilepaskan (hampir sama denganPress).Release Outside: Keadaan ketika kursor mouse berada di atastombol dan mouse sudah ditekan dan dilepaskan di luar areatombol.Key Press: Keadaan ketika tombol keyboard ditekan, jadimendeteksi penekanan tombol di keyboard.Roll Over: Keadaan ketika kursor mouse berada di atas tombol.Roll Out: Keadaan ketika kursor mouse bergerak ke luar dariarea tombol.Drag Over: Keadaan ketika kursor mouse berada di atas tomboldan mouse sudah ditekan, kemudian kursor bergerak ke luar areatombol, lalu kembali lagi sambil mouse tetap ditekan.Drag Out: Keadaan ketika kursor mouse berada di atas tomboldan mouse sudah ditekan, kemudian kursor bergerak keluar areatombol.startDrag berfungsi untuk membuat movie klip mengikutigerakan pointer mouse.stopDrag merupakan kebalikan dari action startDrag.7.1.5Memanggil (Load) Suara dari Library FlashAction untuk memanggil (load