View Full Version : Tween a circle???

12-02-2008, 04:53 PM
Hey all,
I'm trying to have a circle (when prompted by a mouse click) shrink from it's current size down to nothing, collapsing in the middle (kinda like a star collapsing on itself down to a singularity). Is this possible with the tween class? I can get it to shrink with scaleX and scaleY but I need the motion in there. Any help??

P.S. I have the event handler down, just need motion help.

12-02-2008, 05:05 PM
Howdy and Welcome... :)

Something like this should work... You might want to check on the Tween and Easing class in Flash manual for more information...
import fl.transitions.Tween;
import fl.transitions.easing.Elastic;

var myTweenX:Tween = new Tween(circle_mc, "scaleX", Elastic.easeIn, 1, 0.1, 1, true);
var myTweenY:Tween = new Tween(circle_mc, "scaleY", Elastic.easeIn, 1, 0.1, 1, true);

12-02-2008, 05:28 PM
Thanks a bunch man. Now quick question. I have the tween applied only to one circle (I have three on the stage). Here is my code...

import flash.display.Sprite;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;

public class Circle extends Sprite
private var circRadius:Number = 45;
//x & y of lower circle
private var centerX:Number = (stage.stageWidth / 2);
private var centerY:Number = (stage.stageHeight / 2);
//x & y of left most circle
private var centerX2:Number = (centerX - 25);
private var centerY2:Number = (centerY - 25);
//x & y of right most circle
private var centerX3:Number = (centerX + 25);
private var centerY3:Number = (centerY - 50);

public function Circle():void
var theCircle1:Sprite = makeCircle();
theCircle1.x = centerX;
theCircle1.y = centerY;

var theCircle2:Sprite = makeCircle();
theCircle2.x = centerX2;
theCircle2.y = centerY2;

var theCircle3:Sprite = makeCircle();
theCircle3.x = centerX3;
theCircle3.y = centerY3;

theCircle1.addEventListener(MouseEvent.CLICK, shrinkCircle);

private function makeCircle():Sprite
var protoCircle = new Sprite;
protoCircle.graphics.lineStyle(5, 0x00CC00);
protoCircle.graphics.drawCircle(0, 0, circRadius);
return protoCircle;

private function shrinkCircle(e:KeyboardEvent):void
var myTweenX:Tween = new Tween(e.currentTarget, "scaleX", Bounce.easeIn, 1, 0, 1, true);
var myTweenY:Tween = new Tween(e.currentTarget, "scaleY", Bounce.easeIn, 1, 0, 1, true);

In my Tweens you'll note that I have the obj as "e.currentTarget" instead of the actual variable name. Trouble is, when I use the name "theCircle1" I get an error (1120) stating I'm using and undefined variable. How is this undefined if I have in fact defined it above.

Also the goal is to have the Tween work on all circles one after the other.