about
history
syntax
visu
arcade
goodies
wrappers
efficiency
examples
experiments
tabageos
tutorials
actiontad logo white
An Overview of ActionScript 3.0 Syntax
 


ActionScript 3.0 is similar to JavaScript in many ways.
Its package and basic symbolic syntax structure is most like the Java language.
It should be relatively easy to learn for those who know JavaScript.
And easier for those who know some Java or another programming language like C++.

ActionScript is case sensitive:
myvar
is not the same as:
Myvar
Arrays are declared the same way as in JavaScript:
var myarray:Array = new Array("one", "two", "three");
var myotherarray:Array = ["one", "two", "three"];
In fact, alot of the same general functions in JavaScript simply carry over:
JavaScript:
var backslash = new Array(String.fromCharCode(92)).join(""); // "\"
var myregx = new RegExp("[0-9]{2, }[a-z]{3, }", "i");

ActionScript 3.0: var backslash:String = new Array(String.fromCharCode(92)).join(""); // "\" var myregx:RegExp = new RegExp("[0-9]{2, }[a-z]{3, }", "i");

However in .as files, (as you can see above) all variable types must be declared
and, unlike JavaScript, the use of namespaces, classes and packages is also a focus.

In AS3 objects are the focus.
Objects can contain variables, shapes, sprites, functions, methods, classes or other objects.
Variables, functions, and classes are all objects.
All of the functions and methods above come from the Top Level package of AS3;
use of classes (Array, String, Math, Object..) in the Top Level does not require an import.
In order to utilize more functions and methods in the language,
other imported classes from packages are used.

Got all that? To get the general feel for AS3 syntax let's go over a basic "Hello World!" example.

A basic ActionScript 3.0 package
 


To use AS3 by itself, without a program like Adobe Flash CS3,
we must use what is known as a package.
Packages hold class defenitions. A basic AS3 package looks like this:

package
{
   import flash.display.Sprite;
   public class ABlankSwf extends Sprite
   {
      public function ABlankSwf()
      {
           //when saved as a file called ablankswf.as
           //this will compile to a blank .swf called ablankswf.swf
           //the name of the class must match the name the .as file
           //the public function gives 'action' to the class of the same name  
           //public classes and functions will be accesable by the whole file 
           //the word public can be thought of as a namespace
 
           //just as in JavaScript, lines like this one are comments
      }
   }
}

To make the above example display "Hello World!" some code must be added.

  1. We must use the import command to include the Sprite and TextField classes.
    The import command can be thought of as importing different parts of the AS3 language.
    Only the parts that are used in your particular file need to be imported,
    this reduces compilation time and helps minimize errors.
    Imports go directly below the opening of the package.
    package
    {
      import flash.display.Sprite;
      import flash.text.TextField;
    ...
    
  2. The flash.display package is what allows us to work with display objects.
    A Sprite is a display object. To make our class inherit from sprite,
    we say that our public class ablankswf extends Sprite.
    public class ABlankSwf extends Sprite
    {
    ...
    
    This means that the code (variables, functions, objects...) within the class named ABlankSwf
    will now be able to reference code in the Sprite class.
    In other words, our swf file is now a Sprite that can display objects.

  3. The ABlankSwf function will now house the code that will add objects to the display.
    Because it has the same exact name as the class, it is known as the constructor function.

    The flash.text package allows us to work with text formats and text fields.
    Text fields are objects, text formats give style to text fields.
    To create a new text field with the "Hello World!" text,
    in the constructor function ABlankSwf we replace the comments with the following code:
    var textSpot:TextField = new TextField();
    textSpot.text = "Hello World!";
    addChild(textSpot);
    
    We did not define a text format so the default text format of the Flash Player is used.

The complete code now looks like:
package
{
  import flash.display.Sprite;
  import flash.text.TextField;

   public class ABlankSwf extends Sprite
   {
      public function ABlankSwf()
      {
            var textSpot:TextField = new TextField();
            textSpot.text = "Hello World!";
            addChild(textSpot);
      }
   }
}


Let's go over the above code in more detail now:
  1. We define the package wich is the whole file in this case.
  2. We import the classes of code that we need.
    In this case we needed the Sprite class of the flash.display package,
    and the TextField class of the flash.text package.
    The Sprite class tells the flash player what a sprite is.
    The TextField class tells the flash player what a text field is.
    If we wanted to import the whole display package
    (which includes the MovieClip class amongst other objects)
    we type this:
    import flash.display.*;
    The asterisk signifies that we are importing one or more objects from the package.
    We can do the same for the text package.
    import flash.text.*;
    However, only the classes we actually use in the code would be compiled in the swf.

    Note:
    A Sprite ( http://livedocs.adobe.com/flex/3/langref/flash/display/Sprite.html)
    in AS3 does not have a timeline.
    Sprites have just one frame, however the on enter frame event can still be invoked.

    A MovieClip ( http://livedocs.adobe.com/flex/3/langref/flash/display/MovieClip.html)
    has a timeline.


  3. Our main class is defined, in this case it extends the Sprite class,
    which basically means our file will consist of one main sprite.
    We can add other sprites to the main sprite and we can even add timers which can serve as separate timelines,
    but in this case we just need the one main sprite.
  4. The constructor function (first public function with same name as the class) holds the 'action' of our sprite.
    The 'action' that this sprite will do is display a text field.
    The variable TextSpot will be a text field,
    we have declared its type by using a colon and the word TextField.
    var TextSpot:TextField
    In .as files all new variables must be declared in this way.
    We could have used an asterisk instead so that TextSpot could be any type of object.
    var TextSpot:*
    We then say that TextSpot equals a new TextField(),
    this is what creates a text field named TextSpot.
    To give TextSpot some text we say that its text property equals the string "Hello World!"
    Finaly, we add TextSpot to the display by calling the addChild method of the Sprite class.

When the code is compiled this is the result:
HelloWorld! result swf image

Variables, Functions, and Event Listeners:
 


Just like most other languages, in AS3 there are variables that are global,
(accessable by every function in a package)
and variables that are local (can only be accessed within their own function).

To define a global variable for the main class we declare it after the opening of the class,
and call the varaible private, meaning it will be accessable only in the class:
The word private basically signifies a namespace.
In AS3 you can create your own namespaces, but that is a more advanced topic.
private var myvariable:String = "Hello World!";

Variables declared within private functions can only be used within those functions.
To create a private function we declare it outside of the constructor funtion
and before the end of the class:
package
{
   import flash.display.Sprite;
   import flash.events.Event;

   public class MySwf extends Sprite
   {

        private var globalVariable:String = 
        "Im global and accessable by all functions in this class.";

        public function MySwf()
        {
           //This is how to add the EnterFrame Event to the main Sprite
           //now the function named thisFunction will continually happen

           addEventListener(Event.ENTER_FRAME, thisFunction);
        }

        private function thisFunction(event:Event):void
        {

             
             //When making a function,
             //what the function is going to return must be declared
             //in this case this function will return nothing
             //so a colon and the word void is added after the closing parenthesis of the function.
             //If the function was to return a string then we would put String instead 
             //functions can return just about any object.

             //Because this function will happen on the enterframe event,
             //its arg must be the event and it must return void
             //notice that the type of event must also be declared
             //in this case it's just a standard Event
             //in the case of timers it would be a TimerEvent
             //we could have called the lower case "event" anything

             //A function called by this function would not require an arg

             //this function is only to be used by the myswf class
             //thats why we call it private
             
             //Variables declared inside of functions are local.
             //The private declaration is not needed for these kind of variables.
              
             var insideFunction:String = "Im inside the function and not global.";

        }

   }

}


As seen in the above code, we can add events to the main Sprite.
We can also add events to sprites within the main sprite.
To add any events we must import from the event package:
import flash.events.*;
There are many different event classes
including the TimerEvent, MouseEvent, and just plain Event class.
We add events by calling the addEventListener() method of the EventDispatcher class. (Sprites derive from this class).
In the below example, our main class will get the ENTER_FRAME event which is part of the Event class,
a child Sprite will get the CLICK event which is part of the MouseEvent class,
and a Timer will get the TIMER_COMPLETE event which is part of the TimerEvent class:
package
{

	import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
   

	public class ThreeEvents extends Sprite
	{

		private var tellEvent:TextField = new TextField();

		public function ThreeEvents() {

			//the autoSize property of text fields lets the text field automatically
			//adjust to the length of the text it contains

			tellEvent.autoSize = TextFieldAutoSize.LEFT;
			addChild(tellEvent);

			//theEnterFrameFunction is the name of the function that will happen on enter frame  
			//this swf will have only one frame, nonetheless,
			//theEnterFrameFunction will happen continually

			addEventListener(Event.ENTER_FRAME, theEnterFrameFunction);

			var babySprite:Sprite = new Sprite();
			//the visualization section has information on graphics
			babySprite.graphics.beginFill(0xFF0000, 1.0);
			babySprite.graphics.drawCircle(100, 100, 25);
			babySprite.graphics.endFill();

			//mouseClickedFunction will happen when babySprite is clicked
			babySprite.addEventListener(MouseEvent.CLICK, mouseClickedFunction);

			addChild(babySprite);
			//the visualization section has more about timers
			var aTimer:Timer = new Timer(5000, 1);

			//timerCompleteFunction will happen when the timer is complete
			aTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerCompleteFunction);

			//starting the timer
			aTimer.start();
		}

		private function theEnterFrameFunction(eventone:Event):void {

			//this function is happening on enter frame

			//to ensure that it only appends text to tellEvent once
			//we check tellEvents text for an index of what is to be added

			//to have the text forever appended remove the if statement

			//this function should happen first

			if (tellEvent.text.indexOf("enter frame event")==-1)
			{tellEvent.appendText("enter frame event");}

		}

		private function mouseClickedFunction(eventtwo:MouseEvent):void {

			//when the red circle named babySprite is clicked, "mouse click event"
			//will be added to the text field named tellEvent

			tellEvent.appendText("mouse click event");

		}

		private function timerCompleteFunction(eventthree:TimerEvent):void {

			//when the timer is complete the string "timer complete event"
			//will get added to tellEvents text

			tellEvent.appendText("timer complete event");

			//It is always good practice to remove event listeners that you no longer need
			//you do this by using the removeEventListener method

			removeEventListener(TimerEvent.TIMER_COMPLETE, timerCompleteFunction);

		} //Notice the different bracket style? It does not matter how you do it.
		  //I prefer this style with the top bracket directly after the end of the function declaration.

	}
}


When compiled, if you click on the circle before five seconds, then wait a few seconds,
this is what it would look like:
ActionScript Events result image

The Visualization section has more on sprites, the display class and animation.
The .as section is all about how to compile .as files into .swf files and the software resources needed.

This book is good for the ActionScript 3.0 beginner:
Learning ActionScript 3.0: A Beginner's Guide

To get deep into the ActionScript 3.0 language there is no better online resource than:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3

back to top









actiontad twitter.com/actiontad terms