Avoiding common Timeline errors in Flash

The Timeline is an area in the Adobe Flash Professional workspace that requires very precise clicking. This article will help you organize and manage the frames in the Timeline by making several recommendations. Always verify that you have selected the correct frame in the correct layer before making any changes. You may also find it helpful to lock the other layers in the Timeline as you work so that you can isolate the content on a specific layer and avoid repositioning other elements inadvertently.

The top of the Timeline contains a feature called Outline mode. This mode is commonly used when you want to preview a project quickly, because the outlines render immediately and inform you of the location of each element on the Stage. Each element is color-coded; the outline color matches the color associated with the corresponding layer in the Timeline.

Outline mode is also very helpful when building animations. It can be less distracting to view the Stage in basic shapes, rather than reviewing the details, when you are aligning objects and setting up layouts.

The Outline mode icon is a toggle that switches between normal mode and outline mode. Sometimes the Outline mode icon is clicked accidentally, which can cause a momentary panic, as it appears all of the artwork has been converted to vector paths.

Click the Outline mode icon (the square button located to the right of the lock icon in the Timeline) to display all the elements on the Stage as outlines (see Figure 1). You can continue to select or reposition instances on the Stage and work normally while in Outline mode. You can also toggle individual layers to show normally or appear as outlines. Click the layer's square icon in the outline column of the Timeline.

Many students I've worked with don't bother to rename their layers—or only label the ones they deem to be "important." Although they think they'll remember what's on each layer, inevitably they'll forget what they put where. Labeling layers descriptively is therefore important. Also, when you share FLA files with others, they won't know what's in a layer if you don't label them accordingly.

Create a new layer in the Layers panel by clicking the New Layer button in the bottom of the Timeline. Each new layer you create in the Timeline is assigned a unique default name by Flash, such as Layer 1, Layer 2, Layer 3, and so on. While it can be tempting to use the default names applied by Flash, it is not recommended.

As you create each layer, take the time to double-click the layer's name so that you can edit it. Enter a new descriptive name for each of the layers. The Actions layer should always be located at the very top of the Timeline (although it doesn't necessarily need to be named Actions). Since it is a best practice to keep one object per layer in Flash, you can use the layer names to help you identify the object that is occupying each layer.

Descriptive layer names are very important. You can use the names to help you understand how a project functions and its purpose. You can also click and drag the layers to reorder them and change which object is on top of other objects. This process is much easier when you can quickly identify the contents of each layer.

Note: Although descriptive layer names are extremely helpful while authoring Flash projects, it's important to note that the layer names themselves are not compiled into the published SWF file. For this reason, you can use spaces and special characters when naming layers that are normally forbidden when naming other items (such as symbols and instances) in the Flash workspace.

It is completely possible to create Flash projects that have layers of varying lengths in the Timeline and not cause any issues. However, it is a best practice to extend all of the layers to match the longest layer in the Timeline.

In addition to making the project cleaner and easier to understand, you can avoid scrolling backwards when working on projects with longer Timelines.

To add frames to the end of the Timeline to match up the end of all of the layers, follow these steps:

1. Scroll to the end of the Timeline.
2. Identify the longest layer. Verify it is not longer than it needs to be, and that its final frame represents the end of the Flash project.
3. Starting from the top, click each layer that is not as long as the longest layer in the last frame of the movie. Press F5 to create a new frame (which extends the previous end of that layer).
4. Repeat these steps for each layer in the Timeline, until they all match up on the last frame (see Figure 2).

When you double-click a symbol or a symbol instance, you enter symbol-editing mode. This enables you to navigate to the timeline of the symbol, rather than working in the main Timeline.

When first working with Flash, the ability to access multiple timelines can be confusing. You can have many levels of nested movie clips and button symbols within the main Timeline. If you accidentally double-click a symbol instance on the Stage, you are presented with that symbol's timeline.

To return to the main Timeline after editing a symbol in symbol-editing mode, click the blue back arrow button or the Scene 1 button in the top left corner of the workspace (see Figure 3).

While it is important to delete unused keyframes in the Timeline, it is equally important not to delete keyframes that contain critical elements or comprise part of a tween animation. If you delete the first or last keyframe of a tween, the tween will break because the keyframes store the animation's property information.

If you accidentally press F6 and create a keyframe that is not needed, get in the habit of deleting it immediately. That way, you can be sure the Timeline remains clean and easy to negotiate. If you are not sure, delete a keyframe and then immediately scrub the Timeline by moving the playhead back and forth, to double-check that nothing is missing or broken.

If you discover you deleted a necessary keyframe, choose Edit > Undo to bring the deleted keyframe back to the Timeline.

As you are creating animations and applications, it is easy to get in the habit of using keyboard shortcuts to add keyframes to the Timeline.

Pay attention and notice any keyframes that you add by accident. Select the extra keyframe by selecting it and pressing Shift-F6 (or choosing Edit > Timeline > Remove Frames).

One of the golden rules of Flash authoring is to place only one object per layer in the Timeline. There are many reasons why this is an important convention to follow.

You can keep projects organized by descriptively naming each layer, placing related layers next to each other in the stack, and using layer folders to contain sets of layers.

Additionally, if there is only one object in each layer, you have complete control over the stacking order as you drag layers up and down to display objects above or below other objects.

If multiple objects exist on one layer, you can fix this by selecting one of the elements and choosing Edit > Cut. Then, click the New Layer button to create a new layer, re-name the layer descriptively, and choose Edit > Paste in Place. This operation ensures that the element is positioned in the same exact location it was before, except now it is on its own unique layer. Repeat these steps until each layer only contains one element.

Sometimes as you are working on a project in Flash, you may create an animation or element that you aren't sure that you want to use in the final deliverable. If you want to see how the SWF will be displayed without a specific element, you can turn off an individual layer's visibility by clicking the Show/Hide button (the dot or eye icon in the Show/Hide column). This is a toggle switch that alternates between showing and hiding the layer.

If you want to show or hide all layers at once, click the Show/Hide button located at the top of the Timeline (see Figure 4).

When developing projects with ActionScript 3, Flash Professional will present a message if you attempt to add scripts to the keyframes of a symbol's timeline. The alert message indicates that you can only add ActionScript 3 to the frame scripts of the main Timeline.

However, it is possible to add ActionScript 2 code to frames of a symbol's timeline, because adding code to frame scripts in symbol timelines was permitted in earlier versions of Flash.

To make your scripts easier to locate and update, follow the same practices used with ActionScript 3. Only add ActionScript 2 frame scripts to the top layer in the main (Scene 1) Timeline. This ensures that team members can easily locate the code for any project you create.

Hopefully this article provided you with some helpful suggestions to avoid common issues that occur when authoring Flash projects and manipulating the frames in the Timeline.

To learn more about working with the Timeline in Flash Professional to develop applications and animations, check out the following sections in the Flash Professional online documentation:

• Timeline layers
• Timelines and ActionScript
• Working with multiple timelines

Refer to Avoiding common authoring mistakes to find links to other articles in this series.