Introduction to Macromedia Flash

Introduction to Macromedia Flash
A Workshop for San Diego State University Faculty and Staff
© 2000. San Diego State University. All Rights Reserved
Sponsored by Academic Affairs

---

Where to Find Help When You Need It
Help from your Division/College’s Computer Consultant
Some divisions and colleges have computer consultants assigned to them. You can contact these
consultants when you need help. To determine if you have a consultant assigned to your division or
college, look to: http://rohan.sdsu.edu/~facstaff
Help from the BATS Web Page
BATS (Baseline Access, Training and Support) is a California State University initiative to provide all
students, faculty, and staff with "baseline" access to information resources via networks, training in the uses
of baseline hardware and software systems, and ongoing professional and technical support for utilization
of computer resources at San Diego State University. You can access the BATS Web Page by pointing
your browser to: http://rohan.sdsu.edu/~bats/
Help in the San Diego State University, Faculty Room
The Faculty Room is staffed Monday through Friday with computing consultants who will try to answer
your questions.
Location:
Adams Humanities, 1109
Phone Number:
x45727
Semester Hours:
7:30am – 6:00pm Monday -Thursday
7:30am – 4:30pm Friday
Semester Intersession:
7:30am – 4:30pm Monday – Friday
Help from the Faculty Computing Help Line
Phone Number:
x41348
E-mail:
helpline@mail.sdsu.edu
Semester Hours:
7:30am – 6:00pm Monday – Thursday
7:30am – 4:30pm Friday
Semester Intersession:
7:30am – 4:30pm Monday – Friday
Help from the Staff Computing Help Line
Phone Number:
x40824
E-mail:
staffhelp@sdsu.edu
Semester Hours:
7:30am – 6:00pm Monday – Thursday
7:30am – 4:30pm Friday
Semester Intersession:
7:30am – 4:30pm Monday – Friday

---

Introducing Flash.............................................................................................................................. 1
How to get Flash........................................................................................................................... 1
Scalable Vector Graphics ............................................................................................................. 1
Flash versus Shockwave.............................................................................................................. 2
Lesson 1 ....................................................................................................................................... 2
The Toolbox .............................................................................................................................. 2
The Danger of Segmenting....................................................................................................... 3
Grids and Snapping .................................................................................................................. 3
Nested Groups .......................................................................................................................... 5
Freehand Transformations........................................................................................................ 7
Changing the Gradient Position in Objects............................................................................... 8
Importing Photography.............................................................................................................. 9
Importing Vector Artwork ........................................................................................................ 10
Mask Layers............................................................................................................................ 11
Animating with Flash ...................................................................................................................... 12
Lesson 2 ..................................................................................................................................... 12
Keyframes ............................................................................................................................... 13
Shape Tweening ..................................................................................................................... 14
Shape Hints............................................................................................................................. 15
Motion Tweening..................................................................................................................... 15
Motion Guides ......................................................................................................................... 16
Frame-By-Frame Animation.................................................................................................... 16
Using Symbols, Instances, and Sounds ........................................................................................ 17
Lesson 3 ..................................................................................................................................... 17
Kinds of Symbols .................................................................................................................... 17
The Graphic Symbol............................................................................................................ 17
The movie clip Symbol ........................................................................................................ 18
FLA versus .SWF ................................................................................................................ 18
Buttons ................................................................................................................................ 19
Sounds .................................................................................................................................... 20
Custom Libraries ..................................................................................................................... 21
Using ActionScripts ........................................................................................................................ 21
What Are Actions? .................................................................................................................. 21
Assigning a Frame Action ....................................................................................................... 21
Assigning a Button Action: ...................................................................................................... 22

---

Introducing Flash
Flash is a program by Macromedia for creating interactive, animated online content. Animated
simply means "to have movement" -- Flash content does not have to be a cartoon. It is commonly
used to mimic software interface elements such as scroll bars, drop-down menus, buttons, and
navigational systems. The term "Flash" has also come to mean the actual files created using
Macromedia's program of the same name.
Not only is Flash content animated, it is interactive, allowing the user to experience unique results
based on input. This generates creative gaming content such as the "Who Wants to be a
Millionaire" online game at ABC.com.
How to get Flash
If you don't have a copy of the Macromedia Flash software, you can download a 30-day trial
version from http://www.flash.com.
Scalable Vector Graphics
Yet another benefit to Flash content is that much of it is rendered as Scalable Vector Graphics
(SVG). It is much more efficient to download SVG-format file than a GIF or JPEG image. Vectors
are mathematical curves that describe the edges of shapes. Imaging programs like Adobe
Photoshop render artwork with pixels --also known as rasters -- which are fairly memory-
intensive. The advantage of vectors is shown in Figure 1-1.
Figure 1-1: The smaller Saturns are displayed at 100%. The enlarged raster-based .jpg is blurry, and takes more memory to render. The
vector-based .swf file can display at any size without requiring more memory or degrading in quality.
The SVG implementation is only now being standardized by the World Wide Web Consortium.
The Flash format is the de facto standard, due to Macromedia's early trailblazing, but Adobe has
introduced LiveMotion, which saves files in the preliminary SVG format adopted by the W3C, as
well as in the Flash format. (Assuming the non-proprietary SVG format is adopted by future Web
browsers, Macromedia will no doubt add that capability to Flash.)
1

---

Flash versus Shockwave
Flash is Macromedia's program for creating animated movies specifically for online presentation.
Shockwave is a format for saving Macromedia Director files for online presentation (Director is a
more robust program for creating movies; it has a higher degree of interactivity, plus video --
something Flash can't include. It is the standard for authoring CD-ROM presentations).
Both Director and Flash save movies in the Shockwave/Flash (.swf) format for online playback.
Users must have the browser plug-in present in order to view this format. Unlike Director -- which
is quite complex and utilizes Lingo, a proprietary programming language -- Flash was built
specifically for online authoring, and despite many interface similarities, is much simpler. It does
utilize ActionScripts, a basic set of program commands that is much easier to learn than Lingo or
JavaScript.
Lesson 1
The Toolbox
The basic drawing tools in Flash are the Line, Oval, Rectangle, Pencil,
Brush, and Eraser tools. When a tool is selected, the lower half of the
Toolbox displays modifiers unique to that tool. In your copy of Flash,
move your cursor over the image of the toolbox to view the various
modifiers. In the case of the Oval and Rectangle tools, the modifiers are
the stroke color, stroke weight, stroke style, and fill color. It's best to get in
the habit of setting these modifiers before using the tool, as editing color
takes a few more steps.
To draw a flying saucer like the one below, select the Oval tool and
change the default red fill to a medium gray. Click on the Fill modifier and
drag into the color palette that pops up (Figure 1-3).
Flying saucer
Figure 1-2:The Flash Toolbox.
2

---

This palette contains the 216 Web colors (colors that won't
dither in Mac OS or Windows). Once you have set the stroke
and fill, draw an oval on the page.
The Danger of Segmenting
Anything you draw in Flash automatically segments itself.
That means the oval you drew is actually two objects: the
gray fill and the black stroke. If you tried to pick up the shape
and move it, you probably moved one or the other
(fortunately, Flash has unlimited undos). To select the entire
shape, either marquee it with the Lasso or Arrow tool, or
double-click the fill with the Arrow tool. Flash indicates a filled
object is selected by displaying a checkerboard pattern on it.
A selected stroke displays a crosshatch pattern (Figure 1-4).
Figure 1-3:The color palette.
Figure 1-4: Select the fill, stroke, or both.
Deselect by clicking on the Stage (background). Use the line tool to horizontally bisect the ellipse
you drew. You now have seven shapes on the Stage (Figure 1-5).
Figure 1-5: Automatic segmenting (exploded for clarity).
To prevent this segmenting, you can group objects as soon as you draw them, but sometimes
segmenting works to your advantage -- as it will in the next two examples.
Undo the line (choose Undo from the Edit menu, or press Command-Z (Mac) or Control-Z
(Windows) and any repositioning you may have done (select Edit > Undo as many times as it
takes to get back to your original gray ellipse) will be undone.
To add corners to the ends of the ellipse, be sure that it is not selected and position the Arrow
cursor close to one end (do not click). A small curve will appear next to the cursor, indicating that
if you drag, you will reshape the curve. Hold the Option key (Mac) or Alt key (Windows) and drag
the end of the ellipse to add a corner.
Grids and Snapping
By default, the Snap to Grid feature is active, which causes the cursor to move abruptly and at
irregular intervals. This is rarely convenient; disable it by unchecking Snap to Grid from the View
menu. The View menu is also where you can make the grid visible or invisible. To set the color
and spacing of the gridlines, choose Modify > Movie.
3

---

Add a corner to the other end of the ellipse by pressing Option (Mac) or Alt (Windows) and
dragging the opposite side.
To draw the canopy of the saucer, select the Oval tool and set the Fill modifier to a pale blue.
Draw a circle on the page away from the body of the saucer (hold down the Shift key to draw a
perfect circle). If you had let the canopy overlap the saucer, it would have punched out the
underlying part of the saucer. (If this happened, just select Undo from the Edit menu.)
To punch out the bottom of the canopy, rather than the top of the saucer, double-click the fill of
the saucer (which selects it and its stroke) and position it to cover the lower half of the canopy.
Deselect it by clicking on the white Stage.
The bottom of the canopy can be changed to a concave curve by moving the Arrow next to it
(until you see a curve icon next to the cursor) and dragging downward. Notice how the fills of both
the canopy and saucer body adjust to this change. Select the entire canopy by clicking the blue
fill and Shift-clicking the strokes above and below the canopy. Group them by choosing Modify >
Group.
Details can be added to the saucer with the brush tool. To shade it like the example above, select
the Brush tool and set the Fill modifier to a dark gray color. Set the brush mode to Paint Inside
(Figure 1-6).
Figure 1-6: Brush modes and an example of each.
Start with the brush entirely inside the fill of the saucer and paint in the shading along the bottom.
You can let the brush go past the edge of the shape because the Paint Inside modifier prevents
the color from going outside the lines. Change the color to white and the size of the brush to a
small tip. Then paint the highlight on the upper right side of the saucer.
To prevent further segmenting, group the entire flying saucer by selecting Group in the Modify
menu. Grouped objects display a box around them when selected.
You can use segmenting to help you draw a crescent moon:
• With the Oval tool, draw a yellow circle on the Stage, away from the saucer. To draw a
filled shape with no stroke, set the Stroke modifier to None (the topmost square in the
color palette -- it looks white).
• Draw a different-colored circle overlapping the yellow one.
• Use the Arrow tool to select the second circle, and press Delete.
• Select the entire moon shape, and group it to prevent other objects from segmenting it
further.
4

---

Grouping objects prevents them from being segmented by other objects, but also prevents them
from being edited. To change any color in your saucer, you have to "get inside" the group. Do this
by double-clicking the saucer. Notice that the moon now looks very pale. Also notice the Group
icon at the top-left corner of the document window (Figure 1-7).
When you see this icon, it means you are
inside a group and can edit its member objects
(unless they, too, are subgrouped). Dimmed
artwork is outside the group and cannot be
edited or selected. Since the canopy was
grouped before the entire flying saucer was,
you cannot edit it. Double-click the canopy to
get inside that group.
Figure 1-7: The icon for Group editing mode.
Nested Groups
The canopy group is nested inside the flying saucer group (much as you can nest a folder inside
another folder on your computer's hard drive). To paint the highlight on the canopy, double-click
the saucer, to get inside the saucer group, and then double-click the canopy, to get inside the
canopy group. The upper-left corner of the document window displays this nested arrangement
(Figure 1-8).
To get out of groups a level at a time, double-
click the Stage to exit the canopy group, then
double-click again to exit the flying saucer
group. To get out of all groups at once, click on
the words "Scene 1" in the upper-left corner.
Think of groups in Flash as protective plastic
sleeves on CDs. You can double-group or
triple-group objects (just like you can double-
or triple-sleeve valuable CDs for greater
Figure 1-8: The Nested Group icon.
protection):
• Be sure that you are in Scene 1 rather than your saucer, canopy, or moon group (click
the words "Scene 1" at the upper-left corner of the document window).
• Select the moon (it was grouped previously, so it displays a selection rectangle around
it).
• Choose Modify > Group.
• Choose Modify > Group again.
• The moon is now triple-grouped. To change its color, you would have to double-click it
three times before you could edit it. (There is no functional reason for triple-grouping a
single object; but knowing it's possible may help you diagnose problems in the future, as
beginners tend to multiple-group things without realizing it.)
Save your file. You will use your saucer illustration in Lesson 2.
5

---

The Object and Transform Inspectors (Macromedia calls palettes inspectors ) allow you to size
and position elements on the Stage. Both can be found on the Inspectors submenu of the
Window menu.
Figure 1-9: The Object and Transform inspectors.
To precisely position an object on the page, use the Object Inspector to enter the X and Y
coordinates in pixels. You can also precisely size an object. Select the moon you drew and enter
50 for the X coordinate, 60 for the Y coordinate, and 72 for both the width (W) and height (H) on
the Object Inspector (you can use the Tab key to move from field to field in the Inspectors).
To rotate the moon, select it, and open the Transform Inspector (Window > Inspector >
Transform). Enter a rotation of -20° (negative numbers rotate objects counterclockwise).
6

---

Freehand Transformations
When you don't need precision, you can scale and rotate using the modifiers of the Arrow tool.
Select the flying saucer, then click on the Scale modifier in the Toolbox (Figure 1-10).
Drag a corner handle to scale
proportionally, or a side handle to scale
one dimension. To reflect an object, drag
a side handle all the way across the
object.
You can also scale and rotate using the
Modify > Transform submenu.
Duplicating and Aligning
Objects
If you wanted a whole fleet of small flying
saucers, shrink the original and Option
(Alt)-drag it to create a copy. Do this
once more for a total of three saucers.
To align them horizontally, select all
three saucers and choose Modify > Align.
Figure 1-10: The Rotate modifier (circled in blue) and Scale modifier (in red).
The button icons in the Vertical
section of the Align dialog box
allow you to align objects on their
upper edges, on their centers, or
on their lower edges. Similarly, the
Horizontal section gives choices
to align objects on their left edges,
on their centers, or on their right
edges. When aligning objects that
are the same size (like your
saucers), it is unimportant which
button you press in the Vertical
section -- as long as it is not X,
which prevents vertical movement.
If you want your saucers to be
evenly spaced horizontally, in
addition to being vertically aligned,
press any button in the Horizontal
Space Evenly row, and then press
Figure 1-11: The Align dialog box.
OK.
There are a few default gradients at the bottom of the color palette. You can create your own
gradients by selecting the Color window button at the very top of the palette, or by choosing
Window > Colors and selecting the Gradient tab at the top of that palette.
7

---