ActionScript 3 interactive objects tutorial (CS3)
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:
Manipulating movie clips
Movie clips are Flash animations. In a fla file you can have several kinds of movie clips:
- Movie symbols (and instances)
- Movie clips (and instances) that were imported as *.swf files
- Compiled movie clips imported through the *.swc format
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):
You can later change this reference point by moving the drawing in symbol edit mode.
Editing
- 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 image dozens of other simple examples.
File with a few cats is here:
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();
}
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).