Mendesain Tampilan Awal Animasi Pembelajaran

BAB 3 PERANCANGAN ANIMASI

3.1 Mendesain Tampilan Awal Animasi Pembelajaran

1. Buka lembar kerja baru Adobe Flash CS5, untuk seterusnya membuka halaman kerja baru pilih Action Script 2.0, kemudian ubah ukuran stage nejadi 1360 x 680 pixels. ukuran ini dibuat sesuai dengan layar laptop penulis agar terlihat penuh bila ditampilkan secara fullscreen dan dapat disesuaikan dengan ukuran layar lainnya atau ukuran standar 550 x 400 pixels. 2. Buat 3 tiga buah layer pada timeline, yaitu Layer Background, Layer Ikan dan Layer Tombol. 3. Untuk Layer Background, membuat suasana air laut menggunakan rectangle tool, line nya tanpa warna, dan fill nya linear gradient warna hitam putih. Kemudian atur graasi warnanya dengan biru tua dan biru muda, hilangkan warna hitamnya, selanjutnya klik tanda segitiga kecil pada icon free transform tool pilih linear transform tool dan putarlah background tadi sehingga warna biru tua dibawah dan biru muda diatas. 4. Masih pada layer background, selanjutnya gambar bebatuan dan beberapa helai rumput laut, kemudian gunakan subselection tool untuk menyorot background. Pilih menu modify  convert to symbol  tuliskan namanya tween2 dan type nya movie clip, kemudian pilih lagi insert  classic tween  double click background Universitas Sumatera Utara untuk memasuki lembar kerja classic tween. Kemudian buatlah keyframe pada timeline yang ganjil yaitu 1, 3, 5, 7, 9, 11, 13 dan 15. Di keyframe 1 gambar seperti biasa. Di keyframe 3 geser sedikit gambar rumput laut helai demi helai dengan arah yang bersamaan dan ada yang berlawanan. Di keyframe 5 kembali ke posisi semula. Di keyframe 7 rotasi gambar ke arah yang berlawanan dengan sebelumnya, begitu seterusnya hingga keyframe15. Setelah selesai, ganti FPS Frame Per Second dari 24.00 menjadi 5.00. 5. Selanjutnya pindah ke layer ikan. Pada layer ini, terdapat gambar dua ekor ikan yang bergerak berenang ke atas mendekati judul. Cara membuatnya adalah, pertama-tama gambarkan dua karakter ikan yang sederhana dengan oval tool dan line tool, kemudian warnai dengan paint bucket tool. Kemudian dengan subselection tool sorot gambar kedua ikan dan pilih modify  convert to symbol dan tuliskan namanya tween 1. Kemudian pilih insert  classic tween, lalu doubleclick gambar ikan tersebut untuk masuk ke lembar kerja classic tween. Pada lembar kerja classic tween ikan, buatlah 2 buah layer, yaitu layer ikan dan layer gelembung. Pada layer ikan, berisi gambar ikan yang telah digambar sebelumnya, dan di layer gelembung gambarlah di dekat masing-masing mulut ikan 3 buah gelembung yang ukurannya berbeda-beda. Pada layer ikan, buatlah keyframe pada frame 1, 3, 6, 11, 13, 16, yang masing-masing keyframe, ikan digeser sedikit demi sedikit dan di-edit mata dan ekornya sehingga ikan terlihat berenang. Untuk layer gelembung, buatlah 16 keyframe per 1 detik, di mana pada setiap frame nya gelembung bergerak makin keatas kadang mengecil, kadang membesar, sehingga terlihat lebih hidup. Untuk membantu menyesuaikan gerak gelembung dengan gerak ikan, gunakan onion skin yang terdapat dibawah susunan frame.Setelah selesai, doubleclick gambar untuk kembali ke halaman kerja utama. Universitas Sumatera Utara 6. Selanjutnya pada layer tombol, akan diberi 2 buah tombol yang menuju ke halaman berikutnya atau ke luar. Pertama-tama Pada layer tombol pilih insert  new symbol  buat nama simbol “NEXT” dan type nya button, selanjutnya klik OK maka akan langsung masuk ke lembar kerja button.Kemudian dapat dilihat ada 4empat buah nama frame dalam pembuatan sebuah tombol, yaitu up, over, down, hit, dimana up adalah kondisi di mana tombol sama sekali belum disentuh, over adalah tampilan tombol saat disentuh kursor belum diklik yaitu perubahan warna tombol, down adalah kondisi saat tombol diklik, dan hit untuk menunjukkan area dimana ketika kursor mendekati area tersebut, tombol langsung aktif. 7. Pertama-tama pada frame up, gambarlah sebuah bentuk oval dengan oval tool warna line nya none, dan warna fill nya radial gradient warna biru. Kemudian ketikkan tulisan “NEXT” di tengah-tengah bentuk oval tersebut dengan semuanya huruf kapital dan warna putih. Kemudian pada frame over klik frame tersebut dan tekan F6, klik gambar tombol dan ganti gradasi warnanya pada panel color and swatches menjadi lebih muda. Setelah itu klik pada frame down dan tekan F6 dua kali untuk mengisi keyframe pada frame down dan hit. Pada frame down, sorot gambar dengan free transform tool, kemudian perkecil ukuran gambar secukupnya, lalu pindah ke frame hit. Pada frame ini, gambarkan sebuah segiempat yang mengelilingi gambar tombol dengan line color warna biru sesuai warna tombol dan fill color none. Setelah selesai, tekan Ctrl+E untuk kembali ke lembar kerja utama dan tombol tersebut secara otomatis tersimpan pada library. 8. Selanjutnya pada panel library, klik icon tombol next, lalu klik kanan dan pilih duplicate dan beri nama “EXIT” dengan type nya button. Kemudian doubleclick simbol “EXIT” tersebut untuk mengeditnya. Gantilah nama “NEXT” yang ada pada semua layer tombol menjadi “EXIT”, lalu tekan Ctrl+E untuk kembali ke Universitas Sumatera Utara lembar kerja utama dan tombol tersebut secara otomatis tersimpan di panel library. 9. Selanjutnya susunlah tampilan utama agar terlihat baik, yaitu letak ikan, dan tombol disesuaikan dengan background. Ambil semua gambar yang dibutuhkan di panel library. 10. Simpan file dengan nama depan.swf

3.2 Mendesain Menu Utama