Getting Your Bearings

 < Day Day Up > 

The key to understanding Flash is always knowing where you are. You're given the power to edit everything: static graphics, animations, buttons, and more. At all times, you need to be conscious of what you're currently editing. It's easy to become disoriented about exactly what element you're working on. This section helps you get your bearings.

Let's take a quick tour of the Flash workspace:

  • The Stage is the visual workspace. Any graphics placed in this area will be visible to the user.

  • The Tools panel contains all the many drawing tools in Flash, including more that you can add later (by selecting Edit, Customize Tools Panel). The Flash tools are covered in depth in Hour 2, "Drawing and Painting Original Art in Flash."

  • The Timeline contains the sequence of images that make an animation. The Timeline can also include many layers of animations. This way, certain graphics can appear above or below others, and you can have several animations playing simultaneously.

  • Panels are "docked" next to other panels around the outside of the Stage. Alternatively, you can undock them so that they appear to float above everything else. You can also group two or more floating panels together. (On a Macintosh, the panels always float and can be grouped together; they just can't be docked to the Stage.) Basically, you can organize panels to suit your work style.

User is a general term that refers to the person watching your movie or visiting your website. Within this book, I refer to the user frequently. Occasionally, I call the user the audience. I've even heard the user referred to as the witness. It really doesn't matter which term you use just realize that there's you (the author, creator, designer) and then there's the user (or audience, witness, or whatever term you like). As the author, you'll be able to make edits to the Flash movie, whereas the user can only watch and interact with the movie.

The Stage

The large white rectangle in the center of Flash's workspace is called the Stage. Text, graphics, photos anything the user sees goes on the Stage (see Figure 1.3).

Figure 1.3. The Stage is the large white box in the center. All the visual components of an animation are placed on the Stage.


Think of the Stage as the canvas on which a painter paints or the frame in which a photographer composes pictures. Sometimes you'll want a graphic to begin outside the Stage and then animate onto the Stage. Off the Stage is the gray area around the outside of the white area. You can see the "off Stage" area only when the View menu shows a check mark next to Work Area. The default setting (Work Area checked) is preferable because it means that you can position graphics off the Stage. Realize, however, that any changes you make to the View menu affect only what you see. Changes here have no effect on what the user sees.

There's not too much to learn about the Stage it's simply your visual workspace. However, two important concepts are worth covering now: Stage size and zoom level. By default, the Stage is a rectangle that is 550 pixels wide by 400 pixels tall. Later in this hour, in the "Document Properties" section, you'll see how to change the width and height of a movie. However, the specific dimensions in pixels are less important than the resulting shape of the Stage (called the aspect ratio). The pixel numbers are unimportant because when you deliver a Flash movie to the Web, you can specify that Flash scale to any pixel dimension.

Aspect ratio is the ratio of height to width. Any square or rectangular viewing area has an aspect ratio. For example, television has a 3:4 aspect ratio that is, no matter how big a standard TV screen is, it's always three units tall and four units wide. 35mm film has an aspect ratio of 2:3 (such as a 4x6-inch print), and high-definition television (HDTV) uses a 16:9 ratio. Most computer screen resolutions have an aspect ratio of 3:4 (480x640, 600x800, and 768x1024). You can use any ratio you want in a web page; just remember that the portion of the screen you don't use will be left blank. A "wide-screen" ratio (as wide as 1:3, like film) will have a much different aesthetic effect than something with a square ratio (1:1).

To scale means to resize as necessary. A Flash movie retains its aspect ratio when it scales, instead of getting distorted. For example, you could specify that a Flash movie in a web page scale to 100% of the user's browser window size. You could also scale a movie with the dimensions 100x100 to 400x400.

Not only can you deliver a Flash movie in any size (because Flash scales well), but while working in Flash, you can zoom in on certain portions of the Stage to take a closer look without having any effect on the actual Stage size. The following task introduces a couple tools that are important to the Stage.

Try It Yourself:Change Your View on the Stage

In this task, you'll explore view settings. Follow these steps:

1.

Instead of working from scratch, open an existing file. Select File, Open to open the Open dialog box and find the file called ScriptableMasksPart2.fla. Adjacent to your installed version of Flash 8, go inside a folder called Samples and Tutorials, then inside a folder Samples, then to Masking, and finally into the folder called ScriptableMasksPart2.

2.

Notice the Zoom control at the top right of the Stage above the Timeline (see Figure 1.4). This control provides one way to change the current view setting. Other ways include selecting View, Magnification and using the Zoom tool (the magnifier button in the Tools panel), which you'll learn about in more detail in Hour 2.

Figure 1.4. The Zoom control allows you to zoom in on or zoom out of the Stage. Zooming has no effect on what the audience sees.


3.

Change the Zoom control to 400%. Notice that everything becomes bigger. You haven't really changed anything except your view of the screen.

4.

Unless you have a huge monitor, you probably can't see the whole Stage. However, you can view the other parts of the Stage in one of two ways: by using the standard window scrollbars on the right and bottom or by using the Hand tool. The Hand tool is best accessed by simply holding down the spacebar. Go ahead and hold down the spacebar; then click and drag. You're panning to other parts of the Stage without actually moving anything. It's important to understand that the Hand tool only changes your view port onto the whole Stage. The best thing about using the spacebar to select the Hand tool is that it's "spring loaded" that is, the Hand tool is active only while you hold down the spacebar. In Hour 2, you'll learn about other spring-loaded tools.

6.

Now change the Zoom control to Show All. No matter what your screen size, Flash scales the Stage to fit your window.

7.

Several interesting tools are available from the View menu, including grids, guides, and snap settings. Select View, Grid, Show Grid. Behind all the graphics onstage, you see a grid (which the user won't see), as shown in Figure 1.5. For this example, click once on the eyeball at the top left of the Timeline to temporarily hide all the graphics (so that you can more easily see the grid). You'll see next hour how the grid can help you line up graphics perfectly. Notice that after you select View, Grid, you can select Edit Grid to edit the color and spacing of the grid. Turn off the grid now by selecting View, Grid, Show Grid (so that there's no check mark next to this menu item). Click the eyeball again to reveal the graphics.

Figure 1.5. Turning on the grid helps you align objects.


8.

Guides are just like the grid in that they help you align graphics and they don't export with the movie. Guides differ from the grid in that that you drag Guides into place where you want them. First, select View Rulers (so that there's a check mark next to this item). Now you can click either ruler and drag toward the Stage to create and put into place a single guide, as shown in Figure 1.6. You make vertical guides by dragging from the left-side ruler, and you make horizontal guides by dragging from the top ruler. To remove the guides, drag them back to the ruler. As with the grid, you find the option to edit the guide settings as well as a way to lock the guides in place by selecting View, Guides, Edit Guides.

Figure 1.6. Guides are similar to the grid, but you can position the vertical and horizontal lines wherever you want them.


9.

Close the file without saving.

The Tools Panel

The Tools panel is the panel with which you will likely become most familiar. Any time you create or edit anything on the Stage, you need to have one tool selected from the Tools panel. On Windows, the Tools panel is dockable. The default location is docked to the left side of the Flash interface (or, on a Mac, floating on the left).

Although the Tools panel is used primarily to draw on the Stage, it's also used to edit what you've already drawn. As shown in Figure 1.7, the Tools panel is actually broken into several sections: Tools, View, Colors, and Options.

Figure 1.7. The Tools panel has tools for drawing, editing, and viewing, plus options that vary, depending on the currently selected tool.


The Tools section enables you to create graphics and text (via the Line tool and the Text tool), to edit graphics (via the Eraser tool and the Paint Bucket tool), and to simply select graphics (via the Selection tool, the Subselect tool, and the Lasso tool). You'll learn about all these tools next hour. The View section lets you change your view of the Stage (as you did in the preceding task). The Colors section gives you control over the color of objects drawn. Finally, the Options section is dedicated to additional modifiers for certain tools. Depending on what tool is selected, you might not see anything in the Options section.

You'll look at these tools in detail in the next few hours (in particular, Hour 2 and Hour 5, "Applied Layout Techniques"). For now, go ahead and play with these tools. If you think you lost the Tools panel, you can restore it by selecting Window, Tools.

The Timeline

You'll look at the Timeline in depth when you start animating in Hour 7, "Animation the Old-Fashioned Way." Nevertheless, you'll take a brief tour of the Timeline now. The Timeline contains the sequence of individual images that make up an animation. When the user watches your animation, he sees the images on Frame 1 followed by Frame 2, and so on. It's as if you took the actual film from a conventional movie and laid it horizontally across the screen, with the beginning on the left and the end toward the right.

Like many other windows, the Timeline can be undocked so that it floats above everything else, as shown in Figure 1.8. Docking is just one more way to organize your workspace. (I should note, however, that unlike regular panels, the Timeline and the Tools can't be grouped with other panels. So, in that way, they're unique.) Personally, I like the default arrangement, with the Timeline above the Stage and the Tools panel to the left. I use this arrangement for most of the figures throughout this book. Because the Timeline is a unique panel, know that you can always get it back by selecting Window, Timeline. (See the section "Organizing the Workspace," later this hour, for more details.)

Figure 1.8. The Timeline (and other panels) can be picked up and moved like any floating window. This lets you customize your workspace.


When you start to create animations, the Timeline includes many visual clues to help you. For example, you can quickly see the length of an animation simply by looking at the Timeline. Also, Flash uses a few subtle icons and color codes in the Timeline; this way, you can see how the animation will play.

In addition to frames, the Timeline lets you have as many layers as you want in animations. As is the case with other drawing programs, objects drawn in one layer appear above or below objects in other layers. (You may have noticed earlier this hour that the ScriptableMasksPart2.fla file has several layers.) Each layer can contain a separate animation. This way, multiple animations can occur at the same time. By using layer names and special effects (such as masking), you can create complex animations. Figure 1.9 shows the Timeline and layers of a finished movie. You'll learn more about layers in Hour 11, "Using Layers in Animations."

Figure 1.9. Most animations involve many layers. Each layer is independent of the others.


The Properties Panel

Certainly, you'll be faced with more windows in Flash than just the Stage, Tools panel, and Timeline (although these are the basic ones). This section looks at the multipurpose Properties panel (also sometimes called the Properties Inspector, or PI for short though I'll call it the Properties panel throughout this book).

All panels let you view and change properties of objects. Although you can find nearly two dozen panels listed in the Window menu, you will use one panel almost all the time the Properties panel. The Properties panel displays properties of the currently selected object so that you can make adjustments. For example, when you select a block of text, the Properties panel lets you view and change the font face and size. When you select a filled shape, you can adjust the fill color of that shape. In addition to modifying objects on stage, the Properties panel lets you modify frames in the timeline (when you select one) as well as document properties (when nothing is selected). Although you'll only look at a few variations of the Properties panel this hour, you'll eventually become familiar with all the different panels. (You can see them all listed under the Window menu.) Because there are so many panels, later this hour you'll learn ways to organize them to suit your personal workflow.

As you'll see, using panels is simple. All panels operate in the same manner. You can either keep the panel open and select an object or access the panel after you've selected an object. In either case, the panel always reflects the current settings so that you may modify or change them. For example, to change the font size of some text, you just select the text and then make a change in the Properties panel. The key is to keep the text selected while you access the Properties panel. You can also change properties of several objects at once just select multiple objects (say several blocks of text) and make a change in the panel. (When selecting multiple objects of different types, only the shared properties are visible in the Properties panel.) You'll learn more about all this in the following tasks.

Finally, if nothing is selected, you can still make changes to the Properties panel (or any panel for that matter). Although this may seem to have no effect, you're actually specifying what will happen the next time you create an object. For example, if you first select the Text tool and (before clicking on stage) you make a change to the font in the Properties panel, you'll see that font change in text you create later.

Try It Yourself: Use the Properties Panel to Inspect and Change Fill Colors

In this task, you'll use the Properties panel to inspect and change fill colors. Here are the steps to follow:

1.

Create a new file by selecting File, New to open the New dialog box and then selecting Flash Document and clicking OK. Make sure that the Properties panel is open. Its default location is below the Stage. If you don't see it, just select Window, Properties, Properties. Finally, ensure that the Properties panel is at full size by clicking the tiny arrow at the bottom-right corner of the panel (as shown in Figure 1.10).

Figure 1.10. You can click the Expand/Collapse arrow so that the Properties panel opens all the way, as shown here.


2.

Take a look at the Properties panel and notice the type of information listed (Size, Publish, Background, and so on). The Properties panel is about to change.

3.

Select the Brush tool by clicking once in the Tools panel; if the Tools panel is not available, you need to first select it from the Window menu. Notice that when you simply select the Brush tool, the Properties panel changes. Go ahead and paint a squiggly line on the Stage.

4.

Before you draw again, select a different color from the Fill Color swatch in the Properties panel. Click the swatch and select a different color (as shown in Figure 1.11). This specifies what color you're about to paint.

Figure 1.11. Before you paint again, you can select a new color.


5.

Paint another squiggly line (in the new color) on a blank area of the Stage. Select the Selection toolby clicking the black arrow at the top left of the Tools panel or by simply pressing the V key.

6.

Click once on the first squiggly line to select it. Notice that the Properties panel changes again. Additional information about the shape's coordinates and size appear. While the shape is still selected, change the fill color by clicking the Fill Color swatch in the Properties panel and picking a new color. (By the way, the swatch with a red line through it Stroke Color is for shapes drawn with the Pencil tool.)

By the Way: The Coordinate System

The coordinate system in all multimedia tools (including Flash) refers to locations by pixels in the x (horizontal) axis and the y (vertical) axis. The top-left corner of the screen (or Stage) is considered the origin or 0x,0y. As you move to the right, the x coordinate increases; for example, 100 pixels to the right has the location 100x,0y. As you move down, the y coordinate increases; the bottom-left corner of an 800x600 screen has the location 0x,600y. Just remember that y coordinates increase as you move down (not up, as you might expect). Here's an interesting challenge: What happens if you set the location of an object to 1000x? The object is moved offscreen 1,000 pixels to the left.


7.

Finally, make both squiggly shapes the same color. Make sure that you still have one shape selected and then click and release on the Fill Color swatch. Then (while the cursor looks like an eye-dropper) click the other squiggly shape to sample its color. This is just a quick example of how the cursor changes to tell you what will happen when you click.

The Properties panel adapts to either show you properties of whatever you've selected on the Stage or properties for the tool you've just selected. The following sections explore some text options to solidify this concept.

Exploring Text Options

Flash, and Flash 8 in particular, has some really powerful text options. While in a new file or the file you used in the previous task, you can select the Text tool, click the Stage, and then type a few words. When you finish typing, you can click the Selection tool. From the Properties panel, you can select a different font, change the font size, change the color, and control the text in many common ways. By the way, the Format button on the Properties panel includes additional options related to margins. Flash 8 added a new font display technology called FlashType. By modifying the subtle rendering settings (basically the text's thickness and its smoothing behavior) you can optimize the performance animated text or make the text as readable as possible at different sizes and on different monitor types. You'll explore these options in depth next hour.

Organizing the Workspace

At this point, you've probably explored enough to find that your panels are scattered all over the screen. This brings up an interesting point: You're given a lot of freedom with how you organize your panels. Learning a few concepts will make organizing your workspace easier. There's docked panels, floating panels, and grouped panels. Because the changes you make stick until you change them back, select Window, Workspace Layout, Default in order that you can follow along.

On Windows, docking means panels are locked into the Flash application interface around the outside of the stage like how, by default, the Tools are the left, Properties panel is at the bottom, and Timeline is at the top. Docked panels completely fill the space between the stage and the edge of Flash's application window. The only equivalent to this on Macintosh is how the Timeline is embedded into the primary document window. In addition, you can dock panels above or below each other within a single docked area. For example, the Library panel is docked above the Color Mixer panel (by default) on the right side. The way you dock (or undock) panels is by dragging via the gripper button at the top left of a panel (see the accompanying explanation with Figure 1.12, later).

Figure 1.12. The anatomy of a panel.


If a panel is not docked into the interface then it's floating above it. (Select Window, Align to see an example of a panel that's floating by default.) Additionally, you can dock multiple panels above or below each other into a single floating panel. Finally, regardless of whether a panel is docked or floating, you can also group panels into single tabbed panel which is the case (by default) for the Properties, Parameters, and Filters panels, all grouped together at the bottom. You can think of grouping as stacking the panels in the same location because you can only reveal one at a time the others in the group are accessed via their tab. The variations might sound overly detailed but the options are simply there so you can change the layout. Each panel has its purpose and that's never affected by where you decided to put it. The idea is that you can organize panels to match your work style.

Did you Know?: Hiding Panels

Depending on your screen size, you might find that the panels are preventing you from viewing the Stage. A simple press of the F4 key temporarily hides all the panels (except Tools and Timeline). You can press F4 again to restore them.


In addition to being able to return to the default layout, you can save your own layouts. If you find an arrangement that works well for you just select Window, Workspace Layout, Save Current. You are then prompted to name the set. The name you give the set then appears under Window, Workspace Layout.

Arranging panels can become frustrating if you don't know the basics. Because panels function unlike many computer standards, the following rundown will bring you up to speed as you follow along with Figure 1.12.

First, every panel has an options menu at the top right of the title bar. This menu provides additional options related to each particular panel.

For organizing panels, you need to realize that you can minimize or maximize any panel by clicking the Expand/Collapse arrow (or even just title bar where the panel's name appears). When panels are docked together, expanding one of the panels causes the others to move out of the way and collapsing one causes the others to fill in the extra space.

When a panel is floating (that is, not docked with others), minimizing causes it to appear as just the light blue title bar, with an extra title bar above for moving the group around.

To undock a panel, you must drag by the gripper handle (which is the vertical set of dots at the far left of the light blue title bar). You must drag the panel by this handle to undock or redock it with other panels. As you drag, you get a preview of which other panels it will snap to when you let go. You can even dock two floating panels together to make a group. The uppermost floating panel has an extra drag title bar (above the panel's light blue title bar). Dragging by this drag title bar moves a panel (or panel group), with no chance of it becoming docked to another. In addition, this drag title bar includes a button you can use to close the panel.

To create a new group of panels you always must use the options menu and select "Group Panel with" from which you can select one of the other panels or panel groups already present. To take a panel out of a group (or to start a new one), you use the panel's options menu and select Group Panel with New Panel Group.

It might take some time to get used to how the panels behave, but it's worth taking the time to play around. After you get it, you'll be able to quicklyorganize the panels as needed.

The Library

The Library is the best storage facility for all the media elements used in a Flash file. You'll learn to love the Library for many reasons, as discussed in further detail in Hour 4, "Using the Library for Productivity." Media placed in the Library can be used repeatedly within a file, and regardless of how many times you use those media it doesn't significantly add to the file size! For example, if you put a drawing of a cloud in the Library, you can then drag 100 copies of the cloud onto the Stage (making a whole sky full of clouds), but deep inside the Flash file, only one cloud exists. Using the Library is one way you can keep Flash movies small.

In practice, the Library is used in two basic ways: for editing and for maintaining (or accessing) the Library's contents. You might need to edit the contents of one Library item (called a symbol), and when you do, you are editing the contents of the Library. You might also need to access the Library to simply organize all the contents or to drag instances of the symbols into a movie. In such a case, you are maintaining the Library (as opposed to editing its contents).

A symbol is the name for anything usually something visual, such as a graphic shape you create and place in a file's Library. Although different types of symbols exist, the idea is that by creating a symbol, you're storing the graphic once in the Library. After it is in the Library, the symbol can be used several times throughout a movie without having a significant impact on file size.

An instance is one copy of a symbol used in a movie. Every time you drag a symbol from the Library, you create another instance. It's not a "copy" in the traditional sense of the word because there's only one master, and each instance has negligible impact on file size. Think of the original negative of a photograph as the symbol and each print as another instance. You'll see that, like photographic prints, instances can vary widely (in their sizes, for example).

The Library behaves like any other panel but because it's so important I wanted to introduce it here. You'll learn much more about the Library starting in Hour 4.

     < Day Day Up > 


    Sams Teach Yourself Macromedia Flash 8 in 24 Hours
    Sams Teach Yourself Macromedia Flash 8 in 24 Hours
    ISBN: 0672327546
    EAN: 2147483647
    Year: 2006
    Pages: 235

    Similar book on Amazon

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net