How to add any AS object to a Flex Container (like a Sprite)

I just discovered that we could include <mx:UIComponent> in any mxml page. I had no idea :p, but, this could certainly be useful. Internally, someone asked how they could add something like a Sprite or a Video object to a Flex container (rather than using the VideoDisplay provided by Flex). Here were some basic guidelines from Alex Harui that I thought might come in handy for some of you:

1. Navigator children must be Containers.

2. Container children must be IUIComponents.

3. UIComponent children can be anything.

So, to add something like a Sprite to your Container, you would wrap the Sprite in a UIComponent. Here is an example:

<mx:UIComponent id=”spriteWrapper” initialize=”spriteWrapper.addChild(new Sprite(…))” />

7 responses

  1. I’ve been doing that for a while using AS3 code (not MXML), but it’s pretty kludgy. I pine for the days when using the Flex framework with Flash-based AS3 projects is transparent.

  2. What specifically would you like to see? Have you tried the flex-flash integration kit? Does this bring us closer at all?

  3. There is one nice solution that may be useful – adding child in rawChildren. Look at example: rawChildren.addChild(yourSprite);

  4. Hello
    thnx for all the info.
    Do you have a working example of this Sprite integration?


  5. I’m trying the same thing, but all I get is a “Cannot access a property or method of a null object reference” when the code assigns a value to the align property of the stage. The same code works fine when the AS object is the main class (i.e. the file compiled with mxmlc. But blows up when included in an Application’s Panel.

  6. Wow! Thanks a million. I was stuck with trying to create a Sprite to draw on a canvas. Your solution made everything work just fine.

    BTW, to the person that asked for an example:

    // ‘g’ is the id of a canvas created with mxml
    var sevenup:Sprite = new Sprite();
    // draw something with the Sprite
    var uicomp:UIComponent = new UIComponent(); = “whatever”;
    g.addChild(uicomp); // and it works 🙂

  7. Excellent post. Specically your comment, Tomas.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: