Advertisement
  1. Code
  2. ActionScript
Code

Quick Tip: How to Build a Horizontal Sliding Menu Paddle

by
Difficulty:IntermediateLanguages:

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

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 variables we will be using to tween the bar.

Step 8: Event Listeners

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

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.