Modul Pelatihan Animasi Dasar

mhharismansur

modul naskah media dan animasi

Daftar Isi

Modul Pelatihan Animasi Dasar Menggunakan Flash

1

Daftar Isi ............................................................................................ 1

A. Interface Flash ...................................................................................... 2

1. Flash Stage ..................................................................................... 2

2. Toolbox ......................................................................................... 3

B. Animasi Frame by Frame .......................................................................... 6

C. Animasi Shape ...................................................................................... 7

D. Animasi Motion ..................................................................................... 8

E. Animasi Motion Guide.............................................................................10

F. Animasi Masking ...................................................................................13

G. Symbol Grafik ......................................................................................16

H. Symbol Movie Clip .................................................................................19

I. Symbol Button .....................................................................................21

J. Save As ..............................................................................................22

K. Publising ............................................................................................23

L. Action Script .......................................................................................26

1. Tampilan Action ..............................................................................26

2. Objek ..........................................................................................26

3. Script ..........................................................................................29

M. Referensi ..........................................................................................33

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


2

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 diimpor

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

A. Interface Flash

Modul Pelatihan Animasi Dasar Menggunakan Flash

1. Flash Stage

Flash Stage dalam kenyataan seperti layar bioskop. Pada flash stage berupa kotak

putih besar. Semua obyek seperti gambar, tulisan, dan foto ditempat pada stage.

Di luar area kotak putih, tersebut merupakan daerah berwarna abu-abu. Di area

ini penonton tidak dapat melihat objek apapun saat film sedang dimainkan.

Perhatikan gambar dibawah. layar Flash dibawah ini :

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


3

Ukuran default dari stage adalah 550 picxel dan tinggi 400 picxel (picture

elment).Picxel merupakan titik terkecil pada layar monitor Anda. Untuk

mengubah ukuran sesuai kebutuhan : Klik menu Modify ► Document, muncul

dialog box Document Properties seperti pada gambar di bawah, Anda tinggal

mengubah sesuai kebutuhannya.

Modul Pelatihan Animasi Dasar Menggunakan Flash

2. Toolbox

Toolbox berisi alat kerja berupa berbagai simbol gambar atau icon yang masingmasing

mempunyai fungsi tertentu dan paling sering digunakan. Adapun

komponen-komponen toolbox adalah sebagai berikut :

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

4

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

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

gambar.

8 Delete Anchor Point Tool (-), berfungsi untuk

menghapus Anchor Point dari garis, kurva, atau

gambar.

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.

5

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

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

atau memperkecil tampilan stage.

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.

6

B. Frame By Frame

1. Buat objek lingkaran dengan menggunakan Oval tool :

2. Posisikan objek di pojok kiri

3. Insert keyframe di frame 2 lalu geser ke kanan objek lingkaran tersebut

4. Beri keyframe di frame selajutnya sampai frame 5

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

5. Setiap frame digeser sampai objek pada posisi paling kanan

7

6. Test Movie (Ctrl + enter)

C. Animasi Shape

1. Buat objek kotak dengan menggunakan Rectangle Tool

2. Posisikan objek di pojok kiri

3. Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut

4. Pada frame lima, objek kotak dihapus dan diganti objek oval

5. Klik diantara frame 1 dan 5

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

6. Pilih menu Insert lalu pilih Shape Tween

8

7. Pada frame akan muncul panah hijau

8. Test Movie (Ctrl + enter)

D. Animasi Motion

1. Buat objek lingkaran dengan menggunakan Oval tool. Lalu hapus ditengahtengahnya

dengan cara diblok terus klik delete. Ingat!! dalam menjalankan

motion, objek harus dalam posisi di kunci. Dapat menggunakan group (Ctril+ G)

2. Posisikan objek di pojok kiri

3. Insert keyframe di frame 5 lalu geser ke kanan objek lingkaran tersebut

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

9

4. Klik diantara frame 1 dan 5

5. Pilih menu Insert lalu pilih ► Classic Tween

6. Pada frame akan muncul panah warna biru

7. Klik diantara frame 1 dan 5

8. Lihat Properties lalu pilih rotasi ► CW

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

10

9. Test Movie (Ctrl + enter)

E. Animasi Motion Guide

1. Klik file ► Import gambar kupu-kupu

2. Rotasi dengan posisi agak miring dengan menggunakan Free Tansform

Tool.

3. Insert Keyframe pada frame 30 lalu geser objek ke kanan

4. Klik kanan di frame 1 dan 30 lalu pilih Create Motion Tween

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

11

5. Klik kanan pada layer lalu pilih Add Classic Motion Guide

6. Pada layer guide, klik di frame 1

7. Buat jalur kupu-kupu sesuai keinginan dengan menggunakan Pencil Tool

8. Atur posisi akhir kupu-kupu tepat pada garis

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

12

9. Centang Orient to Path pada propertis dibawah agar pergerakan kupu- kupu

menyesuaikan jalur. Untuk menampilkan propertis tersebut, terlebih dulu klik

diantara frame 1 dan 30

10. Test Movie (Ctrl + enter)

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


F. Animasi Masking

Modul Pelatihan Animasi Dasar Menggunakan Flash

1. Buat teks dengan menggunakan Text Tool

13

2. Insert layer lalu buat objek kotak yang nantinya sebagai tutup (mask). Objek

kotak di group untuk menggunakan tween motion

Atau dengan memilih ikon di bawah Layer, perhatikan tampilan berikut :

3. Insert keyframe di frame 25 pada layer 2 (kotak). Pindahkan objek kotak ke

sebelah kanan

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

14

4. Klik kanan diantara frame 1 dan 25. Pilih Create Motion Tween

Kemudian pilih menu Insert ► Classic Tween

Akan muncul tampilan berikut :

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

15

5. Klik kanan pada layer 2 lalu pilih Mask

Maka layer akan berubah menjadi seperti ini :

6. Tes Movie (Ctrl + enter)

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


16

1. Import gambar motor ke stage dengan cara, pilih menu File ► Import ► Import

Modul Pelatihan Animasi Dasar Menggunakan Flash

G. Symbol Grafik

to Stage.

Berikut tampilannya

2. Seleksi gambar lalu klik Modify ► Convert to Symbol ► Graphic. Beri nama dan

tempatkan registration pada posisi tengah lalu klik OK

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

17

3. Klik double pada objek gambar motor. Muncul Symbol Graphic moge di dalam

Scene 1.

4. Insert keyframe pada frame 25 lalu geser objek motor ke sebelah kiri, Klik kanan

diantara frame 1 dan 25 lalu pilih Create Classic Tween

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

18

5. Kembalikan ke scene 1 dengan cara klik Scene 1, perhatikan tampilan berikut :

6. Insert frame di frame 20 (symbol grafik membutuhkan frame lebih dari satu untuk

menjalankan animasi)

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

19

Perhatikan tampilan di bawah ini :

7. Tes Movie (Ctrl + enter)

H. Symbol Movie Clip

1. Import gambar kupu-kupu ke dalam stage

2. Seleksi gambar lalu klik Modify ► Convert to Symbol ► Movie Clip. Atau klik

kanan pada gambar kupu-kupu lalu pilih Convert to Symbol.

Beri nama dan tempatkan registration pada posisi tengah lalu klik OK

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

20

3. Klik double pada objek gambar kupu-kupu. Muncul symbol grapik kupu

didalam scene 1

4. Buat animasi pergerakan kupu-kupu mengepakkan sayap. Dari frame 5, 10, 15

diberi keyframe buat menjadi pendek

5. Kemudian diantara keyframe tersebut diberi Classic tween, digeser ke kanan di

frame 5, 10, 15, dst.

6. Kembalikan ke scene 1

7. Tes Movie (Ctrl + enter). Animasi dapat berjalan karena Symbol Movie Clip bisa

berfungsi walaupun hanya mempunyai 1 frame

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

21

I. Symbol Button

1. Buat objek lingkaran dengan warna colour radial

2. Seleksi gambar lalu klik Modify ► Convert to Symbol ► Button. Beri nama dan

tempatkan registration pada posisi tengah lalu klik OK

3. Klik double pada objek lingkaran. Muncul symbol grapik tombol didalam scene 1

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

22

4. Beri keyframe di frame over, down, dan hit. Pada frame over ganti warna

lingkaran menjadi merah radial. Di frame down warna biru radial dan di frame hit

silver radial.

Catatan!!!

Up : tampilan awal

Over : tampilan waktu disentuh

Down : tampilan waktu ditekan atau di klik

Hit : Area sentuh tombol

5. Kembalikan ke scene 1

6. Tes Movie (Ctrl + enter)

J. Save As

1. Klik file Save As bila file yang belum disimpan masih berupa untitled dan ada

tanda bintang diatasnya (*). Simpan ditempat sesuai dengan keinginan,

diusahakan dalam satu folder sendiri

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


23

2. Bila sudah tersimpan, pada untitled akan berubaha sesuai dengan nama filenya.

Dalam hal ini jalan.fla

Modul Pelatihan Animasi Dasar Menggunakan Flash

3. Untuk selanjutnya bila ada tanda bintang (*) maka file itu belum disimpan. Kalau

sudah menggunakan Save As untuk selanjutnya tinggal Save (Ctrl + S)

K. Publishing

1. Klik File ► Publish Setting

2. Akan muncul tampilan dialog publish berikut ini :

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

24

Ada beberapa pilihan format publish pada Adobe Flash CS 6.

a) Flash (.swf ) publish dalam bentuk Shockwave Flash ; File Adobe flash yang

digunakan untuk multimedia, gambar vektor, dan actonscript. File inilah yang

dijalankan melalui Adobe Flash Player/Adobe Shockwave Player.

b) HTML Wrapper Hypertext Mark-up Language, publish dalam bentuk file

yang mendukung web.

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


25

c) GIF Image Graphics Interchange Format, Format gambar yang

Modul Pelatihan Animasi Dasar Menggunakan Flash

memungkinkan animasi dan transparansi, biasa digunakan untuk membuat

banner iklan pada periklanan online.

d) JPEG Image Joint Photographic Experts Group, Format gambar kompresi

dari bitmap, jadi gambar lebih ringkas seperti halnya file diringkas dalam

format ZIP, bedanya JPEG atau JPG menggunakan Lossy Compression Scheme,

jadi kualitas gambar menurun.

e) PNG Image Portable Network Graphics, Format gambar yang sangat baik

dan mendukung transparansi, cocok untuk berbagi gambar di internet dengan

kualitas tinggi.

f) Win Projector file aplikasi yang memungkinkan untuk diakses pada

Operating system Windows.

g) Mac Projector file aplikasi yang memungkinkan untuk diakses pada

Operating system Mac OS Apple.

3. Apabila sudah memilih format publish langkah selanjutnya adalah pilih Publish

lalu pilih OK.

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


L. Action Script

1. Tampilan action

Modul Pelatihan Animasi Dasar Menggunakan Flash

26

2. Objek

a) Buat objek bintang pada stage. Klik tahan Rectangle Tool. Lalu pilih Polystar

Tool

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

b) Lihat properties dibawah, klik option,

27

c) Insert keyframe pada frame 2, lalu buat ganti warna objek bintang.

Selanjutnya insert keyframe lagi sampai frame 5. Tiap keyframe diberi

perubahan warna.

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

28

d) Insert layer untuk tombol, beri nama tombol pada layer yang akan diisi button

dan beri nama bintang pada layer yang terdapat objek bintang.

e) Ambil objek tombol pada menu Window ► Common Libraries ► Button

f) Pilih tombol sesuai yang diinginkan. Misal pilih Classic Button ► Playback ►

gel Right.

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

29

3. Script

Stop pada frame

a) Dengan menngunakan objek bintang diatas, Insert layer baru lalu beri

keyframe pada frame 5

b) Klik kanan pada frame ke 5 pilih Action ► Stop.

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

30

c) Berikut tampilan layer dan frame

d) Test Movie (Ctrl + Enter)

Stop pada button

a) Klik kanan pada button lalu pilih Actions.

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

Selanjutnya Timeline Control lalu pilih Stop

31

Nexframe

a) Klik kanan pada button lalu beri action

b) Klik dulu Script Assist untuk memudahkan pembuatan script

c) Tampilan script

d) Test Movie (Ctrl + Enter)

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


Modul Pelatihan Animasi Dasar Menggunakan Flash

Previous Frame

a) Klik kanan pada button lalu beri action

b) Klik dulu Script Assist untuk memudahkan pembuatan script

c) Tampilan script

32

d) Test Movie (Ctrl + Enter)

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id


33

Ilhamzah, Randhy. Modul Adobe Flash CS.5 A. Mengenal Tools Pengolah Multimedia

(Adobe Flash CS5). Diakses pada 18 April 2016

(https://www.academia.edu/9670596/)

http://www.akronima.com/wiki/

REFERENSI

Modul Pelatihan Animasi Dasar Menggunakan Flash

Susanto, Joko. 2009. Modul Pelatihan Flash 8.

Balai Pengembangan Multimedia Pendidikan dan Kebudayaan [BPMPK]

Pustekkom - Kemendikbud

Jl. Lamongan Tengah, Bendan Ngisor – 50233

Telp. (024) 8314292 - Fax (024) 8310051

http://m-edukasi.kemdikbud.go.id/

SEMARANG – JAWA TENGAH

©BPMPK-Kemendikbud | bentar_saputro@yahoo.co.id

More magazines by this user
Similar magazines