8 Replies Latest reply on Feb 6, 2010 1:58 AM by magortdsfg

    Image sequence with mouse x movement becomes "jumpy"

    magortdsfg Level 1

      Hi,

       

      I have made an image sequence that listens to mouse movement left or right (if i move the mouse 1 px left - the previous frame appears, and if mouse moves right - the following frame appears).

       

      My problem is that the transition between the frames, when moving the mouse too fast, appears to be very "jumpy" (the sequence can move from frame 20 to 25 when the mouse moves too fast, making it look very bad) .

      Does anyone know how to make the sequence a bit more smoother? Any tips how to approach this problem?

      Can I control it like there is a max speed for the mouse movement? Or maybe a max speed for the frame transitions (frame-by-frame)?

       

      Here is my code that listens to the mouse event:

       

      if (Flag) {
                                
              var activeMouseX = stage.mouseX;
             
              if (activeMouseX > prevMouseX){
                  if(currentFrame == 1)
                  {
                      gotoAndStop(totalFrames);
                      prevMouseX = stage.mouseX;
                  }
                  else
                  {
                      gotoAndStop(currentFrame - 1);
                      prevMouseX = stage.mouseX;
                  }
              }
              if (activeMouseX < prevMouseX){
                  if(currentFrame == totalFrames)
                  {
                      gotoAndStop(1);
                      prevMouseX = stage.mouseX;
                  }
                  else
                  {
                      gotoAndStop(currentFrame + 1);
                      prevMouseX = stage.mouseX;
                  }
              }
          }

       

       

      Regards,

      MH

        • 1. Re: Image sequence with mouse x movement becomes "jumpy"
          kglad Adobe Community Professional & MVP

          you can use an onEnterFrame loop to execute nextFrame() (or prevFrame() ) repeatedly (until the target frame is reached).

          • 2. Re: Image sequence with mouse x movement becomes "jumpy"
            magortdsfg Level 1

            Hmm...does that work together with mouse x movement? I'm pretty new to Flash and AS3.

             

            I want to be able to control the frames one by one depending on mouse x-axis movement, but I don't want the sequence to jump (for example 10 frames) when I move the mouse too fast. I want the sequence to behave smoothly (always showing the sequence frame by frame) when I move the mouse rapidly left or right. It is supposed to work like a product rotation that enables the viewer to look at the product from every angle, and beeing able to navigate back and forth in the sequence.

             

            /Magnus

            • 3. Re: Image sequence with mouse x movement becomes "jumpy"
              kglad Adobe Community Professional & MVP

              yes.

               

              how are you calling that code now?

              • 4. Re: Image sequence with mouse x movement becomes "jumpy"
                magortdsfg Level 1

                Ok, can you explain just a little bit more in detail how to get it to work? I'm still a newbie in AS..

                 

                 

                here is the code:

                 

                stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
                stage.addEventListener(MouseEvent.MOUSE_UP, mUp);
                stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

                 

                var Flag:Boolean;
                var prevMouseX:int = stage.mouseX;

                 

                function mDown(event:MouseEvent):void {
                    Flag = true;
                    stop();
                }

                 

                function mUp(event:MouseEvent):void {
                    Flag = false;
                    play();
                }

                 

                function mMove(event:MouseEvent):void {
                   
                    if (Flag) {
                        trace(stage.mouseX);
                        //trace(event.localX);
                                   
                        var activeMouseX = stage.mouseX;
                       
                        if (activeMouseX > prevMouseX){
                            if(currentFrame == 1)
                            {
                                gotoAndStop(totalFrames);
                                prevMouseX = stage.mouseX;
                            }
                            else
                            {
                                gotoAndStop(currentFrame - 1);
                                prevMouseX = stage.mouseX;
                            }
                        }
                        if (activeMouseX < prevMouseX){
                            if(currentFrame == totalFrames)
                            {
                                gotoAndStop(1);
                                prevMouseX = stage.mouseX;
                            }
                            else
                            {
                                gotoAndStop(currentFrame + 1);
                                prevMouseX = stage.mouseX;
                            }
                        }
                    }
                   
                }

                • 5. Re: Image sequence with mouse x movement becomes "jumpy"
                  kglad Adobe Community Professional & MVP
                  stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

                  stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

                   

                  var prevMouseX:int;

                   

                  function mDown(event:MouseEvent):void {

                  prevMouseX = stage.mouseX;
                      this.addEventListener(Event.ENTER_FRAME,mMove);
                  }

                   

                  function mUp(event:MouseEvent):void {
                      this.removeEventListener(Event.ENTER_FRAME,mMove);

                  }

                   

                  function mMove(event:MouseEvent):void {
                                  
                          var activeMouseX = stage.mouseX;
                         
                          if (activeMouseX > prevMouseX){
                              if(currentFrame == 1){
                                  gotoAndStop(totalFrames);
                              } else {
                                  prevFrame()
                              }
                          }
                          if (activeMouseX < prevMouseX){
                              if(currentFrame == totalFrames) {
                                  gotoAndStop(1);
                              } else {
                                  nextFrame()
                              }
                          }

                  prevMouseX = stage.mouseX;
                  }

                  • 6. Re: Image sequence with mouse x movement becomes "jumpy"
                    magortdsfg Level 1

                    Thanks for your answer, but I get this error when I play the movie:

                     

                    TypeError: Error #1034: Type Coercion failed: cannot convert flash.events::Event@2267d31 to flash.events.MouseEvent.

                     

                     

                    And I cannot navigate back and forth any more...any idea why?

                     

                    Is it AS3 or AS2? Is that of importance? When I created the fla I chose AS 3.

                    • 7. Re: Image sequence with mouse x movement becomes "jumpy"
                      kglad Adobe Community Professional & MVP

                      use:

                       

                       

                       

                      stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

                      stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

                       

                      var prevMouseX:int;

                       

                      function mDown(event:MouseEvent):void {

                      prevMouseX = stage.mouseX;
                          this.addEventListener(Event.ENTER_FRAME,mMove);
                      }

                       

                      function mUp(event:MouseEvent):void {
                          this.removeEventListener(Event.ENTER_FRAME,mMove);

                      }

                       

                      function mMove(event:Event):void {
                                      
                              var activeMouseX = stage.mouseX;
                             
                              if (activeMouseX > prevMouseX){
                                  if(currentFrame == 1){
                                      gotoAndStop(totalFrames);
                                  } else {
                                      prevFrame()
                                  }
                              }
                              if (activeMouseX < prevMouseX){
                                  if(currentFrame == totalFrames) {
                                      gotoAndStop(1);
                                  } else {
                                      nextFrame()
                                  }
                              }

                      prevMouseX = stage.mouseX;
                      }