09 Membuat Animasi Teks Autotyping Menggunakan Action Script pada Flash CS3

Dalam tutorial ini, saya akan menjelaskan bagaimana membuat animasi teks autotyping dengan hanya menggunakan sebuah dynamic text dan beberapa baris action script. Tutorial ini dapat digunakan pada Flash MX 2004, Flash 8, Flash CS3, dan versi yang terbaru Flash CS4.

Mungkin anda sering melihat animasi teks autotyping, yaitu animasi teks yang muncul per huruf seperti ketika kita mengetik pada monitor. Tapi, pada kesempatan kali ini, saya akan menjelaskan kepada anda semua bagaimana membuat animasi hanya menggunakan action script dan sebuah dynamic text. Langsung saja kita mulai tutorialnya.

1. Langkah selanjutnya, pada panel properties, anda atur seperti dibawah ini:
   • Ganti text typenya menjadi Dynamic Text (karena ini akan digunakan untuk menampilkan teks melalui ActionScript).
   • Namai instance name dengan monitor_txt.
   • Ganti line typenya menjadi multiline.
   • Ubah warna fontnya menjadi hijau.
   • Ubah ukuran fontnya menjadi 16.
   • Ubah fontnya menjadi Lucida Console.
2. Langkah pertama, silahkan anda buka program Flash anda, pada tutorial ini saya membuat dengan Flash CS3.
3. Buat dokumen baru.
4. Pada panel properties yang terletak di bagian bawah, anda klik tombol setting.
5. Kemudian akan muncul windows publish setting, kemudian anda ganti pada bagian version menjadi flash player 8 dan ganti ActionScript Version menjadi ActionScript 2.0. lalu tekan tombol OK.
   
6. Jika sudah, lalu anda ganti backgroundnya menjadi berwarna hitam. Dengan cara: pada panel properties, disebelah kanan background anda klik segitiga hitam,
   Lalu akan muncul palet warna seperti dibawah ini, lalu anda pilih warna hitam (#000000).
7. Lalu anda pilih text tool (T) atau tekan tombot T pada keyboard. Kemudian, buatlah kotak text pada stage, kira-kira sedikit lebih kecil dari stage.
8. Langkah selanjutnya, kita akan melakukan embedding font, agar movie flash kita dapat dimainkan dikomputer mana saja, walaupun tidak memiliki font yang dipakai seperti yang kita gunakan pada tutorial ini. Langkah-langkahnya:
   • Pada panel properties, klik tombol embed…, kemudian akan muncul window character embedding.
     
     Untuk memilih lebih dari satu, gunakan tombol ctrl, lalu pilih character set yang diinginkan. Tapi, anda harus tahu bahwa embedding font dapat menyebabkan ukuran movie flash anda membesar, jadi embed yang penting saja.
   • Pada bagian include these characters: anda melihat karakter seperti ini ? Cara untuk menambahkannya:
     • Klik menu start>>programs>>accessories>>system tools>>Character Maps.
     • Kemudian akan muncul window Character Maps.
     • Pada bagian font anda ganti menjadi Lucida Console.
     • Kemudian anda cari karakter seperti ini ?
     • Tekan tombol select.
     • Tekan tombol Copy.
     • Kemudian anda paste-kan pada kotak include these characters:
     • Jika sudah selesai, pada window characters embedding, anda tekan tombol OK.
9. Langkah selajutnya, anda buat layer baru letakkan diatas layer 1, dan ubah namanya menjadi action.
   
10. Kemudian kita akan menuliskan ActionScript pada frame 1 layer action dengan mengklik frame 1 pada layer action lalu tekan tombol F9 untuk membuka jendela Action.
11. lalu anda ketikkan script berikut:
    view sourceprint?

    01	var i:Number = 0;

    02	var myMessage:String = "ketikkan kata apa saja yang anda sukai disini....";

    03	function autoWrite():Void {

    04	if (i<=myMessage.length) {

    05	monitor_txt.text = myMessage.substr(0, i)+"?";

    06

    i = i+1;

    07

    } else {

    08	clearInterval(writingInterval);

    09

    }

    10

    }

    11	var writingInterval:Number = setInterval(autoWrite,20);

    penjelasan script:
    
    1. baris pertama:var i:number = 0;baris diatas berfungsi untuk mendefinisikan variabel bernama i dengan tipe number yang kita beri nilai awal 0. Variabel ini berfungsi dalam proses perulangan makanya saya namakan i (iterator).
    2. Baris kedua:Var myMessage:string = “ketikkan kata apa saja yang anda sukai disini…”;Sama seperti baris pertama, baris kedua juga mendefiniskan variabel bernama myMessage yang bertipe String yang berisi kalimat yang akan kita animasikan melalui action script yang akan ditampilkan pada dynamic text yang telah kita buat tadi.
    3. Baris ketiga dan selanjutnya:Baris ini merupakan definisi fungsi yang menjalankan animasi teks pada monitor_txt. Dalam flash, untuk mendefinisikan fungsi kita menggunkan keyword function. Fungsi ini kita namakan autoWrite yang bertipe void sehingga tidak memiliki nilai balik.Kemudian pada bagian if (i <= myMessage.length), fungsi akan mengecek apakah nilai i masih lebih kecil atau sama dengan panjang string myMessage, jika hasilnya adalah true (benar), maka pernyataan dibawah ini akan dieksekusi:

       monitor_txt.text = myMessage.substr(0, i);

       i = i+1;

       maksud code diatas adalah mengopikan karakter dalam string myMessage mulai dari posisi 0 (awal string) sampai ke-i ke dalam teks monitor_txt. Kemudian baris selanjutnya berfungsi untuk menaikkan nilai i dengan i (increment).Selanjutnya jika kondisi salah, yaitu i lebih besar dari panjang string myMessage, maka code dalam blok else akan dijalankan, yaitu:
       

       clearInterval(writingInterval);

       untuk mengerti maksud code diatas, maka kita perlu memahami maksud dari baris code selanjutnya, yaitu:
       

       var writingInterval:Number = setInterval(autoWrite, 20);

       perintah setInterval digunakan ketika kita ingin memanggil fungsi yang diulang secara periodik. Perintah ini harus disimpan dalam variabel, oleh karena itu kita membuat variabel bernama writingInterval. Perintah setInterval ini memiliki 2 parameter, yang pertama adalah fungsi yang ingin dipanggil, dan yang kedua adalah waktu interval untuk memanggil fungsi (dalam milidetik). Oke, sekarang anda sudah tahu maksud dari fungsi clearInterval, yaitu untuk menghentikan pemanggilan fungsi ketika semua teks sudah dimunculkan ke layar.
12. sekarang coba anda tes movie anda dengan menekan Ctrl+Enter.
    
    

Selamat mencoba!