Horizontal sliding menu in Actionscript 3

I previously created a vertical sliding menu in AS3. This time I will create the horizontal version of the sliding menu. Most of the content from the previous tutorial should look familiar only the code will be different. You will still need to use tweening, so checkout the Tweens in Actionscript 3 for more information.

UPDATE:Horizontal sliding menu part 2 now available.

Horizontal sliding menu in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the rectangle tool and create the horizontal shape for the background of your sliding menu. I have used #FFFE65 colour, but you can use whatever colour you wish.




Step 2

On the timeline insert a new layer called “button”, and then select the text tool with static text and create your menu items like below. Again I have used a knocked out text effect for the menu items.




Step 3

Select each menu item in turn and convert them into a symbol (F8). Give your symbols appropriate names, check button and select the bottom middle registration point as shown below:



You can change the button states for your symbol if you wish. For more information checkout the basic button tutorial.


Step 4

Give your menu the following instance names: home_btn, tutorials_btn, subscribe_btn and contact_btn.


Step 5

On the timeline insert a new layer called “follower”, and then create your object on the stage which will follow the menu items. I have created a simple rectangle shape like below.



Convert your follower object into a movie clip (F8) and give it the instance name: follower_mc. Then place your follower movie clip beside the first menu item like below.


Step 6

On the timeline create a new layer called ‘Actions’. Open up the actions panel F9 and enter the following code. Most of the code is the same from the vertical sliding menu.

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

//2.
var buttonsArr:Array=new Array(home_btn,tutorials_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,"x",Strong.easeOut,follower_mc.x,event.currentTarget.x, 1,true);
} 

Code:

1. This imports the tween and transition classes 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 7

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




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