MembuatMediaPembelajaranInteraktif

DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com

BAGIAN 3 DASAR-DASAR ACTION SCRIPT

Pengenalan Action Script

Action Script adalah bahasa program untuk memberikan perintah kepada Flash ketika movie dijalankan. Secara garis besar, ada dua jenis action script yaitu action script yang diterapkan pada objek dan action script yang diterapkan pada Time Line (Frame). Penulisan script dilakukan pada kotak action. Jika kotak dialog action belum muncul pilihlah Windows >> Actions atau tekan F9.
Menunjukkanaction yangditerapkanpada Frame.

Kotak dialog untuk menuliskan script

Posisi Koordinat Objek pada Lembar Kerja

Setiap titik pada lembar kerja memiliki koordinatnya masing-masing. Posisi horizontal menunjukkan nilai x sedangkan posisi vertical menunjukkan nilai y. Titik acuan koordinat adalah 0,0. Semakin ke kanan nilai x akan semakin besar, semakin ke bawah nilai y akan semakin besar.

26

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com

Action Script pada Button

Action Script pada tombol dipasang setelah tombol yang akan diberikan script terseleksi. Penulisan script pada tombol adalah sebagai berikut:
on(mouseEvent) { perintah; }

Mouse Event bisa diisi dengan: press release releaseOutside rollOver rollOut Perintah akan berjalan pada saat mouse ditekan Perintah akan berjalan setelah mouse dilepas diatas tombol Perintah akan dijalankan setelah mouse ditekan lalu dilepaskan diluar tombol Perintah akan berjalan pada saat kursor diatas tombol Perintah akan berjalan ketika kursor meninggalkan tombol

Memindahkan Frame Action Script pada objek adalah action script yang dipasang setelah objek diseleksi. Sebagai contoh kita akan memindahkan tampilan pada frame 1 ke frame 2 dengan menggunakan tombol. Ikuti langkah berikut: 1. Buatlah static text Halaman 1 pada frame 1 layer 1 dan tombol next pada frame 1 layer 2. 2. Buatlah static text Halaman 2 pada frame 2 layer 1 dan tombol back pada frame 2 layer 2.

27

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com

3. Seleksi tombol Next dan isilah script berikut pada kotak action: on(release){ gotoAndStop(2); } 4. Lakukan hal yang sama pada tombol back akan tetapi target frame kita ganti menjadi 2: on(release){ gotoAndStop(1); } 5. Buatlah Layer baru, seleksi frame 1 dan isilah script berikut pada kotak action: stop(); Script diatas termasuk dalam script yang diterapkan pada frame yang akan dibahas lebih lanjut pada bagian selanjutnya. 6. Lakukan test movie dengan menekan Shift+Enter. Penjelasan Script: 1. Perintah on(release) { statement } berarti statement akan dijalankan ketika tombol klik pada mouse dilepas. 2. gotoAndStop(2) adalah statment yang berarti tampilan akan dipindahkan ke frame 2. 3. Perintah stop(); pada frame 1 berarti saat movie dijalankan maka akan langsung berhenti pada frame 1.

Membuat Tombol yang Draggable Tombol yang Dragable berarti tombol yang bisa ditarik ke posisi manapun yangkita inginkan. Ikuti langkah berikut: 1. Buatlah Button dengan Instance Name bulat dan berilah script seperti dibawah ini: on(press) { 28

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com startDrag("bulat"); } on(release) { x=bulat._x; y=bulat._y; stopDrag(); } 2. Buatlah dua kotak Dynamic Text, masing-masing berilah nama variabel x dan y. Posisikoordinatx saattombol dilepas.

Buttondengan InstanceName bulat

3. Lakukan test movie.

Penjelasan Script: 1. Perintah on(press){statement} berarti statemen akan dijalankan ketika tombol mouse ditekan. 2. on(release){statement} berarti statement akan dijalankan ketika tombol mouse dilepas. 3. Perintah startDrag(bulat); berarti symbol dengan instance name bulat menjadi dragable. 4. stopDrag(); berarti menghentikan symbol yang dragable. 5. Perintah x=bulat._x; berarti Dynamic Text Box dengan variabel x akan diisi dengan posisi koordinat tombol saat drag dihentikan. Demikian juga dengan perintah y=bulat._y; yang menunjukkan posisi koordinat y untuk tombol bulat.

Action Script pada Movie Clip

Seperti yang sudah dibahas pada bagian sebelumnya, terdapat tiga jenis symbol dalam Flash yaitu Movie Clip, Button, dan Graphic. Selain bisa diterapkan pada symbol jenis Button seperti contoh diatas, Action Script bisa juga diterapkan pada Movie Clip. Secara umum penulisan script pada movie clip adalah:
onClipEvent(movieEvent){ perintah; }

MovieEvent bisa diisi dengan: enterFrame mouseMove mouseDown mouseUp Perintah berjalan ketika movie dijalankan Perintah berjalan ketika mouse digerakkan Perintah berjalan ketika mouse ditekan Perintah berjalan ketika mouse dilepas 29

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com keyDown keyUp Perintah berjalan ketika tombol keyboard (sembarang) ditekan Perintah berjalan ketika tombol keyboard (sembarang) dilepas

Membuat Animasi Balon Terbang

1. Buatlah gambar balon lalu jadikan gambar balon tersebut menjadi movie clip.

2. Seleksi gambar balon itu lalu buka kotak dialog action. Isilah script seperti berikut:

3. Lakukan tes movie. Penjelasan script: 1. _y -= 5; menyebabkan nilai koordinat y untuk balon akan selalu berkurang 5 pixel sehingga balon bergerak ke atas. 2. if (_y<0) { _y = 450; } Script diatas berarti jika nilai koordinat y untuk balon kurang dari nol maka nilai koordinat y balon akan dirubah menjadi 450 sehingga balon akan kembali muncul 30

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com dari posisi y = 450 (dibawah) setelah balon berada pada posisi kurang dari nol (diatas).

Membuat Animasi Gerakan Amoeba

1. Buatlah movie clip lingkaran. 2. Klik dobel pada lingkaran dan buat animasi menggunakan shape motion sehingga mirip gerakan amoeba. Caranya, modifikasi lingkaran menggunakan Arrow Tool sehingga tampilan menjadi:

Agar animasi terlihat halus, lakukan copy frame pada frame 1dengan cara klik kanan lalu pilih copy frame. Paste pada frame 15 seperti pada tampilan di atas. 3. Keluarlah dari lembar kerja movie klip kemudian seleksi movie klip yang sudah dibuat. Berilah script berikut pada movie clip amoeba. onClipEvent(enterFrame){ this._x+= -5+random(10); this._y+= -5+random(10); if (this._x > 550){ this._x = 0; } if (this._x < 0){ this._x = 550; } if (this._y > 400){ this._y = 0; } if (this._y < 0){ this._y = 400; } }

31

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com Penjelasan Script: 1. -5+random(10); akan mengacak bilangan dari -5 sampai 5. 2. this._x+= -5+random(10); berarti nilai x untuk movie klip akan selalu bertambah sesuai dengan bilangan dari -5 sampai 5. 3. Keempat perintah if diatas akan membatasi nilai x amuba antara 0 550 dan nilai y amuba antara 0 400. Hal ini menyebabkan gerakan amuba akan selalu berada pada koordinat yang sudah dibatasi.

Mengendalikan Animasi didalam Movie Clip dari Halaman Utama

1. Buatlah movie clip pada layer 1 frame 1 yang berisi animasi perpindahan bola. Berikan instance name bola untuk movie clip yang dibuat. Gambar di bawah ini menunjukkan animasi di dalam movie clip. Pada frame 1 isikan script berikut: stop();

2. Keluar dari lembar kerja movie clip dan buatlah layer baru dan masukkan tombol pada frame 1. Pada tombol, berilah script seperti dibawah ini:

32

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com 3. Lakukan test movie. Ketika tombol diklik, perintah _root.bola.gotoAndPlay(2) akan menjalankan animasi dalam movie clip dimulai dari frame 2.

Action Script pada Frame

Untuk mengendalikan movie clip atau tombol, selain bisa dilakukan dengan cara memberikan script pada objek juga bisa dilakukan dengan memberi script pada frame. Sebagai contoh, kita akan mengendalikan gerakan amuba namun dengan memberi script pada frame. 1. Cut script didalam movie clip amoeba dengan cara, blok semua script klik kanan dan pilih cut atau menekan crtl+x pada keyboard. 2. Buatlah layer baru, seleksi pada frame 1, buka kotak dialog Action Frame dan paste di dalamnya. 3. Lakukan penambahan script berikut: _root.onEnterFrame=function(){ this._x+= -5+random(10); this._y+= -5+random(10); if (this._x > 550){ this._x = 0; } if (this._x < 0){ this._x = 550; } if (this._y > 400){ this._y = 0; } if (this._y < 0){ this._y = 400; } } Perhatikan script di atas. Jika script diterapkan pada movie clip maka perintah yang digunakan adalah onClipEvent (enterFrame). Namun jika script diterapkan pada frame perintah yang digunakan adalah _root.onEnterFrame=function(). 4. Lakukan test movie, maka hasinya akan sama dengan sebelumnya.

Menggambar Menggunakan Perintah Action Script

1. Buka lembar kerja baru dan seleksi pada frame 1. 2. Tuliskan script berikut: _root.onEnterFrame = function(){ beginFill (0x0000FF, 50); lineStyle(2,996600,100); moveTo(200,200); lineTo(300,400); lineTo(100,400); lineTo(100,400); 33

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto fareed_surya@yahoo.com endFill(); } 3. Lakukan test movie maka akan muncul gambar segitiga. Penjelasan Script: 1. beginFill (id warna, nilai transparansi);adalah perintah untuk memberi warna pada objek yang dibuat. 2. lineStyle(nilai ketebalan garis,id warna,transparansi); untuk menentukan jenis garis. 3. moveTo(200,200); untuk mengarahkan bahwa gambar dimulai dari titik koordinat 200,200. Jika script ini tidak dituliskan maka gambar akan dimulai dari titik 0,0. 4. lineTo(300,400); untuk membuat garis dari koordinat 200,200 sampai koordinat 300,400.

34