pengantar macromedia flash - rinim.files.wordpress.com · pada tutorial bagian i, anda telah...
Post on 06-Mar-2019
228 Views
Preview:
TRANSCRIPT
11 Action Script 93
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 94
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 95
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 96
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 library dengan F11. Tambahkan dua instance simbol tombol dengan
mendrag simbol ke stage utama.
11 Action Script 97
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 98
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 99
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 100
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 101
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 102
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 103
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 104
11 Action Script 105
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 106
Salah satu solusinya adalah dengan menambahkan aksi stop pada frame 15, yaitu saat animasi
“merah” berakhir. Pada scene “output” pilih frame 15, dan pada window action, tambahkan
action stop.
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 107
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.
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:
Frame 1.
Pilihan Warna
Scene “Pilihan Pengguna”
Frame 1-15:
Animasi “Anda Memilih Merah”.
frame 15: STOP
Scene “Output”
Frame 16-30:
Animasi “Anda Memilih Biru”
frame 30: STOP
pilih merah
pilih biru
11 Action Script 108
Angka 1a, 1b dan angka 2 menunjukkan keterurutan kejadian.
Frame 1.
Pilihan Warna
Scene “Pilihan Pengguna”
Frame 1-15:
Animasi “Anda Memilih
Merah”.
frame 15: STOP
Scene “Output”
Frame 16-30
Animasi “Anda Memilih
Biru”
frame 30: STOP
1a.. Pilih merah
1b. Pilih biru
2. .kembali
Frame 1-30:
Tombol
Kembali
11 Action Script 109
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 110
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.
top related