Flash combine fireworks to make pull-down menu

Menu | dropdown

Today on the Internet to see a flash Production menu, very practical, to give you specific talk about the process of production.

　　first look at the effect of the menu animation ( Click the title to see the Drop-down menu effect )

Click here to download the source file

The following specific to you to talk about the production steps:

1. First, we use fireworks software to make a few graphics (of course, you can also use other mapping software production), the method is relatively simple here will not tell us about the production steps. Do the picture is the navigation hint text picture and four Drop-down menu to display the content of the picture, respectively, exported as JPG or GIF can be. The following figure:

2. Then the navigation picture into the flash stage, the picture named menu, the other four pictures imported into the Flash library. As shown in the figure:

3. "Insert"-->> "new symbol" Select Type is a button, name B, create a new button symbol, and then we use the Rectangle tool in the button's bouncing frame to draw a rectangle with no border fill color, other frames we don't care. Of course, you can also add effects to other frames as you practice, making the effect even cooler! Here we make a simple button. The following figure:

4. Then we set up a movie clip element, and we import a picture that shows the content of the Drop-down menu as the content of the movie clip symbol. As shown in figure:

In the same way, we created another three movie clip components, and imported the other three pictures as the content of the movie clip respectively.

5. The following start to create a button, named S_b, the role of this button is to implement when we move the mouse to the Drop-down menu to implement the color gradient, the establishment of a simple method, we only need to set the button frame and the mouse frame, Draw two rectangles of the same size and size (the color of the rectangle in the bouncing frame is the same color as the rectangle in step 3). As shown in figure:

6. Below we start to make the Drop-down menu effect animation, create a new movie clip named B1, create four layers, draw a rectangle close to a straight line in the layer one, and make the method to enlarge the zoom, then insert a blank keyframe at frame 10th to draw a rectangle of the appropriate size (the size of the rectangle can be adjusted, To import a drop-down menu picture of the same size), and then select the first frame to open the action panel, enter the command stop (); We let the animation stop playing at the beginning, and then open the Properties panel to make shape animation. and press F5 at frame 30th to insert a frame. As shown in figure:

Next, we insert a keyframe at the 10th frame of Layer 3. Then drag the movie clip from our menu content in step four onto the stage, click on the selected graphic, set Alpha to 0, insert a keyframe at frame 15th, and then go back to frame 10th to do motion tweens. Then press F5 at frame 30th to insert a frame. As shown in figure:

Then insert a keyframe at frame 30th of Layer 4, open the Action panel input: Stop (), and stop the movie playback.

Insert a keyframe at frame 15th of Layer 2, and then drag the S_b button created in step 5 to the stage, which exactly covers the text to be displayed in the Drop-down menu, drags 4 times, and inserts a frame at frame 30th. As shown in figure:

Here we can select a different button, add the corresponding super connection for the Pull-down menu. As shown in figure:

7. We repeat steps 6 to create 3 other movie clips.

8. Back to the main scene, under the menu layer to create four layers, named B1,b2,b3,b4, in each layer of steps 6, 7, set up the movie clips from the gallery, respectively, placed in the corresponding layer, respectively, to the movie named instance name B1,b2,b3,b4. Note that the location of the discharge should correspond to the corresponding contents of the menu. As shown in figure:

9. Then create a new layer on the menu layer named Botton, press Ctrl+l to open the library panel, continuously drag the button B in step 3, and cover the text in the navigation. As shown in figure:

10. Select the button on the "Industry News", open the Action panel, and enter the following instructions:

On (Press)
{
_root.b1.gotoandplay (2);
_root.b2.gotoandstop (1);
_root.b3.gotoandstop (1);
_root.b4.gotoandstop (1);
}

The same as "Web page making" the buttons on the instructions:

On (Press)
{
_root.b1.gotoandstop (1);
_root.b2.gotoandplay (2);
_root.b3.gotoandstop (1);
_root.b4.gotoandstop (1);
}

Instructions for the buttons on the animation:

On (Press)
{
_root.b1.gotoandstop (1);
_root.b2.gotoandstop (1);
_root.b3.gotoandplay (2);
_root.b4.gotoandstop (1);
}

Instructions for buttons on network programming:

On (Press)
{
_root.b1.gotoandstop (1);
_root.b2.gotoandstop (1);
_root.b3.gotoandstop (1);
_root.b4.gotoandplay (2);
}

11. Finally, we can save and test the video! Good lucky to you!!!