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:
![]() // 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.
|