This article is meant for those who attend the class IKT2 at Vågsbygd VGS, yet it is still written in english in case anyone else wants to read this post. I do not claim to be an expert on the subject, yet I’ll try here to describe the basics of functions, parameters and return types in AS3.

Functions

A normal function in AS3 has the given syntax:

1
2
3
4

function funcionName(parameters):returnType
{
      //Do something
}

As many of you already know, you declare a function using the keyword “function“. The point of a function is often to stack together some code that you want executed several times. Simply to make shure that you don’t need to retype that code for every time you want it to execute. An example, if you would need to type code to check wheater or not the answer was correct to a question for every possible method of answering that question, you would need to retype the code several times, thus leading to greater chance of mistyping something. For instance, you would want the question to be checked if the user clicks the enter key, the tab key and the answer button. This is simply done with a “checkAnswer” function, but if you don’t know how to write your own functions, and how functions work you would have a problem.

Lets continue working on that verry problem. The answer to the question is 18, and the input-field is called “answerText”. The code to get the answer from the user looks as following:

1

var ans:String = answerText.text;

This is pretty straight forward. As you can see this only get the answer back as a string, but even though I’m interested in checking if it’s a number, I’m not going to make any mathematical opperations with the number, therefor I don’t convert it into a number. The check I want to do is also realy simple:

1
2
3
4
5
6
7
8

if(ans == "18")
{
     //The answer was correct
}
else
{
     //The answer was wrong
}

This is the basic layout of our function. First we reed in the input, than we check to see if it’s correct, than we act based on that. If we now had a button that we could click to cause the answer to be checked, and that button was called “checkButton”, the code to do all what I have described would look as folowing:

1
2
3
4
5
6
7
8
9
10
11
12

function checkAnswer_Click(evt:MouseEvent):void
{
     var ans:String = answerText.text;
     if(ans == "18")
     {
          //Do something with correct answer
     }
     else
     {
          //Do something with wrong answer
     }
}

If you’ve read my article “About an event” this should look familiar to you. What this function basically does is wait for a button to be clicked, than it reads in the answer and controls that it is equal to the string “18”, than it acts based on that. Now what if you wanted to do the same thing if you pressed the enter-key as well? You would have to retype the whole function once again. If you ever have to do that, there should ring a bell for you. If you ever find yourself retyping functionallity, put it in a function!

Ok, lets extract the functionallity out of this function (witch is basically everything) and put it in a seperate function like this:

1
2
3
4
5
6
7
8
9
10
11
12

function checkAnswer():void
{
       var ans:String = answerText.text;
       if(ans == "18")
       {
           //Do something with correct answer
       }
       else
       {
           //Do something with wrong answer
       }
}

As you can see this code looks nearly exactly the same as the code I posted above. Now one could simply put “checkAnswer()” inside the event-function.

Parameters

Parameters is used to pass data to functions. You’ve alreaddy garanteed used them, but you may not know about it. When you use the function “Math.sqrt” for instance, you pass it one parameter, a number, that it returns the square root of. When you use “addChild” you pass a parameter of the type MovieClip or Sprite or any other IDisplayable object. Parameters are simply what you put between the parenthesis of a function-call. This means that in the event-function i posted (example 4), the evt:MouseEvent is the only parameter. Parameters are seperated by a comma, so if I wanted more parameters I’dd just write “param1:Type, param2:Type, …, paramN:Type”. When I create functions like this I don’t like to fix what the input are like I’ve done in example 5. The example 5 only generates an answer based on the input in the answerText text-field.

Now, what if I wanted to be able to check several text-fields whith this one function? How would I go about doing that? First of all, the function would need a parameter. This parameter would need to be a string (we are to check if a given string is equal to “18”). This can be done pretty simply. The next example shows you how.

1
2
3
4
5
6
7
8
9
10
11

function checkAnswer(ans:String):void
{
       if(ans == "18")
       {
           //Do something with correct answer
       }
       else
       {
           //Do something with wrong answer
       }
}

This too is pretty straight forward. The code is nearly exactly the same. Now you would need to use “checkAnswer(answerText.text);” to act based on the answer. This is a good thing, because if we later on wanted to use the answerText2 input-field, all we had to do was call “checkAnswer(answerText2.text);”. This would mean less coding, whitch in general is a good thing. The second good thing about this is that one could easely modify that you would check to see that it’s “19” instead of “18” by replacing it inside this one function. If you had several functions dooing the same thing you would have to search for every “18” there was, and replace it with “19”.

Return types

Return types is used to tell what a function is to return. As with a variable you can set the type of a function. In fact, with the new version of flex I think you have to use return types. All of the functions I have posted above have the return type “void”. This means that the function dosn’t return anything. Void is probably the most common type of function. In the previous example (example 6) we made a function that takes a parameter and acts based on that parameter. For instance we could have it set the text at resultText1 to “Correct” or “False” depending on the if-test. However; if we are to use this function to controll several input-boxes, that would look bad. No matter if we had 3 input text-fields it and 3 result text-fields it would always be the first result text-feild that would display “Correct” or “False”. One thing we could do to make this better is add a second parameter to the function. This parameter would be of type “TextField” and we would pass in the text-field we would like to change the text of. This could be done quiet easely like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// checkAnswer function
function checkAnswer(ans:String, resultTxtFld:TextField):void
{
        if(ans == "18")
        {
            resultTxtFld.text = "Correct";
        }
        else
        {
            resultTxtFld.text = "False";
        }
}

//Setup listeners
answerButton1.addEventListener(MouseEvent.CLICK, ansBtn1_Click);
answerButton2.addEventListener(MouseEvent.CLICK, ansBtn2_Click);
answerButton3.addEventListener(MouseEvent.CLICK, ansBtn3_Click);

//Click events
function ansBtn1_Click(evt:MouseEvent):void
{
        checkAnswer(answerText1.text, resultText1);
}
function ansBtn2_Click(evt:MouseEvent):void
{
        checkAnswer(answerText2.text, resultText2);
}
function ansBtn3_Click(evt:MouseEvent):void
{
        checkAnswer(answerText3.text, resultText3);
}

This example shows one way to do the trick. However, what if we wanted to go to frame 2 when the the answerButton3 was clicked and the answer in answerText3 was correct? How would we go about doing that? This is a classic example of when it’s a good idea to use another return type than void. Here we would like to know wheater or not the test actually passed. So basically we need the function to return true if the test passed and false if the test failed. A true-false variable is called a Boolean. To return somthing from a function you simply have to type “return <var>;”. One thing that is worth mentioning is that when the code reaches a return statement, it stops executing that function. This means that any code below in that same function will not be exicuted. You can think of it like a break (The differences and similarities between for, while and do…while (AS3)), only for functions.

This in practice means that insted of using “if() { return true; } else { return true; }”, we can use “if() { return true; } return false;”, because when the executor reaces the return-statement no more code is executed. This means that if the test runs clear, the executor reads the code “return true;”, than it returns true and breaks the function. If not the test clears, the executor reads the “return false;”. It than so does. This saves us a couple of lines with code. The next example shows how I could rewrite the previous one to fill my new needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// checkAnswer function
function checkAnswer(ans:String):Boolean
{
        if(ans == "18")
        {
            return true;
        }
        return false;
}

//Setup listeners
answerButton1.addEventListener(MouseEvent.CLICK, ansBtn1_Click);
answerButton2.addEventListener(MouseEvent.CLICK, ansBtn2_Click);
answerButton2.addEventListener(MouseEvent.CLICK, ansBtn3_Click);

//Click events
function ansBtn1_Click(evt:MouseEvent):void
{
        if(checkAnswer(answerText1.text))
        {
            resultText1.text = "Correct";
        }
        else
        {
            resultText1.text = "False";
        }
}
function ansBtn2_Click(evt:MouseEvent):void
{
        if(checkAnswer(answerText2.text))
        {
            resultText2.text = "Correct";
        }
        else
        {
            resultText2.text = "False";
        }
}
function ansBtn3_Click(evt:MouseEvent):void
{
        if(checkAnswer(answerText3.text))
        {
            gotoAndStop(2);
        }
        else
        {
            resultText3.text = "False";
        }
}

Like this we have much higher controll over what happens at the cost of some more coding. Notice however that I put the checkAnswer functioncall directly inside the if-statement. This is because the checkAnswer returns a Boolean, witch is what the if-statement expects. In fact, when you use “==”, “<”, “>”, “>=”, “<=” or anything similar to that, what you do is return a Boolean. If the checkAnswer function did indeed return a string i could use “if(checkAnswer(‘18’) == ‘test’) { /* Do something */ }”. This said, there is one small change I could do in the checkAnswer-function to remove some lines of code. To make the checkAnswer-function as small as posible I would change it to this:

1
2
3
4

function checkAnswer(ans:String):Boolean
{
        return (ans == "18");
}

That’s all for this time. If you’ve got any questions, please leave a comment.

This article is meant for those who attend the class IKT2 at Vågsbygd VGS, yet it is still written in english in case anyone else wants to read this post. I do not claim to be an expert on the subject, yet I’ll try here to describe the basics of events in AS3. Also I will touch the subject of Object Orientet Programming (known as OOP).

Eventbased programming

When you’re programming in AS3 against Flash or Flex you want to use an event oriented approach. If I recall correctly the other way of doing things is called flow-based, and you do not want to use that approach in flash. If you are, than I am almost certain you are doing something wrong. Event-based programming means you’re not actually doing anything until an event happens. This might be that a user clicks a button, or a file is finished loading. Events all have certain similarities, their all Event. To truly understand what this means you need to have a basic understanding of the Object Oriented Programming. I’ll explain a bit about that later, but for now, just know that all events are (in flash) Event. The great thing about all events being Event is that once you learn to use one of them, you should in theory understand them all. One similarity all event-funtions have (at least all of witch I’ve seen) is that they all except one parameter of the type Event, and they all return void (nothing). The basic syntax of a event-function is as following:

1
2
3
4

function eventFunc(param1:Event):void
{
    //Do something
}

This is a normal event and could be used for every event-type there is. Many of you would probably call the local variable evt instead of param1, I only called it that because I would like to show you that the naming of the local variables does not affect the code. I could have called param1 anything that is a valid variable name. If i wanted to I could call it eventParam1, or e, or nearly anything else. I will explain this furter in the article “Functions, Parameters and Return types“. Just know for now that you can name it whatever you like.

Another thing probably none of you have seen before is the :void at the end of the declaration of the function. This tells what the function should return. Now this too I will talk about in “Functions, Parameters and Return types”, but know for now that nearly every event (I haven’t seen any exceptions on that yet) returns void (witch means nothing).

Object Orientet Programming (OOP)

AS3 is an Object Orientet Programming language. The OOP aproch tries to use a object oriented model that looks like the one that exists in the real world. The point is that objects inherit from eachother. Like in the real world. A cat is an animal, and contains every feature and actions that an animal contain, and animal is a living creature and so on. This has several benefits. For instance, if I asked you to come to my party and bring a cat, any cat would do. I wouldn’t care if the cat was black or white, small or big. The same way if I asked you to bring an animal, you could bring any animal you could think of. OOP acts the same way. If it expects an animal, and you bring it a cat (witch obviously is a animal), AS3 wouldn’t even think twice before proceeding with what it should do. However, if AS3 is expecting a cat, and you give it an animal you would get an error.

There is another great benefit of using a OOP-language. Because the language is OOP and objects inherit from each other, there is also a building-block witch is at the bottom. A object-type that every other object-type inherits from. And this is the Object. Every object-type in AS3 inherits from Object. That means that that every variable we use in AS3 is an Object. That means that the following code is valid:

1
2
3

var var1:Object = "123";
var var2:Object = 123;
var var3:Object = new MovieClip();

You wouldn’t expect that, now would you? Object itself also have som methods. The most usefull of them is the method toString(). This means that all objects can be represented as a string. This is actually what happens when you run a trace statement on an object. Trace calls toString() on the object and then displays the result in the output-window. The next code is also valid (given that you’ve alreaddy ran the the previous code):

1
2
3

trace(var1.toString()); //123
trace(var2.toString()); //123
trace(var3.toString()); //[object MovieClip]

The comment shows what each line will output. Object also contains some other methods, but I wont get into those now. I rarely use them anyway.

Event

As I said in the start, every event is an Event. That meas that every possible event (MouseEvent, KeyboardEvent, ProgressEvent++) inherits from Event. That means that the function I wrote at the top of this page (example 1), can be used for any event there is. The Event object has some methods and properties that truly are usefull. I won’t discuss all of them, but I’ll try to show you the ones I find most usefull.

Properties

target

“The event target. This property contains the target node. For example, if a user clicks an OK button, the target node is the display list node containing that button.” (Source Adobe Live Docs). This basically means that target contains the target of the event. If the event is that a user clicked a button, the target property of the event would contain that very button.

Methods

preventDefault()

“Cancels an event’s default behavior if that behavior can be canceled.” (Source Adobe Live Docs). The preventDefault is used for instance if you have a link, that when you click it opens a web page, than one time you discover that if var a < 5 you don’t want to open that web page. If that is the case, simply check if a < 5, than call preventDefault();

stopPropagation()

“Prevents processing of any event listeners in nodes subsequent to the current node in the event flow. This method does not affect any event listeners in the current node (currentTarget). In contrast, the stopImmediatePropagation() method prevents processing of event listeners in both the current node and subsequent nodes. Additional calls to this method have no effect. This method can be called in any phase of the event flow.” (Source Adobe Live Docs). The stopPropagation method is used to make sure that the event is not called again. For instance, if you put a button inside a movieclip that lies on the stage and you click the button, click is first called on the button, than on the movieclip, than on the stage. However, if you call stopPropagation on the movieclip, click is never called on the stage.

Event-functions

The functions that is used at events are in many ways similar. I showed you one at the top of this article that could be used to any event at all, yet I would like to show another example. The next example is a flash-movie with two movieclips (mc1 and mc2). When I click any of the movieclips I want the clicked one to schrink by 10px width and 5px height. The code for this could look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

mc1.addEventListener(MouseEvent.CLICK, mc_Click);
mc2.addEventListener(MouseEvent.CLICK, mc_Click);
function mc_Click(evt:Event):void
{
    try
    {
        var mc:MovieClip = MovieClip(evt.target);
        mc.width -= 10;
        mc.height -= 5;
    }
    catch(e:Error)
    {
        trace("An error occurred!");
    }
}

This example is pretty simple. What most of you probably havn’t seen is the try{} catch(e:Error){} block. Try works as follow:

• The program tries to execute the code in the try-block. If anything fails it jumps to the catch-block right away.
• The catch-block is never executed if no error occurred in the try-block.

This article is meant for those who attend the class IKT2 at Vågsbygd VGS, yet it is still written in english in case anyone else wants to read this post. I do not claim to be an expert on the subject, yet I will try to describe the differences and similarities between the for-loop, the while-loop and the do…while-loop. I will also comment on the switch-case. Last I’ll briefly go trough break and continue. If anyone has any questions or comments, please write them in english, or they will not be answered.

The first one you learn and the easiest one to use is the while-loop. It is pretty straight forward. It is used to do something (whatever you like) while a statement is true. The syntax of the while-loop is like this:

1
2
3
4

while(condition)
{
    //Do something
}

The while loop can be used to do something a number of times. For example the next code will trace out every number between 0 and 15 (including 0, not including 15).

1
2
3
4
5
6

var i:Number = 0;
while(i < 15)
{
    trace(i);
    i++;
}

However, when itterating through something like this it is much more common to use the for-loop. In cases like this, there is no difference except the syntax. This example does exactly the same as the previous one, only it uses the for-loop instead of the while-loop.

1
2
3
4

for(var i:Number = 0; i < 15; i++)
{
    trace(i);
}

As you can see, this is done with a lot less code, yet the result is exactly the same. The syntax of the for-loop is as following:

1
2
3
4

for(initilization; condition; incrementation)
{
    //Do something
}

I realize that the name “incrementation” is not correct, yet it’s the best I can come up with. The point is that you do something several times. I usually use the for-loop instead of the while-loop, except when it’s something I can’t count. For example if I’m reading a file, I use a while loop as long as there’s still something left to read. Other than that I use the for-loop.

Occationally you want to make shure something happens at least once. In that case you’ll want to use the do…while-loop. A good example of this is if you wan’t to calculate a random number between 1 and 6, yet you don’t want it to be 5 or 3. I would do that like:

1
2
3
4
5
6

var rndNum:Number;
do
{
    rndNum = Math.floor(Math.random() * 6) + 1;
}
while(rndNum != 5 && rndNum != 3);

This first creates an empty variable called rndNum, then it keeps generating a new random number until rndNum is not equal to rndNum 5 or 3. Here I use the while-loop because I don’t know how many times I need to recalculate rndNum. It might be none or it might be a hundred.

Last I’d like to give a simple example of the switch-case condition. The switch-case is only used for special cases. I only use the switch-case when I KNOW that the input is going to be one in a range of others. For instance, if I asked you for a number between 1 and 10, and would treat you differently based on your result, I’d use the switch-case. I better example is a simple program where the user is asked to enter a number (a choice) between one and three. This could be used for a menu (press 1 to save, press 2 to load and press 3 to exit). For example like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var input:Number = Number(inputField.text);
switch(input)
{
    case 1:
        //Save
        break;
    case 2:
        //Load
        break;
    case 3:
        //Exit
        break;
    default:
        //Display "incorrect input"
        break;
}

Thats basically it about the switch-case.

Two more things that is needed to be fully able to use loops and switch-case statements is the understanding of break and continue. The break is used to exit a loop. For instance the next loop will only trace out the numbers 0 to 10 (including 10), even though the loop itself looks like it is to trace out 11, 12, 13 and 14 as well.

1
2
3
4
5
6
7
8

for(var i:Number = 0; i < 15; i++)
{
    trace(i);
    if(i == 10)
    {
        break;
    }
}

There actually isn’t anything more to it. All the break does is exit the loop it’s in. One thing worth mentioning though is that the switch-case is also treated as a loop in that aspect. That’s why we always use break before the next case, to make shure that when it has done what it was meant to, it exits the switch-case.

The last topic is the continue statement. It is used to skip the current loop-run. This next code will trace out every number from 0 to (including) 14 exept the number 5.

1
2
3
4
5
6
7
8

for(var i:Number = 0; i < 15; i++)
{
    if(i == 5)
    {
        continue;
    }
    trace(i);
}

The continue is hard to explain, and from my experiece rarely used, yet it might be useful to know. However, you should be careful when using it with the while-loop.

That’s about it for this time. If you have any questions, please leave me a comment.

Special thanks to:

• Eirik Løhaugen Fjærbu
• Johanne Rasmussen