HDflix an AS2 FLV Player For Custom Skins – taterboy
May 10th, 2009 | Filed under: ActionScript 2, Design, Flash, Free Components/Classes, Tips, Video

There are many video players and player skins available online, but it can take hours to build something completely custom. Here is an AS2 FLV player that can make creating completely custom Flash video players a lot easier. HDflix is a fully functional player, but allows you to assign your own artwork to the player controls. This is not skinning an existing component, it is creating artwork, then assigning the artwork pieces to each control. Once a control is assigned, rollovers, button state events and control functions are automatically applied to your artwork.

See the Readme file and demo below.

HDflix
Created by Todd Williams for HD Interactive.
©2005 - 2009

HDflix is a full featured AS2 FLV player contained in an swf, that quite frankly is not very pretty. What makes HDflix special is that all the controls and functionality can be transfered to your own artwork. This is cooler then just skinning a component, you create all the artwork using any layout you can dream up and HDflix will turn that artwork into your own fully functional video player.

Here is a basic rundown of how it works.

1. Create a totally custom video player design. We are not skinning, so size, layout, and aspect ratio are not restricted. Import all the artwork into Flash, if not already.

2. Turn the artwork you want to use as the video controls into MovieClips and give them instance names.

A. basic controls like fast-forward and skip can have button simulated rollovers by adding or modifying artwork on multiple frames and pasting the action script below onto the first frame. This script progresses to frame 2 on rollover and back to frame 1 on rollout. Create a highlight effect and add it to frame 2 and you are done. If you want more animated effects, just modify the commands below to get the effect you want.

?View Code ACTIONSCRIPT
function btnFun(val,pram){
	if(val == 1){
		//rollover
		gotoAndStop(2);
	}
	else if(val == 2){
		//press
	}
	else if(val == 3){
		//release
	}
	else{
		//rollout
		gotoAndStop(1);
	}
}
stop();

B. Controls like Play/Pause and Mute normally have two states, a Play state and a Pause state, they also have a rollover. This code calls a MovieClip instance called “pRoll” and tells it to go to the second frame on rollover and return to the first frame on rollout. The states are controlled with the param argument.

?View Code ACTIONSCRIPT
function btnFun(val,pram){
	if(val == 1){
		//rollover
		pRoll.gotoAndStop(2);
	}
	else if(val == 2){
		//press
	}
	else if(val == 3){
		//release
		if(pram == 0){
			//alternate state
			gotoAndStop(2);
		}
		else{
			//default state
			gotoAndStop(1);
		}
	}
	else{
		rollout
		pRoll.gotoAndStop(1);
	}
}
stop();

4. Once all the controls are prepped we can move on to the video window. Goto the Library palette. On the top right corner there is a drop-down menu. Click it and choose “New Video” from the list. A new Video Object is added to the Library. Select it, drag it to the stage, size it to fit your design and input an instance name.

5. If you want a video time code display, create a dynamic TextField, give it an instance name and embed the desired font.

6. HDflix is just an swf, you load it into your existing project using loadMovie();. Once HDflix is loaded it looks to the parent MovieClip for some instructions. To allow for multiple uses of HDflix within the same parent, all instructions are prefixed with the name given to the loading MovieClip that is HDflix. If I have a MovieClip called “vid1″ and use vid1.loadMove(”HDflix.swf”);, then all the instructions will be prefixed with “vid1″

7. All the hard work is done, now assign the controls you built and named by filling in the arrays below.

Video Playback Controls:
[instName]Ctr = new Array(play/pause MovieClip, rewind MovieClip, fast-forward MovieClip, skip forward MovieClip, skip back MovieClip);

Example: assuming there is a Play/Pause MovieClip with the instance name of “playMC”, a rewind MovieClip named “rrMC” and a fastforward instance named “ffMC”.
vid1Ctr = new Array(playMC, rrMC, ffMC, null, null);

note: Controls you do not wish to use, place a null in place of the MovieClip instance name.

Loader Controls:
[instName]Ldr = new Array(Loading Bar MovieClip, scale bar: true/false, loading progress text , finish loading function );

note: You can use a “*” in the progress text string to designate which part of the string will appear before and after the percentage information.

Volume Controls:
[instName]Vol = new Array( mute button MovieClip, volume bar MovieClip, volume scrub button MovieClip );

Status Displays:
[instName]Stat = new Array(Scrub bar or scrub bar mask MovieClip, scrub or playhead MovieClip, count down TextField, count up TextField, status message TextField, play message TextField , pause message TextField, loading message TextField);

note: placing “_combine” as the count up item of the array will join count down and count up with a “/”. Example: 00:02:27 / 02:11:00

note: placing “_title” as the play message item in the array will display the video title

[instName]FN = file url of video to load // default is “video.flv”

[instName]Title = title of video

8. Now lets hook up the video display object.
[instName]vidObj = [instance name of the video object on the stage];

9. Publish your new custom video player.

To expand HDflix with your own features HDflix sends out the following notices to the method below.

?View Code ACTIONSCRIPT
[instName]Fun = function(ev:String){
   if(ev == "start"){
      // video playback has started.
   }
}

[instName]Fun = a function that give the following notices:
“fin” = video has finished playing.
“play” = play button has been pressed
“pause” = pause button has been pressed
“loaded” = video has completely loaded
“ready” = video is ready to stream or is loaded, but auto play is set to false.
“start” = video has started

To override any controls, using the following methods.
– instance functions
PP(Boolean); //true/flase
rrFun(Boolean); //true/flase
ffFun(Boolean); //true/flase
mute(Boolean); //true/flase
killVid(); //kills netconnect

sample: instance.PP(true);

A review of the control methods that are called.
– button functions
btnFun(2) = on Press
btnFun(1) = rollover
btnFun(0) = rollout, dragout
btnFun(3, 1 or 0) = release: 1 = play, 0 = pause

Demo:

Download Source

Technorati Tags: , , , , , ,

Other Related Articles:

|

11 Comments »

  1. Nice, does this player support rtmp streams?

    Comment by rob — August 25, 2009 @ 3:23 pm

  2. It is about one line of code away from working with rtmp. Unfortunately I do not have an fms server running right now to test it on. I can send you the source if you want to work on it. It is pretty old code, so if you can excuse the mess.

    Comment by taterboy — August 25, 2009 @ 3:38 pm

  3. how to add ” FULL-SCREEN ” functionality to this ??

    Comment by jam — September 26, 2009 @ 9:51 am

  4. You can add fullscreen functionality to your skin. Here is some code I found online.
    http://www.funky-monkey.nl/blog/2007/09/10/fullscreen-mode-in-as2/

    Comment by taterboy — September 26, 2009 @ 12:23 pm

  5. thank you for your the guide

    Comment by jam — September 28, 2009 @ 7:13 am

  6. One more Question
    How i attach captions / sutitles to the video ?

    Comment by jam — October 8, 2009 @ 4:41 am

  7. this will take a little work, but it is not too bad.

    You can ether put the subtitles in your video or build an xml file with subtitles.

    Here is one or many ways to do it with xml files

    First the xml file:
    I saved this with the name “cue.xml”

    ?View Code XML
    <xml>
	<cue time="0:2:0">This is cue ONE</cue>
	<cue time="0:6:0">This is cue TWO</cue>
	<cue time="0:12:0">This is cue THREE</cue>
	<cue time="0:20:0">This is cue FOUR</cue>
</xml>
    ?View Code ACTIONSCRIPT
    //start a new xml instance and load in xml file
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = xmlLoaded;
xml.load("cue.xml");
 
//onload of xml file start a frame event.
//set cueIndex to 0 (first index of xml file)
var cueIndex:Number = 0;
function xmlLoaded(success){
	onEnterFrame = function(){
                //set old index to cue index, will use this to compare later.
		var oldIndex:Number = cueIndex;
 
		//set cueIndex using the findIndex utility below - returns index of xml, based on countdown textField.
		cueIndex = findIndex(countDown.text, xml);
 
		// not interested in index comes back as 0 or less
		if(cueIndex <= 0 ){
			return;
		}
 
		//get the text form the xml file using the current cueIndex, based on current time in countdown TextField
		var cueTxt:String = xml.childNodes[0].childNodes[cueIndex-1].firstChild.toString();
 
		//only update the text field if something changes
		if(cueIndex != oldIndex  && parseTime(countDown.text) > 1000){
			//trace(cueIndex + " / " + oldIndex);
 
		        // place reference to TextField you want to display the subtitles.
			trace(cueTxt);
		}
	}
}
 
// loops through xml file until it finds the correct index based on current time, returns index
//this allows things to work even if we rewind or fast forward
// if you change the format of the xml, you may have to update the code to match
function findIndex(curTime:String, src:XML){
	if(src.childNodes[0].childNodes.length > 0 && src.childNodes[0].childNodes.length != undefined){
		var index:Number = 0;
		for(i = 0; i < src.childNodes[0].childNodes.length; i++){
			var cueTime:Number = parseTime(src.childNodes[0].childNodes[i].attributes.time.toString());
			var cueCheck:Number = parseTime(curTime);
			if(cueCheck > 1000){
				if(cueTime >= cueCheck){
					index = i;
					break;
				}
			}
			else{
				break;
			}
		}
		return(i);
	}
	else{
		return(0);
	}
}
 
//takes a string in 00:00:00 format and converts to milliseconds
function parseTime(str:String){
	var arr:Array = str.split(":");
	var time:Number = ((Number(arr[0]) * 60) * 1000) + (Number(arr[1])*1000) + Number(arr[2]);
	time == NaN ? time = 0: null;
	return(time);
}

    Hope this helps,

    Comment by taterboy — October 8, 2009 @ 8:16 am

  8. thank you for your effort and help

    i am going to check this

    Comment by jam — October 9, 2009 @ 3:49 am

  9. If i am making a video gallery (like flv’s of ppts), will this be able to do it?

    because i tried doing myself one from scratch, and works fine with one, but when i have 2nd, it fails

    Comment by Nebion — October 28, 2009 @ 11:01 am

  10. The code for the video player will just play video, but you can add the gallery functionality to your application that runs HDflix. There are a few ways to approach it based on how you have things set up.

    Here are three scenarios:
    HTML video links 1 - If you have html links for each video file, then you can reload your video player using a query string and/or FlashVars. Once the new video path is in your swf, set the [filename] variable.

    [instName]FN = file url of video to load // default is “video.flv”

    HTML video links 2 - Use External Interface and javascript to pass in the new video file path. once the flash function from javascript is called you can call the following methods to stop the current video and load the next video file.

    [instName].killVid();
    [instName].LF(new file path, title, loop[true or false] );

    The same goes if you have all your video links in flash, just stop the current video and load the new path.

    Comment by taterboy — October 28, 2009 @ 11:32 am

  11. Thanks for the info and coding….

    Comment by Flv Player — October 30, 2009 @ 6:46 am

RSS feed for comments on this post. TrackBack URL

Leave a comment