1. Macromedia Flash MX
A Brief Tutorial for
“Programming Usable Interfaces”
Andrew Ko
2. Versions
• Macromedia Flash MX
• Not Flash MX 2004 (the newer version)
• Not any older 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 • Buttons
3. A Beginner’s 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 • Buttons
4. 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 • Buttons
6. Drawing What is Flash?Palettes
Timeline
Stage
Vector Graphics
ActionScript
And lots and lots of
terminology...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
7. The Stage
• Contains the objects, images,
drawings, buttons, etc.
• Where drawings are 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 • Buttons
8. The Stage
• Modify the stage size, background color, frames
per second, ruler units, etc. by going to:
• Modify ➔ Document...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
9. 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 • Buttons
10. Vector Graphics
• Because shapes are made out of points, Flash
• Snaps objects’ edges together
• Snaps objects’ points to each other
• All shapes have an outline and fill color, a line
pattern, and a stroke thickness
• These can be changed in the property window
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
11. 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 • Buttons
12. Lines, Ovals, and Rectangles
Line
Ovals and rectangles
Options
For rectangles, the
“radius” of the corner
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
13. Paths of Lines and Curves
Pen
Click once to make a
straight line in the path.
Click and drag to make a
curve.
Pay close attention to
Click on a previously made the changes in the
point to close the shape. cursor with this tool.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
14. 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 • Buttons
15. 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 • Buttons
16. 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 • Buttons
17. Frames
Frame 1 is
currently selected This movie shows 12
This is a frame frames per second
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
18. Frames
• Use the insert menu to insert and remove frames.
• We’ll insert 11 frames
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
19. Frames
The hollow white
The black dot The grey frames 2-12 have the rectangle means
means that frame 1 same content as the frame 1, that it is the end of
is a keyframe 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 • Buttons
20. 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 • Buttons
22. 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
keyframe’s contents.
We can then change the
contents of the new
keyframe.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
23. Frames
Now, the first 12 frames The 13th frame has a red
have a black oval. oval of the same size.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
25. 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 • Buttons
26. Layers
Here I’ve 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 • Buttons
27. 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 • Buttons
29. 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 • Buttons
30. Types of
Symbols
• Graphic
• Operate in sync with the main movie’s timeline.
Used for images or reusable animations.
• 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 • Buttons
31. 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 • Buttons
32. Making a Symbol
You can make a new,
blank symbol by going
to Insert→ Insert
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 • Buttons
33. The Library
Now, the eye appears in
the Library as a new
symbol.
The library contains all
of this Flash document’s
symbols.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
34. An Instance of a Symbol
Now, the left eye is an instance After erasing the right eye, we
of the AnimatedEye symbol 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 symbol’s timeline,
layers, etc.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
35. 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 • Buttons
36. Editing a Symbol
To edit a symbol, double-click
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 • Buttons
37. Editing a Symbol
Let’s make the eyes blink Then we make a keyframe, and
every 1/12th of a second. change the eye so that it is
blinking.
If we right-click on the 12th
frame in the eye’s timeline and
select insert frame, it inserts
frames in between.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
39. ActionScript
• Let’s make the eyes look at the mouse using
ActionScript, the Flash scripting language.
• ActionScript is event-based, like VB.NET, and
has two main types of events:
• Button events (pressed, released, rollOver...)
• MovieClip events (load, enterFrame,
mouseMove...)
• Each has its own syntax.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
40. 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 keyframe’s
code is executed just before it is displayed.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
41. 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 • Buttons
42. 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 • Buttons
43. 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 clip’s
code appears when the movie
clip is selected.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
44. 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 doesn’t have any
code yet.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
45. Following the Mouse
This event handler will be called
when the mouse moves.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
46. Following the Mouse
_x and _y refer
to the x and y
position of the
left eye, based on
These two lines the main stage’s
define two coordinate
variables _root._xmouse refers to system.
xDelta and the current x position of the
yDelta. mouse, based on the main
stage’s coordinate system.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
47. Following the Mouse
This defines atan2()
degrees. takes the x
and y deltas This math
and returns converts the
the degrees radians to
in radians. degrees.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
48. Following the Mouse
This sets the
This -5 corrects
rotation of the
for my sloppy
left eye to the
drawing.
value of degrees.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
50. We’ll 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 • Buttons
52. Create a “blinking”
variable that’s 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 • Buttons
53. In the first frame, we’ll
restore the old rotation
value.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
54. Then, we’ll avoid
rotating the eye if its
in the middle of
blinking.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
55. Finally, we’ll copy the
code from the left eye
to the right eye.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
57. Buttons
• Buttons are a special
type of Symbol, which
have frames for each
of their states.
• Let’s make Rudolph’s
nose a button by
converting it to a
symbol.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
58. 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 • Buttons
59. Up
The nose’s up frame will
be just as it is.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
60. Over
To make the nose’s over
frame, insert a keyframe.
I’ve filled the nose with
brown.
If we don’t make a
keyframe, this changes
the up frame to brown
as well.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
61. Down
To make the nose’s
down frame, insert a
keyframe.
I’ve filled the nose with
red.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
62. Hit
By default, the clickable
area is defined by the oval
on the screen.
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
63. 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 • Buttons
64. 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 • Buttons
66. Button Events
We’ll 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 • Buttons
I know people are still working with VB, but today we’re going to switch gears and start talking about Flash. How many consider themselves intermediate or greater with Flash? Everybody that didn’t raise their hand, turn and look at whose hands are raised. These are the people to talk to if you need help and we aren’t available. Feel free to ask questions during the talk, and I’ll do my best to answer them.
The Mac version on campus seems to be having some problems, but its being worked on. Both platforms are basically the same, and you should be able to use the same files on both platforms.
In other words, Flash is a bit more complex than VB, and as a result, a bit more difficult to learn
Show Flash!
We’ll go through each of these pieces, and their related terminology one at a time.
When you draw something, Flash tries turns it into a big shape made out of lots of points and curves
Even though we call them Flash movies, they aren’t really movies, since they’re interactive. We’ll ignore LAYERS and focus on FRAMES
In Flash, every “Movie” is made up by simply moving through a series of frames. This creates the illusion of motion. In this image, Frame 1 is currently selected on the Timeline. The 12.0 FPS means that each Frame on this timeline is displayed for 1/12th of a second, before displaying the next frame. Buttons might start animating a series of frames or go to a new sequence of frames.
- You can insert 11 manually - You can right click the 12th frame and select insert frames. This fills in 11 frames - You can drag the first frame to the 12th to make the frames, but you can’t undo it.
The Black Dot is a KEYFRAME A KEYFRAME defines the content If its a white dot, it means its an empty keyframe. Let’s look at an example.
All Flash movies loop by default. So let’s take a look at this movie.
Let’s look at an EXAMPLE
Who HASN’T heard of layers?
If you stop the main timeline, you stop the Graphic symbols on the timeline. If you stop the main timeline, the Movie Clips keep on going.
Notice that when we changed the symbol, both eyes changed.
Notice that the flash blinks 1 frame out of sync with the eyes, because there are 13 frames on the main timeline, but 12 frames on the eye symbol’s timeline.
Explain last point.
This is VERY important
You don’t have to declare variables.
(5) Left Eye Follows Notice that the left eye blinks crooked when the eye is rotated. Anybody have any ideas on how to fix this?
WE’RE MAKING A BIG ASSUMPTION! We’re assuming that this frame’s code will be executed after any mouse events are handled. If this isn’t true, then the eye will be rotated when it blinks
(6) Blink Corrected So that sort of worked, but aftif the mouse is moving while Rudolph is blinking, it still rotates. That’s because the eye is blinking before the mouse move event is being handled. So the Any solutions?
Notice, you can access variables declared in other frames.
You can even access variables declared in other movie clips.
To finish this, we’ll copy the code for the left eye to the right eye. Could we have made a symbol that just shared this code? No. The code that you put on a movie clip, like these eyes, is for that particular movie clip. In fact, if we selected the left eye and tried to convert it into a new symbol, it would erase the code in the left eye without even telling us.
(7) Fully corrected eyes
(8) Nose Button But we can’t click on the nose sometimes. Does anybody know why? Because the red nose in the 13th frame is NOT an instance of a symbol. We only converted the black nose to a symbol. The red nose in the 13th frame doesn’t have the code that the first 12 frames have for handling our button clicks.