FLASH 1: Basic Drawing and Animation

laborermaizeSoftware and s/w Development

Jul 4, 2012 (5 years and 4 months ago)

355 views

© M. Sorapure


Flash 1

page
1

FLASH 1
: Basic Drawing and Animation


These instructions introduce you to the Flash CS3 interface and take you through some basic
exercises.


Step 1: Open Flash. Create a new file by selecting “Flash File (ActionScript 2.0)” from the Create New
menu.


Be
sure to choose ActionScript 2.0 (rather than 3.0).
ActionScript is the scripting language used
to control Flash movies, and ActionScript 2.0 and 3.0 are significantly different. We’ll be working only
with ActionScript 2.0 in these tutorials.


The Interfac
e

The main components of the Flash interface are the Menu Bar, the Stage, the Toolbox, the Panels, and
the Timeline.




The
Menu Bar
across the top of the window has ten menus: Flash,
File, Edit, View, Insert,
Modify, Text, Commands, Control, Debug, Window,
and Help. Some menu commands have
sub
-
menus, indicated by an arrow next to the command.



The
Stage
is analogous to the canvas in Photoshop; you can adjust the size of the stage and
its color.



The
Toolbox
, like the Photoshop toolbox, contains basic drawing t
ools, a magnification glass,
and color pickers for stroke and fill. Notice that when you select some tools, additional options
appear at the bottom of the Toolbox.



The
Panels
are analogous to the palettes in Photoshop. All of the Panels are available unde
r
Window > Panels
. The Panels are movable, and you can open and close them by clicking on
the arrow next to the panel name. Key panels such as Properties and Actions are located by
default at the bottom of the screen.



The
Timeline
is analogous, in some way
s, to the Layers palette in Photoshop, On the
Timeline, you add, delete, name, move, lock, and change the visibility of layers in your Flash
movie. The Timeline also has the very important function of managing all of the animation and
navigation in your Fl
ash movie.


Setting Movie Properties and Saving

You can set the size and background color of the stage for your movie by going to
Modify >
Document
. You can set these properties at the beginning and change them at any point as you work
on your movie.


St
ep 2: Go to
Modify > Document
and set the dimensions of the stage to 500 pixels by 400 pixels.
Choose a background color. Make the Frame Rate 15 fps (frames per second).



When you save a Flash movie (
File > Save
) you are creating a file with the extensio
n .fla. This file
format is similar to the Photoshop .psd format in the sense that it preserves your layers and all of the
work you’ve done so that you can go back to it and make changes. When you’re finished with the
movie (or to test it as you’re working
), publish the file in another format: .swf. All of the Flash
movies that you see on the Web are .swf files.


Step 3: Save your file on the Desktop. Call it “test.fla”.


Drawing

The drawing tools in Flash are rudimentary in comparison to those in Photo
shop. You can draw lines
with the Line tool, rectangles with the Rectangle tool, and ovals with the Oval tool. You can draw
freehand with the Pencil tool and Brush tool, and line segments with the Bezier pen tool.

© M. Sorapure


Flash 1

page
2

With rectangles and ovals, select colors f
or the fill and the stroke (the line around the shape) in the
Toolbox. You can make changes to width and style of the stroke in the Properties panel (with the Line
tool as well). You can make changes to the fill color in the Properties panel or the Mixer p
anel. To turn
off the fill or the stroke, click on the small arrow in the color box, and then click on the No Color icon
at the top right of the resulting pop
-
up window.


To select a shape or line once you’ve drawn it, use the Arrow tool (the black arrow
in the Toolbox);
you can move, delete, or modify the color or style of the fill or stroke once it’s selected. You can also
use the Arrow tool to reshape lines and shapes. Position the Arrow tool over the edge of a shape that
you’ve drawn and drag on that
edge.


Step 4: Experiment with the drawing tools by drawing shapes and lines on Layer 1. Use the Arrow
tool to adjust shapes.



Layers

As you may have noticed in Step 4 above, when you draw multiple objects on the same layer, the
portion underneath is r
eplaced by whatever is on top. Paint of the same color merges together; paint
of different colors remains distinct. To avoid inadvertently altering shapes and lines by overlapping
them, use layers to separate them.


To create a new layer, click on the Inse
rt Layer icon on the left side of the bottom row of the Timeline.
To name a layer, double
-
click on it and type in a new name. The visibility and locking features work
the same as in Photoshop, and you can change the stacking order of layers as you do in Ph
otoshop.


Step 5: Create several new layers, name them, and draw different shapes on each. Experiment
adjusting the opacity of different shapes by using the Alpha option in the Mixer panel.


Save the file.



Text

The Text tool (the “T” in the Toolbox) a
llows you to type text; you can then set the attributes of the
text through the Properties panel. The options are similar to those in Photoshop.


As in Photoshop, text is a vector graphic; you convert it to bitmap or a rasterized graphic by using
Modify >
Break Apart
[Control
-
B (PC) or Command
-
B (Mac)]. If you select a word or phrase, the first
time you use
Modify > Break Apart,
the word or phrase into individual letters/symbols; the second
time you use
Modify > Break Apart
each letter will be rasterized.
As in Photoshop, once you rasterize
text you cannot go back and retype or change spelling; text becomes a graphic once it’s rasterized.


When you first begin to type, Flash creates a text box with a round resize handle. Drag on this handle
to set the widt
h of the text box; the text will wrap to fit inside this width. You can readjust the width
later.


Step 6: Type text on one or more layers. Experiment with the text options, including
Modify > Break
Apart
. Notice that once you’ve rasterized text, you can
use the Arrow tool to drag on the edges of
letters and create odd shapes.



Using Non
-
Flash Graphics

You can import graphics you created in other programs through the
File > Import
command. Flash will
accept files in GIF, PNG, JPG, and other formats; it im
ports them as bitmap graphics (that is, pixel
-
based graphics). After importing the graphic, Flash will put it on the Stage in whatever layer was
active when you did the import.


© M. Sorapure


Flash 1

page
3

Step 7: Import a jpg file. Place it on a new layer, and stack that layer ben
eath all of the other layers.



Animation

You create animation in a Flash movie by changing the contents of successive frames. You can make
an object move across the Stage, increase or decrease its size, rotate, change color, fade in or out, or
change shap
e. Changes can occur independently of, or in concert with, other changes. For example,
you can make an object rotate and fade in as it moves across the Stage.


There are two methods for creating an animation sequence in Flash:
tweened animation, and frame
-
by
-
frame animation.
Frame
-
by
-
frame animation is laborious and creates large files, so we’ll skip right
to tweening.


In
tweened animation, you create starting and ending frames and let Flash create the frames in
between. Flash varies the object's size, r
otation, color, or other attributes evenly between the starting
and ending frames to create the appearance of movement or change.


Flash can create
two types of tweened animation:
shape tweening and motion tweening.
Shape
tweening is used for changing the
shape of graphics, whereas motion tweening is used for animating
symbols. We’ll start with shape tweening.


Step 8: Add a new layer and name it “shape tween”. Delete all of your other layers. Draw a shape on
this layer.


In the Timeline, select Frame 2
0

that is, click in the frame under the number 20. Choose
Insert >
Timeline > Keyframe
(or F6). You now have a 20
-
frame movie in which nothing happens.




What’s a keyframe?

A keyframe is a special kind of frame that holds new content or at which a change
in content occurs.
In the Timeline, a keyframe is indicated with a circle.


To delete a keyframe, select the keyframe in the timeline. Then the easiest thing is to right
-
click (or
with a Mac, Option
-
click) on it and select Clear Keyframe from the dropdown
menu. You can also
remove selected frames and keyframes by going to
Edit > Timeline > Remove Frames
.


Creating and viewing the tween


Step 9: Click on frame 20 (only that frame should be highlighted, or gray). Use the Arrow tool to
select the object you dr
ew, and move that object somewhere else on the screen. You can do other
modifications to the object, such as change its shape, color, or opacity.


Click in one of the boxes in the timeline between frames 1 and 20 on the “shape tween” layer.


In the Prope
rties panel, select Shape from the Tweening dropdown menu.


What you’ve done above is to create two objects, the one in keyframe 1 and the other in keyframe 20.
You’ve also applied a shape tween that transforms one object into the other.


There are severa
l ways for you to view the animation you just created. You can move the playhead at
the top of the Timeline to frame 1 and drag it over to frame 20. Or, go to
Window > Controller
and
use the options in the Controller panel. Or, go to
Control > Rewind
, and
then
Control > Play
.


In the next step, we’ll add additional keyframes to modify the animation further. If you want to rotate
or resize the object, use the Free Transform tool in the Toolbar (directly beneath the Pencil tool).


© M. Sorapure


Flash 1

page
4

Step 10: Insert keyframes
(
Insert > Timeline > Keyframe
, or F6) at frames 5, 10, and 15. Click on
keyframe 5 and modify the object there, either by moving it or by changing its color or shape. Do the
same thing at keyframes 10 and 15. View the new animation. Save your work.



Libra
ry and Symbols

In Flash, you can create graphics that you reuse. These are called
symbols
; they are stored in a
Library. Every Flash document has its own Library, which you can access by going to
Window >
Library
, or F11, or Control
-
L. In the Library of yo
ur Flash movie, you can create folders to help you
organize your symbols.


Not all graphics in a Flash movie are symbols; you have to convert a graphic into a symbol in order to
put it in the Library and be able to reuse it. To turn a graphic into a symbo
l, select the graphic and go
to
Modify > Convert to Symbol
. In the resulting dialog box, give your graphic a name and choose
Graphic as the Behavior of the symbol. Flash adds the symbol to the Library. From the Library you can
drag the symbol onto the Stag
e; each symbol on the stage is called an
instance
of the symbol, and
each instance can be modified.


Step 11: Create a new layer, name it, and draw a shape on it. Select this object and convert it into a
Graphic symbol (
Modify > Convert to Symbol
). From
the Library, drag three or four instances of the
symbol onto the Stage. Modify each instance so that it looks different

by changing the size, the color,
or the opacity, for instance.


Note that to change the color or opacity of an instance of a symbol, y
ou have to use the Color option
in the Properties panel

that is, you can’t use the Color Mixer or Fill option to change the color of an
instance of a symbol. In the dropdown menu under the Color option, Tint will change the color and
Alpha will change the
opacity.


Motion Tweening

Motion tweening is similar to shape tweening except that you work with instances of symbols rather
than with graphics. You can’t alter the shape of the symbol instance, but you can modify it (as
described above) and reposition i
t to create the effect of movement. One other important difference is
that whereas you can have many shape tweens on one layer, you can only have one motion tween per
layer.


Step 12: Create a new layer and name it “motion tween”. Type a word and use the
Arrow tool to
select it. Convert the word into a symbol (
Modify > Convert to Symbol
). Delete it from the Stage.


In the Timeline, select frame 5 on the “motion tween” layer, and choose
Insert > Timeline > Keyframe

(or F6). Select this keyframe and drag th
e symbol you just created from the Library onto the stage.


Select frame 20 and insert a keyframe. Click in the Timeline in a frame between 5 and 20, go to the
Properties panel, and select Motion from the dropdown Tweening menu. Notice that all the frames

between 5 and 20 now have a purple color and there is an arrow that indicates the presence of a
tween in these frames.


Click on keyframe 5. In the Color menu on the Properties panel, select Alpha and change the
percentage to 0%. When you play the animat
ion, the word should fade in. Save your file.



Stopping the Animation

We’ll get into this in more detail later, but for now you may want to know how to stop the animation
from playing over and over again. Here are the steps involved in adding a Stop acti
on to your movie.


© M. Sorapure


Flash 1

page
5

Step 13: Create a new layer and name it “actions”. Drag this layer so that it’s at the top of the
timeline, above all other layers. Click in the last frame of this layer (frame 20) and insert a keyframe
(
Insert > Timeline > Keyframe, or
F6
).


Open the Actions panel (
Window > Actions
, or F9). With the keyframe selected in the timeline, open
the Actions folder in the Actions panel. Open
Global Functions > Timeline Control
, and double
-
click on
Stop. In the timeline you should see that a ti
ny “a” has been inserted in the keyframe. Save your file.



Saving, Testing, and Publishing

When you save the file (
File > Save
) as you did above, you are saving an updated version of the FLA
file. You want to keep this FLA file so that you can work on it
at a later date.


When you publish your Flash movie, Flash creates a new file with the SWF extension. This SWF file is a
compressed and condensed version of your FLA file; it cannot be edited. All of the Flash movies that
you see on the Web and elsewhere
are SWF files.


Before publishing, you can test the movie by going to
Control > Test Movie
(or hitting Control
-
Return).
In fact, it’s a good idea to test your movie often as you’re working on it, just to make sure that it
plays as expected in the SWF for
mat. Testing will create an SWF file, but it’s important when you’re
finally done to use the Publish command to publish the SWF file.


To publish the movie, go to
File > Publish
. An SWF file and an HTML file (which you can delete) will be
created and put
in the same file folder as your FLA file. You can adjust the publish settings by going to
File > Publish Settings
.


Step 12: Publish your movie.