Saturday 14 July 2012

Contoh Sederhana di animasi Gerak Acak Flash




[Bunga-bunga - mereka hidup! ]

Tutorial ini akan membantu Anda untuk menciptakan efek di atas. Anda juga akan belajar aksi 'balik layar' dari kode yang membuat benda bergerak secara acak.
Inilah Cara
Langkah-langkah berikut dirancang untuk bekerja di Flash MX 2004, tetapi mereka harus bekerja di Flash MX dan mungkin bahkan Flash 5:
  1. Buat dokumen baru di Flash. Mengatur lebar film untuk 300 dan tinggi film sampai 200. Set frame rate Anda Flash film ke 25.
  2. Sekarang, menggambar sebuah lingkaran penuh-dalam menggunakan alat Circle.Area gambar Anda akan terlihat seperti gambar berikut:
[Menggambar lingkaran]
  1. Setelah lingkaran telah ditarik, pilih lingkaran dan tekan F8. Para Convert ke kotak dialog Symbol akan muncul. Pilih opsi untuk Movie Clip dan tekan OK.
  2. Pilih klip video yang baru dikonversi Anda jika tidak dipilih. Berikan klip film Anda nama contoh, dot :
[Memberikan film Anda klip contoh nama 'dot']
  1. Sekarang, pilih klip video Anda dan tekan F9. Kotak dialog tindakan akan muncul.Salin dan sisipkan bagian kode berikut:
onClipEvent (load) {
//data you may want to change
width = 300;
height = 200;
speed = Math.round(Math.random()*2)+1;
//initial positions
x = this._x=Math.random()*width;
y = this._y=Math.random()*height;
x_new = Math.random()*width;
y_new = Math.random()*height;
}
onClipEvent (enterFrame) {
//x movement
if (x_new>this._x) {
sign_x = 1;
} else {
sign_x = -1;
}
dx = Math.abs(x_new-this._x);
if ((dx>speed) || (dx<-speed)) {
this._x += sign_x*speed;
} else {
x_new = Math.random()*width;
}
//y movement
if (y_new>this._y) {
sign_y = 1;
} else {
sign_y = -1;
}
dy = Math.abs(y_new-this._y);
if ((dy>speed) || (dy<-speed)) {
this._y += sign_y*speed;
} else {
y_new = Math.random()*height;
}
}
  1. Sekarang, pilih bingkai pertama dari garis waktu Anda. Tekan F9 lagi untuk menampilkan kotak dialog untuk Tindakan frame. Salin dan sisipkan bagian kode berikut ke dalam bingkai bahwa:
i = 0;
while (i<25) {
//duplicateMovieClip(dot, "dot"+i, i);
dot.duplicateMovieClip("dot"+ii);
i++;
}
  1. Simpan file ini. Berikan nama yang Anda inginkan. Buka File | Publish Preview | HTML. Anda akan melihat sesuatu yang sangat mirip dengan apa yang Anda lihat dalam animasi contoh di atas. Tentu saja, Anda akan melihat lingkaran bergerak secara acak sebagai lawan secara acak bergerak grafis.



Dalam pembahasan sebelumnya , Anda belajar bagaimana untuk menyalin dan menyisipkan kode. Pada halaman ini, Anda benar-benar akan mempelajari mengapa ActionScript sebenarnya menggerakkan lingkaran atau objek lain secara acak sekitar.

Membedah Kode 
saya akan mencoba menjelaskan setiap baris atau bagian kode dan apa menyelesaikan:


onClipEvent (load) {

Hal ini memastikan bahwa kode yang terkandung dalam bagian ini dijalankan langsung ketika beban film. Kode hanya mengeksekusi sekali, dan tidak akan diulang terus menerus.Ini adalah tempat yang baik untuk mendefinisikan sifat-sifat film Anda yang akan tetap konstan sepanjang kehidupan film Anda.
/ / Data yang Anda mungkin ingin mengubah
width = 300;
height = 200;
Kedua baris menentukan batas-batas gerakan acak. Untuk sebagian besar, mereka akan menjadi wakil dari lebar film Anda dan tinggi. Anda harus mengubah dimensi untuk lebar dan tinggi jika dimensi film Anda berbeda.
speed = Math.round(Math.random()*2)+1;
Kontrol kecepatan variabel, baik, seberapa cepat bergerak film klip. Aku mengatur kecepatan menjadi nilai acak antara 1 dan 3, dan masing-masing klip video dapat bergerak dengan kecepatan berbeda. Tentu saja, Anda dapat mengubah nilai ke sejumlah konstan jika Anda ingin semua klip video Anda untuk bergerak dengan kecepatan yang sama.
/ / Posisi awal
x = this._x=Math.random()*width;
y = this._y=Math.random()*height;
Kedua nilai menentukan posisi awal klip video Anda. Karena aku ingin setiap film mulai dari lokasi yang berbeda, Anda akan melihat bahwa posisi terjadi secara acak dalam batas-batas lebar film Anda dan tinggi. Anda dapat melihat fitur yang dengan melihat variabellebar dan tinggi membuat penampilan mereka bersama dengan fungsi acak.
Jika Anda ingin, Anda dapat menulis dua baris di atas menggunakan empat baris seperti berikut:
/ / Posisi awal
x = Math.random()*width;
y = Math.random()*height;
this._x = x;
this._y = y;
Karena x dan y yang digunakan dua kali, saya hanya dikombinasikan mereka masing-masing ke dalam satu baris seperti apa yang Anda lihat dalam kode dalam animasi Flash Anda.
x_new = Math.random()*width;
y_new = Math.random()*height;
Garis ini menentukan di mana posisi akhir klip video Anda akan. Anda memiliki posisi awal yang saya dijelaskan di bagian atas, dan sekarang Anda memiliki posisi akhir. Perhatikan bahwa posisi ini juga memperhitungkan lebar dan tinggi dari film Anda dengan menggunakan favorit kami lebar dan tinggi variabel.
onClipEvent (enterFrame) {
Ini memberitahu Flash yang setiap bagian dari kode yang terdapat setelah baris ini akan mengeksekusi terus menerus tergantung pada frame rate Anda. Jika frame rate Anda adalah 25, kode akan mengeksekusi 25 kali per detik.

Ini sangat berbeda dari pernyataan onLoad kami sebelumnya. Dalam aksi onLoad kita sebelumnya, kode akan mengeksekusi sekali ketika klip video yang dimuat. enterFrame adalah, seperti saya jelaskan di atas, loop terus menerus.
Gerakan 
Bagian berikut ini mencakup secara rinci bagaimana klip video bergerak secara horizontal:
/ / X gerakan
if (x_new>this._x) {
sign_x = 1;
} else {
sign_x = -1;
}

Bagian dari kode ini sangat penting. Bagian ini menentukan arah partikel akan bergerak.Pada dasarnya, dalam laporan jika, saya cek untuk melihat di mana partikel saat ini (this._x), dan di mana ia akan kemudian (x_new).

Jika posisi partikel adalah di sebelah KIRI posisi terakhir, itu berarti partikel perlu bergerak KANAN untuk sampai ke posisi akhir. Sejak tepat adalah positif dengan terhadap sumbu (x) horizontal, sign_x variabel adalah angka positif.
Sebaliknya, jika partikel perlu kepala KIRI karena tujuan akhir adalah di sebelah kiri di mana partikel saat ini, arah yang ditentukan oleh sign_x mengambil angka negatif.
Saya menggunakan -1 dan 1 sebagai nilai karena saya hanya tertarik pada nilai tanda arah.Seperti yang akan Anda lihat di bagian berikutnya, jika saya menggunakan nomor dengan kekuatan lain dari 1, maka akan mengacaukan kecepatan di mana partikel bergerak masuk
dx = Math.abs(x_new-this._x);
Saya menentukan di baris ini besarnya perubahan antara mana partikel itu dan di mana akan. Saya menempatkan seluruh pernyataan dalam fungsi nilai absolut (Math.abs) karena saya tidak terlalu tertarik pada tanda jawaban baru. Misalnya, jika x_new adalah di sebelah kiri this._x, jumlah itu akan berakhir menjadi negatif!
Pada dasarnya, sebagai klip film Anda mendekati tujuan akhir, nilai dx akan menurun menuju nol.
if ((dx>speed) || (dx<-speed)) {
this._x += sign_x*speed;
} else {
x_new = Math.random()*width;
}
Sementara semua bagian kode penting, bagian ini mungkin adalah = PALING penting)
Jika pernyataan cek untuk melihat apakah klip video berada dalam area kecil antara kecepatan dan kecepatan. Selama klip video berada di luar daerah itu, klip video akan bergerak pada kecepatan yang ditentukan dalam pernyataan (beban) onClipEvent.
Perhatikan bahwa kecepatan dikalikan dengan variabel sign_x. Jika Anda ingat, kami sebelumnya belajar bagaimana tanda dari variabel sign_x ditentukan. Dengan begitu, jika sign_x variabel adalah negatif, this._x meningkat dengan angka negatif - karena itu bergerak pergi. Jika sign_x positif, posisi klip video bergerak ke kanan.
if ((dx>speed) || (dx<-speed)) {
this._x += sign_x*speed;
} else {
x_new = Math.random()*width;
}
Jika klip video tidak menjadi sangat dekat dengan tujuan akhir, posisi baru ditentukan. Klip video tidak pernah bersandar dan selalu bergerak. Baris kode ini memastikan bahwa.
Penjelasan untuk gerakan y adalah hampir persis sama dengan penjelasan untuk gerakan x.Saya mencoba untuk menjaga nama variabel yang sama dengan pengecualian dari _x dan _y ujungnya, sehingga Anda harus dapat beradaptasi pengetahuan Anda tentang horizontal (x) gerakan untuk gerakan (y) vertikal.
Ambil Source Code


untuk melihat lebih banyak tutorial Flas silahkan Klik Disini

No comments:

Post a Comment