GDT 260 Animation for the Web: Winter 2003

Notes & Handouts January 28

Color Basics

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

Additive: add colors to get white; remove all colors: 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

Panels: Mixer, Swatches

Mixer uses RGB (0-255), hex code, or HSB (change from RGB in the panel menu). Alpha (transparency) can be changed: 100 opaque, 0 transparent.

System color picker accessed from top left icon in Fill/ Stroke color selection box

To select non-websafe colors, use mixer panel

To add a swatch: Color Mixer Panel menu > Add Swatch

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 Color Swatches Panel menu > Save Colors…

Gradients

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

Gradient controls in two places: Paint Bucket Tool options, Color Mixer panel; stored in Color Swatches panel; saved with custom palettes

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, jpeg

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 bitmaps for:

To import bitmaps: File > Import, browse to your bitmap(s)

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

Lasso tool with Magic Wand modifier can be used to select color ranges in broken aprt bitmaps. Options: Threshold, number of similar colors to select; smoothing, the accuracy of the selection

Bitmaps can be used as fills: after breaking apart an image, pick up the bitmap with the eyedropper. Once the fill is made, the bitmap tiles in the shape, if necessary.

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.

Optimizing Jpeg's

Defaults for movie are controlled by Publish Settings. Can individually modify compression settings by double clicking a jpeg in the library. Set the compression and click "Test" to see the file size and visual effect.

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 on platforms other than OS X; they are not smooth

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.