Edge Animate CC :: Handling Elements And Symbols (including Preloading)
Jul 26, 2013
I am trying to learn Edge Animate and I have not seen enough animations to know how this is typically handled and I searched the forum and have not found an answer either.
If you have many different elements and symbols for a project, what is the best practice for having them appear, disappear, etc. on the timeline? I ask this question not only from a performance based perspective, but also keeping in mind the idea of preloading. This is a 2 part question:
Part 1: Using elements and symbols later in the timeline:
Since artwork is always imported directly to the stage in an "always on" status, should we place a visibility OFF on every item until we need it?
or should they be opacity 0 until I need them?or should they be set to visibility hidden until I need them?
Which of these is the best option if you don't want the element / symbol visible until later in the timeline? Does it matter?
Part 2: Impact on page loading
Does the above question have any impact upon page loading speed or is this something handled in preloading?or do you need to make a special preloader?
View 8 Replies
ADVERTISEMENT
Jan 24, 2014
I've been experimenting with different ways to control the appearance of my symbols and elements.
I've seen multiple examples where people would add custom styles to the head of the html document created by edge. I've tried this, but no matter how I tweak it, I can't seem to get it to work. I've tried adding it to the existing edge runtime <style> tag, creating my own <style> tag (both before and after the edge runtime) and then adding the CSS into that, but to no avail. I have tried adding the class to both symbols and elements on the stage using both jQuery and that class form field next to the element name. I've also made sure to close out of the project before I add my styles, just in case that was the problem.
I feel like there might be some edge animate terminology/notation thing that I'm missing, because it seems like it should be a pretty straightforward process.
View 1 Replies
View Related
Jan 9, 2013
I have come across about a dozen similar discussions, but most have presented solutions that worked in earlier versions of Edge and no longer work.
I am trying to use Edge to build animations that can then be integrated into larger non-Edge projects. I would like to then be able to control the Edge timeline or Edge symbols from elements OUTSIDE of Edge, such as another link or button in the page.
I cannot seem to figure out how to properly reference the Edge stage or symbols.
I have come across several proposed solutions for referencing Edge stage, such as:
var comp = AdobeEdge.getComposition("EDGE-966604542");
var stage = comp.getStage();
var comp = $.Edge.getComposition("EDGE-966604542");
var stage = comp.getStage();
var comp = Edge.getComposition("EDGE-966604542");
var stage = comp.getStage();
and these either DO NOTHING or throw errors about either AdobeEdge or Edge or comp being undefined.
View 7 Replies
View Related
Sep 23, 2013
Is there way to revert or un group assigned symbols?
View 2 Replies
View Related
Jun 19, 2013
I am trying to make a fairly simple user interface. I have 3 buttons on stage and each button will pull out a correspoinding symbol from the library and display it on the stage.
Eg. Click btn1 and it will show content1 from the library.
So far it is working in that it shows the corresponding content but it appends subsequent content to the bottom of it. I need the content to be replaced instead.
I would prefer if I could dynamically get content from the library instead of having items on stage that are set to 'hide' and 'show'.
Note: I noticed that when you create a child symbol on stage that Edge gives it a randomly generated ID. There is some code towards the bottom that tries to rename its ID attribute. I am not 100% sure if it is even doing what I expect it to do.
var btnArray = ['btn1','btn2','btn3']
function init(){
for (var i = 0; i < btnArray.length; ++i) {
[Code]....
View 4 Replies
View Related
Oct 22, 2013
I need to activate a timeline event on a symbol with a button press on another object, then when the button is pressed again, reverse the timeline event. This will have something sliding in and out of the stage.
If the animation is placed right at 0.00 and there's nothing else, then this code works OK:
if (sym.getPosition() == 0)
{
sym.play();
}
else
{
sym.playReverse();
}
However there is other animation that plays automatically on page load, then a trigger stops all animation. The animation I need to trigger is a couple of seconds later bracketed by labels 'start' and 'stop'. So I need to code the button A to get the symbol B and animate from 'start' to 'stop' and then wait. Then on a further press to animate from 'stop' to 'start'. But I'm damned if I can get anything to work.
View 4 Replies
View Related
Oct 10, 2013
I want a command that sets a symbol's timeline position based on another symbol's timeline position.
My case: Im making a intercative animation of a room, where i have a black screen symbol ("filmepreto") with a opacity animation over my room image. That symbols adjusts de room ilumination.
I have a symbol with an animation of a curtain closing (cortina) and another one with a roof lamp that gets on or off controlled by a button. When the button that turns the roof lamp the position of the "filmepreto" must be the same of the curtain. Both the curtain animation and the "filmepreto" animation have the same lenght.
I have more things that interefere on the ilumation of the room but, if I have the code to sync the off state of them with the position of the curtain animation i think I can set everything.
View 3 Replies
View Related
Nov 7, 2013
I created 5 buttons in Edge CC that appear one after the other. After converting them to symbols, they still appear one after the other in the timeline, but in a browser preview they all appear at the same time.
View 2 Replies
View Related
Jan 8, 2014
I'd like to target all child symbol instances of my mT symbol and hide them.
Something like this (except this doesn't work):
childsymbols_d1 = sym.getSymbol("holder").getSymbol("d1").getSymbol("mT").getChildSymbols();
for(var i=0; i<childsymbols_d1.length; i++){
childsymbols_d1[i].hide();
};
I don't want to use the timeline because I have a lot of child symbols, and would like to do this operation on several other symbols.
View 1 Replies
View Related
Feb 14, 2013
I am wondering how I could control multiple symbols using classes.
So lets say I have 10 symbols on the Stage - each symbol has a class of 'box'
Using this:
sym.getSymbol('.box').play('lower');
only the first box will animate, not the other 9.
View 9 Replies
View Related
Apr 22, 2013
So my animation is a song and I'm doing like a video clip with interactivity (the interactivity is not inside at the moment).I need to have a play button so we can see (heard) on iPhone, iPad...
My problem is that the animation begin immediately behind the play button and before I press it.So the song and the animation are not synchronize.I try many things to stop the animation but nothing is working.
View 2 Replies
View Related
Nov 12, 2013
It seems that the order of symbols that I get back from sym.getComposition().getSymbols("symbolname") doesn't correspond to the order they were created or their order in the Elements table or their order in the timeline list. What determines their order in the array? How can I sort based on y position on stage or order of creation?
View 1 Replies
View Related
Sep 12, 2013
I have a parent symbol (symbolA) that contain another symbol (symbolB). when I click on the inner symbolB, I want to make it switch with a third symbol (symbolC) always inside the symbolA.
View 4 Replies
View Related
Jun 3, 2013
I have a rectangle (Named "Data") that falls down the stage on a loop. This is all contained within the symbol itself. The stage has this code in it:
var randX;
var randShouldWait;
var randSpeed;
[Code].....
This creates a nice looking randomized "shifting" as the block falls. The issue is that this code is specifically related to the "Data" object and when I duplicate the symbol it names it "Data_1" which obviously doesn't shift randomly. The goal is to have this expandable to have dozens of these rectangles at once, so Ideally I'd like to find a way to create new ones programmatically that each have individualized behavior so my timeline isn't so busy.
View 4 Replies
View Related
Aug 27, 2013
how can I call a label placed outside of a symbol's timeline in edge animate? I made a droppable symbol and now I need an action (for a button... making click) to return to the principal stage to a specific label.
View 3 Replies
View Related
Feb 18, 2014
so user error is not unlikely, but I have a small animation with 11 small circles that animate opacity and Y pos. The circles are all symbols and are being controlled (play/stop) from the main timeline. When I preview, half of them do not show up. The symbols that don't appear are consistent from preview to preview. I've looked at the Elements in the browser and they are there, they just aren't animating.
So I thought I would just recreate the "bad" symbols and their animations, but they are still not animating in my preview. When I play the timeline in Edge Animate evrything is fine.
I've tried it in Chrome, Safari and Firefox (all latest releases) with the same result.
Is there a symbol bug in Edge? Is there a method of creating symbols that I should be using (other than draw, cmd-Y and edit symbol timeline)?
View 7 Replies
View Related
Aug 19, 2013
So I have an interactive piece with several shapes. There are about 5 rectangles, 3 horizontal and 2 vertical. For aesthetics and to fit them all in the space (stage), they overlap slightly. Whenever you mouseover a single rectangle it pushes the other rectangles away and a text bubble appears. When you mouseout, the text box goes away and the rectangles return to their original position. This worked without glitches when I applied it to the first rectangle. Now that I'm applying this to all of the other rectangles, I'm running into trouble. I'm thinking the trouble is with the overlapping portion. If you hover one rectangle where it overlaps another rectangle for a split second it plays the correct animation but then I think it tries to also play the animation for the other overlapping rectangle that appears underneath.
So my question is, what is the best way to remedy this problem? On mouseover can I temporaily disable mouse events for the other rectangles once one has been triggered? And then maybe re-enable them on mouseout? Is there a way for the rectangle that is visually on top to be the one that recieves the mouseover event?
View 3 Replies
View Related
Aug 15, 2013
I have a project in Edge with a couple of screens as symbols on layers in the main timeline. I've been trying to write a function in the global scope that I can call from all the buttons, to show and hide screens.
So far I have a function that looks like this:
function mainScreenOut (){
sym.$("screen1").hide();
}
But this and many variations don't seem to work. how to use these jquery commands properly?
View 5 Replies
View Related
Oct 4, 2013
I need to apply the very same motion path to multiple objects. Is there a way to copy the motion path from a symbol to another? I can't find a way to do this.
View 1 Replies
View Related
Jan 23, 2013
I'm trying to use ".createChildSymbol" to bring my symbols from the library to my stage. And in each symbol I have an OUT label, so every time a new symbol is called by a particular button, the last one plays from OUT label and new one appears at the same place. It's all easy for two symbols and I do not need to set any vaiable for them. But I have almost 180 symbols, and a menu of buttons to call them, so every button needs to play the OUT label of the current symbol and also plays the new one and make it as the current one.
sym.test = sym.createChildSymbol("test", "Stage");
sym.getComposition().getStage().setVariable("current", "test");
var current = sym.getComposition().getStage().setVariable("current");
sym.current.getSymbolElement().css({position:'absolute', display:'inline-block', top:167, left:91});
View 14 Replies
View Related
Oct 7, 2013
I have a dozen or so animated symbols on the stage and I'd like a randomly called one to play each time users click a button.
View 6 Replies
View Related
Sep 22, 2013
I have two symbols nested. On mouse over, the first symbol saturates the image, and moves it down. The second symbol makes the image cycle through three pictures. On mouse off, the slideshow stops, the image desaturates and moves up. This works really good!
I have a button below it, that when pressed, starts the timeline of the first symbol (saturates the image, and moves it down). This works great...but when I hover over the image, (after clicking the button), it snaps back up, and is desaturated. I'm not sure why it does that...I want the image to stay where it is!
View 5 Replies
View Related
Nov 5, 2013
I'm having trouble with some of my animations. Althought they all work fine (there currently 4 individual animations based around click and play symbols) and the positions are correct on the stage, when I preview them or publish them, some of the symbols shift to a completely irrelevant position for no dicernable reason. When clicked, the animations all take place in the correct position and remain there.
View 3 Replies
View Related
Mar 24, 2014
I have like 12 symbols on the stage. They al have images in them in JPG format, saved at a quite low percentage in quality.The symbols are being animated seperately but it looks very sluggish.
I am recreating a whole Flash site in Edge. Everything works (amazing) fine except I am missing the function like it exists in Flash:“Display/ Render/ cache as bitmap”. (see image) This function used to BIGTIME in Flash too.Now how can I do something similar in Edge?I do not want to animate all symbols as 1, it is essential they are animated separately.Is this possible in Adobe Edge Animate? Is there something similar in Javascript/ Jquery?
View 1 Replies
View Related
Mar 5, 2014
1. I have my timline. There is a button. I have made a symbol. This symbol should not be visible at the start. If I click the button it should make the symbol visible and start it.
So... What is the code I should give my button? Should the sybol be on the timeline? Should it be turned off or should I just turn off autoplay?
What I have so far is:
The symbol is in the timeline. It is set "on" and I can make it play with:
sym.getSymbol("mySymbol").play(0);
So far so good. My problem now is that the symbol should be over my button. So it is not possible to press it. So logically the symbol should be turned "off" (then I can click the button under it) and when I click the button the symbol should turn on and then play. So actually what is the code to turn it "on"?
2. I have a button in a symbol. Can this button controll the main timeline. It should for example got to frame Number 30 on the main timeline. Is that possible? What is the code I have to give the button?
I tried so many stuff and it wont work. I am new to edge and java script etc.
View 6 Replies
View Related
Jul 27, 2013
I've created a number of child symbols in a for loop for each of the data elements in my local json file. However, based on key pressed (up/down/right/left), css property of a particular child symbol only needs to be changed/highlight... how can i access an earlier created child symbol ?
What i'm trying to create is that based on arrow keys, i can select/highlight (by changing css property) a particular child element only. (similar to traversing cells in an excel sheet -top/down/right/left)..
View 1 Replies
View Related
Apr 6, 2013
The Elements window in Edge Animate seems to be unstable. When I right-click in the field to modify an asset, Edge often crashes with the resulting error message:
Edge Animate - Exception An error occurred. Please save your work and restart Edge Animate.
It happens quite frequently (~7/10 right-clicks)
View 4 Replies
View Related
Dec 11, 2013
I did take a class for it in college so I know the basics, but still learning. I am trying to create a very basic animation where I have 2 assets that begin off the stage on either side. I would like the elements to slide in from the sides and meet in the middle with about a 20px overlap. I tried setting a keyframe for both elements at 0 seconds and setting the X translations to -2000px and 2000px and then setting another keyframe at 5 seconds and changing the X translations to 48% and 52% respectively. This got me the desired effect, but only because I have such a large monitor. If the browser window is resized or the screen is smaller, the effect does not stay the same due to using percentages to center the elements.
is there a way to animate elements to the middle of the screen without percentages(maybe by using margin:0 auto or something)? Or is there a way to accomplish what I am looking for so that the positioning of the elements is the same regardless of browser window size?
View 1 Replies
View Related
Dec 23, 2012
I have a particular SVG image and I want to manipulate a particalr line within it. For example I want to rotate it, or to bend it.
How can I do this using Edge Animmate?
Is this even possible to do using only WSIWYG tools, or I had to dig into some JS code?
View 1 Replies
View Related
Jul 7, 2013
There are several elements on the page. When there is one group or element on a page, i find it difficult to select other elements.
i know hiding the element would allow me to select other elements. But I need to see other elements when working on the image.
View 1 Replies
View Related
Apr 2, 2014
how to apply CSS all elements of a symbol?
For example, I want to put a border around every image in a certain symbol.
View 1 Replies
View Related
