Actionscript 3.0 – Xml Slide Menu 1.0.1

wiev the exampledownload ITAdownload ENG
Thumbnail of the Actionscript3.0 - Xml Slide Menu 1.0.1

The menu is developed with Actionscript 3.0 and Xml.
With the Xml you can assign name value, color background value ,
the color of the text of button and the url taht button must call.

How we can do that ?

– First :MAke the Xml file : open an txt editor and copy and past that xml

<?xml version=”1.0″ encoding=”utf-8″?>
<menuSlide>
<itemMenu>
<itemName>AI/SLP</itemName>
<itemDest>txtSection/yourSfw.swf</itemDest>
<itemColor>0x000000</itemColor>
<itemTextColor>0xffffff</itemTextColor>
</itemMenu>

<itemMenu>
<itemName>DERECHOS</itemName>
<itemDest>txtSection/yourSfw.swf</itemDest>
<itemColor>0x333333</itemColor>
<itemTextColor>0xcccccc</itemTextColor>
</itemMenu>

<itemMenu>
<itemName>+INFO</itemName>
<itemDest>txtSection/yourSfw.swf</itemDest>
<itemColor>0x666666</itemColor>
<itemTextColor>0x666666</itemTextColor>
</itemMenu>

<itemMenu>
<itemName>CONTACTO</itemName>
<itemDest>txtSection/txt_Contacto.swf</itemDest>
<itemColor>0x999999</itemColor>
<itemTextColor>0x666666</itemTextColor>
</itemMenu>

<itemMenu>
<itemName>ENLACES</itemName>
<itemDest>txtSection/yourSfw.swf</itemDest>
<itemColor>0xcccccc</itemColor>
<itemTextColor>0x333333</itemTextColor>
</itemMenu>

<itemMenu>
<itemName>PS</itemName>
<itemDest>txtSection/yourSfw.swf</itemDest>
<itemColor>0xffffff</itemColor>
<itemTextColor>0x000000</itemTextColor>
</itemMenu>
</menuSlide>

Save it in a “xml”  folder with the name menu.xml

Now start with flash Open you flash editor and open the Actions windows
we start importing the class that we need

import caurina.transitions.*;

we use this class for the tweening motion

now we gone to create the array that we need

var btnArray:Array= new Array();
var arrayTotalBtn:Array = new Array();
var arrayContents:Array = new Array();

and we insert the totalWidth size(is the total size for the menu ) and the maskSize, (mask is the movieClip that must mask the menu )

var totalWidth:Number=750;
var maskWidth:Number;

go to create another couple of var that we use later

var lTxtGallery:Loader = new Loader();
var counterContents:Number=0;

Now we must made the textFormat used for the button title

var formatBold:TextFormat = new TextFormat();
var fontBold:FontArialBold=new FontArialBold();
formatBold.font=fontBold.fontName;
formatBold.color=0xFFFFFF;
formatBold.size=12;
formatBold.bold=true;

and one for the ResultTitle

var formatTitle:TextFormat = new TextFormat();
var titleFont:fontTitle=new fontTitle();
formatTitle.font=titleFont.fontName;
formatTitle.color=0xFFFFFF;
formatTitle.size=18;
formatTitle.bold=true;

we need a movieClip that containing all the menu

var contentTxt:MovieClip=new MovieClip();
contentTxt.x=0;
addChild(contentTxt);

Calculate the total width that is equal at the stage.stageWidth

var stageWidth:Number=stage.stageWidth;

var contMenu:MovieClip=new MovieClip();
contMenu.x=0;
addChild(contMenu);

gone to create one clip that we used for mask

var mcContainerMask:MovieClip=new MovieClip();
with (mcContainerMask) {
graphics.beginFill(0xFFFFFF,1);
graphics.lineStyle(1,0xFFFFFF,100);
graphics.drawRoundRect(0,50,950,330,0);
graphics.endFill();
}
addChild(mcContainerMask);
contMenu.mask=mcContainerMask;

post the counterMovie = 0

var counterMovie:Number=0;

Start Work with XML

load XML file

var buttonsURL:URLRequest=new URLRequest(“xml/menu.xml”);
var xmlLoader:URLLoader=new URLLoader(buttonsURL);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
var buttonsXML: XML = new XML();
buttonsXML.ignoreWhitespace=true;
function xmlLoaded(evt:Event):void {
buttonsXML=XML(xmlLoader.data);

Create a cicle that determinate how many elements we have in the xml file

for (var numberImage:String in buttonsXML.itemMenu) {
var numberTotalBtn:String=buttonsXML.itemMenu.itemName;
btnArray.push(numberTotalBtn);
}

Insert all elements in a single array

var totalBtn:Number=btnArray.length;

Now we need to know the size of the mask

maskWidth=totalWidth/totalBtn;

start to create the buttons

for (var i:int=0; i<totalBtn; i++) {
trace(“Clip “+i+” has been created “);
var btnClip:MovieClip = new MovieClip();
btnClip.id=i;
btnClip.x=(maskWidth-1)*i;
btnClip.y=50;
btnClip.buttonMode=true;
var mcContainer:MovieClip=new MovieClip();
mcContainer.id=i;
with (mcContainer) {
graphics.beginFill(buttonsXML.itemMenu[i].itemColor,1);
// detarminate the colour of the button from the xml file
graphics.lineStyle(8,0×000000,100);
graphics.drawRoundRect(0,0,800,78,0);
graphics.endFill();
}
btnClip.addChild(mcContainer);

Now create the txtField

var txtTitle= new TextField();
btnClip.addChild(txtTitle);
txtTitle.y=50;
txtTitle.x=10;
txtTitle.autoSize=TextFieldAutoSize.LEFT;
txtTitle.embedFonts=true;
txtTitle.multiline=true;
txtTitle.width=maskWidth;
txtTitle.wordWrap=true;
txtTitle.text=buttonsXML.itemMenu[i].itemName;
txtTitle.setTextFormat(formatBold);
formatBold.color=buttonsXML.itemMenu[i].itemTextColor;
// detarminate the colour of the button text  from the xml file

Insert the buttons in a array

arrayTotalBtn.push(btnClip);

contMenu.addChild(btnClip);

read from the Xml the destination of the button and put it in array

var urlSec:String=buttonsXML.itemMenu[i].itemDest;
arrayContents.push(urlSec);
}

Call the function for made the eventListener for the button

addListenerBtn();
function addListenerBtn():void {
for (var t:int=0; t<arrayTotalBtn.length; t++) {
arrayTotalBtn[t].addEventListener(MouseEvent.CLICK, onClickCateg,false, 0, true);
arrayTotalBtn[t].addEventListener(MouseEvent.MOUSE_OVER, btnOver,false, 0, true);
arrayTotalBtn[t].addEventListener(MouseEvent.MOUSE_OUT, btnOut,false, 0, true);
}

}
}

Create the function for the rollOver state

function btnOver(evt:Event):void {

Assigne at the Clip Object value of the clikked object

var Clip:Object=evt.currentTarget;
trace(“ONOVER”+counterMovie);

Determinate where the button must slide (right or left )

if (counterMovie<Clip.id) {

Create a for cilce for made all btn movied

for (var p:int=0; p<Clip.id; p++) {
Tweener.addTween(arrayTotalBtn[p],{x:((maskWidth-90)*p),time:0.5,transition:”easeInExpo”});//,onComplete:hideAway
Tweener.addTween(arrayTotalBtn[Clip.id],{x:(maskWidth-90)*Clip.id,time:0.5,transition:”easeInExpo”});//,onComplete:hideAway2
counterMovie=Clip.id;
}
}
if (counterMovie>Clip.id) {
for (var r:int=Clip.id+1; r<arrayTotalBtn.length; r++) {
if (arrayTotalBtn[r].x+(180)<800) {
Tweener.addTween(arrayTotalBtn[r],{x:430+(r*40),time:0.5,transition:”easeOutExpo”, onComplete: completeArrayTotal});
function completeArrayTotal():void{
Tweener.removeTweens(arrayTotalBtn[r]);
}
} else {
Tweener.addTween(arrayTotalBtn[r],{x:430+(r*40),time:0.5,transition:”easeOutExpo”, onComplete: completeArrayTotalb});
function completeArrayTotalb():void{
Tweener.removeTweens(arrayTotalBtn[r]);
}
}
}

Uppdate the counterMovie

counterMovie=Clip.id;
}

}

RollOut State

function btnOut(evt:Event):void {
resultTxt.text=””;
}

Click State

function onClickCateg(evt:Event):void {
var Clip:Object=evt.currentTarget;
resultTxt.text= “btn “+Clip.id +” it was clicked”;
}

that’s All Folk’s – Good Luck –

Pizzi

.fla file are commented

wiev the exampledownload ITAdownload ENG