Flash CS4 Professional in 24 Hours- P2

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

lượt xem

Flash CS4 Professional in 24 Hours- P2

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash CS4 Professional in 24 Hours- P2: The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task.

Chủ đề:

Nội dung Text: Flash CS4 Professional in 24 Hours- P2

  1. 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). Minimized Panel buttons FIGURE 1.12 The anatomy of a panel. Close Options Minimize or Title tab Menu Maximize Fly-out panel Resize 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 TIP out. When you’re done with the panel, it goes back to the button view. In Preventing Panels from this way, the panels are still available but nearly completely out of sight Getting Docked when they’re not needed. It can be frustrating if, while dragging a panel into a new posi- To undock a panel, you can just drag it by the title tab. As you drag, you get tion, the panel keeps getting a preview of the other panels it can snap to when you let go by paying at- docked or grouped with another tention to the blue highlighting line that appears. You can even dock two panel. Simply hold the Ctrl key floating panels together to make a group. (Command on a Mac) while drag- ging, and you keep the panel There’s one more thing to notice about docking panels around the outside of from docking. 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.
  2. 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.
  3. 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.
  4. 24 HOUR 1: Basics FIGURE 1.14 The red current-frame marker (on Frame 11) can be in only one frame at a time. 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 The Current Scene or Current Symbol Timeline and press Delete that By far, the most difficult concept for new Flash users is that in Flash, more Frame will be deleted. To do than one Timeline exists! A large or complicated movie can be broken into that, you need to right-click and multiple scenes. You can think of scenes as chapters in a novel. Deep inside select Remove Frame. Remem- Flash, there’s always one long Timeline (just like a novel has one continu- ber, the Delete button deletes objects on the Stage, not the ous story), but if you break a file into scenes, you can access the scenes indi- current Frame. 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.15 Above the top-left corner of the Stage, you see the name of the cur- rent scene (in this case, Scene 1). Current Scene The clapper icon indicates that this is the name of a scene.
  5. 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. Edit Bar FIGURE 1.16 The Edit Bar indicates you’re deeply nested inside a symbol (Wheel) that’s nested inside other symbols. 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.
  6. 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. FIGURE 1.17 Link to Car symbol 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. Edit symbol Edit scene 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 FIGURE 1.18 The Edit Scene and Edit Symbol have no symbols and just one scene, using these menus won’t be very inter- menus are always accessible at the esting. However, in big files, these menus provide a quick way for you to top right of the Stage. They provide the most reliable way to navigate to get around. other scenes and symbols. 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
  7. 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.
  8. 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.) FIGURE 1.19 The Document Properties dialog box provides many global movie settings that should be determined at the beginning of every project. 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
  9. 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.
  10. 30 HOUR 1: Basics CAUTION Source (.fla) Files Saving as Flash 8 One of the two main file types in Flash is the source Flash movie that you You can actually save a Flash CS4 save while working. It uses the file extension .fla (often pronounced .fla file to share with a coworker “fla”). You can open and edit any .fla file, provided you own Flash. This is who only has Flash CS3. When you select File, Save As, you need your source file. With the .fla file, you can always restore the other file to select Flash CS3 Document types—but nothing can restore a .fla file (except, maybe, doing all the from the Save As Type drop-down. work over again). Flash strips out any features your file uses that are available only in When sharing files with others who need to edit the source file, you share Flash CS4 (and warns you, too). the .fla file. Anyone who has Flash CS4 (for either Mac or Windows) can This feature is great during the open and edit the .fla file you create. However, you can’t put .fla files transition when people upgrade. into a web page for people to view—they’re just files that contain your source content. CAUTION Beware of Fonts Exported (.swf) Files There’s one last thing you need When you’re finished editing a source file and ready to distribute your cre- to understand now, which applies ation, you simply export a .swf (pronounced “swif”) Flash Player file. A if you work in a team environment .swf file can be viewed by anyone who has an Internet browser and the or otherwise plan to exchange Flash Player plug-in. The audience can’t edit the .swf—they can only .fla files among different ma- watch it. chines: Any .fla file you work on opens fine on any machine that The process for creating a new .swf file is simple. You open a .fla file, click has Flash installed. On a Mac, File, Export Movie, and then specify the name and file location for the .swf you might need to open Flash, file in the Export Movie dialog box. Although more details are involved, the and then select File, Open. On Windows, you might need to important point to understand is that exporting involves creating a new file make sure that the file is named (the .swf file), but the .fla file remains untouched. It’s similar to using with the extension .fla. 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. 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
  11. File Types 31 CAUTION HTML Files That Host the .swf File If you have any experience creating HTML, the basic process of putting .swf Beware of Fonts continued files in a web page will be simple for you. If you have no HTML experience, it fonts. That is, you can select what won’t hurt to learn a little HTML, but you really don’t have to. Remember alternative font to use. To main- when you “visit” a web page, you’re not really “going” anywhere. Rather, tain the appearance of the .swf, your browser software downloads a text file (with either an .htm or .html file you must make sure to have the extension). This HTML file contains not only the words you see on the web correct fonts on everyone’s ma- page, but additional instructions as well, including the font style and size. chine or to simply create the .swf file on the appropriate machine. In addition, the HTML file contains details about any of the pictures that are supposed to be seen on the web page—details such as the image file’s name and from where it should download so you can see it. 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 in- cluded, 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 Movie to the Web,” and Hour 24, “Pub- lishing a Creation”), which walks you through the steps of creating both the .swf file and the .html file. Every detail available can be specified in the Publish Settings dialog box (see Figure 1.20). You can specify parameters for each file format that you intend to distribute by using the tabs that ap- pear (only the tabs for the file types you specify appear). FIGURE 1.20 In the Publish Settings dialog box, you can decide what file formats you intend to distribute.
  12. 32 HOUR 1: Basics Summary We have covered a lot of ground this hour, but you haven’t actually created any finished work. Rest assured you get your hands dirty in the next 23 hours. With the nitty gritty out of the way, you can now focus on creating great Flash movies throughout the rest of this book. In this hour, you’ve explored Flash’s main workspace, including the Stage, the Timeline, and the Tools panel. You’ve learned how to change the Stage size (through the Document Properties dialog box) and how to zoom in (by using the Zoom control). You’ve gotten to see the Tools panel (which you use next hour to create artwork) and the Properties panel that enables you to modify graphics onscreen. Although you haven’t done much with the Timeline, you’ve learned to pay close attention to visual cues, such as the red current-frame marker and the pencil icon, which indicate the active frame and active layer, respectively. In this hour, you’ve learned about other interface elements and navigation tools that help you track your current location at all times. The Edit Bar at the top left always tells you where you are, and the two menus at the top right enable you to navigate to other scenes and symbols (provided that you have some). Finally, you’ve learned about the file formats you’re likely to create in Flash. It’s important to take the time to understand all the files you create. You’ll probably create many files, so it’s also a good idea to keep your files and folders organized so you can track what’s going on. The old saying, “Haste makes waste,” is especially true when you have a million files to track. So take it easy, pay attention to how the Flash interface changes, and have fun. Q&A Q. When I hold down the spacebar to get the Hand tool and try moving my view up or to the left, I can’t go past the top or left of the Stage. Why? A. Most likely, the View, Pasteboard menu item isn’t selected;, that is, it doesn’t have a check mark next to it. Only when this is selected can you, the author, see outside the Stage. We recommend leaving this set- ting in the default, selected state.
  13. Workshop 33 Q. My Properties panel used to be taller. Why can’t I see any Properties? A. The Properties panel actually has two different states. Click the tiny double-arrow button on the far right of the Properties panel’s tab to re- store the Properties panel’s full view. If that doesn’t work, try double- clicking on the title tab. Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers. Quiz 1. How do you open and edit a .swf file? A. You can’t, and unless you have a backup of the .fla file, you’re pretty much out of luck. B. You can simply select File, Open. C. You can import it by selecting File, Import. 2. How can you make your animation appear to play really fast? A. Crank up the frame rate in the Document Properties dialog box to 120. B. Trick the user by employing age-old animation techniques. C. Suggest that users purchase the fastest computer they can afford. 3. What is the standard unit of measurement for web pages and multimedia? A. Inches B. Centimeters C. Pixels
  14. 34 HOUR 1: Basics Quiz Answers 1. A. Generally, you can’t do anything but watch a .swf file. Truth be told, you can actually import a .swf file (as in Answer C). However, this won’t work if when you exported the .swf file in the first place, you specified Protect from Import in the Flash tab of the Publish Set- tings dialog box. Also, when you import a .swf file, just the sequence of frames is imported (no interactivity), so it’s rarely very useful. In fact, third-party tools (such as Manitu Group’s ActionScript Viewer, http://buraks.com/asv/)can extract the media and scripts from a .swf. The bottom line is you should always keep a backup .fla. 2. B. Although increasing the frame rate to 120 fps makes Flash try to play quickly, the chances of it actually playing that fast are unlikely (depending on the computer). Although Answer A is not entirely wrong, using age-old animation tricks is the best way. Something doesn’t actually have to move fast to appear to move fast. 3. C. This isn’t an opinion: The standard is pixels.
  15. HOUR 2 Drawing and Painting Original Art in Flash Believe it or not, Flash began its existence as drawing software. The creators WHAT YOU’LL LEARN IN of Flash intended to make a “more natural” drawing tool. Flash has THIS HOUR: evolved to become an animation tool and, now, even a rich application de- . How to draw and paint velopment platform. Because you are animating images, it’s convenient if in Flash you can draw these images right inside Flash. . The difference between This hour exposes you to the fundamental drawing concepts in Flash— lines and fills think of it as your basic training. There’s a lot to cover, and you might find . How to draw geometri- that it actually takes a little longer than one hour to complete. This lesson’s cally perfect shapes in length gives you ample chance to play with all the tools. Flash If you have little or no background creating graphics on a computer, you’re in luck! Flash is so unique that the less you know, the better—just let your mind act like a sponge and soak up all the information. If you have experi- ence with computer graphics, try to forget everything you know about drawing software and get ready to learn the Flash way. Graphics created in Flash are considered vector graphics (as opposed to raster graphics, which are sometimes called bitmaps). Unlike a bitmap, for which the computer must store information about every single pixel, a vec- tor graphics file contains just the math to redraw the shape. Therefore, a vector circle is described with the mathematical formula for a circle. Vector files are very small (and therefore download quickly), and they scale to new sizes easily. (For example, the radius for a circle can be changed.) Some- times vector graphics tend to look too “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 vec- tor format at heart, but it can be molded naturally like clay.
  16. 36 HOUR 2: Drawing and Painting Original Art in Flash Drawing on the Stage Remember from Hour 1, “Basics,” that everything your audience sees is drawn on the Stage, the white rectangular area where you create your ani- mations. Sometimes, you want a graphic to start off the Stage and then ani- mate into view. Drawing off the Stage requires you have the Pasteboard selected with a check mark in the View menu. We recommend you leave this setting checked, but realize the gray area around the outside of the Stage is considered the Pasteboard. This is off Stage and does not appear in your finished movie. Tools Your drawing tools should appear in the Essentials workspace on the right side of the screen, as shown in Figure 2.1. If the tools aren’t visible, you can access them by clicking Window, Tools. FIGURE 2.1 Flash’s drawing toolbar might look simple, but because most tools Selection Subselection have additional options, there’s Free Transform 3D Rotation more than meets the eye. Lasso Pen Text Line Rectangle Pencil Brush NOTE Deco Bone Paint Bucket Learning Shortcuts Eyedropper Eraser Without Memorizing Hand Zoom When you click a tool, it be- Stroke Color comes selected. Alternatively, Fill Color Set Stroke and Fill to you can select a tool by pressing Swap Stroke and Fill Colors Black and White its shortcut (or quick key). You can see each tool’s quick key Options when you roll your cursor over the tool. In the ToolTip that ap- pears, you see both the name of The following sections look at how to draw with these tools. You learn the tool and a letter in parenthe- about all of them in this hour, although the really advanced techniques are ses. For example, when you roll covered in Hour 6, “Applied Layout Techniques.” Keep in mind some tools over the Selection tool, you see are grouped together. For example, the Oval tool is hidden under the Rec- “Selection Tool (V).” Pressing the tangle tool. You have to click and hold the Rectangle tool to see a drop- V key selects the Selection tool. (Try it out by first clicking another down list of the other tools. As a way to categorize all the tools, realize tool, and then pressing V.) some tools (such as the Pencil, Brush, and Deco tools) let you create art- work; others (such as the Selection and Zoom tools) simply help you mod-
  17. Tools 37 ify or view your artwork. Throughout this hour, you also learn how to cre- ate and edit artwork. Viewing and Modification Tools Both View tools—Hand and Zoom—have no effect on the graphics you are creating. You simply use them to better edit your artwork. The following task walks you through a scenario in which you use both tools. In this task, you explore how to use the Hand and Zoom tools. Follow TRY IT YOURSELF ▼ these steps: Use the View Tools to 1. Click once on the Brush tool in the Tools panel, and then click and Help You See drag on the Stage. Draw a tree or some other shape—you can be sloppy. 2. You can zoom in to closely inspect or change the artwork on stage. Se- lect the Zoom tool, the one that looks like a magnifying glass near the bottom of the panel. Notice, as with many other tools, when you select the Zoom tool, additional buttons appear in the options section at the bottom of the Tools panel. You should see two more magnifying glasses in the options area, as shown in Figure 2.2. FIGURE 2.2 The Zoom tool has two options: Enlarge and Reduce. 3. Make sure Enlarge is selected (the magnifying glass with the plus sign), and then click on the Stage where you drew the shape in step 1. Continue clicking in the same area, and you keep zooming in.
  18. 38 HOUR 2: Drawing and Painting Original Art in Flash ▼ TRY IT YOURSELF 4. While you’re close up, chances are most of the Stage is out of view. Of Use the View Tools to course, you can use the standard scrollbars on the left and bottom to Help You See change the portion of the (now very close up) Stage. You can also do this by using the Hand tool; select the Hand, and then click and drag to change your view. 5. Now you can zoom out. Select the Zoom tool, and make sure you re- member to select the Reduce option (the magnifying glass with the mi- nus sign). Click a few times, and you zoom back out. This task is easy, but there’s more you should know. Using either view tool does not change your file—only your view of it. The View menu provides some of the same functionality as the Zoom and Handview tools (such as zooming in and zooming out). Similarly, none of the View menu options change anything in a file. You used the Enlarge option of the Zoom tool by simply clicking the Stage. Another way to zoom in is to click and drag. You see a rectangle as you drag, and when you let go, that rectangle defines the viewable portion of the Stage. For example, you can click and drag making a rectangle around the intersection of the shape you drew to zoom in on only that portion. You always see the current zoom level displayed in the drop-down list at the top right of the Stage (above the Timeline, if it’s docked), as shown in Figure 2.3. If you click the Zoom control drop-down list, you can return to FIGURE 2.3 The exact zoom level is always shown at the top right of the Stage.
  19. Tools 39 100%. Another quick way to return to 100% is to double-click the Zoom tool (not the Enlarge or Reduce option, but the main Zoom tool’s magnifier). Speaking of quick techniques, both the Zoom and Hand tools have “spring- loaded” options. That means while you’re using another tool, you can press and hold down the spacebar to get the Hand tool. Then, when you let go of the spacebar, Flash springs back to the tool you had. Holding down Ctrl+spacebar gives you the Enlarge option of the Zoom tool, and holding down Ctrl+Shift+spacebar gives you the Reduce option. These spring- loaded features provide quick ways to temporarily select tools without ac- tually going to the toolbar. Creation Tools Although view tools prove very useful, they can’t change anything on the Stage. To create artwork in Flash, you have to add to an image, change something you’ve already drawn, or remove some or all of what you’ve drawn. In the following sections, you first see how to add to your artwork. This 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 given a stroke 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 geo- metric definition of a line—the distance between two points—doesn’t in- clude 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), and style (such as dashed, dotted, or solid). You can change any stroke attribute any time without changing the underlying line. So much for theory of lines! In the following task, you draw some.
  20. 40 HOUR 2: Drawing and Painting Original Art in Flash ▼ TRY IT YOURSELF In this task, you begin to draw and manipulate lines. Follow these steps: Draw and Change 1. Start a new file by pressing Ctrl+N and selecting Flash File (Action- Lines Script 3.0). Lines can have different stroke attributes, so make sure the Properties panel is visible and in a convenient place before you begin. If your Properties panel isn’t present, click Window, Properties, Properties (yes, it’s listed in a submenu). The default position for the Properties panel in the Essentials workspace is on the right, as shown in Figure 2.4. FIGURE 2.4 The Properties panel lets you set attributes of the lines you draw. 2. Select the Line tool by clicking on it in the Tool 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 quite easy when the Snap to Ob- jects option is selected from the View Snapping menu. (Holding Shift also constrains the angle to diagonal as well.) 3. Changing any setting in the Properties panel affects subsequent lines you draw. Select a different stroke color in the square swatch on the Properties panel. Then, change the stroke height, either by typing a number in the Stroke height field or by clicking the arrow and dragging the slider. Set the stroke to 15, and draw a horizontal line.
Đồng bộ tài khoản