Recipe 11.1. Moving an
Object
Problem
You have a
graphic in a sprite and you
want to animate it, giving it some motion.
Solution
Decide on a velocity for the x or y-axis (or both), and
add that velocity to the object's position on each frame or
animation interval.
Discussion
Velocity is often incorrectly defined as
speed. However, velocity also
includes a direction factor. For example, "10 miles per hour" is
speed, but "10 miles per hour due north" is a velocity. If you are
dealing with velocity on the x or y-axis, the
direction is inherent. A positive x velocity is to the
right; negative to the left. Likewise, a positive y velocity
is down, and negative is up.
The first example defines the x velocity,
_vx, and sets it to 3. Since this example uses the
enterFrame event for animation, the object will move three
pixels to the right on each frame:
package {
import flash.display.Sprite;
import flash.events.Event;
public class Velocity extends Sprite {
private var _sprite:Sprite;
private var _vx:Number = 3;
public function Velocity( ) {
_sprite = new Sprite( );
_sprite.graphics.beginFill(0x0000ff, 100);
_sprite.graphics.drawCircle(0, 0, 25);
_sprite.graphics.endFill( );
_sprite.x = 50;
_sprite.y = 100;
addChild(_sprite);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
public function onEnterFrame(event:Event):void {
_sprite.x += _vx;
}
}
}
If you set _vx to -3 instead, you'll
see that it goes in the opposite direction. You can also add in
some y velocity by creating a _vy variable, giving
it a value, and changing the onEnterFrame method, as
follows:
public function onEnterFrame(event:Event):void {
_sprite.x += _vx;
_sprite.y += _vy;
}
If you aren't a fan of frame-based animation (as
in the previous example), you can use a timer function instead, as
shown here in bold:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class Velocity extends Sprite {
private var _sprite:Sprite;
private var _vx:Number = 3;
private var _vy:Number = 2;
private var _timer:Timer;
public function Velocity( ) {
_sprite = new Sprite( );
_sprite.graphics.beginFill(0x0000ff, 100);
_sprite.graphics.drawCircle(0, 0, 25);
_sprite.graphics.endFill( );
_sprite.x = 50;
_sprite.y = 100;
addChild(_sprite);
_timer = new Timer(30);
_timer.addEventListener("timer", onTimer);
_timer.start( );
}
public function onTimer(event:TimerEvent):void {
_sprite.x += _vx;
_sprite.y += _vy;
}
}
}
See Also
Recipe
11.2 for information on how to move an object at a given speed
and angle.
|