• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 2. Adding Graphics and Text > Drawing Basic Shapes

Drawing Basic Shapes

Now it's time to draw something. You can use rulers and draggable guides to position elements precisely on the stage in Flash. You're going to add several guides to aid you in drawing a background for your movie. You'll then use the rectangle tool to add several rectangles.

Choose View > Rulers to turn on the rulers. Choose View > Guides > Snap to Guides, and select Snap to Guides.

When you choose View > Rulers, the rulers appear along the top and left sides of the stage. Like real-world rulers, the rulers show units of measure and are useful for positioning elements on the stage.


By default, Flash MX's rulers measure in pixels. If you'd rather see measurements in inches, decimal inches, points, centimeters, or millimeters, choose Modify > Document, and in the Document Properties window, choose a different unit of measure from the Ruler Units setting. For now it's probably best to leave the default pixel setting, so your measurements will match the measurements in this book.

If there is already a check next to Snap to Guides, it is selected. Selecting Snap to Guides forces anything drawn near a guide line to snap to it. This option makes it much easier to position your elements at exactly the right spot.

Select the arrow tool. Click the ruler at the top of the stage and, holding down the mouse button, drag to the stage. A green line, or guide, will appear—position the guide at the 15-pixel mark.

Before you start clicking and dragging, it's best to make sure you have the arrow tool selected. Just click the arrow tool in the toolbox. When you click and drag the ruler, a green line appears on the stage. This is your guide. Use the rulers to help you place your guide properly. Each of the unnumbered hash marks on the rulers represents 10 pixels, while the smaller hash marks represent 5 pixels.

Guides are useful for drawing and positioning items on the stage. They appear only when you're authoring the movie, not in the finished product. If you test the movie (Control > Test Movie), you'll see that the guides do not appear.

Position three more guides 15 pixels from the bottom, the right side, and the left side of the movie. Choose View > Guides > Lock Guides.

You should end up with four guides on the stage. They'll create a rectangle, which you'll use to draw a background for your movie. Since you already turned on the Snap to Guides command, anything you draw close to a guide will automatically snap to the guide.

Once you have positioned each of your guides, 15 pixels from each side of the movie, you can lock them. This will prevent them from being moved accidentally. After the guides have been locked, try dragging them—you will find that they won't budge.


To reposition a guide, select the arrow tool; then click and drag the guide. To remove a guide, use the arrow tool to drag the guide to the horizontal or vertical ruler. You have to unlock the guides (View > Guides > Lock Guides) before you can reposition or remove a guide—if you try to move a guide and it won't budge, make sure the Lock Guides option is not checked.

Select the rectangle tool in the toolbox. Click the top left-corner of the rectangle created by the guides on the stage and drag to the bottom-right corner.

Before you draw the rectangle, make sure you still have the same settings we used in the previous exercise. If you don't know how to check, go back and complete the last exercise, then come back to this step. The Corner Radius should be 50, Stroke Color #FF6600, Stroke Style Solid, Stroke Height 2, and Fill Color #FFFFFF.

As you drag the rectangle tool across the stage, Flash creates the outline of a rectangle with rounded corners. The rectangle should snap right to the guides, which is exactly what you want. It's OK if you don't click directly on the corner made by the guides—if you get close enough the tool will snap to the guides. When you release, a white rectangle with an orange outline and rounded corners appears.


When you draw a rectangle with the rectangle tool, you can hold down the Shift key to constrain it to a perfect square. You can also control the corner radius (roundness) by pressing the up and down arrow keys on the keyboard as you draw the rectangle.

Because the stroke outlines the shape, the rectangle can appear to be larger than the guides. The stroke is 2 pixels wide, and the edges of a shape are based on the edges of the fill and not the stroke. It's easy to test—switch to the arrow tool and then double-click on the stroke (not the fill) and press the Delete or Backspace key to remove the stroke. The edges of the fill, which should be all that's left, line up with the guides. Before you move on to the next step, press Ctrl+Z (Windows) or Command+Z (Macintosh) until the outline comes back.


When you double-click on the stroke, it selects the entire stroke. If you single click on the stroke, it only selects a segment of the stroke, not the whole thing.

Now that you know how to use the rectangle tool, you might find it useful to create a new Flash movie and play with some of the other drawing tools. The best way to learn how to use these tools is to try them. Go ahead—play around with the tools and get creative.

Save your movie as zoo2.fla in the FlashTFS folder on your hard drive.

It's a good idea to save your file whenever you make a major change. You've made some major changes, so now is a good time to save.

When you save files with a new name (i.e., zoo2.fla instead of zoo1.fla), you will always have a copy to go back to if you decide you want to add or discard any changes. If you save your work with the same file-name, you can't go back to previous versions.

You're going to continue working with this movie, so just keep it open.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint