ActionScript 3.0 Visualization Concepts

ActionScript 3.0 programming begins by having a good mental picture of what your code will do once compiled.
In this section we'll go over how to control the visual aspects of the swf file and Sprites, and how to add animation.

Width Height and Background Color of a .swf file

With AS3 there are a few different ways to change the size and background color of a swf.

1. Use the [SWF...] declaration after the opening of a package.
   Within such a declaration the frame rate, width, height and background color
   of the swf file to be complied can be declared as follows:

    [SWF(frameRate = '20', backgroundColor = '0xc8c8c8', width = '433')]
   



2. Embed a background image and add it as the first (bottom) child in the display:
   

   package
   {
      import flash.display.Sprite;
      import flash.display.DisplayObject;
     
      public class EmbededBackground extends Sprite
      {
      
          [Embed(source="../imagefolder/mybackground.jpg")]
          private var TheBackground:Class;
       
          public function EmbededBackground()
          {
                 var swfBackground:DisplayObject = new TheBackground();
                 addChild(swfBackground);
   
                 //any child added afterwards will be on top of the background
                 //swfbackground is on level 0 which is the bottom
                 //this is different than in AS2
          }
   
      }
   
   }
   



3. Use the wrapper to determin background color, width and height:
   

    
    <object type="application/x-shockwave-flash"
    data="myswf.swf" width="480px" height="400px" >
    <param name="bgcolor" value="#6495ED" />
   ...
   

   The background color that the wrapper defines will replace
   whatever background color defined inside the swf file.
   If the width and height in the wrapper are not the same as the swf file, the swf file will be scaled.
   The Wrappers section has more on embedding your swf in html.

The Graphics Class
The Graphics class is part of the flash.display package.
It allows us to add graphics such as colors and shapes, to display objects such as Sprites.
Drawing a circle:

package
{
  import flash.display.Sprite;
  import flash.display.Graphics;

  public class ACircle extends Sprite
  {
     public function ACircle()
     {
        //define a new sprite
        var aSprite:Sprite = new Sprite();

        //the beginFill method initiates a color and alpha value for the sprite
        aSprite.graphics.beginFill(0xFFFFFF, 1.0);

        //the drawCircle method draws a circle with the specified x, y, and radius values
        aSprite.graphics.drawCircle(0, 0, 25);

        //the endFill method is used to apply fills
        aSprite.graphics.endFill();

        //finaly we add the sprite to the display
        addChild(aSprite);
     }
  }
}

You can find out more about the graphics class here:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Graphics.html

Animation with the Timer Class

To make full use of the Timer class we also need the TimerEvent class.
We can import both as follows:

import flash.utils.Timer;
import flash.events.TimerEvent;

With the Timer class we can add timers to our swf file.
When events are added, timers act much like timelines to allow for animation.
A basic timer that waits 3 seconds, displays "Hello "
then waits another 3 seconds then displays "World!":

package
{
  import flash.display.Sprite;
  import flash.utils.Timer;
  import flash.events.TimerEvent;
  import flash.text.TextField;

  public class ATimer extends Sprite
  {

      //this text field has been defined globaly so that all functions may reference it
      private var showText:TextField = new TextField();

      public function ATimer()
      {
        showText.text="";
        addChild(showText);

        //initalize a new timer that will run twice at three second intervals
        //if we want the timer to run forever we would replace the two with a zero
        var myTimer:Timer = new Timer(3000, 2);

        //this event (showhello) will be triggered at every interval of the timer
        myTimer.addEventListener(TimerEvent.TIMER, showHello);

        //this event (showworld) will be triggered on the last interval of the timer
        myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, showWorld);
  
        //starting the timer
        myTimer.start();        
      }
   
      private function showHello(event:TimerEvent):void
      {
         //we use an if statement because this event will fire on every interval
         //without the if,  two "Hello " strings would be added, one on each interval
         //the currentCount property gets the current interval of the timer

         if (event.target.currentCount < 2)
         {showText.appendText("Hello ");}
      }

      private function showWorld(event:TimerEvent):void
      {
         //this will happen when the last interval is complete
         showText.appendText("World!");
      }

  }

}

The AS section is about how to turn .as files into .swf files.

back to top