Home > Support > Flash ( SWF ) Knowledge Center > E-Learning > How to create Flash buttons (Advance)

Hot Guide & Tips

Upgrade

Click to Get
Advanced Editions

Software Testing

Please download Test resources to test & compare Moyea SWF To Video Converters with other SWF converters!

How to create Flash Advanced BUTTONS?

From Moyea SWF to Video Converter

First look at this example of an advanced button:


CREATING ANIMATED BUTTONS
A button like the one you see above can be created by simply inserting a movieclip in the "over"-frame of your button-symbol.

That is:
1: Create a normal movieclip that does whatever you want to happen when a mouse over is detected on the button.
2: Create a normal button symbol (explained on the previous page).
3: Insert a keyframe in the "over" frame of your button, and place the animated movieclip in this frame.
This will cause the animation to start when a mouse over is detected and disappear again whan a mouse out is detected.
The problem with this type of button is that it lacks "intelligence". The animation disappear in the middle of a sequence as soon as the mouse-out event is detected.
Look at the button below instead:


CREATING TELL TARGET BUTTONS

The simple button described in the above paragraph stopped immediately when a mouse-out event occured.
The advanced button will finish the loop cycle before stopping the animation.

The trick is this:
1: Draw a button graphic.
2: Create a button symbol using the button graphic.
3: Use the exact same button graphic to create a movieclip.
4: In the movieclip: Create whatever animation you want for the button.
Now you have a button-symbol with the fixed button in it AND a movieclip with the entire mouse-over-animation in it.
5: Place the button-symbol in your movie.
6: Add this action to the button:
On (Roll Over)
If (dummy=0)
Begin Tell Target ("/animation")
Play
End Tell Target
End If
Set Variable: "dummy" = 1
End On
On (Roll Out)
Set Variable: "dummy" = 0
End On

The action detects a Roll Over and a Roll Out:
When a Roll Over is detected:
- it tells the movieclip to start playing (The movieclip plays the animation we want when a Mouse Over is detected.). At the same time it sets a variable named "dummy" to the value of 1.
When a Roll Out is detected:
- the variable named "dummy" is set to the value of 0. Nothing else happens here - and THAT is the trick in all this.

When a Roll Out is detected:
- the variable named "dummy" is set to the value of 0. Nothing else happens here - and THAT is the trick in all this.
The movieclip simply continues to play after the Mouse Out is detected - and that is exactly what we wanted. When the movieclip finishes an animation cycle it will be at the last frame of the moviecip, and this is where the "dummy" variable comes into the picture.

In the last frame of the movieclip we have this action:
If (/:dummy=1)
Go to and Play (2)
Else
Go to and Stop (1)
End If

This means that the movieclip is using the "dummy" variable to determine whether it should continue (Go to and Play (2)) or it should stop (Go to and Stop (1)).

To summarize:
1: We have a Button symbol that we use to detect for Roll Over and Roll Out.
2: On top of this button we have a Movieclip symbol that actually plays the animation we want when a Roll Over occurs.
3: When a Roll Over is detected on our Button symbol we tell the Movieclip Symbol to start playing. At the same time we set a variable called "dummy" to a value of 1.
4: The movieclip will play the entire loop, and when it reaches the last frame it will check the current value of the "dummy" variable. If it is 1 it simply repeats the loop again from frame 2. If it is zero it goes to frame 1 and stops.
5: When a Roll Out is detected the "dummy" variable is set to zero which will cause the Movieclip symbol to stop next time it completes a loop.

Now that the technique behind Tell Target Buttons is in place we just need two tiny comments to it:

First:
We need to add a Stop action to the first frame of the Movieclip symbol - otherwise the movieclip will start looping as soon as it is loaded - rather than stop and wait for a Roll Over event.
Second:
The Movieclip symbol must be given an instance name.
Instance names are entered in the "Properties" dialogue box for your clip.
If you look at the action that we added to the button, you will notice this line:
Begin Tell Target ("/animation")

"animation" is the instance name of our Movieclip.
The reason that Flash requires instance names for movieclips is that the same Movieclip symbol could easily be used in several places at the same time.
For example you could create a movie clip that animated a ball jumping up and down. This movieclip could easily be inserted twice so that you had a ball jumping both at the left and right side of the movie. If you did not add a unique name to each of these two clips it would be impossible for flash to know which one you wanted to control when referring to the movieclip.

The technique for Tell Target buttons is fairly complex compared to the technique behind simple buttons.

Fortunately, it sounds a lot more complex than it actually is - which you will realize when you get your first Tell target button running.

You can click here to download a FLA source file for the Tell Target Button.

You may also be interested in these hot tips