| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas


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