Adri Multimedia Instructional Design 6 Basic Animation

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 [email protected] 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.


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.


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


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


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.


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


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.


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


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


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


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.


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.

Adri Multimedia Instructional Design 6 Basic Animation

Documents

Transcript of Adri Multimedia Instructional Design 6 Basic Animation