tutorial flashmx

1

FFLLAASSHH MMXX

Pernahkah anda melihat gambar yang bergerak-gerak ketika pertama kali masuk

mengunjungi sebuah situs?atau pernahkah anda melihat kartun yang setiap hari

ditayangkan di televisi kesayangan anda?Mungkin anda bertanya-tanya

bagaimana cara membuatnya bukan?

Melalui tutorial berikut anda diajak jalan-jalan ke dunia animasi dimana

anda dapat berkhayal, berimajinasi bahkan mengimplementasikannya. Kali ini

akan diperkenalkan sebuah aplikasi yang cukup menyenangkan yang bernama

Flash MX. Flash MX merupakan bagian dari keluarga Macromedia yang

digunakan sebagai aplikasi pembuat animasi. Di bawah ini merupakan aplikasi

yang termasuk

ke dalam keluarga Macromedia.

Aplikasi-aplikasi Macromedia:

1. Flash MX.

2. Fireworks.

3. Dreamweaver.

4. Freehand.

Seiring dengan perkembangan zaman maka Flash MX disesuaikan sesuai

kebutuhan akan pembuatan sebuah aplikasi web disamping pembuatan animasi.

Pe

Pe

D

D

M

M

M

M

endahuluanSystem

Installa

engenalan k

Windo

Menja

Konve

asar – Dasa

Penget

Memb

Mengg

Mengg

Mewar

asar – Dasa

Pewarn

Metode pemb

Frame

Tween

Membuat An

Film TFilm F

Membuat An- Anima- Anima- Anima

Mengubah Pr

n m Requireme

asi Flash MX

komponen-k

ow Utilitas P

lankan Flash

ersi File mel

ar Menggam

tahuan dasar

elah objek d

gambar deng

gambar deng

rnai objek d

ar Pewarna

naan objek d

buatan anim

by frame an

ned animatio

nimasi

Tweening. Frame by Fra

nimasi Text asi Text Hilaasi Text Munasi Text deng

resentasi Po

POKOK

ents.

X.

komponen

Pada Flash M

h MX Movi

lalui Flash M

mbar Objek

r objek pada

dengan line

gan pencil to

gan pen tool

dengan brush

aan Objek P

dengan berb

masi

nimation.

on.

ame.

ang Timbul ncul Satu Pergan Time Lin

ower Point k

K BAHA

Flash MX

MX.

ie.

MX.

k Pada Flas

a flash MX

tool

ool

l

h tool

Pada Flash M

bagai macam

r Satu ne Effect

ke dalam M

ASAN

h MX

MX

m tools.

Macromedia Flash MX

2

3

PENDAHULUAN

Halaman ini berisi tentang petunjuk beserta persyaratan yang dibutuhkan

dalam installasi dan pengoperasian Flash MX.

System Requirements

Dibawah ini merupakan hardware dan software yang dibutuhkan dalam

penginstallasian dan pengoperasian FlashMX.

Hardware : - Intel Pentium 200 MHz.

- 64 MB RAM (128 MB dianjurkan).

- 85 MB disk space.

- CDROM drive.

- Monitor dengan warna 16-bit dan mampu resolusi sebesar

1024x768. (minimal monitor 15” dengan resolusi 800x600).

Software (OS) : - Windows 98 SE, Windows ME, Windows NT 4.0, Windows

2000, Windows XP.

Installasi Flash MX

Ikuti petunjuk berikut untuk installasi Flash MX.

1. Masukkan CDROM Flash MX ke dalam CDROM drive.

2. Lalu dari Windows Explorer cari drive CDROM Anda.

3. Dari drive CDROM Anda, pilih file Flash MX Installer.exe (Setup.exe).

4. Lalu ikutilah petunjuk installasi yang telah disediakan.

5. Jika diminta untuk restart computer, maka Anda harus merestart komputer

Anda.

P

mpetedaMgr

DMAA

PENGE

Sebelumengenal d

embuatan serdapat di apapat berjala

MX yang digraphic atau

Di bawah ini MX secara deA. TimelineAnda.

ENALA

um membudahulu komsebuah aniplikasi Flashan dengan gunakan da animasi be

C

E

G

merupakan etail: e, digunak

AN KOFLA

uat sebuahmponen-kom

imasi. Andh MX ini aglancar. Di

alam pekerjergerak (car

B

Gambar 1. W

keterangan

kan untuk m

Gambar 2.

MPONASH Mh animasi

mponen apada harus mgar pekerjaabawah inijaan pemburtoon).

A

Window Mac

dari keguna

engatur dan

Timeline W

NEN-KOMX

ada kala saja yangmengenal seman dalam pe merupakanuatan anim

D

F

romedia Fla

aan masing-m

n mengontro

Window

OMPO

lanya Andg dibutuhkmua kompoembuatan ann window dasi, baik it

G

ash MX

masing kom

ol isi keselur

ONEN

da harus an dalam onen yang nimasi ini dari Flash tu berupa

G

mponen Flas

ruhan movie

4

h

e

5

B. Stage, merupakan tempat dimana Anda bekerja dalam membuat sebuah animasi.

Gambar 3. Stage untuk bekerja

C. Tools Box, berisi alat-alat yang digunakan untuk menggambar objek pada stage.

Gambar 4. Window Tools box

Description of Tools Box:

Arrow Tool

Tool ini digunakan untuk memilih suatu objek atau untuk

memindahkannya.

Subselection Tool Tool ini digunakan untuk merubah suatu objek dengan edit points.

6

Line Tool Tool ini digunakan untuk membuat suatu garis di stage.

Lasso Tool Tool ini digunakan untuk memilih daerah di objek yang akan diedit.

Pen Tool Tool yang digunakan untuk menggambar dan merubah bentuk suatu objek dengan menggunakan edit points (lebih teliti & akurat).

Text Tool Tool ini digunakan untuk menuliskan kalimat atau kata-kata.

Oval Tool Tool yang digunakan untuk menggambar sebuah lingkaran.

Rectangle Tool Tool yang digunakan untuk menggambar sebuah segiempat.

Pencil Tool

Tool ini digunakan untuk menggambar sebuah objek sesuai dengan

yang Anda sukai. Tetapi setiap bentuk yang Anda buat akan

diformat oleh Flash MX menjadi bentuk sempurna.

Brush Tool Tool ini sering digunakan untuk memberi warna pada objek bebas.

Free Transform Tool Tool ini digunakan untuk memutar (rotate) objek yang Anda buat atau mengubah bentuk objek menjadi bentuk lain.

Fill Transform Tool Tools ini digunakan untuk memutar suatu objek yang diimport dari luar lingkungan Flash MX, serta untuk mengatur efek warna.

Ink Bottle Tool Tool ini digunakan untuk mengisi warna pada objek yang bordernya telah hilang (tidak ada).

Paint Bucket Tool Tool ini digunakan untuk mengisi warna pada

7

objek yang dipilih.

Eraser Tool

Tool ini digunakan untuk menghapus objek yang Anda bentuk.

Description of Colors Box:

Stroke Color, digunakan untuk memberi warna pada garis / Border objek.

Fill Color, digunakan untuk memberi warna objek.

Swap Colors, digunakan untuk menukar warna objek(Fill Color) dengan warna border / garis(Stroke Color).

Black & White, digunakan untuk memberi warna objek dan

warna border / garis dengan warna hitam putih.

Description of View Box:

Zoom Tool, digunakan untuk memperbesar tampilan objek pada stage.

Hand Tool, digunakan untuk menggerakkan suatu tampilan objek pada stage tanpa merubah posisi objek tersebut pada stage.

D. Color Window, merupakan window yang digunakan untuk mengatur warna

pada objek yang Anda buat.

Color Window terdiri dari:

1. Color Mixer, digunakan untuk mengatur warna pada objek sesuai

dengan keinginan Anda. Ada 5 pilihan tipe warna,

yaitu: None, Solid, Linear, Radial, Bitmap.

8

Gambar 5. Window Color Mixer

2. Color Swatches, digunakan untuk memberi warna pada objek yang

Anda buat sesuai dengan yang warna pada window.

Gambar 6. Window Color Swatches

E. Actions – Frame, merupakan window yang digunakan untuk menuliskan

Action Script untuk Flash MX. Biasanya Action Script

digunakan untuk mengendalikan objek yang Anda buat

sesuai dengan keinginan Anda.

F.

G

pe

m

ya

. Properti

G. Compo

Windo

embuatan a

mempunyai b

aitu Default

es, merupa

dari ob

onents, d

G

ow diatas m

animasi sec

banyak wind

Layout,

Gambar

akan windo

bjek yang A

Gambar 8.

digunakan

application

Gambar 9. W

merupakan w

cara windo

dow layout

Designer

7. Window

ow yang di

Anda buat.

Window Pro

untuk me

yang nanti

Window Com

window utam

ow default

dalam pe

[1024x7

Actions - Fr

igunakan un

operties

enambahkan

inya di publ

mponents

ma yang ser

layout. Pa

embuatan se

68], Desig

rame

ntuk meng

n objek u

lish ke inter

ring digunak

ada dasarn

ebuah anima

gner

atur proper

untuk web

rnet.

kan dalam

ya Flash M

asi, diantara

[1280x109

rty

b

MX

anya

24],

10

Designer [1600x1200], Developer [1024x768], Developer [1280x1024],

Developer [1600x1200]. Untuk merubah window layout Anda dapat membukanya

melalui menu Window lalu pilih Panel sets. Tetapi kali ini kita akan menggunakan

window Default Layout, karena semua tools dan window standart yang kita

butuhkan untuk membuat sebuah animasi ada disini semua.

Window Utilitas Pada Flash MX

Library Window

Window ini digunakan untuk menampilkan objek-objek yang kita import dari

luar lingkungan Flash MX maupun objek-objek bawaan dari Flash MX itupun

sendiri. Untuk menggunakannya Anda dapat menekan tombol F11 pada

keyboard atau dari menu Window pilih Library.

Gambar 10. Window Library

Document Properties Window

Window ini digunakan untuk merubah setting (baik itu ukuran, warna,

maupun kecepatan movie) pada dokumen yang berada pada stage. Untuk

menggunakannya Anda harus menekan tombol Ctrl+j secara bersamaan

pada keyboard Anda, atau dari menu Modify pilih Document….Pada

window yang satu ini Anda dapat merubah warna background dari

dokumen Anda beserta ukurannya.

Window Merupaka

Anda bua

mengatur

dapat mem

Window

G

Layer Propan window

at sesuai de

bagaimana

milih menu M

Ga

Scene

Gambar 11.

perties dimana An

engan keing

a sebuah a

Modify lalu

ambar 12. W

Window Do

nda dapat

ginan Anda

animasi berj

pilih Layer

Window Laye

ocument Pro

mengatur s

a. Melalui

alan. Untuk

…

er Properties

operties

setting dari

windowni

k menjalank

s

layer yang

Anda dapa

kannya Anda

11

g

at

a

12

Merupakan window dimana Anda dapat mengatur scene yang ada. Melalui

window ini Anda dapat menambahkan scene, menghapus scene, atau

menduplikasikan sebuah scene. Untuk mengaktifkannya Anda dapat menekan

secara bersamaan tombol Shift+F2 melalui keyboard, atau dengan memilih menu

Modify lalu Scene….

Gambar 13. Window Scene

Menjalankan Flash MX Movie

Untuk menjalankan movie yang telah Anda buat, Anda dapat mengaktifkannya

melalui menu Control lalu pilih Play (tombol Enter pada keyboard). Untuk membuat

movienya Anda dapat menekan tombol Ctrl+Enter secara bersamaan setelah Anda

simpan project Anda.

Konversi File melalui Flash MX

Anda dapat melakukan konversi file melalui flash MX. File yang dikonversi

biasanya berbentuk file *.swf ke dalam bentuk lainnya, seperti *.html, *.exe, *.avi,

dan lain sebagainya. Untuk mengkonversi file flash yang telah Anda buat,

terlebih dahulu Anda harus mengaktifkan konverternya terlebih dahulu. Cara

mengaktifkannya yaitu dengan memberi checkmark pada type file yang Anda

inginkan. Untuk mengaktifkan publish settings Anda dapat memilih menu

File > Publish Settings…

(Ctrl+Shift+F12).

K

Fl

H

G

W

M

Q

Keterangan:

lash (.swf)

Html (.html)

Gif, Jpeg, Pn

Windows Pr

Macintosh P

Quick Time

)

ng

ojector

Projector

Gambar 14

: Menghas

dibutuhk

: Menghas

explorer

biasanya

: Menghas

: Menghas

: Menghas

: Menghas

4. Publish S

silkan file *.

kan flash pla

silkan file *

untuk menj

a digunakan

silkan file ga

silkan file *.

silkan file *

silkan file *.

Settings

.swf (untuk

ayer).

*.html (diper

jalankannya

untuk mem

ambar.

.exe yang da

.hqx untuk m

.mov untuk

menjalanka

rlukan inter

a). Konversi

mbuat web.

apat langsun

macintosh.

Quick time

annya

rnet

ini

ng dijalanka

player.

13

an.

14

DASAR–DASAR MENGGAMBAR OBJEK PADA

FLASH MX

Flash MX menyediakan berbagai macam tools dalam menggambar sebuah

objek. Disini Anda diberikan kebebasan dalam menggambar suatu objek, objek

yang Anda buat tergantung dari imajinasi Anda sendiri.

Pengetahuan Dasar Objek Pada Flash MX

Di dalam Flash MX terdapat berbagai macam objek yang sangat unik

diantaranya yaitu oval tool (yang sering digunakan untuk menggambar

sebuah lingkaran) dan rectangle tool (yang sering digunakan untuk

menggambar sebuah bujur sangkar atau persegi panjang). Kedua tool

tersebut bersifat paten yakni sudah menjadi bawaan Flash MX itu sendiri.

Kedua objek tool tersebut (oval tool & rectangle tool) terdiri dari dua bagian

yaitu: Outline dan fill. Outline merupakan bagian terluar dari objek tersebut,

sedangkan fill merupakan bagian terdalam dari objek tersebut yang dapat diisi

dengan warna atau gambar [Lihat gambar m].

Outline

Fill

Gambar 15. Fill & outline pada objek Flash MX

Outline & Fill dapat disatukan dengan cara membuatnya menjadi satu grup,

yaitu dengan perintah: Group (dapat dipilih melalui menu Modify > Group) atau

dengan cara menekan tombol Ctrl+G secara bersamaan. Tetapi sebelum Anda

menjadikan Outline & Fill menjadi satu grup yang harus Anda lakukan

adalah memblok seluruh bagian Outline & Fill hingga terlihat seperti gambar

m.1. Jika telah diblok maka Anda harus membuatnya menjadi satu grup dengan

ca

Memb

S

s

M

Gamyang

Meng

D

p

J

b

A

p

m

t

ara yang tela

Gam

belah ObjekSelain itu

sangatlah m

Misalnya da

mbar 18. (i) mg dipotong d

ggambar de

Dalam mem

pada Tools b

Jika Anda

bujur sangka

Anda buat a

pula dengan

membedakan

terlihat kasar

ah dijelaskan

mbar 16. fill u

k dengan L dalam p

mudah, kare

lam memoto

(i)

merupakan fdengan line

ngan Penci

mbuat sebuah

box, yaitu p

memilih St

ar yang rap

akan tampak

n Ink ben

n antara In

r).

n diatas.

ungrouped

Line Tool pemotongan

ena Anda d

ong sebuah

fill yang belutool, (iii) m

l Tool

h objek, An

pencil tool.

Straighte

traighten m

pi. Tetapi j

k halus gari

tuknya jug

nk dengan Sm

n gambar

dapat meng

fill dengan m

(ii)

um dipotongmerupakan fi

nda dapat me

en S

maka objek

jika Anda

snya meskip

ga tidak

mooth adala

Gambar 17.

melalui

gunakan be

menggunaka

g dengan linll yang telah

enggunakan

Smooth

yang And

memilih Sm

pun tidak se

serapih S

ah garisnya

. fill grouped

Flash M

erbagai mac

an line tool.

(iii)

ne tool, (ii) mh terbelah m

n tool yang

Ink

da buat ak

mooth maka

erapih strai

Straighten,

yang kurang

d

MX tools

cam cara.

merupakan fmenjadi dua.

terdapat

k

an berbentu

a objek yan

ighten. Begi

tetapi yan

g halus(mas

15

fill

uk

ng

itu

ng

sih

16

Menggambar dengan Pen Tool

Pen tool biasanya digunakan untuk menggambar objek dengan metode

edit points. Untuk menggambar sebuah objek, Anda tinggal menentukan posisi

dari edit points yang Anda inginkan.

Edit points

Gambar 19. objek dengan pen tool

Mewarnai objek dengan Brush Tool

Brush yang artinya sendiri adalah sikat/kuas. Tool ini digunakan untuk mewarnai

sebuah objek secara keseluruhan. Ada 5 metode pemberian warna pada brush tool

(lihat gambar dibawah ini).

(i) (ii) (iii) (iv) (v) (vi)

(i).Gambar asli, (ii).Paint normal, (iii).Paint behind, (iv).Paint selection, (v).Paint fills, (vi).Paint inside.

Merubah Bentuk Objek dengan Arrow Tool

Merubah dalam flash mx sangatlah mudah dan efisien. Untuk mengubah

bentuk suatu objek Anda dapat menggunakan arrow tool. Dengan arrow tool

Anda tinggal mengubah suatu objek dengan menggerakkan outline (garis

objek) dari objek tersebut.

17

Gambar 20. merubah bentuk objek dengan arrow tool

Merubah Bentuk Objek dengan Subselection Tool

Merubah bentuk suatu objek dengan menggunakan Subselection tool

sangatlah mudah dan menyenangkan, karena dengan subselection tool Anda

dapat merubah suatu objek tool menjadi suatu objek yang Anda inginkan.

Lihat gambar dibawah ini yang telah dipilih dengan menggunakan

subselection tool.

Gambar 21. merubah bentuk objek dengan subselection tool

Dengan menggunakan subselection tool maka objek diatas dapat diubah menjadi

objek baru (seperti gambar dibawah ini).

Gambar 22.Objek yang telah diubah

18

DASAR – DASAR PEWARNAAN OBJEK PADA FLASH MX

Untuk memberikan efek yang baik pada suatu animasi ada kalanya kita harus

mengatur warna suatu objek agar terlihat menarik. Dalam pewarnaan suatu

objek pada Flash MX kita dapat menggunakan berbagai macam tools,

diantaranya yaitu:

A. Color Mixer.

B. Color Swatches.

C. Paint Bucket Tools.

D. Ink Bottle Tools.

E. Brush Tools.

F. Fill Transform Tools. (Untuk mengatur efek warna radial)

Jika Anda menginginkan animasi yang Anda buat mempunyai tampilan

menarik dan indah, maka Anda harus memberi efek warna yang baik pula.

Oleh karena itu kali ini kita akan belajar bagaimana memberikan efek warna

pada suatu objek agar terlihat lebih indah. Memberi warna dengan Color Mixer & Color Swatches

Untuk memberi efek warna pada objek pada Flash MX hanya membutuhkan 2 color

tool, yaitu: Color

Mixer & Color Swatches. Saat ini kita akan membahas tentang bagaimana cara

menggunakan tools tersebut.

19

Penentu Warna

Penentu Warna Transparan

Penentu Type Fill

Penentu Brightness

Ruang Warna

Gambar 23. Color Mixer

Didalam Color mixer terdapat 5 macam type fill:

1. None – tidak memberi warna apapun pada fill.

2. Solid – memberi warna padat pada fill.

3. Linier – memberi warna berbentuk linier pada fill.

4. Radial – memberi efek warna radial pada fill.

5. Bitmap – memberi image pada fill. (untuk mengimpor file gambar gunakan

import to library pada file menu).

Untuk memberi warna pada objek yang ditentukan, Anda harus menggunakan

tools yang bernama paint bucket tool. Biasanya yang diberi warna pada object

ialah fill-nya saja. Untuk memberi warna pada outline, Anda harus

menggunakan ink bottle tool.

Pada pojok kanan window color mixer terdapat R, G, B (yang biasa disebut

sebagai penentu warna). R(Red) digunakan untuk memberi nilai seberapa besar

kemerahan warna objek tersebut. G(Green) digunakan untuk memberi nilai

seberapa besar kehijauan warna objek tersebut. B(Blue) digunakan untuk

memberi nilai seberapa besar kedalaman warna biru pada objek tersebut. Alpha

memberi efek warna transparan pada objek yang dituju.

20

Gambar 24. Color Swatches

Pada color swatches untuk memberi warna pada object prinsipnya sama saja

dengan color mixer, yang membedakannya yaitu kalau pada color mixer Anda

dapat mencampurkan berbagai warna sekaligus memodifikasinya menjadi suatu

efek warna sesuai dengan keinginan Anda. Tetapi kalau pada color swatches

efek warna sudah ditentukan oleh system. Melalui color mixer Anda dapat

membuat warna baru di color swatches.

Mengatur Tata letak warna pada Objek

Untuk mengatur tata letak warna pada objek dapat menggunakan tool yang

b ernama Fill Transform

Tool. Cara menggunakannya yaitu:

1. Pilih seluruh area dari objek tersebut. Kemudian pilih Fill Transform Tool dari

Tools Box.

2. Setelah itu klik kembali objek yang akan diatur warnanya.

Maka hasilnya akan seperti gambar dibawah ini.

21

Gambar 25. Object yang diatur warnanya

Selain cara-cara diatas Anda masih dapat mengontrol warna lewat tools box. Hanya

saja warna pilihan untuk outline beserta fill bersifat solid. Kunci kesuksesan

dalam membuat suatu animasi bersifat interaktif terletak dalam pengaturan

warnanya.

Jika Anda memberikan warna yang solid saja pada animasi Anda maka

animasi yang Anda buat tersebut akan terlihat kurang menarik. Karena itu efek

warna sangat diperhitungkan dalam pembuatan suatu animasi.

Fram

Fr

fla

de

m

te

di

U

me by Frame

rame by fr

ash mx ya

engan meto

movie maker

erlebih dahu

isesuaikan.

Untuk membu

1. Gamb

lalu p

Keyfra

2. Setela

yang

di bag

ME

e Animation

ame anima

ang menggu

de ini prins

r, tetapi bed

ulu dan me

uat animasi

barlah oval

pilih Insert

ame.

ah itu denga

telah Anda

gian option

TODE P

n

tion merup

unakan fram

sipnya sama

danya pada

letakkan fil

ini sangatla

tool pada s

Gamba

an menggun

buat hingga

ubahlah era

PEMBUA

pakan suatu

me pada tim

a dengan m

flash mx A

lm tersebut

ah mudah, ik

stage. Kemu

ar 26. Mema

akan eraser

a menyerup

aser mode m

ATAN AN

metode pe

meline. Biasa

membuat seb

Anda harus

t pada kunc

kutilah petu

udian klik k

asukkan key

tool hapusla

ai gambar d

menjadi eras

NIMASI

embuatan a

anya animas

buah film p

menyesuai

ci yang tela

njuk beriku

kanan pada

yframe

ah sebagian

dibawah ini

se normal.

animasi dala

si yang dibu

pada window

ikan kuncin

ah dibuat d

t ini.

frame kedu

n dari oval to

i. Sebelumn

22

am

uat

ws

nya

dan

ua

ool

nya

Tween

Tw

da

A

m

tim

m

1.

2.

3 . Ikutila

Perhatian:

dahulu. H

yang And

4. Jika A

mene

Enter.

ned Animat

weened anim

ari Flash M

Anda tingg

menggerakka

meline akan

maka ikutilah

. Gambar

tersebut m

. Setelah

ah cara diat

: Sebelum m

Hapuslah per

a buat.

Anda telah s

kan tombol

Untuk meng

tion

mation mer

MX. Untuk m

gal menen

an dari satu s

n terlihat ta

h petunjuk b

objek (mis

menjadi satu

itu klik k

Gamb

tas untuk m

menghapus

rlahan-lahan

Gambar 28

selesai mem

g-compile fi

rupakan sua

membuat su

ntukan pan

sisi ke sisi la

anda panah

berikut ini.

sal: rectang

u group (Ctr

kanan pada

bar 27. Men

menghapus b

oval tool, h

n hingga ova

. Menyesua

mbuatnya, jal

film tersebut

atu animasi

uatu anima

njang lama

ainnya. Bias

h. Untuk me

gle tool) pa

rl+G).

a objek la

ghapus oval

bagian yang

harus memas

al tool habis

aikan objek d

lankan mov

t tekan Ctrl+

yang mema

asi motion

a animasi

sanya objek

enggunakan

ada stage, k

alu pilih

l tool

g lain dari o

sukkan keyf

s sesuai den

dengan fram

vie tersebut d

+Enter.

anfaatkan fa

sangatlah m

tersebut di

yang telah

n animasi tw

kemudian b

Distribute

oval tool.

frame terleb

ngan keyfram

me

dengan cara

asilitas moti

mudah kare

ijalankan la

di tween pa

ween terseb

buatlah obje

to layers.23

bih

me

a

ion

ena

alu

ada

but

ek

.

3.

4.

5.

Kemudian

click item

G

Melalui t

klik kana

Kemudian

dahulu ke

frame yan

frame).

Anda ger

lain. Jika

animasi y

dari sisi a

n beri nam

m tersebut di

ambar 29. M

timeline ten

an pada fram

n klik kana

eseluruhan

ng Anda blo

rakkan obje

objek sudah

yang Anda d

awal menuj

ma layer ters

timeline.

Memberi nam

ntukanlah p

me ke 15 lal

an pada fra

frame terseb

ok tadi aka

Gambar 30

k yang And

h Anda pind

disain. Maka

u ke sisi y

sebut denga

ma layer dan

panjang anim

lu pilih inser

ame yang t

but. Lalu pi

an keluar se

0. Membuat

da buat dari

dahkan, sila

a objek yan

yang lainnya

an nama kot

n penentuan

masi tersebu

rt keyframe

telah terben

ilih Create

ebuah tanda

motion twe

tempat yan

ahkan tekan

ng Anda b

a secara oto

tak dengan

n waktu anim

ut berjalan

. (lihat gamb

ntuk. Sebelu

Motion Twe

a panah (ses

en animatio

ng semula ke

enter untuk

buat tadi a

omatis.

cara double

masi

dengan car

bar 4)

umnya blok

een…. Maka

suai panjang

on

e tempat ya

k menjalank

akan berger

24

e

ra

k

a

g

ang

kan

rak

25

MEMBUAT ANIMASI TEXT Animasi teks merupakan salah satu bagian animasi yang dapat

diimplementasikan untuk menambahkan efek animasi dan mempercantik tampilan paket bahan ajar multimedia yang akan dikembangkan. Dengan memberikan sedikit sentuhan animasi pada teks, akan dapat meningkatkan “atensi” pengguna CD interaktif terhadap teks yang dibuat.

A. Animasi Teks Hilang Timbul

Pada latihan ini kita akan membuat sebuah animasi sederhana, berupa animasi

teks hilang timbul, dengan langkah sebagai berikut :

1. Buat sebuah file dokumen flash yang baru, dengan ukuran 200 x 800

pixel, warna background seting menjadi hitam.

Gambar 31. Setingan dokumen flash

2. Buat dua buah layer, masing‐masing layer ubah namanya menjadi teks 1

(untuk layer 1) dan teks 2 (untuk layer 2).

Gambar 32. Pembuatan 2 layer pada dokumen flash

3. Pada layer Teks1, klik frame 1, kemudian klik Text Tool ( ), untuk

membuat sebuah teks pada layer Teks1, dengan setingan seperti terlihat pada

Gambar 33.

26

Gambar 33. Setingan Huruf teks yang akan dibuat

4. Kemudian, tempatkan text tool pada halaman dokumen flash, dan drag

sesuai dengan ukuran teks yang akan digunakan, kemudian ketikkan

“Teknik Informatika FT UMP”, atau sesuaikan dengan teks yang akan

dibuat.

Gambar 34. Teks pada layer Teks 1

5. Selanjutnya, konvert teks tersebut menjadi symbol (convert to symbol = F8),

pilih opsinya menjadi grafik dan namakan dengan teks1

Gambar 35. Konversi teks menjadi symbol grafik

6. Pada layer 1, klik kanan pada frame ke 30, pilih Insert Key Frame, untuk

membuat sebuah key frame pada frame ke 30, Kemudian lakukan hal sama pada

frame ke 7 dan 25

Teknik Informatika FT UMP

27

Gambar 36. Penempatan key frame pada frame 7, 25 dan 30

7. Rencana animasi teks yang akan kita buat adalah, teks “Teknik Informatika

FT UMP “ tersebut semula tidak tampak, kemudian muncul dan setelah itu

hilang kembali.

8. Klik frame 1 pada layer Teks 1, kemudian klik tulisan teks yang telah dikonversi

menjadi grafik, kemudian pilih property color, seting nilai alpha‐nya menjadi

0%

Gambar 37. Pengaturan alpha teks menjadi 0%

9. Lakukan langkah yang sama (langkah 8) pada frame 30

10. Klik kanan pada frame 3, 15 dan 27, pilih Create Motion Tween

Gambar 38. Pembuatan sebuah Motion Tween

11. Jika ingin memperoleh waktu animasi yang lebih panjang, maka silahkan

atur durasi panjang frame yang akan digunakan.

12. Kemudian pada layer Teks2, gunakan kembali Text Tool, untuk

membuat teks “Mempersembahkan”, dengan setingan sebagai berikut :

28

Gambar 39. Setingan teks Mempersembahkan

13. Kemudian drag, frame 1 ke frame 31

14. Setelah itu dikonversi menjadi symbol, dengn nama Teks2, dan behaviornya

Graphic

Gambar 40. Konversi teks ke symbol Teks2

15. Pada layer Teks2, klik kanan pada frame ke 60, pilih Insert Key Frame, untuk

membuat sebuah key frame pada frame ke 60, Kemudian lakukan hal sama

pada frame ke 37 dan 50.

Gambar 41. Penempatan key frame pada frame 37, 50 dan 60

16. Rencana animasi teks yang akan kita buat adalah, teks “Mempersembahkan“

tersebut semula tidak tampak, kemudian muncul dan setelah itu hilang kembali.

17. Klik frame 31 pada layer Teks 2, kemudian klik tulisan teks yang telah

dikonversi menjadi grafik, kemudian pilih properti color, seting nilai alpha‐nya

menjadi 0%

Gambar 42. Pengaturan alpha teks menjadi 0%

29

18. Lakukan langkah yang sama (langkah 17) pada frame 60

19. Klik kanan pada frame 33, 45 dan 57, pilih Create Motion Tween

Gambar 43. Pembuatan sebuah Motion Tween

20. Jika ingin memperoleh waktu animasi yang lebih panjang, maka silahkan

atur durasi panjang frame yang akan digunakan.

B. Animasi Teks Muncul Satu Persatu

Pada latihan ini kita akan membuat sebuah animasi teks, yang

memperlihatkan tulisan teksnya muncul perkarakter, kemudian hilang kembali

perkarakter.

Ikuti langkah kerja berikut ini :

1. Buat sebuah file dokumen flash yang baru, dengan ukuran 200 x 800

pixel, warna background seting menjadi hitam.

Gambar 44. Setingan dokumen flash

2. Layer 1 ubah namanya menjadi teks 1.

3. Aktifkan Text Tool, kemudian tempatkan sebuah teks baru “CD Interaktif”

dengan setingan huruf, sama dengan setingan di atas (lihat langkah 3 Latihan A)

Gambar 45. Setingan Teks CD Interaktif

30

4. Kemudian pisahkan masing – masing karakter huruf dengan menggunakan

break apart yang dapat dilakukan dengan mengklik menu modify

break apart atau dengan mengklik tombol Ctrl+B secara bersamaan.

Gambar 46. Pemisahan huruf dengan break apart

5. Kemudian masing‐masing huruf diditribusikan menjadi layer terpisah dengan

distribute to layer dengan mengklik menu Modify Timeline Ditribute

to Layer atau dengan mengklik tombol Ctrl+Shift+D

Gambar 47. Hasil pendistribusian karakter

6. Layer Teks1 saat ini sudah dapat dihapus.

7. Kemudian, selanjutnya kita atur urutan munculnya huruf satu persatu,

dengan jarak muncul masing‐masing huruf adalah 2 frame, maka

masing‐masing huruf kita atur posisinya pada frame dan layer

masing‐masing. Misalnya Huruf C kita biarkan berada pada frame 1, huruf

D digeser ke frame 3, huruf I digeser ke frame 5 dan seterusnya, sehingga

masing‐masing karakter digeser per dua frame pada masing‐masing

layernya secara berurutan. Hasilnya dapat dilihat pada Gambar 48.

31

Gambar 48. Pengurutan tampilan huruf

8. Selanjutnya pada layer C, klik kanan pada frame 31, pilih Insret Frame

9. Kemudian, selanjutnya kita atur urutan hilangnya huruf satu persatu, dengan

jarak hilang masing‐masing huruf adalah 2 frame, maka masing‐masing huruf

kita atur posisinya pada frame dan layer masing‐masing. Misalnya Huruf C

kita biarkan insert frame pada frame 31 (langkah 8), huruf D diinsert frame

pada frame 33, huruf I diinsert frame pada frame 35 dan seterusnya,

sehingga masing‐masing karakter diinsert frame per dua frame pada

masing‐masing layernya secara berurutan. Hasilnya dapat dilihat pada

Gambar 49.

Gambar 49. Hasil pengaturan muncul dan hilang huruf pada flash

10. Jalankan dengan menekan CTRL+Enter

32

C. Animasi Teks dengan Time Line Effect

Selain membuat animasi dengan menggunakan fasilitas rancangan sendiri,

seperti langkah di latihan A dan B, banyak aefek teks lainnya dapat dibuat

dengan Flash menggunakana fasilitas time line effect yang ada pada flash.

Langkah untuk memanfaatkan fasilitas timeline effect ini adapat dilakukan

dengan langkah sebagai berikut :

1. Buatlah sebuah dokumen flash baru, seperti pada latihan A dan B

2. Buatlah sebuah teks seperti : Jaringan Komputer

Gambar 50. Teks Jaringan Komputer

3. Gunakan sub selection tool ( ), klik pada teks

4. Klik menu Insert Timeline Effect Effect kemudian pilih beberpa efek yang

tersedia, seperti terlihat pada Gambar 51.

Gambar 51. Beberapa efek pada timeline efek

5. Untuk membuat efek mengabur (blur), efek membayang (Drop Shadow),

efek mebesar (ekspand) dan efek Berserakan (Explode) silahkan pilih

sesuai dengan efek yang anda inginkan, kemudian untuk menjalankannya

tekan tombol Ctrl+Enter

33

Latihan

1. Buatlah sebuah animasi pembuka (welcome screen) sebuah CD Interaktif

seperti yang terlihat pada contoh file latihan yang telah tersedia pada site

penulis.

2. Animasi welcome screen disesuaikan dengan paket CD Interaktif yang

akan akan dikembangkan

34

MENGUBAH PRESENTASI POWER POINT KE DALAM MACROMEDIA FLASH MX

Untuk mengubah Power Point ke dalam Macromedia Flash MX dibutuhkan beberapa langkah

antara lain:

• Buka Slide power point yang ada pada harddisc Komputer anda.

• Klik File > Save As > pada Save as type pilih windows metafile.

Gambar 52.Menyimpan dengan tipe windows metafile..

• Jika ditanya, apakah anda mau menyimpan semua slide, maka jawaban adalah setiap slide

(every slide).

• Buka Macromedia Flash MX > File > Import > Import to Stage> pilih slide .wmf yang akan

diimport > open.

• Setelah itu kita dapat mengedit sesuai dengan keinginan kita.

Dalam mengubah Power Point ke dalam Macromedia Flash terdapat beberapa kelemahan

antara lain kita harus menata ulang tampilan Power Point pada Flash dan sangat tidak efisien

kalau Slide yang akan diubah terlalu banyak jumlahnya.

35

Memasukan Animasi Flash ke dalam Power Point.

Langkah-langkah yang diperlukan untuk memasukan animasi Flash ke dalam Power Point

antara lain:

• Buka file Power point pada Komputer anda.

• Klik menu View pada Power Point > Toolbars > Control Toolbox.

Gambar 53.Tampilan dari menu view.

• Pilih Shockwave Flash Object.

36

Gambar 54. Ttampilan dari control too box.

• Klik pada stage Power Point.

Gambar 55. Tampilan flash obyek pada stage.

• Klik kanan > Properties sehingga muncul menu seperti gambar dibawah ini.

37

Gambar 56. Tampilan properties shockwave flash.

• Klik dua kali pada (Custom) maka akan muncul kotak dialog properties pages > isi Movie URL

sesuai dengan lokasi file .swf yang kita letakan, misalnya di e:\fla/home.swf.

Gambar 57. Masukan path dimana flash obyek berada..

• Pada Properties Pages > Scale > NoBorder > OK.

• Tekan F5 untuk melihat hasilnya.

Memasukan animasi Flash ke dalam Power Point jauh lebih efisien dari pada mengubah Power

Point menjadi animasi Flash.

tutorial flashmx

Documents