ActionScript Macromedia Flash Action ActionScr Script ipt adalah adalah bahasa bahasa pemrog pemrograma raman n yang yang di pakai pakai oleh oleh softwa software re Flash Flash untuk untuk mengen mengendali dalikan kan object object-obj -object ect ataupun ataupun movie movie yang yang terdapat terdapat dalam dalam Flash. Flash. Sebenarnya Flash juga bisa tidak menggunakan ActionScript dalam pemakaiannya, tapi tapi kala kalau u meng mengin ingi gink nkan an adan adanya ya inte intera rakt ktif ifit itas as yang yang lebi lebih h komp komple lek k maka maka ActiosScript ini dibutuhkan. ActionScript mungkin akan sangat terasa familiar bagi kamu kamu yang yang udah udah perna pernah h mema memaka kaii bahas bahasaa pemro pemrogr gram aman an JavaJava-Sc Scrip riptt karn karnaa ActionScript memakai basic yang sama dengan Java-Script.
Kegunaan ActionScript ActionsScirpt ActionsScirpt mempunyai banyak kegunaan, kegunaan, untuk contohnya ActionScript bisa dipakai untuk: •
Membuat Web Interaktif
•
Membuat CD interaktif
•
Membuat presentasi yang bagus
•
Membuat Game interaktif
•
Membuat Game Online
•
Membuat Simulasi dan animasi dalam pembelajaran
•
•
ActionScript ActionScript juga bisa berkomunikas berkomunikasii dengan dengan bahasa pemrograman pemrograman lain seperti PHP dan ColdFusion dan masih banyak juga yang lainnya..
Object dan Frame Actions Struktur dasar dari sebuah aksi adalah: saatSesuatuTerjadi(input) saatSesuatuTerjadi(input) { lakukanAksi }
Ada dua macam Action yang terdapat dalam ActionScript: object actions dan frame actions.
Object Actions - MovieClips
Object actions adalah sebuah actions dari ActionScript yang di tempatkan didalam object. yang didalam flash dikenal dengan symbol baik itu MovieClip ataupun Button. didalam flash ada 3 macam symbol: MovieClip, Button dan Graphic. MovieClip dan Button bisa diberikan Actions sedangakan Graphic tidak.object action menempati instance dari sebuah symbol, bukan symbol itu sendiri. symbol yang sudah didalam stage (bukan dalam library) mempunyai properties dan method masing masing. 1. Buka file object actions - MovieClip.fla dengan menggunakan software flash(Macromedia Flash 8 atau versi yang terbaru) 2. Jalakan Movie tersebut : Control > testMovie 3. tekan mouse dan gerakan. maka kotak yang ada disebelah kiri akan bergeser, tetapi tidak dengan kotak yang disebelah kanan. MovieClip yang berbentuk kotak yang disebelah kiri telah disisipi object action sedangkan movieClip yang berbentuk kotak disbelah kanan tidak. untuk melihat script bukan panel action di flash: Window > Actions dan klik MovieClip kotak yang disebelah kiri. Script ini akan terus berfungsi selama MovieClip yang diberikan script ini masih ada, dan tidak tergantung kepada frame. Didalam script tersebut terdapat dua buah function onClipEvent, onClipEvent ialah sebuah event Handler (bingung di bahasa indonesiain gimana, keadaan dimana sesuatu telah terjadi. jadi onClipEvent ini adalah sebuah fungsi yang akan terus mengawasi apa yang sedang dilakukan oleh user. mouseDown adalah saat user menekan mouse dan mouseUp adalah saat user berhenti menekan mouse. mouseDown dan mouseUp adalah input variabel yang akan di lakukan user. starDrag aksi yang dilakukan setalah user memberi inputan sesuai dengan fungsi, dan (this) adalah instance atau object yang akan melakukan aksi,(this) ini juga bisa merupakan nama dari instance kalo nama instance dari kotak tersebut adalah kotakkiri maka script tersebut menjadi starDrag(kotakkiri) . beberapa event yang terdapat dalam movieClip: · · · · · · · · ·
load unload enterFrame mouseMove mouseDown mouseUp keyDown keyUp data
Object Actions - Button Object actions yang disisipkan didalam button mempunyai structure yang sama bedanya hanya dalam event handler dimana kalau didalam movieClip adalah
· · · · · · · ·
onClipEvent sedanangkan pada button adalah on. beberapa event yang terdapat dalam button: press release releaseOutside rollOver rollOut dragOver dragOut keyPress
Frame Actions Frame Actions dalam penggunaanya hampir sama dengan object action. kalo object action adalah ActionScript yang disisipkan pada sebuah object sedangkan Frame Action adalah ActionScript yang disisipkan pada frame di movie flash. dan script ini akan berjalan apabila movie berada pada frame yang telah disisipi oleh script. dalam penempatannya klik terlebih dahulu frame yang akan di sisipi script dan tuliskan actionsctipr didalam panel action. u 1. Buka file frame action.fla. 2. perhatikan pada frame 36 di layer 1, di frame tersebut action disisipkan. 3. klik di frame tersebut. 4. buka action panel. frame 36 di layer 1 adalah tempat dimana frame tersebut disisipkan, dan script akan berjalan atau dieksekusi apabila movie telah berada pada frame tersebut, coba jalankan file tersebut dengan control > test Movie kotak akan bergerak dari kiri ke kanan. dan pada saat telah berada di kanan dimana frame movie berada pada frame 36 makan script akan di eksekusi. script yang disisipkan disini adalah stop(); , dan berfungsi untuk menghentikan jalannya animasi dan di frame tersebut berhenti.
Dot Syntax ActionScript sama dengan JavaScript keduanya menggunakan apa yang disebut dengan dot syntax. untuk contohnya apabila kamu mempunyai sebuah MovieClip di stage yang diberinama instance kotak dan didalam MovieClip tersebut terdapat sebuah MovieClip yang diberi nama instance lingkaran, maka untuk mengakses MovieClip longkaran adalah dengan _root.kotak.lingkaran _root disini adalah dasar dari sebuah flash movi, jika kamu ingin mencari titik x di stage maka yang digunakan adalah xPosisition = _root.kotak.lingakan._x; _x adalah property yang menyatakan posisi horizontal dari sebuah object.
Properties Properties adalah ciri ciri dari sebuah object. setiap object di flash memiliki properties. Beberapa contoh dari protperti di flash adalah: •
•
•
Beerapa lebar sebuah object (_widht) Dimana letak object tersebut (_x untuk posisi horizontal dan _y untuk posisi vertical) Di frame manakah sebuah MovieClip sedang berjalan (_currentframe)
•
Nilai transparant (_alpha)
•
Nama dari object(_name)
•
Bisa dilihat atau tidak (_visible)
•
Bisa dipergunakan atau tidak (_enabled)
Properties bisa di ketahui atau bahkan di ganti. untuk contohnya, apabila kita ingin mendapatkan lebar dan tinggi dari sebuah MovieClip yang mempunyai instance name "kotak": lebarKotak = _root.kotak._width; tinggiKotak = _root.kotak._width; Apabila kita ingin mengganti lebar dan tinngi dari MovieClip kotak tersebut dengan tinggi dan lebar sesuai dengan keinginan kita maka digunakan script: _root.kotak._width = 100; _root.kotak._height = 200; 200
apa bila kita menginginkan lebar kotak adalah 100 apa bila kita menginginkan tinggi kotak adalah
Hampir semua properties dalam ActionScript dimulai dengan undersocre (_).
Methods Method adalah apa yang bisa di lakukan oleh sebuah object atau apa yang bisa kamu lakukan untuk sebuah object, beberapa contoh method yang bisa dilakukan dalam flash adalah: •
•
•
Stop(),untukMenghentikan MovieClip yang sedang berjalan. gotoAndPlay(frametujuan), untuk pergi ke frame tertentu dan mulai menjalankan MovieClip di frame tersebut. gotoAndStop(frametujuan), untuk pergi ke frame tertentu dan mulai
menghentikan MovieClip di frame tersebut. •
Mouse.hide(). untuk menghilangkan cursor.
untuk contoh apabila kita ingin sebuah MovieClip yang bernama instance "kotak" berhenti di frame 10, maka digunakan script: _root.kotak.gotoAndStop(10);
Events and Event Handlers Ada dua cara dalam penyisipan actionScript seperti yang telah dijelaskan sebelumnya yaitu object actions dan frame actions dalam penggunaannya. apabila kita menggunakan object action maka script ditempatkan pada objectnya. contoh pada button berinstance "gerak_btn" untuk menghentikan MovieClip berinstance "kotak_mc": on(release) { _root.kotak_mc.stop(); } contoh pada button berinstance "berhenti_btn" untuk menjalankan MovieClip berinstance "kotak_mc": on(release) { _root.kotak_mc.play(); }
dan apabila kita menyisipkan pada frame maka kita harus mengidentifikasikan terlebih dahulu object yang akan melakukan event. gerak_btn.onRelease
=
function
()
_root.kotak_mc.play()
} berhenti_btn.onRelease
=
function
() { _root.kotak_mc.stop()
}
Pengenalan Macromedia Flash MX
{
Macromedia Flash MX merupakan standar professional yang digunakan untuk membuat animasi di web. Flash diawali sebagai perangkat lunak untuk membuat animasi sel bernama Future Splash. Dengan perangkat ini dimungkinkan untuk membuat animasi dengan ukuran kecil untuk didistribusikan melalui internet. Mengingat kemampuan Future Splash dan dengan kemampuan Macromedia di bidang multimedia, Flash dikembangkan menjadi perangkat pembuatan multimedia interaktif. Macromedia Flash MX mendukung adanya fungsi scripting yang memberikan kemungkinan sangat luas. Fungsi action scripting dirancang menggunakan sintaks JavaScript, bahasa pemrograman yang merupakan standar industri di web. Animasi dengan Flash dapat dilakukan dalam dua bentuk, yaitu frame-by-frame animation dan tweened animation. Frame-by-frame animation menggunakan gambar yang berbeda di setiap frame sedangkan untuk tweened animation kita tinggal menentukan posisi frame awal dan akhir, kemudian Flash akan mengerjakan animasi frame-by-frame yang ada di antara posisi awal dan posisi akhir ( frames in between). Agar dapat menggunakan Macromedia Flash MX ada beberapa konsep dasar yang harus diketahui, yaitu Stage, Toolbox, Panel, Launcher Bar, Movie, Timeline, Frame, Play head, Layer, Framerate dan Scene, Keyframe, Motion, Tweening, Motion Guide, Shape Tweening, Play, Stop, Step Forward, Step Backward, Tes Movie, Debug Movie, Tes Scene, Loop Playback, Play All Scene, Sound, Impor Suara, Cool Edit Pro, Memasukkan Suara, Modify, Tansform, Scala dan Rotate.
1. Animasi dengan menggunakan Tool
Animasi dengan menggunakan tool dinamakan juga dengan animasi secara manual, hal itu dapat dilakukan dengan cara, frame-by frame animation dan tweened animation. Frame-by-frame animation menggunakan gambar yang berbeda di setiap frame sedangkan untuk tweened animation kita tinggal menentukan posisi frame awal dan akhir, kemudian Flash akan mengerjakan animasi frame-by-frame yang ada di antara posisi awal dan posisi akhir ( frames in between). Untuk membuat animasi sederhana cukup menggunakan layer, stage, scene, timeline,
toolbox, tools, dan lain-lain.
a. Layer
Layer bisa diibaratkan seperti sebuah buku yang terdiri dari lembaran kertas yang siap digunakan untuk menulis teks, melukis gambar, memasukkan suara dan informasi lain yang diperlukan untuk semua animasi. Untuk itu, layer terdiri dari beberapa lapis. Bila digabungkan akan menghasilkan suatu animasi yang lengkap. Pada bagian bawah layer terdapat menu pilihan insert layer, insert guide layer, insert layer folder, dan delete layer . Kita dapat memberi nama tiap layer dengan nama yang unik agar kita mudah mengenali dan melakukan revisi terhadap isi layer tersebut. Tiap layer terdiri dari scene-scene dan tiap scene terdiri dari frame-frame. b. Membuat layer baru
Ketika
kita
membuat
layer
movie
baru
atau
membuka
Macromedia Flash MX, maka akan muncul hanya satu layer saja. Kita dapat menambah layer sesuai dengan kebutuhan animasi di stage. Kita dapat menggambar dan mengedit objek dalam satu layer tanpa mempengaruhi gambar pada layer lainnya. Jumlah layer tak terbatas bergantung pada memori komputer yang digunakan, penambahan layer tidak menambah ukuran file. Cara menambah layer adalah sebagai berikut : 1. Pilih menu Insert → Layer 2. atau klik symbol “ Insert Layer ”. Kita dapat meliha layer tambahan persis di atas layer yang sedang aktif.
Pada layer ada beberapa informasi yang diperlukan, yaitu : 1. Icon “mata” untuk menampilkan dan menyembunyikan semua objek yang ada di stage pada layer tersebut ;
2. Icon “kunci” untuk membuka dan mengunci objek yang ada di stage pada layer tersebut agar tidak dapat diedit secara tidak sengaja ; 3. Icon “kotak” untuk menampilkan objek di stage dalam gambaran secara outline, bukan dalam keadaan gambar yang sebenarnya. Mengedit Layer 1. Klik nama layer untuk mengaktifkan layer. 2. Sorot nama layer tersebut ke posisi urutan yang diinginkan, maka layer akan berpindah. Untuk mengubah nama layer, caranya dengan mengklik nama layer 2x, kemudian ketik nama yang diinginkan. Sedangkan untuk menduplikasi layer, caranya sebagai berikut : 1. Klik nama layer yang ingin diduplikasikan 2. Pilih menu Edit → Copy Frames 3. Buat layer baru dengan mengetik symbol “ Insert Layer ”. 4. Klik nama layer yang baru tersebut kemudian pilih menu Edit → Paste Frames.
c.
Guide Layer
Guide layer adalah bagian dari layer yang berfungsi untuk mengarahkan gerak objek. Untuk membuat guide layer, caranya adalah sebagai berikut : 1. Klik kanan nama layer yang ingin dijadikan guide. 2. Muncul menu dan pilih guide (lihat gambar 1). Dalam penggunaan guide layer harus hati-hati, karena sering kali guide layer tidak muncul saat dipanggil, terutama bila kita telah menggunakan beberapa guide layer. Oleh sebab itu, disarankan untuk mengunci guide layer yang sudah ada saat meminta guide layer berikutnya. Cara menggunakan guide layer adalah sebagai berikut : 1. Blok oval tool (benda yang akan digerakkan) yang dibuat dengan menggunakan arrow tool .
2. Klik menu insert dan aktifkan creative motion tween sebagai titik awal benda yang akan digerakkan. 3. Sorot layer frame (misal 15) di timeline dan klik kanan mouse, aktifkan key frame sebagai titik acuan benda. 4. Klik guide layer yang berfungsi untuk membimbing gerakan objek. 5. Sorot line tool sebagai alat pembuat path dari frame awal ke frame akhir. 6. Sorot array tool dan gunakan untuk mengatur lintasan yang diinginkan. 7. Sorot array tool dan blok oval (benda) yang dibuat serta gerakkan dari frame awal ke frame akhir. 8. Tekan enter untuk menguji lintasan yang ditempuh objek. 9. Atau dapat dilakukan dengan pilih menu Control → Play
d. Toolbox
Toolbox merupakan tempat alat-alat kerja yang diperlukan dalam Flash, di antaranya arrow tool, oval tool, pen tool, pencil tool, rectangle tool, dan lain-lain. 1. Create motion tween proses pembuatan gambar di titik awal gerakan. 2. Key frame tool yang digunakan untuk menempatkan gambar ada posisi akhir. 3. Path merupakan lintasan yang akan ditempuh oleh objek. c.
Timeline
Timeline merupakan bagian yang mengatur semua objek, kapan dimunculkan dan kapan tidak dimunculkan, dapat juga digunakan untuk menentukan atau mengatur gerak suatu objek, maka skala timelinenya harus dikecilkan dan sebaliknya.
c.
Scene
Bagian ini dapat digunakan untuk membagi cerita yang panjang menjadi
bagian-bagian yang lebih kecil
agar mudah
melakukan
perubahan-perubahan yang diperlukan. Bila kita bekerja pada movie di salah satu scene maka movie yang ada di scene lain dalam file yang sama tidak akan muncul. Pemunculan movie pada scene yang lain atau yang diperlukan dapat diatur dengan menggunakan botton.
c.
Panel
Panel berfungsi untuk menampilkan dan mengubah informasi suatu objek yang ada di stage, misalnya panel warna dapat dipergunakan untuk melakukan perubahan warna sesuai dengan yang diinginkan.
c.
Stage
Stage berbentuk kotak putih, tempat semua objek yang diperlukan, gambar, tulisan, dan foto. Stage dapat digerakkan ke kiri maupun ke kanan, gambar yang dibuat tidak boleh keluar dari kotak putih karena gambar tersebut tidak akan kelihatan di movie saat dieksekusi.
2.
Animasi
dengan
menggunakan
Bahasa
Pemrograman
ActionScript
ActionScript adalah bahasa pemrograman di Flash yang berisikan event seperti halnya JavaScript . Bahasa Pemrograman ActionScript dibuat mengikuti JavaScript . Saat ini ActionScript masih sederhana, pernyataan switch belum ada serta eval-nya juga terbatas. ActionScript belum mendukung set karakter Unicode, namun bahasa pemrograman ActionScript terus berevolusi. Dibandingkan dengan animasi yang menggunakan tool (secara manual), animasi dengan bahasa pemrograman ActionScript mempunyai
keuntungan diantaranya adalah sebagai berikut : 1. Ukuran bytes movie lebih kecil. 2.
Tingkat akurasi animasi lebih tinggi, terutama untuk animasi yang berulang (loop).
3.
Mudah untuk direvisi, misalnya untuk menambah atau mengurangi kecepatan cukup dengan mengubah variabelnya. Sedangkan keunggulan dibandingkan dengan bahasa pemrograman pada umumnya adalah tidak memerlukan waktu kompilasi karena bahasa pemrograman ActionScript merupakan bahasa interpreter, namun kelemahannya adalah belum tersedia fasilitas yang dapat meminta input dari pengguna, tetapi akan melayani pengguna dalam menelusuri data yang ada.
Tombol menu animatif dengan Flash Dalam membuat sebuah program aplikasi berupa media pembelajaran berbasis komputer, terkadang diperlukan berbagai pariasi-pariasi tampilan, apakah dari segi background warna, gambar, animasi-animasi baik animasi pada tulisan maupun animasi pada tombol, semua itu memberikan daya tarik tersendiri bagi pengguna media pembelajaran ini. Ada mungkin orang yang mementingkan isi materi daripada tampilan, ini tidak salah, tapi alangkah baiknya isi materi yang bagus plus tampilan program yang wah. Sehingga pengguna media pembelajaran tidak merasa bosan dikarenakan pemandangan yang ditampilkan monoton, kaku, sehingga tujuan dari pembuatan media pembelajaran ini tidak tercapai. Untuk pembahasan kali ini, saya akan mencoba memberikan tips trik bagaimana membuat sebuah tombol menu yang animatif. 1. A. Tombol naik saat kursor berada di atas tombol Langkah pembuatan :
1. Buka program Macromedia Flash 2. Klik menu Flash Document. 3. Anda sekarang telah berada di area kosong Macromedia Flash. 4. Buat kotak (dengan rectangle tool) untuk menu di stage. 5. Copy kotak yang telah dibuat dengan cara, pilih kotak tersebut dengan menu ‘ selection tools’, tekan dan tahan tombol ‘ctrl ’ lalu geret (drag) kotak tersebut ke kanan. Ulangi proses drag ini sampai didapatkan beberapa buah tombol sesuai kebutuhan. 6. Ketik menu 1, menu 2, menu 3, dan seterusnya pada kotak yang dibuat. 7. Pilih 1 kotak menu yang dibuat, kemudian rubah menjadi symbol button, dengan menekan F8, pilih type ‘Button’, pada ‘Name’ ketik menu 1 (atau apa sajalah terserah anda).
8. Masuk ke area symbol button. 9. Insert keyframe pada frame ‘over’, caranya klik kanan pada frame ‘over’, pilih Insert Keyframe
10. Ulangi langkah yang sama untuk insert keyframe pada frame ‘Down’ dan ‘Hit’. 11. Kembali ke frame ‘Over’ 12. Setelah itu pilih kotak menu 1, kemudian tekan panah atas 10x 13. Coba lihat hasilnya dengan menekan ‘Ctrl+Enter’ 14. Ulangi cara yang sama untuk tombol menu 2, 3, 4, dst…. 15. Kita juga bisa kreasikan tombol ini, apabila kursor berada di atas tombol, disamping tombol naik, juga akan keluar tulisan berisi keterangan dari menu ini. 16. Untuk langkah 15 caranya, pilih frame ‘Over’, pilih tombol ‘Text Tool’(tombol dengan tulisan A), ketik tulisan
“ Ini tombol menu 1” (Tulisan terserah anda) di pojok kanan tombol.
B. Saat tombol menu diklik akan muncul sub menu lainGunakan tomboltombol menu yang sudah dibuat tadi, untuk kreasi selanjutnya.
1. Insert layer, dengan mengklik tombol insert layer (seperti gambar di bawah) 2. Pindah frame 1 ke layer 2, dengan cara klik tanda titik hitam pada frame 1, kemudian drag ke frame 1 layer 2. 3. Pada frame 5 layer 1 insert frame, dengan cara klik kanan pada frame 5 layer 1, pilih insert frame. 4. Pada frame 2 layer 2 buat kotak menu di bawah tombol menu 1, dengan tulisan sub menu 1.1, sub menu 1.2, dan sub menu 1.3.
5. Ulangi langkah yang sama untuk membuat tombol sub menu pada tomboltombol menu lainnya. 6. Pada frame 1, 2, 3, 4, dan 5 berikan action script stop() (ditandai dengan huruf a di atas titik frame. 7. Oh ya…lupa dijelaskan action script itu adalah bahasa pemrograman pada Macromedia Flash, yang digunakan untuk mengontrol, atau memerintah aksi yang akan terjadi pada program yang dibuat. Untuk menampilkan area action script tekan tombol F9, maka akan terlihat tampilan seperti di bawah ini
8. Sekarang tiba saatnya untuk memberikan actionscript pada tombol, apa maksudnya ? Maksudnya supaya saat diklik, atau saat kursor berada di atas tombol, akan terjadi suatu aksi atau kejadian. 9. Pilih tombol menu 1 10. Tekan F9 untuk membuka area actionscript 11. Ketikkan script berikut (jangan ditambah atau dikurangi) : on (release) { gotoAndPlay(2); } Kalau diterjemahkan dalam bahasa kita, arti dari script di atas adalah ketika tombol diklik (misal : menu 1), maka program memerintahkan pergi ke frame 2 dan akan muncul sub menu 1.1, sub menu 1.2, sub menu 1.3 sebagaimana yang telah dibuat seperti pada langkah 5. 12. Keterangan : perintah gotoAndPlay(2), angka 2 di dalam kurang bisa dirubah sesuai keinginan, apakah mau pergi ke frame 3, frame 4, atau frame berapa saja. Misalnya untuk tombol menu 2 berikan perintah actionscript gotoAndPlay(3), untuk tombol menu gotoAndPlay(4), untuk tombol menu 4
3
berikan
berikan perintah actionscript gotoAndPlay(5). Ingat
perintah
actionscript
yang dirubah
hanya
gotoAndPlay bukan on (release) atau tanda kurung kurawal. 13. Kalau semua sudah selesai coba sekarang lihat hasilnya dengan menekan Ctrl+Enter. Itu dulu trik dari saya, untuk selanjutnya anda bisa berkreasi sendiri dengan banyak latihan-latihan dengan mencontoh beberapa kreasi orang lain, untuk dicoba bagaimana cara pembuatannya sesuai dengan logika berfikir kita. Hasil boleh sama tapi cara pembuatan bisa saja berbeda. Selamat berkarya, sukses buat anda semua !!! http://bilarik.com/?Tutorial:Tombol_menu_animatif_dengan_Flash
