What and how?
• Flash is used to create interactive rich
media content like….
Motion graphic effects
• Animation
• Video
•
Animation
 The perception of motion as you flip through a series
of images rapidly
Flash animation – stick man
Made Easier with CS4 – Bone Tool
Examples of Flash

Drink ZZZ http://zzz.drinkzzz.com/
 Best of Flash Sites
 http://www.bestflashanimationsite.com/vote/
Sample movies
Advantages of Flash
• Flash movies load much faster.
• Flash movies allow interactivity.
• Flash movies can use more than 256
colors.
Let’s Get Started
 Go to Start and type in “flash” in the Search field
 Select “Adobe Flash CS4 Professional”
 Select “create New > Flash File (Action Script 3.0)
Classic Look (CS3 look)
 Select “Window/Workspace/Classic” Look
Flash Screen
Timeline (controls the animation on screen)
Tools (draw/paint/erase project)
Stage (work area-draw your objects
here)
Document Properties
Press this button
Document Properties
For every 1 second of
animation
There are 24 frames
Document Properties
Dimension: The size of the stage. Set to 300 x 200
Background Color: The color of the stage. Pick a light
yellow color
Frame Rate: The speed of the movie. Default is
24…frames/second. Leave the default
Save Your File
 Save your file – Saving often can help save hours of
FRUSTRATION
Tools
Selection Tool
Free Transform Tool
Lasso Tool
Pen Tool
Line Tool
Pencil Tool
Deco Tool
Bone Tool
Eyedropper Tool
Hand Tool
Sub selection Tool
3D Rotation Tool
Text Tool
Shapes Tool
Brush Tool
Paint Bucket Tool
Eraser Tool
Zoom
Stroke Outline Color
Fill Color
Using the Text Tool
 Change Fill Color to Black
 Press the Text Tool Icon
 Click near the center of your movie area, and drag a
rectangular shape.
 Enter your name or
the words "Flash MX".
 Press the Arrow Tool on the Tools panel after you entered
the words.
 You will see the Properties Panel
Properties Panel
Make the following changes:
 Set the family to Verdana.
 Set the style to bold.
 Make the size 25.
 Change the color on the text to a pale green.
Let’s Animate…Motion Tween
(Let’s pretend we’re using CS3)
TWEENING - Move an object from point A to point B
 Select the text (ARROW tool)
 Drag it to your left where it is not visible on the main
working area. In other words, ensure that the text is
moved left so that no portion of the text is visible on
the beige background:
Point A
Keyframe (right-click-- CTRL + click)
 Go to your Timeline
 The timeline is set in intervals of 5. Right click (CTRL +
click) on the vertical box below the 25 and select 'Insert
Keyframe’ (don’ forget..this is what will happen in 1
second)
Right click
Keyframe
 You will see a small black dot displayed in the box under 25.
 The box under 25 is called a Key frame.
KeyFrame
 Select (click) the keyframe on Frame 25.
 Note that the text on
your work area
has been copied and
is also selected.
Keyframe
 Select the text with your mouse cursor, and press the right
arrow to move the text to your right. I recommend you
press Shift + Right Arrow to make the text move to your
right even faster.
 Stop once the text has gone off the movie area on the
right:
Point B
Animation – Classic Tween
 Select the keyframe on Frame 1. Notice that the Flash MX
text is on the left of the window.
 Select the keyframe on Frame 25. Notice that the Flash
MX text is on the right of the window.
 There’s still no animation thought!!!!! Don’t worry…Flash's
job is to seamlessly make the text transition from the left
side of the drawing area to the right side of the drawing
area.
Animation – Classic Tween
 Select all the frames in your timeline by clicking on
Frame 1 and dragging all the way to Frame 25.
 Make sure that you are not dragging the actual keyframe
toward Frame 25. Once you have selected all the frames,
your timeline will be blackened as seen in the following
image:
Classic Tween
 Right click on any selected frame and choose 'Create
Classic Tween’
Right click
 “Scrub” the timeline to see the motion
 Position the cursor on the red square and click and move
the cursor to frame 25 and back
Save Your File (CTRL +S)
 Save your file
Publish Your File (F12)
 Go to File | Publish Preview | HTML (CMD + F12)
 You will see the animation scrolling from left to
right inside your browser. Wohoo!!
Congratulations!
 You’ve just created your first animation
Flash CS4- New Motion Model
 Not Time Line based…
Object based
 Remove the tween we just did (Right click on any
selected frame and Select REMOVE TWEEN)
 Select Frames 2-25 ( but not FRAME 1)
 Right-click to Remove frames
Flash CS4- New Motion Model
 Select the object to TWEEN (your Name)
 Right-click the object and select Create Motion Tween
 Notice FLASH has inserted enough frames based on a full
1 second interval (based on the Frame Rate: 25
frames/sec)
Click and Drag
 Click the object (your name) and drag it off the stage
 “Scrub” the timeline to see the motion
 Position the cursor on the red square and click and
move the cursor to frame 25 and back
 Wasn’t that easier??????
Spline Path
 When you add a Motion Tween Flash CS4 creates a
Spline Path
 This path can be edited with the ARROW Tool
 We’ll review this later
Adding Background and Layers
 Before you can add a background design, we need to
learn about layers.
Layers
Flash uses layers to organize various objects in an
animation.
Look at your timeline. The text that says 'Layer 1'
signifies a layer. We will be editing and adding another
layer.
Layers
 The text 'Layer 1' is just not descriptive enough for
what is actually contained on the layer: the Flash MX
text.
 Double click on the Layer 1 text to the left of the
timeline. You will notice that the text is now
selectable.
 Enter the word "text" to replace Layer 1":
Double click
Adding Background Layer
 Let’s add another layer to hold the background.
 Right click on the 'text' layer and select Insert Layer.
You will notice a layer labeled "Layer 2" is displayed
above your text layer.
 Rename that layer background by double clicking on
the Layer 2 text. The left side of your timeline should
look like the following image:
Right click
Moving Layers
 Notice that the background is above your text layer.
Layers are like floors in a building. The furniture in the
top floor is above the furniture in the bottom floor.
Similarly, the contents of the top layer will go
above the contents in a bottom layer. Because we
want to create a background, the content in the
background layer should be displayed below the text
layer.
 Click on the background layer and drag it below the
text layer. Your timeline should look as follows:
Adding a Background
 Select the first empty frame of the background layer.
 You will notice that the empty frame is selected.
Everything you add to your animation will now be on
the background layer because you just selected it by
clicking the empty frame.
Shapes Tool
Click on the Drop down arrow
Select the Oval Tool
 You will notice that your properties window reflects
the circle properties such as line color, fill color, and
more.
Stroke/Outline color
Fill color
 Objects are made up of both an outline object
(stroke) and a fill color .
Circle Properties (Stroke)
 Click the color box for the line (Stroke) of the circle
from the Properties menu. Select the no color option
from the top-right of the menu. The no-color option is
the box with a red line through it:
No color option
Stroke
Circle Properties (Fill)
 Click the fill icon on the Properties panel. From the
color menu that appears, select a white fill color. Your
Properties panel should look like the following image:
Fill
Draw Circles
 Draw circles for the background of your animation.
Click anywhere in your movie and drag. You will notice
a circle in the size and shape of your dragging is
created. Release the mouse to set the circle in place.
 Repeat this step until you have numerous randomly
sized circles dotting your movie. The following image
shows how I arranged my circles:
Save Your File
 Save your file
Publish Your File (F12)
 Go to File | Publish Preview | HTML or press
CMD + F12
Drawing a Dancing Pizza
 Open a new movie by clicking file=> new.
 Drawing the Pizza in order
1. Crust
2. Sauce
3. Pepperoni
4. Mushroom
5. Etc.
 Use a new layer for each item
 Convert all drawings to symbols
Symbols
A symbol is a reusable object used/created in Flash. A
Symbol can be reused throughout your movie or imported and
used in other movies. There are three types of symbols:
 Graphics
(Static-doesn’t move)
 Buttons – (click on to perform action)
 Movieclips (re-useable animated movies)
Symbols
 A copy of a symbol used in the movie is called an
Instance
 Each Instance can have its own independent
properties (like color, size, function, etc.)
 All symbols used in a flash movie are stored in
the Library from where you can drag-and-drop
new instances of the symbols into your movie
Drawing/Pencil tool
 Select the Pencil tool
 Notice the options
for the pencil tool.
 Select the Smooth
curvy line
Straighten- Straight lines (stars)
Smooth – Curvey lines
Crust Layer
 the Pencil Properties
Stroke color- change the color to a pizza crust color
Stroke - change to 6
 Draw the crust
on the stage
Paint Bucket
 Select the Paint Bucket
 In the Properties box
 Change the Paint Bucket – to the color of the pizza
outline..use eye dropper to highlight the correct color
 Select the Arrow Tool
 Draw a box around the pizza slice with the ARROW Tool
(this will select the outline and filled area of the slice)
Convert Drawing to Symbol (F8)
 Press F8 – change the name to crust
 Change the type to GRAPHIC
 Symbol should show in your library (CMD +L –if it’s
not showing)
Rename Layer 1 to crust
Save Your File
 Save your file as Pizza
New Layer
 Create a New Layer
 Label New layer – Sauce
Brush Tool
 Select the Brush Tool
 Notice the options
 Select a large size
 Keep the shape round
Size
Shape
Draw Sauce
 Select a color for the sauce
 Position the cursor inside the
pizza and draw the sauce
(hold down your mouse
while you’re drawing)
 Convert the drawing to a symbol
 Select it first (Arrow tool)
 Press (F8) Name: Sauce
Insert Layer /New symbol
 Insert and Label a New layer – pepperoni
 Insert a New Symbol..called pepperoni
Draw top of pepperoni
 Select the Oval Tool
 Property Options
Stroke/Outline color: black
Fill color: pepperoni color
Stroke height: 2
 Draw the top part of the pepperoni
Draw Bottom of Pepperoni
 Zoom in (Press CMD and “+” together) to zoom into
where the pepperoni is
 Select the Pencil tool
Stroke/Outline color: black
Stroke height: 2
 Note: Zoom out (Press CMD and “-” together)
Draw Bottom of Pepperoni
 Draw the bottom of the pepperoni (ensure you
enclose the area of the bottom part)
 Select the Paint bucket
Fill color: select a darker color
 Move your mouse over the bottom part and click to fill
Go back to Scene 1
 Go back to your Scene 1
 Click on the Arrow Tool
 Drag the pepperoni symbol from your library onto
your pizza
Free Transform Tool
 If the pepperoni is too big, double click the symbol
to make changes
 Use the black handles to resize or rotate
Free Transform
 Resize/Rotate/Scew
Add more pepperoni
 Go back to your Scene 1 to preview the results
 When you are happy with the size continue to add
pepperonis to your pizza
 Save your file
Insert Layer /New symbol
 Insert and Label a New layer – mushroom
 Insert a New Symbol (CMSD F8)..called mushroom
 Use the Pencil tool to draw a mushroom
 Add mushrooms to your pizza
Add other items to your pizza
 Add other items. Finally Save your file (CRTL + S)
Hiding Layers
 While working you can hide or lock layers so you are
not distracted
Show/hide Layers
Lock layers so you
can’t alter them
Making your pizza dance (CS3)
 CS3 - Insert a Keyframe (right click (CTRL +
click)/Insert Keyframe) on Frame 8 – for each layer
Animating the Pepperoni
 Go to the Frame 8 on the Pepperoni layer
Frame 8
 Move the layer up by using the up arrow key
Use the Up Arrow Key
Continue animating
 Go to the Frame 1 on the Pepperoni layer. Select all
the frames in your timeline by clicking on Frame
1 and dragging all the way to Frame 8.
 Right click on any selected frame and choose
'Create Classic Tween’
 Continue animating mushrooms and green
peppers the same way
Making your pizza dance (CS4)
 CS4 – Select the object to TWEEN (pepperoni)
 Right-click and select CREATE MOTION TWEEN
 CS4 inserts enough frames for 1 second
 Move the pepperoni to a new position
Create TWEENS for all layers
 For each layer, Goto FRAME 1
 Select the object (if it’s not already selected)
 Right-click and select CREATE MOTION TWEEN
 CS4 inserts enough frames for 1 second
 Move the objects to create animations
Test and Save
 CMD + Enter – to play your movie in a loop
 Press CMD + F12 to preview your movie
 Save your movie (CTRL + S)
Shape Tweening
Shape Tweening
Create a New file.
2. Draw a vector using any of the drawing tools in Flash,
say a small circle and remove its border.
1.
Shape Tweening
1.
Click the 25th frame in the Timeline and insert a Key
Frame (right click (CTRL + click)/Insert Keyframe).
2. Now delete the circle and draw another shape say a
diamond using the rectangle tool without a border.
3. Use the TOOL SETTINGS to indicate the shape
Shape Tweening
1.
Now right-click on any frame in between these two
Key Frames and select Create Shape Tween
Motion (Spline) Path
 We saw that when you add a Motion Tween in CS4 -
Flash CS4 creates a Spline Path
Spline Path Animation
1.
Create a New File. Import to the library an image
(Basketball) File/Import/to library
2. CS4 creates a SYMBOL for this object
3. Create a layer ..rename it
4. Drag the basketball SYMBOL into the scene
 CS4 – Select the object to TWEEN
 Right-click and select CREATE MOTION TWEEN
 CS4 inserts enough frames for 1 second
 Move the SYMBOL to a new position
 CS4 creates a SPINE PATH
Editing the Spline Path
1.
With the ARROW tool, click on the SPLINE PATH
and edit it
Changing the Properties
1.
At any time during the motion span, position the
frame indicator and make a different property
change to the object
Position cursor inside
In FRAME 12
Use the FREE
TRANSFORM tool to
Modify the properties
Of the object (size, etc)
Draw a simple animation:
Draw a small piece of the diagram
2. Right-click/Insert KeyFrame (CTRL + click) (to
create a keyframe)
3. Repeat back to step 1 until the diagram is complete
4. Press CTRL-ENTER to preview
1.
Practice:
A. Create an animation of your initials being written out
as if by magic.
B. Create an animation of a scene for a story. Choose
either a city or a country setting.
Your Turn
 Go to Trainstation Tutorial
http://www.trainstation.cc/Tutorials/Flash/twinklings
tar.html
 Follow the instructions to create twinkling stars using
Graphic Symbols
Teach the Class a Concept
 Work in pairs
 Go to the Tutorials listed below
 Choose a concept…learn it….teach it to the class
http://www.smartwebby.com/Flash/flash_animations.asp
http://www.trainstation.cc/Tutorials/Flash/motion-guide.html
http://www.entheosweb.com/Flash/
http://www.developingwebs.net/flash/
http://www.developingwebs.net/flash/morphingtext.php - Morphing text
http://www.digitalcoding.com/video-tutorials/flash/Adobe-Flash-CS4-Bone-ToolTutorial.html -Bone Tool
Example concepts







Shape Tweens - Make one shape appear to change into another shape over time
Frame-by-Frame Animation – Create animation sequence
Guided Motion Tween – Motions along a path
Masking- revealing portion of your picture or graphic in the layer below
Fade in Effect
Morphing Text
Bone Tool