1. Macromedia/Adobe Flash 8Flash 8
web animation essentialsweb animation essentials
your instructor: matthew wyllyamz
m.wyllyamz@gmail.com

2. getting startedgetting started
 quick introductions -- customizing this coursequick introductions -- customizing this course
 administriviaadministrivia
 how to make this a better classhow to make this a better class
 menu of possible class topicsmenu of possible class topics

3. quick introductionsquick introductions
customizing this course
 who are you and what do you do?who are you and what do you do?
 what is your experience with computers, thewhat is your experience with computers, the
Internet, and the World Wide Web?Internet, and the World Wide Web?
 what is your experience with vector and rasterwhat is your experience with vector and raster
graphics, Macromedia Flash, and ActionScript?graphics, Macromedia Flash, and ActionScript?
 what are your goals today?what are your goals today?
what do you hope to get from this class?what do you hope to get from this class?
 what is something interesting about you?what is something interesting about you?

4. quick introductionsquick introductions
» matthew wyllyamz
software instructor since 1993, with an emphasis on multimedia, graphics,
and internet development.
have created courses for Jefferson County Adult Ed, CCU in Lakewood,
Productivity Point, and the DOD (at Rocky Flats).
taught Apple Macintosh classes exclusively for five years,taught Apple Macintosh classes exclusively for five years,
andand have been using the Internet since 1995.
started working with Flash in 1999 (version 4), and recently completedstarted working with Flash in 1999 (version 4), and recently completed
an intensive seven-course program in Flash 8.an intensive seven-course program in Flash 8.
corporate webmaster for two years ('97-'99), blogmaster for seven years. ('99-'05)
TODAY: independent contractor, technical & creative consultant, artist, amateur
photographer, and author. BA in English writing, and have sold three books.
» http://www.mouselink.biz

5. administriviaadministrivia
Workshop scheduleWorkshop schedule
Six classes, Mondays & WednesdaysSix classes, Mondays & Wednesdays
5:30pm – 8:30pm5:30pm – 8:30pm
Two sessions per eveningTwo sessions per evening
Short break (15 mins) around 7pmShort break (15 mins) around 7pm
Facilities …Facilities …
Bathrooms, vending, Starbucks …Bathrooms, vending, Starbucks …

6. how to make this a better classhow to make this a better class
 please set pagers and cell phones to silent or turn off.
 understand "concentrated computer training":
 class is part discussion, part lecture, part hands-on.
 watch the screen, then try it yourself.
 PARTICIPATE! ask questions. answer questions. take notes.
 breaks can be short, but effective.
 this is a cooperative learning environment:
We are here to learn from each other.
 so have a buddy, and please don’t sit by yourself.
 keep in mind that this course was designed for a
particular level of student:

7. how to make this a better classhow to make this a better class
keep in mind that this course was designed for
a particular level of student:
Created for
- the beginning Flash user with a elementary knowledge of
computer-based animation.
- the beginning or intermediate-level web/Internet developer.
NOT created for
- the beginning computer user.
- the intermediate or advanced Flash user.
most importantly …most importantly …

8. how to make this a better classhow to make this a better class
Make it fun!Make it fun! 
most importantly …

9. menu of possible workshop topicsmenu of possible workshop topics
What is Flash?
What can be done with Flash?
The basic Flash interface
Document properties
Frame-by-frame animation
The importance of library
symbols
Three different types of library
symbols
Nesting symbols within symbols
Frames & keyframes
“Tweening"
Motion tweens
The trick to working in Flash
Vector vs. raster graphics
Drawing & painting tools
Unique graphic behaviors
Working with blocks of text
Shape tweening (morphing)
Creating & managing layers
Types of layers
Looping an animation seamlessly
Working with audio
Flash-based site designs
Resources for Flash developers
Publishing your Flash project
Conclusions …
… and a word about your flash drive
Be thinking about your own animated Flash project. …

10. Moving on …Moving on …
DAY1

11. What is Flash?What is Flash?
"Adobe Flash (formerly Macromedia Flash), or simply Flash, refers to
both the Adobe Flash Player and to a multimedia authoring program used to
create content for web applications, games, and movies. The Flash Player,
currently distributed by Adobe Systems (which acquired Macromedia in 2005),
is a client application available in most dominant web browsers (97%). It
features support for vector and raster graphics, a scripting language called
ActionScript and streaming of audio and video.
"'Flash' can refer to the authoring environment, the player, or the
application files.
"The Flash files, traditionally called 'Flash movies' or 'Flash games,' 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."
http://en.wikipedia.org/wiki/.fla

12. What can be done with Flash?What can be done with Flash?
"Since its introduction in 1996, Flash technology has become a
popular method for adding animation and interactivity to web pages.
Flash is commonly used to create animation, advertisements, various
web-page components, to integrate video into web pages, and more
recently, to develop Rich Internet Applications."
Create …
Static vector-based graphics for websites
Stand-alone animated movies
Animated elements for web pages
Logos, mouse-overs, buttons, drop-downs …
Ads, sidebars, banners …
Animated .GIFs
Completely Flash-based web interfaces
Flash-based games

13. But exercise self-discipline over …But exercise self-discipline over …
"Flashturbation"
"Flashturbation is a term used to refer to the inappropriate use of
Macromedia Flash software on Internet sites resulting in the creation of
unnecessary animation or other annoying features.
"Flashturbation is often typified by an option to "skip intro", which
allows users to avoid having to wait for the animation either to load or
play. The intention of this term is to emphasize a self-absorbed approach
in the use of Flash technology."
http://en.wikipedia.org/wiki/Flashturbation
http://www.goddoesntshootcraps.com

14. The basic Flash interfaceThe basic Flash interface
Flash developer (.fla) vs. Flash player (.swf)
The opening screen
Menus & help
The stage & work area
Timeline & layers grid
The toolbox w/ options (in four sections)
The (contextual) properties inspector
Working with other panels
Library, history, scene, behaviors, etc.
View options
Customizing the interface layout
Magnification, rulers, guides, grids, etc.
Standard Adobe keyboard shortcuts

15. When creating an animation from scratch …
Always begin with document propertiesAlways begin with document properties
It is often important to make decisions regarding properties
before you begin work on your Flash project, however, remember
that you can come back and change any of these settings at any
time.
Dimensions
The default document size is 550 x 400 pixels.
The minimum size is 1 x 1 pixels; the maximum is 2880 x 2880 pixels.
Meta data
Improving the ability of web-based search engines to return meaningful
search results for Flash content, not a feature of Flash MX 2004 <.
Frame rate
The number of animation frames to appear every second.
Background color

16. Simple frame-by-frame animationSimple frame-by-frame animation
“Stop motion (or frame-by-frame) animation is a
general term for an animation technique which makes a
physically manipulated object appear to move on its
own. The object is moved by extremely small amounts
between individual film frames, creating the illusion of
movement when the series of frames are played back
as a continuous sequence.”
http://en.wikipedia.org/wiki/Stop_motion

17. Moving on …Moving on …
DAY2
HOMEWORK DUE
Read: http://en.wikipedia.org/wiki/Animation
Bring in: Your initial ideas, sketches, plans
for your class animated project.

18. The importance of library symbolsThe importance of library symbols
"A symbol is a graphic, button, or movie clip that you create only
once, but then can be reused throughout your project or in other
Flash documents. A symbol can include artwork imported from
another application. Any symbol that you create automatically
becomes part of the library for the current document."
To save yourself trouble, virtually every graphic you create
in Flash should be saved into the library as a symbol.
Each time you use a symbol in your presentation, it is called
an "instance."
Editing a symbol automatically updates any and all instances.
Editing an instance does not affect the original symbol.
Each symbol can have its own layers and timeline!
You can nest symbols inside of other symbols.
It is possible to convert existing graphics on the stage into
symbols.

19. Three different types of library symbolsThree different types of library symbols
Graphics
Often a single frame, locked to timeline
Optionally looped
First frame can be varied
Instances can be named uniquely
Movie clips (not video clips)
Usually multiple frames, independent
timeline
Always loops
Scriptable & nameable
Results in a smaller file size
Buttons
Four different states (frames)
Up, over, down, hit
Easy interactivity

20. Nesting symbols within symbolsNesting symbols within symbols
"Nesting symbol instances inside other symbols is a common
technique of Flash authoring. A symbol nested inside another
symbol is called a child of that symbol. The parent instance
contains the child instance."
You can animate individual (and separate) elements
of your Flash animation by nesting them.
Individual nested symbols have their own timeline and
their own set of layers.
Movie clip symbols may not animate when you scrub, but
should be fully functional when you test the movie.

21. Working with frames & keyframesWorking with frames & keyframes
Understanding the layers & timeline grid
"The Timeline organizes and controls a document's content over time in
layers and frames. Like films, Flash documents divide lengths of time into
frames. Layers are like multiple film strips stacked on top of one another, each
containing a different image that appears on the Stage. The major components
of the Timeline are layers, frames, and the playhead. The playhead indicates
the current frame displayed on the Stage. As a Flash document plays, the
playhead moves from left to right through the Timeline."
Keyboard
shortcuts
F6
insert
keyframe
F5
insert frame

22. Working with frames & keyframesWorking with frames & keyframes
CRITICAL CONCEPTS of manipulating your timeline
Keyframes provide the primary transformations for symbols in your
animation, while frames fill in the in-between states between keyframes.
So, what’s the difference between a frame and a keyframe?
When you insert a keyframe, Flash automatically copies all symbols
from all (selected) layers into the new frame(s).
However, you can also insert blank (or empty) keyframes.
Adding or removing frames between keyframes increases or decreases
the amount of time perceived between those keyframe states.
Keyboard
shortcuts
F6
insert
keyframe
F5
insert frame

23. Methods of inserting keyframesMethods of inserting keyframes
Note: You can add keyframes across multiple layers …
and you may need to!
 Menu: Insert: Timeline:
 Right click on the timeline
 F6 Keyframe F5 frame
 By simply moving the symbol …
when you have a non-keyframe frame selected in the timeline
Pay careful attention to:
 The type of frame you are adding:
Frame, Keyframe, or Blank Keyframe
Why would you want to add blank (empty) keyframes?
 The layer(s) and/or frame(s) you have selected
in the timeline.

24. Traditional frame-by-frame animation vs.
“Tweening”“Tweening”
"Short for in-betweening, tweening is the process of
generating intermediate frames between two images to
give the appearance that the first image evolves smoothly
into the second image. Inbetweens are the drawings
between the keyframes which help to create the illusion of
motion. Tweening is a key process in all types of
animation, including computer animation, in which the
software enables you to identify specific objects in an
image and define how they should move and change
during the tweening process.“
http://en.wikipedia.org/wiki/Tweening

25. What all can be done with motion tweens?What all can be done with motion tweens?
"You create a motion tween by defining properties for an instance,
a grouped object, or text in a starting keyframe, and then changing
the object's properties in a subsequent keyframe. Flash creates the
animation from one keyframe to the next in the frames between the
keyframes.“
Remember, only symbol instances (or groups)
can be motion tweened.
Use motion tweens to …
Create movement (including "easing")
Rotate, skew, and resize.
Alter color, tint, brightness/contrast, and alpha (transparency)
Utilize the assistance of onion skins (with markers)

26. Easing your tweensEasing your tweens
Ease in -
Affects the speed of the
tween as your symbol
begins its animation
Ease out +
Affects the speed of the
tween as your symbol
ends its animation
“By default, tweened frames play at a constant speed.
With easing, you can create a more realistic rate of acceleration
and deceleration. Positive values begin the tween rapidly and
decelerate the tween toward the end of the animation. Negative
values begin the tween slowly and accelerate the tween toward
the end of the animation.”

27. Moving on …Moving on …
DAY3
HOMEWORK DUE
Watch:
http://youtube.com/watch?v=3X1Z-ZS8DcQ&feature...
http://youtube.com/watch?v=FuP_0550XHw&feature...
Bring in: On your flash drive, any graphics, logos,
photos, etc. that you will be needing for your project.

28. The trick to working in FlashThe trick to working in Flash
Always pay close attention to …
WHERE YOU ARE.
What layer are you in?
What is your location (frame) in the timeline?
What object or symbol do you have selected?
(Check the properties inspector)
Are you editing a library symbol or a group?
What tool do you have selected?
What scene are you working on?

29. Review exercises from last weekReview exercises from last week
» Choose your animation assignment
Average time to complete: up to two hours.
Utilizes essential skills sets: Creating a new Flash
document, working with library symbols, understanding
the timeline, adding keyframes and frames, tweening.
Choose your animation style and content:
1) Frame-by-frame: Rain or sparkles
2) Motion-tweened animation: Bouncing balls
3) Combination: Galloping horse with moving background
If you find yourself stuck, ask a neighbor for help or flag
down your instructor. If you are getting ahead (or finish)
take a short break and ask other students if you can help.

30. Review: frame-by-frame animationReview: frame-by-frame animation
» Back to exercise choices
Rain or Sparkles
This animation is created simply by drawing raindrops or streaks in one
frame, and then varying that same image in one or more additional frames.
Sparkles can be created by using the exact same technique.
1) You may reuse your simple rain animation from last week or create a new
Flash document from scratch.
2) In frame one of your timeline draw your initial rain or sparkle images
directly onto the stage.
3) Add a new keyframe to frame two. This will copy whatever images you
have on the stage from frame one. With frame two selected in the timeline,
vary the image by moving it or flipping it.
4) Test your animation by looping playback.
5) In your My Saved Files folder, save your file as an .FLA and then publish
your animation as a .SWF
EXTRA CHALLENGE: Utilize layers to include your rain or sparkle effect
as part of a larger picture, such as a rainy landscape or a sparkly treasure.

31. Review: motion-tweened animationReview: motion-tweened animation
» Back to exercise choices
Bouncing balls
This animation is created by a series of simple motion tweens.
1) Create a new Flash document with all the default settings.
2) Create a new library symbol, and draw your ball of choice. Note: you will
get the best results if your ball is not perfectly symmetrical. Then exit out of
edit symbol mode, and return to the primary timeline.
3) In frame one of your timeline, drag the ball symbol onto the stage and
position it against the left “wall” of the stage.
4) Add a new keyframe into a future point of the timeline. The number of
frames in between the keyframes will create the amount of time elapsed.
5) Position the ball in your new keyframe against the right “wall” of the stage.
6) Repeat steps 4 & 5 until you have an appropriate number of bounces.
7) Continually test your animation by looping playback.
8) In your My Saved Files folder, save your file as an .FLA and then publish
your animation as a .SWF
EXTRA CHALLENGES: Add rotation. Squish the ball as it hits. “Pop” the

32. ReviewReview: combination animation: combination animation
» Back to exercise choices
Galloping horse with a moving background
This project is a frame-by-frame animation of a galloping horse inside a library
symbol with its own nested timeline. Once that symbol is created, it is motion-
tweened on the stage. Then a moving background is also motion-tweened on a
separate, underlying layer. You may also use a running chicken or flapping bird.
1) In a new document, import to library the frame-by-frame images for your character.
2) Create a new library symbol for your nested animation. Then make a keyframe for
each frame-by-frame drawing in your animation. Each image will need to be trace-
bitmapped so that the white background can be removed.
3) Finally, exit out of edit symbol mode, and return to the primary timeline.
4) In your primary timeline, drag your symbol onto the stage. Then add additional
keyframes into future points of the timeline to simulate the travel of your character
from one side of the stage to the other. Motion-tween this series of keyframes.
5) For the background, draw directly on the stage into a separate layer scenery which
is two or three times as long as the stage is wide. Group or convert to symbol.
6) Motion-tween the background in the opposite direction that your character moves.
7) In your My Saved Files folder, save your file as an .FLA and then publish your
animation as a .SWF
EXTRA CHALLENGE: Make the background loop seamlessly.

33. Moving on …Moving on …
DAY4
HOMEWORK DUE
Bring in: On your flash drive, embedded within your
own initial .FLA files, any and all images needed for
your project. Trace bitmaps into vectors as necessary.

34. Understanding vector vs. raster graphicsUnderstanding vector vs. raster graphics
"Basically there are two types of computer graphics, bitmaps and vectors. Bitmap files
such as jpegs or gifs contain information on each and every individual pixel, while a
vector file is "object-oriented" and mathematically contains information on individual
objects as to their shape, position, color, etc. Raster images scale poorly, while
vector-based images can be scaled indefinitely without degradation."
Raster graphics, aka bitmaps
"Raster graphics, or bitmapped graphics, are digital images stored as arrays of pixels
for display and modification. In raster data there are no lines, circles, or polygons,
only pixels that are grouped to give the appearance of these elements."
Vector graphics, aka line art
"Graphics in which an image is stored as a series of numbers defining size, position,
and shape."

35. Raster or pixel-based graphics vs.Raster or pixel-based graphics vs.
Vector or object-oriented graphicsVector or object-oriented graphics

36. Flash drawing & painting toolsFlash drawing & painting tools
Always pay attention to your tool options.
Pencil, pen, and brush
Shape tools
Stroke & fill properties
The web-safe color palette's 216 colors
Paint bucket, ink bottle, and eye dropper
Eraser
Selection tools
Arrow, subselection, lasso, free transform

37. Unique graphic behaviors in FlashUnique graphic behaviors in Flash
Making selections
A single click only selects a fill or line (not both)
You must double-click to select an entire object
Object interactions: The “Merge Drawing” Model
Stacking order (as opposed to working in layers)
Objects on the same layer "eat away" at each other
The “Object Drawing” Model
Transforming, grouping, and breaking apart objects
Easily adjusting alignment
Using the trace bitmap command

38. Custom colors, gradients, and line stylesCustom colors, gradients, and line styles
The color mixer panel
RGB or hexadecimal and alpha
Custom color swatches
Gradients
Line styles

39. Working with blocks of textWorking with blocks of text
In object-based graphics programs, text is
usually two different things at the same time:
A graphic object
A block of editable text
Understanding variable vs. fixed text blocks
All standard text formatting tools apply via
the properties inspector.
Breaking apart text into shapes

40. Shape tweening (morphing)Shape tweening (morphing)
“With shape tweening, you specify attributes for a shape in
one keyframe, and then modify the shape or draw another
shape in a subsequent keyframe.
As with motion tweening, Flash creates the animation in
the frames between the keyframes.”
Shape tweening can only be applied to objects
drawn directly on the stage and not to library
symbol instances.
http://www.entheosweb.com/Flash/shape_tween.asp

41. Moving on …Moving on …
DAY5

42. Creating & managing layersCreating & managing layers
To tween different symbols, you must place
each one on a different layer.
Creating, naming, renaming, and deleting
layers
Changing layer order
Visibility & layer outlines
Locking down layers
Utilizing layer folders for complex projects

43. Additional types of layersAdditional types of layers
Guide layer
 Never published
 Can be used for notes, designer's visual aids …
 Or can be created as a "motion guide"
Mask layer
 Used to obscure elements in a "masked layer" beneath itself
Button layer
 Can provide an invisible "hit state," especially useful to turn
an entire animation into a clickable hyperlink
Sound layer
 Placing your sound files in their own layer enables you to see
a guide "wave form" to synchronize animation to sound.
Actions layer
 For the sake of organization it is often useful to place all your
scripting in a separate layer.

44. Working with simple audioWorking with simple audio
Importing
Types of sounds
Adding sounds to a layer
Effects and editing sounds
Sync settings
Repeating
http://www.soundsnap.com
http://www.hotcoding.com/flashc...

45. Working with simple audioWorking with simple audio
"Macromedia Flash Basic 8 and Flash Professional 8 offer several ways to
use sound. You can make sounds that play continuously, independent of the
Timeline, or you can synchronize animation to a sound track. You can add
sounds to buttons to make them more interactive and make sounds fade in and
out for a more polished sound track.
"There are two types of sounds in Flash: event sounds and stream sounds.
An event sound must download completely before it begins playing, and it
continues playing until explicitly stopped. Stream sounds begin playing as soon
as enough data for the first few frames has been downloaded; stream sounds
are synchronized to the Timeline for playing on a website.
"To add a sound to a document from the library, you assign the sound to a
layer and set options in the Sound controls in the Property inspector. It is
recommended that you place each sound on a separate layer. You can import
the following sound file formats into Flash: .WAV, AIFF, .MP3."

46. Moving on …Moving on …
DAY6

47. Buttons and essential scriptingButtons and essential scripting
http://www.video-animation.com/flash8_007.shtml

48. Publishing your Flash projectPublishing your Flash project
and understanding Flash file types
.FLA The developer file
.SWF Final publication for web, uneditable
.GIF The only bitmap image format that
supports animation
.HTML Web containers for .SWF files
Export Movie … As Sequence (et al)
Other additional formats …
http://en.wikipedia.org/wiki/Swf

49. Flash-based website designsFlash-based website designs
As you view the below web pages, ask yourself the following questions:As you view the below web pages, ask yourself the following questions:
What is the site about?
What do you like about the site? What don't you like about it?
Does the Flash-based interface complement or detract from the site content?
 kindnessandhumility.com
 pulsethemovie.net
 articleonemusic.com
 spiderman 3 site
 da vinci code site
 womenandguns.vcu.edu
 xenao.com
 carlosmarcelo.com
 KPF.com
 thanea.com
 parque.nl
 bio-bak.nl
 playgroundsfestival.nl
 okaydave.com
 creaktif.com
 cubamoon.com
 hybridworks.jp
 sonjamueller.org

50. Resources for Flash developersResources for Flash developers
actionscript.org
flashadvisor.com
newgrounds.com
worldbest.com/flash.htm
bestflashanimationsite.com
atomfilms.com/af/animation/flash
saveflash.com
flashblock.com
macromedia.com/software/flash/flashpro/productinfo/faq
lodestone.com/_pdf/manuals/Whats_New_In_Flash_8.pdf

51. Conclusions …Conclusions …
You cannot learn the violin in a day or two.
Flash animation is a skill – like any other – that requires
gradual & continual practice & improvement.
Approach everything on a need-to-know basis, and don't
worry about that which you do not yet understand.
Stay upbeat!
… but if you get frustrated, remember:
You can always turn off the machine and walk away. :)
Good luck. Best wishes.
And get in touch if you need more help!
m.wyllyamz@gmail.com

52. copyright © 2008 by m.wyllyamzcopyright © 2008 by m.wyllyamz