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;


Terdapat seleksi persegi disekeliling lingkaran.

Klik kanan pada layer 1, lalu pilih Add Classic Motion Guide.

10


Lalu akan muncul Layer Guide.


Pada Layer Guide buatlah lintasan untuk pergerakan dari objek lingkaran dengan

menggunakan Pencil Tool.

11


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



Blok frame 10 pada masing-masing layer. Lalu klik kanan→Insert Frame

13


Klik kanan pada frame 10 Layer 1→pilih Insert Key Frame


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

Klik kanan pada frame 1 layer 1→pilih Create Classic Tween


Lalu time line akan menjadi seperti berikut.


Lalu untuk mengujinya tekan Ctrl+Enter

15


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.

16

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 !

Lalu layer akan bertambah seperti berikut :


Ubah nama Layer 1 dengan nama yang diinginkan. Disini silahkan dengan ganti dengan

nama Objek1 dengan cara klik dua kali pada Layer 1.

17



Klik frame 1 pada layer Objek1 dan buatlah sebuah teks pada Stage. Buatlah teks

bertuliskan “Maskingku” dengan warna bebas.


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.

18


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.

19


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 :

20


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 :


21

Blok frame 10 pada layer animasi, Lalu klik kanan→insert key frame.


Ubah posisi objek animasi ke tempat yang berbeda


22

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 –

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 ;


23

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

24

Ini adalah tampilan dari Common Library Button :

Gambar.12 Libraries Button

Ini adalah tampilan dari Common Library Classes :

Gambar.13 Libraries Classes

25

Ini adalah tampilan dari Common Library Sounds :

Gambar.14 Libraries Sounds

26

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

27

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.

28

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

29

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

30

Drag elemen yang diseleksi ke panel Library

Klik kanan>dan pilih Convert to Symbol dari Context Menu

31

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

32

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.

33

Untuk kembali ke mode document-editing, lakukan salah satu dari berikut :

Klik tombol Back

Pilih Edit -> Edit Document

34

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.

35

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

36

GIF

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

37

Pada kotak dialog Import, pilih file yang akan dimasukkan ke dalam Flash.

Import Sound ke Timeline

Import suara ke dalam Library lebih dahulu.

38

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 :

39

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.

40

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

41

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.

42

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

}

43

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

}

44

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.

45

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.

46

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.

47

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

48

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.

49

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 :

50

Pada layer content, masukkan soal yang akan ditampilkan.

Lakukan langkah yang sama untuk membuat pertanyaan – pertanyaan pada frame

berikutnya.

51

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 :

52

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.

53

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.

54

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 :

55

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

J. Latihan

1. Buatlah sebuah produk pembelajaran interaktif ! (Ketentuan persyaratan pembelajaran dari pembimbing)

56

modul adobe flash cs.5

Documents