Lembar Latihan Dasar Action Script (Mk.

Multimedia) hal : 1

PENGENALAN DASAR ACTION SCRIPT (PADA FLASH MX)

Action Script merupakan kode pemrograman yang digunakan untuk membuat suatu animasi atau movie menjadi lebih interaktif. Action dibagi menjadi dua golongan yaitu : (1) Frame Action yaitu perintah-perintah tertentu yang diberikan kepada frame; (2) Objek Action yaitu perintah-perintah tertentu yang diberikan kepada objek baik berupa button atau movie clip. Untuk menggunakan action script, terlebih dahulu harus ditentukan (di-select dulu) objeknya, apakah itu suatu Frame, Button, atau Movie Clip, kemudian tuliskan action-nya pada Panel Action yang telah disediakan. Agar lebih jelas, perhatikan tampilan gambar di bawah ini :

Frame yang aktif (sedang di-select)

1 3

Gambar 1. Panel Action Script Keterangan : 1. Perintah-perintah Action Script (Keyword) 2. Action Script Object Manager 3. Action Script Editor (Untuk mengetik kode program)

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 2

ACTION UNTUK NAVIGASI Navigasi pada movie berguna untuk memudahkan user berpindah dari satu bagian ke bagian movie yang lain. I. FRAME ACTION Digunakan pada suatu frame untuk melompat dari sutu frame ke frame yang dikehendaki ataupun menghentikan suatu movie pada frame tertentu. Untuk memudahkan memodofikasi frame action, biasakan memberi nama Label pada frame yang diberi action tertentu. Langkah kerja untuk memberi label pada suatu frame sbb. : 1. Klik frame yang akan diberi nama Label 2. Buka panel properties, isikan nama label frame pada kotak isian (text box) Frame Label. 3. Tekan tombol [Enter] pada keyboard

Gambar 2. Memberi Nama Label pada Frame 4. Pada frame yang diberi nama label akan terlihat tanda bendera. Dan jika frame di perpanjang (misal pada frame 10 klik kanan lalu insert key frame), maka nama Label akan terlihat.

Gambar 3. Nama Label pada Frame

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 3

II. ACTION STOP() dan GOTO() Untuk navigasi, action yang biasa digunakan untuk mengontrol movie adalah Stop(); Play(); dan Goto(); PERCOBAAN-1 : 1. Terlebih dahulu buatlah animasi (motion tween) teks yang membesar di tengah-tengah stage (gunakan menu Modify-Align-Vertical Center & Horizontal Center). Animasi dibuat dari frame 1 s.d frame 10.

Gambar 4. Animasi motion tween teks yang membesar Jalankan Animasi dengan [CTRL]+[ENTER] pada keyboard 2. Ketika dijalankan, Flash akan memainkan movie secara terus-menerus sebelum ada control di dalamnya. 3. Untuk memberi action control pada frame tersebut, lakukan langkah sebagai berikut : a. Klik frame-1 (f-1) pada movie, lalu pada panel properties, berilah nama label pada Frame-nya, misal Teks1. b. Kik frame-10 (f-10) pada movie, lalu aktifkan panel action, kemudian ketikkan pada action script editor yaitu : STOP();

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 4

Gambar 5. Action Script Stop(); Keterangan : o Action script dapat disisipkan juga melalui action script manager, melalui Global Functions- Timeline Control.

Gambar 6. Action Script manager 4. Simpan pekerjaan anda dengan nama Action1Stop PERCOBAAN-2 :

* Ingat!, action Goto mempunyai dua macam perintah dasar yaitu :

o GotoAndPlay(Nama Scene,NomorFrame); o GotoAndStop(Nama Scene,NomorFrame); Untuk percobaan ini, ikuti langkah kerja sbb. : 1. Buka File Baru 2. Pada Layer 1 di frame 1 buat objek dengan tulisan NAMA SENDIRI (Teks Size 36), kemudian buat dua Keyframe (Insert Keyframe) masing-masing di frame ke-10 dan frame ke-20. 3. Klik frame-10, lalu ubahlah teks-nya dari Nama Sendiri dengan STMIK AMIKBANDUNG 4. Klik frame-20, lalu ubahlah teks STMIK AMIKBANDUNG menjadi CYBER BLUE CAMPUS 5. Klik Frame-1, beri Nama Label pada Panel Properties di kotak Frame yaitu Action1 6. Lakukan langkah yang sama seperti point 5 pada Frame-10 dengan Nama Label Action2 dan pada Frame-20 dengan Nama Label Action3 7. Pada frame ke-29, buat Insert Frame

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 5

Hasil kerja :

8. Klik Frame-10 lalu buka panel Action. Klik Global Action-Timeline Control-klik 2x pada baris gotoAndPlay. 9. Lengkapi kode script tersebut menjadi : gotoAndPlay(Action3);

Catatan : o Nama Label harus ditulis dengan diapit tanda petik satu (...) atau dua (..) o Setiap akhir dari kode script diberi tanda titik koma [;] o Parameter dalam kurung dapat juga diberikan nomor framenya saja (jika tidak diberi nama label). Contoh : gotoAndPaly(20) atau penulisan secara lengkap dengan menambahkan Nama Scene-nya : gotoAndPlay(Scene 1,20); 10. Jalankan movie anda dengan [CTRL]+[Enter], amati hasilnya! 11. Jika selesai, rekam pekerjaan anda dengan nama Action2Goto III. BUTTON ACTION Persiapan : Sebelum memulai percobaan, buatlah terlebih dahulu bua buah Objek Button dengan Nama Tombol1 dan Tombol2 sebagai berikut : a. Bentuk Tombol1 : b. Bentuk Tombol2 :

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 6

Petunjuk : 1) Untuk membuat Objek Symbol Button (Tombol1), lakukan langkah kerja sbb. : a. Klik menu Insert New Symbol

b. Isikan parameter data pada kotak dialognya sbb. :

c. Klik Ok d. Muncul tampilan :

e. Buatlah objek pada bagian Frame Up seperti bentuk Tombol1 di atas, lalu klik kanan pada frame UP pilih copy Frame dan paste Frame pada frame Over, Down dan Hit. f. Agar bentuk animasi tombol berjalan, buatlah warna-warna yang berbeda pada objek tombol tersebut pada frame Up, Over dan Down. (Untuk Frame Hit tidak perlu diedit, karena frame ini digunakan sebagai luas area yang dapat di klik pada mouse)

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 7

g. Setelah selesai membuat objek tombol, kembali ke area kerja Scene1.

* *** Kerjakan hal yang sama untuk membuat Tombol2 seperti langkah-langkah di atas.
h. Untuk mengambil symbol Tombol1 yang telah dibuat, aktifkan terlebih dahulu panel Library dengan perintah [CTRL]+[L] pada keyboard.

i. Klik dan drag-lah symbol yang diinginkan dari panel Library ke stage utama.

Drag ke Stage

* *** Untuk mengedit suatu symbol, Klik 2x pada Symbol yang dimaksud.

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 8

PERCOBAAN-3 : Skenario Kasus : Bentuk tampilan movie yang diinginkan sbb. : a. Scene-1 b. Scene-2

Selamat Datang
di STMIK AMIKBANDUNG Jl. Jakarta No. 28 Bandung 40272 Telp. 022-727.1136 Next c. Scene-3 Bagian dari Unit Komputer

PTS INFORMATIKA PERTAMA DI JAWA BARAT & BANTEN (Berdiri Sejak 1983)

Back d. Scene-4

Next

TERIMA KASIH

Back

Next

Back

Home

Ketentuan Proses : 1. Untuk pindah antar Scene diatur dengan symbol Button 2. Objek-objek Teks dianimasikan, misalnya Membesar, Berubah Warna atau Berputar. 3. Khusus pada Scene-3, dibuat invisible button pada bagian-bagian objeknya, sehingga apabila mouse menunjuk suatu bagian dari objek tersebut akan muncul keterangannya seperti : Mouse, Keyboard, Box-CPU, Printer, dst. 4. Sebagai latar belakang, disisipkan gambar/photo hasil olah image/citra Keterangan : Invisible Button adalah objek Tombol yang dibuat hanya pada bagian frame HIT saja (frame Up, Over dan Down dikosongkan). Biasanya dibuat untuk menutupi objek lain yang akan diberi informasi/ dianimasikan. LANGKAH KERJA : A. Persiapan : 1. Buat dulu Symbol-symbol yang diperlukan, dengan perintah Insert-New Symbol. Ingat! Sesuaikan behavior-nya apakah objek itu berupa Movie clip (animasi umum), Button (khusus animasi tombol) atau Graphic (objek diam/background). 2. Buat Scene sebanyak empat buah (klik menu Insert-Scene) Catatan : Untuk pindah/mengaktifkan Scene gunakan perintah dari menu Window-Design Panels-Scene atau melalui icon papan action.

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 9

Gambar p.1 Icon Papan Action

Gambar p.2 Panel Scene dari menu WindowsDesign Panels-Scene 3. Buat objek-objek sesuai rancangan Scene.

* Ingatlah, bahwa kode Action Script yang digunakan yaitu :

- Pada setiap awal frame (Frame 1) di setiap Scene diberikan perintah : Stop(); - Pada setiap symbol Button (Tombol) diberi action/perintah : On (release) { gotoAndPlay(NamaScene,NomorFrame); } - Efek pada Invisible button, diproses dibagian frame Over atau Down (dibuat pada layer baru) B. Action Script Untuk Pidah Scene 1. Setelah semua symbol yang diperlukan dibuat, aktifkan Scene-1 2. Biasakan membuat layer baru untuk menempatkan setiap objek yang berbeda.

Dalam contoh ini, objek Teks ditempatkan di Layer 1 dan objek (symbol) tombol ditempatkan di Layer 2. Anda boleh saja menempatkan setiap baris Teks di layer yang berbeda-beda.

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 10

2. a. Buat layer baru pada Scene 1. Klik frame-1 pada Scene 1 di layer baru tersebut, dan buka panel Action lalu tuliskan kode script : Stop();

b. Aktifkan (klik) objek symbol Tombol1 (Button Next) yang ada di Scene 1, kemudian buka panel Action dan ketik kode script sbb. : On (release) { gotoAndPlay(Scene 2,1); }

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 11

3. Aktifkan Scene 2, lalu buatlah layer baru di Scene 2 tersebut. 4. Klik frame-1 pada Scene 2 dan buka panel Action lalu tuliskan kode script : Stop(); 5. Jalankan movie Anda dengan [CTRL]+[Enter] pada keyboard. Cobalah klik tombol Next. Jika berhasil maka Scene 2 akan tampil. LATIHAN : *** Lengkapi, kode action pada setiap symbol button untuk Scene-scene lainnya seperti langkah di atas. C. Membuat INVISIBLE BUTTON 1. Setelah selesai membuat script yang lengkap untuk setiap Scene pada latihan di atas, buka Scene 3 ( yang berisi objek bagian unit komputer). 2. Buatlah terlebih dulu layer-layer baru untuk membuat bagian-bagian invisible button sesuai dengan banyaknya bagian dari objek yang akan kita animasikan. Dalam contoh ini, dibuat layer-layer baru sebanyak 6 layer dan di-rename menjadi layer Box-CPU, Monitor, Mouse, Keyboard dan Printer serta layer Action untuk menempatkan action script frame.

Gambar c.1. Layer-layer baru untuk invisible button 3. Agar objek gambar komputer yang telah kita buat menjadi satu kesatuan (dalam contoh dibuat di Layer 2), caranya select (blok) semua objek tersebut lalu group dengan [CTRL]+[G] pada keyboard atau melalui menu Modify-Group. 4. Selanjutnya, aktifkan (klik) layer Box-CPU kemudian buatkan objek kotak yang menutupi bagian gambar CPU-nya saja pada gambar komputer tadi.

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 12

5. Setelah dibuat objek kotak yang menutup gambar CPU tadi, dalam keadaan masih di-select, konversi objek kotak tersebut menjadi symbol button dengan cara klik kanan, lalu pilih sub menu Convert to Symbol sampai muncul kotak dialog (panel) sbb. :

* Isikan Nama Tombolnya, dan pilih behavior Button. Klik Ok.

6. Mengedit symbol TombolCPU menjadi Invisible Button. a. Klik 2 x pada symbol TombolCPU b. Muncul area editor TombolCPU

c. Geser (drag) objek yang ada di bagian frame UP ke frame HIT

Drag ke bagian HIT

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 13

d. Kembali ke Scene (klik Scene 3). Jika proses benar, hasilnya objek akan terlihat menjadi berwarna biru transparan.

7. Memberi Animasi (movie Clip) pada bagian objek TombolCPU. a. Buat symbol baru dengan type movie clip. Klik menu Insert-New Symbol

Gbr. Menu Insert New Symbol

Gbr. Panel New Symbol

b. Isi teks pada Name dengan nama symbol TeksTombolCPU c. Behavior dipilih Movie Clip. Klik OK d. Membuat animasi Teks sebagai keterangan untuk box CPU : d.1. Misal Teks yang akan dibuat adalah : Bagian ini disebut dengan Box-CPU atau Casing komputer. Di dalam casing ini terdapat komponen-komponen utama untuk menjalankan kinerja komputer dalam memproses pekerjaan kita. d.2. Jenis animasi dibuat dari kotak mengecil lalu membesar dan diam. Catatan : - Jenis teks dibuat Dynamic Text dan Multiple serta No Border. Diatur melalui properties-nya.

Agar teks yang dianimasikan tidak menyesuaikan besar kotaknya, ubah dari bentuk objek Teks Dynamic menjadi bentuk objek Shape dengan perintah Break Apart ( [Ctrl]+[B] pada keyboard atau melalui menu Modify-Break Apart). Caranya blok objek teks tersebut, lalu [CTRL] + [B]. Catatan : Objek teks yang sudah berbentuk shape tidak akan bisa diedit sbg teks biasa lagi.

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 14

8. Setelah animasi teks selesai, gunakan animasi tersebut pada symbol button TombolCPU. Caranya : a. Aktifkan layer Box-CPU, klik 2x pada symbol TombolCPU-nya (masuk ke mode edit). b. Pada mode edit symbol tersebut, buat layer baru untuk menempatkan animasi teks tadi yang disimpan pada frame OVER.

Drag dari Lybrary (Ctrl+L) ke stage edit symbol TombolBoxCPU dan tempatkan di frame OVER.

* Jangan lupa sebelum memasukkan symbol animasi, pada frame OVER buat frame kosong dulu
dengan cara : klik kanan pada frame Over, lalu pilih Insert Blank keyframe 9. Setelah pekerjaan selesai, kembali ke Scene, dan jalankan movie Anda. Coba pindah ke Scene 3 lalu tunjuk bagian gambar Box-CPU. Jika berhasil akan muncul animasi teks yang berisi keterangan gambar tersebut. 10. Sebagai Latihan, lengkapi keterangan bagian-bagian gambar lainnya dengan cara yang sama seperti langkah membuat animasi teks pada box-CPU *** Selamat Berkreasi *** Kontak : Rudi Kurniawan rudem_226@yahoo.com 0813.20720.169

Lembar Latihan Dasar Action Script (Mk. Multimedia) hal : 15

TUGAS AKHIR MK. MULTI MEDIA per KELOMPOK (3-5 orang) Waktu 2 (dua) Minggu Pasca UAS Dosen : Rudi Kurniawan, S.Kom Bahan ajar merujuk buku Biologi SMP sebenarnya, yang dijadikan sebagai prototype CD Interaktif Seri Belajar Biologi untuk tingkat SMP. Tema yang akan diambil bebas. Contoh Kasus : Anda diminta untuk membuat pemodelan CD Interaktif pembelajaran Biologi untuk SMP mengenai pengenalan bagian dari tumbuhan dan hewan/serangga. Petunjuk dan langkah kerja : 1. Buat sket interface hal. depan di Corel Draw ukuran 800 x 600 pixel, misal tampilannya ssb. (Kembangkan sesuai kreatifitas Anda) : 1 Ket. 1 = HEADER 2 = MENU 3 = CONTENT 4 = FOOTER

4 2. Ekspor hasil kerja tersebut ke format JPG atau GIF dan hasilnya di edit di Photoshop. (Diberi aksesoris image/efek filter agar tampilan menjadi menarik). 3. Rekam hasil kerja di Photoshop tsb. ke format Web (File- Save for Web). 4. Gunakan file objek tersebut sebagai background di Macromedia Flash. Agar ukurannya sesuai, ubah property stage/page setup width=800, height=600. 5. Buat 3 buah Scene baru yang di link dari symbol button dari bagian MENU. Misalnya button [INFO] link ke Scene 2 yang berisi Data Identitas Anda, button [TUMBUHAN] link ke Scene 3 yang berisi animasi Invisible Button informasi dari bagian tumbuhan, button [HEWAN] link ke Scene 4 yang berisi animasi Invisible Button informasi dari bagian Hewan/Serangga Kupu-kupu dst. 6. Di bagian HEADER diisi dengan symbol animasi/ Movie Clip misalnya : - SELAMAT DATANG - di WAHANA BELAJAR DIGITAL - PELAJARAN BIOLOGI untuk SMP ( animasinya ketiga movie clip di atas muncul secara bergantian) 7. Bagian CONTENT diisi dengan informasi umum tentang CD Interaktif ini atau Alamat Perusahaan/Penerbit yang memproduksinya. 8. Bagian FOOTER diisi animasi Nama Kelompok Anda dan Kontaknya (email/HP). *** Selamat Berkarya ***
Kontak : Rudi Kurniawan rudem_226@yahoo.com 0813.20720.169