Basic Drawing and Animation

 

A. Creating Motion Tween in Flash

1. Draw a vector using any of the drawing tools in Flash, say a small circle and convert it into a symbol (F8) by selecting the Graphic option and name the symbol say 'ball'.
2. Click the 20th frame in the Timeline and insert a frame (F5).
3. Now right-click the 20th frame in the Timeline and select Create Motion Tween (or Motion option from the Tween panel of the Properties inspector) and insert a Key Frame (F6).
4. Select the 10th frame and insert a Key frame (F6) and move the ball to a different position say, above the current position to create a motion sequence (automatically tweened by Flash).
5. Save your work and test the Movie (Ctrl + Enter). That's it you have created simple animation using Motion Tween.

Fig: Timeline of Motion Tween

Note: Use the Color Panel of the Properties inspector to reduce the Alpha value from 100 to 32 for the 1st and last frames to produce Simple Alpha Tweening as shown in the Example.

B. Creating Shape Tween in Flash

1. You can create Shape Tweened animations using Shape option from the Tween panel of the Properties inspector. Draw a vector using any of the drawing tools in Flash, say a small circle and remove its border.
2. Click the 10th frame in the Timeline and insert a Key Frame (F6). Now draw another shape say a diamond using the rectangle tool without a border.
3. Now right-click on any frame in between these two Key Frames and select Shape option from the Tween panel of the Properties inspector.
4. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create Shape Tween in Flash.

Fig: Timeline of Shape Tween

Note: Only vectors can be Shape Tweened (Not for Symbols). Note both the Tweens have different colors along the Timeline as shown above. Make sure that the line is smooth without being broken to ensure correct Tweening.

Fig: Timeline of Broken Tween

C. Frame-by-Frame Animation

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Animation' typed as shown in the example and break it using Break Apart (Ctrl + B) to separate the alphabets as shown below:
Fig: Showing Text after Break Apart
2. In Frame-by-Frame animation we create the object for each frame so as to produce an animation sequence.
3. Insert Keyframe (F6) and move the alphabets so as to produce an animation sequence.
4. Repeat the above step as far as desired to create Frame-by-Frame animation as shown in the example.
5. Save your work and test the Movie (Ctrl + Enter). That's it you have created an animation using Frame-by-Frame animation.

Fig: Timeline of Frame-by-Frame Animation

D. Creating a Guided Motion Tween in Flash

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Flash' typed and break it using Break Apart (Ctrl + B) as done in the previous example and put each alphabet in different layers and name the layers as shown in the picture below.
2. Insert a guide layer by right-clicking the topmost layer and select 'Add Guide Layer' (Insert-->Timeline-->Motion Guide), draw any path using the pencil tool in the guide layer as shown in the example.
3. Now create Motion tween by selecting the object in the 1st frame and snapping its registration point to one end of the path.
4. Snap the object in the last frame to the other end of the path in the guide layer.
5. Repeat the same for all the objects (alphabets) by snapping their registration points to the path in the guide layer.
6. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create motion along a guided path.

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 Interface
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 tools, 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 under
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 ways, 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 Flash 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.

Step 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 extension .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 Photoshop. 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 for 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 panel. 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 replaced 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 Insert 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 Photoshop.

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) allows 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 width 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 imports 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 beneath 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 shape. 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, rotation, 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 20—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 drew, 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 Properties 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 several 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 Toolbbar (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.


Library 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 your 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 symbol, 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 Stage; 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, you 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 it 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 the 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 animation, 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 action to your movie.