Section 1.1. Drawing Your First Box | Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)

1.1. Drawing Your First Box

Drawing a box is easy, so in this proect you'll also look at a few ways to enhance your drawing with color and stroke properties. If you're new to Flash, fear notyou'll feel comfortable in no time.

When you launch Flash for the first time, the Start screen appears, as shown in Figure 1-1. This is merely a handy launch utility, and if you find it intrusive, you can disable it in the lower-left corner of the panel. One of the reasons you may want to use the panel is that it keeps track of the last 10 documents you opened (although you can also access this list via the File Open Recent menu command).

Figure 1-1. The Start screen knows what you've been doing

Exercise Files and Trial Software

All of the exercise files in this book are available on the accompanying CD-ROM and from http://www.flash8projects.com. Copy or download the examples, and put them somewhere on your hard drive where you can find them easily. Hereafter, this will be called your "working directory."

The assets you need for each exercise (images, sound files, and so on) have been grouped into numbered folders for your convenience. For example, any assets required for Chapter 1 can be found in the 01 folder. It's a good idea to preserve this directory structure to make it easier to find any referenced files.

In many cases, completed exercise files have also been included. Occasionally, you may want to start with a specific instruction and continue from there. However, you'll benefit most by going through the exercises step by step.

If you haven't already installed Flash 8, a 30-day trial version is also included on the accompanying CD-ROM. Installing the Professional version of Flash 8 will allow you to get the most out of the exercises in this book.

The second column of the Start screen allows you to create a new Flash document. Figure 1-1 shows the Start screen from Flash 8 Professional, which includes additional file types. You'll learn a little more about some of these files later in this book. In Chapter 13, you'll also learn how to use templates. For now, though, you'll focus on your first steps.

Note: The bottom portion the Start screen provides quick links to Internet resources to help you learn Flash. This area may reflect automatic online updates provided by Macromedia, so your screen may vary slightly.

1.1.1. Setting Up the File

Before you can start designing, you need to create a new Flash file:

If you haven't already, copy the CD-ROM source files and folders to your hard drive. Hereafter, the location where you store these files will be called your "working directory." Also, be sure you're running Flash 8. (Some features of this book require the Professional version. See "Getting Started" in the Preface for more information.)
Note: Flash documents are often called FLA files. This is the convention used in this book, although some developers reserve this term for the final compressed file format used to distribute Flash files. Files in this format use the .swf (pronounced "swiff") extension. SWF files are compiled when you test or publish your FLA files.
Under the Create New heading of the Start screen, or by using the File New Flash Document menu command, create a new Flash document. You will save this file using the
Save your new document as box.fla in your working directory, using the File Save menu option. Alternatively, you can press Ctrl-S (Win) or Cmd-S (Mac) to save the file.

Note: Throughout this book, exercises will frequently build upon previous exercises. Usually, you'll be told when you no longer need a file, or when to start another file for a new topic or for experimentation. So, as a new series of steps begins, assume you're continuing your work, unless otherwise stated. You will also occasionally be prompted to compare your work to the sample files at major milestones. Feel free also to check your progress against interim steps at any time.

Now, take a moment to look around the world of Flash. Notice the Tools panel, shown in Figure 1-2. (If your Tools panel isn't visible, open it using the Window Tools menu command.) Many tools will look familiar if youve worked with other graphics programs. As you roll your cursor over each tool in the panel, a tool tip indicates its name and shows its keyboard shortcut in parentheses. For example, you can select the Rectangle tool by pressing R. The Options portion at the bottom of the Tools panel reflects options for the currently selected tool. This context-sensitive area changes depending on which tool is active.

Figure 1-2. The Flash interface, showing the Tools panel, Stage, and Properties panel

1.1.2. Drawing a Rectangle

Begin by drawing a rectangle as a starting point for a new design:

In the Tools panel, select the Rectangle tool, indicated in Figure 1-2.
Roll your cursor over the Stage (the large white area in the document window, also seen in Figure 1-2). Your cursor should look like a cross-hair.
Click and drag somewhere on the Stage to create a rectangle. As you can see, using the Rectangle tool in Flash is similar to using the same tool in other programs.

1.1.3. Using Undo and the History Panel

You are probably familiar with the Undo command from your experience with other programs. When you use the Edit Undo menu command, or press Ctrl-Z (Win) or Cmd-Z (Mac), Flash will attempt to undo your last action. (Some things cant be undone; in this case, Flash will try to warn you before proceeding.)

Take a moment now to undo your rectangle creation. If you followed the steps described previously, you should now have an empty Stage. If not, continue to use the Undo command until your Stage is empty.

By default, Flash will store the 100 most recent undoable changes you have made to your open documents. Several hundred levels of undo can be stored, but they require memory. With each additional step you store, more system memory is consumed. Refer to Appendix A for information on how to change this setting.

You can see the undo list in action by opening the History panel, shown in Figure 1-3, using the Window Other Panels History menu command. Once you have opened this panel, draw a few boxes on the Stage again, and watch the history list grow. After adding a few items, use the draggable arrow on the left side of the panel to slide up the list. As you move further back in history, you will see your boxes disappear as your actions are undone. Great, huh? It gets better. In Chapter 2, you'll learn how to use the History panel to help automate tasks.

Flash 8 now offers both Document Undo and Object Undo modes. Document-level undo maintains a single list of all undoable actions for the entire Flash document. Object-level undo maintains separate lists of your actions for each major object (such as buttons and similar items) in your document. Object-level undo is more flexible, because you can undo an action in one object without having to also undo more recent actions in other objects.

Figure 1-3. The History panel

However, it can sometimes be advantageous to use document-level undo, and you should bear in mind that switching between the two modes will clear your current history. (Your document will not be affected, but your history list will be emptied.) So, experiment to see which you prefer, and be cautious when switching undo modes.

1.1.4. Drawing a Perfect Square

Drawing a perfect square is simpler than it sounds. All you need to do is hold down the Shift key while drawing the square. This technique, common to many graphics applications, is called "constraining." This is because the Shift key constrains the shape into a square while it's being drawn, even if you accidentally describe a rectangle with your mouse movement. This is a great way to ensure that your squares are actually square. The same rule applies to the Oval tool for drawing perfect circles and the Line tool for drawing straight lines.

What if you want to create a box that is exactly 300 x 300 pixels? In this case, you can use numeric input to get the exact shape you want. Here's how:

If you haven't already done so, delete everything on the Stage.
Select the Rectangle tool, and click and drag on the Stage to draw a rectangle.
When you're done, choose the Selection tool (shown in Figure 1-2) from the Tools panel.
Double-click inside the box you just drew to select both the box and its border.
Note: Flash allows you to select individual fills and strokes separately, so be sure you select both when desired. See the "Fills and Strokes" sidebar for more information.
With the box selected, locate the Properties panel, shown in Figure 1-4. (If necessary, open it with the menu command Window Properties.) The Properties panel looks different in this figure than it did in Figure 1-2 because its contents change depending on what is selected. At the bottom of Figure 1-2, the Properties panel displays the Stages properties. In Figure 1-4, it displays properties for the selected rectangle.
The W and H fields in the Properties panel represent the rectangle's width and height. The relative proportions of width and height can be constrained by clicking on the lock icon to the left of these fields. In this case, this is fine, as you are drawing a square. However, if you want freedom to enter any width or height, you'll need to click on the icon to unlock it, as pictured in Figure 1-4. Enter 300 for the width and 300 for the height. You now have a precisely sized rectanglea perfect square.
Save your work.

Note: Don't worry if you can't get an exact number when entering property values. Flash does its best to give you the value you request, but it isn't always easy to achieve exact sizing or positioning at the sub-pixel level. If you get values like 299.9 or 300.1, the difference will usually be unnoticeable.

Figure 1-4. The Properties panel, as it appears when a shape is selected

1.1.5. Adjusting Caps and Joins

You may have noticed, during your experimenting, that you haven't been getting nice sharp corners. Flash's default behavior uses rounded stroke corners and end caps, but Flash 8 finally introduced the ability to customize the cap and join settings of your strokes. The Cap setting dictates the appearance of the ends of the lines, while the Join setting defines the appearance of corners. As you can see in Figure 1-4, both settings can be found in the far right of the Properties panel when a shape with strokes is the active selection.

Caps can be set to None (the line ends precisely at the end point), Round (a round cap is placed on each end of the line), or Square (a square cap is placed on each end of the line). Joins can be set to Miter (sharp corner), Round, (rounded corner), or Bevel (two-point corner).

Figure 1-5 shows the results of each setting. All the line widths are the same, and all shape end points terminate at the dotted lines. From top to bottom, the features used are: 1) Cap: None, Join: Miter; 2) Cap: Round, Join: Round; and 3) Cap: Square, Join: Bevel.

Figure 1-5. Cap and join differences

Note: Cap settings add to the apparent length of a line. Notice in Figure 1-5 that although all the lines end at the same horizontal or vertical positions, those with caps appear longer.