Okay, after about 8 hours I am about to chuck this whole project in the bin. After spending about four hours learning the basics of Edge Animate I made a project that scales in the window good enough to double for our mobile theme. My co-worker (is far more versed in HTML, CSS, and Jquery than I), got it to display on a space on the footer of our website that we had set aside for it. Here are the basic elements:
10 .png images
2 animated symbols, with clipping:
- One with seven motion path animated elements
- One with two circles with animated opacity and size
1 rectangle
1 clickable rounded rectangle
1 line of text
Stage width is set to 100%, stage height is 150, Max width on the stage is set to 958px, overflow is hidden.
Everything works fine in the preview and the HTML preview (bear in mind that this at the top of the page).
Here's the rub:
When we put the animation on the web page (in the footer), all of the elements (that is to say every single element except the stage itself) appear at the top of the page, stretched to the size of the viewable web area. No matter what we try, we cannot get the elements to appear in the stage. It's gotten to the point where I'm probably going to put Edge away and never use it again. There doesn't seem to be any support online for this phenomenon. I'm not going to jam the whole thing into an iframe (as has been suggested elsewhere, because this isn't 1997), and there doesn't seem to be an option that I haven't tried in the program. Is this a common occurrence?