Teknik Animasi Tutorial Membuat "Game Perhitungan" dengan Adobe Flash

Tutorial Game Perkalian Sederhana

Buatlah 3 buah dynamic text yang masing-masing Var diberi nama angka1, angka2, dan respon di bagian bawah

Buatlah 1 buah input text yang Var diberi nama jawaban

Buatlah 2 buah button yang masing-masing diberi nama tombol_cek dan tombol_reset

Buatlah lambang perhitungan (sesuai keperluan, jika gamenya perkalian maka pakai lambang * ) dan = yang masing-masing di group

Berikan actionscript berikut pada tombol_cek

on (release) {

                if (jawaban == angka1*angka2) {

                                respon = "benar";

                } else {

                                respon = "salah";

                }

}

Berikan actionscript berikut pada tombol_reset

on (release) {

                angka1 = random(10);

                angka2 = random(10);

                jawaban = "";

                respon = "";

}

Berikan actionscript berikut pada frame layer

angka1 = random(10);

angka2 = random(10);

random(10) berarti mengacak angka antara 0-9.

Kemudian pada setiap dynamics text, uncheck list auto kern, setelah itu klik kolom jawaban yang bertuliskan Max Character dengan jumlah karakter yang ingin anda sesuaikan. 

Terakhir test movie dengan menekan CTRL+ENTER.

Isi jawaban di kolom jawaban dan klik tombol cek untuk mengecek benar atau salah jawaban anda.

Catatan : Untuk membuat perhitungan penjumlahan, pembagian atau pengurangan, anda tinggal mengganti actionscript di tombol cek dengan lambang + untuk penjumlahan, / untuk pembagian dan - untuk pengurangan.

Teknik Animasi (Tutorial Membuat "JAM ANALOG" dengan Adobe Flash)

Jam Analog

Pada kali ini kita akan mempelajari cara membuat sebuah jam analog. Tampilan jam analog yang akan kita buat di sini masih sederhana. Anda dapat mengembangkannya dengan memperbaiki bagian grafiknya. Sehingga nantinya jam akan terlihat lebih bagus lagi.

Pertama-tama buatlah background pada layer 1 sesuai dengan keinginan anda (Anda bisa memilih warna background, ataupun menambahkan tulisan), seperti gambar di bawah ini:

Kemudian tambahkan layer dan buatlah sebuah gambar seperti di bawah ini. Saya menggunakan gambar jam analog png dari google, anda juga dapat menggunakan Rectangle tool (Oval), text tool, dan panel transform untuk membuatnya

Untuk garisnya saya akan membuat ukurannya seperti ini : garis jam lebih pendek dari garis menit, garis menit lebih pendek dari garis detik, garis detik lebih panjang dari garis jam dan menit. Anda dapat mengubah ukurannya sesuai keinginan anda

Buatlah tiga buah garis seperti gambar di bawah ini:

Seleksi garis yang paling kecil, kemudian tekan F8. Pada panel yang muncul masukkan jam_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok

Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jam_mc sebagai instance name

Seleksi garis kedua (garis yang tidak terlalu panjang), kemudian tekan F8. Pada panel yang muncul masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok

Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan menit_mc sebagai instance name

Seleksi garis ketiga (garis yang tidak terlalu panjang), kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok

Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan detik_mc sebagai instance name

Letakan movie clip jam_mc di tengah lingkaran yang kita buat sebelumnya

Selanjutnya letakan movie clip menit_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc berada)

Lalu letakan juga movie clip detik_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc dan menit_mc berada)

Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1  //perintah yang dijalankan ketika frame dimainkan
2  onEnterFrame = function () {
3  //membuat variable waktu sebagai date object
4  waktu = new Date();
5  //membuat variable jam dengan nilai sama dengan jam pada komputer
6  jam = waktu.getHours();
7  //membuat variable menit dengan nilai sama dengan menit pada komputer  
8  menit = waktu.getMinutes();
9  //membuat variable detik dengan nilai sama dengan detik pada komputer
10 detik = waktu.getSeconds();
11  //digunakan jika komputer menggunakan sistem 12 jam
12  //jika nilai variable jam lebih dari 12 maka akan dikurangi 12
13  if (jam>12) {
14  jam -= 12;
15  }
16  //movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang  ditambah
17  nilai variable menit di bagi 2
18  jam_mc._rotation = jam*30+(menit/2);
19  //movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6
20  menit_mc._rotation = menit*6;
21  //movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6
22  detik_mc._rotation = detik*6;
23  };

Tekan Ctrl+Enter untuk melihat hasilnya.

Teknik Animasi (Tutorial Membuat "REVOLUSI BUMI DAN BULAN" dengan Adobe Flash)

Revolusi Bumi dan Bulan

Tutorial ini adalah lanjutan dari revolusi bulan. Sebelumnya kita membuat bulan yang mengitari bumi dalam tampilan 3d. Kali ini kita akan membuatnya dalam tampilan 2d. Tetapi kita tidak hanya akan membuat bulan mengitari bumi tetapi juga buminya mengitari matahari. Cara membuatnya masih sama dengan membuat revolusi bulan yaitu dengan menggunakan motion guide.

Pertama-tama buatlah atau insert background pada layer bg sesuai dengan keinginan anda (Anda bisa memilih warna background, ataupun menambahkan tulisan), seperti gambar di bawah ini:

Tekan Ctrl+F8 untuk memunculkan kotak dialog Create New Symbol. Masukkan revolusi bulan sebagai Name dan Movie clip sebagai Typenya lalu tekan OK

Anda akan masuk ke dalam stage movie clip revolusi bulan. Masukkan 2 buah layer baru sehingga timeline akan tampil seperti di bawah ini:

Klik Layer 1, kemudia Insert gambar Bumi

Klik Layer 3, buatlah sebuah garis lingkaran (berfungsi sebagai jalur bulan) yang lebih besar dari bentuk Bumi di Layer 1. Hilangkan sedikit garis di bagian atas garis lingkaran sehingga garis lingkaran bagian atas tersebut terpisah.

Klik Layer 2 lalu masukan gambar Bulan. Seleksi lingkaran kecil ini dan tekan F8

Pada kotak dialog yang muncul masukkan bulan sebagai Name dan Movie clip sebagai Type lalu tekan OK. Letakkan movie clip bulan ini ke ujung garis lingkaran bagian kiri di Layer 3 (titik registration movie clip bulan harus berada tepat di ujung garis).

Letak movie clip bulan di frame 1

Klik kanan frame 31 Layer 3 dan pilih Insert Frame

Kilk kanan frame 31 Layer 2 dan pilih Insert Keyframe. Ubah letak movie clip bulan di frame 31 Layer 2 ke ujung garis lingkaran bagian kanan di Layer 3 (titik registration movie clip bulan harus berada tepat di ujung garis)

Klik kanan frame 1 Layer 2 dan pilih Create Motion Tween

Klik kanan frame 31 Layer 3 dan pilih Remove Frame

Kilk kanan frame 30 Layer 2 dan pilih Insert Keyframe

Klik kanan frame 31 Layer 2 dan pilih Remove Frames

Klik kanan frame 30 Layer 1 dan pilih Insert Frame

Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 ke Layer 3. Maka tampilannya akan seperti gambar di bawah ini:

Jika sudah tekan Ctrl+E untuk kembali ke stage Scene 1

Masukkan 3 buah layer baru sehingga timeline akan tampil seperti di bawah ini:

Klik Layer 1 dan masukanlah gambar Matahari

Klik Layer 3 dan buatlah sebuah garis lingkaran (berfungsi sebagai jalur bumi) yang lebih besar dari lingkaran di Layer 1. Hilangkan sedikit garis di bagian atas garis lingkaran sehingga garis lingkaran bagian atas tersebut terpisah.

Klik Layer 2 agar anda aktif di layer tersebut kemudian bukalah panel Library dengan menekan Ctrl+L pada keyboard. Drag movie clip revolusi bulan ke stage pada Layer 2 frame 1. Letakan movie clip ini ke ujung garis lingkaran bagian kiri di Layer 3 (titik registration movie clip revolusi bulan harus berada tepat di ujung garis)

Klik kanan frame 120 Layer 1 dan pilih Insert Frame

Klik kanan frame 121 Layer 3 dam pilih Insert Frame

Klik kanan frame 121 Layer 2 dan pilih Insert Keyframe. 

Ubah letak movie clip revolusi bulan di frame 121 Layer 2 ke ujung garis lingkaran bagian kanan di Layer 3 (titik registration movie clip bulan harus berada tepat di ujung garis)

Klik frame 1 Layer 2 dan pilih Create Motion Tween

Klik kanan frame 120 Layer 2 dan pilih Insert Keyframe

Klik kanan frame 121 Layer 2 dan pilih Remove Frames

Klik kanan frame 121 Layer 3 dan pilih Remove Frames

Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 dengan Layer 3

Terakhir Test Movie dengan menekan Ctrl+Enter. Maka akan tampil hasil seperti gambar di bawah ini:

Teknik Animasi (Tutorial Membuat "REVOLUSI BULAN" dengan Adobe Flash)

Revolusi Bulan

Kali ini kita akan membuat animasi bulan mengitari bumi. Animasi ini menggunakan Motion Guide dengan sedikit tambahan.

Pertama-tama buatlah atau insert background pada layer bg sesuai dengan keinginan anda (Anda bisa memilih warna background, ataupun menambahkan tulisan), seperti gambar di bawah ini:

Buatlah 4 buah layer baru dengan mengklik tombol Insert Layer untuk memasukan layer baru. Pastikan posisi masing-masing layer seperti gambar di bawah ini:

Pastikan anda aktif di Layer 1. Insert gambar Bumi dan tempatkan di tengah-tengah stage. Seleksi seluruh lingkaran tadi dan tekan Ctrl+C untuk mengcopy lingkaran tersebut

Klik Layer 4 agar anda aktif di layer tersebut. Setelah anda berada di Layer 4, klik kanan stage dan pilih Paste in Place

Klik Layer 3 agar anda aktif di layer tersebut. Gambarlah sebuah garis berbentuk oval seperti di bawah ini

Hilangkan sedikit garis di bagian atas garis oval tersebut sehingga akan ada 2 ujung di garis oval tersebut

Klik Layer 2 agar anda aktif di layer tersebut. Masukan gambar bulan di stage Layer 2 ini

Seleksi lingkaran kecil tersebut dan tekan F8. Pada kotak dialog yang muncul masukan bulan sebagai Name dan Movie Clip sebagai type lalu tekan OK

Tempatkan movie clip ini di ujung garis oval sebelah kiri (pastikan titik registration movie clip ini berada di ujung garis)

Klik kanan frame 70 Layer 3 dan pilih Insert Frame

Klik kanan frame 70 Layer 2 dan pilih Insert Keyframe. Ubah letak movie clip di frame 70 layer 2 ke ujung garis oval bagian kanan (pastikan titik registration movie clip ini berada di ujung garis)

Klik kanan frame 1 Layer 2 dan pilih Create Motion Tween

Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 ke Layer 3

Klik kanan frame 30 Layer 1 dan pilih Insert Keyframe

Klik kanan frame 63 dan pilih Insert Frame

Hapus gambar Bumi di frame 1 Layer

Klik kanan frame 70 Layer 4 dan pilih Insert Frame

Klik kanan frame 64 Layer 4 dan pilih Insert Keyframe

Klik kanan frame 30 Layer 4 dan pilih Insert Keyframe. Hapus lingkaran besar di frame 30 Layer 4 ini

Sehingga di Timeline akan tampak seperti di bawah ini:

Gambar Timeline 

Gambar Full Screen

Tekan Ctrl+Enter untuk melihat hasilnya.

Teknik Animasi (Tutorial Membuat "MOTION SHAPE" dengan Adobe Flash)

MOTION SHAPE

Tween Shape berguna menganimasikan objek berjenis shape tanpa harus merubahnya menjadi symbol. Berikut ini adalah contoh sedeharnanya :

Pertama-tama buatlah background pada layer bg sesuai dengan keinginan anda (Anda bisa memilih warna background, ataupun menambahkan tulisan). Lalu insert frame pada layer satu (bg) frame 35, seperti gambar di bawah ini:

Tambahkan layer (layer 1) untuk membuat objek, buat sebuah lingkaran pada frame 1 dan letakan tepat di tengah-tengah stage

Pilih frame 35 pada layer 1 lalu klik kanan, kemudian pilih Insert Blank Keyframe, gambarlah sebuah persegi panjang pada frame 35 ini dan letakan tepat di tengah-tengah stage

Klik frame 1 layer 1 lalu buka panel properties (tekan CTRL+F3). Ubah Tween dari None menjadi Shape

Terakhir test movie dengan menekan Ctrl+Enter.

Teknik Animasi (Tutorial Membuat "MOTION GUIDE" dengan Adobe Flash)

MOTION GUIDE

Motion guide adalah salah satu fasilitas dari flash yang digunakan untuk membuat animasi motion tween bergerak sesuai jalur (guide) yang telah kita buat. Hasil animasi motion guide ini selain halus (karena motion tween) juga lebih teratur karena animasi bergerak sesuai jalur yang kita buat. 

Buatlah sebuah flash document

Pertama-tama buatlah background pada layer 1 sesuai dengan keinginan anda (Anda bisa memilih warna background, ataupun menambahkan tulisan), seperti gambar di bawah ini:

Buatlah sebuah lingkaran warnanya sesuai dengan selera Anda, seperti pada gambar di bawah ini:

Seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan bola sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok

Klik sekali tombol Add Motion Guide pada timeline sehingga di timeline muncul layer guide baru bernama Layer 2

Tambahkan layer lagi untuk membuat pola garisnya. Pastikan anda aktif di layer ini kemudian buatlah sebuah garis di stage seperti gambar di bawah ini:

Letakkan bagian tengah movie clip bola pada ujung garis bagian kiri seperti gambar di bawah ini:

Klik kanan frame 50 Layer 2 dan pilih Insert Frame

Klik kanan frame 50 Layer 1 dan pilih Insert Keyframe

Ubah letak movie clip bola pada frame 50 ke ujung garis bagian kanan. Pastikan bagian tengah movie clip bola yang berada di ujung garis tersebut seperti gambar di bawah ini:

Klik kanan frame 1 Layer 1 dan pilih Create Motion Tween

Tekan Ctrl+Enter untuk melihat hasilnya.

Teknik Animasi (Tutorial Membuat "ANIMASI FRAME BY FRAME" dengan Adobe Flash)

Animasi frame by frame

Animasi frame by frame ini mudah untuk membuatnya, hanya perlu membuat objek yang berbeda-beda pada setiap framenya. Tapi semakin banyak frame yang kita gunakan maka. Swf yang kita buat akan berjalan lambat. Berikut contoh animasi frame by frame yang saya buat.

Pertama-tama buka aplikasi Adobe Flash, lalu pilih menu File, New.

Kemudian buatlah background pada layer 1 sesuai dengan keinginan anda (Anda bisa memilih warna background, ataupun menambahkan tulisan). Lalu insert frame pada layer satu frame 10, seperti gambar di bawah ini:

Tambahkan layer lagi untuk membuat garis sebagai alas untuk nanti bola memantul. Sama seperti layer background, lakukanlah insert frame pada frame 10, lalu gambarlah garis seprti gambar di bawah ini:

Tambahkan layer lagi untuk objek bola. Anda bisa membuat bola langsung dengan memilih Rectangle Tools (Oval) pada aplikasi Flash atau bisa juga dengan insert gambar yang sudah ada. Sama seperti pada layer di atas, lakukanlah insert frame di frame 10 layer ini. 

Dan lakukanlah insert keyframe pada frame 2 sampai 9, karena pada setiap frame bola akan berpindah posisi. Seperti pada frame 1 layer ini, letakanlah bola pada posisi yang sama seperti gambar di bawah ini:

Kemudia lakukan hal serupa pada frame 2 dan frame selanjutnya hingga bola menyentuh garis.

Pada frame yang telah membuat bola menyentuh garis, maka ukuran bola dapat dibuat oval dengan menggunakan Free Transform Tool pada Tools Panel.

Lalu, buat bola kembali naik dengan cara u seleksi objek bola dengan memilih menu Free Transform Tool pada Tools Panel (dapat menekan Q atau F) lalu jika ingin membuat jarak dekat, tekan tombol Caps Lock dan Panah Ke Atas pada keyboard, ataupun untuk jarak jauh, tekan tombol Shift dan Panah Ke Atas pada keyboard.

Terakhir test movie dengan menekan Ctrl+Enter.