Home >
Whenever adding effects to Flex applications, I usually user the built-in Flex effects. They work with most flex components, are consistent, and are reliable. However, in cases where you want your application to be very expressive, they don't always act like you want them to. In those cases, I use Tweener, an animation "tween" library for ActionScript. In this post, we'll walk through a basic example using Tweener.
Before getting into the guts of how to use Tweener, let's examine something that it can do. Below is a Flex application that displays 25 colored circles in random postiions that animate whenever you click on the movie clip. The size, x, y, and alpha/opacity transitions are controlled by the Tweener library.
Click on the circles to randomize and animate their positions
The Tweener library does not require the Flex framework; It is an ActionScript library that can be used in Flex or Flash projects. There are official versions of it ActionScript 2 and ActionScript 3, and are even unofficial ports for Java, JavaScript, HaXe, etc... In this example, I chose to use a Flex application to show how easy it is to integrate with Flex. However, since I am not using any Flex-specific controls (Buttons, Containers, Lists, Grids, Charts, etc...), I could have done the same thing with an ActionScript only project, with a much smaller file size. Although I'm not using Flex-specific controls beyond
Getting started with Tweener is easy. Just download the Tweener.swc file from the Tweener home page, and drop it into the "lib" directory in your Flex project. Any .swc library files that are in this folder will automatically be added to your Flex project, without the need to alter any project properties.
First, let's examine the visual piece of the application. The
Now, let's look at the application that uses the
Finally, let's examine the
Related Links
Tweener on Google Code:
http://code.google.com/p/tweener/
Tweener Online Documentation:
http://hosted.zeh.com.br/tweener/docs/en-us/
Tweener Transitions:
http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
View this example in a new window:
http://www.tricedesigns.com/portfolio/tweener/
View/Download example source:
http://www.tricedesigns.com/portfolio/tweener/srcview/index.html
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Before getting into the guts of how to use Tweener, let's examine something that it can do. Below is a Flex application that displays 25 colored circles in random postiions that animate whenever you click on the movie clip. The size, x, y, and alpha/opacity transitions are controlled by the Tweener library.
Click on the circles to randomize and animate their positions
The Tweener library does not require the Flex framework; It is an ActionScript library that can be used in Flex or Flash projects. There are official versions of it ActionScript 2 and ActionScript 3, and are even unofficial ports for Java, JavaScript, HaXe, etc... In this example, I chose to use a Flex application to show how easy it is to integrate with Flex. However, since I am not using any Flex-specific controls (Buttons, Containers, Lists, Grids, Charts, etc...), I could have done the same thing with an ActionScript only project, with a much smaller file size. Although I'm not using Flex-specific controls beyond
UIComponent, all of these techniques can be used on any of the Flex components.
Getting started with Tweener is easy. Just download the Tweener.swc file from the Tweener home page, and drop it into the "lib" directory in your Flex project. Any .swc library files that are in this folder will automatically be added to your Flex project, without the need to alter any project properties.
First, let's examine the visual piece of the application. The
CircleRenderer class is a visual component the extends the UIComponent class. Basically, it just draws a circle based on the size and color values, with the center of the circle being at the registration point (0, 0) of the UIComponent instance. It uses the normal Flex component lifecycle method of overriding the the updateDisplayList function to only render the circle if the display list has been invalidated. Each time that the size or color values is changed, the display list is invalidated through the setter methods, and the component is then redrawn.
package
{
import mx.core.UIComponent;
public class CircleRenderer extends UIComponent
{
private var _color : Number = 0;
private var _size : Number = 0;
public function CircleRenderer()
{
super();
}
public function set color( value : Number ) : void
{
_color = value;
invalidateDisplayList();
}
public function get color() : Number
{
return _color;
}
public function set size( value : Number ) : void
{
_size = value;
invalidateDisplayList();
}
public function get size() : Number
{
return _size;
}
override protected function updateDisplayList(w:Number, h:Number):void
{
with (graphics)
{
clear();
beginFill( _color );
drawCircle( 0,0,_size );
}
}
}
}
Now, let's look at the application that uses the
CircleRenderer class. Notice that the root application has two event listeners -- creationComplete and mouseDown. The creationComplete event triggers the onCreationComplete() function, which creates 50 CircleRenderer instances, each with a random color, and calls the randomize() function. The mouseDown event triggers the onMouseDown() function, which loops through each of the CircleRenderer instances and calls the randomize() function on each.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onCreationComplete()"
mouseDown="onMouseDown()"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
backgroundColor="#FFFFFF"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import caurina.transitions.Tweener;
private var circles : Array = [];
private function onCreationComplete() : void
{
//create a bunch of CircleRenderer objects
for ( var z:int = 0; z < 50; z++)
{
var cr : CircleRenderer = new CircleRenderer();
cr.color = Math.random() * 0xFFFFFF;
circles.push( cr );
addChild( cr );
randomize( cr );
}
}
private function onMouseDown() : void
{
for each ( var cr : CircleRenderer in circles )
{
randomize( cr );
}
}
private function randomize( cr : CircleRenderer ) : void
{
Tweener.addTween( cr,
{
size: Math.random() * 300,
alpha: Math.random(),
x: Math.random() * width,
y: Math.random() * height,
time: 1,
transition: "easeInOutQuart"
} );
}
]]>
</mx:Script>
</mx:Application>Finally, let's examine the
randomize() function -- This is where Tweener comes into play. The randomize function makes only one function call. It calls the Tweener.addTween function. Tweener.addTween accepts two parameters. The first is the object which will have it's properties modified. In this case, it refers to the CircleRenderer instance passed into the randomize() function. The second paramer is a generic object that specifies the target properties and their target values. This specifies which values will be updated on the object passed into the first parameter. The code below will instruct Tweener to animate the size, alpha, x, and y properties on the CircleRenderer instance from their current value to the value specified in this object. You will also notice two additional properties -- time and transition. The time property specifies the duration of the animation in seconds. The value 1 specifies an animation duration of one second (this is NOT milliseconds). The transition property is a string value that specifies the easing transition that gets used in the animation. You can see all of the "out-of-the-box" easing transitions in the Tweener online documentation.
Related Links
Tweener on Google Code:
http://code.google.com/p/tweener/
Tweener Online Documentation:
http://hosted.zeh.com.br/tweener/docs/en-us/
Tweener Transitions:
http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
View this example in a new window:
http://www.tricedesigns.com/portfolio/tweener/
View/Download example source:
http://www.tricedesigns.com/portfolio/tweener/srcview/index.html
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Hi Andrew!!
Very cool example,
Thanks for shared it,
Einfach Klasse!
Best,
Ramón
Hi!
Did you ever tried GTween library from Grant Skinner?
What do you think about that?
Thanks.
I've heard of it, but never used it. The demo's i've seen look very good, but I can't comment b/c I have never tried it.
nice one thanks... :)
As a Flash developer, I have been using Caurina Tweener for many projects in the past. I have just recently switched to TweenMax from GreenSock and can highly recommend it.
great.Thanks for share it.