1

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

2 Answers 2

2

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();
}
4
  • I tested it again and it does work – but the problem with this is that it only works with ONE circle. I have two circles drawing to make a "donut". When I try to tween the scaleX and scaleY, it breaks... Mar 14, 2013 at 17:58
  • 1
    Can you show some code to explain how you're drawing this donut?
    – Marcela
    Mar 14, 2013 at 18:20
  • I just tested my code with your code and it works just fine. Are you getting an error? If so, please post that as well.
    – Marcela
    Mar 14, 2013 at 18:32
  • Ah...! Sorry I wasn't being concise enough. With your method, the whole donut scales – but I'm trying to keep the "inside" circle the same, while scaling/tweening the "outside" circle if that makes sense. Mar 14, 2013 at 18:35
0

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.

3
  • It throws these two errors: 1067: Implicit coercion of a value of type void to an unrelated type Number. 1136: Incorrect number of arguments. Expected 3. for the line inside the onUpdateCallback() function. Would this work because I'm trying to change the outside circle of this "donut"? Mar 14, 2013 at 17:53
  • It looks like that callback function needs to have 3 arguments, the one I showed doesn't have any arguments. I can't seem to find what those arguments should be in their docs. But it looks like you can tell it which arguments to send to the function with onUpdateParams. Editing my answer, see if that helps...
    – Sunil D.
    Mar 14, 2013 at 18:03
  • It still comes up with the same errors. :/ maybe I should think of some other way to code this without making it a donut. Mar 14, 2013 at 18:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.