Step 22

Create a new layer above the layer 1 and name it line. After that, click on frame 2 of layer line and press F6 key.

Step 23

Then, take the Line Tool (N).Select a black as line color, and choose Solid as type of line, with thickness set to 1. Then, draw a horizontal line, below 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.