Cover
Adobe® Flash® CS3 Professional Classroom in a Book® by Adobe Creative Team Publisher: Adobe Press Pub Date: April 27, 2007 Print ISBN-10: 0-321-49982-4 Print ISBN-13: 978-0-321-49982-0 Pages: 352
Overview This 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 of the 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 their projects. They'll also learn how to prepare and export their finished projects for Web and broadcast. Of course, readers will also learn how to take advantage of the new features of Flash CS3--the streamlined user interface, native support for Photoshop and Illustrator files, revamped drawing tools, new video encoding features, code editing enhancements, and much more. The companion CD provides users with all the sample files they need to complete all of the projects.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/00_cover.htm [13.06.2007 22:07:40]
Copyright
Copyright The Official Training 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 furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part 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 not distributed 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. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner. Any references to company names in sample templates are for demonstration 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 trademarks of Adobe Systems Incorporated. Apple, Mac OS, Macintosh, and Safari are trademarks of Apple registered in the U.S. and other countries. Microsoft, Windows, and Internet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries. All other trademarks 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. The 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 used in 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-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/copyrightpg.htm (1 of 2) [13.06.2007 22:07:41]
Copyright
402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference. Adobe Press books are published by Peachpit, Berkeley, CA. To report errors, please send a note to
[email protected]. Printed in the U.S.A. ISBN-13: 978-0-321-49982-0 987654321 Writer: Brie Gyncild Design Director: Andrew Faulkner, afstudio design Designers: Annie Tsou, Heather Landry, Rachel Lightfoot Production: Dawn Dombrow-Thompson, 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, Tyler Munson, Thanh Tran, Jill Merlin, John Nack, Lee Unkrich, and Christine Yarrow. We couldn't have done it without you.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/copyrightpg.htm (2 of 2) [13.06.2007 22:07:41]
About Author
Richard Galvan Sr. Product Manager - Flash CS3
Adobe Systems, Inc. Greetings from the Flash team, Thank 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 helping new users get up to speed quickly, Adobe Flash CS 3 Professional Classroom in a Book covers many new features, including an introduction 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
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/pref01.htm [13.06.2007 22:07:42]
Getting Started
Getting Started Adobe® Flash® CS3 provides a comprehensive authoring environment for creating interactive websites and digital animation. Flash is widely used to create engaging applications that are rich with video, graphics, and animation. You can create content in Flash or import it from other Adobe applications, quickly design simple animations, and use Adobe ActionScript™ 3.0 to develop sophisticated interactive projects.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00.htm [13.06.2007 22:07:42]
About Classroom in a Book
About Classroom in a Book Adobe Flash CS3 Professional Classroom in a Book® is part of the official training series for Adobe graphics and publishing software. The lessons are designed so that you can learn at your own pace. If you're new to Flash, you'll learn the fundamental concepts and features you'll need to use the program. Classroom in a Book also teaches many advanced features, including tips and techniques for using the latest version of this application. The lessons in this book include opportunities to use new features, such as working with ActionScript 3.0, using new components to streamline projects, importing symbols from Adobe Illustrator® layers, integrating Adobe After Effects® video, and more.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec1.htm [13.06.2007 22:07:42]
What's on the CD
[*]
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 The Adobe Flash CS3 Professional Classroom in a Book CD includes the lesson files that you'll need to complete the exercises in this book, as well as other content to help you learn more about Flash CS3 and use it with greater efficiency and ease. The diagram below represents the contents of the CD, which should help you locate the files you need.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec2.htm [13.06.2007 22:07:43]
Prerequisites
Prerequisites Before beginning to use Adobe Flash CS3 Professional Classroom in a Book, make sure that your system is set up correctly and that you've installed the required software. You should have a working knowledge of your computer and operating system. You should know how to use the mouse and standard menus and commands, and also how to open, save, and close files. If you need to review these techniques, see the printed or online documentation included with your Microsoft® Windows® or Apple® Mac® OS software.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec3.htm [13.06.2007 22:07:43]
Installing Flash
Installing Flash You must purchase the Adobe Flash CS3 software either as a stand-alone application or as part of the Adobe Creative Suite. Flash CS3 requires Apple QuickTime® 7.1.2 or higher. For system requirements and complete instructions on installing the software, see the Adobe 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 the on-screen instructions. Make sure that your serial number is accessible before installing the application; you can find the serial number on the registration card or on the back of the DVD case.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec4.htm [13.06.2007 22:07:44]
Optimizing Performance
Optimizing Performance Creating animations is memory-intensive work for a desktop computer. Flash CS3 Professional requires a minimum of 512 MB of RAM; 1 GB or more is recommended. The more RAM that is available to Flash, the faster the application will work for you.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec5.htm [13.06.2007 22:07:44]
Copying the Lesson Files
Copying the Lesson Files The lessons in Adobe Flash CS3 Professional Classroom in a Book use specific source files, such as image files created in Adobe Illustrator®, video files created in Adobe After Effects®, audio files, and prepared Flash documents. To complete the lessons in this book, you must copy these files from the Adobe Flash CS3 Professional Classroom in a Book CD (inside the back cover of this book) to your hard disk. 1.
On your hard disk, create a new folder in a convenient location and name it FlashCS3_CIB, following the standard procedure for 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. Then type the new name. Mac OS: In the Finder, choose File > New Folder. Type 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 Professional Classroom 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, and other 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 afterward if desired. Some lessons build on preceding lessons; in those cases, a starting project file is provided for you for the second lesson or project. 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. The 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 compare your work in progress with the project files used to generate the sample movies. The end project files vary in size from relatively small to 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 for each lesson as needed, and then delete it when you finish that lesson.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec6.htm [13.06.2007 22:07:45]
How to Use these Lessons
How to Use these Lessons Each lesson in this book provides step-by-step instructions for creating one or more specific elements of a real-world project. Some lessons build on projects created in preceding lessons; most stand alone. All of these lessons build on each other in terms of concepts and skills, so the best way to learn from this book is to proceed through the lessons in sequential order. In this book, some techniques and processes 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 a keyboard shortcut. Only one or two of the methods are described in any given procedure so that you can learn different ways of working even when the task is one you've done before.
The organization of the lessons is also design-oriented rather than feature-oriented. That means, for example, that you'll work with symbols on real-world design projects over several lessons, rather than in just one chapter.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec7.htm [13.06.2007 22:07:46]
Additional Resources
Additional Resources Adobe Flash CS3 Professional Classroom in a Book is not meant to replace documentation that comes with the program. This book explains only the commands and options actually used in the lessons, so there's much more to learn about Flash. Classroom in a Book aims to give you confidence and skills so that you can start creating your own projects. For more comprehensive information about program features, see: ●
●
●
●
●
●
The Adobe Flash CS3 User Guide, which is included as a PDF file on the Adobe Flash CS3 application DVD and contains descriptions 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 the application. 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 and other products across the Adobe Creative Suite 3 lineup. The Adobe website (www.adobe.com). With an active Internet connection, you can access the website from a web browser or by 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 design inspiration and instructional content. Adobe Developer Center (www.adobe.com/devnet/), where you can find tutorials, articles, and sample applications. You can learn the industry trends you need to master Adobe development-oriented products and technologies.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec8.htm [13.06.2007 22:07:46]
Adobe Certification
Adobe Certification The Adobe Training and Certification Programs are designed to help Adobe customers improve and promote their product-proficiency skills. There are three levels of certification: ● ● ●
Adobe Certified Expert (ACE) Adobe Certified Instructor (ACI) Adobe Authorized Training Center (AATC)
The Adobe Certified Expert (ACE) program is a way for expert users to upgrade their credentials. You can use Adobe certification as a catalyst 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 a wide range of Adobe resources. Adobe Authorized Training Centers offer instructor-led courses and training on Adobe products, employing only Adobe Certified Instructors. A directory of AATCs is available at http://partners.adobe.com. For information on the Adobe Certified programs, visit www.adobe.com/support/ certification/main.html.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch00lev1sec9.htm [13.06.2007 22:07:47]
1. Getting Acquainted
1. Getting Acquainted
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. Lesson Overview 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01.htm [13.06.2007 22:07:47]
Starting Flash and Opening a File
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.
2.
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.
Close the preview window.
4.
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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec1.htm [13.06.2007 22:07:48]
Getting to Know the Work Area
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. You can create all the objects for your animation in Flash, or you can import elements you've created in Adobe Illustrator, Adobe Photoshop, Adobe After Effects, and other compatible applications. By default, Flash displays the menu bar, Timeline, Stage, Tools 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. To return to the default workspace, choose Default from the Workspace 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 that appear 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 web browser 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 file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec2.htm (1 of 5) [13.06.2007 22:07:49]
Getting to Know the Work Area
panel and other tools you'll learn about in the lessons in this book. To see the work area around the Stage, use the Zoom tool ( View > Pasteboard.
) to zoom out, or choose
To scale the Stage so that it fits completely in the application window, choose View > Magnification > Fit in Window. You can also choose view options from the pop-up menu just above the Stage.
Understanding the Timeline Like films, Flash documents measure time in frames. As the movie plays, the playhead advances through the frames in the Timeline. You can change the content on the Stage for different frames. To display a frame's content on the Stage, move the playhead to that frame in the Timeline. At the bottom of the Timeline, 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. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec2.htm (2 of 5) [13.06.2007 22:07:49]
Getting to Know the Work Area
The Timeline also contains layers, which help you organize the artwork in your document. Think of layers as multiple film strips stacked on top of each other. Each layer contains a different image that appears on the Stage, and you can draw and edit objects on one layer without affecting objects on another layer. The layers are stacked in the order that they appear in the Timeline, so that objects on the bottom layer in the Timeline are on the bottom of the stack on the Stage. You can hide, show, lock, or unlock layers. Each layer's frames 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 to indicate its contents so that you can easily find the layer you need later. You'll add a layer to the Timeline to contain the bottle image that you're going to animate. 1.
Select the Mask layer in the Timeline.
2.
Choose Insert > Timeline > 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec2.htm (3 of 5) [13.06.2007 22:07:49]
Getting to Know the Work Area
4.
Click the lock icon above the layers to lock all layers. Locking a layer prevents you from accidentally making changes to it. [View full size image]
5.
Click the lock icon next to the Pour layer to unlock it. [View full size image]
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 first appear.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec2.htm (4 of 5) [13.06.2007 22:07:49]
Getting to Know the Work Area
1.
Select frame 18 on the Pour layer. As you select a frame, Flash displays the frame number beneath the Timeline. [View full size image]
2.
Choose Insert > Timeline > Keyframe. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec2.htm (5 of 5) [13.06.2007 22:07:49]
Working with the Library Panel
Working with the Library Panel The Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmaps, graphics, sound files, and video clips. The 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 The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type. When you import items into Flash, you can import them onto the Stage or into the library. However, any item you import onto the Stage is also added to the library, as are any symbols you create. That way, you can easily access the items to add them to the Stage again, edit them, or see their properties. To display the Library panel, choose Window > Library, or press Ctrl+L (Windows) or Command+L (Mac OS).
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec3.htm (1 of 4) [13.06.2007 22:07:50]
Working with the Library Panel
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 is animated, click the Play button in the preview window to play it. Adding an Item from the Library Panel To add a library item to a Flash document, simply drag it from the Library panel onto the Stage. You've already created a keyframe for the 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec3.htm (2 of 4) [13.06.2007 22:07:50]
Working with the Library Panel
2.
Select the keyframe you created at frame 18 of the Pour layer. [View full size image]
3.
Select the pour_bottle symbol in the Library panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec3.htm (3 of 4) [13.06.2007 22:07:50]
Working with 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. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec3.htm (4 of 4) [13.06.2007 22:07:50]
ProQuest Information and Learning - 9780321499820 - Adobe® Flash® CS3 Professional Classroom in a Book®
Using the Property Inspector The Property inspector gives you quick access to the attributes you're most likely to need. What appears in the Property inspector depends on what you've selected. For example, if a frame is selected, the Property inspector includes a Tween option; if an object on the Stage is selected, the Property inspector shows its x and y coordinates. You'll use the Property inspector to move the bottle to its initial and final positions on the Stage, and then to add a motion tween that animates the bottle. Frame properties [View full size image]
Object properties [View full size image]
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 Transform panel to rotate the bottle. 1.
Select the bottle that you dragged onto the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec4.htm (1 of 6) [13.06.2007 22:07:51]
ProQuest Information and Learning - 9780321499820 - Adobe® Flash® CS3 Professional Classroom in a Book®
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. The bottle 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 (Mac OS). [View full size image]
3.
Choose Window > Transform to open the Transform panel.
4.
In the Transform panel, select Rotate, and type 35 in the Rotate box. Press Enter or Return to apply the value.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec4.htm (2 of 6) [13.06.2007 22:07:51]
ProQuest Information and Learning - 9780321499820 - Adobe® Flash® CS3 Professional Classroom in a Book®
Using Motion Tweens to Animate an Object The bottle should tip over, so that it appears to be pouring water. To achieve this effect, you could create a keyframe for each frame in the Timeline, and then move the bottle slightly in each keyframe. It's much easier, though, to specify the initial and final positions and then let Flash create the intermediate steps. The 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec4.htm (3 of 6) [13.06.2007 22:07:51]
ProQuest Information and Learning - 9780321499820 - Adobe® Flash® CS3 Professional Classroom in a Book®
4.
In the Transform panel, type -25 in the Rotate box, and press Enter or Return.
5.
In the Timeline, select any frame between frames 18 and 24 in the Pour bottle layer. [View full size image]
6.
In the Property inspector, choose Motion from the Tween menu. Flash adds an arrow to the frames in the Timeline to show that a motion tween has been applied. [View full size image]
7.
In the Timeline, select frame 42 in the Pour layer, and press F6 to insert a keyframe.
8.
Select the bottle on the Stage, and in the Transform panel, type 35 in the Rotate box. Press Enter or Return.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec4.htm (4 of 6) [13.06.2007 22:07:51]
ProQuest Information and Learning - 9780321499820 - Adobe® Flash® CS3 Professional Classroom in a Book®
9.
Select frame 59, and press F6 to insert a keyframe.
10. With frame 59 selected in the Timeline, drag the bottle directly to the right, far off the Stage. Press Shift as you drag to constrain its movement to a horizontal line.
11. Select any frame between frames 42 and 59, and choose Motion from the Tween menu in the Property inspector. The Timeline displays an arrow to show that a motion tween has been applied. If you move the playhead from frame 42 to frame 59, the bottle moves off the Stage. [View full size image]
Working with Panels Just about everything you do in Flash involves a panel. In this lesson, you use the Library panel, Tools panel, Property inspector, Transform panel, History panel, and the Timeline. In later lessons, you'll use the Actions panel, the Color panel, the Align panel, and other panels that let you control various aspects of your project. Because panels are such an integral part of the Flash workspace, it pays to know how to manage them. To open any panel in Flash, choose its name from the Window menu. In a few cases, you may need to choose the panel from a submenu, such as Window > Properties > Properties, or Window > Other Panels > History. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec4.htm (5 of 6) [13.06.2007 22:07:51]
ProQuest Information and Learning - 9780321499820 - Adobe® Flash® CS3 Professional Classroom in a Book®
By default, the Property inspector, Filters panel, and Parameters panel appear together at the bottom of the screen, the Timeline is at the top, and the Tools panel is on the left side. Most other panels are displayed on the right side of the screen. However, you can move a panel to any position that is convenient for you. ●
●
● ●
To undock a panel from the right side of the screen, drag it by its tab to a new location. To 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. To group a panel with another, drag its tab onto the other panel's tab. To move a panel group, drag the group by its title bar.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec4.htm (6 of 6) [13.06.2007 22:07:51]
Using the Tools Panel
Using the Tools Panel The Tools panel—the long, narrow panel on the far left side of the work area—contains selection tools, drawing and type tools, painting and editing tools, navigation tools, and tool options. You'll use the Tools panels frequently to switch from the Selection tool to the Text tool to a drawing tool. When you select a tool, remember to check the options area at the bottom of the panel to ensure that you'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. Then, you'll use the Oval tool to draw an outline around the logo circle. Selecting and Using a Tool When you select a tool, the options available at the bottom of the Tools panel change. For example, when you select a drawing tool, the Object Drawing mode and Snap To 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 Tools panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec5.htm (1 of 7) [13.06.2007 22:07:53]
Using the Tools Panel
2.
Select the Enlarge icon (
3.
Click the aqua circle with the letters in it to enlarge it on the screen.
) in the options area of the Tools panel.
Selecting a Hidden Tool The Tools panel contains too many tools to display all of them at once. Some tools are arranged in groups in the Tools panel; only the tool 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 other tools 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-up menu. 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 Timeline, and then click the Insert Layer icon (
2.
Name the new layer Outline.
3.
Lock the Pour layer so that you don't accidentally move anything on it.
4.
In the Timeline, move the playhead to frame 293, the last frame in the movie, and select frame 293 in the Outline layer. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec5.htm (2 of 7) [13.06.2007 22:07:53]
Using the Tools Panel
5.
Click and hold the Rectangle tool in the Tools panel, and then select the Oval tool from the pop-up menu.
6. Click the Stroke Color icon ( Color Picker opens. 7.
) in the options area of the Tools panel. The Adobe
Select black in the Color Picker.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec5.htm (3 of 7) [13.06.2007 22:07:53]
Using the Tools Panel
8. Click the Fill Color icon ( opens again. 9.
) in the options area of the Tools panel. The Color Picker
Select No Color in the Color Picker.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec5.htm (4 of 7) [13.06.2007 22:07:53]
Using the Tools Panel
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 you use them. For example, press the Alt (Windows) or Option (Mac OS) key as you use the Zoom tool to change it from Enlarge mode to Reduce 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. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec5.htm (5 of 7) [13.06.2007 22:07:53]
Using the Tools Panel
Tools Panel Overview The Tools panel contains selection tools, drawing and painting tools, and navigation tools. The options area in the Tools panel lets you modify the selected tool. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec5.htm (6 of 7) [13.06.2007 22:07:53]
Using the Tools Panel
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec5.htm (7 of 7) [13.06.2007 22:07:53]
Undoing Steps in Flash
Undoing Steps in Flash In a perfect world, everything would go according to plan. But sometimes you need to move back a step or two and start over. You can undo steps in Flash using the Undo command or the History panel. To undo a single step in Flash, choose Edit > Undo, or press Control+Z (Windows) or Command+Z (Mac OS). To redo a step you've undone, choose Edit > Redo. To 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 you opened the current document. Closing a document clears its history. To open the History panel, choose Window > Other Panels > History. The logo looked better before you added the black circle, so you'll remove the circle. First, undo the change in stroke size using the Undo command, 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec6.htm (1 of 2) [13.06.2007 22:07:53]
Undoing Steps in Flash
3.
Drag the History panel slider up to the step just before you created the Outline layer. Steps below that point are dimmed in the History panel, and they are removed from the project. To add a step back, move the slider back down.
Note If you remove steps in the History panel and then perform additional steps, the removed steps will no longer be available.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec6.htm (2 of 2) [13.06.2007 22:07:53]
Previewing Your Movie
Previewing Your Movie As you work on a project, 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, choose Control > Test Movie. You can also press Ctrl+Enter (Windows) or Command+Return (Mac OS) to preview your movie. 1.
Choose Control > Test Movie. Flash opens and plays the movie in a separate window.
2.
Close the preview window.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec7.htm [13.06.2007 22:07:54]
Publishing Your Movie
Publishing Your Movie When you're ready to share your movie with others, publish it from Flash. For most projects, Flash will create an HTML file, a SWF file, and a JavaScript (.js) file. The SWF file is your final Flash movie, the HTML file contains the SWF file, and the JavaScript file ensures that browsers work well with your movie. You'll need to upload all three files to the same folder on your web server. Always test your 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 HTML (.html).
4.
Click Publish.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec8.htm (1 of 3) [13.06.2007 22:07:54]
Publishing Your Movie
5.
Click OK to close the dialog box.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec8.htm (2 of 3) [13.06.2007 22:07:54]
Publishing Your Movie
6.
Navigate to the Lesson01/01Start folder to see the files Flash created. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec8.htm (3 of 3) [13.06.2007 22:07:54]
Using Flash Help
Using Flash Help For complete information about using panels, tools, and other application features, refer to Flash Help. To open Flash Help, choose Help > Flash Help.
Flash Help is divided into several books. The Using Flash book includes how-to tips, tutorials, and explanations of Flash concepts and feature descriptions. Programming ActionScript 3.0, ActionScript 3.0 Language and Components Reference, and Using ActionScript 3.0 Components 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 create animations 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 contents to see more information about what's new in Flash CS3.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec9.htm (1 of 5) [13.06.2007 22:07:55]
Using Flash Help
1.
Choose Help > Flash Help.
2.
Expand the Using Flash book to view the table of contents. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec9.htm (2 of 5) [13.06.2007 22:07:55]
Using Flash Help
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 or term, search for the appropriate keyword. You'll use the search function to learn more about the History panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec9.htm (3 of 5) [13.06.2007 22:07:55]
Using Flash Help
1.
Choose Help > Flash Help.
2.
In the Search field, type history. [View full size image]
3.
Click Search.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec9.htm (4 of 5) [13.06.2007 22:07:55]
Using Flash Help
4.
Select "Using the History Panel" to read about the History panel. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec9.htm (5 of 5) [13.06.2007 22:07:55]
Using Adobe Online Services
Using Adobe Online Services Another way to get information about Flash and to stay abreast of updates is to use Adobe online services. With an active Internet connection, 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 artists around the world, the latest product information, and troubleshooting and technical information. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec10.htm (1 of 2) [13.06.2007 22:07:56]
Using Adobe Online Services
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 learn how 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 work through the lessons in order, as each lesson builds on concepts and skills you've learned in previous lessons.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec10.htm (2 of 2) [13.06.2007 22:07:56]
Review
Review
Review 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 Answers
1
The 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 the movie.
2
To open a panel in Flash, choose Windows > [panel name]. Some panels, such as the History panel, are in the Other Panels submenu.
3
Because there are too many tools to display at once in the Tools panel, some tools are grouped, and only one tool in the group is displayed. (The tool you most recently used is the one shown.) Small triangles appear on tool icons to indicate that hidden tools are available. To select a hidden tool, click and hold the tool icon for the tool that is shown, and then select the hidden tool from the menu.
4
You can undo steps in Flash using the Undo command or the History panel. To undo a single step at a time, choose Edit > Undo. To 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 ActionScript 3.0. Choose Help > Help Resources Online or visit www.adobe.com to see tutorials, tips, and other resources for Flash users.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch01lev1sec11.htm [13.06.2007 22:07:56]
2. Working with Graphics
2. Working with Graphics
You can use rectangles, ovals, and lines to create interesting, complex animations in Flash. Combine them with imported graphics for even greater possibilities. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ● ● ● ● ● ●
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
This lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson02 folder onto it. file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02.htm (1 of 2) [13.06.2007 22:07:57]
2. Working with Graphics
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02.htm (2 of 2) [13.06.2007 22:07:57]
Getting Started
Getting Started First, 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.
The 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's attention while a web page loads. This animation is for Fizzy Drink, a fictional company. In this lesson, you'll draw the shapes, modify them, and animate them. 2.
Double-click the 02Start.fla file in the Lesson02/02Start folder to open the initial project file in Flash.
3.
Choose File > Save As. Name the file 02_workingcopy.fla, and save it in the 02Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec1.htm [13.06.2007 22:07:58]
Creating Rectangles
Creating Rectangles Flash includes several drawing tools, which work in different drawing modes. Many of your creations will begin with simple rectangles, so it'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.
). Make sure the Object Drawing mode icon ( ) is Select the Rectangle tool ( not selected. The stroke and fill can be any 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 rectangle in step 5.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (1 of 8) [13.06.2007 22:07:59]
Creating Rectangles
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 a different 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 it with white dots.
5.
In the Property inspector, type 95 for the width, and 135 for the height. Press Enter or Return to apply the values. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (2 of 8) [13.06.2007 22:07:59]
Creating Rectangles
Adding a Bitmap Fill The fill is the interior of the drawn object. You can apply a solid color, a gradient, or a bitmap image (such as a TIFF, 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'll import an image of water to use as the fill. You can import a bitmap file in the Color panel. 1.
2.
Make sure the entire rectangle is still selected. If necessary, drag the Selection tool around it again. 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 you don't need when you're importing a bitmap. 3.
Select Bitmap from the Type menu.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (3 of 8) [13.06.2007 22:07:59]
Creating Rectangles
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. The rectangle fills with the water image.
Specifying Stroke Properties The stroke is the outline of the object, in this case a rectangle. You can apply attributes to the stroke that are different from those of the fill; you can also specify that the object has no stroke. You'll give the rectangle a solid gray outline. 1. 2. 3.
Select the rectangle on the Stage, if it isn't already selected. In the Property inspector, click the Stroke Color box (
).
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, HTML, 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 the colors you use most often.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (4 of 8) [13.06.2007 22:07:59]
Creating Rectangles
4.
Type 4 in the Stroke Height box, and press Enter or Return to apply the value. [View full size image]
The rectangle should now have the water bitmap fill and a thick gray stroke.
Modifying Objects It's time to make this rectangle look more like a drinking glass. You'll use the Free Transform tool to nudge the bottom corners inward. With the Free Transform tool, you can adjust points on lines and shape outlines. 1.
Select the Free Transform tool (
).
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (5 of 8) [13.06.2007 22:07:59]
Creating Rectangles
2.
Drag the Free Transform tool around the rectangle on the Stage to select it. Transformation 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 you move both corners the same distance simultaneously.
4.
Click outside the shape to deselect it. The bottom of the rectangle is narrow, and the top is wide. It looks much more like a drinking glass.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (6 of 8) [13.06.2007 22:07:59]
Creating Rectangles
Flash Drawing Modes Flash provides three drawing modes, which determine how objects interact with each other on the Stage, and how you can edit them. By default, Flash uses merge drawing mode, but you can enable object drawing mode, or use the Rectangle Primitive or Oval Primitive tool to use the primitive drawing mode.
Merge Drawing Mode In this mode, Flash merges drawn shapes, such as rectangles and ovals, where they overlap, so that multiple shapes appear to be a single shape. If you move or delete a shape that has been merged with another, the portion that was overlapping is permanently removed.
Object Drawing Mode In this mode, Flash does not merge drawn objects; they remain distinct and separate, even when they overlap. To enable object drawing mode, select the tool you want to use, and then click the Object Drawing icon in the options area of the Tools panel. To convert an object to shapes (merge drawing mode), select it and press Ctrl +B (Windows) or Command+B (Mac OS). To convert a shape to an object (object drawing mode), select it and choose Modify > Combine Object > Union.
Primitive Drawing Mode New to Flash CS3 is the primitive drawing mode. When you use the Rectangle Primitive tool or the Oval Primitive tool, Flash draws the shapes as separate objects. Unlike regular objects, however, you can modify the corner radius of rectangle primitives, and the start and end angle and the inner radius of oval file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (7 of 8) [13.06.2007 22:07:59]
Creating Rectangles
primitives using the Property inspector.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec2.htm (8 of 8) [13.06.2007 22:07:59]
Using a Gradient Fill
Using a Gradient Fill In a gradient, one color gradually changes into another. Flash can create linear gradients, which change color horizontally, vertically, or diagonally; or radial gradients, which change color moving outward from a central focal point. You'll use a linear gradient fill to add weight and depth to the base of the drinking glass. 1.
Select the Selection tool.
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 Type 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec3.htm (1 of 6) [13.06.2007 22:08:01]
Using a Gradient Fill
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. A color pointer determines where the gradient changes from one color to the next. Add color pointers beneath the gradient definition bar to 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 the glass. 1.
Click beneath the gradient definition bar to create a new color pointer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec3.htm (2 of 6) [13.06.2007 22:08:01]
Using a Gradient Fill
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 the pointer. Press Enter or Return to apply the color.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec3.htm (3 of 6) [13.06.2007 22:08:01]
Using a Gradient Fill
4.
Select the far-right color pointer, and then click the black area in the grayscale range above it, or type #000000. The 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. To stretch the gradient in the glass, you'll use the Gradient Transform tool. 1.
Select the Gradient Transform tool ( with the Free Transform tool ( ).
). (The Gradient Transform tool is grouped
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec3.htm (4 of 6) [13.06.2007 22:08:01]
Using a Gradient Fill
2.
Click in the glass base. Transformation 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 to stretch the gradient.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec3.htm (5 of 6) [13.06.2007 22:08:01]
Using a Gradient Fill
3.
Drag the square handle on the side of the bounding box to stretch the gradient until the gradient color matches the stroke color of the glass. The gradient should blend into the edge of the glass.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec3.htm (6 of 6) [13.06.2007 22:08:01]
Making Selections
Making Selections To modify an object, you must first select it. In Flash, you can make selections using the Selection, Subselection, or Lasso tool. Typically, you use the Selection tool to select an entire object or a section of an object. The Subselection tool lets you select a specific point or line in an object. With the Lasso tool, you can draw a freeform selection. Selecting Sections of a Fill To 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 accidentally selecting or modifying any part of the water fill, you'll group the glass base section. 1.
Select the Selection tool.
2.
Drag a selection around the base of the glass.
3.
Choose Modify > Group.
4.
Double-click the newly created group to edit it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec4.htm (1 of 5) [13.06.2007 22:08:02]
Making Selections
5.
With the Selection tool, select the center area of the base shape. Start drawing the selection area from outside the group—either above or below it—to prevent moving the entire base.
6.
Click the Fill Color icon in the Tools panel, and select white or type #FFFFFF in the Color Picker.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec4.htm (2 of 5) [13.06.2007 22:08:02]
Making Selections
7.
Click the Scene 1 icon to return to the main scene.
Using the Lasso Tool To make the drink more believable, you'll curve or slope the top of the liquid in the glass. The Lasso tool is an ideal tool for this job because 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec4.htm (3 of 5) [13.06.2007 22:08:02]
Making Selections
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 Tools panel, and select white in the Color Picker. The water bitmap is replaced with a solid white fill in the selected area.
4.
To ensure the glass is displayed during the entire animation, select frame 35 in the Glass layer in the Timeline, and choose Insert > Timeline > Frame. Flash extends frame 1 to frames 2 through 35.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec4.htm (4 of 5) [13.06.2007 22:08:02]
Making Selections
The drink itself is complete! All that's left to do is to add bubbles and fizz.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec4.htm (5 of 5) [13.06.2007 22:08:02]
Drawing Ovals
Drawing Ovals The 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 drinking glass. 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 > Timeline > Layer to add a layer for the bubble.
3.
Name the layer Bubble. [View full size image]
4.
Select the Oval tool (
), which is grouped with the Rectangle tool.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec5.htm (1 of 4) [13.06.2007 22:08:02]
Drawing Ovals
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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec5.htm (2 of 4) [13.06.2007 22:08:02]
Drawing Ovals
7.
In the Property inspector, set the Stroke color to No Color ( white (#FFFFFF).
) and the Fill color to
[View full size image]
8.
Select the Free Transform tool (
) to resize the bubble.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec5.htm (3 of 4) [13.06.2007 22:08:02]
Drawing Ovals
9.
Hold down the Shift key to retain the bubble's proportions, and drag a corner handle inward to make the bubble smaller. The resized 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. (The Property 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), the object is scaled relative to its transformation point, represented by the circle icon. You can drag the transformation point anywhere in the object, or even outside of the object.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec5.htm (4 of 4) [13.06.2007 22:08:02]
Creating a Simple Animation
Creating a Simple Animation Later lessons cover animation in greater detail, but for this project, you'll use a motion tween to create a simple frame-by-frame animation. You'll convert the bubble to a symbol, apply the motion tween, and then copy the layer to create additional animated bubbles. 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 of your 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. [View full size image]
Animating an Object The 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 then apply 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec6.htm (1 of 5) [13.06.2007 22:08:04]
Creating a Simple Animation
3.
Select the bubble on the Stage.
4.
In the Property inspector, enter the following values: ● ●
5.
Height: 12 pixels Width: 12 pixels
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. Press Enter or Return to apply the value. The larger bubble moves up to the top of the glass. [View full size image]
6.
Select any frame between 1 and 20 on the Bubble layer.
7.
In the Property inspector, select Motion from the Tween menu. [View full size image]
8.
To see the bubble animation, choose Control > Test Movie. The bubble floats to the top of the glass and out of it, and then the animation repeats.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec6.htm (2 of 5) [13.06.2007 22:08:04]
Creating a Simple Animation
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 Bubble layer to create additional layers. Then, 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 Timeline, click frame 1 in the Bubble layer, and then press the Shift key and click frame 20 to select frames 1-20. [View full size image]
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 the first frame is a few frames further down the Timeline. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec6.htm (3 of 5) [13.06.2007 22:08:04]
Creating a Simple Animation
5.
Copy the same frames to each layer, so that the starting keyframe for each layer is at a different position, from frame 1 to frame 15. [View full size image]
6.
Select the first keyframe in the Bubble2 layer, press Ctrl+A (Windows) or Command +A (Mac OS) to select the bubble on that 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 a position 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 a position directly above its starting position. To see each bubble's path more clearly, hide all the bubble layers except the one you're working with. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec6.htm (4 of 5) [13.06.2007 22:08:04]
Creating a Simple Animation
9.
To preview the animation, choose Control > Test Movie.
The fizzy drink is now bubbly!
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec6.htm (5 of 5) [13.06.2007 22:08:04]
Working with Lines
Working with Lines The Line tool draws straight lines, which you can combine to create new objects. To add some sparkle to the drink, you'll create popping fizz shapes above the glass. Matching the Color of an Existing Object The 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 Timeline.
2.
Choose Insert > Timeline > 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 the drink.
6. 7.
Set the Stroke Height to 3 and the Fill Color to none (
).
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 (
).
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec7.htm (1 of 3) [13.06.2007 22:08:05]
Working with Lines
2.
Hold down the Shift key while you draw a line across the center of the oval. The line should be about three times as long as the 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 > Transform > Rotate 90° CCW to rotate the second line so that it is perpendicular to the first one.
6.
Select the Selection tool.
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 > Transform > Scale And Rotate. 11. Type 45 in the Rotate box, and click OK.
The second set of lines are perpendicular to the first set, creating a star. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec7.htm (2 of 3) [13.06.2007 22:08:05]
Working with Lines
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 convert the 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec7.htm (3 of 3) [13.06.2007 22:08:05]
Manipulating Objects
Manipulating Objects You can combine multiple objects—whether they were drawn using object drawing mode or not—to copy, paste, reposition, and otherwise work with them more efficiently. To 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. These guides can help you align objects quickly, and you can snap the object you're moving to a guide or to another object. For this project, however, you want to place the fizz elements randomly, so you'll deselect Snap To Guides and Snap To Objects.
1.
Choose View > Snapping > Snap To Guides.
2.
Choose View > Snapping > Snap To Objects.
Grouping Objects To 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec8.htm (1 of 3) [13.06.2007 22:08:06]
Manipulating Objects
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.
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. The objects will move on the screen every five frames. You must create a keyframe at each frame where the objects move. 1.
In the Timeline, select frame 5 in the Fizz layer, which contains the fizz objects.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec8.htm (2 of 3) [13.06.2007 22:08:06]
Manipulating Objects
2.
Choose Insert > Timeline > Keyframe. [View full size image]
3.
Add a keyframe for every fifth frame through frame 30. (That is, create keyframes at frames 10, 15, 20, 25, and 30.) [View full size image]
4.
In the Timeline, 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 each keyframe.
7.
Choose Control > Test Movie to preview the popping fizz you've created, and then close the preview window.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec8.htm (3 of 3) [13.06.2007 22:08:06]
Masking Objects
Masking Objects A 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 a mask 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 Timeline, select the Bubble10 layer, beneath the Fizz layer.
7.
Choose Insert > Timeline > Layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec9.htm (1 of 3) [13.06.2007 22:08:07]
Masking Objects
8.
Choose Edit > Paste In Place. The drink fill shape is pasted into the new layer. [View full size image]
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. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec9.htm (2 of 3) [13.06.2007 22:08:07]
Masking Objects
11. In the Timeline, select all the layers from Bubble to Bubble9. To select multiple contiguous layers, click the first layer, press the Shift key, and click the last layer. 12. In the Timeline, 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec9.htm (3 of 3) [13.06.2007 22:08:07]
Testing a Movie
Testing a Movie Preview your animation to make sure it's behaving as you expect. In fact, you should preview the movie frequently so that you can troubleshoot or simply tweak your animation. To preview the movie, choose Control > Test Movie. You see the full effects of the drink, the bubbles, and the fizz—all created with rectangles, ovals, and lines. You've created an animated fizzy drink! To use this animation in other projects, you can copy all keyframes from the main Timeline and paste them into a new movie clip symbol, which you can then place wherever you want to use it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec10.htm [13.06.2007 22:08:07]
Review
Review
Review 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 Answers
1
The 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
To 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. ● ●
●
4
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.
A mask restricts the visible area of the layers beneath it. Only the area that is covered by the mask shows through.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec11.htm (1 of 2) [13.06.2007 22:08:08]
Review
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch02lev1sec11.htm (2 of 2) [13.06.2007 22:08:08]
3. Creating and Editing Symbols
3. Creating and Editing Symbols
Movie clip, graphic, and button symbols keep your file size small while increasing your flexibility. A single symbol can be used countless times in a project, but the file's data only has to be included once. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ● ● ● ● ● ●
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
This lesson will take about an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson03 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03.htm (1 of 2) [13.06.2007 22:08:08]
3. Creating and Editing Symbols
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03.htm (2 of 2) [13.06.2007 22:08:08]
Getting Started
Getting Started First, 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 the buttons to see their rollover states. The project is a DVD interface, designed to help a viewer navigate among the options on a DVD. In this lesson, you'll use Illustrator graphic files, imported JPEG files, and symbols to create an attractive, useful interface. You'll create buttons and position them in the interface, 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.
4.
Choose File > Save As. Name the file 03_workingcopy.fla, and save it in the 03Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec1.htm [13.06.2007 22:08:09]
Importing Illustrator Files
Importing Illustrator Files As you learned in Lesson 2, you can draw objects in Flash using the Rectangle, Oval, and Line tools. However, for complex drawings, you may prefer to create the artwork in another application. Adobe Flash CS3 supports native Adobe Illustrator files, so you can create original 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'll import an Illustrator file to serve as the main component of a DVD interface. 1.
Choose File > Import > Import To 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 To Stage dialog box, make sure all layers are selected. A check mark should appear in the check box next to each layer.
5.
Choose Flash Layers from the Convert Layers To menu, and select Place Objects At Original Position. Then, click OK. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec2.htm (1 of 6) [13.06.2007 22:08:10]
Importing Illustrator Files
Flash imports the DVD interface image, and three layers appear in the Timeline: Menu, Preview Boxes, and Menu Background. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec2.htm (2 of 6) [13.06.2007 22:08:10]
Importing Illustrator Files
Using Adobe Illustrator with Flash Flash CS3 can import native Illustrator files, automatically recognizing layers, frames, and symbols. If you're more familiar with Illustrator, 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 To Stage or File > Import To Library to import the artwork into Flash. Alternatively, you can even copy artwork from Illustrator and paste it into a Flash document.
Importing Layers When an imported Illustrator file contains layers, you can import them in any of the following ways: ● ● ● ●
Convert Convert Convert Convert
Illustrator layers to Flash layers Illustrator layers to Flash frames each Illustrator layer to a Flash graphic symbol all Illustrator layers to a single Flash layer
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec2.htm (3 of 6) [13.06.2007 22:08:10]
Importing Illustrator Files
[View full size image]
Importing Symbols Working with symbols in Illustrator is similar to working with them in Flash. In fact, you can use many of the same symbol keyboard shortcuts in both Illustrator and Flash; press F8 in either application to create a symbol. When you create a symbol in Illustrator, the Symbol 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec2.htm (4 of 6) [13.06.2007 22:08:10]
Importing Illustrator Files
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 panel—and all instances of the symbol—are updated accordingly. Use the Symbols panel or the Control panel in Illustrator to assign names to symbol instances, break links between symbols and instances, 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 Artwork When you copy and paste (or drag and drop) artwork between Illustrator and Flash, the Paste dialog box appears. The Paste dialog box provides import settings for the Illustrator file you're copying. You can paste the file as a single bitmap object, or you can paste it using the current preferences for AI files. (To 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 layers to Flash layers.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec2.htm (5 of 6) [13.06.2007 22:08:10]
Importing Illustrator Files
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec2.htm (6 of 6) [13.06.2007 22:08:10]
About Symbols
About Symbols A symbol is a graphic, button, or movie clip that you create once in Flash and can then reuse throughout your document or in other documents. 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 the original in the library. An instance is a copy of a symbol located on the Stage or nested inside another symbol There are three kinds of symbols in Flash, and each has advantages and limitations. You can tell whether a symbol is a graphic ( ), button ( looking at the icon next to it in the Library panel.
), or movie clip (
) by
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 apply filters, color settings, and blending modes to a movie clip symbol. You can name each instance of a movie clip symbol, and control it with ActionScript. Movie clip Timelines are also the most flexible. They can contain sounds, interactive controls, and even other movie clip instances. Though they do not include the default frames for rollover states that are in a button symbol's Timeline, you can create a button using a movie 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 Timelines, button symbol Timelines 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, and color settings. ● ● ● ●
The Up state is the default state. The Over state determines the button's appearance when the mouse rolls over it. The Down state determines the button's appearance when it is clicked. The Hit state defines the button's active area, which is the area that responds to the mouse click.
Graphic Symbols
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec3.htm (1 of 2) [13.06.2007 22:08:11]
About Symbols
Use graphic symbols for static images—that is, images you don't plan to animate—that are tied to the main Timeline. Graphic symbols are the least flexible symbols. They 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec3.htm (2 of 2) [13.06.2007 22:08:11]
Converting Objects to Symbols
Converting Objects to Symbols The interface layout you imported from Illustrator includes three green boxes, which will hold thumbnails for video clips. Before positioning 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 Timeline, select frame 1 of the Preview Boxes layer to select the green boxes, which are the only objects on that layer. [View full size image]
2.
Choose Modify > Convert to Symbol.
3.
Name the symbol preview_boxes.
4.
Select Movie Clip for the Type.
5.
Click OK. The preview_boxes symbol appears in the library.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec4.htm [13.06.2007 22:08:12]
Importing Bitmap Images
Importing Bitmap Images You'll import JPEG images to position over the green boxes. Earlier, you imported the DVD layout directly to the Stage. This 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 all the 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 subtle variations, such as those that occur in photographs. Use GIF files for images with large solid blocks of color. Use PNG files (a native format 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 their transparency.
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 To 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 To Library (Mac OS).
Flash adds the three JPEG files you imported to the library, without placing them on the
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec5.htm (1 of 5) [13.06.2007 22:08:13]
Importing Bitmap Images
Stage.
Importing Images to the Stage The background image for the DVD interface is an image of people on a beach with large umbrellas. This image will appear behind the existing 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 > Timeline > Layer.
2.
Name the layer Beach Background.
3.
In the Timeline, drag the Beach Background layer below the Menu Background layer. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec5.htm (2 of 5) [13.06.2007 22:08:13]
Importing Bitmap Images
4.
Choose File > Import > Import to Stage.
5.
Select Beach_umbrellas.jpg in the Lesson03/03Start folder.
6.
Click Open (Windows) or Import (Mac OS).
The Beach_umbrellas jpg image appears beneath the other layers on the Stage.
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 in manipulating the graphic. The Trace Bitmap command converts a bitmap into a vector graphic with editable, discrete areas of color. To reduce 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 this project, 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec5.htm (3 of 5) [13.06.2007 22:08:13]
Importing Bitmap Images
1.
With the Beach_umbrellas.jpg image still selected on the Stage, choose Modify > Bitmap > Trace Bitmap.
2.
Enter the following settings: ● ● ● ●
3.
Color Threshold: 100 Minimum Area: 8 Curve Fit: Normal Corner Threshold: Normal
Click OK.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec5.htm (4 of 5) [13.06.2007 22:08:13]
Importing Bitmap Images
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec5.htm (5 of 5) [13.06.2007 22:08:13]
Adding Bitmaps to a Movie Clip Symbol
Adding Bitmaps to a Movie Clip Symbol Each symbol has its own Timeline. You can add layers to a symbol's Timeline just as you can to the main Timeline. As you add assets to a symbol's Timeline, they are nested within the symbol. You'll add a layer to the preview_boxes Timeline, and then add bitmap images to the preview_boxes movie clip symbol. 1.
Select the Selection tool.
2.
Double-click one of the green boxes on the Stage to edit the preview_boxes movie clip symbol. Flash opens the preview_boxes symbol Timeline 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. To see only the symbol as you edit it, double-click the symbol in the Library panel.
3.
Select Layer 1 and rename it Boxes. This layer contains the green preview boxes.
4.
4 Choose Insert > Timeline > Layer.
5.
Name the layer Thumbnails. 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.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec6.htm (1 of 3) [13.06.2007 22:08:14]
Adding Bitmaps to a Movie Clip Symbol
7.
Deselect the image. Then, press Alt (Windows) or Option (Mac OS), and drag the image from the first box to the second box. The 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. The Vacation_2. jpg file replaces the image in the second box.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec6.htm (2 of 3) [13.06.2007 22:08:14]
Adding Bitmaps to a Movie Clip Symbol
10. Drag the Vacation_movie.jpg image from the Library panel onto the third box on the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec6.htm (3 of 3) [13.06.2007 22:08:14]
Working with Buttons
Working with Buttons Use button symbols to create interactive buttons that include rollover states, which cause the buttons to change appearance when you click them, roll the mouse over them, or perform other actions. In Lesson 9, you'll use ActionScript to assign actions to buttons, but in this 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 Type, and click OK.
Flash adds the menu_button symbol to the library and opens the menu_button Timeline.
[View full size image]
Importing a File with Button States The Up, Down, and Over button states can include any change in graphics, color, shape, or size. If you want to create a complex set of button states, you may want to create the artwork in Adobe Illustrator. For this lesson, you'll import an Illustrator file that already file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (1 of 10) [13.06.2007 22:08:16]
Working with Buttons
contains the artwork for three button states. Because the menu_button symbol Timeline is open, the imported Illustrator layers will fill the appropriate states. 1.
Choose File > Import > Import To Stage.
2.
Select the DVD_interface_button_states.ai file in the Lesson03/03Start folder.
3.
Click Open (Windows) or Import (Mac OS).
4.
Select all the layers in the file. The Illustrator file contains three button states.
5.
Select Keyframes from the Convert Layers To menu. Selecting Keyframes imports the layers into the proper frames in a single layer. If you selected Flash Layers, as you did when importing the DVD interface, the states would import as separate layers, and the button wouldn't work properly. [View full size image]
6.
Click OK.
Flash imports the button state images as states for the menu_button symbol, and the file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (2 of 10) [13.06.2007 22:08:16]
Working with Buttons
symbol appears on the Stage for editing. [View full size image]
Adding a Button Symbol to the Stage The menu_button symbol is in the library. You'll add an instance of the button to the Stage above each of the menu options in the main Timeline. 1.
Choose Edit > Edit Document to return to the main Timeline.
2.
Select the Menu layer.
3.
Choose Insert > Timeline > Layer.
4.
Name the layer Buttons, and select the first frame in the Buttons layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (3 of 10) [13.06.2007 22:08:16]
Working with Buttons
5.
Drag the menu_button symbol from the Library panel onto the Stage, and position it over the words Play Movie. Flash adds an instance of the symbol to the Stage.
6.
Drag instances of the menu_button symbol over Scene Selection, Special Features, and Setup.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (4 of 10) [13.06.2007 22:08:16]
Working with Buttons
Adding a Hit State to a Button You imported three button states for the menu buttons. However, those states won't have any effect if the Hit state doesn't exist. The Hit state defines the button's active area, the area that responds to the mouse click. You'll draw a rectangle to represent the button area for the Hit state, but the area will be invisible in the final movie. Creating a Hit state for the symbol automatically applies it to each instance of the symbol. You don't have to draw a rectangle or any other shape to define the Hit state. If you want the button's active area to match the graphic in the Up, Down, or Over state exactly, press Alt (Windows) or Option (Mac OS) and drag the dot from one of the other states in the Timeline to the Hit state.
1.
Using the Selection tool, double-click the first menu_button instance to edit the symbol in place. Flash opens the menu_button Timeline and dims everything but the button on the Stage.
2.
In the menu_button Timeline, select the Hit frame.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (5 of 10) [13.06.2007 22:08:16]
Working with Buttons
3.
Choose Insert > Timeline > Blank Keyframe. [View full size image]
4.
Select the Rectangle tool.
5.
Draw a rectangle that covers the text and the button above it. Select a fill color. Any color is fine, but a fill color must be selected for the area to be included in the Hit state. Because you're editing the symbol, the Hit state is added to all the instances on the Stage.
6.
Click Scene 1 to return to the main Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (6 of 10) [13.06.2007 22:08:16]
Working with Buttons
7.
Choose Control > Enable Simple Buttons. This command lets you preview button behaviors on the Stage.
8.
Hover the mouse over the buttons and click them to see the appearance for each state.
Note The appearance changes for each button state because you've added a state to each frame in the menu_button Timeline. However, the buttons are not scripted, so no action results from clicking them.
Creating an Invisible Button In Flash, buttons don't have to look like buttons. In fact, anything can behave like a button if you place an invisible button over it. When you roll over or click an invisible button, the appearance on screen changes or some action occurs, but the screen isn't cluttered with buttons when they're not in use. When and how you use invisible buttons is a design decision. In this project, you'll add invisible buttons to the thumbnails for the video clips, so that later you could script the thumbnails to play the videos when they are clicked.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (7 of 10) [13.06.2007 22:08:16]
Working with Buttons
1.
Choose Insert > New Symbol.
2.
Name the symbol invisible_button.
3.
Select Button for the Type, and click OK.
4.
In the invisible_button Timeline, select the Hit frame.
5.
Choose Insert > Timeline > Blank Keyframe. [View full size image]
6.
Use the Rectangle tool to draw a rectangle of any size.
7.
In the Property inspector, set the width and height to 85 and the X and Y values to 0. [View full size image]
8.
Press Enter or Return to apply the values.
9.
Click Scene 1 to return to the main Timeline.
10. Choose Insert > Timeline > Layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (8 of 10) [13.06.2007 22:08:16]
Working with Buttons
11. Name the layer Invisible Buttons. [View full size image]
12. Drag an instance of the invisible_button symbol to the Stage, and center it over the first thumbnail. 13. Choose Control > Enable Simple Buttons to deselect the command, so that buttons aren't active on the Stage. You can see invisible buttons on the Stage, though they won't be visible in the final SWF file. 14. Select the Selection tool, and deselect the instance. 15. Press Alt (Windows) or Option (Mac OS) and drag the instance of the invisible_button symbol over the second box. 16. Deselect the instance, and then repeat step 15 to duplicate the instance for the third green box.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (9 of 10) [13.06.2007 22:08:16]
Working with Buttons
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec7.htm (10 of 10) [13.06.2007 22:08:16]
Adding Transparency
Adding Transparency In Flash, transparency is determined by the alpha value for a symbol or color. Decreasing the alpha value decreases the opacity and increases the amount of transparency. You can change the alpha value for a symbol, or for an individual instance of a symbol. Changing the Alpha Value for an Instance To reduce the opacity for the menu background, you must first convert it to a symbol. 1.
In the main Timeline, select frame 1 of the Menu Background layer.
2.
Choose Modify > Convert To Symbol.
3.
Name the symbol menu_background.
4.
Select Graphic for the Type, and click OK.
5.
In the Property inspector, select Alpha from the Color menu.
6.
Enter 85 for the percentage. [View full size image]
Changing the Alpha Value for a Color You'll alter the alpha value for the green color of the preview boxes, making them slightly
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec8.htm (1 of 5) [13.06.2007 22:08:17]
Adding Transparency
transparent. First, though, you'll need to separate the green boxes. 1.
With the Selection tool, double-click the instance of the preview_boxes symbol to edit it in place.
2.
In the preview_boxes Timeline, select frame 1 of the Boxes layer.
3.
Choose Modify > Break Apart. Note You can use either the Ungroup command or the Break Apart command to separate the boxes. In general, the Break Apart command is more powerful because it can break apart a bitmap or instance into editable parts, as well as ungrouping grouped objects.
4.
Click on any part of the selected green shapes.
5.
In the Property inspector, click the Fill Color box.
6.
Enter 85 in the Alpha box.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec8.htm (2 of 5) [13.06.2007 22:08:17]
Adding Transparency
7.
Click Scene 1 to return to the main Timeline. The orange foreground and green boxes are less opaque, so you can see the beach image behind them.
Using Web-Safe Colors When you view files in a web browser using a 256-color display, many colors appear dithered. The web-safe palette in Flash includes 216 colors that are most likely to appear as you expect, without dithering, on different computers using different operating systems and web browsers. The web-safe palette is the default color palette in Flash. Appendix A shows the colors in the web-safe palette and their corresponding hexadecimal values. Most current computers display thousands or millions of colors, making web-safe colors less important than they once were. However, handheld devices and cell phone displays have more limited colors, so if you're creating SWF files to be viewed on those devices, it's best to use web-safe colors. To ensure you're using the web-safe palette when you add color to objects in Flash, choose Web 216 from the Swatches panel menu. When you import artwork, it may contain additional colors. You'll change the orange rectangle in the menu background to a web-safe color.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec8.htm (3 of 5) [13.06.2007 22:08:17]
Adding Transparency
1.
With the Selection tool, double-click the instance of the menu_background symbol to edit it in place. The menu_background Timeline opens. Press Alt (Windows) or Option (Mac OS) and click the lock icon for the Menu Background layer in the Timeline to leave that layer unlocked but lock all the other layers, so that you don't accidentally select objects on those layers.
2.
Double-click the large orange rectangle to edit its group.
3.
Select the rectangle.
4.
In the Property inspector, click the Fill Color box.
5.
Type #FF6600 in the color value field to apply a web-safe orange color.
6.
Press Enter or Return to apply the color.
7.
Click Scene 1 to return to the main Timeline.
The DVD interface has its background, its buttons, and its video clip thumbnails. It's ready to go. To make it interactive, all you need is ActionScript, which you'll learn about in Lessons 7, 8, 9, and 10.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec8.htm (4 of 5) [13.06.2007 22:08:17]
Adding Transparency
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec8.htm (5 of 5) [13.06.2007 22:08:17]
Review
Review
Review Questions
1
What is a symbol, and how does it differ from an instance?
2
Name two ways that you can import an asset into Flash.
3
When you import an Illustrator file, what happens if you choose to import layers as layers? As keyframes?
4
Describe the four button states in a button symbol's Timeline.
5
How can you change the opacity of a color or instance in Flash?
Review Answers
1
A symbol is a graphic, button, or movie clip that you create once in Flash and can then reuse throughout your document or in other documents. An instance is a copy of a symbol located on the Stage or nested inside another symbol.
2
You can import an asset file to the library, which adds the asset only to the Library panel. You can also import an asset file to the Stage, which places the asset on the Stage and automatically adds the asset to the Library panel.
3
When you import layers in an Illustrator file as layers, Flash recognizes the layers in the Illustrator document and adds them as separate layers in the Timeline. When you import layers as keyframes, Flash adds each Illustrator layer to a separate frame in the Timeline, and creates keyframes for them.
4
Button symbols include four states: Up, Over, Down, and Hit. ● ●
● ●
Up is the default state for the button. Over determines the button's appearance when the mouse rolls over it. Down determines the button's appearance when it is clicked. Hit defines the active area, which is the area that responds to the mouse click.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec9.htm (1 of 2) [13.06.2007 22:08:18]
Review
5
The opacity (or transparency) of a color or instance is determined by its alpha value. To change the opacity of a color, change the alpha value in the Color Picker. To change the opacity for an instance, select Alpha from the Color menu in the Property inspector, and then change the alpha percentage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch03lev1sec9.htm (2 of 2) [13.06.2007 22:08:18]
4. Working with Text
4. Working with Text
Text—dynamic or static—can play a critical role in a Flash movie. You can animate it easily using a simple mask, apply a filter to create a special effect, or use it to provide the viewer with essential information. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ● ● ● ● ● ●
Create text in Flash Format text Convert text fields to symbols Use masks to animate text Organize layers in a Timeline Work with layer folders Copy objects from one layer to another Apply filters to text Use tweening to animate objects quickly
This lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson04 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04.htm [13.06.2007 22:08:19]
Getting Started
Getting Started You'll start the lesson by viewing the animated birthday card that you'll create as you learn to work with text in Flash. 1.
Double-click the 04End.swf file in the Lesson04/04End folder to play the animation.
The project is a whimsical animated electronic birthday card. In this lesson, you'll animate the cellphone graphic, create and format text for the phone screen, and use a mask to reveal the text gradually. 2.
Double-click the 04Start.fla file in the Lesson04/04Start folder to open the initial project file in Flash.
3.
Choose File > Save As. Name the file 04_workingcopy.fla, and save it in the 04Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec1.htm [13.06.2007 22:08:19]
Organizing Layers in a Timeline
Organizing Layers in a Timeline The 04Start.fla file contains a single layer, called Assets. The Assets layer contains symbols you'll use as you create the birthday card. You'll need additional layers for the project, and it's good practice to organize the layers in a Timeline when you start a project. You can import assets directly into the Library panel, but you may prefer to import them onto the Stage, so that you can arrange them all at once before separating them into the layers that are appropriate for the animation you plan. [View full size image]
Adding a Layer for Actions To stop the sound file from looping, you'll use a simple action. Typically, designers place actions on their own layer, making it easier to troubleshoot or revise them later. In fact, the Actions layer is usually the top layer in the Timeline, so you can find it easily if you need to modify the animation. To keep things neat, you'll create a layer for the sound file directly below the Actions layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec2.htm (1 of 3) [13.06.2007 22:08:20]
Organizing Layers in a Timeline
1.
Select the Assets layer, and click the Insert Layer icon twice.
2.
Name the top layer Actions.
3.
Name the second layer Sound.
Creating Layer Folders Layer folders can help you keep your folders organized, especially in projects that require numerous layers. Think through your project before beginning, and create your layer folders before you need them. You'll save time later, as you'll know exactly where to look for a specific layer, and you won't need to rearrange layers to make animations work as expected. For this project, you'll create a layer folder to contain the text and battery layers. 1.
Select the Assets layer, and click the Insert Layer Folder icon (
2.
Name the folder Text And Battery.
).
Adding Layers to Layer Folders You'll add the text and battery layers to the Text and Battery folder, and you'll add separate layers for the background objects and other assets. As you arrange layers, remember that Flash displays the layers in the order they appear in the Timeline, with the top layer at the front and the bottom layer at the back. 1.
Click the Insert Layer icon.
2.
Drag the new layer into the Text And Battery folder, and name it Low Batt.
3.
Click the Insert Layer icon five times. Because the Low Batt layer was selected, the new layers are added to the Text And Battery folder.
4.
Name the layers, from top to bottom: Birthday Message, Incoming Text Message, Hi, Just Wanted, and I Hope.
5.
Select the Assets layer, and click the Insert Layer icon.
6.
Name the new layer Background.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec2.htm (2 of 3) [13.06.2007 22:08:20]
Organizing Layers in a Timeline
7.
With the Background layer selected, click the Insert Layer icon, and name the new layer Cellphone. [View full size image]
Changing the Appearance of the Timeline You can adjust the Timeline's appearance to accommodate your workflow. When you want to see more layers, select Short from the Frame View pop-up menu in the upperright corner of the Timeline. The Short command decreases the height of frame cell rows. You can also change the width of the frame cells by selecting Tiny, Small, Normal, Medium, or Large. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec2.htm (3 of 3) [13.06.2007 22:08:20]
Placing Assets on Layers
Placing Assets on Layers All of the assets for this project were originally imported to the Stage, arranged on the Assets layer. You'll move them from the Assets layer to the appropriate layers. 1.
Select the Assets layer. All of the objects on the Assets layer are selected. Click outside the Stage to deselect them.
2.
Holding down the Shift key, select the flower, floor, table, and wallpaper images on the Stage.
3.
Choose Edit > Cut.
4.
Select the Background layer, and choose Edit > Paste In Place.
5.
Hide the Background layer by clicking the dot beneath the eye icon.
6.
Repeat steps 1-4 to move the battery from the Assets layer to the Low Batt layer, in the Text And Battery folder.
7.
Repeat steps 1-4 to move the graphic of the cellphone and hand from the Assets layer to the Cellphone layer. (The graphic is on the pasteboard beneath the Stage; scroll down to see it.)
Deleting a Layer You may work with some layers temporarily, using them to store assets, or to test effects. To keep the Timeline tidy, delete layers you no longer need. Because the Assets layer is now empty, you can safely delete it. 1.
Select the Assets layer.
2.
Click the Delete Layer icon. ( )
3.
Show the Background layer again to reveal its contents.
Moving an Object on the Timeline The battery shouldn't appear on the Stage until much later in the animation, so you'll move it from frame 1 to frame 199 in the Timeline. 1.
Select the keyframe on frame 1 of the Low Batt layer.
2.
Drag the keyframe to frame 199.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec3.htm (1 of 3) [13.06.2007 22:08:21]
Placing Assets on Layers
Not sure which frame you've selected? The current frame number is shown in the bar beneath the Timeline.
Adding a Sound File A song plays with the animation in the birthday card. You'll add the song file to the Sound layer, and set it to synchronize with the actions on Stage. Then, add a stop action (using ActionScript) to keep the movie from looping back to the beginning it ends. 1.
Select the Sound layer.
2.
Select frame 47, and press F7 to insert a blank keyframe.
3.
In the Property inspector, select Corny_birthday.wav from the Sound menu. The WAV file is already in the library.
4.
Select Stream from the Sync menu in the Property inspector. Note The Sync option forces the graphics to sync to the audio, so that animation appears at the points you expect in the sound file. [View full size image]
5.
Select frame 253 on the Actions layer, and press F7 to insert a blank keyframe. Frame 253 is where the audio file ends on the Sound layer.
6.
Choose Window > Actions to open the Actions panel. You type ActionScript in the Actions panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec3.htm (2 of 3) [13.06.2007 22:08:21]
Placing Assets on Layers
7.
In the Actions panel, type stop();
[View full size image]
8.
Close the Actions panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec3.htm (3 of 3) [13.06.2007 22:08:21]
Using Tweens to Animate Objects
Using Tweens to Animate Objects Tweening is a quick way to create animation, whether you're moving an object to a new position, changing its brightness, or increasing its size. You set up the objects and their properties in the first frame, set up the final properties in the last frame, and then apply tweens to create all the steps in between. There are two kinds of tweens in Flash: motion tweens and shape tweens. Motion tweens affect movement or shifts in properties; shape tweens actually morph an object from one shape to another. For this project, you'll use motion tweens to gradually change the brightness of the background at the beginning of the animation, and then to move the cellphone and hand onto the screen. Tweening Brightness The background sets the stage for the greeting card. You'll tween the brightness so that the background objects gradually appear during the first ten frames. First, you need to convert the objects on the Background layer to a single movie clip symbol so that you can apply a motion tween to them. Note You could also tween alpha (transparency) values, but tweening the brightness is less processor-intensive and can therefore occur more quickly.
1.
Select frame 1 of the Background layer. All the objects on the layer are selected.
2.
Press F8 to convert the objects to a symbol. Name the symbol background_objects. Select Movie Clip for the Type, and click OK.
3.
Select frame 10 on the Background layer, and press F6 to insert a keyframe.
4.
Select any frame between frames 1 and 10 on the Background layer.
5.
In the Property inspector, select Motion from the Tween menu.
6.
Select frame 1 in the Background layer, and click outside the Stage to deselect the contents and change the focus in the Property inspector.
7.
Select the instance of the background_objects symbol on the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec4.htm (1 of 4) [13.06.2007 22:08:22]
Using Tweens to Animate Objects
8.
In the Property inspector, choose Brightness from the Color menu. Type 100 for the percentage. [View full size image]
9.
Lock the Background layer.
10. Scrub the Timeline by moving the playhead across the frames. Flash displays each frame as you move the playhead. Tweening Movement You can also use a motion tween to tween an object's movement, as you did in Lessons 1 and 2. In this project, the graphic of the cellphone and hand is currently in frame 1 of the Cellphone layer, and it's positioned below the background objects on the Stage. In the birthday card, the cellphone appears on the Stage after the phone rings once in the sound file. So that the phone appears at the appropriate time, you'll move the graphic to frame 77, and then move it fully onto the Stage by frame 84. 1.
Click the keyframe on frame 1 in the Cellphone layer, and drag it to frame 77.
2.
Select frame 84 in the Cellphone layer, and press F6 to insert a keyframe.
3.
Select any frame between frames 77 and 84 on the Cellphone layer.
4.
In the Property inspector, select Motion from the Tween menu.
5.
Select the keyframe on frame 84.
6.
Select the cellphone on the pasteboard.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec4.htm (2 of 4) [13.06.2007 22:08:22]
Using Tweens to Animate Objects
7.
In the Property inspector, set the X value to 321 and the Y value to 267. Press Enter or Return to apply the values. The cellphone's position matches that of the battery that will appear later. [View full size image]
8.
Scrub the Timeline to see the cellphone move up onto the Stage. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec4.htm (3 of 4) [13.06.2007 22:08:22]
Using Tweens to Animate Objects
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec4.htm (4 of 4) [13.06.2007 22:08:22]
Creating Text
Creating Text The phone message is a critical part of this birthday card animation. You'll create the text and format it, positioning it in the Timeline to appear at the proper moment in the animation. Then, you'll use masks to reveal the text more gradually, the way it would appear in a text message on a cellphone. Later, you'll rotate the text to match the angle of the cellphone's screen. About Text in Flash What can you do with text in Flash? Just about anything. You can create text directly in Flash, or import it from another file. You can orient text horizontally or vertically. You can format text, setting attributes such as font, text size, bold or italic, paragraph alignment, and line spacing. You can rotate a text field, resize it, or convert it to a symbol. You can animate text and apply a filter, such as a drop shadow or glow. You can even create dynamic text, with a variable defined differently at different points in the movie—even based on the viewer's input. This lesson can't cover all the ways you can use text in Flash, but it will give you a feel for the potential. Adding Text to a Layer To create text in Flash, select the Text tool, click on the Stage, and start typing. You'll begin by typing the text for the first two phone messages and formatting them. 1.
Select frame 88 on the Incoming Text Message layer (in the Text And Battery folder), and press F7 to insert a blank keyframe.
2.
Select the Text tool ( ).
3.
In the Property inspector, select Static Text from the pop-up menu. If Dynamic Text is selected, the text won't appear in the movie. (Dynamic text changes based on ActionScript. You'll work with dynamic text in Lesson 10.)
4.
Click an insertion point in the upper-left corner of the phone screen on the Stage.
5.
Type Incoming, press Enter or Return, and then type text msg... Two lines of text will appear on the phone screen.
6.
Choose Edit > Select All to select all the text.
7.
In the Property inspector, select Arial from the typeface menu, click the Bold icon, select black (#000000) for the color, and type 13 for the text size.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec5.htm (1 of 6) [13.06.2007 22:08:24]
Creating Text
8.
Click the Edit Format Options icon ( menu.
), and select 2 pts from the Line Spacing
[View full size image]
9.
Select frame 103 on the Incoming Text Message layer and press F7 to insert a blank keyframe. The text you typed will disappear at frame 103.
10. Select frame 108 on the Hi layer, and press F7 to insert a blank keyframe. 11. Select the Text tool, and click an insertion point at the upper-left corner of the phone screen. 12. Type hi. it's, press Enter or Return, and then type me. 13. Choose Edit > Select All, and then format the text in the Property inspector with the following attributes: Arial, Bold, 16 point text size, 4 point line spacing. 14. Select frame 126 on the Hi layer, and press F7 to insert a blank keyframe. The text appears between frames 108 and 126 in the movie. Copying Text You could create each set of text from scratch, but because the formatting will be the same for the remaining messages, it's easier to copy and paste the text box and then replace the words.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec5.htm (2 of 6) [13.06.2007 22:08:24]
Creating Text
1.
Select frame 125 in the Hi layer.
2.
With the Selection tool, select the text on the Stage. Note When you're working with text as type, such as when you're formatting characters, select it with the Text tool. When you're manipulating a text box as an object, such as when you're copying or rotating the text, select it with the Selection tool.
3.
Choose Edit > Copy.
4.
Select frame 130 on the Just Wanted layer, and press F7 to insert a blank keyframe.
5.
Choose Edit > Paste In Place.
6.
Using the Text tool, change the first line to jst wnted and the second line to 2 say. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec5.htm (3 of 6) [13.06.2007 22:08:24]
Creating Text
7.
Select frame 151 on the Just Wanted layer, and press F7 to insert a blank keyframe. The new text appears between frames 130 and 151 on the Timeline.
8.
Select frame 155 on the I Hope layer, and press F7 to insert a blank keyframe.
9.
Choose Edit > Paste In Place. The clipboard still contains the text from the Hi layer, so that text is pasted on the Stage.
10. Using the Text tool, change the first line to i hope u and the second line to hve a vry. 11. Press Enter to add a third line, and type happy. [View full size image]
12. Select frame 199 on the I Hope layer, and press F7 to insert a blank keyframe. This text appears between frames 155 and 199 on the Timeline.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec5.htm (4 of 6) [13.06.2007 22:08:24]
Creating Text
13. Select frame 199 on the Low Batt layer, and choose Edit > Paste In Place. Note You do not need to add a keyframe to frame 199 on the Low Batt layer because there is already a keyframe there. At frame 199, the image of the battery appears on the Stage. 14. Using the Text tool, change the first line to low batt..., and delete the rest of the text. Rotating Text The text doesn't match the angle of the phone. The low battery warning should be above the battery icon, and it should be parallel to it. You can rotate text using the Transform panel. 1.
Using the Selection tool, shift the text so that it appears above the battery icon.
2.
Choose Window > Transform to open the Transform panel.
3.
Select the text with the Selection tool.
4.
Type -22 in the Rotate box in the Transform panel, and press Enter or Return to apply it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec5.htm (5 of 6) [13.06.2007 22:08:24]
Creating Text
5.
If you need to adjust the message further, select it with the Selection tool, and then nudge it with the arrow keys on your keyboard.
Converting Text to a Symbol If you're going to use text multiple times, convert it to a symbol. Flash can use the same text over and over again, but only needs to include the text in the file once, reducing the file size. Additionally, if you need to edit the text, you'll only need to do it once, and the same changes will appear in every instance of the symbol. 1.
Select the text with the Selection tool.
2.
Press F8 to open the Convert To Symbol dialog box.
3.
Select Graphic for the Type, name the symbol low_batt_text, and click OK. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec5.htm (6 of 6) [13.06.2007 22:08:24]
Animating Text with Masks
Animating Text with Masks There are many different ways to animate objects in Flash. In this project, you'll make the text gradually appear on the screen using masks. In fact, it's actually the mask that is animated—you'll stretch the mask to reveal more of the text as the movie proceeds. This method also makes it easier to edit the text if you need to, as you only need to change it in one place. About Masks Don't let the concept of Halloween masks confuse you about the purpose of masks in graphic applications such as Flash or Adobe Photoshop. A mask serves as a window to objects beneath it. That is, anything directly under the mask on the layers that lie beneath it is visible; anything not included in the mask area is not visible on the screen. In Flash, a mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. You can mask multiple layers at once for a sophisticated effect. To use a mask, first create a mask layer. Place the mask item on the layer. Move the layer into the correct position in the Timeline. A mask layer always masks the layer directly below it; to mask more than one layer, nest them under the mask layer. Then, choose the Mask command. The layer immediately below the mask layer is linked to it, and the masked layer's name is indented in the Timeline. You won't see the masking effect until you lock the mask layer and the layer or layers it affects. Drawing Masks You'll use a simple rectangle to mask the text, and then stretch the mask over time to reveal more text. Because there are multiple screens of text, you'll need to create and resize the rectangle several times, but you only need one mask layer. 1.
Select the Incoming Text Message layer, and click the Insert Layer icon.
2.
Name the new layer Mask.
3.
Lock all the layers beneath the Mask layer to ensure you don't accidentally move anything on them. To lock multiple layers at once, click the dot in the lock column for one layer and drag through the dots for the other layers you want to lock.
4.
Select frame 88 on the Mask layer, and press F7 to insert a blank keyframe. This keyframe should be directly above the first keyframe on the Incoming Text Message layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (1 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
5.
Select the Rectangle tool, and deselect the Object Drawing icon. Set the rectangle to have no stroke and a bright red fill. Note You can use any color you want for the fill color of a mask; it won't show in the final movie. Bright red is easy to see.
6.
Zoom in to view the phone screen.
7.
Draw two overlapping rectangles that completely cover the words on both lines. However, on the second line, don't cover the ellipsis (...).
8.
Select frame 91 on the Mask layer, and press F6 to insert a keyframe.
9.
Select the Free Transform tool ( the first dot in the ellipsis.
), and use it to stretch the mask shape to cover
Note You can have only one mask item on the Stage at a time. In merge drawing mode, the overlapping rectangles merge to become a single object, so that both lines of text are masked. 10. Select frame 94 on the Mask layer, and press F6 to insert a keyframe. 11. With the Free Transform tool, stretch the mask shape to cover the second dot.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (2 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
12. Select frame 97, press F6, and stretch the mask shape to cover the third dot. 13. Select frame 103, and press F7 to insert a blank keyframe. This mask isn't needed past this keyframe, because the text disappears from the screen at this frame. [View full size image]
14. Select frame 108 on the Mask layer, and press F7 to insert a blank keyframe. This keyframe should be directly above the first keyframe in the Hi layer. 15. With the Rectangle tool, draw a rectangle covering the word hi. 16. Using the same method you used on the first message, gradually cover the text with the mask: at frame 112, press F6 to add a keyframe and then cover all the text on the first line; at frame 116, press F6, and then stretch the mask shape down to cover the word me.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (3 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
17. Select frame 126, and press F7 to create a blank keyframe that ends this mask. [View full size image]
18. Select frame 130 on the Mask layer and press F7 to insert a blank keyframe. This should be directly above the first keyframe of the Just Wanted layer. 19. With the Rectangle tool, draw a rectangle covering the word jst. 20. Gradually stretch the mask over the text at the screen: At frame 136, press F6, and then cover the first line. At frame 141, press F6, and then draw a rectangle to cover 2. (Make sure the rectangles overlap, becoming one object.) At frame 146, press F6, and draw an overlapping rectangle to cover the rest of the second line. 21. Select frame 151 on the Mask layer, and press F7 to insert a blank keyframe. 22. Select frame 155, and press F7 to insert a blank keyframe directly above the first keyframe in the I Hope layer. 23. Draw a rectangle covering i on the first line.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (4 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
24. As you have for other messages, gradually cover the text by creating new keyframes and adjusting the mask. At frame 161, cover i hope. At frame 167, cover the first line. At frame 173, draw a rectangle to cover hve. At frame 179, cover the second line. At frame 186, draw a rectangle to cover happy. Note Don't forget to create a keyframe for each change, and make sure the rectangles overlap to become a single shape. 25. Select frame 199 on the Mask layer, and press F7 to insert a blank keyframe. [View full size image]
Creating a Blinking Effect In the birthday card, the text is interrupted by a low battery message. To make that battery icon blink, you'll simply insert keyframes and blank keyframes, so that the battery appears and disappears from the Stage. 1.
Select the Low Batt layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (5 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
2.
Press F6 to insert keyframes at the following frames: 206, 213, and 220.
3.
Press F7 to insert blank keyframes at the following frames: 203, 210, 217, and 224.
Applying the Mask You've drawn the rectangles to mask the text, but the mask doesn't take effect until you apply it. 1.
Right-click (Windows) or Ctrl+click (Mac OS) the Mask layer.
2.
Choose Mask from the context menu. Flash indents the first layer under the Mask layer. You'll nest other layers later to mask them, too.
Applying Onion Skinning Onion skinning lets you see multiple frames on the Stage at once, so you can see how your animation moves. Here, you'll use it to see the text as you rotate multiple layers at the same time. 1.
Click the lock icon above all the layers to lock them all.
2.
Unlock the Mask layer and the text layers beneath it, through the I Hope layer.
3.
Click the Edit Multiple Frames icon ( ) beneath the Timeline.
4.
Click the Modify Onion Markers icon ( from the pop-up menu.
) beneath the Timeline, and select Onion All
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (6 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
5.
Click the Show As Outlines icon ( ) for the Mask layer. With the masked rectangles as outlines, you can see all the text. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (7 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
Rotating Multiple Layers As you typed it, the message was at a different angle from the cellphone screen. You'll fix that now, by rotating all the relevant layers—text and mask layers—at once. 1.
Choose Edit > Select All. All of the text and masks are selected.
2.
In the Transform panel, type -22 in the Rotate box, and press Enter or Return. All the text boxes and the masks rotate to match the cellphone screen. Note If the Transform panel isn't open, choose Window > Transform. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (8 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
3.
With the Selection tool, move all the selected text to the center of the phone screen. You can use the arrow keys to nudge the text into position.
4.
Deselect the Edit Multiple Frames icon.
Nesting Layers By default, a mask layer affects one layer beneath it. However, you can use it to mask multiple layers if you nest them under the Mask layer. When you lock the Mask layer and the affected layers, you can see the effects of the mask on the screen. 1.
Select the Incoming Text Message layer, and then press Shift and select the Low Batt layer to select all the layers in between.
2.
Drag the layers on top of the Mask layer name; the mask icon darkens when the layers are positioned correctly. When you release the mouse, all the selected layers are indented beneath the Mask layer.
3.
Lock the Mask layer, and all the indented layers.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (9 of 10) [13.06.2007 22:08:27]
Animating Text with Masks
4.
Scrub the Timeline to preview the animated text. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec6.htm (10 of 10) [13.06.2007 22:08:27]
Using Tweens to Simulate a Shaking Motion
Using Tweens to Simulate a Shaking Motion After the low battery message, the cellphone shakes. You'll create that shaking motion using motion tweens and rotation settings. 1.
Unlock the Cellphone layer.
2.
Select frame 228 in the Cellphone layer, and press F6 to insert a keyframe.
3.
Select frame 238, and press F6 to insert a keyframe.
4.
With frame 238 selected, select the phone graphic on the Stage.
5.
In the Transform panel, type -18 in the Rotate box, press Enter or Return, and then use the Selection tool to move the phone under the table. Note You may need to change the view to see the entire Stage. You can use the View pop-up menu above the Stage, or use the Zoom tool in Reduce mode.
6.
Select any frame between frames 228 and 238. In the Property inspector, select Motion from the Tween menu.
7.
Select frame 230, press F6 to insert a keyframe, and then select the cellphone graphic on the Stage.
8.
In the Transform panel, type -18 in the Rotate box, and press Enter or Return to apply it. Use the Selection tool to shift the phone to the left.
9.
Select frame 232, press F6, and select the phone graphic.
10. Type 42 in the Rotate box, and press Enter or Return.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec7.htm (1 of 6) [13.06.2007 22:08:28]
Using Tweens to Simulate a Shaking Motion
11. Shift the phone to the right until it is almost to the right edge of the background. [View full size image]
12. Select frame 234, press F6, and select the phone graphic. 13. Type -18 in the Rotate box, and press Enter or Return. 14. Shift the phone to the left so that it is in a similar position as on frame 230. 15. Scrub through the Timeline from frames 228 to 238 to see the animation. Applying Filters to Text Filters are graphic effects that you can apply to text, buttons, and movie clips. Each filter includes settings that you can use to customize its effect. After you type the text for the final birthday message, you'll apply a Glow filter to the word CHARGE to make it stand out from the normal text around it. 1.
Unlock the Birthday Message layer.
2.
Select frame 241, and press F6 to create a keyframe.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec7.htm (2 of 6) [13.06.2007 22:08:28]
Using Tweens to Simulate a Shaking Motion
3.
With the Text tool, drag a text box across the right half of the top of the Stage.
4.
In the Property inspector, select Static Text from the pop-up menu on the left.
5. 6.
Select the following formatting: White (#FFFFFF), Arial, 28 points, Centered (
).
Type the name of the person you're making the card for. If you aren't making it for anyone in particular, type Andrew. Note If the text doesn't fit on one line, click the square in the upper-right corner of the text box and drag it to the left until the box is large enough for the text. [View full size image]
7.
Create a second text box just below the first, and change the formatting to 25 points, Bold, and -2 line spacing. (To edit line spacing, click the Edit Format Options icon.)
8.
Type Thought you would get a.
9.
Create another text box just below the second one, and change the text size to 48 points and the color to purple (#7F4484).
10. Type CHARGE.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec7.htm (3 of 6) [13.06.2007 22:08:28]
Using Tweens to Simulate a Shaking Motion
11. Create a final text box below CHARGE. 12. Change the formatting to 25 points and white (#FFFFFF). 13. Type out of this card, and press Enter or Return. 14. Type HAPPY BIRTHDAY! for the last line. [View full size image]
15. With the text tool, select CHARGE. 16. In the Property inspector, click the Filters tab to open the Filters panel. 17. Click the Add Filter icon (
), and select Glow from the pop-up menu.
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec7.htm (4 of 6) [13.06.2007 22:08:28]
Using Tweens to Simulate a Shaking Motion
18. Specify the following settings for the filter: Blur X: 20; Blur Y: 20; Strength: 100%; Quality: High; Color: #FFFF00. [View full size image]
19. With the Selection tool, adjust the text boxes as needed. 20. Choose Control > Test Movie to preview the card.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec7.htm (5 of 6) [13.06.2007 22:08:28]
Using Tweens to Simulate a Shaking Motion
You've created an animated birthday card to brighten someone's day. You can adapt this card using different names or messages. Better yet, use the techniques you learned in this lesson to create your own masterpiece.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec7.htm (6 of 6) [13.06.2007 22:08:28]
Review
Review
Review Questions
1
How do you format text in Flash?
2
Which tool do you use to select text to edit it? Which tool do you use to rotate or move a text box?
3
How do you add a sound file to a layer?
4
What is a motion tween and how do you apply it?
5
How do you apply a filter to text?
Review Answers
1
To format text, select it with the Text tool, and then select options in the Property inspector. You can change the typeface, text size, type style, paragraph alignment, and so on. Click the Edit Format Options icon to change the options related to the text box, such as the indent, margins, and line spacing.
2
To edit or format text, select it with the Text tool. To rotate, move, resize, or otherwise manipulate a text box, select it with the Selection tool.
3
To add a sound file to a layer, select a keyframe in the layer, and then select a sound file from the Sound menu in the Property inspector. The Sound menu lists sound files that are in the Library panel.
4
A motion tween applies incremental changes to frames, so that you don't need to reposition or modify objects for each frame. To apply a motion tween, specify the settings or position for an initial keyframe and for a final keyframe. Then, click between the keyframes in the Timeline, and select Motion from the Tween menu in the Property inspector.
5
To apply a filter to text, first select the text with the Text tool. Then, click the Filters tab in the Property inspector. Click the Add Filter icon, and select a filter. You can customize the filter settings in the Filters panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch04lev1sec8.htm [13.06.2007 22:08:29]
5. Adding Animation
5. Adding Animation
Using Flash CS3, you can change almost any aspect of an object over time: position, color, transparency, size, rotation, and more. Using shape tweens, you can even morph one object into another. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ● ● ● ●
Animate objects using motion tweens Morph objects using shape tweens Understand the difference between motion and shape tweens Nest symbols Animate motion along a path Use masks to animate objects Animate transparency
This lesson will take approximately two hours to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson05 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05.htm [13.06.2007 22:08:30]
Getting Started
Getting Started Start by viewing the finished movie file to see the animated title page that you'll create in this lesson. 1.
Double-click the 05End.swf file in the Lesson05/05End folder to play the animation.
The project is an animated title page for a cartoon about an alien creature. In this lesson, you'll animate the alien's arms to move up and down, use a mask to make the eyes blink, use motion tweens to enlarge the alien and position it on the Stage, use a motion guide to loop a spaceship across the Stage, and use shape tweens to morph the smoke from the spaceship into the letter O in the title. 2.
Close the 05End.swf file.
3.
Double-click the 05Start.fla file in the Lesson05/05Start folder to open the initial project file in Flash.
4.
Choose Fit In Window from the View pop-up menu above the Stage, so that you can see the alien on the pasteboard.
5.
Choose File > Save As. Name the file 05_workingcopy.fla, and save it in the 05Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec1.htm [13.06.2007 22:08:30]
About Animation
About Animation Animation is the movement, or change, of objects through time. Animation can be as simple as moving a box across the Stage from one frame to the next. It can also be much more complex. As you'll see in this lesson, you can animate many different aspects of a single character: each limb, for example, as well as eyes, ears, or tongue. You can move objects across space, change their color or transparency, change their size, and even change them into different shapes. To animate objects in Flash, you create keyframes on the Timeline. You've used keyframes in earlier lessons. At each keyframe, Flash records the current state of the Stage: the objects' position, color, size, shape, and other attributes. To create a gradual animation, you can create a keyframe for each frame, and change the objects a small amount for each one. It's faster and easier, though, to take advantage of motion and shape tweens in Flash: you create the first keyframe and the last, and Flash sets up the intermediate frames for you. Motion tweens create animation frames for changes in position on the Stage and for changes in size, color, or other attributes. You've used motion tweens in earlier lessons to animate the movement or brightness of objects on the Stage. Shape tweens create animation frames to change one shape into another. For example, in this lesson, you'll morph a cloud of smoke into a letter O. There is no way to make that change by setting different attributes for the object; the initial object and the final object in the animation are inherently different. Shape tweens make the transformation from one to the other appear smooth. Flash also provides a way to quickly animate motion that is more complicated than a straight path. You can create a motion guide with as complex a path as you like, and then attach your object to it, and apply motion tweening. Flash keeps the object on the path as it progresses through the frames.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec2.htm [13.06.2007 22:08:31]
Setting Up the Project File
Setting Up the Project File The 05Start.fla file contains a single layer called Alien. An alien character is next to the Stage, and the symbols that make up that character are included in the Library panel. Other objects have been created in Illustrator, including the title text, a spaceship, a planet, and a cloud of smoke. Before you animate the objects on the Stage, you'll import layers and symbols from Illustrator and set up the Timeline. Importing Layers from an Illustrator File Many designers prefer to draw objects in Illustrator and then import them into Flash. As you've done in previous lessons, you'll import Illustrator layers as Flash layers, and they'll appear in the Timeline. You'll import the objects to the Stage so they appear next to the alien. First, set the preferences for the Illustrator import filter so that the symbols automatically import with a center registration point. 1.
Choose Edit > Preferences (Windows) or Flash > Preferences (Mac OS). Click AI File Importer in the list on the left.
2.
For Movie Clip Registration, select the center registration point, and then click OK to close the dialog box. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec3.htm (1 of 4) [13.06.2007 22:08:32]
Setting Up the Project File
3.
Choose File > Import > Import To Stage.
4.
Select Assets.ai from the Lesson05/05Start folder, and click Open (Windows) or Import (Mac OS).
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec3.htm (2 of 4) [13.06.2007 22:08:32]
Setting Up the Project File
5.
In the Import To Stage dialog box, select all the layers and symbols. The graphics on each layer are already movie clip symbols, denoted by the movie clip icon in the dialog box.
6.
Select Flash Layers from the Convert Layers To menu.
7.
Select Place Objects At Original Position.
8.
Click OK. [View full size image]
Flash imports the layers into the Timeline. It adds the symbols to the library, and places instances of them next to the Stage with the alien. Flash placed the instances in the same positions they occupied in the Illustrator file. They're next to the Stage, easy to select, but the Stage itself remains empty until you move objects onto it. Organizing the Timeline The layers appear in the Timeline in the order they were listed in Illustrator. You'll add
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec3.htm (3 of 4) [13.06.2007 22:08:32]
Setting Up the Project File
layers for actions and sound, and move the Alien layer between two other layers. Then you'll extend the layers to have 150 frames. 1.
Select the Cloud Morph layer, and then click the Insert Layer icon two times to create two new layers.
2.
Name the first layer Actions, and the second layer Audio.
3.
Move the Alien layer between the Title: Spaced and Spaceship layers. The layers in the Timeline should be in this order: ● ● ● ● ● ● ● ● ● ●
Actions Audio Cloud Morph Title: O Title: U Title: T Title: Spaced Alien Spaceship Planets
4.
Select frame 150 on the Actions layer, and then press Shift and select frame 150 on the Planets layer, so that frame 150 is selected on all the layers.
5.
Press F5 to insert frames to frame 150. The content from frame 1 is extended to every frame through frame 150. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec3.htm (4 of 4) [13.06.2007 22:08:32]
Animating a Movie Clip Symbol
Animating a Movie Clip Symbol Movie clip symbols have their own Timelines, so they provide great flexibility for animation. You can also nest movie clip symbols within each other. In fact, the alien character is a symbol, with other symbols for the head, arms, and so forth nested inside it. Editing a Symbol To edit a symbol, double-click it on the Stage or in the Library panel. When you doubleclick it on the Stage, you can edit it in place; Flash dims the other objects on the Stage, but you can still see them. When you double-click the symbol in the Library panel, only the symbol is visible while you edit it. When you edit a movie clip symbol, you can add layers and keyframes to its Timeline. In fact, you can do just about anything with a movie clip symbol Timeline that you can do with the main Timeline. You'll use a motion tween to resize and move the planet graphic as the movie plays. 1.
Choose View > Magnification > 50% so that you can see everything on the pasteboard.
2.
Select the planet on the pasteboard, and in the Property inspector, type 0 for the X value and 0 for the Y value. The planet moves onto the Stage.
3.
Double-click the planet on the pasteboard. Flash opens the planet symbol's Timeline, which includes a single layer named Layer 1.
4.
Select frame 280 in Layer 1, and press F6 to insert a keyframe.
5.
Select frame 140, and press F6 to insert another keyframe.
6.
With frame 140 selected, select the planet on the pasteboard.
7.
In the Property inspector, type 100 for the X value and 100 for the Y value. Press Enter or Return to apply the value. The planet graphic shifts down and to the right.
8.
Select any frame between frames 1 and 140, and select Motion from the Tween menu in the Property inspector.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec4.htm (1 of 3) [13.06.2007 22:08:34]
Animating a Movie Clip Symbol
9.
Select any frame between frames 140 and 280, and select Motion from the Tween menu in the Property inspector. You've created two motion tweens: one will animate movement from frame 1 to frame 140, as the planet moves one direction and grows smaller; and the other will animate movement from frame 140 to frame 280, as the planet moves the other direction and grows larger. [View full size image]
10. Select frame 140, and then select the planet instance on the Stage. 11. Choose Window > Transform to open the Transform panel. 12. Change both the width and height to 50% in the Transform panel, and press Enter or Return to apply the change.
If you're changing width and height the same amount, click Constrain in the Transform panel. Then, you only need to enter the value once; the other one will change automatically.
Duplicating an Animated Symbol You edited the planet symbol to include animation that causes the planet to move and to change size as the movie progresses. You'll create additional instances of the planet symbol, and then modify each instance to create planets of different sizes. 1.
Click Scene 1 in the Edit bar above the Stage to return to the main Timeline.
2.
Select the planet on the pasteboard.
3.
Press Alt (Windows) or Option (Mac OS), and drag the instance to another area of the Stage to copy it.
4.
Repeat step 3 twice, creating two more instances of the symbol.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec4.htm (2 of 3) [13.06.2007 22:08:34]
Animating a Movie Clip Symbol
5.
Select the first new instance, and change its width and height to 30 in the Property inspector.
6.
Change the width and height for the second new instance to 20, and for the third instance to 10. You now have four planets on the Stage, each a different size.
7.
Press Alt (Windows) or Option (Mac OS) as you drag multiple copies of each instance onto the Stage, so that you have at least five planets of each size.
8.
Position the planets to appear random (similar to the planets in the following image).
9.
Choose Control > Test Movie to view your animation. The planets move in one direction, gradually getting smaller, and then back again, gradually returning to their original size. If the planets seem too close together or appear too orderly, adjust their positions, and then test the movie again.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec4.htm (3 of 3) [13.06.2007 22:08:34]
Working with Nested Symbols
Working with Nested Symbols A symbol may itself contain symbols; in fact, you can nest symbols within symbols within symbols, several layers deep. You can animate each nested symbol separately, to create complex animations. In this project, you'll animate the alien's arms and eyes in nested symbols, and then animate the entire body, as well. To edit a symbol, double-click it on the Stage or in the Library panel. If you want to edit a nested symbol on the Stage, you must first edit the symbol that contains it, and then double-click the nested symbol. Adding Layers to a Symbol's Timeline You'll edit the body symbol, nested in the alien symbol, to add layers for the blinking eyes. 1.
Select the Alien layer, and then select the alien_mc instance on the pasteboard. Note The symbol is named alien, but the instance on the Stage is named alien_mc. You can give each instance of a symbol a unique name, which is essential if you use ActionScript to control the instance.
2.
In the Property inspector, type 145 for the X value and 255 for the Y value to position the alien on the Stage. Press Enter or Return to apply the values.
3.
Double-click the alien_mc instance on the Stage to edit the alien symbol. Flash displays the Timeline for the alien symbol.
4.
Select the Body layer in the Timeline, and click the Insert Layer icon twice.
5.
Name the top layer Left Blink and the second layer Right Blink.
6.
Select frame 100 on the Left Blink layer, and then press Shift and select frame 100 on the Right Arm layer to select frame 100 for all the layers.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec5.htm (1 of 4) [13.06.2007 22:08:35]
Working with Nested Symbols
7.
Press F5 to extend each layer to frame 100. [View full size image]
Animating Nested Symbols The alien symbol contains several nested symbols, including the arm symbols. You'll use motion tweens to animate the arms so that they move up and down. 1.
Select frame 100 on both the Left Arm and Right Arm layers, and press F6 to insert a keyframe for each.
2.
Select frame 50 on both the Left Arm and Right Arm layers, and press F6 to insert a keyframe for each.
3.
Select any frame between frames 1 and 50 on the Left Arm layer, and select Motion from the Tween menu in the Property inspector.
4.
Repeat step 3 to create a motion tween for the Right Arm layer.
5.
Select any frame between frames 50 and 100 on the Left Arm layer, and select Motion from the Tween menu in the Property inspector.
6.
Repeat step 5 to create a motion tween for the Right Arm layer.
7.
Select frame 50 on the Left Arm layer, and then select the left arm on the Stage.
8.
In the Transform panel, type -9 in the Rotate box, and press Enter or Return. Note If the Transform panel isn't visible, choose Window > Transform.
9.
Select frame 50 on the Right Arm layer, and select the right arm on the Stage.
10. In the Transform panel, select Skew, and then type 10 for the horizontal skew and 170 for the vertical skew. Press Enter or Return to apply the values.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec5.htm (2 of 4) [13.06.2007 22:08:35]
Working with Nested Symbols
You can use the Free Transform tool to rotate or skew the object on the Stage, but the Rotate and Skew options in the Transform panel give you precise control over movement.
[View full size image]
Creating Nested Symbols Within the alien symbol is the alien_body symbol, which, in turn, contains the alien_head symbol, which contains the alien_head_eye symbol. You'll use the alien_head_eye symbol as the basis for new symbols that will create the blinking effect. 1.
Use the Zoom tool to zoom in on the alien's head so that you'll be able to see the eye clearly. To pan the Stage, press the spacebar as you drag the mouse across the Stage.
2.
Double-click the alien's body on the Stage to edit the alien_body symbol.
3.
Double-click the alien's head on the Stage to edit the alien_head symbol. Flash displays the Timeline for the alien_head symbol, which contains five layers.
4.
Select the Left Eye layer, and then select the left eye on the Stage.
5.
Choose Edit > Copy to copy the eye.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec5.htm (3 of 4) [13.06.2007 22:08:35]
Working with Nested Symbols
6.
Click alien on the Edit Bar above the Stage to return to the alien Timeline.
7.
Select frame 18 on the Left Blink layer, and press F7 to insert a blank keyframe. Do the same for the Right Blink layer.
8.
Select the empty keyframe on frame 18 of the Left Blink layer, and choose Edit > Paste In Center. The left eye you copied appears on the Stage.
9.
Use the Selection tool to move the copy of the eye so that it is directly above the eye that is part of the body graphic. You may need to use the arrow keys to nudge the eye into place.
10. Lock the Body, Right Arm, and Left Arm layers so that you don't accidentally select them. 11. Select the eye graphic that you just placed, and press F8 to convert it to a symbol. 12. Select Graphic for the type, and name it alien_eyeblink. Then, click OK.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec5.htm (4 of 4) [13.06.2007 22:08:35]
Using a Mask to Animate a Symbol
Using a Mask to Animate a Symbol You've used masks in previous lessons to slowly reveal parts of a layer. In this lesson, you'll use a mask to show and hide the underlying eye, creating a blinking effect. When the eye is blinking, the eyelid, which is the same color as the face, will show. When the eye is open, the full eye will show. Breaking Apart Symbols You just created a symbol, but now you need to break it apart so that you can work separately with the fill, pupil, and outline. 1.
Double-click the alien_eyeblink instance on the Stage to edit the symbol.
2.
Select the left eye on the Stage.
3.
Choose Modify > Break Apart. The eye becomes editable pixels.
4.
Click in a blank area of the Stage to deselect the eye.
Preparing the Layers that will be Masked You'll create the eyelid, which will appear when the eye is blinking. 1.
Select the pupil in the eye, and delete it.
2.
Select the white fill in the eye, and delete it. In the Library panel preview, you should see only the outline of the eye.
3. 4.
Select the Paint Bucket tool (
) in the Tools panel.
Click the Fill Color icon in the options area of the Tools panel, type #619AD2 for the color, and then press Enter or Return. You're applying a color to the eyelid that is the same color as the alien's head.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec6.htm (1 of 7) [13.06.2007 22:08:37]
Using a Mask to Animate a Symbol
5.
With the Paint Bucket tool, click anywhere inside the outline of the eye on the Stage. The outline is filled with the blue color.
6.
With the Selection tool, select the fill.
7.
Choose Edit > Cut.
8.
Click the Insert Layer icon, and name the new layer Inner Eye.
9.
Select the empty keyframe on frame 1 of the Inner Eye layer, and choose Edit > Paste In Place.
10. Rename Layer 1 Outer Eye. 11. Move the Outer Eye layer above the Inner Eye layer in the Timeline. 12. Select the Inner Eye layer, and then select the inner eye on the Stage. 13. Select the Stroke Color icon in the options area of the Tools panel, and enter color #619AD2 to match the color of the alien's head.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec6.htm (2 of 7) [13.06.2007 22:08:37]
Using a Mask to Animate a Symbol
Creating the Mask You'll add the mask layer, and then draw two versions of the mask. 1.
Select the Inner Eye layer, and then click the Insert Layer icon.
2.
Name the new layer Mask.
3.
Select the Inner Eye layer, and then select the shape on it.
4.
Choose Edit > Copy.
5.
Select frame 1 on the Mask layer, and choose Edit > Paste In Place.
6.
Change the fill color on the Mask layer to bright green, and then click outside the eye to deselect it. Note You can fill a mask with any color. Green is a good choice for this mask because it shows up well against the background elements.
7.
Select frame 3 in the Outer Eye layer, and then press Shift and select frame 3 in the Inner Eye layer to select frame 3 in all three layers in the Timeline.
8.
Press F5 to extend all three layers to frame 3.
9.
Press Alt (Windows) or Option (Mac OS) as you drag the first frame of the Mask layer to frame 3 to duplicate the keyframe. [View full size image]
10. Select frame 3 on the Mask layer, and press Alt or Option as you drag it backwards one frame to duplicate the keyframe. Frames 1, 2, and 3 on the Mask layer should all have black dots, indicating keyframes. 11. Lock the Inner Eye and Outer Eye layers. 12. Click outside the mask to deselect it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec6.htm (3 of 7) [13.06.2007 22:08:37]
Using a Mask to Animate a Symbol
13.
), and then select the Polygon Mode icon ( ) in the Select the Lasso tool ( options area of the Tools panel. In Polygon Mode, the Lasso tool draws straight lines.
14. With the Lasso tool, select a thin diagonal section across the eye, at a slight slant. Click the Lasso tool at each corner of the polygon to change direction as you draw. 15. Press Delete to remove the section you drew from the mask.
16. Select the Mask layer, and then choose Modify > Timeline > Layer Properties. 17. Select Mask and Lock, and click OK. 18. Drag the Inner Eye layer onto the Mask layer in the Timeline. The Inner Eye layer is indented below the Mask layer, so the mask applies to it. The preview should look similar to the one in the following image. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec6.htm (4 of 7) [13.06.2007 22:08:37]
Using a Mask to Animate a Symbol
19. Unlock the Mask layer. 20. Press Alt or Option as you drag the second keyframe to the first frame of the Mask layer to duplicate it. 21. With the Lasso tool, select a diagonal section a little larger than the first, and then delete it. 22. Lock the Mask layer to activate the mask.
23. Unlock the Outer Eye layer. 24. Select frame 5 on the Outer Eye layer, and press F6 to create a keyframe. 25. With the Selection tool, select the oval on frame 5. In the Property inspector, change its stroke size to 5.
Duplicating the Masked Symbol You've created one blinking eye. Now you need to duplicate it for the right eye. The mask will automatically be included with the graphic. 1.
Click alien in the Edit bar above the Stage to return to the alien symbol Timeline.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec6.htm (5 of 7) [13.06.2007 22:08:37]
Using a Mask to Animate a Symbol
2.
Select the alien_eyeblink instance you just edited, and choose Edit > Copy.
3.
Select the empty keyframe on frame 18 on the Right Blink layer, and choose Edit > Paste In Place.
4.
With the eye you just pasted still selected, choose Modify > Transform > Flip Horizontal.
5.
Using the Selection tool, move the graphic directly above the right eye in the body symbol. You may need to use the arrow keys to nudge the graphic.
Animating the Mask The alien will blink three times during the animation, and each blink should last just three frames. You'll add keyframes and then duplicate the blinking frames twice to add blinks further in the Timeline. 1.
Select frame 21 in the Left Blink and Right Blink layers. (Press Shift to select frames in multiple layers.)
2.
Press F7 to insert blank keyframes. Frame 21 is the fourth frame after the blinking starts at frame 18; the blink will end at frame 21. [View full size image]
3.
Select frame 18 on the Left Blink layer, and then press Shift, and select frame 21 on the Right Blink layer to select frames 18-21 on both layers.
4.
Press Alt (Windows) or Option (Mac OS), and drag the set of frames so that the first keyframe is on frame 50.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec6.htm (6 of 7) [13.06.2007 22:08:37]
Using a Mask to Animate a Symbol
5.
Select the set of frames 18-21 on both layers again, and then press Alt or Option as you drag the set of frames to frame 90. The blink animation now occurs at frame 18, frame 50, and frame 90. To test the animation, choose Control > Test Movie. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec6.htm (7 of 7) [13.06.2007 22:08:37]
Moving Objects Across the Stage
Moving Objects Across the Stage You've animated nested symbols so that the arms move and the eyes blink. Now you'll animate the alien so that he moves across the Stage and grows larger, until he's in his final position. 1.
Click Scene 1 to return to the main Timeline.
2.
Select frame 145 of the Alien layer, and press F6 to insert a keyframe.
3.
Select any frame between frames 1 and 145, and select Motion from the Tween menu in the Property inspector.
4.
Select frame 145 of the Alien layer, and then select the alien graphic on the Stage.
5.
In the Transform panel, set the width and height to 160%, and press Enter or Return.
6.
In the Property inspector, type 180 for the X value and 380 for the Y value, and press Enter or Return. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec7.htm (1 of 2) [13.06.2007 22:08:38]
Moving Objects Across the Stage
7.
Press F6 to insert keyframes on the Alien layer at frames 29, 50, 63, 85, 110, 122, and 146.
8.
Using the Property inspector and the Transform panel, set the following values for each keyframe (remember that you need to select the alien on the Stage each time): ● ● ● ● ● ● ●
Frame Frame Frame Frame Frame Frame Frame
1: X=42, Y=176, width and height=20%, rotate = 34 degrees 29: X=150, Y=260, width and height=100%, rotate = 0 degrees 50: X=170, Y=260, width and height=130%, rotate = -5 degrees 63: X=260, Y=305, width and height=145%, rotate = 5 degrees 85: X=165, Y=345, width and height=160%, rotate = 0 degrees 110: X=185, Y=330, width and height=160%, rotate = 0 degrees 122: X=180, Y=375, width and height=160%, rotate = 0 degrees
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec7.htm (2 of 2) [13.06.2007 22:08:38]
Adding Sound
Adding Sound You'll add an electronic, space-age soundtrack to loop while the animation takes place. 1.
Select the empty keyframe on frame 1 of the Audio layer.
2.
In the Property inspector, select Blipsong.wav from the Sound menu.
3.
Select Start from the Sync menu and Loop from the pop-up menu next to it. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec8.htm [13.06.2007 22:08:38]
Adding a Stop Action
Adding a Stop Action You'll add a stop action at frame 150 to keep the animation from looping. Once the alien and title appear in their final position, they'll stay there. 1.
Select frame 150 on the Actions layer, and press F7 to insert a blank keyframe.
2.
Select the blank keyframe you just created.
3.
Choose Window > Actions to open the Actions panel.
4.
In the Actions panel, type stop();
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec9.htm [13.06.2007 22:08:39]
Animating Titles
Animating Titles You'll use motion tweens to animate the first word of the title, and then you'll animate the individual letters of the second word. Animating Text as an Object Currently, the word Spaced appears next to the Stage on the first frame. You'll move it to frame 54, and then use motion tweens to animate it so that it's in its final position by frame 139. 1.
Select the Title: Spaced layer.
2.
Select the title_spaced symbol on the pasteboard, and choose Edit > Cut.
3.
Select frame 54 on the Title: Spaced layer, and press F7 to insert a blank keyframe.
4.
With the new keyframe selected, choose Edit > Paste In Place.
5.
Select frame 139 of the Title: Spaced layer, and press F6 to insert a keyframe.
6.
Select any frame between frames 54 and 139 on the Title: Spaced layer, and select Motion from the Tween menu in the Property inspector.
7.
Insert a keyframe (press F6) at frames 70 and 133 on the Title: Spaced layer.
8.
Using the Property inspector and the Transform panel, set the following values for the title word at each of these keyframes: ● ● ● ●
Frame Frame Frame Frame
54: X=824, Y=108, width=70%, height=100% 70: X=324, Y=108, width=70%, height=100% 133: X=324, Y=108, width=100%, height=100% 139: X=324, Y=108, width=92%, height=95%
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec10.htm (1 of 3) [13.06.2007 22:08:40]
Animating Titles
Animating Individual Letters You'll place each of the letters from the word Out individually, starting with different frames, so that they appear one at a time. 1.
Select the Title: O layer, and select the letter O on the pasteboard.
2.
Choose Edit > Cut.
3.
Select frame 141 on the Title: O layer, and press F7 to insert a blank keyframe.
4.
Choose Edit > Paste In Place.
5.
Select the letter O on the pasteboard. In the Property inspector, type 448 for the X value and 233 for the Y value. Press Enter or Return to apply the values.
6.
Select the Title: U layer, and then select the U on the pasteboard.
7.
Choose Edit > Cut.
8.
Select frame 142 on the Title: U layer, and press F7 to insert a blank keyframe.
9.
Choose Edit > Paste In Place.
10. Select the U on the pasteboard, and move it to the right of the O on the Stage, aligned with the bottom of the O. 11. Select the Title: T layer, select the T on the pasteboard, and choose Edit > Cut. 12. Select frame 145 on the Title: T layer, and press F7 to insert a blank keyframe. 13. Choose Edit > Paste In Place. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec10.htm (2 of 3) [13.06.2007 22:08:40]
Animating Titles
14. Select the T on the pasteboard, and move it to the right side of the U, aligned with the bottom of the O.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec10.htm (3 of 3) [13.06.2007 22:08:40]
Morphing Objects
Morphing Objects Shape tweens make it possible to smoothly transform one object into another, even when they're very different objects. You'll use shape tweens to morph a puff of smoke into the letter O in the word Out. To apply shape tweening to groups, instances, or bitmap images, you must first break the elements apart. Setting Up the Initial Object You'll create a cloud and animate it to move to the position where it will morph into the letter O. 1.
Select the Cloud Morph layer, and then select the cloud graphic on the pasteboard.
2.
Choose Edit > Cut.
3.
Select frame 136 of the Cloud Morph layer, and press F7 to insert a blank keyframe.
4.
Choose Edit > Paste In Place.
5.
Select the Show As Outlines icon ( ) for the Cloud Morph layer. The cloud is outlined on the pasteboard, so that you can see objects behind it. [View full size image]
6.
Select frame 141 so that you can see the O on the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec11.htm (1 of 5) [13.06.2007 22:08:41]
Morphing Objects
7.
Select the cloud graphic on the pasteboard and move it so that it covers and is centered above the O in the word Out. To move an outlined object, you must click on the outline itself.
8.
Deselect the Show As Outlines icon for the Cloud Morph layer.
9.
Select frame 136 of the Cloud Morph layer, and then press Alt (Windows) or Option (Mac OS) and drag it to frame 132 to create a duplicate keyframe.
10. Select frame 132, and then select the cloud graphic. In the Transform panel, set the width and height to 20%, and press Enter or Return. In the Property inspector, select Brightness from the Color menu, and select 100%. Press Enter or Return to apply the values. 11. Select any frame between frames 132 and 136, and select Motion from the Tween menu in the Property inspector. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec11.htm (2 of 5) [13.06.2007 22:08:41]
Morphing Objects
12. Select frame 137 of the Cloud Morph layer, and press F6 to insert a keyframe. 13. Select the keyframe, and then select the cloud graphic. 14. Choose Modify > Break Apart. Choose Modify > Break Apart two more times so that the cloud appears as an editable shape on the Stage. Note When you import a symbol from Illustrator, it may be grouped multiple times. Each time you choose Modify > Break Apart, you separate one group or break apart one object.
Using Shape Tweens to Transform an Object You'll use shape tweens to transform the cloud into the O shape.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec11.htm (3 of 5) [13.06.2007 22:08:41]
Morphing Objects
1.
Select frame 140 of the Cloud Morph layer, and press F7 to insert a keyframe.
2.
Select frame 141 on the Title: O layer, and then select the O on the Stage.
3.
Choose Edit > Copy. Lock the Title: O layer so you don't select it by accident.
4.
Select the empty keyframe on frame 140 of the Cloud Morph layer.
5.
Choose Edit > Paste In Place.
6.
Select the O that you just pasted on the Stage, and choose Modify > Break Apart three times until the fill appears as a shape and the strokes are drawing objects. Click outside the O to deselect it.
7.
Select the inner stroke and delete it, and then select the outer stroke and delete it. Only the orange shape should remain.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec11.htm (4 of 5) [13.06.2007 22:08:41]
Morphing Objects
8.
Select any frame on the Cloud Morph layer between frames 137 and 140, and select Shape from the Tween menu in the Property inspector.
9.
Select frame 141 on the Cloud Morph layer, and press F7 to insert a blank keyframe. Scrub the Timeline to view the transition from the cloud to the letter O.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec11.htm (5 of 5) [13.06.2007 22:08:41]
Fading Objects In
Fading Objects In In Flash, an object's alpha value determines its transparency or opacity. You'll animate the alpha values for the letters U and T so that they start fully transparent and fade in to become opaque. 1.
Select frame 145 of the Title: U layer, and press F6 to insert a keyframe.
2.
Select any frame between frames 142 and 145 on the Title: U layer, and then select Motion from the Tween menu in the Property inspector.
3.
Select frame 142 in the Title: U layer, and then select the letter U on the Stage.
4.
In the Property inspector, select Alpha from the Color menu, and enter 25 for the percentage.
5.
Select frame 148 of the Title: T layer, and press F6 to insert a keyframe.
6.
Select any frame between frames 145 and 148, and select Motion from the Tween menu in the Property inspector.
7.
Select frame 145 in the Title: T layer, and then select the letter T on the Stage.
8.
In the Property inspector, select Alpha from the Color menu, and enter 25 for the percentage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec12.htm [13.06.2007 22:08:42]
Animating Motion on a Path
Animating Motion on a Path To animate an object along a path, first create a motion guide; Flash creates a separate layer for the guide. Then, draw the guide on the Stage. Finally, align the object with the guide. You'll use a motion guide to loop a spaceship across the Stage so that it appears to produce the puff of smoke that you animated to morph into the O. Creating a Motion Guide You can use a motion guide to draw just about any path for an object to follow on the Stage. You'll draw a motion guide that loops around once, flies through the O, and then continues off the Stage. 1.
Select the Spaceship layer, and then select the spaceship on the pasteboard.
2.
Choose Edit > Cut.
3.
Select frame 92 of the Spaceship layer, and press F7 to insert a blank keyframe. Then, choose Edit > Paste In Place.
4.
Right-click (Windows) or Control-click (Mac OS) the Spaceship layer, and choose Add Motion Guide. Flash adds a Guide: Spaceship layer above the Spaceship layer.
5.
Select frame 92 on the Guide: Spaceship layer, and press F7 to insert a blank keyframe. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec13.htm (1 of 4) [13.06.2007 22:08:43]
Animating Motion on a Path
6.
Select the Pencil tool (
), and specify a blac k stroke. Select the Smooth curve
option in the options area in the Tools panel. (
7.
).
With the Pencil tool, draw a path across the Stage that loops at least once and flies through the middle of the O in the word Out. Your path should look similar to the one in the following image.
Aligning an Object with a Motion Guide Once you've drawn the motion guide, you need to create motion tweens, and position the object at the beginning and the end of the motion guide.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec13.htm (2 of 4) [13.06.2007 22:08:43]
Animating Motion on a Path
1.
Select frame 140 of the Spaceship layer, and press F6 to insert a keyframe.
2.
Select any frame between frames 92 and 140, and select Motion from the Tween menu in the Property inspector.
3.
In the Property inspector, select Orient To Path, Sync, and Snap. [View full size image]
4.
Select frame 140 on the Spaceship layer, and then use the Selection tool to select the spaceship on the pasteboard. Place the spaceship at the end of the path so that it is off the Stage. Note The transformation point of an object, displayed as a white circle, snaps to the motion path.
5.
Select frame 92 on the Spaceship layer, and then select the spaceship on the pasteboard.
6.
Move the spaceship to the start of the motion guide, on the left side of the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec13.htm (3 of 4) [13.06.2007 22:08:43]
Animating Motion on a Path
7.
Scrub through the Timeline to find the frame just before the dip in the motion guide (approximately frame 125), and press F6 to insert a keyframe at that frame.
8.
Select any frame between the new keyframe and frame 140, and in the Property inspector, deselect Orient To Path. The Orient To Path option shifts the object so that it follows the path naturally. For example, the nose of the spaceship points up when it's climbing and down when it's falling. Deselect Orient To Path when you no longer need or want the object to change its angle.
9.
Choose Control > Test Movie to view the animation. You may want to make some adjustments to the motion guide. The smoke should appear to come from the spaceship, and then the smoke morphs into the O in the word Out. Your cartoon title page is complete. You've successfully animated text and objects— even changing a cloud into the letter O—to create an entertaining introduction to a whimsical character.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec13.htm (4 of 4) [13.06.2007 22:08:43]
Review
Review
Review Questions
1
How does a motion tween differ from a shape tween?
2
How do you create a shape tween?
3
What is a motion guide, and how do you create one?
4
How can you edit a nested symbol?
Review Answers
1
A motion tween creates animation frames for changes in an object's position, size, transparency, color, or other attributes. A shape tween creates animation frames to morph one object into another. Use a shape tween when the initial object has a different shape from the final object.
2
To create a shape tween, position the original object on the initial keyframe and the final object on the last keyframe, and then click a frame between the keyframes and select Shape from the Tween menu in the Property inspector. You can apply a shape tween to shapes you draw on the Stage, but to apply one to a group, instance, or bitmap image, you must first break the element apart.
3
A motion guide provides a path for an object to follow in the frames included in a motion tween. To create a motion guide, right-click (Windows) or Control-click (Mac OS) the layer that contains the object you're animating, and choose Add Motion Guide. Flash adds a guide layer to the Timeline. Insert a keyframe on the guide layer for the beginning of the motion guide, and then draw a path on the Stage. Create a motion tween on the object's layer, beginning on the same frame as the motion guide. In the Property Inspector, select Orient To Path, Sync, and Snap. Finally, place the object at the beginning of the motion guide for the first keyframe and at the end of the motion guide for the final keyframe.
4
To edit a nested symbol, double-click it in the Library panel. To edit it in context, double-click the symbol that contains it on the Stage, and then double-click the nested symbol.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch05lev1sec14.htm [13.06.2007 22:08:44]
6. Creating Interactive Files
6. Creating Interactive Files
Let your viewers in on the action with buttons, menus, and other interactive elements that encourage them to explore your site. Symbols and ActionScript work together to create consistent, effective user interfaces. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ● ● ● ● ●
Manipulate gradients Create buttons Create animated rollover states Duplicate buttons Use a single symbol for multiple images Edit nested symbols Create and use frame labels Name instances for use in ActionScript
This lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson06 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06.htm [13.06.2007 22:08:44]
Getting Started
Getting Started To begin, view the photography portfolio page that you'll create as you learn to make buttons interactive in Flash. 1.
Double-click the 06End.swf file in the Lesson06/06End folder to play the animation. The project is an interactive web page for a photographer. After the initial movie plays, viewers can click a button to see an enlarged version of a photo. In this lesson, you'll create a background and add interactive buttons for the photos. ActionScript is already included in the project file, but you'll set up the file so that the ActionScript works.
2.
Close the 06End.swf file.
3.
Double-click the 06Start.fla file in the Lesson06/06Start folder to open the initial project file in Flash. The file includes seven layers, and several assets are in the library. Frame 10 of the Actions layer already contains ActionScript.
4.
Choose File > Save As. Name the file 06_workingcopy.fla, and save it in the 06Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec1.htm [13.06.2007 22:08:45]
About Interactive Files
About Interactive Files Interactive files are files that change based on the viewer's actions. For example, when the viewer clicks a button, a larger version of an image is displayed. Or when the viewer clicks a menu item, a different page appears on the screen. Interactivity can be complex, requiring multiple calculations, or it can be as simple as changing a button's color. In Flash, you use ActionScript to achieve most interactivity. In this project, ActionScript loads the initial movie, as well as the appropriate photo when the viewer clicks a button. The ActionScript is already included in this file, so you just need to create the buttons, active selection marker, and other pieces that the ActionScript calls. You'll learn more about ActionScript 3.0 in Lesson 7.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec2.htm [13.06.2007 22:08:46]
Designing a Layout
Designing a Layout The featured image won't fill the entire screen. You'll create an interesting background fill, simple frames for the loaded images and the background, and a title to identify the page. Creating a Gradient Fill Create a gradient fill to add interest to the top of the Stage, and then flip a copy of it for the bottom of the Stage. 1.
Select the empty keyframe on frame 1 of the Background layer.
2.
Select the Rectangle tool. Select no stroke and the black-white linear gradient fill.
3.
Draw a rectangle on the Stage.
4.
Select the rectangle with the Selection tool.
5.
In the Property inspector, set the width to 800, height to 300, X to 0, and Y to 0. The gradient fills the top half of the Stage, which is 800 pixels by 600 pixels.
6.
Select 25% from the View pop-up menu on the Edit bar just above the Stage, so that you can see the entire gradient.
7.
Select the Gradient Transform tool (
), grouped with the Free Transform tool.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (1 of 9) [13.06.2007 22:08:47]
Designing a Layout
8.
Using the rotation icon in the upper-right corner of the gradient, rotate it 90 degrees, so that the gradient is black on the bottom and white on the top.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (2 of 9) [13.06.2007 22:08:47]
Designing a Layout
9.
Shorten the gradient by moving the bottom bar up, and then move the gradient center point so you see the gray transition only at the top. Your gradient should look similar to the one in the image below.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (3 of 9) [13.06.2007 22:08:47]
Designing a Layout
10. Select the gradient, and press F8 to convert it to a symbol. 11. In the Convert To Symbol dialog box, select Movie Clip, set the registration point to the upper-left corner, and name the symbol background_half. Click OK. 12. Select the background_half symbol on the Stage with the Selection tool, and choose Edit > Copy. 13. Choose Edit > Paste In Place. 14. Select the copy you just pasted, and choose Modify > Transform > Flip Vertical. 15. In the Property inspector, enter 600 for the Y value. Creating half the background and duplicating it makes it much easier to create symmetrical gradients. Editing the symbol automatically changes both instances, and keeps the file size small. 16. Select Show All from the View pop-up menu on the Edit bar above the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (4 of 9) [13.06.2007 22:08:47]
Designing a Layout
17. Lock the Background layer.
Adding a Simple Frame You'll create a 2-pixel frame that will appear around the content that loads, and then a 2pixel frame border around the entire movie. 1.
Select the empty keyframe on frame 1 of the Photo Frame layer.
2.
Select the Rectangle tool, and select the Object Drawing icon in the options area of the Tools panel.
3.
Select no fill and select #333333 for the stroke color.
4.
Draw a rectangle on the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (5 of 9) [13.06.2007 22:08:47]
Designing a Layout
5.
In the Property inspector, enter 2 for the stroke height, and then set the width to 734, the height to 404, the X value to 35, and the Y value to 144. Note You created a rectangle that is 4 pixels wider and taller than the content area specified in ActionScript, placed 2 pixels to the left and above it, to create a 2-pixel frame.
6.
Select the rectangle, and press F8 to convert the border to a symbol.
7.
In the Convert To Symbol dialog box, select Movie Clip and name it photo_frame. Click OK.
8.
Select frame 10 on the Photo Frame layer, and press F6 to insert a keyframe. [View full size image]
9.
Select any frame between frames 1 and 10, and select Motion from the Tween menu in the Property inspector.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (6 of 9) [13.06.2007 22:08:47]
Designing a Layout
10. Select frame 1 on the Photo Frame layer, and then select the instance of the photo_frame symbol on the Stage. 11. In the Transform panel, set the width and height to 20%, and press Enter or Return. 12. Unlock the Background layer, and select it. Click off the Stage to deselect the background gradients. 13. Select the Rectangle tool. Set the fill to none, and the stroke color to #999999. 14. Draw a rectangle on the Stage, and then set the following values in the Property inspector: stroke height=2 pixels, width=800, height=600, X=0, Y=0. 15. Lock the Background layer again. Adding a Title In this project, the title appears on the background of the page, no matter what else is displayed. 1.
Select frame 1 on the Title layer.
2.
Select the Text tool, and click an insertion point in the upper-left corner of the Stage.
3.
Type Leon Kritch Photography.
4.
Select all the text. In the Property inspector, select Static Text from the pop-up menu, select Arial for the typeface, and select 42 for the text size. Click the Left Align icon.
5.
Select just Leon Kritch, and change the text color to #FFCC00.
6.
Select just Photography, and change the text color to #333333.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (7 of 9) [13.06.2007 22:08:47]
Designing a Layout
7.
Select the text with the Selection tool. In the Property inspector, set the X value to 30 and the Y value to 10.
Creating a Selection Marker You'll create a small rectangle that will appear above the selected button. 1.
Select frame 10 of the Marker layer, and press F6 to insert a keyframe.
2.
Select the Rectangle tool; specify no stroke and a fill color of #FFCC00.
3.
Draw a small rectangle under the word Leon.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (8 of 9) [13.06.2007 22:08:47]
Designing a Layout
4.
Select the rectangle. In the Property inspector, enter the following values: width=100, height=4, X=37, and Y=73. [View full size image]
5.
With the rectangle selected, press F8 to convert it into a symbol.
6.
In the Convert To Symbol dialog box, select Movie Clip, and name the symbol marker. Click OK.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec3.htm (9 of 9) [13.06.2007 22:08:47]
Creating Buttons
Creating Buttons You can assign many different actions to buttons. In this project, each button displays a larger version of the button's image in the content area of the Stage. You'll create several symbols to achieve this: graphic, movie clip, and button symbols all play a role. A graphic symbol contains the images, and is set to display a particular frame. A movie clip symbol animates the Over state for the button, so that the image expands slightly when selected. The button symbol contains the graphic and movie clip symbols in its rollover states. You'll create one button with its symbols and rollover states, and then duplicate it to create additional buttons, which require only minor modifications. Creating a Graphic Symbol with Multiple Frames The basis of the button will be a graphic symbol that contains all the button images, each on its own frame in a single layer. Start by creating the graphic symbol, setting it to display only a single frame. Then, distribute the images to separate layers, align them so that they're stacked on top of each other, and move them to individual frames on the Graphics layer within the symbol. 1.
Select all the frames on the Assets layer, and drag them to the Buttons layer. All the images that were on the Assets layer are now on the Buttons layer.
2.
Delete the Assets layer.
3.
Select the Buttons layer.
4.
Select all the images on the pasteboard and drag them onto the Stage, beneath the word Leon.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (1 of 18) [13.06.2007 22:08:51]
Creating Buttons
5.
With all the images selected, press F8 to convert them into a symbol.
6.
In the Convert To Symbol dialog box, select Graphic, set the registration point to the upper-left corner, and name the symbol small_previews. Click OK. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (2 of 18) [13.06.2007 22:08:51]
Creating Buttons
7.
Select the small_previews symbol on the Stage. In the Property inspector, choose Single Frame from the pop-up menu next to the Swap button. Note The Single Frame option lets you display just one frame from a graphic symbol. You can display a different frame for each button, but use the same graphic symbol for all of them.
8.
Double-click the small_previews symbol to edit it.
9.
Select all the images, and choose Modify > Timeline > Distribute To Layers. Flash adds a layer for each image file. [View full size image]
10. Select all the images on the Stage. 11. Choose Window > Align to open the Align panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (3 of 18) [13.06.2007 22:08:51]
Creating Buttons
12.
In the Align panel, select To Stage (
) to align the objects relative to the Stage.
13. Select the Align Left Edge ( ) and Align Top Edge ( stacked on top of each other.
) icons. The images are
[View full size image]
14. In the Property inspector, set the X value to 37 and the Y value to 79. 15. Select Layer 1, and click the Insert Layer icon. Name the top layer Actions and rename Layer 1 Graphics. 16. Select frame 7 of the Actions layer and frame 7 of the Graphics layer, and then press F5 to insert frames.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (4 of 18) [13.06.2007 22:08:51]
Creating Buttons
17. Select all 7 frames on the Graphics layer, and press F7 to insert blank keyframes. [View full size image]
18. Select frame 7 of the Actions layer, and press F7 to insert a blank keyframe. 19. Choose Window > Actions to open the Actions panel. 20. Add a stop action by typing stop(); 21. Select frame 1 on the Home.bmp layer, and drag it to the first keyframe on the Graphics layer. 22. Drag frame 1 from the Photo1.bmp layer to the second keyframe on the Graphics layer, the Photo2.bmp layer to the third keyframe, and so on, until each image is on a separate keyframe in the Graphics layer. 23. Delete the Home.bmp layer and each of the other image layers, which are now empty. [View full size image]
24. Click Scene 1 to return to the main Timeline. Creating a Button Symbol You'll use the small_previews symbol as the basis for the button symbol, which will include rollover states. For the Down state, you'll change the brightness and add the sound of a camera shutter. For the Over state, you'll create a movie clip symbol that you'll animate to zoom in slightly when the button is selected. file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (5 of 18) [13.06.2007 22:08:51]
Creating Buttons
1.
Select the small_previews instance on the Stage, and press F8 to convert it to a button symbol, which will include frames for rollover states.
2.
In the Convert To Symbol dialog box, select Button, and name the symbol home_button. Click OK.
3.
Double-click the home_button symbol on the Stage to edit it.
4.
Click the Insert Layer icon. Name the top layer Sound, and rename Layer 1 Graphics. [View full size image]
5.
Select the Hit frames for both layers, and press F5 to add frames. Because the Hit frame contains the same content as the Up frame, the hit area will be defined by the symbol shape.
6.
Select the Down frame in the Sound layer, and press F7 to insert a blank keyframe.
7.
Select the keyframe in the Down frame of the Sound layer, and in the Property inspector, select Camera_shutter.wav from the Sound menu. Select Start from the Sync menu. The sound of a camera shutter will play when a viewer clicks the button. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (6 of 18) [13.06.2007 22:08:51]
Creating Buttons
8.
Select the Over and Down frames in the Graphics layer, and press F6 to insert keyframes.
9.
Select the Down frame on the Graphics layer, and then select the graphic symbol on the Stage.
10. In the Property inspector, select Brightness from the Color menu, and select 70 for the percentage. Move the playhead between the Up and Down frames to see the effect. When the button is selected, its brightness will fade. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (7 of 18) [13.06.2007 22:08:51]
Creating Buttons
Animating a Rollover State In the final website, a button's image is magnified when the mouse rolls over it. To animate the Over state for the thumbnail button, you need to create a movie clip symbol. 1.
Select the Over frame on the Graphics layer, and then select the graphic symbol on the Stage. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (8 of 18) [13.06.2007 22:08:51]
Creating Buttons
2.
Press F8 to convert it to a symbol. In the Convert To Symbol dialog box, select Movie Clip, set the registration point to the upper-left corner, and name the symbol home_over_anim. Click OK.
3.
Double-click the home_over_anim symbol on the Stage to edit it.
4.
Click the Insert Layer icon 3 times. Name the layers, from top to bottom, Actions, Sound, Mask, and Image. [View full size image]
5.
Select frame 9 on the Actions layer. Press the Shift key, and select frame 9 of the Image layer, so that frame 9 is selected on all four layers. Then, press F5 to add frames.
6.
Select frame 9 on the Actions layer, and press F7 to insert a blank keyframe.
7.
Choose Window > Actions to open the Actions panel. Enter a stop action by typing stop();
8.
Select frame 1 in the Sound layer. In the Property inspector, select Camera_zoom. wav from the Sound menu. Select Start from the Sync menu. The sound of a camera zoom lens will play when the viewer moves the mouse over a button. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (9 of 18) [13.06.2007 22:08:51]
Creating Buttons
9.
Select frame 1 on the Mask layer. Select the Rectangle tool, with no stroke and a bright green fill.
10. Draw a rectangle over the image on the Stage. It should be the same size as the photo. [View full size image]
11. Select the rectangle. In the Property inspector, assign the following values: width=100, height=55, X=0, and Y=0. 12. Lock the Mask layer. Click the outline icon for the Mask layer to display the mask in outline mode. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (10 of 18) [13.06.2007 22:08:51]
Creating Buttons
The mask restricts the part of the image that is visible. Even when the thumbnail is magnified, only the part of it that fits the dimensions of the button will be visible. 13. Select frame 9 on the Image layer, and press F6 to insert a keyframe. Then, select any frame between frames 1 and 9, and in the Property inspector, select Motion from the Tween menu. 14. Select frame 5 on the Image layer, and press F6 to insert a keyframe. Select the graphic on the Stage, and in the Transform panel, enter 150% for the width and height. 15. In the Property inspector, set the X value to -75 and the Y value to -132. Then select Brightness from the Color menu, and select 60 for the percentage. Note If the Transform panel isn't open, choose Window > Transform. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (11 of 18) [13.06.2007 22:08:51]
Creating Buttons
16. Right-click (Windows) or Control-click (Mac OS) the Mask layer. Select Mask from the context menu. Flash indents the Image layer below the Mask layer, and locks them both, so the mask is applied. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (12 of 18) [13.06.2007 22:08:51]
Creating Buttons
17. Click Scene 1 to return to the main Timeline. 18. Choose Control > Enable Simple Buttons. 19. Click the button. You should hear the shutter sound and see the Down state of the button. 20. Choose Control > Enable Simple Buttons again to deselect it. Creating Additional Buttons Now that you've created one button, the others are much easier. You'll duplicate the button and the animation symbol for the Over state, and then modify them to display a different frame in the small_previews symbol. 1.
In the Library panel, right-click (Windows) or Control-click (Mac OS) the home_button symbol. Select Duplicate from the context menu.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (13 of 18) [13.06.2007 22:08:51]
Creating Buttons
2.
In the Duplicate Symbol dialog box, select Button, and name it section1_button. Click OK.
3.
In the Library panel, right-click or Control-click the home_over_anim symbol, and select Duplicate from the context menu.
4.
In the Duplicate Symbol dialog box, select Movie Clip, and name the new symbol section1_over_anim. Click OK.
5.
In the Library panel, double-click the icon for the section1_over_anim symbol to edit it.
6.
Unlock the Image layer, and select frame 1 on the Image layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (14 of 18) [13.06.2007 22:08:51]
Creating Buttons
7.
Select the instance of the small_previews symbol on the Stage.
8.
In the Property inspector, type 2 in the First box to display the second frame. [View full size image]
9.
Select frame 9 on the Image layer, select the instance of the small_previews symbol on the Stage, and type 2 in the First field in the Property inspector.
10. Select frame 5 on the Image layer, select the instance of the small_previews symbol on the Stage, and type 2 in the First field in the Property inspector. 11. In the Library panel, double-click the section1_button symbol to edit it. 12. Select the Up frame on the Graphics layer, select the instance of the small_previews symbol on the Stage, and then type 2 in the First field in the Property inspector. 13. Select the Down frame, select the instance of the symbol on the Stage, and type 2 in the First field in the Property inspector. 14. Select the Over frame in the Graphics layer, select the instance of the home_over_anim symbol on the Stage, and click Swap in the Property inspector. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (15 of 18) [13.06.2007 22:08:51]
Creating Buttons
15. In the Swap Symbol dialog box, select section1_over_anim, and click OK.
16. Click Scene 1 to return to the main Timeline. 17. Drag an instance of the section1_button symbol from the Library panel onto the Stage. Place it next to the instance of the home_button symbol.
18. Choose Control > Enable Simple Buttons. Test both buttons, and then choose Control > Enable Simple Buttons again to deselect it. Note To save time, we've duplicated the buttons for you. If you prefer to duplicate the buttons yourself, repeat steps 1-15 for each of the remaining images.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (16 of 18) [13.06.2007 22:08:51]
Creating Buttons
19. Drag an instance of each button from the Section Buttons folder in the Library panel into position on the Stage. Arrange them from left to right, next to the buttons you've already positioned. Be sure to drag the buttons and not the animated movie clips from the Section Buttons folder.
Aligning Buttons The buttons are all on the Stage. Now you just need to line them up tidily above the photo frame. 1.
Select frame 10 in the Buttons layer so the photo frame is full-size on the Stage.
2.
Align the left edge of the home button with the left edge of the photo frame on the Stage. Align the right edge of the section 6 button with the right edge of the photo frame.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (17 of 18) [13.06.2007 22:08:51]
Creating Buttons
3.
Select all seven buttons. In the Align panel, deselect To Stage, click the Distribute Horizontal Center button, and then click the Align Top Edge button.
4.
With all the buttons still selected, in the Property inspector, enter 77 for the Y value.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec4.htm (18 of 18) [13.06.2007 22:08:51]
Activating the Buttons
Activating the Buttons You've created buttons that include rollover states. Frame 10 of the Actions layer in the main Timeline already includes ActionScript that listens for the button clicks and displays the appropriate image when the button is released. Now the buttons need to have the names used in the ActionScript. To call the button, the ActionScript refers to an instance name. You'll name each button instance to match the ActionScript references. You'll also animate the marker symbol you created earlier to identify the active selection. Naming Instances Name each button instance so that it can be referenced by ActionScript. 1.
Select the Buttons layer, and then click the pasteboard to deselect the buttons.
2.
Select the first button on the Stage.
3.
Type btn1_btn in the Instance Name box. [View full size image]
4.
Name each of the other buttons btn2_btn, btn3_btn, btn4_btn, btn5_btn, btn6_btn, and btn7_btn.
5.
Lock the Buttons layer.
Labeling Frames You can label frames in Flash to make it easier to reference frames in ActionScript, and to give you more flexibility. If you want to change the frame at which an action occurs, you can move the label, rather than having to locate every reference to the frame number in the script. You'll label frames to use when animating the selection marker for the buttons. 1.
Select frame 10 on the Marker layer. Then select the marker on the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec5.htm (1 of 7) [13.06.2007 22:08:53]
Activating the Buttons
2.
In the Property inspector, type marker_mc in the Instance Name box. [View full size image]
3.
Double-click the marker_mc instance on the Stage to edit the symbol.
4.
Click the Insert Layer icon.
5.
Name the new layer Labels, and rename Layer 1 Active Selection. [View full size image]
6.
Select frame 49 in both the Labels and Active Selection layers, and press F5 to insert frames.
7.
Select frame 7 in the Labels layer, and press F6 to insert a keyframe.
8.
In the Labels layer, add keyframes to frames 14, 21, 28, 35, and 42. [View full size image]
9.
Select frame 1 on the Labels layer.
10. In the Property inspector, type home in the Frame Label box.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec5.htm (2 of 7) [13.06.2007 22:08:53]
Activating the Buttons
11. Label the remaining keyframes section1, section2, section3, and so on. [View full size image]
[View full size image]
Animating the Active Selection Marker You've labeled the frames so that each section represents one of the buttons. Now, you'll move the active selection marker to correspond with each button. In order to move the marker, you must first convert it to a symbol that you can animate within the marker symbol. 1.
Select frame 1 of the Active Selection layer, and select the marker symbol on the Stage.
2.
Press F8 to convert it to a symbol. Select Movie Clip, and name the symbol active_selection, and then click OK.
3.
Select the active_selection symbol on the Stage, and align its left edge with the left edge of the home button. Nudge it so that it is slightly above the button.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec5.htm (3 of 7) [13.06.2007 22:08:53]
Activating the Buttons
4.
Select frame 7 in the Active Selection layer, directly beneath the section1 label. Press F6 to insert a keyframe.
5.
Select the active_selection symbol on the Stage, and press the Shift key as you move it over the second button. Pressing the Shift key constrains the movement so it's easier to keep the object horizontal.
6.
Select frame 14 in the Active Selection layer, press F6 to insert a keyframe, and move the active_selection symbol over the third button.
7.
Repeat step 6 to move the active_selection symbol over the fourth button for frame 21, the fifth button for frame 28, the sixth button for frame 35, and the last button for frame 42. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec5.htm (4 of 7) [13.06.2007 22:08:53]
Activating the Buttons
8.
Select frame 1 in the Labels layer, and choose Windows > Actions to open the Actions panel. It's good practice to create a separate Actions layer for ActionScript, so that you can quickly find, edit, and troubleshoot the script. However, you can apply script to a frame in any layer. Because you're only creating a simple stop action, you don't need a separate Actions layer in this symbol's Timeline. When you apply ActionScript, Flash adds a lowercase a to the frame.
9.
Enter a stop action in the Actions panel by typing stop();
10. Close the Actions panel, and click Scene 1 to return to the main Timeline. 11. Choose Control > Test Movie. Click each button. When the button is released, the appropriate photo should load in the center of the Stage.
The website is interactive, so viewers can see each photo up close and return to the initial movie file. You created the background, the buttons, the selection marker, and the other elements that worked with ActionScript to make it possible. In the next chapter, you'll learn how to write your own ActionScript.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec5.htm (5 of 7) [13.06.2007 22:08:53]
Activating the Buttons
The ActionScript Behind the Scenes You created the symbols, named the instances, and put everything into place for the ActionScript. Here's how the ActionScript used the instance names you put in place. You'll learn about ActionScript in Lesson 7. When the event listener recognizes that the first frame is playing (that is, that the website has been opened), ActionScript loads the movie home.swf at the coordinates of the photo frame. Then it moves the marker_mc instance (the active selection marker you created) to the frame labeled "home." At that frame, you positioned the marker above the first button. stop(); var myloader:Loader = new Loader(); addEventListener(Event.ENTER_FRAME, home); function home(e:Event):void { removeEventListener(Event.ENTER_FRAME, home); var request:URLRequest = new URLRequest("home.swf"); myloader.load(request); addChild(myloader); myloader.x=36; myloader.y=145; marker_mc.gotoAndStop("home"); }
Each remaining section of the script activates one button. An event listener listens for the mouse click, and then ActionScript loads the appropriate photo at the photo frame coordinates, and it moves the marker_mc instance to the corresponding frame label. Note that the buttons are referred to by their instance names (btn1_btn, and so on), and that the marker is referred to by its instance name, marker_mc. btn1_btn.addEventListener(MouseEvent.CLICK, image1); function image1(event:MouseEvent):void { var request:URLRequest = new URLRequest("home.swf"); myloader.load(request); addChild(myloader); myloader.x=36; myloader.y=145; marker_mc.gotoAndStop("home"); }
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec5.htm (6 of 7) [13.06.2007 22:08:53]
Activating the Buttons
btn2_btn.addEventListener(MouseEvent.CLICK, image2); function image2(event:MouseEvent):void { var request:URLRequest = new URLRequest("photo1.jpg"); myloader.load(request); addChild(myloader); myloader.x=36; myloader.y=145; marker_mc.gotoAndStop("section1"); }
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec5.htm (7 of 7) [13.06.2007 22:08:53]
Review
Review
Review Questions
1
How can you label frames, and when is it useful?
2
Which tool lets you change the direction for a gradient?
3
How can you test a button on the Stage?
4
How do you name an instance, and why is it necessary?
5
Describe a quick way to create multiple layers, each containing a separate object.
Review Answers
1
To label a frame, create a keyframe for it, and then type a name in the Frame Label box in the Property inspector. You can label frames in Flash to make it easier to reference frames in ActionScript, and to give you more flexibility. If you want to change the frame at which an action occurs, you can move the label, rather than having to locate every reference to the frame number in the script.
2
The Gradient Transform tool, grouped with the Free Transform tool, lets you rotate, resize, or change the center point for a gradient.
3
To test a button on the Stage, choose Control > Enable Simple Buttons.
4
To name an instance, select it on the Stage, and then type in the Instance Name box in the Property inspector. You need to name an instance if you plan to refer to it in ActionScript.
5
To quickly move objects to individual layers, select the objects on the Stage, and then choose Modify > Timeline > Distribute To Layers.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch06lev1sec6.htm [13.06.2007 22:08:54]
7. ActionScript Basics
7. ActionScript Basics [View full size image]
ActionScript 3.0 dramatically extends the functionality of Flash. It's a robust language, worth getting to know whether you want to create simple interactivity or complex applications. Lesson Overview
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07.htm (1 of 2) [13.06.2007 22:08:55]
7. ActionScript Basics
In this lesson, you'll learn how to do the following: ● ● ● ● ● ● ● ●
Create basic scripts using ActionScript Use the Actions panel Use Script Assist Add a stop action Work with conditional statements Load data from a URL Work with event listeners Assign actions to buttons
This lesson will take approximately an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson07 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07.htm (2 of 2) [13.06.2007 22:08:55]
Getting Started
Getting Started In this project, you'll add scripting to a website that promotes the DVD for which you created an interface in Lesson 3. 1.
Open the 07End.swf file in the Lesson07/07End folder to see the final website. Click each button; the text in the center of the page changes to describe the cast, crew, and release dates for the movie. Close the file. You'll create the script that loads the appropriate text when each button is clicked: home, cast, crew, and release dates. Additionally, you'll use a conditional statement to loop to the first frame until the movie finishes loading.
2.
In Flash, choose File > Open. Select the 07Start.fla file in the Lesson07/07Start folder, and click Open. All of the creative work is done for you. You just need to add the script to load the file and make the buttons function properly.
3.
Choose File > Save As. Name the file 07_workingcopy.fla, and save it in the 07Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec1.htm [13.06.2007 22:08:55]
Working with ActionScript 3.0
Working with ActionScript 3.0 Adobe Flash CS3 uses ActionScript 3.0, a robust scripting language, to extend the functionality of Flash. While ActionScript 3.0 may seem intimidating to you if you're new to scripting, you can get great results with some very simple scripts. As with any language, you'll do best if you take the time to learn the syntax and some basic terminology. About ActionScript ActionScript, similar to JavaScript, lets you add more interactivity to Flash animations. In this lesson, you'll use ActionScript to attach behaviors to buttons, load text files from a URL, and stop a preloader when the main file has finished loading. As you've done in earlier lessons, you can use ActionScript for such simple tasks as stopping an animation from looping, but you can also use it for much more complex programming tasks. You don't have to be a scripting expert to use ActionScript. In fact, for common tasks, you may be able to copy script that other Flash users have shared. However, you'll be able to accomplish much more in Flash— and feel more confident using the application—if you understand how ActionScript works. This lesson isn't designed to make you an ActionScript expert. Instead, it introduces common terms and syntax, walks you through a simple script, and provides an introduction to the ActionScript language. Additionally, the ScriptAssist.mov movie in the Movies\Lynda.com folder on this book's CD provides an introduction to ActionScript, and especially to its Script Assist feature. If you've used scripting languages before, the documentation included in the Flash Help menu may provide all the additional guidance you need to use ActionScript proficiently. If you're new to scripting and want to learn ActionScript, you may find an ActionScript 3.0 book for beginners helpful. Understanding Scripting Terminology Many of the terms used in describing ActionScript are similar to terms used for other scripting languages. The following terms are used frequently in ActionScript documentation: Variable
A variable represents a specific piece of data, which may or may not be constant. When you create, or declare, a variable, you also assign a data type, which determines what kind of data the variable can represent. For example, a String variable holds any string of alphanumeric characters, while a Number variable must contain a number. Suppose you wanted to assign a variable to count the number of frames in a movie. You file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec2.htm (1 of 5) [13.06.2007 22:08:57]
Working with ActionScript 3.0
could name the variable frames, assign an initial value of 0, and set the script to add 1 when it moves to another frame. var frames = 0; currentframes = frames + 1;
Note Variable names must be unique, and they are case-sensitive. The variable frames is not the same as the variable Frames. Variable names can contain only numbers, letters, and underscores, and they cannot begin with a number. For example, you can name a variable frames_2 or frames2, but not 2frames or frames 2.
Keyword
In ActionScript, a keyword is a reserved word that is used to perform a specific task. For example, var is a keyword, used to create a variable. You can find a complete list of keywords in Flash Help. Because these words are reserved, you can't use them as variable names or in other ways. ActionScript always uses them to perform their assigned tasks. Parameters
Parameters provide specific details and are the values between parentheses () in a line of code. For example, in the code gotoAndPlay(3); the parameter instructs the script to go to frame 3. Function
A function is a group of statements that you can refer to by name. Using a function makes it possible to run the same set of statements without having to type them repeatedly into the same script. For example, you could script a button to scale a movie clip by a certain percentage. The script might contain three lines. That's fine for one button, but if you want five buttons to perform the same task, you can create a function that contains three lines, and then refer to the function name to apply those lines of code for each button. Class
In ActionScript 3.0, every object is defined by a class, which is an abstract representation of an object. You've already worked with MovieClip and Button classes in Flash. A class is a category of objects that share the same methods and properties. For example, if Dog is a class, its properties include four legs, fur, and a tail. file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec2.htm (2 of 5) [13.06.2007 22:08:57]
Working with ActionScript 3.0
ActionScript contains more than 100 built-in classes, which are the predefined data types you use to make things work. To access the methods and properties associated with a class, you have to create an instance of the class by declaring the variable and setting its data type. Scope
The scope defines the area in your Flash file in which a variable can be referenced: local, global, and timeline. Local variables are referenced only in a certain area, such as a frame or a function. As soon as that area stops executing, the local variable no longer exists. In a function, a local variable is declared between the curly brackets {}. Global variables are available anywhere at any time to anything. You can declare a global variable and then use it in other frames as well as in other SWF files or movie clips that are loaded into the main movie file. Timeline variables are available only to any script within the same Timeline. After a variable is declared on a Timeline, it is available to all the frames that follow. Methods
Methods are the keywords that result in action. For example, two methods associated with the MovieClip class are stop() and gotoAndPlay(). Properties
Properties describe the object in a class. For example, the properties of a movie clip include its height and width, x and y coordinates, and scale. Using Proper Scripting Syntax If you're unfamiliar with program code or scripting, ActionScript code may be challenging to decipher. Once you understand the basic syntax, which is the grammar and punctuation of the language, you'll find it easier to follow a script. ●
●
●
● ●
The semicolon at the end of the line tells ActionScript that it has reached the end of the code line and to go to the next line in the code. As in English, every open parenthesis must have a corresponding close parenthesis, and the same is true for brackets and curly brackets. If you open something, you must close it. The dot operator (.) provides a way to access the properties and methods of an object. Type the instance name, followed by a dot, and then the name of the property or method. Whenever you're entering a string or the name of a file, use quotation marks. You can add comments that ActionScript won't read to remind yourself or others what you are accomplishing with different parts of the script. To add a comment for
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec2.htm (3 of 5) [13.06.2007 22:08:57]
Working with ActionScript 3.0
a single line, start it with two slashes (//). To type a multi-line comment, start it with /* and end it with */.
●
●
●
Flash provides assistance in the following ways as you write scripts in the Actions panel: Words that have specific meanings in ActionScript, such as keywords and statements, appear in blue as you type them in the Actions panel. Words that are not reserved in ActionScript, such as variable names, are in black. Strings are in green. Comments, which ActionScript ignores, are in gray. As you work in the Actions panel, Flash can detect the action you are entering and display a code hint. There are two types of code hints: a tooltip that contains the complete syntax for that action, and a pop-up menu that lists possible ActionScript elements. To check the syntax of a script you're writing, click the AutoFormat icon ( ) (which will also format the script according to conventions so that it is easier for ). Syntax errors are listed in the others to read) or click the Check Syntax icon ( Compiler Errors panel.
Navigating the Actions Toolbox The Actions toolbox gives you quick access to the core elements of ActionScript. It groups them by category. To add an element to your script, double-click it in the toolbox. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec2.htm (4 of 5) [13.06.2007 22:08:57]
Working with ActionScript 3.0
There are several categories listed in the Actions toolbox. The Top Level category lists many common classes; if you select a class, you can access its methods and properties. Browse the Top Level and Language Elements categories to get a feel for what's included. If you know you need a particular set of code, but aren't sure how to format it, you can find it listed alphabetically in the Index category. For example, you can find an If statement by clicking Language Elements > Statements, Keywords & Directives > Statement > If; or simply Index > If. You don't need to use the toolbox to add code to your script, but it can help you ensure that you're using the code correctly.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec2.htm (5 of 5) [13.06.2007 22:08:57]
Working with Conditional Statements
Working with Conditional Statements A conditional statement requires the script to determine whether something is true or false, and then to act based on that determination. You can use conditional statements for many purposes. In this lesson, you'll use one to determine whether the movie has finished loading. You could also use a conditional statement to evaluate input from a user (such as a password, survey answer, or button click) and to act on that input. About Conditional Statements The most common type of conditional statement is the if statement. The if statement checks a value or expression in its parentheses. If the value is true, the lines of code in curly brackets are carried out; otherwise, they are ignored. You can add an else statement to provide alternative instructions if the condition is not true. Add methods within the curly brackets after the if and else statements to give the script instructions. For example, the following script checks for a proper password. If the password is wrong, the script goes to a frame labeled Rejection; if the password is correct, it goes to a frame labeled Acceptance. The script uses an if statement that determines whether the password is equal to null; a gotoAndStop() method that is in effect if the if statement is true; an else statement that determines whether the password is equal to Tom; and a gotoAndPlay() method that is in effect if the else statement is true. if(password == null) { gotoAndStop("Rejection"); } else if (password = "Tom") { gotoAndPlay ("Acceptance"); }
Adding an If Statement Start by adding an if statement to frame 2 on the Actions layer. You're adding the if statement to frame 2 so that the movie will loop back to frame 1 if the full movie hasn't loaded yet. You'll use the Actions toolbox to add an if statement that determines whether the number of bytes loaded equals the total number of bytes in the movie. Then you'll add an else statement, which will be active if the if statement is false.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec3.htm (1 of 5) [13.06.2007 22:08:59]
Working with Conditional Statements
1.
Select frame 2 in the Actions layer. [View full size image]
2.
Press F6 to insert a keyframe.
3.
Choose Window > Actions to open the Actions panel. To open the Actions panel quickly, press F9 (Windows) or Option +F9 (Mac OS).
4.
In the Actions toolbox, click Language Elements > Statements, Keywords & Directives > Statement.
5.
Double-click the if statement to add it to the Script pane in the Actions panel. The word if appears with open parentheses following it. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec3.htm (2 of 5) [13.06.2007 22:08:59]
Working with Conditional Statements
6.
In the open parentheses of the if statement, type the following so that ActionScript will determine whether the movie has completely loaded: this.bytesLoaded==this.bytesTotal
Note The == operator compares the values surrounding it to determine whether it's true or false. If the condition is true, the script performs an action; you'll add an else statement to provide an action if the condition is false. 7.
After the closing bracket, add an else statement by typing else{}
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec3.htm (3 of 5) [13.06.2007 22:08:59]
Working with Conditional Statements
8.
Click the Auto Format ( ) button to format the script. Auto Format shifts the brackets, and it verifies that there are no syntax errors. Note If errors are reported, compare your script with the script in the following image. You can also open the 07End.fla file, select frame 2 in the Actions layer, and view the ActionScript in the Actions panel. [View full size image]
Adding Methods to the Statement Remember that methods create action. So far, you've created the if and else statements to determine whether the movie has loaded. Now you need to add the actions the script will perform based on those conditions. If the movie has fully loaded, you simply want it to play; if it hasn't, you want the script to return to frame 1. 1.
Inside the first set of brackets, following this.bytesTotal, type play();
2.
Inside the set of brackets following else, type gotoAndPlay(1);
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec3.htm (4 of 5) [13.06.2007 22:08:59]
Working with Conditional Statements
3.
Click the Auto Format ( ) button to format the script. It shifts the script text to match that in the image below, and it verifies the syntax, as well. [View full size image]
The conditional statement determines how long to play the preloader; it loops to the first frame until the movie has loaded. You don't need a preloader when you're streaming a movie and it does not rely on ActionScript. Then the movie plays as it streams.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec3.htm (5 of 5) [13.06.2007 22:08:59]
Adding a Stop Action
Adding a Stop Action You've used stop actions in previous lessons. A stop action simply stops the movie from continuing; in this case, you'll use it to stop the movie from continuing to loop once the movie has fully loaded. 1.
Select frame 3 in the Actions layer. [View full size image]
2.
Press F6 to insert a keyframe.
3.
In the Actions panel, type stop();
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec4.htm [13.06.2007 22:08:59]
Using Variables
Using Variables Variables represent data, and their values can change. You'll use the variable fileName to identify the text file that the script should load when a button is clicked. The variable's value will change for each button, so that a different file is loaded each time. About Script Assist Some actions are simple, such as stop actions. But others require parameters, and if you're unfamiliar with ActionScript, you may have difficulty remembering which options are available—or required—for each type of action. Script Assist mode prompts you to add the methods, parameters, or variables related to the action, and then it assembles the information using the correct syntax for you. Script Assist won't write the script for you. You still have to know what you want to do and which variables, methods, or functions to use. However, it can help you put the pieces together coherently, so that you don't have to return to the script multiple times to troubleshoot syntax errors. To use Script Assist, click Script Assist in the Actions panel. Then, double-click an item in the Actions toolbox to add it to the Script pane. The upper section of the Actions panel displays fields and options that are available for that item. Select options and enter values as appropriate for your script. You'll use Script Assist in the following section, as you declare a variable. Declaring a Variable Before you can use a variable, you need to declare it. To declare a variable, you use the var keyword, name the variable, and assign a value to it. You'll use Script Assist to declare the variable fileName with the value content_home.txt. Content_home.txt is the name of the text file ActionScript imports when the movie first runs or when the Home button is clicked. 1.
Click Script Assist in the Actions panel to enter Script Assist mode.
2.
In the Actions toolbox, click Language Elements > Statements, Keywords & Directives > Definition Keyword.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec5.htm (1 of 3) [13.06.2007 22:09:00]
Using Variables
3.
Double-click the var keyword to add it to the Script pane. The Script Assist pane displays three fields: Variables, Type, and Attributes. [View full size image]
4.
In the Variables field, type fileName = "content_home.txt"
As you type, the proper syntax appears in the Script pane below. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec5.htm (2 of 3) [13.06.2007 22:09:00]
Using Variables
5.
Select String from the Type menu. [View full size image]
6.
Click Script Assist to exit Script Assist mode.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec5.htm (3 of 3) [13.06.2007 22:09:00]
Downloading Data from a URL
Downloading Data from a URL There are different ways to load data from external files, such as a SWF file or a website, into a movie. One common way is to use the URLLoader and URLRequest classes. About the URLLoader and URLRequest Classes The URLLoader class downloads data from a URL. It is useful for downloading text files, XML, or other information to be used in a dynamic, data-driven application. A URLLoader object downloads all of the data from a URL before making it available to ActionScript. The URLRequest class captures all of the information in a single HTTP request. URLRequest objects are passed to the load() method of URLLoader to initiate the URL download. Using URLLoader and URLRequest Classes You'll use the URLRequest class to capture the data from the text file and pass it to the URLLoader class, which will load it onto the page. To use the classes, you'll first create variables that you can refer to later in the script. 1.
With frame 3 of the Actions layer still selected, type the following line in the Actions panel to create a loader variable for a URLLoader object: var loader:URLLoader = new URLLoader();
Note Press Enter or Return after each line to move to the next line in the Actions panel. 2.
Create another variable for the URLRequest object: var requestURL:URLRequest = new URLRequest(fileName);
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec6.htm (1 of 2) [13.06.2007 22:09:01]
Downloading Data from a URL
3.
Use the variables to request and load the URL data: loader.load(requestURL);
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec6.htm (2 of 2) [13.06.2007 22:09:01]
Working with Events
Working with Events An event is something that is initiated by a button click, a key press, or the end of a video. An event listener, also called an event handler, is a function that is executed in response to specific events. An EventDispatcher object notifies the event listener of an event. You'll add an EventDispatcher object and an event listener to recognize and respond to the button click and load the appropriate text file. Adding an Event Listener and Function To make the loaded data available, you need to add an event listener to the URLLoader object you created earlier. You'll use the Event.COMPLETE type of event listener, which means that it will be dispatched when the content has been completely loaded. Then, define a function that will be called when the event occurs. The function uses the loader you created earlier to load the text. Finally, create a function to handle the data and pass it to the text field where you want it to appear. 1.
In the Actions panel, type loader.addEventListener(Event.COMPLETE,completeHandler);
2.
In the Actions panel, type function completeHandler(event:Event):void { var loader:URLLoader = URLLoader(event.target); var pageText:String = loader.data; this.pageText_txt.text = pageText; }
Note Be sure to include the final curly bracket, or the function won't work. 3.
Choose Control > Test Movie. The page content is loaded from the Content_home. txt file.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec7.htm (1 of 3) [13.06.2007 22:09:02]
Working with Events
If you receive an error, check to make sure you've typed the script correctly. Refer to the error message to see which line of the script contains the error. You can refer to the lines of script in the 07End.fla file; you can even copy the lines of script from that file and paste them into the Actions panel in your project file.
[View full size image]
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec7.htm (2 of 3) [13.06.2007 22:09:02]
Working with Events
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec7.htm (3 of 3) [13.06.2007 22:09:02]
Using Events to Script Buttons
Using Events to Script Buttons In ActionScript 3.0, you add all code to buttons dynamically. You'll use another event listener to respond to a mouse click on one of the buttons (named b1, b2, b3, and b4). You'll create a function that updates the URLLoader object you created earlier, identifying the appropriate filename for each button, and you'll use the event listener type MouseEvent.CLICK to call the function. Note If you have used ActionScript 2.0, you may have applied the on(release) method to the buttons themselves, but that is not possible in ActionScript 3.0.
1.
In the Actions panel, add another event listener to the script: b1.addEventListener(MouseEvent.CLICK, b1Listener);
2.
Type the following lines to add event listeners to the other buttons, as well: b2.addEventListener(MouseEvent.CLICK, b2Listener); b3.addEventListener(MouseEvent.CLICK, b3Listener); b4.addEventListener(MouseEvent.CLICK, b4Listener);
3.
To create the function that will be called when the first button is clicked, type the following: function b1Listener(event:MouseEvent):void { loadFile("content_home.txt"); }
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec8.htm (1 of 5) [13.06.2007 22:09:03]
Using Events to Script Buttons
4.
Create the functions for the other buttons: function b2Listener(event:MouseEvent):void { loadFile("content_cast.txt"); } function b3Listener(event:MouseEvent):void { loadFile("content_crew.txt"); } function b4Listener(event:MouseEvent):void { loadFile("content_release_dates.txt"); }
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec8.htm (2 of 5) [13.06.2007 22:09:03]
Using Events to Script Buttons
5.
Create the loadFile function by typing the following: function loadFile(fileName:String):void{ requestURL.url = fileName; loader.load(requestURL); }
Note The loadFile function expects to find a string and passes that string to the URLRequest object. The URLRequest object finds that file, gathers the data, and passes it to the loader, which displays the text on the page. 6.
Choose Control > Test Movie to see the final project. Click each button to see the appropriate text appear.
If you receive an error, don't despair. You may simply have left out a space, semicolon, or parenthesis. Refer to the error message to see which line contains the error. Compare your script with the one in the 07End.fla file to see how they differ. You can copy the lines of script from that file and paste them into the Actions panel in your project file.
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec8.htm (3 of 5) [13.06.2007 22:09:03]
Using Events to Script Buttons
With ActionScript 3.0, you were able to keep the movie from playing until it had loaded and then load different text files depending on the selected button. You'll use conditional statements, event handlers, and data loaders frequently as you become more familiar with ActionScript. file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec8.htm (4 of 5) [13.06.2007 22:09:03]
Using Events to Script Buttons
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec8.htm (5 of 5) [13.06.2007 22:09:03]
Review
Review
Review Questions
1
What is a variable, and how do you declare one?
2
What is a function?
3
How can you add comments that will be ignored when the script is run?
4
What is a conditional statement?
5
What is an event? What is an event listener?
Review Answers
1
A variable represents a specific piece of data, which may or may not be constant. Before you can use a variable, you need to declare it. To declare a variable, you use the var keyword, name the variable, and assign a value to it.
2
A function is a group of statements that you can refer to by name. Using a function makes it possible to run the same set of statements without having to type them repeatedly into the same script.
3
You can add comments that ActionScript won't read to remind yourself or others what you are accomplishing with different parts of the script. To add a comment for a single line, start it with two slashes (//). To type a multi-line comment, start it with /* and end it with */.
4
A conditional statement requires the script to determine whether something is true or false, and then to act based on that determination. The most common type of conditional statement is the if statement. The if statement checks a value or expression in its parentheses. If the value is true, the lines of code in curly brackets are carried out; otherwise, they are ignored. You can add an else statement to provide alternative instructions if the condition is not true.
5
An event is something that is initiated by a button click, a key press, or the end of a video. An event listener, also called an event handler, is a function that is executed in response to specific events.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec9.htm (1 of 2) [13.06.2007 22:09:03]
Review
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch07lev1sec9.htm (2 of 2) [13.06.2007 22:09:03]
8. Using Components
8. Using Components [View full size image]
Components are prebuilt movie clips that give you a head start, especially when you are creating user interface elements such as scroll bars, menus, and text fields. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ●
Add a simple component to a project Modify a component's parameters Configure an interactive component Use ActionScript to enable a component
This lesson will take less than an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson08 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08.htm (1 of 2) [13.06.2007 22:09:04]
8. Using Components
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08.htm (2 of 2) [13.06.2007 22:09:04]
Getting Started
Getting Started In this lesson, you'll use components to create an interactive display of minerals; when the viewer clicks the image of a mineral, text about it appears. You'll start by viewing the final document. 1.
Double-click the 08End.swf file in the Lesson08/08End folder.
2.
Click an image in the grid on the left. The text on the right changes. Introductory text appears at the top of the screen. You'll create three components: one for the introductory text, one for the grid, and one for the mineral text. You'll use ActionScript to change the text display when the viewer clicks an image.
3.
Close the 08End.swf file.
4.
Double-click the 08Start.fla file in the Lesson08/08Start folder to open it in Flash. The Flash document contains the background image.
5.
Choose File > Save As. Name the file 08_workingcopy.fla, and save it in the 08Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
6.
Open the 08End.fla file, so that you can refer to it when you create ActionScript.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec1.htm [13.06.2007 22:09:05]
About Components
About Components Components are prebuilt movie clip symbols with defined parameters that you can use to add user interface elements, such as buttons, check boxes, or scroll bars, to your document. You can modify the parameters to change a component's appearance and behavior. In addition to creating simple user interface elements, such as buttons, components can create content, such as lists or grids. You can drag components from the Components panel onto the Stage and simply modify the parameters. However, for more complex user interface elements, use ActionScript 3.0 to modify the components. Each component has a unique set of ActionScript methods, properties, and events that make up its application programming interface (API). The API also allows you to create new, custom components of your own. You can download components that have been built by members of the Flash community on the Adobe Exchange at www.adobe.com/ exchange/.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec2.htm [13.06.2007 22:09:05]
Adding a Text Component
Adding a Text Component At the top of the document is a box containing introductory text. You'll create that box using a TextArea component from the Components panel. This is a simple user interface element that doesn't require any ActionScript. Dragging a Component to the Stage Components are listed in the Components panel. You'll drag the TextArea component onto the Stage. Flash will automatically add the TextArea component, as well as a UIScrollBar component and a Component Assets folder, to the Library panel. 1.
Lock the Background layer in your working copy of the start file.
2.
Select the Background layer and click the Insert Layer icon. Name the new layer Components. [View full size image]
3.
Choose Window > Components to open the Components panel. Note Which components are listed in the Components panel depends on the version of ActionScript specified in Document Settings. A document can use only one version of ActionScript. In this book, we always use ActionScript 3.0.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec3.htm (1 of 7) [13.06.2007 22:09:07]
Adding a Text Component
4.
Select the TextArea component in the User Interface folder in the Components panel.
5.
Drag the TextArea component onto the Stage. Note After you drag the TextArea component, the Library panel contains the TextArea component; the UIScrollBar component, which will appear if there is too much text to contain in the text box; and the Component Assets folder, which enables you to run any component. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec3.htm (2 of 7) [13.06.2007 22:09:07]
Adding a Text Component
Inserting Text in the Component The text area should fit neatly between the title and the grid, and it should be partially transparent. After you've resized and modified the appearance of the text box, you'll add text from the Intro.txt file to the component using the Property inspector. 1.
Select the TextArea component with the Selection tool.
2.
In the Property inspector, set the width to 600, height to 60, X value to 47, and Y value to 65. The text box appears beneath the heading.
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec3.htm (3 of 7) [13.06.2007 22:09:07]
Adding a Text Component
3.
Select Alpha from the Color menu, and select 57 for the percentage. Though the transparency of the component has changed, it still appears white on the Stage. However, it will be partially transparent when you test the movie.
4.
Open the Parameters panel by clicking the Parameters tab in the Property inspector or by choosing Window > Properties > Parameters.
5.
Scroll to the text parameter.
6.
Open the Intro.txt file in a text editor or word processing application. The Intro.txt file is in the Lesson08/08Start folder you copied from the book's CD.
7.
Select the text and choose Edit > Copy, or the Copy command for your text editor.
8.
In Flash, click in the text parameter, and press Ctrl+V (Windows) or Command+V (Mac OS) to paste the text.
[View full size image]
Note file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec3.htm (4 of 7) [13.06.2007 22:09:07]
Adding a Text Component
You can also paste text into the text parameter in the Component inspector, but it's easier to work with text in the Parameters panel. Alternatively, you can assign the text using ActionScript. 9.
Choose Control > Test Movie. The text appears, and if you click in it, you can edit it. If you're working with Flash for Windows, a scroll bar may appear in the text area. [View full size image]
10. Close the preview window. Modifying a Component's Parameters The introductory text should not be editable. You'll change parameters using the Component inspector to ensure that the text is not editable and that no scroll bar appears. The Component inspector and Parameters panel display the same options, so you can use whichever one you prefer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec3.htm (5 of 7) [13.06.2007 22:09:07]
Adding a Text Component
1.
Select frame 1 in the Components layer, and then select the text area on the Stage. [View full size image]
2.
Choose Window > Component Inspector.
3.
Click the editable parameter, and select false so that the text can't be changed.
4.
Click the verticalScrollPolicy parameter, and select off.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec3.htm (6 of 7) [13.06.2007 22:09:07]
Adding a Text Component
5.
Choose Control > Test Movie. Now there is no scroll bar and the text is no longer editable. Note You didn't name the instance because you won't need to refer to it in ActionScript. [View full size image]
6.
Close the preview window.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec3.htm (7 of 7) [13.06.2007 22:09:07]
Using Components to Create Interactivity
Using Components to Create Interactivity ActionScript lets you create more complex user interface elements. You'll use the TileList component and another TextArea component to create the grid of mineral types and the area that displays text about each mineral when its thumbnail is clicked. Configuring Component Parameters First, drag the components to the Stage, resize and position them, and name the instances so you can refer to them using ActionScript. 1.
In the Components panel, select the TileList component from the User Interface folder.
2.
Drag the TileList component to the Stage.
3.
In the Property inspector, set the width to 270, height to 318, X value to 47, and Y value to 150.
4.
Name the instance thumbnails_tl to represent the thumbnails tile list.
[View full size image]
5.
Click the Parameters tab to set the parameters for the instance.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (1 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
6.
In the parameters grid, change the columnWidth value to 125 and the rowHeight value to 125. These values determine the size of each section in the grid. [View full size image]
[View full size image]
7.
Click the scrollPolicy parameter, and select on to display a scroll bar. [View full size image]
8.
Click the direction parameter and select vertical to make the scroll bar vertical instead of horizontal, which is the default. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (2 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
9.
Drag a TextArea component from the Components panel to the right of the grid on the Stage. Note The Library contains a single TextArea component and a single Component Assets folder, no matter how many components you drag to the Stage. You can create multiple instances from a single component.
10. Select the new instance of the TextArea component. In the Property inspector, set the text area's width to 290, height to 318, X value to 360 and Y value to 150. 11. Select Alpha from the Color menu, and select 0 for the percentage. A partially transparent box is included on the background image. An alpha value of 0% leaves the background of the text area completely transparent, so the original box shows through. [View full size image]
12. Name the instance mineral_ta to represent the mineral text area. Enhancing Components with ActionScript You've created the grid and the text display area. Now, you need to add the ActionScript to make this all work. An event listener will trigger a response when a thumbnail is clicked; the response is the display of the appropriate text. As you write the ActionScript, remember that you named the TileList instance thumbnails_tl and the TextArea instance mineral_ta. Also, note the path to the thumbnail images; they're in the Thumbnails folder.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (3 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
1.
Select frame 1 in the Actions layer. [View full size image]
Note In ActionScript 3.0, actions can be applied only to frames, not movie clip symbols. Therefore, you must select a frame before applying actions. 2.
Choose Window > Actions to open the Actions panel. If you are uncertain about the ActionScript spacing or punctuation, refer to the 08End.fla file you opened earlier. Select the first frame in the Actions layer to see the final ActionScript in the Actions panel.
3.
Create the event listener for the tile list by typing thumbnails_tl.addEventListener(Event.CHANGE, thumbnailClicked);
In this line, thumbnails_tl, the grid, is the event target; you're adding an event listener that is listening for a change event, which will trigger the event response called thumbnailClicked when a thumbnail image in the grid is clicked. Note Capitalization is very important in ActionScript. In the line above, make sure the instance name is lowercase and that other letters are capitalized exactly as they appear in the text.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (4 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
4.
Create the function, or event response, named thumbnailClicked by typing function thumbnailClicked(event:Event):void{ mineral_ta.text = event.target.selectedItem.data; }
[View full size image]
The function is named thumbnailClicked, and it's the event response that is called in the first line you typed. Its object is an event which has the data type Event. This may seem a little confusing, but each object must be identified with a type in ActionScript 3.0, and you're simply telling ActionScript that the event is of the type Event. A function is always defined inside curly brackets. This function assigns variable text to the text area you named mineral_ta. You could type exact text within quotation marks after the equal sign, but for this project, the text will change, depending on which mineral graphic was clicked. The text is the data for the selected item in the event target, which is the tile list.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (5 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
5.
From the Actions panel menu, choose Word Wrap. Flash will wrap the text within the panel so you can see all of it, regardless of line endings in the text. [View full size image]
6.
Add the information for the first image in the tile list, including the label and source. Type thumbnails_tl.addItem({label:"OBSIDIAN", source:"thumbnails/Obsidian.jpg" data:"."});
For each item in the list, you'll identify the grid (thumbnails_tl) and use the addItem () method. Everything else goes inside parentheses and curly brackets. The label appears as text on top of the box; include quotation marks around it, and type it in all capital letters so it will display that way. Following the comma is the source, which is the path to the image you want to display. The third property is called data; this is the text that will appear in the mineral_ta box. You'll paste that text in later.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (6 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
7.
Choose Control > Test Movie. The obsidian thumbnail should appear on the left. When you click it, a period appears in the text area on the right. If the movie doesn't play as expected, check for typos, spaces, or any other errors in your script. You can compare your file to the ActionScript in the 08End.fla file. [View full size image]
8.
Copy the line you just typed, and paste it 14 times to create lines for each of the other minerals.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (7 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
9.
Substitute the appropriate mineral name for the label and source file in each line: Granite, Basalt, Scoria, Rhyolite, Shale, Breccia, Sandstone, Conglomerate, Limestone, Slate, Marble, Quartzite, Gneiss, Schist. [View full size image]
10. Open the text document called Minerals.txt in any text editor. Copy the text from the Obsidian section of the document. 11. In the Actions panel in Flash, select the period between the quotation marks after the word data in the first addItem() line, and press Ctrl+V (Windows) or Command+V (Mac OS) to paste the text.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (8 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
12. Delete paragraph returns (line endings) from the obsidian text. Add \n where you want paragraph breaks to occur. Type \n\n where you want space to appear between the paragraphs. There should be no spaces between \n and the words that follow it. [View full size image]
13. Choose Control > Test Movie. Click the image of obsidian. The obsidian text should appear. If the movie flickers or returns an error, return to the Actions panel and confirm that you've typed everything correctly and removed all paragraph returns from the text. 14. Copy and paste the text for each of the other minerals, removing paragraph returns within the text. To see line endings you might have missed, resize the Actions panel. When the text reflows, line endings (paragraph returns) become more obvious.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (9 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
15. Choose Control > Test Movie. Click each mineral thumbnail to see the corresponding text in the text area. If you encounter any errors, return to the Actions panel to confirm that you've removed all the line endings in the text. Remember that you can refer to the 08End.fla file for comparison. [View full size image]
Using two different types of components, you created an interactive display. You can use the same basic process to use other components in your own projects.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (10 of 11) [13.06.2007 22:09:09]
Using Components to Create Interactivity
Quick Interactivity with Flash Components Get a head start on a project by using components for standard interface objects, such as radio buttons, play buttons, scroll bars, and drop-down menus. Drag one from the Components panel, customize its parameters, and presto! Add a little ActionScript to take it even further. Below is a sample interface with some commonly used components along with a list for your reference.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec4.htm (11 of 11) [13.06.2007 22:09:09]
Review
Review
Review Questions
1
What is a component?
2
What's the difference between the Component inspector and the Parameters panel?
3
How can you change a parameter for a component?
Review Answers
1
Components are prebuilt movie clip symbols with defined parameters that you can use to add user interface elements, such as buttons, check boxes, or scroll bars, to your document. You can modify the parameters to change a component's appearance and behavior.
2
The same parameters are available in the Component inspector and the Parameters panel. However, in the Parameters panel, you can also name the component instance and specify its dimensions and location on the Stage.
3
Select the component, and then open either the Component inspector or the Parameters panel. Scroll through the parameters grid, and select the parameter you want to change. Then, select a parameter setting from the pop-up menu in the grid, or type a new value.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch08lev1sec5.htm [13.06.2007 22:09:10]
9. Working with Sound and Video
9. Working with Sound and Video [View full size image]
Sound and video files add new dimensions to your projects. Import files polished in other applications, such as Adobe After Effects, or perform simple edits on sound files directly in Flash CS3. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ● ●
Edit sound files Import video files Use video components Work with video that contains alpha channels Understand video import options
This lesson will take approximately 90 minutes to complete. If needed, remove the
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09.htm (1 of 2) [13.06.2007 22:09:10]
9. Working with Sound and Video
previous lesson folder from your hard drive, and copy the Lesson09 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09.htm (2 of 2) [13.06.2007 22:09:10]
Getting Started
Getting Started Start the lesson by viewing the finished animated zoo kiosk. You'll create the kiosk by adding sound and video files to a project in Flash. 1.
Double-click the 09End.swf file in the Lesson09/09End folder to play the animation. View the movie of the zoo director, who appears on the screen, speaks, and then disappears. Click a sound button to hear an animal sound. Click a thumbnail button to view a short movie about the animal. In this lesson, you'll create the sound buttons and import audio files for them. You'll create movie thumbnail buttons, import movies, and use ActionScript to attach the buttons to the movies. You'll also animate the zoo director video so that it moves onto the screen appropriately. [View full size image]
2.
Double-click the 09Start.fla file in the Lesson09/09Start folder to open the initial project file in Flash.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec1.htm (1 of 2) [13.06.2007 22:09:11]
Getting Started
3.
Choose File > Save As. Name the file 09_workingcopy.fla, and save it in the 09Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec1.htm (2 of 2) [13.06.2007 22:09:11]
Prepare the Project File
Prepare the Project File To set up the file, import the assets from an Illustrator file and add an Actions layer. 1.
Choose File > Import > Import To Stage.
2.
In the Import dialog box, select the Lesson09_assets.ai file in the Lesson09/09Start folder, and click Open or Import.
3.
In the Import To Stage dialog box, select all the layers. Select Flash Layers from the Convert Layers To menu. Select Place Objects At Original Position; no other options should be selected.
4.
Still in the Import To Stage dialog box, select the Video Button 1 layer, and select Create Movie Clip. Name the instance video_button1. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec2.htm (1 of 3) [13.06.2007 22:09:12]
Prepare the Project File
5.
Repeat step 4 to create movie clips for the Video Button 2, Video Button 3, and Video Button 4 layers. Name the instances video_button2, video_button3, and video_button4, respectively. Click OK to import the file.
6.
In Flash, select the Sound Buttons layer (the top layer), and click the Insert Layer icon. Name the new layer Actions. Lock all the layers except the Sound Buttons layer. To lock all the layers at once, click the lock icon above the layer names. Then, you can quickly unlock a single layer.
7.
Select Show All from the View menu in the Edit bar to see all the elements on the Stage. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec2.htm (2 of 3) [13.06.2007 22:09:12]
Prepare the Project File
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec2.htm (3 of 3) [13.06.2007 22:09:12]
Creating Sound Buttons
Creating Sound Buttons There are three sound buttons in the final kiosk, each playing a different animal sound. You'll create a button symbol, configure its rollover states, and import a sound for the button. Then, you'll duplicate that button and adapt it to create buttons for two additional sounds. Creating Button Symbols Button symbols include four rollover states in the Timeline: Up, Down, Over, and Hit. You'll convert the speaker icon and text to a button, configure the rollover states for the button, and draw a rectangle background for the button's hit area. 1.
Select the Sound Buttons layer. The group in the lower-right corner (Sound 1 and a speaker symbol) is selected.
2.
Choose Modify > Convert To Symbol. In the Convert To Symbol dialog box, select Button, and name the button sound_button1. Click OK.
3.
Double-click the instance of sound_button1 on the Stage to edit it. You may need to zoom in a little to see the button more clearly.
4.
Select Layer 1, and then select the group on the Stage. Choose Modify > Break Apart to break the group into pieces. Click elsewhere on the Stage to deselect the objects.
5.
Select the speaker symbol, and choose Edit > Cut.
6.
Click the Insert Layer icon, and with the new layer selected, choose Edit > Paste In Place. The speaker symbol appears on the new layer.
7.
Name the new layer Icon and rename Layer 1 Text.
8.
Click the Insert Layer icon two times to create two more layers. Name the new layers Sound and Highlight.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (1 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
9.
Rearrange the layers to appear in the following order, from top to bottom: Sound, Icon, Text, Highlight.
10. Select the Down frame on the Text layer, and press F5 to insert frames across all the button states. 11. Select the Down frame on the Icon and Sound layers, and press F6 to create a keyframe for each layer. 12. Select the Down frame on the Icon layer, and then select the speaker symbol on the Stage. In the Transform panel, scale the symbol to 150%. Note If the Transform panel isn't visible, choose Window > Transform. 13. Select the Over frame on the Highlight layer, and press F7 to create a blank keyframe.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (2 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
14. Select the Rectangle tool. Specify no stroke. Select a black fill with an Alpha value of 50%. Draw a rectangle approximately the same size as the red rectangle above the button (behind Guess this animal sound).
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (3 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
15. Using the Selection tool, move the rectangle behind the Sound 1 text and the speaker icon. You may need to use the arrow keys to nudge the rectangle into position.
16. Select the Down frame on the Highlight layer, and press F6 to insert a keyframe. Select the black rectangle on the Stage, and change its fill color to #B52823, with an Alpha value of 100%. 17. Select the Hit frame on the Highlight layer, and press F5.
Note The Hit frame determines the active area of the button. Because the hit area is the same as the rectangle shape, the button will be active whenever the mouse hovers over or clicks the rectangle.
Importing Sound Files Most sound files, especially short WAV files, are small enough that you can import the full file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (4 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
file into a Flash document. Two sound files are already included in the library, but you'll import the Monkey.wav file and assign it to the button symbol you created. 1.
Choose File > Import > Import To Library.
2.
Select the Monkey.wav file in the Lesson09/09Start/Sounds folder, and click Open (Windows) or Import To Library (Mac OS).
3.
Select the Down frame on the Sound layer.
4.
In the Property inspector, select Monkey.wav from the Sound menu, and select Start from the Sync menu. [View full size image]
5.
Choose Control > Test Movie to preview the button. When you click the button, you should hear a monkey screeching. Close the preview window.
Editing a Sound Clip The sound clip you imported is a bit longer than you need. You'll shorten the sound file using the Edit Envelope dialog box, so that only the first two sections of the waveform remain. Then, you'll apply a fade so that the sound gradually decreases as it ends. 1.
Select the Down frame on the Sound layer. In the Property inspector, click Edit. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (5 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
2.
In the Edit Envelope dialog box, click the Zoom Out icon until you can see the entire waveform, which includes four distinct sections. [View full size image]
3.
Drag the right end of the time slider to the middle of the waveform, so that the sound ends after the second section. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (6 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
4.
Select Fade Out from the Effect menu so that the volume diminishes gradually at the end of the sample. Click OK to accept the changes you've made. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (7 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
5.
Choose Control > Test Movie, and click the button again. The sound should be about half as long as it was the first time.
Duplicating Buttons You need three buttons for animal sounds, and they're all similar. You'll duplicate the first button, and then make a few adjustments to it to reuse it for the second and third buttons. 1.
Right-click (Windows) or Control-click (Mac OS) the sound_button1 symbol in the Library panel, and choose Duplicate. Note If the Library panel is not visible, choose Window > Library.
2.
In the Duplicate Symbol dialog box, select Button, and name the new button sound_button2. Click OK.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (8 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
3.
Duplicate the button one more time, naming the third button sound_button3.
4.
Click Scene 1 to return to the main Timeline.
5.
Select the Sound Buttons layer. Drag an instance of the sound_button2 symbol onto the Stage, placing it beneath the first button. Double-click the second button to edit it.
6.
Select the text with the Text tool, and change the number to 2.
7.
Select the Down frame on the Sound layer. In the Property inspector, select Lion. wav from the Sound menu, and select Start from the Sync menu.
8.
Click Scene 1 to return to the main Timeline.
9.
Select the Sound Buttons layer, drag an instance of the sound_button3 symbol beneath the other buttons on the Stage, and double-click it to edit it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (9 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
10. Change its text to Sound 3, select the Down frame in the Sound layer, select the Elephant.wav sound file, and select Start from the Sync menu.
11. Click Scene 1 to return to the main Timeline. Aligning Buttons In the kiosk, the buttons appear in a column. The easiest way to arrange them is to use the Align panel, which you've used in other lessons. 1.
Choose Window > Align to open the Align panel.
2.
Select all three buttons on the Stage. Make sure Align To Stage is deselected in the Align panel, and then click the Align Horizontal Center icon.
3.
With all three buttons still selected, use the arrow keys on your keyboard to nudge the buttons so that they are centered beneath the text that reads Guess this animal sound.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (10 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
4.
Click elsewhere on the Stage to deselect the buttons. Then, select the instance of the sound_button3 symbol.
5.
Using the arrow keys, nudge the button so that it's aligned with the bottom of the semi-transparent thumbnail bar.
6.
Select all three buttons, and click the Space Evenly Vertically icon in the Align panel.
7.
Lock the Sound Buttons layer.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (11 of 12) [13.06.2007 22:09:14]
Creating Sound Buttons
8.
Choose Control > Test Movie. Test each button, and then close the preview window.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec3.htm (12 of 12) [13.06.2007 22:09:14]
Creating Movie Thumbnail Buttons
Creating Movie Thumbnail Buttons There are four movie thumbnail buttons on the kiosk, and each plays a short movie of an animal at the zoo. You'll apply the drop shadow filter to the thumbnail movie clip symbols you imported earlier, and then you'll create a button symbol with distinct rollover states. As you did with the sound buttons, you'll duplicate the initial button and make changes to it for the other movie thumbnail buttons. Note You can apply the drop shadow filter to the thumbnails because they are movie clip symbols. If you had imported them as graphic symbols, you wouldn't be able to apply filters.
Creating Thumbnail Button Symbols You imported thumbnails in the Illustrator file, converting them to movie clip symbols as you did so. Now, you'll add drop shadows to each, and then convert them to button symbols. As you did with the sound buttons, you'll configure rollover states. 1.
Unlock the Video Button layers, and select the four movie clip thumbnails on the Stage. (Zoom out to see them, if necessary.)
2.
In the Filters panel, click the Add Filter icon ( ) and select Drop Shadow from the menu. Set the Blur X and Blur Y values to 10, the Distance to 10, and the Strength to 80%. Note The Filters panel is typically docked with the Property inspector. Click the Filters tab to display the Filters panel. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec4.htm (1 of 5) [13.06.2007 22:09:16]
Creating Movie Thumbnail Buttons
3.
Click elsewhere on the Stage to deselect the thumbnails. Then, select the first thumbnail (the image of penguins), and press F8 to convert it to a symbol. Select Button, set the registration point to the center, name the symbol video_button1, and click OK.
4.
Double-click the video_button1 symbol in the Library panel to edit it.
5.
Press Shift and select all four frames in Layer 1, and then press F6 to insert a keyframe in each one.
6.
Select the Over frame, and select the button on the Stage. In the Property inspector, select Brightness from the Color menu, and select -35 for the percentage. [View full size image]
7.
Select the Down frame, and select the symbol on the Stage. In the Property inspector, select Brightness from the Color menu and select -35% for the percentage.
8.
With the Down frame still selected, click the Filters tab, and adjust the drop shadow settings: change the Blur X and Blur Y values to 5, and change the Distance to 5.
9.
Select the symbol on the Stage and press the Down Arrow key three times and the Right Arrow key three times to nudge the thumbnail so that the center point is slightly off-center from the button.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec4.htm (2 of 5) [13.06.2007 22:09:16]
Creating Movie Thumbnail Buttons
10. Click Scene 1 to return to the main Timeline. 11. Choose Control > Test Movie. Roll the mouse over the first button; the image should darken. Click the first button; the button should appear as if it is pressed toward the Stage. Close the preview window. Duplicating Thumbnail Buttons You've created one thumbnail button, and you'll duplicate it to create the remaining three buttons. You'll swap the movie clip in each button, and then replace the video button movie clips on the Stage with the video_button buttons. 1.
Right-click (Windows) or Control-click (Mac OS) the video_button1 symbol in the Library panel, and select Duplicate. In the Duplicate Symbol dialog box, select Button, and name the symbol video_button2. Click OK.
2.
Double-click the video_button2 symbol in the Library panel to edit it.
3.
Select the Up frame in Layer 1, and then select the symbol on the Stage. In the Property inspector, click Swap.
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec4.htm (3 of 5) [13.06.2007 22:09:16]
Creating Movie Thumbnail Buttons
4.
In the Swap Symbol dialog box, select Lesson09_assets.ai > Video Button 2 > Video Button 2. The preview displays an image of a mandrill. Click OK. [View full size image]
5.
Repeat steps 3 and 4 to swap the video file for the Over and Down frames. Note You do not need to swap video files for the Hit frame, because the Hit state is not displayed; it just determines the active area of the button.
6.
Scrub the Timeline. The thumbnail is different from that in the first button, but the filter and property adjustments remain the same.
7.
Repeat steps 1-5 to create buttons named video_button3 and video_button4, applying images from the Video Button 3 and Video Button 4 folders, respectively.
8.
Click Scene 1 to return to the main Timeline.
9.
Select the Video Button 1 layer, and then select the first video button on the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec4.htm (4 of 5) [13.06.2007 22:09:16]
Creating Movie Thumbnail Buttons
10. In the Property inspector, name the instance video_button1. 11. Select the Video Button 2 layer, and then select the second video button on the Stage. 12. In the Property inspector, click Swap. Select the video_button2 symbol, and click OK. Note Be sure to select video_button2 in the Swap Symbol dialog box, and not Video Button 2. 13. Select Button from the Instance Behavior pop-up menu (Movie Clip is currently displayed). Type video_button2 for the instance name, if it isn't already there. [View full size image]
14. Repeat steps 11-13 for the third and fourth buttons. 15. Lock the Video Button 1, Video Button 2, Video Button 3, and Video Button 4 layers. [View full size image]
16. Choose Control > Test Movie. As you move the mouse over the thumbnails, they should display the appropriate Up, Down, and Over states. Close the preview window.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec4.htm (5 of 5) [13.06.2007 22:09:16]
Extending the Timeline
Extending the Timeline Currently, many layers contain just a single frame. You need to create new layers for frame labels, the pop-up video of the zookeeper, and the video player. Then, add frames to all the layers so that they each have at least 50 frames. Next, you'll label frames and add stop actions so that the script will stop while the movie plays. 1.
Select the Sound Buttons layer, and click the Insert Layer icon three times. Name the new layers Labels, Pop Up Video, and Video Player.
2.
Select frame 50 on the Actions layer, and then press Shift and select frame 50 on the Background Photo layer, so that frame 50 is selected on all the layers. Press F5 to insert frames for all layers.
3.
Select frame 10 in the Actions and Labels layers, and press F6 to insert a keyframe on each layer. Add keyframes to frames 20, 30, and 40 in the Actions and Labels layers.
4.
Select frame 10 in the Labels layer. In the Property inspector, type penguins in the Frame Label box. [View full size image]
[View full size image]
5.
Repeat step 4 to label frame 20 mandrill, frame 30 tiger, and frame 40 lion.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec5.htm (1 of 2) [13.06.2007 22:09:17]
Extending the Timeline
6.
Choose Window > Actions to open the Actions panel, and then select frame 1 in the Actions layer.
7.
In the Actions panel, add a stop action by typing stop();
[View full size image]
8.
Add stop actions to frames 10, 20, 30, and 40 in the Actions layer. Close the Actions panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec5.htm (2 of 2) [13.06.2007 22:09:17]
Preparing Flash Video Content
Preparing Flash Video Content You've created the thumbnail movie buttons. Now you need to prepare the movies to play when the buttons are depressed. You'll import one video file and encode it in FLV format; the other movies are already in FLV format for you. Then, use the FLV playback component controls to link the appropriate movie file with the frame for each button, and to turn autoplay on or off. Finally, you'll use ActionScript to move the Timeline to the appropriate frame when each button is clicked. About Importing Video When you import video, you can choose to embed it, which places the video in the Timeline so that it becomes part of the Flash document, or load it externally, so that it remains a separate file. Embedded video works best for smaller video clips without audio tracks; if you're using video clips longer than 10 seconds, load external video files and download the video progressively (so the viewer can watch it as it is downloading) or stream video using Flash Video Server. Importing Video Files You can import video files into Flash and convert them into FLV files at the same time. The Import Video wizard creates an FLV playback component, which contains the video file and the skin, or controls, that you've selected. 1.
Select frame 1 on the Video Player layer.
2.
Choose File > Import > Import Video.
3.
In the Import Video wizard, select On Your Computer, and click Browse (Windows) or Choose (Mac OS).
4.
In the dialog box, select Penguins.mov from the Lesson09/09Start folder, and click Open. Click Next or Continue in the wizard.
5.
From the deployment options, select Progressive Download From A Web Server. Click Next or Continue. Note Progressive download lets the video file play as it downloads to the viewer's computer.
6.
Select the Encoding Profiles tab, and then select Flash 8 High Quality (700 kbps) from the profile menu.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (1 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
7.
Select the Crop And Resize tab. Select Resize Video, and type 480 in the Width field and 320 in the Height field. Click Next or Continue.
8.
Select SkinUnderPlayStopSeekMuteVol.swf from the Skin menu, and select color #666666. Click Next or Continue. [View full size image]
Note
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (2 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
The skin determines the look and feel of the video's controls. You can use one of the skins provided with Flash, or you can customize your own. To preview a skin, select it from the Skin menu. 9.
Review the settings for the imported video file, and then click Finish to encode the file. By default, your video file will be named penguins.flv and saved in the same folder as the Flash document you're working on, which is also where your final swf file will be saved. Note The encoding process can be complex. How long it takes depends on your computer's processor speed and memory, the complexity and length of the video, and the encoding options you choose.
10. When Flash has encoded the video, a black box with the selected skin appears on the Stage. Align the video box in the middle of the transparent square on the left side of the Stage. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (3 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
11. Choose Control > Test Movie. The video begins streaming. Use the controls to play, stop, and change the volume for the movie. Close the preview window.
Import Video Wizard Options The Flash Import Video wizard includes many options. Which options you choose depends on your target audience, the size of the video you're importing, and the initial format of the movie file.
Deployment Options ●
Progressive Download From A Web Server
●
This option lets you stream the video using HTTP streaming. If you use this option, you need to upload the FLV file to the server along with the SWF file. Stream From Flash Video Streaming Service
●
This option lets you upload your video to a Flash Media Server, if your service provider hosts one. Stream From Flash Media Server
●
This option lets you upload your video to a Flash Media Server that you host, rather than one your service provider hosts. As Mobile Device Video Bundled In SWF
●
This option is only available if you are creating a Flash document for Flash Lite 2.0 or later. It bundles a device video file within the SWF file for use with Flash Lite 2.0 enabled devices (such as mobile phones and handheld computers). Embed Video In SWF And Play In Timeline
●
This option embeds the video in the Flash document and includes its frames in the Timeline. However, embedding is only recommended for short video clips with no audio track. Additionally, embedding a video file substantially increases the SWF file size. Linked QuickTime Video For Publishing to QuickTime This option lets you publish your Flash content as a QuickTime 4 movie and creates a pointer to a QuickTime video file. You must publish the SWF file as a QuickTime video. You cannot display a linked QuickTime clip in SWF format.
Encoding Options file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (4 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
If you're converting a video file to FLV format, you'll have several encoding options. Encoding profiles contain settings optimized for specific versions of Flash Player and for different download speeds. When you select a profile, a summary of its settings appears. You can customize those settings by clicking the Video or Audio tab and selecting a different option.
Skinning Options The video's skin determines the look and feel of the controls, and their position on the Stage. Select a skin to see a preview of its appearance. You can design a custom skin in Flash, save it as an SWF file, and link to it from the Skinning window of the Import Video wizard.
Controlling the Video Playback The FLV playback component lets you control which video plays, whether the video plays automatically, and other aspects of playback. You'll turn autoplay off for the initial penguin movie, so that it doesn't begin playing until the viewer presses the Play button. Then you'll change the FLV playback component options at different frames to play the appropriate movies for each button, and to turn autoplay on, so that the movies start playing immediately when the button is pressed. 1.
Select the video component on the Stage.
2.
Click the Parameters tab in the Property inspector. In the Parameters panel, change the autoPlay parameter to false. [View full size image]
3.
Test the movie again. The penguin video doesn't begin playing until you press the Play button.
4.
Select frame 10 of the Video Player layer, and press F6 to insert a keyframe.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (5 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
5.
Select the FLV playback component on the Stage. In the Parameters panel, change the autoPlay parameter to true. Note In the final movie, when you click the penguin button, the script will move to frame 10 in the Timeline, and the movie will play immediately.
6.
Select frame 20 of the Video Player layer, beneath the mandrill frame label. Press F6 to insert a keyframe.
7.
Select the FLV playback component on the Stage. In the Parameters panel, click the source parameter. In the box next to it, click the magnifying glass icon. [View full size image]
8.
In the Content Path dialog box, click the folder icon, select the Mandrill.flv file in the Lesson09/09Start folder, and click Open. Then click OK to close the Content Path dialog box.
Note The autoPlay parameter should already be set to true because the keyframe has the properties of the previous keyframe. 9.
Select frame 30 of the Video Player layer, press F6 to insert a keyframe, and change the source parameter to the Tiger.flv file.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (6 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
10. Select frame 40 of the Video Player layer, press F6 to insert a keyframe, and change the source parameter to the Lion.flv file. Scripting Video Buttons A different video file is associated with each section of the Timeline (Penguins.flv with frame 10, Mandrill.flv with frame 20, and so on). Now you need to write the ActionScript that moves the playhead to the appropriate frame in the Timeline when the button is clicked. You can use the same set of code for each button, with minor changes. The first line of code adds an event listener, similar to the one you used in Lesson 7. The event listener listens for the button click, and then runs the function (clickListener1, clickListener2, and so on), which you define in the following lines. The function moves the playhead to the appropriate frame in the Timeline. When the playhead moves, the appropriate video file plays, according to the controls in the FLV playback component. 1.
Select frame 1 in the Actions layer, and open the Actions panel. Note To open the Actions panel, choose Window > Actions.
2.
Add an event listener for the first button by typing the following line in the Actions panel: this.video_button1.addEventListener(MouseEvent.CLICK,clickListener1);
3.
Define the clickListener1 function by typing the following lines in the Actions panel: function clickListener1(event:MouseEvent):void { gotoAndPlay("penguins"); }
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (7 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
4.
Copy and paste the lines you just added three times, and then modify each set for the appropriate video: first copy: video_button2, clickListener2, and "mandrill" second copy: video_button3, clickListener3, and "tiger" third copy: video_button4, clickListener4, and "lion". Note You can also copy the lines of the script from the Actions panel in the 09End.fla file. this.video_button2.addEventListener(MouseEvent.CLICK,clickListener2); function clickListener2(event:MouseEvent):void { gotoAndPlay("mandrill"); } this.video_button3.addEventListener(MouseEvent.CLICK,clickListener3); function clickListener3(event:MouseEvent) { gotoAndPlay("tiger"); } this.video_button4.addEventListener(MouseEvent.CLICK,clickListener4); function clickListener4(event:MouseEvent) { gotoAndPlay("lion"); }
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (8 of 9) [13.06.2007 22:09:20]
Preparing Flash Video Content
5.
Close the Actions panel.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec6.htm (9 of 9) [13.06.2007 22:09:20]
Working with Video that Includes Alpha Channels
Working with Video that Includes Alpha Channels For the thumbnail buttons, you used video files that fill the FLV playback component. Sometimes, though, you want to use a video file that doesn't include a background. For this project, the zoo director was filmed in front of a green screen, which was removed using Adobe After Effects. When you use the video in Flash, the zoo director appears to be in front of the Flash background. You'll import the video file, which is already in FLV format, into an FLV video component. However, you won't include a skin. The zoo director will appear directly on the Stage. You'll convert the FLV file to a movie clip symbol, so that you can apply the drop shadow filter to set it off from the background. Then, you'll animate and mask the clip, so that the zoo director appears just before he begins speaking and disappears when he has finished. Importing the Video Clip Use the Import Video wizard to import the Popup.flv file. 1.
Select the first frame in the Pop Up Video layer, and choose File > Import > Import Video.
2.
In the Import Video wizard, select On Your Computer, and click Browse or Choose. Select the Popup.flv file in the Lesson09/09Start folder, and click Open. Click Next or Continue to proceed to the next window in the wizard.
3.
From the deployment options, select Progressive Download From A Web Server. Click Next or Continue.
4.
Select None from the Skin menu, and click Next or Continue. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (1 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
5.
Click Finish to import the video.
6.
Use the Selection tool to position the new video just above the red bar and the sound buttons. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (2 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
To see the entire Stage, choose Show All from the pop-up menu just above the Stage 7.
Choose Control > Test Movie to see the video file that uses alpha channels. Close the preview window.
Professionals often film people in front of solid green or blue backgrounds, so that they can easily remove, or key, the background in a video-editing application such as Adobe After Effects. Then, the person is merged with a different background. The image of the zoo director was filmed in front of a green screen, which was removed in After Effects.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (3 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
1.
Shoot footage in front of a green screen. ●
●
●
2.
Use a green background that is flat, smooth, and free of shadows, so that the color is as pure as possible. Minimize the light that reflects off the green screen onto the subject. Keep movement to a minimum for Flash video; use a tripod if possible.
Remove the background in After Effects. Import the file as footage into After Effects, create a new composition, and drag it onto the Composition Timeline. Create a garbage mask to roughly outline the shape and remove most of the background. But be sure the subject never moves outside the mask! Use the Color Range keying effect to delete the rest of the background. You may need to do some fine-tuning with the Matte Choker and Spill Suppressor effects. A spill suppressor removes the light that splashes onto the edges of the subject.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (4 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
3.
Export to FLV format Export the video file to Flash Video (FLV) format directly from After Effects. Be sure to select Encode Alpha Channel. The alpha channel is the selection around the subject. Encoding the alpha channel ensures that the video exports without a background.
Adding a Drop Shadow to a Movie Clip To distinguish the video from the background, apply a drop shadow filter. First, convert the video to a movie clip symbol so that you can animate the clip. Then, within that movie clip symbol, convert the video to a movie clip symbol so that you can apply a drop shadow to it. 1.
Select the Popup.flv video file on the Stage, and press F8 to convert it to a symbol. Select Movie Clip, name the symbol popUp, set the registration point to the upperleft corner, and then click OK.
2.
Double-click the movie symbol on the Stage to edit it. Rename Layer 1 Video in the symbol Timeline.
3.
Select the video file on the Stage, and press F8 to convert it into a symbol again. Select Movie Clip, set a center registration point, and name the symbol popUp_video. Then click OK.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (5 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
4.
Select the movie clip symbol on the Stage. In the Filters panel, click the Add Filter icon, and select Drop Shadow.
5.
Set the Blur X and Blur Y options to 10, set the Distance to 10, and set the Strength to 50%. [View full size image]
Animating a Movie Clip Use motion tweens to animate the clip so that it slides in before it plays and slides out when it has finished. 1.
Select the Video layer, and then click the Insert Layer icon. Name the new layer Actions.
2.
Select frame 15 on the Video layer, and press F6 to insert a keyframe.
3.
Select any frame between the keyframes on frames 1 and 15. In the Property inspector, select Motion from the Tween menu.
4.
Select frame 1 on the Video layer, and then select the instance of the movie clip on the Stage.
5.
Drag the movie clip straight down below the Stage.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (6 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
6.
Select frame 175 on the Video layer, and press F6 to add a keyframe. Add another keyframe at frame 190.
7.
Select any frame between 175 and 190. In the Property inspector, select Motion from the Tween menu. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (7 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
8.
Select frame 190 in the Video layer, select the video on the Stage, and drag the video straight down below the Stage. Note You've animated the video clip to move off the screen as the zoo director finishes speaking. However, the exact timing of the end of the speech depends on the computer playing the video. You may need to move the motion tween earlier or later in the Timeline.
9.
Select frame 190 on the Actions layer, and press F7 to insert a blank keyframe. With that keyframe selected, open the Actions panel, and type stop();
The stop action keeps the script from repeating the motion tween. [View full size image]
Masking a Movie Clip A mask will show the movie clip only within a specific area of the Stage. You'll create a simple mask using the Rectangle tool. 1.
Select the Video layer, and click the Insert Layer icon. Name the new layer Mask.
2.
Select the Rectangle tool, with no stroke and a solid fill in any color.
3.
Draw a rectangle on the Stage, and select it with the Selection tool.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (8 of 9) [13.06.2007 22:09:22]
Working with Video that Includes Alpha Channels
4.
In the Property inspector, set the width and height of the rectangle to 300. Set the X and Y values to 0. [View full size image]
5.
Right-click (Windows) or Control-click (Mac OS) the Mask layer, and select Mask.
6.
Choose Control > Test Movie to see the effect. The video should disappear when it slides off the Stage.
You've made an ordinary project much more engaging with sound and video files imported from other sources.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec7.htm (9 of 9) [13.06.2007 22:09:22]
Review
Review
Review Questions
1
How can you edit the length of a sound clip?
2
What is a skin for a video?
3
What are the limitations for embedded video clips?
4
What is a green screen and how is it used?
Review Answers
1
To edit the length of a sound clip, select the frame that contains it, and click Edit in the Property inspector. Then, move the time slider in the Edit Envelope dialog box.
2
The skin is the combination and appearance of video controls, such as Play, Fast Forward, and Pause buttons. You can choose from a wide array of combinations, with the buttons in different positions, and you can customize the skin. If you don't want viewers to have control over the video, apply no skin.
3
When you embed a video clip, it becomes part of the Flash document and is included in the Timeline. Because embedded video clips significantly increase the size of the document and produce audio synchronization issues, it's best to embed video only if it is less than 10 seconds in length and contains no audio track.
4
A green screen is a solid color background shot behind a video subject. The solid background is then removed from the footage in an application such as After Effects, so that the subject can be placed in front of a different background.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch09lev1sec8.htm [13.06.2007 22:09:23]
10. Loading and Optimizing Flash Content
10. Loading and Optimizing Flash Content
A preloader keeps your viewers engaged while the primary movie file loads. Be creative in designing the preloader, and then use ActionScript to put it to work. Lesson Overview In this lesson, you'll learn how to do the following: ● ● ● ● ● ●
Load a SWF file Monitor the loading progress Use ActionScript to animate a preloader Work with dynamic text Make symbols visible and invisible Cache bitmaps to improve performance
This lesson will take less than an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson10 folder onto it. file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10.htm (1 of 2) [13.06.2007 22:09:23]
10. Loading and Optimizing Flash Content
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10.htm (2 of 2) [13.06.2007 22:09:23]
Getting Started
Getting Started You'll start the lesson by viewing the finished movie, which includes a preloader similar to the one you created in Lesson 2. 1.
Double-click the 10End.swf file in the Lesson10/10End folder to view the final movie. The preloader—a glass filling with fizzy water—appears. As the promotional movie for the Aqua Zero fizzy drink company loads, the glass fills and the percentage printed beneath the glass increases. When the entire movie has loaded, the preloader disappears and the movie plays. The preloader and promotional movie have already been created. In this lesson, you'll use ActionScript to load the movie and to run the preloader until it has loaded.
2.
Open the 10End.fla file in the Lesson10/10End folder. You may want to compare your working file with it, especially when you're adding ActionScript.
3.
Open the 10Start.fla file in the Lesson10/10Start folder.
The preloader animation is already on the Stage. 4.
Choose File > Save As. Name the file 10_workingcopy.fla, and save it in the 10Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec1.htm [13.06.2007 22:09:24]
Assembling the Preloader Elements
Assembling the Preloader Elements When you first open the 10Start.fla file, the bubbles in the water are animated, but the glass is always full. You'll add a mask that you can animate with ActionScript, so that it reveals the liquid in the glass as the movie loads. You'll also add a text box that displays the percentage of the movie that has loaded. 1.
Double-click the glass on the Stage to edit the preloader symbol.
The preloader symbol contains several layers that include the drawn elements and
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec2.htm (1 of 6) [13.06.2007 22:09:25]
Assembling the Preloader Elements
that animate the bubbles and fizz. When you select the liquid in the glass object, the Property inspector reports that its instance name is loadingBar_mc. 2.
Double-click the glass on Stage again to edit the loader symbol.
The loader symbol contains only one layer, which contains the water shape. You'll add text and a mask to hide the water. 3.
Click the Insert Layer icon, and name the new layer Text. Rename Layer 1 Liquid.
4.
Select the first frame in the Text layer.
5.
With the Text tool, drag a text box beneath the glass.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec2.htm (2 of 6) [13.06.2007 22:09:25]
Assembling the Preloader Elements
6.
In the Property inspector, select Dynamic Text from the menu above the instance name. Select Arial for the typeface, 16 for the text size, and a dark gray (#666666) for the text color. [View full size image]
Dynamic text changes based on viewer input or other events in the ActionScript. For this lesson, you will be writing ActionScript to change the text as the movie loads. 7.
Name the instance loaderText_txt. You'll refer to the loaderText_txt instance in the ActionScript.
8.
In the text box on the Stage, type 0% loaded.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec2.htm (3 of 6) [13.06.2007 22:09:25]
Assembling the Preloader Elements
9.
Use the Selection tool to resize and reposition the text box so that it is centered below the glass.
10. Select the Liquid layer, and click the Insert Layer icon. Name the new layer Mask. 11. Select frame 1 in the Mask layer. 12. Drag the loaderMask symbol from the Library panel onto the Stage. Position it so that it covers the liquid in the glass.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec2.htm (4 of 6) [13.06.2007 22:09:25]
Assembling the Preloader Elements
13. Select the instance of the loaderMask symbol on the Stage. In the Properties inspector, name the instance loaderMask_mc. [View full size image]
You'll refer to the loaderMask_mc instance in the ActionScript. 14. Right-click (Windows) or Control-click (Mac OS) the Mask layer, and choose Mask. Flash indents the Liquid layer and locks both the Mask and Liquid layers.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec2.htm (5 of 6) [13.06.2007 22:09:25]
Assembling the Preloader Elements
15. Click Scene 1 to return to the main Timeline.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec2.htm (6 of 6) [13.06.2007 22:09:25]
Loading the Movie
Loading the Movie You'll use ActionScript to load the promotional movie called WaterIntroAnimation.swf and the preloader. To load the movie file you'll use a request object called a URLRequest. 1.
Select frame 1 in the Actions layer.
2.
Press F9 (Windows) or Option+F9 (Mac OS) to open the Actions panel.
3.
Type the following lines, exactly as they appear here. These lines load the WaterIntroAnimation.swf file. Note To compare punctuation, spacing, spelling, or any other aspects of the ActionScript, view the Actions panel in the 10End.fla file. var requestObj:URLRequest = new URLRequest("waterIntroAnimation.swf"); var loaderObj:Loader = new Loader(); addChild(loaderObj); loaderObj.load(requestObj);
The first line declares a variable called requestObj, which is of the type URLRequest, and it defines the variable as a new request for the file called WaterIntroAnimation. swf. The second line declares a variable called loaderObj, which is of the type Loader, and it creates a new instance of the class Loader. The third line adds the loaderObj variable as a display object that is added to the Stage. The fourth line loads the requestObj variable, which was defined in the first line as
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec3.htm (1 of 2) [13.06.2007 22:09:26]
Loading the Movie
the WaterIntroAnimation.swf file. 4.
Choose Control > Test Movie to see your movie so far.
The preloader appears as the movie loads, but the preloader doesn't change. You'll add more ActionScript to animate the text and the mask to reflect how much of the movie has loaded. To see how your movie will appear when it's downloading, choose View > Simulate Download Settings in the preview window. To change the simulation for different speeds, such as a 56K modem, DSL, or a T1 line, choose View > Download Settings.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec3.htm (2 of 2) [13.06.2007 22:09:26]
Animating the Preloader
Animating the Preloader You used event listeners in earlier lessons. An event listener waits for an event, such as a mouse click, and then reports the event so that the appropriate response can occur. In this case, you want to monitor how much of the SWF file has loaded and display that information on the screen. That is, you're looking for progress. You'll add an event listener to register and report the progress of the preloader. Then, you'll define a function that will be called repeatedly as the file loads. The function will update the text box that reports how much of the file has loaded and raise the mask to reveal more of the liquid. 1.
Add the following line to the ActionScript in the Actions panel: loaderObj.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadProgress);
This line adds an event listener of the ProgressEvent type that listens to the loaderObj variable you defined earlier. Once the file has started loading, ActionScript creates a LoaderInfo object. You're using the contentLoaderInfo property to access the information in that object. The event listener, which is also a function, is called preloadProgress.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec4.htm (1 of 3) [13.06.2007 22:09:27]
Animating the Preloader
2.
Add the following lines to define the function called preloadProgress function preloadProgress(event:ProgressEvent):void { var loadedPercent:int = event.bytesLoaded /event.bytesTotal * 100; preloader_mc.loadingBar_mc.loaderText_txt.text = loadedPercent + "%"; preloader_mc.loadingBar_mc.loaderMask_mc.scaleY = loadedPercent / 100; }
The first line identifies the function called preloadProgress as a ProgressEvent type of event, and identifies its data type as void, which means that it is undefined. The lines between the curly brackets define the function itself. First, you've declared a variable called loadedPercent; int indicates that it is an integer; its value equals the result of the bytes that have been loaded divided by the total bytes times 100. The next line provides the path to the dynamic text. You named the instance loaderText_txt, and it's nested inside the loadingBar_mc instance, which is in turn nested inside the preloader_mc instance. This line calls for text equal to the value of the loadedPercent variable plus the % sign, which is included in a string. Note You could put any text in the string. For example, you could add the word "loaded" or precede the loadedPercent variable with the words, "Please don't leave. You're at" so that it would appear on the screen as "Please don't leave. You're at 14%". The final line in the function traces the path to the mask, which you named loaderMask_mc. Like the text instance, it is nested inside the loadingBar_mc instance, which is nested inside the preloader_mc instance. This line scales the mask on its y axis (the vertical axis) to equal the value of the loadedPercent variable divided by 100.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec4.htm (2 of 3) [13.06.2007 22:09:27]
Animating the Preloader
All functions are surrounded by curly brackets, so a closing curly bracket completes this function. 3.
Choose Control > Test Movie to preview the movie. In the preview window, choose View > Simulate Download to see the animated preloader.
As the movie loads, the glass fills and the percentage changes on the screen.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec4.htm (3 of 3) [13.06.2007 22:09:27]
Changing the Visibility of Movie Clips
Changing the Visibility of Movie Clips The preloader does its job now: you can tell how much of the movie is loaded, and it's entertaining. However, if you watch the movie long enough, you'll see that the preloader appears whenever the movie fades. To correct that problem, you'll change the visibility of the preloader instance so that it no longer appears once the movie has loaded. 1.
In the Actions panel, add an event listener to determine when the file has loaded: loaderObj.contentLoaderInfo.addEventListener(Event.COMPLETE,preloadComplete);
As before, you're adding an event listener to access the Loaderinfo object for the loaderObj loader you created. This time, however, you aren't listening for progress. The event listener only dispatches when the file has completely loaded. Then it calls the function called preloadComplete. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec5.htm (1 of 2) [13.06.2007 22:09:27]
Changing the Visibility of Movie Clips
2.
Define the preloadComplete function by adding these lines in the Actions panel: function preloadComplete(event:Event):void preloader_mc.visible = false; }
{
In this function, which is called when the movie has loaded, the visible property of the preloader_mc instance is set to false, meaning that it is no longer visible. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec5.htm (2 of 2) [13.06.2007 22:09:27]
Caching Bitmaps
Caching Bitmaps Flash includes a bitmap caching feature, which enables you to play back complex animated vector graphics without sacrificing the quality of the movie's performance. You can specify that an object be cached as a bitmap at the time the movie is run, preventing Flash from having to continually redraw the symbol. Bitmap caching is ideal for complex movie clips where the position of the objects changes, but the shape or content does not change.
1.
Close the Actions panel.
2.
Select the Preloader layer, and then select the preloader_mc instance on the Stage.
3.
In the Property inspector, select Use Runtime Bitmap Caching. [View full size image]
Note You can apply bitmap caching in the Property inspector, or you can simply add a line of ActionScript. To apply bitmap caching through ActionScript for this project, you would add this line of script: file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec6.htm (1 of 2) [13.06.2007 22:09:28]
Caching Bitmaps
preloader_mc.cacheAsBitmap = true;
The fizzy drink lets the viewer know that the main site is loading, and keeps the viewer entertained at the same time. You can use this basic process to activate a preloader for a wide range of websites.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec6.htm (2 of 2) [13.06.2007 22:09:28]
Review
Review
Review Questions
1
What is a preloader?
2
What is the advantage of caching a bitmap?
3
How can you make an instance invisible?
Review Answers
1
A preloader is an animated image that plays while the main movie or website loads. It entertains viewers while reassuring them that something is happening, and in many cases, lets them know how much of the file has loaded.
2
The bitmap caching feature enables you to play back complex animated vector graphics without sacrificing the quality of the movie's performance. You can specify that an object be cached as a bitmap at the time the movie is run, preventing Flash from having to continually redraw the symbol.
3
To make an instance invisible, use ActionScript to set the visible property of the instance to false.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch10lev1sec7.htm [13.06.2007 22:09:29]
11. Publishing Flash Documents
11. Publishing Flash Documents [View full size image]
When you've finished your animation, publish it as a SWF file for a website or a DVD, or save frames from the animation as image files. Lesson Overview
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11.htm (1 of 2) [13.06.2007 22:09:29]
11. Publishing Flash Documents
In this lesson, you'll learn how to do the following: ● ● ● ● ● ● ●
Test a Flash document Change publish settings for a document Understand the difference between image file types Add metadata Publish a SWF file Detect the version of Flash Player a viewer has installed Publish a self-contained projector file
This lesson will take less than an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson11 folder onto it.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11.htm (2 of 2) [13.06.2007 22:09:29]
Getting Started
Getting Started In this lesson, you'll publish the animation that you created in Lesson 5. You'll publish the movie for a website, capture specific frames as images, and save the movie so that it will play even when Flash Player isn't present. 1.
Double-click the 11Start.fla file in the Lesson11/11Start folder to open it in Flash.
2.
Choose File > Save As. Name the file 11_workingcopy.fla, and save it in the 11Start folder. Saving a working copy ensures that the original start file will be available if you wish to start over.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec1.htm [13.06.2007 22:09:30]
Testing a Flash Document
Testing a Flash Document Troubleshooting is a skill you develop over time, but it's easier to identify the cause of problems if you test your movie frequently as you create content. If you test after each step, you know which changes you made and, therefore, what might have gone wrong. A good motto to remember is "Test early. Test often." One fast way to preview a movie is to choose Control > Test Movie, as you've done in earlier lessons. This command creates a SWF file so that you can play the movie; it does not create the HTML file or any other files necessary to play the movie from a website or DVD. When you believe you've completed your movie, or a portion of the movie, take the time to make sure all the pieces are in place and that they perform the way you expect them to. 1.
Review the storyboard for the project, if you have one, or other documents that describe the purpose and requirements of the project. If such documents do not exist, write a description of what you expect to see when you view the movie. Include information about the length of the animation, any buttons or links included in the movie, and what should be visible as the movie progresses.
2.
Using the storyboard, project requirements, or your written description, create a check list that you can use to verify that the movie meets your expectations.
3.
Choose Control > Test Movie. As the movie plays, compare it with your check list. Click buttons and links to ensure they work as expected.
4.
Choose File > Publish to publish the files required for your movie. Package the files and distribute them to colleagues or friends who can help you test the movie. Ask them to run the movie and to ensure that all the files are included, and that the movie meets the criteria on your check list. Encourage testers to use the movie as they would if they were its target audience.
5.
Make changes and corrections as necessary to finalize the movie, and then test it again to ensure it meets your criteria.
Note the mistakes you find, so that you can avoid them in the future, or at least recognize them more quickly when you troubleshoot future issues.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec2.htm [13.06.2007 22:09:30]
Adding Metadata
Adding Metadata Metadata is information about data. Metadata includes a document's title, a description, keywords, the date the file was created, and any other information about the document itself. You can add metadata to a Flash document, and that metadata is published in the HTML document that accompanies the SWF file. Metadata makes it easier for people to search for your movie. 1.
Choose Modify > Document.
2.
In the Document Properties dialog box, type Martian Mike Gets Spaced Out in the Title field.
3.
In the Description field, type Spaced Out animation showcases our favorite outer space buddy, Martian Mike. Animation, Martian, Spaced Out, Martian Mike, Spaceship animation, mini movie, space, science fiction, cute space animation, Flash animation, webisode. There is no Keywords field, but you can add keywords to the Description field. Include different ways of describing the file, such as animation, mini movie, and webisode above.
file:///I|/Adobe%20Press/(Adobe)%20Adobe%20Flash%20...%20a%20Book%20(2007)/0-321-49982-4/ch11lev1sec3.htm (1 of 2) [13.06.2007 23:48:04]
Adding Metadata
4.
Click OK to close the dialog box. The metadata will be saved with the Flash document, and included in the HTML file Flash creates when you publish the file.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec3.htm (2 of 2) [13.06.2007 22:09:31]
Publishing a Movie for the Web
Publishing a Movie for the Web When you publish a movie for the web, Flash creates a Flash SWF file, an HTML document that inserts your Flash content in a browser window, and a JavaScript file named AC_RunActiveContent.js that lets your SWF file play automatically in active contentcompliant browsers. You need to upload all three of these files, along with any other files your SWF file references, to your web server. The Publish command saves all the required files to the same folder. Note Active content is content that opens a separate application, such as Adobe Flash Player or Adobe Reader. Active content-compliant browsers open the appropriate application without requiring input from the viewer.
You can specify different options for publishing a movie, including whether to detect the version of Flash Player installed on the viewer's computer. When you change the settings in the Publish Settings dialog box, they are saved with the document. Specifying Flash File Settings You can determine how Flash publishes the SWF file, including which version of Flash Player it requires, which version of ActionScript it uses, and whether the movie is compressed. 1.
Choose File > Publish Settings.
2.
Click the Formats tab, and select Flash (SWF) and HTML. You may also choose to publish the file in additional formats.
3.
Select the Flash tab.
4.
Select a version of Flash Player. Some Flash CS3 features will not play as expected in versions of the player earlier than Flash Player 9.
5.
Select the appropriate ActionScript version. You've used ActionScript 3.0 in lessons in this book.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec4.htm (1 of 4) [13.06.2007 22:09:32]
Publishing a Movie for the Web
6.
Select Compress Movie if the file is large and you want to reduce download times. If you select this option, be sure to test the final movie before uploading it.
7.
Click the HTML tab.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec4.htm (2 of 4) [13.06.2007 22:09:32]
Publishing a Movie for the Web
8.
Select Flash Only from the Template menu.
Note To learn about other template options, select one and then click Info.
Detecting the Version of Flash Player Some Flash features require specific versions of Flash Player to play as expected. You can automatically detect the version of Flash Player on a viewer's computer; if the Flash Player version is not the one required, a message will prompt the viewer to download the updated player. 1.
On the HTML tab of the Publish Settings dialog box, select Detect Flash Version.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec4.htm (3 of 4) [13.06.2007 22:09:32]
Publishing a Movie for the Web
2.
Click Publish, and then click OK to close the dialog box.
Flash publishes the file, creating a SWF, HTML, and JavaScript file, all saved to the same folder as the Flash document. Note Adobe also provides a Flash Detection Kit, which is a series of sample code and files that includes more options for informing viewers about the required Flash Player version and how to obtain it. The detection kit is updated when popular browsers make significant changes that affect the way Flash Player is accessed. To learn more about the Flash Detection Kit, or to download it, visit www.adobe.com/products/flashplayer/download/ detection_kit/.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec4.htm (4 of 4) [13.06.2007 22:09:32]
Alternative Publishing Options
Alternative Publishing Options By default, Flash creates SWF, HTML, and AC_RunActiveContent.js files for a document. However, you can also choose to save specific frames of the movie as images, or to save the file as a projector, which can play on computers that do not have Flash Player installed. Saving Frames as Images Sometimes you don't want to share an entire movie, but want to display a particular frame. Exporting a frame as a GIF, JPEG, or PNG image might be useful if you need an image for a portfolio or want to provide an end image to a viewer who doesn't have Flash Player. You can also use individual images to compile a storyboard of multiple scenes to share with a client before the Flash file is interactive. 1.
Choose File > Publish Settings, and then click the Formats tab. Flash (.swf) and HTML are selected by default.
2.
Select GIF Image (.gif), JPEG Image (.jpg), and PNG Image (.png), and click OK to close the dialog box.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec5.htm (1 of 6) [13.06.2007 22:09:33]
Alternative Publishing Options
These options export the frame currently selected in the Flash document. 3.
Select the last frame in the Timeline (frame 150). This is the frame that Flash will export as image files.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec5.htm (2 of 6) [13.06.2007 22:09:33]
Alternative Publishing Options
4.
Choose File > Publish. Flash publishes the files to the folder that contains the Flash document file.
5.
Navigate to the Lesson11/11Start folder in Windows Explorer or the Mac OS Finder. The folder contains SWF, HTML, GIF, PNG, and JPEG files. Open each file to view it. A JavaScript file is also saved in the folder.
Note Which file format you choose depends on the type of content. If the frame contains an illustration with flat, simple colors, GIF is a good option. If the frame is more photographic and you don't mind compressing image data, JPEG may be the best choice. If the frame includes transparency, choose PNG.
[View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec5.htm (3 of 6) [13.06.2007 22:09:33]
Alternative Publishing Options
Publishing Movies for Mobile Devices You can create content for mobile phones and other mobile devices using Flash Lite. To create a Flash Lite document easily, choose File > New, select Flash File (Mobile) and click OK, and then select the target devices in Adobe Device Central. Flash automatically opens the file with the appropriate settings. Before you publish the file, use Device Central to preview the content in specific mobile devices. To learn more about publishing Flash Lite files for mobile devices, refer to both Flash Help and Device Central Help. [View full size image]
Creating a Projector Most computers have Flash Player installed, but you may need to distribute a movie to someone who doesn't have Flash Player, or who has an older version. You can save your movie as a projector, which includes all the files necessary to play the movie without any additional applications. Because they contain the player data as well, projector files are file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec5.htm (4 of 6) [13.06.2007 22:09:33]
Alternative Publishing Options
larger than SWF files. 1.
Choose File > Publish Settings, and click the Formats tab.
2.
Deselect GIF, JPEG, and PNG. Select Windows Projector and Macintosh Projector.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec5.htm (5 of 6) [13.06.2007 22:09:33]
Alternative Publishing Options
3.
Click Publish.
4.
When the file has been published, click OK to close the dialog box.
5.
Open the Lesson11/11Start folder in Windows Explorer or Mac OS Finder.
6.
Open the projector file for your platform (Windows or Mac OS). The Windows Projector file has an EXE extension. The Mac OS projector file is in a folder with an APP extension.
You've published a file that you could post on a web server or share on a CD or DVD. You can use these publishing methods to finalize any Flash projects you create and share them with the world.
Made for TV Most Flash content is published for websites or portable media devices. However, you can also use Flash to create video for television broadcast. The key is to ensure that you've used the appropriate frame rate and screen dimension. Broadcast requires a screen dimension of 720 x 480 and a frame rate of 26 frames per second.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec5.htm (6 of 6) [13.06.2007 22:09:33]
Review
Review
Review Questions
1
What files do you need to upload to a server to ensure your video plays as expected in a web browser?
2
How can you tell which version of Flash Player a viewer has installed, and why is it important?
3
Define metadata. How do you add it to a Flash document?
4
What is a projector file?
Review Answers
1
To ensure your movie plays as expected in web browsers, upload the Flash SWF file, the HTML document that inserts the Flash content into a browser window, and the JavaScript file named AC_RunActiveContent.js, which lets your SWF file play automatically in most current web browsers. You also need to upload any files your SWF file links to, such as video or image files, and be sure that they are in the appropriate folders (usually the same folder as the final SWF file).
2
Select Detect Flash Version in the HTML panel of the Publish Settings dialog box to automatically detect the version of Flash Player on a viewer's computer. Some Flash features require specific versions of Flash Player to play as expected.
3
Metadata is information about data. Metadata includes a document's title, a description, keywords, the date the file was created, and any other information about the document itself. Metadata in a Flash document is published in the HTML document that accompanies the SWF file, making it easier for people to search for your movie. To add metadata to a Flash document, choose Modify > Document, and enter a title and description, which may include keywords.
4
A projector includes all the files necessary to play the movie without any additional applications, so people who don't have Flash Player, or who don't have the current version, can view your movie.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/ch11lev1sec6.htm [13.06.2007 22:09:34]
Hexadecimal Color Codes
Appendix A. Hexadecimal Color Codes Throughout the book, we've referred to colors by their hexadecimal values, which are commonly used in HTML and other web programming. Using a hexadecimal value enables you to be very precise about the color you're using, rather than referring to it as "blue" or "green." Hexadecimal values are especially useful when you're using the Adobe Color Picker or other tools that don't list color names. This chart shows 216 standard web colors and their hexadecimal color codes, as well as the RGB (red, green, and blue) values that combine to create the color. Use this as a reference to select colors, but consider it a starting point. There are many more colors available. Search the web for "hexadecimal color codes" to find a variety of tools to help you select colors and find their corresponding hexadecimal codes. [View full size image]
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/app01.htm [13.06.2007 22:09:35]
Contributors
Contributors Andrew Chew Andrew has developed award-winning and industry-leading online training based on Flash since 2000 with Ninth House Network and Vitesse Learning. In 2005, he started his own company, Andrew Chew Interactive, offering custom interactive online solutions. http://www.andrewchew.com Tyler Munson Tyler, who lent his design and art direction to several lessons, launched the design and branding firm munsonDesign in the South of Market district of San Francisco. Tyler has successfully led the creation of programs for clients including Gap, Palm, Oracle, and music producer Paul Oakenfold. http://www.munsondesign.com Nader Nejat Nader founded Omega Mobile, a leading provider or rich mobile multimedia experiences, products, services, and training. Omega Mobile was among the first in the industry to design content and applications using Flash for mobile devices. http://www. omegamobile.com Colin Smith Colin is a best-selling author, trainer, and award-winning new-media designer who has caused a stir in the design community with Flash and Adobe Photoshop expertise. He is the author of How to Wow with Flash from Peachpit Press. http://www. photoshopcafe.com Paul Smith Paul studied digital design at Expression College for Digital Arts in Emeryville, California. As a New Media intern at afstudio, he helped develop lessons for this book. Paul was especially helpful in the creation of Lesson 9. www.paulclaytonsmith.com Lee Unkrich Lee, a filmmaker at Pixar Animation Studios, lent his photography skills to provide professional images, including the zoo photos used in Lessons 6 and 9.
file:///D|/Documents%20and%20Settings/Fu/Desktop/0-321-49982-4/app02.htm [13.06.2007 22:09:35]
