PERANCANGAN SISTEM
3.2 Membuat desain halaman depan
3.3.1. Penambahan, pengurangan, perkalian, dan pembagian
Buka sebuah new flash document. Cara membuat animasi pada penambahan, pengurangan, perkalian, dan pembagian kurang lebih sama. Yang membedakan hanya pada proses penjumlahan di script dan tanda operator pada desain.
Langkah pertama untuk membuat animasi ini adalah dengan membuat dua buah input text dengan instance name dan var masing-masing ialah nilaiA dan nilaiB. buat sebuah dynamic text dengan instance name dan var njumlah. Kemudian buat tanda operator diantara text nilaiA dan nilaiB dan buatlah tanda sama dengan diantara nilaiB dan njumlah dengan static text.
Gambar tombol random dan jumlah dengan menggunakan rectangle tool dan text tool. Convert kedua tombol menjadi button dengan cara seleksi objek tombol-> klik kanan->convert to symbol->button->ok. Jangan lupa untuk memberi nama dan instance name random dan jumlah.
Gambar 3.7. contoh desain penjumlahan
Seleksi tombol random dan buka stage Action. Kemudian isikan script untuk mengacak angka pada text nilaiA dan nilaiB.
Gambar 3.8. script random angka
Klik pada tombol jumlah. Buka jendela action dan isilah script untuk menjumlah nilaiA dan nilaiB dimana hasilnya akan ditampilkan pada kotak text njumlah. Tekan ctrl+enter untuk melihat hasil.
Gambar 3.9. script penambahan, pengurangan,perkalian,pembagian
3.3.2 Akar
Membuat animasi akar memiliki cara yang sama seperti animasi sebelumnya. Yaitu dimulai dengan membuat desain. Disini kita memiliki sebuah input text untuk memasukkan nilai akar dan dynamic text untuk meletakkan jawaban serta tombol random dan jumlah.
Gambar 3.10 desain animasi akar
Script diletakkan pada tombol jumlah untuk rumus penghitungan. Sedangkan script untuk tombol random, sama seperti pada animasi penambahan, pengurangan, perkalian dan pembagian.
Gambar 3.11 script jumlah animasi akar
Statement if digunakan untuk menghindari nilai nan. Yaitu jika user menekan tombol jumlah namun teks nilaiA tempat untuk meletakkan nilai akar kosong maka flash akan mengosongkan hasil pada kotak teks njumlah. Tekan ctrl+enter untuk melihat hasil.
3.3.3 Persentase
Membuat animasi penghitungan persentase sama seperti animasi penambahan, pengurangan, perkalian, pembagian, dan akar. Hanya rumus di script pada tombol jumlah yang membedakannya. Tekan ctrl+enter untuk melihat hasil.
Gambar 3.12 script jumlah animasi persentase 3.3.4. Persegi
Langkah pertama untuk membuat animasi menghitung luas dan keliling persegi adalah dengan membuat desain terlebih dahulu. Desain yang saya buat ialah dengan meletakkan input text untuk memasukkan nilai panjang dan lebar, dynamic text untuk meletakkan nilai hasil perhitungan luas dan keliling, dan sebuah gambar persegi dengan rectangle tool dimana ukurannya dapat berubah sesuai dengan nilai panjang dan lebar yang di masukkan.
Seperti pada materi sebelumnya, kita juga meletakkan tombol hitung animasi ini. Ketika tombol hitung di tekan setelah mengisi nilai panjang dan lebar maka flash akan menghitung hasilnya sesuai dengan rumus yang diberikan pada ActionScript dan mengeluarkan hasilnya pada kotak jawaban luas dan keliling. Selain itu, kita juga
meletakkan rumus dan jalan penghitungan yang nilai-nilainya juga menyesuaikan dari nilai panjang, lebar, dan hasilnya.
Gambar 3.13 desain animasi luas dan keliling persegi
Setelah selesai mengerjakan desain, maka selanjutnya tentu menentukan script penghitungannya. Seleksi tombol hitung dan buka ActionScript untuk tombol dan masukan script berikut
Gambar 3.14 script hitung persegi
On(release) berarti, setiap tombol hitung di klik maka penghitungan pun dilakukan dengan mengambil nilai panjang dari kotak text panjang dengan variable panjang dan
nilai lebar dari kotak text lebar dengan variable lebar. Kemudian hasilnya akan dimunculkan pada kotak text luas dengan variable luas dan kotak text keliling dengan variable keliling setelah dihitung dengan rumus yang telah ditentukan. Kemudian jalan dari penghitungan akan muncul pada kotak text bernama rluas dan rkeliling.
Peletakkan statement if berfungsi untuk membatasi nilai panjang dan lebar yang diberikan. Jika nilai panjang ataupun lebar yang diberikan lebih dari 50 makan animasi flash akan tetap menuliskan angka 50. Hal ini saya lakukan agar gambar kotak tidak terlalu besar dan dapat melebihi seluruh layar animasi. Tekan ctrl+enter untuk melihat hasil.
3.3.5 lingkaran
Cara dan langkah-langkah pembuatan dari penghitungan luas dan keliling lingkaran ini hampir sama dengan animasi persegi. Yang sedikit membedakan ialah pada gambar movie clip kotak yang diganti menjadi lingkaran dengan oval tool pada desain dan pergantian rumus luas dan keliling lingkaran pada script di tombol hitung.
Gambar 3.16 script hitung animasi lingkaran
Math.PI merupakan PI dengan nilai 3,14159. Hal ini menyebabkan hasil perhitungan sedikit berbeda dengan jika kita menggunakan nilai 22/7 atau 3,14. Misalnya untuk nilai diameter 14, jika menggunakan 22/7 maka hasil luas adalah 154 sedangkan dengan Math.PI hasil luasnya ialah 153.9380400259. Maka, jika kita ingin menggunakan nilai 22/7 untuk menggenapkannya, kita hanya perlu mengganti Math.PI dengan 22/7. Tekan ctrl+enter untuk melihat hasil.
3.4 Permainan
Didalam halaman permainan terdapat 3 menu permainan yang dapat dipilih. Untuk membuat desain halaman ini saya mengambil sebuah gambar wallpaper sebagai latar dan objek beberapa kupu-kupu yang bergerak.
a. objek kupu-kupu 1
Untuk membuat objek kupu-kupu yang bergerak dan terbang, pertama buatlah sebuah bentuk bulat memanjang sebagai badan kupu-kupu. Seleksi badan kupu-kupu tersebut-> klik kanan->convert to symbol->movie clip->ok. Setelah itu klik dua kali pada movie clip tersebut hingga kita masuk ke timeline movie clip kupu-kupu.
Pada timeline kupu-kupu tambahkan 3 buah layer diatas layer1. Dan beri nama sayap, sayap2,antena.
Gambar 3.17 layer pada timeline kupu-kupu
Bentuk sayap satu dan dua pada frame 1 layer sayap dan sayap2 dengan menggabungkan beberapa line tool. Bentuk dua buah antena pada layer antenna.
Gambar 3.18 gambar kupu-kupu
Tekan f6 di frame 6 pada semua layer. Kemudian tekan f6 pada frame 3 layer sayap dan sayap2, seperti yang terlihat pada gambar 3.17, lalu ubah arah dan bentuk sayap agak meregang seperti gambar dibawah ini. Tekan ctrl+enter untuk melihat hasil kupu.
Gambar 3.19 gambar kupu-kupu pada frame 3 layer sayap b. objek kupu-kupu 2
Bentuk lagi bulat memanjang dengan bentuk memanjang dan convert menjadi movie clip dengan nama kupu2. Kemudian masuk ke timeline movie clip kupu2, buat lagi dua buah layer dibawah layer1 dan ganti namanya menjadi sayap dan sayap2. Dan tambahkan dua buah layer diatas layer1 untuk meletakkan antenna.
Gambar 3.20 layer kupu2
Gambar dua buah sayap mendatar pada frame1 layer sayap dan sayap2 serta antenna kiri dan kanan pada frame1 layer antenna dan layer 3.
Gambar 3.21 gambar kupu2
Tekan f6 pada frame5 masing-masing layer. Kemudian tekan f6 pada frame 3 layer sayap dan sayap2.
Gambar 3.22 kryframe pada masing-masing layer kupu2
Geser gambar masing-masing sayap agak serong keluar pada frame3 layer sayap dan sayap2. Sehingga terlihat sayap bergerak keatas. Tekan ctrl+enter untuk melihat hasil kupu2.
Gambar 3.23 gambar sayap pada frame3 layer sayap dan sayap2 c. Menganimasikan objek kupu-kupu
Tambahkan sebuah layer diatas layar 1. Masukkan salah satu movie kupu-kupu kedalam stage dan perkecil ukurannya. Letakkan movie kupu-kupu diluar kanan bawah stage.
Lalu klik kanan pada layer tersebut dan pilih create motion tween. Tambahkan keyframe pada frame 160 dan geser posisi kupu-kupu menjadi sebelah kiri luar stage. Klik kanan pada layer movie kupu-kupu tersebut dan pilih add motion guide. Pada layer guide gambarlah garis berkelok ke arah kupu-kupu sebelah kiri frame 160 dengan brush tool.
Lakukan hal yang sama dengan menambahkan layer-layer berikutnya. Dan tambahkan menu yang dihubungkan dengan animasi flash game.
Gambar 3.25 layer-layer pada timeline kupu-kupu
Gambar 3.26 letak kupu-kupu pada frame 1
Berikut akan dibahas tentang kuis dan permainan yang terdapat pada menu permainan.