In This Chapter 䊳 Introducing Flash MA 䊳 Figuring out what you can create with Flash CS4 䊳 Knowing when not to use Flash CS4 䊳 Starting Flash D 䊳 Perusing the screen O GH 䊳 Closing Flash TE 䊳 Using Help 䊳 Creating your first animation TE RI AL Getting Acquainted with Flash CS4 CO PY RI nce upon a time in a galaxy that seems far, far away by now, there was the Internet, which contained only plain, unformatted text. Then came the Web, and we gained text formatting and graphics.
10 Part I: A Blast of Flash Discovering Flash Flash offers a powerful system for creating animation for the Web. In a nutshell, here’s an overview of how you use the system: 1 . Cr e a t e a F l a s h m o v i e b y c r e a t i n g g r a p h i c s a n d a n i m a t i n g t h e m o v e r the duration of the movie. Besides animated graphics, you can add navigational buttons, check boxes, and other user interface elements. You can add a few Flash components to a Web site or create an entire Web site. 2 .
Chapter 1: Getting Acquainted with Flash CS4 Understanding What You Can Create with Flash CS4 You can use Flash CS4 to create simple animation to add to your Web page. Or you can create an entire Web page or site with Flash and incorporate text, graphics, interactive buttons, user interface components, and animation. You can even program applications in Flash. This book helps you use Flash to create a simple or complex Web site.
12 Part I: A Blast of Flash ⻬ Animate graphics and make objects appear and disappear by using the transpar ency featur e. Objects can move, get bigger or smaller, or rotate. Flash also lets you morph — that is, transform — shapes into new shapes. ⻬ Fill shapes and text with g r a d i e n t s , w h i c h a r e colors that gradually change into new colors. You can even fill shapes and text with bitmap images that you import into Flash.
Chapter 1: Getting Acquainted with Flash CS4 If you want simple animation, such as a few blinking dots or a marquee effect, animated GIFs (the animated bitmap graphics that you often see on the Web) might be smaller than Flash movies, so they load faster. You can create animated GIFs by using animated GIF editing software. Some sites don’t lend themselves to animation. Animation can distract from your content, and overdoing animation can make a serious site seem silly.
14 Part I: A Blast of Flash In the Create New section, click one of several options to immediately open a new movie file. These options let you create movies for various types of uses, such as mobile devices and further programming. For the purposes of this book, we assume that you want to create a general-use movie using the latest technology, which is the Flash File (ActionScript 3.0) option. (ActionScript 3.0 is the latest version of Flash’s programming language.
Chapter 1: Getting Acquainted with Flash CS4 When you open more than one movie, you see a tab at the top for each movie. You can click the tabs to move from movie to movie. The tabs appear in the order you created or opened the movies. Taking a Look Around The Flash screen is different from screens in other programs that you might be used to, so take the time to get to know it. You can also customize the Flash screen. Figure 1-3 shows one possible display.
16 Part I: A Blast of Flash Tooling around the toolbars Flash contains two toolbars in the Mac version: the Edit bar and the Controller. In Windows, Flash also offers the Main toolbar. To display or hide these toolbars, choose Window➪Toolbars and click the toolbar that you want to display or hide. Here is a description of the toolbars: ⻬ Main toolbar (Windows only): Contains commonly used commands. Many of these are familiar from the Standard toolbar in other Windows programs.
Chapter 1: Getting Acquainted with Flash CS4 ⻬ Close a docked panel. Right-click (Windows) or Control+click (Mac) its title bar and choose Close Panel. ⻬ Collapse a gr oup of panels to icons. Click the double right arrow at the top of the group of docked panels. You can also stack panels. Drag a panel (by its title bar) to another panel to stack it below the first one. You can also collapse or expand panels: A collapsed panel displays only its title bar, so it doesn’t take up much space.
18 Part I: A Blast of Flash The Property inspector has several controls for changing its configuration: ⻬ Tab: Double-click the tab to switch between collapsing the Property inspector completely (you see just the tab) and displaying its previous state. ⻬ Collapse to Icons button: Click the small double arrows at the top of the Property inspector to switch between an icon and the open state. ⻬ Title bar: Click the gray bar at the top to minimize or maximize the Property inspector.
Chapter 1: Getting Acquainted with Flash CS4 Menu What It Does Modify Helps you modify symbols, bitmaps, shapes, frames, Timeline features and effects, scenes, or the entire movie (called the document). Offers tools for transforming, aligning, grouping, and ungrouping objects, arranging objects, and breaking objects apart. Text Enables you to format text and check spelling. Commands Enables you to reuse and manage saved commands.
20 Part I: A Blast of Flash +Z (Mac): Undo. Would you believe that by ⻬ Ctrl+Z (Windows) or Ô+ default Flash remembers your last 100 actions and can undo them? What a relief! And if you choose Window➪Other Panels➪History, the History panel lists each action so you know what the next Undo will undo. Think of it as a journey into the long-forgotten past. (See Chapter 4 for more on the History panel, and see this book’s companion Web site for details on customizing the number of Undos that Flash remembers.
Chapter 1: Getting Acquainted with Flash CS4 Staging your movies The white box in the center of your screen is the Stage. Think of the Stage as a movie screen where you place objects. You can place graphics and text there and then animate them. Flash also plays back movies on the Stage. Around the edge of the Stage is a gray area called the Pasteboard. You can use the Pasteboard to store graphics that you plan to use soon but don’t want on the Stage just yet.
22 Part I: A Blast of Flash You can drag the upper edge of the Timeline to make room for more layers. Hover the mouse cursor over the top of the Timeline’s gray title bar until you see the two-headed arrow and drag upward. To the right of Layer 1, you see a bunch of rectangles, each representing a frame. (Actually, before you start using the Timeline, they’re just potential frames, like unexposed frames on a roll of film.) By default, each frame lasts 1 ⁄24 of a second.
Chapter 1: Getting Acquainted with Flash CS4 ⻬ Adobe AIR explains how to use Flash CS4 to create desktop applications. ⻬ Flash Lite explains how to create Flash movies for mobile devices. ⻬ Extending Flash describes how to use JavaScript to create scripts to help automate your work. To search for a term, click the Search button. Then type the term and click Search. You can then choose from the list of topics. Finding more help on the Web Adobe offers support on its Web site.
24 Part I: A Blast of Flash company logo) from a file rather than create them from scratch. (Chapter 3 explains how to import and manipulate graphics.) If you’re going through the steps and make a mistake, choose Edit➪Undo (or press Ctrl+Z or Ô+Z) and try again. You can use Undo repeatedly to undo several steps, if necessary. To import the Rainbow Resources logo into Flash, follow these steps. (The steps might vary if you’re importing some other graphic in a different format.) 1 . Star t F l a s h .
Chapter 1: Getting Acquainted with Flash CS4 Turning your objects into symbols In the logo that you imported in the preceding section, each letter is a separate object, which can get pretty confusing. Each line in the logo’s design is also separate. But you want your words — and the little design — to stay together. So you must combine each word and the logo into a symbol. A symbol helps keep objects together and is required for some kinds of animation. (See Chapter 7 for the scoop on symbols.
26 Part I: A Blast of Flash 8. Hold down the Shift key and click each wor d to r emove both wor ds f r om the selection. Now the design portion of the logo is selected. 9. Choose Modify➪C C o n v e r t to Symbol. The Conver t to Symbol dialog box opens. 1 0 . Enter Lines in the Name text box, and then click OK in the Conver t to Symbol dialog box. Flash creates a symbol from the lines of the logo’s design. See Chapter 7 to find out more about what symbols are and how to use them.
Chapter 1: Getting Acquainted with Flash CS4 6. To save the file, choose File➪S Save and choose the same location you used for the rainbow.gif image file. We don’t recommend saving the file in the Flash CS4 program folder — it might get lost among your Flash program files. 7 . Give your movie a name, such as Movie of the Ye a r, and click Save. Flash creates a file named Movie of the Year.fla. Flash adds .fla for you because that’s the filename extension for Flash movies.
28 Part I: A Blast of Flash Figure 1-11: The Timeline indicates three motion tweens, each lasting 24 frames. 5. To move the Rainbow symbol to its pr oper location for Frame 24 (the end of the motion tween animation), click Frame 24 in the Rainbow layer. Then pr ess the Shift key and drag the Rainbow symbol back to its original position. You now see a dot in Frame 24 on the Rainbow layer. On the Stage, you see a red line indicating the movement of the Rainbow symbol. The motion tween is now complete. 6.
Chapter 1: Getting Acquainted with Flash CS4 1 3 . Again choose Modify➪T Transfor m➪R R o t a t e 9 0 ° C W t w i c e t o r otate the Lines symbol a total of 180 degr ees. Because you only rotated the Lines symbol, but didn’t move it, you don’t see a red line on the Stage. 1 4 . If necessar y, drag the horizontal scr oll box until the Stage is in the center of your scr een. Otherwise, you won’t be able to see the entire animation — and you don’t want to miss this one! 1 5 .
30 Part I: A Blast of Flash Publishing your first animation for posterity You can’t watch the animation in a Web browser until you publish your movie and insert it into an HTML document. To do so, follow these steps: 1. Click an empty ar ea of the Stage to change the display of the Pr oper ty inspector. If the Property inspector isn’t open, choose Window➪Properties. You may need to click the Property inspector’s label to expand it or bring it to the forefront.
Chapter 1: Getting Acquainted with Flash CS4 Exiting Flash When you finish creating something in Flash, choose File➪Exit (Windows) or Flash➪Quit (Mac). 1 2 3 4 5 6 7 Figure 1-13: The Movie of the Year animation in detail.
32 Part I: A Blast of Flash