while (this.numChildren > 0)
{
    removeChild(this.getChildAt(0));
}

Update:

And when you want to remove a child as a part of an event handler, do this:

event.target.parent.removeChild(event.target);

Let’s say you want to delete the button you just clicked. The button dispatches an event, and this line of code goes in the event handler. event.target is the button (or what ever object you clicked). It does look at bit strange, because you have to tell the button that it’s parent should delete the button. The button can’t delete itself.

Note:

If you’re working with Flex, use this.removeAllChildren(); Thank you Bjørnar

I spent a whole day trying to figure out why I only got square boxes, a couple of random numbers and an occasional ‘f’ now and then. I read somewhere that the configuration file for the socket server had to match the settings of the serial drivers. I didn’t pay much attention to it because I took it for granted that it was configured using a set of common settings. It turned out that I was wrong.

My drivers were set to 9600 baud, while my socket server ran at 19200 baud. Setting the socket server to 9600 baud solved all of my problems! Yes, all of them.

In modular arithmetic, or modulus if you like, numbers reset themselves when reaching a given limit. Modulus is also known as “clock arithmetic”, and the clock is a very good example for explaining modulus.

A 12 hour clock has a limit of 12, making the hours reset at 12 o’clock. So instead of becoming 13, it simply jumps back to 1. The same thing happens with a 24 hour clock, but at 24 hours instead of 12. This is as simple as I would’ve explained it, but Wolfram has a more in-depth article with links to further reading. I’m sure Google has even more.

In ActionScript you can use modulus like this: x = y % z. Which reads like “x is y modulus to z”.

Following the example of the clock we would have to do a modulus of 12 on the total numbers of hours since the beginning of time to get the current time. Why? Ever since we started keeping track of time the numbers of hours have kept increasing. Time never stops. So instead of saying “oh, the time is 87654826253745 hours”, we do a modulus of 12 on 87654826253745 and get 7. And by looking out of the window we can tell if it is morning or evening.

Modulus can however not be used to count the number of turns the hour hand has turned at 87654826253745 o’clock. It only knows when it has reached the limit, not how many times it has turned.

So, as you probably have guessed already modulus is a drop dead simple way of outputting grids. And this is how I would’ve made a grid of images:

private _max:Number = 20; // Total number of items
private _rows:Number = 5; // Items per row
private _width:Number = 100;
private _height:Number = 100;
 
private function createGrid():void
{
       var ix:Number = 0;
        for(var i:int=0; i<_max; i++) // Iterate through all items
        {
                var col:Number = i % _rows;
                col==0 ? ++ix : void;
                x = ix * _width;
                y = col * _height;
    }
}

Let’s look at each of the lines;
01 : define max number of items in the grid
02 : define max number of items in each row
03 & 04 : width and height of each of the items
08 : x position of row <em>n</em> (increases for each new row)
09 : loop through all items
11 : col is ‘current item’ modulus to ‘items per row’
12 : if col has reset, increase ix by one. Here we jump to the next column
13 : place item at x position ‘ix * _width’
14 : place item at y position ‘col * _height’

And that’s about it. Simple, right?

If anyone of a more mathematical kind of person discovers something wrong, or would’ve explained modulus in a better way, do arrest me. I’m still learning.

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

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

System.setClipboard(source.text);

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

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.