Quick Tip: How to Build a Horizontal Sliding Menu Paddle
In this Quick Tip you’ll learn how to use AS3′s Tween class to create a menu with a cool sliding bar. Excellent for navigation!
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Text
Start a new Flash Actionscript 3.0 document with a size of 600 x 300px.
First, select the Text tool and type out your navigation menu. For the sake of this tutorial I used Button 1 | Button 2 | Button 3 | Button 4, using “Arista Light” at 30pt for the font and #999999 for the color.
Then go to the align tab (if you cannot see it click on Window > Align) then align the text vertically and horizontally centered on your stage.
Step 2: Draw a Button
Rename the existing layer to “Text” and lock it so that you won’t accidentally move the text. Then create a new layer called “Buttons”. Select the rectangle tool and drag a rectangle (of any color) over “Button 1″ so that it fits snugly to the edges. This will be the hit area for your menu item.
Step 3: Finalize the Button
Select the rectangle that you just drew, click Modify > Convert to symbol and name it button. Make sure that the registration point is in the center (you may have to use the Align panel again).
Then, in the Properties panel, give this button an instance name of button1 and set the alpha to 0%.
Step 4: Add More Buttons
Copy and paste your new “invisible” button over the other three buttons and give them instance names of button2, button3 and button4 respectively. Use the Free Transform tool to stretch or shrink them so that each one fits snugly over its menu item, with no gaps in between.
Step 5: Draw the Bar
Select the Rectangle tool again, set the rounded corners to 5 pixels and draw a rectangle that’s 4 pixels high and about the width of your first button.
Position it underneath your first button, click Modify > Convert To Symbol and name it bar. Again, make sure the registration point is in the center.
Give it an instance name of bar and an alpha of 0%, just like the buttons. Lock the buttons layer and create a new layer called actions; lock this as well. Now right-click on the first frame of your new actions layer and click Actions.
Step 6: Import Classes
// Import classes needed for tweening import fl.transitions.Tween; import fl.transitions.easing.*;
We’ll be using the Tween class to make the bar move using code, so import it. The easingpackage is also needed, so that we can specify the exact type of tween motion to be used.
Step 7: Define Variables
// Define the tween variable for the bar's "x" position var barX:Tween; // Define the tween variable for the bar's fade-in var barAlphaIn:Tween; // Define the tween variable for the bar's fade-out var barAlphaOut:Tween; // Define the tween variable for the bars width var barWidth:Tween;
Define the variables we will be using to tween the bar.
Step 8: Event Listeners
// Add an event listener for the roll over of button 1 button1.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler); // Add an event listener for the roll out of button 1 button1.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler); // Add an event listener for the roll over of button 2 button2.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler); // Add an event listener for the roll out of button 2 button2.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler); // Add an event listener for the roll over of button 3 button3.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler); // Add an event listener for the roll out of button 3 button3.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler); // Add an event listener for the roll over of button 4 button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler); // Add an event listener for the roll out of button 4 button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
This may look like a lot of code but it is actually really simple.
First we add an event listener that listens for the mouse to roll over button1 and then executes the rollOverHandler function. Then we add another event listener that listens for the mouse to roll out of button1 and executes the rollOutHandler function.
We just repeat those listeners for all four buttons.
Step 9: Functions
// Execute function for rollover event
function rollOverHandler (e:MouseEvent):void
{
// Adjust the bar's "x" position to the same as the button. Parameters are:
// object to tween (i.e. to animate)
// property of the object to be tweened
// type of easing (type of motion) to use
// initial value (i.e. value to tween the property from)
// end value (i.e. value the property will end up with when the tween's finished)
// duration of tween
// whether to measure the duration in seconds (true) or frames (false)
barX = new Tween(bar, "x", Back.easeOut, bar.x, e.target.x, 1, true);
// Tween the bar's alpha to make it fade in
barAlphaIn = new Tween(bar, "alpha", Regular.easeOut, bar.alpha, 1, 1, true);
// Tween the bar's width to become the same as the button's
barWidth = new Tween(bar, "width", Regular.easeOut, bar.width, e.target.width, 1, true);
}
// Execute function for rollout event
function rollOutHandler (e:MouseEvent):void
{
// Tween the bar's alpha to make it fade out
barAlphaOut = new Tween(bar, "alpha", Regular.easeOut, bar.alpha, 0, 1, true);
}
When we roll over a button, the function rollOverHandler is executed, which will tween the bar from its current x-position to the x-position of the button that is currently being rolled over. (Note: e.target always refers to the button that triggered the rollOverHandler function.) This gives the bar a nice smooth horizontal motion.
Then, it fades the alpha of the bar from its current alpha to 1 (100% alpha), and the width from its current width to the width of the button that triggered the handler function.
When we roll out of the button, the function rollOutHandler is executed and the bar is faded out from its current alpha to 0 (fully transparent).
Since the buttons fit closely together with no gap between them, you’ll only see the bar fade out if you roll out of all the menu items at once, otherwise it’ll fade in again too soon for you to spot it!
Conclusion
You should now have something similar to the preview. Great! You’ve learned how to use the Tween class in ActionScript 3.0 to create an effective menu animation that will catch people’s attention and stand out from regular menus. The possibilities are endless.
Next step: how about adding a MouseEvent.CLICK listener and handler to each button to let the user trigger different actions with a click?
I hope you enjoyed this tutorial and thanks for reading.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
cool!
Nice Tip! Thank you
Could you save it for CS3? I can’t open it.
why not just have one big button and have the underline follow the mouse with delay?
Seems simpler to build.
You could, but that would be a different effect. What I like about this one is, the paddle snaps to the button, rather than just trailing the mouse.
I seem to have the problem, that my buttons are misplaced about a few pixels in the actual .swf
On stage, the placement looks perfectly fine, but after testing the movie, I get this weird effect
does anyone have a tipp for me on this one?
Next week – “how to build a time machine” to take you back to 2002 when this was a cool effect.
hahahaha YES!
How about a time machine to take you back to a time when people didn’t use the cloak of anonymity to post rude comments. The point of the tutorial is to learn about the tween class in AS3, which is still pretty new to a lot of people.
Very Nice… Very Good one… I like it very much… Actually I am trying to modify a file that uses the same concept.
Can I do the same effect vertical, and the Bar moves in a vertical direction.
Also is it possible replace the Bar with a Rectangle shape.
Thank you
just make the bar any size you want and change it to move on the y axis not the x axis and it should work…
I got it, it work very beautiful…..thank you very much.
Reham
Just wondering, can this effect be achieved using jQuery.
Wacom uses a similar behavior in their navigation (top right)
http://intuos.wacom.com/Americas/
Just wondering, can this effect be achieved using jQuery.
Thanks
of course, search “kwicks”
Nicely done. Thanks for putting this together for us. BTW I liked 2002, that was a pretty good year. :)
Nice Tutorial Man, Thanks
magically! I like it!
Visually, this example is more beautiful than html + jquery.
But it’s my opinion.
use a tweening engine!!!!!!
i was showing people how to create the effect using as3′s built in tween effects
This tutorial was a little amateur for this crowd. Might be a good idea if all tutorials had a “beginner”, “intermediate” or “advanced” rating.
I agree with this – its not that this was a bad tutorial but wish i had known that it was for beginners before i clicked.
Fair point. Duly noted :)
thank
Makes me want to use flash. Good tutorial.
Can you teach me how to work this slider button with my aspx website. this would be beneficial for the looks.
Great tutorial! thankyou very much =)
how would i go about modifying this tutorial so that the bar jumps back to its original position on roll off as apposed to staying in its current position? Thanks.
not bad
one thing I would like to know however is how to set the z index?
I would like to modify this menu bar to have a sliding alpha tweened box (as opposed to bar)
and I would like it to be behind the text but I can seem to place this bar with a z index of 0
any suggestions?
thanks
Hi Terraform,
Thanks for the comment.
If you want the slider to be positioned behind the text then you can move the slider layer below the text layer.
Is this what you mean.
Thanks
Ben
This is a nice effect…thanks for the lesson
Hey, I used the same buttons and bar but I think my code is way simpler. I didn’t make use of the tween objects, I just did some simple math (current + some percentage of difference).
// Add an event listener for the roll over of button 1
button1.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 1
button1.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 2
button2.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 2
button2.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 3
button3.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 3
button3.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 4
button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 4
button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
addEventListener(Event.ENTER_FRAME,go);
var targetx=0;
var targetwidth=0;
var targeta=0;
function go(event:Event) {
bar.x += 0.3*(targetx – bar.x);
bar.width += 0.3*(targetwidth – bar.width);
if (bar.alpha>targeta) {
bar.alpha += 0.04*(targeta-bar.alpha);
} else {
bar.alpha += 0.5*(targeta-bar.alpha);
}
}
// Execute function for rollover event
function rollOverHandler(e:MouseEvent):void {
targetx=e.target.x;
targetwidth=e.target.width;
targeta=1.0;
}
// Execute function for rollout event
function rollOutHandler(e:MouseEvent):void {
targeta=0.0;
}
Nice tutorial. This technique can be applied to other animations and effects. I particularly like how Mr. Stanley comments out all the code – very easy to follow.
Great job. Thanks for sharing your time and knowledge.
How do you link pages with this menu in flash?
Hey Toby,
First you need to create a variable that holds the URL like this:
var button1URL:URLRequest = new URLRequest(“http://www.example.com”);
Then add this code for a listener for the click (I am using button 1 as an example):
button1.addEventListener(MouseEvent.CLICK, buttonOneClick);
And then create a function:
function buttonOneClick (e:MouseEvent):void {
navigateToURL(button1URL, ‘_self’);
}
And then obviously replace the “http://www.example.com/” with your own URL. And if you wanted it to open in a new browser window change “_self” to “_blank”.
I hope this helps,
Cheers
Ben
hello,
i really liked your tutorial and tried to change a couple of things. I was going pretty well (making it vertical and expanding it) until i tried to add links following your instructions. I would really appreciate you help. After trying to add the code, i receive a message “1084: Syntax error: expecting rightparen before colon.” and i stopped having the rollover effect I tried to find a solution around but without luck. By the way, let me tell you that i’m a begginer, trying those things as a hobby, so if i made a very simple mistake, just forgive me.
// Import classes needed for tweening
import fl.transitions.Tween;
import fl.transitions.easing.*;
// Define the tween variable for the bar’s “x” position
var barY:Tween;
// Define the tween variable for the bar’s fade-in
var barAlphaIn:Tween;
// Define the tween variable for the bar’s fade-out
var barAlphaOut:Tween;
// Define the tween variable for the bars width
var barHeight:Tween;
var button1URL:URLRequest = new URLRequest(“http://www.fartex.gr”);
// Add an event listener for the roll over of button 1
button1.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 1
button1.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
button1.addEventListener(MouseEvent.CLICK, buttonOneClick);
// Add an event listener for the roll over of button 2
button2.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 2
button2.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 3
button3.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 3
button3.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 4
button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 4
button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 4
button5.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 4
button5.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Execute function for rollover event
function rollOverHandler (e:MouseEvent):void
{
// Adjust the bar’s “x” position to the same as the button (tweened object, property to tween, easing type, initial value, end value, duration, use seconds[true or false]
barY = new Tween(bar, “y”, Back.easeOut, bar.y, e.target.y, 1, true);
// Adjust the bar’s alpha to fade in
barAlphaIn = new Tween(bar, “alpha”, Regular.easeOut, bar.alpha, 1, 1, true);
// Adjust the bar’s width to the same as the button
barHeight = new Tween(bar, “Height”, Regular.easeOut, bar.Height, e.target.Height, 1, true);
}
// Execute function for rollout event
function rollOutHandler (e:MouseEvent):void
{
// Adjust the bar’s alpha to fade out
barAlphaOut = new Tween(bar, “alpha”, Regular.easeOut, bar.alpha, 0, 1, true);
}
function buttonOneClick (e:MouseEvent):void
{
navigateToURL(button1URL, “_self”);
}
Thanks you.
Thank you very much
I manage to solve it.
Keep on the good work!
Hey Ben,
First off, wonderful tutorial. Very easy to read and understand.
However, when I tried to create a vertical version of this in Flash CS5, the functions only appear to work for the first button (button1), but as soon as I roll over to the second button, the one below it, my bar moves but the fading ability doesn’t happen. I also added a function that increases the height of the bar to engulf the whole button when rolled over and then decreases back to the original size when the cursor is removed but again this only happens with the first button but not with the others. Do you think you can tell me what I’m doing wrong? Code is below.
stop();
import fl.transitions.Tween;
import fl.transitions.easing.*;
// Define the tween variable for the bar’s “y” position
var barY:Tween;
// Define the tween variable for the bar’s fade-in
var barAlphaIn:Tween;
// Define the tween variable for the bar’s fade-out
var barAlphaOut:Tween;
// Define the tween variable for the bars height
var barHeightplus:Tween;
var barHeightminus:Tween;
// Add an event listener for the roll over of button 1
button1.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 1
button1.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 2
button2.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 2
button2.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 3
button3.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 3
button3.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 4
button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 4
button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 4
button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 4
button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Add an event listener for the roll over of button 5
button5.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 5
button5.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// Execute function for rollover event
function rollOverHandler (e:MouseEvent):void
{
// Adjust the bar’s “y” position to the same as the button (tweened object, property to tween, easing type, initial value, end value, duration, use seconds[true or false]
barY = new Tween(bar, “y”, Back.easeOut, bar.y, e.target.y, 1, true);
// Adjust the bar’s alpha to fade in
barAlphaIn = new Tween(bar, “alpha”, Regular.easeOut, bar.alpha, 1, 1, true);
// Adjust the bar’s height up
barHeightplus = new Tween(bar, “height”, Regular.easeOut, bar.height, 60, 1, true);
}
// Execute function for rollout event
function rollOutHandler (e:MouseEvent):void
{
// Adjust the bar’s alpha to fade out
barAlphaOut = new Tween(bar, “alpha”, Regular.easeOut, bar.alpha, 0.6, 1, true);
// Adjust the bar’s height down
barHeightminus = new Tween(bar, “height”, Regular.easeOut, bar.height, 42, 1, true);
}
Thanks
Hey James,
I copied your code into Flash (I’m using CS5 as well) and it seemed to work perfectly fine…
I used the exact code you posted except I just changed the height values for the bar to tween to…
Is this what you were trying to achieve?
http://webvolution.us/eterdezino/flash/test.swf
Let me know (:
And here is the source code if you want it…
http://webvolution.us/eterdezino/flash/test.fla
Cheers
Ben
Hey Ben,
Yes it was what I was trying to achieve. I finally figured out my problem thanks to you. My bar layer wasn’t on the bottom so that when I compiled it, the invisible buttons were actually under the bar. Thus, my mouse was never actually on the button which was why my functions weren’t working. Thanks for your help!
James
Hey James,
No problem. Glad I could help (:
Hi Ben, great tut loved as it was just what i was looking for!
however i cannot get the actions code to work proerly for me! i changed the button 1 2 and 3 to home, about and contact and tried to add urs to the buttons!
I am using this bar in a website I am building. This is what i have come up with:
// Import classes needed for tweening
import fl.transitions.Tween;
import fl.transitions.easing.*;
// Define the tween variable for the bar’s “x” position
var barX:Tween;
// Define the tween variable for the bar’s fade-in
var barAlphaIn:Tween;
// Define the tween variable for the bar’s fade-out
var barAlphaOut:Tween;
// Define the tween variable for the bars width
var barWidth:Tween;
var homeURL:URLRequest = new URLRequest(“index.php”);
var aboutURL:URLRequest = new URLRequest(“about.php”);
var contactURL:URLRequest = new URLRequest(“contact.php”);
// Add an event listener for the roll over of button 1
home.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 1
home.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
home.addEventListener(MouseEvent.CLICK, homeClick);
// Add an event listener for the roll over of button 2
about.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 2
about.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
about.addEventListener(MouseEvent.CLICK, aboutClick);
// Add an event listener for the roll over of button 3
contact.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// Add an event listener for the roll out of button 3
contact.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
contact.addEventListener(MouseEvent.CLICK, contactClick);
// Execute function for rollover event
function rollOverHandler (e:MouseEvent):void
{
// Adjust the bar’s “x” position to the same as the button (tweened object, property to tween, easing type, initial value, end value, duration, use seconds[true or false]
barX = new Tween(bar, “x”, Back.easeOut, bar.x, e.target.x, 1, true);
// Adjust the bar’s alpha to fade in
barAlphaIn = new Tween(bar, “alpha”, Regular.easeOut, bar.alpha, 1, 1, true);
// Adjust the bar’s width to the same as the button
barWidth = new Tween(bar, “width”, Regular.easeOut, bar.width, e.target.width, 1, true);
}
// Execute function for rollout event
function rollOutHandler (e:MouseEvent):void
{
// Adjust the bar’s alpha to fade out
barAlphaOut = new Tween(bar, “alpha”, Regular.easeOut, bar.alpha, 0, 1, true);
}
function homeClick (e:MouseEvent):void
{
navigateToURL(homeURL, “_self”);
}
function aboutClick (e:MouseEvent):void
{
navigateToURL(aboutURL, “_self”);
}
function contactClick (e:MouseEvent):void
{
navigateToURL(contactURL, “_self”);
}
Would love to know where I am going wrong! cheers!
-Phillip
Hey Guys I faced some problems while making it…The Bar is not moving at all and my button are not showing up ……can anybody help me by video tutorial. Thank you!
No, it does work very well. check your spacing problems inside the code. (spaced between each word)
Can I add a image in stead of a bar ?
Sure you can,
1 Open the normal tutorial source,
2 unlock the buttons layer
3 Double Click the bar(under button 1 – you cant see it coz the alpha is 0)
4 go to file menu and import any image you want
5 place it at the right position
That’s all!!