Flash Actionscript 3.0 Videoplayer help

Question

Hello, it's been a while since I last used Flash so thought it best to learn Actionscript 3. However, I've been working through a [Flash videoplayer tutorial][1] and I'm really struggling to cusomise the layout for my own needs.

I moved the progress bar down by 13.9px and to the right by 55.8px. I also shortened the progress bar to 176.9px. Problem is when I click on the scrubber it jumps to the right by the 55.8px. I know I need to write somewhere that the scrubber should start at 55.8px but everytime I try I end up causing further issues. Could someone please take a look at my code and suggest what it is I need to change.

Kind Regards,

Matt

// ##########################
// ############# CONSTANTS
// ##########################

// time to buffer for the video in sec.
const BUFFER_TIME:Number       = 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number    = 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int    = 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean     = true;

// ##########################
// ############# VARIABLES
// ##########################

// flag for knowing if flv has been loaded
var bolLoaded:Boolean       = false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean     = false;
// flag for progress scrubbing
var bolProgressScrub:Boolean      = false;
// holds the last used volume, but never 0
var intLastVolume:Number       = DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object;
// url to flv file
var strSource:String        = "hancock-tsr2_h480p.flv";
// timer for updating player (progress, volume...)
var tmrDisplay:Timer;

// ##########################
// ############# FUNCTIONS
// ##########################

// sets up the player
function initVideoPlayer():void {
    // hide buttons
    mcVideoControls.btnUnmute.visible = false;
    mcVideoControls.btnPause.visible = false;

    // set the progress/preload fill width to 1
    mcVideoControls.mcProgressFill.mcFillgreen.width = 1;
    mcVideoControls.mcProgressFill.mcFillGrey.width = 1;

    // add global event listener when mouse is released
    stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);

    // add event listeners to all buttons
    mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
    mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
    mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
    mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
    mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
    mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
    mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);

    // create timer for updating all visual parts of player and add
    // event listener
    tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
    tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);

    // create a new net connection, add event listener and connect
    // to null because we don't have a media server
    ncConnection = new NetConnection();
    ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
    ncConnection.connect(null);

    // create a new netstream with the net connection, add event
    // listener, set client to this for handling meta data and
    // set the buffer time to the value from the constant
    nsStream = new NetStream(ncConnection);
    nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
    nsStream.client = this;
    nsStream.bufferTime = BUFFER_TIME;

    // attach net stream to video object on the stage
    vidDisplay.attachNetStream(nsStream);
    // set the smoothing value from the constant
    vidDisplay.smoothing = SMOOTHING;

    // set default volume
    mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
    mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 52;
    setVolume(DEFAULT_VOLUME);
}

function playClicked(e:MouseEvent):void {
    // check's, if the flv has already begun
    // to download. if so, resume playback, else
    // load the file
    if(!bolLoaded) {
     nsStream.play(strSource);
     bolLoaded = true;
    }
    else{
     nsStream.resume();
    }

    // show video display
    vidDisplay.visible     = true;

    // switch play/pause visibility
    mcVideoControls.btnPause.visible = true;
    mcVideoControls.btnPlay.visible  = false;
}

function pauseClicked(e:MouseEvent):void {
    // pause video
    nsStream.pause();

    // switch play/pause visibility
    mcVideoControls.btnPause.visible = false;
    mcVideoControls.btnPlay.visible  = true;
}

function stopClicked(e:MouseEvent):void {
    // calls stop function
    stopVideoPlayer();
}

function muteClicked(e:MouseEvent):void {
    // set volume to 0
    setVolume(0);

    // update scrubber and fill position/width
    mcVideoControls.mcVolumeScrubber.x    = 341;
    mcVideoControls.mcVolumeFill.mcFillgreen.width = 1;
}

function unmuteClicked(e:MouseEvent):void {
    // set volume to last used value
    setVolume(intLastVolume);

    // update scrubber and fill position/width
    mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 341;
    mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}

function volumeScrubberClicked(e:MouseEvent):void {
    // set volume scrub flag to true
    bolVolumeScrub = true;

    // start drag
    mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(339.9, 14.1, 59.5, 0));
}

function progressScrubberClicked(e:MouseEvent):void {
    // set progress scrub flag to true
    bolProgressScrub = true;

    // start drag
    mcVideoControls.mcProgressScrubber.startDrag (false, new Rectangle(55.8, 14.1, 176.9, 0));
}

function mouseReleased(e:MouseEvent):void {
    // set progress/volume scrub to false
    bolVolumeScrub  = false;
    bolProgressScrub = false;

    // stop all dragging actions
    mcVideoControls.mcProgressScrubber.stopDrag();
    mcVideoControls.mcVolumeScrubber.stopDrag();

    // update progress/volume fill
    mcVideoControls.mcProgressFill.mcFillgreen.width = mcVideoControls.mcProgressScrubber.x + 5;
    mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;

    // save the volume if it's greater than zero
    if((mcVideoControls.mcVolumeScrubber.x - 341) / 53 > 0)
     intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 341) / 53;
}

function updateDisplay(e:TimerEvent):void {
    // checks, if user is scrubbing. if so, seek in the video
    // if not, just update the position of the scrubber according
    // to the current time
    if(bolProgressScrub)
     nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 176.9))
    else
     mcVideoControls.mcProgressScrubber.x = nsStream.time * 176.9 / objInfo.duration + 55.8; 

    // set time and duration label
    mcVideoControls.lblTimeDuration.htmlText  = "<font color='#ffffff'>" + formatTime(nsStream.time) + "</font> / " + formatTime(objInfo.duration);

    // update the width from the progress bar. the grey one displays
    // the loading progress
    mcVideoControls.mcProgressFill.mcFillgreen.width = mcVideoControls.mcProgressScrubber.x - 55.8;
    mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 176.9 / nsStream.bytesTotal;

    // update volume and the green fill width when user is scrubbing
    if(bolVolumeScrub) {
     setVolume((mcVideoControls.mcVolumeScrubber.x - 341) / 53);
     mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
    }
}

function onMetaData(info:Object):void {
    // stores meta data in a object
    objInfo = info;

    // now we can start the timer because
    // we have all the neccesary data
    tmrDisplay.start();
}

function netStatusHandler(event:NetStatusEvent):void {
    // handles net status events
    switch (event.info.code) {
     // trace a messeage when the stream is not found
     case "NetStream.Play.StreamNotFound":
      trace("Stream not found: " + strSource);
     break;

     // when the video reaches its end, we stop the player
     case "NetStream.Play.Stop":
      stopVideoPlayer();
     break;
    }
}

function stopVideoPlayer():void {
    // pause netstream, set time position to zero
    nsStream.pause();
    nsStream.seek(0);

    // in order to clear the display, we need to
    // set the visibility to false since the clear
    // function has a bug
    vidDisplay.visible     = false;

    // switch play/pause button visibility
    mcVideoControls.btnPause.visible = false;
    mcVideoControls.btnPlay.visible  = true;
}

function setVolume(intVolume:Number = 0):void {
    // create soundtransform object with the volume from
    // the parameter
    var sndTransform  = new SoundTransform(intVolume);
    // assign object to netstream sound transform object
    nsStream.soundTransform = sndTransform;

    // hides/shows mute and unmute button according to the
    // volume
    if(intVolume > 0) {
     mcVideoControls.btnMute.visible  = true;
     mcVideoControls.btnUnmute.visible = false;
    } else {
     mcVideoControls.btnMute.visible  = false;
     mcVideoControls.btnUnmute.visible = true;
    }
}

function formatTime(t:int):String {
    // returns the minutes and seconds with leading zeros
    // for example: 70 returns 01:10
    var s:int = Math.round(t);
    var m:int = 0;
    if (s > 0) {
     while (s > 59) {
      m++;
      s -= 60;
     }
     return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
    } else {
     return "00:00";
    }
}

// ##########################
// ############# INIT PLAYER
// ##########################
initVideoPlayer();

Answer 1

i'm not sure to understand how you go about it, just being lazy trying to figure out your code :) but i've noted that you use the startDrag function , which i personally tend to avoid. lee brimelow has a very good tutorial about an OOP scrollbar where he explains a way around this. granted, this hasn't got much to do with video but i now used this technique anytime i need to register some MouseMove events. in any case, i really think it would solve your 'jumping' problem. the basic idea is to register your mouse position on mouse down , taking account of any possible offsets , then add a listener to mouse move events which will update any scrubber info you may need...

hope this helps!

check http://www.gotoandlearn.com/play?id=71