Expanding width/height of a shape with Tweening

[zubin101]

Hi guys, I have some code i'm experimenting with as I learn the AS3 concepts. It is a sprite container called "menu" and I've created a shape called "square" in it. Now, I have it so that it uses the elastic tween functions to expand and collapse the square when MOUSE_OVER and MOUSE_OUT on the menu is triggered:



var menu:Sprite = new Sprite;
this.addChild(menu);
var square:Shape = new Shape;
square.graphics.beginFill(0x000000);
square.graphics.drawRect(0, 0, 100, 100);
square.graphics.endFill();
menu.addChild(square);
// Add Listeners to Expand/Collapse Square
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Elastic;
menu.addEventListener(MouseEvent.MOUSE_OVER, toggleExpandSquare);
menu.addEventListener(MouseEvent.MOUSE_OUT, toggleCollapseSquare);
function toggleExpandSquare(e:Event):void {
var myTween_width:Tween = new Tween(square, "width", Elastic.easeOut, square.width, 200, 1, true);
var myTween_height:Tween = new Tween(square, "height", Elastic.easeOut, square.height, 320, 1, true);
myTween_width.looping = false;
myTween_height.looping = false;
}
function toggleCollapseSquare(e:Event):void {
var myTween_width:Tween = new Tween(square, "width", Elastic.easeOut, square.width, 100, 1, true);
var myTween_height:Tween = new Tween(square, "height", Elastic.easeOut, square.height, 100, 1, true);
myTween_width.looping = false;
myTween_height.looping = false;
}


Problem is that I know it defaults to (0,0) and expands the height & width from the top-left corner of the shape. However, I would like it to expand from the bottom-left corner, OR from the center of the shape, etc.

I'm really baffled about how to achieve this. Thanks!

[greggreg]

when you go to draw the rectangles make sure that they are drawn where you want them relative to the anchor point. all scale and rotation happens in relation to the anchor point. the anchor point is always at (0,0) so if you want the box to grow from its bottom right corner, its bottom right corner needs to be at (0,0). an easy way to do this is to just make your two width and height values negative like so:

square.graphics.drawRect(0, 0, -100, -100);

and if you wanted the box to be anchored in the center then you need to make sure the origin is in the center by starting on one side and drawing to the other -

square.graphics.drawRect(50, 50, -100, -100);

hope that helps.

[zubin101]

Ah yes, thanks greggreg that helped a lot =), I see now how the orientation must be relative to (0,0).

I have another question, in my code I replaced the contents of "toggleCollapseSquare" function with a simple "square.height = 100;square.width=100" to restore its original size at MOUSE_OUT. However once run, I find that it only works to restore its original size once the ElasticTween finishes it transition.

I can only deduce that Tween objects: myTween_width & myTween_height are still running/expanding independently from the function "toggleCollapseSquare". Is this correct?

If so, how would I stop the Tween objects in the function "toggleExpandSquare" so that the other function "toggleCollapseSquare" can restore the original size?

I have a feeling my structure is wrong and there must be a better way to go about it...