How do I animate a sprite?

Question

I'm using Flex and AS3 to try and create a game, and I'm wondering how I can animate things easily. I would prefer to use sprite sheet images. I'm going to go a head and post the code (It's really short) I got so far, can someone look over it and tell me the best/simplest/easiest way to add animation support? Thank you in advance.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  styleName = "plain"
    xmlns="cyanprime.*" 
    layout="absolute"
    width="600"
    height="400"
    frameRate="100"
    applicationComplete="initApp()">

    <mx:Script>
        <![CDATA[
            public function initApp():void
            {
       stage.addEventListener(KeyboardEvent.KEY_UP, keyUp); 
       stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown); 
       Mouse.hide();
                canvas.init();

            }

      private function keyDown(event:KeyboardEvent):void
      {
       canvas.KeyDownHandler(event);
      }

      private function keyUp(event:KeyboardEvent):void
      {
       canvas.KeyUpHandler(event);
      }
     ]]>
    </mx:Script>

  <MyGameCanvas id="canvas" width="100%" height="100%" themeColor="#ff0000" />
</mx:Application>

...

package cyanprime{

    import mx.core.UIComponent;
    import mx.controls.Image;
    import flash.events.*;
    import flash.utils.*;
    import flash.display.*;
    import flash.ui.Keyboard;

    public class MyGameCanvas extends UIComponent{
     [Embed(source="player.gif")]
        private var playerImage:Class;
     private var playerSpeed:int = 5;
     private var keys:Array = new Array();
     private var player:DisplayObject = new playerImage();
     private var ticker:Timer;



     public function init():void{
            // set up player
      player.x = 50;
      player.y = 50;
            addChild(player);

      for(var i:int = 0; i < 300; i++)
      {
       keys[i] = false;
      }

      ticker = new Timer(10); 
            ticker.addEventListener(TimerEvent.TIMER, onTick);
            ticker.start();

     }

     public function controls():void{
      if(keys[Keyboard.RIGHT])
       player.x += playerSpeed;

      if(keys[Keyboard.LEFT])
       player.x -= playerSpeed;

      if(keys[Keyboard.UP])
       player.y -= playerSpeed;

      if(keys[Keyboard.DOWN])
       player.y += playerSpeed;
      }

     public function KeyDownHandler(event:KeyboardEvent):void{ 
      keys[event.keyCode] = true;

     }

     public function KeyUpHandler(event:KeyboardEvent):void{
      keys[event.keyCode] = false;
     }

     public function onTick(evt:TimerEvent):void {
      controls();
     }  
    }
}

Answer 1

You can use a tween library such as TweenLite, which is probably the easiest way. If you want to learn the nuts and bolts of animating in Actionscript, the book Actionscript 3.0 Animation by Keith Peters is second to none.