Introduction to ActionScript

Overview

ActionScript

• is an ECMAScript language (now)
• is the scripting language of Flash

Getting Started

Hey, why not start with a series of Hello, Worlds? First, the smallest one I could manage:

createTextField("message", 1, 0, 0, 100, 50);
message.text = "Hello, World";

To compile with Flash, type this code into the actions frame, hit Ctrl+Enter to test it, then do [File|Export|Export Movie...] and export as hello.swf. When I used Flash MX 2004 (Flash 7) and asked to export as AS2.0 without compression, the .swf file was 145 bytes in size:

    0000000 46 57 53 07 91 00 00 00 78 00 05 5f 00 00 0f a0
    0000010 00 00 0c 01 00 43 02 ff ff ff 3f 03 6d 00 00 00
    0000020 88 2c 00 04 00 6d 65 73 73 61 67 65 00 63 72 65
    0000030 61 74 65 54 65 78 74 46 69 65 6c 64 00 74 65 78
    0000040 74 00 48 65 6c 6c 6f 2c 20 57 6f 72 6c 64 00 96
    0000050 2a 00 07 32 00 00 00 07 64 00 00 00 06 00 00 00
    0000060 00 00 00 00 00 06 00 00 00 00 00 00 00 00 07 01
    0000070 00 00 00 08 00 07 06 00 00 00 08 01 3d 17 96 02
    0000080 00 08 00 1c 96 04 00 08 02 08 03 4f 00 40 00 00
    0000090 00

The following scripts do the same:

this.createTextField("message", 1, 0, 0, 100, 50);
this.message.text = "Hello, World";

_root.createTextField("message", 1, 0, 0, 100, 50);
_root.message.text = "Hello, World";

var helloClip:MovieClip = this.createEmptyMovieClip("hi", 1);
helloClip.createTextField("message", 1, 0, 0, 100, 50);
helloClip.message.text = "Hello, World";

How about some basic formatting and animation?

// A prettier hello world app than most.

// Make a wrapped, multiline, bordered message
createTextField("message", 1, 50, 50, 300, 400);
message.text = "Hello, hello, hello, is there anyone out there?";
message.border = true;
message.multiline = true;
message.wordWrap = true;

// Style up the message real pretty
var format:TextFormat = new TextFormat();
format.align = "center";
format.bold = true;
format.italic = true;
format.font = "serif";
format.size = 60;
format.color = 0x008080;
message.setTextFormat(format);

// Show it sinking
onEnterFrame = function() {
    if (message._y < 500) message._y++;
}

For graphics, eight methods in the MovieClip class comprise the drawing API.

• lineStyle([thickness[, rgb[, alpha]]])
• beginFill([rgb[, alpha]])
• beginGradientFill(fillType, colors, alphas, ratios, matrix)
• endFill()
• moveTo(x, y)
• lineTo(x, y)
• curveTo(controlX, controlY, anchorX, anchorY)
• clear()

A trivial example

var r:MovieClip = createEmptyMovieClip("box", 1);
r.beginFill(0xcc00cc, 100);
r.moveTo(20, 20);
r.lineTo(140, 20);
r.lineTo(140, 140);
r.lineTo(20, 140);
r.endFill();

var t:MovieClip = createEmptyMovieClip("triangle", 2);
t.beginFill(0x000099, 40);
t.lineStyle(2, 0x000033, 40);
t.moveTo(-50, 50);
t.lineTo(50, -50);
t.lineTo(50, 50);
t.endFill();
t._x = 100;
t._y = 100;
t.onEnterFrame = function() {
   this._rotation += 5;
}

For more on the drawing API see

• SF Multimedia's ActionScript Salon #7
• Nice overview and examples from Helen Triolo's flash-creations.com
• Ric Ewing's article on drawing, in which he adds a bunch of new methods to the MovieClip prototype

ActionScript, the Language

ActionScript and ECMAScript

Well, ECMAScript is the real language here... ActionScript is mostly just ECMAScript with a bunch of objects (and classes). The different versions of ActionScript sort of track ECMAScript changes:

ECMAScript Overview

ActionScript Extensions, Differences, and Omissions

Built-in Classes

The core classes are those required by ECMAScript; the others are specific to the Flash "DOM".

Flash users also get a bunch of components that look like built-in classes, but are just really part of a components library. Components that come with Flash MX 2004 include:

Notes:

• Some names overlap with built-in classes, but that is a coincidence, e.g. the Button component is different from the Button (built-in) class.
• Some components are basically wrappers around objects, e.g. the TextInput component is a wrapper for the native ActionScript TextField object.
• Where components wrap native objects, the components tend to consume way more memory.

Fun Stuff

Sound

Video

Event Handling

StyleSheets

Advanced Drawing

XML

Remoting