ActionScript 3 interactive objects tutorial (CS3)
Overview
This is part of the flash tutorials. So far it is not very complete (!!), but you may learn something from it.
- 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 beyond 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:
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):
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 library. 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();
}
For a tutorial on dragging, see Flash drag and drop tutorial.
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.*]
Dealing with keypress events
Flash let's you intercept key presses in the same way as you can intercept and deal with mouse clicks. There are some subtle differences though.
Simple moving an object with arrow key example
The goal is to implement some code that let's you move around an object with the left/right/up/down arrow keys.
The basic event handling code is very much the same as for buttons:
instance_of_symbol.addEventListener(KeyboardEvent.KEY_DOWN, key_even_handler);
function key_event_handler(event:KeyboardEvent):void {
move_it .....
}
The following example is based on the assumption that somewhere on the stage you have a sprite, e.g. a movie clip or a component button that is called missile and that you want to be able to move around with around with keys.
You need to implement the following things
- A event listener registration like we just explained.
- Tell the stage to focus on the missile
stage.focus = missile;
- The event handler function has to decide what to do with which key.
Let's look at a clause of the switch statement like the following one.
case Keyboard.LEFT : missile.x -= big_step; break;
This means. If the user presses the left arrow key, then we will change the "x" (horizontal) position of the missile to x minus big_step (set to 9). So if the missile was in position x=100, after a mouse press event it will be in position x=91.
// how many pixels to move left/right
var big_step = 9;
// Put initial focus on missile
// Focus will change when user clicks on another object (so don't)
stage.focus = missile;
missile.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
function missile_control(event:KeyboardEvent):void {
var key = event.keyCode;
switch (key) {
case Keyboard.LEFT :
missile.x -= big_step;
break;
case Keyboard.RIGHT :
missile.x += big_step;
break;
case Keyboard.UP :
missile.y -= big_step;
break;
case Keyboard.DOWN :
missile.y += big_step;
break;
}
}
Here is an alternative take of the same code. The difference is that the code that will move the missile also will work for an other object, e.g. a button. The following fragment will ask from the event on which target (e.g. the missile) it was used and then move the target.
// how many pixels to move left/right
var big_step = 9; // User clicked on missile
// Put initial focus on missile
// Focus will change when user clicks on another object (so don't)
stage.focus = missile;
missile.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
function missile_control(event:KeyboardEvent):void {
var key = event.keyCode;
var target = event.target;
// trace(event + "CODE=" + event.keyCode);
switch (key) {
case Keyboard.LEFT :
target.x -= big_step;
break;
case Keyboard.RIGHT :
target.x += big_step;
break;
case Keyboard.UP :
target.y -= big_step;
break;
case Keyboard.DOWN :
target.y += big_step;
break;
}
}
Example code:
- http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-keypress-move-0.html actionscript3-keypress-move-0.*]
Dealing with the tab list problem
Flash has the problem that when you press an arrow up/left/right key it will by default move the focus on the next button. In order to inhibit this I found that I had to add some extra code which is below.
/* ActionScript for timeline scripting
Shows how to move around a flash movie with keypresses and not loose focus
Works ONLY if you have 2 objects on the stage:
* A movie clip instance called "missile"
* A button component instance called "button"
*/
// FocusManager package has to be imported.
import fl.managers.FocusManager;
// how many pixels to move left/right
var big_step = 9;// User clicked on missile
/* If you have buttons in addition to missile on stage, then the
the missile will not work as expected, i.e. it will loose focus.
Extra code needed is: Tell the missile it's a button and put it on the
list of "tab" buttons and also some code to put it in focus when the
user clicks on it.
*/
// Create a focus manager. Will help to set us the right focus
var manager = new FocusManager(this);
// Put initial focus on missile
// since focus will change when user clicks on another object
// stage.focus = missile; // works also in principle
manager.setFocus(missile);
// The line below is absolutely bloody vital. Missile must be on the
// "tab" list, else focus will move to the button when key is hold down
missile.tabEnabled = true;
missile.buttonMode = true;
// The missile will listen to a mouse click we will use to put focus on it again.
missile.addEventListener(MouseEvent.CLICK, change_focus);
function change_focus(ev:MouseEvent) {
manager.setFocus(missile);
// stage.focus = missile;
}
/* Managing keyboard events
We register keyboard events for missile and the button component. The
listener function is the same for both. The move_it function will ask the
target over which key was pressed who it is and then move it
*/
missile.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
button.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
function missile_control(event:KeyboardEvent):void {
move_it(event);
}
function move_it(event) {
var key = event.keyCode;
var target = event.target;
// trace(event + "CODE=" + event.keyCode);
switch (key) {
case Keyboard.LEFT :
target.x -= big_step;
break;
case Keyboard.RIGHT :
target.x += big_step;
break;
case Keyboard.UP :
target.y -= big_step;
break;
case Keyboard.DOWN :
target.y += big_step;
break;
}
}
Example code:
- http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-keypress-move-1.html actionscript3-keypress-move-1.*]
Note: This code is not optimal for gaming, since Flash has to wait for each key press event that the keyboard will send in order to move the missile one more step. It's probably a better idea to have to rocket keep moving as long as there isn't any keyUP event. Moving would be much smoother but then you'd also have to slow it down ...
Properties of the keyDown event
The keyDown event is dispatched when the user presses a key. The most important properties you may use are:
- keyCode (a special code for the key, used above)
- charCode (the character code value)
- ctrlKey, shiftKey (know if either one of these has been pressed too)
- target (the target in focus over which a key has been pressed, used above).
- currentTarget (object that is processing the key event)
KeyCodes are represented as numbers or constants. I prefer to use constants.
- See the Keyboard class documentation at Adobe.
So instead of using something like:
if (key == 37) ...
use
if (key === Keyboard.LEFT) ....
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).