Chapter 7. ActionScript 1. statement(s); }

Transkripsi

1 Chapter 7 ActionScript 1 Yang perlu dipahami sebelumnya adalah tentang ActionScript. Berikut, sedikit summary tentang ActionScript ActionScript dalam Flash adalah scripting untuk cara untuk berkomunikasi dengan program. Intinya, scripting adalah cara untuk memberi perintah tentang semua hal yang berkaitan dengan jalannya movie di Flash. Seperti halnya dengan scripting yang lain, ActionScript memiliki sintak-sintak khusus, fungsi, repository dan juga operator. Sekilas, actionscript memiliki kemiripan dengan Javascript. Semua action yang akan dikerjakan, dibuat dari panel action. Tampilan Panel Action, biasanya di bawah panel properties. I. ACTION 1. Movie Control: untuk mengatur jalannya movie go to atau go to andplay penggunaan: gotoandplay(scene, frame) scene: nama scene yang dipilih, frame: nomor frame yang akan dikirimi action on penggunaan: on(mouseevent) { statement(s); Mouseevent: press. Event press akan dikerjakan pada button saat mouse pointer di atas button. release. Event release akan dikerjakan pada button saat mouse pointer di atas button. releaseoutside. Event release akan dikerjakan pada button saat mouse pointer di luar button, biasanya setelah event press. rollout. Mouse pointer bergeser keluar area button

2 rollover. Mouse pointer bergeser ke atas button dragout. Saat mouse pointer di atas button, button akan di-press kemudian mouse digeser keluar area button. dragover. Saat mouse pointer di atas button, button sudah di-press, mouse digeser keluar area button, kemudian bergeser ke atas button lagi. keypress ("key"). Key tertentu telah di-press. Play Penggunaan: play() Artinya, mainkan movie. Stop Penggunaan: stop Artinya, stop movie yang sedang dimainkan. stop all sound Penggunaan: stopallsounds() Artinya, stop semua sound yang dimainkan di movie tanpa menghentikan movie. 2. Browser/ Network: mengontrol web browser dan network fscommand Penggunaan: fscommand("command", "parameters") Command: script untuk stand-alone Flash Player. Parameters: script untuk semua Flash Player. Dengan script ini,memungkinkan Flash untuk berkomunikasi dengan Player lain, web browser, Director, VB dll. Command Parameters Purpose quit None Close project fullscreen true or false Mendefinisikan fullscreen allowscale true or false Mendefinisikan skala player showmenu true or false Menampilkan menu exec Path to application Eksekusi aplikasi dari player

3 trapallkeys true or false Mendefinisikan event key geturl Penggunaan: geturl(url [, window [, "variables"]]) url: URL yang dipilih window: (optional) pilihan window untuk membuka document. _self: dibuka di current frame-window. _blank: dibuka di jendela baru _parent: dibuka di parent current frame. _top: dibuka di top-level frame di current window. GET atau POST adalah metode untuk mengirimkan variabel. GET: mengirimkan variabel di akhir URL POST: mengirimkan variable dalam bagian header http, yanpa menyertakan URL. LoadMovie Penggunaan: loadmovie("url",level/target[, variables]) url: alamat file yang akan di-load. Target: Path untuk movie Level: (integer) mendefinisikan level dalam Flash Player Variables: (optional) menggunakan metode GET atau POST LoadVariables Penggunaan: loadvariables ("url",level/"target"[, variables]) url: lokasi variable berada level: (integer) medefinisikan level dalam Flash Player yang akan dikirimi variabel target: Path target yang akan me-load variable. Variables: (optional) menggunakan metode GET atau POST unloadmovie Penggunaan: unloadmovie[num](level/"target") Level: level dari loaded movie. Target: Path target dari movie 3. Movie Clip Control: mengatur jalannya movie

4 duplicatemovieclip Penggunaan: duplicatemovieclip(target, newname,depth) Target: movie yang akan diduplicate Newname: penamaan duplicated. Depth: Level untuk duplicated movie. onclipevent Penggunaan: onclipevent(movieevent){ statement(s); movieevent is: sebuah event Event :load, unload, enterframe, mousemove, mousedown, mouseup, keydown, keyup, data statement(s): instruksi yang akan dikerjakan removemovieclip Penggunaan: removemovieclip(target) Target: Path target action setproperty Penggunaan: setproperty("target",property,value/expression) Target: path target Property: property yang akan diset Value: nilai baru dri properti Expression: Formula nilai baru startdrag Penggunaan: startdrag(target,[lock,left,top,right,bottom]) Target: path target untuk men-drag movie Lock: (optional) nilai boolean kondisi lock dari movie left, top, right, bottom: (optional) nilai koordinat dari posisi movie sebelumnya stopdrag Penggunaan: stopdrag() updateafterevent.

5 Peggunaan: updateafterevent() 4. Variables: script untuk mengakses dan manipulasi variable delete Penggunaan: delete reference Reference: nama variable/ object yang akan di delete set variable Penggunaan: set(variable,expression) Variable: penamaan variable Expression: proses assignment variable. Var Penggunaan: var variablename1 [= value1][...,variablenamen [=valuen]] VariableName: nama variabel Value: nilai yang diassignmentkan With Penggunaan: with (object) { statement(s); object: objek yang akan dikenai script statement(s): instruksi yang akan dijalankan 5. Conditions/ Loops: Kendali percabangan dan perulangan Break Penggunaan: break Case Penggunaan: case expression: statements Expression: sebuah pernyataan/ syarat Statements: sebuah statetement yang akan dijalankan jika syarat terpenuhi Continue Penggunaan: continue Default

6 Penggunaan: default: statements Statements: blok statements. do while Penggunaan: do { statement(s) while (condition) condition: sebuah syarat yang akan dievaluasi statement(s): blok statement yang sdikerjakan jika syarat terpenuhi else Penggunaan: else statement else {...statement(s)... condition: sebuah ekspresi syarat yang akan dievaluasi untuk mengetahui nilainya. statement(s): blok statement yang akan dieksekusi jika nilai syarat False. else if Penggunaan: if (condition){ statement(s); else if (condition){ statement(s); for Penggunaan: for(init; condition; next) { statement(s); init: deklarasi sebelum perulangan condition: syarat yang akan dievaluasi, bisa True atau False next: ekspresi untuk melakukan increament statement(s): instruksi yang akan diulang dst

7 6. Printing. Action untuk mencetak movie. 7. User-Defined Function. Fungsi yang didefinisijkan sendiri oleh user. 8. Miscellaneus Action. Fungsi yang berhubungan dengan fungsi lain dalam movie yang berhubungan langsung dengan jalannya movie. II. OPERATOR. Operator yang bisa digunakan dalam action Flash. III. FUNCTIONS. IV. CONSTANTS. V. PROPERTIES. VI. OBJECT. VII. DEPREDECATED. VIII. FLASH UI COMPONENT. (untuk kamus lengkap, buka reference di Flash) Selain action, hal lain yang perlu dipahami adalah: Pengorganisasian movie Berikut pengorganisasian movie dalam Flash: Objek Frame Scene Movie STOP, PLAY, GO TO Stop untuk menghentikan movie. Play untuk menjalankan movie. Go To untuk untuk berpindah frame atau scene 1. Buat sebuah animasi, motion/ shape tween atau frame by frame. Dalam contoh ini shape tween. 2. Biasanya, setelah selesai dimainkan, akan terus diulang 3. Di keyframe terakhir, tambahkan action stop untuk menghentikan looping, dengan membuka panel action, cari dalam movie control > stop. Akan terlihat di timeline sebuah tanda yang menunjukkan ada penyisipan action si keyframe tersebut 4. Simpan mainkan Lat38 Dapat digunakan untuk multilayer Lat39

8 GO TO Terdapat GoToAndPlay dan GoToAndStop GoToAndPlay, melompat ke frame atau scene yang dituju dan memainkan movie di frame atau scene tersebut GoToAndStop, melompat ke frame atau scene yang dituju dan meghentikannya di frame atau scene tersebut 1. Buat sebuah animasi, dalam kasus ini melanjutkan Lat39 2. Klik Insert > Scene, untuk menambahkan scene 3. Buat animasi di scene 2, berisi movie 4. Keyframe terakhir di scene1 beri action gotoandplay(scene2) 5. Keyframe terakhir di scene2 beri action gotoandplay(scene1), untuk mengulang movie 6. Simpan, mainkan NOTE: PENAMAAN LAYER, FRAME ATAUPUN ACTION AKAN MEMPERMUDAH EDITING DAN PENELUSURAN ALUR MOVIE Lat40 7. Coba hilangkan gotoandplay(scene2) dari scene1 Lat41 8. Perhatikan, seandainya tidak diberi action gotoandplay(scene2), otomatis movie akan menjalankan scene berikutnya. 9. Tambahkan sebuah scene lagi, sebuah animasi end. Kemudian di scene1 beri action gotoplay(scene3) lihat perbedaannya Lat42 Terlihat dari scene1 langsung menuju scene3 10. Tambahkan action di scene3 gotostop( scene1 ), lihat perbedaannya Lat43 Terlihat, movie akan dihentikan di frame yang dipilih Penggunaan action STOP, GOTO,PLAY seperti di atas dapat juga dikenakan untuk perpindahan frame stop(frame), gotoplay(frame), gotostop(frame)

9 1. Menggunakan movie frame by frame. Misal 3 animasi 1-10(nama= a, (nama= be ), 21-30(nama= ce ). 2. Beri nama masing-masing animasi frame tersebut. 3. Untuk action STOP. Di frame terakhir beri action stop. Buka panel action > movie control > stop() 4. Simpan, mainkan Lat44 Perhatikan hasilnya, di frame ce movie akan berhenti 5. Di frame be beri action gotoplay( a ). Lat45 Perhatikan, setelah be movie akan melompat ke a dan terus berulang 6. Di frame be ganti beri action gotostop( a ) Lat46 Perhatikann, setelah be, movie melompat ke a dan berhenti. ACTION Untuk OBJEK Sebuah action yang diberikan ke objek. Seperti action sebelumnya, hanya saja user dapat berinteraksi dengan movie menggunakan objek interaktif, seperti tombol Membuat mainan animasi sederhana. 1. Layer1, buat sebuah animasi objek cahaya melingkar 2. Buat layer baru, Layer2, untuk menempatkan action 3. Frame pertama layer 2, beri action stop(), untuk menghentikan semua animasi sebelum berinteraksi dengan action objek yang akan dibuat 4. Buat 2 button untuk interaksi dengan movie, play dan stop. Bisa juga mengambil dalam windows >common library> button. 5. Di button play klik kanan>action> object> movie> button> event> on(release){ play(); 6. Di button stop klik kanan>action> object> movie> button> event>

10 on(release){ stop ();. Lat47 On(release) adalah action yang memerintahkan sebuah sekumpulan event/ action saat pointer mouse di atas button. Membuat slide 1. Layer1, Buat animasi frame by frame, atau scene by scene, beri nama di masing2 frame/ masing2 scene 2. Layer2, frame 1, beri action stop(). Beri button untuk navigasi 3. Button diberi action. Sisipkan action. Klik kanan>action> on(release){ gotoandstop( nama frame / nama scene,frame); 4. Di frame berikutnya, lakukan langkah 1 dan 2 5. Button beri action. Sisipkan action. Klik kanan>action on(release){ GotoAndPlay( nama frame / nama scene,frame); 6. Simpan, mainkan Lat48 Membuat Galeri Foto 1. Layer1. Buat urutan foto dengan animasi frame by frame. Atur ukuran dan posisi di properties. Beri nama masing-masing layer. Misal nama: 1, 2, 3 dst. 2. Layer 2 buat navigasi next, previous sesuai posisi frame masing-masing foto, kecuali di foto pertama berikan navigasi next saja dan foto terakhir beri previous saja. Bisa ditambahkan navigasi posisi awal. 3. Untuk navigasi next foto 1 beri action On (release){

11 GotoAndStop( 2 ); 4. Di foto 2, untuk navigasi next On (release){ GotoAndStop( 3 ); dan navigasi previous On (release){ GotoAndStop( 2 ); 5. Untuk foto selanjutnya, gunakan action yang sama cukup diubah parameter nya. 6. Demikian seterusnya untuk setiap foto 7. Jika ditambahkan navigasi ke posisi awal, buat navigasinya dan beri action yang memerintahkan untuk ke frame 1. Lat49 Membuat Animasi Warna. Angka, Bentuk dll 1. Layer1, buat animasi frame by frame warna latar. Buat sebuah kotak seukuran stage flash. 2. Masing-masing frame beri warna yang berbeda-bed, beri nama di masing-masing frame misal hitam, merah etc. 3. Di frame 1, beri action stop untuk menghentikan semua animasi sebelum diberi event. 4. Layer2, buat menu pemilihan warna latar. Berikan pilihan menu sesuai warna latar yang dibuat di Layer1 5. Setiap menu pilihan warna berikan action on (release){ gotoandstop("biru"); //biru, adalah nama frame di mana animasi latar berwarna biru

12 6. Copykan pilihan menu tersebut sesuai banyaknya animasi latar. Jika membuat animasi frame di Layer1 sebanyak lima. Berarti pilihan menu di Layer2 juga dicopy sebanyak lima frame. 7. Simpan, mainkan Lat50 Membuat menu pulldown. 1. Misal akan dibuat menu Home dengan isi Profil, Sejarah, Terkini. 2. Layer1, frame1 buat button menu HOME, edit button. 3. Layer1, frame2 copykan button dari frame1. 4. Di frame1, berikan action sto() untuk menghentikan semua animasi. 5. Berikan action di objek button HOME on (release){ gotoandstop(2); atau on (rollover){ gotoandstop(2); 6. Layer2, frame1, buat button untuk submenu PROFIL. Letakkan di bawah button HOME atau di samping kanannya 7. Lakukan hal yang sama untuk submenu lain dengan layer yang berbeda. 8. Simpan, mainkan. 9. Tambahkan layer animasi untuk memeperjelas penggunaan menu yang telah dibuat Lat51 Memunculkan movie 1. Memanggil, file *.swf untuk dimasukkan dalam scene. Menggunakan action loadmovie/ loadmovienum 2. Buat sebuah animasi, misal namai intro (animasi angka putar)

13 3. Buat lagi sebuah animasi kedua (level1) yang akan diload dari intro, misal namai utama 4. Di frame terakhir animasi intro berikan action Stop() // untuk menghentikan animasi intro Loadmovie( utama.swf,1), atau Loadmovienum( utama.swf,1) // langsung membuka animasi utama.swf Atau bisa juga Loadmovie( utama.swf,_parent), Lat52 Terlihat animasi Utama.swf diload dari intro (kreatifitas anda mempengaruhi baiknya aplikasi anda) Memainkan Musik dengan Action 1. Buat sebuah symbol button 2. Berikan action untuk symbol button berikut: (action untuk memainkan music) on (rollover) { CobaSound = new Sound(this); CobaSound.attachSound("soul"); CobaSound.start(); on (rollout){ CobaSound.stop(); 3. Pastikan sound yang akan dimainkan telah tersimpan di Library dan memiliki nama linkage:soul 4. Simpan, mainkan Lat53

14 Sedikit modifikasi Lat54 Mencari Posisi Kursor 1. Layer1, buat kotak untuk meletakkan koordinat kursor dengan menggunakan tool teks. Ubah propertis menjadi dynamic teks dan var:posx untuk kotak koordinat x dan var:posy untuk kotak koordinat y. Berikan keterangan untuk posisi x dan y. 2. Layer2, buat 2 buah garis dengan posisi vertikal dan horizontal untuk menunjukkan koordinat mouse. Buat 2 garis tersebut sebagai symbol. 3. Untuk garis vertikal beri action objek: onclipevent(enterframe) { this._x = _root.posx = _root._xmouse; 4. Untuk garis horizontal beri action objek: onclipevent(enterframe) { this._y = _root.posy = _root._ymouse; 5. Simpan, mainkan Lat55 Animasi mengikuti gerakan Mouse 1. Animasi dikerjakan di posisi mouse pointer berada 2. Buat sebuah animasi yang akan mengikuti gerak mouse, misal sebuah bulatan, jadikan symbol, movie clip, beri nama instancenya dari propertis, misal: animouse 3. Di frame objek beri action: startdrag("animouse"); 4. Simpan, mainkan Lat56

15 Modifikasi startdrag("animouse", true); Lat56* Lat57 Dapat dibuat modifikasi. Buat 2 layer. Layer 1 berisi objek yang akan mengikuti gerakan mouse, layer 2 berisi action.