CreateChildSymbol in a Symbol

Hello, ive just stareted learning edge animate. i want to do a simple thing ( which would be for me in actionscript ) but in edge animate seems not. I just want to create a childsymbol dynamically and put it into a symbol which already exists in a symbol that is placed on stage. my code looks like this:
var mycard = $(sym.createChildSymbol(storeCardsTemp[i], "playerPanel"+playerpanelid).getSymbolElement()); - this is working fine!
but i want to go one level deeper and place it in the symbol "playerPanel"+playerpanelid into a symbol which is called "Holder".
this is what ive tried to do:
var mycard = $(sym.createChildSymbol(storeCardsTemp[i], sym.$("playerPanel"+playerpanelid).$("Holder"))); - this is not working
can anyone help me ?

no, i have a symbol which is build dynamically "playerPanel0" (f.e.) and inside of it i have a symbol named "Holder" - in "Holder" symbol i want to place the child
so somehow i need to acces sym.playerPanel0.Holder and place the child in there
ive tried also:
var mycard = $(sym.getSymbol("playerPanel"+playerpanelid).createChildSymbol(storeCardsTemp[i], "Holder").getSymbolElement());
- but still no luck !
OK FINALY IT WORKS if i write like this:
var mycard = sym.getSymbol("playerPanel"+playerpanelid).createChildSymbol(storeCardsTemp[i], "Holder").getSymbolElement();

Similar Messages

How to adress a symbol created with sym.createChildSymbol

Hi,
I want to create a symbol (as a MovieClip) when I click a button and I want to load into that symbol a Edge Composition.
This is my code:
var pageContent = sym.createChildSymbol("content", "Stage");
EC.loadComposition("cvcontact.html", sym.getSymbol("pageContent"));
That is the way I FOUND in Edge to try work as I would with Flash, loading differents swfs.
It is not working.
The console gives me that error :
[ ERROR | EdgeCommons | Core ] Error in loadComposition(). Arguments 'src' and 'sym' are not optional. EdgeCommons.js:3
b.error
Please, do you have any direction to give me where to look at ?
thanks a lot
sergio

I have another question...
After I correctly loaded my composition into pageContent, I try to put the pageContent somewhere in my page.
var pageContent = sym.createChildSymbol("content", "Stage");
pageContent.element.css({"top":200,"left":350});
EC.loadComposition("cvcontact.html", pageContent);
It does not work . I have this error :
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
Thanks for any help.

Issue Targeting Symbol Placed With createChildSymbol & TweenMax

Ok, so here's the deal. I'm moving over from Flash and trying to redo our existing Flash website, in Edge. I know with Greensock TweenMax it's possible to do what I want, but it's not working out as easily as I had hoped. I'm sure my issues are syntax/target related, but for whatever reason, it's just not clicking for me. I've read the API and it seems to make sense, but I'm still having issues. So here's my glitch/issue. Hopefully someone can help!
I have a symbol on the stage, "mcMainClip". And I want to use a nested button I made into a symbol to trigger a TweenMax tween to move mcMainClip. The Button is nested a few symbols deep on a clip on the stage at the following path, sym.getSymbol("mcHeader").getSymbol("mcMenuSystem").getSymbol("btnContact")
So when I click on btnContact, I want mcMainClip to animate on the X axis via TweenMax. I can't for the life of me get it to move when I place the clip onto the stage manually. Any ideas?
So in frustration I went another route... I decided to place mcMainClip on the stage dynamically. The mcHeader symbol I still have placed manually on the stage. But I have code in the document.compositionReady code window that looks like this:
var mcMainClip = $(sym.createChildSymbol("mcMainClip", "Stage").getSymbolElement());
That successfully generates the clip onto the stage for me. But, see if this makes sense. When I use that line of code above, it generates the symbol onto the stage and then I use TweenMax to place it and animate it as I desired. But here's the other wall I've hit. By doing this, I am able to animate it as I mentioned, however, I can't seem to then add any other symbols inside of mcMainClip. It's as if Edge can't see it. My goal doing it this way, is to then populate the contents of mcMainClip via code, the same way I would in Flash. But I can't seem to accurately add any children to mcMainClip when I place it on the stage dynamically. FRUSTRATING! So anyone... Please... Help.
-Inc

Hi,
I don't understand this line: var mcMainClip = $(sym.createChildSymbol("mcMainClip", "Stage").getSymbolElement());
var mcMainClip = sym.createChildSymbol("mcMainClip", "Stage");
// now, i want to hide this instance, so i have to use DOM.
mcMainClip.getSymbolElement().hide();
Note that Chris Gannon wrote tutos on this issue: http://chrisgannon.wordpress.com/page/2/

Why is my symbol loaded dynamically from library not working?

Hope someone could help,
The code in "Example1" work fine if the video symbol is located on the stage. But what I'm trying to do is load the video symbol from the library dynamically and that doesn't work as illustrated in "Example2".
My question is why does Example1 work and Example2 not work?
Example1:
var youtube = $("<iframe/>");
sym.$("video").append(youtube);
youtube.attr('type', 'text/html');
youtube.attr('width', '560');
youtube.attr('height', '315');
youtube.attr('src', 'https://www.youtube.com/embed/A3PDXmYoF5U');
youtube.attr('frameborder','0');
youtube.attr('allowfullscreen', '0');
Example2:
sym.myVideo;
sym.myVideo = sym.createChildSymbol("video", "Stage");
var youtube = $("<iframe/>");
sym.$("myVideo").append(youtube);
youtube.attr('type', 'text/html');
youtube.attr('width', '560');
youtube.attr('height', '315');
youtube.attr('src', 'https://www.youtube.com/embed/A3PDXmYoF5U');
youtube.attr('frameborder','0');
youtube.attr('allowfullscreen', '0');
Thanks in advanced,
-Angel

Have you tried a reset:
Hold the Sleep and Home button down for about 10 second until you see the Apple logo.

Get the ID of a dynamically created symbol from library, INSIDE another symbol.

Hi everyone,
I'm trying to get the id from a dynamic created symbol from library.
When dynamically creating the symbol directly on the stage (or composition level), there's no problem.
But I just can't get it to work when creating the symbol inside another symbol.
Below some examples using both "getChildSymbols()" and "aSymbolInstances"
// USING "getChildSymbols()" /////////////////////////////////////////////////////////////////////////
// ON THE STAGE
var m_item = sym.createChildSymbol("m_item","Stage");
var symbolChildren = sym.getChildSymbols();
console.log(symbolChildren[0].getSymbolElement().attr('id')); // ok eid_1391853893203
// INSIDE ANOTHER SYMBOL
var m_item = sym.createChildSymbol("m_item", sym.getSymbol("holder").getSymbolElement());
var symbolChildren = sym.getSymbol("holder").getChildSymbols(); // Am i using this wrong maybe?
console.log(symbolChildren.length) // returns 0 so can't get no ID either
// USING "aSymbolInstances"" //////////////////////////////////////////////////////////////////////////
// ON THE STAGE
var m_item = sym.createChildSymbol("m_item","Stage");
console.log(sym.aSymbolInstances[0]); // ok (i guess) x.fn.x.init[1] 0: div#eid_1391854141436
// INSIDE ANOTHER SYMBOL
var m_item = sym.createChildSymbol("m_item", sym.getSymbol("holder").getSymbolElement());
console.log(sym.getSymbol("holder").aSymbolInstances[0]); // Javascript error in event handler! Event Type = element
In this post http://forums.adobe.com/message/5691824 is written: "mySym.aSymbolInstances will give you an array with all "names" when you create symbols"
Could it be this only works on the stage/ composition level only and not inside a symbol?
The following methods to achieve the same are indeed possible, but i simply DON'T want to use them in this case:
1) Storing a reference of the created symbol in an array and call it later by index.
2) Giving the items an ID manually on creation and use document.getElementById() afterwards.
I can't believe this isn't possible. I am probably missing something here.
Forgive me I am a newbie using Adobe Edge!
I really hope someone can help me out here.
Anyway, thnx in advance people!
Kind Regards,
Lester.

Hi,
Thanks for the quick response!
True this is also a possibility. But this method is almost the same of "Giving the items an ID manually on creation and use document.getElementById() afterwards".
In this way (correct me if i'm wrong) you have to give it an unique ID yourself. In a (very) big project this isn't the most practical way.
Although I know it is possible.
Now when Edge creates a symbol dynamically on the Stage (or composition level) or inside another symbol it always gives the symbol an ID like "eid_1391853893203".
I want to reuse this (unique) ID given by Edge after creation.
If created on the stage directly you can get this ID very easy. Like this;
var m_item = sym.createChildSymbol("m_item","Stage");
var symbolChildren = sym.getChildSymbols();
console.log(symbolChildren[0].getSymbolElement().attr('id')); // ok eid_1391853893203
I want to do exactly the same when created INSIDE another symbol.
var m_item = sym.createChildSymbol("m_item", sym.getSymbol("holder").getSymbolElement());
Now how can I accomplish this? How can I get the Id of a dynamically created symbol INSIDE another symbol instead of created directly on the stage?
This is what i'm after.
Thnx in advance!

Target a child Symbol whith TweenMax

Hello everybody,
I need help. I placed a symbol on the stage:
sym.stop();
var eins = sym.createChildSymbol("eins", "Stage");
eins.getSymbolElement().css({
          'position': 'absolute',
          'left': 100,
          'top': 0
Now I want to move this symbol with tweenMax with a button
If I place the symbol directly on the stage from the library and
put the following code on the button:
TweenMax.to(sym.$("eins"),2,{css:{y:120, scale:1, opacity: 1}, delay:0, ease:Expo.easeOut});
everything is fine, except ChildSymbol does not move.
But this is what I want, to move a placed ChildSymbol on the stage.
I know it is a beginner question, but I dont know how to target a var whit TweenMax
Maybe someone could help.
THX
Oll

Hello and thank you for your answer but I am afraid I cant get it run. I posted a small zip file for better understanding,
maybe you could have a look at it:
http://go-motion.net//upload/examples/04/test.zip
Thank you in advance
Oll

What is the best way to delete dynamically-generated symbols from another symbol?

in the onClick handler for 1 symbol, I have:
var sandwhichQty1 = sym.createChildSymbol("sandQty1", "Stage");
another symbol inside sandQty1 has the onClick method:
this.deleteSymbol();
which works fine, deleting sandQty1. I'd like to delete it, and others, from another button, in the circumstance where users don't close them this way.
I notice that id and class are dynamically assigned to the child symbol, which makes it hard for me.
any ideas?

Hi, I did it in this way, and functions well; maybe this is not the best way, but worked for me. Obviously this code is based on the elainafineell's correct solution.
This is my scenario:
In a Trigger @ xxxxms there is that:
var i = 1;
$.each(results, function(index, element)
     var s = sym.createChildSymbol("mySymbol", "someContainer");
     // some code here
     // Creating the variable that save my new instance of mySymbol
     sym.setVariable("var_id"+i, s);
     i++;
// a global var, take care with the name
numOfInstances = i;
Then, in a click action of some button, symbol, anything that support an action, I code this:
sym.eraseSymInstance();
And, in the creationComplete, I code the function like this:
sym.eraseSymInstance = function()
          for(var i = 1; i <= numOfInstances; i++)
                         var s = sym.getVariable("var_id"+i);
                         s.deleteSymbol();
For me function well.
I hope this can be usefull for somebody else.

How do I "show" a symbol in the symbols panel, then "hide" it again?

So. I feel like this must be easier than I'm making it but I can't seem to get it right, any help would be greatly appreciated.
I need to create a bunch of robust symbols and import each of them, but I'd like to leave them all inside the symbols panel if possible (for simplicity on the main timeline and because there will be many, many of them with a ton of interactivity in each).
When I'm on the main timeline, (which is basically just a slideshow of static .png files) I'd like to have a click event "open" a symbol called from the symbols panel and then be able to "hide" it again by clicking a close button within that symbol.
Is this possible? I'm sure it is, but sym.$("symbol").show(); and sym.$("symbol").hide(); aren't working for me–unless I'm placing them on the wrong elements. Neither is .toggle();
So basically the scenario is: I'm on a particular "slide"(png) on the stage, I click it, a symbol opens up, I click around and play animations etc., close it with a close button and keep on going with the slideshow where I was before I opened the overlaid symbol.
Again, any help would be greatly appreciated.
Cheers.

Hello,
Here is a case:
var mySymbol = sym.createChildSymbol("details", "Stage");
mySymbol.getSymbolElement().css({"left": "20px", "top": "20px"});
x ==> left
y ==> top

How to add a symbol to the stage with a unique click function

I created a symbol in the Library and am loading multiples of it based on json data. However, I want to give each one a unique click function based on the json data. For example if you are the 4th symbol, you should change the color of another symbol when clicked. However, if the 5th symbol is clicked, it should be a different color. And so on.

What I would do:
add a class name for each symbol in your json file or on symbol creation.
Then use each class name and assign it a click event.
to assign a unique id or class to symbol you create use:
for (var i=0;i<data.length;i++){
var el = sym.createChildSymbol("pEl", container);
el.element.attr("id","newEl"+i);
// or for a class use el.element.addclass('className'+i);
Note when using the new id make sure you add # in name
example
sym.$('#pEl'+i).......
and a dot for the class name
sym.$('.className'+i) ..............

How to get a dynamically created symbol to delete itself on click?

Here's the setup...
I want to have a dynamically created symbol appear upon click of a hotspot. In this case, you click on a pulsating hotspot and a popup box appears.
Here's the code I'm using for that.
//Create an instance element of a symbol as a child of the given parent element
var mySymbolObject = sym.createChildSymbol("gardern_toxins_popup","stage");
So we have the symbol "garden_toxins_popup" from my library placed dynamically on the page. I would like to assign an action to the pop-up itself that allows you to remove the symbol from the stage upon click.
I feel silly for not being able to figure this out. I tried iterations of this bit of code...
//Get the stage from the composition level, get the symbol
sym.getComposition().getStage().getSymbol("garden_toxins_popup").delete();
...but it doesn't work.
So I tried thinking like I was back in Flash and tried the following...
this.parent.removeChild(this);
But no joy on that as well. Is there something I haven't addressed in this logic or am I going about it in the wrong way? Thanks!

Hi, chirpieguy-
You'll want to use the deleteSymbol() API.
http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
BTW, you should use the capitalized "Stage" to add it to the Stage - the lower case stage has a special meaning with Animate and might not give you what you want..
sym.createChildSymbol("gardentoxins", "Stage");
In the symbol itself, create a click event on a container div, then:
sym.deleteSymbol();
That being said, you don't need to dynamically create and delete an object. What you can do is to use hide() and show() on an element and use the coordinates of your click to change the CSS value of top/left of this object so that you don't have to do the object management I highlighted above.
Hope that points you in the right direction.
-Elaine

How do I add a video time trigger to control other symbols?

I would like to use a video to trigger when other Symbols appear on the Stage at different times in the video. I've used the following code:
       var vid = sym.$("VideoSymbolName")[0];
       vid.addEventListener("timeupdate", function() {
             if (this.currentTime >= 4) {
               // Do Something This code loads a symbol into a container
                  var firstS = sym.createChildSymbol("SymbolName", "ContainerName");
        }, false);
However, that loads the picture repeatedly, and several instances appear on the stage, so I tried using this code:
       var vid = sym.$("VideoSymbolName")[0];
       vid.addEventListener("timeupdate", function() {
             if (this.currentTime >= 4) {
               // Do Something This code loads a symbol into a container
                var con= sym.$("PicPortal");
                con.empty();
                  var firstS = sym.createChildSymbol("SymbolName", "ContainerName");
        }, false);
However, that makes the loaded Symbol "flash", as it is constantly loaded and unloaded in the container.
Any other ideas?
Thanks

The only method available to show current time in Keynote used Quartz Composer, however the current version of Keynote 6.2, does not support Quartz.

How to get symbol ID in Edge

I have some codes like this:
function myFunc(name) {
     var $symbol = sym.$(name);
     //I want to do something with $symbol depending on their id, for example
     //$item.appendTo($symbol);
     //so $item will append to the corresponding symbol
for (var i=0; i<10; i++) {
     var symbol = sym.createChildSymbol("MySymbol", sym.$(Stage"));
     myFunc(symbol.getSymbolElement().attr('id')); <--not working
I tried .attr('id') and it seems not the id I want. Thanks for help.
EDIT: indeed I want to get the selector inside myFunc

Hello Davide,
So i rewrite an effective code be cause i was wrong this morning.
joel_pau wrote:
How to get symbol id? sym.lookupSelector()
Creating a rectangle on Stage, sym.lookupSelector("Rectangle") returns "#Stage_Rectangle".
sym.lookupSelector("oneSymbol") returns symbol id.
Now: for (var i=0; i<10; i++) { var symbol = sym.createChildSymbol("MySymbol", "Stage")); };
So, ten children have been created.
sym.lookupSelector(symbol[0]) returns first child id.
sym.lookupSelector(symbol[9]) returns last child id.
You can write:
$( sym.lookupSelector(symbol[0]) ).hide();
or
$( sym.lookupSelector(symbol[9]) ).css(...)
for (var i=0; i<10; i++) {
            var mySymbol = sym.createChildSymbol("rect", "Stage");
            mySymbol.$("Text").html("child #"+i);
            mySymbol.$("idText").html("rectangle ID = "+mySymbol.lookupSelector("Text"));
            mySymbol.$("idRectangle").html("text ID = "+mySymbol.lookupSelector("Rectangle"));
var symbolChildren = sym.getChildSymbols();
symbolChildren[1].$("Rectangle").css("background-color","red");
symbolChildren[2].getSymbolElement().hide(5000);// ==> display:none
symbolChildren[5].getSymbolElement().css("visibility","hidden");//place is empty
console.log(symbolChildren[3].getSymbolElement().attr('id'));
==> attachments.

To delete this dynamically created symbol

Hello,
I dynamically created a symbol :
var vid = sym.createChildSymbol("video_holder", "Stage");
vid.getSymbolElement().html("<iframe src='//player.vimeo.com/video/44150607' width='500' height='281' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>");
vid.getSymbolElement().css({"margin":"auto", "top":"100px"});
the I want another button to remove that Symbol from Stage :
vid.deleteSymbol(); or sym.getSymbol("video_holder").deleteSymbol();
How to do it ?
thanks forever !
s.

1) About sym.getComposition().getSymbols().
It returns an array. So you have to browse it.
2) About vid.
This is the same name but two different variables.
Because they are only available within their own code panel.
To go further, see: http://learn.jquery.com/javascript-101/
You have to read: "scope" and "closures".
PS : je viens de voir que la vidéo est en français. Vous parlez français ?

Address dynamically created symbol

Hi - wondering how I can get the name of a dynamically created symbol (using CreateChildSymbol) so i can hide move and otherwise affect the symbols i have created.
any ideas?
thanks!

This recent thread might help you out:
http://forums.adobe.com/message/5691752#5691752
Thanks,
-Elaine

TweenMax a Child symbol

Hello everybody,
this is my last try, then I will return to a brave tweening Designer.
I asked a few times ago, but unforunately no solution at the end:
I placed a symol on stage with a trigger at the first frame:
sym.stop();
var eins = sym.createChildSymbol("eins", "Stage");
eins.getSymbolElement().css({
          'position': 'absolute',
          'left': 100,
          'top': 0
Now I know (thank you BigMucho) that I can move the symbol with te following code:
var eins = sym.createChildSymbol("eins", "Stage");
var moveEins = eins.getSymbolElement();
TweenMax.set(moveEins, {position:'absolute', left:100, top:0});
TweenMax.to(moveEins, 2, {y:120, scale:1, opacity:1, delay:0, ease:Expo.easeOut});
Whith this code I placed the symbol from the library and move it in one step.
But I want to move the symbol (eins) which is already placed on the stage (with a trigger),
whith a button afterwards.
For better anderstanding:
http://go-motion.net//upload/examples/04/test.zip
Maybe there is someone, who can imagine what I want.
Greetings form germany
Oliver

Hi, Oliver-
Here's your project that has animations done using jQuery animate(). I know this isn't quite what you're looking for, but your TweenMax library isn't loaded in your project. For more information on how to get this included, check out this forum post:
http://forums.adobe.com/message/5092621#5092621
If you're dynamically loading your symbol element, you're going to need to save the reference somewhere and then refer to it later. You can at least see what I did using your project files here:
https://creative.adobe.com/share/edac5fb5-7f14-448c-9f3f-b13fbc774ad5
As you can see, what I did was to save a variable with the symbol instance reference, and then when I wanted to use it later, loaded the variable into the current scope, then grabbed the DOM by using getSymbolElement().
Hopefully this points you in the right direction.
Thanks,
-Elaine

CreateChildSymbol in a Symbol

Similar Messages

Maybe you are looking for