Part 1 Membuat Game Edukasi “Mewarnai” Gambar

Tutorial game desain kali saya akan membahas bagaimana membuat sebuah game edukasi
bertema Mewarnai gambar. Jenis permainan ini sangat edukatif dan interaktif bagi kalangan
anak-anak. Nah, berikut ini adalah tutorial nya:

1. Buka dokumen baru flash.

2. Buatlah gambar rumah, pohon dan matahari seperti gambar di bawah ini :

3. Jika sudah, ubah tiap bagian-bagian gambar seperti atap rumah,dinding rumah, pintu dll
menjadi objek button dengan cara klik kanan pada objek kemudian pilih Convert to Symbol.

Dasar pemprogaman game By : Teguh S

teguh @stekom.ac.id -
4. Beri instance name pada tiap bagian atau objek. Misalnya objek atap rumah di beri nama
instance “atap”, dinding rumah diberi nama “dinding”.

Dasar pemprogaman game By : Teguh S

teguh @stekom.ac.id -
5. Nah, sampai tahap ini anda sudah berhasil membuat objek-objek yang nantinya bisa
diwarnai. Klik Frame 1 selanjutnya buka panel action kemudian ketikan script berikut:

Keterangan :

1 //variable warna untuk tiap-tiap bagian pada gambar

2
warnaMatahari=new Color(matahari);
3
4 warnaAtap=new Color(atap);
5
6 warnaDinding=new Color(dinding);
7
8 warnaJendela1=new Color(jendela1);

Dasar pemprogaman game By : Teguh S

teguh @stekom.ac.id -
9
10warnaJendela2=new Color(jendela2);
11
12warnaJendela3=new Color(jendela3);
13
warnaJendela4=new Color(jendela4);
14
15warnaPintu=new Color(pintu);
16
17warnaDaun=new Color(daun);
18
19warnaBatangPohon=new Color(batangPohon);
20
warnaPeubah=0x00ff00;

6. Seleksi objek matahari, buka panel action kemudian ketikan script berikut:

Keterangan :

1on(press)
2
3{
4
5_root.warnaMatahari.setRGB(_root.warnaPeubah);
6
7}
7. Lakukan langkah 6 pada objek yang lainnya, Misalnya objek “atap” maka ganti script di
atas sesuai dengan nama variable masing-masing.

Dasar pemprogaman game By : Teguh S

teguh @stekom.ac.id -
Keterangan :

1on(press)
2
3{
4
5_root.warnaAtap.setRGB(_root.warnaPeubah);
6
7}

8. Lakukan test movie dengan menekan Ctrl+Enter.

Lho, koq pas gambar di klik warna nya cuma warna hijau?

Jelas, karena semua gambar mengacu pada satu variable warna yaitu warnaPeubah yang
memiliki value 0x00ff00 (kode warna hijau). Nah kode warna ini di ambil dari indikator
warna yang terdapat pada fill color.

Lalu, bagaimana jika ingin menggunakan bermacam-macam variasi warna?

Dasar pemprogaman game By : Teguh S

teguh @stekom.ac.id -
Part 2 Membuat Game Edukasi “Mewarnai” Gambar
Sebelumnya anda sudah membuat game edukasi mewarnai bagian pertama. Sekarang kita
lanjutkan dengan membuat objek warna pallet sehingga gambar bisa diberi warna yang
bervariasi.

1. Buatlah sebuah kotak dengan warna biru dasar.

2. Ubah objek kotak tadi menjadi simbol button dan beri nama “biru”.

3. Buat lagi objek kotak seperti langkah 2 dengan variasi warna yang lain. Sebagai contoh
saya buat susunan warna seperti ini:

4. Klik objek warna “biru” kemudian buka panel action (F9). lalu ketikan script berikut:

1on(press)
2{
3_root.warnaPeubah=0x0000ff;
4}

5. Ulangi langkah 4 pada objek warna yang lain kemudian ubah kode 0x0000ff sesuai dengan
kode warna pada objek. Misalnya untuk warna merah, maka kodenya adalah 0xff0000.

Dasar pemprogaman game By : Teguh S

teguh @stekom.ac.id -
Sekarang kita buat sebuah indikator warna dimana pada saat objek warna di klik, maka warna
pada indikator ini akan berubah.

6. Buat gambar lingkaran kemudian ubah menjadi simbol movieclip.

7. Buka panel action(F9) kemudian ketikan script berikut:

1
onClipEvent(load)
2{
3warnaIndikator=new Color(this);
4}
5onClipEvent(enterFrame)
6{
warnaIndikator.setRGB(_root.warnaPeubah);
7}
8

8. Jalankan Movie dengan menekan Ctrl+Enter.

Dasar pemprogaman game By : Teguh S

teguh @stekom.ac.id -