This is a problem i stumbled upon while trying to add a Sprite or MovieClip (or any DisplayObject) with actionscript to my DisplayList in Flex. I wanted to add a View3D (which is an extended Sprite) to my DisplayList in Flex. This just didn’t work because the Container Class overrides the addChild method:
1 2 | var canvas:Canvas = new Canvas(); canvas.addChild(new Sprite()); |
According to the documentation i can add any type of DisplayObject as a child to any type of Container, but when you try to do that you’ll get this:
1 | cannot convert flash.display::Sprite@54abdd1 to mx.core.IUIComponent |
This is because Canvas, or more specific, Container tries to cast our newly created Sprite to a UIComponent, which is an Object lower in the Flex inheritance chain and casting to a more specific type is not allowed. This is one of the basic principles of Object Oriented Programming; you can’t cast any object to another object of a more specific type because you would add functionality to it by doing that.
I could just add my Sprite to the rawChildren property of my container like this:
1 2 | var sprite:Sprite = new Sprite(); canvas.rawChildren.addChild(sprite); |
But that’s not a really nice solution because the sprite wouldn’t behave like a Flex component and I would get my Sprite mixed up with all of the skinning Sprites and MovieClips of the container.
But I’m wandering off now, here’s the solution to our little Flex and Sprites and addChild problem:
1 2 3 4 | var canvas:Canvas = new Canvas(); var uiComponent:UIComponent = new UIComponent(); canvas.addChild(uiComponent); uiComponent.addChild(new Sprite()); |
Just use a UIComponent as a container for the Sprite. For as far as i know UIComponent is the only component that can actually add a Non-Flex-Component as a child.
Thank you!! This is the only site that had a short and absolutely clear answer and full explanation.
It still doesn’t make sense to me that a named new sprite or movieclip cannot be added directly to a flex canvas via AS3 scripting when all are created with custom classes… but for the latter 3 lines of your example I’ll happily add them rather than flipping, mixing, and rematching code which “should” work.
Thx
I was using the rawChildren method and noticed that my Sprite was breaking out of its flex container. I thought this method would fix this but it is still un-masked. While I agree that this is definitely the better method I’m suprised by my results. Any ideas?
Further update on this … the RawChildren method of a Canvas forces its container to resize. Adding Sprites to Canvas’s still forces them out of the masked area of the container however … very frustrating.
just add the width and height of the uicomponent, something like:
var canvas:Canvas = new Canvas();
var uiComponent:UIComponent = new UIComponent();
canvas.addChild(uiComponent);
uiComponent.addChild(new Sprite());
//add the below
uiComponent.width=100;
uiComponent.height=100;
thanks
omg Thank You so much!
This problem has been killing me.
Do you know of anyway to allow an external .as doc to be aware of the displayobject containers in your main mxml document? So they can be referenced? No big deal, just thought it was worth asking.
THANKS A LOT, you really saved my day.
thx, you made my day
very helpful, thank you!
i’ve been (mis)using rawChildren all this time
Thank you for generously providing this code. It was a joy to see something I’ve been struggling with spark to life without any problems.
thanks man! this is really useful
That’s it
Thanks a lot.
Excellent post! — Concise, to the point and very informative. Kudos for a job well done!
Thank you!!! Now I understand what was my problem
Thank u…..
Thx for the tip, this is not well documented by Adobe at all.
Something I don’t understand though. The sprite can be moved outside of the canvas’limits and will still be displayed.
What is the point of a container if it doesn’t limit the area in which its children can be displayed?
It seems to me that adding sprites to the stage directly will have the same results…
Pierre