DFdou's Blog Life is short,Be yourself.

AS3-Drop Menu Demo

先来Demo：

Fla Source:http://dl.getdropbox.com/u/477487/flash/as3/DropMenu.fla
说明一下，这个文件只考虑了有2级菜单的情况，而没有去管有1级菜单没有2级菜单的情况。
This Demo only consider all menu have children, but not to possession of a menu has no child.

OK,The as3 code:

import gs.TweenLite;
/****************变量设置区域开始*********************/
var menuXML:XML =
    <menu>
        <item title='Home'></item>
        <item title='Service'>
            <menuname url='21'>friesfries</menuname>
			<menuname url='22'>menuName</menuname>
			<menuname url='23'>meni</menuname>
			<menuname url='24'>helo</menuname>
        </item>
		<item title='Product'>
            <menuname url='31'>burger</menuname>
        </item>
        <item title='Company'>
            <menuname url='41'>sfries</menuname>
			<menuname url='42'>friesfries</menuname>
        </item>
		<item title='FAQ'>
            <menuname url='51'>burgfriesfrieser</menuname>
			<menuname url='52'>friesfries</menuname>
			<menuname url='53'>friesfries</menuname>
        </item>
        <item title='Contact'>
            <menuname url='61'>fries</menuname>
			<menuname url='62'>friesfries</menuname>
			<menuname url='63'>menuName</menuname>
			<menuname url='64'>meni</menuname>
			<menuname url='65'>helo</menuname>
        </item>
    </menu>;
var menuWidth:Number=80;//一级菜单的宽度
var menuHight:Number=20;//一级菜单的高度
var offsetX:Number=20;//一级菜单x位置偏移量
var offsetY:Number=10;//一级菜单y位置偏移量
var fontsize:uint=12;//一级菜单字体大小
var fontColor:uint=0xffffff;//一级菜单字体颜色
var menuTft:TextFormat=new TextFormat();//一级菜单的格式设置
menuTft.color=fontColor;//字体颜色
menuTft.size=fontsize;//字体大小
menuTft.font="Arial";//字体
var bgOffsetX:Number=0;//背景x位置偏移量
var bgOffsetY:Number=0;//背景y位置偏移量
var bgWidth:Number=600;//背景的宽度
var bgHeight:Number=30;//背景的高度
var bgBorderColor:uint=0x000000;//背景的边框颜色
var bgFillColor:uint=0x000000;//背景的填充颜色
var mcMenu:Sprite=new Sprite();//主菜单mc
var menuBGColor:uint=0x444444;//主菜单的未选中色
var menuOnBGColor:uint=0x999999;//主菜单的选中色
var subMenu:Sprite=new Sprite();//子菜单mc
var subMenuColor:uint=0x000000;//子菜单颜色
var subMenuOnBGColor:uint=0x999999;//子菜单hover时菜单背景颜色
var subMenuBGColor:uint=0xffffff;//子菜单out时菜单背景颜色
var subMenuHeight:Number=20;//子菜单高度
var subMenuTft:TextFormat=new TextFormat();
subMenuTft.color=subMenuColor;
subMenuTft.size=fontsize;
subMenuTft.font="Arial";
var arySubMenuURL:Array=new Array();//存放子菜单的链接地址
/****************变量设置区域结束*********************/
createDropMenu();
function createDropMenu() {
	createBG();//生成背景栏
	createMenuMC(offsetX,offsetY);//生成主菜单mc
	showMainMenu();//载入XML，显示主菜单
	this.stage.addEventListener(MouseEvent.MOUSE_UP,clickOutside);//这个用于处理AS2中的onReleaseOutside事件
}
function createMenuMC(_offsetX:Number,_offsetY:Number){
	mcMenu.x=_offsetX;
	mcMenu.y=_offsetY;
	addChild(mcMenu);
}
function showMainMenu(){
	var i:uint;
	for(i=0;i<menuxml .children().length();i++){
		var itemM:TextField=new TextField();
		itemM.text=menuXML.item[i].@title;
		itemM.name="item_"+i;
		itemM.x=i*menuWidth;
		itemM.background=true;
		itemM.backgroundColor=menuBGColor;
		//itemM.border=true;//边框
		itemM.autoSize=TextFieldAutoSize.LEFT;
		itemM.height=menuHight;
		itemM.selectable=false;
		//trace(itemM.textWidth);
		itemM.setTextFormat(menuTft);
		mcMenu.addChild(itemM);
		itemM.addEventListener(MouseEvent.MOUSE_DOWN,showSubMenu);
	}
}
function createBG(){
	var mcBG:Sprite=new Sprite();
	mcBG.x=bgOffsetX;
	mcBG.y=bgOffsetY;
	mcBG.graphics.lineStyle(1,bgBorderColor);
	mcBG.graphics.beginFill(bgFillColor);
	mcBG.graphics.drawRect(0,0,bgWidth,bgHeight);
	addChild(mcBG);
}
function showSubMenu(_evt:MouseEvent){
	removeMCChild(subMenu);
	arySubMenuURL=[];
	var target=_evt.currentTarget;
	var itemNow=target.name.substr(5);
	//trace(itemNow);
	showMenuNow(itemNow);
	var subMenuXML:XML=menuXML.item[itemNow];
	var i:uint;
	for(i=0;i<subMenuXML.children().length();i++){
		var itemM:TextField=new TextField();
		itemM.text=subMenuXML.menuName[i];
		arySubMenuURL.push(subMenuXML.menuName[i].@url);
		//trace(subMenuXML.menuName[i].@url);
		itemM.name="subItem_"+i;
		itemM.x=_evt.currentTarget.x+offsetX;
		//itemM.y=(i)*menuHight+offsetY;
		TweenLite.to(itemM,0.3,{y:((i+1)*menuHight+offsetY),onComplete:enableSubMenuEffect,onCompleteParams:[itemM]});
		itemM.border=true;
		itemM.autoSize=TextFieldAutoSize.LEFT;
		itemM.background=true;
		itemM.backgroundColor=subMenuBGColor;
		itemM.height=subMenuHeight;
		itemM.setTextFormat(subMenuTft);
		itemM.selectable=false;
		subMenu.addChild(itemM);
		itemM.addEventListener(MouseEvent.CLICK,gotoURL);
	}
	addChild(subMenu);
}
function enableSubMenuEffect(_mc){
	_mc.addEventListener(MouseEvent.MOUSE_OVER,showSubMenuEffect);
	_mc.addEventListener(MouseEvent.MOUSE_OUT,offSubMenuEffect);
}
function removeMCChild(_mc:Sprite){
	while(_mc.numChildren>0){
		_mc.removeChildAt(0);
	}
}
function showSubMenuEffect(_evt:MouseEvent){
	var target=_evt.currentTarget;
	target.backgroundColor=subMenuOnBGColor;
}
function offSubMenuEffect(_evt:MouseEvent){
	var target=_evt.currentTarget;
	target.backgroundColor=subMenuBGColor;
}
function clickOutside(_evt:MouseEvent){
	if(_evt.target.name==null){
		removeMCChild(subMenu);
	}
}
function showMenuNow(_num:Number){
	var i:uint;
	for(i=0;i<menuXML.children().length();i++){
		switch(i){
			case _num:
				TextField(mcMenu.getChildAt(i)).backgroundColor=menuOnBGColor;
				break;
			default:
				TextField(mcMenu.getChildAt(i)).backgroundColor=menuBGColor;
		}
	}
}
function gotoURL(_evt:MouseEvent){
	var target=_evt.currentTarget;
	var subMenuNow=target.name.substr(8);
	//trace(arySubMenuURL[subMenuNow]);
	navigateToURL(new URLRequest(arySubMenuURL[subMenuNow]));
}

How to use this fla? It's so easy,download it,and modify the XML,config Menu's color,bgcolor etc...
那么如何使用这个Fla呢，很简单，下载之后配置AS顶部的菜单信息就可以了。

Some Related Posts

• 2009/07/21 -- Flash-Five3d类学习 (3)
• 2009/02/14 -- AS3-Enterframe Menu跑帧菜单效果 (0)
• 2010/03/18 -- AS3-Mapppp~的一个生成方案 (3)
• 2010/02/04 -- AS3-aSpaceEscape 迷宫脱离游戏(二)地图生成部分 (0)
• 2010/02/03 -- AS3-aSpaceEscape 迷宫脱离游戏(一)分析 (0)
• 2009/11/26 -- AS3-Caurina 动画类 (1)
• 2009/11/24 -- AS3-SharedObject Flash的Cookie (0)
• 2009/11/23 -- AS3-Captcha验证码类 (7)
• 2009/11/20 -- AS3-Effect explode 图片爆炸效果 (2)
• 2009/11/12 -- AS3-视频拍照功能 (0)