Flash CS4 and Geometric Drawing Tools

Usually, I like to teach Flash techniques with a project-based tutorial. However, it's difficult to cover everything about Flash with this teaching format. So, I must supplement these tutorials in some way. Here are a few things that you might need to know when working with the drawing tools in Flash CS4.

Flash will work with both vector and raster images. For those of you new to these terms, the difference between these images is the type and amount of information contained in the image file and the resulting file size. Flash designers like to use vector images because of their small file size. It takes only a small amount of information to draw a vector image on the stage. Another thing to notice about vectors in Flash is that they have two parts. Each vector has a stroke (line) and fill (shape). Each of these parts interact differently, depending on how you draw the vector shape.

A good way to start drawing in Flash is to start with the tools that draw geometric shapes. Let's experiment with the Rectangle, Oval, PolyStar, Rectangle Primitive and Oval Primitive tools. The first three can be used in both the Merge Drawing mode and the Object Drawing mode. As mentioned before, depending on which drawing mode you use, the vector shapes (and their stroke and fill) will behave differently on the stage. Let's experiment with these tools in both modes.

Click on the Rectangle tool in the Tools panel. Turn off the Object Drawing mode. We will be using the Merge Drawing mode. Set the Stroke to black and the Fill to red. Draw a rectangle on the stage. Notice that the stroke is the outside edge and the fill is the red inside area. When drawing with the Merge Drawing mode, the stroke and fill are independent of each other. Click on the red area and drag it to the right. Notice that the stroke remains in place and does not move with the fill.
Click Edit – Undo Move to go back to the original position. Now we will see what is meant by the Merge Drawing mode. Click on the Oval tool and draw an oval over the top right corner of the rectangle. Now click on the red area of the oval and drag it to the right. Notice that the stroke of the oval stayed in place as before. But, when we moved the red oval fill, part of both the rectangle's stroke and fill were cut away. This part was the section the was overlapped by the oval.
Select all the shapes on the stage and click Edit – Cut. Now that our stage is empty, we can experiment with the Object Drawing mode. Click on the Object Drawing mode icon in the Tools panel to turn on the mode. Now use the Rectangle tool to draw a rectangle on the stage. Click and drag the red area. Notice that both the stroke and fill moved together. This is because the Object Drawing mode automatically creates a special type of vector shape where the stroke and fill work as one. This special vector shape is called a Drawing Object.
Switch to the Oval tool and draw an oval over the corner of the rectangle. Notice the blue bounding box around the oval. This is another feature of the Object Drawing mode. The bounding box was also around our rectangle but it was hard to see. Now drag the oval to the right and notice that all of the rectangle stays in place. This is because Drawing Objects are independent of each other even when drawn on the same layer.

Clear the stage again. The last two drawing tools in our list work independent of Flash's drawing modes. In fact, the icon in the Tools panel that controls the drawing modes is not available when using the primitive drawing tools. What makes these drawing tools special is the non-destructive controls for reshaping the objects.
Click on the Rectangle Primitive tool in the Tools panel. Notice that the Object Drawing icon disappears from the panel. Draw a rectangle on the stage. Notice the special box and corner dots around the rectangle. Open the Properties Inspector and find the Rectangle Options section. The control slider is set to zero by default. Move the slider to the right and notice that the corners of the rectangle are rounded and we have a few more dots. Move the slider to the left and our round corners are inverted.
Switch to the Oval Primitive tool and drag an oval on the stage. You will see the bounding box and two dots. In the Properties Inspector, you will see that we have several controls in the Oval Options section. Experiment with different settings for each to see what results you get.

Join us in the Flash forum.