Very advanced icon flash menu

Date: 18.11.2009, 17:41    Total views: 45586
Page:  1  2

In this thoroughly explained, detailed lesson, I will show you how to create very advanced icon flash menu which you can use for any web site. Using this lesson, you will also learn:

1. How to design menu,
2. How to import any icon into a flash stage,
3. How to convert any icon, image into a movie clip,
4. how to create instance name,
5. How to animate icon and text
6. How to create invisible button
7. How to apply blur filter on any icon.

To make this lesson, you have to use action script code. Let's start!

Example:



Step 1

First, download icons that we will use for this lesson.



Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 420 pixels and the height to 160 pixels. Select #FDFDFC as background color. Set your Flash movie's frame rate to 48 and click ok.



Step 3

Call the current layer icon menu. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose File > Import > Import to Library. In the file explorer window that appears, find a three icons and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see three icons that you just imported. See the picture below!



Step 5

Select the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustments as follows:



Step 6

Draw two vertical lines like it is shown on the picture below!



Step 7

Using the Selection Tool (V) and drag and drop technique, move the icons from flash library on flash stage and palce it on the position like it is shown on the picture below!



Step 8

Select the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select Zurich BdEx BT as font.
3. Choose 12 as font size,
4. Select black as color,
5. As the rendering option, select Use Anti-alias for readability.



Type now text links like it is shown on the picture below!



Step 9

It's time for animation. Select the Selection Tool (V) and select the first button in menu. See the picture below!



Then, hit F8 key (Convert to Symbol) to convert this icon and text into a movie clip symbol.



Step 10

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip "About_Us". See the picture below!



Step 11

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.



Step 12

Call the current layer text. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 13

Select the Selection Tool (V) and select just icon. After that, hit Ctrl+X (Cut). Create a new layer above the layer text and name it icon. Select the icon layer and hit Ctrl+Shift+V key (Paste in Place).

Step 14

While the icon is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 15

Click now on frame 10 and hit F6 key. While you're on frame 10 move the icon a little up. After that, select the Selection Tool (V) and click once on the icon.Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make theadjustments as follow:

Next:  Part 2
  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar