5 Replies Latest reply on Sep 12, 2014 12:16 AM by steelcrashed

    Let's stack independent Edge animations.

    epheterson

      Goal:

      Create multiple Edge animations, which animate out to reveal another independent Edge animation behind it. Repeat as many times as desired, in a storyboard fashion. All animations will sit in a single HTML page, and javascript will load and play new animations when necessary.

       

      Unsolved Problem:

      After getting this to work for 2-3 animations, it locks up and nothing works again. This appears to happen when edge.1.0.0.min.js loads, after edge.1.5.0.min.js had been used for the first two animations. I can see the file load in the web inspector, where it hadn't existed for the first two animations. This may or may not be related.

       

      Key Players:

      Hide / Show Divs: document.getElementById('div_container').style.display = 'none';

      Play new animations: AdobeEdge.getComposition("myAnimation").getStage().play(0);

       

      HTML Structure:

      http://pastebin.com/EJAjScmc

       

      • HTML5 doctype
      • head.min.js loaded, which helps with loading new animations on demand
      • .edgeLoad-homepage { visibility:hidden; } for each animation anticipated
      • <div class="container"> A main container for all of the animations
      • <div id="homepage_cont" style="z-index:9;" class="container2"> A sub-container for each animation
      • <div id="homepage" class="homepage"></div> for each animation anticipated
      • <script>head.js("homepage_edgePreload.js");</script> head.js loads the javascript for each animation, on-demand

       

      Problem: Must get multiple animations on top of each other, via HTML & CSS.

      Solution: Check out the HTML structure linked to above. This required creating a primary container for all animations, then additional containers for each animation. Applying CSS to edge animation div's directly DOES NOT WORK, which is why additional containers are necessary.

      Example:

           Style:

      <style>

      .container

      {

                height:700px;

                width: 1200px;

                position:relative;

                margin:0 auto;

      }

      .container2

      {

                height:700px;

                width: 1200px;

                position:absolute;

                left:0px;

                top:0px;

      }

      </style>


           HTML:

      <div class="container">

                <div id="preppydate_cont" style="display:none; z-index:1;" class="container2"><div id="preppydate" class="preppydate"></div></div>


      Problem: Can't load all animations up front, waaaay to many browser resources.

      Solution: Include the skeleton for where animations will go (the HTML), and load javascript when necessary via head.js.

      Example:

      In head: <script type="text/javascript" charset="utf-8" src="head.min.js"></script>

      In HTML body: <script>head.js("homepage_edgePreload.js");</script>

      In Adobe Edge animations, when getting ready for the next: head.js("nextAnimation_edgePreload.js");

       

      Problem: First animation loads, animates out into the one behind it, can't click anything on new animation.

      Solution: The container for the top animation still exists. In the timeline of the first animation, hide its container (which you created, myAnimation_cont).

      Example:

      On the Edge timeline, towards the end: document.getElementById('homepage_cont').style.display = 'none';

       

      Problem: When new animation is loaded, it starts before the previous animation is finsihed.

      Solution: In Edge, pause the new animation on the first frame. Then, on the previous animation's timeline, at the end, play the new one.

      Example:

      On the exiting animation: AdobeEdge.getComposition("myNewAnimation").getStage().play(0);

       

       

       

      Please ask for any clarification, and reply back if you can offer any help! I've solved a lot of issues but it seems the more I solve the more there are hiding. Has anybody accomplished this in a simpler way? Has anybody done this at all? It's simiar to the Adobe Edge Bootstrap post, but more complicated in that you can't hide the prior div until you've already animated into the new one. That is, you have two div's concurrently existing, which is not how the post did it.

        • 2. Re: Let's stack independent Edge animations.
          epheterson Level 1

          Hey mobly,

               Thanks for this, I hadn't heard of it. Composition Loader sounds like the right tool for this!

           

          Cheers,

          Eric

          • 3. Re: Let's stack independent Edge animations.
            epheterson Level 1

            Hey mobly (and others),

                 Perhaps you have some experience with edge commons, and could help me further? I got a loader working, bringing up the first animation of the storyboard. The button to move forward, though, is within the first animation. I can't seem to get the sub-animation to tell the parent loader to load the next animation.

             

            It should be like:

             

            Loader

              |_ Animation 1 (Hands instructions to Loader to move down)

              |_ Animation 2

              |_ Animation 3

             

            All I can seem to do is:

             

            Loader

              |_ Animation 1

                   |_  Animation 2 (After re-loading the edge commons .js within Animation 1)

             


            Could you advise on how I could utilize EC to help me with this? The documentation is rather sparse.

             

            Thanks much,

            Eric

            • 4. Re: Let's stack independent Edge animations.
              mobly Level 3

              Sorry Eric

              I only know what I have read, and what it can do, but not worked with it, so know nothing.

              Hopefully some more documents and tutorials will be out soon

              Cheers

              Alistair

              • 5. Re: Let's stack independent Edge animations.
                steelcrashed

                Does this issue still rolling or does anyone still working on something similar to this?

                 

                I have built a custom Adobe Edge Animation player of which it loads animations either all at once or on-demand via yepnope. I managed to control the animations load, play, stop, pause, skip, jump, seek the timeline with a drag and drop dragger more like a youtube playlist. There is also a sound sync attached to it but the controls are just bound to animations control so the Animation's total timeline should be similar or significantly the same with the audio timeline. These animations are all in one page. My only concern is when all the animations has been loaded or all has been played through, there's a significant performance issue about the transition of the animation, the animations are not smooth. Do you know how to improve more the performance of multiple animation at once? I am currently working on 30+ animations at one player so it doesn't run that smooth when i am currently watching the 30th.

                 

                BTW, I used the Adobe Edge Bootstrap API.

                 

                Thanks