| flash game tutorial and flare3d games

Latest Blog



07.04.2018

Membuat Game Tebak Gambar

Tutorial membuat game tebak gambar dengan Flash

03.07.2017

Memahami konstain

Memahami penggunaan konstrain dalam membuat sistem gerak

28.01.2017

E-Book Media Pembelajaran

E Book Gratis Membuat Media Pembelajaran Interaktif

15.12.2016

Membuat mouse trail

Membuat animasi ikan mengikuti kursor mouse

23.04.2016

Animasi Karakter Game RPG Flash

Membuat animasi karakter dalam game RPG Flash

23.04.2016

Aplikasi Peta Game RPG Flash

Mengaplikasikan Map Editor untuk peta game RPG Flash

23.04.2016

Membuat Peta Game RPG Flash

Membuat peta untuk game RPG Flash

23.04.2016

Mengerakkan Karakter Game RPG

Menambahkan karakter dalam game RPG Flash

23.04.2016

Membuat Game RPG

Membuat game RPG Flash actionscript 3 dengan teknik tiling

31.12.2015

Indonesia Soccer League

Sekilas tentang pengembangan game sepakbola dengan Flash


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Scrolling Teks dan Gambar

Konsep dasar

Scrolling teks dalam flash bisa dilakukan dengan menggunakan dynamic text maupun dengan component seperti pada tutorial scrolling teks. Akan tetapi untuk scrolling konten yang mengandung elemen grafis seperti gambar, component tidak mendukung, sehingga kita perlu membuat sebuah Movieclip untuk menghandle konten yang akan kita scroll. Pada tutorial ini akan dijelaskan cara membuat scrolling teks dan gambar Untuk membuatnya ikuti langkah berikut :


Menyiapkan Asset

  1. Siapkan gambar yang akan anda tampilkan dalam konten scrolling. Dalam contoh ini akan digunakan 3 buah gambar sepeda
  2. Pada file aplikasi Flash, import gambar tersebut ke stage (File > Import > Import to Stage), kemudian atur posisi gambar tersebut dan lengkapi dengan static text sehingga menjadi isi dari konten yang akan di scroll (Lihat gambar)

  3. interactive multi media by wandah_w
  4. Seleksi seluruh elemen yang akan dijadikan konten scrolling tersebut, lalu convert menjadi MovieClip "konten" (Lihat gambar)

  5. interactive multi media by wandah_w
  6. Selanjutnya seleksi MovieClip "konten" tersebut buka panel Properties dan tambahkan instance name "konten" (Lihat gambar)

  7. interactive multi media by wandah_w
  8. Seleksi lagi MovieClip "konten" tersebut kemudian Convert kembali menjadi MovieClip "info_sepeda"(Lihat gambar)

  9. interactive multi media by wandah_w
  10. Edit MovieClip "konten" (double click), kemudian tambahkan layer baru dan berikan masking agar area yang terlihat menjadi terbatas. (Lihat gambar). Langkah ini dimaksudkan agar konten yang berada diluar area scroll menjadi tertutup oleh masking.

  11. interactive multi media by wandah_w
  12. Kembali ke Scene utama (tekan Ctrl+E), kemudian buatlah 2 buah tombol untuk panah atas, dan panah bawah. Kemudian tambahkan instance name pada masing-masing objek yaitu info_sepeda, up_btn dan down_btn.

  13. interactive multi media by wandah_w
  14. Selanjutnya tambahkan sebuah layer dan ubah namanya menjadi layer kode. Klik layer kode, dan tuliskan kode berikut
up_btn.addEventListener(MouseEvent.MOUSE_DOWN, pencet_mouse);
down_btn.addEventListener(MouseEvent.MOUSE_DOWN, pencet_mouse);
stage.addEventListener(MouseEvent.MOUSE_UP, lepas_mouse);

info_sepeda.addEventListener(Event.ENTER_FRAME, atur_scroll);
info_sepeda.addEventListener(MouseEvent.MOUSE_WHEEL, scroll_tengah);

var is_drag:Boolean = false;
var scroll_speed:Number = 0;

function pencet_mouse(e:MouseEvent):void{
	var nama:String = e.currentTarget.name;
	is_drag = true;
	if (nama == "up_btn") scroll_speed = 10;
	if (nama == "down_btn") scroll_speed = -10;
}
function lepas_mouse(e:MouseEvent):void{
	is_drag = false;
	scroll_speed = 0;
}

function scroll_tengah(e:MouseEvent):void {	
	info_sepeda.konten.y += e.delta * 3;	
}

function atur_scroll(e:Event):void{
	if (is_drag) info_sepeda.konten.y+=scroll_speed;
	if (info_sepeda.konten.y > 0) info_sepeda.konten.y = 0;
	if (info_sepeda.konten.y < -info_sepeda.konten.height + 375) info_sepeda.konten.y = -info_sepeda.konten.height + 375;
}


Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut:


Get Adobe Flash player

Penjelasan Kode



Penjelasan kode diatas adalah sebagai berikut :

    up_btn.addEventListener(MouseEvent.MOUSE_DOWN, pencet_mouse);
    down_btn.addEventListener(MouseEvent.MOUSE_DOWN, pencet_mouse);
    stage.addEventListener(MouseEvent.MOUSE_UP, lepas_mouse);
    
  1. Listener yang dibutuhkan untuk scrolling mouse adalah MouseEvent. Pada listener ini kita akan menangkap kondisi ketika mouse ditekan dan ketika mouse dilepas

  2. info_sepeda.addEventListener(Event.ENTER_FRAME, atur_scroll);
    info_sepeda.addEventListener(MouseEvent.MOUSE_WHEEL, scroll_tengah);
    
  3. MovieClip info_sepeda memiliki listener atur_scroll, yaitu metode untuk menggeser posisi Y dari konten yang ada di dalam movieclip. Selain itu juga memiliki listener untuk mendeteksi gerakan roda scroll (scroll tengah) dengan menggunakan MouseEvent.MOUSE_WHEEL

  4. var is_drag:Boolean = false;
    var scroll_speed:Number = 0;
    
  5. variable is_drag digunakan untuk mendeteksi kondisi mouse apakah sedang tertekan (true) atau sedang dilepas (false). Secara default, mouse dalam kondisi dilepas (false). Sedangkan variabel scroll_speed digunakan untuk mengatur kecepatan scrolling

  6. function pencet_mouse(e:MouseEvent):void{
    	var nama:String = e.currentTarget.name;
    	is_drag = true;
    	if (nama == "up_btn") scroll_speed = 10;
    	if (nama == "down_btn") scroll_speed = -10;
    }
    function lepas_mouse(e:MouseEvent):void{
    	is_drag = false;
    	scroll_speed = 0;
    }
    
  7. Kedua fungsi tersebut digunakan untuk mendeteksi kondisi mouse sekaligus untuk menentukan nilai dari variabel scroll_speed. Ketika tombol "up_btn" ditekan misalnya, makan kecepatan akan bernilai 10, sehingga konten nantinya akan bergerak sejauh 10 pixel ke atas.

  8. function scroll_tengah(e:MouseEvent):void {	
    	info_sepeda.konten.y += e.delta * 3;	
    }
    
  9. Fungsi ini digunakan untuk membaca pergerakan dari roda scroll (tengah). Perputaran roda scroll ditangkap sebagai e.delta. Sehingga kita dapat menggunakan kecepatan perputaran roda tersebut sebagai nilai untuk pergeseran konten

  10. function atur_scroll(e:Event):void{
    	if (is_drag) info_sepeda.konten.y+=scroll_speed;
    	if (info_sepeda.konten.y > 0) info_sepeda.konten.y = 0;
    	if (info_sepeda.konten.y < -info_sepeda.konten.height + 375) info_sepeda.konten.y = -info_sepeda.konten.height + 375;
    }
    
  11. Fungsi ini digunakan untuk mengatur pergerakan movieclip konten yang berada di dalam movieclip info_sepeda. Kemudian ditambahkan kondisi IF untuk menentukan batas atas dan batas bawah scroll

File Sumber


download (CS5)



Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon