9 Replies Latest reply: Feb 9, 2014 4:49 PM by Ned Murphy RSS

    Endless Reverse Animation

    mentalcase129 Community Member

      So I founds this code online a while back to play animation in reverse along the timeline.

       

      var targetFrame:int = 1;

      // if we are ahead of the target, start going backwards

      if(currentFrame > targetFrame) stage.addEventListener(Event.ENTER_FRAME,goBack);

       

      function goBack(evt:Event):void

      {

          prevFrame();

          // kill the event listener when the target is reached

          if(currentFrame <= targetFrame) stage.removeEventListener(Event.ENTER_FRAME,goBack);

      }

       

       

      It worked very well and I've since used it for a few different projects for a few different purposes.  I now need to either modify this or use some entirely new code for something I'm working on.  I have a rollover event that sends you backwards along the timeline but I want the mouse out event to stop the reverse animation at which ever point it happens to be when the user moves the mouse.  I did something similar in the same project for moving forward and stopping with mouse over and out events.  In the case of the forward animation I simply put a stop command as the out event and worked perfectly.  With this reverse animation it doesn't work though.  The over event works to start the reverse animation but the out event with the stop command does nothing and I'm guessing it's because the code is sending the user back to a specified target frame.  I think what I need to make this action work the way I want it to is to have the mouse over event start an endless reverse of the animation that won't stop until it either reaches frame 1 or is told to stop with a command.  I think it's the target in this code that is ignoring the mouse out event.

       

      So, in other words.  Can anybody point towards some code that will reverse the animation along the timeline endlessly until it reaches the end?

        • 1. Re: Endless Reverse Animation
          Ned Murphy CommunityMVP

          The key to stopping the reverse timeline travel will be to remove the event listener like you do in the function you showed, just have it happen in the rollout function without the conditional.

          • 2. Re: Endless Reverse Animation
            mentalcase129 Community Member

            I'm sure if I'm understanding that.  If I remove the even listener won't that stop the reverse animation from starting when I want it to?

            • 3. Re: Endless Reverse Animation
              mentalcase129 Community Member

              Sorry, that should say "I'm NOT sure if I'm understanding that."

              • 4. Re: Endless Reverse Animation
                mentalcase129 Community Member

                Actually I've been playing with this and I'm wondering about trying something else.  I have a movieclip now that is playing and stopping based on mouse over and out events.  What can code can I use to make a different button make it play backwards or stop based on mouse over and out events.  Is there a simple code like movieclip.reverse() or something?

                • 5. Re: Endless Reverse Animation
                  Ned Murphy CommunityMVP

                  No, when you want to go backwards along a timeline you have to provide your own means of repeatedly moving back one frame at a time.  That is where the ENTER_FRAME event listener comes in handy as you can use it to manage repeatedly calling the prevFrame() function.  As I indicated in my original response, the key to stopping that backward movement is to remove that ENTER_FRAME event listener.

                  • 6. Re: Endless Reverse Animation
                    mentalcase129 Community Member

                    Okay...I THINK I'm understanding you.  Unfortunately my situation has changed and it's not quite the same.  As far as I can tell anyway.  So I changed my approach so that the rollover and out actions were starting and stopping a movieclip.  I discovered that the forward moving animation wasn't working as well as I had originally thought.  Changing to this approach solved that problem but now that I've done that reverse animation code I had been using no longer works at all, because that code is made to reverse the animation on the timeline that the code is sitting on.  I need to make the movieclip play backwards from the same timeline that the buttons with the rollover codes are sitting on.  I hope I'm explaining that well enough.

                     

                    So I need to either adjust my code  or come up with some new code that will tell that movieclip to play backwards.  as appose to playing the present timeline backwards.  Is that possible.

                    • 7. Re: Endless Reverse Animation
                      Ned Murphy CommunityMVP

                      It is likely possible but you'll have to show code and explain where that movieclip is relative to the code

                      • 8. Re: Endless Reverse Animation
                        mentalcase129 Community Member

                        Here's the code.  It's sitting on the maintime with the button that controls the rollover and out events and the movieclip which has the animation within it that I want played and reversed.  The forward action and stop works fine but not that backward action.

                         

                        gallery.stop();

                        /* Mouse Over Event

                        Mousing over the symbol instance executes a function in which you can add your own custom code.

                         

                        Instructions:

                        1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                           The code will execute when the symbol instance is moused over.

                        */

                         

                        right.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler);

                         

                        function fl_MouseOverHandler(event:MouseEvent):void

                        {

                            gallery.play();

                        }

                         

                        /* Mouse Out Event

                        Mousing out of the symbol instance executes a function in which you can add your own custom code.

                         

                        Instructions:

                        1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                           The code will execute when the symbol instance is moused out of.

                        */

                         

                        right.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler);

                         

                        function fl_MouseOutHandler(event:MouseEvent):void

                        {

                            gallery.stop();

                        }

                         

                        /* Mouse Over Event

                        Mousing over the symbol instance executes a function in which you can add your own custom code.

                         

                        Instructions:

                        1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                           The code will execute when the symbol instance is moused over.

                        */

                         

                        left.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler_2);

                         

                        function fl_MouseOverHandler_2(event:MouseEvent):void

                        {

                            var targetFrame:int = 1;

                        // if we are ahead of the target, start going backwards

                        if(currentFrame > targetFrame) stage.addEventListener(Event.ENTER_FRAME,goBack);

                         

                        function goBack(evt:Event):void

                        {

                            prevFrame();

                        }

                        }

                         

                        /* Mouse Out Event

                        Mousing out of the symbol instance executes a function in which you can add your own custom code.

                         

                        Instructions:

                        1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                           The code will execute when the symbol instance is moused out of.

                        */

                         

                        left.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler_3);

                         

                        function fl_MouseOutHandler_3(event:MouseEvent):void

                        {

                            stop();

                        }

                        • 9. Re: Endless Reverse Animation
                          Ned Murphy CommunityMVP

                          I don't know what object you are trying to target with your code, but whatever one it is is not being targeted if you are not using its instance name anytime you want to control it or test something of it.  Consider using the following if "gallery" happens to be the movieclip you talk about...

                           

                          gallery.currentFrame

                           

                          gallery.prevFrame();

                           

                          gallery.stop();

                           

                          stage.removeEventListener(Event.ENTER_FRAME,goBack);  // if you do not remove the listener it will continue to call the goBack function

                           

                           

                          Do not nest your goBack() function inside your fl_MouseOverHandler_2 function