12 Replies Latest reply: Apr 26, 2013 9:15 AM by a.bisewski RSS

    Load frames conform mouse position

    a.bisewski

      Hi.

       

      Look this site:

      www.perpendicular.tk

       

      This site use javascript to show image by image. It is not a 3D model, only images are showed one by one in relation position mouse.

       

      In actionscript, how Can I make this?

       

      I think that I need start putting the images in frames. After, Stop(). When Mouse clicked, I need to compare with the last position and verify the direction, if mouse direction is left ou right and gtonextframe.

       

      But how can I make this accelerate system. Look in site that the image are load more fast is mouse moviment is fast...

       

      Thanks and sorry for my english...

        • 1. Re: Load frames conform mouse position
          kglad CommunityMVP

          to scroll the frames for any movieclip (eg, mc) based on mouse x position, you can use:

           

          paramF(mc,0,1,stage.stageWidth,mc.totalFrames);

          this.addEventListener(MouseEvent.MOUSE_MOVE,moveF);

           

          function moveF(e:MouseEvent):void{

          mc.gotoAndStop(Math.round(mc.m*mouseX+mc.b));

          }

           

          function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{

          mc.m=(y1-y2)/(x1-x2);

          mc.b=y1-mc.m*x1;

          }

          • 2. Re: Load frames conform mouse position
            a.bisewski Community Member

            Hi Kglad.

             

            This function is good, but my big doubt is how can I make this moviment with speed factor. Look in the site that when the mouse is clicked, and you move it, the car rotate faster or not depending on how quick you move the mouse.  I think that I need to use a timer and create a factor based on distante mouse, but how can I put is in pratice in asctionscprit....Oh, sorry for bad english...

            • 3. Re: Load frames conform mouse position
              kglad CommunityMVP

              the code i suggested will change movieclip frames more rapidly if the mouse is moved quickly, too.

               

              are you looking for some sort of easing?

              • 4. Re: Load frames conform mouse position
                a.bisewski Community Member

                I change your code to move the clip only when I click. But when i move the mouse and unclick the mouse, the clip need to continue but desacalarating until 0 speed. Not frame 0, only stop the movie in any frame, but smootly.

                • 5. Re: Load frames conform mouse position
                  a.bisewski Community Member

                  or I am making any wrong...

                  mc.m= this .m is na istance? I only intance the movie with mc...

                  • 6. Re: Load frames conform mouse position
                    kglad CommunityMVP

                    copy and paste the code you're using.

                    • 7. Re: Load frames conform mouse position
                      a.bisewski Community Member

                      paramF(mc,0,1,stage.stageWidth,mc.totalFrames);
                      this.addEventListener(MouseEvent.MOUSE_MOVE,moveF);
                      this.addEventListener(MouseEvent.MOUSE_DOWN,moveD);
                      this.addEventListener(MouseEvent.MOUSE_UP,moveU);
                      var testa = false;

                      function moveF(e:MouseEvent):void{
                      if (testa == true){

                      mc.gotoAndStop(Math.round(mc.mmouseX+mc.b));<br>}<br>}<br>function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{<br>mc.m=(y1-y2)/(x1-x2 );<br>mc.b=y1-mc.mx1;
                      }
                      function moveD(e:MouseEvent):void{
                      testa = true;
                      }
                      function moveU(e:MouseEvent):void{
                      testa = false;
                      }

                       

                       

                      See here http://www.youtube.com/watch?v=t3eLBbgDvHE&amp;list=LLD9kngsHzNqfYtgKZKWIt6g&amp;feature=m h_lolz  . Look that when the mouse is Up the java calculate the speed and then go until 0 or stop rotate. And when click newly, the frame is the same , no go to the zero...</p>

                       

                      Message was edited by: a.bisewski

                      • 8. Re: Load frames conform mouse position
                        kglad CommunityMVP

                        use:

                         

                        paramF(mc,0,1,stage.stageWidth,mc.totalFrames);

                        this.addEventListener(MouseEvent.MOUSE_MOVE,moveF);

                         

                        this.addEventListener(MouseEvent.MOUSE_DOWN,moveD);

                        this.addEventListener(MouseEvent.MOUSE_UP,moveU);

                        var testa:Boolean = false;

                         

                        function moveF(e:MouseEvent):void{

                        mc.gotoAndStop(Math.round(mc.m*mouseX+mc.b));

                        }

                        function moveD(e:MouseEvent):void{

                        testa = true;

                        }

                        function moveU(e:MouseEvent):void{

                        testa = false;

                        }

                         

                        function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{

                        if(testa){

                        mc.m=(y1-y2)/(x1-x2);

                        mc.b=y1-mc.m*x1;

                        }

                        }

                        • 9. Re: Load frames conform mouse position
                          a.bisewski Community Member

                          Here my code:

                          //desascelarating function
                          var teste:Number = 0;
                          teste = setInterval(someFunction, (100));
                          var sfunc_i:Number = 0;
                          var timer:Number = 100
                          function someFunction() {
                          sfunc_i++;

                              trace("someFunction called "+sfunc_i+" @ "+getTimer());
                           
                              clearInterval(teste);
                              teste = setInterval(someFunction, (timer));
                          timer = timer + 100;
                          mc.nextFrame();
                          if (timer == 500){
                             clearInterval(teste);
                          }
                          }

                          With this, I can change speed in my movieclip. Now, I need to  detect the velocity to move my mouse and create a Factor. This factor will be: More velocity, low time in setinterval, like 10 miliseconds and increase until stop.. While increasing, the frames are called in bigger times and the sensation is that the movieclip is stopping.

                           

                          My doubt now, is how Can I create this factor. I think that I need to detect in the EnterFrame the distance that the mouse has run in a specific time. The biggest the distance, the fastesd the movie until stop as the site.

                          • 10. Re: Load frames conform mouse position
                            a.bisewski Community Member

                            I make this, not function and not organized, I  only created some parts, tested and now I need to join all in one.var _oX:Number = stage.mouseX;//last mouse x position
                            var _oY:Number = stage.mouseY;//last mouse y position
                            var _velX:Number = 0;//velocity x per second
                            var _velY:Number = 0;//velocity y per second
                            var _speed:Number = 0;//change in position per second

                            var _mouseTimer:Timer = new Timer(50,0);
                            _mouseTimer.addEventListener( TimerEvent.TIMER, updateCurrentMouseVelocity);
                            _mouseTimer.start();
                            function updateCurrentMouseVelocity(e:TimerEvent):void
                            {
                                var nX:Number = stage.mouseX;
                                var nY:Number = stage.mouseY;
                                var dx:Number = nX - _oX;
                                var dy:Number = nY - _oY;
                               
                                _oX = nX;
                                _oY = nY;
                                _velX = dx * 1000 / _mouseTimer.delay;//per second
                                _velY = dy * 1000 / _mouseTimer.delay;//per second
                                _speed = Math.sqrt( _velX * _velX + _velY * _velY );
                            trace(_velX);
                            }
                            //desascelarating function
                            var teste:Number = 0;
                            //teste = setInterval(someFunction, (100));
                            var sfunc_i:Number = 0;
                            var timer:Number = 100
                            function someFunction() {
                            sfunc_i++;
                                clearInterval(teste);
                                teste = setInterval(someFunction, (timer));
                            timer = timer + 100;
                            mc.nextFrame();
                            if (timer == 500){
                               clearInterval(teste);
                            }
                            }

                            this.addEventListener(MouseEvent.MOUSE_DOWN,mouseD);
                            this.addEventListener(MouseEvent.MOUSE_UP,mouseU);
                            this.addEventListener(MouseEvent.MOUSE_MOVE,mouseM);

                            var factor = Number;
                            var xmouse = 0;
                            var initialPnt;
                            var key;
                            var keyAnt = 0;
                            var actualFrame = 0;
                            function on_enter(event:Event):void{
                            if (testa == true){
                                if(xmouse == 0){
                                  xmouse = mouseX;
                                }else{
                                if(xmouse > mouseX){
                                 trace("left");
                                 xmouse = mouseX;
                                 teste = setInterval(someFunction, (_velX));
                                }else if(xmouse < mouseX){
                                 trace("right");
                                 xmouse = mouseX;
                               
                                }
                                }
                            }
                            }
                            var testa = false;
                            function mouseD(e:MouseEvent):void{
                            testa = true;
                            }
                            function mouseU(e:MouseEvent):void{
                            testa = false;
                            }
                            function mouseM(e:MouseEvent):void{

                            }

                             

                            Here have the velocity of mouse, detect what side the mouse is running, and the desascelerating sistem movieclip. If anybody know I can make this function,thanks...

                            • 11. Re: Load frames conform mouse position
                              a.bisewski Community Member

                              Here, I have the side that my model is rotated, left or right and get the speed of mouse is moved. Speed like 5000 is vary fast. So in interval, I need to create a factor that go to increment the time until == 500 when the movieclip is total stop. If speed iguals 5000, so I start interval witth 10 miliseconds and increment to 15, 27,35 and so...But for this, I need create a factor, to multiply the 10 miliseconds and get the value to the next times...

                               

                              Realy, sorry my english, I try but I imagine the dificult to understanding that I write...

                               

                              var _oX:Number = stage.mouseX;//last mouse x position
                              var _oY:Number = stage.mouseY;//last mouse y position
                              var _velX:Number = 0;//velocity x per second
                              var _velY:Number = 0;//velocity y per second
                              var _speed:Number = 0;//change in position per second

                              var _mouseTimer:Timer = new Timer(50,0);
                              _mouseTimer.addEventListener( TimerEvent.TIMER, updateCurrentMouseVelocity);
                              _mouseTimer.start();
                              function updateCurrentMouseVelocity(e:TimerEvent):void
                              {
                                  var nX:Number = stage.mouseX;
                                  var nY:Number = stage.mouseY;
                                  var dx:Number = nX - _oX;
                                  var dy:Number = nY - _oY;
                                 
                                  _oX = nX;
                                  _oY = nY;
                                  _velX = dx * 1000 / _mouseTimer.delay;//per second
                                  _velY = dy * 1000 / _mouseTimer.delay;//per second
                                  _speed = Math.sqrt( _velX * _velX + _velY * _velY );
                              trace(_velX);
                              }
                              //desascelarating function
                              var teste:Number = 0;
                              //teste = setInterval(someFunction, (100));
                              var sfunc_i:Number = 0;
                              var timer:Number = 100
                              function someFunction() {
                              sfunc_i++;
                                  clearInterval(teste);
                                  teste = setInterval(someFunction, (timer));
                              timer = timer + 100;
                              mc.nextFrame();
                              if (timer == 500){
                                 clearInterval(teste);
                              }
                              }

                              this.addEventListener(MouseEvent.MOUSE_DOWN,mouseD);
                              this.addEventListener(MouseEvent.MOUSE_UP,mouseU);
                              this.addEventListener(MouseEvent.MOUSE_MOVE,mouseM);

                              var factor = Number;
                              var xmouse = 0;
                              var initialPnt;
                              var key;
                              var keyAnt = 0;
                              var actualFrame = 0;
                              function on_enter(event:Event):void{
                              if (testa == true){
                                  if(xmouse == 0){
                                    xmouse = mouseX;
                                  }else{
                                  if(xmouse > mouseX){
                                   trace("left");
                                   xmouse = mouseX;
                                   teste = setInterval(someFunction, (_velX));
                                  }else if(xmouse < mouseX){
                                   trace("right");
                                   xmouse = mouseX;
                                 
                                  }
                                  }
                              }
                              }
                              var testa = false;
                              function mouseD(e:MouseEvent):void{
                              testa = true;
                              }
                              function mouseU(e:MouseEvent):void{
                              testa = false;
                              }
                              function mouseM(e:MouseEvent):void{

                              }

                              • 12. Re: Load frames conform mouse position
                                a.bisewski Community Member

                                I think that i found the factor. But I dont know how to use it... See:

                                I above code, I have values in _velX  like 100 until 5000, there are variants, but this is a great range for start. In _velX like 100 the speed is slow, so in setTimer I use the bigger times. In tests, I select a range. When timer is 500 so it is slow and need stop. When I new frame is showed with this value, 500, thee sensation for who is see, is that the model not have more energy for continue rotating and need stop.

                                 

                                Well, if I have this range, 10-500 for setTimer and 100-5000 for speed mouse, for to create a factor, I make this:
                                //max time in setInterval divide by minimal speed multiply by a Factor 100. This give-me the start time in SetInterval, the last time we have, when igual 500 clear Interval.
                                500/100=5*100=500 miliseconds (when = 500, the movieclip stop frame)
                                500/5000=0,1*100=10 miliseconds (the movieclip have call next frame very fast)

                                If speed igual 100, only one frame is call.
                                If speed igual 5000, so 50 frames are call.
                                So, for each loop, I need to reduce the velocity. 5000/50=100. 5000-100=4900, after 4900-100=4800...

                                uh, I am crazy...