Flash Assignment 7 – Working with Layers and the Timeline

Photo credit: Joanna Paterson, uploaded via Flickr, Creative Commons License

7.1 Understanding Layers:

7.1.1 Working with Layers – They say that time is nature’s way of keeping everything from happening all at once.  In much the same way, layers are a means to give ones Flash content some elbow room on the stage.  By separating various graphics objects, shapes and text fields onto separate layers, modifying each of them becomes much easier.  It also lessens the risk that one will change finished content accidentally.  Furthermore, in some cases multiple layers are absolutely mandatory.  For instance, animation tweens are restricted to a single tween per layer, so multiple tweens require multiple layers.

Layers are managed in the Timeline panel.  Within the panel, we can add, delete, organize into folders, show/hide or lock layers. 

• A new layer can be added by clicking the New Layer icon in the panel.

• Clicking the Trash Can icon deletes the current layer.

• The Folder icon creates a new layer folder that layers can be moved into.

• The Eyeball icon toggles layer visibility on/off. 

• The Padlock icon toggles layer locking on/off.  No changes can be made to a locked layer.

• The Rectangle icon toggles the layer view between normal and outline.  Outline view can be helpful when you need reference the position of content on another layer, but don’t want that content to obscure your view of the current layer.

The hierarchy of the layers in the Timeline panel corresponds to the layer visibility on the stage.  That is, content on the top layer will obscure content on any layer below it.  The hierarchy can be easily adjusted, as layers in the panel can be dragged up or down as needed.

Double clicking the name of any layer in the panel allows the user to rename it.

7.1.2 Organizing Artwork with Layers –  In this section, our tutor introduces the use of the guide layer property.  By double-clicking the layer icon (to the left of the layer name in the timeline panel), we open the layer properties dialogue.  Selecting the Guide option turns our layer into content that we can view while assembling or project, but will not show up in the finished SWF file.  This is especially useful for positioning items, such as when creating tweens.  Using guide layers in conjunction with outline visibility mode is particularly useful.

7.2 Understanding Frame Rate:

The frame rate is a property of the time line that dictates how many frames per second (fps) are played when our finished SWF file runs.  A higher frame rate results in smoother animation, but also increases file size.  By default this rate is set at 24 fps, which is the same as a traditional motion picture frame rate.  Under most circumstances, this rate represents a good compromise between quality and file size, will not need to be changed.  However, the frame rate can be set anywhere from .01 to 120 fps.  To do so, simply click anywhere on the stage, and refer to the Properties panel.  Along with the stage size and color options is a property labled FPS, which represents the projects frame rate.

7.3 Understanding the Timeline

7.3.1 Understanding the Timeline Icons in a Classic Tween – In this section, we concentrate on the information contained on the right side of the timeline panel, which is the timeline itself.  Here we see a liner series of frames, represented as small rectangles, located to the right of each layer.  Also in the timeline, there may appear a number of icons.  In this exercise, we will explore the meaning of these icons as they relate to the Classic Tween. 

NOTE:  The term Classic Tween refers to tweens created with versions of Flash prior to CS5.  While CS5 still supports this earlier format, it is termed Classic to differentiate it from the CS5-style Motion Tween.

The first icon we discuss is the solid circle, or dot, smack-dab in the middle of a frame.  This represents a keyframe, or a frame in which some change on the stage is defined.  This could be the appearance of a piece of artwork, or one endpoint of a tween, for example. 

An arrow extending from one keyframe to another is indicative of a classic tween spanning the intervening frames. 

A frame containing an empty rectangular icon indicates that the content in that layer has remained on the stage but unchanged since the last keyframe.

Finally, a empty circle or empty dot represents a blank keyframe.  This indicates that any content on that layer has been removed.

7.3.2 Understanding the Timeline Icons in an Object-Based Tween –  The Object-based tween is quite similar to the classic tween, excepting that it applied to graphic objects, that is, graphic symbols, movie clips, bitmaps or artwork created in object drawing mode.  The appearance of an object-based tween in the timeline is only slightly different.  Specifically, the horizontal arrow spanning the tween is gone, replaced instead by a blue hue overlaying the frames within the tween.  Also, keyframes subsequent to the first within a tween span are not solid circles, but rather diamond-shaped icons.  Once a tween span is defined, selecting an individual frame within the span on the timeline requires the use of the Ctrl+click command; a simple click on a frame within the span selects not the frame, but the entire span.

7.3.3 Aligning Objects with Onion Skinning and the Grid – Onion skin view is a feature that is helpful for editing frame-by-frame animations.  For instance, If one needs to decide where to place an object on frame 30 of an animation clip, it might be helpful to know where the object has been over the previous 5, 10 or 20 frames.  One could move the playhead back to prior frames to see how an object moved over time, but that information is then lost when one returns to edit frame 30.  With onion skin view, one can elect to see a semi-transparent of view of an object as it existed in a given number of frames prior (or subsequent) to the current frame.  The effect mimics that of an illustrator drawing an animation cell laid atop a number of previous cells on a light table.  The onion skin view is selected by means of the onion skin icon just below the timeline.   Once selected, the top row of the timeline (where the frame numbers are displayed) is tinted grey over the span of the onion skin view.  There are handles on either side of this tinted area, allowing one to adjust the covered span my means of dragging the handles left or right.

Also assisting with object placement is the grid overlay.  As one would expect, this feature simply displays a uniform grid atop the stage to aid with alignment.  The grid is displayed via the View=>Grid=>Show Grid command.  Selecting the View=>Grid=>Edit Grid command allows the user to change the grid pitch, color, and whether or not objects snap themselves to the gridlines when placed in proximity to same.  The snap feature can be thought of as magnetizing the grid lines.  The relative strength of this attractive force is adjustable as well.

7.3.4 Using Frame Labels – When defining actions with ActionScript code, it may be necessary to direct the process to a particular frame in the timeline during the execution of the script.  For instance, clicking a particular button may direct the application to frame 50 in the timeline.  While one can reference frame 50 by its frame number in the ActionScript code, this may be problematic.  If the Flash project needs to be modified in such a way that adds or removes frames, the target frame referenced by the button may no longer be at frame 50.  Fortunately, there is a means to assign a label to a given frame, which remains constant even if a frames position in the timeline is changed.

When selecting a particular frame in the timeline, note that the Properties panel reflects that a frame is selected and displays property options for that frame.  Name is among the listed properties, and any frame can be given a label by making an entry in this field.  Once a frame is labeled, ActionScript code can reference the frame by name, regardless of where it may be in the frame sequence.

When labeling frames, one should create a dedicated layer to hold the labels.  Also note that when labeled, a frame will display on the timeline bearing a red triangular flag to indicate that a name has been assigned to it.

7.3.5 Editing Frames on the Timeline – In this lesson we cover the basics of selecting, adding, deleting and moving frames in the timeline. 

Selecting a single frame is ordinarily accomplished with a simple click.  The exception, as noted above, lies in selecting a frame within an object tween (which requires a Ctrl+click). 

A range of frames can be selected by selecting a single frame first, then selecting another frame while holding the shift key.  This results in the span of frames connecting the two being selected.

Once selected, a number of operations can be performed on frames with a right-click context menu.  For instance, selecting a frame and selecting insert frame from the context menu adds a frame in the selected place, pushing existing frames to the right to accommodate the addition.  Similarly, selecting remove frames deletes the selection and shifts the subsequent frames (if any) back to the left, filling the void.

A click-and-hold on a selection allows one to drag the selection of frames to another location on the timeline.

When the frames within an object tween are selected (by clicking anywhere inside the tween), one can expand or compress the length of the entire tween by placing the cursor over either end of the span, which will change the cursor to double arrows, and then using a click-and-drag action to move the endpoints.  Note that this adds frames in a distributed manner across the tween span, so if the length of a tween is doubled, then the interval between any two keyframes within the tween is also doubled.  If this is not the intended result, do not fret.  One can simply select any of the keyframes within the span and drag them to the appropriate positions.

Note also that selected frames can be cut, copied and pasted by means of the right-click context menu.