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.

The next thing we are going to do is build the basic interface for the application. Not much is included here - a panel with a canvas on which the circle will move, and a control bar with a label and text input. We are going to use the text input for defining the end move size.

Now to some scripting. First we are going to add a listener to the creationComplete event on the application. I called the function initApp. Then inside of a <Script> tag we add a couple of private variables and our initApp function. Inside the function we create our circle and initialize its position and size. This is also where we are introduced to the Move and Resize classes, which are effects that extend TweenEffect. These allow us to easily move and resize the circle. When we define a new Move or Resize we pass in the component that we want to tween. Our new application tag and the start of our script is below.

And the script.

The last thing we need to do is add the function to start our tween effects. We are going to do this on the mouseUp event for the canvas. This code sets up the information for the move effect which includes the to and from x and y positions and how long to make the effect last (duration). We set the final x and y positions to the mouse positions. The resize event is setup the same way, but the final width and height is set from our text input in the control bar. After the setup we end the effect (in case it was already playing because of a different move) and start it again. Below are the last couple of pieces of code, the first of which is our new canvas and the second is the move function that goes into our script.

Finally the actionscript.

To finish up here are the full entire contents of the main mxml file.

Hopefully this tutorial helps at least a few people out there. You can learn more about effects over at the Adobe livedocs site and look for a future tutorial on building custom tween effects. Leave a comment if you have any questions or problems.