# Expanding width/height of a shape with Tweening

**URL:** <https://forum.kirupa.com/t/expanding-width-height-of-a-shape-with-tweening/238601>\
**Category:** flash\
**Created:** [September 12, 2007, 11:55pm UTC](https://forum.kirupa.com/t/expanding-width-height-of-a-shape-with-tweening/238601 "2007-09-12T23:55:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![zubin101](https://avatars.discourse-cdn.com/v4/letter/z/51bf81/32.png) [@zubin101](https://forum.kirupa.com/u/zubin101)\
**Post date:** [September 12, 2007, 11:55pm UTC](https://forum.kirupa.com/t/expanding-width-height-of-a-shape-with-tweening/238601/1 "2007-09-12T23:55:21Z")

</div>

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:

```php

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!