Post on 11-Oct-2015
description
BasicAnimationUsingFlashhttp://muhammadadr.netTulisaninimerupakansalahsatumodulpraktikyangditulisuntukdigunakandalampengembanganbahanajarMultimedia,dalamprosespengolahandanpembuatandataanimasiyangakandigunakandidalamMultimediaInstructionalDesign(MID)
2008
MuhammadAdriTeknikElektronikaFTUNP
April2008
IlmuKomputer.Com
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
1
IlmuKomputer.Com
TTuuttoorriiaall BBeerrsseerrii -- MMuullttiimmeeddiiaa IInnssttrruuccttiioonnaall DDeessiiggnn
MMaaccrroommeeddiiaa FFllaasshh MMXX 22000044:: BBaassiicc AAnniimmaattiioonn
MMuuhhaammmmaadd AAddrrii adri@muhammadadri.net http://muhammadadri.net
Pendahuluan
Animasi menciptakan gambar bergerak dari beberapa barisan frame setiap satusatuanwaktuSecaraetymology:Animate"bringtolife"GejalaPOVdanefekphi
TeknikAnimasi
CelAnimationelemendalam scene yangberubah (mis: Flinstone)digambardalam lembaranmateritransparandisebutsebagai 'cel'dandiletakkandiatasbackground(mis:ruangtamuFlinstone)yangdigambarterpisahBiasanyabackgrounddibuatdalamlembaranpanjangdandigerakkanselamaceldiatasnya"bergerak"
DigitalCel
Layermemisahkan bagianbagian dari gambar diam sehingga masingmasingbagiandapatdigerakkansecaraindividuSetiap frame terdiri atas background, yang cenderung diam, dan beberapaobyekyangbergerakUntuk 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
KeyframeAnimationKeyframemenyimpansemua informasiobyeksecarakeseluruhan.Frameyangadadiantaranyahanyariienyimpanperubahanyangterjadi.Biasanyakeyframediletakkan pada perubahan yang ekstrim Proses inbetweening dilakukanperhitunganolehkomputer
Stopmotionanimation
Banyak teknik, namun kesemuanya menggunakan miniatur 3D, mis: gedungperkotaan,danobyekdigerakkandenganhatihatimelewatinyaObyekadalahfigurbuatan,dimanabagianbagiannyadapatdiaturataudiganti,untukmemperlihatkanefekbergerakMetodeakhiryangadaclayanimation
SpriteAnimation
Menyimpan salinan tunggal dari obyek yang statis dan mencatat deskripsiperubahanobyekantarframePerubahan obyek dapat diulang terus menerus sehingga menimbulkan efekbergerakyangberkesinambungan(mismanusiaberjalan)
MotionGraphics
Susunan dari obyekobyek grafis yang dikeilai suatu filter dan disusunsedemikianrupamembentuksuatuperubahanMis:Perubahanblur,kontraspadajudulfilmSoftwareyangdigunakan:AfterEffects
3DAnimationDidefinisikan oleh bilangan numerik. Digunakan proses transformasi 3D danviewing 3D. Banyak parameter tambahan, misalkan intensitas dan jeiiispencahayaan.
Selain teknikteknik animasi yang telah disampaikan adapula beberapa teknik animasiyanglaindiantaranya:MorphingdanQTVRAnimasidenganFlashMXProfesional2004
FlashMXProfesional2004merupakanMacromedia flashversirelease7.0.Sejakawal diluncurkan Macromedia Flash (Flash) sudah menyita perhatian para animator(perancang animasi), danmenjadikannya sebagai tool (perangkat lunak) yang Banyakkdigunakanuntukmenghasilkansebuahprodukanimasi.
LatihanKasusDasarKasus1ManajemenLayer
Stagepadaflashdapattersusunatassatu,duaataLlebihlayer(seolahlapisantransparan)tempatmeletakanobjek.
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
3
IlmuKomputer.Com
Gambar2.PanelTimeline
Panelyangterkaitmanajemen layeradalahpaneltime line(biasanyaterletakdiatas stage).Untukmenampilkannya (jika belum terlihat pada ruang kerja)tekanCtrl+Alt+T, secaradefaultketikakitamembuka sebuahdokumenbarupadaFlashmakaakanotomatisdiberikansebuahlayerbernamalayer1.
Padalatihaninikitaakancobsmelakukanaktifitasmanajemanlayer.
Langkahlangkah1. KetikaprogramFlashtelahterbuka,bukalahsebuahdokumenbaru.File/New
pilihpadatabGeneralpilihFlashdocument.Akanterdapat1buahlayerpadatimelinebernamalayer1.
2. Tambahkan1buahlayerpadadokumenmenggunakanicon( )yangberadapada bagian pojok kiri bawah panel time line.Gunakan icon Tambah layer.HasilnyaakarndiberikansebuahlayerdengannamaLayer2
3. Tambahkan1layerlagisehinggamuncullayerke3.
Gambar3.MenambahkanLayer2dan3
4. Layerdigunakanuntukmeletakanobjekpadastage.Untukmengaksesobjekobjek dalam sebuah layer bisa kits gunakan klik mouse pada layer yangbersangkutan.Namalayerdenganlatarberwarnabiromenyatakanlayeryangsedang terpilih. Atas dasar itu maka biasanya nama layer mendeskripsikanobjekobjekyangterletakdidalamnya.
5. Gantilahnamalayerdengancaramengklikgandapadanama(teksnama)layeryangbersangkutan.UbahlahnamaLayer1menjadisegiempat.namaLayer2menjadilingkaran.namaLayer3menjadisegitiga.
Gambar4.Mengubahnamalayer
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
4
IlmuKomputer.Com
6. Urutanlayerpadapaneltimelinemerupakanrepresentasiurutanlapisanpadastage.Sebagaicontohpadakasusini,lapisandarilayerpadastagedariataskebawahadalahsegitiga,lingkaran,dansegiempat.
7. Secaradefaultsetiaplayermemiliki1buahkeyframe(bulatanpadatimeline)yang masingmasing terletak pada frame ke1. Keyframe iniiah yangmerupakanrepresentasititikwaktutempatmeletakanobjek(dilihatdarisudutpandangwaktutampil).
8. Buatlah sebuahobjekdi layer segiempat.Caranyapilih terlebihdahulu layersegiempat(denganmengkliknamanya),lalugunakanrectangletoolpadatoolbox.
9. Buatlahpersegiempatpada stagedenganwarm fiilareaoranyedan strokeberwarnahitam(pastikanfilldanstrokecolorpadatoolboxtelahsesuai).
10. Buatukurannyapanjangdan lebarbernilai100point,untukmemastikannyabukalahpanelproperties,window/propertied.
Gambar5.ObjekPersegipadalayersegiempat
11. Buatlahsebuahobjekdilayerlingkaran.Pilihlayerlingkaran.Buatlahlingkaranpadastagedenganwarnsfillareahijaudanstrokeberwarnabiru
Gambar6.Obejklingkaranpadalayerligkaran
12. Buatlah sebuah objek di layer segitiga. Pilih layer segitiga. Buatlah segitigapadastagedenganwarnsfillareaabuabudanstrokeberwarnahitam.a. Untukmembuatsegitigatetapgunakanobjekpersegi
b. Kemudian gunakan objek garis ( ), sebagi pembagi persegi secaradiagonal.
c. Aktifkan selection tool ( ),klikduakalipada sisi segi tigabagianatas,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 adalahpersegi.
14. Untuk merubah urutan layer dapat kita lakukan dengan mengatur ulang
urutannamalayerpadatimeline(dragdanpindahkan).
Gambar8.HasilPemindahanLayer
15. Hiding layer merupakan aktifitas menyembunyikan layer (objekobjek padalayertersebuttidakditampilkanpadastageketikaperancangan).Caranyapilihnama layeryangakandisembunyikan lalutekanselurusankolom iconmata (
)padatimelineuntukbarislayeryangbersangkutan.
Gambar9.Efekhidingtehadaplingkaran
16. Locking layer merupakan aktifitas mengunci layer (objekobjek pada layer
tersebut tidak dapat dipilih ataupun diedit). Caranya pilih nama layer yangakandisembunyikan lalutekanselurusankolom icongembok ( )padatimelineuntukbarislayeryangakandikunci.
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
6
IlmuKomputer.Com
Gambar10.CaramengunciLayer
17. Untukmanajemen direktori akan disampaikan pada praktikum namun tidakdibahas padamodul ini, karena dinilai cara yang secara umummenyerupaiproses manajemen layer. Intinya Direktori adalah lokasi untuk meletakanlayer.
Kasus2AnimasiShapeTweeningUntuk merancang animasi, pada flash tersedia fasilitas tweening. Tweeningmerupakan fasilitas otomastismenggeneralisir bagian antara (titiktitik diantaraawal dan akhir) sebuah animasi. Sehingga yang perlu dilakukan oleh animatorcukup dengan hanya menginisialisasi pada titik awal dan akhir, untuk bagiantengahnyaflashmenggeneralisirsecaraotomatis.
Langkahlangkah1. KetikaprogramFlashtelahterbuka,bukalahsebuahdokumenbaru.File/Newpilih
padatabGeneralpilihFlashdocument.Akanterdapat1buahlayerpadatimelinebernamalayer1.
2. GantilahnamaLayer1dengannamaobjekTwening3. Buatlahsebuahobjek lingkaranpada layerob;ekTweningbagiar.keyframeke1.
Sebagairencana,objekinilahyangakandianimasikan.
Gambar11.Objeklingkaranyangakanditweening
4. Menambahkan sekaligusmengkopi keyframepada frame ke1 kepada frame ke15.Caranyapilihtepatpadaframeke15padatimelinelaluInsert/TimeLine/KeyFrameatauklikkananinsertkeyframe.
5. Memangterlihatsepertitidakadaperubahanpadastage,tetapisebenarnyasaatinikitamemilikiduabuahlingkaranidentik(baikbentukdanposisinya).Satubuahpadakeyframeke1dansatubuahlagipadakeyframeke15
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
7
IlmuKomputer.Com
6. Pastikanframeke15terpilih.Pindahkan lingkaranpadaframeke15 inikepojokkanan.Gunakanselectiontool lalukiikduakalipada lingkaranuntukmemilih fiildanstrokedarilingkaran.Lanjutkandenganmendragnyakepojokkanan
Gambar12.Frameke15objekdipindahkan
7. Untuk menganimasikan tweening silahkan buka panel properties window/properties.Pilihlahobjektersebut(lingkaran),perhatikantipedariobjekyangtaklainadalahshape.
Gambar13.TipeObjekadalahShape
8. Selanjutnya pilihlah salah satu frame diantara frame ke1 dan frame ke15,misalkanframeke10.
9. Perhatikankembalipanelpropertiesdantentukantipetween,karenaobjekyangakandianimasikanadalahsebuahlingkaranbertipeshapemakatipeTweenharusshape.
Gambar14.PemberianShapeTweening
10. Langkahlangkah tahapan sudah selesai. Untuk menjalankannya tekanControl+Enter
Kasus3AnimasiGuideMotionTweening
Animasiguide(motion)tweening,adalahanimasimotiontweeningyangmengikutisebuahalurdarisuatujalur(guide)tertentu.
Langkahlangkah1. 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. GantilahnamaLayer1dengannamaobjekTwening3. Buatlah sebuahobjek lingkaranpada layerobjekTweningbagian keyframe ke1.
Sebagairencana,objekinilahyangakandianimasikan.4. Pilih lingkaran tersebut menggunakan selection tool, lalu klik dua kali untuk
memilihfilldanstroke.KonversikankedalamsymbolModify/ConverttoSymbolatautekanF8,ataupunbisajugadenganklikkananConverttoSymbol,makaakanmunculwindowberikut.
Gambar15.KonverSymbolmenjadiGraphic
BerinamapadaName:BoladanpilihlahpadaBehavior:Graphic.
5. Symbol adalah reusableobjek (objek yangbisadigunakanberulang kali). Setiapkali membuat sebuah simbol maka secara otomatis simbol tersebut akandibuatkan cetakannya pada library dokumen. Untuk mengeceknya tekanwindow/lybrary
6. Menambahkan sekaligusmengkopi keyframepada frame ke1 kepada frame ke15.Caranyapilihtepatpadaframeke15padatimelinelaluInsert/TimeLine/KeyFrameatauklikkananinsertkeyframe.
Gambar16.MenmbahkanKeyFrame
7. Memangterlihatsepertitidakadaperubahanpadastage,tetapisebenarnyasaatinikitamemilikiduabuahgrafiklingkaranidentik(baikbentukdanposisinya).Satubuahpadakeyframeke1dansatubuahlagipadakeyframeke15.
8. Pastikanframeke15terpilih.Pindahkan lingkaranpadaframeke15 inikepojokkanan.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),perhatikantipedariobjekyangtaklainadalahshape.
Gambar13.TipeObjekadalahShape
10. Selanjutnya pilihlah salah satu frame diantara frame ke1 dan frame ke15,misalkanframeke10.
11. Perhatikankembalipanelpropertiesdantentukantipetween,karenaobjekyangakan dianimasikan adalah sebuah lingkaran bertipe Graphic maka tipe TweenharusMotion
Gambar14.PemberianShapeTweening
12. Langkahlangkah tahapan sudah selesai. Untuk menjalankannya tekanControl+Enter
13. BuatlahsebuahlayerbarudanberinamaJalur14. Pastikan layerpatilsedangaktif.Buatlahsebuahalurmenggunakanpenciltool (
) ,padakeyframediframeke1
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
10
IlmuKomputer.Com
Gambar15.PembuatanJalurGuide
15. Klik kanan pada nama layer Jalur lalu pilihGuide, langkah ini akanmenjadikanlayerpathmenjadilayerguide
16. DraglayerobjekTweeningsehinggaterkaitkankepadalayerpath,hasilnyasebagaiberikut
Gamba16.PenempatanObjekTweeningpadaJalurGuide
17. PilihobjekpadalayerobjekTweeningpadaframeke1kaitkanpadaawalpath
Gambar17.PenempatanObjekpadaawalJalur
18. Pilihobjekpada!ayerobjkekTweeningpadaframeke15kaitkanpadaakhirgarispath
Gambar18.PenempatanObjekpadaakhirjalur
19. Langkahlangkah tahapan sudah selesai. Untuk menjalankannya tekan
Control+EnterKasus4AnimasiMasking
Layermaskingadalahlayeryangdapatmenutupiobjekobjekyangberadapadalayerspesifiktertentu
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 teksnyamisalkan"TeknikOtomotifFTUNP"
Gambar20.PembuatanTekspadaLayerTeks
4. Masihpadalayerteksmasukankeyframepadaframeke155. 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 Jurusan Teknik Elektronika FPTK IKIP Padang tahun 1999, dan S2 di Jurusan 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, JENI (Java 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.