10/30/2017 Meeting 3

1st Quarter

MOVING, BENDING, AND RESHAPING OBJECTS

OVERVIEW
IT'S ANYBODY'S BALL GAME
Creating a Bouncing Ball Animation Difficulty Level: 

Total Time: 

15 minutes

25 minutes
40 MINUTES

SITUATION: 
You are working as an animator at a website design company. One of your
clients is a basketball team member. Your supervisor asked you to create a
bouncing ball animation to be used as an element in the website. The sample
output of the activity is It'sAnybody'sBallGame.swf

TARGET SKILLS: 
► Creating Frame-by-Frame Animation
► Inserting Blank Keyframes
► Using the Selection Tool
► Clearing Keyframes

OBJECTIVES: 
► Learn the use of Selection Tool
► Insert/ clear keyframes
► Insert/ delete frames

VALUES INTEGRATION: 
► Including a personal touch to your project so that clients would appreciate it more.

Downloads:
It'sAnybody'sBallGame.swf

MOTIVATE
Motivation Title:
IT’S ANYBODY’S BALL GAME CREATING A BOUNCING BALL ANIMATION
Motivation Description:
Total Time: 5 minutes

1 Before starting the activity, be ready with the Flip book Animation to be presented in class

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-3 1/6
10/30/2017 Meeting 3
2 Ask the class to stay in their seats because today they are going to watch a video about flip book
animation

3 Explain the definition of a flip book animation to the class

4 Show them Flip Book Animation.flv

5 Begin with today's discussion

TEACH
Teaching Tips:
Teaching shortcuts in this lesson is not required but it is very helpful and time-saving. Instead of
going through a series of mouse button clicks, the student can just presses key/s on the keyboard.

Lecture:
Like films, Adobe Flash documents divide lengths of time into frames. In the Timeline, you work with
these frames to organize and control the content of your document. You place frames in the Timeline
in the order you want the objects in the frames to appear in your finished content.

SELECTION TOOL
Whenever you want to modify an object, you first have to select it. You can select objects with the
pointer(also known as the Selection tool), Subselection tool, and Lasso tools. You can group individual
objects in order to manipulate them as a single object. When you select objects or strokes, they are
highlighted with a marquee.
The Selection tool in Adobe Flash Professional enables you to select entire objects by clicking an
object or dragging to enclose the object within a rectangular selection marquee.

KEYFRAME
A keyframe is a frame where a new symbol instance appears in the Timeline. A keyframe can also be
a frame that includes ActionScript® code to control some aspect of your document. You can also add
a blank keyframe to the Timeline as a placeholder for symbols you plan to add later or to explicitly
leave the frame blank.

FRAME
Frames are used to organize and control the content of your document.

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

FRAME BY FRAME ANIMATION

Frame-by-frame animation changes the contents of the Stage in every frame and is best suited to
complex animation in which an image changes in every frame instead of simply moving across the
Stage. Frame-by-frame animation increases file size more rapidly than tweened animation. In frame-
by-frame animation, Flash stores the values for each complete frame.

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

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

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-3 3/6
10/30/2017 Meeting 3
document, create new kinds of document or
create a document using a pre-built
template. Click on ActionScript 3.0 under
the Create New column.

3 Draw a ball. Draw a ball using the oval tool

found in the shape tool. Put it in the center
of the stage and make it look like a real
ball.

4 Add a frame on the 25th space in the

timeline. To add a frame, click on an empty
space in the timeline (located at the bottom
of the flash environment, below the
stage)then click Insert > Timeline > Frame
Shortcut: click on an empty space in the
timeline then press F5.

5 Add keyframes from the 1st to the 25th

space in the timeline. To add a keyframe,
click on an empty space in the timeline
(located at the bottom of the flash
environment, below the stage)then click
Insert > Timeline > Keyframe Shortcut:
click on an empty space in the timeline then
press F6. To add numerous keyframes at
once. Highlight a range of empty space in
the timeline then press F6.

6 Move the position of the ball per keyframe

to imitate a bouncing ball motion. Notice
that the circle is at the same position for
every keyframe. To change this, go to each
keyframe and change the position of the
circle by clicking the selection tool and
selecting the whole circle (outline and fill)
and dragging it across the stage.

7 Play to see changes in the position of the

circle. Notice that under the timeline there
are a series of buttons: go to first frame,
step back one frame, play, step forward one
frame and go to last frame. Press play to

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-3 4/6
10/30/2017 Meeting 3
see changes in the position of the circle.
Shortcut: Press Enter.

8 Save and publish your file. Shortcut for

save: Ctrl + S Shortcut for publish: Ctrl +
Enter

8.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.

Rubrics:

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

EVALUATE
Objective Test :
It's Anybody's Ball Game - Objective Test.pdf
Performance Test Updated:
rocket.fla
It's Anybody's Ball Game - Performance Test.doc

Performance Test:
It's Anybody's Ball Game - Performance Test.doc
rocket.fla

http://technokids.ph/t-lib/print/flash/1st-quarter/meeting-3 6/6