Materi Flash

32
Rudi Hartono Tarigan. S.Kom > Flash MX >> I. Memulai Flash Flash merupakan salah satu Software untuk pembuatan animasi yang sangat handal. Kehandalan yang dimiliki flash dibandingkan dengan software lain adalah kecilnya ukuran file yang dihasilkannya. Ukuran file sangat menentukan sekali dapat tidaknya digunakan dalam sebuah web, karena semangkin kecil ukuran file tersebut akan semangkin baik. Apabila animasi tersebut berukuran cukup besar, maka kemungkinan besar akan lama sekali baru dapat ditampilkan oleh browser, bahkan bisa sama sekali tidak ditampilkan apabila jaringan yang ada tidak memiliki bindwith yang cukup besar. Dari sudut menu dan tampilan, flash dapat dikatakan tidak asing lagi khususnya untuk user yang telah terbiasa dengan aplikasi under windows. Untuk memulai menjalankan macro media flash dapat dilakukan dengan meng-klik tombol Start => All Programs => Macromedia => Macro Media Flash, seperti terlihat pada gambar 1.1 berikut ini: 1 1 Gambar 1.1

Transcript of Materi Flash

Page 1: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

I. Memulai Flash

Flash merupakan salah satu Software untuk pembuatan animasi yang sangat handal.

Kehandalan yang dimiliki flash dibandingkan dengan software lain adalah kecilnya

ukuran file yang dihasilkannya. Ukuran file sangat menentukan sekali dapat tidaknya

digunakan dalam sebuah web, karena semangkin kecil ukuran file tersebut akan

semangkin baik. Apabila animasi tersebut berukuran cukup besar, maka kemungkinan

besar akan lama sekali baru dapat ditampilkan oleh browser, bahkan bisa sama sekali

tidak ditampilkan apabila jaringan yang ada tidak memiliki bindwith yang cukup besar.

Dari sudut menu dan tampilan, flash dapat dikatakan tidak asing lagi khususnya untuk

user yang telah terbiasa dengan aplikasi under windows.

Untuk memulai menjalankan macro media flash dapat dilakukan dengan meng-klik

tombol

Start => All Programs => Macromedia => Macro Media Flash, seperti terlihat pada

gambar 1.1 berikut ini:

1

1

Gambar 1.1

Page 2: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

Kemudian setelah beberapa saat akan muncul tampilan awal dari Macro Media Flash

MX, seperti terlihat pada gambar 1.2 berikut ini:

2

2

Menu bar Time

line

Tool bar

Panels

Properties

Area Kerja/Stage

Gambar 1.2

Page 3: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

II. Mengenal Lembar Kerja Flash

A. Too bar

Untuk macro media flash MX, tool bar (seperti yang terlihat pada Gambar 1.2) secara

umum dapat dibagi menjadi 4 bahagian yaitu tools, view, colors, dan option.

- tools adalah kumpulan tool bar untuk menggambar dan meng-edit gambar bitmap

dan vektor.

- View adalah kumpulan tool bar untuk merubah scale (ukuran) tampilan dan

menggeser posisi tampilan.

- Colors adalah tool bar untuk perubahan warna garis, foreground dan background.

- Option adalah tool bar untuk menentukan pilihan berupa model dari aksi yang

diberikan oleh tool yang sedang digunakan.

Pada Gambar 2.1 berikut ini adalah tampilan dari tool bar.

A.1 Selector

Tools ini berfungsi untuk melakukan seleksi (memilih) objek atau bahagian objek

yang hendak di edit maupun di hapus.

A.2 Text tool

Tool ini berfungsi untuk membuat untaian teks ( kalimat )

A.3 Drawing tool

Tools ini berfungsi untuk membuat garis dan objek lingkaran dan persegi empat.

A.4 Sizing & Ratate tool

Tools ini berfungsi untuk mengubah ukuran objek baik objek dalam format vektor

maupun bitmap.

A.5 Painting tool

Tools ini berfungsi untuk proses pewarnaan dan pengambilan warna objek baik

foreground, dan back ground.

3

3

Gambar 2.1

Selector

Text tool

Drawing tool

Painting tool

Sizing & Rotate tool

Page 4: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

B. View

Tools view ini adalah fasilitas untuk merubah ukuran tampilan di monitor maupun

pengaturan sisi tampilan dalam proses pengeditan maupun penggambaran objek.

C. Colors

Tools colors ini berfungsi untuk menentukan jenis warna dari foreground dan

background.

D. Option

Tools Options ini berfungsi untuk mengatur bentuk design dari tools yang digunakan.

Contoh : untuk tool line option yang ada adalah pilihan bentuk patahan dari line :

dengan siku dan tanpa siku.

E. Time Line

Adalah organisasi dan pengaturan tool yang besar dan kompleks. Jika move flash

dianalogikan sebagai sebuah buku, maka Timeline merupakan tabel interaktif dari

isinya. Setiap adegan seperti sebuah bab, setiap frame seperti halaman. Namun

Movie Flash lebih kompleks dari sebuah buku. Setiap movie “page” dapat menjadi

beberapa lembar transparan ditumpuk satu di atas yang lain. Gambar berikut ini

adalah tampilan timeline dari flash.

4

4

Page 5: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

F. Stage

Stage adalah daerah yang berisi semua elemen gambar yang membentuk movie

flash. Kita akan selalu bekerja membuat gambar, membuat animasi, dan lain – lain di

tempat ini. Pada Flash, anda daapt mengontrol seberapa besar layarnya, dan apa

warnanya melalui kotak dialog Movie Properties.

G. Panels

Panel digunakan untuk mengubah atribut dari elemen yang dipilih. Untuk membuka

panel yang diiginkan dapat dilakukan dengan mengklik menu bar Window,

selanjutnya tentukan panel yang ingin diaktifkan. Contoh:

Untuk mengaktifkan Panel Color dengan cara Window > Color Mixer (Shift+F9)

H. Grid dan Ruler

Grid adalah sebuah set garis – garis yang saling berpotongan vertikal dan horizontal

yang berguna sebagai penuntun menggambar dan meletakkan elemen – elemennya.

Grid ini mirip seperti kertas milimeter (kertas grafik) pada dunia non digital. Flash juga

menggunakan grid untuk meluruskan benda jika anda mengaktifkan fitur Snap to Grid.

Karena grid hanya sebagai alat bantu maka grid tidakmuncul pada hasil movie anda.

Cara memunclkan Grid dari menu bar yaitu : View > Grid > Show Grid, maka pada

sisi sebelah kiri menu akan diberi tanda centang yang menandakan fasilitas grid

sedang aktif. Untuk menghilangkan fasilitas grid langkahnya sama, hanya diakhiri

menghilangkan tanda centang pada menu.

Sedangkan untuk memunculkan ruler, pilih menu View > rulers, ruler ini adalah

fasilitas untuk membantu dalam ukuran agar lebih mudah dalam menyesuaikan

dengan ukuran yang diiginkan.

5

5

Page 6: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

III. Menggambar Objek dalam Flash

A. Selection tool

1. Buatlah sebuah objek lingkaran dengan oval tool, seperti terlihat pada Gbr. 3.1

2. Gunakan Lasso Tool untuk seleksi bagian – bagian dari objek tersebut, kemudian

gunakan Arrow tool untuk menggeser bagian – bagian yang telah di seleksi tersebut

sehingga terlihat seperti pada Gbr. 3.2.

B. Brush Tool

Brush Tool digunakan untuk menggambar isi (fill). Untuk menggambar isi aktifkan

Brush Tool dengan mengklik icon. Kemudian klik dan geser pointer mouse ditempat kita

ingin memulai menggambar, maka akan terbentuk coretan. Untuk mengakhiri menggambar

lepaskan mouse.

Pada option Brush Tool terdapat beberapa option seperti terlihat pada Gambar 3.3

berikut ini:

b.1 Brush Mode (Model Kuas)

Model kuas digunakan untuk menentukan jenis coretan kuas yang akan dihasilkan

ketika kita menggambar menggunakan Brush Tool. Model kuas mengatur tata letak dari

pewarnaan yang kita berikan pada objek tersebut. Pilihan dari Mode kuas, seperti

terlihat pada Gambar 3.4 Berikut:

6

6

Gbr. 3.4

Gbr. 3.2

Gbr. 3.3

Brush Mode

Brush Size

Brush Shape

Lock Fill

Gbr. 3.1

Page 7: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

Terdapat lima pilihan yaitu : Paint Normal, Paint Fill, Paint Behind, Paint Selection dan

Paint Inside.

Paint Normal, digunakan untuk membuat coretan

kuas yang akan menutupi semua bentuk garis luar,

isi, atau keduanya.

Paint Fill, digunakan untuk menggambar di atas

atau isi tanpa menutupi garis luar. Selain itu,

dengan Paint Fill kita juga dapat menggambar di

luar kedua bentuk tersebut.

Paint Behind, digunakan untuk menggambar isi di

belakang bentuk yang ada tanpa menutupi bentuk

tersebut.

b.2 Brush Size (Ukuran Kuas)

Brush Size digunakan untuk menentukan ukuran dari kuas yang kita gunakan

b.3 Brush Shape (Model Kuas)

Brush Shape ini digunakan untuk memilih bentuk kuas yang kita inginkan, seperti

terlihat pada gambar berikut:

C. Ink Bottle Tool

Ink Bottle Tool digunakan untuk mengubah garis pembatas atau menambah garis

pembatas pada suatu bentuk, misal pada bentuk oval. Untuk mengubah garis yang sudah

ada tentukan warna, tebal dan bentuk garis dari Ink Bottle Modiefier pada panel stroke

lalu klik pada lintasan garis yang diinginkan untuk di ubah.

7

7

Page 8: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

D. Paint Bucket Tool

Paint Bucket Tool digunakan untuk merubah isi atau memberi isi suatu bentuk. Untuk

mengubah isi, pilih warna isi kemudian klik isi yang ingin diubah. Untuk memberi isi, pilih

warna isi pada panel fill kemudian klik pada daerah yang ingin diubah warnanya.

Warna yang dipilih dapat berupa warna solid yaitu warna yang monoton, linear gradien,

dan radial gradent.

Paint Bucket Tool Modifier terdiri dari : Warna isi, Gap Control, Perubahan isi (Transform

Fill) dan Lock Fill.

a). Gap Control

Gap Control digunakan untuk memberi isi suatu garis luar yang tidak benar – benar

tertutup. Pilihannya adalah Don’t Close Gaps, untuk memberi isi garis yang tertutup.

Close Small Gaps untuk memberi isi garis luar yang tidak tertutup karena ada jarak

yang kecil antara ujung garis yang satu dengan ujung garis yang lain.

Close Medium Gaps untuk memberi garis luar yang mempunyai jarak cukup besar.

Dan close Large Gaps untuk memberi isi garis luar yang mempunyai jarak yang

besar

b). Lock Fill

Lock Fill bila dalam keadaan Un Lock dan kita memilih gradient sebagai warna isi,

maka titik pusat dari gradient akan terletak di tempat kita mengklik Paint Bucket

dalam Stage.

8

8

Setelah dirubahBentuk Asal

Page 9: Materi Flash

Titik Pusat di tengah Titik Pusat di atas Titik Pusat di bawah

Rudi Hartono Tarigan. S.Kom > Flash MX >>

Titik pusat gradient dapat dianggap sebagai titik sumber cahaya yang datang.

c). Transform Fill

Transform Fill digunakan untuk mengubah isi gradient. Aktifkan Transform Fill dan

klik objek yang mengandung isi berupa warna gradient, maka Transform Fill

Modifier akan muncul di sekeliling objek yang kita pilih.

E. Eraser Tool

Eraser Tool digunakan untuk menghapus bagian dari objek yang terdapat pada Stage.

Eraser Tool Modifier terdiri dari: Eraser Mode, Faucet dan Brush Size

Erase Mode digunakan untuk menentukan cara

penghapusan dari Eraser Tool. Fungsi masing – masing

mode hampir sama dengan fungsi mode pada fill tool

F. Text Tool

Teks Tool digunakan untuk memasukkan teks ke dalam stage. Cara memasukkan teks

dapat dilakukan dengan dua cara yaitu:

1. Klik tombol text tool pada toolbar, lalu klik mouse pointer pada stage sehingga muncul

kotak teks dengan lingkaran kecil di ujung kanan atas kotak.

Kotak teks tersebut merupakan tempat kita memasukkan teks. Jika kita

memasukkan teks maka kotak tersebut akan langsung menyesuaikan besarnya

dengan teks yang kita masukkan.

2. Cara kedua adalah dengan menggeser mouse untuk menentukan panjang dari kotak

teks yang dalam hal ini disebut kotak paragraf. Maka kotak box akan muncul dengan

panjang sesuai dengan ukuran yang kita tentukan. Panjang kotak tersebut akan tetap.

9

9

Eraser Mode

Brush Size

Faucet

Tampilan kotak teks

Page 10: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

Jika teks yang kita ketik lebih panjang dari kotak yang kita buat, maka secara otomatis

huruf yang tidak cukup tersebut akan pindah ke baris berikutnya.

Dalam Teks Tool terdapat beberapa option yang berguna untuk melakukan setting

terhadap teks yang kita select. Setting dari text tool terdiri dari : Font, Font Size, Font

Color, Bold, Italic. Alignment, Paragraf dan Text field. Seperti terlihat pada gambar

berikut ini:

10

10

Font

Font SizeAlignment

Font Color

Page 11: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

IV. Memanipulasi Objek

A. Menggunakan Arrow Tool

Ada beberapa fungsi dari Arrow Tool, antara lain :

1. Arrow Tool bisa digunakan untuk membuat seleksi pada suatu bidang baik secara

keseluruhan atau sebagian. Jika ingin membuat seleksi keseluruhan dari suatu objek

maka cukup dengan mengklik objek tersebut. Namun bila dengan sekali klik daerah

yang ikut terseleksi hanya bagian dari fill colornya sedangkan line-nya tidak ikut

terseleksi. Apabila ingin keduanya ikut terseleksi, maka dapat dilakukan dengan

double-clik. Kemampuan dari arrow tool untuk menseleksi hanya yang berbentuk

persegi. Caranya dengan melakukan drag dari posisi awal ke posisi akhir daerah

yang hendak diseleksi.

2. Arrow Tool juga bisa digunakan untuk menggeser objek. Caranya klik objek yang

ingin dipindahkan, kemudian geser ketempat yang diinginkan.

3. Arrow Tool dapat mengubah bentuk objek.

Untuk melakukan perubahan pada bagian tertentu dari objek tersebut dapat

menggunakan subSelection Tool. Dengan tool ini akan lebih leluasa dan lebih gampang

dalam memodifikasi bentuk suatu objek. Caranya adalah clik pada bahagian sisi pinggir

objek, kemudian akan muncul tampilan menyerupai titik – titik pada sisi objek tersebut.

Titik – titik tersebut menunjukkan posisi patahan dari line yang ada yang dapat

dimodifikasi bentuk dan posisinya.

Contoh Objek yang diubah dengan subSelection Tool.

B. Menggunakan Lasso Tool

Lasso Tool merupakan tool untuk seleksi area kerja yang memiliki tiga option yaitu magic

wan, magic wan properties, dan polygon mode. Untuk dapat membuat perubahan bentuk

seperti gambar di bawah ini, langkah – langkahnya antara lain:

11

11

Page 12: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

1. Klik pada oval tool, kemudian bentuk sebuah objek berbentuk telur seperti contoh di

atas.

2. Berikan efek 3D dengan mengklik pada paint bucket tool kemudian klik panel color

swatches dengan warna abu – abu efek color 3D, lalu klik pada objek persis pada

posisi efek cahaya jatuh.

3. Klik Lasso Tool dan gunakan option polygon untuk membentuk mulut dan hidung

objek dan option magic wan untuk membentuk mata objek. Untuk menghilangkan

daerah yang telah di arsir dapat ditekan tombol del, apabila daerah arsiran ingin

dipindahkan gunakan Arrow Tool

12

12

Sebelum Sesudah

Page 13: Materi Flash

Keyframe

Rudi Hartono Tarigan. S.Kom > Flash MX >>

V. Membuat Animasi Sederhana

Bentuk dasar dari animasi adalah animasi frame per frame. Animasi frame per frame

menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan dengan mengganti

gambar yang satu dengan gambar yang lain selama beberapa waktu. Semua gambar yang

bergerak dihasilkan dari gambar yang berbeda-beda tiap framenya. Karena animasi frame

per frame harus memiliki gambar yang unik tiap framenya maka animasi frame per frame

sangat ideal untuk membuat animasi yang kompleks yang terdiri dari banyak perubahaan

seperti ekspresi wajah. Namun Kelemahan dari animasi frame per frame adalah

membutuhkan banyak waktu untuk membuat setiap gambar dan tentu saja akan

menghasilkan file yang besar ukurannya.

Di dalam Flash, sebuah frame ditandai dengan bulatan kecil (o). Bila bulatan tersebut

dalam keadaan kosong berarti pada keyframe tersebut belum terdapat objek, sedangkan bila

sudah ada objek di dalamnya akan ditandai dengan bulatan penuh. Dengan demikian

animasi frame per frame membutuhkan gambar yang unik setiap framenya, hal ini

menyebabkan setiap framenya adalah merupakan keyframe keyframe.

A. Animasi Frame per Frame

Membuat Animasi Gambar dengan

Metode Frame per Frame (layer

per layer), dapat menggambarkan

suatu proses penetasan dari telur

menjadi anak ayam seperti animasi

berikut ini. Adapun langkah –

langkahnya antara lain :

1. Klik pada Key Frame 1, kemudian gambarlah sebuah objek seperti terlihat pada

berikut ini:

2. Selanjutnya klik pada frame 5, kemudian tambahkan key frame dengan cara

mengklik dari menu bar insert key frame atau cukup dengan menekan tombol F6 dan

gambarlah objek selanjutnya gambar objek berikut pada keyfram 5 tersebut

13

13

Page 14: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

3. Setelah itu, lanjutkan pada frame 10 dengan mengklik dan membuat keyframe

selanjutnya gambar objek seperti berikut ini:

4. Langkah berikutnya pada frame 15 bentuk kembali keyframe dan gambar lah objek

berikutnya seperti berikut ini:

5. Selanjutnya lakukan hal yang sama pada frame 20 dan gambar objek berikut:

6. Lanjutkan langkah berikut pada frame 25 dan gambar objek berikut:

7. Pada fram ke 30 juga lakukan hal yang sama dan gambar kembali objek berikut:

14

14

Page 15: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

8. Simpan filenya dengan nama AnimasiPerlayar.fla

9. Untuk melihat hasilnya dapat dilakukan dengan menekan tombol Enter atau tombol

Ctrl + Enter secara bersamaan untuk full screen.

Catatan :

Bila ingin proses penampilan dari page – page yang ada tampak lebih lambah, dapat

dilakukan dengan menambah panjang frame dari page yang ingin ditampilkan lebih

lambat.

Tugas:

Cobalah anda buat sebuah animasi seperti proses membentuk manusia yang dimulai

dari kepala, badan dan seterusnya atau animasi lain dengan menggunakan metode

frame per frame.

B. Animasi Gerak Tanpa Jejak

Kalau dengan metode frame per frame sangat banyak sekali menggunakan gambar

apabila kita ingin membuat suatu objek tampak bergerak, tapi dengan metode ini

menentukan posisi awal dan posisi akhir benda tersebut.

Seperti nama animasinya maka pergerakan objek dari posisi awal ke posisi akhir tidak

ditentukan, sehingga pada umumnya akan membentuk garis lurus.

Berikut ini adalah contoh sebuah animasi gerak berpindah objek lingkaran dari posisi kiri

Stage ke posisi kanan Stage. Adapun langkah – langkahnya antara lain:

1. Klik pada Keyframe 5 lalu tekan F6, kemudian pada posisi kiri Stage bentuklah

sebuah objek Oval.

2. Klik pada Keyframe 20 lalu tekan F6, kemudian pindahkan objek tersebut ke posisi

kanan pada Stage.

3. Pada Keyframe 20 klik kanan, kemudian pilih Create Motion Tween kemudian klik

kanan juga pada Keyframe 5 dan pilih kembali Create Motion Tween.

4. Jalankan animasi dengan menekan tombol Enter

Tugas:

Buatlah animasi gerak sebuah objek dengan sebuah objek mobil

C. Animasi Gerak Dengan Jejak

Seperti namanya, maka pada animasi ini proses pergerakan objek tentukan, sehingga

pada umumnya akan membentuk garis lurus.

Berikut ini adalah contoh sebuah animasi perubahan objek lingkaran menjadi objek

persegi. Adapun langkah – langkahnya antara lain:

15

15

Page 16: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

1. Klik pada Keyframe 1, kemudian pada posisi kiri Stage bentuklah sebuah objek

Oval.

2. Klik pada Keyframe 20 lalu tekan F6, kemudian pindahkan objek tersebut ke

posisi kanan pada Stage.

3. Pada Keyframe 20 klik kanan, kemudian pilih Create Motion Tween kemudian klik

kanan juga pada Keyframe 1 dan pilih kembali Create Motion Tween.

4. Klik pada Menu bar dan pilih Motion Guide, kemudian bentuklah model gerak

yang diinginkan.

16

16

Page 17: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

Contoh:

5. Klik Keyframe 1 kemudian pindahkan objek dari posisi awal gerak, kemudian klik

keyframe 20 dan pindahkan objek ke posisi akhir gerak

6. Simpan filenya dengan nama AnimasiJejak.fla

7. Jalankan animasi dengan menekan tombol Enter

Tugas:

Buatlah animasi gerak sebuah objek bola terpental

D. Animasi Berubah Bentuk

1. Objek Vektor

Objek vektor adalah objek / gambar yang dibentuk dari software pembentuk gambar

seperti Corel Draw. Flash sebagai software animasi juga menyertakan fasilitas

pembentuk gambar, sehingga gambar yang dibentuk dapat diubah menjadi pixel –

pixel guna membentuk animasi perubahan bentuk.

Langkah – langkahnya antara lain:

a. Klik pada Keyframe 5 lalu tekan F6, kemudian pada posisi kiri Stage bentuklah

sebuah objek Oval. Seperti Gambar berikut ini:

b. Klik pada Keyframe 20 lalu tekan F6, kemudian gambar objek persegi dengan

bentuk seperti terlihat pada gambar berikut ini, sehingga pada Stage terdapat 2

objek yaitu objek oval dan persegi:

c. Klik Keyframe 5 dan ubah pada box properties tween menjadi Shape.

d. Hapuslah objek oval sehingga pada stage hanya terdapat objek persegi

e. Simpan filenya dengan nama Berubah Bentuk.Fla

f. e. Jalankan animasi dengan menekan tombol Enter

Tugas:

Buatlah animasi berubah bentuk dengan model perubahan janin menjadi mahkluk.

17

17

Page 18: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

2. Karakter / Angka

Untuk melakukan perubahan sebuah objek karakter ataupun angka, maka hal yang

perlu dilakukan adalah merubah karakter / Angka dari kedua objek tersebut ke

bentuk pixel (bagian – bagian) dengan memberikan perintah Break Apart.

Berikut ini adalah animasi perubahan dari angka 1 menjadi angka 2. Langkah –

langkahnya antara lain:

a. Klik pada Keyframe 1 kemudian gunakan Text Tool untuk membentuk

karakter 1

b. Klik pada keyframe 15 dan tekan F6, lalu rubah karakter 1 tersebut dengan

menggunakan Text Tool menjadi karakter 2.

c. Klik Keyframe 1, kemudian klik menu bar Modify > Break Apart (Ctrl + B),

kemudian klik pada keyframe 15 dan lakukan hal yang sama

d. Simpan filenya dengan nama TextAnimasi.fla

e. Tekan tombol Enter untuk menjalankan animasi

Tugas:

Buatlah animasi berubah bentuk dari angka 0 hingga 9.

18

18

Page 19: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

VI. KONSEP SYMBOL DAN LIBRARY

Symbol dan library adalah termasuk salah satu bagian yang paling penting dalam

membuat animasi dengan flash. Jika kita tidak bisa memahami konsep ini maka kita akan

kesulitan untuk bisa melangkah dalam pembuatan animasi yang termasuk dalam kategori

kompleks.

Untuk membuat suatu bentuk bisa bernanimasi, terlebih dahulu sebuah objek harus

diubah menjadi simbol. Dengan mengubah suatu objek itu menjadi sebuah symbol maka

objek tersebut tidak dapat kita ubah – ubah lagi di dalam stage seperti pewarnaan bentuk,

namun di dalam stage sebuah symbol masih dapat kita ubah rotasi, ukuran serta posisinya.

A. Mengubah Obyek Menjadi Symbol

Untuk membuat symbol ada 2 (dua) cara yaitu dengan membuka terlebih dahulu lembar

stage library melalui menubar Insert > New Symbol, setelah itu baru symbol tersebut di

bentuk. Cara yang kedua adalah membentuk objek terlebih dahulu pada stage kemudian

baru merubahnya menjadi symbol yaitu dengan cara memblok terlebih dahulu objek

tersebut dengan menggunakan arrow tool. yang ada pada toolbar, kemudian klik

pada menu bar dan pilih Insert > convert to symbol, sehingga muncul menu seperti

berikut ini:

Isikan nama symbol sesuai dengan keinginan anda (usahakan penamaan symbol ada

kaitannya dengan gambar agar lebih mudah diingat) pada bagian name. Dan pada

bagian behavior terdapat tiga pilihan yaitu :

movie clip : objek digunakan untuk beranimasi

button : objek dibuat sebagai tombol (control)

Graphic : objek dibuat sebagai gambar yang statis atau tidak beranimasi

Sebelum kita mengubah objek menjadi simbol, kita harus mempunyai tujuan dari

pembuatan symbol tersebut sehingga dapat kita menentukan salah satu option di atas.

Bila telah ditentukan maka klik tombol OK.

Jika sebuah objek sudah berubah menjadi symbol maka objek

tersebut akan di batasi oleh persegi empat berwarna biru dan muncul

tanda + ditengahnya. Hal itu bertujuan untuk membedakan antara

objek yang sudah diubah menjadi symbol dengan yang belum.

19

19

Page 20: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

B. Library Box

Library di dalam flash fungsinya sama sesuai dengan namanya adalah sebuah tempat

penyimpanan symbol yang sudah kita buat. Jika kita membuat sebuah simbol, maka

simbol tersebut akan secara otomatis masuk ke dalam library. Jadi walaupun semua

objek simbol yang ada pada stage kita hapus, symbol tersebut masih ada tersimpan di

dalam library. Untuk menampilkan library dapat dilakukan dengan : klik menubar

Window>library atau tekan tombol Ctrl + L, secara bersamaan.

C. Instances

Instances adalah duplikat dari symbol yang ada dalam stage. Kita bisa membuat duplikat

symbol yang ada dalam library berapapun jumlahnya. Untuk menggunakan instances

dari simbol, dapat dilakukan cukup dengan mendrag sebuah simbol ke dalam stages.

Simbol sesungguhnya sebenarnya tetap di dalam library sedangkan yang ada di dalam

stages adalah instance dari simbol.

Drawing tool tidak dapat digunakan terhadap instances, hal ini disebabkan karena

instance merupakan duplikasi dari symbol. Tetapi kita masih bisa mengubah instances

misalnya memutar, memperbesar, atau memperkecil. Jika instance kita ubah maka hal

itu tidak berpengaruh terhadap symbol sesungguhnya. Inilah keuntungan utama dari

simbol dan instance. Kita bisa menggunakan banyak instance dengan satu symbol.

Sebagai contoh kita akan membuat empat instance dari satu symbol, seperti terlihat pada

contoh gambar berikut ini:

20

20

Option menu

Item preview

Wide state

Sort order

Narrow state

Page 21: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

D. Menggunakan Symbol

Berikut ini adalah animasi objek bergerak dengan menggunakan simbol yang dalam hal

ini objek yang dipilih adalah kupu – kupu. Adapun langkah – langkahnya antara lain:

1. Klik pada menubar kemudian pilih New Symbol (Ctrl + F8), kemudian beri nama

symbol pada name “kupu – kupu” dan behavior “Movie Clip”.

2. Klik pada layer – 1 keyframe 1, kemudian gambarlah sebuah objek dengan tampilan

seperti di bawah ini :

3. Kemudian Klik pada layer – 1 frame 20 kemudian tekan tombol F6 (untuk membuat

keyframe)

4. Berikutnya buatlah layer baru dengan mengklik menubar Insert > Layer, hingga

terbentuk layer – 2.

5. Klik layer – 2 pada keyframe – 1 kemudian bentuklah gambar badan dari objek kupu

– kupu berikut ini:

6. Kemudian Klik pada layer – 2 frame 20 tersebut, kemudian tekan tombol F6 (untuk

membuat keyframe)

7. Untuk saya kupu – kupu tersebut, buatlah layer baru dengan mengklik menubar

Insert > Layer, hingga terbentuk layer – 3.

8. Kemudian klik pada layer – 3 pada keyframe –1 dan gambarlah sayap dari kupu –

kupunya, seperti terlihat berkut ini:

21

21

Page 22: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

9. Selanjutnya buat keyframe pada frame 20 di layer – 3 tersebut. Sehingga hasil akhir

dari gambar tersebut akan tampak seperti berikut ini:

10. Untuk memberi efek bergerak pada sayap kupu – kupu tersebut, lakukan klik kanan

pada key frame – 1 layer – 3 (layer dimana terdapat objek sayap) untuk memberi

motion tween dan lakukan juga hal yang sama pada keyframe 20.

11. Klik pada layer – 3 keyframe 10 kemudian tekan tombol F6 untuk membuat keyframe

baru.

12. Gunakan Free Transform Tool untuk mengubah ukuran sayap kupu – kupu tersebut

sehingga akan tampak sebagai berikut:

13. Klik tombol Edit scene untuk ke lembar stage, lalu panggil file library dengan

menekan tombol F11.

14. Lakukan drag terhadap library kupu – kupu ke stage.

15. Simpan Filenya dengan nama Animasi-1.fla

16. Jalankan flash dalam full screen dengan menekan tombol Ctrl + Enter

22

22

Sebelum Sesudah

Page 23: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

E. Membuat Animasi Dengan Symbol

1. Buka kembali file Animasi-1.fla, dengan mengklik dari menubar File > Open… (Ctrl

+ O)

2. Tampilkan box library dengan menekan tombol F11, kemudian drag simbol kupu –

kupu ke stage pada layer1, keyframe1.

3. Buat keyframe baru pada layer1 frame 20 dengan menekan tombol F6

4. Tambahkan jejak pergerakan objek berikut pada Motion layer dengan perintah

Insert > Motion Guide, lalu bentuklah pergerakan seperti berikut ini:

5. Klik kanan pada layer1 keyframe1 kemudian pilih motion tween dan lakukan hal

yang sama pada keyframe 20.

6. Klik layer1 keyframe1 kemudian pindahkan objek pada bagian paling bawah dari

motion guide, kemudian klik pada keyframe20 dan pindahkan objek pada sisi paling

atas dari motion guide.

7. Simpan filenya dengan nama Kupu-kupu.fla

8. Jalankan flashnya dengan menekan tombol Ctrl + Enter.

23

23

Page 24: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

VII. PEMBUATAN TOMBOL

Di dalam flash diberikan failitas yang sangat banyak untuk pembuatan tombol sehingga

kita bisa membuat tombol yang interaktif yang berbeda dengan tombol yang ada pada

umumnya. Tombol bisa kita gunakan untuk membuat link dari satu halaman ke halaman

yang lain atau juga digunakan untuk fungsi – fungsi yang lain yang dapat membuat web kita

lebih interaktif

Agar suatu objek dapat berubah menjadi sebuah tombol dan diberi fasilitas – fasilitas

yang berhubungan dengan tombol maka objek tersebut harus diubah terlebih dalulu menajdi

symbol button. Jika hal tersebut tidak dilakukan maka objek tersebut tidak akan berfungsi

sebagai tombol dan tidak akan bisa dimanipulasi karena semua fasilitas – fasilitas yang

diberikan oleh flash akan tertutup.

Untuk mengubah sebuah objek menajdi tombol dapat dilakukan dengan langkah –

langkah berikut ini :

1. Blok terlebih dahulu objek yang akan dirubah menjadi tombol, lalu pilih menu

insert>convert to symbol dan pilih menu button. (dengan pemberian perintah ini,

maka objek tersebut telah diubah menjadi sebuah tombol dan fasilitas – fasilitas

yang berhubungan dengan fungsi tombol telah diberikan kepada objek tersebut).

2. Klik kanan pada objek tersebut dan pilih Edit untuk masuk ke lembar pengeditan

objek sebagai tombol. Kemudian akan tampil lembar kerja seperti tampak pada

gambar berikut ini:

3. Pada timeline terdapat 4 (empat) pilihan frame yaitu up, over, down, hit.

Up : bentuk tombol pada saat mouse berada di luar tombol (bentuk tombol

awal page di loading / tampil)

Over : bentuk tombol pada saat mouse berada persis di atas tombol

Down : bentuk tombol pada saat tombol mouse ditekan di atas objek tombol

Hit : untuk menentukan luas area dari tombol

24

24

Page 25: Materi Flash

Rudi Hartono Tarigan. S.Kom > Flash MX >>

4. Selanjutnya isi pada pagian Up dengan bentuk tombol pada saat tombol mouse

berada di luar area tombol. Contoh:

5. Kemudian isi bagian over yang sebelumnya masih kosong dengan bentuk tombol

yang ingin ditampilkan pada saat mouse persis berada pada tombol. Contoh

6. Untuk animasi yang ditimbulkan oleh objek pada saat tombol mouse ditekan, maka

tampilannya di letakkan pada area Down, seperti terlihat pada contoh berikut:

7. Tentukan luas daerah dari objek tombol yang dibuat. Sebaiknya daerah tersebut

sama persis dengan besarnya objek agar tidak membingungkan pemakai.

8. Setelah selesai buka kembali stage science dan drag symbol tombol tersebut untuk

selanjutnya dapat dipergunakan seperlunya.

25

25