Kamis, 9 September 2010 Log in | Register
       
 
 :: our program
 :: free download
   lanjut...


 :: hot news

lanjut...


 :: mailing list
masukkan e-mail Anda:

Anda akan langsung tersubscribe langsung dengan milis diskusi mengenai dunia Computer Graphic Arts

 
halaman depan | tutorial
Versi Cetak | Kirim ke teman
Duplicating Movie Clip
2009-01-23

Ada kalanya kita menginginkan gambar animasi yang sama muncul berkali - kali dalam movie flash kita. Kita ingin supaya masing - masing gambar dapat kita munculkan di lokasi yang berbeda, dengan sifat yang berbeda pula. Misalnya dalam game pesawat, kita dapat membuat gambar pesawat musuh sekali saja, tetapi menempatkan gambar pesawat tersebut berkali - kali, di lokasi yang berbeda pula. Kita dapat juga mengatur supaya setiap pesawat tersebut memiliki kekuatan dan senjata yang berbeda.

Flash memungkinkan kita melakukan hal ini dengan perintah ActionScript yang bernama duplicateMovieClip. Dalam tutorial ini, saya akan membuat contoh penduplikasian movie clip yang berupa gambar anak panah. Masing - masing anak panah dapat memiliki warna dan arah gerakan yang berbeda. Silakan lihat hasil animasinya di bawah ini:


Di dalam stage saya menyediakan sebuah movie clip berisi gambar panah yang saya beri nama Arrow_mc. Movie clip anak panah ini saya sebut sebagai "original arrow". Movie clip inilah yang akan diduplicate bila saya menekan tombol "duplicate". Susunan stagenya dapat dilihat pada gambar di bawah ini:


Di frame 1 pada Layer1 terdapat perintah ActionScript sebagai berikut:

counter = 1;
first_arrow = true;
speed = 10;

// Store the orientation of the ORIGINAL arrow.
// The orientation of the first arrow determines
// the orientation of the duplicates.
// ORIENTATION:
// ============
// Facing to the right side = true
// Facing to the left side = false
original_arrow_orientation = true;


Variabel "counter" saya gunakan untuk menghitung jumlah duplikat movie clip. Sedangkan variabel "first_arrow" merupakan flag (penanda) bahwa movie clip yang saat ini aktif adalah anak panah pertama, setelah anak panah pertama ditampilkan, variabel ini akan diset menjadi false. Variabel "speed" digunakan untuk menyimpan nilai kecepatan gerak anak panah. Variabel "original_arrow_orientation" menyimpan arah anak panah, ke kiri atau ke kanan. Jika anak panah menghadap ke kanan, variabel ini akan diset menjadi true, jika menghadap ke kiri akan diset menjadi false.


Movie clip Arrow_mc berisi instruksi berikut ini:

onClipEvent(load) {
direction = 1 * Math.round(Math.random());
this._x = determineDirection(direction);
if (direction == 0) {
facing_right = true;
my_color = new Color(this);
my_color.setRGB(0x000000);
}
if (direction == 1) {
facing_right = false;
my_color = new Color(this);
my_color.setRGB(0xff0000);
}

if (_root.first_arrow) {
_root.original_arrow_orientation = facing_right;
_root.original_arrow_orientation_txt = facing_right;
_root.first_arrow = false;
if (direction == 1) {
this._xscale = -1 * this._xscale;
}
}
// Check whether the original arrow orientation
// is not the same as the current one
else if (_root.original_arrow_orientation != facing_right) {
this._xscale = -1 * this._xscale;
}

_root.facing_right_txt = facing_right;

function determineDirection(dir) {
if (dir == 0) {
PosX = 0;
}
if (dir == 1) {
PosX = 550;
}

return PosX;
}
}

onClipEvent(enterFrame) {
if (direction == 0) {
this._x += _root.speed;
}
if (direction == 1) {
this._x -= _root.speed;
}
}


Pada saat loading, movie clip ini akan menghitung nilai variabel "direction", yang ditentukan secara random. Jika variabel ini bernilai 0, maka anak panah dibuat menghadap dan bergerak ke kanan, jika variabel ini bernilai 1, maka anak panah dibuat menghadap dan bergerak ke kiri. Anak panah yang menghadap dan bergerak ke kanan diberi warna hitam, sedangkan yang menghadap dan bergerak ke kiri diberi warna merah.

Berikutnya, arah menghadap dan gerak anak pertama disimpan di variabel "original_arrow_orientation". Informasi arah menghadap dan gerak ini saya tampilkan di stage di dalam dynamic text yang saya beri nama "_root.original_arrow_orientation_txt". Jika hasil perhitungan arahnya menyatakan bahwa anak panah menghadap ke kanan, maka arah anak panah dibalik dengan instruksi:

if (direction == 1) {
this._xscale = -1 * this._xscale;

Jika anak panah hasil duplikat akan ditampilkan,
akan dilakukan pemeriksaan arah anak panah hasil duplikat dibandingkan dengan arah anak panah original. Jika arahnya berlawanan, maka arah anak panah hasil duplikat harus dibalik. Instruksinya adalah seperti ini:

// Check whether the original arrow orientation
// is not the same as the current one
else if (_root.original_arrow_orientation != facing_right) {
this._xscale = -1 * this._xscale;


Function "determineDirection" berfungsi untuk menempatkan posisi awal anak panah. Jika menghadap dan bergerak ke kanan, maka posisi awalnya akan diletakkan di ujung kiri movie. Jika anak panah menghadap dan bergerak ke kiri, maka posisi awalnya diletakkan di ujung kanan movie.


Tombol "duplicate" berisi instruksi sebagai berikut:

on (release) {
if (counter < 6) {
counter_txt = counter;
duplicateMovieClip(_root.Arrow_mc, "Arrow_mc" + counter, counter);
setProperty(_root["Arrow_mc" + counter], _y, _root.Arrow_mc._y + counter * 70);
counter++;
}


Jumlah movie clip duplikat dibatasi maksimal 5 buah saja.


Sedangkan tombol "reset" berfungsi untuk mengembalikan nilai variabel "counter" menjadi 1. Sehingga jika setelah saya menekan tombol "reset", lalu menekan tombol "duplicate", maka anak panah akan digambar dan dianimasi ulang dari posisi awal.

on (release) {
counter = 1;
counter_txt = counter;
}

Riman

 




Ada 0 komentar untuk berita ini. Silakan login untuk memberikan komentar.



 

 

 

 

 
© Copyright 2010 by Digital Studio Workshop. All rights reserved.