I used what should have been a straightforward client project as my introduction to AS3. All it required was mouseEnter and mouseOut eventListeners to move the tab and fade up and down the bitmap in the centre.
Then she asked for some of the tabs to have additional buttons appear to the side when the main button is live. I’ve placed a sprite at the bottom of the tab layers, extended it under the sub buttons area and used hitTestPoint to detect when the mouse is outside the working area of the main tab.
This works, but badly. the tabs often stick when they should go down, and the tab also goes down if you place the mouse too far down on the lower sub button. See it here. I’ve left the hitTest area blue so you can see it.
Is there a better way to do this or is my code just bad? I’m sure there must be a better way of accessing the tab elements without using all the getChildAt statements for starters!
[COLOR=“DarkOrchid”]import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.Shape;
import fl.transitions.Tween;
import fl.transitions.easing.*;
var home:MovieClip=this;
var numOfItems:Number;
theText.alpha=0;
var startX:Number=82;
var startY:Number=152;
var btnNum:Number=5;
var pageData:XML;
var yArray:Array = new Array();
var buttonUp:Boolean=false;
var currentBtn;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded, false, 0, true);
loader.load(new URLRequest(“mainMenu.xml”));
function onLoaded(evt:Event):void {
pageData=new XML(evt.target.data);
var spacer:uint=pageData.tabs.spacing;
var img:XMLList=pageData.tabs…image;
var txt:XMLList=pageData.tabs…label;
var showBtns:XMLList=pageData.tabs…addButtons;
for (var i:Number = 0; i<btnNum; i++) {
//create Tab
var mmTab:MovieClip = new MovieClip();
//add white border
var tabBorder:Sprite = new whiteEdge();
//tabBorder.addEventListener(MouseEvent.MOUSE_OUT, leaveTab, false, 0, true);
mmTab.addChild(tabBorder);
//add background tab
var tabBg:Sprite = new tab();
tabBg.y=2;
tabBg.mouseEnabled=false;
mmTab.addChild(tabBg);
//add pic;
var myPic:String =(img*);
var btnPic:Loader = new Loader();
btnPic.load(new URLRequest(myPic));
btnPic.y=2;
//btnPic.mouseEnabled=false;
btnPic.addEventListener(MouseEvent.MOUSE_OVER, showTab, false, 0, true);
mmTab.addChild(btnPic);
// add mask
var picMask:Sprite = new tab();
picMask.y=2;
mmTab.addChild(picMask);
btnPic.mask=picMask;
btnPic.alpha=0;
//add label
var _label:TextField=new TextField();
_label.autoSize=TextFieldAutoSize.LEFT;
_label.multiline=true;
_label.wordWrap=true;
_label.height=100;
_label.width=445;
_label.embedFonts=true;
_label.antiAliasType=AntiAliasType.ADVANCED;
var format:TextFormat = new TextFormat();
var helvFont:Font = new HelvN45L();
format.font=helvFont.fontName;
format.color=0xFFFFFF;
format.size=30;
_label.selectable=false;
_label.defaultTextFormat=format;
_label.text=txt*;
_label.x=16;
_label.y=2;
_label.mouseEnabled=false;
mmTab.addChild(_label);
//add round buttons
if (showBtns*==true) {
var keyBtn:SimpleButton = new KeyBtn();
keyBtn.addEventListener(MouseEvent.CLICK, getName, false, 0, true);
keyBtn.x=520;
keyBtn.y=20;
keyBtn.name="key"+i;
keyBtn.alpha=0;
mmTab.addChild(keyBtn);
var questionsBtn:SimpleButton = new QuestionsBtn();
questionsBtn.addEventListener(MouseEvent.CLICK, getName, false, 0, true);
questionsBtn.x=520;
questionsBtn.y=64;
questionsBtn.name="questions"+i;
questionsBtn.alpha=0;
mmTab.addChild(questionsBtn);
var resourcesBtn:SimpleButton = new ResourcesBtn();
resourcesBtn.addEventListener(MouseEvent.CLICK, getName, false, 0, true);
resourcesBtn.x=520;
resourcesBtn.y=108;
resourcesBtn.name="resources"+i;
resourcesBtn.alpha=0;
mmTab.addChild(resourcesBtn);
}
//add tab to stage
mmTab.x=startX;
mmTab.y = startY + (i * spacer);
yArray*=mmTab.y;
mmTab.name="mmTab"+i;
home.addChild(mmTab);
}
var blankTab:MovieClip = new tab();
addChild(blankTab);
var colorTransform:ColorTransform=blankTab.transform.colorTransform;
colorTransform.color=0xFFFFFF;
blankTab.transform.colorTransform=colorTransform;
blankTab.x=startX;
blankTab.y=yArray[4]+spacer;
}
function leaveMe():void {
buttonUp=false;
var myY:Number=currentBtn.y;
var myParent:String=currentBtn.name;
var myParNo:String=myParent.substring(5);
var currentY:Number=yArray[myParNo];
var currentA:Number=currentBtn.getChildAt(2).alpha;
var TwnY:Tween=new Tween(currentBtn,“y”,Strong.easeOut,myY,currentY,1,true);
var TwnAlpha:Tween=new Tween(currentBtn.getChildAt(2),“alpha”,Regular.easeOut,currentA,0,1,true);
for (var b:Number = 5; b < 8; b++) {
var showBtns:XMLList=pageData.tabs..addButtons;
if (showBtns[myParNo]==true) {
var keyAlpha:Tween=new Tween(currentBtn.getChildAt(b),"alpha",Regular.easeOut,currentA,0,1,true);
currentBtn.getChildAt(b).mouseEnabled=false;
currentBtn.getChildAt(b).buttonMode=false;
}
var currentTA:Number=home.theText.alpha;
var TwnTxt:Tween=new Tween(home.theText,"alpha",Strong.easeOut,currentTA,0,1,true);
}
removeEventListener(Event.ENTER_FRAME, leaveTab);
}
function showTab(evt:MouseEvent):void {
currentBtn=evt.target.parent;
currentBtn.getChildAt(0).addEventListener(MouseEvent.MOUSE_OUT, leaveTab, false, 0, true);
addEventListener(Event.ENTER_FRAME, leaveTab, false, 0 ,true);
var myY:Number=evt.target.parent.y;
var myParent:String=evt.target.parent.name;
var myParNo:String=myParent.substring(5);
if (myY>yArray[myParNo]-25) {
var TwnY:Tween=new Tween(evt.target.parent,“y”,Strong.easeOut,myY,myY-25,1,true);
var TwnAlpha:Tween=new Tween(evt.target,“alpha”,Regular.easeOut,0,1,1,true);
for (var b:Number = 5; b < 8; b++) {
var showBtns:XMLList=pageData.tabs..addButtons;
if (showBtns[myParNo]==true) {
var keyAlpha:Tween=new Tween(evt.target.parent.getChildAt(b),"alpha",Regular.easeOut,0,1,1,true);
evt.target.parent.getChildAt(b).mouseEnabled=true;
evt.target.parent.getChildAt(b).buttonMode=true;
}
}
var myContent:XMLList=pageData.tabs..content;
var myWords:String =(myContent[myParNo]);
home.theText.htmlText=myWords;
var TwnTxt:Tween=new Tween(home.theText,"alpha",Strong.easeOut,0,2,1,true);
buttonUp=true;
}
//home.theText.alpha = 1
}
function getName(evt:MouseEvent):void {
trace(evt.target.name);
}
function leaveTab(evt:Event):void {
if ((! currentBtn.getChildAt(0).hitTestPoint(mouseX,mouseY,true)&&buttonUp==true)||(currentBtn.y+90<mouseY)) {
leaveMe();
}
}[/COLOR]