Graphics in Flash
Vectors and Bitmaps
In this lesson, you work with two main types of Macromedia Flash 8 Professional images—vector images and bitmaps. Vector images are usually created in drawing applications such as Adobe Illustrator CS 2 or Macromedia Freehand MX. Vectors are also the images you draw when you use the drawing tools in Flash. Bitmap images are created in applications such as Adobe Photoshop CS2 or Macromedia Fireworks 8.
The reliance on vectors in Flash is, in many respects, its reason for being. The roots of the application—FutureSplash—were in a tool that could actually animate vector drawings and make them “web-ready.” Considering that the application arrived on the market just as broadband was arriving made this tool appealing for people who relied on a dial-up service and the ubiquitous 56K modem. In those days, size was everything, and vectors were extremely small images. Though we won’t get into the technical details of vectors, one of the keys to their appeal is their relatively small file size.
In simple terms, when you draw a vector circle that is 100 pixels in diameter, the image requires very little information and computing power to be drawn onscreen. There are five points—four on the circle and one in the center—and those five points are used in a mathematical calculation of the diameter of the circle from the center. Then the computer needs to know if there is a stroke around the circle and whether color is being used for the fill. This means the circle requires seven pieces of information.
Bitmaps are treated differently. A photograph is the most common example of a bitmap. Bitmap images are fairly large because each pixel’s location and color value must be remembered by the computer. A photo that is 100 x 100 pixels requires the computer to remember the location of 10,000 pixels. As well, each pixel will require three more bits of information to produce the red, green, and blue values of the pixel. This means there are about 30,000 pieces of information associated with a small image.
Which is smaller: An image that requires seven bits of information to be drawn onscreen, or one that requires 30,000 bits of information? In today’s environment of wide broadband acceptance, that question is a bit dated. Still, an over-reliance on bitmaps can still have a detrimental effect on download times.
Drawing and Editing a Simple Vector Shape in Flash
All the drawing tools in the Tools panel are vector-based. If, for example, you select the Pencil tool and draw a line, anchor points become visible if you click the line with the Subselection tool. In this exercise you use the most common vector drawing tool—the Pen tool—to draw a simple shape and then make changes to it using the Property inspector and other tools on the Tools panel. This exercise introduces some of the techniques and tools used in Flash 7 Professional.
- Open a new document in Flash. When it opens, select the Pen tool in the Tools
panel.
Before you start drawing, select a fill color and a stroke color in the Tools panel.
Click and drag the Pen tool on the Stage and repeat this action a couple of times. As you click and drag, an anchor point appears that looks like a square with two handles. When you click the second time, the line drawn between the two points and the handles changes the direction or shape of the line.
To close the shape, roll the cursor over the starting point until a small circle appears under the pen. This tells you that the shape will be closed, and the starting point will join with the last point created.
When you release the mouse, the shape is created. The lines appear as the color you chose, and the interior of the shape fills with your desired fill color.
- Select the Subselect tool and click the stroke around the shape.
The points and their handles become visible. If you click a point, you can choose a handle and move it inward or outward to change the shape of the object.
- Select the Direct Selection tool and then click once on the stroke.
The stroke icon appears under the tool when you roll it over the stroke. If you roll the tool over the fill, you see a Compass icon. Those two icons tell you what you are about to select.
Double-click the stroke. When the stroke is selected, it looks like it is “hashed,” or composed of tiny white dots. Change the stoke color and the thickness in the Property inspector, and the thickness and color of the stroke around your shape changes.
If you select a fill color, the Property inspector changes to reflect your choice.
Filling and Manipulating Strokes and Fills
In this exercise, you draw a shape using the Pen tool and then use the features of the Property inspector and the Tools panel to change the color of the stroke and the fill.
- Select the Pen tool; in the Property inspector, set a stroke width and color along with a fill color.
The Ink Bottle tool and the Paint Bucket tool are located beneath the Pencil and Brush tools on the Tools panel. The Ink Bottle tool is used to change the stroke color; the Paint Bucket tool is used to change the fill color of an object.
Select the Ink Bottle tool by clicking it in the Tools panel or by pressing S. Change the stroke color in the Tools panel, and click once on the stroke surrounding your object. The stroke changes to the color chosen. Now select the Paint Bucket tool by clicking it in the Tools panel, or by pressing K. Change the fill color and click once in the fill area to change the color.
- Select the object on the Stage and select Modify > Shape > Convert Lines to Fills.
This menu item creates a rather interesting shape that essentially treats the stroke as being a part of the object’s fill color. This is especially useful if, for example, the stroke is to be a gradient. When you select it, nothing really changes until you change the fill color. Change the fill color in the Property inspector, and the stroke essentially disappears. Select the object again, apply a stroke color, and the stroke reappears.
You can also blur or “feather” the edges of a nonstroked shape to have a smoother transition between shapes and colors.
- Select the object on the Stage and turn off the stroke by selecting the No Stroke icon on the Stroke Color palette. Select Modify > Shape > Soften Fill Edges.
The Soften Fill Edges dialog box asks you to determine a distance, in pixels, for the effect. You also need to decide how many steps to use for the effect and whether you want to apply the edge outward (Expand) or inward (Inset). Make your choices and select OK.
Press Ctrl+Z (PC) or Cmd+Z (Mac) to undo the change.
This technique works best with single shapes containing a single color. Applying it to multicolored shapes increases the file size and affects the performance of the SWF file.
Shapes drawn on the Stage can be modified by using the Smooth and Straighten buttons on the Tools panel. When you select a shape, two buttons appear at the bottom of the Tools panel. The S is the Smooth button. Click it, and the curves and abrupt changes in direction will be “rounded”. Click the Straighten button, and the direction changes will be changed to straight lines.
- Select the shape on the Stage and then click the Smooth and Straighten buttons.
Notice that the shape changes to reflect your choice. Clicking the buttons multiple times changes the shape without your moving the anchor point or the handles in the object. Select the object on the Stage and press Delete to remove the object from the Stage.
The Smooth and Straighten buttons are also available to objects drawn using the Pencil tool.
- Select the Direct Selection tool, roll over the line and click and drag the line up or down when you see the stroke icon appear under the cursor.
The line bends as you drag the cursor. The end points of the line are also the line’s anchor points. Drag a
line between the two end points to change the shape of the line.
Now that you understand the drawing fundamentals, you can build the interface for a slide show.
This is a great feature but it is also dangerous. If you want to move a line, click on it and move it only when you see the line selected on the Stage. If you don’t, you will bend the line.
This work is licensed under a Creative Commons License.
