Question

My company is looking at replacing all flash content with HTML5 animations and Edge seems to be a good option for our Flash people to ease into the HTML5 world.

This is the problem we have. The animations from flash have been recreated in Edge Animate and are working well, but when placing them on the same page (there is a header and a footer animation). The two compositions step on each other and mess up the clipping on both the header and footer animation. As a note, they do not have the same width or height and that is were the animations are most problematic. Elements that should not be visible, are and i think it has something to do with the clipping. In my tinkering it seems that both compositions are stepping on each other and taking some attributes from the other. If I remove one of them from the page, the other will work correctly.

I have no idea why this would be, but I can’t seem to find any examples placing two separate compositions in one page. Any help would be greatly appreciated, or even if you know of a good resource for this kind of question, I would be very grateful.

Answer 1

OK, when dealing with the DIV ID=”stage” you will need to change one of them to something else, do not worry, it will not bother it.

Now, you will also have to mess with the positioning, in order to set it properly for where you want it to be at.

Example, your 2 Ae Divs are: stage & mystage

<style type="text/css">
#header{
position:relative;
top:5px;
width:200px;
}
#stage{
position:relative;
top:5px;
width:200px;
top:5px;
left:25px;
}
#MyCenter{
position:relative;
top:20px;
height:300px;
width:400px;
}
#mystage{
position:relative;
width:300px;
top:30px;
left:25px;
}
</style>

<div id="header">This is my header</div>
<div id="stage">Top Stage</div>
<div id="MyCenter">This is my center content</div>
<div id="mystage">Bottom Stage</div>

You need to save this file, and run it as .html.
This will demonstrate how to setup your DIV tags form Ae.
It is rather simple to do.

hope this helps.
Wayne