Adobe Edge: control a specific symbol from html page

Question

I need to control over one of my edge Symbols, from my HTML page (index.html - not the edgeActions.js page)

For example, I have an image Symbol: "sym1", and I want to hide it from the main html page. I tried:

sym.$( "sym1" ).hide();

But it doesn't work..

That's the only way I could make it work (In edgeActions page only):

  Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
         var ex1 = sym.$( "sym1" );         

         yepnope({
            both: [
                "libs/jquery-ui.min.js",
                "libs/jquery-ui.css",
            ],
            callback: function() {

         ( ex1 ).hide();
            }
         });

      });

I need to understand how can I control the symbol from the main html page with JQuery.

Answer 1

Grabbing symbols when you're outside of the edge program require you to do a bit more than call "Symbol." So let me just walk you through how to grab your symbol:

1st - You have to get a reference to the specific composition. This will generally be the class on the #Stage element. If you don't give it a specific name in Edge Animate, the default name will be something weird like EDGE-1230930194.

var myAnim = AdobeEdge.getComposition("nameOfComposition");

2nd - You need to grab the specific symbol

var mySymbol = myAnim.getSymbols("nameOfSymbol")[0]; // Because it's in an array

And there ya have it! You got yourself the symbol. If you wanted to play it in reverse for example then you'd do this:

mySymbol.playReverse();

The more interesting things to do for finer manipulation involve grabbing the underlying element like so:

var mySymbolElem = mySymbol.getSymbolElement();

And then of course you can use any jQuery methods to mess around with it:

mySymbolElem.fadeOut(5000, function(){alert("alerts rox")});

Hope that helps!

Answer 2

After Edge render to html page, all symbol will be merge with a new id name are connected by an "_". For example if you want to change an image of a symbol named "thumb01":

$('#Stage_thumb01').css('background-image',  'url('thumb_img_02.jpg')');

"Stage" is a root default container of an Edge html