Question

I have an array of sprites:

for (i = 0; i < 3; i++) {
    var newLine:Sprite = new Sprite();
    newLine.graphics.beginFill(0xFFFFFF); 
    newLine.graphics.drawRect((uiSizeX * (.25 + .25 * i)) + (doorSizeX - lineLengths[0][i]) / 2, uiSizeY * .5, lineLengths[0][i], lineHeight); 
    newLine.name = "lines" + i;
    lines.push(newLine);
}

I later add each to a background Sprite:

for (i = 0; i < 3; i++) {
    uiContainer.addChild(doors[i]);
    uiContainer.addChild(lines[i]);
}

And later wish to change the width of the rectangles contained in each. When I set the width property using the array reference:

lines[i].width = lineLengths[trialNumber][i];

The rectangle moves towards the center of the stage and uiContainer. Trying to set the x value results in even stranger behavior. I’ve gathered from answers to other questions that this is because the sprite is empty, which is confusing since it seems like it should have a rectangle in it. How do I access or change the properties of the rectangle or make it so the sprite is not empty?

Answer 1

Never try to directly change the width or height of a sprite, unless you really really have to, because it leads to all sorts of unexpected behavior.

If you want to resize the sprite, then redraw the rectangle:

var sprite = lines[i];

sprite.graphics.beginFill(0xFFFFFF); 
sprite.graphics.drawRect(newWidth, newHeight);

Also don’t forget to call endFill:

sprite.graphics.endFill();

You should probably wrap all this logic into a separate class so that you can redraw your sprites more easily. Even better, create a class that extends Sprite and that contains all the logic to redraw/resize.