ROLLING MENU                                                                              as3


    This tutorial shows how to creat a simple rolling menu with mouse over rolling feature. In this case its horizontal rolling, but theres no problem to rotate and make it vertical rolling menu. Buttons are fully customizable, the preview you see here is just an example. At the end we should get something like this :




    Open new actionscript 3.0 flash file and create 5 layers on the timeline. The 5th will be our background, color or image or anything else thats all on you. On the 4th layer create (in this case) 5 buttons, and put them in one line. Leave small spaces between them so it looks nicer. Set their instace names to skyfall_btn, brave_btn, iceage_btn, expandables_btn, batman_btn or any other its all up to you, just make sure those names matches the names in actionscript, otherwise it wont work. Now select all five (or any other number) of them and convert them into movieclip. Set then instance name of this new movieclip to zoznam. Move this movieclip to X=42 or whatever location u want to be the left edge of the menu. Now on 3rd layer draw a rectangle with size of area you want to display and conver this layer into the mask. This way we hide outlines of the movieclip with buttons when it starts moving to the sides. The mask layer should look something like this:



Now on 2nd layer create two buttons, set their instance names to left and the other one right . Move them on left and right side of stage. They will serve as trigger for menu to start moving once you hover your mouse cursor over them. Now select the first frame of layer number one and open actions. Insert the following code.



// function that moves the buttons to right
function MOVEright(){
	zoznam.x=zoznam.x+5;
	if (zoznam.x>42) {
		zoznam.x=42;	//stops the moving if the list hits the edge 
	}
}
//function that moves the buttons to left
function MOVEleft(){
	zoznam.x=zoznam.x-5;
	if (zoznam.x<-496) {
		zoznam.x=-496;	//stops the moving if the list hits the other edge 
	}
}

// function that moves the list of buttons if mouse cursor hovers over moving buttons
// on left or right side and calls the moving functions to move the list of buttons
this.addEventListener( Event.ENTER_FRAME, handleCollision);
function handleCollision( e:Event ):void {
	var _point:Point=localToGlobal(new Point(mouseX,mouseY));
	
	if (right.hitTestPoint(_point.x,_point.y,true)) {		
		MOVEright();
	}	
	if (left.hitTestPoint(_point.x,_point.y,true)) {
		MOVEleft();
	} 
}

//adding functionality to all the buttons
zoznam.brave_btn.addEventListener(MouseEvent.CLICK, BRAVEbtnclick);
function BRAVEbtnclick(ev:MouseEvent):void
{
	var BRAVEurl:URLRequest = new URLRequest("http://google.com"); 
	navigateToURL(BRAVEurl,"_blank");
}

zoznam.skyfall_btn.addEventListener(MouseEvent.CLICK, SKYFALLbtnclick);
function SKYFALLbtnclick(ev:MouseEvent):void
{
	var SKYFALLurl:URLRequest = new URLRequest("http://google.com"); 
	navigateToURL(SKYFALLurl,"_blank");
}

zoznam.iceage_btn.addEventListener(MouseEvent.CLICK, ICEAGEbtnclick); 
function ICEAGEbtnclick(ev:MouseEvent):void
{
	var ICEAGEurl:URLRequest = new URLRequest("http://google.com"); 
	navigateToURL(ICEAGEurl,"_blank");
}

zoznam.expandables_btn.addEventListener(MouseEvent.CLICK, EXPANDbtnclick);
function EXPANDbtnclick(ev:MouseEvent):void
{
	var EXPANDurl:URLRequest = new URLRequest("http://google.com"); 
	navigateToURL(EXPANDurl,"_blank");
}

zoznam.batman_btn.addEventListener(MouseEvent.CLICK, BATMANbtnclick);
function BATMANbtnclick(ev:MouseEvent):void
{
	var BATMANurl:URLRequest = new URLRequest("http://google.com"); 
	navigateToURL(BATMANurl,"_blank");
}

//hides most of the right click menu options
stage.showDefaultContextMenu = false;



     Lines 1-15 are two functions that moves the movieclip with all the buttons to left or right side. Speed of moving is set to 5. If u want to increase the rolling speed set this number to higher value or if u want to slow it decrease it. The if conditions checks if the movieclip with buttons reached the edge and then stops. In this case its 42 and -496. These two numbers depends on length of the movieclip with all the buttons and the position u want it to stop. Adjust these two numbers if the rolling stop too soon or too late. Lines 18-28 is function checking if mouse cursor hit the left and right buttons.If that is true, it will execute corresponding functions depending on which one was hit by the mouse cursor. Lines 30-64 are functions for each of the buttons. Line 67 removes the play,zoom,forward.. etc.. features from right click menu and leaves only basic flash functions. This line is not necessary.



DOWNLOAD SOURCE FILE