Rabu, 21 Oktober 2009

Perbedaan Gambar

Kerangka game yang akan kita buat kali ini adalah perbedaan gambar. Dalam kerangka game ini kita akan membandingkan gambar A dengan gambar B. Cara memainkannya sangat mudah, apabila pada gambar bagian A berbeda dengan gambar bagian B, maka tekan bagian yang berbeda pada gambar bagian A tersebut.

1. Buatlah sebuah flash document.

2. Buatlah 1 buah static text yang bertuliskan Carilah perbedaan yang terdapat pada gambar A dengan yang ada di gambar B. Klik langsung bagian gambar A yang menurut anda berbeda dengan bagian di gambar B.

3. Buatlah 2 buah objek seperti di bawah ini :

gambar-objek

4. Buatlah sebuah lingkaran dengan garis berwarna hitam dan bagian dalam lingkaran berwarna putih alpha 10%.

5. Seleksi lingkaran 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.

6. Klik kanan movie clip lingkaran di stage kemudian pilih Edit untuk masuk ke dalam stage movie clip lingkaran.

7. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1
2
//menghentikan frame agar tidak bergerak ke frame berikutnya
stop();

8. Klik kanan frame 1 dan pilih Copy Frames. Klik kanan frame 2 dan pilih Paste Frame.

9. Ubah warna garis lingkaran di frame 2 menjadi berwarna merah. Jika sudah tekan Ctrl+E untuk kembali ke stage scene 1.

10. Seleksi movie clip lingkaran di stage kemudian tekan Ctrl+D sebanyak 3 kali sehingga terdapat 4 buah movie clip lingkaran.

11. Seleksi movie clip lingkaran pertama dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran1 sebagai instance name.

12. Berikan instance name pada lingkaran yang lain sesuai nomornya. Sehingga di stage terdapat 4 buah movie clip yang masing-masing berinstance name lingkaran1, lingkaran2, lingkaran3, lingkaran4.

13. Atur posisi 4 buah movie clip lingkaran tadi seperti gambar di bawah ini :

letak-movie-clip

14. Jika ukuran movie clip lingkaran terlalu besar maka kecilkanlah dengan menggunakan Free Transform Tool.

15. Buatlah 3 buah static text masing-masing bertuliskan A, B, perbedaan lagi.

16. Buatlah sebuah dynamic text dan pada panel properties masukkan jumlah sebagai Var.

17. Buatlah sebuah dynamic text dengan tulisan RESET dan pada panel properties aktifkan tombol Show border around text.

18. Seleksi dynamic text bertuliskan RESET dan tekan F8. Pada panel yang muncul masukkan reset_btn sebagai name dan button sebagai type lalu tekan ok.

19. Seleksi button reset_btn dan pada panel properties masukkan reset_btn sebagai instance name.

20. Atur letak seluruh objek yang dibuat seperti gambar di bawah ini :

letak-objek-frame-1

21. Klik tombol Insert layer pada timeline sehingga memunculkan layer baru bernama Layer 2. Klik dan drag Layer 2 ke bawah sehingga berada di bawah layer 1

22. Klik frame 1 layer 2 dan buatlah sebuah invisible button dengan panjang dan lebar sama dengan panjang dan lebar kotak yang memuat gambar A.

23. Letakkan invisible button tersebut tepat di tengah-tengah gambar A.



24. Klik frame 1 layer 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
//membuat variable jumlah dengan nilai 4
jumlah = 4;
//membuat variable i dengan nilai i=1, i=2, i=3, i=4
for (i=1; i<=4; i++) {
//nilai transparansi lingkaran+i menjadi 0
_root["lingkaran"+i]._alpha = 0;
//ketika lingkaran+i ditekan
_root["lingkaran"+i].onPress = function() {
//jika lingkaran+i berada di frame 1
if (this._currentframe == 1) {
//variable jumlah dikurangi 1
jumlah--;
//nilai transparansi lingkaran+i menjadi 100
this._alpha = 100;
//mainkan frame 2 lingkaran+i
this.gotoAndStop(2);
}
};
}
//ketika reset_btn ditekan
reset_btn.onPress = function() {
//membuat variable i dengan nilai i=1, i=2, i=3, i=4
for (i=1; i<=4; i++) {
//mainkan frame 1 lingkaran+i
_root["lingkaran"+i].gotoAndStop(1);
//nilai transparansi lingkaran+i menjadi 0
_root["lingkaran"+i]._alpha = 0;
//nilai variable jumlah menjadi 4
jumlah = 4;
}
};

25. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

Tidak ada komentar:

Posting Komentar