Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Advanced Buttons

41 Intermediate
Flash Compatibility: MX 2004 (Principles and ActionScript are the same in Flash MX / Flash 5 / Flash 4)

Written by: Rabid Lemming

Length: 2,460 words

Assumed Knowledge: Really good knowledge of ActionScript and flash would help a lot

Level: Easy to medium (not hard but their is a lot to learn)

Note: This tutorial has not yet been edited - so that I cannot be sure it is error free or that the instruction are easy to follow. It will be edited soon. Thanks - Phil.

 

NOTE: IMPORTANT!!! You have to click on the flash movies to give them focus before testing or it they won’t work ! This page has a lot of content and may take some time to load. Please be patient and wait. It's worth it !

 

Goto page: 1, 2, 3, 4, 5  Next

 

This tutorial is spread across 5 pages. Don't Let that put you off. Do try to read it all the way though or it won't make any sense !!!

 

The aim of the tutorial is to learn how to create better buttons and gain better control over movies. You will learn many various things in this tutorial HOWEVER it is always best to look at the free flash files provided to get a better understanding of what is going on.

 

 

Introduction:

Have you ever made a button that you wanted it so that when you rolled off the button it didn't just stop playing the animation but finished playing it through before stopping? Well their are many ways of doing this. The first method called condition setting allows you to control a movie clip. The main difference which many people get confused over is that when using any of the methods that your about to learn, is you use a button to control a movie clip. The movie clip is set up to act like a button. The button is not the actual the button that you see but is invisible and only used as a controller for the movie clip. So don’t get the button used as a controller mixed up with the movie clip that is acting like a button but isn't. People are always trying to use the button to apply the animation to but it’s only their as a controller and nothing more. The button is invisible at run time. It’s the movie clip that you see but because it is set up to act like a button people always think it is a button, which it's not

NOTE: IMPORTANT READ!!! Some movies have a small time delay before the effect fully takes place because I made the animation last longer in some examples so you can see exactly what goes on when you test the movie. You may have to click on a movie to give it focus before it will work. I strongly recommend that you at least try to read ALL of these tutorial pages, as if you only read bits it won't be of any help to you and you will easily get confused

Normal Method For Making A Button: Create a simple button with animation on roll over

  1. Open up your flash movie
  2. Create a shape that you want to use as a button
  3. Convert that shape to a button
  4. Open the button
  5. On the over state select the button and convert to a movie clip
  6. Then open that movie clip
  7. Crete some animation that you want for when the mouse is over or down on the button
  8. Then when you play the movie you will see that animation play when you roll over the button like in the above example on the left

Download The Left Flash Example Free Here: Download the Flash file  Flash MX 2004

Download The Left Flash Example Free Here: Download the Flash file  Flash MX

The only problem with this is the animation stops as soon as the user rolls off the button. The most basic way to over come this is with what I call is condition setting

Method One: Condition setting

This doesn't use tell targets but rather uses a button that's invisible to change the value of a variable

  1. Open up your flash movie
  2. Create a shape that you want to use as a button
  3. Convert that shape to a move clip
  4. Open the movie clip
  5. On frame 1 to 2 create the button you want as it would be if the mouse was not over it
  6. From 3 to whatever frame your animation lasts to, create the animation you want to play when the mouse is over your button

If you want the animation to loop like above then use the loop method but if you want it to play only once then use the no loop method

No loop method (DO NOT follow theses steps if you want to loop the animation continuously like in the above right example):

  1. Copy the last frame and past it next to your last frame
  2. Add: gotoAndPlay(X) (where x is the number of last frame minus 1) to the frame that your animation ends on.
  3. So if your animation was 10 frames long you would copy frame 10 and past it in frame 11
  4. Then add the gotoAndPlay(X) to frame 11 and X would be 10 e.g. gotoAndPlay(11)
  5. Then in frame 10 add:
  6. // The movie clip is waiting for the variable to equal 0 which only happens when the mouse is off the button.
    // The movie will loop between frame 10 & 11 until this condition is met

    if (_root.test == 0) {
    gotoAndPlay(1);
    }
  7. Example of the no loop method:

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

Loop (DO follow these steps if you do not want to loop the animation continuously like in the above right example):

  1. If you want the animation to loop add: gotoAndPlay(1); to the last frame of your animation
  2. Example:

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

Carried on from the loop or no loop method

  1. Add a key frame to frame 1 and 2
  2. On frame one add this code:
  3. // The movie clip is waiting for the variable to equal 1 which only happens when the mouse is over the button.
    // The movie will loop between frame 1 & 2 until this condition is met

    if (_root.test == 1) {
    gotoAndPlay("
    Play");
    }
  4. On frame 2 add:
  5. gotoAndPlay(1);
  6. On frame 3 add the frame label: Play
  7. Add the move clip to the stage
  8. On the stage (not inside your movie clip) add:
  9. // Declare a variable and set its value to 0
    var test = 0;
  10. On a new layer, create a shape the same size as the your movie
  11. Convert the shape to a button
  12. Position the button directly over the movie clip and ensure the layer with the movie clip is below the layer with the button in
  13. Add this code to the button
  14. on (rollOver, dragOver) {
    // Change the variable value on roll or drag over
    test = 1;
    }
    on (rollOut, dragOut) {
    // Change the variable value on roll or drag out
    test = 0;
    }
  15. In the property panel set the alpha setting for the button to 0 (color>>alpha>>0)
  16. That's it !

Understanding how condition setting works

It's quite simple really, you have a variable that you use to hold a value. Then you set the value of the variable with the button. So that when the mouse is over the button the variable is equal to 1 and when the mouse is not over the button it is equal to 0. Then in the movie clip it will play between frames 1 & 2, each time checking to see if the variable is ever equal to 1. When entering frame 2 the movie checks the value of the variable, if the variable is equal to 1 then the movie clip will go on and play from frame 3. Otherwise it will go back and play from frame 1 again. The playing from frame 1 to 2 continually is know as a loop and each time in frame 2 the movie checks the variable to work out that to do. This is know as condition checking. The button sets the value of the variable based on weather the mouse is over or off the it. Because the button clip is positioned over the movie clip, the user will think the movie clip is a button. The movie clip is acting like a button would in detecting if the mouse is over or off it. When in fact the movie clip is been controlled by an invisible button.

Method TWO: Tell Targets

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

Now the disadvantage to using tell targets is that although it seams like the animation finishes playing when the mouse rolls off. It doesn't. It is only the illusion that it dose. What I mean is that because the movie clip animation is so short that when you roll off the controller button, it appears though the animation has finished playing before playing the reverse roll off effect of the shape moving back. In actual fact this isn't true. If you look at the second example that use's longer animation you can see what I mean:

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

In both examples you can see how the movie clip is controlled by a button like most of the examples are in this tutorial

Understanding the code for tell targets:

Tell Target method one (The basic old method):

NOTE: IMPORTANT!!! This method is old and outdated. I cover it because a lot of users still use this method and many tutorials still teach it. However you should not use tell targets, instead use the more modern root dot syntax method

tellTarget (Name&LocationOFMovieClipYouWantToControl) {
// Tell the movie clip what you want it to do. examples:
// This will go to the next frame but may not automatically play beyond the next frame:
// nextFrame();
// This will go to the next scene but may not automatically play beyond the first frame in the next scene:
// nextScene();
// Replace the X with the frame number or label you want the movie to got. When referring to frame labels ensure that the label name is in quotes in the code. example:
// gotoAndPlay("MyLableName");
// Go to and stop at the next frame. X is the frame number you want to movie to go to and stop at:
// gotoAndStop(X);
// Go to and play the next frame. X is the frame number you want to movie to go to and play.
// This will automatically play every frame after the value of X (the frame number you want the movie to go to and play) until it reaches a stop command:
// gotoAndPlay(X)

}

Tell Target method Two (The more modern and more advanced method):

NOTE: IMPORTANT!!! Use this version instead of using tell targets !!!

A second method of using tell targets is: _root.Name&LocationOFMovieClipYouWantToControl. + whatever you want that movie clip to do

Examples:

_root.Name&LocationOFMovieClipYouWantToControl.gotoAndPlay("MyLableName");

_root.Name&LocationOFMovieClipYouWantToControl.gotoAndStop("MyLableName");

x = to what ever frame number you want

_root.Name&LocationOFMovieClipYouWantToControl.gotoAndPlay(X);

_root.Name&LocationOFMovieClipYouWantToControl.gotoAndStop(X);

The second method works best as it more reliable and works in the versions of flash player like flash player 7 action script 2 where as the tell target method works best with older flash players like flash player 6 and 7 action script 1. Either method is ok but I would encourage you to use the new method. Just remember that the _root. method may not always work as _root. refers to the default level of the movie which is 0. So if your move is on another lever it may not work and you would have to use

_level + the level that move is on + whatever you want that movie clip to do

Cross Ref : See these tutorials for an explanation of how to target or refer to a movie clip. This will explain and help you to better understand how to properly target a movie clip: Loading Movies and Beginners Target Paths

NOTE: Targeting a movie clip means referring to it. It means that you are telling flash the location of the movie clip you want to control

Like so: _level0.Name&LocationOFMovieClipYouWantToControl.gotoAndPlay(2);

Which is for when you want to refer to something and you know it's location. Again only works if the movie is on the default level 0 unless you change the _level value

Other methods are: this.Name&LocationOFMovieClipYouWantToControl.gotoAndPlay(2);

Refers to the current level the action script is on or in

You can just use: Name&LocationOFMovieClipYouWantToControl.gotoAndPlay(2); with out the '_levelX' or '_root.' or even 'this.' method so long as the movie clip is already on the same level or location as the button. You can just use the movie clip instance name followed by the action you want like the gotoAnd...(X);

This is an example of using the slightly more advanced method:

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

Tell targets vs Condition setting:

Now tell targets are fairly easy to use and most people use them when they want to control a movie clip. So for that purpose they are perfect. However when it comes to buttons if your looking for the best method I recommend condition setting. Why? Well it ensures that no matter how long the animation is, it will always play all the way thought no matter what. With tell targets they only work if the animation is short, to create the illusion that the animation is been played all the way though but as you have seen with long animation the illusion doesn't work. With condition setting however the animation will always be played all the way though. So for the best button effect, condition setting is by far the best method.

Advanced condition setting : Explained

Using condition setting allows you use a button to set the condition and have a movie clip that is been played check the condition and play what ever frame accordingly or do what ever else you want. Using a button you simply set a variable value to what ever you want. Then get the clip to check it as it plays. So because the button is on top of the move clip when the user rolls over the button it sets the variable value movie accordingly. Don't forget to declare your variable is: var IS = "Start". some where in your move on the main stage area.

Example for the button code:

on (release) {
// Change the variable value on release
_root.IS = "Release"
}
on (press) {
// Change the variable value on press
_root.IS = "Press"
}
on (rollOver, dragOver) {
// Change the variable value on roll or drag over
_root.IS = "Over"
}
on (rollOut, dragOut) {
// Change the variable value on roll or drag out
_root.IS = "Out";
}

Then in your move clip you use the go between frames method to achieve something like this:

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

For those of you who are confused look at this:

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

What is happening in this movie is that in the go between parts. The movie is playing between frames each time checking the variable condition each time it betters the last frame of the go between frames. If the variable has not changed the movie will go back and play the same go between frames from the start again. If however the variable has changed then the movie will play the frame label that the variable is set to. So if you are in the over part of the go between frames and you press the controller button when the movie checks the variable value in the last frame of the go between section for the over part. It will see that it is no longer set to "over" but is now set to "press". So the movie will go to and play from the frame label called "pressed". When it has played that bit of animation for the press part. It will then play between the go between frames for the "press" part checking to see in the value is now "press" .If the variable has not changed the movie will go back to the start of the go between for the "pressed" part and play it again. If it has changed, then the movie will play the frame label according to the new value of the variable 'IS'.

Hopefully that makes some sense. Now normally the go between frames are only between two frames and not as many as in this example but it helps demonstrate what's going on. Your notice as you do different things to the button like roll 'off' and 'on', then the movie will tell you what the value of the variable 'IS' is set to. Normally the button controller would be over the movie clip and the movie clip animation would be confined to the same location and area as the button but would play some effect like in this example from before: which is the same as the movie just above but not as stretched out so to speak. They may not look similar but the principals are identical and so is they way they work. Why do I set the var 'IS' equal to 'Start'? Well simple because when the movie first runs the mouse will not be over the button controller or pressing it or will have released it. Although it will be out off the button you don't want it to play the out animation when the movie first runs as the out animation is normally the reverse effect of the animation for roll on. So if on roll on the button gets bigger the roll off animation would be it gets smaller again. When you first run the movie you may not want the button to start big and grow smaller because of when the movie fist runs the mouse is off as the mouse hasn't rolled off it's just off because the movie has just started. To over come this we use 'Start' instead allowing us to ensure that when the movie first plays although the mouse will be off the button it doesn't play the off animation till we first roll onto the button and then off it. If you do however want to play the off animation when the movie first starts set 'IS' variable to 'Out' like so: var IS = "Out" and your get the roll off effect when the movie first runs.What happen though if when the movie first runs and the mouse just happens to be over the button? Noting because when the movie first runs it won't automatically have focus till you roll off or click on the button to give the movie focus and then the click event or roll off event would just play. If the movie and button both do some how magically have focus then... well that's extremely unlikely and almost impossible. I would imaging the button wouldn't react till you rolled off or clicked the button to set focus on the swf and then again the press or roll off animation would just play. Then every thing would play normally and the user won't notice. So I would not worry about such things as the likely hood of this happening are almost astronomical lol

Using OnEnterFrame Function

The: onClipEvent (enterFrame) { or _root.MovieClipInstanceName.onEnterFrame = function(){ Are the exact same thing only the onClipEvent (enterFrame) { is used when placing this script on a movie clip (NOT inside the movie clip it self but on it as in select it and past the code into the action script panel). Where as onClipEvent (enterFrame) { is used when using the script for a movie clip but not directly placing it on that movie clip. The on enter frame function is very basic stuff although many people think it's not. When you play a flash movie, every time you enter a new frame when playing though your movie animation, I imagine that as the time line head enters each new frame it called a function. Well that's what this script dose it calls a function every time the flash movie enters a new frame. However even if you have a stop command in the frame. The script will still play. Although flash isn't actually entering a new frame as has stopped at that frame by the stop command. It is however still playing and therefore the onenterframe function will still be run. You don't actually have to have the flash movie enter a new frame to call or run this script as it will always run all the time any how. For example if you put this code into a blank flash movie:

// Declare a variable and set it's value to 0
var count = 0;
// Create a text field
this.createTextField("my_txt", 0, 2, 3.5, 210, 21.9);
// Give the text field a border
my_txt.border = true;
// When the movie enters the first frame call this code continually
this.onEnterFrame = function() {
// set the text field text to the value of the variable
my_txt.text = count;
// increase the variable value by 1
count = count+1;
};
// Stop the movie at this frame
stop();

You should get this:

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

As you can see even though their is a stop command and the flash move is only one frame long the script still runs. The on enter frame function is very good for updating variables or picking up changes in something as it will always continually run. So if you want to update something as soon as a change has occur or monitor for any changes that occur the on enter frame is a good method as it will run any code you put within the function brackets.

Example of using the on movie clip method:

// When the movie clip enters the first frame call this code continually
onClipEvent (enterFrame) {
// If the mouse is over the movie clip
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
// Then go to and play the next frame from what ever frame the movie clip is at
this.nextFrame();
// Other wise if the mouse is not over the movie clip
} else {
// Then go to and play the previous frame from what ever frame the movie clip is at
this.prevFrame();
}
}

Example of using the off movie clip method:

// When the movie clip enters the first frame call this code continually
_root.MovieClipInstanceName.onEnterFrame = function(){
// If the mouse is over the movie clip
if (_root.MovieClipInstanceName.hitTest(_root._xmouse, _root._ymouse, true)) {
// Then go to and play the next frame from what ever frame the movie clip is at
_root.MovieClipInstanceName.nextFrame();
// Other wise if the mouse is not over the movie clip
} else {
// Then go to and play the previous frame from what ever frame the movie clip is at
_root.MovieClipInstanceName.prevFrame();
}
}

Both of these do the exact same thing but in slightly different ways Examples:

Using the:
onClipEvent (enterFrame) { Method

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

Using the: _root.MovieClipInstanceName.onEnterFrame = function(){ Method

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

As you can see their is no difference other than just different ways of doing the same thing with action script. The advantage of using the on enter frame function is that you can play a movie clip in reverse. So if you wanted it so that when the user rolls off your button instead of playing the animation all the way though like in the condition setting method or jumping back to the start like in the tell target method. You can play the move in reverse from what ever frame it got to when you where playing the animation for the mouse been over like your notice in the examples above.

Although having the flash movie continually play between 2 frames until a condition is method works fine but their is an easier way IF you don't mind your animation looping continually. On your button then use gotoAndPlay(_root.IS); on each part of you're movie clip. Don't forget to declare your variable is: var is = "Out". Some where in your movie. To see what I mean download this example (Note: Their is a small time delay when you test this movie):

Download This Flash Example Free Here: Download the Flash file  Flash MX 2004

Download This Flash Example Free Here: Download the Flash file  Flash MX

Goto page: 1, 2, 3, 4, 5  Next This tutorial is spread across 5 pages. Don't Let that put you off. Do try to read it all the way though or it won't make any sense

For more help and advice please feel free to ask for help on the webwasp massage boards: forum

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.