" />

GDT 260 Animation for the Web: Winter 2002

1.29.200

Enhancing Appearance

Color Basics

Screen color: RGB: Red, Green, Blue light.

Additive: add colors to get white; no color: black

Every color is unique combination of red, green, blue, which can be specified numerically. Each channel (r, g, and b) has one of 256 possible values: 0 - 255, expressed hexidecimally (hex code).

Base 10
100s 10s 1s
4 7 9

The above table illustrates a base 10 number

Base 16
256s 16s 1s
1 13 15

The same number in base-16

Since double-digit numbers don't work in numerical representations, letters are substituted for 10 - 15, so hex code uses 0-9 and A-F for the 16 possible values

A color in hex code: #FF3399. The first two digits correspond to red, the second two to green, the third to blue. This color has the following color values: R: FF or 255/255; G: 33, or 51/255; B: 99, or 153/255, which means there's 100% strength Red light, 20% strength Green light, and 60% strength Blue light

Color in Flash

Flash uses both hex code and RGB values to determine colors (conveniently)

Panels: Mixer, Swatches

Mixer uses RGB (0-255) scale for selecting color, but color picker uses hex code

To select non-websafe colors, use mixer palette

If custom colors are used in a flash movie, they will be saved with the movie. If not they must be saved as a custom palette

Gradients

Transition from one color to another. Two types in flash:

Gradient controls in two places: Fill, Mixer; stored in swatches palette

Always make sure to save new gradients before modifying them

Transforming Linear Gradients

Click and drag with paint bucket to create gradient that transforms parallel to the line you dragged

Use the tranform fill button with existing gradients. You can modify:

Transforming Radial Gradients

Locking Fills

Gradient spans multiple shapes

Bitmaps

Download Bitmap 1, gif 1, gif 2

Flash is not a raster graphics program. Don't treat it as such. Performance and download speed will suffer dramatically if bitmaps are overused.

Use screenshots for:

To alter bitmaps in flash, Modify > Break Apart, becomes a modifiable shape.

Bitmaps can be used as fills: after breaking apart an image, pick up the bitmap with the eyedropper

Tracing Bitmaps

Be very careful with this. File size of traced bitmaps is often much larger than original bitmap.

Modify > Trace Bitmap

Optimizing Shapes

Modify > Optimize

Importing gif's

gif's maintain transparency when imported

Animated gif's are imported as series of stills, placed on timeline according to delay specified when exporting gif.

Importing other Files

Read the book to find out about working with Freehand and Fireworks. Since those aren't installed at school, we won't cover that.

Illustrator

Flash can read Illustrator 8 documents and import them reasonably well. So save Illustrator docs as Illustrator 8, and then File > Import in Flash

Illustrator 9 and 10 both save as Flash (.swf). This is a pretty good way to work if you can't stand Flash's drawing interface. Just keep in mind that that vectors tend to be more complex than Flash would create, so you may need to do some tweaking in Flash to get everything to work well. Also, every shape will be grouped by itself, so if you need to do shape tweens, you'll have to put things on different layers and ungroup them.

Fonts

Device Fonts

Flash can embed fonts into movies, which looks best for non-standard fonts, or it can used device fonts

Device fonts are installed on the user's machine. There are 2 ways to use device fonts:

Device fonts appear aliased in Flash; they are not smooth

Paragraph Options

Click and drag with the text tool to create a paragraph box. The paragraph panel controls paragraph options.

Applying Gradients and Bitmap Fills to Type

Type must be broken apart into shapes before gradients or bitmaps can be applied to it. Breaking it apart makes it into an ordinary shape.