Creating Graphics with Drawing Tools

The first graphics you will create for the Tech Bookstore application use the basic drawing tools that create shapes on the Stage. Basic tools allow you to create nice and simple layouts. Combined with Flash 8's built-in components, you can create attractive interfaces without ever having to leave Flash.


If you want to create more complex graphics, you should consider using a tool like Macromedia Fireworks or Macromedia FreeHand. These applications offer more filters than Flash as well as editing controls to produce graphic effects not available in Flash. But you'll probably be surprised at just how much Flash drawing tools can actually do.

You will learn how to use some of the basic drawing tools in Flash to produce a shape and discover how to select colors for the shape's stroke and fill. You will also learn how to select your shape and modify it using the Property inspector.


Open bookstore3.fla from the TechBookstore folder on your hard drive or from the lesson02/start directory on the CD. Open the Publish Settings dialog box and deselect the HTML check box in the Formats tab. Save the file as bookstore4.fla.

You are versioning up again because you are about to make some big changes. Make sure to save the new version of the file in your TechBookstore directory on your hard drive.

Open the Publish Settings dialog box, either by selecting File > Publish Settings or by clicking the Publish Settings button on the Property inspector. Make sure that you are in the Formats tab, and uncheck the HTML box. You don't want to produce a whole new HTML file for every new version of the bookstore you produce. You will create an HTML document in Lesson 11.


Select the Rectangle tool in the Tools panel, and set the fill color to #CCCCCC and the stroke color to #666666 using the color controls. Draw a rectangle using the Object Drawing model.

When you select the Rectangle tool, you have three places to change stroke and fill color: in the colors area of the Tools panel, in the Property inspector, or in the Color Mixer (which you'll learn to use later).

In either the Property inspector or the colors area of the Tools panel, click the color control for the fill color. A color pop-up window appears. You can search for the right color in the pop-up window or you can enter the color manually by typing it into the white box in the upper left of the pop-up window. Click into the white box and type #CCCCCC to specify the fill color; then press Enter. Next, click the stroke color control, click into the white box, and type #666666, pressing Enter to set the color.


You can also set alpha in the color pop-up window. Alpha controls the opacity of the shape, from 100% opaque to 0% opaque.

After you finish setting the stroke and fill, with the Rectangle tool still selected, press the Object Drawing button in the options area of the Tools panel; then click and drag on the stage to produce a rectangle of any shape or size. You will change its dimensions with the Property inspector.


You can easily change stroke and fill settings after you have drawn the graphic by selecting the shape and changing the color controls to the color you want. Also, you can change stroke style and size, and fill type, which you will learn to do later.


If you double-click an object drawn in the Object Drawing model, you will "enter" the object, and your edit bar will show Drawing Object next to "Scene 1." When you draw something in the Object Drawing model, it's more or less grouped, which is not unlike putting something in a box. Double-clicking the object lets you go into the box to change the contents. It can be useful in limited circumstances, but most of the changes you want to make can be done without using this special editing mode, which is called edit-in-place mode. To get out of this model quickly, you can either double-click on the background or click Scene 1 in the edit bar.


Change the dimensions of the rectangle to 779 pixels wide by 15 pixels high in the Property inspector.

When an object on the Stage is selected, the Property inspector shows its width and height in the W and H fields in the inspector's lower-left corner. These are editable properties, and you can type into the fields to change the values. If you want to constrain the proportions of the graphic (keep its width-to-height ratio), you can click the padlock icon on the left of the W and H fields. You can also change the x and y location of the object on the Stage. By default, x and y position is based on the graphic's upper-left corner, which really does make it easier to position.

Make sure that the Constrain Proportions icon is unlocked, and click into the W field. Type 779 in the field and press Enter. Move to the H field and type 15, pressing Enter when done. Notice that both the width and the height of the rectangle have now changed.


Create a circle with the Oval tool that will be used for a glow animation. Give it a fill color of #999999.

Ultimately, the logo will be animated and made of several different graphics. You lay down the foundation for part of the animation now by creating a graphic that will be used in an animation later on.

Select the Oval tool and set the fill color to #999999 using the Fill Color control. Shut off the stroke by selecting the Stroke Color control and pressing the No Color button (it is a small white box with a red line through it, located just under the Fill Color control). It is dimmed unless one of the shape drawing tools is selected.

Create a small circle somewhere on the Stage by holding Shift down while clicking and dragging with the Oval tool. Holding down Shift produces perfect circles rather than ovals and ellipses. Later on in the lesson, you will change the stroke color to something other than grey.

Select the circle you just drew with the Selection tool. In the Property inspector, change the width to 130 and the height to 100 to create an oval that will fit just behind the logo image you will use later.


If you have a drawing tablet connected to your computer, Flash has a special feature that allows you to take advantage of pressure sensitivity and angle of the tablet pen. Pressure and tilt options for the Brush tool can be set in the options area of the Tools panel, or you can take advantage of your tablet because tablets are really the best things ever.


Save the document.

Macromedia Flash 8. Training from the Source
Macromedia Flash 8: Training from the Source
ISBN: 0321336291
EAN: 2147483647
Year: 2004
Pages: 230
Authors: James English © 2008-2017.
If you may any questions please contact us: