7 Replies Latest reply on Nov 11, 2012 12:03 PM by lcg_2012

    Multiple iframes on One Page Trigger One from Another

    lcg_2012 Level 1

      So I am creating multiple animations on a single page. The page is a PHP page and was built long ago. I am just replacing some images with Edge Animate animations.

       

      I want to do them in a sequence. So I was wondering if there was a way in the time line of one, to trigger the start of another? Each is going to be in an individual iframe. Which I know compounds the issue.

       

      I thought of just putting some lead seconds in each of the animations so they sort of pause, but that would assume all of them load at the exact same time to keep the timing.

       

      Any help would be appreciated.

        • 1. Re: Multiple iframes on One Page Trigger One from Another
          lcg_2012 Level 1

          Okay, I've been using iframes, with no luck switched to the more elegant way of just divs connected to the .js files. So my question now changes. How can I trigger one animation to start when another finishes?

          • 2. Re: Multiple iframes on One Page Trigger One from Another
            sarhunt Adobe Employee

            Hey lcg,

             

            Our dev Josh Hatwich has a good blog post describing what you're trying to do which may help

            http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

             

            hth,

            Sarah

            • 3. Re: Multiple iframes on One Page Trigger One from Another
              lcg_2012 Level 1

              I would love to say I understand this but I just don't. Read through it a couple of times.

               

              I looked at the code to see how I would adapt it to my needs, but this code hides Page B and Page C. I don't want to hide the other animations, I just want them paused until the one before it is finished. So they are all visible on the page but only one is animating at a time. When it finishes, it triggers the next. I am accomplishing it by putting lead time equal to the animation before it. Not eligant at all, but sort of works. I know loading could screw the pooch on this way of handling it.

               

              What I really was hoping for is to put something in the timeline of Animation A so that when it reaches the end it sends a signal to Animation B to start playing. Not sure if this is possible.

              • 4. Re: Multiple iframes on One Page Trigger One from Another
                AllDayDev Adobe Employee

                Due to browser security, I don't think it would be possible to have one iframe talk to another in the way you want.

                Is there a reason you are using iframes instead of DIVs?

                 

                I created a simple demo of what I think you want to do here, but just using DIVs: http://thetraininggrounds.com/An-test/end-trigger-second-an/combined_an.html

                 

                 

                What I did was start with two compositions. In the second one, at 0ms, I set a trigger of sym.stop(); to ensure this would not play until I told it to.

                 

                In the first one, I set the complete event (i.e. when it's done playing) to start the second composition. I used the code: Edge.getComposition("EDGE-253701960").getStage().play();

                You will, of course, need to substitute the actual composition ID for the one I included in getComposition.

                 

                Then it was simply a matter of including the preload .js file for both and the stage divs for both into the same page.

                 

                 

                There is definitely more you can do, and I suggest checking out the API documentation for more info: http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

                 

                 

                I hope this helps.

                • 5. Re: Multiple iframes on One Page Trigger One from Another
                  lcg_2012 Level 1

                  Thanks I abandoned iframes a while back. What you have here is exactly what I was looking for, thank you. I will give it a try.

                  • 6. Re: Multiple iframes on One Page Trigger One from Another
                    lcg_2012 Level 1

                    This works great, but creates another issue. I have a rollover that jumps the animation back to a label entitled "AnimationStart" that is just past 0. Since the jump to the second animation is triggered on the last frame of the animation along with the rollover it creates a problem.

                     

                    It fires the "next animation" code upon rollover too. So I am trying to get a simple if statement working to make it so that it only fires the first time:

                     

                    So on the first frame of my FIRST animation I have:

                    var myVar=0;

                     

                    On the second frame of my SECOND animation, I have it labeled "AnimationStart" (I use this label for all my rollovers)

                     

                    Then on the last frame I have this:

                     

                    Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3132, function(sym, e) {

                             sym.stop();

                             if (myVar==0){

                             var myVar=1;

                             Edge.getComposition("EDGE-12345678").getStage().play("AnimationStart");

                             }

                     

                    It's not working. Thinking I have the syntax of the if statement wrong. Without the if it triggers. I need the if so that it only does the auto cycle the first time.

                    • 7. Re: Multiple iframes on One Page Trigger One from Another
                      lcg_2012 Level 1

                      I found the correct syntax in another post here is the correct code for those who are also looking:

                       

                      First frame:

                               sym.setVariable("myVar", 0);//Sets Variable "myVar" to 0

                       

                      Last frame:

                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3132, function(sym, e) {

                            var getMyVar=sym.getVariable("myVar");//Sets variable "getMyVar" to the value of "myVar"

                               if (getMyVar == 0){

                                  Edge.getComposition("EDGE-12345678").getStage().play("AnimationStart");

                                     sym.setVariable("myVar", 1);//Sets Variable myVar to 1

                               }