adobe flash cs3 professional classroom in a book

Adobe Flash CS3 Professional C lassroom in a Bookby Adobe Creative T eam

Publisher: Adobe Press

Pub Date: April 27, 2007Print ISBN-10: 0-321-49982-4Print ISBN-13: 978-0-321-49982-0

Pages: 352

Overview T his project-based guide from Adobe will teach readers all they need to know to create engaging interactive content with Flash CS3.Using step-by-step instructions with projects that build on the knowledge learned in each lesson, readers will learn the key elements ofthe Flash interface, including panels, timelines, and frames. From there, readers will learn how to work with vector and bitmap graphics;create and edit symbols; modify text and add interactivity with ActionScript 3.0; and incorporate animation, music, and sound to theirprojects. T hey'll also learn how to prepare and export their finished projects for Web and broadcast. Of course, readers will also learnhow to take advantage of the new features of Flash CS3--the streamlined user interface, native support for Photoshop and Illustratorfiles, revamped drawing tools, new video encoding features, code editing enhancements, and much more. T he companion CD providesusers with all the sample files they need to complete all of the projects.

Page 1

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

CopyrightT he Official T raining Workbook from Adobe Systems

2007 Adobe Systems Incorporated and its licensors. All rights reserved.

Adobe Flash CS3 Professional Classroom in a Book for Windows and Mac OS.

If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnishedunder license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, nopart of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. For information on obtaining permission,please write [email protected]. Please note that the content in this guide is protected under copyright law even if it is notdistributed with software that includes an end user license agreement.

Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law.T he unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please besure to obtain any permission required from the copyright owner. Any references to company names in sample templates are fordemonstration purposes only and are not intended to refer to any actual organization.

Adobe, the Adobe logo, Acrobat, the Acrobat logo, Classroom in a Book, AfterEffects, Flash, Illustrator, and Photoshop are trademarksof Adobe Systems Incorporated.

Apple, Mac OS, Macintosh, and Safari are trademarks of Apple registered in the U.S. and other countries. Microsoft, Windows, andInternet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries. All othertrademarks are the property of their respective owners.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA

Notice to U.S. Government End Users. T he Software and Documentation are "Commercial Items," as that term is defined at 48 C.F.R.2.101, consisting of "Commercial Computer Software" and "Commercial Computer Software Documentation," as such terms are usedin 48 C.F.R. 12.212 or 48 C.F.R. 227.7202, as applicable. Consistent with 48 C.F.R. 12.212 or 48 C.F.R. 227.7202-1through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are beinglicensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end userspursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe SystemsIncorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with allapplicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of theVietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, asamended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. T he affirmative action clause and regulationscontained in the preceding sentence shall be incorporated by reference.

Adobe Press books are published by Peachpit, Berkeley, CA. T o report errors, please send a note to [email protected].

Printed in the U.S.A.

ISBN-13: 978-0-321-49982-0

9 8 7 6 5 4 3 2 1

Writer: Brie GyncildDesign Director: Andrew Faulkner, afstudio designDesigners: Annie T sou, Heather Landry, Rachel LightfootProduction: Dawn Dombrow-T hompson, dtstudio

We offer our sincere thanks to the following people for their support and help with this project: Colin Smith, Paul Smith, Nader Nejat,Andrew Chew, T yler Munson, T hanh T ran, Jill Merlin, John Nack, Lee Unkrich, and Christine Yarrow. We couldn't have done itwithout you.

Page 2


Richard Galvan Sr. Product Manager - Flash CS3

Adobe Systems, Inc.

Greetings from the Flash team,

T hank you for choosing this book. Whether you are a longtime Flash user or are just beginning to experiment with animation,interactive websites, and creating visual effects, this book has something to help expand your knowledge of Flash. In addition to helpingnew users get up to speed quickly, Adobe Flash CS 3 Professional Classroom in a Book covers many new features, including anintroduction to ActionScript 3.0. So jump right in and start creating a splash with Flash.

We appreciate your interest and support of Flash.

Richard Galvan Senior Product Manager, Flash CS3

Page 3


Getting StartedAdobe Flash CS3 provides a comprehensive authoring environment for creating interactive websites and digital animation. Flash iswidely used to create engaging applications that are rich with video, graphics, and animation. You can create content in Flash or importit from other Adobe applications, quickly design simple animations, and use Adobe ActionScript 3.0 to develop sophisticatedinteractive projects.

Page 4


About Classroom in a BookAdobe Flash CS3 Professional Classroom in a Book is part of the official training series for Adobe graphics and publishing software.T he lessons are designed so that you can learn at your own pace. If you're new to Flash, you'll learn the fundamental concepts andfeatures you'll need to use the program. Classroom in a Book also teaches many advanced features, including tips and techniques for usingthe latest version of this application.

T he lessons in this book include opportunities to use new features, such as working with ActionScript 3.0, using new components tostreamline projects, importing symbols from Adobe Illustrator layers, integrating Adobe After Effects video, and more.

Page 5


What's on the CD[*]

[*] Here is an overview of the contents of the Classroom in a Book CD

Lesson Files ... and So Much More

T he Adobe Flash CS3 Professional Classroom in a Book CD includes the lesson files that you'll need to complete the exercises in thisbook, as well as other content to help you learn more about Flash CS3 and use it with greater efficiency and ease. T he diagram belowrepresents the contents of the CD, which should help you locate the files you need.

Page 6


PrerequisitesBefore beginning to use Adobe Flash CS3 Professional Classroom in a Book, make sure that your system is set up correctly and thatyou've installed the required software. You should have a working knowledge of your computer and operating system. You should knowhow to use the mouse and standard menus and commands, and also how to open, save, and close files. If you need to review thesetechniques, see the printed or online documentation included with your Microsoft Windows or Apple Mac OS software.

Page 7


Installing FlashYou must purchase the Adobe Flash CS3 software either as a stand-alone application or as part of the Adobe Creative Suite. Flash CS3requires Apple QuickT ime 7.1.2 or higher. For system requirements and complete instructions on installing the software, see theAdobe Flash ReadMe.html file on the application DVD.

Install Flash from the Adobe Flash CS3 application DVD onto your hard disk; you cannot run the program from the DVD. Follow theon-screen instructions.

Make sure that your serial number is accessible before installing the application; you can find the serial number on the registration cardor on the back of the DVD case.

Page 8


Optimizing PerformanceCreating animations is memory-intensive work for a desktop computer. Flash CS3 Professional requires a minimum of 512 MB ofRAM; 1 GB or more is recommended. T he more RAM that is available to Flash, the faster the application will work for you.

Page 9


Copying the Lesson FilesT he lessons in Adobe Flash CS3 Professional Classroom in a Book use specific source files, such as image files created in AdobeIllustrator, video files created in Adobe After Effects, audio files, and prepared Flash documents. T o complete the lessons in thisbook, you must copy these files from the Adobe Flash CS3 Professional Classroom in a Book CD (inside the back cover of this book) toyour hard disk.

1. On your hard disk, create a new folder in a convenient location and name it FlashCS3_CIB, following the standard procedurefor your operating system:

Windows: In Explorer, select the folder or drive in which you want to create the new folder, and choose File > New > Folder.T hen type the new name.

Mac OS: In the Finder, choose File > New Folder. T ype the new name and drag the folder to the location you want to use.Now, you can copy the source files onto your hard disk.

2. Copy the Lessons folder (which contains folders named Lesson01, Lesson02, and so on) from the Adobe Flash CS3 ProfessionalClassroom in a Book CD onto your hard disk by dragging it to your new FlashCS3_CIB folder.

When you begin each lesson, navigate to the folder with that lesson number, where you will find all of the assets, sample movies, andother project files you need to complete the lesson.

If you have limited storage space on your computer, you can copy each lesson folder individually as you need it, and delete it afterwardif desired. Some lessons build on preceding lessons; in those cases, a starting project file is provided for you for the second lesson orproject. You do not have to save any finished project if you don't want to, or if you have limited hard disk space.

About Copying the Sample Movies and Projects

You will create and publish SWF animation files in some lessons in this book. T he files in the End folders (01End, 02End, and so on)within the Lesson folders are samples of the completed project for each lesson. Use these files for reference if you want to compareyour work in progress with the project files used to generate the sample movies. T he end project files vary in size from relatively smallto a couple of megabytes, so you can either copy them all now if you have ample storage space, or copy just the end project file foreach lesson as needed, and then delete it when you finish that lesson.

Page 10


How to Use these LessonsEach lesson in this book provides step-by-step instructions for creating one or more specific elements of a real-world project. Somelessons build on projects created in preceding lessons; most stand alone. All of these lessons build on each other in terms of concepts andskills, so the best way to learn from this book is to proceed through the lessons in sequential order. In this book, some techniques andprocesses are explained and described in detail only the first few times you perform them.

Note

Many aspects of the Flash application can be controlled by multiple techniques, such as a menu command, a button, dragging, and akeyboard shortcut. Only one or two of the methods are described in any given procedure so that you can learn different ways of workingeven when the task is one you've done before.

T he organization of the lessons is also design-oriented rather than feature-oriented. T hat means, for example, that you'll work withsymbols on real-world design projects over several lessons, rather than in just one chapter.

Page 11


Additional ResourcesAdobe Flash CS3 Professional Classroom in a Book is not meant to replace documentation that comes with the program. T his bookexplains only the commands and options actually used in the lessons, so there's much more to learn about Flash. Classroom in a Bookaims to give you confidence and skills so that you can start creating your own projects. For more comprehensive information aboutprogram features, see:

T he Adobe Flash CS3 User Guide, which is included as a PDF file on the Adobe Flash CS3 application DVD and containsdescriptions of many features. Printed copies of the Flash CS3 User Guide are available for purchase from www.adobe.com/go/buy_books

Flash Help, which contains all of the information in the user guide and much, much more, and is available from within theapplication. You can view Flash Help by choosing Help > Flash Help.

Adobe CS3 Video Workshop DVD, included in the product box, provides you with 250 instructional movies on Flash CS3 andother products across the Adobe Creative Suite 3 lineup.

T he Adobe website (www.adobe.com). With an active Internet connection, you can access the website from a web browser orby choosing Help > Help Resources Online in Flash for links to several useful areas of the Adobe website.

Adobe Design Center (www.adobe.com/designcenter/), where you can find a wealth of tips, tutorials, and other designinspiration and instructional content.

Adobe Developer Center (www.adobe.com/devnet/), where you can find tutorials, articles, and sample applications. You canlearn the industry trends you need to master Adobe development-oriented products and technologies.

Page 12


Adobe CertificationT he Adobe T raining and Certification Programs are designed to help Adobe customers improve and promote their product-proficiencyskills. T here are three levels of certification:

Adobe Certified Expert (ACE) Adobe Certified Instructor (ACI) Adobe Authorized T raining Center (AAT C)

T he Adobe Certified Expert (ACE) program is a way for expert users to upgrade their credentials. You can use Adobe certification as acatalyst for getting a raise, finding a job, or promoting your expertise.

If you are an ACE-level instructor, the Adobe Certified Instructor program takes your skills to the next level and gives you access to awide range of Adobe resources.

Adobe Authorized T raining Centers offer instructor-led courses and training on Adobe products, employing only Adobe CertifiedInstructors. A directory of AAT Cs is available at http://partners.adobe.com.

For information on the Adobe Certified programs, visit www.adobe.com/support/certification/main.html.

Page 13


1. Getting Acquainted

In Flash, the Stage is where the action takes place, the T imeline organizes frames and layers, and other panels letyou edit and control your creation.

Lesson Overview

In this lesson, you'll learn how to do the following:

Open a file in Flash Add layers to the T imeline Create a keyframe in the T imeline Adjust settings in the Property inspector Open and work with panels Select and use tools in the T ools panel Search for topics in Flash Help Access online resources for Flash

T his lesson will take less than an hour to complete. Copy the Lesson01 folder from the Adobe Flash CS3 Professional Classroom in aBook CD onto your hard drive if it's not already there.

Page 14


Starting Flash and Opening a FileT he first time you start Flash, you'll see a Welcome screen with links to standard file templates, tutorials, and other resources. In thislesson, you'll complete an animation for a bottled-water company. Most of the artwork is already in place. As you get to know the Flashworkspace, 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 inthe 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.

2. Choose File > Open. In the Open dialog box, select the 01End.swf file in the Lesson01/01End folder, and click Open to previewthe final project.

An animation plays. During the animation, a bottle moves onto the screen and tips to pour water.

3. Close the preview window.

4. Choose File > Open. In the Open dialog box, double-click the 01Start.fla file in the Lesson01/01Start folder.

T he 01Start.fla file opens with a logo already on the Stage. T he T imeline contains several layers; the contents of the layers change indifferent frames.

5. Choose File > Save As. Name the file 01_workingcopy.fla, and save it in the 01Start folder. Saving a working copy ensuresthat the original start file will be available if you wish to start over.

Page 15


Getting to Know the Work AreaT he Adobe Flash work area includes the command menus at the top of the screen and a variety of tools and panels for editing and addingelements to your movie. You can create all the objects for your animation in Flash, or you can import elements you've created in AdobeIllustrator, Adobe Photoshop, Adobe After Effects, and other compatible applications.

By default, Flash displays the menu bar, T imeline, Stage, T ools panel, Property inspector, and a few other panels. As you work in Flash,you can open, close, dock, undock, and move panels around the screen. T o return to the default workspace, choose Default from theWorkspace menu in the Edit bar just above the Stage.

[View full size image]

About the Stage

As with a theater stage, the Stage in Flash is the area viewers see when a movie is playing. It contains the text, images, and video thatappear on the screen. Move elements on and off the Stage to move them in and out of the rectangular area in Flash Player or the webbrowser window where your Flash movie will play. You can use the grid, guides, and rulers to help you position items on the Stage.Additionally, you can use the Align panel and other tools you'll learn about in the lessons in this book.

T o see the work area around the Stage, use the Zoom tool ( ) to zoom out, or choose View > Pasteboard.

T o scale the Stage so that it fits completely in the application window, choose View > Magnification > Fit in Window. You can alsochoose view options from the pop-up menu just above the Stage.

Page 16


Understanding the Timeline

Like films, Flash documents measure time in frames. As the movie plays, the playhead advances through the frames in the T imeline.You can change the content on the Stage for different frames. T o display a frame's content on the Stage, move the playhead to thatframe in the T imeline.

At the bottom of the T imeline, Flash indicates the selected frame number, the current frame rate (how many frames play per second),and the time that has elapsed so far in the movie.


T he T imeline also contains layers, which help you organize the artwork in your document. T hink of layers as multiple film stripsstacked on top of each other. Each layer contains a different image that appears on the Stage, and you can draw and edit objects on onelayer without affecting objects on another layer. T he layers are stacked in the order that they appear in the T imeline, so that objects onthe bottom layer in the T imeline are on the bottom of the stack on the Stage. You can hide, show, lock, or unlock layers. Each layer'sframes are unique, but you can drag them to a new location on the same layer, or copy or move them to another layer.

Adding a Layer

A new Flash document contains only one layer, but you can add as many layers as you need. It's a good idea to name each layer toindicate its contents so that you can easily find the layer you need later.

You'll add a layer to the T imeline to contain the bottle image that you're going to animate.

1. Select the Mask layer in the T imeline.

2. Choose Insert > T imeline > Layer. A new layer appears between the Labels layer and the Mask layer.

3. Double-click the new layer to rename it, and type Pour. Click outside the name box to apply the new name.

4. Click the lock icon above the layers to lock all layers. Locking a layer prevents you from accidentally making changes to it.


Page 17


5. Click the lock icon next to the Pour layer to unlock it.


Creating a Keyframe

A keyframe indicates a change in content on the Stage. You'll insert a keyframe on the Pour layer where you want the bottle to firstappear.

1. Select frame 18 on the Pour layer. As you select a frame, Flash displays the frame number beneath the T imeline.


2. Choose Insert > T imeline > Keyframe.


Page 18


Working with the Library PanelT he Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmaps, graphics, soundfiles, and video clips. T he bottle image you're going to use has already been added to the library and converted to a symbol.

Note

You'll learn much more about symbols in Lesson 3.

About the Library Panel

T he Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type. Whenyou import items into Flash, you can import them onto the Stage or into the library. However, any item you import onto the Stage isalso added to the library, as are any symbols you create. T hat way, you can easily access the items to add them to the Stage again, editthem, or see their properties.

T o display the Library panel, choose Window > Library, or press Ctrl+L (Windows) or Command+L (Mac OS).

When you select an item in the Library panel, it displays a thumbnail preview of the item. If the item you selected is a sound file or isanimated, click the Play button in the preview window to play it.

Adding an Item from the Library Panel

T o add a library item to a Flash document, simply drag it from the Library panel onto the Stage. You've already created a keyframe forthe pour_bottle symbol. Now you'll drag an instance of that symbol onto the Stage.

1. Choose Window > Library to open the Library panel if it isn't already open.

2. Select the keyframe you created at frame 18 of the Pour layer.


Page 20


3. Select the pour_bottle symbol in the Library panel.

4. Drag an instance of the pour_bottle symbol onto the Stage. You'll move it into position in the next section of this lesson.


Page 21


Using the Property InspectorT he Property inspector gives you quick access to the attributes you're most likely to need. What appears in the Property inspectordepends on what you've selected. For example, if a frame is selected, the Property inspector includes a T ween option; if an object on theStage is selected, the Property inspector shows its x and y coordinates. You'll use the Property inspector to move the bottle to its initialand final positions on the Stage, and then to add a motion tween that animates the bottle.

Frame properties


Object properties


Positioning an Object on the Stage

First, you'll move the bottle into its initial position using the Property inspector. You'll also use the T ransform panel to rotate thebottle.

1. Select the bottle that you dragged onto the Stage.

2. In the Property inspector, type 689 for the X value and -59 for the Y value. Press Enter or Return to apply the values. T hebottle moves to the right, above the Stage.

Note

If the Property inspector is not open, choose Window > Properties > Properties, or press Ctrl+F3 (Windows) or Command+F3 (MacOS).


3. Choose Window > T ransform to open the T ransform panel.

4. In the T ransform panel, select Rotate, and type 35 in the Rotate box. Press Enter or Return to apply the value.

Page 23


Using Motion Tweens to Animate an Object

T he bottle should tip over, so that it appears to be pouring water. T o achieve this effect, you could create a keyframe for each frame inthe T imeline, and then move the bottle slightly in each keyframe. It's much easier, though, to specify the initial and final positions andthen let Flash create the intermediate steps. T he process of creating intermediate steps is called tweening.

Note

You'll learn more about motion tweens in Lessons 2 and 4.

You'll animate the bottle so that it appears to be pouring, and then move the bottle off the Stage.

1. Select frame 24 in the Pour layer, and press F6 to insert a keyframe.

2. Select the bottle you positioned on the pasteboard.

3. In the Property inspector, type 668 for the X value and 31 for the Y value. Press Enter or Return to apply the values.

4. In the T ransform panel, type -25 in the Rotate box, and press Enter or Return.

5. In the T imeline, select any frame between frames 18 and 24 in the Pour bottle layer.


Page 24


6. In the Property inspector, choose Motion from the T ween menu. Flash adds an arrow to the frames in the T imeline to showthat a motion tween has been applied.


7. In the T imeline, select frame 42 in the Pour layer, and press F6 to insert a keyframe.

8. Select the bottle on the Stage, and in the T ransform panel, type 35 in the Rotate box. Press Enter or Return.

9. Select frame 59, and press F6 to insert a keyframe.

10. With frame 59 selected in the T imeline, drag the bottle directly to the right, far off the Stage. Press Shift as you drag toconstrain its movement to a horizontal line.

11. Select any frame between frames 42 and 59, and choose Motion from the T ween menu in the Property inspector. T heT imeline displays an arrow to show that a motion tween has been applied. If you move the playhead from frame 42 to frame 59, thebottle moves off the Stage.


Working with PanelsJust about everything you do in Flash involves a panel. In this lesson, you use the Library panel, T ools panel, Property inspector,T ransform panel, History panel, and the T imeline. In later lessons, you'll use the Actions panel, the Color panel, the Align panel, andother panels that let you control various aspects of your project. Because panels are such an integral part of the Flash workspace, it paysto know how to manage them.

T o open any panel in Flash, choose its name from the Window menu. In a few cases, you may need to choose the panel from asubmenu, such as Window > Properties > Properties, or Window > Other Panels > History.

Page 25



By default, the Property inspector, Filters panel, and Parameters panel appear together at the bottom of the screen, the T imeline is atthe top, and the T ools panel is on the left side. Most other panels are displayed on the right side of the screen. However, you can movea panel to any position that is convenient for you.

T o undock a panel from the right side of the screen, drag it by its tab to a new location. T o dock a panel, drag it by its tab into the dock on the right side of the screen. You can drag it to the top, bottom, or in

between other panels.

T o group a panel with another, drag its tab onto the other panel's tab. T o move a panel group, drag the group by its title bar.

Page 26


Using the Tools PanelT he T ools panelthe long, narrow panel on the far left side of the work areacontains selection tools, drawing and type tools,painting and editing tools, navigation tools, and tool options. You'll use the T ools panels frequently to switch from the Selection tool tothe T ext tool to a drawing tool. When you select a tool, remember to check the options area at the bottom of the panel to ensure thatyou're using the fill, stroke, or other settings appropriate for your task.

You'll use the Zoom tool to enlarge the central logo area on the Stage. T hen, you'll use the Oval tool to draw an outline around the logocircle.

Selecting and Using a Tool

When you select a tool, the options available at the bottom of the T ools panel change. For example, when you select a drawing tool,the Object Drawing mode and Snap T o Object options appear. When you select the Zoom tool, the Enlarge and Reduce options appear.

First, zoom in to see the logo circle more clearly.

1. Select the Zoom tool in the T ools panel.

2. Select the Enlarge icon ( ) in the options area of the T ools panel.

3. Click the aqua circle with the letters in it to enlarge it on the screen.

Selecting a Hidden Tool

T he T ools panel contains too many tools to display all of them at once. Some tools are arranged in groups in the T ools panel; only thetool you last selected from a group is displayed. If there is a small triangle in the lower-right corner of the tool button, there are othertools in the group. Click and hold the icon for the visible tool to see the other tools available, and then select one from the pop-upmenu.

You'll use the Oval tool, which is hidden by the Rectangle tool, to draw an outline around the logo circle.

1. Select the Pour layer in the T imeline, and then click the Insert Layer icon ( ).

Page 27


2. Name the new layer Outline.

3. Lock the Pour layer so that you don't accidentally move anything on it.

4. In the T imeline, move the playhead to frame 293, the last frame in the movie, and select frame 293 in the Outline layer.


5. Click and hold the Rectangle tool in the T ools panel, and then select the Oval tool from the pop-up menu.

6. Click the Stroke Color icon ( ) in the options area of the T ools panel. T he Adobe Color Picker opens.

7. Select black in the Color Picker.

8. Click the Fill Color icon ( ) in the options area of the T ools panel. T he Color Picker opens again.

9. Select No Color in the Color Picker.

Page 28


10. Hold down the Shift key as you draw an oval around the logo circle.

Note

Pressing the Shift key as you draw constrains the tool to draw a perfect circle. You can modify many tools by pressing a key while youuse them. For example, press the Alt (Windows) or Option (Mac OS) key as you use the Zoom tool to change it from Enlarge mode toReduce mode.

11. Select the Selection tool ( ), and then select the oval.

12. In the Property inspector, change the width and height values to 101 so that the oval you drew matches the logo circle exactly.

13. Select the oval, and then use the arrow keys on your keyboard to nudge the circle into position.

14. In the Property inspector, change the Stroke Height to 4.


Tools Panel OverviewT he T ools panel contains selection tools, drawing and painting tools, and navigation tools. T he options area in the T ools panel lets youmodify the selected tool.


Page 29


Undoing Steps in FlashIn a perfect world, everything would go according to plan. But sometimes you need to move back a step or two and start over. You canundo steps in Flash using the Undo command or the History panel.

T o undo a single step in Flash, choose Edit > Undo, or press Control+Z (Windows) or Command+Z (Mac OS). T o redo a step you'veundone, choose Edit > Redo.

T o undo multiple steps in Flash, it's easiest to use the History panel, which displays a list of all the steps you've performed since youopened the current document. Closing a document clears its history.

T o open the History panel, choose Window > Other Panels > History.

T he logo looked better before you added the black circle, so you'll remove the circle. First, undo the change in stroke size using the Undocommand, and then remove the entire Outline layer using the History panel.

1. Choose Edit > Undo to change the Stroke value back to 1.

2. Choose Window > Other Panels > History to open the History panel.

3. Drag the History panel slider up to the step just before you created the Outline layer. Steps below that point are dimmed in theHistory panel, and they are removed from the project. T o add a step back, move the slider back down.

Page 31


Note

If you remove steps in the History panel and then perform additional steps, the removed steps will no longer be available.

Page 32


Previewing Your MovieAs you work on a project, it's a good idea to preview it frequently to ensure that you're achieving the effect you want. T o quickly seehow an animation or movie will appear to a viewer, choose Control > T est Movie. You can also press Ctrl+Enter (Windows) orCommand+Return (Mac OS) to preview your movie.

1. Choose Control > T est Movie. Flash opens and plays the movie in a separate window.

2. Close the preview window.

Page 33


Publishing Your MovieWhen you're ready to share your movie with others, publish it from Flash. For most projects, Flash will create an HT ML file, a SWFfile, and a JavaScript (.js) file. T he SWF file is your final Flash movie, the HT ML file contains the SWF file, and the JavaScript fileensures that browsers work well with your movie. You'll need to upload all three files to the same folder on your web server. Always testyour movie after uploading it to be certain that it's working properly.

Note

You'll learn more about publishing options in Lesson 11.

1. Choose File > Publish Settings.

2. Click Formats.

3. Select Flash (.swf) and HT ML (.html).

4. Click Publish.

Page 34


5. Click OK to close the dialog box.

6. Navigate to the Lesson01/01Start folder to see the files Flash created.


Page 35


Using Flash HelpFor complete information about using panels, tools, and other application features, refer to Flash Help. T o open Flash Help, chooseHelp > Flash Help.

Flash Help is divided into several books. T he Using Flash book includes how-to tips, tutorials, and explanations of Flash concepts andfeature descriptions. Programming ActionScript 3.0, ActionScript 3.0 Language and Components Reference, and Using ActionScript 3.0Components are references for ActionScript 3.0, which lets you extend the functionality and include interactivity in your Flash movies.

Note

Flash Help also includes references for earlier versions of ActionScript and for multiple versions of Flash Lite, which is used to createanimations for mobile and handheld devices.

Browsing the Table of Contents

If you want to learn more about a general feature set or concept in Flash, browse the table of contents. You'll use the table of contentsto see more information about what's new in Flash CS3.

1. Choose Help > Flash Help.

Page 36


2. Expand the Using Flash book to view the table of contents.


3. Click Getting Started > What's New > New Features to see links to new features in Flash CS3.

Searching for Keywords

If you're not sure where a topic would be included in the table of contents, or if you want to see every topic that refers to a concept orterm, search for the appropriate keyword. You'll use the search function to learn more about the History panel.

1. Choose Help > Flash Help.

2. In the Search field, type history.


Page 37


3. Click Search.

4. Select "Using the History Panel" to read about the History panel.


Page 38


Using Adobe Online ServicesAnother way to get information about Flash and to stay abreast of updates is to use Adobe online services. With an active Internetconnection, you can access the Adobe website (www.adobe.com) for information about Flash and other Adobe products.

1. In Flash, choose Help > Help Resources Online.

Your default web browser launches and displays the Adobe Flash support page on the U.S. Adobe Systems website.

2. Explore the site. You can find information such as tips and techniques, galleries of artwork by Adobe designers and artistsaround the world, the latest product information, and troubleshooting and technical information.


Page 39


3. Close your browser.

Congratulations. You've finished Lesson 1. Now that you're acquainted with the Flash workspace, you can proceed to Lesson 2 to learnhow to use Flash drawing tools. If you prefer, you can skip to any lesson in the book. However, most people will find it useful to workthrough the lessons in order, as each lesson builds on concepts and skills you've learned in previous lessons.

Page 40


ReviewReview Questions

1 What is the Stage?2 How do you open a panel in Flash?3 What's a hidden tool, and how can you access it?4 Name two methods to undo steps in Flash, and describe them.5 How can you find answers to questions you have about Flash?

Review Answers1 T he Stage is the area viewers see when a movie is playing in Flash player or a web browser. It contains the text,images, and video that appear on the screen. Objects that you store on the pasteboard outside of the Stage do not appear in themovie. 2 T o open a panel in Flash, choose Windows > [panel name]. Some panels, such as the History panel, are in the OtherPanels submenu. 3 Because there are too many tools to display at once in the T ools panel, some tools are grouped, and only one tool inthe group is displayed. (T he tool you most recently used is the one shown.) Small triangles appear on tool icons to indicate thathidden tools are available. T o select a hidden tool, click and hold the tool icon for the tool that is shown, and then select the hiddentool from the menu. 4 You can undo steps in Flash using the Undo command or the History panel. T o undo a single step at a time, chooseEdit > Undo. T o undo multiple steps at once, drag the slider up in the History panel. 5 Choose Help > Flash Help to browse or search Flash Help for information about using Flash CS3 and ActionScript3.0. Choose Help > Help Resources Online or visit www.adobe.com to see tutorials, tips, and other resources for Flash users.

Page 41


2. Working with Graphics

You can use rectangles, ovals, and lines to create interesting, complex animations in Flash. Combine them withimported graphics for even greater possibilities.

Lesson Overview


Draw rectangles, ovals, and lines Understand the difference between drawing modes Modify the shape and size of drawn objects Apply fill and stroke settings Import bitmap images for use in fills Select elements and portions of elements Create simple animations using motion tweens Group elements Create masks to hide areas of layers

T his lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from your hard drive, andcopy the Lesson02 folder onto it.

Page 42


Getting StartedFirst, view the finished movie to see the animation you'll be creating in this lesson.

1. Double-click the 02End.swf file in the Lesson02/02End folder to play the animation.

T he project is a simple animation that can be used as a logo on a web page or as a preloader, an animation that keeps the viewer'sattention while a web page loads. T his animation is for Fizzy Drink, a fictional company. In this lesson, you'll draw the shapes, modifythem, and animate them.

2. Double-click the 02Start.fla file in the Lesson02/02Start folder to open the initial project file in Flash.


Page 43


Creating RectanglesFlash includes several drawing tools, which work in different drawing modes. Many of your creations will begin with simple rectangles, soit's important that you're comfortable drawing them, modifying their shapes, and applying fills and strokes.

You'll begin by drawing the glass for the fizzy drink.

1. Select the Rectangle tool ( ). Make sure the Object Drawing mode icon ( ) is not selected. T he stroke and fill can beany color, but make sure a color is selected for each.

2. On the Stage, draw a rectangle that is about twice as tall as it is wide. You'll specify the exact size and position of the rectanglein step 5.

Note

Flash applies the default fill and stroke to the rectangle, which is determined by the last fill and stroke you applied. You'll specify adifferent fill and stroke for the rectangle in the following sections.

3. Select the Selection tool.

4. Drag the Selection tool around the entire rectangle to select the stroke and the fill. When a shape is selected, Flash displays itwith white dots.

Page 44


5. In the Property inspector, type 95 for the width, and 135 for the height. Press Enter or Return to apply the values.


Adding a Bitmap Fill

T he fill is the interior of the drawn object. You can apply a solid color, a gradient, or a bitmap image (such as a T IFF, JPEG, or GIF file)as a fill in Flash, or you can specify that the object has no fill. For this lesson, to give the glass the appearance of holding liquid, you'llimport an image of water to use as the fill. You can import a bitmap file in the Color panel.

1. Make sure the entire rectangle is still selected. If necessary, drag the Selection tool around it again.

2. In the Color panel, click the Fill Color icon ( ).

Note

Be sure to click the Fill Color icon, and not the Fill Color box. Clicking the Fill Color box opens the Adobe Color Picker, which youdon't need when you're importing a bitmap.

3. Select Bitmap from the T ype menu.

4. In the Import to Library dialog box, navigate to the Water.tif file in the Lesson02/02Start folder.

5. Select the Water.tif file and click Open.

T he rectangle fills with the water image.

Page 45


Specifying Stroke Properties

T he stroke is the outline of the object, in this case a rectangle. You can apply attributes to the stroke that are different from those ofthe fill; you can also specify that the object has no stroke. You'll give the rectangle a solid gray outline.

1. Select the rectangle on the Stage, if it isn't already selected.

2. In the Property inspector, click the Stroke Color box ( ).

3. In the Color Picker, select the fourth box down on the left, a gray color. Or, type #999999 in the box.

Note

Each color has a hexadecimal value in Flash, HT ML, and many other applications. Light gray is #999999; white is #FFFFFF; black is#000000. Appendix A (page 327) lists the colors with their hexadecimal values. You may find it handy to memorize the values for thecolors you use most often.

4. T ype 4 in the Stroke Height box, and press Enter or Return to apply the value.


T he rectangle should now have the water bitmap fill and a thick gray stroke.

Page 46


Modifying Objects

It's time to make this rectangle look more like a drinking glass. You'll use the Free T ransform tool to nudge the bottom corners inward.With the Free T ransform tool, you can adjust points on lines and shape outlines.

1. Select the Free T ransform tool ( ).

2. Drag the Free T ransform tool around the rectangle on the Stage to select it. T ransformation handles appear on the rectangle.

3. Press Ctrl+Shift (Windows) or Command+Shift (Mac OS) as you drag one of the corners inward. Pressing these keys lets youmove both corners the same distance simultaneously.

4. Click outside the shape to deselect it.

T he bottom of the rectangle is narrow, and the top is wide. It looks much more like a drinking glass.

Flash Drawing ModesFlash provides three drawing modes, which determine how objects interact with each other on the Stage, and how you can edit them. Bydefault, Flash uses merge drawing mode, but you can enable object drawing mode, or use the Rectangle Primitive or Oval Primitive toolto use the primitive drawing mode.

Merge Drawing ModeIn this mode, Flash merges drawn shapes, such as rectangles and ovals, where they overlap, so that multiple shapes appear to be a singleshape. If you move or delete a shape that has been merged with another, the portion that was overlapping is permanently removed.

Object Drawing ModeIn this mode, Flash does not merge drawn objects; they remain distinct and separate, even when they overlap. T o enable object drawingmode, select the tool you want to use, and then click the Object Drawing icon in the options area of the T ools panel.

T o convert an object to shapes (merge drawing mode), select it and press Ctrl+B (Windows) or Command+B (Mac OS). T o convert ashape to an object (object drawing mode), select it and choose Modify > Combine Object > Union.

Page 47


Primitive Drawing ModeNew to Flash CS3 is the primitive drawing mode. When you use the Rectangle Primitive tool or the Oval Primitive tool, Flash draws theshapes as separate objects. Unlike regular objects, however, you can modify the corner radius of rectangle primitives, and the start andend angle and the inner radius of oval primitives using the Property inspector.

Page 48


Using a Gradient FillIn a gradient, one color gradually changes into another. Flash can create linear gradients, which change color horizontally, vertically, ordiagonally; or radial gradients, which change color moving outward from a central focal point. You'll use a linear gradient fill to addweight and depth to the base of the drinking glass.


2. Drag a rectangle around the bottom of the glass to select an area for its base..

3. In the Color panel, click the Fill icon, and then select Linear from the T ype menu.

Note

Be sure to click the Fill icon, not the Fill Color box.

Flash applies a black and white linear gradient to the base of the glass.

Customizing Gradient Transitions

By default, a linear gradient moves from one color to a second color, but you can use up to 15 color transitions in a gradient in Flash. Acolor pointer determines where the gradient changes from one color to the next. Add color pointers beneath the gradient definition barto add color transitions.

You'll add a color pointer and adjust the existing pointers to create a gradient that moves from black to white to black in the base of theglass.

1. Click beneath the gradient definition bar to create a new color pointer.

Page 49


2. Drag the new color pointer to the middle of the gradient.

3. Select the new color pointer (the triangle above it turns black when selected) and then type #FFFFFF to specify white for thepointer. Press Enter or Return to apply the color.

4. Select the far-right color pointer, and then click the black area in the grayscale range above it, or type #000000.

T he gradient fill at the base of the glass changes from black to white to black.

Using the Gradient Transform Tool

In addition to positioning the color pointers for a gradient, you can adjust the size, direction, or center of a gradient fill. T o stretch thegradient in the glass, you'll use the Gradient T ransform tool.

Page 50


1. Select the Gradient T ransform tool ( ). (T he Gradient T ransform tool is grouped with the Free T ransform tool ( ).

2. Click in the glass base. T ransformation handles appear.

Note

Move the circle to change the center of the gradient; drag the arrow circle to rotate the gradient; or drag the arrow in the square tostretch the gradient.

3. Drag the square handle on the side of the bounding box to stretch the gradient until the gradient color matches the strokecolor of the glass. T he gradient should blend into the edge of the glass.

Page 51


Making SelectionsT o modify an object, you must first select it. In Flash, you can make selections using the Selection, Subselection, or Lasso tool.T ypically, you use the Selection tool to select an entire object or a section of an object. T he Subselection tool lets you select a specificpoint or line in an object. With the Lasso tool, you can draw a freeform selection.

Selecting Sections of a Fill

T o give the base of the glass a stronger highlight, you'll select a section of it and apply a white fill. But first, to prevent accidentallyselecting or modifying any part of the water fill, you'll group the glass base section.


2. Drag a selection around the base of the glass.

3. Choose Modify > Group.

4. Double-click the newly created group to edit it.

5. With the Selection tool, select the center area of the base shape. Start drawing the selection area from outside thegroupeither above or below itto prevent moving the entire base.

6. Click the Fill Color icon in the T ools panel, and select white or type #FFFFFF in the Color Picker.

Page 52


7. Click the Scene 1 icon to return to the main scene.

Using the Lasso Tool

T o make the drink more believable, you'll curve or slope the top of the liquid in the glass. T he Lasso tool is an ideal tool for this jobbecause you can use it to make an irregular selection.

1. Select the Lasso tool ( ). Make sure the Polygon Mode icon ( ) is not selected.

Note

When the Polygon Mode icon is selected, the Lasso tool is constrained to draw polygons.

Page 53


2. Draw a closed shape around the top of the glass fill. Overlap the ends, and then release the mouse.

3. Click the Color Fill icon in the T ools panel, and select white in the Color Picker. T he water bitmap is replaced with a solidwhite fill in the selected area.

4. T o ensure the glass is displayed during the entire animation, select frame 35 in the Glass layer in the T imeline, and chooseInsert > T imeline > Frame. Flash extends frame 1 to frames 2 through 35.

Page 54


T he drink itself is complete! All that's left to do is to add bubbles and fizz.

Page 55


Drawing OvalsT he Oval tool is similar to the Rectangle tool, except, of course, it draws ovals. You'll use the Oval tool to draw a bubble in the drinkingglass. So that you can easily animate the bubble later, you'll create it on a new layer.

1. Lock the Glass layer, so that you don't accidentally change it while you're working with the bubble.

2. Choose Insert > T imeline > Layer to add a layer for the bubble.

3. Name the layer Bubble.


4. Select the Oval tool ( ), which is grouped with the Rectangle tool.

5. Hold down the Shift key and draw a circle inside the glass. When you press the Shift key, the Oval tool draws a perfect circle.

6. Drag the Selection tool around the entire circle to select both the fill and the stroke.

7. In the Property inspector, set the Stroke color to No Color ( ) and the Fill color to white (#FFFFFF).


Page 56


8. Select the Free T ransform tool ( ) to resize the bubble.

9. Hold down the Shift key to retain the bubble's proportions, and drag a corner handle inward to make the bubble smaller. T heresized circle should be about 8 pixels wide and 8 pixels tall. You may find it easier to resize the bubble if you zoom in on it. (T heProperty inspector displays the bubble's height and width.)

By default, the object is scaled relative to the upper-left corner. If you press Alt (Windows) or Option (Mac OS), theobject is scaled relative to its transformation point, represented by the circle icon. You can drag the transformation point anywhere inthe object, or even outside of the object.

Page 57


Creating a Simple AnimationLater lessons cover animation in greater detail, but for this project, you'll use a motion tween to create a simple frame-by-frameanimation. You'll convert the bubble to a symbol, apply the motion tween, and then copy the layer to create additional animatedbubbles.

Converting a Shape to a Symbol

A symbol is a graphic, button, or movie clip that you create once in Flash and then reuse as many times as you like, reducing the size ofyour movie file. Additionally, there are ways you can use symbols that you can't use other shapes. You'll learn more about symbols in Lesson 3. Now, you'll convert the bubble to a symbol so that you can animate it.

1. With the Selection tool, select the bubble.

2. Choose Modify > Convert to Symbol.

3. Name the symbol bubble, and select Graphic for the symbol type. Click OK to close the Convert to Symbol dialog box.


Animating an Object

T he bubble should rise in the drink and change size over 20 frames. You'll specify the final bubble size and position at frame 20, and thenapply a motion tween. A motion tween automatically creates the frames between the beginning and the end of the animation.

1. Select the bubble on the Stage and move it to the bottom half of the glass.

2. Select frame 20 in the Bubble layer, and press F6 to insert a keyframe.

3. Select the bubble on the Stage.

4. In the Property inspector, enter the following values:

Height: 12 pixels Width: 12 pixels

5. Set the Y value to 90 pixels lower than its current value. For example, if the current Y value is 100, change it to 10. PressEnter or Return to apply the value.

T he larger bubble moves up to the top of the glass.


Page 59


6. Select any frame between 1 and 20 on the Bubble layer.

7. In the Property inspector, select Motion from the T ween menu.


8. T o see the bubble animation, choose Control > T est Movie. T he bubble floats to the top of the glass and out of it, and then theanimation repeats.

Adding Animation Layers

A drink needs more than one bubble, but you don't need to go through all the steps to create each one. Instead, you'll copy the Bubblelayer to create additional layers. T hen, you can reposition the bubbles' starting and ending positions.

1. Click the Insert Layer icon nine times to create nine new layers.

2. Name the layers Bubble2, Bubble3, Bubble4, and so on.

3. In the T imeline, click frame 1 in the Bubble layer, and then press the Shift key and click frame 20 to select frames 1-20.


4. Press Alt (Windows) or Option (Mac OS) as you drag the layer to one of the new layers above it, shifted slightly so that thefirst frame is a few frames further down the T imeline.


5. Copy the same frames to each layer, so that the starting keyframe for each layer is at a different position, from frame 1 toframe 15.


Page 60


6. Select the first keyframe in the Bubble2 layer, press Ctrl+A (Windows) or Command+A (Mac OS) to select the bubble onthat layer, and then drag the selected bubble to a different position in the glass.

7. Select the last keyframe in the layer, press Ctrl+A (Windows) or Command+A (Mac OS), and move the final bubble to aposition above its new starting point, so that the bubble travels straight up in the glass.

8. Repeat steps 5-7 for the remaining bubble layers, so that each bubble begins in a different position in the glass and ends in aposition directly above its starting position.

T o see each bubble's path more clearly, hide all the bubble layers except the one you're working with.


9. T o preview the animation, choose Control > T est Movie.

T he fizzy drink is now bubbly!

Page 61


Working with LinesT he Line tool draws straight lines, which you can combine to create new objects. T o add some sparkle to the drink, you'll create poppingfizz shapes above the glass.

Matching the Color of an Existing Object

T he fizz should match the drink color, so you'll set the stroke color of the initial ovals to match the darkest shade in the drink.

1. Select the Bubble10 layer (the top layer) in the T imeline.

2. Choose Insert > T imeline > Layer, and name the layer Fizz.

3. Select frame 1 in the Fizz layer.

4. Select the Oval tool.

5. In the Property inspector, click the Stroke Color box, and then use the Color Picker's eyedropper to click on a dark area of thedrink.

6. Set the Stroke Height to 3 and the Fill Color to none ( ).

7. Draw a small circle above the drink.

Adding Lines

You'll add lines to the oval to create a star shape.

1. Select the Line tool ( ) and select Object Drawing mode ( ).

2. Hold down the Shift key while you draw a line across the center of the oval. T he line should be about three times as long asthe oval is wide.

Hold down the Shift key while you draw a line to ensure the line is straight.

3. Choose Edit > Copy to copy the line you just drew.

4. Choose Edit > Paste In Place to paste a copy in exactly the same position.

5. Choose Modify > T ransform > Rotate 90 CCW to rotate the second line so that it is perpendicular to the first one.


Page 62


7. Hold down the Shift key and select both the horizontal and vertical lines.

8. Choose Edit > Copy to copy both lines.

9. Choose Edit > Paste In Place.

10. Choose Modify > T ransform > Scale And Rotate.

11. T ype 45 in the Rotate box, and click OK.

T he second set of lines are perpendicular to the first set, creating a star.


Breaking Objects Apart

You used the object drawing mode to create the lines. Now, to remove the overlapping lines from the center of the circle, you'll convertthe lines into separate line segments.

1. With the Selection tool, drag a selection around the entire star so that all four lines and the circle are selected.

2. Choose Modify > Break Apart.

3. Click a blank area on the Stage to deselect the star.

4. Select each line segment in the center of the circle and delete it.

Page 63


Manipulating ObjectsYou can combine multiple objectswhether they were drawn using object drawing mode or notto copy, paste, reposition, andotherwise work with them more efficiently. T o create multiple fizz elements, you'll group the components of the star.

Disabling Snap To Guides

Guides appear as you drag an object on the Stage. T hese guides can help you align objects quickly, and you can snap the object you'removing to a guide or to another object. For this project, however, you want to place the fizz elements randomly, so you'll deselect SnapT o Guides and Snap T o Objects.

1. Choose View > Snapping > Snap T o Guides.

2. Choose View > Snapping > Snap T o Objects.

Grouping Objects

T o copy the star, you'll first group all the components of the star.

1. With the Selection tool, drag a selection around the entire star.

2. Choose Modify > Group.

3. Press Alt (Windows) or Option (Mac OS), and drag the group to an open area above the drink.

Pressing Alt (Windows) or Option (Mac OS) copies the selected object as you drag it.

4. Repeat step 3 to make another copy of the star.

Adding Shapes

In addition to the stars, the fizzy area above the drink will contain small ovals. You'll use the Oval tool to create those.

1. Select the Oval tool.

2. Hold down the Shift key, and draw a circle.

Page 64


3. With the Selection tool, select the circle.

4. Press Alt (Windows) or Option (Mac OS), and drag the circle to create another copy.

Animating Objects

You'll create a very simple animation for the fizzing elements to create a popping effect. T he objects will move on the screen everyfive frames. You must create a keyframe at each frame where the objects move.

1. In the T imeline, select frame 5 in the Fizz layer, which contains the fizz objects.

2. Choose Insert > T imeline > Keyframe.


3. Add a keyframe for every fifth frame through frame 30. (T hat is, create keyframes at frames 10, 15, 20, 25, and 30.)


4. In the T imeline, select the keyframe at frame 5.

5. Rearrange the fizz elements on the Stage.

6. Select each of the remaining keyframes, in turn, and rearrange the fizz elements so that they're in a different position for eachkeyframe.

7. Choose Control > T est Movie to preview the popping fizz you've created, and then close the preview window.

Page 65


Masking ObjectsA mask provides a hole through which underlying layers show, so that you can limit the area of the layers that is visible. You'll use amask to keep the bubbles in the glass.

1. Unlock the Glass layer.

2. Click on the drink fill on the Stage to select it.

3. Choose Edit > Copy.

4. Choose Edit > Deselect All to prevent the fill from sitting above the outline.

5. Lock the Glass layer again.

6. In the T imeline, select the Bubble10 layer, beneath the Fizz layer.

7. Choose Insert > T imeline > Layer.

8. Choose Edit > Paste In Place. T he drink fill shape is pasted into the new layer.


9. Name the layer Mask.

10. Right-click (Windows) or Control-click (Mac OS) the Mask layer, and choose Mask.

Flash locks the Mask layer and indents the layer beneath it.


Page 66


11. In the T imeline, select all the layers from Bubble to Bubble9.

T o select multiple contiguous layers, click the first layer, press the Shift key, and click the last layer.

12. In the T imeline, drag the selected layers onto the Bubble10 layer (the indented layer).

All the layers are indented below the Mask layer, so the Mask layer masks all of them. No bubbles will appear outside the drink fill.

Page 67


Testing a MoviePreview your animation to make sure it's behaving as you expect. In fact, you should preview the movie frequently so that you cantroubleshoot or simply tweak your animation.

T o preview the movie, choose Control > T est Movie. You see the full effects of the drink, the bubbles, and the fizzall created withrectangles, ovals, and lines. You've created an animated fizzy drink!

T o use this animation in other projects, you can copy all keyframes from the main T imeline and paste them into a newmovie clip symbol, which you can then place wherever you want to use it.

Page 68


ReviewReview Questions

1 What are the three drawing modes in Flash, and how do they differ?2 How can you draw a perfect circle using the Oval tool?3 When would you use each of the selection tools in Flash?4 What does a mask do?

Review Answers1 T he three drawing modes are merge drawing mode, object drawing mode, and primitive drawing mode.

In merge drawing mode, shapes drawn on the Stage merge to become a single shape. In object drawing mode, each object is distinct and remains separate, even when it overlaps another object. In primitive drawing mode, you can modify the angles, radius, or corner radius of an object.

2 T o draw a perfect circle, hold down the Shift key as you drag the Oval tool on the Stage.3 Flash includes three selection tools: the Selection tool, the Subselection tool, and the Lasso tool.

Use the Selection tool to select an entire shape or object. Use the Subselection tool to select a specific point or line in an object. Use the Lasso tool to draw a freeform selection area.

4 A mask restricts the visible area of the layers beneath it. Only the area that is covered by the mask shows through.

Page 69


3. Creating and Editing Symbols

Movie clip, graphic, and button symbols keep your file size small while increasing your flexibility. A single symbolcan be used countless times in a project, but the file's data only has to be included once.

Lesson Overview


Import Illustrator files Create new symbols Understand the difference between symbol types Adjust transparency Import assets into the library Use library assets Convert bitmap graphics to vectors Reduce the file size of Flash documents Apply web-safe colors

T his lesson will take about an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy theLesson03 folder onto it.

Page 70


Getting StartedFirst, view the final project to see what you'll be creating as you learn to work with symbols.

1. Double-click the 03End.swf file in the Lesson03/03End folder to view the final project in Flash. Move the mouse over thebuttons to see their rollover states.

T he project is a DVD interface, designed to help a viewer navigate among the options on a DVD. In this lesson, you'll use Illustratorgraphic files, imported JPEG files, and symbols to create an attractive, useful interface. You'll create buttons and position them in theinterface, so they would be ready for scripting.

2. Close the 03End.swf file.

3. Double-click the 03Start.fla file in the Lesson03/03Start folder to open the initial project file in Flash.


Page 71


Importing Illustrator FilesAs you learned in Lesson 2, you can draw objects in Flash using the Rectangle, Oval, and Line tools. However, for complex drawings, youmay prefer to create the artwork in another application. Adobe Flash CS3 supports native Adobe Illustrator files, so you can createoriginal artwork in Illustrator and then import it into Flash.

When you import an Illustrator file, you can choose which layers in the file to import, and how Flash should treat those layers. You'llimport an Illustrator file to serve as the main component of a DVD interface.

1. Choose File > Import > Import T o Stage.

2. Select the DVD_interface_layout.ai file in the Lesson03/03Start folder.

3. Click Open (Windows) or Import (Mac OS).

4. In the Import T o Stage dialog box, make sure all layers are selected. A check mark should appear in the check box next to eachlayer.

5. Choose Flash Layers from the Convert Layers T o menu, and select Place Objects At Original Position. T hen, click OK.


Flash imports the DVD interface image, and three layers appear in the T imeline: Menu, Preview Boxes, and Menu Background.


Page 72


Using Adobe Illustrator with FlashFlash CS3 can import native Illustrator files, automatically recognizing layers, frames, and symbols. If you're more familiar withIllustrator, you may find it easier to design layouts in Illustrator and then import them into Flash to add animation and interactivity.

Save your Illustrator artwork in Illustrator CS3 AI format, and then choose File > Import T o Stage or File > Import T o Library toimport the artwork into Flash. Alternatively, you can even copy artwork from Illustrator and paste it into a Flash document.

Importing LayersWhen an imported Illustrator file contains layers, you can import them in any of the following ways:

Convert Illustrator layers to Flash layers Convert Illustrator layers to Flash frames Convert each Illustrator layer to a Flash graphic symbol Convert all Illustrator layers to a single Flash layer


Page 73


Importing SymbolsWorking with symbols in Illustrator is similar to working with them in Flash. In fact, you can use many of the same symbol keyboardshortcuts in both Illustrator and Flash; press F8 in either application to create a symbol. When you create a symbol in Illustrator, theSymbol Options dialog box lets you name the symbol and set options specific to Flash, including the symbol type (such as movie clip),and registration grid location.

If you want to edit a symbol in Illustrator without disturbing anything else, double-click the symbol to edit it in isolation mode.Illustrator dims all other objects on the artboard. When you exit isolation mode, the symbol in the Symbols paneland all instances ofthe symbolare updated accordingly.

Use the Symbols panel or the Control panel in Illustrator to assign names to symbol instances, break links between symbols andinstances, swap a symbol instance with another symbol, or create a copy of the symbol.

For a video tutorial on using symbols between Illustrator and Flash, visit www.adobe.com/go/vid0198.

Copying and Pasting ArtworkWhen you copy and paste (or drag and drop) artwork between Illustrator and Flash, the Paste dialog box appears. T he Paste dialog boxprovides import settings for the Illustrator file you're copying. You can paste the file as a single bitmap object, or you can paste it usingthe current preferences for AI files. (T o change the settings, choose Edit > Preferences in Windows or Flash > Preferences in Mac OS.)Just as when you import the file to the Stage or the Library panel, when you paste Illustrator artwork, you can convert Illustrator layersto Flash layers.

Page 74


About SymbolsA symbol is a graphic, button, or movie clip that you create once in Flash and can then reuse throughout your document or in otherdocuments. Symbols can reduce the file size and download time for many animations. You can use a symbol countless times in a project,but Flash includes its data only once.

Symbols are stored in the Library panel. When you drag a symbol to the Stage, Flash creates an instance of the symbol, leaving theoriginal in the library. An instance is a copy of a symbol located on the Stage or nested inside another symbol

T here are three kinds of symbols in Flash, and each has advantages and limitations. You can tell whether a symbol is a graphic ( ),

button ( ), or movie clip ( ) by looking at the icon next to it in the Library panel.

Movie Clip Symbols

Many designers use movie clip symbols for all kinds of objects in Flash because movie clips are the most flexible symbols. You can applyfilters, color settings, and blending modes to a movie clip symbol. You can name each instance of a movie clip symbol, and control itwith ActionScript.

Movie clip T imelines are also the most flexible. T hey can contain sounds, interactive controls, and even other movie clip instances.T hough they do not include the default frames for rollover states that are in a button symbol's T imeline, you can create a button using amovie clip symbol by using ActionScript to create the rollover states.

Button Symbols

You can quickly create interactive buttons with standard rollover states using button symbols. Unlike movie clip T imelines, buttonsymbol T imelines have four frames: Up, Over, Down, and Hit.

You can name individual button instances, and you can control them using ActionScript. You can also apply filters, blending modes, andcolor settings.

T he Up state is the default state. T he Over state determines the button's appearance when the mouse rolls over it. T he Down state determines the button's appearance when it is clicked. T he Hit state defines the button's active area, which is the area that responds to the mouse click.

Graphic Symbols

Use graphic symbols for static imagesthat is, images you don't plan to animatethat are tied to the main T imeline.

Graphic symbols are the least flexible symbols. T hey don't support ActionScript and, though you can animate a graphic symbol,interactive controls and sounds won't work. You also can't apply filters or blending modes to a graphic symbol.

Page 76


Converting Objects to SymbolsT he interface layout you imported from Illustrator includes three green boxes, which will hold thumbnails for video clips. Beforepositioning the video clips on the boxes, you'll convert them to movie clip symbols, so that you could use ActionScript with them later.

1. In the T imeline, select frame 1 of the Preview Boxes layer to select the green boxes, which are the only objects on that layer.


2. Choose Modify > Convert to Symbol.

3. Name the symbol preview_boxes.

4. Select Movie Clip for the T ype.

5. Click OK. T he preview_boxes symbol appears in the library.

Page 77


Importing Bitmap ImagesYou'll import JPEG images to position over the green boxes. Earlier, you imported the DVD layout directly to the Stage. T his time,however, you'll import images to the library, so that you can decide later where to place them on the Stage. Many designers import allthe assets for a project to the library when they begin working, and then drag the assets to the Stage as they need them.

Note

If you import images to the Stage, Flash also adds them to the library.

About Image Formats

Flash supports JPEG, GIF, and PNG files, which are all bitmap formats. Use JPEG files for images that include gradients and subtlevariations, such as those that occur in photographs. Use GIF files for images with large solid blocks of color. Use PNG files (a nativeformat in Flash) for images that include transparency. PNG files often have a much larger file size than JPEG or GIF files.

In the Library panel, you can set PNG files to export as JPEG files, with a smaller file size, while retaining theirtransparency.

Importing Images to the Library

First, you'll import three JPEG images to the library. Later, you'll add them to the preview_boxes symbol.

1. Choose File > Import > Import T o Library.

2. Select the Vacation_1.jpg file in the Lesson03/03Start folder.

3. Hold down the Shift key, and select the Vacation_2.jpg and Vacation_movie.jpg files, as well.

Hold down the Shift key whenever you want to select multiple files.

4. Click Open (Windows) or Import T o Library (Mac OS).

Flash adds the three JPEG files you imported to the library, without placing them on the Stage.

Page 78


Importing Images to the Stage

T he background image for the DVD interface is an image of people on a beach with large umbrellas. T his image will appear behind theexisting layout, so you'll create a layer for it and move that layer beneath the other layers. Import the image directly to the Stage.

1. Choose Insert > T imeline > Layer.

2. Name the layer Beach Background.

3. In the T imeline, drag the Beach Background layer below the Menu Background layer.


4. Choose File > Import > Import to Stage.

5. Select Beach_umbrellas.jpg in the Lesson03/03Start folder.


T he Beach_umbrellas jpg image appears beneath the other layers on the Stage.

Page 79


Converting a Bitmap to a Vector

You can convert bitmap images to vector objects to reduce the file size of your movie, and also to give you more flexibility inmanipulating the graphic. T he T race Bitmap command converts a bitmap into a vector graphic with editable, discrete areas of color. T oreduce the file size, you'll convert the Beach_umbrellas.jpg file to a vector graphic.

Note

When you convert a bitmap image to a vector graphic on the Stage, it is no longer linked to the bitmap image file in the library. In thisproject, you're only using the Beach_umbrellas.jpg image once, so you don't need to retain the link to the file in the library.

1. With the Beach_umbrellas.jpg image still selected on the Stage, choose Modify > Bitmap > T race Bitmap.

2. Enter the following settings:

Color T hreshold: 100 Minimum Area: 8 Curve Fit: Normal Corner T hreshold: Normal

3. Click OK.

Page 80


Adding Bitmaps to a Movie Clip SymbolEach symbol has its own T imeline. You can add layers to a symbol's T imeline just as you can to the main T imeline. As you add assets toa symbol's T imeline, they are nested within the symbol. You'll add a layer to the preview_boxes T imeline, and then add bitmap imagesto the preview_boxes movie clip symbol.


2. Double-click one of the green boxes on the Stage to edit the preview_boxes movie clip symbol. Flash opens thepreview_boxes symbol T imeline and dims the other objects on the Stage.

Double-click an instance of a symbol on the Stage to see the rest of the layout while you're editing the symbol. T o see onlythe symbol as you edit it, double-click the symbol in the Library panel.

3. Select Layer 1 and rename it Boxes. T his layer contains the green preview boxes.

4. 4 Choose Insert > T imeline > Layer.

5. Name the layer T humbnails. You'll add the thumbnail images to this layer.

6. Drag the Vacation_1.jpg image from the Library panel to the first green preview box on the Stage.

Note

If the Library panel isn't visible, choose Window > Library to display it.

7. Deselect the image. T hen, press Alt (Windows) or Option (Mac OS), and drag the image from the first box to thesecond box. T he image is copied to the second box.

8. In the Property inspector, click Swap.

9. In the Swap Bitmap dialog box, select Vacation_2.jpg, and click OK. T he Vacation_2.jpg file replaces the image in the secondbox.

Page 82


10. Drag the Vacation_movie.jpg image from the Library panel onto the third box on the Stage.

Page 83


Working with ButtonsUse button symbols to create interactive buttons that include rollover states, which cause the buttons to change appearance when youclick them, roll the mouse over them, or perform other actions. In Lesson 9, you'll use ActionScript to assign actions to buttons, but inthis lesson, you're just creating the button states.

Creating a Button Symbol

You could convert an existing asset to a button symbol. For this project, though, you'll create a brand new symbol for the buttons.

1. Choose Insert > New Symbol.

2. Name the symbol menu_button.

3. Select Button for the T ype, and click OK.

Flash adds the menu_button symbol to the library and opens the menu_button T imeline.


Importing a File with Button States

T he Up, Down, and Over button states can include any change in graphics, color, shape, or size. If you want to create a complex set ofbutton states, you may want to create the artwork in Adobe Illustrator. For this lesson, you'll import an Illustrator file that alreadycontains the artwork for three button states. Because the menu_button symbol T imeline is open, the imported Illustrator layers will fillthe appropriate states.

1. Choose File > Import > Import T o Stage.

2. Select the DVD_interface_button_states.ai file in the Lesson03/03Start folder.


4. Select all the layers in the file. T he Illustrator file contains three button states.

5. Select Keyframes from the Convert Layers T o menu.

Selecting Keyframes imports the layers into the proper frames in a single layer. If you selected Flash Layers, as you did when importingthe DVD interface, the states would import as separate layers, and the button wouldn't work properly.


Page 84


6. Click OK.

Flash imports the button state images as states for the menu_button symbol, and the symbol appears on the Stage for editing.


Adding a Button Symbol to the Stage

T he menu_button symbol is in the library. You'll add an instance of the button to the Stage above each of the m

adobe flash cs3 professional classroom in a book

Documents

adobe logo

adobe presspub date

new features of flash

overview t

t heyll

copyright law

copyright owner

end user license agreement