Adobe Community: Message List - Targeting a symbol within a symbol

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 22 Oct 2014 17:23:45 GMT

getSymbol is a native animate handle that allows interaction with the symbol while $ is a jquery handle that interact on a DOM element which you need for the click event that is jquery.

Hope this makes sense.
I am glad you got all this to work.

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 22 Oct 2014 17:06:48 GMT

Success. This worked below. I wish I could markup this code better so it was obvious where the issues lay.

The two lines which are bolded were the problem. The first bolded line was originally written the same on the second bolded line. I don't understand the difference between

sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); and

sym.getSymbol("teamgroup1").$("teamThumb1")

As far as calling a symbol is concerned… what is the difference between .$ and .getSymbol

This is the bit that worked.

// ========================== TEAM 1 ========================== //

$.getJSON('staffnames.json', function(data){

{

var s1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); // first bolded line

s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

s1.$("thename").html(data[0].thename);

s1.$("thetitle").html(data[0].thetitle);

s1.$("biography").html(data[0].biography);

//start mouse events//

sym.getSymbol("teamgroup1").$("teamThumb1").mouseenter(function(){ // second bolded line

/*change position of the name */ sym.$("thename").css ({"position":"relative","top":"0px"});

/*place JSON data in text blocks*/

sym.$("biographyareaCopy").html(data[0].biography);

sym.$("thename").html(data[0].thename);

sym.$("thetitle").html(data[0].thetitle);

sym.$("certifications").html(data[0].certifications);

// next line returns the name text back to it's 0 position. See line 24

sym.$("thename").css ({"position":"relative",

"top":"0px"});

/*alert( "hovered over a div");*/

})//close mouse enter //

//keep close outs below

}

});

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 22 Oct 2014 14:16:01 GMT

Assuming that all the elements you have are in the symbol, could you try this: (otherwise your elements' scope is wrong. You might want to put the whole scope of these elements like:

m1.$("biographyareaCopy").html(data[0].biography); which uses m1 instead of sym.

sym.getSymbol("teamgroup1").$("teamThumb1").mouseenter(function(){

// Do something

sym.$("biographyareaCopy").html(data[0].biography);

sym.$("thename").html(data[0].thename);

sym.$("thetitle").html(data[0].thetitle);

sym.$("certifications").html(data[0].certifications);

sym.$("thename").css ({"position":"relative","top":"0px"});

alert( "hovered over a div" );

});

sym.getSymbol("teamgroup1").$("teamThumb1").mouseleave(function(){

// Do something

alert( "mouse left a div" );

}),

sym.getSymbol("teamgroup1").$("teamThumb1").click(function(){

// Do something

alert( "clicked on a div" );

});

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Tue, 21 Oct 2014 19:59:58 GMT

Thanks!

I modified my code as per your recommendation and I got a partial success.

Here's the code. See he // comments.

$.getJSON("staffnames.json", function(data){

{

var s1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); //this is working it understands that the data from the JSON should be pulled into the nested symbol.

var m1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); // THIS VAR IS NOT WORKING. Lower down I'm binding a series of events attached to this m1 var. What's interesting is, in my original file shared yesterday, this worked. The only difference is that the s1 var was one level up in that case.

s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

s1.$("thename").html(data[0].thename);

s1.$("thetitle").html(data[0].thetitle);

m1.on({

mouseenter: function() {

// Do something

sym.$("biographyareaCopy").html(data[0].biography);

sym.$("thename").html(data[0].thename);

sym.$("thetitle").html(data[0].thetitle);

sym.$("certifications").html(data[0].certifications);

sym.$("thename").css ({"position":"relative",

"top":"0px"});

alert( "hovered over a div" );

mouseleave: function() {

// Do something

//alert( "mouse left a div" );

click: function() {

// Do something

//alert( "clicked on a div" );

}

});

}

});

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Tue, 21 Oct 2014 18:41:24 GMT

You just need to use the proper scope the same way as a normal symbol. So if your symbol is inside a symbol then you use:

Note I use i since I am iterating the data with a next button but you can call any element with its index.

text

sym.getSymbol('name').getSymbol('insideSymbolname').$('text').html(data[i].question);

image - with attr - change from div to img in the top left - all images are the same size

sym.getSymbol('name').getSymbol('insideSymbolname').attr('src','images/'+ data[i].image +'.jpg');

image with css - use empty div for container - images fit inside the div in at least the height or the width

sym.getSymbol('name').getSymbol('insideSymbolname')..css({'background-image':'url("images/ '+data[i].image + '.jpg")','background-repeat':'no-repeat'});

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Tue, 21 Oct 2014 18:05:35 GMT

What if we want to target a symbol inside a symbol that later needs to reference dynamic data from a json file. Like the below code block where thumb1 is a symbol inside of teamgroup1 which rests on the stage. The elements holder, the name, the title and biography are all inside the symbol thumb1 which in turn is inside teamgroup1.

We need to do it this way because when we move the timeline elsewhere we want a different set of thumbs to load with a different Json.

$.getJSON('staffnames.json', function(data){

{

var s1 = sym.getComposition().getStage().getSymbol("teamgroup1").$("thumb1");

s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

s1.$("thename").html(data[0].thename);

s1.$("thetitle").html(data[0].thetitle);

s1.$("biography").html(data[0].biography);

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 19 Feb 2014 17:37:58 GMT

Hi there,

When you create a symbol dynamically, the symbol is assigned an id by Animate.

In you case, card is the original symbol and the one that is created has a different id.

When you create an symbol dynamically, you can also assign an id to it and then use it as you would a symbol that was added to the stage manually.

Here is how to add an ID to a created symbol. When you use it, then do not forget to add the # when you use that new ID.

var newCard = sym.createChildSymbol("card", "Stage");

newCard.element.attr("id","newIDName");

// example of use

sym.getSymbol("#newIDName").$("Text").html("some text here");

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 19 Feb 2014 17:06:06 GMT

Yes! Thanks again, Hemanth! I would love to understand why yours works and mine didn't. I would think the two would be equivalent. I must not understand what getSymbol() actually returns. But the main thing is, thank you!

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 19 Feb 2014 10:36:04 GMT

try this

var r = sym.createChildSymbol("card", "Stage");

r.$("TextSym").html("H ello World");

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 19 Feb 2014 07:25:50 GMT

Thought I would try creating the card with JavaScript. So I deleted the card from the Stage (leaving it in the Symbols library) and tried the following.

sym.createChildSymbol("card", "Stage");

sym.getComposition().getStage().getSymbol("card").$("TextSym").html("Hello World");

The first line appears to work -- the card appears on the stage. But the second line doesn't work.. "Hello World" does not appear. Any idea why?

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 19 Feb 2014 06:59:38 GMT

Works for me, too! Thank you!

Re: Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 19 Feb 2014 06:54:24 GMT

sym.getComposition().getStage().getSymbol("card").$("TextSym").html("Hello World");

This is working for me.

Targeting a symbol within a symbol

forums_noreply@adobe.com — Wed, 19 Feb 2014 06:37:27 GMT

In Edge Animate 3 on the Mac, I have created a symbol called "card" which has two timelines inside it, one containing a symbol based on a text field ("TextSym"), the other containing a graphic. The text field currently just as a blank character in it. I want to change that to "Hello World". I can do this successfully when the text field is on the Stage with code like this:

sym.$("TextSym").html("Hello World");

I have tried several things unsuccessfully to target the text inside the "card" symbol:

sym.$("card").$("TextSym").html("Hello World");

sym.$("card").getSymbol("TextSym").html("Hello World");

sym.$("card").getSymbolElement("TextSym").html("Hello World");

I have also tried variations of:

sym.getComposition().getStage().getSymbol("card").getSymbol("TextSym").html("Hello World");

I have placed each of these within the creationComplete event for the Stage.

For the last one, for instance, the Chrome Developers Tools says:

Javascript error in event handler! Event Type = symbol

Files available here:

http://www.yellowtechroad.com/yellowtechroad/cards/cards005.zip

Any help will be greatly appreciated!

Mike