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. Seleksi seluruh elemen yang akan dijadikan konten scrolling tersebut, lalu convert menjadi MovieClip "konten" (Lihat gambar)



4. Selanjutnya seleksi MovieClip "konten" tersebut buka panel Properties dan tambahkan instance name "konten" (Lihat gambar)



5. Seleksi lagi MovieClip "konten" tersebut kemudian Convert kembali menjadi MovieClip "info_sepeda"(Lihat gambar)



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



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



8. 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:

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



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

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



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

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



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;
}

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



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

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



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;
}

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