These are the notes for the TepFlashClass on Drawing, held on 9 July, 2002.

If you've used any drawing program, the tools for drawing in Flash probably look pretty familiar.

Tools Overview

Stroke

In flash, a shape is made of two parts, the stroke and the fill. The stroke is the outside border around the shape. You can change its color by clicking the color block next to the pencil icon.

Fill

The fill is the inside "guts" of the shape; the stuff that fills in the borders that the stroke has defined. You can change the color by clicking the color block next to the paint bucket icon.

Drawing a Circle

To draw a circle, hold down shift while you drag with the oval tool. A circle, or any shape, is made of a stroke around the outside and a fill in the inside.

Drawing a Line

Hold down shift while dragging with the line tool to keep it perfectly horizontal or vertical. A line is a stroke without a fill

Colors

Once you have clicked the color block next to the appropriate icon, you will be given a Palette of colors to choose from. You can either pick a color or type the proper Hexadecimal Code in the white box. If you want the color to be clear, then choose the white color box with the red stripe through it. We will be using black for all drawing lines, and blue (#0000FF) for all construction lines, as in the TepConventions.

Stroke Width

We now know how to draw a circle, how to distinguish between the stroke and the fill, and how to change the color of either. Now we'll learn how to change the width of a stroke. For our animations, we want the stroke to be hairline width.

In FlashMX

To change the stroke width you simply select the stroke and look at the property panel that usually sites at the bottom of your screen. If you cannot find it, you can make it appear by choosing Window >> Properties. You then select the type of stroke and thickness from this panel.

In Flash 5

In Flash 5, select the stroke and then choose Window >> Panels >> Stroke. In the Stroke Panel, you can change the stroke type and thickness:

Rotating

There are two ways to rotate a shape in Flash, free rotation by hand or numeric rotation by typing in numbers.

Free Rotation in Flash MX

In Flash MX, you use the Free Transform tool (below the pencil) from the Tools Palette. Select the tool, select the object, then drag it to rotate.

Free Rotation in Flash 5

In Flash 5, once you select your object, a rotation tool will appear at the bottom of the tools palette:

Numeric Rotation in Flash MX

Choose Window >> Transform from the menu on top, then type in the number of degrees you would like it to rotate.

Numeric Rotation in Flash 5

Choose Window >> Panels >> Transform, then type in in the number of degrees you would like it to rotate.

Alignment

Often, you will need to space or align your shapes evenly on the screen. This is very difficult to do by hand, but very easy to do with the Align Pallette. You must first select both object that you wish to align, and then click the appropriate icon in the Alignment Pallette.

In Flash MX, you will find the Alignment Pallette under Window >>Align.

In Flash 5, you will find the Alignment Pallette under Window >> Panels >> Align.

If the icons don't make sense, play around with them to get an idea of what does what. In the example we are aligning the two objects along their center lines:

This covers the basics of drawing in Flash. If you have any questions please let me know