|
|
|
 |
|
|
|
|
|
||||||
|
||||||
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 !
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
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
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):
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):
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
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
Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates
|
|
|
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend:
Click here
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.
|
Webwasp Community: