1 | t u t o r i a l b y e r i k

Tutorial Flash Cs 3 untuk Orang Awam

Full Imagination

With Adobe Flash Cs 3

2 | t u t o r i a l b y e r i k

Kata Pengantar

Dalam kehidupan sehari hari kita tidak pernah lepas dari yang namanya

gerakan baik itu gerakan tubuh kita , pohon yang yertiup angin dan lain lain

nah gerakan itulah yang disebut dengan animasi.

Biasanya kita sering melihat contoh animasi animasi kartun yang ada di tv

nah kelihatanya animasi itu sulit untuk dibuat tapi anggapan itu salah

karna hanya bermodalkan tekat dan keinginan yang kuat kita bisa

membuatnya.

Adobe flash CS 3 adalah software yang digunakan untuk membuat web

interaktif, E-card, menu interaktif dan salah satunya adalah digunakan

untuk membuat animasi kartun , karera kelengkapan vitur yang disediakan

adobe flash CS 3sehingga pembuatan animasi kartun menjadi mudah.

Dalam E-book ini anda akan mempelajari cara cara pembuatan beberapa

animasi.

3 | t u t o r i a l b y e r i k

Daftar Isi

Cover . ................................................................................................... 1

Kata Pengantar .................................................................................. 2

Daftar isi .............................................................................................. 3

1. Pengenalan Sofware .................................................................. 4

1.1 Mengenal Jendela Kerja ................................................... 4-5

1.2 Mengenal Fungsi Tool ....................................................... 5-8

1.3 Mengenal Time Line .......................................................... 8

1.4 Mengenal Panel ................................................................... 9

1.4.1 Mengenal Panel Properties ..................................... 9

1.4.2 Mengenal Panel Liberary ......................................... 9

2. Tutorial ........................................................................................... 10

a. Animasi Alpha ...................................................................... 10

b. Animasi Burung Terabang ............................................... 11

c. Animasi Rotasi ...................................................................... 13

d. Animasi Motion Shape ....................................................... 13

e. Animasi Teks ........................................................................ 14

f. Tombol Animasi .................................................................... 15

g. Efek Gelombang Air ............................................................ 17

4 | t u t o r i a l b y e r i k

1. Pengenalan Program adobe flash cs 3

Sebelum kita memulai belajar dan berkreasi dengan adobe flash cs 3 /

macromedia flah sebaiknya kita mengenal adobe flash cs 3 / macromedia

flash dan untuk apa fungsinya ter lebih dahulu.

adobe flash cs 3 / macromedia flash adalah sebuah program yang bisa kita

gunakan untuk membuat animasi kartun ( 2D ) , Membangun website,

membuat game flash, membuat pembelajaran ilerning, pembelajaran

interaktif dan presentasi, serta penducumentasian suatu lembaga /

instansi.

1.1Mengenal Jendela Kerja

1. Mengenal Menu Dasar

Berikut merupakan tampilan standar jendela kerja Adobe Flash CS3

Professional, saat Anda memulai membuat file baru.

( Gambar area kerja adobe flash cs 3 )

Jendela kerja Adobe Flash CS3 terdiri atas :

• Menubar

Berisi kumpulan menu atau perintah-perintah yang digunakan dalam

Adobe Flash CS3.

5 | t u t o r i a l b y e r i k

• Toolbar

Toolbar merupakan panel berisi berbagai macam tool. Tool-tool tersebut

dikelompokkan menjadi empat kelompok : Tools

; berisi tombol-tombol untuk membuat dan mengedit gambar, View; untuk

mengatur tampilan lembar kerja, Colors; menentukan warna yang dipakai

saat mengedit, Option;

1.2 Mengenal fungsi tool pada Adobe Fash Cs 3

Gambar yang terlihat di bawah ini adalah gambar dari toolbox adobe

flash cs 3 dan saya akan jelaskan fungsi dari masing masing tool nya.

Beriku penjelasannya secara detil..

1.

Arrow tool atau disebut juga selection tool berfungsi untuk memilih

atau menyeleksi suatu objek.

2.

6 | t u t o r i a l b y e r i k

Subselection toll berfungsi untuk menyeleksi bagian objek lebih detail

dari pada selection tool.

3.

Free transform tool berfungsi untuk mentransformasikan objek

terseleksi

4.

Gradien Transform tool berfungsi untuk mentransformasikan warna

dari fill objek yang terseleksi.

5.

Lasso tool digunakan untuk melakukan seleksi dengan menggambar

sebuah garis seleksi.

6.

Pen tool digunakan untuk menggambar garis dengan bantuan titik-

titik bantu seperti dalam pembuatan garis, kurva atau gambar.

7.

A

Text tool digunakan untuk membuat objek teks

8.

line tool digunakan untuk menggambar garis

7 | t u t o r i a l b y e r i k

9.

rectangular tool digunakan untuk menggambar bentuk persegi

10.

pencil ttol digunakan untuk membuat garis

11.

brush tool digunakan untuk menggambar garis-garis dan bentuk

bebas

12.

digunakan untuk mengubah warna garis, lebar garis dan style garis

13.

paint bucket tool digunakan untuk mengisi area-area kosong

14.

eyedropper tool digunakan untuk mengambil sampel warna dari

gambar atau objek

15.

eraser tool digunakan untuk menghapus objek

16.

handtool digunakan untuk menggeser tampilan stage tanpa mengubah

pembesaran

17.

8 | t u t o r i a l b y e r i k

zoom tool digunakan untuk memperbesar atau memperkecil tampilan

stage

18.

stroke color digunakan untuk memilih atau memberi warna pada

suatu garis

19.

fill color digunakan untuk memilih atau memberi warna pada suatu

objek

1.3 Mengenal Time Line

Timeline atau garis waktu merupakan komponen yang digunakan

untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari

beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa

objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri

dari frame-frame yang digunakan untuk mengatur kecepatan animasi.

Semakin panjang frame dalam layer, maka semakin lama animasi akan

berjalan.

1.4 Mengenal Panel

Beberapa panel penting dalam Adobe Flash CS3 Professional,

diantaranya panel: Properties, Filters & Parameters, Actions,

Library, Color dan Align & Info & Transform

9 | t u t o r i a l b y e r i k

1.4.1 Mengenal Panel Propertis

Panel Properties akan berubah tampilan dan fungsinya mengikuti

bagian mana yang sedang diaktifkan. Misalnya Anda sedang mengaktifkan

Line tool, maka yang muncul pada jendela properties adalah fungsi-fungsi

untuk mengatur line/garis seperti besarnya garis, bentuk garis, dan warna

garis.

1.4.2 Mengenal panel Leberarry

Panel Library mempunyai fungsi sebagai perpustakaan

simbol/media yang digunakan dalam animasi yang sedang dibuat. Simbol

merupakan kumpulan gambar baik movie, tombol (button), sound, dan

gambar statis (graphic).

10 | t u t o r i a l b y e r i k

2. Tutorial

a. Membuat Animasi Alpha

di bawah ini kita akan membahas bagai mana membuat

animasi alpha dengan adobe flash CS3 Professional, dan biasanya

animasi ini sering digunakan untuk memberikan efeck transisi

antara foto satu dengan yang lainnya.

Langkah – langkah nya adalah sebagai berikut

1. Buka Adobe Flash CS 3 kemudian import image di bawah ini

pada menu bahan -> alpha yang terdapat pada CD Tutorial.

2. Buat dua layer sebagai tempat untuk memisahkan foto satu

dengan yang lainnya.

3. Letakkann foto satu pada layer 1, pada frame pertama (1) dengan

cara mendrag foto dari panel leberary ke area kerja

4. Lakukan insert keyframe pada frame ke 5 dengan cara klik kanan

pada frame ke 5 kemudian pilih insert keyframe atau menekan

tombol f6 pada keyboard.

5. Lakukan insert keyframe juga pada frame ke 10 dan 15.

Kemudian beri animasi motion tween dengan cara klik frame ke

1,5,dan 10 kemudian klik kanan lalu pilih creat motion tween.

11 | t u t o r i a l b y e r i k

Apa bila motion tween sudah aktif maka Gambarnya sebagai

berikut

6. Klik objek yang terdapat pada frame ke 1 dan pada frame ke 15,

kemudian buka panel properties

Pada option color ganti yang semula none menjadi alpha dan

nilai alphanya 0%.

7. Masukan gambar ke dua pada layer ke dua dan pada frame

pertama.

8. Geser frame pertama pada layer ke dua ke frame ke 20. Lalau

lakukan insert keyframe pada frame ke 25,30,dan 35 serta beri

motion tween. Maka hasilnya seperti gambar dibawah ini.

9. Kemudian pada frame ke 20 dan 35 , klik objek yang ada pada

frame tersebut lalu type colornya memjadi alpha dan nilai

alphanya 0%.

10. Kemudian tekan ctrl + Enter untuk memutar animasi.

b. Membuat Animasi burung terbang.

Pada kali ini kita akan membahas tentang bagai mana cara

membuat aniasi burung terbang.

Langkah – langkah nya sebagai berikut.

12 | t u t o r i a l b y e r i k

1. Aktifkan Adobe Flash, kemudian import foto burung yang ada

pada Folder bahan -> animasi burung yang terdapat pada CD

Tutorial.

2. Buat simbol baru dengan menekan tombol ctrl + f8 pada

keyboard

Pada kotak pilihan name ketikan animasi burung dan pada

typenya pilih Movie clip kemudian klik OK

3. Buka panel lebrary lalu cari simbol movie clip dengan nama

animasi burung yang sudah kita buat tadi kemudian klik kanan

lalu pilih edit.

4. Pada frame ke 1 pada layer satu yang ada pada simbol masukan

( drag) foto twiterbirtd 01 kemuadian pada frame kedua

masukan tweeter bird 02 terus berurutan hingga pada frame ke

lima masukan foto tweeter bird 01 lagi.

5. Aktifkan union sceen untuk mempermudah kita dalam

meletakan objek karena dengan union skin ini objek sesudah

dan sebelunya akan terlihat transparan. Gambarnya seperti

dibawah

Icon union skin

Tampilan saat union skin aktif

13 | t u t o r i a l b y e r i k

6. kemudian tekan CTRL + Enter untuk memutar animasi.

c. Animasi Rotasi

kali ini kita akan membahas tentang cara membuat animasi

rotasi dengan adobe Flash CS3 Profesional.

Langkah – langkahnya adalah sebagai berikut.

1. Buatlah objek bintang dengan menggunakan PollyStar Tool.

2. Gambarkan objek bintang pada area kerja (stage)

3. Kemudian lakukan insert keyframe pada frame ke 30. Dan

kemuadian beri Motion tween. Jika motion tween berhasil maka

gambarnya seperti dibawah ini.

4. Kemudian aktifkan panel properties

Pada option Rotate rubah yang semula none memjadi CCW.

5. Tekan CTRL+ Enter untu memulai animasi.

d. Animasi Motion Shape

kali ini kita akan membahas tentang bagaimana caranya

membuat animasi motion shape, animasi motion shape ini

adalah animasi yang digunakan untuk membuat sebuah objek

berubah kedalam bntuk yang lain misalkan dari bentuk kotak

berubah kedalam bentuk bintang.

14 | t u t o r i a l b y e r i k

Langkah – langkahnya adalah sebagai berikut.

1. Aktifkan Flash CS3 , Kemudian

2. Gambarlah obyek kotak pada frame pertama

3. Kemudian klik pada frame ke satu kemudian klik kanan lalu

pilih creat motion shape.

4. Pada frame ke 15 lakukanlah insert blankeyframe

5. Kemudian gambarkan obyek lingkaran pada stage.

6. Kemudian pada frame ke 30 lakukan insertblank keyframe

7. Dan gambarkan obyek bintang pada area stage.

Dan apabila animasi motion shape sudah aktif maka gambarnya akan

seperti di bawah ini

e. Animasi Teks

kali ini kita akan mempelajari bagaimana cara membuat animasi teks.

Langkah langkahnya sebagai berikut

1. Buaka adobe flash cs3

2. Ketikkan teks “ Animasi Teks” pada area stage

3. Klik teks “ Animasi Teks “ kemudian klik kanan lalu pilih

break apart

4. Kemudian sleksi kembali teks yang sudah kita break apart

5. Setelah itu klik kanan kemudian pilih distrube to layer

Maka tampilan distrube to layer akan seperti gambar di

bawah ini

15 | t u t o r i a l b y e r i k

6. Setelah itu geser frame atu pada hutuf sat frame lebih banyak

dari pada layer a begitu juga dengan layer i dan seterusnya

sehinggsa berbentuk anak tangga seperti gambar di baah ini.

7. Tekan tobol CTRL + ENTER pada keyboard untuk

memjalankan animasi.

f. Tombol Animasi

Kali ini kita akan mempelajari bagai mana cara membuat tombol

animasi.

Langkah langkahnya adalah sebagai berikut:

1. Aktifkan Adobe flash cs 3

2. Buka file tombol gelombang yang terdapat pada cd Interaktif

3. Apada panel liberari drag simbol button 2 dan simbol muvie

clip kedalam stage

4. Klik gamda pada tombol 2 untuk masuk kedalam tombol

5. Setelah kita masuk kedalan simbol tombol 2 selanjutnya kita

akan melakukan insert keyframe pada frame over dan down

6. Kemudian pada frame over klik obyek garis lingkaran yang

ada pada frame over kemudian tkan f8 pada keyboard untuk

16 | t u t o r i a l b y e r i k

mengimport obyek tersebut keedalam simbol. Kemudian

pada kotak pilihan convert to simbol kita pilih muvie clips

dan pada registration kita pilih yang di tengah

7. Kemudian klik ganda pada garis lingkaran yang ada pada

frame over untuk masuk kedalam simbol muvie clip

8. Kemudian pada frame ke ke 5 dan 10 kita lakukan insert

keyframe.

9. Pada frame ke 1 dan 5 kita beri motion tween

10. Pada frame ke 5 ubah bentuk garis lingkaran menjadi

oval

11. Setelah itu kita keluar dari simbol lingkaran dan masih di

simbol tombol

12. Kita klik obyek anak panah yang ada pada frame over

kemudian covert obyek tersebut kedalam simbol movie clip

13. Kemudian masuk kedalam simbol movie clip anak panah

tersebut dan pada frame ke 1 kita beri motion tween dan

padframe ke 5 dan 10 lakukan insert keframe.

14. Pada frame ke 5 letakkan obyek anak panah agak ke

depan

15. Tekan CRTL + ENTER untuk memutar animasi.

g. Efek Gelombang Air

pada kali ini kita akan mempelajari bagaimana cara

membuat efek gelombang air pada gambar bitmap.

Langkah langkanya sebagai berikut

1. Aktifkan flash CS3

2. Buka file efek gelobang yang ada pada cd interaktf

17 | t u t o r i a l b y e r i k

3. Pada panel liberary terdapat 2 obye yaitu image VEDC dan

gambar sebuah lingkaran dengan nama simbol 1

4. Kemudian buatlah 3 layer yaitu layer 1,2, dan 3

5. Pada layer ke 1 masukan image VEDC lalu copy image

tersebut dan paste pada layer ke 2

6. Kemudian pada layer ke 3 masukan simbol satu

7. Kemudian pada layer ketiga ubah ukuran image seperti di

bawah ini

8. Pada layer ke 1 dan 2 dan pada frame ke 50 lakukan insert

frame

9. Dan pada layer ke 3 lakukan insert keyframe pada layer ke

50

10. Pada layer 3 pada frame ke 50 perbesar ukuran

obyeknya dan beri motion tween

11. Tekan tobol CTRL + ENTER untuk memutar animasi.