[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi

MODUL PEMBUATAN MEDIA PEMBELAJARAN MENGGUNAKAN MACROMEDIA FLASH

A. Sekilas Macromedia Flash Macromedia flash merupakan program aplikasi yang

memungkinkan untuk pembuatan animasi. Animasi adalah suatu karya yang memiliki banyak elemen antara lain teks, gambar, suara, dan gerak. Animasi terdiri dari dua macam yaitu animasi 2D dan animasi 3D. Untuk animasi 2D dapat dibuat salah satunya menggunakan macromedia flash. Sedangkan untuk animasi 3D dapat dibuat menggunakan 3Ds Max dan lain-lain.

Macromedia flash sering digunakan untuk membuat media presentasi maupun media pembelajaran. Hal ini karena lebih menarik dan dapat didesain sesuai dengan kebutuhan, menggantikan Ms. Power point yang konvensional dan cenderung statis (kita tidak dapat mengkostumisasi secara bebas). Untuk membuat suatu media pembelajaran dengan macromedia flash, tidak diharuskan memiliki keahlian khusus. Akan tetapi, jika sudah memiliki keahlian dalam desain grafis maka sangat membantu.

Perbedaan antar rilis pada macromedia flash yang agak berubah adalah versi Flash MX atau Flash MX 2004 ke Flash 5 dan seterusnya (Modul ini disusun untuk flash 8, jika anda belum mengenal Flash MX, tidak masalah menghadapi perubahan ini). Perbedaan tampak seperti halnya Ms. Office 2003 ke Office 2007 atau 2010.

Berbagai fitur baru, ditambahkan pada rilis yang baru. Akan tetapi dari segi script, lebih rumit dan njlimet dibandingkan dengan versi 2004 yang lebih simpel dan relatif mudah bagi pemula.

1 | http://cara-apapun.blogspot.com

[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi

B. Tampilan halaman utama flash

C. Antar muka

2 | http://cara-apapun.blogspot.com

[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi

1. Menu bar

Komponen menu yang sering digunakan untuk pembuatan media pembelajaran antara lain: a. File-new : untuk membuka lembar kerja yang baru. b. File-open : untuk membuka lembar kerja yang pernah dibuat. c. File-save : untuk menyimpan file, secara otomatis akan berekstensi *.fla dan *.swf d. File-publish setting: untuk mengatur jenis file ketika menyimpan, terdiri dari *.swf, *.gif, *.jpeg, *.exe, *.html dan lain-lain. e. Edit-paste in place : digunakn untuk menempatkan duplikat sesuai pada posisi awal objek yang di copy. f. Insert-scene : untuk membuat scene yang baru. Scene bisa diartikan seperti sebuah drama, maka scene adalah episode yang berisi cerita yang lain. g. Window-library : untuk memunculkan daftar objek yang kita buat. h. Window-common library : untuk memunculkan daftar objek yang sudah ada pada flash. Kita tidak perlu membuatnya, tinggal menggunakan saja, misalnya tombol-tombol dan lain-lain. i. Untuk menu-menu yang lain, bisa diakses dengan perintah yang lebih sederhana dan lebih cepat.

2. Tool box Kelompok untuk membuat objek dan modifikasi Kelompok untuk view (tampilan; zoom) Kelompok pengatur warna Pilihan seting

3 | http://cara-apapun.blogspot.com

17) Hand tool : untuk memilih bagian layar yang ingin ditampilkan. 6) Laso tool : untuk menyeleksi objek pada area seleksi bebas. dan memutar objek. tetapi tool berbentuk kuas.com . 15) Eye dropper tool : untuk memilih warna fill pada suatu objek. digunakan untuk menyeleksi bidang objek yang dapat berupa fill atau stroke atau keduanya. 8) Text tool: untuk membuat teks statis maupun dinamis. 14) Paint bucket tool : untuk memberi warna fill (warna isi suatu objek). 10) Rectangle tool: untuk membuat kotak persegi. 7) Pen tool : untuk membuat objek gambar sesuai kehendak kita (bentuk bebas). 5) Line tool : untuk membuat garis lurus atau garis lengkung. 11) Pencil tool : untuk membuat gambar bentuk sembarang/tidak teratur. digunakan utnuk merubah ukuran. Juga digunakan utnk memindah. 16) Erser tool : untuk menghapus objek seperti penghapus pensil dsb. digunakan untuk memilih/ menyeleksi sub tertentu dari objek. 3) Free transform tool. persegi panjang baik dengan sudut lancip maupun sudut tumpul.blogspot. (bukan menghapus seluruh objek). 9) Oval tool: untuk membuat gambar lingkaran maupun bentuk elips.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi Penjelasan: Tool Keterangan 1) Selection tool. 4) Gradient tool digunakan untuk mengatur gradient/perbedaan warna jika objek telah diberi warna gradient. dapat digunakan untuk modifikasi misalnya bentuk objek. 12) Brush tool: fungsinya sama seperti pencil tool. memutar dan lainlain. 13) Ink bottle tool : untuk memberi warna stroke (warna garis tepi dari suatu objek). 18) Zoom tool : untuk memperbesar/kecil tampilan objek yang dipilih. 2) Subselection tool. 4 | http://cara-apapun. biasanya dipasangkan dengan paint bucket tool. Objek bisa berupa gambar atau teks.

Timeline a b c a. 4. Navigation pane / task pane Task pane atau navigation pane adalah jendela panel yang umumnya berada di sebelah kanan layar. Secara default. padahal yang sebenarnya berada pada tumpukan yang berbeda. b. layer 3 dan seterusnya.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 3. layer 2.blogspot. Frame berkaitan erat dengan waktu. Untuk mempermudah mengenali layer. Jadi sesuatu pada frame 1 belum tentu sama dengan apa yang ada di frame 2. bisa di rename dengan nama layer yang k ita inginkan. “tombol” dll. Plastik transparan tersebut bisa ditumpuktumpuk dan masing-masing diberi objek gambar. Layer Layer bisa dianalogikan sebagai plastik transparan yang bisa diberi gambar. Konsep ini yang mendasari animasi. misalnya “background”.com . layer bernama layer 1. Task pane digunakan untuk mempermudah dalam mengedit atau mengkostumisasi objek dengan bantuan tool-tool yang ada pada task pane. “teks isi”. Seperti halnya kita berdiri di suatu jalan raya 5 | http://cara-apapun. Task pane ini bisa dimunculkan atau disembunyikan dari menu bar. maka semua objek akan terlihat seolah-olah dalam satu bidang. Frame Frame adalah part atau bagian bagian dari durasi animasi. yaitu melalui menu window.

00 misalnya kita anggap frame 1. Jadi kesimpulannya. Dengan demikian berarti ada dua kejadian yang berbeda antara frame 1 dan frame 2. (dalam analogi ini pukul 6. d. tidak perlu mencari nomor frame ke berapa. mak a pada frame label. untuk memulai animasi. akan tetapi jika kita play.00 berbeda dengan pukul 6. Frame label Frame label fungsinya sama seperti key frame. sehingga jika kita menghendaki lompat ke alamat tertentu.05 kita anggap frame 2. Kemudian pada pukul 6.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi pada pukul 6. Key frame Key frame adalah frame kunci.05) c. Misal bab 1 isinya pendahuluan. tetapi dengan mudah kita menemukan nama key frame nya. Scene Scene adalah bagian cerita dari suatu animasi. 6. (Akan dengan mudah dipahami setelah praktek). Kita bisa saja membuat objek yang berada diluar area. pada saat itu ada bus yang lewat. akan tetapi lebih mudah dalam pengaturan ulang jika kita membagi menjadi beberapa scene. tetapi ada sepeda motor. Seperti kertas untuk mengetik jika dalam ms. Bisa saja semua file animasi atau media pembelajaran yang kita buat hanya terdiri dari satu scene. pada saat itu tidak ada bus. bab 2 isinya teori dan seterusnya. Work area Work area adalah layar yang kita gunakan untuk menempatkan objek. kita bisa mengganti nomor key frame tersebut dengan teks. yaitu bagian dari frame yang dapat kita lakukan pengaturan tersendiri. 5. objek yang akan 6 | http://cara-apapun.word.blogspot. untuk menghentikan suara dan lain-lain. objek tersebut tidak akan tampil. Scene juga bisa diartikan seperti BAB.com . Misalnya untuk memasukkan objek. Jika pada key frame kita “dipaksa” untuk mengingat nomor key frame.

Bagian isi yang berwarna biru adalah fill. 2. dan sebagainya. Misalnya untuk membunyikan suara. Ruler Ruler adalah penggaris. sehingga untuk merubah warnanya kita menggunakan fill tool. Stroke Dari gambar diatas garis merah adalah stroke. 7 | http://cara-apapun. Konsep dasar obyek gambar dan teks 1. sehingga untuk merubah warna garis. D. 9. sama seperti properties bar. Fill Perhatikan gambar kotak disamping. biasanya digunakan untuk menempatkan objek dengan jarak seberapa dari objek yang lain.com . Ruler ini tidak begitu dipentingkan karena ada tool lain yang bisa digunakan secara otomatis. menggunakan stroke color. Properties bar Properties bar berada dibagian bawah layar.. Fungsi dari action bar ini digunakan untuk menuliskan script/kode perintah untuk mengontrol animasi. yaitu bagian isi yang berwarna biru dan bagian garis yang berwarna merah. 7.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi ditampilkan dalam animasi adalah objek yang berada didalam work area.. untuk lompat menuju frame atau scene tertentu.blogspot. Digunakan sebagai bantuan untuk menentukan posisi suatu objek. Untuk membuat hyperlink dan lain-lain. 8. Action bar Action bar berada di bagian bawah layar. Digunakan untuk mengatur properti dari suatu objek. kotak tersebut terdiri dari dua bagian.

Objek yang dijadikan tombol dapat dimasukkan script untuk navigasi. Movie clip Movie clip adalah suatu objek yang dapat dianimasikan. 4. Dynamic text Gambar disamping adalah dynamic text. Static text Teks diatas merupakan static text.blogspot. Teks dinamis tidak dapat dijasikan untuk membuat tombol. tetapi harus dirubah dahulu menjadi movie clip.com . 6. Teks dinamis ini digunakan jika kita ingin membuat teks paragraf. yaitu teks statis. Sifat dari teks statis ini tidak akan berganti baris jika tidak melakukan penekanan tombol enter. Pada prinsipnya semua objek dapat dianimasikan. Selain itu untuk menjaga supaya objek tersebut tidak akan terganggu dengan selection tool jika kita salah dalam memilih objek. 8 | http://cara-apapun. 5. Teks dinamis akan berpindah baris secara otomatis tanpa penekanan tomtol enter.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 3. Teks statis ini juga yang bisa dibuat menjadi animasi atau tombol. Button Button adalah suatu tombol. pengubahan objek menjadi graphic bertujuan untuk mempermudah mengatur properti objek tersebut. 7. Graphic Graphic adalah gambar biasa.

kemudian klik kanan pada keyframe 1. buatlah sebuah objek misalkan kotak. 9 | http://cara-apapun.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi E. pastikan anda klik selection tool. pilih “create motion tween”.com . Konsep dasar animasi 1. menggunakan rectangle tool. 2) Setelah itu.blogspot. Perpindahan posisi 1) Sebagai latihan. Motion a.

jangan anda klik ditempat lain.blogspot. pilih “insert keyframe”. silahkan tekan tombol enter. (Yang jelas harus beda tempat). Lihat!!!! (Jangan senyum-senyum dulu. berarti sudah ada perintah animasi motion tween. Perhatikan posisi garis slider berwarna merah! Posisi tersebut menandakan posisi saat ini. klik dan geser sekehendak anda. 6) Sementara biarkan saja.com . pada posisi tersebut yang akan berubah. Sekarang fokus ke gambar kotak. misalnya saya geser ke kanan. 7) Untuk mencobanya. 4) Maka pada timeline akan muncul seperti ini: 5) Dengan adanya tanda panah seperti itu.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 3) Setelah itu klik kanan pada frame 20. anda akan bisa membuat animasi yang membuat orang lain berdecak kagum ) 10 | http://cara-apapun. artinya jika anda melakukan perubahan gambar.

2) Kemudian klik selection tool. Perubahan ukuran 1) Masih menggunakan objek yang telah kita buat tadi. lalu klik gambarnya. pilih tint 11 | http://cara-apapun. 3) Setelah itu munculkan properties dibawah layar: 4) Pada bagian “color” klik combobox yang ada. 3) Kemudian klik free transform tool dan klik gambar kotaknya.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi b.blogspot. sehingga gambar menjadi besar. Perubahan fill/warna 1) Percobaan ini masih menggunakan objek yang sama. 5) Tekan enter. Apa yang terjadi??? Ya. Kenapa berpindah tempat.com . letakkan garis merah pada akhir keyframe atau awal. Sebenarnya diawal atau diakhir tidak masalah. sehingga tampilan gambar kotak seperti ini: 4) Klik dan drag pada kotak-kotak kecil hitam disekeliling gambar tersebut. karena masih terkait dengan percobaan pertama. gambar berpindah tempat dan berubah ukuran menjadi lebih besar. c. 2) Pastikan posisi garis merah berada di akhir keyframe. tergantung bagaimana yang anda inginkan.

letakkan pada frame 1. menggunakan oval tool. perubahan warna. misalnya lingkaran atau apa yang bisa membuat anda faham. 6) Tekan enter. perubahan ukuran. perpindahan posisi. 1) Pertama kita siapkan bentuk gambar lingkaran misalnya. 12 | http://cara-apapun.com . 2. Perubahan bentuk Animasi shape digunakan untuk perubahan bentuk. Sebenarnya dapat juga dilakukan dengan motion.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 5) Pada combo warna merah. anda juga bisa menggunakan teks statis. Ganti bentuk gambar. anda dapat memilih warna yang diinginkan. Selain gambar. Animasi bukan? 7) Ulangi langkah pada sub motion ini berulang-ulang sampai faham betul. tetapi lebih bagus hasilnya jika menggunakan shape. Apa hasilnya? Ya. kemudian untuk mengatur ketebalan warna disampingnya ada nilai persen yang dapat diatur. Shape a.blogspot.

com .[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 2) Selanjutnya klik kanan frame 25 dan klik insert blank keyframe 3) Tampilan pada timeline menjadi seperti ini: 13 | http://cara-apapun.blogspot.

sekarang klik frame diantar frame 1 dan frame 25. 7) Kemudian munculkan jendela properties bagian bawah layar: 8) Pada bagian tween. semula berupa lingkaran.blogspot. Kemudian tekan enter. pilih “shape”. Ulangi latihan diatas. 9) Perubahan bentuk. kemudian buatlah gambar kotak. perlahan-lahan berubah menjadi kotak. 14 | http://cara-apapun.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 4) Biarkan garis merah berada pada posisi tersebut. Apa yang terjadi? Coba anda ulangi tekan tombol enter sampai faham kondisi apa yang terjadi.com . bisa anda klik pada frame 2-24. 5) Lihat kondisi timeline sekarang: Bisakah anda mnemukan perbedaan dari langkah nomor tiga dengan tampilan diatas? 6) Ok.

misalkan untuk menjalankan animasi. stop dan lain-lain.blogspot. Sebagai contoh.com . a. kita sisipkan judul halaman sehingga tampilan menjadi seperti ini: 15 | http://cara-apapun.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi F. pause. Frame number Link menuju frame number adalah link yang beralamatkan pada nomor frame. Navigasi Navigasi adalah komponen yang digunakan untuk mengatur jalannya animasi. Navigasi lebih cenderung diartikan sebagai tombol. kita buat desain sederhana dengan beberapa tombol navigasi sebagai berikut: 1) Buat kotak pada frame 1 seperti berikut ini: 2) Kemudian menggunakan text tool. Navigasi juga dapat digunakan utnuk mengontrol animasi. Tombol dapat diberi perintah untuk link ke alamat tertentu yang dikehendaki. Frame yang dituju adalah semua frame. 1. Link antar frame Link antar frame adalah link yang berlaku dalam key frame. baik berupa key frame maupun bukan.

com . 6) Kemudian kita akan membuat tombol pada layer “tombol” frame 1. caranya klik ikon insert layer: 4) Sehingga pada layer akan bertambah menjadi layer 1 dan layer 2 seperti ini: 5) Untuk memudahkan mengidentifikasi layer. Klik Frame 1 pada layer tombol (perhatikan betul layer mana pada tahap ini. sebaiknya kita rubah nama layernya. Kali ini kita ubah namanya menjadi “tombol”. 16 | http://cara-apapun. klik ganda pada tuloisan “leyer 2” kemudian ketik nama nya dan tekan enter.blogspot.dalam hal ini layer “tombol”).[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 3) Kemudian kita buat layer baru secara khusus untuk menempatkan tombol.

Cara mengeceknya.com . misal sebelah kiri kotak.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 7) Kemudian klik text tool. kemudian munculkan properties seperti ini: 8) Jika sudah dalam bentuk/type “static text” selanjutnya klik 1x pada area kosong. Sekarang klik “selection tool” (tanda panah hitam paling kiri atas pada tool box) 17 | http://cara-apapun.blogspot. klik text tool. sekarang kita memiliki dua buah teks yang akan kita jadikan tombol navigasi. tidak perlu pindah layer maupun frame. dan ketik “Latar belakang” 9) Kemudian tambahkan lagi “Tujuan”. biarkan dalam layer dan frame yang sama dengan “Latar belakang” 10) Baik. pastikan jenis teks yang ita gunakan adalah static text.

Selanjutnya akan kita berikan perintah pada tombol tersebut.. Hati-hati untuk teliti pada tahap ini. yaitu halaman yang akan dituju oleh tombol tersebut. yakni halaman “latar belakang” dan halaman “tujuan”.” pada jendela yang muncul.. pilih “convert to symbol.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 11) Klik pada teks “latar belakang”. namun kita perlu menciptakan halaman baru. pilih “button” kemudian klik Ok.blogspot.. 13) Sampai tahap ini kita telah selesai membuat tombol navigasi.. 18 | http://cara-apapun.com . Ingat pada frame 5 layer 1. pada jendela yang muncul pilih “button” kemudian klik OK.”. 14) Pada layer 1. dan pilih “insert blank key frame”. kemudian klik kanan pada teks tersebut. tepat pada frame 5 klik kanan. Klik kanan pada teks nya. 12) Lakukan langkah yang sama pada teks “Tujuan”. kemudian pilih “convert to symbol.

[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 15) Kemudian klik rectangle tool. klik fill tool dan ganti warna: 1 2 3 16) Setelah itu klik dan drag pada area kerja untuk membuat kotak: 17) Masih pada frame dan layer yang sama. dan buat kotak lagi. supaya berbeda dengan halaman “pendahuluan” kita ubah warnanya.blogspot. Setelah klik rectangle tool.com . klik text tool dan ketik judul halaman “latar belakang” 19 | http://cara-apapun.

Klik kanan.blogspot. kemudian klik kanan pada frame 10. 19) Ubah teks “home” dan “tujuan” menjadi “button” seperti langkah no 10 – 12 diatas. klik pada layer 1.com . 20) Selanjutnya kita akan membuat halaman tujuan. Ingat layer 1 frame 10. kemudian tambahkan dua buah tombol yaitu “home” dan “tujuan”. pilih insert blank key frame. pilih “insert blank key frame”. 20 | http://cara-apapun. kemudian klik kanan frame 5 layer tombol. Ingat klik dulu layer “tombol”.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 18) Ok halaman latar belakang sudah jadi.

23) OK kita telah memiliki tiga halaman yang masing-masing telah dilengkapi dengan tombol navigasi. 24) Klik frame 1 layer “tombol”. sehingga seperti ini: 21 | http://cara-apapun.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 21) ini: Lakukan langkah 15 – 19 untuk membuat tampilan seperti 22) Ingat untuk tombol “home” dan “latar belakang” letaknya pada layer “tombol”.blogspot.com . Sekarang kita masukkan perintah pada masing-masing tombol. Dan ubah menjadi button.

[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 25) Kemudian klik diluar gambar maupun teks.blogspot. Kemudian klik teks “tujuan”. Ini yang dimaksud link ke frame number. Lakukan langkah 26. Ingat kita tadi membuat halaman “latar belakang” pada frame 5. } ===keterangan=== on(release) : perintah yang akan dijalankan “jika tombol diklik dan dilepaskannya klik pada tombol tersebut” gotoAndPlay(5) : perintah “pergi ke alamat dan mainkan” adapaun angka 5 adalah tujuan. } 22 | http://cara-apapun. 27) Kemudian tutup action bar jika menutupi layar anda. tetapi kali ini tujuannya adalah frame 10. lalu klik teks “latar belakang” 26) Munculkan Action bar yang berada dibawah layar. yaitu nomor frame.com . pilih “global function” – “Timeline Control” kemudian ketik perintah berikut ini: on(release){gotoAndPlay(5). sehingga perintahnya: on(release){gotoAndPlay(10).

23 | http://cara-apapun. pilih insert blank key frame. } Kenapa demikian. } 30) Yang terakhir kita akan membuat layer kontrol. yaitu pada frame 1. Berikan perintah stop seperti langkah 31. pilih insert blank key frame. 29) Kemudian klik frame 10 pada layer tombol. Untuk tombol “home” perintahnya: on(release){gotoAndPlay(1). Klik ganda “Stop” 32) Setelah itu.com . 33) Setelah itu. Caranya kita buat dulu layer baru dengan meng-klik insert layer: 31) Klik pada layer baru tersebut. tombol home perintahnya seperti diatas.blogspot. klik kanan pada frame 10 di layer yang baru (layer 3). karena home akan menuju halaman pendahuluan. lakukan seperti langkah diatas.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 28) Selanjutnya klik frame 5 pada layer “tombol”. klik kanan pada frame 5 di layer yang baru (layer 3). sedangkan tombol “latar belakang” perintahnya: on(release){gotoAndPlay(5). Kemudian munculkan action bar. Lakukan langkah diatas untuk tombol-tombol yang ada. kemudian klik pada frame 1. } Untuk tombol “tujuan” perintahnya: on(release){gotoAndPlay(10). Berikan perintah stop seperti langkah 31 dan 32. Sedangkan tombol tujuan untuk menuju halaman tujuan yang tadi kita buat di frame 10.

Frame label Frame label dibuat dengan tujuan utnuk mempermudah menemukan alamat frame karena telah kita tandai dengan memberi nama pada frame. yaitu link menuju frame number. Kita tidak perlu tau ada pada frame nomor berapa. seperti modul sebelumnya. halaman latar belakang pada frame berapa. pilih insert blank key frame : 24 | http://cara-apapun. tekan tombol Ctrl + Enter secara bersamaan. silahkan dicoba klik tombol-tombolnya. karena sudah diberi nama. halaman tujuan pada frame berapa dan sebagainya. mula-mula kita membuat beberapa halaman. Berhasil??? b. Berbeda jika kita memberikan nama frame nya. berikut langkah-langkahnya: 1) Mula-mula kita membuat halaman pertama sebagai halaman judul dengan isi halaman sebagai berikut: 2) Kemudian pada layer 1 frame 15 klik kanan.blogspot.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 34) Selesai..com .. Pada contoh sebelumnya. untuk mencoba melihat hasilnya.. Untuk membuat link menuju frame label. mungkin kita sulit untuk menghafal halaman pendahuluan pada frame berapa. Pada window baru yang muncul.

masih pada layer 1. kemudian buat desain isi sebagai berikut: 25 | http://cara-apapun. pilih insert blank key frame.com .[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 3) Kemudian pada frame 15 layer 1 tersebut buat isi halaman seperti ini: 4) Selanjutnya klik kanan frame 30.blogspot.

7) Lakukan langkah no 6 untuk teks “pengantar” dan “kontent”. kemudian pilih button dan klik OK. dengan frame label. klik kanan dan pilih insert key frame.com . klik kanan. Klik kanan teks “home” pilih convert to symbol. klik kanan frame 45 dan pilih insert frame. Kemudian klik diluar gambar. Sehingga tampilan pada time line seperti ini: 10) Sekarang saatnya kita ganti nama frame. 26 | http://cara-apapun. dan halaman kontent. 6) Sekarang kita ubah teks yang akan dijadikan tombol navigasi.blogspot. 9) Pada layer 2 frame 15. Demikian juga pada layer 2 frame 30. Kita ingat halaman pengantar berada pada frame 15 dan halaman kontent pada frame 30.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 5) Masih pada layer 1. pilih insert key frame. Kemudian munculkan properties bar. Klik frame 1 layer 2. Klik frame 1 pada layer 1. 8) Langkah selanjutnya kita duplikat tombol tersebut pada halaman pengantar.

Tekan enter dan perhatikan pada time line. ketik frame labelnya “pengantar”. Klik diluar area gambar. 13) Apakah anda masih kesulitan membaca time line? Sangat mudah mengetahui isi halaman.com . kemudian klik teks “pengantar” lalu munculkan jendela action. 12) Sudah berganti label. Dan pada frame 30 “kontent”. Kemudian lakukan hal yang sama pada frame 15.blogspot. ketik perintah sebagai berikut: 27 | http://cara-apapun. 14) Sekarang klik frame 1 pada layer 2. bukan lagi mengingat-ingat nomor frame. namanya menjadi “judul”.karena sudah kita beri nama pada frame.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 11) Klik pada form “<frame label>” kemudian ketik “judul”.

huruf kapital dan huruf kecil dibedakan artinya.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 15) Teks “Pengantar” saya tulis dengan huruf kapital pada “P” hal ini menyesuaikan dengan frame label. Selanjutnya pada teks “kontent”. Berikan perintah sebagai berikut: 17) Sip. 20) Menuju frame 30 layer 2. Sekarang klik frame 15 pada layer 2.com .blogspot. 16) Ok. klik teks “home” ketik perintah ini: 21) Kemudian klik teks “pengantar” dan ini perintahnya: 28 | http://cara-apapun. Klik teks “home” dan berikan perintah berikut: 18) Pada teks “kontent” seperti ini: 19) Teks “pengantar” tidak perlu diberi perintah apa-apa. Halaman judul telah selesai. justru akan menyebabkan ketidaksesuaian jika kita beri perintah. karena akan menuju halaman itu sendiri.

Siap jalankan animasinya.blogspot. Next/previous frame Navigasi perpindahan frame dengan perintah next frame akan menghasilkan perpindahan menuju satu frame setelahnya.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 22) Selesai perintah tombol nya. Ilustrasi pada time line sebagai berikut: Pada gambar diatas tidak mungkin akan kita beri label. Untuk membuat link netx frame / previous frame kita siapkan desain sebagai berikut: 1) Siapkan halaman pertama: 29 | http://cara-apapun. munculkan action bar kemudian klik ganda stop.com . Sehingga tampak action frame pada time line: 23) Ada simbol seperti huruf “a” kec il. Sedangkan previous frame akan menuju satu frame sebelumnya. Perintah next / previous frame ini efektif jika kita menempatkan isi materi atau animasi pada frame-frame yang saling berdekatan tanpa jeda frame. Coba klik tombolnya. tetapi tidak bisa terbaca karena posisi frame saling berhimpitan. Lakukan hal yang sama untuk frame 15 layer 1. sebenarnya mungkin saja. apakah berfungsi dengan baik? c. sekarang klik frame 1 layer 1. Tekan tombol Ctrl+enter. frame 30 layer1.

com . kemudian klik insert layer untuk membuat layer baru. lalu buat halaman dua: 3) Lakukan langkah yang sama seperti diatas pada frame 3 untuk membuat halaman tiga: 4) Sementara kita buat tiga halaman saja. 30 | http://cara-apapun. Layer baru akan kita gunakan untuk menempatkan tombol.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 2) Kemudian klik kanan pada frame 2. pilih insert blank key frame.blogspot.

kontent telah selesai kita siapkan. lakukan hal yang sama pada frame 3 layer 3. klik ganda next frame. klik ganda “stop”. Munculkan action bar. 10) Lakukan langkah 9 pada frame 2 dan frame 3 pada layer 1 : 11) Sekarang kita memasukkan action button / perintah pada tombol “next” dan “back”. 7) Lakukan langkah 6 pada teks “back”.. lalu klik tombol “next”. 9) Sampai pada tahap ini. Kemudian klik diluar gambar. Sehingga teks tersebut menjadi tombol. Klik frame 1 layer 2. Klik frame 1 layer 1.. karena tidak ada halaman yang dituju. 6) Jika sudah. 8) Selanjutnya klik kanan pada frame 2 layer 2. klik frame 1 kemudian kita buat teks “next” dan “back”. pilih insert key frame. selanjutnya klik kanan pada teks “next” pilih “convert to symbol.blogspot. 31 | http://cara-apapun.” kemudian pilih “button” dan klik OK. 12) Munculkan action bar.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 5) Pada layer 2 yang baru tersebut. kemudian kita masukkan perintah pada tombol dan frame.com . Tombol “back” tidak perlu kita beri action.

karena kita hanya memiliki satu scene). lakukan langkah diatas untuk tombol “next” klik ganda “nextFrame” sedangkan untuk tombol “back” klik ganda “prevFrame”. 15) Sekarang kita coba jalankan. Masih ada error? Tentu tidak..” baris dua kosong).blogspot. frame=1 (kesalahan sejak pada frame 1). Jika sudah kita coba jalankan tekan Ctrl+enter. saran dari komputer “Statemen must appear within on handler” artinya kita harus menambahkan statemen “on()”. Oow. line 1 (pada action scritp. Klik tombol “back” kemudian munculkan action bar dan klik ganda “prevFrame”. Sehingga pada action pane kita tambahkan kode nya seperti ini: 17) Ubah pada tombol yang lain. Coba anda klik tombol next dan back. 14) Kemudian lakukan pada frame 3 layer 2.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 13) Klik frame 2 layer 2.. Tekan tombol Ctrl+Enter. apakah sesuai dengan yang kita inginkan? 32 | http://cara-apapun.com . kita ingat kode yang kita tulis pada baris pertama “nextFrame(). semuanya. Dalam hal ini hanya tombol “back” saja yang kita beri action script.. muncul pesan eror : 16) Kita perhatikan output diatas: eror terjadi pada scene 1 (ya tentu. layer=layer 2 (berarti yang salah kode pada layer 2). ada yang salah.

antara teks “Scene” dan angka 2 ada spasi). Link antar scene Link antar scenepada dasarnya sama dengan link frame. scene 2 untuk BAB 2. Misalnya scene 1 khusus untuk BAB I.com . pemisahan scene ini sangat membantu memudhakna editing. hanya saja yang kita tuju adalah scene yang berbeda. Secara umum perintah link antar scene adalah sebagai berikut: Ket: “Scene 2” adalah scene yang dituju. Untuk media pembelajaran yang kompleks. Mengapa kita membutuhkan banyak scene? Tujuannya adalah untuk mempermudah mengelompokkan materi. Dalam kasus ini berarti kita harus memiliki lebih dari satu scene. langkah-langkahnya sebagai berikut: 1) Buat desain untuk halaman pertama.blogspot. misalkan halaman pendahuluan sebagai berikut: 33 | http://cara-apapun. scene 3 untuk BAB 3 dan seterusnya. Angka 1 setelah scene merupakan nomor frame.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 2. misalnya Scene 2 (ingat huruf “S” nya kapital. Untuk membuat link antar scene.

“BAB II”. pilih Scene. 3) Ubah teks “bab i. klik OK.blogspot. “BAB III”. 4) Langkah selanjutnya membuat scene baru untuk membuat desain halaman BAB I. bab iii” menjadi button. klik kanan pilih convert to symbol. 5) Sekarang perhatikan pada judul time line. sudah berganti menjadi Scene 2 dengan halaman kosong (baru). bab ii. Langkahnya klik menu insert. Klik teks nya. kemudian pilih button. 6) Selanjutnya kita bisa membuat desain halaman BAB I 34 | http://cara-apapun.com .[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 2) Pada layer 1 berisi gambar kotak dan teks “halaman pendahuluan” kemudian pada layer 2 berisi tombol “BAB I”.

10) Posisi kita saat ini berada pada scene 2. Sedangkan layer 2 berisi tombol pendahuluan. layer 1 berisi kotak rounded dan teks BAB I. 11) Klik tombol pendahuluan. caranya klik ikon “edit scene” kemudian klik Scene 1. BAB III. BAB II. kita bisa membuat link dari scene 2 menuju scene 1 dan sebaliknya. kita beri perintah pada tombol “pendahuluan”. 14) Setelah kita berada pada scene 1. 13) Selanjutnya kita menuju scene 1. 8) Sementara kita anggap cukup sebagai contoh.com .1 seperti berikut ini: 35 | http://cara-apapun. berikan perintah pada tombol BAB I. 9) Dari contoh diatas. untuk membuat link ke scene 1.blogspot. munculkan action bar. caranya sama seperti langkah 11. tetapi tujuan nya “Scene 2”.[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 7) Pada gambar diatas. BAB I. dan angka 1 dibelakang koma menunjukkan nomor frame. tombol yang kita gunakan sementara pada scene 2 “pendahuluan” sedangkan pada scene 1 “BAB I”. ketik kode perintah berikut ini: 12) Tulisan “Scene 1” dengan huruf “S” kapital. namun jika akan anda lanjutkan membuat halaman BAB II dan BAB III silahkan sebagai latihan membuat scene baru.

desain dan perintah dasar telah kita pahami.. kira-kira kenapa? Ya. Tekan Ctrl+enter.. 17) Sukses!!! Sampai disini latihan pada tahap pengenalan macromedia flash.. kemudian munculkan action bar. saya mengambil contoh kasus saja. kita akan memasuki tahap yang sebenarnya. 36 | http://cara-apapun. selanjutnya pada tutorial berikut.com . sekarang kita coba menjalankan animasinya.. Namun pada modul. Dan Ctrl+enter lagi. Bisa berjalan seperti yang diharapkan? Ah.... yaitu pembuatan media pembelajaran..blogspot. 16) Ok posisi kita saat ini di scene 1.. berganti-ganti dengan sendirinya. Lakukan langkah yang sama pada scene 2. benar. sepertinya masih ada yang salah. Lebih bagus lagi jika peserta pelatihan telah mempersiapkan materi apa yang akan dibahas. klik ganda “stop”. Kurang action frame stop().[::MODUL MEDIA PEMBELAJARAN FLASH ::] Rahmadi 15) Ok. Semoga bermanfaat. klik pada layer 1 frame 1.

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.