building flash templates

Introduction to Flash

Understanding File Types

There are three types of files you will generally encounter when working with Flash:

  • .FLA – This is the authoring file which requires the Flash program. It contains all of the images, text and graphics that exist in your Flash project.
  • .SWF – This is the published Flash "movie." You have to embed this in a Web page or upload it to a Content Management System.
  • .FLV – This is a Flash video file. You cannot play this video by itself unless you create a player in Flash to hold this movie file.

Working with Flash Layout

At first appearance, the Flash environment looks to be a cross between Photoshop and Premiere. You will see a timeline at the top of your screen, and there is a white "stage" area in the middle where the work is displayed. While Flash may appear similar to both programs, it is a mistake to think that Flash works like either of the previous two programs mentioned.

The biggest difference is that Flash is a "frame-based" program, so the timeline does not represent actual time, rather each square represents an individual frame that can be manipulated. Flash originally began as an animation program, but has evolved to support displaying interactive graphics and rich media in the form of audio, video, graphics and text.


Timeline in Flash

The timeline is a very unique convention in Flash. Working in the timeline can be tricky to a first-time user. Taking a moment to understand how the timeline works will save a lot of trouble in the long run.

  • LAYERS - Each row represents a layer. Layers have a hierarchy, so if one layer is above another, objects on higher layers will cover objects on layers below it. You can re-order layers by simply clicking and dragging the layers up or down. You can also rename layers by double-clicking on the text that describes them. TIP: Always give layers relevant names.
  • HIDING - Click on the small black dot beneath the eye icon to hide objects on a layer.
  • LOCKING - Click on the black dot beneath the padlock to lock a layer. If a layer is locked, nothing on that layer can be changed, selected, moved or affected.
  • FRAMES – Each square on the timeline represents one frame. The time it takes to display a frame depends on the framerate of your project.
  • KEYFRAMES – Keyframes are denoted by the solid black dots. A keyframe means there is content on the stage in that frame. Each keyframe is independent, so if there is content on one keyframe, another keyframe might have something completely different.
  • GRAY FRAMES – Gray frames are simply a continuation of the keyframe directly preceding them. Nothing changes in gray frames until the next keyframe.
  • SMALL WHITE BOXES IN GRAY – This denotes the end of a keyframe. It reality, it means nothing. Simply ignore these boxes.
  • BLANK KEYFRAMES – These are the small white circles. It represents a keyframe with no content.
  • RED PLAYBAR – This represents the section of the timeline that is currently on display in the stage. You can grab this red square and drag it back-and-forth through the timeline.

Selecting (highlighting) frames on the timeline is tricky. You can click and drag to highlight frames, but once frames are highlighted, you are forced to drag them on the second click. You can de-select them by clicking elsewhere if you want to redo your selection. The easiest way for first-time users to highlight frames is to hold the shift key and click all the frames you want to select.


Library in Flash

It's best to think of the Library as a bin that holds all of your media. Anything you import into Flash will automatically be displayed in the Library. You can click and drag things out of the Library and onto the stage.

Later, we'll talk about symbols, which are master copies of special containers. They also show up in the Library for easy access.

Property Inspector

Property inspector in Flash

One of the staples of the Flash program is the property inspector. This panel is contextual, which means the options on this window pane will change depending on what you last clicked on.

For example: To see properties for the timeline, click on the timeline. To see and adjust the properties of an object on the stage, click on that object and the property inspector window will change to reflect the settings related to that clicked object.