Você está na página 1de 44

SESSION 1

Out of this World


In this session, students are introduced to Flash CS5. 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 Flash to learn about the program environment. Once familiar with the
components, they practice drawing using the tools in the Tools Panel. They
then learn how to manipulate images by scaling, skewing, and rotating. 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: Working with Shapes
Assignment 4: About the Timeline
Assignment 5: Create Scene 1 In a Land Far Far Away

Session 1 Review: About Flash
Session 1 Skill Review: Cartoon Challenge
Session 1 Extension Activity: Flip and Align Objects


To order: http://www.technokids.com/Store/Senior-Projects/TechnoFlash/TechnoFlash-Page1.aspx
This is an excerpt from the TechnoFlash Teacher Guide.
To learn more about TechnoFlash, click here or go to: http://www.technokids.com/computer-curriculum/senior/animation-for-beginners.aspx



TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-1
Session 1: Out of this World
Getting Started
Overview
In this session, students are introduced to Flash CS5. 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 Flash to learn about the program environment. Once familiar with the components,
they practice drawing using the tools in the Tools Panel. They then learn how to manipulate images by
scaling, skewing, and rotating. With these skills mastered, they apply their knowledge of the drawing tools
to create the first scene in a space adventure.

Materials
Flash CS5
Flash Flashcards (optional)
o Tools Panel
o Timeline Area
o Layer Area
Flash Folder
o Out of this World sample
Session 1 Review: About Flash
Session 1 Skill Review: Cartoon Challenge
o Creature.swf sample


Teacher Preparation
(Refer to the Preparing to Teach section of this guide for instructions)
Make the Flash folder available to students.
Determine a location for students to save their work during this project.
(Optional) Print the flashcards listed in the materials list for this session.

Teaching Strategy
In this project, students become animators. Explain scenario to students.

In this project, you assume the role of an animator. By learning how to use the program Flash
Professional CS5, you will be able to make objects move across a stage. By combining different
types of animation including frame by frame, motion tweens, shape tweens, and motion paths,
you will make a story come to life.


TECHNOFLASH

1-2 TECHNOKIDS INC.
In this session, students learn how to use the drawing tools to create the introductory scene to a space
adventure movie. Explain scenario to students.

To be able to use Flash CS5, it is essential that you understand the components of the program window,
as well as how to use the tools to draw objects. To help you gain an understanding of the types of
animation you can create using Flash you will view the sample story, Out of this World. Afterwards, you
will learn how to use the most common drawing tools to make objects. Once confident with these
tools, you will use them to create the first scene of an animated space adventure.


Assignment 1 What is Animation?

In this assignment, students are introduced to animation. To start, they learn about the history of animation
and the benefits to using the computer. Afterwards, they study how the Flash program can be used to
create animations. They then watch a sample movie clip of space adventure and identify the various types
of animation contained within the clip. This movie is a model of the type of animated story students will
create in Sessions 1-6.

New terminology:
Animation: Animation is a series of drawings that show action.


Assignment 2 Introduction to Flash

In this assignment, students are introduced to the Flash environment by labeling the parts of the program
window, including the property inspector, stage, layers, tools panel, menu bar, edit bar, Library panel, and
Timeline. It may be a good idea to do this activity together. Have each student open up the Flash program
and point to each part. Afterwards, discuss the similarities between the Flash program and other programs
student are familiar with. For example, the Timeline is similar to the Timeline in Windows Movie Maker; the
drawing tools are similar to those in Microsoft Paint; the panels are similar to Microsoft PowerPoint.

Next, students explore the function of many of the tools in the Tools Panel. For some of the tools there are
additional options available in both the Tool Options tray and Property Inspector. Encourage students to
experiment.


Assignment 3 Working with Shapes

In this assignment, students learn how to group objects and adjust the stacking order. They learn these skills
by making a simple race car. Afterwards, they select a drawing challenge of either a bear or a chick.
Once your students have mastered the drawing tools, encourage them to make their own creations.

Common problem:
Entering the Edit Pane if students double click on a GROUPED object, it opens into an editing pane. If this
happens, click on the Scene Name to return to the stage.

TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-3
Assignment 4 About the Timeline

In this assignment, students read to learn about the Timeline. The following terminology is introduced:

Static Animation Images with no movement that are displayed in a sequence.
Playhead Red bar that shows the current frame and moves from left to right when the project
plays.
Timeline The area below the stage that consists of layers and frames. It is used to organize the
document by controlling when the content appears over time.
Timeline Header Runs along the top of the Timeline and displays the frame numbers.
Layer A row in a Timeline that divides the stage into levels to create different animations that play
at the same time.
Frame A box that holds a single picture in a strip of animation.
Frame Rate - The number of frames that will play in one second.
Keyframe A frame added to the Timeline that copies the content from the previous frames.
Blank Keyframe A frame added to the Timeline that does not copy the content of the previous
frames, and instead is empty.
Scene A section of a document that has its own stage and Timeline. It is used to organize the
content of the document into parts.
Library A gallery used to store symbols such as graphics or movie clips. The stored items can be
added to the document repeatedly.
Paste in Place An editing feature that pastes an object in exactly the same place on the stage as
the original copied item.

Assignment 5 Create Scene 1 In a Land Far Far Away

In this assignment, students make the first scene in their animated space adventure. This scene will consist
of some basic drawings and text. Using static animation, images will appear on the stage, and then
disappear, to be replaced with a new image.

This assignment contains many basic skills. It is advisable to do this assignment together and model each of
the steps.




About Assessment:

A customizable marking sheet is available in the Session 6 folder to assess the Out of this World movie. You
may wish to review this document.




TECHNOFLASH

1-4 TECHNOKIDS INC.
Lesson Plan
Assignment 1 - What is Animation?
Read the information to learn about animation, the benefits of using the computer to make
animations, and the benefits of using the Flash program to make animations.
Watch an animated story and identify the different types of animation used. Discuss the elements
of the story and the ways it can be improved.

Assignment 2 - Introduction to Flash
Label the parts of the Flash program window.
Consider how the Flash program window is similar to other known programs.
Label the parts of the Tools Panel.
Draw shapes including a line, oval, circle, rectangle, and square. For each shape select options
such as stroke color, stroke width, stroke style, and fill color.
Use the Selection Tool to move the shape, bend the line, and change the corner point.
Use the Free Transform Tool to scale, skew, and rotate an object.
Edit the stroke color with the Ink Bottle Tool and the fill color using the Paint Bucket Tool.
Clear the stage using the Selection Tool.
Draw a smiley face with spiked hair using the Pencil Tool.
Draw a worm using the Brush Tool.
Edit a drawing using the Eraser Tool. Experiment with the tools in the Tool Options.
Type your name using the Text Tool. Customize the font, size, and color of the letters.
Discover how to use tools in the Tools Panel including: Subselection Tool, Lasso Tool, Pen Tool, Spray
Brush Tool, Deco Tool, Hand Tool, and Zoom Tool.
Practice using the tools in the Tools Panel.
Close Flash.

Assignment 3 - Working with Shapes
Open Flash. Follow the instructions to make a car:
o Draw the car body using a Rectangle tool.
o Add a tire using the Oval tool and then copy the shape to make two tires.
o Draw the top of the car away from the body. Adjust the stacking order to send it to the
back of the car.
o Edit a grouped object by placing a racing stripe onto the car body.
o Upon completion, group all the car parts together.
o Practice drawing using grouped shapes. Select either the bear or duck to draw.
Close Flash.

TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-5
Assignment 4 - About the Timeline
Open Flash. Study the parts of the Timeline including the playhead, layer, Timeline header, current
frame indicator, frame rate indicator, and frame.
Read to learn about frames. Identify the frame number.
Read to learn about frames per second. Calculate the number of seconds a document will play
based on 24.00 fps.
Read to learn about keyframes and blank keyframes. Draw a picture of the keyframe in the
Timeline.
Read to learn about layers. Record the name of the layer in the Timeline.
Read to learn about scenes.
Close Flash.

Assignment 5 - Create Scene 1 In a Land Far Far Away
Open Flash.
Use the Text tool to add the text: In a land far far away. Draw a picture of outer space. Notice the
change to the Timeline.
Insert a blank keyframe in Frame 72, and then view the story using the ENTER key.
In Frame 72, use the Text Tool to add the text: there lived an alien that longed for adventure. Draw
an alien and add the object to the Library.
Insert the alien from the Library. Change the newly added alien, by scaling, skewing, and rotating
the object. Break apart the newly added alien, and ungroup it. Edit the fill color using the Paint
Bucket tool. When finished, delete the newly added alien.
Insert a blank keyframe in Frame 144. In Frame 144, use the Text tool to add the text: He decided to
leave his planet to explore the galaxy. This is his story.
Copy an object from Frame 1 into Frame 144 using Paste in Place.
Test the movie by viewing it in the Preview pane. Notice the problem areas.
Close the Preview pane. Correct the problem by inserting a blank keyframe onto the Timeline to
cause the text to be on the screen longer.
Edit the story by inserting or removing frames to adjust the time the words are on the screen.
Save the file as space.
Close Flash.



TECHNOFLASH

1-6 TECHNOKIDS INC.
Learning Objectives
Students should be able to complete each learning objective independently.

Content Knowledge:
define animation
understand the history of animation and how the computer has changed how animation is created
understand how the Flash program can be used to create animation
list the benefits of using the computer to create animation
label the parts of the Flash window
label the parts of the Tools Panel
label the parts of the Timeline: playhead, layer, Timeline header, current frame indicator, frame rate
indicator, and frame

Technical Skills:

Operating Environment
open and close a program
save a document

Animation
identify a frame by its number
calculate the length of time animation will play based on the frames per second
identify the name of the layer
insert a blank keyframe
add content to a blank keyframe
convert a symbol into the Library
add a symbol from the Library onto the stage
play a document using the ENTER key
test a movie in the Preview pane
select, insert, and remove frames

Graphics
draw a line, oval, and rectangle
select the stroke color, width, style, and fill color from the Property Inspector
move, bend, and reshape an object using the Selection tool
transform an object by rotating, skewing, or scaling it using the Free Transform tool
select a stroke and fill color using the Stroke Color Control and Fill Color Control
fill an object with color using the Paint Bucket tool
fill the stroke of an object with color using the Ink Bottle tool
clear the stage using the Selection tool and the DELETE key
delete an object from the stage using the DELETE key
draw freehand using the Pencil or Brush tools
change the Pencil type by making a selection from the Tool Options
select the brush size and shape from the Tool Options
adjust the paint mode to fill different areas with color using the Brush tool
erase a drawing using the Eraser tool and its options
add words using the Text tool
format the text by adjusting the font, font size, and font color in the Property Inspector
edit the individual points of a shape using the Subselection tool
select a portion of the stage using the Lasso tool
draw a polygon or zigzag shape using the Pen tool
spray paint on the stage using the Spray Brush Tool
draw preset patterns on the stage using the Deco Tool
move the stage within the window using the Hand tool
increase or decrease the size of magnification with the Zoom tool
copy and paste an object
paste an object in the same position as the copied image using Paste in Place
modify the appearance of a grouped object in the editing pane
modify the stacking order of objects
group together multiple objects
group together the stroke and fill of an object
break apart an object
ungroup an object

Applied Technology
view a movie clip and label the types of animation
draw objects using tools in the Tools Panel
create a scene that contains static animation
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-7
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. Then they 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 1960s 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:
Can create animations quickly, Can make animations appear life-like,
Can create animations cost-effectively, Software makes it easy to create objects,
Do not need to be a computer expert or professional artist to make animations


Using Flash to Make Animations
Flash CS5 is a program that can be used to create animations. Flash animations are used most often on the
Internet. This is because they can be complex but still have small file sizes, making it easy for people to view.
Flash animation is used to create online games, electronic greeting cards, information videos, electronic
advertisements, splash pages for company websites, or fancy navigation buttons. 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.
TECHNOFLASH

1-8 TECHNOKIDS INC.
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 an 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. 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. (Ask your teacher how to do this.)
Double click the Out of this World file to watch the animated story.


Scene 1 Scene 2 Scene 3 Scene 4 Scene 5
Static Animation Frame by Frame Frame by Frame Motion Tween Motion Tween



Scene 6 Scene 7 Scene 8 Scene 9 Scene 10
Shape Tween Shape Tween Bone Tool
Classic Tween with
Motion Path
Classic Tween with
Motion Path


2. What did you like about the animation "Out of this World"?




3. What would you add to this story to make it even better?






Close the file.


TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-9
Assignment 2: Introduction to Flash


Open the Flash Program
Open the Flash program.
From the File menu, click New. Select ActionScript 3.0 and then click OK.

Label the Parts of the Flash Window
1. Label the parts of the Flash window.

Property Inspector Stage Layers Tools Panel

Menu Bar Edit Bar Library Panel Timeline






Your window may look slightly different. If you are missing some of the parts, click on the Window menu. Click the Toolbar
option and select Edit Bar. Place a checkmark beside Timeline, Tools, and Library.

NOTE: The options are slightly different for earlier versions of the program.
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.
Stage
Library
Panel
Tools
Panel
Menu Bar
Layers Timeline
Edit Bar
Property
Inspector
TECHNOFLASH

1-10 TECHNOKIDS INC.
Parts of the Flash Window

Part Description
Menu Bar A bar at the top of the window. It lists menu options including File, Edit, View,
Insert, Modify, Text, Commands, Control, Debug, Window, and Help
Stage The stage is the white area in the center of the window. It is where Flash movies
are created.
Timeline The Timeline is typically at the bottom of the window. It is an 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.
Layers Layers are part of the Timeline. They divide the stage into levels. The layers
section has tools to show, lock, or unlock layers, as well as display layer contents
as outlines. 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.
Tools Panel The tools panel is a vertical bar that holds a collection of drawing tools used to
create and customize objects on the stage.
Property Inspector A panel that when active displays options for the selected tool.
Library Panel The Library panel stores the media elements and symbols for a project. Use this
panel to insert, delete, or rename items in the Library.
Edit Bar A bar that contains commonly used program options to edit the stage such as
changing the scene currently displayed, selecting a symbol, and adjusting the
magnification.


TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-11
Parts of the Tools Panel




2. The Tools Panel includes everything you need to create, select, or edit graphics on the Stage. It is
divided into six parts. Read the descriptions and then label the diagram.




I know that you want to animate something, and you will.
However, before you can start making objects move you need to
know to draw objects. As you experiment with the tools in the
Tools Panel, you will notice how similar they are to most paint
programs. It is likely that if you have drawn before using the
computer you will find it a "flash" to learn the Flash drawing tools.
Parts of the Tools Panel:

Selection Tools: Tools used to select
an area on the canvas and modify
the selection.
Drawing and Text Tools: Tool used to
draw and paint lines, shapes, and
text.
Color Tools: Tools used to add
bones, fill an area, copy a color, or
erase a mistake.
Navigation Tools: Tools used to
move or magnify an area.
Stroke and Fill Color Selectors: Tools
used to select an outline or fill color.
Tool Options: A tray that displays
options for the selected tool.
Color Tools
Selection Tools
Drawing and Text Tools
Navigation Tools
Stroke and Fill Color Selectors
Tool Options
A tool that has a
black arrow will
display a fly out
menu of tools.
TECHNOFLASH

1-12 TECHNOKIDS INC.
Get to Know the Tools
Some tools have a tiny arrow in the right corner.
If you click on the arrow, a fly out menu appears displaying more tools.

The tools in the Tools panel are not "sticky". In most programs, the tools are
"stuck" in the same spot. This makes them easy to find.

However, in Flash the tools in the Tools Panel change. If you select a tool
from the fly out menu, it replaces the current tool in view. This can be
frustrating when you are just learning the program, because it takes some
time to get used to the location of the tools.

3. Find the Oval Tool. List two other tools in the fly out menu.

Rectangle Tool, Oval Tool, Rectangle Primitive Tool, Oval Primitive Tool, PolyStar Tool
TIP: Click tools with a black arrow to find the Oval Tool.


4. Find the Spray Brush Tool. List the other tool in the fly out menu.

Brush Tool
TIP: Click tools with a black arrow to find the Spray Brush Tool.


About Object Drawing Mode
In Flash when you draw objects you must set the Object Drawing mode. This option is at the bottom of the
Tools Panel when you select a drawing tool.


If Object Drawing mode is turned OFF:
The stroke and fill color of a shape is separate.
Parts of the shape can be selected and then deleted or edited.
If you have many objects on the stage it can be difficult to select and move a desired shape,
because other objects will become selected as well.
If you layer an object over top of another, they will merge together.
If you double click on the object you will select it.

If the Object Drawing mode is turned ON:
The stroke and fill color are grouped.
When you click the shape the entire object is selected. If you press DELETE or edit the shape the
entire object is affected.
If you have many objects on the stage it is easy to select and move a desired shape, without
affecting other objects.
If you layer an object over top of another, they will remain separate.
If you double click on the object it will open in the Editing Pane.
Answer the questions to help you learn the location of the tools.
ON OFF
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-13
Draw a Line
Click the Properties tab to ensure it is active.

Click to select the Line tool.
Look at the Property Inspector. Notice how it now offers a series of Line tool options. Set the
appearance of the line by selecting a stroke color, width, and style.

Draw a Line with Object Drawing Mode OFF
At the bottom of the Tools Panel, find Object Drawing.
Make sure that it is TURNED OFF!
Now click and drag the cursor across the Stage to draw a line.
Click the Selection Tool.
Click and drag to draw a small box around part of the line to select a segment.

Press DELETE to remove PART of the line.



Draw a Line with Object Drawing Mode ON
Click to select the Line tool.
At the bottom of the Tools Panel, find Object Drawing.
Make sure that it is TURNED ON!
Now click and drag the cursor across the Stage to draw a line.
Click the Selection Tool.
TRY to click and drag to draw a small box around part of the line to select a segment. YOU CAN NOT!
Click on the line ONCE.
Press DELETE to remove the ENTIRE line.

The Property Inspector
changes each time you
select a tool.
Stroke color
Stroke style
Stroke width
ON OFF
ON OFF
TIP: 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, click Scene 1 to return to the stage.
TECHNOFLASH

1-14 TECHNOKIDS INC.
Draw a Rectangle and a Square
Click the Rectangle Tool.
- Look at the Property Inspector. Notice the options now include a Fill Color option.
Change the rectangle appearance by selecting a stroke color, width, style and fill color.

Draw a Shape with Object Drawing Mode OFF
At the bottom of the Tools Panel, find Object Drawing.
Make sure that it is TURNED OFF!
Now click and drag the cursor across the Stage to draw a rectangle in a blank area.
Click the Selection Tool.
Click and drag to draw a small box around part of the shape to select a chunk.
Press DELETE to remove the chunk from the shape.
Click on a line segment.
Click and drag to separate it from the shape.
Double click inside the shape to select BOTH the stroke and fill.
Press DELETE to remove the shape.


Draw a Shape with the Drawing Mode ON
Click the Rectangle Tool.
At the bottom of the Tools Panel, find Object Drawing.
Make sure that it is TURNED ON!
Now click and drag across the stage to draw a rectangle.
The rectangle is selected. Press ESC on the keyboard to deselect the shape.
Choose a new fill color in the Property Inspector.
(If the rectangle changes color it is still selected. Press CTRL + Z to undo the change. Press ESC to deselect the
shape)
Press and hold the SHIFT key. Now click and drag again to draw a square in a blank area.
Fill Color
ON OFF
ON OFF
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-15
Draw an Oval and a Circle
Click and hold the mouse on the Rectangle Tool.
Choose the Oval Tool from the fly-out menu.
- Look at the Property Inspector.
It shows the same properties as the Rectangle Tool.
At the bottom of the Tools Panel, find Object Drawing. Make sure that it is TURNED ON!
Now click and drag across the stage to draw an oval in a blank area.
The oval is selected. Press ESC on the keyboard to deselect the shape.
Choose a new fill color.
(If the oval changes color it is still selected. Press CTRL + Z to undo the change. Press ESC to deselect the shape)
Press and hold the SHIFT key. Now click and drag again to draw a circle.

Use the Selection Tool to Move, Bend, and Reshape
Click the Selection Tool.
Move the Line
Click on the line. Rest the mouse pointer over the LINE.
The mouse pointer changes to a Move Shape pointer. This is used to MOVE the object.
Click and drag to move the line on the Stage.

Click off the line.
MAKE SURE THAT THE LINE IS NOT SELECTED.

Bend 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.
Click and drag to bend the line.

Change the End Point
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.

5. Use the Selection Tool to change the appearance of each shape by bending it and moving the end
points or corner(s). Can you make a triangle from the rectangle? How did you do it?

Click on the corner point of the rectangle and drag it into the opposite corner of the

shape.
TECHNOFLASH

1-16 TECHNOKIDS INC.
Use the Free Transform Tool to Scale, Skew, and Rotate

Click on the circle to select it on the Stage.
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 of a Shape

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 Control.
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 Control.
Select the Paint Bucket Tool.
Now click on the fill of a shape.

The Flash program lets you scale, skew,
and rotate a selection. Try it!
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.
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-17
Clear the Stage

Click the Selection Tool.
Rest the mouse pointer in the upper right corner of the stage. It will change to a Marquee
Select pointer.
Click and drag to draw a dotted box around all the items on the stage. Once all of the objects are
selected, click DELETE on the keyboard.

Draw Freehand using the Pencil or Brush Tool

Draw with the Pencil
Click the Pencil Tool.
Look at the Property Inspector. It looks just like the Line Tool options. Set the appearance of the Pencil
line by selecting a stroke color, width, and style.

At the bottom of the Tools Panel, find Object Drawing.
Make sure that it is TURNED OFF!
- Now you need to pick a Drawing Option. Look at the Tool Options at the bottom of
the Tools Panel.
Click on the Pencil Mode arrow to choose a drawing mode: Straighten, Smooth, or Ink.

Use the pencil to draw a smiley face and give him spiked hair.
The stage is full with all of the objects you have
drawn. It is time to clear the stage.
You are now going to experiment with the Pencil and Brush Tools. The
Pencil is used to draw LINES. The Brush is used to paint FILLS.
Stroke color
Stroke style
Stroke width
ON OFF
TECHNOFLASH

1-18 TECHNOKIDS INC.
Paint with the Brush
Click on the Brush Tool.
Look at the Property Inspector. It only has the fill option. Pick a color.

Look at the Tool Options in the Tools Panel. Pick a brush size and shape.

Click the Paint Mode tool in the Tool Options.

6. List the 5 types of Paint Modes.

Paint Normal, Paint Fills, Paint Behind, Paint Selection, Paint Inside



7. Which Paint Mode will paint only fills?

Paint Fills

8. Which Paint Mode will paint only an area that is selected?

Paint Selection


From the Paint Mode options, select Paint Normal.
Draw a worm.





Fill color
Brush size
Brush shape
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-19
Edit a Drawing Using the Eraser Tool

Click the Eraser Tool.
Click Eraser Mode from the Tool Options in the Tools Panel.

9. List the 5 types of Eraser Modes.

Erase Normal, Erase Fills, Erase Lines, Erase Selected Fills, or Erase Inside



10. Which Eraser Mode will erase only lines?

Erase Lines

11. Which Eraser Mode will erase only fills?

Erase Fills

Select Erase Normal from the Eraser Modes.
Click Eraser Shape from the Tool Options in the Tools Panel.
Select a shape from the list.
Click and drag over part of the WORM to erase part of it.

Click the Faucet from the Tool Options in the Tools Panel.
Click on a WORM part to erase it.
Click the Faucet again to turn it OFF.

12. Which method of erasing do you prefer, the Eraser Mode or Faucet?





From the Edit menu, click Select All. Press DELETE on the keyboard to erase the stage.

The eraser has many options. This makes it easy to remove unwanted
sections of a drawing. Experiment with using the Eraser Tool.
TECHNOFLASH

1-20 TECHNOKIDS INC.
Add Text

Click on the Text Tool.
Look at the Property Inspector. 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.

Click and drag the mouse across the Stage to draw a text box.
Type Student Name.
To change the look of your name, select the text inside the text box. Now make a new selection from
the Property Inspector.

Click on the text box.
Click the Free Transform Tool.
Rest the mouse pointer over a corner of the text box. The mouse pointer changes to a two-
way arrow. Click and drag to change the text box.
Rest the mouse pointer over the line of the text box. The mouse pointer changes to a double
line. Click and drag upwards or downwards to skew the shape.
Rest the mouse pointer above the corner of the text box. The mouse pointer changes to a
round arrow. Click and drag the mouse in a circular motion to rotate the text box.

You are now going to add your name to the Stage using the
Text Tool. You will notice that it is very similar to most paint
programs.
You can scale, skew, and rotate text.
Font
Font size
Font color
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-21
What Do These Tools Do?

Use your skills to draw a flower.
step 1 Draw the center of the flower using the Oval tool:
a. Select the Oval Tool. Tip: The Oval Tool is on the Rectangle fly out menu.
b. Turn the Object Drawing option OFF.


Why turn Object Drawing mode OFF?

When you draw many objects with Object Drawing mode ON the shapes stack on top of
each other. This means that you need to set the object order to arrange them properly.
Since this is a skill you do not have yet, it is better to turn Object Drawing mode OFF when
making the flower.

As well, when Object Drawing mode is ON the objects are separate. This means that they
do not merge together. Often when you are drawing an item you will want to create an
outline and then fill each section with color. When Object Drawing mode is OFF, the lines
will merge together making it easy to fill areas that were drawn separately.

c. From the Property Inspector, select the stroke color and width. Select the fill color.
d. Draw a small circle.
e. Press ESC to deselect the shape.


step 2 Draw the petals of the flower using the Pencil tool:
a. Select the Pencil Tool.
b. Turn the Object Drawing option OFF.


Why turn Object Drawing mode OFF?

The line of the petals will merge with the center of the flower. This makes it easy to fill an
area with color.

c. From the Property Inspector, select the stroke color and width. Select the fill color.
d. Draw petals.

e. Click the Fill Color selector. Select a color.
f. Click the Paint Bucket.
g. Fill each petal with color.


TIP: If the petals will not fill with color, click the Gap Size option at the bottom of the Tools
Panel. Select Close Large Gaps.




The tools you have learned so far are the ones you will most likely use when you
are drawing. However, the Tools Panel has several other tools. See if you can find
out what they do. Draw a flower using the tools you have just learned. Then
experiment with more Flash tools to discover their function.
TECHNOFLASH

1-22 TECHNOKIDS INC.
13. Edit the picture using each the tools to discover their function.

a)

Subselection Edit the individual points of a shape.


b)

Lasso Select a part of the Stage by drawing freehand around the area.


c)

Pen Draw by clicking on the Stage to add points that form a series of lines.


d)

Spray Brush Tool Spray paint on the Stage.


Tip: This tool is in the
Brush Tool fly out menu.



e)

Deco Tool Draw preset patterns on the Stage.


f)

Hand Move the Stage within the window.


g)

Zoom Increase or decrease the magnification of the Stage.




Experiment with the Drawing Tools and then Exit Flash

Have some fun drawing with the tools in the Flash Toolbox.
The more you practice the better you will become at
making objects in this program. When you are done, exit
the program.
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-23
Assignment 3: Working with Shapes


Open the Flash Program
Open the Flash program.
From the File menu, click New.
Select ActionScript 3.0 and then click OK.

Draw a Car and Group Together the Pieces
Draw the Car Body and Tire
Select the Rectangle Tool.
Turn the Object Drawing option ON.
This will automatically group the fill and stroke together.
Draw the body of the car using the Rectangle Tool.
Click the Selection Tool.
Click on the Stage to make sure that the shape is NOT SELECTED.
Rest the mouse pointer over the center of the outline.
When it changes to a Line Shape pointer, click and drag to bend the outline.

Select the Oval Tool.
TIP: The Oval Tool is on the Rectangle fly out menu.
Turn the Object Drawing option ON.
Click and drag to draw a car tire.

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 with Object Drawing mode turned ON.
ON OFF
TECHNOFLASH

1-24 TECHNOKIDS INC.
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 in Center.
Click the Selection Tool.
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.

Select the Rectangle Tool. TIP: The Rectangle Tool is on the Oval fly out menu.
Turn the Object Drawing option ON.
Away from the car, draw a rectangle to act as the top of the car.
Click the Selection Tool.
Move the car top into position.
- It is in front of the car body.

Right click on the rectangle car top. From the Arrange menu, select Send to Back.
TIP: You can also select object order options from the Modify menu. Click Modify Arrange Send to Back.


TIP: A dotted guideline
appears to help you align
the tire.
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-25
Edit a Grouped Object
When drawing lines and shapes you can turn Object Drawing mode ON or OFF. If it is ON, the stroke and fill
color of a shape are grouped. If you want to edit a grouped shape you must use the Editing Pane. The
Editing Pane is a separate window that opens when the grouped shape is double clicked. Any changes
made to the shape become part of the grouped object. There are several reasons you would want to edit
shapes in the Editing Pane:
Focus on One Item: The Editing Pane displays the grouped object to be edited with all other
elements on the stage dimmed. This makes it easy to focus on the grouped object to be changed.
Automatically Grouped: Any changes to the grouped object in the Editing Pane are automatically
combined together when the Editing Pane is closed.

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.

Use the Pencil Tool to draw a racing stripe across the car body.
When finished, click the Scene 1 button to return to the stage.


Click OK if a warning message appears that states Drawing Objects can only contain shapes. This
object will be automatically converted to a Group.
- The racing stripe is now part of the grouped object.

Group all the Car Parts and then Ungroup the Object
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 the car parts are all selected, click the Modify menu. Select Group.
- 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.
Select the car. Click the Modify menu. Select Ungroup.
The Editing pane lets you edit
an object. All changes to the
object are automatically
grouped.
TECHNOFLASH

1-26 TECHNOKIDS INC.
Practice Drawing using Grouped Objects

Challenge One: Draw a Bear

1. Draw the head using the Oval tool:
a. Select the Oval Tool. Tip: The Oval Tool is on the Rectangle fly out menu.
b. Turn the Object Drawing option ON.
c. From the Property Inspector, select the stroke color and width. Select the fill color.
d. Draw the head of the bear.
e. Click the Selection Tool. Click anywhere on the stage to DESELECT the head.
f. Rest the mouse over the head. Bend the oval.

2. Draw the ears using the Oval tool:

a. Select the Oval Tool.
b. Turn the Object Drawing option ON.
c. Draw an ear.
d. Select the ear. Right click the mouse. Select Arrange and click Send to Back.
e. Select the ear. From the Edit menu, click Copy.
f. From the Edit menu, click Paste in Center.
g. Click the Selection Tool. Click and drag the ear to the correct place.
h. Select the ear. Right click the mouse. Select Arrange and click Send to Back.

3. Draw the body using the Oval tool:

a. Select the Oval Tool.
b. Turn the Object Drawing option ON.
c. Draw the body of the bear.
d. Click the Selection Tool. Click anywhere on the stage to DESELECT the body.
e. Rest the mouse over the body. Bend the oval.
f. Select the body. Right click the mouse. Select Arrange and click Send to Back.

4. Draw the arms using the Oval tool:

a. Select the Oval Tool.
b. Turn the Object Drawing option ON.
c. Draw an oval. Bend the shape to make an arm.
d. Select the arm. Right click the mouse. Select Arrange and click Send to Back.
e. Click the Free Transform Tool. Rotate the arm.
f. Select the arm. From the Edit menu, click Copy.
g. From the Edit menu, click Paste in Center.
h. Click the Selection Tool. Click and drag the arm to the correct place.
i. Select the arm. Right click the mouse. Select Arrange and click Send to Back.
j. Click the Free Transform Tool. Rotate the arm.

It is a good idea to practice drawing objects using grouped shapes. There are
two drawing challenges. Clear the canvas. Now pick a drawing challenge. Try to
draw it using the tools in the Tools Panel.
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-27
5. Draw the legs using the Oval tool:

a. Select the Oval Tool.
b. Turn the Object Drawing option ON.
c. Draw an oval. Bend the shape to make a leg.
d. Select the leg. Right click the mouse. Select Arrange and click Send to Back.
e. Click the Free Transform Tool. Rotate the leg.
f. Select the leg. From the Edit menu, click Copy.
g. From the Edit menu, click Paste in Center.
h. Click the Selection Tool. Click and drag the leg to the correct place.
i. Select the leg. Right click the mouse. Select Arrange and click Send to Back.
j. Click the Free Transform Tool. Rotate the leg.
6. Draw a face:

a. Double click on the head to open the editing pane.
b. Click the Zoom Tool.
c. Click Enlarge from the Tool Options. Click on the face to zoom in.
d. Click the Brush Tool or Pencil Tool .
e. Select tool options.
f. Draw eyes, nose, and mouth.

g. Click Scene 1 to return to the Stage.
h. Click the Zoom Tool.
i. Click Reduce from the Tool Options. Click on the face to zoom out.

TIP: To see the Stage, select 100% from the Zoom tool on the Edit Bar.

When you draw the bear as grouped objects you can animate the body parts. For
example, you can make the arm wave.

7. Save the file.
a. Click the File menu. Select Save.
b. Locate students folder. Type bear in the File name box. Click Save.

Challenge Two: Draw a Chick

1. Draw the head using the Oval tool:
a. Select the Oval Tool. Tip: The Oval Tools is on the Rectangle fly out menu.
b. Turn the Object Drawing option ON.
c. Draw the head of the chick.

2. Draw the beak using the Rectangle tool:
a. Select the Rectangle Tool. Tip: The Rectangle Tools is on the Oval fly out menu.
b. Turn the Object Drawing option ON.

c. Draw a small rectangle.
d. Click the Selection Tool. Click anywhere on the stage to DESELECT the beak.
e. Rest the mouse over a corner. Drag the corner inwards to form a triangle.
f. Click the Free Transform Tool. Rotate the beak. Position it on the head.

Can you draw a chick? Follow the instructions to
use the tools in the Tools Panel.
TECHNOFLASH

1-28 TECHNOKIDS INC.
3. Draw the body using the Oval tool:

a. Select the Oval Tool.
b. Turn the Object Drawing option ON.
c. Draw the body of the chick.
d. Click the Selection Tool. Click anywhere on the stage to DESELECT the body.
e. Rest the mouse over the body. Bend the oval.
f. Select the body. Right click the mouse. Select Arrange and click Send to Back.

4. Draw the wings using the Oval tool:

a. Select the Oval Tool.
b. Turn the Object Drawing option ON.
c. Draw a wing.
d. Click the Free Transform Tool. Rotate the wing. Position it over the body.
e. Select the wing. From the Edit menu, click Copy.
f. From the Edit menu, click Paste in Center.
g. Click the Selection Tool. Click and drag the wing to the correct place.
h. Select the wing. Right click the mouse. Select Arrange and click Send to Back.
i. Click the Free Transform Tool. Rotate the wing.
5. Draw the legs using the Oval tool:

a. Select the Pencil Tool.
b. Turn the Object Drawing option ON.
c. Away from the chick, draw a leg.
d. Click the Selection Tool. Click and drag a box around the leg to select the parts.
e. Click the Modify menu. Click Group.
f. Drag the leg to the correct location.
g. Select the leg. From the Edit menu, click Copy.
h. From the Edit menu, click Paste in Center.
i. Click the Selection Tool. Click and drag the leg to the correct place.
j. Select the leg. Right click the mouse. Select Arrange and click Send to Back.

6. Draw a face:

a. Double click on the head to open the editing pane.
b. Click the Zoom Tool.
c. Click Enlarge from the tool options. Click on the face to zoom in.
d. Click the Brush Tool or Pencil Tool . Select tool options.
e. Draw eyes.

f. Click Scene 1 to return to the Stage.
g. Click the Zoom Tool.
h. Click Reduce from the tool options. Click on the face to zoom out.

TIP: To see the Stage, select 100% from the Zoom tool on the Edit Bar.

When you draw the chick as grouped objects you can animate the body parts. For
example, you can make the wings flap.
7. Save the file.
a. Click the File menu. Select Save.
b. Locate students folder. Type chick in the File name box. Click Save.

Exit Flash
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-29
Assignment 4: About the Timeline

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.

Open the Flash Program
Open the Flash program.
From the File menu, click New.
Select ActionScript 3.0 and then click OK.

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.


















About Frames
The Timeline is made up of numbers with boxes. Each box is a frame. A frame holds a single picture in a strip
of animation. The numbers in the Timeline header tell the frame number. These can be used as a guide to
help 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 d? 9



A Playhead: red bar that shows the current frame
and moves from left to right when the project
plays
C Layer: row in the Timeline that divides the stage
into levels to create different animations that
play at the same time
B Timeline Header: shows the frame numbers

E Current Frame Indicator: indicator that displays
the number of the selected frame
F Frame Rate Indicator: indicator that sets the
speed or frames per second (fps) at which the
animation plays
D Frame: box that holds a single picture in a strip
of animation
e. Current Frame Indicator f. Frame Rate indicator
a. Playhead
b. Timeline Header
d. Frame c. Layer
TECHNOFLASH

1-30 TECHNOKIDS INC.
About the Frame Rate
A default Flash document shows twenty four frames per second (24.00 fps), this is called the frame rate.
24.00 fps means in one second you will watch the animation from twenty four 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. At twenty four
frames per second, the text would need to be on the screen for 72 frames.

3. If the frames per second is set to twenty four (24. 00 fps), how many seconds will the
Flash document have played when it reaches frame number 48? 2 seconds


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.


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 happening 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. Look at the Timeline. What is the name of the layer? Layer 1


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?

Scene 1

Exit Flash
keyframe
HINT: The scene number is
displayed above the stage.
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-31
Assignment 5: Create Scene 1 In a Land Far Far Away

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 72.
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 144.
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. From the File menu, click New.
Select ActionScript 3.0 and then click OK.

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 tools in the Tools Panel to draw a scene of outer space.



Hints:
Use a gradient fill to make the planets. There are
several options at the bottom of the palette.
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.
TECHNOFLASH

1-32 TECHNOKIDS INC.
Draw the Second Still Picture in Frame 72: 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 72. This will
cause the first picture you drew to show on the screen for 71 frames. After
that, it will no longer be displayed because a new picture on frame 72 will be
seen.
Right click on Frame 72, and from the menu select Insert Blank
Keyframe.
Notice how the Timeline has changed. The frames in between frame 1 and frame 71 are gray. Frame 71
has a white box. This indicates that the contents of frame 1 will stop being displayed after this frame. Frame
72 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.


There Lived an Alien
In Frame 72, use the Text tool to add:

there lived an alien that longed for adventure.
Use the tools in the Tools Panel to draw an alien. Make
sure it is filled with color.





Playhead
Current Frame
Indicator
Hints:
Draw shapes and then bend them to
create an alien.
Add details to the alien. If Object
Drawing mode was turned on you will
need to double click on a shape to
open the editing pane. Now add the
details. When finished, click Scene 1 to
return to the stage.
Press ENTER inside the text box to make
the words appear on two 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.
Copy and paste a shape to make arms
or legs quickly.
To flip a shape, from the Modify menu,
select Transform. Click Flip Horizontal.
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-33
Add a Picture to the Library as a Graphic Symbol
When you draw an object, it can be saved in the Library as a symbol. 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
Click the Selection Tool. Click and drag to draw a box around the alien to
select the entire object.
To group the alien, from the Modify menu, select Group.
Right click on the alien and from the menu select Convert to Symbol.
Type alien in the Name box. Select Graphic in the Type box. 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 side of the window.
Click on the alien symbol under the Name heading and drag it onto the
stage.


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.

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.
Select the newly added alien. From the Modify menu, click Break Apart.
With the new alien selected from the Modify menu click Ungroup.
IMPORTANT
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.
TECHNOFLASH

1-34 TECHNOKIDS INC.
You can now use the Fill Color and Paint Bucket Tool to change the color of the objects.
Use the Brush Tool to add polka dots to the new alien.

NOTE: If you added detail to an object in the editing pane, you can only make edits in the editing pane.
To do this, double click on an ungrouped object that you would like to edit. It will open in the
editing pane. Click on the stage to deselect the object. Select a color and then use the Paint
Bucket Tool to fill an area with color or use the Brush Tool to draw polka dots. When finished, click
Scene 1 to return to the stage.

- 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 newly added alien to select it. Press DELETE on the keyboard.

Draw the Third Still Picture in Frame 144: 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 144. 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 144 will be
seen.
Click frame number 144. From the Insert menu, select Timeline and choose Blank Keyframe.
Notice how the Timeline has changed again.


Add Text to Describe the Story
In Frame 144, use the Text Tool to add the text:

He decided to leave his planet to explore the galaxy. This is his story.


TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-35
Copy an Object from Frame 1 to the Same Place in Frame 144
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 144 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.

What is the Problem?
Watch your story by selecting frame 1 and pressing ENTER. Do you notice the problem?
- Maybe you cannot tell because when the playhead gets to frame 144 the animation
stops. However, there is a problem.
To find the problem, from the Control menu select Test Movie. Select Test.
- The movie opens into a preview pane and will continually loop.
1. What is the problem?

The final words and picture do not show up long enough to read.


Click the Close button on the Test window pane to exit the preview.

Solve the Problem: Insert a Blank Keyframe
The objects in frame 144 only plays 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. Remember, it takes one
second to play twenty four frames. How many seconds do you think you need to read the last bit of text?
The frame 216 will give the viewer 3 seconds to read the words.
Insert a blank keyframe on the Timeline in frame 216.


When you use Paste in Place the
object is put in the exact same
spot as the copied item.
TECHNOFLASH

1-36 TECHNOKIDS INC.
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.







For the desired picture, right click on a frame between the starting keyframe and the ending frame
(the white rectangle).
Select Insert 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, right click on a frame between the starting keyframe and the ending frame
(the white rectangle).
Select Remove Frames. Remove as many frames as necessary.

Save the Flash Document and then Exit Flash.
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.
From the File menu, select Exit.
Keyframe where picture starts to be shown.
Frame when picture stops being shown.
New keyframe and picture.
TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-37
Session 1 Review: About Flash

Label the parts of the Flash window.

Timeline stage layers tools panel







/4
Match the tool to its function.


5. B

A. Draw freehand.


6. C

B. Rotate, skew, or scale a selected object.


7. A

C. Bend a line.


8. E

D. Erase fills or lines.


9. D

E. Draw an oval.


/5
Stage
Tools
Panel
Layers Timeline
TECHNOFLASH

1-38 TECHNOKIDS INC.
Circle whether the statement is TRUE or FALSE.

10. A blank keyframe copies the content from the previous keyframe. 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 graphic can be stored as a symbol so that it can be used over and over
again.
TRUE FALSE

/4

Match the term to its definition

14.
B
frames per second A. A gallery of stored objects called symbols


15.
C
group B. The number of frames played per second


16.
A
Library C. To combine multiple items to form one object

/3

Answer the questions.

17. If the frames per second is set to twenty four (24. 0 fps), how many seconds will the Flash
document have played when it reaches frame number 120?
5 seconds
/1

18. What is the difference between Paste and Paste in Place?
Paste puts the selection onto the stage slightly below the original image. Whereas
Paste in Place puts the image onto the stage in exactly the same spot as the original
image.
/1
19. List two benefits to placing an object into the Library.
It can be used over and over again.
The object can be edited without changing the symbol in the Library.
/2




TOTAL: /20



TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-39
Session 1 Skill Review: Cartoon Challenge

Practice using the tools in the Tools Panel to make a cartoon creature.

1. Open Flash. Click the File menu and select New.
Select ActionScript 3.0 as the file type. Click OK.

2. Draw the head using the Oval tool:
a. Select the Oval Tool. Tip: The Oval Tool is on the Rectangle fly out menu.
b. Turn the Object Drawing option ON.
c. From the Property Inspector, select the stroke color and width. Select the fill color.
d. Draw the head of the cartoon character.
e. Click the Selection Tool. Click anywhere on the stage to DESELECT the head.
f. Rest the mouse over the head. Bend the oval.

3. Draw a face:

a. Double click on the head to open the editing pane.
b. Click the Zoom Tool.
c. Click Enlarge from the Tool Options. Click on the face to zoom in.
d. Click the Brush Tool or Pencil Tool . Select tool options.
e. Draw eyes, nose, and mouth.

f. Click Scene 1 to return to the Stage.
g. Click the Zoom Tool.
h. Click Reduce from the Tool Options. Click on the face to zoom out.

4. Draw the body using the Oval tool:
a. Select the Oval Tool. Turn the Object Drawing option ON.
b. Draw the body of the cartoon character.
c. Click the Selection Tool. Click anywhere on the stage to DESELECT the body.
d. Rest the mouse over the body. Bend the oval.
e. Select the body. Right click the mouse. Select Arrange and click Send to Back.

5. Draw details on the body:

a. Double click on the body to open the editing pane.
b. Click the Brush Tool or Pencil Tool .
c. Select tool options.
d. Add details such as a colored belly or spots.
e. Click Scene 1 to return to the Stage.

6. Draw the arms using the Oval tool:
a. Select the Oval Tool. Turn the Object Drawing option ON.
b. Draw an oval. Bend the shape to make an arm.

c. Double click on the arm to open the editing pane.
d. Click the Brush Tool or Pencil Tool .
e. Select tool options.
f. Add details such as claws.
g. Click Scene 1 to return to the Stage.
h. Position the arm.

TECHNOFLASH

1-40 TECHNOKIDS INC.
7. Copy and paste the arm:
a. Select the arm. From the Edit menu, click Copy.
b. From the Edit menu, click Paste in Center.
c. Click the Selection Tool. Click and drag the arm to the correct place.
d. Select the arm. Right click the mouse. Select Arrange and click Send to Back.
e. Click the Free Transform Tool. Rotate the arm.


8. Draw the legs using the Oval tool:
a. Select the Oval Tool. Turn the Object Drawing option ON.
b. Draw an oval. Bend the shape to make a leg.

c. Double click on the leg to open the editing pane.
d. Click the Brush Tool or Pencil Tool .
e. Select tool options.
f. Add details such as claws or wrinkles.
g. Click Scene 1 to return to the Stage.
h. Position the leg.

9. Copy and paste the leg:
a. Select the leg. From the Edit menu, click Copy.
b. From the Edit menu, click Paste in Center.
c. Click the Selection Tool. Click and drag the leg to the correct place.
d. Select the arm. Right click the mouse. Select Arrange and click Send to Back.
e. Click the Free Transform Tool. Rotate the leg.

10. Use your skills to add more details such as spikes, ears, or wings.

TIP: If using the Pencil or Brush Tool turn the Object Drawing option OFF.

11. Save the file as creature.

12. Exit Flash.




TECHNOFLASH SESSION 1

TECHNOKIDS INC. 1-41
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 the saved space adventure file.

2. Select the frame with the alien (Frame 72).

3. Select the alien.

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 Align 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. Select the text and alien. To do this,
hold the SHIFT key and click on each object.




2. If necessary, clear the Align to stage checkbox.



TECHNOFLASH

1-42 TECHNOKIDS INC.

3. From the Window menu, select Align. Notice how all the options for aligning objects are shown as
buttons.



4. Experiment with the alignment options in the panel to discover what they do. Record in the space
below what each button does:

a)

Align objects to the left.

b)

Align objects to the horizontal center.

c)

Align objects to the right.

d)

Align objects to the top edge.

e)

Align objects to the vertical center.

f)

Align objects to the bottom edge.




5. DO NOT SAVE THE CHANGES. Exit Flash.

Você também pode gostar