Tutorial Flash Mini Games “Chased by a Monster”

Posted by: Eka Prasetya Adhy Sugara in Desain Animasi & Multimedia, Tutorial & Tips June 27, 2012 26 Comments 832 Views

Bismillah, salam super para PalComSter sekalian, mudah-mudahan kita semua selalu dalam lindungan-Nya, aamiin.

Pada kesempatan ini, saya ingin membagi sedikit pengetahuan saya mengenai Flash Action Script dalam pembuatan sebuah mini games. Mini games ini saya beri nama Chased by a Monster. Pada tutorial ini, penulis mengharapkan anda telah memiliki dasar–dasar dalam pembuatan animasi dengan flash dan sedikit pengetahuan tentang dasar–dasar action script agar tidak terlalu sulit bagi anda untuk mengikuti tutorial ini. Oke, berikut langkah–langkah dalam pembuatan gamenya.

Langkah 1
Buka aplikasi Adobe Flash CS3, buatlah sebuah dokumen flash action script 2.0.

Langkah 2

Pada frame pertama, buatlah objek teks “mini games”, kik kanan objek teks, klik pilihan Convert to Symbol, pilih  Movie Clip, beri nama mini games.

Langkah 3

Klik dua kali objek movie clip tersebut sehingga masuk ke mode pengeditan movie clip, buatlah animasi teks membesar dengan memanfaatkan motion tween.

Mode pengeditan movie clip mini games

Animasi motion tween

Langkah 4

Klik kanan pada frame terakhir, pilih action, masukkan script stop(); agar animasi berhenti pada frame tersebut.

Langkah 5

Kembali ke tampilan Scene 1, buatlah teks aturan permainan, convert ke movie clip dengan nama aturan, klik dua kali objek movie clip tersebut, lalu buat animasi opacity fade in dengan motion tween, tambahkan action script stop(); pada akhir framenya.

Mode pengeditan movie clip aturan

Timeline movie clip aturan

Langkah 6

Ulangi langkah 5 di atas untuk teks isi dari aturan permainan.

Langkah 7

Import sebuah gambar monster.jpg dari menu File -> Import -> Import to Library, penulis menggunakan Icon berikut :

Icon monster

Langkah 8

Letakkan gambar ke stage dengan men-drag gambar tersebut dari jendela library, convert gambar tersebut menjadi movie clip, klik dua kali objek tersebut, buat animasi yang sama seperti teks sebelumnya.

Timeline icon monster

Langkah 9

Buat objek static teks play, convert to simbol button, klik kanan simbol tersebut, pilih action lalu masukkan script untuk pindah ke frame 2 ketika tombol ditekan.

Script tombol play

Langkah 10

Klik kanan pada frame pertama, pilih action, masukkan script stop(); agar animasi berhenti pada frame tersebut ketika dimainkan.

Script pada frame pertama

Langkah 11

Berikut tampilan frame pertama.

 Tampilan frame pertama

Langkah 12

Insert keyframe baru pada frame dua, import ke library dua gambar icon takut.gif dan monster.gif, secara otomatis flash akan menganggap icon berekstensi gif sebagai movie clip, drag kedua icon tsb ke stage, beri nama instance takut dan monster pada jendela properties.

 

Instance name movie clip takut dan monster

Langkah 13

Masih di keyframe tersebut, buat sebuah objek dynamic text yang akan menampilkan timer detik, beri nama variabel detik.

Dynamic text dengan nama variabel detik

Langkah 14

Klik kanan pada frame kedua tersebut, pilih action lalu masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

//membuat variabel detik dan fps dan menghentikan frame   detik = 30;   fps = 0;   stop();   onEnterFrame = function() {   //fungsi waktu mundur   fps++;   if (fps==12) {   detik -= 1;   fps = 0;   }   //fungsi utk menggerakkan icon takut   if (Key.isDown(37)) {   takut._x -= 20;   } else if (Key.isDown(39)) {   takut._x += 20;   }   if (Key.isDown(38)) {   takut._y -= 20;   } else if (Key.isDown(40)){   takut._y += 20;   }   //fungsi ketika icon takut keluar stage   if (takut._x>=550) {   takut._x=0;   } else if (takut._x=400) {   takut._y=0;   } else if (takut._ytakut._x) {   monster._x -= 10;   } else if (monster._xtakut._y) {   monster._y -= 10;   } else if (monster._y monster._y += 10;   }   //fungsi kondisi ketika menang atau kalah   If (detik == 0) {   gotoAndStop(3);   } else if (monster.hitTest(takut)) {   gotoAndStop(4);   detik = -1;   }   }

Langkah 15
Berikut tampilan frame kedua :

Tampilan frame kedua

Langkah 16

Tambahkan dua buah keyframe baru pada frame ketiga dan keempat, pada frame ketiga buatlah teks “selamat, anda lolos” , sebuah icon selamat.gif dan sebuah tombol replay, ketikkan script berikut pada tombol replay.

1 2 3 4 5

<strong><em>on(press) {</em></strong>   <strong><em>gotoAndStop(1);</em></strong>   <strong><em>}</em></strong>

 Tampilan frame 3

Langkah 17

Sedangkan pada frame keempat, buatlah teks “maaf, anda gagal”, sebuah icon ngakak.gif dan juga tombol replay, ketikkan script berikut untuk tombol replay.

1 2 3 4 5

<strong><em>on(press) {</em></strong>   <strong><em>gotoAndStop(1);</em></strong>   <strong><em>}</em></strong>

Tampilan frame 4

Langkah 18

Hasil akhir dapat dilihat pada file swf berikut, Selamat Mencoba !