Skinning the Longtail Player (aka JW)

This site is quickly becoming (just as we planned it … Mu-hu-ha-ha!) a repository documenting things that took ages to figure out, we know we’ll need again, but not often enough to trust our (rapidly aging) memories. The fact that its public and you get to play along is a bonus. I say that because writing this stuff up takes time, especially to do so clearly, neatly, and accurately. I have four projects going on, but I’m taking a moment to save this before I loose it; though perhaps muddled, disheveled, and … suspicious.

Documentation for the Jeroen Wijering video player (http://www.longtailvideo.com/) leaves something to be desired — it’s great if you want to use it as they describe. Either:
1) embed a video in an HTML page where the Flash document is (and nothing but) the video player.

2) embed a player (and perhaps its skin) by loading those components at runtime.

These are great approaches. What I’d like to do is embed my player and skin at compile time causing it to bake directly into the swf I’m distributing. As a bonus, I’d like to compile against swc files in both cases so that:

a) Compiles are faster.

b) There is one-and-only-one version of the ActionScript floating around my harddrive which is messy enough already thank you.

I know I can accomplish “b” without a swc by adding the jw project folder to my classpath, but then that’s one more thing to grab a copy of when I’m sending source to clients. Which I will forget about, and they won’t actually try compiling anything until six months later at which point my copy of the source has changed … See? I need a swc and I have good reasons.

Step 1: Create the player.swc

Open the player.fla that comes with the jw source. In the publish settings, check off create swc. Compile. Grab player.swc and add it to the classpath in your build tool of choice.

Step 2: The skin. (I’ll post mine here later, but you should understand the steps)

Make a new fla, grab a copy of the library from the original and drop it in the new Skin.fla. Edit the properties of the “player” symbol. Set it to export with a class that we’ll use in a bit CustomPlayerSkin. Follow the previous instructions for exporting a swc and adding it to your classpath.

In your project, you’ll want to do something like this:

package {
	import com.jeroenwijering.events.ModelEvent;
	import com.jeroenwijering.events.ViewEvent;
	import com.jeroenwijering.player.View;

	import flash.events.Event;

	import com.jeroenwijering.events.PlayerEvent;
	import com.jeroenwijering.player.Player;

	import flash.display.MovieClip;

	/**
	 * @author projects
	 */
	public class PlayerHarness extends MovieClip {
		private var jwPlayer : Player;
		private var skin : CustomPlayerSkin;

		public function PlayerHarness()
		{
			addEventListener (Event.ADDED_TO_STAGE, onAdded)
		}

		private function onAdded(event : Event) : void
		{
		  populateAssets()
		}

		private function populateAssets(e:Event=null)
		{
			//jwPlayer
			jwPlayer = new Player()
			//remove default skin
			jwPlayer.removeChild (jwPlayer.player)
			//skin
			skin = new CustomPlayerSkin()
			jwPlayer.addChild(skin)

			//set new skin
			jwPlayer.skin = skin
			jwPlayer.width = skin.width
			jwPlayer.height = skin.height

			jwPlayer.config.autostart = true
			jwPlayer.config.fullscreen = true
			jwPlayer.config.resizing = false

			//size and position
			jwPlayer.config.width = this.stage.stageWidth
			jwPlayer.config.height = this.stage.stageHeight
			//skin.x = 0
			//skin.y = 0

			jwPlayer.addEventListener(PlayerEvent.READY, playerReady);

			addChild(jwPlayer)
		}

		private function playerReady(evt:Event=null) {
			var view:View = evt.target.view;

			//LOAD AN FLV!
			view.sendEvent(ViewEvent.LOAD, {file:"phone.flv"});

			//ADD AN EVENT
			view.addModelListener(ModelEvent.TIME, onPlayerTimeUpdate)
		}

		private function onPlayerTimeUpdate (e:ModelEvent)
		{
			trace ("pos" + e.data.position)
		}
	}
}