ith the release of Flash MX, Macromedia continues to evolve the Web’s most popular multimedia authoring program. Flash’s prominence as an indispensable tool for both designers and developers reflects the typical Web surfer’s growing demand for more sophisticated animation and interaction. However, many creators who work with Flash MX remain unaware of the potential of its versatile drawing tools. In fact, designers and developers almost universally overlook the fact that Flash MX can be used to create high-resolution, lightweight static graphics. Using the techniques described in this article, you will be able to use Flash’s drawing tools to create an effective image for a Web page.

If you don’t have Flash MX, you can download a free 30-day trial version that you can use to explore Flash’s capabilities.

Setting Up the Flash MX Work Area
After opening Flash MX, click the Window menu and then click on the Panel Sets item. From the options available in Panel Sets, select Designer [1024 X 768]. Selecting that option reorganizes the Flash work area to give you a more efficient creative experience. You’ll see several panels (work areas). The panels you’ll use most frequently are the Color Mixer, Tools, and the Timeline panel.

Flash’s default document size is 550 pixels wide by 400 pixels high, but you will usually need to create a document size of different proportions. After you select the Designer item from the Window menu as described above, the Panel Sets are in Designer mode. Next, click the Modify menu and select the Document item. In the dialog box that appears, enter a Width value of 150 pixels and a Height value of 275 pixels. Don’t worry about the background color and frame rate options for this project; you aren’t going to animate the image you’re about to create, so those options are irrelevant. Click OK.

The rest of this article describes the steps to create an image for an online coffee shop called The Coffee Grounds (see Figure 1).

Figure 1: The final Flash image for The Coffee Grounds

To create the image, you’ll use the tools in the Flash Toolbox panel as shown in Figure 2.

Figure 2: The Flash MX Toolbox panel and its prominent drawing tools

You’ll also use the Zoom and Hand tools to navigate around your document. Lastly, familiarize yourself with the Stroke color and Fill color options located directly under the Zoom and Hand tools; you’ll alter those option settings in nearly every step of the project.

Drawing Simple Objects and Mixing Colors

Figure 3: The Color Mixer panel and its selection of swatches.

The key to creating graphic objects efficiently in Flash is organization, which you accomplish primarily by properly using and naming layers. You can think of layers as virtual sheets of clear plastic upon which you create individual elements. When you “stack” the layers on top of one another, you see a finished product, yet you can still individually access and edit each layer, which simplifies the process of modifying and programming the elements.

In the Timeline panel, double click the text that reads “Layer 1”, which is the default layer name, and rename the layer “Background.” This layer will hold the background colors and objects. You’ll create the title and coffee cup illustration in a layer above the background layer. Next, go to the Tools panel and click on the Rectangle tool. Finally, move to the Color Mixer Panel and click on the Stroke Color option. Click on the pull-down swatch beside it and select the No Color option in the swatch picker that appears (see Figure 3). Selecting the No Color option means the shapes you draw won’t have a visible border.

Figure 4: Choosing a color for the background rectangle in the Color Mixer

Next, click on the Fill Color (paint bucket) option in the Color Mixer panel. In the large color swatch that appears, select a color to use for the background. (You may refer to the sidebar Some Suggested Color Values for a list of the colors that I used to create this project.)

Select the Rectangle tool from the Toolbox panel, and draw a rectangle that covers the entire document, creating a background for the graphic. Next, you’ll draw a rounded and outlined rectangle that serves as a contrast and anchor for the coffee cup and site title.

Click on the Rectangle tool in the Tools panel again. In the “Options” section of the Tools panel there’s a button that lets you set the radius of the rounded corners in a rectangle (see Figure 5).

Figure 5: The Round Rectangle option for the Rectangle tool

Click on that button, and in the dialog box that appears, set the corner radius to 10 points and click OK. Go back to the Color Mixer and select new fill and stroke colors. Now that you’ve set the colors for the rounded rectangle, you need to tell Flash how thick the stroke outline should be. At the bottom of the work area, you’ll find the Properties panel. In the Stroke Height field, enter a value of 5 (see Figure 6).

Figure 6: Setting the Stroke Height in the Properties panel

After setting the stroke height, draw another rectangle about 2/3 the height of the document. Refer back to Figure 1 for the size and placement of this new object. Save your file.