web design template web design template web design template

Page : 1 2 3 4

26. Insert a new layer (Choose Insert > Layer) above the layer named as 'Mouseover'

27. Rename the layer as 'About Us Text'
28. On the layer named as 'About Us Text', type the following text 'About Us' with the Text Tool and in the Properties panel apply the following text settings : Text Type = Dynamic Text, Font = Arial, Font Size = 12, Text (fill) Color = #212C3D, Text Align = Align Center, x position = -33 px and y position = -8.7px.

29. Select Frame 1 on layer named as 'About Us Text'. Convert it into a Movie Clip with the center Registration point selected and name it as 'about us text'.

30. Select 'about us text' Movie Clip, nudge it 3 px upwards for proper look-n-feel.

31. Insert a Keyframe (Choose Insert > Keyframe) at Frame 2 of layer named as 'About Us Text'. Select 'about us text' Movie Clip and in the Properties panel select the following options: Color Style = Tint, Tint Color = #D57217,
Tint Amount = 100%
.

32. Choose Window > Scene

33. In the Scene panel select 'Scene 1' to go back into Scene 1.

34. Select 'about us' button at Frame 1 of layer named as 'Buttons'. In the Properties panel give an Instance name to 'about us' button as 'but1' and set x position = 3.5 px and y position = 207 px .

We have finished creating the About Us Button and giving it an instance name as 'but1'.

An Instance name is given to the button because in Flash MX we can assign actions for buttons on a single frame in the Timeline.

Similarly create other buttons : Products, Services, Clients, Contact Us and give them Instance name as but2, but3, but4 and but5 respectively.

After creating other buttons, place them as shown in the image given below,

35. Choose Control > Test Movie (rollover the buttons in the .swf file given below)


1. Insert a new layer (Choose Insert > Layer) above the layer named as 'Border'

2. Rename the layer as 'Actions'

3. Select Frame 1 on the layer named as
'Actions' and Choose Window > Actions.

4. In the Frame Actions panel type the following ActionScript as given below,

stop();

// _root.imagewidth defines the width of the image//
_root.imagewidth = 418;

// _root.speed defines the speed of the sliding images//
_root.speed = 3;

/* _root.trig.xposnew defines the x position of the sliding images */
_root.trig.xposnew = -(_root.imagewidth);

// About us Button action
but1.onRelease = function() {
_root.trig.xposnew = -(_root.imagewidth);
};

// Products Button action
but2.onRelease = function() {
_root.trig.xposnew = -((_root.imagewidth)*2);
};

// Services Button action
but3.onRelease = function() {
_root.trig.xposnew = -((_root.imagewidth)*3);
};

// Clients Button action
but4.onRelease = function() {
_root.trig.xposnew = -((_root.imagewidth)*4);
};

// Contact Us Button action
but5.onRelease = function() {
_root.trig.xposnew = -((_root.imagewidth)*5);
};


1. Insert a new layer (Choose Insert > Layer) above the layer named as 'Grid Lines'

2. Rename the layer as 'Main Image Scroller'

3. Double click on the 'Rectangle Tool' to open Rectangle Settings panel, specify Corner Radius = 0 Points

4. On the layer named as 'Main Image Scroller', draw a rectangle with the 'Rectangle Tool' , width = 418 px,
height = 150 px,
color value of the outline = #000000 and color value of the fill = #EBEFF4

5. Select the rectangular object, Choose Window > Info

6. In the Info panel, set x position = 0 px and y position = 50 px, keeping top-left registration mark selected.

7. Select the rectangular object along with its outline, convert it into a Movie Clip with the top-left Registration point selected and name it as 'image scroller'

8. Select 'image scroller' Movie Clip at Frame 1 of layer named as 'Main Image Scroller'. In the Properties panel give an Instance name to 'image scroller' Movie Clip as 'scroller'.

9. Select 'image scroller' Movie Clip at Frame 1 of layer named as 'Main Image Scroller', convert it into another
Movie Clip with the top-left Registration point selected and name it as 'main image scroller'

10. Select 'main image scroller' Movie Clip at Frame 1 of layer named as 'Main Image Scroller'. In the Properties panel give an Instance name to 'image scroller' Movie Clip as 'mainscroller'.

11. Select Frame 1 on the layer named as 'Main Image Scroller'

12. Choose Edit > Edit in Place

13. Rename the layer as 'Image Scroller'

14. Insert a new layer (Choose Insert > Layer) above the layer named as 'Image Scroller'

15. Rename the layer as 'Mask'

16. On the layer named as 'Mask', draw a rectangle with the 'Rectangle Tool' , width = 418 px, height = 150 px, color value of the outline = #000000 and color value of the fill = #000000

17. Select the rectangular object on the layer named as 'Mask', Choose Window > Info

18. In the Info panel, set x position = 0 px and y position = 0 px, keeping top-left Registration point selected.



© Image Online  2001-2003