Groups | Blog | Home
all groups > flash (macromedia) > january 2004 >

flash (macromedia) : How to make your mc "drop down"?


Macronutz
1/29/2004 11:30:33 PM

I am trying to get this effect where you click on a button and a movie clip drops drown.

You can see this effect at http://www.n-e-r-d.com/
Go to the brain, click on Tour dates or Audio/Video Lope and you will see the movie clip appear and sort of drop down.

Thanks!

Mac


Chinese Boy
1/29/2004 11:49:45 PM
I think you have made it far more complex than it is. There is not real drop down effect. It is just a movie clip that the author creates and appears when the user clicks on the brain. The movie clip itself is a drop down. To make that kind movie clip, you just use Flash's authoring environment to create four rectange and tween then so that they appear as drop down menu. Then you make a button and add some script which let the movie clip visible if the user clicks on it. This of course requires to hide the movie clip first.

It is actually simple. Try to think about Flash as simple as possible. Some effects are just simply animation rather than complex scripting language. Not many people like do scripting. Doing the traditional tweening is much easier in some case.

author: Chinese Boy


Jack.
1/29/2004 11:50:22 PM
Macronutz
1/30/2004 1:31:16 AM
To make that kind movie clip, you just use Flash's authoring environment to create four rectange and tween then so that they appear as drop down menu.
author: Chinese Boy

China Boy:

Can you provide a little bit more detail on how to create this type of drop down tween, and also how to hide the menu until the user clicks on a button.

Thanks!


Chinese Boy
1/30/2004 2:15:32 AM
Sorry, I thought you already know how to do those sorts of things. To do that, follow my tutorial:

Step 1: Create the shape

1.1 Click on the rectangle shape icon in the tool box and draw a rectangle on the stage.

1.2 Add a text field on top of the rectangle and write your text.

1.3 Select both the rectangle and text field and right click, in the context menu, choose "Convert to Symbol", then in the dialog box choose "Graphics". (Note: if you want to make it a navigation menu, you probably should choose button instead. Anyway, you can always go back and change it)

Step 2: Put the graphic in a movie clip

2.1 Click on the graphic symbol and right click again to call the context menu. In the menu, choose "Convert to Symbol" and then in the dialog box choose "Movie Clip" as the symbol type.

2.2 Name the movie Clip "mcMenu"

2.3 Double-click the movie clip to open the inner timeline for editing. You should see that there is only one graphic that you just created on the first frame of the "mcMenu" timeline.

Step 3: Tweening

3.1 Copy the graphic and paste it on the 5th frame of another layer. (Note: in case you don't know how to create a layer, just click on the current layer and right-click to call context menu. In the menu, choose "Insert layer", the layer will appear above the current layer. Just drag it below the current layer.)

3.2 On the 8th frame of the second layer, right click the frame and choose "Insert Keyframe". The graphic on the 5th frame will also appear on the 8th frame. Move the graphics vertically a little bit.

3.3 Click on the frames between the 5th and 8th and right-click, in the context menu, choose "Create Motion Tween".

3.4 Click the 8th frame on the first layer and right click the frame, in the context menu, choose "Insert frame".

3.5 Repeat the above four steps to create as many menu elements as you want.

Step 4: Button control

4.1 After finishing editing the movie clip, click on the scene 1 to return to the main timeline.

4.2 Create a button and right-click it to call the context menu, in the menu choose "Action" and add the following script to it.

on (release) {
_root.mcMenu._visible = true;
}

4.3 Right-click the movie clip and add the following script to it.

onClipEvent (load) {
this._visible = false;
}

Done. If you want it to be more interactive, make a close button in the movie clip and add the following script to it.

on (release) {
_root.mcMenu._visible = false;
}

The actual work need to be more accurate if you want to make the menu more sophisticated. For instance, you may change the frame gaps to make the drop-down effects more cool. However, that is all up to you. As long as you follow the basic idea in this tutorial, you will get that. If any problems, post them. I will try to help you.

author: Chinese Boy


Macronutz
1/30/2004 5:48:27 PM
Step 3: Tweening

3.1 Copy the graphic and paste it on the 5th frame of another layer.


China Man:

Before I paste the graphic on the 5th frame, shouldn't I have to insert a Keyframe first? If I just paste it there, it does not stay on the 5th frame of the layer.

Mac

AddThis Social Bookmark Button