Flash ActionScript 3 overview

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Disclaimer: Until today I have never seen any ActionScript code. I will use this page to write down a few things. Wait until this message goes away before you can trust anything ! - Daniel K. Schneider 15:56, 5 September 2007 (MEST). Some links (there are mostly just links in here) may be useful though.

This is part of the Flash series of articles. But it is not a tutorial !!

Introduction - Writing and using AS Code

“ActionScript 3.0 is a dialect of ECMAScript which formalizes the features of ActionScript 2.0, adds the capabilities of ECMAScript for XML (E4X), and unifies the language into a coherent whole.” (Grossman, 2006).

Basically, there are three ways of using ActionScript 3:

• Use the Flash CS3 environment more less as "in the ActionScript 2" way, i.e. you add bits of code to certain frames
• Write action code with a class structure in a file, then import to a frame through the properties panel.
• Write your code in a file and compile it (you also may use Flash CS3 that way). No drawings, just code ! AS3 is also part of Flex, Adobe's software development kit to create rich internet applications.

So you either can do AS3 with Adobe Flash CS3 Professional or just code in AS3. For the latter there is a free kit or else just use any editor plus the mxmlc compiler.

Using ActionScript like a Flash Designer

• Create a new layer
• Click on a frame (typically frame 1)
• Hit F9, the copy/paste or write your code

This is the way most of the Flash examples made in our tutorials were made

Scripting in the timeline does not require from you to use classes. However, sometimes you need to import packages, i.e. when Flash whines that it can't find a method. Examples are:

import Fl.managers.FocusManager; // to work with keypress events
import fl.video.MetadataEvent;  // to work with cue points in flv videos

Using ActionScript classes in CS3

Most examples in the official Using ActionScript 3.0 Components and ActionScript 3.0 Language and Components Reference are made with a class structure and require that you learn this (read also Using examples in the ActionScript 3.0 Language Reference):

1. Write code in a AS file and give the file the same name as the primary class (for example: ContextMenuExample.as).
2. Create and save a new empty FLA file in the same directory as the AS file.
3. In the Properties tab of the Property inspector enter the class name of the primary class for the example in the Document class text box (for example: ContextMenuExample).
4. Save your changes to the FLA file.

Note for Flash designers: Some of the code in the Flash doc can be fairly easily simplified to work with the simple timeline scripting method. Other can not and you do have to code with a "class structure".

Stand-alone code development with AS 3

You do not need to buy Flash CS3 (that's actually a cool thing) to program in AS3 and to create *.swf files. You can either use:

• Flex Builder - an Eclipse plugin
• Just the Flex SDK

The Flex SDK 2.0.1 (or better) from Adobe

• Download this free SDK from Adobe:

http://www.adobe.com/products/flex/downloads/

For Windows and Mac there is a Flex Builder plugin for Eclipse. Otherwise there is a platform independent compiler, the Adobe Flex2 Software Development Kit (SDK).

Installing the Adobe Flex2 Software Development Kit (SDK) for Windows

• Unzip it somewhere
• Edit the Environment variables through the configuration panel to include the bin directory in the path: I.e. something like Parameters->Config Panel->System->Advanced (I don't have an English System at hand).

Installing the Adobe Flex2 Software Development Kit (SDK) for Ubuntu

• Unzip it somewhere (I put it under /usr/local/flex)
• Under Linux change permissions of the shell scripts in the bin directory, in particular mxmlc
• Then add this directory to your path. E.g. under my Ubuntu I added in file /etc/bash.bashrc:

export PATH=${PATH}:/usr/local/flex/bin

Using the compiler

• Just type something like:

mxmlc HelloWorld.as 

.... This will make an *.swf file

Development support other than Eclipse

I find these IDEs too hard to use (I only occasionally program and just use the Emacs editor and don't want learn full Flex yet). So I need some Emacs code for help with editing (not done yet)

• e.g. http://nisheet.wordpress.com/tag/emacs/

The class hierarchy

Interactive objects - an overview

The ActionScript 3.0 flash.display package defines a whole lot of different kinds of visual objects that can appear in the Flash Player.

Below is summary table of ActionScript 3 interactive display objects. It shows that interactive objects are defined as hierarchical classes. Methods and properties that work for a parent class (e.g. Sprite) also will work for its child classes (e.g. UIComponent). Links point to the technical reference manual at Adobe.

• DisplayObject
  1. InteractiveObject
     1. DisplayObjectContainer
        1. Loader: Class for loading objects (Bitmaps, AS3 Sprites or Movieclips, or AS 1/2 AVM1Movie).
        2. Sprite: Manipulable container of objects
           1. FLVPlayback FLVPlayback]
           2. FLVPlaybackCaptioning
           3. MovieClip: refers to a movie clip symbol created in the Flash authoring tool.
           4. UIComponent
              1. BaseButton
              2. BaseScrollPane
              3. ColorPicker
              4. ComboBox
              5. IndeterminateBar
              6. Label
              7. NumericStepper
              8. ProgressBar
              9. ScrollBar
              10. Slider
              11. TextArea
              12. TextInput
              13. UILoader
        3. Stage
     2. SimpleButton
     3. TextField
  2. AVM1Movie
  3. Bitmap: for displaying a bitmap image
  4. MorphShape:
  5. Shape: on-screen canvas for drawing content
  6. StaticText: Frozen text
  7. Video: contains video

The display list

At at given time in your animation, your Flash application contains a hierarchy of displayed objects: the display list. It contains all the visible elements and they fall in one of the following categories:

• The stage: Each application has one stage object and it contains all on-screen display objects (i.e. containers or simple objects). This includes objects that the user can't see (e.g. ones that are outside of the stage).
• Display object containers, i.e. objects that can both simple display objects and display object containers.
• (Simple) display objects

AS 3 coding notes

(I will kill this section later ... i.e. once I got some tutorials with code inside)

Event handling

General pattern

Definition of an event handler function:

function eventResponse (eventObject:EventType):void
 {
   // Actions performed in response to the event go here.
 }

Using it:

eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);

Example

launch_button.addEventListener(MouseEvent.CLICK,launchRocket);

function launchRocket(event:MouseEvent):void {
    gotoAndPlay(2);
}

See ActionScript 3 event handling tutorial. You also can see an example in the Flash button tutorial

Documentation Links

See also Abobe Flex

Reference manuals

• ActionScript 3.0 Language & Component Reference
• Adobe Flex 2.0.1 Language Reference
• Flex 2 LiveDocs: Programming ActionScript 3.0

Other documentation

• Adobe Livedocs has fairly good documentation (maybe not suitable for beinners) e.g.
  • Getting started with ActionScript

• ActionScript 3 from Adobelabs. Maybe superseded by the above doc, maybe not ...

• ActionScriptCheatSheet.com Look at the downloads. Several excellent ActionScript cheatsheets.

AS2 vs. AS3 comparisons

• Understanding the changes in the display API in ActionScript 3.0 (short example code comparison)

• ActionScript 2.0 Migration (Adobe). This list list is huge :)

Overviews

• Grossman, Gary and Huang, Emmy (2006). ActionScript 3.0 overview, Adobe.
• ActionScript (Wikipedia)
• Comparing the syntax of Java 5 and ActionScript 3

Tutorials

General AS 3 Tutorials

• Getting Started with ActionScript 3.0 in Adobe Flash CS3

• Migrating your Flash applications to ActionScript 3.0

• Tutorials at ActionScript.org has several action script tutorials, e.g.
  • Getting started with Actionscript 3

• Kirupa, e.g.
  • Using XML in Flash CS3/AS3

• Adobe's Developer Center includes many "quickstart" articles
  • Filtering XML data in Flash applications using ECMAScript for XML
  • Filtering and formatting data in the DataGrid component

• Flepstudio has a series of tutorials.

• Flash-db.com has a series of tutorials.

Component programming

(to sort out)

• AS3 Mouse Events and Mouse Related User Actions by Drawk - Really useful.

• Quick Tips for Making ActionScript 3 Components by Ben Stucki.

• ActionScript 3.0 Forums at Kirupa.com. Also includes [ ActionScript 3 Tip of the Day]

• Animating Dynamic MovieClips in AS3 by Kirupa.

• Sending Variables to PHP from Flash And Back again! (AS2)

• Eric Cancil. A blog with AS3 code.

• $.console A console for debuggin, pops up over your application (looks good, not tested so far).

AS 3 Example-based tutorials

• Flash Tutorial - Copy Motion as ActionScript 3.0
• Metah.ch has a series of tutorials with source code.

AS 3 Examples

• Flex Treemap Component
• Updated: List of Best Animation Packages for AS3
• On user-triggered and user-controlled interface animation

Reusable components and libraries

• Tweener Tweener (caurina.transitions.Tweener) is a Class used to create tweenings and other transitions via ActionScript code for projects built on the Flash platform.

• TweenLite. TweenLite (AS3) - A Lightweight (2K) Yet Powerful Tweening Engine.

• TweenFilterLite. TweenFilterLite extends the extremely lightweight (2k), powerful TweenLite "core" class, adding the ability to tween filters (like blurs, glows, drop shadows, bevels, etc.) as well as image effects like contrast, colorization, brightness, saturation, hue, and threshold (combined size: 5k).

• WebORB for PHP (should be move to Flex). erver-side technology enabling connectivity between Flex and Flash Remoting clients and PHP applications.

Other

Development environments

• Flash/ActionScript3 Programming under Ubuntu ... Tested, this works :)

Blogs and stuff

• Tag: Actionscript3 at Wordpress
• Drawk's blog Publishes also source and a good tweener library.
• WS-Blog by Jens Krause.