834 Flash CS6 The Missing Manual
ABOUT THE AUTHOR
Chris Grover is a veteran of the San Francisco Bay Area advertising and design community, having worked for over 25 years in print, video, and electronic media. Office 2011 for Macintosh: The Missing Manual Adobe Edge He’s also the author of , Preview 5: The Missing Manual , and several other books in the Missing Manual series.
ABOUT THE CREATIVE TEAM
Rachel Steely (production editor) is an avid lover of books in all their forms, and can typeset, illustrate, and bind a book by hand. Julie Van Keuren (proofreader) quit her newspaper job in 2006 to move to Montana and live the freelancing dream.
THE MISSING MANUAL SERIES
You have the following idea for an animation:The first thing you want your audience to see is a beat-up jalopy limping along a city street toward the center of the screen, where it stops and morphs into a shiny,like-new car as your company’s jingle plays in the background. Flash carefully analyzes all the differences between the key- frames and does its best to build the interim frames, which you can then tweak BASICS and Chapter 8 gives you the lowdown on advanced techniques.) (for example, your company logo) so you can reuse them later.
CHAPTER 1: Getting Around Flash CHAPTER 2: Creating Simple Drawings CHAPTER 3: Animate Your Art
FIGURE 1-2This Welcome screen appears the first timeyou launch Flash—and every subsequent time,too, unless you turn on the “Don’t show again”checkbox (pull down the bottom of the window ifyou don’t see it). Here’s a quick little exercise that shows you how to switch among the different workspaces and how to reset a workspace after you’ve mangled it by draggingpanels out of place and opening new windows.
6. Go to Window→Other Panels→History
But if you usually anywhere you like simply by dragging it again.just need a toolbar or a panel for a brief time and want to be To dock a floating panel, simply reverse the procedure: Drag able to move it around on the screen (so it doesn’t cover upthe floating panel to the edge of the workspace window and something else), then floating is the ticket.let go of the mouse button. Chapter 2 shows you how to use these tools to create a simple drawing; this section gives you a quickoverview of the six sections of the Tools panel, each of which focuses on a slightly different kind of drawing tool or optional feature.
SELECTION AND DRAWING TOOLS
For example, you might use the Pen tool to start a sketch, the Paint Bucketor Ink Bottle to apply color, and the Eraser to clean up mistakes. If you like, you can drag the docked Tools panel away from the edge of the workspace and turn it into a floating panel.
In either of these situations, you can use the tools Flash displays in the View section of the Tools panelto zoom in, zoom out, and pan around the stage. (You’ll get to try your hand at using these tools later in this chapter; see page 35.) NOTE The term pixel is short for “picture element.” Images on a computer screen are made up of lots of TOOLBARS tiny dots emitting different colors.
For example, when you select the Zoom tool from the View sectionof the Tools panel, the Options section displays an Enlarge icon and a Reduce icon that you can use to change the way the Zoom tool works (Figure 1-9). In the Tools panel’s View section, for example, when you click the Zoom tool, the Options Zoom tool section changes to show you only zooming options: Enlarge (with the + sign) and Reduce (with the – sign).
These common settings usually appearat the top of the Properties panel, and you set them the same way for most kinds of objects. (You’ll learn more about frames on page 91.) Now, if you want that bubble, sun, or snowflake to appear in 15 additionalframes, you could draw it again and again, but it really makes more sense to store a copy in the current project library and then just drag it to where it’s needed onthose other 15 frames.
Chapter 7. ) Using the Library panel you see here, you can preview symbols, add them to the stage, and easily add symbols you created in one Flash document to another. Other Flash Panels As you can see from the examples on the preceding pages, each Flash panel performs
Mac: Option-F9 The Actions panel provides a window for code, a reference tool for the programminglanguage, and a visual display for the object- oriented nature of the code. Flash keeps track of every little thing you do to a file, starting with the timeyou created it (or the last time you opened it).
WORD TO THE WISE
(For more details on locking layers, see page 148.) Resize the Stage In Flash, the size of your stage is the actual finished size of your animation, so setting its exact dimensions is one of the first things you do when you create an animation,as you’ll see in the next chapter. Once you’re zoomed in, you can use the scroll bars at the right and bottom of the stage to reposition the stage in the view-ing area.
3. Choose Window→Motion Presets
It starts with tips for plan- O ning your animation and then moves on to specific tools like the Pen, the Pencil, the shape tools, the Line tool, and the Brush. Preparing to Draw Even if you’re familiar with animation software (but especially if you aren’t), you need to know a few quick things before you roll up your sleeves and dive into Flash—sortof like the quick where’s-the-turn-signal once-over you do when you jump into a rental car for the first time.
CHANGING THE SIZE OF THE STAGE
NOTE Because the background color changes the way foreground objects appear, you may want to experi- ment with the color of the stage, beginning with one color and changing it as you add objects to the stage untilyou get the effect you want. FIGURE 2-6When you choose the Rectangle tool (R), the label at the top of the Properties panel says “Rectangle Tool,” and the panel displaysproperties related to a rectangle, such as the color of the stroke and fill.
WHEN TO USE MERGE DRAWING MODE
As shown in Figure 2-8 (bottom), when you overlap objects in merge drawing mode,Flash erases the hidden portions of the objects underneath. Overlapping shapes in objectmode doesn’t erase anything, and when you select a shape, you select the entire shape—not just the fill, or line, or portion of the shape you selected.
WHEN TO USE OBJECT DRAWING MODE
FIGURE 2-11Selecting an object on the stage to work with should be Selectioneasy—and most of the time, it is; all you have to do is Sub-selectionclick the Selection tool and then either click your object or click near it and drag a selection box around it. But ifyour stage is crowded and you’re trying to pick out just Lassoone little tiny angle of a line or a portion of a drawing to manipulate, you may need to use either the Subselectiontool or the Lasso tool.
SELECTION TOOL (SHORTCUT KEY: V)
(If you’ve created objects in merge mode, the Selection tool also lets youselect rectangular portions of those objects.) After you’ve made your selection, you can then work with it—move the object around the stage by dragging, for example. To select a rectangular portion of a shape you’ve drawn in merge mode, click near (but not on) the shape and drag your cursor to create a selection boxaround just the portion you want to select.
SUBSELECTION TOOL (SHORTCUT KEY: A)
(See page 164 for details on editing graphics with anchor points.) TIP You can’t select an object’s fill with the Subselection tool; however, you can “open up” an object graphic and edit it as if it were a merge shape. When you’re finished editing, close the graphic by clicking the left-pointing arrow in the upper-left cornerof the work window.
The Lasso tool is the one to use when you want to select a weirdly shaped portion of an object—say, you want to create a hand-shaped hotspot in the middle of a squarebitmap—or when you need to select a weirdly shaped object that’s super-close to another object. Drawing and Painting with Tools One of the true beauties of creating digital artwork—besides not having to clean up a mess of paint spatters and pencil shavings—is that you don’t have to track downyour art supplies—the one pen that feels good in your hand, the right kind of paper, the sable brush that smells like paint thinner.
Click the bottom of the vertical line and drag down and to the left; then click the bottom of the vertical line again and drag down and to the right. It doesn’t look like much yet, but it’s actually the basis for a stick figure you’ll create as you experiment with Flash’s drawing andpainting tools in the following sections.
While you’re on the Options section, there are other ways you can modify how the Pencil tool works: The Straighten option emphasizes the corners you drawwith the Pencil (for example, turning squarish circles into squares or roundish squares into circles—definitely not what you want when you’re trying to drawthe feet you see in Figure 2-14), and the Ink option leaves your Pencil strokes just as they are, jiggles and all. Graphics Tablet If you expect to do a lot of Flash work, do yourself a favor: Ditch When you use a graphics tablet, Flash recognizes and records your mouse and get yourself a graphics tablet (sometimes subtle changes, like when you change the pressure or slant ofreferred to as a digitizing tablet, graphics pad , or drawing the stylus—something you don’t get with a plain old mouse. (In tablet ).
Because you can easily whip out a triangle with the Line tool or a perfect circle with the Oval tool,save the Pen tool for when you’re trying to draw a more complex shape—like a baby grand piano—and need more control and precision than you can get freehanding it with the Pencil or Brush. When the cursor is over a point that closes the loop, you see a small circle to the right of the Pen tool cursor.
Brush mode Brush Brush button size shape Here’s a rundown of all the brush modes you can choose from: Paint Selection, your brush stroke appears only on the parts of the shape that are both filled and that you’ve previously selected. Click the stage just about where your stick person’s hair should be and drag your mouse upward; release the mouse button when the hair is the length you want it.
ARRANGING DRAWN OBJECTS FORWARD AND BACKWARD
When you draw in object mode, each part of your drawing (the head, the hat, the hair) is an object, and you can place it in front of or behind the other objects. You set them down so that the head is at the bottom, the hair cutoutcovers the top of the head, and the hat covers part of the hair.
2. Go to Modify→Arrange→“Bring to Front” or press Shift+Ctrl+up arrow (Windows) or Shift-Option-up arrow (Mac) to move the hat to the front
There are four commands that help you arrange the stacking order of the objects you’ve drawn: As an alternative to using menu commands, you can select an object and then useCtrl+up arrow or Ctrl+down arrow ( ⌘-up arrow or ⌘-down arrow) to move the selected object forward or backward. Add the Shift key (Shift+Ctrl+up arrow orShift+Ctrl+down arrow for PCs; Shift- ⌘-up arrow or Shift-⌘-down arrow for Macs) to move all the way to the front or all the way to the back.
SHAPE TOOLS: OVAL, RECTANGLE, AND POLYSTAR
Flash gives you quick ways to create basic shapes: the Oval tool, which lets you draw everything from a narrow cigar shape to a perfect circle; the Rectangle tool,which lets you draw rectangles, from long and skinny to perfectly square; and thePolyStar tool, which you can use to create multisided polygons (the standard five- sided polygon, angled correctly, creates a not-too-horrible side view of a house)and star shapes. To see them, click the Erase Mode button in the Options area (Figure 2-25), and then, from the fly-out menu that appears, select one of the following modes: NOTE Oddly enough, if you configure your eraser to Erase Selected Fills and then rub your virtual eraser over non -selected fills, Flash pretends to erase them—until you let up on your mouse, when they pop right backonto the stage.
2. Choose Edit→Copy (or press Ctrl+C in Windows, ⌘-C on the Mac). Then select the keyframe into which you want to paste the image
Before you click one of the drawing icons to begin drawing (or afterward, tochange existing colors), you can click either of the Stroke or Fill icons in the Colors section to bring up a color palette, as shown in Figure 2-27. FIGURE 2-27Before you begin drawing with the Pen or Pencil tools (both of which let you create strokes), you can choose the color of the Penor Pencil by clicking the Stroke Color icon and then selecting a color from the palette that appears.
COLORING STROKES WITH THE PROPERTIES PANELADDING COLOR
Changing the color of a stroke using the Properties panel is best for situations when you want to change the color of a single stroke or when you want to change morethan just the color of a stroke (for example, you want to change the stroke thickness or the color of the fill inside the stroke). On the stage, select the stroke you want to change.
2. If the Properties panel isn’t open, press Ctrl+F3 ( ⌘-F3)
FIGURE 2-28Using the Properties panel is a quick and easyway to change the color of a single stroke. The instant you choose a color, the colorpicker disappears and the selected stroke changesto the new color.
COLORING STROKES WITH THE INK BOTTLE TOOLADDING COLOR
Flash changes the color of the strokes to match the stroke color in the Proper- ties panel. Changing the Color of a Fill If you change your mind about the color of any of the fills you add to the stage, no problem.
COLORING FILLS WITH THE PROPERTIES PANEL
Using the Properties panel to change the color of a fill is great for situations when you want to change more than just fill color—for example, you want to change boththe fill color and the color of the stroke outline surrounding the fill. On the stage, select the object you want to change.
2. If the Properties panel isn’t open, go to Window→Properties to open it
As soon as you let go of your mouse button, the color picker disappears, and Flash displays your fill using the color you chose. NOTE To change the color of a bunch of fills quickly, select the fills you want to recolor, and then select the Fill Color icon and choose a new color.
COLORING FILLS WITH THE PAINT BUCKET TOOL
(You may also want to consider closing the gap yourself using one of Flash’s drawing tools.) Gap, no fill No gap Fill colorFIGURE 2-33After you select a new fill color, apply it to the fillson the stage by clicking the Paint Bucket andclicking each fill. Not only can you create a tween, but you can also tween adrawn object, such as a car: “I tweened the car to make it drive down the road.” Frame-by-Frame Animation An animation is nothing more than a series of framed images displayed one after the other to create the illusion of motion.
1. Open a blank Flash document by choosing File→New and then selecting ActionScript 3.0 and pressing OK
(Chapter 10 covers importing filesin more detail.) Drawings in keyframeFIGURE 3-3Flash associates the selected keyframe with all the im-ages you place on the stage— whether you draw themdirectly on the stage using the drawing and painting tools,drag them from the Library, or import them from previ-ously created files. ANIMATION Just as when you inserted the blank keyframe, Flash moves the playhead and inserts a keyframe icon; but instead of clearing the stage, Flash carries overthe content from the previous keyframe, all ready for you to tweak and edit.
Chapter 19 covers animation testing in depth
This section shows you how to perform the basic frame-level edits you need to take your animation from rough sketch to finished production: inserting, copying, pasting,moving, and deleting frames. Selecting Frames and Keyframes Selecting a single frame or keyframe is as easy as zipping down to the timeline and clicking the frame or keyframe you want to select.
You’ve got a keyframe showing the tail to the left of the dog, one showing the tail straight behind the dog, and a final keyframe showing the tail to the right of thedog. Inserting additional keyframes showing the dog’s tail in additional positions (just a bit to the left of the dog’s rump, a little bit further to the left, a little further, andthen all the way to the left) will make the finished sequence look much more detailed and realistic.
2. Press F6 (or choose Insert→Timeline→Keyframe) to tell Flash to carry over
On the stage, Flash either displays the image associated with the previous keyframe or, if you inserted a blank keyframe, displays nothing at all. Using the drawing and painting tools, add content for your new keyframe to the stage.
INSERTING STATIC FRAMES
Without regular frames to stretch it out, youraudience would have only a twenty-fourth of a second to see the image! In the timeline, click to select the frame after which you want to add a frame.
2. Choose Insert→Timeline→Frame (or press F5)
That’s perfectlyserviceable—but you can create a much more realistic effect by shortening the num- ber of frames between the second and third keyframes (in other words, by deletinga bunch of frames between Frame 15 and Frame 30 to speed up the portion of the animation where the frog’s tongue snags the fly). Just change the x and Y properties, which set the position on the stage, to create the illusion of movement.(For a rundown on the x/Y coordinate system, see the box below.) Chapter 1 showed you how to apply the bounce-smoosh motion preset to a wheel symbol.
2. Choose Insert→Timeline→Frame or press F5
Frames are added to the end of the animation, and the blue highlight of a mo- tion tween extends to the new end point. By making the H and W properties identical in Frame 1 and the firstproperty keyframe, the height and width remain the same at the beginning, and the shape change at the end of the animation is faster and more dramatic.
CHANGING DIMENSIONS WITH THE TRANSFORM TOOL
You set the x and Y properties by moving the playhead to a frame and then moving the object or changing the x and Y properties in the Properties panel. Moving End Points on the Motion Path If you want to reposition one of the end points without moving the rest of the motion path, use the Subselection tool (A), which looks like a hollow arrow.
2. Select the entire path, and then press Ctrl+C ( ⌘-C)
3. Select the path in your tween, and press Ctrl+V ( ⌘-V)
It uses the same starting point as the original, so you may need to move the entire path (as described on page 110)to position it properly on the stage. For example, in the exercise on page 107, you used identical W and H properties to keep the wheel the same size and shape.
4. Ctrl-click ( ⌘-click) the frame where you want to paste the properties
You then apply a shape tween to the frame span, and Flash generates all the incremental frames necessary to show the ball slowly—frame by frame—transforming itself into a star when you run the animation. If you want to tween a group of objects or reshape characters of text, then you need to ungroup the objects (page 161) or break apart the text (Modify→Break Apart) and then apply the shape tweensto the individual elements.
5. Insert an ending point for your tween (and a clean, fresh stage on which to draw your ending shape) by selecting Insert→Timeline→Blank Keyframe
To turn on Tinted Frames, click the Options menu (the tiny, striped icon on the far right of the timeline, just above the frame numbers, as shown in Figure 3-25) and then select the Tinted Frames option. If you want to preserve the hard angles of your original shape, click the Blend drop-down box and then select Angular ; if you want Flash (MORPHING) to smooth out the hard edges so that the tween appears softer, select Distributive .
9. Test your shape by selecting Control→Play
Because complex beginning and ending images like a stylized acorn and tree (Figure 3-29) contain a bunch ofeditable lines, shapes, and colors, Flash has to guess at which elements are most im- portant and how you want the morph to progress from the first keyframe to the last. Bottom: The more shape hints you use (and the more accurately you place them around the edge of your object), the more closely Flash attempts to preserve your shape as it generates the tween frames.
2. Choose Modify→Shape→Add Shape Hint, or press Ctrl+Shift+H (Shift-⌘-H)
When the animation runs, Flash uses the hints in both the beginning and the ending keyframe to control the shape of the morphing object. Here the cap of the acorn tweens into the leaves of the tree, and the shell tweensinto the trunk and branches.
CHAPTER 4: Organizing Frames and Layers CHAPTER 5: Advanced Drawing and Coloring CHAPTER 6: Choosing and Formatting Text CHAPTER 7: Reusable Flash: Symbols and Templates CHAPTER 8: Advanced Tweens with the Motion Editor CHAPTER 9: Realistic Animation with IK Bones CHAPTER 10: Incorporating Non-Flash Media Files CHAPTER 11: Incorporating Sound and Video
Similar to the Find and Re- Your choices include Text, Font, Color, Symbol, Sound, Video, place you’ve undoubtedly used in word processing programs, and Bitmap.this function lets you search every frame of your animation To change the occurrences yourself, click Find Next or Find for a specific bit of text (or even a certain color or bitmap file)All (and then make your changes on the stage). To tell Flash and either replace the occurrences yourself or tell Flash toto change the occurrences, add a Replace With option (for replace them for you using the text (or color or bitmap file)example, the color or text you want to insert), and then click you tell it to use.