1.5 Functions, Parameters, Return Values

This exercise aims to present functions in AS3, by using 2 different examples: one with a text message, and another with a numerical calculations.

1. First, some thoughts on functions. Functions are similar to variables, in the sense that they are a flexible way to store information. But whereas in variables the information are values, in the case of functions that information are a group of methods and actions to be executed when the function is executed.

A function is similar to a method, not only because it indicates action (and naming conventions suggest that we should name them as verbs), but also because they make use of parameters – values that are defined when the function is invoked, to be passed along to do something when it is executed. The parameters are included inside parentheses, as single parameters or as a list, separated by comma. Or one might choose not to create any parameters. The list of methods or actions to be executed are included in the function definition, inside curly brackets: “{}”.

The function might, or might not, return something. That is, you might choose to run a function simply to make something happen, or to make something happen and then use the outcome (the return value) to generate something else. A function with no return value is a void function, and should be typecast as such; a function with a return value should be typecast according to the type of return (for example, Number, String, Boolean).

Please note that variables created inside functions can only be used inside that function (they are called “local variables”).

Using functions produces cleaner, clearer, reusable and more efficient code, avoiding repetition.

2. Let’s build our exercise, using a currency conversion example. We will need 2 text fields. The following code, similar to the previous examples, creates the text fields and places them on the stage, with an adequate width and border:

var myTextField1:TextField = new TextField();
stage.addChild(myTextField1);
myTextField1.x=50;
myTextField1.y=50;
myTextField1.width = 450;
myTextField1.border = true;

var myTextField2:TextField = new TextField();
stage.addChild(myTextField2);
myTextField2.x=50;
myTextField2.y=200;
myTextField2.width = 450;
myTextField2.border = true;

3. Now let’s create some variables that we can use to play around with functions. We will create 2 strings, for the verb “Convert” in English (messageEng) and in Estonian (messageEst). Then we create 2 numbers: one for the amount of EEK we wish to convert (estonianKroon), and another for the conversion rate (eekToEur):

var messageEng:String = "Convert ";
var messageEst:String = "Muutma ";
var estonianKroon:Number = 500;
var eekToEur:Number = 0.0639;

4. Let’s now build the function to display the first text. For this function, I wish to present in the first text field the amount, contextualized in a short message. I would also like the text to be painted blue. I wish to set up a system that will allow me to easily change the language of the message.

First, let’s create our function. For that, I will use the expression “function”, followed by a name we define (in this case, “showText”). As parameter, I am defining “myMessage”, which will be replaced by “messageEng” or “messageEst” when I will invoke the function. This function will not return any value, so I will typecast it as void. In the end of the first line, I will include a curly bracket to indicate that the definition of the actions to execute will follow:

function showText(myMessage):void {

What follows is the placing of the appropriate text inside “myTextField1”:

myTextField1.text = myMessage+estonianKroon+" EEK > EUR:";

Then we will color the text in blue, using the hexadecimal value #0000FF (using a structure of pairs of RGB values, or Red Green Blue). For more on hexadecimal colors for the web and a full list, check out this Wikipedia article. The AS3 syntax for web colors replaces the usual “#” in the beginning by “0x”. The appropriate property in the TextField clss for this is “textColor”:

myTextField1.textColor = 0x0000FF;

We end the function definition by closing the curly brackets:

}

The function will not run until we invoke it, so let’s do it now, by picking “messageEng” (you can also try with “messageEst” of course):

showText(messageEng);

5. Now let’s build the function for the second text field. I will call this function “myCalculation”, and will take in the amount and conversion rate as parameters (named accordingly and separated by comma), and will return a numerical result. Therefore, I will typecast it as “Number”:

function myCalculation(amount,conversionRate):Number {

Inside the function, I will create a variable to hold the result of my calculation: amount multiplied (using the operator “*”) by conversion rate:

var myResult:Number =amount*conversionRate;

Then I will ask Flash to return that variable, and close the function:

return myResult;
}

Finally, I will ask Flash to display the result of the calculation represented by the function “myCalculation”, using my variables “estonianKroon” and “eekToEur” in the place of parameters “amount” and “conversionRate”. To display this in the text field, we should convert the result, as we saw before. This is the resulting line of code:

myTextField2.text=String(myCalculation(estonianKroon,eekToEur));

6. This is the whole code for the exercise:

var myTextField1:TextField = new TextField();
stage.addChild(myTextField1);
myTextField1.x=50;
myTextField1.y=50;
myTextField1.width = 450;
myTextField1.border = true;
var myTextField2:TextField = new TextField();
stage.addChild(myTextField2);
myTextField2.x=50;
myTextField2.y=200;
myTextField2.width = 450;
myTextField2.border = true;
var messageEng:String = "Convert ";
var messageEst:String = "Muutma ";
var estonianKroon:Number = 500;
var eekToEur:Number = 0.0639;
function showText(myMessage):void {
myTextField1.text = myMessage+estonianKroon+" EEK > EUR:";
myTextField1.textColor = 0x0000FF;
}
showText(messageEng);
function myCalculation(amount,conversionRate):Number {
var myResult:Number =amount*conversionRate;
return myResult;
}
myTextField2.text=String(myCalculation(estonianKroon,eekToEur));

The result should look like this:

Download files: ex3-functions.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 1. User Interface Design and tagged . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s