pengenalan action script
DESCRIPTION
mempelajari action script flashTRANSCRIPT
-
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);
//hasil di outputnya : 12
trace(n-1);
//hasil di outputnya : 3
trace(n/2);
//hasil di outputnya : 2
trace(n%3);
//hasil di outputnya : 1
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))
Arrayku = new Array (Ina,Ini,Inu,Ino)
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 = new Array (Ina,Ini,Inu,Ino)
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
Script : Arrayku = new Array (Ina,Ini,Inu,Ino)
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
Arrayku = new Array (Ina,Ini,Inu,Ino)
trace (Arrayku.reverse())
Output : Ino,Inu,Ini,Ina
Unshift
Kebalikan dari Shift, unshift digunakan untuk menambahkan data di depan array
Script : Arrayku = new Array (Ina,Ini,Inu,Ino)
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.
onClipEvent (enterFrame) {
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)
onClipEvent (enterFrame) {
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.
-
onClipEvent (enterFrame) {
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( ) {
this._x = this._x+5;
};
biru_mc.onEnterFrame = function( ) {
this._x = this._x+3;
};
hijau_mc.onEnterFrame = function( ) {
this._x = this._x+7;
};
-
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