AS3-101: Intro to Functions Part 1

Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials

For Flash Developers:
(If you are looking for Flex related stuff, without a timeline, skip down to “The Foundation”.)
Functions really are the building blocks of programming. They take your code off the timeline and open doors to more complex applications. For instance, place the following code on the timeline of a new Flash file (AS3), publish a preview and see what happens.

function tester():void{
 trace("something");
}

Notice that nothing happened, meaning the word “somthing” or anything else did not trace out in the console palette. This is because the function was recorded in the Flash Players memory, but not executed. Now add a few frames, say five or more, and add this line on the last frame.

tester();

Something happens now, the word “something” appears in the console window every time the playhead reaches the last frame. Flash Player will keep looping until it gets a stop() method call. So let’s do that now. Update the function tester with the stop command.

function tester():void{
	trace("something");
	stop();
}

Now notice the the play head starts on frame 1, loads the function into memory, then progresses on to frame, 2,3,4 until the last frame. Once on the last frame, the function tester from the first frame is executed from the last frame, which also tells the Flash player to stop. We can verify that the Flash Player is indeed on the last frame when tester is called by getting a trace of the current frame. I am sure you will just trust me so we can move on, but just incase you don’t, see below.

function tester():void{
	trace(currentFrame);
	stop();
}

The Foundation:
(Welcome Flex people)
Like I mentioned earlier, functions are the building blocks to applications, and like blocks different types of functions have different results. First we are going to learn about the most common function and some scenarios for it’s usage.

Note: The term Function and Method are synonymous, though Methods normally refer to the functionality built into a class or component, like Variables and Properties can be synonymous.

Note To Flex developers: you will receive a compiler warning stating that the function will be scoped to the default internal namespace. You can ether put the word “private” in front of all the function names or ignore it for now. We will talk more about this in Part 2.

function tester():void{
	trace(currentFrame);
}

Let’s look at our our function tester(), it is a basic function, it does nothing except trace out the word “something”. I can hook a button or any kind of user input to this and create an application. Most likely we will want to do something more interesting, so let’s talk usage.

The Calculator App:
Let’s say we want to build an app like a calculator. This is an elementary calculator, so we only need addition and subtraction. The calculator will need to add or subtract the numbers from two variables, numA and numB. So we write two functions one to add and one to subtract. To keep things simple we will simulate button calls by calling the functions directly.

var numA:Number = 100;
var numB:Number = 4;
var numC:Number = 0;
 
function addNumbers():void{
	numC = numA + numB;
	trace(numC);
} 
 
function subtractNumbers():void{
	numC = numA - numB;
	trace(numC);
}
 
//remove in Flex, add to init function
addNumbers(); // add button
subtractNumbers(); // subtract button

Note for Flex Developers: You will need to do the following to avoid errors.
1. place the following attribute line in the mx:Application xml tag.

creationComplete="init()"

2. then add this function and remove the floating addNumbers() and subtractNumbers() lines:

private function init():void{
	addNumbers(); // add button
	subtractNumbers(); // subtract button
}

You will have to follow this routine for the remainder of the tutorial.

So now we have a basic calculator. Let modify and optimize things by utilizing the different abilities of the function.

Arguments:
The basic function can receive data as arguments, this is important because we may want to introduce a new repeater button to our calculator but use the same functions to add and subtract. The new functionality will add numB to numC, so that the number continues to climb as the repeater button is pressed. To add this functionality without breaking the current functionality and writing the same logic (num + num) more than once we will use arguments.

This is done by declaring variables inside the parentheses after the function name. These are local variables that are only visible inside the function they are arguments for.

var numA:Number = 100;
var numB:Number = 4;
var numC:Number = 0;
 
function addNumbers(n1:Number, n2:Number):void{
	numC = n1 + n2;
	trace(numC);
} 
 
function subtractNumbers(n1:Number, n2:Number):void{
	numC = n1 - n2;
	trace(numC);
}
 
//remove in Flex, add to init function
addNumbers(numA, numB); // add button
subtractNumbers(numA, numB); // subtract button
addNumbers(numB, numC); // repeater button

The Return Value Declaration:
Another ability of a function is that is can represent data and return data. The “:void” portion of the function is where we declare what type of variable our functions will return. Which ever type we give it, the function MUST return. So let’s update our add and subtract functions one more time. Right now they both modify a hardcoded variable, if we decide to use these same functions somewhere else in our application or in a new application, then we will have to set things up the exact same way with the same variables. To make things more independent, our addition and subtraction functions will now return the new product or difference instead of updating a hardcoded variable. Our buttons will now decide which variable the new values are assigned to.

var numA:Number = 100;
var numB:Number = 4;
var numC:Number = 0;
 
function addNumbers(n1:Number, n2:Number):Number{
	trace(n1 + n2);
	return n1 + n2;
} 
 
function subtractNumbers(n1:Number, n2:Number):Number{
	var num:Number = n1 - n2;
	trace(num);
	return  num;
}
 
//remove in Flex, add to init function
numC = addNumbers(numA, numB); // add button
numC = subtractNumbers(numA, numB); // subtract button
numC = addNumbers(numB, numC); // repeater button

Now you will notice the subtractNumbers function is written in long form, that is just to show that return line can a variable or an equation. The addNumbers is the more optimized function, but if we needed something more complicated, we may have to declare a local variable like in subtractNumbers.

More information to know about using return in a function:
1. If you declare a value type to a function, you MUST return data in the proper type. In the examples below, sample A works, while sample B will show a compiler error claiming the function does not return a value. Sample B would work if we add another return to the else clause, because if it is declared, the function MUST always return a value. Replace the existing functions with the code below to test.

Sample A: (works)

function subtractNumbers(n1:Number, n2:Number):Number{
	var num:Number;
	if(n1 > n2){
		num = n1 - n2;
	}
	else{
		num = n2 - n1;
	}	
	trace(num);
	return  num;
}

Sample B: (throws an error)

function subtractNumbers(n1:Number, n2:Number):Number{
	if(n1 > n2){
		return n1 - n2;
	}
	else if(n2 > n1){
		return n2 - n1;
	}
	else{
		trace(0);
		//would work if line below is uncommented
		//return 0;
	}	
}

2. When a function returns data, everything blow that return will be ignored. In the following sample the trace call will be ignored because it is after the return.

function addNumbers(n1:Number, n2:Number):Number{
	return n1 + n2;
	trace(n1 + n2);
}

3. The following example shows how we can stop the rest of the function from executing using return. Notice this function does not have a declaration, so we do not have to return data. If n1 is greater then n2, the function returns and no values are calculated or traced. To avoid an error, you will need to remove the “numC =” from the subtractNumbers call like so: subtractNumbers(numA, numB);

var numC:Number = 0;
function subtractNumbers(n1:Number, n2:Number):void{
	if(n1 < n2){
		return;
	}
	else{
		numC = n2 - n1;
		trace(numC);
	}
}

Where To Go From Here:
Start building applications, you have the basics, now go to it. You can expand on this calculator by adding buttons and event handlers. Also it would be nice to make the repeater work with both addition and subtraction, meaning the repeater would always continue adding or subtracting based on if addNumbers or SubtractNumbers was the last function called.

Technorati Tags: Actionscript, argument, Flash, Flex, function, Howto, method, return, Tutorial, void

Other Related Articles:

• AS3-101: Intro to Functions Part 2 and Class Overview
• AS3-101: Introduction to Variables
• AS3 Loader for Loading Multiple External Files
• Hidden Marvels in Flash: Jpegs with Transparency
• Intro to MVC Part 1: The Controller Class

| No Comments » | facebook:

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment