| 11.
Select Links Panel layer and choose Insert >
Layer to insert a new layer above Links Panel layer 12.
Rename the layer as 'White Line' 13.
Select frame 95 on White Line layer and choose Insert
> Keyframe 14.
Choose File > Import to import white_line.png
15.
Select the image and choose Insert > Convert to Symbol 16.
Convert it into a Graphic with Top
left registration point selected and name it as 'white line' 17.
In the Info panel type the X and Y axis
values as 670.7 and 216.3 respectively 18.
Select frame 101 and choose Insert > Keyframe 19.
Select keyframe 101 and in the Info panel
type Y location of instance as 26.3
20.
Select frame 116 and choose Insert > Keyframe
21.
Select keyframe 116 and in the Info panel
type X location of instance as 582.7 22.
Select keyframe 95 and in the Properties panel
select Tween as 'Motion' and set Easing
value as '-100' 23.
Select keyframe 101 and in the Properties panel
select Tween as 'Motion'
and set Easing value as '100' 24.
Select White Line layer and choose Edit > Copy
Frames 25.
Choose Insert > Layer to insert a new layer
above White Line layer 26.
Choose Edit > Paste Frames 27.
Rename the newly added layer as 'White Line 1' 28.
Select keyframe 95 on White Line 1 layer and in the
Info panel type Y location of instance
as -173.7 29.
Select keyframe 116 on White Line 1 layer and in the Info
panel type X location of instance
as 759
1.
To pick right color of buttons we need to take reference of the
top panel
image
i.e. trace.png. So hide Links Panel and Background layers 2.
With the help of Eyedropper Tool select two
colors for mouse up and mouse over stage and store them using
Add Swatch in Color Mixer panel
3.
Select White Line 1 layer and choose Insert >
Layer to insert a new layer above White Line 1 layer 4.
Rename the layer as 'About Us Button' 5.
Select frame 101 on About Us Button layer
and choose Insert > Keyframe 6.
With the help of Rectangle Tool create a rectangle
(without outline) of same size of About Us button in the trace image. To be very
precise the dimensions of the rectangle should be width 170px. X height
25px. The X-Y position should be 589 and 40 respectively
7.
Select the rectangle and choose Insert > Convert
to Symbol 8.
Convert it into a Graphic with Center
registration point selected and name it as 'button panel'
9.
Select the button panel Graphic and choose Insert
> Convert to Symbol 10.
Convert it into a Button with Center
registration point selected and name it as 'aboutus' 11.
Double click the aboutus button to go inside it and rename existing
layer as 'Button Panel' 12.
Select frame 2 at 'Over' stage and
choose Insert > Keyframe 13.
Select the button panel graphic at 'Over'
stage and in the Properties panel set Tint
Color styles and choose the color which we have stored for mouse over
14.
Select frame 4 at 'Hit' stage and choose
Insert > Frame 15.
Choose Insert > Layer and rename the newly
added layer as 'Button Name' 16.
Select frame 1 on Button Name layer and with the help of
Text Tool type 'ABOUT US'. The properties
of the text should be Font:Verdana, Font Size:11, Color:#560800, Style:Bold, Align:Center
Now
one button is ready. For creating other buttons we need to duplicate this
button 17.
Choose Window > Library > aboutus Button 18.
In the Library menu select 'Duplicate..' 19.
In the Duplicate Symbol panel type 'products'
as we want to create Products Button 20.
Double click the products button in the Library
to go inside it 21.
Change the button name to 'PRODUCTS' 22.
Similarly, duplicate products button and create clients button and
so on 23.
Come back into Scene 1 24.
Select About Us Button layer and choose Insert
> Layer 25.
Rename the layer as 'Products Button' 26.
Select frame 101 and choose Insert > Keyframe 27.
Choose Window > Library > products Button and
drag it at keyframe 101 on Products Button layer 28.
In the Info panel type X
location of instance as 589 and Y location
of instance as 66 29.
Similarly, drag remaining buttons on different layers and align them vertical X-Y
positions for other buttons:
| Button |
X-position |
Y-position |
| Clients |
589 |
92 |
| Feedback |
589 |
118 |
| Contact
Us | 589 |
144 |
30.
Select Contact Us Button layer and choose Insert
> Layer 31.
Rename the layer as 'Mask' 32.
Select frame 101 and choose Insert > Keyframe
33.
With the help of Rectangle Tool
create a rectangle of 173px. X 135px. so that
it covers all five button behind it. X
location of instance = 588, Y
location of instance = 37
34.
Select frame 116 and choose Insert > Keyframe 35.
Select keyframe 101 and in the Info panel
type Width of instance as 1.0 and X
location of instance as 673.3, Y location
of instance as 37 36.
Select keyframe 101 and in the Properties panel
select Tween as 'Shape' and set Easing
value as '100' 37.
Select the Mask layer and choose Modify > Layer
to open Layer Properties panel 38.
In the Layer Properties panel select Type
as 'Mask' and click OK 39.
Select the Contact Us Button layer and choose Modify
> Layer to open Layer Properties panel 40.
In the Layer Properties panel select
Type as 'Masked' and click OK 41.
Similarly, select Feedback Button, Clients Button, Products Button
and About Us Button layers and make them 'Masked' Now
we do not need Trace layer any more so delete the Trace layer and
make Background and Links Panel layers visible | 
