This action might not be possible to undo. Are you sure you want to continue?
In Flash, the Stage is where the action takes place, the Timeline organizes frames and layers, and other panels let you edit and control your creation.
In this lesson, you'll learn how to do the following:
Open a file in Flash Add layers to the Timeline Create a keyframe in the Timeline Adjust settings in the Property inspector Open and work with panels Select and use tools in the Tools panel Search for topics in Flash Help Access online resources for Flash
This lesson will take less than an hour to complete. Copy the Lesson01 folder from the Adobe Flash CS3 Professional Classroom in a Book CD onto your hard drive if it's not already there.
Lic. Ciências da Comunicação
Page 1 of 27
Design e Multimédia
Starting Flash and Opening a File
The first time you start Flash, you'll see a Welcome screen with links to standard file templates, tutorials, and other resources. In this lesson, you'll complete an animation for a bottled-water company. Most of the artwork is already in place. As you get to know the Flash workspace, you'll add an object from the Library panel to the Stage and animate it. 1. Start Adobe Flash. In Windows, choose Start > All Programs > Adobe Flash CS3. In Mac OS, double-click Adobe Flash CS3 in the Applications folder or the Dock. Note You can also start Flash by double-clicking a Flash (*.fla) file, such as the 01Start.fla file you'll use in this lesson. Choose File > Open. In the Open dialog box, select the 01End.swf file in the Lesson01/01End folder, and click Open to preview the final project. An animation plays. During the animation, a bottle moves onto the screen and tips to pour water. 3. 4. Close the preview window. Choose File > Open. In the Open dialog box, double-click the 01Start.fla file in the Lesson01/01Start folder. The 01Start.fla file opens with a logo already on the Stage. The Timeline contains several layers; the contents of the layers change in different frames. 5. Choose File > Save As. Name the file 01_workingcopy.fla, and save it in the 01Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
Lic. Ciências da Comunicação
Page 2 of 27
Design e Multimédia
undock. close. choose Default from the Workspace menu in the Edit bar just above the Stage. It contains the text. You can create all the objects for your animation in Flash. [View full size image] As with a theater stage. guides. Adobe After Effects. To see the work area around the Stage. and other compatible applications. or choose View > Pasteboard. or you can import elements you've created in Adobe Illustrator. and move panels around the screen. Additionally. choose View > Magnification > Fit in Window. By default. To return to the default workspace. the Stage in Flash is the area viewers see when a movie is playing. images. Adobe Photoshop. dock. use the Zoom tool ( ) to zoom out. You can use the grid. Flash displays the menu bar. you can use the Align panel and other tools you'll learn about in the lessons in this book. Move elements on and off the Stage to move them in and out of the rectangular area in Flash Player or the web browser window where your Flash movie will play. Property inspector. Ciências da Comunicação Page 3 of 27 Design e Multimédia . Tools panel. and video that appear on the screen. Stage. You can also choose view options from the pop-up menu just above the Stage. As you work in Flash. Timeline.Getting to Know the Work Area The Adobe Flash work area includes the command menus at the top of the screen and a variety of tools and panels for editing and adding elements to your movie. and a few other panels. To scale the Stage so that it fits completely in the application window. Lic. you can open. and rulers to help you position items on the Stage.
You'll add a layer to the Timeline to contain the bottle image that you're going to animate. the current frame rate (how many frames play per second). or unlock layers. Each layer's frames are unique. Think of layers as multiple film strips stacked on top of each other. Select the Mask layer in the Timeline. Locking a layer prevents you from accidentally making changes to it. lock. and type Pour. but you can add as many layers as you need. which help you organize the artwork in your document. 2. 1. You can hide. As the movie plays. or copy or move them to another layer. move the playhead to that frame in the Timeline. Lic. To display a frame's content on the Stage. Ciências da Comunicação Page 4 of 27 Design e Multimédia 4. but you can drag them to a new location on the same layer. Flash documents measure time in frames. and the time that has elapsed so far in the movie. [View full size image] The Timeline also contains layers. . You can change the content on the Stage for different frames. 3. so that objects on the bottom layer in the Timeline are on the bottom of the stack on the Stage. Choose Insert > Timeline > Layer. A new layer appears between the Labels layer and the Mask layer.Like films. and you can draw and edit objects on one layer without affecting objects on another layer. show. Click the lock icon above the layers to lock all layers. It's a good idea to name each layer to indicate its contents so that you can easily find the layer you need later. Flash indicates the selected frame number. The layers are stacked in the order that they appear in the Timeline. A new Flash document contains only one layer. Double-click the new layer to rename it. Click outside the name box to apply the new name. At the bottom of the Timeline. the playhead advances through the frames in the Timeline. Each layer contains a different image that appears on the Stage.
1. Click the lock icon next to the Pour layer to unlock it. [View full size image] Lic. Flash displays the frame number beneath the Timeline.[View full size image] 5. Select frame 18 on the Pour layer. As you select a frame. Ciências da Comunicação Page 5 of 27 Design e Multimédia . You'll insert a keyframe on the Pour layer where you want the bottle to first appear. [View full size image] A keyframe indicates a change in content on the Stage.
Ciências da Comunicação Page 6 of 27 Design e Multimédia . [View full size image] Lic. Choose Insert > Timeline > Keyframe.2.
edit them. and sort items by type. The Library panel lets you organize library items in folders. When you import items into Flash. you can import them onto the Stage or into the library. any item you import onto the Stage is also added to the library. To add a library item to a Flash document. The bottle image you're going to use has already been added to the library and converted to a symbol. and video clips. or see their properties.Working with the Library Panel The Library panel is where you store and organize symbols created in Flash. graphics. see how often an item is used in a document. it displays a thumbnail preview of the item. or press Ctrl+L (Windows) or Command+L (Mac OS). click the Play button in the preview window to play it. If the item you selected is a sound file or is animated. To display the Library panel. simply drag it from the Library panel onto the Stage. you can easily access the items to add them to the Stage again. as are any symbols you create. When you select an item in the Library panel. including bitmaps. Ciências da Comunicação Page 7 of 27 Design e Multimédia . sound files. 1. However. Note You'll learn much more about symbols in Lesson 3. choose Window > Library. Now you'll drag an instance of that symbol onto the Stage. Choose Window > Library to open the Library panel if it isn't already open. You've already created a keyframe for the pour_bottle symbol. Lic. as well as imported files. That way.
[View full size image] 3. Select the pour_bottle symbol in the Library panel. Lic. Ciências da Comunicação Page 8 of 27 Design e Multimédia . Select the keyframe you created at frame 18 of the Pour layer.2.
Drag an instance of the pour_bottle symbol onto the Stage. Ciências da Comunicação Page 9 of 27 Design e Multimédia .4. You'll move it into position in the next section of this lesson. [View full size image] Lic.
or press Ctrl+F3 (Windows) or Command+F3 (Mac OS). You'll use the Property inspector to move the bottle to its initial and final positions on the Stage. Ciências da Comunicação Page 10 of 27 Design e Multimédia . You'll also use the Transform panel to rotate the bottle. if a frame is selected. 1. For example. Frame properties [View full size image] Object properties [View full size image] First. What appears in the Property inspector depends on what you've selected. Select the bottle that you dragged onto the Stage. [View full size image] Lic. if an object on the Stage is selected. 2. you'll move the bottle into its initial position using the Property inspector. choose Window > Properties > Properties. The bottle moves to the right. type 689 for the X value and -59 for the Y value. above the Stage. In the Property inspector. Note If the Property inspector is not open.Using the Property Inspector The Property inspector gives you quick access to the attributes you're most likely to need. the Property inspector includes a Tween option. the Property inspector shows its x and y coordinates. and then to add a motion tween that animates the bottle. Press Enter or Return to apply the values.
so that it appears to be pouring water. Lic. and then move the bottle off the Stage. and then move the bottle slightly in each keyframe. 3. to specify the initial and final positions and then let Flash create the intermediate steps. type 668 for the X value and 31 for the Y value. The process of creating intermediate steps is called tweening. 4. The bottle should tip over. 4. type -25 in the Rotate box. Select frame 24 in the Pour layer. you could create a keyframe for each frame in the Timeline. 1. In the Property inspector. Ciências da Comunicação Page 11 of 27 Design e Multimédia . Note You'll learn more about motion tweens in Lessons 2 and 4. Choose Window > Transform to open the Transform panel.3. though. To achieve this effect. 2. and press F6 to insert a keyframe. Press Enter or Return to apply the values. Press Enter or Return to apply the value. It's much easier. In the Transform panel. In the Transform panel. and type 35 in the Rotate box. Select the bottle you positioned on the pasteboard. and press Enter or Return. You'll animate the bottle so that it appears to be pouring. select Rotate.
far off the Stage. 11. [View full size image] 6. 8. Press Shift as you drag to constrain its movement to a horizontal line. [View full size image] Lic. the bottle moves off the Stage. Select frame 59. In the Timeline. select any frame between frames 18 and 24 in the Pour bottle layer. Select the bottle on the Stage. Select any frame between frames 42 and 59. and press F6 to insert a keyframe.5. Flash adds an arrow to the frames in the Timeline to show that a motion tween has been applied. With frame 59 selected in the Timeline. 9. and choose Motion from the Tween menu in the Property inspector. and press F6 to insert a keyframe. choose Motion from the Tween menu. drag the bottle directly to the right. In the Property inspector. and in the Transform panel. Ciências da Comunicação Page 12 of 27 Design e Multimédia . If you move the playhead from frame 42 to frame 59. 10. type 35 in the Rotate box. select frame 42 in the Pour layer. Press Enter or Return. The Timeline displays an arrow to show that a motion tween has been applied. [View full size image] 7. In the Timeline.
and Parameters panel appear together at the bottom of the screen. such as Window > Properties > Properties. you may need to choose the panel from a submenu. it pays to know how to manage them. and the Tools panel is on the left side. you use the Library panel. Property inspector. or in between other panels. In this lesson. In a few cases. To move a panel group. the Color panel. To group a panel with another. To open any panel in Flash. To dock a panel. l l l Lic. you'll use the Actions panel. choose its name from the Window menu. bottom. the Timeline is at the top. Because panels are such an integral part of the Flash workspace. You can drag it to the top. drag its tab onto the other panel's tab. the Align panel. drag it by its tab into the dock on the right side of the screen. [View full size image] By default. the Property inspector. In later lessons. and the Timeline. Ciências da Comunicação Page 13 of 27 Design e Multimédia . drag the group by its title bar. or Window > Other Panels > History. Transform panel. Filters panel. Tools panel. drag it by its tab to a new location. Most other panels are displayed on the right side of the screen. History panel. you can move a panel to any position that is convenient for you. l To undock a panel from the right side of the screen. However. and other panels that let you control various aspects of your project.Working with Panels Just about everything you do in Flash involves a panel.
When you select the Zoom tool. stroke. when you select a drawing tool. Lic. For example. If there is a small triangle in the lower-right corner of the tool button. zoom in to see the logo circle more clearly. the options available at the bottom of the Tools panel change. 2.Using the Tools Panel The Tools panel—the long. remember to check the options area at the bottom of the panel to ensure that you're using the fill. which is hidden by the Rectangle tool. Select the Pour layer in the Timeline. 1. Click the aqua circle with the letters in it to enlarge it on the screen. First. Design e Multimédia . 3. Some tools are arranged in groups in the Tools panel. the Enlarge and Reduce options appear. The Tools panel contains too many tools to display all of them at once. only the tool you last selected from a group is displayed. the Object Drawing mode and Snap To Object options appear. Select the Zoom tool in the Tools panel. narrow panel on the far left side of the work area—contains selection tools. 2. or other settings appropriate for your task. and tool options. Then. you'll use the Oval tool to draw an outline around the logo circle. there are other tools in the group. navigation tools. Ciências da Comunicação Page 14 of 27 ). to draw an outline around the logo circle. drawing and type tools. painting and editing tools. 1. Select the Enlarge icon ( ) in the options area of the Tools panel. When you select a tool. Click and hold the icon for the visible tool to see the other tools available. You'll use the Oval tool. You'll use the Zoom tool to enlarge the central logo area on the Stage. You'll use the Tools panels frequently to switch from the Selection tool to the Text tool to a drawing tool. and then select one from the pop-up menu. and then click the Insert Layer icon ( Name the new layer Outline. When you select a tool.
Click the Stroke Color icon ( 7. The Color Picker opens again. 6. move the playhead to frame 293. Lock the Pour layer so that you don't accidentally move anything on it. ) in the options area of the Tools panel. Click the Fill Color icon ( ) in the options area of the Tools panel. The Adobe Color Picker opens. Click and hold the Rectangle tool in the Tools panel. and then select the Oval tool from the pop-up menu. 8. 4. In the Timeline. Ciências da Comunicação Page 15 of 27 Design e Multimédia .3. Lic. the last frame in the movie. Select black in the Color Picker. and select frame 293 in the Outline layer. [View full size image] 5.
Select No Color in the Color Picker. In the Property inspector. press the Alt (Windows) or Option (Mac OS) key as you use the Zoom tool to change it from Enlarge mode to Reduce mode. Hold down the Shift key as you draw an oval around the logo circle. In the Property inspector. and then use the arrow keys on your keyboard to nudge the circle into position. 13. Select the Selection tool ( ).9. [View full size image] Lic. Ciências da Comunicação Page 16 of 27 Design e Multimédia . 14. 10. 11. and then select the oval. You can modify many tools by pressing a key while you use them. For example. Select the oval. change the width and height values to 101 so that the oval you drew matches the logo circle exactly. Note Pressing the Shift key as you draw constrains the tool to draw a perfect circle. change the Stroke Height to 4. 12.
and navigation tools. [View full size image] Lic. drawing and painting tools.Tools Panel Overview The Tools panel contains selection tools. Ciências da Comunicação Page 17 of 27 Design e Multimédia . The options area in the Tools panel lets you modify the selected tool.
Closing a document clears its history. which displays a list of all the steps you've performed since you opened the current document. choose Edit > Undo. Ciências da Comunicação Page 18 of 27 Design e Multimédia . Choose Edit > Undo to change the Stroke value back to 1. choose Window > Other Panels > History. To undo a single step in Flash. undo the change in stroke size using the Undo command. 2.Undoing Steps in Flash In a perfect world. To open the History panel. You can undo steps in Flash using the Undo command or the History panel. and then remove the entire Outline layer using the History panel. To redo a step you've undone. everything would go according to plan. or press Control+Z (Windows) or Command+Z (Mac OS). Lic. so you'll remove the circle. But sometimes you need to move back a step or two and start over. The logo looked better before you added the black circle. First. it's easiest to use the History panel. choose Edit > Redo. 1. To undo multiple steps in Flash. Choose Window > Other Panels > History to open the History panel.
Lic. Ciências da Comunicação Page 19 of 27 Design e Multimédia . the removed steps will no longer be available. To add a step back.3. Drag the History panel slider up to the step just before you created the Outline layer. Note If you remove steps in the History panel and then perform additional steps. Steps below that point are dimmed in the History panel. move the slider back down. and they are removed from the project.
Lic. Flash opens and plays the movie in a separate window. choose Control > Test Movie. it's a good idea to preview it frequently to ensure that you're achieving the effect you want. To quickly see how an animation or movie will appear to a viewer.Previewing Your Movie As you work on a project. Choose Control > Test Movie. Ciências da Comunicação Page 20 of 27 Design e Multimédia . 2. You can also press Ctrl+Enter (Windows) or Command+Return (Mac OS) to preview your movie. Close the preview window. 1.
[View full size image] Lic. Navigate to the Lesson01/01Start folder to see the files Flash created.6. Ciências da Comunicação Page 22 of 27 Design e Multimédia .
0 Components are references for ActionScript 3. browse the table of contents. Choose Help > Flash Help. Lic. tools. 1. and other application features. and explanations of Flash concepts and feature descriptions.Using Flash Help For complete information about using panels. Note Flash Help also includes references for earlier versions of ActionScript and for multiple versions of Flash Lite. The Using Flash book includes how-to tips.0. tutorials. To open Flash Help. which is used to create animations for mobile and handheld devices. If you want to learn more about a general feature set or concept in Flash. which lets you extend the functionality and include interactivity in your Flash movies. Flash Help is divided into several books. choose Help > Flash Help.0. Ciências da Comunicação Page 23 of 27 Design e Multimédia . You'll use the table of contents to see more information about what's new in Flash CS3. Programming ActionScript 3. ActionScript 3.0 Language and Components Reference. refer to Flash Help. and Using ActionScript 3.
1. Lic. Ciências da Comunicação Page 24 of 27 Design e Multimédia . Expand the Using Flash book to view the table of contents.2. [View full size image] 3. search for the appropriate keyword. Click Getting Started > What's New > New Features to see links to new features in Flash CS3. If you're not sure where a topic would be included in the table of contents. You'll use the search function to learn more about the History panel. Choose Help > Flash Help. or if you want to see every topic that refers to a concept or term.
2. Ciências da Comunicação Page 25 of 27 Design e Multimédia . In the Search field. Select "Using the History Panel" to read about the History panel. 4. [View full size image] Lic. Click Search. type history. [View full size image] 3.
1.com) for information about Flash and other Adobe products. In Flash. choose Help > Help Resources Online.adobe.S. Lic. With an active Internet connection.Using Adobe Online Services Another way to get information about Flash and to stay abreast of updates is to use Adobe online services. you can access the Adobe website (www. Your default web browser launches and displays the Adobe Flash support page on the U. Adobe Systems website. Ciências da Comunicação Page 26 of 27 Design e Multimédia .
the latest product information. and troubleshooting and technical information. Lic. Explore the site. If you prefer. Ciências da Comunicação Page 27 of 27 Design e Multimédia . Close your browser. [View full size image] 3. as each lesson builds on concepts and skills you've learned in previous lessons. galleries of artwork by Adobe designers and artists around the world. most people will find it useful to work through the lessons in order.2. Now that you're acquainted with the Flash workspace. you can proceed to Lesson 2 to learn how to use Flash drawing tools. you can skip to any lesson in the book. Congratulations. You can find information such as tips and techniques. You've finished Lesson 1. However.