Dasar Action Script Flashmx

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 :

1
2
3
Frame yang aktif (sedang di-select)

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
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();

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
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. J alankan movie anda dengan [CTRL]+[Enter], amati hasilnya!
11. J ika 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 :

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)
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.
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

PTS INFORMATIKA PERTAMA
DI JAWA BARAT & BANTEN

(Berdiri Sejak 1983)

Back Next

c. Scene-3 d. Scene-4

Bagian dari Unit Komputer

Back Next

TERIMA KASIH

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.


Gambar p.1 Icon Papan Action

Gambar p.2 Panel Scene dari menu Windows-
Design 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.

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);
}


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. J alankan movie Anda dengan [CTRL]+[Enter] pada keyboard. Cobalah klik tombol Next. J ika
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.

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

d. Kembali ke Scene (klik Scene 3). J ika 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 :

d.2. J enis animasi dibuat dari kotak mengecil lalu membesar dan diam.
Catatan :
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.
- J enis 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.

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.

J angan 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. J ika 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

TUGAS AKHIR MK. MULTI MEDIA per KELOMPOK (3-5 orang)
Waktu 2 (dua) Minggu Pasca UAS
Dosen : Rudi Kurniawan, S.Kom

Membuat prototype CD Interaktif. 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) :

2 3
4
1 Ket.
1 =HEADER
2 =MENU
3 =CONTENT
4 =FOOTER

2. Ekspor hasil kerja tersebut ke format J PG 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 BELAJ AR DIGITAL
- PELAJ ARAN 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

Dasar Action Script Flashmx

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dasar Action Script Flashmx

Diunggah oleh

Hak Cipta:

Format Tersedia

Lembar Latihan Dasar Action Script (Mk.

Anda mungkin juga menyukai