Membuat Visual Novel sederhana dengan Flash

 

Visual Novel adalah sejenis genre game yang men-simulasi interaksi cerita plot secara interaktif. Biasanya Visual novel yang sering dijumpai beberapa game di web Newgrounds atau game genre visual novel yang terkenal seperti Tsukihime, Saya no Uta, dan lain-lainnya. 

Dibanding dengan Renpy dan Visual Novel Maker, Flash juga bisa membuat game visual novel dengan mudah. Tutorial ini untuk Macromedia Flash versi 5.0 keatas.  

 

Oke. Pergi ke menubar Modify>Movie (Ctrl+M), atau atur movie pada Property Inspector untuk Flash versi MX (6.0) keatas, Dan aturlah Frame Rate menjadi 30 fps dan ukuran movie pada Stage menjadi 640 x 480 px.

 

Buatlah masing-masing layer diantaranya adalah layer background, karakter, kotak dialog, tombol, dan juga layer action untuk eksekusi skrip pada game tersebut.

 

Gambar 1 : membuat layer baru

 

Sekarang pada layer ‘boxdialog, kita akan membuat sebuah kotak dialog dengan menggambar dengan Rectangle Tool, Kemudian buatlah teks pada layer ‘textdialog. Jangan lupa atur fontnya dan juga ubah Static Text menjadi Dynamic Text dengan Multiline dan ubah skala kotak teks tersebut. Dan beri nama ‘dialogText pada kotak variable (untuk Flash versi 5.0 jangan lupa aktifkan […] pada Embed fonts)

 

Gambar 2 : mengatur pada teks menjadi dynamic text

 

Seleksi kotak dialog pada layer ‘boxdialog atur warna hitam pada Fill color yang ada di jendela panel pada Alpha menjadi 50%

 

Gambar 3 : mengatur warna Fill pada objek kotak

Sekarang kita akan membuat tombol dialog dengan seleksi layer btn dan membuat rectangle, lalu ubahkan menjadi symbol dengan nama symbol “btnNext” dan behavior : button. Dan kita akan membuat efek rollover pada symbol button tersebut dengan klik objek symbol tersebut 2 kali atau melalui menekan Ctrl + E.

 

Gambar 4 : Memberi efek rollover pada symbol ‘btnNext

 

Sekarang kita seleksi layer ‘bg pada Timeline kemudian impor file gambar latar belakang, Contoh. Saya mengimpor gambar background sekolah, Begitu juga gambar karakter pada layer ‘char.

 

Pada layer ‘char, seleksi pada gambar karakter tersebut dan ubahlah menjadi symbol : rini dan behavior : movie clip. Oiya jangan lupa beri nama Instance “rini” pada symbol bernama "rini" tersebut.

 

Gambar 5 : Mengimpor gambar background pada layer ‘bg

 

Sekarang seleksi symbol tersebut dan klik 2 kali atau tekan Ctrl + E untuk memasuki mode edit symbol : rini. Sekarang buatlah keyframe 2 dan 3, masing-masing keyframe tersebut berisi ekspresi yang berbeda. Pada isi keyframe tersebut antara normal, cemberut, dan marah.

 

Gambar 6 : Membuat keyframe dan mengimpor karakter ekspresi pada symbol

 

Seleksi frame 1 dan pada panel Frame, dan beri nama label frame : normal, begitu juga frame lain. Oiya jangan lupa memberi script stop(); pada frame 1 agar symbol tersebut tidak berputar seiring menjalankan movie tersebut. Dan kembali ke Scene 1 jika sudah.

 

Gambar 7 : Memberi nama label pada frame

 

Sekarang, kita akan memberi interaktif pada teks, symbol dan tombol tersebut. Sekarang buka panel Actions dengan tekan Ctrl + Alt + A atau F9 untuk Flash MX, Dan jangan lupa ubah Normal mode ke Expert mode.

 

Gambar 8 : Membuka panel Actions

 

Sekarang seleksi pada tombol symbol yang ada di layer ‘btn, Lalu ketik listing program sebagai berikut :

 

on (release) {

       nextFrame();

}

 

Kemudian pada layer actions, seleksi frame 1 pada layer tersebut dan ketik seperti ini:

 

stop();

 dialogText = "Rini:\nHmm?..";

     rini.gotoAndStop(1);

 

Sekarang buatlah keyframe kosong pada frame 2 di layer actions kemudian ketik seperti ini

 

   dialogText = "Rini:\nLama banget sih,Pacarku.";

     rini.gotoAndStop(3);

 

Dan juga keyframe pada frame 3:

 

   dialogText = "Rini:\nSekarang apa yang harus lakukan untukmu?.";

     rini.gotoAndStop(2);

 

 

Sekarang buatlah frame (sambil tekan F5) pada layer bg, char, boxdialog, dan  textdialog pada frame 3, kemudian buatlah layar baru (Layer7), dan buatlah keyframe pada frame 3 di layer tersebut

 

Gambar 9 : Membuat layer baru

 

Dan keyframe tersebut buatlah dua kotak tombol yang untuk dijadikan pilihan dialog.

 

Gambar 10 : Membuat tombol pilihan dialog.

 

Sekarang tampilkan panel Scene dengan Window > Panel > Scene, dan buatlah 2 scene tersebut.

Gambar 11 : Membuat Scene baru.

Sekarang balik lagi ke Scene1 pada panel Scene, Kemudian seleksi tombol pilihan dialog tersebut.

 

on (release) {

     gotoAndStop("End1", 1);

}

 

Dan untuk tombol pilihan dialog yang kedua:

 

on (release) {

     gotoAndStop("End2", 1);

}

 

Sekarang, Jalankan movie tersebut dengan menekan Ctrl + Enter.