10/30/2017 Meeting 2

1st Quarter

DRAWING SHAPES
USING FLASH TOOLS

OVERVIEW
BACK TO THE FUTURE
Creating Your Own Robot Difficulty Level: 

Total Time: 

10 minutes

30 minutes
40 MINUTES

SITUATION: 
You just watched the film Wall-E and you instantly became a fan of robots.
You are amazed by how Wall-E was made to the point that you yourself want
to create your very own robot.

TARGET SKILLS: 
► Drawing Using Shapes Tool
► Choosing Fill Color and Stroke
► Changing Stroke Size and Shapes Options

OBJECTIVES: 
► Draw an image using the Shapes Tool.
► Fill an object with the appropriate color.
► Change the Stroke color and size.

VALUES INTEGRATION: 
► Eagerness to create something creative from simple shapes and colors.

Downloads:
BackToTheFuture.fla

MOTIVATE
Motivation Title:
ART ATTACK Piecing strips of paper together
Motivation Description:
TOTAL TIME: 7 minutes

1 Have the students cut out at least 10 shapes on colored paper as an assignment. Let the students
bring extra strips of colored paper, scissors and some glue

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 1/8
10/30/2017 Meeting 2
2 Ask the students to think of a certain object that is possible to create with the shapes that they
have cut. Examples of the objects can be cars, pyramids, robots, or something from their
imagination. (Do not limit to real life objects and tools)

3 Have the students create the object by putting together the cut out shapes. If materials become
insufficient, cutting of more pieces of the particular shape is allowed

4 The student should use their creativity in doing this project. The student with the best output at the
end of the time will be given a prize

5 Explain to the students that the connection of the game to the lesson is that the students are to
create objects using the cut out pieces of paper. The basics of the Flash shapes involve Ovals,
Rectangles, Polygons and Lines. To allow the students to learn firsthand, they are given the chance to
create something themselves from any shape they desire. Fill color is not possible as it takes too
much time in real life and overwriting color with another color in life results in disastrous results. The
teacher can explain the effect of adding another color to an already predefined color

TEACH
Teaching Tips:
There are a lot of small topics to be covered in this lesson. But all of them is not that hard or
complex. Do not overwhelm your students by teaching them all at once, wait until they are ready to
proceed to the next tool and properties.

Lecture:
Knowing Flash is knowing how to make optimal use of your toolbars. The most important of which is
the drawing toolbar. This toolbar is located on your extreme right. It has options like line, oval, brush,
eraser, etc along with their various modifiers. The letter in the open and close parenthesis when you
hover over the tools is the shortcut key for each tool.

SHAPES TOOL
The Shape Tools include the Rectangle Tool, Oval Tool, Rectangle Primitive Tool, Oval Primitive Tool
and the Polystar Tool. Adobe uses the word Primitive to mean shapes which characteristics can be
edited via the Property Inspector. This means that you can draw a rectangle and then decide to
change the roundness of the corners etc.

STROKE COLOR AND FILL COLOR

You can specify the stroke and fill color of graphic objects and shapes using either the Stroke Color
and Fill Color controls in the Tools panel, or the Stroke Color and Fill Color controls in the Property
inspector.

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 2/8
10/30/2017 Meeting 2

STROKE SIZE
Just below the stoke color and fill color, you can see the stroke size. You can specify the stroke size
depending on the thickness of the stroke that you want and stroke style depending on your
preference.

SHAPES OPTIONS
Different shapes have different options. Shapes options are used to modify whatever shape you drew
to further specify what you want to happen.

For the rectangle and rectangle primitive options, you can modify the rectangle corner ratio. This
option can make the corners of your rectangle rounder.
For the oval and oval primitive options, you can modify the start angle, end angle and end radius.
This option can define the angles and inner radius of your circle.
For the polystar options, you can find the options under tool settings. In here, you will find the style,
number of sides and the star point size.

LEARN
S T EP S : 
1 Open Adobe Flash. Click on Start ► All
Programs ► Adobe Flash. This will open
Adobe Flash.

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 3/8
10/30/2017 Meeting 2

1.2 Double – click the Adobe Flash shortcut icon

on the desktop if you have it there.

2 Create a new file. After opening Adobe

Flash, you will see a starting page wherein
you can choose to open a recently edited
document, create new kinds of document or
create a document using a pre-built
template. Click on ActionScript 2.0 under
the Create New column.

3 Select rectangle tool using shapes tool.

After you’ve created a new file, click on the
shape tool then click on the Rectangle Tool.
Once you’ve clicked on the rectangle tool,
your working environment should look like
the one on the right.

4 Draw a square in the middle of the stage.

This will serve as the body of Wall-E. Once
you’ve clicked the rectangle tool, draw a
rectangle by clicking and dragging it on the
stage. The size of the rectangle depends on
how much you drag the cursor.

5 Change the fill color of Wall-E's body to

orange. To change the fill color, double -
click the rectangle that you drew earlier
using the selection tool and look to the right
of the stage. You will see the properties of
that rectangle shape. The 2 little rectangles
under the fill and stroke are the stroke color
and fill color respectively. Click on the little
rectangle on the right and choose from the
available colors or by inputting the color
code on the upper left of the color palette.

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 4/8
10/30/2017 Meeting 2
Change Wall-E’s body fill to the color orange
(color code #FF6600).

6 Change the outline of Wall-E’s body to grey.

To change the stroke color, double - click
the rectangle that you drew earlier using
the selection tool to select the whole
rectangle. (fill and outline). Looking at the 2
little rectangles under the fill and stroke,
the left rectangle would allow you to change
the stroke color. This can be changed by
clicking on the little rectangle and choosing
from the available colors or by inputting the
color code on the upper left of the color
palette. Change Wall-E’s body outline to the
color grey (color code #666666).

7 Draw a small rectangle on top of the

square. Click on the rectangle tool agin and
draw a small rectangle on top of Wal-E’s
body. This will serve as the neck of Wall-E.

8 Click the oval tool from the shape tool. Click

on the shape tool then click on the Oval
Tool. Once you’ve clicked on the oval tool,
your working environment should look like
the one on the right.

9 Draw two circles on top of Wall-E’s neck.

Once you’ve clicked the oval tool, draw a
circle by clicking and dragging it on the
stage. The size of the circle depends on how
much you drag the cursor. These circles will
serve as his eyes.

10 Draw a smaller circle inside one of the eyes

of Wall-E. this will serve as his pupil. Do the
same for the other eye. Click the oval tool
from the shape tool and draw a smaller
circle inside one of Wall-E’s eyes. These will
serve as his feet. Do the same for the other
eye.

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 5/8
10/30/2017 Meeting 2

11 Draw two rectangles on either side of Wall-

E’s body. Click the rectangle tool again from
the shape tool and draw two rectangles on
either side of Wall-E’s body. These will serve
as his arms.

12 Draw Wall-E’s hands with the rectangle

corner radius set to 5. Click on the
rectangle tool again and you will see the
rectangle option under the fill and stroke. It
is included in rectangle options. As
mentioned earlier, different shapes have
different options. For the rectangle tool, you
can edit the rectangle corner radius which
will allow you to make the corners of the
rectangle rounder.

12.2 To edit the rectangle corner radius, click on

the text input and enter a number that you
like. Change the rectangle corner radius to
5 and draw two smaller rectangles on Wall-
E’s arm. This will serve as his hand. Do the
same for the other arm.

13 Change the stroke size. To change the

stroke size, double - click the rectangle that
you drew earlier to select the whole
rectangle. (fill and outline). Stroke size is
still included in fill and stroke. It is located
under the 2 little rectangles corresponding
the stroke color and fill color. Stroke size
can be changed by clicking and dragging on
the slider beside the text “Stroke: ”. you
can also edit the stroke size by clicking on
the text input beside the slider and
inputting the desired stroke size. Double-
click Wall-E’s hands and change the stroke
size to 3.00.

14 Change the stroke style To change the

stroke style, double - click the rectangle
that you drew earlier to select the whole
rectangle. (fill and outline). Stroke style is
still included in fill and stroke. It is located
under the slider corresponding the stroke
size. Stroke style can be changed by
clicking the drop-down menu beside the
text “Style: ” and choosing from the
available stroke styles. Double-click Wall-E’s
hands and change the stroke style to
stippled.

15 Draw two rectangles on the bottom of Wall-

E’s body. Click on the rectangle tool again

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 6/8
10/30/2017 Meeting 2
from the shape tool and draw two
rectangles at the bottom of Wall-E’s body.
These will serve as his feet.

16 Change the fill color of Wall-E's eyes, pupil,

hands and feet. Change Wall-E’s pupil fill to
the color blue (color code #0000FF).
Change Wall-E’s eyes fill to the color darker
grey (color code #333333). Change Wall-E’s
hands and feet fill to the color grey (color
code #999999).

17 Save and publish your work. Shortcut for

save: Ctrl + S Shortcut for publish: F12.

17.2 Publishing your file will cause your file to

play on loop. This is not a bug. This is ust
how flash play it by default unless you add
codes to it. But if you do not have any
animation on your file, like in this activity,
then it will just be static.

Rubrics:

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 7/8
10/30/2017 Meeting 2

EVALUATE
Objective Test :
Back to the Future - Objective Test.pdf
Performance Test Updated:
Back to the Future - Performance Test.doc

Performance Test:
Back to the Future - Performance Test.doc

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-2 8/8