Flash Tutorial for Beginners – Lesson 1

wired.com/2010/02/flash_tutorial_for_beginners_-_lesson_1/

pstatz February 15,

2010

Getting Started

Let me guess – you want to add snappy interactivity and animations to your Web pages but
you don’t want to create huge “click here and go get a sandwich” files? Then Adobe’s Flash
may be for you. It doesn’t require the scripting savvy of DHTML and Ajax which makes it
easier for beginners.

The process of making a Flash movie is easy to learn, but mastering it takes time and sweat.
Here, and in Lesson 2, I’ll show you the basics of making one, and then I’ll show you what
you need to learn to become a Flash grandmaster.

The best way to create Flash content is with the Flash application, which was originally called
FutureSplash. In 1997, Macromedia acquired the small company that developed
FutureSplash as a way to complement Director, its flagship product. Director, which has
since gone the way of the Dodo.

Toward the end of 1995, when Netscape Navigator 2 was the latest, greatest browser,
Macromedia introduced Shockwave as a way to port Director movies to the Web. Users
downloaded and installed a free plug-in, and the movies played right there in the browser.

As the web got more complex Director proved unwieldly, but here was still a need to
provide an alternative to standard GIFs and JPEGs, which lack versatility and can result in big
files.

The vector capabilities in Flash proved to be one possible anwer. Vector-graphics programs
create graphics using instructions while bitmap programs map out images pixel by pixel.

Let’s say you want to draw a circle. A vector graphic simply tells a display program to “draw a
perfect circle exactly 100 pixels in diameter.” A bitmap program maps out every pixel in that
circle, which requires more information (and therefore a larger file size) often resulting in a
poorly rendered circle. Also, a vector-based image can be scaled to virtually any size with no
impact on file size or quality.

1/10
Here’s a simulation of the differences between bitmap and vector graphics. The left circle
demonstrates how a bitmap image is defined by a finite set of pixels. Enlarge it, and the
circle looks pretty rough. But if you increase the resolution to lose that “pixely” look, you’ll
run into major file-size issues. Meanwhile, the vector graphic on the right could be enlarged
10 times and still look just as sharp.

Because of bandwidth concerns on the Web, there has long been an urgent need for vector
graphics. SVG is emerging as an official standard, but with Flash, the future is now.

Flash allows you to create animations, build interactivity, and add sound to your pages —
and even fairly complex games. You can make some dazzling graphics and interfaces for
your Web pages that eat up an amazingly petite 5 to 50 KB. And the growth of the
ActionScript programming language offers you the chance to take it much farther, if you
want.

Another big advantage of Flash is that it’s virtually independent of browsers. Since Flash files
are only viewable with a plug-in, everyone with a version 3 browser or better can see the
movies almost identically. The downside to this is the plug-in itself:Users need to download
and install it before they can see anything. But this is becoming less of a hurdle since the
latest browsers come with Flash already included.

So all in all, Flash is looking like quite the solution and is becoming more popular every day.
But enough talk. Let’s get our hands dirty.

==

What you’ll need

To use this tutorial, you’ll need to have the Flash plugin installed. Chances are you already
have it, but if you don’t you can grab the latest version. Also, you need a copy of the Flash
application if you want to do the exercises.

If you can’t fork out the bucks for Flash right now, don’t fret. You can download a 30-day trial
version from Adobe, which also includes the current plug-in for your browser. The site also
offers a pretty good deal on upgrades from previous versions of Flash. They offer a really
great deal if you also want to purchase Freehand.

After you’ve installed everything, bookmark this page, restart your browser, stretch your
fingers, and come on back.

OK. Everyone here? Let’s get started.

2/10
The Flash Tools
Flash is both a drawing tool and a movie editor. If you’ve used other graphics applications,
some of the tools may look familiar, but some won’t. To keep things simple, let’s start with a
little introduction to the interface before diving right in to the nuts and bolts.

At this point, you should have Flash running. Create a new file by selecting New from the File
menu bar. Now select Document from the Modify menu. This allows you to define some
general attributes for your movie, like window size, background color and frame rate. Set
the width to 550 pixels and the height to 400 pixels.

If you’ve installed the latest Flash plug-in, you should see something when you roll your
mouse over the image below.

Go ahead and click around:I know you want to.

The Toolbar panel on the left side of the window probably looks similar to those of other
graphics programs you’ve used, and it serves a like-minded purpose:to help you create and
edit your images. The various icons allow you to draw, paint, shape, edit, fill and color your
graphics. You’ll find that these tools useful for creating new images and they’re
indispensable for modifying existing elements. There is an assortment of other Panels that
offer more specialized functions from picking a color or typeface to creating complex scripts.

The blank rectangle filling the bottom portion of the screen is called the Stage. This is where
you draw graphics and preview the movie as you build it. At the bottom of the Stage is is a
Panel with some different tabs for controlling items you’ve drawn or placed on the Stage.

See the area above the Stage that has a ruler, like a strip and a field labeled Layer 1? This is
the Timeline, where it all comes together. Similar to a storyboard, the Timeline acts as a
map to the Flash movie. It represents the various elements that appear over time, together
or separately. Use the Timeline to combine images, make the animations happen, and
define interactivity. If you need to spread out, you can detach the Timeline by clicking and
dragging it outside of the document window. You can also enlarge or compress it using a
pop-up menu in the upper right hand corner.

The red vertical slider indicates the frame that you’re currently working with on the Stage.
You can add elements to your Flash movie by creating new layers in the left column. You
can also extend the duration of the movie by adding frames to the right end of the Timeline.
At any time, you can add frames or layers to the Timeline, move them, or change their
attributes. Throughout these tutorials, you’ll be adding Keyframes to the timeline, which
control transitions and events in the movie.

3/10
Flash also has the standard pulldown menus that you’ll find in almost every program. Many
of the functions you’ll find here are simply other ways of carrying out actions that the panels
perform. Like other Adobe applications, Flash allows you to customize the shortcuts for
most menu items. Just go to Keyboard Shortcuts under the Edit menu (Mac
Flash>>Keyboard Shortcuts…). It comes with sets of shortcuts that mimic other popular
programs like Dreamweaver and Photoshop. Before you have the shortcuts down, you may
want to set these.

Flash also uses contextual menus almost everywhere. Just right-click (control-click on a Mac)
in different places. And if you let the cursor hover over something you aren’t sure about, a
brief label usually pops up.

OK. Now that you’re more familiar with the tools, let’s use them.

Drawing and Modifying an Image

Let’s start drawing something simple with Flash.

Now select the Pencil tool. (Note:All the tools are identified by icons. If you’re ever puzzled
by a particular icon, place your cursor over the tool in question for a second and a tool tip
will pop up and identify it for you.) In the bottom half of the Toolbar palette, you’ll find some
graphic buttons. These are the tool modifiers. They are contextual, so they change according
to what tool you’ve selected from above. The very last button affects the shapes you draw
with the pencil, and the others are for color, line size, and line quality.

With the pencil tool still selected, click that last button and select the Straighten option. If
you are capable of drawing a perfectly straight line, you can skip this tool – and you might
consider alerting Guinness. The rest of us will need this modifier to help in the drawing of
three connecting lines to form a triangle. Pretty good, eh?

If you’re accustomed to using a program like Illustrator or Freehand, you may be familiar to
the pen tool, an alternate way of drawing shapes in Flash.

4/10
There are two arrow tools. They are used to select objects and modify them. The hollow
arrow (Subselection tool) is for selecting or modifying points on an object. Once you have
selected a shape with an arrow tool, you can straighten or smooth it by clicking on one of
the icons under Options on the tool panel. Or you can choose Optimize… under the Modify
menu. You can access these arrow tools even if another tool is selected by clicking with the
command key (on Macintosh) or control key (on Windows).

Next, select this Paint Bucket icon. Pick your favorite color from the tool modifier below and
click anywhere inside the triangle. See the pretty, colorful triangle? If your triangle won’t fill,
it’s possible that there’s a gap at one corner. No problem — just select “Close Large Gaps”
under the Options section on the tool panel.

Double-click on one of the segments. You’ve now selected the entire outline of the triangle.
Hit the Delete key, and the outline will disappear, leaving you with a pure, triangular shape.

Try clicking your mouse on any edge of the triangle and then dragging it. This allows you to
reshape the object. Select the Paintbrush tool and, using the same color as the triangle,
paint along the triangle. Select the triangle with the arrow tool. You’ll notice that now
everything has merged into one image. Choose the eraser and try the same thing. If you
don’t want to merge the paintbrush stroke with the triangle, you should create a new layer
first. But again, we’ll cover this in a bit.

Select Edit and Undo a few times to revert to the original triangle shape. Remember, the
number of undos available is defined under Preferences.

Wait! Are you sure that’s really your favorite color? Changing colors is no problem. With the
triangle selected, go to the Swatches panel and select a different fill color or gradient. You
can also just “pour” another color into it with the Paintbucket tool.

Now save your movie. Next, we’ll make that triangle move around.

Making the Moves with Symbols

Look at the Timeline for your movie. Double-click on the field labeled Layer 1 and rename it
Triangle. To give the triangle space to move, click on it and drag the entire shape to the left
side of the Stage.

Note:If you want to rewind a Flash Shockwave movie like this one, Control-click (on a Mac) or
right-click (if you’re using Windows) to reveal a popup Control menu.

5/10
Click on frame 20 to select it, and then choose Frame from the Insert menu. You’ll notice
some faint hash marks designating the frames you created. The background of these
frames is gray to indicate that there is something on the stage for that range of frames, the
triangle you created. Delete the triangle and see how the timeline changes. Now select
command-Z (control-Z on Windows) to undo your delete and bring back the triangle.

The Frame Indicator can now move within those 20 frames, but nothing changes in the
Stage area because all the frames except the first are blank. In Flash, a blank frame inherits
whatever is defined in the Keyframe before it, and you can create as many blank frames as
you like without affecting the file size of the movie.

Select the sixth frame. Choose Insert>> Timeline>> Keyframe. The Stage area should remain
the same, but now another division appears in the Timeline with another solid dot. Hit Enter
on your keyboard to play the movie. Since both Keyframes are the same, nothing really
happens, aside from the slider moving across the Timeline. To make something happen,
click on the second Keyframe and then drag the triangle to a different location. Hit the Enter
key again. What you see is animation:the triangle jumps from one location to another. It’s
nothing very smooth or award winning, but it’s animation nonetheless.

Timeline with two Keyframes and Tweening

Let’s make the animation better. To do this, you must make a symbol.

Symbols are an important concept in Flash. Not only do they make every Flash animation
(except shape morphing) work, they keep Flash movies small.

Let’s say we want to use triangles throughout our movie. We could duplicate the original
triangle a bunch of times, or we could transform the triangle into one – and only one –
simple symbol. You can then resize it, distort it, change its color or transparency, and place
instances of that symbol wherever you like as many times as you like. But the original
symbol will still take up only one spot in the Library, and less memory is consumed. For an
extensive look at the advantages of using symbols to create smaller files, check out
Marlow’s Optimizing Flash tutorial.

All symbols are stored in the Library. Choose Window and then Library to access the Library
for this movie. Right now it’s blank. Click on the first frame in the Timeline and then select
the triangle you drew. Choose Modify, then Convert to Symbol. As advertised, this
maneuver will convert the triangle shape into a symbol. When the dialog box pops up, name
the new symbol Triangle and select Graphic as its Behavior. You can now see it in the
Library palette, which means you can place it into your movie wherever you like.

6/10
Applying tweening in the Frame panel

Click on the sixth frame or the second Keyframe. The presymbol triangle should still be
sitting there. Delete it, then select the triangle on the Library palette. Drag the preview of
the symbol into the Stage area to a location close to the object you just deleted. Now select
any frame between the two Keyframes and right-click. From the pulldown menu select
Create Motion Tween. Now you’ll notice an arrow in the Timeline that indicates the
tweening. You’ll also notice that the bottom panel changes to give you number of options
for you tween. Leave everything at its default setting for now.

Back in the day, I had a friend who worked in an animation studio, and her title was in-
beTween artist. Her supervisor would give her two drawings, or keyframes, and she would
draw a designated number of frames “be-Tween” the keyframes to complete the transition.
With Flash, you have your own in-beTween artist.

Hit the Enter key and marvel at the improvements to your animation. And it’s only going to
get better.

As top-notch designers, we all know there’s more to life than Flash. Fortunately, you can also
import images from other vector-based programs, such as Adobe Illustrator. Just select
Import under the File menu. Flash also supports many familiar bitmap formats in addition
to the old standbys GIF and JPEG.

If you need to import a bitmap image into Flash, use the File/Import menu command or just
copy the image from the source file (such as a document opened in Photoshop) and paste it
onto the Stage area. You can change the image properties of a bitmap image to compress it
as a GIF, PNG or JPEG using Properties menu on the Library palette (look for the “i” icon).

Layering and Other Neat Tricks

Don’t be stingy about creating layers. They don’t add any bulk to the final file size and they
can help separate elements, which will aid in keeping you sane. Also, if you want to animate
symbols separately, you must create a layer for each symbol.

To add another layer, select Insert >>Timeline>> Layer (or click the new layer button at the
bottom of the Layers palette). Double-click on the Layer and name it Circle. Insert a
Keyframe in frame number 3. Select the Oval tool and then go to the Stroke and Fill option
in the tools palette. Set the Stroke Height to 4 points. Choose a Stroke Color different from
what you used for the triangle – for variety’s sake – and set the Fill to none:

7/10
Now draw a circle about 2 inches in diameter in the center of the Stage. Reset the movie to
the first frame and hit the Enter key to see the circle pop up suddenly in frame 3. The next
step will be to make that circle fade in smoothly.

Since you’re going to work more extensively with the circle, convert it to a symbol (choose
Convert to Symbol from the Modify menu). Name this symbol Circle. Insert a Keyframe at
frame 10 of the Circle layer. Remember, the contents of any new Keyframe are inherited
from the previous Keyframe until you specifically alter it, so you should only add a Keyframe
when you want to make a change to a symbol or object. Not only does this keep the
Timeline neat, it conserves file size of the final movie.

Click on the Circle symbol in frame 3 of the Circle layer. Then go to the bottom panel and
select Alpha from the Color pulldown menu, and set the percentage to 0. After you click OK,
the circle will seem to disappear. It’s still there, but an alpha value of 0 makes symbols
appear invisible. With frame 3 still active, right-click the timeline and select Create Motion
Tween. Motion tween? But it’s not moving! Congratulations, you’ve just discovered a quirk in
the interface of Flash. As a rule, use the Motion tween for everything but shape morphing.

To see the results, reset the movie to the first frame and hit Enter.

That triangle moving across the stage looks pretty dumb, but you can modify a symbol
however you like on the Stage, and the original symbol will remain the same. (See Lesson 2
of this tutorial to learn how to edit the original symbol.) Click on the Triangle layer to make it
active. Next, click on the triangle symbol in frame 6 (the second Keyframe) and set the width
and height to 50 percent in the Transform panel. Check the “Constrain” box and you only
have to enter 50 percent for the height.

Also, Flash animations don’t have to move along a straight line; they can take any path. With
the Triangle layer active, choose Insert >> Timeline >> Motion Guide. You’ll notice this
created a new guide layer (with a loop icon in it). Click on the guide layer name to make it
active if it isn’t already. Make frame 5 the current frame so you can see the triangle on the
right side of the Stage. Select the Pencil and the Smooth Modifier. Draw a loop starting at
the center of the triangle and bring it around the bottom and back up the left side of the
stage area. Is it not smooth enough? Click on the path (using the Arrow tool), and then click
on the Smooth Modifier again and again until you achieve the desired result.

Here’s the Triangle layer and its Motion Path layer. The Pencil icon indicates an active layer
for editing in the Stage area. Right-click (control-click on Mac) to reveal layer options.

Next, drag the triangle by the cross hairs into the center until it snaps to the starting point of
the path you just drew. If you are having trouble with this, make sure that “Snap to Objects”
under the View menu is checked. Add another Keyframe to Frame 20 in the Triangle layer
8/10
and, with that frame active, drag the triangle to the opposite end of the path. With the
trangle symbol selected, choose “tint” in the bottom panel (it’s hiding in the dropdown
menu beside “color”). Play around with the other settings in the panel until the triangle is a
new color that you like.

Activate motion tweening for frames 6 through 20 and Play the movie to see what you’ve
created. If the triangle doesn’t move along the path, be sure that the center of the triangle
symbol is snapped to the path in Keyframe 5 and Keyframe 20. Once everything is working
for you, click the first dot to the right of the Guide layer name (under the eyeball) to hide it.
Guide layers don’t appear in the final movie, but you may want to hide them while editing
other layers.

Now Get Experimental

Another benefit of symbols is that they simplify editing. If you have a movie full of dozens of
instances of a single symbol, you can change them all at once by editing the symbol. I’ll
often build a Flash movie with roughed out symbols and then go back and refine them after
the movie is assembled. To edit a symbol, just double-click on an instance in the Stage or in
the Library panel.

You can stop there for now or you can go crazy creating more layers and animating the
same Triangle and Circle symbols any way you like with little impact on the file size. If you
saved this as a Flash movie right now, its size would be less than 4 KB.

Experiment with adding more layers to your movie and combining tweening actions. There
are numerous ways to double up the effects. Once you’re comfy with those, try and make a
Shape tween. Hint:This is the only exception to using symbols. Shape tweening (also called
shape morphing) works only with ungrouped, nonsymbol objects, which exist directly on the
Stage and Timeline.

Also, try adding some text as an object or symbol. It’s similar to creating and editing other
objects, but you use the text tool.

Here we’re adding another triangle to the animation.

If you want to check your work, download this .fla file and open it in Flash. So far we’ve
talked about creating images in Flash and animating them. That’s pretty cool in itself, but
that only scratches the surface of what you can do with Flash. So in Lesson 2 we’ll add some
basic interactivity to our movie and integrate it into a Web page.

Stay tuned!
9/10
From the series

Flash Tutorial for Beginners

Flash Tutorial for Beginners – Lesson

1

Flash Tutorial for Beginners – Lesson 2

Go Back to Top. Skip To: Start of Article.

10/10