Edge Animate CC :: Call A Symbol From The Symbol Panel And Place It On Stage?
Apr 25, 2013Can I call a symbol from the symbol panel and place it on the stage?
View 2 RepliesCan I call a symbol from the symbol panel and place it on the stage?
View 2 RepliesI have several animations converted to symbols and I want the composition to call one at random on load. These will be page header animations and my intension is use the same composition on each page that pulls an animated header at random when the page loads. I've done this with Flash using Actionscript but not sure how to code it out in Edge.
View 14 Replies View RelatedI'm working on a project in Edge Animate, however I have about zero experience with JavaScript and I can't seem to get this working without it.
Below you see the code. It's part of a Symbol situated on the Stage. What I need it to do is to play from a Label ('subFontsTitels') situated on the Stage-level. I've tried a lot of posibilities but with no (satisfying) results.
Part of the code:
Symbol.bindElementAction(compId, symbolName, "${_Button}", "click", function(sym, e) {
// play the timeline from the given position (ms or label)
sym.getComposition().getStage().sym.play('subFontsTitels');
// insert code for mouse click here
});
//Edge binding end
I am surprised at how much of a challenge this has turned into
[URL]
1. Isolated out simple functionality
2. Created a stage called 'test' @ 2600x470pxs (targeting HD monitors to tablet)
3. Set Stage to 100 percentage width
4. Added a simple shape called 'test1' > converted it to a symbol
5. Centered on stage
6. Changed Settings as per below
7. Added this into the creationComplete Code Window:
sym.$("test1").css({
width : '2600px',
margin : '0 auto',
position: 'relative'
});
THE RESULT: it is fine at 2600 viewport but for 1024 it does not center.
[URL]
'm trying to get the properties of the symbol and a text field on the stage. And I can get the width and the height of them by this script below.
-----------------------------------------------------------
var temp = "";
temp += "Width of the symbol " + sym.getSymbol("mySym").getSymbolElement().width() + "<br />";
temp += "Height of the symbol " + sym.getSymbol("mySym").getSymbolElement().height() + "<br />";[code].....
And now, how can I get position(x,y)?
Are there any web sites that shows the list of the properties?
Because I'd like to know other properties too, like rotation , opaque , show/hide, etc.
I have a symbol on the stage: symbol1.Inside symbol1 I have an image: symbol1_image1...I have another symbol on the stage: symbol2 Inside symbol2 I have an image: symbol2_image2
in composition.ready I have an action on the mouseout for symbol1:
var theTarget = sym.getComposition().getStage().getSymbol('symbol2').$('symbol2_image2');
sym.getComposition().getStage().doMouseoutGS(theTarget);
In composition.ready i have the following function defined
sym.doMouseout = function (colorTile){
sym.$(colorTile.show());
}
I cannot get this to work and I am not understanding why.If I do an alert on the mouseout function for alert($(colorTile).attr("id")); I get the correct referenc to the element I want to show but it does not actually happen
1st the setup:
General map is loaded
2. On a click event, an larger image of the region is loaded with the following code. On mouseover the name of the county appears and on click a popup (symbol) shows some info.
$('<img id="region1" width="310" height="475" src="images/region1.png" usemap="#region1">'+'<map name="region1">'+...
'<area id="Dallam" shape="rect" title="Dallam" coords="29,17,97,58"/>'+.....
3. In the popup symbol, I want the large image map to be remove on the click event of the button: "View another region" . I have the following code which does not work (the image is not removed) resulting in what you see below:
sym.playReverse();
sym.getComposition().getStage().stop(0);
sym.getComposition().getStage().getElementById("region1").remove();
how do I remove the image (large image of the region in purple here loaded as described on 2.)?
In trying to learn Edge, is there a way to return playback (play from) once an animation is complete within a symbol?
For instance, I have the main timeline that shows a symbol animation on creationcomplete, but when the animation is finished in the symbol and I hide the symbol, the main timeline is no longer playing. What would I need to do to return playback control to resume playback of the main timeline? I have a label I would like to play from on the main timeline, but I have not found a way to call the main timeline from within the symbol.
I have two buttons
btnA on the main stage
btnB is nested inside btnA
How do I access a frame lable on the main stage from btnB
I have a logic problem in my code that I need solving,
here's the bit of code which is supposed to set the text, image and link for a symbol used multiple times on the Stage.
var names = ["melz", "brom", "calm", "micj", "mick", "brir", "mato", "brym", "azin", "hugh", "nicl", "bonr", "lisa"];
var name = null;
for(var x = 0; x < names.length; x++){
name = names[x];
var initials = (name[0]+""+name[3]).toUpperCase();
var cursymbol = sym.getSymbol(name);
[Code]...
The text and image code work, however my problem is with setting the link. It always sets all the symbols to the last name in the names[] array. What I want it to do is to set the link to the personalised name in the array. So the HH button will link to hugh.html and the BM button will link to brym.html etc.
For now I'm going to play around a bit and see what happens.
Is there a way to "eval" or dynamically set a symbol name that has been parsed from XML to build a symbol path? For example, I'm trying to dynamically set a variable to the path of a sysmbol already on the stage, but it's not working correctly:
var xmlSymName = $('symName', this).text(); // where symName = "sym4" from a parsed XML node
var whatPOI = sym.getComposition().getStage().getSymbol("sym1").getSymbol("sym2").getSymbol("sym3").getSymbol(xmlSymName).getSymbolElement();
Basically I have a lot of points on a map and I'd like to be able to name the points along with other data like tooltip callouts, etc populated via XML then loop through the XML to build the points of interest on the map. If I can get the above working I can place that variable path reference into an array and grab the data from it later. But the path is not working the way I have it.
The scenario is this, I have a symbol(TitlePage) on my main timeline. Inside the symbol(TitlePage) there is a play button. How can i set a click event on this symbol that access the main timeline(stage) labels?
View 6 Replies View Related I have the following
STAGE
SYMBOL_1
DIV_PLAY
MOUSEUP(COMMAND)
DIV_STOP
MOUSEUP (COMMAND)
[Code]...
I would like to do the following:
play "SYMBOL_2" - "DIV_ANIMATION_1" - "ANIMATION_1_START" from within "SYMBOL1" - "DIV_PLAY" with the mouseup command
URL....I know that i can sym.getComposition().getStage().getSymbol("div_animation_1").play(); from within "div_play" but how do i access a point on the timeline and play from there...
If I have a symbol with its own timeline, I am familiar with targeting it with otehr elements and symbols and activating that timeline. But the symbol will also have a presence on the stage timeline - how does one play that?
I might be overcomplicating it, I thought it might just be play() on the main stage but that doesn't appear to work, neither does getStage.play() so I am doing something wrong somewhere
What is the syntax for retrieving the name of the symbol that has been clicked on?
$sym.symbolName
$sym.name
$sym.getAttribute("name");
e.target.name
e.target.symbolName
I can get e.target.id fine, but it's a mixture of Edge generated identifiers and my symbol name.
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
}
[Code]...
I tried .attr('id') and it seems not the id I want.
EDIT: indeed I want to get the selector inside myFunc
In my Composition there some cases I have to play one symbol. In a few cases it is necessary two play sequential e.g. symbol A an then symbol B. It have to look like one animation. Is there an easy way of calling?
View 19 Replies View RelatedI start with several items on the stage, each an iteration of the same symbol. When I click on one, it performs an opening animation, then pauses. When I click on another, the first symbol un-pauses on its timeline, animating back to original position, while the second one I clicked plays its opening animation till its pause. Each of the symbols can tell the already deployed symbol to "play itself off."I'm sure this was done in Flash all the time, and there's a Javascript solution.
View 3 Replies View RelatedHow to create two instances of the same symbol and change the texts and images inside the instances to have different texts (so I mean different from the other instance)?
Somehow, instead of using dynamic creation by using code, I can't manage this. Everytime I change a text inside A (instance of symbol1), the text of B (instance of the same symbol1) is also changed. The same with images. I can't figure out what I'm doing wrong here. I can't imagine symbols are always reference types, 'cause what's the meaning of having symbols then?
I have a symbol called "A." I needed 2 copies of it, so I duplicated A and renamed the new symbol to B. I now have A and B, identical copies of each other.
I navigated inside symbol A where I entered another symbol, "A1." Inside A > A1, I removed an image and added another image. No problem so far.
Then, I returned to the stage and navigated into symbol B > B1. To my surprise, the same image change I made in A > A1 already appeared in B > B1 (even though I duplicated A **before** making this change).
When I change the image inside B > B1, that same change is now present back in A > A1.
It's as if these two symbols, A and B, are mirrors of each other, even after being modified. Trouble is, I don't want mirrors. I need them to be slightly different.
I thought the Duplicate step might be my problem. I started over (both by undoing several steps and by closing and creating a new document entirely). This time, I copied A and pasted it onto the stage. I ran into the same problems.
Ok, next guess: this time, I entered symbol A and copied its elements/sub-symbols. I went back to the stage and pasted them there. Selected these elements/symbols and converted to a new symbol. Same problem!
how to apply CSS all elements of a symbol?
For example, I want to put a border around every image in a certain symbol.
I want to create on the symbol an mouse over event that address the same symbol.
i've tried
this.css("display","none");
with no success..
It is possible take action label before?
example:
Stage01, label 'home'.
Symbol01, click on Retangle01 action: Play ('home') in Stage01.
When I try to add a click event on a symbol, I can't access to the symbol, only to the parent. For example, if on the event click on a specific symbol A I add the code
var symbolElement = sym.getSymbolElement();
symbolElement.hide();
It will hide the parent of A, instead of hiding A. How do I access to A?
I'd like to use the opacity of a symbol in an if-statement. How to ask for it?
View 5 Replies View RelatedI have a crosshair like in a lightgun style game at an arcade. What code would I use to have the symbol follow the mouse, and if at all possible, could the symbol's origin be in the middle of the symbol and not in top left corner of the symbol?
View 15 Replies View RelatedI need to hide a symbol on my main stage dynamically, ie without hardcoding it on the timeline. So I tried this within an IF ELSE statement:
sym.getComposition().getStage().getSymbol("Box_Symbol").hide();
I also tried this:
sym.getComposition().getStage().getSymbol("Box_Symbol").css({"display","none"});
Clearly these are not working..
I have a keyframe where I must to upload a random series of symbols, and I do it with the script:
var myVar = Math.floor((Math.random()*6)+1);
var stage = sym.$("Stage");
var myAni = sym.createChildSymbol("Symbol_" + myVar, "stage");
myAni.appendTo(stage);
The script works fine, but, at NEXT keyframe I must load another series. The problem is that the symbol loaded in the previous keyframe is still present and the new symbol overlaps it.How can I unload or discard the previous symbol?
I'm simply trying to animate the y axis of a symbol with code. When I rollover one symbol, I'd like it to move the symbol it's inside a certain distance. Never seems to work. I've tried looking up the simple jquery syntax to change an image's y position, but it's hard to find!
This is what I have so far:
sym.$("grouped_image").animate({"top" : "+=50px"}, 500);
I'm building an animated menu in the latest version of Adobe Animate. There are 5 different animations that happen within the same box on the main stage. I have made each animation it's own symbol. I want to trigger the animations from text boxes to the left of the box where the main animation takes place. The text boxes are not apart of any of the symbols, but are just on the main stage.
When someone scrolls over any of the individual text boxes i need to play one symbol's timeline AND hide all of the other symbols from the stage.
How do I reference `this` when a symbol is clicked? I have a click event on 'alien' on the stage. In the handler, sym appears to be stage and not 'this'.
I want it to play itself (amoung other things) when clicked.
e.target gets me the element, but not the edge symbol so I can play itself.