pengenalan action script

Introduction

Belajar flash terasa tidak lengkap jika tidak belajar action script. Ini e-book pertama yang saya

buat, e-book ini free alias gratis dikhusus kan untuk anda yang baru mengenal action script. Saya

mencoba menyuguhkan suatu e-book yang lengkap dengan tampilan gambar dan penjelasan terhadap

script yang anda ketik, ini dimaksudkan supaya anda mengerti apa fungsi dari script-script tersebut.

Tidak seperti buku atau e-book kebanyakan yang hanya mengajarkan anda mendesign setelah itu

muncul kata-kata ketik script dibawah ini tapi setelah itu ia tidak menjelaskan mengapa kita harus

menulis script ini dan apa fungsinya.

Pengenalan Action Script 2.0 adalah e-book kedua yang saya ketik dan hanya dikerjakan selama

3 hari. Saya tahu pasti akan banyak kekurangan di dalamnya. Saya sangat mengharapkan kritikan atau

saran anda agar pada penulisan e-book selanjutnya saya bisa meminimalis kekurangan saya. Untuk kri-

tikan anda boleh kirim e-mail atau sms pada kontak yang ada di website saya. Anda di perbolehkan un-

tuk mencetak, mendistribusi-kan atau menjual kembali dengan harga terserah Anda dan simpan 100%

keuntungannya! Atau Anda diperbolehkan untuk meng-upload ke website anda untuk meningkatkan

traffic dengan memberikan eBook ini secara cuma-cuma. Atau terserah Anda. Anda harus ingat bahwa

Anda dilarang mereproduksi atau memodifikasi eBook ini dengan jenis atau bentuk apapun!!! Hanya

itu. Terima Kasih Semoga e-book ini bisa bermanfaat sebagaimana yang harapkan.

Novri Oov Auliansyah

Tahap 1

Pengenalan Action Script 2.0

Untuk mengetik Action script anda harus menempatkan pada panel action, jika tidak terlihat

panel action di lembar kerja Flash Document klik Window > Action atau tekan F9 maka di lembar

kerja anda akan terlihat seperti Gambar 1.0.

Gambar 1.0

Lembar kerja untuk mengetik Action Script

Ketika anda mengetik script anda akan menemukan warna yang berbeda-beda pada panel action

seperti yang terlihat pada gambar 1.1.

Gambar 1.1

Warna warni pada Action script 2.0

Ini bertujuan supaya anda mudah membedakan arti script yang anda ketik dan memudahkan

anda jika terjadi kesalahan pada script yang anda ketik. Untuk lebih jelasnya mengenai warna-warni di

panel action coba anda klik Edit > Reperence atau tekan ctrl+U, pada panel category pilih Action

script. Sekarang anda bisa melihat arti bahkan merubah warna-warna tersebut.

Tahap 2

TraceSekarang langsung saja kita masuk pada sebuah kasus. Untuk perkenalan, kasus pertama yang

akan kita pelajari adalah mengmbuat pesan di layar output. Syntak pertama yang akan kita gunakan

adalah trace. Trace digunakan untuk menampilkan pesan pada jendela output pada flash. Untuk lebih

jelasnya mari kita mencobanya :

syntak : trace (pesan)

Contoh : trace (mencoba trace)

Gambar 1.2

pesan trace dalam Jendela output

lalu tekan Ctrl+Enter untuk mengetes movie clip atau klik contol > Test movie.

Jika jendela Output tidak terlihat tekan F2. Trace juga mendukung untuk di jalankan berkali-kali,

sekarang untuk mencobanya kita akan mengunakan angka sebagai media sekalian mencoba

menggunakan operator berhitung.

Contoh script:

n = 4;

trace(n+1);

//hasil di outputnya : 5

trace(n*3);


trace(n-1);


trace(n/2);


trace(n%3);


Sekarang Tes movie anda!!.

Hasil yang terlihat pada layar output hanya angka-angka hasil operator dalam trace saja.

Sedangkan semua kalimat yang di depannya diberi tanda // tidak akan berpengaruh pada layar output.

Kenapa ? karena setiap kalimat yang didepannya diberi tanda // melambangkan sebuah komentar

sehingga ketika di eksekusi kalimat-kalimat tersebut tidak akan berpengaruh.

Operator Kererangan Fungsi+ Jumlah Menjumlah nilai- Pengurangan Mengurangkan nilai* Kali Mengalikan nilai/ Bagi Membagi nilai

% Modulo Menampilkan sisa

pembagian nilai

Tahap 3

Struktur Kondisi

Pada tahap ini kita akan mempelajari lagi trace tetapi dengan tingkat yang sedikit lebih sulit.

Kali ini kita menambahkan Struktur kondisi pada fungsi trace.

Struktur kondisi adalah sebuah fungsi dimana perintah hanya akan dijalankan atau dieksekusi

jika kondisi yang kita berikan terpenuhi. Pada tahap ini saya akan mempraktekan struktur kondisi if dan

else, saya harap anda akan benar-benar mengerti fungsi dari kedua syntak tersebut karena kita akan

bertemu kedua syntak ini pada tahap-tahap berikutnya.

IF

Jika anda sudah pernah belajar bahasa pemrograman sebelumnya anda pasti sudah tidak asing

dengan kata ini. Sesuai dengan artinya if adalah Jika, jadi apabila kondisi yang terdapat dalam if

terpenuhi perintah akan dijalankan.

Penjelasan dari if sebagai berikut:

if (kondisi) {

perintah }

contoh: n = 3;

if (n

ELSE

Else adalah syntak untuk perintah dimana kondisi if tidak terpenuhi.

Contohnya :

n = 2

if (n + 5= =8) {

trace(n tambah 5 adalah 8)

}

else {

trace(n tambah 5 bukan 8)

}

Hasil di output adalah n tambah 5 bukan 8, ini terjadi karena syarat kondisi pertama tidak

terpenuhi sehingga dilanjutkan pada syarat kondisi selanjutnya. Kenapa n + 5 = = 8 ??. Tanda = =

berarti sama dengan, sedangkan = berarti nilai yang diberikan. Misalkan n=3, berarti nilai n adalah 3.

TAHAP 4

Pengulangan

FOR

For merupakan salah satu perintah untuk melakukan eksekusi pengulangan. Eksekusi

pengulangan pada for akan terus berjalan sampai syarat terpenuhi, sehingga jika anda melakukan

kesalahan pada penulisan script, pengulangan tersebut akan terus berjalan.

Script : for (kondisi awal; kondisi berhenti; penjumlahan/pengurangan) {

perintah;}

contoh : for (a=0; a

WHILE

Intruksi while hampir mirip seperti intruksi for.

Syntaknya :

Kondisi awal

While ( kondisi syarat ) {

Perintah

}

Contoh : a = 2;

while (a

TAHAP 5

Fungsi

Fungsi merupakan perintah yang terdiri dari kumpulan statement, yang digunakan dengan cara

melakukan pemanggilan terhadap nama dari fungsi tersebut. Bentuk subprogram ini sering di gunakan

karena akan memudahkan pekerjaan pemograman. Dalam melakukan delegrasi fungsi, nama harus di

mulai dengan huruf dan tidak boleh ada spasi. Nama fungsi case sensitive ( memperhatikan huruf besar

dan kecil ).

Untuk memanggil suatu fungsi, anda cukup memanggil nama fungsi tersebut.

Contoh: function coba ( )

{trace (memanggil fungsi coba)

}

Coba ( )

TAHAP 6

Array

Array merupakan kumpulan data berurut yang bisa di ubah atau dimodif. Dalam Action Script 2.0 ada

bermacam-macam jenis Array dan saya akan mencoba menjelaskan satu per satu :

mulanya kita buat dulu data array contohnya:

Data yang kita akan masukan adalah : Ina,Ini,Inu,Ino

scriptnya adalah

Arrayku = new Array (Ina,Ini,Inu,Ino)

trace (Arrayku)

tes movie (tekan Ctrl + Enter)

Array akan tampil di output

Concat

Sekarang kita akan menambahkan data di belakang arrray yang baru kita buat dengan

menggunakan concat. Misalkan kita mau menambahkan kata Ana di Array yang barusan kita buat.

Ubah script trace (Arrayku) jadi trace (Arrayku.concat(ana))


trace (Arrayku.concat(ana))

tes movie clip lihat hasilnya, jangan lupa sebelum menekan Ctrl + Enter teriak Simsalabim...

Join

Join juga berfungsi untuk menambah data. Tapi data yang dihasilkan berada di belakang data

dalam Array.

Contoh : Arrayku = new Array (Ina,Ini,Inu,Ino)

trace (Arrayku.join(+))

Maka hasil di output jadi

Ina+Ini+Inu+Ino

Length

Digunakan untuk menghitung jumlah data dalam array.

Script : Arrayku = new Array (Ina,Ini,Inu,Ino)

trace (Arrayku.Length)

output akan menghasilkan 4

Pop

Mengambil data paling terakhir di array atau menghapus data array yang paling belakang.

sintaknya:Arrayku = new Array (Ina,Ini,Inu,Ino)

trace (Arrayku.pop( ) )

output akan menghasilkan : ino

coba sekarang anda ubah scriptnya :


Arrayku.pop()

trace (Arrayku)

output akan menghasilkan : Ina,Ini,Inu

Push

Kebalikan dari pop, Push menambahkan satu data di belakang array

Script: Arrayku = new Array (Ina,Ini,Inu,Ino)

Arrayku.push(Ine)

trace (Arrayku)

Shift

Shift bisa digunakan untuk mengambil awal data dari array


trace (Arrayku.shift())

Atau menghapus satu data di depan array.

Script :Arrayku = new Array (Ina,Ini,Inu,Ino)

Arrayku.shift()

Trace(Arrayku)

Reverse

Digunakan untuk membalik data di dalam array


trace (Arrayku.reverse())

Output : Ino,Inu,Ini,Ina

Unshift

Kebalikan dari Shift, unshift digunakan untuk menambahkan data di depan array


Arrayku.unshift(Ine)

trace (Arrayku)

output : Ine,Ina,Inu,Ino

TAHAP 7

Property

Setelah kita berputar-putar menggunakan trace sebagai output, pada tahap ini kita akan

menggunakan objek sebagai media dan tampilan output yang kita jalankan sudah berbentuk animasi

yang bisa di buat menjadi tampilan html.

Jika kita sudah bermain pada objek otomatis kita akan bertemu dengan istilah property. Istilah

property berarti kepemilikan, Sebuah obyek dalam flash yang berupa movieclip, button, sound

memiliki property seperti panjang, warna, kordinat dan lain-lain. Di bawah ini saya akan menjelaskan

beberapa property.

_x = merupakan sumbu x ( horizontal )

_y = merupakan sumbu y ( vertikal )

_xscale = ukuran horizontal

_yscale = ukuran vertical

_rotation = posisi kemiringan

_alpha = Transparasi

Gambar 7.1

Kordinat pada flash

_x atau posisi sumbu horizontal semakin besar nilainya maka objek akan semakin ke kanan

Sedangkan jika nilai _x semakin kecil atau semakin besar ( min ) nya maka objek akan lebih ke kiri.

Supaya lebih jelas saya akan mendemokan sebuah contoh menggerakan objek ke kiri dan ke kanan.

Mulanya anda buat sebuah objek, misalnya lingkaran dengan menggunakan oval tool. Tekan

Shift pada keyboard saat membuat lingkaran agar lingkaran jadi proporsional, lalu klik kanan objek

lingkaran yang baru kita buat, klik convert to symbol. Lalu rubah menjadi movie clip pada panel

convert to symbol. Setelah dirubah menjadi movie clip masuk ke panel action.

Gambar 7.2

Merubah objek menjadi Movie clip

pastikan anda berada pada movie clip. Lalu ketik script di bawah ini.

onClipEvent (enterFrame) {

_x = _x+3;

}

Tekan Ctrl+Enter untuk tes movie.

Gambar 7.3

Perhatikan Ruang tempat anda mengetik script

Penjelasan --> OnclipEvent adalah sebuah script untuk movie clip, enterFrame nama eventnya ketika

movie clip dijalankan. _x property horizontal +3 nilai pergerakan objek, semakin besar nilai pengger-

aknya semakin cepat objek bergerak .

Sekarang kita akan mencoba menggerakan objek ke kiri. Buat lagi sebuah objek pada layar ker-

ja flash anda. Ubah objek yang baru anda buat menjadi movie clip, ulangi tahap-tahap diatas. Lalu

ketik script diatas pada panel action objek baru, tapi rubah + menjadi ( _x=_x-3). Sekarang tes

movie.

Lalu bagaimana caranya menghentikan gerakan movie clip kita supaya tidak terus berjalan ke

kanan atau kiri lalu pergi dan menghilang begitu saja.


if ( _x

Untuk property _rotation dan _alpha silahkan anda berkreasi sendiri, karena saya rasa anda telah

mengerti semua arti dari syntak diatas anda tinggal merubah nama property yang akan dirubah atau di-

manipulasi. Jika anda telah mencoba property _rotation dan _alpha saya sarankan sekarang anda mebu-

at movie clip lebih dari satu dengan fungsi property yang berbeda. Misalkan 3 buah lingkaran dengan

warna yang berbeda-beda. 1 lingkaran bergerak ke kiri lalu lingkaran kedua bergerak ke bawah

7.1 mengerakan movie clip menggunakan keyboard

Pada bagian kali ini kita akan membuat sebuah movie clip yang gerakannya di control oleh tan-

da panah di keyboard. Buatlah sebuah objek lalu ubah objek tersebut menjadi movie clip, misalnya kita

mau membuat objek lingkaran. Klik objek oval pada tool atau tekan O pada keyboard, lalu rubah objek

lingkaran yang baru kita buat menjadi movie clip dengan cara klik kanan objek tersebut lalu klik Con-

vert to symbol atau klik objek lalu klik edit > convert to symbol atau pake cara paling gampang klik

objek lalu tekan F8. Pada panel convert to symbol, klik type : movie clip lalu OK.

Buka panel Action ketik script dibawah ini pada panel Action (pastikan anda berada di posisi Movie

Clip)


if (Key.isDown(Key.RIGHT)){

_x = _x+5

}

}

Test movie,

Penjelasan --> seperti yang telah di jelaskan pada bagian sebelumnya onclipEvent adalah sebuah script

untuk movie clip, dan enterFrame nama eventnya ketika movie clip dijalankan.

if(key.isDown(Key.RIGHT)) adalah kondisi, kira-kira begini artinya: Jika key di tekan, key yang kanan

{ _x = _x+5 } ini perintahnya. Jadi kalo' kondisi key kanan di tekan, komputer akan menjalankan per-

intah _x di tambah 5. Untuk merubah gerak movie clip ke kiri rubah saja + nya jadi maka gerakanya

akan berubah ke kiri. Untuk lebih jelasnya ketik script gerak ke kiri di bawah scrip gerak ke kanan.


if (Key.isDown(Key.RIGHT)){

_x = _x+5

}

{ if (Key.isDown(Key.LEFT)){

_x = _x-5

}

}

test movie clip tekan tanda panah kiri lalu tanda panah kanan di keyboard anda...

Sekarang tugas anda adalah membuat movie clip yang bisa bergerak ke atas dan kebawah di

kontrol oleh keyboard.

TAHAP 8

This

Kali ini kita akan membahas this. This adalah sebuah fungsi dimana kita akan meggunakannya

ketika syntak yang kita tulis di panel action berada di luar movie clip tersebut. Supaya anda bisa lebih

jelas tentang this sekarang kita akan mencoba menggerakan 3 objek movie clip tapi menulis scriptnya

di dalam 1 tempat, tidak seperti penulisan syntak sebelumnya dimana kita menulis syntak tiap movie

clip berada pada ruangan movie clip tersebut di panel action. Untuk melakukan hal tersebut kita akan

menggunakan satu kata baru di dalam script yaitu this.

Buat 3 buah objek lingkaran dengan oval tool dengan warna yang berbeda-beda. Ubah satu per

satu objek objek terebut menjadi movie clip, lalu pada panel properties beri nama sesuai warnanya, beri

_mc dibelakang nama movie clip agar ketika di panel action akan lebih memudahkan anda dalam

penulisan script.

Misalnya kita buat 3 buah lingkaran dengan nama orange_mc, biru_mc, hijau_mc.

Gambar 8.1

merubah nama objek pada properties

buka panel action lalu ketik script dibawah ini:

orange_mc.onEnterFrame = function( ) {

this._x = this._x+5;

};

Sekarang tes movie clip, lihat objek orange_mc. Ia bergerak sendiri dan yang lain tetap dalam

keadaan diam. Ini karena ketika kita mengetik script kita hanya memanggil orange_mc tidak dengan

yang lain. Sekarang tugas anda adalah membuat semua movie clip bergerak tapi dengan kecepatan

berbeda-beda (anda sudah mengerti kan gimana caranya ??). Kalau masih bingung juga boleh intip

script di bawah

Misalnya movie clip orange nilainya 5, lalu movie clip hijau nilainya 3, movie clip nilainya 7:

orange_mc.onEnterFrame = function( ) {


};

biru_mc.onEnterFrame = function( ) {


};

hijau_mc.onEnterFrame = function( ) {


};

Sekarang saya harap anda sudah mengerti fungsi this. This ditulis ketika anda bukan berada didalam

movie clip pada panel action. Anda hanya tinggal mengetik nama movie

clip.onEnterFrame=function( ) { this.( property)=this.( property.perintah); }.

TAHAP 9

_root_root hampir mirip seperti _this, memang sulit menjelaskannya tapi mudah-mudah penjelasan saya bisa

membuat anda sedikit mengerti. _root kita gunakan untuk mendefinisikan atau memanggil suatu movie

clip karena target movie clipnya sulit untuk dijangkau dan terlalu repot jika menulis script pada tiap-

tiap panel action movie clip. Biar makin jelas kita langsung pratekkan saja

buat sebuah flash document baru, buat sebuah lingkaran rubah lingkaran tadi jadi movie clip ubah

nama movieclip di panel properties jadi satu_mc. Klik frame 1 di timeline Lalu ketik script dibawah

pada pada panel action

_root.onEnterFrame = function() {

satu_mc._x = satu_mc._x+4;

};

Tes movie.Movie clip satu_mc bergerak walaupun kita tidak menulis script di panel action pada frame 1 bukan satu_mc. Bisa di bilang root adalah layar kerja pada flash document yang kita buat. Supaya

anda lebih jelas lagi sekarang klik 2 kali movie clip satu_mc (lingkaran yang anda buat). Buat lagi

lingkaran baru dengan ukuran lebih kecil dan warna yang berbeda, ketika membuat lingkaran baru

jangan di dalam gambar lingkaran yang anda telah buat karena akan menghapus lingkaran yang telah

ana buat. Sekarang rubah lingkaran baru tersebut jadi movie clip, pada panel properties rubah namanya

jadi dua_mc, letakan lingkaran baru anda /dua_mc di tengah satu_mc. Sekarang kita kembali lagi ke

scene 1 (lihat panel di atas timeline)

gambar 9.1

dua_mc berada ditengah satu_mc

pada panel action hapus script yang tadi anda ketik rubah jadi

_root.onEnterFrame = function() {

satu_mc.dua_mc._y = satu_mc.dua_mc._y+4;

};

tes movie. Sekarang satu_mc dalam keadaan diam tapi dua_mc yang bergerak. Bagaimana sudah

mengerti kan fungsi _root ?. Kita anggap saja root adalah lembar kerja flash satu_mc.dua_mc._y

dalam satu_mc ada dua_mc dan dua_mc memiliki property _y. Jadi pertama kita panggil dulu satu_mc

lalu dua_mc setelah itu baru property yang ingin kita gunakan.

Daftar Pusaka:

Zeembry, 123 Tip & Trik Action Script Flash MX 2004, Elex Media Komputindo

Michael Williams ActionScript Coding Standards.

www. Macromedia.com

pengenalan action script

Documents