 |
 |
|
|
|
Parkland College > Center for Excellence > Fireworks II > Lesson 4
MACROMEDIA FIREWORKS II
Lesson 4: Web Animation
Instructor: Paul
Young
|
| |
Overview
|
|
Of all the ways to create visual emphasis, movement is the most powerful way to catch the eye. Making things move on the web is easy and can be whole lot of fun. But, please learn to use animation with restraint.
Animation is defined as making inanimate objects come alive. In cartoons, this is done by sequencing drawings that are slightly different from each other (i.e. a "flip book"). In movies, this is usually done 24 frames a second. In web animation, we can get away with fewer frames.
The GIF file format can handle simple animation (we'll need Flash for more complex animation). Because GIF a pixel format, file size is an issue. Therefore, when designing GIF animation, keep these limitations in mind:
- keep the dimensions of the animation area small
- limit the number of colors (avoid photos, if possible)
- keep the number of frames to a minimum
|
| |
Procedure
|
|
prepping for the lesson
- download lesson starter files
- examine downloaded files
- launch Fireworks
- file > open "lesson4/4-before.png" (note size, zoom)
- file > save as "lesson4/after.png"
- practice navigation shortcuts: SPACE, SPACE+CTRL, SPACE+CTRL+ALT, CTRL+1, CTRL+0
- note toolbox, properties, panels
- note layers (hint: layers can be collapsed, renamed, restacked)
editing type
- text tool: replace type with your name, change font/color if desired (hint: simple bold type is best for animation)
- modify > canvas > canvas size (if needed)
- select tool: select text object
- text > convert to paths
- modify > ungroup (note layers)
setting up a 20-frame animation
- window > frames
- rename "frame 1" as "fade" (double-click name)
- duplicate "fade" (drag frame on top of the "+" icon)
- rename "fade" as "rotate"
- add 9 frames after "fade"; repeat with "rotate" (flyout menu)
animating a fade
- select "fade" frame
- select all text objects
- modify > animation > animate selection: frames=10, opacity=0 to 100
- play animation (click VCR-like buttons in lower right of window)
animating a rotate
- select "rotate" frame
- select one letter (i.e. "A")
- modify > animation > animate selection: frames=10, rotate=360
- play animation (click VCR-like buttons in lower right of window)
- on "rotate" frame, select all text objects (except rotated letter)
- modify > group (ctrl+g)
- edit > copy (ctrl+c)
- paste on frame 12, repeat through frame 20 (ctrl+v)
- change timing on "rotate" frame to 50/100 second
- change looping=no looping
- file > preview in browser (F12)
optimize for web
- file > save
- choose 2-up (note file sizes, download time)
- window > optimize: animated GIF
- file > export: "after.gif"
- drag and drop "after.gif" on top of a browser window
|
|
|
