Flash 101 – Simple animation in Adobe Flash

Flash Animation for the Beginner, TCEA 2010

Marty Daniel, Educational Technology Curriculum
Houston Independent School District
mdaniel@houstonisd.org | plaidcircuitry.com

Agenda
First Hour
Introducing the Flash environment
The Tools
Basic Drawing in Flash
Break Before beginning, we’ll
Hours 2 and 3 take a minute to talk 
Looking at the Timeline about breaks and 
Symbols and Tweens expectations. Those 
Keyframes wanting copies of a 
Regular Frames resource can find them 
Layers
Break on my website ;‐) 
Hours 4-5
Symbols within symbols
Layers upon layers
Hour 6
Put it all together, masks and questions
Getting Started…
The Flash environment

Upon opening Flash either

1. Open a recent item
2. Create a new Flash Document
If your screen doesn’t show all the tools and pallets…
From the menu choose window > workspace layout > default

When you begin a new Flash Document you should see the following items…

1. A single Layer called "Layer1" in a timeline

Window.

2. The Flash Stage

3. The Properties Pallet

To add a new layer – click once here

Here are the shortcuts I use most frequently:

F8 – Converts an object to a symbol
F6 – Makes a keyframe
F5 – Makes a regular frame
Ctrl+Enter – this plays your movie
J – allows you to draw in object mode
Right click to copy or remove a frame

Some guidelines for beginning…

• Always break your characters, objects, backgrounds, etc into components and make
each component a symbol.
• Remember – if you don’t make it a symbol and you need a symbol Flash will make one
for you and give it the name “tweenX”. If this happens you will probably have to delete
these “tween” symbols and start again.
The Tools
The Toolbar and Shortcuts
Tools:
Selection Tool – V
Sub Selection Tool – A
Free Transform Tool – Q
Gradient Transform Tool – F
Line Tool – N
Lasso Tool – L
Pen Tool – P
Text Tool – T
Oval Tool – O
Flash Rectangle Tool – R
Pencil Tool – Y
Brush Tool – B
Ink Bottle Tool – S
Paint Bucket Tool – K
Flash Eyedropper Tool – I
Flash Eraser Tool - E
Smoothing and Straightening
Curving Lines and Edges:
Frames Miscellaneous
F5 - Add frame F9 – Toggles Action
Script pallet
Shift F5 - Delete Frame F4 - Show/Hide All
Panels
F6 - Add Key Frame CTRL+B - Break Apart
F7 – Add Blank Key Frame CTRL+3 - Show All
F8 - Make Symbol CTRL + Z – Undo
CTRL + Y – Redo
Timeline CTRL + X – Cut
Enter - Play CTRL + C – Copy
Cmnd/Ctrl 0 - Rewind CTRL + V - Paste
< - Previous Frame CTRL + SHIFT + V –
Paste in place
> - Next Frame J – allows you to draw in
object mode
Cmnd/Ctrl Enter – test
movie
Other Tips
Control + Click and Drag – Makes a copy of a shape
Alt + Click – When the magnifying glass is selected you
will switch the magnifier to zoom out.
Shift + Click – When the dropper is selected and it
selects a color for both fill and outline tools
Colors
You can specify the colors with the Stroke and Fill Color Tools.

Skewing
Before skewing a rectangle make sure it has been grouped. You can skew
the rectangle in two ways.
To skew an object by dragging:
1. Select the object with the Arrow tool.
2. Click the Rotate button in the toolbox options.
3. Drag one of the centered handles.

To skew an object using the Transform panel:

1. Select the object.
2. Choose Window > Panels> Transform.
3. Click Skew.
4. Enter angles for the horizontal and vertical values

Using the Eraser Mode Option

In the options listed at the bottom of the toolbox you can specify the Eraser Mode:
• Erase Normal - erases strokes and fills on the same layer.
• Erase Fills - erases only fills; strokes are not affected.
• Erase Lines - erases only strokes; fills are not affected.
• Erase Selected Fills - erases only the currently selected fills and does not affect strokes, selected or not.
(Select the fills you want to erase before using the Eraser tool in this mode.)
• Erase Inside - erases only the fill on which you begin the eraser stroke. If you begin erasing from an
empty point, nothing will be erased. Strokes are unaffected by the eraser in this mode.
Using the Faucet Option
To remove stroke segments or filled areas:
1. Select the Eraser tool and then click the Faucet modifier.
2. Click the stroke segment or filled area that you want to delete.
Using the Eraser Shape Option
In the options listed at the bottom of the toolbox there is a drop down that lets you specify the Eraser shape and
size.
Use this option to customize the size and look of the eraser.
Alternative ways to delete things
There are other ways to delete things besides using the Eraser tool. The most common way is to select one or
more objects and then press the DEL key on the keyboard. You can delete an entire layer by clicking the layer
at the top of your screen and dragging it to the Trash bin. You can delete several frames at once by selecting the
frames (and layers) in the timeline, then right click and choose "cut frames".
Ink Bottle Tool:
The Ink Bottle tool lets you change the stroke color, line width, and style of lines or shape outlines.
Using the Ink Bottle tool, rather than selecting individual lines and objects, makes it easier to change the
stroke attributes of multiple objects at one time.
To use the Ink Bottle tool:
1. Select the Ink Bottle tool.
2. Choose a stroke color as described in Using the Stroke and Fill controls in the toolbox.
Using Timelines, Symbols and Tweens, Keyframes,
Regular Frames, and Layers
Simple Motion Tweens in Flash – or the Flying Circle Part 1
1. Use any of the shape tools or drawing tools to create a circle.
2. With the select tool (black arrow) select your shape and click F8 to make it a
symbol. In dialog box type in a descriptive name –like circle and make it a
movie symbol. Make sure the registration is in the center. We now have that
circle in our library and an "Instance" of the symbol on our stage.
3. Move your circle to the bottom left corner of the stage.
4. Next, select a new frame further down the timeline on frame 25 and make
this a keyframe by pressing F6.
5. Move your circle to the top right corner of the stage.
6. Now comes the magic – click on the grey bar that formed between the two
keyframes. This will allow you to choose Motion from the Tween dropdown menu in the Properties
Pallet.

7. Now click ctrl+enter to see your movie.

8. Save your work!

Part 2
9. Next, select a new frame even further down the timeline on frame 50 and make this a keyframe by
pressing F6.
10. Move your circle back to the bottom left corner of the stage.
11. Now comes the magic again – click on the grey bar that formed between those two keyframes. This will
allow you to choose Motion again from the Tween dropdown menu in the Properties Pallet.
12. Click ctrl+enter again to see your movie. The circle should now bounce back and forth. Save!

Part 3
Now let’s make it a bit more interesting… you can only place one symbol at a time on a layer at
this level of play
(you will learn exceptions to
this rule later).

13. Add a new layer.

14. Click on the first keyframe

in the your new layer and
drag your circle out to top left corner of the stage.
 15. Choose color and
tint from the
properties pallet
and change the
color. Pay special
attention to the
percent of opacity
of the new tint and make this circle a new color.
16. Now you are going to repeat the steps you did in parts 1 and 2 only in the opposite directions.
17. On the new layer select frame 25 and make this a keyframe by pressing F6.
18. Move your circle to the bottom right corner of the stage.
19. Now comes the magic – click on the grey bar that formed between the two keyframes. This will
allow you to choose Motion from the Tween dropdown menu in the Properties Pallet.

20. Now click ctrl+enter to see your movie. Save!

21. Next, select frame 50 and make this a keyframe by pressing F6.
22. Move your circle back to the top left corner of the stage.
23. Now comes the magic again – click on the grey bar that formed between those two keyframes.
This will allow you to choose Motion again from the Tween dropdown menu in the Properties
Pallet.
24. Click ctrl+enter again to see your movie. The circles should cross each other as they bounce
back and forth across the screen. Save!
25. Now click ctrl+enter to see your movie. Save!

Symbols within symbols and Layers upon layers

Bee on the Wing Part 1
1. To do this tutorial, go to the page http://plaidcircuitry.com/flashtcea2009/flash-download.html and right-
click and download the file bee-movie.fla.
2. Open the bee-movie.fla. This is a simple motion tween like we did with the circle only this time we will
create it with a more complex symbol and put it on a path.
3. Play the movie to see where we are going. Now let’s look at each symbol.
4. Ok, let’s begin. Delete all the frames and one of the layers.
5. Insert a keyframe in the first frame of the layer left in your timeline.
6. Drag the bee out onto the stage and place it off the left side of the stage.
7. Size your bee so it will be bee sized.
8. Put a keyframe in frame 50.
9. Drag the bee so it is off the right side of the stage.

10. Click between the two keyframes and make a motion

tween.
11. Now we will add a guide so our bee can do some
aerobatic maneuvers.
12. Add a guide layer.

13. Now we will draw our guide – one word of advise

– keep it simple especially at first. Take the pencil
tool. Make sure you are on the first frame of your
guide and draw a simple loop in an odd color. The
color will not show later but this will help us to
see it.
14. Now we must connect each end of the guide to the
bee click on frame 1 of your bee layer and zoom
in to the bee and guide. With your white arrow drag the end of the guide to the small circle on the bee
symbol.
15. Now click on frame 50 and do the same thing on the right side.
16. Test your movie. If it doesn’t work delete the guide and start over. These are notoriously hard to fix if
they have problems.
17. Once your guide works we need the bee to follow the path a bit better. Now we will begin to understand
registration. Click
somewhere along
your motion tween
arrow on your bee
layer. This will bring
up the correct
properties pallet.
18. Check the box next to “orient to path”. This will make your bee follow a bit better.
19. Test your movie.
Putting it all together: loops, masks, and questions
Animated Masks in Flash
First we will make a looping background and add a flower to our bee movie! Then, time
permitting, we will move on to masks. For a simple tutorial on looping backgrounds see
http://www.graphicmentor.com/tutorials/loops/index2.php

1. Open a new Flash document and import an image into your library. This will be the
background layer.
2. Drag the image to the desktop and rename that layer
"Background".
3. Create a New Layer above Layer 1
4. Create a Mask on Layer 2 by Right clicking on the top layer and choose: Mask
This makes the top layer the mask layer and the bottom layer (Background) the masked layer.
Flash locks both layers by default once the mask is
created.
Click here to lock or
Unlock the Top unlock the top layer.
Layer (Layer 2) and
create a rectangle
shape on that layer.

Create a keyframe every 10 to 20 frames up to around 80 or so frames on the timeline. Move

the rectangle around the screen creating motion tweens between each set of keyframes. Add a
keyframe to the bottom layer where you end your animation on the top layer.

Re lock the top layer and then test your movie. You can scrub through your movie to preview
the mask when both layers are locked.

The completed effect is that you will see only the parts of your background that are covered
with the mask.

Try different shapes like circles and rectangles for your mask. You can make a spotlight with a
circle mask…

Resources
http://www.adobe.com/designcenter/flash/articles/flacs3it_firstflash_pt1.html
http://www.actionscript.org/resources/categories/Tutorials/Flash/Beginner/

Simple Tutorials
http://www.webmonkey.com/tutorial/Flash_Tutorial_for_Beginners_-_Lesson_2
http://www.webdesign.org/web/flash-&-swish/flash-tutorials/alpha-mask-effect.17084.html
http://www.webdesign.org/web/flash-&-swish/flash-tutorials/beijing-olympics-scroll.17061.html