Flash ActionScript 3 overview

ActionScript 3 overview information

This is part of the Flash and ActionScript series of articles. But it is not a tutorial. The purpose of this entry is to provide some general information about ActionScript and some useful links.

See also:

• The entry page for AS3 tutorials in this wiki is Actionscript 3.
• Flash and AS3 links - general
• Flash and AS3 links - tutorials
• Flash and AS3 links - documentation (Flash and AS3 Books, Reference Manuals and Cheatsheets)
• Flash and AS3 links - toolkits (AS 3 Toolkits, Libraries, Flash reusable components, AS 3 reusable code, etc.)

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). ActionScript 3 was built on a proposal for ECMAScript 4.0 that then got rejected or stalled. Read Mike Chambers' piece on ActionScript 3 and ECMAScript 4.

Basically, there are two different ways of using ActionScript 3. Each has sub variants:

1. Within a Flash CS3 environment:

• Use the Flash CS3 environment more or less as "in the ActionScript 2" way, i.e. you add bits of code to certain frames and that refer to objects in the library and/or on the stage.
• 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 !

2. Within an Adobe Flex environment: Flex is a framework introduced by Adobe that also compiles into swf files. Flex is meant to make it easier to conceive rich Internet applications that contain a variety of interactive interface elements (buttons, textfields, lists of images, etc.). The Flex SDK is free to use but lives in a command line environment. Flex Builder provides a visual development environment. It is free for students and educators starting (upon request).

• Use the actionscript compiler bundled in the Flex framework to compile AS3 files. See also our own Adobe Flex installation tips and AS3 Compiling a program
• Write a Minimal MXML application that contains little else than a call to a main function. An example of this can be found in Minimal MXML example by Moock.
• Write a Flex/MXML document that includes a script element. The use of actionscript within a <mx:Script> tag is explained in the Flex Language Reference or this blog post on Using ActionScript in Flex applications

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 simplified to work with the "timeline scripting method". Other code can not and you do have to code with a "class structure".

Stand-alone AS3 code development / SDK and editors

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 - a commercial Eclipse plugin available from Adobe (free for education upon request).
• Just the Flex SDK together with a "normal" programming editor.

In addition you may use MXML, an XML-based user interface markup language.

Read how to install the Flex Framework.

Using the compiler

• Just type something like:

 mxmlc HelloWorld.as 

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

Development support other than Eclipse

If you find IDEs (.e. the Flash builder) too hard to use you can find editors with ActionScript support or at least syntax support for JavaScript/Java, e.g.

• Flashdevelop
• Emacs (read this if you know about Emacs)
• JEdit. You can use the Java beautifier, but you may have to find the plugins with google and install manually. Btw. JEdit also has a wikipedia mode)
• If configuring and learning Flashdevelop, Emacs, JEDIT etc appears too complex to master, a very easy to use editor in Unix/Linux environments is pico (but you will not get any syntax support). See text editor article in this wiki for a discussion/presentation of some editing software.
• Finally, you also can use the CS3/Flash ActionScript editor if you own this package.

The class hierarchy

At the origin, there is the Object. It has many subclasses (about 151 I'd say).

EventDispatcher

EventDispatcher implements is the base class for the DisplayObject class, i.e. all displayed objects. It is a direct child of Object and has 29 subclasses. A few are:

• DisplayObject (see below)
• NetStream NetStream (use to deal with streaming connections)
• Sound (use to load/play external sound)
• SoundChannel (control sound)
• Timer (use for time-based animation)

The DisplayObject

The ActionScript 3.0 flash.display package defines a whole lot of different kinds of visual objects that can appear in the Flash Player. DisplayObject is a child of EventDispatcher, child of Object

Below is summary table of AS3 / Flash 9 / CS3 interactive display objects (not covering Flex). 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. Please note that the graphics are defined by very different classes. Graphics are inserted into the graphics properties of display objects.

• DisplayObject, see also Core display classes overview.
  1. InteractiveObject (base class for all interactive objects)
     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. MovieClip: refers to a movie clip symbol created in the Flash authoring tool.
           2. FLVPlayback FLVPlayback] (CS3 only)
           3. FLVPlaybackCaptioning (CS3 only)
           4. UIComponent (only in CS3, Flex has equivalent MXML classes)
              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

Below is a Flash 10/ CS5 version

• DisplayObject
  1. InteractiveObject (base class for all interactive objects)
     1. DisplayObjectContainer
        1. Loader
        2. Sprite Sprites are like Movie Clips without timeline
           1. FLVPlayback
           2. FLVPlaybackCaptioning
           3. HTMLLoader
           4. MovieClip
           5. UIComponent Includes several subclasses, for example:
              1. BaseButton
              2. TextArea
        3. Stage
        4. TextLine
     2. SimpleButton
     3. TextField
  2. AVM1Movie
  3. Bitmap
  4. MorphShape
  5. Shape is a very light-weight display object (as opposed to a Sprite)
  6. StaticText
  7. Video

Events

The Event class is used as the base class for the creation of Event objects, which are passed as parameters to event listeners when an event occurs. Event is a direct child of the object. There are 26 direct subclasses for Flash (CS3) and Flex (MXML) has even more. We only will show a few flash and fl events.

• Event
  1. ComponentEvent (UIComponent class related)
  2. KeyboardEvent (user presses key)
  3. MetadataEve (cue points and user metadata requests)
  4. MotionEvent (related to fl.motion.Animator class)
  5. MouseEvent (user does something with the mouse)
  6. SliderEvent (related to the UI Slider component)
  7. TimerEvent (related to Timer class)
  8. VideoEvent (when the user plays a video)

Interfaces:

• 1. IVPEvent (related to the FLV component)

When Flash executes

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 contain both simple display objects and other display object containers.
• (Simple) display objects

Read for example Introduction to the Display List (Yahoo developper network) or Creating, Deleting and Accessing Display Objects at Runtime in Flash CS3 if you want to learn how to code adding and removing display objects.

Stage and Timeline

• http://www.kirupa.com/forum/showthread.php?p=2129548#post2129548:

“To summarize: one stage, one root per SWF (which is the main timeline) and that root is an instance of a document class or the MainTimeline class if a document class isn't provided”

Action Script entries in this wiki

Action Script tutorials

(1) In this wiki we teach some Action Script to Flash designers, e.g.:

• Flash button tutorial
• ActionScript 3 event handling tutorial.
• ActionScript 3 interactive objects tutorial
• Flash embedded movie clip tutorial

See the Flash tutorials entry for a full list.

(2) Then we also have "pure" Action Script tutorials for people who wish to learn how to program.

• The entry point is Actionscript 3 As of november 2007 there is a complete list of novice tutorials. Other levels are under constuction. Start with:
  • Adobe Flex (includes how to install the Flex SDK)
  • AS3 Compiling a program
  • AS3 Tutorials Novice

• All the Actionscript related articles are tagged with Actionscript 3. Alternatively, see Tutorials

Useful Links pages in this wiki

• Flash and AS3 links - general Links to Flash/AS3 websites, propaganda and such...
• Flash and AS3 links - tutorials Links to (hopefully) good tutorials on other web sites.
• Flash and AS3 links - documentation (Flash and AS3 Books, Reference Manuals and Cheatsheets)
• Flash and AS3 links - toolkits (AS 3 Toolkits, Libraries, Flash reusable components, AS 3 reusable code, etc.)

Links

Most links are in specialized links pages (see just above)

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.