Shape tween with AS3 or what?

programming flash
1

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!

2

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].

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

3

That’s perfect!

Thank you very much.

4

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!

5

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]

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});
}
6

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