Question

I made a test by adding a MovieClip to a Canvas in Flex.

private function onInit():void {
    var mc:MovieClip = new MovieClip();
    mc.graphics.clear();
    mc.graphics.lineStyle(2, 0, 1);
    mc.graphics.beginFill(0xFF0000, 0.5);
    mc.graphics.drawRect(0, 0, 400, 300);
    mc.graphics.endFill();
    mainCanvas.rawChildren.addChild(mc);
}

private function onMouseMove():void {
    var child:DisplayObject = mainCanvas.rawChildren.getChildAt(i);
    trace("MovieClip size:", (child as MovieClip).width, (child as MovieClip).height);
}

mainCanvas is declared and instanciated in MXML:

<Canvas id="mainCanvas" width="400" height="300" />

This first attempt works fine and the console displays the following output when I move the mouse over the stage:

MovieClip size: 402 302

But when I want to explicitly set the size of the movie clip I don’t see in anymore and the ouptut display a wrong size.

Here is the update init method:

private function onInit():void {
    var mc:MovieClip = new MovieClip();
    mc.width = 400;
    mc.height = 300;
    mc.graphics.clear();
    mc.graphics.lineStyle(2, 0, 1);
    mc.graphics.beginFill(0xFF0000, 0.5);
    mc.graphics.drawRect(0, 0, 400, 300);
    mc.graphics.endFill();
    mainCanvas.rawChildren.addChild(mc);
}

And the corresponding output:

MovieClip size: 0 0

Does someone have any explanation for this strange behavior?

Answer 1

Initially, you set the size of a empty MovieClip:

var mc:MovieClip = new MovieClip();
mc.width = 400;
mc.height = 300;

You are attempting to size a clip with no content.

Set you size after there is content in the clip:

var mc:MovieClip = new MovieClip();
mc.graphics.lineStyle(2, 0, 1);
mc.graphics.beginFill(0xFF0000, 0.5);
mc.graphics.drawRect(0, 0, 400, 300);
mc.graphics.endFill();

mc.width = 400;
mc.height = 300;