Friday, 15 February 2013

Add dynamic symbols on stage with Edge Animate

I have been playing around with Edge Animate and have tried to add symbols dynamically on the stage. It took some time to get through the documentation and to get it working, so this post is for future reference and for anyone who wants to add symbols dynamically.

Step 1

Open a new Edge Animate project and save the file with the name: add-symbol. The required Edge files will be generated automatically in your saved folder.

Step 2

Import an image or create any object on the stage. Convert to a symbol (Ctrl + Y) and give it the symbol name: symbolTest. Now delete the symbol on the stage as it will be added dynamically so will not be needed on the stage.

Step 3

Open up the Actions panel (Window > Code). Click the little plus sign then select Event > compositionReady.


Your Actions panel should now look like this.


The following code below will dynamically add a symbol on the stage. The createChildSymbol() function adds a new instance of the symbol on the stage. The first parameter is the name of the symbol and the second parameter is the index. The getSymbolElements() function gets a reference to the symbol.

var s = sym.createChildSymbol("symbolTest", "Stage").getSymbolElement();
The Jquery javascript library is integrated in edge animate, so to position a symbol on the stage, you would use the following code:
s.css({"position": "absolute",  "top" : "100px", "left":'100px' });

1 comments:

Patrick Wall 10 May 2013 06:22  

Thanks for this:

.getSymbolElement();

Now everything works!

Regards

PW

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP