Tips and Hints for variable scope in Actionscript
December 31st, 2006 . by polyGeekThis tutorial is meant for Flash developers who are just starting to get a handle on scope. What follows is the simplified version. Also, this isn’t about how code on one MovieClip talks to code on another MovieClip and so forth. We’re just talking about code on one frame here.
With that said here are a few analogies that might help you understand scope.
First off lets start with a simple definition:
scope = the range over which a variable is defined.
Think of your code as a landscape. When you create a variable it has an existence in a specific place, like say down in a valley. Lets call this variable downNvalley and give it a value of, say, 3. Now if you climb up on a mountain - create a function - and you are overlooking the valley you can still see your variable. You can even yell out to it and say, “hey, Mr. downNvalley, can you add 1 to your value?”, or something like that.
That code would look like this:
output:
from climbMountain: 3
Now suppose while you’re up on the mountain - inside the function - you create a variable. We’ll call it upOnMountain and give it a value of “just smell the cool, clean, air“. As long as you are on the mountain you can still see your new variable. But if you go back down into the valley you won’t be able to see it. If you ask anyone around you, “hey, do you know Mr. upOnMountain?” They’ll say, “Nope, never heard of him.”
Here’s the code:
output:
from climbMountain upOnMountain = just smell the cool, clean, air
from the valley upOnMountain = undefined
Actually, Mr. upOnMountain vanishes once you walk off the mountain. That’s because variables created inside a function - local variables - only exist for the duration of the function. When the function is over the variables are erased from existence.
The nice thing about the mountain and valley analogy is that it translates nicely if you indent your code - the way you’re supposed to. If you think of indenting as going up on the mountain then you can easily see where your variables scope exists.
I have another analogy to toss on you, and you’ll really like this one. You know the saying, “What happens in Vegas, stays in Vegas.” Well, it’s the same with functions. Suppose you and the people you know are like variables. While you are in Vegas you can certainly call home and talk to your significant other. You can do that because the scope of your relationships at home (_root) extend to Vegas.However, if you make a friend in Vegas then the scope of that friendship exists only in Vegas. Once you leave Vegas you cannot call them and doing so would result in an error.
(Note to wife: I swear this is a totally hypothetical analogy.)
Tools to help you find your way
The first and easiest tool is good old trace(). (Note: a shortcut to making a trace statement is ESC + tr.) With Flash it’s easy to bury code god-knows-where on timelines. Sometimes you loose your way and when you do the easiest thing to do is trace(this).
Okay, so what is this?
this is a reference to the current object.
Okay, what does that mean?
If you didn’t know, everything in Flash is an object. Every MovieClip, TextField, Number, everything. So this is a reference to the object where the trace() statement is made. (Note: I almost always use something like, trace(”something: ” + this), so that if I have multiple trace() statements I’ll be able to tell their outputs apart.)
Tracing this really comes in handy when you’re dynamically creating MovieClips and loading things at runtime and you loose track of where things are going.
If you’re MovieClips are placed on the stage at authoring time then by all means use the insert target path tool in the Actions Panel. The MovieExplorer Panel can also be a big help in helping you find assets.
If you want to see an output of all the graphical objects - MovieClips, TextFields, Buttons, etc - then publish the movie and hit Ctrl - L. That will output everything to the Output Panel. It’s a little messy to read if there are a lot of assets but you can always use Find to search for the instance name you are looking for. From there you can see what the path for that object is from the _root.
Lastly, I find it very useful when I’m dynamically creating MovieClips and TextFields to document what I’m creating. I use indenting to indicate parent/child relationships and don’t forget to add the depth which the asset was created at. If you’re dealing with really large projects it’s handy to do the same thing on a white board for quick viewing.
My advice was be to always use Delegate so that you always specify the scope that your code is running in.
Not sure about mountain and valley analogy. Why would anyone reading this automatically think that mountain is a function and not the scope of another MovieClip (and therefore acessable if the path to the variable is correct) or vice versa i.e. valley isn’t created inside a function (and therefore you wouldn’t be able to access it inside the mountain function).
You know, this was all much more clear when I have an example in code. But Wordpress won’t let me do indentations and such so it sort of fell apart.
I’ll go back and do some editing to make it clear that I’m talking about functions and not MovieClips with the valley/mountain analogy.
I’m not sure what you’re getting at though when you say, “…valley isn’t created inside a function (and therefore you wouldn’t be able to access it inside the mountain function)…
That’s not true. A variable declared outside of a function is accessible from inside any function. However the reverse is not true.
var valley:Number = 3;
function mountain():Void {
trace(”valley= ” + valley);
// output: valley= 3
}
Sorry was meant to be “is” not “isn’t” i.e. the opposite to what the anology presumes.
i use the IG Syntax Highliter plugin for wordpress. Its no ideal, and i’ve even had some people moan that I use it (well one person). Migt be worth having a look at.
http://blog.igeek.info/wp-plugins/igsyntax-hiliter/
Thanks for the plug-in suggestion. I tried it but it didn’t work. Getting fatal PHP errors. Oh well, maybe I’ll look around for something similar. It would be nice to be able to put code into my pages without a huge effort.
Oh, I hope you don’t mind but I changed the link to your website to go to your blog. The URL you left goes to a page with no links. I had to Google-search your site for actionscript to find the content.
Hey hope it’s all going well! All this talk of scope brings to mind that ever useful article… I can’t believe I’m still linking to it so many years later, but I believe it is still as useful now as it was when it was written for giving people the definitive answer on this topic:
http://timotheegroleau.com/Flash/articles/scope_chain.htm
So many people now use Delegate, but they don’t even know what it does half the time (Tink not included ;) so it’s always nice to re-read this article and get back to basics. Thanks for posting this refresher, I think although the analogy might seem incorrect in some ways, giving the analogy is scope being something like “visibility” is a good one.
@Richard, thanks for the link. That was a great article. I knew that there were issues with nested functions and memory waste but I didn’t know the specifics. This is one of those articles that will take a few reads to make sure I get all of it.
I went back and did a bit of editing on my tutorial. I even debating deleting it for fear that I might be making matters worse for some. But I think that by adding the code examples back in that what I’m trying to show is a little more clear.
And I figured out that by editing my code in gmail and then pasting it into Wordpress that it will keep the indentations. That saves me from writing HTML for every damn bit of code I want to display.
FYI - It was clear enough for me to understand what was going on in my code. Thanks for the information.
@TheOnyxGuy, Thanks for the feedback. I appreciate it and I’m glad I could help.
BTW, nice work on your site.
The article was helpful to me, especially the CTRL-L output of all the object names and paths to the output panel.
Thank you polyGeek!
@Steve, Thanks. Sometimes running across the simplest things - like Ctrl+L - can make a world of difference in our everyday work. Good luck.
Leave a Reply