Gambar 3.8 ActionScript perputaran kupu-kupu
4. Membuat tombol menu
Menu-menu yang dibuat dihubungkan dengan animasi-animasi selanjutnya yang tersedia. Cara link menu ialah dengan membuat tombol nama masing-masing menu
dan menghubungkannya dengan mengetikkan action script pada tombol. Contoh:
Gambar 3.9 Link menu materi
3.3 Materi
3.3.1 Apa itu metamorphosis
Buka sebuah new flash document. Pada animasi ini berisikan movie clip teks mengenai metamorphosis. Saya membuat animasi dengan bermain pada frame
sehingga teks akan tampak berganti-ganti warna.
Langkah pertama yang saya buat adalah menuliskan keterangan mengenai metamorphosis dan kemudian mengconvertnya menjadi movie clip. Pada frame 1,
buka property panel dan pilih filter. Klik pada tanda + plus dan pilih glow dan drop shadow, kemudian atur blur x, y, dan Quality pada glow dan drop shadow. Pada frame
ini, buatlah color bewarna putih. Kemudian buat keyframe pada frame 4, dan ganti color menjadi warna biru, begitu selanjutnya sesuai warna yang diinginkan.
Gambar 3.10 Pengaturan filters movie clip teks
3.3.2 Jenis Metamorfosis
Membuat animasi pada materi
jenis metamorphosis
ini, dimulai dengan membuat desain unutk background agar terlihat sedikit lebih menarik. Dimulai dengan
memberikan sedikit keterangan mengenai materi
jenis metamorphosis
dan disini terdapat dua buah tombol yang merupakan link ke materi selanjutnya.
Pada tombol metamorphosis sempurna, diletakkan script yang akan menghubungkan ke animasi mengenai metamorphosis Sempurna. Begitu juga dengan
tombol metamorphosis tidak sempurna, diletakkan script yang akan menghubungkan ke animasi mengenai metamorphosis tidak sempurna. Dan pada tombol home,
diletakkan script yang akan menghubungkan kembali ke animasi menu.
Gambar 3.11 ActionScript metamorfosis Sempurna
Script untuk tombol metamorphosis tidak sempurna kurang lebih sama dengan script untuk tombol metamorphosis sempurna, hanya tinggal menyesuaikan pada
frame, dimana animasi nya terdapat.
A. Metamorfosis Sempurna
Dimulai dengan membuat desain untuk background. Pertama-tama, buat sebuah teks yang berisi tentang penjelasan mengenai metamorphosis sempurna. Dan buat beberapa
tombol yang akan menghubungkan ke animasi hewan-hewan yang bermetamorfosis sempurna, dan tombol untuk kembali ke menu utama dan menu jenis metamorphosis.
Disini terdapat sedikit animasi dengan permainan frame, dimana saya membuat tombol kupu-kupu dan katak bergerak dan mengalami perubahan warna.
Langkah membuatnya, pertama-tama pada frame 1, buat dua buah movie clip katak dan kupu-kupu, dan posisikan ditengah-tengah lembar kerja. Kemudian buat keyframe
pada frame 4, dan putar movie clip sesuai keinginann ubah warna dan posisi, lakukan hal yang sama pada frame 8, 13, dan frame 18 dan akhirnya buat keyframe pada frame
38. Seperti yang terlihat pada gambar 3.12.
Gambar 3.12 Timeline metamorphosis sempurna
Gambar 3.13 Desain metamorphosis sempurna
Pada metamorphosis sempurna ini terdapat 2 buah tombol yang menghubungkan ke animasi selanjutnya yang berisi penjelasan mengenai tahap-tahap
hewan tersebut bermetamorfosis.
1. Kupu-kupu
Langkah pertama, desain sebuah lembar kerja dengan memasukkan sedikit keterangan mengenai metamorphosis kupu-kupu. Disini saya membuat beberapa tombol yang
merupakan tahapan dari metamorphosis kupu-kupu ini. Dan disini juga kita memiliki dynamic text untuk meletakkan keterangan mengenai tahapan dari metamorphosis ini.
Susunlah masing-masing tombol sesuai dengan gambar pada 3.14, kemudian pada dynamic text ubah nama var menjadi kupu. Dan pada tombol telur buat lah script
seperti yang tampak pada gambar 3.15.
Gambar 3.14 Desain kupu-kupu
Gambar 3.15 ActionScript kupu-kupu telur
Tombol play yang ada digunakan untuk menghubungkan ke animasi metamorphosis dari kupu-kupu tersebut. Disini, saya membuat animasi dengan
memunculkan satu persatu gambar dari tahapan metamorphosis kupu-kupu. Cara membuatnya, pertama-tama saya mengimport gambar telur, ulat, kepompong, dan
kupu-kupu, kemudian membuatnya pada layer yang berbeda-beda sesuai dengan nama masing-masing objek. Atur posisi masing-masing objek sesuai dengan urutan
metamorfosisnya. Buat layer baru di antara layer telur dan layer ulat, beri nama
panah1. Pada frame 1 nya beri gambar panah dan posisikan panah diantara objek telur dan ulat. Buat layer baru lagi di antara layer ulat dan layer kepompong, beri nama
panah2. Pada frame 1 nya beri gambar panah dan posisikan juga diantara objek ulat dan kepompong. Dan lakukan langkah tersebut kembali sampai pada panah 4 dan
posisikan diantara kupu-kupu dan telur. Seperti tampak pada gambar 3.16.
Gambar 3.16 Desain metamorphosis kupu-kupu
Untuk mengatur gerakan animasi, Geser frame 1 pada layer telur ke frame 5, Geser frame 1 pada layer panah1 ke frame 10, dan pada frame 20 lakukan insert keyframe,
Kemudian buat layer baru di atas layer panah1, beri nama penutup1. Pada frame 10 insert blank keyframe. Klik mouse pada frame 10 layer penutup1, dengan
menggunakan rectangle tool , buat sebuah kotak di stage dengan ukuran menutupi
gambar panah1. Warna terserah Anda. Klik mouse dua kali pada gambar kotak,
kemudian pilih Modify Convert to symbol. Pada jendela dialog yang muncul, atur
sebagai berikut.
Gambar 3.17 Jendela dialog convert to symbol
Pilih ok, Klik mouse pada frame 20 layer penutup1, insert keyframe, Klik mouse
kembali di frame 10 pada layer penutup1. Pilih Free Transform Tool , Klik
mouse pada gambar kotak, geser lingkaran putih kecil yang di tengah gambar ke pojok kiri bawah gambar.
Gambar 3.18 Kotak Penutup
Atur besarnya gambar kotak seperti pada gambar berikut.
Gambar 3.19 Kotak Penutup di perkecil
Kemudian gerakkan dengan menggunakan motion tween. Klik kanan mouse pada kotak kecil di layer penutup1, pilih kemudian pilih mask
.
Apabila animasi dijalankan, maka panah akan muncul secara perlahan.
Selanjutnya setelah menganimasikan panah, saya akan memunculkan gambar ulat secara dissolve. Cara membuatnya, Geser frame 1 pada layer telur ke frame 21.
Kemudian Klik mouse pada gambar telur, pilih Modify Convert to Symbol atau tekan tombol F8 dan convert gambar menjadi graphic. Klik kanan mouse di frame 25
pada layer ulat, pilih insert keyframe. Klik mouse di frame 21 pada layer ulat. Klik pada gambar ulat di stage. Pada jendela properties pilih color pada posisi Alpha
dengan 0 dan gerakkan dengan menggunakan motion tween. Apabila animasi dijalankan, maka akan muncul gambar kupu-kupu, garis panah, dan gambar ulat
secara disslove. Selanjutnya lakukan cara yang sama untuk mamunculkan panah- panah lain dan objek-objek lain pada metamorphosis kupu-kupu ini. Dan langkah
terakhir, Klik mouse di frame 70 pada layer telur, tekan tombol shift, tahan, klik mouse frame 70 pada layer penutup4. Klik kanan mouse pilih Insert Frame. Maka
layar monitor akan terlihat seperti pada gambar 3.17.
Gambar 3.20 Timeline metamorphosis kupu-kupu
Untuk melihat hasilnya, tekan ctrl+enter.
2. Katak
Membuat animasi metamorphosis katak ini, langkah kerjanya kurang lebih sama dengan animasi kupu-kupu yang telah dijelaskan. Dan unutk melihat hasilnya, tekan
ctrl+enter.
B. Metamorfosis tidak Sempurna
Langkah pertama yang saya lakukan adalah membuat desain terlebih dahulu. Desain yang saya buat ialah dengan meletakkan keterangan mengenai metamorfosis tidak
sempurna dan membuat tombol-tombol yang akan dihubungkan dengan animasi hewan yang bermetamorfosis tidak sempurna.
Gambar 3.21 Desain metamorphosis tidak sempurna
Untuk animasi hewan-hewan yang mengalami metamorphosis tidak sempuna, langkah pembuatan nya sama seperti animasi hewan-hewan yang mengalami
metamorphosis sempurna yang telah dijelaskan.
3.3.3 Metamorfosis Serangga
Langkah pertama yang saya buat adalah membuat desain latar sehingga terlihat lebih menarik. Dan kemudian mengetik pada lembar kerja keterangan mengenai
metamorphosis serangga, dan setiap selang 3 frame ubah warna glow teks sehingga. Dan untuk membuat animasi lebih menarik, disini saya membuat efek salju dengan
cara membuat movie clip lingkaran kecil dengan menggunakan oval tool, dan beri warna putih. Kemudian buat scipt pada lingkaran tersebut.
Gambar 3.22 ActionScript efek salju
Kemudian copy sebanyak mungkin lingkaran dan posisikan disembarang tempat di seluruh area lembar kerja. Tekan ctrl+enter untuk melihat hasil.
3.3.4 Metamorfosis Amfibi
Langkah pertama yang saya lakukan untuk membuat animasi ini adalah membuat desain terlebih dahulu, dengan menempatkan tiga buah tombol, yang merupakan
bagian dari penjelasan mengenai metamorfosis amfibi ini. Untuk itu, disini saya juga membuat dynamic text sebagai tempat keterangan dari tombol-tombol tersebut. Dan
saya juga membuat teks yang merupakan keterangan mengenai metamorphosis amfibi. Dan pada masing-masing tombol, buat script untuk melihat keterangan dari tiap-tiap
tombol.
Gambar 3.23 Desain metamorphosis amfibi
Dan seperti pada animasi metamorphosis serangga, untuk membuat animasi ini lebih menarik, saya juga menambahkan efek salju, yang langkah kerjanya sama
dengan yang telah dijelaskan. Untuk melihat hasilnya, tekan ctrl+enter.
3.3.5 Latihan Soal
Pada halaman latihan soal ini saya membuat desain dan animasi yang sederhana dan mengambil sebuah gambar sebagai background agar terlihat lebih menarik. Pada
halaman latihan soal ini, saya menambahkan animasi gelembung dan animasi objek doraemon bergerak. Adapun animasi gelembung ini, saya buat script nya sehingga
gelembung ini akan hilang apabila bersentuhan dengan kursor.
Gambar 3.24 ActionScript animasi gelembung
Dan disini juga saya membuat sebuah animasi berupa objek doraemon yang bergerak. Pertama saya memasukkan sebuah objek doraemon ke stage dan merubah
nya menjadi movie clip dengan alpha 51. Dan pada objek doraemon ini, buat action script seperti terlihat pada gambar 3.22.
Gambar 3.25 ActionScript animasi doraemon
Langkah dalam membuat latihan soal :
1. Buatlah sebuah tombol pada farme 1 yang digunakan untuk masuk kesoal-soal yang akan dibahas. Dan gunakan static text untuk membuat tulisan untuk
menyambut pengguna masuk kesoal. Dan gunakan sedikit animasi pada tulisan ini dengan mengubah warna nya setiap selang 3 frame sampai kepada frame 20
Gambar 3.26 Desain halaman depan latihan soal
2. Dimulai pada frame 21, ketik soal beserta pilihannya a,b,c, dan d pada setiap
frame dengan menggunakan static text, pada 1 frame buat dua buah soal. 3.
Dsini kita membutuhkan dua buah dynamic text sebagai tempat jawaban yang kita pilih dan tempat nilai 1 atau 0. Nilai 1 untuk benar dan nilai 0 untuk salah.
Dynamic teks untuk tempat nilai ini posisikan dibelakang gambar background sehingga tidak kelihatan oleh pengguna.
4. Pada dynamic text untuk tempat jawaban, beri nama variable j1, untuk soal
nomor 1dan j2 untuk soal nomor 2 dan begitu seterusnya. Dan pada dynamic text yang digunakan sebagai tempat nilai, beri nama variable s1 untuk soal
nomor 1 dan s2 untuk soal nomor 2 dan demikian seterusnya sampai nomor soal 20..
5. Setiap pilihan yang telah dibuat tadi ubah menjadi button dengan menekan f8.
6. Masukkan script berikut pada button pilihan a.
Gambar 3.27 ActionScript button pilihan
Dan untuk pilihan b,c dan d, buat script yang sama dengan mengganti pilihan. Kemudian, lakukan hal yang sama untuk soal-soal selanjutnya, dengan
mengganti nama variable. 7.
Selanjutnya pada frame 29, buatlah sebuah button skor pada stage untuk melihat nilai dari latihan soal ini dan tiga buah dynamic text sebagai tempat
jumlah benar, jumlah salah dan pesan penulis untuk pengguna. Beri nama variable untuk masing-masing, benar,salah dan pesan.
8. Masukkan script berikut pada tombol skor :
Gambar 3.28 ActionScript tombol skor
9. Buat tombol coba lagi untuk kembali menjawab latihan soal ini. Dan
masukkan action script berikut pada tombol ini :
Gambar 3.29 ActionScript tombol coba lagi
3.3.6 Profil Penulis
Langkah pertama yang saya lakukan untuk membuat profil ini adalah dengan membuat desain latar belakang. Disini saya menambahkan beberapa foto dari penulis
dan menambahkan sedikit animasi dengan menjalankan beberapa foto penulis. Pertama, masukkan foto yang ingin dianimasikan ke stage dan letakkan
diposisi yang diinginkan. Ubah objek foto menjadi movie clip dengan alpha 39 dan untuk menggerakkannya, buat script seperti pada gambar 3.27 pada objek foto
tersebut.
Gambar 3.30 ActionScript Objek Foto
3.4 Tombol
Exit
Tombol exit ini ialah tombol yang terhubung pada halaman exit. Tombol ini saya letakkan pada halaman menu awal animasi. Halaman exit merupakan halaman yang
berisi kata-kata penutup untuk mengakhiri animasi pembelajaran metamorphosis sederhana ini.
BAB 4
IMPLEMENTASI SISTEM
4.1 Hasil
Ketika pertama kali dibuka, aplikasi ini akan menampilkan halaman intro. Pada intro terdapat tombol menu yuk untuk masuk kedalam animasi menu utama.
Gambar 4.1 Halaman intro animasi
