Edge Animate CC :: Animating Elements In Layers As They Overlap?
Feb 6, 2013
I have managed to make some animations to include them in Adobe DPS for Ipad. Right now I have a doubt and I don't know how to solve it.
This is a map of Europe with some countries. I want to start the preentation bringing them one by one to the forefront by enlarging them and then reducing them again. ("Here comes Germany, Now, France..." and son on).
No big trouble. But the rub is that, as each country is in its own layer, some of them enlarge all right but some others are partially hidden by their neighbours when enlarging, as they are under those, in a lower layer. All the countries has been arranged in Illustrator and imported as SVG into Animate layers.
The question is: Is there any command to force an element in a layer to act, move or go 'forward' even if it is under the other one?
i want animate the menu wordpress using edge animate.i already create animation, and the place is in header, when i click i want the menu will show and hide..
How can I access Symbols on Stage so I can Manualy code JavaScript functions to Animate them? My goal is to code everything in the main Action panel like how ActionScript codes run the functions to animate Symbols on Stage on addEventListener()
My understanding is instead of ActionScript language, now you code with JavaScript instead in Action Panels. but my JavaScript functions or command lines doesnt work...
Scenario: I want to relocate the SampleSymbol when a button is Clicked
Following Code is placed on CLICK trigger for a button.
i'm trying to animate fluid in a stomach (side view) that moves from side to side like water would. was thinking to have water drops (as a symbol) move along a motion path but would like it to feel smoother..
After months of saving GIFs just fine, Elements 11 has stopped working properly. I've tried uninstalling, resetting preferences, and reducing the file size, but when trying to save a GIF, all I get is a frozen screen that says "Export: Save for Web and Devices". The screen looks like it's trying to save, but never does. I've made much larger GIFs with no trouble at all, but I can't even make one with 5 frames now.
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.
I'm using Edge to set up animations for my portfolio pages. I'm working on several, but I'm still instinctively using Flash techniques that are different, or don't work with Edge. I'm trying to set up a kind of 'conveyor belt' with two belts, one on top and one below. Each belt will scroll and carry a word, and cycle in a loop so the words move back and forth through the machine graphics I have.
Is there a way to 'hide' an object beyond the opacity slider and keyframes/pin? Once the word is covered by the machine, I want it to disappear, but parts of the word which still haven't been carried inside the machine are still visible, so using the opacity slider is out until the whole word is inside the machine. But if I try to scale it, the shape changes while parts of the word are still visible.
One solution is to break each word into chunks of 3 letters or so, with individual layers for each cluster of letters. Then once each chunk is hidden, blink it out. But before I do that, I'd like to find out if there's a way to make a hard edge, or a boundary, somewhere on the stage, beneath which a specified layer becomes invisible, so that if an object scrolls past that boundary before exiting the stage, it gradually disappears. Is that possible? I'd prefer this way, because I plan to animate the 'belts' the same way for smooth scrolling.
I'm new to Animate and just having a play making an animated Christmas card. Problem is all the symbols look fine if you go into each one in isolation, but when you are on the stage everything looks as though it's about a 50% tint of what it should be.
Animation plays as I want, just a lot paler that it should be. I've tried adding a strong colour above all my layers and the same thing happens...
I like being able to loop the animation in Edge so it will play continually. But coordinating an edge animation with a number of different layers for each object makes me want to be able to loop each layer. Right now it seems you can only insert an action trigger in the general timeline. Is it possible to insert action triggers to individual layers?
For example, I made this animation for my illustrator portfolio page [url]....
I have set up layers for each color, and layers for each texture. Right now it cycles through them in a regular pattern. But I'd like to set individual loops for each color and texture layer so that the animation varies a little.
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?
I'm working on a small banner type ad for someone. The ad has the word "FREE" that turns on and off about every 1/8 second using opacity and placing the elements in different places on the stage - works fine.
However, is it possible to take one element (the "free" text) and have it randomly run at different places on the stage (jQuery I suppose)? My only reason for this is to learn something new and clean up the stage that currently has 30 elements, all duplicates!
Many users forget or even aren't aware of the fact that they can't have duplicate names for elements. Or in a long list of elements, they don't oversee which names are already in use. So they try to change the name, but it does not 'stick' (the name reverts immediately to what it was).
Of course it should be (or become) general knowledge and a good care that duplicate names won't occur, but just like with the prompt that warns for unallowed characters (spaces and all), it would be nice to prompt the user that there's a duplicate name.
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.
I've placed my Edge animation in an iFrame.I would like to be able to trigger the animations in the Edge file, by clicking on links in the parent document.
I created an HTML FORM, then loaded it into Edge Animate.
Now, that I have it there, I created a Div, however, I cannot place the form fields on top of the DIV.
It goes behind the DIV, and does not give me the option of appending it to the FRONT.
I sent the DIV to the Back, however, the Form Fields still remained behind the DIV.
How to work with imported HTML Form Elements within Edge?
I think that I might have figured this one out.However, you loose some of the properties, doing it the way that am trying it right now.Will post back my findings later on.
What is the maximum number of elements I can have in the timeline? I believe I have about 92 elements now and when trying to add another element it shows up at the top of the elements panel, but isn't showing up at all in the timeline?
I have tried converting some elements to symbols or grouping elements but still the new element I've added to the stage is not showing up in the timeline. I am not EVEN done adding more elements.
I can't seem to figure this out, and i'm at the end of my limited HTML and CSS knowledge. I created an animated background in Edge to use on my site, but the elements that should be hidden beyond the 1500px stage just sit there and are visible if you resize your window. i attempted to customize it with a #stage id and overflow:hidden but it did nothing.
my website is [URL] and if you resize your window past 1500px, or scroll over to the right, you can see one of the images just waiting until it is activated. i'd like to hide everything past the 1500px mark but i can't figure out how to do that.
the Edge Runtime script is in the head, including the <style> for .edgeLoad and .updateBack elelments. the <div id="stage" class="updateBack"> is the first line of code in the html, then the tag is closed and i have my main container.
I'm doing a chemistry animation and need a custom mask similiar to below:where a student presses down on one of the arrow buttons and this animates the numbers upwards until they let go of the button.
Is there an easy way to do this in Edge?And how would I go about controlling the numbers upward movement with the pressing of a button?
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?
When the user clicks on two button on the stage I need an eleiment to disapear.
for example:-
If one of the buttons is pressed... nothing should happen.
Then when the other button is pressed then an element disapears.
(The user needs to be able to press the buttons in any order)
I have been usine verables to try and work this out. How I understand it is that I sould be able to store the verable on the stage and recall it.
This is where I have the problem. I have not pasted the stage code because it just does not work. But below is the code for one of the Symbol Button.I had set all the "Var" to "0" at the stage but can not change all recall them.
sym.getSymbol("button1").play();
var but1 = 1
}; if (but1 = 1 && but2 = 1){ sym.$("element1").hide();
I use the wp_oEmbed and the edge suite plug-in and in both cases the hidden off-stage elements are visible. This seems to only happen in WordPress. Standard HTML iframe does not have this problem, not does the simple html generated by edge. This seems to happen in all browsers. I even tried inline styling with a div and overflow hidden command.
I'm doing a drag and drop. I'm working on how to check whether the user has dragged and dropped the elements correctly or wrongly in order to display the corresponding animation. That means, all the same type of animals have to be placed together in the same row in order for the animation to display a "correct" feedback, and if the user placed it in the wrong order, it will display the "wrong" feedback. There are 3 types of animals: birds, snakes and insects. The "feedback" animations is in the "feedback_sym".
I have placed a "Reset" button on stage, but it does not appear even after changing the positions on the "Elements" column.
I created a basic layout with some boxes in Dreamweaver. I set the Overflow property on them to "Hidden". I then opened the page in Edge Animate. However I noticed that when I import stuff, such as an image, then try to drag it into one of the existing DIV's, it won't work. It stays on top of all the other DIV's. However if I create a box or some other sort of DIV directly in Edge Animate, I can drag the Image element into that, so it's enclosed within that DIV.
I guess the workaround appears to be to embed the image into the DIV in Dreamweaver first, then open the page in Edge. However it would be nice to not have to keep jumping back and forth like that. Is there a way to do this in Edge Animate?
Also, I noticed when I select one of the DIVs I made in Dreamweaver, many of the Properties such as Corners, Shadow, and Filters are missing. Can these only be used on DIV's created directly in Edge Animate?
the project I am working on is using a default.css and I would like to assign styles from the file to elements in edge - how can I do that?I already tried the "class" setting in the GUI next an element but the elements do not use the styles defined in the default.css.The default.css is linked in the html file properly. In the js file which edge creates I see that the value userClass: 'slideTitle' is assigned and slideTitle is defined in the default.css.
I have create a small Edge Animate animation that I'm trying to add to our home page. After getting everything running and working properly in IE9+, Chrome, Firefox and Safari I moved it from the development environment to our live site. Then I viewed it on an older machine running IE8 and the down level stage worked great, but it disabled a jquery image slider and a little custom jquery script I wrote to polite load an embedded youtube video. The only cusomization I did to the edge files was to remove the loader for the included version of JQuery so that it would run the on I call from Google instead. This prevent intial conflicts between already existing jquery elements on the page.
