Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

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 a lot to learn)

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

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 !

Using Listeners

So what are listeners... Well they are what they sound like. They listen for something particular to happen in Flash and when it happens they call a function. The Listener works something like this:

myListener = new Object();
myButton.addEventListener("the thing you want to listen for ", the function you want to call when you here that thing);

So an example would be:

// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
myListener = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", myListener);
// Function called by listener
myListener.click = function() {
// The code you want to call for
};

Good practice: Listeners NOTE: IMPORTANT!!!

Firstly each Listener MUST have it's own unique name. No Listener should ever have or use the same name. Example:

// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
MyUniquelyNamedListenerName = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", MyUniquelyNamedListenerName);
// Function called by listener
MyUniquelyNamedListenerName.click = function() {
// The code you want to call for
};

MyUniquelyNamedListenerName This must be the same for all of the occurrences in the above code but different for each time you use the above code for mutable listener events.
Here' s how NOT to do it:

// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
CAT = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", DOG);
// Function called by listener
CAR.click = function() {
// The code you want to call for
};

Here's how NOT to do it with multiple Listeners

// Listener Event One ===============================================================================\\
// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
CAT = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", CAT);
// Function called by listener
CAT.click = function() {
// The code you want to call for
};
// Listener Event Two ===============================================================================\\
// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
CAT = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", CAT);
// Function called by listener
CAT.click = function() {
// The code you want to call for
};
// Listener Event Three ===============================================================================\\
// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
CAT = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", CAT);
// Function called by listener
CAT.click = function() {
// The code you want to call for
};

Here is HOW to do it right with multiple Listeners:

// Listener Event One ===============================================================================\\
// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
CAT = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", CAT);
// Function called by listener
CAT.click = function() {
// The code you want to call for
};
// Listener Event Two ===============================================================================\\
// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
DOG = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", DOG);
// Function called by listener
DOG.click = function() {
// The code you want to call for
};
// Listener Event Three ===============================================================================\\
// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
CAR = new Object();
// If the button is click the listener will pick it up and run the function below
myButton.addEventListener("click", CAR);
// Function called by listener
CAR.click = function() {
// The code you want to call for
};

Good practice: Instance Names NOTE: IMPORTANT!!!

So when ever you make a move clip, button or what ever. I recommend that you always give it a unique name. That name should be used in the library and the property panel for the movie clip, button or etc. The name in the library and property panel for the movie clip, button or etc should always be the same. For example if the instance name or the movie clip, button or etc in the library is "Animation" then in the property panel for the movie clip, button or etc.. would have same instance name "Animation". Then:

1. In the library select the movie clip or button or what ever and right click on it
2. You should see a menu that has 'Properties' on it. Select that option
3. 
4. Then select Export for ActionScript
5. 
6. Ensure that the instance name you gave your movie clip is the same as in the Identifier box

This ensure that Flash knows the name of the movie clip or button or ect... It also means that if you have a preloader the movie clip or button or etc... will be added to frame 1 of the Flash movie so that the preloader loads if before it gets used. Say it was on frame 5 it would preload in frame 1 ready so that in frame 5 it was already loaded. So why do all this? Sometimes you have to, like in the example below. Most the time its just good practice. Remember this for the flowing example below because if you don't this. Then this is often a cause or reason to why the code doesn't work. People forget to give their movie clip, button or etc the same instance names thought and it can cause problems

Method for Flash MX 2004: Component Buttons MX 2004

1. Drag the Flash MX 2004 button component from the library to the stage
2. Create a small movie clip animation small enough to fit inside the button
3. Give the movie clip and instance name in property panel
4. In the library select the movie clip and right click on it
5. You should see am menu that has 'Properties' on it. Select that option
6. 
7. Then select Export for ActionScript
8. 
9. Ensure that the instance name you gave your movie clip is the same as in the Identifier box
10. This is so that when you test the movie button component knows where in the library the movie clip is, so that it can load that movie clip into the button component
11. Then add this action script to a new layer :
12. // Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
    // This command is equivalent to creating an object using the Object constructor
    myListener = new Object();
    // If the button is click the listener will pick it up and run the function below
    myButton.addEventListener("click", myListener);
    // Function called by listener
    myListener.click = function() {
    // The code you want to call for
    };
13. Save and test and you should have something like this:
14. Download This Flash File Example Free Here: Download the Flash file  Flash MX 2004

Method for Flash MX: Component Buttons MX

1. Drag the Flash MX button component from the library to the stage
2. In the property panel in the change panel event box put the name of the function you wish to call e.g. RunMe
3. 
4. Then in a new layer add
5. function RunMe() {
   // The Code you Want To Run
   }
6. That's it. You then should have something like this:

7. Download This Flash File Example Free Here: Download the Flash file  Flash MX

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

You can also use this:

The following code specifies onClick as the function called when the value of button1 changes. Because the location parameter is not specified, onClick must be in the same Timeline as the component instance. The component parameter in onClick is automatically filled in with the instance of a component (the component that has changed as the result of user input and that specifies onClick as its change handler). The actions defined in onClick specify that when the user releases a button. The instance name of the button component is. button1

// If the button is click the listener will pick it up and run the function below
button1.setClickHandler("onClick");
// Function called by listener
function onClick(component){
// The Code you Want To Run
}

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

If in the preceding example is a function located in the great-grandparent Timeline of the component's Timeline, the first line of code would be as follows:

// If the button is click the listener will pick it up and run the function located in the _parent._parent._parent time line location from this point
button1.setChangeHandler("onClick", _parent._parent._parent);

The following code creates the function onClick in an instance of myObject (which is of class Object), and then specifies onClick as the function for button1.

// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object.
// This command is equivalent to creating an object using the Object constructor
myObject = new Object();
// Function called by listener
myObject.onClick = function(component){
// The Code you Want To Run
}
// If the button is click the listener will pick it up and run the function above
button1.setChangeHandler("onClick", myObject);

Either this method or the one above using the function are ok as their is no real difference between them. So use which ever one you prefer

Method for Listeners For Movie Clips And Buttons:

Just when you though that must be all their is to know about buttons now surly.... lol well no. You see this whole time I have been teaching you to use a button to control a movie clip. However you don't have to do this. Instead you can use the movie clip it self to control it self. How? Well using event related Listeners So what these event related Listeners? Well they are NOT like the Flash MX and Flash MX 2004 button component Listeners they use a very different method like so:

Method For Buttons: This is for a button or movie clip

1. Create a button or movie clip you wish to use as a button
2. Give the button or movie clip an instance name in the property panel and ensure that the name in the property panel is the same as the library name for the button or movie clip e.g. MyButton
3. Then on a new layer add:
4. // This function is called when the mouse is over the movie clip or button
   this.MyButton.onRollOver = function() {
   // Code you want to run
   };
   // This function is called when the mouse is not over the movie clip or button
   this.MyButton.onRollOut = function() {
   // Code you want to run
   };
   // This function is called when the mouse is clicks on the movie clip or button
   this.MyButton.onPress = function() {
   // Code you want to run
   };
   // This function is called when the mouse is released from clicking the movie clip or button
   this.MyButton.onRelease = function() {
   // Code you want to run
   };

1. Example of using a button:

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

1. Example of using a movie clip:

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

Method For Mouse: This is for a button or movie clip

The different between this code and the code above is this will pick up the mouse been clicked any where on the stage where as the above script only works when the mouse is click the movie clip or button

// This function is called when the mouse button is being pressed on the stage
this.onMouseDown = function() {
// Code you want to run
};
// This function is called when the mouse button is not being pressed on the stage
this.onMouseUp = function() {
// Code you want to run
};
// This function is called when the mouse is moving on the stage
this.onMouseMove = function() {
// Code you want to run
};

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

Ok so you think surly that has to be all their is to learn... um well no their is one final way of working with buttons lol

Method For Using Action Script 2: This is how to use an external Action Script (AS) file in conjunction with your buttons

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

Download The Acton Script 2 File You Need To Go With The Flash File Free Here: Download the Action Script file

Method For Key Board Keys: This is so that you can use the keyboard keys as buttons.

NOTE: IMPORTANT!!! This is based on a typical windows style keyboard. So some foreign or other types of keyboards will work differently. If you have a foreign keyboard the best thing to do is use the code in this tutorial to trace the key codes on your keyboard so that they are correct for your keyboard. However remember that most users use standard windows style keyboards. The getCode(), returns a code associated with a particular key on the keyboard. Here is a quick and easy way to create a table which shows the values returned for keys on my American keyboard for Windows.

// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object. 
// This command is equivalent to creating an object using the Object constructor
listener_obj = new Object();
// Function called by listener
listener_obj.onKeyDown = function() {
// Create a table and put the Ascii and Key Code for the Button pressed
  trace("<tr><td>" + Key.getAscii() + "</td><td>" + 
			String.fromCharCode(Key.getAscii()) + 
			"</td><td>" + Key.getCode() + "</td><td>" + 
			String.fromCharCode(Key.getCode()) + "</td></tr>");
};
// If a button is clicked the listener will pick it up and run the function above 
Key.addListener(listener_obj);

Run this script and press every key on your keyboard. In the out put window afterwards copy the code and place inside a open and close table tag and you got your self a table telling you all the 
Ascii and key codes for your buttons and the letter values derived from the codes. You should have something like the table on page 5 or something similar to the table below


Ascii Code
Ascii Charter
Key Code
Key Charter
97
a
65
A
98
b
66
B
99
c
67
C
100
d
68
D
101
e
69
E
102
f
70
F
103
g
71
G
104
h
72
H
105
i
73
I
106
j
74
J
107
k
75
K
108
l
76
L
109
m
77
M
110
n
78
N
111
o
79
O
112
p
80
P
113
q
81
Q
114
r
82
R
115
s
83
S
116
t
84
T
117
u
85
U
118
v
86
V
119
w
87
W
120
x
88
X
121
y
89
Y
122
z
90
Z
49
1
49
1
50
2
50
2
51
3
51
3
52
4
52
4
53
5
53
5
54
6
54
6
55
7
55
7
56
8
56
8
57
9
57
9
48
0
48
0
49
1
49
1
50
2
50
2
51
3
51
3
52
4
52
4
53
5
53
5
54
6
54
6
55
7
55
7
56
8
56
8
57
9
57
9
48
0
48
0
0
 
112
p
0
 
113
q
0
 
114
r
0
 
115
s
0
 
116
t
0
 
117
u
0
 
118
v
0
 
119
w
0
 
120
x
9
	 
9
	 
0
 
20

0
 
16

0
 
17

0
 
16

0
 
17

0
 
91
[
0
 
92
\
91
[
219
Û
93
]
221
Ý
59
;
186
º
39
'
222
Þ
92
\
220
Ü
44
,
188
¼
46
.
190
¾
47
/
191
¿
61
=
187
»
45
-
189
½
127

46
.
0
 
36
$
0
 
35
#
0
 
33
!
0
 
34
"
0
 
45
-
0
 
19

27

27

13
 
13
 

8

8


It is worth nothing not all keys have an Ascii but all buttons or almost all buttons have a key code. So if your asking your self which to use Ascii or key code. Then I recommend you use the key code as it is more reliable

Click on this swf movie below to give it focus then press some keys on your key board to see which one have Ascii key and what its Ascii key value is. Note if you press control keys like BackSpace, Tab, Clear, Enter, Shift, Control, Pause/Break, Caps Lock, Esc Insert, Delete, help, Windows Key Scroll Lock, Num to name but a few. Many of them either have no ascii code or have the same ascii code as others

Note: Click on this movie and press a key on your keyboard

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

Key code and ascii code character conversion:

String.fromCharCode(Key.getCode()) This will convert the key code to the charter of the button pressed
String.fromCharCode(Key.getAscii())This will convert the ascii code to the charter of the button pressed

NOTE: IMPORTANT!!! The movie below use's the code to manually set the charters of the button pressed so the actual character pressed is not recorded in the "You Pressed:" box. For example if you press "| \" on your keyboard (it's the key on the left to the Z key) you will see this movie displays"| \" as that is the charters on the key face. Yet it is not true character recorded by Flash. To see what I mean test the next movie below

Click on this swf to give it focus then press some keys on your key board to see the key code, Ascii code and the button you pressed

Note: Click on this movie and press a key on your keyboard

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

This above method can trace every key on the keyboard expect for 1 of them and that is the left alt key for some reason. Not sure why that is really. Please note that because of different browser have different short cut keys these may interfere with the swf movie. An example would be the F1 key. If you test the above movie in Flash, when testing ensure that you disable the Flash short cut keys:

Ensure that the tick is next to this option just like above. This means that when you test the movie it blocks the short cut keys from interfering with swf movie

NOTE: IMPORTANT!!! The movie below uses the code to character conversion to get the character of the button pressed. For example if you press "| \" on your keyboard (it's the key on the left to the Z key) you will see this movie displays"ü" for ascii and "\" for the key code as that is the character for the key code. Confused??? I can't say I blame you. Basically in the above example I examined the code and have a list of character in an array to match the character on the keys. So when a keyboard button is pressed it would find the code and look up that code's character in an array and display the character I set in the array. The array characters are not the real characters that you would get if you use Flash to record the charters like below. That is the difference. Why the difference? Well simple so you can use witch ever method you prefer to record a key or Ascii code and convert that to any character you so wish

Note: Click on this movie and press a key on your keyboard

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

Methods of the Key object may be used to find out which key a user pressed during a movie. In Flash MX, you can set up a listener to check for a key press, with code like this:

// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object. 
// This command is equivalent to creating an object using the Object constructor
listenForKey_obj = new Object();
// Function called by listener
listenForKey_obj.onKeyDown = function() {
	// Trace the ascii code 
	trace(Key.getAscii()); 
	// Trace the key pressed using a ascii code to character conversion 
	trace(String.fromCharCode(Key.getAscii())); 
	// Trace the key code 
	trace(Key.getCode()); 
	// Trace the key pressed using a key code to character conversion 
	trace(String.fromCharCode(Key.getCode())); 
};
// If a button is clicked the listener will pick it up and run the function above  
Key.addListener(listenForKey_obj);

You can if you wish to, remove a key listener with: Key.removeListener(Name Of listener); 
Example: Key.removeListener(listenForKey_obj);
listenForKey_obj is the name of the listener in the above code

You can use a listener to pick up if a text box contents are changed:

// Conversion function; creates a new empty object or converts the specified number, string, or Boolean value to an object. 
// This command is equivalent to creating an object using the Object constructor
myListener = new Object();
// Function called by listener
myListener.onChanged = function() {
	  // Trace the fact the text box contents have changed 
    trace("MyTextBox has been changed");
};
// If a button is clicked the listener will pick it up and run the function above 
MyTextBox.addListener(myListener);

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

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