BasicAnimation

UsingFlash
http://muhammadadr.net

Tulisaninimerupakansalahsatumodulpraktikyangditulisuntukdigunakan
dalampengembanganbahanajarMultimedia,dalamprosespengolahandan
pembuatandataanimasiyangakandigunakandidalamMultimedia
InstructionalDesign(MID)

2008
MuhammadAdri
TeknikElektronikaFTUNP
April2008

IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
1
IlmuKomputer.Com
T Tu ut to or ri ia al l B Be er rs se er ri i - - M Mu ul lt ti im me ed di ia a I In ns st tr ru uc ct ti io on na al l D De es si ig gn n
M
M
a
a
c
c
r
r
o
o
m
m
e
e
d
d
i
i
a
a
F
F
l
l
a
a
s
s
h
h
M
M
X
X
2
2
0
0
0
0
4
4
:
:

B
B
a
a
s
s
i
i
c
c
A
A
n
n
i
i
m
m
a
a
t
t
i
i
o
o
n
n


M Mu uh ha am mm ma ad d A Ad dr ri i
adri@muhammadadri.net
http://muhammadadri.net

Pendahuluan
Animasi menciptakan gambar bergerak dari beberapa barisan frame setiap satu
satuanwaktu
Secaraetymology:Animate"bringtolife"
GejalaPOVdanefekphi

TeknikAnimasi
CelAnimation
elemen dalam scene yang berubah (mis: Flinstone) digambar dalam lembaran
materi transparan disebut sebagai 'cel' dan diletakkan di atas background (mis:
ruangtamuFlinstone)yangdigambarterpisah
Biasanyabackgrounddibuatdalamlembaranpanjangdandigerakkanselamacel
diatasnya"bergerak"

DigitalCel
Layermemisahkan bagianbagian dari gambar diam sehingga masingmasing
bagiandapatdigerakkansecaraindividu
Setiap frame terdiri atas background, yang cenderung diam, dan beberapa
obyekyangbergerak
Untuk membuat animasi, dahulukan membuat background Dalam digital cel,
obyekdenganmudahdisalindandipindahkan

Lisensi Dokumen:
Copyright 2003-2008 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara
bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah
atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari
IlmuKomputer.Com.

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
2
IlmuKomputer.Com
KeyframeAnimation
Keyframe menyimpan semua informasi obyek secara keseluruhan. Frame yang
adadiantaranyahanyariienyimpanperubahanyangterjadi.Biasanyakeyframe
diletakkan pada perubahan yang ekstrim Proses inbetweening dilakukan
perhitunganolehkomputer

Stopmotionanimation
Banyak teknik, namun kesemuanya menggunakan miniatur 3D, mis: gedung
perkotaan,danobyekdigerakkandenganhatihatimelewatinya
Obyek adalah figur buatan, dimana bagianbagiannya dapat diatur atau diganti,
untukmemperlihatkanefekbergerak
Metodeakhiryangadaclayanimation

SpriteAnimation
Menyimpan salinan tunggal dari obyek yang statis dan mencatat deskripsi
perubahanobyekantarframe
Perubahan obyek dapat diulang terus menerus sehingga menimbulkan efek
bergerakyangberkesinambungan(mismanusiaberjalan)

MotionGraphics
Susunan dari obyekobyek grafis yang dikeilai suatu filter dan disusun
sedemikianrupamembentuksuatuperubahan
Mis:Perubahanblur,kontraspadajudulfilm
Softwareyangdigunakan:AfterEffects

3DAnimation
Didefinisikan oleh bilangan numerik. Digunakan proses transformasi 3D dan
viewing 3D. Banyak parameter tambahan, misalkan intensitas dan jeiiis
pencahayaan.

Selain teknikteknik animasi yang telah disampaikan adapula beberapa teknik animasi
yanglaindiantaranya:MorphingdanQTVR

AnimasidenganFlashMXProfesional2004

Flash MX Profesional 2004 merupakan Macromedia flash versi release 7.0. Sejak
awal diluncurkan Macromedia Flash (Flash) sudah menyita perhatian para animator
(perancang animasi), dan menjadikannya sebagai tool (perangkat lunak) yang Banyakk
digunakanuntukmenghasilkansebuahprodukanimasi.

LatihanKasusDasar
Kasus1ManajemenLayer

Stagepadaflashdapattersusunatassatu,duaataLlebihlayer(seolahlapisan
transparan)tempatmeletakanobjek.

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
3
IlmuKomputer.Com

Gambar2.PanelTimeline

Panel yang terkait manajemen layer adalah panel time line (biasanya terletak
diatas stage). Untuk menampilkannya (jika belum terlihat pada ruang kerja)
tekan Ctrl+Alt+T, secara default ketika kita membuka sebuah dokumen baru
padaFlashmakaakanotomatisdiberikansebuahlayerbernamalayer1.

Padalatihaninikitaakancobsmelakukanaktifitasmanajemanlayer.

Langkahlangkah
1. KetikaprogramFlashtelahterbuka,bukalahsebuahdokumenbaru.File/New
pilihpadatabGeneralpilihFlashdocument.Akanterdapat1buahlayerpada
timelinebernamalayer1.
2. Tambahkan1buahlayerpadadokumenmenggunakanicon( )yangberada
pada bagian pojok kiri bawah panel time line. Gunakan icon Tambah layer.
HasilnyaakarndiberikansebuahlayerdengannamaLayer2
3. Tambahkan1layerlagisehinggamuncullayerke3.

Gambar3.MenambahkanLayer2dan3
4. Layer digunakan untuk meletakan objek pada stage. Untuk mengakses objek
objek dalam sebuah layer bisa kits gunakan klik mouse pada layer yang
bersangkutan.Namalayerdenganlatarberwarnabiromenyatakanlayeryang
sedang terpilih. Atas dasar itu maka biasanya nama layer mendeskripsikan
objekobjekyangterletakdidalamnya.
5. Gantilahnamalayerdengancaramengklikgandapadanama(teksnama)layer
yang bersangkutan. Ubahlah nama Layer 1 menjadi segiempat. nama Layer 2
menjadilingkaran.namaLayer3menjadisegitiga.

Gambar4.Mengubahnamalayer

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
4
IlmuKomputer.Com
6. Urutanlayerpadapaneltimelinemerupakanrepresentasiurutanlapisanpada
stage.Sebagaicontohpadakasusini,lapisandarilayerpadastagedariataske
bawahadalahsegitiga,lingkaran,dansegiempat.
7. Secaradefaultsetiaplayermemiliki1buahkeyframe(bulatanpadatimeline)
yang masingmasing terletak pada frame ke1. Keyframe iniiah yang
merupakanrepresentasititikwaktutempatmeletakanobjek(dilihatdarisudut
pandangwaktutampil).
8. Buatlah sebuah objek di layer segiempat. Caranya pilih terlebih dahulu layer
segiempat (dengan mengklik namanya),lalu gunakan rectangle tool pada tool
box.
9. Buatlah persegi empat pada stage dengan warm fiil area oranye dan stroke
berwarnahitam(pastikanfilldanstrokecolorpadatoolboxtelahsesuai).
10. Buat ukurannya panjang dan lebar bernilai 100 point, untuk memastikannya
bukalahpanelproperties,window/propertied.

Gambar5.ObjekPersegipadalayersegiempat
11. Buatlahsebuahobjekdilayerlingkaran.Pilihlayerlingkaran.Buatlahlingkaran
padastagedenganwarnsfillareahijaudanstrokeberwarnabiru

Gambar6.Obejklingkaranpadalayerligkaran
12. Buatlah sebuah objek di layer segitiga. Pilih layer segitiga. Buatlah segitiga
padastagedenganwarnsfillareaabuabudanstrokeberwarnahitam.
a. Untukmembuatsegitigatetapgunakanobjekpersegi
b. Kemudian gunakan objek garis ( ), sebagi pembagi persegi secara
diagonal.
c. Aktifkan selection tool ( ), klik dua kali pada sisi segi tiga bagian atas,
kemudiantekandeleteuntukmenghapusnya

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
5
IlmuKomputer.Com

Gambar7.Prosespembuatansegitiga

13. Terlihatjelasbahwasecarapersfektifobjekobjekyangberadadilayersegitiga
terletak paling atas, dibawahnya lingkaran, dan dibawah lingkaran adalah
persegi.

14. Untuk merubah urutan layer dapat kita lakukan dengan mengatur ulang
urutannamalayerpadatimeline(dragdanpindahkan).

Gambar8.HasilPemindahanLayer
15. Hiding layer merupakan aktifitas menyembunyikan layer (objekobjek pada
layertersebuttidakditampilkanpadastageketikaperancangan).Caranyapilih
nama layer yang akan disembunyikan lalu tekan selurusan kolom icon mata (
)padatimelineuntukbarislayeryangbersangkutan.

Gambar9.Efekhidingtehadaplingkaran

16. Locking layer merupakan aktifitas mengunci layer (objekobjek pada layer
tersebut tidak dapat dipilih ataupun diedit). Caranya pilih nama layer yang
akan disembunyikan lalu tekan selurusan kolom icon gembok ( ) pada time
lineuntukbarislayeryangakandikunci.

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
6
IlmuKomputer.Com

Gambar10.CaramengunciLayer
17. Untuk manajemen direktori akan disampaikan pada praktikum namun tidak
dibahas pada modul ini, karena dinilai cara yang secara umum menyerupai
proses manajemen layer. Intinya Direktori adalah lokasi untuk meletakan
layer.

Kasus2AnimasiShapeTweening
Untuk merancang animasi, pada flash tersedia fasilitas tweening. Tweening
merupakan fasilitas otomastis menggeneralisir bagian antara (titiktitik diantara
awal dan akhir) sebuah animasi. Sehingga yang perlu dilakukan oleh animator
cukup dengan hanya menginisialisasi pada titik awal dan akhir, untuk bagian
tengahnyaflashmenggeneralisirsecaraotomatis.

Langkahlangkah
1. KetikaprogramFlashtelahterbuka,bukalahsebuahdokumenbaru.File/Newpilih
padatabGeneralpilihFlashdocument.Akanterdapat1buahlayerpadatimeline
bernamalayer1.
2. GantilahnamaLayer1dengannamaobjekTwening
3. Buatlah sebuah objek lingkaran pada layer ob;ekTwening bagiar. keyframe ke1.
Sebagairencana,objekinilahyangakandianimasikan.

Gambar11.Objeklingkaranyangakanditweening
4. Menambahkan sekaligus mengkopi keyframe pada frame ke1 kepada frame ke
15.Caranyapilihtepatpadaframeke15padatimelinelaluInsert/TimeLine/Key
Frameatauklikkananinsertkeyframe.
5. Memang terlihat seperti tidak ada perubahan pada stage, tetapi sebenarnya saat
inikitamemilikiduabuahlingkaranidentik(baikbentukdanposisinya).Satubuah
padakeyframeke1dansatubuahlagipadakeyframeke15

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
7
IlmuKomputer.Com
6. Pastikan frame ke15 terpilih. Pindahkan lingkaran pada frame ke15 ini ke pojok
kanan. Gunakan selection tool lalu kiik dua kali pada lingkaran untuk memilih fiil
danstrokedarilingkaran.Lanjutkandenganmendragnyakepojokkanan

Gambar12.Frameke15objekdipindahkan
7. Untuk menganimasikan tweening silahkan buka panel properties window/
properties.Pilihlahobjektersebut(lingkaran),perhatikantipedariobjekyangtak
lainadalahshape.

Gambar13.TipeObjekadalahShape
8. Selanjutnya pilihlah salah satu frame diantara frame ke1 dan frame ke15,
misalkanframeke10.
9. Perhatikankembali panel properties dan tentukan tipe tween, karena objek yang
akandianimasikanadalahsebuahlingkaranbertipeshapemakatipeTweenharus
shape.

Gambar14.PemberianShapeTweening
10. Langkahlangkah tahapan sudah selesai. Untuk menjalankannya tekan
Control+Enter

Kasus3AnimasiGuideMotionTweening

Animasiguide(motion)tweening,adalahanimasimotiontweeningyang
mengikutisebuahalurdarisuatujalur(guide)tertentu.

Langkahlangkah
1. Bukalah sebuah dokumen baru. File/New pilih pada tab General pilih Flash
document.Akanterdapat1buahlayerpadatimelinebernamalayer1.

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
8
IlmuKomputer.Com
2. GantilahnamaLayer1dengannamaobjekTwening
3. Buatlah sebuah objek lingkaran pada layer objekTwening bagian keyframe ke1.
Sebagairencana,objekinilahyangakandianimasikan.
4. Pilih lingkaran tersebut menggunakan selection tool, lalu klik dua kali untuk
memilih fill dan stroke. Konversikan ke dalam symbol Modify/Convert to Symbol
atautekanF8,ataupunbisajugadenganklikkananConverttoSymbol,makaakan
munculwindowberikut.

Gambar15.KonverSymbolmenjadiGraphic
BerinamapadaName:BoladanpilihlahpadaBehavior:Graphic.

5. Symbol adalah reusable objek (objek yang bisa digunakan berulang kali). Setiap
kali membuat sebuah simbol maka secara otomatis simbol tersebut akan
dibuatkan cetakannya pada library dokumen. Untuk mengeceknya tekan
window/lybrary
6. Menambahkan sekaligus mengkopi keyframe pada frame ke1 kepada frame ke
15.Caranyapilihtepatpadaframeke15padatimelinelaluInsert/TimeLine/Key
Frameatauklikkananinsertkeyframe.

Gambar16.MenmbahkanKeyFrame
7. Memang terlihat seperti tidak ada perubahan pada stage, tetapi sebenarnya saat
inikitamemilikiduabuahgrafiklingkaranidentik(baikbentukdanposisinya).Satu
buahpadakeyframeke1dansatubuahlagipadakeyframeke15.
8. Pastikan frame ke15 terpilih. Pindahkan lingkaran pada frame ke15 ini ke pojok
kanan.Gunakanselectiontool

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
9
IlmuKomputer.Com

Gambar17.Frameke15objekdipindahkan
9. Untuk menganimasikan tweening silahkan buka panel properties window/
properties.Pilihlahobjektersebut(lingkaran),perhatikantipedariobjekyangtak
lainadalahshape.

Gambar13.TipeObjekadalahShape
10. Selanjutnya pilihlah salah satu frame diantara frame ke1 dan frame ke15,
misalkanframeke10.
11. Perhatikankembali panel properties dan tentukan tipe tween, karena objek yang
akan dianimasikan adalah sebuah lingkaran bertipe Graphic maka tipe Tween
harusMotion

Gambar14.PemberianShapeTweening
12. Langkahlangkah tahapan sudah selesai. Untuk menjalankannya tekan
Control+Enter
13. BuatlahsebuahlayerbarudanberinamaJalur
14. Pastikan layer patil sedang aktif. Buatlah sebuah alur menggunakan pencil tool (
) ,padakeyframediframeke1

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
10
IlmuKomputer.Com
Gambar15.PembuatanJalurGuide
15. Klik kanan pada nama layer Jalur lalu pilih Guide, langkah ini akan menjadikan
layerpathmenjadilayerguide
16. DraglayerobjekTweeningsehinggaterkaitkankepadalayerpath,hasilnyasebagai
berikut

Gamba16.PenempatanObjekTweeningpadaJalurGuide
17. PilihobjekpadalayerobjekTweeningpadaframeke1kaitkanpadaawalpath

Gambar17.PenempatanObjekpadaawalJalur
18. Pilihobjekpada!ayerobjkekTweeningpadaframeke15kaitkanpadaakhirgaris
path

Gambar18.PenempatanObjekpadaakhirjalur

19. Langkahlangkah tahapan sudah selesai. Untuk menjalankannya tekan

Control+Enter

Kasus4AnimasiMasking
Layermaskingadalahlayeryangdapatmenutupiobjekobjekyangberadapada
layerspesifiktertentu

Langkahlangkah

1. Bukalahsebuahdokumenbaru.File/New.
2. Buatlahduabuahlayer.Berinamalayerlayertersebutmaskingnyadanteksnya

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
11
IlmuKomputer.Com

Gambar19.Pembuatanduallayerteksdanmasking
3. Buatlah sebuah teks dengan Text Tool ( )pada frame ke1 layer teksnya
misalkan"TeknikOtomotifFTUNP"

Gambar20.PembuatanTekspadaLayerTeks
4. Masihpadalayerteksmasukankeyframepadaframeke15
5. Aktifkan layer maskingnya, buat sebuah animasi tweening misalkan shape
tweeningyangtepatmelintasiteks"TeknikOtomotifFTUNP"yangtadikitabuat.

Gambar21.PenambahanTweeningpadaLayerMasking
6. Selanjutnyaklikkananpadanamalayermaskingnyadanpilihmask.

Gambar21.EfekMaskingterhadapLayerTeks

7. TekanCtrl+Enteruntukmengujihasilmasking.

Komunitas eLearning IlmuKomputer.Com
Copyright 2003-2008 IlmuKomputer.Com
12
IlmuKomputer.Com
Biografi Penulis

Muhammad Adri. Menyelesaikan S1 di J urusan Teknik
Elektronika FPTK IKIP Padang tahun 1999, dan S2 di J urusan
Teknik Elektro Universitas Gadjah Mada Yogyakarta, dengan
konsentrasi Sistem Komputer dan Informatika (SKI) tahun
2004. Staf pengajar Teknik Elektronika Fakultas Teknik
Universitas Negeri Padang. Kompetensi inti pada bidang
Computer Networking and Security, Computer Architecture
and Organization, Web-Based Application, Online Learning,
Multimedia-Based Instructional Design, dan Knowledge
Community. Penulis aktif sebagai pemakalah dalam berbagai
Seminar Nasional, instruktur pada model pembelajaran
berbasis Multimedia dan Komputer., IT-Based Education.
Memegang Sertifikasi Microsoft, J ENI (J ava Education Network Indonesia) 1,2,dan 4.
Ketertarikan penulis dalam bidang implementasi IT dalam dunia pendidikan,
menghantarkan penulis sebagai mahasiswa doktoral Ilmu Pendidikan Pascasarjana
Universitas Negeri Padang, terhitung mulai September 2006.