| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



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

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Membuat Efek Expand Menu

Pendahuluan

Pada tutorial ini dijelaskan secara singkat membuat efek expand menu. Efek yang dimaksud adalah beberapa tombol yang "dimasukkan ke dalam 1 buah tombol", ketika tombol ditekan, akan muncul beberapa tombol lainnya (expanded). Hasil dari tutorial ini adalah sebagai berikut :


Get Adobe Flash player




Persiapan Asset Visual

Dalam tutorial ini, tombol menu tersebut dibuat dengan sederhana, yaitu dengan meletakkan beberapa tombol ke dalam sebuah movieclip. Untuk lebih jelasnya perhatikan langkah berikut :

  1. Buatlah sebuah file baru AS3, kemudian buatlah sebuah tombol sederhana seperti pada gambar.
    tutorial membuat interaktif multimedia by wandah_w
  2. Selanjutnya convert kembali tombol tersebut menjadi Movieclip "tombol_expand"
  3. Edit Movieclip "tombol_expand" tersebut. Klik frame 2 selanjutnya tambahkan Blank Key Frame (F7). kemudian buatlah sebuah background untuk menu, seperti pada gambar. Convert gambar tersebut menjadi Movieclip "bg_tombol_expand"
    tutorial membuat interaktif multimedia by wandah_w
  4. Pada frame 2 - 20 Buatlah sebuah animasi background membesar dan mengecil. Pada contoh ini menu akan ditampilkan pada frame 10. Untuk melakukannya klik frame 10 dan frame 20 dan tambahkan Key Frame (F6), selanjutnya ubah ukuran Movieclip "bg_tombol_expand" seperti pada gambar (perhatikan titik registrasi nya). Kemudian tambahkan Classic / Motion tween untuk membuat animasi tween.
    tutorial membuat interaktif multimedia by wandah_w
  5. Buatlah sebuah layer baru. Pada layer 2 buatlah beberapa tombol. Pada contoh berikut dibuat 6 buah tombol dan masing-masing tombol ditambahkan instance name yang berurutan yaitu "tombol_1", "tombol_2" dan seterusnya. Tombol tersebut menempati seluruh layer 2, sehingga struktur layer Movieclip "tombol_expand", seperti pada gambar berikut :
    tutorial membuat interaktif multimedia by wandah_w
  6. Buatlah sebuah layer baru. Kemudian pada frame 1 layer 3 tambahkan action stop(); agar tombol menu nantinya tidak bergerak secara looping terus menerus.
  7. Keluar dari mode edit symbol.

Penambahan Kode Actionscript 3.0 untuk efek zoom

Sebelum menuliskan kode tambahkan instance name "tombol_menu pada movieclip tombol_expand, selanjutnya buat sebuah layer baru dan klik frame 1, lalu tuliskan kode berikut:

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;

// code by wandah.org 2015
function setup_tombol_expand(tgt:MovieClip, frame_stop:Number, jumlah_tombol:Number):void{
	tgt.stop();
	tgt.frame_stop = frame_stop;
	tgt.jumlah_tombol = jumlah_tombol;
	for (var i:Number = 1; i<= jumlah_tombol; i++){
		var tombol = tgt.getChildByName("tombol_"+i);
		tombol.addEventListener(MouseEvent.CLICK, atur_tombol_expand);
		tombol.visible = false;
	}
	tgt.addEventListener(MouseEvent.CLICK, klik_expand);
}

function atur_tombol_expand(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;	
	if (nama_tombol == "tombol_1"){
		//perintah ketika tombol 1 ditekan
	}
	if (nama_tombol == "tombol_2"){
		//perintah ketika tombol 2 ditekan dst
	}
	close_menu(e.currentTarget.parent);
}

function klik_expand(e:MouseEvent):void{
	var ob:Object = e.currentTarget;
	if (ob.currentFrame == 1){		
		ob.play();
		ob.addEventListener(Event.ENTER_FRAME, expand_menu);
	}
}

function expand_menu(e:Event):void{
	var ob:Object = e.currentTarget;
	if (ob.currentFrame == ob.frame_stop){
		ob.stop();		
		//tampilkan tombol menu
		for (var i:Number = 1; i<= ob.jumlah_tombol; i++){
			var tombol = ob.getChildByName("tombol_"+i);		
			tombol.visible = true;
		}
		//roll out secara manual
		if (mouseX < ob.x || mouseX > ob.x + ob.width || mouseY < ob.y || mouseY > ob.y + ob.height){
			close_menu(ob);
		}
	}
}

function close_menu(ob:Object):void{
	ob.removeEventListener(Event.ENTER_FRAME, expand_menu);
	for (var i:Number = 1; i<= ob.jumlah_tombol; i++){
		var tombol = ob.getChildByName("tombol_"+i);		
		tombol.visible = false;
	}
	ob.play();
}
//tombol_menu = instance name dari tombol expand yang dibuat
// 10 = frame tempat munculnya tombol
// 6 = jumlah tombol di dalam menu 
// (instance name dari tombol di dalam menu harus diawali dengan "tombol_" + nomor tombol) 
setup_tombol_expand(tombol_menu, 10, 6);

File Sumber


Efek menu expand (Flash CS5)


Share ( Ayo Berbagi )

Leave me a comment

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