Animasi Flash Pemula

Macromedia Flash Pro Macromedia Flash Pro 88

.::.::Fundamentals WorkshopFundamentals Workshop

Macromedia Flash Pro Macromedia Flash Pro 88

.::.::Fundamentals WorkshopFundamentals Workshop JumadiJumadi

[email protected]@mail.ugm.ac.id

Flash::Outline • Konsep Dasar Flash

Tools, Color, Layer, Frame, Symbol, Properties, Actions

• Dasar-dasar Animasi– Motion Tween– Shape– Text– Blur– Path– Button

• Aplikasi Flash– Simple Quiz (Presentation Base)– Prototype: calculator

Tools• Rectangle Tool

– Stroke Color– Fill Color– Set Corner Radius

• Text Tool– Static Text– Dynamic Text– Input Text– Line Type– Show Border Around Text– Variable

Color• Color Mixer Type

– Solid– Linear– Radial– Bitmap

• Symbol color

Layers

• Layer• Layer Folder• Motion Guide

Frames• Frame

– Dipergunakan untuk backgroud

• Keyframe– Mengisi frame dari frame

sebelumnya• Blank Keyframe

– Menyediakan frame kosong membedakan dengan frame sebelumnya

Symbols• Convert Image to Sybombol

• Movie Clip• Button• Graphic

Properties• Text Property

• Rextangle Tool Property

Actions• Actions Script Panel

Actions• Actions Script Assist.

Actions

• Expert Actions Script Mode

Animasi Gerak

Dasar-dasar AnimasiDasar-dasar Animasi.::.::contoh kecil…contoh kecil…

Dasar-dasar AnimasiDasar-dasar Animasi.::.::contoh kecil…contoh kecil…


MOTION TWEEN1. Buat Lingkaran di stage bagian kiri2. CTRL+A atau gunakan arrow tool agar fill &

stroke lingkaran tsb. terseleksi semua3. F8, pilih graphic 4. Klik kanan frame 30 layer 1, pilih insert keyframe5. Pindahkan gbr. lingkaran tsb. ke stage bagian

kanan6. Klik Frame 1 pada layer 17. Lihat panel properties di bagian bawah, pilih

tween=motion8. CTRL+Enter, untuk melihat hasilnya

Animasi Bentuk•

Motion Shape1. Pada bagian tengah stage, buatlah gbr.

lingkaran 2. Klik kanan frame 30, pilih Insert Blank

Keyframe3. Pada bagian tengah stage, buatlah gbr.

Persegi panjang4. Klik frame 1 (layer 1). Lihat panel properties

di bagaian bawah layar, pilih tween=Shape5. CTRL+Enter, untuk menjalankan flash player

Animasi Pecah Teks

TEXT ANIMATION1. Buat tulisan “UIN” di tengah stage2. Pada properties text, lakukan perbesaran

ukuran dan pergantian warna teks3. CTRL+B (break apart)4. CTRL+Shift+D (distribute to layers)5. Klik kanan pada frame 30 (layer U), pilih

insert keyframe6. Klik kanan pada frame 30 (layer I), pilih insert

keyframe7. Klik kanan pada frame 30 (layer N), pilih

insert keyframe

Cont.8. Klik (kiri) frame 30 layer “U”,

kemudian pindahkan huruf U ke sebelah kiri

9. Klik (kiri) frame 30 layer “I”, kemudian pindahkan huruf I ke atas

10. Klik (kiri) frame 30 layer “N”, kemudian pindahkan huruf N ke sebelah kanan

Cont.11. Klik frame 1 pada layer U, lihat

properties dan pili tween=motion12. Klik frame 1 pada layer I, lihat

properties dan pili tween=motion13. Klik frame 1 pada layer N, lihat

properties dan pili tween=motion

14. CTRL+Enter…

Teks efek blur

BLUR1. Tulis “MATEMATIKA”2. F8, pilih Graphic3. Klik kanan pada frame 30 (layer 1),

pilih insert keyframe4. Klik tulisan MATEMATIKA,lihat

properties color=Alpha, 5%5. Klik frame 1. Lihat properties, ubah

Tween=Motion6. CTRL+Enter

Animasi Jalur

PATH1. Buat gbr. Lingkar2. CTRL+A kemudia F8 pilih Graphic3. Klik menu Isert-Timeline-Motion Guide, sehingga

muncul Guide: Layer14. Klik frame 1 pada guide:layer1, gunakan pencil tool

untuk menggambar jalur dengan opition smooth5. Pindahkan lingkaran tepat di awal jalur6. Klik kanan frame 30 guide:layer1, pilih Insert FRAME7. Klik kanan frame 30 Layer 1, pilih insert keyframe8. Pindahkan lingkaran di akhir jalur9. Klik frame 1 layer 1, pilih tween=motion dan check list :

orient to path10. CTRL+Enter

Own Button

BUTTON1. Buat gbr. elips berwana biru2. Buat tulisan “Proses” berwarna putih, ukuran disesuaikan.

Tulisan tsb. bersatu dg gambar elips3. CTRL+A, F8 pilih Button4. Klik 2x (double click) tombol proses dan akan muncul

frame Up, Over, Down, Hit5. Klik kanan frame Over, pilih insert keyframe. Kemudian

pilih tulisan, lihat properties ubah warna tulisan menjadi hijau

6. Klik kanan frame Down, pilih insert keyframe. Kemudian pilih tulisan, lihat properties ubah warna tulisan menjadi Merah

7. Klike Scane 1, untuk kembali ke awal pengeditan8. CTRL+Enter, tombol ciptaan sendiri siap digunakan

Aplikasi FlashAplikasi Flash.::.::aplikasi sederhana…aplikasi sederhana…

Aplikasi FlashAplikasi Flash.::.::aplikasi sederhana…aplikasi sederhana…


Simple Quiz

Cont.

Cont.

Simple Quiz

SimpleQuiz Tutorial1. CTRL+R, untuk import gambar

background2. Ganti layer 1 dengan “Latar”, lakukan

penguncian pada layer ini3. Klik Insert-Timeline-Layer, ganti nama

layer 2 menjadi “pertannyaan”

Cont…

Prototype: Caculator

Cont.

Cont.1. Buat teks bertipe dynamic text dan beri

nama=TxtDisplay

2. CTRL+F7, untuk menampilkan panel component. Klik user interface pd panel tsb.

Cont.3. Klik-and-drag Componen

Button ke stage, atur serapih mungkin. Klik tab parameter, beri nama CmdOne dan lebel=1.

Cont.4. Lakukan hal yang sama untuk

tombol-tombol berikutnya– Nama=CmdTwo, label:”2”– Nama=CmdThree, label:”3”– Nama=CmdFour, label:”4”– Nama=CmdFive, label:”5”– Nama=CmdSix, label:”6”– Nama=CmdSeven, label :”7”– Nama=CmdEight, label:”8”– Nama=CmdNine, label:” 9”– Nama=CmdZero, label:”0”

Cont.5. Lakukan hal yang sama untuk

tombol-tombol berikutnya– Nama=CmdClear, label:“C”– Nama=CmdPlus, label:“+”– Nama=CmdMin, label: “-”– Nama=CmdCross, label: “*”– Nama=CmdDiv label: “/”– Nama=CmdEqual, label: “=”

Script (Calculator)

var Temp:String;var TxtDisplay:String="0";var Cross:Boolean;var Plus:Boolean;var Min:Boolean;var Div:Boolean;

CmdOne.onRelease=function(){TxtDisplay=String(Number(TxtDisplay+"1"));};

CmdTwo.onRelease=function(){TxtDisplay=String(Number(TxtDisplay+"2"));};

CmdThree.onRelease=function(){TxtDisplay=String(Number(TxtDisplay+"3"));};

CmdFour.onRelease=function(){TxtDisplay=String(Number(TxtDisplay+"4"));};

CmdFive.onRelease=function(){TxtDisplay=String(Number(TxtDisplay+"5"));};

CmdSix.onRelease=function(){TxtDisplay=String(Number(TxtDisplay+"6"));};

CmdSeven.onRelease=function(){TxtDisplay=String(Number(TxtDisplay+"7"));};

Cont.• CmdEight.onRelease=function(){• TxtDisplay=String(Number(TxtDisplay+"8"));• };

• CmdNine.onRelease=function(){• TxtDisplay=String(Number(TxtDisplay+"9"));• };• CmdZero.onRelease=function(){• TxtDisplay=TxtDisplay+"0";• };

• CmdCross.onRelease=function(){• Temp=TxtDisplay;• Cross=true;• TxtDisplay="0";• };• CmdPlus.onRelease=function(){• Temp=TxtDisplay;• Plus=true;• TxtDisplay="0";• };

Cont.• CmdMin.onRelease=function(){• Temp=TxtDisplay;• Min=true;• TxtDisplay="0";• };

• CmdDiv.onRelease=function(){• Temp=TxtDisplay;• Div=true;• TxtDisplay="0";• };

• CmdClear.onRelease=function(){• TxtDisplay="0";• Temp="0";• };•

Cont.• CmdEqual.onRelease=function(){• if (Cross==true){• TxtDisplay=String(Number(Temp)*Number(TxtDisplay));• Cross=false;• }•• if (Plus==true){• TxtDisplay=String(Number(Temp)+Number(TxtDisplay));• Plus=false;• }• if (Min==true){• TxtDisplay=String(Number(Temp)-Number(TxtDisplay));• Min=false;• }• if (Div==true){• TxtDisplay=String(Number(Temp)/Number(TxtDisplay) );• Div=false;• }

• };

Contoh Quiz

Game DesignGame Design.::.::permaianan interaktif…permaianan interaktif…

Game DesignGame Design.::.::permaianan interaktif…permaianan interaktif…


• To be continue…

Documents

Animasi Flash Pemula