One of the challenges in using rich assets like images or Flash symbols in Flex is making them compatible with the Flex layout managers. There are a few ways to do this (some of which will be topics of future posts), but one of the easiest is to wrap the asset in a UIComponent instance that translates between the Flex layout API, and the basic Flash Player transformation API shared by all DisplayObjects.

I built a simple example of such a class, called DisplayObjectWrapper, which you can download and use or extend freely. It does a good job of translating Flex layout into resizes for it's content, and vice versa. It's super simple to use via mxml: 
// mxml, syntax 1:
<local:DisplayObjectWrapper>
    <DisplayObjectToWrap/>
</local:DisplayObjectWrapper>

// mxml, syntax 2:
<local:DisplayObjectWrapper content="com.gskinner.MyClass"/>
// where content is either a qualified class name as a string

// mxml, synax 3:
<local:DisplayObjectWrapper content="{ myInstance }"/>
// content can also be an expression resolving to a class definition or a DisplayObject instance
It's also simple to use with ActionScript: 
// in a script block (ex. in an initialization handler):
var dow:DisplayObjectWrapper = new DisplayObjectWrapper();
dow.content = new Sprite(); // or any DisplayObject instance
myContainer.addChild(dow);
There are a couple of useful properties, like content, which lets you set or access the content (to call methods on a Flash symbol for instance: myDOW.content.stop(); ), and watchSize which lets you specify whether the DOW should keep an eye on your symbol's size, and trigger layout invalidation when it changes (if it's animated for instance).

Here's a (very) simple demo that you can download, which uses an embedded animated Flash symbol to demonstrate watchSize.


You can download the DisplayObjectWrapper class and this demo by clicking here.