how do you create & use global variables in edge animate?

Hi maulshre,

1) Preceding the name of a variable with var makes it local.

2) « Global » (but local to a symbol)  variable:

You can define in the Stage.compositionReady event handler a function callable from somewhere else in the Stage symbol :

instanceNum = function( eRollover)

{

  console.log( eRollover.target.getAttribute("id"));

}

Then each of the instances on stage of a given symbol yellowRect (with instance names yellowRect1, yellowRect2, yellowRect3 and yellowRect4) can have a mouseover event handler which is a call to the global function :

instanceNum( e);

3) Truly global variable (accessible from every symbol) :

Definition in a symbol (usually inside the Stage.compositionReady event handler, a good place for global stuff) :

sym.globalFunction = function()

{

  // statements

}

To call this function from another symbol :

sym.getComposition().getStage().globalFunction();

Here the variable holds a function, but it could hold a number, string, etc.

Gil

this will get ya done:

Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

     var total = 0; //this is private

     sym.globalFunction = function(value){

          //this is global you can call it by getting an instance of the symbol ie. sym.getSymbol('whatever').globalFunction(5);

         total += value;

     }

});

//Edge binding end

For example, if you increment the variable by the number of the clicked instance and display this cumulative count in a text field :

You must initialize your variable outside of the function.

Stage.compositionReady event handler :

total = 0;

//-----------------------------------------

incrementByInstanceNum = function( eClick)

{

  // console.log( eClick.target.getAttribute("id"));

  // => "Stage_yellowRect1_RoundRect", "Stage_yellowRect2_RoundRect", etc.

  var num = eClick.target.getAttribute("id").substr(16,1);

  total += parseInt( num);

  sym.$("total").html( "total " +total);

}

See that thread for explanations about the use of the event objet (eClick here) :

http://forums.adobe.com/message/5513055#5513055

Each of the yellowRect<i>.click event handler :

incrementByInstanceNum( e);

Downloadable example here : https://app.box.com/s/aiysjhmvx8eb9do60s5u

Gil

PS : it's option 2, because there is no need to communicate between symbols,

as the instances are all in the symbol Stage.

For some reason, you may actually need to call the function from inside another symbol (and not from the instances as before). New version of the same exercise with the following structure where each rectangle and the associated text is wrapped in a symbol object<i> :

To make the function accessible from another symbol, you add sym. (the parameter of substr() is also adapted to the new id)

Stage.compositionReady event handler :

total = 0;

//-----------------------------------------

sym.incrementByInstanceNum = function( eClick)

{

  // console.log( eClick.target.getAttribute("id"));

  // => "Stage_object2_yellowRect2_RoundRect" for example

  var num = eClick.target.getAttribute("id").substr(12,1);

  total += parseInt( num);

  sym.$("total").html( "total " +total);

}

Each of the object<i>.yellowRect<i>.click event handler becomes :

sym.getComposition().getStage().incrementByInstanceNum( e);

The link given above has been updated and now includes this second version.

Gil

You're welcome, Maulshre

I remember some time ago when all this made me crazy

Gil

Also you can get/set the values from a textbox (or rectangle element too) hidden or out of Stage:

// set or initialise values

sym.$("globalVariables").data("globalVariable1",0);

sym.$("globalVariables").data("globalVariable2","No");

sym.$("globalVariables").data("globalVariable3","red");

// get values

color = sym.$("globalVariables").data("globalVariable3");

Maybe is not elegant but it's simple and works fine.

http://www.w3schools.com/jquery/misc_data.asp