Friday, 13 November 2009

Stretch menu effect in Actionscript 3

In this tutorial you will learn how to create a stretch menu effect in Actionscript 3.0.
The menu effect will stretch horizontally when the mouse is over the menu items, and will shrink when the mouse is off the menus items. This stretching effect is created using motion tweens in the timeline. I have created this tutorial in Flash CS4, but it should still work for CS3.

Stretch menu effect in Actionscript 3.0

Step 1

Open a new Flash AS3 file.
Select the Rectangle tool (R) and drag a small rectangle shape on the stage like below. I have placed the rectangle shape at the left most edge of the stage. The dimensions for my rectangle shape are 35 width & 35 height.

Step 2

Convert your rectangle shape into a move clip (F8). Then double click on the movie clip to enters its timeline and replicate the following layers. The first layer will hold the Actions and has a stop() method in the 1st and 20th frames. The second layer will hold the text and the third layer will hold the menu items.

Step 3

Right click on the rectangle shape and select ‘Create Motion Tween’ from the drop down menu. If a warning message appears click OK. This will convert the rectangle shape into a movie clip.

On the timeline select the 13th frame. Then select the free transform tool and change the width to 130 from the properties panel. Your rectangle shape should look like below.

Step 4

On the timeline, lock the ‘Menu Item’ layer and then select the ‘Text’ layer and insert a key frame (F6) on the 12th frame.

Type some text on the menu items as show below. I have used Arial font with 15pt size.

Right click on your text message and select ‘Convert to Motion tween’ from the drop down menu. On the timeline select the 18th frame and then move your text message slightly to the right. This will create a moving effect for the text when the menu item is stretching.

Select the 11th frame, then click the message on the stage and change the alpha to 0% on the colour effect panel. Your timeline should eventually look like below.

Step 5

Return to the main timeline. From the library panel duplicate as many menu items as you wish by right clicking on the item and selecting ‘Duplicate’. Remember to change the text message movie clips for each menu item, or the text will remain the same. After you have finished duplicating the menu items drag them onto the stage.

Step 6

Give each of your menu items the following instance names: menu1, menu2, menu3 and menu4 accordingly.

Step 7

On the timeline create a new layer called ‘Actions’ then open up the Actions panel and enter the following code.

//Array to hold all the button instances.
var menuArr:Array=new Array(menu1,menu2,menu3,menu4);

//This loops through all the buttons and adds event listeners to each button.
for (var i = 0; i < menuArr.length; i++) {    
menuArr[i].addEventListener(MouseEvent.MOUSE_OVER, stretchOut);   
menuArr[i].addEventListener(MouseEvent.MOUSE_OUT, stretchIn);    
menuArr[i].buttonMode = true;
menuArr[i].mouseChildren = false;  

//This function plays the stretch effect.
function stretchOut (event:MouseEvent):void {    

//This function returns the menu to its original position.
function stretchIn(event:MouseEvent):void {    
Step 8

Test your stretch menu effect Ctrl + Enter. Now move your mouse over each menu item and you should see it stretch.

You should now have a stretch menu effect. Remember to subscribe or follow me to keep updated with the latest tutorials.


irk 17 February 2010 at 01:46  

thanks for your very helpful and clearly explained tutorials.

I was wondering, could you offer some instructions, or another tutorial perhaps, on how to add mouse-click capability to the stretch menu? In other words, user clicks on a menu item, bringing them to another page, wherein that menu item stays stretched out as a way to indicate the page the user is on.

This would be very, very helpful, since the tutorials deal with animated navigation, but I'm at a loss as to "step 2", using them to actually navigate.

Thanks again.

iliketo 17 February 2010 at 06:25  


Take a look at the open URL in AS3 tutorial

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP