Macromedia Flash MX

A Brief Tutorial for Programming Usable Interfaces Andrew Ko

Versions
Macromedia Flash MX Not Flash MX 2004 (the newer
version)

No site license PC version: Wean clusters, Cyert Hall Mac version: Hunt Library, Cyert Hall
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Not any older version

A Beginners Book
Foundation Macromedia Flash MX Kris Besley Comes highly recommended on Amazon ~$10 paperback on Amazon and
Half.com

Not a reference, but a very detailed

introduction for people unfamiliar with Flash
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

VB.NET vs. Flash MX

VB is great for form-based applications Flash is great for time-based
applications

Both VB and Flash are event-based.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Drawing

What is Flash?
Timeline Stage Vector Graphics

Palettes

ActionScript

And lots and lots of terminology...

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

 Contains the objects, Where drawings are

The Stage

images, drawings, buttons, etc. created, modified, deleted, etc.

Things can go outside the

stage, but they are clipped when the movie is played.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

 Modify the stage size, background color,

frames per second, ruler units, etc. by going to:

The Stage

Modify Document...

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Vector Graphics
All shapes in Flash are made out of points, lines, and curves. Even this one:

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Vector Graphics Because shapes are made out of points,

Flash

All shapes have an outline and fill color, a line

pattern, and a stroke thickness

Snaps objects edges together Snaps objects points to each other

These can be changed in the property

window
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Freeform Lines and Shapes

Pencil
Your freeform stroke is turned into a modifiable shape.

Options that allow you to straighten, smooth, or ink (no modification)

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Lines, Ovals, and Line Rectangles

Ovals and rectangles

Options
For rectangles, the radius of the corner

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Paths of Lines and Curves

Pen

Click once to make a straight line in the path. Click and drag to make a curve. Click on a previously made point to close the shape.

Pay close attention to the changes in the cursor with this tool.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Brush Strokes
Brush

Like brushes in other applications, has a radius and shape. The options also allow for filling behind, selection, inside...
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Erasing Parts of Shapes

Eraser

Like erasers in other applications, has a radius and shape. The options also allow for erasing fills, lines, and other things.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

The Timeline
A view of all of the frames and layers in
your movie

Of course, most Flash-based media is

interactive, so its not exactly a movie.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Frames

Frame 1 is currently selected This is a frame

This movie shows 12 frames per second

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Frames

Use the insert menu to insert and remove

frames.

Well insert 11 frames

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Frames

The hollow white The black dot The grey frames 2-12 have rectangle means means that frame the same content as the that it is the end of 1 is a keyframe frame 1, the keyframe the span of frames. A keyframes defines the content of all frames following it, up until the next keyframe.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Frames
Frame 1, a keyframe, has a black oval on the stage. All of the grey frames following it have the same black oval as frame 1. The last frame that with the black oval is frame 12, represented by the white rectangle. This movie will show this black oval for 12 frames (1 second) and then loop. Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Frames
If we want to change what the 13th frame displays, we insert a keyframe Inserting actually just changes the selected frame to a keyframe.

This copies the previous keyframes contents.

We can then change the contents of the new keyframe.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Frames
Now, the first 12 frames have a black oval. The 13th frame has a red oval of the same size.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Layers
Just like Illustrator and other
applications, Flash supports layers of content.

The layers are part of the timeline. Layers can be locked, hidden, and organized
in folders.

Layers determine the order in which content

is displayed for each frame.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Layers
Here Ive renamed Layer 1 to Nose and added a layer called Face

Then I drew a brown rectangle on the Face layer.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Layers
Then I added an Eyes layer, and drew the eyes and mouth.

Then I drew a the eyes and the mouth

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Symbols
Symbols are tricky. Symbols can also be thought of as a class. A single Button class many Button
instances

Symbols = Separate Timeline + Stage +

Layers

So they can also be thought of as movies

inside of movies.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

 Graphic Operate in sync with the main movies

timeline. Used for images or reusable animations.

Types of Symbols

Movie Clip Movie inside a movie.

On their own time, not necessarily in sync with the main timeline.

Good for interactive things and sounds.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Types of Symbols
Buttons Special kind of Movie Clip symbol that
responds to clicks, rollovers and other actions.

You define the graphics for each of the

various button states, and then assign particular actions to an instance of a button.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Making a Symbol
You can make a new, blank symbol by going to InsertInsert Symbol... Here, we have selected the eye (by locking the nose and face layers and dragging a box around the eye), so the menu says Convert to Symbol instead.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

The Library
Now, the eye appears in the Library as a new symbol. The library contains all of this Flash documents symbols.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

An Instance of a Symbol
Now, the left eye is an instance of the AnimatedEye symbol After erasing the right eye, we can drag a new instance of the AnimatedEye symbol from the library for the right eye. Now we have two instances of the animated eye symbol, each with their own positions, but sharing the symbols timeline, layers, etc.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Naming Instances
Its important to name an instance if you want to refer to it in code. We name the left eye leftEye by selecting the left eye and changing the instance name in the property window.
We do the same for the right eye.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Editing a Symbol
To edit a symbol, doubleclick on the symbol in the library (either the name or image).

Notice that the timeline, layers, and stage are now specific to the AnimatedEye symbol.
Our view is now inside the main scene. You can return to it by clicking here.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Editing a Symbol
Lets make the eyes blink every 1/12th of a second. If we right-click on the 12th frame in the eyes timeline and select insert frame, it inserts frames in between. Then we make a keyframe, and change the eye so that it is blinking.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

 Lets make the eyes look at the mouse

using ActionScript, the Flash scripting language.

ActionScript

ActionScript is event-based, like VB.NET,

and has two main types of events:

Button events (pressed, released,

rollOver...)

MovieClip events (load, enterFrame,

mouseMove...)
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Each has its own syntax.

ActionScript
ActionScript code is associated with
frames, Movie Clips, and Buttons.

Just before a frame is displayed, its

code is executed.

The frames following a keyframe share

the same code as the keyframe. The keyframes code is executed just before it is displayed.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

The Action Window

There are two editing modes
In expert mode, you type, and can use the Intellisense like pop-up to see the available methods. In normal mode, you drag and drop Actions from the area in the left.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

The Action Window

The code shown in the Actions window depends on the current selection in the Flash environment. Individual frames can have ActionScript. This is represented by the a in the frame. All frames that follow a keyframe share the same ActionScript code. To help you find your code, make a layer in the timeline that is reserved for code only. Then you only have to search in that one layer.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

The Action Window

The code shown in the Actions window depends on the current selection in the Flash environment. Movie clips can also have code, but it can only be movie clip event handlers. Notice that the movie clips code appears when the movie clip is selected.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Following the Mouse

To make the eyes follow the mouse cursor, we will put event handling code in each eye. The Actions window for the left eye instance doesnt have any code yet.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Following the Mouse

This event handler will be called when the mouse moves.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Following the Mouse

_x and _y refer to the x and y position of the left eye, based These two on the main lines define stages two variables _root._xmouse refers to coordinate xDelta and the current x position of the system. mouse, based on the main yDelta. stages coordinate system.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Following the Mouse

This defines degrees.

atan2() takes the x and y deltas and returns the degrees in radians.

This math converts the radians to degrees.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Following the Mouse

This sets the rotation of the left eye to the value of degrees.

This -5 corrects for my sloppy drawing.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Well edit the symbol by double-clicking on it in the library...

Go to the blink frame of the eye animation...

Open the Action window for the frame... ...and set the rotation of the eye to 0 for that frame.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Create a blinking variable thats true when Rudolph is blinking....

Then remember the old rotation so we can restore it after blinking.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

In the first frame, well restore the old rotation value.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Then, well avoid rotating the eye if its in the middle of blinking.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Finally, well copy the code from the left eye to the right eye.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Buttons
Buttons are a
special type of Symbol, which have frames for each of their states.

Lets make

Rudolphs nose a button by converting it to a symbol.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Buttons
A Button has four frames, each defining its appearance and behavior in different states. Up is when the button is not pressed, or released.
Over is when the button is hovered over. Down is when the button is pressed. Hit defines the clickable area of the button.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Up
The noses up frame will be just as it is.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Over
To make the noses over frame, insert a keyframe. Ive filled the nose with brown. If we dont make a keyframe, this changes the up frame to brown as well.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Down
To make the noses down frame, insert a keyframe.

Ive filled the nose with red.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Hit
By default, the clickable area is defined by the oval on the screen.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Button Events
To make an event for the button, select the NoseButton instance on the stage, and open the Actions window. Use on(event) to respond to press, release, rollOver, etc.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Button Events
When pressed, the eyes will goto frame 12 (the blinking frame) and stop playing.

When the nose button is released, the eyes will go to frame 1 and start playing.
Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Button Events

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Button Events
Well remove the keyframe with the red nose, so the nose button is clickable for the whole movie.

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript

Button Events

Intro The Stage Vector Graphics Timelines Layers Symbols ActionScript