Introduction to Layers & Frames

Your project will be laid out over the timeline though Layers and Frames. This combination of elements allows us to plan, organize, layout and execute our projects. Lets take a look at how we use the Timeline.

The most obvious thing you will see are the numbers above each cell of the grid, which reads from left to right. These represent the frame numbers of our movie. Each cell on the grid represents a frame, or at this point, where a frame could be placed on the Timeline. Located at the first frame you will also see a Pinkish rectangle over number one. This is known as the Playhead and acts the same way as a playhead on a VCR works. Once frames are added to the movie you will be able to move it back and forth across the Timeline to see your animation in action. This is called Scrubbing and is done periodically while animating objects to keep up with your motion development on screen.

Below the frame numbers you will see Layer 1. Each movie starts by default with one layer. They are added and named in sequential order and can be renamed by double clicking on the Layer name and typing a new name. You can add additional Layers by Choosing Insert>Layer or by clicking the New Layer icon below the Layer stack. Clicking the Trashcan icon will remove the Layer that is currently highlighted. After adding a new one you can rearrange their stack order by clicking and holding on a Layer and then dragging it either above or below another one. In addition to a Layer, each movie starts with one frame called a Keyframe.

Movies in general are defined as a sequence of photographs projected onto a screen in succession to create the illusion of motion. These "photographs" are known in the industry as Frames. In traditional animation, Frames are represented by a sheet of paper or acetate. Each of these sheets has artwork that is photographed on film to compile motion. In Flash and many other software programs, these sheets are represented by Keyframes. Keyframes differ from Frames in many animation programs because they are literally points of definition on the Timeline. This is where artwork and code are attached and represent change in the movie. Keyframes can be added to the Timeline at any point by selecting the location you want to insert it and Choosing Insert>Keyframe. Frames on the other hand can be thought of as time and space.

Take for example a character walking. Each state of the character's movement would be drawn in Flash on a Keyframe one after the other. If the character were to freeze in mid air for a moment, no change would take place; therefore no new Keyframes would be needed. This pause can be represent by adding Frames to the Timeline. The more Frames that are added, the longer no visual change will occur on the screen. Frames can be added anywhere by Choosing Insert>Frame.

Once Keyframes and Frames are added they can be copied, cut, pasted, and dragged around on the Timeline. Cutting, Copying and Pasting (C/C/P) of any type of frame works with the same shortcut keys as most programs with the addition for the Alt Key. (i.e. - to copy a frame hit CTRL+Alt+C). To C/C/P any type frame, simply click on it with the mouse, unclick leaving the Frame highlighted Black and press the corresponding shortcut or Choose Edit> and the action you want to perform. You can also do this with multiple frames by clicking on the first frame you want to select, unclicking it, press & hold the Shift key and clicking the last frame you want to select. This can be done on the same or different layer. Clicking a frame further down on the Timeline on a different Layer will copy all the Frames on all the Layers selected. In addition to C/C/P, once highlighted, frames can be dragged by clicking/holding/and dragging the frames to a new location on the Timeline. They can be relocated to new frame numbers or to a new layer.

Introduction to the Stage

The Stage as it's known in Flash is the document area similar to Freehand, Illustrator etc. The Stage is where content is created and placed. It is enclosed in a gray area called the Work Area. The Stage can be moved freely around in the document window or locked to the upper left corner by Choosing View>Work Area. When the Work Area is visible, you can move it around in the document window by selecting the Hand Tool on the Main Toolbar. In addition, like many other graphic programs, you can use the Zoom Tool on the Main Toolbar or by Choosing View>Magnification to Zoom in and out of the Stage.

A good analogy for Flash's Stage is a theater stage. When a production is going on, the audience sees the stage; it's actors and props. Behind the curtains to the sides and behind the backdrop lie the lighting, equipment and cast. The same holds true when Flash files are run. The viewer sees things that are placed on the Stage, and things off to the sides in the Work Area are hidden from view. This holds true for most publishing cases except for Show All and Percent.

Because Flash is scalable, it's possible to set your HTML parameters for the movie to expand and compress to fit the browser window. When this setting is set to Show All and Percent, artwork that is placed off stage may be seen when a browser is scaled in a manner that may be taller or wider than the Flash Stage dimensions because the HTML settings keep the movie proportionally correct. This maybe an undesired effect, however there are cases when combining Percentage and Pixel settings may come in handy. You will need to experiment with each setting and see the effects for yourself to get a clear picture of how each behaves in the browser. We will address publish setting at a later time.

Stage size should be one of your first decisions when creating a movie in Flash. Once set, it may be cumbersome to later re-arrange artwork over multitudes of frames in a movie to fit a new Stage size. You can set your Stage dimensions by clicking on the Stage and viewing its properties. You will see a Size button that will open a Document Settings Dialog Box. The Height and Width fields are measured in Pixels by default because Flash is primarily used for screen development vs. print work. Flash will support any dimension from 1px up to 2880px.

In addition to size you can also set the movie's background color from a swatch drop down located on the Dialog Box and the Properties Inspector. Your default palette is always available at start and you can use custom colors by first adding the new color to you swatch palette and then returning to the Background Color selection. The new swatch will then be available for you to select and use.

Introduction to the Main Tool Bar

A full description for each item on the Main Toolbar here isn't entirely needed because there are detailed descriptions available in the Flash Help section located under Help>Using Flash. Instead, this introduction will touch on the main tools Flash uses and help get you started developing. You can refer to the mentioned file for additional information on that particular tool if needed.

Selection and Manipulation
The tool you will be using most often is the Arrow Tool, which is located at the top Left of the Main Toolbar. The Arrow Tool is used for selecting artwork on the Stage, moving it and modifying it. The Arrow can be used to both select and modify artwork. By clicking on either a Fill or a Stroke/Line, the Arrow Tool can highlight the item, allowing it to be relocated, cut, dragged etc. It can also be used to modify a Stroke or Fill's shape by clicking and holding, and then dragging a point on the shape. When hovering your cursor over a Line's mid-section or a Fill's outside, a curve icon will appear below the cursor, signifying that you can modify the curve of that area. When the cursor hovers over an end point of a Line or Fill a right angle icon will appear, signifying that you can modify a point on that piece of artwork.

Next to the Arrow Tool, the Sub-Selection Tool allows you to select and modify line segment points in the same manner many traditional graphics programs have. By selecting a Line with the tool, Flash shows the points that it's comprised of. Selecting an individual point allows you to adjust Bezier curves with handles like in Illustrator or Freehand.

Flash also offers the Lasso Tool that acts the same as in many other graphic programs. It has both a freeform/lasso mode, which lets you draw selection areas with free flowing lines and a polygon mode that will let you draw shapes with straight lines. In addition, there is also a wand mode for selecting areas of similar color and contrast in imported Bitmaps.

Drawing
Drawing differs in Flash from most vector programs such as Freehand and Illustrator because it draws artwork in an ungrouped manner. For example, if you draw two lines that intersect, Flash will treat them as one object. In most other programs, unless joined, they would be separate. Flash allows us to draw in an ungrouped manner, providing us with an easy method for shape manipulation. Unless artwork is grouped or converted into a symbol, it is treated in this manner.

This methodology is often a small hurdle for newcomers to tackle, but with some experimentation you will find that for basic drawing tasks, it provides a clean and quick method for drawing. While Flash's tools are somewhat primitive and allow us to create with ease, you will find yourself using other programs for more complex artwork creation and importing it into Flash.

In addition to Flash's unique drawing style, Flash has 2 distinct art types known as Fills and Strokes or Lines. Fills are areas of solid color or gradation that have some area or volume to them, while Lines are simple sets of points connected with different widths applied to them. Flash provides the Rectangle, Oval and Brush tools for drawing basic shapes and Fills while the Line, Pen and Pencil tools allow you to draw Lines. Each of the artwork types has a color modifier. These are the Paint Bucket and Ink Bottle that apply color to Fills and Lines respectively. Artwork is removed by selecting and deleting it or by using the Eraser Tool, which has several Options for erasing different types of artwork at different widths and with shapes.

Type
Flash has a Type Tool for placing Text Fields on the Stage. Flash offers several types of fields including Static, Dynamic and Input. These fields treat type differently for things such as animation and user input. We'll cover this in a separate section, as they require a bit more detail. Right now it's just important that you know that type is applied with this tool. It's also important to note that Flash treats Type differently than simple Fills and Lines in that type retains its text properties, allowing you to edit the text at any time. Text can be broken apart however by choosing Modify>Break Apart. This lets us treat each letter as artwork, but it loses its type properties. Once broken apart, each letter can have a stroke applied to it and have its fill modified with gradients and such.

Transforming Artwork
Flash offers the Transformation Tool to do advanced modifications to artwork. Once artwork has been selected with one of the selection tools, you will see several Options below the tool icons. Almost every tool has its own Options. The Transformation tool's methods of modification are Rotate, Scale, Distort and Envelope. The first two are straightforward in that they either rotate artwork on its Transformation Point (white dot in center of selected artwork) or Scale the artwork's height or width. The Distort option allows you to alter the bounding box of selected artwork and give the illusion of perspective by mirroring the opposite point selected. Last, the Envelope also modifies artwork based on its bounding box but allows you to distort the outer edge through handles. Envelope modification lets you warp outer lying edges in a smooth flowing shape.