Modul adobe flash_cs.5

1
Modul Adobe Flash CS.5
Tujuan Instruksional Umum
Mahasiswadapatmembuatmediapembelajaran 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-nyadengan Action Script(bahasapemrogramandi Flash) sehingga user
bisa berinteraksi dengan movie melalui keyboard atau mouse untuk berpindah ke bagian-
bagianyang 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).

2
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)
Toolsbox
Stage
Action
Layer
Timeline
Color/ swatches
Propertis
Library

3
Keterangan Lingkungan Kerja Adobe Flash CS5 :
 Toolbox,kumpulantool atauperalatanyangmempunyai 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 yangmenyimpanobjek-objekseperti 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 lainberlapis-lapis. Layer yang berada paling atas adalah kanvas yang
terdepan.
Mengenal Toolbox dan Panel
 Toolbox
FasilitasToolbox sepertitelahdijelaskansekilas diawal adalah sekumpulan tool atau alat
yang mempunyai fungsi-fungsi tersendiri untuk keperluan desaindsb, berikut ini
penjelasan setiap tool yang ada di Toolbox.

4
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 SubselectionTool (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), digunakanuntukmelakukanseleksi 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.

5
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), digunakanuntukmengambarataumembuat
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), digunakanuntukmengambarbentukgaris-
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), digunakanuntukmenggesertampilan stage
tanpa mengubah pembesaran.
22 Zoom Tool (M,Z), digunakan untuk memperbesar atau
memperkecil tampilan stage.

6
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 (shockwave flash). Untuk mengeksekusi file fla. Ke swf , silahkan tekan ctrl + enter.
Gambar 4. Flash player (swf) (Caption)

7
 Cara Menyimpan File
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
Dalampembutananimasi selalu berhubungan dengan frame. Frame adalah suatu bagian dari
layer yangterdapatdalam panel timeline yangdigunakanuntukmengaturpembuatananimasi.
Gambar. 6. Bagian Panel Timeline
Suatuanimasi dapatberjalanolehadanyaperpindahandari frame ke frame. Semakin panjang
frameyang dibutuhkanmakasemakinlamaanimasi ituberjalan.Suatuanimasibisaterdiri dari

8
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
menyembunyikansertamenampilkanbagianlainpada layerdimasking.Berikutini 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).
Frame Akhir
Objek
Twen ShapeFrame Awal

9
Cara pembuatan animasi shape tween
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 membuatGuide adalah sebagai berikut:
 Buka lembarkerjaAdobe FlashCS.5
Frame Awal
Twen Shape
Frame Akhir
Objek tidak terkonfersi dalam simbol
Layer yangdi guideLayer guide
Garis guideObjek animasi

10
 Buatlahsebuahobjeklingkarandalamstage padalayer1 dan frame 1
Membuat Motion Guide 1
 Ubah lingkaranyangtelahdibuatmenjadi bentukmovieclip.Caranyaklikkanan
pada objeklingkaran→converttosymbol→isikan Name denganlingkaran, Type :
Movie clip, Registrationberadadi tengah→OK,makaakanmenjadi seperti
berikut;
Terdapatseleksi persegi disekelilinglingkaran.

11
 Klikkananpada layer1, lalupilihAddClassicMotionGuide.
 Lalu akanmuncul Layer Guide.
 Pada LayerGuide buatlahlintasanuntukpergerakandari objeklingkarandengan
menggunakanPencil Tool.

12
 Tempatkan lingkarantepatdiujunggarislintasanyangtelahdibuat.Registration
pointobject(Titiktengahyangtedapatpadalingkaran) wajibtepatdi titikpaling
ujunggaris.

13

14
 Blokframe 10 pada masing-masinglayer.Laluklikkanan→InsertFrame
 Klikkananpada frame 10 Layer1→pilihInsertKeyFrame
 Pada layer1 frame 10 tersebutpindahkanobjeklingkaranke ujunggarislintasan
yang laindenganposisi Registrationpointobjecttepatpadaujunggaris.

15
 Klikkananpada frame 1 layer1→pilihCreate ClassicTween

16
 Lalu time line akanmenjadi sepertiberikut.
 Lalu untukmengujinyatekanCtrl+Enter

17
 Teknik Masking
Teknik masking digunakanuntuk 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 yangdiamsedangobjekyangdimask 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 :
Layer masking
Membuat Animasi HurufDengan
Masking 1

18
Membuat Animasi Huruf Dengan Masking 2
 Ubah nama Layer 1 dengannama yangdiinginkan.Disini silahkandenganganti dengan
nama Objek1 dengan cara klik dua kali pada Layer 1.
Membuat Animasi HurufDengan Masking 3
 Klik frame 1 pada layer Objek1 dan buatlah sebuah teks pada Stage. Buatlah teks
bertuliskan “Maskingku” dengan warna bebas.

19
 SekarangubahLayer 2 dengannamaObjekCopydengancara 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.

20
 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.

21
 Pembedaanwarnatersebutakan 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 :

22
 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 :

23
 Blok frame 10 pada layer animasi, Lalu klik kanan→insert key frame.
 Ubah posisi objek animasi ke tempat yang berbeda

24
 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 :
 Langkah terakhir klik kanan pada layer Animasi→mask. Maka tampilan akan seolah –
olahhilangdankembali seperti semula.Akantetapi hal tersebutmenandakan masking
telah berhasil.
 Lalu untuk melihat hasilnya, silahkan tekan tombol Ctrl+Enter maka akan jadi seperti
berikut ;

25
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

26
Ini adalah tampilan dari Common Library Button :
Gambar.12 Libraries Button
Ini adalah tampilan dari Common Library Classes :
Gambar.13 Libraries Classes

27
Ini adalah tampilan dari Common Library Sounds :
Gambar.14 Libraries Sounds

28
2.1. Membuat Variasi Teks
Didalamadobe Flashjugaterdapatberbagai 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

29
Input Text : Jenisteksberupakotakisian,danpemakai dapat memasukkan input didalamnya.
Input text biasa digunakan dalam form aplikasi.
Gambar.17 Input Text
2.2. Membuat Teks
Teksyang dibuatFlashdapatberupa 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.

30
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
digunakandalamsymbol Graphic.Tambahkansymbol Graphicdalamdokumenflashkarena
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 ( ) untukmembuatpotongan-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.Selainitu,Movie Clipdapatdiletakkandi dalamTimeline symbol Buttonuntuk
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

31
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

32
 Drag elemen yang diseleksi ke panel Library
 Klik kanan>dan pilih Convert to Symbol dari Context Menu

33
 Di dalam kotak Convert to Symbol, tulis nama symbol dan pilih jenis symbol (Movie Clip, Button, atau
Graphic).
 Klik OK.
*Setelahmenjadi symbol,secaraotomatiselemenyangdijadikansymbol akan masukke 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

34
 Klik tombol New Symbol pada kiri bawah pada panel Library
 Pilih New Symbol dari menu panel Librarydi sudut kanan atas panel Library
 Pada kotak dialog Create New Symbol, tulis nama symbol dan pilih jenis symbol.
 Klik OK.

35
 Untuk membuatisisymbol,gunakantimeline,menggambar dengan drawing tools, mengimpor media,
atau membuat turunan dari symbol lainnya.
Untuk kembali ke mode document-editing, lakukan salah satu dari berikut :
 Klik tombol Back
 Pilih Edit -> Edit Document

36
 Klik nama scene di Edit Bar.
FlashPro menambahkansymbol ke Librarydanberalihke 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.

37
 Frame keempat adalah Hit state, mendefinisikan area fisik yang merespon klik mouse. Daerah ini
terlihat setiap kali file SWF bermain di Flash Player.
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
.emf Future Splash Player .spl

38
Metafile
GIF dan Animated
GIF
.gif JPEG .jpg
PNG
.png Flas Player 6/7 .swf
Windows Metafile
.wmf Adobe XML Graphic
File
.fxg
 Sound Format
Adobe Soundboth
.asnd Wave .wav
MP3
.mp3
 Video Format
Video Adobe Flash
.flv, .f4v Quick Time Movie .mov, .qt
Video for Windows
.avi MPEG .mpg, .mlv, .m2p,
.m2t, .m2ts, .mts,
.tod, .mpe, .mpeg
MPEG-4
.mp4, .m4v, .avc Digital Video .dv, .dvi
3GPP/3GPP2 for
mobile devices
.3gp, .3gpp, .3gp2,
.3gpp2, .3p2
 Import Sound

39
 Pilih File -> Import -> Import to Library.
 Pada kotak dialog Import, pilih file yang akan dimasukkan ke dalam Flash.
Import Sound ke Timeline
 Import suara ke dalam Librarylebih dahulu.

40
 Pilih Insert -> Timeline -> Layer.
 PadaLayer yang baru, drag Sounddari Libraryke dalam Stage. Dianjurkan,tiapsounddiletakkanpada
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 Propertyinspector, pilih file sound dari pop-up menu.
Efek Pop-up Menu
 Pilih salah satu efek dari pop-up menu :

41
 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 : Jikamemasukkanlebihdari satusounddalamsatu layer,gunakanpilihan
Stop.

42
 Masukkan value untuk menentukan berapa kali suara mau diulangi (loop), pilih loop
untuk mengulangi suara terus menerus.
 Untuk mengetessuara,tarikplayheadke frame yangberisi suara ataugunakantombol
yang ada pada Controller menu.

43
F. Action Script
1. Menjelaskan Bahasa syntax action script 2.0
Pengunaan Action Script pada movie clip selalu diikuti dengan event. Jadi Action Script
tersebutakandijalankanpadasaatevent 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 padaActionScriptFlash.BahkanpadaActionScriptFlash 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 perintahini 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.

44
 Frame Label pada type ini perintah goto diikuti dengan nama/label frame yang berarti
animasi akan melompat ke nama/label frame yang sesuai.
 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 backberisi Acrionscript
on (release) {
prevFrame();
}

45
Untuk tombol next berisi Acrionscript
on (release) {
nextFrame();
}
H. Load Movie
Biasanya cara yang kita gunakan dalam memasukkan movie clip adalah dengan memasukkan
movie cliptersebutkedalamlibrary,setelahituklik&dragfile tersebutkitamasukkankedalam
frame yang kitainginkan.Apabilakitamemasukkanmovieclipsecaralangsungdidalamproject
falsh kita seperti itu, biasanya proses eksekusi/loading akan terasa lama, apalagi bila movie
yang dipanggil banyak,filenyabesardankomputeryang kita gunakan speknya minim pastilah
loadingnyaakan 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);
}

46
 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.

47
 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.

48
 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.

49
o Setelahobjek 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

50
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.

51
Hubungkan frame pembuka dengan frame selanjutnya untuk memulai kuis. Caranya klik
kananpada Button (tombol )yangtelahdibuat→ pilihactions→ 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 :
 Jikahalamandepantelahselesai dibuat, selanjutnya membuat pertanyaan atau soal-soal
yang inginditampilkan.Soal yangakandibuattersebutletakkan 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 :

52
 Pada layer content, masukkan soal yang akan ditampilkan.
 Lakukan langkah yang sama untuk membuat pertanyaan – pertanyaan pada frame
berikutnya.

53
 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
dimaksudkanagarketikatombol ditekan,makaakanmenujupadapertanyaan-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 :

54
 Jikascriptsudah dimasukkan,makalanagkah 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.

55
 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.

56
 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 :

57
 Maka kuis telah siap ditampilkan. Untuk mencoba silahkan tekan Ctrl + Enter.
J. Latihan
1. Buatlahsebuahprodukpembelajaraninteraktif ! (Ketentuanpersyaratan
pembelajarandari pembimbing)

Modul adobe flash_cs.5

More Related Content

What's hot

Viewers also liked

Similar to Modul adobe flash_cs.5

Recently uploaded

Modul adobe flash_cs.5