Introduction about this tutorial

FlashMX 2004 is out and gives us new challenges. Who said MX (the old MX) will be the last challenge? Anyway making a long story short, it is time to learn Actionscript 2. So this tutorial is from a beginner (myself) to beginners. However, I am very familiar with AS1 and that probably makes it much easier to learn AS2.
In order to understand this tutorial you should
  • have FlashMX 2004 installed on your computer,
  • be kind of familiar with actionscript 1,
  • read the «HELP« files about AS2 in the Flash Help menu and do the exercises,
  • read other introductary tutorials.
What specifically will you learn in this tutorial? You will get an introduction to AS2 by first looking at an AS1 script, which functionally does what we want and then learn how to create a similar script but using AS2. This will show you to some extent some of the differences between AS1 and AS2 but also the power of this new language. Once you start learning AS2 you will have a lot of fun and create libraries of .as files (you should know by now what that is), which you can always reuse when you create movies. The example I present here is a real world example, which sometimes I am missing when I read other tutorials, where the final result is only a trace-action. Anyway let«s get started now.
NOTE: If you use AS2 class scripts you can only use movieclips to refer to getURL() but not any buttons except components, which are movieclips.

The final product

After you have tested this file we will discuss how to make it.

The Actionscript File

Actionscript 1

We have three buttons, which do something when we rollover, rollout or press. So we need three functions to complete this task. If we write this in AS1 - we can write it differently as well - , it looks like the code below.
//"class" - type function with all parameters
MovieClip.prototype.butFunc = function (s_Url,s_Window,c_nColor,c_oColor) {
	this.onOver(c_nColor);
	this.onOut(c_oColor);
	this.onPrss(s_Url,s_Window);
}
//rollover function, "this" refers to the movieclip. We change the color.
MovieClip.prototype.onOver = function(c_nColor){
	this.onRollOver = function(){
	   oColor = new Color(this);
	   oColor.setRGB(c_nColor);                    
	}
}
//rollout function
MovieClip.prototype.onOut = function(c_oColor){
	this.onRollOut = function(){
	   oColor = new Color(this);
	   oColor.setRGB(c_oColor);                    
	}
}
//onpress function to get a url in a certain window.
MovieClip.prototype.onPrss = function(s_Url,s_Window){
	this.onPress = function(){
	   getURL(s_Url,s_Window);
	}
}
//execution of the functions and giving parameters a value.
button1.butFunc("http://www.flashkit.com","_blank",0xFF8429,0xFF0000);
button2.butFunc("http://www.cancerinform.net","_blank",0x31ADA5,0xFF0000);
button3.butFunc("http://www.can_info_guide.tripod.com/","_blank",0xDE5AAD,0xFF0000);
We could have written this a bit differently but I deliberately did it this way, because this is as close as we can get to the new AS2 syntax if we use AS1. In AS1 there was no real class definition. What came closest to it was the prototype property, which implemented inheritance. This way of scripting is not possible in AS2. But if we have this in AS1 why do we need to bother about a new language? Well, in fact most of us don«t need to, because AS1 is perfect for nearly all the dayly applications in Flash movies. But let«s have a closer look at the above script. Supposed we are a compiler reading this script and doing what the script tells us. First of all look at the paramaters: there are "" and "" But how does the compiler know? Well it does not looking at the variables but it can interprete what it is when using the parameter values. This is still ok for a little script like this but not for a 1000 line or longer script with many different type of objects and properties. Such an application is what we would call "" So we would expect that even a regular movie runs more smoothly with AS2. So next we look at a script, which does the same but is written in AS2.

The Actionscript 2 File

A general rule

I forgot to mention one thing, which is very important. There are a number of complains including from myself that a script written in the older MX version in AS1 gives faulty results, when saved in MX 2004 or runs slowly or is not executed. There are several reasons for that. Former versions of the Flashplayer recognized variables even when there was a mix up with capital or small letters, not so player 7. So check your scripts for such inconsistencies. In one case which I had where an object name for an xml file was different at a later stage, that was ok for flashplayer 6 but in 7 it caused the script to run slowly and I had to abort it. So as a general rule for writing any actionscript you have to be very precise.

Actionscript 2

Actionscript 2 uses a new type of syntax and files stored outside the flashmovie get the extension .as. The name of the AS file has to be exactly like the name of the class we construct. Next we have to establish the path. It is better to do that right away, since the path is written before the class name in the AS file and later the class will be called using the exact path name. I am using a folder called "", so calling the class will include this path: scripts.classname. You can have more folders then the path becomes longer. Since this is a button function to get a URL I call the class "" Referring to this name, we have to include the path and it will be "" So here is now the first line of the script to define the new class. "" is a word reserved for AS2. A class defines a new type of object.
class scripts.uButton1 {
}
Next we introduce all the different variables we need for the execution of the script:
class scripts.uButton1 {
//defining all variables
	var s_Url: String;
	var s_Window: String;
	var m_Object: MovieClip;
	var c_nColor: Color;
	var c_oColor: Color;
	var o_Color: Object;
}
There are a number of comments to make now. We use the "" to indicate that these are variables. Next we give the var a name and I learnt to indicate by the first letter in the name what kind of var it is: "" for movieclip and "" for string for example. The var name is then followed by a "" and the type of var. This is very important and if you ommit this you will receive an error message. By the way, be prepared that at the beginning when you create your first scripts you will receive many error messages. So don«t feel intimidated.
There are many different types of variables. Within the flash actions panel type " myName:", for example, and a window will open showing all the different var types. Next we will now create the constructor.

The Actionscript 2 File

Constructor

You will find this explanation in the Flash Help menu about constructors: (use the help menu as often as you can)
Constructors are functions that you use to define the properties and methods of a class. The constructor has the same name as the class, in our case "" Before the function name we use the word "" We don«t actually have to add it because by default the constructor is public. In contrast to public is "" These reserved words can only be used in .as files and not in the actionscript panel. These words allow or deny access of other classes to the class function where it is used. The constructor function has to be public in this case since none of the functions can be otherwise accessed. Also do not use ", dynamic or Void" in the constructor.
We now enter the subfunctions of our classfunction, which are what happens when we rollover, rollout or press the movieclip in our movie and thus converts the movieclip into a button. We enter of course the necessary parameters.
class scripts.uButton1 {
//defining all variables
	var s_Url: String;
	var s_Window: String;
	var m_Object: MovieClip;
	var c_nColor: Color;
	var c_oColor: Color;
	var o_Color: Object;
//creating the constructor
	public function uButton1(s_Url,s_Window,m_Object,c_nColor,c_oColor) {
//subfunctions with parameters
	   onOver(m_Object,c_nColor);
        onPrss(s_Url,s_Window,m_Object);
        onOut(m_Object,c_oColor);
    } 
}

The Actionscript 2 File

Subfunctions

Now it is time to write the actual button functions, which are a mixture of expressions from AS1 and those new in AS2. Let«s look at the first subfunction "(m_Object,c_nColor);" What do we want to achieve? We want to change the color of the button, when the mouse goes over. What do we need? We need to create a color object, for which we have already the var " Object;" Then we need to define the button for the rollover, which is " m_Object: MovieClip;" And we need a var to hold the color code, which is " c_nColor: Color;" As you can see we have to define exactly what type of variable we want to use. If we associate the wrong type, we will get an error message. Also, once the var is of a certain type we cannot change the type. Why do we want to in the first hand?
class scripts.uButton1 {
//defining all variables
	var s_Url: String;
	var s_Window: String;
	var m_Object: MovieClip;
	var c_nColor: Color;
	var c_oColor: Color;
	var o_Color: Object;
//creating the constructor
	public function uButton1(s_Url,s_Window,m_Object,c_nColor,c_oColor) {
//subfunctions with parameters
	   onOver(m_Object,c_nColor);
        onPrss(s_Url,s_Window,m_Object);
        onOut(m_Object,c_oColor);
    }  
	private function onOver(m_Object,cnColor,oColor):Void {
	   c_nColor = cnColor;
	   o_Color = oColor;
	   m_Object.onRollOver = function(){
	       oColor = new Color(this);
	       oColor.setRGB(cnColor);                 
	   }
	}  
}
We make the function "" private, because we want to allow access only from this class. And now there is something very important. I want you to focus on the 3 parameters. While "" is still the same parameter/var as we defined it originally, the other parameters have different names: "" and "" However, we fill them with the var values we have defined originally. Why do we have to do this treatment for the different var? The reason is that if we don«t redefine the variables, which are used within the rollOver function. They will be classified as "" Only "" is ok because it is used within the "" function. So if we pass on a var from the constructor to a function, which is then used within another subfunction we have to redefine or recall the var. Play around with the code and see what the error messages are. Otherwise the script is like any other actionscript you already know. We create an instance of the color object and name it "" with the property "" Then we create a new color. Check out the whole script on the next page.

The Actionscript 2 File

The whole Script

And now it is fairly easy to create the rest of the whole function. 
class scripts.uButton1 {
//defining all variables
	var s_Url: String;
	var s_Window: String;
	var m_Object: MovieClip;
	var c_nColor: Color;
	var c_oColor: Color;
	var o_Color: Object;
//creating the constructor
	public function uButton1(s_Url,s_Window,m_Object,c_nColor,c_oColor) {
//subfunctions with parameters
	   onOver(m_Object,c_nColor);
        onPrss(s_Url,s_Window,m_Object);
        onOut(m_Object,c_oColor);
    }  
	private function onOver(m_Object,cnColor,oColor):Void {
	   c_nColor = cnColor;
	   o_Color = oColor;
	   m_Object.onRollOver = function(){
	       oColor = new Color(this);
	       oColor.setRGB(cnColor);                 
	   }
	}  
	private function onOut(m_Object,coColor,oColor):Void { 
	   c_oColor = coColor;
	   o_Color = oColor;
	   m_Object.onRollOut = function(){
	       oColor = new Color(this);
	       oColor.setRGB(coColor);                 
	   }
	}              
	private function onPrss(sUrl,sWindow,m_Object):Void {
	s_Url = sUrl;
	s_Window = sWindow;
	   m_Object.onPress=function(){
	       getURL(sUrl,sWindow);
	   }
	}  
}
But as you can imagine this is not all, because we have to call this script now from within the flash movie. Check the next page how to do that.

The Actionscript 2 File

Calling the script from the movie

Now we want to see what how our script affects the movie. To see that, we have to call the class function. Designwise, in our movie we make a movieclip, which we name "" and inside there is the text you saw and the 3 buttons. To bring these buttons to life we first import the new class using the import method. So create an actions frame on the main timeline of the movie. We use import because we are lazy and don«t want to write the whole path for the function for every button instance. Next we create instances of the "" class for each button we have. This is very similar to creating any new object as you know it from AS1. We put the word "" in front of the class name. We now add the parameters and here we have to be careful as well. Strings are placed within quotations but other parameters not. If we put the button parameter in quotations we will actually be in trouble.
//this imports the script and the whole path has to be specified here
//but not later any more.
import scripts.uButton1;
//we create var of the uButton1 class. Parameters as strings need quotations but
//not the other parameters. buttonClip.button1 specifies the path where the button is located.
var myButton_1:uButton1 = 
new uButton1("http://www.flashkit.com","_blank",buttonClip.button1,0xFF8429,0xFF0000);
var myButton_2:uButton1 = new uButton1("http://www.flashkit.com/board/forumdisplay.php?s=
e8257289d3a4bcdac5a2939f5a535463&forumid=61","_blank",buttonClip.button2,0x31ADA5,0xFF0000);
var myButton_3:uButton1 = new uButton1("http://www.flashkit.com/board/forumdisplay.php?s=
086abae7
b05a376b83a624e3616390ae&daysprune=20&forumid=30","_blank",
buttonClip.button3,0xDE5AAD,0xFF0000);
And that«s it for today. I hope to see more tutorials about AS2 in the future so I can learn more. Have fun.