Adri Multimedia Instructional Design 8 Text Animation

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


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


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


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.


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.


8

Adri Multimedia Instructional Design 8 Text Animation

Documents

Transcript of Adri Multimedia Instructional Design 8 Text Animation