1. SESSION 1
OUT OF THIS WORLD
In this session, students are introduced to Macromedia Flash. To begin, they
view a sample animation called “Out of this World”, to gain an understanding
of the types of animation that can be created using the program. Afterwards,
they open Macromedia Flash to learn about the program environment. Once
familiar with the components, they practice drawing using the tools in the
Flash Toolbox. They then learn how to manipulate images by scaling, skewing,
and rotating objects. With these skills mastered, they apply their knowledge of
the drawing tools to create the first scene in a space adventure.
Assignment 1:What is Animation?
Assignment 2:Introduction to Flash
Assignment 3:The Flash Toolbox
Assignment 4:Working with Shapes
Assignment 5:About the Timeline
Assignment 6:Create Scene 1 - In a Land Far Far Away
Session 1 Review: Flash Terms and Tools
Session 1 Skill Review: Cartoon Challenge
Session 1 Extension Activity: Flip and Align Objects
1

2. OUT OF THIS WORLD
Assignment 1:What is Animation?
In this assignment, you will learn about the history of animation as well as how the computer has
changed the way animators make cartoons.
What is Animation?
Animation is a series of drawings that show action. By changing the
still image slightly, it can be made to look like it is moving. This is
done by rapidly showing the images in sequence. The human eye
sees the change in images as movement, not as separate pictures.
History of Animation
Although humans have been drawing cartoon pictures since the time of the cave dweller, the
ability to show movement did not occur until the 19th century. It was during this time that
scientists created the camera and projector. Artists were then able to use this technology to film
a series of drawings that when shown rapidly, looked like they were moving.
In the beginning, artists would draw a picture by hand and film it. They then would change the
image and film the new picture. These still images were strung together to create an animated
picture. It would take a very long time to make animations using this method.
It was not until the 1960’s that animation was made easier by using the computer. At first the
technology would allow artists to draw simple shapes and view the objects as if they were three-
dimensional. Later, the computer would allow the artist to draw a picture and then the software
program would automatically create the animation. Today, software programs have become
very complex and can create life-like animations that have realistic lighting and textures.
1. List some of the benefits you think there are to using the computer to create animations:





2

3. TECHNOFLASH SESSION 1
Using Flash to Make Animations
Macromedia Flash is a software program that can be used to create two-dimensional
animations. Flash animations are used most often on the Internet. This is because they can be
quite complex but still have small file sizes, making it easy for people to view the animation. You
will often see Flash animation used to create online games, electronic greeting cards,
information videos, electronic advertisements, splash pages for company websites, or fancy
navigation buttons.
Macromedia Flash has many features that make it easy to create animations:
• Draw one object use it many times. Flash has a library where you can save your
drawings. This makes it easy to add the same object many times.
• Pick your start and end point for an object, and then watch it move. Flash lets you apply
motion tweening to an object. This means that you select the start point and end point
for the object, and the program will automatically create all the still images that come in
between or “tween” the two objects. By using motion tweening you can make an object
move from left to right, up and down, diagonally, clockwise, or counter clockwise.
• Morph an object from one form into another. Flash lets you apply shape tweening to an
object. This means that you draw the original image and the transformed image. The
program will then automatically create all the still images that come between or
“tween” the two pictures. By using shape tweening you can morph an object into the
form of another.
• Make many things animate at one time. Flash lets you use layers to create your
animations. Each layer can hold a separate moving object. This means that many
movements can happen at the same time.
• Make objects move realistically. Flash lets you apply a motion path to an object. A
motion path is a hand drawn line that an object moves along. You can use a motion
path to make many fun animations such as a plane doing a loop or a rabbit hopping.
• Save time by copying, pasting, and reversing action sequences. Flash lets you copy
animation you have already created and paste it into a new spot. As well, you can
reverse the action, making it fast and easy to create new action sequences.
• Add sound to make the animation more interesting. Flash lets you add sound to an
action or to an entire scene. This is a great way to apply effects, sound track, or dialogue
to an animated story.
Watch an Animated Story Made using Flash
Flash lets you create several types of animation including static, frame by frame, motion tween,
shape tween, and motion paths. Watch the animated story Out of this World, which was
created using Flash. For each scene, notice the type of animation.
 Open the Flash folder. You may need to ask your teacher where this is located.
Double click the Out of this World document to watch the animated story.
3

4. OUT OF THIS WORLD
2. Read the descriptions for each animation. Label the scenes below with their animation type.
 Motion Path: An object moves freely across the screen. The movement is smooth
and creates a realistic image.
 Frame by Frame: An object moves slowly across the screen. Often the movement
appears choppy.
 Static Animation: Still images displayed in a sequence.
 Shape Tween: An object is transformed from one shape into another. The morphing
is very smooth.
 Motion Tween: An object moves across the screen horizontally, vertically, diagonally,
clockwise, or counter clockwise. The movement is very smooth.
a. b. c.
d. e.
3. What did you like about the animation “Out of this World”?
4. What would you add to this story to make it even better?
Assignment 2:Introduction to Flash
4

5. TECHNOFLASH SESSION 1
In this assignment, you learn about the components of the Flash program environment. Read the
description on the back of this sheet about the parts of the Flash window. Use this information to
label each part correctly.
Label the Parts of the Flash Window
 stage  timeline  layers
 toolbox  panels  main toolbar
 edit bar  menu bar
7. 6. 7.
2.
4. 3.
5.
1.
Your window may look slightly different. If you
are missing some of the parts, click on the
Window menu. Place a checkmark beside Tools,
Timeline, and Library. Then click the Toolbar
option and select Main and Edit Bar. Afterwards
click Properties from the Properties option.
NOTE: The options are slightly different for earlier version of the program.
5

6. OUT OF THIS WORLD
Parts of the Flash Window
Menu Bar The bar at the top of the window that lists a series of menu options including
File, Edit, View, Insert, Modify, Text, Commands, Control, Window, and Help.
Stage The stage is the white area in the center of the window. It is where Flash movies
are created.
Layers Layers are used to separate the stage into levels. By placing objects on
different layers, it is possible to have several animations appear at the same
time. Layers can also be used to adjust the stacking order of objects. The layer
at the bottom of the list is at the back of the stage. The layer at the top of the
list is at the front of the stage.
Timeline The timeline is the area that controls when objects appear on the stage. It is
made up of a series of boxes. Each box is a frame. Keyframes are added to the
timeline to set the start and end point for each animation.
Panels Panels are a set of program options listed in a box to either the right or bottom
of the window. Panels let you change the appearance of an object or
customize an animation.
Toolbox The toolbox is a collection of drawing tools used to create and customize
objects on the stage.
Main Toolbar A toolbar that contains commonly used program options such as open, save,
print, cut, copy, paste, rotate, skew, scale, and align.
Edit Bar A bar that contains commonly used program options to edit the stage such as
showing or hiding the timeline, changing the scene currently displayed, and
adjusting the magnification of the stage.
8. What parts of the Macromedia Flash window look like other programs you have used?
6

7. TECHNOFLASH SESSION 1
Assignment 3:The Flash Toolbox
I know that you want to animate something, and you will.
However, before you can start making objects move, you need
to know how to make objects. In this assignment, you will learn
how to draw shapes such as a line, oval, and rectangle. You will
also draw freehand using the pencil and brush tools. In addition,
you will learn how to edit objects by erasing sections, changing
the color, and transforming the shape. As you experiment with
the tools in the Flash toolbox, you will notice how similar they are
to most paint programs. It is likely that if you have drawn before
using Microsoft Paint, you will find it a "flash" to learn the Flash
drawing tools.
Parts of the Flash Toolbox
The Flash Toolbox is divided into four parts. Read the descriptions and then label the diagram.
Parts of the Flash Toolbox
 Drawing Tools: Tools used to draw, select, or
customize objects.
 View Selections: Tools used to change the view of
the stage by altering the magnification or area
displayed.
1.  Color Selectors: Tools used to select the stroke or
fill color of a shape.
 Options Pane: Options that are available for the
currently selected tool. Options may include line
style or tool size.
2.
3.
4.
7

8. OUT OF THIS WORLD
Draw Shapes
You are now going to experiment with the following tools to learn how to draw
shapes. I bet you can guess what shape they make! Write it in the space below
each tool.
5.
a) b) c)
Draw a Line
 Click on the Line Tool.
 Look at the Properties Panel. Notice how it now offers a series of tool options. The
Properties Panel changes each time you select a tool. Set the appearance of the
line by selecting a stroke color, width, and style:
stroke color stroke style
stroke width
 Notice how the Options Pane has changed and is displaying tool options. The Object
Drawing tool is selected by default. It groups the stroke and fill of an object together.
Object Drawing is not available for earlier program
Object Drawing: versions. This means that objects drawn are not
The stroke and fill are grouped. automatically grouped.
 Now click and drag the cursor across the stage to draw a line.
Draw an Oval and Circle
 Click on the Oval Tool.
 Look at the Properties Panel. Notice how the tool options are what you set for the
Line tool, but this time there is also a fill color option. Change the appearance of the
oval by selecting a stroke color, width, style, and fill color:
fill color
8

9. TECHNOFLASH SESSION 1
 DO NOT OVERLAP ANY OF THE SHAPES. Now click and drag across the stage to make
an oval. Do this again but this time hold down the SHIFT key. This will make a circle.
Draw a Rectangle and Square
 Click on the Rectangle Tool.
 Look at the Properties Panel. It is the same as the Oval tool.
 DO NOT OVERLAP ANY OF THE SHAPES. Make your selections and then click and drag
across the stage to make a rectangle. Now do this again but this time hold down the
SHIFT key. This will make a perfect square.
Use the Selection Tool to Move, Bend, and Reshape
Follow the instructions to customize the shape using the Selection tool.
Move and Change the Line
 Click the Selection Tool.
 Rest the mouse over the line. DO NOT CLICK ON THE SHAPE. The mouse
pointer changes to a Move Shape pointer. This is used to MOVE the object.
Click and drag to move the line.
 Click off the line. Rest the mouse pointer over the center of the line. Notice
how it changes to a Line Shape pointer. This is used to BEND the shape of the
object. Click and drag to bend the line.
 Rest the mouse at the end of the line. The mouse pointer changes to a
Corner Shape pointer. This is used to CHANGE THE END POINT or CORNER of
the object. Click and drag to move the end point of the line.
− The line may now look something like this:
6. Use the Selection Tool to change the appearance of each shape by bending it and
moving the end points or corner. Can you make a triangle from the rectangle? How did
you do it?
Did you accidentally open the editing pane?
If you have the Object Drawing option turned on, Flash
draws objects as grouped. If you double click on the
grouped object the editing pane will open. If this
happens to you, don't panic. Just click Scene 1 to return
to the stage.
9

10. OUT OF THIS WORLD
10

11. TECHNOFLASH SESSION 1
Use the Free Transform Tool to Scale, Skew, and Rotate
The Flash program lets you scale, skew, or rotate a selection. Try it!
 Click on the circle to select it.
 Click the Free Transform Tool.
 Rest the mouse pointer over a corner of the bounding box. The mouse
pointer changes to a two-way arrow. Click and drag to change the shape. If
you hold the SHIFT key it keeps the object in proportion.
 Rest the mouse pointer over the line of the bounding box. The mouse pointer
changes to a double line. Click and drag upwards or downwards to skew the
shape. This causes it to slant to the left or right.
 Rest the mouse pointer above the corner of the bounding box. The mouse
pointer changes to a round arrow. Click and drag the mouse in a circular
motion to rotate the shape.
Edit the Color of the Stroke and Fill
Sometimes you may forget to pick a stroke or fill color before you begin to draw.
Other times, you may change your mind and decide you no longer like the way
the shape looks. It is easy to change the stroke and fill color. Guess which tool is
used to change the stroke and which one changes the fill. Write your answer in the
space below the Ink Bottle and Paint Bucket tools:
7.
Ink Bottle Tool Paint Bucket Tool
a) b)
 Press the ESC key on the keyboard to deselect any objects on the stage.
Change the Stroke Color
 Select a color for the stroke color using the Stroke Color tool.
 Select the Ink Bottle Tool. Now click on the stroke of a shape.
Change the Fill Color
 Select a color for the fill color using the Fill Color tool.
 Select the Paint Bucket Tool. Now click on the fill of a shape.
11

12. OUT OF THIS WORLD
Clear the Stage
The stage is full with all of the objects you have drawn. It is time to clear the stage.
 Click the Selection Tool.
 Rest the mouse pointer in the upper right hand corner of the stage. It
changes to a Marquee Select pointer.
 Click and drag to draw a dotted box around all the items on the stage. Once all the
objects are selected, click the DELETE key on your keyboard.
Draw Freehand using the Pencil or Brush
You are now going to experiment with the Pencil and Brush Tools. These are very
similar to most paint programs. Write the name of the tools below the icon:
8.
a) b)
Draw with the Pencil
 Click on the Pencil Tool.
 Look at the Properties Panel. It looks just like the Line tool options. Set the
appearance of the pencil line by selecting a stroke color, width, and style:
stroke color stroke style
stroke width
 From the Options Pane click the Object Drawing tool to deselect it.
Skip this step if using an earlier program version.
Object Drawing
 Now you need to pick an option. Look at the Options pane in the toolbox. Click on
the arrow to choose a drawing mode: Straighten, Smooth, or Ink.
Drawing Mode
 Use the pencil to draw a smiley face and give him spiked hair:
12

13. TECHNOFLASH SESSION 1
Paint with the Brush
 Click on the Brush Tool.
 Look at the Properties Panel. It only has the fill option. Pick a color.
fill color
 Now you need to pick an option. Look at the Options pane in the toolbox. Pick a
brush size and shape.
Brush Size
Brush Shape
9. Follow the instructions under the Try It heading to discover the purpose of each paint
mode. Describe the purpose for each mode under the Description heading.
Paint Mode Try It Description
a) Paint Normal 1. Paint inside the face. What happens to the face?
2. Remove the paint by selecting Undo from the Edit
menu, pressing CTRL + Z on the keyboard, or click
the Undo tool on the Main toolbar.
b) Paint Fills 1. Paint inside the face again. Notice it does not What happens to the face?
cover any of the lines.
2. Leave the paint on the stage.
c) Paint Behind 1. Pick a new color. What happens to the face?
2. Paint inside the face again. Notice how the paint
goes behind the fill and lines.
d) Paint 1. Pick a new color. What happens to the face?
Selection
2. Select the Selection Tool. Click and drag to select
only part of the face.
3. Click the Paint tool and paint the selection only.
e) Paint Inside 1. Pick a new color. What happens to the face?
2. Click inside the spiked hair. Paint the hair only.
13

14. OUT OF THIS WORLD
Edit a Drawing using the Eraser Tool
The eraser has many options. This makes it easy to remove unwanted sections of
the drawing. Experiment with using the Eraser Tool.
10. Click on the Eraser Tool. Look at the Options pane in the toolbox. Try out each of
the options one at a time to remove parts of the smiley face. Describe the
purpose for each option under the Description heading.
Eraser Option Description
a)
Eraser Mode
b)
Faucet
c)
Eraser Shape
Add Text
You are now going to add your name to the stage using the Text Tool. Again, you
will notice that it is very similar to most paint programs.
 Click on the Text Tool.
 Look at the Properties Panel. Notice how it now offers a series of tool options. You can
select the type of text, font, size, color, style, direction, alignment, character spacing,
and more! Change the font, size, and color.
font size
font font color
 Now click and drag the cursor across the stage to draw a text box. Type your name.
 To change the look of your name, double click inside the box. Now make a new
selection from the Properties Panel.
14

15. TECHNOFLASH SESSION 1
What do these Drawing Tools Do?
11. The tools you have learned so far are the ones you will most likely use when you are
drawing. However, the Flash Toolbox has several other tools. See if you can discover what
they do. Use each one to learn its function. Write the function beside each tool.
a)
Subselection
Tool
b)
Lasso Tool
c)
Pen Tool
d)
Gradient
Transform Tool
e)
Eyedropper
Tool
f)
Hand Tool
g)
Zoom Tool
Experiment with the Drawing Tools
Have some fun drawing with the tools in the Flash
Toolbox. The more you practice the better you will get
at making objects in this program. When you are
finished, exit the program.
15

16. OUT OF THIS WORLD
Assignment 4:Working with Shapes
In this assignment, you learn how to group and ungroup objects. Grouping is when
you combine separate objects to make a single item. This can happen when you
group the stroke (line) and fill of an object. It can also happen when you take
multiple objects on the stage, and combine them all together. Learn tips for
drawing using grouped objects by following the instructions to draw a simple car.
Draw a Car and Group Together the Pieces
Draw the Car Body and Tire
 Draw the body of the car using a rectangle. Be sure the Object Drawing option is
selected. This will automatically group the fill and stroke together.
 Bend the shape.
If using an earlier program version,
group the fill with the stroke by double
clicking inside the shape, and then
from the Modify menu select Group.
 Use the Oval Tool to draw a car tire. Be sure the Object Drawing option is
selected.
Copy and Paste the Car Tire
It is easy to copy and paste grouped objects. Follow the instructions to copy the car tire and
then paste it.
 Select the car tire. From the Edit menu, select Copy. Now from the Edit menu select
Paste. Move the tire into position.
Draw the Car Top and Adjust the Stacking Order
You can adjust the stacking order of grouped objects. For example, you can move an object to
the front or back. Follow the instructions to draw a car top and move it to the back.
 Away from the car, using the Rectangle tool draw a car top. Be sure the Object
Drawing option is selected.
 Move the shape in front of the car body. Notice how it is in front of the shape. To
move it to the back, you need to select from the Modify menu, Arrange, and then
Send to Back.
16

17. TECHNOFLASH SESSION 1
Edit a Grouped Object by Adding a Racing Stripe to the Car Body
You can edit a grouped shape. For example, you could draw a racing stripe on the car body.
Follow the instructions to make the car look good.
 Double click on the car body. It opens into an editing pane. Although you can see
the stage, only the grouped shape is active.
 Using the Pencil Tool draw a racing stripe across the car body.
 When finished, click the Scene 1 button to return to the stage.
 The racing stripe is now part of the grouped object.
Group Together all the Car Parts
If you wanted to apply animation to this object, such as a motion tween the ENTIRE object
would need to be grouped together. Follow the instructions to group the car parts.
 Click the Selection Tool .
 Click and drag around the car parts.
 When they are all selected, select Group from the Modify menu.
17

18. OUT OF THIS WORLD
18

19. TECHNOFLASH SESSION 1
Ungroup an Object
You can still edit the car, by double clicking on the object to open the edit pane. Alternatively, if
you want you can ungroup it.
 To ungroup an object select Ungroup from the Modify menu.
Practice Drawing using Grouped Objects
It is a good idea to practice drawing objects using grouped
shapes. On the next page are two drawing challenges. Pick
one and try to draw it using the tools in the Flash Toolbox.
Remember, you will need to group the objects and arrange
them.
 Clear the stage by selecting all the objects and pressing
DELETE on the keyboard.
Drawing Challenges
Steps:
1. Draw the head using the Oval tool and then
bend the shape. Be sure to have the Object
Drawing option turned on.
2. Draw the ears using the Oval tool. Copy and
paste the ear. Adjust the stacking order to the
back.
3. Draw the body using the Oval tool and then
bend the shape. Adjust the stacking order.
4. Draw the arms using the Oval tool. Copy and
paste the arm. Adjust the stacking order. Use the
Free Transform tool to rotate the arms.
When you draw the bear as grouped
objects you can animate the body
parts. For example, you can make the
5. Paste another arm. Use the Free Transform tool to
arm wave. make the object bigger to form a leg. Copy the
shape and then paste it. Adjust the stacking
order. Use the Free Transform tool to rotate the
legs.
6. Double click on the head to open the editing
pane. Add eyes, nose, and mouth. Return to
Scene 1.
19

20. OUT OF THIS WORLD
Steps:
1. Draw the head using the Oval tool. Be sure to
have the Object Drawing option turned on.
2. Draw the beak using the Rectangle tool. Be sure
to have the Object Drawing option turned on.
Use the Selection Tool to drag the corner inwards
to form a triangle. If necessary, use the Free
Transform tool to rotate the shape. Adjust the
stacking order.
3. Draw the body using the Oval tool and then
bend the shape. Adjust the stacking order.
4. Draw the wings using the Oval tool. Group the
first oval, then copy and paste it to make two
wings. Adjust the stacking order. Use the Free
Transform tool to rotate the wings. When you draw the bird as grouped
objects you can animate the body
5. Use the Pencil tool to draw the feet. Be sure to parts. For example, you can make the
wings flap.
have the Object Drawing option turned on.
Copy the shape and then paste it. Adjust the
stacking order to place one foot behind the
body.
6. Double click on the head to open the editing
pane. Add eyes. Return to Scene 1.
Make your Own Creation:
Write the steps to make a cartoon drawing. Give the instructions to a friend and have them
follow the steps.
Assignment 5:About the Timeline
20

21. TECHNOFLASH SESSION 1
Over the next few sessions, you are going to apply your knowledge of the
drawing tools to make an animated space adventure, similar to the Out of this
World sample you watched in Assignment 1. Before you can start, you need to
understand the Flash timeline. Read the information and answer the questions.
About the Timeline
1. The secret to making animations using Flash is to add "keyframes" to the timeline. The
timeline organizes and controls a document's content over time in layers and frames. Label
the parts of the timeline.
a. b.  Playhead
 Timeline Header
A
 Layer
d.  Empty Keyframe
c.
 Current Frame
Indicator
e. f. g.  Frame Rate Indicator
 Frame
About Frames
The timeline is made up of numbers with boxes. Each box is a frame. The numbers in the timeline
header tell the frame number. These can be used as a guide to help you place objects,
animation, or sound into the correct frame. You can select a frame by clicking on it.
2. In the timeline above, what frame number is shown by the letter A?
About the Frame Rate
A typical Flash document shows twelve frames per second (12.0 fps), this is called the frame
rate. 12.0 fps means in one second you will watch the animation from twelve frames. It is
important to understand frames per second, because this will help you set when an animation
should start and stop. For example, in this assignment you are going to add text. You will want to
leave the words on the screen long enough for a person to read. You will likely need 3 seconds
for a person to read the words. This means the text needs to be on the screen for 36 frames.
3. If the frames per second is set to twelve (12. 0 fps), how many seconds will the Flash
document have played when it reaches frame number 48?
21

22. OUT OF THIS WORLD
About Keyframes
You use the timeline to fill the frames. To do this you add keyframes. Keyframes are the "key" to
animation. A keyframe is a frame in an animated sequence that contains drawn objects. You
can only add objects to keyframes.
You have two choices when you add a keyframe to a timeline. You can add a keyframe, which
copies the content of the previous keyframe into the new one OR you can add a blank
keyframe, which does not copy the content of the previous keyframe, and instead is empty.
What type of keyframe you use depends on the type of animation you are creating. Today you
are going to use blank keyframes in your animation.
4. Look at the keyframe on the timeline. Draw a picture of what the frame looks like in the
space below.
About Layers
You will notice that the layer has a row in the timeline. By adding additional layers, it is possible to
have many animations happen at the same time. This is because on each layer a keyframe can
be added to the timeline at the same frame number. This makes it possible to have a dog's tail
wag at the same time as his ears wiggle.
5. What is the name of the layer?
About Scene One
6. A Flash document can have more than one scene. Much like a movie, scenes divide the
action into parts. Each scene has a stage that contains drawn objects, layers for the
objects, and a timeline that holds animation and sounds. When you make a large
production, it is a good idea to divide the story into scenes. What is the name of the
scene?
HINT: The scene number is displayed
above the timeline or the stage in
earlier program versions.
Create Scene 1: In a Land Far Far Away
22

23. TECHNOFLASH SESSION 1
In this assignment you use static animation to make the first scene in a space
adventure. Static animation is when still pictures are shown in a sequence.
The scene will introduce the purpose of the story. It will contain pictures and
the words "In a land far far away there lived an alien that longed for
adventure. He decided to leave his planet to explore the galaxy."
Follow the instructions to:
1. In Frame 1, add the words, "In a land far far away" and include a picture of space.
2. Insert a blank keyframe onto the timeline in Frame 36.
3. View the story using the ENTER key.
4. Add, "there lived an alien that longed for adventure" onto the blank keyframe.
5. Below the words, draw an alien. Add the alien to the library.
6. Insert the alien from the library onto the stage. Edit the appearance.
7. Delete the newly added alien.
8. Insert another blank keyframe in Frame 72.
9. Add, "He decided to leave his planet in search of adventure." onto the blank keyframe.
10. Copy an image from Frame 1 onto the blank keyframe using Paste in Place.
11. View the story. Solve the problem of why the last frame does not appear for very long.
12. Edit the story by adding or removing frames.
13. Save the Flash document.
Open the Flash Program
 Open the Flash program and select a new Flash Document.
Draw the First Still Picture in Frame 1: In a Land Far Far Away
Follow the instructions to create the first still picture in the scene.
 Use the Text Tool to add the text In a land far far away.
 Use the drawing tools in the Flash toolbox to draw a scene of outer space.
Hints:
 Use the gradient fill option to make the
planets.
 Draw a rectangle and then bend the top to
make it look like a planet at the bottom of
the stage.
 If you used the Pencil Tool to draw an
object, sometimes it is difficult to fill with
color. Try using the Brush Tool. Set the
options to Paint Inside. Paint color along the
inside edges. Now the shape should easily
fill with color when you use the Paint Bucket
Tool.
23

24. OUT OF THIS WORLD
Draw the Second Still Picture in Frame 36: There Lived an Alien
Follow the instructions to make the second still picture in the scene.
Add a Blank Keyframe
You need to add a blank keyframe to the timeline at frame 36. This
will cause the first picture you drew to show on the screen for 35
frames. After that, it will no longer be displayed because a new
picture on frame 36 will be seen.
 Right click on Frame 36, and from the menu select Blank Keyframe.
− Notice how the timeline has changed. The frames in between frame 1 and frame 36
are gray. Frame 35 has a white box. This indicates that the contents of frame 1 will
stop being displayed after this frame. Frame 36 has a white box with a circle. This
shows that it is a keyframe.
View the Story
 Click on frame 1. Press the ENTER key to view the story.
− The playhead moves across the timeline. The current frame playing is shown in the
Current Frame Indicator.
Current Frame Playhead
Indicator
There Lived an Alien
Hints:
 Draw shapes and then bend them
 In Frame 36, use the Text tool to add: to create an alien.
 Draw using the Pencil Tool NOT the
there lived an alien that longed for adventure. Brush Tool.
 Press ENTER inside the text box to
 Use the drawing tools in the Flash toolbox to
make the words appear on two
draw an alien. Make sure it is filled with color. lines.
 To fill an area with color, use the
Paint Bucket Tool. Set the Gap Size
to Close Large Gaps.
 If an area won't fill with color select
the Brush Tool. Set the Brush Mode
to Paint Inside. Paint around the
inside edges. Now use the Paint
Bucket to fill the area.
 Use the Zoom tool to magnify the
stage.
24

25. TECHNOFLASH SESSION 1
Add a Picture to the Library
When you draw an object, it can be saved in the library. This means it
can be used over and over again. You are going to add your alien to
the library. That way you can use him in many scenes of your space
adventure.
Add the Alien to the Library
 Group the alien, by selecting Group from the Modify menu.
 Right click on the alien and from the menu select Convert to Symbol.
 Type alien in the Name box. Click inside the Graphic radio button. Click OK.
Insert a Symbol from the Library
Now the alien is a symbol stored in the library. You can insert it from the library. Try it!
 From the Window menu, select Library. A panel should display itself on the right hand
of the window.
 Click on the alien symbol under the Name heading and drag it onto the stage.
DO NOT double click on the
symbol once it is on the
stage.
If you do, it will open the
image in the editing pane.
Any changes you make in this
pane will change the symbol.
Edit the Newly Added Alien
 Click the Free Transform Tool .
 Change the size, skew, and rotate the newly added alien.
− Notice how the alien in the library and the original alien on the stage stay the same.
25

26. OUT OF THIS WORLD
− You can even change the color of the newly added alien, without changing the
symbol in the library or the original alien on the stage. To do this you need to break
apart the object.
 From the Modify menu, click Break Apart.
 Then click Ungroup from the Modify menu.
 You can now use the Fill Color and Paint Bucket Tool to change the
objects color.
− Notice how the original and the library symbol stay the same.
Delete the Newly Added Alien
 Click the Selection Tool.
 Click and drag around the alien to select it. Now press DELETE on the keyboard.
Draw the Third Still Picture in Frame 72: He Decided to Leave his Planet
Follow the instructions to make the third still picture in the scene.
Add a Blank Keyframe
You need to add a blank keyframe to the timeline at frame 72. This will
cause the second picture you drew to show on the screen for about 3
seconds. After that, it will no longer be displayed because a new
picture on frame 72 will be seen.
 Click frame number 72. From the Insert menu, select Blank Keyframe.
− Notice how the timeline has changed again.
Add Text to Describe the Story
26

27. TECHNOFLASH SESSION 1
 In Frame 72, use the Text tool to add the text:
He decided to leave his planet to explore the galaxy.
Copy an Object from Frame 1 to the Same Place in Frame 72
 Click on frame 1 in the timeline.
 Click on an outer space object. You may need to double click it to select both the fill
and stroke.
 From the Edit menu, select Copy.
 Click on frame 72 in the timeline.
 From the Edit menu, select Paste in Place. The object is now positioned in the exact
same place as in frame 1.
When you use Paste in Place the
object is put in the exact same
spot as the copied item.
What is the Problem?
 Watch your story by selecting frame 1 and pressing ENTER. Do you notice
the problem?
 Maybe you can not tell because when the playhead gets to frame 72
the animation stops. However, there is a problem. To find it, select Test
Movie from the Control menu.
 The movie opens into a preview pane and will continually loop.
1. What is the problem?
27

28. OUT OF THIS WORLD
 Click the Close button to exit the preview pane. If using an earlier version of the
program be certain to click the bottom Close button.
Solve the Problem: Insert a Blank Keyframe
Right now, the objects in frame 72 only play for one frame, which is not enough time to read the
text or see the drawings. To solve this problem you need to add a blank keyframe to the
timeline.
 Insert a blank keyframe on the timeline.
Remember, it takes one second to play
twelve frames. How many seconds do
you think you need to read the last bit of
text?
Pick a frame on the timeline that gives the
viewer enough time to read the words.
Edit the Story
You may find the words are on the screen too long or short. This can easily be fixed.
More Time is Needed to Read the Words
If you need more time to read the words, then you need to add more frames prior to the next
picture being shown, in other words, before the next keyframe.
Keyframe where picture starts to be shown.
Frame when picture stops being shown.
28

29. TECHNOFLASH SESSION 1
New keyframe and picture.
 For the desired picture, click on a frame between the starting keyframe and the
ending frame (the white rectangle).
 From the Insert menu select Frame. Add as many frames as are necessary to read the
words.
Less Time is Needed to Read the Words
If you need less time to read the words, then you need to remove frames
prior to the next picture being shown, in other words, before the next
keyframe.
 For the desired picture, click on a frame between the starting
keyframe and the ending frame (the white rectangle).
 From the Insert menu, select Remove Frames. Remove as many
frames as are necessary.
Save the Flash Document
 From the File menu, select Save.
 Click the Look in: arrow and locate the folder where you save
your work.
 Type the filename space in the File name box.
 Click Save.
Close the Program
29

30. OUT OF THIS WORLD
 From the File menu, select Exit.
30

31. TECHNOFLASH SESSION 1
SESSION 1 REVIEW: ABOUT FLASH
Label the parts of the window.
 layers  stage  timeline  toolbox
2.
4. 3.
1.
/4
Match the tool to its function.
5. A. Draw freehand.
6. B. Rotate, skew, or scale a selected object.
7. C. Bend a line.
8. D. Erase fills or lines.
9. E. Draw an oval.
/5
31

32. OUT OF THIS WORLD
Circle whether the statement is TRUE or FALSE.
TRUE FALSE
10. On a layer, you can only arrange the stacking order of items that are grouped.
TRUE FALSE
11. Each frame on the timeline plays for one second
TRUE FALSE
12. Objects can only be added to keyframes.
TRUE FALSE
13. A blank keyframe copies the content from the previous keyframe.
/4
Match the term to its definition
14. frames per second A. A gallery of stored objects
15. group B. The number of frames played per second
16. library C To combine multiple items to form one object
.
/3
Answer the questions.
17. If the frames per second is set to twelve (12. 0 fps), how many seconds will the Flash
document have played when it reaches frame number 36?
/1
18. What is the difference between Paste and Paste in Place?
/1
19. List two benefits to placing an object into the library.
/2
TOTAL: /20
32

33. TECHNOFLASH SESSION 1
SESSION 1 SKILL REVIEW: CARTOON CHALLENGE
Practice using the Drawing Tools to make a cartoon creature.
1. Open a new Flash document.
2. Draw a head using the Oval tool and then bend the shape.
Add an eye and a mouth. Group it.
HINT: Use the Selection Tool to select the head.
3. Draw the body using the Oval tool and then bend the shape. Add details such as a
different colored belly or spots. Group it. Adjust the stacking order.
4. Draw the arms using the Oval tool. Add details such as claws. Group the
oval, then copy and paste it to make two arms. Adjust the stacking order.
Use the Free Transform tool to rotate the arms.
5. Draw the legs using the Oval tool. Add details such as claws or wrinkles.
Group the oval, then copy and paste it to make two legs. Adjust the
stacking order. Use the Free Transform tool to rotate the legs.
6. Double click on the head to open the editing pane. Add some more
details such as spikes, ears, or nose. Return to Scene 1.
7. Save the document as creature.
33

34. APPENDICES
SESSION 1 EXTENSION ACTIVITY: FLIP AND ALIGN OBJECTS
Below are instructions for flipping objects horizontally and vertically, as well as aligning them on
the stage or to one another. Try it!
How to Flip an Object
You may want to flip an object to have it face in the other direction. This is easy to do.
1. Open a new Flash document OR open the saved space adventure file.
2. Draw an object and group it, if using a new document
OR select the frame with the alien (Frame 36), if using the space adventure file.
3. Select the object to be flipped.
4. From the Modify menu, select Transform. From the menu options select either, Flip Vertical
or Flip Horizontal.
How to Align an Object to the Stage
You can align objects on the stage. For example, perhaps you want an object in the center of
the stage.
1. Select an object you want to center on the stage.
2. From the Modify menu, select Align. Click To Stage.
3. From the Modify menu, select Align again. Align the object in the middle of the stage, from
the left and right sides, by clicking, Horizontal Center.
4. From the Modify menu, select Align again. This time, align the object in the center of the
stage, from the top to the bottom, by clicking, Vertical Center.
How to Align Objects to Each Other
You can also align objects to each other. For example, perhaps you want the text and the alien
to be centered to each other.
1. This time instead of using the menu, you will use the Align panel. From the Window menu,
select Align. Notice how all the options for aligning objects are shown as buttons.
34

35. TECHNOFLASH SESSION 1
2. Click OFF the To stage: option, by clicking on the button once.
3. Draw another object and group it, if using a new document,
OR IGNORE THIS STEP if using the space adventure file.
4. Select two objects (such as the text and alien) if using the space adventure file. To do this,
hold the SHIFT key, and click on each object.
5. Experiment with the alignment options in the panel to discover what they do. Record in the
space below what each button does:
a)
b)
c)
d)
e)
f)
35