//The script for the button effects
import SubBtn;
//script for fade transitions
import caurina.transitions.Tweener;
/***********************************
Hello,
Thanks for buying this menu.
So how do you implement this menu?
1. change the paramenters bellow to suit your needs
(the paramenters which should be changed is marked)
2. if you are using this menu as part of a bigger project
you have to copy the external classes into your project directory
(that is the entire folder caurina and the class SubBtn.as)
3. in the _menuItemsAndContent array in the change variables
section beneath you should put in a name of the
menu item along with an MovieClip accosiated with that item. So when the item
is clicked you can retrieve that mc.
another way to change the content would be to listen to the item id
and determin what to show according to that. Then not accosiate any MovieClip
and just leave the mc as a null.
alternatively you can listen for the name of the item.
if you dont what to accosiate the item with a MovieClip just put in null as
I did in the sample.
4. When an item is clicked the function onSubMouseClick is called and
you should determin what to happen, as this is only a menu!
So go to the onSubMouseClick function bellow the change variables section
and see how to retrieve the items' data when they are clicked.
Cheers
***********************************/
/***********************************
--> CHANGE VARIABLES SECTION
***********************************/
var _spacing:int = -14; //the spacing of the menu items
var _btnAlpha:Number = .6; //the alpha of the menu items
var _overColor:String = "#CC00000"; //the over hex color
var _outColor:String = "#6F5A45"; //the "not" over hex color
//there are currently 5 items in the menu
var _menuItemsAndContent:Array = new Array({name:"Introduction", mc:new MovieClip}, //name and mc, leave mc empty if you don't use it
{name:"Contextualitation", mc:null},
{name:"Objectives", mc:null},
{name:"Methodology", mc:null},
{name:"Results",mc:null},
{name:"Conclusions",mc:null},
{name:"Citations",mc:null});
/***********************************
END OF CHANGE VARIABLES SECTION
***********************************/
function onSubMouseClick(event:MouseEvent):void {
//here are the the 3 methods that can be used to change the content
//returns item id/it's position in the _subBtnsAndPos array
trace("id " + event.currentTarget.name);
//returns the items name
trace("name " + _subBtnsAndPos[event.currentTarget.name].name);
//return the MovieClip that has been accosiated with the item or null
//if you haven't use that feature
trace("MC " + _subBtnsAndPos[event.currentTarget.name].mc);
}
/***********************************
THE PART OF THE SCRIPT
WHICH SHOULD BE CHAGED STARTS HERE
***********************************/
var _subMenuYPos:int = openMenu.y + openMenu.height + _spacing + 10;//pos of the items
var _subBtnsAndPos:Array = new Array();//the sub items and their data
var _subsHolder:Sprite = new Sprite();//holds all items
var _isOpen:Boolean = false;//to see if the menu is opened or not
addSubMenues(_menuItemsAndContent);//call the addSubMenues which creates the items
_subsHolder.alpha = _btnAlpha;//uses the alpha from change variables section
openMenu.buttonMode = true;
//ads events
openMenu.addEventListener(MouseEvent.ROLL_OVER, onOpenMenu);
_subsHolder.addEventListener(MouseEvent.ROLL_OUT, onCloseMenu);
//OPEN MENU
function onOpenMenu(event:MouseEvent):void {
tweenOutSubs("in");//the function which tween the items in and out
}
//CLOSE MENU
function onCloseMenu(event:MouseEvent):void {
tweenOutSubs("out");
}
function tweenOutSubs(type:String):void {
if(type == "in") {
if(!_isOpen) {
//if the items are not visible they are tweened
//on to the stage, by looping through the _subBtnsAndPos array
_isOpen = true;
for(var i:int; i < _subBtnsAndPos.length; i++) {
_subBtnsAndPos[i].object.alpha = 0;
_subBtnsAndPos[i].object.visible = true;
Tweener.addTween(_subBtnsAndPos[i].object, {y:_subBtnsAndPos[i].pos
,alpha:1, time:1, transition:"easeOutQuart"});
}
}
}
else {
//the same thing but now they are tweened out
_isOpen = false;
for(var o:int; o < _subBtnsAndPos.length; o++) {
Tweener.addTween(_subBtnsAndPos[o].object, {y:0,time:.5, alpha:0, transition:"easeOutQuart"});
}
}
}
//ADD SUB
function addSubMenues(arr:Array):void {
//the sub items are created with the addSubMenu function
for(var i:int; i < arr.length; i++) {
addSubMenu(arr[i].name, arr[i].mc);
}
var maxWidth:int;
for(i = 0; i < _subBtnsAndPos.length; i++) {
if(_subBtnsAndPos[i].object.width > maxWidth){
maxWidth = _subBtnsAndPos[i].object.width;
}
}
//adding hit area
var appHit:Shape = new Shape();
appHit.graphics.beginFill(0xCC0000,0);
appHit.graphics.drawRect(0, 0, maxWidth, _subMenuYPos + _subBtnsAndPos[_subBtnsAndPos.length-1].object.height);
appHit.graphics.endFill();
_subsHolder.addChildAt(appHit,0);
removeChild(openMenu);
_subsHolder.addChild(openMenu);
addChild(_subsHolder);
}
function addSubMenu(name:String, mc:MovieClip):void {
//call to SubBtn (external class) which deals with the mouse over effects
var sub:SubBtn = new SubBtn(_overColor, _outColor, name.toLowerCase());
sub.addEventListener(MouseEvent.CLICK, onSubMouseClick);
sub.name = String(_subBtnsAndPos.length);
sub.visible = false;
//the item is pushed into the _subBtnsAndPos array so they can be
//retrieved later on
_subBtnsAndPos.push({object:sub, pos:_subMenuYPos, mc:mc, name:name.toLowerCase()});
_subsHolder.addChild(sub);
//adds to the menu height to possition the next button bellow this one
_subMenuYPos += sub.height + _spacing;
}
