This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
1) 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.
)
TIP
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 to snap to the line. This option makes it much easier to position your elements at exactly the right spot.
2) 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.
3) 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 the guides will not budge.
TIP
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, check to make sure the Lock Guides option is not checked.
4) 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're not sure 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. You should notice that the rectangle snaps 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.
)
TIP
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, it can look as though the rectangle is 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 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 Control+Z (Windows) or Command+Z (Macintosh) until the outline comes back.
NOTE
When you double-click on the stroke, it selects the entire stroke. If you only 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 by trying them. Go ahead—play around with the tools and get creative.
5 ) Save your movie as zoo2.fla in FlashTFS folder on your hard disk.
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.