Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Advanced full flash site - Part 3

21.6.2007, 19:11    Total views: 125960
Page:  1  2

Part 3

Menu and menu animation



You will learn how to design a menu and how to animate it after that. You will also learn how to apply action script code on it.

Step 1

Create a new layer above the Content Animation layer and name it menu.





Step 2


Take 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 a Trebuchet MS as font and bold it.
3. Choose 15 as font size,
4. Select #2F560C as color,
5. As the rendering option, select Use Anti-alias for readability.

Step 3

Take 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 a Trebuchet MS as font and bold it.
3. Choose 15 as font size,
4. Select #2F560C as color,
5. As the rendering option, select Use Anti-alias for readability.



Then, type on the left side of header menu text. See the picture below.



Step 4

Take the Selection Tool (V) and select the all menu text. Then, press F8 key (Convert to Symbol) to convert this menu text into a Movie Clip Symbol.



Step 5

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



Step 6

After that, take again the Selection Tool (V) and select only the "About me" text. Then, press Ctrl+X key (Cut).

Step 7

After that, create a new layer above the layer 1 and name it About me. Then, select it and press Ctrl+Shift+V key (Paste in Place).

Step 8

Take again the Selection Tool (V) and select only the "contacts" text. Then, press again Ctrl+X key (Cut). After that, create a new layer above the About me layer and name it Contacts. Select that layer and press Ctrl+Shift+V key (Paste in Place).

Step 9

Double click on layer 1 to rename its name in Home. What we now have? We have a three texts of menu placed in separate layer. See the picture below.



Step 10

While you're still on layer home, press F8 key to convert it into a Movie Clip Symbol.



Step 11

Then, click on frame 25 and press F6 key.

Step 12

It's time to animate the first text (button) in menu. While you're still on frame 25, take again the Selection Tool (V) and double-click on the movie clip (Home) to go in its inside.See the picture below.



Step 13

While the "Home" text is still selected, press again F8 key (Convert to Symbol) to convert it again into a Movie Clip Symbol. See the picture below.



Step 14

Take the Selection Tool (V) and move the frame 1 on frame 2. See the picture below.



Step 15

After that, click on frame 10,11 and 20 and press F6 key.

Step 16

Go back on frame 10, take the Selection Tool (V), click once on the button and go to the Properties Panel (Ctrl+F3). On the right, you will see the Color menu. Select Tint in it, for Tint color choose black and put it down to 100%. See the picture below.





Step 17

Take again the Selection Tool (V), and select frame 10. Then, go to the Action Script Panel (F9) and enter this code inside the actions panel:

stop();

Click again on frame 10 and press Ctrl+C key (Copy). Then, click on frame 11, press delete key, and after that Ctrl+Shift+V key (Paste in Place).

Step 18

After that, click on frame 2 and go to the Properties Panel (Ctrl+F3) below the stage. Then, for Frame Label type go1. See the picture below.





Do that also for frame 11, but for this time for Frame Label type go2.

Step 19

Right-click anywhere on the gray area between the frame 2 and 10 and frame 11 and 20 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 20

Create a new layer above the layer 1 (layer 2). Then, using the drag and drop technique, move it below the layer 1.

Step 21

Click on the first frame of layer 2 and paste this code inside the action panel (F9).

stop();

Next:  Part 2
Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 310287

2. High-tech city animation
Total views: 272904

3. Water effect
Total views: 237059

4. Photo slide show
Total views: 220388

5. Special Picture Effect
Total views: 190723



Related links