Migrate ActionScript 1.0 to ActionScript 2.0 , Part 1: The Basics

Creating the Class File

The structure for a class file is quite simple; it looks something like this:

class yourClassName {  
 
// Properties  
 var myString:String;  
 var myNumner:Number;  
 var myMovieClip:MovieClip;  
 
// Constructor function  
 function yourClassName() {  
 }  
 
// Methods  
 public function yourFunction(){  
 }  
}

We will create a custom class file with custom properties, constructors and methods in a moment, so that we can see how a real life class file operates.

1. Within Flash MX 2004 Professional (Select File > New > ActionScript File) or a text editor of your choice, create a new file called Retro.as.

Note: the editing of external .as class files within Flash is only supported natively by Flash MX 2004 Professional.

2. Add the following code:

class Retro {  
 private var incomingString:String;  
 private var stringLength:Number;  
 
 //Constructor  
 function Retro(incomingString:String) {}  
 
 //Methods  
 public function checkStringLength(incomingString:String,  
                                   stringLength:Number):Boolean {  
   this.incomingString = incomingString;  
   this.stringLength = stringLength;  
   if (this.incomingString.length >= stringLength) {  
     return true;  
   } else {  
     return false;  
   }  
 }  
 public function checkContainsNumeric(incomingString:String):Boolean {  
   this.incomingString = incomingString;  
   var invalidChars:String = "1234567890";  
   var i:Number;  
   for (i=0; i < this.incomingString.length && containsNumbers == false; i++)  
   {  
     var character:String = this.incomingString.charAt(i);  
     if (invalidChars.indexOf(character) != -1)  
     {  
       return true;  
     }  
   }  
   return false;  
 }  
 public function checkIfEmpty(incomingString:String):Boolean {  
   this.incomingString = incomingString;  
   if (this.incomingString.length == 0)  
   {  
     return true;  
   } else {  
     return false;  
   }  
 }  
}

3. Save Retro.as to your local settings folder, or in the same directory as your FLA:

[Drive]:\Documents and Settings\[Username]\Local Settings\Application Data\Macromedia\Flash MX 2004\[Language]\Configuration\Classes

Where:

[Drive] = Installation Drive  
[Username] = Your Login Account  
[Language] = Flash MX 2004 localization language (usually for International English, it is 'en')

Now that we've created the external class file, let's take a look at how it fits together.

First, we create the class name Retro and define some simple private properties.

Note that the constructor function Retro() shares the same name and case as the defining class, and is necessary for extra flexibility within the class.

It also accepts an incoming parameter of the data type String, called incomingString.

class Retro {  
 private var incomingString:String;  
 private var stringLength:Number;  
   
 //Constructor  
 function Retro(incomingString:String) {}

We then move on to the methods of the class, in this case, a public function called checkString(). This accepts two incoming parameters: incomingString, the data type for which is String, and stringLength, which has a data type of Number.

public function checkStringLength(incomingString:String, stringLength:Number):Boolean {

In addition to the incoming parameters, we also define the data type of the data that's returned as Boolean.

From there, we define the properties of the class using the this.keyword syntax:

this.incomingString = incomingString;  
   this.stringLength = stringLength;

This value is used to check for valid data. In this case, we check that the length of the incomingString variable is greater than, or equal to, the stringLength variable. We then return the value of the public function to the callee (which we will add in a moment).

if(this.incomingString.length >= this.stringLength){  
     return true;  
   } else {  
     return false;  
   }  
 }

The other methods in the class follow similar rules, but check for missing and numeric content, so we can skip over them.

Adding the ActionScript

Now that we've created the external class file, all that remains is to add the code that hooks into the class – then, we can test the functionality!

1. Select the first frame of the Actions layer in your FLA, and add the following code to the Actions Panel:

var validateMe:Retro = new Retro();  
validationListener = new Object();  
validationListener.change = function() {  
 simpleValidation();  
};  
username.addEventListener("change", validationListener);  
 
function simpleValidation() {  
 minLength.text = validateMe.checkStringLength(username.text, 10);  
 anyNumeric.text = validateMe.checkContainsNumeric(username.text);  
 anyContent.text = validateMe.checkIfEmpty(username.text);  
}

You can see (from the bold code) that we've created a new reference to the class file, called validateMe. When the value within the box changes, we call the simpleValidation() wrapper function, as we did in the AS 1.0 function. Then, as before, we push the return values of the functions to the relevant TextInput instances.

2. Save your FLA and select Control > Test Movie.

Before you start typing in the text box, you should see that the three feedback text areas contain no information. As soon as you start typing, the change event handler is triggered and content of the text box is sent to the three public functions. Their return values are returned to the relevant feedback area.

If you add more than 10 characters to the text area, the minimum content length trigger changes from false to true (try changing the value in the following line to alter the minimum length).

validateMe.checkStringLength(username.text,10);

If you add numeric content into the field, this also will be fed back within the SWF from the checkContainsNumeric() method.

There you go! It really wasn't that hard to migrate our AS 1.0 code to scalable, reusable and portable AS 2.0 code after all.

You may be sitting there thinking, why would I want to write anything in AS 2.0? What are the benefits? The main reasons for upgrading your existing code from AS 1.0 to AS 2.0, or writing your new applications in AS 2.0, hinge around modularity, reusability and scalability, not to mention the fact that developing code in an object orientated programming language will help you develop better coding practices.

If we wished to create a series of classes to extend the functionality of the MovieClip class and allow a dynamic opacity fade, we could create the following .as file, saved as FadeClip.as, as follows:

class FadeClip extends MovieClip{  
 //Properties  
 private var MCName:MovieClip;  
 private var currentAlpha:Number;  
 private var differenceAlpha:Number;  
 private var fadeStep:Number;  
 private var endPosition:Number;  
 private var stepSize:Number;  
 //Constructor  
 function FadeClip() {}  
 //Methods  
 public function AlphaFade(MCName:MovieClip, startAlpha:Number, finalAlpha:Number) {  
   currentAlpha = MCName._alpha;  
   differenceAlpha = finalAlpha-currentAlpha;  
   fadeStep = differenceAlpha / 10;  
   MCName._alpha = MCName._alpha + fadeStep;  
 }  
}

As the public function AlphaFade() accepts a MovieClip parameter, as well as starting and final alpha parameters, we can easily fade any given MovieClip from one value to another. To achieve this, we'd add the following code to a frame on the timeline.

Note: This code references a MovieClip instance within the timeline named TitleToAnimate.

var fader:FadeClip = new FadeClip();  
_root.onEnterFrame = function() {  
 fader.AlphaFade(TitleToAnimate, 10, 100);  
}

By setting the _alpha property of the TitleToAnimate MovieClip instance to an arbitrary value of 10, we can fade the opacity from a starting value (10) to the final value (100).

AS 2.0 migrations seems to scare a lot of people, but, once you get started, you never look back! It's as easy as falling off a bike … almost!