[Date] Modul Adobe Flash

CS3 Professional
[Animasi Kelas XI IPA/IPS]

RentVeyh
[ANIMASI KELAS XI IPA/IPS]
 Indikator Pencapaian Kompetensi
 Memahami dan menjelaskan pengertian dari animasi
 Mendeskripsikan animasi stop motion, tradisional dan komputer
 Mendeskripsikan perbedaan animasi 2 dimensi, dimensi dan 4 dimensi
 Memahami dan menjelaskan tentang software Adobe Flash
 Memahami dan menjelaskan manfaat dan penggunaan Adobe Flash
 Memahami dan menjelaskan tentang pengertian menu dan ikon yang
terdapat pada Adobe Flash
 Mengenal konsep Animasi dasar dan istilah frame, keyframe, dan
blank keyframe pada Adobe Flash
 Mengenal beberapa pendekatan animasi pada Adobe Flash meliputi :
frame by frame, tweening, timeline effect, dan path/guide.
 Membuat dokumen baru
 Menyimpan dokumen
 Mengatur ukuran halaman/stage
 Mengubah warna halaman
 Membuat objek, merubah bentuk objek dan merubah warnanya
 Menambah layer, mengubah nama layer dan mengorganisir layer
 Mempraktikkan animasi frame by frame
 Mempraktikkan animasi motion tweening
 Mempraktikkan animasi shape tweening
 Mempraktikkan animasi dengan timeline effect
 Mempraktikkan animasi dengan path/guide

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 2

A. Konsep Dasar Animasi
Animasi berasal dari kata ”Animation” yang dalam bahasa Inggris ”to
animate” yang berarti menggerakan. Jadi animasi dapat diartikan sebagai
menggerakan sesuatu (gambar atau
obyek) yang diam.
Sejarah animasi dimulai dari jaman
purba, dengan ditemukannya lukisan-
lukisan pada dinding goa di Spanyol yang
menggambarkan ”gerak” dari binatang-
binatang. Pada 4000 tahun yang lalu
bangsa Mesir juga mencoba
menghidupkan suatu peristiwa dengan
gambar-gambar yang dibuat berurutan
pada dinding.
Sejak menyadari bahwa gambar bisa dipakai sebagai alternatif media
komunikasi, timbul keinginan menghidupkan lambang-lambang tersebut menjadi
cermin ekspresi kebudayaan. Terbukti dengan diketemukannya berbagai artefak
pada peradapan Mesir Kuno 2000 sebelum masehi. Salah satunya adalah
beberapa panel yang menggambarkan aksi dua pegulat dalam berbagai pose.
Animasi sendiri tidak akan pernah berkembang tanpa ditemukannya prinsip
dasar dari karakter mata manusia yaitu: persistance of vision (pola penglihatan
yang teratur). Paul Roget, Joseph Plateau dan Pierre Desvigenes, melalui
peralatan optic yang mereka ciptakan, berhasil membuktikan bahwa mata manusia
cenderung menangkap urutan gambar-gambar pada tenggang waktu tertentu
sebagai suatu pola. Dalam perkembangannya animasi secara umum bisa
didefinisikan sebagai:
Suatu sequence gambar yang diekspos pada tenggang waktu tertentu sehingga
tercipta sebuah ilusi gambar bergerak

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 3

B. Jenis-Jenis Animasi
Dilihat dari teknik pembuatannya animasi yang ada saat ini dapat dikategorikan
menjadi tiga, yaitu:
1. Stop-motion animation
Stop-motion animation sering pula disebut claymation karena dalam
perkembangannya, jenis animasi ini sering menggunakan clay (tanah liat)
sebagai objek yang digerakkan . Teknik stop- motion animation merupakan
animasi yang dihasilkan dari penggambilan gambar berupa obyek (boneka atau
yang lainnya) yang digerakkan setahap demi setahap. Dalam pengerjaannya
teknik ini memiliki tingkat kesulitan dan memerlukan kesabaran yang tinggi.

Salah satu adegan dari film Chiken Run. Salah satu adegan dari film Celebrity Deadmatch.

Wallace and Gromit dan Chicken Run , karya Nick Parks, merupakan
salah satu contoh karya stop motion animation. Contoh lainnya adalah
Celebrity Deadmatch di MTV yang menyajikan adegan perkelahian antara
berbagai selebriti dunia.
2. Animasi Tradisional (Traditional animation)
Tradisional animasi adalah teknik animasi yang paling umum dikenal
sampai saat ini. Dinamakan tradisional karena teknik animasi inilah yang
digunakan pada saat animasi pertama kali dikembangkan. Tradisional animasi
juga sering disebut cel animation karena teknik pengerjaannya dilakukan pada
celluloid transparent yang sekilas mirip sekali dengan transparansi OHP yang
sering kita gunakan. Pada pembuatan animasi tradisional, setiap tahap gerakan
digambar satu persatu di atas cel.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 4

 Contoh gambar proses gerakan berjalan pada animasi tradisional.

Dengan berkembangnya teknologi komputer, pembuatan animasi

tradisional ini telah dikerjakan dengan menggunakan komputer. Dewasa ini
teknik pembuatan animasi tradisional yang dibuat dengan menggunakan
komputer lebih dikenal dengan istilah animasi 2 Dimensi.
Dengan berkembangnya
teknologi komputer, pembuatan
animasi tradisional ini telah
dikerjakan dengan menggunakan
komputer. Dewasa ini teknik
pembuatan animasi tradisional
yang dibuat dengan menggunakan
komputer lebih dikenal dengan Pinokio” salah satu film animasi tradisional buatan
Walt disney
istilah animasi 2 Dimensi.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 5

3. Animasi Komputer
Sesuai dengan namanya, animasi ini secara keseluruhan dikerjakan
dengan menggunakan komputer. Dari pembuatan karakter, mengatur gerakkan
“pemain” dan kamera, pemberian suara, serta special effeknya semuanya di
kerjakan dengan komputer.
Dengan animasi komputer, hal-hal yang awalnya tidak mungkin digambarkan
dengan animasi menjadi mungkin dan lebih mudah. Sebagai contoh perjalanan
wahana ruang angkasa ke suatu planet dapat digambarkan secara jelas, atau
proses terjadinya tsunami.

Monster Inc, salah satu film animasi yang seluruh pembuatannya menggunakan komputer.

Perkembangan teknologi komputer saat ini, memungkinkan orang dengan

mudah membuat animasi. Animasi yang dihasilkan tergantung keahlian yang
dimiliki dan software yang digunakan.

Salah satu contoh animasi untuk dunia pengetahuan yang

dibuat dengan komputer.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 6

C. Software Animasi
Saat ini terdapat banyak jenis software animasi yang beredar di pasaran,
dari software yang mempunyai kemampuan yang sederhana hingga yang
komplek. Dari sisi fungsi penggunaan software animasi dapat dikelompokkan
menjadi Software Animasi 2 Dimensi dan Software Animasi 3 Dimensi.
1. Software Animasi 2 Dimensi.
Software animasi 2D adalah software yang digunakan untuk membuat
animasi tradisional (flat animation), umumnya mempunyai kemampuan untuk
menggambar, mengatur gerak, mengatur waktu, beberapa dapat mengimpor
suara. Dari sisi penggunaan umumnya tidak sulit.
Contoh dari Software Animasi 2D ini antara lain:
 Macromedia Flash
 Macromedia Director
 ToonBoom Studio
 Adobe ImageReady
 Corel RaVe
 Swish Max
 Adobe After Effect

Tampilan jendela kerja ToonBoom Studio

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 7

2. Software Animasi 3 Dimensi
Software animasi 3D mempunyai fasilitas dan kemampuan yang canggih
untuk membuat animasi 3 dimensi. Fasilitas dan kemampuan tersebut antara
lain, membuat obyek 3D, pengaturan gerak kamera, pemberian efek, import
video dan suara, serta masih banyak lagi. Beberapa software animasi 3D
mempunyai kemampuan khusus, misalnya untuk animasi figure(manusia),
animasi landscape (pemandangan), animasi title (judul), dll. Karena
kemampuannya yang canggih, dalam penggunaannya diperlukan pengetahuan
yang cukup tinggi dan terkadang rumit. Contoh dari Software Animasi 3D ini
antara lain:
 3D Studio Max
 Maya
 Poser (figure animation)
 Bryce (landscape animation)
 Vue (landscape animation)
 Cinema 4D
 Blender (gratis)
 Daz3D (gratis)
Tampilan jendela kerja Daz3D

Tampilan jendela kerja 3D Studio Max Tampilan jendela kerja Bryce

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 8

 Animasi 4D

Tidak berbeda jauh dengan format 3D, hanya saja efek dari film 4D ini, bukan
hanya gambarnya saja yang keluar, melainkan ada getaran-getaran atau efek-efek
nyata yg dihasilkan. Misalnya saja film-film animasi bertema kehidupan alam, ketika
adegan di air, maka ada air yang menyipratkannya ke wajah kita, atau uap air menetes.
Lalu ketika adegan gempa bumi, maka kursi yang kita duduki akan bergetar juga,
memang unik dan mengasyikan tetapi para penonton pasti tidak akan fokus ke filmnya
melainkan ke efeknya saja. Film berformat seperti ini tidak hanya mengacu pada layar
bioskop saja, melainkan beberapa aplikasi media seperti penggerak kursi yang
menghasilkan getaran, uap air, serta beberapa efek lainnya, termasuk AC yang bisa
tiba-tiba berubah menjadi sangat dingin saat adegan salju, dan Heater yang dapat
memanas saat adegan padang pasir. Dan format film ini pun harus diputar pada
bioskop-bioskop khusus saja.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 9

 MENGENAL ADOBE FLASH CS3 PROFESSIONAL

Adobe Flash CS3 Professional, merupakan software yang dirancang untuk

membuat animasi berbasis vektor dengan hasil yang mempunyai ukuran yang kecil.
Awalnya software ini memang diarahkan untuk membuat animasi atau aplikasi
berbasis internet (online). Tetapi pada perkembangannya banyak digunakan untuk
membuat animasi atau aplikasi yang bukan berbasis internet (offline). Dengan
Actionscript 3.0 yang dibawanya, Adobe Flash CS3 Professional dapat digunakan
untuk mengembangkan game atau bahan ajar seperti kuis atau simulasi.
Penggunaan Adobe Flash CS3 Professional untuk animasi atau pembuatan
bahan ajar interaktif tidaklah sulit, tool-tool yang tersedia cukup mudah digunakan,
beberapa template dan component juga sudah disediakan dan siap digunakan.
Dengan software Adobe Flash CS3 Professional telah terinstal pada komputer
yang Anda gunakan, berikut ini langkah awal untuk mengenal penggunaan Adobe
Flash CS3 Professional.
A. Cara Membuka

Untuk membuka program Adobe Flash CS3 Professional, Anda dapat melakukan
salah satu cara berikut:
• Klik icon Adobe Flash CS3 Professional pada dekstop (Layar monitor).

Beberapa saat akan muncul jendela dialog seperti berikut.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 10

  Pilih Create New > Flash File (ActionScript 2.0) untuk memulai membuat
file sbaru.
 Pilih Open a Recent New > Open untuk membuka file flash.

B. Mengenal Jendela Kerja

1. Mengenal Menu Dasar

Berikut merupakan tampilan standar jendela kerja Adobe Flash CS3 Professional,
saat Anda memulai membuat file baru.

Jendela kerja Flash 8 terdiri atas :

 Menubar

Berisi kumpulan menu atau perintah-perintah yang digunakan dalam Adobe

Flash CS3.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 11

 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; alat bantu lain untuk mengedit gambar.

Tool Nama Fung Shortcut

si

Selection Tool Memilih dan V

memindahkan objek
Subselection Mengubah bentuk objek
A
Tool dengan edit points

Free Transform Mengubah ukuran atau

Q
Tool memutar bentuk objek
sesuai keinginan
Gradient
Mengubah warna gradasi F
Transform Tool

Menyeleksi bagian objek

Lasso Tool L
yang akan diedit

Membuat bentuk
Pen Tool objek secara bebas P
berupa dengan titik-
titik sebagai
penghubung

Text Tool Membuat teks (kata atau T

kalimat)

Line Tool Membuat Garis N

Membuat objek
Rectangle Tool R
berbentuk segi

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 12

 empat atau segi banyak

Membuat objek elips

Oval Tool O
atau
lingkaran

Pencil Tool Menggambar objek Y

secara bebas
Menggambar objek
Brush Tool secara bebas dengan B
ukuran ketebalan dan
bentuk yang sudah
disediakan
Memberi warna garis tepi
Ink Bottle Tool S
(outline)

Paint Bucket Memberi warna pada

K
Tool objek secara
bebas

Eyedropper Mengambil contoh warna I

Tool

Eraser Tool Menghapus objek E

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 13

 Tool Nama Fung
si

Hand Tool Menggeser Stage

Memperbesar atau
Zoom Tool
memperkecil
tampilan objek atau stage
Memberi atau memilih warna
Stroke Color
untuk garis tepi

Fill Color Memberi warna pada objek

 Timeline

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.

 Stage

Stage disebut juga layar atau panggung. Stage digunakan untuk memainkan
objek-objek yang akan diberi animasi. Dalam stage kita dapat membuat
gambar, teks, memberi warna dan lain-lain.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 14

 Panel

Beberapa panel penting dalam Adobe Flash CS3

Professional, diantaranya panel: Properties, Filters &
Parameters, Actions, Library, Color dan Align & Info &
Transform.

 Properties

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.
 Library

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).

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 15

2. Document Properties

Fungsi Document Properties adalah untuk melakukan pengaturan ukuran layar,

warna background, framerate, dan dimensi dari animasi yang akan dibuat.
Untuk memanggil kotak dialog Document Properties, pilih jendela Properties di
bawah layar, kemudian pilih tombol Size.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 16

 MENGGAMBAR BENTUK DASAR DAN MENGGUNAKAN WARNA

A. Menggambar Bentuk-bentuk Dasar

1. Membuat garis dengan Line Tool

Flash menyediakan pilihan untuk

membuat beragam bentuk garis. Pilih
ikon Line Tool pada toolbar di sisi kiri
layar, kemudian lihat pilihannya di
panel Properties di sebelah kiri bawah
layar, Masukkan angka ketebalannya.
Dan untuk memulai garis klik pada
stage dan drag sepanjang yang anda
inginkan. Membuat garis dengan Pencil
Tool

Untuk membuat garis bebas, Pilih ikon

Pencil Tool pada toolbar sisi kiri dan
pilih warnanya pada panel Colors di
bawahnya. Untuk membuat garis lurus,
pada panel Options di bawah toolbar
pilihlah opsi Straighten, untuk garis
lengkung yang halus pilih Smooth dan
untuk membuat garis sesuai dengan
gerakan mouse pilih Ink.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 16

2. Menggambar lingkaran atau elips

Pilih Oval Tool untuk menggambar

bentuk lingkaran atau elips. Untuk
memulai menggambar, klik pada stage
dan drag sebesar lingkaran atau oval
yang Anda inginkan. Adapun jenis dan
warna garis serta sisi bentuk itu dapat
dipilih pada panel Colors.

3. Menggambar kotak

Pilih Rectangle Tool untuk

menggambar bentuk kotak pada layar.
Untuk memulai menggambar, klik pada
stage dan drag sebesar kotak yang
Anda inginkan. Adapun jenis dan warna
garis serta warna isi (fill) bentuk itu
dapat dipilih pada panel Colors.

Apabila Anda ingin bentuk sudut kotak

tidak berbentuk lancip tetapi berupa
sudut yang halus (lengkung), Anda dapat
mengubahnya dengan cara pilih
Rectangle Tool dan rubah nilai yang
ada pada panel Properties dan
masukkan nilai 10 seperti yang
ditunjukkan pada gambar di samping.
Lalu mulailah menggambar kotak dan
hasilnya akan terlihat.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 17

4. Menggambar bentuk bersegi banyak

Untuk menggambar bentuk bersegi

banyak, Klik dan tahan pada Rectangle
tool, kemudian pilih PolyStar tool.

Untuk memilih bentuk bersegi banyak

atau bintang,Pilih Options pada panel
Properties, Kemudian pada jendela
dialog Tool Settings yang muncul Anda
dapat memilih bentuk yang diinginkan
serta dapat mengisikan angka berapa
segi banyak yang akan dibuat. Untuk
menggambarnya, Klik mouse pada stage
kemudian drag sesuai besarnya objek
Menggambar bentuk bebas atau unik

5. Menggambar Bentuk Bebas

Untuk membuat bentuk bebas atau

unik Anda dapat menggunakan Pen
Tool. Klik mouse pada stage, drag dan
lepas, maka garis akan terbentuk.
Gerakkan kembali mouse ke arah yang
diinginkan dklik untuk membuat sudut
atau anchor point. Bila
bentuknya merupakan kurva tertutup
maka dapat diberi warna.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 18

6. Mengubah Ukuran Objek

Pilih Selection Tool, klik dua kali pada

gambar/objek yang akan diubah
ukurannya. Pilih Free Transform
Tool, maka pada ujung bentuk akan
muncul kotak kecil atau handle. Pada
panel Option pilih opsi Scale . Klik
pada salah satu titik kemudian drag
kotak kecil tersebut ke arah luar,
ukuran akan membesar dan drag ke
arah dalam maka ukuran akan
mengecil.

7. Memutar Objek

Pilih Selection Tool, klik dua kali pada

gambar/objek yang akan diputar. Pilih
Free Transform Tool, maka pada
ujung bentuk akan muncul kotak
kecil atau handle. Pada panel Option
pilih opsi Rotate and Skew pada
panel Option kemudian arahkan
mouse mendekati salah satu handle
yang ada di sudut hingga cursor
membentuk panah melingkar. Klik dan
drag ke arah putaran yang diinginkan.

[Animasi Kelas XI IPA/IPS] | Modul Adobe Flash CS3 Professional 19

B. Menggunakan Warna

1. Mengganti Warna

Untuk mengganti warna isi atau garis dari

bentuk yang telah dibuat dapat dilakukan
dengan menyeleksi/memilih bentuk yang
akan diganti dengan menggunakan
Selection Tool. Double-klik gambar
yang ingin diganti warnanya, kemudian
pada panel Colors pilih opsi Stroke
Color .Klik dan pilih warna untuk
mengubah warna garis atau pilih Fill
Color. Klik dan pilih warna untuk
mengubah warna isi bentuk.

2. Gradasi

Untuk memberi warna gradasi bada

suatu gambar/objek, pilih menu
Window > Mixer, jendela Color
Mixer akan muncul di sebelah kanan
layar. Pilih gambar/objek yang akan
diberi warna gradasi dengan Selection
Tool, pada pull-down menu di panel
Color Mixer, pilih Type Radial. Pilih
warna yang lebih terang untuk bagian
sebelah kiri, sedangkan bagian kanan
yang lebih gelap.
 ANIMASI DASAR

Sebelum masuk ke penjelasan animasi ini, alangkah baiknya kita mengenal

frame dalam Flash. Frame dalam film atau animasi diartikan sebagai gerakan dan akan
lebih tepat disandingkan dengan waktu yakni frame per second (FPS). Frame per
second berarti jumlah gerakan yang dilakukan tiap detik. Dalam satu detik, sebuah
gerakan film/animasi bisa menjalankan beberapa frame sekaligus secara cepat.

Ada beberapa istilah penting yang perlu dipahami antara lain Frame, Keyframe,
dan Blank Keyframe.

1. Frame merupakan satuan terkecil di dalam animasi flash. Frame diumpamakan

seperti kertas HVS yang telah digambar. Apabila frame kita perpanjang sebesar 10
frame, maka diumpamakan seperti 10 HVS dengan gambar yang sama. Sedangkan
apabila kita merubah gambar salah satu frame, maka frame yang lain akan
mengikuti perubahan dari gambar tersebut. Karena frame tidak dapat berdiri
sendiri. Frame ini sering digunakan untuk suatu gambar yang tidak diubah-ubah
perubahannya, seperti : Background.
2. Keyframe merupakan suatu frame kunci yang dapat berdisi sendiri. Berbeda dengan
Frame, apabila kita tambahkan sebanyak 10 keyframe. Dan apabila salah satu
keyframe kita ubah gambarnya, maka gambar tersebut tidak akan mempengaruhi
gambar-gambar dikeyframe yang lainnya. Karena keyframe ini dapat berdiri
sendiri tidak seperti Frame. Keyframe ini sering digunakan untuk suatu gambar atau
objek yang ingin kita gerakkan, seperti : Objek bola, mobil, sepeda, dan objek inti
lainnya.
3. Blank Keyframe merupakan suatu keyframe yang tidak memiliki gambar atau objek
didalamnya. Keyframe ini tidak memiliki gambar atau kosong, namun tidak
mempengaruhi keyframe-keyframe yang lainnya. Karena dapat berdiri
sendiri. Blank keyframe ini sering digunakan untuk suatu adegan atau kondisi
dimana animasi tersebut tidak memerlukan suatu gambar atau objek, seperti :
Kondisi dimana objek tersebut hilang atau lenyap.
 Di dalam Adobe Flash, animasi dapat diciptakan melalui tiga pendekatan:
frame-by-frame, tweening, timeline effect dan path/guide.

1. Animasi Frame By Frame

Sesuai dengan namanya, animasi frame by frame merupakan teknik animasi
yang menjalankan frame demi frame untuk membentuk gerakan animasi.
Animasi frame by frame biasanya digunakan untuk gerakan objek yang sangat
detail dan halus. Tiap-tiap frame akan dimasuki objek yang tersusun rapi dalam
sebuah keyframe yang berbeda.

2. Animasi Tweening
Animasi Tweening biasanya digunakan apabila kita ingin membuat
gerakan animasi yang teratur. Dalam membuat animasi ini sangat mengurangi
waktu karena kita tidak perlu membuat animasi secara frame per frame.
Sebaliknya Anda hanya membuat frame awal dan frame akhir saja. Dalam
animasi tweening, terdapat dua jenis animasi tweening yaitu :
a. Motion Tween
yaitu animasi yang biasa digunakan untuk membuat animasi objek bergerak
dengan mengubah ukuran (scale), rotasi (rotation), dan posisi (location).
 b. Shape Tween

yaitu biasanya digunakan untuk membuat animasi perubahan bentuk. Jadi,

pada animasi ini dapat mengalami perubahan bentuk dari suatu objek ke
objek lain. Misalnya perubahan bentuk objek lingkaran menjadi segitiga atau
sebaliknya.

3. Animasi Timeline Effect

Teknik ini sebenarnya memanfaatkan wizard yang tersedia untuk menghasilkan
animasi secara cepat.
4. Animasi Path/Guide
Teknik ini dilakukan dengan membuat path (jalur) yang variatif yang kemudian
dianimasikan dengan mengikuti path (jalur) yang kita buat.
 LATIHAN MEMBUAT ANIMASI

1. Frame by Frame
Berikut merupakan langkah – langkah membuat animasi perubahan posisi,
ukuran, dan rotasi obyek dengan menggunakan pendekatan animasi frame
by frame.
a. Animasi Perubahan Posisi Obyek
1) Jalankan software Adobe Flash CS3 terlebih dahulu, lalu buat
dokumen baru melalui menu File > New (atau shortcut Ctrl+N
dari keyboard).
2) Buat objek sembarang, misal lingkaran, dan letakkan di sisi kiri.
Perhatikan contohnya seperti Gambar berikut.

3) Silakan atur warna serta ukuran obyek lingkaran pada panel

Properties.
4) Klik kanan frame 2, lalu klik Insert Keyframe lalu geser sedikit
obyek lingkaran kearah kanan dengan Selection Tool.
5) Lalu ulangi langkah no. 4 pada frame selanjutnya sampai di
frame 10 dimana obyek berada di sisi kanan.
 6) Untuk menguji hasilnya, tekan Enter atau Ctrl+Enter.
7) Simpan hasil animasi dengan klik File > Save atau Ctrl+S.

b. Animasi Perubahan Ukuran Obyek

1) Jalankan software Adobe Flash CS3 terlebih dahulu, lalu buat
dokumen baru melalui menu File > New (atau shortcut Ctrl+N dari
keyboard).
2) Buat objek sembarang, misal lingkaran, dan letakkan di tengah
stage. Perhatikan contohnya seperti Gambar berikut.

3) Silakan atur warna serta ukuran obyek lingkaran pada panel

Properties.
4) Klik kanan frame 2, lalu klik Insert Keyframe lalu perbesar sedikit demi
sedikit obyek lingkaran dari arah tengah dengan Free Transform
Tool.

5) Lalu ulangi langkah no. 4 pada frame selanjutnya sampai di frame 7

dimana obyek berukuran paling besar.
 6) Untuk menguji hasilnya, tekan Enter atau Ctrl+Enter.
7) Simpan hasil animasi dengan klik File > Save atau Ctrl+S.

c. Animasi Rotasi Obyek

1) Jalankan software Adobe Flash CS3 terlebih dahulu, lalu buat
dokumen baru melalui menu File > New (atau shortcut Ctrl+N dari
keyboard).
2) Buat objek sembarang, misal persegi panjang, dan letakkan di
tengah stage. Perhatikan contohnya seperti Gambar berikut.
3) Silakan atur warna serta ukuran obyek lingkaran pada panel
Properties.
4) Klik kanan frame 2, lalu klik Insert Keyframe lalu putar sedikit
demi sedikit obyek tersebut searah jarum jam dengan Free
Transform Tool.

5) Ulangi langkah no. 4 pada frame selanjutnya sampai di frame 7

 dimana obyek sudah berputar seperti berikut karena supaya obyek
dapat berputar secara 360 derajat searah jarum jam dengan baik.

6) Untuk menguji hasilnya, tekan Enter atau Ctrl+Enter.

7) Simpan hasil animasi dengan klik File > Save atau Ctrl+S.

2. Tweening
Berbeda dengan frame by frame, pendekatan ini hanya berfokus pada frame
awal dan frame akhir saja. Kita tidak harus membuat animasi pada setiap
frame demi frame. Berikut merupakan langkah – langkah membuat animasi
perubahan posisi, ukuran, dan rotasi obyek dengan menggunakan
pendekatan animasi Tweening yaitu dengan motion tween.
a. Animasi Perubahan Posisi Obyek
1) Jalankan software Adobe Flash CS3 terlebih dahulu, lalu buat
dokumen baru melalui menu File > New (atau shortcut Ctrl+N dari
keyboard).
2) Buat objek sembarang, misal lingkaran, dan letakkan di sisi kiri.
Perhatikan contohnya seperti Gambar berikut.
3) Klik kanan frame sembarang, misal 50, kemudian pilih menu Insert
Keyframe (atau melalui shortcut F6).
4) Pada timeline, blok semua frame dari frame 1 – 50 lalu klik kanan
pada frame yang sudah diblok, kemudian pilih menu Create Motion
Tween.
5) Gunakan Selection tool untuk memindahkan objek secara
horizontal ke sisi kanan pada frame 50.

6) Untuk menguji hasilnya, tekan Enter atau Ctrl+Enter.

 7) Simpan hasil animasi dengan klik File > Save atau Ctrl+S.
b. Animasi Perubahan Ukuran Obyek
1) Jalankan software Adobe Flash CS3 terlebih dahulu, lalu buat
dokumen baru melalui menu File > New (atau shortcut Ctrl+N dari
keyboard).
2) Buat objek sembarang, misal lingkaran, dan letakkan di tengah
stage. Perhatikan contohnya seperti Gambar berikut.

3) Klik kanan frame sembarang, misal 20, kemudian pilih menu Insert
Keyframe (atau melalui shortcut F6).

4) Pada timeline, blok semua frame dari frame 1 – 20 lalu klik kanan
 pada frame yang sudah diblok, kemudian pilih menu Create Motion
Tween.

5) Klik kanan frame 20, lalu perbesar obyek lingkaran dari arah tengah
dengan Free Transform Tool.

6) Untuk menguji hasilnya, tekan Enter atau Ctrl+Enter.

7) Simpan hasil animasi dengan klik File > Save atau Ctrl+S.
c. Animasi Rotasi Obyek
1) Jalankan software Adobe Flash CS3 terlebih dahulu, lalu buat
dokumen baru melalui menu File > New (atau shortcut Ctrl+N dari
keyboard).
2) Buat objek sembarang, misal persegi panjang, dan letakkan di
tengah stage. Perhatikan contohnya seperti Gambar berikut.

3) Klik kanan frame sembarang, misal 20, kemudian pilih menu Insert
Keyframe (atau melalui shortcut F6).

4) Pada timeline, blok semua frame dari frame 1 – 20 lalu klik kanan
pada frame yang sudah diblok, kemudian pilih menu Create Motion
Tween.
 5) Klik kanan frame 20, lalu putar obyek tersebut dengan Free
Transform Tool. Obyek harus diputar seperti gambar berikut karena
supaya obyek dapat berputar secara 360 derajat searah jarum jam
dengan baik.

6) Untuk menguji hasilnya, tekan Enter atau Ctrl+Enter.

7) Simpan hasil animasi dengan klik File > Save atau Ctrl+S.

3. Timeline effect
Pendekatan ini sebenarnya memanfaatkan wizard yang tersedia
untuk menghasilkan animasi secara cepat. Berikut merupakan
langkah – langkah membuat animasi perubahan posisi, ukuran, dan
rotasi obyek dengan menggunakan pendekatan animasi timeline
effect.
1) Buat dokumen Flash baru.
2) Tambahkan objek lingkaran ke dalam lembar kerja.

3) Seleksi objek lingkaran.

4) Pilih menu Insert > Timeline Effects, lalu pilih yang Anda sukai, misal
Effects > Blur.
 5) Atur bentuk animasi seperti arah efek, durasi, dan sebagainya dan
supaya kita ingin mem-preview hasil pengaturan efek, klik Update
Preview. Kemudian klik OK jika sudah selesai.

6) Lihat hasilnya dengan menekan Enter atau Ctrl+Enter.

7) Simpan hasil animasi dengan klik File > Save atau Ctrl+S.

4. Path/Guide
Animasi tidak harus merepresentasikan transformasi objek secara horizontal
ataupun vertikal. Flash memungkinkan kita membuat bentuk yang variatif,
salah satunya adalah animasi berbasis path (jalur) yang kita definisikan.
Berikut merupakan langkah – langkah membuat animasi obyek dengan
menggunakan pendekatan animasi Path/Guide.
1. Buat dokumen baru.
2. Buat objek bola di layer 1.
3. Tambahkan layer Motion Guide melalui ikon atau dengan mengklik kanan
layer pertama. Perhatikan contohnya seperti Gambar berikut.

4. Klik frame pertama dari Guide: Layer 1, kemudian gambar path dengan
menggunakan tool, misal Pencil.
5. Klik kanan frame pertama dari Layer 1 (bukan Guide Layer), kemudian pilih
menu Create Motion Tween. Secara otomatis, objek bola akan menempel
di path awal.
6. Klik frame 50 dari Guide: Layer 1, kemudian klik kanan dan pilih Insert
Frame (F5).

7. Klik frame 50 dari Layer 1, kemudian klik kanan dan pilih Insert Keyframe
(F6).
8. Klik frame 50 dari Layer 1 dan tekan F6, kemudian pindahkan lagi objek ke
titik akhir path.

9. Tekan Ctrl+Enter.
10. Begitu dijalankan, path tidak akan diperlihatkan. Untuk menjadikannya
terlihat, klik frame pertama dari Guide: Layer 1 kemudian tekan Ctrl+C.
11. Tambahkan layer baru, kemudian pilih menu Edit > Paste in Place (atau
Ctrl+Shift+V).

12. Jalankan kembali dengan menekan Ctrl+Enter.