Skinning the Longtail Player (aka JW)

 Feb, 11 - 2009   no comments   Uncategorized

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 ( 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.player.View;


	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

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

			//set new 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);


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

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

			view.addModelListener(ModelEvent.TIME, onPlayerTimeUpdate)

		private function onPlayerTimeUpdate (e:ModelEvent)
			trace ("pos" +

Related articles

Leave a Reply

Your email address will not be published. Fields with * are mandatory.