ActionScript 3 interactive objects tutorial (CS3)

Draft

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")

Overview

Learning goals

Learn about the most important interactive ActionScript 3 objects

Learn some methods and properties you may want to use in your animations.

Prerequisites

Flash CS3 desktop tutorial

Flash drawing tutorial

Flash button tutorial

Flash components tutorial

ActionScript 3 event handling tutorial

Moving on

ActionScript 3 interactive objects tutorial

The Flash article has a list of other tutorials.

Quality

This text should technical people get going and may not be good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...

Level

It aims at Flash design beginners, not beginning ActionScript 3 programmers, although programmers can read this to get a quick overview before digging into a real documentation like Adobe's Flash 9 reference manual

Learning materials

Grab the various *.fla files from here:

http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/

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

Manipulating objects

The principle of (simple) object manipulation is fairly simple: change the property of an object.

To play with this example, you need movie clip objects. Draw an object, right-click->Create Movie Symbol. Select Movie Clip.

Simple repositioning example

When you click on an interactive object (a symbol instance that is called "black_cat") it will move the object to position x= 200 and y=200. Note: Position is defined by the center of the object that depends on how you made it.

black_cat.addEventListener(MouseEvent.CLICK, moveCat);

function moveCat(event:MouseEvent):void {
 black_cat.x = 200;
 black_cat.y = 200;
}

Change size

When you click on an interactive object (a symbol instance that is called "blue_cat") it will double its size when you hold down the mouse button and go back to normal when you release it

blue_cat.addEventListener(MouseEvent.MOUSE_DOWN, resizeCat);

function resizeCat(event:MouseEvent):void {
 blue_cat.width =  blue_cat.width * 2;
 blue_cat.height =  blue_cat.height * 2;
}

blue_cat.addEventListener(MouseEvent.MOUSE_UP, resizeCat2);

function resizeCat2(event:MouseEvent):void {
 blue_cat.width =  blue_cat.width / 2;
 blue_cat.height =  blue_cat.height / 2;
}

Visibility

This will make the white cat invisible when you move the mouse over it. When you move it out, it will show again.

white_cat.addEventListener(MouseEvent.MOUSE_OVER, hideCat);

function hideCat(event:MouseEvent):void {

white_cat.visible = false;

}

white_cat.addEventListener(MouseEvent.MOUSE_OUT, unhideCat);

function unhideCat(event:MouseEvent):void {

white_cat.visible = true;

}

Let the user drag example

This will let you drag the red cat object.

red_cat.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
red_cat.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

function startDragging(event:MouseEvent):void
 {
    red_cat.startDrag();
 }

function stopDragging(event:MouseEvent):void
{
    red_cat.stopDrag();
}

Links

Important manual pages

These are almost impossible to understand for non programmers, but otherwise the documentation at Adobe is excellent.

• InteractiveObject. This InteractiveObject class is the abstract base class for all display objects with which the user can interact, using the mouse and keyboard. Most Events are documented here. (Make sure to list also the inherited events).