Flash Tutorial – Very advanced icon flash menu

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 place 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:

Click now on frame 15 and hit F6 key. After that, move the icon a little down. Then, select again the Selection Tool (V) and click once on the icon. 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:

Step 17

Right-click anywhere on the gray area between frame 1 and 10 and frame 10 and 15 on the timeline and choose Create Motion Tween from the menu that appears.

Step 18

Go back on layer text and hit F8 key (Convert to Symbol) to convert text into a movie clip symbol.

Step 19

Click now on frame 10 and 15 and hit F6 key. While you’re still on frame 15, select the Selection Tool (V) and click once on the text to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it and make the adjustments as follow:

Step 20

Go back on frame 10 and move the text a little down.

Step 21

While you’re still on frame 10,Select the Selection Tool (V) and click once on the text to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the left, you will see the Filters button. Click once on that button. After that, click on plus icon, select Blur in it and make the adjustments as follows:

Step 22

Right-click anywhere on the gray area between frame 1 and 10 and frame 10 and 15 on the timeline and choose Create Motion Tween from the menu that appears.

Step 23

Go back on the main scene (Scene 1).

Step 24

Create a new layer above the layer icon menu and name it invisible button.

Step 25

Select now the invisible button layer and take again the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a rectangle shape over the first button. See the picture below!

Step 26

While the rectangle shape is still selected, hit F8 key (Convert to Symbol) to convert this rectangle into a Button Symbol.

Step 27

Double Click on the Invisible Button to go in its inside. Then, using the drag and drop technique move Up frame to frame Hit.

Step 28

Go back on the main scene (Scene 1).

Step 29

Select now the Selection Tool (V) and click once on the Invisible Button to select it. After that, open the Action Script Panel (F9) and enter the following Action Script code, inside the Actions panel:

on (rollOver) {
_root.mouse_over_About_Us = true;
}

on (rollOut) {
_root.mouse_over_About_Us = fstartlse;
}

on (release){
getURL(“http://www.flashfridge.com/“);
}

Step 30

Create a new layer above the Invisible Button layer and name it action script. Then, click on the first frame of layer action and enter the following Action Script code inside the Actions panel:

_root.About_Us.onEnterFrame = function() {
if (mouse_over_About_Us) {
_root.About_Us.nextFrame();
} else {
_root.About_Us.prevFrame();
}
};

Now, we’re don with the first button. Repeat this process also for every other buttons in menu!

Please enjoy!

Source: flashfridge.com

you may also like:

• Flash Tutorial – Learn How to Create Horizontal Image Transition Effect
  In this tutorial, you will learn how to create a horizontal blind image transition effect effect which will slowly reveal your picture from top to bottom in horizontal stripes. Each strip will also ha...
• Flash Tutorial – Tips and Best Practices for Designers: Symbols & Text
  For most newbies, the concept of symbols in Flash can be pretty confusing. I’ve known enough designers who – even after working with Flash for years – are pretty clueless about the best way to use sym...
• Flash Tutorial – Creating a Menu via XML
  In this tutorial, I’ll cover a basic XML technique, that you can use when building a menu. With XML, it’s very easy and fast to modify the menu labels etc. Intro In this tutorial, I’ll cover a basic...
• Flash Tutorial – Advanced XML Menu
  In this tutorial I will teach you how to create an advanced XML menu. We will first set up everything ready in Flash, then create the XML file and finally add some ActionScript 3 for the functionality...
• Flash Tutorial – Creating a Web Portfolio
  n this tutorial, I will show you how to create a Flash portfolio just by using one frame and ActionScript 3.0.   Setting up the environment 1. Create a new document of size 400×250 and backg...