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