It’s been a long time since my last post. But that means i have been busy, so I guess that would be a good thing. Anyways, last week i was asked to teach a well-versed timeline Flash designer some scripting, in AS3. My would-be “pupil” has some years under his belt of flash use, pre-dominantly AS2, and has only been using the Flash IDE to add basic actions like, stop(), gotoAndPlay(), and placing button actions directly on the movieclip. Now, my first thought when asked about this, was “where do I start?”. So, I write this post for him and any other who can benefit from from it.
Variables & functions
First off i want to explain some scripting basics. When you code you will de dealing with variables and functions is some form or way, 99% of the time spent. So ill start by explaining the concept of these two things first.
A variable is a reference to an object. A variable can be anything, it could be a number, a string of text, a MovieClip, a text field, a list… you get the idea. But to be able to use a variable you must first declare it. The way to declare is by deciding a descriptive name of what the variable represents, and add the declaration syntax var in front of it. Like this:
var address = "123 Anystreet, 01234 Cooltown";
We have now created a reference to the a string of text, and can access that it by referencing to the address variable. Like this:
This will print “123 Anystreet, 01234 Cooltown” without the quotes, to the Flash IDE output panel. This is all neat ‘n’ cool, but you cant actually do anything with variables without using functions. So on to that.
A function is an action. A function is a block of code that will be executed every time the function has been called. Lets first create a function that will trace a message to the output panel. Like variables you have to create ( declare ) a function much in the same way, you think of a descriptive name for the function ( usually a verb ). Lets say we want to greet the world, the function would look like this:
function greet()
{
trace( "Hello World, I'm alive!" );
}
First we write function then the name, add “()” and place the code implentation of the function between the two curly brackets ( “{” and “}” ). Now that we have declared a function, we can now call it:
This will run the code inside our function, and print “Hello World, I’m alive!” to the output panel.
Arguments & data typing
Now on to arguments. A function can have arguments sent to it when the function is called. This is useful since we then can process different objects through the same code block ( the function ). Lets make a function that tells me what time it is in the output panel. Imagine the code for determining the time is somewhere else, and we are going to write the function that does the actual tracing to to output panel. So each time the new time has been determined, it will call our function and pass the new time as an argument. Like this:
function displayTime( time )
{
trace( "The time now is: " + time );
}
Now let’s try this out:
displayTime( "10:24" );
displayTime( "14:51" );
When the code is executed, you will get to lines printed to the output panel “The time now is: 10:24″, and “The time now is: 14: 51″. We have now centralized the code for displaying the time in one function, and can call that function with different time arguments.
The last basic concept i want to discuss is data typing. I think the easiest way to explain this is by first giving an example of a function that take two numbers as arguments, add them together and trace them to the output panel:
function add( firstNumber, secondNumber )
{
var total = firstNumber + secondNumber;
trace( "The total is " + total );
}
add( 5, 4 ); // Will output "The total is 9"
add( 2, 3 ); // Will output "The total is 5"
Ok, so we have a function that adds to numbers together. The way this function is written can open up for some weird results since we have not data typed anything. Imagine this scenario:
var num1 = 5;
var num2 = "Two";
add( num1, num2 ); // Will output "The total is 5Two"
Now, since we are tracing the result we can catch the error quite quickly, but imagine that our add() function is being used in some other code as part of a bigger operation. Since we have not data typed it, finding the error in a larger block of code can start to be quite hard. This is where data typing comes in. When you data type a variable you make certain that the variable only references one sort of object. You data type a variable by adding “:” and the class name of the data type you want that variable to contain, to the variable name. Here are a few examples:
var num:Number = 5;
var text:String = "this is some text";
var list:Array = new Array();
All these are legal declarations, however the next block of code will generate some errors ( and thus making you aware that you have a fault in your code):
// Error: Array is not a Number
var num:Number = new Array();
// This is legal
var text:String = "some text";
// But this isn't
var list:Array = text;
In the same way you data type a variable, you can also data type an agrument to a function like this:
function add( firstNumber:Number, secondNumber:Number )
{
var total:Number = firstNumber + secondNumber;
trace( "The total is " + total );
}
Now the above function is much less prone to silent errors. If you at anytime pass any other type of data than a Number as an argument to the function you will get an error and you will be informed exactly where the error is occuring. Makes you a happier coder, trust me…
There is one more type of data typing, and that is data typing a functions return value. Some functions can me set to return some data. When you use the keyword return the function will end executing its code and deliver the value of the object you wish to return. You declare the data type of a functions return value, by adding “:” and the class name of the data type before the first curly bracket. Like this:
function add( firstNumber:Number, secondNumber:Number ):Number
{
var total:Number = firstNumber + secondNumber;
return total;
}
var sum:Number = add( 5, 4 );
trace( sum );
Very often you will have functions that are not supposed to return anything, in this case you can omit data typing it’s return value, but if you don’t data type it, a person reading your code won’t know right away if the function was meant to not have a return value, or you simply forgot to data type it. Therefore it is a good practice to data type a non-returning function with :Void (AS2) and :void (AS3). Like this:
// ActionScript 2.0
function greet():Void
{
trace( "Hello World, I'm alive!" );
}
// ActionScript 3.0
function greet():void
{
trace( "Hello World, I'm alive!" );
}
Thats it for the basics, now on to OOP.
Object Oriented Programming ( OOP )
Now that the basics of programming in ActionScript has been discussed, i would like to introduce the basics of OOP. Instead of me writing an essay on OOP, i want to direct you to a site which I used to introduce myself into the concept. This site, which has been created by Colin Moock takes you through the concepts of classes, methods, accessors and more, in a very easy-to-understand way. This tutorial example code is in ActionScript 2.0 but the main concepts are the same in both AS2 and AS3
Here is the link: www.moock.org
Popularity: unranked [?]