WEB 215 Chapter F Lecture Notes -
Objective #1: Create animation using animation symbols.
- The animated gif graphic format can be used to add simple animations to
a Web page. Fireworks can be used to create and export animated gif's.
- It's important to plan a complicated animated gif by drawing a storyboard.
A storyboard is a sequence of diagrams that show the key changes to a scene
as it undergoes an animation.
- Be sure to add animations to a Web site only if they have a worthwhile purpose
and "fit" their role.
- One of the three kinds of reusable symbols allowed in a Fireworks document
is an animation symbol.
- You can select an object and click the ??? command to convert it to a symbol.
You can also use the Modify/Animation/Animation Selection menu command to
create an animation symbol.
- To use a symbol in a document, you can drag the symbol listing from the
Library tab of the Assets window onto the canvas. The object is then called
an instance of the symbol.
- The symbol can be edited at any time. If it is edited, all of its instances
are changed throughout the document.
- An animation symbol contains a number of individual frames. In each frame
one or more objects are slightly different from the objects in the other frames.
Differences can be found in size, opacity, position, etc.
- To adjust the animation trail of an animation symbol, you can drag the motion
path. You can drag the green or red animation handles to lengthen or shorten
- Non-animated objects can appear in the background of the frames in an animation.
You must set the layer where these objects are located to "share across
- You can preview an animation by clicking the Original tab at the top of
the canvas window.
Objective #2: Create frame-by-frame animation.
- If you duplicate or add frames to a one-framed document, you can create
a frame-by-frame animation by editing each frame individually.
- You can view the frames in the Frames window. You can edit, delete, or move
frames in the Frames window.
- Onion-skinning is helfpul to see the objects or instances in other frames.
The Onion-skinning button is found at the bottom of the Frames panel.
- You can change the delay time between frames of a frame-by-frame animation.
The default delay time is 7/100's second.
Objective #3: Create animation by tweening instances.
- You can highlight two objects and then click the Modify/Symbol/Tween Instances
menu command to have Fireworks move the one object a little bit into a new
position through many frames.
Objective #4: Optimize and export files.
- Click the File/Export Preview menu command to set a lot of aspects of a
document while exporting it.
- You can choose between GIF Web 216, GIF WebSnap 128/256, GIF Adaptive 256,
and JPEG formats.
- The GIF format should be used for graphics that have relatively few colors
and broad sections of color. It should not be used for photos. The GIF format
only allows 256 colors to be used in each graphic.
- Here is a guide to choosing between the available GIF formats:
- Adaptive: Finds the Web-safe colors and then adds the non-Web safe colors.
- Web Adaptive uses the Adaptive palette, but shifts a color to a Web-safe
color if it is within 7 units of a Web-safe color
- Web 216 limits the colors to the Web-safe colors. Colors that are not
Web-safe are replaced by Web-safe colors.
- Exact uses the Adaptive palette but is limited to the exact number of
colors in the graphic.
- Macintosh or Windows limits the colors to the appropriate system palette.
- Grayscale shifts the colors to the grayscale range.
- Black and White limits the colors to only pure black or pure white.
- Uniform uses a mathematical palette based on RGB pixel values
- Choose Custom to open a swatches palette saved from Fireworks or Photoshop.
- Reduce the number of colors in a GIF to whatever is tolerable.
- The Loss setting for a GIF should be between 5 and 15. When the loss is
set higher, distortions may appear.
- The JPEG format should be used for photos.