Overview

While many of the resources located here at Ultrashock and across the web address complex issues related to Flash, it's important to remember that not everyone knows what FPS stands for or understands how to assemble a dynamic path to an Object in ActionScript. If you've never opened Flash or have opened it and realized you are in over your head, then you have come to the right place. This section of Ultrashock has been developed for novice developers and designers just like you who haven't found a complete online resource for novice persons. The tutorials located in this section will help you get accustomed to the ins and outs of Flash and with practice, will allow you to take advantage of the more advanced material located throughout this site.

This section has been organized in a linear fashion for persons unfamiliar with Flash or timeline based programs. Starting at the beginning, after reading through this section you should feel comfortable with Flash's interface and tackling basic tasks dealing with both Animation and ActionScript. So without further delay, let's dig in.

Introduction to the Timeline

One of the biggest hurdles for programmers who are new to Flash or to graphic designers not accustomed to animation is the Timeline. The Timeline is your main means of organization and visual display through Layers and Frames. Layers work the same as they do in most graphic programs like PhotoShop or Fireworks in that the bottom most Layer is seen behind Layers above it. You can think of these as layers of acetate with objects drawn on each. When stacked up, we get a complied image similar to traditional methods used by animation studios.

Layers are your main means of organization through labeling and grouping. For example, many Flash developers assign ActionScript to a layer named "Actions", sounds on others and graphics on additional layers. This is good practice and a good habit to start now. It will help you keep track of the material in your movie and help others working on it in a collaborative environment. (SS) Layers can also act as Guides for Motion Tweens, Layer Masks & Visual Guides allowing you to treat them in different manners. All these types of Layers can now be grouped into folders in MX. Grouping layers allows us to both further your organization and to minimize the amount of layers being shown in your workspace optimizing valuable screen real estate. In addition to Layers, the Timeline is comprised of Frames.

Frames represent what is seen at runtime and are based on a frame/second ratio know in the industry as Frames Per Second (FPS). For example, when a movie is running at 12FPS, Flash will display 12 Frames for every second of runtime. The lower the frame rate, the choppier your movement will appear and the fewer amount of times Frame based actions will be executed. A higher rate means more frames seen and more code crunched per second. You can set your FPS by Choosing Modify>Document... and entering a value from .01 to 120 in the Frame Rate field or by looking in the Properties Inspector for the same field.

The Timeline by default resets above our Stage area. Flash starts a new document with 1 Frame known as a KeyFrame and 1 layer labeled "Layer 1". You can add Layers and Frames at anytime by Choosing Window>Insert and selecting which item you want to add. Once a Layer has been inserted, it will appear above the currently selected Layer and can be relocated or deleted at anytime. In addition, there are several icons located below the Layer stack for inserting & deleting them. We'll cover all these later. It's important to know at this point what the Timeline is and that it houses Layers and Frames when we cover them in more detail later.

Customizing the Timeline

Flash's Timeline can be customized in several ways enabling different developers to work in different ways. All of these customizations have no effect on a swf at runtime, but they play an important roll when it comes to work flow and usability. Most of these customization methods are available in pre-MX versions of Flash so they will apply to almost all developers. Playing with these options over several projects will give you a feel for what best works for you and your development style.

Frame Selection Methods
Choosing Edit>Preferences will open a Preferences dialog box with several options. Under the General tab you will see a list of items for Selection Options. In relation to the Timeline, the topic at hand is the Span Based Selection method. This option alters the way in which Frames are selected on the Timeline. Without this option checked, Flash highlights 1 Frame at a time with each click of the mouse, or multiple frames while holding down the Shift key. Choosing Span Based Selection enables you to select multiple spans of Frames with a single click. A Span is a space on a layer that starts at one Keyframe and ends at the next Keyframe, or at the end of a Layer where there is no preceding Keyframe. This space in-between two points is what we refer to as the Span. Span and non-Span based selection are a personal preference. It can both, speed up your development time by eliminating multiple clicks, or hamper it by selecting more than what you intended.

Frame Width
Frame width can be adjusted by Choosing the Frame View button to the upper right of the Timeline. The first several options, Tiny through Large, adjust the grid width of the Frames respectfully. Normal is the default setting. Making them smaller allows you to view more of the Timeline at once, utilizing available screen real estate. Making them larger allows you to select individual frames easier.

Frame Height
Frame height can also be adjusted with the next option under the Frame View Button. Although you have fewer options by comparison to width, Toggling Short will allow you to shrink the grid of the Frame height, again, utilizing available screen real estate. This will allow you to see more Layers at one time, but as with the width adjustment, it may be harder to select Layers and/or Frames when they are smaller.

Tinted Frames
By default, when artwork is placed on a Keyframe, the preceding frames are tinted gray. This is a simple visual indication that artwork is present at that point on the Timeline when viewed at runtime. You can toggle this option on and off by Choosing the Frame View button>Tinted Frames.

Preview
In addition to displaying a grid of Frames as the Timeline, you as a developer have the choice of showing artwork on it. Adding a visual of the artwork on each frame allows developers and animators to know what that frame encompasses and makes it easier to keep track of items in larger projects. Choosing the Frame View button>Preview will place the associated artwork for each Frame on it with disregard to its location on the Stage.

Preview In Context
This option works much in the same way the Preview option works with one more consideration. Choosing the Frame View button>Preview In Context will place the associated artwork for each Frame on it with regard to its location and size on the Stage. For example, if a small piece of artwork is located in the top left of the Stage, the artwork will be displayed on the Timeline and be both scaled and positioned the same as it is on the Stage in the Frame. This would produce a small preview in the upper left of the Frame on the Timeline.