Jumat, 11 Januari 2013

Membuat Game Flash Sederhana



Baiklah, di hari yang terlalu cerah ini ( Panas ) PutuBlog18 akan memposting tentang cara membuat Game dari Flash. Walaupun sederhana, tapi lumayan bagus kok.
Software yang saya gunakan adalah Macromedia Flash. kalau Adobe Flash belum pernah nyoba :) , Untuk contohnya bisa lihat Disini
Baiklah,, Langsung ke tutorial saja yaa..
1. Buka Macromedia Flash Anda, dan buat document baru.
2. Buat tulisan “QUIZ PUTUBLOG18″ Lalu buat sebuah Persegi, Ukuran Bebas.
Flash-1
3. Buat Dynamic Text ( ada di bagian bawah sebelah kiri ), Tulis angka “00″
Tulis di Variablenya “angka_1″
4. Copy dynamic Text yang tadi, Lalu paste, dan ubah Variablenya menjadi “angka_2″
5. Buat 2 Static Text, tulis tanda “+” dan “=” .
6. Buat persegi kecil, dan Buat lagi input text diatas persegi tersebut. Tulis angka “00″
dan ubah Variablenya Menjadi “jawab” dan ubah Instance Name menjadi
“answerBox”
Flash-2
7. buat 2 buah tombol di bawah kotak merah masing-masing dengan nama tombol
random dan tombol check. Lalu Convert masing-masing menjadi button dengan
menekan “F8″ lalu pilih “button”
8. Sekarang kita buat Apa tindakannya jika jawaban benar atau salah..
pertama, buat Tulisan “Selamat Jawaban Anda Benar” dari Static Text di Bawah
pertanyaan berikut. atau Bebas terserah anda. Lalu jadikan tulisan sebagai movie clip
dengan menekan”F8″ lalu pilih movie clip. Ubah Instance Name menjadi
“true_answer”.
9. Masuk ke dalam Movie Clip anda dengan menekan tulisan tersebut 2 kali. Klik frame 1,
tahan dan geser ke frame 2, sehingga tidak ada objek di frame 1, lalu klik frame 10,
klik kanan dan pilih insert keyframe. kembali ke frame 1 tekan tombol F9 dan
masukkan kode berikut:
stop();
Flash-3
10. Buat lagi Static Text bertulisan “Jawaban Anda Salah, Coba Lagi” , Lalu Lakukan hal yang sama seperti nomor 8 dan 9. Tetapi ubah Instance Name menjadi “wrong_answer”.
11. Kembali ke Stage utama / Layer Utama. Klik Frame 1, Lalu copy code Berikut ini.
problem();
function problem() {
var _loc1 = 2+random(8);
var _loc2 = 2+random(8);
angka_1 = Math.floor(_loc1);
angka_2 = Math.floor(_loc2);
jawab = “”;
Selection.setFocus(_root.answerBox);
stage.focus = _root.answerBox;
_root.answerBox.setSelection(0, 1);
}
function check_answer() {
if (angka_1+angka_2 == jawab) {
true_answer.play();
problem();
} else {
wrong_answer.play();
Selection.setFocus(_root.answerBox);
}
}
12. Klik tombol “Random” lalu masukkan kode berikut ini
on (press) {
problem();
}
13. Klik tombol “Check” lalu masukkan kode berikut ini
on (press) {
check_answer();an
}
Contoh lain dengan game flash :
Berikut ini kita akan membuat sebuah game pukul tikus. Dimana akan muncul sebuah tikus secara acak pada enam buah lubang yang ada. Klik kepala tikus tersebut untuk memukulnya dan score pun akan bertambah. Game yang dibuat kali ini masih berupa prototype jadi gambar-gambar yang dibuat masih terkesan sederhana. Anda dapat berkreasi melalui tutorial ini dengan menmbahkan script atau mengganti gambar-gambarnya sehingga menjadi game yang sempurna.
1. Buatlah sebuah flash document.
2. Buatlah sebuah objek seperti gambar di bawah ini :
kotak
3. Buatlah sebuah lingkaran berbentuk oval seperti gambar di bawah ini :
oval
4. Seleksi lingkaran berbentuk oval tersebut dan tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
5. Seleksi movie clip lingkaran di stage dan tekan Ctrl+D sebanyak 5 kali.
6. Seleksi salah satu movie clip lingkaran dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran1 sebagai instance name. Lakukan hal yang sama pada movie clip lingkaran lainya dengan masing-masing instance name lingkaran2, lingkaran3, lingkaran4, lingkaran5, lingkaran6
7. Buatlah sebuah static text bertuliskan Jumlah Terpukul.
8. Buatlah sebuah dynamic text dan pada panel propertiesnya masukkan jumlah sebagai var
9. Tempatkan seluruh objek yang dibuat tadi seperti gambar di bawah ini :
letak
10. Buatlah sebuah palu seperti gambar di bawah ini :
palua
11. Seleksi palu tersebut dan tekan F8. Pada panel yang muncul masukkan palu sebagai name dan movie clip sebagai type lalu tekan ok. Seleksi movie clip palu di stage dan pada panel properties masukkan palu sebagai instance name.
12.Klik kanan movie clip palu di stage dan pilih Edit maka anda akan masuk ke dalam stage movie clip palu.
13. Sesuaikan letak dan rotasi palu pada frame 1 seperti gambar di bawah ini :
palub
14. Klik kanan frame 2 dan pilih Insert Keyframe. Sesuaikan letak dan rotasi palu seperti gambar di bawah ini :
paluc
15. Klik kanan frame 6 dan pilih Insert Keyframe.
16. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
stop();
17. Klik frame 6 dan pada panel actions yang muncul masukkan script berikut :
1
gotoAndStop(1);
18. Tekan Ctrl+E untuk kembali ke stage scene 1. Letakkan movie clip palu di luar stage.
19. Buatlah sebuah kepala tikus seperti gambar di bawah ini :
tikus1
20. Seleksi kepala tikus tersebut dan tekan F8. Pada panel yang muncul masukkan tikus sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
21. Klik kanan movie clip tikus di stage dan pilih Edit maka anda akan masuk ke dalam stage movie clip tikus.
22. Klik kanan frame 2 dan pilih Insert Keyframe. Ubah mata tikus di frame 2 menjadi X sehingga berbentuk seperti gambar di bawah ini :
tikus2
23. Klik kanan frame 7 dan pilih Insert Blank Keyframe.
24. Seleksi frame 1 dan panel actions masukkan script berikut :
1
stop();
25. Seleksi frame 7 dan pada panel actions masukkan script berikut :
1
stop();
26. Tekan Ctrl+E untuk kembali ke stage scene 1. Hapus movie clip tikus dari stage kemudian tekan Ctrl+L. Pada panel library yang muncul, klik kanan movie clip tikus dan pilih Linkage.
27. Pada panel yang muncul berikan tanda contreng/centang pada Export for ActionScipt dan masukkan tikus sebagai identifier alalu tekan ok.
28. Klik frame 1 dan pada panel actions 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
//membuat variable jumlah dengan nilai 0
jumlah = 0;
//membuat variable waktu_muncul dengan nilai 0
waktu_muncul = 0;
//membuat fungsi buat_tikus
function buat_tikus() {
 //membuat variable nomor dengan nilainya sama dengan nilai acak 5 ditambah 1
 nomor = random(6)+1;
 //membuat variable tikus dengan memasukan movie clip berlinkage tikus
 tikus = attachMovie("tikus", "tikus", 2, {_x:_root["lingkaran"+nomor]._x, _y:_root["lingkaran"+nomor]._y});
 tikus.onEnterFrame = function() {
  //variable waktu_muncul ditambah 1 secara terus-menerus
  waktu_muncul++;
  //jika variable waktu_muncul bernilai 12
  if (waktu_muncul == 12) {
   //mainkan frame 7 movie clip tikus
   this.gotoAndStop(7);
  }
  //jika variable waktu_muncul bernilai 25
  if (waktu_muncul == 25) {
   //hapus movie clip tikus dari stage
   removeMovieClip(this);
   buat_tikus();
   //ubah nilai variable waktu muncul menjadi 0
   waktu_muncul = 0;
  }
  //ketika movie clip mouse ditekan
  tikus.onPress = function() {
   //jika movie clip tikus berada di frame 1
   if (this._currentframe == 1) {
    //variable jumlah ditambah 1
    jumlah += 1;
    //mainkan frame 2 movie clip tikus
    this.gotoAndPlay(2);
   }
  };
 };
}
onEnterFrame = function () {
 //movie clip palu berada di posisi paling atas
 palu.swapDepths(_root.getNextHighestDepth());
 //posisi x movie clip palu sama dengan posisi x kursor mouse
 palu._x = _xmouse;
 //posisi y movie clip palu sama dengan posisi y kursor mouse
 palu._y = _ymouse;
};
//ketika mouse ditekan
onMouseDown = function () {
 //jika movie clip palu berada di frame 1
 if (palu._currentframe == 1) {
  //mainkan frame 2 movie clip palu
  palu.gotoAndPlay(2);
 }
};
//jalankan fungsi buat_tikus
buat_tikus();

29. Tekan Ctrl+Enter untuk melihat hasilnya. Klik kepala tikus yang muncul untuk memukulnya.

sumber : http://blog.politekniktelkom.ac.id

Tidak ada komentar:

Posting Komentar