basic of macromedia flash

5/21/2018 Basic of macromedia Flash

1/25

ASIC OF FLASH

Jadmiko A. W +Disertai CD


2/25

Basic Of Flash + Teknik JituCopyright 2007 Jadmiko!Blogspot!Com " #c$7!%alteng!&et

Attention :

Tutorial ini dibuat benar-benar hanya untuk mengetahui & belajar dasar-dasar Flash,

buat anda yang merasa sudah mahir lebih baik jangan membaca E-Book ini, saya

ingatkan lagi jangan dibaca kalau anda tidak ingin kecewa !

ASIC OF FLASH

+ Tips Teknik Jitu

The Monkey He Can !!

By.j dm ko

Darimana ya cara untuk memulai cara yang sederhana dan menarik untuk

belajar flash, tentunya tidak ada sesuatu yang instant, kalo ingin masuk "#

tentunya kita harus masuk D bahkan T$ terlebih dahulu% adi kalo kita mao belajar

flash kita harus kudu ngerti aa itu E'ot to Grapic, Movie Clip, and Button

Gbr. Tampilan Flash 8


3/25


ATTENTION

#ma(ing Button

Button atau dalam bahasa indonya tombol bisa kita artikan begitu, memunyai

bentuk emanfaatan yang sangat )T*+ di media flash, kenaa begitu karena denganadanya elemen button maka sebuah karya kita bisa saja menjadi interaktif karena

memerlukan masukan ilihan dari engguna% #rrgghhhhhh%, bingung . ya sudah

biar tidak makin bingung simak aja nih aa aja sih elemen yang ada di dalam button%

$ey Frame Function

/

*0er

Down

1it

Bila keadaan normal

Bila keadaan dilewati

Bila ditekan

Bila area enekanan

$enaa saya gunakan istilah Bila , karena sesuatu bisa saja terjadi karena

inilah #ma(ing Button%

Tidak kenal maka tak sayang, jadi biar kita bisa akrab dengan si 2Button3 kita

liat dulu yuk ciri-cirinya,

adi coba deh kamu gambar di stage gambar terserah kamu mao ake tool

aaun yang ada di toolbar sebelah kiri, trus kamu seleksi semua gambar kamu!

udah . oke lanjut 2click3 kanan gambar kamu yang sudah terseleksi trus ilih con0ert

to symbol%


4/25


Di atas saya gunakan gambar bulat dengan 2o0al tool3 short cut nya 2*3 ,

gimana udah, trus ilih button jangan lua kasih nama kaya ngelahirkan seorang anak

yang nyatanya kita sudah mencitakan sebuah 2Button3%

Eit, erjuangan kamu belum selesai lho untuk membuat button yang interaktif,

jadi sekarang ayo dech kita kenalan ama si button, caranya. 4lik aja si button yang

sekarang sudah unya nama, angga saja namanya tes, karena button yang saya buat

bernama 2tes3%

usah ya dengan istilah-istilahnya, jadi aku make istilah lagi nih mudah-

mudahan gak makin bingung,

'da ( orang anak yang )ernama *p,- ,O.er,- ,/on,- dan ,1it,

mereka selalu )ersaha)at dan seharusnya memang selalu )erempat! Tentunya

mereka punya rumah masing$masing- tapi- lho- si *o.er,- *don,- dan

*1it, )elum punya rumah- se)agai manusia yang )aik dan )eriman mari kita

)antu mereka )uat ketiga rumah mereka yang )erikutnya!

4lick mouse kanan ada masing-masing Frame 5frame adalah rumah mereka

beremat6, lalu ilih insert keyframe 5buatkan rumah 7 bentuk frame6% angan lua

buatkan rumah buat ketiganya%

elamat ya, kamu ternyata orang baik yang gak komromi ama siaa saja

senang berbuat baik dan ternyata rumah mereka sudah jadi, tai kok gak ada

erubahan ya. *ke kita lanjut ke taha selanjutnya, semua bilang

8a9nnnnnnnjutttt%


5/25


4oba deh gerakin 5drag6 tali kabel teleon merah yang melintang di salah satu

keyframe, gak ada beda kan dengan o0er down dan hit, sekarang klik frame *0er dan

coba dek kamu ganti warna merah dengan warna kuning, caranya . ake tool 2aint3short cut nya 2$3 terus ilih juga warna cat kita di 24olor mi'er3 di bar sudut kanan

atas, coba deh ake warna kuning, terus siram objek merah samai dia berubah warna%

8akukan hal yang sama dengan si 2Down3 tai buat si 21it3 nanti dulu yah,

4lick ctrl:enteritu short cut buat jalanin mo0ienya, liat deh erbedaan saat

normal5keadaan biasa6, saat mouse berada di atas, atauun setelah ditekan button yang

kita buat, gimana. elamat yah, sedikitnya kamu udah ngerti cara kerja button% 9ah

sekarang sih 21it3 ya yang belum dibahas. adi gini dari morfologi kosakata bahasa

inggrisnya 5cieeee6 kegunaannya itu adalah bentuk di dalam button yang menjadi

bagian enentu sebuah button, kita harus menentukan area hit5enekanan6 ada

button, besar atau kecil untuk jelasnya lihat screen shot di bawah%

/kuran bola 1it yang sama dengan keadaan 2/3,3*0er3, dan 23Down3


6/25


Bagaimana jika kita ganti dengan 2kotak3 ada bagian 21it3

"ouse saat berada di atas 5o0er6 tombol%

adi gitu, seerti ilustrasi di atas buat si 21it3 sih gak masalah mau warna

mukanya gimana, dia lebih mentingin bentuk badan ama iner beautynya 5baca ;

fungsi6%

9ah kamu udah sukses buat bikin tombol ake Flash, banyak-banyak latihan

suaya teknik kamu terasah, karena masih banyak sekali emanfaatan tombol yang

belum saya bahas di sini, temukan imajinasimu sendiri% Boleh saya kasih masukkan


7/25


ATTENTION (

#ma(ing "o0ie 4li

"o0ie cli, aduh, malah makin using nih kalo kamu gak raktek, tai

sebelumnya aku coba jelasin dulu aa itu "o0ie 4li dalam Flash, harafiahkosakatanya sih otongan kecil yang boleh kita sebut culikan animasi, cerita, atau

teks yang kita buat seolah-olah hidu dan bisa kita letakkan di mana aja, namanya

juga cli, jadi kamu bisa aja ngakal-ngakalin masukin cli mo0ie ke dalam button

atau graic%

>ess jadi benang kusut deh, ayo semua tana anjang lebar ikut taha-taha

membuat cli mo0ie seerti di bawah ini?

Gbr. te)s pa)e Te)s tool *+T,- i sta/e

eleksi teks tersebut lalu con0ert to symbol lalu ilih 4li mo0ie dan click ok%

Gbr. Convert To 01mbol

"asuk kedalam 2mo0ie teks3 tersebut setelah dia di con0ert, caranya . click

aja dua kali dan%% @iiii kamu udah masuk ke dalam rongga mo0ie cli dan layer

serta frame di stage sudah berubah, coba deh kamu erhatikan, ini yang namanya


8/25


bagian dari mo0ie yang menjadi unsur animasi di mo0ie cli% Temat kamu membuat

bentuk ergerakan di dalam flash memunyai layer serta frame yang berbeda-beda%

"aka setelah dengan sukses kamu con0ert si objek 2teks3 menjadi mo0ie cli maka

dia sudah eksis unya%T3di dalam dunia Flash% Dan tentunya $T+ nya memunyaidata-data yang berbeda dengan mo0ie yang lain% Fuh%%, mudah-mudahan ngerti ya%%

8anjut%

4ni tanda kalo kamu sudah masuk ke dalam mo.ie clip!

ekarang buat frame dengan clik kanan ada layer teks ilih insert key frame A

engulangan dari frame ke frame A seerti ada gambar %

8alu clik kiri ada frame C ada layer teks

=anti warna hitam 2#yo belajar F8#13 dengan warna yang kamu suka

selain hitam, untuk awal coba gunakan warna cerah saja, lalukan berulang hingga

0elintas 22

#a itu frame dan 8ayer ..

Gbr. Frame Gbr. 3a1er


9/25


frame A dengan mengganti warna ada setia frame hingga ada setia frame tidak

memunyai kesamaan warna%

udah ..oke coba deh tekan short cut Ctrl+Enter liat deh mo0ie cli yangudah kamu buat% adi sudah sebuah teks yang seerti teks berdisko 5berganti warna6%

"o0ie cli ini bisa kamu letakkan di mana saja, bisa di dalam button juga

bisa%4aranya . kluar dari dalam mo0ie cli ke scene utama5scene satu6, dengan cara

click scane9ya%

election mo0ie teks disko lanjutkan dengan con0ert to button, lalu seerti

ada tutorial button buat kreasi-kreasi yang terikir oleh kamu%

ATTENTION (

#ma(ing =raic

etelah kamu tahu dan akrab berkenalan dengan mo0ie cli kamu akan lebih

mudah berkenalan dengan si 2graic3 karena mereka bersaudara dekat, astinya

sifatnya kurang lebih sama doenk

Benar, jadi gini ersesi saya tentang si graic, seerti harafiah namanya kita

bisa saja membuat sejenis teks disko5baca ; #ma(ing "o0ie 4li6 seerti mo0ie cli

tetai tidak sama ersis seerti si mo0ie yang bisa memunyai mo0ie cli di dalam

mo0ie cli, keberadaan graic untuk memermudah engelolaan bentuk 0ariabel di

antara button, dan mo0ie cli% =raic sebaiknya hanya berfungsi sebagai mo0ie yang

tidak memunyai mo0ie lagi di dalamnya, aabila terdaat mo0ie di dalam graic

maka mo0ie tersebut tidak akan bekerja karena si graic hanya akan diangga gambar

di dalam flash% Tetai memasukkan animasi ada graic tidak ada salahnya bila kita

hanya memasukkan frame di dalam badan utama graic untuk membuat animasi yang

tidak begitu detail bisa kita angga fungsi graic ini sebagai background saja, bukan

menu utama seerti mo0ie cli dan button%


10/25


elamat sekarang kamu sedikitnya sudah naik kelas bila telah mengetahui

ketiga unsur tersebut di dalam F8#1, silakan anda berkreasi dengan

mengkolaborasikan ketiga unsur tersebut menjadi sesuatu karya yang kreatif,

berkualitas, dan original karya anda sendiri% angan ernah berhenti menyerah untukberekserimen dan latihan terus dengan mencita emikiran yang ada di keala anda,

buat sesuatu yang unik yang berbeda dari karya lain% Tentunya ada sesuatu keuasan

yang anda daat bila seseorang yang menyaksikan karya anda tersebut dengan

terkagum-kagum mengagumi anda karena anda telah membuat terkesan dirinya%

Banyak 5alan menu5u 6oma, bentuk karakter imajinatif anda% #khir kata selamat

berjuang%

Tip,s An Tri),s :

. Guna)an T4een

Bagaimana sebuah animasi flash daat bergerak . tidak banyak leas dari

fungsi tween motion, artinya anda bisa saja membuat suatu objek bergerak dengan

mengkombinasikan tiga titik fokus utama, bentuk kondisi awal, kondisi akhir, lalu

usat rotasi% Buatlah sebuah objek di sudut kiri stage ada frame dan insert

keyframe ada frame A, ada keyframe A indah objek sudut kanan stage, atursudut rotasi komilasi frame dan frame A dengan menggunakan free transform

tool 56, seeri ada gambar

9e't

Gbr. Frame Gbr. Frame (

Gbr. Tentu)an 0uut $otasi


11/25


Gbr. Create Motion Gbr. Motion T4een

alankan hasil twening kamu untuk melihat roses kerja tekanEnter, untukre0iew hasil >F tekan short cut ctrl+Enter%

C% Membentu) /ambar en/an men//una)an 0election Tool*v-

#nda tidak jago untuk urusan menggambar . manfaatkan seleksi tool untuk

membentuk karakter gambar anda% #rahkan mouse anda ke objek yang ingin

dibentuk, berikut jenis embentuk seleksi tool

=aris

"elengkung

=unanya untuk menarik garis yang melengkung, sesuaikan

dengan bentuk gambar anda

=aris udut =unakan untuk menarik sudut-sudut gambar anda hingga

sesuai dengan yang di3inginkan

5. Buat Ob6e) berBentu) 5%

=imana sih cara membuat gambar yang kelihatan nyata., manfaatin aja warna

linear dan radial yang ada di flash, dengan mengatur sudut encahayaan yang

teat akan terbentuk gradasi bayangan yang seerti miri benda asli%

4oba anda coba mengikuti contoh embuatan gambar benda D yang saya

terakan% aya #kan membuat kotak dimensi%


12/25


=ambar *bjek dengan 8ine, *0al, atau

ectangle Tool, angga saja skesta

objek D

iram sketsa objek dengan +aint Bucket Tool 5$6 yang sebelumnya telah

disetting linearGradial color dan intensitas warnanya%

#tur letak encahayaan dengan =radients Transform Tool 5F6, lalukan hal

tersebut berulang untuk bagian yang belum diwarnai%

*bjek yang telah di warnai

sekarang tidak memerlukan garis

bantu lagi, haus saja garis bantu

tersebut%


13/25


7. Gambar /raasi 4arna Tanpa 3inear %an $aial

Terlalu banyak menggunakan warna 8inear dan adial tentunya akan sangat

tidak effisien diterakan ada Flash, selain akan membuat ukuran file kita

membengkak juga membuat animasi kita berjalan lambat 5atah-atah6% 8alubagaimanakah kita menggambar. +akai saja warna 5solid6 ditumuk-tumuk

dengan warna yang sama tai dengan brightness5terang-gela6 yang berbeda%

eerti ada contoh di gambar

Gbr. en/an 4arna teran/ /elap

aya bila dikatakan jujur lebih suka menggunakan gaya menggambar seertiini dan memang cocok diterakan untuk flasher emula karena tidak serumit

menggunakan linear dan radial yang harus daat menggunakan komosisi yang

teat untuk engaturan warnanya, tetai kita akan banyak kehabisan banyak

waktu, tenaga, dan efesiensi kerja bila untuk membuat satu gambar saja kita bisa

menghabiskan waktu berhari-hari%

#kan saya contohkan cara menggambar dengan teknik lukis,


14/25


Gbr. "ola /ambar Gbr. ToolBar Gbr. Color Mier

=ambarlah sebuah objek di stage, saya mencoba menggambar sebuah wajah,untuk mengatur ewarnaan anda bisa mengaturnya di color roerty 5color

"i'er6warna dasarnya saya gunakan warna kuning langsat 5IFF44JJ6 dan warna

tumuknya kuning langsat muda 5IEFD#B6% aya menorehkan warna ke gambar

dasar yang sudah jadi dengan Brush Tool tetai dengan menaikkan intensitas

brightnessnya yang daat anda atur di color mi'er% angan teraku ada warna

yang ada, anda harus gunakan rasa seni yang anda unya, seyogyanya semua

manusia memunyai bentuk encitraan seni yang berbeda-beda itulah yang

membuat seorang elukis, designer dll memegang teguh dan ercaya diri akan

kemamuannya menjadi sukses di bidangnya%

Gbr. Brush 9 0election Tool

#tur juga bentuk brus yang akan anda gunakan ada tool roerty atau tool

bar di kiri sudut saming% Tai sekedar tis saya juga kadang tidak terlalu

bergantung ada bentuk brus, karena warna akan saya atur lagi dengan selection

tool506, tarik dan rasakan komosisi bentuk gambar anda% Bila anda rasa sudah

klop lanjutkan dengan membuat gambar bagian lainnya% Berikut gambar yang

telah jadi%


15/25


. Membuat Ob6e) men6ai transparan


16/25


Banyak ilihan warna ada roerty insector, kita daat memanfaatkannya

dengan kreatif-kreatifnya anda, saya berikan keada anda tabel fungsi tersebut

sebagai emacu anda%

Color Function

9one

Brightness

Tint

#lha

#d0anced

9ormal

4ahaya terangGgela

Titik Fokus >arna

Transaransi warna

+enggabungan dari Brightness, Tint, dan #lha

Tentunya bila anda koloborasikan dengan tween berbagai Effect akan tercita,

seiring latihan dan raktek langsung akan memacu timing taste 5feeling waktu6%

"aksudnya, kaan effect-effect fade in harus masuk dan Fade out harus keluar dll%

;. Man


17/25


Gbr. "roperties paa 3a1er

8ayer tidak 4uma hanya bagian atau temat kita berijak meletakkan

otongan-otongan animasi, scrit, mo0ie, dll tai juga memunyai fungsi yang

unik seerti masking dan guideing% ecara singkat saya akan mencoba

menerangkan mask dan guide selalu memunyai asangan untuk daat bekerja

sesuai dengan fungsinya yaitu maskeddanguidedyang bereran sebagai anakan

atau eran embantu fungsi utamanya, masking5layer utama6 akan bekerja dengan

di dalam layernya terdaat masked 5layer dasar6% *bjek ada layer utama adalah

area untuk menamilkan tamilan ada layer dasar% edangkan =uide 5layer

utama6 dan =uided 5layer dasar6 akan bekerja dengan guided mengikuti bentuk

objek ada layer utama%

8. Man


18/25


"anfaatkan secara maksimal tool layer untuk effisiensi kerja anda, ada tool

utama ada layer

0ho4>'ie la1ermenamilkanGmenghilangkan seluruh bagian frame mauun

keyframe di dalam layer, clik icon untuk mengaktifkan dan menonaktifkannya%

3oc)>!nloc) 3a1er untuk mengunci tai teta menamilkan keseluruhan

layer% "aksimalkan tool ini untuk memermudah menyambung runtunan

otongan animasi dan tidak merusak layer yang di kunci karena tidak daat di

edit%

0ho4 3a1er as Outlines/ntuk menamilkan keseluruhan layer dalam bentuk

kerangka garis% #nda akan lebih mudah membentuk karakter bila melihat

desainnya secara out and in lines% "anfaatkan tool ini untuk membentukotongan animasi%

?. Man


19/25


@. Guna)an Trans


20/25


(. 0cene an Eit 01mbol

Gbr. 0cene 9 01mbol

Temukan dan berindah scene menggunakan shortcut di atas% #nda lebih

mudah mengatur setingan keberadaan scene, 0ariabel symbol, serta settingan

ukuran andangan, secara default menggunakan LLM%

5. Frame An Time

+ahami etunjuk Frame and Time di atas untuk mengasah timing animation

anda hingga anda dalam membuat animasi telah menjadi satu dengan engaturan

frame, kaan object datang dan kaan object keluar%

a6 4urrent Frame ; adalah frame dimana etunjuk keberadaan red line

anda berada%

b6 Frame ate ; setting jumlah frame dalam detik, ada setingan

default digunakan C,L fs 5dalam satu detik menggunakan C frame6%

c6 Elased Time ; waktu dimana saat ini anda berada, menghitungberdasarkan dimana keberadaan red line%

7. 0ettin/ "ublishin/

Fitur standar dari flash ialah kefleksibelitasnya untuk berbagai format ada tab

file3ulish 8etting, kita daat mengatur bagaimana bentuk hasil jadi file yang

akan kita ublish% Biasakan selalu mengatur fitur ini sesuai dengan keerluan kita,

misalkan kita hanya membutuhkan kualitasstandarkenaa kita harus mensetting

ada format high, tentunya akan banyak menghabiskan waktu untuk komuter

bekerja merender file tersebut% adi atur saja sesuai dengan kebutuhan%

. 0o


21/25


ketahui ada 0ersi trial enggunaan unsur warna linear dan radial yang

dikomress akan menyebabkan warna menjadi grayscale%

;. $esource 'ac)er#da lho software buat hack informasi yang ada ada sebuah alication yang

berekstensi 5Ne'e6% 6esource 1ackernamanya berguna banget kalo kita ingin

buat karya kita terlihat lebih esklusif %etelah kita ublish rogram kita dari

+rogram Flash akan terdaat icon flash dan data-data standar tentang aa dan

bagaimana file tersebut dicitakan% Edit saja keterangan tersebut dengan

es1acker, di dalam res1acker kita daat mengganti 0ariabel icon dengan

mengimort file icon yang telah kita siakan, tentunya dengan dimensi yang sama

dengan standar yang digunakan% Edit juga 0ariabel info dalam file tersebut,

esource 1acker mudah untuk dielajari karena itu saya rasa tidak erlu lagi

membahasnya lebih jauh

Gbr. Tampilan $esource 'ac)er

. Guna)an 0hort Cut

+akai dong short cut, jangan terlalu sering hanya menggunakan mouse%

"enggunakan keduanya 5mouse dan short cut6 akan lebih memersingkat daya

guna dalam ekerjaan% hort cut di dalam flash komletible dengan berbagai

rogram-rogram sejenis jadi tidak erlu terlalu lama untuk menyesuaikan diri

dengan short cut yang digunakan Flash


22/25


8. Impot File

Begitu3oerfullnya Flash kita daat memodifikasi ekerjaan kita dengan file

yang berasal dari berbagai rogram lain seerti ada tamilan imort file di bawah

ini% Dengan ruang lingku yang comitible ini tidak ada batasan kita bisa sajabekerja dengan menggunakan beberaa software rogram sekaligus%

Gbr. Impot File

?. Bi)in AnimasiD =uu Bi)in 0tor1 BOA$% ulu..

/nsur terenting di dalam animasi adalah jiwa animasi itu sendiri, untuk daat

membuat animasi hidu tentunya sang animator harus berusaha menghidukan

setia otongan adengan menjadi hidu, contohnya dengan mendramatisirnya%

#gar otongan adegan beraturan biasakan diri kita membuat tory Board dulu,

Berikut Tata cara embuatan tory board sebelum membuat animasi ;

a6 "enentukan Tema 4erita

b6 "enentukan Durasi 4erita

c6 "enentukan $arakter serta +rofil Tokoh Di dalam 4erita

d6 "em0isualisasikan 8atar belakang cerita

e6 "embuat otongan adegan cerita, sudut andang kamera dan

mendramatisir cerita%


23/25


"aksud mendramatisir cerita adalah melebih-lebihkan atau membuat

enonton benar-benar mengerti jalan cerita dari animasi anda% aya akan

memberikan anda sedikit gambaran tentang mendramatisir cerita%

8i Budi )erlari$lari menge5ar susi- )udi adalah pria yang 5atuh hati padapandangan pertama karena susi adalah orang pertama yang mengatakan )aha

)udi adalah lelaki yang )aik karena telah mem)antunya mengumpulkan tugas$

tugas sekolahnya karena di ta)rak oleh )udi- padahal selama ini )udi tidak

pernah disan5ung seperti itu ! Tapi maksud )aik susi di salah artikan oleh )udi!

9aka )udi )erlari$lari menge5ar susi untuk meminta nomor teleponnya- sedang

susi )erpikiran )aha )udi marah karena perkataanya!

+ada tema cerita di atas bisa kita dramatisikan animasi )erlari$lari dengan

memberikan kesan bahwa budi benar-benar berlari dan menambahkan debu-debu

dan daun-daun yang berterbangan ada setia budi melangkah lari% ebagai

4ontoh bisa kita masukkan cerita tersebut ada story board%

Gbr. 0tor1 Boar

etelah mendaat alan cerita, kita daat juga membuat lanjutan tory Board

tersebut dengan lebih detail dengan kotak kolom dan balon komik%


24/25


Gbr. 0tor1 Boar (

CL% Guna)an Alat BantuScript Assist

Belum mahir menggunakan scrit, temukan dan gunakan tool yang telah

disediakan dalam action )ar, maka tana tahu begitu banyak fungsi scrit kita

daat menemukannya dengan mudah%

Gbr. Actions Bar


25/25


Buku ini adalah awal bagi saya untuk berbagi sedikit engalaman dalam membuat

sebuah rogram animasi interaktif dalam Flash% /ntuk erkembangan anda

selanjutnya sangat tergantung ada ketekunan serta jam terbang anda dalam

embuatan sebuah animasi sedehana yang owerful dengan menggunakan Flash%

Bio/ra

basic of macromedia flash

Documents