Flex Snippet - Simple Tween Effects

After a small discussion about actionscript tweening with one of the other coders here I decided to write up a small tutorial on some basic tweens. Now in the last Flex tutorial we used effects to enhance the visuals of our state transitions, but today we are going to use effects for something different all together. I am going to show how to use a couple of the many available effects to animate an object around the screen.

In the example below we have a small application that takes advantage of the move and resize effects (both extend TweenEffect). In the example you can click around on the main canvas to move the circle to where you clicked (it isn't perfect, but its close enough for gov't work), and you can also change the number in the bottom text box to control the size of the circle. The circle will of course animate (tween) to the new position and size. So go ahead and play around with that for a minute or two.
Now its time to get to work. The first thing we are going to build is a class where we extend the Canvas component. In this class we will override the updateDisplayList function to use the graphics object of the canvas to draw a circle. We use a couple of simple drawing commands to do this. Below is the code for our circle.

package
{
import mx.containers.Canvas;

public class CircleNode extends Canvas
{
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(graphics)
graphics.clear();
graphics.beginFill(0x00FF23);
graphics.lineStyle(2, 0x000000);
graphics.drawCircle(width / 2, height / 2, width / 2);
}
}
}

import mx.effects.Resize;
import mx.effects.Move;

private var cn:CircleNode;
private var mv:Move;
private var rs:Resize;

private function initApp():void
{
cn = new CircleNode();
cn.width = 100;
cn.height = 100;
cn.x = 50;
cn.y = 50;
addChild(cn);

mv = new Move(cn);
rs = new Resize(cn);
}

private function moveCircle(event:MouseEvent):void
{
mv.xFrom = cn.x;
mv.yFrom = cn.y;
mv.xTo = event.localX;
mv.yTo = event.localY;
mv.duration = 3000;

rs.heightFrom = cn.height;
rs.widthFrom = cn.width;
rs.heightTo = Number(txtEndSize.text);
rs.widthTo = Number(txtEndSize.text);
rs.duration = 3000;

mv.end();
rs.end();
mv.play();
rs.play();
}