2 Replies Latest reply on Dec 2, 2014 12:47 PM by LuckyNotLucky

    Edge Animate Play/Pause Issue

    JNIrving

      Hi. I am trying to add a play/pause feature to an EA animation so that I can use it as a substitute for a powerpoint-type presentation.

      I have created an animation which works satisfactorily and runs correctly from beginning to end. To add a play/pause functionality, I have created two buttons (play and pause) and have set these up in the corner of the EA stage. I then added the following actions to each button in the js coding box.

       

      For the pause button, which I have called 'pause-icon', I wrote:

       

      1 sym.stop();

      2 sym.$("pause-icon").hide();

       

      For the play button, which I have called 'play-icon', I wrote:

       

      1 sym.$("play-icon").click(function(){

      2 var timelinePos = sym.getPosition;

      3 sym.play(timelinePos);

      5 sym.$("play-icon").hide;

      6 sym.$("pause-icon").show;

      7 });

       

      I also added a pointing-finger cursor property to each button.

       

      This code is not working when I preview the animation in my browser. The buttons do cause the cursor to change, but do nothing else. Clicking on either on them has no effect on pausing/playing the animation. What needs to be fixed?

        • 1. Re: Edge Animate Play/Pause Issue
          heathrowe Most Valuable Participant

          A simple example animating just the width of an element; play (green)/pause(red) elements.

          http://www.heathrowe.com/edge/pause-stop/

           

          You were pretty close with your code:

          - you did't close out your methods with ()

          - substitute timelinePos with simply sym.play(); or sym.stop() depending on the button pushed

          - plus you would need to sym.$("pause-icon").hide(); to hide on the start;

           

          So complete Stage > Compositionready code would look like this

           

          sym.$("pause-icon").hide();

          sym.$("play-icon").click(function(){
               sym.play();
               $(this).hide();
               sym.$("pause-icon").show();
          });

          sym.$("pause-icon").click(function(){
               sym.stop();
               $(this).hide();
               sym.$("play-icon").show();
          });

           

          Download sample file: http://www.heathrowe.com/edge/pause-stop/pause-stop.zip

           

          hth

          Darrell

          1 person found this helpful
          • 2. Re: Edge Animate Play/Pause Issue
            LuckyNotLucky Level 1

            Heathrowe, thanks for the code and explanation but I'm having difficulty implementing your solution. I'm new to Edge, so please bear with me.

             

            First, how does the Playback <div> not appear on the timeline? The only thing in the timeline is the rectangle. If I copy and past the Playback <div> to my animation, it appears on the timeline, along with its contained play-icon/pause_icons.

             

            Second, I've copied your compositionReady code, imported the two scripts (jquery-1.7.1.min.js and jquery-2.0.3.min.js) and added a stop to the beginning and end.

             

            The buttons appear and toggle back and forth but the animation never starts... What am I missing?

             

            Thanks in advance,   matt