Mr.

Giansante

Flash CS4
Animations

April 2010
Table of Contents
Learning Outcomes ......................................................................3
NETS Standards for Students ......................................................4 PRINTING
Introduction ...................................................................................5
Adobe TV - Learning Flash CS4 ..................................................6 Please consider the
environment before printing
Flash CS3 Reference Sheet .........................................................7
anything from this document.

Tutorials Pages that need to be printed

are marked with a printer icon.
Tutorial 1 - Motion Tweens ...........................................................9
Tutorial 2 - Shape Tweens .........................................................10
Tutorial 3 - Color Tweens ...........................................................10
Adding Sound .............................................................................11

Storyboards and Animation

Animating Character Motion .......................................................12

Storyboards ................................................................................13
Storyboard Example ...................................................................14
Storyboard Template ..................................................................15

Assignments

Assignment - Pong .....................................................................16

Assignment - Letters of your Name ............................................17
Assignment - Twenty Second Movie ..........................................18
Assignment - Greeting Card .......................................................19
Major Assignment - Two Minute Movie ......................................20
Major Assignment - Marking Sheet ............................................21

Mr. Giansante Flash Animation - Table of Contents

Learning Outcomes
The student will ...

General Outcomes

 Demonstrate proper care of all computer equipment

 Demonstrate positive attitudes and work habits
 Demonstrate interpersonal and organizational skills
 Demonstrate Problem Solving Skills
 Make Productive Use of Time
 Demonstrate independence skills and only seek help when necessary

Flash™ Outcomes

 Distinguish between Flash™ and JavaScript and Animated GIFs

 Storyboard a multimedia project effectively
 Learn the parts of the Flash™ Design Environment (Stage, Timeline, etc.)
 Learn about the Timeline (Frames and Keyframes)
 Learn about Layers
 Create and Modify objects using basic shapes
 Import graphics from other programs
 Manipulate objects on the stage
(including selecting, moving, copying, deleting and transforming them)
 Create motion along a straight line
 Create motion along a path
 Grow or Shrink Objects or Text
 Fading In or Fade Out Objects or Text
 Import and Play Music and Sound Effects
 Integrate a finished movie into a website using HTML

Mr. Giansante Flash Animation - Page 3

NETS Standards for Students
National Educational Technology Standards (NETS•S)
and Performance Indicators for Students
"What students should know and be able to do to learn effectively
and live productively in an increasingly digital world ..."

1. Creativity and Innovation

Students demonstrate creative thinking, construct knowledge, and develop
innovative products and processes using technology. Students:
a. apply existing knowledge to generate new ideas, products, or processes.
b. create original works as a means of personal or group expression.
c. use models and simulations to explore complex systems and issues.
d. identify trends and forecast possibilities.

2. Communication and Collaboration

Students use digital media and environments to communicate and work
collaboratively, including at a distance,
to support individual learning and contribute to the learning of others. Students:

a. interact, collaborate, and publish with peers, experts, or others employing a variety of digital environments and media.
b. communicate information and ideas effectively to multiple audiences using a variety of media and formats.
c. develop cultural understanding and global awareness by engaging with learners of other cultures.
d. contribute to project teams to produce original works or solve problems.

3. Research and Information Fluency

Students apply digital tools to gather, evaluate, and use information. Students:

a. plan strategies to guide inquiry.

b. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media.
c. evaluate and select information sources and digital tools based on the appropriateness to specific tasks.
d. process data and report results.

4. Critical Thinking, Problem Solving, and Decision Making

Students use critical thinking skills to plan and conduct research, manage projects, solve problems, and make informed
decisions using appropriate digital tools and resources. Students:

a. identify and define authentic problems and significant questions for investigation.
b. plan and manage activities to develop a solution or complete a project.
c. collect and analyze data to identify solutions and/or make informed decisions.
d. use multiple processes and diverse perspectives to explore alternative solutions.

5. Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students:
a. advocate and practice safe, legal, and responsible use of information and technology.
b. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity.
c. demonstrate personal responsibility for lifelong learning.
d. exhibit leadership for digital citizenship.

6. Technology Operations and Concepts

Students demonstrate a sound understanding of technology concepts, systems, and operations. Students:
a. understand and use technology systems.
b. select and use applications effectively and productively.
c. troubleshoot systems and applications.
d. transfer current knowledge to learning of new technologies.

© 2007 International Society for Technology in Education.

ISTE® is a registered trademark of the
International Society for Technology in Education.

Mr. Giansante Flash Animation - Page 4

Introduction
Adobe Flash is a multimedia authoring program.

Since its introduction in 1996, Flash has become a popular NOTE

method for adding animation and interactivity to web pages.
Different Versions
Flash is commonly used to create animation, games,
advertisements, and various web page components, to Flash projects created in one
integrate video into web pages, and more recently, to version of Flash often are
develop rich Internet applications. incompatible with other
versions.
Flash contains a scripting language called ActionScript.
In the computer lab, we use
Flash as a format has become very widespread on the Flash CS4 (the latest version).
desktop market and created a market dominance. Adobe
claims that 98 percent of US Web users and 99.3 percent of Other locations in the school
all Internet desktop users have the Flash Player installed,with (such as the library) have older
45% to 56% (depending on region) having the latest version. versions such as Flash MX.
(Source: wikipedia.org)
Flash CS4 projects cannot be
opened in Flash MX.

Flash File Types

FLA - Flash Movie Authoring File

The actual FLA file does not play or execute, instead these
files contain source material for the Flash application and
once complete, are then compiled in to the .swf file format.

SWF - Shockwave Flash Format

Files in the SWF format (pronounced "swiff"), traditionally

called "ShockWave Flash" movies, "Flash movies" or "Flash
games", usually have a .swf file extension and may be an
object of a web page, strictly "played" in a standalone Flash
Player, or incorporated into a Projector, a self-executing
Flash movie.

FLV - Flash Video

Flash Video (FLV) files have a .flv file extension and are
either used from within .swf files or played through a flv
aware player.

Mr. Giansante Flash Animation - Page 5

Adobe TV - Learn Flash CS4
Go to Adobe TV and view the following video tutorials.

http://tv.adobe.com/show/learn-flash-professional-cs4/

Getting Started: 01 - Understanding Flash

Getting Started: 02 - Understanding Flash file types
Getting Started: 03 - Exploring the Flash interface
Getting Started: 04 - Setting up workspaces
Getting Started: 05 - Using the drawing tools
Getting Started: 06 - Object and merge drawing
Getting Started: 07 - Understanding symbols
Getting Started: 08 - Working with bitmap graphics
Getting Started: 09 - Working with sound
Getting Started: 10 - Working with video
Getting Started: 11 - Understanding tweens
Getting Started: 12 - Creating shape tweens
Getting Started: 13 - Creating motion tweens
Getting Started: 14 - Using the Motion Editor
Getting Started: 15 - Working with motion presets
Getting Started: 16 - Animating bones
Getting Started: 17 - ActionScript 3.0
Introducing Flash CS4 Professional
Creating Motion Tweens: Part 1
Creating Motion Tweens: Part 2
Using Motion Presets
Using the Motion Editor

Adobe TV also has a series dedicated to ActionScript 3.0

http://tv.adobe.com/show/actionscript-11-with-doug-winnie/

VIDEOS
The website for this course
contains several video tutorials.
Be sure to view them.
NOTE
The website for this course
contains complete Flash CS4
documentation as well as
documentation on ActionScript.

Mr. Giansante Flash Animation - Page 6

Flash CS3 Reference Sheet

Mr. Giansante Flash Animation - Page 7

Flash CS3 Reference Sheet

Mr. Giansante Flash Animation - Page 8

Tutorial 1 - Motion Tweens
Click and hold on the "Rectangle" Tool

From the choices, select "Oval" Tool

From the "Fill Color" palette, select a color.

Draw the oval on the stage.

Note: To get a perfectly round circle, hold
down the [SHIFT] key as you draw the oval.

Right-click on the circle.

Choose "Convert to Symbol ..."

Right-click on the circle.

Choose "Create Motion Tween"

Flash will automatically insert 1 second of

frames for the tween (if your frame rate is set
to 24 fps, then it will insert 24 frames).

Using the black selection tool, drag the circle

to the ending position of the desired animation

When you release the mouse button, the

motion tween will be created.

Note the path and the "dots" on the line

indication each frame.

To change the path, click on any of the dots

and drag them to a new location.

To make the animation longer or shorter, you

can stretch the layer in the timeline. To do
this, position the mouse pointer over the last
frame. The mouse pointer will change to a
double-headed arrow. Now you can drag to
the left or right.

Press [ENTER] to view your animation.

Mr. Giansante Flash Animation - Page 9

Tutorial 2 - Shape Tweens
Shape Tweens can be used to grow or shrink a symbol.

By clicking on a frame in the timeline, you can see the position of the circle at that frame.

You can right-click on the object and select "Free Transform".

By changing the size of the object, you can create a shape tween.

Tutorial 3 - Color Tweens

Color Tweens can be used to Fading In, Fade
Out, and Change Colors.

To do a color tween on a symbol, select the

frame in the timeline where you want the
tween to happen.

Click on the circle symbol.

From the "Properties" panel, select

"Color Effect".

Choose a Style.

Example. To make an object fade into a black

background, you could change its
"Brightness" to 0%

To have an object fade into the background

(regardless of the color), change its "Alpha"
level to 0%

Mr. Giansante Flash Animation - Page 10

Adding Sound
1. Importing the Sound to the Library
You place sound files into Flash by importing them into the library of the current document.

To import the sound file, select File | Import | Import to Library...

Navigate to the directory that contains the sound file.

Double-click on the file.

The sound file will now appear in Library.

To view the contents of the Library, select

Window | Library, or press [F11].

2. Placing the Sound in the Timeline

Note: Although you can place multiple sounds on one layer or on layers containing other objects, it
is recommended that each sound be placed on a separate layer.

Select Insert > Timeline > Layer

With the new sound layer selected, drag the sound from the Library panel onto the Stage.
The sound will be added to the current layer.

To specify when the sound starts, you can drag the first frame containing the sound to a different
location on the timeline. Note: This can be a bit tricky since sometimes you end up highlighting
frames in the timeline instead of dragging.

3. Adjusting Sound Properties

In the Timeline, select the first frame that contains the sound file.

Select Window | Properties, and click the arrow in the lower-right

corner to expand the Property inspector.

You can select an effect option (such as "Fade In" or

"Fade Out") from the Effects pop-up menu.

You can test the sound by using [CTRL][ENTER].

Mr. Giansante Flash Animation - Page 11

Animating Character Motion

Source: J. Foley
www.erain.com

Mr. Giansante Flash Animation - Page 12

Storyboards
A storyboard can be loosely defined as a visual script. That visual script is a sort of comic strip,
based on a written script. A good storyboard clearly and explicitly explains what happens in a film
(for instance), where it happens, and how it happens.

Storyboard Example
A scene from "Moon Escape", by Josh Sheppard

Mr. Giansante Flash Animation - Page 13

Storyboard Example
The storyboard example on the previous page was produced by professional designer. Such results
are very time-consuming and require specialized drawing skills. For the purposes of this class, you
should use the storyboard template on the following page and the results should look something like
the example below.

Mr. Giansante Flash Animation - Page 14

Title: Page _____ of _____

by: Date:

_________________________________________________ _________________________________________________

_________________________________________________ _________________________________________________

_________________________________________________ _________________________________________________

_________________________________________________ _________________________________________________

_________________________________________________ _________________________________________________

_________________________________________________ _________________________________________________

Mr. Giansante
Lincoln High School Flash Animations Mark (10)
Mr. Giansante
Pong
Please fill out all the information in this column Academic Honesty
using a pen before getting this assignment marked.
The work I am submitting is completely my own creation
and has not been copied from anyone else's work. If I
have received help on this project, the names of those
_____________________________________________ who have assisted are listed below.
Name

_____________________________________________ _____________________________________________
Date Signature

 Computer Science
_________  Computer Applications
Block

Assignment Description Production 3 Marks

Create a 10 to 15 second Flash movie simulating the  Minimum length requirement met
video game "Pong".  Indicative of amount of allotted

Your movie should use motion tweens.

The score should change when a player scores.

View the sample animation named "Pong.swf"

on the course website.

Animation
4 Marks
 Motion Tweens
 Motion Tweens with Path
 Realistically Timed
 Smooth Animation

Special Effects 3 Marks

 Fading and/or Color Effects
 Size Tween (Shrinking / Growing)
 Rotation
Lincoln High School Flash Animations Mark (10)
Mr. Giansante
Letters of Your Name
Please fill out all the information in this column Academic Honesty
using a pen before getting this assignment marked.
The work I am submitting is completely my own creation
and has not been copied from anyone else's work. If I
have received help on this project, the names of those
_____________________________________________ who have assisted are listed below.
Name

_____________________________________________ _____________________________________________
Date Signature

 Computer Science
_________  Computer Applications
Block

Assignment Description Production 3 Marks

Create a 10 to 15 second Flash movie showing the  Minimum length requirement met
letters of your name moving around and then forming  Indicative of amount of allotted
your name.

Your movie should include (minimum) ...

 Minimum of 6 letters
 Motion Tweens
 Motion Tweens with Path
 Rotation
 Shrinking / Growing
 Fading In / Fading Out Animation
4 Marks
View the sample animation named "Lincoln Letters.swf"  Motion Tweens
on the course website.  Motion Tweens with Path
 Realistically Timed
 Smooth Animation

Special Effects 3 Marks

 Fading and/or Color Effects
 Size Tween (Shrinking / Growing)
 Rotation
Lincoln High School Flash Animations Mark (20)
Mr. Giansante
20 Second Movie
Please fill out all the information in this column Academic Honesty
using a pen before getting this assignment marked.
The work I am submitting is completely my own creation
and has not been copied from anyone else's work. If I
have received help on this project, the names of those
_____________________________________________ who have assisted are listed below.
Name

_____________________________________________ _____________________________________________
Date Signature

 Computer Science
_________  Computer Applications
Block

Assignment Description Pre-Production 2 Marks

Create a 20 second Flash movie.  Storyboard was turned in

 Storyboard was complete and accurate
Your movie should include (minimum) ...

 Background
 Several moving objects Production 4 Marks
 Motion Tweens
 Motion Tweens with Path  Minimum length requirement met
 Rotation  Indicative of amount of allotted
 Shrinking / Growing
 Fading In / Fading Out

Example: Animation
6 Marks
 House with road in front, several trees and sky  Motion Tweens
 Airplane flies across sky  Motion Tweens with Path
 Car drives down road and onto driveway  Realistically Timed
 Car door opens  Smooth Animation
 Man gets out and walks to front door
 Sun goes down causing sky to fade from blue to black
 Moon moves across sky

You must submit a 1 or 2 page storyboard before Special Effects 4 Marks

starting this assignment.
 Fading and/or Color Effects
 Size Tween (Shrinking / Growing)
 Rotation

Originality of Work
4 Marks
 Original Artwork
 Original Backgrounds
 Original Objects (people, cars, etc.)
Lincoln High School Flash Animations Mark (20)
Mr. Giansante
Greeting Card
Please fill out all the information in this column Academic Honesty
using a pen before getting this assignment marked.
The work I am submitting is completely my own creation
and has not been copied from anyone else's work. If I
have received help on this project, the names of those
_____________________________________________ who have assisted are listed below.
Name

_____________________________________________ _____________________________________________
Date Signature

 Computer Science
_________  Computer Applications
Block

Assignment Description Pre-Production 2 Marks

Create a 15 to 30 second "Greeting Card" using Flash.  Storyboard was turned in

 Storyboard was complete and accurate
Your card should include (minimum) ...

 Background
 Several moving objects Production 4 Marks
 Motion Tweens
 Motion Tweens with Path  Minimum length requirement met
 Rotation  Indicative of amount of allotted
 Shrinking / Growing
 Fading In / Fading Out
 Sound / Music
Animation
You must submit a 1 or 2 page storyboard before 6 Marks
starting this assignment.  Motion Tweens
 Motion Tweens with Path
 Realistically Timed
 Smooth Animation

Special Effects 4 Marks

 Fading and/or Color Effects

 Size Tween (Shrinking / Growing)
 Rotation
 Sound / Music

Originality of Work 4 Marks

 Original Artwork
 Original Backgrounds
 Original Objects (people, cars, etc.)
Major Assignment - Two Minute Movie
Create a two minute Flash movie.
Your movie should include (minimum) ...
 Opening or Closing credits with
movie title, your name, etc.
 A coherent storyline and plot
 Several Scenes
 Motion Tweens
 Rotation
 Fading In / Fading Out
 Background Music
 Custom-made Sound Effects
 Recorded Voice
 All graphics and sounds must be original
You must submit a 4 to 10 page storyboard
for approval before starting this project.
This is a Major Assignment
 You will have roughly six weeks to
complete it.
 Marks will be indicative of effort, time
spent and quality of the finished product.
 Students are expected to try to exceed the
"minimum" requirements listed above.
 Higher marks will be awarded to students
who make their movies interactive.
Mr. Giansante
Content
Make sure you avoid ...
 References to alcohol and drugs
 Scenes involving or related to sex
 Scenes involving or related to violence
 Scenes that could be hurtful to others
in the class
Examples of Good Student Work
View the following sample animations on the
course website.
 Falling (by Joe St. James)
 Sumozilla (by Philip Olsson)
 Zombie Attack II (by Joe Miller)
Film Festival
At the end of this unit we will be having
a film festival where everyone will get to
"show off" their movie. A prize will be
awarded for the Best Movie.
Flash Animation - Page 20
Lincoln High School Flash Animations Mark (100)
Mr. Giansante
Two Minute Movie
Title of Movie 5 Marks
Pre-Production

 Storyboard was turned in

 Storyboard was complete and accurate

Please fill out all the information in this column
using a pen before getting this assignment marked.
_____________________________________________
Name
_____________________________________________
Date
Production 20 Marks
 Opening / Closing Credits with
Title, Name of Student, etc.
 Minimum of two minutes in length
 Coherent storyline and plot
 Multiple scenes / backgrounds
 Indicative of amount of time allotted

 Computer Science Special Effects 25 Marks

_________  Computer Applications
Block  Fading and/or Color Effects
 Size Tween (Shrinking / Growing)
 Rotation
Academic Honesty

The work I am submitting is completely my own creation

and has not been copied from anyone else's work. If I
have received help on this project, the names of those
who have assisted are listed below. Animation
25 Marks
 Motion Tweens
 Motion Tweens with Path
 Realistically Timed
_____________________________________________  Smooth Animation
Signature

Sound and Music 10 Marks

 Background Music
 Sound Effects (pre-recorded)
 Sound Effects (custom-made)
 Recorded Voice
Teacher Comments

Originality of Work
15 Marks
 Original Artwork
 Original Backgrounds
 Original Objects (people, cars, etc.)
 Original Sound Effects and Voice
 Original Storyline and Plot