1.

Membuat Animasi Fantastis dengan Action Script

Untuk membuat animasi dalam flash terdapat 3 metode yaitu dengan metode frame by frame, motion tween dan menggunakan action
script. ketiganya akan menghasilkan output yang tidak jauh berbeda. Pada postingan kali ini saya akan memberikan tutorial membuat
animasi fantastis dengan menggunakan action script.

Pertama buat kotak dengan ukuran 15150, kemudian ubah menjadi movieclip. Tentukan registrasi point di posisi bawah. beri nama bar
pada instance name.

Seleksi movieclip bar, buka panel action (f9) masukan syntak di bawah ini:

1
2
3
4

onClipEvent(enterFrame)
{
this._rotation -=5;
}

Klik frame 1, pada panel action ketikan syntak di bawah ini:

1
2
3
4
5
6
7

for(i=0;i<=700; i=i+20)
{
duplicateMovieClip(_root.bar,"bar"+i,i);
_root["bar"+i]._x=i;
_root["bar"+i]._rotation
-=700/i*100;
_
root["bar"+i]._alpha =i/700*100;
}
_root.bar._visible=0;

Jalankan Movie.

2. Mengontrol Gerakan Karakter Game

Tutorial desain game kali ini akan membahas bagaimana cara mengontrol gerakan karakter gamesebuah objek atau karakter dalam
game yang biasa digunakan sebagai player.

1. Buat sebuah gambar kendaraan (sebagai contoh saya menggambarkan kendaraan panser).

2. Ubah menjadi movieclip dengan cara klik kanan pada objek gambar, pilih Convert to Symbol. Beri nama kendaraan.

3. Seleksi movieclip kendaraan, buka panel action lalu ketikan script berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
this._x -= 10;
this._rotation = 270;
} else if (Key.isDown(Key.RIGHT)) {
this._x += 10;
this._rotation = 90;
} else if (Key.isDown(Key.UP)) {
this._y -= 10;
this._rotation = 0;
} else if (Key.isDown(Key.DOWN)) {
this._y += 10;
this._rotation = 180;
}
}

4. Test Movie dengan menekan Ctrl+Enter.

3. [AS3]Membuat Animasi Efek Matriks

Pernahkah anda menonton film The Matrix Trilogy? Jika iya anda pasti pernah melihat sebuah efek tulisan atau karakter berwarna hijau
yang berjatuhan. Sebenarnya efek tersebut dapat kita buat dengan flash dan action script.

Caranya mudah, disini anda tidak perlu menggunakan Tool apapun untuk membuat nya. Anda cukup membuka panel action, bermain
logika dan beberapa baris listing program actionscript.

Ikuti langkah-langkah di bawah ini:

1. Buat dokumen baru.

2. Buka panel properties, ubah warna background stage menjadi hitam.

3. Buka panel action, 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

var matrix:Array=new Array();

addEventListener(Event.ENTER_FRAME, onframe);
for (var j:int=51; j>=1; j--)
{
//membuat objek teks dan menentukan jenis huruf
var t:TextField=new TextField();
var format:TextFormat = new TextFormat("Bookshelf Symbol
7",14,"0x00FF33");
t.defaultTextFormat = format;
//mengacak posisi huruf
t.y = Math.random()*300;
t.x=Math.random()*550;
addChild(t);
matrix.push(t);
}
function onframe(event:Event)
{
for (var i:int=1; i400)
{
matrix[i].y=0;
}
}
}

4. Selesai, jalankan program

Jika ingin mengganti jenis huruf, cukup ganti Bookshelf Symbol 7 dengan jenis huruf yang anda inginkan.

Jika karakter yang jatuh berupa angka biner (1 dan 0) ganti baris program di bawah ini:

var char:String =

1 String.fromCharCode(Math.floor(Math.random() * 26) + 64);

menjadi :

1 var char:int=Math.round(Math.random()*1);
4. [AS3]Membuat Animasi Typing Text
Mungkin anda yang suka main-main dengan slide presentasi power point sering melihat efek animasi typing text.

Typing Text

merupakan animasi teks yang memunculkan huruf demi huruf seakan-akan tulisan tersebut sedang di ketik. Tutorial kali ini, saya akan
mencoba membuat animasi Typing Text hanya dengan menggunakan action script yang cukup sederhana.

1.

Buat

dokumen

baru

action

script

2. Ubah warna stage menjadi warna hitam dengan masuk ke panel properties.

3. Aktifkan Text Tool (T), buat sebuah Teks Area dengan type Dynamic Text. Pada bagian instance name, beri nama display. Pada bagian
Line Type, pilih Multiline. Lebih jelasnya lihat gambar di bawah ini :

4. Buka panel action, kemudian ketikan script berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var myTeks:String="Masukan kata-kata anda di sini";

//variable myArray akan menampung data pada variable
myTeks
var myArray:Array=myTeks.split("");
//event
addEventListener(Event.ENTER_FRAME, teksLoop);
function teksLoop(event:Event)
{
if(myArray.length>0)
{
//memunculkan huruf satu demi satu
display.appendText(myArray.shift());
}
else
{
removeEventListener(Event.ENTER_FRAME, teksLoop);
}
}

6. Jalankan Movie. Maka hasilnya seperti berikut:

5. Belajar Fisika Dasar dengan Action Script #2

Pada postingan sebelumnya saya telah membahas tentang kecepatan suatu benda dan bagaimana penerapannya di dalam flash. Pada
pembelajaran fisika dasar pada actionscript kali ini saya akan menjelaskan apa itu percepatan dan bagaimana penerapannya dalam flash.

Percepatan adalah Suatu besaran dalam Fisika yang dipengaruhi oleh besarnya kecepatan dan waktu yang ditempuh. (Percepatan
mempunyai kecepatan yang tidak tetap.)

a=v/t atau a=s/t2

contoh;
seorang atlet berlari dengan kecepatan 1 meter/detik. waktu yang diperlukan untuk melakukan percepatan sebesar 2 detik. maka:
a=v/t

1/2=

0.5

Jadi, percepatannya adalah 0.5 meter/detik .

2

Penerapan dalam flash:

1.
2.

Buat
Buat

movieclip
Text

box

mobil
di

sebelah

dan
kiri

beri

nama

bawah,

pada

3.

Klik frame 1. ketikan script berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13

speed=0;
accel=.2;
_root.onEnterFrame=function() {
speed +=accel;
mobil._x +=speed;
if(speed>=30) {
accel=0;
}
if(mobil._x>=600) {
mobil._x=0;
}
display=Math.floor(speed)+" km/jam";
}

4.

Jalankan Movie.

mobil
bagian

pada
variable,

instance
beri

nama

name.
display.

6. [AS3]Membuat Animasi Partikel 3D

Kata siapa flash tidak bisa membuat animasi 3d, meskipun pada dasarnya flash bekerja pada area 2 dimensi, tetapi flash dapat membuat
animasi efek 3d dengan bantuan actionscript. Untuk itu, ikuti tutorial berikut ini:

1. Buat dokumen flash baru (actionscript 3.0).

2. Pertama,ubah warna background stage menjadi hitam.

3. Buatlah movieclip baru dengan memilih menu Insert > New Symbol. Beri nama Particle1. Jangan lupa, centang pilihan Export for
Actionscript kemudian isi nama class dengan Particle1.

4. Gambarlah sebuah garis seperti gambar berikut:

5. Ubah gambar di atas menjadi objek movieclip.

6.

Buat

animasi

berputar

seperti

Tampilan animasi

7. Sekarang kembali ke scene 1. Buka panel action, kemudian ketikan script berikut:

1
2
3
4
5
6
7
8

import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
var pos:int=50;//menentukan posisi awal objek
var rot:int=0; //menentukan perputaran objek
addEventListener(Event.ENTER_FRAME, animationLoop);

gambar

berikut:

9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function animationLoop(e:Event)
{
var obj:Particle1=new Particle1(); //memanggil objek
obj.x=pos;
obj.y=pos;
obj.rotation=rot;
addChild(obj);
pos++;
rot++;
}
//membatasi perulangan animasi
var timer:Timer=new Timer(1000,12);
timer.addEventListener(TimerEvent.TIMER_COMPLETE,
stopLoop);
timer.start();
function stopLoop(e:TimerEvent)
{
removeEventListener(Event.ENTER_FRAME, animationLoop);
}

8. Jalankan movie.

[AS3]Membuat Game Edukasi Drag and Drop (bag.2)

Sebelumnya, anda sudah mempelajari konsep dasar Drag and Drop. Sekarang, kita coba membuat game edukasi drag and drop dengan
kode program yang lebih kompleks.

1. Buat dokumen baru (ActionScript 3.0)

2. Buat 3 buah movieclip bergambar burung, anjing dan hiu. kemudian beri nama instance masing-masing dengan bird , dog
dan shark.

3. Selanjutnya kita buat objek target dengan nama yang sama dengan langkah ke-2. Hanya saja dibelakang nama kita tambahkan
Target.

4. Buka panel action, ketikan script berikut:

1 var ypos:int;

2
3 var xpos:int;
4
5 dragObjek(dog,bird,shark);
6
7 function getPos(target:Object) {
8
xpos=target.x;

9
1
0
1
1

ypos=target.y;

1
2
1
3

function startdrag(event:MouseEvent) {

1
4

event.target.startDrag(true);

1
5

getPos(event.target);

1
6}
1
7
1
8

function stopdrag(event:MouseEvent) {

if
1
9 (event.target.hitTestObject(getChildByName(event.target.name+"
Target"))) {

2
0
2

event.target.x=getChildByName(event.target.name+"Target"

1 ).x;
2
2
2
3

event.target.y=getChildByName(event.target.name+"Target"
).y;

2
4

} else {

2
5

event.target.x=xpos;

2
6

event.target.y=ypos;

2
7
}

2
8
2
9

event.target.stopDrag();
}

3
0
3
1
3
2

function dragObjek(... objects) {

for (var i:int = 0; i < objects.length; i++) {

3
objects[i].addEventListener(MouseEvent.MOUSE_DOWN,
3 startdrag);
3
4
objects[i].addEventListener(MouseEvent.MOUSE_UP,

3 stopdrag);
5
3
6
3
7

3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
}
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5. Jalankan program.

Hasilnya adalah sebagai berikut:

Download Source
[AS2] Membuat Game Edukasi Hangman
Pernahkah anda memainkan game hangaroo atau hangman? nah, disitu pemain harus menyelesaikan susunan kata atau kalimat yang
tidak lengkap hingga membentuk suatu kalimat tertentu sesuai dengan petunjuk yang diberikan. Tutorial kali ini, bengkelflash akan
mencoba menjelaskan cara pembuatan game edukasi hangman.

1. Buat objek alfabet dari A sampai Z seperti gambar di bawah ini:

2. Ubah masing-masing objek menjadi simbol button dengan cara klik kanan pada objek kemudian pilih Convert to Symbol.

3. Beri nama A pada type pilih button.

4. Lakukan langkah 2 dan 3 pada objek alfabet yang lainnya.

5. Klik tombol abjad A, kemudian buka panel action. Masukan script di bawah ini:

1 on(release)
2 {
3 cekChar("a");
4
5 }
6. Lakukan langkah 2 pada tombol abjad lainnya dengan mengganti karakter yang ada pada fungsi cekChar(); misal pada tombol B.
maka fungsi cekChar menjadi cekChar(b); dst.

7. Buat TextField dengan desain seperti berikut:

8. Setelah itu, klik frame 1, buka panel action kemudian ketikan script di bawah ini:

stop();

var phrase:String="bengkelflash"; //kata yang ditebak

var tampil:Array=new Array();

numWrong=5;

count=0;

6
7
8
9
10
11

for(i=0;i<phrase.length;i++)
{
tampil.push("_");
count++;
if(phrase.charCodeAt(i)==32)
{

12 count--;
13 tampil[i]="

";

14 }
15 }
16 petunjuk.text="Hint: Situs pembelajaran ilmu flash dan
17
18
19

game programming";
display.text=tampil;
//fungsi mengecek karakter
function cekChar(char:String)

20 {
21 kataTepat=false;
22 for(i=0;i<phrase.length;i++)
23 {
24 if(tampil[i]!=char)
25 {
26 //cek apakah karakter yg di input ada pada variable

27 phrase?
28 if(phrase.charAt(i).toLowerCase()==char)
29 {
30
31
32
33

//jika iya, tampilkan

tampil[i]=char;
display.text=tampil;
kataTepat=true;
count--;

34
35
36

}
}
}

37 //jika kata yang di input salah, kurangi nilai numWrong

38 if(!kataTepat)
39 {
40 numWrong--;
41 }
42 //jika semua kata terjawab, anda menang
43 if(count==0)
44
45
46
47

{
nextFrame();
}
//jika toleransi kesalahan 0, anda kalah
if(numWrong==0)

48
49
50

{
gotoAndStop("kalah");
}

51 }
52

53
9. Buat blank keyframe(F7) pada frame 2. Buat teks dengan tulisan Anda Menang!!!.

11. Buka panel action kemudian ketikan script berikut:

1 stop();
12. Buat Blank Keyframe pada frame 3. Buat teks dengan tulisan Anda Kalah.

13. Buat sebuah tombol dengan label Main Lagi. Kemudian beri script seperti di bawah ini:

1 on(release)
2 {
3

gotoAndStop(1);

4 }
14. Letakan tombol Main Lagi. Pada frame 2 dan 3.

15. Selesai. Jalankan movie.

Download Source Code

Related Posts