An Introduction to Flash

Written by Amanda Kern

What is Flash ?

Flash is a tool to help create animations & interactive media (CD-ROM's, web sites, games, desktop applications, software, or mobile devices). Primarily it was developed as a vector based animation program for the web. It has evolved into the industry standard, where you can incorporate bitmap images, remarkable video compression, & audio into multimedia projects. The potential for what you can create in Flash is endless.

A Few Inspirational Flash web sites

2 Advanced Studios (www.2advanced.com)
NeoStream (www.neostream.com)
Thibaud's Portfolio (http://www.thibaud.be/)
The Visual Work of Scott Hansen (http://www.iso50.com/)
Outside Source Design (http://outsidesource.com/portfolio.html)

What's the Difference?
There are currently two different versions of Flash: Flash Basic 8 and Flash Professional 8. When trying to figure out the differences, basically it's important to know that both versions have a lot of the same features. Either version will enable you to create animations and interactive projects. The Professional version has a few extra bells and whistles, that if you plan to continue using Flash it might make it a worthwhile investment. Here are the main options available with Flash Professional 8 only:

Oh, and we can't forget about the Flash player. Basically the flash player works in conjunction with an internet browser to play the animations and interactive projects that are created in Flash. The Flash player does update with each new version of Flash, therefore, the most recent Flash player would be needed to view an animation created from Flash 8. Only about 50% of internet users currently have the Flash 8 player. So what happens if a user doesn't have the flash player needed? Basically they'll see nothing, no animation, no flash file.

The Flash Interface

Start Page. The Start Page is an optional method for accessing files.

Panels. All panels are located under the window menu. Some of the panels available are color mixer, behavior, library, and actions. You can control which panels you want to be visible.

Menus. Menus are located at the top of the interface and contain save, copy, paste, help, etc.

Stage. The stage is where you place your graphics, buttons, animations, etc., it is what will be displayed to the end user.

Properties Inspector. Displays editable properties depending upon what is selected on the stage. The properties inspector allows you to change background colors, Frame rate, stage size. Other options are available depending upon what is selected.

FPS. Frames Per Second. The default is 12 FPS. You can increase to make animations smoother, however, it will take up memory/CPU.

Timeline. Made of a series of frames. Frames can be empty, contain content (frame), or be a keyframe. The playhead is used to navigate the timeline and choose the current frame you are working on. Many flash projects contain more than one timeline (movie clips, scenes, etc.)

Layers. Can be stacked to organize or reorder content. Locking layers, show/hide, outline may be beneficial during development time. To rename double click on the layer name. Always name layers & layer folders. You know the layer is active if it has the pencil icon next to it. Icons for Insert Layer, Insert Layer Folder can be found below the layers area.

Flash Tools. Tool tips allow you to hover a tool to find name of tool and shortcut. Tool Options in the Property Inspector change depending on selected tool

Selections tools. Selection(arrow), Subselection, and lasso tool.

Drawing/Graphic tools. Line, Pen, Text, Oval, Rectangle, Pencil, and Brush

Modifying tools. Free & Fill transform, ink bottle, paint bucket, eyedropper, and eraser

Viewing tools. hand, zoom.

Fills & Strokes. Strokes can have different thicknesses & styles (however they affect memory & file size. Can have properties such as color, style (dotted, rippled, etc.). Some shapes create shapes that have fills, which is the area inside the a shape. A fill can be solid, gradient, or bitmap. Fills and strokes are not grouped, they are separate items. To select a fill and stroke together double click on the shape.

Merge vs. Object drawing models. When you draw shapes in on top of one another in flash the elements are broken into different regions. By placing a shape on top of another the shape beneath is lost. To avoid this from happening use layers. Object drawing model will group objects to prevent cookie cutter effect.

Color Panel. Color Mixer & Swatches Panel. 216 Web safe colors. You can add custom colors to the palette. Testing colors outside of Flash. Creating Gradients - add to file size.

Gradients. You can mix up to 16 different colors. Gradients increase file size.

Precision in Flash. Viewing Rulers, Snapping & Guides. X/Y Coordinates.

FLA vs. SWF file

FLA is the "source" file you edit to create projects. When you choose to File > Save a project it will enable you to save your source file which contains all of your animations, graphics, sound, and video. Basically everything you'll use to make your functional project. FLA files can generally get pretty hefty in file size, especially as you begin to add bitmap graphics, sound, or video. We're not quite as concerned about that because the users will never need to see our FLA file.

SWF is what is "viewed" by users. The SWF file is going to display your animations and interactivity. The SWF file must be viewed through an internet browser such as Internet explorer, Firefox, or safari - unless of course the user has Flash. Also, the user does need the Flash player installed on their computer. If you are concerned about the version of the Flash player users have you can choose to change the Flash player version you are exporting to, however, this might eliminate any effects that are "new" such as filters. You cannot edit an SWF file.

So how do you view your swf file? There many main ways to save an swf file, though it's not quite the same as saving your FLA file. Here are the main ways: