Recipe 11.7.
Applying Animation Techniques to Other Properties
Problem
You want
to apply the techniques in this chapter's recipes to something
other than an object's motion.
Solution
Apply the techniques as given, but assign the
results to a property other than the object's x and y
position.
Discussion
Although changing an object's position is the
most obvious method of animation, all of the techniques in this
chapter can be applied to almost any property of a movie clip or
sprite. This recipe provides several examples to get you started,
but the possibilities are so numerous that it would be impossible
to list them all.
First, try applying some velocity to the
rotation property; this variable is called _vr for
rotational velocity:
package {
import flash.display.Sprite;
import flash.events.Event;
public class AnimatingRotation extends Sprite {
private var _sprite:Sprite;
private var _vr:Number = 4;
public function AS3CB( ) {
_sprite = new Sprite( );
_sprite.graphics.beginFill(0xffffff, 100);
_sprite.graphics.drawRect(-50, -20, 100, 40);
_sprite.graphics.endFill( );
_sprite.x = 100;
_sprite.y = 100;
addChild(_sprite);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
public function onEnterFrame(event:Event):void {
_sprite.rotation += _vr;
}
}
}
This example uses a rectangle instead of a
circle, so you can see the rotation in action. It sets _vr
to 4, and then adds that to the sprite's rotation on each
frame.
The next example applies a spring formula to the
scale of the sprite. A click handler sets a random target scale,
and the enterFrame
handler applies the spring action. When you click on the sprite, it
bounces to a new size:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class AnimatingProperties extends Sprite {
private var _sprite:Sprite;
private var _k:Number = 0.1;
private var _damp:Number = 0.9;
private var _scaleVel:Number = 0;
private var _targetScale:Number = 1;
public function AS3CB( ) {
_sprite = new Sprite( );
_sprite.graphics.beginFill(0xffffff, 100);
_sprite.graphics.drawRect(-50, -50, 100, 100);
_sprite.graphics.endFill( );
_sprite.x = 100;
_sprite.y = 100;
addChild(_sprite);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
_sprite.addEventListener(MouseEvent.CLICK, onClick)
}
public function onEnterFrame(event:Event):void {
_scaleVel += (_targetScale - _sprite.scaleX) * _k
_sprite.scaleX += _scaleVel;
_sprite.scaleY = _sprite.scaleX;
_scaleVel *= _damp;
}
public function onClick(event:MouseEvent):void {
_targetScale = Math.random( ) * 2 - .5;
}
}
}
You could create similar functionality using
easing (see Recipe
11.3) instead of springs. Photo gallery applications often use
this technique for displaying differently sized photos. The photo
content area eases to the new size, and then the photo fades
in.
A more complex application of motion code is to
use the techniques to color transforms to smoothly go from one
color to another. This is probably best done with easing. Start out
with one color and gradually ease into another color.
The following example sets up two sets of color
values: _red1, _green1, _blue1, and
_red2, _green2, _blue2. Each value is a
number from 0.0 to 1.0. In the enterFrame handler, these
values are fed to the red, green, and blue multiplier values of a
color transform
object that is applied to the sprite. All of the values ease from
the first to the second value, so they smoothly transition from one
to the other. There is also a click handler on the sprite, which
randomly sets three new multiplier values; each time you click on
the square, it eases to a new color:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
public class AnimatingColor extends Sprite {
private var _sprite:Sprite;
private var _red1:Number = 1;
private var _green1:Number = 0;
private var _blue1:Number = 0;
private var _red2:Number = 0;
private var _green2:Number = .5;
private var _blue2:Number = 1;
private var _easingSpeed:Number = 0.05;
public function AS3CB( ) {
_sprite = new Sprite( );
_sprite.graphics.beginFill(0xffffff, 100);
_sprite.graphics.drawRect(-50, -50, 100, 100);
_sprite.graphics.endFill( );
_sprite.x = 100;
_sprite.y = 100;
addChild(_sprite);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
addEventListener(MouseEvent.CLICK, onClick);
}
public function onEnterFrame(event:Event):void {
_red1 += (_red2 - _red1) * _easingSpeed;
_green1 += (_green2 - _green1) * _easingSpeed;
_blue1 += (_blue2 - _blue1) * _easingSpeed;
_sprite.transform.colorTransform =
new ColorTransform(_red1, _green1, _blue1);
}
public function onClick(event:MouseEvent):void {
_red2 = Math.random( );
_green2 = Math.random( );
_blue2 = Math.random( );
}
}
}
See Also
Recipe
11.3
|