Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)
Dua kali sebulan, kami mengunjungi kembali beberapa posting favorit pembaca kami dari sepanjang sejarah Activetuts+. Tutorial ini pertama kali diterbitkan pada Mei 2009.
Menggunakan ActionScript 3.0, kita akan membuat Latar Belakang Animasi yang keren yang dapat kita gunakan di Layar Menu atau sebagai Visualizer Musik.
Pratinjau Hasil Akhir
Mari kita lihat apa yang akan kita kerjakan:
Langkah 1: Ringkasan Singkat
Kita akan membuat Kelas yang akan menangani seluruh efek. Saat Anda memanggil kelasnya, Anda akan dapat mengubah jumlah cahaya, warna, alfa, ukuran, arah, kecepatan, dan kualitas filter Blur. Dengan cara ini dimungkinkan untuk mencapai banyak hasil yang berbeda saat menggunakannya. Anda juga dapat menggunakan latar belakang yang Anda inginkan.
Langkah 2: Dokumen .fla
Buat dokumen ActionScript 3.0 baru (File > New...). Atur ukuran Stage ke dimensi yang Anda inginkan, saya telah menggunakan 600 x 300 px.
Langkah 3: Latar Belakang Anda
Tambahkan atau gambarkan gambar untuk digunakan sebagai latar belakang, saya telah menggunakan gradien biru sederhana (#02C7FB, #1F63B4).
Langkah 4: Layer
Ubah nama layer pertama menjadi "Background" lalu buat yang lain dan beri nama "Code". Anda dapat mengunci layer "Code" untuk menghindari penempatan gambar yang tidak diinginkan di sana.
Langkah 5: ActionScript
Simpan pekerjaan Anda dan mari masuk ke kodenya!
Saya berasumsi Anda sudah memiliki pemahaman dasar tentang ActionScript 3.0, jika Anda memiliki keraguan kata kunci tertentu, silakan merujuk ke Bantuan Flash (F1).
Buat file ActionScript baru (File > New...).
Langkah 6: Mengimpor Kelas yang Diperlukan
package Classes
{
/* Import required classes */
import flash.display.MovieClip;
import flash.filters.BitmapFilter;
import flash.filters.BlurFilter;
import flash.events.Event; Di sini kita mengimpor Kelas yang akan kita gunakan, ingat bahwa kata di sebelah "package" adalah nama folder tempat Kelas kita berada.
Langkah 7: Memperluas Kelas
//We need to extend the class so we can use the addChild() method.
public class Lights extends MovieClip
{ Memperluas kelas MovieClip akan memungkinkan kelas kita mewarisi semua metode, properti, dan fungsi yang dimiliki MovieClip, dalam hal ini kita menggunakannya untuk mendapatkan akses ke metode addChild().
Langkah 8: Variabel-variabel
Meskipun mereka memiliki cukup banyak nama yang jelas, saya akan menambahkan komentar singkat pada setiap var untuk memastikan itu jelas. Mereka mendapatkan nilainya dari parameter fungsi Main.
private var lightsNumber:int; //The number of Lights on Stage
private var xSpeed:int; //The horizontal speed the Lights have
private var ySpeed:int; //Vertical Speed
private var lightsDir:String; //Direction the Lights are going, this can be Up, Down, Left or Right
private var areaW:int; //The width of the area where the effect will take place
private var areaH:int; //Height
private var lights:Array = new Array(); //This array will store all the Lights MovieClips so we can use them outside the For where we are going to create them. Langkah 9: Fungsi Main
/* Main function */
public function init(areaWidth:int, areaHeight:int, numberOfLights:int, lightSize:int, lightColor:uint, minimumScale:Number, hSpeed:int, vSpeed:int, dir:String, quality:int):void
{
areaW = areaWidth;
areaH = areaHeight;
lightsNumber = numberOfLights;
lightsDir = dir; Ini adalah fungsi yang kita butuhkan untuk memulai efek, kita juga mengatur nilai variabel dalam kode ini.
Langkah 10: Membuat Cahaya
for (var i:int = 0; i < numberOfLights; i++)
{
/* Create the specified number of lights */
var light:MovieClip = new MovieClip();
/* Set random speed to x and y based on the params */
xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed);
ySpeed = Math.round((Math.random() * vSpeed) + 0.5);
light.xSpeed = xSpeed;
light.ySpeed = ySpeed;
/* Create lights */
light.graphics.beginFill(lightColor);
light.graphics.drawCircle(0, 0, lightSize / 2);
light.graphics.endFill(); Dalam kode ini kita menggunakan pernyataan "For" untuk membuat jumlah Lights yang ditetapkan pengguna dalam parameter dan menghitung kecepatan semi-acak untuk setiap Light.
Langkah 11: Posisi
Ini menetapkan posisi awal acak untuk Lights berdasarkan parameter Area.
light.x = Math.floor(Math.random() * areaWidth); light.y = Math.floor(Math.random() * areaHeight);
Langkah 12: Filter Blur
var b:int = Math.floor(Math.random() * 10) + 5; //Calculates a random Blur between 0-9 and adds 5 to the result. var blur:BitmapFilter = new BlurFilter(b,b,quality); //The BlurFilter object. var filterArray:Array = new Array(blur); //To apply the filter we need an array of filters. light.filters = filterArray; //Sets the filters array to the Light
Kode di atas menerapkan Blur. Ingat bahwa kode ini masih merupakan bagian dari For, jadi Lights mendapatkan Blurs yang berbeda.
Langkah 13: Alpha
light.alpha = Math.random() * 0.6 + 0.1;
Yang mudah; ini menetapkan properti alpha antara 0,1 dan 0,6.
Langkah 14: Skala
light.scaleX = Math.round(((Math.random() * (1-minimumScale)) + minimumScale) * 100) / 100; light.scaleY = light.scaleX;
Ini mengatur skala Lights antara ukuran asli dan parameter skala minimum. Kita menggunakan metode round untuk menghemat prosesor.
Langkah 15: Menambahkan Cahaya ke Panggung
addChild(light); /* Store lights in an array to use it later */ lights.push(light); /* Check for lights direction */ checkDirection();
Ini menambahkan Lighta ke Stage, lalu kita menyimpannya dalam Array untuk menggunakannya nanti. Ini juga fungsi checkDirection untuk melihat ke arah mana Lights akan pergi.
Langkah 16: Periksa Fungsi Arah
private function checkDirection():void
{
for (var i:int = 0; i < lights.length; i++)
{
switch ( lightsDir )
{
case "up" :
lights[i].addEventListener(Event.ENTER_FRAME, moveUp);
break;
case "down" :
lights[i].addEventListener(Event.ENTER_FRAME, moveDown);
break;
case "right" :
lights[i].addEventListener(Event.ENTER_FRAME, moveRight);
break;
case "left" :
lights[i].addEventListener(Event.ENTER_FRAME, moveLeft);
break;
default :
trace("Invalid Direction!");
}
}
} Di sini kita menggunakan for untuk mendapatkan akses ke semua Lights di Array, lalu memeriksa variabel arah untuk menentukan ke mana harus memindahkan Lights. Bergantung pada arahnya, kita menambahkan listener ke fungsi yang sesuai.
Langkah 17: Fungsi Move
Bagian selanjutnya ini mungkin tampak sedikit rumit, tetapi lebih mudah daripada yang Anda pikirkan. Pada dasarnya, ini menggerakkan Light tergantung pada kecepatan yang dihitung dalam fungsi Main, kemudian memeriksa apakah Light telah "meninggalkan" Area yang berefek. Jika itu yang terjadi, itu menetapkan posisi acak yang bertentangan dengan arah yang dituju Light.
private function moveUp(e:Event):void
{
e.target.x += e.target.xSpeed;
e.target.y-=e.target.ySpeed;
/* Reset light position, Y first, then X */
if (e.target.y + (e.target.height / 2) < 0)
{
e.target.y = areaH + (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
{
e.target.y = areaH + (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
}
/* Move Down function */
private function moveDown(e:Event):void
{
e.target.x+=e.target.xSpeed;
e.target.y+=e.target.ySpeed;
/* Reset light position, Y first, then X */
if (e.target.y - (e.target.height / 2) > areaH)
{
e.target.y = 0 - (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
{
e.target.y = areaH + (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
}
/* Move Right function */
private function moveRight(e:Event):void
{
e.target.x+=e.target.ySpeed;
e.target.y+=e.target.xSpeed;
/* Reset light position, Y first, then X */
if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
{
e.target.x = 0 - (e.target.height / 2);
e.target.y = Math.floor(Math.random()*areaH);
}
if ((e.target.x - e.target.width / 2) > areaW)
{
e.target.x = 0 - (e.target.height / 2);
e.target.y = Math.floor(Math.random()*areaW);
}
}
/* Move Left function */
private function moveLeft(e:Event):void
{
e.target.x-=e.target.ySpeed;
e.target.y-=e.target.xSpeed;
/* Reset light position, Y first, then X */
if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
{
e.target.x = areaW + (e.target.width / 2);
e.target.y=Math.floor(Math.random()*areaH);
}
if ((e.target.x + e.target.width / 2) < 0)
{
e.target.x = areaW + (e.target.width / 2);
e.target.y=Math.floor(Math.random()*areaW);
}
}
}
} Langkah 18: Memanggil Fungsinya
Simpan kelas Anda (ingat bahwa file tersebut harus memiliki nama yang sama dengan Kelas) dan mari kita kembali ke Fla. Buka Actions Panel dan tulis:
import Classes.Lights; var light:Lights = new Lights(); light.init(600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2); addChild(light);
Itu saja! Uji movie Anda untuk melihat latar belakang animasi yang bagus!
Kesimpulan
Bermain dengan parameter di kelas akan menghasilkan banyak efek yang berbeda, cobalah mengubah latar belakang, mengatur kecepatan lebih lambat atau lebih cepat, menggunakan lebih banyak Lights, kurangi Blur dan sebagainya!
Saya harap Anda mempelajari sesuatu yang berguna, terima kasih telah membaca!
