ActionScript 3 interactive objects tutorial (CS3)

The educational technology and digital learning wiki
Jump to navigation Jump to search

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.

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.

Below we show a few little examples that show how to manipulate objects with mouse events (see the ActionScript 3 event handling tutorial). You could image dozens of other simple examples.

File with a few cats is here:

To reproduce these examples, you need movie clip instances. 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. Note: If you hold down, then move the mouse out (still holding down), then release, the mouse will stay big since it never will catch the mouse up event. 

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 click on it. Technical note: It is still there, but the can't click on it. 

white_cat.addEventListener(MouseEvent.CLICK, hideCat);

function hideCat(event:MouseEvent):void {
  // white_cat.visible = false;
  // should add a mouse to toggle it back.
  white_cat.visible = !white_cat.visible;
}

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).
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=ActionScript_3_interactive_objects_tutorial_(CS3)&oldid=14814"