Membuat game edukasi mewarnai gambar part2

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:
1
2
3
4
on(press)
{
_root.warnaPeubah=0x0000ff;
}
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.

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
2
3
4
5
6
7
8
onClipEvent(load)
{
warnaIndikator=new Color(this);
}
onClipEvent(enterFrame)
{
warnaIndikator.setRGB(_root.warnaPeubah);
}
8. Jalankan Movie dengan menekan Ctrl+Enter.
This movie requires Flash Player 9
Selain itu, agar lebih menarik, anda bisa mengganti tampilan kursor default menjadi gambar kuas atau semacamnya. Caranya, bisa anda lihat pada tutorial Mengganti Tampilan Kursor. 

sumber: http://www.bengkelflash.com/2013/02/membuat-game-edukasi-mewarnai-gambar-2/ 
Tidak ada komentar:

Membuat game edukasi mewarnai gambar part1

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.


4.  Beri instance name pada tiap bagian atau objek. Misalnya objek atap rumah di beri nama instance “atap”, dinding rumah diberi nama “dinding”.

5.  Nah, sampai tahap ini anda sudah berhasil membuat objek-objek yang nantinya bisa diwarnai. Sekarang buka panel action kemudian ketikan 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
//variable warna untuk tiap-tiap bagian pada gambar
warnaMatahari=new Color(matahari);
warnaAtap=new Color(atap);
warnaDinding=new Color(dinding);
warnaJendela1=new Color(jendela1);
warnaJendela2=new Color(jendela2);
warnaJendela3=new Color(jendela3);
warnaJendela4=new Color(jendela4);
warnaPintu=new Color(pintu);
warnaDaun=new Color(daun);
warnaBatangPohon=new Color(batangPohon);
warnaPeubah=0x00ff00;
6.  Seleksi objek matahari, buka panel action kemudian ketikan script berikut:
1
2
3
4
5
6
7
on(press)
{
_root.warnaMatahari.setRGB(_root.warnaPeubah);
}
7.  Lakukan langkah 6 pada objek yang lainnya, Misalnya objek “atap” maka ganti script di atas sesuai dengan nama variable masing-masing.
1
2
3
4
5
6
7
on(press)
{
_root.warnaAtap.setRGB(_root.warnaPeubah);
}
8.  Lakukan test movie dengan menekan Ctrl+Enter.
This movie requires Flash Player 9
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? Lihat tutorial selanjutnya di sini.

sumber: http://www.bengkelflash.com/2013/02/membuat-game-edukasi-mewarnai-gambar/
Tidak ada komentar:

Membuat Game Baloon Shooter

Tutorial game shooting baloon ini jadi mengingatkan saya pada permainan video game terkenal di konsole nintendo. Judulnya “Duck Hunt” dimana kita harus nembakin bebek yang terbang kesana kemari. Nah, tutorial kali ini saya akan menjelaskan cara membuat permainan sejenis itu dengan judul “Shooting Baloon”.
1.  Buat dokumen baru flash.
2. Buat sebuah objek “sasaran” kemudian ubah menjadi Movieclip dengan cara klik kanan pada objek, pilih Convert to Symbol.
membuat game shooting baloon
3. Buka panel properties, kemudian pada bagian instance name, beri nama shot_mc.
membuat game shooting baloon
4. Buat sebuah objek “balon” kemudian ubah menjadi movieclip.
membuat game shooting baloon
5. Hapus movieclip balon yang ada di stage, kemudian buka panel library. Maka, movieclip balon yang sudah anda buat akan tampak di panel library. lalu, klik kanan pada movieclip balon kemudian pilih Lingkage.
membuat game shooting baloon
6. Centang pada pilihan Export for ActionScript. Pada kolom identifier, masukan kata “baloon”.
membuat game shooting baloon
7. Selanjutnya, buat sebuah tulisan “Score :” pada ujung atas stage dengan text tool (T).
8. Buat lagi sebuah teks area kosong dengan type dynamic text. lalu buka panel properties, pada kolom variable, masukan kata “_root.score”.
membuat game shooting baloon
9. Terakhir, buka panel action kemudian ketikan script di bawah ini:
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
Mouse.hide();
score=0;
shot_mc.onEnterFrame=function()
{
  this._x=_root._xmouse;
  this._y=_root._ymouse;
}
shot_mc.swapDepths(20);
for(i=0;i<10;i++)
{
  attachMovie("baloon","balon"+i,i,{_x:(Math.random()*500)+10,_y:(Math.random()*400)+500});
  _root["balon"+i].onEnterFrame=function()
  {
    this._y -=30;
    if(this._y<-50)
    {
    this._y=(Math.random()*400)+500;
    this._x=(Math.random()*500)+10;
    }
}
_root["balon"+i].onMouseDown=function()
{
  if(this.hitTest(shot_mc))
  {
    score +=10;
    removeMovieClip(this);
  }
}
}
Jalankan Movie dengan menekan Ctrl+Enter.
This movie requires Flash Player 9
Ayo, tembak balon sebanyak yang kamu bisa!! :)

sumber: http://www.bengkelflash.com/2013/03/as2membuat-game-shooting-baloon/
Tidak ada komentar:

Membuat Game Edukasi Hangman

Tutorial kali ini sebenarnya masih sama dengan tutorial Membuat Game Edukasi Hangman. Hanya saja di sini saya memakai input keyboard untuk menebak kata per kata-nya.
Oke langsung saja, yang perlu anda lakukan di sini hanya lah merubah semua script yang ada di frame 1 pada file Hangman.fla pada tutorial sebelumnya. atau bisa unduh file latihannya di sini.
Ganti script pada frame 1 menjadi seperti 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
stop();
var phrase:String="bengkelflash"; //kata yang ditebak
var tampil:Array=new Array();
numWrong=5;
count=0;
petunjuk.text="Hint: Situs pembelajaran ilmu flash dan game programming";
for(i=0;i<phrase.length;i++)
{
tampil.push("_");
count++;
if(phrase.charCodeAt(i)==32)
{
count--;
tampil[i]="   ";
}
}
display.text=tampil;
var keyListener:Object = new Object();
keyListener.onKeyDown = function():Void  {
kode=Key.getCode();
char=String.fromCharCode(kode);
cekKata(char);
};
Key.addListener(keyListener);
function cekKata(char:String)
{
kataTepat=false;
for(i=0;i<phrase.length;i++)
{
if(tampil[i]!=char)
{
//cek apakah karakter yg di input ada pada variable phrase?
if(phrase.charAt(i).toLowerCase()==char.toLowerCase())
{
//jika iya, tampilkan
tampil[i]=char;
display.text=tampil;
kataTepat=true;
count--;
}
}
}
//jika kata yang di input salah, kurangi nilai numWrong
if(!kataTepat)
{
numWrong--;
}
//jika semua kata terjawab, anda menang
if(count==0)
{
petunjuk.text="Anda Benar";
}
//jika toleransi kesalahan 0, anda kalah
if(numWrong==0)
{
petunjuk.text="Anda Gagal!";
}
}
Jalankan movie.
This movie requires Flash Player 9
sumber: http://www.bengkelflash.com/2013/04/membuat-game-tebak-kata/
Tidak ada komentar:

Memanipulasi gambar bitmap menjadi puzzle

Flash mendukung tiga jenis file bitmap, yaitu JPG, GIF dan PNG. Ketiganya dapat dimanipulasi seperti memotongnya menjadi bagian-bagian kecil seperti puzzle. Pada tutorial kali ini kita akan mencoba membuat gambar puzzle sebagai hasil dari manipulasi gambar bitmap.
1.  Buka dokumen baru actionscript 3.0.
2.  Buka panel actionscript kemudian ketikan 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
var req:URLRequest=new URLRequest("image.jpg");
var loader:Loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingDone);
loader.load(req);
function loadingDone(e:Event)
{
//membuat bitmap loader
var image:Bitmap=Bitmap(e.target.loader.content);
var lebar:Number=image.width/5;
var tinggi:Number=image.height/4;
//membuat potongan2 gambar sebanyak 5x4
for(var x:int=0;x<5;x++)
{
for(var y:int=0;y<4;y++)
{
var newPiece:Bitmap=new Bitmap(new BitmapData(lebar,tinggi));
newPiece.bitmapData.copyPixels(image.bitmapData,new Rectangle(x*lebar,y*tinggi,lebar,tinggi),new Point(0,0));
var newPuzzlePiece:Sprite=new Sprite();
newPuzzlePiece.addChild(newPiece);
addChild(newPuzzlePiece);
//menempatkan potongan gambar secara acak
newPuzzlePiece.x=(Math.random()*550);
newPuzzlePiece.y=(Math.random()*400);
}
}
}
3.  Setelah itu, simpan file dengan nama “ManipulasiGambar.fla”.
4.  Langkah terakhir, cari sebuah gambar dengan ukuran di bawah 640×480. Kemudian pindahkan ke dalam folder tempat anda menyimpan file ManipulasiGambar.fla, dan ganti nama file gambar menjadi “image.jpg”.
Manipulasi Gambar Bitmap Menjadi Puzzle
5.  Jalankan movie flash.
This movie requires Flash Player 9
Download Source Code

 sumber: http://www.bengkelflash.com/2013/05/as3manipulasi-gambar-bitmap-menjadi-puzzle/
Tidak ada komentar:
Langganan: Komentar (Atom)