The Essential Guide to Flash CS4. Cheridan Kerr and Jon Keats

Transcription

1 The Essential Guide to Flash CS4 Cheridan Kerr and Jon Keats

2 The Essential Guide to Flash CS4 Copyright 2009 by Cheridan Kerr and Jon Keats All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): ISBN-13 (electronic): Printed and bound in the United States of America Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY Phone SPRINGER, fax , , or visit. For information on translations, please contact Apress directly at 233 Spring Street, New York, New York, 10013, , or visit. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. ebook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales ebook Licensing web page at. The information in this book is distributed on an as is basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is freely available to readers at in the Downloads section. Lead Editor Ben Renow-Clarke Credits Production Editor Ellie Fountain Technical Reviewers Leyton Smith, Alberto González López Olivera Editorial Board Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Michelle Lowman, Matthew Moodie, Jeffrey Pepper, Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Managers Richard Dal Porto, Candace English Copy Editors Candace English, Damon Larson Compositor Lynn L Heureux Proofreader Lisa Hamilton Indexer Ron Strauss Artist April Milne Interior and Cover Designer Kurt Krames Manufacturing Director Tom Debolski Associate Production Director Kari Brooks-Copony

3 For my husband and best friend, David. Cheridan Kerr To my loving wife Bianca, our family, and bub to be. Praise to Cheridan for the patience. Special thanks to Chub Chub for the support and companionship on those late lonely nights. Jon Keats

4 CONTENTS AT A GLANCE About the Authors...xv About the Technical Reviewer...xvi Acknowledgments...xvii Introduction...xviii Chapter 1: Welcome to Flash CS4...1 Chapter 2: Getting Creative: How to Make Your Ideas Come to Life Through Project Planning Chapter 3: Getting Your Hands Dirty: Layers, Masks,...61 and Photoshop Chapter 4: Draw Me a Picture: Using the Drawing Tools...83 Chapter 5: Filters and Blends Chapter 6: Let s Get Animated! Chapter 7: Achieving Lifelike Motion with Inverse Kinematics Chapter 8: Lights, Camera, ActionScript! Chapter 9: Using 3D Space in Flash CS iv

5 Chapter 10: Seeing and Hearing Are Believing! Chapter 11: Utilizing Best Practices to Get the Most out of Your Flash CS4 Movies Chapter 12: The End of the Beginning Appendix A: Installing Away3D and Other Class Libraries Using Subversion Appendix B: Keyboard Shortcuts Index v

6 CONTENTS About the Authors...xv About the Technical Reviewer...xvi Acknowledgments...xvii Introduction...xviii Chapter 1: Welcome to Flash CS4...1 Welcome to the Future!... 2 How Flash CS4 is different from Flash CS Object-based animation The Motion Editor panel gives you greater control Motion tween presets gets you started quickly! Achieve pure motion with inverse kinematics Creating an IK animation with symbols Instant 3D transformations using Flash CS An artist is born with the Deco drawing tool The Vine fill The Grid fill The Symmetry brush Just how do all these great things benefit us? Advertising templates in Flash CS Who uses Flash CS4? Graphic designers Animators Web designers Web developers Summary vii

7 CONTENTS Chapter 2: Getting Creative: How to Make Your Ideas Come to Life Through Project Planning The development cycle: Implementing the design flow in your Flash CS4 project Phase 1: Concept and planning Researching what your users want to do Defining your concept with wireframes Wireframes dictate the user journey and interactivity Phase 2: Design and build Design elements Design principles Navigation in Flash CS Typography: A powerful communication tool Phase 3: Quality assurance testing Testing over multiple connection speeds Testing across browsers Testing across more than one version of Flash Player Testing your Flash movie on different computers Phase 4: Deployment and implementation Proceed with caution: Using Flash wisely Summary Chapter 3: Getting Your Hands Dirty: Layers, Masks,...61 and Photoshop Layer upon layer upon layer! Normal layers Mask layers Combining mask layers and ActionScript Guide layers Motion guide layers Importing artwork from Photoshop Using the PSD importer Flash CS4 and Photoshop compatibility Summary Chapter 4: Draw Me a Picture: Using the Drawing Tools...83 A picture is worth a thousand words All about pixels Types of image formats Bitmap or raster graphics Vector graphics Paths Direction lines and points viii

8 CONTENTS What can the drawing tools do? Drawing objects Using Merge Drawing mode Using Object Drawing mode Using Primitive Shape mode Using the 3D Rotation tool Text madness! Using the Text tool Implementing text fields Anti-aliasing fonts Using device fonts Using font outlines Creating and working with symbols Movie clips Buttons Graphic symbols Font symbols Defining symbols and instances Creating an empty symbol Editing symbols Drawing a logo Importing the sketch Mastering the Pen tool Pulling it all together Color me bad Summary Chapter 5: Filters and Blends What are filters? Pixel Bender filters Preset/animated filters Applying preset filters The Drop Shadow filter The Blur filter The Glow filter The Bevel filter The Gradient Glow filter The Gradient Bevel filter The Adjust Color filter What are blends? The blend modes Dissecting the blend modes Applying a blend mode Applying a filter and blend to simulate glass Summary ix

9 CONTENTS Chapter 6: Let s Get Animated! Setting up the timeline appearance Using the playhead Sailing the seven scenes Adding and deleting scenes Getting animated Tween time! Motion tweens Classic tweens Shape tweens Frame-by-frame animation Inverse kinematic poses Creating a motion tween Using motion tween presets Creating pathed tween motion Customizing easing on classic tweens Shape tweens Creating a shape tween Creating a frame-by-frame animation Using onion skinning in frame-by-frame animations Creating an animated leaderboard Animating text on the banner Summary Chapter 7: Achieving Lifelike Motion with Inverse Kinematics Learning about armatures and bones Understanding inverse-kinematic shapes Inverse-kinematic poses Using the inverse kinematics Properties Inspector Making a monster! Bringing the armature to life Summary Chapter 8: Lights, Camera, ActionScript! Using the Actions panel The Actions toolbox The Script pane The Script Navigator The Panel menu Object-oriented programming and ActionScript G day World External ActionScript files Using a document class Variables and data types x

10 CONTENTS Operators Decisions Loops Functions If I could turn back time: Dates, times, and ActionScript Date and time basics Controlling time ActionScript 3.0 and XML ActionScript 3.0 and buttons Understanding mouse events Text fields and ActionScript Sending with fields and buttons Summary Chapter 9: Using 3D Space in Flash CS Moving stuff in 3D space Manipulating an object in 3D space using the Properties Inspector Moving objects in 3D space using the 3D Translation tool Moving the object along the z-axis using the 3D Translation tool Moving multiple objects in 3D space Rotating stuff in 3D space Rotating groups of objects in 3D space Rotating an object in 3D space using the Properties Inspector Creating a simple spinning logo Creating a 3D carousel with ActionScript and XML in Flash CS Creating the Flash file to house your carousel Creating the XML file Creating the variables to call the XML file in ActionScript Displaying the information on stage Rotating your carousel Flash CS4 and 3D engines Papervison3D, Sandy 3D, and Away3D Summary Chapter 10: Seeing and Hearing Are Believing! Sweet, sweet sounds in Flash Importing sounds Exporting sounds Sound file compression in Flash CS ADPCM compression MP3 compression Raw compression Speech compression Compressing a sound file Adding sounds to the timeline and using the sound settings in the Properties Inspector xi

11 CONTENTS xii Applying sounds to a button using ActionScript Moving pictures are worth a million words! Importing videos into Flash CS Importing a movie from the Library to the stage How to embed an FLV in a SWF file Adding sounds to your video Using an external video file in your Flash CS4 animation Summary Chapter 11: Utilizing Best Practices to Get the Most out of Your Flash CS4 Movies Accessibility is responsibility Ensuring your banners comply with publishers standards Creating your backup GIF Adhering to IAB standards for banner ads Universal banner standards Tracking your banner advertisement Using the Accessibility panel Making Flash movies screen reader friendly Optimizing the tab-control experience Summary Chapter 12: The End of the Beginning Preparation is key Importing the background Importing the logo Creating buttons for your site Creating the site pages Calling the remaining pages Embedding Flash documents into HTML Publish Settings for HTML Upload me Summary Appendix A: Installing Away3D and Other Class Libraries Using Subversion Installing Subversion and Away3D for MAC OS X Installing Subversion and Away3D for Windows Appendix B: Keyboard Shortcuts Shortcuts for Mac OS X File Edit View Insert Modify

12 CONTENTS Text Control Debug Window Help Shortcuts for Windows File Edit View Insert Modify Text Control Debug Window Help Index xiii

13 ABOUT THE AUTHORS Cheridan Kerr Cheridan Kerr has been involved in web development and design since 1997, when she began working on a research team for the Y2K Millennium Bug. It was there she learned about the Internet and promptly fell in love with the medium. In her career she has been responsible for websites in the early 00 s, such as and, and worked as creative services manager of Yahoo!7 in Australia with clients such as Toyota, 20th Century Fox, and Ford. Currently she is working as an executive producer for an Australian advertising agency. Jon Keats Jon Keats has been using Flash since its early predecessor, Fantavision, and has continued using every incarnation since. He is a regular contributor to online Flash communities like flashkit and gotoandplay(). Over the years he has used his background in visual art, music, and programming to create interactive solutions for a host of major national and international clients. Jon holds a bachelor of design, specializing in stereoscopic 3D visualization and interactive systems, from the University of Newcastle, Australia. He has also studied computer and software engineering. He lives, armed with banjo in hand, atop a mountain nestled in the Australian outback with his loving family and an adopted crazy puglike alien life form. xv

14 ABOUT THE TECHNICAL REVIEWER Leyton Smith is a multidisciplinary, diversely experienced industrial designer practicing architectural planning and design in Sydney, Australia. He has been working with and has supported the Flash community since the mid 90 s and has designed and developed Flashbased visual-communication and motion-graphic projects for film, stage, and Web. xvi

15 ACKNOWLEDGMENTS It s always a shock when you re working on one of these books, the sheer number of talented people who are involved from inception to completion. We would like to list them in no particular order here, but offer our love and gratitude to each one. Ben Renow-Clarke, for being a patient and wise editor with always-constructive and just feedback. Thanks for being an inspiration. Richard Dal Porto and Candace English, the wonderful project managers who ensured this book was steered always toward the finish line. Leyton Smith, a technical editor among technical editors, who picked up this book after a number of false starts and drove it home. Once again Candace English and also Damon Larson for taking these pages and ensuring they became the beautiful structured pages you see before you. Ellie Fountain for the wonderful production-editor work. And last, but not least, to Spotty McGotty and Chub Chub, the pets who maintained the vigil with us during the late nights and early mornings as deadlines loomed and passed. Cheridan Kerr and Jon Keats xvii

16 INTRODUCTION Over the last decade, we have seen a phenomenal change in the way we interact with sites online. Where the experience for the end user was once two-dimensional, there are now endless possibilities a Flash designer can create to introduce users to a whole new world of interaction with their animations, and ergo, their brands. Yet with all of these great new abilities comes a responsibility to your company and your users to present the best experience you can. This book will not only help to demystify Adobe Flash CS4 for newcomers to the CS4 suite of products; it will guide you on current industry standards and marketing principles, with useful insights into the way your online banner-advertisement campaigns and websites can help you cut through the clutter and noise of online marketing. The Essential Guide to Flash CS4 is aimed at the intermediate Flash user as well as the more advanced user who wants to become quickly familiarized with Flash CS4 s awesome new capabilities. Who is this book for? A variety of professionals will find The Essential Guide to Flash CS4 a useful tool when creating their online presence. Animators With more features than ever before, the new intuitive Flash CS4 interface will streamline animators development time. The Essential Guide to Flash CS4 will show you how. Graphic designers As well as enabling graphic designers to breathe life into their static designs, Flash CS4 s new tools, such as the Deco and Bones tools, allow graphic designers to import their creations from any of the CS4-suite products, ready for animation. xviii

17 INTRODUCTION Web designers This book demonstrates how web designers can quickly integrate database back-end systems with functional and compelling Flash CS4 interfaces, creating for users a beautiful and informative experience. Web developers The Essential Guide to Flash CS4 serves as a quick course in integrating back-end databases and front-end dynamic content. How is this book structured? The Essential Guide to Flash CS4 covers all aspects of designing and developing within Flash CS4. It begins with a fundamental overview in Chapter 1 and works steadily through each important aspect of the program. Chapter 1, Welcome to Flash CS4, takes you through the differences between Flash CS4 and Flash CS3, and introduces you to Flash CS4 s great new tools. Discover how the Motion Editor panel will save you precious development time, and enjoy a quick overview and intuitive exercises involving new features such as inverse kinematics and the Deco tool. Chapter 2, Getting Creative: How to Make Your Ideas Come to Life Through Project Planning, offers you a crash course in the project-development cycle and teaches you how to make the most of your projects with an introduction to wireframes and marketing-competitor analysis. New designers will find the comprehensive guide to design principles useful in assisting them with quickly creating comprehensive and attractive designs. Chapter 3, Getting Your Hands Dirty: Layers, Masks and Photoshop, teaches you about the importance of layers in the Flash CS4 universe, and defines the different kinds of layers you will encounter. Following a comprehensive overview of masks, we get down to brass tacks and demonstrate two ways mask layers can be used in an actual banner. Chapter 4, Draw Me a Picture: Using the Drawing Tools, takes you on a journey through different techniques that you can employ in Flash CS4 using the drawing tools. Following a series of step-by-step exercises, you will learn how to transform a hand-drawn logo into a usable and attractive digital asset, and you ll learn the differences between types of graphics and find out how to use them, discover the drawing modes, and learn to use the 3D rotation and translation tools. Chapter 5, Filters and Blends, teaches you how filters and blends in Flash CS4 can greatly streamline precious development time. You will learn, through a series of exercises, the impact that choosing the right filter and blend can have on your Flash CS4 design. Chapter 6, Let s Get Animated!, is designed to get you up and running in the world of animation. Here you will learn how to use Flash CS4 s capabilities to build a banner ad that is customizable and ready for you to dispatch to clients. xix

18 INTRODUCTION Chapter 7, Achieving Lifelike Motion with Inverse Kinematics, teaches you how to use inverse kinematics to give your animations a real-life perspective. In Chapter 1 you learned how to make an arm wave convincingly now it s time to expand on that! Chapter 8, Lights, Camera, ActionScript!, is focused purely on ActionScript 3.0. In this chapter you marry back-end databases with front-end beautiful Flash designs. You will learn about variables and data types, and how decisions are made through programming in ActionScript 3.0. You ll also learn the date and function basics and how to use XML and ActionScript 3.0 to make a dynamic application. Chapter 9, Using 3D Space in Flash CS4, teaches you all about the z-axis, which enables you to manipulate objects on your Flash CS4 stage in the third dimension, providing them with depth. Also included is an overview of how to create a 3D carousel using Flash CS4 XML, as well as an overview of 3D engines. Chapter 10, Seeing and Hearing Are Believing!, is all about bringing sound and video into your Flash CS4 movies. Remember that banner you created in Chapter 6? Now you re going to apply a convincing sound to it. You ll also learn how to import a video and apply sound to that. Chapter 11, Utilizing Best Practices to Get the Most out of Your Flash CS4 Movies, is a lesson in making your Flash CS4 applications available to everyone. Learn about utilizing screen readers, tab controls, and universal industry standards. It s a boring but necessary part of every online campaign. Chapter 12, The End of the Beginning, shows you how to bring the previous parts of the book together in a convincing display. Appendix A, Installing Away3D and Other Class Libraries Using Subversion, is a demonstration on how to install Flash CS4 plug-ins, specifically a 3D engine, to help you further bring your Flash animations to life. Appendix B, Keyboard Shortcuts, is a handy summary of both Windows and Mac OS shortcuts to help you streamline your development times. xx

19 INTRODUCTION Layout conventions To keep this book as clear and easy to follow as possible, the following text conventions are used throughout. Code is presented in. Menu commands are written in the form Menu Submenu Submenu. Where I want to draw your attention to something, I ve highlighted it like this: Ahem, don t say we didn t warn you. Sometimes code won t fit on a single line in a book. Where this happens, I use an arrow like this:. xxi