Flex/AS3: changing width/height doesn't affect contents

Question

I thought I had a handle on AS3, DisplayObjectContainers, etc. but this basic thing is really confusing me: changing the width/height of a sprite does not affect it's visual contents - either graphics drawn within it or any children it may have.

I have searched around and found an Adobe page that represents my own little test code. From that page, I would expect the sprite to increase in visual size as it's width increases. For me, it doesn't. (http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObject.html#width)

width property
width:Number [read-write]

Indicates the width of the display object, in pixels. The width is calculated based on the bounds of the content of the display object. When you set the width property, the scaleX property is adjusted accordingly, as shown in the following code:

My code below doesn't affect the visual display at all - but it does set the width/height, at least according to the trace output. It does not affect the scaleX/scaleY.

What the heck am I missing here??

My setup code:

testSprite = new SpriteVisualElement();

var childSprite:SpriteVisualElement = new SpriteVisualElement();
childSprite.graphics.beginFill(0xFFFF00, 1);
childSprite.graphics.drawRect(0, 0, 200, 100);
childSprite.graphics.endFill();
childSprite.name = "child";

testSprite.addChild(childSprite);

container.addElement(testSprite);
testSprite.addEventListener(MouseEvent.CLICK, grow);
}


public function grow(event:MouseEvent):void
{
 event.target.width += 5;
 event.target.height += 5;
 trace("grow",  event.target.width);
}

Answer 1

If I understand the code correctly; you are changing the width / height of the sprite. But you are doing nothing to change the width/ height of the sprite's children.

In the context of a Flex Application, you can use percentageWidth and percentageHeight on the child to resize the child when the parent is resized. You could also add a listener to the the resize event and adjust sizing that way; preferably tying in to the Flex Component LifeCycle methods somehow.

I believe these approaches are all Flex specific, and dependent upon the Flex Framework. Generic Sprites, as best I understand, do not automatically size themselves to percentages of their parent container; and changing the parent will not automatically resize the parent's children.

I bet something like this would work:

public function grow(event:MouseEvent):void
{
 event.target.width += 5;
 event.target.height += 5;
 childSprite.width += 5;
 childSprite.height += 5;
 trace("grow",  event.target.width);
}

Answer 2

Hi!

First, if you have a problem with a flex component, you can look over its source code. In my environment, (as I installed flex SDK to C:\flex\flex_sdk_4.1), the source code for SpriteVisualElement is located at

C:\flex\flex_sdk_4.1\frameworks\projects\spark\src\spark\core\SpriteVisualElement.as

In the source code, you'll find that width property is overridden :

/**
 *  @private
 */
override public function set width(value:Number):void
{
    // Apply to the current actual size
    _width = value;
    setActualSize(_width, _height);

    // Modify the explicit width
    if (_explicitWidth == value)
        return;

    _explicitWidth = value;
    invalidateParentSizeAndDisplayList();
}

So, you cannot expect the auto-scaling of the component.

Making custom components will be one solution. Here is a sample implementation of custom component.

Custom Component Example - wonderfl build flash online