Manipulating the Timeline Flash

The position, size, and shape of the timeline can be manipulated to better suit your workflow, much like any other Flash window or panel. On a dual monitor system, the timeline can be exiled to the second monitor, together with all the panels leaving the stage clear and unencumbered for wild creativity.

  • Move the timeline by dragging it by the Timeline Title Bar, which is the bar at the top that says timeline. If the timeline is docked, click anywhere in the gray area above the layer stack to undock the timeline and reposition it.
  • If undocked, resize the timeline by dragging on the lower right corner (PC), or the size box (Mac), which is also in the right corner. If docked, drag the bar at the bottom of the timeline that separates the layers from the application window, either up or down.
  • To resize the name and icon controls (either to accommodate longer names or to apportion more of the timeline to frames), click and drag the bar that separates the name and icon controls from the frames area.

Layer specifics
Knowing how to work with layers makes the Flash creation process flow much more smoothly. By default, new layers are stacked on top of the currently active layer. To rearrange layers, click in the blank area (between the layer name and the layer toggle icons), and drag the Layer Bar to the desired position in the layer stack and release.

For enhanced functionality and control, as well as to enable reliable interactivity and ActionScripting, it’s a good habit to give your layers meaningful names. Simply double-click the layer’s name on the Layer Bar and enter a meaningful name.

Timeline specifics
The new Flash 5 timeline still offers you many clues about what’s going on with your animation, as shown below.

Flash 5 Style Layer specifics

Flash 5 Style Layer specifics

  • Keyframe: A keyframe is any frame in which the contents of the frame may differ from the contents of either the previous or subsequent frames. Solid circles designate keyframes with content.
  • Keyframe spans: Keyframe spans newly designated in Flash 5 are the sections from one keyframe up to (but not including) the next keyframe, which are separated from each other by vertical lines. Thus, as shown, the span between frames 3 and 6 in the buttons layer is a keyframe span. Note that these spans can now be dragged intact, as a whole to a different location. This functionality is shown in the selected span between frames 8 and 13 in the buttons layer.
    • Final keyframe: The final frame of a keyframe span with content is marked with an empty rectangle (that is, frame 6 of the buttons layer), and a vertical line to the right of the rectangle.
    • Here’s the same timeline that was shown above

      Here’s the same timeline that was shown above

    • Intermediate frame(s): The intermediate frames of a nonempty keyframe span are gray.
    • Empty span(s): Empty spans are white (for example, the visible portion of the sweep mc layer).
  • Frame-by-Frame Animation: Frame-by-Frame Animation is animation composed entirely of keyframes. In a Frame-by-Frame Animation, the contents of each individual frame differs from both the previous and subsequent frames.
  • Tweened Animation: Tweened Animation is an animation where the movement or change is interpolated, or tweened, over a range of frames that extend between two keyframes. An arrow stretching across a colored keyframe span designates a Tween, of which there are two varieties:
    • Motion Tweens: Motion Tweens are indicated by a blue tint.
    • Shape Tweens: Shape Tweens are indicated by a green tint.
  • Motion Guide Layer: A Motion Guide Layer is used to guide an animated item along a path, which can be drawn with either the Pencil or the Line Tool.
  • Mask Layer: A Mask Layer is a layer that is used to selectively obscure the layers beneath it.
  • Label: Labels are used to give layers meaningful names, rather than using frame numbers. The advantage of this is that named layers can be moved without breaking ActionScript calls assigned to them. Upon export, Labels are included as part of the .SWF, so it makes sense to keep them short. Use the Frame Panel to add a Label to a selected frame. Press Enter/Return after typing a frame label or comment to ensure that the label takes.
  • Comment: Comments are special Labels, preceded by a double-slash “//” Comments do not export, so you can be verbose (within the confines of the timeline) without adding to the .SWF. Use the Frame Panel to add a Comment, which is merely a label preceded by “//,” to a selected frame.
  • Waveform: This squiggly blue line in the snds layer is the waveform of a placed sound.
  • Frame Actions: The small a’s in frames 1, 20, 40, and 60 of the atns layer designate the presence of frame actions.

General preferences
The General Tab of the Flash Preferences dialog, which is accessed from the Main Menu by choosing Edit➪Preferences, has two sections specifically related to the timeline and its behavior in Flash 5. These are Timeline Options and Highlight Color.

Timeline options
The Disable Timeline Docking option prevents the timeline from attaching to the application window after it’s been deployed as a floating panel.

On both the Mac and PC, to undock the timeline and deploy it as a floating palette as shown in Figure below, click the gray area to the left of the eyeball icon and then, with the mouse still depressed, drag the palette away from the application window.

To prevent the timeline from docking, press the Control key while dragging. To permanently disable timeline docking, use Edit➪Preferences and, under Timeline Options, check the Disable Timeline Docking check box. The timeline can be dragged away from its docked position by clicking the Timeline Header and dragging the timeline away from the edge of the Flash application.

The timeline deployed as a floating palette

The timeline deployed as a floating palette

The next two options in the Preferences dialog let you revert to the Flash 4 timeline style:

  • Flash 4 Selection Style: Flash 5 introduced a new methodology for selecting frames in the timeline. This option toggles that functionality back to Flash 4 Selection Style.
  • Flash 4 Frame Drawing: Flash 5 also introduced a new methodology for drawing frames in the timeline. This option toggles that functionality back to the Flash 4 style.The difference between the timelines in Flash 5 and Flash 4 shows below
  • Flash 5 frame drawing

    Flash 5 frame drawing

    Flash 4 frame drawing

    Flash 4 frame drawing

Highlight color
The Highlight Color options in the Preferences dialog control which colors are used for selected objects:

  • Highlight Color: This preference controls the highlight color for selected groups, symbols, or text excluding shapes.
  • Use this color: Check this option to choose a Highlight Color for selections from the Swatches pop-up.
  • Use layer color: Check this option to use the layer color as the Highlight Color for selections. This option enables you to distinguish selected items according to their associated layer color (which you set in the Layer Properties dialog).

Layer Properties
Layer Properties dialog is most readily accessed by Right/Ctrl+clicking any Layer Bar and then choosing Properties from the layer contextual menu. It can also be invoked by choosing Modify➪Layer.

The layers contextual menu
As shown below, the layers contextual menu affords convenient access to a number of layer-specific operations, many of which are duplicated elsewhere.

  • Show All: Shows all layers. If some layers have had their visibility turned off, this makes them all visible.
  • Lock Others: Unlocks the active layer and locks all other layers.
  • Hide Others: Makes the currently active layer visible, if it is not visible, and hides all others.
  • Insert Layer: Inserts a new layer above the currently active layer.
  • Delete Layer: Deletes the active layer.
  • Properties: Invokes the Layer Properties dialog for the currently active layer.
  • Guide: Transforms the current layer into a Guide Layer.
  • Add Motion Guide: Inserts a new Motion Guide Layer directly above the current layer and automatically links the current layer to the Guided Layer.
  • Mask: Transforms the current layer into a Mask Layer.
  • Show Masking: Use this command on either the Mask or the Masked Layer to activate the masking effect essentially, this command locks both layers simultaneously, which enables the masking effect.

The Layer Properties dialog
The Layer Properties dialog is used to control and edit the properties of the active layer and to facilitate routine layer operations.

  • Name: Use this option to change the name of the layer.
  • Show: With this option checked, the layer is visible; otherwise, it’s hidden.
  • Lock: This option enables you to lock or unlock the layer.
  • Type: These options are used to set the type of layer:
    • Normal: This is the default, used for drawing and animation.
    • Guide: Guide Layers have two purposes. They can be used either as Motion Guides or as drawing guides. Guide Layers aren’t exported, so they aren’t visible and they don’t add to the exported file size. Guided Layers are linked to a Guide Layer.
    • This composite screen shot shows the layer contextual menu and ensuing Layer Properties dialog.

      composite screen shot shows the layer contextual menu and ensuing Layer Properties dialog.

    • Mask: A Mask Layer is used in conjunction with a Masked Layer to create special effects. The Masked Layer is hidden except beneath filled areas of the Mask Layer that it’s linked to.
  • Outline Color: Use this to choose the color of the layer’s outlines.
  • View layer as outlines: When this is checked, all items on the layer appear as outlines, according to the color chosen in the previous option. Viewing as outlines speeds the display while editing because all items are shown as thin outlines. As discussed in the previous section regarding General Preferences, this option can be used in conjunction with the Highlight Color options of the General tab of Edit➪Preferences, to either give each layer a unique color, or to employ a global color for all outlines.
  • Layer Height: Use this to increase the height of the individual layer. This means that you can have most layers displayed tiny, and yet have others display with more visible content. This is useful if you use the Preview or Preview in Context Timeline options on the Frame View options pop-up. It’s also useful when viewing the waveforms of sound files.

Frame View options
As shown below, the Frame View options pop-up is used to customize the size, color, and style of frames displayed within the timeline. These features can prove very helpful when you are working with cartoon animation, and want to see each frame previewed. Or, if you are working on an extremely long project with a huge timeline, it can be helpful to tweak the size of the individual frames, so that you can see more of the timeline at a single glance.

The Frame View options pop-up is used to customize the size, color, and style of frames displayed within the timeline.

Frame View options pop-up is used to customize the size, color, and style of frames displayed within the timeline.

When used in conjunction with the Layer Height option of the Layer Properties dialog, you can customize your timeline in myriad ways to better suit your particular project. Your options include:

  • Tiny, Small, Normal, Medium, Large: These options afford a range of sizes for the width of individual frames. When working on extremely long animations, narrower frames facilitate some operations.
  • Short: This option makes the frames shorter in height, permitting more Layer Bars to be visible in the same amount of space. When working with many layers, short layers help squelch the tedium of scrolling through layers of layers.
  • Tinted Frames: This option toggles tinted frames on or off. With Tinted Frames on, the tints are as follows:
    • White: Empty or unused frames (for any layer). This is the default.
    • The white color of empty or unused frames is unaffected regardless of whether Tinted Frames is on or off.
    • Gray: There are two kinds of gray frames: (a) The grayed-out gray frames in the default (empty) timeline are a quick visual reference that indicates every fifth frame, like the tick marks on a ruler. These tick frames appear regardless of whether Tinted Frames are enabled. (b) The solid gray color, which appears when Tinted Frames are enabled, indicates that a frame is either filled or otherwise used. Frame usage means that the frame has something in it, which may be either visible or invisible as, for example, an item with an alpha of 0 percent, or a hidden symbol.
    • Blue: Indicates a Motion Tween span.
    • Green: Indicates a Shape Tween span.
    • A red arrow: Indicates a Motion Tween span, when Tinted Frames are off.
    • A green arrow: Indicates a Shape Tween span, when Tinted Frames are off.
  • Preview: As shown at the top of Figure below, the preview option displays tiny thumbnails that maximize the element in each frame. Thus, the scale of elements is not consistent from frame to frame. In this Frame-by-frame animation, the phases of the moon increase over a span of 15 frames.
  • Preview in Context: As shown at the bottom of below one, when previewed in context, the same animation is seen with accurate scale from frame to frame (because elements are not maximized for each frame).
  • In this composite screen shot, the Frames are shown with Preview option (top) and Frames shown with Preview in Context option (middle) for the same animation (bottom).

    composite screen shot, the Frames are shown with Preview option

Scene and Symbol Bar
Nested between the Menu Bar and the top of the timeline is the Scene and Symbol Bar shown below. The Scene Name button, at the far left, indicates the name of the current scene. When in Symbol Editing Mode, click this button to return to the current scene. To the right is the Edit Scene button, and at the far right is the Edit Symbols button. Click either button to evoke a menu of scenes or symbols that are editable within the current movie.

The Scene and Symbol Bar

Scene and Symbol Bar

Scenes are used to organize a Flash project into logical, manageable parts. By default, on export Flash plays back all of the scenes within the movie in the order in which they are listed in the Scene Panel.

To navigate to other scenes from within the Movie Editor:

  • Click the Edit Scene button at the far right of the Scene and Symbol Bar, and then click the desired scene.
  • Navigate to a specific scene from the View Menu with the View➪Go To command.Use the Scene Panel, to manage your scenes. The Scene Panel may be accessed with either of these commands: Modify➪Scene or Window➪ Panels➪Scene.
  • The Scene Panel

    The Scene Panel

    When your movie is published to .SWF, the scenes play in the order in which they are listed in either the Scene Panel or the Scene pop-up.

  • To delete a scene, either use the Scene Panel’s delete button or, from the Insert menu, use the Insert➪Remove Scene command.
  • To add a scene, either use the Scene Panel’s add button or, from the Insert menu, use Insert➪Scene.
  • Use the duplicate button on the Scene Panel to duplicate a scene.
  • To rename a scene, simply double-click the scene name and type the new name.
  • To rearrange scene order, simply click and drag a scene to alter its position with in the Scene Panel. You can use actions to force the movie to access scenes outside the default linear order

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics