4 Replies Latest reply on Mar 25, 2014 4:22 AM by cfjedimaster

    How to sync two different Edge Animation's on a website?

    Steve90

      Hello everybody,

       

      I've made 2 animations on a Website and I want to synchronise these.

      The 2 animations have to start simultaneously.

      But the animation which loaded its content starts first and then the other.

      The difference now is noticable and will be more on slower internet-connections.

       

      How can I achive this in Edge Animate, or do I need Java-Script in my ".html"-file?

      (Hope not because I can't script )

       

      Thx

        • 1. Re: How to sync two different Edge Animation's on a website?
          hemanthR Adobe Employee

          Check out this tutorial http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

          With bootstrapping you can start animation only after both aniamtions have finished loading their sources.

          1 person found this helpful
          • 2. Re: How to sync two different Edge Animation's on a website?
            Steve90 Level 1

            Hi Hemanth,

             

            thank you for your reply.

            I imported the animations on 2 different locations like this:

            <div id="content">

                          <div id="teaser">

                                    <div id="samsung">

                                      <object id="EdgeID" type="text/html" width="169" height="420" data-dw-widget="Edge" data="edgeanimate_assets/samsung/Assets/samsung.html">

                                      </object>

                              </div>

                              <div id="text">

                              </div>

                              <div id="apple">

                        <object id="EdgeID2" type="text/html" width="151" height="368" data-dw-widget="Edge" data="edgeanimate_assets/iphone/Assets/iphone.html">

                        </object>

                      </div>

                          </div>

            </div>

             

            _______________________________________________________________________________

             

            From here the post is edited, because I tried it without the <object> tag, used the "bootstrapCallback and included the 2 animations with all necessary files.

            Unfortunately now my head-area explodes with java scripts.

             

            I changed my file like this (head-area):

            <script type="text/javascript" charset="utf-8" src="assets/iphone_edgePreload.js"></script>

            <script type="text/javascript" charset="utf-8" src="assets/samsung_edgePreload.js"></script>

            <style>

                      .edgeLoad-EDGE-109535821 { visibility:hidden; }

                      .edgeLoad-EDGE-141942318 { visibility:hidden; }

                      #Stage { visibility:hidden;}

            </style>

             

            <script>

            var countComps = 0;

            AdobeEdge.bootstrapCallback(function(compId) { 

                      countComps = countComps + 1;

                                if (countComps == 2) {

                                          comp2 = AdobeEdge.getComposition(compId).getStage();

                                          $("#Stage").css('visibility', 'visible');

                                          comp1.play(0);

                                          comp2.play(0);

                                }

                                else {

                                comp1 = AdobeEdge.getComposition(compId).getStage();

                                }

                      }

            );

            </script>

             

            ... and in the body:

             

            <div id="content">

                 <div id="teaser">

                      <div id="samsung">

                           <div id="Stage" class="EDGE-109535821"></div>

                      </div>

                     <div id="text"></div>

                     <div id="apple">

                            <div id="Stage" class="EDGE-141942318"></div>

                     </div>

                  </div>

            </div>

            • 3. Re: How to sync two different Edge Animation's on a website?
              Steve90 Level 1

              I edited my last post to explain better what I did and deleted all unnecessary informations.

               

              Now it seems that it starts after preloading both compositions but it plays only the first animation. (comp1.play(0);)

              I did this with my basic scripting-skills and I don't know if this is a good solution and where the fault is.

               

              Now I need help again.

              Thank you in advance.

              • 4. Re: How to sync two different Edge Animation's on a website?
                cfjedimaster Level 3

                I believe you want to add

                 

                var comp1;

                var comp2;

                 

                right after var countComps; as currently the variables exist only for the duration of the callback.

                1 person found this helpful