Modul adobe flash_cs.5
Transcript of Modul adobe flash_cs.5
Modul Adobe Flash CS.5
Tujuan Instruksional Umum
Mahasiswa dapat membuat media pembelajaran berbasis animasi, video dan audio (multimedia) secara
interaktif.
A. Mengenal Tools Pengolah Multimedia (Adobe Flash CS5)
Program ini berbasis vektor grafis, jadi aksesnya lebih cepat dan terlihat halus pada skala
resolusi layar berapapun. Program ini juga dapat diisi dengan bitmap yang di-impor dari
program lain. Salah satu keunggulannya adalah ukurannya yang begitu kecil namun dapat
menampilkan animasi web yang mengagumkan. Flash juga mempunyai kemampuan untuk
membuat animasi secara streaming, yaitu dapat menampilkan animasi langsung meskipun
proses download dan loading belum selesai seluruhnya. Selain itu, dengan Flash juga dapat
dibuat movie kartun dan aplikasi web interaktif yang memungkinkan pengguna dapat
berinteraksi langsung dengan aplikasi yang dibuat. Movie Flash juga bisa memasukkan unsur
interaktif dalam movie-nya dengan Action Script (bahasa pemrograman di Flash) sehingga user
bisa berinteraksi dengan movie melalui keyboard atau mouse untuk berpindah ke bagian-
bagian yang berbeda dari sebuah movie, memindahkan objek-objek, memasukkan informasi
melalui form, dan operasi-operasi lainnya.
Kelebihan lain yang dimiliki program Adobe Flash adalah mampu membuat tombol
interaktif dengan sebuah movie atau objek yang lain. Adobe Flash mampu membuat
perubahan transparansi warna dalam movie. Adobe Flash mampu membuat perubahan
animasi dari satu bentuk ke bentuk lain dan mampu membuat gerakan animasi dengan
mengikuti alur yang telah ditetapkan. Dengan Adobe Flash, file dapat dikonversi dan
dipublikasikan (publish) ke dalam file aplikasi (exe).
1
B. Memahami User Interface Adobe Flash CS.5
Ini adalah interface dari macromedia Adobe Flash CS5.
Gambar 1. Interface Adobe Flash CS5 (Caption)
Gambar 2. Lingkungan kerja adobe flash cs5 (Caption)
2
Toolsbox
Stage
ActionLayer
Timeline
Color/ swatchesPropertis
Library
Keterangan Lingkungan Kerja Adobe Flash CS5 :
Toolbox, kumpulan tool atau peralatan yang mempunyai fungsi-fungsi tersendiri untuk
berbagai keperluan seperti desain, editing, dan pengaturan gambar atau objek.
Title Bar, merupakan nama file atau judul program yang sedang aktif atau sedang
digunakan.
Action Script, actionScript adalah bahasa pemprograman di flash. Adobe Flash CS5
mendukung semua versi ActionScript 2.0. ActionScript digunakan untuk mengontrol
objek, navigasi, animasi, dll. Untuk membuat program yang dibuat lebih interaktif.
Timeline Panel, atau garis waktu mempunyai fungsi untuk membantu penempatan
objek pada fungsi waktu.
Stage, halaman kerja yang digunakan untuk menempatkan berbagai macam objek
flash yang akan ditampilkan.
Color Mixer Panel, panel yang berfungsi untuk pengaturan warna dari gambar atau
objek.
Transform
Library Panel, panel yang menyimpan objek-objek seperti movie clip, graphic, button,
sound, video, dll, yang digunakan dalam pembuatan aplikasi.
Layer, dapat dianalogikan sebagai kanvas suatu lukisan. Jumlah layer bisa lebih dari
satu, dalam kata lain berlapis-lapis. Layer yang berada paling atas adalah kanvas yang
terdepan.
Mengenal Toolbox dan Panel
Toolbox
Fasilitas Toolbox seperti telah dijelaskan sekilas diawal adalah sekumpulan tool atau alat
yang mempunyai fungsi-fungsi tersendiri untuk keperluan desaindsb, berikut ini
penjelasan setiap tool yang ada di Toolbox.
3
Gambar 3. Toolbox (Caption)
Tabel 1. Keterangan toolbox
No Gambar Keterangan
1
Arrow Tool (V) atau disebut juga Selection Tool berfungsi
untuk memilih atau menyeleksi suatu objek.
2 Subselection Tool (A), berfungsi menyeleksi bagian objek
lebih detail dari pada Selection Tool.
3 Free Transform Tool (Q), berfungsi untuk
menstransformasi objek yang terseleksi.
4 Gradient Transform Tool (F), berfungsi untuk
mentransformasi warna dari fiil objek yang terseleksi.
5 Lasso Tool (S), digunakan untuk melakukan seleksi dengan
mengambar sebuah garis seleksi.
6 Pen Tool (P), digunakan untuk mengambar garis dengan
bantuan titik-titik bantu.
7 Add Anchor Point Tool (=), berfungsi untuk menambah
Anchor Point dari garis, kurva atau gambar.
8 Delete Anchor Point Tool (-), berfungsi untuk menghapus
Anchor Point dari garis, kurva, atau gambar.
4
9 Convert Anchor Tool (C), berfungsi untuk mengkonfersi
garis, kurva atau gambar.
10 Text Tool (T), digunakan untuk membuat objek text.
11 Line Tool (N), digunakan untuk mengambar atau membuat
garis.
12 Rectangle Tool (R), digunakan untuk mengambar bentk
persegi panjang atau bujur sangkar.
13 Oval Tool (O), digunakan untuk membuat bentuk bulat
atau oval.
14 Poly Star Tool, digunakan untuk menggambar bentuk
dengan jumlah segi yang diinginkan.
15 Pencil Tool (V), digunakan untuk membuat garis.
16 Brush Tool (B), digunakan untuk mengambar bentuk garis-
garis dan bentuk-bentuk bebas.
17 Ink Bottle (S), digunakan untuk mengubah warna garis,
lebar garis, dan style garis, atau garis luar sebuah bentuk.
18 Paintbucket Tool (K), digunakan untuk mengisi area-area
kosong atau digunakan untuk mengubah warna area
sebuah objek yang telah diwarnai, paint bucket dapat
digunakan untuk mewarnai warna solid, pengisian warna
gradiasi dan pengisian bitmap.
19 Eyedropper Tool (I), digunakan untuk mengambil sampel
sebuah warna dari gambar atau objek.
20 Eraser Tool (E), digubakan untuk menghapus objek.
21 Hand Tool (H), digunakan untuk menggeser tampilan stage
tanpa mengubah pembesaran.
22 Zoom Tool (M,Z), digunakan untuk memperbesar atau
memperkecil tampilan stage.
5
23 Stroke Color digunakan untuk memilih atau memberi
warna pada suatu garis.
24 Fiil Color digunakan untuk memilih atau memberi warna
pada suatu objek.
25 Black and White digunakan hanya untuk memilih warna
hitam dan putih saja.
Adobe Flash Player
Flash Player digunakan sebagai player untuk menjalankan file-file yang berekstension .
swf (shock wave flash). Untuk mengeksekusi file fla. Ke swf , silahkan tekan ctrl + enter.
Gambar 4. Flash player (swf) (Caption)
Cara Menyimpan File
6
Klik File -> klik save as -> Ketik nama filenya -> Pilih atau buat folder baru untuk
menyimpan file -> Klik save.
Gambar 5. Menyimpan file (Caption)
C. Membuat Animasi Sederhana
1. Dasar Animasi
Dalam pembutan animasi selalu berhubungan dengan frame. Frame adalah suatu bagian dari
layer yang terdapat dalam panel timeline yang digunakan untuk mengatur pembuatan animasi.
Gambar. 6. Bagian Panel Timeline
Suatu animasi dapat berjalan oleh adanya perpindahan dari frame ke frame. Semakin panjang
frame yang dibutuhkan maka semakin lama animasi itu berjalan. Suatu animasi bisa terdiri dari
beberapa layer. Suatu layer dapat diikuti layer guide dan layer mask. Layer guide berfungsi
untuk memberikan panduan pada layer yang diguide. Layer mask berfungsi untuk
7
menyembunyikan serta menampilkan bagian lain pada layer dimasking. Berikut ini dasar-dasar
dari animasi.
Motion Tween
Motion Tween adalah animasi yang digunakan untuk menggerakkan objek yang sudah
dikonversi ke dalam bentuk simbol berdasarkan batas suatu keyframe tertentu. Simbol-
simbol dalam flash yaitu movie clip, button dan graphic.
Cara pembuatan animasi motion tween adalah :
Tentukan frame awal dari animasi
Buat objek animasi
Konversi objek ke dalam symbol yang diinginkan
Tentukan frame akhir dari animasi
Sisipkan create motion tween diantara frame awal dan frame akhir sehingga muncul
garis panah
Pada frame akhir tentukan letak posisi objek -> Eksekusi animasi dengan test movie.
Gambar. 7 Bentuk Layer pada Tehnik Motion Tween
Shape Tween
Shape Tween adalah animasi yang digunakan untuk mengubah satu bentuk ke bentuk
yang lain. Objek harus berupa objek normal (objek ter-break a part).
Cara pembuatan animasi shape tween
8
Frame Akhir
Objek
Twen ShapeFrame Awal
sama seperti pada motion tween, perbedaannya objek tidak dalam bentuk simbol.
Animasi ini posisi objek tidak berubah, hanya mengalami perubahan bentuk.
Gambar. 8 Bentuk Layer pada Tehnik Shape Twee
Teknik Guide
Teknik guide adalah teknik menggerakkan animasi sesuai guide yang telah dibuat pada
layer guide. Guide yang dibuat berupa garis yang mempunyai arah dan lintasan tertentu
Gambar. 9 Bentuk Layer Pada Tehnik Guid
Cara membuat Guide adalah sebagai berikut :
Buka lembar kerja Adobe Flash CS.5
Buatlah sebuah objek lingkaran dalam stage pada layer 1 dan frame 1
9
Frame AwalTwen Shape
Frame Akhir
Objek tidak terkonfersi dalam simbol
Layer yang di guideLayer guide
Garis guideObjek animasi
Membuat Motion Guide 1
Ubah lingkaran yang telah dibuat menjadi bentuk movie clip. Caranya klik kanan
pada objek lingkaran→convert to symbol→isikan Name dengan lingkaran, Type :
Movie clip, Registration berada di tengah→OK, maka akan menjadi seperti
berikut;
Membuat Motion Guide 2
Terdapat seleksi persegi disekeliling lingkaran.
Klik kanan pada layer 1, lalu pilih Add Classic Motion Guide.
10
Membuat Motion Guide 3
Lalu akan muncul Layer Guide.
Membuat Motion Guide 4
Pada Layer Guide buatlah lintasan untuk pergerakan dari objek lingkaran dengan
menggunakan Pencil Tool.
11
Membuat Motion Guide 5
Tempatkan lingkaran tepat diujung garis lintasan yang telah dibuat. Registration
point object (Titik tengah yang tedapat pada lingkaran) wajib tepat di titik paling
ujung garis.
12
Membuat Motion Guide 6
Membuat Motion Guide 7
13
Blok frame 10 pada masing-masing layer. Lalu klik kanan→Insert Frame
Membuat Motion Guide 8
Klik kanan pada frame 10 Layer 1→pilih Insert Key Frame
Membuat Motion Guide 9
Pada layer 1 frame 10 tersebut pindahkan objek lingkaran ke ujung garis lintasan
yang lain dengan posisi Registration point object tepat pada ujung garis .
14
Membuat Motion Guide 10
Klik kanan pada frame 1 layer 1→pilih Create Classic Tween
Membuat Motion Guide 11
15
Lalu time line akan menjadi seperti berikut.
Membuat Motion Guide 12
Lalu untuk mengujinya tekan Ctrl+Enter
Membuat Motion Guide 13
16
Teknik Masking
Teknik masking digunakan untuk menyembunyikan isi layer lain tetapi akan ditampilkan
saat movie dijalankan. Animasi masking mempunyai dua metode dasar, yang pertama
adalah area masking yang bergerak sedang objek yang dimask diam, yang kedua adalah
area masking yang diam sedang objek yang dimask bergerak. Kedua teknik tersebut akan
menampilkan animasi yang berbeda.
Gambar.10 Bentuk Layer Pada Teknik Masking
Membuat Animasi Huruf Dengan Masking
Siapkan tiga buah layer dengan cara menekan icon New Layer yang tersedia dibawah
Timeline. Perhatikan gambar dibawah !
Lalu layer akan bertambah seperti berikut :
17
Layer masking
Membuat Animasi Huruf Dengan Masking 1
Membuat Animasi Huruf Dengan Masking 2
Ubah nama Layer 1 dengan nama yang diinginkan. Disini silahkan dengan ganti dengan
nama Objek1 dengan cara klik dua kali pada Layer 1.
Membuat Animasi Huruf Dengan Masking 3
Klik frame 1 pada layer Objek1 dan buatlah sebuah teks pada Stage. Buatlah teks
bertuliskan “Maskingku” dengan warna bebas.
18
Membuat Animasi Huruf Dengan Masking 4
Sekarang ubah Layer 2 dengan nama Objek Copy dengan cara seperti mengubah nama
layer 1. Lalu Copy-kan teks “Maskingku” dari layer Objek1. Posisi harus sama persis
dengan cara klik kanan→Paste In Place di stage frame 1 Layer Objek Copy.
19
Membuat Animasi Huruf Dengan Masking 5
Seolah tidak ada perubahan, akan tetapi apabila teks tersebut digeser maka akan
terlihat teks tersebut sudah ter-Copy
Ubahlah warna teks”Maskingku” pada layer Objek Copy cengan warna yang berbeda
dengan teks “Makingku” di Layer Objek1.
20
Membuat Animasi Huruf Dengan Masking 6
Pembedaan warna tersebut akan berpengaruh ketika animasi berjalan. Warna kilatan
yang akan muncul, sesuai dengan warna teks pada Layer Objek Copy.
Ubah nama Layer 3 dengan nama Animasi. Lalu pada frame 1, buatlah objek dengan
warna bebas serta posisi seperti berikut :
21
Membuat Animasi Huruf Dengan Masking 7
Lalu, untuk menggerakkan animasi, tambahkan frame pada setiap layer dengan cara
blok frame 10 pada masing masing layer→klik kanan→Insert Frame. Maka akan
muncul seperti berikut :
Membuat Animasi Huruf Dengan Masking 8
22
Blok frame 10 pada layer animasi, Lalu klik kanan→insert key frame.
Membuat Animasi Huruf Dengan Masking 9
Ubah posisi objek animasi ke tempat yang berbeda
Membuat Animasi Huruf Dengan Masking 10
23
Agar animasi dapat berjalan dengan halus, maka dibutuhkan tweening. Caranya klik
frame 1 layer Animasi→klik kanan→Create Classic Tween hingga tampilan frame
menjadi seperti berikut :
Membuat Animasi Huruf Dengan Masking 11
Langkah terakhir klik kanan pada layer Animasi→mask. Maka tampilan akan seolah –
olah hilang dan kembali seperti semula. Akan tetapi hal tersebut menandakan masking
telah berhasil.
Lalu untuk melihat hasilnya, silahkan tekan tombol Ctrl+Enter maka akan jadi seperti
berikut ;
Membuat Animasi Huruf Dengan Masking 12
24
2. Mengenal Common Libraries
Common libraries adalah semacam perpustakaannya adobe flash. Untuk mengaktifkan dari
common libraries tersebut silahkan :
Klik Window
Klik Common Libraries
Klik library yang diinginkan (Buton, Classes, Sounds).
Gambar.11 Common Libraries
25
Ini adalah tampilan dari Common Library Button :
Gambar.12 Libraries Button
Ini adalah tampilan dari Common Library Classes :
Gambar.13 Libraries Classes
26
Ini adalah tampilan dari Common Library Sounds :
Gambar.14 Libraries Sounds
27
2.1. Membuat Variasi Teks
Didalam adobe Flash juga terdapat berbagai variasi teks yang bisa digunakan dalam membuat
animasi. Diantaranya ada Static Text, Dynamic Text, dan Input Text.
Static Text : Jenis Teks yang tidak dapat diubah secara dinamis, Tulisan yang tertera pada
Static Text tidak akan berubah selama movie dijalankan.
Gambar.15 Static Text
Dynamic Text : Jenis teks yang dapat diubah secara dinamis. Tulisan yang tertera pada
Dynamic Text dapat berubah selama movie dijalankan.
Gambar.16 Dynamic Text
28
Input Text : Jenis teks berupa kotak isian, dan pemakai dapat memasukkan input didalamnya.
Input text biasa digunakan dalam form aplikasi.
Gambar.17 Input Text
2.2. Membuat Teks
Teks yang dibuat Flash dapat berupa teks mendatar (horizontal), atau teks vertikal. Teks yang
kita buat
dapat dimodifikasi menggunakan Properties Text Tool.
Gambar.18 Properties Text Tool
Klik Text Tool pada Toolbox
Didalam Properties Text Tool isilah sesuai yang diinginkan.
Klik area dalam stage, sehingga muncul kotak tempat menuliskan teks.
29
D. Mengenali dan Membuat symbol
1. Mengenali Symbol
Symbol terdiri dari graphic, button, atau movieclip yang dibuat pada Flash Pro menggunakan
button (Action Script 2.0), Simple Button (Action Script 3.0), dan Movie Clip. Yang dapat
digunakan kembali dalam dokumen lain.
Gunakan symbol Graphic ( ) untuk gambar statis dan untuk membuat potongan
animasi yang terkait dalam timeline utama. Animasi interaktif dan suara tidak dapat
digunakan dalam symbol Graphic. Tambahkan symbol Graphic dalam dokumen flash karena
Graphic tidak membutuhkan timeline, tidak seperti button dan Movie Clip.
Gunakan symbol Button ( ) untuk membuat tombol interaktif yang merespon
klik mouse, rollover, atau perintah lainnya. Untuk informasi lebih lanjut, lihat tutorial
selanjutnya. (cari tutor ttg AS)
Gunakan symbol Movie Clip ( ) untuk membuat potongan-potongan animasi yang
dapat digunakan kembali. Movie Clip memiliki Timeline multiframe sendiri yang
independen dari Timeline utama-bisa disebut multiframe dalam Movie Clip tergabung
dalam Timeline utama yang dapat berisi control interaktif, suara, dan bahkan Movie Clip
yang lainnya. Selain itu, Movie Clip dapat diletakkan di dalam Timeline symbol Button untuk
membuat Button animasi. Sebagai tambahan, Movie Clip juga dapat diberi Action Script.
Gunakan symbol Font untuk meng-eksport sebuah font dan menggunakannya pada
dokumen Flash Pro yang lain.
2. Membuat Symbol
Membuat symbol yang berisi animasi yang dibuat dengan aplikasi Flash Pro memungkinkan
untuk membuat banyak variasi dan meminimalkan ukuran file. Jika animasi yang digunakan
berulang-ulang atau menggunakan gerakan yang sama-sebagai contoh, gerakan naik-turun
pada sayap burung. Untuk menambah symbol dalam dokumen, gunakan Library Assets yang
30
berisi symbol-symbol yang telah digunakan atau yang sedang digunakan. Dengan cara men-
drag symbol dari Library Assets ke dalam Stage.
Mengubah Sebuah Elemen Menjadi Symbol
Lakukan salah satu dari berikut
Pilih Modify -> Convert to Symbol atau dengan menekan shortcut F8
31
Drag elemen yang diseleksi ke panel Library
Klik kanan>dan pilih Convert to Symbol dari Context Menu
32
Di dalam kotak Convert to Symbol, tulis nama symbol dan pilih jenis symbol (Movie Clip, Button, atau
Graphic).
Klik OK.
*Setelah menjadi symbol, secara otomatis elemen yang dijadikan symbol akan masuk ke dalam
Library. Untuk mengedit symbol, dapat dilakukan dengan memilih Edit -> Edit Symbol atau
dengan Edit -> Edit In Place.
Membuat Symbol Kosong
Lakukan salah satu dari berikut :
Pilih Insert -> New Symbol
Klik tombol New Symbol pada kiri bawah pada panel Library
33
Pilih New Symbol dari menu panel Library di sudut kanan atas panel Library
Pada kotak dialog Create New Symbol, tulis nama symbol dan pilih jenis symbol.
Klik OK.
Untuk membuat isi symbol, gunakan timeline, menggambar dengan drawing tools, mengimpor media,
atau membuat turunan dari symbol lainnya.
34
Untuk kembali ke mode document-editing, lakukan salah satu dari berikut :
Klik tombol Back
Pilih Edit -> Edit Document
35
Klik nama scene di Edit Bar.
Flash Pro menambahkan symbol ke Library dan beralih ke mode symbol-editing. Dalam mode
symbol-editing, nama symbol muncul di kiri atas Stage, dan titik hitam menandakan
registration point symbol tersebut.
3. Membuat Symbol Button
Frame pertama adalah Up state, mewakili penampilan button setiap kali pointer mouse tidak
menyentuh button.
Frame kedua adalah Over state, mewakili penampilan button setiap kali pointer mouse menyentuh
button.
Frame ketiga adalah Down state, mewakili penampilan button setiap kali button diklik.
Frame keempat adalah Hit state, mendefinisikan area fisik yang merespon klik mouse. Daerah ini
terlihat setiap kali file SWF bermain di Flash Player.
36
Mengedit Symbol Button
Lakukan cara berikut :
Double klik pada button tersebut atau masuk edit kemudian pilih edit symbol
Untuk membuat isi symbol, gunakan timeline, menulis text , menggambar dengan drawing tools,
mengimpor media, atau membuat turunan dari symbol lainnya.
E. Sound dan Video
Tentang Jenis File yang Dapat di-Import
Graphic Format
File Type Extension File Type Extension
Adobe Illustrator .ai Adobe Photoshop .psd
AutoCAD DXF .dxf Bitmap .bmp
Enhanced Windows
Metafile
.emf Future Splash Player .spl
GIF dan Animated .gif JPEG .jpg
37
GIF
PNG .png Flas Player 6/7 .swf
Windows Metafile .wmf Adobe XML Graphic
File
.fxg
Sound Format
File Type Extension File Type Extension
Adobe Soundboth .asnd Wave .wav
MP3 .mp3
Video Format
File Type Extension File Type Extension
Video Adobe Flash .flv, .f4v Quick Time Movie .mov, .qt
Video for Windows .avi MPEG .mpg, .mlv, .m2p, .m2
t, .m2ts, .mts, .tod, .
mpe, .mpeg
MPEG-4 .mp4, .m4v, .avc Digital Video .dv, .dvi
3GPP/3GPP2 for
mobile devices
.3gp, .3gpp, .3gp2, .3
gpp2, .3p2
Import Sound
Pilih File -> Import -> Import to Library.
38
Pada kotak dialog Import, pilih file yang akan dimasukkan ke dalam Flash.
Import Sound ke Timeline
Import suara ke dalam Library lebih dahulu.
39
Pilih Insert -> Timeline -> Layer.
Pada Layer yang baru, drag Sound dari Library ke dalam Stage. Dianjurkan, tiap sound diletakkan pada
Layer yang berbeda.
Pada Timeline, pilih frame pertama yang berisi file sound
Pilih Window -> Properties -> klik tanda panah di sudut kanan bawah untuk memperluas Property
Inspector.
Pada Property inspector, pilih file sound dari pop-up menu.
Efek Pop-up Menu
Pilih salah satu efek dari pop-up menu :
40
None, untuk menghapus efek yang sebelumnya diterapkan.
Left Channel/Right Channel, untuk memainkan suara dari channel kanan/kiri
saja.
Fade In, secara bertahap meningkatkan volume suara.
Fade Out, secara bertahap mengurangi volume suara.
Custom, memungkinkan untuk membuat custom in dan out point
menggunakan Edit Envelope.
Pilih pilihan sinkronisasi dari pop-up menu.
Catatan : Jika memasukkan lebih dari satu sound dalam satu layer, gunakan pilihan
Stop.
41
Masukkan value untuk menentukan berapa kali suara mau diulangi (loop), pilih loop
untuk mengulangi suara terus menerus.
Untuk mengetes suara, tarik playhead ke frame yang berisi suara atau gunakan tombol
yang ada pada Controller menu.
F. Action Script
42
1. Menjelaskan Bahasa syntax action script 2.0
Pengunaan Action Script pada movie clip selalu diikuti dengan event. Jadi Action Script
tersebut akan dijalankan pada saat event berlangsung. Bila ingin membuat Action Script pada
movie clip, clik movie clip hingga muncul tulisan Action – Movie Clip di atas docker Action
Script. Lalu ketik listing program pada tempat yang disediakan.
Ada beberapa event yang lain misalnya :
Load : Saat movie clip loading
EnterFrame : Setiap movie clip menjalankan frame
Unload : 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
Key down : Setiap tombol keyboard ditekan
Key up : Setiap tombol keyboard dilepas setelah ditekan
G. Mengaplikasikan action :
play(),stop(),gotoAndStop(),gotoAndPlay
Goto adalah perintah yang banyak terdapat pada berbagai bahasa pemrograman. Tak
terkecuali pada Action Script Flash. Bahkan pada Action Script Flash goto ada berbagai macam.
Pada pokoknya ada 2 macam goto yang dibedakan karena proses melompatnya yaitu :
gotoAndPlay perintah ini digunakan untuk melompat ke suatu tempat dan langsung
berjalan ke frame berikutnya atau animasi tetap berjalan tanpa berhenti.
gotoAndStop perintah ini digunakan untuk melompat ke suatu tempat dan berhenti, jadi
setelah melompat ke tempat tertentu animasi akan berhenti.
Selain ke 2 perbedaan di atas, goto juga dibedakan tujuannya/typenya.
Frame Number pada type ini perintah goto diikuti dengan angka numerik yang
menunjukkan ke frame berapa animasi harus melompat.
Frame Label pada type ini perintah goto diikuti dengan nama/label frame yang berarti
animasi akan melompat ke nama/label frame yang sesuai.
43
nextFrame () pada type ini perintah goto yang berarti melompat dan berhenti ke frame
berikutnya.
preFrame () pada type ini perintah goto yang berarti melompat dan berhenti ke frame
sebelumnya.
Contoh Penerapan
Untuk lebih jelasnya mari kita membuat contoh aplikasinya.
Pada gambar di atas memperlihatkan tampilan materi yang berisi 3 tombol navigasi dimana
masing masing tombol memiliki masa tampil yang berbeda-beda. Untuk tombol home berisi
Acrionscript
on (release) {
gotoAndStop(1);
}
Untuk tombol back berisi Acrionscript
on (release) {
prevFrame();
}
44
Untuk tombol next berisi Acrionscript
on (release) {
nextFrame();
}
H. Load Movie
Biasanya cara yang kita gunakan dalam memasukkan movie clip adalah dengan memasukkan
movie clip tersebut kedalam library, setelah itu klik & drag file tersebut kita masukkan kedalam
frame yang kita inginkan. Apabila kita memasukkan movie clip secara langsung didalam project
falsh kita seperti itu, biasanya proses eksekusi/loading akan terasa lama, apalagi bila movie
yang dipanggil banyak, filenya besar dan komputer yang kita gunakan speknya minim pastilah
loadingnya akan lama. Berikut 2 cara untuk memanggil movie clip secara eksternal yang akan
meringankan loading movie clip kita.
Load movie dengan Level
File swf dan diisi dengan animasi dengan nama movie1
Buat file baru dengan nama movie2
Masukkan sebuah gambar pada stage
Buat sebuah tombol dan masukkan script berikut pada Action Panel
on (release) {
loadMovieNum (“movie1.swf”,1);
}
45
Test Movie
Load movie dengan Target
File swf dan diisi dengan animasi dengan nama movie1
Buat file baru dengan nama movie2
Masukkan sebuah gambar pada stage
Buat sebuah rectanggel tool dengan alpha 100%
Confert rectanggel tool tersebut menjadi movie clip dengan instant name “target”
Buat sebuah tombol dan masukkan script berikut pada Action Panel
on (release) {
loadMovie (“movie1.swf”,”targt”);
}
Test Movie
I. Membuat Kuis dengan Bantuan Action Script
Buka program Adobe Flash CS5.
Adobe flash akan melakukan initializing. Tunggu hingga selesai.
Lalu akan muncul jendela Adobe Flash Profesional CS5.
46
Pilih Action Script 2.0 pada kategori Create New.
Lalu akan muncul stage/lembar kerja Adobe Flash.
Lalu siapkan 3 buah layer. Masing masing beri nama script, content, dan background.
Pada layer content frame 1 isikan dengan judul pembukaan dari soal yang akan dibuat.
Bisa diiisi dengan kalimat pembuka sebelum menuju pada lembar soal.
47
Setelah dirasa cukup, maka pilih layer background untuk membuat tampilan background
agar terlihat lebih menarik.
Tetap pada layer yang sama, buatlah sebuah tombol untuk menghubungkan tampilan
pembuka menuju tampilan berikutnya. Tombol ini bisa dibuat secara manual maupun
menggunakan tombol yang sudah disediakan Adobe Flash Profesional CS5.
Membuat tombol secara manual :
o Buatlah objek bebas dengan menggunakan rectangular, oval, pencil
tool, maupun pen tool. Buat tombol sesuai dengan keinginan. Bisa
juga disisipkan teks pada tombol tersebut.
48
o Setelah objek selsai dibuat, seleksi objek tersebut dan ubah menjadi
button dengan cara seleksi objek →klik kanan→pilih convert to
symbol→pada “Type”, ubah menjadi Button→beri nama tombol
dengan mengetikkan nama pada kolom “Name”→pilih OK.
o Maka Tombolpun telah selesai dibuat.
Membuat tombol dengan fasilitas Common Libraries
o Pilihlah menu Window pada Menu Bar
o Lalu pilih Common Libraries
o Pilih Button. Maka akan muncul jendela Library Button
o Pilih jenis Button sesuai keinginan
49
o Drag kearah stage maka Tombol siap diiisi dengan Script
o Teks “Enter”yang telah tersedia dapat diganti dengan teks yang
diinginkan. Caranya :
Double klik pada tombol Enter tersebut
Maka akan muncul timeline button
Buka kunci dengan mengklik ikon lock ( ) pada layer text
Hapus bjek pada frame up lalu ganti dengan teks yang
diinginkan.
Jangan lupa untuk mengganti pula teks yang terdapat pada
frame down karena akan berpengaruh pada tombol ketika
tombol dijalankan.
Setelah pengerjaan content selesai, maka langkah selanjutnya adalah mengisikan script
pada tombol. Script berfungsi untuk memberikan perintah pada program yang dibuat.
50
Hubungkan frame pembuka dengan frame selanjutnya untuk memulai kuis. Caranya klik
kanan pada Button (tombol )yang telah dibuat → pilih actions → lalu isikan script berikut :
Setelah button terisi dengan script, maka selanjutnya adalah bekerja pada layer script.
Pada frame 1 isikan script berikut :
Setelah layer script frame 1 terisi oleh script, maka akan terdapat lambang alpha sebagai
tanda bahwa frame tersebut telah terisi oleh script seperti berikut :
Jika halaman depan telah selesai dibuat, selanjutnya membuat pertanyaan atau soal-soal
yang ingin ditampilkan. Soal yang akan dibuat tersebut letakkan di frame selanjutnya yaitu
frame 2. Caranya, blok frame 2 pada setiap layer→ pilih insert→pilih timeline→blank
keyframe pada setiap layer. Maka akan menjadi seperti berikut :
51
Pada layer content, masukkan soal yang akan ditampilkan.
Lakukan langkah yang sama untuk membuat pertanyaan – pertanyaan pada frame
berikutnya.
52
Jika pertanyaan dan jawaban selesai dibuat, maka langkah selanjutnya adalah membuat
tombol pada setiap opsi jawaban. Tombol dapat dibuat dengan cara manual maupun
dengan menggunakan fasilitas common libraries seperti langkah membuat tombol yang
telah dibuat sebelumnya.
Lakukan hal yang sama pada frame berikutnya.
Setelah tombol terpasang pada tempatnya, isi tombol tersebut dengan script. Hal ini
dimaksudkan agar ketika tombol ditekan, maka akan menuju pada pertanyaan-pertanyaan
pada frame berikutnya dan mendapatkan nilai. Isikan dengan script berikut :
Untuk tombol yang memuat nilai untuk jawaban benar, maka perlu tambahan script
seperti berikut :
Lakukan pula hal yang sama untuk tombol – tombol yang terdapat pada frame lain.
Jika seluruh soala dan tombol selasi dibuat, maka isikan script ( ) pada layer
script pada masing masing frame hinggga terlihat tampilan seperti berikut :
53
Jika script sudah dimasukkan, maka lanagkah selanjutnya adalah membuat tampilan skor.
Caranya tambahkan frame baru pda masing-masing layer.
Pada layer content isi dengan :
Untuk menampilkan skor dari soal yang telah dikerjakan, dapat dibuat dengan
menggunakan Dynamic text. Caranya pilih text tool ( ), lalu pada jendela properties,
ubah Static Text menjadi Dynamic Text.
Buat Dynamic Text tersebut kedalam layer content.
54
Pada setiap Dynamic Text tersebut isikan :
Dynamic Text disebelah kanan jawaban benar :
Instance name = skor
Variable = skor
Dynamic Text disebelah kanan Jawaban salah :
Instance name = salah
Variable = salah
Dynamic Text disebelah kanan nilai :
Instance name = nilai
Variable = nilai
Atur jenis tampilan yang akan masuk ke dalam Dynamic Text agar tampil menjadi angka
atau bilangan dengan cara melekaukan embed pada Dynamic Text.
55
Lalu akan muncul jendela Font Embedding
Pada kolom Character ranges tandai pada “All (1332/93514 glyphs)”
Pilih OK
Sekarang kembali pada layer script. Pada layer script frame 1 silahkan tambahkan script
berikut :
Lalu pada frame lembar nilai pada layer script isikan dengan script berikut :
56
Maka kuis telah siap ditampilkan. Untuk mencoba silahkan tekan Ctrl + Enter.
J. Latihan
1. Buatlah sebuah produk pembelajaran interaktif ! (Ketentuan persyaratan pembelajaran dari pembimbing)
57