Combining Statements into Functions

Functions enable you to reuse the same set of statements without having to rewrite the code in several places. They make your code more readable and easier to update. You saw global functions that are built in to Flash when you learned to control the timeline. Now you can create your own.

You can use the function keyword before the function name to create the block of code you are grouping together. Then all the code inside the curly brackets are run when the function is called.

function functionName(arguments) {     statement1;     statement2; }

In this example, the function is named setSkyColor. In the parentheses, the value for timeOfDay is passed to the function.

function setSkyColor(timeOfDay) {     trace(timeOfDay); }

When you write a function, it just sits there until you do something with it. To execute the code in a function, you have to call it, passing any arguments it needs to run, and then all the functionality you wrapped inside the function is performed automatically. Here, the value "dawn" is passed to the setSkycolor function already created, which causes "dawn" to be traced to the Output window.

setSkyColor("dawn");

With this syntax for defining a function, you don't have to worry about placing the function definition higher in the code than where you call it from. In fact, it can be at the end of the code or even in a class.

You can also use another syntax format called a function literal. This syntax places the function name first, and then applies the function to that name after the assignment operator. This way of defining a function enables you to change the scope of the function easily and is the most common way to create a global function that can be accessed from any timeline. However, in this format, the definition of the function must be made before you can call the function.

The syntax is as follows:

functionName = function(arguments) {     statement1;     statement2; };

For example,

this.setSkyColor = function(timeOfDay){     trace(timeOfDay); }

Passing Information to Functions in Arguments

One reason to use functions is to make your code more generalized and reusable. Rather than have a lot of different functions that do the same task but with different information, you can write one function to which you pass information and that runs differently depending on that information.

Imagine that you need to get the result of 2x10. You can write this in code as

var doubleTen:Number = 2*10;

Later on, you may need to multiply 2x6. You could write it as doubleSix:Number = 2*6, or you could see that a pattern is emerging. You could save some effort and keep your code more organized by writing a function to handle all cases where you need to double a number. Such a function would need to know what number to double. You give the function this information by passing an argument to it as in the following example:

function doubleNum(myNum){     return myNum * 2; }

You would call this function and pass the value you want to double in the same statement:

doubleNum(6); //output 12

Remember the switch statement that sets a color for the sky? You can encapsulate it into a function called setSkyColor, with an argument named timeOfDay.

function setSkyColor(timeOfDay){     switch(timeOfDay){         case "dawn":             skyColor= "dark_blue";             break;         case "morning":             skyColor= "blue";             break;         case "noon":             skyColor= "light_blue";             break;         case "afternoon":             skyColor= "blue";             break;         case "evening":             skyColor= "dark_blue";             break;         case "night":             skyColor = "black";     } }

This function could then be called when timeOfDay = "morning", like this:

setSkyColor("morning");

When this function runs, "morning" becomes the value for timeOfDay and is used in the comparisons of the switch statement.

A function can have several parameters or arguments, but if you find yourself passing a long list of arguments to a function, it may be a sign that you need to simplify your code and break it up into smaller parts. You can do this by creating a series of functions that each contain a single task and then call them from within other functions as you need them. It is with this type of interrelated system that most function-based programming is carried out.

Using Return Values to Retrieve Results

When you use built-in functions, like Math.sin(), Flash returns a value. You can save this value in a variable for later use. Here, the variable x is declared, and it is assigned the value of 5. Next, another variable (myNumber) is declared, and it is assigned the value of the result of passing x to Math.sin().

var x:Number = 5; var myNumber:Number = Math.sin(x); trace(myNumber);                // outputs -0.958924274663138

You can write your own functions that return values by using the return keyword.

function squareNumber(myNum){     // return square of argument     return myNum * myNum; }

Using the result of this function is just like using the result of a built-in function:

var x = 5; var myNumber:Number = squareNumber(x); trace(myNumber); // outputs 25

A function terminates after a line with return in it. Any code following a return line does not execute.

Scope

Scope is a term that has to do with where your variable is declared and where it can be accessed from.

A local variable has a small scope, limited to the function in which it was created. To create a local variable, use the var keyword before you set a name and value for your variable. In the following code, the variable myVeg exists only within the function getVeg.

function getVegi(){     var myVeg:String = "potato";     return myVeg; }

A timeline variable, such as the variable name in a text field on the stage, has a specific timeline scope. To change the value for a variable from a different timeline, you need to use dot syntax to target the specific timeline. Dot syntax gives you access to those other timelines. For example, you might have a movie clip with an instance name of mc2, which lives inside of a movie clip called mc1, which lives on the main timeline. When you want to access mc2, you simply call each child clip in turn.

mc1.mc2

Movie clips have independent timelines, meaning they can have their own variables and actions just as the main timeline does. When you refer to the main timeline you can use _root to set and/or control that timeline from anywhere in the timeline structure. To address the timeline inside a movie clip instance, simply use the instance name. To back out of a movie clip to a parent timeline you can use the relative addressing of _parent. All this addressing is strung together with dot syntax:

//addressing a movie clip from the main timeline mc1.mcVariable = "mc1 timeline variable" //addressing the main timeline from inside a movie clip timeline parent.myVariable = 20;

For example, you could have a variable on the stage with the name myText. You can access that variable and modify its value from anywhere in the code by using dot syntax addressing to target the variable. This function assigns a value to a variable on the main timeline:

function sayHello(){     root.myText = "Hi There!"; } sayHello();

The _global keyword makes a variable or a function accessible from anywhere in the project. The _global keyword is used only when declaring the variable. You can declare a global variable with or without assigning a value at the same time:

_global.myGlobal; _global.myOtherGlobal:Number = 42; _global.myFunction = function(){     //some code }

This function sets a variable on the main timeline (_root) as the value of the global variable. Notice that you don't need to use any dot syntax addressing when you ask for the value of a global variable.

function getMeaningOfLife(){     root.meaning = myOtherGlobal; }

When dealing with scope, the keyword this comes in handy. When used within a function, this refers to the timeline to which the function is applied. For example, if you want to call the function moveButton when the user clicks on a button, you would type in the following:

// move a movie clip 10 pixels to the right function moveClip(){     this._x +=10; } // attach moveButton function to the circle circle_btn.onRelease = moveClip;

The keyword this refers to the movie clip to which the function is attached. In this case, it's circle_btn, not the main timeline.