9 Replies Latest reply on Apr 1, 2013 12:06 PM by kglad

    Need help with video-scroll

    Thijs1987

      Hello,

       

      I need some help with a project. What I eventually want is that a webcam controls the mouse position and the mouse position

      controls a video. But first I would like the part where the mouse position controls the video.

      So if the mouse is on the left on your screen the video will be at the first frame and when you move you're mouse to

      the right the video will play accordingly to the movement. and stop when the mouse is all the way to the right.

      Effectivly the mouse scrolles through the video. It only needs to be on the x-axis.

       

      I'm not that formilliar with flash so any help would be great

       

      Thx!

      Thijs

        • 1. Re: Need help with video-scroll
          kglad Adobe Community Professional & MVP

          by video, do you mean an flv or f4v?  if yes, are you playing the video in an flvplayback component?  or. using the netstream class?

          • 2. Re: Need help with video-scroll
            Thijs1987 Level 1

            I mean flv and i'm using the video in an flvplayback component.
            Thx for the fast reply!

            • 3. Re: Need help with video-scroll
              kglad Adobe Community Professional & MVP

              if flv_pb is your flvplayback component, you can use something like:

               

              import fl.video.MetadataEvent;

              import flash.events.MouseEvent;

               

              var duration:Number;

              var m,b:Number;

              var prevX:Number = 0;

               

              flv_pb.addEventListener(MetadataEvent.METADATA_RECEIVED,f);

              flv_pb.addEventListener(MouseEvent.MOUSE_MOVE,moveF);

               

              function moveF(e:MouseEvent):void{

                  if(Math.abs(prevX-e.stageX)>100){  // you'll need to do something to prevent too frequent video seeks.

                      flv_pb.seek(m*e.stageX+b);

                      prevX = e.stageX;

                  }

              }

              function f(e:MetadataEvent):void{

                  paramF(0,0,stage.stageWidth,e.info.duration);

              }

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

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

                  b = y1-m*x1;

              }

              • 4. Re: Need help with video-scroll
                Thijs1987 Level 1

                hmm so i changed the flv_pb to Hoofd (name of the movie instance) and it will play the video once but it won't

                react to the mouse movement.

                 

                No clue what i'm doing wrong

                thx for the help!

                 

                to be sure, here is what i changed:

                 

                 

                import fl.video.MetadataEvent;

                import flash.events.MouseEvent;

                 

                var duration:Number;

                var m,b:Number;

                var prevX:Number = 0;

                 

                Hoofd.addEventListener(MetadataEvent.METADATA_RECEIVED,f);

                Hoofd.addEventListener(MouseEvent.MOUSE_MOVE,moveF);

                 

                function moveF(e:MouseEvent):void{

                    if(Math.abs(prevX-e.stageX)>100){  // you'll need to do something to prevent too frequent video seeks.

                        Hoofd.seek(m*e.stageX+b);

                        prevX = e.stageX;

                    }

                }

                function f(e:MetadataEvent):void{

                    paramF(0,0,stage.stageWidth,e.info.duration);

                }

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

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

                    b = y1-m*x1;

                }

                • 5. Re: Need help with video-scroll
                  kglad Adobe Community Professional & MVP

                  do you have a skin for your component and is your component more than 100 px wide?  if yes, move the mouse over the skin (controls).

                   

                  if no, attach the listener to some other object.

                  1 person found this helpful
                  • 6. Re: Need help with video-scroll
                    Thijs1987 Level 1

                    I did not have a skin for the component, but I made one with it (als more than 100px wide) and the results are choppy. I guess that's what you mean with

                    // you'll need to do something to prevent too frequent video seeks.: but i can't find the sweet spot... and it skippes frames to get to the point of the mouse and it will still keep on playing the video while it just needs to be stopped and only react to the movement of the mouse.

                    so I was thinking this might not be the right approuch.

                     

                    Maybe there is a way that i can split the screen in 240 parts and each few pixels on the x-axis show an image. So if you

                    move the mouse from left to right you see it like a movie..

                    could this work or is this to heavy?

                     

                    Many thx btw! I really appreciate it!

                    • 7. Re: Need help with video-scroll
                      kglad Adobe Community Professional & MVP

                      what you should do is designate a rectangle where users can use their mouse to scroll the video.  if that rectangle has instance name bar, you can use:

                       

                      var m,b:Number;

                      var lastSeek:int = getTimer();

                       

                      flv_pb.addEventListener(MetadataEvent.METADATA_RECEIVED,f);

                      bar.addEventListener(MouseEvent.MOUSE_MOVE,moveF);

                       

                      function f(e:MetadataEvent):void {

                          paramF(0,0,stage.stageWidth,e.info.duration);

                      }

                       

                      function moveF(e:MouseEvent):void {

                          if(getTimer()-lastSeek>1000){

                              flv_pb.seek(m*e.stageX+b);

                              lastSeek = getTimer();

                              flv_pb.play();

                          }

                      }

                       

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

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

                          b = y1 - m * x1;

                      }

                      • 8. Re: Need help with video-scroll
                        Thijs1987 Level 1

                        I fixed it in an other way.

                         

                        Made a imgseq and following code (with some help ):

                         

                         

                         

                                  stop();

                         

                                  stage.addEventListener(Event.RESIZE, resizeHandler);

                                  stage.addEventListener(FullScreenEvent.FULL_SCREEN, resizeHandler);

                                  stage.addEventListener(MouseEvent.MOUSE_MOVE, inputHandler);

                         

                         

                                  stage.scaleMode = StageScaleMode.NO_SCALE;

                                  stage.align = StageAlign.TOP_LEFT;

                         

                                  var imgSeq:ImgSeq = new ImgSeq();

                                  var columnWidth;

                                  var numColumns;

                         

                                  stage.addChild(imgSeq);

                                  imgSeq.x = 350

                                  imgSeq.gotoAndStop(1);

                         

                                  columnWidth = stage.stageWidth / imgSeq.totalFrames;

                                  numColumns = stage.stageWidth / columnWidth;

                         

                         

                         

                         

                                  function resizeHandler(e:Event):void {

                                  // verdeel het scherm in kolommen, iedere keer dat het scherm geresized wordt.

                         

                                            // breedte van 1 kolom (schermbreedte gedeeld door aantal plaatjes)

                                            columnWidth = stage.stageWidth / imgSeq.totalFrames;

                                            // totaal aantal kolommen dat binnen het scherm past (breedte gedeeld door breedte van één kolom )

                                            numColumns = stage.stageWidth / columnWidth;

                         

                                  }

                         

                         

                                  function inputHandler(e:MouseEvent):void {

                                  // voer dit iedere keer dat je de muis beweegt uit.

                         

                                            // kijk voor iedere kolom of de muis er binnen valt.

                                            for(var i = 1; i <= numColumns; i++){

                         

                                                      //vergelijking die checkt of de muispositie binnen de waarden van kolom valt.

                                                      if(mouseX <= i * columnWidth && mouseX >= (i * columnWidth) - columnWidth ){

                         

                                                                // zet het framenummer van de imageSequence gelijk aan de huidige kolom.

                                                                imgSeq.gotoAndStop(i);

                                                      }

                                            }

                         

                                  }

                         

                         

                        many thx!

                        • 9. Re: Need help with video-scroll
                          kglad Adobe Community Professional & MVP

                          you're welcome.

                           

                          (but that looks like code for timeline embedded video which is not recommended.  the code i suggested is better.)