Javascript referencing symbols

[pauldbabs]

I have an HTML5 Animate app that I am developing that has a hierarchical movieclip/symbol structure, there is no timeline based animation, all animation is implemented by JavaScript.

I have JS functions on the first frame of the main timeline that need to access/use symbols that are embedded in a symbol. The problem I have is accessing the embedded symbols from within various functions/methods.

The only thing I can get working is something like:

     function Something()

     {

           exportRoot.Symbol1.Symbol2.text = "replacement text";

     }

To change the text of Symbol2

However I am aware that using exportRoot is not ideal. To me it's like accessing global variables from within a function.

I have tried:

     function Something()

     {

          stage.Symbol1.Symbol2.text;

     }

This doesn't work. (but stage.Symbol1 does access the first symbol!)

Is there a more elegant solution?

[JoãoCésar]

That's what I like to do:

var that = this;
function something()
{
    that.mc.mc.txt.text = "working";
}
something();

[ClayUUID]

exportRoot and stage are both JavaScript globals, so it makes no sense for you to prefer one to the other. Using them isn't LIKE using a global variable in a function, it IS using a global variable in a function. And that's fine, because the alternative is using relative parent.parent.parent object addressing, which can be a huge pain.

You can't use exportRoot and stage interchangeably anyway, because they point to different things.

If you just don't like the look of exportRoot, you can always do something like this in the first frame:

window._root = exportRoot;

The "window" isn't necessary, but is helpful to make it explicit that the code is intentionally creating a global.

JC's example above of using a local var to store the root reference only works for code within a single frame. It's primarily an approach for implementing event handlers.

[pauldbabs · Accepted solution]

Thanks for the interesting replies.

What I decided to do is pass the symbol references as parameters to the functions.

Generally the functions are 'classes' so the symbol references are just passed once when the object is created from the class.

Then 'methods' are used to do 'stuff' with the symbols etc.

var Obj = new Obj_Class( this.Symbol1, this.Symbol1.Symbol2 );

function Obj_Class(Symbol1, Symbol2)

{

     // Some code here

     this.Method = function()

     {

          Symbol2.text = "working"

     }

     // Some other code here

}

The slight negative side is that one Class has 8 symbol references, which is a long list, but I can live with that for now.

[pauldbabs]

An addition to the answer is the following...

I had other issues regarding referencing the stage timeline with class methods or functions.

I have found that passing 'this' as a parameter of a function helps in creating local data that may include references to the stage timeline.

The parameter can be used in local JSON data structures containing symbol references and in navigating the stage timeline locally.

eg.

var An_instance = new My_Class(this);

function My_Class (root)

{

     this.root = root;

     this.Method = function()

     {

          this.root.gotoAndStop("label");

     }

}

This allows class instances to have both local and global data that they control, nicely packaged.

I think it is better than declaring a global variable like var root = this;

Especially as in the global case 'root' isn't required by all functions. Passing 'this' as a parameter helps to limit the scope.