Membuat Permainan Warna dengan Flash

Gambar 5.1. Permainan Mengenal Warna

Anda bisa membuat permainan yang menarik hanya dengan menggunakan Flash. Salah satunya adalah permainan pengenalan warna. Untuk membuat aplikasi pengenal warna seperti di atas, ikuti langkah-langkah di bawah ini:

1. Buat sebuah stage baru dengan mengklik menu File > New.

2. Klik tombol Size yang ada di dalam panel Properties.

Gambar 5.2. Menekan Tombol di Bagian Size

3. Isikan angka 1024 di kotak (width) dan 768 di kotak (height).

Gambar 5.3. Pengaturan Ukuran Stage

4. Klik Rectangle Tool dan buat objek persegi empat di dalam stage.

Gambar 5.4. Persegi Empat di dalam Stage

5. Masuklah ke dalam panel Properties dan isikan angka 1024 di kotak W, 768 di kotak H, 512 di kotak X, dan 384 di kotak Y.

Gambar 5.5. Pengaturan Ukuran Persegi Empat di dalam Stage

6. Ganti Layer 1 menjadi layer “baground” dan buat 4 buah layer baru masing-masing dengan nama “garis”, “warna”, “efek1”, dan “efek2”.

Gambar 5.6. Layer “efek1”, “efek2”, “warna”, dan “garis”

7. Kliklah Oval Tool dari dalam toolbox.

8. Buatlah objek lingkaran menggunakan tool tersebut dan beri warna merah untuk Fill sementara untuk Stroke pilih warna putih.

Gambar 5.7. Lingkaran Berwarna Merah

9. Pilih Selection Tool dan klik warna merah pada lingkaran.

10. Tekan tombol kanan mouse dan pilihlah Cut.

11. Klik layer “warna” dan tekan tombol kanan mouse pada stage lalu pilih Paste in Place.

Gambar 5.8. Memilih Opsi Paste in Place

12. Kliklah layer “efek 1” dan buat bentuk segitiga menggunakan Line Tool . Gunakan warna putih untuk garis stroke-nya.

Gambar 5.9. Segitiga Bergaris Putih yang Dibuat Menggunakan Line Tool

13. Klik Selection Tool dan lengkungkan sisi-sisi segitiga itu.

Gambar 5.10. Garis-Garis yang Dilengkungkan

14. Pilih Paint Bucket Tool dan klik warna putih.

15. Arahkan di dalam segitiga itu dan tekan tombol kiri mouse.

Gambar 5.11. Warna Putih pada Segitiga

16. Dengan menggunakan Selection Tool , pindahkan objek tersebut ke sisi kiri pada lingkaran merah.

Gambar 5.12. Meletakkan Objek Segitiga di Sisi Kiri pada Lingkaran

17. Klik Layer “efek2” dan buat lingkaran tanpa warna stroke menggunakan Oval Tool .

Gambar 5.13. Lingkaran Kecil di dalam Lingkaran Merah Besar

18. Masuklah ke dalam Color Mixer dan di bagian Type, pilihlah Radial.

Gambar 5.14. Color Mixer untuk Mewarnai Lingkaran Kecil

19. Sedangkan untuk warna gradasinya (lihat gambar di bawah ini), pilih warna putih untuk nomor 1, warna abu-abu (#bbbbbb) untuk nomor 2, dan putih lagi untuk nomor 3 dengan Alpha 0%.

Gambar 5.15. Pewarnaan Gradasi

20. Posisikan lingkaran itu di dalam lingkaran merah seperti gambar berikut ini (gunakan Selection Tool ).

Gambar 5.16. Efek Kilau pada Lingkaran Merah

21. Klik Insert Layer untuk membuat layer baru dan beri nama “bayang”.

Gambar 5.17. Layer Baru dengan Nama “bayang”

22. Klik Oval Tool dan buat lingkaran tanpa garis stroke seperti ini.

Gambar 5.18. Lingkaran Kecil di Sisi Lingkaran Merah

23. Pastikan lingkaran kecil tadi masih dalam keadaan aktif dan ubah Type menjadi Radial di dalam Color Mixer.

24. Untuk warna gradasinya, pilih warna hitam dengan alpha 27% di sisi kiri dan warna putih di sisi kanan.

Gambar 5.19. Warna Hitam (Alpha 27%) dan Putih untuk Gradasi

25. Kemudian, dengan teknik Copy > Paste gandakan lingkaran tersebut sehingga menjadi ada 8 lingkaran di dalam stage.

Gambar 5.20. Delapan Buah Lingkaran di dalam Stage

26. Buatlah layer baru dengan nama “tombol”.

Gambar 5.21. Buat Sebuah Layer Baru dengan Nama “tombol”

27. Klik Oval Tool dari toolbox.

28. Buatlah sebuah lingkaran tanpa garis tepi dan beri warna putih.

29. Posisikan berada di tengah-tengah lingkaran gradasi sebelumnya.

30. Tekan tombol kanan mouse dan pilih Convert to Symbol.

Gambar 5.22. Memilih Opsi Convert to Symbol

31. Di bagian Name, isikan nama “warna” dengan Type berjenis “button”.

Gambar 5.23. Pemberian Nama Symbol

32. Kemudian, gandakan lingkaran putih itu dengan metode Copy dan Paste. Letakkan lingkaran-lingkaran putih itu ke tengah-tengah lingkaran gradasi.

Gambar 5.24. Lingkaran-Lingkaran Putih di Tengah-Tengah Lingkaran-Lingkaran Gradasi yang Dibuat Sebelumnya

33. Pilihlah Selection Tool .

34. Klik tombol lingkaran di sisi kiri atas.

Gambar 5.25. Menyeleksi Lingkaran di Sisi Kiri Atas

35. Masuklah ke dalam panel Properties dan ubah opsi Color menjadi Tint. Kemudian, pilih warna merah. Kemudian, beri nama “merah” di bawah opsi Button.

Gambar 5.26. Pengaturan Warna untuk Lingkaran Kiri Atas

36. Klik lingkaran kiri nomor 2 dari atas dan ubah warnanya menjadi kuning (#ffff00) pada panel Properties Ketikkan nama “kuning” seperti tombol sebelumnya.

Gambar 5.27. Warna Kuning pada Lingkaran Kedua dari Kiri Atas

37. Dengan menggunakan teknik serupa, beri warna hijau (#00cc00) untuk lingkaran ketiga dari kiri atas, warna ungu (#cc33cc) untuk tombol kiri bawah, warna orange (#ff9900) untuk lingkaran kanan atas, warna biru (#0033cc) untuk lingkaran kanan atas urutan kedua, warna hitam (#000000) untuk tombol kanan atas urutan ketiga, dan warna putih (#ffffff) pada lingkaran kanan bawah.

Gambar 5.28. Warna-Warna pada Tombol

38. Klik Layer “warna”.

Gambar 5.29. Mengklik Layer “warna”

39. Tekan tombol kanan mouse pada lingkaran besar berwarna merah dan pilih Convert to Symbol.

40. Di kotak Name, ketikkan teks “bola” dan dibagian Type, pilihlah “Movie Clip”.

Gambar 5.30. Pengaturan untuk Bola Merah

41. Tekan tombol OK.

42. Buat layer baru dengan nama “teks”.

Gambar 5.31. Buat Layer Baru dengan Nama “teks”

43. Klik Text Tool dari dalam toolbox.

44. Pada panel Properties, ubah menjadi Static Text.

Gambar 5.32. Option Static Text

45. Kemudian, pilih font Arial dengan ukuran 37 point dengan warna merah.

Gambar 5.33. Pengaturan di dalam Panel Properties

46. Ketikkan teks “Merah” di samping kanan tombol merah yang berukuran kecil.

Gambar 5.34. Tombol Bertuliskan “Merah”

47. Lewat teknik yang sama, ketikkan pula teks “kuning”, “hijau”, “ungu”, “orange”, “biru”, “hitam”, dan “putih” di masing-masing tombol.

Gambar 5.35. Nama-Nama Tombol

48. Buat layer baru dengan nama “script”.

Gambar 5.36. Layer Baru dengan Nama “Script”

49. Klik frame 1 pada layer “script” dan ketikkan script di bawah ini di dalam panel Action Frame:

bolaColor = new Color(bola);

merah.onRelease = function() {

bolaColor.setRGB(0xFF0000);

};

kuning.onRelease = function() {

bolaColor.setRGB(0xFFFF00);

};

hijau.onRelease = function() {

bolaColor.setRGB(0×009900);

};

ungu.onRelease = function() {

bolaColor.setRGB(0xCC33CC);

};

orange.onRelease = function() {

bolaColor.setRGB(0xFF6600);

};

biru.onRelease = function() {

bolaColor.setRGB(0×0033CC);

};

hitam.onRelease = function() {

bolaColor.setRGB(0×000000);

};

putih.onRelease = function() {

bolaColor.setRGB(0xFFFFFF);

};

50. Klik layer “baground”.

51. Pilihlah tipe Radial di dalam Color Mixer dengan warna hitam dan putih.

Gambar 5.37. Warna Hitam dan Putih dalam Gradasi Radial

52. Dengan menggunakan Gradient Transform Tool , buatlah agar warna putih itu menjadi bayangan lingkaran merah.

Gambar 5.38. Penggunaan Gradient Transform Tool untuk Bayangan pada Lingkaran Merah

53. Seleksi background sisi kiri menggunakan Selection Tool .

Gambar 5.39. Memilih Background Sisi Kiri

54. Masuklah kembali ke dalam panel Color Mixer.

55. Ubah Type menjadi Radial dengan warna gradasi hitam-putih-hitam seperti gambar di bawah ini.

Gambar 5.40. Pengaturan Color Mixer

56. Klik Gradient Transform Tool dan putar tool ini sehingga pewarnaannya akan tampak seperti gambar berikut.

Gambar 5.41. Efek Gradasi Radial di Ujung Kiri Atas pada Background

Penjelasan Script

Script untuk aplikasi “Mengenal Warna” ini memang sangat pendek dan simpel. Pada prinsipnya, begitu bola-bola kecil diklik maka bola yang ukurannya besar akan berubah warnanya sesuai dengan warna bola kecil itu. Proses penggantian warna pada bola besar dipicu langsung menggunakan script.

Pertama-tama, kita buat constructor new Color(bola) untuk membuat agar objek “bola” (lingkaran yang paling besar bernama “bola”—lihat teknik pembuatannya di langkah nomor 38-40) bisa kita ganti warnanya langsung lewat script. Selanjutnya, constructor itu kita simpan di dalam variabel khusus bernama “bolaColor”.

bolaColor = new Color(bola);

Selanjutnya tinggal mudah saja. Bola-bola kecil itu (yang masing-masing bernama “merah”, “kuning”, dan seterusnya) adalah sebuah tombol yang bisa diklik. Apabila, misalnya saja, tombol merah diklik dan dilepas (onRelease) maka aplikasi akan menjalankan sebuah function khusus.

Lihat penggunaan class setRGB(0xFF0000) di bawah ini. Class setRGB dipakai untuk mengganti warna sebuah objek dengan warna tertentu. Selanjutnya, warna itu dispesifikasikan dalam rumus hexadecimal yang ditulis setelah nomor offset. Dalam contoh di bawah ini, rumus hexadecimal yang dimaksud adalah “FF0000” yang menghasilkan warna merah.

Untuk warna-warna lainnya, rumus hexadecimal harus dispesifikasikan secara berbeda. Misalnya, “FFFF00” untuk menghasilkan warna kuning, dan seterusnya.

merah.onRelease = function() {

bolaColor.setRGB(0xFF0000);

};

kuning.onRelease = function() {

bolaColor.setRGB(0xFFFF00);