PDA

View Full Version : sliding menu



cvita
August 25th, 2008, 09:54 AM
Hi

I've looked up a tutorial about sliding menu: http://www.kirupa.com/developer/flash5/slidingmenu.htm

How to make a slider with two arrows, one pointing to the left and other one to the right side, using Action Script that would do the same as the little buttons in the tutorial. I don't know how to tell the same object to move again and again on one side. I suppose that "for statement" will be required, but I don't know how to write it.

Please help!

Anil_kumar
August 27th, 2008, 04:45 AM
just paste this code (its AS3) in ur AS panel
or
download source file
--------------------------------------------
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var i = new int;
var MyRoot = root;

//edit this no
var BoxSize:Number = 100;

//edit this no
var BoxNum:Number = 4;

var MainMenu = createManu();
var MenuMask = createBox(BoxSize,0xFFCC00);
MainMenu.mask = MenuMask;
MainMenu.animation=1;



function createManu():MovieClip {
var menu = new MovieClip();
for (i=0; i<BoxNum; i++) {
var MenuItem = createBox(BoxSize,0xFFCC00/i);
menu.addChild(MenuItem);
MenuItem.x=BoxSize*i;
var newFormat:TextFormat = new TextFormat();
newFormat.size=BoxSize;
newFormat.color=0xFFFFFF;
newFormat.align = TextFormatAlign.CENTER;

var target = MenuItem.getChildAt(0);
target.text = i;
target.width = BoxSize;
target.height = BoxSize;
target.x=0;
target.y=0;
target.selectable = false;
target.setTextFormat(newFormat);
target.mouseEnabled = false;

MenuItem.id=i;
MenuItem.addEventListener(MouseEvent.CLICK,ClickHa ndler);
MenuItem.buttonMode = true;
}
return menu;
}


var MenuButton:MovieClip = createManu();
addChild(MenuButton);
MenuButton.scaleX=.25;
MenuButton.scaleY=.25;
MenuButton.x=stage.stageWidth/2-MenuButton.width/2;
MenuButton.y=BoxSize+10;


addChild(MainMenu);
MainMenu.x=MenuButton.x;
MainMenu.y=10;
MainMenu.enabled = false;
MenuMask.y=MainMenu.y;
MenuMask.x= MainMenu.x;

addChild(MenuMask);

function createBox(Size:Number,clr:Number):MovieClip {

var box = new MovieClip();
var TextInBox = new TextField();

box.graphics.lineStyle(2,0x999999);
box.graphics.beginFill(clr,1);
box.graphics.drawRect(0,0,Size,Size);
box.graphics.endFill();

box.addChild(TextInBox);
return box;
}

function TweenHandler(MyObject:MovieClip,Start:Number,End:N umber ):void {
var MyTween:Tween = new Tween(MyObject, "x", Regular.easeOut, Start, End, 2, true);
MyTween.addEventListener(TweenEvent.MOTION_FINISH, FinishHandler);
MainMenu.animation=0;
}

function FinishHandler(e:TweenEvent):void {
MainMenu.animation=1;
}


function ClickHandler(e:MouseEvent ):void {
TweenHandler(MainMenu,MainMenu.x,(MenuButton.x)-(BoxSize*e.target.id));
}

var LeftArrow = CreateArrow();
addChild(LeftArrow);
LeftArrow.y=MenuButton.y+10;
LeftArrow.x=MenuButton.x-LeftArrow.width;


var RightArrow = CreateArrow();

addChild(RightArrow);
RightArrow.y=MenuButton.y+10;
RightArrow.x=LeftArrow.x+MenuButton.width*2+10;
RightArrow.rotation = 180;


function CreateArrow():MovieClip {
var Arrow= new MovieClip();
Arrow.graphics.lineStyle(1,0x000000);
Arrow.graphics.beginFill(0xFF6600,1);
Arrow.graphics.lineTo(30,-20);
Arrow.graphics.lineTo(20,-3);
Arrow.graphics.lineTo(50,-18);
Arrow.graphics.lineTo(53,15);
Arrow.graphics.lineTo(20,4);
Arrow.graphics.lineTo(30,20);
Arrow.graphics.lineTo(0,0);
Arrow.buttonMode = true;
return Arrow;
}

LeftArrow.addEventListener(MouseEvent.CLICK,Naviga teLeft);
RightArrow.addEventListener(MouseEvent.CLICK,Navig ateRight);


function NavigateLeft(e:MouseEvent ):void {
if ((MainMenu.x>(MenuButton.x-MainMenu.width)+(BoxSize*2))&&MainMenu.animation==1) {
TweenHandler(MainMenu,MainMenu.x,MainMenu.x-BoxSize);
}
}
function NavigateRight(e:MouseEvent ):void {
if ((MainMenu.x<(MenuButton.x))&&MainMenu.animation==1) {
TweenHandler(MainMenu,MainMenu.x,MainMenu.x+BoxSiz e);
}
}

--------------------------------------------
Anil
anilkumarnd@gmail.com

cvita
September 1st, 2008, 05:27 AM
Wow, thank you very much for your time and effort, it works!