Upload
ipzelhakim
View
29
Download
0
Embed Size (px)
Citation preview
2008
Flash CaseonText Animationhttp://muhammadadri.net Tulisan ini merupakan salah satu modul praktik yang ditulis untuk digunakan dalam pengembangan bahan ajar Multimedia, dalam proses pengolahan dan pembuatan data animasi yang akan digunakan di dalam Multimedia InstructionalDesign(MID)
IlmuKomputer.Com
MuhammadAdriTeknikElektronikaFTUNP 4/1/2008
IlmuKomputer.Com
Tutorial Berseri - Multimedia Instructional Design
Macromedia Flash MX 2004: Case on Text AnimationMuhammad [email protected] http://muhammadadri.net 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.
TujuanPada pertemuan kali ini, kita akan mencoba untuk animasi sederhana berbasis animasi teks, dengantujuanyangakandicapaiantaralain: 1. PesertadapatmembuatanimasiteksdasardenganFlash 2. Pesertadapatmembuatanimasiteksdarigabungananimasidasardalamflash 3. Pesertadapatmembuatanimasiteksdenganbackgroundanimasigrafis.
PendahuluanAnimasiteksmerupakansalahsatubagiananimasiyangdapatdiimplementasikanuntuk menambahkanefekanimasidanmempercantiktampilanpaketbahanajarmultimediayangakan dikembangkan. Dengan memberikan sedikit sentuhan animasi pada teks, akan dapat meningkatkanatensipenggunaCDinteraktifterhadapteksyangdibuat. A. AnimasiTeksHilangTimbul Pada latihan ini kita akan membuat sebuah animasi sederhana, berupa animasi teks hilang timbul,denganlangkahsebagaiberikut: 1. Buat sebuah file dokumen flash yang baru, dengan ukuran 200 x 800 pixel, warna backgroundsetingmenjadihitam.Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
1
IlmuKomputer.Com
Gambar1.Setingandokumenflash
2. Buatduabuahlayer,masingmasinglayerubahnamanyamenjaditeks1(untuklayer1) danteks2(untuklayer2).
Gambar2.Pembuatan2layerpadadokumenflash 3. Pada layer Teks1, klik frame 1, kemudian klik Text Tool ( ), untuk membuat sebuah
tekspadalayerTeks1,dengansetingansepertiterlihatpadaGambar3.
Gambar3.SetinganHurufteksyangakandibuat 4. Kemudian, tempatkan text tool pada halaman dokumen flash, dan drag sesuai dengan ukuranteksyangakandigunakan,kemudianketikkanTeknikElektronikaFTUNP,atau sesuaikandenganteksyangakandibuat.
Gambar4.TekspadalayerTeks1
5. Selanjutnya,konverttekstersebutmenjadisymbol(converttosymbol=F8),pilihopsinya menjadigrafikdannamakandenganteks1
Gambar5.Konversiteksmenjadisymbolgrafik
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
2
IlmuKomputer.Com6. Pada layer 1, klik kanan pada frame ke 30, pilih Insert Key Frame, untuk membuat sebuahkeyframepadaframeke30,Kemudianlakukanhalsamapadaframeke7dan25
Gambar6.Penempatankeyframepadaframe7,25dan30 7. Rencana animasi teks yang akan kita buat adalah, teks Teknik Elektronika FT UNP tersebutsemulatidaktampak,kemudianmunculdansetelahituhilangkembali. 8. Klikframe1padalayerTeks1,kemudiankliktulisanteksyangtelahdikonversimenjadi grafik,kemudianpilihpropertycolor,setingnilaialphanyamenjadi0%
Gambar7.Pengaturanalphateksmenjadi0% 9. Lakukanlangkahyangsama(langkah8)padaframe30 10. Klikkananpadaframe3,15dan27,pilihCreateMotionTween
Gambar8.PembuatansebuahMotionTween 11. Jika ingin memperoleh waktu animasi yang lebih panjang, maka silahkan atur durasi panjangframeyangakandigunakan. 12. Kemudian pada layer Teks2, gunakan kembali Text Tool, untuk membuat teks Mempersembahkan,dengansetingansebagaiberikut:
Gambar9.SetinganteksMempersembahkan 13. Kemudiandrag,frame1keframe31
14. Setelahitudikonversimenjadisymbol,dengnnamaTeks2,danbehaviornyaGraphic
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
3
IlmuKomputer.Com
Gambar10.KonversitekskesymbolTeks2
15. PadalayerTeks2,klikkananpadaframeke60,pilihInsertKeyFrame,untukmembuat sebuahkeyframepadaframeke60,Kemudianlakukanhalsamapadaframeke37dan 50.
Gambar11.Penempatankeyframepadaframe37,50dan60
16. Rencana animasi teks yang akan kita buat adalah, teks Mempersembahkan tersebut semulatidaktampak,kemudianmunculdansetelahituhilangkembali. 17. Klikframe31padalayerTeks2,kemudiankliktulisanteksyangtelahdikonversimenjadi grafik,kemudianpilihproperticolor,setingnilaialphanyamenjadi0%
Gambar7.Pengaturanalphateksmenjadi0% 18. Lakukanlangkahyangsama(langkah17)padaframe60 19. Klikkananpadaframe33,45dan57,pilihCreateMotionTween
Gambar8.PembuatansebuahMotionTween 20. Jika ingin memperoleh waktu animasi yang lebih panjang, maka silahkan atur durasi panjangframeyangakandigunakan. LatihanMandiriTeksHilangTimbul: Animasi Teks Hilang dan timbul ini dapat diimplementasikan pada halaman pembuka CD Interaktif dan dapat digabungkan dengan desain interface yang telah dibuat. Contoh Latihan ini dapat saudara lihat pada file : Animasi Teks.fla, yang dapat didownload bersamaandenganmodulini Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
4
IlmuKomputer.ComB. AnimasiTeksMunculSatuPersatu Pada latihan ini kita akan membuat sebuah animasi teks, yang memperlihatkan tulisan teksnyamunculperkarakter,kemudianhilangkembaliperkarakter. Ikutilangkahkerjaberikutini: 1. Buat sebuah file dokumen flash yang baru, dengan ukuran 200 x 800 pixel, warna backgroundsetingmenjadihitam.
Gambar9.Setingandokumenflash 2. Layer1ubahnamanyamenjaditeks1.
3. Aktifkan Text Tool, kemudian tempatkan sebuah teks baru CD Interaktif dengan setinganhuruf,samadengansetingandiatas(lihatlangkah3LatihanA)
Gambar10.SetinganTeksCDInteraktif
4. Kemudian pisahkan masing masing karakter huruf dengan menggunakan break apart yang dapat dilakukan dengan mengklik menu modify mengkliktombolCtrl+Bsecarabersamaan. break apart atau dengan
Gambar11.Pemisahanhurufdenganbreakapart 5. Kemudian masingmasing huruf diditribusikan menjadi layer terpisah dengan distribute tolayerdenganmengklikmenuModify mengkliktombolCtrl+Shift+D Timeline DitributetoLayerataudengan
Gambar12.Hasilpendistribusiankarakter
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
5
IlmuKomputer.Com6. LayerTeks1saatinisudahdapatdihapus. 7. Kemudian, selanjutnya kita atur urutan munculnya huruf satu persatu, dengan jarak muncul masingmasing huruf adalah 2 frame, maka masingmasing huruf kita atur posisinya pada frame dan layer masingmasing. Misalnya Huruf C kita biarkan berada pada frame 1, huruf D digeser ke frame 3, huruf I digeser ke frame 5 dan seterusnya, sehingga masingmasing karakter digeser per dua frame pada masingmasing layernya secaraberurutan.HasilnyadapatdilihatpadaGambar13.
Gambar13.Pengurutantampilanhuruf 8. SelanjutnyapadalayerC,klikkananpadaframe31,pilihInsretFrame 9. Kemudian,selanjutnyakitaatururutanhilangnyahurufsatupersatu,denganjarakhilang masingmasinghurufadalah2frame,makamasingmasinghurufkitaaturposisinyapada framedanlayermasingmasing.MisalnyaHurufCkitabiarkaninsertframepadaframe 31(langkah8),hurufDdiinsertframepadaframe33,hurufIdiinsertframepadaframe 35danseterusnya,sehinggamasingmasingkarakterdiinsertframeperduaframepada masingmasinglayernyasecaraberurutan.HasilnyadapatdilihatpadaGambar14.
Gambar14.Hasilpengaturanmunculdanhilanghurufpadaflash 10. JalankandenganmenekanCTRL+Enter
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
6
IlmuKomputer.ComC. AnimasiTeksdenganTimeLineEffect Selainmembuatanimasidenganmenggunakanfasilitasrancangansendiri,sepertilangkahdi latihanAdanB,banyakaefektekslainnyadapatdibuatdenganFlashmenggunakanafasilitas timelineeffectyangadapadaflash. Langkah untuk memanfaatkan fasilitas timeline effect ini adapat dilakukan dengan langkah sebagaiberikut: 1. Buatlahsebuahdokumenflashbaru,sepertipadalatihanAdanB 2. Buatlahsebuahteksseperti:JaringanKomputer
Gambar15.TeksJaringanKomputer 3. Gunakansubselectiontool( 4. KlikmenuInsert ),klikpadateks
TimelineEffect
Effectkemudianpilihbeberpaefekyangtersedia,
sepertiterlihatpadaGambar16.
Gambar16.Beberapaefekpadatimelineefek
5. Untukmembuatefekmengabur(blur),efekmembayang(DropShadow),efekmebesar (ekspand) dan efek Berserakan (Explode) silahkan pilih sesuai dengan efek yang anda inginkan,kemudianuntukmenjalankannyatekantombolCtrl+Enter D. LatihanGabungan Pada latihan ini silahkan saudara gabungkan semua efek yang dimaksud, sehingga menjadi animasi teks yang digunakan sebagai welcome screen yang akan digunakan pada CD Interaktifyangdirancang.
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
7
IlmuKomputer.Com
LatihanMandiri1. Buatlah sebuah animasi pembuka (welcome screen) sebuah CD Interaktif seperti yang terlihatpadacontohfilelatihanyangtelahtersediapadasitepenulis. 2. Animasi welcome screen disesuaikan dengan paket CD Interaktif yang akan akan dikembangkan
SelamatMencoba
BiografiPenulis 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, WebBased Application, Online Learning, MultimediaBased Instructional Design, dan Knowledge Community. Penulis aktif sebagai pemakalah dalam berbagai Seminar Nasional, instruktur pada model pembelajaran berbasis Multimedia dan Komputer., ITBased 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 NegeriPadang,terhitungmulaiSeptember2006.
Komunitas eLearning IlmuKomputer.Com Copyright 2003-2008 IlmuKomputer.Com
8