Wednesday, 5 August 2009

Vertical sliding menu in Actionscript 3

In this tutorial you will learn how to create a vertical sliding menu in Actionscript 3.0. A vertical sliding menu has an arrow which follows the menu items when the mouse is over a button. The sliding menu uses tweening to create the following of the menu items, checkout Tweens in Actionscript 3 for more information. I have created this menu in Flash CS4, but it should work in Flash CS3.


Vertical sliding menu in Actionscript 3

Step 1

Open a Flash AS3 file.
Select the rectangle shape tool and create the background to your sliding menu. I have used #CCCCCC for colour. Your shape should look something like below:




Step 2

On the timeline create a new layer called “buttons”. Select the text tool with static text and type the names of your menu items. I have used impact font with a knocked out text effect.




Step 3

Convert each of your menu items into symbols by pressing F8. Give your symbol an appropriate name, check buttons, select the left registration point and click ok.



Make sure you have selected the left registration point or this effect will not work. You can change the different button states if you wish. For more information checkout the basic buttons tutorial.


Step 4

Give each of your menu items appropriate instance names. I have used home_btn, tutorials_btn, subscribe_btn and contact_btn for my menu items.


Step 5

On the timeline create a new layer called “follower”. The layer will contain the movie clip that will follow the menu items.

Create your follower object on the stage I have created a simple arrow, but you can create whatever object you wish. I have used #FF0000 colour.




Step 6

Convert your follower object into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip, select the left registration point and click ok.

Give your follower object the instance name: follower_mc and then place the follower object beside your first menu item.




Step 7

On the timeline insert a new layer called “Actions.” Select the first frame and hit F9 to open up the action panel and enter the following code:

//1.
import fl.transitions.Tween;
import fl.transitions.easing.*;

//2.
var buttonsArr:Array=new Array(home_btn,tutorial_btn,subscribe_btn,contact_btn);

//3.
for (var i:uint = 0; i < buttonsArr.length; i++) { buttonsArr[i].addEventListener(MouseEvent.ROLL_OVER, moveFollow);
}

//4. function moveFollow(event:MouseEvent):void {
new Tween(follower_mc,"y",Strong.easeOut,follower_mc.y,event.currentTarget.y, 1,true); }
code:
1. Imports the tween and transition class which are needed to move the follower object.
2. Add all the buttons into an array called buttonsArr.
3. Loops through all the buttons in the array and adds an event listener with a mouse roll event and the moveFollow function.
4. This is the moveFollow function which creates a new tween and goes to the corresponding menu item when moused over. For more information on tween checkout the Tween in Actionscript 3 tutorial.


Step 8


Test your vertical sliding menu Ctrl + Enter. Move your mouse over the menu items and the follower object should move as well.



You should now have a vertical sliding menu. The source files can be downloaded here.

7 comments:

Anonymous 4 December 2009 02:38  

I have a problem with this menu.
When trying to run it i have an error 1087:extra characters found after the end of program. This is on the last line of the code?

iliketo 4 December 2009 06:18  

Error 1087 is a syntax error. Check you have no spelling mistakes, additional characters, missing bracket or illegal character in a variable name.

joseph 29 January 2010 21:15  

i get to the last step and copy and paste the script exactly but end up getting an error.

"1087: Syntax error: extra characters found after end of program.

iliketo 30 January 2010 04:11  

@Joseph

Look at my comment above. And don't copy and paste, try writing out the code.

diggingmyowngrave 11 July 2010 22:31  

hi, i want that i can hover the indicator just by using the up and down arrow keys.. help me plss or post a link that has some tutorial in it like the way i wanted :)

andrade.design 11 February 2011 13:28  

just delete the:

//1.
//2.
//3.
//4.
in light grey from the code, and thats it!!

those are the extra characters!
:D

iliketo 27 April 2011 10:32  

@digging

Take a look at the detect key press tutorial

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP