Senin, 10 Agustus 2026

(TIPS) Memberi efek typewriter pada kotak dialog Visual Novel dengan Flash

Artikel ini merupakan tips tambahan dari artikel tentang tutorial membuat visual novel sederhana. Sebelumnya teks dialog pada projek sebelumnya hanyalah tanpa efek alias statis. Namun bisa memberi efek teks mengetik pada kotak teks dialog layaknya visual novel pada umumnya. Berikut ini adalah tutorialnya.

 
Gambar 1 : contoh efek typewriter
 
Dan kita akan membuat movie baru dengan Flash versi 5.0 dan untuk versi MX dan 8 keatas bakal diperjelaskan di akhir paragraf. 
 

Buatlah kotak teks dinamis kosong dan beri nama variable bernama "textTampil" dan jangan lupa pastikan pada [...] di Embed Fonts aktif.

Seleksi kotak teks dinamis tersebut dan jadikan sebagai symbol dengan behavior : Movie Clip. Setelah itu masuk ke mode edit symbol pada symbol teks dinamis tersebut. Pada mode tersebut tambahkan 2 keyframe dengan menekan tombol F6 (Insert > Keyframe)

Sekarang pilih keyframe pada frame 1 dan isi listing program tersebut :

i = 1;

textTampil = ""; 

Dan untuk frame 2 :
 
if (i <= length(text_full)) {
    textTampil = substring(text_full, 1, i);
    i = i + 1;
} else {
    stop();
}
 
Terakhir untuk frame 3 :
 
 gotoAndPlay(2);
 
Sekarang kembali ke mode utama setelah diedit symbolnya. Sekarang seleksi symbol teks dinamis tadi dan beri nama "dialog_text" pada isian Instance.


Sekarang buat sebuah tombol untuk dialog tersebut, dan kemudian berikan listing program seperti ini:
 
on (release) {
    // Memajukan Main Timeline ke frame berikutnya
    nextFrame();
    
    // Memasang dialog baru & mereset animasi mengetik di Movie Clip
    dialog_box.text_full = "";
    dialog_box.gotoAndPlay(1);
 

Lalu buatlah layer bernama "actions_dialog", pada masing-masing satu frame akan menampilkan dialog yang berbeda ketika tombol dialog ditekan, Dan kali ini adalah listing program tersebut:

stop();
dialog_box.text_full = "Halo! Selamat datang di dalam game.";
dialog_box.gotoAndPlay(1);

Isi listing program tersebut dengan keyframe berbeda, Contohnya akan seperti ini yang penulis buat. 

 

 

Tidak ada komentar:

Posting Komentar

(TIPS) Memberi efek typewriter pada kotak dialog Visual Novel dengan Flash

Artikel ini merupakan tips tambahan dari artikel tentang tutorial membuat visual novel sederhana. Sebelumnya teks dialog pada projek sebelum...