Belajar Action Script Flash Dasar #1

Teory
Movie clip adalah salah satu jenis simbol yang tersimpan dalam library. Cara membuatnya dengan
mengambar langsung di stage lalu di klik kanan > convert to symbol > pilih type movie clip >ok atau
dengan pulldown menu insert > new symbol. Jangan lupa untuk memberi nama yang sesuai agar kita dapat
membedakan saat tampil di library.
Dalam penggunaanya movie clip dapat di modivikasi propertynya mengunakan script. Sebelum kita ubah
propertiesnya jangan lupa memberi instance name pada movie clip yang sudah terpasang pada state.
Caranya :
Clik movie clip pada stage lalu ubah namanya pada posisi seperti pada gambar dibawah ini :
ada gambar di atas instance name dari movie clip tersebut adalah mc. !ntuk merubah propertiesnya
mengunakan scrip gunakan perintah dibawah ini "jangan dijalankan semua #ction Script bersama$sama% :
mc.&' ( )* ++koordinat '
mc.&y ( )* ++koordinat y
mc.&'scale ( ,))* ++rasio ' "-%
mc.&yscale ( ,))* ++rasio y "-%
mc.&width ( ,))* ++lebar "pi'el%
mc.&height ( ,))* ++tinggi "pi'el%
mc.&alpha ( .)* ++tranparan "ma' ,))%
mc.&rotation ( ,.* ++rotasi "derajat%
mc.&visible ( /alse* ++nampak
mc.&' ( &'mouse* ++disamakan koor mouse
mc.&y ( &ymouse* ++disamakan koor mouse
Praktek
0angkah pertama. 1uatlah Movie clip dengan instance name mc kemudian isi /rame dengan salah satu #S
properties seperti teks diatas.
mc.&' 2(,* ++menambahkan , nilai di koordinat '
Jalankan animasi buatan anda dengan menekan ctrl$enter. 3alau anda amati dengan seksama terlihat bahwa
animasi hanya bergerak sekali.3arena scrip tersebut hanya dibaca sekali "saat loading% maka perubahannya
hanya sekali saja.
0angkah kedua. 1ila kita menginginkan script dibaca terus "berulang$ulang% maka kita harus membuat script
tersebut selalu dibaca hingga properties movie clip selalu berubah.
#da dua cara yang dapat dilakukan :
,. Menambah , /rame "/rame , dan /rame 4 sama% pada time line.
4. #tau dengan cara kedua5 yaitu merubah #S menjadi berikut:
on6nter7rame ( /unction "% 8
mc.&' 2(,*
9
Scrip diatas membuat perintah dibaca berulang$ulang sesuai pergerakan /rame "meski /rame hanya ,
sebenarnya /lash tetap menjalankan /rame sesuai dengan /rame rate yang telah di set pada properties
dokumennya%
Latihan
ada percobaan di atas telah dicoba mengerakkan ke kanan sebuah movie clip mengunakan action scrip5
bagaimana bila gerakanya kekiri: atau keatas atau kebawah atau kombinasinya atau properties properties
yang lain: ;ah... silahkan dicoba.
Posisi AS : Belajar Action Script Flash Dasar #2
erbedaan pemrograman #ction Script "#S% 7lash dengan pemrogramman yang lain adalah /lash memiliki
posisi yang berbeda$beda dan /ormat pengunaan yang berbeda pula. <al ini menjadi keunggulan sekaligus
kelemahan #S 7lash. Dengan posisi yang berbeda kita dapat menempatkan #S pada posisi yang lebih
menguntungkan5 tetapi disisi lain akan sangat membingungkan karena kita harus tahu apakan #S tersebut
terbaca atau tidak. Jadi ada kemungkinan #S benar tetapi tidak terbaca hingga jalannya program tidak sesuai
dengan keinginan.
Action Script pada Frame
ada posisi ini keberadaan #S ditandai dengan simbul huru/ a pada /rame yang bersangkutan. erhatikan
gambar kiri dibawah ini
#gar kita membuat script pada posisi yang tepat5 clik dahulu posisi yang dikehendaki. 1ila ingin membuat
#S pada /rame5 clik /rame hingga muncul tulisan #ction = 7rame di atas docker #S seperti gambar kanan
diatas. 0alu ketik listing program pada tempat yang disediakan. osisi ini telah kita coba pada belajar action
script sebelumnya
Action Script pada Button
engunaan #S pada button selalu diikuti dengan event. Jadi #S tersebut akan dijalankan pada saat event
berlangsung. 1ila ingin membuat #S pada button5 clik button hingga muncul tulisan #ction = 1utton di atas
docker #S seperti gambar dibawah ini. 0alu ketik listing program pada tempat yang disediakan.
ada gambar di atas terlihat bahwa even yang digunakan adalah on release5 Sedangkan even even yang ada
pada button adalah :
ress "artinya perintah dijalankan saat button ditekan+diklik%
>elease "artinya perintah dijalankan saat klik dilepas%
>elease ?utside "artinya perintah dijalankan saat klik dilepas di luar button%
>oll ?ver "artinya perintah dijalankan saat mouse berada di atas button%
>oll ?ut "artinya perintah dijalankan saat mouse berada di luar button%
Drag ?ver "artinya perintah dijalankan saat mouse melakukan drag di atas button%
Drag ?ut "artinya perintah dijalankan saat mouse melakukan drag di luar button%
3ey ress "artinya perintah dijalankan saat tombol keybort yang tertulis ditekan%
Sedangkan mc4.&alpha ( .) adalah perintah yang dijalankan saat even terjadi. Disini berarti saat tombol
dilepas setelah diklik maka akan menjalankan perintah membuat object transparan .) -.
ara mem!uat AS di !utton
,. 1uat movie clip kemudian dipasangkan instan name "misalkan mc4%
4. #mbil tombol yang telah tersedia pada library 1utton kemudian drag button tersebut ke state5 jika
tidak ada munculkan dengan perintah windows > commond libraries > Button.
@. 3lik tombol tersebut lalu pastikan kalau #ction yang akan ditulis berada pada button dengan
membuktikan seperti gambar diatas.
A. Buliskan scrip dibawah ini
on "press% 8 mc4.&rotation 2( ,.* 9
.. Best Movie dengan menekan kontrol enter dan perhatikan perubahan yang terjadi pada movie clip
mc4.
AS di mo"ieclip : Belajar AS Flash Dasar ##
#da @ macam posisi #S dalam /lash #S di 7rame5 #S di 1utton dan #S di movieclip5 untuk yang pertama
yang ke dua sudah dibahas pada post sebelumnya. Saatnya sekarang untuk membahas #S di movieclip.
Sama seperti #S pada button5 pengunaan #S pada movie clip selalu diikuti dengan event. Jadi #S tersebut
akan dijalankan pada saat event berlangsung. 1ila ingin membuat #S pada movie clip5 clik movie clip
hingga muncul tulisan #ction = Movie Clip di atas docker #S seperti gambar dibawah ini. 0alu ketik listing
program pada tempat yang disediakan. erhatikan gambar berikut.
Cambar pada lingkaran merah dibawah ini menunjukkan bahwa #S yang dibuat dipasang pada movieclip.
ada gambar diatas terlihat mengunakan event enter/rame yang berarti pada setiap mc menjalankan /rame
akan menjalankan script yang ditulis. #da beberapa event yang lain misalnya :
0oad : Saat movie clip loading
6nter7rame : Setiap movie clip menjalankan /rame
!nload : Saat movie clip di unload
Mouse down : Setiap klik mouse di tekan
Mouse up : Setiap klik mouse di lepas setelah di klik
Mouse move : Setiap mouse digerakkan
3ey down : Setiap tombol keyboard ditekan
3ey up : Setiap tombol keyboard dilepas setelah ditekan
ara mem!uat AS di !utton
,. 1uat movie clip
4. 3lik movie clip tersebut lalu pastikan kalau #ction yang akan ditulis berada pada movieclip dengan
membuktikan seperti gambar diatas.
@. Buliskan scrip dibawah ini
onClip6vent "enter7rame% 8 mc4.&rotation 2( ,.* 9
A. Best Movie dengan menekan kontrol enter dan perhatikan perubahan yang terjadi pada movieclip.
$parent dan $root : Belajar Action Script Flash Dasar #%
ada postingan kali ini saya akan sharing cara membuat perintah dari root ke dalam movie clip atau
sebaliknya. Dalam /lash5 semua perintah atau script digunakan untuk properties object yang ada di root.
Demikian pula dengan besaran atau variabel ada pada root dan berdeda atau tidak berhubungan dengan
segala hal yang ada di dalam movie clip. Bidak bisa dihubungkan dengan cara biasa tetapi harus ada perintah
khusus5 begitu pula untuk perintah$perintahnya. Misalnya anda akan memerintahkan objek+mc di dalam mc
untuk bergerak5 sedangkan perintahnya ingin anda letakkan di root. !ntuk kondisi sebalinya juga dapat
dilakukan.
!ntuk mempelajari postingan ini anda harus bisa mengunakan /lash dengan drawing /lashnya5 bila tidak
silahkan baca postingan saya ini. Selain itu anda harus memahami action script dasar /lash dasar5 bila tidak
silahkan pelajari postingan saya ini.
!ntuk memudahkan coba perhatikan ilustrasi dibawah ini :
Dalam ilustrasi diatas5 root "stage utama% terdapat movie clip ,"mc,% dan mc4. 1ila kita masuk ke dalam
mc, akan terdapat mca. ada root5 movie clip ,5 movie clip 4 dan movie clip a masing $ masing memiliki
time line yang tidak saling berhubungan5 demikian pula dengan segala yang berhubungan dengan action
script. Misalnya kita memasang #S di time line root hanya bisa merubah properties mc , dan mc 4.
Demikian pula dengan #S yang ada dalam time line mc, hanya dapat mengubah properties pada mc a tanpa
dapat merubah mc 4 yang ada di root.
erintah untuk mca yang ada di dalam mc, bisa dilakuakan dengan script berikut
mc,.mca.stop*
erintah untuk mc4 tetapi script ada di dalam mca bisa dilakuakan dengan script berikut
&root.mc4.stop*
Sedangkan untuk menghentikan time line mc, sedang script ada di mca dengan cara berikut.
&parent.root.mc,.stop*
<al ini juga berlaku untuk variable5 gunakan nama mc untuk mengunakan variable yang ada di dalam mc
dan mengunakan D&parent untuk mengunakan variabel , tingkat diatasnya atau mengunakan D&rootD untuk
ke tingkat utamanya
!ntuk lebih jelasnya silahkan mencoba membuat animasi dengan mengikuti langkah berikut.
,. 1uat gambar bola dengan ukuran 4)'4) seperti pada animasi dibawah5 kemudian ubah menjadi mc
dengan klik kanan con/ert to symbol. Jangan lupa memberi nama instan "mis bola%
4. buat gambar kotak "ukuran dalam ,4)',4)% yang mengelilingi bola seperti pada animasi dibawah.
3emudian kedua object "bola dan 3otak% di ubah menjadi mc dengan cara sama seperti langkah
sebelumnya. Jangan lupa diberi instan name "mis kotak%.
@. Cambar yang dibuat memiliki struktur bola menjadi seperti mca dan kotak seperti mc,.
A. 1uat tombol dan masing masing diberi instan name atas5 bawah5 kiri dan kanan.
.. ada time line root pasangkan #S seperti dibawah ini
naik.on>elease ( /unction"% 8
kotak.bola.&y $( ,)*
9*
turun.on>elease ( /unction"% 8
kotak.bola.&y 2( ,)*
9*
kiri.on>elease ( /unction"% 8
kotak.bola.&' $( ,)*
9*
kanan.on>elease ( /unction"% 8
kotak.bola.&' 2( ,)*
9*
E. Masuk ke dalam time line DkotakD dengan mendouble klik kotak dan selanjutnya clik mc bola
dengan maksud akan memasang #S pada mc ini dengan script dibawah ini
onClip6vent "enter7rame% 8
i/ "&'>.)% 8
&' ( .)*
&parent.&' 2( ,)*
9
i/ "&'F$.)% 8 &' ( $.)* &parent.&' $( ,)* 9 i/ "&y>.)% 8
&y ( .)*
&parent.&y 2( ,)*
9
i/ "&yF$.)% 8 &y ( $.)* &parent.&y $( ,)* 9 9
G. Simpan percobaan anda dan tekan ctrl$enter untuk mencobanya.
<al diatas hanyalah sebagai contoh5 dan dalam penerapanya dapat digunakan untuk perintah yang lain dan
peman/aatan yang lain
&otoAndPlay : Belajar Action Script Flash Dasar #'
Coto adalah perintah yang banyak terdapat pada berbagai bahasa pemrograman. Bak terkecuali pada #ction
Script 7lash. 1ahkan pada #S 7lash goto ada berbagai macam. ada pokoknya ada 4 macam goto yang
dibedakan karena proses melompatnya yaitu :
&otoAndPlay perintah ini digunakan untuk melompat ke suatu tempat dan langsung berjalan ke /rame
berikutnya atau animasi tetap berjalan tanpa berhenti.
&otoAndStop perintah ini digunakan untuk melompat ke suatu tempat dan berhenti5 jadi setelah melompat
ke tempat tertentu animasi akan berhenti.
Selain ke 4 perbedaan di atas5 goto juga dibedakan tujuannya+typenya.
Frame (um!er pada type ini perintah goto diikuti dengan angka numerik yang menunjukkan ke /rame
berapa animasi harus melompat.
Frame La!el pada type ini perintah goto diikuti dengan nama+label /rame yang berarti animasi akan
melompat ke nama+label /rame yang sesuai.
ne)tFrame *+ pada type ini perintah goto yang berarti melompat dan berhenti ke /rame berikutnya.
preFrame *+ pada type ini perintah goto yang berarti melompat dan berhenti ke /rame sebelumnya.
ontoh Penerapan
!ntuk lebih jelasnya mari kita membuat contoh aplikasinya. erhatikan gambar dibawah ini.
ada gambar di atas diperlihatkan sebuah
tampilan menu utama. erhatikan pada timelinenya5 disana terlihat ada , layer untuk #ction Script5 @ layer
untuk tombol navigasi dimana masing masing tombol memiliki saat tampil yang berbeda$beda5 tombol isi
yang masing$masing key/rame hanya ada , /rame dan layer background yang sama pada setiap /rame.
ada intinya ada @ kelompok /rame yaitu , kelompok yang terdiri dari , /rame tampilan menu utama dan 4
kelompok /rame materi yang berlabel hohm dan hkir. ada /rame , atau menu utama hanya ada #ction
Script
mc,.mca.stop*
Selain itu tampilan utama ada dua tombol yang digunakan untuk memilih menu. , tombol digunakan untuk
lompat ke materi Dhukum ?hmD dengan #ction Script
on "release% 8
goto#ndStop"DhohmD%*
9
Bombol yang kedua digunakan untuk lompat ke materi D<ukum 3irchho//D dengan action Sciprt
on "release% 8
goto#ndStop"DhkirD%*
9
dari kedua actionscript diatas dapat diartikan untuk melompat dan berhenti di /rame yang berlabel DhohmD
dan DhkirD.
ada gambar di atas memperlihatkan tampilan materi yang berisi @ tombol navigasi dimana masing masing
tombol memiliki masa tampil yang berbeda$beda. !ntuk tombol home berisi #crionscript
on "release% 8
goto#ndStop",%*
9
!ntuk tombol back berisi #crionscript
on "release% 8
prev7rame"%*
9
!ntuk tombol ne't berisi #crionscript
on "release% 8
ne't7rame"%*
9
Te)t Field : Belajar Action Script Flash Dasar #,
Be't 7ield adalah sesuatu yang penting pada bahasa pemrograman5 begitu pula pada /lash. Be't /ield dalam
/lash dapat diman/aatkan menjadi tiga hal5 yaitu teks untuk tampilan5 tek untuk input dan teks untuk
keluaran. ada postingan kali ini akan dibahas berbagai bentuk te't /ield dan contoh peman/aatan dalam
suatu program. !ntuk masalah te't /ield ini tidak ada perbedaan antara /lash dan /lash lite. Jadi semua script
di postingan ini berlaku pula untuk /lash lite5 yang membedakan hanya ukuran stage saja.
!ntuk mempelajari postingan ini tentu saja anda harus bisa mengambar dengan /lash5 pemrograman dasar
actions script dan /lash lite untuk aplikasi handphone. #da @ type te't /ield yang ada di /lash. @ te't /ield itu
adalah :
Ststic Te)t
Be't 7ield ini adalah teks diam yang tidak dapat diubah isinya secara script. Jadi teks ini adakan sama saat
membuat maupun saat program berjalan.
Dinamic Te)t
Be't /ield ini adalah teks yang isinya dapat diubah secara action script. Jadi teks ini dapat digunakan sebagai
teks yang merupakan output hasil pengolahann variabel dalam action script.
-nput Te)t
Be't /ield ini adalah teks yang isinya dapat digunakan untuk mengisi variabel. Jadi teks ini dapat digunakan
sebagai teks yang digunakan sebagai sarana memasukkan isi variabel dalam action script.
erhatikan gambar dibawah ini:
Dalam gambar diatas diperlihatkan properties sebuah te't /ield type input. #da A hal penting dapal
properties te't /ield yaitu
,. Bype Be't 7ield adalah Static Be't5 Dinamic Be't dan Hnput Be't"sudah dijelaskan diatas%
4. #uto 3ern sebuah /ungsi untuk te't type string5 untuk tipe numerik tanda centangnya di hilangkan
agar tidak mengacaukan program
@. Memberi background segi empat untuk dinamic dan input te't
A. Iariabel yang dipasangkan untuk te't /ield pada type dinamic dan input te't
ontoh Aplikasi
1uatlah tampilan seperti gambar dibawah ini.
Beks yang tampil adalah te't static sedang @ segi empat adalah 4 input te't /ield pada 4 di atas dengan
variabel Dbil,D dan Dbil 4D dan , input te't /ield ada dibawah dengan variabel DhasilD. 3emudian diantara
input te't dan dinamic te't ada empat tombol yang merupakan perintah untuk mengelola 4 bilangan.
#ction Script untuk tombol D2D
on "release% 8
hasil ( ;umber"bil,%2;umber"bil4%*
9
#ction Script untuk tombol D$D
on "release% 8
hasil ( bil,$bil4*
9
#ction Script untuk tombol D'D
on "release% 8
hasil ( bil,Jbil4*
9
#ction Script untuk tombol D+D
on "release% 8
hasil ( bil,+bil4*
9
Array : Belajar Action Script Flash Dasar #.
#rray adalah kumpulan data terstruktur yang memiliki type data yang sama. Data dalam array dapat kita
olah untuk berbagai keperluan. Data #rray ini hanya tersimpan pada komputer saat program dijalankan.
Selain terdapat array setiap data pada array memiliki inde' yang khusus untuk mengidenti/ikasikan setiap
data. Dengan demikian array kita dapat membuat kumpulan data dan mengolah serta meman/aatkan dengan
mudah. Seperti juga pada pemrograman lain5 #ction Script 7lash juga mengenal array.
0angkah pertama saat mengunakan array adalah mengidenti/ikasikan seperti #ction Script berikut
macamarray ( KL*
Contoh action script mengisi #rray
macamarray ( KL*
/or "i(,* iF(M* i22% 8
macamarray.push"i%*
9
trace "macamarray%*
Dengan #S diatas maka isi array macamarray "output dari perintah trace% adalah ,545@5A5.5E5G5N5M
Contoh action script mengetahui jumlah isi #rray
macamarray ( KL*
tampilarray ( KL*
/or "i(,* iF(M* i22% 8
macamarray.push"i%*
9
jisi ( macamarray.length*
trace "jisi%
Dengan #S diatas maka jumlah isi array macamarray "output dari perintah trace% adalah M
Contoh action script menghapus salah satu isi #rray
macamarray ( KL*
tampilarray ( KL*
/or "i(,* iF(M* i22% 8
macamarray.push"i%*
9
macamarray.splice".5 ,%
trace "macamarray%
Dengan #S diatas maka isi array macamarray "output dari perintah trace% setelah dihapus pada array ke .
sejumlah , data "inde' array dimulai dari )%adalah ,545@5A5.5G5N5M
ontoh Aplikasi
Salah satu man/aat array yang paling populer adalah peman/aatannya dalam mengacak soal dalam Ouis.
Setelah diacak kita dapat dengan mudah menampilkan sesuai dengan keinginan kita. #ction script untuk
mengacak soal sebagai berikut :
macamsoal ( ,.*
macamarray ( KL*
tampilarray ( KL*
/or "i(,* iF(macamsoal* i22%8
macamarray.push"i%*
9
/or "i(,* iF(macamsoal* i22% 8
acak ( random"macamarray.length%*
tampilarray.push"macamarrayKacakL%*
macamarray.splice"acak5 ,%*
9
trace"tampilarray%*
Penjelasan
#rti masing masing baris pada #ction Script di atas:
1aris pertama adalah memasukkan isi variabel macam soal "misalnya macam soal ,.%
1aris 4 dan @ Deklarsi array dengan nama macamarray dan tampilarray
1aris A5 . dan E mengisi array macamarray menjadi , sampai ,.
1aris G5 N5 M5 ,) dan ,, adalah mengambil secara acak5 menghapus data array yang diambil
kemudian mengisikan ke array tampilarray.
Dengan #ction script diatas maka kita akan mendapatkan array DtampilarrayD yang isinya acak antara ,
samapai ,.. Meskipun kita mengambit isi array DtampilarrayD secara berurutan kita akan tentap
mendapatkan nilai acak dan tidak ada yang keluar dua kali.
!ntuk penerapan dalam Puis di postingan sebelumnya serupa pada peman/aatan array di 7lash lite yang
dibahan dalam postingan sebelumnya.