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




ActionScript 3. 0 Cookbook
ActionScript 3.0 Cookbook: Solutions for Flash Platform and Flex Application Developers
ISBN: 0596526954
EAN: 2147483647
Year: 2007
Pages: 351

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net