Tweening a Rounded Rectangle in Actionscript 3

Question

I would like to tween between a short rounded rectangle and a tall rounded rectangle. (I only want deal with the height - no other parameters). I am programming with actionscript 3. My tweening engine is TweenLite.

I have been tweening a sprite that contains a rounded rectangle. The tweened sprite produces distortion. I suppose that I have been scaling the original image, rather than the height of the rounded rectangle?

Here is a simple example of my code:

-

Draw the rounded rectangle:

roundRect = new Sprite();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,15,4,4); //Original Height: 15
roundRect.graphics.endFill();
addChild(roundRect);

Then I listen for a mouse click event on the rounded rectangle.

The mouse event triggers a function with the following code:

TweenLite.to(this.roundRect, 1, {height:120}); //Final Height: 120

-

I would like to tween the height of the rounded rectangle itself. I would hope that this would not produce the unwanted distortion. Is there any way to achieve this?

Thank you.

Answer 1

This can be achieved with "9-slice scaling".

Below are two tutorials on how to setup a Movieclip to use the 9-slice guides, one is done through the IDE (using the guidelines) and the other through code (by defining a rectangle called grid and assigning this to the movieclip's scale9Grid property).

http://www.sephiroth.it/tutorials/flashPHP/scale9/

http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html

Once the scale9Grid property has been correctly assigned you can scale (and Tween) the movieclip as intended without any distortion.

It might also be worth reading: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/ which describes various scenarios when scale9grid does and doesn't work. (mainly to do with having nested children and non-vector graphics inside of the grid).

Hope this helps.

Answer 2

As an alternative, and since its only a rounded rectangle, you could also do something like this:

var rectHeight = 15;
var roundRect = new Sprite();
addChild(roundRect);
updateRect();

function updateRect() {
    roundRect.graphics.clear();
    roundRect.graphics.beginFill(0x000000);
    roundRect.graphics.drawRoundRect(0,0,50,rectHeight,4,4);
    roundRect.graphics.endFill();
}

roundRect.addEventListener("click", click);
function click(e) {
    TweenLite.to(this, 1, {rectHeight:120, onUpdate:updateRect});
}