Hướng dẫn tạo Menu từ XML
Bước 1:
_ Tạo FLA Document “ColorfulMenu.fla”
_ Vẽ 1 hình chữ nhật kích thướt : 350×45 màu trắng 0xFFFFFF không có viền
_ Convert hình chữ nhật vừa vẽ thành MovieClip đặt tên là “Menu Item” tên linkage là “MenuItem”
_ Double Click vào movieClip “Menu Item” vừa tạo để vào bên trong mc đó chọn tiếp hình chữ nhật convert nó thành movieClip đặt tên là “Menu Item Fill”
_ Đặt tên cho nó ngoài Stage là “itemBackground”
_ Tạo thêm 1 layer mới nằm trên layer chứa movieClip “itemBackground” .
_ Trên layer này tạo 1 textField đặt tên “menuText” với các thuộc tính sau
_ font : “Verdana”
_ size “18″
_ color “0×000000″
_ kích thướt text : 340×30
_ align : center
_ Trở ra ngoài Stage chính xóa movie có trên Stage đi.
Bước 2:
_ Tạo file “menu.xml” trong thư mục “com\ColorfulMenu”
_ Cấu trúc XML
<menu>
<buttons>
<button>
<label>Home</label>
</button>
<button>
<label>Tutorials</label>
</button>
<button>
<label>Forum</label>
</button>
<button>
<label>About</label>
</button>
<button>
<label>Home</label>
</button>
<button>
<label>Tutorials</label>
</button>
<button>
<label>Forum</label>
</button>
<button>
<label>About</label>
</button>
<button>
<label>Home</label>
</button>
<button>
<label>Tutorials</label>
</button>
<button>
<label>Forum</label>
</button>
<button>
<label>About</label>
</button>
<button>
<label>Home</label>
</button>
<button>
<label>Tutorials</label>
</button>
<button>
<label>Forum</label>
</button>
<button>
<label>About</label>
</button>
<button>
<label>Home</label>
</button>
<button>
<label>Tutorials</label>
</button>
<button>
<label>Forum</label>
</button>
<button>
<label>About</label>
</button>
<button>
<label>Add more buttons with XML!</label>
</button>
</buttons>
</menu>
Bước 3:
_ Tạo class “Proxy.as” nằm trong thư mục “com\proxy”
package com.proxy
{
public class Proxy
{
// Create a wrapper for a callback function.
// Tacks the additional args on to any args normally passed to the
// callback.
public static function create(handler:Function,…args):Function
{
return function(…innerArgs):void
{
handler.apply(this,innerArgs.concat(args));
};
}
}
}
_ Tạo class “LoaderXML.as” nằm trong thư mục “com\ColorfulMenu” dùng để load file xml.
CODE:
package com.ColorfulMenu {
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import proxy.Proxy;
/**
* @author yoko
*/
public class LoaderXML {
private static var LOADER : URLLoader;
private static var REQUEST : URLRequest;
public static var XMLDATA : XML;
public static var COMPLETE : Function;
public static function createLoaderXML(_strPath : String) : void {
LOADER = new URLLoader();
REQUEST = new URLRequest(_strPath);
LOADER.load(REQUEST);
LOADER.addEventListener(Event.COMPLETE, Proxy.create(onLoadXmlComplete));
}
private static function onLoadXmlComplete(evt : Event) : void {
if(evt.target as URLLoader != null) {
XMLDATA = new XML(LOADER.data);
COMPLETE();
}else {
trace(“Connect Fail!”);
}
}
}
// end class
}
_ Tạo class “MainColorfulMenu.as” nằm trong thư mục “com\ColorfulMenu” để hiển thị
CODE:
package com.ColorfulMenu {
import flash.display.MovieClip;
import proxy.Proxy;
import flash.events.Event;
import flash.events.MouseEvent;
import gs.TweenMax;
/**
* @author yoko
*/
public class MainColorfulMenu {
private var ROOT : MovieClip;
// tạo movie dùng để chứa mỗi item được attach từ thư viện
private var MENU_ITEM : MovieClip;
// tạo movie chứa tất cả các item
private var MENU_HOLDER : MovieClip;
private var COUNT : uint = 0;
private var OVER_MENU : Boolean = false;
public function MainColorfulMenu(mainTimeLine : MovieClip) {
ROOT = mainTimeLine;
MENU_HOLDER = new MovieClip();
ROOT.addChild(MENU_HOLDER);
LoaderXML.createLoaderXML(“com/ColorfulMenu/menu.xml”);
LoaderXML.COMPLETE = Proxy.create(createMenu);
}
private function createMenu() : void {
for each(var buttonXml:XML in LoaderXML.XMLDATA.buttons.button) {
MENU_ITEM = new MenuItem() as MovieClip;
MENU_ITEM.x = 0;
MENU_ITEM.y = COUNT * MENU_ITEM.height;
MENU_ITEM.menuText.text = buttonXml.label.toString();
MENU_ITEM.mouseChildren = false;
MENU_ITEM.addEventListener(MouseEvent.MOUSE_OVER, Proxy.create(overHandler));
MENU_ITEM.addEventListener(MouseEvent.MOUSE_OUT, Proxy.create(outHandler));
COUNT++;
MENU_HOLDER.addChild(MENU_ITEM);
}
manageListener();
}
// Quản lý sự kiện khi rê chuột vào hoặc ra khỏi mỗi item
private function overHandler(evt : Event) : void {
var movie : MovieClip = evt.target as MovieClip;
TweenMax.to(movie.itemBackground, 0.5, {tint:0xFF9900});
}
private function outHandler(evt : Event) : void {
var movie : MovieClip = evt.target as MovieClip;
TweenMax.to(movie.itemBackground, 1.5, {tint:0xFFFFFF});
}
// Quản lý sự kiện khi di chuyển chuột lên hay xuống dùng để cuộn các item
private function manageListener() : void {
MENU_HOLDER.addEventListener(MouseEvent.MOUSE_OVER, Proxy.create(mouseInteractiveMenu, true));
MENU_HOLDER.addEventListener(MouseEvent.MOUSE_OUT, Proxy.create(mouseInteractiveMenu, false));
MENU_HOLDER.addEventListener(Event.ENTER_FRAME, Proxy.create(manageOnEnterFrame));
}
private function mouseInteractiveMenu(evt : Event,flag : Boolean) : void {
OVER_MENU = flag;
}
private function manageOnEnterFrame(evt : Event) : void {
if(OVER_MENU) {
var distance : Number = ROOT.mouseY;
var percent : Number = distance / ROOT.stage.stageHeight;
var target : Number = -(MENU_HOLDER.height – ROOT.stage.stageHeight) * percent;
TweenMax.to(MENU_HOLDER, 0.5, {y:Math.round(target)});
}
}
}
// end class
}
Bước 4:
_ Mở file “ColorfulMenu.fla” chọn frame 1 code
import com.ColorfulMenu.MainColorfulMenu;
new MainColorfulMenu(this);
_ Lưu file này lại và nhấn Ctrl+Enter để chạy thử
