Variable Scope

by ilyas usal   | filed under Flash and ActionScript

One of the first problems programmers encountered when switching from Flash 5 to Flash MX was the variables scope. What I mean by variables scope is: where do I define my variables? And from where can I have access to them. In Flash 5, everything was quite simple. Now it's a bit different, more object-oriented, but it's easy to get used to it.

Let's look at an example to see how things work in Flash 5:

// Imagine that you have defined myVar = 5 on the main timeline
// Then on your clip:
onClipEvent (enterFrame) {
  myVar++;
  trace(myVar);
}

This will return... 1, 2, 3, 4... Why? Because Flash looks for a variable called myVar in the timeline of the movie clip, but this variable was defined in the _root. That's why the variable starts from its default value: 0.

To make it work, you'd have to tell Flash where to find the variable, that is to say writing _root.myVar++; and then trace(_root.myVar). Then you'll get 6, 7, 8...

The other solution would be to define myVar in the movie clip's timeline, for example when you load the clip. I condensed the code a bit:

onClipEvent (load) {
  myVar = 5;
}

onClipEvent (enterFrame) {
  trace(myVar++);
}

Now what's new with Flash MX? Yes, dynamic event handlers. So when you declare a dynamic event handler, and you refer to variables in it, Flash will look for the variable on the timeline where the handler has been defined.

Imagine that you have this code in the first frame of your movie:

_root.createEmptyMovieClip("test", 1);
i = 5;

test.onEnterFrame = function() {
  trace(_root.i);
  trace(i);
  trace(this.i);
}

Now let's look at this. I create an empty movie clip in the _root called test, and then I initialize the variable i to 5. This variable is therefore located in the _root. Finally, we assign a dynamic event handler to the test movie clip, telling it to trace three variables:

• _root.i returns 5. This is the variable that we declared in the _root, no problem.
• i returns 5. Now we see that the i we're referring to is also the i declared in the _root, and not a variable relative to the object.
• this.i returns undefined. More than this: if we look for a variable inside the object, there isn't one.

This is one of the biggest differences between Flash 5 and Flash MX. When declaring a variable, Flash 5 checks if there's a path for the variable (_root, this, _root.mc1...), in which case everything works fine. If there isn't, he makes the variable relative to the object declaring the variable. This means that if you declare a function which manipulates a variable in a movie clip, Flash will make the variable local to the movie clip, so there won't be any problem.

When declaring a variable, Flash MX checks for the path too, and if there isn't any, it will make the variable relative to the timeline where the variable was declared. This means that if you declare a function in the _root, and that this function manipulates a variable without a path in front of it, all the objects calling this function will use the same variable at the same time.

Let's look at a concrete example: we want to make a function that increments a counter. We will declare it in the _root:

myFunc = function() {
  num++;
  return num;
}

Create two movie clips, anything you like. On the first one:

onClipEvent (mouseDown) {
  numb = _root.myFunc();
  trace("The mouse has been clicked " + numb + " times");
}

On the second:

onClipEvent (mouseUp) {
  numbe = _root.myFunc();
  trace("The mouse has been clicked " + numbe + " times");
}

When we click on the mouse, two lines appear:

The mouse has been clicked 1 times
The mouse has been clicked 2 times

This means that both functions, though called from two different objects, manipulate the same variable. Basically, they manipulate a variable in the timeline where they have been declared, not where they have been called. You can solve this problem: either you define a prototype and you can use the keyword this that makes the variable relative to the object, or you declare the function inside the movie clip.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇

- pom