Actionscript 2.0
Actionscript 2.0
Sebelum lebih lanjut mengenai pembuatan game flash, kita harus memahami terlebih
dahulu bahwa membuat game flash itu menyenangkan dan menguntungkan. Bagi
sebagian orang memainkan game sangat menyenangkan, konsep inilah yang harus
kita pegang yaitu kita berusaha untuk menyenangkan orang lain melalui sebuah game.
Semakin orang lain menikmati permainan game buatan kita, disitulah letak
keberhasilan kita sebagai seorang pembuat game.
Pemrograman komputer pada umumnya akan sulit dipahami oleh seseorang yang
awam terhadap sebuah bahasa pemrograman. Disisi lain membuat game merupakan
salah satu penerapan dari ilmu pemrograman komputer. Namun kita tidak perlu
berkecil hati, karena flash dan action scriptnya sangat mudah untuk dipelajari dan
melalui buku ini saya berusaha membagi sedikit pengetahuan saya tentang membuat
game dengan flash.
Menu berisi kontrol untuk berbagai fungsi seperti membuat, membuka, menyimpan
file, dan sebagainya sesuai dengan menu yang ditampilkan.
Stage adalah area persegi empat yang merupakan tempat dimana kita membuat
obyek animasi atau aplikasi yang akan di jalankan.
Toolbox berisi menu untuk membuat atau menggambar bentuk . Toolbox terbagi
menjadi empat bagian yaitu drawing tool, view, color, dan option
Timeline adalah tempat kita dapat membuat dan mengontrol obyek dan animasi.
Panel berisi kontrol fungsi yang dipakai dalam Flash yaitu untuk mengganti dan
memodifikasi berbagai properti obyek animasi dengan cepat
Macromedia Flash memiliki fasilitas berupa Action Script, yang dapat kita
manfaatkan sebagai media dalam membuat suatu program aplikasi, multimedia, CD
interaktif bahkan game. Macromedia Flash memiliki ratusan script dengan fungsi
yang berbeda-bedaakan tetapi yang sering digunakan hanya beberapa script saja,
sehingga akan memudahkan kita apabila kita masih awam terhadap Flash maupun
Action Script-nya.
Dalam Flash terdapat dua mode panel penulisan script yaitu mode normal dan mode
expert. Pada dasarnya mode expert lebih mudah untuk dipelajari daripada mode
normal, sehingga seluruh action pada tutorial di dalam buku ini ditulis dalam mode
expert.
Action script dalam flash dapat dituliskan pada 3 tempat yaitu pada button, pada
movieclip, dan pada frame dengan aturan yang berbeda.
Bentuk tombol
3. Seleksi kotak dan text tersebut, kemudian konvert menjadi symbol dengan dengan
menekan tombol F8 (pilih menu insert>convert to symbol). Pilih button pada
option behaviour dan ketikan tombol pada name.
Convert to symbol
4. Double klik tombol tersebut untuk memasuki mode edit. Perhatikan dalam symbol
bertipe button terdapat 4 frame yaitu up, over, down dan hit. Up menunjukan
kondisi normal suatu tombol. Over menunjukan kondisi tombol saat mouse
berada tepat di atasnya. Down menunjukan kondisi tombol saat ditekan dan Hit
merupakan area penekanan (sensor) tombol tersebut.
5. Klik frame over kemudian masukan keyframe dengan menekan tombol F6 (pilih
menu insert>keyframe). Ubah warna dan ukuran tombol pada frame over tersebut.
Untuk frame Down dan Hit biasanya bisa kita abaikan.
Penjelasan pola penulisan action script pada button adalah sebagai berikut :
1. Action pada button harus dimulai dengan script on()
2. Di dalam tanda kurung () pada scrip on berisi mouse event seperti release, press,
dragover, rollout dan sebagainya. Mouse event menyatakan sebuah kejadian yang
akan di eksekusi oleh action tersebut saat mouse melakukan kegiatan tertentu.
Sebagai contoh : mouse event release berarti perintah dalam blok { } akan
dijalankan ketika mouse menekan tombol.
3. Tanda { merupakan awal suatu blok script. Yang dimaksud dengan blok scrip
adalah suatu kumpulan perintah yang akan dijalankan sepanjang movie event.
4. Tanda // merupakan tanda yang menyatakan komentar. Baris yang memiliki tanda
tersebut tidak dianggap sebagai suatu perintah. Meskipun demikian tanda // sangat
membantu memberi informasi pada penulisan action scrip kita.
5. Baris trace(tombol ditekan); merupakan baris perintah. Perintah dalam button
harus ditulis didalam sebuah blok mouse event. Setiap akhir penulisan sebuah
perintah selalu diakhiri dengan tanda ;
6. Tanda } merupakan penutup suatu blok script.
Perhatikan
bahwa sebuah obyek dalam flash memiliki 2 bagian yaitu stoke (garis tepi) dan fill
(isi).
Convert to symbol
3. Klik movieclip bola, dan dalam kondisi terseleksi buka panel action ( tekan f9
atau klik menu windows>action apabila panel action belum terbuka dan pastikan
mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8).
Kemudian ketikan script sebagai berikut :
onClipEvent (enterFrame) {
// menggerakan obyek kekanan
_x += 10;
}
action pada movieclip
4. Jalankan movie dengan menekan tombol Ctrl+Enter. Maka bola akan bergerak ke
kanan sampai hilang dari layar. Tekan tombol Ctrl+W untuk kembali ke stage
Penjelasan pola penulisan action script pada movieclip adalah sebagai berikut :
1. Action pada movieclip harus dimulai dengan script on() atau onClipEvent()
2. Di dalam tanda kurung () pada scrip on maupun onClipEvent berisi movie event
seperti load, enterframe, mouse down, release dan sebagainya. Movie event
menyatakan sebuah kejadian yang akan di eksekusi oleh action tersebut. Sebagai
contoh : movie event enterFrame berarti perintah dalam blok { } akan dijalankan
sepanjang frame tempat movieklip tersebut aktif dan movie event load berarti
perintah dalam blok { } akan dijalankan satu kali saja yaitu ketika movieclip di
load (ditampilkan) oleh flash player.
3. Tanda { merupakan awal suatu blok script. Yang dimaksud dengan blok scrip
adalah suatu kumpulan perintah yang akan dijalankan sepanjang movie event.
4. Tanda // merupakan tanda yang menyatakan komentar. Baris yang memiliki tanda
tersebut tidak dianggap sebagai suatu perintah. Meskipun demikian tanda // sangat
membantu memberi informasi pada penulisan action scrip kita.
5. Baris _x+=10; merupakan baris perintah. Perintah dalam movieclip harus ditulis
didalam sebuah blok movie event. Setiap akhir penulisan sebuah perintah selalu
diakhiri dengan tanda ;
6. Tanda } merupakan penutup suatu blok script.
1. Buatlah sebuah obyek lingkaran dengan menggunakan oval tool. Seleksi obyek
lingkaran tersebut kemudian convert menjadi symbol dengan menekan tombol F8
(pilih menu insert>convert to symbol). Pilih movieclip pada option behaviour dan
ketikan bola pada name.
Convert to symbol
2. Klik symbol bola tersebut, kemudian buka panel instance dan ketikan nama bola
pada instance name.
layer action
4. Klik frame 1 layer action, dan dalam kondisi frame 1 terseleksi buka panel action
( tekan f9 atau klik menu windows>action apabila panel action belum terbuka dan
pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau
Flash 8).
bola.onEnterFrame = function() {
//menggerakan bola kekanan
this._x += 10;
};
5. Jalankan Movie dengan menekan tombol Ctrl+Enter, maka kita akan melihat hasil
yang sama dengan dengan cara penulisan action pada movieclip.
Penjelasan pola penulisan action script pada frame adalah sebagai berikut :
1. Sebuah penulisan script di frame memiliki 3 tipe penulisan yaitu penulisan di
dalam suatu blok movie event atau mouse event, contoh onEnterframe =
function(){} dan penulisan tanpa movie event atau mouse event, tipe penulisan
yang ke tiga adalah kombinasi dari keduanya, contohnya akan kita dapati pada
program di bab selanjutnya
2. Pada dasarnya penulisan action pada frame sama dengan penulisan pada
movieclip maupun pada button. Hanya saja pada frame terdapat script function()
dan penggunaan nama instansi .
3. Perhatikan perbedaan antara penulisan pada frame dan penulisan pada moviclip
berikut
bari
s
1.
pada frame
pada movieclip
perbedaan
bola.onEnterFrame =
onClipEvent(enterFrame Perubahan
function{
){
penulisan dari
moviclip ke
frame adalah
penggunaan
nama instansi
didepan
movieevent dan
penggunaan
2.
3.
//menggerakan bola
//menggerakan bola
script function()
baris komentar
kekanan
kekanan
sama di seluruh
this._x+=10;
_x+=10;
penulisan
penggunaan
kata-kata this
harus disertakan
pada penulisan
4.
};
di frame
pada penulisan
di frame sebuah
akhir dari movie
event function
diakhiri dengan
tanda ;
perbedaan antara penulisan di frame dan di movieclip
4. Apabila ingin menuliskan action button pada frame, maka yang harus di ubah
adalah movie event diubah menjadi mouse event. contoh : tombol.onRelease =
function(){}
Keuntungan penulisan script pada frame :
1. Dibandingkan dengan menulis action di movieclip, penulisan script di dalam
movieclip cenderung lebih rumit, akan tetapi bagi programmer yang familiar
dengan bahasa pemrograman seperti C++, Java, Delphi atau V basic, penulisan
pada frame akan menjadi lebih mudah.
2. Lebih mudah dalam menuliskan function tertentu atau perintah berulang yang
sering dipakai.
3. Karena seluruh script biasanya dituliskan pada frame, maka mengecek action
seluruh obyek yang ada akan lebih mudah, tanpa harus ke masing-masing obyek.
check syntax
Dengan menekan tombol check syntac tersebut, dapat diketahui apakah scrip yang
ditulis benar atau memiliki kesalahan.
Kesalahan penulisan akan ditampilkan pada output panel. Scene, layer, dan frame
tempat kita melakukan kesalahan serta baris ke berapa yang salah akan membantu kita
dalam memperbaiki sebuah kesalahan.
auto format
3. Kesalahan penggunaan huruf kecil dan huruf besar. Action script flash sebagian
besar tidak sensitive case (peka terhadap huruf kecil dan huruf besar). Akan tetpi
flash membedakan sebuah teks dengan warna yang berbeda. Ketika kita
menuliskan action tanpa memperhatikan huruf kecil dan huruf besar, maka teks
tersebut akan berwarna hitam, sedangkan apabila benar maka teks akan berwarna
biru gelap. Pembedaan warna teks dalam action script adalah sebagai berikut :
1. Warna biru gelap digunakan sebagai warna action.
2. Warna biru terang digunakan sebagai warna string.
3. Warna abu-abu digunakan sebagai warna komentar.
4. Warna hitam digunakan untuk menuliskan text selain 3 jenis text di atas.
4. Kesalahan penggunaan tanda {}. Seorang yang baru belajar flash sering
kebingungan dalam menggunakan tanda tersebut. Tanda tersebut merupakan
sebuah tanda blok action, dalam artian seluruh action yang berada dalam tanda
{} berarti masuk kedalam blok tertentu seperti blok movie event, mouse event,
function, blok if, blok for dan sebagainya. Jumlah tanda { harus sama dengan
jumlah tanda }. Tips dari penulis adalah : setelah kita menuliskan tanda {,
segeralah menuliskan tanda }, kemudian letakkan kursor di tengah karakter
tersebut dan tekan enter atau langsung tuliskan action yang dibutuhkan di
dalamnya.
5. Kesalahan penggunaan tanda ( ). Berbeda dengan tanda {} tanda ( ) bukan
menyatakan suatu blok tetapi biasanya merupakan bagian dari penulisan action
digunakan. contoh : if (...){ }, trace(...);.. Jumlah tanda ( daam satu baris
perintah harus sama dengan jumlah tanda ).
6. Kesalahan penggunaan tanda = dan tanda ==. Tanda == hanya digunakan pada
suatu kondisi. Sedangkan tanda = digunakan untuk mengeset nilai suatu variabel
7. Kesalahan penggunaan titik. Dalam bahasa pemrograman apapun, karakter titik
(.) adalah karakter yang vital, sehingga harus diperhatikan penggunaannya.
dibuat berjalan lambat, ada bagian yang seharusnya bergerak menjadi tidak bergerak,
memakan memori komputer dan sebagainya yang sering disebut dengan istilah bug.
Untuk memperbaiki bug jalankan terlebih dahulu, kemudian ujilah program tersebut
sesering mungkin dan carilah peluang yang dapat terjadi sebanyak mungkin. Ketika
menemukan bagian yang salah, kembali ke action dan carilah bagian mana yang
menyebabkan kesalahan tersebut, kemudian perbaiki sebisa mungkin.
Setelah mempelajari pola penulisan scrip dalam flash, langkah selanjutnya adalah
memahami penggunaan action script. Setiap action memiliki kegunaan masingmasing, script mana dan kapan kita menggunakannya adalah hal yang harus dilatih
secara terus-menerus apabila ingin menjadi pakar dalam pemrograman action cript
flash.
Pada sistem kordinat kartesian sumbu utama dibagi menjadi sumbu x (horisontal) dan
sumbu y (vertikal). Persimpangan antara sumbu tersebut merupakan kordinat (0,0).
Pada sumbu x semakin ke kiri maka nilai x semakin kecil dan sebaliknya semakin ke
kanan nilai x semakin besar. Pada sumbu y semakin ke bawah maka nilai y semakin
kecil dan sebaliknya semakin ke atas nilai y semakin besar.
Pada sistem kordinat layar komputer, hampir sama dengan kordinat kartesian, sumbu
utama dibagi menjadi sumbu x (horisontal) dan sumbu y (vertikal). Akan tetapi
kordinat (0,0) adalah pojok kiri atas layar. Perbedaan selanjutnya adalah pada sumbu
y. Pada sumbu y semakin ke bawah maka nilai y semakin besar dan sebaliknya
semakin ke atas nilai y semakin kecil. Perhatikan gambar berikut:
Contoh penerapan dari sistem kordinat layar dalam flash adalah sebagai berikut :
Permasalahan :
Buatlah sebuah bola yang bergerak secara diagonal dari kiri atas ke kanan bawah
untuk menyelesaikan soal tersebut, kita gambarkan dahulu secara visual sebagai
berikut :
Seleksi obyek lingkaran tersebut kemudian convert menjadi symbol dengan menekan
tombol F8 (pilih menu insert>convert to symbol). Pilih movieclip pada option
behaviour dan ketikan bola pada name. Perhatikan bagian regristration, bagian
tersebut menentukan posisi suatu movieclip. Sebagai contoh, ketika kita
2. memilih regristration pada bagian tengah, maka posisi penghitungan kordinat
movieclip nantinya dihitung di bagian tengah tidak seperti yang terlihat pada
properties (karena pada properties hitungan posisi dimulai dari pojok kiri atas).
Posisi regristration
4. Jalankan movie dengan menekan tombol Ctrl+Enter. Maka bola akan bergerak
diagonal dari kiri atas ke kanan bawah sampai hilang dari layar. Tekan tombol
Ctrl+W untuk kembali ke stage
Penjelasan program
1. Baris onClipEvent (enterFrame) { berarti bahwa perintah dalam blok { } akan
dijalankan sepanjang frame aktif artinya pada default seting frame rate : 12 fps
(frame per secon), maka perintah dalam blok { } akan dijalankan setiap
seperduabelas detik sepanjang movie tersebut dijalankan.
2. Baris // menggerakan bola diagonal merupakan baris komentar, baris ini tidak
dijalankan oleh flash.
3. Baris _x += 10; berarti setiap seperduabelas detik kordinat x dari bola ditambah
10 pixel, sehingga bola bergerak kekanan. Tanda += merupakan bentuk
penyedehanaan dari action _x = _x+10;
4. Baris _y += 10; berarti setiap seperduabelas detik kordinat y dari bola ditambah
10 pixel, sehingga bola bergerak kebawah.
5. Karena komputer mengitung dengan sangat cepat, perhitungan dalam satu blok { }
dapat dikerjakan dengan sekaligus sehingga bola tampak bergerak diagonal.
Mengenal variabel
Variabel adalah suatu lokasi didalam memori komputer yang digunakan untuk
menyimpan suatu nilai dan nilai yang ada didalamnya dapat diubah. terdapat 2 cara
dalam membuat variabel dalam flash cara yang pertama adalah dengan menuliskan
langsung nama variabel dan nilainya contoh :
score = 1000; dengan action tersebut secara otomatis akan membuat satu variabel
baru bernama score dengan nilai 1000;
Cara yang kedua adalah dengan menuliskan action var di depan variabel yang kita
tuliskan, contoh :
var score = 1000;
Tipe variabel
dalam flash terdapat beberapa tipe variabel, beberapa yang sering dipakai antara lain :
Tipe Variabel
Number
String
Boolean
array
Contoh Penulisan
score = 1000; i++;
nama = ;
teks = contoh;
mati = true;
kalah = false;
datapemain = [];
hari = [senin,selasa]
highscore = [100, 80, 75]
Sebuah obyek dalam flash bisa berupa movieclip, button, graphic, sound, video,
bitmap dan component. Akan tetapi yang dapat diaplikasikan dengan action hanya
obyek movieclip, button dan sound. Componet memiliki build in action script,
sehingga dapat langsung kita pakai, sedangkan bitmap dan graphic tidak dapat
dimasuki oleh action.
Setiap obyek yang dapat dimasuki action memiliki beberapa properties seperti
kordinat x, kordinat y, panjang, tinggi,
Karena yang akan sering kita pakai adalah movieclip, berikut ini adalah beberapa
properties dari sebuah movieclip:
_x
// kordinat sumbu x
_y = 100;
// kordinat sumbu y
}
Action diatas akan mengeset posisi obyek (symbol) kekordinat (100,100)
terhadap stage saat symbol tersebut ditampilkan pertama kali.
_xscale
_xscale merupakan presentase dari skala pembesaran horisontal suatu symbol
terhadap titik regristasi. Nilai default _xscale sebelum diubah adalah 100.
Obyek yang memiliki nilai _xscale dibawah 100 akan memiliki ukuran yang
lebih kecil dari ukuran aslinya, begitu pula sebaliknya.
_yscale
_yscale merupakan presentase dari skala pembesaran vertikal suatu symbol
terhadap titik regristasi. contoh :
onClipEvent(load){
_xscale = 200; // pembesaran 2 kali ke sumbu x
_yscale = 200; // pembesaran 2 kali ke sumbu y
}
Action diatas memperbesar symbol menjadi 2 kali lebih besar pada saat
symbol tersebut ditampilkan pertama kali.
_visible
_visible adalah property pada symbol yang menentukan apakah obyek tersebut
ditampakkan atau tidak pada stage. _visible bernilai 1 agar obyek tampak dan
bernilai 0 agar obyek tidak tampak.
contoh :
onClipEvent(load){
_visible = 0; // tidak tampak
}
Action diatas menyebabkan obyek tidak tampak pada stage.
_alpha
_alpha adalah property pada symbol yang menentukan alpha value
(transparency) obyek tersebut. _alpha bernilai 0 sampai 100 dimana nilai 0
berarti obyek tidak tampak (transparan) dan 100 berarti obyek tampak (solid).
contoh :
onClipEvent(load){
_alpha = 50; // semi transparan
}
Action diatas menyebabkan obyek mengalami tranparansi sebanyak 50%.
_rotation
_rotation merupakan property yang menunjukan posisi perputaran obyek
tersebut searah jarum pada titik registrationnya.
contoh :
onClipEvent(enterFrame){
_rotation += 10;
}
Action diatas menyebabkan obyek berputar searah jarumjam dengan pusat titik
registrationnya.
_currentframe
nilai pada _currentframe menunjukan frame yang aktif pada sebuah movie
atau sebuah movieklip. Penjelasan yang lebih mendetail terdapat pada bab
selanjutnya.
menambah layer
3. Klik frame 10 layer tombol, kemudian masukan keyframe. Buatlah sebuah bentuk
tombol di tengah stage.
4. Seleksi bentuk tombol tersebut dan convert menjadi symbol dengan menekan
tombol F8. Ketikan nama play dan pilih button pada behaviour.
5. Dalam kondisi tombol play terseleksi, buka panel action dan ketikan script
berikut :
on (release) {
//jika ditekan maka mainkan frame selanjutnya
play();
}
6. Jalankan movie. Pada saat bola berhenti, tekan tombol dan bola akan bergerak
lagi. Action play(); pada tombol menyebabkan movie berjalan kembali ketika
tombol ditekan.
gotoAndStop(frame)
Action gotoAndStop() digunakan untuk menghentikan movie pada frame yang
inginkan. frame dapat diisi dengan menggunakan angka tempat frame yang
diinginkan atau frame label. Perhatikan contoh berikut :
1. Buatlah sebuah movieclip bola dan letakan disebelah kiri stage.
2. Klik frame 20 kemudian masukan keyframe. Geser posisi movieklip bola ke
sebelah kanan stage.
3. Klik kanan frame 10 kemudian pilih create motion tween, maka akan terbentuk
animasi bola bergerak dari kiri ke kanan secara looping.
4. Tambahkan sebuah layer diatas layer 1 dan ubah namanya menjadi layer action.
5. Klik frame 10 layer action, masukan keyframe. Kemudian buka panel action dan
ketikan action gotoAndStop(1);
6. Jalankan movie, maka ketika bola sampai di tengah stage, bola akan kembali dan
berhenti ke posisi awal di kiri stage.
gotoAndPlay(frame)
Action gotoAndPlay() digunakan untuk memainkan movie pada frame yang
inginkan, merupakan kebalikan dari action gotoAndStop();
OnClipEvent(event)
OnClipEvent
adalah suatu script yang digunakan oleh suatu movie klip untuk
melaksanakan beberapa perintah lain dalam suatu blok event. Parameter Event dapat
berisi :
load perintah akan dijalankan ketika pertama kali movie klip di load oleh time
line
unload perintah akan dijalankan ketika suatu movie klip di remove(
dihilangkan ) dari time line
enterFrame perintah kan dijalankan secara terus menerus sepanjang frame
yang aktif
mouseMove perintah akan dijalankan ketika mouse digerakkan
mouseDown perintah akan dijalankan ketika mouse ditekan
mouseUp perintah akan dijalankan ketika mouse dilepaskan
keyDown perintah akan dijalankan ketika mendeteksi adanya tombol yang
ditekan dengan menggunakan action Key.getCode
keyUp perintah akan dijalankan ketika mendeteksi adanya tombol yang
dilepaskan dengan menggunakan action Key.getCode
Pemahaman lebih lanjut mengenai script ini akan terbentuk seiring dengan latihan kita
dalam mengolah action script.
Trace(pesan)
Perintah trace() digunakan untuk menampilkan sesuatu pada output panel.
Penggunaan action trace sangat bermanfaat dalam pemrograman lebih lanjut nantinya,
sebagai penguji kesalahan akan suatu baris program. Perhatikan contoh penggunaan
action script trace berikut:
1. Klik frame 1, kemudian buka panel action dan ketikan script:
trace(1000); kemudian jalankan movie. Maka akan muncul text 1000 pada
output panel .
nilai = 1000;
trace(nilai);
Kemudian jalankan kembali movie. Maka tampilan yang muncul adalah sebagai
berikut :
Fungsi
penambahan
pengurangan
perkalian
pembagian
++
penyederhanaan
_x += 10
_x -= 10
_x *= 10
_x /= 10
Teks atau string dalam flash juga merupakan suatu obyek yang memiliki banyak
action. Perhatikan beberapa penulisan action script berikut :
halo apa kabar
nilai = 1000
nilai =
Untuk menampilkan teks dalam flash kita dapat menggunakan text tool. Terdapat 3
tipe teks yang bisa dibentuk oleh teks tool yaitu static text, dynamic text dan
inputtext.
Static Text
Static text digunakan untuk menampilkan suatu teks yang sifatnya tidak dapat diubah
secara manual atau dengan script setelah movie dipublish. Untuk mengatur jenis,
bentuk, ukuran dan warna text dapat menggunakan properties.
Dynamic Text
Berbeda dengan static text dynamic text dapat diubah dengan menggunakan
actionscript. Penggunaan dynamic text biasanya adalah untuk menampilkan suatu
variabel. Perhatikan contoh aplikasi penggunaan dynamic text berikut :
1. Klik text tool kemudian buka panel properties. Pilihlah Dynamic text pada option
text type dan atur bentuk, ukuran dan warna huruf sesuai dengan keinginan.
2. Klik dan drag pada stage untuk membentuk sebuah text area
4. Buatlah sebuah layer baru diatas layer 1 dan ubah namanya menjadi layer action.
5. Klik frame 1 layer action, buka panel action dan tuliskan action
teks = contoh dynamic text.
6. Jalankan Movie, maka akan muncul tampilan yang sama dengan nilai variabel
teks.
Permasalahan :
buatlah sebuah program yang menampilkan angka yang selalu bertambah dari waktu
ke waktu.
Jawaban dari permasalahan tersebut adalah sebagai berikut :
1. Klik text tool kemudian buka panel properties. Pilihlah Dynamic text pada option
text type dan atur bentuk, ukuran dan warna huruf sesuai dengan keinginan.
2. Klik dan drag pada stage untuk membentuk sebuah text area
3. Seleksi text area (berwarna biru jika terseleksi) dan buka panel properties. Ketikan
kata angka pada var.
Penjelasan program:
1. Baris _root.onEnterFrame = function(){ menyatakan bahwa perintah dalam
blok{} akan dijalankan secara beluang-ulang setiap seperduabelas detik sekali.
Penjelasan lebih lanjut mengenai action _root terdapat pada bab selanjutnya
2. baris angka++ menyatakan bahwa setiap seperduabelas detik variabel angka
ditambah satu satuan.
4. Buatlah sebuah layer baru diatas layer 1 dan ubah namanya menjadi layer action.
5. Klik frame 1 layer action, buka panel action dan tuliskan action
tampilan = "<b>kata ini dicetak tebal </b> sedangkan yang ini dicetak
<i>miring</i>";
6. Jalankan Movie, maka akan muncul tampilan sebagai berikut :
dalam variabel tampilan tersebt terdapat beberapa tag HTML seperti tag bold (<b>)
dan tag italic (<i>). Ketika tombol render text as HTML aktif maka tag-tag tersebut
akan dijalankan oleh dynamic text sehingga dihasilkan tampilan seperti pada gambar
diatas.
Input Text
Input text merupakan suatu form yang meminta suatu masukan dari user (pengguna).
Masukan tersebut nantinya akan dianggap sebagai nilai dari variabel text input
tersebut. Agar lebih jelas perhatikan contoh berikut :
1. Klik text tool kemudian buka panel properties. Pilihlah input text pada option text
type dan atur bentuk, ukuran dan warna huruf sesuai dengan keinginan.
2. Klik dan drag pada stage untuk membentuk sebuah text area
3. Seleksi text area (berwarna biru jika terseleksi) dan buka panel properties. Ketikan
kata nama pada var. dan aktifkan tombol show border around text.
4. Buat lagi text area yang lebih besar (cukup untuk 2 baris kata atau lebih) di bawah
text area yang sudah dibuat pada poin no 2.
5. Klik text area yang bawah tersebut, kemudian buka properties dan ubah menjadi
dynamic text dengan var tampilan dan pilih multiline pada linetype.
6. Buatlah sebuah layer baru diatas layer 1 dan ubah namanya menjadi layer tombol.
7. Buatlah sebuah tombol OK dan letakkan di bawah text area kedua. Perhatikan
peletakan obyek di stage sebagai berikut :
on (release) {
hasil = bilangan_1 + bilangan_2;
}
11. Jalankan Movie, masukan angka 10 pada bilangan 1 dan 20 pada bilangan 2.
Kemudian tekan tombol OK hasil yang diperoleh adalah 1020 bukan 30. Hal
tersebut dikarenakan hasil yang diperoleh dari input text selalu bertipe string,
sehingga penjumlahan terhadap 2 bilangan tersebut merupakan penjumlahan
string 10 + string 20 dan hasilnya 1020. Untuk mengatasinya kita harus
mengubah terlebih dahulu variabel bertipe string ke variabel bertipe number.
12. Tekan Ctrl+W untuk kembali ke stage. Klik tombol OK kemudian ubah scriptnya
menjadi :
on (release) {
hasil = Number(bilangan_1) + Number(bilangan_2);
}
13. Jalankan Movie, kemudian masukan bilangan tertentu pada ke dua input text.
Setelah tombol OK ditekan, hasil yang benar akan muncul. Action
Number(string) digunakan untuk mengconvert suatu string yang berada dalam
tanda () menjadi variabel bertipe number.
Action String
String merupakan suatu obyek yang memiliki sekitar 12 action seperti : slice,
subString, toUpperCase, toLowerCase dan sebagainya dan memiliki 1 property
yaitu length. Penggunaan action-action tersebut jarang ditemui dalam pemrograman
game, dan penerapannya dapat ditemui pada salah satu program di dalam bab
selanjutnya
Dalam permrograman salah satu elemen terpenting adalah penyusunan logika. Dan
logika dalam pemrograman tidak terlepas dari pengambilan keputusan, operator
logika dan pengulangan. Apabila kita memahami benar ke 3 hal tersebut, dapat
dipastikan sebuah pemrograman game dapat dilakukan.
Pernyataan if
Dengan bahasa bebas if bisa diterjemahkan menjadi jikamaka..Dengan kata
lain apabila terdapat pernyataan if, dapat dipastikan terdapat dua atau lebih
kemungkinan. Sebagai contoh : jika pesawat meledak, maka game akan berakhir.
gerakan sebuah bola kekanan kemudian setelah berada di batas kanan layar, maka
bola bergerak kembali (memantul) ke kiri.
untuk menyelesaikan permasalahan tersebut, kita gambarkan dulu secara visual
menjadi :
documen properties
6. Buatlah sebuah obyek lingkaran dengan menggunakan oval tool.
}
9. Jalankan Movie, maka ketika bola telah pada kordinat yang ditentukan pada
variabel batas kanan, bola akan terpantul.
Penjelasan program :
1. baris onClipEvent (load) { merupakan sebuah perintah yang akan dijalankan satu
kali saja, yaitu saat bola pertama kali di load oleh movie. Perintah tersebut sering
kali digunakan sebagai alat untuk mengeset awal variabel-variabel yang akan
dipakai.
2. baris kecepatan = 10; dan bataskanan = 700; merupakan variabel yang akan
dipakai. Kecepatan menentukan arah pergeseran kordinat x, karena bernilai
positif, x akan bergeser ke kanan. Batas kanan digunakan sebagai pendeteksi
apakah kondisi bola menyentuh batas kanan terjadi atau belum.
3. baris onClipEvent (enterFrame){ berarti perintah yang berada dalam blok {}
akan dijalankan secara berulang setiap seperduabelas detik secara terus menerus
hingga movie ditutup.
4. baris _x += kecepatan; berarti kordinat x dari bola akan ditambah sejumlah nilai
dari variabel kecepatan.
5. baris if (_x>=bataskanan){ berarti jika kordinat x lebih besar atau sama dengan
variabel bataskanan maka perintah dalam blok {} akan dijalankan.
6. baris kecepatan = -kecepatan; berarti apabila kondisi pada no 5 tercapai maka
nilai kecepatan dijadikan negatif (menjadi 10), sehingga gerakan bola kekiri
akibat script _x += kecepatan ( _x += -10 ).
Operator logika
Pada matematika dikenal beberapa logika seperti dan, atau, dan bukan. Operator
logika biasanya digunakan untuk membentuk suatu keadaan logika (boolean) atau
kondisi bernilai benar atau salah. Dalam flash juga terdapat operator logika seperti
AND, OR, dan NOT.
Operator and
Operator and dalam flash dapat ditulis dalam 2 bentuk yaitu :
kondisi 1 && kondisi 2 atau kondisi 1 and kondisi 2
hasil dari operator and hanya bernilai benar jika kedua kondisi bernilai benar.
Perhatikan contoh berikut :
Permasalahan
jatuhkan sebuah bola kemudian setelah berada di batas bawah layar, maka bola
bergerak memantul ke atas dan berubah bentuk menjadi kotak.
untuk menyelesaikan permasalahan tersebut, kita gambarkan dulu secara visual
menjadi :
dengan
rectangle tool.
tambahkan sebuah layer diatasnya, kemudian klik frame 1 layer 2, buka panel action
dan tuliskan action stop();
Penjelasan program :
1. baris onClipEvent (load) { merupakan sebuah perintah yang akan dijalankan satu
kali saja, yaitu saat bola pertama kali di load oleh movie. Perintah tersebut sering
kali digunakan sebagai alat untuk mengeset awal variabel-variabel yang akan
dipakai.
2. baris kecepatan = 10; dan batasbawah = 700; merupakan variabel yang akan
dipakai. Kecepatan menentukan arah pergeseran kordinat y, karena bernilai
positif, y akan bergeser ke bawah. Batas bawah digunakan sebagai pendeteksi
apakah kondisi bola menyentuh batas bawah layar terjadi atau belum.
Operator or
Operator or dalam flash dapat ditulis dalam 2 bentuk yaitu :
kondisi 1 || kondisi 2 atau kondisi 1 or kondisi 2
hasil dari operator or bernilai salah jika kedua kondisi bernilai salah.
Perhatikan contoh berikut :
Permasalahan
gerakan sebuah bola kekanan kemudian setelah berada di batas kanan layar, maka
bola bergerak kembali (memantul) ke kiri dan ketika bola berada dibatas kiri maka
bola kembali memantul ke kanan dan seterusnya.
Untuk menyelesaikan permasalahan tersebut, kita gambarkan dulu secara visual
menjadi :
Penjelasan program :
1. baris onClipEvent (load) { merupakan sebuah perintah yang akan dijalankan satu
kali saja, yaitu saat bola pertama kali di load oleh movie. Perintah tersebut sering
kali digunakan sebagai alat untuk mengeset awal variabel-variabel yang akan
dipakai.
2. baris kecepatan = 10; bataskiri = 100; dan bataskanan = 700; merupakan
variabel yang akan dipakai. Kecepatan menentukan arah pergeseran kordinat x,
karena bernilai positif, x akan bergeser ke kanan. Batas kanan dan batas kiri
digunakan sebagai pendeteksi apakah kondisi bola menyentuh batas kanan atau
bataskiri sudah terjadi atau belum.
3. baris onClipEvent (enterFrame){ berarti perintah yang berada dalam blok {}
akan dijalankan secara berulang setiap seperduabelas detik secara terus menerus
hingga movie ditutup.
4. baris _x += kecepatan; berarti kordinat x dari bola akan ditambah sejumlah nilai
dari variabel kecepatan.
5. baris if (_x<bataskiri or _x>bataskanan){ berarti jika kordinat x lebih besar
dari variabel bataskanan atau kordinat x lebih kecil dari variabel batas kiri maka
perintah dalam blok {} akan dijalankan.
6. baris kecepatan = -kecepatan; berarti apabila kondisi pada no 5 tercapai maka
apabila nilai kecepatan positif akan dijadikan negatif (menjadi 10) dan
sebaliknya jika nilai kecepatan negatif maka kecepatan akan diubah nilainya
menjadi positif (menjadi (-10) atau +10).
Operator not
Operator not berarti tidak sesuai dengan kondisi. Operator ini jarang dipakai dalam
sebuah aplikasi game. Operator not dalam flash dapat ditulis dalam 2 bentuk yaitu :
!kondisi 1 atau not kondisi 1. Operator not akan bernilai benar jika kondisi yang
dimasukan salah dan akan bernilai salah jika kondisi yang dimasukkan adalah benar.
perintah
for.
Bentuk
penulisan
operasi
for
adalah
sebagai
berikut
Penjelasan program :
1. Sebuah penulisan script di frame memiliki 3 tipe penulisan yaitu penulisan di
dalam suatu blok movie event atau mouse event, contoh onEnterframe =
function(){} dan penulisan tanpa movie event atau mouse event, contoh adalah
penggunaan for pada program yang kita buat di atas. Tipe penulisan yang lain
adalah kombinasi dari keduanya, contohnya akan kita dapati pada program di bab
selanjutnya.
2. baris for (i=1; i<=100; i++){ berarti perintah dalam blok {} akan dijalankan secara
terus menerus sebanyak 100 kali (nilai variabel i awal adalah 1 (i = 1) dan nilai i
pada variabel kondisi adalah 100 (i<=100), setiap saat i ditambah dengan angka 1
(i++) sampai i = 100. Setelah variabel i bernilai 100, maka pengulangan
dihentikan karena kondisi sudah tercapai.
3. baris angka += i+", ; berarti variabel angka (variabel yang ditampilkan oleh
dynamic text yang kita buat sebelumnya) setiap saat (karena action pengulangan
for) akan ditambah dengan number i dan string , .
Perhatikan penjelasan
berikut:
saat nilai i bernilai 1 maka variabel angka bernilai : 1,
selanjutnya nilai i bernilai 2 akibat scrip i++ maka variabel angka yang sudah
bernilai 1, ditambah lagi dengan 2, sehingga menjadi 1, 2, .
proses tersebut diulang secara terus menerus oleh script for sampai i bernilai 100
sehingga pada akhir proses diakhiri dengan nilai angka = ...,99, 100, .
Movie Clip
Movieclip merupakan sebuah movie kecil yang berada didalam movie utama.
Movieklip memiliki timeline sendiri, dan dapat ditampilkan dalam timeline movie
utama dengan satu frame saja atau lebih.
Mode action pada flash sering kali melibatkan sebuah atau lebih movieclip. Oleh
karena itu action script khusus untuk movieclip harus dipahami secara mendetail jika
kita ingin menjadi seorang flash developer.
Membuat Movieclip
Setelah pelajaran sebelumnya, mungkin kita akan menganggap bahwa membuat
movieclip
itu
mudah,
yaitu
dengan
membuat
sebuah
obyek,
kemudian
Dalam pemrograman game, tidaklah semudah itu. Kita harus memahami bagian yang
lebih mendetail. Untuk lebih jelasnya perhatikan contoh sederhana berikut :
Permasalahan :
buatlah sebuah animasi mobil yang bergerak kekanan dan berhenti saat berada di
kanan layar.
Untuk menyelesaikan permasalahan tersebut perhatikan gambar berikut :
visualisasi program
masalah yang muncul pada pembuatan program tesebut adalah pada bagian
menghentikan roda saat mobil berhenti. Sedangkan mengenai teknik menggambar,
akan dijelaskan pada bab pembuatan karakter game.
Perhatikan solusi atas permasalahan tersebut, berikut ini :
1. Buatlah file baru berukuran 800 x 600 pixel dan 12 fps.
2. Dengan menggunakan drawing tool buatlah sebuah gambar frame roda, dan
warnailah sesuai dengan keinginan anda. Pastikan untuk menggambar velg
walaupun sederhana, agar roda kelihatan berputar saat digerakkan.
Hal tersebut dikarenakan adanya posisi roda yang sama pada frame 1 dan frame
15. Untuk memperbaikinya tekan Ctrl+W.
10. Pastikan terlebih dahulu anda tetap pada mode edit movieclip animasi roda.
Kemudian tambahkan sebuah layer, dan ubah namanya menjadi layer action.
11. Klik layer action frame 15 layer action, kemudian masukan keyframe. Buka
panel action dan ketikan action gotoAndPlay(1);.
12. Jalankan kembali movie dan sekaran perputaran roda sudah tidak janggal. Tutup
kembali dengan menekan Ctrl+W.
13. Seleksi movieclip animasi roda pada stage dan hapus dengan menekan tombol
Delete. Sebuah obyek yang sudah di convert menjadi symbol secara otomatis akan
masuk ke dalam library.
14. Buatlah sebuah gambar badan mobil menggunakan drawing tool. Kemudian
konvert menjadi symbol movieclip dengan nama mobil.
15. Double klik movieclip mobil tersebut untuk memasuki mode edit symbol.
Kemudian buat layer baru di atas layer 1 dan ubah namanya menjadi layer roda.
16. Buka library dengan menakan tombol Ctrl+L atau klik menu window>library,
jika panel library belum terbuka. Kemudian drag movieclip animasi roda dari
library ke stage sebanyak 2 kali. Atur posisinya.
Penjelasan program tersebut sama dengan penjelasan program latihan if. Untuk
menghentikan
roda
mobil
terdapat
pada
latihan
selanjutnya.
Instance Name
Telah dijelaskan pada bab sebelumnya bahwa identitas sesungguhnya suatu symbol
(movieclip atau button) adalah instance name. Kegunaan instance name adalah untuk
memberi identitas pada suatu symbol, sehingga kita bisa lebih spesifik memberikan
action pada movieclip atau button tertentu yang sudah diberi instance name.
6. Buatlah sebuah obyek lingkaran dengan menggunakan oval tool. Seleksi obyek
lingkaran tersebut kemudian convert menjadi. Pilih movieclip pada option
behaviour dan ketikan bola pada name.
7. Klik symbol bola tersebut, kemudian buka panel instance dan ketikan nama bola
pada instance name.
layer action
9. Klik frame 1 layer action, dan dalam kondisi frame 1 terseleksi buka panel action
bola.onEnterFrame = function() {
//menggerakan bola kekanan
this._x += 10;
};
10. Jalankan movie, maka bola akan bergerak ke kanan.
Penjelasan pola penulisan action script pada frame adalah sebagai berikut :
Sebelumnya lihatlah tabel perbedaan antara penulisan action script di frame dengan
penulisan action script di movieclip pada bab sebelumnya. Hal yang harus dipegang
adalah kata bola dalam baris bola.onEnterFrame adalah instance name bukan
nama symbol. Selain itu dalam mode penulisan action di frame, kita membutuhkan
action this. untuk mengawali sebuah object property atau obyek action.
7. Klik kembali movieclip mobil kemudian buka panel action dan tambahkah action
menjadi :
onClipEvent (load) {
kecepatan = 10;
bataskanan = 700;
}
onClipEvent (enterFrame) {
_x += kecepatan;
if (_x>=bataskanan) {
kecepatan = 0;
//menghentikan roda
roda_1.stop();
roda_2.stop();
}
}
8. Jalankan movie, maka ketika mobil melewati batas kanan, mobil akan berhenti
dan roda ikut berhenti.
Penjelasan program :
1. Baris roda_1.stop() berarti action stop() akan berimbas pada movieclip animasi
roda yang sebelumnya telah diberikan intsnce name roda_1 saja.
2. Baris roda_2.stop() memiliki penjelasan yang sama dengan penjelasan no 1.
3. Meskipun menggunakan movieclip yang sama yaitu movieclip animasi roda,
instance name harus berbeda agar bisa dipengaruhi oleh action.
4. Apabila script tersebut ditulis pada frame, maka bentuk penulisannya menjadi
mobil.roda_1.stop(); perhatikan bahwa dibagian depan diikuti dengan nama
instansi induknya.
Menggunakan Linkage
Selain instance name dalam flash juga terdapat istilah linkage sebagai identitas
pengenal suatu symbol (movieclip, button dan sound). Untuk menambahkan linkage
perhatikan contoh berikut :
1. buka panel library, kemudian klik kanan nama symbol dan pilih menu linkage,
maka akan muncul linkage properties. Ketikan nama linkage pada identifier,
aturan penulisan nama identifier sama dengan aturan penulisan instance name dan
pilih option export for action script, secara otomatis option export in first time
akan terpilih.
membuat linkage
2. Klik OK, maka pada library akan muncul nama linkage.
level dapat dimulai dari angka 9999 sampai +9999, dimana level 9999 adalah
kedalaman yang paling bawah dan +9999 adalah kedalaman yang paling atas.
sistem level dalam attachmovie.
2.
Satu level hanya dapat ditempati oleh satu obyek. Jadi kedalaman masingmasing movieclip harus berbeda.
3.
Bila kita meletakkan movieclip dengan cara manual (tidak menggunakan action),
secara otomatis level terbentuk mulai dari level 0.
Bagian property dapat ditulis atau tidak. Jika ditulis, bagian ini menyatakan properti
dari movieclip yang ditambahkan.
Untuk lebih jelasnya tentang penggunaan action attachMovie, perhatikan contoh
berikut :
1. Buatlah sebuah gambar lingkaran dan convert menjadi movieclip dengan nama
bola.
2. Hapus bola dari stage. Kemudian buka panel library dengan menekan tombol
Ctrl+L atau memilih menu window>library.
3. Pada library, klik kanan nama bola, kemudian pilih linkage. Pilih option export
for actionscript dan klik OK. Perhatikan bahwa identifier secara default akan
mengikuti nama symbol. Perhatikan gambar pada penjelasan mengenai linkage.
4. Klik frame 1, buka panel action. Kemudian ketikan action script berikut :
attachMovie("bola", "bola_1", 1, {_x:100, _y:100});
5. Jalankan movie, maka gambar bola akan muncul pada kordinat 100,100 pada
stage yang sebelumnya kosong.
Penjelasan program :
1. Sebelum menggunakan action attachMovie, diharuskan terlebih dahulu untuk
melinkage suatu symbol.
2. Menghapus movieclip bola dari stage dimaksudkan agar kita memulai program
dengan stage yang kosong, sehingga penambahan movieclip oleh action
attachMovie akan terlihat jelas.
3. Kata bola pada action attachMovie("bola", "bola_1", 1, {_x:100, _y:100});
merupakan nama identifier linkage.
4. Kata bola_1 pada action attachMovie("bola", "bola_1", 1, {_x:100,
_y:100}); merupakan nama instance name movieclip yang ditambahkan.
5. Kata 1 merupakan level tempat kita meletakkan movieclip bola.
6. Kata {_x:100, _y:100} merupakan bagian pengesetan poperti awal movieclip bola,
dimana kordinat x bernilai 100 dan kordinat y bernilai 100. Jika bagian ini tidak
ditulis, kordinat movieclip secara default adalah (0, 0).
Permasalahan :
Buatlahlah sebuah gambar lingkaran yang berderet memenuhi layar.
visualisasi program
Masalah tersebut dapat kita selesaikan dengan dua cara, yang pertama adalah secara
manual kita tata satu demi satu movieclip ke stage, dan cara lain dengan
menggunakan action script for sebagai berikut :
1. Buatlah sebuah gambar lingkaran
properties untuk mengubah ukuran obyek) dan convert menjadi movieclip dengan
nama bola.
Penjelasan program :
1. baris dalam = 0; merupakan pengesetan awal variabel kedalaman movieclip.
2. baris for (var i = 0; i<17; i++){ diikuti dengan baris for (var j = 0; j<13; j++){
disebut sebagai operasi pengulangan bertingkat. Dalam operasi pengulangan
attachMovie("bola",
"bola_"+i+"_"+j,
dalam++,
{_x:(i*50),
Contoh program berikut ini adalah aplikasi action duplicateMovieClip mode kedua,
sedangkan mode penulisan pertama akan dipakai pada program aplikasi pada bab
selanjutnya :
1. Buatlah sebuah gambar lingkaran dan convert menjadi movieclip dengan nama
bola.
2. Hapus bola dari stage. Kemudian buka panel library dengan menekan tombol
Ctrl+L atau memilih menu window>library.
3. Pada library, klik kanan nama bola, kemudian pilih linkage. Pilih option export
for actionscript dan klik OK.
4. Klik frame 1, buka panel action. Kemudian ketikan action script berikut :
attachMovie("bola", "bola_1", 1, {_x:100, _y:100});
bola_1.duplicateMovieClip("bola_2", 2, {_x:200, _y:100});
5. Jalankan movie, maka gambar bola akan muncul pada kordinat 100,100 dan
200,100 pada stage yang sebelumnya kosong.
Penjelasan program :
1. baris pertama merupakan perintah untuk menambahkan movieclip bola ke stage
dengan nama instance bola_1.
2. Selanjutnya pada baris kedua, movieclip bola_1 diduplikasi menjadi movieclip
berinstansi name bola_2, diletakkan pada kedalaman 2 dan diletakkan pada
kordinat (200, 100).
Contoh program berikut ini adalah aplikasi action removeMovieClip mode kedua,
sedangkan mode penulisan pertama akan dipakai pada program aplikasi pada bab
selanjutnya :
1. Buatlah sebuah gambar lingkaran dan convert menjadi movieclip dengan nama
bola.
2. Hapus bola dari stage. Kemudian buka panel library dengan menekan tombol
Ctrl+L atau memilih menu window>library.
3. Pada library, klik kanan nama bola, kemudian pilih linkage. Pilih option export
for actionscript dan klik OK.
4. Buatlah sebuah layer baru diatas layer 1 dan ubah namanya menjadi layer action.
Klik frame 1 layer action, buka panel action. Kemudian ketikan action script
berikut :
attachMovie("bola", "bola_1", 1, {_x:100, _y:100});
bola_1.duplicateMovieClip("bola_2", 2, {_x:200, _y:100});
5. Klik frame 1 layer 1. Buatlah sebuah tombol hapus, kemudian klik tombol
hapus, buka panel action dan ketikan script berikut :
on (release) {
bola_2.removeMovieClip();
}
6. Jalankan movie, tekan tombol hapus maka bola_2 hasil duplikasi dari bola_1
akan hilang akibat action bola_2.removeMovieClip();
Catatan : apabila kita menambahkan movieclip secara manual (dengan mendrag dari
library ke stage), action removeMovieClip yang dipakai adalah bentuk pertama.
Penjelasan mengenai hal tersebut akan dibahas pada bab selanjutnya.
Function
Pertama kita harus memberikan sebuah nama pada functioan yang akan kita buat.
Aturan pemberian nama function sama dengan aturan pemberian nama instansi.
Selanjutnya kita tentukan parameter atau variabel yang akan kita pakai dalam
fungsi tersebut.
Di dalam blok {} merupakan kumpulan perintah, yang digunakan untuk menyusun
sebuah function. Dalam contoh di atas, digunakan peritah return bilangan*bilangan
perintah return dalam hal ini adalah untuk menghasilkan suatu nilai.
penggunaan function
Pada contoh diatas baris trace(kuadrat(9)); berarti menampilkan pesan pada output
panel kuadrat dari 9. Contoh penggunaan yang lain adalah total = kuadrat(17);
maka dapat diartikan sebagai total = 289; . Function dapat dipakai berulang kali.
Array
Array adalah suatu kumpulan data yang bertipe sama. Contoh array nama-nama hari
berisi (minggu, senin, selasa, rabu, kamis, jumat, sabtu). Dalam flash
untuk membuat sebuah array terdapat 2 cara yaitu
}
}
// menampilkan data
trace(score);
2. Jalankan movie, maka pada output panel akan muncul angka yang beruutan mulai
dari yang tertinggi sampai terendah.
Penjelasan program :
1. baris score = new Array(100, 98, 105, 72, 31, 67, 280, 210, 67, 56); merupakan
pengesetan variabel bertipe array dan pengesetan isi datanya. Berarti nilai dari
score[5] = 67; karena penghitungan data dimulai dari angka 0.
2. baris banyakData = score.length; length merupakan action yang digunakan
untuk mengetahui jumlah data dalam array dan disimpan pada variabel
banyakData.
3. baris ke 4 sampai baris ke 16 merupakan sebuah prosedure yang mengurutkan
nilai variabel score dari yang tertinggi sampai yang terandah. Prinsip dasar
program pengurutan data adalah sebagai berikut :
1. Simpan bilangan pertama (for (i=0; i<=banyakData-1; i++) { )
2. Ambil bilangan kedua (for (j=i+1; j<banyakData; j++) { )
3. Bandingkan antara bilangan pertama dan bilangan kedua. (if
(score[j]>score[dataTerkecil]) { ).
4. Jika bilangan kedua lebih besar, maka balik posisi data-nya (dataTerkecil =
j;).
5. Kemudian balik nilai datanya. Sebelum membalik nilai data, kita
membutuhkan variabel penyimpan data pertama (penyimpanSementara =
score[i];)
6. Selanjutnya nilai data pertama di ubah menjadi = nilai data kedua (score[i] =
score[dataTerkecil];).
7. Sedangkan nilai data kedua di ubah menjadi = nilai data pertama, akan tetapi
berhubung nilai data pertama telah berubah menjadi nilai data kedua akibat
action (score[i] = score[dataTerkecil];), maka digunakanlah variabel
penyimpanSementara yang masih memiliki nilai awal dari data pertama
dengan menggunakan action (score[dataTerkecil] = penyimpanSementara;)
4. Selanjutnya data yang sudah diurutkan ditampilkan pada output panel dengan
action trace(score);.
variabel = [ ];
Cara membuat sebuah variabel bertipe array selanjutnya adalah dengan menuliskan
bentuk variabel = [ ]. Cara tersebut sama hasilnya dengan cara yang pertama.
Contoh aplikasi penggunaan action variabel = [ ]; adalah sebagai berikut :
Permasalahan :
Buatlah sebuah gambar berpola sebagai berikut:
[[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0],
[0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0],
[0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]];
this["kotak"+i+"_"+j].gotoAndStop(dataPola[j][i]+1);
}
}
}
gambarPola(pola, 100, 100);
7. Jalankan movie, maka akan didapatkan gambar yang diinginkan.
Penjelasan program :
1. Baris 1 sampai baris 11 merupakan baris tempat kita membuat variabel pola
bertipe array berdimensi 2 sebesar 11 x 11 data. Secara mudah dapat kita pahami
sebagai berikut : bila penulisan array diawali dengan satu tanda [ berarti array
tersebut berdimensi 1, contoh penggunaannya adalah score[2] =105. Sedangkan
apabila diawali dengan dua tanda [, berarti array tersebut berdimensi 2. Contoh
penggunaannya pola[4][2] = 1.
2. Baris ke 12 (function gambarPola(dataPola, xawal, yawal){ ) merupakan
sebuah fungsi untuk membuat gambar pola dengan variabel dataPola sebagai
informasi bentuk pola, xawal sebagai kordinat x dimulainya proses menggambar,
dan yawal sebagai kordinat y dimulainya prose menggambar.
3. Baris kedalaman = 0 merupakan pengesetan awal variabel yang akan digunakan
untuk menentukan kedalaman (level) dari movieclip yang akan dibuat.
4. Baris lebar = dataPola[0].length; digunakan untuk menghitung banyaknya
movieclip yang akan digambar ke arah samping. Perhatikan bahwa dataPola[0]
bernilai = [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], sehingga panjangnya adalah 11.
5. Baris tinggi = dataPola.length; digunakan untuk menghitung banyaknya
movieclip yang akan digambar ke arah bawah.
6. Baris for (var i = 0; i<lebar; i++) { dan for (var j = 0; j<tinggi; j++){ merupakan
operator pengulangan bertingkat untuk menggambar sesuai dengan pola.
7. Baris attachMovie("kotak", "kotak"+i+"_"+j, kedalaman++,{_x :
xawal+(i*40), _y : yawal+(j*40)}); akan menambahkan movieklip kotak ke
stage sebanyak 11 kali kearah samping dan 11 kali ke bawah, dengan level
kedalaman yang selalu ditambah 1 (kedalaman++), dan peletakan movieclip
dimulai dari kordinat xawal dan yawal. Sedangkan bilangan 40 diperoleh dari
ukuran panjang dan lebar movieclip kotak.
_root. dalam terjemahan bebas dapat kita artikan sebagai akar, _parent dapat
diartikan sebagai induk dan this dapat diartikan dengan symbol ini. Perhatikan
diagram berikut untuk lebih memahami 3 bentuk action tersebut:
_root.
Ada 3 bentuk dasar _root yaitu :
_root.action
Pada bentuk ini dibelakang _root. diikuti dengan action script lain seperti
gotoAndStop(); stop(); atau action yang lain. Bentuk ini pada dipakai untuk
mengakses movie utama. Perhatikan contoh berikut. :
1. Sebelumnya buka file latihan menggerakkan movieclip mobil pada latihan
sebelumnya (pada CD tutorial buka file program15-movieclip.fla). Kemudian
buka panel library.
2. Buatlah sebuah file baru dengan ukuran 800x600 pixel dan 12 fps.
3. Klik frame 2, kemudian masukan keyframe.
4. Pada frame 2, buatlah sebuah static text dengan kata finish.
}
}
7. Selanjutnya, buatlah sebuah layer baru diatas layer 1, dan ubah namanya menjadi
layer action.
8. Klik frame 1 layer action, buka panel action dan ketikan action :
stop();
9. Simpan file dan jalankan movie.
Penjelasan program :
1. Action stop(); diberikan pada frame 1 layer action agar movie tidak berjalan
secara looping (berulang).
2. Ketika mobil telah sampai di garis batas kanan, maka frame aktif dari timeline
movie utama dipindah ke frame 2 dengan action _root.gotoAndStop(2);
Perhatikan bahwa script tersebut ditulis pada movieclip mobil.
_root.variable / property
Pada bentuk _root yang kedua, dibelakang _root. diisi dengan variable, seperti
variable score, waktu dan sebagainya. Perhatikan contoh berikut :
1. Lanjutkan file latihan sebelumnya. Kemudian pilih menu file>save as dan
masukan nama baru. Maksud dari langkah ini adalah agar file proses kita tidak
hilang tertindih oleh file yang baru. Dalam proses kerja hal tersebut sering
diistilahkan sebagai work in progress.
2. Klik frame 1 layer action, kemudian tambahkan actionnya menjadi :
stop();
speed = 15; // mengatur kecepatan mobil dari frame
3. Selanjutnya klik mobil dan ubah scriptnya menjadi :
onClipEvent (load) {
kecepatan = _root.speed; // mengakses variabel speed pada frame 1 layer action
bataskanan = 700;
}
onClipEvent (enterFrame) {
_x += kecepatan;
if (_x>=bataskanan) {
kecepatan = 0;
_root.gotoAndStop(2);
}
}
4. Simpan file dan jalankan movie.
Penjelasan program :
1. Action speed = 15; diambahkan pada frame 1 layer action agar kita memiliki
variabel baru yang akan digunakan untuk mengatur kecepatan mobil.
2. Selanjutnya untuk mengakses variabel tersebut dari movieclip, digunakan action
kecepatan = _root.speed; sehingga dapat diartikan dengan kecepatan = 15;
_root.movieclip
Bentuk _root yang ketiga tersebut bedakan lagi menjadi 2 yaitu:
_root.instance movieclip.variable/property
Bentuk tersebut pada umumnya digunakan untuk mengakses variabel yang sudah
diset dari movieclip lain. Perhatikan contoh berikut :
1. Sebelumnya buka file latihan menggerakkan movieclip mobil pada latihan
sebelumnya (pada CD tutorial buka file program15-movieclip.fla). Kemudian
buka panel library.
2. Buatlah sebuah file baru dengan ukuran 800x600 pixel dan 12 fps.
3. Buatlah sebuah static text dengan kata finish, kemudian convert text tersebut
menjadi movieclip dengan nama finish.
movieclip finish
4. Klik movieclip finish, buka panel properties dan ketikan kata finish pada
instance name, kemudian buka panel action dan ketikan script berikut :
onClipEvent (load) {
_visible = 0;
}
5. Selanjutnya drag movieclip mobil dari library file latihan anda -(file tutorial
program15-movieclip.fla) yang sudah anda buka sebelumnya- ke stage, dan
letakkan disebelah kiri stage. Perhatikan peletakkannya :
Penjelasan program :
1. Movieclip finish pada awalnya diberi sebuah instance name agar bisa diakses
oleh movieclip lain.
2. Agar tidak tampak saat pertamakali movie dimainkan, maka property _visible
pada movieclip finish diset menjadi 0.
3. Ketika mobil telah sampai di garis batas kanan, maka movieclip finish
ditampilkan dengan script _root.finish._visible = 1; Perhatikan bahwa script
tersebut ditulis pada movieclip mobil dan dapat mengakses property milik
movieclip finish.
movieclip teksfinish
menggeser keyframe
6. Geser posisi movieclip teksfinish ke sebelah kiri di luar stage
7. Kemudian klik frame 30 dan masukkan keyframe. Geser posisi movieclip
teksfinish ke sebelah kanan di luar stage.
8. Klik kanan frame 20, kemudian pilih create motion tween, maka akan terbentuk
animasi teks yang bergerak ke samping.
9. Tambahkan sebuah layer di atas layer 1 dan ubah namanya menjadi layer action.
10. Klik frame 1 layer action, kemudian buka panel action dan ketikan action
stop();
2. Ketika mobil telah sampai di garis batas kanan, maka movieclip finish dimainkan
pada frame 2 dengan script _root.finish.gotoAndPlay(2); Perhatikan bahwa
script tersebut ditulis pada movieclip mobil dan dapat mengakses movieclip
finish.
3. Action and _root.finish._currentframe == 1 pada kondisi if diperlukan agar
movieclip finish tidak terperangkap di frame 2. Seandainya action tersebut
dihilangkan maka movieclip finish tidak akan bergerak.
_parent.
bentuk ini pada dasarnya memiliki fungsi yang hampir sama dengan _root. Perhatikan
diagram penggunaan _parent, dan dapat disimpulkan dengan bahasa sederhana
bahwa _parent digunakan oleh si anak untuk mengakses induknya.
this.
sedangkan bentuk this. akan berimbas pada movieclip dimana action this. tersebut
diletakkan. Ada dua hal mengenai penulisan this, yaitu :
1. this bisa tidak ditulis jika action dituliskan pada movieclip. Contoh:
onClipEvent(enterFrame){
_x += 20;
}
action tersebut ditulis pada movieclip, perhatikan bahwa this tidak ditulis didepan
action _x += 20; meskipun demikian perintah masih dapat dijalankan.
2. this harus dituliskan jika action dituliskan pada frame. Contoh :
bola.onEnterFrame = function(){
this._x += 20;
}
berbeda dengan cara pertama, penulisan pada frame untuk sebuah movie event
harus menggunakan action this. sebab jika this. tidak dituliskan, maka action akan
berimbas pada movie utama (dalam contoh ini, jika this. tidak ditulis, movie utama
yang akan bergerak ke kanan bukan movieclip bola).