Macromedia Flash Pro

8
.::

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 Animasi
.::contoh kecil
Jumadi

mcs.jumadi@mail.ugm.ac.id

MOTION TWEEN
1. Buat Lingkaran di stage bagian kiri
2. CTRL+A atau gunakan arrow tool agar fill & stroke
lingkaran tsb. terseleksi semua
3. F8, pilih graphic
4. Klik kanan frame 30 layer 1, pilih insert keyframe
5. Pindahkan gbr. lingkaran tsb. ke stage bagian kanan
6. Klik Frame 1 pada layer 1
7. Lihat panel properties di bagian bawah, pilih
tween=motion
8. CTRL+Enter, untuk melihat hasilnya

Animasi Bentuk

Motion Shape
1. Pada bagian tengah stage, buatlah gbr. lingkaran
2. Klik kanan frame 30, pilih Insert Blank Keyframe
3. Pada bagian tengah stage, buatlah gbr. Persegi
panjang
4. Klik frame 1 (layer 1). Lihat panel properties di
bagaian bawah layar, pilih tween=Shape
5. CTRL+Enter, untuk menjalankan flash player

Animasi Pecah Teks

TEXT ANIMATION
1. Buat tulisan UIN di tengah stage
2. Pada properties text, lakukan perbesaran ukuran
dan pergantian warna teks
3. CTRL+B (break apart)
4. CTRL+Shift+D (distribute to layers)
5. Klik kanan pada frame 30 (layer U), pilih insert
keyframe
6. Klik kanan pada frame 30 (layer I), pilih insert
keyframe
7. 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=motion
12. Klik frame 1 pada layer I, lihat properties
dan pili tween=motion
13. Klik frame 1 pada layer N, lihat
properties dan pili tween=motion
14. CTRL+Enter

Teks efek blur

BLUR
1. Tulis MATEMATIKA
2. F8, pilih Graphic
3. Klik kanan pada frame 30 (layer 1), pilih
insert keyframe
4. Klik tulisan MATEMATIKA,lihat
properties color=Alpha, 5%
5. Klik frame 1. Lihat properties, ubah
Tween=Motion
6. CTRL+Enter

Animasi Jalur

PATH
1.
2.
3.

Buat gbr. Lingkar

CTRL+A kemudia F8 pilih Graphic
Klik menu Isert-Timeline-Motion Guide, sehingga muncul Guide:
Layer1
4. Klik frame 1 pada guide:layer1, gunakan pencil tool untuk
menggambar jalur dengan opition smooth
5. Pindahkan lingkaran tepat di awal jalur
6. Klik kanan frame 30 guide:layer1, pilih Insert FRAME
7. Klik kanan frame 30 Layer 1, pilih insert keyframe
8. Pindahkan lingkaran di akhir jalur
9. Klik frame 1 layer 1, pilih tween=motion dan check list : orient
to path
10. CTRL+Enter

Own Button

BUTTON
1.
2.
3.
4.
5.
6.
7.
8.

Buat gbr. elips berwana biru

Buat tulisan Proses berwarna putih, ukuran disesuaikan.
Tulisan tsb. bersatu dg gambar elips
CTRL+A, F8 pilih Button
Klik 2x (double click) tombol proses dan akan muncul frame
Up, Over, Down, Hit
Klik kanan frame Over, pilih insert keyframe. Kemudian pilih
tulisan, lihat properties ubah warna tulisan menjadi hijau
Klik kanan frame Down, pilih insert keyframe. Kemudian pilih
tulisan, lihat properties ubah warna tulisan menjadi Merah
Klike Scane 1, untuk kembali ke awal pengeditan
CTRL+Enter, tombol ciptaan sendiri siap digunakan

Aplikasi Flash
.::aplikasi sederhana
Jumadi

mcs.jumadi@mail.ugm.ac.id

Simple Quiz

Cont.

Cont.

Simple Quiz

SimpleQuiz Tutorial
1. CTRL+R, untuk import gambar background
2. Ganti layer 1 dengan Latar, lakukan
penguncian pada layer ini
3. 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 tomboltombol berikutnya

Nama=CmdClear, label:C
Nama=CmdPlus, label:+
Nama=CmdMin, label: -
Nama=CmdCross, label: *
Nama=CmdDiv label: /
Nama=CmdEqual, label: =

Script (Calculator)
var
var
var
var
var
var

Temp:String;
TxtDisplay:String="0";
Cross:Boolean;
Plus:Boolean;
Min:Boolean;
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