Learn how to create the flash drop menu above

Part1: Setting up the workspace.
Ok, let us get started. Create a new Flash Document, Click Modify Document, here is where you can change the background color, and the dimensions of your movie. Since I am creating this for explanation I sat the size to 400x 70 to fit into my page. However, you can create any dimension you need.

This is the settings I used, as shown below

Part2: Adding the text and the layers.
Click ok, what you are satisfied with the setting above. Create the four layers shown below. Depending on the number of categories you have this will be the number of layers you will create.

Name the layers, Home, About, Artwork and Contact Us. On each layer using the  text Tool place the corresponding text on your work space. Make sure you are on the right layer when you do this. For the effect below I used, Tw Cen MT Condensed font face set at 22 size. The color is #666666.

For the writing under text, I use Verdana font set at 4 pixels, with the color #00FFFF. At this point you should have four layers with the corresponding text on it. Similar to what I have above. Create another layer about the Home layer, called "Home Action" as shown below. This is where we will place some script and the drop button animation.

While on the "Home Action" layer click on the Rectangle Tool Change the color of the rectangle to orange #F15A00 with no boarder

 and draw a square over the text as shown below.

Right click on the orange rectangle, which is on the "Home Action" layer, click Convert to Symbol as shown below.

Convert this into a movie clip and click ok.

Part3: Creating the Button animation.
Double click on the Orange Rectangle, and convert it again into a movie Clip.

Name the layer, Animation. Click on frame 10 and press F6 this will insert a keyframe, repeat this for frame 2, 19 and 20. Your time line should look like the image above. Turn the Ruler on this will make it easy to line up your drop menu.

Click on the ruler, drag a line down, and position it as shown below.

Click on frame 1 and using the Free Transform Tool, click on the bottom middle handle, and shrink the rectangle down as shown below.

Using the selection tool, select the small rectangle. In the properities window you should see the option below.

Change the Color to Alpha 0%, Repeat this step for frame 20

Do the same for frame 2 and frame 19, But instead of changing the color to Alpha, change the color to Tint.

Right Click on Frame 2, and Create Motion Tween.

Do the same for Frame 10 and Frame 19. Now we need to add some stop scripts. Create another layer and name it Action as shown below.

On the Action Layer, click on frame 10 and press F6. Click on frame 1, open the Action window, if you do not see this option click on Window Actions. With that window open add this stop(); do the same for frame 10. With that you should have the setup below.

Create another layer called Text Animation

On frame1, write home as shown below. I change the color and the site to  more it more visible.

Click on frame 10 press F6 to insert a keyframe. The text should be selected, using the down arrow on your keyboard move the text down to get the effect shown below.

Click on frame20 press F6 and more the text up, back to the previous position using the up arrow. Create a Create Motion Tween on layer 1 , 10 and 20 as shown below.

Click on frame1, Using the selection tool click on the text. In the properties window you should see the option below.

Change the Color to Alpha 0%, do the same for frame 20.

Part4: Adding the script to the button.
Click on the Arrow shown below to go back to the main scene

When you go back you, should see an invisible button highlighted. In the Properties window change the Instance Name to home

While on the "Home Action" layer click on the Rectangle Tool Change the color of the rectangle to orange #F15A00 with no boarder. Draw a rectangle over the text, this will be the hit area. Convert this into a movie clip.

Using the selection tool click on the rectangle. In the properties window you should see the option below.

Change the Color to Alpha 0%. Open the Action window and add the script shown below.

Text your movie, and it should work.

Finished:
Well that is it. Hope it is what you expected.

I also created a video tutorial for this example. The file is a 7.35 MB flash file. I have the link up on the video section on the forums. Users have to register to view the file, because of spam after you register. Email me at markc1822(at)pixeldigest.com with your user name and I will activate your account. Click here to register.

This Tutorial was Created By Mark
© 2007 pixeldigest.com. All Rights Reserved.

CSS mouse over Table

In this tutorial I will teach you how to create a CSS mouse over Table effect to change the background color of a table using Dreamweaver.
... Read more