AUSMA-AFFPG

Tutorial 1.

AFFPG 2 Tutorials: [ Trailed Boxes Menu ]

Trailed Boxes Menu for your Flash Website

View the results here: 1 and 2

This tutorial is written on December 20, 2006 in common AFFPG 2 forces: by Jeff, Papooga and Audrone. The idea came from dead Russian website, tutorial "Trailed Menu".

1. Give your movie a desired height and  width. In this one I used 510 x 300 px. I gave it a green background.

2. Step two, make all of the five text buttons:

	Insert new symbol, choose behavior button name but1. Use the rectangle tool with no stroke to make a black box about 90 pixels wide by 25 height. I chose gradient fill. Hit F6 on Over and Hit sections. Write text on button Home   Go to your Library and duplicate button, renamed it but2.   Do as many buttons as you need,  then type out some words like  "Rules", "Members", "Results", "Archive" and etc.
	Drag them onto the stage. Line them up at the top of the stage.

7. Name your current layer buttons. Once that is done, make a new layer and call it box.
    
8. With command Crtl+F8, take behavior movie clip for new object and name it box.
    
9. Draw a rectangle the same size as a button. I drew 100 x 30 px, a little larger than my button an orange box with no stroke.

Come back to the scene. Create new layer, name it box.  Drag an instance of "box" onto the main stage over the last button. Then, with the movie clip selected, go to Window>Properties. Under the instance name, put trailer. Hit "enter".  Select it and take alpha effect 30%  Than go on filters in properties tab and give your box Gradient Glow  filter, look at image:

 If you do not have Flash 8 Professional, it will just be a rectangle with alpha effect. Convert the rectangle to a movie clip callled box.

	13. We need controller. Insert new symbol, call it controller , behavior movie clip and make a blank keyframe on frame 2. Click on frame 1, open the actions panel. Enter the following Action Script:
Codes for example 1 ( Copy codes from here ) :
mouse_x = _xmouse; setProperty(_root.trailer, _x, mouse_x+((getProperty(_root.trailer, _x)-mouse_x)/1.15));
Codes for example 2:
if (_root._xmouse > _root.trailer._x) { _root.trailer._x = (_root.trailer._x + 10); } else { _root.trailer._x = (_root.trailer._x - 10); }

14. Go to second frame and paste these codes, the same for both examples:

BUT! The buttons don't work yet! What we have here is a two frame loop. The first frame tells the box to move 10 pixels toward the mouse pointer. The script calculates the difference between the x value of the mouse and the x value of the center of the box. If the difference is positive, it subtracts 10 pixels. If the difference is negative, it adds 10 pixels. The action script is in the _root directory and is called a Controller. The second frame does the same, but sends it back to the first frame of the timeline. This loop continues to run until the difference between the x values is zero.

There are no actions to the buttons, and no links for the buttons.

    16.  So add a new layer called pages, with keyframes at 5, 10, 15, 20, 25. Enter blank frames all the way down on all layers to keep everything on the stage up to frame 25. You can label them in the frame label and add content to the pages.

    17. Lock all layers except Buttons layer. To last button add:

Put the corresponding keyframe number in the parentheses for each button: for Home (0), for Rules (5) and etc. Don't forget the closing curly bracket.

Click on a button and you will go to the corresponding page, but the box no longer follows. We are out of the loop in frames 1 and 2. So the box does not move. That is because the controller loop only lasts the first two frames of the main timeline. The loop does not go out to frame 25. Also notice that the controller layer is white, not grey. It is empty. We have only a two frame loop. We need a controller movie clip that will run for the entire 25 frames. It must be in the root directory and not in the main directory. (It may work in the main directory, but I have not tried this.)

stop();

 Your movie should now work.