Not yet rated

Problem

I wanted a smart way for users with tablets or mobiles to be able to seek parts of a movie without buttons.

Solution

So swipe gesture and mouseMove came to mind. In this code the user can swipe towards the right to move forward into the movie or towards left to go back. Note:Of course this will not work with a live stream. I just thought I should mention it.

Detailed explanation

Concider that you have build a very simple player with video display.

<s:VideoDisplay width="100%" height="100%" autoPlay="true" id="player" scaleMode="stretch" mediaPlayerStateChange="checkState(event)"/>


Now lets initialize and bind our events:

protected function init():void
            {    
                    navigator.landscapeOrientation = false;
                if (!Multitouch.supportsTouchEvents)

                {
                    addEventListener(MouseEvent.MOUSE_DOWN,onTouchMove);
                    systemManager.stage.addEventListener(MouseEvent.MOUSE_MOVE,onTouchMove);
                }
                else
                {
                    label.text = "normal";
                    
                    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
                  
                    addEventListener(TouchEvent.TOUCH_MOVE,onTouchMove);
                    
                }
                player.source = "http://myMovie.mp4";
           
            }

This will show u when the player is playing and has calculated the max duration.

public function checkState(evt:MediaPlayerStateChangeEvent)
            {
                if(evt.state == "playing")
                {
                   trace(String(player.duration));
                }
               
               trace(String((player.duration/60))+"  "+evt.state);
            }

Now lets create that function that does all the work:

private function onTouchMove(event):void
            {
                if(event.stageX>systemManager.stage.width/2)
                {
                    var time = event.stageX/100;
                    time = player.currentTime+time;
                    player.seek(Math.round(time));
                    trace(player.currentTime+"::"+event.stageX+"::"+Math.round(time));
                 
                }
                else if(event.stageX<systemManager.stage.width/2)
                {
                    var time = event.stageX/100;
                    time = player.currentTime-time;
                    player.seek(Math.round(time));
                    trace(player.currentTime+"::"+event.stageX+"::"+Math.round(time));
               
                }
               
            }

 

In a 1024x600 10'' screen with max swipe the movie will move forward or backward 10'' with each swipe.

I tend to believe that its pretty cool, personally I would also add arrows to show which way the user swipes.


+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes