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:
| ActionScript 3 code (example 1) |
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:
| ActionScript 3 code (example 2) |
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:
| ActionScript 3 code (example 3) |
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:
| ActionScript 3 code (example 4) |
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:
| ActionScript 3 code (example 5) |
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.
| ActionScript 3 code (example 6) |
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:
| ActionScript 3 code (example 7) |
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.
| ActionScript 3 code (example 8 ) |
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:
| ActionScript 3 code (example 9) |
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.
.
