LAP

“

Dibimbing oleh

UNIVE

JURU

PRODI S1 PEN

APORAN PRAKTIKUM

MULTIMEDIA

MODUL X

“ACTION SCRIPT”

leh Ibu Ayung Candra Padmasari, S.pd, M.T.

Oleh :

Bagus Nariotomo

130533608136

S1 PTI 2013 E

ERSITAS NEGERI MALANG

FAKULTAS TEKNIK

RUSAN TEKNIK ELEKTRO

NDIDIKAN TEKNIK INFORMATIKA

Maret, 2015

A

A. TujuanPraktikum

• Memahami bahasa program Action Script 2.0 yang digunakan dalam Flash.

• Memahami dan menerapkan Action Script 2.0 untuk membuat animasi.

B. Perangkat yang digunakan

• Laptop / PC

• Aplikasi Adobe Flash

C. DasarTeori

1. Pengenalan Action Script

Pada Flash terdapat fitur Action Script yang merupakan bahasa program yang

digunakan oleh Flash. Action script dapat digunakan untuk membuat animasi agar

lebih interaktif sehingga pengguna dapat berperan lebih aktif menggunakan

keyboard dan atau mouse untuk melompat ke movie lain, memindahkan objek,

memasukkan informasi pada form, mengontrol objek, video, suara, dan lain-lain.

Pada dasarnya Action Script sama seperti bahasa program Java Script, jadi bagi

kalian yang sudah tidak asing dengan Java Script maka akan lebih mudah dalam

memahami Action Script ini.

2. Dasar-Dasar Action Script 2.0

Dalam action script anda harus memahami tiga macam komponen untuk

membuat animasi menjadi lebih interaktif, yaitu :

� Event: Merupakan peristiwa yang terjadi untuk memicu sebuah aksi pada

objek.

� Action: Merupakan aksi atau kerja yang dikenakan atau diberikan pada suatu

objek.

� Target: Merupakan objek yang dikenai oleh aksi.

a. Behavior

Behaviors merupakan ActionScript siap pakai (tanpa Anda perlu menuliskan

kode-kode ActionScript) yang dapat diaplikasikan pada suatu objek. Fungsi

utamanya adalah untuk mengontrol objek-objek tersebut agar terlihat lebih

fleksibel dan interaktif. Untuk menampilkan Panel Behaviors, klik menu

toolbar Window � Behaviors. Di dalam Behaviors, terdapat event untuk

mouse dan keyboard.

b. Tipe data

Variabel adalah suatu penampung data. Penulisan variable ada aturannya.

Antara lain:

1) Tidak boleh menggunakan variabel yang sama dengan keyword atau literal

dari Action Script sendiri, contoh true, false, null, dll.

2) Variabel harus unik, artinya nama variabel yang satu harus beda dengan

nama variabel yang lainnya, contoh: mulmed1, mulmed2.

c. Operator

Operator digunakan untuk memanipulasi variabel. Macam-macam operator :

3. Tata letak koordinat pada Stage Adobe Flash

Koordinat dalam flash mirip dengan koordinat kartesius, namun agak

berbeda dalam posisi positif dan negative garis Y. Perhatikan gambar berikut:

Pada gambar koordinat stage Adobe Flash terlihat posisi positif dan negative

garis Y terbalik. Semakin ke atas nilai Y akan semakin kecil, dan sebaliknya,

semakin kebawah nilai Y semakin besar.

4. Menggunakan Action Script 2.0

a. Membuat link dengan button

Link yang dimaksud disini adalah melompat ke frame yang sudah di-set dalam

perintah.

b. Mengetahui posisi koordinat objek

c. Moving Object

Yaitu konsep memindahkan kedudukan suatu objek berdasarkan koordinatnya.

Dalam hal ini diterapkan pada objek dengan type symbol movie clip. Property

movie clip yang digunakan adalah property koordinatnya, yaitu ._x dan ._y.

Dot (.) digunakan untuk:

- Menunjukan property dari method objek (Movie Clip).

- Mengenali target path suatu movie clip atau variable

- Contoh : nama_mc._x atau nama_mc._y

D. Latihan

1. Membuat Flash-KTP data Pribadi. Dengan ketentuan:

- Maksimal terdiri dari 4 frame,

- Terdapat minimal 3 button,

- Terdapat animasi Char/Avatar pribadi (bisa menggunakan tugas pada modul

sebelumnya).

Penjelasan :

Tampilan flash dibawah ini memiliki 3 button yang terdiri dari :

- Tombol home yang menampilkan logo UM.

- Tombol About yang menampilkan avatar dan data diri tentang saya.

- Tombol Friend adalah gambar kebersamaan saya dengan teman-teman.

Layer :

Tampilan diatas terdiri dari 4 layer diantaranya :

- Layer tombol berisi 3 deklarasi button yang dibuat menggunakan rectangle

tool kemudian diberi warna serta tulisan yang dibuat menggunakan text

tool.

Ketiga tombol tersebut di convert to symbol type : button dan diberi nama

“symbol 1, symbol 2, dan symbol 3.

� Untuk symbol 1 adalah tombol About yang berisi action script : on (release) {

gotoAndStop(5);

}

Maksudnya adalah tombol about ditekan, akan menuju frame ke 5.

� ntuk symbol 2 adalah tombol friend yang berisi action script :

on (release) {

gotoAndStop(10);

}

Maksudnya adalah tombol friend ditekan akan menuju frame ke 10.

Yang berisi gambar kebersamaan saya dengan teman-teman.

� Untuk symbol 3 adalah tombol home yang berisi action script :

on (release) {

gotoAndStop(1);

}

Maksudnya adalah tombol home ditekan, akan menuju frame ke 1.

- Layer gambar terdiri dari 3 titik frame, yaitu :

� Frame ke-1 adalah titik default tampilan flash berhenti/dimulai.

Berisi action script : stop();

� Frame ke-5 terdapat data diri dan avatar saya.

� Frame ke-10 terdapat gambar teman-teman saya.

- Layer BOX adalah background untuk avatar dan data diri yang dibuat

dengan rectangle tool.

� Terdapat pada frame ke-5 tempat avatar dan data diri.

� Terdapat pada frame ke-10 tempat foto teman-teman.

- Yang terakhir adalah layer bg adalah layer untuk background yang di

import dari PC. Dengan diberi garis merah horizontal menggunakan line

tools dan garis solid diganti dengan custom dan diatur warna merah.

2. Buatlah animasi mobil bergerak. Dengan ketentuan:

- Mobil bergerak ketika ditekan tombol “Gas” dan berhenti ketika ditekan

tombol “Rem”,

- Ketika mobil melebihi batas akhir maka mobil akan langsung berbalik arah.

Dan ketika smpai pada garis awal maka mobilakan berbalik arah lagi.

Tampilan :

Simulasinya adalah mobil bergerak mulai dari titik (sebalah kiri) bergerak

maju ke sebelah kanan sampai mentok (tanda stop), kemudia putar balik(arah kiri)

dan bergerak kedepan hingga mentok kemudian putar balik lagi kea rah kanan

(posisi awal objek mobil bergerak), begitu seterusnya berulang, Karena tidak

diberi action script stop. Untuk tombol rem adalah tombol pause yang jika ditekan

mobil akan berhenti dan jika ditekan gas, mobil akan bergerak kembali.

Penjelasan :

Untuk membuat tamp

adalah sebagai beriku

- Layer monster

dan oval tool s

� Frame

� Frame

� Frame

posisi d

� Frame

- Layer buntu ad

oval tool, line

- Layer jalan ad

line tool dan re

pilan flash seperti diatas menggunakan 7 layer di

ut :

ter berisi objek mobil yang dibuat menggunakan re

serta berisi 4 buah frame utama dan diberi motio

e ke-1 adalah titik dimana objek mobil berawal

e ke-20 adalah titik objek mobil berakhir

e ke-21 adalah titik objek mobil berbalik arah dan

i dibawah posisi sebelumnya

e ke-40 adalah titik objek mobil berakhir

adalah layer untuk membuat tanda stop yang dibu

e tool dan text tool.

adalah layer untuk membuat objek jalan raya yag

rectangle tool.

diantaranya

rectangle tool

tion tween:

an berada pada

buat dengan

g dibuat dari

- Layer kota adalah background kota yang diambil dan di import dari

directory PC.

- Layer start berisi tombol gas yang dibuat dari rectangle tool dan text tool

kemudian di convert to symbol type : button dengan deklarasi action script on(release){

play();

}.

Tombol gas memiliki 3 frame yaitu :

� Untuk frame Up yakni frame asli dari tombol gas yang memiliki

warna (berlaku juga untuk tombol rem).

� Untuk frame Over yakni frame dari tombol gas yang memiliki

warna jika mouse diarahkan ke tombol gas (berlaku

juga untuk tombol rem).

� Untuk frame Down yakni frame dari tombol gas yang memiliki

warna jika nantinya tombol ditekan (berlaku juga untuk

tombol rem).

- Layer pause berisi tombol rem yang dibuat dari rectangle tool dan text tool

kemudian di convert to symbol type : button dengan deklarasi action script on(release){

stop();

}.

- Layer created adalah layer untuk mengetahui si pembuatnya yaitu saya,

yang dibuat dari oval tool dan text tool.

E. Tugas Rumah

1. Buat animasi sekreatif mungkin seperti latihan no.2. Dengan ketentuan

tambahan:

- Nilai perubahan gerak objek dapat di-set melalui InputBox (inputBox hanya

dapat diisi angka [0 sampai 9]).

Tampilan :

Penjelasan :

Untuk membuat tampilan diatas adalah mengadopsi dari pekerjaan sebelumnya,

hanya saja disini menggunakan inputan angka antara 0-9 pada kolom yang

disediakan untuk mendeklarasikan kecepatan mobil bergerak maju ke arah kanan,

dan agar mobil mulai bergerak maka tombol gas harus ditekan. Banyak layer dan

frame yang dibuang dan hanya menyisahkan layer seperti tampilan dibawah ini :

Langkah – langkah pe

- Layer mobil b

angka 1-9 yan

� Seleksi

petik) s

� Seleksi

� Masuk

� Buatlah

� Seleksi

kolom

� Buatlah

tanda p

� Buat k

� Seleksi

tombol

masing

� Pada m

instanc

� Inputka

denganvar po

_root.

m =

}

_root.

m=0

pembuatannya sebagai berikut :

berisi objek mobil, tombol gas dan tombol rem, s

ang mendeklarasikan kecepatan bergerak objek m

ksi objek mobil, lalu tekan F8. Masukkan “mobil”

) sebagai name dan movieclip sebagai type.

ksi movieclip mobil, lalu buka panel properties.

ukkan “mobil” (tanpa tanda petik) pada kolom ins

lah teks kosong menggunakan text tool- input text

ksi input text dan buka panel properties, masukkan

m variable pada properties.

lah satu static text bertuliskan “Input Kecepatan [0

a petik). Letakkan di samping input text tadi.

kotak tanpa fill di sekeliling input text.

ksi tombol gas dan rem, lalu tekan F8 pada masing

ol. Masukkan “gas dan rem”(tanpa tanda petik) p

ng tombol sebagai name dan button sebagai type.

menu properties di masing-masing tombol beri na

nce name dengan nama “gas” dan “rem” (tanpa ta

tkan script dibawah ini kedalam frame 1 pada laye

an cara tekan F9. osx:Number = 0;

.gas.onRelease = function(){

= int(posx);

.rem.onRelease = function(){

0;

, serta inputan

mobil.

”(tanpa tanda

nstance name.

xt.

an “posx” di

[0-9]” (tanpa

ing-masing

pada masing-

nama pada

tanda petik).

yer mobil

}

mobil.onEnterFrame = function(){

if (m>=0 && m<=9){

_root.mobil._x += (m);

if(_root.mobil._x>=500){

_root.mobil._x = 0;

}

if(_root.mobil._x<0){

_root.mobil._x = 500;

}

}

else{

_root.mobil._x += (0);

}

}

- Layer jalan berisi objek jalan yang dibuat dari rectangle tool dan line tool.

- Layer kota berisi gambar kota-kota untuk background yang diambil dari

directory PC.

- Layer created adalah layer untuk mengetahui si pembuatnya yaitu saya,

yang dibuat dari oval tool dan text tool.

F. Kesimpulan

� Dalam kegiatan praktikum kali ini menerapkan action script agar animasi yang

dibuat dapat lebih interaktif dengan adanya control keyboard ataupun mouse.

� Dalam percobaan yang dilakukan diatas menggunakan beberapa convert to symbol

diantaranya button, movie clip, ataupun graphic.

� Untuk behavior yang dipakai hampir semuanya menggunakan onRelease yang

artinya Kondisi ketika kursor mouse berada di atas tombol(button) dan mouse

sudah ditekan dan dilepaskan.

� Percobaan diatas juga mengajarkan bagaimana cara memindahkan objek baik

menggunakan action-movie ataupun action-frame.

� Mengetahui tataletak koordinat dengan acuan koordinat x dan y yang terdapat

pada property.

� Untuk script dalam mengetahui koordinat menggunakan deklarasi ._x dan ._y :

Dot (.) digunakan untuk:

� Menunjukan property dari method objek (Movie Clip).

� Mengenali target path suatu movie clip atau variable.

G. Daftar Rujukan

- Asisten Dosen Universitas Negeri Malang. 2015. “Modul X Praktikum Multimedia

tentang Action Script”. Malang : Universitas Negeri Malang.

- (http://zorc-colozha.blogspot.com/2010/10/koordinat-dalan-flash-actionscript-

20.html), diakses pada 16 Maret 2015.