Photoshop & Flash Tutorials, Articles and Resources

Web Menu with Animated Buttons in Flash CS4 Part 2

Web Menu ActionScript 2.0

Tutorial by The Mixer from adobeflashtutorial

Then you will see the second part of the tutorial web menu, in this tutorial adobe flash cs4 learn how to do the animation that has the button, you can add as many effects as your imagination allows.

Step 10

The following steps will be the explanation for the animation of the text to change color, this simulates the button has two states Up and Over.

Create a new symbol Ctrl. + F8, name the symbol button gallery.
In the type option to select Movie Clip.

Step 11

Located in the button gallery symbol, proceed to show the Library panel.
This symbol will have several layers so it is necessary to identify each with a specific name, name this first layer animated text.
Drag the symbol from the library gallery text.

Step 12

Select the text entered in the previous step and put in coordinates X: 0.0 Y: 0.0.

Step 13

Insert a keyframe F6 at frame number 24.
PROPERTIES pane, open COLOR EFFECT, and select style Tint option and change the color # 65FF98.

Step 14

Insert a keyframe F6 in frame 46.
In option COLOR EFFECT, select None style.

Step 15

Select a point between 1 and 23 in the timeline.
Clicking the right mouse button. On the popup menu select Create Classic Tween.

Step 16

Now select a point between 25 and 45 on timeline.
Clicking the right mouse button. On the popup menu select Create Classic Tween.

Step 17

Insert a second layer and rename it to ActionScript button.
Drag the symbol from the library button multiple.

Step 18

Select the command Insert, and then click the Free Transform tool (Q).
Adjust the size of the rectangle the size of the text as shown in the picture.

Step 19

Select the rectangle, open the panel ACTIONS - BUTTON and type the following ActionScript 2.0.

on (rollOver) {
            if (_root.link != p) {
                        this.gotoAndPlay("start");
            }
}
on (releaseOutside, rollOut) {
            if (_root.link != p) {
                        this.gotoAndPlay("end");
            }
}
on (release) {
            if (_root.link != p) {
                        _root["button"+_root.link].gotoAndPlay("end");
                        _root.link = p;
            }
}

Step 20

Insert a third layer and rename it to ActionScript 1.
Insert a keyframe F6 in position 2.
PROPERTIES pane, select the LABEL and write as start tag name.

Step 21

Select the frame number 25 then insert a keyframe F6.
PROPERTIES pane, select the LABEL and write as end tag name.

Step 22

Insert a fourth layer and rename it to ActionScript 2.
Select the frame number 1, then open the panel ACTION – FRAME and write the following code

p = 1;
stop();

Step 23

To conclude with the animation for the gallery button, select the frame number 24 and then insert a keyframe F6.
Select this frame then open the panel ACTION – FRAME, write the following code.

stop();

Step 24

Will show again, as does the animation for one of the buttons.
First create a symbol Ctrl. + F8, name this symbol button service.
In the type option to select Movie Clip.

Step 25

Repeat steps 11, 12, 13, 14, 15 and 16, so you get the animation to change the text color.
This is how the timeline stay in the animated text to the command button service.

Step 26

In the following steps to place the code ActionScript which monitor the effects of a button. To not have much trouble following the steps 17, 18 and 19.
Insert a second layer and rename it to ActionScriptp button.
Drag from the library, the command button multiple, select the Free Transform tool (Q), then adjust the text size symbol as shown in the picture.
Select the Insert then open the panel ACTION – BUTTON and proceed to write the following code.

Step 27

Insert a third layer and name it ActionScript 1.
Place names start and end tags in the frame number 2 and 25.
If you do not have much experience with the handling of tag names you should follow the steps 20 and 21.

Step 28

Follow the following two steps to complete the animation for the button service.
Insert a fourth layer and rename it to ActionScript 2.
Select frame 1, then open the panel ACTION - FRAME and write the following code.

p = 2;
stop();

Step 29

Insert a keyframe F6 in frame number 24.
Open the panel ACTION – FRAME and write.

stop ();

So the animation is completed for the second button.
Follow steps 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 for three buttons, button about us, button contact and button home.
In step 22 changes the ActionScript code for each of the following three buttons (Insert a fourth layer and rename it to ActionScript 2).
Select the frame number 1, then open the panel ACTION – FRAME and write the following code.