I was getting this weird error whenever switching from a given state to it's parent state in a Flex 3.5 based project.

RangeError: Error #2006: The supplied index is out of bounds.
	at flash.display::DisplayObjectContainer/addChildAt()
	at mx.core::Container/addChildAt()
	at mx.effects::EffectManager$/removedEffectHandler()
	at Function/http://adobe.com/AS3/2006/builtin::apply()
	at mx.core::UIComponent/callLaterDispatcher2()
	at mx.core::UIComponent/callLaterDispatcher()

It threw me for a minute because I hadn't made any changes to effects since I last tested the application and I couldn't see any connection between the code I had just written and any effects in the app. But after hunting around I found the culprit. There's a set of components in a Canvas that gets removed when moving to the parent state. What I had done was separate those components into two Canvases(Canvi?). For whatever crazy reason the new second Canvas can't have a RemoveEffect. The code works fine if just the first Canvas has it, but if both or just the second Canvas has it then it throws that error.

side note: the reason it took me a while to find the source of the error was because I copy/pasted the canvas declaration only changing the id, and I forgot that there was a removedEffect associated with it.

But wait there's more. The reason I split the components into two distinct Canvases was so I could position one below and the other on top of a third major component in z-space. The solution was to add the first Canvas as a "firstChild" and the second Canvas as a "lastChild". That it seems was the problem. In mxml when changing states you apparently can't add a firstChild before adding a lastChild. so I copy and pasted the first Canvas below the second one, so that all the lastChild additions occurred before all the firstChild additions and voila, presto, it works.

The reason is that when you move from a state back to its parent state it follows the order in which you add components in the state declaration to remove them. If the first component you add is added as a firstChild then that get's removed first changing the indexes and number of children of the parent container. I guess the underlying state changing function already calculated what the lastChild index was, so when trying to remove a Child with the pre-calculated index of lastChild it triggered an index out of bounds error.

I'm getting used to Flash Builder 4, man is it fast. I came across this plugin by Lee Brimlow, it's SnipTreeView adapted to work with .mxml files and in FB4. Just download it from his blog and add it to the plugins folder, then restart. There's a quick video how to, highly recommended.

Flash Snippets [http://theflashblog.com/?p=1494]

Fonts are the creative content of the font designer or foundry, so if you don't have a collection of fonts you've paid for, and aren't planning on purchasing some, you should stick to free fonts. A good place to start is Google, you'll find plenty of foundries who make a few free fonts, and several sites like [http://www.fonts.com/]. You may choose to embed a particular font that came with your operating system for the sake of cross-platform uniformity as well, however you still need to make sure that it is either an OTF (Open Type Font) or TTF (True Type Font), as Flex works with these file types. There are ways to convert postscript and other font formats to OTF/TTF but it's tedious and you're better off finding a different compatible font

You can also load fonts as an external resource in your apps similar to just calling a system font, however embedding them is the way to go. Embedded fonts can be anti-aliased, take part in effects, and are handled as a true asset and thus with a higher regard in your application.

There are a number of ways to embed fonts in your Flex applications. If you're embedding a font that's active in your system you can specify the system name as in the following example:

@font-face {
src: local("Arial");
fontFamily: MyFont;
}

Likely however you'll not want to keep a whole bunch of fonts active or have to think about activating your project fonts every time you compile, in which case you can copy the font file to your project directory. In the example below the Arial font is in a 'fonts' sub-directory of my project:

@font-face {
src: url("/fonts/Arial.ttf");
fontFamily: MyFont;
}

Note: If you use spaces in the font family as in "My Font" you'll run into an issue where the font appears in Design View but isn't compiled with the app.

There are other options that can be specified to customize your font-face:

fontStyle: normal | italic | oblique;
fontWeight: normal | bold | heavy;
advancedAntiAliasing: true | false;

These style declarations are placed within the mxml <mx:Style> tag. The above code uses CSS, which is best for styling and skinning your application, but if you prefer you can do the same thing in actionscript.

For more information on how to, and why you should/shouldn't embed a font in your applications refer to [http://livedocs.adobe.com...fonts_09.html]

Keep in mind that font files can be quite large, in the 5-12MB+ range and that size will be added to the weight of your application. It's best to use lighter fonts when creating online apps, in which case try to find one's under 200KB.