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!