Membuat Animasi Typing Text

Membuat Animasi Typing Text

[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.

Membuat Animasi Typing Text

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 :

Membuat Animasi Typing Text

4.  Buka panel action, kemudian ketikan script berikut:


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:

This movie requires Flash Player 9

Mudahkan! :)

Untuk mengatur cepat atau lambatnya animasi teks, anda tinggal mengatur kecepatan frame di panel properties pada bagian Frame rate.

Download Source Code

http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/google_48.png http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.bengkelflash.com/wp-content/plugins/sociofluid/images/twitter_48.png

Ikuti terus tutorial flash seputar Animasi lainnya di bengkelflash.com

Leave a Reply