Saturday, 23 May 2009

Zoom horizontal navigation

This Flash tutorial will teach you how to create a horizontal navigation bar with a zoom effect on the menu items. When the user clicks on a menu items the text will zoom in, before displaying the navigational page. Some knowledge of basic buttons and opening urls will be needed for this tutorial.

Zoom horizontal navigation

Step 1


Open a new Flash document with an appropriate stage size. I have used a 400 width by 100 height stage size with a black background colour.

Select the rectangle tool with #666666 colour and no stroke. Draw a rectangle shape on the stage like below:




Step 2

Convert your rectangle into a symbol by selecting F8. Give your symbol the name “menu bar”, check movie clip, centre the registration point and click ok.




Step 3

ouble click on the rectangle to enter the rectangle’s timeline. On the timeline change layer1 name to “menu bar” and lock the layer. Then insert a new layer called “buttons” above the menu bar layer. Your timeline should look like below:




Step 4

Select the text tool (t) and type the name of your first menu item. I have used the Myriad Pro font type with white colour, but you can use whatever colour and font you wish.

Convert your text message into a symbol by pressing F8. Give your symbol the name “item 1 button”, check button, centre the registration point and click ok.

Now convert button into symbol by pressing F8. Give your symbol the name “item 1 movie clip”, check movie clip, centre the registration point and click ok. I have also added a glow filter to the movie clip to give a black outline around the text. You can also add a knocked out text effect on the movie clip if you wish. You should now have button inside a movie clip which is inside a movie clip.

Repeat this step for the number of menu items you wish. And your menu bar should look something like below:




Step 5

Double click on your first movie clip (text message) to enter the movie clip’s timeline. Now insert a keyframe (F6) at frame 20 then return to the 10th frame and insert a keyframe (F6).

On the 10th key frame, select the Free Transform Tool (Q) and hold down the shift key and drag one of the corner handles, so that the text is slightly larger.



Now right click anywhere in between the 1st and 10th frame and select Motion tween then repeat this for the 10th and 20th frames.

Select the 10th frame using the Selection Tool (V), then selects the text on the stage and change the colour properties to Alpha and at 0%.

On the timeline insert a new layer called “actions” right click on the first frame and select Actions and add the following code:

stop();

Now insert a key frame (F6) at frame 20 right click on the frame and select Actions and add the following code:

stop();
getURL("http://www.ilike2flash.com","_blank");

**For more information on getURL checkout the open url tutorial. The code above basically stops at the 20th frame and displays the web page.

Return to the menu bar timeline and repeat this step for all the buttons you have. Your timeline should look something like below:



Step 6

Right click on each button in turn and add the following code:

on(release){
gotoAndPlay(2);
}


Step 7

Test your movie clip Ctrl + enter. Use your mouse to click each button.



You should now have a zoom horizontal navigation.Feel free to contact me for any questions or comments and remember to subscribe.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP