ptg ptg Animation with Scripting for Adobe ® Flash ® Professional CS5 Studio Techniques Chris Georgenes and Justin Putney This Adobe Press book is published by Peachpit. Peachpit 1249 Eighth Street Berkeley, CA 94710 (510) 524-2178 Fax: (510) 524-2221 Peachpit is a division of Pearson Education For the latest on Adobe Press books, go to www.adobepress.com To report errors, please send a note to errata@peachpit.com Copyright © 2011 Chris Georgenes and Justin Putney Project Editor: Susan Rimerman Development Editor/Copy Editor: Anne Marie Walker Production Editor: Hilal Sala Technical Editor: Amy Petersen Composition: David Van Ness Proofreader: Scout Festa Indexer: Karin Arrigoni Cover design: Peachpit/Charlene Will Cover illustration: Pascal Campion Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com. Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the authors nor Peachpit 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 instructions contained in this book or by the computer software and hardware products described in it. Trademarks Adobe, Flash, and ActionScript are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book. ISBN 13: 978-0-321-68369-4 ISBN 10: 0-321-68369-2 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America ptg iii Contents Introduction v Chapter 1 Getting Started 1 File Setup Tips 2 Camera Techniques 13 Incorporating Audio 20 Narrative 27 Character Design 29 Storyboarding 31 Animatics 46 Chapter 2 Character Animation 49 Animation Techniques 50 Designing a Character 54 Building a Character in Flash 56 Animating a Character 90 Adding Dialogue 110 Chapter 3 Introduction to ActionScript Classes 129 Reasons to Use ActionScript 130 The Importance of Planning 131 ActionScript Basics 134 The Document Class 141 Object-oriented Programming 150 Attaching Classes to Library Items 151 Events 154 Creating Reusable Classes For Animation 155 Using Classes from Other Sources 224 Chapter 4 Workflow Automation 225 Why Automate? 226 What Is JSFL? 227 Writing Scripts to Control Flash 232 Extending Flash Even Further 257 Packaging Extensions for Distribution 268 More Resources 270 Chapter 5 Sharing Your Animation 273 Showcasing Your Animation on the Web 274 Publishing for Broadcast 325 Publishing to Mobile and Desktop 333 Index 335 Download from www.wowebook.com ptg iv Acknowledgments This book would not have been possible if it weren’t for the tireless efforts of my coauthor Justin Putney. His knowledge of designing and animating in Flash mixed with his Action- Script prowess make for a rare combination of Flash talent. Thanks to my wife Becky who for weeks tolerated my absence from most of our family- related events. She continues to raise the bar of patience year after year, and for that our marriage remains intact and my gratitude unparalleled. Thanks to Thibault Imbert for his Sausage Kong ActionScript and overall generosity. Thanks to Amy Petersen for her technical edits. Thanks to Pascal Campion for gracing the cover with his strokes of genius. Thanks to Adobe Systems for providing the tools that allow us to create endlessly. —Chris Georgenes Several years ago, in my first days of learning Flash, I emailed Chris for assistance with one of his beginner-level tutorials. I was amazed not only that he wrote me back, but also that he was so enthusiastic about helping a total stranger. His willingness to share his skills with the Flash community has remained a source of inspiration, and I’m honored to have coauthored this book with him. I’m thrilled and honored that Pascal Campion created the beautiful cover. Thanks to John Smick for graciously lending his voice talent. Thanks to Anne Marie Walker, Susan Rimerman, and the entire team at Peachpit for their flexibility in the course of making this book. Thanks to my family, especially my mother and sister, as I worked on the book through most of our shared vacation. Thanks to my mom and my grandfather for supporting my drawing and computer interests. Thanks to Carole Petersen for her enthusiastic encour- agement along the way. Thanks to my wife, Amy Petersen, who not only did a fantastic job as technical editor, but also served as my sounding board for several elements in the book. She was very patient as she and I spent long hours at the computer. She gave me my first copy of Flash as a birth- day present and encouraged me to start animating my drawings. I would not be where I am today without her. —Justin Putney Download from www.wowebook.com ptg Introduction T his book assumes you have a working knowledge of Flash, meaning that you have probably already drawn with the Brush tool, converted artwork to a symbol, created a tween, personalized your Flash workspace, and published a SWF file. If you are not yet familiar with these tasks, it is recommended that you read a beginning-level Flash book before attempting the exercises in this book. To best understand the approach to animating with Flash in this book, it helps to know a little bit about Flash history. The Nature of the Beast In 1996, FutureSplash Animator was released with a basic set of editing tools and a Time- line, which at the time was one of the few ways to create animations for the web. That same year, Macromedia acquired FutureSplash Animator and renamed it Flash. Over the next three releases, a Library was added, the Movie Clip symbol emerged, and basic scripting was built into the package. In Flash 5, Macromedia introduced ActionScript 1.0, XML sup- port, and HTML formatting. Flash 6, known as Flash MX, included video capabilities and user interface components. Version 7, known as MX 2004, introduced ActionScript 2.0, an extensibility language, more video support, and many other features. Flash 8 expanded on the previous features and added additional mobile support. In 2005, Adobe purchased Macromedia. In 2007, Flash Professional CS3 was released as part of the Adobe Creative Suite and included ActionScript 3.0. Flash is now a platform capable of exporting to the web, television and film, mobile devices, and computer desktops (as native applications). Adobe has introduced a developer tool, Flash Builder (formerly Flex Builder), and a designer tool, Flash Catalyst, which also author Flash content (SWF files). The Flash we use today is not unlike a chimera, the beast from ancient Greek mythology composed of parts from several different animals. Introduction Download from www.wowebook.com ptg vi Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques Who Should Read This Book? This book is for you: the aspiring animator, motion designer, or graphic designer who seeks to exploit the chi- meric nature of Flash to get the most out of your animat- ing experience. If you’re interested in creating animated shorts, video games, mobile games, or websites, this book can introduce you to parts of Flash that you may have previously shied away—or even recoiled—from, or that you simply didn’t know about. What makes Flash Professional different from the other tools in the Flash platform is that, at its core, it’s still an animation program. The nonanimation components can be used to radically improve your animations, as well as your animating experience. Although activities such as writing ActionScript and extending Flash can feel daunting to nonprogrammers, once you have completed a project or two using these techniques, much of that original hesita- tion subsides. You may have been working in Flash for a little while, and you might feel like you’ve plateaued at a certain skill or productivity level. If you find yourself at such a juncture, it is our hope that this book will provide some novel tech- niques. The book also includes several “best practices” for working in teams and may provide insight into the roles of your colleagues who may be using Flash in a different way. You may have noticed that the titles of many professional Flash users (as well as those seen in job postings) contain “hybrid slashes” (e.g., animator/designer, designer/devel- oper), and even more eccentricities (e.g., Flash guru and Flash ninja) are becoming increasingly common. This book will help you wear any combination of hats you find neces- sary while you’re on the job animating. After you have completed the exercises in this book, you will probably be pleased to find yourself off that plateau and onto a higher level, and you and that Flash beast will be playing a whole new game. Download from www.wowebook.com ptg vii Introduction What’s in This Book? We’ve compiled a mix tape containing some of Flash’s greatest hits. Here’s a rundown of the playlist: Chapter 1: Getting Started. This chapter covers some “best practices” for file setup while introducing a few important animation concepts. Chapter 2: Character Animation. This chapter covers the basics of creating a character and animating using inverse kinematics or “bones” in Flash. Chapter 3: Introduction to ActionScript Classes. This chap- ter reaches right for the most powerful developer tools. Don’t worry; we’ll provide the safety goggles. If you follow the exercises, you’ll create some beautiful, reusable effects that can be repurposed for as long as you like. Chapter 4: Workflow Automation. This chapter focuses on speeding up some of the otherwise time-intensive tasks common to most animation projects. Chapter 5: Sharing Your Animation. In this last chapter you’ll assemble an animated portfolio to showcase your cre- ations made in previous chapters. The chapter also provides additional ways (broadcast, video sharing sites, mobile, and desktop) to share your animation. Conventions Used in This Book This book uses Mac OS X for all the figures. Fortunately, there is little difference between using Flash on a Mac and on a Windows PC. All shortcuts are listed with the Mac ver- sion first (e.g., Command+A/Ctrl+A). Because the average Mac mouse has only one button, Ctrl-click refers to access- ing context menus on Mac systems that lack a right-click mouse option. Code within the book is displayed in a monospaced font. When new code is added to existing code, it is highlighted in blue as follows: //old code //new code //old code Download from www.wowebook.com ptg viii Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques A return character (➥) in front of a line break is used to designate continuous lines of code. What’s on the CD? The CD included with this book contains finished versions of the exercises for each chapter, as well as the assets neces- sary to complete the exercises. The CD also contains an Extensions folder that provides you with free Flash exten- sions to support your animation workflow. Beyond This Book, Where Can I Go? If you have the print version of the book, your copy comes equipped with a tracking device. If you’re reading the electronic version, we’re already monitoring your location via satellite. As a Flashstar, Chris is famously accessible. You can follow him on Twitter, Facebook, and/or via his blog: . Twitter. @keyframer . Facebook. http://www.facebook.com/chris.georgenes . Blog. http://www.keyframer.com . Portfolio. http://www.mudbubble.com You can find Justin at one or more of the following locations: . Twitter. @justinputney . Blog. http://blog.ajarproductions.com . Portfolio. http://putney.ajarproductions.com There is also a special landing page for this book at http://animflashbook.ajarproductions.com. Download from www.wowebook.com File Download: www.peachpit.com/ebookfiles/0321624610 ptg Chapter 1 Getting Started CHAPTER I f you’ve picked up this book, you probably already know a thing or two about Flash. Most likely, you also know that Flash is a multifaceted application, and there isn’t a single, linear way in which everyone learns to use Flash. What you learn and what you retain depends greatly on how you use Flash. This book is largely aimed at aspiring animators who want to expand their skill set and learn how to add interactivity. Even within the world of Flash animation, there are numerous techniques and styles that you can employ. This first chapter will serve as a primer and a refresher to ensure that everyone is on the same page (so to speak) before moving forward in the book. In this chapter, we’ll cover some basic animation concepts, production techniques for Flash animation, and how to begin planning an animated project. The techniques covered are applicable to animated stories, animated games, interactive applications, and in some cases, live-action movies. The goals for this chapter include: . Learn file setup basics . Learn production techniques to keep your files organized . Understand different types of narratives and how they can be created in Flash . Learn to simulate camera movements in Flash . Study the basics of storyboards and animatics . Walk through an existing storyboard for an animated game The remaining chapters in this book will apply the techniques found in this chapter to create dynamic characters for animated and interactive projects. Before bounding for- ward, let’s look at some best practices for your Flash files. 1 Getting Started Download from www.wowebook.com ptg 2 Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques File Setup Tips When audience members are immersed in a fantastic piece of art, a well-executed magic trick, or a mind-bending special effect, they are generally too distracted to think about how that particular experience was created. As an animator, it is of the utmost importance that you under- stand how to create a particularly engrossing experience— the successful execution of which depends heavily on what occurs behind the scenes. In Flash, there are several choices to be made (regarding Library symbols, document settings, ActionScript, and so on) that your audience will never see, but these choices will nevertheless affect your final product. This section introduces (or reviews depending on your experience-level) some settings, techniques, and templates that are designed to save you time and energy. Title Safe and Action Safe Guides Safe areas are used in television to ensure that important information is not lost or distorted at the edge of a viewer’s screen. As such, safe areas can be considered as margins for visual content that is intended for broadcast. There are two types of safe areas: action safe and title safe. The action safe area indicates the outer edges at which important graphics can reside and actions can take place. The title safe area exists within the action safe area and indicates the outer edges at which text (i.e., titles and credits) should be displayed. Even though most of the technology in people’s homes has changed significantly since the inception of television (i.e., many television and computer screens are now flat), and most modern televisions do a great job displaying content at the edges of the screen, it’s still a best practice to use safe areas. In most cases, it will also be desirable for the visual composition of your movies to keep your content away from the outer edges of the screen. Of course, action and title safe areas are generally not a concern for web content because in most cases, the width and height of the Download from www.wowebook.com [...]... www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques In previous versions of Flash, saving your file would simply append changes to your document, but would not, for instance, remove the residual data from any Library items that had been deleted To deal with this issue, previous versions of Flash had a Save and Compact option in the File menu In CS5, the FLA format is... respect to the relatively immobile sky in the background 19 Download from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques 3 With the playhead at the last frame, use the Free Trans- form tool or the Transform panel (Window > Transform) to make the symbol larger 4 Play back your animation to see the illusion of the “camera” zooming into the scene (Figure 1.26) Figure... content These timelines are known as scenes 9 Download from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques Scenes Scenes are great to use for each different setting in your story Scenes help segment your overall Timeline into smaller pieces, so that you don’t have a single Timeline with thousands of frames that you have to scroll through You can add as many... template with action and title safe guides from the New from Template dialog box 3 Download from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques A new document will be generated from the selected template (Figure 1.2) This document’s Timeline will contain two layers: a “title / action safe” Guide layer and a “content” layer (Figure 1.3) Figure 1.2 The Flash. .. demos): http://bryanheisey.com/ blog/?page_id=18 13 Download from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques Panning Panning is the technique of moving or rotating the camera horizontally to follow an object in motion or to reveal other objects within the scene Panning in Flash generally refers to 2D movement A perfect example of (3D) panning occurs in... Scene elements rendered in 3D to show how the elements will be affected by their varied depths 17 Download from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques To simulate parallax scrolling within an existing (multilayered) scene in Flash: 1 Make sure each piece of artwork in your scene has been converted to a symbol and each symbol has its own layer 2 Add... from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques 3 Select frame 1 of the labels layer In the Name field To add a frame label that is specifically a note and is not to be used with ActionScript, you can add a double-slash (//) to the beginning of the label text (or select Comment from the Type menu) Frame notes will not be published with your movie You may... from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques To alter your sound settings: 1 Choose File > Publish Settings and select the Flash heading (Figure 1.34) In addition to adjusting global Publish Settings, you can individually adjust the quality of each sound item in the Library Note that the Override sound settings check box in the Flash Publish Settings... tell you in 27 Download from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques broad strokes what makes Star Wars a compelling story Answering these questions will also make it easier for you to explain your story to others, which is especially helpful if you are seeking funding or need additional help producing your animation In addition, answering these questions... hear anything at this point This is because the default behavior is Event The next section shows you how to adjust the sound properties 21 Download from www.wowebook.com Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques Sound Properties In the Properties panel, when your sound is selected in the Timeline, you can choose the Sync menu to select from four behavior options: Event, . ptg ptg Animation with Scripting for Adobe ® Flash ® Professional CS5 Studio Techniques Chris Georgenes and Justin Putney This Adobe Press book is published by Peachpit. Peachpit 1249. Download from www.wowebook.com ptg vi Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques Who Should Read This Book? This book is for you: the aspiring animator, motion. template with action and title safe guides from the New from Template dialog box. Download from www.wowebook.com ptg 4 Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques A