DisplayObjectContainer into Flex component… how?

Question

I'll re-write this question to be clearer.

I'm trying to get a class file from Flash into Builder.

Everything in that class sits inside a Sprite called mainContainer . Now I'm trying to get that `mainContainer' which hold the graphics for the class into a Flex Application.

This is proving to be a problem as their are many various ways of doing it (it seems going by numerous Google searches).

First off I declare an MXML Canvas with an Image inside it (as I read would work):

<mx:Canvas x="268" y="10" width="756" height="680" id="canvas">
    <mx:Image id="spriteLayer" x="268" y="0" width="756" height="700" scaleContent="false" autoLoad="true">

    </mx:Image>
</mx:Canvas>}

Ok, my plan was then to pass the Image reference her of spriteLayer to the class I'm trying to run:

            import includes.Spirograph;
            public var spiro:Spirograph = new Spirograph(spriteLayer);

Unfortunately it only ever passes null into the Spirograph class:

        function Spirograph(canvasImage:Image):void
        {   
            this.canvas = canvasImage;
            mainContainer.graphics.beginFill(0xFFFFFF);
            mainContainer.graphics.drawRect(290, 0, 670, 700);
            mainContainer.graphics.endFill();

            ui.addChild(mainContainer);
            canvas.addChild(ui);
}

Not sure what to do.

Many thanks.

Answer 1

I think you need to read up on the Flex Component LifeCycle . Most likely the spriteLayer component is not yet created or initialized when the new Spirograph(spriteLayer) code called. When is that code called?

The Flex Component LifeCycle is a series of methods and events that create the Flex UI. You can override these methods, or listen to these events to 'do stuff'. The canvas and spritelayer will not be created until after the createChildren method is called; and default property values are defined before that happens.

You could override createChildren() and do the initialization there:

override protected function createChildren():void{
 super.createChildren()
 spiro  = new Spirograph(spriteLayer);
}

or you could listen to the initialize event and set the default in there:

<mx:MyParentComponent initialize="onInitialize()">
 <fx:Script>
   protected function onInitialize():void{
    spiro  = new Spirograph(spriteLayer);
  }
 </fx:Script>
</mx:MyParentComponent>

As another poster commented, you could also do the initialization (like above) in the creationComplete event, although I would personally recommend against doing that. The creationComplete event dispatches at the very end of the lifecycle; and most likely the changes you're doing will cause a renderer event to "restart", forcing most of the lifecycle to parse through again; the component would be resized (measure()) and elements repositioned (updateDisplayList()). Setting default values as early in the lifecycle as possible is recommended.

Answer 2

for flex 4 - use http://docs.huihoo.com/flex/4/spark/core/SpriteVisualElement.html

your sprite, if its a custom class extending sprite extend SpriteVisualElement instead. Otherwise just stuff it in a UIComponent, as UIComponent supports addchild, while it can be handled in flex like a normal flex control (addElement) etc.

So far example if this sprite is embedded in a flash swc with the symbol name of SpriteTest. In flex, you could add it to another component like soo...

in mxml put a UIComponent, give it an id... of say ucSpriteHolder in script, var mcMySprite:Sprite = new SpriteTest(); ucSpriteHolder.addChild(mcMySprite)

Answer 3

if you are doing public var spiro:Spirograph = new Spirograph(spriteLayer); right inside the <fx:Script> tag, moving it into canvas creationComplete event handler should help