Video Training – Tutorials

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Adobe Flash CS3 Tutorial.

Object Oriented Programming with ActionScript – part 1

As your Flash applications grow more complex, relying on substantial amounts of ActionScript code, efficiency will become more of an issue. Applications that use well-organised code are more reliable, and lend themselves better to future extension. One approach to developing such systems is Object Oriented design, which we will explore in this tutorial. Even if you’re new to the concept of Object Oriented design, you may find that you have already adopted some of the techniques on which it is based.

The Concept of OOP with ActionScript

You will likely already have used Objects in your ActionScript code whether you’re aware of it or not. For example, your code may have used the TextFormat class:

var tf:TextFormat = new TextFormat();

In this example, we create a new Object of the Class TextFormat. This means that the Object has the properties and behaviour that are defined in the TextFormat Class declaration. This Class is part of ActionScript itself, and you can therefore create and use TextFormat Objects just by inserting the single line above. With Object Oriented design, you will be designing your own Objects, by creating Class declarations for them in ActionScript, then importing them into your Flash for use there.

The concept of Object should be familiar to you if you have used Library items and Symbols in Flash. When you create a MovieClip, for example, and define what happens within it, the MovieClip symbol in your library is like a blueprint or prototype for that kind of Symbol. When you then use instances of the MovieClip Symbol within your Flash movie itself, each of these instances has the properties and behaviour that you defined when you created the MovieClip originally. This process is analogous to what you’ll do with your ActionScript Classes. The Class declaration is where you define the properties (in ActionScript) that any instances of the Class will have when you create them, as with the TextFormat object above.

Well-organised code

The reason for adopting any design methodology is to produce applications that are reliable, efficient and easy to perform future amendments or extensions upon. This is similarly the case with Object Oriented development. To begin, we will look at some of the simple efficiency measures that you can take during your regular programming routine, and demonstrate how these form the basis for the Object Oriented approach.

There are many techniques to achieving well-organised code when creating Flash applications. The simple act of including plenty of comments and whitespace in your code makes for a component that is easier to debug and extend. Similarly, organising your code into sensible chunks of related processing is helpful. When doing this, creating what are referred to as ‘helper’ functions (something that you may have already done), illustrates the basic principle behind Object Oriented design.

Let’s look at a simple example. When you are writing ActionScript code, you will often find that you are carrying out similar processes repetitively. When this is the case, you should consider creating functions to carry out those processes, effectively allowing you to cut down on the amount of code you need to achieve the same functionality. Imagine you have a Flash movie that contains several text Strings whose content varies, maybe the text is being imported from some external file which has unpredictable content. You have decided that you don’t want to display any content that isn’t alphanumeric, i.e. you only want letters and numbers. For this reason you will have to perform text processing on each of the Strings before you display them. Your code might look like this (feel free to paste this into a Flash document to try it out – don’t worry too much about the String processing code if it’s unfamiliar to you, the details are unimportant, but pay attention to the overall structure of the code):

//strings - nonsense
var first_str:String="kdfHGKj kkv e$ deagf% /.;fghlkjsf'h'";
var second_str:String="bcn'l;gH;'(fghsf ";
var third_str:String="bcnf..,\\gj[] *dFG";

//strip out non alphanueric from first
var firstStripped_str:String="";
for(var i:Number=0; i="0" && ch<="9") || (ch>="a" && ch<="z"))
firstStripped_str+=first_str.charAt(i);
}
trace(firstStripped_str);

//strip out from second
var secondStripped_str:String="";
for(var j:Number=0; j="0" && ch<="9") || (ch>="a" && ch<="z"))
secondStripped_str+=second_str.charAt(j);
}
trace(secondStripped_str);

//strip third
var thirdStripped_str:String="";
for(var k:Number=0; k="0" && ch<="9") || (ch>="a" && ch<="z"))
thirdStripped_str+=third_str.charAt(k);
}
trace(thirdStripped_str);

This can be easily improved by making a ‘parameterised’ function, meaning a function that will carry out the same processing but which takes the Strings as parameter, making it adapt to each different circumstance:

//strings - nonsense
var first_str:String="kdfHGKj kkv e$ deagf% /.;fghlkjsf'h'";
var second_str:String="bcn'l;gH;'(fghsf ";
var third_str:String="bcnf..,\\gj[] *dFG";

function stripChars(my_str:String):String
{
var stripped_str:String="";
for(var c:Number=0; c="0" && ch<="9") || (ch>="a" && ch<="z"))
stripped_str+=my_str.charAt(c);
}

return stripped_str;
}

trace(stripChars(first_str));
trace(stripChars(second_str));
trace(stripChars(third_str));

Notice how much more concise the code is – test the movie to check that both versions of the code have the same effect. What you have done is to give the function ‘responsibility’ for the text processing. One of the advantages to doing this is that, if you decide to change the process in any way, you only have to do it in one place (within the function) – this is a single ‘point of change’. Eventually, when you have gotten into the habit of thinking this way when writing your code, you will start to anticipate the practice, rather than carrying it out retrospectively, and will save yourself a lot of time and effort in doing so.

While the above technique does make the code more efficient, it is still ‘procedural’ rather than Object Oriented in structure. Procedural programs are basically a series of instructions being executed in turn. When the movie is run, the code listed on the main timeline is executed in a linear fashion, i.e. each line is processed one after the other until the machine is instructed otherwise. To adopt Object Oriented design, we need to extend the notion of creating ‘helper’ functions, and to develop ‘helper’ Objects to carry out the processing within a movie. In the same way that we allocated the text-processing responsibility to a function, we can assign responsibility for the individual parts of an application to Objects – we can ‘delegate’.

ActionScript Object Oriented Programming Tutorial Part 2