From the Library of Lee Bogdanoff
▼ TRY IT YOURSELF When you’re ready to roll up your sleeves and get some hands-on experience, look for one of the more than 90 “Try It Yourself” mini-lessons that provide step-by-step walkthroughs of key Flash tasks and techniques. HOUR 1: Basics
HOUR 9: Using Shape Tweens to Morph
. Make an Animation in 30 Seconds . Change Your View on the Stage . Use the Properties Panel to Inspect and Change Fill Colors
8 12 18
HOUR 2: Drawing and Painting Original
Art in Flash Use the View Tools to Help You See Draw and Change Lines Paint Fills Draw and Modify Shapes Fill the Stage with the Deco Tool Use the Pen Tool Create and Style Text Use the Selection Tool to Select and Modify Shapes . Select Attributes with the Dropper Tool . Transform Drawn Objects . Use Snap to Objects to Draw Perfect Shapes and Connect Objects . . . . . . . .
37 40 44 47 48 50 51 57 60 62 65
HOUR 3: Importing Graphics into Flash
. Import a Raster Graphic
77
HOUR 4: Staying Organized with the
Library and Layers . Create a Symbol by Converting Selected Objects . Create a New Symbol from Scratch . Transform the Location, Scale, and Rotation of Instances . Change Color Styles on Several Instances . Make a Symbol by Using Instances of Another Symbol
108 119 122 123 133 135 137 150
HOUR 8: Using Motion Tweens to Animate
. Create a Basic Motion Tween . Tween Position, Scale, Rotation, and Color . Make an Animation Finish Where It Starts . Make an Animation Ease In and Ease Out
198
HOUR 11: Simulating 3D Animation
. Create a 3D Movie Clip 207 . Use the 3D Translation Tool to Create an Animation 210 . Create Multiple Rotating Movie Clips 210 HOUR 12: Reusing Your Animations with
Motion Presets . Apply an Existing Motion Preset 217 . Modify and Save an Existing Preset 220 . Change the Easing of an Existing Preset 223, 225 . Import a Sound . Add Sounds and Sound Effects to an Animation
157 161 165 170
Clip and Graphic Symbols . Use a Movie Clip to Make a Rotating Wheel . Compare a Movie Clip Symbol to a Graphic Symbol
231 240
254 258
HOUR 15: Creating Special Effects
. Use an Imported Bitmap as a Fill Color in a Hall of Mirrors . Animate a Block of Text, One Character at a Time . Convert Text to a Shape for Special Effects . Splatter Animated Movie Clips . Add a Shadow to Show Depth and Distance . Add a Filter with the Motion Editor . Use Masking to Create a Spotlight Effect . Create a Hand-Drawn Masking Transition . Use a Mask as a Stencil
268 269
. Use the List Component to Enable Users to Select Images . Use the ProgressBar Component as a Preloader . Use the Slider to Access Frames in a Movie Clip
333 338 339
HOUR 19: Using Video
. Embed a Video . Make a Playback Controller for an Embedded Video . Create an .flv and Use the FLVPlayback Component . Rotoscope (Draw Frames of a Video) . Inject and Use Cue Points . Animate a Video in 3D
349 353 355 357 359 363
HOUR 20: Linking a Movie to the Web
. Publish a Movie . Use navigateToURL to Create a Hyperlink . Create a Text Hyperlink . Use Dynamic Text to Create a Hyperlink . Display Text by Using CSS
371 374 376 377 379
HOUR 21: Designing a Website to be
Modular . Load a Movie . Use the Loader Class to Display Progress . Play an External MP3 . Load Text from File
392 395 398 399
HOUR 22: Minimizing File Size
270 272 275 277 278 280 281
. Use the Bandwidth Profiler to Judge Download Times . Reduce a File’s Size with the Bandwidth Profiler’s Help . Use a Preloader in the Bandwidth Profiler
415 419 421
HOUR 23: Optimizing Performance
. Use a Custom Performance Meter to Calculate Frame Rate 428 HOUR 24: Publishing a Creation
HOUR 16: Basic Interactivity
. Make an Action That Loops Part of Your Movie . Use a Frame Label as the Destination of a gotoAndPlay Action . Make a Simple Button . Add Buttons to an Animation to Stop and Continue Playback . Make a Simple Portfolio Viewer
. Manually Populate the ComboBox Component 314 . Populate the ComboBox Component by Using ActionScript 316 . Create Multiple Buttons for a Portfolio317 . Use the RadioButton Components 320 . Apply the Radio Buttons 321 HOUR 18: Using Components
194 197
HOUR 14: Nesting Animations in Movie
103
HOUR 7: Understanding Animation
. Analyze a Finished Animation
192
101
HOUR 6: Applied Layout Techniques
. Display the Time in Dynamic Text . Use the Hard Light or Overlay Blend to Add a Highlight . Combine Techniques to Improve the Bevel Filter
HOUR 10: Advanced Animation with Inverse Kinematics . Create a Shape and Add Bones with the Bone Tool . Create a Shape from Multiple Movie Clips and Add Bones . Animate a Figure by Adding Poses . Control the Motion of an Armature with the Bind Tool
HOUR 13: Including Sound in Animations
90 93
HOUR 5: Controlling Color
. Create a Custom Color and Swatch . Create a Custom Gradient . Transform Attributes of Gradients Used in a Movie
HOUR 17: Introducing Components
. Make a Simple Shape Tween 178 . Use Shape Hints for a Better Shape Tween 183
291 293 296 299 305
. Set Up the Publish Settings and Then Publish a Movie . Address Users Without Flash . Customize a Template . Add Metadata for Search Engine Optimization . Add XMP Data to a Movie
435 440 441 443 445
From the Library of Lee Bogdanoff
Phillip Kerman and Lynn Beighley
Sams Teach Yourself
Adobe
®
®
Flash CS4
Professional
24 Hours in
800 East 96th Street, Indianapolis, Indiana, 46240 USA
From the Library of Lee Bogdanoff
Sams Teach Yourself Adobe Flash CS4 Professional in 24 Hours Copyright © 2009 by Sams Publishing All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. ISBN-13: 978-0-672-33041-4 ISBN-10: 0-672-33041-5 Library of Congress Cataloging-in-Publication Data: Kerman, Phillip. Sams teach yourself Adobe Flash CS4 professional in 24 hours / Phillip Kerman and Lynn Beighley. -- 1st ed. p. cm. ISBN 978-0-672-33041-4 (pbk.) 1. Flash (Computer file) 2. Multimedia systems. 3. Web sites--Design. I. Beighley, Lynn. II. Title. QA76.575.K4625 2009 006.7'8—dc22 2009015798 Printed in the United States of America First Printing May 2009
Acquisitions Editor Mark Taber Development Editor Songlin Qiu Managing Editor Patrick Kanouse Project Editor Seth Kerney Copy Editor Jovana San NicolasShirley Indexer Tim Wright Proofreader Matt Purcell Technical Editor Brandon Houston Publishing Coordinator Vanessa Evans
Trademarks
Cover Designer Gary Adair
All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.
Compositor Mark Shirar
Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The authors and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book or from the use of programs accompanying it.
Bulk Sales Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales. For more information, please contact U.S. Corporate and Government Sales 1-800-382-3419
[email protected] For sales outside of the U.S., please contact International Sales
[email protected]
From the Library of Lee Bogdanoff
Contents Introduction 1 What’s New in This Edition . . . . . . . . . . . . . . . . . . . . . . . . 2 Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . 3 How This Book Is Organized . . . . . . . . . . . . . . . . . . . . . . 3 What’s on the Book’s Website . . . . . . . . . . . . . . . . . . . . 4 Part I: Assembling the Graphics You’ll Animate in Flash HOUR 1: Basics 7 Jump Right In and Make an Animation . . . . . . 7 Getting Your Bearings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Getting Around in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Document Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 File Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Part II: Animating in Flash HOUR 7: Understanding Animation 143 How Animation Works . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Elements of Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 HOUR 8: Using Motion Tweens to
Animate 157 Creating a Motion Tween . . . . . . . . . . . . . . . . . . . . . . . . 157 Fine-Tuning a Motion Tween . . . . . . . . . . . . . . . . . . 165 HOUR 9: Using Shape Tweens to
Morph 177 Making a Shape Tween . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Refining and Fine-Tuning a Shape Tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
HOUR 2: Drawing and Painting Original
Art in Flash 35 Drawing on the Stage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Selecting and Transforming Objects . . . . . . . . . . 54
HOUR 10: Advanced Animation with
HOUR 3: Importing Graphics into Flash
69 Vector Graphics Versus Raster Graphics . . . . 69 Reasons to Avoid Importing Graphics . . . . . . 70 Importing Vector Graphics . . . . . . . . . . . . . . . . . . . . . . . . 71 Using Bitmaps (Also Known as Raster Graphics) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
HOUR 11: Simulating 3D Animation
HOUR 4: Staying Organized with the Library
HOUR 12: Reusing Your Animations
and Layers 89 The Concept of the Library . . . . . . . . . . . . . . . . . . . . . . 89 Using the Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Using Symbols from the Library . . . . . . . . . . . . . . 100
with Motion Presets 215 The Motion Presets Panel . . . . . . . . . . . . . . . . . . . . . . . . 215 Applying an Existing Motion Preset . . . . . . . . 217 Editing an Existing Preset with the Motion Editor Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
HOUR 5: Controlling Color 113 Using Blends and Filters . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Creating and Saving Color Swatches . . . . . . 118 HOUR 6: Applied Layout Techniques 129 Setting Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Applied Examples Using Color Styles, Blends, and Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Inverse Kinematics 191 Linking Symbols with the Bone Tool. . . . . . . . 191 Animating the Armature . . . . . . . . . . . . . . . . . . . . . . . . 195 203 Creating a 3D Movie Clip . . . . . . . . . . . . . . . . . . . . . . . . 203 Moving Objects with the 3D Translation Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Rotating Objects with the 3D Rotation Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
HOUR 13: Including Sound in
Animations 229 Importing Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Using Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Controlling Quality and File Size . . . . . . . . . . . . 241
From the Library of Lee Bogdanoff
iv
Sams Teach Yourself Adobe® Flash® CS4 Professional in 24 Hours
HOUR 14: Nesting Animations in Movie
HOUR 21: Designing a Website to
Clip and Graphic Symbols 253 Movie Clip Symbol Behavior . . . . . . . . . . . . . . . . . . 253 Subtleties of Movie Clips . . . . . . . . . . . . . . . . . . . . . . . . 260
Be Modular 391 Loading Movies or Images . . . . . . . . . . . . . . . . . . . . . . 391 Determining When a Movie Is Fully Loaded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Playing External Sounds . . . . . . . . . . . . . . . . . . . . . . . . 398 Loading External Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
HOUR 15: Creating Special Effects
267 Effects with Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Splatter Movie Clips with the Spray Brush Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Using Filters for Special Effects. . . . . . . . . . . . . . . . 274 Masking Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Part III: Adding Interactivity and Video
HOUR 16: Basic Interactivity
287 Basic ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Making Simple Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Listening for Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
HOUR 17: Introducing Components
313 What Is a Component? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Using the Button Component . . . . . . . . . . . . . . . . . . 317 Using the RadioButton Component . . . . . . . . 319 Changing Component Appearances . . . . . . . . 322
HOUR 18: Using Components
329 Using Data Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 Working with Other Components . . . . . . . . . . . . 337
HOUR 22: Minimizing File Size
405 File Size Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . 405
HOUR 23: Optimizing Performance
427 Measuring Performance . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Impacts on Performance . . . . . . . . . . . . . . . . . . . . . . . . . . 428
HOUR 24: Publishing a Creation
435 How to Publish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Adding Metadata to Your Flash Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Choosing Which Version to Publish . . . . . . . . 445 Deciding Which Media Types to Publish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446 Exporting Other Media Types. . . . . . . . . . . . . . . . . . 455 Index
459
HOUR 19: Using Video
345 Embedding Video Versus Playing External Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 Using Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 3D Animation with Video. . . . . . . . . . . . . . . . . . . . . . . . 363 Part IV: Putting It All Together for the Web
HOUR 20: Linking a Movie to the Web
369 Basic Publishing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369 Simple Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Using Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378 What Other Web Tasks Can Flash Do? . . . . 380 Using Flash Inside a Larger Website . . . . . . . . 382 Uploading Files to a Web Server . . . . . . . . . . . . . . 386
From the Library of Lee Bogdanoff
About the Authors Phillip Kerman is an independent programmer, teacher, and writer, who specializes in the Adobe Flash platform. He has trained and made presentations around the world, in such exotic locations as Reykjavik, Iceland; Melbourne, Australia; Amsterdam, Holland; and McAlester, Oklahoma. He has programmed several games on MSN and Messenger Live, including Sudoku Too and Jigsaw Too, as well as the real-time cattle auction site stampedecattle.com. Phillip is also the author of Macromedia Flash @work, Flash MX 2004 for Rich Internet Applications, and ActionScripting in Flash MX from New Riders Publishing. Lynn Beighley is a freelance author, web designer, and web developer. After going back to school to get a Masters in Computer Science, she worked for the acronyms NRL and LANL. Then, she discovered Flash and wrote her first bestseller. A victim of bad timing, she moved to Silicon Valley just before the great crash. She spent several years working for Yahoo! and writing other books and training courses. Upon discovering that technical book writing actually paid real money, she learned to accept and enjoy it. Finally giving in to her creative writing bent, she moved to the New York area to get an MFA in creative writing. She currently creates Flash animations and applications that range from the ridiculous to the sublime.
From the Library of Lee Bogdanoff
Acknowledgments CS4 Edition The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task. Other folks I’d like to thank include Seth Kerney, Brandon Houston, and Jovana San Nicolas-Shirley. Finally, thank you Adobe for keeping Flash the great product that it is and taking it in interesting new directions. Keep up the awesome work! —Lynn Beighley
CS3 Edition Most successful feats involve the efforts of many people. This book is no exception. I’m proud of the result, but I can’t take full credit. Here is my attempt to acknowledge everyone. First, I’d like to thank the people at Sams Publishing. When Randi Roger approached me, not only did she provide the faith that I could write this book, but she also stressed the support I would receive from Sams Publishing. She wasn’t exaggerating. The following people were professional and prompted me every step of the way: Betsy Brown, Lynn Baus, Brandon Houston, Jeff Schultz, Amy Patton, Carol Bowers, Mark Taber, Kate Small, Matt Purcell, Vanessa Evans, and Damon Jordan (who as Development Editor made this book flow), plus all the editors listed in the front of this book. When you look at other Sams books, you’ll see many of these people acknowledged for a reason—they are great! There are countless correspondents with whom I’ve learned a lot about Flash. Instead of naming several and inadvertently neglecting many, let me just say that participating in local user groups and online forums is a great way to expand your knowledge and build your business—they’ve helped me and helped this book. Of all the places I’ve learned about Flash, being in the classroom and teaching has probably been the most educational for me. The students and staff of the Northwest Academy, Pacific Northwest College of Art and Portland Community College deserve special recognition. —Phillip Kerman
From the Library of Lee Bogdanoff
We Want to Hear from You! As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. You can email or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books stronger. Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message. When you write, please be sure to include this book’s title and author as well as your name and phone or email address. I will carefully review your comments and share them with the author and editors who worked on the book. Email:
[email protected]
Mail:
Mark Taber Associate Publisher Sams Publishing 800 East 96th Street Indianapolis, IN 46240 USA
Reader Services Visit our website and register this book at informit.com/register for convenient access to any updates, downloads, or errata that might be available for this book.
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
Introduction
Adobe is not exaggerating when it says that Flash CS4 Professional is the “industry-leading authoring environment for creating engaging interactive experiences.” You only need to visit a few sites that use Flash to understand how compelling it is. Using graphics, animation, sound, and interactivity, Flash can excite, teach, entertain, and provide practical information. With this version of Flash, Adobe has introduced some valuable new features, as well as further integrated Flash CS4 into its suite of products. That’s a powerful thing—when products like Photoshop, Illustrator, and Fireworks can be used to help you create graphics for use in your Flash movies. This interoperability only increases as time goes on. More than half a billion users already have the free Flash player that enables them to view Flash movies. As of the writing of this book, more than 95% of computers connected to the Internet not only had Flash Player version 9, but more than 55% have the latest version, Flash Player 10. The fact that Adobe continues to distribute this software so effectively means the potential audience for Flash content is huge and continues to grow. The tools needed to create Flash movies are within your reach. After you purchase Flash, the only investment you need to make is time to learn. You can even download a trial version of Flash from www.adobe.com, and use it for 30 days for free. People can grow from fiddling with Flash to making entertaining movies. Imagine a great musician picking up and learning an instrument in a matter of days. It really is that amazing. If you’re motivated, with just a moderate time investment, you feel as though a powerful communication tool has been given to you. Flash is so unique that sometimes it’s better to have less experience. If you have preconceived ideas about Flash or how you’re supposed to use draw-
From the Library of Lee Bogdanoff
2
Introduction
ing tools, it might be best to try to forget everything and start fresh. This book is organized in such a way that you should start seeing successes quickly. With each task, you prove to yourself that you’re acquiring knowledge and skills. We don’t need to give you a pep talk because you’ll see for yourself. In just a few one-hour lessons, you are creating drawings that you might have thought you weren’t capable of. In a few more hours, you are making animations. Finally, after 24 one-hour lessons, you are unstoppable. Where you take your skills is up to you, but you get a great foundation here. You might not feel like a pro overnight, but you will feel you have a powerful communication tool in your control. When you can’t wait to show others your creations, you know you’re on your way. Get ready to have some fun!
What’s New in This Edition This is the sixth edition of this book. To prevent the material from getting stale, we change quite a bit in each revision, as well as cover the new CS4 features with some depth. Unlike many other dramatic software upgrades, Adobe Flash CS4 Professional is not that different from the CS3 version. However, the way people use Flash and Flash in general has definitely broadened significantly. It’s not just Flash anymore; it’s the Flash Platform. Technologies, such as Apollo and the Flex Framework, have attracted a new set of developers all delivering Flash content. The CS4 upgrade is offers a few new tools, techniques, and further integrates with other Adobe CS4 products. This edition doesn’t try to cover everything; there simply isn’t time to do that in 24 one-hour lessons. Instead, we focus on animation techniques, graphics, and delivering to the web. You also spend a whole hour exploring new features including video with the full-screen mode; Inverse Kinematics, the art of animating things connected to other things; and 3D animation. This book contains minimal, but crucial, coverage of ActionScript. We try not to go too much in-depth, but we cover enough to give you an idea of how it works. ActionScript is an entire computer language on its own, and once you have a sense of how it works, you’ll be comfortable learning more using additional resources. ActionScript isn’t getting any less complex; it is becoming much more consistent. So, what you learn in the ActionScript introductory hour (Hour 16, “Basic Interactivity”) applies to the rest of the code you see pop up in the book. We do cover Flash Components—readybuilt and self-contained objects that include advanced ActionScript code, but also keep you insulated from that code. This edition also includes hours From the Library of Lee Bogdanoff
Who Should Read This Book
3
that cover using basic ActionScript and Components. ActionScript 3.0(AS3) is the latest version of ActionScript. You see AS3 in most of the code samples that appear in this book. But, in some cases, we show how to perform a task using AS2. Although AS3 is a cleaner version of the ActionScript language, it’s also less forgiving. Programmers generally like the strictness of AS3, but many intermediate Flash users prefer to do things the old way as in AS2 because they can successfully make moderately complex tasks work or they’d rather dig into AS3 at a later date. Don’t get hung up on which version of ActionScript appears here. The most important point is that these 24 hours will get you started in Flash by developing good foundation skills. It’s easy to pick up bad habits in Flash, but you definitely get started on the right foot with this book.
Who Should Read This Book New users to Flash should read this book first. If you’ve been doing Flash for a while and want to step back to make sure you’re headed in the right direction, you could find some gems throughout the book, but it might be tough to relearn the basics. If you’re someone who can learn on your own, you might think you don’t need a book like this, and, honestly, you might be right. But, this book moves quickly enough and provides tons of handson tasks that it’s worth investing the time to read 24 hour-long chapters. If you learn by doing, this is a good book for you. If you’re looking for any of the following Flash topics, they’re not covered here: writing class files in ActionScript 2.0 or ActionScript 3.0, developing content for mobile phones, using Flex Builder, building true 3D environments in Flash (although we do cover the new 3D tool), integrating with back-end web servers, or using Apollo. Some of these topics are mentioned in the book—but at best we only briefly discuss these more advanced topics.
How This Book Is Organized This is a hands-on tutorial book. It’s not a project-based tutorial, however, because each task explores a single topic. Occasionally, you find a series of tasks that build upon one another. Generally, we introduce a topic, then, as quickly as possible, jump straight into a task where you get your hands dirty.
From the Library of Lee Bogdanoff
4
Introduction
Throughout this book, you will see “Try It Yourself” sections. They are designed to take you through the steps of actually performing the tasks you have been reading about. Do not skip these sections. They usually provide additional information about the topic and are a great chance to practice the concepts. At the end of each hour, we’ve included a Q&A (Question and Answer) section with common questions we’ve either heard from students or topics that could be confusing to new users. There’s also a quiz at the end of each hour. The goal of both the Q&A and quizzes is to provide an additional way to learn. There are lots of ways to learn, and these questions exercise a different part of your brain. The book as a whole is organized in a linear manner. Later hours rely on the knowledge you acquire in earlier hours. The 24 hours are broken into four parts: . Part I: Assembling the Graphics You’ll Animate in Flash
Here you concentrate on getting the graphics to look exactly as you intend. It might seem like a lot to spend 25% of the book on static graphics, but the time is well spent as it makes your animations look better. . Part II: Animating in Flash
This is where you start moving things! You learn everything from 3D animation to tweening to Inverse Kinematics with the Bone tool. You also learn about valuable time-saving tools, like the Motion Preset Library and the Motion Editor. . Part III: Adding Interactivity and Video
In this part of the book, you take a big step into writing instructions so your Flash creations change based on the user’s input. Video is also covered here. . Part IV: Putting It All Together for the Web
Although it’s fun to create things inside Flash, you’ll want to put your creations online so your friends, family, and customers can see it. This part of the book shows you how, plus you learn some fine-tuning adjustments to optimize performance and download speeds.
What’s on the Book’s Website Source files for tasks in the book can be found on the publisher’s website. If you have trouble, you can see what the finished project looks like and investigate how it was built. We’ve also included media files, such as images, audio, and video, necessary to complete a few of the tasks. From the Library of Lee Bogdanoff
PART I Assembling the Graphics You’ll Animate in Flash
HOUR 1
Basics
HOUR 2
Drawing and Painting Original Art in Flash
HOUR 3
Importing Graphics into Flash
HOUR 4
Staying Organized with the Library and Layers
HOUR 5
Controlling Color
HOUR 6
Applied Layout Techniques
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 1 Basics
At first glance, the Flash CS4 environment doesn’t seem too complicated. During this hour, you begin drawing and animating very quickly. Before you get to that, you need to know a few things about the interface. The Flash interface might look familiar to you because it shares some interface elements with other software you might have used. But, Flash is not just a graphic design software or a programming language. Flash is basically a hybrid. Although Flash is consistent with other types of software, Flash is different in many ways. Experienced users and novices alike will benefit from the basics covered during this hour. Panels are special interface tools that give you access to see and change almost any setting while working on your Flash file. The Properties panel is one of the most useful panels because it automatically changes to give you information about anything you have selected. For example, when you select text, the Properties panel enables you to change the font style and size. When you draw a circle and select it, the Properties panel shows you the height and width, as well as the x and y location on the screen.
WHAT YOU’LL LEARN IN THIS HOUR: . How to easily and quickly draw and animate a graphic . How to use Flash’s workspace . How to organize and use panels . How the Properties panel constantly changes to show you important information . The common file types related to Flash
Jump Right In and Make an Animation You can create your first Flash animation in a matter of seconds! Although the following task doesn’t cover all there is to learn, it should prove to you that it’s possible to get rolling with Flash very quickly.
From the Library of Lee Bogdanoff
HOUR 1: Basics
8
▼ TRY IT YOURSELF Make an Animation in 30 Seconds
Just to prove that it is easy, in this task you make a simple animation in a matter of seconds. Follow these steps: 1. Open Flash and select Flash File (ActionScript 3.0) from the Create New column of Flash’s start page. If the start page isn’t initially visible, click File, New to open the New Document dialog box, Flash File (ActionScript 3.0) from the General tab, and OK. You see a large white square, the Stage, in the center of your screen. 2. Press the R key to turn your cursor into a Rectangle tool. When you do this, you should notice the Rectangle tool becomes active in the Tools panel on the left. If you don’t see the Tools panel, you can open it by clicking Window, Tools. 3. On the left side of the Stage, click and drag down toward the right to draw a medium-size rectangle. This is how your animation begins. 4. The Timeline panel should be visible just below the white Stage. If the Timeline panel is not visible, click Window, Timeline. It is made up of numbered cells; select Frame 20 and press F7 (see Figure 1.1). 5. Now press the O key to turn the cursor into an Oval tool. Click the right side of the Stage and drag to draw a medium-size oval.
FIGURE 1.1 After selecting Frame 20 in the Timeline, you insert a blank keyframe by pressing F7.
6. Finally, return to Frame 1 (where the animation begins) by clicking the dot under the 1 (for Frame 1) in the Timeline. (That dot represents a keyframe that has content—your rectangle.)
From the Library of Lee Bogdanoff
Getting Your Bearings
7. Click Insert from the menu, and click Shape Tween as shown in Figure 1.2. That’s it! 8. To view your animation, press the Enter key.
9
▼ TRY IT YOURSELF Make an Animation in 30 Seconds FIGURE 1.2 To tell Flash to create an animation, you choose one of the Tween options under the Insert menu. Alternatively, you can right-click on a frame and select a Tween type.
Of course, you’ll learn much more about making animations, including the difference between the three types of Tweens, but you’ve just seen how easy it is to create one. To successfully create and precisely control your animation, you have to understand the basics of Flash first. This book concentrates on the foundational skills you need to get started. If you’re using a Macintosh (Mac), you’ll be happy to know that Flash on a Mac is nearly identical to the Windows version. Macintosh keyboards are different from Windows keyboards, though, so use the following legend to translate keyboard commands from Windows: Windows Key
Mac Key
Ctrl
Command „
Alt
Option
Right-click
Control-click
For example, if you see Ctrl+X in this book, on a Mac you use Command+X. The function keys (such as F8) are the same in Windows and Mac; although on some Mac keyboards, you need to press the fn key as you press the function button. Finally, if you are using a Mac and have a mouse that includes a right button, it should be programmed to invoke the Control key.
Getting Your Bearings The key to understanding Flash is always knowing where you are. You’re given the power to edit everything: static graphics, animations, movie clips, and more. It’s easy to accidentally edit an element you didn’t intend to, so
From the Library of Lee Bogdanoff
10
HOUR 1: Basics
you need to be conscious of what you’re currently editing. This section helps you get your bearings. Let’s take a quick tour of the Flash workspace: . The Stage is the visual workspace. Any graphics placed in this area are visible to the audience watching Flash when it plays. . The Tools panel contains the drawing tools.. The Flash tools are covered in depth in Hour 2, “Drawing and Painting Original Art in Flash.” . The Timeline contains the sequence of images that make an animation. The Timeline can also include multiple layers, so certain graphics can appear above or below others, and you can have several animations playing simultaneously. The Timeline is introduced in Hour 7, “Understanding Animation.” . Panels stay out of the way by collapsing to icon view when not in use. Panels can be docked above, below, or to the sides of the Stage, or they can float in front of everything. They can also be organized into groups so that, when expanded or floating, only one panel in a group is visible, while the others in the group are accessible from a tab. In addition, floating panels can collapse vertically like a window shade to appear as a thin strip with just the panel’s tabs visible. You can organize panels to suit your work style.
User is a general term we use to refer to the person watching your Flash movie on your website. Within this book, we refer to the user frequently. Occasionally, we call the user the audience. It doesn’t matter which term you use—just realize that there’s you (the author, creator, or designer), and then there’s the user or audience. As the author, you are able to make edits to the Flash movie, whereas the user can only watch and interact with the movie.
The Stage The large white rectangle in the center of Flash’s workspace is called the Stage. Text, graphics, photos—anything the user sees—goes on the Stage (see Figure 1.3). Think of the Stage as the canvas on which a painter paints or the frame in which a photographer composes pictures. Sometimes you want a graphic to begin outside the Stage and then animate onto the Stage. The gray area around the outside of the white Stage is the off Stage area. You can see the off Stage area only when the View menu shows a check mark next to
From the Library of Lee Bogdanoff
Getting Your Bearings
Panels (docked and collapsed to icon view)
Panels (docked and expanded)
11
FIGURE 1.3 The Stage is the large white box in the center. All the visual components of an animation are placed on the Stage.
This is the Stage
Tools
Timeline
Pasteboard. The default setting (Pasteboard checked) is preferable because it means you can position graphics off the Stage. Realize, however, that any changes you make to the View menu affect only what you see; changes here have no effect on what the user sees. There’s not too much to learn about the Stage—it’s your visual workspace. However, two important concepts are worth understanding now: Stage size and zoom level. By default, the Stage is a rectangle that is 550 pixels wide by 400 pixels tall. Later in this hour, in the “Document Properties” section, you see how to change the width and height of a movie. As a general rule, it’s best to design your movie in the width and height you will ultimately use on your website. Aspect ratio is the ratio of width to height. Any square or rectangular viewing area has an aspect ratio. For example, television (TV) has a 4:3 aspect ratio—that is, no matter how big a standard TV screen is, it’s always four units wide and three units tall. High-definition TV (HDTV) uses a 16:9 ratio as do many widescreen laptops, and 35mm film has an aspect ratio of 3:2 (such as a 4×6-inch print). Most computer screen resolutions have an aspect ratio of 4:3 (640×480, 800×600, and 1024×768). You can use any ratio you want in a
From the Library of Lee Bogdanoff
12
HOUR 1: Basics
web page—just remember that the portion of the screen you don’t use will be left blank. A “wide-screen” ratio (as wide as 3:2, like film) has a much different aesthetic effect than something with a square ratio (1:1). To scale means to resize as necessary. A Flash movie retains its aspect ratio when it scales, instead of getting distorted. For example, you could specify that a Flash movie in a web page scale to 100% of the user’s browser window size. You could also scale a movie with the dimensions 100×100 to 400×400. Although you can scale Flash movies to larger or smaller sizes when you publish them to the web, it’s not a good idea. Some graphic types, like the rectangle you drew earlier, scale well, but some, like photographs you add to your Flash movies, do not. You can zoom in on certain portions of the Stage to take a closer look without having any effect on the actual Stage size. The following task introduces a couple of tools that are important to the Stage.
▼ TRY IT YOURSELF Change Your View on the Stage
In this task, you explore view settings. Follow these steps: 1. Create a new file by clicking File, New, and Flash File (ActionScript 3.0). Select the Pencil tool on the Tools panel (or press Y), and draw a few lines as messy as you’d like, including an X shape in your drawing. 2. Notice the Zoom control at the top right of the Stage (see Figure 1.4). This control provides one way to change the current view setting. Other ways include clicking View, Magnification, and using the Zoom tool (the Magnifier button in the Tools panel), which you learn about in more detail in Hour 2. 3. Change the Zoom control to 400%. Notice everything becomes bigger. You haven’t changed anything except your view of the screen. 4. Unless you have a huge monitor, you probably can’t see the whole Stage. However, you can view other parts of the Stage in one of two ways: by using the standard window scrollbars on the right and bottom or by using the Hand tool. The best way to access the Hand tool is to hold down the spacebar. Go ahead and hold down the spacebar; then, click and drag without releasing the space bar. You’re panning to other parts of the Stage without actually moving any of the graphics that are actually on the Stage. It’s important to understand that the Hand tool changes only your view of the Stage. One of the best things about using the spacebar to select the Hand tool is that it’s “spring loaded”—that is, the Hand tool is active only while you hold down the spacebar. In Hour 2, you learn about other spring-loaded tools.
From the Library of Lee Bogdanoff
Getting Your Bearings
5. Now change the Zoom control to Show All. No matter what your screen size, Flash scales the Stage to fit all the content in your window. 6. Several interesting tools are available from the View menu, including grids, guides, and snap settings. Click View, Grid, Show Grid. Behind all the graphics onstage, you see a grid (which the user doesn’t see), as shown in Figure 1.5. You will see next hour how the grid can help you line up graphics perfectly. Notice that after you select View, Grid, you can click Edit Grid to edit the color and spacing of the grid. Turn off the grid by clicking View, Grid, Show Grid (so no check mark appears next to this menu item). Zoom control
13
▼ TRY IT YOURSELF Change Your View on the Stage
FIGURE 1.4 The Zoom control enables you to zoom in or zoom out of the Stage. Zooming has no effect on what the audience sees.
7. Guides are like the grid in that they help you align graphics and show up on the Stage, but they don’t show up in the published Flash movie. Guides differ from the grid in that you drag guides into place where you want them. First, click View Rulers (so a check mark appears next to this item). Now you can click either ruler and drag toward the Stage to create and put into place a single guide, as shown in Figure 1.6. You make vertical guides by dragging from the left-side ruler, and you make horizontal guides by dragging from the top ruler. To remove the guides, drag them back to the ruler. As with the grid, you find the option to edit the guide settings—as well as a way to lock the guides in place—by clicking View, Guides, Edit Guides.
From the Library of Lee Bogdanoff
14
HOUR 1: Basics
▼ TRY IT YOURSELF Change Your View on the Stage
FIGURE 1.5 Turning on the grid helps you align objects.
FIGURE 1.6 Guides are similar to the grid, but you can position the vertical and horizontal lines wherever you want them.
8. Close the file by clicking File, Close. Don’t bother saving this practice task.
From the Library of Lee Bogdanoff
Getting Your Bearings
15
The Tools Panel The Tools panel is the panel with which you will likely become most familiar. Any time you create or edit anything on the Stage, you need to have one tool selected from the Tools panel. The default location is docked to the left side of the Flash interface. Although the Tools panel is used primarily to draw on the Stage, it’s also used to edit what you’ve already drawn. In Figure 1.7, the Tools panel is divided into several sections. The first five are selection tools, then seven creation tools, four modifying tools, two view tools, five color settings, followed by several options that vary depending on which tool is actively selected. The Tools section enables you to create graphics and text (via the Line tool and the Text tool), to edit graphics (via the Eraser tool and the Paint Bucket tool), and to simply select graphics (via the Selection tool, the Subselect tool, and the Lasso tool). You learn about all these tools next hour. The two view tools (Hand tool and Zoom tool) enable you to change your view of the Stage (as you did in the preceding task). The colors setting gives you control over the color of objects drawn. Finally, the options area includes additional modifiers for certain tools. Depending on what tool is selected, you might not see anything in the options section. You look at these tools in detail in the next few hours (in particular, Hour 2 and Hour 6, “Applied Layout Techniques”). For now, go ahead and play with these tools. If you think you lost the Tools panel, you can restore it by clicking Window, Tools.
Selection tools
Creating tools
Modifying tools
View tools
Colors
Options area
FIGURE 1.7 The Tools panel has tools for drawing, editing, and viewing, plus options that vary, depending on the currently selected tool.
The Timeline You look at the Timeline in depth when you start animating in Hour 7, “but let’s take a quick look now. The Timeline contains the sequence of individual images that make up an animation. When the user watches your animation, he sees the images on Frame 1, followed by the images on Frame 2, and so on. Like all the other panels, the Timeline can be undocked so that it is a separate panel, as shown in Figure 1.8. You click and hold the tab on the upper left to undock it. You can also close it when you need more workspace. You can always make the Timeline visible again by clicking Window, Timeline. When you start to create animations, the Timeline includes many visual cues to help you. For example, you can quickly see the length of an animation
From the Library of Lee Bogdanoff
16
FIGURE 1.8 The Timeline (and other panels) can be picked up and moved like any floating window. To undock the Timeline, click and drag its tab.
HOUR 1: Basics
Title tab
by looking at the Timeline. Also, Flash uses various icons and color codes in the Timeline; this way, you can see how the animation plays. In addition to frames, the Timeline enables you to have as many layers as you want in animations. As is the case with other drawing programs you are familiar with, objects drawn in one layer appear above or below objects in other layers, depending on the layer order. Each layer can contain a separate animation, so multiple animations can occur at the same time, one on top of another. By using layer names and special effects (such as masking), you can create complex animations. Figure 1.9 shows the Timeline and layers of a finished movie. You learn more about layers in Hour 7. FIGURE 1.9 Most animations involve many layers. Each layer is independent of the others.
From the Library of Lee Bogdanoff
Getting Your Bearings
17
The Properties Panel Certainly, you learn to be familiar with more windows in Flash than just the Stage, Tools panel, and Timeline (although these are the basic ones). This section looks at the multipurpose Properties panel (sometimes called the Properties Inspector in previous Flash versions). Although you can find nearly two dozen panels listed in the Window menu, you use one panel almost all the time—the Properties panel. The Properties panel displays properties of the currently selected object so you can make adjustments. For example, when you select a block of text, the Properties panel enables you to view and change the font face and size. When you select a filled shape, you can change the fill color of that shape. In addition to modifying objects onstage, the Properties panel enables you to modify frames in the Timeline (when you select one) as well as the overall Flash document properties (when nothing is selected). Although you look at only a few variations of the Properties panel this hour, you eventually become familiar with the different panels, all listed under the Window menu. Because there are so many panels, later this hour you learn ways to organize them to suit your personal workflow. Using panels is simple. All panels operate in the same manner. You can either keep the panel open and select an object, or open the panel after you’ve selected an object. In either case, the panel always reflects the current settings so you may modify or change them. For example, to change the font size of some text, you select the text, and then make a change in the Properties panel. The key is to keep the text selected while you access the Properties panel. You can also change properties of several objects at once—just select multiple objects (for example, several blocks of text) and make a change in the panel. When selecting multiple objects of different types, only the shared properties are visible in the Properties panel. You learn more about this in the following “Try It Yourself” section. Finally, if nothing is selected, you can still make changes to the Properties panel. Although this seems to have no effect, you’re actually specifying what happens the next time you create an object. For example, if you first select the Text tool and, before creating any text on the stage, you make a change to the font in the Properties panel, you see that font change in the text when you create it.
From the Library of Lee Bogdanoff
18
▼ TRY IT YOURSELF Use the Properties Panel to Inspect and Change Fill Colors
HOUR 1: Basics
In this task, you use the Properties panel to inspect and change fill colors. Follow these steps: 1. Create a new file by clicking File, New to open the New dialog box, Flash File (ActionScript 3.0), and OK. Make sure the Properties panel is open. Its default location is to the right of the Stage. If you don’t see it, click Window, Properties, and Properties. Finally, ensure the Properties panel is at full size by clicking the tiny double arrows to the right of the tab labeled Properties (as shown in Figure 1.10). When undocked, the Properties panel actually has two states: full and mini (fully collapsed). Click the double-arrow button until the panel is full sized. 2. Click the Stage, and then look at the Properties panel to notice the type of information listed (Size, Frames Per Second (FPS), Stage, and so on). The Properties panel is about to change.
FIGURE 1.10 You can click the double arrows so the Properties panel opens all the way.
3. (If the Tools panel is not available, select it from the Window menu.) Select the Brush tool by clicking on it in the Tools panel. (You can see the name of each tool in the Tools panel by leaving your cursor over each for a few seconds.) Notice when you select the Brush tool, the Properties panel changes. Paint a smiley face on the Stage. 4. Before you draw again, click the Fill Color swatch, and select a different color (as shown in Figure 1.11). This specifies what color you’re about to paint.
FIGURE 1.11 Before you paint again, you can select a new color.
From the Library of Lee Bogdanoff
Getting Your Bearings
5. Using the brush, give your smiley face some hair in this new color. Click the Selection tool by clicking the black arrow at the top of the Tools panel or by simply pressing the V key. 6. Click on the right eye of your smiley face. Notice the Fill color on the Properties panel changes back to the original color. Additional information about the shape’s coordinates and size appear. While the shape is still selected, give it a different eye color by changing the Fill Color swatch in the Properties panel and picking the new color. (By the way, the swatch with a red line through it—Stroke Color—is for shapes drawn with the Pencil tool.) 7. We shouldn’t leave our smiley face with two, different colored eyes. Let’s make both eyes match again. Make sure you have one eye selected, and then click and release the Fill Color swatch. While the cursor looks like an eye-dropper, click the other eye to sample its color. This is a quick example of how the cursor changes to tell you what happens when you click.
19
▼ TRY IT YOURSELF Use the Properties Panel to Inspect and Change Fill Colors NOTE
The Coordinate System The coordinate system in all multimedia tools (including Flash) refers to locations by pixels in the x (horizontal) axis and the y (vertical) axis. The top-left corner of the screen (or Stage) is considered the origin or 0x,0y. As you move to the right, the x coordinate increases; for example, 100 pixels to the right has the location 100x,0y. As you move down, the y coordinate increases; the bottom-left corner of an 800×600 screen has the location 0x,600y. Just remember that y coordinates increase as you move down (not up, as you might expect). Here’s an interesting question: What do you think happens if you set the location of an object to –10x? (The object is moved offscreen 10 pixels to the left.)
The Properties panel adapts to show you properties of your current selection of a tool or on the Stage. The following sections explore text options to help you understand this concept.
Exploring Text Options Flash gives you a great deal of control over the appearance of text. While in a new file or the file you used in the previous task, select the Text tool, click the Stage, and then type a few words. When you finish typing, click the Selection tool. Notice the Properties panel enables you to select a different font, change the font size, change the color, and control the text in many other ways. An additional Paragraph submenu enables you to precisely
From the Library of Lee Bogdanoff
20
HOUR 1: Basics
control spacing, margins, and the direction your text flows. You explore these options in depth next hour.
Organizing the Workspace At this point, you’ve probably explored enough to find your panels are scattered all over the screen. This brings up an interesting point: You’re given a lot of freedom with how you organize your panels. There are docked panels, floating panels, and grouped panels. Learning a few concepts makes organizing your workspace easier. Because the changes you make stick until you change them back, click Window, Workspace Layout, Essentials, so you can follow along. A docked panel is one that is locked into the Flash application interface around the outside of the Stage—just as, by default, the Tools are to the far right; the Properties panel is at the right; and the Timeline is at the bottom. Docked panels completely fill the space between the Stage and the edge of Flash’s application window. In addition, you can dock some panels in a single docked area. For example, the Library panel is docked next to and underneath the Properties panel on the right side (by default), and you must click on the tab to see it. You dock (or undock) panels by dragging the panel’s title bar tab. You find a complete explanation with Figure 1.12, later.
TIP
Hiding Panels Depending on your screen size, you might find that the panels are preventing you from viewing the entire Stage. A simple press of the F4 key temporarily hides all the panels (except the Timeline if it’s docked). You can press F4 again to restore them.
If a panel is not docked in the interface, then it’s floating above it. (Click Window, Behaviors to see an example of a panel that’s floating by default.) Additionally, you can dock multiple panels above or below each other into a single docked or floating panel. Finally, regardless of whether a panel is docked or floating, you can also group panels into a single tabbed panel— which is the case (by default) for the Timeline, Motion Editor, Output, and Compiler Errors panels, all grouped together at the bottom. You can think of grouping as stacking the panels in the same location because you can reveal only one at a time—the others in the group are accessed via their tabs. The variations might sound overly detailed, but the options are there so you can change the layout. Each panel has its purpose and that’s never affected by where you decide to put it. The idea is you can organize panels to match your work style. In addition to returning to the default layout, you can save your own layouts. If you find an arrangement that works well for you, click Window, Workspace, and New Workspace. You are then prompted to give your new workspace layout a name. The new name then appears under Window, Workspace. Arranging panels can become frustrating if you don’t know the basics. We highly recommend you spend some time playing with the layout to get
From the Library of Lee Bogdanoff
Getting Your Bearings
21
used to it. If you end up with a bad configuration, you can always use Window, Workspace, and choose one of the built-in workspace settings to get things back under control. Because the Flash panels behave unlike other software packages, the following rundown brings you up to speed (see Figure 1.12). Minimized Panel buttons Close Title tab
Options Menu
Minimize or Maximize
FIGURE 1.12 The anatomy of a panel.
Fly-out panel
Resize
First, every panel has an Options menu at the top right of the title tab. This menu provides additional options related to each particular panel, though often it’s just a link to Help documents. To organize panels, you can minimize any panel by clicking the button near the top right of the panel. When minimized, you only see the panel’s tab on a button. You can click a panel’s icon to make that panel temporarily fly out. When you’re done with the panel, it goes back to the button view. In this way, the panels are still available but nearly completely out of sight when they’re not needed. To undock a panel, you can just drag it by the title tab. As you drag, you get a preview of the other panels it can snap to when you let go by paying attention to the blue highlighting line that appears. You can even dock two floating panels together to make a group. There’s one more thing to notice about docking panels around the outside of the interface. You can see in Figure 1.12 that the rightmost column includes panels that are docked but also expanded. You can resize the column width by clicking and dragging the bottom right corner to make it wider, but there’s a limit to how narrow you make it. It might take some time to get used to how the panels behave, but it’s worth taking the time to play around. After you get it, you are able to quickly organize the panels as needed.
TIP
Preventing Panels from Getting Docked It can be frustrating if, while dragging a panel into a new position, the panel keeps getting docked or grouped with another panel. Simply hold the Ctrl key (Command on a Mac) while dragging, and you keep the panel from docking.
From the Library of Lee Bogdanoff
22
HOUR 1: Basics
The Library The Library is the repository of all the media elements used in a Flash file. You learn to love the Library for many reasons, as discussed in further detail in Hour 4, “Staying Organized with the Library and Layers.” Media placed in the Library can be used repeatedly within a file, and—regardless of how many times you use those media—it doesn’t significantly add to the file size of your final Flash movie. For example, if you put a drawing of an ant in the Library, you can then drag 10 copies of the ant from the Library panel onto the Stage; but deep inside the Flash file, only one cloud exists. Reusing graphics in the Library is one way you can keep Flash movies smaller. In practice, the Library provides you with access to all the graphics available for use in the current Flash movie you’re working on. The Library helps you locate specific elements you are using in your movie and, if you need to, edit them. You often need to edit the contents of one of your Library items. Suppose, for example, the drawing of the ant we just mentioned needs to be altered. Maybe you forgot that ants have 6 legs, and you drew it with 8. You can edit the single ant stored in your Library, and all 10 ants in your movie automatically update to have the correct number of legs. You might need to access the Library panel to organize all the contents or to drag copies (known as instances) of the drawings (known as symbols) into your Flash movie. For example, in the case of the ant drawing, you drag 10 instances of the ant symbol. In this case, you are not changing anything in the Library; you are just reusing symbols stored inside it. A symbol is the name for a visual element you create and place in a file’s Library. After it is in the Library, copies of the symbol can be used multiple times throughout a movie without having a significant impact on file size. An instance is one copy of a symbol used in a movie. Every time you drag a symbol from the Library, you create another instance. It’s not a “copy” in the traditional sense of the word because there’s only one master, and each instance has negligible impact on file size. Think of the original negative of a photograph as the symbol and each print as another instance. You see that, like photographic prints, instances can vary widely (in their sizes, for example). The Library behaves like any other panel, but because it’s so important we wanted to briefly introduce it here. You learn much more about the Library starting in Hour 4.
From the Library of Lee Bogdanoff
Getting Around in Flash
23
Getting Around in Flash As mentioned earlier in this hour, an important concept in Flash is to understand where you are at all times. If you think you’re in the Library, editing the contents of a symbol, for example, you have a problem if you are in fact editing something on the main timeline. It can be confusing because although it’s always possible to figure out where you are in Flash, you can easily get lost. The following sections look at how you can determine where you are in the interface.
The Current Layer Although there’s just one main Timeline, Figure 1.9 showed you that you can have multiple layers on the Timeline. Give it a try: Open a new file and add a layer by clicking Insert, Timeline, and Layer. It is important to realize you can only work in one layer at a time. That is, if you draw or paste graphics, they are added to the currently active layer. The current layer is the layer with the pencil icon, as shown in Figure 1.13. You can single-click another layer to make it the active layer. (Notice the pencil moves to the layer you click.) The key is to always pay attention to which layer you’re currently editing. FIGURE 1.13 Not only is the current layer highlighted, but it also has the pencil icon, indicating that this is the layer where anything that is drawn or pasted appears.
The Current Frame In the Timeline, a red vertical marker indicates which frame is currently being viewed (see Figure 1.14). This red current-frame marker can be in only one frame at a time—the frame you’re currently editing. It’s important to realize where this current-frame marker is located at all times. Right now, you might find that you can’t move the current-frame marker past Frame 1 because your movie only has one frame. If it helps, imagine a time machine. You can visit any moment in time, but you can visit only one moment at a time.
From the Library of Lee Bogdanoff
24
HOUR 1: Basics
FIGURE 1.14 The red current-frame marker (on Frame 11) can be in only one frame at a time.
CAUTION
Deleting Frames Versus Deleting Items Onstage Although you learn much more about making edits to your Timeline and Stage in the upcoming hours, it probably won’t hurt to tell you one of the most common errors that relates to knowing where you are. When you click the Timeline, you actually select items that are on the Stage. This means that if you press the Delete button, you delete the items on the Stage, not just the cell or Frame in the Timeline. New users often assume if they click a Frame in the Timeline and press Delete that Frame will be deleted. To do that, you need to right-click and select Remove Frame. Remember, the Delete button deletes objects on the Stage, not the current Frame.
FIGURE 1.15 Above the top-left corner of the Stage, you see the name of the current scene (in this case, Scene 1). The clapper icon indicates that this is the name of a scene.
The Current Scene or Current Symbol By far, the most difficult concept for new Flash users is that in Flash, more than one Timeline exists! A large or complicated movie can be broken into multiple scenes. You can think of scenes as chapters in a novel. Deep inside Flash, there’s always one long Timeline (just like a novel has one continuous story), but if you break a file into scenes, you can access the scenes individually. This is a nice feature because it means you can easily change the order or sequence of the scenes. You should make a point of paying attention to which scene you’re currently working on. The name of the current scene is always listed above the Stage on the left; it appears on what is called the Edit Bar. The default name is “Scene 1,” and you should see this next to the icon for scenes—a movie “clapper” (see Figure 1.15).
Current Scene
From the Library of Lee Bogdanoff
Getting Around in Flash
25
The Edit Bar often includes more information than is shown in Figure 1.15. When you learn more about the Library in Hour 4, you see how you can nest instances of symbols inside other symbols. When you double-click a complex object, such as a symbol to edit it, everything else on the Stage dims, indicating that those other items are not editable. (This behavior of going inside one object to edit its contents also applies to grouped objects and so-called drawing objects—both of which you learn more about next hour.) In all cases, the best way to determine exactly what you’re currently editing is to look at the Edit Bar. You might see “Scene 1: Car: Rotating Wheels : Wheel” (as shown in Figure 1.16). This means that you’re in the Wheel symbol that is inside the Rotating Wheels symbol that is inside the Car symbol, which is all in Scene 1. Sounds a bit confusing? It won’t. The Edit Bar is very clear—you just have to remember to pay attention to it to keep track of where you are. Edit Bar
FIGURE 1.16 The Edit Bar indicates you’re deeply nested inside a symbol (Wheel) that’s nested inside other symbols.
Navigating Through the Interface You’ve seen how the Flash interface gives you clues that tell you where you are at all times. But how did you get where you are in the first place? And how do you get out? Navigating through a Flash file is easy. Let’s look at a few ways to get around.
From the Library of Lee Bogdanoff
HOUR 1: Basics
26
The Edit Bar contains the hierarchy of your current location, and it also provides a means of navigation. If, for example, you’re inside a symbol within Scene 1, you should see “Scene 1: SymbolName.” If you simply click Scene 1, you are taken back to that scene (see Figure 1.17). Any time you see the Edit Bar, you can click on it to navigate back through the hierarchy. FIGURE 1.17 The Edit Bar provides more than just information. You can click the arrow or any name listed to jump back through the hierarchy. For example, you can click Car to jump all the way back to the Car symbol.
Link to Car symbol
Edit symbol Edit scene
FIGURE 1.18 The Edit Scene and Edit Symbol menus are always accessible at the top right of the Stage. They provide the most reliable way to navigate to other scenes and symbols.
Finally, you should notice two menus way off to the right of the Edit Bar: Edit Scene and Edit Symbol (see Figure 1.18). From these two menus, you can jump to any scene or symbol in the current movie. Of course, if you have no symbols and just one scene, using these menus won’t be very interesting. However, in big files, these menus provide a quick way for you to get around. There are plenty of ways to get around in Flash, and you see them all in this book. For now, try to feel comfortable moving around and be sure to notice the information that Flash provides to tell you where you are.
How Not to Get Lost As a reference, the following is a list of common ways to get lost and how to find your way home. This is a list based on experiences from teaching
From the Library of Lee Bogdanoff
Getting Around in Flash
27
new students—as well as our own experiences getting lost! We’re including things that you haven’t been exposed to yet, so you might want to bookmark this page and revisit it later. . Edit Bar—By far the most common problem is overlooking the fact that the Edit Bar has changed to indicate you’re inside a symbol, group, or drawing object. We’ve said to keep an eye on the Edit Bar, but what if it’s gone? Amazing, but true: You can hide and restore the Edit Bar via the Windows, Toolbars, and Edit Bar menu. We can’t imagine selecting this on purpose, but if for any reason you can’t find it, now you know how to bring the Edit Bar back. . Changing colors—The half-dozen or so color swatches can determine the color you’re about to draw as well as change an existing color. Remember, if you have something selected, it changes when you change the color swatch. Only when nothing is selected can you set the color for what you’re about to draw. Plus (and this becomes clearer next hour), there can be two colors for an object: the outline color, known as the stroke, and the inner color, or fill. You see a pair of swatches quite often indicating these independent colors. . Properties panel—It’s important to know what sort of object you have selected. For example, if you draw a shape with the Brush tool, the Properties panel displays “Shape” when you select that shape. People often forget the Properties panel tells you what you have selected. You may think something is a shape (or other type of object), but use the Properties panel to know for certain. . Info panel—The Info panel displays (and enables you to edit) the size and location of any selected object. In addition, it has a little button that toggles between showing a circle in the bottom right or a plus sign in the top left. This makes the Info panel reflect coordinates for the selected object’s registration point or its transform point. The plus indicates you’re viewing the registration point option, which is usually the object’s top-left corner. The little circle means you’re viewing the object’s transform point (usually its center). What’s very easy to overlook, however, is the Properties panel’s X and Y fields always reflect the object’s registration point.
That’s it for the big pitfalls. There are more, but we’ll be sure to guide you past them as you encounter them in later hours.
From the Library of Lee Bogdanoff
28
HOUR 1: Basics
Document Properties You need to set a few movie-wide settings early in the creation of any movie (things like the background color and height and width). Most of these are found in the Document Properties dialog box, shown in Figure 1.19, which you access by clicking Modify, Document, or by double-clicking the bottom of the Timeline (where you see 12 fps). You should access the Document Properties dialog box now, so you can experiment with a few of its settings. (Notice most of the same settings appear in the Properties panel if you click the Stage or otherwise deselect all objects.) FIGURE 1.19 The Document Properties dialog box provides many global movie settings that should be determined at the beginning of every project.
First of all, you need to make sure that Ruler Units is set to Pixels. This is the standard unit of measurement in multimedia and web pages. It’s important to set Ruler Units to Pixels because this affects several other dialog boxes (including the Info panel). Next to Background Color, you should see a white swatch that, when clicked, enables you to change the Stage color. When you publish a movie to the web, you can specify any background color you want, and it overrides this setting; it’s smart practice to design against the background color you will ultimately use on your web page. Feel free to change the Background Color any time you want while you are editing, but remember to test against the final color of your web page where the Flash will be running. Maybe gray is easier on your eyes, or black makes selecting white graphics easier. Do whatever you want—it only affects the Stage color while you you’re editing, and you can change this setting later. Two other Document Properties dialog box settings are important to establish early in any project: Frame Rate and Dimensions. Frame Rate specifies the rate—that is, how many frames per second—at which Flash attempts to play. We say attempts because some of your users might not have a computer fast enough to keep up, so Flash can’t display the specified number
From the Library of Lee Bogdanoff
Document Properties
29
of frames in a second. Flash does not exceed the frame rate you specify, but it can get bogged down and not keep up. Dimensions are important in that they affect the aspect ratio of your Stage. You need to decide up front on the shape for your Stage. (Sorry, it can’t be round.) Do you want a widescreen CinemaScope look, or do you want a square Stage? You might even want a vertical rectangle, like for a button bar to appear on the left side of a web page. You need to consider this early on because the Stage shape influences how you position graphics and changing it later makes for a lot of repositioning. People often confuse frame rate with speed, which is more of a visual effect. Animators can use tricks to make something appear to speed across the screen even while using a very low frame rate. For example, if you see a picture of a car on the left side of the screen and then the car appears on the right side of the screen a fraction of a second later, it might tell your brain that the car is moving fast. However, such a trick requires only two frames, and at a frame rate of 4 fps, the second frame appears only a quarter second after the first! Frame rate—that is, how many chunks into which each second is broken—controls the visual resolution. Four frames a second may look “chunky”—each change occurs only four times a second. However, 30 fps (equivalent to the frame rate of TV) is such a fine increment that you’re not likely to see the steps between discrete frames. (Although, of course, that’s what’s really happening.) By the way, you can still move a car across the screen in a quarter of a second by using 60 fps—it would just involve 15 frames. You explore this topic in great detail in Hours 7 and 8, “Using Motion Tweens to Animate”.
File Types Clearly, the most common use for Flash is to create interactive animations for the web. Sifting through all the different file types involved can be a little confusing. At a minimum, you need to understand three types: source (.fla) files, exported (.swf) files, and or Hypertext Markup Language (HTML—.htm or .html) files.
From the Library of Lee Bogdanoff
30
HOUR 1: Basics
CAUTION
Source (.fla) Files
Saving as Flash 8 You can actually save a Flash CS4 .fla file to share with a coworker who only has Flash CS3. When you select File, Save As, you need to select Flash CS3 Document from the Save As Type drop-down. Flash strips out any features your file uses that are available only in Flash CS4 (and warns you, too). This feature is great during the transition when people upgrade.
One of the two main file types in Flash is the source Flash movie that you save while working. It uses the file extension .fla (often pronounced “fla”). You can open and edit any .fla file, provided you own Flash. This is your source file. With the .fla file, you can always restore the other file types—but nothing can restore a .fla file (except, maybe, doing all the work over again). When sharing files with others who need to edit the source file, you share the .fla file. Anyone who has Flash CS4 (for either Mac or Windows) can open and edit the .fla file you create. However, you can’t put .fla files into a web page for people to view—they’re just files that contain your source content.
CAUTION
Beware of Fonts There’s one last thing you need to understand now, which applies if you work in a team environment or otherwise plan to exchange .fla files among different machines: Any .fla file you work on opens fine on any machine that has Flash installed. On a Mac, you might need to open Flash, and then select File, Open. On Windows, you might need to make sure that the file is named with the extension .fla.
However, there’s one big catch: The font choice for any text in the .fla file must be present on the machine that is attempting to create the .swf file. It’s not that you can’t share a file if one person’s machine is missing a particular font. Rather, that person cannot edit the text or create a .swf file that has the correct font; he must select a substitute font. Any time you open a .fla file that contains fonts that you don’t have installed, you are given the chance to map
Exported (.swf) Files When you’re finished editing a source file and ready to distribute your creation, you simply export a .swf (pronounced “swif”) Flash Player file. A .swf file can be viewed by anyone who has an Internet browser and the Flash Player plug-in. The audience can’t edit the .swf—they can only watch it. The process for creating a new .swf file is simple. You open a .fla file, click File, Export Movie, and then specify the name and file location for the .swf file in the Export Movie dialog box. Although more details are involved, the important point to understand is that exporting involves creating a new file (the .swf file), but the .fla file remains untouched. It’s similar to using Save As or Save a Copy As in some other software programs. Whatever you do, you should always keep a copy of your .fla file. You can always create more .swf files from it—or make edits, and then create more .swf files.
From the Library of Lee Bogdanoff
File Types
HTML Files That Host the .swf File If you have any experience creating HTML, the basic process of putting .swf files in a web page will be simple for you. If you have no HTML experience, it won’t hurt to learn a little HTML, but you really don’t have to. Remember when you “visit” a web page, you’re not really “going” anywhere. Rather, your browser software downloads a text file (with either an .htm or .html file extension). This HTML file contains not only the words you see on the web page, but additional instructions as well, including the font style and size.
31
CAUTION
Beware of Fonts continued fonts. That is, you can select what alternative font to use. To maintain the appearance of the .swf, you must make sure to have the correct fonts on everyone’s machine or to simply create the .swf file on the appropriate machine.
In addition, the HTML file contains details about any of the pictures that are supposed to be seen on the web page—details such as the image file’s name and from where it should download so you can see it. Putting a Flash(.swf) file in a web page is almost as easy as putting a picture in a web page. A few other details (in addition to the filename of the .swf) can be included, such as the background color, whether you want the movie to loop, and other interesting settings that are unique to Flash. To make this process even easier, Flash includes a feature called Publish (discussed in Hour 20, “Linking a Movie to the Web,” and Hour 24, “Publishing a Creation”), which walks you through the steps of creating both the .swf file and the .html file. Every detail available can be specified in the Publish Settings dialog box (see Figure 1.20). You can specify parameters for each file format that you intend to distribute by using the tabs that appear (only the tabs for the file types you specify appear). FIGURE 1.20 In the Publish Settings dialog box, you can decide what file formats you intend to distribute.
From the Library of Lee Bogdanoff
32
HOUR 1: Basics
Summary We have covered a lot of ground this hour, but you haven’t actually created any finished work. Rest assured you get your hands dirty in the next 23 hours. With the nitty gritty out of the way, you can now focus on creating great Flash movies throughout the rest of this book. In this hour, you’ve explored Flash’s main workspace, including the Stage, the Timeline, and the Tools panel. You’ve learned how to change the Stage size (through the Document Properties dialog box) and how to zoom in (by using the Zoom control). You’ve gotten to see the Tools panel (which you use next hour to create artwork) and the Properties panel that enables you to modify graphics onscreen. Although you haven’t done much with the Timeline, you’ve learned to pay close attention to visual cues, such as the red current-frame marker and the pencil icon, which indicate the active frame and active layer, respectively. In this hour, you’ve learned about other interface elements and navigation tools that help you track your current location at all times. The Edit Bar at the top left always tells you where you are, and the two menus at the top right enable you to navigate to other scenes and symbols (provided that you have some). Finally, you’ve learned about the file formats you’re likely to create in Flash. It’s important to take the time to understand all the files you create. You’ll probably create many files, so it’s also a good idea to keep your files and folders organized so you can track what’s going on. The old saying, “Haste makes waste,” is especially true when you have a million files to track. So take it easy, pay attention to how the Flash interface changes, and have fun.
Q&A Q. When I hold down the spacebar to get the Hand tool and try moving my view up or to the left, I can’t go past the top or left of the Stage. Why? A. Most likely, the View, Pasteboard menu item isn’t selected;, that is, it doesn’t have a check mark next to it. Only when this is selected can you, the author, see outside the Stage. We recommend leaving this setting in the default, selected state.
From the Library of Lee Bogdanoff
Workshop
33
Q. My Properties panel used to be taller. Why can’t I see any Properties? A. The Properties panel actually has two different states. Click the tiny double-arrow button on the far right of the Properties panel’s tab to restore the Properties panel’s full view. If that doesn’t work, try doubleclicking on the title tab.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. How do you open and edit a .swf file? A. You can’t, and unless you have a backup of the .fla file, you’re pretty much out of luck. B. You can simply select File, Open. C. You can import it by selecting File, Import. 2. How can you make your animation appear to play really fast? A. Crank up the frame rate in the Document Properties dialog box to 120. B. Trick the user by employing age-old animation techniques. C. Suggest that users purchase the fastest computer they can afford. 3. What is the standard unit of measurement for web pages and multimedia? A. Inches B. Centimeters C. Pixels
From the Library of Lee Bogdanoff
34
HOUR 1: Basics
Quiz Answers 1. A. Generally, you can’t do anything but watch a .swf file. Truth be told, you can actually import a .swf file (as in Answer C). However, this won’t work if when you exported the .swf file in the first place, you specified Protect from Import in the Flash tab of the Publish Settings dialog box. Also, when you import a .swf file, just the sequence of frames is imported (no interactivity), so it’s rarely very useful. In fact, third-party tools (such as Manitu Group’s ActionScript Viewer, http://buraks.com/asv/)can extract the media and scripts from a .swf. The bottom line is you should always keep a backup .fla. 2. B. Although increasing the frame rate to 120 fps makes Flash try to play quickly, the chances of it actually playing that fast are unlikely (depending on the computer). Although Answer A is not entirely wrong, using age-old animation tricks is the best way. Something doesn’t actually have to move fast to appear to move fast. 3. C. This isn’t an opinion: The standard is pixels.
From the Library of Lee Bogdanoff
HOUR 2 Drawing and Painting Original Art in Flash
Believe it or not, Flash began its existence as drawing software. The creators of Flash intended to make a “more natural” drawing tool. Flash has evolved to become an animation tool and, now, even a rich application development platform. Because you are animating images, it’s convenient if you can draw these images right inside Flash. This hour exposes you to the fundamental drawing concepts in Flash— think of it as your basic training. There’s a lot to cover, and you might find that it actually takes a little longer than one hour to complete. This lesson’s length gives you ample chance to play with all the tools.
WHAT YOU’LL LEARN IN THIS HOUR: . How to draw and paint in Flash . The difference between lines and fills . How to draw geometrically perfect shapes in Flash
If you have little or no background creating graphics on a computer, you’re in luck! Flash is so unique that the less you know, the better—just let your mind act like a sponge and soak up all the information. If you have experience with computer graphics, try to forget everything you know about drawing software and get ready to learn the Flash way. Graphics created in Flash are considered vector graphics (as opposed to raster graphics, which are sometimes called bitmaps). Unlike a bitmap, for which the computer must store information about every single pixel, a vector graphics file contains just the math to redraw the shape. Therefore, a vector circle is described with the mathematical formula for a circle. Vector files are very small (and therefore download quickly), and they scale to new sizes easily. (For example, the radius for a circle can be changed.) Sometimes vector graphics tend to look too “computery,” containing clean lines and solid colors—not in Flash. After you get a feel for drawing in Flash, you should understand why Flash has been called “vector clay”—it’s a vector format at heart, but it can be molded naturally like clay.
From the Library of Lee Bogdanoff
36
HOUR 2: Drawing and Painting Original Art in Flash
Drawing on the Stage Remember from Hour 1, “Basics,” that everything your audience sees is drawn on the Stage, the white rectangular area where you create your animations. Sometimes, you want a graphic to start off the Stage and then animate into view. Drawing off the Stage requires you have the Pasteboard selected with a check mark in the View menu. We recommend you leave this setting checked, but realize the gray area around the outside of the Stage is considered the Pasteboard. This is off Stage and does not appear in your finished movie.
Tools Your drawing tools should appear in the Essentials workspace on the right side of the screen, as shown in Figure 2.1. If the tools aren’t visible, you can access them by clicking Window, Tools. FIGURE 2.1 Flash’s drawing toolbar might look simple, but because most tools have additional options, there’s more than meets the eye.
NOTE
Learning Shortcuts Without Memorizing When you click a tool, it becomes selected. Alternatively, you can select a tool by pressing its shortcut (or quick key). You can see each tool’s quick key when you roll your cursor over the tool. In the ToolTip that appears, you see both the name of the tool and a letter in parentheses. For example, when you roll over the Selection tool, you see “Selection Tool (V).” Pressing the V key selects the Selection tool. (Try it out by first clicking another tool, and then pressing V.)
Selection Free Transform Lasso Pen Line Pencil Deco Bone Eyedropper Hand Stroke Color Fill Color Swap Stroke and Fill Colors
Subselection 3D Rotation Text Rectangle Brush Paint Bucket Eraser Zoom
Set Stroke and Fill to Black and White
Options
The following sections look at how to draw with these tools. You learn about all of them in this hour, although the really advanced techniques are covered in Hour 6, “Applied Layout Techniques.” Keep in mind some tools are grouped together. For example, the Oval tool is hidden under the Rectangle tool. You have to click and hold the Rectangle tool to see a dropdown list of the other tools. As a way to categorize all the tools, realize some tools (such as the Pencil, Brush, and Deco tools) let you create artwork; others (such as the Selection and Zoom tools) simply help you mod-
From the Library of Lee Bogdanoff
Tools
37
ify or view your artwork. Throughout this hour, you also learn how to create and edit artwork.
Viewing and Modification Tools Both View tools—Hand and Zoom—have no effect on the graphics you are creating. You simply use them to better edit your artwork. The following task walks you through a scenario in which you use both tools. In this task, you explore how to use the Hand and Zoom tools. Follow these steps: 1. Click once on the Brush tool in the Tools panel, and then click and drag on the Stage. Draw a tree or some other shape—you can be sloppy.
TRY IT YOURSELF ▼ Use the View Tools to Help You See
2. You can zoom in to closely inspect or change the artwork on stage. Select the Zoom tool, the one that looks like a magnifying glass near the bottom of the panel. Notice, as with many other tools, when you select the Zoom tool, additional buttons appear in the options section at the bottom of the Tools panel. You should see two more magnifying glasses in the options area, as shown in Figure 2.2. FIGURE 2.2 The Zoom tool has two options: Enlarge and Reduce.
3. Make sure Enlarge is selected (the magnifying glass with the plus sign), and then click on the Stage where you drew the shape in step 1. Continue clicking in the same area, and you keep zooming in.
From the Library of Lee Bogdanoff
38
▼ TRY IT YOURSELF Use the View Tools to Help You See
HOUR 2: Drawing and Painting Original Art in Flash
4. While you’re close up, chances are most of the Stage is out of view. Of course, you can use the standard scrollbars on the left and bottom to change the portion of the (now very close up) Stage. You can also do this by using the Hand tool; select the Hand, and then click and drag to change your view. 5. Now you can zoom out. Select the Zoom tool, and make sure you remember to select the Reduce option (the magnifying glass with the minus sign). Click a few times, and you zoom back out.
This task is easy, but there’s more you should know. Using either view tool does not change your file—only your view of it. The View menu provides some of the same functionality as the Zoom and Handview tools (such as zooming in and zooming out). Similarly, none of the View menu options change anything in a file. You used the Enlarge option of the Zoom tool by simply clicking the Stage. Another way to zoom in is to click and drag. You see a rectangle as you drag, and when you let go, that rectangle defines the viewable portion of the Stage. For example, you can click and drag making a rectangle around the intersection of the shape you drew to zoom in on only that portion. You always see the current zoom level displayed in the drop-down list at the top right of the Stage (above the Timeline, if it’s docked), as shown in Figure 2.3. If you click the Zoom control drop-down list, you can return to FIGURE 2.3 The exact zoom level is always shown at the top right of the Stage.
From the Library of Lee Bogdanoff
Tools
39
100%. Another quick way to return to 100% is to double-click the Zoom tool (not the Enlarge or Reduce option, but the main Zoom tool’s magnifier). Speaking of quick techniques, both the Zoom and Hand tools have “springloaded” options. That means while you’re using another tool, you can press and hold down the spacebar to get the Hand tool. Then, when you let go of the spacebar, Flash springs back to the tool you had. Holding down Ctrl+spacebar gives you the Enlarge option of the Zoom tool, and holding down Ctrl+Shift+spacebar gives you the Reduce option. These springloaded features provide quick ways to temporarily select tools without actually going to the toolbar.
Creation Tools Although view tools prove very useful, they can’t change anything on the Stage. To create artwork in Flash, you have to add to an image, change something you’ve already drawn, or remove some or all of what you’ve drawn. In the following sections, you first see how to add to your artwork. This gives you something to change or remove later. Let’s go through each tool individually, and then analyze how they can be used together.
Drawing Lines Two tools are available for just drawing lines: the Line tool and the Pencil tool. (To be fair, the Oval and Rectangle tools draw lines, but they also draw fills at the same time, as you see in the “Painting Fills” section, later in this hour.) Lines can be given a stroke color, a stroke height, and a stroke style. In addition, strokes have settings for Cap (how the line ends) and Join (the look of a corner where two lines meet). What’s interesting is that the geometric definition of a line—the distance between two points—doesn’t include mention of color, thickness, or style. It’s best to think of a line as an infinitely thin line that has a color, stroke (or thickness), and style (such as dashed, dotted, or solid). You can change any stroke attribute any time without changing the underlying line. So much for theory of lines! In the following task, you draw some.
From the Library of Lee Bogdanoff
40
▼ TRY IT YOURSELF Draw and Change Lines
HOUR 2: Drawing and Painting Original Art in Flash
In this task, you begin to draw and manipulate lines. Follow these steps: 1. Start a new file by pressing Ctrl+N and selecting Flash File (ActionScript 3.0). Lines can have different stroke attributes, so make sure the Properties panel is visible and in a convenient place before you begin. If your Properties panel isn’t present, click Window, Properties, Properties (yes, it’s listed in a submenu). The default position for the Properties panel in the Essentials workspace is on the right, as shown in Figure 2.4.
FIGURE 2.4 The Properties panel lets you set attributes of the lines you draw.
2. Select the Line tool by clicking on it in the Tool panel or pressing N. As you might have guessed, the Line tool draws straight lines. When your cursor is on the Stage, it changes to a crosshair. Click and drag to create a line. You might notice a dark ring that appears when you drag your line horizontally or vertically from the starting point. This is Flash’s way of assisting you while drawing. You find drawing perfectly horizontal and vertical lines to be quite easy when the Snap to Objects option is selected from the View Snapping menu. (Holding Shift also constrains the angle to diagonal as well.) 3. Changing any setting in the Properties panel affects subsequent lines you draw. Select a different stroke color in the square swatch on the Properties panel. Then, change the stroke height, either by typing a number in the Stroke height field or by clicking the arrow and dragging the slider. Set the stroke to 15, and draw a horizontal line.
From the Library of Lee Bogdanoff
Tools
For this exercise, we need a total of three copies of this line. Use the Selection tool to select the first line, click Edit, Copy, and then click Edit, Paste in Place. Press the down arrow on your keyboard to move the new line down. Repeat this until you have three identical lines. 4. You can change any attribute of the lines you’ve drawn using the Properties panel if you use the Selection tool to select the line. Select the top line and, from the Cap option menu in the Properties panel, click None. Select the second line, and click Round (the default Cap). Finally, set the last line, and click Square. The different Cap options are represented in an icon that appears on the Properties panel. The easiest way to see the differences is to use the Subselection tool (the white arrow on the Tools panel), and click each line while holding Shift. The skeleton of the line is shown with the two square handles at the endpoints (as shown in Figure 2.5). (Remember to get the Selection tool back—by pressing V—to select the entire line graphic.) Square Cap may appear identical to None, but Square is similar to Round in that it extends both ends of the line by half the stroke thickness. Think of the Round cap as though a compass pinned to the endpoint of the line were used to draw it. Lines have a few other interesting properties that we review at the end of this task. For now, you see some of the options available when drawing lines.
41
TRY IT YOURSELF ▼ Draw and Change Lines None Round Square FIGURE 2.5 To best understand the different cap options for lines, use the Subselection tool.
5. Now select the Pencil tool. Notice the Pencil tool has the option Pencil Style at the bottom of the Tool panel. Click the Style button, and change the Pencil Mode setting by clicking Straighten, as shown in Figure 2.6. 6. The Straighten option attempts to straighten what you draw. Try drawing the letter S. It’s likely to look jagged. Now try drawing the letter Z. It probably looks more like what you wanted. You learn to change the sensitivity later this hour, but drawing these letters should exemplify how the Straighten Pencil Mode setting works. 7. Click the Smooth option, and try drawing an S and a Z. What happens to the S is nice, but the Z has curves where there weren’t any before. The Smooth option can come in handy if you your hand-drawn images look too jagged. Also, notice you can change the degree of smoothing in the Properties panel. This setting for Smoothing (from 0 to 100) is only visible when you have the Pencil Tool (or Paint Brush as you see later) and the Smooth option selected. 8. The Ink Pencil Mode setting draws almost exactly what you draw. Flash adjusts what you draw to reduce the file size. The simple line Flash creates takes less data to describe and results in a smaller file that’s faster to download.
FIGURE 2.6 Pencil Mode is an option that controls exactly how the Pencil tool will behave.
From the Library of Lee Bogdanoff
42
HOUR 2: Drawing and Painting Original Art in Flash
One of the attributes that you haven’t yet experimented with is the stroke style. The drop-down list shows you a visual representation of each style. Solid (the default) is like Hairline, but Hairline effectively sets the stroke height to the lowest number possible. You should use the other fancy stroke styles with caution because the more random-looking ones tend to add to the file size. File size issues are addressed in Hour 22, “Minimizing File Size,” but realize for now that you suffer a significant file size increase if you use some stroke styles. If those stroke styles aren’t enough when a line tool is selected, the Edit Stroke Style button on the Properties panel to the right of the stroke style drop-down provides a way for you to create your own custom stroke styles. The dialog box that appears after you click the Edit Stroke Style button enables you to control several attributes of your own custom line styles (see Figure 2.7). These custom line styles are fun, but be warned, they can significantly add to file size as well! FIGURE 2.7 The Stroke Style dialog box, which is accessed from the Properties panel, enables you to specify details of custom stroke styles.
The Stroke Hinting feature has a very subtle effect. Namely, lines you draw are always anchored on whole pixel numbers. Flash is a subpixel drawing tool, meaning it’s possible to make a line start, end, or pivot on any coordi-
From the Library of Lee Bogdanoff
Tools
43
nate—such as 103.4 pixels from the left. This is the case when Stroke Hinting is not selected. At 100% zoom, such a point is rounded off to 103, but when you zoom in, one normal pixel can take up several actual pixels on the monitor. Not using Stroke Hinting is great for accuracy, but can make thin lines appear slightly blurry because Flash is effectively rounding some points up and rounding other points down. Select Stroke Hinting to ensure sharp-looking lines. Just realize if you zoom way in, the lines might not appear exactly where you position them. Finally, the Scale option is the hardest feature to notice unless you know what you’re looking for. Basically, Scale describes what sort of resizing should cause the stroke to thicken. Say you draw a rectangle that is made of both a stroke outline and a fill interior (which you do later in “Drawing and Modifying Shapes by Using Lines and Fills”). If you enlarge (that is, scale) the rectangle, you may or may not want the stroke to also get thicker. The Scale option for Normal causes the line to thicken in proportion to the scale where None keeps the line appearing in the same thickness. Vertical and Horizontal mean the thickness grows in proportion to the specified scale. For example, a line with Horizontal scale thickens only when you widen it, whereas making it taller has no impact on thickness. The worst part is you can’t see this effect until you put the lines inside a symbol that gets scaled. You do that in Hour 4, “Staying Organized with the Library and Layers.” Lastly, the properties for Join and Miter are discussed later in “Using Snap to Objects to Connect Shapes” because it applies when you connect two lines or when you draw a rectangle with corners.
Painting Fills In Flash, two components to any shape you draw are lines (strokes) and fills. Some shapes are lines (as you saw in the previous section); some shapes are fills (as you’re about to see); and some shapes contain both, as you see later in this hour. Fills and lines are different. A line has no actual thickness—only applied stroke attributes. A fill, on the other hand, has a left side, right side, top, and bottom. If it helps, think of lines as the candy coating on an M&M and fills as the chocolate center. The two tools to create fills are the Brush tool and the Paint Bucket tool. You do a little experimenting with these tools in the following task.
From the Library of Lee Bogdanoff
44
▼ TRY IT YOURSELF Paint Fills
HOUR 2: Drawing and Painting Original Art in Flash
In this task, you explore the basic features and some rather advanced features of fills. Follow these steps: 1. In a new file, use the Pencil tool to draw a few large circles. Make at least one totally closed, one almost closed, and another obviously not closed, as shown in Figure 2.8. 2. Select the Paint Bucket tool. Notice the Options section at the bottom of the Tools panel has two buttons: Gap Size and Lock Fill (see Figure 2.9). For now you explore only Gap Size; Lock Fill is covered in Hour 5, “Controlling Color,” when you learn about gradients.
FIGURE 2.8 These three hand-drawn circles will be filled.
3. If you click with the Paint Bucket tool in an empty part of the Stage, nothing happens. The Paint Bucket tool fills closed shapes with the selected fill color (the swatch next to the small paint bucket in the Colors section of the Toolbox). It also changes the fill color of any fill already created. Change the Gap Size option to Close Large Gaps. Adjusting the Gap Size option should enable you to fill all your circles—even if they are not totally closed.
FIGURE 2.9 The Paint Bucket tool has a Gap Size option that controls the tool’s tolerance.
Gap Size
Lock Fill
4. Select the Brush tool, and quickly draw a line. Because you’ve used the Brush tool, it’s really a fill (not a line), despite the fact that it might look like a line.
From the Library of Lee Bogdanoff
Tools
5. Now, choose a new fill color by clicking and holding the color fill color swatch from the Tools panel. Then select the Paint Bucket tool, and fill the shape you just drew with the Brush tool. Not only can the Paint Bucket tool change the colors of the filled circles you’ve already filled, but it can also change the color of fills created with the Brush tool. 6. Look at the Brush tool’s options area at the bottom of the Tools panel. In addition to the Brush Mode, two seemingly identical black circles appear, but they are actually quite different. The Brush Size controls the brush’s tip size. On the other hand, the Brush Shape option controls the brush’s tip shape. For example, you can have a calligraphy look with the angled tip, as shown in Figure 2.10. Lock Fill is covered in Hour 5, but the other option, Brush Mode, is interesting and is covered in step 7. (If you have a pressure-sensitive tablet connected as a pointing device, you also see the option to Use Pressure, meaning the Paint Brush draws thicker when you press harder.)
45
TRY IT YOURSELF ▼ Paint Fills
FIGURE 2.10 The Brush Shape option affects the style of a drawing, as seen in this calligraphy effect using the angled Brush Shape option.
7. Figure 2.11 demonstrates each Brush Mode option. Try one now. Select the Paint Inside Brush Mode option to experiment with it. Either use the closed circles you drew earlier, or draw a few more circles by using the Pencil tool. Make sure the Brush tool is selected (notice the Brush Mode option remains where you last left it); then, click and paint inside one of the circles. Try painting outside the lines. If you start painting outside the circle, the Paint Inside Brush Mode option prevents you from spilling any paint outside the shape. FIGURE 2.11 The Brush tool has several Brush modes. The Paint Inside example works only when painting inside the house graphic.
Let’s recap a few important points that are consistent for all the tools. First, certain tools have additional options that appear in the bottom section of the Tools panel. If you can’t find an option that you’ve seen before, you have to remember which tool it belongs to. This shouldn’t be too frustrating because any attribute you need to change after drawing is usually found in the Properties panel, which you learn to leave open all the time.
From the Library of Lee Bogdanoff
46
HOUR 2: Drawing and Painting Original Art in Flash
Finally, sometimes the same task can be achieved a number of different ways. For example, you have seen the Zoom command in the View menu, the Zoom tool, and the Zoom setting on the Stage. You have seen the fill color swatch can be changed from the Tools panel, the Properties panel, and the Color panel. The fact that you can do the same task multiple ways means you can find a style that works best for you.
Drawing and Modifying Shapes by Using Lines and Fills When you use either the Oval tool, Rectangle tool, or PolyStar tool, you create a shape by using both a line and a fill. These shapes have a fill and a stroke with all the attributes set in the Properties panel. You can draw an oval or a rectangle that has no fill by changing the fill to No Color (the red line in a box, as shown in Figure 2.12).
FIGURE 2.12 When you use the Oval tool or Rectangle tool, one option for the fill color is No Color (shown as a red slash).
No Color
Similarly, you can create a shape without a stroke by changing the stroke color to No Color. These tools are pretty self-explanatory. Besides the fact these tools share the same slot in the Tools panel, two confusingly similar additional tools are the Rectangle Primitive and Oval Primitive tools. Naturally, these also draw ovals or rectangles, but unlike the other three tools, (Oval, Rectangle, and PolyStar) the primitives can’t be modified in the extreme ways you can with the other shapes. You can scale, skew, and rotate primitives, but they’re not composed of fills and strokes because you can’t really change the stroke the way you can with shapes you draw with other tools. If you want to draw a rectangle and plan to bend one of its sides to make it look like it’s bulging out, use the regular Rectangle tool. If, how-
From the Library of Lee Bogdanoff
Tools
47
ever, you know the shape is always a rectangle, use the Rectangle Primitive tool. The cool part about primitives is you can come back later and use the Properties panel to make modifications, say, to the corner radius of a Rectangle Primitive. In the case of the plain rectangles, you can set the corner radius in the Properties panel before you draw, but can never modify what you’ve drawn. Primitive shapes were new to Flash CS3. Despite the many options available, creating ovals and rectangles is easy. The following task walks you through a couple of ways you can create and modify them.
This task combines what you’ve learned about fills and shapes and shows you a few more tricks. Follow these steps: 1. Select the Oval tool, and then set the stroke height (in the Properties panel) to 5 or greater.
TRY IT YOURSELF ▼ Draw and Modify Shapes
2. Select colors for both the stroke and the fill—just not the No Color diagonal red line. 3. Draw a circle. A circle is just an oval that happens to have equal height and width. To draw a circle, hold down the Shift key while you draw. 4. Select the Rectangle tool, change the fill color, and draw a square (by holding down Shift while you draw). As with the Line tool and Oval tool, if Snap to Objects is selected in the View menu, the Rectangle tool snaps in certain places to form a perfect square, so you don’t have to hold down Shift. 5. To change the fill color of the circle, select the Paint Bucket tool, pick a new fill color, and then click inside the circle you drew. The current fill color is applied to the circle’s fill. The Paint Bucket tool is easy to understand—it either creates a fill or changes a fill. 6. Select the Ink Bottle tool, and then pick a different stroke color. Click the edge of the circle you drew. The stroke color changes. What’s really nice about this feature is that the Ink Bottle tool affects only lines so you don’t have to be particularly careful where you click because only the line portion changes. 7. The Ink Bottle tool doesn’t just change the color of the stroke. When the Ink Bottle tool is selected, you can select a different height (say, 10) from the Properties panel. While there, pick a different stroke style. Click the circle again. You’re affecting all the stroke portion’s attributes. 8. Similarly to how the Paint Bucket tool can create a fill, the Ink Bottle tool can create a stroke where there wasn’t one to begin with. Use the Brush tool to draw a quick shape. Then select the Ink Bottle tool, and click the fill you just created. You add a stroke to the fill, effectively outlining it.
From the Library of Lee Bogdanoff
48
HOUR 2: Drawing and Painting Original Art in Flash
The preceding task shows two fundamental components to the shapes you create—lines (or strokes) and fills—and each has a different set of tools. The Oval tool and Rectangle tool can create both strokes and fills at the same time. To create a new fill or affect one that’s onscreen, you use the Brush tool or Paint Bucket tool. You can create lines by using the Pencil tool or the Line tool, and you can change their characteristics by using the Ink Bottle tool. It’s easy to remember the Ink Bottle tool draws lines because (when the Tool panel is two columns wide) the Ink Bottle appears in the left column of tools—under the Line and Pencil tools. The Paint Bucket tool is under the Paint Brush tool.
Creating a Fill with the Deco Tool The Deco tool is new to this version of Flash. It enables you to fill shapes (similar to using the Paint Bucket), provides you with the option to fill using a stylized pattern or grid (rather than a solid fill) and draws on top of any existing fill. To quickly understand what the Deco tool does, try this quick exercise.
▼ TRY IT YOURSELF Fill the Stage with the Deco Tool
This task shows you how the Deco tool can fill both shapes and the entire stage. Follow these steps: 1. Open a new file and draw a rather large rectangle with a red fill color, a black stroke color, and a stroke size of 1. 2. Click on the Deco tool. On the Properties panel under the Drawing Effect drop down box, choose Vine Fill. 3. Click inside the red rectangle with the Deco tool. By default, this tool fills the rectangle with a flowering vine pattern. It’s not like a regular fill because it is drawn on top of existing fills and sometimes leaves large areas empty, as you can see from Figure 2.13. You learn more about customizing this tool to create patterns with your own graphics in Hour 5. 4. Now change the Drawing Effect to Grid Fill. Click on the white part of the Stage. Your Stage should now be filled with evenly spaced black squares. Just like the vine pattern, this can be customized with your own graphics, which you learn about later.
From the Library of Lee Bogdanoff
Tools
49
TRY IT YOURSELF ▼ Fill the Stage with the Deco Tool FIGURE 2.13 The Deco tool draws patterns on top of existing fills rather than replacing them.
The other drawing tool we haven’t discussed yet is the Pen tool. The Pen tool is primarily used to draw lines, but any time you use it to draw a closed shape, the shape is filled automatically. Later in this hour, you see how to modify drawn shapes, including how to remove the fill. By simply clicking with the Pen tool, you can add sharp anchor points on straight lines. The Pen tool also draws curves. Instead of just clicking to create a point, you click and drag to create a curve. The direction in which you drag creates what becomes a tangent to your curve. The distance you drag determines how gradual or extreme the curve is. Let’s experiment with these Pen tool basics in the following task, so this makes more sense.
From the Library of Lee Bogdanoff
50
▼ TRY IT YOURSELF Use the Pen Tool
FIGURE 2.14 The Pen tool changes to include an extra circle, indicating a click encloses the shape you’re drawing.
FIGURE 2.15 When clicking to make an anchor point, if you drag (to the right, in this case), you establish a tangent for the curve that’s created.
HOUR 2: Drawing and Painting Original Art in Flash
In this task, you use the Pen tool to draw controlled shapes. Follow these steps: 1. To begin, open a new document. We’re going to draw a diamond by using the Pen tool. Rather than drawing the shape, click and release for each of the points of the diamond. Start by selecting the Pen tool. In the Properties panel, set the stroke thickness high (say, 20) and set the Join option to Miter. Begin creating your diamond by clicking and letting go near the bottom of the page. This is the bottom point of the diamond. Then, drag up and to the left and click once for the left corner of the diamond. Click and release for the top and right corners as well. Finally, move your cursor near the first point you created. You should see the cursor change to include a little circle, as in Figure 2.14. Later in this hour, you learn how the cursor frequently changes to provide information. For now, know the little circle on the Pen tool indicates if you click it, you enclose the shape you started. Click to enclose the shape. Try repeating this step by first setting the Join option to Round; the corners in the diamond look much different. 2. Next, draw a V shape by using the Pen tool. Click once for the top-left point of the V; drag down and click once for the bottom point; and then, drag up and double-click for the third and final point (the top-right point). Double-clicking finishes the shape, even if it’s not enclosed; if you click again elsewhere on the Stage, you are starting a new shape or line. Therefore, four ways to finish what you’ve started with the Pen tool are to click and to enclose the shape (as you did in step 1). A fourth way is to simply select another of the drawing tools or press the Esc key. 3. Now we create a curved line. Select the Pen tool to make sure you’re starting a new line, and then on the left side of the screen click once and let go. 4. You need to lay down an anchor point on the curve you want to create, so click and drag before you let go. Above and to the right of the first place you clicked, click and hold the mouse down. While holding down the mouse button, if you move the mouse to the right, you see your horizontal tangent causes a curve to appear and then level off, as shown in Figure 2.15.
FIGURE 2.16 Depending on the direction of the tangent (in this case, upward), the curve changes.
5. Continue to hold down the mouse button while moving the mouse straight above the second point, and you should see the shape of the curve is completely different because the tangent you’re creating is different (see Figure 2.16).
From the Library of Lee Bogdanoff
Tools
6. Finally, while still holding down the mouse button, you can increase or decrease the distance you’re dragging from the point you clicked. This changes the curve’s arc. Before your hand gets tired, move the mouse to the right. Then double-click down to the right at about the same height as the first point to make an arc. Even though this curve has three points, only the middle one needs a curve—that is, when you create the first and last points, you don’t click and drag.
51
TRY IT YOURSELF ▼ Use the Pen Tool
You can edit any drawn shape in the same manner in which you drew lines with the Pen tool in the preceding task. You just select a shape by using the Subselect tool (the white arrow at the top right of the Tools panel), and you see the same handles and anchor points as in the preceding task.
Creating Text Now for a graphic element that involves neither line nor fill. In this section, you explore creating text. To create text, you simply select the Text tool, click, and start typing. When you first make the text, if you click and drag, you are setting the margins; otherwise, the margins adapt to what you’re typing. You can modify the font, color, and style of what you’ve typed after you create it. Modifying your text after it’s typed usually makes sense because then you are able to best judge how it looks. Creating text in Flash has never been easier or more sophisticated. The following task walks you through a couple quick maneuvers. In this task, you explore using text in Flash. Follow these steps:
TRY IT YOURSELF ▼
1. In a new file, select the Text tool, click the Stage, and then type a word; we typed Hello. This click-and-type technique expands the margin for the block of text to the exact width of whatever you type. The circle that appears at the top-right corner of the text block indicates the margin automatically adjusts in this way (see Figure 2.17).
Create and Style Text
2. When you click and drag this circle to adjust the width, it turns into a square to indicate the margins are fixed. You can double-click the square margin control to restore the automatic margin adjustment (that is, to make it a circle again).
FIGURE 2.17 The circle in the top-right corner indicates the margins adjust to fit what you type. Once you’ve set the margins by dragging any handle on the text, the circle turns to a square.
From the Library of Lee Bogdanoff
52
▼ TRY IT YOURSELF Create and Style Text NOTE
Adjusting Text Margins By the way, if you had clicked and dragged with the Text tool to the right before typing (instead of clicking and then typing), you would have created a margin in one step. You can always adjust the margins later, too. There are two ways: If you’re editing the actual text, you use the circle or square in the top-right corner; or, if you’re not actually editing the contents of a text block, you can still select it using the Selection tool. In this case, you can change the margins by dragging any of the square handles in the corners.
HOUR 2: Drawing and Painting Original Art in Flash
3. While editing the text block, you can set the margin. Make sure the Ibeam cursor is blinking in the block; click inside the block of text, if necessary. Grab the little circle at the top-right corner of the text block, and widen or narrow the block of text. The circle margin handle changes to a square, which indicates margins are set and any text you paste or type into this block wraps when it reaches this margin. Go ahead, and type a couple lines of text. You should see the text wrap even though you didn’t press the Enter key. 4. Now that you have some text in the block and have set the margins, it’s time to modify some attributes of the text. Two ways to modify the text include: selecting all or some of the characters or adding more where you’re editing the contents of the text; or, selecting the entire block and picking it up, moving it, or modifying the attributes. This is not the same as simply selecting all the characters while editing the block. Click the Selection tool to stop editing the text. Your text block should be selected. If it isn’t, click it once, and a rectangle appears around it. 5. With the block selected, observe the Properties panel to make modifications. For now, modify the text’s color, font, and font height, as shown in Figure 2.18. Any setting you make here applies to all characters in the text because you’re editing the entire block. Most of the Properties are easy to learn. There’s an especially nice feature that always displays a preview of the type face when you select a different
FIGURE 2.18 The Properties panel enables you to change text attributes, such as font size and color.
From the Library of Lee Bogdanoff
Tools
font. The preview displays the characters you have selected if you’re editing the contents of the text block. For example, if you double-click and then select some of the characters, those characters appear in the preview.
53
TRY IT YOURSELF ▼ Create and Style Text
6. Change the text style of part of your text block to bold or italic by first selecting the characters you want to change and then selecting bold or italic. Double-clicking the text block automatically selects the Text tool. You can select the characters as you would in any word processor by clicking and dragging. While some text is selected, use the Properties panel to change the selected text. If you want to change the font, the preview includes the text you have selected. You can use this method to change the properties of individual characters within any block of text. 7. Switch to the Selection tool, and select the block of text. Using the Properties panel, change the alignment to Align Center under the Paragraph section of the panel, as shown in Figure 2.19. Explore the other settings, which control attributes such as the margin padding and line spacing, by clicking the Format button. FIGURE 2.19 When the block of text is selected, use the Properties panel to change the alignment (to Align Center, in this case).
A few options are shown in Figure 2.19 that we haven’t covered yet. Specifically, the Text type options (Static, Dynamic, or Input) are explored in Hour 16,
From the Library of Lee Bogdanoff
54
HOUR 2: Drawing and Painting Original Art in Flash
“Basic Interactivity.” For now, you should always leave the Text Type dropdown in the Properties panel set to Static Text. When you do this, the text you type never changes, and your audience sees the same font you’ve chosen. Dynamic is for text that needs to change while the movie runs, and Input is for text you want to let the user change. The Selectable button gives your users the ability to select and copy the text. Another important option is the setting for Font rendering. This lets you control how the text aliases, which affects how it will appear—most notably, when the text is very small. Generally, you should select the rendering option by eye—that is, simply select the option that looks best given your font, font size, and other layout conditions. For tiny text, like 8 or 10 point, Bitmap text is a good option—although you should always at least preview how Anti-alias for readability looks. The option for Use Device Fonts is effectively no anti-alias (like Bitmap text); however, users have to have the same font installed on their machine or a substitute is used—so this is a risky option. There are two reasons to consider the Anti-alias for animation option: First, if the text is being moved for an animation, it looks smoother; second, this is the only version of anti-aliasing available when you plan to deliver your site to users with older Flash players, which we discuss booking Hours 20, “Linking a Movie to the Web,” and 24, “Publishing a Creation.”. Finally, the Custom Anti-alias option lets you fine tune the thickness and sharpness for any look you prefer.
Aliasing and Anti-Aliasing Anti-aliasing is a way of smoothing otherwise rough diagonals and curves with a blurry fuzz. If you zoom in on a diagonal line without anti-aliasing, you see a stair-case effect. Adding fuzz can make that diagonal line look better; albeit blurrier. Normally, anti-aliased text appears smoother and is much more pleasing. One problem arises when the anti-aliased text is small—it can be too blurry to read. In earlier versions of Flash, the only viable solution for small text was to turn off anti-aliasing completely, which is still sometimes the best option. In addition, anti-aliasing affects how fast animated text can fly across the screen.
Selecting and Transforming Objects Now that you’ve seen how to create lines, fills, deco fills, shapes (with both lines and fills), and text, it’s time to explore how to modify them. The process seems simple. You select the object you want to modify by using
From the Library of Lee Bogdanoff
Selecting and Transforming Objects
55
the Selection tool, and then you modify it. But, selecting exactly what you want to modify is often the most challenging part. The following section looks at some of the fundamentals, and you learn even more about this in Hour 5, “Controlling Color.”
Object Draw Mode Versus Merge Mode Before we can discuss selecting objects, you need to understand the difference between the two ways to create objects: Merge mode and Object Draw mode. By default, and any time you don’t have the Object Drawing option selected at the bottom of the Tools panel, you’re in what’s called Merge mode. In Merge mode, most of the drawing tools create shapes with the exception of the Rectangle Primitive, Oval Primitive, and Text. These fills and lines are all drawn on the same plane—meaning that if you draw two shapes on top of each other, the one drawn second wipes away any part of the first shape that’s underneath the second. This behavior can actually be used to your advantage although it is disorienting to many at first. Object Draw mode makes everything you draw a Drawing Object. Unlike shapes, Drawing Objects can be stacked and don’t eat away at each other. Despite the fact we’ve taught hundreds of students how to draw in Merge mode in earlier versions of Flash, Object Draw mode is a more intuitive way to learn. Normally, the Draw mode you have selected affects what you draw. When you’re in Object Draw mode, each time you click to draw a line, fill, rectangle, or oval you create a new Drawing Object. Deep inside that Drawing Object is a shape. You can double-click to edit the contents, and you find a plain old shape inside. It’s mildly confusing because Rectangle Primitive and Oval Primitive objects behave similarly to Drawing Objects as they’re stackable, but you can’t double-click a primitive to edit its contents. You might need to access the shape inside a Drawing Object to select and change, move, or delete part of the object. You learn much more about selecting shapes later this hour, but selecting a Drawing Object means selecting the whole object. When you’re done editing the shape inside a Drawing Object, you double-click the object or click the blue arrow button at the left of the address bar, as shown in Figure 2.20. Because Drawing Objects contain shapes that don’t modify any shapes underneath them, it shouldn’t be a surprise that Flash provides a way to convert a shape(s) into a Drawing Object. To convert a shape into a Drawing Object, select all the shapes you want, and then click Modify, Combine Objects, Union. Similarly, if you want the contents of a Drawing Object to be a
From the Library of Lee Bogdanoff
56
HOUR 2: Drawing and Painting Original Art in Flash
FIGURE 2.20 Use the address bar (officially called the Edit Bar) to return to your main stage when you’re finished editing the contents of a Drawing object.
shape, then select the Drawing Object, and click Modify, Break Apart. Realize those shapes now behave like any shape and can be erased by other shapes on the sole plane where all shapes reside. The whole concept of shape versus Drawing Object only applies to lines and fills. Text and primitives behave more like Drawing Objects (though, they’re really neither) because they don’t eat away at other things you draw. Another tidbit to know is you can always toggle between Object Draw mode by pressing J. This only affects things you’re about to draw, not things you’ve already drawn. (To do that, use the Modify menu as mentioned previously.) Object Draw mode is more intuitive at first, but you can also learn to love Merge mode. The following is a quick review in order of importance: . Realize you can only select an entire Drawing Object, not just some or portions of the shapes contained. . To get to the shapes inside a Drawing Object, double-click. Be careful not to get lost while inside—remember to exit the object by clicking the left arrow in the address bar. . The setting in the Tools panel (for Object Draw mode or not) affects new things you draw; for example, to convert an existing shape(s) to a Drawing Object via Modify, Combine Objects, Union, or to turn a Drawing Object into a shape, click Modify, Break Apart.
From the Library of Lee Bogdanoff
Selecting and Transforming Objects
57
Selection Tools The two basic selection tools are the Selection tool and the Lasso tool. The Subselect tool is the white arrow. It is for selecting and editing individual anchor points in the same way the Pen tool created them. If you’re familiar with controlling shapes by using the Pen tool, this section will be familiar to you. If you’re not familiar with using the Pen tool, you should master the basics before working with the Subselect tool. This section concentrates on just the Selection tool and the Lasso tool. The Selection tool can seem so simple that it’s not worth discussing, but it’s actually quite powerful. You’ve already used the Selection tool to select an object by clicking it once. The key to the Selection tool is the cursor changes to tell you what happens when you click. You can try this tool on a couple simple shapes in the following task. In this task, you explore how the Selection tool’s cursor changes to inform you what happens when you click. Follow these steps: 1. Select the Oval tool, but before you draw, select a very thick stroke height (5 or so) in the Properties panel. Turn on Object Drawing via the button at the bottom of the Tools panel. Draw a circle, and then select the Rectangle tool. Turn off Object Drawing, and draw a square.
TRY IT YOURSELF ▼ Use the Selection Tool to Select and Modify Shapes
2. Choose the Selection tool. Move the cursor to the middle of your square. The cursor changes to include the move symbol, indicating that if you were to click and drag, you would start moving this fill (see Figure 2.21). 3. Click and drag. Notice that only the fill of the square moves. Select Edit, Undo (or press Ctrl+Z) to restore the fill. Also, make sure nothing is selected by just clicking the white area of the Stage or pressing Esc. 4. Position the cursor over the circle you drew. If you click and drag you’ll move the entire circle because it’s a Drawing Object. Its fill and stroke are contained in one object. 5. Move the cursor so that it is near the outside edge of the square. The cursor adds a curved tail, as shown in Figure 2.22. Now if you click and drag, you bend the line. Go ahead and click and drag to the left, and the line portion of the square bends. Notice that the fill bends with the line. This cursor behavior is consistent for Drawing Objects or shapes. However, because it’s possible to select the square’s fill and stroke independently, as it’s a shape, you’ll need to just click and drag—don’t click and then click and drag because that selects then moves the stroke portion.
FIGURE 2.21 The Selection tool’s cursor changes when it is on top of a fill to indicate that clicking will start to move the fill.
FIGURE 2.22 When the cursor is near a line, it changes to indicate that clicking will start to bend the line.
From the Library of Lee Bogdanoff
58
▼ TRY IT YOURSELF Use the Selection Tool to Select and Modify Shapes
HOUR 2: Drawing and Painting Original Art in Flash
6. Make sure nothing is selected and move the cursor so that it’s near another corner of the square. A corner shape is added to the cursor, which means that if you drag, you’ll be moving the corner point (see Figure 2.23). Try it. It’s like you’re bending the line, but instead you’re just moving the corner. 7. You’ve seen the cursor communicate what will happen when you click and drag. Now you can use the Selection tool to simply select something. For instance, clicking anywhere on the circle (the line or the fill) selects the entire Drawing Object. However, you can select just the line portion of one side of the square by clicking it.
FIGURE 2.23 When the Selection tool is near a corner, it shows yet another cursor, this time indicating that you can extend the corner.
8. With part of the square’s stroke selected, notice that the cursor adds the “move” symbol when you’re near the selected line. Click and drag now, and you can move the stroke. You can also just press Delete to remove that line portion. Do so now. 9. Deselect everything (by clicking a blank area onstage or pressing Esc) and this time double-click on what’s left of the square’s stroke. When you double-click a stroke, you select the entire stroke. At this point, you could move or delete the stroke. Just leave it for now. 10. The circle was easy to select because it is a Drawing Object. Because the square is just a regular shape, if you click the fill, you select just the fill. If you click the stroke, you select just one side. If you doubleclick the stroke, you select only the stroke portion. However, if you double-click the fill of the square you should find that the entire square is selected. Now you can move or delete the square. In fact, you could even select Modify, Combine Objects, Union to turn the square into a Drawing Object. Don’t bother, though. 11. Another way to select the square is to marquee it. With the Selection tool still selected, click outside the square and drag until you you’ve drawn an imaginary rectangle that surrounds the square entirely. When you let go, the square becomes selected. In the case of a Drawing Object, or primitive, your marquee need only touch the object to select it.
FIGURE 2.24 Sometimes using the marquee technique would select more than what you want.
12. Sometimes the arrangement of other shapes onscreen makes the marquee technique difficult or impossible. Notice in Figure 2.24, you can’t marquee just the square without selecting part of the circle. In fact, there’s a preference (Edit, Preferences, General) called Contactsensitive Selection and Lasso tools, but that setting doesn’t affect selecting shapes. To select the square in such a sticky situation as Figure 2.24, you could simply double-click the fill of the square. However, there’s another tool you can use to do this: the Lasso tool.
From the Library of Lee Bogdanoff
Selecting and Transforming Objects
13. Select the Lasso tool and then click and drag around a shape to select it. The Polygon Mode option for the Lasso tool makes the tool act almost like the Pen tool, though the Polygon Mode behaves like a string or rubber band. Select the Polygon Mode option, as shown in Figure 2.25, and click onscreen and let go. Then click and release in a new location to extend the selection. Continue to extend the selection and then double-click when you’re done. There’s also a spring-loaded way to access the Polygon Mode: hold down the Alt key while you click. In this case, double-clicking the fill would probably be easier, but often when you’re selecting several objects, you need to use this method. 14. Finally, you can decide to select just a portion of a shape. Suppose you want to chop off the top of the square. You can use either the Lasso tool or the marquee technique with the Selection tool to select the portion desired (see Figure 2.26). If you want to select just part of the circle you need to first double-click (to enter the Drawing Object) and then you can select the contained shapes as normal. Just remember to get back to your main stage by clicking the left-arrow in the address bar.
59
TRY IT YOURSELF ▼ Use the Selection Tool to Select and Modify Shapes
FIGURE 2.25 The Polygon Mode option for the Lasso tool lets you click for each corner of the selection you want to make.
FIGURE 2.26 Using the Selection tool to marquee just part of a shape chops off the top of the circle in this case.
You use the Selection tool to employ the marquee technique. If you click and drag an object, it moves or bends. However, when you click the Stage where there are no objects, you see a rectangle appear while you drag (this is the marquee). You can draw that rectangle around other objects, and they will be selected when you let go. Using this marquee technique to select objects is often easier than clicking to select objects. You’ll learn how to modify what you’ve selected in the next section, but at this point, you have the fundamental selection techniques under your belt. More advanced techniques are discussed in Hour 5, but the best clue as to what will happen if you click is how the cursor changes. You’ll find many places in Flash where the cursor is communicating information to you. For
From the Library of Lee Bogdanoff
60
HOUR 2: Drawing and Painting Original Art in Flash
example, you can draw a line and see the cursor changes discussed in the preceding task.
The Dropper Tool One of the easiest ways to modify what you’ve drawn is to change the color. For example, the Paint Bucket tool can change a fill color, and the Ink Bottle tool can change a stroke color and other attributes. This works fine when you first select the fill color, for example, and then select the Paint Bucket tool and click a fill to change it. But suppose you want one fill to match the color of another. The Dropper tool lets you sample a color from an object that is already onscreen. The cool part is that it actually samples more than just color, as you’ll see in the following task.
▼ TRY IT YOURSELF Select Attributes with the Dropper Tool
In this task, you’ll use the Dropper tool to select color and additional attributes. Here are the steps to follow: 1. Select the Oval tool, set the stroke height to 10, and draw a circle. Change the stroke height, the stroke color, and the fill color. Then draw another circle. Finally, change both the stroke and fill color settings and draw a third circle. 2. At this point, if you wanted the second circle to have the same fill color as the first circle, you would have to change the fill color. If you remember the color, you’re in luck. Even better than relying on your memory, you can select the Dropper tool. Notice how the cursor changes to include a brush when you’re over the fill of the first circle, as shown in Figure 2.27. This indicates that if you click, you’ll select the fill attributes of this shape.
FIGURE 2.27 The Dropper tool changes its cursor to indicate that it will sample a fill when you click.
3. With the Dropper tool, click the center of the first circle. Not only does the fill color change to the sampled fill color, but the Paint Bucket tool also becomes active. You can now fill the second circle with the color sampled by the Dropper tool.
From the Library of Lee Bogdanoff
Selecting and Transforming Objects
4. If you want to match the strokes on both circles, you could use the Ink Bottle tool, but you would have to set all the attributes manually. It’s far easier to use the Dropper tool to sample all the stroke’s attributes in the first circle. Select the Dropper tool and move it near the stroke of the first circle. Notice that the cursor changes to include a pencil (see Figure 2.28). This indicates that you’ll be sampling the stroke (or line portion) of that shape.
61
TRY IT YOURSELF ▼
FIGURE 2.28 The Dropper tool changes its cursor to indicate it samples a stroke when you click.
5. Click to sample the stroke, and you see the stroke attributes update in the Properties panel. Also, the Ink Bottle becomes active, so you can click the second circle to change its stroke. Remember the Dropper tool samples all attributes, not just color.
Transforming Scale, Rotation, Envelope, and Distortion You’ve seen how to bend, extend, and move shapes by using the Selection tool and how to change shapes that are already onscreen by using the Ink Bottle and Paint Bucket tools. There are still more ways to modify the objects you select. The Free Transform tool is your key to even more modifications. Basically, you select an object with the Free Transform tool active. Up to four options appear any time you use the Free Transform tool and have an object selected. You can also find these options by selecting Modify, Transform. In the following task, you experiment with these options.
From the Library of Lee Bogdanoff
62
▼ TRY IT YOURSELF Transform Drawn Objects
HOUR 2: Drawing and Painting Original Art in Flash
In this task, you explore the four basic options for the Free Transform tool. Follow these steps: 1. Use the Rectangle tool and with Object Draw mode turned off, draw a square. Select the Free Transform tool. It shares a slot in the Tools panel, so you can click and hold the Gradient Transform tool to see it. You can always select Free Transform by pressing Q. With the Free Transform tool selected, double-click the center of the square to select it entirely. (Interestingly, the Free Transform tool can perform many selection tasks.) 2. At this point, none of the four options should be selected (see Figure 2.29). This means you’re in Free Transform mode, and if you have a steady hand, it’s possible to rotate, scale, or distort the shape.
FIGURE 2.29 When an object is selected, you can choose the Free Transform tool’s Scale option.
3. Explore the possibilities by rolling your cursor over the square handles at the corners and sides of the shape, but don’t click yet. Depending on where you move your mouse, the cursor changes to two versions of the Scale option, as well as Rotate and Skew (as in Figure 2.30). If you hold down Ctrl, the corners make the cursor change to the Distort option. 4. Free Transform mode can be really touchy, so let’s go through the options individually. The selected object shows square handles in the corners and on the sides. Notice the cursor changes when you roll
From the Library of Lee Bogdanoff
Selecting and Transforming Objects
63
TRY IT YOURSELF ▼ Transform Drawn Objects
Scale both dimensions (corner)
Scale one dimension (side)
Rotate (corner)
Skew (side)
FIGURE 2.30 Depending on which handle you grab and which option is selected, you can use both Scale and Rotate to modify the shape in multiple ways.
over these handles. The corner handles let you scale both width and height equally and at the same time. The side handles let you change just width or just height. Click and drag a corner handle to change the scale. This version of Scale (compared to Scale in Free Transform mode) maintains your shape’s proportions horizontally and vertically. Now drag a side handle, and you change just the width. 5. Make sure the square is still selected, and choose the Rotate and Skew option. Now the corner handles rotate and side handles skew. Roll your cursor over the handles to see the cursor change. 6. Click and drag a corner handle and notice you can rotate the square. Actually, if the default Snap to Objects option is selected (that is, if the magnet button is pressed in, as shown in Figure 2.31), the object snaps into place at 15-degree increments. You learn more about this in the next section, “Using Snap to Objects to Connect Shapes.” 7. Select the Distort option. Drag the shape by the handles on the corners to distort. The Selection tool can create the same effect as Distort, but only when the shape itself has a corner to grab. Without this Distort option, you would find making a distorted ellipse nearly impossible. Finally, try holding down the Shift key and dragging a corner handle when you distort. This way, you can distort two sides evenly. 8. Finally, the wildest of transformation options is Envelope. To best understand this option, draw a new square, select the Free Transform tool, and click the Envelope option. When your shape is selected, you see many handles. Move the square handles to influence the shape.
From the Library of Lee Bogdanoff
64
▼ TRY IT YOURSELF Transform Drawn Objects
HOUR 2: Drawing and Painting Original Art in Flash
It’s as though the shape tries to touch all the squares, even if they’re pulled out to one side. The circle handles are like the tangents created when you draw using the Pen tool. They control the rate at which a shape bends to reach the square handles.
FIGURE 2.31 If Snap to Objects is turned on, when you rotate an object, it snaps to logical positions, such as 45 degrees.
Handles are little white squares that let you stretch, rotate, or otherwise transform a selected object. When you select an object, it is either highlighted or appears with a box around its edges. When you select the Free Transform tool’s Scale or Rotate and Skew options, for example, handles are added to the selection. Different handles often have different functions, but the cursor change is your best clue as to exactly what happens when you click. Don’t overlook the fact you can select more than one shape or object, and then transform everything that is selected at the same time. Also, you can find all the tools explored in the preceding task by selecting Modify, Transform. Another way to do all these things is in the Transform panel. The Transform panel lets you rotate or skew any selected shape. You can also remove transformations immediately after making them by clicking the Reset button in the Transform panel (or by using the keyboard shortcut Ctrl+Shift+Z). Finally, an interesting button is the Copy and Transform button in the Transform panel. This button duplicates the selected object and applies the most recent transformation every time you click it. The result is a spirograph effect.
From the Library of Lee Bogdanoff
Selecting and Transforming Objects
65
Using Snap to Objects to Connect Shapes One of the most helpful features in Flash is Snap to Objects. By selecting View, Snapping, Snap to Objects (or clicking the Magnet button at the bottom of the Tools panel when the Selection or Free Transform tools are active), you can draw perfectly round circles, horizontal or vertical lines, and much more. The visual cue that Snap to Objects is helping you is the dark ring that often appears next to your cursor while you drag. When you see that ring, you know Flash is trying to help you draw. You might already know from using other software that holding the Shift key constrains your cursor similarly to Snap to Objects, but Snap to Objects can do much more. In addition to helping you draw perfect shapes, Snap to Objects also enables you to connect two shapes. It’s more than simply making two shapes touch—they actually become bonded. In Flash, unless two shapes have been snapped together, they can look connected when they actually aren’t. For example, you draw an arrow in the following task, but unless the arrow head is snapped to the arrow’s body, it might not remain visually connected when you scale it to a larger size. After a shape is snapped to another, it’s forever connected.
This task walks you through some of the amazing ways Snap to Objects helps you draw. Follow these steps: 1. Confirm that Snap to Objects is selected in the View, Snapping menu, and then click the Rectangle tool. While you click and drag, if you’re close to drawing a perfect square, you see the dark ring appear near your cursor (see Figure 2.32).
TRY IT YOURSELF ▼ Use Snap to Objects to Draw Perfect Shapes and Connect Objects
2. Select the Line tool and draw a line at a 45-degree angle elsewhere on the Stage. This time you have to hold Shift as you draw the line to constrain it to 45 degrees. 3. Connect the top of the line to a corner of the square. To do so, click the Selection tool; make sure before you click and drag the end of the line that the cursor changes to show the corner tail. You can then click and drag to extend the line, and you see it snap to the square. Keep dragging and notice how the line can snap to a corner or a side. Several different logical locations exist on the square; snap the line to a corner.
FIGURE 2.32 If Snap to Objects is turned on while you’re dragging with the Rectangle tool, a dark ring appears to help you create a perfect square.
4. The last step probably changed the angle of your line, so click Edit, Undo (or press Ctrl+Z) and try again. This time, single-click the line to select the whole thing, let go, click the end of the line, and drag to
From the Library of Lee Bogdanoff
66
▼ TRY IT YOURSELF Use Snap to Objects to Draw Perfect Shapes and Connect Objects
HOUR 2: Drawing and Painting Original Art in Flash
move it. You should be able to snap the end of the line to the corner of the square (this time without changing any angles). The only tricky part of this step is that when the line is selected, if you don’t pick up and drag the line from the end point or the middle, you don’t see the dark ring. If you don’t see the dark ring, you need to let go and try picking up the line again. 5. Now draw near the diagonal line two lines that are almost parallel to it. 6. Use the Selection tool to extend by dragging the end points of the two lines. Extend one end to connect to another corner of the square and extend the other end to the end of the 45-degree line, as shown in Figure 2.33.
FIGURE 2.33 You can extend lines to connect end points by dragging.
7. To confirm that everything is truly snapped together, use the Selection tool to drag the corner point where all three lines merge. If everything is snapped properly, all three lines move at once and don’t disconnect from the object to which they’re snapped.
The preceding task gives you just a taste of how you can create perfect shapes by using Snap to Objects. Consider, for example, vertical and horizontal lines. If you draw a vertical line, select it, and then pick it up from the center, you can snap it to the right end of the horizontal line. Then, you can just drag the point of intersection to the right while remaining constrained to the same horizontal line, which the dark ring helps you do. You’ve created a perfect arrow. Another related snap feature is called Snap Align. Snap Align creates dashed vertical and horizontal lines that appear when you’re dragging an object (shown in Figure 2.34). When you select View, Snapping, you find settings to edit or disable Snap Align. If you select View Rulers, you can click in a ruler and drag it onto your Stage to create guides. If View, Guides, Snap to Guides is selected, you can draw objects that are lined up with and connected to the guides. The guides are just for your use—they’re invisible to your audience.
FIGURE 2.34 Snap Align helps you align objects with intuitive and subtle dashed lines.
Finally, if you ever find Snap to Objects or Snap to Guides distracting, remember you can turn them off. Maybe you want to draw two lines really close together, but you don’t want them to snap together. In addition, you can control the sensitivity of Snap to Objects or Snap to Guides (and other ways Flash tries to improve your drawings) by selecting Edit, Preferences to open the Preferences dialog box, and then selecting the Drawing tab.
From the Library of Lee Bogdanoff
Selecting and Transforming Objects
67
Summary This long hour looked at practically every drawing tool in Flash. You have learned how to create lines, fills, combination shapes, and text. After you created some objects, you found ways to modify their color, shape, size, rotation, and location. In addition, you have learned about the two drawing modes in Flash: Object Draw and Merge mode. You’ve learned how to snap two shapes together. Even if you don’t think you’ll be creating artwork in Flash or you’re working with someone else who’s the artist for your team, you should understand two important concepts: First, the simpler the shape, the smaller the file. Second, only shapes that are snapped together are truly connected. Of course, if you’re going to create the artwork, thanks to what you’ve learned in this hour, you now know how to use the fundamental drawing capabilities in Flash.
Q&A Q. What’s the purpose of the little white circle that appears in the center of a shape when the Free Transform tool is selected? It doesn’t seem to do anything. A. That circle is the transform center point about which the shape rotates when you rotate it. By editing the location of this circle, you can rotate an object around a point other than its visual center. Q. Why does my Brush tool appear to be working when I click and hold, but when I release, nothing has been painted? A. You probably have the Brush tool’s Brush Mode option set to Paint Selection, in which case only fills that were previously selected are painted. Other Brush Mode options can also cause unexpected results if they were set accidentally. Q. It looks like there are a bunch of other tools (and options that appear at the bottom of the Tools panel) that we haven’t looked at. Are we going to go through each one in detail? A. Many of the rest of the tools and options are covered where applicable in Hour 5. However, given the foundation this chapter has provided, you should feel comfortable exploring some of the other tools. For example, the Eraser tool has a modifier called Eraser Mode that’s strikingly similar to the Brush Mode and Pencil Mode of other tools. Try to apply the knowledge you’ve gathered in this hour, and we bet you can figure out most of the other tools on your own.
From the Library of Lee Bogdanoff
68
HOUR 2: Drawing and Painting Original Art in Flash
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. The quick key for the Selection tool is V, for the Pencil is Y, and for the Brush is B. What’s the best way to find the quick keys for the other tools? A. By looking at the front of this book where they’re all listed for your reference. B. By going to the Adobe website. C. By rolling your cursor over the tool and waiting for the answer to appear as a ToolTip. 2. Is there more than one way to set fill color? A. Yes. Anyplace you see a swatch, you can set the fill color. B. Yes. The fill color swatch appears in many places, and setting any of them affects all the others. C. No. You must set the fill color from the fill swatch in the drawing toolbar (the swatch with the Bucket icon).
Quiz Answers 1. C. Although Answers A and B might be true, the simplest way is to use the ToolTips. Although the default is Show ToolTips, you can change this setting by selecting Edit, Preferences. 2. B. You don’t need to memorize all the places where the fill swatch appears; any fill swatch will do. Of course, you can’t change the fill color by adjusting just any swatch—it must be a fill swatch, not a stroke swatch.
Exercise The Exercise section consists of exercises to help you practice the material covered in this hour. 1. Try your hand at creating perfect geometric shapes, such as cubes. Use Snap to Objects to help you. 2. Another idea is to try to copy a logo from a familiar brand-name product. This forces you to break down the task into geometric shapes.
From the Library of Lee Bogdanoff
HOUR 3 Importing Graphics into Flash
In the last two hours, you’ve seen how you can create sophisticated custom graphics quickly in Flash. Despite how powerful Flash’s graphic creation tools are, eventually you might need to import graphics created elsewhere. You might need to use photographic images or existing graphics created from another graphics program. In this hour, you learn how to import external graphics into Flash.
Vector Graphics Versus Raster Graphics Vector graphics have certain characteristics that are due to how they are stored by a computer. A vector graphics file contains the math to redraw the image onscreen. For example, a circle includes information such as the radius, the line thickness, and the color. All the graphics you create inside Flash are vector based. Vector graphics have two advantages: The file size tends to be small (therefore, it downloads fast), and the image can be scaled to any size without any degradation of the image quality (a circle is still a circle, even if it’s a large circle).
WHAT YOU’LL LEARN IN THIS HOUR: . Differences between vector and raster graphics . Ways to avoid imported graphics . How to import vector graphics . How to import bitmap (raster) graphics . How to optimize and maintain the best quality possible when importing
Vector graphics are great, but it’s important to realize their disadvantages. Vector graphics require the user’s computer to work hard to display the image, so you may see slower performance if an animation contains complicated vector graphics. Also, vector graphics can look “computery” or antiseptic because they tend to involve geometric shapes. Both disadvantages can be overcome, but you should be aware of them. Vector graphics are predominately used in Flash movies because, as you see in later hours, you have more control over how they can be animated.
From the Library of Lee Bogdanoff
70
HOUR 3: Importing Graphics into Flash
Bitmapped graphics (also called raster graphics) are fundamentally different from vector graphics. A raster graphics file contains the color information for each pixel. If the image is 100 pixels by 100 pixels, that’s 10,000 pixels, each of which has a color value. As a result, raster graphics are almost always relatively large files. Raster graphics also can’t be scaled effectively. They tend to get grainy, similar to a photograph that has been enlarged. An advantage of raster graphics is they appear onscreen very quickly. It might seem that vector graphics are obviously the better choice. However, the decision of whether to use vector graphics or raster graphics should be based on the nature of the image. If the image is geometric, with clear delineations of color, a vector graphic is the best choice. If the image is a photograph of a person or a geographic location, nothing but a bitmap will do. Selecting which format to use is pretty easy when you know the considerations of each type.
Reasons to Avoid Importing Graphics Flash’s capability to create nice vector graphics can be the best justification for this warning: Don’t import graphics into Flash unless you have to! In this section, you learn how to import graphics—but that doesn’t mean it’s always a good idea. If there’s one way to make your Flash movie download or play more slowly, it’s importing graphics unnecessarily. You need to find ways to avoid importing graphics. Wanting to import graphics is a natural tendency. If you show a graphics professional who’s an expert with Adobe Illustrator or Adobe Photoshop how to draw in Flash, his first question is how to bring his Illustrator or Photoshop files into Flash. We will show you how in the next section. Designers can create amazing and complicated vector graphics with other drawing tools. Some of the ways graphics files get more complicated include the use of gradients, intricate text, and lots of individual objects. Using such complicated graphics in Flash causes two problems. First, Flash can’t always handle all the intricacies in a complicated file, so sometimes the imported file doesn’t look as it was designed. Second, a complicated file downloads and plays more slowly than one that isn’t as complicated—so consider why you would want such a file in a Flash movie. The number one consideration when deciding whether to import a graphic into Flash should be whether a simpler version can be recreated in Flash or whether the graphic can at least be simplified before being imported into Flash. If From the Library of Lee Bogdanoff
Importing Vector Graphics
71
you ask the graphics person to recreate the image in Flash, he might say it doesn’t enable him to do what he intended. In that case, perhaps the solution lies in making the graphic simpler—not by squeezing it into Flash. Having said all this, you probably still need to import graphics at some point—maybe you have a raster graphic, like a photograph, that you want to use, or perhaps you have a simple existing vector graphic, such as a company logo, that you don’t want to redraw in Flash. We discuss raster graphics in the section “Using Bitmaps (Also Known as Raster Graphics),” later in this hour, but first let’s look at importing vector graphics.
Importing Vector Graphics There might be times when you have an existing vector graphic that you need to include in a Flash movie. In general, unless it’s complicated, you are able to import it into Flash. Although Flash can import several vector file formats, the two most reliable formats are Adobe Illustrator files (.ai) and Adobe Flash SWF files (.swf). The main choice is whether you try to import a native .ai file, or first generate a .swf from your graphics program and import that .swf. You can use Flash to export a .swf, but we are referring to using a graphics tool to export a .swf file. Illustrator and Freehand, as well as many other tools, have special export features that take care to generate a .swf that’s free from any special features only supported in those tools. Importing from file is as simple as selecting File, Import, and then pointing to the file you want, as shown in Figure 3.1. You see several file types listed, but that doesn’t mean they all work equally well. Not only are several image file formats listed, both raster and vector, but video and audio file formats also appear. Let’s first look at the best choices for vector image imports: Illustrator and SWF.
Importing Illustrator Files Flash CS4 has an extremely seamless Illustrator importer feature. All you do is select File, Import, Import to Stage, and select an .ai file. The import dialog appears as shown in Figure 3.2, and you see all the layers and even the nested hierarchy of groups and path layers as it was laid out in Illustrator. This means it is as simple or as complex as the graphic artist made it. Having so many layers listed can seem complicated, but there’s surprisingly little to learn in this dialog. It’s also possible to import directly from From the Library of Lee Bogdanoff
72
HOUR 3: Importing Graphics into Flash
FIGURE 3.1 Importing images can be as simple as selecting the file you want to import.
Illustrator by using copy and paste. This achieves the same effect if you have both programs open. It also works well if you only want to selectively copy part of your Illustrator file, and not the entire thing. FIGURE 3.2 When you import an Illustrator file, you see all the layers in the original file.
The basic approach to importing is to first decide which layers you want to import, and then decide (either individually or globally) the manner in which you want to import those elements. You might want to leave everything in a vector form or treat some elements as bitmapped graphics. Additionally, options let you create movie clips as you import. We talk about them in Hour 4, “Staying Organized with the Library and Layers,” but
From the Library of Lee Bogdanoff
Importing Vector Graphics
73
briefly, movie clips are self-contained objects that can be easily recycled throughout your Flash movie. To exclude specific layers from import, click to remove the check mark next to that layer. Unchecking a layer that contains nested layers excludes all the nested layers, as shown in Figure 3.3. FIGURE 3.3 The settings at the bottom left of the Illustrator Import dialog affect every layer you’re importing. Individual layer options appear on the right side.
TIP
Quick Layer Selecting You can quickly check or uncheck a series of layers if, when you click one layer’s check mark, you keep your mouse pressed and continue to drag over other layers’ check marks.
After you’ve decided which layers you’re going to import, you can decide how those elements should be imported. The global settings that appear at the bottom left of the import dialog (as shown in Figure 3.4) affect everything you import. The simplest way to import every selected layer is to select the option Import as a single bitmap image. Although this retains the image and all the fidelity created by the artist, the imported image can’t be scaled without losing quality. That is, if you convert the image to a bitmap, the image has all the characteristics of bitmaps. Such an imported bitmap supports transparency and behaves as a PNG file, which you learn more about in the section “Using Bitmaps” later this hour. A few more global options worth noting appear in the bottom-left area of the dialog box. The option to Place Objects At Original Position is a nobrainer. Even if you don’t force your Stage size to match the Illustrator file (the second check box), having items placed in their relative position is vastly more convenient. You can always move the items to a new location if you want, but it would be tedious to move them into place later. Finally, the Convert Layers To drop-down menu defaults to turn Illustrator layers into
From the Library of Lee Bogdanoff
74
HOUR 3: Importing Graphics into Flash
FIGURE 3.4 The settings at the bottom left of the Illustrator Import dialog affect every layer you’re importing. Individual layer options appear on the right side.
Settings that affect the current layer
Settings that affect all layers
Flash layers. This makes sense because Flash, just like Illustrator, has layers that affect the visual stacking. You can also choose to place all imported layers into a single Flash layer, and you still get the visual stacking you’d expect. Flash layers do more than just affect the visual stacking; they also let you maintain independent animations. The point is that you don’t have to create a new Flash layer for each layer in the Illustrator file. Finally, the option to turn Illustrator layers into Flash keyframes is useful if the artist created an animation frame by frame but put each step of the animation into a new layer. Naturally, this takes some coordination with the artist, and most artists don’t use Illustrator as an animation tool. Assuming you aren’t opting to import everything as a single bitmap image, you can individually set options for each layer you’re importing. Click the layer, not the check mark, and to the right you see the options shown in Figure 3.4. The options available for individual layers present you with two decisions: First, do you import as an editable vector graphic (editable path) or as a bitmap? Second, do you want to create a movie clip while you’re importing? If you’re never going to scale the object and you’re either planning to
From the Library of Lee Bogdanoff
Using Bitmaps (Also Known as Raster Graphics)
animate the object or the image is very complex, then you may consider converting it to a bitmap. In most cases, you want to leave it as a vector. Next hour you learn all about movie clips, and you can consider revisiting this dialog then.
Importing Flash Player Files The simplest and most consistently reliable option for importing vector graphics into Flash is to import Flash SWF files. Most graphics people don’t think of .swf as an image file format—it’s even listed as Flash Movie in the import dialog. A one-frame movie is really a graphic. Of course, a .swf file is not like a FreeHand file or an Illustrator file because it’s not fully editable. When using newer versions of Illustrator, you can export your working files directly into the .swf format. They export amazingly well; the final files are quite small; and the images retain all the details and quality of the originals.
75
NOTE
Bitmaps Import as JPG If, when importing an Illustrator file, you choose to convert objects to bitmap graphics, know that they are treated as JPGs, not PNG. Later this hour in the section “Using Bitmaps,” you learn how imported bitmaps can be treated as either JPG or PNG. For now, you might need to come through and clean up the imported bitmaps if you want to change them to PNG.
The best process is to create a graphic in whatever program you prefer, and then if that program doesn’t export .swf files, open the file in a program that does, such as Illustrator, Fireworks, and several others. Simply export it as a .swf file, and then import the .swf directly into a Flash file. Even if the graphics program you use doesn’t export .swf files, you can open the file in a tool that supports .swf and export it from there. The graphics tool you select must export files in a format that is supported by the tool you use to export .swf files.
Using Bitmaps (Also Known as Raster Graphics) In this section, you see how bitmap (raster) graphics can be used in Flash. Raster graphics have inherently unique characteristics that can’t be created inside Flash. The only warning related to using this option is to make sure you really need raster graphics. The following are some cases that justify the use of raster graphics: . A photograph—The only time to consider using a vector alternative to a photograph is when the picture is of a geometric object. Otherwise, photographs should be raster graphics. . A series of still images—These may be extracted from frames of a short video.
From the Library of Lee Bogdanoff
76
HOUR 3: Importing Graphics into Flash
. An image with special effects that can’t be achieved with a vector tool—Examples include clouds, fire, water, and other natural effects. Of course, this is a challenge for a talented artist to re-create such an effect by using a vector tool such as Flash.
If you’re unfamiliar with the difference between vector graphics and raster graphics, learning when one choice is better than the other can take some time. The file formats .gif, .jpg, .png, .bmp, and .pct are all raster graphics formats. However, because a file was saved in one of these formats doesn’t mean it was automatically the best possible choice. It’s the nature of the image in the file that matters. If all you have is a .gif, for example, you need to first look at its contents to judge whether it’s appropriate as a raster graphic. An easy way to decide is if you can trace or redraw the image in the file (for instance, with Flash’s drawing toolbar) you’re much better off redrawing it. If it’s a photograph, you would never be able to re-create it with vector graphic drawing tools, so leave it as a raster graphic. If it’s a picture of a plain box, maybe you could draw it and thus take advantage of raster graphics. To make matters slightly more complex, you can use Photoshop to create and edit layered bitmapped images. When importing Photoshop documents, you can decide exactly how to import each individual layer. In addition, Photoshop supports editable text, which isn’t a raster graphic. Because importing Photoshop files is more involved, a separate section, “Importing Layered Raster Graphics,” that discusses importing such layered documents following the more general discussion of importing flat raster graphics.
Importing Flat Raster Graphics Importing a flat raster graphic (that is, not a Photoshop file), is pretty simple to do. You click File, Import, and Import to Stage, to open the Import dialog box, and then point to any raster graphic that Flash supports, such as .jpg, .png, .gif, .bmp, .tif, or .pct. That’s it. Importing not only places the graphic on the Stage, but also puts a master bitmap item into the Library. If you import a raster graphic and then delete the object from the Stage, the master bitmap item is still in the Library panel, which you can open by selecting Window, Library. It’s called a Bitmap Item, and it has a little icon that looks like a picture of a tree (as shown in Figure 3.5).
From the Library of Lee Bogdanoff
Using Bitmaps (Also Known as Raster Graphics)
Bitmap Item icon
77
FIGURE 3.5 After you import a raster graphic, the Bitmap Item appears in your Library panel.
After a raster graphic is imported, you need to keep it in the Library. The Bitmap Item icon that appears in the Library provides a way to specify how the image should be exported when you create a movie for the web. If you leave it unchanged, your raster graphics export under the default settings. You can also specify special settings for just that image. In the following task, you import a raster graphic and explore some of these settings.
In this task, you import a raster graphic. Follow these steps: 1. In a new file, select File, Import, and Import to Stage to open the Import dialog box, and then select a .bmp, .pct, .png, .jpg, or .gif file. If you don’t have an image handy, visit any web page and rightclick an image to select an option to save it on your desktop. Then, use that image as the file to import into Flash. Don’t import an image saved directly from a digital camera because it’s probably huge.
TRY IT YOURSELF ▼ Import a Raster Graphic
2. Click the graphic on the Stage and delete it. Because it’s a raster graphic, it’s still safely stored in the Library. 3. Open your Library by selecting Window, Library or by pressing Ctrl+L. 4. Click the line in your Library that has the tree icon and the name of the file you imported.
From the Library of Lee Bogdanoff
78
▼ TRY IT YOURSELF Import a Raster Graphic
HOUR 3: Importing Graphics into Flash
5. In the Library, select Options, Properties. The Options menu is inside the Library window at the top right. The Bitmap Properties dialog box shown in Figure 3.6 appears. Your dialog box might look slightly different, depending on what type of file you imported. 6. In the Bitmap Properties dialog box, decide what export settings to use for this graphic. Leave this dialog box onscreen while you walk through the next section.
FIGURE 3.6 The Bitmap Properties dialog box offers control over how each bitmap item in your Library is treated during export.
Adjusting Bitmap Properties TIP
Zooming Compression Preview When testing different compression settings, you can zoom in on the preview window on the Bitmap Properties dialog by right-clicking and choosing Zoom In.
Flash imports all kinds of raster formats, but uses only JPEG, GIF, or PNG in an exported movie. In addition, any raster graphic is generically called a bitmap item after it’s inside Flash’s Library. No matter what file type you import, you must use the Bitmap Properties dialog box to choose between JPEG (and its compression level) and lossless GIF/PNG for exporting. If you decide to use JPEG compression, you want to experiment with different settings and click the Test button after each change to see the effects on both image quality (in the little picture at the top left) and file size (in the text information at the bottom of the dialog box), as shown in Figure 3.7). The process involves experimentation—making adjustments and viewing the corresponding results.
From the Library of Lee Bogdanoff
Using Bitmaps (Also Known as Raster Graphics)
File size information
79
FIGURE 3.7 Selecting a low JPEG compression (10) and clicking Test provides a preview of the resulting image and its file size.
CAUTION
Three Ways to Use Imported Raster Graphics
JPEG compression is usually the most efficient option. Unless you import a .png or .gif, Flash sets the bitmap properties to JPEG by default. It’s slightly confusing because if you import a .jpg file, Flash uses Imported JPEG Data by default, as shown in Figure 3.8. This option tells Flash to maintain the imported file’s original compression (that is, don’t recompress). Leaving this option selected is generally desirable because it’s a bad idea to recompress. FIGURE 3.8 Only imported .jpg files enable you to use the JPEG compression contained in the original file.
Importing other popular formats, such as .bmp and .pct, also causes Flash to opt for JPEG compression by default. And even though you are using a Bitmap file type and not JPEG, as shown in Figure 3.9, the options remain the same. You can control what compression method is used on individual imported images by deselecting Use Document Default Quality or deselecting Use Imported JPEG Data, but keep in mind the earlier caution about recompression. When this option is deselected, a field appears where you can type the
There are three suitable approaches to using raster graphics in Flash. First, you can start with the highest-quality image possible (for instance, .png, .bmp, or .pct), and then experiment with Flash’s JPEG compression to find the best compromise. Second, you can import a .bmp, .png, or .pct and leave the image uncompressed; this gives you the highest quality and also the largest file size. This is also the only option to maintain a .png’s transparency settings. Finally, you can use image editing software, such as Fireworks, to create a .jpg file with the best compromise of file size and quality that can be imported into Flash. This way you can take advantage of the Selective JPEG feature in Fireworks. If you use this option, remember to leave the Use Imported JPEG Data option selected. If the image has already been compressed (using JPEG compression), you shouldn’t allow Flash to recompress because the result would be a poor quality image.
From the Library of Lee Bogdanoff
80
HOUR 3: Importing Graphics into Flash
FIGURE 3.9 When you import non-.jpg files, you can still use JPEG compression settings.
JPEG compression level you desire. Instead of guessing what compression level is best, you can use the Bitmap Properties dialog box to experiment. A lower number results in a smaller file but also lowers the quality. If you click Test after each change, you see a drastic difference between 100 and 1. After you make each change, you can click the Test button to review the effect on file size and quality, as shown in Figure 3.10. You should experiment until you get the best compromise of image quality and file size. FIGURE 3.10 Setting the quality to 5 cuts this image size to less than 1/100 of its original, but the quality is visibly affected.
The image portion shown in the image window at the top left of the Bitmap Properties dialog box shows exactly how the image looks when it is exported. You can zoom into this window by right-clicking, and then you can pan around to get a better view. If you plan on compressing an image inside Flash, you might want to use PNG. This file type compresses better than JPEG and results in a better quality final image.
From the Library of Lee Bogdanoff
Using Bitmaps (Also Known as Raster Graphics)
81
Figure 3.11 shows the results of using several different compression levels on the same image. Notice JPEG 80 and JPEG 100 are almost identical in quality, but JPEG 80 has a much smaller file size. You get the ultimate quality by using the compression option Lossless (GIF/PNG). It is selected by default when you import .png and .gif files, but you can select it any other time you want to use it. When this option is FIGURE 3.11 The results of different compression settings on the same image shows how quality degrades and file size shrinks.
selected, Flash leaves the image in its original state. This option always provides the best quality—but not without a price. File size is highest when this option is selected. This is a suitable alternative if you’re making a movie that doesn’t need to download from the web—for example, if you’re making a presentation that you are delivering on your hard drive or CDROM. Otherwise, you should use this option only on images where you want to retain the best quality possible. If your imported image is a .gif that already has a small file size, selecting Lossless is perfectly suitable. Because even 100% JPEG compression causes some image degradation, the Lossless option is suitable for images that are particularly important. Finally, the only way Flash supports 32-bit graphics (that is, raster images with varying degrees of transparency) is through .png items that you set to Lossless. The fact that PNG is the only format that supports transparency is another perfectly legitimate reason to use PNG.
From the Library of Lee Bogdanoff
82
HOUR 3: Importing Graphics into Flash
Smoothing Regardless of which compression option you use for your imported bitmaps, Allow Smoothing (as shown earlier in Figure 3.10) is another option in the Bitmap Properties dialog. If you plan to scale or rotate the raster graphic, you want to click that check mark. Normally, a bitmap with its explicit number of pixels looks fine without smoothing. However, smoothing lets Flash apply a tiny bit of blur when the image’s pixels don’t align perfectly with the screen’s pixels, which is the case when you rotate or scale an image. You can see the effect of smoothing in a side-by-side comparison in Figure 3.12. FIGURE 3.12 Applying smoothing to the image on the left improves it when rotated, but the same effect makes the image look soft.
The downside of smoothing is images can look a bit fuzzy, so don’t use it if you’re not rotating or scaling the image. If you’re using the image in a detailed animation, you want to opt for smoothing. Compared to how raspy a modified image looks without smoothing, you probably want to click the check mark to enable smoothing when appropriate.
Importing Layered Raster Graphics Flash CS4 can import Photoshop .psd files. The value is that artists can work in Photoshop, and you can conveniently import the graphics they create. Compared to having the artist individually export each element and then you import it and place it in the correct position, this is a huge workflow improvement. What’s doubly great about this new feature is that it’s so intuitive there’s not a whole lot to learn.
From the Library of Lee Bogdanoff
Using Bitmaps (Also Known as Raster Graphics)
83
Like the Illustrator Import dialog, when you select File, Import, Import to Stage and point to a Photoshop file, you see all the layers and folders contained in the source Photoshop file, as shown in Figure 3.13. There are some striking similarities between the Photoshop import dialog and the Illustrator one discussed earlier—though this one is more advanced. You can see similar global options at the bottom left as to whether FIGURE 3.13 Importing a Photoshop document allows you to select how to import each layer.
to keep objects in position and or to convert layers into Flash layers or keyframes. Also similar is the way you can include or exclude layers by clicking check marks. A particularly handy feature in Photoshop, called layer comps, lets you save multiple arrangements of your layers and their contents. Artists can include tons of layers with all the graphics for an entire project in a single Photoshop file. Then, they can make multiple compositions—for example, one where only the layers related to the home screen in your project are visible and another where the layers for a video section are visible. With layer comps, artists can quickly view different arrangements without going through and turning layers on and off. When you import a Photoshop document with layer comps, you see them listed at the top left, as shown in Figure 3.14. This gives you a quick way to select all the layers related to a particular layout.
From the Library of Lee Bogdanoff
84
HOUR 3: Importing Graphics into Flash
FIGURE 3.14 You can use the Layer Comp dropdown to quickly select the layers related to a particular layout.
After you’ve selected the layers you want to import, you can set the options for how each layer gets imported on the right side of the import dialog. Provided you don’t want to accept the defaults, you individually select each layer and make adjustments to the options on the right. All layer types can be imported as a flattened bitmap, which is the best way to retain the exact look created by the artist. You see slightly different options in text layers and shape layers, but the big difference from the Illustrator importer discussed earlier is that for each layer you import as a flattened bitmap, you can individually set the publish settings. The publish settings for each imported layer affect the Bitmap properties for the contained objects when they appear in the Library. These settings are the same ones you learned about in the previous section “Adjusting Bitmap Properties.” This way, you can make the decision between JPEG and PNG/GIF and whether to use Flash document’s publish settings for compression or set them individually for each item. The odd thing is that the terms are slightly different than the ones you just learned. Where the Photoshop importer says Lossy Compression, it means JPEG in the Bitmap Properties dialog (accessible by double-clicking an item after it’s in the Library). Where the Photoshop importer says Lossless, it means PNG. Although you always see the best quality by importing layers as flattened bitmaps, other options also have some value. In the case of text layers, you can opt to import as editable text. You can make edits to the actual wording
From the Library of Lee Bogdanoff
Summary
85
later, but realize you immediately lose any layer effects applied to the text. Photoshop supports very detailed text effects that are unmatched in Flash. For both shape and text layers, you can choose to keep paths and layer styles editable. Not only does this mean you see subtle differences in the image after it’s inside Flash, but a complex Photoshop document translates to a complex Flash document. Be prepared to test any import process if you’re not importing as flattened bitmaps. To summarize the suggested workflow, select the layers you want to import, either by clicking the check marks or by selecting a layer comp, which effectively selects the layers for you. Then, go through each layer to adjust the publish settings or do this later via the Library item’s bitmap properties.
Summary When possible, you should create graphics inside Flash. But sometimes you can’t. There are times when you need to import graphics, such as when you have an existing graphic that would be impossible or difficult to recreate in Flash or when a graphic requires a raster file type, such as a photograph. When you’re certain you want to import, Flash provides you with mechanisms to do so.
Q&A Q. Importing Photoshop and Illustrator files looks pretty cool, but I don’t have those programs. How can I test out some of what I learned this hour? A. You can find some sample .ai and .psd files in the downloads section of the publisher’s website. Q. I’m having trouble importing images from a digital camera. I have some great shots of my potato chip collection, but they’re huge after I import them. How can I resize them? A. Because multi-megapixel cameras produce originals that can be thousands of pixels wide, you don’t want to import these directly. First use an image editing program, such as Fireworks, to resize the image to fit comfortably on a normal screen size—that is, less than 1024×768 or 800×600. Taking a megapixel image and scaling it down inside Flash does not improve the sharpness and actually does the opposite if you don’t select the Allow Smoothing option. Worse still, the file size will be huge. Don’t do that; instead resize and optimize the image before importing!
From the Library of Lee Bogdanoff
86
HOUR 3: Importing Graphics into Flash
Q. I have a photograph that I use as a raster graphic in my Flash movie. After I scan it into the computer and touch it up, what file format should I choose? There are so many. A. Generally, you want to keep all your raster graphics in the highest-quality format possible before importing into Flash. One exception is when you use a tool, such as Fireworks, to produce an optimally compressed image. If you use an outside program to compress the image, make sure you don’t recompress in Flash; leave the default setting Use Imported JPEG Quality. Alternatively, if you import a high-quality .pct, .bmp, or .png, you can compress it in Flash until you’re satisfied with the compression level. JPEGs are all right, but they always have some compression that could result in artifacts. GIFs are not a good alternative because they can’t have more than 256 explicit colors. Changing the file format of an existing image never makes a graphic better andpotentially makes it worse. You should start with the best quality possible, and then reduce it as the very last step. Q. How do you determine how much one graphic is contributing to the final movie’s file size? A. If it’s a raster graphic, you can explore the Bitmap Properties dialog box, which tells you exactly how big a graphic is. With vector graphics, determining the size is more difficult. Ultimately, you should copy the graphic into a new file and export a .swf of that file by selecting File, Export. You can look at the file size. Sometimes it’s not so important how much one graphic is contributing, especially if it’s an important graphic; your concern should always be to not add to the file size unnecessarily. Q. I have a fairly simple Illustrator file graphic that I would like to import into Flash. It’s impossible to redraw in Flash, so I have to import it, right? A. If the file is simple, it should be possible to create it in Flash. Make sure you’re fully exploiting the potential of Flash. Read Hour 2, “Drawing and Painting Original Art in Flash,” again, if necessary. Of course, if you have to import the image, do so. You might still have luck if you first export it from Illustrator as a .swf before importing.
From the Library of Lee Bogdanoff
Workshop
87
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. What’s the most appropriate image file format to import into Flash? A. Raster. B. Vector. C. It depends on the nature or content of the image. 2. If you import a .gif image into Flash, what kind of compression does Flash use on the image when it exports the entire movie? A. It depends on the Compression setting in the Bitmap Properties dialog box. B. Flash always uses JPEG compression, but it’s up to you to specify what quality level to use. C. GIFs are exported as GIFs. 3. How do you import photographs created with a digital camera? A. You can’t; you must use conventional film. B. It’s simple; click File, Import. C. Be sure to resize the image in an outside program first, then click File, Import.
From the Library of Lee Bogdanoff
88
HOUR 3: Importing Graphics into Flash
Quiz Answers 1. C. Although a vector graphic has benefits over a raster graphic, the most appropriate image file format to import into Flash depends on the graphic. Photographs usually have to stay as raster graphics. 2. A. Each image imported can have a unique compression setting that is not dependent on its original format. By default, however, imported .gifs get exported as .gifs. 3. C. Maybe we’re being tricky including a question whose explanation is only found in the Q&A section, but be sure to read the second question in that section if you didn’t get this answer right because it’s important.
From the Library of Lee Bogdanoff
HOUR 4 Staying Organized with the Library and Layers
Flash’s Library is so fundamental that creating a Flash movie without it is almost impossible. If you don’t use the Library, it’s fair to say you’re doing something wrong. The Library is where master versions of graphics are kept. Editing a graphic in the library changes all instances of that graphic throughout a movie. Also, graphics stored in the Library—despite how many times they’re used in a movie—are stored and downloaded only once, making your movie more efficient. This hour explores organization of your movie using the Library. Symbols are things, usually graphics, that you put in the Library. Anything created in Flash and placed onstage, such as shapes, groups, other symbols, even animations, can be converted into a symbol and placed in the Library. You can choose from three symbol types, and each has unique characteristics. We get to these in a moment.
WHAT YOU’LL LEARN IN THIS HOUR: . How to create symbols . How to use the Library to minimize work . How to identify clues in the Flash interface to help keep your bearings . How to use multiple symbol instances without increasing a movie’s size
Item is the term used for each media element imported into your movie, and thereby resides in the Library. Items can be bitmaps, audio files, and digital videos. However, symbols created in Flash are the Library items with which you become most familiar. Instance is the term given to a symbol anytime it’s used outside the Library. As you see, only one master of any symbol exists—the one saved in the Library. However, you can drag as many instances of a master symbol out of the Library as you like. Each instance is like a copy of the original.
The Concept of the Library The process of using the Library involves creating symbols and then using instances of those symbols throughout a movie. You always have one master
From the Library of Lee Bogdanoff
90
HOUR 4: Staying Organized with the Library and Layers
version of a symbol stored in the Library. You can drag multiple instances of that symbol from the Library to any other part of the movie—even inside other symbols. The ability to create instances of a master symbol offers two important benefits. First, this means file size remains small because only the master symbol adds to the file size, and each instance just points to the master, (similar to how a shortcut in Windows or an alias on the Macintosh points to a master file). Second, you can make a visual change to the master symbol, and that change is then reflected in each instance. This is like using styles in a word processing document: You make a change to the style, and each instance where you use that style reflects the change. You learn more about these benefits in a minute, but let’s first go over the basics of how to create and use symbols.
How to Create and Use Symbols Two ways to create symbols are to convert any selected object onstage into a symbol or make a symbol from scratch. The following task looks at the first method.
▼ TRY IT YOURSELF Create a Symbol by Converting Selected Objects
In this task, you create symbols using the Convert to Symbol feature. Follow these steps: 1. In a new file, use the Oval tool to draw a circle. Click the Selection tool and make sure the circle is entirely selected. You can double-click the center if it’s not a Drawing object, marquee the whole thing, or simply click Edit, Select All. 2. Click Modify, Convert to Symbol or press F8. Flash forces you to specify the name and type for this symbol (as shown in Figure 4.1).
FIGURE 4.1 When you convert to a symbol, you must specify a name and type.
3. You should always name symbols logically. The default Symbol 1 might seem logical, but having 35 symbols all named in this manner can become unwieldy. (You learn more about naming symbols later in this hour, in the section “Managing the Library by Using Names, Sorting, and Folders.”) Name this one Circle. We look at all three types of symbols
From the Library of Lee Bogdanoff
The Concept of the Library
eventually, but for now consider Movie Clip the best choice when you’re not sure which to choose. Buttons are useful only when you’re creating buttons, and Graphics are primarily used for static graphics. Set Type as Movie Clip, and click OK. It’s possible that your Convert to Symbol dialog box is set to Advanced so it looks much larger than the one in Figure 4.1. If this is the case, you can collapse it by clicking the Basic button (which toggles to read Advanced) because we aren’t exploring the Advanced settings now.
91
▼ TRY IT YOURSELF Create a Symbol by Converting Selected Objects
4. Open your Library window by clicking Window, Library (or Ctrl+L), and you should notice one symbol, Circle, in the Library. When you selected Convert to Symbol, you did two things: You stored your new symbol in the Library, and you caused the object that remained on the Stage to become an instance of the Circle symbol. If you drag more instances from the Library window (by single-clicking and dragging the picture of the circle from the Library window onto the Stage), each new instance is equivalent to the instance already on the Stage. If you double-click by accident, you see Scene 1: Circle in your Edit Bar, indicating you’re editing the master version of the symbol. In this case, you can simply click Scene 1 or press Ctrl+E to get back to editing the document. 5. Try dragging a few instances of the Circle symbol onto the Stage. You now have multiple instances of the Circle symbol. You’re about to make a change to the master version in the Library, and you see that change in each instance on the Stage. 6. From the Library panel, double-click the picture of your Circle symbol or select Edit from the Library’s menu, as shown in Figure 4.2. It might appear that nothing has happened, but now you’re inside the Circle symbol where you can edit its contents. The best indication is the Edit Bar, covered in Hour 2, “Drawing and Painting Original Art in Flash” (also see Figure 4.3). In addition, you should see only one copy of your circle, the original, in the center of the Stage. The Stage appears to have no borders. These clues tell you that you are currently inside the master version of the Circle symbol about to edit it. 7. Now we get out of Edit mode for the master version and reenter another way. Click Scene 1 in the Edit Bar. You return to the main scene with multiple instances of the Circle symbol visible. Enter the master version of the symbol by double-clicking one of the instances of it. You should see the Edit Bar and all the other instances dim slightly. This is similar to how you can edit the contents of a grouped shape. In this case, you’re doing what’s called Edit in Place. This is where you can edit the Circle symbol. 8. Take a “chunk” out of the master graphic of the Circle by using the marquee technique with the Selection tool (see Figure 4.4). If the Circle is a Drawing Object, then be sure to double-click it first.
From the Library of Lee Bogdanoff
92
HOUR 4: Staying Organized with the Library and Layers
▼ TRY IT YOURSELF Create a Symbol by Converting Selected Objects FIGURE 4.2 The Library’s options menu includes several choices, including Edit.
FIGURE 4.3 You can tell you’re editing the contents of a symbol when you look at the Edit Bar.
Edit Bar
Center of symbol
9. Go back to the main scene by clicking Scene 1 in the Edit Bar. Now all instances of the Circle symbol have the same chunk taken out of them! Any new instances of the symbol you drag from the Library will have the same effect.
From the Library of Lee Bogdanoff
The Concept of the Library
93
▼ TRY IT YOURSELF Create a Symbol by Converting Selected Objects
FIGURE 4.4 The edits you make to this symbol affects each instance.
In the preceding task, you converted a selection into a symbol. This generated an instance of the symbol you created on the Stage. The other way to create a symbol is to create it directly in the Library, as described in the following task. Neither method is better than the other, and both give you the same result. In this task, you make a symbol by using the New Symbol feature. Follow these steps: 1. Open a new file and choose Insert, New Symbol.
TRY IT YOURSELF ▼ Create a New Symbol from Scratch
2. You see the same Symbol Properties dialog box that you see when you use Convert to Symbol. In this case, name the new symbol Square and set the Type option to Movie Clip. This time when you click OK, you are presented with the editing screen for the master version of the Square symbol. Since we haven’t created it yet, the stage is blank, as shown in Figure 4.5. You should see the Edit Bar indicate you are editing the Square symbol. Think of it this way: Convert to Symbol puts your selection in the Library; whereas New Symbol makes you name the symbol, and then takes you to the master version of that symbol, so you can draw something—effectively saying, “Okay, you want a new symbol? Draw it.” 3. Now that you’re in the master version of the Square symbol, you can draw the square. You probably want to draw it near the registration point of the symbol, indicated by the plus sign (shown in Figure 4.5). This
From the Library of Lee Bogdanoff
94
HOUR 4: Staying Organized with the Library and Layers
▼ TRY IT YOURSELF Create a New Symbol from Scratch
FIGURE 4.5 Selecting New Symbol takes you into a blank symbol, so you can draw its contents.
becomes the reference point whenever you view or change the instance’s location onscreen. But how do you get the square you draw in the center? You might have discovered the Paste in Place command in the Edit menu (or Ctrl+Shift+V). It enables you to paste anything to the same location from where you copied it. The Paste in Center command is useful here. Select your drawn square, click Edit, Cut, and then immediately Edit, Paste in Center. Presto! It’s centered. You could also use the Info panel to set the shape’s transformation point to 0,0 or use the Align Panel’s To Stage option, and then click both Align Horizontal Center and Align Vertical Center. 4. When you’re done creating the Square symbol, go back to the main scene by clicking Scene 1 in the Edit Bar. Where’s the square? Well, New Symbol creates a symbol and keeps it safe in the Library panel, where you can find it. Locate the new Square symbol in the Library, and then drag a few instances of the Square symbol onto the Stage.
How Symbols Help You Let’s go over the two fundamental advantages of storing symbols in the Library: reducing the movie’s file size and minimizing your work.
From the Library of Lee Bogdanoff
The Concept of the Library
95
Reducing File Size Believe it or not, if you have one symbol in your Library and 100 instances of that symbol on the Stage, your file is barely larger than if you have only one instance. Here’s how it works: The graphic, movie clip, or button in the master symbol contributes to the file size. Therefore, if the graphic is 1KB, the master symbol adds 1KB; if the master symbol is 100KB, it adds 100KB. The size depends on what’s in that symbol. No matter how many times a symbol is used, it’s only stored once. Even as you drag many instances onto the Stage, the symbol is still stored only once. A tiny bit of data is saved inside Flash that specifies how each instance is different from the others, (for example, their positions) so each instance does add a small amount of data to the file size. However, it’s such a tiny bit of information that it’s almost not worth mentioning. Imagine what would happen if it didn’t work this way; a 100KB graphic used 10 times would make a movie balloon to 1MB! In reality, though, 10 instances of a 100KB symbol might make your file grow to, say, 101K, if even that much. Using symbols is also powerful because each instance can differ from the others. So far, you’ve used symbols to display identical replicas of an original. The only way each instance has varied has been in its onscreen position. However, the tiny bit of extra data telling Flash where each instance is positioned onscreen can also contain information about how each instance is scaled or rotated differently. This way, each instance can look different. You learn more about this in the section, “How Each Instance Behaves Differently,” but for now, realize if you have three instances on the Stage and you have each one scaled to a different size, you haven’t added to the file size in any significant amount.
Minimizing Work In addition to reducing file size, the Library can reduce the amount of work you do. For example, say you have a block of text (maybe a title) that’s used in several places within a movie. If you first put the text in a symbol in the Library, each time you need that text onscreen, you can drag an instance from the Library. Later, if you want to change the text, you can edit the master version in the Library and see the change in every instance. This advantage requires only that you invest a little bit of time and planning.
From the Library of Lee Bogdanoff
HOUR 4: Staying Organized with the Library and Layers
96
Using the Library Although you’ve already used the Library to do several tasks, we haven’t taken time to really explore all the details of the Library. Let’s do that now so you can to take full advantage of the Library’s offerings.
Getting Your Bearings Hour 1, “Basics,” discusses the importance of knowing where you are at all times. In the Library, this point is especially important. Using the Library can be very confusing if you don’t pay attention to interface elements that help keep track of what you’re editing. Before you resize, move, or in any other way edit a graphic, take a second to figure out whether you are changing an instance or the master. Here are a few interface elements to help you get your bearings in the Library: . Three things: the Edit Bar, the Edit Bar, and the Edit Bar. The Edit Bar is the most important indicator and one you should pay attention to at all times. . Anytime you’re inside a Library symbol, you see a plus sign, usually in the center, that indicates the registration point of the symbol. You don’t see the plus sign when you’re editing the contents of a regular scene.
Edit Symbols
FIGURE 4.6 The Edit Symbols menu gives you quick access to all the symbols in a file.
. You use the registration point when controlling an instance’s exact location. If a symbol is positioned at 0x and 0y, (the upper left of the stage) that registration point coincides with 0x,0y. In addition, you can use ActionScript to rotate or scale an instance, and Flash uses the registration point as the axis of rotation or center from which it grows. It’s confusing because, when you use the Transform tool to rotate or scale an instance, Flash uses the Transformation point. By default, the Transformation point is the visual center. The Transformation point appears as a solid white circle when you use the Free Transformation tool to select an instance onstage. The main thing to remember is you can always go inside and move the contents of a symbol relative to its registration point. . In addition to seeing the plus sign while editing a symbol, you never see edges to the Stage because there isn’t a Stage when you’re inside a symbol editing it. When you drag instances onto the Stage, you are placing them within the Stage borders when you want them to be visible
From the Library of Lee Bogdanoff
Using the Library
to users. Symbols don’t have a Stage—the point of reference of a symbol is its center or registration point. . You can access the contents of a master symbol in several ways: . First, from the Library window, you can select the symbol, and then click Edit in the Library’s options menu. Alternatively, you can double-click the symbol. (Double-clicking the symbol name lets you rename the symbol.) . Second, you can simply double-click any instance onscreen, and you are taken to the master symbol to edit. The difference in doing it this way as opposed to using the Library window is that while editing, you see the rest of your onscreen contents dimmed out but in position. You can also do this by right-clicking an instance and selecting Edit in Place. . Third, you can access any symbol from the Edit Symbols menu. Recall the two buttons at the top right of the screen: The clapper button is the Edit Scene button, and the circle-square-triangle button (which looks like a graphic symbol’s icon) is the Edit Symbols button (see Figure 4.6). The Edit Symbols menu provides a list of all the symbols in a movie. Also, the Edit Scene menu is an easy way to get back to a scene.
Managing the Library by Using Names, Sorting, and Folders The Library is a panel that you use all the time. As the number of symbols in the Library grows, you want to develop ways to keep them organized. This section looks at three techniques to help you keep your Library’s symbols organized: naming, sorting, and using folders. Because every symbol must have a name and because they are easy to rename, naming symbols meaningfully makes sense. How to best name symbols is subjective, but some standard practices are worth following. First, you should be clear and concise. If you have an image of a circle, you can call it Circle. There’s no need to be cryptic and call it Cir. Then again, a name such as Red Circle with No Line might be a bit too detailed. You should say what you have to, but nothing more. Also, realize the Library can be sorted alphabetically by symbol name, so you can develop a naming strategy to plan ahead. For example, if you have several symbols all being used in a particular part of a movie, you can begin each name with the same text prefix—for example, game_name. Therefore, you might have symbols named
97
NOTE
Transformation Point Versus Registration Point It’s important to understand the difference between transformation and registration. Transformation is the point around which you can scale or rotate an object while authoring. Registration is an arbitrary reference point inside a symbol. If you open the Info panel, you find the X and Y coordinates shown reflect either the Transformation point’s location or the symbol’s registration point, depending on which option you have selected in the toggle button (in the middle of the Info panel). However, when you use ActionScript to move a symbol instance or you use the Properties panel to view the coordinates, values always reflect the location of the registration point. When you use Convert to Symbol to create the symbol, you choose a registration point from nine logical positions—including the center plus any of the four sides or four corners. This setting only affects where the objects you have selected appear within the new symbol you’re creating. You can always go inside the symbol and move its contents relative to its registration. You see the registration point as a plus (both inside the symbol and when it’s selected onstage). You can’t exactly edit the registration point; rather, you can move the contents relative to the registration point. Any object onstage has a transformation point (shown as a white circle when you select the object with the Free Transform tool). The transformation point is always the visual center at the time the object is created or dragged from the Library. You can use the Free Transform tool to move the transformation point. In addition, when you rotate or scale, the object rotates or scales around that transformation point. For example, you could move the transformation point to the corner of a flower petal, and then rotate several petal instances to make a flower.
From the Library of Lee Bogdanoff
HOUR 4: Staying Organized with the Library and Layers
98
game_background, game_piece, game_scorecard, and so on. You can even use a similar method when an entire team is working on the same file. You can have each person precede symbol names with his initials so figuring out which symbols were created by which team member is easy. As mentioned earlier in this section, the Library automatically sorts symbols alphabetically by name. If you widen the Library window, you can explore additional sorting options. You can resize the window by dragging a corner of it, as shown in Figure 4.7. You should take a look at Figure 4.7 to familiarize yourself with the Library window. You can sort by name, by type (such as buttons or movie clips), by use count (meaning how many instances you’ve dragged from the Library—although this won’t be accurate unless you select the option for Keep Use Counts Updated from the Library’s menu), or by date modified. FIGURE 4.7 Several indicators and tools are built into the Library.
Options menu Pin current library
Current library drop-down list
New library panel Preview window Sort order Column headings
New symbol New folder Delete symbol Properties
The Library window has several useful features: . The preview window gives you a thumbnail view and preview of any animation or audio. . Column headings do more than just explain what’s listed in the column. If you click a column heading, the Library is sorted by the attribute you select (Name, Kind, Use Count, Linkage, or Date Modified). . You can click the tiny arrow to toggle between ascending and descending alphabetical sorting.
From the Library of Lee Bogdanoff
Using the Library
99
. Clicking New Symbol has the same effect as selecting Insert, New Symbol. . New Folder lets you create a new folder to hold several Library items. . Clicking Properties gives you access to the same Symbol Properties dialog box you see when you create a symbol. . The Pin Current Library option stops Flash’s default behavior of always reflecting the Library for the currently active file. By pinning the Library, you can easily drag items from one file’s library to another file’s (because each file has its own single library). . The Library’s drop-down list gives you a quick way to edit another file’s library without activating that file. . The New Library Panel button lets you arrange library windows. For example, you might want to copy items from one library to another, or you might be getting tired of jumping between two files’ libraries using the list box. . The Options menu provides all the available options. Don’t forget about it!
Finally, you can organize your Library by using folders. This is almost identical to using files and folders on your computer’s hard drive, except that in the Library you have symbols and folders. Creating a folder is as simple as selecting New Folder in the Library’s options menu or clicking the New Folder button at the bottom of the Library panel. You can name the folder immediately after you create it, or you can name it later. Naming a folder is the same as renaming symbols— double-click the name or select Rename from the options menu. Organizing folders is pretty intuitive. You can put symbols inside folders by dragging a symbol’s icon, which appears to the left of its name, on top of the folder. You can open a folder to reveal its contents by double-clicking the folder’s icon. You can even put folders inside folders. Organizing the Library isn’t difficult to figure out. If you know how to rename Library items, sort, and use folders, you are well on your way to having an organized Library.
From the Library of Lee Bogdanoff
100
HOUR 4: Staying Organized with the Library and Layers
Using Symbols from the Library The ability to drag a symbol from the Library to create as many instances as you want is powerful. For example, imagine you create one symbol of a cloud. You could then create many instances of the cloud symbol to make a cloudy sky—but you could do much more than that. Each instance on the Stage could be different from the next. One could be large, and another one could be stretched out and darkened. In the upcoming task, for example, you see how multiple instances of one symbol can vary in size, scale, and rotation. Later this hour in the section, “Nesting Instances of Symbols Inside Symbols,” you make a symbol that contains instances of another symbol. Such nesting means not only can you have many instances on the Stage, but you can also recycle symbols to create other symbols.
Placing Instances of Symbols on the Stage This discussion might seem like repeated material, but the concept and process are very specific. One master symbol in the Library can be dragged on the Stage as an instance. Let’s review a couple of points. If you copy and paste an instance that is already on the Stage, you are simply creating another instance. Not only is this okay, but it’s sometimes easier to the alternative of dragging an instance from the Library because all the properties of the instance being copied are in the new instance. Remember the copy is just another instance.
Modifying Instances of Symbols By dragging two instances of the same symbol onto the Stage, you create two instances with different properties because they vary in position. In other words, each instance is in a different location on the Stage. Each instance can be made different in other ways, too. For example, you can transform the scale of any instance on the Stage—without adding to the file size in any significant way. You can rotate each instance separately as well. The following task explores how to vary the properties of separate instances in regard to their position, scale, and rotation.
From the Library of Lee Bogdanoff
Using Symbols from the Library
In this task, you transform the properties of several instances. Follow these steps: 1. In a new file, draw a rectangle, and then use the Text tool to type your name inside it. Use the Properties pane to ensure the text is Static Text. Try to position the text and resize the rectangle so they’re about the same size. Change the text color, so it’s legible on top of the rectangle.
101
TRY IT YOURSELF ▼ Transform the Location, Scale, and Rotation of Instances
2. Select everything you just drew, and then choose Modify, Convert to Symbol. Name this symbol My Name. Leave the default Type option, Movie Clip, selected, and then click OK. Onscreen you now have an instance of the My Name symbol you just created. 3. Create more instances of this symbol any way you want—either by copying and pasting the one onscreen or by dragging instances from the Library. 4. Make a change in the position of each instance on the Stage by moving the instance to a different location. With some of the instances, select the Free Transform tool and change their scale. Remember from Hour 2 that you can scale width or height or both at the same time. Change the rotation of other instances. Remember that rotation includes skew when the Free Transform tool’s Rotate and Skew option is selected, and you drag the noncorner handles. You can go wild here, as shown in Figure 4.8, yet your file is only as big as the master symbol. Notice that only the Free Transform tool’s Scale option and its Rotate and Skew option are available. FIGURE 4.8 Many instances of the same symbol can be scaled, skewed, rotated, and positioned differently.
From the Library of Lee Bogdanoff
102
HOUR 4: Staying Organized with the Library and Layers
Varying each instance’s position, scale, and rotation provides for a lot of combinations. However, there’s more you can change. Each instance on the Stage can have a color style, a blend, plus a variety of filters applied to it. Next, we explore each one briefly, and then, next hour, you see them applied in practical applications.
Using Color Styles Color Styles include tinting the color of an instance, changing its brightness, and changing its alpha property (that is, its opacity). Similarly to how each instance can have a different location, each instance can have different color effects. To apply a style, you use the Properties panel. To change an instance’s color style, make sure the Properties panel is visible and select the instance on the Stage. While the instance is selected, you can specify any style you want by selecting from the Color drop-down list. Take a look at Figure 4.9 and the following list to familiarize yourself with these effects (then you can proceed to the task, which guides you through many of the subtleties of several effects): FIGURE 4.9 The Properties panel provides several ways to change an instance.
. Brightness—This effect enables you to add black or white to the instance. It is similar to dimming the lights or making them bright.
From the Library of Lee Bogdanoff
Using Symbols from the Library
103
. Tint—This effect is similar to brightness, but instead of causing the instance to be more white or more black, it tints the instance any color you want. . Alpha—This effect, which is the same as opacity, lets you specify how transparent the instance is. . Advanced—This effect lets you combine tint and alpha effects. If you don’t need to both tint and change the alpha of an instance, the Advanced effect is best applied to symbols that contain raster graphics, such as photographs.
In this task, you explore color styles. Follow these steps: 1. Open the file with the many instances of the My Name symbol you created in the last task. (Redo the exercise if necessary.) Make sure you have at least four instances on the Stage.
TRY IT YOURSELF ▼ Change Color Styles on Several Instances
2. Select one instance by single-clicking it. If you double-click, you are taken inside the master symbol and need to return to the main scene. Access the Properties panel. 3. From the Color drop-down list in the Properties panel, select Brightness. The Brightness amount appears on the right of the panel, as shown in Figure 4.10. Notice the slider to the right of the word Bright. Adjust the slider until the percentage reaches 80%. Alternatively, you can just type the percentage into the field. FIGURE 4.10 The brightness color effect can be applied to an instance.
From the Library of Lee Bogdanoff
104
▼ TRY IT YOURSELF Change Color Styles on Several Instances
HOUR 4: Staying Organized with the Library and Layers
4. Keep the Properties panel open and select another instance. This time, select Tint from the Color drop-down list. The tint effect is straightforward: You select the hue with which you want to tint the instance by selecting the swatch (as in Figure 4.11). Notice the 50% in the Tint Amount field. If the original symbol contains several colors, the entire instance changes to the color in which you tint it. However, tinting less than 100% causes the colors to mix. For example, if the original symbol is yellow and white, tinting it 100% cyan causes everything to turn cyan. However, tinting it 50% cyan causes the white parts to become a faded cyan and the yellow parts to turn green.
FIGURE 4.11 The tint color style changes the color of an instance.
5. Set the Color drop-down list of another instance on the Stage to Alpha and set the Alpha slider to 40%. Unless the selected instance is on top of something else, you’re not going to notice the transparency. Therefore, position the instance on the Stage to be on top of another instance. Remember you can use Bring to Front and similar stacking controls by selecting Modify, Arrange. FIGURE 4.12 When you select the Advanced settings after first tinting, the values are initialized with the same color.
6. Finally, the Advanced setting in the Color drop-down list lets you combine Alpha and Tint. After you select Advanced, the Settings button gives you full control. To change any of these values, you can either double-click on the blue number next to it and type a new value, or click and drag to the left or right to change the value. Figuring out the eight options that appear is not easy. There’s a trick you can use to make them easier to use. Begin by tinting something yellow and making it semi-transparent
From the Library of Lee Bogdanoff
Using Symbols from the Library
as well. First, select an instance and choose Tint from the Color dropdown list. Then, select a yellow swatch. Now, change the Color dropdown list to Advanced and click the Settings button. Notice the pairs of numbers next to Red, Green, and Blue have already been filled in with something other than 0, as Figure 4.12 shows. These are based on the tint you specified earlier. Now select the Alpha slider at the bottom of the Settings dialog box. The trick is that by first selecting Tint, you have a nice way to choose a color. If you first selected Advanced, you would have had to select a color in a less-intuitive manner by clicking and dragging on the percentage numbers for Red, Green, and Blue separately, as shown in Figure 4.12.
105
TRY IT YOURSELF ▼ Change Color Styles on Several Instances
7. Go wild and create a bunch of instances on the Stage. Adjust the Alpha, Tint, and Brightness settings. The file is basically the same size it would be with just one instance. Try selecting more than one instance and changing the color settings. You can apply a color effect on multiple instances if you select more than one, and then access the Properties panel.
One way to describe color is by specifying three settings: hue, saturation, and brightness. If you want to explore these, you can change the Color panel’s option arrow from RGB (red, green, blue) to HSB (hue, saturation, brightness). Hue is the base color. Moving from left to right in the Flash Color panel, you see the hue change from red to yellow to green to blue and to red again (with every shade of color in between). Brightness is how much white is included in a color. Imagine a paint store with many hues of paint. The store could mix in white paint to create more colors. In the Flash Color panel, the brightness is shown vertically—at the top, the colors are all white, and at the bottom, they’re all black. Finally, saturation is the amount of color. For example, if you were staining a wood fence, the more stain you used, the more saturated the color would become. In Flash, you vary the saturation by changing the Tint Amount slider.
NOTE
Getting More Colors You might have noticed that when you select a tint color, the Properties panel enables you to choose from only discrete swatches. It’s possible to select any color. Open the Color panel. When you set a tint, click and hold on a swatch, but don’t let go until you’ve pointed to the color you want on the Color panel. This is like the way you sample colors outside Flash— but it works within Flash, too. Notice you can’t set a clip’s tint directly by using the Color panel.
How Each Instance Behaves Differently You’ve already seen how each instance on the Stage can be uniquely positioned, scaled, rotated, and colored. In fact, next hour you learn additional ways to color and add effects to instances with Blend modes and Filters. In
From the Library of Lee Bogdanoff
106
HOUR 4: Staying Organized with the Library and Layers
this hour, we go through one more way in which instances can differ from one another; they can be different Types. Remember the Type option— Graphic, Button, or Movie Clip—you have to choose when creating a symbol? So far, we’ve only used Movie Clip. Later, we look more closely at the Graphic and Button options. For now, we discuss how the Type option relates to instances on the Stage. When you create a symbol, you must select a Type. You can change the Type of a particular symbol after you’ve created it. From the Library window, you can change any symbol’s Type via Properties, which you access by clicking the little blue i button by selecting the Library’s options menu or by right-clicking the item and selecting Properties. The Symbol Properties dialog box reappears; it’s almost identical to the dialog box you use when you create a symbol in the first place as shown in Figure 4.13. Think of this setting as the default Type. Any instance dragged out of the Library while the symbol is, say, set to Graphic starts as a graphic. Changing the master symbol to another default Type has no effect on instances already spawned—only new ones you drag onto the Stage. FIGURE 4.13 The Symbol Properties dialog box enables you to change the default Type for a symbol.
Not only does a master symbol have a default Type, but each instance onscreen also has its own behavior. You can use the Properties panel to see and change the Type of any instance or instances already on the Stage. For example, you can use the Properties panel to see the instances used in the last two tasks have the Movie Clip Type. That’s because the master symbol was a Movie Clip at the time the instance was placed onstage. You can change the Type of any onscreen instance by simply selecting it and changing the Type drop-down list in the Properties panel. Later, you deliberate in your choice of Type. You can always change the symbol’s default Type or the Type of any instance.
From the Library of Lee Bogdanoff
Using Symbols from the Library
Nesting Instances of Symbols Inside Symbols You can drag a symbol from the Library and create an instance anytime. You can even use instances of one symbol to create other symbols! This means you could draw a bunch of houses (as shown in Figure 4.14) with just one line. Sure, there’s a House symbol, but that was drawn with several instances of another symbol, Box, and a few instances of a symbol called Line. Actually, the Box symbol was created with four instances of the Line symbol. This case shows an excessive use of hierarchy, but it proves a point: Instances of symbols can be used to create other symbols. In the next task, you see how to perform such nesting.
107
CAUTION
Overnesting There comes a point where too much hierarchy affects file size negatively. In Figure 4.14, the House was created from one line recycled many times. Earlier, we said that Flash stores the original data in the Library, plus information concerning how each instance varies. Usually the original data is the big portion, and instance information is insignificant. However, if you take the instance information to an extreme, it can actually work against you. To prove this point, suppose you make a one-pixel dot, put it in the Library, and then use it millions of times to create all kinds of graphics—and then you tint each pixel instance individually. The extra data for those millions of instances would indeed outweigh the size advantage of having the dot in the Library. It’s a balance; you should combine convenience with efficiency. In the case of the House, we found that by creating the box from scratch (not with four instances of the Line symbol), we cut the exported movie size in half!
FIGURE 4.14 The House, duplicated and modified, is created with several instances of a Line symbol.
From the Library of Lee Bogdanoff
108
▼ TRY IT YOURSELF Make a Symbol by Using Instances of Another Symbol
HOUR 4: Staying Organized with the Library and Layers
In this task, you nest symbols inside each other. Follow these steps: 1. In a new file, select Modify, Document and choose a dark color from the Background Color swatch. Then, use the Oval tool to draw a circle and fill it with gray. 2. Select the entire circle, and then click Modify, Convert to Symbol. Name the symbol Circle, and click OK. 3. Next, make an eyeball from two instances of Circle. One way you could do this is to create a new symbol, and then, while inside the master Eyeball symbol, drag out instances of Circle. Instead, you should do it another way, which might be more confusing at first, but it is easier. Remember, two ways to get items in the Library include creating a new symbol or converting something you select to a symbol. To make the Eyeball symbol, notice you already have one instance of Circle on the Stage. Copy and paste this on the Stage, or drag another instance from the Library. Change the Brightness color style of one instance to –100%; by using the Properties panel, select Brightness from the Color drop-down list and set it to –100%. Make sure the other instance is set to 100%. 4. Arrange the two instances so the black one is on top, scaled smaller, and set near the edge of the white instance, as shown in Figure 4.15. (If necessary, you can use Modify, Arrange to change the stacking order.) 5. Select both instances, and then choose Modify, Convert to Symbol or press F8. This takes what’s selected—a couple of instances—and puts them in the Library. Name this symbol Eyeball, and click OK. 6. Left behind on the Stage is an instance of the Eyeball symbol you just created. If it’s really big, scale it down a bit, and then copy and paste it to make two instances that are exactly the same size. Rotate one instance of the Eyeball if you want. 7. Select the Brush tool, confirm you’re in Object Drawing mode, pick a fill color other than yellow, then draw a smile for the face. Select it, and turn it into a symbol by clicking Modify, Convert to Symbol. 8. Drag an instance of Circle onto the Stage. Because it starts on top, send it to the back by selecting Modify, Arrange, Send to Back. Scale it large enough to be the face for the two Eyeball instances. Change the Tint color effect of this instance of Circle to bright yellow. 9. When your symbol looks like the one shown in Figure 4.16, select everything, choose Modify, Convert to Symbol, name the symbol Face, and click OK. You now have a Face symbol that can be used over and over again throughout a movie. It’s nothing more than recycled circles plus a smile. Feel free to go inside and make edits to any element you want.
From the Library of Lee Bogdanoff
Using Symbols from the Library
For example, you can double-click the Face instance onstage, select one of the Eye instances, and change its rotation. Keep your bearings by paying attention to the Edit Bar.
109
▼ TRY IT YOURSELF Make a Symbol by Using Instances of Another Symbol
FIGURE 4.15 The two instances of the same Circle symbol have different scales and brightness effects.
FIGURE 4.16 The Face symbol was created with multiple instances of the same clip.
From the Library of Lee Bogdanoff
110
HOUR 4: Staying Organized with the Library and Layers
Summary There’s more to the Library than you might expect. In this hour, you have learned the basics of managing the Library as well as some of the ramifications of using the Library. You can get shapes into the Library either by selecting New Symbol or by selecting Convert to Symbol. Remember that converting to a symbol leaves behind an instance of the symbol you just created. When you have some symbols in the Library, you can use them anywhere in a movie. Instances of symbols don’t significantly add to the file size. Plus, each instance can be modified in terms of position, rotation, scale, tint, brightness, and alpha, as you see next hour with blends and filters. Therefore, you can recycle but change a single graphic. In this hour, you also learned you can use instances of symbols in the creation of other symbols. As you begin to understand the hierarchy of symbols, you’ll be unstoppable.
Q&A Q. When I try to drag a symbol from my Library to the Stage, my cursor changes to the international No symbol. It used to work. Why doesn’t it now? A. You can drag symbols from the Library onto the Stage provided that you have an open layer into which to drop them. Your problem is occurring because the currently selected layer (with a pencil in it) is locked, invisible, or the red current-frame marker is in an interpolated frame, which we get to in a later hour. Q. I want to create a clock with a minute hand and second hand. None of the nine registration point options (when first converting the shape to a symbol) were appropriate. I went into the master symbol, but I can’t move that registration point. How do I move it? A. You can’t. You can instead select the entire contents of your symbol and move it relative to the registration point.
From the Library of Lee Bogdanoff
Workshop
111
Q. Okay, I moved the contents, so the registration point aligns with the exact axis of rotation, but when I rotate the instance onstage it’s still using the center point. I know for a fact this used to work in an older version of Flash. What gives? A. You need to edit the transformation point. That’s the white circle that appears when you use the Free Transform tool and select the symbol instance. If the transform point seems to be in an odd location, remember it’s always the visual center at the time the object was created. If you’ve edited the contents of the master symbol, it could get all out of whack. Not to worry, you can always edit it by hand.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. If you don’t see a symbol that you know you’ve created listed in the Library window, what is the likely cause? A. You have an outdated version of Flash and should get the upgrade. B. You’re either not looking at the Library window for the current file or the symbol is hiding in a folder. C. You forgot to name the symbol; therefore, it isn’t listed. 2. Which of the following are clues you are currently editing the master version of a particular symbol? A. The Edit Bar contains the symbol’s name, and a big plus sign appears in the middle of the screen. B. The Properties panel is grayed out. C. The symbol is highlighted in the Library window.
From the Library of Lee Bogdanoff
112
HOUR 4: Staying Organized with the Library and Layers
3. Should you consider using another color style setting instead of alpha when you simply want an instance to be faded back? A. No, nothing beats alpha. B. Yes, you should never use alpha. C. If the instance is not on top of anything else, then, yes, you should consider using brightness or tint instead.
Quiz Answers 1. B. A Library from another file can fool you, and putting symbols in folders can effectively hide them from your view. The drop-down list in the Library enables you to view the library for any other currently open Flash file. Consider, too, that Answer C can’t be correct because every symbol must have a name. 2. A. The Edit Bar is the main clue you’re in the Library. By all means, don’t let the Library window fool you—Answer C is absolutely wrong. 3. C. If the alpha color effect is used, it’s only effective, and therefore worthwhile, when it’s on top of something that can show through it. Brightness and tint can be used to get the same effect, and both perform better than alpha on slower machines.
From the Library of Lee Bogdanoff
HOUR 5 Controlling Color
You’ve spent the last few hours acquiring basic drawing and graphic-importing skills. This hour, you’re going to concentrate on gaining fine control of the features involved with these skills. On the one hand, this hour could be called “Advanced Drawing,” but the techniques you learn have just as much to do with accurately presenting graphics with the right color and alignment as it does with creating graphics from scratch. Everything you learn in this hour should help you create perfect layouts, which is a different matter than the subjective topic of creating nice-looking graphics.
WHAT YOU’LL LEARN IN THIS HOUR: . Practical ways to use Blends and Filters . How to create custom color swatches and gradients
Using Blends and Filters Last hour you learned many ways to customize instances from the Library—such as scaling, rotating, and tinting them. Two additional ways you can tweak instances is by using Blend modes and applying Filters. Blends define how overlapping instances blend with each other. The alpha effect controls the transparency of an object. Blends, however, are much fancier than changing the RGB or Alpha values, and allow you to achieve such effects as Invert, which looks like a photographic negative, and Darken, which shows only the darker of two colors. If you’re familiar with Photoshop, you will find Blends very much like the Blend Modes in Photoshop. Filters are like special effects filters found in imaging programs such as Adobe Photoshop. The Drop Shadow Filter, for example, is a powerful and easy way to make an instance appear to float off the screen. Filters are nondestructive, meaning they don’t permanently change the symbol. You can apply different Filters on several instances of the same symbol, and, if you choose, later adjust or remove the Filter effect. In this hour, you see how
From the Library of Lee Bogdanoff
114
HOUR 5: Controlling Color
Blends and Filters work; in the next hour, you see practical ways they can be applied to your projects.
Blends Applying a Blend is nearly identical to applying a color effect. Select an instance, and choose one of the Blend options from the Properties panel under the Display section, as shown in Figure 5.1. FIGURE 5.1 The Blend you select from the Properties panel affects how a symbol composites with what is underneath it.
Many blend options are provided by Flash. Here are the options and descriptions of what they do. . Normal—The default or no blend. . Layer—Analyzes everything inside the overlay and ensures it appears as expected. This Blend is subtle, but jumps out when you change the alpha color style on a symbol containing multiple overlapping objects. For example, if you draw an ice cream cone Movie Clip using a triangle under a circle, and then set the clip’s alpha to 50%, you see through the ice cream scoop to the cone underneath—unless you also use the Layer blend. Simply put, the Layer blend makes alpha transitions accurate. Layer is also required when a nested clip is set to Alpha or Erase. . Darken—Shows the darkest color. That is, you see the overlay except where the base is darker.
From the Library of Lee Bogdanoff
Using Blends and Filters
115
. Multiply—Mixes the two colors. The effect is least when base and overlay are similar colors and greatest when the base and overlay are different colors. . Lighten—Shows the lightest color. That is, you see the overlay except where the base is lighter. . Screen—Similar to Multiply, but it uses the inverse of the overlay to make a result that appears washed out. . Overlay—Applies the Screen blend on pixels where the base is dark and applies Multiply where the base has light pixels. . Hard Light—The exact opposite of Overlay. Hard light applies the Screen blend on pixels where the base is light and applies Multiply where the base has dark pixels. . Add—Adds the base and overlay, with the maximum being white. . Subtract—Subtracts base and overlay with the minimum being black. . Difference—Subtracts the darker color from the lighter color regardless of whether that color came from the base or the overlay. . Invert—Inverts the base only. This makes it look like a negative. . Alpha—Like Erase, Alpha requires more than a base color and the overlaying clip on which you apply the blend. You apply the Alpha blend to a clip that’s nested inside another clip, and that parent clip must have its blend set to Layer. The clip on which you set the Alpha blend should contain graphics that contain some level of transparency. The amount of transparency determines how much of the parent clip is revealed or see-through. That is, where the nested clip is 100% alpha, you see just the parent clip. Where the nested clip is 0% alpha, you won’t see the parent clip, but rather see through to whatever is underneath. If you’re familiar with masking, the Alpha blend lets you create a gradient alpha mask. . Erase—Requires that the clip on which the Erase blend is applied is nested inside another clip that is set to Layer. Primarily, the nested clip set to Erase clears away its parent clip and shows through to whatever is underneath. It’s the opposite of Alpha because where the nested clip is 100% alpha you see through the parent to what’s underneath and where the nested clip is 0% alpha you only see the parent clip.
Notice the base is just as important as the overlay—sometimes it’s more important. This list doesn’t give you practical uses for each option. One perfectly legitimate way to use blends is by exploring. However, you see several practical uses later this hour.
From the Library of Lee Bogdanoff
116
HOUR 5: Controlling Color
Using Filters You can apply filters to any symbol instance or text object onstage. First, open the Filters panel, select an object, and then select the filter you want to apply. Take a look at Figure 5.2. FIGURE 5.2 You can apply advanced special effects to symbol instances using the Filters panel.
Properties for selected filter
Enable or disable filter Clipboard Presets Add filter Reset filter
Delete filter
To start, select an instance, and then click the Add Filter button (on the bottom left of the Properties panel) to select a filter. The menu that appears enables you to remove, enable, or disable all filters already applied to the instance. You can individually remove filters by clicking the Delete filter button, but don’t press Delete on your keyboard because it removes the symbol instance. You can also click the button with an eye icon to temporarily disable individual filters. After you’ve added a filter, the properties for that filter appear on the right side of the panel, like adjusting the strength or blur of a filter. The Filters panel supports adding multiple filters to get a layered effect. For example, you can use the Adjust Color filter to turn a color image into black and white, and then also add a Drop Shadow filter. Because multiple filters are cumulative, the order in which they’re applied makes a difference. If you apply a Drop Shadow and then a colored Glow, the Glow is applied to the instance as well as its Drop Shadow, and you see color all
From the Library of Lee Bogdanoff
Using Blends and Filters
around the shadow. If you put a colored Glow and then a Drop Shadow, the object and its Glow are given a Drop Shadow, and the color only surrounds the instance. Because the order matters, you can click and drag to reorganize the filter order listed in the Filters panel. The filters listed on top are applied first. After you’ve spent time setting all the properties the way you want for one or more filters, you can save the settings as a preset. Click Presets, Save As. The properties available for each filter vary, although there are some consistencies. For example, all except the Adjust Color Filter include an option for Quality. This affects how smooth or choppy the gradations appear. Interestingly, Quality affects performance but has almost no impact on file size. You notice the visual impact of the Quality setting most when the blur is greatest. The good news about all the filters is you see their visual effects immediately, so it’s worth exploring the various options. The blends tend to require a little more foresight because many blends don’t have any visible effect under certain conditions.
117
CAUTION
Applying Presets Removes Existing Filters When you select one of the preset filters you’ve saved, it wipes away any filters already applied to an object. If you want to supplement a preset, start by applying the preset, and then make adjustments or add more filters.
Like blends, we list the filters and let you explore on your own. Later this hour. you get plenty of exercise applying them to real tasks. . Drop Shadow—Creates a single-color duplicate of your instance’s shape, slips it underneath your instance, and offsets the location. There are options to control the strength or alpha, blur, angle, and offset distance. Used conservatively, the Drop Shadow can add depth to an image. Interestingly, if you simply make the shadow very blurry and the same color as your symbol instance, it looks a lot like a motion blur. . Blur—Blurs the entire content of your instance. Besides the out-of-focus look, you can blur the X or the Y more than the other to get a motion blur effect. That is, lots of Y blur makes something look like it’s moving up or down. . Glow—Makes a duplicate of your instance’s shape and blurs it. It’s like having a blur with your original layered on top. There are many specific reasons to use Glow, but a common one is to make text stand out when the text is too similar to the background color. . Bevel—Gives the instance an embossed look, almost like raised printing. The reason your instance looks raised is the upper left is lightened or highlighted. It’s like there’s a light up to the left, so the bottom right is darkened as if that part is in the shadow of the object. You can change the highlight and shadow colors as well as the angle where the imaginary light is positioned.
From the Library of Lee Bogdanoff
118
HOUR 5: Controlling Color
. Gradient Glow—Is just like Glow except the color of the glow is a gradation, that is it ranges from one color to another. . Gradient Bevel—Is just like Bevel except the colors for the highlight and shadow are gradated. . Adjust Color—Works best on instances that contain a raster graphic. It’s an intuitive filter for adjusting the contained color. Drag the Saturation slider all the way to the left (–100) to make a color photograph appear black and white.
As a summary of color styles, blends, and filters, consider the normal process you follow to create a graphic. Start by making symbols based on a foundation of building blocks—basically, the graphics you can import or draw in Flash. Place them onstage, and then apply color styles or filters. Blends enable you to define how layered objects appear. When you want the same effect applied to multiple objects, you can nest symbols inside symbols. Although in Hour 2, “Drawing and Painting Original Art in Flash,” and Hour 3, “Importing Graphics into Flash,” you learn ways to either create or import graphics, the color styles, blends, and filters give you ways to create even more advanced effects. Plus, compared to importing raster graphics with the same visual effect, applying effects to instances in this manner is more bandwidth friendly. You’re being efficient by storing graphics in the Library, but because all these effects are applied at runtime, they are almost always smaller than raster alternatives. Of course, they’re also better because you can make edits right inside Flash. It’s worth noting that even though such runtime effects don’t add much to file size, they do tend to reduce your movie’s performance by making it play slower. Don’t worry, though, because the impact is not an issue unless you overdo it. Plus, you learn ways to optimize performance in Hour 23, “Optimizing Performance.”
Creating and Saving Color Swatches In the following sections, you learn how to create and save color swatches to easily produce customized color palettes for movies. This helps you ensure a color theme is maintained throughout a Flash Movie or an entire site. You also see how to create and control gradients.
From the Library of Lee Bogdanoff
Creating and Saving Color Swatches
119
Creating Solid and Gradient Swatches In Hour 2, anytime you want to color a line or fill, you select the swatch of your choice from the Fill Color or Stroke controls in the Tools panel or Properties panel. Clicking the fill color exposes all the swatches that are currently available. Creating a custom color swatch involves two basic steps: using the Color panel to pick a color, and then saving it as a swatch. This process is easy, but it’s still worth stepping through carefully the first time. In the following task, you create a custom color by using both the Color panel and the Swatches panel. In this task, you look at several ways to create colors, and then save them as swatches for use later. Follow these steps: 1. Make sure both the Color panel and the Swatches panel are visible.
TRY IT YOURSELF ▼ Create a Custom Color and Swatch
2. In the Color panel, click the color picker, shown in Figure 5.3, and drag as you move through all the colors. Although the choice of colors isn’t infinite, there are more than 216 variations. 3. You should notice as you move through the color picker that the numbers in the RGB (red, green, blue) fields change. Colors are mixed from 256 shades of red, green, and blue with numeric values 0 to 255. These numeric values can be particularly useful. For example, a company that wants its logo colors to remain consistent can provide specific RGB values. 4. Another way to select a color is to sample it from somewhere else, even from outside Flash. For example, to use a color from a web page, open the page in a browser, and resize the Flash application so you can see both the web page and the Flash program at the same time. 5. In the Color panel or Tools panel, click and hold the fill color. As you drag, move to the website in the background (see Figure 5.4). The current fill color changes to the color from the web page when you release the mouse button.
Color picker FIGURE 5.3 Selecting a color from the Color Mixer panel requires that you click the color picker square.
6. Now that you’ve created a new color, you could use it immediately by selecting the Brush tool. Instead of trying it now, save it as a swatch, so you can easily select it later without using the Color panel. In the Color panel’s options menu, select Add Swatch. This adds the current color to the bottom of the Swatches panel. Another way to add a swatch is by enlarging the Swatches panel, and then clicking underneath all the existing swatches.
From the Library of Lee Bogdanoff
120
HOUR 5: Controlling Color
▼ TRY IT YOURSELF Create a Custom Color and Swatch NOTE
Panel Options Menu Remember that each panel has a subtle options menu available at the top right of its title bar.
FIGURE 5.4 Sampling a color from outside Flash is possible. A web page is positioned on the left for sampling.
7. Scroll to the last color in the Swatches panel to find the new color. You can also find the color anytime you click to select a color for your fill color or stroke color (see Figure 5.5).
FIGURE 5.5 After a swatch is added, it appears almost everywhere—as a fill color, a stroke color, or a text color.
From the Library of Lee Bogdanoff
Creating and Saving Color Swatches
121
NOTE You’ve seen how to select colors and save a swatch. Even though we added a swatch for a custom color selected from the Web, it’s also convenient to save any color, even one that already has a swatch. For example, if you’re using the same orange color repeatedly, you don’t have to remember it’s the one in the eighteenth column and seventh row of the Color Swatches panel. Just save a swatch, and it becomes one of the few swatches in the last row. You can even create a whole row of black swatches (21 across), so you can easily see where your custom swatches begin. In the preceding task, you sampled a color and added it to the swatches. You can also enter the exact RGB if you know it. Alternatively, you can use HSB (hue, saturation, brightness) if you change the setting in the Color panel’s options menu. The Hex value always appears under the color picker. In addition, that same editable Hex field appears in the color swatches that pop up next to the fill color or stroke color in the Tools panel or Properties panel. Finally, for any color setting, there’s an option for the percentage of alpha. The lower this percentage, the more transparent the color is. This is convenient; however recall from Hour 4, “Staying Organized with the Library and Layers,” that you can also apply the Alpha color effect on a symbol instance. That’s not the same thing unless the symbol is all one color, but the exact appearance of a color changes when you modify the alpha. If the color is in your client’s corporate logo, you probably don’t want to change its alpha. Even though the process for creating swatches is time-consuming at first, it can really help you down the line. For instance, although swatches are saved only with the current Flash file, after you’ve taken the time to create custom swatches, you can save them as a Flash Color Set file. From the Swatches panel’s options menu, you select Save Colors. The file you save can be used with other files or by other team members. To load colors that have been saved this way, you select Replace Colors from the Swatches panel’s options menu. Notice the feature is called Replace not Add—so it replaces any custom colors you’ve already created. No doubt you’ve noticed the fill color can be a gradient. You see both radial and linear gradients in the default color swatches any time you click to specify the fill color. In the following task, you learn how to create your own custom gradient.
Color Systems There are several ways to describe color. Your monitor has three color guns that project red, green, and blue, respectively. Using RGB to describe a color tells each gun how much of its color to project. With 256 shades of color for each gun (0–255), practically any color (16.7 million or so) can be created by mixing the three guns. Even though RGB may be the most intuitive color system, other systems exist. Consider that the range of 0–255 used in RGB means nine characters are necessary (three for each color because the number 255 has three digits). The Hex system was developed to describe RGB by using only six characters. Hex uses only six characters by extending the 10-base numbering system (which has only 10 characters, 0–9) to a 16-base system (0–9 plus A, B, C, D, E, and F). The result is that red, green, and blue each get two characters. For example, FF0000 is pure red (the highest value for red, FF, and no green or blue). Magenta is FF00FF (a mix of red and blue). In Flash, you see two designations of a value that is presented in Hex: the prefix 0x, as in 0xFF000, and the more standard prefix #, as in #FF0000. HTML also uses the Hex system to describe colors. Still another system HSB uses is the three factors: Hue (think angle in a color wheel), Saturation (how much chroma the color has or how rich it is), and Brightness (the amount of white— as if you’re adding white to a paint color). There’s no difference in the resulting color when you use any system: RGB, Hex, or HSB. For example, in the previous example, the reddish color we sampled had 238,59,65 when expressed in RGB, which is identical to saying #EE3B41in Hex. It’s almost like the difference between English and Spanish: You can say “red” or “rojo,” and the result is the same. Flash’s Color panel is a nice way to get a feel for the differences. You can select a color, use the options menu to change the setting from RGB to HSB, and then view the results.
From the Library of Lee Bogdanoff
HOUR 5: Controlling Color
122
▼ TRY IT YOURSELF Create a Custom Gradient
In this task, you create a custom gradient. This task requires that the Color panel be fully expanded and the Swatches panel be present. Follow these steps: 1. Expand the Color panel and arrange the Swatches panel so the two panels are not docked to each other. Click the bucket icon in the Color panel to define a gradient for the fill portion. You can set a gradient for both the fill and the stroke separately.
Extend Reflect Repeat FIGURE 5.6 Gradient overflow options are shown visually in the drop-down menu in the Color panel.
2. Select Linear from the Type drop-down list. Notice the Color panel changes in several ways. A sample gradient appears in the color picker area; two little triangle arrows appear at each end of the gradient sample, which enables you to edit the color at either end; and the Overflow drop-down menu appears. You can set the gradient to appear once or extend, reflect, (meaning it goes from the first color to the last color, then back to the first, and so on), or repeat, (meaning it goes from the first color to the last, then first to last again, and so on). (See Figure 5.6.) 3. Either arrow (indicating the end of a gradient range) can be edited. The one with a black triangle indicates it’s the one being edited currently. Click the one on the left, and the pointer head changes to black, as shown in Figure 5.7. Now edit this starting color by double-clicking to select a color of your choice in the swatch fly-out menu that opens. Choose a yellow color. 4. Select Radial Gradient from the Fill Style drop-down list, and you see the Color panel change again—but only in that the gradient sample is oval. 5. Double-click the pointer on the right side of the gradient and then select a bright blue color. You should now have a radial blend that goes from yellow to blue.
FIGURE 5.7 With the left side of the gradient selected, you can double-click to change the color.
6. To add more colors to the gradient, click under the gradient definition bar in the Color panel, the short wide sample gradient. New pointers appear, and you can move them and edit their colors. To remove a color, drag the pointer straight down. 7. To save this gradient in your Swatches panel, either select Add Swatch in the Color panel’s options menu or click in the Swatches panel to the right of the gradients that are already saved. This simply creates a new swatch based on the currently selected color.
Now that you have a custom gradient, you learn how it can be used in a movie.
From the Library of Lee Bogdanoff
Creating and Saving Color Swatches
123
Using and Transforming Gradients Whether you use the default gradients or create your own as you did in the previous task, there’s more to using gradients than selecting one of your choice for the fill or stroke colors. The Gradient Transform tool gives you some powerful ways to edit the precise look of your gradients. The Gradient Transform tool shares a slot in the Tools panel with the Free Transform tool. That means you have to click and hold the button for the Free Transform tool to access the Gradient Transform tool (or press F). The Gradient Transform tool only edits gradients already applied to a fill or stroke onstage. It doesn’t create anything. If you select the Gradient Transform tool and then select an existing gradient, you’re given handles that enable you to adjust the attributes of a gradation. You can adjust the falloff rate, center point, rotation, and, in the case of radial gradients, the shape and focal point. When you create fills that use a gradation, such as when you use the Bucket tool, you have an option called Lock Fill. While Lock Fill is selected, all the shapes you fill are part of the same gradient. If that gradient goes from black to white, the transition is spread out through all the objects. If Lock Fill is not selected, each shape repeats a single gradient from black to white. In the following task, you practice using the Gradient Transform tool and the Lock Fill option.
In this task, you explore using the Lock Fill option and the Gradient Transform tool to gain full control of gradients. Follow these steps: 1. Select the Rectangle tool; make sure Object Drawing is deselected in the options area; select a solid fill color; and draw two squares close together. Deselect everything by pressing Esc.
TRY IT YOURSELF ▼ Transform Attributes of Gradients Used in a Movie
2. Select the Paint Bucket tool and a radial gradient from the fill color swatch. (The white-to-black default is fine.) 3. Make sure the Lock Fill option is not selected. The Lock Fill is controlled by a button at the bottom of the Tools panel when the Paint Bucket tool is selected, as shown in Figure 5.8. Click once in each square to fill it with the radial fill. Both squares have the entire radial effect—from white to black. This is the normal mode. Notice the radial gradient centers around where you clicked. Continue to click in different locations within each square to see that the center of the gradient appears where you click.
From the Library of Lee Bogdanoff
124
HOUR 5: Controlling Color
▼ TRY IT YOURSELF Transform Attributes of Gradients Used in a Movie FIGURE 5.8 Lock Fill is at the bottom of the Tools panel when the Paint Bucket is selected.
4. Click once near the edge of a square that borders the other square. Click Lock Fill. Now the last fill you made defines the start of all subsequent fills because Lock Fill has been turned on. Although it’s not required, you might encounter fewer problems if you first fill one shape, and then turn on Lock Fill before continuing. 5. Click the other square. You should notice the gradient continues from where it started in the first square; that’s the result of Lock Fill being selected. If you click the first square again, the center point of the gradient remains locked. 6. Press F to select the Gradient Transform tool. You can edit the fills you’ve made. With this tool selected, you can edit fills that are already on the Stage. 7. Click the fill of one of the squares, and several handles appear, as shown in Figure 5.9. You can now move the gradient’s center. The handles on the edge enable you to change the shape of the radial gradient, falloff rate, focal point, and rotation. 8. You probably find these handles to be very intuitive, but you should experiment with them a bit. Click and drag the Move handle to change the center point of the fill. (Figure 5.10 shows six handles that all change your cursor.) 9. Click and drag the Reshape handle to make the gradient an ellipse rather than a perfect circle. Notice in Figure 5.10 that the Reshape cursor is similar to the cursor you see when you scale an object.
From the Library of Lee Bogdanoff
Controlling Color
125
TRY IT YOURSELF ▼
Reshape handle
Transform Attributes of Gradients Used in a Movie Move focal point handle (only for radial gradients) Falloff handle
Move center point handle
Rotation handle
FIGURE 5.9 You can use the Gradient Transform tool on this gradient, which spans multiple shapes because Lock Fill was selected.
10. The Focal Point handle lets you change the symmetry of the radial gradient. The effect is similar to the Reshape handle; however, the Focal Point identifies the hot spot within the entire shape. The Focal Point handle adjusts how oblong the gradient should appear. 11. Use the Falloff handle to change the rate at which the gradient changes from white to black. A custom Falloff cursor is shown in Figure 5.10. FIGURE 5.10 The different features of the Gradient Transform tool have different cursors. Move
Falloff Reshape
Focal point Rotation
Gradient Transform tool active
12. Adjust the rotation of the reshaped gradient. You see the same Rotation cursor that is shown with the traditional rotation tool in Figure 5.10. With radial gradients, you have to reshape the fill before the rotation handle provides any results.
From the Library of Lee Bogdanoff
126
HOUR 5: Controlling Color
You might think that we’ve spent an inordinate amount of time with gradations. However, it’s really a powerful effect—sort of the poor-man’s 3D. Figures 5.11 and 5.12 show two simple examples (including a pseudosphere) that are created using gradients.
FIGURE 5.11 A simple filled circle becomes a sphere when you tweak a radial gradient. FIGURE 5.12 A subtle gradient with Overflow set to reflect adds a subtle touch to this picture frame.
Summary You’ve acquired a lot of skills in these first five hours. Refining those skills and applying them to whatever challenges you encounter is a matter of practice. In this hour, you have created and used swatches and custom gradients. You also got plenty of practice using the Gradient Transform tool. Perhaps the most valuable aspect of this hour was how some of the later tasks had practical and specific applications. It’s relatively easy to learn all the tools, but much harder to apply them. There are too many applications for Blends and Filters to cover during this hour, but you should have gotten a good sense of the potential of these tools.
From the Library of Lee Bogdanoff
Summary
127
Q&A Q. I turned on the Lock Fill option of the Paint Bucket tool, but when I fill a shape with a gradient, I see a solid color. What’s going on? A. If you think you’re looking at a solid color, it’s possible you’re seeing one end of the gradation. The best way to use the Lock Fill feature is to first fill a shape with Lock Fill turned off; then, turn it on and continue to fill other shapes. Otherwise, what often happens is the gradient’s Fill Transform handles are set so the falloff is extremely large. If this happens, you can try setting the Stage zoom level to 25% and selecting the Fill Transform tool. You might then see the handles for the gradation way off the Stage. Q. I set the blend of an instance to Invert and expected to see a negative version of that symbol. Instead, it made my symbol black. How do I get that inverse look? A. Remember that blends almost always require both an overlaying instance that has the blend applied as well as the objects (such as shapes, Drawing objects, or other symbols) that are underneath. To see the inverse of an instance’s contents, create a solid shape (like a rectangle the same dimensions as the instance you want to invert) and put it underneath the instance with the blend applied. You can play around with the color of that shape for different effects. Alternatively, put the instance’s blend back to Normal, convert the shape to a symbol, and apply a blend to that solid instance. Make sure the solid is on top of your original instance. Q. What is the best color specification system to use: RGB, HSB, or Hex? A. Whichever one you prefer. No one system is better than the other. For every color onscreen, there’s a corresponding color value in any of the systems. If your client provides its trademark colors in RGB, you can use RGB. If someone provides you with the hexadecimal values for color, you can use that system. The three systems are essentially the same.
From the Library of Lee Bogdanoff
128
HOUR 5: Controlling Color
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. When you create a gradient swatch, which panel(s) do you use? A. The Swatch panel and the Gradient panel B. The Properties panel C. The Color panel 2. Before Flash included Filters and Blends, it was pretty much impossible to use it for graphics. A. True. B. No. You could still create graphics; it was just a bit less advanced. C. No. Filters and Blends only apply to raster graphics, so you’re fine if you don’t plan on using those.
Quiz Answers 1. C. The Color panel is where you create and edit a custom gradient. There is no Gradient panel, so Answer A is definitely incorrect. 2. B. Filters and Blends are just tools. There is usually more than one way to create an effect.
From the Library of Lee Bogdanoff
HOUR 6 Applied Layout Techniques
Before moving on to animation next hour, you get one more hour to polish the skills you’ve acquired so far. Whether you’re creating a graphic that animates or remains stationary, making it look polished requires both an eye for detail and Flash skills. In this hour, you learn the skills to create great looking graphics with minimal effort.
Setting Text Back in Hour 2, “Drawing and Painting Original Art in Flash,” you learned the basics of placing text in your movies. In this hour, you gain skill in making your text appear exactly as you intend, including when the text changes at runtime or when it includes special effects. You also learn a few incidental tricks to help make text appear exactly how you want.
WHAT YOU’LL LEARN IN THIS HOUR: . How to fine-tune text display . Additional tricks for creating perfectly aligned graphics . Practical uses for Blends and Filters
Static Text Layout Any time you need text that isn’t changing throughout the movie, you should use the Static Text option from the Text Type dropdown in the Properties panel. If you need text that changes (like if you want to display the time the user visits), you need to use Dynamic Text. If you want a text field into which the user can type his name, you must use Input Text. Both Dynamic and Input can change at runtime; Input can be entered or changed by the user. Most of the time your text does not need to change, so you use Static text. We get to Dynamic and Input text in a minute, but for now let’s look at ways to control Static text. One of the main benefits of Static text is the user doesn’t need a copy of the font you used. However, you or anyone else changing the text in the source (.fla) file needs the font used in the movie
From the Library of Lee Bogdanoff
130
HOUR 6: Applied Layout Techniques
to change the Adobe Flash SWF (.swf) files. This is important when working on a team. For example, when your colleague sends you a .fla that uses a font you don’t have installed, you can make changes to any part of the file, except the text. As long as you send the file back to be published, the fonts used in the file will not be changed and will look as they should in the final movie. When you open a .fla that contains fonts you don’t have installed, Flash displays the Font Mapping dialog shown in Figure 6.1. Unless you want to globally substitute a particular font, select System Default. FIGURE 6.1 Select Use Default on the Font Mapping dialog, and you can send a .fla back to a colleague to publish with the necessary fonts.
TIP
Using Find and Replace to Replace Fonts You might want to globally replace every instance where you used a particular font, but you don’t like the idea of removing the font from your system, relaunching Flash, and using the Substitute Font option in Font Mapping. To avoid this, you can use Flash’s advanced Find-andReplace panel. Press Ctrl+F and what looks like a standard dialog appears. You can also do more advanced things such as limiting your search to a particular font. From the second dropdown, select Font, then select the font you’re looking for in the third dropdown. Also, if you accidentally set one block of text to 12 point instead of 11, you can find it immediately using this tool.
There are a few more points you should know about using Static text. First, be conscious of the Selectable option located in the Properties panel when a text block is selected. The Selectable text is what it sounds like—text that a user can select with their cursor. Only enable Selectable text when it makes sense. Users don’t need to select things like headlines or text that appear only briefly during an animation. Here’s a tip for making any color text look good on any background. Sometimes in foreign films you see white subtitles. That works great on a dark background, but the same white is impossible to read on a white background. If you want to ensure text stands out on any color background, you can use the Glow Filter. For example, if your text is light, you can create a glow-in-the-dark color as shown in Figure 6.2. Set the blur factors to something low, like 2. Interestingly, the low quality setting makes the text stand out more. The blur isn’t as smooth, but that makes the text sharper.
From the Library of Lee Bogdanoff
Setting Text
131
FIGURE 6.2 The Glow Filter or Drop Shadow Filter can add the needed contrast to make light text stand out on a light background.
We’re going to move on to Dynamic and Input text, which are everything Static text is plus more. The tricks you’ve seen for Static text apply to Dynamic and Input text.
Embedding Fonts for Dynamic Text We’ve explained that Dynamic and Input text can change at runtime. The user can change Input text by typing. But to see how to write the instructions to change Dynamic text at runtime, you have to wait until Hour 16, “Basic Interactivity,” before learning how to use ActionScript. Fonts become an issue with Dynamic or Input text when you consider the fact Flash can’t guess which characters it needs to include when publishing a .swf (the way it does with Static text). When the movie runs on your user’s machine, Flash finds a substitute for any missing fonts. This only happens with Static text if you select Use Device Fonts from the Anti-alias dropdown in the Properties panel. Because the exact characters appearing in a Dynamic or Input text field can change, Flash, by default, embeds no fonts. So, this is a problem only when the end user doesn’t have the particular font installed. There are ways to reduce or prevent Flash from having to find a substitute font—which is always different and often worse than your preferred font. You can select one of the Device Fonts listed at the top of the font dropdown list: Sans, Serif, or Typewriter. These have little impact on file size because the setting forces the Flash player to find a working substitute on the user’s system, respectively: Arial, Helvetica, Times, or Courier. There are disadvantages to this approach: One, it’s not 100% foolproof because a user could have removed the font—though this is pretty unlikely because they’re such common fonts., Two, you’re limited to only three very basic fonts! To ensure a font used in your Dynamic or Input text appears to the user exactly as it does on your machine (where that font is installed), you need to embed the necessary characters. We say “necessary characters” because you
From the Library of Lee Bogdanoff
132
HOUR 6: Applied Layout Techniques
shouldn’t embed more than you need. Every added character adds to the file size. For example, if you’re using Dynamic text to display a digital clock, you only need the numerals 0 through 9 plus : and A,M,P (for AM or PM). To select the characters to embed, click the Character Embedding button in the Properties panel, which is only available with Dynamic or Input text that uses a font other than one of the three device fonts listed earlier. The Character Embedding dialog, shown in Figure 6.3, lets you select groups of glyphs, or what we’d call characters. For example, you can embed just the uppercase alphabet (A through Z). Here’s a huge tip: Don’t click the All option. If you want to include all characters, you probably just need to select the Basic Latin choice, which includes upper- and lowercase letters, numerals, and all punctuation. Usually, you don’t need all 52 punctuation marks. For a digital clock, you can select Numerals in the top list, and then type AMP: into the Include These Characters” box. Think of this box as meaning “also include these characters” because they get added to the groups you’ve selected in the top box. FIGURE 6.3 You can selectively embed specific characters (glyphs) to ensure users see text with a font installed on your machine.
Embedding fonts enables you to include any font in Dynamic or Input text. There are additional reasons why you might need to embed font characters. Embedding is also required when you want to: . Rotate the text (or put text inside a Movie Clip that is rotated) . Mask part or all of the text . Use Filters on the text
From the Library of Lee Bogdanoff
Setting Text
133
You’ve already seen how to use the Transform tool to rotate objects. If that object is a block of Dynamic or Input text or a symbol instance, which itself contains Dynamic or Input text, you need to embed the characters. In Hour 15, “Creating Special Effects,” you see how a mask layer enables you to hide and reveal parts of objects in other layers. Odd-shaped masks don’t work on Dynamic or Input text unless you embed the characters. Finally, if you plan on applying Filters to Dynamic or Input text, you need to embed the font. If you’re getting the feeling that it’s easier to always embed fonts when using Dynamic or Input text, you’re right—however, don’t embed unless you have to! It adds significantly to the final file size for your .swf, (around 50K per font). Also, remember when you do need to embed, only embed the characters you’re using. To give you an idea of how you might use Dynamic text, we’ve included the following task that displays and updates the current time. We’ve included it here because it fits well with the topic of Dynamic text, but I warn you that it involves ActionScript, which isn’t discussed in more detail until Hour 16. The following exercise is quite practical and easy to build despite requiring some ActionScript. 1. Create a new Flash file (ActionScript 3.0).
TRY IT YOURSELF ▼ Display the Time in Dynamic Text
2. Use the Text tool to create a block of text. Use the Properties panel to set the Text Type to Dynamic Text. Also set the margins wide enough to accommodate at least 20 characters or so for the time and time zone. You could type something like 12:01:34. Interestingly, when the movie runs, whatever you typed is replaced with the actual time. 3. Ensure that you’re still selecting the text block and use the Properties panel to give the text an Instance Name. To do this, enter clock_txt (as shown in Figure 6.4) into the Properties panel where it currently reads
. 4. Click any cell in the Timeline, and then select Window, Actions. (You select the Timeline because the following ActionScript can’t be placed on the text.) 5. Type the following code into the Actions panel: addEventListener(“enterFrame”, updateClock); function updateClock( evt ){ var now = new Date(); clock_txt.text = now.toTimeString(); }
From the Library of Lee Bogdanoff
134
▼ TRY IT YOURSELF Display the Time in Dynamic Text
HOUR 6: Applied Layout Techniques
6. Select Control, Test Movie. The time should appear in the Dynamic Text field and should update every second.
You find variations of this exercise, including one that displays AM and PM, in the supplemental downloads at the publisher’s website.
FIGURE 6.4 To populate a Dynamic Text field, you need to assign an Instance Name.
Applied Examples Using Color Styles, Blends, and Filters So far, you’ve discovered how to create symbols in the Library, use Color Styles to modify instances, and work on instances of symbols using Blends and Filters. In this section, you learn other practical uses for Color Styles, Blends, and Filters.
Practical Uses for Blends The key to understanding Blend modes is to remember there are usually two players: the overlaying instance (that is, the one with a blend applied to it) and all objects underneath. You can also nest the blends by applying a blend on one symbol instance residing inside another instance. You should explore the different blends. When you find one that works well for a particular effect, take time to study why it worked. It does you no good to simply memorize the technical effect for each blend if you can’t use it in a practical manner.
From the Library of Lee Bogdanoff
Applied Examples Using Color Styles, Blends, and Filters
Perhaps the most powerful blend is Layer. When a Movie Clip instance (on which you want to apply an alpha) contains multiple overlapping objects, Layer is a lifesaver. For example, the Flower Movie Clip (shown in Figure 6.5) is created by repeatedly duplicating and rotating an instance of the petal. To do this, set the registration point to the corner of the petal; type 30 degrees in the Transform panel; and click Copy and Apply Transform 12 times. When the Alpha Color Style is applied on the flower instance, the portions of contained, overlapping petals has a different alpha amount. Leave the alpha setting as is and change Blend to Layer, so the flower petals are not transparently layered over each other.
135
FIGURE 6.5 The overlapping petals inside a flower clip with an alpha Color Style has an unexpected look (left), but improves when Blend is set to Layer (right).
Other useful blends include Hard Light and Overlay. The basic technique is to apply the Hard Light or Overlay Blend to a clip containing a gradient. This effect is nice because you can add a highlight or sheen that doesn’t permanently change an imported raster graphic. You could create the same effect using Photoshop before you import an image but you can’t edit it once inside Flash. In addition, when you learn how to animate starting in Hour 7, “Understanding Animation,” you can animate the highlight effect, making an otherwise static image almost come to life.
1. Import a photograph; we use a photo of a sports car. Select the Rectangle tool and ensure Object Drawing is turned on. Draw a filled rectangle the same size and in the same location as the photograph. 2. Open the Color panel, and then select the rectangle. Make sure the Fill color is active in the Color panel, and then select Radial from the Type drop-down menu. Now edit the gradient so it starts at white, if it isn’t already, and ends at 0% alpha gray. Click the ending triangle on the right, and then select a gray color. Set the alpha to 0.
TRY IT YOURSELF ▼ Use the Hard Light or Overlay Blend to Add a Highlight
3. Use the Gradient Transform tool to change the center point and falloff of the gradient. We position the center on top of the car headlight and make the falloff very sharp. 4. The highlight looks pretty bad because it goes from white to gray to clear. Wouldn’t it be cool if the white could stay and the gray could blend into the car’s color? That’s what Hard Light or Overlay can do. Select the drawn rectangle, and convert it to a Movie Clip by pressing F8 or choosing Modify, Convert to Symbol. Select the newly created instance, and use the Properties panel to choose Hard Light from the Blend drop-down. You can also try Overlay which is more subtle, so the highlight includes more of the car’s color.
From the Library of Lee Bogdanoff
136
HOUR 6: Applied Layout Techniques
This technique works best when you keep the effect subtle. By the way, there’s a similar technique to make a ribbon-like sheen. Instead of the radial gradient, make a multistep gradient or one that repeats. This technique works best for something like the picture frame shown during the last hour in Figure 5.12 from Hour 5, “Controlling Color.” The highlight effect in the previous task is more interesting when you add a little bit of motion—that is, when you animate it. The following practical use for the Invert blend requires animation for you to see anything. But, it’s worth looking at now. You can get a lot of mileage by applying the Invert blend to a black rectangle that covers your entire stage. To see the effect, draw several shapes on the Stage. Then, make sure Object Drawing is turned on, and draw a blackfilled rectangle the same size as the Stage. Convert the rectangle to a Movie Clip, and set the Blend to Invert. To simulate how the effect can be animated, select the clip, and then alternate between cut (Ctrl+X) and undo (Ctrl+Z). Imagine that a ball animates across the screen and when it hits a window this inverted blinking happens. It’s pretty effective despite the simplicity. There are many more practical uses for the Blends. Hopefully, this section has given you a few starter effects you can practice and expand upon.
Practical Uses for Filters Many of the Filters are effective on their own. For example, add a Drop Shadow filter to a clip. The clip immediately appears to float above the stage. We provide one simple and one advanced example to give you a taste for using Filters in practical situations. You might laugh when you see how easily you can use Filters to desaturate a photograph so it looks black and white. Here’s a one sentence task: Import a photograph, convert it to a Movie Clip symbol, use the Filters section of the Properties panel to select Adjust Color, and then move the Saturation slider all the way to the left (–100). It’s also easy to make a photo look oldfashioned with a sepia-tone effect. Just bump up the Saturation a little and use the Hue slider to pick a yellow tinge. If the desaturation trick was too easy, the following effect is more involved. Basically, it’s a combination of a few things you’ve already done this hour: old-school drop shadow and Hard Light blend, all on top of the Bevel Filter. It adds some realism to the plastic-looking effect you get with a plain Bevel filter. From the Library of Lee Bogdanoff
Applied Examples Using Color Styles, Blends, and Filters
There’s a design trend to give icons a soft 3D plastic-looking character. It’s easy to create by combining a few features. 1. Use the Rectangle tool to draw a square filled with a solid red brown color (we use #AC6560) and no stroke. Select the Free Transform tool, and then click the Distort option. To distort it so it looks like it’s facing the left, press Shift as you drag the top-right corner handle up. Select the Rotate and Skew option, and rotate it clockwise a few degrees so it looks like Figure 6.6. 2. Select the distorted rectangle, convert it to a Movie Clip, and name it Rectangle Middle. From the Add filter button on the Properties panel, add the Bevel filter. Crank up both the Blur X and Blur Y to 18; set the strength to 150%. Leave the highlight color white, but change the shadow color to the same color as the rectangle’s fill (or a tad darker). Click the Shadow color chip, and then the eye dropper cursor enables you to select the rectangle you drew. Step back and see how nice the bevel looks; it looks like a computer drew it. 3. To add more character, we use two techniques you’ve already learned about. First, let’s add a subtle highlight using the Overlay blend on a duplicate of the rectangle. Copy the instance of Rectangle Middle. Select Edit, Paste in Place, and then click Modify, Break Apart. Without deselecting, convert this shape to a Movie Clip (press F8), and name it Rectangle Top. 4. Double-click to enter the Rectangle Top symbol. Change the fill color to a radial gradient in the same manner you did in the task “Use the Hard Light or Overlay Blend to Add a Highlight.” This time, make the gradient go from a bright red to a very dark red, almost black. Position the bright red portion of this gradient near the top left of the rectangle. This time make the falloff more gradual, so the gradient covers the entire shape, as shown in Figure 6.7.
137
TRY IT YOURSELF ▼ Combine Techniques to Improve the Bevel Filter
FIGURE 6.6 This unassuming distorted rectangle becomes quite sophisticated after we’re done with it.
FIGURE 6.7 The gradual falloff for this gradient adds some dimension when you use it with the Overlay blend.
From the Library of Lee Bogdanoff
138
▼ TRY IT YOURSELF Combine Techniques to Improve the Bevel Filter
HOUR 6: Applied Layout Techniques
5. Go back to your main scene, and select the Rectangle Top instance (not containing a gradient). Change its Blend to Overlay. 6. It should look 3-dimensional, but a drop shadow adds the final touch. You’re welcome to tr y the Drop Shadow filter on the Rectangle Middle instance, but you get more control over the shape and location of the shadow if you make another instance. Open the Library, and drag another instance of Rectangle Middle onto the Stage. Using the Filters panel, select Drop Shadow. Set the Blur to 16, and the strength to 50%. Then, click Hide Object. Now, rotate and skew the instance to make it look like the shape of a shadow. You probably need to reposition it, so the bottom left corner of the shadow aligns with the bottom left corner of the two other instances already onstage. It’s easiest to adjust the shape and location while it is on top of the other instances. When you’re done select Modify, Arrange, Send to Back. Figure 6.8 shows the finished layout.
FIGURE 6.8 To produce the finished look on the right, three pieces are shown separately on the left.
Summary In this hour, you took a deeper look at text, filters, and blends. You’ve learned about the subtleties of fonts as well as how Flash can display text dynamically. The exercises involving filters and blends weren’t so much about the tools, but rather how to use those tools to achieve a particular effect. When you want to create a particular visual effect in your Flash piece, you need only care about the result. It’s not important that you used a filter or a blend, but rather that the effect looks the way you had in mind.
From the Library of Lee Bogdanoff
Summary
139
Q&A Q. I’m using a really small font (9 point). Although I don’t need it to be Dynamic because it’s not changing at runtime, it doesn’t look as sharp as when I set it to Static Text. Is it alright to leave it as Dynamic, so it doesn’t look fuzzy? A. The fuzziness you’re referring to is called anti-aliasing, and when the text is larger, it helps the text look smoother. When text is really small, you probably want to see if it looks better without anti-aliasing. In the case of Dynamic text (for which you don’t embed fonts), it remains sharp because anti-aliasing isn’t be applied. To answer your question, don’t use Dynamic text unless you need the text to change at runtime. Instead, select the text block, and use the Properties panel to change the font rendering method to Bitmap text. Q. I’m using Dynamic text, and when I test the movie, only the first line of text appears. I’m sure that I set the text block large enough to accommodate at least two lines, so why can’t I see all the text? A. You probably need to select the text, and use the Properties panel to change the Line Type to Multiline. Q. The Blend mode called Invert causes everything underneath to invert, but I want my clip to look like a photographic negative. The only way I can make it work is by placing a clip containing a solid on top of my clip containing the photo, but that seems like an unnecessary extra step. Is it? A. Yes. You can simply apply the Subtract blend mode on the clip containing a photo.
From the Library of Lee Bogdanoff
140
HOUR 6: Applied Layout Techniques
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. Why would you want to embed a font in a Dynamic Text field if it adds to the file size? A. Users only see Times New Roman if you don’t. B. You can’t color Dynamic text unless the font is embedded. C. It’s the only way to ensure the font appears correctly when the user doesn’t have the same font installed. 2. Where can you find the 3D effect in Flash? A. The 3D filter in the Filters panel. B. There is no way to make something look 3D in Flash. C. There isn’t anything built in, but you can fake it by using simple effects such as the Drop Shadow filter.
Quiz Answers 1. C. First, you should only use Dynamic or Input text if you have to. When you do and you’re not completely certain users have the same font installed, then you should embed characters, but only the characters you really need. 2. C. Like so many things, you need to step back and think about how things should look, and then use traditional tools to create that effect.
From the Library of Lee Bogdanoff
PART II Animating in Flash
HOUR 7
Understanding Animation
HOUR 8
Using Motion Tweens to Animate
HOUR 9
Using Shape Tweens to Morph
HOUR 10
Advanced Animation with Inverse Kinematics
HOUR 11
Simulating 3D Animation
HOUR 12
Reusing Your Animations with Motion Presets
HOUR 13
Including Sound in Animations
HOUR 14
Nesting Animations in Movie Clip and Graphic Symbols
HOUR 15
Creating Special Effects
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 7 Understanding Animation
There’s nothing like animation. It can inspire, educate, and entertain. It’s memorable, too; no doubt when you hear the name Disney, scenes from classic animated movies pop into your head. You are on the verge of gaining the power to communicate your own messages with animation. Before we get into the nuts and bolts of Flash animation, there are several concepts you should understand. This hour discusses animation in general and as applied to Flash creations. If your basic understanding is clear, acquiring and applying the technical animation skills discussed in the next several hours is easier.
How Animation Works Animation is made from individual images. Regardless of how motion is created in an animation, an animation is still a collection of fixed images. Suppose you see a car drive by; you see the car the entire time it’s within sight, but you are likely to blink. Your brain covers up the fact that you missed part of the action. When you watch a movie or television, the screen is blinking quickly. Sometimes it shows an image, and other times it’s blank. The fact that the blank moments are so short enables your brain to interpolate the missing information, and you think you’re watching full motion with no gaps.
WHAT YOU’LL LEARN IN THIS HOUR: . The fundamentals of animation . The common terms of animation . How to use the basic Flash features related to animation . The common misconceptions of animation (and how to overcome them)
The image projected onto the retina of your eyes remains even after the light stops. If you close your eyes, the last thing you saw remains imprinted for just an instant, and then it fades. This persistence of vision is why you don’t notice the blank spots between frames of a movie, assuming they are short enough.
From the Library of Lee Bogdanoff
144
HOUR 7: Understanding Animation
Elements of Animation Now that you know a little bit about how animation works, we can discuss how it applies to Flash. As discussed in the following sections, several general animation terms have specific meanings in Flash. You need to understand both the general meanings and how the terms apply to Flash.
Frames and Frame Rate As mentioned earlier in this hour, an animation is a series of still images. Each image is called a frame. In movies, frames are the individual pictures on the film itself. In Flash, frames are the little rectangular cells in the Timeline. If you can’t see your timeline, you might need to open the Timeline panel by clicking Window, Timeline (shown in Figure 7.1). The frames are numbered at the top of the Timeline, and every fifth frame is gray; the rest of the frames are white with a gray outline. The Timeline displays all the frames, but normally you can look at the contents of one frame at a time. The red current-frame marker can be in only one place at a time—the frame you’re currently viewing. You don’t draw into a frame on the Timeline— you draw onto the Stage. The current-frame marker indicates the frame whose contents are currently onscreen. Figure 7.2 shows the Timeline in its initial state. Until this movie’s duration is extended, you can’t move the red current-frame marker past 1, and only Frame 1 is enclosed by a solid white box with a hollow circle. FIGURE 7.1 Click Window, Timeline to open the Timeline panel if your timeline isn’t visible.
From the Library of Lee Bogdanoff
Elements of Animation
145
FIGURE 7.2 The Timeline, with its many cells, is initially only one frame long.
By default, a Timeline is initially one frame long. The current-frame marker is unmovable at that point because it can be placed only in the frame of an animation, and so far the current movie has only one frame. Let’s look at an animation that has more frames, but instead of building an animation, you can download a sample from the publisher’s website. Download and open the keyframing.fla file, so you can follow along. Click in the numbered area of the Timeline on Frame 15. The current-frame marker moves to where you click; be sure to click in the numbered area toward the top of the Timeline, not in the cells (see Figure 7.3). FIGURE 7.3 A 60-frame Timeline is shown with the red current-frame marker on Frame 15. You can move the current-frame marker to any frame within the 60 frames by dragging in the numbered area.
This example illustrates a few important concepts. First, if you click and drag the current-frame marker in the number area above the frames all the way from Frame 1 to Frame 60, you see a quick preview of the animation. This technique is called scrubbing. The preview you’re given is dependent on how fast you scrub. Naturally, the frame rate is more even and consistent when the user watches an animation. If you select Control, Play, or press Enter, you see this animation play at its correct frame rate. To stop, press Enter again. Take a look at the status area along the bottom of the Timeline.
From the Library of Lee Bogdanoff
146
HOUR 7: Understanding Animation
The three numbers are the current frame number, the frame rate, and the current time elapsed (see Figure 7.4). FIGURE 7.4 The status area in the Timeline contains three important numbers related to timing.
Current frame number
Current time Frame rate
Scrub is a term that is used in other animation software. It’s a technique for previewing an animation. In Flash, you grab the red current-frame marker above the timeline cells and drag it back and forth. You are moving your mouse in a scrubbing motion, hence the name. Frame rate is the rate at which frames are played back for the user, measured in frames per second (fps). A frame rate of 30 fps means that 30 frames are displayed every second. It is easy to confuse frame rate with speed, but they’re not necessarily the same. If an entire animation uses 10 frames at 10 fps, it might look identical to the same movement using 20 frames if the frame rate is set to 20 fps. Both of these animations take 1 second to finish. Speed isn’t the reason you pick one rate over another. The issue is the capability of the user’s machine. Flash’s frame rate should really be called maximum frame rate. Your movie never exceeds this rate, but on a slow computer, it might play more slowly. The current frame number, on the left, indicates the location of the red current-frame marker. It changes while you’re playing or scrubbing, reflecting that you can be in only one frame at a time. The frame rate, the middle number, normally indicates the frame rate for the movie that you last specified. This is set by selecting Modify, Document and making a selection in the Document Properties dialog box. However, the number shown can be reduced if after you play the movie, Flash estimates that it can’t actually keep up with the requested frame rate. It’s not entirely accurate, but it does provide a good estimate. Let’s change the frame rate to something very high and see what happens. With the keyframing.fla sample file open, let’s open the Document Properties dialog box by selecting Modify, Document. (You can also open this di-
From the Library of Lee Bogdanoff
Elements of Animation
147
alog box by pressing Ctrl+J.) Another way to change the frame rate without opening the Document Properties is by double-clicking the frame rate number on the Timeline and typing in a new number. Change the frame rate to 120. Press Enter to play the movie, and notice that as the red current-frame marker moves through the Timeline, the frame rate changes to show how fast Flash is actually playing. It wants to go 120 fps, but it might not be able to keep up. Now the status shows a more realistic frame rate, one that your computer can maintain. In reality, however, the frame rate shown is not particularly accurate because it shows only how fast Flash plays during authoring, not in the actual exported movie. If you were to export this movie and play it in a browser, it would likely play slightly faster because the Flash authoring environment is not part of the picture. Current time, the third number, indicates how long it takes to reach the frame you’re viewing from the start of the movie. For example, how long it takes an animation to play 50 frames depends on the frame rate. At 24 fps, it should take about 2 seconds. At 12 fps, it should take about 4 seconds. The duration of the movie is based on the frame rate.
Frame Rate Versus the Number of Frames
NOTE
The numbers in the status area are very important. When you design an animation, you should pick a frame rate and stick to it. When you change the document frame rate, you’re changing it for the entire movie. For example, say you have an animation of a character walking, running, jumping, and sitting still for a few seconds. If the portion where he’s walking is too slow, you might try to speed it up by increasing the frame rate to make it look better—but then you discover the character runs extra fast and his sitting time goes by more quickly. Everything is faster! It’s best to leave the frame rate alone and find another way to increase the speed.
Changing the Frame Rate with Code
There are ways to change the effective speed. Suppose you have an animation of an airplane moving across the sky. You need to decide the effective speed of the airplane according to the size of the airplane and how much sky you’re showing. If you move the airplane all the way across the screen in 36 frames, you can’t determine whether that’s the right speed unless you consider the frame rate. At 12 fps, the airplane takes 3 seconds to move across the sky.
It turns out that in Flash Player 9 and later, you can use ActionScript 3.0 to change the frame rate while the movie plays. This involves a fair bit of work as you have to write the code. Plus, you can’t preview the animation while in Flash, and instead you must export the movie to see the results. For these reasons, we repeat our advice: You should pick one frame rate and stick with it. Keep in mind you can set the frame rate with the code stageframeRate=30.
Effective speed is how fast something seems to move. Actual speed, in comparison, is absolute and can be measured. If an animation uses 12 frames at 12 fps, the elapsed time of 1 second is the animation’s actual speed. The
From the Library of Lee Bogdanoff
148
HOUR 7: Understanding Animation
viewer’s psychological impression determines effective speed. Therefore, you can use illusions to increase or decrease an animation’s effective speed. If a lot of action and changes occur in those 12 frames, it’s effectively fast. If only one slight change occurs, the effective speed is slow. If an airplane in the sky travels completely through your view in 3 seconds, the airplane is probably pretty close to you. If the plane is at 20,000 feet, it would take about 15 seconds or longer to move across the sky. If 3 seconds is too fast for the airplane in an animation, you can make it appear slower by slowing down the frame rate or by increasing the number of frames used in the Timeline. If you slow the frame rate to 2 fps, it takes 18 seconds for 36 frames, but the animation is very jumpy. Plus, you’re changing the rest of the animations in your movie. If you extend the animation to take 240 frames, the airplane takes 20 seconds to complete the motion. You learn how to do these things in the next few hours, but for now, it’s only important to understand the difference between frame rate and total frames.
Frame Rates of Different Types of Animation To put the animation you’re about to create into perspective, let’s consider some traditional animation media. In a motion picture, the frame rate at which the images appear is 24 fps. Even at this relatively slow rate, you don’t notice the moments when the screen is blank. Television plays at 30 fps. In computer animation, the screen doesn’t blink between frames, but you do have a choice about what frame rate to use. Technically, the user’s monitor flickers as much or as little as he has it set to flicker, but in any case, it is much faster than an animation’s frame rate. In computer animation, frame rate affects how frequently the onscreen graphic changes or, conversely, how long it pauses before advancing to the next frame. In practice, if you go much below Flash’s default setting of 12 fps, your user starts to notice jumpiness, and if it’s much higher than 36 fps, it can not perform well on all machines. (Remember that traditional movies use 24 fps and look quite smooth.) It can seem that you should always crank up the frame rate as high as you can, which would address the problem of jumpiness. However, it’s not that simple. First, more frames can mean that your movie has a bigger file size. Also, it often requires a computer that can display images quickly. If your user’s machine can’t keep up, it slows down the animation and makes it
From the Library of Lee Bogdanoff
Elements of Animation
149
not only jumpy but slow. Ultimately, a higher frame rate means more frames, and therefore, more work on your part in creating the animation. Finally, creative animation techniques enable you to fool the user in ways other than relying on persistence of vision and a fast frame rate. You see examples in Hour 8, “Using Motion Tweens to Animate,” when you create an animation that uses only three frames. In Hour 23, “Optimizing Performance,” you learn about even more techniques. For now, keep in mind that frame rate is important, but it isn’t everything.
Keyframes and Blank Keyframes A keyframe is a frame in which you establish exactly what should appear on the Stage at a particular point. A keyframe can include an image, or it might be blank. A blank keyframe is still a keyframe; it’s just one in which nothing appears on the Stage. In traditional film animation, every frame is a keyframe—that is, something new appears onscreen with each frame. In Flash, you can make every frame a keyframe, but you can also take some shortcuts. If the first keyframe occurs on Frame 1 and the next keyframe doesn’t occur until Frame 10, no changes appear onscreen during Frames 2–9. The keyframe in Frame 1 establishes what appears in Frame 1, and it doesn’t change until the keyframe in Frame 10, which establishes what appears then. This is totally appropriate for something that doesn’t need to change every fraction of a second. When you create a keyframe, it’s as if you’re telling Flash, “Put this stuff on the Stage, and keep it here until you reach the next keyframe.” The next keyframe says the same thing, “Now, put this new stuff on the Stage.” You have two things to decide when you create keyframes: when you want them to occur in the Timeline and what you want to appear onscreen at those moments. Creating a keyframe is done by clicking the cell in the Timeline exactly where you want a keyframe to be. After you click to select a single cell in the Timeline, click Insert, Timeline, and Keyframe or press F6. A couple things happen when you do this: Flash places a keyframe in that frame, indicated by either a solid or hollow circle. (The second thing it does sounds more confusing than it is, as you see when you try it yourself shortly.) Flash copies the Stage content from the previous keyframe, and it appears in your new keyframe. If at the previous keyframe you have nothing on the Stage, a blank keyframe is inserted. If at the previous keyframe you have something
From the Library of Lee Bogdanoff
150
HOUR 7: Understanding Animation
drawn on the Stage, that shape or symbol instance is copied onto the State at the new keyframe. This can be convenient because a keyframe gives you a chance to specify both when you want an onscreen change to occur and what the onscreen contents should change to. Often you want just a small change. Creating a keyframe enables you to start with a copy of the previous keyframe’s content instead of redrawing it from scratch. You get the idea when you do it yourself. Whatever you draw in a keyframe continues to be displayed until the Timeline arrives at the next keyframe (blank or otherwise). If keyframes are placed one after another, the screen changes with every frame. If the frame rate is 10 fps, you see 10 keyframes in 1 second. However, keyframes don’t have to occur one after another. If you insert keyframes at alternating frames, changes appear five times per second (still at 10 fps). For any frames between keyframes, you see the content of the previous keyframe, either an image or a blank screen. Say you want a box to appear onscreen and remain still for 1 second before it moves. In one keyframe you draw a box, and then 10 frames later (1 second at 10 fps) you insert a new keyframe in which you can move the box to a new location.
▼ TRY IT YOURSELF Analyze a Finished Animation
In this task, you view a sample animation and make some edits so you can better understand keyframes. Follow these steps: 1. Download the file keyframing.fla from the publisher’s website. In Flash, open this file, and then press Enter to watch the animation (see Figure 7.5).
FIGURE 7.5 This Timeline has many clues about what kind of animation is taking place.
2. Notice there are separate named layers: Sparkle, CS4, Flash, and Background. (We look at each separately.) You might need to resize the height or width of the Timeline, use the scrollbars, or view it as a separate panel to see all the frames and layers (as illustrated in Figure 7.6).
From the Library of Lee Bogdanoff
Elements of Animation
151
▼ TRY IT YOURSELF Analyze a Finished Animation
FIGURE 7.6 You can resize the width of the Timeline to see all the layers.
3. The Background layer appears initially in Frame 1 and remains unchanged onscreen for the duration of the animation. Notice the keyframe in Frame 1, followed by many regular frames. It’s possible to extend or reduce the duration of any of the background layers by first holding Ctrl and then moving the box at Frame 60—but don’t do this yet. Figure 7.7 shows a close-up of the Timeline. Sequence of several keyframes Blank keyframe followed by blank frames
FIGURE 7.7 Here’s a close-up of the Timeline.
Keyframe followed by frames Sequence of keyframes followed by a pause
4. Scrub Frames 31 through 60 by dragging the current-frame marker in the numbered area of the Timeline. Notice the animation of Sparkle. The Sparkle layer has a keyframe in each frame from 31 to 54. Onscreen, a different drawing of the Sparkle appears for each frame. Scrub past Frame 54, and the Sparkle is gone—because in the Sparkle layer, there are no frames after 54.
From the Library of Lee Bogdanoff
152
▼ TRY IT YOURSELF Analyze a Finished Animation
HOUR 7: Understanding Animation
5. The layer called Flash is more interesting. In Frame 1, the word Flash appears, but there isn’t another keyframe until Frame 4, where the word changes. Then, in Frames 4 through 15, a different keyframe for every frame contains a modified image of the word to make it look like it spins. You can press the comma and period keys to step through this animation because scrubbing might be too fast to let you see the effect. 6. The CS4 layer has a blank keyframe in Frame 1 shown by a hollow circle. It’s not that the CS4 graphic is offscreen at the start, rather it doesn’t exist. That’s the idea of a blank keyframe. The CS4 graphic doesn’t appear until Frame 10. This is where you see the first keyframe with a solid black circle. When the CS4 graphic appears, it changes in every frame that contains a keyframe. Actually, it pauses at Frame 20, and another keyframe in that layer doesn’t appear until Frame 25. Finally, Frame 30 is the last frame for this layer, and no frames exist past this point. 7. Try adding frames after Frame 30 in the CS4 layer. Click the cell at Frame 60, and select Insert, Timeline, Frame or press F5. When you play the animation, the CS4 graphic never fully disappears. The new regular frames extend the duration of the contents at the keyframe in Frame 30. One way to remove the frames following the keyframe in Frame 30 is to hold down the Ctrl key and drag the box that is now at the end of the Sparkle layer to the left (see Figure 7.8). (Note that you don’t need to hold Ctrl if you’ve previously selected Edit, Preferences and clicked the Span Based Section option.)
FIGURE 7.8 After you add frames to the end of a layer, you can reduce the duration if you hold Ctrl and drag the box to the left.
8. Close this file without saving.
The practical example in the preceding task is a great chance to see keyframes, blank keyframes, and regular frames in a working file. This isn’t the most impressive Flash movie, but it’s intended to exemplify specific points about frames and keyframes.
From the Library of Lee Bogdanoff
Elements of Animation
153
Tweening You can put whatever you want in keyframes. The space between two keyframes effectively holds the onscreen contents from the first keyframe. Alternatively, you can tell Flash to interpolate the change in a process called tweening. For example, suppose in one keyframe an airplane is on the left of the stage. Then, you have a series of frames. Finally, you have another keyframe that shows the airplane on the right side of the stage. Flash can calculate how to move the first image to the second through the intervening frames. Tweening is the process of interpolating two keyframes. Tweening smoothes out a big change by breaking it into little steps. If a circle at the bottom of the screen jumps to the top of the screen 1 second later at 10 fps, the change appears abrupt. If the two frames are tweened, you see the circle move a little bit (about 1/10 of the total distance) 10 times. The coarse movement is smoothed out with small changes in the in-between frames. Flash calculates these tweened or interpolated frames so you don’t have to do all the work. So you can see what it looks like, check out the tweened frames in Figure 7.9. Tweening really is as simple as drawing two frames and making Flash tween the difference. You learn more about tweening during Hour 8 and Hour 9, “Using Shape Tweens to Morph.” Flash helps you by doing some of the tedious work.
NOTE
The Meaning of Tweening The word tweening is from the word between, and it is used in conventional animation, as well as in Flash. If you look at the credits on any full-length animated feature film, you’re likely to see the names of both the principal artists and the tweeners. The principal artists draw the keyframes, and the tweeners fill in the blanks between them. Similarly, in Flash, you draw the keyframes, and Flash creates the frames in between.
FIGURE 7.9 When you have two keyframes separated by several frames, you can tell Flash how to get from one to the next.
From the Library of Lee Bogdanoff
154
HOUR 7: Understanding Animation
Summary This hour you took a good look at animation. The concepts discussed in this hour prepare you for the next few hours. In this hour, you learned about familiar media such as television and film, including how persistence of vision gives the illusion of animation work. As part of this discussion, you’ve learned several important terms, including frame rate, keyframes, and tweening. Frame rate is how fast Flash attempts to display the contents of each frame in sequence. Keyframes are where you establish what is on the Stage at a particular time. Finally, tweening is Flash’s way of filling the spaces between keyframes. These three concepts and many more become almost second nature as you practice during the next few hours.
Q&A Q. What is the best frame rate to use? A. There’s really no right answer. If there were a rule, it would be to use the lowest frame rate possible. This means fewer total frames, which in turn means a slightly smaller file. More importantly, it means that lowend computers are likely to play back the animation at the intended rate. In addition, it can mean less animating as there are fewer frames to animate. The only downside is you have to be very creative to create animations that use only a few frames to communicate an idea or a movement. In general, you’re usually safe sticking to Flash’s default rate of 24 fps. Q. My monitor’s refresh rate is 75Hz, meaning it blinks 75 times per second. However, I can crank the Flash movie’s frame rate all the way to 120 fps. What would be the value of doing that? A. Nothing, really. First of all, you are likely to find that if you set the frame rate to 120 fps, Flash won’t keep up. If you’re playing only a frame or two, it can actually go much faster than 36 fps. But even if Flash could display 120 fps on a fast computer, it can’t play that fast for the vast majority of the audience. Generally, going much over 36 fps is simply asking for trouble. Q. It was really helpful deconstructing that keyframing.fla file. Can you add some more files like that? A. Sure. In fact, you find several other files that appear later in the book at the publisher’s website.
From the Library of Lee Bogdanoff
Workshop
155
Q. I’ve set my document properties to 24 fps, but the display on the bottom of the Timeline changed to 18.2 fps. How do I change it back? A. First, this is a sign your movie can’t play at 24 fps. The 18.2 indicates that the last time you played the movie, it could reach only that frame rate. The frame rate set in the document properties has not changed. If you really want to change the display number, you need to access the document properties again or double-click the 18.2 and edit it. Keep in mind that just because you set the frame rate to 24 fps doesn’t mean Flash plays that fast. It can try, but it might not succeed.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. What is the visual effect of a movie that has a keyframe in every frame? A. It appears smooth. B. It appears jumpy. C. It might have no visual effect. 2. If you set the frame rate to 2 fps, what is the visual result? A. The animation looks jumpy. B. You see the blank (black) pauses between frames. C. You can see subliminal messages between the frames. 3. If a document’s properties are set to a frame rate of 60 fps, how long does it take to reach Frame 90? A. 1.5 seconds exactly B. 1.5 seconds or more C. None of the above
From the Library of Lee Bogdanoff
156
HOUR 7: Understanding Animation
Quiz Answers 1. C. Many factors besides how frequently keyframes appear affect how an animation looks. First, the nature of the content has more impact than how many keyframes you have. You could have very similar or very different content onscreen for each keyframe. Also, frame rate affects how an animation appears. 2. A. A frame rate of 2 fps is slow enough for you to notice the still frames, but the visual effect is jumpiness. In fact, if the contents of each frame are the same, you won’t see any changes. The pauses between frames are just that, pauses, and not black frames. 3. B. It’s not that your computer won’t display 60 fps if the animation is particularly complex. It probably takes longer than 1.5 seconds to display all 90 frames. If your computer can keep up with the frame rate of 60 fps, it takes slightly less than 1.5 seconds because it has to travel only 59 frames from Frame 1.
From the Library of Lee Bogdanoff
HOUR 8 Using Motion Tweens to Animate
Ever consider how film or old-fashioned cartoons are created? The animation is created frame by frame. In Flash lingo, that means one keyframe appears right after another. You can create animations like this in Flash, but it’s a lot of work because you have to draw every frame yourself. With tweening, Flash fills in the blank frames between two keyframes. Flash has two types of tweening: motion tweening and shape tweening. This hour we cover motion tweening. Motion tweening animates clip properties such as location, scale, rotation, tint, alpha, and filters.
Creating a Motion Tween A basic motion tween is easy to produce. Let’s create one in the following task, and then we can analyze it.
In this task, you make a circle animate across the screen by using the Motion Tween feature. Follow these steps: 1. In a new file, draw a circle on the Stage.
WHAT YOU’LL LEARN IN THIS HOUR: . How to create a motion tween . The basic properties of a motion tween . How to use the Ease In and Ease Out effects . Tricks to make your motion tweens look natural and realistic . How to use the Motion Editor to control Easing
TRY IT YOURSELF ▼ Create a Basic Motion Tween
2. Select the entire circle, and choose Modify, Convert to Symbol (or press F8). Name it Circle, set the behavior to Movie Clip, and click OK. 3. Click Frame 30 in the Timeline, and select Insert, Timeline, Frame (or press F5). 4. Click on the keyframe in Frame 1; the red current-frame marker moves to Frame 1. Position the circle where you want it to appear at the beginning—in this case, to the left side of the Stage.
From the Library of Lee Bogdanoff
158
▼ TRY IT YOURSELF Create a Basic Motion Tween
HOUR 8: Using Motion Tweens to Animate
5. Set tweening in the beginning keyframe—in this case, the first keyframe in Frame 1. To do this, select the keyframe in Frame 1, and then select Insert, Motion Tween. You can also right-click (Ctrl-click on the Mac) and choose Create Motion Tween, as shown in Figure 8.1.
FIGURE 8.1 Right-clicking or choosing Insert, Motion Tween enables you to set the Tween type.
TIP
Selecting Everything in a Frame A quick way to select the circle and its outline you just created is to click on the frame in the timeline where it’s located. It’s indicated by a solid black circle. Clicking on that frame selects everything that is drawn in the frame. Later, when you add more layers, make sure you are clicking the correct frame in the correct layer; for now, clicking the single frame in this movie is easy as it selects the entire circle and outline.
NOTE
Test Movie Versus Publishing Selecting File, Publish or File, Publish Preview is equivalent to testing the movie. In addition to generating an Adobe Flash SWF file (.swf), it creates the .html page to host it and (in the case of Publish Preview) immediately enables you to view the results in the browser. This is more accurate than Test Movie because you see the movie in a browser, but Test Movie is a quicker way to preview your movie while you’re working.
6. The Properties panel changes to give you options for your tween. Leave all the default settings. 7. Click on the last frame, Frame 30, and move your circle to the right of the stage. That’s it; you’re animating! Figure 8.2 shows that Flash has colored frames blue background to represent the interpolated frames between the beginning keyframe and the final frame. Notice the colored line in the center of the circle—this is the motion path. 8. Select Control, Test Movie (or press Ctrl+Enter) to see what happens. 9. Choose the Selection tool, and, just for fun, click and drag one of the tiny dots on the motion path, the colored line, and upward. Now, click Control, Test Movie. It’s easy to give your animation an elaborate path to follow by modifying the shape of the motion path, as show in Figure 8.3.
From the Library of Lee Bogdanoff
Creating a Motion Tween
159
TRY IT YOURSELF ▼ Create a Basic Motion Tween FIGURE 8.2 The Properties panel displays an arrow on a blue background to indicate that Flash is tweening these frames.
FIGURE 8.3 You can modify the motion path of any motion tween you create by using the Selection tool and dragging the green dots in the path.
NOTE
.swf Files You learned about .swf (pronounced “swif”) and source (.fla) (pronounced “fla”) files in Hour 1, “Basics.” A .swf file is an exported Flash file. This is the actual file you call in the code of a web page. A .fla file is the file you create and edit. You cannot edit a .swf file as it is the finished file produced from your .fla file. The critical concept is that a source file is a .fla file, and that’s the file you need to keep. You can always export again to create a .swf from the .fla, but you can’t get an editable .fla from a .swf.
From the Library of Lee Bogdanoff
160
HOUR 8: Using Motion Tweens to Animate
Following the Rules of a Motion Tween The previous task worked because the instructions carefully followed the rules of a motion tween: . You can’t have multiple objects in keyframes. . The one object you do have needs to be an instance of a symbol.
Flash is unforgiving when you don’t follow these rules. The good news is Flash warns you when you try to break the rules for a motion tween. For example, if you try to draw a new circle in the first keyframe in the animation you just created, you aren’t allowed to, and instead you get a warning dialog. Give it a try, and see for yourself! Here’s another quick one to try: In a new file, create a symbol, and drag two instances of it into the same frame. Add a frame at 30, and then try adding a motion tween. It can’t be done, but Flash tries to help by offering to combine your two symbols into a new symbol for you.
Motion Tweening Techniques and Tips You should feel proud of the circle you moved across the screen in the preceding task. Flash did the work, but you set the beginning and ending frames and modified the motion path. As you’re about to see, Flash can tween between two frames, no matter how different they are from one another. Plus, there are some ways to make the process even easier for you.
Tweening More Than Position Recall from Hour 4, “Staying Organized with the Library and Layers,” you learned that each instance on the Stage can be different from all the others, even if you have only one master symbol in the Library. Instances can be positioned in different locations, scaled to a variety of sizes, rotated in all directions, set with various color effects, and enhanced with special effects filters. Flash can tween changes in all these properties. Let’s try to tween more than just an instance’s position. The following task is an exercise to practice tweening. We’re not going for smoothness. We address smoothness in the “Fine-Tuning a Motion Tween” section, later in this hour.
From the Library of Lee Bogdanoff
Creating a Motion Tween
In this task, you explore other tweening properties. Follow these steps: 1. In a new file, use the Text tool to create a text block that contains your name. Don’t worry about the exact size, but make it big enough to see clearly. Be sure to set your text as Static, not Dynamic or Input, or this exercise won’t work. Using either Dynamic or Input text isn’t necessarily going to contain the same text at the beginning of the movie as it does at the end, so tweening it isn’t possible because Flash can’t know what the text will be throughout the movie.
161
TRY IT YOURSELF ▼ Tween Position, Scale, Rotation, and Color
2. Using the Selection tool, select the text block, not the text itself. Then, select Modify, Convert to Symbol (or press F8), and name the symbol My Name. Click OK. 3. Click Frame 30 in the Timeline, and insert a frame by selecting Insert, Timeline, Frame (or press F5). 4. Click on the keyframe in Frame 1. The red current-frame marker moves to Frame 1. Position your name in the bottom-left corner. This is the initial position of the text. 5. While the first keyframe is selected, click Insert, Motion Tween. 6. Click on the frame in Frame 30 so you can edit the end position. Select the Free Transform tool (or press Q), and click Scale to scale the text large enough to occupy the entire Stage. You might need to position it closer to the center. Notice a small black diamond is in the frame at Frame 30. Flash has turned Frame 30 into a keyframe for you automatically. 7. Scrub to get an idea of how the tween looks. From this point forward, remember you are only able to edit the properties for the instance in either the beginning or ending keyframe—not in-between where Flash is responsible for the tweening. 8. Move the red current-frame marker to Frame 30, and modify the color effect on the instance of the My Name movie clip. To do this, from the Properties panel, select the instance My Name, and under the Color Effect section, select Tint in the Color Styles drop-down list, as shown in Figure 8.4. Pick a bright color and set the percentage to 100%. Scrub for a quick preview. 9. Go to Frame 1, and use the Free Transform tool to stretch your name really tall. You might need to adjust the position or pull the corner of the Flash application to make more of the stage visible. 10. While still in Frame 1, use the rotate option to rotate your name a few degrees, as shown in Figure 8.5. Try skewing, too. When the Rotate option for the Transform tool is selected, the corner handles rotate, and the middle handles skew.
From the Library of Lee Bogdanoff
162
▼ TRY IT YOURSELF Tween Position, Scale, Rotation, and Color
HOUR 8: Using Motion Tweens to Animate
11. Check out your animation by scrubbing or testing the movie. You’ve created two very different keyframes, and Flash has figured out how to animate from one to the other.
FIGURE 8.4 The Tint color style is applied to the instance in Frame 30.
FIGURE 8.5 You can change any property of the instance in Frame 1, and Flash tweens accordingly.
From the Library of Lee Bogdanoff
Creating a Motion Tween
163
Beware of Flash’s Territory You are responsible for establishing keyframes. When you choose to tween, Flash is responsible for the frames between your keyframes. Consider this to be “no-man’s-land,” although Flash calls these frames interpolated frames. If you edit anything you see on the Stage while the red current frame marker is between two keyframes, you insert a keyframe automatically, perhaps without even realizing it. If you position the red current-frame marker in the middle of a motion tween (as in Figure 8.6), it isn’t apparent that you can even select the symbol on the Stage. If you click and drag it, you can move it. When you move a symbol in the middle of a motion tween, you add a keyframe. Flash is forfeiting control of that frame to you by giving you a keyframe. Adding a keyframe in the middle of a motion tween is sometimes useful, as you see in an exercise where you create a yo-yo later this hour. Be aware you’re taking away Flash’s automatic tween placement of your symbol in a frame when you insert a keyframe, (either by using Insert Keyframe or by grabbing the symbol and moving it). Just for fun, grab the symbol of your name at about frame 15 and move it. You see the motion path also moves, and a new keyframe appears on the timeline at frame 15. FIGURE 8.6 The red current-frame marker is positioned over the interpolated frames of the tween.
From the Library of Lee Bogdanoff
164
HOUR 8: Using Motion Tweens to Animate
Knowing Where You Are It’s important to pay attention to the red current-frame marker as you edit keyframes in a motion tween. Consider any of the tasks you’ve done so far this hour. If you want the motion to go from left to the right, your starting keyframe should have the symbol positioned on the left. If you accidentally leave the current-frame marker on the end frame and then move the symbol to the left, you’re actually editing the end keyframe, and the object moves to the left not to the right. Always be sure the red current-frame marker is in the intended place before you edit the contents on the Stage (see Figure 8.7). Fortunately, in this version of Flash, the motion path provides a visual cue to help you see how your object moves and how far along it is on the path. FIGURE 8.7 The red current-frame marker indicates the frame in which you are currently editing.
Sticking to a Pattern NOTE
A Word About Classic Tweening The motion tweening you’ve just learned differs from motion tweening in CS3 and earlier versions of Flash. You might have noticed the tweening option Classic Tweening. In Classic Tweening, you create a starting keyframe and an ending keyframe. You position your object that you want to animate in its ending position in the ending keyframe, and then you apply Classic Tweening. The effect is basically the same as the new motion tweening, but you won’t see a motion path. In general, CS4’s new motion tweening is much easier and more powerful than Classic Tweening.
Hopefully you’re beginning to see a pattern. To summarize, here’s the basic pattern we’ve used so far: 1. Motion tween tweens only one object, and that object must be a symbol. Make that object a symbol before creating the ending frame because the new keyframe Flash creates for you always contains a copy of what’s in the first keyframe. 2. After you’ve created your beginning keyframe and ending frame, you can adjust the position, scale, rotation, skew, brightness, tint, and alpha of either the instance in the beginning keyframe or the instance in the end keyframe. 3. Keep an eye on the current-frame marker in your Timeline to be sure it’s located in the keyframe you want to edit.
You refine your techniques over time, but you should follow those basic steps during your entire Flash career.
From the Library of Lee Bogdanoff
Fine-Tuning a Motion Tween
165
Fine-Tuning a Motion Tween Making a motion tween is pretty easy when you know how. Making it look good is another matter. A few basic techniques for fine-tuning a motion tween makes the results more natural and believable. Although you see more techniques later, the following sections cover concepts that specifically apply to motion tweens.
Using Multiple Keyframes Every motion tween involves just two keyframes. In the first, you tell Flash how to tween to the last frame, the keyframe that Flash creates for you. But suppose you want a symbol to move up and then back down. In this case, you need three keyframes: one in the initial location, another in the upper location, and a third in the end location. In this case, you have only two tweens: one going up from the first keyframe to the second keyframe, and one going down from the second keyframe to the third keyframe. The process is easier if you can sort things out simply. Often, you want the end of a motion tween to correspond exactly with the beginning, like a yo-yo moving down and then back to where it started. In the following task, you try this. In this task, you make a circle return to its beginning location so that it loops seamlessly. 1. In a new file, draw a circle.
TRY IT YOURSELF ▼ Make an Animation Finish Where It Starts
2. Select the circle, and convert it to a symbol by selecting Modify, Convert to Symbol (or press F8). Call it Yo-Yo, set behavior to Movie Clip, and click OK. 3. Position the yo-yo in its starting position, near the top of the screen. 4. Click Frame 20 in the Timeline, and insert a frame by selecting Insert, Timeline, Frame (or press F5). Add motion tweening by choosing Insert, Motion Tween. 5. Before you move anything, click Frame 20 in the Timeline, and insert another keyframe.
From the Library of Lee Bogdanoff
166
▼ TRY IT YOURSELF Make an Animation Finish Where It Starts
HOUR 8: Using Motion Tweens to Animate
6. Now we move our yo-yo. Make sure the red current-frame marker is on Frame 10 and drag the yo-yo down to the bottom of the Stage. Use the motion path to help you see when you’ve moved straight down (see Figure 8.8). 7. Select Control, Test Movie (or press Ctrl+Enter). Save the animation as you add to it in a minute.
FIGURE 8.8 Clicking on the yo-yo animation at Frame 10 shows you the motion path.
NOTE
Flash Created Keyframes In the previous example, as soon as you moved the symbol in your motion tween, Flash created an ending keyframe for you. In this case, you haven’t moved the yo-yo, so you only have one keyframe. Because you want your symbol to end in the same location it began, you need to add a keyframe manually at Frame 20.
Step back and consider what you did in the preceding task. The first and last keyframes are identical with a frame in the middle that you modified. It’s very common in animation to establish the ending keyframes first before editing the initial frames. You did that so the first and last keyframes contained the yo-yo in the same position. By the way, motion tweens affect all the properties that vary between the instances in two keyframes—not just position. You might think that with a name like motion tween, it would only make things move, but it also animates size, transparency (or alpha), and rotation, among other things.
From the Library of Lee Bogdanoff
Fine-Tuning a Motion Tween
167
Using Ease In and Ease Out The only problem with allowing Flash to do tweening for you is that the result looks like a computer created it. There’s no sense of natural movement. For example, the yo-yo from the preceding task moves down at the same rate as it moves up, instead of going faster on the way down and slower on the way up. Flash has a way to address the fact that some kinds of motion accelerate while others decelerate. It’s called easing. Because every tween is between only two keyframes, you only have to think of two keyframes at a time. Ease in (think “ease into animation”) means the motion starts off slow and speeds up at the end. Ease out is the opposite—the object starts by going fast, and then slows down at the end of its motion. You can see the effects of easing by opening the yo-yo animation you just created. Click the first keyframe, and from the Properties panel, set the Ease to –80 by clicking on the current ease of 0 and dragging to the left. Notice the word “in” appears to the right of the slider. This causes the animation to start off slowly, and then accelerate at the end. Figure 8.9 shows the -80 setting in the Properties panel. When you select Control, Test Movie, you see that the trip down should look a little more natural. But now we have a problem. For the second half of the animation, between Frames 10 and 20, you want to ease out as it reaches the peak. If you select the keyframe in Frame 10 and from the Properties panel set Ease to 100 by clicking on the Ease value and dragging to the right, you are setting this correctly, but it also overwrites the -80 for the first half of the movie. Because we only have one motion tween, changing any of the settings for it at any frame affects all frames in the tween. Fortunately, we have a way to fix it.
FIGURE 8.9 The Ease setting in the Properties panel of a keyframe can affect acceleration or deceleration.
Preset Easing Ease In and Ease Out are great; however, you can apply only one setting per tween. That is, say you want an animation to ease in at the beginning and then ease out at the end, but you can only set it once. For this, you can fine-tune the easing behavior with a number of easing options. You’ll find the easing effects under the Motion Editor panel. Let’s take a quick tour of it now, and then use it in a task. Using the yo-yo movie from the previous exercise, select the Keyframe at 10 and choose Window, Motion Editor, as in Figure 8.10. You probably find it easier to use if you undock it from the Flash interface.
From the Library of Lee Bogdanoff
168
HOUR 8: Using Motion Tweens to Animate
FIGURE 8.10 You can fine-tune your tween’s easing with the Motion Editor panel.
We’re mainly going to focus on the area under the Eases section, so you can collapse any of the other sections by clicking on the small gray triangles to the left of their titles. Here’s a quick tour of the key features of the Eases section of the Motion Editor panel: . The graph area displays a line to show how much of the tween has completed (0%–100% on the vertical scale) over time (that is, the number of frames between the two keyframes shown on the horizontal scale). A tween with no easing is a straight 45° line going from 0% in the first frame to 100% at the last frame. You can see some finished examples of custom tweening in Figure 8.13 later in this hour. In Figure 8.10, you can see our easing setting by noticing the way the line curves and the value of -80. . To create a custom easing graph, click on the plus sign to the right of the title Eases. This presents you with a list of preset easing effects, as well as the word Custom. If you select a custom effect, you can click right on the graph line to modify it. These control points include Bézier handles (like the Pen tool) to modify the exact shape of the graph. You’re initially given a control point at the beginning and end of the tween. You can make a tween ease in and out with just these two points. Add more control points only when you need the easing behavior to change in the middle of a tween.
From the Library of Lee Bogdanoff
Fine-Tuning a Motion Tween
169
. By default, one graph applies to all properties that are changing within the tween. It’s set in the drop-down list to the right of the Basic Motion title. To use the custom one, you need to click on the dropdown list and select it. You can also set different easing for different properties. For example, if you want your tint effect to ease in a particular way, you can create a custom easing graph, and then select it in the drop-down list next to Transformation. Under Basic Motion, you can select a property, (say X), and make a graph for how the changing position in the tween eases. Then, you select another property (for example Scale), and control how the changing scale eases. Remember a difference in any property, such as position, scale, rotation, color effect, and filters, animates during the tween. This controls how quickly it reaches 100% of those changes. . Click on the title bar next to the word Custom to make your graph larger and easier to work with. When you work with the graph, your cursor changes to communicate what happens if you click on various locations. Five things you can do while modifying a graph include adding a control point, selecting a control point, moving a control point, modifying the graph shape before or after a control point, or deselecting all control points. The cursor for each is shown in Figure 8.11. Note you can remove control points by selecting one, and then pressing Delete. Add a control point Select a control point (then drag to move it)
FIGURE 8.11 The cursor changes to tell you how you can modify a graph.
Drag a handle (to modify the graph's shape) Deselect all control points
The Custom Easing dialog box makes the most sense after you give it a try. The next task explores a couple of typical uses for custom easing: easing in and easing out in the same animation.
From the Library of Lee Bogdanoff
170
▼ TRY IT YOURSELF Make an Animation Ease In and Ease Out
HOUR 8: Using Motion Tweens to Animate
In this task, you see how to combine Ease In and Ease Out in a single motion: 1. In a new file, draw any shape, and make it a symbol. Place the symbol somewhere on the left side of the Stage. 2. Click Frame 50 in the Timeline, and insert a frame by selecting Insert, Timeline, Frame (or press F5). 3. Create a motion tween by right-clicking and selecting Create Motion Tween. 4. While the red current-frame marker is in Frame 50, move the instance of the symbol to the right side of the Stage. 5. Test the movie by selecting Control, Test Movie, and remember how it looks. 6. Now we use custom easing. Click on your symbol in the keyframe in Frame 1 and open the Eases section of the Motion Editor panel. The Motion Editor is full of information, and it’s usually easier to use if you undock it; that is, drag it out of the Flash interface by grabbing its title tab. Then, you can resize it to help you see the Eases section more easily. 7. We need to add a Custom ease. Click on the plus sign next to the Eases title, and choose Custom from the list. You should see an editable graph we can customize. You probably need to drag the corner of the Motion Editor panel to make it larger. You should see the word Custom on a title bar under the Eases section. Click on the title bar once to make the graph larger. 8. We don’t need to add any control points; there is already one at the beginning and one at the end. Click once on the graph line. Two circles should appear; these are the handles you can drag to adjust the curve of the line. Grab the first handle, the circle on the left (appears on the graph line), and drag it down to the base of the graph and about three-fourths of the way across (that is, nearly to the bottomright corner). 9. Drag the right handle up to the top and over to the left about threefourths of the way to the left (almost to the upper-left corner). Your graph should look like Figure 8.12. 10. We need to tell Flash to use the custom easing we created. Locate the heading Basic Motion, and click on the drop-down box to the right of it, as shown in Figure 8.12. Select Custom from the list. Now test the movie, and watch how it behaves.
From the Library of Lee Bogdanoff
Fine-Tuning a Motion Tween
171
TRY IT YOURSELF ▼ Make an Animation Ease In and Ease Out
FIGURE 8.12 This S-curve graph makes a single tween that eases in and eases out.
Notice that, as time passes at the beginning, the graph is mainly horizontal—meaning it’s not completing much of its tween. Then, in the middle it’s nearly a vertical line—meaning it is doing most of its tween. Finally, it slows back down as it approaches the end. You can click anywhere between the two keyframes and press F5 many times to insert more frames. Also, you can crank up the frame rate to something relatively fast, like 50fps. (To change the frame rate, select Modify, Document, or press Ctrl+J.) Both edits should make the tween more obvious. You might have noticed the list of other preset eases under the plus sign menu next to the Eases section. Take a look at them now. Most have names that clearly describe what effect they have on the speed of your motion tween. Figure 8.13 shows the Spring easing effect graph. In the figure, we’ve applied it to our tween by selecting it from the drop-down list next to Basic Motion. Give it a try; it’s a really cool effect. The number to the right of the label Spring is currently set to 5; this means it seems to spring five times, lessening each time. You can change this number to increase or decrease the springiness.
From the Library of Lee Bogdanoff
172
HOUR 8: Using Motion Tweens to Animate
FIGURE 8.13 The Spring ease effect makes your animated symbol move as though it’s attached to a spring.
CAUTION
Less Is More Gratuitous animation is a fine example of having too much of a good thing. There’s no harm in playing with all the bells and whistles available in Flash. In fact, while you are learning Flash, you should play with everything. But when you create that Flash movie for your website, a little animation goes a long way. Too much can make your work look unprofessional. Remember the point of using Flash is to create animation. To effectively communicate an idea or tell a story, you should refrain from superfluous animation, which ultimately detracts from your message. For every effect you want to add, ask yourself, “Does this help clarify my message or not?”
Rotating in a Motion Tween In a motion tween, you can tell Flash to rotate a symbol a specific number of times. For example, you can use this option to make an animation of a boulder rolling down a hill as in Figure 8.14. In the Properties panel, when a frame with motion tweening is selected, you can set the Rotate Direction drop-down list to CW (for clockwise) or CCW (for counterclockwise). In the example, we’ve made the boulder rotate five times as it tumbles down the hill. Notice the Ease setting here as well. If we want our boulder to gain momentum as it rolls, we can give this a positive value. Because perfectly round symbols are not interesting when rotated, if you want to try rotating your yo-yo, consider drawing a logo or some other graphic off-center inside the master version of the yo-yo symbol.
From the Library of Lee Bogdanoff
Fine-Tuning a Motion Tween
173
FIGURE 8.14 By using the Properties panel while selecting a frame with motion tweening, you can make a symbol rotate an exact number of turns, either clockwise or counterclockwise.
TIP
Animating Multiple Symbols By now you know that if you want to animate a symbol, it needs to be the only symbol in the layer with the motion tween. What if you want to animate two things at the same time? To do this, you need to add a new layer to your movie and put the second symbol and its motion tween in that layer.
Summary Congratulations! You’ve learned the fundamental skills of motion tweening and have explored the Motion Editor. It’s fun making Flash do the heavy lifting for you. Look back at what you’ve learned this hour, and you see that motion tweening is pretty easy: Set an ending frame, specify how you want Flash to tween, and you have a motion tween! Although motion tweening is simple, when you add easing, rotating, and all the ways you can modify a symbol instance (including scale, rotation, skew, position, color effect, and filter), you have numerous possibilities. Just because the tasks this hour were fairly simple doesn’t mean the motion tween is for simple effects. You should always consider motion tween before you choose shape tweening, which you learn about in the next hour. Although some situations require a shape tween, motion tweens are more efficient, and, when used creatively, can be very effective and natural looking.
From the Library of Lee Bogdanoff
174
HOUR 8: Using Motion Tweens to Animate
Q&A Q. Why can’t I motion tween more than one symbol? A. You can have multiple shapes inside the symbol you’re tweening, but the rule is you can use only one symbol per layer. Q. When I use the Rotate setting in my tween, my symbol rotates around the visual center, despite the registration point I chose when I created the symbol. How do I rotate around something other than the visual center? A. The symbol rotates around the transform center point. Use the Free Transform tool to modify the axis of rotation for the instance. For more about this, review Hour 4. Q. Why doesn’t my motion tween follow a smooth path? A. Motion tweening can tween more than just position. When tweening a position, Flash moves directly from one keyframe to the next, finding the shortest path between two points. Wouldn’t it be cool if you could draw a curve and tell Flash to follow the path you drew? You can—just drag a point on the Motion Path that shows up whenever you create a motion tween. Q. I’m trying to use the Custom Ease In/Ease Out dialog box to make my animation go past the end of its motion—say, 120% of its tween. How can I do that? A. You can’t do it with only two keyframes. You can insert a new keyframe somewhere before the ending and place your instance in a location past the destination. Although it might not be appropriate for your case, consider doing this in a frame-by-frame animation. Quite often, just a few strategically placed keyframes are more effective than a tween.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
From the Library of Lee Bogdanoff
Workshop
175
Quiz 1. According to the suggested process of creating a motion tween, what should you always do before inserting frames? A. Save the file, and take a deep breath because Flash might crash. B. Ensure the object in the first keyframe is an instance of a symbol. C. Use the Properties panel to tint the instance in the first keyframe. 2. When you want to edit the position of a symbol instance in a particular frame, what must you first ensure? A. That the red current-frame marker is in the frame you want to edit B. That you concentrate on the frame you intend to edit and then move the instance C. That the symbol isn’t red 3. A motion tween requires a beginning keyframe and an ending keyframe. When establishing you want a tween between those two keyframes, where do you make your tween settings? A. In the Properties panel, when the symbol instance in keyframe 1 is selected B. In the Properties panel, when the second frame is selected C. In the Properties panel, when the first keyframe is selected
Quiz Answers 1. B. Saving is always a good idea, but it’s not necessary. You want to make sure the first keyframe contains a symbol because it is copied into the new keyframe Flash creates for you at the end of your motion tween. 2. A. As surprising as it sounds, people often try option B (also known as the ESP method). This issue falls under a general suggestion we call “know where you are.” If you want to edit Frame 1, you need to make sure the red current-frame marker is in Frame 1. 3. A, B, and C. Sorry, trick question. You can set a motion tween anywhere on the timeline or even if you have the symbol selected.
From the Library of Lee Bogdanoff
176
HOUR 8: Using Motion Tweens to Animate
Exercises Most of the motion tweens you implemented in this hour tweened only position. Try these exercises that use motion tween on other properties, such as scale and color effect. 1. Create a bouncing ball that squashes a little bit before bouncing back when it hits the ground. You need five keyframes. In addition to the first keyframe with the ball up high, you need a keyframe for when the ball reaches the ground and another keyframe for when the ball’s in a squashed position. Line up the bottom of the squashed ball with the bottom of the unsquashed ball. You need a keyframe in the down position but not squashed, and you need a keyframe at the end that corresponds to the initial position. Try using easing where you think it helps. Hint: Select the frame you want to change and modify your
symbol properties. Flash puts a keyframe in the timeline for you. 2. Make a simple tween where text tweens from entirely transparent to its normal opaque or non-alpha state. Consider other ways to achieve this besides using the Alpha effect. Make a symbol from text before you add a motion tween, and make sure you are using the Static Text setting when you create your text.
From the Library of Lee Bogdanoff
HOUR 9 Using Shape Tweens to Morph
There are several ways to keep a Flash movie small and running swiftly. Recycling symbols from the Library and using motion tweening are two of the best ways. Unfortunately, the shape tween, as you’re about to learn, is one of the least efficient features in Flash because it causes file size to grow. However, shape tweening is pretty cool looking. There’s no other way to get the morph effect in Flash. So when appropriate, it’s perfectly acceptable to use shape tweens. A morph is a kind of animation that naturally changes one shape to another. Morph is a general term, but it’s the closest common term that describes how Flash’s shape tween works.
WHAT YOU’LL LEARN IN THIS HOUR: . How to make shape tweens . Available alternatives to shape tweening . How to apply shape hints for more control
Making a Shape Tween Shape tweens are fun because they look really cool, and they’re easy to create. In some ways they look more dynamic than motion tweens because every attribute of your object, including the shape, animates. Basically, you draw one or more shapes or Drawing Objects in two keyframes and set the tweening in the first keyframe to Shape. Unlike in a motion tween, you don’t want to turn your object or objects into a symbol. Let’s create one in the following task, and then we can analyze it.
From the Library of Lee Bogdanoff
178
▼ TRY IT YOURSELF Make a Simple Shape Tween
HOUR 9: Using Shape Tweens to Morph
In this task, you make a simple animation using shape tweening. Follow these steps: 1. In a new file, draw a circle on the Stage. Don’t group anything, and don’t convert anything to a symbol. 2. Insert a keyframe in Frame 30 by clicking in the Timeline at Frame 30, and selecting Insert, Timeline, Keyframe (or press F6). This is the end of the tween, and it matches the beginning. 3. Insert a keyframe in Frame 15. While the red current-frame marker is on Frame 15, pull the circle into a new shape by using the Selection tool. First, deselect the circle by clicking elsewhere on the stage off the circle, and then bring the pointer close to the edge until the cursor changes to a curved-tail pointer. Click and drag the edge of the circle in or out. Do this a few more times until you like the shape you’ve created. We made a boomerang shape, as shown in Figure 9.1.
FIGURE 9.1 You reshape the edges of the circle in one of the keyframes. Flash does the tweening.
4. Set shape tweening for the two spans. To do this, click Frame 1, hold Shift, and then click Frame 30. This selects all the frames. Now choose Insert, Shape Tween, or right-click on the selected timeline, and choose Create Shape Tween. 5. Select Control, Test Movie (or press Ctrl+Enter) to see your shape morph.
From the Library of Lee Bogdanoff
Making a Shape Tween
179
Following the Rules of a Shape Tween
CAUTION
Flash is unforgiving when you don’t follow its rules. Luckily, the rules for a shape tween are very simple: no groups and no symbols. That’s it! Remember these two things, and shape tweens are easy.
Turning Text into a Shape
Techniques and Tips Just because the rules for a shape tween are simple doesn’t mean that creating a good-looking shape tween is easy. There are several techniques to make the process easier and the results better.
Keep It Simple The most important tip we can give you is to keep it simple. There are very few rules for a shape tween—as long as you don’t group anything or use symbols, it works. However, when you have a million different shapes tweening to a million other shapes, the results look random. Clues that you aren’t keeping it simple enough are unexpected results and the checkerboard effect you’re about to see.
Recall from Hour 2, “Drawing and Painting Original Art in Flash,” that text acts as a group or a Drawing Object from the beginning. This means you can’t use text in a shape tween unless you first break it apart by selecting Modify, Break Apart. If text contains more than one character, you have to break it apart twice—once to break the text into individual characters and another time to turn it into individual shapes. Keep in mind that after text becomes a shape, it’s no longer editable.
Consider these unexpected results. For example, you imagine your name morphing gradually into a circle shape, but despite breaking apart the text, you get a garbled mess or the checkerboard effect in the tweened areas, as shown in Figure 9.2. These are signs you’re likely creating something too complicated for Flash to cleanly morph. Flash is interpolating the inFIGURE 9.2 The checkerboard effect is the common result of an overly complex shape tween.
From the Library of Lee Bogdanoff
180
HOUR 9: Using Shape Tweens to Morph
between frames accurately, but it can be difficult to go from one extreme, such as your name, to something simple, like a circle. Flash gets you from here to there, but the trip might look messy. The solution is to keep it simple. Do just one thing at a time. For example, try to tween just one letter of your name into a circle. You see later this hour in “Refining and Fine-Tuning a Shape Tween” that you can help Flash by using a feature called Shape Hints. However, the simpler the animation is the better. A simple animation is easier to create and becomes more like what you intended, and it probably results in a more effective movie and a smaller file.
Don’t Mix Lines and Fills It’s best to avoid tweening between shapes that don’t have the same combination of fills and lines because the results are unpredictable. Tweening a straight line into a bent line usually works fine. But if you try to tween from a line to a filled shape, you might get unpredictable results. As an analogy, consider bending a wire or reshaping clay. You could do each separately, but if you had to turn a wire into the same shape as the clay, it would be difficult or impossible. This analogy is similar to Flash tweening lines and fills. Flash can tween lines; Flash can tween fills; it can even tween a fill with a line. Flash has difficulty, however, when one keyframe has a line and the other has a fill or when one keyframe has both line and fill and the other only has one. Flash does what it can to interpolate the in-between frames when you mix them, but eventually something has to give. To avoid these problems, convert the lines to fills by using Modify, Shape, Convert Lines to Fills. Better yet, keep things simple by drawing in both keyframes of a tween with just lines, just fills, or both.
Avoid Primitive Shapes Shape tweens on primitive ovals or primitive rectangles lead to unpredictable results. You usually get that checkerboard effect, like in Figure 9.2, or a mess similar to tweening shapes that contain fills and strokes. Ultimately, you have better results avoiding primitives in shape tweens; instead, you can convert them to symbols and use motion tween.
Stay Out of Flash’s Territory When Flash is tweening a span of frames, it colors the tweened frames in the Timeline either blue (for motion tweening) or green (for shape tweening). These interpolated frames are Flash’s territory, as shown in Figure 9.3.
From the Library of Lee Bogdanoff
Making a Shape Tween
181
FIGURE 9.3 The interpolated frames where Flash is responsible for tweening are blue for a motion tween and green for a shape tween.
With motion tweens, you sometimes need to change the location or properties of your symbol in one of these interpolated frames; this doesn’t apply in the case of shape tweening. Generally, you should stay out of this area. For one, you can only draw in keyframes, so you can’t draw in this territory. In shape tweens, you can’t even select objects when the red currentframe marker is in this territory. However, recall from Hour 8, “Using Motion Tweens to Animate,” with motion tweens, you can grab and move symbols in interpolated frames, which add keyframes. You can’t do any harm to interpolated frames of shape tweens, but trying to edit them can be very frustrating. You can’t draw into them, and you can’t select objects. The best way to think of these frames is that they are Flash’s territory—not yours. You are responsible for the keyframes, and Flash is responsible for shape tweening.
Know When a Motion Tween Will Suffice It’s easy to fall in love with the shape tween—there’s nothing like it. Feel free to use it when necessary. However, shape tweens are inherently less efficient and harder to produce than motion tweens. If you can get the same effect with either, you should always opt for motion tweening. Let’s say you have a shape you want to tween from a blue circle to a red square. Only a shape tween is sufficient because the actual shape is changing. However, if you want to tween a blue circle into a red circle, you’re better off doing it as a motion tween. Draw a circle; convert it to a symbol;
From the Library of Lee Bogdanoff
182
HOUR 9: Using Shape Tweens to Morph
insert a frame later in the Timeline; add motion tweening; and use the Properties panel to set Color Effect to tint the circle instance in the last frame. To do the same animation as a shape tween, you draw a circle and don’t convert it to a symbol; insert a keyframe later in the Timeline; fill the circle in the second keyframe with a new color (perhaps using the Paint Bucket tool); and set shape tweening in the first keyframe. The result of each operation is the same, but the motion tween method is better because it gives you only one master version of the circle and, therefore, a smaller file size. Sometimes it’s obvious which type of tween is more appropriate. If something’s moving, changing size, or changing color, a motion tween is appropriate, whereas significant changes to a shape require the shape tween. Sometimes, it’s not so obvious. For example, you can drastically change a symbol’s shape by using the Free Transform tool’s Rotate, Scale, and Skew options. Plus, tweening the properties of a Filter using Motion Tween can have a huge impact. Figure 9.4 shows how different the beginning and end of a motion tween can be. FIGURE 9.4 Before choosing Shape tween, consider distorting a movie clip and using Motion Tween. Each original clip (left) appears in a different form on the right (the last flower uses the Glow filter). These examples are motion tweenable.
Refining and Fine-Tuning a Shape Tween Shape tweens don’t always come out the way you expect. The tips we just covered are more like rules and cautions. Even if you heed all the warnings, you still might have shape tweening results that are anything but what you expect. Flash has a feature especially for shape tweening that helps you tell Flash what you really want. It’s the Shape Hint feature, and it can make the difference between a shape tween that looks like a mess and one that looks like what you had in mind.
From the Library of Lee Bogdanoff
Refining and Fine-Tuning a Shape Tween
183
Using Shape Hints A shape hint gives you a way to tell Flash exactly how to map one point in the beginning shape to another point at the end of the shape tween. You want to use shape hints when Flash doesn’t create a shape tween that matches what you had in mind. Points inside a shape are mapped during any tween. Map refers to how one point in the starting shape corresponds to a specific point in the ending shape. When Flash motion tweens a box from small to large, one corner of the small box is mapped to the same corner in the large box. Every point is mapped. Mapping points in a shape tween is more complex, so Shape Hints that enables you to control how Flash maps individual points. In the following task, you learn how to use shape hints.
In this task, you use the Shape Hints feature to create a more controlled shape tween. Follow these steps: 1. In a new file, select the Rectangle tool, and ensure Object Drawing in the options portion of the Tools is turned off. Draw a perfect square by using the Rectangle tool by holding Shift while you drag.
TRY IT YOURSELF ▼ Use Shape Hints for a Better Shape Tween
2. In Frame 25 of the Timeline, insert a keyframe by clicking in the Timeline at Frame 25, and then select Insert, Timeline, Keyframe (or press F6). 3. Change the shape in Frame 25 to a triangle. You should make the base of the triangle out of the base of the square. See Figure 9.5 for a split shot of the stage at keyframe 1 and keyframe 25. 4. Select the first keyframe and use the Properties panel to set Tween to Shape. Scrub, and you see the results are probably not what you expected. It looks like the square is rotating as it tweens to the triangle. Now is your chance to use the Shape Hints feature.
FIGURE 9.5 The square is shape tweened into the triangle with approximately the same base size and location.
5. Under the View menu, ensure that Show Shape Hints has a check mark (select it if not). 6. Place the red current-frame marker in Frame 1 and select Modify, Shape, Add Shape Hint (or press Ctrl+Shift+H). 7. Notice a little red circle with the letter A (a shape hint). Temporarily move the red current-frame marker to Frame 25, and notice there’s also an A shape hint in this frame.
From the Library of Lee Bogdanoff
184
▼ TRY IT YOURSELF Use Shape Hints for a Better Shape Tween
HOUR 9: Using Shape Tweens to Morph
8. Make sure you’re back in Frame 1 and that Snap to Objects is still turned on by selecting View, Snapping, Snap to Objects. Use the Selection tool to drag the shape hint so it snaps to the top-left corner of the square. Notice in Figure 9.6 that it’s still red, indicating you haven’t mapped this point to an end point yet.
FIGURE 9.6 Although you’ve added Shape Hint A in the first keyframe and attached it to the shape, it’s still red because you haven’t mapped this point in the ending keyframe.
9. Go to Frame 25 and position Shape Hint A so it snaps to the middle of the left side of the triangle. Notice the shape hint turns green, indicating it’s been mapped. When you return to Frame 1, the shape hint is yellow to indicate it’s been mapped. 10. Scrub to see the results so far. If it looks good, you don’t need to add any more shape hints. For this exercise, however, it is likely not to look good. 11. In Frame 1, add another shape hint by pressing Ctrl+Shift+H, and the new hint is automatically given the name B. Position it in the top-right corner of the square. 12. In Frame 25, map Shape Hint B to snap to the middle of the right side of the triangle, similarly to how Shape Hint B is mapped (see Figure 9.7). 13. At this point, the results should be much better than before you added any hints. Use Test Movie to see.
From the Library of Lee Bogdanoff
Refining and Fine-Tuning a Shape Tween
185
TRY IT YOURSELF ▼ Use Shape Hints for a Better Shape Tween FIGURE 9.7 Shape Hint B is snapped to the middle of the right side of the triangle in the second keyframe.
Understanding Shape Hints In the preceding task, we told you where to place the hints. However, figuring out logical positions for shape hints is usually pretty easy. Think of it this way: You’re telling Flash, “This point in the starting shape goes with that point in the ending shape.” Notice after you add one shape hint, you can see how the point under the hint in the first keyframe moves to the corresponding point in the end keyframe. Carefully watch the points while you slowly scrub. A few more details about shape hints are worth understanding: . You can’t add shape hints unless you are currently in the first keyframe of a span with shape tweening already set. In other words, you have to have a shape tween and be in the first frame to add a shape hint.
TIP
Keep It Simple Don’t use more shape hints than necessary. Don’t add 10 shape hints to the first frame, and then map them all. Rather, add one shape hint and map it, and then evaluate the results; one might be enough. Feel free to continue adding shape hints all day long, but sometimes less work is necessary. There’s no reason to add more hints than you really need.
. You can use the menu selection View, Show Shape Hints to make the shape hints you have invisible, but they are there, even if you can’t see them. . Shape hints are recognized only after they’ve been mapped—that is, snapped to a point on the shape in both the first keyframe and the
From the Library of Lee Bogdanoff
186
HOUR 9: Using Shape Tweens to Morph
last keyframe. They change color after they are mapped. This means you still have to snap both the start and end hint, even if their default positions seem acceptable as is. . You can remove one hint at a time by right-clicking (or using Control+Click on a Macintosh („)). In addition, you can remove them all by selecting Modify, Shape, Remove All Hints. . Shape hints can be used only with a pair of keyframes. Just as tweening occurs between only two keyframes at a time, a shape hint works between only two keyframes at a time. However, shape hints can’t be used from one keyframe to a second and then to a third. In the previous task, you might want to add a third keyframe where the shape turns into a square again. If you want to use shape hints from one keyframe to another and then a third, you must have four keyframes. Use a shape hint from the first to the second, and then use another from the third to the fourth (see Figure 9.8). FIGURE 9.8 A shape hint requires you have only two keyframes. To continue from one tween to the next, put two identical keyframes right next to each other. You’re left with two pairs of keyframes—and now you can use shape hints on the second pair.
Summary Now that you understand shape tweens, you know both ways Flash can do tweening for you. In this hour, you’ve learned that a shape tween is fundamentally unique as it enables you to morph shapes. The only rules with shape tweens are you can’t have grouped shapes, and you can’t have symbols. This makes shape tweens easy to create, but some techniques are necessary to ensure the results are as expected.
From the Library of Lee Bogdanoff
Summary
187
You can use shape hints to help Flash figure out what you have in mind. Adding shape hints is a little touchy, but you need to be very specific. We have two parting tips as you create more and more animations on your own: . Although shape and motion tweens can help you create an animation, sometimes the most effective animation is the most subtle. Sometimes the best solution is frame-by-frame animation, such as what you did in Hour 8. . Don’t be satisfied with serendipitous results. Sometimes mistakes look cool, but try to persist in making Flash do exactly what you have in mind. Resist the temptation to accept something that’s only close to what you want. If you take the time, you can create anything.
Q&A Q. What causes the dotted line to appear in the green interpolated frames of my shape tween? A. You either did something that contradicts the rules of a shape tween (no groups and no symbols), or you don’t have two keyframes. Remember a tween is between two keyframes. Check to make sure you have two keyframes and that you have no groups or symbols in each. Q. I want to create a wipe effect where a rectangle grows, but it only builds to the right. At first, I tried doing this as a motion tween as the object is only changing scale. However, the rectangle always grew on both sides as I scaled it. Also, the stroke is growing slightly during the tween. It’s easy to do as a shape tween, so is that okay this time? A. It’s good that you considered the motion tween and tried it first. It’s actually easy to do as a motion tween. Press and hold Alt while you scale the rectangle instance. Alternatively, you can use the Free Transform tool to move the transform point to the left edge. To make sure the stroke doesn’t scale, go inside the master symbol and select just the stroke, then use the Properties panel and set the Scale option to None. Q. My animation is acting funny. Shapes appear only in my keyframes, never in the interpolated frames. I know I did everything according to the rules because I’m not getting the dotted line. What’s wrong? A. Just because the dotted line isn’t present doesn’t mean you’re doing everything correctly. For example, if you have some shapes in the start and the end of your tween, all appears fine. However, if in either keyframe you have a group, text (which is like a group until it’s broken apart), or a symbol, all these objects disappear during the tween. The
From the Library of Lee Bogdanoff
188
HOUR 9: Using Shape Tweens to Morph
only time you see the dotted line is when all the objects onscreen are groups or symbols. Q. When I click in the green interpolated frames, I can set the Properties panel Tween setting. I thought this area was under Flash’s control. Why am I given access to it? A. You’re actually accessing the previous keyframe’s properties. Remember the span after one keyframe before the next one is controlled by that first keyframe. Any non-keyframes after a keyframe are under the influence of the first keyframe. With tweening, it’s the same. Interpolated frames are drawn by Flash, but the previous keyframe controls exactly how the tweening acts. One keyframe controls its frame and all subsequent frames until the next keyframe. The good news is the Properties panel gives you access to frame properties of keyframes without having to be careful where you click. Be aware of which keyframe you’re accessing.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. What is the ideal number of shape hints to use for a good shape tween? A. Ten because we have 10 fingers and 10 toes. B. No more than 5. C. No more than necessary. 2. Which type of tween results in a smaller file? A. A shape tween results in a smaller file. B. A motion tween results in a smaller file. C. It depends on how many colors are used in the file. 3. How can you use text in a shape tween? A. Text cannot be used in a shape tween. B. Make sure the text is broken apart. C. Make sure the text isn’t grouped or in the Library.
From the Library of Lee Bogdanoff
Workshop
189
Quiz Answers 1. C. There’s no reason to use more shape hints than absolutely necessary. Each time you add a shape hint, check to see whether the results are satisfactory. 2. B. It’s safe to say that motion tweens, by definition, result in smaller files. This is important because some effects can be achieved by using either a shape tween or a motion tween, but you should always opt for motion tweens when you can. 3. B. All the answers are true, but answer B is best. Text acts as if it’s grouped from the start. All you have to do is use Modify, Break Apart twice.
Exercise You can spend a lot of time playing with shape tweens. Here is an exercise that sharpens your skills: Create a shape tween from one letter to a similar shape, such as from letter A to a triangle or letter C to a circle. Remember you have to break apart the text. Use shape hints to make it look the way you want. Tip: If you want to try your whole name, tween one letter at a time per layer.
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 10 Advanced Animation with Inverse Kinematics
In this version of Flash, Adobe has introduced the Bone tool to give animators a way to automatically calculate Inverse Kinematics. Don’t be put off by that phrase. Inverse Kinematics (IK) simply means the calculations involved in figuring out how jointed objects move. Flash handles the IK for you, so all you have to do is use the Bones tool to create the joints and let Flash do the hard part. The Bone tool enables you to easily link several objects together to create a connected chain-like effect. In this hour, you get a chance to create your own graphics connected with bones and to see how they move together. Then, you animate and modify existing bones in your movie.
WHAT YOU’LL LEARN IN THIS HOUR: . Placing bones in your Flash drawings . Animating your boneconnected graphics . Adding control points for better results
Linking Symbols with the Bone Tool You can apply bones to anything in Flash, including symbols and simple brush strokes. To decide which to use, you need to know a few facts about how bones work, and then have a clear idea of the effect you’re trying to achieve. Take a look at Figure 10.1. On the left, we’ve drawn a humanoid robot shape. It’s made up of several red rectangles with no outline. These are not drawing objects or symbols—just shapes. On the right, you can see bones we’ve placed inside our figure. They are represented by the orange lines with the a visible “joint” wherever you see a blue dot or circle. FIGURE 10.1 Using the Bone tool, we’ve added bones to the figure on the right.
From the Library of Lee Bogdanoff
192
HOUR 10: Advanced Animation with Inverse Kinematics
The bones in the figure on the right enable us to move the shape naturally, as though it had joints in those locations. Figure 10.2 shows the same robot shape repositioned. After you apply the bones, you use the Select tool to click on and drag any of the blue jointed areas.
FIGURE 10.2 We’ve repositioned our robot by using the Select tool.
▼ TRY IT YOURSELF Create a Shape and Add Bones with the Bone Tool
The Bone tool is easier to understand when you’re using it for yourself. In the next exercise, you get a chance to draw your own shape and add bones to it to see how it works.
In this task, you draw a shape and add bones with the Bone tool. Then, you reposition it to get an idea of how the bones work. 1. Use the Brush tool set to a large size to draw a thick horizontal line on the stage. Think of this as a tail or a snake (see Figure 10.3). We use a thin, black outline and a light yellow color, so you can see the bones when we add them.
FIGURE 10.3 Draw a thick horizontal brush stroke with the Brush tool.
2. Select the Bone tool from the Tools palette. Notice when you click and hold, you can also access the Bind tool, which we get to later this hour in “Control Points and the Bind Tool.” Click on the left end of the brush stroke, and drag toward the right to create your first bone (see Figure 10.4). FIGURE 10.4 Draw the first bone in the shape.
3. Continue clicking and drawing bone segments until your shape has bones running the complete length. To make this work, you have to click on the end of each segment to draw the next new segment as though the bones are actually attached. Pay attention to when the mouse cursor (now a little bone) turns white over each joint. If you don’t click at each joint, you risk starting a new set of bones, which is not what we want for this example. Figure 10.5 shows the complete set of bones. FIGURE 10.5 Our snake, complete with bones.
4. Switch to the Select tool, and click and drag on the bones to move your creation around. Keep this file handy; you might want to use it later this hour in one of the exercises.
From the Library of Lee Bogdanoff
Linking Symbols with the Bone Tool
193
Using Bones to Link Symbols One thing you should notice as you move your shape around is what happens when it wraps over on itself. Figure 10.6 shows the overlap, which is not a good result. To avoid this, we can either make sure we never overlap when we pose our shape or eventually animate its motion. For some animations, we can use symbols, which maintain their integrity when overlapped. One solution, which is sometimes feasible depending on the effect you want, is to use a series of movie clips and connect them, as shown in Figure 10.7. Doing so enables each clip to maintain its integrity. Every movie clip that makes up the structure has a specific place within the stack of symbols. Think of it as a stack of poker chips. You can change the order using Modify, Arrange settings to specify which clips should be on top. You can adjust this even after you add the bones.
FIGURE 10.6 The overlap of our snake shows up as a white area, which is not a desirable result.
In the next section, you see several other important differences between applying bones to shapes or symbols.
Connecting Multiple Symbols with the Bone Tool You’ve had the chance to put bones into a single shape, but you haven’t connected multiple movie clips with bones or attached more than one bone at a time. Be aware of a few things. First, unlike when you tween, all your movie clips need to be in the same layer. When you position the shape, you can actually rotate the movie clips around the joints in addition to posing all the joints. Finally, because the movie clips are separate, they can pull apart as you position your figure. You might have to create another layer above the Armature layer that Flash automatically creates to hide gaps between the individual symbols that appear as you move the figure.
FIGURE 10.7 This structure is built from multiple instances of the same movie clip.
From the Library of Lee Bogdanoff
194
▼ TRY IT YOURSELF Create a Shape from Multiple Movie Clips and Add Bones
HOUR 10: Advanced Animation with Inverse Kinematics
In this task, you draw a shape composed of clips and add bones with the Bone tool. Then, you reposition it to get an idea of how the bones work and add a layer to hide gaps between the clips. 1. Draw a small circle, and make it a movie clip. You might want to give it a thin outline. Copy or drag 12 more instances of the circle on the stage, and arrange them as shown in Figure 10.8. 2. Select the Bone tool, and beginning with the head of your figure, draw bones connecting all the circles, as shown in 10.9. You are dragging two bones from one joint for the legs and three bones from one joint for the arms and torso. Notice you now have a new layer in your timeline, Armature_1. This is where all your instances are stored.
FIGURE 10.8 Arrange circle movie clip instances to look like a human form. FIGURE 10.9 The figure is now connected with bones. Flash automatically creates the Armature layer in the Timeline.
TIP
Clips in the Armature Layer You can still modify individual instances or the root movie clip of any clips you use to create your figure. Use the Free Transform tool to change individual instances. It’s a little more difficult to reposition them because when you move one instance, the connected ones move along as well. The easiest way to do this is to select one and use the X and Y settings in the Properties panel to adjust the location. This is especially useful when you end up with gaps between the movie clips after you pose your figure.
3. Move your figure around. Now, modify the original movie clip by doubleclicking on one of the instances of it. Use the Transform tool to make it oval. Return to Scene 1 to see the results. When you move the figure with the Select tool, try rotating individual instances of the oval. Keep this file in case you want to use it later this hour in one of the exercises.
From the Library of Lee Bogdanoff
Animating the Armature
195
The single biggest difference between using a brush drawn graphic or movie clips is the clips stay intact. They are distinct and are not modified by the attached bones. Brush drawn graphics look more organic when they are given bones, but you cannot overlap a figure on itself when you use them.
Adding and Removing Bones You can go back any time and add new bones by selecting the Armature layer and using the Bone tool. You must have something to connect to, however. In the case of brush drawn art, it can be any part of the figure. If it’s connected movie clips, you need to have a movie clip instance available before you start adding bones. Once you add a bone, the Armature layer locks down the new creation. To delete a bone, click on it with the Select tool until it changes color, and then press the Delete key. You can delete the entire structure at once by double-clicking on a bone and then pressing Delete. If you do this, your Armature layer reverts to a standard Timeline layer, and you have to reapply the bones.
Animating the Armature One of the best things about IK in Flash is how easy it is to animate the movement. It’s a little like Motion tweening, but even easier. The Armature layer can keep track of a series of poses and perform the necessary calculations behind the scenes to move from one pose to another.
TIP
Add the Root Bone to the Center It’s usually better to start near the center of your figure when placing your first bone. That first bone, known as the root bone, acts as more of a fulcrum than a joint. Putting it in the center of your shape enables you to freely pose the top and bottom of the shape. Whenever possible, you should start in the center of your figure.
If you click on the Armature layer and then view the Properties panel, you see that it has some specialized options. Figure 10.10 shows this panel. Here’s a look at the various options: . Label—This enables you to changes the name of the Armature layer to something of your choice. . Ease Strength—With the easing you’ve seen before, this controls the way the animation speeds up or slows down as it goes along. . Ease Type—Because you don’t have the Motion Editor at your disposal when you are animating with IK, you have to rely on this limited set of easing options.
From the Library of Lee Bogdanoff
196
HOUR 10: Advanced Animation with Inverse Kinematics
FIGURE 10.10 The Properties panel offers you some options when you select the Armature layer.
. Type—Your options are Authortime or Runtime. Authortime is the kind of posing we’re about to do, where we create multiple poses and Flash animates between them. If you choose Runtime, your user is able to drag your creation around! We give that a try in just a second. . Style—This changes the appearance of the bones for the sake of editing. It doesn’t really affect anything except the appearance of the bones. Sometimes you might find it easier to use the wireframe or line option as you pose your figures.
Just for fun, create another figure with bones, or use one from earlier in this hour. Change the Type to Runtime, and choose Control, Test Movie. Now you are able to pose the figure however you like, just as your user will when he sees the movie on a web page. This works with movie clips and brush-drawn graphics.
Creating an Inverse Kinematics Pose Layer Adding new poses and animating between them is simple. Let’s get right to it.
From the Library of Lee Bogdanoff
Animating the Armature
In this task, you create an animation based on posing graphics connected with bones. 1. Open one of the two files you created earlier, or create a new figure with bones.
197
TRY IT YOURSELF ▼ Animate a Figure by Adding Poses
2. Click on the Armature layer. Make sure that Type is set to Authortime in the Properties panel. Right-click (or Control-click on the Macintosh („) on Frame 20 in the Armature layer, and choose Insert Pose. Figure 10.11 shows the Timeline with the new Pose frame. This is similar to motion tweening, but this time the Armature inside your figure is moving. Change the position of your figure at Frame 20. Test your movie to see the motion. FIGURE 10.11 Inserting poses in the Armature layer is like adding keyframes to a motion tween.
Like motion tweening, you can apply easing to the Armature layer with the Properties panel. You can also add as many poses as you want, and Flash does the hard work of interpolating the motion for you. Unlike motion tweening, the movement of your figure is based on IK calculations. So, when you move the arm on the human-like figure we created earlier, Flash figures out if the shoulder needs to move or not.
From the Library of Lee Bogdanoff
198
HOUR 10: Advanced Animation with Inverse Kinematics
Control Points and the Bind Tool When it comes to using bones to connect symbols, you are limited to the motion that Flash figures out for you. You have no influence over what is connected to which bone once you lay them out. But, with bones in graphics, you can use the Bind tool to influence which parts of the graphic are controlled by which bones.
▼ TRY IT YOURSELF Control the Motion of an Armature with the Bind Tool NOTE
Check the Control Points Before moving your shape, check to see where the control points are because it’s easier to modify them before you pose your shape. It’s great to have the control because the points are usually set to the nearest bone, which is not necessarily the best choice, as shown in Figure 10.12.
In this task, you modify the motion of a brush drawn image by adding control points with the Bind tool. 1. Open the brush drawn armature you created earlier, or create a new brush drawn figure with bones. 2. Choose the Bind tool from the Tool palette. You might need to click and hold the Bone tool to be able to select it. Click on one of your bones, and notice the yellow points that show up nearby. Those points are like tendon connections to your bone. 3. Take a look at Figure 10.12. Notice the yellow points along the edge of the left side are connected to a bone in the top of the shape. This is why the figure doesn't move well when we manipulate it with the Select tool. We can use the Bind tool to connect those yellow points to an appropriate and closer bone segment. To change the bone a point is connected to, click on the point, and drag to the bone. You see a yellow line following the cursor; think of that line as a tendon. That's all there is to it. Now, when you move your shape, only the control points you want move.
Control points enable you to better control which bones move which parts of your shape.
FIGURE 10.12 Control points enable you to better control which bones move which parts of your shape.
From the Library of Lee Bogdanoff
Animating the Armature
199
Modifying an Existing Animated Armature Suppose you’ve created your armature layer and added poses, but you need to modify your figure. There are a few things you can do, and many more you can’t. Following is a list of modifications you can and can’t make to your figure once you’ve applied an armature. The changes you can make apply to all the poses on the Timeline, not just where you apply changes. If you are using movie clips to form your figure: . You can animate individual movie clips inside your figure. Remember the car with the spinning wheel movie clip that moved independently of the car? It’s like that. . You can transform individual movie clip instances as well as the root clip. . You can use the paint bucket or ink bottle to change the fill and stroke. . You can change the X and Y position of individual instances as well as the entire figure. . You can add more bones at any time, and they are applied to all poses. . You can’t add or remove more instances once the armature has been created.
If you are using brush or line art to form your figure: . You can use the paint bucket or ink bottle to change the fill and stroke. . You can change the X and Y position of the entire figure. . You can add more bones at any time, and they are applied to all poses. . You can’t add more brush strokes or art once the armature layer has been created.
Finally, in either case, if you delete the bone structure from your Timeline with multiple poses, the armature layer becomes a series of keyframes (frame by frame animation) containing the IK posing that Flash figured out. No further posing is possible.
From the Library of Lee Bogdanoff
200
HOUR 10: Advanced Animation with Inverse Kinematics
Summary Using IK in Flash is perhaps more fun than useful. Unless you have a specific design in mind that would benefit from poses and animation, it’s of limited value. Still, like any tool, it’s important to understand how it works, so when you do need it, you are familiar with it. Using IK gives you a distinct look to your animation that’s tough to achieve with motion tweening. With a little practice and careful attention to bindings, you can create some very organic-appearing shapes in motion. In this hour, you’ve learned how to add bones to your figures with the Bone tool. You’ve discovered the differences between adding bones to drawn shapes and movie clips. You’ve had a chance to see the IK motion computed for you by Flash as you posed your shapes. Finally, you have looked at the Bind tool and used it to modify which control points connect to which bones. You’ve learned the basics of IK with Flash and created your own posed animations. Now, the most important consideration is to find the right time to use bones.
Q&A Q. So, the Bones tool and IK are really cool, but when would I ever want to use it? Can you give me a few examples? A. You’d definitely use it if you want to create a cartoon-like figure; the bones and poses give you an easy way to get motion. If you try to motion tween your character, you have to twist and angle the limbs of your shape, taking more time and effort. Another great use for bones is to animate a machine, and anything with articulated movement is a good candidate. Q. I’ve placed the root bone in the center of an animated guy, but I need to move it. When I try to move it, it spins around that joint. How can I change the position on the screen of that joint? A. The root bone, as you’ve discovered, doesn’t move like the other bones do. If you do need to reposition it, you can use the sliders on the Properties panel to change the X and Y position. Q. Can you set the Ease setting between each pose? A. No, unfortunately it applies to the entire Timeline.
From the Library of Lee Bogdanoff
Workshop
201
Q. I’m having trouble drawing bones in my shape. Flash wants to place the end of the bone only in specific spots. Can I tell Flash to enable me to put it wherever I want? A. Flash is setting the Transformation Point, what we called the joint, for you to some degree. You can turn that off and place your point anywhere you want by choosing Edit, Preferences (or Flash, Preference on a Mac). Click on the Drawing Category, and uncheck the box that says Auto Set Transformation Point. What’s really cool about doing this is now you can drag your points outside of your figure and have a little more control of the movement when you need.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. What’s the downside to using art created with the brush rather than movie clips? A. There’s really no downside. You should always use brush-created art. B. If your figure loops on itself, it might not look right. Also, sometimes you get jagged edges and unpredictable results. C. Bones don’t work with brush art. 2. How is posing movie clips different from posing a drawn shape? A. There’s no real difference. B. A drawn shape can be posed multiple times; a movie clip figure can only be posed once. C. Each movie clip can rotate independently.
From the Library of Lee Bogdanoff
202
HOUR 10: Advanced Animation with Inverse Kinematics
3. Once you’ve added bones to your shape, what can you not do in the armature layer anymore? A. If you’re using clips, you can’t add anymore. If you drew your shape, you can’t draw anymore. B. You can’t rename the armature layer. C. You’re stuck with whichever easing you selected before you added bones.
Quiz Answers 1. B. Brush-art has to be carefully adjusted when posed to keep it looking good. Don’t forget that you can use the Bind tool to adjust the control points to make it look even better. 2. C. You get the extra benefit of being able to rotate the movie clips in addition to posing the figure. 3. A. After you add your first bone, you can’t add more clips or more brush strokes to your figure. Also, you can only use one kind of creation, either all symbols or all drawing.
From the Library of Lee Bogdanoff
HOUR 11 Simulating 3D Animation
Prior to this version of Flash, to make an image appear to rotate in 3D space, you had to use the Free Transform tool and fake it. In this version, the 3D tool takes care of the tedious work of simulating 3D for you and actually moves and rotates your movie clips on all three axes. With the 3D Rotation tool, you can rotate a movie clip not just on the X-axis and Y-axis, but on the Z-axis as well. This enables you to perform perspective transformations on anything you can put in a movie clip, even on movie clips combined to form a structure. It’s more powerful than it seems at first glance. As you gain more expertise with Flash, you learn how to rotate your clips dynamically using ActionScript.
WHAT YOU’LL LEARN IN THIS HOUR: . Creating 3D clips . Simulating 3D positions . Animating objects in 3D space
Creating a 3D Movie Clip Let’s take a look at two new 3D tools and how they are represented on the stage. Figure 11.1 shows a movie clip that has been moved with the selected 3D Rotation tool, located on the toolbar under the Free Transform tool. Take a closer look at Figure 11.1. The gray shape on the Stage is a movie clip. It started as a rectangle, but was moved in 3D space with the 3D Rotation tool. After you select a movie clip with this tool, you see red and green crosshairs, a blue circle, and a larger yellow circle centered on your movie clip at the point where the rotation occurs. The red line represents the Xaxis; the green line is the Y-axis. Because the Z-axis would be sticking straight out at you, it’s represented by the blue circle. Think of this like a wheel that rotates your shape around the center axis. Finally, the orange circle rotates in all three dimensions at once. Now, we take a quick look at the 3D Translation tool. Similar to how the Rotation tool enabled you to rotate in 3D space, the Translation tool enables
From the Library of Lee Bogdanoff
204
HOUR 11: Simulating 3D Animation
you to move your clip in 3D space along the same three axes. Figure 11.2 shows you the appearance of your clip on the stage when it’s selected with the Translation tool. FIGURE 11.1 The 3D Rotation tool gives you the ability to rotate on the X-axis, Y-axis, Z-axis, or all three at the same time.
FIGURE 11.2 The 3D Translation tool enables you to move your clip along the X-axis, Y-axis, or Z-axis.
The red arrow is a handle for the X-axis; the green arrow is for the Y-axis; and the blue dot in the center is for the Z-axis. Unlike the Rotation tool, you can’t move your clip across more than one axis at the same time. When you create a movie clip, the 3D Position and View section of the Properties panel appears, as shown in Figure 11.3. These settings are involved
From the Library of Lee Bogdanoff
Creating a 3D Movie Clip
205
when you manually adjust the handles in the two tools. This section contains the following settings: FIGURE 11.3 When you create and select a movie clip, the 3D Position and View section of the Properties panel appears.
. X, Y, and Z Position—Imagine a 3D grid covering the entire stage. These values correspond to the center of your movie clip’s location with reference to that grid. The 0, 0, 0 coordinates of this grid exist off the Stage by default. . Width (W) and Height (H)—In 2D space, these would apply to the width and height of your clip. In 3D space, it refers to the rotated width and height, that is, how wide and tall your movie clip is given the angle it’s been rotated. . Perspective Angle—We talk about this in more detail under “Perspective Angle,” but for now, think of the perspective angle as the direction from where you are viewing the object. Pretend you are filming the screen with a movie camera. The perspective angle keeps track of what angle the movie camera is pointed toward the screen. . Vanishing Point X and Y Position—We also talk more about this under “Vanishing Point,” but this controls how far the screen is from our hypothetical camera.
Before we create our 3D object, we quickly learn the rules of using 3D in Flash.
Following the Rules of 3D Animation Just as motion tweening has different rules than shape tweening, animating objects in 3D has its own set of rules. Because the only reason you probably
From the Library of Lee Bogdanoff
206
HOUR 11: Simulating 3D Animation
ever want to use 3D is to create an animation, we briefly go over a few rules that apply to animating in 3D and using the 3D tools in general. When using the 3D Rotation and Translation tools to move your clip, you can only use movie clips. This extends to animating your clips as well. When you move your movie clip in 3D space, you discover it’s essentially flat; it has no real depth. Figure 11.4 shows a movie clip that has been rotated on the X- and Z-axes until you can’t actually see it. FIGURE 11.4 Movie clips have no actual depth, so you can’t see the one here, which has been rotated along the Xand Z-axes.
If you want to create a true 3D object, you need to use multiple movie clips together and build some sort of hollow structure. You angle multiple movie clips into a box, as shown in Figure 11.5. This box only has three sides, but adding three more makes it a cube. You can rotate each movie clip individually or all of them together.
FIGURE 11.5 To build a structure that has height, width, and depth, you need to combine movie clips.
Animating movie clips in 3D, as you soon see, can be done by creating a simple motion tween and using the 3D tools to move the clip. You can also use the Select tool to reposition your clip, but it behaves much the same as the Translation tool, remembering that your clip is moving in 3D space. You can use the Free Transform tool as well. Basically, anything you can do in a normal motion tween, you can do during your 3D animation. It’s worth noting that you can also use ActionScript to rotate your movie clip instance. We show you a quick example at the very end of this hour in the section, “Rotating Objects with the 3D Rotation Tool.” Once you’ve used 3D transformation on a movie clip instance, you can’t edit the parent clip in Edit in Place mode. However, you can open it from the Library or by right-clicking and choosing Edit. You don’t have the
From the Library of Lee Bogdanoff
Creating a 3D Movie Clip
207
advantage of seeing it in the current position on the Stage. When we say 3D transformation, we mean animating either the position or the rotation of the object in a motion tween. To tell when this has occurred, right-click on one of the frames in your Timeline, and instead of motion tween, Flash is now referring to your tween as 3D tween. Another important point to understand is what Flash uses to rotate around when you move your clip. Unlike rotating a 2D movie clip with the Free Transform tool, when you rotate your clip, Flash uses the center of the object, not the Registration point. Although we haven’t talked about publishing your Flash movie yet, keep in mind that the publish settings must be set to Flash Player 10 and ActionScript 3.0 to use 3D. This becomes important later when you decide to publish your movie for the web. We discuss this process in Hour 20, “Linking a Movie to the Web.”
Objects in 3D Space By now, you must be ready to try creating a 3D object yourself. In this task, you create a movie clip and move it around in 3D space. You also get a chance to adjust how Flash centers the rotation and motion. 1. Open a new file, and make sure it’s ActionScript 3.0. Draw a rectangle on the stage, and turn it into a movie clip.
TRY IT YOURSELF ▼ Create a 3D Movie Clip
2. Select your movie clip. Choose the 3D Rotation tool, located under the Free Transform tool. You see the rotation overlay, as shown in Figure 11.6.
NOTE
3. Play around with your movie clip by clicking and dragging on the three axes. Get comfortable with the direction that each axis moves your clip, and then use the orange circle to rotate all three dimensions at the same time.
It’s much easier to manipulate your movie clip with each individual axis in turn, rather than using the orange circle handle to manipulate everything at once. Your best bet for the most precise control is to consider how your clip should be tilted on each axis, and then adjust each accordingly. As you gain practice, you might feel more comfortable using the orange handle to move everything at once.
4. Now change to the 3D Translation tool, and notice how dragging on the arrow handles changes the location of your clip. Dragging the Xaxis handle to the right or left swings it around your view accordingly, and the Y-axis can move up or down. 5. If you drag the blue handle downward, your movie clip appears to move closer to you. If you drag the blue handle upward, it moves farther away, closer to the vanishing point. It seems smaller as you drag the blue handle up. Think of watching a car drive away. From your perspective it seems smaller as it drives further and further away from you.
Use the Orange Circle with Caution
From the Library of Lee Bogdanoff
208
HOUR 11: Simulating 3D Animation
▼ TRY IT YOURSELF Create a 3D Movie Clip
FIGURE 11.6 Select a movie clip with the 3D Rotation tool.
6. Return to the 3D Rotation tool. Notice if you drag the center white circle in the middle of the overlay, it moves the overlay and not the movie clip. This is how you can recenter the axis of rotation. You don’t have a similar option with the Rotation tool.
Now you’ve had a chance to play with the 3D tools, and you should be getting a sense of how they work. Let’s take a few minutes to consider two 3D concepts, perspective angle and vanishing point.
Perspective Angle As you work with the 3D tools, you need to consider the view you have on the clips you are manipulating. If you pretend your head is a camera, and your eyes become the lens, you begin to get a sense of what the Perspective Angle setting in the Properties panel does. When you select your 3D Movie clip, you see a 3D Position and View section containing a Perspective Angle icon. Drag the underlined value to change the focal view of the animation. It ranges from 1 degree to 180 degrees. The default is generally 55 degrees. In general, it’s easier to use the default Perspective Angle setting. If you want to use it, we recommend you experiment with it before using it in an animation.
From the Library of Lee Bogdanoff
Moving Objects with the 3D Translation Tool
209
Vanishing Point The vanishing point is the point where an object disappears out of sight. As objects approach the vanishing point, they get smaller and smaller until they become too small to recognize. Imagine a railroad track ahead of you. Look into the distance far enough, and you can’t see the railroad track any longer. You know the sides of the tracks are parallel and are the same distance apart, but from your perspective, the separate tracks appear to connect to each other, as shown in Figure 11.7. FIGURE 11.7 The vanishing point is the point where you can no longer see the railroad tracks off in the distance.
The point is Flash has settings that enable you to change the distance away from you on the Stage where the vanishing point is set. To change the location of the vanishing point, click on your movie clip instance on the Stage. Then, use the X and Y sliders on the Properties panel next to the Vanishing Point setting. You see crosshairs on the stage that help you get a sense of where the vanishing point is shifting. Not only can you move the vanishing point closer or further out, you can also move it to the right or left.
Moving Objects with the 3D Translation Tool You’ve had a chance to use the 3D Translation tool, but you haven’t animated anything in 3D. In the next exercise, you find it’s like creating a motion tween.
From the Library of Lee Bogdanoff
210
▼ TRY IT YOURSELF Use the 3D Translation Tool to Create an Animation
HOUR 11: Simulating 3D Animation
In this task, you create a movie clip and move it around in 3D space. You also get a chance to adjust how Flash centers the rotation and motion. 1. Open a new file, and make sure it’s ActionScript 3.0. Draw a rectangle on the stage, and turn it into a movie clip. 2. Click on the Timeline at Frame 25, and choose Insert, Timeline, Frame. Now, click on one of the frames, and choose Insert, Motion Tween. Your frames should now be blue to indicate motion tweening. 3. Click on Frame 25, and choose the 3D Rotation tool. Rotate your movie clip on all three axes. 4. Click on Frame 25, and choose the 3D Translation tool. Move your movie clip on all three axes. 5. Move your movie clip by choosing Control, Test Movie (or press Enter). As you watch it move, get a sense of how it’s moving in 3D space. A natural easing seems to take place as it moves further away and closer to you.
Rotating Objects with the 3D Rotation Tool You’ve rotated a movie clip, but you haven’t rotated more than one in 3D space at the same time. Let’s try that now.
▼ TRY IT YOURSELF Create Multiple Rotating Movie Clips
In this task, you create two movie clips that animate and rotate at the same time. 1. Open a new file, and make sure it’s ActionScript 3.0. Draw a rectangle on the stage, and turn it into a movie clip. 2. Use the 3D Rotate tool to rotate on at least two axes. 3. Create a second movie clip, or pull a new instance from the Library. 4. Click on the new instance, and then use the Rotate and Translate tools to move it in a recognizably different direction than the first movie clip, as shown in Figure 11.8
FIGURE 11.8 With the Shift key, you can select multiple movie clips to work on with the 3D tools at the same time.
5. With the Rotate tool selected, press and hold the Shift key to select both movie clips at once. You now discover that both of them move as you rotate with the overlay handles.
From the Library of Lee Bogdanoff
Summary
211
Another way to make your movie clips rotate is to use ActionScript. We give you a quick way to make your movie clip rotate without actually having to use the 3D rotation tool to do so. In Hour 16, “Basic Interactivity,” we discuss the addEventListener code more in-depth, but for now, this should give you a taste of what you can do with ActionScript. Start by creating a new movie clip, and giving it an Instance name in the Properties panel of myClip. Then, click on the first frame in the Timeline, and choose Window, Actions. This opens the code window. Type the following code: addEventListener(Event.ENTER_FRAME, rotate3D); function rotate3D(e:Event):void { myClip.rotationX += 1; myClip.rotationY += 1; myClip.rotationZ += 1; }
This code tells Flash to rotate the movie clip on all three dimensions. It continues to rotate indefinitely. To see your work, choose Control, Test Movie. Your clip slowly rotates.
Summary Applying 3D in Flash used to be difficult and generally not worth doing. In this version of Flash, you have access to tools that make it more worthwhile to think of your movie clips in 3D space. While it’s still not perfect, primarily because of the lack of a third dimension in a movie clip, it’s certainly come a long way. With a bit of perseverance, you can create solid objects that seem to move and rotate in 3D space. This hour you’ve learned how to create 3D objects, rotate and move them in 3D space, and animate them. You’ve also touched on concepts such as perspective angle and vanishing point. There’s more to explore with 3D Flash, but now that you’ve had a good introduction, you can discover at your own pace. Have fun with your 3D animations in Flash and push the envelope!
From the Library of Lee Bogdanoff
212
HOUR 11: Simulating 3D Animation
Q&A Q. I created this great movie clip, but then I wanted to change its fill. Can I go back and do that now? A. You definitely can. Remember, though, that you can’t do any more editing in place. Keep in mind what your Timeline looked like, and edit the clip in the Library. Q. Can I put a video/audio/animation in my movie clip and animate it in 3D? A. You most certainly can. Your best bet is to focus on creating your movie clip and doing whatever you need to do to it before working on the 3D side of things. Q. I tried to put a Flash movie with 3D on my website, but it didn’t work. What did I do wrong? A. You probably saw a warning from Flash when you tried to publish your movie. Chances are you are using the wrong version of Flash. We talk about publishing in Hour 20, “Linking a Movie to the Web.” Q. It was cool to rotate my shape with that code, but when I tried it with two movie clips on the stage, it didn’t work. A. Flash can rotate only one movie clip at a time with the ActionScript code we gave you. To get the other one rotating, give it a different instance name, and copy and paste the code again, modifying the name myClip to the new instance name.
From the Library of Lee Bogdanoff
Workshop
213
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. 3D Translation is the same as A. Turning a 2D object into a 3D object. B. Rotating a movie clip in any of three dimensions. C. Moving a movie clip in any of three dimensions. 2. In 3D space, you can manipulate A. Only movie clips. B. Movie clips, graphic symbols, and buttons. C. Anything you want. 3. To rotate more than one movie clip in 3D space, you need to A. Create a separate layer for each clip. B. Convert the multiple clips into a single clip. C. Press the Shift key to select all the movie clips.
Quiz Answers 1. C. Translation moves things; rotation rotates them. 2. A. You can use only movie clips with the 3D tools. 3. C. While A and B work, the best answer is C. Extra points if you realized all three should work.
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 12 Reusing Your Animations with Motion Presets
After you’ve been using Flash for a while, you might find yourself creating the same motion tween again and again to apply to different symbols. In this hour, you learn about the Motion Preset panel. This panel serves as a repository for motion tweens you can reuse. It’s a great time saver when you want to apply the same motion to multiple objects. What makes it even better are the tweens that Flash has already provided. Finally, it’s a great way to share your tweens with someone else or vice versa.
WHAT YOU’LL LEARN IN THIS HOUR: . Using ready-made motion tweens . Saving your own motion tweens for re-use . Modifying existing motion tweens
The Motion Presets Panel For the remainder of this hour, keep in mind that motion presets can only be used in ActionScript 3.0 files. This means you should select the first option, Flash File (ActionScript 3.0), when you create a new Flash file that will use a motion preset. Open the Motion Presets panel by choosing Window, Motion Preset (see Figure 12.1). At this point, it doesn’t look like much. There are two folders: Default Presets to store previously created motion tweens and Custom Presets to store your own. All the good stuff is in the Default Presets folder. If you double-click on it or click on the gray arrow to the left, it expands and shows you the existing Flash presets, as shown in Figure 12.2. If you click on one of them, you see a demonstration of what it does in the Preview Pane on the top part of this panel. If you click on the Menu button on the top right of the panel, you see the fly-out menu, also shown in Figure 12.2. FIGURE 12.1 This is the Motion Presets panel when it is first opened.
From the Library of Lee Bogdanoff
216
HOUR 12: Reusing Your Animations with Motion Presets
FIGURE 12.2 Within the Motion Presets panel, we’ve expanded the Default Presets folder. Clicking on one of the presets starts a demo of the animation in the top part of the panel.
Let’s take a minute to go over some of the commands on this panel: . Import—This does exactly what you think it does. You use this to bring in motion presets from other sources. Motion presets are saved as XML files and contain a text-based description of how the movie clip should move. . Export—This is how you save motion presets for other Flash installations. This creates the XML file for you. You never need to edit the XML; you can use the Flash interface and Motion Editor to make any changes. . Rename—This enables you to change the name of your preset. . New Folder—If you need to group some of your presets, you can create a new folder and drag them into it. . Remove—This deletes a preset. . Save—This saves your preset and gives you the opportunity to give it a new name. . Apply at Current Location—When you have a movie clip on the stage, you can click on a specific frame in the Timeline for motion tweening to begin using this option. . End at Current Location—This enables you to end the motion tween at a specific frame.
From the Library of Lee Bogdanoff
Applying an Existing Motion Preset
217
. Apply—This button is located on the bottom right of the panel. If you select a movie clip on the stage and click this button, the preset motion tween is applied to it.
Along the bottom left of the panel are three more icons that stand for: a dog-eared page for Save Selection as Preset, a folder for New Folder, and a trashcan for Remove Item. These do the same things as Save, New Folder, and Remove in the fly-out menu. Finally, the top half of the panel shows a preview of the preset motion when you click on a preset in the list. It’s a great way to see exactly how each preset animates.
Applying an Existing Motion Preset There’s really nothing else to the panel. It’s time for you to try using a motion preset for yourself.
In the following steps, you create a movie clip and apply one of the preexisting motion presets that came with your Flash application. 1. Open a new file, draw a rectangle on the stage, and turn it into a movie clip. You can use any symbol type that a motion tween would use.
TRY IT YOURSELF ▼ Apply an Existing Motion Preset
2. Select your movie clip. Open the Motion Presets panel by choosing Window, Motion Presets. Double-click on the Default Presets folder, and click on a few to preview them. 3. When you find one you like, select your clip on the stage, select the preset, and click on the Apply button, as shown in Figure 12.3. Your preset has now been applied to your movie clip instance on the Stage. 4. You now see a normal motion tween in the Timeline, as shown in Figure 12.4. In our example, the small-bounce preset put the ending location off the stage. You can click on the last keyframe and drag the movie clip back on the Stage to fix this. You can modify anything you like about the tween. Try changing the path of the tween; choose Control, Test Movie (or press Enter) to see your animation.
From the Library of Lee Bogdanoff
218
HOUR 12: Reusing Your Animations with Motion Presets
▼ TRY IT YOURSELF Apply an Existing Motion Preset FIGURE 12.3 With a motion preset selected, click the Apply button to attach it to your movie clip on the Stage.
FIGURE 12.4 You can easily modify the location of your clip in any keyframe by selecting the keyframe and moving your clip.
You now know how easy it is to use motion presets. Sometimes there’s no point in recreating a motion tween if you can use or tweak an existing motion preset.
From the Library of Lee Bogdanoff
Applying an Existing Motion Preset
219
Saving a New Motion Preset So far in this book, we’ve talked a lot about tweening and frames. We also need to mention a few things about layers that apply to saving a motion preset and just about any animation you create. Let’s detour to a quick overview of how layers work, and then we create a motion preset that takes advantage of multiple layers to set a mood in our animation. You’re probably familiar with layers in other graphic applications, and certainly, by now, you have a sense of how they work in Flash. Layers are used to help organize your graphics, sound, and eventually ActionScript programming. They’re fairly intuitive. Let’s take a quick look at the Timeline (see Figure 12.5) and go over some of the layer settings. FIGURE 12.5 The Timeline uses different colors to represent the different types of tweening.
In Figure 12.5, we’ve renamed our layers to help you see what’s going on in each of them. Starting from the top: . Active Layer—When you’ve selected a layer, it highlights with whatever highlight color your operating system is using. In this case, it’s an orange color. You can also tell it’s the active layer by the small Pencil icon to the right of the layer name. . Motion Tween—Any layer containing a motion tween is colored blue. In this case, this layer contains the motion preset we applied in the last “Try It Yourself” exercise. Even though it’s a preset, it’s basically a motion tween and behaves like one. This motion tween layer might only contain a single symbol that is being animated. . Classic Tween—This is the way Flash handled tweening prior to CS4. It’s colored purple and behaves much like a motion tween, although you have to set keyframes rather than enabling Flash to do it for you when you move a symbol around on the stage.
From the Library of Lee Bogdanoff
220
TIP
Layer Organization As your animations grow in complexity, you should take advantage of Flash’s ability to keep your movie organized. Not only should you give your Library parent movie clips and assets meaningful names, but you should also name your layers. To be really organized, you might want to take advantage of folders where you can drag your layers and store them in various categories. Not only does that help you quickly find things, it makes your Timeline less cluttered when you have lots of layers. For example, you can put all the layers containing motion tweens in one folder and all layers with buttons in a separate folder. Staying organized helps make using Flash easier.
HOUR 12: Reusing Your Animations with Motion Presets
. Shape Tween—This layer is colored green and contains a simple shape tween. Remember, shape tweens morph between two nonsymbol graphic shapes. . 3D Tween—Because a 3D tween is similar to a motion tween, it’s also colored blue. Unlike a motion tween, you can move multiple movie clips in 3D space in the same layer. . Hidden Layer—We’ve set this layer as hidden by clicking on the black dot under the Eye icon, causing a red X to show up. When a layer is hidden, its contents are not visible on the Stage. To make it visible again, click on the red X. . Locked Layer—Clicking under the Padlock locks this layer, making it impossible to select or edit anything in it. To unlock it, click on the Padlock symbol. . Empty Layer—We included this so you could see what an empty layer looks like compared to a tweening layer. . New Layer—This is a button directly under the layer list on the bottom left of the panel. This creates a new layer. . New Folder—You can create a folder and double-click on its name to rename it. Then, you can drag particular layers into that folder for better organization. . Tiny, Small, Normal, Medium, Large—In the fly-out menu on the upper right, these settings control the appearance of the Timeline. If you have 100 frames of animation and you want to see all 100 frames in the Timeline, choose Tiny or Small to shrink the size of the Timeline ruler. It doesn’t change anything in your movie; it only affects the appearance of the Timeline. . Preview and Preview in Context—These options enable you to see your movie clips in the Timeline itself at each keyframe. This is another way to view things and changes nothing in your movie.
This was a rather longwinded review of the Timeline, but it’s definitely worth taking a few minutes to understand. Now, let’s take a break and build our own motion tween to save as a preset.
▼ TRY IT YOURSELF Modify and Save an Existing Preset
In this exercise, you create a movie clip and apply one of the preexisting motion presets that came with your Flash application. This time you add some additional features to your animation and modify the preset. Finally, you save it under a new name. 1. Open a new file, and draw a ball on the Stage. Choose a radial gradient fill to make it look more like a ball. When you’re done, turn it into a movie clip named Ball. Rename Layer 1 Bounce.
From the Library of Lee Bogdanoff
Applying an Existing Motion Preset
2. Insert a new layer, and drag it under the bounce layer. Rename it Background. We should draw a surface for our ball to bounce on. Draw a rectangle along the bottom of the stage, as in Figure 12.6.
221
TRY IT YOURSELF ▼ Modify and Save an Existing Preset FIGURE 12.6 Create a layer with a ball movie clip and a layer containing a block for it to bounce on.
3. We want our background layer to show up throughout our animation, so insert a frame in the background layer at layer 75. Lock the background layer by clicking to the right of the layer name under the Padlock. 4. Select your ball movie clip instance. Open the Motion Presets panel by choosing Window, Motion Presets. Double-click the Default Presets folder, and locate Small-Bounce in the list. Click it, and press the Apply button. 5. At this point, it’s not going to work well for us. We want it come in from the left and bounce on top of the block. We have to modify the motion path. Figure 12.7 shows a modified motion path where it would bounce over our background block and then stop. Spend some time moving the motion path. You can always test it by pressing FIGURE 12.7 Modify the motion path to make it appear that the ball is bouncing on the block.
From the Library of Lee Bogdanoff
222
▼ TRY IT YOURSELF Modify and Save an Existing Preset
HOUR 12: Reusing Your Animations with Motion Presets
Enter. The trick is to first change the beginning and end keyframe locations of the ball, and then double-click on the solid line above the dotted one. Drag this line up until the dotted line is touching the block. 6. It’s not easy to change the motion path to do what you want. It probably takes some experimentation to get it right. Fortunately, you can use Edit, Undo as often as you need and keep trying. When you get it where you want, click the bounce layer to select all the frames. Now, click the Save Selection as Preset button on the bottom left of the Motion Presets panel. You can also use the fly-out menu, and choose Save. A dialog opens. Type the name My-Bounce, and click OK. You now see the new My-Bounce preset saved under the Custom Presets folder in the Motion Presets panel.
TIP
Previewing a New Motion Preset Unfortunately, when you create a custom preset, you don’t see a sample of it in the Motion Presets panel. You can add one, but it takes a little extra work. After you’ve created and saved your new preset, you should be left with the motion tween on the Stage. Choose File, Export Movie. You see a Save File dialog. Give the movie the same prefix as your motion preset. For example, in the last exercise, we would save it as MyBounce.swf. The last step is to locate the folder where Flash stores the motion preset files and save My-Bounce.swf in the same directory. The easiest way is to search your hard drive for the file named My-Bounce.xml. Your new SWF file needs to go in the same place. Locate it, and use the Save File dialog to put it in the correct place. On a Macintosh (Mac), it’s likely under:
From the previous exercise, you should get the idea that you can modify existing motion preset tweens and create your own in exactly the same way.
Editing an Existing Preset with the Motion Editor Panel You can do more than just modify a motion preset by moving it on the Stage. For more precise control, you can use the Motion Editor panel. Figure 12.8 shows the Motion Editor with the wave motion preset applied to a movie clip on the stage. FIGURE 12.8 The Motion Editor panel shows the wave motion preset.
From the Library of Lee Bogdanoff
Editing an Existing Preset with the Motion Editor Panel
223
You can learn a few things about this preset by looking at the settings in the Motion Editor. For example, you can see the motion is based on a Sine wave. The length of the animation is 70 frames, which you can tell if you use the scroll bar on the bottom right of the Motion Editor panel and scroll all the way to the right. If you scroll to Frame 35 in the Motion Editor, you should see the X value reach a peak in the graph and go back down again. This is describing the location of the movie clip on the X-axis. Two motion effects are being applied. The first effect is a basic right and left path the movie clip travels along. Take a look at Figure 12.9. You can see the solid green line on the stage is close to horizontal. The second effect is the dotted line, representing the Sine wave motion listed in the Motion Editor.
User Name/Library/Applications Support/Adobe/Flash CS 4/en/ Configuration/Motion Presets/
Changing the Easing Settings
and on a PC, it’s likely under: C:\Documents and Settings\USERNAME\ Application Data\Adobe Now that Flash has a SWF file, it can show a preview for your motion preset in the Motion Presets panel. It’s a little extra work, but it pays off when you can’t quite remember what that custom preset you created last month looks like. FIGURE 12.9 This is the wave motion preset applied to a movie clip on the stage. The dotted line is the second motion, shown as 2-Sine Wave in the Motion Editor panel.
Let’s use the Motion Editor to change the easing settings used by one of the motion presets. This is also useful when you are modifying your own motion tweens. In this exercise, you create a movie clip and apply one of the preexisting motion presets that came with your Flash application. Then, you modify the easing using the Motion Editor panel.
TRY IT YOURSELF ▼ Change the Easing of an Existing Preset
1. Open a new file, and draw a shape on the stage. Save it as a movie clip. 2. Open the Motion Presets panel by choosing Window, Motion Presets. Click on your movie clip instance; click on the Bounce-smoke Default preset; and click the Apply button. 3. If the green motion path extends above the top of the stage, choose Edit, Select All, and then press and hold the Shift key. Drag the entire thing down the Stage until the top of the green line is at the top edge of the Stage. Play with the motion path and the symbol position in the last keyframe if you want to make the smoke appear to drift off to the right or left as though wind is blowing.
From the Library of Lee Bogdanoff
224
▼ TRY IT YOURSELF Change the Easing of an Existing Preset
HOUR 12: Reusing Your Animations with Motion Presets
4. Let’s modify the easing using the Motion Editor so our clip drifts away quickly at first and then slows down. Open the Motion Editor, and click on the layer with your animation. We make two changes to the editor, as shown in Figure 12.10. First, in the drop-down box next to Basic Motion, select Simple (Slow). Then, at the bottom of the Motion Editor panel under Easing, change the number from 0 to -100 by dragging it to the left.
FIGURE 12.10 You can change the easing using the Motion Editor.
Obviously, you can modify a lot more in the Motion Editor, including applying different filters and changing the location. Take some time to play with things. If you like your final effect, remember you can save it as a motion preset at any time.
Rubberizing Your Bouncing Object Sometimes the best way to see how a motion tween works is to look at it in the Timeline or Motion Editor. Making a ball bounce is one thing, but to make an even cooler effect, we can make it seem to briefly change its shape when it hits something, as though it’s made of rubber. Let’s take a look at how the effect is achieved by examining an existing preset. Then, we apply the effect to our own motion tween.
From the Library of Lee Bogdanoff
Editing an Existing Preset with the Motion Editor Panel
In this task, you use the techniques you learned from looking at a preset and apply them to your own tween. 1. Open a new file, and draw a shape on the stage. Save it as a movie clip. Just for fun, we’re using the Polystar tool, located under the Rectangle or Oval tool menu on the toolbar. Select the Polystar tool, and then click the Options button on the Properties panel. Change the Style to Star, Number of Sides to 20, Star Point size to .9, and click OK.
225
TRY IT YOURSELF ▼ Change the Easing of an Existing Preset
2. Open the Motion Presets panel by choosing Window, Motion Presets. Click on your movie clip instance; click on the bounce-smoosh default preset; and click the Apply button. 3. If the green motion path extends below the bottom of the stage, choose Edit, Select All, and then press and hold the Shift key. Drag the entire thing up the Stage until the bottom of the green line is at the bottom edge of the Stage. 4. Press Enter to see the motion tween. Look at your Timeline at keyframes 67, 68, and 69. Keyframe 67 is used to fix the shape of the star for the previous set of frames. Frame 68 is where the actual warping of the ball occurs, and frame 69 restores the shape for the next set of frames. 5. Open a new movie, and copy an instance of the star movie clip to the Stage from the original movie. Don’t copy the motion tween, just the star. At this point, you should be able to create a motion tween using the techniques you’ve acquired. Create a tween that makes the star appear to fall and then bounce back up again. Use easing to help make it realistic. 6. At the point of the timeline where it hits the bottom of the stage, insert keyframes on either side of the keyframe Flash added for you. Then, click on the middle keyframe, and use the transform tool to warp the shape of the ball to simulate how it might compress when it hits the ground.
You can apply this same technique of looking at an existing preset and using it to modify your own tweens. You might also find it useful to look at the Motion Editor to get a sense of how various motion tweens are created and how they use some of the specialized effects, like in the Sine curve you saw earlier this hour in “Editing an Existing Preset with the Motion Editor Panel.”
From the Library of Lee Bogdanoff
226
HOUR 12: Reusing Your Animations with Motion Presets
Summary Motion presets are a great way to share animations with other people, take advantage of the work someone has already done, or learn new techniques you can apply to your own work. Over time, we imagine people will be eager to share their motion presets online, and we encourage you to see what’s out there. In this hour, you’ve learned how to use the included motion presets, how to combine a motion preset in a layer with another layer to achieve a more complicated animation, how to save and share your own motion presets and create previews of them, and how to edit existing ones and examine how they are put together. It’s been a long, but hopefully interesting hour!
Q&A Q. What’s really happening when I export a motion preset? A. Flash converts your motion tween into a file that describes it in terms of numbers. If you’re curious, we recommend opening one of the XML files that is created when you export your preset. You see an in-text description of everything that happens in your motion tween. Q. Can you create a preset of a shape tween? A. Unfortunately, shape tweens can’t be saved as presets. It wouldn’t really make sense anyway because the appearance of the shape tween is dependent on the two shapes you are tweening between. Q. Why does it matter that shapes are involved? A. A motion preset describes only the path the movie clip travels and the things it does. It doesn’t care about what the movie clip looks like. It’s distinct from the symbol that’s applied to it. Q. How about 3D stuff? Can I use that in a motion preset? A. Yes, because like a true motion tween, the 3D tween doesn’t care what the movie clip is like; it’s just describing motion. In fact, if you look at some of the default presets in the Motion Presets panel, you see they are 3D tweens. One in particular enables you to easily rotate any movie clip without having to painstakingly create a motion tween and rotate it yourself.
From the Library of Lee Bogdanoff
Workshop
227
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. When you insert a motion preset, you must have A. A motion tween in your layer. B. A graphic. C. A symbol by itself in a layer. 2. After you apply a preset, what can you change? A. Nothing. Once it’s been applied, you can’t edit anything. B. Just the symbol you applied to it. C. Just about everything. 3. Motion presets are basically A. A way that Flash describes and can store a motion tween as text. B. A small version of a SWF movie, described as text. C. Any kind of tween, saved as an XML file.
Quiz Answers 1. C. Because a motion preset is essentially a motion tween, the same rules apply to it as to motion tweens. One symbol in a layer is the rule. 2. C. You can change the appearance of the parent symbol. You can change the motion path. You can change the easing. You can apply new filters or remove existing ones. Again, anything you can do to a motion tween, you can do in a preset. 3. A. Motion presets are nothing more than saved XML files that describe how your symbol should move or behave. Take a look at one of the XML files if you’re still skeptical.
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 13 Including Sound in Animations
Sound makes a movie come alive, but the power of audio is subtle. People often don’t notice or remember the sounds you use. Create a movie with the wrong sounds, and the audience notices right away. The effect of audio is often subconscious, and that’s what makes it so powerful. Regardless of why sound is useful, it’s important to use audio effectively because it’s usually the largest portion of an exported movie’s file size. There’s no reason to allow the audio to add more size than it has to. Unfortunately, no Make the Audio Come Out Good button exists. The choice between good audio and a small file size is more of a battle than a balancing act. It’s a matter of understanding the technology, and that’s the goal of this hour.
WHAT YOU’LL LEARN IN THIS HOUR: . How to import and use sounds in keyframes . Audio concepts such as sample rate, frequency, and compression . How to apply tricks to minimize sound’s impact on file size
Importing Sounds Flash has great support for audio but no internal way to record or create sounds. You need to find an existing sound, have one provided for you, or use sound software to record or create your own. This means that in Flash, you can import sounds, but you can’t create them. Two basic steps are involved in getting audio into a Flash movie. First, you need to import the sound into the Library. Then, you need to decide where and how to use it in your Timeline. This is similar to importing raster graphics as you did in Hour 3, “Importing Graphics into Flash.” When you import a sound, it’s stored in the Library much like an imported bitmap. The sound appears in the Library where you can access all the sound’s individual properties. Unlike when you import graphics to the Library, the audio file doesn’t appear on the stage.
From the Library of Lee Bogdanoff
230
HOUR 13: Including Sound in Animations
NOTE
Supported Formats
Digging Up Sounds or Making Your Own
Flash can import digital audio in several file formats, including the most common:
There are many sources for existing audio, such as clip media CDs. Rather than searching existing sources, it’s sometimes better to hire a professional musician or narrator to provide exactly what you need. This is also true for customized graphics or photographs versus clip art. Although in the short term hiring someone to create sound or art for you might mean a bigger investment, it’s often worth it. Consider you’re likely to get the perfect match for your message compared to something you find that’s close enough, but not quite right. Also, you have direct contact with the artist, so you can resolve copyright issues at the start. Finally, by customizing your audio or graphics and purchasing exclusive rights, you don’t risk another company using your art. Several potential problems arise when multiple parties use the same image or sound. Some other company’s product or message could reflect poorly on yours; its website could be more popular than yours; or an image could become overused, making everyone’s use look unoriginal and cliché.
. MP3 . WAV . AIF (also called AIFF) . AU
People often want to know which format is best. In general, it doesn’t matter. You should simply start with the best quality sound possible. Between AIF and WAV, there’s no inherent quality difference. A high-quality AIF file is identical to a high-quality WAV file. The AU format is compressed at a low quality, so you probably don’t want to use that format. MP3 files have some compression, so those files are not optimal, but they are some of the most common. However, when MP3s have low compression, the quality remains high. Plus, the MP3 might have been optimally compressed, and, as you see in this hour, Flash doesn’t recompress it. There are two main reasons to use MP3s: . Your only source is an MP3 file. . You believe the MP3 file you have has already been optimally compressed.
MP3s don’t get any worse after you bring them into Flash, but they certainly can’t get any better. What’s more, some MP3s aren’t good to begin with. If you can, we recommend avoiding MP3s as source files unless they’re all you have or you’re satisfied with their current quality. You learn more about digital audio later this hour in “Digital Audio Fundamentals.” For now, it’s enough to know that four sound formats can be imported into Flash. You can also import other audio formats such as ASND or Quicktime (if it is installed on your machine). What about songs on audio CDs? CD audio tracks aren’t in WAV, AIF, AU, or MP3 format, so you can’t use them directly. Luckily, most sound-editing software—as well as Apple’s excellent, free product iTunes—provides the ability to extract music from a CD and save it in WAV or AIF format. Beware, significant copyright infringement concerns arise when you use audio from a published CD. Plus, many CDs and digital music files you download incorporate Digital
From the Library of Lee Bogdanoff
Importing Sounds
231
Rights Management (DRM) technology that make them difficult or impossible to copy. Some CDs don’t even play in your CD player. Fortunately, you can usually use sound in your animation without worrying about all these details, as you see in the next task. The process of importing sounds into Flash is simple. Follow these steps: 1. In a new file, select File, Import, Import to Library, and then select an audio file to import. In Windows, you are likely to find a few WAV files in the folder C:\Windows\Media or My Documents\My Music, or you can search for *.wav and *.mp3; Macintosh (Mac) users can use Find for Files of Type: Sound. You can filter the files shown in the Import dialog box by setting the Files of Type drop-down list to All Sound Formats, as shown in Figure 13.1. If you simply can’t find any audio files, you can download some from the publisher’s website.
TRY IT YOURSELF ▼ Import a Sound
FIGURE 13.1 When importing audio or any media type, you can filter the types of files listed to include only the formats you are seeking.
2. After you select an audio file and click OK in the Import dialog box, you don’t see anything on the Stage or Timeline. However, the sound has been imported and now resides in the Library. Open the Library window by pressing Ctrl+L to see it. Now that the movie contains the sound file, you can use the sound. 3. Although we’re not covering how to use sounds in depth until the next section, it’s easy. There are two basic ways to use the sound in a
From the Library of Lee Bogdanoff
232
▼ TRY IT YOURSELF Import a Sound
HOUR 13: Including Sound in Animations
keyframe. One way is to drag the sound from the Library window onto the Stage. This method requires an editable frame, which is located in an unlocked layer marked as editable with a pencil and with the current-frame marker in a non-tweened frame. The other method requires you to select a keyframe by clicking under 1 in the Timeline, and then in the Properties panel, select the sound you imported from the dropdown list, as shown in Figure 13.2. This list displays all the sounds previously imported into the movie. In our example, we import a sound named Ooooh.wav. 4. Test the movie, and you should hear the sound. Of course, your computer speakers and sound card must be functioning.
FIGURE 13.2 When a keyframe is selected, the imported sound appears in both the Library and the Properties panel.
Using Sounds Now that you’ve imported sounds into a movie, you need to make them play at the correct time. Without using ActionScript, the one place you can use sounds in Flash is in keyframes. With ActionScript, you can add sounds dynamically by using the Sound object, for which we provide the starter code after this hour’s “Summary” section. If you want a sound to play whenever the user places his or her cursor over a button, you still need to place the sound in a keyframe; it’s just a keyframe in the button. (Never fear, we get to buttons in Hour 16, “Basic Interactivity.”)
From the Library of Lee Bogdanoff
Using Sounds
233
Knowing that sounds go in keyframes is fine, but you need a way to put them there. When you select a keyframe, the Properties panel provides a way to control what sounds play when you reach the selected keyframe. Flash provides other clues for you to see where sounds have been placed. For example, if your Timeline is long enough, you see a waveform or a visual representation of a sound for the sound being used, as shown in Figure 13.3. FIGURE 13.3 The waveform is displayed in the Timeline. This is helpful when you’re trying to synchronize images with specific parts of sound.
Using the Properties panel is the best way to see which sounds have been added to which keyframes. Like any other panel, the Properties panel displays only the sound used in the selected keyframe. Misreading this panel is easy because it changes when you deselect keyframes. Figure 13.4 looks almost identical to Figure 13.3. However, in Figure 13.4, the Properties panel shows no sound is being used. When you look closely at the Timeline, you see a waveform is displayed, but no keyframe is selected. Therefore, it’s necessary to look at the Properties panel after you’ve selected a particular keyframe.
Sync Settings When you have the Properties panel reflecting sound for the intended keyframe, you can decide exactly how the sound should play. The most fundamental choice you need to make is the Sync setting. This controls exactly how a particular instance of the sound plays or, more specifically, the priority of the sound compared to the visual elements in the animation. Be-
From the Library of Lee Bogdanoff
234
HOUR 13: Including Sound in Animations
FIGURE 13.4 The Properties panel can be confusing; it only displays or enables you to specify sounds when a keyframe is currently selected. The keyframe isn’t currently selected, so the Properties panel displays nothing.
fore you try out the Sync settings, see the following list and Figure 13.5 for an explanation of each: FIGURE 13.5 For each instance of a sound, you must select a Sync setting via the Properties panel.
. Event—This setting should be your default choice, especially for sound effects and other incidental sounds. When Event is chosen, sounds start to play when the keyframe is reached and keep playing until the sound is done. Event sounds might not coincide with visual elements the same way on everyone’s machine. Sounds don’t play
From the Library of Lee Bogdanoff
Using Sounds
235
more slowly or quickly because that would make them sound odd, but a machine with slower graphics performance might take longer to display visual elements. Suppose you have a 1-second sound set to Event, and your frame rate is 12 fps. You would expect that during the sound, 12 frames would be displayed, but a slow machine might display only 6 fps during that 1 second. In either case, the sound finishes 1 second later, as you would expect, but the number of frames displayed can vary. . Start—This setting is almost the same as Event, except that multiple instances of the same sound are prevented. With Event, a sound can be layered on top of itself, similar to singing a round. Start, on the other hand, plays a sound if it’s not already playing. . Stop—This setting is for when you want a specified sound to stop playing. Say you import a sound called Background Music, and make it start playing in the first keyframe of one layer. Then, you import another sound called Narration and make it start playing in the first keyframe of another layer. In Frame 10, you place another keyframe with the same sound (Background Music) set to Stop, so that sound stops. Both sounds start at the beginning, but on Frame 10 the background music stops and the narration continues to play. This is a bit strange because normally you use the Properties panel to specify the sound you want to play where here you specify the sound you don’t want to play. Think of Stop as “Stop this sound if it’s playing.” . Stream—This setting causes the sound to remain perfectly synchronized with the Timeline. Because you can’t have sounds playing slowly if the user’s machine can’t draw frames quickly enough, this setting forces Flash to skip frames to keep up. Stream sounds start playing when the keyframe is reached and continue to play as long as space is available in the Timeline. In other words, if your sound is 3 seconds long and you’re playing at 12 fps, the Timeline has to be at least 36 frames; otherwise, part of the sound is never reached. You can compare the Stream setting to a Graphic Symbol’s behavior. The benefit of the Stream setting is the synchronization is always the same. If in this case you place a graphic in Frame 12, it coincides perfectly with the first second of your sound. Remember when you’re using Stream, you have to ensure enough frames are in the Timeline to accommodate the length of the sound. Finally, you preview Stream sounds as you scrub, thus making the process of synchronizing audio to images possible.
The decision as to which Sync setting to use isn’t terribly difficult. Event should be used for any short incidental sounds, such as rollover sounds. We
From the Library of Lee Bogdanoff
236
HOUR 13: Including Sound in Animations
NOTE
suggest Event for all sounds that don’t require critical synchronization. Background music that plays and loops doesn’t need to be synchronized, so you should use Event for it. Start is a perfectly good alternative to Event because it’s the same, but it prevents the same sound from layering on itself. For example, suppose you have a row of five buttons. If each button has the same rollover sound and the user quickly moves across all five, an Event sound plays once for each button. If the sounds are short enough, this is probably appropriate. However, if the sounds are quite long, they become discordant. If you use the Start Sync setting, only one instance of the sound plays at a time, regardless of how fast the user moves his or her mouse. Event can be a better choice than Start when a little bit of overlap is okay. Conversely, say you want to hear a smack sound effect every time a ball bounces on the ground. If you choose Event, you hear a smack for each bounce, even if the ball bounces a second time before the first sound finishes. In any event, Start and Event are good for the majority of sounds you play.
Rollover Sound Rollover is when the user places his or her cursor over a button, so a rollover sound is a sound that plays when the user rolls over a button.
The Stop Sync setting is powerful. It gives you a way to stop specific sounds. Using this method can be a tricky because it stops only one sound per keyframe. Depending on the situation, this might be appropriate. If you’re giving the user the ability to get several sounds at once, you want to learn about Stop All Sounds. Suppose you have one sound playing in the background, and when a tween starts, you want a special sound effect to play and keep playing until the tween ends. You can put the background sound in an early keyframe, and then in the first keyframe of the tween, place the sound effect and set its Sync setting to Event or Start. In the last frame of the tween, you can use the same sound effect but with the Stop Sync setting. This way, the sound effect stops at the end of the tween, but the background sound continues. Finally, Stream is good for one thing: synchronizing graphics with sound. This is especially useful for character animation where you want a character’s lips to synchronize with its voice. When trying to synchronize sounds with images, you can use the scrub technique; if you use Stream sounds, you can hear the sound as you scrub. Because Stream sounds effectively lock themselves to the Timeline, you probably don’t want to change the movie’s frame rate. For example, a 3-second sound takes 36 frames at 12 fps. If you do some work and then change the frame rate to 24 fps, the same 3-second sound spans 72 frames! Flash automatically spreads the Stream sound out so it takes 3 seconds when you change the frame rate, but Flash doesn’t change your graphics, which now plays in 1.5 seconds. See Figure 13.6 for a before-and-after example of changing the frame rate after an animation is built.
From the Library of Lee Bogdanoff
Using Sounds
237
FIGURE 13.6 The same animation and sound are shown with frame rates of 18 fps (top) and 6 fps (bottom). Notice keyframes and tweening are not affected, but the sound uses less of the Timeline when the Timeline is advancing at 6 fps. The short silence at the start of this sound means users don’t hear anything until a few frames of the animation have played.
In spite of this issue, you should stick with a frame rate. Stream sounds remain pretty appealing. However, on slower-performing machines, frames are skipped to make sure a stream sound stays synchronized. It’s often more important that every frame of your animation appears even if it means the sounds might drift out of synchronization. Use Stream only when the synchronization is critical, and you don’t mind dropping frames. Otherwise, use Event or Start.
Effect Settings The Properties panel provides some fancy effects you can apply to the volume of a selected sound. The drop-down list next to Effect includes effects such as Fade In, Fade Out, Fade from Left to Right, and Fade from Right to Left. To understand and customize these settings further, you can either select Custom from the list or click the Edit button on the Properties panel to access the Edit Envelope dialog box, which is shown in Figure 13.7. Time in marker
FIGURE 13.7 The Edit Envelope dialog enables you to modify the volume of the sound as it plays through the left and right channels.
Envelope lines
Right channel
Left channel Display units Stop/Play
Envelope handles
Zoom in/out
From the Library of Lee Bogdanoff
238
HOUR 13: Including Sound in Animations
Additional details for the Effect settings are . Left Channel/Right Channel—This option displays different wave forms if your original sound was stereo. If you use only mono sounds, you still get the left and right channels, so you can create panning effects. In the case of mono, the same sounds come out of each speaker, but you can modify the volume of each. . Envelope lines—These indicate the volume level at any particular time in the sound. When the line is at the top, the sound plays at full 100% volume. Some audio tools are different because they use the middle to indicate 100% and anything higher to indicate amplified or boosted sound, but this is not the case in Flash. As the envelope line is getting higher when you move to the right, the volume is increasing. . Envelope handles—These are like keyframes within sound. If you want the envelope lines, which indicate volume, to change direction, you need to insert a handle. All you need to do is click anywhere on a line, and a handle is inserted. No matter which channel you click, a matching handle is placed in the other channel. A handle in one channel must match the moment in time (left to right) of the handle in the other channel. However, the volume (height) can vary between the two. . Time In Marker—This marker enables you to establish the starting point of a sound. You’re effectively trimming the extra sound or silence at the beginning of the sound file. You’re not telling the sound to start any later, but the sound you hear begins wherever the Time In marker is placed. . Time Out Marker—This marker enables you to trim extra sound off the end of a sound file. Often, you have a moment of silence at the end of a sound file, and even if you don’t hear anything, it adds to the file size. You can get rid of it by moving the Time Out marker to the left. You don’t actually destroy the source sound in your Library, but when you export the movie, the unused portions of the sound isn’t used so your file stays small. . Stop/Play—This option enables you to preview all the settings you’ve made. This is important because although the waveform can enable you to visualize a sound, you ultimately want to judge the effect of a sound with your ears. . Zoom In/Out—This option enables you to zoom in for a close up of the current window to control precisely how you place the Time In/Out markers or envelope handles or zoom out so the entire sound fits in the current window.
From the Library of Lee Bogdanoff
Using Sounds
239
. Display Units (Time or Frames)—This option simply changes the units displayed in the center portion from time units (seconds) to frame units. Time is not as useful as Frames when you want to match sound to a particular frame where something visual occurs. If the display shows a peak in the music at 1 second, you have to use frame rate to calculate exactly which frame that translates to. With the display set to Frames, Flash does the calculations for you.
Panning is an effect that makes sound seem to move from left to right or right to left. It’s a trick in which the volume for one channel (left or right) is increased while the volume for the other channel is decreased. When combined with a graphic moving in the same direction, this technique can be effective. Imagine, for example, a car moving across the screen at the same time the audio pans in the same direction. Despite the details in the Edit Envelope dialog box, you only have two basic ways to use it: You can either use a preset effect or make your own. You can start with a preset, such as Fade In, and then make modifications to it, essentially making a custom effect based on a preset. Use the effects in any way you think appropriate. Listen to the effect after each change by clicking the Play button. Nothing you do here affects the master sound in your Library. You can use the same sound several times throughout a movie with different effects in each instance. One of the most important things to remember is the Time In and Time Out markers can save file size. Only the sounds and portions of sounds actually used are exported when you publish a movie. Unused sounds in the Library and portions trimmed from the beginning or end of a sound are not exported. Trimming a few seconds off the end of a sound can mean many seconds, or even minutes, of download time for your users. Also, changing the volume of a sound has no impact on file size, so setting the envelope lines to the lowest level makes no sense.
Loop Settings The Properties panel has an option that enables you to specify how many times a sound repeats or to have the sound loop forever. Some sounds loop better than others. Basically, a sound that loops well ends the same way it starts. There’s an art to making sounds loop. Although importing a large song and using the Time In and Time Out markers to establish a nice looping sound is possible, it isn’t easy. More likely, you have to find a sound already prepared by an audio engineer. A profes-
From the Library of Lee Bogdanoff
240
HOUR 13: Including Sound in Animations
sionally prepared sound can loop so seamlessly that you can listen to it and not even notice it’s looping; it sounds like it’s endless. You get to explore looping sounds as well as other effects in the next task.
▼ TRY IT YOURSELF Add Sounds and Sound Effects to an Animation TIP
Testing Your Movie Instead of using the Test Movie command, you’ve tested this movie by clicking the Enter or Return key, and you can’t get the sound to stop! It’s driving you crazy. To stop the sound, choose Control, Mute Sounds. This stops the looping sound. Then, choose Control, Mute Sounds again to uncheck it, so you can test it the right way using Control, Test Movie.
In this task, you add sounds to a sample movie. Follow these steps: 1. Download the file keyframing.fla from the publisher’s website. In Flash, open this file, and then press Enter to watch the animation. 2. Open the Library for the keyframing.fla file by selecting Window, Library (or press Ctrl+L). 3. Now these sounds are available to your file, but you need to put them into keyframes. First, you need to make a new layer to contain the sounds; select Insert, Timeline, Layer. Don’t worry if Flash puts the new layer under all the others because it doesn’t matter where it appears. Name this layer Background Music by double-clicking on its name and typing the new name. 4. Select the first frame of the Background Music layer, and look at the Properties panel. From the Sound drop-down list, select Visor Hum Loop. To make this sound loop continuously, change the drop-down list from Repeat to Loop, as shown in Figure 13.8.
FIGURE 13.8 Flash can loop a sound indefinitely with the Loop setting.
5. Select Control, Test Movie. The sound loops nicely, and it adds a bit of drama to the movie. In the following steps, you add some incidental sound effects. 6. Select Insert, Timeline, Layer, and name the layer Sound Effects. You’re going to insert a sound effect when the “CS4” is rotated to the
From the Library of Lee Bogdanoff
Controlling Quality and File Size
left, which happens at Frame 14. In Frame 14 of Sound Effects, select Insert, Timeline, Keyframe (or press F6). 7. Select the keyframe you inserted, and from the Properties panel, select Smack from the Sound drop-down list. Leave the default settings, Event Sync and Repeat x 1, because you don’t want this sound to loop.
241
TRY IT YOURSELF ▼ Add Sounds and Sound Effects to an Animation
8. Select Control, Test Movie. The Smack effect is good, but the humming continues throughout the whole movie. 9. To stop the hum, select Frame 30 of the Background Music layer, and select Insert, Keyframe (or press F6). Make sure you’re selecting only this keyframe, and then use the Properties panel to insert the Visor Hum Loop again. This time select the Stop Sync setting to cause any instances of this sound to stop. You can use Test Movie again to see and hear the results. 10. Finally, add a sound effect for when the pink sparkle animates. At Frame 30 of the Sound Effects layer, select Insert, Keyframe (or press F6), select only this keyframe, and then insert the Beam Scan sound. Use Test Movie, and it should be more dynamic than the silent version. By the way, these sounds only add about 3 kilobytes [KB] to the total file size! 11. You can try removing the excess silence at the start of the Beam Scan sound. Select Frame 30 in the Sound Effects layer, and click on the Pencil button to the right of Effect on the Properties panel. Then, you can cut sound off the beginning by dragging the Time In marker in the Edit Envelope dialog box (refer to Figure 13.7).
Controlling Quality and File Size Now that you know how to incorporate sound in a movie, it’s time to talk about optimizing it for export. A direct relationship exists between quality and file size. If you want the best-quality sound, the file size grows. Conversely, small file size means lower sound quality. You ultimately need to make a decision about how to balance this tradeoff. Is a high-quality sound important enough to make your audience sit through an extended download time? Is a speedy download worth the sacrifice in quality? You should be deliberate in your decision-making process to end up with the best compromise possible. While exploring this topic further, we first cover some digital audio fundamentals, and then you learn how to apply this knowledge to Flash’s compression settings.
From the Library of Lee Bogdanoff
242
HOUR 13: Including Sound in Animations
Digital Audio Fundamentals NOTE
The Mystery of the Deep Voice Digital audio tape (DAT) uses 48K/16-bit audio. On several occasions, a professional audio person supplies audio in this format, and it’s a problem in Flash. You can tell you’ve imported 48K audio when you play back the movie. The sounds are slowed down, so they sound an octave deeper. They’re actually playing slower at 44,100 samples per second instead of 48,000. Flash tops out at 44,100, so you need to resample using an audio editor before you import larger samples into Flash.
Earlier this hour we suggested two sensible ways to use audio in Flash. You can either import high-quality audio (.wav or .aif), and enable Flash to compress it when you publish or import an MP3, which, by definition, is already compressed. If you take the route of importing high-quality sounds, you want to know a few basics about .wav and .aif sounds. The two primary factors that affect the file size are sampling rate (that is, how many pieces of sound are saved per second) and bit dept, (or how much detail is saved in each of those samples). CDs have 44,100 samples per second (often expressed as 44K) and 16-bit depth (meaning 65,536 “shades” of sound). So, a 44K/16-bit audio file is good. If you listen to an 8-bit sound file, it has a much lower dynamic range (from high to low). The quality loss when you listen to files with a lower frequency rate (such as 22K, 11K, or lower), are not quite as obvious, but they tend to sound hollow. A longer sound is bigger and stereo sounds are twice the size of mono. If you want to start with MP3s, bit rate is the one factor to consider. A 1-second MP3 file that’s 256 kilobits (Kb) has a bit rate of 256 kilobits per second (Kbps). MP3s can have bit rates up to 320Kbps. It’s possible to have a variable bit rate (VBR) MP3 instead of a constant bit rate (CBR) MP3. A VBR is useful because portions of the sound with more detail use a higher bit rate (up to 320Kb), while other places in the sound might not need as much depth. A VBR MP3 often sounds better than an equivalent-sized CBR MP3 because more detail is where it’s needed. In fact, the average bit rate is more important than simply the bit rate. This discussion leaves out exactly how your audio compression tool applies the MP3 algorithm. The software cuts out details from the sound where your ear is least likely to notice. In the end, it’s basically magic because you’re left with a small sound file that sounds almost as good as the original. Back to the world of Flash, the easiest way to approach audio is to bring in an uncompressed audio file and enable Flash to apply MP3 compression upon publishing the .swf. That is, you can bring in a .wav, and Flash internally converts it to an MP3. Flash’s MP3 compression is not VBR, so it’s possible to create a better sounding small MP3 file outside of Flash. If you import an MP3, Flash doesn’t recompress it unless you override the default settings. In the next section, you see exactly how to control Flash’s export settings. This brief overview of digital audio should give you enough information to analyze your source audio files before you import them into Flash.
From the Library of Lee Bogdanoff
Controlling Quality and File Size
243
Export Settings All this theory is interesting, but how do you apply it to your sounds? You have two places in Flash where you can specify quality and compression settings: the Sound Properties dialog box and the Flash tab of the Publish Settings dialog box. The Sound Properties dialog box affects settings that are unique to the individual sound, and the Publish Settings dialog box affects all sounds globally.
Global Publish Settings To set the default sound format for every sound in a Flash movie, you select File, Publish Settings. Make sure that under the Formats tab you’ve checked Flash (.swf), and then click the Flash tab (see Figure 13.9). FIGURE 13.9 The Flash tab of the Publish Settings dialog box provides a way to set the default sound settings globally for an entire file.
You see two different sound settings in this dialog box: Audio Stream and Audio Event. Audio Stream affects sound instances that use the Stream Sync setting, whereas Audio Event affects sounds that use the Event or Start Sync setting. (The Audio Stream setting also affects the audio from videos you import, as you learn in Hour 18, “Using Components.”) If you click the Set button, you can see all the options available, as shown in Figure 13.10.
From the Library of Lee Bogdanoff
244
HOUR 13: Including Sound in Animations
FIGURE 13.10 You can set the type of compression for all sounds in a movie in the Publish Settings dialog box.
The Set button located next to both Stream and Event enables you to set the compression for sounds used each way separately. Sound compression provides five choices. With the exception of when you use Raw, which is really no compression, you need to specify additional options for the compression you choose. For example, you can’t say, “Compress using MP3.” You have to specify how much MP3 compression. Because each option has its own unique characteristics, let’s look at each in detail: . ADPCM—This option is almost the same as Raw (discussed shortly), except you can optionally choose a different sample rate than your original sound. You usually want to lower the sample rate because increasing it makes the file bigger without improving the sound. You can also convert stereo to mono. ADPCM compression is coarse and never sounds as good as an MP3 compression. The only reason to use this option rather than MP3 is when you have to deliver a movie to Flash Player 3. . Disable—This option is simple. It tells Flash not to export any sounds. When you select Disable from the drop-down list, there are no other options to set. . MP3—This option provides great compression. When exporting, always use the Quality setting Best because it doesn’t affect the file size but improves quality. The bit rate is simply how much data per second you’re letting the MP3 file take. The higher the number, the better. In theory, a bit rate of 56Kbps is maintainable on a 56Kbps modem; however, reality is sometimes different from theory because other factors can slow the download performance. We explore more issues related to downloading in Hour 22, “Minimizing File Size.” You have to test this and keep lowering the bit rate until just before the sound becomes unacceptable. You can judge the result by testing the movie or, as you see in the next section, “Individual Export Settings,” you can test each sound individually.
From the Library of Lee Bogdanoff
Controlling Quality and File Size
245
. Raw—This option leaves your sounds intact, although you do need to specify a sample rate. Frequency rate Raw is useful while you’re testing because you don’t have to sit through the time Flash takes to compress your sounds every time you use Test Movie. Remember to set it back later, or your files are huge. . Speech Compression—This setting is optimized for the human voice. In practice, however, you should always compare the quality and file size effects of speech compression to MP3 because the best choice varies case-by-case.
You’ve learned how to set the default sound settings for both Stream and Event sounds from the Publish Settings dialog box. It’s important to understand the default publish setting affects only uncompressed (that is, nonMP3) sounds you’ve imported. You see in the next section how to set sound settings for each imported sound individually. Imported uncompressed sounds (.aif and .wav), by default, use the settings you make in the Publish settings. Imported compressed sounds (MP3) don’t recompress and, therefore, don’t follow the Publish settings. One exception is when you select the Override Sound Settings check box in the Publish settings. Checking this box causes the settings you apply here to impose on all sounds in the movie, regardless of their individual export settings. Override Sound Settings can be useful when you want to publish a single copy for a special purpose. Say you want a copy to demonstrate from your hard drive. Download time isn’t an issue, so you could make all the sounds play at their highest quality (Raw).
Individual Export Settings In addition to a movie’s globally specified sound settings, each sound item in the Library can have its own individual settings, which applies to every instance of that sound. Double-click a sound in the Library (or select Properties from the Library’s option menu), and you see the Sound Properties dialog box, as shown in Figure 13.11. This dialog box is similar to the Bitmap Properties dialog box you studied in Hour 3. In the same way that individual imported bitmaps can have their own sets of compression settings, so, too, can imported audio. The choice of settings is identical to the settings in the Publish Settings dialog box. However, in this dialog box, for each change you make, you’re given details of the effect on file size and quality. Under the Compression drop-
From the Library of Lee Bogdanoff
246
HOUR 13: Including Sound in Animations
FIGURE 13.11 The Sound Properties dialog box provides individual control of exactly how a sound is exported, regardless of the default Publish settings.
down box, you can see how much the file compresses for each change. If you click the Test button, not only does Flash perform the compression you specified, but the sound starts playing, and you can hear how it sounds. This is similar to the Test button for bitmaps; although with bitmaps, you judge the visual effect. This gives you all the information you need to decide what settings to use. You can listen to the sound while assessing the effect on file size. We translate a couple options you see depending on what sounds you import. When you import an uncompressed format (.aif or .wav), you see the Default option, meaning Flash uses the settings you specify in the Publish Settings dialog box. If you import a compressed MP3 that’s 160Kbps or lower, you see the Use Imported MP3 Quality check box, meaning don’t recompress. You can uncheck this option, but only do so if you’re in a fix. It’s better to go back and make another MP3 from the original sound than to recompress inside Flash. If you want to use an MP3 at a rate higher than 160Kbps (as high as 320Kbps), then you must leave the file outside of your Flash movie and use ActionScript to play that external file. The code for this appears at the end of this hour. The Sound Properties dialog box also gives you the same ability to replace sounds as you have for replacing bitmaps. For instance, if you’ve edited a sound in a sound editor and you want to import the replacement sound, click the Update button. If the file has moved, you are asked to point to the new location. If you want to replace a sound without taking the trouble of reassigning every keyframe where you’ve already used the sound, click Import, and select the new file when prompted.
From the Library of Lee Bogdanoff
Controlling Quality and File Size
247
Tricks for Efficiency Obviously, the best way to reduce file size with respect to audio is to avoid using audio. Although this might sound facetious, it’s worth consideration. You should force yourself to consider each sound you use, and if it’s not adding something to your file, it’s most certainly distracting (especially during download) because it’s adding to the file size. Gratuitous sound effects are worse than gratuitous visual effects because sounds add significantly more to the file size. Be extra critical when asking yourself whether a particular sound is really necessary. After you’ve decided that a sound is, indeed, necessary, you still have ways to reduce the sound’s impact on the file size. The best way is to trim any silence at the beginning or end of the audio. Silence adds to the file size. Ideally, you should do this before importing the audio into Flash, but you can also do it for each instance through the Edit Envelope dialog box (refer to Figure 13.7). Another great way to reduce file size is to use a short looping sound instead of a long linear sound. Of course, it’s possible to select a loop that can become monotonous, but you might be surprised how much mileage you can get from one simple loop. Sprinkle a few incidental Event sounds that are independent of the loop, and the effect can often sound very interesting. Probably the most subjective question is “Which level of compression is appropriate?” We can make a few suggestions. First, a common misconception is that audio containing voice can withstand the most compression, whereas music can’t. This is just plain false! A better generalization would be to say that sounds of natural items, like acoustic instruments and voices, are best kept at a high quality, whereas sounds of synthetic items, such as a distorted electric guitar and synthesized keyboards, are likely to be perfectly acceptable at a lower quality. This is true because any sound on the computer is artificial. You’re trying to make the user believe the sound is one thing or another when, in fact, it’s just electronic data. When you attempt to simulate something natural, such as a voice or an acoustic instrument, your audience has good recollection of what that sound is supposed to sound like, and they notice if it doesn’t sound right. On the other hand, sounds from an electric guitar, for example, can be distorted and still sound perfect. (Heavy metal connoisseurs might disagree, but you get the idea.) Ultimately, you need to test each compression setting to hear how it sounds, but remember it’s easier to notice something’s wrong when a natural sound gets distorted.
From the Library of Lee Bogdanoff
248
HOUR 13: Including Sound in Animations
One other fact: If everything else is kept equal, a mono sound appears “cleaner” than a stereo sound. This doesn’t mean you shouldn’t use stereo. To maintain quality in a stereo sound, you usually can’t compress as much; not to mention that stereo sounds are twice as big as mono sounds. Therefore, be absolutely sure you need stereo sound. Remember, you can still pan the left and right channels without a stereo sound.
Summary Flash supports audio elegantly. Including audio in a movie is a simple process of importing the sound and then deciding in which keyframe you want the audio to play. Many options are available on how the audio plays—for example, whether it plays and finishes naturally using the Event Sync setting or whether you want it to lock itself to the Timeline so images remain synchronized no matter what the Stream Sync setting. You can also apply sophisticated envelope controls for each instance of a sound used. Because the effect on file size is the biggest consequence of using audio, Flash provides a variety of compression technologies and settings to individually or globally specify the kind of compression to use. In general, when considering file size, you find MP3 or Speech to be the best quality for almost any sound you want to use, but other alternatives exist. If nothing else, try to be deliberate and restrained about adding audio to your movies. Your users will thank you.
Q&A Q. I placed a long-running sound in the first frame of my movie. When I test the movie, the sound only plays for the first few seconds and then repeats. Why? A. You’ve probably set the Sync setting for the keyframe on the Properties panel to Stream and haven’t extended the Timeline long enough. If your sound is 10 seconds long and you’re playing at 12 fps with Stream selected, you want to make sure 120 frames are available in the layer of the Timeline in which you placed the sound. An Event sound doesn’t have this restriction or synchronization behavior. Also, looping might occur simply because your movie loops when you test it. While you’re testing a movie, you can disable looping by selecting Control, Loop.
From the Library of Lee Bogdanoff
Summary
249
Q. I put a sound in the first frame of my movie, but when I click Play, I don’t hear anything. I verified that my speakers are plugged in and that my computer sound level is cranked. What else could it be? A. Control, Test Movie is always the best option for visualizing exactly what your users see and hear. However, even Play should let you preview the sound. You might check two things: First, Mute Sounds under the Control menu should be unchecked, and the envelope settings for the sound instance should not be two horizontal lines at the lowest sound level. Second, you might check the original sound you imported to make sure it’s not just silence. Q. I imported and placed in a keyframe a song I ripped from my band’s CD; now, every time I test the movie my computer freezes for a long time. Is there any way to speed this up? A. Selecting short, punk rock songs is one way. Seriously, go into the Publish settings, select Raw for both Stream and Event, and remember to select Override Sound Settings. It doesn’t perform the compression (whattakes forever) every time you publish. Remember to change it back before you’re ready to publish for real. Q. I imported an MP3 file that was only 61KB, but when I export the movie, it becomes 900KB. I’m sure my graphics aren’t that big because when I remove the sound, the file goes down to 5KB. What could possibly be wrong? A. Most likely you’re resampling the sound as Raw, and Flash is converting the sound into the size it would be as an uncompressed sound. Check the Publish Settings dialog box in Flash and confirm that you don’t have Override Sound Settings selected. Then, inspect the Sound Properties dialog box for the Library item of your imported sound, and confirm the MP3 settings match the original attributes of your file (shown near where the date and file location are displayed). Q. Where is the starter ActionScript code for playing an external MP3 file that you promised? A. Put an MP3 file (named in this case music.mp3) in the same directory as your .swf. Remember to upload it when you post it on the Web. Then, if your publish settings target ActionScript 2.0, put the following code in the frame where you want the sound to start playing: my_sound = new Sound(); my_sound.loadSound(“music.mp3”, true);
From the Library of Lee Bogdanoff
250
HOUR 13: Including Sound in Animations
For ActionScript 3.0, use this code: import flash.media.Sound; import flash.net.URLRequest; var my_sound:Sound= new Sound(); my_sound.load(new URLRequest(“file.mp3”)); my_sound.play();
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. Which is a better-quality audio format to use for original files—AIF or WAV? A. AIF because it was developed for the Mac. B. WAV because it was developed more recently. C. Neither because they can both be the same quality. 2. Where do you place sounds in order to hear them in the final movie? A. In the Library, in symbols, or in keyframes. B. In keyframes, no matter where they are. C. In the sound layer. 3. After importing a few sounds, you have to wait longer every time you use Test Movie. What is causing this phenomenon, and what can you do to fix it? A. You forgot to select Fast Export when importing the sounds, so you need to reimport and pick that option. B. You can only hear the sounds when you select Control, Play. Don’t use Test Movie if you have sounds. C. Sounds can take a long time to compress. Temporarily change the Publish Settings dialog box settings to Raw, and select Override Sound Settings to save time during development.
From the Library of Lee Bogdanoff
Workshop
251
Quiz Answers 1. C. There’s nothing inherently better about AIF or WAV—either can be high quality or low quality. 2. B. Sounds are placed into keyframes, either via the Properties panel when a keyframe is selected or by dragging the sound right onto the Stage from the Library. 3. C. This tip is a bit esoteric but no doubt saves you a lot of time. Remember to go back to your normal Publish Settings dialog box settings when you’re ready to deliver.
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 14 Nesting Animations in Movie Clip and Graphic Symbols
When you see what Movie Clip symbols can do, you’ll be blown away. Inside a Movie Clip, you can create an animation, and then in the main movie, you can animate an instance of that clip. For example, you can create a rotating wheel clip, and then animate the rotating wheel, so it not only rotates, but moves across the screen as well. Symbols should not be new to you. You learned quite a bit about them in Hour 4, “Staying Organized with the Library and Layers.” Probably the biggest benefit of symbols is that while you keep one master version in the Library, you can use as many instances of the symbol as you like throughout a movie with no significant impact on file size. You should also recall from Hour 8, “Using Motion Tweens to Animate,” that the object you tween must be an instance of a symbol. You’ve probably also noticed that any time you create a symbol, Flash gives you the option to set the symbol behavior as Movie Clip, Button, or Graphic. Later you learn all about buttons, but this hour you learn as much as you can about animating with Movie Clip and Graphic symbols.
WHAT YOU’LL LEARN IN THIS HOUR: . Making and using nested clips . Working with Movie Clip’s independent Timeline . Differences between Movie Clip and Graphic symbols . Addressable movie clip instances
This hour doesn’t try to summarize all the uses for Movie Clips because there is simply too much to cover. The primary goal of this hour is for you to understand Movie Clips and how they compare to plain, old Graphic symbols.
Movie Clip Symbol Behavior Some people wrongly think that Graphic symbols are used only when the symbol contains a single frame, and Movie Clip symbols are used only when you have multiple frames. The differences go much deeper than that. You learn this hour that the best approach is to always use Movie Clips unless you have a reason to use Graphic symbols. First, both Movie Clips and
From the Library of Lee Bogdanoff
254
HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols
Graphic symbols can contain one or more frames. However, only Movie Clips automatically loop regardless of where you place instances of them. Here’s an example of how Movie Clips automatically loop: Say you make a Movie Clip of a wheel, depicted as a circle with lines for spokes. You can then use an instance of your Wheel symbol inside another Movie Clip called Rotating Wheel, where the Wheel symbol rotates. Then, you can create another Movie Clip that serves as the Car, which includes two instances of the Rotating Wheel symbol. Because the Rotating Wheel is a Movie Clip, the wheels rotate whether you put them on Stage or inside the Car movie clip. Finally, the Car symbol can be animated across the screen, and both wheels rotate the whole time. Don’t worry if this is confusing; you do a task to make it clear. Remember, you can use Movie Clips even when you don’t need multiple frames.
Creating Nested Movie Clips Making a Movie Clip is like making any symbol. In the following task, you first create an animation inside a Movie Clip.
▼ TRY IT YOURSELF Use a Movie Clip to Make a Rotating Wheel
FIGURE 14.1 Because it’s not symmetrical, this Wheel symbol is easy to notice when it’s rotating.
In this task, you nest a movie clip of a wheel inside a movie clip that becomes an animating wheel you can use anywhere you want. Follow these steps: 1. Draw a circle with a few lines crossing it. Make it any size you want because scale is a property you can modify at any time in Flash. Don’t make it perfectly symmetrical, so you are able to see it rotate, as in Figure 14.1. Select the entire shape, and then select Modify, Convert to Symbol (or press F8). Name the symbol Wheel, choose the Movie Clip behavior type. You might also need to change the Registration setting in this dialog; click on the center square of the Registration image. Click OK. You’re making a Movie Clip of the wheel spinning next, but you need an instance of the plain wheel first. As you probably remember, you can’t motion tween anything except symbol instances. 2. Select the onscreen instance of the Wheel symbol, and convert it to a symbol. Select Modify, Convert to Symbol (or press F8), name it Rotating Wheel, make sure you leave Movie Clip set as the behavior, and then click OK. You already had a symbol, but consider what converting to a symbol does: It takes what’s selected (in this case, the Wheel instance) and puts it into the Library. In step 1, you put a shape in the Library. In this step, you took an instance of the Wheel and put it inside the Rotating Wheel symbol.
From the Library of Lee Bogdanoff
Movie Clip Symbol Behavior
3. Go inside the master version of Rotating Wheel by double-clicking the instance onscreen. In the Edit Bar, you should see Scene 1: Rotating Wheel. Click on the Wheel to select the instance. You should see Instance of: Wheel in the Properties panel (as shown in Figure 14.2). This means that Rotating Wheel contains an instance of Wheel.
255
TRY IT YOURSELF ▼ Use a Movie Clip to Make a Rotating Wheel FIGURE 14.2 The Properties panel displays a selected symbol’s original name.
4. While inside Rotating Wheel, we do a simple motion tween of the Wheel instance. To do this, click in Frame 20, and insert a frame by pressing F5. Add motion tweening by choosing Insert, Motion Tween. Select the first keyframe, and from the Properties panel, set Rotate to 1, Direction to CW. 5. Go back up to the scene. You should see an instance of Rotating Wheel, although now it has a 20-frame rotation you can’t see. Use Test Movie to ensure that it rotates. 6. Create another instance of Rotating Wheel by either copying and pasting the instance onscreen or by dragging another instance from the Library. Position the two Rotating Wheel instances side-by-side, and then have some fun using the Brush tool to draw the car body. When you are done, select everything on the Stage, and convert it to a Movie Clip symbol called Car. 7. Insert a frame at Frame 30 in the main Timeline, and then choose Insert, Motion Tween. Move the instance of Car to the right side of the stage in Frame 30, and you should be able to see the car move when you scrub, just like any other motion tween. To see the wheels rotate, test the movie. Scrubbing only previews the animation across the Timeline in the current Movie Clip, not any nested Movie Clips. (Only Graphic symbols preview when you scrub.)
From the Library of Lee Bogdanoff
256
HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols
If you aren’t familiar with nesting symbols, the preceding task might have been a little confusing. (Review Hour 4 if necessary.) In the preceding task, you worked from the specific to the general. You made a Wheel symbol, and you made a Rotating Wheel symbol that contained the Wheel because you needed a symbol inside Rotating Wheel to do a motion tween. Then, you used two instances of Rotating Wheel in the creation of the Car symbol.
Comparing Movie Clip Symbols to Graphic Symbols It makes no difference whether your master symbol is a Movie Clip or a graphic. The symbol behavior affects only the default symbol behavior for instances dragged straight from the Library. What does matter is the symbol behavior of the instance on the Stage. If you drag a Movie Clip from the Library, it starts with the Movie Clip behavior, but you can change it for a given instance to Graphic by using the Properties panel, as shown in Figure 14.3. It’s the instance’s behavior that matters. Graphic instances that contain multiple frames have a few unique options, which you see in the Properties panel. When you select a symbol with the Graphic behavior, the Properties panel enables you to specify which frame within the symbol appears first. In addition, other options from the dropdown list provide a choice between Loop, Play Once, and Single Frame. By combining these settings, you can vary exactly how an instance with the Graphic behavior appears. FIGURE 14.3 An instance on the Stage, regardless of the master symbol’s default behavior, can have any behavior you select from the Properties panel.
From the Library of Lee Bogdanoff
Movie Clip Symbol Behavior
257
Suppose you have two instances of Rotating Wheel that use 20 frames for one rotation. You could use both instances as graphics and set both to Loop, but on one, you could set the first frame to 10. The two wheels would both rotate continuously, but they would be offset by 180 degrees. In fact, this an excellent exercise to try yourself. Briefly, here’s what to do: Double-click the Car movie clip so you can modify one of the two Rotating Wheel movie clips. Double-click one of the wheels. Select it, and in the Properties panel, change the behavior to Graphic in the drop-down list. Then, under the Looping section, change the value for First to 15. This starts the wheel rotation at the 15th frame rather than Frame 1. Now, you can test your movie and see the difference. If you compare the options in the Properties panel when a Movie Clip versus a Graphic is selected, you notice only one seemingly minor field for Instance Name. It isn’t minor at all, as you see later this hour in “Addressable Movie Clip Instances,” and again in Hour 16, “Basic Interactivity.” For now, all you need to know is you can name Movie Clip instances individually in the Properties panel. If the only difference was a few settings in the Properties panel, you could do exercises with Loop, Play Once, and Single Frame, and that would be the end of it. However, Graphic symbols differ in another major way. Multiframe Graphic symbols, even when set to Loop, are synchronized and need to match the duration of the Timeline in which you place them. For example, a 10-frame Graphic symbol placed in Frame 1 of a Timeline displays Frame 1 in Frame 1, Frame 2 in Frame 2, and so on. If you place this Graphic symbol in a Timeline that’s only five frames long, the instance of the symbol displays Frame 5 when it gets to Frame 5, but it goes no further. It’s locked to the Timeline where it’s used. It’s similar to sounds set to Stream, which you learned about in Hour 13, “Including Sound in Animations.” Movie Clip instances are independent of the Timeline where they’re used. They always play all their frames and loop. Think of a Movie Clip as marching to the beat of its own drummer. A 10-frame Movie Clip doesn’t care if it’s placed in a 10-frame timeline, 100 frames, or just one frame. It plays all its frames when it can, like Rotating Wheel used in creating the Car in this hour’s first task. Movie Clip behavior is like sounds with the Sync setting Event. The next task drives home the differences between Movie Clip and Graphic instances.
NOTE
Independent Timelines Don’t Mean Separate Frame Rates Just because a Movie Clip has an independent Timeline doesn’t mean you can change the frame rate. “Marching to the beat of its own drummer” doesn’t mean you can have independent frame rates. You get one frame rate for an entire movie. Some advanced tricks can simulate frame rate changes, but the fact remains there’s only one frame rate per movie.
From the Library of Lee Bogdanoff
258
▼ TRY IT YOURSELF Compare a Movie Clip Symbol to a Graphic Symbol
HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols
In this task, you see how Movie Clips loop independently of the Timeline in which they reside. Follow these steps: 1. In a new file, select Insert, New Symbol (or press Ctrl+F8), name the new symbol Numbers, select Movie Clip for the behavior, and then click OK. This takes you inside the master version of Numbers. 2. In Frame 1 of Numbers, use the Text tool and type 1 near the center of the screen. Insert a keyframe in Frame 2, and change the onscreen number to 2. Continue inserting keyframes and changing the contents to match the frame number all the way to Frame 10. 3. Return to the main scene, making sure you’re not still in Numbers. Drag an instance of Numbers onto the Stage from the Library. Select Control, Test Movie (or press Ctrl+Enter). Remember, using Test Movie is the only way to see Movie Clip animation. All 10 numbers appear in sequence, even though you used only one frame of the main Timeline. 4. Back in the scene, insert a frame (not a keyframe) in Frame 5. Click Frame 5, and then select Insert, Timeline, Frame (or press F5), which extends the life of this Timeline. Use Test Movie again, and you should see no change. 5. Drag another instance of the Numbers Movie Clip onto the Stage. Select this instance, and change the instance behavior to Graphic by accessing the Properties panel. With the instance still selected, make sure the Options drop-down list is set to Loop. Now, test the movie again. 6. The result is that only Frames 1 through 5 of the graphic instance are displayed while the Movie Clip continues to run. (If the movie is playing too fast, try a lower frame rate.) Back in the Timeline, try scrubbing back and forth in the main scene. Although the Graphic symbol shows only the first five frames (it has only 5 frames to live), it also gives you a good preview while scrubbing. 7. While you’re testing the movie, select Control, Stop. This stops the red current-frame marker from advancing, but notice the Movie Clip keeps playing. The graphic is locked to the Timeline into which it’s placed, whereas the Movie Clip plays independently.
There are a few additional points to notice in the preceding task. First, Movie Clips always loop. (There’s no Play Once option. In Hour 15, “Creating Special Effects,” you learn how to write a script that says Stop At The Last Frame.) Because of this, Movie Clips are sometimes extra work. Also, it
From the Library of Lee Bogdanoff
Movie Clip Symbol Behavior
259
might seem like a drag that only Graphic symbols are previewed when you scrub, but there’s good reason for this. Graphics are previewed because they’re locked to the Timeline, and therefore, Flash knows exactly how they play. Movie clips play at their own rate, and can be started or stopped any time through scripting. Therefore, Flash has no idea exactly how they play and can’t give you a preview. If nothing else, remember to always use Test Movie if you want to see what the user will see.
Using Movie Clips Generally, you should use Movie Clips for everything you can, even if it’s just a static (single-frame) graphic. However, there are some reasons to use Graphic symbols instead. Multiframe Graphic symbols are appropriate any time you need to preview while you’re working. The fact that Movie Clips don’t preview when you’re scrubbing can be a real hassle. For example, if you’re synchronizing lip movements in a character, you probably want to use multiframe Graphic symbols. Also, a Movie Clip’s automatic looping means that if you don’t want it to loop, you need to do more work—you need to put a script into the last frame to make it stop. Also, specifying a first frame by using multiframe Graphic symbols is so easy that it’s hard to resist this feature. Using scripting in Movie Clips to do this might be more complicated and require slightly more work, but it’s also more powerful, too). Although the Graphic symbols lock themselves to the Timeline making synchronization easier, there are difficulties to overcome as well. A common problem arises when the number of frames in the symbol doesn’t match or evenly divide into the number of frames where you place it. For instance, if you use Graphic symbols for Rotating Wheel in this hour’s first task, you have to make sure the Car symbol has exactly 20 frames for the wheels to fully rotate. If the car has one frame, the wheels don’t spin. If the car has 10 frames, you see half the rotation, and then it repeats. A Movie Clip, in contrast, continues to play, regardless of how many frames it is given. If your nested animation has a different number of frames than your Timeline, you should use Movie Clips or make sure the Graphic symbols have the appropriate number of frames. Using Movie Clips is usually much easier because they’re more flexible than graphics. This discussion shouldn’t distract from the main reason to use Movie Clip or Graphic symbols, which is that you want to create a motion tween. You
From the Library of Lee Bogdanoff
260
HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols
can use motion tweening only on an instance of a symbol. If the symbol you’re tweening happens to have multiple frames, so be it. By nesting clips inside clips, you can create complicated effects that would be difficult to create by hand in one Timeline. Although a Movie Clip or Graphic qualifies as a symbol instance for motion tweening, the difference is that a Movie Clip animates on its own time, and it doesn’t matter how much space you provide in the Timeline where it is used.
Subtleties of Movie Clips
NOTE
Instance Names Versus Symbol Names Don’t confuse the master name for a symbol in the Library with the instance name for one instance on the Stage. Every item in the Library must have a unique name, but symbols in the Library exist just once. You can drag as many instances of a symbol as you need to use throughout a movie. Any instance set to Movie Clip can be given its own instance name, regardless of the properties of the master in the Library. If the instance name is unique (that is, different from any other instances), you can address it directly. People often think that because the master in the Library has a name, the instance does, too. The truth is an instance has no default name. You see gray text reading “” in the Properties panel.
We’ve discussed the biggest difference between Movie Clip symbols and Graphic symbols—a Movie Clip’s Timeline is independent. Obviously, there’s more. Movie clips are addressable, in that you can use ActionScript to direct messages to individual instances of a Movie Clip, such as a Stop command. Also, Movie Clip instances download in a different manner than Graphic instances.
Addressable Movie Clip Instances Remember that the Properties panel provides a place to name a Movie Clip instance (see Figure 14.4). What’s the point of naming an instance if the symbol already has a name in the Library? It provides a way to give each instance on the Stage a unique name. Only then can you address individual Movie Clips. Think about how you address a person. You first say his name, and then you tell him what you want. If you want him to stop, you say, “Joe, stop.” This is the concept of addressing, which we talk about more in Hour 16. Do you recall how the Movie Clip kept animating even when you stopped the Timeline in the last task? Stopping the Timeline is like yelling “Stop!” into a crowd. Simply saying “stop” isn’t enough. You have to say, “Hey, Movie Clip 1, stop!” But, you can’t talk to an individual instance unless that instance has a name. As you soon see, you can do much more than tell Movie Clips to stop.
From the Library of Lee Bogdanoff
Subtleties of Movie Clips
261
FIGURE 14.4 When set to Movie Clip, the Properties panel gives you a way to name a particular instance on the Stage.
Effects on Download Order All this trash talk about Graphic symbols shouldn’t scare you off. Besides being appropriate for scrubbing, they also have a nice effect on downloads. Specifically, Graphic symbols only need to download one frame at a time, and therefore, exhibit a better streaming effect than Movie Clip symbols. A movie that uses Graphic symbols, or even no symbols, can begin to play before it’s entirely downloaded; in other words, it streams. In the case of a frame containing a Movie Clip, all nested frames need to download before Flash proceeds to the next frame. If Flash reaches a frame that contains a ton of Movie Clip instances, which in turn include lots of nested frames, your user might experience a pause. Even though the later frames in nested clips might not be needed right away, Flash needs to be prepared for a script that immediately jumps to the last frame. This isn’t a critical point because Flash files tend to be small, and there are other ways to optimize a movie (many of which are discussed in Hour 22, “Minimizing File Size”). So, keep in mind that Graphic symbols stream better.
From the Library of Lee Bogdanoff
262
HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols
Summary You already knew two big concepts: how nesting of symbols works and how symbols can be used for both motion tweens and efficiency. This hour put them together. When doing motion tweens, you might have tried to make a symbol a multiframe symbol. Now, you know you can do that and there are options that control whether the multiframe symbol you’re tweening is behaving like a Movie Clip or a Graphic. You can’t see Movie Clips animate on the stage by scrubbing. To test them, you must run Test Movie. When you really need the capability to scrub the main Timeline, such as for lip synching, avoid using Movie Clips. Finally, the fact that only Movie Clips can be given an instance name proves to be the most significant attribute of Movie Clips.
Q&A Q. I did the Car with Rotating Wheel task, but when I first made the Rotating Wheel symbol, I forgot to specify the default symbol behavior as Movie Clip. I went back to the Library to rectify this error, but it still doesn’t work; the wheels don’t rotate. Why? A. Changing the symbol properties of the item in the Library affects only any new instances you drag from the Library, which have the properties of the master in the Library. However, instances already in a movie have the same behavior they started with. Your instances of the Rotating Wheel symbol are behaving like graphics. Go to where they’re used inside the Car symbol, and with the Properties panel open, select each instance. Then, change the Symbol Behavior setting from Graphic to Movie Clip. Q. I can’t find the Loop Once option on the Properties panel when I have a Movie Clip selected. I swear I’ve seen it before. Where is it? A. You could have seen Loop Once in the Properties panel, but not when a Movie Clip was selected. Only instances behaving as graphics have this option, which is a good reason to use a Graphic symbol. Of course, when you become accomplished with ActionScript, you learn ways to achieve the same effect when using a Movie Clip—although it still might take more work than simply using the option available to instances of graphics.
From the Library of Lee Bogdanoff
Workshop
263
Q. You said use Movie Clips unless you need one of the features of a Graphic symbol. Are there any other benefits to Graphic symbols? A. There is one nice trick we didn’t mention this hour. A Graphic symbol is a great way to store multiple similar images on separate frames within that symbol. For example, say you have a bunch of thumbnails that you import into separate keyframes of a Graphic symbol. When you drag a Graphic symbol on stage, you can use the Properties panel to single frame and enter the frame number you want to use. It’s a nice way to organize your content. Q. In this book, I keep reading the phrase “instances behaving as graphics.” Why don’t you just say Graphic symbols? A. There’s a difference. The master symbol has one default symbol behavior, which you can change by clicking the Library’s options menu and selecting Properties. However, each instance on the Stage can be changed to something different from the master that spawned it. An instance always starts the same as its master. Not only can each instance be changed to behave like any type, but changing the master has no effect on instances already on the Stage.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. How many frames can you use inside a Graphic symbol? How many inside a Movie Clip symbol? A. You can use one frame for a Graphic symbol and as many as you want for a Movie Clip symbol. B. You can use as many as you want for either. C. It doesn’t matter how many frames you use in the master symbol; it only matters whether the instance behaves like a Graphic, which can have one frame, or a Movie Clip, which can have as many frames as you want.
From the Library of Lee Bogdanoff
264
HOUR 14: Nesting Animations in Movie Clip and Graphic Symbols
2. What happens if you name two symbols in the Library the same? What about naming two Movie Clip instances the same? A. You can’t do either. B. You can’t name two symbols the same unless you separate them by using Library folders, but there’s no problem naming two instances the same. C. You can name two symbols or two instances the same, but it’s a bad idea because Flash might lose one. 3. Although Movie Clips are recommended over graphics, when should you use Graphic symbols? A. You should always avoid them. B. Graphic symbols enable you to synchronize Graphics to the Timeline and sometimes even make the file download faster. C. Graphic symbols are easier on the eyes because they’re antialiased (the sharp edges are slightly smoothed).
Quiz Answers 1. B. You can use as many frames as you want in the creation of Movie Clips or Graphics. Depending on where you use Graphics, you might need to concern yourself with the number of frames the instances are given to live. 2. B. Although there’s no problem naming multiple instances the same, it might become a problem when you try addressing just one, such as when George Foreman addresses one of his many sons named George, Jr. There’s certainly no rule against it. 3. B. Some people agree with Answer A, that graphic instances should be avoided, but for truly varied applications, using Movie Clips to simulate Graphic symbols can be problematic. Plus, who cares how big the file becomes if you’re not delivering it to the web? If something saves you a ton of time in production, it could be worth the cost of slightly larger file sizes, especially if the cost doesn’t turn out to be terribly significant.
From the Library of Lee Bogdanoff
Workshop
265
Exercises The following exercises are tricky, but worth going through. To make things a bit easier, we’ve uploaded source files to the publisher’s website. 1. Despite all the dismissive talk about Graphic symbols, this activity practically requires them.
Create an animation of a steam engine train. First, make a Graphic symbol of just the stack. Then, go inside the stack symbol to animate the smoke stack, possibly by using a shape that starts out as a rectangle. Use shape tweens to Frame 5, where the stack is bulging, Frame 6 where it’s extra tall and expels smoke, and Frames 7 through 10, where it’s normal again. Use the stack symbol in the creation of the train itself. Be sure to give the train exactly the same number of frames as the stack. Bring the train into the main Timeline, and motion tween it across the screen. By scrubbing, you can to judge where the clouds of smoke appear. In another layer, add symbol instances of clouds, which appear and stay in the same location as they motion tween to 0% alpha. Try this by using Graphic symbols for everything. 2. Create an animation of a Ferris wheel. First, make the passenger car a Movie Clip so you can animate it. Make a Graphic symbol called One Rotation, and inside it create circular motion guide to motion tween the passenger car one full rotation in about 28 frames.
Now place 10 instances of One Rotation inside a 36-frame Movie Clip named Ferris Wheel. For each instance of One Rotation, access the Properties panel, and specify the first frame for each. Start one on Frame 1, the next on Frame 4, the third on Frame 7, and so on. In the end, you have 10 cars rotating in the same manner but starting at different locations.
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 15 Creating Special Effects
During this hour, you get a chance to take the knowledge gathered over the last few hours and apply it to practical exercises. This hour is comparable to Hour 6, “Applied Layout Techniques,” where you combined the graphics creation skills acquired in the first part. Here, you create animations using frameby-frame animation, tweens, sounds, and layers. This hour should be fun and serve as an affirmation of how far you’ve come in the first half of the book. Few new details about Flash come up this hour. Instead, the exercises concentrate on specific effects you need to communicate to the audience. Arguably, some of the tasks this hour border on cliché or gratuitous; that’s okay. It’s fine to study and even copy what others have done while you’re learning. It’s not likely you’ll use these exact effects on a real project, but you’ll certainly apply the techniques.
WHAT YOU’LL LEARN IN THIS HOUR: . How to paint with bitmaps and splatter movie clips . Special effects you can apply to text that’s converted to shapes . Practical uses for filters . Advanced masking special effects
Effects with Shapes We start with a few relatively simple features of shapes and Drawing Objects, and then work toward more advanced techniques. Keep in mind you can’t do the following tricks with text blocks, grouped objects, primitives, or symbol instances. You can, however, go inside a symbol and use these techniques on any of the shapes that make up the symbol.
Painting with Bitmaps You’ve seen how to create and modify gradients. You can also use a gradient as the fill or stroke color. You can even use an imported bitmap or raster graphic as a fill or stroke. The way you create and modify a color with a bitmap fill is comparable to using a gradient. You use the Color panel to select the image, and you use the Gradient Transform tool to modify it. It’s easy and pretty cool, even if it’s not terribly practical.
From the Library of Lee Bogdanoff
268
▼ TRY IT YOURSELF Use an Imported Bitmap as a Fill Color in a Hall of Mirrors
HOUR 15: Creating Special Effects
After you start painting with a bitmap, you experiment with some special effects. 1. In a new file, open the Color panel, and click the Fill Color swatch to select it. From the Type drop-down menu, select Bitmap. Because this is a new file, you are faced with the standard Import dialog. Select any raster graphic you have on your computer. If you already have a bitmap in your Library, selecting Bitmap from the Type drop-down menu displays a set of swatches, each with a preview of the imported bitmap. 2. Select the Rectangle tool, and set the stroke to No Stroke (the diagonal red line). Draw a square on Stage. The fill should contain your imported, raster graphic. 3. Select the Gradient Transform tool, which might only be accessible when you click and hold the Free Transform tool button in the Tools panel. Click the fill of your square. You can modify the size and location of the bitmap fill. If you import a large bitmap, you must zoom out to see all the handles to modify the fill. The bitmap repeats when it’s smaller than the rectangle. Interestingly, the Gradient Transform has additional handles to change just the width or height as well as the rotation and skew of the fill, options that don’t apply to Linear Gradients. Let the cursor change help you figure out the modification type for each handle. 4. The bitmap fill is pretty cool, but what about something more practical? Try an easy hall of mirrors. Use the Gradient Transform to set the contained image as big or bigger than the square—that is, make sure the image doesn’t repeat.
FIGURE 15.1 Multiple copies of a shape filled with a bitmap makes the hall-ofmirrors effect.
5. Use the Selection tool to select the rectangle and open the Transform panel. Type 80 into both the width and height fields, and then repeatedly click the Duplicate Selection and Transform button near the bottom right of the Transform panel. The result should look like Figure 15.1. 6. Often, it’s best to use the Gradient Transform tool to make some final tweaks on the location of the fill of the smallest rectangle. For example, we centered the head of the puppy in the photo so that it is visible.
Using a bitmap as your fill or stroke color can be a bit garish. With that in mind, it’s possible to tween a shape whose bitmap fill changes over time. That is, you can make one keyframe containing a shape with a bitmap fill, and then in a second keyframe use the Gradient Transform to tweak the bitmap fill. Finally, do a Shape tween from the first frame to the second. The thing to remember in this case is you need to use Shape tween, not Motion.
From the Library of Lee Bogdanoff
Effects with Shapes
269
Breaking Apart Text Text is much like a Drawing Object in that it doesn’t eat away other shapes in the same location the way shapes drawn in merge mode does. If you select a text block and choose Modify, Break Apart, the first time it breaks the text into a separate block for each character. The second time, or if the text block is only one character, Modify, Break Apart turns the text into shapes. Why is this useful? If you want to animate each character of the text independently, you need to make symbols out of each character. Plus, if you want to change the shape or fill with a gradient, then the text must be a shape. You can experience both effects in the next task and in “Convert Text to a Shape for Special Effects.” In this task, you will break apart a word and make each letter animate separately.
TRY IT YOURSELF ▼
1. In a new file, select the Text tool, pick a large font size, (like 60), click the Stage, and type DROP.
Animate a Block of Text, One Character at a Time
2. Choose the Selection tool, and click the entire block of text. Position the text where you want the animation to begin—for example, at the top of the stage. Choose Modify, Break Apart (or press Ctrl+B). Each letter is a separate block of text now.
TIP
3. With all the letters selected, choose Modify, Timeline, Distribute to Layers. Delete the layer with nothing in it by clicking Layer 1, and then clicking the Trashcan icon in the Timeline. 4. Before we animate these letters, they each need to be a Movie Clip instance because we’re going to do Motion tweens. Click once to select the D, and select Modify, Convert to Symbol (or press F8). Name it D, and make sure it’s a Movie Clip. Do the same for the other letters, naming them appropriately. 5. Because the letter instances are perfectly in place the way we want them to begin, let’s not mess them up. In the D layer, click Frame 10, and insert a frame (press F5). In the R layer, insert a frame in Frame 15. In the O layer, insert a frame in Frame 20. In the P layer, insert a frame in Frame 25. 6. Return to Frame 1 by clicking above the 1 in the Timeline. Insert a motion tween for each of the four layers. Now, click on the D at Frame 10. Press and hold the Shift key, and then drag down so the letter is at the bottom of the Stage. Do the same for the other letters on their last frames. Finally, add a frame at Frame 50 for each of the layers. 7. Test the movie. You might need to choose View, Grid to help you line up the letters. Have fun modifying the timing and making other tweaks.
Repeating Symbols If you repeat this task with a word containing duplicate characters (like the two Os in ZOOM), you shouldn’t need to create two symbols based on the letter O. As a way to ensure the second O lines up perfectly, do this: When you get to the second O, make another symbol—call it Temporary O. Then, select the instance on Stage for your Temporary O symbol, and click the Swap button in the Properties panel. Swap it with the first O symbol. Then, delete the Temporary O in the library. Everything lines up, and you didn’t need to drag or eyeball anything.
From the Library of Lee Bogdanoff
270
HOUR 15: Creating Special Effects
Turning Text into a Shape Text blocks are similar to Drawing Objects, symbol instances, and groups. You can put text in any of the preceding object types, but it’s not necessary because text doesn’t get eaten away the way a plain shape does when two shapes overlap. However, there are several reasons why you might want to turn text into a shape. As a shape, you can distort the text in any manner you want. You can fill it with gradient or mixed colors. You can add a stroke to the text if it’s a shape. Unfortunately, once you convert text to a shape, you can never edit the characters as text again. In this section, you learn special effects for text converted to a graphic shape. The way you convert text to a shape is easy. Select Modify, Break Apart twice. The first time you select Break Apart, it breaks a text block into individual text blocks that are one character each. Once the text is a shape, you can do any sort of shape maneuver. Use the Free Transform tool’s Distort and Envelop options; apply a stroke and remove the fill; change the stroke or fill to a gradient or bitmap; or stretch and reshape using the Selection or Subselection tools. The next task enables you to play with all these options.
▼ TRY IT YOURSELF Convert Text to a Shape for Special Effects
1. In a new file, select the Text tool, pick a large and bold graphic font, and type a word on the Stage. Use the Selection tool to select the block, and then select Modify, Break Apart. Without clicking (which would deselect), select Modify, Break Apart again. Now, all the letters are shapes. 2. Use the Selection and the Subselection tools to stretch and bend the characters. Try not to distort things so much that you can’t read the word. In Figure 15.2, we add spike shapes to our word.
FIGURE 15.2 You can go wild reshaping text once it has been converted to editable shapes.
3. Let’s add a dramatic shadow. Select all the shapes, and choose Modify, Group. This makes the shapes safe from erasing the shadow. Copy the group, and paste it. Position the duplicate out of the way of the original. With the duplicate selected, choose Modify, Transform, Flip Vertical. Then, select Modify, Ungroup.
From the Library of Lee Bogdanoff
Effects with Shapes
4. Use the Free Transform tool, and select all shadow characters. Use the Distort option, located at the bottom of the toolbar, and press and hold the Shift key while you drag out the bottom-right corner to make the shadow bigger, like the way it might appear when the sun is low. See Figure 15.3.
271
TRY IT YOURSELF ▼ Convert Text to a Shape for Special Effects FIGURE 15.3 A dramatic shadow only takes a little bit of tweaking with the Free Transform tool.
5. Select all the shadow letters, and set the color to something a lighter than the primary letters. An easy way to do this is to change the Alpha of the fill color to about 50%. With all the shadow selected, choose Modify, Convert to Symbol (or press F8), and select Movie Clip. 6. Select the shadow clip, and use the Filters section of the Property panel to apply a Blur effect. 7. Now, change the fill color on the letters. Double-click to enter the primary letters’ group. Open the Color panel, and for the fill color, select the default white-to-black radial gradient or create your own gradient. Select the Paint Bucket tool, and make sure the Lock Fill is not selected. Click in the top-left corner of the leftmost letter. Then, turn on Lock Fill, and click once in each of the other letters. Finally, use the Gradient Transform tool to control the position and fall off of the gradient. You might have to scroll to the right or left of the stage to grab the gradient handle. It should spread across all the letters. 8. To push this over the edge, we can animate. First, do a Shape tween with the main letters. Go back up to the main Timeline, and select the main letters. Choose Edit, Cut (or press Ctrl+X), and then select Modify, Timeline, Insert Layer (or click the Insert Layer button at the base of the Timeline). Make sure the new layer is active, and select Edit, Paste in Place (or press Ctlr+Shift+V). Select the letters again, and choose Modify, Break Apart. Finally, go to Frame 20, and insert a keyframe. Use the Gradient Transform tool to move the highlight of the gradient to the rightmost letter. Select the keyframe in Frame 1, and use the Properties panel to set a Shape tween.
From the Library of Lee Bogdanoff
272
▼ TRY IT YOURSELF Convert Text to a Shape for Special Effects
HOUR 15: Creating Special Effects
9. The shadow is a bit easier. Click on the cell in the shadow’s layer under Frame 20, insert a frame, and insert a Motion tween. Use the Free Transform tool, and skew the bottom of the shadow to the left at Frame 20. You might need to nudge it a bit so it lines up with the main letters. Don’t worry too much about how the shadow looks during the tween—it’s only necessary that it looks good in the last frame.
In the “Masking Effects” section later this hour, you see an alternative to converting text to shapes when you only need to modify the fill. The color or gradient gets revealed by a block of text where the text is the mask.
Splatter Movie Clips with the Spray Brush Tool One interesting effect we haven’t explored yet is using the Spray Brush tool to “spray” movie clips. You can create some unusual effects by creating a small movie clip and spraying random instances of it on the stage, as demonstrated in the following Try It Yourself.
▼ TRY IT YOURSELF Splatter Animated Movie Clips
Now that you can create animated movie clips, you can spray them, which creates a very unusual effect, as you’ll see in this exercise. 1. Open a new file, and begin by creating a small, animated movie clip. This can be like the Rotating Wheel you created in Hour 14, “Nesting Animations in Movie Clip and Graphic Symbols.” To save time, you can copy Rotating Wheel from the Library of that Flash file, and paste it into the Library of your current file. 2. Make sure you’re on Scene 1, and select the Spray Brush tool. Use the Properties panel to change the Symbol Spray value to Rotating Wheel (or your movie clip), as shown in Figure 15.4. Click on all three of the lower checkboxes, Random Scaling, Rotate Symbol, and Random Rotation. These do exactly what they sound like, which you see in a moment. 3. Click on the Stage with the Spray Brush. This should create a cluster of randomly scaled, randomly rotated copies of the Movie Clip.
From the Library of Lee Bogdanoff
Splatter Movie Clips with the Spray Brush Tool
4. Finally, you can see them animate by choosing Control, Test Movie. A cool feature of this tool is that it really is splattering copies of your movie clip. If you edit them, those changes are reflected on the Stage. For example, we add an orange fill color to the Wheel symbol after we create the spray, and the change shows up on the Stage.
273
TRY IT YOURSELF ▼ Splatter Animated Movie Clips
FIGURE 15.4 The Spray Brush tool lets you “spray” copies of movie clips, even animated ones. You can edit the original symbol after the fact, and your changes show up in the spray.
As you probably noticed in the previous task, the Properties panel has options you haven’t seen before. Let’s take a quick look at them: . Spray—This setting has a button next to it that allows you to pick the movie clip you want to splatter on the Stage. If you don’t select a clip, you can use the default shape, a small black square. Notice that if you click on the black box next to Default Shape, you can change the color or use a gradient fill. . Scale—Change the scale to make your movie clips or default shape larger or smaller than the parent. . Random Scaling—This checkbox ignores the Scale setting and randomly resizes your splattered movie clips. . Brush Width and Height—These control the splattering area. Larger numbers mean the clips will be more spread out. . Brush Angle—This controls the direction of your splatter if one dimension, say Width, is wider than the other.
Spend a few minutes playing with these settings and the Spray Brush until you understand how they control your results.
From the Library of Lee Bogdanoff
274
HOUR 15: Creating Special Effects
Using Filters for Special Effects In the task, “Convert Text to a Shape for Special Effects,” you used the Blur filter to soften the shadow, but you didn’t use the Drop Shadow filter. In fact, you can’t distort the shadow when using that filter. Before you jump into the following examples using filters, remember that sometimes you have to draw or animate by hand what you want to show. You’ve seen Filters pop up in other parts of this book, and they appear again. We’ve included two general effects that can be enhanced by filters: depth and motion.
Showing Depth with Shadows You don’t need a degree in optical physics to know some basics about shadows. Figure 15.5 shows two simple principles: The closer an object is to a light source the bigger the shadow; and, the farther away from where the shadow is cast, the bigger and blurrier that shadow becomes. For example, in the preceding task, the wider you made the shadow, the closer the light source seemed to be. Using these two simple relationships in your animations adds depth and communicates a sense of scale to the user. The following task proves that adding a subtle shadow can go a long way toward adding depth to your animations. FIGURE 15.5 Understanding how light is cast helps you simulate depth.
From the Library of Lee Bogdanoff
Using Filters for Special Effects
In this task, you will create a shadow for a bouncing ball that will change as the ball animates. 1. In a new file, draw a circle near the top of the stage, select it, and convert it to a Movie Clip by pressing F8.
275
TRY IT YOURSELF ▼ Add a Shadow to Show Depth and Distance
2. Click Frame 20, insert a frame, and create a Motion tween. To make sure Frames 1 and 20 are the same, go to Frame 20, and choose Insert, Timeline, Keyframe. 3. Now, we make the circle bounce. Go to Frame 10, and press and hold the Shift key while you drag the instance of the circle down toward to the bottom of the stage. Test the movie to see the basic bouncing ball. 4. Select the circle instance, and copy it. Name the sole layer Circle, lock the layer, and then insert a new layer for the shadow. Name that layer Shadow. You can click and drag to move the stacking order of the layers, so the Circle layer is above the Shadow layer where we’re about to animate the shadow. 5. In the Shadow layer, select Edit, Paste in Place (or press Ctrl+Shift+V), and the circle instance you just copied appears. Move the red current-frame marker to Frame 10. The shadow must move to the floor, and that must be below the circle when it hits the bottom. Press and hold the Shift key, and drag the circle down, so it’s below the circle. Move the red current-frame marker back to Frame 1 to edit the way the shadow appears at the start. 6. Back in Frame 1, select the shadow, and use the Free Transform tool to squash it and widen it just a tad. Use the Properties panel to set the Color Effect to Tint, 100%, and pick the Black swatch. Keep the shadow selected, and use the Filters section of the Properties panel to set a Blur. Set both the X and Y direction to 50. 7. Add a Motion tween to the Shadow layer. Click the cell in Frame 20 of the Shadow layer, and insert a keyframe by pressing F6. Move to Frame 10, and select the shadow. Use the Filters section of the Properties panel to set the Blur X and Y to a value near 40. You can use the Free Transform tool to make the shadow a little smaller. 8. Test the movie. It’s okay, but it might look better if the shadow also has an alpha effect. To add both, select the shadow in Frame 20, and use the Properties panel to change the Color Style to Advanced. Change the alpha percentage from 100 down to 30 or whatever looks right to you. Change the alpha to the same for the instance in Frame 1. You’re welcome to change the alpha similarly for the instance in Frame 10, but it looks best with its alpha set higher. Note: You have to start with Frame 20 and work back to Frame 1 when you change the alpha. If you try beginning with 1, Flash assumes you want to animate the change in alpha, so the middle frame gets an interpolated alpha value. If you work backwards, the middle frame doesn’t change.
From the Library of Lee Bogdanoff
276
HOUR 15: Creating Special Effects
Adding a Motion Blur The Blur filter is great for making an out-of-focus version of an instance, but it’s not so great for showing motion with direction. While you can set the X- and Y-Blur factors independently, the blur appears on both sides (left and right or top and bottom) in equal amounts. To show that something is both moving fast and going in a particular direction, the blur should only appear on one side, like the trailing side of a comet. You already know that animation is a series of still images, so any motion blur you add is added to a single frame at a time. You can tween filters so Flash does the interpolation between keyframes. There are three general ways to add a trailing blur: . Have two objects—One with the Blur filter and another on top with no blur. The blurred object can even be a different shape. Figure 15.6 shows an example. FIGURE 15.6 The Blur is applied to the object underneath while the object on top is left unchanged.
. Use the Drop Shadow filter—Set the shadow color to match the object, and set the direction to the position from which the object is supposed to be leaving(that is, behind the object). . Draw lines or some other custom graphic—You can make the lines long to make the object look like it’s moving faster or short to make it look slower. Figure 15.7 shows an example. FIGURE 15.7 You might think a few simple lines to depict motion doesn’t work, but simply watch an old cartoon frameby-frame, and you see it really does.
Applying Filters with the Motion Editor New in this version of Flash is the Motion Editor panel. This new panel grants you more precise control of your animation paths, as well as more customized easing options. With the Motion Editor, you can also apply filters to your animations, as you’ll see in the next short task.
From the Library of Lee Bogdanoff
Masking Effects
In this exercise, you will create a simple animation and apply a Filter to it using the Motion Editor panel. 1. In a new file, draw a circle near the top of the stage, select it, and convert it to a Movie Clip by pressing F8.
277
TRY IT YOURSELF ▼ Add a Filter with the Motion Editor
2. Scroll to the right of your Timeline and click Frame 150, insert a frame, and create a Motion tween. We’re making this a long animation so you can see the changes that happen to the filter we’re about to add. Move the circle somewhere else on the stage. You should see a green Motion Path. 3. If the Motion Editor isn’t open, choose Window, Motion Editor to access it. 4. Look for the Filters section. You might have to drag the scrollbar on the right or drag the panel larger to see it. 5. Click on the plus sign to the right of the Filters title. This will open a list of options you are already familiar with: Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color. These are nothing new. Choose Drop Shadow from the list. A new heading, Drop Shadow, will appear in the Motion Editor under the Filters section. 6. The big advantage that the Motion Editor gives you is the capability to change the appearance of the filter as the animation occurs. In this example, we’ll make the drop shadow change, so it appears that the circle is getting closer to the stage. Under the Drop Shadow heading, locate the Strength setting. Click on Frame 150 on the timeline and set Strength to 0. 7. When you watch your animation, you will see the drop shadow disappear by the time the animation reaches the last frame.
Masking Effects So far, we’ve mainly used layers to enable us to tween multiple movie clips. Another important reason that Flash provides you with the capability to create multiple layers is masking. The shapes you draw into a layer with its Layer Properties set to Mask shows through to the objects in any layer or layers directly underneath with their Layer Properties set to Masked. This sounds more confusing than it is. Basically, the Mask layer defines what is visible in the Masked layers, as you see in the next task.
From the Library of Lee Bogdanoff
278
HOUR 15: Creating Special Effects
For masking, you first specify one layer’s Type property as Mask. Then, you find the Masked setting available when you access the Layer properties for a layer directly below the Mask layer. However, you don’t actually see the masking effect unless you test the movie or lock all the layers involved. It all makes more sense when you create a spotlight mask in the next task.
▼ TRY IT YOURSELF Use Masking to Create a Spotlight Effect
In this task, you create a spotlight effect that appears to light up a skyline of buildings. Follow these steps: 1. Create the spotlight and its motion. To do so, in a new file, draw a filled circle, and convert it into a Movie Clip symbol called Spot. 2. Name the layer in which the Spot instance resides Spot Motion by double-clicking on the layer name and typing a new name. 3. Insert a frame at Frame 20, and add a Motion tween by choosing Insert, Motion Tween. 4. Insert a keyframe at Frame 20 (Insert, Timeline, Keyframe). In Frame 10, move Spot to a new location. Frame 30 should match Frame 1. 5. Change the Spot Motion layer’s Type property to Mask by double-clicking on the small icon to the left of the Layer name. Select Modify, Timeline, Layer Properties to access the Layer Properties dialog box. Select Mask, and click OK. 6. Notice the Page Curl icon (the icon to the left of the layer name) changes to the Mask icon. Lock the Spot Motion layer, so you don’t accidentally change it by clicking underneath the padlock symbol on the layer’s title bar. 7. Insert a layer below the Spot Motion layer (Insert, Timeline, Layer), and change its type to Masked. Click the Add Layer button at the bottom left of the Timeline. The new layer might appear above the Spot Motion layer, and that’s fine. Name the new layer Skyline. 8. For Skyline to be a Masked layer, it must be below the other layer, so click and drag down the Skyline layer. If you get lucky, the Skyline layer automatically changes to Masked. However, it’s easy to do by hand, too. If you must, access Skyline’s Layer Properties dialog box, and change the type to Masked. This is available only if the next layer above it is already set to Mask. 9. In the Skyline layer, draw lots of boxes in different colors to resemble a city skyline. You see the mask effect only if you test the movie or lock all the layers.
From the Library of Lee Bogdanoff
Masking Effects
10. Change the background color of the movie to Black by selecting Modify, Document or by clicking the Stage and using the Properties panel. As interesting as this looks, something is missing. This is the way a spotlight would look in space, where there’s no atmosphere. The black background is too dark. You need to make another layer with a dim version of the skyline to make this more believable.
279
TRY IT YOURSELF ▼ Use Masking to Create a Spotlight Effect
11. Select all the boxes you drew in Skyline. (You need to make sure that just this layer is unlocked to select it.) You can easily select everything in that layer by clicking the keyframe in the Skyline layer. With everything selected, convert the shapes into a Movie Clip symbol by pressing F8, and name it Building Graphic. 12. Make a new layer for the second instance of Building Graphic by clicking the Add Layer button, and name the layer Dim Skyline. 13. Analyze the Type property of each layer, which is easy to see by looking at each icon. Chances are the Dim Skyline layer is also a Masked layer. One Mask layer can have several Masked layers. Set Dim Skyline to Normal, but only after you move it down below Skyline. If Skyline is no longer directly under the shadow of Spot Motion, it also reverts to Normal. Drag the Dim Skyline layer down below Skyline, and then set the Type property for Dim Skyline to Normal. 14. Copy the instance of Building Graphic, and paste it into the Dim Skyline layer by pressing Ctrl+Shift+V. Hide all layers except Dim Skyline, so you’re sure which one you’re working on. Then, with the instance of Building Graphic in the Dim Skyline layer selected, access the Properties panel. Set the Color Style to Brightness and set the slider to –40%. Looks great, right? You didn’t need to create this Dim Skyline layer to learn about masking, but it’s a nice touch.
You can do some sophisticated stuff with masking. For example, you could edit the master version of Spot and maybe cut out part of the fill by using the Lasso tool. The Masked layer shows through only where something is in the Mask layer. Unfortunately, this is an all-or-nothing situation; that is, the mask is either on or off. You can pull off the effect of a graduated mask by putting the graduation in the Masked layer because it doesn’t work in the Mask layer. Another idea is to make a duplicate of the Spot symbol— but one with a transparency gradation fill. Then, you can make a separate layer where this duplicate follows the same path as the spot.
From the Library of Lee Bogdanoff
280
HOUR 15: Creating Special Effects
The preceding task was a case of moving the mask. Quite often, you find situations in which the Mask layer should remain still, and the Masked layer is the one to move. Suppose you’re building an animation of someone sitting inside a train, and you want the effect of mountains and clouds passing by the window. If you had a wide picture of mountains and clouds, you could easily do a motion tween to make it pass. Without masking, you would have to cover up the left side and the right side surrounding each window with graphics of the inside of the train. These carefully sliced covers would need to be in a higher layer to cover up the picture, and it would be more work than needed. With masking, all you need is a Mask layer with the exact shape of the windows and a Masked layer containing the tween of your wide picture. This is a case of the masked part moving and the mask staying still. Any time you want to cut out part of another image, you can do it without really cutting anything. Masking has amazing potential for visual effects. Next you get to play with a pretty cool masking trick that’s very effective. It’s a way to reveal an image using a hand-drawn effect. Basically, the mask is going to build one frame at a time, but it looks like someone is changing an image by painting one line at a time.
▼ TRY IT YOURSELF Create a Hand-Drawn Masking Transition
In this task, you’ll use an animated mask to obscure one image while revealing another. 1. In a new file, import two photos that are the same size. Place each one at 0,0 on the X- and y-axes in its own layer. Name the layer on top End and the layer underneath Start. You initially see the image in the Start layer, and then it transitions to the image in the End layer. Make both layers last 60 frames by clicking in Frame 60 of each layer, and pressing F5. 2. Insert a third layer above the other two layers, and name the layer Transition. You do the rest of this task in this layer, so you’re welcome to lock the other layers. The Transition layer should last 60 frames by default. Click Frame 20, and insert a blank keyframe by pressing F6. Make sure the Brush size option is large. Paint one blob in the top-left corner of the stage, as shown in Figure 15.8. Now, hold the Brush tool using the mouse, and press F6, which duplicates the blob you have in Frame 20. Then, draw a little more to cover up the photo. You can go pretty fast because you have another 40 or so frames until you cover the photo entirely. 3. When you’re done with your frame-by-frame animation that covers the photo, set the Transition layer to Mask and the End layer to Masked, and make sure the Start layer stays as Normal. Test the movie.
From the Library of Lee Bogdanoff
Masking Effects
281
TRY IT YOURSELF ▼ Create a Hand-Drawn Masking Transition
FIGURE 15.8 A blob, drawn freehand, is the start of the mask that fully engulfs the stage size to reveal a second photo on top of the first.
The hand-painted feeling in the preceding task is one of many ways to do a transition. For example, you could do a Shape tween or a simple Motion tween where a small circle tweens to be larger than the entire stage. No doubt you’ve seen this sort of wipe in old movies. Transitions are easy: Have one layer with the starting content below everything else. Then, have the masked layer go from having a tiny part revealed through its mask to having it entirely revealed because the mask grows. Let’s do one more example of masking. The next task creates a mask that is a bit like a stencil. We’re going to make a gradient that does a Shape tween but only reveals through a mask, which acts like a stencil. Think of this task as adding an animated glow. Follow these steps: 1. In a new file, select the Text tool, pick a large, bold font, set the color to red, and set the text type to Static. Click on the Stage and type a short headline. Use the Selection tool to select the block of text; convert it into a Movie Clip, and name it Headline. Change the name of Layer 1 to Base. Click Frame 60 and insert a frame by pressing F5. Select the instance of Headline, and copy by pressing Ctrl+C.
TRY IT YOURSELF ▼ Use a Mask as a Stencil
2. Insert a new layer, and then select Edit, Paste in Place (or press Ctrl+Shift+V). Name this layer Stencil, and set the Layer properties to Mask.
From the Library of Lee Bogdanoff
282
▼ TRY IT YOURSELF Use a Mask as a Stencil
HOUR 15: Creating Special Effects
3. Insert a third layer, and name this layer Glow. Arrange the layers so Glow is in the middle and set to masked and Headline is at the bottom and set to Normal, as shown in Figure 15.9. Lock all the layers except for Glow. Make the Stencil layer invisible.
FIGURE 15.9 You need the layers oriented as shown.
4. In the Glow layer, draw a rectangle with no stroke that’s slightly bigger than the entire Headline instance. Use the Color panel, and select a linear gradient for the rectangle’s fill. Edit gradient so it has three steps: 0% alpha yellow on both ends and 100% alpha yellow in the center, as shown in Figure 15.10. FIGURE 15.10 The three-step gradient (clear-yellow-clear) is used in the masked layer starting as a diagonal band at the top left.
5. Use the Gradient Transform tool to rotate, move, and set the falloff so the gradient appears as a small diagonal band over the top left of the Headline instance, also shown in Figure 15.10. 6. Select Frame 20 of the Glow layer, and insert a keyframe by pressing F6. Use the Gradient Transform tool to move the position of the gradient’s center to the right of the last letter in your Headline instance. 7. Go back, click Frame 1 of the Glow layer, and set a Shape tween. Test the movie.
Many of these special effects involved text. No rule says you can’t apply special effects to other shapes, such as logos or buttons.
From the Library of Lee Bogdanoff
Summary
283
Summary Hopefully, this was one of the more fun hours for you. It’s nice to combine the bits of information you’ve learned and create something. The good news is there’s still more to learn. In this hour, you’ve explored a few special effects as a way to solidify and apply concepts including how shapes work, how to use filters, and Mask layers. Specifically, you’ve seen how to paint with bitmaps and how to turn text into a shape to treat it like any other shape. When you used filters this hour, it was only for specific and practical applications. Gaining understanding of using Mask layers ultimately proves to be the most valuable part of this hour. It’s not so much the details of how the Mask layers work, but rather the way you must wrap your brain around a problem and work out the layer orientation where we focused. Even if you end up using a Blend mode instead of masking, the thought process is the same as masking.
Q&A Q. You showed a few fancy ways to change the fill and stroke for text once it was a shape, but can’t you also effectively fill any shape by using the stencil mask technique? A. Yes. You can have your pattern in the Masked layer and then the text or any shape you want to reveal in a Mask layer. In fact, this approach leaves the possibility to edit the text, which is impossible once you convert text to a shape by breaking apart twice. The only disadvantage of using masks is you need to manage multiple layers. Q. You finally mentioned Blend in the last sentence of the Summary. Shouldn’t this be part of a chapter on special effects? A. This hour focused on effects you can animate. While you can apply a Blend mode to any Movie Clip instance, including clips that animate, you can’t tween the Blend effect. That is, Flash can’t interpolate between two frames with clips that use different Blend modes. Having said all this, you can definitely use Blend modes in conjunction with any of the tasks this hour.
From the Library of Lee Bogdanoff
284
HOUR 15: Creating Special Effects
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. What happens when you take a Dynamic Text block containing the word Flash and select Modify, Break Apart? A. Nothing. You can only break apart Static text. B. The characters turn into shapes. C. Each character turns into an individual Dynamic Text block. 2. How can you make a gradient mask? A. You can’t, but you can add an extra layer above the mask with any sort of gradient you want. B. You can’t, but using the Invert Blend on a symbol containing a gradient is the same thing. C. Simply put a gradient inside the Mask layer.
Quiz Answers 1. C. You need to select Modify, Break Apart twice to turn a text block containing multiple characters into a shape. 2. A. A mask in the gradient layer will act the same as if it were a solid.
Exercise Try to deconstruct a small portion of any special effect you’ve seen on the web. Break it down to small pieces. Think about it in super-slow motion if that helps. Start to map out the layers and individual components needed to build it. Try to build it if you want, but that’s almost the least important part of the exercise. Understanding how it is constructed will go a long way to helping you build just about anything you run across.
From the Library of Lee Bogdanoff
PART III Adding Interactivity and Video
HOUR 16
Basic Interactivity
HOUR 17
Introducing Components
HOUR 18
Using Components
HOUR 19
Using Video
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 16 Basic Interactivity
Flash’s programming language is called ActionScript. Like any programming language, ActionScript enables you to write instructions your movie follows. Without ActionScript, your movie plays the same way every time. For example, if you want the user to be able to start and stop the movie, you need ActionScript. ActionScript has grown from a handful of available instructions to a fullfledged programming language. This means it’s become more powerful, but it’s also gotten more complex. The concepts you learn this hour should help reduce your frustration. The topic of scripting is deep. It’s not an exaggeration or cliché to say this entire book is too small to cover ActionScript fully. We don’t cover it all this hour. Rather, we cover the basic concept as well as look at typical applications for scripting. This way, you build a good foundation on which to grow at your own pace.
Basic ActionScript Scripting is nothing more than writing instructions. Each instruction tells Flash to do something very specific. For example, you could instruct Flash to “play,” “stop,” or “set that movie clip’s alpha to 50%.” By keeping each piece of ActionScript specific, you can easily piece together more advanced instructions. At the core, each “sentence” (or line of code) is a single instruction.
WHAT YOU’LL LEARN IN THIS HOUR: . How to get started using ActionScript to make Flash do exactly what you want . How to create simple buttons the user can click
NOTE
Skipping Ahead Despite the introduction, we realize many readers will still find this hour too technical for their liking. You’re welcome to skip ahead to Hour 19, “Using Video,”; from that point through the rest of the book, ActionScript makes only a few brief appearances.
All your ActionScript is typed into the Actions panel. Open the Actions panel and follow along as we explore. Select Window, Actions (or press F9).
From the Library of Lee Bogdanoff
288
HOUR 16: Basic Interactivity
Take a quick look at Figure 16.1, and then we cover a more details before you do a few exercises. FIGURE 16.1 The Actions panel has several components.
Collapse Between Braces and Collapse Selection Remove Comment Check Syntax Find
Show Code Hint
Apply Block Comment Show/Hide Toolbox
Add Statement Auto Format Expand All Insert Debug Options Apply Line Target Path Comment
Script Assist Options Menu
Script Category
Help button Toolbox
Navigator pane
Pin Script Current Script tab
Script pane
The Actions panel has the following features: . Toolbox—The Toolbox list provides access to all installed actions. It’s organized like folders. . Script Category—This simply narrows the actions listed in the Toolbox to ActionScript 3.0, ActionScript 1.0 & 2.0, or one of the two FlashLite versions for delivering Flash to various mobile devices such as cell phones. . Script pane—In the Script pane, your actions appear in order of execution. . Navigator panel—In the script navigation pane, you can see all the scripts in your movie. . Current Script tab—The Current Script tab indicates which script is currently being edited. Figure 16.1 indicates the script is for Layer 1.
From the Library of Lee Bogdanoff
Basic ActionScript
289
Compare this to how the Properties panel shows you the currently selected instance. . Pin Script—The Pin Script button adds a tab for a particular script, so you don’t have to first select the object or layer into which you want to add a script. Normally, the Actions panel acts like other panels—always reflecting the settings for the currently selected item (in this case, the script for the selected keyframe or object, such as a button). . Script Assist—When the Script Assist button is clicked, you no longer type free-style into the script pane, but rather you make selections from options that appear above the script pane, as shown in Figure 16.1. This is the return of Normal Mode last seen in Flash MX (version 6). Script Assist ensures your scripts are free of syntax errors. . Options menu—The Options menu (as on any panel) contains additional settings. Preferences, such as script font typeface, are available. . Help button—The Help button, also known as the Reference button, provides online help with any selected piece of ActionScript. . Script toolbar—The Options toolbar includes the following buttons: . Add Statement—This button, which we call the Plus Button throughout the rest of this book, pops up a menu that provides the same script elements found in the Toolbox. The menu also shows the key combination for each script that has one. . Find—This button enables you to search scripts and optionally replace parts as you would in a word-processing program. . Insert Target Path—This button helps you address specific objects, such as particular clips. Scripts can apply to individual clips. For example, when you want to play or stop just one clip, you have to target that particular clip. This button helps you specify a target clip. . Check Syntax—This button checks your ActionScript has no syntax errors and displays details in the Output panel. This doesn’t guarantee that the movie behaves as you had in mind—only that you have no show-stopping errors. . Auto Format—This button cleans up your code by adding indentation where appropriate, making it much easier to read. . Show Code Hint—This button retriggers the code-completion helper that appears as a ToolTip to help you complete ActionScript. It’s a bit like auto-completion on form fields in some web browsers. . Debug Options—This button enables you to add and remove breakpoints, where you purposefully make Flash pause on a specified line of code so you can investigate what is playing at that line.
From the Library of Lee Bogdanoff
290
HOUR 16: Basic Interactivity
You can also add and remove breakpoints by clicking in the gutter to the left of any line of code. You see a red dot appear to the left of the line of code. . Collapse Between Braces and Collapse Selection—These options trigger code folding on parts of your script. When your script gets long, collapsing code enables you to hide the parts on which you aren’t currently working. . Expand All—This enables you to quickly expand any code previously collapsed. By the way, you can also collapse and expand your code by clicking the small + or - box that appears in the left margin when you select parts of your code. . Apply Block Comment—As you learn in this hour, Flash interprets and executes every line of code. However, sometimes you might want to write notes to yourself, called comments, that should be ignored by Flash or even just temporarily disable some code you’re working on. This button enables you to “comment out” a block of code or comments. That is, Flash ignores everything between /* and */. . Apply Line Comment—Whereas block comments can include multiple lines, a single line comment begins with //, but just that line is ignored. You can quickly see which lines of code are comments because the text turns gray. . Remove Comment—This is a quick way to remove any selected comments. . Show/Hide Toolbox—Although it’s possible to open and close the ActionScript Toolbox on the left with the small arrow button, this Show/Hide button is much easier. Hiding the Toolbox gives you more room to write scripts.
Syntax is unique to each programming language. Every piece of ActionScript has a specific syntax that must be followed. As an analogy, consider how every email address has to have the form [email protected] or it doesn’t work. Flash has no latitude for invalid syntax. When you test the movie, you see errors appear in the Output panel until you resolve the errors. Syntax errors are show-stoppers because you must correct them. Luckily, plenty of ways ensure your scripts have perfect syntax. You can easily add an action from the Toolbox by double-clicking or dragging it to the right side of the Actions panel (the Script pane). You can build a complex set of instructions, one line at a time. A statement is a code sentence that uses only words from the ActionScript language.
From the Library of Lee Bogdanoff
Basic ActionScript
291
Actions are instructions. Flash follows each line of code in sequence. Some actions are complete pieces of instruction with no additional modifications on your part. For example, you can add a Stop action, and when Flash encounters it, the playback head stops advancing. However, many actions require you provide additional details called parameters. For example, an action such as gotoAndPlay requires you provide the additional detail about what frame number or frame label you want to go to.
Specifying Actions by Using Parameters Now you can try out actions and parameters. You see that some actions are quite simple. The following task is a quick exercise that uses actions and parameters. After you complete it, we step back to analyze what you did in the task. In this task, you make the last few frames of an animation loop. Follow these steps: 1. In a new file, use the Text tool to create a text block containing the word Welcome. Make sure the text type is Static. Select the block and convert it to a symbol. Make it a movie clip and name it Welcome Text.
TRY IT YOURSELF ▼ Make an Action That Loops Part of Your Movie
2. Insert a frame at Frame 19. Add motion tweening. At Frame 1, move the text offstage to the right. In Frame 19, move the text to the center of the screen. 3. At Frame 20, choose Insert, Blank Keyframe. Copy the text at Frame 19, and choose Edit, Paste in Place (or press Ctrl+Shift+V) to put it in Frame 20. Add a frame at Frame 30, and insert a Motion tween. Use the Properties panel to make the tween rotate one time clockwise between Frame 20 and Frame 30. Test the movie. Notice the whole movie loops over and over. Instead of leaving the animation as is, you’re going to make the rotation part from Frame 20 to Frame 30 loop forever. 4. You can add actions to any keyframe, but instead of mixing scripts with your animation, you should make a new layer exclusively for actions. Name the single layer you currently have Animation, choose Insert, Layer, and name the new layer Actions. Make sure the current layer is the one you called Actions. You can tell a layer is selected when you see a Pencil icon next to the layer’s name. Select Frame 30 in your Actions layer, insert a keyframe by pressing F6, and then access the Actions panel by clicking Window, Actions (or press F9).
From the Library of Lee Bogdanoff
292
▼ TRY IT YOURSELF Make an Action That Loops Part of Your Movie
HOUR 16: Basic Interactivity
Make sure Frame 30 remains selected when you edit the Actions panel by noting the tab near the bottom of the panel reads Actions:30 and has the keyframe icon, as shown in Figure 16.2. This confirms the script you’re about to write executes when the playback head reaches Frame 30.
FIGURE 16.2 The Actions panel is opened right after Frame 30 is selected so you can set an action to execute when the playback head reaches that frame.
5. To insert a gotoAndPlay action, make sure the Actions panel toolbox is showing, set the filter drop-down to ActionScript 1.0 & 2.0, select Global Functions, Timeline Control, and then double-click gotoAndPlay. You should see a gotoAndPlay action added to your script in the Script pane on the right (see Figure 16.3). Because this action requires parameters, a code hint appears to help guide you. If it goes away, click inside the parentheses following gotoAndPlay, and click the Show Code Hint button. FIGURE 16.3 After you insert gotoAndPlay, the Actions panel is populated.
From the Library of Lee Bogdanoff
Basic ActionScript
6. You always type any required parameters inside the parentheses. In this case, type the number 20 because that’s the frame number to which you want to go and play. Therefore, the finished action in the script area should read gotoAndPlay(20).
293
TRY IT YOURSELF ▼ Make an Action That Loops Part of Your Movie
7. Test the movie with Control, Test Movie as it doesn’t work in the authoring environment. It plays once, and then every time it gets to Frame 30, it goes back to Frame 20 and plays again. Save or keep this file open; you need it for the next task.
As easy as the preceding task was, one thing in particular could make it better. Consider the amount of work involved if you changed the location of the keyframes. For example, what if the second keyframe, Frame 20, had to move to Frame 25? Of course, the initial tween would take longer to play, and the rotation would be quicker, but the loop would also stop working properly. To fix it, remember to edit the action in Frame 30 so it reads gotoAndPlay(25);. You would have to repeat this fix every time you changed the location of the keyframe where the rotation starts. There’s a better way. Instead of making the destination of gotoAndPlay an explicit frame number, you can change the parameters to make the destination a named frame label, which is the same for the frame, no matter where it is located in the Timeline. You use frame labels in the next task.
In this task, you improve the gotoAndPlay action by supplying a frame label instead of a frame number. Follow these steps: 1. In the file created in the preceding task, click Frame 20 of the Animation layer, and insert a keyframe. In the Properties panel under Label, locate the Name form field. This is where we give Frame 20 a label. Name this frame Loop Start (see Figure 16.4).
TRY IT YOURSELF ▼ Use a Frame Label as the Destination of a gotoAndPlay Action
2. Click Frame 30 in the Actions layer, and open the Actions panel. 3. You’re going to modify the gotoAndPlay line in the Actions panel. Change 20 to “Loop Start” (with the quotation marks). The final script should read gotoAndPlay(“Loop Start”);, as shown in Figure 16.5. 4. Test the movie; it doesn’t look any different from the old version to the user. Now go back to the Timeline, click Frame 20, and then click and drag it so Loop Start is now Frame 10.
From the Library of Lee Bogdanoff
294
HOUR 16: Basic Interactivity
▼ TRY IT YOURSELF Use a Frame Label as the Destination of a gotoAndPlay Action FIGURE 16.4 If you label Frame 20 via the Properties panel, the destination of the gotoAndPlay action can change from an explicit number (20) to a label name (Loop Start).
FIGURE 16.5 This new version of the gotoAndPlay action is better than the original because the destination is a frame label.
5. Test the movie again. The animation now loops back to Frame 10, where you moved the Loop Start keyframe. The power of using a label as the destination of the gotoAndPlay action is that you can go back and move the location of the Loop Start keyframe to any frame you want, and it still works! Save this file for the next task.
Frame Actions In the previous task, you saw how placing one action in a keyframe and changing its parameters makes the playback head jump to a different frame. Step back a second and consider what else you’ve learned. Actions are instructions you want Flash to follow. Actions do things. You can modify actions by changing their parameters. This is all good information; however, if actions are instructions, exactly when does Flash follow those instructions? From the Library of Lee Bogdanoff
Making Simple Buttons
295
The answer depends on where you put the actions. It turns out in earlier versions of Flash you could put actions both in keyframes and on any object type, such as button instances, movie clip instances, and components. Now, in ActionScript 3.0, you can put code only in keyframes. So, as to when the code triggers, the answer is simple: when the playhead reaches the frame with the code. In the preceding task, you placed an action in a keyframe. In that case, the action was executed (that is, the instruction was followed) when the playback head reached that frame. If you put an action in Frame 10, it would not be followed until the playback head reached Frame 10. With an action in a keyframe, the user doesn’t do anything but wait for the playback head to reach the appropriate frame to see the action happen. Although this isn’t exactly interactivity, it’s quite powerful. For example, often it’s useful to place a stop() action in the first frame so your movie initially appears paused and doesn’t play until a play() action is encountered, like after the user clicks a button. Another example might be when you want to stop in the middle of an animation. All you need is a keyframe and a stop action. There are many more examples of keyframe actions, which are good for when you want something to happen at a certain moment in the animation, not only when a user clicks a button. It’s fairly intuitive to understand how the actions you place in keyframes trigger when the playhead reaches that frame. However, it’s more complex when you consider that scripts can effectively say, “When this event occurs, do this action.” For example, you might want an animation to start when the user clicks a button. In that case, your code is waiting for a mouse press. It’s easiest to always ask yourself, “What do I want to do, and when do I want to do it?” If you want something to happen when the keyframe is reached, put the code in that keyframe. If you want to wait for some event, you need to learn about listening for events. We get to that right after you learn how to make the most basic of event triggers—the simple button.
Making Simple Buttons Before we start, you’re going to take a short break from ActionScripting to learn how to create a button. There are only a few ways for the user to interact with your movie. Clicking a button is the easiest and most common. Other events users can trigger include key presses, such as pressing the arrow keys on their keyboards. You can create buttons and make them look cool without any ActionScript. Nothing happens when the user clicks unless
From the Library of Lee Bogdanoff
296
HOUR 16: Basic Interactivity
you write ActionScript to respond to that event. We start by creating the buttons, and then deal with the ActionScript in the next section. It’s easy to make a button because it’s another symbol type like Movie Clip or Graphic. Draw a shape, select it, choose Modify, Convert to Symbol, and then select Button. When you test the movie, the cursor changes when you roll over the button, indicating to the user that the button is clickable. Nothing happens yet, but we get to that in the next section, “Listening for Events.” On the surface, a Button symbol is like a Movie Clip. The main characteristic of a Button symbol is you have the opportunity to create two additional states for it. One is for when the user first rolls over the button and another for when he clicks on the button. Let’s create a button that takes advantage of button states.
▼ TRY IT YOURSELF Make a Simple Button
In this task, you make a simple but useful button. Follow these steps: 1. In a new file, draw an oval or a rectangle that becomes your button. 2. Use the Selection tool to select the entire shape. 3. Convert the shape to a symbol by selecting Modify, Convert to Symbol (or press F8). 4. Name the symbol MyButton; make sure you select the button behavior, and then click OK.
FIGURE 16.6 Any shape can be used as a button. The user’s cursor changes to a hand when it’s over the button.
5. Test your movie by using Control, Test Movie (or press Ctrl+Enter), and notice the way your mouse cursor changes when you place it over the button, as shown in Figure 16.6. 6. Close the .swf you’re testing, so you can edit the button. Double-click the instance on the Stage, and you are taken inside the MyButton symbol. Notice the Timeline looks different. It has only four frames, and they’re named to match the four possible button states. It should look like Figure 16.7.
From the Library of Lee Bogdanoff
Making Simple Buttons
297
TRY IT YOURSELF ▼ Make a Simple Button FIGURE 16.7 Four frames for the four states of a button are inside a button.
NOTE
The Four States
7. You create new keyframes for the Over and Down states. To do this, click the Over frame, and insert a keyframe. Select the Free Transform tool, and then scale the contents of the second frame (the Up state) by making it a tad larger. 8. Select the third frame (the Down state), and insert another keyframe. Select the button’s shape in the new keyframe (Frame 2), and nudge it two pixels down and two pixels to the right. 9. Test the movie. This time the button should grow when you roll over it; click, and move down and to the right when you click it.
A button state is the way the button looks at a particular moment in time. The Up state contains the appearance of the button in its normal state. The Over state contains the look for when the user hovers his cursor over the button. Down is the state when the user clicks. Hit is a special state in which you define what portion of the button you intend to be clickable. The user never sees the graphic you put into the Hit state, but the shape of that graphic is what the user must “hit” to trigger the button.
A few details about buttons are worth noting. First of all, you don’t have to create a different graphic in each state of the button. What might seem odd is you don’t need to have frames for the different states. Even though Flash tries to go to the Over state when users roll over your button, if nothing new is in that frame, they see what’s in the Up state. In addition to Up, Over, and Down, there’s another state called Hit. The Hit state is never visible to the user. It defines where the user must position her cursor to show a button’s Over state or where she must click to see the button’s Down state. Imagine you had a doughnut-shaped button. If you didn’t
From the Library of Lee Bogdanoff
298
FIGURE 16.8 Changing the shape contents of a button’s Hit state affects what portion is clickable.
HOUR 16: Basic Interactivity
set a Hit state, the user wouldn’t be allowed to click anywhere in the hole (similar to Figure 16.8). However, if you inserted a keyframe and drew a solid circle (no doughnut hole) in the Hit frame, the user could click anywhere within the solid circle. This can also be useful when you want a small button, but you don’t want to frustrate the user by requiring her to have the precision of a surgeon. It’s usually a good idea to make the Hit state big enough to easily click even if that means that it’s bigger than the button. In the task, “Make a Simple Portfolio Viewer,” at the end of this hour, you make a button with nothing in the Up, Over, or Down states. You draw a shape in only the Hit state. This creates an invisible button, which means you don’t see anything normally, when you roll over it, and when you click it. Even though you don’t “see” the shape in the Hit state, that shape makes the button clickable. While you’re working in Flash, invisible buttons show up as a semitransparent cyan tint, so you can resize and position them as needed. The advantage of an invisible button is you can use it on top of any other graphic. For example, you might have a large photo on which you want the user to be able to click on individual spots. If you didn’t use invisible buttons, which can be placed over other graphics, you’d have to cut up the image and make a new button for each slice. Figure 16.9 shows an example where several round invisible buttons are used on top of a photograph.
FIGURE 16.9 Invisible buttons enable you to make any area clickable rather than make a new button for each spot.
From the Library of Lee Bogdanoff
Listening for Events
Another important note about buttons: You can put anything you want into those three keyframes (Up, Over, Down). You get only one keyframe for each, but that doesn’t mean you can’t put more than one Movie Clip symbol in that frame. If you create a Movie Clip that contains a 10-frame animation and then place that Movie Clip in the Over state for a button, the user sees that animation play and continue to loop when her mouse is over the button. In this way, you can make animated buttons.
299
NOTE
No Buttons in Buttons You can put nearly anything into a button. The only exception is another button. Buttons nested inside of each other fail to respond to any ActionScript.
Now that you have created your own button, you have something to click during the ActionScript exercises that follow. The simple buttons you created are not the only kinds of buttons in Flash. These buttons (the ones you created by selecting Modify, Convert to Symbol) are officially called Simple Buttons. As you learn next hour, buttons are also available from the Components panel, the so-called UI Components. The primary difference is Simple Buttons are easy to create and support in only the four states. Some of the UI Components support additional states such as Disabled or Checked and Unchecked. Don’t worry about that for now; keep in mind that Simple Buttons enable you to create custom buttons quickly.
Listening for Events You’re about to learn the basics of writing ActionScript that triggers only when a specific event occurs. Remember in the earlier exercise, “Make an Action That Loops Part of Your Movie,” the ActionScript you put in the last keyframe told Flash to go back and play from Frame 20. Every time the playhead reached that last frame, it looked at the code and executed your ActionScript. Now you see how to write ActionScript that waits for an event—namely, when the user clicks a button. In this task, you add buttons that enable the user to stop and continue the animation from the task earlier this hour. Follow these steps: 1. Either use the file created in the task, “Make an Action That Loops Part of Your Movie,” or make a new Flash File (ActionScript 3.0) with a motion tween over several frames. Make sure you can see something moving while the animation plays. If you’re using the old file, make sure the publish settings are set for ActionScript 3.0; select File, Publish Settings, click the Flash tab, and then ensure the ActionScript version dropdown is set to ActionScript 3.0.
TRY IT YOURSELF ▼ Add Buttons to an Animation to Stop and Continue Playback
From the Library of Lee Bogdanoff
300
▼ TRY IT YOURSELF Add Buttons to an Animation to Stop and Continue Playback
HOUR 16: Basic Interactivity
2. Insert a new layer for the buttons. You don’t want to place buttons in the layer that has the animation; that would affect the tween. Name the new layer Buttons. 3. Into the new Buttons layer, draw a rectangle that becomes a button. Select it, and then convert it to a symbol by pressing F8. Name it MyButton, and make sure the behavior is set to Button. 4. You’re going to need two buttons, so either copy and paste the instance that is already on the Stage or drag another instance of the MyButton symbol from the Library onto the Stage in the Buttons layer. Apply a Tint color style to each instance—one red for Stop and one green for Play. As you recall, you do so by selecting the button instance on the Stage, using the Properties panel to select Tint from the Color drop-down list, and then selecting a color and percentage. 5. Give each button a memorable instance name: stopButton for red and startButton for green. Like adding a label, you use the Properties panel to set the instance names. Select them each in turn, and type in the name for each in the first text box near the top of the Properties panel. The instance names are necessary, so you can specify what should happen when the user clicks a button. 6. Now you’re going to write the code in a keyframe. The code tells Flash,, “When users click stop, Flash stops, and when they click start, Flash plays.”. Select the first keyframe in the Buttons layer, and open the Actions panel. Write the following code: stopButton.addEventListener ( MouseEvent.CLICK, myStopHandler ) function myStopHandler( evt ){ stop() }
Translating this code: The first line says the stopButton instance should broadcast the CLICK event to the homemade function called myStopHandler. That is, any time the user clicks the stopButton instance, it triggers the code inside the myStopHandler function. A homemade function always begins with the word function, followed by the name of your function; in this case, myStopHandler is followed by an opening and closing parenthesis, which is followed by an opening and closing curly brace ({}). Exactly what you put between the two curly braces is up to you. You can put one line of code or 1,000 lines of code. In this case, we put the Timeline action called stop(). 7. See whether it works so far. Select Control, Test Movie. Click the Stop button, and the animation should stop. Close the .swf you’re testing to add a listener for the CLICK event on the Start button.
From the Library of Lee Bogdanoff
Listening for Events
8. Go back to the first frame in the Buttons layer to add more code. Following the code that you have, add the following code: startButton.addEventListener ( MouseEvent.CLICK, myStartHandler ) function myStartHandler( evt ){
301
TRY IT YOURSELF ▼ Add Buttons to an Animation to Stop and Continue Playback
play() }
9. There’s not much new here. This time you’re sending the CLICK events on the start button to the myStartHandler function that, in turn, triggers the play() action. 10. Test the movie, and you find when you click the buttons, the movie plays and stops.
The ActionScript in the previous task can seem overwhelming if you’re new to programming. The good news is the way you handle events (that is, the way you write code that executes only after an event occurs) is consistent. As soon as you learn a few basics, you can extrapolate those basics to more advanced applications, and the ActionScript begins to look more familiar.
Understanding Event Handling Although the term event handling could be new to you, we’re talking about how you write code that reacts to various events, like when a user clicks a button. Other examples include an event that occurs when a sound reaches its end or when a key is pressed. Before you code anything, you always need to think about what you want to do, and when you want to do it. The “when” is the event, and we’re going to explain how you capture such events. The way you write ActionScript to handle events involves two parts. First, there’s an object that broadcasts events—in this case, the button. You identify both the object and the event you want to capture. Different object types can broadcast different events. The code you saw in the previous exercise used a command called addEventListener() to send the CLICK event to the homemade function, and even more specifically, the code inside that homemade function. In the preceding task, that’s the play() or the stop() code. The second part, you always need the code that handles the event, which is the destination where the events need to be broadcast. Think of it
From the Library of Lee Bogdanoff
302
HOUR 16: Basic Interactivity
this way: The button triggers all kinds of events, like the mouse rolling over, the mouse click, and the mouse release. Like a tree falling in the forest, if no one is listening, nothing really happens. The addEventListener() code listens for you and connects the event to the code you want to execute when the event occurs. Every time you write addEventListener(), it looks consistent. It’s always myObject.addEventListener(“someEvent”, myHandler);
You don’t say myObject. You replace that with the instance name of the object you want to handle events. You don’t say someEvent, but you replace that with the specific event. You also replace myHandler with the name of a homemade function, which must always follow this form: function myHandler ( evt ) { //any code you want }
Notice function is used verbatim. You can be creative with the function name, shown as myHandler, but don’t start with a number, and don’t use spaces in the name. The part that’s really important is what you put in between the curly braces. Right now we have a comment that reads: //any code you want. You replace that with one or more lines of code. As we mentioned, replace someEvent with a specific event that the object type supports. In the case of buttons, you could replace that with Click or mouseDown, among other values. Recall in the last exercise you used the seemingly more complex value MouseEvent.CLICK. That’s called a constant, and it’s a built-in feature of ActionScript that ensures you don’t make syntax errors. You can use Click or you can use MouseEvent.CLICK, and both work the same way. You can probably guess that if you used clickTime, it wouldn’t work, but it would fail silently, meaning you could spend a long time trying to hunt down the problem. However, if you tried MouseEvent.CLICK_TIME, Flash would immediately squawk at you when you tested the movie because of a compile-time error. Remember, the parameter needs to be a string that the object type supports. Using a literal string where you type it out between quote marks is risky because you never get a compile-time error if you spell something wrong. However, by using a constant, you never get far without a warning. As soon as you type the period after MouseEvent, you see a code completion drop-down from which you can simply select the event name you had in mind, as shown in Figure 16.10.
From the Library of Lee Bogdanoff
Listening for Events
303
FIGURE 16.10 The code completion drop-down helps you select the appropriate event name.
Properties and Methods Event handling helps you tackle the “when” in “What do you want to do, and when do you want to do it?,” but we haven’t looked far into the “what.” In the previous tasks, you’ve seen three pieces of ActionScript: stop(), play(), and gotoAndPlay(). Those are all called methods. They’re processes or things that do something. The addEventListener() is also a method but it’s different because you don’t get an immediate visual result the way you do when triggering stop() or play(). Another difference is in the way you used the addEventListener() method. You didn’t say “addEventListener(),” you said “someObject.addEventListener()” with someObject being the actual button instance name. The point is that methods can perform their action on a specific object. The form to trigger methods is always someInstance.someMethod()
If you go back to the first two tasks where we looped part of an animation with gotoAndPlay() and then made the entire animation stop() or play(), no instance names were ever used. In those cases, stop() is interpreted by Flash as meaning, “Stop the current Timeline.” This is important if you have a Movie Clip instance onstage, and it contains multiple frames, continuing to play even if you encounter the ActionScript stop(). If you want to address a specific Movie Clip instance and make it stop, you use the form someInstance.stop(). If the instance name of your Movie Clip is box, use box.stop(). You need to only name your instances if you intend to address them with ActionScript. The part that’s tricky is you need to find the methods that are supported by the object type. If you’re trying to tell a Movie Clip instance to do something, you use one of the methods of Movie Clips, such as stop() or play(). However, if you have an instance of a video, different methods might be available. In fact, videos use a method called seek(), which you can think of as similar to gotoAndPlay(). Videos and Movie Clips support different methods. It’s consistent however; you always use someInstance.someMethod().
From the Library of Lee Bogdanoff
304
TIP
Learning Without Memorizing It’d be cool if you could memorize every last method and property in ActionScript, but that’s not practical. Instead, it’s best if you step back and think about the task you’re trying to achieve, and write it out using your own words. This is called pseudocode. If you can write out the instructions for the task at hand using your own words, then the process of translating to actual ActionScript becomes mechanical. It’s not easy to “think in ActionScript.” So, start by thinking of what you want to achieve. Compare this to how you might mail a letter when traveling in a foreign country. You might not know the word for “post office,” but you can probably assume they have such a place; it’s just a matter of finding the correct word. This is similar to working in ActionScript and trying to change the volume for a video. You might not know whether the property is called soundLevel, volume, or loudness, but you can probably bet there is a way to change the sound level. If you map out what you want to achieve, you can use your own words, and then slowly replace that pseudocode with actual ActionScript as you hunt down the language syntax.
HOUR 16: Basic Interactivity
There’s another powerful way to make the objects onstage change in Flash, and it’s actually simpler than triggering methods. Remember, methods are processes or things that objects can do. Properties are a similar, but simpler concept. Properties are attributes that each Movie Clip instance can have or maintain independently. For example, two Movie Clips could have a different value for their width property. Even two instances of the same Movie Clip symbol can have different widths. The width property is one of many properties. Other properties of Movie Clip instances include x (horizontal position), y (vertical position), and rotation. The great news is you always use the same syntax to access properties: someInstance.someProperty
For example, you could say myMovieClip.x. If you step back and think about the meaning of myMovieClip.x, it doesn’t really mean much. If you intend to change the value of a property, you use this form: someInstance.someProperty = someValue
For example, to move a Movie Clip instance named myMovieClip, 100 pixels from the left edge of the stage, you’d say myMovieClip.x = 100
In this example you’re setting the x property to 100. You can read the equals sign as “is now equal to,” or in English, “myMovieClip’s x is now equal to 100.” Like methods, the available properties vary based on object types. Buttons, Movie Clips, and Videos all have a property for x, but only Videos have a totalTime property, which contains the total number of seconds in the video. One last point before you get to try all this out on some real tasks: Remember, if you want to only get the value of a property you still go back to the form someInstance.someProperty. For example, if you have two instances onstage named box1 and box2, you can align them both by using box1.x = box2.x
Notice it’s box1 that is moving so its x property is equal to box2’s. The following exercise should help solidify your understanding of ActionScript.
ActionScript Application The task that remains this hour gives you a chance to practice what you’ve learned so far, but it’s also a practical task.
From the Library of Lee Bogdanoff
Listening for Events
In this task, you make a tool that enables you to view different images. Most of the work in this task revolves around structuring the file and not so much writing ActionScript.
305
TRY IT YOURSELF ▼ Make a Simple Portfolio Viewer
1. Create a new Flash, and be sure to select the first option (ActionScript 3.0). 2. Draw a rectangle to hold the content. If you plan to import photos later, you should make this rectangle big enough to hold those images. 3. Select the entire rectangle, and convert it into a Movie Clip by choosing Modify, Convert to Symbol (or press F8). Make sure you select the Movie Clip behavior as it might be set to Button from a previous task. Call this symbol Content. 4. Double-click the instance of Content, so you can go inside it to edit its contents. Click Frame 4, and press F5 to insert frames. This layer is the background. Name this layer Background. 5. Insert a new layer by choosing Insert, Timeline, Layer, and drag this new layer above the Background layer. Name this layer Photos, and then select all four frames in the Photos layer. A quick way to select all frames is to click the layer name. With all frames in the Photos layer selected, press F6 to convert all the frames into keyframes at once. 6. Go to Frame 2 of the Photos layer, and draw a rough A. You can replace this later with an imported photo. Go to Frame 3, and draw a B; go to Frame 4, and draw a C. If you know you are replacing this content layer, draw the rough A, B, and C to make testing easier. The inside of the Content Movie Clip should look like Figure 16.11. FIGURE 16.11 The Timeline of the Content Movie Clip has two layers: one for the background and one with keyframes for each piece of content.
From the Library of Lee Bogdanoff
306
▼ TRY IT YOURSELF Make a Simple Portfolio Viewer
HOUR 16: Basic Interactivity
7. You’re finished with the Content Movie Clip, so return to the main Timeline by clicking Scene 1. 8. Select the instance of the Content Movie Clip, and use the Properties panel to give it the instance name myContent. This enables you to address it in your ActionScript code. 9. It’s time to add three buttons to enable the user to jump to any one of the three frames (2–4) inside the myContent instance. Rather than make three new buttons, you make a single invisible button and place three instances on top of three thumbnails of the content. Before making the invisible button, however, you need to create the thumbnails the user sees. It doesn’t really matter how you create the thumbnails because you are putting invisible buttons on top of it. You could draw shapes, import images, or use Movie Clips. We show you an interesting trick, although it might not be applicable to every project. 10. For the thumbnails, drag three more instances of the Content symbol from the Library onto the Stage. Select all three, and use the Properties panel to change the instances’ behavior from Movie Clip to Graphic. Use the Free Transform tool to resize them to a smaller, convenient thumbnail size (maybe one-fourth of their original size). Position these three instances vertically on the left side of the main myContent instance. 11. You don’t need to give these three thumbnails instance names. In fact, you can’t because their behavior is Graphic. Use the Properties panel to individually set each instance, so it displays the content users navigate to when they click. Graphic symbols have a handy feature where you can set their First Frame. Select the first thumbnail, use the Properties panel to ensure the Options for graphics drop-down reads Single Frame, and change the First field to read 2. You should see the thumbnail display that rough A you created inside the master Content Movie Clip. 12. Use the same technique described in step 11 to change the second thumbnail to display the B (set its first frame to 3). Then, set the last thumbnail to display the C (first frame goes to 4). 13. Finally, to make the invisible button, use the Rectangle tool to draw a square off to the side that’s the same size or bigger than one of the thumbnails. Select the drawn square, and convert it to a button by choosing Modify, Convert to Symbol (or press F8 and choose Button). You can name it Invisible. Click OK, and you see this button is far from invisible. That’s because the square you drew is in the Up state. Double-click the instance of Invisible, so you can move the shape into the Hit state. Click once on the Up keyframe in the Invisible
From the Library of Lee Bogdanoff
Listening for Events
307
TRY IT YOURSELF ▼ Make a Simple Portfolio Viewer FIGURE 16.12 An invisible button’s Timeline has three blank frames and graphics in its Hit state. The faded contents shown are on the main Stage—not in the button.
button, and then click and drag to move the keyframe to the Hit state. The button’s Timeline should look like Figure 16.12. 14. Return to the main Timeline by clicking Scene 1, and you see the Invisible button is semitransparent cyan. Create two more instances, and place the three invisible button instances on top of the three thumbnails. 15. Use the Properties panel to individually set the instance names for the three buttons as follows: buttonA, buttonB, and buttonC. The code is basically going to say, “When users click buttonA, make the content movie clip go to Frame 2; when users click buttonB, make the content go to Frame 3,” and so on. There’s one last touch worth adding. 16. Let’s highlight the button the user selects. Homemade buttons don’t have a built-in highlight feature. Rather, you can draw a rectangle or check mark that moves to appear on top of the most recent button the user clicks. To do this, use the Brush tool to draw a check mark. Change the Stroke to something thick. Select this check mark, and convert it to a Movie Clip named Highlight. Make sure you select the Movie Clip option in the Convert to Symbol dialog. Use the Properties panel to name the instance highlightClip. Finally, place the highlightClip instance on top of one of the thumbnails, and then use the arrow keys to move the highlight up until it’s offscreen. This way the user doesn’t see it at the beginning, and you need to change only the vertical location to align with whichever button the user clicks.
From the Library of Lee Bogdanoff
308
▼ TRY IT YOURSELF Make a Simple Portfolio Viewer
HOUR 16: Basic Interactivity
17. The structure was the hard part. The ActionScript part looks simple in comparison. Select the first keyframe in your file, and enter the following code into the Actions panel: myContent.stop() buttonA.addEventListener( MouseEvent.CLICK, clickA ); buttonB.addEventListener( MouseEvent.CLICK, clickB ); buttonC.addEventListener( MouseEvent.CLICK, clickC ); function clickA( evt ){ highlightClip.y = buttonA.y; myContent.gotoAndStop(2); } function clickB( evt ){ highlightClip.y = buttonB.y; myContent.gotoAndStop(3); } function clickC( evt ){ highlightClip.y = buttonC.y; myContent.gotoAndStop(4); }
Stop for a second and catch your breath! We take a closer look at this code, but first, look it over yourself. See if you can figure out what each line is doing before reading ahead. Some of it should be obvious, but some isn’t. Don’t worry; give it a try, and you’ll be surprised by how much you understand. Figure it out? The first line triggers the stop() method on the myContent instance. Without this, the myContent instance would be looping at the start. The next three lines use addEventListener() to send the CLICK event from each of the three button instances (buttonA, buttonB, and buttonC) to the three homemade functions (clickA(), clickB(), and clickC()). Those three functions look nearly identical. The code inside the three custom functions does the same two things: First, it sets the highlightClip’s y property equal to the respective button’s y property, and second it triggers the gotoAndStop() method on the myContent instance to display the appropriate frame number. This code is created to be useful and not terribly complex. In fact, it’s based on what you learned earlier this hour. That’s not to say it’s the most adaptable code possible. Every additional button you create requires another addEventListener() and another function (clickD, clickE, and so on). After you become more skilled with ActionScript, adapting this code to be more efficient will be an easy task for you. Look at how far you’ve come!
From the Library of Lee Bogdanoff
Summary
309
Summary This hour touched on the fundamental things you can do with ActionScript. You have learned how code can be placed in a keyframe to execute when that frame is reached. You’ve also learned how to set up event handlers so code executes only when the specified event occurs. We got into some advanced topics such as triggering methods and setting properties. The content covered this hour is a giant first step into an even bigger topic of ActionScript. Although a lot of new material has been introduced here, we presented the topics in a way that is consistent with more advanced topics that you’ll explore as you grow. It was a lot to learn, but you’ll see the similar code tasks coming up again and again as you develop your ActionScript skills.
Q&A Q. I put the action gotoAndPlay(5) in the last frame of my movie, and I swear the movie never reaches the last frame because I have some text that is supposed to appear briefly on the Stage on just that last frame. It works only if I put the graphics one frame before the gotoAndPlay action. Why? A. This is a critical concept: Frame actions are executed before the on-theStage graphics of that frame are displayed. If your action says to go to another frame, it goes to the other frame before it draws graphics on the Stage. Q. Why does my movie loop, effectively doing a gotoAndPlay(1) on the last frame, even though I haven’t put any actions in it? A. The option to automatically loop is set by default when you test a movie and when you publish a movie. While testing, you can uncheck the option to loop from the Control menu of the Flash Player, not the Control menu of the Flash authoring program. If you turn this off, you most certainly don’t see the movie loop unless you include an action to make it loop. Normally, you don’t need a stop action at the end of your Timeline; if you simply uncheck the Loop option when you publish, the movie automatically stops on the last frame. Q. Which action do I use to create a commercial video game? A. We are taking baby steps first. It’s amazing the kind of powerful things you’ve done this hour. It’s going to take a lot more work before you’re cranking out video games; although you can create amazing games by using Flash, it takes a lot of work. For now, we’re just laying the foundation.
From the Library of Lee Bogdanoff
310
HOUR 16: Basic Interactivity
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. Where can buttons be placed in your movie? A. In the main Timeline only. B. Anywhere you want: in the main Timeline or a Movie Clip’s Timeline, just not inside another button. C. Anywhere you want, including inside other buttons. 2. What is an action? A. Anything that moves on the Stage. B. An instruction snippet that tells Flash what to do. C. What programmers call a function. 3. What is a great technique to make coding a little easier? A. Copy the code out of this book. B. Get a friend to help. C. Use pseudocode. 4. What’s the difference between a method and a property? A. A property is the current value for an attribute, and a method is more involved because it does something. B. They’re the same; property is the old name for method. C. You lost me back on the first page of this hour.
From the Library of Lee Bogdanoff
Workshop
311
Quiz Answers 1. B. Or possibly C is correct if you don’t mind that the button doesn’t work. We just wanted to remind you not to put buttons inside buttons. 2. B. Action is a generic term, so Answer B is the best of these definitions. 3. C. If you can organize your ideas using pseudocode, it’s a matter of mechanics to convert it to real code. Conversely, if you can’t organize your ideas, you can’t build anything because it’s too vague. 4. A. Another way to tell them apart is that methods always include parentheses. The parentheses can hold parameters, though not all methods require them. If you answered C, please note you can still do tons of cool Flash stuff without ActionScripting.
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 17 Introducing Components
Last hour you had the option to learn some programming. You might have chosen to skip it because it covered material that was more technical than you’d prefer. If you did read it, you might have wished it was more technical. This split is natural. Some people like to express their creativity by solving puzzles, whereas others like more artistic endeavors. One of the great things about Flash is that it can appeal to both types of people. Components are a great example of this. A component is a version of a Movie Clip that has programming code built into it so a nontechnical person can use it without having to know how it works. Anyone can use a component. Depending on the features of the component, it can do some pretty impressive things. Despite the simplicity that components offer, you still have to invest some time to learn how components work. The features the components provide are so advanced that it’s worth the investment to learn.
WHAT YOU’LL LEARN IN THIS HOUR: . How the common user interface components can help standardize your application . How to populate components with customized data . How to make components trigger your own ActionScript
This hour you learn both which components are available and the basics of how to use them. Next hour you learn more advanced topics and many more practical uses for components.
What Is a Component? We described components as movie clips with code in them. However, a Movie Clip with actions inside doesn’t automatically become a component. A Movie Clip symbol becomes a component when the component developer identifies parameters that can be set differently for each instance. It’s similar to how you can scale or tint any Movie Clip. In the case of components, you can set other properties in addition to the scale and tint. For example, you can set the label on each instance of a Button component to change the word that appears on the button. The most common components are used for user interface (UI) elements such as buttons and menus. However, a component is a clip with code and the capability to have initial values set differently for each instance. From the Library of Lee Bogdanoff
314
HOUR 17: Introducing Components
You typically follow this order to use a component: 1. Place it on the Stage. 2. Populate it with data. For the Button component, for example, you might only change its label. 3. Define the ActionScript that gets triggered when the component’s event fires, such as how you want to handle the click event for the Button component. 4. Place additional components that might work together, like the RadioButton component, of which you always want two or more.
FIGURE 17.1 You can use the ComboBox component to enable your users to make selections.
▼ TRY IT YOURSELF Manually Populate the ComboBox Component
We spread all these steps into separate tasks in this hour. The first series of tasks uses the ComboBox component. This is basically a drop-down menu from which the user can select any option, as shown in Figure 17.1. As with any component, you can define exactly how the ComboBox component is populated (that is, what’s listed in the drop-down list), as well as how it behaves (for example, what it does when the user makes a selection). You do that in the next task. Later this hour you build on this task, but in this task, you populate the component. Follow these steps: 1. Create a new Flash file, be sure to select the first one listed (ActionScript 3.0), and open the Components panel by selecting Window, Components. It’s possible to install sets of components, so make sure the User Interface components section is fully expanded, as shown in Figure 17.2. 2. Drag the ComboBox component onto the Stage as if you were dragging an instance from the Library. You can use the Free Transform tool to change its width without causing it to distort, but don’t rotate or skew it. With the instance on the Stage still selected, open the Component Inspector panel. 3. Before you populate the parameters, give this instance a unique name so later you can access it by using ActionScript. Name the instance myComboBox. You see this instance name reflected near the top of the Component Inspector panel. 4. In the Component Inspector, select the line dataProvider. Click the Magnifier button at the right of this line (see Figure 17.3).
FIGURE 17.2 Make sure the User Interface components are fully expanded.
5. In the Values dialog box that appears, click the Plus button, and then replace the text label0 that appears in the right column with Adobe. This is the first item to appear in the ComboBox component. For each item, you have a label, which the user sees, and an optional slot for
From the Library of Lee Bogdanoff
What Is a Component?
data. In the data field, type http://www.adobe.com. Later you use ActionScript to grab that value and hyperlink to it. Repeat the process of clicking the plus button to create two more items—one for Microsoft and another for Sams. The data you enter for Microsoft should be http://www.microsoft.com, and the data you enter for Sams is http://www.samspublishing.com. You can click any value you have created and move it up or down in the list by pressing the arrow buttons. The completed Values dialog should appear as shown in Figure 17.4. Click OK when you’re finished.
315
TRY IT YOURSELF ▼ Manually Populate the ComboBox Component
6. Test the movie, and you see the ComboBox component reflects the values you added and enables you to make selections. This is a sophisticated piece of code, and all you had to do was provide unique data. The only problem is nothing happens when the user selects an item because you don’t have any code that reacts to the event of the user changing the ComboBox. You resolve all this in the next task, “Populate the ComboBox Component by Using ActionScript,” by setting up an event listener much like you first did last hour. Keep this file for the next exercise.
FIGURE 17.3 You populate the ComboBox’s dataProvider property by first clicking the Magnifier button in the Parameters panel.
FIGURE 17.4 The completed dataProvider Values panel contains labels and data values for three websites.
A common attribute of many components is the way they can contain a data provider—specifically, a list of labels paired with data. The user sees the labels, but only your ActionScript can see the data. The data provider gives you a convenient place to store additional details that the user doesn’t need to see. In the case of the ComboBox component from the preceding task, the labels are what the user sees onscreen, and the data is the actual web addresses to which we jump. Let’s do that now.
From the Library of Lee Bogdanoff
316
▼ TRY IT YOURSELF Populate the ComboBox Component by Using ActionScript
HOUR 17: Introducing Components
As the next step toward enabling the user to navigate with the ComboBox component, you need to set up the ActionScript to listen for changes to the ComboBox, and then grab the selected item’s data. Follow these steps: 1. Start with the file you created in the previous task, select Frame 1, open the Actions panel, and then type this code: myComboBox.addEventListener( Event.CHANGE, myHandler ); function myHandler ( evt ) { var myURL = new URLRequest( myComboBox.selectedItem.data ); navigateToURL( myURL ); }
The first line says that when the myComboBox instance triggers a CHANGE event it should broadcast to the custom function named myHandler. Notice inside the myHandler function you need to first fashion a URLRequest, and then trigger navigateToURL(). The part specific to components is in the portion myComboBox.selectedItem.data. That grabs the URL for the company selected in the ComboBox. That code says to take from the myComboBox instance its selectedItem property (both the label and data for the currently selected item), and then grab just the data portion of that. 2. Test the movie at this point, and it appears no different than it did at the end of the preceding task. However, when you make a selection from the ComboBox, your browser takes you off to one of those websites. Because you’re still in Flash, your browser launches first. Normally, you publish your Flash creation to the web, so users are already in a browser. This ComboBox enables them to navigate away to another site.
The custom myHandler function created in this task dynamically navigates out to any website. Consider this hard-wired code that always goes to adobe.com: var myURL = new URLRequest( ‘http://www.adobe.com’ ); navigateToURL( myURL );
Naturally, you don’t want to always go to that site. Instead of the hardwired Adobe URL, we used the dynamic expression myComboBox. selectedItem.data. In pseudocode, this expression says, Grab the data from the selected item in the combo box. Next, you see additional ways to dynamically execute different code based on what the user has selected. In this case, it is based on the selected item in the ComboBox. In the next task,
From the Library of Lee Bogdanoff
Using the Button Component
317
you send the CLICK event from several buttons to the same custom function rather than create a unique function to handle each button’s click. It’s similar to the ComboBox task because you channel several options through a single function.
Using the Button Component In Hour 16, ‘Basic Interactivity,’ you made your own custom Simple Buttons, so the following exercise using the Button UI Component seems familiar. The only difference is you don’t have to draw anything. The graphics for your button are already created. However, we want to introduce a more advanced approach that involves channeling the events from multiple buttons through the same function. For better or worse, it also means we also have to introduce how to use if statements in ActionScript. We do this in two parts: The first task is identical to the approach used last hour, and then the second task shows you a more advanced approach.
In this task, you will create and write the code for multiple buttons that will display different images when clicked. 1. Create a new ActionScript 3.0 Flash file. Draw a Rectangle, select it, and convert it to a Movie Clip by pressing F8. Call this symbol Photos. Double-click to edit its contents. Click Frame 5 inside the Photos symbol, and press F5 to insert frames. Name the sole layer Background. Create a new layer, and name it Photos. Make sure the Photos layer is above the Background layer. In the Photos layer, make every frame a keyframe. You can simply click the layer’s name and press F6. In the first frame of the Photo layer, use the Brush tool to draw a 1. In Frame 2, draw a 2. Return to the Timeline by clicking Scene 1.
TRY IT YOURSELF ▼ Create Multiple Buttons for a Portfolio
2. Use the Properties panel to name the instance of the Photos symbol photoClip. 3. Open the Components panel by choosing Window, Components (or press Ctrl+F7). Drag two instances of the Button component from the User Interface category onto the Stage. Use the Properties panel to name these instances photoButton1 and photoButton2, respectively. 4. You can label the buttons via the Parameters panel, but we do it all in ActionScript this time. Select the first keyframe and open the Actions panel. Type this code: photoClip.stop(); photoButton1.label = ‘Image 1’
From the Library of Lee Bogdanoff
318
▼ TRY IT YOURSELF Create Multiple Buttons for a Portfolio
HOUR 17: Introducing Components
photoButton2.label = ‘Image 2’ photoButton1.addEventListener(MouseEvent.CLICK, clickPhoto1) photoButton2.addEventListener(MouseEvent.CLICK, clickPhoto2) function clickPhoto1 ( evt ){ photoClip.gotoAndStop( 1 ) } function clickPhoto2 ( evt ){ photoClip.gotoAndStop( 2 ) }
The first line stops the photoClip instance from playing. The next two lines populate the labels for the buttons by setting the label property for each one. Finally, the fourth and fifth lines use addEventListener() to broadcast the CLICK events from each button to a unique custom function for each one. 5. Test this movie, and you should be able to select either button to see a different frame of the Photos symbol. However, if you want more buttons, each extra button would mean you need to duplicate the addEvent Listener part as well as create a new custom function. Here’s a modified version of the code that is more extensible. You can replace the code you have entirely with this code: photoClip.stop(); photoButton1.label = ‘Image 1’ photoButton2.label = ‘Image 2’ photoButton1.addEventListener(MouseEvent.CLICK, clickPhoto) photoButton2.addEventListener(MouseEvent.CLICK, clickPhoto) function clickPhoto ( evt ){ var destinationFrame = 1; if ( evt.target == photoButton1 ) destinationFrame = 1 if ( evt.target == photoButton2 ) destinationFrame = 2 photoClip.gotoAndStop( destinationFrame ); }
Both buttons broadcast their CLICK events to the same homemade function, clickPhoto. This way you don’t need a new function for each new button. Inside the clickPhoto function the code refers to the evt parameter, which, up to now, we’ve completely ignored. If you leave it out, you receive an error. The evt parameter, short for event), is used to contain additional details about exactly what caused the clickPhoto function to get triggered. In this case, you can see that either button could have triggered that function. After you’re inside the function, you can use that parameter to determine which button was the last one clicked. The evt parameter’s target
From the Library of Lee Bogdanoff
Using the RadioButton Component
319
property is a reference to the button. That’s the most common property you probably use, but there are more. In the case of keyboard events, the evt.charCode tells you which key was pressed. Here’s an example: function myKeyHandler( evt ) { trace( evt.charCode ) } stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyHandler)
Although there are a couple new things such as using stage.addEventListener() to broadcast keyboard input, the main thing is you can find out which key was pressed by looking at the charCode property of the evt parameter.
Using the RadioButton Component With radio buttons, you can select only one button at a time. They’re like station-tuning buttons on car radios. Selecting which radio station to play requires you pick just one. If you change your mind, that’s fine, but you can’t play two stations at once. It’s important to use radio buttons only for this kind of situation—for instance, when the user selects from mutually exclusive choices, such as male and female. On the other hand, check box buttons(for which there’s another User Interface component) enable for multiple selections. You always use RadioButton components in groups—for example, two buttons (male and female) in a gender group and three buttons (novice, intermediate, expert) in a skill level group. Like other components, each RadioButton component has a label the user sees and a value where you can store details accessible only from your ActionScript. Depending on the interaction you’re building, you might want to trigger code immediately when the user makes a selection or wait until the user is satisfied with his selection and clicks Continue. We suggest you avoid proceeding to a new screen immediately after a user clicks because the user might have made a mistake or might want to change his mind. The good news with the RadioButton component is the code is consistent. The one new concept is the components are part of a RadioButtonGroup. You explore all these details in the following task.
From the Library of Lee Bogdanoff
320
▼ TRY IT YOURSELF Use the RadioButton Components
HOUR 17: Introducing Components
In this task, you use a radio button to ask the user to specify his skill level (novice, intermediate, or expert). Follow these steps: 1. In a new ActionScript 3.0 file, open the Components panel, and, one by one, drag three instance of the RadioButton component onto the Stage. 2. Arrange the three RadioButton component instances vertically. You can use the Align panel by pressing Ctrl+K to space out or line up the buttons. Select the top instance and access the Parameters tab in the Component Inspector panel, as shown in Figure 17.5.
FIGURE 17.5 You populate the three RadioButton component instances one at a time by using the Parameters tab in the Component Inspector panel.
NOTE
Numbers for Data You might have noticed that we are using a code system where easy is 1, intermediate is 2, and expert is 3. We could have used values such as ‘easy’ rather than a number, but using a numbering system is less touchy than storing strings in the data parameters. You don’t risk as many typos and misspellings, plus it makes your movie a tiny bit more efficient.
3. Change the label to Novice, and set the value to 1. Notice the group name RadioButtonGroup. Don’t change this because the other buttons have the same name by default. Only one option in each group can be selected at a time. If you add another group later (say, with Male and Female buttons), you’d want all buttons in the other group to share a different group name (say, genderGroup). Give this first RadioButton component the instance name noviceButton. 4. Change the label, data, and instance name of the second button to Intermediate, 2, and intermediateButton, respectively. Set the label, data, and name for the last button to Expert, 3, and expertButton, respectively. 5. Test the movie. Only one RadioButton component can be set at a time.
From the Library of Lee Bogdanoff
Using the RadioButton Component
321
Unlike the Button components you created in the previous task, each of your RadioButton component instances changes to reflect its current label. That is, you can see the labels Novice, Intermediate, and Expert without even testing the movie. This feature is called Live Preview, and it shows the benefit of populating a Component’s label property with the Parameters panel over populating it in the ActionScript code, as you did in the previous task. Although your radio buttons are nice, they don’t really do anything. Follow these steps to give the buttons some practical use: 1. Using the movie from the preceding task, drag a Button component onto the Stage. Use the Component Inspector to set this button’s label to Continue. Give the Button component the instance name continueButton.
TRY IT YOURSELF ▼ Apply the Radio Buttons
2. Make sure the button is on the Stage in Frame 1 with the three instances of radio buttons. Go to Frame 2, and insert a blank keyframe by pressing F7. On the screen, you create the content for the Novice. Put some text onscreen that says ‘Welcome novice’. Insert a blank keyframe on Frame 3, and draw the content for the Intermediate user. Finally, on Frame 4, insert a blank keyframe, and draw some content for the Expert. Go back to Frame 1 to set up the code for the user to interact with these buttons. 3. Click Frame 1, and open the Actions panel. Type this code in it: stop() continueButton.enabled = false noviceButton.addEventListener(MouseEvent.CLICK, revealContinue ) intermediateButton.addEventListener(MouseEvent.CLICK, revealContinue ) expertButton.addEventListener(MouseEvent.CLICK, revealContinue ) function revealContinue ( evt ) { continueButton.enabled = true } continueButton.addEventListener(MouseEvent.CLICK, clickContinue ) function clickContinue ( evt ){ var frameNumber = 1 + Number( noviceButton.group.selectedData ) gotoAndStop ( frameNumber ) }
From the Library of Lee Bogdanoff
322
▼ TRY IT YOURSELF Apply the Radio Buttons
HOUR 17: Introducing Components
There’s an interesting approach here. The first line stops the Timeline from continuing past the buttons in Frame 1. The second line of code sets the enabled property on the continueButton instance to false so the user can’t click it yet. All three RadioButtons broadcast their CLICK to the homemade function revealContinue. That function does nothing except enable the continueButton instance. The continueButton broadcasts its CLICK event to the homemade function clickContinue. It is inside that function that we first calculate the frame number by adding 1 to the selectedData property of the group to which the noviceButton is a part. It’s definitely weird that we’re using just the noviceButton instance, but notice we’re grabbing the selectedData (that’s the data parameter from whichever button in the group is currently selected). Because all the RadioButton instances are part of the same group, it doesn’t matter which button we use. 4. Test your movie.
It would be nice if components required even less scripting than they do. Even this simple example took a bit of work. The previous tasks on the ComboBox, Button, and RadioButton gave you a solid foundation on the basics. Next hour, you get to create more complete examples and explore other components. Before then, in the rest of this hour, you learn ways to change the component’s appearance.
Changing Component Appearances Components include code and graphics. However, you can change both the style of various elements, such as the font for the labels, as well as any of the graphics, called skins, contained in the component. For example, you could use italic text for the label on a button. Or modify the Button, so it is circular. In fact, you can change even more attributes, such as the way the ComboBox opens and closes, but this section concentrates only on controlling how the components look. We cover two approaches here: First, you see how to manually edit a component’s skin. Second, you see how you can use ActionScript to change any style element in the component, including text layout and skins.
From the Library of Lee Bogdanoff
Changing Component Appearances
323
Manually Editing Component Skins If you want to change the appearance of any component, simply doubleclick an instance onstage, and you are faced with all the editable elements. For example, Figure 17.6 shows the contents of a Button component. FIGURE 17.6 You can manually edit any or all of the Button component’s 10 states.
It’s almost too easy. For example, if you want to change the Up state for the Button component, just double-click the rectangle to the left of the word Up, and you are taken inside the Button_upSkin symbol, where you can edit the graphics. To start, we recommend editing only the colors, such as the button’s fill. If you decide to edit the shape of a Component, you want to be sure each state is the same size so the outlines match. Otherwise, your users might experience a blinking effect like a cat chasing its tail. They roll over the Up state; then, when faced with the Over state that’s not the same shape, the cursor might not be over the button, so it reverts to the Up state, and the blinking repeats. Components take advantage of a powerful feature called 9-slice scaling. The feature enables you to scale components to any shape without distorting the corners. In Figure 17.7, you can see the Button component scaled to various shapes, along with a mocked-up version of how they’d look without the 9-slice feature.
From the Library of Lee Bogdanoff
324
HOUR 17: Introducing Components
FIGURE 17.7 Without 9-slice scaling (shown on the right), the Button component would look inconsistent whenever you scaled it.
With 9-slice scaling
Without 9-slice scaling
The reason we mentioned 9-slice scaling is because you see the nine slices when editing the skins, such as the Button_upSkin shown in Figure 17.8. Probably the best advice is don’t move those guides. Otherwise the graphics in the corners never stretch, the graphics in the center always stretch, and then the middle sides and middle tops stretch only when the component is scaled taller or wider, respectively. FIGURE 17.8 The 9-slice scaling guidelines are shown when the skins are being edited.
Never stretches
Never stretches
Stretches as component grows wider
Stretches as component grows taller
Stretches as component grows taller
Never stretches
Never stretches Stretches anytime component scales
Stretches as component grows wider
Setting the Style of a Single Component Instance Although editing the visual elements inside a component is fairly intuitive, there are a couple of reasons why you might want to change its look with ActionScript. The big reason is you want to modify the text formatting, like for the label on a button. Other reasons are that you want to change a visual
From the Library of Lee Bogdanoff
Changing Component Appearances
325
element in one instance of a component or in one class of component, like all the Button instances. The mechanism to change visual styles using ActionScript is through the methods setStyle() and setComponentStyle(). The only catch is the way you do it is different when affecting one instance, one component class, or all components in your movie. We start with affecting just one instance. The form is myInstance.setStyle(‘theStyle’, value);
You have to replace myInstance with the instance name of your component, replace theStyle with the supported style found in the Help files, and replace value with an actual value. It turns out the most common style you’ are changing is the textFormat. However, when you set the textFormat style, you must set it equal to a TextFormat object. That is, you first create a TextFormat instance, modify it (such as by setting the font and size), and then use it in place of the value when calling setStyle(). Here’s an example that changes the font used for a RadioButton instance named myRB: var myFormat = new TextFormat() myFormat.color = 0x00FF00 myFormat.size = 20 myRB.setStyle(‘textFormat’, myFormat)
Notice the first three lines involve creating and customizing the myFormat variable, and then in the last line, the style is finally applied to the myRB instance.
Setting the Style of One Component Type You can affect all instances of a particular component class by using this complex code: import fl.managers.StyleManager import fl.controls.Button var myFormat = new TextFormat() myFormat.color = 0x00FF00 myFormat.size = 20 StyleManager.setComponentStyle(Button, ‘textFormat’, myFormat)
The first two lines are necessary to use the StyleManager and to reference the Button component class. The next three lines fashion the TextFormat instance (myFormat). Finally, the last line triggers the setComponentStyle() method, which is similar to setStyle(), but includes the component class you want to affect (in this case, Button).
From the Library of Lee Bogdanoff
326
HOUR 17: Introducing Components
Setting the Style of All Components Finally, you can affect a style for all instances of all components with the following code: import fl.managers.StyleManager var myFormat = new TextFormat() myFormat.color = 0x00FF00 myFormat.size = 20 StyleManager.setStyle( ‘textFormat’, myFormat)
This code is nearly identical to what you would use to set the style for a component class, except we’re using the StyleManager’s setStyle() method instead of setComponentStyle().
Summary Components have grown up since their ancestors first appeared in Flash 5 as Smart Clips. Components help bridge the separation between programmer and nonprogrammer. This hour you have learned how to populate components manually by using the Component Inspector, as well as how to populate components by using ActionScript. In addition, you have learned how to use addEventListener to make components trigger your own custom code. This hour you have seen details of the ComboBox, Button, and RadioButton components. You see many more components next hour. This hour you have also learned the basic scripts for changing the styles of components.
Q&A Q. Is there a benefit to using components instead of doing everything from scratch? A. Definitely. The main benefit is components offer a quick way to build an application with ready-made and quite complex pieces that alleviate you from having to make a customized version each time. For example, we’ve probably built homemade scrollbars in more than 50 projects. Each time we had to do it from scratch. Although the components are customizable (both as far as the content they display and the visual skins), sometimes you do need to build things from scratch.
From the Library of Lee Bogdanoff
Summary
327
Q. If components are supposed to make things so easy, why was there so much ActionScript this hour? A. You can populate many attributes of your components via the Parameters panel. However, you do need ActionScript to make the components do anything. Consider if you could do everything via the Parameters panel—that would mean a lot of clicking around. With a little bit of ActionScript, you can make the components do some powerful stuff. The point is components are designed to require the absolute minimum code from you. Q. I’m beginning to like components, but I see there are more than just the ComboBox, Button, and RadioButton. How do I learn to use those? A. First, the basics covered this hour should give you enough to get you started with all the components. They’re very consistent. The idea with this hour is to concentrate on the consistencies, and then next hour, we explore applications that use additional components. Q. I liked how I was able to change the skin on the Button component, but I want to change the skin on just one instance. When I make a change, it affects all Button instances onstage. What if I want one button to be tinted red? Is that possible? A. There are actually a few ways to do that. First, see whether you can use the Tint option in the Properties panel’s Color drop-down if you’re changing only the color. (Note you don’t see the effect until you test the movie.) That’s not quite the same as going into and editing the skin for the button. To create an alternative skin for one instance, find the Movie Clip symbol in the Library for that skin. For example, inside Component Assets is a folder called Button Skins; inside that is a symbol Button_upSkin. Right-click on that symbol, and duplicate it. Call it Button_upSkin_MINE, and before you click OK, use the advanced part of the Duplicate Symbol dialog (expand it if it’s not visible). Click the option Export for ActionScript. (It also checks the Export in the first frame you want selected.) Ensure the Class field reads Button_upSkin_ MINE. Click OK, and then edit the symbol’s contents. When you’re finished, you can replace the upSkin style for any Button instance by using this code: myInstance.setStyle(‘upSkin’, Button_upSkin_MINE)
From the Library of Lee Bogdanoff
328
HOUR 17: Introducing Components
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. The Button component is identical to the homemade Simple Buttons because they both only have states for Up, Over, Down, and Hit. A. True. B. False. Simple Buttons have several other states. C. False. The Button component has several other states. 2. What happens if you try to scale a component to make it wider? A. It works, but the text gets distorted. B. It works, but the shape might appear distorted. C. It works; thanks to the 9-slice scaling feature. 3. You should use radio buttons only when providing the user with a selection of audio tracks. A. True. Why do you think they’re called radio buttons? B. False. Radio buttons can be used for any purpose you want. C. False. Radio buttons should be used only for mutually exclusive choices.
Quiz Answers 1. C. The Button component has states for Up, Down, and Over—plus selected versions of those three, plus a disabled state, and two outlines (one for when the button has focus and one for when you want to emphasize the button). Simple buttons have Up, Over, Down, and the Hit state discussed in Hour 16. 2. C. It’s sort of magic really. Note you can’t successfully rotate or skew a component. 3. C. Radio buttons should be used only for mutually exclusive choices, such as male and female. Check box-type buttons are for situations in which multiple selections are possible, such as when choosing pizza toppings like pepperoni, olives, and sausage.
From the Library of Lee Bogdanoff
HOUR 18 Using Components
Last hour you learned the basics of using components. Not only did you learn how to populate them with data, both manually and with ActionScript, but you also saw how to write ActionScript to respond to events such as the user clicking a button. You learned how to change the components’ visual appearance. In fact, you learned the core foundation of using components. In this hour, you go beyond that to learn how to use additional components and, more importantly, how to integrate multiple components into practical uses.
Using Data Providers Because you’ve already seen how to populate components and set up event listeners to make components broadcast events to your code, there’s not that much more to learn. However, one concept worth learning in more depth is how the data that populates your component is structured. In the case of a Button, there’s not much more than the label property the user sees on the button. However, with list-based components, such as ComboBox, List, DataGrid, and TileList, each item in the list can store additional data. You might remember when you populated the ComboBox, there was a list of items, each of which had both a label and a piece of data. Users saw the list of all the labels by clicking the ComboBox, and when they selected one of the items, your code grabbed the data in that slot. This list of label/data pairs is called the component’s data provider. Three basic approaches to populating such components include manually entering the values via the Component Inspector panel, using the addItem() method to populate with ActionScript, or creating a data provider (a variable) that you associate with the component.
WHAT YOU’LL LEARN IN THIS HOUR: . How to use data providers to populate list-based components (ComboBox, List, and DataGrid) . How to use additional user interface components . How to integrate multiple components into practical applications
From the Library of Lee Bogdanoff
330
HOUR 18: Using Components
Entering values manually through the Component Inspector panel is fairly intuitive. As you recall from last hour, you selected a ComboBox instance and clicked the dataProvider property in the Component Inspector panel to reveal the values dialog, where you could add as a many label or data pairs as you wanted, as shown in Figure 18.1.
FIGURE 18.1 The Component Inspector panel enables you to enter labels and data values into the ComboBox component.
The main disadvantage to populating components in this manual manner is it involves a lot of clicking around. For example, if you want to inspect the current values, you have to return to the Component Inspector panel. A more significant disadvantage is you can’t make changes to the ComboBox’s contents while the movie plays. Using ActionScript to populate a component improves on some of the issues with using the Component Inspector. For example, you can use addItem() to populate the component. Consider this code, which populates a ComboBox instance named myCombo: myCombo.addItem( { label: “Microsoft”, data: “http://www.microsoft.com” } ) myCombo.addItem( { label: “Adobe”, data: “http://www.adobe.com” } )
This code has exactly the same outcome as populating manually with the Component Inspector panel. As a reminder, you can ascertain the data value for the currently selected item with this expression: myCombo.selectedItem.data
From the Library of Lee Bogdanoff
Using Data Providers
331
For example, last hour we used the following code to take the user to the URL stored as the Value property in the currently selected item: var myURL = new URLRequest( myCombo.selectedItem.data ); navigateToURL( myURL );
It’s important to understand the way the addItem() method works. You pass a single parameter in the form of an ActionScript object. Literal ActionScript objects look like this: {property: “value”, property2: “value2”}
The property names are arbitrary, but they can’t start with a number or include spaces, and they’re always shown without quotes. The values can be any data type. Here they’re shown as strings. As in the case of the ActionScript object used as the item for a ComboBox in the addItem() method, they traditionally include a label property and a data property. This matches the exact structure shown earlier in Figure 18.1. In this example, populating the ComboBox with the addItem()method has the advantage that you can see all the values without clicking the Component Inspector panel. However, another big advantage is that you’re not limited to storing only two bits of information in each item. So far, each item has only a label and a data property, but you could add as many additional properties as you’d like to suit the content. You always want the label property, but you can add additional pieces of data property. For example, say you’re listing a bunch of dogs and want to include their age and gender. Check out this variation: myCombo.addItem( { label: “Rover”, age: 2, gender: “m” } ) myCombo.addItem( { label: “Max”,
age: 3, gender: “m” } )
myCombo.addItem( { label: “Puffy”, age: 1, gender: “f” } )
Because the label properties are expected by the component, you see the three dog names as expected. It gets cool when you need to grab a value from the ComboBox. Check out the following code that traces the name, age, and gender when the user changes the myCombo instance. You can try it yourself by creating a ComboBox onstage with the instance name myCombo and the preceding three lines of code plus the following code in the Action panel for Frame 1: myCombo.addEventListener( Event.CHANGE , changeCombo) function changeCombo( evt ) { trace(“the name is “ + myCombo.selectedItem.label ) trace(“the age is “ + myCombo.selectedItem.age ) trace(“the gender is “ + myCombo.selectedItem.gender ) }
From the Library of Lee Bogdanoff
332
HOUR 18: Using Components
CAUTION
You build some more practical applications in the tasks that appear later this hour. You can grab any item’s properties by name by referring to the instance’s selectedItem property. In fact, you can grab any item by index (that is, which row it’s in) by using getItemAt(). For example:
0-Based Indexing The first item in any list is in the 0 index. For example, myCombo. getItem(0) returns the first item in the myCombo instance. Remember it starts counting with 0, not 1.
trace(“the first dog’s age is “ + myCombo.getItemAt(0).age )
Now you’ve seen two ways to populate a component’s data provider: The Component Inspector panel and using the addItem() method. The advantages of addItem() are that you can see all the content in one place, and you can add additional arbitrary properties to fit your content. The last thing to see is how to create a separate data provider variable that holds all the content and then associate that variable with your component instance. This enables you to maintain the data separate from any one component instance. If the data changes, the component updates. Plus, you can associate one data provider with multiple components. It’s a nice way to separate the data from a specific component instance. The code for populating a data provider is almost identical to that for populating a component’s items. That is, you use addItem(). However, you need to add an extra step at the beginning to create your data provider instance. (There’s no instance onstage like with components.) You also add one step at the end to associate the data provider with your component. Here’s an example: import fl.data.DataProvider; //create a data provider var myDataProvider:DataProvider = new DataProvider(); //populate it myDataProvider.addItem( { label: “Rover”, age: 2, gender: “m” } ) myDataProvider.addItem( { label: “Max”,
age: 3, gender: “m” } )
myDataProvider.addItem( { label: “Puffy”, age: 1, gender: “f” } ) //associate the myDataProvider instance with the component on stage: myCombo.dataProvider = myDataProvider;
You need the import statement first so Flash knows what DataProvider is. In the end, there’s no effective difference between this code and the previous examples. The difference is you can associate myDataProvider with other components because it is a separate variable. In addition, if you modify the myDataProvider instance (say, you update the age property in one of the items, or you completely remove an item), all the associated components update to reflect the new values. For example, you might have a feature where you enable the user to add items to a list.
From the Library of Lee Bogdanoff
Using Data Providers
333
Although the ComboBox is great when it’s needed, realize all the information in this section also applies to the other list-based components, as you explore in the following tasks. As a quick summary, list-based components enable you to store multiple items, although only the label properties are visible. By using addItem() on the component or its data provider, you can add additional arbitrary properties.
Using the List Component After the preceding overview of data providers, it’s about time to build some applications with the components. We start with the List. The only difference with the List and the ComboBox is the List doesn’t expand and collapse. It’s appropriate for times when the user might need to quickly scan all or most of the items in a list. The ComboBox is appropriate when the user needs to access the items, but most of the time you want the list hidden and only the currently selected item visible. Plus, it’s possible to make multiple selections with the List component. We do a quick exercise with just the List component. The main work is in the functional design and the ActionScript. This task might look a little familiar, but it’s still useful. Follow these steps: 1. Create a new Flash File (ActionScript 3.0). From the Components panel, drag a List component onto the Stage. Use the Parameters panel to give it an instance name myList.
TRY IT YOURSELF ▼ Use the List Component to Enable Users to Select Images
2. Use the Text tool, and click to create a block of text wide enough to serve as a photo caption. Use the Properties panel to set the text to Dynamic Text, and give it an instance name myText. 3. Use the Rectangle tool to draw a square to hold the photos, which, for now, are temporary graphics we draw. Select the drawn rectangle, and convert it to a Movie Clip symbol called Content (select Modify, Convert to Symbol, ensure the behavior is Movie Clip, and click OK). Use the Properties panel to give the instance of the Content symbol onstage the instance name myContent. 4. Double-click the myContent instance to edit its contents. Click Frame 5, and insert a frame by pressing F5. This layer is the background. Insert a new layer by choosing Insert, Timeline, Layer, and make each frame a keyframe. Into each frame, either import a small photograph or quickly draw a temporary graphic, such as a rough 1, 2, 3, and so on.
From the Library of Lee Bogdanoff
334
▼ TRY IT YOURSELF Use the List Component to Enable Users to Select Images
HOUR 18: Using Components
5. Return to the main Timeline. Your layout should look like Figure 18.2.
myList instance of List component
myContent instance Content Movie Clip
FIGURE 18.2 This layout has a List component, a clip full of photos, and a text field for the captions. myText instance of Dynamic Text
6. Click the first keyframe, and open the Actions panel. Type the following code: //make the data: import fl.data.DataProvider; var myData:DataProvider = new DataProvider(); myData.addItem( {label:”Sunset”, frame:1, caption:”This is a sunset” } ) myData.addItem( {label:”Sunrise”, frame:2, caption:”This is a sunrise” } ) myData.addItem( {label:”Beach”, frame:3, caption:”This is the beach” } ) //associate the data myList.dataProvider = myData; //set up the listener: myList.addEventListener( Event.CHANGE , changeList ) function changeList ( evt ){ //display the photo: myContent.gotoAndStop ( myList.selectedItem.frame ) //show the caption: myText.text = myList.selectedItem.caption } //initialize: myText.text = myData.getItemAt(0).caption myContent.gotoAndStop (myData.getItemAt(0).frame ) myList.selectedIndex = 0
Feel free to modify the three lines starting myData.addItem with content that matches your photos. Most of this code should look familiar. It’s a bit ugly at the very bottom under //initialize, where the content and list is made to appear as though the user already clicked the first item. Initially, the user sees everything configured as if they already selected the first item in the list. Notice in the second to the last line of code, we’re not jumping to Frame 1, but rather to the frame number matching the frame property of the item in the 0 index of the data. It’s arguable whether this additional From the Library of Lee Bogdanoff
Using Data Providers
335
complexity is worthwhile. A decent alternative would be to always place the photo for the first item in Frame 1, but this way you can change the structure if you want.
Using the DataGrid Component The DataGrid component is like the List component, except instead of many rows of data, you can have multiple columns, too. One nice feature for users is they can sort the items in the DataGrid component by clicking the column headers. For example, with a list of sports team’s statistics, the user could sort by team name or score, as shown in Figure 18.3. FIGURE 18.3 Users can interact with the data by clicking a column to sort the list.
Using the DataGrid in the most basic way, you make a DataProvider and associate it with the DataGrid (or populate manually using addItem() on the DataGrid instance). A basic example is expanded in a minute. Place a DataGrid instance onstage, and give it the instance name myDG. Put this code in the first keyframe: import fl.data.DataProvider; var myData:DataProvider = new DataProvider(); myData.addItem({team: “Dallas”, wins:67 , losses:15 , percent:0.817 } ) myData.addItem({team: “Phoenix”, wins:61 , losses:21 , percent:0.744 } ) myDG.dataProvider = myData;
You can insert additional rows by using addItem(). You don’t need a label property. Also, whatever names you give the items’ properties appear as column headers. Even with just this code, the DataGrid component is useful. There are a few touchups that we’re going to show you because you’ll probably encounter them in your future work. It’s worth warning you, however, you can stop here and still use the DataGrid component quite effectively. The ActionScript that appears in the rest of this section doesn’t
From the Library of Lee Bogdanoff
336
HOUR 18: Using Components
come with full explanation. We include it here because these are common tasks you want to do with the DataGrid component. First, to change the order of the columns, you need to access the columns property of your DataGrid instance (myDG in the earlier example). For example, to place the team names first, you would add the following line of code: myDG.columns = [“team”, “wins”, “losses”, “percent”]
You can do quite a lot more with columns, and there’s an entire class called DataGridColumn. This code works as is. Another thing you might want to do is show only a portion of the data. Remember how the List component always hides the data values from the user? You might need something similar with a DataGrid. For example, maybe you want to store the URL for each team in the DataProvider, but not necessarily show the users those URLs right inside the DataGrid. To see this effect, you could use the following line of code to hide the percentages: myDG.columns = [ “team”, “wins”, “losses” ]
Another thing you might want to do is to change the actual wording that appears in the column header. Property names in your items (such as team, wins, losses, percent) can’t include spaces. If you want the first column to appear as Team Name, you’d need to add this code: myDG.columns[0].headerText = “Team Name”
Notice before where the entire columns property is being overwritten and set to an array of three or four names, here the headerText property is being set for the column in the 0 index as columns[0] grabs the first column. This code is getting a bit tangled, and there’s no room to fully explain it. It’s a good initial step into some advanced and particularly useful maneuvers that you want to do with the DataGrid component. There’s one thing that’s especially difficult, but it does hint at some additional powerful tricks you can try. Imagine you’d like the percentages to appear in a more traditional manner—for example, as 80% instead of 0.80. Doing so is slightly complex, as you see. The key concept to understand is your raw data can be kept separate from the way it gets displayed. That is, the DataProvider can maintain the 0.80 number (in case you need to do some math with that number), but you can write code that reformats that number into something that’s more digestible for the user to see in the display (namely, 80%). That’s the concept behind a column’s labelFunction property as well as the even more advanced topic of cell renderers—which we
From the Library of Lee Bogdanoff
Working with Other Components
337
only mention as a way to replace cells in your DataGrid with icons or other graphics. Here’s some code that reformats the percent column’s display: myDG.columns[3].labelFunction = formatPercent; function formatPercent ( item ) { return Math.round(item.percent*100)+”%” }
This code works only if your fourth column still displays the percent property.
Working with Other Components There’s not a whole lot more we can say about components. At this point, you should learn by using them, so that’s what you do for the rest of this hour. First, you use the ProgressBar component to build a loading bar that shows users how much of your movie has loaded. Second, you use the Slider component to enable users to set a value within a set range.
Using the ProgressBar Component The ProgressBar component can be used in two general ways, as shown in Figure 18.4. Either it can fill up like a thermometer to give the user a visual clue how a process is progressing, or when the duration of a procedure can’t be figured out by your code, the ProgressBar can display a “barber pole” graphic. Your initial approach to using the ProgressBar might be more complex than it needs to be. For example, to set the mode to Manual, you could use this line: myProgressBar.mode = “manual”
Then periodically trigger the setProgress() method, like this:
FIGURE 18.4 The ProgressBar can display how a process is progressing (top) or display the barber pole animation (bottom) when the duration is indeterminate.
myProgressBar.setProgress ( 50, 100 )
This code would display a half-filled progress bar. However, this component is more sophisticated than that. With one line of code, you can make a ProgressBar display the percentage loaded in your movie or anything else you load into your movie such as audio or video. Here’s the code: myProgressBar.source = this.loaderInfo
Let’s do a quick task, so you have something useful.
From the Library of Lee Bogdanoff
338
▼ TRY IT YOURSELF Use the ProgressBar Component as a Preloader
HOUR 18: Using Components
Although only one line of code makes the progress bar, a few more steps gets everything working in a useful way. 1. Create a new Flash File (ActionScript 3.0). Drag a ProgressBar component onto the Stage. You can optionally resize or scale it to fit your needs. Use the Properties panel to give the ProgressBar instance the name myProgressBar. 2. To make your movie larger (that is, to make it load slow enough to need a progress bar), click Frame 2, and insert a blank keyframe by choosing Insert, Timeline, Blank Keyframe (or press F7). Import a large image, and place it onstage in Frame 2. Alternatively, you could import some music—make sure to make it start playing on Frame 2. 3. Go back to Frame 1, click the keyframe, open the Actions panel, and begin with these two lines of code: stop() myProgressBar.source = this.loaderInfo
The stop() ensures you don’t go straight to Frame 2. (You want to show users the ProgressBar component first.) The second line sets the source property of the myProgressBar instance equal to the loaderInfo of the main Timeline. The loaderInfo property contains all the information the ProgressBar component needs to display the bar. 4. You’re not done yet, but go ahead and select Control, Test Movie. The progress bar should appear fully filled because the file downloads instantly when you’re running it on your hard drive. While you’re still testing the movie, select View, Simulate Download to see how it might appear after you post it on the Internet. Although the ProgressBar component fills up nicely, the next thing to add is some code to make it advance to Frame 2 after your file is fully loaded. 5. Return to your Flash file, and add the following code to the code you already have in Frame 1: this.loaderInfo.addEventListener( Event.COMPLETE, loadComplete ) function loadComplete( evt ){ gotoAndStop(2) }
The first line uses addEventListener() to broadcast the COMPLETE event to the homemade function loadComplete(). From there, you simply advance to Frame 2. If your movie has an animation that starts on Frame 2, you can change gotoAndStop(2) to gotoAndPlay(2) instead.
From the Library of Lee Bogdanoff
Working with Other Components
339
Using the Slider Component The Slider component is a handy way for users to visually set a value that stays within a range you establish. Perhaps you want to allow users to fill in a satisfaction survey that ranges from 10 for extremely satisfied to 0 for extremely dissatisfied, as shown in Figure 18.5. Or, maybe you want to allow them to set the speed at which your slideshow advances. The fact the Slider component is visual makes it more appropriate for certain conditions. FIGURE 18.5 The slider component gives users a visual way to set values that stay within a range you establish.
Using the Slider component is fairly easy. Usually all you need to do is set the minimum and maximum, and then set up a listener for when the Slider changes. Grab the slider’s current value and do what you want with it (save it in a survey, change the speed of your slideshow, and so on). Here’s a simple task that enables the user to jump to any frame in a Movie Clip. To keep things simple, you’ll create a Movie Clip with different content on each frame, as we’ve done previously. 1. Create a new Flash File (ActionScript 3.0). From the Components panel, drag a Slider component onto the Stage. Use the Parameters panel to give it an instance name mySlider. You can resize or scale the slider if you’d like.
TRY IT YOURSELF ▼ Use the Slider to Access Frames in a Movie Clip
2. Use the Rectangle tool to draw a square to hold some content, which are temporary graphics you draw. Select the rectangle, and convert it to a Movie Clip symbol called Content (select Modify, Convert to Symbol, ensure the behavior is Movie Clip, and click OK). Use the Properties panel to give the instance of the Content symbol onstage the instance name myContent.
From the Library of Lee Bogdanoff
340
▼ TRY IT YOURSELF Use the Slider to Access Frames in a Movie Clip
HOUR 18: Using Components
3. Double-click the myContent instance to edit its contents. Click Frame 5, and insert a frame by pressing F5. This layer is the background. Insert a new layer by choosing Insert, Timeline, Layer, and make each frame a keyframe. Into each frame, either import a small photograph, or quickly draw a temporary graphic, such as a rough 1, 2, 3, and so on. 4. Return to the main Timeline, select the first frame, and open the Actions panel. Then, type this code: import fl.events.SliderEvent myContent.stop(); mySlider.minimum = 1; mySlider.maximum = myContent.totalFrames; mySlider.addEventListener(SliderEvent.CHANGE, changeSlider); function changeSlider (evt){ myContent.gotoAndStop(mySlider.value); }
The second line stops the myContent clip from playing initially. Next, you set the minimum and maximum properties of the mySlider instance. Notice instead of the maximum being set to a hardwired 5, it is set to match the totalFrames property of the myContent Movie Clip. This way, if you add frames to the Movie Clip, the code still works correctly. Finally, the addEventListener() is used to broadcast the CHANGE event to the homemade function changeSlider(). 5. Test the movie by selecting Control, Test Movie. The user experience is less than ideal because users have to let go of the slider to see the myContent clip update. Change the code where it says CHANGE to instead read THUMB_DRAG. Test the movie again, and the clip should update while you drag. If the user uses arrow keys to move the slider, a feature that’s supported, the content doesn’t update at all. To fix this, include two lines with addEventListener(). That is, replace the single line (line 5 in the code from step 4) with the following code: mySlider.addEventListener(SliderEvent.THUMB_DRAG, changeSlider); mySlider.addEventListener(SliderEvent.CHANGE, changeSlider);
Although two different events trigger the same code, it should work better.
From the Library of Lee Bogdanoff
Summary
341
Because you might be getting tired of that clip full of photos, here’s a variation on the previous task. The next code enables your user to change the frame rate of your movie. Modify the changeSlider function to read as follows: function changeSlider (evt){ stage.frameRate = mySlider.value }
If you do this, you probably want different values for the Slide component’s minimum and maximum properties.
Summary This hour you learned how to use some of the more advanced components. Specifically, you’ve learned how a data provider gives you a way to store data in a structured manner and then associate that data with one of the list-based components. You’ve also learned how to customize the columns in a DataGrid component. The rest of the hour was spent learning how to apply several other components. The ActionScript was kept to a minimum, but it still might have been more than you had expected. If that was the case for you, you should be glad to know the remaining hours are practically free of any complex ActionScript.
From the Library of Lee Bogdanoff
342
HOUR 18: Using Components
Q&A Q. I think working in Flash with components makes my computer run slowly. What’s the deal? A. The ActionScript 3.0 components for Flash CS4 run efficiently in the .swfs that you create. However, one feature in particular makes the authoring environment slow down; that feature is Live Preview. If you deselect the option Control, Enable Live Preview, then you should see a great performance boost while working with components in Flash. Q. I found some code using addChild() that was supposed to effectively drag components onto the stage at runtime. Here’s the code, but why doesn’t it work? import fl.controls.Button; var myButton:Button = new Button() addChild(myButton) myButton.label = “click me” myButton.addEventListener(MouseEvent.CLICK, clickHandler ) function clickHandler ( evt ){ trace (“you clicked”) }
A. The preceding code is perfect. However, you must ensure your Flash file has a Button component present in its Library. Either drag one from the Components panel to the Library panel or drag one from the Components panel onto the Stage. Then, delete the one onstage as it’s now safe in your Library. Q. In the first frame of my movie, I am using addItem() to populate my List component. The problem is when I allow the user to navigate to other frames, say Frame 2 and beyond, and then return to Frame 1, the List keeps getting longer. Is there a way to add the items just once instead of every time I come back to Frame 1? A. First, this wouldn’t happen if your List component appears in one frame, populates there, and then is not onstage in Frame 2 and beyond. You could repopulate it every time the user navigates to a different frame. If you want to keep the List present the whole time, you probably want to make two changes. First, create a DataProvider variable to maintain the content, and assign the List’s dataProvider property, as discussed at the end of the section “Using Data Providers”. Second, create and populate the DataProvider once in Frame 1, then put your main content in Frame 2. When users navigate away, have them return to Frame 2 and not all the way back to Frame 1. This way your initial creation of the DataProvider occurs only once.
From the Library of Lee Bogdanoff
Workshop
343
Q. I used addEventListener() to broadcast an event, CHANGE, to my custom function, but I want to change it while the movie plays to broadcast to a different function. I noticed that Add Event Listener definitely doesn’t mean Replace Event Listener because when I add a second listener, both custom functions trigger. Is there a way to redirect the events so they broadcast to a different function? A. We spent time discussing how to add event listeners, but never how to remove them. It’s fairly straightforward. You can’t replace event listeners—you just remove one and add another. To effectively turn off an event listener, use removeEventListener(). The two parameters are identical to the two for addEventListener()—namely, the event you no longer want to listen for and the name of the custom function that is handling the event. To summarize: To get rid of your old listener, use removeEvent Listener(), and then you can use addEventListener() to start broadcasting to a different function.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. In addition to populating your component instances, what step is necessary to make the component do something when the user interacts with it? A. You need to enable interactivity on the component via the Component Inspector panel. B. You need to use addEventListener() to broadcast events to a custom function. C. No step is necessary. Components are for visual display of information, not functionality.
From the Library of Lee Bogdanoff
344
HOUR 18: Using Components
2. The ActionScript object that you pass as a parameter in the addItem() method must always include a value for the label property. A. Yes, otherwise you don’t see anything. B. No, you can provide any properties you want. C. You don’t have to, but if you’re using a List or ComboBox, then you probably want to set the label to see anything. 3. Why is there so much ActionScript needed to use the components? A. It’s not a that much, at least not compared to what you’d have to do if you program the components from scratch. B. The ActionScript makes Flash run faster. C. It’s linked to early programmers who were primarily masochists.
Quiz Answers 1. B. Two parts include populating the component’s properties, such as its label, and setting up listeners so your code hears the events as they trigger. 2. C. Answer A is true if you’re using the List or ComboBox, and Answer B is true if you’re definitely not using one of those two components. But, Answer C is the best answer. 3. A. The components are designed to work with the absolute minimum of ActionScript. For better or worse, that means some coding is necessary.
From the Library of Lee Bogdanoff
HOUR 19 Using Video
In the not-too-distant past, it was impossible to display video inside of Flash without something short of a miracle. The video support in Flash has really come of age. You can import video, trim it, and compress it, using the state-of-the-art VP6 codec from On2 that keeps files small and quality high. With this version of Flash, a new feature supports the H.264 video codec, giving you a broader choice of content. Even though most of the technical details are handled automatically, you’re given enough control to vary the results greatly. Codec is short for compressor/decompressor. Basically, videos need to be compressed so they download quickly. The same video needs to be decompressed for the user to view it. Many different technologies are available to compress and decompress. The codec you must use if delivering to Flash Player 7 is called Spark (from Sorenson), whereas Flash Professional 10 also includes VP6 (from On2) and H.264.
WHAT YOU’LL LEARN IN THIS HOUR: . How to import and use video in movies . How to include advanced features using the FLVPlayback component . How to use cue points to synchronize a video to the graphics in your Flash movie . How to optimize for high quality and low file size
Embedding Video Versus Playing External Video Two general ways to play video inside Flash are to embed where you import, compress, and then place the video inside your main file, or compress the video into an Flash video format (.flv) file and play it externally. External .flvs have the additional option to stream from a special server that sends only the bits of the video as requested, making it possible for the user to seek ahead in the clip. However, streaming requires a streaming server (Flash Media Server or Red5) or a service provider who hosts your videos on their streaming server. Without any additional software, Flash can play videos only progressively, meaning they download from start to end. Pro-
From the Library of Lee Bogdanoff
346
HOUR 19: Using Video
gressive download enables viewers to begin viewing the video before it’s completely downloaded—they just can’t quickly seek ahead. We look in detail only at progressive downloading videos. In either progressive case (embedded or external .flv), the video file has to download, but by keeping the video external, you can control when it begins to download. Perhaps you can give the user a choice of three different videos and only download the one they select. Embedding the video not only makes your main file bigger, but the quality isn’t as good as what you get if you play an external .flv. You can’t use the better VP6 or H.264 codecs, and the audio in a longer video doesn’t stay synchronized. Generally, the best route is to create a .flv to play externally. However, there are two cases where embedding the video is a better option. One is when the video is short, maybe less than 30 seconds and you don’t want to bother with maintaining several files (the .swf and the .flv). We say short because a long embedded video with sound begins to drift out of synchronization. The second reason to embed video is when you need frame-by-frame control. An external .flv can only pause on keyframes, which gets added automatically, but might only appear a few times per second—much less frequently than every frame of video. If you want to allow the user to step frame-by-frame through a video clip of your golf swing, embedded video is a better choice. Regardless of whether you plan to embed the final video or play an external .flv, you need to compress the video. That is, your source can be one of many video formats (such as MPEG or QuickTime), but it must be compressed using one of Flash Player’s supported codecs. Compressing a video for embedding or to make an .flv is only slightly more involved than importing other media types, such as sound or graphics. It is as easy as selecting File, Import, and then selecting a video. As with sound and graphic files, there are different types of video files—each with its own attributes. In addition, the tasks of making a video look good, play well, and download quickly can all require some work. The first step is concentrating on your source video.
Making Video Look Good We look at the supported video types and how to get them into Flash in a minute, but it’s worth noting the entire creation process for video involves many specialties. Even if you don’t employ a Hollywood crew, you always have the responsibilities of sound engineer, camera operator, casting agent, writer, and so on. Also, technical issues, such as background noise, camera
From the Library of Lee Bogdanoff
Embedding Video Versus Playing External Video
347
shake, and lighting, all affect the final outcome. There’s not enough room in this book to teach you everything about video making, but we give you a solid introduction. When you’re selecting or creating videos, there are a few considerations specific to video on the computer. The entire viewing experience is much different on a computer than in your living room. The following tips come down to the fact that video on the computer has restrictions: . Only use video when appropriate. Three particular cases stand out: celebrity endorsement (that is, when the face is recognizable or important to add credibility to your message); call to action (when the video or sound can actually motivate someone to physically respond to your message); and expert demonstrations (for example, a cook showing you how to fold egg whites is something you could never really describe with pictures or words; you need a video). . As far as video content is concerned, you should refrain from using many fine details, such as small text; it can become illegible in a small video window. . Changing viewpoints and camera angles, such as going from close up to far away, is always good. Be aware of details that might be difficult to see on a small screen, and use dramatic camera angles with a purpose (that is, have a reason for each viewpoint). . Be conservative with special effects; everything has a price—be it lower performance, large files that download slowly, or gratuitous effects that become tiresome. Although the limits of computer videos might appear restrictive, they are simply challenges to overcome. In some ways, the restrictions of regular TV are removed. For example, you can use nearly any aspect ratio, which is the ratio of height to width. You can even mask the video to make any shape you want, as Figure 19.1 shows.
In addition to these tips, you need to consider other optimization issues, as discussed in the “Optimizing Quality and File Size” section.
Supported Formats Flash can compress video in various file formats. These are all digital files saved on your computer. For example, if you only have a videotape, you need to digitize it first. This involves video capture hardware, which records the analog video into the computer’s hard disk. If your source video is already in a digital format (such as from a mini DV video camera), making a digital copy on the computer takes little more than a cord to connect the camera to the computer. Finally, although your favorite movie on
From the Library of Lee Bogdanoff
348
HOUR 19: Using Video
FIGURE 19.1 Despite digital video’s restrictions, you can do cool stuff such as change the viewing window’s shape.
DVD is saved as a digital file, you find it next to impossible to convert this to a digital file that Flash imports (besides the fact that you might break copyright laws to import it). To create high-quality digital video files on the computer, you must create one of the following digital file formats: . QuickTime (.mov) . Digital video (.dv) . MPEG (.mpg or .mpeg)
NOTE
Installing Video Support It’s possible your system configuration doesn’t list this many digital video formats. To increase the types of video your computer supports, install QuickTime from www.quicktime. com. In addition, if you’re using Windows, be sure to install DirectX 9 or later from www. microsoft.com/directx/. To see which version you already have, if any, select Start, Run, type dxdiag, and click OK.
. Windows Media (.asf or .wmv) . Video for Windows (.avi)
Although the list of video formats is relatively long, you probably use only one of the first three. Each format has its unique purpose. When it comes to importing video into Flash, you always want to start with the highest-quality source because Flash always compresses the video (a little or a lot, but always some). Video compression is like image compression in that quality degrades when you compress a file that’s already compressed. Unfortunately, true uncompressed video files are huge. For example, the source videos used in a recent project were about 200MB to 300MB per minute. Starting with such high quality made a difference, even though the compressed version is less than 1MB per minute. In practice, a video that’s only slightly compressed is still high in quality but not nearly as big. However,
From the Library of Lee Bogdanoff
Embedding Video Versus Playing External Video
349
keep in mind that the compression stage can be very time consuming. The On2 VP6 codec is particularly asymmetric, meaning it takes longer to compress than decompress. While that’s the case with any codec, in this case, you could be tying up your machine for hours, if not days. Professionals creating source digital video files should have no trouble creating a QuickTime video with little or no compression, like the codec called Animation. If you’re copying video directly from a digital video camera, you can use one of the digital video formats (.dv). Also, many cameras enable you to save a QuickTime video. Although MPEG can be high quality, there are several versions of it, so you have to test your entire process to make sure that it imports into Flash correctly. Many MPEGs you find have already been compressed, so you should find a higher-quality original. The same can be said for Windows Media. You’ll be hard-pressed to find noncompressed high-quality .asf or .wmv files. Finally, Video for Windows (.avi) files are simply not as good as QuickTime files. They’re old technology. This isn’t to say that you can’t make a decent .avi, but just that you do better with QuickTime. Don’t think this section is a rule book for how you should progress. The only universal rule is you always want to start with the highest-quality original. Now that you have your computer set up with video support, you see how to import video into a Flash movie in the following task. In this task, you embed a QuickTime video into your Flash movie. Follow these steps:
TRY IT YOURSELF ▼ Embed a Video
1. To make this go quickly, you can use the sample movie that came with the free version of QuickTime, which you can find at www.quicktime. com. Or, you can use any footage you can find. You are using the separate Adobe Media Encoder CS4 program to convert a .mov file to a Flash friendly .flv file. The Adobe Media Encoder CS4 program should have been installed with your Flash program. Locate it in your Start menu (Windows) or in your Applications folder (Macintosh „) and start it. 2. Click the Add button on the right of the application and browse to your .mov file. Select it, and press OK. This dialog box gives you the opportunity to specify the output format by clicking on the arrow under Format, either .flv or H.264. We want to work with an .flv file. You can also change the Preset setting, which controls what device you want to use with this video. Choose the second from the top option, FLV with
From the Library of Lee Bogdanoff
350
▼ TRY IT YOURSELF Embed a Video
HOUR 19: Using Video
the line Same as Source, Flash 8 or Higher next to it. Click on Start Queue to begin converting your .mov to an .flv file, as shown in Figure 19.2. This step might take some time while the encoding occurs.
FIGURE 19.2 The Adobe Media Encoder CS4 program converts your .mov file to an .fla file.
NOTE
Use On2 Instead of Spark We recommend avoiding Sorenson Spark (whether you select it in the Video tab or select a Flash Player 7 preset in the Encoding Profiles tab) unless you’re delivering to Flash 7 or Flash 6.
3. Open your Flash program, and choose File, Import, Import Video. Click on the Browse button, and choose the .flv file you just created. Choose the option Embed FLV in SWF and Play in Timeline. Press Continue. 4. The next step, Embedding, enables you to select various details about how the video appears in your file, as shown in Figure 19.3. Most of these settings are purely for convenience. For example, we recommend leaving the default symbol type Embedded Video because it’s simple to make the other types (Movie Clip or Graphic) by hand. For this exercise, uncheck the top check box, which would have placed the video instance on the Stage. Instead, we show you how to do this manually in a moment. 5. You see one more dialog reviewing what you’re about to do, and then click Finish. 6. The video you just embedded appears in your Library. Drag the video on to your main Stage. You see a dialog box (see Figure 19.4) that asks if you want to extend the Timeline to accommodate the video’s total number of frames. Click Yes. 7. Test the movie so you can hear the audio play.
From the Library of Lee Bogdanoff
Embedding Video Versus Playing External Video
351
TRY IT YOURSELF ▼ Embed a Video FIGURE 19.3 This screen enables you to choose how your video is embedded in your Flash movie.
FIGURE 19.4 When you place a video on the Stage, Flash asks if you want to extend the Timeline to accommodate the video’s length.
If all you wanted is a video inside Flash, you could stop after the preceding task. However, embedding the video inside your movie the way you did in step 2 in the preceding task is not always the best choice. You use an .flv
From the Library of Lee Bogdanoff
352
HOUR 19: Using Video
for external playback in the “Playing External .flv Videos” section later this hour. You’re welcome to repeat this task, but select “Load External Video with Playback Component in step 2. The main difference is you see an additional Skinning dialog before the last step, as shown in Figure 19.5. We step you through these later, but we want to mention it for comparison to the embed technique we just showed. FIGURE 19.5 When creating an .flv, you can select from a variety of skins.
Using Video Next, you learn some of the ways to display videos—both embedded into your .swf and created as an .flv that resides outside of your file. In this section, you see how to control the playback of your videos (like giving the user a stop and play button), as well as using special effects such as masking. The creative side of displaying a video is more interesting than the technical details. Because the technical details vary between embedded and external video, we’ve separated the two.
Playing an Embedded Video As a review, a sound in a keyframe that has its sync setting set to Event begins to play when that frame is reached, and it continues to play until it’s finished—even if the Timeline slows down to display all the frames. Sounds with the sync setting of Stream are locked to the Timeline. This means you
From the Library of Lee Bogdanoff
Using Video
353
need to make sure the sound has enough space in the Timeline to finish. The reason to review Stream sounds at this point is that an embedded video placed in a keyframe needs enough space in the Timeline to finish playing. For example, if the video is 10 seconds long and the frame rate is 12 fps, you need 120 frames in the Timeline. Flash tells you exactly how many frames are needed if you drag an embedded video into a Timeline that’s too short. Another reason to remember Stream sounds is that by default all the audio in an embedded video is affected by the global publish setting for stream audio, which you set by selecting File, Publish Settings to open the Publish Settings dialog box, and then select the Flash tab. The visuals in your video behave like Graphic symbols. Embedded videos are not really the same as Graphics, buttons, or Movie Clips because you can’t tween videos or tint them through the color effects, as you can other symbols. You can nest the videos inside a Movie Clip and apply effects to the clip. However, of the symbol types, videos are most like Graphics in several respects. You can scrub to see a preview of videos. Also, you must extend the Timeline far enough for all the video frames to play, as you did in step 6 of the preceding task. These concepts are discussed to help you understand a few of the technical details that follow. You’re about to see how easy it is to build controls for an embedded video. In this task, you add some standard video buttons that give the user a way to control the video. Follow these steps: 1. Create a new Flash File (ActionScript 3.0), and import a video using File, Import Video. Drag the video onto your main Timeline (if it’s not already in the Timeline), and enable Flash to add needed frames.
TRY IT YOURSELF ▼ Make a Playback Controller for an Embedded Video
2. You’re about to create three buttons: Stop, Pause, and Play. Put those buttons in their own layer on the main Timeline. Lock the layer the video is in, and then make a new layer for the buttons. 3. Instead of drawing your own buttons select Window, Common Libraries, Buttons. Inside this Library is a folder called playback rounded. Drag each of the following buttons from that folder to the Stage: Rounded Green Pause, Rounded Green Play, and Rounded Green Stop. You can align these buttons underneath the video any way you want. Use the Align panel to make them line up. 4. Use the Properties panel to give your three buttons the following instance names: pauseButton, playButton, and stopButton.
From the Library of Lee Bogdanoff
354
▼ TRY IT YOURSELF Make a Playback Controller for an Embedded Video
HOUR 19: Using Video
5. Select the first keyframe in the buttons’ layer and open the Actions panel. Enter the following code into the Actions panel: stop() pauseButton.addEventListener(“click”, doPause) playButton.addEventListener (“click”, doPlay) stopButton.addEventListener (“click”, doStop) function doPause ( evt ) { stop() } function doPlay ( evt ) { play() } function doStop ( evt ) { gotoAndStop(1) }
6. For a review of ActionScript, revisit Hour 16, “Basic Interactivity.” Test the movie by selecting Control, Test Movie, and you’re able to control the embedded video.
One fair criticism of the previous task is it dirtied up the main Timeline. That is, the Timeline has as many frames as the video does. Normally we’d suggest putting the video inside a Movie Clip; enable that clip to grow as long as it needs to be; then place the Movie Clip instance in the main Timeline where it only uses one frame. The problem with that approach is when Flash reaches the frame containing the Movie Clip, it must download all the frames contained in that clip before displaying anything. If the clip has a big video, this could mean a long delay. So, doing it the way you did in the task is appropriate for embedded videos. By the way, you can save the preceding task as built, and then in Hour 21, “Designing a Website to Be Modular,” use the MovieClipLoader to load the movie at runtime. Before we move on to playing external .flv videos, all the cool stuff like masking the video into an odd shape works with embedded videos. This is covered later this hour in the “Adding Special Effects” section.
From the Library of Lee Bogdanoff
Using Video
355
Playing External .flv Videos Earlier this hour you learned that Flash can play external .flv files. Naturally, you need to first create the .flv. The simplest way to produce an .flv is to use the Adobe Media Encoder CS4. The tasks that follow concentrate on how to play an external .flv once it’s produced. In the next task, “Create an .flv and Use the FLPPlayback Component,” you generate the .flv, and use it immediately. Then in subsequent exercises, you can reuse the .flv you produced rather than sit through the compression stage again. Playing an external .flv definitely gives you the best results. Most notably the audio and picture remain synchronized. Playing external .flvs is a bit more involved, however. For one thing, you have to remember to upload both the .swf and the .flv file, plus an additional .swf if you use one of the FLVPlayback component’s skins. You only get a preview of the video frames when the video is embedded. If you want to draw animations on top of live action video, you need to work with embedded video, at least at the stage where you’re producing the animated overlay. You can delete the embedded video once you get the animation done. Be aware there are additional restrictions when playing .flv files. The following task probably seems suspiciously simple after the preceding explanation. The FLVPlayback component gives you great results with little effort.
In this task, you create an .flv and advanced controller with no programming. Follow these steps: 1. Make a new folder in a known location, so all the files you need to track are easy to find.
TRY IT YOURSELF ▼ Create an .flv and Use the FLVPlayback Component
2. Create a new AS 3.0 file, and save it in the folder as my_movie_player.fla. Launch the Adobe Media Encoder. Use this dialog to encode a video file as an .flv file. Save this file to the original directory you used in step 1. 3. Open the Component palette by choosing Window, Component. Click on the Video folder in the palette, and drag an FLVPlayback component on the stage. 4. Choose Window, Component Inspector. Under the Paramaters tab, click Skin, and then the Magnifying Glass icon on the right. You should see the Skinning dialog, as shown earlier in Figure 19.5. Select the skin SkinUnderPlaySeekFullscreen.swf. Additionally, you can modify the color to complement your video content if you want. Click OK.
From the Library of Lee Bogdanoff
356
▼ TRY IT YOURSELF Create an .flv and Use the FLVPlayback Component
HOUR 19: Using Video
5. You still need to tell the component which video to play. In the Component Inspector, under the Parameters tab, click on Source. 6. The source parameter needs to be changed to the .flv’s filename. 7. Because this skin includes the Fullscreen button, you need to make sure that option is set correctly when you publish. Select File, Publish Settings, and click the HTML tab. From the Template drop-down menu, select Flash Only-Allow Full Screen. 8. Now for the fun part—watch the video. Instead of doing Test Movie this time, do a Publish Preview because the fullscreen option only works in a browser. Select File, Publish Preview, Default (or press Ctrl+F12). When you’re done watching your video, there’s one last step that’s important to understand. 9. Go back to your file folder, and notice in addition to the .flv and the my_movie_player.swf based on your .fla, there’s another .swf (SkinUnderPlaySeekFullscreen.swf) for the component. There’s also the .html file. When you deploy this to the web, you need to upload all three files, everything except the .fla. You can read more about publishing in Hour 24, “Publishing a Creation.”
Playing H.264-encoded, .mp4, and .mov Videos You’ve already learned to convert .mov files to .flv files using the Adobe Media Encoder CS4. You can also use H.264 encoding with your movies, and then create .mp4 videos, which can be embedded directly in your movie in the same way as the .flv files you’ve already seen. You can try it for yourself by opening the Adobe Media Encoder and choosing Add to select a .mov file. Then, click on the arrow under the Format column next to your file, and choose H.264 instead of the FLV|F4V setting you chose earlier. Choose whatever you like for Preset, and click Start Queue to begin encoding your movie. You end up with a new .mp4 file.
Adding Special Effects Now for the fun part—once you’ve embedded a video or set up a component of video object to display an external .flv, you can perform countless special effects that can dramatically change the way a user experiences your video. We look at just a few.
From the Library of Lee Bogdanoff
Using Video
In this task, you combine frame-by-frame animation with live action video. Follow these steps: 1. Embed a video like you did in the task “Embed a Video” earlier this hour. At the end, we show you how to convert this task to work with an external .flv, but you have to start by embedding the video. If you plan on playing an external .flv, select Modify, Document, and set the frame rate to match the frame rate at which you’re going to render the video.
357
TRY IT YOURSELF ▼ Rotoscope (Draw Frames of a Video)
2. If you’re planning on leaving this as an embedded video, place the video object in the main Timeline. If you’re planning on converting this to an .flv, then first make a new Movie Clip, and put the video object inside the clip. In either case, make sure you click OK when the dialog asks to add more frames to accommodate the video’s duration (as seen earlier in Figure 19.3). 3. In the Timeline where the video appears, insert a new layer, which should appear above the video’s layer. Ensure the new layer is both above the video and extends the entire length of the video. If not, move the layer, and click a cell above the last frame in the video, and press F5. 4. Click the layer name of the empty layer to select the entire span of frames, and press F6. You now have an empty keyframe above each frame of the video where you can draw. 5. Select the Brush tool, and pick a bright color. Hold the mouse in one hand, and put the other hand on the > key (that is, the period key). Draw right into the empty keyframe of Frame 1 (perhaps draw an outline around an object in your video, such as a person’s face). After you draw, press >, and draw another frame. Even if you have hundreds of frames to draw, you can do it quickly. It’s definitely possible to insert pauses by removing the keyframes or even do tweens that match the video, but it might be just as fast to simply draw every frame. For this exercise, feel free to stop after 10–20 frames, and come back after you’ve had some practice to finish them all. 6. If you’re going to leave the video embedded, you’re done. Go ahead, and test the movie. If you want this animation to work with an external .flv, you have two steps left. First, remove the video from the Timeline, and create an .flv based on the same source. Second, write the code, so the animation syncs up with the external .flv. 7. Instead of deleting the video, access its Layer properties, and set it to Guide, so you always have the video for reference. If the video object isn’t being used anywhere, then it doesn’t add to the file size. Drag onto the stage an instance of the Movie Clip containing your animation. Name this instance my_animation.
From the Library of Lee Bogdanoff
358
▼ TRY IT YOURSELF Rotoscope (Draw Frames of a Video)
HOUR 19: Using Video
8. The FLVPlayback component for 3.0 has many more features than the 2.0 version including fullscreen support, among other things. Ensure your .fla is set for ActionScript 3.0 by selecting File, Publishing Setting. Click the Flash tab, and ensure ActionScript 3.0 is selected in the ActionScript version drop-down menu. 9. From the Components panel, drag an instance of the FLVPlayback component onstage, and name the instance my_video. Place your animation on top of the video either by using the menu Modify, Arrange or by putting the video and the Movie Clip in separate layers. Finally, select the first keyframe in your file, open the Actions panel, and type this code: stage.addEventListener(Event.ENTER_FRAME, updateAnimation) function updateAnimation ( evt ){ var percentage = my_video.playheadTime / my_video.totalTime my_animation.gotoAndStop( Math.floor( percentage * my_animation.totalFrames ) ) }
You can do a lot more synchronizing animation with a video. In the preceding task, every frame of the animation is synchronized with a frame in the video. Often, you only need to update an overlaying graphic once in a while. For example, you could display a caption containing the speaker’s name or bullet points that match what the speaker is discussing. In such situations, you don’t need every frame synchronized. Such cases are more appropriate for cue points. You can actually inject cue points into an .flv at the time you encode it (see Figure 19.6), as you do in the next task. At the stage when you encode the .flv, two kinds of cue points are Event and Navigation. In both, you’re given the opportunity to insert additional textual data for each cue point. The Navigation cue points additionally insert a keyframe that makes that cue point seekable. That is, when users click the Next or Previous button in the FLVPlayback component, they jump to these Navigation cue points. Navigation cue points are appropriate for any point in the video to which you want the user to be able to jump directly, such as the beginning of each chapter in a story. Event cue points are appropriate when you want something to appear or happen at a specific point in time while the video plays. If you’re doing a ton of captioning, there’s a third-party tool called Captionate (www.captionate.com), which we highly recommend. It’s especially designed to make it easy to inject cue points with captions. Perhaps most
From the Library of Lee Bogdanoff
Using Video
359
FIGURE 19.6 You can inject cue points into the .flv when you encode the video.
important is that Captionate plays the audio to make it easy to decide where to inject cue points. It’s nearly impossible to use Flash for this purpose because the video plays no audio at the Inject Cue Point stage. Injecting cue points using Flash is still quite powerful, as you see next.
You can download the source video (shoe-flip.mov) for this exercise from the book’s website. 1. Open the Adobe Media Encoder. Click Add, and select the shoeflip.mov you downloaded.
TRY IT YOURSELF ▼ Inject and Use Cue Points
2. Select the movie you just added from the list under Source, and click on the Settings button on the right. You might want to remove the other things from the list by highlighting them, and clicking Remove. 3. In the Settings dialog, notice the Cue Point Name table. Scrub using the large pointer above the video’s Timeline to 6.29 seconds or near 6.29. Press the + (plus) button, and replace the name Cue Point with the word miss. Scrub to 14.28 or so, and press the + button, and name this cue point catch1. Scrub to 17.29, add a cue point, and name it catch2. Finally, scrub to 21.25, and add a cue point named catch3. The complete set of cue points is shown in Figure 19.7. You can click OK when you’re finished injecting the cue points.
From the Library of Lee Bogdanoff
360
HOUR 19: Using Video
▼ TRY IT YOURSELF
FIGURE 19.7 Use these cue point names and times. Don’t forget catch3 at 21.25 (not shown).
Inject and Use Cue Points
4. Finally, click the Start Queue button, and sit back while Flash encodes the .flv along with your cue points. 5. Upon completing the encoding, you need to reference your new .flv file in an FLVPlayback component onstage. Import your video by choosing File, Video, Import. Choose the Load external video with playback component option. Click Continue, choose a skin, and finish the process. When you’re done, select it, and name the instance my_video. 6. Now you can produce some graphics to appear when the sync points occur. Suppose you want a graphic to appear then fade away that either reads “oops” or “catch number 1” (or 2 or 3). To do this, start by making four Movie Clip symbols, each with a static graphic image or text to represent “oops,” “catch #1,” “catch #2,” and “catch #3.” 7. After you have created your four symbols, make a single symbol to hold them all. Select Insert, New Symbol. Name it Content, and make sure it’s using the Movie Clip behavior. When you click OK in the New Symbol dialog, you are taken inside the Content symbol. Select Frame 1, open the Actions panel, and type the following code: stop()
We put our actual content in later frames, but this code makes Flash stop initially on the first, blank frame. 8. While still inside the Content symbol, click Frame 2, and select Insert, Timeline, Keyframe (or press F6). From the Library, drag an instance of the symbol containing your “oops” graphic. While you’re still in Frame 2, click the keyframe, and use the Properties panel to label this keyframe miss. The user sees this frame when the cue point for miss1 occurs. 9. Next, click in Frame 10, and select Insert, Timeline, Blank Keyframe (or press F7). Drag an instance of the “catch #1” symbol. Click the keyframe, and use the Properties panel to label this frame catch1. Repeat this step for the next two “catch” symbols (go out 10 frames, insert a blank keyframe, drag the symbol onto the Stage, and label the keyframe).
From the Library of Lee Bogdanoff
Using Video
10. Return to the main Timeline by clicking Scene 1 in the edit bar, selecting Edit, Edit Document (or press Ctrl+E). Open the Library, and drag an instance of the Content symbol onto the stage near the my_video instance of the FLVPlayback component. Use the Properties panel to name your instance of the Content symbol content_mc. Naming that instance might be a challenge if you don’t do it immediately after dragging it to the Stage because the first frame is empty. The instance onstage looks like only a white circle.
361
TRY IT YOURSELF ▼ Inject and Use Cue Points
11. Finally, click the first keyframe in your main Timeline, open the Actions panel, and type the following code: function cuePointReceived ( evt ) { content_mc.gotoAndStop( evt.info.name ) } my_video.addEventListener( “cuePoint”, cuePointReceived )
When the video plays and a cue point is encountered, it broadcasts an event. The preceding code listens for those events and, when events are received, tells the content_mc instance to jump to the frame label that matches the cue point’s name. In the downloadable files for this hour you find a more extensive example, which also keeps the content_mc updated as you scrub the FLVPlayback component.
Optimizing Quality and File Size With all this talk of encoding options and coding tricks, it might be easy to lose sight of the core goal: namely, to produce the best looking video that downloads fast. It might seem quaint to study traditional techniques from decades ago, but that’s exactly what you should do if you want good-looking video. For example, use a tripod and shade the camera lens to reduce flare, which can desaturate the colors. Consider a few strategic cuts instead of special effects that can make transitions long and arduous. Photographers and film makers can share a wealth of experience that all translates to digital video. We also have a few technical tricks that can reduce the file size without having a huge impact on quality. The two biggest factors that have an immediate impact on file size are the video’s frame rate and its pixel dimensions. For example, a 12 fps video is nearly exactly half the size as a 24 fps video. A lower frame rate is not only smaller, but it doesn’t look quite as good— especially if there’s a lot of motion. The best thing to do is to take a small representative sample and test different framerates. Keep going lower and lower until the quality is unacceptable, then back off.
From the Library of Lee Bogdanoff
362
HOUR 19: Using Video
Like any raster graphic, you can also render videos at different dimensions. Similar to how low frame rates make for a smaller video, smaller dimensions make the file smaller, too. A great tip that can have a surprising effect: Often, you can render a video at half its final size and then stretch it during playback. For example, you want a video to display at 240×320. You can render it at 120×160, but stretch the video holder (video object or component) to 240×320. Test it out! Make a video at 240×320 at a particular bandwidth, and make another at the same bandwidth but only 120×160. Naturally, the smaller one is sharper until you stretch it, but the paradox is that often the stretched one looks way better than the same file-sized unstretched one. Lastly, as a bit of a repeat from Hour 13, “Including Sound in Animations,” stereo sound is twice as big as mono. Be sure you need stereo before you include it in your video. By the way, when you embed video inside your Flash movie, you set the compression level via the Publish Settings for Stream sound.
Using Outside Video Editors In addition to using Flash to compress videos into the .flv format, you can use outside video editors to create .flvs directly (via a plugin that gets installed when you install Flash). You can also use the stand-alone Adobe Flash Video Encoder as an alternative to using Flash to create the .flv. The idea is video professionals can best make final edits and other sweetening in their favorite video editor, and then export directly to .flv. In addition, you can use the stand-alone version of the Flash 8 Video Encoder to compress raw videos into .flvs in batches. Either way, you don’t have to tie up Flash compressing your videos. To use the plugin you need to launch one of the supported video editors on the same machine where you have Flash installed. The supported software includes Adobe After Effects, Apple FinalCut Pro, and Avid Xpress DV. Once you’re finished editing the video, select something like File, Export, Flash Video (though the exact menus differ for each product). You see a dialog identical to the Encoding dialog you saw when you used Flash to do the compression. The stand-alone version should be installed in a folder adjacent to where Flash is installed (C:\Program Files\Adobe for example). Again, the available options are identical to those found when using Flash to perform the compression. However, the stand-alone version adds a batch feature that, at your convenience, compresses a long list of videos you’ve added to
From the Library of Lee Bogdanoff
3D Animation with Video
363
the queue. This means you can take several videos, add them to the queue—even add the same one but select different compression settings for comparison—and then let them compress overnight. Video compressors are always slow, and the On2 VP6 codec is extra slow, but worth the wait, when compressing.
3D Animation with Video We briefly touch on how to use your .flv files with 3D animation. You already have the techniques you need to create an .flv, create a movie clip with the .flv inside it, and to create and motion tween a 3D object. We put those all together to show you how to animate your movie.
In this task, you create a video embedded in a Movie Clip that animates in a 3D motion tween.
TRY IT YOURSELF ▼ Animate a Video in 3D
1. We rush through this first bit because you already know how to do it. Open a new Flash file, and choose File, Import, Import Video. Choose the Embed FLV option, and select your .flv file. Click Continue. 2. In the Embedding screen, this time choose Movie Clip for Symbol type. Leave everything else checked. Click Continue, and then click Finish on the next screen. 3. You see your Movie Clip on the stage. If you get the frame length warning, agree to extend the length of the clip as needed. 4. Go to Frame 40 or so, and insert a frame by pressing F5. While you’re on that frame, click on the 3D Rotation Tool. Move your movie clip in some fashion. Review Hour 11, “Simulating 3D Animation,” if you’ve forgotten how the 3D tool works. 5. Finally, insert a motion tween in your Timeline. Test your movie.
That’s all there is to it. Between being able to embed a video and animate it in 3D, you should be able to create some fascinating effects.
From the Library of Lee Bogdanoff
364
HOUR 19: Using Video
Summary Some messages are simply best suited for video. Sometimes only video reveals the personality of a subject. When a demonstration is needed, there’s just nothing like a video. The majority of this hour dealt with the technical limits of video. Don’t let that stop you. The cost, extra work on your part and extra download time for the user, can definitely be worth it when necessary. In this hour, you learned how to embed a video right into your file as well as how to create a Flash video file (.flv) and play it externally. Embedding a video might be easier and does provide the ability to step through each frame, but when the video is longer, the added file size to your main movie isn’t worth the cost of embedding it. Keeping an external .flv not only provides the best synchronization and video quality, but the user only downloads the videos they request. There are many more topics worth studying in Flash video, but this hour touched on the primary points.
Q&A Q. I realize you recommend against using .avi files, but that’s all I have. Should I first convert an .avi file to a QuickTime file by using a tool such as the QuickTime player? A. First, if the only source file is an .avi file, you might as well use that. If it’s good quality, great; if it’s not, oh well—but converting it to a QuickTime file can’t make it better. Q. I’ve embedded a video with a great music track. Why does the audio sound so terrible? A. You need to set how the audio is to export via the Stream compression in the Flash tab of the Publish Settings dialog box. See Hour 13 for more about sound compression. The key is that the Stream setting is what affects the audio in an embedded video. Q. I know that the compression stage can take a long time, but even after I’ve compressed the embedded video, my Flash movie takes forever to export. Why is that? A. Audio takes a long time to compress, and it’s likely that Flash is compressing the audio at the time you publish. You can temporarily change the Audio Stream setting to Raw so every time you do a Test Movie, it goes quicker. Remember to set it back to a reasonable compression level before you export the final time.
From the Library of Lee Bogdanoff
Workshop
365
Q. Every time I attempt to compress a particular video, regardless of whether I select to make an external .flv or embed the video, Flash reports the audio can’t be imported. What’s the problem? A. Depending on the type of audio track in your video, Flash might not support it. You need to get a new source file.
Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers.
Quiz 1. If On2’s VP6 codec yields better results than the Sorenson’s Spark codec (which it does), why would you ever select Spark? A. You don’t want to pay the additional license fees that accompany the VP6 codec. B. You plan on delivering to Flash Player 7, and the VP6 codec only works on Flash Player 8 or later. C. You don’t like that the VP6-encoded videos are at least twice the size of Spark-encoded videos. 2. How do you change the compression on a video that you’ve already embedded? A. You can’t. Instead, you could re-embed and recompress at that time. B. You access the video item in the Library, select its Properties option, and then click Recompress. C. You need to modify the Video tab of the Publish Settings dialog box. 3. On2’s VP6 is which of the following? A. An old technique where rock bands would begin to play “on two” instead of “on four” as in “one, two, three, four.” B. The compression technology available in Flash and the decompression technology used in the Flash player. C. An option that costs extra to compress your videos with supercompression.
From the Library of Lee Bogdanoff
366
HOUR 19: Using Video
Quiz Answers 1. B. Requiring users to upgrade to a newer player is definitely an issue. In addition, the VP6 codec requires more resources from your users’ computers. The videos are not necessarily any bigger, in fact, for the same size video the VP6 is always better quality. 2. A. Answer B makes sense; in fact, most imported media enables you to reimport via the Update button on the item’s Properties dialog box—but that is not supported for video and displays a warning. 3. B. A codec has both compression and decompression components. A version called Spark Pro costs extra, but users with the Flash player are still able to view Flash videos that use this version.
From the Library of Lee Bogdanoff
PART IV Putting It All Together for the Web
HOUR 20
Linking a Movie to the Web
HOUR 21
Designing a Website to be Modular
HOUR 22
Minimizing File Size
HOUR 23
Optimizing Performance
HOUR 24
Publishing a Creation
From the Library of Lee Bogdanoff
This page intentionally left blank
From the Library of Lee Bogdanoff
HOUR 20 Linking a Movie to the Web
Now that you’ve explored all the basics of creating images, animations, buttons, and interactivity, you can move on to putting it all together for the web. In Hour 1, “Basics,” you learned about getting Flash movies into web pages and linking them to other pages. The knowledge you’ve acquired up to this point makes the task at hand easy. It helps, however, if you’ve seen a few Flash websites so you have an idea where you’re headed. A Flash movie can be played on your computer, as is the case every time you use Test Movie, but most of the time, you want to upload a Flash movie to a web server so anyone who has a browser and the free Flash player can see it. Not only can your movie be seen by anyone in the world, but you can include links that give the user a way to jump to other sites. You do all that this hour! A hyperlink is often a word or static picture in a web page that you can click to navigate to another web page. In Flash, you can put hyperlinks on buttons or even in keyframes. This way, the viewer has a chance to jump to other parts of the web.
WHAT YOU’LL LEARN IN THIS HOUR: . How to publish a Flash movie with the required HTML document . How to incorporate hyperlinks inside a movie or send an email message . How Flash and HTML can be combined . How to upload files to a web server
Basic Publishing Flash’s Publish feature makes the process of preparing a movie for the web a snap. Publishing in Flash is both simple and quick. Basically, you select File, Publish. Publish not only exports a .swf, but it also creates the HTML file and any JavaScript files that are necessary. HTML stands for Hypertext Markup Language. An HTML file is a text file that uses special code to describe how a web page is to be displayed. A user’s browser program first downloads the HTML, and the code included in it describes how the web page should display. Every web page you visit is really an HTML file that describes what is to be included in the page layout. Therefore, to upload a web page, you don’t just upload a Flash .swf.
From the Library of Lee Bogdanoff
370
HOUR 20: Linking a Movie to the Web
You upload an HTML file that calls the .swf and displays it in a web page; that is what the user visits. JavaScript is a programming language that an HTML file can trigger to perform special behaviors on the browser such as resizing a window’s size or changing its position. Playing Flash inside Internet Explorer now requires some JavaScript code to overcome the default behavior where users have to “Click to activate and use this control” when they arrive at a site that has Flash. Luckily, this code is generated for you when you publish and appears as a separate file named AC_RunActiveContent.js. When you type in a web address (www.informit.com, for example), your browser looks for a file named index.html. (It also looks for other similarly named files if it can’t find index.html.) The index.html file is read in by the browser, which makes sense of its contents. Besides containing the actual text that appears onscreen, the index.html file contains the details about which size and style text to use, such as italic or bold. Because the HTML file doesn’t actually have images in it, if the web page includes photographs, the HTML must specify the name and location of the image file, such as trees.jpg. The browser accumulates all the information specified in the HTML file and shows it to the user as an integrated layout of images and text. In the case of a page that includes a Flash movie, it works almost the same way. The HTML file specifies where the Flash movie (that is, the .swf file) is located and how to display it onscreen. This is almost the same as how it specifies a static image, such as a .gif or a .jpg. In the case of the .jpg or .gif image, additional information can be included—parameters such as the height and width of the image. Similarly, the HTML referring to a .swf can include parameters, such as width and height, but also details, such as whether the movie loops, whether it should be paused at the start, and more. This HTML basically says to put an image here, a Flash movie there, and so on. The actual code is relatively easy to learn, but it’s unforgiving if you make mistakes. Fortunately, Flash’s Publish feature creates the HTML file for you, so you don’t really have to learn HTML. However, it is a good idea for you to learn some HTML, and one of the best ways to learn is to take a peek at the HTML Flash creates. Publishing in Flash has three aspects. For now, we concentrate on Publish and Publish Preview with which HTML and .swf files are exported; the only difference between the two is that with Preview, you see the results right away in your browser. An important component of publishing involves how you can modify every detail via the Publish Settings command under the File menu. As you see in Hour 24, “Publishing a Creation,” the Publish Settings command enables you to specify details as well as decide what media types to export because Flash can export more than just Flash and HTML files. The
From the Library of Lee Bogdanoff
Basic Publishing
371
third aspect of publishing involves using, modifying, or creating templates and profiles, which gives you extensive control over the HTML created when publishing. Templates and profiles are also covered in Hour 24. In the following task, you try out the File menu commands Publish and Publish Preview. In this task, you quickly and easily publish a movie for viewing in a browser. Follow these steps:
TRY IT YOURSELF ▼ Publish a Movie
1. In a new file, create a simple animation. Save the file to a new or empty folder (maybe a folder called Test on your desktop). Call the file testmovie.fla. 2. Select File, Publish Settings to open the Publish Settings dialog box, select the Formats tab, and ensure Flash and HTML are the only options selected (this is the default). Click OK (see Figure 20.1). 3. Select File, Publish. Nothing seems to happen, but if you look inside your Test folder, you should find (in addition to your source .fla) two new files: testmovie.swf and testmovie.html. If you double-click the HTML file, you launch your default browser and see your movie play. 4. If you upload the .html, .js, and .swf files to a web server, anyone can see your movie, provided he is given the address and has the Flash player. FIGURE 20.1 The Publish Settings dialog box enables you to specify what kind of files are created every time you publish. The default exports a Flash .swf, the HTML that holds the .swf, and a JavaScript file referenced by the HTML.
From the Library of Lee Bogdanoff
372
HOUR 20: Linking a Movie to the Web
When you used Publish Settings in the preceding task, you made sure that the necessary HTML (.html), JavaScript code inside the HTML, and Flash (.swf) file would be exported upon publishing. Not only does the Formats tab enable you to specify more file types to export, but for each format you select, you’re given another tab. For example, because you have HTML and Flash selected, you see a tab for each. If you look in those tabs, you see several parameters you can modify. We spend more time on this in Hour 24, but for now, check out these tabs if you like; most of the settings are self-explanatory. A few final notes on publishing: First, after you selected Publish in the previous task, you found the files Flash exported. Instead, you could have exported the file and launched it in your browser automatically. To export the appropriate files and view them in a browser in one step, select File, Publish Preview, Default (or press F12). Second, you notice the name of both the .html and .swf files match your source .fla file’s name. If later you want to change the .html file’s name to, say index.html, you have no problem doing so. If you want to change the .swf file’s name, you have to be careful. The HTML file points to the .swf file. If you open the HTML file in a text editor such as Notepad, you find two references to the .swf file’s name. (To open the file in Notepad, either drag the file onto the Notepad icon, or open Notepad and select File, Open [making sure you change Files of Type to All Files, as shown in Figure 20.2], and point to the .html file.) If you do need to change the filenames, you can do it before you publish by changing them in the Publish Settings dialog. FIGURE 20.2 If you want to view .html files through Notepad to see what Flash created, you need to specify All Files in the dialog box after you select File, Open.
From the Library of Lee Bogdanoff
Simple Hyperlinks
373
There are three references to the .swf file’s name you must modify. Although the following code is part of the HTML file created, you find three parts in it: ’movie’, ‘testmovie’, src=”testmovie.swf” PARAM NAME=movie VALUE=”testmovie.swf”
It’s easiest to find these bits by searching for your filename (testmovie). All three lines of code need to point to the correct file. If your Flash file’s name is indeed testmovie.swf, it works as is. If you change your file’s name, you must change these lines in your HTML code to match the new name. Another thing to keep in mind: You don’t have to export the .html and .swf files every time. You can select File, Export Movie to create a new .swf based on the latest edits in your source .fla. Maybe you’ve already created the HTML, or maybe you’ve made some edits to it that you don’t want overwritten by publishing again. All you need to do is select File, Export, Export Movie, and then select Flash Movie from the Save As Type dropdown list in the Export Movie dialog box. When you export this way, you see one more dialog box, which enables you to specify details of the Flash movie. This dialog box is identical to the Flash tab in Publish Settings dialog box (for now, just accept the defaults). Probably the easiest way is to use Test Movie, which immediately exports only the .swf part of your Publish settings. Test Movie uses the most recent .swf options in your Publish Settings. This might sound like a lot of options, but the main decision is whether you want to export just the .swf, as in Export Movie, or the .swf along with the .html when you use Publish.
Simple Hyperlinks This hour you’ve seen how to publish your movies to a browser. But what good is a Flash movie in a browser if it doesn’t do “web stuff”? There’s nothing wrong with making a Flash movie that entertains, but if your users are already on the web, you might as well give them a way to hyperlink to other web pages.
From the Library of Lee Bogdanoff
374
HOUR 20: Linking a Movie to the Web
There’s only one script you have to learn to create a hyperlink: navigateToURL (or, if you’re using ActionScript 2.0, the script is getURL). If you already know how to create a hyperlink in HTML, you can think of this action as the same as a href. Specifically, when Flash encounters the navigateToURL action, it takes the user to a new web page, either within your site or to another website altogether. That’s the simple explanation; naturally, there are more details. You use this action to see how it works in the following task.
▼ TRY IT YOURSELF Use navigateToURL to Create a Hyperlink
In this task, you create a button that, when clicked, takes the user to another website. Follow these steps: 1. Create a new AS 3.0 file, and save it in an empty folder. The empty folder is useful when you’re creating complex websites because all the files and folders can get out of hand. 2. We could use a Button component, but just for fun let’s use one of the predesigned buttons that Flash provides. Choose Window, Common Libraries, Buttons, and click around in some of the folders until you find a button you like. Drag a Button onto the Stage. Double-click to edit the button to change the text on it to say GO. You might have to unlock the text layer by clicking under the Padlock icon on the Timeline next to the text layer. 3. Navigate back to Scene 1. Use the Properties panel to give the Button component the instance name goButton, as shown in Figure 20.3.
FIGURE 20.3 Give the Button component an instance name so you can reference it from your code.
From the Library of Lee Bogdanoff
Simple Hyperlinks
TIP
4. Click the keyframe, open the Actions panel, and type the following code: goButton.addEventListener(MouseEvent.CLICK, goNow)
375
TRY IT YOURSELF ▼ Use navigateToURL to Create a Hyperlink
function goNow ( evt ) { var url = “http://www.informit.com” navigateToURL( new URLRequest(url) ) }
5. Select File, Test Movie. When you click, you are taken to the InformIT website. 6. Next select File, Publish Preview, Default (or press F12). This time the Flash movie plays in a browser, and when you click the button, you probably see the extra-security warning dialog plus a Flash Player script error. The issue is that your .html and .swf files on your hard drive can be either local files or files on the Internet, but not both. You can click the Settings button, click the Continue button on the Flash Player script error dialog, and then explicitly authorize this file. Click the Edit Locations drop-down, select Add Location, click Browse for folder, and then select the folder you created in step 1. Next time you select Publish Preview, it should work.
Flash Player Security Flash’s seemingly overly paranoid security can make the tasks in this hour difficult to test—but the security rules are good. They have to do with the rule that a .swf running on your desktop (that is, not on a web server), might only access other files on your desktop but not the Internet. You can change the Local playback security setting in the Flash tab of the Publish Settings to Access Network Only, and the .swf is only able to access the web. The first point to understand is your .swf, running locally, can access either the web or local file, but not both. We don’t suggest changing the local-only default because while that enables you to test the navigateToURL locally, it disables other features, such as loading locally stored images at runtime, as you do next hour. Remember that after you upload your .swf, even with the local-only setting, it is able to load external images and jump to other web pages. You might think that because you only plan on delivering files to the web, all this is unimportant. However, to test without uploading the files, you need to configure your computer for testing. It’s pretty easy. First, none of this applies when you do a Test Movie because Flash’s security measures don’t apply. You might see an informational message in the output window though everything still works. For testing locally in the browser (and for the rest of this chapter), you should set up a .cfg file that defines a folder on your computer where the Flash Player knows the content is trusted by you. This disables the security restrictions for just that folder. In fact, that dialog you saw in the previous task only ap-
From the Library of Lee Bogdanoff
376
HOUR 20: Linking a Movie to the Web
pears because of a file called FlashAuthor.cfg that effectively says, “Show warnings because I’m authoring”—end users shouldn’t see that dialog. You can specify individual .swfs or an entire folder where it’s okay for files to access both the Internet and local files. So, pick a folder for projects in this book (for example, C:\Documents and Settings\Yourname\My Documents\STY Book\). Next, you need to find the Flash Security folder. On Windows, it’s in: c:\Documents and Settings\<username>\Application Data\Macromedia\Flash Player\#Security
On Macintosh (Mac), it’s in: /Users/<username>/Library/Preferences/Macromedia/Flash Player/#Security
Create a folder inside the #Security folder named FlashPlayerTrust. Finally, make a text file, and name it with the .cfg extension (for example, book.cfg). Inside this text file, type the path to the folder you’re okaying. For example: C:\Documents and Settings\<username>\My Documents\STY Book\
You can add as many locations as you want and as many files as you want to that FlashPlayerTrust folder. That’s it. Now you can simply save all your projects while testing in that folder, and they behave as they do when posted on a real web server.
Now that we have the security issue out of the way, let’s look at two other ways (in addition to using navigateToURL) you can create hyperlinks inside Flash. Any static text can have a URL associated with it automatically. You learn about this method in the following task.
▼ TRY IT YOURSELF Create a Text Hyperlink
In this task, you use an automatic feature to associate a hyperlink with a block of text. Follow these steps: 1. Create a block of text using any font you like, making the font big enough to read. 2. With the text block selected, access the Properties panel. First, make sure the text type is Static (not Dynamic or Input), and then type a legitimate URL into the URL Link field (located in the Options section between Paragraph and Filters). In Figure 20.4, http://www.informit.com is used. The text becomes underlined and hyperlinked text, also called hypertext.
From the Library of Lee Bogdanoff
Simple Hyperlinks
3. Select Publish Preview. It’s a built-in text property. Notice the new page replaces the browser window. As you see in the “Targeting Windows” section later this hour, it’s possible to change the target window to Blank to see the linked page appear in a new window instead.
377
TRY IT YOURSELF ▼ Create a Text Hyperlink FIGURE 20.4 You can make a selected block of text a hyperlink by specifying a URL link in the Properties panel.
Now, you learn the third way you can create hyperlinks: using dynamic text. This method, like the previous one, applies only to text. Dynamic text also has an option for HTML that enables you to populate a text block through setting the associated variable with actual HTML code. You see how this is done in the following task. In this task, you create HTML within a Flash text block. Follow these steps: 1. Use the Text tool to create a long block of text. It doesn’t matter what you type because the text is replaced.
TRY IT YOURSELF ▼ Use Dynamic Text to Create a Hyperlink
2. With the text block selected, use the Properties panel to set the text type as Dynamic, and give this instance the name my_txt. Also, make sure you have Render as HTML button selected, and Selectable button unselected (see Figure 20.5). These are the buttons immediately below the Anti-alias setting in the Properties panel. 3. In the first keyframe, populate the my_txt instance by selecting the first frame and accessing the Actions panel. Then, type the following code: my_txt.htmlText=”This is Hot.”
From the Library of Lee Bogdanoff
378
▼ TRY IT YOURSELF Use Dynamic Text to Create a Hyperlink
HOUR 20: Linking a Movie to the Web
4. You set the htmlText property, not the text property as you do when populating with plain text. If you understand the HTML, great; otherwise, don’t worry about it for now. It makes sense later. Select Publish Preview.
FIGURE 20.5 Selecting Dynamic text and the Render as HTML button option for the text block enables you to create HTML in Flash.
NOTE
Quotes Within Quotes In ActionScript, strings always begin and end with quote marks. Notice the single quote marks for the nested string around the web address. If you need to include regular quote marks within a string, you have to “escape” the nested quote. In other words, my_txt.text=”I said “No”” doesn’t work because Flash thinks the quotation mark right before No is the ending quotation mark for the string started before I. To make it work, precede the literal quote mark with a backslash character (\), like this: my_txt.text=”I said \”No\””. This is called escaping. Using single quotes when possible is much easier.
Using Style Sheets Although you can’t display every type of HTML inside Flash because only the most basic tags are supported, Flash supports a limited version of Cascading Style Sheets (CSS). You can view the whole list by searching for “Supported CSS properties” in Flash’s Help panel. You can use CSS to define text styles like a word processor. When you change the CSS definition, the text that uses the styles automatically updates. You can store CSS definitions within Flash or in external .css files. To get you started, the following task exploits the main features of CSS. From the Library of Lee Bogdanoff
Using Style Sheets
In this task, you control text display by using CSS code. Follow these steps: 1. For this task, we store the CSS declaration in a .css text file. Use Notepad or a simple text editor to create a file with the following contents:
379
TRY IT YOURSELF ▼ Display Text by Using CSS
bodyText { font-family: Verdana; color:#000000; font-size: 10px; } headline { font-family: Verdana; color:#006600; font-size: 24px; } a:hover{ color:#FF0000; font-size: 10px; text-decoration:underline; }
2. We give you a quick translation. We’ve defined two styles: bodyText and headline. In addition, the a:hover defines how the text with hyperlinks should appear when the cursor hovers over the link. Save the text file in a new folder, and name it styles.css. 3. Create a new AS 3.0 Flash file, and save it in the same folder as the CSS. You can name it usesCSS.fla. 4. Place onstage a dynamic text field, and make the margins as wide as the stage. Give this text an instance name: myCssText_txt. 5. Select the first keyframe, and open the Actions panel (or press F9). Type the following code into the Actions panel: //clear the text field: myCssText_txt.text = ““ //define a new style sheet and attach it to the text field var myStyles:StyleSheet = new StyleSheet() myCssText_txt.styleSheet = myStyles //set up the URL loader to read the css file var myURLLoader:URLLoader = new URLLoader() myURLLoader.addEventListener(Event.COMPLETE, stylesLoaded) //define what happens when it loads function stylesLoaded (evt){ //parse the css file myStyles.parseCSS( myURLLoader.data ) //populate the field using our new styles
From the Library of Lee Bogdanoff
380
▼ TRY IT YOURSELF Display Text by Using CSS
HOUR 20: Linking a Movie to the Web
myCssText_txt.htmlText = “this is the ➥headline” myCssText_txt.htmlText += “this is the ➥body” myCssText_txt.htmlText += “this is a “ myCssText_txt.htmlText += “link” } //commence loading myURLLoader.load( new URLRequest(“styles.css”) )
The comments (text appearing after //) should help explain what’s going on. First, we clear the text field. Next we define a style sheet and apply it to the text field. The last line begins loading the .css file. We populate the text field, but not until it’s fully loaded inside the homemade stylesLoaded function. Finally, note you can change the # to an actual URL to enable users to hyperlink. 6. Test the movie. Next Hour, you’ll see more examples that use the URLLoader and URLRequest classes.
You typed a lot of code in the preceding task, but it’s a cool feature. Remember, when you publish to the web, you need to include the .swf and the .html (as usual), but also the styles.css file. It gets loaded every time the user visits the site. That means you can change the styles by editing that .css file, and users see the changes the next time they visit. You never have to touch the source .fla file and republish. You’re keeping the layout style separate from the actual content, which is a great way to make updates easy. In some ways, this task is a good introduction to next hour where you learn about modularizing your Flash site.
What Other Web Tasks Can Flash Do? For the rest of this hour, you learn some useful and powerful ways to combine Flash with standard HTML. If you already know HTML, you should be able to take this information and run with it. If you’re not familiar with HTML, the rest of this hour should still be useful because you see some examples of what’s possible. In addition, you see some code snippets you can probably use in the future. If you want to learn more about the concepts discussed this hour, you can look to any good HTML resource.
From the Library of Lee Bogdanoff
What Other Web Tasks Can Flash Do?
381
Targeting Windows You probably noticed that when you clicked the button you created in the second task this hour, “Use navigateToURL to Create a Hyperlink,” not only were you hyperlinked to another page, but the new page appeared in a new browser window. When you made text hyperlinks in the subsequent two tasks, the new pages would replace the current browser window. To take control of this behavior, you can specify the optional window parameter with one of the standard HTML values: _self, _blank, _parent, _top. In HTML, window refers to the rectangular frame into which the user views a web page. Some pages have one big window whereas others are made up of an arrangement of several windows. Windows can be given names so you can specify into which window particular content should go. There are also some generic window names. Compare this to how you refer to houses in your neighborhood specifically by using addresses or by using generic terms such as “next door” and “across the street.” To specify a window when using navigateToURL, simply provide a second parameter containing the window name as a string. For example, in step 4 of the task “Use navigateToURL to Create a Hyperlink,” you can replace the second to the last line of code with: navigateToURL(new URLRequest(url), “_self”). That is, the first parameter is always the URLRequest and the second parameter (which is optional) can be any built-in window name (_self, _blank, _parent, _top) or any window you’ve previously named as in HTML frames. To specify a target window when using text hyperlinks (like you did in the task “Create a Text Hyperlink”), you can use the Target drop-down menu in the Properties panel to select from the built-in window names or enter the window name manually, as shown in Figure 20.6. Finally, if you’re creating hyperlinks using dynamic text, you can use the standard HTML attribute called target. That is, you can use the following code in place of the code you entered in step 3 of the task “Use Dynamic Text to Create a Hyperlink”: my_txt.htmlText=”This is Hot.”
One way to arrange several windows in HTML is by using framesets. One frameset can have as many frames as you want. Each frame can be designed to have specific dimensions and features, such as a menu bar or title bar. FIGURE 20.6 The Properties panel reveals a Target drop-down menu after you’ve entered a text hyperlink.
From the Library of Lee Bogdanoff
382
HOUR 20: Linking a Movie to the Web
Sending Email: The mailto: Command Although you have to use more advanced techniques to actually send email from a web page, here’s a quick-and-dirty way to do something close. The HTML command mailto: can be used in conjunction with navigateToURL to automatically open a user’s email program with a preaddressed email message. The user just needs to type a message, and then send the email message. It’s really simple. In step 4 of the task “Use navigateToURL to Create a Hyperlink,” you can replace the code inside the goNow() function with: var url = “mailto:[email protected]” navigateToURL( new URLRequest(url), “_self” )
Here, [email protected] is the email address. If you select the Publish Preview command, when the action is encountered, you should see that a new email message that’s already addressed is created. The user only needs to type the message, and click Send. The only catch is the user must have a default email program identified on his computer. Most people do. If you want the email message to pop up with the subject and body content already created, you can change the simple mailto: string for the URL to something like this: mailto:[email protected]?subject=Subject goes here&body=Body goes here
Simply replace [email protected] with the address you want the message sent to; replace Subject goes here with whatever subject line you want; and replace Body goes here with whatever message you want in the body of the email message.
Using Flash Inside a Larger Website Although you can create a website entirely in Flash, sometimes it’s not necessary or even desirable. Often, you just want to use Flash to supplement a more conventional website. In the following sections, you learn several ways to use Flash within a larger website. This should help spark some ideas that you can use in your own website.
From the Library of Lee Bogdanoff
Using Flash Inside a Larger Website
383
Pop-Up Windows You can supplement a plain HTML website by simply including a link to a Flash web page. Imagine a web page that has text, images, and a simple hyperlink (in HTML, A HREF) that points to a page you created with Flash’s Publish command. This is the basic hyperlink you’ve seen a million times on the web. Somewhere in your HTML file you include this: Click for Flash sample
This creates a line of hypertext on your website that, when clicked, opens up the HTML file that contains your published Flash movie. You can even make this link cause the Flash site (in this case, published.html) open up in a new, blank window: Click for Flash sample
If you’re creating your web page by using Dreamweaver, you can use the Properties panel to specify the link and target settings, as shown in Figure 20.7. The Link and Target fields are equivalent to the URL and Window fields, respectively, in the getURL parameters of Flash. FIGURE 20.7 Using Dreamweaver, you can turn text into hypertext via the Properties panel.
Properties panel
Target field
Link field
You can add some sophistication to this link from a regular site. The preceding methods cause the browser to hyperlink to another page. However, one
From the Library of Lee Bogdanoff
384
HOUR 20: Linking a Movie to the Web
technique that might be appropriate is to pop up a new browser window that has specific features. For example, the pop-up window can be sized to your specifications instead of being the same size as the current browser window. You can specify other features to remove or disable certain browser attributes, such as resizing, viewing the buttons, and so on. This involves a little JavaScript attached to a line of hypertext. Here’s an example: click here!
The key portion of this script is window.open(). The first parameter is the filename you want to open (in this case, animation.html). The second parameter is the arbitrary name you’re giving this window, and the third parameter is a string full of the features you’re including. In this case, only the width and height are specified in pixels. You can find more features that can be included here in a good JavaScript reference. If you want to allow the user to close the window that has popped up in another way besides using the browser’s close button, you can provide some simple JavaScript to perform the task. For example, you can make a Flash animation file called animation.fla with the movie size set to 300×300, and then publish it to .swf and .html files. Then, you can open the HTML file you created (animation.html) by using a text editor (such as Notepad). At the very end of the file are these lines: 