1 Reply Latest reply on Dec 2, 2014 7:57 PM by vivekuma

    Multiple compositions as overlapping divs

    nomadtoltec

      Hello,


      My first question on this forum and I could really use some help with this. Have been stuck on finding a solution, for well over a week.

       

      I am trying to overlap multiple compositions in an Adobe Edge Animate project (I am using Edge Animate CC 2014.1.1).

      Basically I am trying to achieve the effect shown in the image below (where the blue stage is my main stage - first composition being loaded, the red is the second and the green is the third):

      desired_effect.png

      I added a link to my Edge Animate project files below (I modified the main.html file to accomodate three compositions).

       

      In raw HTML, this can be very easily achieved by using a <div> that is has "position:relative" (it would be the blue area) and nesting two divs with "position:absolute" inside it (the red and the green). My problem is getting the same effect in Edge and loading a composition in each of the two overlapping divs.

       

      In my Edge project, main file, I have three stage divs:

       

      <div id="StageA" class="EDGE-222475028"></div>
      <div id="StageB" class="EDGE-222542206"></div>
      <div id="StageC" class="EDGE-222622471"></div>
      

       

      StageA would be the main container div (blue), StageB the first nested one (red) and StageC the third (green) positioned at the right margin of the main container.

       

      I was not able to apply the same overlapping concept to Edge stage divs, as in my raw HTML example.

      How can I achieve this?


      Edge project files: https://www.dropbox.com/s/qj8jbrrrnbleozp/overlapping_multiple_compositions.zip?dl=0

       

      Thank you,

      Chris