Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah...

18
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); }

Transcript of Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah...

Page 1: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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);

}

Page 2: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.

Page 3: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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

Page 4: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.

Page 5: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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).

Page 6: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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”

Page 7: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.

Page 8: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.

Page 9: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.

Page 10: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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”.

Page 11: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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:

Page 12: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

11 Action Script 104

Page 13: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.

Page 14: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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:

Page 15: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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

Page 16: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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

Page 17: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.

Page 18: Pengantar Macromedia Flash - rinim.files.wordpress.com · Pada tutorial bagian I, Anda telah mempelajari bagaimana cara menggambar di Flash, membuat simbol, membuat animasi dengan

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.