Flash was always my first love. It combines time-based image editing format with programming and multimedia capabilities! It is a great way to add fluid animation and interaction to your design, and it frees you from the grid constraints of xhtml/css.

At the same time, it also had its drawbacks!

• Flash requires a plug-in to play, which some users may not have installed on their browsers and may not trouble themselves to install (even though it is free). New versions of Flash require new plug-ins, which means that you are reliant on your user to constantly upgrade.
• Flash usually requires longer to download particularly if it contains a lot of images, sound, and video. If it doesn’t preload, it may stutter when playing (think about trying to watch video on a slow internet connection)
• Flash is typically not SEO (Search Engine Optimization) Compatible, which means that your content may not show up on Google or Search Tools.
• Flash designs are used in ads, so some browsers may be set to block them.

So, be selective about when you use Flash! Good uses for flash are interactive games, animations, a small part of your site that you would like to draw attention to, like a zippy logo or slideshow. Also, consider whether your target audience will wait for the Flash to download. Onward!

Key Terms:

More Flash definitions here.

.fla: editable Flash file. Make sure to backup a copy of this on every project. This is the one that you will want if you ever need to make changes.
.swf : file for view only. This is the file that gets uploaded with and linked from your HTML, kind of like an image file.
Framerate: The rate, stated in frames per second (fps), at which each frame in an animation is played back for the user
Timeline: the part of the Flash workspace that contains the sequence of frames, layers, and scenes composing an animation.

Parts of the Timeline

A. Playhead B. Empty keyframe C. Timeline header D. Guide layer icon E. Frame View pop‑up menu F. Frame-by-frame animation G. Tweened animation H. Scroll To Playhead button I. Onion-skinning buttons J. Current Frame indicator K. Frame Rate indicator
L. Elapsed Time indicator

Keyframe: A frame in which you establish exactly what should appear on stage at that particular time.
Frame-by-frame Animation: Animation using a series of keyframes with no tweening that creates a flipbook-like animation Flash file.
Tween: Used as a verb, “to tween” is to have a change made between two objects. For example, you can use a Shape Tween to morph a solid circle into a doughnut.
Onion Skin Tools: Tools that enable you to edit one keyframe while viewing (dimly) other frames before or after the current frame.
Vector graphic: A vector graphic file contains all the calculations to redraw an image onscreen. A vector graphic’s file size remains small, and the image can be scaled to any size without any degradation to image quality. Flash .swf files are saved as vector graphics.
Bitmap/Raster graphic: An image file format that contains the color information for each pixel. Raster graphics’ file sizes are relatively large.
Symbol: A graphic, Movie Clip, or button that is stored in the Library. This is especially useful because no matter how many instances of a symbol are used, it only has to download once, and changes made to the master symbol are immediately reflected in all instances already used. See also Button symbol; Graphic symbol; Library; Movie Clip symbol.

Assignment:

1. Using our new animation skillz, create a 200 frame animation expressing a certain feeling. Bring the .fla file to class and we will publish them together

• Kelly- surreal
• Philip- twisted
• Aeneas- wavy
• Le’on- hyper
• Bryan- joyous
• Jobana- mad

1. Watch this tutorial on making a tween.
2. Look at some of the websites linked off of Design Charts for inspiration.
3. If you are having difficulty with HTML/CSS, buy this book. If you are struggling with Flash, get this book.