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