# Shape tween with AS3 or what?

**URL:** <https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394>\
**Category:** flash\
**Created:** [July 8, 2008, 2:38pm UTC](https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394 "2008-07-08T14:38:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalasdojan](https://avatars.discourse-cdn.com/v4/letter/k/a587f6/32.png) [@kalasdojan](https://forum.kirupa.com/u/kalasdojan)\
**Post date:** [July 8, 2008, 2:38pm UTC](https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394/1 "2008-07-08T14:38:15Z")

</div>

Hi there!

I would be very glad for some hints on how to accomplish the following:

Morph a circle (1 px stroke line, 10 px wide fill) to a larger circle with a constant stroke width (1 px stroke line, 20 px wide fill).

I know I can do this with a shape tween. But what if I wan’t to do it with actionscript? When using i.e. .width or .scale properties the stroke will also be proportionally scaled …

Thanks!

---

<div class="post-metadata">

**Author:** ![snickelfritz](https://avatars.discourse-cdn.com/v4/letter/s/7ea924/32.png) [@snickelfritz](https://forum.kirupa.com/u/snickelfritz)\
**Post date:** [July 8, 2008, 3:22pm UTC](https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394/2 "2008-07-08T15:22:04Z")

</div>

Select the stroke and choose “None” in the scale menu within the properties palette.  
BTW, this is technically not a “morph”; it is a simple translation from one scale to another and can be accomplished using AS3 and a movieclip on the stage:  
[[COLOR=“Blue”]Download TweenLite or TweenMax[/COLOR]](http://blog.greensock.com/tweenmaxas3/).

import gs.TweenLite;  
TweenLite.to(circle\_mc, .5, {scaleX:2, scaleY:2});

---

<div class="post-metadata">

**Author:** ![kalasdojan](https://avatars.discourse-cdn.com/v4/letter/k/a587f6/32.png) [@kalasdojan](https://forum.kirupa.com/u/kalasdojan)\
**Post date:** [July 8, 2008, 3:28pm UTC](https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394/3 "2008-07-08T15:28:57Z")

</div>

That’s perfect!

Thank you very much.

---

<div class="post-metadata">

**Author:** ![kalasdojan](https://avatars.discourse-cdn.com/v4/letter/k/a587f6/32.png) [@kalasdojan](https://forum.kirupa.com/u/kalasdojan)\
**Post date:** [July 8, 2008, 3:49pm UTC](https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394/4 "2008-07-08T15:49:59Z")

</div>

OK, a follow up:

What would be a good way of doing this shape tween for 200 circles (at different y and x coordinates) at the same time (with variable start & end diameters)?

And preferrably with some “ease” in the morph …

thanks again!

---

<div class="post-metadata">

**Author:** ![snickelfritz](https://avatars.discourse-cdn.com/v4/letter/s/7ea924/32.png) [@snickelfritz](https://forum.kirupa.com/u/snickelfritz)\
**Post date:** [July 8, 2008, 4:33pm UTC](https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394/5 "2008-07-08T16:33:43Z")

</div>

Here’s something for you to start with.  
200 circles are generated and arranged in a 20x10 grid using a movieclip in the library.  
The scaling occurs on ROLL\_OVER.  
TweenMax is required for this particular script, but Tweener or TweenLite would work equally well.  
[LIST=1]  
[_]Create your circle graphic and convert it to a movieclip.  
[_]Set the linkage class name to [COLOR=“Blue”]Circle[/COLOR].  
[\*]Paste this script on the timeline at frame1.  
[/LIST]

```auto
stop();
import gs.TweenMax;
import fl.motion.easing.*;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
stage.scaleMode = StageScaleMode.NO_SCALE;

//set number of circles
var circleNum:int = 200;
// set number of columns
var cols:int = 20;
// calculate number of rows, based on circleNum
var rows:int = Math.ceil(circleNum / cols);
// the number of circles attached to the stage
var circleCount:int = 0;
for (var py:int = 0; py <rows; py++) {
	for (var px:int = 0; px <cols; px++) {

		var circle:Circle = new Circle();
		circle.x = 100 + circle.width * px;
		circle.y = 100 + circle.height * py;
		addChild(circle);

		// only add listeners if circle should be active
		if (circleCount < circleNum) {
			circle.buttonMode = true;
			circle.addEventListener(MouseEvent.ROLL_OVER, onOver, false, 0, true);
			circle.addEventListener(MouseEvent.ROLL_OUT, onOut, false, 0, true);
		} else {
			// circle is inactive
			circle.alpha = 0.5;
		}
		circleCount++;
	}
}

function onOver(evt:Event):void {
	var circle:MovieClip = MovieClip(evt.target);
	addChild(circle);
	TweenMax.to(evt.target, .6, {scaleX:2, scaleY:2, ease:Elastic.easeOut});
}

function onOut(evt:Event):void {
	TweenMax.to(evt.target, .2, {scaleX:1, scaleY:1, ease:Cubic.easeOut});
}

```

---

<div class="post-metadata">

**Author:** ![kalasdojan](https://avatars.discourse-cdn.com/v4/letter/k/a587f6/32.png) [@kalasdojan](https://forum.kirupa.com/u/kalasdojan)\
**Post date:** [July 8, 2008, 4:56pm UTC](https://forum.kirupa.com/t/shape-tween-with-as3-or-what/265394/6 "2008-07-08T16:56:32Z")

</div>

I am so very grateful for that! Lovely code 🙂 Good commenting as well!