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

    Edge Animate Play/Pause Issue

    JNIrving Community Member

      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 CommunityMVP

          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

          • 2. Re: Edge Animate Play/Pause Issue
            LuckyNotLucky Community Member

            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