mandarin.no

Earlier this week I finished a project for one of our clients. The client produces quite lot of video content, and wanted a video player that could be embedded in other websites. This was a rather straight forward project where I got to use a lot of things I already knew. But still I learned a few new things.

One of the requirements was the file size of the finished SWF. I’d like to keep it to a minimum with no preloading before the buffering starts. It has to look good, so some graphics will have to be included, but the video is what people wants to see. One of the tricks to reduce filesize and loading time is avoiding using container classes like the canvas, hbox, vbox and the likes. The container classes are handy and useful for laying out your components. But they contain a lot of functionality I didn’t need, and whenever you add a component to a container class, it will redraw itself. So the initialization process will be slower. (Note to self; put all components inn the container before you add it to stage. That will reduce number of redraws)

As a general rule; if all you need to do is place the component at a particular coordinate; try avoiding using container classes and rather use the x, y properties of the component itself. It is very tempting to let the container do the positioning for you, but with a few extra lines of code, you can most likely avoid using them.

So I discarded the thought of using any containers at all. So how do I approach the placement of the components? Well, first of all I need to find the dimensions of the FLV, and then place the control bar accordingly.

When I first started making Flex apps, I read a lot of articles about developing with Flex. One of them was about the application startup order. I realized that was a subject worth paying attention to, but never did. And all of my Flex apps so far have worked fine. But this time I started to understand the importance of knowing how your Flex app builds itself up.

The video player reads a few FlashVars at startup, one of them being the URL to the FLV. Now, the dimensions of the FLV can vary from file to file, so sending the width and height will only cause more work to be done server side. Flex (and Flash) have a very easy to use event for retrieving the meta data of a FLV. So I decided to keep the number of FlashVars down to a minimum, and rather rely on the MetadataReceived event.

The MetadataReceived event doesn’t fire until the first part of the FLV has been read. So, since the layout of the video player is waiting for the dimensions of the FLV, I have would have to put this function at the earliest possible stage of the creation process. Sounds easy, but there was one thing that I didn’t think would matter but did; buffer time.

I was thinking about implementing some kind of dynamic buffering routine to take in account of the various bandwith’s people have. But the video’s are rarely longer than 30 seconds and on an average of about 6-7MB. So I figured it would be sufficient to just set the buffering to about 25-30% of the total playtime. And so I did.

Now, what happends when you set the bufferTime property of the videoDisplay component to e.g. 5 seconds, is that videoDisplay will wait until the buffer is full before triggering the MetadataReceived event. I don’t see any logical reason for this, but that’s the way it is. The solution to this is simply setting the bufferTime to 0 at initialization. The MetadataReceived will then trigger immediately, giving me all of the details on the FLV I needed. In the event handler for the Metadata-event I simply adjust the bufferTime up to the desired level. It is important to set the autoplay attribute of the VideoDisplay to false, or else the video will try to play immediately since the buffertime is 0.

At this time I have all of the information I need for placing the control bar. In the event handler for MetadataReceived I simply set the control bar’s y parameter to the height of the video. And voila! The layout is finished, and it all happend withing a fraction of a second.

To give the viewer an indication of the buffertime, I simply used a ProgressBar component. And on top of that I put an HSlider for scrubbing. In retrospect I now see that the ProgressBar is overkill for this purpose. It features a lot of functionality I don’t use, and I could have managed to achieve the same result using a Sprite which I scale in width (just like with the good old preloaders we made when AS1 and 2 was the big thing).

I mentioned earlier that I didn’t want any preloading of the application. But Flex throws in a preloader no matter what. In many cases this is a blessing, because you don’t have to make it yourself. But in this case, it’s a fair bit annoying. I guess it has to be there because of the creation process, which can take a few seconds -even on tiny applications. So my only option was to make it not look like the standard Flex preloader. I found a few articles on customizing the Flex preloader which helped me. Luckily, this doesn’t take more than a second in this application, so I simply used the client’s logo as a preloader. No indication of any progress at all.

These are the few things I learned while working on this project, which will most likely help me attack my next project in a better and more efficient way. Now, there’s one more thing I’d like to make a note of. And that’s something I didn’t learn.

It seems to me the VideoDisplay component doesn’t have any events for when the file is not found. I use the debugger version of the Flash Player, and that throws me a large error message saying the file was not found. It would’ve been better (in terms of usability) for me to trace this error using events instead, and then outputting a message onscreen saying “file not found”, or even showing a video where someone says “Sorry, file not found. But you might want to look at these videos…”. I could probably have used NetConnection. If there are anyone out there with an idea, or even better; an answer to this, please leave a comment. I’d love to hear about it.

Resources
Flex 3 – startup order
David Colettas slideshow on Flex optimization. It’s only a slideshow, but there are a few good tips to pick up.
Powered By Hamsters has a few good tips on optimizing a Flex app.

Alagad – Skinning with Flex 3 CSS Explorer
Adobe Devnet – Using CS3 to design styles and skins for Flex 3
Flex 3 Help – Applying skins. Some code examples of how to add skins to your components

Ted Parick – Flex custom preloaders
FLEXibleMySelf – Custom Preloader (Flex 3)

Always helpful:
Flex 3 Language Reference
Flex 3 Style Explorer

Oh, how I love the sweet animations from PES! Beautifully made, and with lots and lots of charm. Just look at the stuff they used to make KaBoom!, and the witty RoofSex. And it must have been fun making the Human Skateboard.

Be also sure to check out their store, which features the best fireplace DVD I have ever seen. The fireplace DVD and a Flying Kong T-shirt for $24.99? It’s a bargain!

Technorati Tags: animation, inspiration, stop motion

Interesting (and more than a bit annoying) observation; neither the property totalTime or the event MetadataEvent.METADATA_RECEIVED will trigger unless the buffer is full.

I just discovered this as I tried to dynamically set the bufferTime to be 30% of the total playtime (I calculate the bufferTime using totalBytes and bytesLoaded). But as I traced values like totalTime, I noticed it would stay at -1 until the video started playing (in other words; the buffer was full). Just for the sake of curiosity I set up an eventlistener listening for the duration property of the MetadataReceived event object. Interesting enough it wouldn’t trigger until the buffer was full.

It has been filed as a bug at Adobe’s Flex Bug and Issues Management System.

Possible workaround:

1. set bufferTime to 0 at initialization (this would hopefully trigger the READY event (or MetadataReceived if you prefer)
2. catch the totalTime value
3. pause/stop the video
4. increase bufferTime (or skip number 3 and go directly to number 4. It might work?)

Technorati Tags: flex, as3, actionscript, meta data, video, development

A useful little snippet of code for when you want to copy text to the clipboard:

System.setClipboard(source.text);

Where ‘source’ is the id of e.g. a text field.

Today I stumbled across a handy utility class called ChangeWatcher, which lives inside the mx.binding.utils package. It provides you with a handy way of watching other object’s properties.

Here’s how it’s used:

ChangeWatcher.watch(object, “property”, handler);

Object – the object which owns the property
“property” – the property you want to watch
handler – the function name of the handler

Whenever the property of the object changes, the handler will respond. Quite handy, right?

edit:

Here’s an example for you:

Let’s say we have a class called WatchMe. Inside that class we have a public variable called ImBeingWatched. We’d like to trigger a function whenever this variable changes. To do this, we simply add one line of code:

package
{
	import mx.binding.utils.*;
	import flash.display.*;
	import flash.events.*;
 
	public class WatchMe extends MovieClip
	{
		[Bindable] public var ImBeingWatched:Boolean = true;
 
		public function WatchMe():void
		{
			ChangeWatcher.watch(this, "ImBeingWatched", doSomething);
		}
 
		private function doSomething(e:Event):void
		{
			// do something ...
		}
	}
}

As you can see, this works pretty much like using [Bindable] variables. But, in some cases this method proves quite handy.

Update: Oops! Typo. The property that ChangeWatcher is watching must be [Bindable] and Public for it to work.