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.

The purpose of this tutorial is go a little bit beyound dealing with mouse clicks, buttons and button components as seen in previous tutorials.

Prerequisites

Flash CS3 desktop tutorial

Flash drawing tutorial

Flash button tutorial

Flash components tutorial

Other recommended prior tutorials (not necessary, but can help)

Flash video component tutorial

Flash sound tutorial

Flash drag and drop tutorial

ActionScript 3 event handling tutorial

Moving on

Flash games 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/

Manipulating movie clips

Movie clips are Flash animations. In a fla file you can have several kinds of embedded movie clips behaving in a similar way.

• Movie symbols (and instances)
• Movie clips (and instances) that were imported as *.swf files
• Compiled movie clips imported through the *.swc format

The goal of having such embedded animations is to create animation with "moving/changing" objects. You may have a look at early Flash frame-by-frame animation tutorial, i.e. the little rocket we made and then use in motion animations as explained in the Flash motion tweening tutorial. The new thing is that you should learn how to play/stop and make visible/invisible these clips.

Note: Your whole *.fla also is a movie clip that you could import to other Flash animation.

Creation of an embedded movie clip

To create a new movie clip within a flash animation do the following:

• Menu Insert->New Symbol
• Select Movie Clip and give a good name
• To edit, double click on the icon of this clip in your library.

Alternatively you also can

• Draw an object on the stage
• right-click->Create Movie Symbol. Select Movie Clip

You can edit either by clicking on the item in the library or an instance on the stage. If you click on the instance on the stage you will edit the symbol, but you can see it in its context.

Defining its reference point:

• Each object has a center. You can define it when you create the new movie symbol (see screen capture below):

Create a movie clip symbol - set the registration point to center

You can later change this reference point by moving the drawing in symbol edit mode. The registration point is defined by the little cross (+ sign).

Editing a movie clip

• Double click on the symbol's icon (not it's name) in the libary. You now can edit, e.g. a add a motion animation or change its drawing
• If you double-click on an instance, you can edit the same symbol, but you will see the objects of the stage while you edit.
• Do not forget to go back to the scene at some point ....

Using a movie clip

See also the [[Flash_video_component_tutorial#Working_with_cue_points Flash video component tutorial] for an example.

If there is no instance of the on the stage, drag it there, then give it an instance name !

Let's assume that the instance name is movie_books.

Playing a movie clip

movie_books.play();

Stopping a movie clip

movie_books.stop();

Making it visible or invisible

movie_books.visible=false;
movie_books.visible=true;

Tip: Movie clips start playing as soon as they are found in the current frame. E.g. if you put them in frame one, they will play (forever until the main timeline moves to another frame). If this is not desired, stop the movie as you may recall from other tutorials.

• Edit the movie clip (double click)
• Add a layer called "script"
• Add

stop();

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 imagine dozens of other simple examples.

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 user 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();
}

Example file

File with a few cats is here:

• http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-simple-object-manipulation.html actionscript3-simple-object-manipulation.*]

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

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