topical media & game development
#graphic-flex-image-effects-07-Flex-AeonTest.ax
#graphic-flex-image-effects-07-Flex-AeonTest.ax
[swf]
[flash]
flex
package {
import aeon.AnimationHold;
import aeon.AnimationSequence;
import aeon.animators.Transformer3D;
import aeon.animators.Mover;
import aeon.easing.*;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Matrix3D;
import flash.geom.Point;
import flash.geom.Vector3D;
[SWF(width=800, height=600, backgroundColor=0x454545)]
Demonstrates how the aeon library may be used to create animations.
Clicking on a "card" will result in a sequence of animations being run,
including 3D transformation.
public class @ax-graphic-flex-image-effects-07-Flex-AeonTest extends Sprite {
private const NUM_CARDS:uint = 5;
private const CARD_WIDTH:uint = 120;
private const CARD_HEIGHT:uint = 200;
private const CARD_GUTTER:uint = 20;
Constructor. Simply calls drawCards().
public function @ax-graphic-flex-image-effects-07-Flex-AeonTest() {
drawCards();
}
Creates and positions all the card shapes.
private function drawCards():void {
// add the cards' widths plus the gutter between each
var totalCardWidth:Number = (NUM_CARDS*CARD_WIDTH + CARD_GUTTER*(NUM_CARDS-1));
// find x/y position of first card
var x:Number = (stage.stageWidth - totalCardWidth)/2 + CARD_WIDTH/2;
var y:Number = stage.stageHeight/2;
for (var i:uint=0; i < NUM_CARDS; i++) {
drawCard(x, y);
// move to next card position
x += (CARD_WIDTH + CARD_GUTTER);
}
}
Creates a single card at the specified x/y position.
parameter: x The x position of the card.
parameter: y The y position of the card.
private function drawCard(x:Number, y:Number):void {
var sprite:Sprite = new Sprite();
with (sprite.graphics) {
beginFill(Math.random()*0xFFFFFF);
// center drawing around registration point
drawRect(-CARD_WIDTH/2, -CARD_HEIGHT/2, CARD_WIDTH, CARD_HEIGHT);
endFill();
}
sprite.x = x;
sprite.y = y;
sprite.z = z;
addChild(sprite);
// clicking card will cause card to begin animation
sprite.addEventListener(MouseEvent.CLICK, onCardClick);
}
Handler for when a card is clicked. This initiates animation of card.
parameter: event Event dispatched by card sprite.
private function onCardClick(event:MouseEvent):void {
var card:Sprite = event.target as Sprite;
// adds clicked card to top of display list
addChild(card);
// x/y position for card to animate to near center stage
var x:Number = stage.stageWidth/2;
var y:Number = stage.stageHeight*3/5;
// current position of card
var startMatrix:Matrix3D = card.transform.matrix3D;
// 3D transform will flip card on y axis and translate it on all three axes
var endMatrix:Matrix3D = new Matrix3D();
endMatrix.appendRotation(180, Vector3D.Y_AXIS);
endMatrix.appendTranslation(x, y, -300);
// aniamtion sequence consists of 3D transform, a 1 second hold, the a zoom up off stage
new AnimationSequence(
[
new Transformer3D(card, startMatrix, endMatrix, 1000, Cubic.easeInOut),
new AnimationHold(1000),
new Mover(card, new Point(x, y), new Point(x, -300), 600, Quart.easeOut, true, 10)
]
).start();
}
}
}
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
