Animating Sprite Scale Properties

John Moran stumped me last night with a seemingly simply idea. To scale a circle on a button press. Basically, this is a 4 part process: 1) make the objects and add them to the stage 2) create two events: a click event and an enterframe event 3) target the to-be-scaled object 4) set some conditions for the animation to end, as we don’t want the scaled object to keep scaling and thus blow up visitors’ computers.

Part three was the stumper in the lab flurry, with lots of students needing aid. Well, I don’t like to leave things hanging so after a sandwich last night I did some testing and came up with the following:

//First let’s lay down some variables to be used
//a scale speed. It can be as fast as required.

var speed:Number = .4;

//the button (which is a button symbol in the library
//with linkage class Ball, titled ball)

var ball:Ball = new Ball();

//position the button
ball.x = ball.y = 20;

//add the ball (could use keyword this.addChild)
addChild(ball);

//I like an init() function to start, which adds click function to the button
function init() {
ball.addEventListener(MouseEvent.CLICK, addOrb);
}

//now write the addOrb function
function addOrb(event:MouseEvent):void {

//add the orb, a circle movieclip in the library with name orb, with
//linkage Class Orb
var orb:Sprite = new Orb();
addChild(orb);

//give some position
orb.x = 350;
orb.y = 300;

//declare some scale
orb.scaleX = 1;
orb.scaleY = 1;

//now the fun part: add enterframe keys and a new function growOrb
//which is the part we were missing yesterday. John, this is for
//classic “casting”
orb.addEventListener(Event.ENTER_FRAME, growOrb);
}

//okay, now’s the trick. We’re going to target the above orb by casting it
//with a new object to scale, which could be a sprite or a movieclip
//I’ve given growOrb a required argument orb:Event. Most coders will use
//growOrb(event:Event) or (evt:Event) or (e:Event), but I’ve chosen an arbitrary
//word “orb” just to illustrate how the code is targeting the orb sprite
function growOrb(orb:Event):void {

//create a sprite to scale and target orb
var grower:Sprite = Sprite(orb.target);

//supply a check variable
var roof:Number = 10;

//use += to increment the scale
grower.scaleX += speed;
grower.scaleY += speed;

//now apply a check, because we don’t want scale to persist. That
//would be a killer. It’s a simple if statement
if(grower.scaleX > roof) {

//when the condition is met remove the listener
//and the button if desired for clean up. Note that design wise
//this is a one time event
grower.removeEventListener(Event.ENTER_FRAME, growOrb);
removeChild(ball);
}
}

//don’t forget to call init() to get things going
init();

Here’s what it looks like. Click on the orange ball button: