Tuesday, 25 August 2009

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.

18 comments:

Alexflaco 7 January 2010 at 07:00  

Grate tutorial but could you please explain me why do I have these errors when I am trying to publish.

1120: Access of undefined property moveFollow.

&

1120: Access of undefined property event.

iliketo 7 January 2010 at 09:26  

@Alexflaco

Firstly, make sure you are using an Actionscript 3.0 file, and also checkout this post

pegleg 20 January 2010 at 08:19  

There is something wrong with the line of code as noted on number 4. I keep receiving an error telling me that an identifier is missing with new Tween. Should there be a symbol of some sort on this line which is missing in your tutorial?

iliketo 20 January 2010 at 10:09  

@pegleg

There isn't anything missing from the code. Sometimes when you copy and paste the code the " "(quotation marks) gets turned into a different keyboard symbol. Try typing in the code instead of copying and pasting.

Israel 20 January 2010 at 13:00  

Hello,

I keep getting the following error:

1120: Access of undefined property btn_inicio.

Here is the code:

var follower_mc:MovieClip = new MovieClip();
//1.
import fl.transitions.Tween;
import fl.transitions.easing.*;
//2.
var buttonsArr:Array=new Array(btn_inicio,btn_quienes,btn_porque,btn_nuestros,btn_preguntas,btn_prensa,btn_contactenos);
//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);}

Please help.

iliketo 20 January 2010 at 14:19  

Take a look at this post

Israel 26 January 2010 at 10:29  

Thanks iliketo but this is not the case. I made sure every button has the instance name.

Any clues?

iliketo 26 January 2010 at 16:03  

@Israel

You have the following error.

1120: Access of undefined property btn_inicio

Make sure you have correctly name "btn_inicio".

Anthony 9 February 2010 at 19:15  

Is there a tutorial to do this with AS2?

iliketo 11 February 2010 at 14:13  

@Anthony

No, i don't have an AS2 version of this tutorial.

alone_64 11 May 2010 at 12:22  

hello, i have some errors, but i dont know why

1120: Access of undefined property moveFollow.
buttonsArr[i].addEventListener(MouseEvent.ROLL_OVER, moveFollow);


1120: Access of undefined property event.
new Tween(follower_mc,"x",Strong.easeOut,follower_mc.x,event.currentTarget.x, 1,true);}

And the code is written like this:

CODE

var follower_mc:MovieClip = new MovieClip();
//1.
import fl.transitions.Tween;
import fl.transitions.easing.*;

//2.
var buttonsArr:Array=new Array(Btn_Home,Btn_Nosotros,Btn_Historia,Btn_Filosofia,Btn_Servicios,Btn_Proyectos,Btn_Proyectos,Btn_Contacto);

//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);}

Can , anyone help me?

bjg1016 12 May 2010 at 09:01  

I love the script, but how can the slider tween back to the current page? After the mouse moves the slider to another position and leaves the hot area, can the slider tween automatically back to the current page is what I'm asking. Thanks

iliketo 12 May 2010 at 13:41  

@alone_64

Uncomment the moveFollow function.

iliketo 12 May 2010 at 13:42  

@bjg1016

Please explain more I don't understand what you mean.

sultan 14 April 2012 at 20:37  

thanks for your tutorial.
please tell me how can move into frames by clicking on each button of menu?
thanks

iliketo 15 April 2012 at 02:28  

@sultan,

Firstly, add a click event to the buttons. Then use the gotoAndStop() method to move into the frames.

sultan 15 April 2012 at 07:25  

thanks for your reply,
i am new to flash and i should create a flash website for my course and i have lots of problem please tell me where should i add the click event i used this menu for my site and i dont know where should i writhe the click event.
thanks

iliketo 15 April 2012 at 14:19  

@sultan

You need to understand code. If you have read through the tutorial you should be able to find out the answer.

Although you are new to Flash. You still cannot copy and paste code without understanding it first. I can give you the answer if you are desperate, but you will learn nothing.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP