Create Flash Website (part 3)

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();

the Home text. See the picture below.



Step 24

While the line is still selected, press F8 key (Convert to Symbol) to convert this line into a Movie Clip Symbol.



Step 25

Click on frame 10,11 and 20 and press F6key.

Step 26

Go back on frame 2, take the Selection Tool (V) and click once on the line to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Do that also for frame 20.

Step 27

Take the Selection Tool (V) again and select again frame 2. Then, go to the Properties Panel and for Frame Label type go3. Do that also for frame 11, but for this frame type go4.See the picture below.



Step 28

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 29

Click on frame 10 and go to the Action Script Panel (F9) below the stage. Then, type this code inside the actions panel:

stop();

Step 30

Click on the second frame of layer 1 and press Ctrl+C key (Copy). Then, create a new layer above the line layer (layer 4), select it and press Ctrl+Shift+V key (Paste in Place). After that, take the Selection Tool (V), select the all frames of layer 4, except layer one, choose right click and Remove Frames.



Step 31

Go back on the Previous Scene.



Step 32

Take the Selection Tool (V) and click once on the Home button to select it.Then, go again to the A.S.Panel (F9) and enter this code inside the actions panel:

on (rollOver) {
gotoAndPlay ("go1");
}

on (rollOut) {
gotoAndPlay ("go2");
}

on (rollOver) {
gotoAndPlay ("go3");
}

on (rollOut) {
gotoAndPlay ("go4");
}

Step 33

Click on frame 25 of layer home again and go to the Action Script Panel (F9) again. Then, enter this code inside the actions panel:

stop();

Now, we have animated the first button in menu. Repeat this process for every other button in menu.

Step 34

It's time for menu aniamtion. So, create a new layer above the Contacts layer and name it menu animation. See the picture below.



Step 35

Take 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 #EEFBE3 and draw a "rectangle" over the menu. See the picture below.



Step 36

Click on frame 5 and press F6 key. Then, take the Free Transform Tool (Q), press and hold down Shift key and decrease the rectangle a little to the right side. See the picture below.



Step 37

Go back on the first frame and go to the Properties Panel (Ctrl+F3). Then, for Tween choose Shape.






Click on frame 10,15...25 and repeat this process until you don't uncover the whole menu.

Step 38

Go back on the main Scene (Scene 1). Then, create a new layer above the header and name it header extension. Then, click on frame 25 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.Then, draw a rectangle About 220x130px, and place it on the top left side of header. Then, go to the Color Mixer Panel (Shift+F9) and choose the following optiosn:

1. In the Type drop-down menu select the Linear option,
2. Click on the small square situated on the left side of the gradient strip and move it to the center . Select #EEFBE3 as its color.
3. Click on the second little square and select #F3FCE9 as the color.



Now, you have this:



Why we have done this header extension? Becaouse of menu. The image of header was have a gradinet and that gradient wasn't conforms to our menu animation. That's the reason why I have done that.

Step 39

Click on frame 200 of layer menu and menu extension and press F5 key.