|< 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:
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 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:
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.
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:
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.
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 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 >|