Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto...

13
Fendy Novafianto [email protected]

Transcript of Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto...

Page 1: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Fendy Novafianto

[email protected]

Page 2: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

MENGENAL MACROMEDIA FLASH 8

A. Interface Flash

Macromedia Flash merupakan salah satu program animasi 2D vector yang sangat handal. Disini kita bisa

membuat animasi kartun, animasi interaktif gambar, presentasi, video clip, movie, web animasi dan aplikasi

animasi lainnya sesuai kebutuhan kita.

B. Keunggulan Flash 8

Relatif mudah digunakan

Tampilannya tidak terlalu rumit

Dapat membuat tombol interaktif dengan sebuah movie atau objek lain

Dapat membuat perubahan transparasi warna dalam movie

Membuat perubahan animasi dari satu bentuk ke bentuk lain

Dapat membuat gerakan animasi dengan mengikuti alur yang telah ditetapkan

Dapat di konversi dan di publish ke dalam beberapa format: *.swf, *.html, *.jpg, *.png, *.exe, *mov

C. Cara Membuka

Untuk membuka program Macromedia Flash 8 Anda dapat melakukan cara berikut:

Pilih Start > Program > Macromedia > Flash 8 Atau

Pilih Ikon Flash 8 pada dekstop (Layar monitor).

Page 3: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

D. Mengenal Jendela Kerja

Menubar

Berisi kumpulan menu atau perintah-perintah yang digunakan dalam Flash 8.

Toolbar/toolbox

Simbol Nama Fungsi Shortcut

Selection Tool Memilih dan memindahkan objek V

Subselection Tool

Mengubah bentuk objek dengan edit points A

Free Transform Tool

Mengubah ukuran atau memutar bentuk objek sesuai keinginan

Q

Gradient Transform Tool

Mengubah warna gradasi F

Line Tool Membuat garis N

Lasso Tool Menyeleksi bagian objek yang akan diedit L

Pen Tool

Membuat bentuk objek secara bebas berupa dengan titik-titik sebagai penghubung

P

Text Tool Membuat teks (kata atau kalimat) T

Oval Tool Membuat objek elips atau lingkaran O

Ractangle Tool Membuat objek berbentuk segi empat atau segi banyak R

Pencil Tool Menggambar objek secara bebas Y

Brush Tool

Menggambar objek secara bebas dengan ukuran ketebalan dan bentuk yang sudah disediakan

B

Ink Bottle Tool Memberi warna garis tepi (outline) S

Paint Bucket Tool

Memberi warna pada objek secara bebas K

Page 4: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

Eyedropper Tool Mengambil contoh warna I

Eraser Tool Menghapus objek E

Hand tool Menggerser stage H

Zoom tool Memperbesar atau memperkecil objek M atau Z

Stroke tool Memberi warna garis

Fill color Memberi warna isian objek

Options tool Mengatur fungsi tambahan dari tool yang sedang aktif

Timeline: Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau

mengontrol jalannya animasi

Layer: sebuah nama tempat yang digunakan untuk menampung satu gerakan objek sehingga jika ingin

membuat gerakan lebih dari satu objek, sebaiknya diletakkan pada layer tersendiri.

Stage: layar yang digunakan untuk menyusun objek-objek, baik teks maupun gambar.

Panel: Beberapa panel penting dalam Macromedia Flash 8 diantaranya panel: Properties, Filters &

Parameters, Actions, Library, Color dan Align & Info & Transform

Document properties: Fungsi Document Properties adalah untuk melakukan pengaturan ukuran layar,

warna background, framerate, dan dimensi dari animasi yang akan dibuat.

Untuk memanggil kotak dialog Document Properties, pilih jendela Properties di bawah layar, kemudian

pilih tombol Size.

Page 5: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

MEMBUAT OBJEK

A. Membuat objek gambar

Pada toolbox klik rectangle Rectangle Tool ( )

untuk menggambar bentuk kotak pada layar.

Untuk memulai menggambar, klik pada stage dan

drag sebesar kotak yang Anda inginkan. Adapun

jenis dan warna garis serta warna isi (fill) bentuk

itu dapat dipilih pada panel Colors.

Apabila Anda ingin bentuk sudut kotak tidak

berbentuk lancip tetapi berupa sudut yang halus

(lengkung), Anda dapat mengubahnya dengan

cara pilih Rectangle dan pilih Set Corner Radius yang berada di bagian bawah panel. Masukkan nilai 5 dalam

kotak dialog Rectangle Setting dan pilih OK. Mulailah menggambar kotak dan hasilnya akan terlihat.

B. Gradasi

Untuk memberi warna gradasi bada suatu gambar/objek, pilih menu Window > Color Mixer, jendela Color

Mixer akan muncul di sebelah kanan layar. Pilih gambar/objek yang akan diberi warna gradasi dengan

Selection Tool ( ), pada pull-down menu di panel Color Mixer, pilih Type Radial. Pilih warna yang lebih

terang untuk bagian sebelah kiri, sedangkan bagian kanan yang lebih gelap.

Stroke/garis

Fill/isi

Page 6: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

Untuk mengedit gradasi pilih Gradient Transform Tool ( ). Klik dan drag handle yang muncul sesuai

dengan arah yang diinginkan.

C. Membuat objek teks

Untuk menambahkan teks ke dalam stage pilih Text Tool ( ) pada toolbar kemudian klik pada stage.

Sebuah kotak kosong akan muncul. Untuk mengubah jenis, ukuran serta warna font, gunakan jendela

Properties di bagian bawah layar.

Kita bisa mengubah warna, ukuran, jenis pengetahuan hurufnya dengan memilih Properties pada bawah

stage. Kita tinggal mengedit/mengubah-ubah properties yang kita inginkan, dengan memilih teks tersebut,

kemudian di ubah sesuai kreasi kita

Page 7: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

D. Import gambar

Untuk memasukkan gambar dalam format bitmap, seperti misalnya foto, ke dalam movie dapat dilakukan

dengan cara mengimpor gambar/foto tersebut. Pilih menu File > Import > Import to Stage, lalu cari letaknya

direktori gambar yang akan di impor.

Page 8: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

ANIMASI DALAM FLASH

Animasi dalam flash merupakan serangkaian frame yang berisi gambar dengan perbedaan yang pencitrakan

suatu gerakan pada manusia. Keyframe merupakan kumpulan frame tempat masing masing-masing gambar

disusun, yang rangkaiannya dikontrol dengan timeline.

A. Animasi Tween

Animasi teknik ini diterapkan pada sebuah instance, yaitu obyek dalam flash yang memiliki sifat

animasi atau Movie Klip behavior.

1) Animasi Motion Tween

a. Pada toolbox klik Oval Tool

b. Pada bagian color Klik Stroke Color untuk memilih warna garis dan klik fill color

untuk memilih warna isi

c. Pada bidang gambar yang tersedia buatlah gambar seperti contoh:

d. Pada toolbox Klik tombol Arrow Tool kemudian klik dan drag untuk meyeleksi tiga buah

lingkaran yang telah kita buat tadi

e. Kemudian klik kanan (menu insert) dan pilih Convert to symbol, klik nama dan tulis misalnya “Coba1”

kemudian pilih Default type yaitu Movie Clip.

Frame kosong Keyframe

Page 9: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

f. Pada panel Timeline klik frame1, kemudian klik kanan (menu insert) pilih Create Motion Tween

g. Pada panel Timeline klik frame 10, kemudian klik menu insert pilih Keyframe

h. Pastikan frame 10 terseleksi, klik satu kiri pada frame 10, kemudian pilih Arrow Tool klik pada

gambar dan geser ke kanan.

i. Pada toolbox klik Free Transform Tool , kemudian putar gambar Coba1 kira-kira 1800

j. Dengan cara yang sama (dimulai dari langkah no 7) buatlah animasi pada frame 20 dan frame 30,

sesuai dengan kreasi masing-masing.

2) Animasi Shape Tween

Animasi teknik ini digunakan untuk membuat visualisasi perubahan bentuk yang sederhana.

1. Klik Insert layer

2. Klik ganda pada layer 2 ubah namanya menjadi “shape”

3. Pada bagian color Klik Stroke Color untuk memilih warna garis dan klik fill color

untuk memilih warna isi

4. Pada bidang ganbar yang tersedia buatlah gambar seperti contoh:

5. Klik Frame 10, kmd klik kanan (menu insert) pilih Blank Keyframe

6. Buatkah Gambar lain seperti berikut pada frame 10

Keyframe 1 Keyframe 10

7. Klik Frame 1 lihat panel properties, dan ubah Tween jadi shape.

Page 10: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

8. Tekan enter untuk melihat hasil animasi.

B. Animasi Frame to Frame

Animasi teknik ini memerlukan keahlian menggambar bentuk dan menuntut ketekunan untuk dapat

menghasilkan gerakan animasi yang bagus pasa setiap framenya.

1. Klik Insert layer

2. Klik ganda pada layer 3 ubah namanya menjadi “frame”

3. Pada bagian color Klik Stroke Color pilih hitam dan klik fill color pilih none

4. Buat lingkaran pada bidang gambar (letakkan pada frame 1)

5. Pada toolbox klik line Tool dan buatlah gambar seperti contoh

6. Pada panel Timeline klik frame 2, klik kanan (menu insert) pilih insert Keyframe

7. Pada roolbox klik Free Transform tool kemudian klik tangan kanan, geser titik tengah transform ke

baguan bahu, dan klik ujung atas seleksi, putar hingga tangan kanan ke bawah.

8. Perlakukan langkah 7 untuk tangan kanan

9. Pada panel timeline klik frame 3, , klik kanan (menu insert) pilih insert Keyframe

10. Perlakukan no 7 untuk kaki

11. Dan seterusnya ulangi langkah no 6 untuk mengisi frame kosong dengan animasi

12. Tekan enter untuk melihat animasi

Page 11: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

C. Animasi Motion Guide/Jalur

Pada animasi ini, objek yang kita buat akan mengikuti jalur tertentu yang disebut guide. Misalnya kita akan

membuat gerakan benda memutar, atau model bumi mengelilingi matahari atau model atom.

Buat dokumen baru, ubah nama layer menjadi “latihan”

Klik add motion guide di bawah layer ( )

Buat lingkaran dengan oval tool pada layer “latihan”

Pada layer “guide” > buat lintasan dengan oval tool kemudian hilangkan fill atau isinya.

Hapus lintasan sedikit dengan eraser tool agar ada ujung dan akhirnya.

Klik kanan > pilih insert keyframe pada frame 20 pada kedua layer.

Pada layer latihan lakukan klik kanan > pilih create motion tween

Letakkan benda pada frame 1 pada salah satu ujung, kemudian pada frame 20, letakkan benda pada

ujung yang satunya.

Frame 1 Frame 20

Test movie anda dengan menekan tombol Ctrl + Enter

D. Animasi Masking

Animasi masking merupakan animasi tutup, seperti topeng, berguna sebagai penutup suatu benda. Untuk

lebih memahami animasi ini, ikutilah langkah berikut:

Buat tulisan dengan teks tool, misalkan “pelatihan flash”

Buat layer baru kemudian buatlah sebuah lingkaran dengan oval tool

Klik kanan pada layer atas kemudian pilih mask

Page 12: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

Maka bagian yang akan terlihat hanyalah bagian yang tertutup oleh lingkaran tersebut. Sekarang

berikan animasi motion tween pada lingkaran tersebut.

Insert keyframe pada ke dua layer, misal pada frame 30. Kemudian klik kanan pilih create motion tween

pada layer yang ada lingkarannya.

Pada frame 30, geser lingkaran ke bagian kanan teks seperti pada gambar

Jalankan animasi anda.

Bagaimana jika kedua layer ditukar/dibalik? Apa yang terjadi? Silahkan anda coba!

E. Tombol Animasi

1. Klik Insert layer , kemudian klik ganda layer 4 ubah namanya menjadi “tombol”.

2. Pada toolbox klik Rectangle Tool , buatlah kotak pada bidang gambar untuk dijadikan tombol

3. Pada toolbox klik Arrow Tool dan klik ganda kita yang telah kita buat.

4. Kemudian klik kanan (menu insert) dan pilih Convert to symbol, klik nama, dan tulis misalnya “Tombol”

kemudian pilih Default type yaitu Button kemudian tekan OK.

Page 13: Fendy Novafianto fendynovafianto@ymail · PDF fileModul Macromedia Flash 8 | Fendy Novafianto C. Animasi Motion Guide/Jalur Pada animasi ini, objek yang kita buat akan mengikuti jalur

Modul Macromedia Flash 8 | Fendy Novafianto

5. Klik Insert layer , kemudian klik ganda layer 5 ubah namanya menjadi “Script”.

6. Pada panel Timeline Layer Script klik frame 1, dan buka Panel Actions , klik tanda plus dan

diikuti langkah sebagai berikut:

7. Lihat Frame 1 Layer Script sekarang memiliki icon huruf “a”, yang artinya terdapat Action Script di

dalamnya, yaitu script stop untuk menghentikan movie flash.

8. Klik tombol frame 1 yang telah dibuat tadi, kemudian buka panel Action , kemudian klik

tanda plus dan pada kotak ditulis Script sebagai berikut berikut:

9. Script goto seperti gambar di atas akan memerintahkan ketika tombol buatan anda ditekan, movie akan

bergerak dari frame 1

10. Pada Menu control klik Test Movie.

11. Pada Menu File klik Save untuk menyimpan data flash anda

12. Untuk menghasilkan file movie secara terpisah, klik menu kemudian File kemudian klik Publish.

13. Buka folder lokasi anda menyimpan file flash, disana akan anda temukan file berekstensii swf dan html.

14. Klik ganda file swf untuk melihat animasi yang telah anda buat, jangan lupa tekan tombol buatan anda

untuk melihat animasi dimainkan/diputar.