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

ActionScript 2.0 (AS 2.0) was introduced in the latest incarnation of Flash (Flash MX 2004) and while ActionScript 1.0 (AS 1.0) has been embraced by developers and experimentalists alike, it was never a true object oriented language -– it was more object-based. As such, it didn't attract the attention of mainstream application developers. AS 2.0, on the other hand, is much like other object orientated languages such as C# and Java, which use the new ECMA JavaScript 2.0 standards.

This makes it easier to develop more scaleable, robust and modular projects.

In AS 1.0, creating prototypes to extend functionality was more of a learned process than logical one. And, if you accidentally converted from one data type to another (number to string or vice versa), although the application may have worked, any errors would not have been reported back via the Output Panel.

Let's briefly discuss the major enhancements in ActionScript 2.0 before we look at some simple, real world AS 2.0 examples in action. Note that you can download the source files for this tutorial.

Strong Data Typing

When creating variables and objects in AS 2.0, you should get into the habit of declaring the data type. This is different from AS 1.0 in that, previously, you could get away with using loosely typed variables that had the knock-on effect of potentially introducing points of failure into your applications.

When you compile your movie or check for script errors in AS 2.0, variable data types are checked and any errors are sent to the Output Panel as error messages. Consider the following code:

var NotANumber:String = 15;
var NotAString:Number = "Fifteen";

This code will output 2 error messages, as the assigned value for the variable NotANumber is a number, rather than a string. Also, the assigned value for the variable NotAString is a string, rather than the declared data type of Number.

It's a pretty simple procedure, and one that, once you're in the groove of doing it, becomes second nature.

Case Sensitivity

If you're not used to coding with case sensitivity in mind, then you might be in for a bit of a shock when your AS 2.0 projects stop working. Consider the following code:

var TextField_001 = "Some Information";
var textfield_001 = "Different Information";
trace(TextField_001);
trace(textfield_001);

If you were to preview the movie within Flash using AS 2.0, you would see both variables within the Output Panel, as they are interpreted as separate variables; in AS 1.0 you would see only one value, as AS 1.0 is largely case insensitive.

Creating AS 2.0 Classes

In AS 1.0, it was considered best practise to externalise your ActionScript into an external .as file, rather than including the code within a frame of the timeline. In AS 2.0, this has been taken a step further. When creating new classes, you no longer have a choice -- all classes must be located in a separate .as file.

You can create your .as files easily using Flash MX 2004 Professional, Notepad, PrimalScript or other such editing tools. You may define only one class per .as file, and the filename must match exactly the name of the class definition. For example:

class AlphaFade{
 // Class Properties, Constructors and Methods go here!
}

The class AlphaFade must be saved in a file called AlphaFade.as in your local setting folder. On Windows, the file must be saved in the following location:

[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')

Note: The reason the class files should be saved in your local settings folder is outlined in my Flash blog here.

Property and Method Attributes

Defining a variable or function as private or public dictates the scope in which the method or property is available. If the attribute is noted as private, then it can only be accessed via the class, whereas, if it is noted as public, it can be accessed outside of the class. Consider the following:

public function checkIfEmpty (incomingString:String):Boolean {
 if ( incomingString.length == 0)
 {
   return true;  
 } else {
   return false;  
 }
}

The function checkIfEmpty() is a public function, and is accessible from the timeline of the Flash movie via the class (more on this later).

The following variable is only accessible within the class itself:

private var incomingString:String;

Extends Attribute

The extends attribute (as we will see in a moment) is used to inherit public and private methods or properties from other classes.

In the example below, we can simply extend the MovieClip class by creating a new class file called ShiftingClip.

class ShiftingClip extends MovieClip {
 // Properties, Constructor, Methods go here
}

Although there are other attributes (dynamic, static, getters and setters) that are important, we'll discuss them in a later article. Right now, we just need to cover some basic groundwork to get you up and running.

Without explaining all of the AS 2.0 OOP structure, we can now safely move on to see how to construct class files and reference them from within our Flash movies.

Migrating AS 1.0 Functions to AS 2.0 Classes

Whenever a new version of a given programming language comes along, it generally means that the API has been upgraded, new routines have been added, or it has been rewritten.

In the example of AS 2.0, the prototype chaining has been rewritten, among many other things. This engenders a more modular and controlled approach to programming, allowing the development of custom classes and the extension of already-created classes with relative ease.

Thus, we can take Flash 5 syntax or ActionScript 1.0-based code and migrate it without difficulty into the new AS 2.0 OOP environment.

In this example, we will migrate a chunk of validation code from a timeline-based location to an external class file. The code will check to ascertain whether a string has any content, meets a minimum string length and contains numeric content. A Boolean value will be returned, which identifies the conditions that have been met.

Setting the Scene

1. Within Flash MX 2004, create a new Flash document, accepting the default size and frame rate.


2. Rename the default layer Actions, and add another layer below, named Items.


3. Drag three TextInput components from the Components Panel into the first frame of the Items layer, aligning them above one another on the right hand side of the stage.

Name the instances from top to bottom: anyContent, minLength, and anyNumeric.

4. Drag a further instance of the TextInput component from the Components Panel and align it to the right of the previously-added TextInput components. Name the instance username.

We will use the username text area to input data, and the three vertically aligned text areas to provide feedback on the status of the string that we're checking.

5. Create 3 static text boxes, and align them with the top of each of the TextInput component instances. Enter the following text into the boxes so that, from top to bottom, they read: 'Empty?', 'Minimum Length?' and 'Numeric Content?'


6. Save the Flash document to a location of your choice.

Now that we've added the relative components to the stage and set the scene, we can take our AS 1.0 code and start the upgrade process to AS 2.0.

Migrating the Code

Shown below is the AS 1.0 version code that we want to migrate to AS 2.0. In the original AS 1.0 version, I used dynamic text boxes to hold the information, but in this version, I'll use some version 2.0 components, as they're quicker to set up.

This is a basic, event-driven setup, whereby we have an event listener attached to the username version 2.0 TextInput component. When the content of the component changes (i.e. when someone starts to type), the simpleValidation() function is called. This acts as a wrapper function, calling three validation functions.

The results from these functions are then pushed to the three TextInput instances, so we can check for numeric content, an empty field, and a minimum required length. It's nice and simple!

validationListener = new Object();
validationListener.change = function() {
 simpleValidation();
};
username.addEventListener("change", validationListener);

function simpleValidation() {
 minLength.text  = checkStringLength(username.text,10);
 anyNumeric.text = checkContainsNumeric(username.text);
 anyContent.text = checkIfEmpty(username.text);
}
function checkStringLength(incomingString, stringLength) {
 if (incomingString.length >= stringLength) {
   return true;
 } else {
   return false;
 }
}
function checkContainsNumeric(incomingString) {
 var invalidChars ="1234567890";
 for (i=0; i<incomingString.length && containsNumbers == false; i++)
 {
   var character= incomingString.charAt(i);
   if (invalidChars.indexOf(character) != -1)
   {
     return true;
   }
 }
 return false;
}

function checkIfEmpty(incomingString) {
 if(incomingString.length == 0)
 {
   return true;
 } else {
   return false;
 }
}

What we have here is the ability to quickly convert this AS 1.0-based code into AS 2.0 based classes, to make it more manageable and scalable.