Previous Page
Next Page

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.


Previous Page
Next Page
Converted from CHM to HTML with chm2web Pro 2.85 (unicode)