UIComponent, all of these techniques can be used on any of the Flex components.
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 );
}
}
}
}
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>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.
Very cool example,
Thanks for shared it,
Einfach Klasse!
Best,
Ramón
]]>Did you ever tried GTween library from Grant Skinner?
What do you think about that?
Thanks.
]]>