Part I - Assembling the Graphics You'll Animate in Flash

Chapter 1 - Basics

The Stage - Off the Stage is the gray area around the white area; the user will only see things on the Stage; pay attention to the aspect ratio (ration of height to width)

Zoom and hand tool (can access by holding down the space bar); Guides and Grid like Fireworks

Source files (.fla files), Flash Player (.swf files), html files that reference the .swf files

Chapter 2 - Drawing and Painting Original Art in Flash

Zoom and Hand Tool - An alternative to zooming and using the hand tool to focus in on a particular area is to select the zoom tool, and then click and drag a rectangle -- the rectangle you select will be enlarged

Line Tool - straight lines

Pencil Tool - at the bottom of the Tools panel is the Options section. For the pencil tool, you can select Straighten, Smooth, and Ink (almost what you drew, but adjusted to reduce file size)

Paint Bucket Tool - The Options section now has a button at the top with 4 choices - Don't Close Gaps, Close Small Gaps, Close Medium Gaps, Close Large Gaps - Should enable the filling of shapes which are not quite closed (I couldn't get this to work)

Brush Tool - Brush Size and Brush Shape drop down lists in Options area; at the top of the Options area is the Brush mode which has 5 options - Paint Normal, Paint Fills, Paint Behind, Paint Selection, Paint Inside that you can experiment with

Oval and Rectangle Tool - Holding down shift key constrains to circle and square respectively; you create a shape with both a line and a fill; you can turn either one off by changing the fill or stroke color to "no color" (the white box with a red line through it)

Ink Bottle Tool - You can change the stroke properties of an existing stroke (e.g. one created by the rectangle tool) by selecting the stroke with the Arrow Tool; alternatively, one can use the Ink Bottle tool and click on or near the stroke. Since one only needs to click near, one can be less precise than with clicking with the Arrow Tool

Pen Tool - Click at vertices of shape you want to draw, when cursor changes to include a little circle, indicates that if you click, you'll enclose the shape you started.

Drawing Curve with the Pen Tool - Click the Pen Tool and then click where you want the curve to begin and drag and release. Then click where you want the curve to end and drag while you are holding down the mouse button. As you move when you hold down the mouse button, the line you see is the tangent to the curve. By moving around, you can change the angle of the tangent line and hence the shape of the curve. Making the tangent line longer, means the curve is flatter (the tangent line is longer so it can approach gradually).

Text Tool - Select the Text Tool, click on the stage and start typing. The circle at the upper right corner of the text block indicates the boundary will expand as text is added. If you click this circle and drag it and release it, it turns into a square and now the boundary is fixed. You can double click the square to restore the circle and the flexible boundary.

The Subselect Tool is to select and edit individual anchor points.

Arrow Tool - For a shape, if you click a side you just get that side; double click gives you the entire shape. You can also select objects by clicking the arrow tool and then dragging to create a rectangle around an object.

Lasso Tool - The Polygon Mode option appears in the Options section

Dropper Tool - in addition to picking up the color, it also picks up all the attributes of the object (see sample task on p. 54-55 involving three circles with different stroke and fill colors and stroke heights.

Free Transform Tool - Select the object, select the Free Transform Tool, and in the options section, there will be 4 choices

• Rotate and Skew - As you cursor near the corners, when the cursor changes to rotate, you can rotate the object
• Distort - When cursor changes to an arrow, you can distort; holding down the Shift key when dragging a corner will distort two sides evenly
• Scale - corners do both dimensions, side only one
• Envelope - You will have lots of handles to move. The circle handles that appear control the tangents like when you draw with the Pen tool

Smooth and Straighten Options -- can be used to alter any shape

View>Snap to Objects - This helps you draw.

• If you draw a rectangle, as you approach a square, a dark ring will appear; if this is visible, this ensures you will get a square
• Draw a rectangle and then draw a line separately. Select the Arrow tool and make sure the cursor changes to show a corner, then if you click and drag the end of the line, you can attach end of the line to the square, thus changing the angle of the line; if you select the entire line, you can attach the end of the line to the square without changing the angle of the line. You can see that the two are snapped together by dragging the corner point where the objects are connected; all the shapes will move at once

Chapter 3 - Importing Graphics into Flash

In general, create all the graphics you can within Flash so that the file size is kept small. However, if you must import graphics, here's how to do it:

Importing Vector Graphics

Illustrator - Flash doesn't import Illustrator file more recent than version 8 so generally better to export a .swf file from Illustrator

Importing a Raster Graphic

File>Import and select a .jpg, .gif, .bmp. etc. file. The graphic may or may not appear on stage; if it does, you can click it and delete. Window>Library and click the line of the file you imported. From the Library's options menu (far right), select Properties to open Bitmap Properties dialog box.

Importing jpg -- The "Use Imported JPEG data" box, if checked, will maintain the imported file's compression which is generally desirable. If you uncheck this box, you can then set the compression but having Flash recompress is generally a bad idea (each compression of a .jpg file loses information).

Importing different kind of file - The option "use document default quantity" uses a global setting to compress this file, which is set when you publish a movie. If you deselect this, you can set the JPEG compression level you desire. The effect on the image will show in the top left of the dialog box; you can Right Click to Zoom in and get a closer look.

Convert a Bitmap to a Vector

Import the image and select it. Modify>Trace Bitmap. In the resulting dialog box, setting low values in the color threshold field means that two colors have to be close to be considered the same color. Minimum area specifies how small the smallest vector shape can be.

Chapter 4 - Applied Advanced Drawing Techniques

Creating Solid and Gradient Swatches

To select a color from another application, you need both applications visible at the same time -- try click the two overlapping squares in the upper right, right next to the X. You then click the stroke or fill color and get the eye drop, as you move the cursor the color will change. However, the eye dropper will disappear when you leave the current window unless you are holding down the left mouse key.

To save a color, select Add Swatch from the Color Mixer's option panel or simply click underneath all the swatches. You can save a set of colors by selecting Save Colors ... from the options panel of the Swatches panel. You can save also save these as default and Load Default Colors.

Creating a custom gradient - Click Linear or Radial from the Fill style drop down list. Right now there are 2 points on the gradient. You can edit either by clicking on the corresponding arrow. You can then select colors in the color mixer panel. You can add more colors by clicking underneath the gradient definition bar in the Color Mixer panel to add more pointers. To save the gradient, use either of the procedures in the preceding paragraph to saving a color.

Lock Fill - Select the Paint Bucket Tool. In the bottom portion of the Options section of the Tools panel, there will be an icon for Lock Fill. When Lock Fill is not on, where you click in a shape will determine where the gradient is centered. When you turn on Lock Fill, the last fill you made will determine the center of the gradient.

Fill Transform Tool - This tool is immediately above the Paint Bucket Tool. Select the Fill Transform Tool and then select one of the fills you've made. There will be 4 handles. You can change the gradient's center. The square handle on the edge allows you to reshape radial gradients, below that is a circle for the falloff rate, and below that a circle for the rotation.

Filling with a Bitmap - Import any bitmap. If it appears on the stage, delete it. From the Color Mixer panel, select Bitmap from the fill style drop-down list. You'll see a list of graphics in your library. Select which one you want. Then use the Fill Transform Tool to adjust the tiled bitmap's size, scale, and rotation.

Isolating Objects

Levels - Everything you paint or draw in Flash is at the canvas level. Thus one thing will trash another (it is not on a layer that is simply in front of the other item. This is often convenient when you are creating shapes, but to avoid it, you can use Grouping. Grouped objects occupy a level of their own, thus allowing the group to be stacked above or below other groups without eating away at them.

To group objects, select the objects and select Modify>Group (Ctrl G). For example, you can group a stroke and its fill so that they move together and are not eaten away by other groups.

Editing groups - To change the relative location of an item in a group from another, you could Modify>Ungroup. But while they are ungrouped, they could easily eat away at other objects in the canvas level. The solution is to be able to edit within a group. If you double-click a grouped object, you will then be taken inside the group. You will notice this in several ways. The address bar at the top of the stage will read Scene 1:Group and the other contents of the Stage are dimmed slightly. To exit the group, you can either click the "go back" arrow button or click Scene 1. You can have groups within groups.

Chapter 5 - Using the Library for Productivity

Items in the library include symbols and 3 media types imported into Flash (bitmaps, audio, and QuickTime video). Symbols have two primary advantages: (1) reduced file size since instances of the symbol merely point to the one copy of the symbol, and (2) changes to the symbol are reflected in each instance. Instances in addition to pointing to a copy of the symbol contain information about position, scale, and rotation, but this is a trivial addition to file size.

Converting an Object to a Symbol

Select the object, and then Insert>Convert to Symbol or F8. Name the symbol appropriately and normally use Movie Clip as the type. Buttons for buttons and Graphic primarily for synchronization operations. This creates a symbol in the library and makes the object you converted an instance of the symbol, just like the instances you would create by dragging the symbol onto the Stage.

Editing the Symbol - You can edit the symbol in various ways:

• in the Library, click on the symbol in the Library, and then from the options menu of the Library, select Edit
• in the Library, double clicking the icon next to the symbol name
• double clicking an instance of the symbol

When you are editing the symbol, the address bar will change so that it reads something like [Scene Name: Symbol Name]

Creating a Symbol from Scratch

Insert>New Symbol. There will be a plus sign in the middle of the Stage. To center something exactly, select it, Edit>Cut, then Edit>Paste. Edit>Paste in Place puts it exactly where it was before.

Organizing the Library

Symbols can be sorted alphabetically, so you may want to have related symbols all have the same text prefix. You can create folders either by clicking the New Folder icon at the bottom of the Library or the options menu for the Library.

Changing Instances

Properties panel gives you a drop-down list for color style: brightness (more white or black), tint (any color you want), alpha (same as opacity), advanced (combination of tint and alpha)

Revised: July 29, 2003. Comments to William Pegram, wpegram@nvcc.edu