Question

I've seen examples where it's possible to tween a rectangle using scaleX, but I can't find anything that tweens a circle. (The "circle" that I'm drawing is actually a donut shape and I want the outside circle to be the one that is tweened).

var resizeVar:Number = 75;

myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), resizeVar);
myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), 75);

I tried doing it this way, but this throws lots of errors. I don't think it's possible this way:

TweenMax.to(myCircle, 2, {resizeVar:150, ease:SlowMo.ease.config(1, 0)});

Normally with display objects, it is done this way. It doesn't work with this "donut" though:

TweenMax.to(myRectangle, 2, {scaleX:1.5, scaleY:1.5 ease:SlowMo.ease.config(1, 0)});

So my question is, how can I tween the radius size of my outside circle?

EDIT: This is how the donut is being drawn, so the resizeVar needs to change from 75 to 150.

var myCircle:Sprite = new Sprite();

myCircle.graphics.beginFill(0xbbbbbb);
myCircle.graphics.drawCircle(0, 0, 150); // this is what should be tweening/scaling
myCircle.graphics.drawCircle(0, 0, 75); // this should stay the same
myCircle.graphics.endFill();

addChild(myCircle);
Was it helpful?

Solution

You should be able to tween the scaleX and scaleY properties of ANY displayObject:

var radius:Number = 75;
var myCircle:Sprite = new Sprite();
myCircle.graphics.beginFill(0);
myCircle.graphics.drawCircle(radius/2, radius/2, radius);
myCircle.graphics.endFill();
addChild(myCircle);

TweenMax.to(myCircle, 2, {scaleX:2, scaleY:2, ease:SlowMo.ease.config(1,0)});

EDIT

This is how you would scale just the outside of the donut:

var resizeObject:Object = { innerRadius:75, outerRadius:150 };
myCircle = new Sprite();
myCircle.graphics.beginFill(0xbbbbbb);
myCircle.graphics.drawCircle(0, 0, resizeObject.outerRadius);
myCircle.graphics.drawCircle(0, 0, resizeObject.innerRadius);
myCircle.graphics.endFill();

addChild(myCircle);    
TweenMax.to(resizeObject, 2, {outerRadius:300, ease:SlowMo.ease.config(1,0), onUpdate:updateCircle, onUpdateParams:[resizeObject]});


function updateCircle(resizeObject:Object):void 
{
    myCircle.graphics.clear();
    myCircle.graphics.beginFill(0xbbbbbb);
    myCircle.graphics.drawCircle(0, 0, resizeObject.outerRadius);
    myCircle.graphics.drawCircle(0, 0, resizeObject.innerRadius);
    myCircle.graphics.endFill();
}

OTHER TIPS

The reason it works with the rectangle is that you are changing the scale of the rectangle. When you change the scale Flash Player adjusts the scale of the display object containing your graphics.

However, with the circle, you are trying to change the radius of the circle. The radius is only used when you draw the circle with the drawCircle() method. One way to tween the radius is to use your tween to re-draw the circle many times (not that ideal).

To re-draw the circle with a new radius, you can use the onUpdate callback that TweenMax offers:

TweenMax.to(myCircle, 2, {resizeVar:150, onUpdate: onUpdateCallback, onUpdateParams: [resizeVar] });

function onUpdateCallback(radius):void
{
    myCircle.graphics.drawCircle(myCircle.graphics.drawCircle((myCircle.width/2), (myCircle.height/2), radius);
}

[Edit]

Note, I've added some params that you need to pass to the onUpdateCallback() function. I've also modified the function to add a radius parameter, and then use the radius when drawing the circle.

In regards to "trying to change the outside circle of this donut", this may be more complex. You might need to draw both circles of the donut. You might need to also call graphics.clear() before you draw the circle.

However, perhaps the answer from @Marcela is better, just change the scaleX and scaleY of the object you've already drawn. But if you need to get to a specified radius, the only way to do that is by re-drawing the circle(s) on each interval of the tween.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top