1

MODUL DASAR_DASAR FLASH part I

MEMBUAT SIMBOL
Symbol digunakan untuk membuat objek/gambar dapat digunakan kembali tanpa harus membuat ulang objek/gambar tersebut. Objek yang dijadikan symbol akan masuk ke dalam panel library. Melalui panel library ini anda dapat mendrag symbol yang ada di dalamnya ke stage sesuai kebutuhan sehingga itulah yang dimaksud dengan dapat digunakan kembali. Ada 2 cara membuat symbol. Pertama : membuat symbolnya terlebih dahulu, kemudian baru diberi objek. Kedua : membuat objeknya terlebih dahulu baru dijadikan symbol. Terdapat perbedaan diantara kedua cara tersebut. Perbedaannya adalah adanya Registration dipanel yang digunakan untuk membuat symbol. Fungsi Registration adalah untuk menentukan titik pusat pada symbol yang dibuat. A. Symbol-Objek 1. Buatlah sebuh flash document. 2. Pilih menu Insert>New Symbol(tekan CTRL+F8), maka akan muncul kotak dialog Create New Symbol. 3. Ubah Name (jika diperlukan) dan Type sesuai kebutuhan. Tekan OK jika sudah selesai. Ada 3 type symbol : Movie clip : untuk lebih jelasnya silahkan klik di sini Button : untuk lebih jelasnya silahkan klik di sini Graphic : untuk lebih jelasnya silahkan klik di sini

Gambar kotak dialog Create New Symbol

Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

4. Maka kita akan berada di dalam stage symbol yang kita buat.

Tampilan ketika kita berada di dalam stage symbol 5. Buatlah objek sesuai kebutuhan di dalam stage symbol tersebut. 7. Jika sudah selesai tekan CTRL+E untuk keluar dari symbol. 8. Symbol telah selesai dibuat dan siap untuk digunakan. 9. Untuk menaruh symbol ke dalam stage, pilih menu Window>Library(CTRL+L), akan muncul panel library.

Gambar kotak dialog Library 9. Drag symbol yang baru kita yang berada di panel library ke stage. Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

B. Objek-Symbol 1. Buatlah sebuh flash document. 2. Buatlah sebuah objek. 3. Seleksi objek tersebut lalu pilih menu Modify>Convert to Symbol(F8), maka akan muncul kotak dialog Convert to Symbol.

Gambar kotak dialog Convert to Symbol 4. Ubah Name (jika diperlukan), Type, dan Registration sesuai kebutuhan. Tekan OK jika sudah selesai. 5. Symbol telah selesai dibuat dan siap untuk digunakan. 6. Untuk menaruh kembali symbol ke dalam stage, pilih menu Window>Library(CTRL+L), akan muncul panel library. 7. Drag symbol yang baru kita yang berada di panel library ke stage.

MENGGERAKKAN OBJEK DENGAN ACTION SCRIPT

Kita bisa menggerakan objek dengan mouse ataupun dengan keyboard. Di tutorial ini kita akan menggunakan keyboard sebagai pengontrolnya. Tombol yang digunakan pun yang sudah umum digunakan yaitu tombol panah atas, kanan, kiri, bawah. 1. Buatlah objek yang akan digerakan, sebagai contoh saya menggunakan sebuah lingkaran. 2. Seleksi lingkaran tadi lalu tekan F8. Pada kotak dialog yang muncul pilih Movie Clip sebagai type lalu tekan OK 3. Seleksi movie clip yang baru dibuat tadi lalu tekan F9. Pada kotak actions yang muncul tuliskan script di bawah ini : onClipEvent (load) { kecepatan = 10; } onClipEvent (enterFrame) { Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

//ketika tombol panah kiri pada keyboard ditekan if (Key.isDown(Key.LEFT)) { //posisi x movie clip ini akan dikurangai kecepatan / movie clip ini bergerak ke kiri _x -= kecepatan; } //ketika tombol panah kanan pada keyboard ditekan if (Key.isDown(Key.RIGHT)) { //posisi x movie clip ini akan ditambah kecepatan / movie clip ini bergerak ke kanan _x += kecepatan; } //ketika tombol panah atas pada keyboard ditekan if (Key.isDown(Key.UP)) { //posisi y movie clip ini akan dikurangai kecepatan / movie clip ini bergerak ke atas _y -= kecepatan; } //ketika tombol panah bawah pada keyboard ditekan if (Key.isDown(Key.DOWN)) { //posisi y movie clip ini akan ditambah kecepatan / movie clip ini bergerak ke bawah _y += kecepatan; }

4. Tekan CTRL+ENTER untuk melihat hasilnya

MEMBUAT WARNA OBJEK MENJADI TRANSPARAN

Kita dapat mengubah warna suatu objek menjadi transparan ketika kita sedang mewarnainya. Tetapi bagaimana kita mengubah warna suatu objek menjadi transparan ketika movie dijalankan? Jawabannya dengan menggunakan _alpha (Actionscript). Berikut cara penggunaanya : 1. Buatlah sebuah lingkaran dan jadikanlah movie clip seperti gambar dibawah ini :

2. Seleksi movie clip tersebut dan tekan F9 3. Berikan actionscript berikut : Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

onClipEvent (enterFrame) { //semakin kecil nilainya semakin transparan warnanya //nilai maksimal 100 dan nilai minimalnya 0 _alpha = 40; } 4. Test movie dengan menekan CTRL+ENTER. 5. Untuk lebih jelasnya, buatlah sebuah Dynamic Text dengan Var : angka. Tempatkan Dynamic Text ini di bagian kanan atas stage 6. Buatlah sebuah Static Text berisi tulisan _alpha dan tempatkan disebelah Dyanamic Text yang anda buat tadi. 7. Hapus actionscript yang ditulis tadi dan ganti dengan actionscript dibawah ini : nClipEvent (enterFrame) { //nilai alpha akan dikurangi 1 secara terus menerus _alpha--; //ketika nilai alpha kurang dari 0 if (_alpha<0) { //nilai alpha diubah kembali menjadi 100 _alpha = 100; } //nilai dynamic text angka sama dengan nilai alpha lingkaran _root.angka = _alpha; } 8. Test movie dengan menekan CTRL+ENTER. Nb : Semakin kecil nilai _alpha semakin transparan warna lingkaran

MEMBUAT OBJEK DAPAT DI DRAG

Pada tutorial kali ini kita akan membuat sebuah objek yang dapat didrag ketika mouse ditekan pada objek tersebut dan berhenti di drag ketika tekanan mouse dilepas. 1. Buatlah sebuah lingkaran dan ubah menjadi movieclip. 2. Seleksi movieclip tersebut kemudian tekan F9

Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

3. Akan muncul kotak dialog Action. Tulis actionscript dibawah ini kedalam kotak dialog tersebut :
//ketika mouse ditekan on (press) { //movieclip ini dapat didrag startDrag(this); } //ketika melepas tekanan setelah mouse ditekan on (release) { //movieclip ini berhenti didrag stopDrag(); }

4. Test movie dengan menekan CTRL+ENTER.

DASAR DASAR MEMBUAT TOMBOL (penjelasan dosen)

Button adalah salah satu type dari symbol. Button digunakan untuk membuat tombol di flash. Dengan dijadikannya suatu objek menjadi button maka selain objek tersebut menjadi tombol, objek tersebut juga dapat menggunakan beberapa fasilitas dari flash seperti animasi tween, masking, guide dan juga kita dapat memberikan actionscript pada objek tersebut. Di bawah ini kita akan mempelajari cara dasar membuat tombol. Melalui cara dasar ini anda dapat berkreasi untuk membuat tombol yang bagus dan keren. 1. Buatlah sebuah flash document. 2. Buatlah sebuah lingkaran 3. Seleksi lingkaran tersebut kemudian tekan F8 pada keyboard atau bisa juga melalui Modify>Convert to Symbol 4. Pada kotak dialog yang muncul pilih Button sebagai Typenya seperti gambar dibawah ini :

Button sebagai Type 5. Ubah Name pada kotak dialog tersebut jika diperlukan, kalau sudah selesai tekan OK maka lingkaran yang anda buat tadi sudah berubah menjadi sebuah Symbol bertype Button. 6. Klik dua kali Button tadi maka anda akan masuk ke stage button. Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

7. Anda akan melihat jendela Timeline seperti gambar dibawah ini :

Gambar Timeline Up : tampilan utama button Over : tampilan button ketika kursor mouse berada diatas button Down : tampilan button ketika kursor mouse menekan button Hit : luas daerah aktif button 8. Pilih bagian Over, kemudian tekan F6 pada keyboard. Ubah warna lingkaran menjadi lebih muda 9. Pilih bagian Down, kemudian tekan F6 pada keyboard. Ubah warna lingkaran menjadi lebih tua 10. Jika anda ingin daerah aktif button menjadi lebih luas, pilih bagian Hit kemudian tekan F6 pada keyboard. Buatlah lingkaran yang ada menjadi lebih besar. 11. Kalau sudah selesai, klik tombol scene pada timeline atau bisa juga tekan CTRL+E pada keyboard. 12. Terakhir test movie dengan menekan CTRL+ENTER.

MENGUBAH UKURAN OBJEK

Kita dapat mengatur besar kecil suatu objek ketika movie sedang dimainkan. _xscale digunakan untuk mengatur panjang dan _yscale digunakan untuk mengatur lebar. Jika digabungkan maka kita dapat mengatur besar dan kecil suatu objek. 1. Buatlah sebuah lingkaran BESAR dan jadikanlah movieclip 2. Seleksi mc tersebut dan tekan F9 3. Berikan actionscript berikut :
onClipEvent (enterFrame) { //semakin besar nilainya semakin besar skala horisontalnya/memanjang _xscale = 50; //semakin besar nilainya semakin besar skala vertikalnya/melebar _yscale = 50; }

Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

4. Test movie dengan menekan CTRL+ENTER. OTOMATIS LINKARAN TADI AKAN MENGECIL 5. Untuk lebih jelasnya, buatlah 2 buah Dynamic Text dengan Var : angka1 dan Var : angka2. Tempatkan Dynamic Text ini di bagian kanan atas stage 6. Buatlah 2 buah Static Text berisi tulisan _xscale dan _yscale dan tempatkan disebelah Dyanamic Text yang kamu buat tadi. 7. Hapus actionscript yang ditulis tadi dan ganti dengan actionscript dibawah ini :
onClipEvent (enterFrame) { //nilai xscale dikurangi 1 secara terus menerus _xscale--; //nilai yscale dikurangi 1 secara terus menerus _yscale--; //ketika nilai xscale dan yscale kurang dari 0 if (_xscale&lt;0 &amp;&amp; _yscale&lt;0) { //nilai xscale diubah menjadi 130 _xscale = 130; //nilai yscale diubah menjadi 130 _yscale = 130; } //nilai dynamic text angka sama dengan nilai xscale _root.angka1 = _xscale; //nilai dynamic text angka sama dengan nilai yscale _root.angka2 = _yscale; }

8. Test movie dengan menekan CTRL+ENTER. LIHAT HASILNYA NB: Semakin kecil nilai _x scale dan _y scale semakin kecil ukuran lingkaran

MELACAK KORDINAT KURSOR MOUSE

kali ini kita akan melacak keberadaan kursor mouse. Cara kerjanya mudah anda hanya tinggal menggerakan kursor mouse maka akan tampil posisi koordinat x dan y sesuai keberadaan koordinat kursor mouse. 1. Buatlah 2 buah dynamic text dengan masing-masing Var diberi nama posisix dan posisiy 2. Buat 3 buah static text dan beri tulisan Posisi Kursor Mouse, x:, y: pada masing-masing static text tersebut.

Wisdean Eska Maena | Komputer Grafis

MODUL DASAR_DASAR FLASH part I

Gambar Peletakan 2. Klik frame 1 lalu tekan F9 dan beri actionscript berikut: (LALU CTRL+ENTER)
onMouseMove = function () { //nilai posisix sama dengan nilai koordinat x mouse posisix = _root._xmouse; //nilai posisiy sama dengan nilai koordinat y mouse posisiy = _root._ymouse; };

MENGGERAKKAN OBJEK DENGAN GERAKAN MOUSE (dosen)

Sebelumnya kita telah mempelajari bagaimana cara menggerakan objek dengan keyboard. Sekarang kita akan membahas cara menggerakan objek dengan gerakan mouse. 1. Buatlah sebuah lingkaran dan ubah menjadi movieclip 2. Seleksi movieclip tersebut dan tekan F9 Masukan actionscript berikut kedalam kotak dialog Actions :
onClipEvent (enterFrame) { startDrag(this, true, 55, 55, 345, 345); }

3. Test movie dengan menekan CTRL+ENTER. 4. Seperti terlihat HASIL TADI movieclip hanya bergerak didalam kotak putih saja. Hal ini dikarenakan parameter yang sudah saya setting. 5. Untuk lebih jelasnya lihat dibawah ini Wisdean Eska Maena | Komputer Grafis

10

MODUL DASAR_DASAR FLASH part I

6. startDrag(target, lock, left, top, right, bottom) target : Siapa yang didrag. Dalam hal ini kita menggunakan this yang artinya movieclip ini sendiri lock : Nilainya true dan false. Jika true maka titik pusat movieclip sama dengan titik pusat mouse left : Batas kiri maksimal top : Batas atas maksimal right : Batas kanan maksimal bottom : Batas bawah maksimal 7. Kalau lock kita ubah menjadi false dan ctrl+enter coba lihat hasilnya 8. Jika kita ingin hanya ingin movieclip tersebut hanya dapat bergerak kekanan dan kekiri maka ubah parameternya menjadi seperti dibawah ini :
nClipEvent (enterFrame) { //movieclip ini bergerak mengikuti gerakan mouse dengan titik pusat movieclip ini sebagai titik pusat gerakan //batas kiri moviclip ini adalah 55 artinya gerakan movieclip ini akan berhenti jika koordinat x movieclip ini kurang dari 55 //batas atas moviclip ini adalah 200 artinya gerakan movieclip ini akan berhenti jika koordinat y movieclip ini kurang dari 200 //batas kanan moviclip ini adalah 345 artinya gerakan movieclip ini akan berhenti jika koordinat x movieclip ini lebih dari 345 //batas bawah moviclip ini adalah 200 artinya gerakan movieclip ini akan berhenti jika koordinat y movieclip ini lebih dari 200 startDrag(this, true, 55, 200, 345, 200); }

9. Test movie dengan menekan CTRL+ENTER. Lihat perbedaannya

MENGGANTI KURSOR MOUSE

Kali ini kita akan mempelajari bagaimana cara mengganti kursor mouse ketika kursor mouse berada didalam sebuah swf. Normalnya mouse akan berbentuk panah, tapi di Flash anda dapat mengubah kursor mouse menjadi bentuk apapun sesuai keinginan anda. 1. Buatlah sebuah gambar yang akan digunakan untuk mengganti kursor mouse lalu jadikan sebuah movieclip. 2. Klik movieclip tersebut dan tekan F9 lalu masukan script berikut : onClipEvent (enterFrame) { //kursor mouse asli akan disembunyikan Mouse.hide(); //mengganti kursor mouse dengan movieclip ini startDrag(this, true); Wisdean Eska Maena | Komputer Grafis

11

MODUL DASAR_DASAR FLASH part I

} 3. Terakhir Test Movie dengan menekan CTRL+Enter. POSISI X DAN Y DI FLASH Di sekolah kita pasti diajari tentang sumbu cartesius. Sumbu cartesius dibagi menjadi 2 garis yaitu garis horisontal untuk posisi x dan garis vertikal untuk posisi y. Pertemuan antara 2 garis tersebut berada di koordinat (0,0). Selanjutnya lihatlah gambar di bawah ini :

Sumbu cartesius pada matematika Pada gambar di atas terlihat jelas bahwa : semakin kekiri nilai x akan bernilai negatif dan semakin kekanan nilai x akan bernilai positif semakin keatas nilai y akan bernilai positif dan semakin kebawah nilai y akan bernilai negatif Tetapi di Flash terdapat perbedaan mengenai sumbu cartesius tersebut. Perhatikan gambar dibawah ini :

Wisdean Eska Maena | Komputer Grafis

12

MODUL DASAR_DASAR FLASH part I

Sumbu cartesius pada Flash Melalui gambar diatas kita dapat mengetahui 2 perbedaan mengenai sumbu cartesius di Flash : 1. Posisi koordinat (0,0) berada di pojok kiri atas stage. 2. Pada sumbu y semakin ke atas nilai y akan bernilai negatif dan semakin ke bawah nilai y akan bernilai positif. Sebagai contoh jika anda ingin membuat sebuah objek turun ke bawah gunakan script berikut :
onClipEvent (enterFrame) { _y += 5; }

Ingatlah 2 perbedaan di atas. Bagi anda yang terbiasa menggunakan sumbu cartesius pada matematika, mungkin anda akan sering mengalami masalah tentang penulisan posisi y pada Flash. Anda akan membutuhkan waktu untuk membisakan diri dengan perbedaan tersebut.

APAKAH ONCLIPEVENT ITU?

Anda pasti sering melihat onClipEvent() pada setiap script yang kami tulis. Anda juga bingung kenapa tidak ada penjelasan mengenai hal itu ketika script ditulis. Hal itu memang sengaja kami lakukan karena setiap menulis actionscript pasti sering menulis onClipEvent() jadi kami tidak menuliskan penjelasan mengenai onClipEvent(). Sebagai gantinya silahkan baca dibawah ini untuk mengetahui penjelasan mengenai beberapa onClipEvent() onClipEvent wajib digunakan saat menulis actionscript di movieclip. Bisa juga diartikan sebagai script pembuka saat menulis actionscript di movie clip. Ada beberapa jenisnya namun yang akan kami jelaskan hanya 5 saja. Wisdean Eska Maena | Komputer Grafis

13

MODUL DASAR_DASAR FLASH part I

1. load Scipt yang ada didalam onClipEvent ini akan dijalankan satu kali ketika keyframe movieclip ini berada dimainkan. Di movieclip script ini ditulis onClipEvent(load){} sedangkan di frame script ini ditulis onload=function(){}; 2. enterFrame Scipt yang ada didalam onClipEvent ini akan dijalankan secara terus menerus ketika ketika keyframe movieclip ini berada dimainkan. Di movieclip script ini ditulis onClipEvent(EnterFrame){} sedangkan di frame script ini ditulis onEnterFrame=function(){}; 3. mouseMove Scipt yang ada didalam onClipEvent ini akan dijalankan ketika mouse bergerak. Di movieclip script ini ditulis onClipEvent(mouseMove){} sedangkan di frame script ini ditulis onMouseMove=function(){}; 4. mouseDown Scipt yang ada didalam onClipEvent ini akan dijalankan ketika mouse ditekan. Di movieclip script ini ditulis onClipEvent(mouseDown){} sedangkan di frame script ini ditulis onMouseDown=function(){}; 5. mouseUp Scipt yang ada didalam onClipEvent ini akan dijalankan ketika tekanan mouse dilepaskan. Di movieclip script ini ditulis onClipEvent(mouseUp){} sedangkan di frame script ini ditulis onMouseUp=function(){}; Untuk contoh penggunaannya masing-masing akan kita berikan script
_x = random(300); _y = random(300);

Contoh 1 : Buatlah lingkaran dan seleksi lingkaran tersebut lalu tekan F8 dan tekan ok. Tempatkan movie clip ini di tengah-tengah stage. Berikan script berikut pada lingkaran tersebut :
onClipEvent (load) { _x = random(300); _y = random(300); }

Test movie dengan menekan CTRL+Enter. Terlihat bahwa movie clip mengalami perubahan posisi satu kali saja. Contoh 2 : Ubah script diatas menjadi seperti dibawah ini :
onClipEvent (enterFrame) { _x = random(300); _y = random(300); }

Test movie dengan menekan CTRL+Enter. Terlihat bahwa movie clip mengalami perubahan posisi terus menerus. Wisdean Eska Maena | Komputer Grafis

14

MODUL DASAR_DASAR FLASH part I

Contoh 3 : Ubah script diatas menjadi seperti dibawah ini :

onClipEvent (mouseMove) { _x = random(300); _y = random(300); }

Test movie dengan menekan CTRL+Enter. Terlihat bahwa movie clip mengalami perubahan posisi ketika mouse digerakan. Contoh 4 : Ubah script diatas menjadi seperti dibawah ini :
onClipEvent (mouseDown) { _x = random(300); _y = random(300); }

Test movie dengan menekan CTRL+Enter. Terlihat bahwa movie clip mengalami perubahan posisi ketika mouse ditekan. Contoh 5 : Ubah script diatas menjadi seperti dibawah ini :
onClipEvent (mouseUp) { _x = random(300); _y = random(300); }

Test movie dengan menekan CTRL+Enter. Terlihat bahwa movie clip mengalami perubahan posisi ketika tekanan mouse dilepaskan.

MEMBUAT PASSWORD
Password digunakan untuk melindungi data-data agar hanya bisa dibuka oleh pemiliknya saja. Hal serupa dapat kita lakukan di Flash. Kita dapat membuat sebuah form Password yang kita tempatkan saat swf tampil sehingga ketika password yang dimasukan salah maka swf tidak bisa dijalankan. Tutorial mengenai bentuk dasar form password tersebut dapat anda lihat di bawah ini : 1. Buatlah 3 buah Blank Keyframe (seleksi 3 buah frame lalu tekan F7) dan berikan script berikut pada ketiga Blank Keyframe tersebut :
stop();

Wisdean Eska Maena | Komputer Grafis

15

MODUL DASAR_DASAR FLASH part I

Gambar Blank Keyframe yang telah diberi script stop(); 2. Pilih frame 1 dan buatlah sebuah Static Text bertuliskan Password: 3. Buatlah sebuah Input Text dengan Var : jawaban. Berikan angka 11 pada Maximum characters (hal ini akan membuat jumlah huruf/angka yang dapat dimasukan di Input Text hanya 11 karakter) dan ubah Line type menjadi Password (hal ini akan membuat huruf/angka yang dimasukkan tulisannya akan berbentuk * , jika anda tidak ingin tulisannya berbentuk * maka pilih Single Line sebagai Line Type)

Gambar Properties Input Text 4. Masih di Frame 1 buatlah sebuah Symbol Button bertuliskan OK dan masukan script berikut pada Button tersebut :
on (press) { //jika jawaban diisi warungflash if (jawaban == "flash") { //jawaban benar, mainkan frame 2 gotoAndStop(2); } else { //jawaban salah,mainkan frame 3 gotoAndStop(3); } }

5. Pindah ke Frame 2, buatlah sebuah Static Text bertulisakan Password yang anda masukan benar 6. Buatlah sebuah Symbol Button bertuliskan Back dan berikan script berikut pada button tersebut : on (release) { //jawaban dikosongkan jawaban = ""; //mainkan frame 1 gotoAndStop(1); Wisdean Eska Maena | Komputer Grafis

16

MODUL DASAR_DASAR FLASH part I

} 7. Copy seluruh objek-objek yang ada di Frame 2. Lalu pindah ke Frame 3 dan paste-kan yang tadi dicopy. 8. Ubah Static Text di Frame 3 menjadi Password yang anda masukan salah 9. Test Movie dengan menekan Ctrl+Enter

Wisdean Eska Maena | Komputer Grafis