Flash CS4 Professional in 24 Hours- P2 pptx

ptg Getting Your Bearings 21 used to it. If you end up with a bad configuration, you can always use Win- dow, Workspace, and choose one of the built-in workspace settings to get things back under control. Because the Flash panels behave unlike other software packages, the fol- lowing rundown brings you up to speed (see Figure 1.12). First, every panel has an Options menu at the top right of the title tab. This menu provides additional options related to each particular panel, though often it’s just a link to Help documents. To organize panels, you can minimize any panel by clicking the button near the top right of the panel. When minimized, you only see the panel’s tab on a button. You can click a panel’s icon to make that panel temporarily fly out. When you’re done with the panel, it goes back to the button view. In this way, the panels are still available but nearly completely out of sight when they’re not needed. To undock a panel, you can just drag it by the title tab. As you drag, you get a preview of the other panels it can snap to when you let go by paying at- tention to the blue highlighting line that appears. You can even dock two floating panels together to make a group. There’s one more thing to notice about docking panels around the outside of the interface. You can see in Figure 1.12 that the rightmost column includes panels that are docked but also expanded. You can resize the column width by clicking and dragging the bottom right corner to make it wider, but there’s a limit to how narrow you make it. 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 are able to quickly organize the panels as needed. Fly-out panel Resize Options Menu Minimize or Maximize Minimized Panel buttons Title tab Close FIGURE 1.12 The anatomy of a panel. TIP Preventing Panels from Getting Docked It can be frustrating if, while dragging a panel into a new posi- tion, the panel keeps getting docked or grouped with another panel. Simply hold the Ctrl key (Command on a Mac) while drag- ging, and you keep the panel from docking. From the Library of Lee Bogdanoff ptg 22 HOUR 1: Basics The Library The Library is the repository of all the media elements used in a Flash file. You learn to love the Library for many reasons, as discussed in further de- tail in Hour 4, “Staying Organized with the Library and Layers.” 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 of your final Flash movie. For example, if you put a drawing of an ant in the Library, you can then drag 10 copies of the ant from the Library panel onto the Stage; but deep inside the Flash file, only one cloud exists. Reusing graphics in the Library is one way you can keep Flash movies smaller. In practice, the Library provides you with access to all the graphics avail- able for use in the current Flash movie you’re working on. The Library helps you locate specific elements you are using in your movie and, if you need to, edit them. You often need to edit the contents of one of your Li- brary items. Suppose, for example, the drawing of the ant we just men- tioned needs to be altered. Maybe you forgot that ants have 6 legs, and you drew it with 8. You can edit the single ant stored in your Library, and all 10 ants in your movie automatically update to have the correct number of legs. You might need to access the Library panel to organize all the contents or to drag copies (known as instances) of the drawings (known as symbols) into your Flash movie. For example, in the case of the ant drawing, you drag 10 instances of the ant symbol. In this case, you are not changing anything in the Library; you are just reusing symbols stored inside it. A symbol is the name for a visual element you create and place in a file’s Li- brary. After it is in the Library, copies of the symbol can be used multiple 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 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 we wanted to briefly introduce it here. You learn much more about the Library starting in Hour 4. From the Library of Lee Bogdanoff ptg Getting Around in Flash 23 Getting Around in Flash As mentioned earlier in this hour, an important concept in Flash is to un- derstand where you are at all times. If you think you’re in the Library, edit- ing the contents of a symbol, for example, you have a problem if you are in fact editing something on the main timeline. It can be confusing because al- though it’s always possible to figure out where you are in Flash, you can easily get lost. The following sections look at how you can determine where you are in the interface. The Current Layer Although there’s just one main Timeline, Figure 1.9 showed you that you can have multiple layers on the Timeline. Give it a try: Open a new file and add a layer by clicking Insert, Timeline, and Layer. It is important to realize you can only work in one layer at a time. That is, if you draw or paste graphics, they are added to the currently active layer. The current layer is the layer with the pencil icon, as shown in Figure 1.13. You can single-click another layer to make it the active layer. (Notice the pencil moves to the layer you click.) The key is to always pay attention to which layer you’re currently editing. FIGURE 1.13 Not only is the current layer high- lighted, but it also has the pencil icon, indicating that this is the layer where anything that is drawn or pasted appears. The Current Frame In the Timeline, a red vertical marker indicates which frame is currently be- ing viewed (see Figure 1.14). This red current-frame marker can be in only one frame at a time—the frame you’re currently editing. It’s important to re- alize where this current-frame marker is located at all times. Right now, you might find that you can’t move the current-frame marker past Frame 1 be- cause your movie only has one frame. If it helps, imagine a time machine. You can visit any moment in time, but you can visit only one moment at a time. From the Library of Lee Bogdanoff ptg 24 HOUR 1: Basics The Current Scene or Current Symbol By far, the most difficult concept for new Flash users is that in Flash, more than one Timeline exists! A large or complicated movie can be broken into multiple scenes. You can think of scenes as chapters in a novel. Deep inside Flash, there’s always one long Timeline (just like a novel has one continu- ous story), but if you break a file into scenes, you can access the scenes indi- vidually. This is a nice feature because it means you can easily change the order or sequence of the scenes. You should make a point of paying atten- tion to which scene you’re currently working on. The name of the current scene is always listed above the Stage on the left; it appears on what is called the Edit Bar. The default name is “Scene 1,” and you should see this next to the icon for scenes—a movie “clapper” (see Figure 1.15). FIGURE 1.14 The red current-frame marker (on Frame 11) can be in only one frame at a time. Current Scene FIGURE 1.15 Above the top-left corner of the Stage, you see the name of the cur- rent scene (in this case, Scene 1). The clapper icon indicates that this is the name of a scene. CAUTION Deleting Frames Versus Deleting Items Onstage Although you learn much more about making edits to your Time- line and Stage in the upcoming hours, it probably won’t hurt to tell you one of the most com- mon errors that relates to know- ing where you are. When you click the Timeline, you actually select items that are on the Stage. This means that if you press the Delete button, you delete the items on the Stage, not just the cell or Frame in the Timeline. New users often as- sume if they click a Frame in the Timeline and press Delete that Frame will be deleted. To do that, you need to right-click and select Remove Frame. Remem- ber, the Delete button deletes objects on the Stage, not the current Frame. From the Library of Lee Bogdanoff ptg Getting Around in Flash 25 The Edit Bar often includes more information than is shown in Figure 1.15. When you learn more about the Library in Hour 4, you see how you can nest instances of symbols inside other symbols. When you double-click a complex object, such as a symbol to edit it, everything else on the Stage dims, indicating that those other items are not editable. (This behavior of going inside one object to edit its contents also applies to grouped objects and so-called drawing objects—both of which you learn more about next hour.) In all cases, the best way to determine exactly what you’re currently editing is to look at the Edit Bar. You might see “Scene 1: Car: Rotating Wheels : Wheel” (as shown in Figure 1.16). This means that you’re in the Wheel symbol that is inside the Rotating Wheels symbol that is inside the Car symbol, which is all in Scene 1. Sounds a bit confusing? It won’t. The Edit Bar is very clear—you just have to remember to pay attention to it to keep track of where you are. Navigating Through the Interface You’ve seen how the Flash interface gives you clues that tell you where you are at all times. But how did you get where you are in the first place? And how do you get out? Navigating through a Flash file is easy. Let’s look at a few ways to get around. Edit Bar FIGURE 1.16 The Edit Bar indicates you’re deeply nested inside a symbol (Wheel) that’s nested inside other symbols. From the Library of Lee Bogdanoff ptg 26 HOUR 1: Basics The Edit Bar contains the hierarchy of your current location, and it also pro- vides a means of navigation. If, for example, you’re inside a symbol within Scene 1, you should see “Scene 1: SymbolName.” If you simply click Scene 1, you are taken back to that scene (see Figure 1.17). Any time you see the Edit Bar, you can click on it to navigate back through the hierarchy. Finally, you should notice two menus way off to the right of the Edit Bar: Edit Scene and Edit Symbol (see Figure 1.18). From these two menus, you can jump to any scene or symbol in the current movie. Of course, if you have no symbols and just one scene, using these menus won’t be very inter- esting. However, in big files, these menus provide a quick way for you to get around. There are plenty of ways to get around in Flash, and you see them all in this book. For now, try to feel comfortable moving around and be sure to notice the information that Flash provides to tell you where you are. How Not to Get Lost As a reference, the following is a list of common ways to get lost and how to find your way home. This is a list based on experiences from teaching Edit scene Edit symbol FIGURE 1.18 The Edit Scene and Edit Symbol menus are always accessible at the top right of the Stage. They provide the most reliable way to navigate to other scenes and symbols. Link to Car symbol FIGURE 1.17 The Edit Bar provides more than just information. You can click the arrow or any name listed to jump back through the hierarchy. For ex- ample, you can click Car to jump all the way back to the Car symbol. From the Library of Lee Bogdanoff ptg Getting Around in Flash 27 new students—as well as our own experiences getting lost! We’re including things that you haven’t been exposed to yet, so you might want to book- mark this page and revisit it later. . Edit Bar—By far the most common problem is overlooking the fact that the Edit Bar has changed to indicate you’re inside a symbol, group, or drawing object. We’ve said to keep an eye on the Edit Bar, but what if it’s gone? Amazing, but true: You can hide and restore the Edit Bar via the Windows, Toolbars, and Edit Bar menu. We can’t imagine selecting this on purpose, but if for any reason you can’t find it, now you know how to bring the Edit Bar back. . Changing colors—The half-dozen or so color swatches can determine the color you’re about to draw as well as change an existing color. Re- member, if you have something selected, it changes when you change the color swatch. Only when nothing is selected can you set the color for what you’re about to draw. Plus (and this becomes clearer next hour), there can be two colors for an object: the outline color, known as the stroke, and the inner color, or fill. You see a pair of swatches quite often indicating these independent colors. . Properties panel—It’s important to know what sort of object you have selected. For example, if you draw a shape with the Brush tool, the Properties panel displays “Shape” when you select that shape. People often forget the Properties panel tells you what you have se- lected. You may think something is a shape (or other type of object), but use the Properties panel to know for certain. . Info panel—The Info panel displays (and enables you to edit) the size and location of any selected object. In addition, it has a little button that toggles between showing a circle in the bottom right or a plus sign in the top left. This makes the Info panel reflect coordinates for the selected object’s registration point or its transform point. The plus indicates you’re viewing the registration point option, which is usu- ally the object’s top-left corner. The little circle means you’re viewing the object’s transform point (usually its center). What’s very easy to overlook, however, is the Properties panel’s X and Y fields always re- flect the object’s registration point. That’s it for the big pitfalls. There are more, but we’ll be sure to guide you past them as you encounter them in later hours. From the Library of Lee Bogdanoff ptg 28 HOUR 1: Basics Document Properties You need to set a few movie-wide settings early in the creation of any movie (things like the background color and height and width). Most of these are found in the Document Properties dialog box, shown in Figure 1.19, which you access by clicking Modify, Document, or by double-clicking the bottom of the Timeline (where you see 12 fps). You should access the Document Properties dialog box now, so you can experiment with a few of its settings. (Notice most of the same settings appear in the Properties panel if you click the Stage or otherwise deselect all objects.) First of all, you need to make sure that Ruler Units is set to Pixels. This is the standard unit of measurement in multimedia and web pages. It’s im- portant to set Ruler Units to Pixels because this affects several other dialog boxes (including the Info panel). Next to Background Color, you should see a white swatch that, when clicked, enables you to change the Stage color. When you publish a movie to the web, you can specify any background color you want, and it overrides this setting; it’s smart practice to design against the background color you will ultimately use on your web page. Feel free to change the Background Color any time you want while you are editing, but remember to test against the final color of your web page where the Flash will be running. Maybe gray is easier on your eyes, or black makes selecting white graphics easier. Do whatever you want—it only affects the Stage color while you you’re editing, and you can change this setting later. Two other Document Properties dialog box settings are important to estab- lish early in any project: Frame Rate and Dimensions. Frame Rate specifies the rate—that is, how many frames per second—at which Flash attempts to play. We say attempts because some of your users might not have a com- puter fast enough to keep up, so Flash can’t display the specified number FIGURE 1.19 The Document Properties dialog box provides many global movie settings that should be determined at the beginning of every project. From the Library of Lee Bogdanoff ptg Document Properties 29 of frames in a second. Flash does not exceed the frame rate you specify, but it can get bogged down and not keep up. Dimensions are important in that they affect the aspect ratio of your Stage. You need to decide up front on the shape for your Stage. (Sorry, it can’t be round.) Do you want a wide- screen CinemaScope look, or do you want a square Stage? You might even want a vertical rectangle, like for a button bar to appear on the left side of a web page. You need to consider this early on because the Stage shape influ- ences how you position graphics and changing it later makes for a lot of repositioning. People often confuse frame rate with speed, which is more of a visual effect. Animators can use tricks to make something appear to speed across the screen even while using a very low frame rate. For example, if you see a picture of a car on the left side of the screen and then the car appears on the right side of the screen a fraction of a second later, it might tell your brain that the car is moving fast. However, such a trick requires only two frames, and at a frame rate of 4 fps, the second frame appears only a quarter second after the first! Frame rate—that is, how many chunks into which each sec- ond is broken—controls the visual resolution. Four frames a second may look “chunky”—each change occurs only four times a second. However, 30 fps (equivalent to the frame rate of TV) is such a fine increment that you’re not likely to see the steps between discrete frames. (Although, of course, that’s what’s really happening.) By the way, you can still move a car across the screen in a quarter of a second by using 60 fps—it would just involve 15 frames. You explore this topic in great detail in Hours 7 and 8, “Using Mo- tion Tweens to Animate”. File Types Clearly, the most common use for Flash is to create interactive animations for the web. Sifting through all the different file types involved can be a lit- tle confusing. At a minimum, you need to understand three types: source ( .fla) files, exported (.swf) files, and or Hypertext Markup Language (HTML— .htm or .html) files. From the Library of Lee Bogdanoff ptg 30 HOUR 1: Basics Source (.fla) Files One of the two main file types in Flash is the source Flash movie that you save while working. It uses the file extension .fla (often pronounced “fla”). You can open and edit any .fla file, provided you own Flash. This is your source file. With the .fla file, you can always restore the other file types—but nothing can restore a .fla file (except, maybe, doing all the work over again). When sharing files with others who need to edit the source file, you share the .fla file. Anyone who has Flash CS4 (for either Mac or Windows) can open and edit the .fla file you create. However, you can’t put .fla files into a web page for people to view—they’re just files that contain your source content. Exported (.swf) Files When you’re finished editing a source file and ready to distribute your cre- ation, you simply export a .swf (pronounced “swif”) Flash Player file. A .swf file can be viewed by anyone who has an Internet browser and the Flash Player plug-in. The audience can’t edit the .swf—they can only watch it. The process for creating a new .swf file is simple. You open a .fla file, click File, Export Movie, and then specify the name and file location for the .swf file in the Export Movie dialog box. Although more details are involved, the important point to understand is that exporting involves creating a new file (the .swf file), but the .fla file remains untouched. It’s similar to using Save As or Save a Copy As in some other software programs. Whatever you do, you should always keep a copy of your .fla file. You can always create more .swf files from it—or make edits, and then create more .swf files. CAUTION Saving as Flash 8 You can actually save a Flash CS4 .fla file to share with a coworker who only has Flash CS3. When you select File, Save As, you need to select Flash CS3 Document from the Save As Type drop-down. Flash strips out any features your file uses that are available only in Flash CS4 (and warns you, too). This feature is great during the transition when people upgrade. CAUTION Beware of Fonts There’s one last thing you need to understand now, which applies if you work in a team environment or otherwise plan to exchange .fla files among different ma- chines: Any .fla file you work on opens fine on any machine that has Flash installed. On a Mac, you might need to open Flash, and then select File, Open. On Windows, you might need to make sure that the file is named with the extension .fla. However, there’s one big catch: The font choice for any text in the .fla file must be present on the machine that is attempting to cre- ate the .swf file. It’s not that you can’t share a file if one person’s machine is missing a particular font. Rather, that person cannot edit the text or create a .swf file that has the correct font; he must select a substitute font. Any time you open a .fla file that contains fonts that you don’t have installed, you are given the chance to map From the Library of Lee Bogdanoff [...]... without changing the underlying line So much for theory of lines! In the following task, you draw some From the Library of Lee Bogdanoff 40 ▼ TRY IT YOURSELF Draw and Change Lines HOUR 2: Drawing and Painting Original Art in Flash In this task, you begin to draw and manipulate lines Follow these steps: 1 Start a new file by pressing Ctrl+N and selecting Flash File (ActionScript 3.0) Lines can have... zoom in, one normal pixel can take up several actual pixels on the monitor Not using Stroke Hinting is great for accuracy, but can make thin lines appear slightly blurry because Flash is effectively rounding some points up and rounding other points down Select Stroke Hinting to ensure sharp-looking lines Just realize if you zoom way in, the lines might not appear exactly where you position them Finally,... color, a stroke height, and a stroke style In addition, strokes have settings for Cap (how the line ends) and Join (the look of a corner where two lines meet) What’s interesting is that the geometric definition of a line—the distance between two points—doesn’t include mention of color, thickness, or style It’s best to think of a line as an infinitely thin line that has a color, stroke (or thickness),... “computery,” containing clean lines and solid colors—not in Flash After you get a feel for drawing in Flash, you should understand why Flash has been called “vector clay”—it’s a vector format at heart, but it can be molded naturally like clay From the Library of Lee Bogdanoff 36 HOUR 2: Drawing and Painting Original Art in Flash Drawing on the Stage Remember from Hour 1, “Basics,” that everything your audience... Putting a Flash( .swf) file in a web page is almost as easy as putting a picture in a web page A few other details (in addition to the filename of the swf) can be included, such as the background color, whether you want the movie to loop, and other interesting settings that are unique to Flash To make this process even easier, Flash includes a feature called Publish (discussed in Hour 20, “Linking a... to include an extra circle, indicating a click encloses the shape you’re drawing FIGURE 2.15 When clicking to make an anchor point, if you drag (to the right, in this case), you establish a tangent for the curve that’s created HOUR 2: Drawing and Painting Original Art in Flash In this task, you use the Pen tool to draw controlled shapes Follow these steps: 1 To begin, open a new document We’re going... Bogdanoff HOUR 2 Drawing and Painting Original Art in Flash Believe it or not, Flash began its existence as drawing software The creators of Flash intended to make a “more natural” drawing tool Flash has evolved to become an animation tool and, now, even a rich application development platform Because you are animating images, it’s convenient if you can draw these images right inside Flash This hour exposes... fundamental drawing concepts in Flash think of it as your basic training There’s a lot to cover, and you might find that it actually takes a little longer than one hour to complete This lesson’s length gives you ample chance to play with all the tools WHAT YOU’LL LEARN IN THIS HOUR: How to draw and paint in Flash The difference between lines and fills How to draw geometrically perfect shapes in Flash If... panel or pressing N As you might have guessed, the Line tool draws straight lines When your cursor is on the Stage, it changes to a crosshair Click and drag to create a line You might notice a dark ring that appears when you drag your line horizontally or vertically from the starting point This is Flash s way of assisting you while drawing You find drawing perfectly horizontal and vertical lines to be... gives you something to change or remove later Let’s go through each tool individually, and then analyze how they can be used together Drawing Lines Two tools are available for just drawing lines: the Line tool and the Pencil tool (To be fair, the Oval and Rectangle tools draw lines, but they also draw fills at the same time, as you see in the “Painting Fills” section, later in this hour.) Lines can be . naturally like clay. HOUR 2 Drawing and Painting Original Art in Flash From the Library of Lee Bogdanoff ptg 36 HOUR 2: Drawing and Painting Original Art in Flash Drawing on the Stage Remember from. underlying line. So much for theory of lines! In the following task, you draw some. From the Library of Lee Bogdanoff ptg 40 HOUR 2: Drawing and Painting Original Art in Flash 2. Select the Line. Bogdanoff ptg Getting Around in Flash 23 Getting Around in Flash As mentioned earlier in this hour, an important concept in Flash is to un- derstand where you are at all times. If you think you’re in the