Skip to main content
pauldbabs
pauldbabs
Inspiring
January 11, 2018
Answered

Javascript referencing symbols

  • January 11, 2018
  • 2 replies
  • 1183 views

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?

This topic has been closed for replies.
Correct answer pauldbabs

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.

2 replies

C
ClayUUID
Legend
January 11, 2018

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
pauldbabsAuthorCorrect answer
Inspiring
January 11, 2018

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
pauldbabsAuthor
Inspiring
January 23, 2018

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.

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
January 11, 2018

That's what I like to do:

var that = this;
function something()
{
    that.mc.mc.txt.text = "working";
}
something();
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices