Dynamic Movie Clip Referencing in Actionscript

June 13th, 2007 · 19 Comments

Actionscript is a language that uses what is called “Dot Notation” to reference objects. An object includes movie clips, variables, properties and functions or methods. So to refer to objects you would usually do something like:

Code (actionscript)
  1.  
  2. this.propertyName = value;
  3. this.movieClipInstance.methodName();
  4.  

For every object that you want to reference, you separate it from the previous item with a dot, hence the name dot notation.

This is great when you know what you are referencing, but what happens if you had a variable that holds a string referring to an instance name of a movie clip, and you wanted to tell that movie clip the string refers to go and play frame 10?

If you were to type:

Code (actionscript)
  1.  
  2. this.stringVariable.gotoAndPlay(10);
  3.  

It would give you an error, because stringVariable doesn’t have the gotoAndPlay method. Thankfully, Actionscript has another way to refer to movie clips, and even variables or methods and functions. This other way is known as “Array Notation”. Rather than putting a dot between each object you want to refer to, you treat it as an array (this means no dots).

Code (actionscript)
  1.  
  2. var myVar = "This is my variable string";
  3.  
  4. trace(this.myVar); // outputs: This is my variable string
  5. trace(this["myVar"]);  // outputs: This is my variable string
  6. trace(this[myVar]);  // outputs: undefined
  7.  

The first trace uses dot notation to trace myVar, and the second uses array notation. Take note of the fact that you are not putting the actual variable into the array notaion, you are putting a string of the variable name. If you try to pass the actual myVar variable into the array, it will return undefined.

When you pass a value into the array, the Actionscript is essentially searching through all of the objects that are contained within the parent object (which is the object that comes before the [. So in our examples the parent object has been “this”) to see if any of the object names match the string that is put into the square brackets.

Array notation is very useful when you dynamically create movie clips, because when this happens, you probably aren’t going to store the name of each individual clip. It’s more common to add an incremental value to the instance names of each object that is created.

Code (actionscript)
  1.  
  2. for(var i:Number = 0; i < 10; i++){
  3.         this.createEmptyMovieClip("myClip" + i, this.getNextHighestDepth());
  4.         trace(this["myClip" + i]); // outputs the reference path to each movie clip that is created.
  5. }
  6.  

As you can see with this code, no matter how many movie clips are created, the code will always trace the movie clip.

You can use array notation as many times as you need to keep referring to other values in the objects you are referencing. In the following example I’m going to create some variables to refer to, and some string variables that will hold the name of the variables I’d like to refer to. There are two things to notice in the example, the first is that I created and called a function using the array notation. The second is that you can mix dot and array notation together to reference objects.

Code (actionscript)
  1.  
  2. // create some objects to refer to
  3.  
  4. var myObject:Object = new Object();
  5. myObject.var1 = "A String";
  6. myObject.var2 = new Object();
  7. myObject.var2.var3 = "A second String";
  8. myObject.var2.myFunc = function(){
  9.         trace("function called!");
  10. }
  11.  
  12. // create variables to use in refering to other objects dynamically
  13. var objRef = "myObject";
  14. var var1Ref = "var1";
  15. var var2Ref = "var2";
  16. var var3Ref = "var3";
  17. var funcRef = "myFunc";
  18.  
  19. // refer to these objects
  20. trace(this[objRef][var1Ref]);  // outputs: A String
  21. trace(this[objRef][var2Ref]);  // outputs: [object Object]
  22. trace(this[objRef][var2Ref][var3Ref]);  // outputs: A second String
  23. trace(this[objRef][var2Ref].var3);  // mixed notation 1 outputs: A second String
  24. trace(this[objRef].var2[var3Ref]);  // mixed notation 2 outputs: A second String
  25. this[objRef][var2Ref][funcRef]();  // calls myFunc and outputs: function called!
  26.  

The examples don’t really do array notation justice, however without getting into more complex examples, requiring a bit more code, and risking confusion this is the best way to explain it. Just remember that when you need to dynamically refer to an object, this is the way to do it. Keep it in your “Actionscript toolbox”, you’ll use this some day.

Example files for the tutorial can be found on the download page.

Bookmark this with: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • Slashdot
  • Furl
  • Ma.gnolia
  • NewsVine
  • Spurl
  • StumbleUpon
  • Reddit
  • Netscape
  • YahooMyWeb

Tags: Flash Tutorials · Actionscript 2.0 · Tutorials

19 responses so far Comments

  • 1 Ged // Jul 11, 2007 at 12:32 am

    Just got over a major speed bump with this help. Thanks a gazillion. Ged

  • 2 Ged // Jul 11, 2007 at 12:39 am

    I used a loop to creat multiple createEmptyMovieClip’s, but I don’t know how to add onRollOver event to the object. Anyone know?

  • 3 Alex // Jul 11, 2007 at 8:04 am

    Glad this helped you Ged! In regards to your question about adding an onRollOver event listener to a createEmptyMovieClip, try making a movie clip variable that equals the createEmptyMovieClip. Like this:

    var myMC:MovieClip = this.createEmptyMovieClip("name", level);

    Then give the variable the onRollOver event, just like you would a normal movie clip.

    myMC.onRollOver = function(){
//do stuff
}

  • 4 Ged // Jul 12, 2007 at 2:50 am

    Thanks, that helped me write this loop of 5 pics
    - - - - - - - - -

    for (var count = 1; count<5; count++) {
		mcPic1 = "mc" + count;
		this.createEmptyMovieClip(mcPic1,
this.getNextHighestDepth());
		this[mcPic1].createEmptyMovieClip("mcPic2",
this.getNextHighestDepth());
		loadMovie("pic" + count + ".jpg", this[mcPic1].mcPic2);
		this[mcPic1]._x = 100 + count;

		this[mcPic1].onRollOver = doSomething;

}

function doSomething(){
 //do something
}

  • 5 Kris Beder // Aug 16, 2007 at 9:50 pm

    I completely forget what the dot notation method is for _parent!!!!

    There is absolutely NO reference to WHAT - and the usage of - dot notation is in Flash Help!!!!

    Thanks!

  • 6 Alex // Aug 17, 2007 at 8:00 am

    Kris, dot notation is pretty simple. All you need to do is put a dot (.) between every object or property that you would like to reference.

    this._alpha is a form of dot notation, as is this._parent._parent.gotoAndPlay("frameLabel");

  • 7 Kris Beder // Aug 20, 2007 at 11:14 pm

    Hey Alex, Thanks for the quick response. However, decompilation of others’ code has shown me that there is a simple “../” or similar dot-notation version of “_parent” - just to make more concise code. The rest of it - I know, and have been battling :) (Flash hierarchy is hellish)
    check out my latest:
    http://health.discovery.com/convergence/duggars/duggargame.html

  • 8 Kris Beder // Aug 20, 2007 at 11:16 pm

    BTW, type “more features!” while playing the game to see the full version (vetoed by the network)

  • 9 Alex // Aug 21, 2007 at 12:27 pm

    ‘../’ will work for file structure hierarchy, but I do not believe that there is anything like that within Flash. I have seen some developers do things like var p:MovieClip = this._parent so they can reference parent just by typing this.p

  • 10 Impen // Oct 24, 2007 at 1:44 pm

    Brilliant tutorial, I owe you one!

  • 11 Kamil // Jan 1, 2008 at 5:29 pm

    Greate tutorial !!!

  • 12 Entries Tagged as ‘Flash Tutorials’ « kaZetku // Feb 2, 2008 at 5:57 pm

    […] Entries Tagged as ‘Flash Tutorials’ Dynamic Movie Clip Referencing in Actionscript […]

  • 13 Nelson // Apr 16, 2008 at 8:06 pm

    Thanks a lot for this tutorial - it REALLY helped clear up in my mind how to dynamically refer to different things (something I always need to do and up until now had stuck with the eval(”something”+variable+”").property = blah blah method because I had difficulty with the array notation in the past)
    Anyway, thanks again ^_^

  • 14 Dale // Apr 24, 2008 at 11:36 am

    This is what I was looking for, but it’s not working for me.

    instanceName = this._name;
    traces OK in my movie clip, but I can’t retrieve the value in a separate movie clip. The following doesn’t trace from my second clip, I get “undefined.”

    trace (_parent[”instanceName”]);

  • 15 Sina // May 1, 2008 at 5:41 am

    yout tutorial is very helpful but I can’t get the path to an image loaded from xml to work. This is what happens when I click on the “next” button to go to next image:

    trace(currentclick);
    nextImage = galerija.drzac.thumb[currentclick].image;
    currentclick=currentclick+1;
    trace(”next: “+nextImage);

    trace returns “1″, then returns “next: undefined”

    But if I use this:

    trace(currentclick);
    nextImage = galerija.drzac.thumb2.image;
    currentclick=currentclick+1;
    trace(”next: “+nextImage);

    then trace returns “1″, and then “next: image001.jpg”, as it should - I need to get the nale of the image contained in the “thumb” clip.

    so as you see number of the “thumb” movieclip is my variable, i should be able to skip through the images by clicking a button that changes it to “thumb1″, “thumb2″, “thumb3″ etc… but thumb[currentclick] returns “undefined”.

    can you help me out? maybe i could send fla? I can’t find a solution anywhere on the net.
    thanks

  • 16 Alex // May 17, 2008 at 11:52 am

    @Dale: take the “’s off the start and end of your variable name and it’ll work fine.

    @Sina: try this->

    nextImage = galerija.drzac.["thumb" + currentclick].image;

    I just moved the thumb inside the square bracket as a string, then concatenated the number onto the end of the string.

    Your original path would have evaluated as:

    galerija.drzac.thumb.1.image

    The new code evaluates as:

    galerija.drzac.thumb1.image

  • 17 Mezz // May 28, 2008 at 4:44 am

    Hi, well im trying to write a program where you click a button and the image on screen changes. I have saved the images as movie clips but im having lots of trouble trying to write the code so that it changes the images randomly. Do you how to do this?

  • 18 Martin // Jul 25, 2008 at 7:23 am

    Very usefull tutorial!!!
    thanks!!!

  • 19 Scott // Jul 31, 2008 at 8:17 am

    Hey guys,

    I thought this was what I was looking for, but I’m not sure. I’m a bit of a newbie when it comes to scripting. I am trying to tell a drop down menu to play the off state when I click on another button, only if the menu is open. So basically I need to be able to tell which Movie clip I am inside. Does anyone have any advice for a tutorial like that?

Leave a Comment