masputih.com: Skinning FXVideo, The Easy Way

18 November 2008 in ActionScript 3, Flex | permalink

Skinning FXVideo, The Easy Way

If you have worked with video stuff on Flex, I'm sure you have heard or seen a nice opensource component called FX Video built & released by those generous guys at www.fxcomponents.com. If you haven't seen it, go ahead, download the component. You'll love it.

The current version of FXVideo doesn’t support graphical skins. Everything is done programmatically. Does it mean you can’t skin it ? No. With a little effort, you can replace its programmatic skins with embedded images a.k.a your super-cool graphical skins. I’ll show you how to do it in this article.

Note – We’re going to modify FXVideo sourcecode and I assume you have a working-knowledge on ActionScript 3.0 and, of course, Flex. Also, you should know how to embed images and use them. To keep this tutorial simple, I created 21x21 pixels skin assets to match FXVideo original skins.

The Original

First, we need to examine the sourcecode. And as we’re going to start with skinning the buttons, we want to focus on com.fxcomponents.controls.fxvideo package where all the button classes live.

Let’s see what’s inside the package.

Button.as : this is the base class of all other buttons
PlayPauseButton.as
StopButton.as
VolumeButton.as

Reading Button.as we can easily see that the most important parts related to the UI are these four methods : createChildren(), updateDisplayList(), onRollOver(), and onRollOut().

Button.createChildren() creates a Shape instance called icon to be used as a placeholder for programmatically-drawn icon. We don’t need this Shape and we will remove it later. Button.updateDisplayList() is where the skin is drawn.

Now we know the important bits and we can start skinning.

Embedding Images

Since we’re going to embed images, it will be nice to have them all in one central place. So let’s create a new folder inside src/ and name it assets. Put all images inside that folder and write a class named AssetsConstants to hold references to the embedded images.

The Button Class

Because all buttons have different skin for up and over states. We add two vars to the Button class:

protected var upSkin:Bitmap;
protected var overSkin:Bitmap;

Remove all lines that manipulate the graphics property of this class. As to onRollOver() and onRollOut() all we want them to do is swapping the skins so let’s replace the existing lines with this :

if (upSkin != null && overSkin != null) swapChildren(upSkin, overSkin);

Finally, remove centerIcon() and the Button class should look like this:

package com.fxcomponents.controls.fxvideo
{
	import flash.display.Bitmap;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;

import mx.core.UIComponent;

public class Button extends UIComponent
	{
		protected var upSkin:Bitmap;
		protected var overSkin:Bitmap;
		
		public function Button()
		{
			super();
		}		
		
		override public function get measuredWidth():Number
		{
			return 21;
		}
		
		override public function get measuredHeight():Number
		{
			return 21;
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			addEventListener(MouseEvent.ROLL_OVER, onRollOver);
			addEventListener(MouseEvent.ROLL_OUT, onRollOut);
		
		}
		
		protected function onRollOver(event:MouseEvent):void {
			if (upSkin != null && overSkin != null) swapChildren(upSkin, overSkin);
		}
		
		protected function onRollOut(event:MouseEvent):void{
			if (upSkin != null && overSkin != null) swapChildren(upSkin, overSkin);
		}
		
	}
}

StopButton & VolumeButton Classes

We’re starting with the StopButton class. First, remove everything inside updateDisplayList() except this line : super.updateDisplayList(unscaledWidth,unscaledHeight).

The next step is to assign the embedded images to upSkin and downSkin properties and add them to the StopButton display list. We do the same to VolumeButton class. The classes should look like below:

Remember, we must add upSkin to the display list after overSkin because we want it to show up first.

PlayPauseButton

Skinning this button is a little tricky because it's like 2 buttons (play and pause) in one and we have to use 4 images; two for play-state and two for pause-state. Go to updateDisplayList() and remove everything except super.updateDisplayList(...).

Because the button has 2 states (play and pause), each with a different set of up and down skins, we need to assign different images to upSkin and overSkin properties with regards to the private _state property everytime updateDisplayList() is executed. So we write :

//remove previous skins
while ( numChildren > 0) {
	removeChildAt(numChildren-1);
}

if(_state == "play"){
	upSkin = new AssetsConstants.PlayUpSkin() as Bitmap;
	overSkin = new AssetsConstants.PlayOverSkin() as Bitmap;
}

if(_state == "pause"){
	upSkin = new AssetsConstants.PauseUpSkin() as Bitmap;
	overSkin = new AssetsConstants.PauseOverSkin() as Bitmap;
}

We also need to override onRollOver() and onRollOut(). First, we change the access modifier of both methods on Button.as from private to protected and we override them like so:

override protected function onRollOver(event:MouseEvent):void {
	if(getChildIndex(upSkin) > getChildIndex(overSkin)) swapChildren(upSkin, overSkin);
}

override protected function onRollOut(event:MouseEvent):void {
	if(getChildIndex(upSkin) < getChildIndex(overSkin)) swapChildren(upSkin, overSkin);	
}

And this is the new PlayPauseButton:

package com.fxcomponents.controls.fxvideo
{
	import assets.AssetsConstants;
	import flash.display.Bitmap;
	import flash.display.Shape;
	import flash.events.MouseEvent;

import com.fxcomponents.controls.fxvideo.Button;

public class PlayPauseButton extends Button{
		
		public function PlayPauseButton()
		{
			super();
		}
		
		private var _state:String = "pause";
		
		public function set state(value:String):void
		{
			_state = value;
			
			invalidateDisplayList();
		}
		
		public function get state():String
		{
			return _state;
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			//remove previous skins
			while ( numChildren > 0) {
				removeChildAt(numChildren-1);
			}
			
			if(_state == "play"){
				upSkin = new AssetsConstants.PlayUpSkin() as Bitmap;
				overSkin = new AssetsConstants.PlayOverSkin() as Bitmap;
			}
			
			if(_state == "pause"){
				upSkin = new AssetsConstants.PauseUpSkin() as Bitmap;
				overSkin = new AssetsConstants.PauseOverSkin() as Bitmap;
			}
			
			addChild(overSkin);
			addChild(upSkin);
			
		}
		
		override protected function onRollOver(event:MouseEvent):void {
			if(getChildIndex(upSkin) > getChildIndex(overSkin)) swapChildren(upSkin, overSkin);
		}
		
		override protected function onRollOut(event:MouseEvent):void {
			if(getChildIndex(upSkin) < getChildIndex(overSkin)) swapChildren(upSkin, overSkin);		
		}
		
	}
}

The Controlbar

To skin the controlbar, we only need to add two lines. First, import AssetsConstants class and then go to line 227 of FXVideo.as. You'll see these lines:

controlBar = new UIComponent();
addChild(controlBar);

Add this line after addChild() :

controlBar.addChild(new AssetsConstants.ControlBarSkin() as Bitmap);

It’s done. Now we can test the player.

FXVideo with Graphic Skin

Sorry, but you do not have the minimum version (9) of flash player required to play this flash movie. You can install or upgrade flash here.

That's it. Hope this helps. If you have any problems, feel free to contact me.

Oh yeah, here's the modified sourcecode : FXVideoSkinned.rar

Possibly related articles:

Flex+PHP Simple Calculator

Next article:: Instantiating Assets from External SWF
Previous article:: CopyPixels

Comments [2]

1. aNgus , 47 days ago #

gak ngerti maksudnya ??? hehehehe
itu video elu yang buat ??? apa elu buat apaan sehh ?? atau elu udah buat pilem sekarang ??? binun …hehehehe

2. fajars , 25 days ago #

Mas Anggie bikin Skinning buat video player & container buat FLVnya itu loh yg merah. ngerti ?

Commenting is closed for this article.

masputih.com

Skinning FXVideo, The Easy Way

The Original

Embedding Images

The Button Class

StopButton & VolumeButton Classes

PlayPauseButton

The Controlbar

Possibly related articles:

Comments [2]

Looking for something ?

Categories

Friends

Books I Read

Resources