Edge Animate CC :: Check For Correct Dropping Of Elements And Display Feedback
Jan 2, 2013
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 have an Edge animation with a dial which indicates a percentage value. I want the dial to animate from zero up to the correct percentage value. This percentage value will be calculated via PHP and supplied to the Edge animation.
So what I'm asking is can you specify the rotation value for an element dynamically (via code).
Hovering over a row of thumbnails, I swap the full size photo following this code :
var photo = new Image(); photo.src = 'images/'+fileName; // parameter of the function console.log(fileName+' L= '+photo.width+' H= '+photo.height); sym.$('toile').attr({ width: photo.width, height: photo.height, src: photo.src });
The full size photo swaps, but retaining the dimensions of the first one (initially on the Edge stage).
Even more puzzling, as you can see in the following screen capture, sometimes I can get the correct photo.width and photo.height (even if it isn't correctly assigned to the 'toile' element), and sometimes those values are zero ! And I feel so lost that this seems random.
May be it has to do with loading delay, asking the width and height information before it is available ? Should I necessarily preload the images ?
I have a touchscreen project that I am using Edge Animate to create. So far its working great, but I am trying to find the correct code to make an Idle Timeout after 3 minutes to go back to the stage frame 1 or the label "StageStart" that I have created. I have tried attaching the following code as a 3 second test to the function "touchend", but it doesn't seem to work:
I am creating a mockup of a mobile phone operating system, and need to display a clock in the top right corner. Is there anyway to have the phone recieve real time updates through the computer, or internet's time?
Have a fairly simple banner ad created in Mac OS. Previews fine locally. Previews fine in Safari on Mac as standalone file and dropped in to iframe on Wordpress page (just like a Nivo slider on same page. Also previews in Safari using IE user agent string. When viewed in any browser on Windows OS, no animation display; either as standalone or loaded into iframe. Possibly something simple: a CSS visbility? URL....
he problem im having is that the google map will not start at the target address when I place the code for it in creationcomplete. It only loads properly when I place the code in a trigger on the timeline . Although it loads slow when in a trigger.This is the code im using in the creationcomplete and in the trigger.
this is what it looks like when I place the code in creation complete..you see the map is thier but it doesnt start at the target. It doesnt start at the right address..This is what the map looks like when I place it in a trigger on the timeline.you see it loads correctly on the target address.
I'm playing with the edge commons and json possibilities.
I have a movie with dynamic infos coming from a json file. Everything displays succesfully right now. I would like when I clic on a element (on the thumb picture) that the current info (so I suppose I have to pass an ID somewhere) displays in a movieclip I created (this movieclip is called "detail" in my edge scene).
I currently have a spotlight in my example when clicking on the thumb but I would like to remove it and just display the selected infos in the detail movieclip. I hope I'm clear enough..
I believe that somewhere on +$(this).data('largeimage')+") is the mistake. But I can't find it.Moreover, how, the thumbnails, can be displayed as a table of 4x5?
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?
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 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 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'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 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.
