Membuat Game

dengan Flash
v.1 10/14/2008

Herru Darmadi
BINUS UNIVERSITY

Table of Contents
Menyiapkan Stage......................................................................................................................................... 3
Mengatur Ukuran Stage ............................................................................................................................ 3
Mengatur Layer ......................................................................................................................................... 3
Memasukkan Objek-Objek ke Stage ......................................................................................................... 4
Membuat Actionscript .................................................................................................................................. 6
Membuat Keranjang Apel Bergerak.......................................................................................................... 6
Membuat Fungsi Inisialisasi Game............................................................................................................ 8
Membuat Apel Berjatuhan ....................................................................................................................... 9
Keranjang Menampung Apel .................................................................................................................. 13
Memasukkan Suara................................................................................................................................. 15
Impor ke Library .................................................................................................................................. 15
Memasukkan musik latar belakang .................................................................................................... 17
Memasukkan efek suara apel tertampung dan terjatuh .................................................................... 18

MEMBUAT GAME DENGAN FLASH 2

BINUS UNIVERSITY

Menyiapkan Stage

Mengatur Ukuran Stage

Aturlah ukuran stage dengan mengklik tombol Size dan rubahlah menjadi seperti instruksi dibawah:

 Title & Description sesuai dengan game

yang akan dibuat.

 Dimensi dari stage dengan lebar 400 px

dan tinggi 600 px.

 Warna latar belakang biru.

 Frame rate isikan dengan 12 frame tiap

detik.

 Klik OK.

Mengatur Layer
Layer sangat berguna untuk memberikan informasi mengenai manajemen objek-objek dalam stage.
Ketika membuat dokumen baru secara otomatis akan disediakan 1 layer baru dengan nama Layer 1.

Nama layer dapat dirubah dengan mengklik 2 kali pada nama layer dan memasukkan nama baru
kemudian tekan tombol Enter dari keyboard.

Layer juga dapat ditambah, layer yang berada diatas akan mendapatkan posisi lebih tinggi pada stage.

MEMBUAT GAME DENGAN FLASH 3

BINUS UNIVERSITY

Ikuti instruksi berikut untuk mengatur layer:

Tambahkan 4 layer baru. Ubahlah nama masing-masing layer menjadi

seperti berikut.

Memasukkan Objek-Objek ke Stage

Kita mulai dengan memasukkan latar belakang untuk game kita:

1. klik layer latarbelakang.

2. Buka Library.
3. Drag graphic daratan ke stage dan posisikan di bawah.

Kemudian selanjutnya kita akan memasukkan keranjang kita:

1. Klik layer keranjang .

2. Buka Library.
3. Drag Movie Clip keranjang ke stage dan posisikan diatas daratan.
4. Pada Properties berikan <instance name> menjadi mc_keranjang.

MEMBUAT GAME DENGAN FLASH 4

BINUS UNIVERSITY

Selanjutnya adalah memasukkan kotak teks informasi mengenai jumlah apel tertampung dan jatuh yang
nantinya akan kita isikan secara dinamis melalui actionscript.

1. Klik layer informasi.

2. Pada Tool klik Text Tools, kemudian buatlah 2 kotak teks pada stage.
3. Posisikan 2 kotak tersebut disebelah bawah keranjang.

4. Klik kotak teks yang sebelah atas dan pada Properties aturlah:
a. Rubahlah tipe dari teks ini menjadi Dynamic Text.
b. Rubahlah warna dari teks ini menjadi kuning.
c. Pada Var: isikan txt_tertampung.

5. Klik kotak teks yang sebelah bawah dan pada Properties aturlah:
a. Rubahlah tipe dari teks ini menjadi Dynamic Text.

MEMBUAT GAME DENGAN FLASH 5

BINUS UNIVERSITY

b. Rubahlah warna dari teks ini menjadi merah.

c. Pada Var: isikan txt_tdk_tertampung.

Kita telah selesai memasukkan objek-objek yang dibutuhkan pada stage, untuk apel nanti akan
diciptakan secara dinamis melalui actionscript.

Cobalah menekan tombol Ctrl + Enter pada keyboard untuk melihat hasil sementara.

Membuat Actionscript
Membuat Keranjang Apel Bergerak
Berikut ini adalah instruksi untuk membuat keranjang apel bergerak sesuai dengan gerakan mouse:

1. Klik objek keranjang pada stage.

2. Tekan tombol F9 pada keyboard untuk membuka window Actionscript.
3. Ketikkan script berikut, penjelasan menyusul pada bagian bawah.

onClipEvent(load){
Mouse.hide();
stagewidth = Stage.width;
}

onClipEvent (enterFrame) {
if(_root._xmouse <= 0)
{
this._x = 0;
}
else if(_root._xmouse >= (stagewidth - this._width))
{
this._x = stagewidth - this._width;
}
else
{
this._x = _root._xmouse;
}
}

Kode program ini diberikan pada objek keranjang yang berarti kode ini hanya akan berpengaruh pada
objek keranjang ini saja, ini disebut juga dengan istilah Object Oriented Programming.

MEMBUAT GAME DENGAN FLASH 6

BINUS UNIVERSITY

onClipEvent(load){
Mouse.hide();
stagewidth = Stage.width;
}

onClipEvent adalah suatu fungsi event yang telah disediakan oleh Flash untuk event tertentu pada kasus
ini adalah ketika objek ini di-load maka selanjutnya Flash akan mengerjakan perintah didalamnya yaitu
menyembunyikan cursor mouse dan juga kita perlu menyimpan lebar dari stage ke variabel lokal untuk
selanjutnya dapat kita pergunakan kembali.

onClipEvent (enterFrame) {
if(_root._xmouse <= 0)
{
this._x = 0;
}
else if(_root._xmouse >= (stagewidth - this._width))
{
this._x = stagewidth - this._width;
}
else
{
this._x = _root._xmouse;
}
}

Event selanjutnya adalah ketika frame ini dijalankan maka Flash akan mengerjakan perintah didalamnya.

 Yang pertama adalah menguji apakah posisi x mouse lebih kecil atau sama dengan 0 yaitu di
sebelah pojok kiri, maka berikan posisi x dari keranjang ini (this) menjadi 0.
0 400
0
Sumbu X

Keranjang

Lebar

Sumbu Y

 Yang kedua adalah menguji apakah posisi x mouse lebih besar atau sama dengan lebar stage
yang telah dikurangi dengan lebar keranjang, maka berikan posisi x dari keranjang ini (this)
menjadi lebar stage dikurangi dengan lebar keranjang.

MEMBUAT GAME DENGAN FLASH 7

BINUS UNIVERSITY

0 400
0
Sumbu X

Keranjang

Lebar

Sumbu Y

 Yang ketiga adalah memberikan posisi x dari keranjang ini (this) sesuai dengan posisi x dari
mouse (mengikuti gerakan x mouse yaitu ke kiri atau kekanan).

Sekarang cobalah lakukan Test Movie dengan menekan tombol Ctrl + Enter pada keyboard dan cobalah
gerakkan mouse anda kekiri dan kekanan pada stage dan keranjang akan mengikuti gerakannya.

Bila keranjang tidak bergerak, periksalah kembali kode program dan pastikan sama dengan instruksi.

Membuat Fungsi Inisialisasi Game

Pada umumnya pada setiap kode program apapun itu kita selalu memulai dengan menginisialisasi nilai-
nilai yang akan digunakan pada program dan menjalankan fungsi-fungsi program selanjutnya. Ini juga
akan dilakukan pada pembuatan game ini.

Ikutilah instruksi berikut ini:

1. Klik layer script.

2. Tekan tombol F9 pada keyboard untuk membuka window Actionscript.
3. Ketikkan script berikut, penjelasan menyusul pada bagian bawah.

function inisialisasi()
{
_global.apelTertampung = _global.apelTdkTertampung = 0;
_global.JUMLAH_APEL_DICIPTAKAN = 5;

txt_tertampung = "Apel tertampung : "+_global.apelTertampung;

txt_tdk_tertampung = "Apel terjatuh : "+_global.apelTdkTertampung;
}

Penamaan fungsi dapat secara bebas dibuat, yang penting jelas dan tepat kegunaannya agar tidak
membingungkan.

Fungsi inisialisasi ini akan menginisialisasi/memberikan nilai terhadap variabel global (variabel yang
dapat dipanggil dimana saja tanpa terikat fungsi), yaitu:

MEMBUAT GAME DENGAN FLASH 8

BINUS UNIVERSITY

 apelTertampung adalah variabel untuk menampung jumlah apel yang ditampung dengan nilai 0
karena baru akan memulai permainan.
 apelTdkTertampung adalah variabel untuk menampung jumlah apel yang jatuh tidak tertangkap
oleh keranjang dan diberi nilai 0 karena baru akan memulai permainan.
 JUMLAH_APEL_DICIPTAKAN adalah variabel yang akan digunakan untuk menentukan jumlah
apel yang akan diciptakan (selanjutnya pada modul Membuat Apel berjatuhan).
 txt_tertampung adalah variabel Dynamic Text (sebelumnya dibuat pada modul Memasukkan
Objeck ke Stage) untuk memampilkan informasi mengenai apel yang tertampung dengan
variabel apelTertampung.
 txt_tdk_tertampung adalah variabel Dynamic Text (sebelumnya dibuat pada modul
Memasukkan Objeck ke Stage) untuk memampilkan informasi mengenai apel yang terjatuh
dengan variabel apelTdkTertampung.

Fungsi ini belum selesai seluruhnya, sebelum melanjutkan ke tahap selanjutnya periksakan kode
program dengan instruksi.

Membuat Apel Berjatuhan

Sebelum apel berjatuhan kita perlu membuat objek apel melalui kode program, berikut ini adalah
diagram alirnya.

BuatApel()

Buat Apel sejumlah

_global.JUMLAH_APEL_DICIPTAKAN

ApelBerjatuhan()

Set setiap interval 50 milidetik panggil

fungsi berjatuhan

Dari diagram diatas terlihat bahwa kita memerlukan 2 fungsi lagi yaitu BuatApel() dan ApelBerjatuhan()
yang masing-masing mempunyai fungsinya sendiri-sendiri.

Sebelumnya kita perlu membuat agar Movie Clip apel dapat dihubungkan dengan Actionscript dengan:

1. Pada library klik kanan Movie Clip apel.

MEMBUAT GAME DENGAN FLASH 9

BINUS UNIVERSITY

2. Berikan tanda cek pada Export for Actionscript, dan berikan nama identifier APEL.

Ini berguna untuk link agar nama identifier ini dapat digunakan di kode Actionscript kita.

Ikutilah instruksi berikut ini:

1. Klik layer script.

2. Tekan tombol F9 pada keyboard untuk membuka window Actionscript.
3. Tambahkan script berikut, penjelasan menyusul pada bagian bawah.

function buatApel()
{
_global.kumpulanApel = new Array();

for(i=0; i< _global.JUMLAH_APEL_DICIPTAKAN ; i++)

{
this.attachMovie("APEL", "apel"+i, this.getNextHighestDepth());

var newapple = eval("apel"+i);

newapple._x = Math.floor(Math.random() * (Stage.width -

newapple._width));
newapple._y = 0 - newapple._height;
newapple._velocity = Math.floor(Math.random() * 10) + 1;

_global. kumpulanApel.push(newapple);
}

setInterval(this, "apelBerjatuhan", 50);

}

function apelBerjatuhan()

MEMBUAT GAME DENGAN FLASH 10

BINUS UNIVERSITY

{
for(i=0; i<_global.kumpulanApel.length; i++)
{
var apel = _global.kumpulanApel[i];

apel._y = apel_y + apel._velocity;

if(apel._y > Stage.height )

{
_global.apelTdkTertampung++;
txt_tdk_tertampung = "Apel terjatuh :
"+_global.apelTdkTertampung;
apel._y = 0 - apel._height;
apel._x = Math.floor(Math.random()*(Stage.width -
apel._width));
}
}
}

Penjelasan fungsi pertama yaitu buatApel():

1. Yang pertama kali dilakukan yaitu membuat variabel global dengan nama kumpulanApel dengan
tipe Array yaitu tipe data yang dapat menampung lebih dari satu objek, dalam hal ini yaitu apel-
apel.
2. Selanjutnya melakukan perulangan (loop) yaitu mengeksekusi perintah yang ada didalam
perulangan itu sebanyak n kali dimana n adalah sebanyak _global.JUMLAH_APEL_DICIPTAKAN
o Objek apel akan diciptakan secara dinamis dengan fungsi built-in

this.attachMovie(LINKAGE_NAME, INSTANCE_NAME, depth);

yaitu:
this.attachMovie(“APEL”, “apel”+i, this.getNextHighestDepth());

Fungsi ini akan membuat objek apel secara dinamis berdasarkan LINKAGE_NAME dari
library, kemudian memberikan nama apel+i dimana i akan berubah secara dinamis
selama perulangan, dan memberikan lokasi kedalaman pada stage agar objek
bertumpuk.

o Kemudian objek apel yang telah diciptakan perlu diberikan posisi x dan y pada stage
secara dinamis pula.
 Posisi y yaitu 0 sumbu Y dikurangi tinggi apel sehingga menghasilkan efek
seakan-akan apel jatuh dari atas stage.

newapple._y = 0 - newapple._height;

 Posisi x yaitu diacak dari 0 sampai lebar stage dikurangi lebar apel pada sumbu X.

newapple._x = Math.floor(Math.random()*(Stage.width-newapple._width));

MEMBUAT GAME DENGAN FLASH 11

BINUS UNIVERSITY

o Objek apel juga diberikan nilai acak (1-10 unit pixel) pada velocity sehingga kecepatan
perpindahan apel pada sumbu Y akan berbeda-beda.

newapple._velocity = Math.floor(Math.random() * 10) + 1;

o Objek apel ini selanjutnya dimasukkan pada variabel _global.kumpulanApel dengan

perintah.

_ global. kumpulanApel.push(newapple);

3. Keluar dari perulangan, selanjutnya adalah mengeset agar Flash secara otomatis memanggil
fungsi apelBerjatuhan() setiap 50 milidetik dengan perintah.

setInterval(this, "apelBerjatuhan", 50);

Penjelasan fungsi apelBerjatuhan():

Perulangan dilakukan sebanyak jumlah apel yang berada didalam kumpulanApel yaitu
_global.kumpulanApel.length.

1. Setiap objek apel akan dapat diakses pada kode program dengan perintah.

var apel = _global.kumpulanApel[i];

2. Selanjutnya kita rubah posisi y dengan menambahkan posisi y sekarang dengan kecepatan dari
apel kita, sehingga posisi y apel akan semakin besar dan bergerak ke bawah.

apel._y = apel._y + apel._velocity;

3. Dilakukan pengecekan apakah posisi y apel telah lebih besar dari tinggi stage (telah mencapai
batas bawah), bila ya berarti:
a. Apel tersebut telah jatuh, tambahkan jumlah apel tidak tertampung sebanyak satu.

_global.apelTdkTertampung++;

b. Berikan informasi apel terjatuh.

txt_tdk_tertampung = "Apel terjatuh : "+_global.apelTdkTertampung;

c. Pindahkan apel keatas dan berikan posisi x secara acak.

apel._y = 0 - apel._height;

apel._x = Math.floor(Math.random() * (Stage.width - apel._width));

Rubahlah fungsi inisialisasi menjadi seperti berikut ini:

// panggil fungsi inisialisasi agar dijalankan

inisialisasi();

MEMBUAT GAME DENGAN FLASH 12

BINUS UNIVERSITY

function inisialisasi()
{
_global.apelTertampung = _global.apelTdkTertampung = 0;
_global.JUMLAH_APEL_DICIPTAKAN = 5;

// setelah inisialisasi dieksekusi lalu jalankan fungsi buatApel()

buatApel();
txt_tertampung = "Apel tertampung : "+_global.apelTertampung;
txt_tdk_tertampung = "Apel terjatuh : "+_global.apelTdkTertampung;
}

Periksa kembali kode program, dan lakukan Test Movie dengan menekan tombol Ctrl+Enter pada
keyboard. Apel-apel akan berjatuhan dari sebelah atas dan bila sampai dibawah informasi apel terjatuh
akan bertambah dan apel akan muncul kembali diatas dengan posisi x yang berbeda.

Keranjang Menampung Apel

Agar keranjang dapat menampung apel bila apel mengenainya maka ikuti instruksi berikut ini:

1. Klik layer script.

2. Tekan tombol F9 pada keyboard untuk membuka window Actionscript.
3. Tambahkan script berikut, penjelasan menyusul pada bagian bawah.

function cekTumbukan(apel)
{
if(apel.hitTest(mc_keranjang))
{
_global.apelTertampung++;
txt_tertampung = "Apel tertampung : "+_global.apelTertampung;

MEMBUAT GAME DENGAN FLASH 13

BINUS UNIVERSITY

apel._y = 0 - apel._height;
apel._x = Math.floor(Math.random() * (Stage.width - apel._width));
}
}

Dimana fungsi ini akan dipanggil oleh fungsi apelBerjatuhan(), lakukan perubahan pada fungsi
apelBerjatuhan() menjadi seperti berikut:

function apelBerjatuhan()
{
for(i=0; i<_global.kumpulanApel.length; i++)
{
var apel = _global.kumpulanApel[i];

apel._y = apel_y + apel._velocity;

if(apel._y > Stage.height )

{
_global.apelTdkTertampung++;
txt_tdk_tertampung = "Apel terjatuh : "+_global.apelTdkTertampung;

apel._y = 0 - apel._height;
apel._x = Math.floor(Math.random()*(Stage.width - apel._width));
}
else
{
cekTumbukan(apel);
}
}
}

Maksud dari perintah ini adalah ketika apelBerjatuhan apel akan dicek apakah sudah mencapai batas
bawah stage, bila belum cek apakah terjadi tumbukan dengan memanggil fungsi cekTumbukan terhadap
apel tersebut.

Penjelasan dari fungsi cekTumbukan(apel):

1. Dilakukan pengecekan pada kondisi apakah apel mengenai mc_keranjang yaitu keranjang kita.

if(apel.hitTest(mc_keranjang))

2. Bila kondisi ini terpenuhi selanjutnya dilakukan perintah-perintah didalamnya yaitu:

a. Menambahkan jumlah apel tertampung sebanyak satu.

_global.apelTertampung++;

b. Tampilkan informasi jumlah apel yang tertampung.

txt_tertampung = "Apel tertampung : "+_global.apelTertampung;

c. Pindahkan apel keatas dan berikan posisi x secara acak.

apel._y = 0 - apel._height;

MEMBUAT GAME DENGAN FLASH 14

BINUS UNIVERSITY

apel._x = Math.floor(Math.random() * (Stage.width - apel._width));

Periksa kembali kode program, dan lakukan Test Movie dengan menekan tombol Ctrl+Enter pada
keyboard. Apel-apel akan berjatuhan dari sebelah atas dan cobalah mengambil apel tersebut dengan
mengerakan keranjang dan menunggu pada saat yang tepat.

Memasukkan Suara
Game akan kurang menarik tanpa sentuhan suara. Pada modul ini akan dibahas mengenai bagaimana
memasukkan musik, dan efek suara ketika berhasil mengambil dan gagal mengambil apel.

Impor ke Library
Sebelum mulai menambah kode program, importlah suara-suara kedalam library, berikut langkah-
langkahnya:

MEMBUAT GAME DENGAN FLASH 15

BINUS UNIVERSITY

1. Klik menu File > Import > Import to Library

2. Pilihlah ingame.mp3, cached.mp3, dan fall.mp3

3. Pada library klik kanan ingame.mp3 pilih linkage

MEMBUAT GAME DENGAN FLASH 16

BINUS UNIVERSITY

4. Cek Export for Actionscript, berikan nama identifier musik_game

Ini berguna untuk link agar nama identifier ini dapat digunakan di kode Actionscript kita.

5. Lakukan yang sama untuk cached.mp3 dengan nama identifier suara_tertampung, dan fall.mp3
dengan nama identifier suara_terjatuh.

Memasukkan musik latar belakang

Selanjutnya adalah instruksi untuk memasukkan musik latar belakang. Berikut ini adalah instruksinya:

1. Klik layer script.

2. Tekan tombol F9 pada keyboard untuk membuka window Actionscript.
3. Tambahkan script berikut, penjelasan menyusul pada bagian bawah.

var bg_musik = new Sound();

bg_musik.attachSound("musik_game");
bg_musik.start(1,9999);

Bg_musik adalah variabel suara dimana akan dihubungkan dengan musik_game sesuai dengan linkage
yang telah dibuat dengan ingame.mp3, dan kemudian akan langsung dimainkan ketika game dimulai
dengan fungsi start(1,9999). Angka 1, 9999 ini berarti musik akan dimainkan terus berulang sebanyak
9999 kali.

MEMBUAT GAME DENGAN FLASH 17

BINUS UNIVERSITY

Memasukkan efek suara apel tertampung dan terjatuh

Agar tambah menarik, tambahkan efek suara ketika apel tertampung dan terjatuh.

Berikut adalah instruksinya:

1. Klik layer script.

2. Tekan tombol F9 pada keyboard untuk membuka window Actionscript.
3. Tambahkan script berikut, penjelasan menyusul pada bagian bawah.

function efekSuara(tipe)
{
var vsuara = new Sound();
if(tipe == true)
vsuara.attachSound("suara_tertampung");
else
vsuara.attachSound("suara_terjatuh");

vsuara.start();
}

Penjelasan dari fungsi efekSuara(tipe):

1. vsuara adalah variabel suara untuk menampung mp3 yang akan dihubungkan.
2. Dilakukan pengecekan dimana bila kondisi tipe adalah tertampung, maka hubungkan vsuara
dengan suara_tertampung dan selain itu hubungkan vsuara dengan suara_terjatuh.
3. Kemudian mainkan suara dengan vsuara.start()

Tentu efekSuara ini perlu dipanggil oleh fungsi lain, lakukan perubahan pada fungsi apelBerjatuhan() dan
cekTumbukan(apel) menjadi seperti berikut.

function apelBerjatuhan()
{
for(i=0; i<_global.kumpulanApel.length; i++)
{
var apel = _global.kumpulanApel[i];

apel._y += apel._velocity;

if(apel._y > Stage.height )

{
_global.apelTdkTertampung++;
txt_tdk_tertampung = "Apel terjatuh : "+_global.apelTdkTertampung;

// panggil efek suara terjatuh

efekSuara("terjatuh");

apel._y = 0 - apel._height;
apel._x = Math.floor(Math.random() * (Stage.width - apel._width));

}
else
{
cekTumbukan(apel);
}

MEMBUAT GAME DENGAN FLASH 18

BINUS UNIVERSITY

}
}

function cekTumbukan(apel)
{
if(apel.hitTest(mc_keranjang))
{
_global.apelTertampung++;
txt_tertampung = "Apel tertampung : "+_global.apelTertampung;

// panggil efek suara tertampung

efekSuara("tertampung");

apel._y = 0 - apel._height;
apel._x = Math.floor(Math.random() * (Stage.width - apel._width));
}
}

Periksa kembali kode program, dan lakukan Test Movie dengan menekan tombol Ctrl+Enter pada
keyboard. Musik latar belakang akan bermain dan apel-apel akan berjatuhan dari sebelah atas dan
cobalah mengambil apel tersebut dengan mengerakan keranjang dan menunggu pada saat yang tepat.
Efek suara akan muncul bila berhasil mengambil apel atau ketika apel terjatuh.

Selamat Anda telah berhasil membuat satu game sederhana dengan menggunakan Flash dan
Actionscript.

MEMBUAT GAME DENGAN FLASH 19