Modul Adobe Flash CS.

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)

Propertis
Color/ swatches
Toolsbox

Stage

Library
Timeline

Layer
Action

Gambar 2. Lingkungan kerja adobe flash cs5 (Caption)

2
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)

6
  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

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

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

Frame Awal Twen Shape Frame Akhir

Objek

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
 sama seperti pada motion tween, perbedaannya objek tidak dalam bentuk simbol. Animasi
ini posisi objek tidak berubah, hanya mengalami perubahan bentuk.

Twen Shape
Frame Awal Frame Akhir

Objek tidak terkonfersi dalam simbol

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

Layer guide Layer yang di guide

Objek animasi Garis guide

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

Layer masking

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 !

Membuat Animasi Huruf Dengan

Masking 1

 Lalu layer akan bertambah seperti berikut :

17
 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 berisi

30
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

33
 Klik tombol New Symbol pada kiri bawah pada panel Library

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

34
 Untuk membuat isi symbol, gunakan timeline, 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

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.

36
  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

.ai Adobe Photoshop .psd
Adobe Illustrator
.dxf Bitmap .bmp
AutoCAD DXF

37
 .emf Future Splash Player .spl
Enhanced Windows
Metafile
.gif JPEG .jpg
GIF dan Animated
GIF
.png Flas Player 6/7 .swf
PNG
.wmf Adobe XML Graphic .fxg
Windows Metafile
File

 Sound Format

File Type Extension File Type Extension

.asnd Wave .wav
Adobe Soundboth
.mp3
MP3

 Video Format

File Type Extension File Type Extension

.flv, .f4v Quick Time Movie .mov, .qt
Video Adobe Flash
.avi MPEG .mpg, .mlv, .m2p,
Video for Windows
.m2t, .m2ts, .mts,
.tod, .mpe, .mpeg
.mp4, .m4v, .avc Digital Video .dv, .dvi
MPEG-4
.3gp, .3gpp, .3gp2,
3GPP/3GPP2 for
.3gpp2, .3p2
mobile devices

38
 Import Sound

 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 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

40
 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 :

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

41
 Catatan : Jika memasukkan lebih dari satu sound dalam satu layer, gunakan pilihan
Stop.

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

42
F. Action Script

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

43
  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.

 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

44
on (release) {
gotoAndStop(1);
}

Untuk tombol back berisi Acrionscript

on (release) {
prevFrame();
}

Untuk tombol next berisi Acrionscript

on (release) {
nextFrame();
}

45
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);

 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) {

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

 Pilih Action Script 2.0 pada kategori Create New.

 Lalu akan muncul stage/lembar kerja Adobe Flash.

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

 Setelah dirasa cukup, maka pilih layer background untuk membuat tampilan background
agar terlihat lebih menarik.

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

49
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

o Drag kearah stage maka Tombol siap diiisi dengan Script

o Teks “Enter”yang telah tersedia dapat diganti dengan teks yang
diinginkan. Caranya :

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

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

 Pada layer content, masukkan soal yang akan ditampilkan.

52
 Lakukan langkah yang sama untuk membuat pertanyaan – pertanyaan pada frame
berikutnya.
 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.

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

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

54
 Buat Dynamic Text tersebut kedalam layer content.

 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

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

 Lalu akan muncul jendela Font Embedding

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

 Maka kuis telah siap ditampilkan. Untuk mencoba silahkan tekan Ctrl + Enter.

J. Latihan

1. Buatlah sebuah produk pembelajaran interaktif ! (Ketentuan persyaratan

pembelajaran dari pembimbing)

Tak usah banyak kata kata, karna saya bukan seorang yang pintar mengarang
cerita langsung saja ke topik, seperti judul di atas, yaitu Tutorial Membuat Slider
menggunakan Adobe Flash CS3, pertama yang harus kita siapkan yaitu
Aplikasinya Adobe Flash CS3, iya dong kalo ga pake Tu Aplikasinnya Mana bisa
mengikuti tutorial ini

57
Jika Belum punya Aplikasinya bisa download Disini :

1. link 1
2. link 2
3. Mirror

Yuk langsung menuju ke TKP

Pertama buka dulu Aplikasinya, jika sudah pilih yang Flash File (Action Script 2.0)

Oke setelah itu lanjut Atur ukuran Canvasnya, untuk lebih detail lihat gambar
aja

Selanjutnya Jika ingin memilih warna Background, klik Background Color

58
lanjut lagi, ambil foto dari directori, Klik File > Import > Import to library

jika sudah, sekarang tinggal ambil gambarnya Pilih gambar > klik Open.

Oke selanjutnya, seret gambar yang sudah berada di library ke canvasnya dan
atur tata letak gambar, biar gambar sama atur aja di propertinya X = 0.0 dan Y =
0.0, liat gambar ya

59
Selanjutnya buat time untuk membuat efeknya taruh dimana saja, misal punya
saya cuma 45 sekon. Kliki kanan > insert Keyframe.

Lanjut step berikutnya Klik pada frame > Create Motion Tween. cek gambar

ya

60
Setelah itu beri 2 pembatas pada frame, biar gambarnya istilahnya mirip fade in lah
hehe klik kana pada frame > insert keframe.

Kemudian langkah berikutnya Klik No 1 dan di No 45 (ini satu satu dulu, misal No1
dulu) pada frame > klik gambarnya > pilih color > ganti menjadi alpha > terus ganti
menjadi 10% (ini terserah selera anda).

Lnjut buat Linkaran kecil aja, ga usah besar besar dan lingkaran tersebut di beri
warna (warna terserah selera masing - masing), dan di beri angka biar kelihatan
sedikit bagus , setiap lingkaran harus mempunya i layer sendiri sendiri

ya ini kan kita hanya membuat 4 slide saja Maaf baru diberitahu disini
heheh jadi layer yang di butuhkan cuma 5, kok bisa 5 ?? karena layer pertama
di buat untuk gambar slidenya , sedangkan layer 2 sampai layer 5 dibuat
Lingkaran beserta angkanya, oke jika belum tau cara membuat lingkarannya, kli
huruf O (wOw bukan w0w ) pada keyboard, selanjutnya tool Ovalnya, awalnya
tool imi rectangulah, setelah kita tekan huruf O (wOw bukan w0w ) pada
keyboard menjadi Oval , mudeng kan ?? harus mudeng ya .

61
jika sudah membuat 4 lingkaran beserta angkanya, kemudian atur warna pada ke -4
lingkaran tersebut, klik gambar yang mau diatur warnanya > klik color > atur
Alphanya menjadi 50% aja . lebih jelas lihat gambar.

Lanjut, sekarang kita harus men-Duplicate scene yang sudah kita buat tadi, cara
menampilkan scene ketik di keyboard Shift+F2 atau engga klik Window > Other
Panels > Scene.

Jika Sudah, sekarang tugas kita, kita ???? lo aja kali gue engga men-
Duplicate scene, caranya klik icon anak panah ke kanan pada scene, klik sebanyak
slide yang di mau. lihat gambar.

62
Kemudian Buat lingkaran itu menjadi Button cara nya klik lingkaran > tekan F8 >
pilih button > Ok. seterusnya pada lingkaran lingkaran itu, dan di scene berikutnya
juga begini .

Lanjut lagi Klik kanan pada Lingkaran/Button > pilih Actions.

Maka Akan tampil gambar seperti di bawah ini

63
Tekan Ctrl+Shift+e (Script Assist) > Klik Global Function > Timiline Control >
double klik goto maka akan tampak seperti gambar di atas. sekarang kita tinggal
pilih scene. Misal Ini kita Klik di Lingkaran/button tadi pada No 2 maka scene yang
di pilih pun pada nomer 2, ini berlaku pada Lingkaran /button pada scene
selanjutnya .

Selesai Sudah Pembuatannya sekarang tinggal menyimpan, jika ingin

menjadikan .swf , Klik file > Export > Export Movie (CTRL+ALT+SHIF+S). jika

belum tau no lihat gambar selanjutnya tinggal di beri nama > biarkan aja
begitu > klik OK aja .

64
oke ini jika mau file .fla dan .swf nya Klik

Sekian dari saya. terima kasih sudah berkunjung di blog saya ini salam

Gantengers dari saya tunggu info lagi dari saya .

Untuk memperoleh sebuah interktif multimedia yang dinamis, pergantian antar halaman dapat
ditambahkan sebuah efek transisi. Efek tersebut bisa berupa animasi motion tween, efek fade in/out, efek
zoom in/out dan sebagainya. Pada dasarnya membuat efek transisi tidak terlalu rumit selama kita
memahami konsep animasi dasar Adobe Flash.

Apabila pada interaktif multimedia tanpa transisi, perpindahan halaman bisa secara langsung
menggunakan perintah gotoAndStop(halaman);, akan tetapi ketika kita menggunakan efek transisi maka
kita membutuhkan kode play(); untuk memainkan animasi transisinya. Setelah animasi transisi selesai,
maka halaman akan di stop pada frame yang memiliki konten tertentu. Untuk memudahkan pemahaman
atas efek tersebut perhatikan timeline berikut (3 halaman dengan efek transisi)

Pada timeline tersebut terdapat 4 buah layer dengan penjelasan sebagai berikut :

65
 1. Pada layer transisi dibuat animasi transisi dengan teknik bebas (kita bisa memanfaatkan teknok
apapun seperti motion/classic tween, motion guide, frame by frame animation dan sebagainya.
Layer inipun juga tidak terbatas pada 1 layer saja, tetapi anda bisa memanfaatkan lebih banyak
layer untuk mendapatkan efek transisi yang lebih kompleks.

Yang perlu diperhatikan pada layer ini adalah durasi dari animasi transisi pada contoh ini adalah
15 frame untuk animasi membuka halaman dan 15 frame untuk menutup halaman. Anda bebas
memberikan durasi berapapun, yang terpenting adalah animasi tersebut akan berhenti tepat
disaat semua konten muncul (yang dalam contoh ini berada pada Key Frame 15, 45 dan 75.
2. Pada layer konten Seluruh konten (aset visual, teks, video, gambar dsb) diletakkan pada 1 buah
keyframe. Dalam contoh ini konten halaman 1 diletakkan di frame 15. Konten halaman 2 pada
frame 45 dan konten halaman 3 pada frame 75.
3. Pada layer tombol terdapat 3 buah tombol dengan nama
instansi tombol_1, tombol_2 dan tombol_3. Tombol tersebut memiliki Key Frame pada frame 1,
dan di munculkan sepanjang timeline aktif.
4. Pada layer kode terdapat beberapa blank keyframe yang memiliki kode. Yang perlu
diperhatikan adalah, pada saat frame berada tepat di atas konten suatu halaman, maka frame
tersebut harus di stop, dan pada saat animasi perpindahan suatu halaman selesai, maka
animasi akan dialihkan ke halaman selanjutnya dengan kode gotoAndPlay(hal_selanjutnya).

Pada frame 15, 45 dan 75 yang merupakan frame tempat konten berada, kode yang diketikan adalah :

1. stop();

Pada frame 30, 60 dan 90 yang merupakan frame tempat berakhirnya efek transisi halaman sebelumnya,
kode yang diketikan adalah :

1. gotoAndPlay(hal_selanjutnya);

Dan pada frame 1, diperlukan listener agar ke-3 tombol tersebut bisa berfungsi, kode yang diketikan
adalah :

1. import flash.events.MouseEvent;
2.

66
 3. var hal_selanjutnya:Number = 0; //variable untuk menyimpan hal setelah
transisi
4.
5. //menambahkan listener click
6. tombol_1.addEventListener(MouseEvent.CLICK, klik_tombol);
7. tombol_2.addEventListener(MouseEvent.CLICK, klik_tombol);
8. tombol_3.addEventListener(MouseEvent.CLICK, klik_tombol);
9.
10. //fungsi klik_tombol
11. function klik_tombol(e:MouseEvent):void{
12. var nama_tombol:String = e.currentTarget.name;
13. if (nama_tombol == "tombol_1"){
14. hal_selanjutnya = 1;
15. play();
16. }
17. if (nama_tombol == "tombol_2"){
18. hal_selanjutnya = 31;
19. play();
20. }
21. if (nama_tombol == "tombol_3"){
22. hal_selanjutnya = 61;
23. play();
24. }
25. }
26.
27.

Navigasi berfungsi untuk membawa pengunjung menjelajah dari satu halaman ke halaman
lainnya melalui media link, tombol, atau menu.
1. Klik Text Tool lalu tulislah teks “Halaman depan” di layar.

67
2. Klik frame 15, lalu klik kanan pilih > Blank Keyframe. Pada frame 15, tulislah teks “Halaman
Profil”.

3. Klik frame 1, lalu berilah nama/label “depan” pada frame tersebut melalui Properties-nya.

4. Lakukan hal yang sama untuk frame 15 dengan memberinya label “profil” sehingga sekarang
ada dua label di frame, yaitu “home” di frame 1 dan “profil” di frame 15.

5. buatlah layer baru (Layer 2). Pada Layer 2, masukkan dua buah tombol dari library Flash.
Latihan ini menggunakan tombol circle button – previous dan circle button – next dari kategori
Circle Buttons.

68
6. Klik kanan tombol circle button – next (tombol di sebelah kanan), kemudian berikan
action gotoAndStop (tandai Go to and Stop, type: Frame label, Frame: profile) sehingga
hasilnya terlihat seperti berikut

7. Klik kanan tombol circle button – previews (tombol di sebelah kiri), kemudian berikan
action gotoAndStop (tandai Go to and Stop, type: Frame label, Frame: depan) sehingga
hasilnya terlihat seperti berikut

8. Klik frame 1 di Layer 2, lalu berikan action stop sehingga movie akan langsung berhenti pada
frame 1 saat pertama kali dijalankan. Timeline Panel yang terbentuk akan terlihat seperti

69
9. Untuk melihat hasilnya, klik menu Control > Test Movie. Coba klik tombol circle button – next,
Anda akan dibawa ke Halaman Profil. Coba klik lagi tombol circle button – previous, Anda akan
dibawa kembali ke halaman semula, yaitu Halaman Depan

1.1 Timeline, Layer, Frame Dan Scene

Pada FlashMX
A. Timeline
Timeline berisi layer dan frame yang berfungsi untuk mengontrol objek yangakan
dianimasikan. Time line merupakan bagian dari flash yang berfungsi sebagai pengatur urutan
tampilan yang berdasarkan frame.

B. Layer
Layer seperti lembaran-lembaran film yang berisi gambar actor yang akan dianimasi. Dalam
satu film terdapat lebih dari 1 layer. Setiap kali Anda membukasebuah file movie yang baru,
disitu akan tersedia sebuah layer sebagai modalawal. Sehingga Anda bisa menambahkan
layer, apabila menginginkan lebih darisatu layer.

Kegunaan layer antara lain yaitu; untuk membuat animasi lebih dari satu, untuk
mengorganisasikan elemen-elemen dalam satu movie, agar tidak terjadi pengirisan antara
satu objek dengan objek yang laiinnya, agar bisa menemukan objek lebih cepat dan mudah,
dan lain sebagainya.
Layer adalah bagian yang memungkinkan kita untuk memberikan nama atau identitas lain
(Normal, Guide, Guided dan Mask) yang berguna untuk memberikan efek pada tampilan
yang dibuat. Selain itu, pengguna layer dimaksudkan untuk memberikan tingkatan atau
hirarki dari gambar yang dibuat.
Membuat Layer
untuk membuat layer dapat meng-klik Insert, lalu klik Timeline, terakhir pilih Layer. Atau
dapat melalui icon layer baru.

70
Perhatikan susunan layer di atas, nampak bahwa layer 3 berada pada posisi paling atas
kemudian disusul layer 2, layer 3. pola susunan layer di atas memudahkan kita untuk
membuat gambar animasi satu kemudian bersembunyi (dibelakang) pada layer lain. Layer
yang paling atas akan menutupi layer yang berada dibawahnya, begitu seterusnya.

Gambar di atas merupakan control later. Show/ Hide All Layers untuk menyembunyikan atau
menghilangkan semua gambar obyek yang berada di semua layer. Lock/ Unlock All Layer
untuk mengunci semua layer, agar layer tertentu yang dapat diedit. Show All Layers as
Outlines untuk menampilkan warna strokenya.
Untuk membuat sebuah gambar pada layer Anda tingga memilih layer yang mana yang akan
digunakan kemudian Anda tingal buat gambar atau tulisan sesuai dengan yang diinginkan.
Namun perlu diperhatikan bahwa setiap obyek memiliki pewaktuan yang berbeda (timing).
Hal tersebut sangat bergantung dari scenario yang anda buat.

Dalam pengaturan layer kita akan menjumpai ikon seperti diatas, kegunaan dari ikon-ikon
tersebut adalah :
Insert Layer, untuk menambah layer
Add Motion Guide, untuk menjadikan layer tertentu sebagai guide layer
Insert Layer Folder, untuk menambah layer folder
Delete Layer, untuk menghilangkan (mendelete layer).

C. Frame
Merupakan bagian dari layer, tempat meletakkan gambar. Frame digunakan utnuk
menentukan jeda (tenggang) waktu obyek untuk beranimasi.

71
Frame diumpamakan seperti film dimana kumpulan gambar disusun kemudian dimainkan
secara berurutan sehingga gambar tersebut terlihat bergerak.
Keyframe artinya kunci dari berbagai frame dimana frame tersebut berisi gambar (gambar
diam ataupun gambar beranimasi) dan sebagai tempat untuk meletakkan action script
(bahasa program dari flash).
Blank keyframe artinya keyframe yang belum berisi objek, atau keyframe yang masih
kosong.

D. Scene
Scane kita umpamakan seperti bagian adegan dari sebuah film dimana setting latar dan
pemainnya dapat berbeda. Di flash scane merupakan bagian-bagian dari sebuah projek yang
berisi kumpulan layer, gambar animasi maupun tombol, pada setiap scane, gambar, animasi
objek dan tombol dapat berbeda-beda sesuai dengan skenario bahan yang ingin kita buat.

REPORT TH

link antar frame dapat diartikan sebagai tautan yang dibuat pada
lembar kerja yang menghubungkan frame satu dengan frame lainnya.
Dengan demikian kita bisa membuat animasi yang bergerak

72