animasi motion tween yang bisa mempermudah kita untuk memperoleh animasi yang
kita butuhkan.
Rotasi dalam Flash terbagi menjadi 3 yaitu :
1. CW (Clockwise) yaitu rotasi searah jarum jam
2. CCW (Counter Clockwise) yaitu rotasi berlawanan jarum jam
3. Auto rotation yaitu rotasi otomatis tergantung perubahan rotasi yang dilakukan
dengan transform tool.
Pada tutorial berikut, akan dijelaskan proses pembuatan animasi roda yang berputar dan
bergerak dari kiri ke kanan. Perhatikan langkah-langkah berikut :
1. Buatlah sebuah file baru. lalu dengan memakai Oval tool buatlah
sebuah lingkaran sempurna (dengan menahan tombol Shift saat membuat
lingkaran). Agar lingkaran terlihat berputar, maka perlu ditambahkan beberapa
jari-jari dan warna pembeda. Dalam contoh ini lingkaran dibagi menjadi 4.
51
2. Seleksi roda ini lalu convert menjadi movieclip dengan menekan
menu Modify > Convert to Symbol atau menekan tombol F8. saat n roda
pada nama, dan pastikan titik registrasi berada di tengah.
Gambar 66. Mengconvert Movieclip roda
3. Buatlah sebuah animasi roda dari kiri ke kanan, seperti pada tutorial sebelumnya
(Klik kanan frame 60 pilih Insert Keyframe, geser posisi roda ke kanan,
lalu klik kanan frame 25 dan pilih Add Classic Tween.)
4. Selanjutnya klik frame 25 (salah satu diatara 2 keyframe) dan perhatikan panel
properties. lalu pada opsi rotate pilih CW dan saat n 2 pada kolom times
untuk mendapatkan efek 2 kali putaran.
Gambar 67. Pengaturan rotasi
5. Simpan file, lalu jalankan animasi dengan menekan tombol Ctrl+Enter
Maka akan terbentuk sebuah file animasi bertipe SWF dimana 2 bola bergerak
dari kiri ke kanan dengan rotasi 2 putaran searah jarum jam. Perhatikan gambar!
Gambar 68. Hasil animasi rotasi
Animasi Roda Gigi
Dalam media pembelajaran yang terkait dengan ilmu teknik khususnya permesinan,
sering-kali terdapat materi tentang roda gigi. Membuat animasi roda gigi dengan Flash
dapat dilakukan dengan memakai metode animasi tween dengan penambahan rotasi.
Perhatikan contoh berikut :
1. Buatlah file baru. Dengan memakai Rectangle tool buatlah sebuah kotak
kecil yang akan kita jadikan sebagai gigi-gigi roda. Klik Selection Tool,
dekatkan kursor mouse ke ujung kotak lalu drag sedikit sehingga kotak terdistorsi
menjadi trapesium sesuai gambar.
Gambar 69. Membuat gigi
2. Seleksi gambar ini , lalu Convert to Symbol menjadi Movieclip
dengan nama “gigi”. Untuk membuat gigi-gigi yang berulang dalam bentuk
lingkaran, maka kita dapat melakukan metode “copy-paste”. Awalnya kita
tentukan jari-jari roda dengan menggeser pivot point dari gigi. Dengan
memakai Free Transform Tool, drag pusat movieclip jauh ke bawah sesuai
dengan jari-jari yang diinginkan.
Gambar 70. Drag titik pusat
3. Seleksi movieclip “gigi” ini , lalu Copy dengan menekan Ctrl+C.
Selanjutnya Paste in Place dengan menekan Ctrl+Shift+V. (Dalam Flash Paste
terdiri dari 2 macam, yaitu Paste standar – dimana objek baru akan diletakkan di
tengah layar, dan Paste in Place – dimana objek baru akan diletakkan tepat di
posisi saat mengcopy).
53
Selanjutnya dalam kondisi “gigi” hasil paste terseleksi, tekan tombol Ctrl+Alt+
S, untuk mengeluarkan panel Scale and Rotate. Ketikkan angka 30 pada kolom
rotate, maka gigi akan terotasi 30 derajat searah jarum jam.
Gambar 71. Scale and Rotate
4. Ulangi langkah nomor 3 di atas beberapa kali, sehingga akan terbentuk “gigi”
yang melingkar seperti pada gambar. Selanjutnya dengan memakai Oval
tool anda dapat menyempurnakan bentuk gigi-gigi ini menjadi sebuah roda
gigi.
Gambar 72. Tahapan membuat roda gigi
5. Untuk menyempurnakan bentuk roda gigi, seleksi semua objek lalu tekan
Ctrl+B (Break Apart). Break Apart yaitu mengubah kembali sebuah symbol
atau group menjadi grafik dasar yang dapat diedit kembali. Selanjutnya dobel
klik outline hitam yang ada dan hapus dengan menekan tombol Delete.
Selanjutnya klik Ink Bottle Tool (S) dan klik objek roda gigi untuk
menambahkan outline.
Gambar 73. Menyempurnakan roda gigi
6. Seleksi roda gigi ini , lalu Convert to Symbol menjadi Movieclip
dengan nama “roda gigi 1”. Dengan cara yang sama, buatlah 2 buah roda gigi
baru dengan ukuran yang berbeda, dan letakkan masing-masing roda gigi di
sebuah layer baru.
(Dalam contoh ini ukuran roda gigi dibuat memiliki rasio 1: 2 : 3).
Gambar 74. Pengaturan roda gigi
7. Untuk menambahkan animasi (misalkan untuk putaran roda terbesar berdurasi
10 detik), maka seleksi frame 300 seluruh layer (layer 1 sampai layer 3),
lalu tambahkan Keyframe. Selanjutnya seleksi seluruh frame di seluruh
layer dan Create Classic Tween.
Gambar 75. Menambahkan animasi
8. Selanjutnya untuk menambahkan rotasi, klik frame 1 layer 3 pada panel
Properties atur parameter rotate menjadi CW x1. klik frame 1 layer 2 pada
panel Properties atur parameter rotate menjadi CW x2 klik frame 1 layer 1
pada panel Properties atur parameter rotate menjadi CCW x1.
9. Simpan file dan jalankan animasi dengan menekan Ctrl+Enter, maka akan
terbentuk animasi roda gigi.
Animasi Motion Guide
Dalam membuat animasi terkadang kita membutuhkan sebuah gerakan yang tidak
beraturan, tidak seperti motion tween yang berbasis pada perubahan tempat/bentuk
dalam garis lurus. Sebagai contoh saat kita akan membuat sebuah animasi kupu-kupu
yang sedang terbang, maka secara riil kupu-kupu ini akan terbang secara bebas
(tidak lurus), sehingga untuk animasi yang seperti itu dibutuhkan sebuah garis bantu atau
disebut sebagai motion guide.
55
Pada tutorial ini akan dijelaskan cara membuat animasi pesawat yang bergerak mengikuti
sebuah pola, sebagai berikut:
1. Buatlah sebuah file baru. Selanjutnya klik menu File > Import > Import to
Stage lalu pilihlah sebuah gambar pesawat.png. Pesawat ini nantinya
akan kita gerakkan sesuai dengan pola guide.
Gambar 76. Mengimport gambar pesawat
2. Setelah gambar pesawat muncul di stage, klik pesawat lalu pilih menu
Modify > Convert to Symbol. saat n “pesawat” pada kolom nama, dan
pastikan titik registrasi-nya ada di tengah.
Gambar 77. Mengconvert symbol pesawat
3. Klik frame 200 lalu tambahkan keyframe.
4. Untuk menambahkan pola / guide yang akan menjadi lintasan dari gerakan
pesawat, klik kanan Layer 1, lalu pilih Add Classic Motion Guide, maka
sebuah layer baru akan muncul di atas layer 1.
Gambar 78. Add Classic Motion Guide
5. Klik frame 1 layer guide, lalu dengan memakai Pencil Tool atau Pen
Tool buatlah sebuah pola lintasan. Untuk membuat pola ini terdapat 2 syarat
yang harus terpenuhi : - garis yang dibuat tidak boleh putus - garis yang dibuat
memiliki 2 buah ujung (awal lintasan dan akhir lintasan).
Gambar 79. Membuat lintasan
6. Selanjutnya klik “pesawat” pada frame 1 lalu drag ke awal lintasan,
sampai menempel (agar menempel dengan baik, pastikan ikon magnet di drawing
tool menyala, dan pastikan lingkaran kecil di tengah movieclip berubah menjadi
lingkaran yang lebih besar).
Gambar 80. Drag ke awal dan ke ahir lintasan
7. Dengan cara yang sama klik “pesawat” di frame 200 lalu drag menuju akhir
lintasan.
8. Klik kanan frame 100 pada timeline lalu pilih Create Classic Tween.
Maka timeline akan berubah menjadi berwarna biru dan bergaris, dan animasi
pesawat bergerak mengikuti pola akan terbentuk.
57
Gambar 81. Animasi Motion Guide
9. Simpan file, lalu jalankan animasi dengan menekan tombol Ctrl+Enter.
Jika anda perhatikan pesawat akan bergerak mengikuti pola, akan tetapi posisi
pesawat tetap tegak. Agar pesawat dapat mengikuti pola lintasan, sekaligus
menyesuaikan rotasi pesawat terhadap lintasan, maka seleksi frame 100 layer 1
lalu buka panel properties dan mengaktifkan opsi Orient to path, maka
pesawat akan bergerak dan berotasi sesuai dengan pola.
Gambar 82. Penambahan Orient to Path
Memahami Movieclip
Movieclip merupakan salah satu jenis symbol di Flash yang memiliki timeline tersendiri.
Sehingga dapat dikatakan bahwa Movieclip merupakan sebuah animasi di dalam
animasi. Sebagai contoh saat akan membuat animasi kupu-kupu yang sedang terbang,
maka kupu-kupu memiliki animasi bergerak bebas atau mengikuti lintasan path, namun
demikian saat kupu-kupu ini bergerak melintasi lintasan sayap kupu-kupu
ini juga beranimasi/bergerak. Untuk lebih jelasnya perhatikan contoh berikut :
1. Buatlah file baru. Selanjutnya dengan memakai Drawing tools, buatlah
sebuah gambar kupu-kupu sederhana. Untuk mempermudah proses, buatlah satu
sisi sayap, lalu duplikasi dan balik posisinya dengan menu Modify >
Transform > Flip Horisontal.
Gambar 83. Flip Horizontal
2. Seleksi gambar ini dan Convert to Symbol menjadi Movieclip “kupu-
kupu”.
3. Klik frame 200 dan tambahkan Keyframe. Selanjutnya klik kanan Layer 1 dan
pilih Create Classic Motion Guide. Pada layer guide ini buatlah sebuah
lintasan dengan memakai Pencil Tool atau Pen Tool.
Gambar 84. Lintasan kupu-kupu
4. Seperti pada tutorial sebelumnya klik frame 1 layer 1 dan drag movieclip
“kupu-kupu” ke awal lintasan. Selanjutnya klik frame 200 layer 1 dan drag
movieclip “kupu-kupu” ke akhir lintasan.
5. Untuk menganimasikan kupu-kupu, klik kanan frame 100 layer 1 dan pilih
Create Classic Tween.
6. Simpan file, dan lalu jalankan animasi dengan menekan tombol
Ctrl+Enter. Maka akan didapatkan sebuah animasi kupu-kupu melintasi lintasan
seperti halnya pada tutorial gerakan pesawat sebelumnya.
7. Untuk menambahkan gerakan sayap kupu-kupu, perlu dilakukan perubahan pada
movieclip kupu-kupu. Klik keyframe 1 layer 1, lalu dobel klik movieclip
kupu-kupu untuk memasuki mode edit symbol.
59
Gambar 85. Mode edit symbol “kupu-kupu”
Pada mode edit symbol, timeline yang ada yaitu milik movieclip “kupu-kupu”,
sehingga tampak hanya 1 keyframe. Apapun yang dilakukan pada mode edit ini
hanya berdampak pada movieclip namun tidak merubah animasi yang sudah
dibuat sebelumnya di Scene 1.
8. Untuk mendapatkan animasi kepakan sayap kupu-kupu, klik kanan frame 5,
lalu tambahkan Blank Keyframe. Selanjutnya dengan bantuan Onion
skin, buatlah gambar sayap kupu-kupu dengan posisi yang berbeda. Klik kanan
frame 9 lalu Insert Frame untuk menambah durasi gambar sayap di
Keyframe ke dua.
Gambar 86. Animasi frame by frame kepakan kupu-kupu
9. Keluar dari mode edit dengan menekan Ctrl+E, lalu jalankan kembali
apikasi dengan menekan Ctrl+Enter. Maka akan didapati animasi gerakan kupu-
kupu melintasi lintasan sekaligus mengepakkan sayap.
Animasi Motion Guide dengan Movieclip Kompleks
Dalam beberapa kasus diperlukan animasi yang lebih komplek, misalnya membuat
animasi mobil yang melintasi sebuah bukit. Bagi animator profesional hal ini terdengar
mudah, namun bagi pemula akan sulit sekali memulai pembuatan animasi ini .
Mobil sendiri memiliki beberapa roda yang ikut bergerak bersama mobil. Tantangan
seperti ini yang harus diselesaikan secara bertahap. Perhatikan contoh berikut :
1. Buatlah sebuah file baru. Selanjutnya klik menu File > Import > Import to
Library lalu pilihlah 3 buah gambar (ada di dalam file sumber) yaitu
body_mobil.png, roda.png dan bukit.png. Pemilihan file bertipe PNG
dikarenakan file ini mendukung mode transparan.
Gambar 87. Import to Library
2. Setelah semua objek gambar muncul di Library, drag body_mobil.png dan
bukit.png ke Stage. Selanjutnya seleksi semuanya lalu klik kanan dan pilih
Distribute to Layers. Dengan opsi ini , masing-masing objek akan
dibuatkan layer masing-masing. (perlu diingat bahwa dalam animasi motion, 1
buah objek membutuhkan 1 keyframe khusus, sehingga dalam hal ini 1 objek
membutuhkan 1 layer khusus)
Gambar 88. Distribute to Layers
3. lalu atur posisi body-mobil dan bukit seperti tampak pada gambar.
Gambar 89. Pengaturan Objek
61
4. Klik kanan frame 100 layer bukit lalu pilih Insert frame. Penambahan
frame dimaksudkan untuk memberikan jeda waktu tanpa ada perubahan apapun.
5. Klik body-mobil lalu pilih menu Modify > Convert to symbol. saat n
mobil pada kolom nama, dan pastikan titik registrasi-nya ada di tengah.
Gambar 90. Mengconvert movieclip mobil.
6. Untuk menambahkan pola / guide yang akan menjadi lintasan dari gerakan mobil
klik kanan frame 100 Layer body-mobil lalu pilih Insert Keyframe,
lalu klik kanan Layer body-mobil, lalu pilih Add Classic Motion
Guide, maka sebuah layer baru akan muncul di atas layer body-mobil.
7. Klik frame 1 layer guide, lalu dengan memakai Pencil Tool atau Pen
Tool buatlah sebuah pola lintasan mengikuti pola bukit.
Gambar 91. Lintasan mobil di atas bukit
8. Selanjutnya klik movieclip mobil pada frame 1 lalu drag ke awal
lintasan, sampai. Atur rotasinya agar sesuai dengan pola lintasan. Dengan cara
yang sama klik mobil di frame 100 lalu drag menuju akhir lintasan, atur juga
rotasi lintasannya.
9. Klik kanan frame 50 Layer body-mobil lalu pilih Create Classic Tween
maka animasi mobil bergerak mengikuti pola akan terbentuk. Agar rotasi mobil
mengikuti pola lintasan, klik frame 50 layer body-mobil lalu buka panel
properties dan aktifkan opsi Orient to path.
Gambar 92. Animasi mobil tanpa roda
10. Setelah animasi mobil bergerak di atas bukit terbentuk, tahapan selanjutnya
yaitu menambahkan animasi roda. Hal yang harus dipahami yaitu roda
menempel ke body-mobil sehingga bergerak bersama-sama. Selain itu terdapat 2
roda yang sama bentuk dan gerakannya. Dalam kasus ini kita cukup
membuat 1 buah animasi roda dan lalu menduplikatnya menjadi 2.
11. Klik frame 1 layer body-mobil, selanjutnya dobel klik movieclip mobil, maka
kita akan memasuki mode edit movieclip mobil.
12. Buka panel Library lalu drag roda ke stage, atur posisinya (letakkan di
bagian depan). Selanjutnya seleksi gambar roda ini dan Convert menjadi
movieclip "animasi roda" .
Gambar 93. Movieclip animasi roda
13. Dobel klik movieclip animasi roda sehingga kita berada dalam mode edit
movieclip "animasi roda" Seleksi gambar roda, lalu Convert menjadi
movieclip "roda"
Gambar 94. Membuat animasi roda
63
14. Untuk membuat animasi roda berputar klik kanan frame 20 layer 1, lalu
pilih Insert Keyframe. Selanjutnya buka panel properties dan pilih CW pada
bagian rotate untuk menambahkan rotasi searah jarum jam.
Gambar 95. Membuat rotasi roda
15. Tekan MovieClip mobil untuk kembali ke mode edit movieclip mobil
Gambar 96. Kembali ke mode edit mobil
16. Selanjutnya Copy movieclip "animasi roda" lalu paste dan atur posisinya
sebagai roda belakang.
Gambar 97. Pengaturan roda belakang
17. Simpan project, tekan Ctrl+E untuk keluar dari mode edit symbol, lalu
jalankan animasi dengan menekan tombol Ctrl+Enter. Maka animasi mobil
bergerak di atas bukit akan terbentuk.
Gambar 98. Hasil animasi mobil
Animasi memakai Metode Graphic
Salah satu symbol dalam Flash yaitu graphic. Pada dasarnya graphic memiliki konsep
yang hampir sama dengan movieclip, yaitu memiliki timeline sendiri. Akan tetapi
terdapat perbedaan konsep mendasar antara movieclip dan graphic sebagai berikut :
- Movieclip yaitu sebuah animasi independen. Animasi ini akan bergerak secara
terus menerus apabila diletakkan di dalam sebuah keyframe. Sebuah movieclip
berdurasi beberapa frame dapat muncul/dimainkan secara penuh hanya dengan
menempati 1 buah keyframe.
- Dalam stage, Movieclip hanya ditampilkan pada posisi frame 1 saja. Animasi
Movieclip baru akan terlihat jika animasi/movie sudah dijalankan dengan
Ctrl+Enter. Sehingga saat di eksport menjadi file bertipe AVI/MOV, akan
terjadi kesalahan karena hanya menampilkan frame 1 dari movieclip - bukan
animasi secara keseluruhan.
- Movieclip selalu dimulai dari frame 1 dan tidak dapat diatur frame awal
dimulainya animasi. Kecuali diatur memakai kode Actionscript.
- Berbeda dengan symbol bertipe Graphic. Symbol bertipe Graphic membutuhkan
durasi frame, untuk menampilkan animasi secara penuh. Animasi graphic akan
tampak di timeline tergantung dari durasi (frame) yang ada pada timeline.
- Symbol bertipe Graphic memiliki opsi pengaturan untuk awal animasi, waktu
animasi dan pemutaran ulang animasi. Sehingga dapat digunakan untuk
memanipulasi waktu dari animasi yang dibuat.
- Symbol bertipe Graphic tidak dapat diakses memakai kode Actionscript.
Sehingga proses pengaturan animasi harus dilakukan secara manual.
Meskipun terdapat perbedaan, pada dasarnya masing-masing symbol dapat diganti type
nya melalui panel Properties, sehingga kita dapat menyesuaikan dengan kebutuhan.
Untuk lebih memahami konsep animasi dengan metode graphic, perhatikan contoh
membuat animasi roller coaster sebagai berikut :
1. Buatlah sebuah file baru, lalu dengan memakai Drawing tools buatlah
sebuah gambar gerbong kereta roller coaster seperti pada gambar.
65
Gambar 99. Gerbong roller coaster
2. Seleksi gambar ini , lalu letakkan di sebelah kiri luar Stage.
Selanjutnya Convert to Symbol menjadi graphic “animasi roller coaster”.
Gambar 100. Posisi dan convert to symbol graphic “animasi roller coaster”
3. Dobel klik graphic “animasi roller coaster” untuk memasuki mode edit symbol.
Selanjutnya buatlah sebuah animasi motion guide pada timeline dengan durasi
200 frame. Untuk melakukannya Convert to Symbol terlebih dahulu gambar
gerbong menjadi movieclip “gerbong”. (Perhatikan bahwa meskipun sebelumnya
kita sudah mengconvert gerbong menjadi graphic “animasi roller coaster”, namun
saat memasuki mode edit symbol, gambar gerbong ini perlu di convert
sekali lagi agar dapat dianimasikan)
Gambar 101. Mengconvert kembali gerbong menjadi movieclip
4. Untuk membuat animasi motion guide, klik frame 200, lalu tambahkan
Keyframe. Selanjutnya tambahkan Layer Guide dan buatlah sebuah lintasan
roller coaster dengan Pencil tool. Drag “gerbong” yang berada di frame 1 ke awal
lintasan dan “gerbong” yang berada di frame 200 ke akhir lintasan. Klik kanan
frame 100 layer 1 dan pilih Create Classic Tween, dan aktifkan opsi Orient to
Path pada panel properties agar gerbong bergerak dan berotasi mengikuti pola
lintasan.
Gambar 102. Animasi motion guide roller coaster
5. Kembali ke Scene utama dengan menekan Ctrl+E. lalu jalankan aplikasi
dengan menekan Ctrl+Enter. Maka tidak akan muncul animasi yang diharapkan.
Hal ini dikarenakan pada Scene 1 hanya ada 1 frame saja, sedangkan graphic
“animasi roller coaster” memiliki durasi 200 frame. Sesuai dengan konsep
sebelumnya bahwa sebuah graphic membutuhkan durasi frame untuk
menampilkan animasi yang ada di dalamnya.
6. Untuk menampilkan graphic “animasi roller coaster” seutuhnya, klik kanan
frame 200 dan pilih Insert Frame (Perhatikan bahwa disini tidak ada perubahan
apapun, hanya penambahan durasi, sehingga cukup ditambahkan frame tidak
perlu keyframe). Jalankan kembali aplikasi dan akan muncul animasi seutuhnya.
Berbeda dengan Movieclip, saat anda tekan tombol Enter (Play), maka
animasi akan tampak di Stage. Selain itu apabila anda seleksi graphic “animasi
roller coaster” dan anda perhatikan panel properties, maka akan terdapat opsi
khusus yaitu opsi Looping.
7. Untuk menambahkan gerbong ke dua, Copy graphic “animasi roller coaster”,
lalu Paste in Place (Ctrl+Shift+V). Klik gerbong ke 2 ini , lalu
pada panel Properties pada bagian Looping ubah parameter First menjadi 7.
Maksud dari pengaturan ini yaitu untuk mengatur waktu dijalankannya animasi,
yaitu dimulai dari frame ke 7.
Gambar 103. Pengaturan gerbong ke 2
67
8. Untuk gerbong ke tiga, lalukan Copy Paste In Place lagi, dan ubah First
menjadi 13. Lakukan beberapa kali dengan nilai First bekelipatan yang sama
sehingga didapatkan beberapa gerbong roller coaster yang saling bersambungan.
(Perlu diperhatikan bahwa dalam 1 keyframe ini dapat terdapat beberapa symbol
sekaligus, hal ini dikarenakan tidak adanya penambahan animasi tween, karena
animasi tween sudah berada di dalam simbol graphic).
Gambar 104. Hasil duplikasi graphic “animasi roller coaster”
9. Sebagai sentuhan akhir, buatlah sebuah layer baru dan buatlah gambar
lintasan (rel) seperti pada gambar.
Gambar 105. Penambahan rel (lintasan)
Memanfaatkan Layer dalam Animasi
Layer pada dasarnya yaitu lapisan yang dapat kita susun berdasarkan urutan tertentu.
Semakin tinggi posisi suatu layer dalam Flash, berarti objek yang berada di layer ini
akan ditampilkan paling depan. Dengan memakai prinsip ini , kita dapat
memanfaatkannya untuk beberapa keperluan. Dalam contoh selanjutnya, akan dibuat
sebuah animasi Bulan mengitari Bumi. Hal yang menarik dalam animasi ini yaitu
posisi Bulan dimana pada suatu saat berada di depan Bumi, dan pada suatu saat
dibelakannya. Untuk lebih jelasnya perhatikan contoh berikut :
1. Buatlah sebuah file baru, lalu import 2 buah gambar yaitu gambar Bumi
dan Bulan ke stage dengan memilih menu File > Import > Import to Stage
Gambar 106. Import to Stage
2. Selanjutnya Convert to Symbol gambar ini menjadi movieclip “Bumi” dan
movieclip “Bulan”. Untuk mendistribusikan masing-masing symbol ke layer
baru, seleksi kedua movieclip, klik kanan dan pilih opsi Distribute to Layers.
Pastikan layer bumi pada posisi paling bawah.
Gambar 107. Distribute to Layers
3. Untuk membuat animasi bulan mengitari bumi dapat digunakan teknik motion
guide. Misal durasi dari animasi yaitu 200 frame, maka klik kanan frame 200
layer bumi dan pilih Insert Frame (hanya penambahan durasi tanpa perubahan
apapun, sehingga memakai Insert Frame). Selanjutnya klik kanan frame
200 layer bulan dan pilih Insert KeyFrame (karena bulan mengalami
perubahan/animasi, maka digunakan keyframe).
4. Untuk menambahkan pola lintasan bulan klik kanan layer bulan dan pilih Add
Classic Guide. lalu klik frame 1 layer Guide, dan buatlah lintasan bulan
dengan memakai Oval Tool (hanya outlinenya saja, dan hapus fill nya).
Dengan memakai Erase Tool, hapus sedikit dibagian kiri oval agar lintasan
memiliki awal dan akhir. Lihat gambar!
Gambar 108. Struktur layer
69
5. Klik frame 1 layer bulan, lalu drag movieclip bulan ke awal lintasan.
Selanjutnya klik frame 200 layer bulan dan drag movieclip bulan ke akhir
lintasan. Untuk menganimasikan movieclip bulan, klik kanan frame 100 layer
bulan dan pilih Add Classic Tween.
6. Jalankan animasi dengan menekan tombol Ctrl+Enter. Bulan akan bergerak
pada lintasan oval, akan tetapi posisi bulan selalu berada di atas bumi. Hal ini
dikarenakan layer bulan berada di layer bumi. Hal ini dapat kita manipulasi
dengan sedikit trik. Jika kita perhatikan pada saat bulan berada di frame 1 sampai
frame 100 posisi bulan sudah benar yaitu di depan bumi, akan tetapi pada frame
101 sampai 200 posisi bulan seharusnya berada di belakang bumi. Berarti pada
saat bulan melewati frame 100 layer bumi harus digeser ke atas.
Untuk melakukan hal ini , kita dapat memanipulasi layer. Klik kanan frame
100 layer 1 (layer paling atas), lalu pilih Insert Blank Keyframe.
Selanjutnya klik kanan movieclip “bumi” dan pilih Copy, lalu klik Blank
Keyframe 100 layer 1. Klik kanan Stage dan pilih Paste in Place. Sekarang
movieclip Bumi ada di layer paling atas (layer 1). Klik kanan frame 200 layer
1, dan pilih Insert Frame agar bumi di layer 1 terlihat sampai frame 200.
Gambar 109. Struktur layer
7. Jalankan animasi dengan menekan tombol Ctrl+Enter. Maka bulan akan
mengitari bumi dengan benar.
Gambar 110. Posisi bulan saat di depan dan di belakang bumi
Memahami Masking
Masking yaitu menampilkan suatu area dan menyembunyikan area lain dengan metode
menutupi dengan sebuah objek di atasnya. Dalam Flash, sebuah objek dalam sebuah
layer yang di tutupi oleh layer mask akan tampak, sebaliknya yang tidak tertutupi akan
tidak tampak. Untuk jelasnya perhatikan gambar berikut :
Gambar 111. Masking
Pada contoh berikut teknik masking digunakan untuk menambahkan efek kilau cahaya
pada sebuah teks :
1. Buatlah sebuah file baru, dengan memakai Text Tool mode Classic Text -
Static Text buatlah sebuah tulisan “MULTIMEDIA”.
Gambar 112. Text Tool
2. Klik kanan frame 50 layer 1, lalu berikan durasi dengan memilih Insert
Frame.
3. Buatlah sebuah layer baru (layer 2) di atas layer 1. Pada layer 2 ini , buatlah
sebuah animasi kotak putih yang bergerak dari kiri teks ke kanan teks dengan
langkah sebagai berikut : Dengan memakai Rectangle Tool buatlah sebuah
kotak berwarna putih (terang) di sebelah kiri teks lalu convert menjadi movieclip
“kotak”. Klik kanan frame 50 layer 2 lalu tambahkan Keyframe. Geser kotak
ini ke kanan teks. Klik kanan frame 20 dan pilih Create Classic Tween,
maka kotak akan bergerak dari kiri ke kanan.
71
Gambar 113. Posisi movieclip “kotak” terhadap teks
4. Klik kanan teks “MULTIMEDIA” lalu pilih Copy. Selanjutnya buatlah
sebuah layer baru (layer 3) dan letakkan di posisi paling atas. Klik frame 1
layer 3, lalu klik kanan Stage dan pilih Paste in Place untuk meletakkan
teks tepat di atas teks yang berada di layer 1.
5. Selanjutnya klik kanan layer 3, dan pilih opsi Mask. Maka tampilan layer pada
timeline akan berubah, dimana layer 2 termasking oleh layer 3.
Gambar 114. Masking
6. Jalankan animasi dengan menekan tombol Ctrl+Enter. Maka gerakan movieclip
kotak akan terbingkai oleh huruf, sehingga seolah-olah menghasilkan sebuah efek
highlight / cahaya.
Gambar 115. Hasil efek kilau dengan masking
Membuat Animasi Bumi Berotasi
Salah satu manfaat pengguaan masking yaitu untuk membuat sebuah animasi yang
melibatkan perulangan konten, sebagai contoh yaitu animasi bumi berotasi. Flash pada
tahun 2012 memiliki fitur tambahan yaitu pengolahan grafis berbasis hardware sehingga
memungkinkan pengolahan grafis 3 dimensional, dalam artian kita dapat membuat
animasi bumi berputar dalam format 3 dimensi. Namun demikian, proses animasi bumi
berotasi disini dapat kita buat dengan memakai teknik masking dan bersifat 2
dimensional. Untuk lebih jelasnya perhatikan langkah-langkah berikut:
1. Siapkan sebuah gambar peta dunia yang dapat dengan mudah kita dapatkan via
internet, sebagai berikut :
Gambar 116. Peta dunia
2. Selanjutnya buat file baru, dan Import to Stage gambar ini .
3. Untuk membuat gerakan bumi yang berputar secara penuh, maka diperlukan 2
buah gambar. Copy gambar peta dunia ini , dan Paste. Lalu atur posisinya
saling berurutan seperti pada gambar berikut :
Gambar 117. Pengaturan peta
4. Seleksi kedua gambar peta ini , lalu Convert to Symbol menjadi
movieclip “peta”.
5. Buatlah sebuah layer baru (layer 2). Pada frame 1 layer 2, buatlah sebuah
lingkaran di tengah stage sebagai bentuk dasar bumi dengan memakai Oval
Tool. Klik kanan frame 100 layer 2 dan pilih Insert Frame, untuk
menambahkan durasi.
Gambar 118. Bentuk dasar bumi
6. Klik frame 1 layer 1, lalu geser posisi movieclip “bumi “ ke sebelah kiri
dari lingkaran. Selanjutnya klik kanan frame 100 layer 1 dan pilih Insert
Keyframe, lalu geser movieclip bumi ke sebelah kiri. Perhatikan prinsip berikut :
73
- Bumi berputar dari barat ke timur, sehingga peta digerakkan dari kiri ke
kanan.
- Posisi peta pada frame 1 (awal) dan frame 100 (akhir) harus sama, agar
rotasi tidak putus.
Gambar 119. Posisi map terhadap lingkaran
7. Klik kanan frame 50 layer 1, lalu pilih Create Classic Tween. Maka peta
akan bergerak. Selanjutnya tambahkan Masking dengan cara klik kanan layer 2
dan pilih opsi Mask. Jalankan animasi dengan menekan tombol Ctrl+Enter,
maka akan di dapatkan animasi bumi berputar.
8. Untuk mempercantik tampilan, Copy lingkaran pada layer 2, selanjutnya buat
layer baru (layer 3) di atas layer 2 dan Paste in Place. Selanjutnya ubah warna
lingkaran ini menjadi Radial Gradient dengan pengaturan warna
transparan, sehingga bumi seolah-olah memiliki kesan 3 dimensi.
Gambar 120. Pengaturan warna gradasi
Animasi Shape Tween
Animasi Shape Tween yaitu animasi berdasarkan perubahan bentuk objek. Sebagai
contoh jika ingin membuat animasi transformasi bentuk lingkaran menjadi bentuk
bintang, maka dapat digunakan teknik shape tween. Perhatikan contoh berikut :
1. Buatlah sebuah file baru, lalu buatlah sebuah lingkaran dengan
memakai Oval Tool.
2. Klik kanan frame 25, lalu pilih Insert Blank Keyframe. Lalu dengan
memakai PolyStar Tool, atur option Tool Settings di panel properties dan
buatlah sebuah gambar bintang.
Gambar 121. PolyStar Tool
3. Klik kanan frame 10, lalu pilih Create Shape Tween. Jalankan animasi
dengan menekan tombol Ctrl+Enter, maka akan didapati sebuah transformasi
lingkaran menjadi bintang.
Gambar 122. Hasil animasi shape tween.
75
Bab VI
Dasar Pemrograman Action Script 3
Untuk membentuk sebuah interaktifitas dalam sebuah multimedia pembelajaran
interaktif diperlukan tahapan pemrograman. Pemrograman yaitu suatu kegiatan
menuliskan kumpulan urutan perintah ke komputer untuk mengerjakan sesuatu, dimana
instruksi ini memakai bahasa yang dimengerti oleh komputer atau dikenal
dengan bahasa pemrograman. Adobe Flash memiliki bahasa pemrograman yang disebut
sebagai Action Script, dan sejak tahun 2007 standart industi yang digunakan yaitu
Actionscript 3.0.
Untuk memahami dengan baik konsep dasar pemrograman Actionscript 3, maka
diperlukan pemahaman secara bertahap. Di lapangan sering ditemui seorang pemula
yang sudah memiliki konsep terlalu kompleks sehingga dalam proses membangun
aplikasi akan menemui banyak kendala. Seyogyanya mempelajari sebuah kode
pemrograman harus dimulai dari teknik yang paling dasar terlebih dahulu. Seiring waktu
belajar, maka kemampuan seseorang akan meningkat dan mampu mengerjakan projek
yang lebih kompleks.
Mencoba Kode Actionscript
Dalam Flash kode Actionscript dituliskan di action panel. Pada saat aplikasi dijalankan,
maka compiler akan mengecek kode baris demi baris mulai dari yang teratas sampai
kode baris terakhir. Dari proses pengecekan ini , apabila ditemukan kesalahan maka
proses akan berhenti dan kesalahan akan ditampilkan. Hal ini tentu saja mempermudah
seorang pengembang aplikasi untuk menyempurnakan kode. Sebagai contoh perhatikan
aplikasi sederhana sebagai berikut :
1. Buatlah sebuah file baru. lalu klik frame 1 layer 1 dan buka action panel
dengan menekan menu Window > Action (F9).
2. Dalam Flash Actionscript 3 hanya dapat diletakkan di sebuah frame atau
disebuah file terpisah ( dengan metode Class), berbeda dengan versi sebelumnya
yang dapat dituliskan di dalam movieclip dan tombol. Oleh karena itu perlu
selalu diingat bahwa sebelum menuliskan kode, terlebih dahulu harus menyeleksi
Keyframe tempat kode ini akan dijalankan.
Gambar123. Panel Action
3. Klik panel action, dan ketikkan kode berikut pada editor kode.
trace("belajar kode Actionscript");
4. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka akan muncul panel
Output dengan tulisan “belajar kode Actionscript”. Hal ini dikarenakan kode
trace berfungsi untuk menampilkan parameter yang ada di dalam tanda ( ); yang
dalam hal ini parameter ini berisi sebuah tulisan.
Gambar 124. Hasil pada output panel.
5. Selanjutnya ubah sedikit kode ini dengan menghapus salah satu tanda petik,
misalkan menjadi
trace("belajar kode Actionscript);
Selanjutnya jalankan kembali aplikasi dengan menekan Ctrl+Enter. Maka akan
muncul panel Compiler Errors dengan menampilkan pesan khusus bahwa
terjadi kesalahan pada kode yaitu kesalahan sintaks (Syntax Error) : A String
literal must be terminated before the line break atau dapat
diartikan sederhana bahwa sebuah variabel berupa String harus diakhiri dengan
tanda “.
77
Gambar 125. Tampilan Compiler Errors.
Dari percobaan di atas, diketahui bahwa penulisan sebuah kode sangatlah spesifik dan
detail. Sebuah kesalahan kecil saja bisa berakibat berhentinya aplikasi atau gagalnya
proses compiling kode. Selain itu juga terdapat istilah-istilah seperti Syntax, String
dan sebagainya yang bagi seseorang yang baru belajar pemrograman akan cukup
membingungkan. Untuk itu pada sub bab berikut akan dijelaskan secara mendetail
tentang fundamental dalam mempelajari Actionscript 3.
Syntax
Dalam pemrograman komputer sintaks berarti seperangkat aturan yang harus dipenuhi
dalam penulisan kode. Sintaks meliputi simbol, kata, dan fungsi yang dapat digunakan
serta bagaimana memakai nya dalam sebuah struktur kode. Kesalahan umum yang
sering dilakukan oleh programer yaitu kesalahan sintaks (Syntax error), dimana
kesalahan sintaks akan menyebabkan kode tidak bisa dijalankan oleh aplikasi. Berikut
yaitu aturan dalam penulisan Actioscript 3 (AS3).
1. Case Sensitive
Penulisan kode AS3 memakai format sensitif case, sehingga setiap kode
harus ditulis tepat sebagaimana mestinya. Satu perbedaan karakter akan
menghasilkan perbedaan, sebagai contoh 2 baris kode berikut berbeda.
1. var bilanganGenap:int;
2. var BilanganGenap:int;
2. Semicolons
Semicolons (;) atau titik koma dalam AS3 digunakan sebagai akhir dari sebuah
baris kode. Meskipun dituliskan dalam satu baris, jika ditambahkan tanda titik
koma dapat diartikan sebagai baris perintah baru
1. kode baris 1;
2. kode baris 2; kode baris 3;
3. Parentheses
Parentheses atau tanda kurung ( ) digunakan untuk mengubah urutan dalam
sebuah operasi/fungsi. Operasi yang diberikan tanda kurung akan dijalankan
terlebih dahulu oleh program. Perhatikan contoh berikut :
1. trace(2 + 3 * 4); // akan menghasilkan nilai 14
2. trace((2 + 3) * 4); // akan menghasilkan nilai 20
Parentheses juga dapat digunakan untuk memberikan masukan pada sebuah
fungsi. Perhatikan contoh berikut :
1. trace("Belajar AS3"); // menghasilkan kata Belajar AS3
2. trace(kuadrat(4)); // menghasilkan nilai 16
4. Code blocks
Dalam pemrograman AS3, satu baris atau lebih yang terletak di dalam kurung
kurawa { } disebut sebagai satu blok kode. Satu blok kode merupakan sebuah
paket yang biasanya digunakan dalam sebuah fungsi, class, loop dan sebagainya.
Perhatikan contoh berikut :
1. function kuadrat(num:Number):Number{
2. return num*num;
3. }
4.
5. for(var i:uint=1; i<10; i++){
6. var hasil_kuadrat:Number = kuadrat(i);
7. trace("hasil kuadrat "+i+" = "+hasil_kuadrat);
8. }
5. Whitespace
Whitespace merupakan istilah untuk jarak penulisan, tab, enter dan spasi yang
ditujukan untuk mempermudah penulisan kode. Perhatikan kode di atas, pada
baris 2 ditulis menjorok masuk, pada baris 4 sengaja dikosongkan agar terdapat
jarak antara fungsi kuadrat dengan operasi loop di baris 5 – hal ini
diistilahkan sebagai whitespace (ruang kosong). Perhatikan kode di bawah
berikut ini, yang bermakna sama namun ditulis dengan cara yang berbeda.
1. for(var i:uint=0; i<10; i++){
79
2. trace(i);
3. }
4.
5. for(var i:uint=0; i<10; i++){trace(i);}
6. Comments
Comments atau komentar merupakan catatan yang bisa ditambahkan pada kode
untuk mempermudah penjelasan kode. saat menulis kode dalam jumlah
banyak (misal 2000 baris kode) dibutuhkan penjelasan-penjelasan pada baris
kode untuk mempermudah proses pengecekan. Program secara otomatis akan
mengabaikan baris komentar, sehingga kita tidak perlu khawatir dalam
memakai komentar. Perhatikan contoh berikut :
1. trace("comment"); // komentar dalam 1 baris
2.
3. /* gunakan tanda ini jika ingin
4. komentar lebih dari satu baris */
Kegunaan lain dari komentar yang umum digunakan oleh programer yaitu
untuk menonaktifkan sementara kode yang tidak dibutuhkan. Pada saat proses
pengecekan kode yang panjang (debugging), sering kali beberapa baris kode
dinonaktifkan sementara untuk menguji kesalahan/kebenarannya.
7. Literals
Literals yaitu nilai yang kita tuliskan ke kode dalam bentuk angka, string atau
array.
Misal 1, 832009, “kata-kata”, [4, 5, 6] dan sebagainya.
8. Keywords and reserved words
Merupakan kata kunci dan kata-kata khusus yang telah dipakai oleh kode,
sehingga tidak bisa digunakan sebagai identifier. AS3 memiliki beberapa
keyword dan kata khusus yang pada panel actionscript akan diberi warna berbeda
dan akan diberikan peringatan apabila kita memakainya. Terdapat 3 jenis
keyword yaitu :
a. Lexical Keywords
Merupakan kata-kata yang sudah digunakan dalam rangkaian kode.
Misalnya as if return break super case
b. Syntactic Keywords
Merupakan kata-kata yang dapat digunakan sebagai idetifier, namun
memiliki fungsi tertentu jika digunakan dalam konteks yang benar.
Misalnya
each include override get dynamic static
c. Future Reserved Word
Merupakan kata-kata yang disimpan untuk fitur actionscript versi
selanjutnya. Misalnya abstract export throws float to
byte
Variable
Sistem kerja komputer yaitu dengan menyimpan data dan mengolahnya. Dalam
mengelola data komputer akan meyimpan sebuah nilai ke dalam memori, dimana
seorang programer dapat mengatur nilai ini dan memberikannya nama. Nama dan
nilai yang akan disimpan ke dalam memory itulah yang disebut sebagai variabel. Sebagai
contoh, saat kita menulisakan kode var waktu:Number = 60; ini berarti
komputer akan menyimpan sebuah data bernama waktu bertipe Number (angka) dan
bernilai 60. Variabel ini akan terus disimpan oleh memori komputer sepanjang aplikasi
berjalan.
Dalam menuliskan nama dan dilai variabel terdapat aturan yang harus dipenuhi, yaitu :
1. Tidak boleh memakai keywords atau reserved words (lihat point 8 subbab
sebelumnya)
2. Harus dimulai dengan huruf, underscore ( _ ) atau tanda dollar ( $ )
3. Masing-masing variabel harus unik (berbeda antara satu dengan yang lain)
4. Sebaiknya memakai kata-kata yang mudah dipahami, misal
var bilanganGenap : number = 2;
5. Lebih baik memakai sistem camelCase atau membedakan kata dengan huruf
kapital pada huruf pertama setiap kata.
6. Underscore ( _ ) hanya boleh untuk variabel yang bersifat private.
7. Tanda dollar ( $ ) hanya boleh untuk variabel yang bersifat static.
81
Access control attributes
Dalam pemrograman berbasis objek (OOP), masing-masing variabel, fungsi, metode dan
class dapat diakses secara khusus dengan memakai Access control attributes.
Terdapat 4 jenis Access control attributes yaitu Private, Public, Protected dan
Internal. Dalam buku ini tidak digunakan metode ini , sehingga tidak dibahas
secara mendalam.
Mendeklarasikan Variabel
Dalam mendeklarasikan variabel, AS3 memakai kata kunci var, diikuti dengan
nama variabel, jenis data dan nilai variabel. Perhatikan contoh berikut :
var nama_siswa: String = “Azka”;
var merupakan deklarasi variabel sehingga komputer mengalokasikan memorinya,
nama_siswa merupakan nama variabel yang akan disimpan ke dalam memori. String
merupakan jenis data dan “Azka” yaitu nilai dari variabel ini .
Constants
Berbeda dengan variabel yang bersifat dinamis, konstanta bersifat statis sepanjang
aplikasi berjalan. Nilai konstanta akan selalu tetap dan tidak dapat diubah kembali oleh
kode atau fungsi setelah pendeklarasiannya. Konstanta dalam AS3 dideklarasikan
dengan keyword const. Contoh :
const gravitasi:Number = 0.98; // mengeset nilai grafitasi
Data Types
Data types atau jenis data yaitu beberapa klasifikasi data yang digunakan dalam
pemrograman AS3. Secara mendasar jenis data di AS3 ada 7 yaitu String, Number,
int, uint, Boolean, Null, dan void .
1. String
String yaitu data yang bernilai tekstual dan penulisannya dalam AS3
memakai tanda petik, misalnya
var nama:String = “Izzan”;
2. Number
Number yaitu data yang bernilai angka tanpa batasan. Misal :
var nilaiUjian:Number = 97;
3. Int
Int yaitu kependekan dari integer yaitu data yang bernilai angka dari -
2,147,483,648 sampai dengan 2,147,483,647 (32 bit data). pemakaian variable
bertipe int lebih efisien dari segi kecepatan pengolahan data dibanding dengan
variabel bernilai Number.
4. Uint
Berbeda dengan int yang bernilai negatif sampai positif, uint hanya bernilai
positif yaitu mulai dari angka 0 sampai dengan 4,294,967,295.
5. Boolean
Boolean merupakan nilai benar atau salah. Dalam AS 3 bernilai true atau
false.
6. Null
Null merupakan nilai kosong atau tidak bernilai, namun bukan tidak
terdefinisikan (undefined).
7. Void
Void yaitu sesuatu yang tidak menghasilkan nilai, pada umumnya digunakan
untuk fungsi yang tidak mengembalikan/menghasilkan nilai spesifik.
Pada pengembangan berikutnya akan ditemukan tipe data yang lebih kompleks seperti
Array, Object, Date dan sebagainya.
Operators
Operators merupakan simbol yang digunakan untuk operasi matematika seperti
penjumlahan (+), pengurangan ( - ), perkalian ( * ), pembagian ( / ), sama dengan ( = )
dan sebagainya. Perhatikan contoh berikut :
1. trace(4*5+8); //menghasilkan 28
83
Function
Function atau fungsi merupakan satu atau beberapa baris kode dalam satu blok, yang
ditujukan untuk menyederhanakan suatu operasi dan dapat digunakan beberapa kali.
Sebagai contoh, saat membuat aplikasi yang melibatkan perhitungan jarak antara objek
dan mouse, maka fungsi menghitung jarak ini ditulis dalam sebuah blok kode yang
berisi beberapa baris. Untuk menghitung jarak tentunya ada beberapa variabel yang
diperlukan yaitu titik kordinat awal dan titik kordinat akhir, selanjutnya dilakukan
perhitungan memakai rumus pitagoras dan terakhir hasil perhitungan ditampilkan
oleh fungsi.
Mendefinisikan sebuah fungsi di dalam AS3 memiliki beberapa elemen sebagai berikut :
1. Deklarasi keyword function
2. Pemberian nama fungsi
3. Parameter (variabel) awal sebagai masukan
4. Hasil dari fungsi (return)
5. Blok kode fungsi (function body)
Untuk mempermudah pemahaman terhadap fungsi perhatikan beberapa contoh berikut :
1. function haloDunia():void{
2. trace(“Hello world”);
3. }
4.
5. haloDunia(); // Hello world
Pada fungsi haloDunia di atas, berisi satu baris kode yaitu kode trace. Kode trace
digunakan untuk menampilkan hasil di output panel. Sehingga jika kode ini
dijalankan, pada output panel akan muncul teks “Hello world”.
1. function kuadrat(angka:int):int{
2. return(angka*angka);
3. }
4.
5. trace(kuadrat(5)); //fungsi kuadrat 5 akan menghasilkan 25
6. trace(kuadrat(6)); //fungsi kuadrat 6 akan menghasilkan 36
Pada fungsi kuadrat ini , terdapat parameter angka yang selanjutnya diproses oleh
kode blok dimana hasil dari fungsi yaitu angka*angka. Berbeda dengan fungsi
sebelumnya yang tidak menghasilkan apa-apa (void), fungsi kuadrat menghasilkan
sebuah nilai yang bertipe int (:int). Sebuah fungsi baru akan dijalankan jika fungsi
ini dipanggil/diaktifkan. Sebagai contoh di atas fungsi kuadrat dipanggil 2 kali pada
baris ke 5 dan baris ke 6.
Loops
Loops atau operasi berulang yaitu satu blok kode yang dijalankan secara terus menerus
sampai kondisi yang ditentukan terpenuhi. Misalnya menghitung angka mulai dari angka
1 sampai 10, menampilkan data siswa satu kelas, mensortir nilai ujian beberapa peserta
sekaligus dan sebagainya. Secara umum loops dalam AS3 terbagi menjadi 3 yaitu for,
while dan do..while. Perhatikan stuktur operasi berulang for berikut ini :
1. for(var i:int=0; i<10; i++){
2. trace(i);
3. }
for merupakan keyword yang digunakan untuk operasi berulang
var i:int = 0; disebut sebagai inisiasi atau kondisi awal
i<10; disebut sebagai test atau kondisi dimana operasi berulang akan terhenti bila sudah
tercapai
i++; disebut sebagai update atau kondisi yang terjadi pada variabel penguji loop.
{ ... } disebut sebagai loop body atau blok kode yang dijalankan sepanjang loop
Apabila kode ini dijalankan akan menghasilkan angka 0 sampai 9 di layar. Output
0 karena merupakan kondisi awal saat inisiasi, selanjutnya bertambah 1 demi 1 karena
ada update i++, yang sama artinya dengan i = i + 1; dan diakhiri pada i = 9 karena tepat
pada kondisi i < 10;
Sejenis dengan for loop, operasi while loops hampir sama dengan operasi for
hanya saja tidak memiliki perintah untuk update, atau dengan kata lain blok kode akan
dijalankan secara terus menerus sampai kondisi terpenuhi. Untuk lebih jelasnya
perhatikan contoh berikut :
1. var angka:int = 0;
2. while(angka < 10) {
3. angka ++;
85
4. trace(angka);
5. }
Apabila kode ini dijalankan akan menghasilkan angka 1 sampai 10 di layar. Output
1 karena kondisi awal saat inisiasi yaitu 0 bertambah 1 akibat kode angka++, selanjutnya
bertambah 1 demi 1 karena adanya kode baris ke-3, dan diakhiri pada angka = 9 namun
karena adanya kode angka++; maka nilai akhir dari angka yaitu 10.
Sedangkan do..while loops yaitu format lain dari operasi while loops namun
test kondisi dilakukan di akhir. Perhatikan contoh berikut :
1. var angka:int = 0;
2. do{
3. angka++;
4. trace(angka);
5. }while(angka < 10);
Apabila kode ini dijalankan akan menghasilkan angka 1 sampai 10 di layar, dengan
penjelasan sama dengan operasi while loops.
Break dan Continue
Break dan continue digunakan untuk menginterupsi sebuah operasi berulang (loops).
Break digunakan untuk menghentikan operasi berulang saat suatu kondisi dalam blok
terpenuhi. Perhatikan contoh berikut :
1. for(var i:int=1; i<23; i+=4){
2. if(i==13){
3. break;
4. }
5. trace(i);
6. }
7. //output 1 5 9
Pada contoh di atas, operasi for seharusnya akan menaikkan nilai variabel i sebanyak 4
poin setiap langkah, sehingga menghasilkan angka 1, 5, 9, 13, 17, dan 20. Namun akibat
kondisi (i==13) terpenuhi maka kode break dijalankan dan operasi berulang dihentikan
sehingga hanya dihasilkan angka 1, 5 dan 9.
1. for(var i:int=1; i<23; i+=4){
2. if(i==13){
3. continue;
4. }
5. trace(i);
6. }
7. //output 1 5 9 17 21
Berbeda dengan kode break yang menghentikan secara langsung. Kode continue
akan melewatkan satu langkah apabila kondisi terpenuhi, maka pada kode di atas saat
(i == 13) terpenuhi perulangan dilewati satu langkah, sehingga angka 13 tidak muncul.
Conditional if
Kondisi if merupakan logika dasar sebagian besar bahasa pemrograman. Dengan kode
if sebuah kondisi dicek kebenarannya dan blok kode akan dieksekusi berdasarkan
kondisi ini . Perhatikan contoh berikut :
1. function bilanganGenap(angka:int):void{
2. if (angka % 2 == 0) {
3. trace(angka+" yaitu bilangan genap");
4. }
5. }
6.
7. bilanganGenap(6);
Pada baris 2 terdapat sebuah kondisi dimana angka mengalami operasi modulus (%)
dengan angka 2. Apabila angka dibagi dengan bilangan 2 menyisakan bilangan 0
(disimbolkan dengan operator == ) maka angka ini dipastikan sebagai bilangan
genap.
1. function bilanganGenap(angka:int):void{
2. if (angka % 2 == 0) {
3. trace(angka+" yaitu bilangan genap");
4. }else{
5. trace(angka+" yaitu bilangan ganjil");
6. }
7. }
8.
9. bilanganGenap(8); // 6 yaitu bilangan genap
10. bilanganGenap(3); // 6 yaitu bilangan ganjil
Pada contoh di atas digunakan operasi kondisi if .. else. Pada kondisi ini, apabila
kondisi bernilai salah, kode pada blok else akan dijalankan. Kondisi if .. else juga
dapat dilakukan beberapa kali dengan kondisi yang berbeda-beda. Perhatikan contoh
berikut:
87
1. function cekNilai(nilai:int):void{
2. if (nilai < 6) {
3. trace("Maaf anda tidak lulus");
4. }else if (nilai < 8){
5. trace("Lumayan!, anda mendapat nilai C");
6. }else if (nilai < 10){
7. trace("Hebat!, anda mendapat nilai B");
8. }else{
9. trace("Luar biasa!, nilai sempurna");
10. }
11. }
12.
13. cekNilai(7); // Lumayan!, anda mendapat nilai C
Pada kondisi if .. else if di atas, pengecekan logika dimulai dari kondisi teratas
dan apabila terpenuhi maka akan dilanjutkan ke logika berikutnya. Sehingga saat kode
cekNilai(8); dijalankan, maka kondisi (nilai < 6) terpenuhi, kondisi (nilai < 8),
sedangkan kondisi (nilai < 10) tidak terpenuhi. Untuk itu ditampilkan hasil kondisi
terakhir yang terpenuhi yaitu (nilai < 8).
Conditional switch
Kondisi switch digunakan saat terdapat beberapa kondisi yang berbeda-beda.
Perhatikan contoh kode berikut :
1. function cekNilai(nilai:String):void{
2. switch(nilai){
3. case "A":
4. trace("Sempurna - anda mendapat nilai A");
5. break;
6. case "B":
7. trace("Bagus - anda mendapat nilai B");
8. break;
9. case "C":
10. trace("Lumayan - anda mendapat nilai C");
11. break;
12. case "D":
13. trace("Lebih giat lagi - anda mendapat nilai
D");
14. break;
15. case "E":
16. trace("Maaf anda tidak lulus");
17. break;
18. default:
19. trace("Masukan data salah");
20. break;
21. }
22. }
23.
24. cekNilai("C");
Pada kode ini beberapa kondisi telah ditentukan, dan saat kondisi yang dimaksud
terpenuhi di salah satu kode case, maka kode akan dijalankan sampai dengan eksekusi
kode break. Apabila tidak ada kondisi yang terpenuhi, maka blok kode default yang
akan dijalankan.
Array
Array yaitu sebuah stuktur data yang bisa digunakan untuk menyimpan beberapa
variabel dengan nama yang sama. Sebagai contoh data nama siswa kelas 1, data soal kuis
dan sebagainya. Perhatikan contoh berikut :
1. var namaHari:Array = ["Senin", "Selasa", "Rabu", "Kamis",
"Jumat", "Sabtu", "Minggu"];
2.
3. trace(namaHari[0]); //Senin
4. trace(namaHari[3]); //Kamis
Pada kode di atas dideklarasikan variabel namaHari dengan tipe Array. Variabel
ini memiliki beberapa nilai yaitu “Senin” sampai “Minggu”. Untuk memakai
data yang berada di dalam Array, dapat digunakan nama variable diikuti tanda [ no data
]. Contoh variabel namaHari[0] bernilai “Senin”, karena berada di urutan pertama
(dimulai dari angka 0), dan seterusnya.
Mengendalikan Timeline dengan Actionscript
Salah satu kegunaan actionscript yaitu untuk mengatur timeline. Dalam beberapa kasus
kita memerlukan fitur untuk mengendalikan animasi yang kita buat, sebagai contoh
dalam sebuah media pembelajaran terdapat animasi yang pada awalnya merupakan
gambar diam, namun setelah tombol ditekan gambar ini bergerak – hal ini
membutuhkan pengaturan yang melibatkan kode.
stop();
Kode stop(); berfungsi untuk menghentikan timeline pada frame dimana lokasi kode
ini berada. Untuk lebih jelasnya perhatikan contoh berikut :
89
1. Buatlah sebuah file baru. lalu dengan teknik Motion Tween, buatlah
sebuah animasi bola yang bergerak dari kiri ke kanan dengan durasi 30 frame.
2. Buatlah sebuah layer baru (layer 2), selanjutnya klik frame 1 layer 2. Buka panel
Action (F9), lalu saat n kode
stop();
Gambar 126. Peletakan kode stop();
3. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka aplikasi akan
memunculkan bola ini namun bola tidak bergerak. Hal ini dikarenakan
kode stop(); berjalan sehingga timeline berhenti.
4. Klik frame 1 layer 2, lalu drag Keyframe ini menuju ke frame 15.
Dengan kata lain kode stop(); saat ini berada di frame 15. Jalankan kembali
aplikasi dengan menekan Ctrl+Enter. Maka bola akan bergerak dan berhenti
tepat saat berada di posisi frame 15.
gotoAndStop();
Kode gotoAndStop(frame); berfungsi untuk melompat dan berhenti pada frame yang
diset dalam parameter frame. Untuk lebih jelasnya perhatikan contoh berikut :
1. Buatlah sebuah file baru. lalu dengan teknik Motion Tween, buatlah
sebuah animasi bola yang bergerak dari kiri ke kanan dengan durasi 30 frame.
2. Buatlah sebuah layer baru (layer 2), selanjutnya klik frame 1 layer 2. Buka panel
Action (F9), lalu saat n kode
gotoAndStop(15);
3. Jalankan aplikasi dengan menekan Ctrl+Enter. Maka aplikasi akan
memunculkan bola pada posisi frame 15 dan bola tidak bergerak.
gotoAndPlay();
Berkebalikan dengan kode gotoAndStop(frame); kode gotoAndPlay(frame);
berfungsi untuk melompat dan memainkan timeline mulai dari frame yang diset dalam
parameter frame. Untuk lebih jelasnya, pada tutorial di atas edit kode
gotoAndStop(15); menjadi
gotoAndPlay(15);
Jalankan aplikasi dengan menekan Ctrl+Enter. Maka aplikasi akan memunculkan bola
pada posisi frame 15 dan bola bergerak sampai frame 30, lalu kembali lagi ke frame 1.
Selanjutnya, karena di frame 1 terdapat kode ini , maka timeline akan melompat
langsung ke frame 15, sehingga animasi frame 1 sampai frame 14 terlewati.
91
Bab VII
Interaktifitas
Dalam perkembangan teknologi terdapat istilah media dan new media. New media
mengacu pada materi yang tersedia secara online, diakses melalui perangkat digital dan
pada umumnya memberikan pengalaman interaktif kepada penggunanya. Kebanyakan
teknologi yanng digambarkan sebagai "media baru" bersifat digital, sering memiliki
karakteristik yang dimanipulasi, melalui jaringan, padat, kompresibel, dan interaktif.
Sehingga menurut definisi ini , multimedia pembelajaran interaktif tergolong pada
kategori new media.
Lister (2003) menjelaskan bahwa sebuah media baru harus memiliki konsep dasar yang
menjadi karakteristik dari media baru, yaitu :
1. Digitality
Berarti seluruh data terpisah dari bentuk fisiknya (contoh : teks tidak lagi harus
berbentuk buku), data dapat disimpan dalam ruang yang kecil, data dapat diakses
dengan kecepatan tinggi, dan data dapat dimanipulasi dengan mudah.
2. Interaktivitas
Berarti bahwa pengguna dapat melakukan intervensi manipulasi dan intervensi
terhadap media yang diakses. Interaktivitas merupakan salah satu kelebihan dari
media barukarena memungkinkan : (1) pengguna menjadi memiliki kekuatan
untuk terlibat dengan teks media, (2) pengguna mempunyai hubungan yang lebih
independen dengan sumber-sumber, (3) pemakaian media yang bersifat
personal, (4) pengguna memiliki lebih banyak pilihan.
3. Hypertext
Hypertext yaitu istilah yang menggambarkan teks yang mampu
menghubungkan dengan teks lain yang berada di atas atau di luar teks ini .
Hypertext memungkinkan pengguna dapat membaca teks tanpa harus berurutan
dan memulai teks dari mana saja yang ia inginkan.
4. Dispersal
Berarti media baru sangat spesifik dari segi produksi dan konsumsi. Beragamnya
pesan dan sumber yang dimiliki oleh media baru menyebabkan audiens menjadi
lebih selektif, semakin tersegmentasi, dan adanya hubungan personal antara
pengguna dan media.
5. Virtuality
Berarti media baru dapat memberikan pengalaman kepada pengguna dalam
sebuah lingkungan yang dikonstruksi media di mana pengguna dapat melakukan
proses interaksi.
Dari beberapa karakteristik new media, karakter yang paling menonjol dalam multimedia
pembelajaran interaktif yaitu interaktivitas. William (dalam Jancowski & Hanssen,
1996) mendefinisikan interaktivitas sebagai derajat di mana partisipan dalam proses
komunikasi memiliki kontrol, dan dapat bertukar peran dalam mutual discourse. Dengan
memakai konsep m
