Create Flash Animations with ActionScript 3 and Tweener

One of the kewl things about Flash is its vector graphic animation and tweening capabilities. Since I have been playing around with FlashDevelop to create ActionScript based graphics I thought it would be a nice idea to do some animations. The easiest way to create animations in Flash is to tween a graphic, so to speak, and the Tweener library make this incredibly easy that it is best to describe what tweening is by showing some code.

package
{
  import flash.display.Shape;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.text.TextField;
  import flash.text.TextFormat;
  import flash.text.TextFieldAutoSize;
  import caurina.transitions.*;

  public class Main extends Sprite
  {

    public function Main():void
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);

      // Create a text field.
      var texty:TextField = new TextField();
      texty.text = "Holla, Tweener!";
      texty.autoSize = TextFieldAutoSize.CENTER;

      // Size and color the text field
      var textyFormat:TextFormat = new TextFormat();
      textyFormat.color = 0xFF00f0;
      textyFormat.size = 50;
      texty.setTextFormat(textyFormat);

      this.addChild(texty);

      // Animate the text field for 8 seconds
      // to move to the x, y coordinates
      Tweener.addTween(texty, {x:300,y:200, time:8, delay:0, alpha:0});
    }
  }
}

The code above is from the Main.as file that is created from FlashDevelop when you create a new ActionScript 3 project. I only modified the init function.

To actually build and run this code, you will first need to create an ActionScript 3 project in FlashDevelop. Also, download the Tweener AS3 library. After you unzip the Tweener code, copy the ActionScript source files to the src directory in the newly created project. At this point hitting F8 will build the project.

Technorati Tags: , , , , , , ,