Sunday, June 28, 2009

Membuat Simulasi Perbandingan Sebuah Rumus

Jika Anda adalah seorang pengajar sains atau matematika, mungkin Anda pernah mengalami kesulitan bagaimana memahamkan kepada siswa perbandingan variabel sebuah rumus, maksudnya, bagaimana menyatakan berbanding lurus atau berbanding terbalik masing-masing variabel dalam sebuas rumuh. Akhirnya saya menemukan sebuah semulasi sederhana yang berasal dari Phet Colorado bagaimana mereka meracik sebuah simulasi sederhana, namun dengan simulasi tersebut, seorang siswa yang awalnya kesulitan memahami makna sebuah rumus, menjadi paham.

Pada tutorial kali ini saya akan mengajarkan kepada Anda bagaimana membuat simulasi hubungan antar rumus dengan cara membesarkan atau mengecilkan salah satu variabel, sehingga variabel yang lain ikut bergantung. Contoh yang saya gunakan dalam tutorial ini adalah hukum Ohm yang berbunyi " Besarnya kuat arus yang mengalir dalam sebuah rangkaian berbanding lurus dengan tegangan dan berbanding terbalik dengan hambatan dalam tegangan. Perhaitkan simulasi di bawah ini..



Langkah 1
Buka sebuah file baru dan buatlah tulisan terpisah V = IR, besarkan semua tulisan dan beri warna berdasarkan selera Anda. Perhatikan gambar



Langkah 2
Convert huruf V, huruf I dan huruf R ke dalam movie clip, lalu beri nama masing-masing instance namenya dengan V, I, dan R.

Langkah 3
Sisipkan glider (tombol yang bisa di geser-geser), caranya klik menu Windows - Common Libraries - Buttton, cari folder classic button - Knob & Fadders, buka lalu pilih fader - gain, tahan dan geser ke stage.

Langkah 4
klik mc fader gain dalam stage, hapus tulisan "GAIN" dengan cara mengklik trus hingga di dapat text tersebut dan hapus lalu kembali ke stage utama.

Langkah 5
Klik 2 kali mc fader gain, masuk ke area mc fader gain, perhatikan frame yang paling atas yang terdapat action script, buka action script yang terdapat dalam fader gain, hasilnya akan seperti berikut

top = vol._y;
left = vol._x;
right = vol._x;
bottom = vol._y+100;
level = 100;
//
vol.onPress = function() {
startDrag("vol", false, left, top, right, bottom);
dragging = true;
};
vol.onRelease = function() {
stopDrag();
dragging = false;
};
vol.onReleaseOutside = function() {
dragging = false;
};
//
this.onEnterFrame = function() {
if (dragging) {
level = 100-(vol._y-top);
} else {
if (level>100) {
level = 100;
} else if (level<0)>
level = 0;
} else {
vol._y = -level+100+top;
}
}
sound.setVolume(level);
};

Perhatikan tulisan yang saya beri warna merah, ubah nilai level = 100 menjadi level = 50,
Perhatikan juga tulisan yang saya beri warna hijau, hapus dan ganti kode tersebut dengan kode seperti ini :

_root.V._xscale = (level+50)*2;
_root.V._yscale = (level+50)*2;
_root.I._xscale = (_root.V._xscale/_root.R._xscale)*50;
_root.I._yscale = (_root.V._yscale/_root.R._yscale)*50;

Langkah 6
Kembali ke stage utama, duplicat movie clip fader gain, dari librari, klik kanan mc fader gain dan pilih duplicate, beri nama terserah Anda lalu mc fader gain hasil duplikat ini Anda letakkan tepat disamping mc fader gain yang lama.

Langkah 7
Perhatikan langkah 5, lakukan hal yang sama pada mc fader gain hasil diuplikat, ganti kode tulisan yang sebelumnya saya beri warna hijau menjadi

_root.R._xscale = (level+50)*2;
_root.R._yscale = (level+50)*2;
_root.I._xscale = (_root.V._xscale/_root.R._xscale)*50;
_root.I._yscale = (_root.V._yscale/_root.R._yscale)*50;

Langkah 8
Tambahkan tulisan bbunyi hukum Ohm sebagai judul stage dan tulisan V dan R di bawah fader gain. Semoga bermanfaat.

Sunday, June 21, 2009

Membuat Media Interaktif Grafik Persamaan Kuadrat y = Ax^2 +Bx + C

Tutorial kali ini berhubungan dengan pokok bahasan matematika yaitu Membuat Grafik Persamaan Kuadrat dalam Flash, Anda dapat menggunakan software Macromedia Flash atau Adobe Flash CS3 (pilih AS 2.0).

Media interaktif yang akan kita peroleh berupa adanya input 3 variabel nilai pada persamaan kuadrat umum y = Ax^2 + Bx + C yaitu variabel A, B, dan C, ketika sembarang nilai Real dimasukkan maka secara otomatis akan terbentuk grafik persamaan kuadrat yang sesuai dengan input variabel. Di bawah ini merupakan hasil yang akan kita peroleh, masukkan sembarang angka pada kotak berwarna putih, kemudian tekan tombol grafik untuk melihat hasilnya.



Langkah 1
Buka sebuah file baru dan ubah ukurannya menjadi 600 x 500 pixel dengan background abu-abu. Kamudian buatlah sebuah garis vertikal tebal (3) lurus berwarna hitam, ubah nilai height dari garis menjadi 500 dan tempatkan posisi x = 300. Buat lagi sebuah garis vertikal yang lebih tipis tebal (0.5) atau lebih tipis lagi, atur posisi garis ini dengan jarak 20 pixel dari garis utama yang tebal, kemudian copy paste garis ini dan letakkan lagi pada jarak 20 pixel dari garis sebelumnya dan ulangi sampai halam penuh. Seleksi semua garis ini kemudian tekan tombol Ctrl + G, copy group garis ini dan paste, hasil paste dari grup garis ini kemudia diputar 90 derajat, caranya pilih grup garis hasil paste kemudian pilih menu modify-transform-rotate 90 CW. Ubah nilai width grup garis baru ini menjadi 600 dan height = 500, letakkan pada posisi center terhadap stage. Hasilnya dapat anda lihat pada gambar.




Langkah 2
Buat layer baru, kunci layer lama, beri angka pada setiap grid koordinat, pada contoh saya menggunakan rentang 2 angka.

Langkah 3
Buat layer baru dan kunci layer dibawahnya, buat sebuah kotak abu-abu sebagai dasar text,
Kemudian buatlah text yang tertera seperti pada contoh, kombinasikan antara static text dan input text, input text yang pertama, beri nama variablenya dengan "A", input text kedua "B" dan input text ketiga "C".

Langkah 4
Buat sebuah tombol grafik dan letakkan di samping kotak tadi. klik tombol tersebut dan tekan tombol F9, masukkan kode untuk tombol:

on (release) {
_root.lukis = true;
}



Langkah 5
Buatlah sebuah layer baru untuk layer action, klik frame 1 layer action dan masukkan kode berikut:

lukis = true;
//mengeset nilai awal
A = 1;
B = 0;
C = 0;
i = 0;
// titik pusat koordinat
center_x = 300;
center_y = 250;
fb = 20;
//jarak antar titik koordinat
onEnterFrame = function () {
if (lukis) {
with (_root) {
clear();
//fungsi membuat garis
a = Number(A);
b = Number(B);
c = Number(C);
koorx = (i-center_x)/fb;
y = a*Math.pow(koorx, 2)+b*koorx+c;
//
koory = center_y-y*fb;
//menentukan tipe garis (ketebalan, warna, transparansi)
lineStyle(2, 16711680, 100);
//fungsi yang membentuk persamaan garis
moveTo(i, koory);
for (i=1; i<=1000; i++) {
koorx = (i-center_x)/fb;
y = a*Math.pow(koorx, 2)+b*koorx+c;
koory = center_y-y*fb;
lineTo(i, koory);
}
lukis = false;
i = 0;
}
}
};
stop();
with (_root) {
clear();
}

Lakukan test movie untuk melihat hasil

Saturday, June 20, 2009

Membuat Animasi tumbukan lenting sempurna partikel gas (teori kinetik gas)

Pada tutorial kali ini, akan saya jelaskan secara singkat bagaimana cara membuat animasi tumbukan lenting sempurna partikel yang berjumlah banyak dengan asumsi partikel mengalami tumbukan lenting sempurna. Teori tumbukan lenting sempurna ini mendukung teori kinetik gas yaitu keadaan partikel dalam gas yang diasumsikan mengalami tumbukan lenting sempurna. pada tutorial kali ini saya menggunakan AS 2.0.







Langkah 1

Buka sebuah file baru berukuran 500 x 400, Selanjutnya berilah warna pada backgroundnya dengan warna cerah.



Langkah 2

Buatlah sebuah movie clip kosong, caranya dari stage yang masih kosong, tekan tombol Ctrl + F8, pilih movieclip dan beri nama "kosong", sekarang lihat ke library, klik kanan mc kosong dan pilih linkage, kemudian isikan "kosong" pada identifier.



Langkah 3

Buatlah sebuah bola berwarna gelap berukuran 20 x 20 (lihat property, height = 20, width = 20), kemudian convert bola ini ke dalam movie clip dan beri nama "partikel", hapus mc partikel dan lihat ke library, klik kanan mc partikel, pilih linkage, pada identifier ketikkan "partikel".



Langkah 4

kembali ke stage utama, klik frame 1 layer 1, tekan tombol F9 dan masukkan Action script berikut:



stop();

t = 0;

dx = 0;

//Membuat variabel

_root.attachMovie("kosong", "kosong", _root.getNextHighestDepth(), {_x:1500, _y:200});

_root.createEmptyMovieClip("container_movie", _root.getNextHighestDepth());

//memasukkan movieclip

kosong.onEnterFrame = function() {

//ini adalah fungsi yang mengeksekusi setiap frame

if (Math.random()*1000<100 and t<50) {

//kondisi yang akan menambah jumlah partikel setiap interval bilangan random (50)

circle = container_movie.attachMovie("partikel", "partikel"+t, container_movie.getNextHighestDepth(), {_width:a, _height:b, _x:(20+Math.random()*300), _y:(20+Math.random()*300), _rotation:Math.random()*300});

t++;

circle.xspeed = Math.random()*9;

circle.yspeed = Math.random()*9;

//Menentukan kecepatan acak partikel pada sumbu x dan y

circle.onEnterFrame = function() {

this._x -= this.xspeed;

this._y -= this.yspeed;

//Fungsi yang menggerakkan partikel

if (this._x<10) {

this._x = 10;

this.xspeed = -this.xspeed;

}

if (this._x>490) {

this._x = 490;

this.xspeed = -this.xspeed;

}

if (this._y<10) {

this._y = 10;

this.yspeed = -this.yspeed;

}

if (this._y>390) {

this._y = 390;

this.yspeed = -this.yspeed;

}

//Memastikan bahwa partikel tidak akan keluar dari batas

};

}

//Memeriksa tumbukan setiap partikel

for (i=0; i
a = _root.container_movie["partikel"+i];

for (j=i+1; j
b = _root.container_movie["partikel"+j];

var dx = b._x-a._x;

var dy = b._y-a._y;

var dist = Math.sqrt(dx*dx+dy*dy);

//Memeriksa jarak antara 2 partikel

if (dist<20) {

_root.solveBalls(a, b);

//karena radius setiap partikel adalah 10 (diameter 20), maka jarak tumbukan antara partikel terhitung 20 pixel.

} else {

}

}

}

};



function solveBalls(ballA, ballB) {

var x1 = ballA._x;

var y1 = ballA._y;

var dx = ballB._x-x1;

var dy = ballB._y-y1;

var dist = Math.sqrt(dx*dx+dy*dy);

radius = 10;

//fungsi ini akan menghitung jarak tumbukan partikel

normalX = dx/dist;

normalY = dy/dist;

midpointX = (x1+ballB._x)/2;

midpointY = (y1+ballB._y)/2;

//fungsi ini yang akan menentukan titik normal dan titik pusat

ballA._x = midpointX-normalX*radius;

ballA._y = midpointY-normalY*radius;

ballB._x = midpointX+normalX*radius;

ballB._y = midpointY+normalY*radius;

//fungsi ini yang akan membalik 2 buah partikel ke posisi yang berbeda sehingga tidak sempat menyatu

dVector = (ballA.xspeed-ballB.xspeed)*normalX+(ballA.yspeed-ballB.yspeed)*normalY;

dvx = dVector*normalX;

dvy = dVector*normalY;

//fungsi ini menentukan kecepatan baru partikel setelah bertumbukan

ballA.xspeed -= dvx;

ballA.yspeed -= dvy;

ballB.xspeed += dvx;

ballB.yspeed += dvy;

}





Kemudia test movie...

Friday, June 19, 2009

Action Script Dasar Menggerakkan Objek dalam Flash / Kinematika Gerak dalam Flash

Tutorial ini akan menjelaskan kepada Anda pembaca bagaimana menggerakkan sebuah objek berupa movie clip dengan mempertimbangkan beberapa aspek, tutorial ini dapat dijadikan panduan bagi Anda yang ingin membuat sebuah media interaktif yang didalamnya terdapat objek yang harus digerakkan dengan keyboard atau bagi anda yang ingin membuat game balap atau game arcade.Dalam tutorial ini, saya menggunakan AS 2.0. Sebenarnya tidak mudah menggerakkan suatu objek dalam flash, karena banyak faktor yang harus dipertimbangkan seperti kecepatan, hambatan, gravitasi dan lain-lain. Kita akan memulainya sedikit demi sedikit.

Untuk Persiapan, buak sebuah file baru di AS 2.0 dengan ukuran kira-kira 500 x 350 pixel atau lebih. Buatlah sebuah movie clip bola sederhana, di dalam movie clip bola tersebut terdapat sebuah tanda berupa lingkaran kecil diatasnya yang berguna sebagai penunjuk arah. Lalu beri nama instance name mc bola dengan nama "bola".Kemudian buatlah sebuah tombol reset, letakkan tombol ini di sudut kanan bawah kemudian beri Action script pada tombol

on (release) {
_root.bola._x = 231;
_root.bola._y = 20;
}

Sekarang kita akan mencoba menggerakkan mc bola secara bertahap mulai dari hal yang paling dasar, semua Action script berikut ditulis di dalam mc bola.

GERAKAN DASAR

Gerakan dasar yang dimaksud yaitu menggerakkan mc bola dengan keyboard tanpa mempertimbangkan faktor lain, jadi hanya sekedar merubah posisi x dan y dari mc bola sebesar 1 pixel unit, berikut kodenya:

onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x--;
}
if (Key.isDown(Key.RIGHT)) {
_x++;
}
if (Key.isDown(Key.UP)) {
_y--;
}
if (Key.isDown(Key.DOWN)) {
_y++;
}
}



GERAKAN DENGAN PENAMBAHAN VARIABEL KECEPATAN

Pada Gerakan Dasar sebelumnya, mc bola hanya berpindah sebesar 1 pixel unit di kordinat x dan y, sekarang kita akan merubah nilai tersebut dengan membuat sebuah variabel yang dapat kita atur sehingga pergeseran mc bola bergantung pada besarnya nilai variabel yang diberikan, dalam fisika kita biasa mengenalnya dengan Gerak Lurus Beraturan (GLB). Misal variabel tersebut adalah kecepatan, maka mc bola akan berindah sejauh nilai kecepatan yang diberikan, berikut kodenya :

onClipEvent (load) {
kecepatan = 3;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x -= kecepatan;
}
if (Key.isDown(Key.RIGHT)) {
_x += kecepatan;
}
if (Key.isDown(Key.UP)) {
_y -= kecepatan;
}
if (Key.isDown(Key.DOWN)) {
_y += kecepatan;
}
}



GERAKAN DENGAN PERCEPATAN
Sekarang kita akan mencoba menggerakkan bola dengan memperhatikan adanya percepatan dan perlambatan yang kita atur sendiri nilainya dengan membuat sebuah variabel percepatan. Dalam fisika kita mengenalnya dengan Gerak Lurus Berubah Beraturan (GLBB), disini saya juga mulai membedakan arah kecepatan pada sumbu x dan pada sumbu y dengan membelah variabel kecepatan, Kodenya yaitu :

onClipEvent (load) {
percepatan = 0.2;
kecepatan_x = 0;
kecepatan_y = 0;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
kecepatan_x -= percepatan;
}
if (Key.isDown(Key.RIGHT)) {
kecepatan_x += percepatan;
}
if (Key.isDown(Key.UP)) {
kecepatan_y -= percepatan;
}
if (Key.isDown(Key.DOWN)) {
kecepatan_y += percepatan;
}
_y += kecepatan_y;
_x += kecepatan_x;
}



GAYA GESEK

Dalam keadaan nyata, sebuah objek yang bergerak pada suatu bidang, akan mengalami gesekan dengan bidangnya, sekarang kita akan coba menambahkan unsur variabel gesekan dalam gerakan mc bola, dalam fisika variabel tersebut dinamakan koefisien gesek. Kodenya yaitu:

onClipEvent (load) {
percepatan = 0.2;
kecepatan_x = 0;
kecepatan_y = 0;
gesekan = 0.95
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
kecepatan_x -= percepatan;
}
if (Key.isDown(Key.RIGHT)) {
kecepatan_x += percepatan;
}
if (Key.isDown(Key.UP)) {
kecepatan_y -= percepatan;
}
if (Key.isDown(Key.DOWN)) {
kecepatan_y += percepatan;
}
kecepatan_x *= gesekan;
kecepatan_y *= gesekan;
_y += kecepatan_y;
_x += kecepatan_x;
}



GRAVITASI

Sebuah benda yang berada di udara akan mengalami gaya tarik yang besarnya ditentukan oleh percepatan gravitasi. Sekarang kita akan memperhitungkan efek gravitasi pada objek yang seolah-olah berada di udara dengan menambahkan efek gravitasi yang hanya mempengaruhi nilai variabel dari kecepatan pada sumbu y.Dalam fisika kita mengenalnya dengan gerak jatuh bebas. Kodenya adalah:

onClipEvent (load) {
percepatan = 0.2;
kecepatan_x = 0;
kecepatan_y = 0;
gesekan = 0.95
gravitasi = 0.1
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
kecepatan_x -= percepatan;
}
if (Key.isDown(Key.RIGHT)) {
kecepatan_x += percepatan;
}
if (Key.isDown(Key.UP)) {
kecepatan_y -= percepatan;
}
if (Key.isDown(Key.DOWN)) {
kecepatan_y += percepatan;
}
kecepatan_x *= gesekan;
kecepatan_y += gravitasi;
_y += kecepatan_y;
_x += kecepatan_x;
}



EFEK ANGIN

Masih dalam pembahasan gerak jatuh bebaas, namun sekarang kita tambahkan lagi efek tiupan angin yang bekerja pada saat benda di udara dengan angin yang kencang.

onClipEvent (load) {
percepatan = 0.2;
kecepatan_x = 0;
kecepatan_y = 0;
gesekan = 0.95
gravitasi = 0.1
angin = 0.05
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
kecepatan_x -= percepatan;
}
if (Key.isDown(Key.RIGHT)) {
kecepatan_x += percepatan;
}
if (Key.isDown(Key.UP)) {
kecepatan_y -= percepatan;
}
if (Key.isDown(Key.DOWN)) {
kecepatan_y += percepatan;
}
kecepatan-x +=angin;
kecepatan_x *= gesekan;
kecepatan_y += gravitasi;
_y += kecepatan_y;
_x += kecepatan_x;
}



ROTASI

Sekarang akan kita tambahkan efek putaran yang bekerja pada mc bola yang sedang bergerak, kodenya adalah :

onClipEvent (load) {
percepatan = 0.2;
kecepatan_x = 0;
kecepatan_y = 0;
gesekan = 0.95
gravitasi = 0.1
angin = 0.05
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
kecepatan_x -= percepatan;
}
if (Key.isDown(Key.RIGHT)) {
kecepatan_x += percepatan;
}
if (Key.isDown(Key.UP)) {
kecepatan_y -= percepatan;
}
if (Key.isDown(Key.DOWN)) {
kecepatan_y += percepatan;
}
kecepatan_x +=angin;
kecepatan_x *= gesekan;
kecepatan_y += gravitasi;
_y += kecepatan_y;
_x += kecepatan_x;
_rotation += kecepatan_x;
}


Tuesday, June 16, 2009

Menggambar 3D dan Rendering dalam Flash / Drawing 3D and Rendering on flash

Pada tutorial kali ini kita akan membahas bagaimana cara menggambar objek 3 dimensi dalam flash secara sederhana disertai tehnik rendering.

Langkah 1
Buka sebuah file baru dalam flash (Macromedia flash 8 atau Adobe Flash CS ), kemudian klik Oval tool (O), huruf dalam kurng adalah shorcut tombol keyboard. Pilih warna stroke hitam dan kosongkan warna fill (stroke adalah garis luar / tepi gambar sedangkan fill adalah semua bagian di dalam area stroke). Buat sebuah gambar oval berukuran sedang seperti pada gambar.

Langkah 2
Modifikasi gambar oval tersebut menyerupai bentuk gambar buah apel, caranya klik Selection tool (V) dan arahkan mouse ke garis hingga terdapat gambar lengkung pada kursor dan tarik perlahan. Perhatikan gambar di bawah.


Langkah 3
Tambahkan sedikit batang dan daun di bagian atas buah apel dan juga tambahkan efek gigitan, gunakan Pencil tool (Y) dan Line tool (N) untuk menggambarnya dan edit dengan Selection tool. Jika ada bagian yang ingin dihapus, gunakan Eraser tool (E). Hasilnya bisa anda lihat pada gambar di bawah.
Langkah 4
Sekarang kita masuk pada bagian pewarnaan, Perhatikan tab Color mixer pada bagian pojok kanan atas, klik fill color, type radial. Perhatikan pada kotak warna di bawah, awalnya hanya ada 2 kursor warna yang tersedia, tambahkan satu lagi dangan cara mengklik di dekat salah satu kursor warna. Atur warna dan peletakan kursor warna. Kursor yang paling kanan berwarna hitam, yang tengah berwarna merah kehitaman, dan paling kiri hitam. Atur jarak antar kursor seperti pada gambar.


Langkah 5
Klik Paint Bucket tool (K) dan klik kira-kira di bagian sudut kanan atas apel hingga bagian gelap berada di kiri bawah, anda juga boleh mengklik di kiri atas, maka akan menghasilkan kondisi yang berlawanan. Perhatikan gambar.


Langkah 6
Lakukan hal yang sama pada dengan mewarnai daun dan bekas gigitan, untuk warna batang anda cukup menggunakan satu warna (solid color) yaitu coklat.


Langkah 7
Sekarang kita akan memberikan efek cahaya pada apel. Buat layer baru dan gembok (kunci) layer lama (layer 1), di layer baru ini klik frame 1 dan klik Oval tool (O). Kembali ke area color mixer, klik fill color dan pilih type solid dan pilih warna putih, ubah nilai alpha menjadi 45%, nilai alpha ini yang menentukan transparansi dari fill color.
Buat sebuah gambar oval tepat disekitar daerah batang, kemudian klik Selection tool (V) dan atur sedemikian hingga membentuk lengkungan (perhatikan gambar).
Jika telah selesai, buat lagi sebuah layer baru dan gembok layer dibawahnya, klik lagi oval tool (O), pada bagian color mixer, pilih type radial,gunakan hanya 2 kursor warna terapkan semua warna putih pada kursor warna, jika terdapat 3 kursor warna, hilangkan salah satu dengan cara menekan tombol Ctrl kemudian arahkan mouse ke arah kursor warna hingga terlihat gambar gunting dan klik untuk menghapus. Sekarang atur alpha masing-masing kursor warna, kursor wara terluar gunakan alpha 10% dan kursor warna dalam dengan alpha 30 - 40%. Jika pengaturan telah selesai, buat sebuah gambar lingkaran didekat bekas gigitan.
Untuk membuat cekungan kuning, buat lagi sebuah layer baru dan gembok layer dibawahnya, pada layer yang baru, klik oval tool dengan fill color kuning, buat sebuah gambar oval dekat batang, konversi oval kuning ini ke movie clip, kemudian klik movie clip oval kuning, pada bagian property, pilih tab filter dan klik tanda tambah, pilih blur. Naikkan nilai blur menjadi 20 - 25. Hasilnya dapat anda lihat pada gambar di bawah.


Langkah 8
untuk membuat efek shadow, buat sebuah layer baru, drag layer baru ini ke urutan paling bawah (caranya tahan dengan mouse layer yang mau dipindah dan geser ke bawah). Pada layer yang baru ini, buat sebuah oval lagi berwarna hitam dan letakkan di bawah apel, konversi oval hitam ini ke movie clip dan pada bagian property, tambahkan efek blur dan naikkan nilai blurnya menjadi 35 - 40.


Langkah 9
Untuk finishing, buat sebuah layer baru dan drag layer baru ini ke urutan paling bawah, buah sebuah kotak berwarna gelap dan tekan Ctrl + G, atur besarnya kotak agar sama dengan stage, kemudia, di atas kotak ini buat lagi dengan oval tool fill color putih atau kuning, konversi oval ini ke movie clip dan terapkan efek blur, buat juga cahaya sorot dari atas serong kanan menggukan rectangle tool (R) dan konversi cahaya sorot ini ke movie clip dan atur efek blurnya.

Sunday, June 14, 2009

Membuat game flash matematika sederhana / how to make a simple math flash game

Dalam tutorial ini kita akan membuat sebuah game aritmatika sederhana menggunakan flash. Anda dapat menggunakan Macromedia Flash 8 atau Adobe Flash CS 3 dalam pembuatannya.

In this tutorial, we will create asimple arithmetic flash game. You can use Macromedia Flash 8 or Adobe Flash CS 3.

Langkah 1: Buka sebuah file baru dengan ukuran default (550 x 440) , ubah warna background menjadi hijau. Buatlah sebuah tulisan judul "Online Test". Selanjutnya buatlah sebuah kotak berwarna merah dengan garis tepi putih. Perhatikan Gambar.

1st Step: Open a new file with the default size (550 x 440), change the background color to be green. Create a title with a text and type "Online Test". Then make a box with a red as a fill color and white as a stroke color. See a picture.


Langkah 2 : Tambahkan di atas kotak merak tersebut dynamic text dan beri nama variabelnya "angka_1", Copy dynamic text tersebut dan pastekan di sampingnya, ubah nama variablenya menjadi "angka_2", sisipkan ditengah-tengahnya tanda tambah menggunakan static teks dan tanda sama dengan setelah teks angka_2. Kemudian buat lagi input teks dengan nama variabelnya "jawab", beri juga nama instance namenya dengan nama "answerBox" dan pilih "show border around text". Perhatikan gambar

2nd step : Add a dynamic text above red box and name it variable with "angka_1", Copy text, and paste a dynamic , change the variable name to "angka_2", Add a plus symbol with static text between two dynamic texts and also add a equal symbol after a second dynamic text, then make input text with variable name "jawab", also give the instance name with "answerBox" and select "show border around text". See a picture



Langkah 3 : buat 2 buah tombol di bawah kotak merah masing-masing dengan nama tombol random dan tombol check.

3rd step: create 2 button below the red box and name with a random button and check button.


Langkah 4 : Buat sebuah movie clip dari static teks, misalnya "Correct Answer", beri nama instancenya "true_answer". Klik 2 kali movie clip tersebut untuk masuk ke area movie clip "true_answer", Klik frame 1, tahan dan geser ke frame 2, sehingga tidak ada objek di frame 1, lalu klik frame 10, klik kanan dan pilih insert keyframe. kembali ke frame 1 tekan tombol F9 dan masukkan kode berikut:

stop();

4th step: Create a movie clip from the static text,for example "Correct Answer", give the instance name with "true_answer". Click 2 times thisthe movie clip into movie clip area "true_answer", Click frame 1, hold and slide to the frame 2, so there is no object in the frame 1, then click on frame 10, right-click and select insert keyframe. Back to frame 1 and press F9 key and enter the following code:

stop ();

Langkah 5 : Ulangi langkah 4 untuk jawaban yang salah, namun tulisannya adalah "Wrong Answer, try again". beri nama instancenya "wrong_answer".

5th step : Repeat step 4 for the wrong answers, but the letter is "Wrong answer, try again". give instance name with "wrong_answer".


Langkah 6 : Kembali ke stage utama, tambahkan sebuah layer action, klik frame 1 layer action dan masukkan action script berikut:

6th Step: Back to the main stage, add a layer action, click action layer frame 1 and enter the following action script:

problem();
function problem() {
var _loc1 = 2+random(8);
var _loc2 = 2+random(8);
angka_1 = Math.floor(_loc1);
angka_2 = Math.floor(_loc2);
jawab = "";
Selection.setFocus(_root.answerBox);
stage.focus = _root.answerBox;
_root.answerBox.setSelection(0, 1);
}
function check_answer() {
if (angka_1+angka_2 == jawab) {
true_answer.play();
problem();
} else {
wrong_answer.play();
Selection.setFocus(_root.answerBox);
}
}

Langkah 7 : Klik tombol random dan masukkan action script berikut:

7th step : Click a random button and enter the following code:

on (press) {
problem();
}

Langkah 8: Klik tombol check dan masukkan action script berikut:

8th step : Click a check button and enter the following code:

on (press) {
check_answer();
}

Silahkan test movie, jika langkah di atas benar, maka hasilnya adalah sebagai berikut

Try to test movie, if the above steps correctly, the results are as follows:



Arithmetic Challenge


Comments system

Disqus Shortname

Disqus Shortname

Comments System

Disqus Shortname

Comments system