From After Effects to Flash: Poetry in Motion Graphics 9781590597484, 1590597486

Citation preview

JOIN THE REVOLUTION: SEE WHAT AFTER EFFECTS CAN DO FOR YOUR FLASH VIDEO PROJECTS!

TOM GREEN & TIAGO DIAS

From

After Effects to Flash

From After Effects to Flash Poetry in Motion Graphics

Tom Green and Tiago Dias

From After Effects to Flash: Poetry in Motion Graphics Copyright © 2006 by Tom Green and Tiago Dias 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): 978-1-59059-748-4 ISBN-10 (pbk): 1-59059-748-6 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 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 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit www.apress.com. 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 authors 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 www.friendsofed.com in the Downloads section.

Credits Lead Editor Chris Mills Technical Reviewer Charles E. Brown Editorial Board Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser, Keir Thomas, Matt Wade Project Manager Beth Christmas Copy Edit Manager Nicole Flores Copy Editor Ami Knox

Assistant Production Director Kari Brooks-Copony Production Editor Kelly Winquist Compositors Dina Quan, Lynn L'Heureux Artist April Milne Proofreaders Liz Welch, Lori Bring Indexer Tim Tate Interior and Cover Designer Kurt Krames Manufacturing Director Tom Debolski

DEDICATION To William Hanna, Dean of the School of Media Studies at the Humber Institute of Technology & Advanced Learning in Toronto, who shares my passion for digital media and has supported me every step of the way. Thanks, William. —Tom To my girlfriend, Anjanee, who supported me throughout the writing of this book, and learned to accept my working moods. —Tiago

CONTENTS AT A GLANCE

About the Authors

About the Technical Reviewer Acknowledgments Introduction .

xiii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

xiv

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

xvii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 1: From Concept to Final Product in After Effects 7

. . . . . . . .

Chapter 2: From Final Product to Upload in Flash Professional 8 Chapter 3: Motion Graphics and the Preset Text Effects in After Effects . . . . . . . . . . . . . . . . . . . . . . . Chapter 4: Creating Alpha Channel Video for Flash

xv

1

. . . .

33

. . . . . . . . . .

77

. . . . . . . . . . . . .

117

. . . . . . . . . . . . . . . . .

153

. . . . . . . . . . . . . . . . . . . . . . . . .

191

Chapter 7: Playing with Text .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

229

Chapter 8: Meet the Parents .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

275

Chapter 5: Creating Text Animations for Flash Chapter 6: Creating Special Effects .

Chapter 9: The Video Behind the Mask

. . . . . . . . . . . . . . . . . . . . . .

Chapter 10: Track Mattes Are Your Friend Chapter 11: Adding a Third Dimension .

. . . . . . . . . . . . . . . . . . . .

355

. . . . . . . . . . . . . . . . . . . . . .

395

Chapter 12: Audio, the Red-Headed Kid in a Family of Blondes Index .

309

. . . .

437

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

465

CONTENTS

About the Authors

About the Technical Reviewer Acknowledgments Introduction .

xiii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

xiv

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 1: From Concept to Final Product in After Effects 7

xv

xvii

. . . . . . . .

1

The After Effects workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Creating an After Effects project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Creating a Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Importing media into a project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Layers and timelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Adding and manipulating timeline objects . . . . . . . . . . . . . . . . . . . . . . . . . 10 Applying a transfer mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Creating and using solid layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Transforming and manipulating video clips . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Animating text in After Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Adding audio to your project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Rendering the project: the end game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Chapter 2: From Final Product to Upload in Flash Professional 8 A brief word on streaming . . . . . . . . . . . . . . . . The importance of data rate . . . . . . . . . . . . . Keyframes and streaming. . . . . . . . . . . . . . . Frame size . . . . . . . . . . . . . . . . . . . . . . . Creating the FLV file using the Flash 8 Video Encoder .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

33

. . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

34 35 37 38 39

CONTENTS Playing an FLV file in Flash Professional 8 . . . . . . . . . Using the Flash 8 FLVPlayback component . . . . . . Targeting video for Flash 7 or lower. . . . . . . . . . Using the FLVPlayback Custom UI components . . . Creating a custom video player . . . . . . . . . . . . . . Streaming video into a video object. . . . . . . . . . Using ActionScript to play a video. . . . . . . . . . . Creating buttons to control video playback . . . . . Turning the audio on and off . . . . . . . . . . . . . Showing the user the loading progress of an FLV file Publishing your video player . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

Chapter 3: Motion Graphics and the Preset Text Effects in After Effects . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . .

44 45 49 50 53 54 56 58 62 66 69 73

77

Text animation presets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Using an animation preset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Importing an After Effects SWF animation into Flash . . . . . . . . . . . . . . . . . . . 85 Combining animation presets to create Flash animations . . . . . . . . . . . . . . . . . . . 87 Creating a rich media Flash Video with animated text . . . . . . . . . . . . . . . . . . . . . 89 Importing and manipulating Illustrator images in After Effects . . . . . . . . . . . . . . 90 Combining animation effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Creating the FLV file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Creating a motion graphics banner ad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Applying effects to images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 After Effects motion graphics used as loaders for Flash movies . . . . . . . . . . . . . . . 104 A frame-based loader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 A clip event used as a loader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Using a movie clip and a ProgressBar component . . . . . . . . . . . . . . . . . . . . 110 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Chapter 4: Creating Alpha Channel Video for Flash

. . . . . . . . . . . . .

Keying video in After Effects . . . . . . . . . . . . . . . . . . . . . . Using the Keylight filter . . . . . . . . . . . . . . . . . . . . . . . Creating the video . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating an alpha channel FLV file . . . . . . . . . . . . . . . . . . . Adding and using alpha channel video in Flash . . . . . . . . . . Create an iPod-style video. . . . . . . . . . . . . . . . . . . . . . . . Trimming Flash video and using cue points to trigger Flash events . Adding cue points and trimming video . . . . . . . . . . . . . . Was that a cue point I just heard? . . . . . . . . . . . . . . . . . Using ActionScript to add cue points . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

viii 44ad2f5fdfad12a87511fc691c15a532

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

117 . . . . . . . . . . .

120 123 126 127 130 135 139 141 146 148 149

CONTENTS

Chapter 5: Creating Text Animations for Flash Closed captioning video . . . . . . . . . . . . . . . Playing with text . . . . . . . . . . . . . . . . . . . Lens flare . . . . . . . . . . . . . . . . . . . . . A photo gallery intro. . . . . . . . . . . . . . . . . Creating the FLV file . . . . . . . . . . . . . . . Creating an animated poem. . . . . . . . . . . . . Synching animation to sound in After Effects. Creating a gradient background . . . . . . . . “Toning down” a lens flare . . . . . . . . . . . Creating a sine wave animation . . . . . . . . Blinking and melting text . . . . . . . . . . . . Creating pulsing circles . . . . . . . . . . . . . Highlighting text . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . .

Chapter 6: Creating Special Effects .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

153

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

Doing the drop shadow dance . . . . . . . . . . . Applying a drop shadow in Flash . . . . . . . . Applying a filter and blend using ActionScript Getting creative with a drop shadow in Flash . Creating fire and smoke . . . . . . . . . . . . . . . Entering the inferno . . . . . . . . . . . . . . . Beware of the Blob. . . . . . . . . . . . . . . . . . Lights and flares . . . . . . . . . . . . . . . . . . . Assembling the project . . . . . . . . . . . . . Some final “jazz” . . . . . . . . . . . . . . . . . A halftime break . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . .

Chapter 7: Playing with Text .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Reviewing the After Effects and Flash text tools Exploding Flash text . . . . . . . . . . . . . . . . Exploding text in After Effects . . . . . . . . . . Ending a video with a bang . . . . . . . . . . Names just flapping in the wind . . . . . . . . . The infamous “exploding P” . . . . . . . . . Something’s fishy with Illustrator . . . . . . . . . Not all SWF files are created equally . . . . Mixing Flash and After Effects . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

154 158 161 165 171 172 174 176 177 178 182 184 186 187

191 . . . . . . . . . . . .

192 193 195 198 200 205 210 216 219 221 222 226

229 . . . . . . . . . .

230 232 234 237 238 241 248 258 262 271

ix

CONTENTS

Chapter 8: Meet the Parents .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Parenting 101 . . . . . . . . . . . . . . . . . . . Parenting 201 . . . . . . . . . . . . . . . . . . . The words on the rim go around and around . Rotating the word . . . . . . . . . . . . . . Rendering the video and using it in Flash . A “down-and-dirty” poster frame . . . . . Animating Photoshop layers: Can you dig it? . When null is more than nothing . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . .

Chapter 9: The Video Behind the Mask

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

Chapter 10: Track Mattes Are Your Friend

x

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

A basic After Effects mask . . . . . . . . . . . . . . . . . . A basic Flash mask . . . . . . . . . . . . . . . . . . . . . . Using text masks in After Effects . . . . . . . . . . . . . . Cropping an FLV video in the Flash 8 Video Encoder Creating a text mask in Flash . . . . . . . . . . . . . . . . Illustrator masks to Flash . . . . . . . . . . . . . . . . A gradient mask for a Flash video . . . . . . . . . . . . . “Getting fluid” in Piccadilly Circus . . . . . . . . . . . . . What about you?. . . . . . . . . . . . . . . . . . . . . Taking video for a spin. . . . . . . . . . . . . . . . . . . . Happy birthday, Flash . . . . . . . . . . . . . . . . . . . . Creating an exploding rune . . . . . . . . . . . . . . . Synchronizing Flash content to an FLV file . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . .

Track mattes 101 . . . . . . . . . . . . Lighting it up with a Luma Matte . . . Beam up the seal . . . . . . . . . . . . Who is that lady in the mirror? . . . . Reflections in Flash . . . . . . . . Deep under the sea, a blob is waiting Another spotlight effect. . . . . . Creating wavy text . . . . . . . . . Text with balls . . . . . . . . . . . Blinking text . . . . . . . . . . . . Bring in the blobs . . . . . . . . . Summary . . . . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

275 . . . . . . . . .

276 279 285 286 292 294 297 303 305

309 . . . . . . . . . . . . . .

310 312 316 323 325 326 327 330 336 338 341 345 349 351

. . . . . . . . . . . . . . . . . . . .

355

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

356 362 365 371 373 378 382 383 385 387 389 391

CONTENTS

Chapter 11: Adding a Third Dimension .

. . . . . . . . . . . . . . . . . . . . . .

Creating a 3D button animation for Flash . . . . . . . . . . . Rotoscoping a video . . . . . . . . . . . . . . . . . . . . . Viewing 3D layers . . . . . . . . . . . . . . . . . . . . . . . . We have our lights. How about a camera?. . . . . . . . . . . Video in a box . . . . . . . . . . . . . . . . . . . . . . . . . . Putting a camera in orbit . . . . . . . . . . . . . . . . . . Preparing for parenthood. . . . . . . . . . . . . . . . . . Finishing up . . . . . . . . . . . . . . . . . . . . . . . . . Live . . . from your computer . . . it’s the Fake TV Late Show! Playing with a camera . . . . . . . . . . . . . . . . . . . . Making the movie Flash Friendly . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

Chapter 12: Audio, the Red-Headed Kid in a Family of Blondes The basics of audio in After Effects. . . . . . . . . . Flash and audio. . . . . . . . . . . . . . . . . . . . . An audio controller . . . . . . . . . . . . . . . . A video sound controller . . . . . . . . . . . . . . . Sound visualization in After Effects. . . . . . . . . . Have you ever seen the northern lights, Jimmy? Building a boom box. . . . . . . . . . . . . . . . . . There is a new club in town . . . . . . . . . . . . . . Doing the audio “thing” . . . . . . . . . . . . . . Streaming audio and video in Flash . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . .

Index .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

395 . . . . . . . . . . . .

398 404 407 412 417 419 420 422 423 427 431 433

. . . .

437

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

438 441 442 446 449 453 455 457 459 461 462

465

xi

ABOUT THE AUTHORS Tom Green is currently professor of Interactive Media in the School of Media Studies at Humber College Institute of Technology & Advanced Learning in Toronto, Canada. He has written seven books on Macromedia technologies, and many articles for numerous magazines and websites, including the MX Developer’s Journal, Community MX, Digital Web Magazine, and Computer Arts. He has spoken at over 20 conferences internationally, including Adobe Max, NAB, FITC, MX North, Digital Design World, TODCON, and SparkEurope. You can contact Tom at [email protected].

Tiago Dias started to get into Flash around the time of Flash 3, after seeing his first Flash site. He started off by doing freelance work on the side from his day job as a network/systems engineer. On the motion graphics side of things, he got a lot of After Effects and Premiere experience at multimedia school in Zurich. From those humble beginnings, he now works as a video producer and Flash developer at a corporate television and news production company based in London with subsidiaries around the world—this is Tiago’s ideal job, as it combines two of his favorite technologies! In his free time, he writes tutorials on Flash and After Effects for various communities, tries to go snowboarding every time the sun is shining in the Swiss Alps, or hops on a plane to visit new countries. He currently lives and works in Zurich, Switzerland.

ABOUT THE TECHNICAL REVIEWER Charles E. Brown is one of the most noted authors and teachers in the computer industry today. His first two books, Beginner Dreamweaver MX and Fireworks MX Zero to Hero, have received critical acclaim. He has also been a Fireworks MX contributor for the MX Developer’s Journal. In addition to his busy writing schedule, he has conducted frequent seminars for the PC Learning Center (www.pclearningcenter.com) on such topics as Java programming, the Macromedia Studio MX environment, and the Microsoft Office environment. Charles is also a noted classical organist, pianist, and guitarist, and studied with such notables as Vladimir Horowitz, Virgil Fox, and Igor Stravinsky. It was because of his association with Stravinsky that he got to meet, and develop a friendship with, famed artist Pablo Picasso. Charles can be contacted through his website at www.charlesebrown.net.

ACKNOWLEDGMENTS The Internet is an odd place. People can meet and develop close working relationships with others they have never met in person. This is exactly how I wound up with my coauthor Tiago Dias. As is so typical of the Internet, Tiago and I live at opposite sides of the planet, and yet we have worked so well together on this book you would think we share an office. Not bad for two guys who have never met. There isn’t one project in this book where I explained my idea to Tiago and he didn’t bring it to life in a way that went far beyond what I considered possible. It looks like he and I are in this for the long haul, and I couldn’t be happier. I would also be remiss in not acknowledging a couple of people from the Adobe crew who helped make this book possible by answering questions and generally steering us in the right direction. First up is Steve Kilisky, the After Effects product manager who essentially told me I was crazy if I didn’t do the book when I first blew the idea by him at Adobe Max in 2005. The other individual is Scott Fegette, community manager at Adobe, who never failed to answer a question or tell me if I was way off base when I breezed an idea by him. Thanks guys. I would also like to thank Shawn Pucknell, who gave me several opportunities to stand up in front of my peers at the Toronto Flash User Group, FlashinTO, which he founded, in order to demonstrate much of what Tiago and I were discovering as we wrote this book. I would also like to thank him for taking a risk and inviting me to the “belly of the beast”—Los Angeles— to do a session on After Effects for Flash designers at FITC Hollywood. It proved that Tiago and I were on the right track. Naturally, my editor at friends of ED, Chris Mills, has had a major positive influence on this book. It took him less than a week to approve the concept when I first approached him with my idea, and he has been riding herd on this merry band of explorers ever since. Along the way, Chris and I have developed a solid professional relationship, but most important of all, we have become good friends. Finally, the task of writing these things means I hole myself up in my office, and become moody and generally difficult to live with as I mull over what to do next or how to explain a technique. It takes a very unique individual to put up with it, let alone understand why, and my wife, life partner, and best friend for over 30 years, Keltie, somehow puts up with it. Tom Green

ACKNOWLEDGMENTS When Tom contacted me a few months ago asking me to coauthor his newest book, I just had one thing to say to him, and that was a clear “Yes, Tom.” So Tom, a big thank you for giving me the opportunity to be part of it—it was a lot of fun working with you . . . even though both of us live on opposite sides of the planet! I would like to thank Claudio Cappellari from Toscano Records in Zurich, who created three awesome custom-made soundtracks for this book. It was quite an experience working together with a musician to create a custom track, which matched my imagination and fulfilled my wishes. I would like to thank Chris Mills at friends of ED and David and Andy for being good buddies and always giving me great feedback on all of the projects I created for the book. Finally, a big thanks has to go to my family and my girlfriend who accepted my regular “no time” moods. Thanks guys! Tiago Dias

xvi

INTRODUCTION The concept for this book, like most book ideas I develop, was more accidental than deliberate. I was approaching the last chapter of my previous book for friends of ED—Foundation Flash 8 Video—and was getting nervous. The plan for the chapter was to explore preparing and deploying Flash video for mobile devices. What was making me nervous was the Flash Lite 2 Player was still in beta and Macromedia, now Adobe, wasn’t giving us any sort of idea of when it would be ready for the market. In the midst of this “nervousness,” my doorbell rang. It was the man from UPS, and he was delivering a copy of the Adobe Creative Suite Production Studio Premium. What immediately caught my attention was that Flash Professional 8 was included with the bundle. It made sense because the ability to create and work with Flash video was a major feature of the application. Then the idea hit me: kill the mobile chapter, and instead do a few exercises that demonstrated how Adobe After Effects content can be used in Flash movies. I will admit I played it safe with that chapter, but the ability to include some of the After Effects in Flash content started rattling around my subconscious. I found the whole concept extremely intriguing and, without the pressure of a book deadline, took a few weeks to explore what I could do. I also took some time to see what others in the Flash community were up to, and, as it turns out, After Effects was not on most of the Flash community’s radar. Most of the people I talked to were intrigued with the stuff they could do with code or were simply trying to get a Flash video to properly stream. I then started talking to the guys at Adobe, and, as it turns out, they were also intrigued with the potential of how Flash and After Effects could play with each other and what they could do to bring the two applications closer to each other. I was told, “Let us know what you find out.” The next step in the process was to start nosing around the After Effects community. They too found the concept intriguing, but either tended to view Flash as nothing more than another output format or simply didn’t have the time to “learn another goddamn application.” What I learned from all of this is that both the “Flashies” and the After Effects guys were intrigued with the concept, but there was really nothing out there to get them started or interested. The entire field was wide open and unexplored. This explains why this book uses a “dragon hunt” as its theme. This also explains the opening paragraphs of Chapter 1:

INTRODUCTION “We are going to start our journey through After Effects and Flash by launching a search for dragons. There is a historical myth that assumes English mapmakers in the 1500s, not knowing what lay in the Arctic, would add the legend ‘Here be dragons’ to their maps. We say ‘myth’ because the only known reference to that phrase is on the Lenox Globe, which can be found in the New York Public Library. Still, the phrase has stuck and makes for a rather great jumping-off point for our exploration of the unknown. “In many respects, the workflow and relationship of Flash and After Effects is uncharted and out there in ‘Dragon Country.’” The purpose of this book, therefore, is not to be the definitive work of its kind when it comes to the relationship between After Effects and Flash Professional 8. It is too early for that one. The purpose of this book is to show you some of the things Tiago and I have discovered as we journeyed through Dragon Country and to encourage you to undertake your own dragon hunt. If you do, you will discover what Tiago and I did: that this is fun stuff.

Book structure and flow The book starts by introducing you to using After Effects to create a project destined for Flash in Chapter 1. Chapter 2 walks you through what you need to know to move an After Effects project through the Flash Video Encoder and to play the video in Flash using the FLVPlayback component, and shows you how to build a custom video player. By the end of these two chapters, you will have discovered the workflow between these two applications is more efficient and simple than you may have first thought. Once you understand the workflow, we walk you through some examples to show you how text-based motion graphics effects (Chapter 3) in many cases can be more easily done in After Effects than in Flash. We show you how to import the animations into Flash and manipulate them in Flash movie clips, and we even show you how to create a banner ad for playback through Flash. Chapter 4 shows you the ability of After Effects to create alpha channel video. Once you understand that, we then show you how to have the video interact with Flash content on the stage through the use of ActionScript. The chapter also answers a very common question: “How do they create those iPod ads?” With alpha channel video out of the way, we then dig deeper into working with text and show you how to use Flash cue points and XML to provide closed-caption video; and then we really start to roll by blurring text in Flash and After Effects, adding lens flares in After Effects, having text on the Flash stage interact with a lens flare created in After Effects, and showing how you can work with Illustrator CS 2, Flash, and After Effects to create a rather fascinating text mask. Chapter 5 concludes with the production of an animated poem that uses audio and a variety of text effects to create an amazing motion graphics project. The midpoint of the book, Chapter 6, is where we explore a variety of special effects you can create, from drop shadows to explosions, and how to mix and match them in After Effects and Flash. This is also the point where we challenge you to stop looking at video as video and instead regard it as “content.” To do this we involve you in a Flash/After Effects

xviii

INTRODUCTION challenge by asking a simple question: “What is Flash content and what is After Effects on the Flash stage?” This is an important question because the answer has rather interesting implications for the future of Flash video. The balance of the book stays with that question and shows you how to create stunning visual effects that use content from a variety of sources, such as exploding text, letters shaped like fish swishing their tails, and text created in After Effects interacting with text created in Flash. We also look at the use of 3D in After Effects for your Flash projects, the use of parenting relationships in After Effects to create complex animations that can be used in Flash, audio visualization, Flash content interacting with blobs of goo, and bending video around geometric shapes in Piccadilly Circus. All of these projects are designed not to show off but to get you to understand that After Effects and Flash together form a content creation powerhouse and, more importantly, how they can combine to expand your creative horizons and skill set. As I am writing this, I am in a hotel room 15 floors above the Las Vegas Strip preparing to do a couple of sessions at Adobe Max designed to get the Flash and After Effects user communities to join me on the same dragon hunt to which you have been invited. It should be fun, but that isn’t what has me “cranked.” I can hardly wait until this time next year and the year after to see what Adobe, you, and your fellow explorers have discovered. That is the real payoff. Tom Green

Layout conventions To keep this book as clear and easy to follow as possible, the following text conventions are used throughout: Important words or concepts are normally highlighted on the first appearance in bold type. Code is presented in fixed-width font. New or changed code is normally presented in bold fixed-width font. Menu commands are written in the form Menu ➤ Submenu ➤ Submenu. Where we want to draw your attention to something, we’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, we use an arrow like this: ➥. This is a very, very long section of code that should be written all ➥ on the same line without a break.

xix

1 FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS We are going to start our journey through After Effects and Flash by launching a search for dragons. There is a historical myth that assumes English mapmakers in the 1500s, not knowing what lay in the Arctic, would add the legend “Here be dragons” to their maps. We say “myth” because the only known reference to that phrase is on the Lenox Globe, which can be found in the New York Public Library. Still, the phrase has stuck and makes for a rather great jumping-off point for our exploration of the unknown. In many respects, the workflow and relationship of Flash and After Effects is uncharted and out there in “Dragon Country.” Until the acquisition of Macromedia by Adobe in 2005, Flash and After Effects lived in separate worlds and solitudes. Adobe was quite succinct in their motivation behind the acquisition of Macromedia. When asked for the reasoning, those involved in the acquisition, both at Adobe and Macromedia, summed it up in one word: “Flash.” Though Flash 8 covers a lot of web ground, the most groundbreaking aspect of Flash 8 was the inclusion of a number of serious video tools designed for the creation and deployment of video on the Web. Within hours of the completion of the Adobe/Macromedia deal, Adobe released updated versions of its media creation and editing tools, and among them was a new version of Adobe After Effects 7, which pushed the application into new territory. With Flash Professional 8 and After Effects 7 under the same roof, we have been handed two tools that were absolutely made for each other and will inevitably also be drawn closer to each other over the next few years. Just to give you an idea of how these two applications integrate, consider the following: You can export an After Effects Composition directly into the Flash 8 Video Encoder. Alpha channel use in video is now available in Flash and After Effects and contains a range of “industrial-strength” keying tools. Vector animations, created in After Effects, can be directly imported into Flash movie clips and manipulated in Flash. Motion graphics created in After Effects can be easily and seamlessly incorporated into Flash movies, thanks to the FLVPlayback component. After Effects offers the Flash designer access to a full complement of powerful filters and graphic effects, including 3D, that are simply unavailable in Flash Professional 8. The neat thing about these points is they just scratch the surface of what you can do with these tools. In many respects, these five points are the land masses on those early English maps, and the time has arrived to see whether there really are dragons out there. Let’s go dragon hunting.

2

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

The After Effects workspace If you have used After Effects prior to this release, you are in for a rather pleasant surprise when you open After Effects. One of the more common complaints about the application, until this release, was the cluttered workspace. Palettes would sit on top of palettes, and many After Effects developers referred to this condition as paletosis. Now all of the palettes, which are now referred to as panels, as shown in Figure 1-1, dock with each other, and they can be moved around and collapsed to meet your unique needs.

1

Figure 1-1. The After Effects 7 workspace is a much tidier place these days.

We aren’t going to get into customizing the workspace, adding or subtracting panels, or a long discussion on what each panel does. We are assuming that you know the real basic stuff already, and are at the stage where you are itching to be creative! Many After Effects users will use a dual-monitor setup for their work. The main screen will be reserved for the Project and Composition panels while the timeline and other panels will be moved to the second monitor.

As you can see, each of the panels is now tabbed. This means you can bring the panel you need into focus by simply clicking a panel tab. You can also change the order of the panels

3

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS in the grouping by simply clicking the gripper—the dots beside the panel name—and dragging the selected panel to one side or the other. You can also create new panel groups— you want the Composition and Effects & Presets panels in the same place. Here’s how:

1. Click the gripper beside the Effects & Presets panel and drag the panel onto the Composition window.

When the panel is over the Composition window, you will see the window essentially divide into five pieces. Each of these pieces is a potential location for the Effects & Presets panel.

Each of the pieces is called a drop zone.

2. Drag the panel over the slice on the left side of the Composition window. When the slice darkens (see Figure 1-2), release the mouse, and the panel drops into position beside the Composition window (we will generally refer to this as the Comp window from now on).

Figure 1-2. The Effects & Presets panel is about to be dropped into a location to the left of the Comp window.

3. Drag the Effects & Presets panel back to its original position. If your workspace becomes a bit disorganized you can always return it to the After Effects 7 default condition by selecting Window ➤ Workspace ➤ Reset “Standard”. You will see a dialog box asking you whether you really want to do this. Click OK and the panels will change to the grouping you saw when you first installed After Effects 7. How do you know whether a panel is selected? It will have a solid yellow line surrounding it when you click it.

4

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

Creating an After Effects project The plan for this chapter’s project is to have you assemble a short video, about 30 seconds, that serves as an opener for a Flash movie devoted to this book. To get yourself going, you’ll need the Exercise folder within the Chapter 1 code download from the friendsofED site. The download will consist of a series of very short QuickTime movies and an MP3 file.

1

Obviously you are going to be involved in the “end game” of this process. The actual project followed a typical workflow that started with a storyboard. Once the storyboard was approved—a rather short process considering there are only two of us—the various bits and pieces for the project were created, tweaked, and then output as a series of QuickTime movies to be used in the assembly of this project. If you are familiar with After Effects, you are probably wondering, “Why the heck don’t you just create the whole thing using the features of After Effects in After Effects?” This is a valid question, but the purpose of this chapter is to get you used to working with the application and outputting a file for use in Flash Professional 8. Everything in this project is covered elsewhere, in one form or another, in this book. Let’s get busy and build a movie:

1. Launch After Effects 7. When the application finishes launching, you are essentially looking at an empty workspace. That empty workspace actually is the project.

2. Select File ➤ Save As and you will be prompted to give the file a name. Navigate to the Exercise folder, name the file Opener, and click the Save button. The file you will be saving has the extension of .aep. This format is used by After Effects to store the references to any footage you may be using as well as any effects and so on that you may be applying to a Composition. By saving the After Effects project (AEP) file to the same folder as the assets to be used, everything is in one location. This is especially handy in situations where one person uses the Mac version of After Effects and another uses the PC version and a project needs to be shared among the team. If everything is in the same folder, neither individual will be asked for missing files, volumes, or directories.

Creating a Composition Having created the project, the next step in the process is to create a new Composition. Here’s how:

1. Select Composition ➤ New Composition or press Ctrl+N (PC) or Cmd+N (Mac) to open the Composition Settings dialog box shown in Figure 1-3.

5

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 1-3. The Composition settings for this project determine the size of the stage, the media used for playback, and the length of the timeline.

2. In the Composition Settings dialog box, specify the following settings: Composition Name: Opener Preset: Web Video, 320✕240 Frame Rate: 15 Resolution: Full Duration: 0:00:26.00

Though there are a number of Composition presets that ship with After Effects, you only need to concern yourself with Web Video output. This will yield the stage size you need, which fits right into the traditional web video size ratio of 4:3. Pixel Aspect Ratio simply asks you what type of pixel to use and, again, because the medium used to view the video will be a computer screen, you will choose the square pixel of a computer screen.

You can also create a new Composition by clicking the New Comp button— it looks like a frame from a film—in the Project panel. The most common dimensions for video destined for Flash are 320✕240, 240✕180, and 120✕90.

3. Click OK to accept the settings and to close the Composition Settings dialog box. If you subsequently want to change one of these settings, select Composition ➤ Composition Settings to reopen the Composition Settings dialog box.

6

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 When you close the dialog box, you will see your Comp in the Project panel. Its icon looks like a frame from a piece of film. Now that the Comp has been created, you can concern yourself with bringing in the various assets you will need to assemble the video.

1 Here’s a neat little trick. Though you can change the Composition settings by selecting Composition ➤ Composition Settings, you can also do it without using a menu. If you right-click (PC) or Cmd-click (Mac) on the gray area in the Composition panel, a menu appears where you clicked. Select Composition Settings, and the Composition Settings dialog box will appear.

Importing media into a project Bringing videos, audio, images, and other files into an After Effects project is a rather uncomplicated process. Here’s how:

1. Select File ➤ Import ➤ Multiple Files. When the Import Multiple Files dialog box, Figure 1-4, opens, navigate to your Exercise folder.

Figure 1-4. You can import files into a Comp either singly or in groups.

7

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 2. Press the Shift key, and with the Shift key held down select the ae_shot_1.mov file and, at the bottom of the list, the file named lifted.mp3. Click Open and all of the selected files will appear in the Project panel.

3. Select the final file in the list, titles.mov, and click the Done button. The Import Multiple Files dialog box is a real productivity booster. You may have noticed the dialog box, unlike many other applications, remained open when you clicked the Open button. This avoids multiple trips to the Import Multiple Files dialog box and, best of all, by placing all of your assets—photos, line art, video, and audio, for example—in one place that can accessed in one central location.

You don’t have to use the menu to import multiple items into After Effects. Open the window where the items to be added to the project are located and drag and drop them into the Project panel.

If you are familiar with Flash, the Project panel is quite similar to the Flash Library. Like the Flash Library, the Project panel can also become a rather disorganized place. Let’s add a bit of organization to the Project panel before we continue creating the Comp.

4. Click the Folder icon at the bottom of the Project panel. A new folder will appear. Name the folder Video and deselect the folder. Drag all of the video files into this new folder.

5. With the Video folder deselected, create a new folder named Audio. Drag the MP3 file into this folder and deselect the folder.

6. Create a new folder named Solids. 7. Click the Layer button (it looks like a small paint brush) in the Project panel, and the folders will move, in alphabetical order, under the Comp (see Figure 1-5).

Figure 1-5. Bringing order to chaos in the Project panel

8

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

You may have noticed we kept asking you to deselect the folder before adding another to the Project panel. If a folder is selected, the new folder will be placed in the selected folder.

1

If you are a seasoned After Effects user, you may be questioning why we created a folder for solids. When a solid is created in After Effects, it will be placed in a Solids folder. If one isn’t in the Project panel when a solid is created, a Solids folder will be added.

Layers and timelines With the assets in place, we can now turn our attention to assembling the project. Remember, an After Effects movie, at its most elemental, is nothing more than a series of assets placed on top of each other and set to appear at different times in the video. This is the purpose of the timeline. Once an asset is moved from the Project panel to the timeline, it can be manipulated in what seems to be an infinite number of ways. You can get an item from the Project panel onto the timeline in two ways, as you’ll see by following these steps:

1. Select the titles.mov clip in the Video folder and drag it to the Comp window. When you release the mouse, the clip appears both in the Comp and on the timeline. What you may not have noticed is that the clip is not centered in the Comp window. It is placed wherever you drop it because the point of your mouse is regarded as being the location of the clip’s center point.

2. Select the titles.mov clip in the timeline and press the Delete key to remove it from the timeline.

3. Select the titles.mov clip in the Project panel and drag it onto the timeline. This time, when you release the mouse, the clip is centered in the Comp window.

4. Drag the Current Time Indicator, which we refer to as the playback head, on the timeline across the video, and you will be able to see a preview of the clip’s contents (as shown in Figure 1-6) as you drag it backward and forward across the clip. There are other ways to preview a clip. The first is to simply double-click the clip in the Project panel. This will open the QuickTime player. Staying with the Project panel, another method is to double-click the item’s Preview icon at the top of the Project panel. Another method, if the clip is in the Comp, is to click the Play button in the Time Controls panel. You can also turn layer items on or off. To turn off the visibility of a layer, click the Video switch—the eyeball on the left side of the layer strip—and the item on the layer will turn off in the Comp window. Click the icon again and the layer becomes visible. If you scrub across, or even preview, the clip, you will notice there is a rather large “hole” in the clip. It starts at about the 3-second mark and lasts about 5 seconds. Also, we are talking about Flash 8, and the artist seems to have forgotten this rather important fact. Let’s fix this error.

9

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 1-6. The clip on the timeline is also visible in the Composition panel.

Adding and manipulating timeline objects Objects on the timeline are not static. They can be manipulated using the timeline. This is because all objects on the timeline have properties such as size, duration, and opacity. Here’s how to change object properties:

1. Drag the playback head to the 0:00:02:00 mark on the timeline. This is the point where the word is fully formed with no movement. Clicking the time code in the upper-left corner of the timeline will open the Go To Time dialog box. Enter the time in the dialog box and click the OK button to go to that precise point in time.

2. Click the Text tool on the toolbar—if your tools aren’t visible, select Window ➤ Tools—click the Comp window once and enter the number 8.

As soon as you click the mouse, a new Text layer is created on the timeline and the name of the layer will be the text you enter. There are a couple of ways of looking at time in After Effects. Time as displayed in the timer located in the Comp window is hours:minutes:seconds:frames. If you expand the magnification of the timeline, you will notice that you are looking at time on a frameby-frame basis. Neither is the best way of using time, and you will discover as you become more competent with After Effects that both methods work equally as well.

3. Change to the Selection tool, click the number, and drag it to a point to the right of the word Flash. Release the mouse.

10

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 4. Select Window ➤ Character to open the Character panel (see Figure 1-7). With the Text tool, highlight the number by double-clicking it and specify these text properties in the Character panel:

1

Font: Verdana Style: Regular Size: 36 points Color: White

Figure 1-7. Use the Character panel to format text that is selected in the Comp window.

5. Close the Character panel by clicking the panel’s close button. If you look at the timeline, you will see a new layer has been added to it. The problem with this layer is its duration. It lasts for the duration of the entire movie. It needs to be trimmed so that the number appears at the 2-second mark on the timeline and disappears after being visible for only 1 second. Here’s how to fix that: You will notice that the layer strip, on the timeline, appears to be enclosed in curly brackets. The bracket on the left is the In point for the clip and the one on the right is its Out point (see Figure 1-8).

Figure 1-8. A layer’s duration is set by creating its In and Out points on the timeline.

11

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 1. At the bottom of the timeline panel is the zoom slider. Drag it to about the midpoint of the zoom indicator line.

2. Drag the new layer’s In marker to the location of the playback head on the timeline.

3. Drag the playback head to the right until the word Flash disappears. Drag it slightly to the left until it reappears.

4. Drag the layer’s Out marker to the location marked by the playback head. Moving the In and Out points of a clip is called trimming. If you prefer to “do it by the numbers,” you are in for a treat. Right-click (PC) or Cmdclick (Mac) on a column name, for example, Layer Name, in the timeline. This will open a context menu. Select Columns ➤ In and a column named In will be added to the timeline. The time shown in that column is the In point. Click and drag that number to the left or right, and the In point and the time shown in the column will also change.

5. Save the project. There is still a bit of work to be done because the original storyboard called for this number to appear at about 500% of its size and then shrink it down to its final size of 36 points. Here’s how:

1. Select the 8 layer and press the S key to open the layer’s Scale property on the timeline.

2. Drag the playback head to the start of the 8 layer sequence. 3. Click the stopwatch to the left of the Scale property. This adds a keyframe, as indicated by the diamond, at the position of the playback head.

4. Double-click a scale percentage value and enter 500. Press Return (Mac) or Enter (PC). The number will grow larger.

5. Drag the playback head to the end of the sequence and set the Scale value to 100%. The number will shrink and another keyframe will appear. If you scrub the playback head across this animation, you will see the number shrink to its final size as shown in Figure 1-9.

6. Drag the 8 layer under the layer below it. Now you know how to move layers from one position in the order to another position.

7. Save the project. The chain icon beside the word Scale, if selected, will scale an object equally on the horizontal and vertical axes. Deselect the chain icon and you can distort the scaling by entering different scale percentages for the horizontal and vertical values. You don’t have to manually enter the numbers used to scale a selected object; if you click and drag a value to the right, the Scale value increases, and if you drag to the left, the Scale value decreases.

12

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

1

Figure 1-9. Like in Flash, objects in After Effects can be scaled through the use of keyframes.

Applying a transfer mode If you are a Photoshop, Fireworks, or Flash user, you are quite familiar with the transfer modes, which are also referred to as the blend modes in Flash 8. Apply these effects to an object on a layer, and you wind up with some rather interesting color interactions with the content in the layer below it. The neat thing about these effects in After Effects is they aren’t static. Instead they apply to objects that move. In this section, you will apply a screen transfer to remove the solid black background of a video.

1. Select the fallingLetters.mov file in the Video folder and drag it to the timeline under the 8 layer you just created.

2. Drag the clip so its In point is directly under the Text layer’s Out point at 0:00:03:01. 3. Drag the fl_shot_1.mov clip under the fallingLetters layer onto the timeline. 4. Drag the playback head to 0:00:06:09 and drag the In point of the clip to the playback head. Drag the layer strip—it is called the duration bar—and align its In point with the In point of the clip, at about 0:00:03:01, above it on the timeline. If you scrub the playback head across these two clips, you really won’t see anything because the falling letters are on a black background that covers the clip below it.

5. Select the Falling Letters clip and, in the Mode area of the layer, click the word Normal. When the Transfer Modes pop-up menu appears, select Screen. If you scrub the timeline now, you will see the black has disappeared and the content in the video clip below it is now visible.

13

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS You will now notice that even though the In and Out points of the fl_shot_1.mov roughly match those of the Falling Letters clip, there is still a bit of the clip visible—a colored area—beyond those two points. This tells you that you need to shorten the clip.

6. Place the cursor at the end of the duration bar in Layer 4. The cursor will change to a double arrow. Click and drag the left edge of the colored area to the Out point of the clip, which is about the 8-second mark on the timeline.

7. Drag the playback head to the start of the movie and click the Play button in the Time Controls panel. Notice now how the white letters, shown in Figure 1-10, fall

from the top of the Comp to the bottom of the Comp, and they appear to be falling over a pinkish textured background. The Screen mode removed the black background.

Figure 1-10. Creative use of the Screen transfer mode makes your life easier.

8. Save the project.

Creating and using solid layers A solid layer, or solid, does exactly what the name says: it is a layer that contains a solid color shape. The really interesting thing about such layers is they can range in size from 1 pixel by 1 pixel up to 32,000 pixels square and can be any color you wish. You are now probably thinking, “That’s interesting, but what are they used for?” In many cases, they are used as a background for a new graphic or animation, and, because they are layers, they can be manipulated in the timeline just like any other content on a layer. In the case of this exercise, the solids will be used to act as a transition between scenes. The first part of the animation talks about Flash 8. This solid will give the viewer a visual clue that we are about to change the subject. The user will see a brief flash of white and new content will start to appear. Here’s how:

14

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 1. Select Layer ➤ New ➤ Solid to open the Solid Settings dialog box shown in Figure 1-11.

1

Figure 1-11. Use this dialog box to create solid color backgrounds for your projects.

2. Name the solid White Solid 2 and don’t change the dimensions. 3. Click the Color chip in the Color section and, when the Color Picker opens, select white as the color.

4. Click OK to close the dialog box. The solid is now added to the Project panel and to the timeline. Delete the solid from the timeline. We’ll put it back in a moment.

You may be looking at the Project panel and wondering where the solid went. Open the Solids folder. All solids are added to this folder if it exists, or After Effects will create one for you when you create your first solid.

5. Move the playback head across the timeline until the timer in the Comp window displays 0:00:09:08.

6. Drag the solid from the Solids folder to the bottom of the timeline. Set the solid’s In point to match that of the playback head.

7. Drag the playback head to the right until the timer in the Comp window displays 0:00:09:11. Set the solid’s Out point to this mark on the timeline.

8. Drag another copy of White Solid 2 to the bottom of the timeline and set its In point to 0:00:12:03 and its Out point to 0:00:12:08. You will now have a white solid that will act as a transition between the video in Layer 1—Titles.mov—and the next section of the video as shown in Figure 1-12.

9. Save the movie.

15

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 1-12. Solids perform a variety of use functions in After Effects.

Transforming and manipulating video clips The next section of this small video will show the user some of things that can be done using Flash and After Effects. The plan is to use four clips for this process. One clip will serve as the background for the demo (background.mov), and the remaining three clips (ae_shot_1.mov to ae_shot_3.mov) will show what the applications can do. The plan is to scale two of them (Clips 1 and 3) to 25% of their original size, and the third one will appear over the background clip at 50% of its original size. Finally, as each of the three clips finishes, it will fade out. In many respects this could be a rather complex and intimidating process. It isn’t if you follow the first rule of digital media creation: Let the software do the work. Here’s how:

1. Open the Video folder and drag ae_shot_2.mov to the bottom of the timeline. 2. Drag the playback head to the 0:00:12:08 mark and drag the video until its In point aligns with the playback head. Obviously this video is too large for our purposes. It is to sit in the middle of the screen and appear above three other videos. It will need to be reduced to 50% of its current size.

16

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

Before we do that, this is a good time for a short break to talk about the timeline and what a cluttered place it can be. If you twirl down a layer to expose its properties, you may notice that the list takes up quite a bit of screen real estate. If you have a complex project with, say, 25 layers, trying to twirl down each layer and adjust its properties while showing all of the other layers and their properties would require a monitor the size of a drive-in movie theater screen. This is why it is so important that you start learning how to show only the property required for the layer. In this example, the video will need to be scaled and its opacity adjusted. Each of the properties that affect an object on the timeline has a keyboard equivalent that will open only that property. We will be using this technique in this section and throughout the book.

1

3. Select the layer containing the new video clip and press the S key to open the Scale properties.

4. Double-click one of the Scale values and change it to 50. The video will reduce to 50% of its original dimensions while still remaining centered on the screen in the Comp window.

5. Press the T key to open the Opacity settings. 6. Drag the playback head to the 18-second mark and click the stopwatch beside the word Opacity to add a keyframe.

7. Drag the playback head to the Out point of the clip and change the Opacity value to 0% as shown in Figure 1-13. When you press the Return/Enter key, a new keyframe will be added at that point.

Figure 1-13. The clip will fade out between the two keyframes.

8. Drag the ae_shot_3.mov file to the bottom of the timeline and align its In point with the previous video’s In point.

9. Select the video and add the following properties: Position: 80,60 (press P on the keyboard) Scale: 50% Opacity: 100% at 0:00:18:11, 0% at the Out point

17

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 10. Drag the ae_shot_1.mov file to the bottom of the timeline and align its In point with the previous video’s In point. Set the Out point to 0:00:19:04.

11. Select the video and add the following properties: Position: 240,180 (press P on the keyboard) Scale: 50% Opacity: 100% at 0:00:18:11, 0% at the Out point

12. Save the file and click the Play button to preview your work so far. It should resemble Figure 1-14.

Figure 1-14. The videos are positioned, scaled, and their opacity set.

Animating text in After Effects One of the hallmarks of motion graphics is animated text. Though the effects you will create here can be done just as easily in Flash, the purpose here is to get you comfortable using the timeline. Later on in the book, Chapter 3 to be exact, you are going to discover how to create text effects that make these ones look like a bike with training wheels. Still, the ability to animate text and embed that animation into an After Effects project is a core skill when it comes to working with After Effects. The first thing you need to know is that all text goes on a Text layer and that you can edit the text directly in the Comp window and change the font, style, size, color, and other properties of the text. In many ways, a Text layer is no different from any other layer in After Effects. Content on these layers can be manipulated, have effects applied to them, and so on, much as you have done with video to this point in the chapter. Another really neat feature of a Text layer is that text can be copied from Photoshop, Illustrator, and Flash and pasted directly into it. This is because After Effects supports Unicode characters. Just to prove to you that it can be done, one of the authors copied and pasted the first paragraph of this section into an After Effects Text layer. The results are in Figure 1-15.

18

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

1

Figure 1-15. Text can be copied and pasted into After Effects from many other applications . . . including word processing programs.

Let’s start animating the title of this book!

1. Select the Text tool, click the Comp window once, and enter the text poetry. Drag this new Text layer to the bottom of the timeline. Select the new Text layer in the timeline, press the P key, and set the position to 160,120.

2. Select Window ➤ Character to open the Character panel. Use these settings to format the text: Font: Verdana Size: 30 px Style: Regular Color: 5C6FE6 (light blue)

To change the color of any selected text, click the Color chip in the Character panel and click the color you wish to add. If you know the RGB or hexadecimal color values, you can enter them, as shown in Figure 1-16, directly into the Color Picker.

19

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 1-16. Either click a color or enter the values directly into the Color Picker.

3. Set the In point for the text to match the Out point, 0:00:19:04, of the layer directly above the text. Also set the Out point for this layer to 0:00:25:14.

4. Move the playback head to the start of the Text layer and press the S key to open the layer’s Scale properties. Change the Scale value to 315%.

5. Use the following values to scale the text four more times:

20

Time

Scale Value

0:00:21:14

100%

0:00:22:21

100%

0:00:23:12

350%

0:00:24:03

100%

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7

You may be wondering why there are two keyframes with a Scale value of 100%. If we didn’t add that second keyframe, the text would scale from 100% to 350% between the keyframes. The intention is to have the text scale up to 350% in less than a second, meaning there has to be that second keyframe.

1

6. If you scrub the playback head across the layer, you will see the text grow and shrink. It will also need to fade out as well. Press the T key to open the Opacity properties. Add the following keyframes and Opacity values: Time

Opacity Value

0:00:21:13

100%

0:00:21:24

0%

0:00:22:21

0%

0:00:24:03

90%

0:00:24:14

0%

0:00:25:14

0%

The remaining three text layers will follow the lead of the Poetry layer. The text will grow and shrink and fade in and fade out as the playback head moves across the timeline.

7. Select the Text tool and enter the text in. Drag this in layer under the Poetry layer. Set the In point for this layer to 0:00:21:14 and the Out point to 0:00:25:14. Press the P key and set the position to 160,120.

8. Apply the following Scale values to this layer: Time

Scale Value

0:00:21:14

350%

0:00:22:10

100%

0:00:23:14

100%

0:00:24:07

350%

0:00:24:14

115%

21

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 9. Press the T key to open the Opacity properties. Add the following keyframes and Opacity values:

Time

Opacity Value

0:00:21:14

100%

0:00:22:14

0%

0:00:23:14

3%

0:00:24:14

90%

0:00:25:08

0%

0:00:25:14

0%

10. Select the Text tool and enter the text motion. Set the In point for this layer to 0:00:22:08 and the Out point to 0:00:25:14. Press the P key and set the position to 160,120.

11. Apply the following Scale values to this layer:

22

Time

Scale Value

0:00:22:08

350%

0:00:22:14

100%

0:00:24:07

115%

0:00:24:14

315%

0:00:25:14

100%

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 12. Press the T key to open the Opacity properties. Add the following keyframes and Opacity values:

Time

Opacity Value

0:00:22:14

100%

0:00:23:10

0%

0:00:24:07

3%

0:00:25:00

100%

0:00:25:14

0%

1

13. Save the file. Your text should be scaled and faded as in Figure 1-17.

Figure 1-17. The text is scaled and faded using the timeline.

14. Drag the playback head to the 21-second mark of the timeline and drag the clouds_w_lines.mov file to the bottom of the timeline. Set its In point to the 21-second mark as well.

15. Save the file and click the Play button in the Time Controls panel to preview the movie. There is one last bit of housekeeping to do before we lay in the soundtrack. There needs to be a bit of a transition out of the videos that play just before the text appears.

16. Drag the background.mov file from the Video folder to the bottom of the timeline. Set the In point of this clip to 0:00:19:04 and the Out point to 0:00:21:00. Open the Opacity properties for this clip and change the Opacity to 100% at 0:00:20:00 and to 0% at 0:00:21:00.

23

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Adding audio to your project As you have seen earlier in this chapter, you can import audio directly into your project. The audio file formats that can be imported are as follows: Advanced Audio Coding (AAC) AU Audio Interchange File Format (AIFF) MP3 Video for Windows (AVI or WAV) WAVE (WAV) If your projects are inevitably destined for playback in Flash, you may as well stick with the MP3 format, because all audio in Flash is converted to this format when your Flash movie plays.

1. Open the Audio folder in the Project panel and drag the Lifted.mp3 file to the bottom of the timeline.

2. The audio file will run the length of the movie. If you want to preview the file, select Composition ➤ Preview ➤ Audio Preview (Work Area) and the audio will play. If you want to preview the video, with the audio track, click the RAM Preview button in the Time Controls panel. The entire movie will be moved to RAM and will play back. Just be aware that a RAM preview plays a bit slower than a regular QuickTime video.

Rendering the project: the end game With all of the assets in place, the time has arrived to create the video that will be used in Flash. The process is not terribly difficult to understand and, in many respects, is easier to do for Flash than were the video to be prepared for broadcast or other medium. The reason is the video you will output does not really need to be compressed. To the average video developer, that last statement is rather heretical, but it is true. When you convert this video from a QuickTime movie to the FLV format used by Flash, you will be compressing the video using what is called a lossy codec. That means one of the reasons these video files are relatively small is because information is lost during the compression. When you convert the video to Flash’s FLV file format, you will be applying yet another lossy compressor to the file. This means a lot more information is lost, and, to be gentle, there is the inevitable degradation of video quality. In this final section of this chapter, you will be creating the QuickTime video that will be converted to an FLV file in the next chapter. Let’s get busy.

24

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 1. Select Composition ➤ Add to Render Queue. This will place the entire Comp you have created into the Render Queue and will launch the Render Queue panel shown in Figure 1-18.

1

Figure 1-18. The Render Queue panel is where projects are transformed into videos.

The panel is divided into two areas. The top of the panel is where the Composition is rendered. This sort of explains the Render button. The bottom of the panel is where you will actually decide which settings will be used before you click the Render button. If you have rendered several movies, they will be listed in the bottom half of the panel. To remove a previous render job, select the name and press the Delete key.

2. The next step in the process is to click the Best Settings link. This will open the Render Settings dialog box shown in Figure 1-19.

Figure 1-19. The Render Settings dialog box determines how the video will be created.

25

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 3. The dialog box shows the default values that will be applied when the video is created. For our needs we really don’t need to change anything here. Click the OK button.

Though we are ignoring the settings in the Render Settings dialog box, one of the more important areas is the Field Render pull-down in the Time Sampling area. If you are creating footage for broadcast, the odds are really good the footage needs to be interlaced. This means alternate lines of the video are displayed. In the digital universe this can play havoc with a video. This setting should always be set to Off when preparing video for computer output.

4. Click the Lossless link in the Output Module area. The Output Module Settings dialog box that opens is the key to the project (see Figure 1-20). It is in this dialog box that you determine the how the video will be formatted.

Figure 1-20. The Output Module Settings dialog box is where the video to be rendered receives its formatting instructions.

26

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 5. Click the Format pull-down menu in the Based on “Lossless” area at the top and select QuickTime Movie from the various choices available.

6. Select None in the Embed pull-down. This option allows you to embed the project

1

into the final video file. All this serves to do is to add to the final file size and is not needed.

If you don’t have QuickTime 7 installed on your PC, you can select Video for Windows or Windows Media from the Format pull-down. Both formats can be used by Flash.

7. The next section is the Video Output area. This is where you will choose how the project will be compressed by selecting the appropriate codec. Click the Format Options button. The goal of compression is to reduce the data rate—how much data flows into the video player—while maintaining image quality. Video destined for the Web might need to be compressed at a ratio of 50:1, 60:1, or higher. Lossless compression, where no essential data is lost, can compress by no more than 30:1. Thankfully we deal with humans, and human perception is not only based upon what we actually see and hear but also on what we think we see and hear. This means video can use lossy compression and still have acceptable quality. Though you can apply increasing amounts of lossy compression, the higher the value, the greater the sacrifice in quality. The easiest way to reduce the file size of a video is to reduce its physical dimensions and/or its frame rate. For example, reduce the frame rate of a 30-frame-per-second video to 15 fps, and the data is reduced by 50%. Even so, there is still a huge issue to face. Reducing the physical size of the video, and its frame rate still does not reduce the bit-rate flow of the video. Digital video uses compression to control the flow, and there are two types of compression: temporal and spatial. Temporal compression, sometimes known as interframe compression, sets aside just enough memory for one frame. When the video moves from the first frame to the second frame, all that happens is that the compressor looks at the first frame and simply paints over the things that changed. By recording the changes between frames, rather than the frames themselves, you don’t need a lot of extra data to be processed. Unfortunately, when there is a big change—a pan or a zoom—the process starts all over. Spatial compression, or intraframe compression, is totally different. It looks at the frames in the video as being nothing more than a bunch of pixels with pretty colors. Sometimes referred to as run-length encoding, this method records consecutive runs of color and can achieve significant data stream reductions in areas where nothing changes. This system really falls apart when things change. These two concepts are where your video headaches really start because they are at the core of the most common compression schemes used. The issues you will confront around working with video involve not only whether the compression is temporal or spatial, but whether the compression is lossy or lossless.

27

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Lossless compression is good, and you should use it if you are going to be subsequently compressing the movie for web playback. The file will reduce—usually between 10% and 50%—but the files are still huge. If you are targeting a video for compression in the Flash Video Encoder, lossless compression is the way to go. When you compress an already compressed movie—a video that uses Cinepac or Sorenson compression is compressed in the Flash Video Encoder as well—there will be a definite loss of image quality. As you may have guessed, lossy compression loses information . . . forever. Even so, the file-size reductions can be significant. In certain instances, these reductions can be in the order of 100:1, as is the case with Sorenson Squeeze. The amount of the compression is under your control, but understand, lossy compression introduces artifacts to your image. As the file size starts decreasing, the severity of the artifacts increases. They usually first appear as blotches in areas of fine shading. At high compression, prepare to lose fine details and encounter a nasty sharpening effect called ringing.

8. When the Compression Settings dialog box opens, select Video from the multitude of codecs from the Compression Type pull-down (see Figure 1-21), drag the slider to the Best setting, and click OK to close the dialog box. The Video codec is a lossless codec and is ideal for our needs.

Figure 1-21. The Video codec is a lossless codec.

Compression and decompression are accomplished by a set of mathematical calculations called a codec, which is short for COmpressor/DECompressor or enCODer/DECoder. Codecs compress data as it is encoded and decompress it for playback. In order for a

28

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 video to be played, it must be decompressed by the same codec used to compress the video. This explains why, in certain instances, you are asked by your computer to find the codec for a video you may want to watch.

1

9. Click the Audio Output check box and select Mono from the Stereo pull-down. If you do not click the Audio Output check box shown in Figure 1-22, the audio track will be ignored when the video is created.

Figure 1-22. If you don’t select the Audio Output check box, the audio track won’t be added to the video.

Remember, video is always composed of two tracks—an audio track and a video track. In fact, when you create a video, the audio is compressed using a separate codec from that used by the video compressor. The choice of mono really is a serious one. The average person with a sound system connected to their computer really won’t get the benefit of true stereo simply because the boxes enclosing the speakers are most likely more expensive than the speakers themselves. As well, simply reducing the sound from stereo to audio has the effect of cutting the size of the sound file by 50%.

10. Click OK to return to the Render Queue. Click the Output To link to open the Save As dialog box. Navigate to the folder where you will be saving the final video and click OK. You will be returned to the Render Queue.

11. Click the Render button. Clicking the Render button starts the video creation process. You will see a progress bar, shown in Figure 1-23, move across the window, and you will also see each frame of the video being rendered appear in the Comp window. When the process finishes, a chime will play.

Figure 1-23. The video is being created.

If you want to remove a Comp from the Render Queue, select it in the Render Queue panel and press the Delete key.

29

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 12. Save the file. This will create an AEP file that retains all of the project settings. This is an extremely valuable file in situations where changes need to be made to the video.

13. Quit After Effects 7. 14. Locate the QuickTime file you have just created and open it in QuickTime (see Figure 1-24).

Figure 1-24. The project playing in the QuickTime player.

Summary This chapter has lived up to its title—“From Concept to Final Product in After Effects 7.” It also started us on our dragon hunt. You started off the chapter by learning how to create a project and a new Composition in After Effects. In many respects, once you learn how to create a new Composition in After Effects, you will repeat these steps innumerable times as you create motion graphics for use in Flash 8. The key aspect of the Composition is ensuring you maintain the 4:3 aspect ratio of the video’s dimensions and that you use square pixels. They are important when the video is used in Flash. You were also shown how to add content to the timeline, how to trim content to specific durations on the timeline, and how to move clips and layers around in the timeline. We also showed you how manipulate the content by adding keyframes to a layer and scaling or changing the opacity of a clip between those keyframes. In many respects, you have discovered there is very little difference between a keyframe in After Effects and its Flash counterpart.

30

FROM CONCEPT TO FINAL PRODUCT IN AFTER EFFECTS 7 We also showed you how to add and format text, how to create a new solid, and how to add audio to the project. The chapter finished by using the Render Queue to output the final QuickTime movie.

1

In the next chapter, we continue our dragon hunt by converting the video you have created to an FLV file, and you will learn how to play the video through the new FLVPlayback component. We are also going to show you how to create your own custom player in Flash that does everything the FLVPlayback component does but in a space that is rather small. See you there.

31

2 FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS In the previous chapter, you created a video using After Effects. In this chapter, you prepare the video for playback in Flash Professional 8 and upload it to your website. The phrase “prepare the video for playback in Flash Professional 8” is what has really gotten the attention of web developers and their clients. Ever since the late 2005 introduction of Flash Professional 8, it seems like video has exploded across the Web. One of the reasons, as you will soon discover, is that Adobe pulled off the impossible: they made web video more feature-rich but easier to create and deploy than ever before. Almost overnight, it seemed, web video moved from being seen as an interesting feature to a must-have element in websites. In this chapter, we are going to do the following: Convert a QuickTime video to Flash Video (FLV) format. Use the Flash components to play the video. Create your own custom video player for Flash.

A brief word on streaming Before you convert the video created in the previous chapter to the Flash Video format, you must understand the following: Flash Video streams into the Flash Player from your web server. The decisions you make before you create the video will directly impact whether the viewer has a positive or a negative experience with the video. The key word is stream, which is a fancy word that describes the flow of information from the server to the SWF in the web page. The best way of envisioning a stream is to regard it as being like a river that connects a lake in a mountain to a lake in a valley. The water flows smoothly from the lake in the mountain, down the river, and into the lake in the valley. The water in the river moves at a constant speed, and the water rarely overruns the banks of the river, flooding the town that straddles the river. Let’s assume that a rather large rainstorm occurred over the lake in the mountain and a foot of rain falls into the lake. That amount of water will rush out of the lake, down the river, flood the town, and eventually run into the lake in the valley, causing it to overrun its banks. It is no different with Flash Video. When it comes to streaming, the river is the connection, or pipe, between the server and the Flash Player. The width of the connection, bandwidth, determines how much information can flow into the Flash Player, and how fast the river flows is the data rate. If too much information flows down the pipe, it will clog the Flash Player, and the user will experience inordinate wait times; video that plays, stops, replays; or even video that is jerky. It is the prudent Flash designer who has not only a design strategy in place but also a bandwidth strategy as well. In very basic terms, streaming is the distribution of real-time or live audio or video through the Internet.

34

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 For the purposes of this discussion, there are three primary characteristics that define streaming media: It enables real-time or on-demand access to audio/video content through the Internet. That means the audio or the video plays immediately—there is no delay. The ability to provide on-demand content can’t be understated. Any video you produce can be accessed at any time from anywhere.

2

It is transmitted by a media server application (for example, a Flash Media Server or Real Media Server) and is played back and processed by a client player application (in this case Flash Player 8 or RealPlayer) as it is received. In basic terms, the video is transferred to a web page using a server application such as a web server or a Flash Media Server and is displayed in a browser using a client application such as Flash Player 8. The rate the data is fed into the client by the server is, in general terms, the stream. This stream of data into a Flash Player is the key issue surrounding the successful delivery and playback of a video. If too much information is moving into the client, it can’t keep up. When this happens, the information is buffered. A buffer is nothing more than a place where enough data is stored to start playing the video and to play it successfully through to completion. Videos that take an inordinate amount of time to load and play or that start and stop are symptomatic of a developer who didn’t pay attention to the stream of data from the server to the client. Though a hallmark of web media technologies is that a file has to download before it starts to play, Flash moves in a different direction. It uses a progressive download, which starts the video playing before the download completes. Streamed files are received, processed, and played when they arrive, and no residual copy of the video is left behind. This is true of files that are streamed to Flash Player 8 through a Flash Media Server. FLV files arriving via your regular web server will wind up in the browser cache. Obviously, if security of the files is paramount, the Flash Media Server is a logical solution.

The importance of data rate One of the fundamental maxims of working with digital video is this: Data rate controls quality. Bandwidth controls the user experience. Regardless of which computer platform is used, the pipe is your prime consideration, and when it comes to creating and playing Flash video, always keep an eye on the pipe. The pipe can make or break the user’s experience. If he or she has a lot of bandwidth, such as a T1 line in a corporation or high-speed Internet at home, that user can view full-length movies with little or no disruption. If the user is in a remote or rural situation, the odds are very good he or she has a dial-up modem, meaning his or her bandwidth is limited.

35

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS To wrap your mind around the differences, think of a highway tunnel that goes under a lake. If the tunnel is part of a four-lane highway, thousands of cars simply approach the tunnel and zip through it at the posted speed. This is because the tunnel’s entrance is the same width as the highway. Now abruptly reduce the diameter of the tunnel from four lanes to one lane each way. Now thousands of cars have to squeeze into one lane of traffic and reduce their speed to a crawl as they approach the tunnel’s entrance and proceed into the tunnel; we have all experienced how infuriating such a delay can be. The cars in this example represent data, and how fast they move represents the data rate. Think of a T1 line as being the tunnel for the four-lane expressway and the single-lane tunnel as dial-up service, the highway is the server, and the user is the poor guy behind the steering wheel in the car. It goes without saying that when you plan to deliver video, you need to have a solid bandwidth strategy in place for the user, the server, and the video. The server bandwidth strategy must take into account the maximum number of users that can access the video at any one time. The last thing you need is for your user to get into the middle of a traffic jam waiting to download and view the video. When it comes to the user, you need to be aware of the width of the tunnel up ahead. You need to leave enough room for the data stream but also other Internet activities. Not doing this is quite similar to having a transport truck sitting at the side of the road and jutting out into traffic. Things will stop or seriously slow down as the cars reduce their speed to avoid driving into the back of the truck. In a dial-up situation, a user with a 56.6K connection can drive along the highway at 56.6 kilobits per second (Kbps). When it comes to video, a target data rate of 40 Kbps, which leaves room for other activities, is normal. So what is data rate? Data rate is simply the amount of data (cars on a highway in our analogy) transferred per second to the user’s computer. This in turn determines the bandwidth required to play the video. The data rate calculation is Data rate = (w ✕ h ✕ color depth ✕ frames per second)/compression Let’s do the data rate calculation for the video created in the previous chapter. The video’s values are Width: 320 Height: 240 Color depth: 24 Frames per second: 15 Compression: 60 (The benchmark compression ratio for both ON2 Flix and Sorenson Squeeze is 60:1.) Data rate = (320 ✕ 240 ✕ 24 ✕ 15)/60 Data rate = (27,648,000)/60 Data rate = 460,800

36

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 The data rate for the video at 15 frames per second (fps) is 460,800 bits per second (bps), or 461 Kbps. The second line of the calculation is there for a deliberate reason. If you were to apply no compression to the video, you would use a data rate of about 27.6 million bps. To deliver that video, you would need an Internet connection the size of the tunnel between Britain and France. Toss in the compression, and the video can safely be delivered to most users.

2

If you are creating video for Internet delivery, use these common data rates for delivery of the FLV file to the Flash Player:

Connection type

Data rate

Dial-up

60 Kbps

DSL

Between 150 and 300 Kbps

Cable

Between 200 and 300 Kbps

T1 or T3 line

150 to 430 Kbps

The Flash Player supports a maximum data rate of 4 megabits per second (Mbps).

One final consideration in regard to data rate is that the number shown in the compression applications is a bit disingenuous. If you use the FLV Encoder and use the Medium default setting, you set the data rate of a video to 400 Kbps. This is not the final data rate. Remember, video is composed of both an audio track and a video track. The number you set affects just the video track. If you look at the data rate for the audio track, it was set to 96 Kbps. This means the data rate for the video is 496 Kbps.

Keyframes and streaming Other factors that could impact the user experience are frame rate and keyframe placement. Frame rate is the speed at which a video plays. One of the more common frame rates for digital video is 29 or 30 fps, which matches the North American video standard of 29.97 fps. Another common frame rate is 24 fps. Regardless of which one you have been handed, there will be occasions when you may wish to reduce the rate such as in lowbandwidth situations. If you want to lower the frame rate, you should use equal divisions of the source frame rate. For 30 fps, use 15 fps, 10 fps, 7.5 fps, and so on. For 24 fps, use 12 fps, 8 fps, 6 fps, and so on.

37

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Be careful when you consider playing with the frame rate. Your FLV frame rate should be as close to the Flash frame rate as possible. The reason is the audio track in the video—it always plays back at the original frame rate. Let’s assume you create an FLV file that uses 24 fps. Place that in a Flash movie that plays back at 12 fps. The video portion will play at 12 fps, but the audio will zip along at 24 fps . . . a nasty scenario to say the least. Keyframes in video, in many respects, are similar to keyframes in Flash. In video, a keyframe contains all of the data in that frame—where they part company is in what happens between the keyframes. In video, the frames between the keyframes are called difference frames, also referred to as delta frames by techie types. Difference frames remove the stuff that doesn’t move or change from each frame between the keyframes. This means the file size is reduced. Now let’s be very careful because a bad decision here can ruin your work. If you were to stand at the side of a major city intersection and shoot cars and people walking by, there is going to be a lot of change and very few difference frames. Now say you were to take your camera into a farmer’s field and shoot some footage of a tree. There wouldn’t be a lot of change, meaning there could be a lot of difference frames. This explains why a 30-second video of a Formula One race is a lot larger in file size than that of a 30-second video of a tree in a field. Fewer difference frames means larger file size. The problem is, if you spread out the keyframes in the Formula One video, the figure quality degrades and looks blurry. We wish we could say to you there is a hard-and-fast rule about keyframe frequency, but there isn’t. Before you encode the video, watch the video and see whether there is a lot of movement both in the video and with the camera. This will determine the keyframe frequency. By spreading out the keyframes, you can have quite a positive impact upon the final size of the FLV file. What you don’t want to do is to think all video is created equally. If there is a lot of motion—a Formula One race—you will need more keyframes. If you have a “talking head” video—a tree in a field—you can get away with fewer keyframes. The bottom line is this decision is up to you, but it is the prudent developer who reviews the entire video prior to converting the file to FLV.

If you are going to be building a custom video controller that contains a scrubber, one keyframe per second is the benchmark.

Frame size Another major factor to consider is the physical size of the video. The larger the video is on screen, the greater the demand it places on bandwidth. Common video sizes are listed here: NTSC: 640✕48 PAL: 768✕576 (This is the European standard.) Wide screen: 720✕576 Flash Video: Pick a number

38

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 Obviously, creating an FLV file at 720✕576 is going to pose a huge issue to the poor viewer. This is why most FLV files use 320✕240, 240✕180, 160✕120, and 80✕60. Even so, the astute developer keeps the user, not the technology, foremost in mind, creating the video by targeting the bandwidth. A larger video—320✕240—requires more screen real estate. It will also have a higher resolution and better quality. The downside is a larger file size and a rather large appetite for bandwidth, making it difficult, at best, for the poor user with a dial-up connection.

2

On the other hand, a smaller video—240✕180 or 160✕120—has a smaller browser footprint, and the trade-off will be a decrease in resolution and detail. The upside, of course, is a smaller file size and a reduced bandwidth requirement. When you use the Flash 8 Video Encoder or any other application that creates the FLV file, you will be asked the following questions regarding how the FLV file will be created: What bit rate will be used to stream the video? What frame size will be used to present the video? What frame interval should be used for the keyframes? So much for theory, let’s get to work.

Creating the FLV file using the Flash 8 Video Encoder When you installed Flash Professional 8 onto your computer, you also installed a “side application” named the Flash 8 Video Encoder. The sole purpose of the Video Encoder is to convert a video file such as a MOV, AVI, or WMV file into the Flash Video format, which has the .flv extension. Keep in mind that FLV files can only be used with Flash. They can’t be viewed by any other media player, and even then FLV files can only be viewed in Flash using either the FLVPlayback component or through an ActionScript-controlled player you construct. Before you start converting your After Effects videos to the FLV format, you need to have a deployment strategy in place. This strategy asks a simple question: What version of the Flash Player will be targeted? The answer will determine which codec will be used in the Flash 8 Video Encoder to compress the video and the components you can use. If you are targeting Flash Player 6 or 7, you can’t encode a video containing an alpha channel (which allows you to define transparency levels in your video), and you can’t use the new FLVPlayback components in Flash 8. Though you can use both of the codecs—Sorenson Spark and ON2VP6—that come bundled with the Video Encoder, it is better you stay with the Sorenson Spark codec. In fact, if you choose one of the presets aimed at Flash Player 7, the default codec will be the Sorenson Spark codec.

39

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 1. Launch the Flash 8 Video Encoder. In both the Mac and the PC versions of Flash, the Video Encoder can be found in the Flash application folder on your hard drive. On the PC, the application can be found at C:\Program Files\Macromedia\ Flash 8 Video Encoder. On the Mac, it can be found at MacintoshHD\ Applications\Macromedia\Flash 8 Video Encoder.

2. When the Video Encoder opens, locate the video prepared in the previous chapter (a copy of the file, FinalOpener.mov, can be found in the Exercise folder within the Chapter 2 code download), and drag and drop it onto the interface. When you release the mouse, the video will drop into place, and you will be shown the compression to be applied to the file and whether the file has been encoded as shown in Figure 2-1.

Figure 2-1. You can drag and drop a video into the Video Encoder or you can use the File menu.

Another method of adding a video to the Video Encoder is to select File ➤ Add or click the Add button as shown in Figure 2-1, and, when the Open dialog box appears, navigate to the folder containing the video.

The next step is not to click the Start Queue button, which will start encoding the video using a preset value. You are about to discover you really don’t need to use the presets. Leave them to the rookies.

40

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 3. Select the file and click the Settings button to open the Flash Video Encoding Settings dialog box. When it is open, click the Show Advanced Settings button to bring up the Advanced Settings options as shown in Figure 2-2.

2

Figure 2-2. The Video Encoder’s advanced options

When you click the Show Advanced Settings button, the entire interface opens. At the top, the pull-down menu presents you with a number of preset encoding values. These presets are aimed at either Flash Player 7 or Flash Player 8. If you choose a Flash 7 preset, the Sorenson Spark codec will be used, and, if you choose a Flash 8 preset, the ON2VP6 codec will be used for the compression. You can also scrub across the video using the scrub button and even set the In and Out points for the encoding by dragging the sliders under the scrubber. The next areas ask how you wish to treat the video and the audio tracks in the video.

4. Make sure the Encode video box is checked and select ON2VP6 from the Video codec pull-down menu.

5. Click the Quality pull-down menu and select Custom from the choices. 6. You will now notice that the Max data rate area is no longer grayed out. Enter 300 as the Max data rate.

41

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS The number you just entered into the Max data rate area is an arbitrary number. The decision regarding data rate is one we consider as being subjective, not objective. The reason, as we pointed out earlier, is that data rate determines quality, and no two people can ever agree on a definition for quality. The best advice we can give you here is to experiment with various rates and determine which settings best suit your quality needs.

7. Check the Encode audio box to ensure the audio track will be encoded into the FLV file. Not selecting it will result in your producing a video for the deaf. Select 48 kbps (mono) from the Data rate pull-down menu. This is another area where all decisions are subjective. The reason we selected a mono track with a relatively medium data rate was because we are “falling in love with the user, not the technology.” You can’t just assume that all your users have decent sound systems attached to their computers that would justify medium-quality stereo sound. You may choose to disagree, of course. Reducing the file from stereo to mono also reduces the size of the audio track by 50%, which means the sound will stream and be processed by the user’s computer that much faster.

8. Click once in the Output file name area and name the file Opener. If your Video Encoder settings resemble those in Figure 2-3, click OK to return to the main Video Encoder window.

Figure 2-3. The encoding settings for the project

42

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 9. When you return to the Video Encoder window, click the Start Queue button. The process will start, as you see in Figure 2-4, and you will be shown the progress of the encoding process and the settings used. If you make a mistake, you can always click the Stop Queue button. To return to the encoding settings, select the video in the Video Encoder window and select Edit ➤ Reset Status.

2

Figure 2-4. The video is being encoded.

When the encoding finishes, the FLV file will be placed in the same directory as the QuickTime MOV that was just encoded. At this stage, you can select the file in the window and click the Remove button to remove the video from the queue. If you do remove the video, you won’t be deleting the original video. In fact, a dialog box will open that reassures you this isn’t the case. If you realize you made a mistake with one of the settings, and you haven’t removed the video from the queue, select the video and then select Edit ➤ Reset Status. This essentially tells the Video Encoder the video is going to be encoded, and, when you click the Settings button, the encoding settings applied to the video will be intact.

10. Quit the Video Encoder. You are now in for a very pleasant surprise. If you open the folder containing the QuickTime movie and the FLV file you just created, you will notice that the video is 19MB in size, while the FLV file you just created is about 1.5MB. This is quite normal, and, when you create and test the video player in the next exercise, you will also discover a serious file-size reduction does not mean a major quality sacrifice on your part.

The FLV file you created can only be read by the Flash Player. You can’t double-click the FLV file and preview the video. If you wish to do that, head over to www. download.com and do a search for FLV players. They offer the current version of FLV Player (at the time of this writing it is 1.3.3.) of one of the best, by Martijn de Visser.

43

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

If you are a hardcore After Effects user, you have probably read this section and wondered why we were wasting our time. You can create the FLV file right out of After Effects 7 by selecting File ➤ Export ➤ Macromedia Flash Video (FLV), as demonstrated in Figure 2-5. You are absolutely correct, but doing so opens the Flash 8 Video Encoder. By reviewing the application, you now know how to use the window that opens when you choose that menu item in After Effects.

Figure 2-5. You can go directly to the Video Encoder from After Effects using the Export menu in After Effects.

Playing an FLV file in Flash Professional 8 Now that you have created the FLV file, you are half the way there to getting the video to play on a website. The balance of this chapter is designed to show you four ways of accomplishing this task: Use the new Flash 8 FLVPlayback component. Use the Flash 6-7 MediaPlayback component when Flash Player 6 or the Flash Player 7 is your target player. Use the FLVPlayback UI controls to create a custom player. Create your own player. You should be aware the last two methods will require the use of ActionScript to make the player fully functional. If you have never been exposed to ActionScript, don’t let that get in your way. The code presented will get you up and running in no time and does not get into the really advanced stuff you can do with ActionScript. In fact, the code to be presented is the absolute minimum you need to know to stream video.

44

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 The other thing to keep in mind is you are eventually going to have to use ActionScript in your video endeavors. You won’t be able to avoid it. Let’s look a couple of scenarios, shall we? You are the master of your After Effects universe and have decided to permit the world to marvel at your After Effects prowess on your website. The design is quite radical, and the design of the FLVPlayback component simply doesn’t mesh with your design. Though you can change the look and feel of the component, in the hands of someone who is new to Flash or has a basic understanding of ActionScript, changing a component is not recommended. You will need to create your own video player, and, to do that, you will need to create your own custom controller.

2

In the second scenario, your work is going to appear in an ad on one of the major sites out there. The problem is, you have been told that the SWF file you create for the video can be no more than 30K in size. Considering the fact the FLVPlayback component adds 37K to a SWF file, you are going to have to create your own player to fit. You may be looking at those two scenarios and thinking, “As if that will ever happen!” We can assure you, it will. The standard file size for a SWF file in any rich media ad on a page is around 40K, and the car and movie companies are not using the components for that very reason. They are creating their own custom players to meet that constraint. Another example is CNET.com, who make extensive use of Flash Video on their site and use their own custom controller. Try navigating to www.cnet.com and looking around the site for a bit.

Using the Flash 8 FLVPlayback component This is where everybody starts with Flash Video because it is both easy to do and “code free.”

1. Open a new Flash document and save it to the Chapter 2 Exercise folder—we’ll leave what to name the file up to you. The reason for this is “basic self-defense.” By having the FLA and the FLV files in the same folder, you will never lose the path to your video.

2. Select Window ➤ Components to open the Components panel. 3. Click FLVPlayback—Player 8 once and when it opens drag a copy of the FLVPlayback component to the stage. You will most likely see a big black box (shown in Figure 2-6) with an FLV icon in the middle. If there are controls visible, they are the ones assigned when the component was last used.

45

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 2-6. The component is on the stage.

4. Click the component on the stage once and then select the Parameters tab in the Property inspector. This is where the video is added to the component.

5. Double-click the contentPath area of the component to open the Content Path dialog box (see Figure 2-7). Click the Browse button (the folder icon) to open the Browse for FLV File dialog box. Navigate to the folder containing the FLV you just created. Select the FLV file and click the Open button. The dialog box will close and the name of the selected FLV file will appear in the Content Path dialog box.

Figure 2-7. The FLV file to be added to the component is select through the Content Path dialog box.

6. Select the Match source FLV dimensions check box. The neat thing about this check box is it reads the height and width metadata that was added to the FLV file when you created it. This means, for example, if you have an FLV file that is 723 pixels wide and 124 pixels high, the component will automatically spring to those dimensions. Click OK to close the dialog box and return to the Parameters panel in the Property inspector.

46

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8

If you see a path such as C:\Documents\My Documents\Videos\myVideo.flv in the contentPath area, you are about to experience a world of hurt. That path will be hard-

wired into the SWF file, and, when you try to play the video from your website, the SWF file will follow the path and inform whoever was unlucky enough to select the video that the path can’t be found. This is why it makes sense to place the SWF file in the same folder as the FLV file.

2

Yes, you can use a remote location for your FLV files. If you have a number of them in a folder on your site, you can set the path to http://www.mysite.com/FLVfolder/ myVideo.flv.

7. Scroll down the parameter list and double-click the Skin area to open the Select Skin dialog box. Select SteelExternalAll.swf, as shown in Figure 2-8, from

the list.

Figure 2-8. You can choose from among 27 different skin styles.

There are a couple of things to be aware of when choosing a skin. Pay attention to the minimum width number associated with the skin. If the FLV file is only 240 pixels wide and the minimum width is 270 pixels, the controller will not fit the video. The other thing to be aware of is if you choose one of the skins with “over” in its name, the controller will appear over the video. In this case, you have a decision to make. If you want the controls to be visible for the entire video, set the autoHide property in the Parameters tab—the one just under the Skin parameter—to false. The controls will appear over the video and will hide what is under them. If you set the autoHide parameter to true, the controls will appear anytime the user rolls over the video.

47

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Yes, you can change the look and feel of a skin. No, we are not going to discuss how to accomplish this in this book. The reason is reskinning a component is not exactly an easy task to accomplish, and, if you don’t know what you are doing, you can easily break the component.

8. Save the movie and test it by pressing Ctrl+Enter (PC) or Cmd+Return (Mac). The movie will be exported as a SWF file and, when it finishes exporting, the Export dialog box will close and the video will start playing as shown in Figure 2-9. When you finish the video, click the close button to return to Flash.

Figure 2-9. The video playing in the skin

The SWF file you created should be regarded as being a test SWF file. Testing a Flash movie is not the same as publishing a Flash movie. Though a SWF file is created when you test the movie, it is common practice to select File ➤ Publish Options in Flash when creating a SWF file.

Obviously there is a lot of wasted space in this movie. The video sits on an overly large stage. Next, you’ll fit the stage to the video and along the way discover a rather nasty gotcha associated with the FLVPlayback component.

1. When you return to Flash, select the component on the stage and then click the Properties tab of the Property inspector.

2. Set the X and Y coordinates for the component to 0. The video will now tuck up against the top-left edge of the stage.

3. Click the stage once and then click the Size button in the Property inspector. This will open the Document Properties dialog box.

4. Click the Contents button and click OK. When the dialog box closes, you will notice that the stage has shrunk to fit the video. Not quite. In fact . . . “GOTCHA!!!”

48

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 5. Click the component on the stage, and, using the left or right arrow key, nudge the component until you can see the stage. As you can see from Figure 2-10, the controls are actually off of the bottom of the stage. This means if you were to publish the movie and post it to a website, the video would have no controls. Let’s fix this nasty situation right now.

2

Figure 2-10. The stage shrinks to fit only the video portion of the component.

6. Click the stage and click the Size button to return to the Document Properties dialog box. Change the height setting from 240 to 280 pixels. When you return to the stage, select the component and reset its X and Y coordinates to 0.

7. Save and test the movie. That is all you need to know to get yourself going with video in Flash. Still, there are a couple of things to keep in mind when using the FLVPLayback component: The component only works in Flash Player 8. If your target player is Flash Player 7 or lower, you can’t use this component. When you publish the video, you will have two SWF files appear in the folder. One will contain the name of the Flash movie, and the other will have the name of the skin applied to the component. Both of these files must be in the same folder for the component to work.

Targeting video for Flash 7 or lower There will be instances when the target player for video will be Flash Player 7 or even Flash Player 6. This could be a situation, for example, where the video is being placed in a rich media advertisement and the specifications preclude the use of Flash Player 8. In this case, you can use the MediaPlayback component in the Media - Player 6 - 7 area of the Flash Components panel. Here’s how:

1. Open the file created in the previous exercise. Select the FLVPlayback component and delete it.

2. Open the Components panel and open the Media - Player 6 - 7 component strip.

49

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 3. Drag a copy of the MediaPlayback component to the stage and set its dimensions to 320 by 240 and its X and Y positions to 0 in the Property inspector.

4. Select the component on the stage and select Window ➤ Component Inspector. When the Component inspector opens, click the Parameters tab and specify the following settings: FLV FPS: 24 URL: Opener.flv Automatically Play Use Preferred Media Size Control Placement: Bottom Control Visibility: On

5. If your settings resemble those shown in Figure 2-11, save and test the movie.

Figure 2-11. The style used for the MediaPlayback component is called Halo.

Using the FLVPlayback Custom UI components This section answers a question that may be nagging at you: “That’s all well and good, guys, but what if I only need a minimal set of controls?” This is a valid question because there will be occasions when the full set of controls in the component is a bit overdone. It could be a situation where your clients are being given an opportunity to view their videos on a staging server, and all you really need is to give them the ability to play a video, fast forward through the video, pause/play the video, and even reduce the video’s volume. Each of these features is available to you as a separate control. Follow these steps to create just such a video project:

50

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 1. Open the Controls.fla file located in the Chapter 2 Exercise folder. All we have done for you is to add an FLVPlayback component, with no skin, to the stage and create layers for the controls and the scripts you will write.

You may notice that we have locked the Actions layer. This is a common practice among Flash developers. By locking the Actions layer, you can’t add content such as text or figures to the layer that will hold the ActionScript. Even though the Actions layer is locked, you can still add your script to it.

2

2. Open the components window and open FLV Playback- Custom UI. 3. Select the Controls layer and drag a copy of the BackButton, ForwardButton, PlayPauseButton, and Volume components to the stage the video as shown in Figure 2-12.

Figure 2-12. The components are on the stage and ready to be wired up with ActionScript.

When components are dragged from the Components panel to the stage, a copy of the component is placed in the Library. When you drag a copy of the PausePlayButton component, copies of the PauseButton and PlayButton components, as well as the PausePlayButton component, are placed in the Library.

With the components on the stage, you can now turn your attention to making them work. This will be accomplished through the use of ActionScript. Before you write the code, you must give each component a name—called and instance name—so that Flash knows what to do when a button is clicked.

51

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 1. Select each component on the stage, and in the Property inspector give them the following instance names: FLVPlayBack: myVideo (see Figure 2-13) BackButton: btnBack PausePlayButton: btnPlay ForwardButton: btnForward VolumeBar: btnVolume

Figure 2-13. Instance names are added in the Property inspector.

2. Click the first frame once in the Actions layer and press the F9 key to open the Actions panel. If you are using a Mac, F9 opens Expose. To open the Actions panel on a Mac, press the Option+F9 keys.

3. When the Actions panel opens, click once in the Script pane and add the following code: myVideo.playPauseButton = btnPlay; myVideo.backButton = btnBack; myVideo.forwardButton = btnForward; myVideo.volumeBar = btnVolume;

52

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 If you have never written ActionScript before, you may be looking at this and wondering, “Huh?” If you have never used the components, you may also be wondering the same thing. These components are already smart enough to control a video. All you have to do is point one to the video component and tell Flash that the component being clicked has an instance name. Thus the first line of code, in English, reads “The btnPlay component is the instance name for playPauseButton, which turns the video, playing through the FLVPlayback component named myVideo, on and off.”

2

If you are new to ActionScript, you may notice that some words such as backButton are blue and others are black. The words in blue are keywords used by ActionScript, and they must be spelled and capitalized exactly the way you entered them. If you enter backbutton, the word would be colored black, Flash wouldn’t have a clue what you are talking about, and the back button simply wouldn’t work.

4. Save and test the movie. When you click the Play button, the video, as shown in Figure 2-14, starts playing.

Figure 2-14. The video is under the control of the buttons added to the stage and coded in the Script pane.

Creating a custom video player To this point in the chapter you have been using the tools provided in Flash to create a video player. Though the tools are both easy to use and powerful, there will come a time when either due to space constraints or the need “for something different” you will start looking at creating your own custom player. A great example of this is the first exercise in this chapter. The final file size for the SWF file is 34K. On the surface this may seem like a relatively small size, but you can create a custom player that essentially performs all of the same tasks in a space that is 10K or less. In the Flash universe, “small is beautiful.”

53

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS How is this possible? Pair a video object with ActionScript. When you open the Flash Library and select the Library options pull-down menu, you will see a menu item named New Video. This is the video object, and when it is placed on the stage, you can use ActionScript to feed a video stream into it and to manage the stream. We are going to start this chapter’s final exercise in precisely that manner and then start building upon the exercise to the point where you will have created a fully functional video controller that fits in a very small space. Along the way, you will also learn how to deal with a rather complex project. How do you deal with complexity? From a position of simplicity. When building this sort of thing, you just don’t start constructing and coding until you reach the end of the task. That is a surefire recipe for failure. Instead, determine what needs to be constructed and coded, build and code it, and then test it. In short, build a bit and test it. Build a bit more and test it. In this way, if there is a mistake or an issue, it is dealt with immediately, you know exactly where the problem occurred, and, best of all, it won’t ripple through the entire project. In this project, we are going to Stream video into a video object. Create a pause/play button that will pause and play the video. Create a rewind button that will scoot the video’s playback head back to the start of the video. Create a scrubber bar that will allow the user to jog forward and backward in the video. Create a button that turns the sound on and off. Each one of these techniques will be contained in a file that can be found in the Completed folder within the Chapter 2 code download. If you have never really dug into ActionScript, each of the files will show you how a project is constructed and how one bit of code builds upon the others. As well, each of the following exercises is designed to move through ActionScript in a straight line from basic to somewhat advanced in a controlled manner. Along the way, you will obtain a firm grasp of the video techniques and code used for the remainder of this book. Let’s get busy.

Streaming video into a video object First off this isn’t going to be as difficult as it may first appear. There really are only three steps involved in the code, and, if you can remember six lines of code, you are in the game.

54

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 The steps are Connect. Stream. Play.

2

1. Open a new Flash document and set the stage size to 320 pixels wide by 240 pixels deep. Double-click the layer name and rename it Video.

2. Open the Library panel and click the Library panel options button to open the Library’s pull-down menu. Select New Video (see Figure 2-15).

Figure 2-15. Video objects are added to a movie using the Library’s pull-down menu.

3. When the Video Properties dialog box (shown in Figure 2-16) opens, be sure that Video (ActionScript controlled) is selected. The name for the symbol is irrelevant, but feel free to add one. Click OK to close the dialog box. When it closes, a little icon that looks like a video camera will be sitting in your library.

Figure 2-16. The Video Properties dialog box

4. Drag the video object from the Library to the stage, and, making sure the object is selected on the stage, give it these values in the Property inspector: Instance name: myVideo Width: 320 Height: 240 X: 0 Y: 0

55

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS When you finish, you should see what looks like a box with a big X through it on the stage as shown in Figure 2-17. That’s all you need to do for the Video layer. Lock the Video layer by clicking the lock button on the layer strip.

Figure 2-17. The video is ready to be “wired up” with ActionScript.

5. Save the file to the Chapter 2 Exercise folder.

Using ActionScript to play a video Remember, there are only three steps here, so it isn’t as complicated as you may think. Once more, the steps are connect, stream, and play. The first step is managed by what is called the NetConnection class. All it does is to manage the connection between the server and the SWF file in the user’s browser. Once that connection is made, another class named NetStream is used to manage the flow of data between the SWF file and the server. The final step uses a method of the NetStream class (method being a fancy term for action) to actually play the video.

1. Add a new layer to the timeline and name it Actions. Lock the layer and press the F9 (PC) or Option+F (Mac) keys to open the ActionScript Editor.

2. Click once in the Script pane and enter the following code: var nc:NetConnection = new NetConnection (); nc.connect (null); var ns: NetStream = new NetStream(nc); myVideo.attachVideo(ns); ns.play("Opener.flv");

56

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 The first two lines give the connection a name—nc—and check to make sure the connection is made between the web server and the computer. The next line tells Flash to start the stream in the NetConnection, and the line after that says any video placed into the stream is fed into the video object on the stage. The last line tells Flash which video plays on the stream.

2

A couple of things that you may have noticed as you entered the code is the pulldown box that appeared when you entered a colon or a left bracket in the code and the use of var. That box that appears is called a code hint and, if you are unsure of the correct spelling of a term, double-click the one you are looking for and it will be added to the code. The use of var indicates we are strict data typing our variables. This means the variable name can only have the properties of the class associated with it and nothing else. For example, if the variable ns were given the value of tomato, Flash will kick out an error message saying that tomato is not a part of the NetStream class. What’s with the variable names such as ns and nc? You can use any name you wish for a variable, but we prefer to use names that actually mean something. We could just as easily have used GreatRiverofFlowingData for the NetStream, but to us ns is a bit more succinct.

3. Save and test the movie. The video should play in the video object on the stage as shown in Figure 2-18.

Figure 2-18. Six lines of code is all it takes to stream a video into a video object on the stage.

As we progress through the various steps in this exercise, you will find the files in the Chapter 2 Completed folder. The file for this exercise is CustomPlayer1.fla.

57

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Creating buttons to control video playback Now that you have the video playing, you can turn your attention to creating the controls that allow the user to rewind the video, fast forward to the end of the video, and to pause and play the video. Before you start, it is important that you understand how controls work when it comes to working with Flash Video. The controls don’t control the video. The controls manage the stream. This is an important concept to grasp because there is nothing in ActionScript that is aimed at, for example, pausing a video. To pause a video, you pause the NetStream. You are also in for a rather pleasant surprise in this exercise. You are going to create the buttons, and we are going to show a rather neat way of adding the control symbols to the button without having to actually draw them. Let’s get started:

1. Add a new layer to your timeline, below the Actions layer, and name it Control. 2. Select the Rectangle tool and click the Corner Radius button in the Options area of the toolbar and when the dialog box opens, enter a corner radius of 5 pixels and click OK.

3. In the toolbar, turn off the stroke and set the fill color to a dark gray or a black. Draw a rectangle on the stage and use these settings in the Property inspector: Width: 310 Height: 25 X: 5 Y: 205

4. Click your rectangle once and select Window ➤ Color. In the Color Mixer panel, select Linear from the Type pull-down. This will add a gradient to the shape. Obviously it isn’t quite correct, so let’s fix it.

5. The pointers in the gradient color area are called crayons. Drag the black crayon on the left of the color bar to the middle. Click the left edge of the color bar once and another black crayon is added.

6. Double-click the crayon you just added. This will open the Color Picker. Change the color to the light gray on the left—#CCCCCC. Do the same thing for the crayon on the right side. When you change the colors, you will notice the bar on the stage (see Figure 2-19) changes to reflect your choices.

58

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8

2

Figure 2-19. The gradient is added to the rectangle.

7. With the rectangle selected on the stage, click the Gradient tool in the toolbar. You will notice that the bar suddenly contains a rotate icon and a handle. Due to the fact we need this bar’s gradient to run from top to bottom, the rotate handle is about to get a workout.

8. Click and drag the rotate handle to the left. When the handle is directly above the gradient, release the mouse. Now click and drag the square handle with the arrow downwards until it just touches the top edge of the rectangle as shown in Figure 2-20.

Figure 2-20. The rectangle now has a bit of a 3D look to it.

Obviously a shape with solid colors in the gradient that sits over a video is not exactly going to result in a pleasant experience for the viewer. Here’s how to fix it:

9. Right-click (PC) or Option-click(Mac) the shape and select Convert to Symbol from the context menu. When the Convert to symbol dialog box opens, name the symbol Control Bar and select Movie Clip as its behavior. Click OK to close the dialog box. The symbol will appear in the Library, and the thin blue box surrounding the object on the stage indicates it is a symbol. Now that the object is a movie clip, you can do some rather neat stuff with it. Let’s push its opacity back so the viewer can see the video through the control bar.

59

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 10. Select the bar on the stage, and in the Property inspector, select Alpha in the Color pull-down list. Change the Alpha value to 60 and save and test the movie. The bar, as shown in Figure 2-21, is not so prevalent.

Figure 2-21. The control bar is on the stage, and the time has arrived to add the control buttons.

11. Lock the Control layer and add a new layer above it named Buttons. 12. Select the Button layer and then select the Text tool. Switching between the tools in the toolbar can be a tedious process. If you really want to add zip to your production time, use the keyboard to select tools. For example, in the preceding step, pressing the T key will select the Text tool. To see the key associated with a particular tool, just place the cursor over that tool, and the resulting tooltip will tell you which key is associated with it.

13. Click the stage once and press the 9 key. Select the text, and in the Property inspector set the font to Webdings, the color to red (FF0000), the text type to Static, and the size to 18 pixels. Click the Text tool again and press the 4 key. You have just created the play and rewind buttons for the controller.

The Webdings font, which is installed on both Macs and PCs, contains a number of symbols that are commonly used as the icons for video control buttons. You can see all of the symbols in the font by simply double-clicking the font in your PC’s Fonts folder or by opening the Font Book utility on your Mac and choosing WebDings in the Font list. Being the nice guys we are, here are the controls and their associated keys: Play: 4 Back: 3 Rewind: 9 Fast Forward: Colon Pause: Semicolon Volume: Capital X

60

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 14. Move the rewind button to the left side of the bar and place the play button just to the right of it. Select the rewind button and convert it to a movie clip named Rewind. Do the same thing with the play button but name it Play.

15. Select the Rewind movie clip and give it the instance name of mcRewind. Select the play button and give it the instance name of mcPlay as shown in Figure 2-22.

2

Figure 2-22. The play button is converted to a movie clip and given the instance name of mcPlay.

You may be wondering why the instance name starts with mc. When you have a lot of symbols on the stage, that prefix tells you exactly the type of symbol you are dealing with and avoids confusion. Other prefixes we use are txt for a text instance, btn for a button instance, and cpt for a component instance.

With buttons in place, it is now a simple matter of writing the code that controls the video.

16. Click the frame in the Actions layer once and open the Actions panel. Click once in Line 7 of the Script pane and add the following code: mcPlay.onPress = function() { ns.pause(); } mcRewind.onPress = function () { ns.seek(0); } The first line of each function essentially says “When the button is clicked, do the stuff below.” In the case of the play button, we are using the pause() method. The fascinating thing about this method is that by not putting anything between the brackets—True or False are the only values that can be put between the brackets—the button acts like a toggle switch, pausing and playing the video each time it is clicked. The rewind button uses the seek method to simply scoot back to the start of the video— seek (0)—and the video will start playing from that point onward. If you do use the seek() method to navigate through a video, be aware that it can only use a whole number as the value. This means you can’t use 1.5 to go to the 1.5-second mark of the video. The other thing to keep in mind about this method is the fact it will show you the keyframe that is closest to the time. For example, assume the FLV file has been encoded at a frame rate of 24 fps with keyframes that are spaced out by 48 frames. This means the first

61

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS keyframe in the video is at the 2-second mark. If you were to use seek(1), you won’t be shown the frame at second 1; the video’s playback head will move to the 2-second mark of the video and show you that frame instead.

17. Save and test the movie. The file for this part of the exercise is named CustomPlayer2.fla and can be found in the Chapter 2 Completed folder.

Turning the audio on and off This next technique, on the ActionScript skill scale, is approaching intermediate. The reason is the audio in an FLV file is in a track separate from the video track. As well, there is no audio control method in either the NetStream or the Video classes. The audio track instead has to be controlled by the ActionScript Sound class. This means you are going to have to put the audio track into a separate movie clip and control its volume through the use of an ActionScript Sound object. As well, you are about to learn how to move around inside a movie clip’s timeline even though the movie clip is on the main timeline. Though it all sounds rather technical, it is rather simple to accomplish. Here’s how:

1. Create a new layer in your movie and name it Volume. 2. Select the Text tool and enter an uppercase X. If you don’t see a volume icon, change the font to 18-point Webdings and set the color of the text to red (FF0000). With the text selected, convert it to a movie clip named Volume. With your new movie clip selected, give it the instance name of mcMute.

3. Open the library and double-click the Volume movie clip to open it in the Symbol Editor.

4. Add a new layer named Actions and add keyframes in both the Actions layer and Layer 1 at Frames 10, 20, and 30. You can add a new keyframe by right-clicking (PC)

or Ctrl-clicking (Mac) on the frame. Another way is to select the frame and press the F6 key. What you are going to do is to change the volume icon depending on whether the sound is playing and whether the mouse is over the icon or not. This accounts for the four keyframes. The first one will indicate the audio is playing. The second will indicate whether the mouse is over the icon while the audio is playing. The third will indicate whether the volume is off, and the fourth will indicate whether the mouse is over the icon while the volume is off.

5. Click once in the keyframe in Frame 1 of the Actions layer. Name this frame on in the Frame input box in the Property inspector. These names are called labels and are indicated by a little flag in the keyframe.

62

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 6. Click the keyframe in Frame 10 of the Actions layer and name the frame over. Switch to the Text tool, select the icon, and change its color to yellow (#FF0000).

7. Click the keyframe at Frame 20 of the Actions layer and name it mute. Select the Line tool and draw a red line (see Figure 2-23) across the volume icon.

2

Figure 2-23. The various states of the volume button are created and the frame labels are added to the movie clip’s timeline.

8. Add a keyframe in Frame 30 of both layers. Name the keyframe muteOver and change the color of the line and the volume icon to yellow (#FF000000).

9. The final step is to select the first keyframe in the Actions layer, open the ActionScript Editor, and enter the following code: Stop(); If you didn’t have the stop() action in that first frame, the movie clip would play, and each of the button states in the movie clip would flash on and off. Not a good situation. With the various states of the button created, you can now turn your attention to writing the code that controls the audio track in the FLV file.

1. Return to the main timeline, select the keyframe in the Actions layer, and open the ActionScript Editor. Click once in the Script pane and enter the following code: _root.createEmptyMovieClip("mcVol",_root.getNextHighestDepth()); mcVol.attachAudio(ns); To pull the sound out of the FLV file and have it managed by the Sound class, you will first need to place the sound in a movie clip. Of course, you haven’t created that movie clip in the library, but ActionScript allows you to create movie clips on the fly while the Flash movie is playing. The first line does just that. It uses the createEmptyMovieClip() method

63

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS to create a new movie clip with the instance name of mcVol and puts it on the main timeline—_root. As you know, all movie clips occupy a unique position on the stage, and the getNextHighestDepth() method places the new movie clip at the next available depth above the content on the stage.

2. Press the Return/Enter key twice and enter the following code: var FLVSound:Sound = new Sound(mcVol); FLVSound.setVolume(100); The first line gives the sound in the FLV file a name, assigns the name to the Sound class, and puts the sound in the empty movie clip. The next line sets the sound’s volume to 100. That number is the full volume setting. If you wanted to turn off the sound, you would use 0 as the setVolume() parameter or, if you wanted the sound to be half volume, it would look like this: setVolume(50). With the sound dealt with, the time has arrived to let the button do its job and manage the sound. Before you merrily start coding away, it might not be a bad idea to take a moment and think about what the heck it is that the button is supposed to do. The first thing it will do is to turn the sound on and off. That is the simple answer. In actual fact, it will turn the sound on if the sound isn’t playing and vice versa. If the sound is playing, the user sees an icon without a stroke through it, and, if the user rolls over the volume icon, it changes color. What on the surface appears to be rather simple suddenly becomes a tad complex when it comes to execution. Actually, we put that in there to scare you. When you start planning interactivity, it is best to plan out what happens before you write the code and to write it down, in plain English, before you flame up the ActionScript Editor. For example, here’s how we approached what happens when the user rolls the mouse over the volume button: When the user rolls over the mcMute button . . . . . . check to see whether the sound is playing. If it is playing, go to the frame label named over in the mcMute movie clip. If it isn’t playing, go to the frame named muteOver in the mcMute movie clip. What you just read is what programmers call pseudocode. Pseudocode is nothing more than a plain language description of the logic to be used when the code is written. Now, how does that translate into ActionScript?

3. In the Script pane, press the Return/Enter key twice and enter the following: mcMute.onRollOver = function() { if(FLVSound.getVolume() ==100){ this.gotoAndStop("over"); } else{ this.gotoAndStop("muteOver"); } }

64

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 Having dealt with what happens when the user rolls over the button, let’s now turn our attention to what happens when the user rolls the mouse off of the button and what happens when the button is clicked.

Using the keyword this in the code is how you move around inside a movie clip on the main timeline. When the user rolls over the mcMute movie clip (this), Flash knows it is to go to the timeline of the movie clip just clicked or rolled over and to go to and stop on the frame name inside of the movie clip. The name is between quotes because Flash isn’t smart enough to figure out the name is a string of letters. If you didn’t have the quotation marks, Flash would think the name is a variable of some sort.

2

4. Press the Return/Enter key twice and enter the following code: mcMute.onRollOut = function() { if(FLVSound.getVolume() ==100){ this.gotoAndStop(“on”); } else{ This.gotoAndStop("mute"); } } mcMute.onRelease = function() { if(FLVSound.getVolume() ==100){ FLVSound.setVolume(0); this.gotoAndStop("muteOver"); } else{ FLVSound.setVolume(100); this.gotoAndStop("on"); } }

5. Save and test the movie. Notice how the button reacts to the cursor as shown in Figure 2-24.

You may have noticed that, except for a couple of minor differences, the code for the onRollOut and the onRelease events is exactly the same as the onRollOver code. If you are lazy like us, just copy and paste the onRollOver code and make the minor changes.

65

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 2-24. The sound is off and the cursor is not over the volume icon.

The file for this part of the exercise is named CustomPlayer3.fla and can be found in the Chapter 2 Completed folder.

Showing the user the loading progress of an FLV file We finish the construction part of the chapter with a technique that is somewhere around the middle of intermediate-level techniques. One of the keys to Flash design is the ability to provide the user with some sort of visual feedback regarding what is going on in the movie. If you have ever arrived at a Flash site where the first thing you saw was a preloader, you have experienced this feedback. In this exercise, you are going to construct a preloader of sorts, only it will show the user the loading progress of an FLV file. Where this widget differs from a regular preloader is that the video will start to play at some point during the loading process, and the widget will continue to show the progress while the video plays. This is due to a streaming feature of Flash Video that is called a progressive download. Unlike most streaming video technologies, Flash doesn’t need to have a large amount of the video in the player before the video starts to play. Instead, Flash keeps an eye on the information being downloaded, and, when enough of the FLV file has loaded to smoothly play, the video starts to play. While it is playing, the rest of the FLV files continue to download. To understand how a loading progress indicator works, you only need to understand how to create a percentage value. At any point in time, the graphic being used to visually represent the amount downloaded will have a width or height that matches the percentage of the file that has downloaded at any point in time. If half of the FLV data has loaded into the Flash Player, the width or height of the graphic will also be half of its width or height. Another little trick is not to look at the bar used as the loading indicator as being a graphic of a bar, Instead, regard its length or its height as being representative of the total amount of data to be loaded. So much for theory; let’s get busy:

66

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 1. Open the file you have been working on and create a new layer named Loader. 2. Select the Rectangle tool and set the stroke color to black and the fill color to white. With the Loader layer selected, draw a rectangle on the control bar. As Figure 2-25 shows, ours is 160 pixels wide by 10 pixels high.

2

Figure 2-25. The progress indicator is drawn and placed on the stage.

3. Double-click the object on the stage to ensure you have both the stroke and the fill selected, and convert it to a movie clip named Loader.

4. Open your Library and double-click the Loader movie clip to open the Symbol Editor.

The reason for the movie clip is the white fill will be used to visually show loading progress. This means the rate at which the fill grows from left to right will be determined by ActionScript. The best way of doing this is to convert the object under the control of ActionScript to a movie clip symbol.

5. Click the fill once to select it, and convert the selection to a movie clip named loadBar.

6. With the loadBar movie clip selected, select Modify ➤ Timeline ➤ Distribute to layers. When you click that menu item, you will notice that two layers are visible in the movie clip. One layer will be the load bar that will grow and the other will contain the stroke around the load bar. Name the new layer Stroke.

You can also right-click (PC) or Ctrl-click (Mac) the loadBar movie clip and select Distribute to layers from the context menu. If you want to make the bar somewhat transparent, select the movie clip and reduce its Alpha value in the Color area of the Property inspector to 40%.

67

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 7. Select the loadBar movie clip and give it the instance name of mcLoadBar. Click the Scene 1 link to return to the main timeline. Click the loadBar movie clip on the main timeline, and give it the instance name of mcLoader in the Property inspector. With the housekeeping out of the way, you can now turn your attention to wiring up the load bar with ActionScript.

8. Select the keyframe in the Actions layer and open the ActionScript Editor. Scroll down to the end of the rewind button function and press the Return/Enter key twice. Before you start writing the code, let’s take a minute and think through what needs to be done. In broad terms, the mcLoadBar instance will grow from left to right to show the progress of the FLV file loading into the video object. In actual fact, there is a bit more that has to be done. The bar will expand, but it needs to expand at a predetermined rate. This means Flash will have to constantly check how much of the FLV file has downloaded at any point in time and will change the width of the bar to reflect that amount. To do this you will need to tell Flash to do the following: Every one-tenth of a second, check how much of the FLV file has loaded into the video object. When the check is done, calculate the percentage of the video that has loaded. Change the width of the mcLoadBar movie clip to match that percentage. Looks suspiciously like pseudocode, doesn’t it? The check will be done using an ActionScript function called setInterval(). This function requires two parameters. The first will be the function to be performed, and the second is how often to perform the function, and that time is measured in milliseconds. The function called will be the one that does the calculations and resizes the mcLoadBar movie clip.

9. Click the mouse once on the new line in the Script pane and enter the following code: var loadProgress = setInterval(loadStatus,100); var amountLoaded:Number; The reason for the variables is at some point you may wish to change or even turn off the setInterval() function. The variable name is called the interval ID. The second variable is the result of a calculation that will be changing ten times each second.

10. Press the Return/Enter key twice, and you can now start writing the loadStatus function: function loadStatus() { amountLoaded = ns.bytesLoaded/ns.bytesTotal ; mcLoader.mcLoadBar._width = amountLoaded * 160; } The first line uses two properties of the NetStream class—bytesLoaded and bytesTotal— to determine the percentage of the FLV file that has loaded. The number will be a number

68

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8 between 1 and 0. This means if half of the FLV file has downloaded, the amountLoaded value will be .5. The next line uses the value from the previous line to set the width of the load bar. The first bit says to look at the mcLoader clip and to go inside the mcLoader clip to the mcLoadBar clip and change its width to the value of the previous calculation multiplied by the width of the load bar (160 pixels) and show that on the stage.

2

11. Save and test the movie (see Figure 2-26).

Figure 2-26. The FLV file has loaded into the SWF file.

If you don’t see the progress bar move across the interface, the odds are almost 100% you are testing the movie from your hard drive. If you really want to experience what the loader looks like, you will need to place the video in a folder on your website and load the FLV file into this movie from there. If you open the CustomPlayer4.fla in the Chapter 2 Completed folder and check the code you will notice the play method uses a URL—ns.play ("http://www.tomontheweb4.ca/FLV/Opener.flv")—for its parameter, not the FLV file name. Feel free to use this URL, which belongs to one of the authors, to do a remote test, or use your own. It’s your choice. Earlier in this chapter you created a video player using the FLVPlayback component. If you go back and check the file size of the SWF file for that project, you will see it weighs in at 34K. The final SWF file size for this exercise, which essentially has the same functionality as the component, is 2K. The exercise that used the three FLV UI components weighs in at 38K. Obviously, using a custom player makes sense in situations where file size is critical.

Publishing your video player The end game of the process is actually publishing your SWF file. Again Flash offers you quite a high degree of flexibility when it comes to preparing this file. You can choose which version of ActionScript will be used, which Flash Player version will be used, and even whether the HTML page that holds the SWF file will be produced.

69

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS When it comes to video, there are a few things, in no particular order, you need to be aware of: If you are using a progressive download—the video streams from your web server—the SWF file and the FLV file should be in the same folder. If you use the FLVPlayback component, be sure the SWF file for the controller is in the same folder as the Flash SWF file. If you are using a Flash Media Server or a Flash Video Streaming Service, the NetConnection is to an RTMP address, and the reference to the FLV file in the NetStream.play() method should not contain the .flv extension. You can have the FLV files in a different location and play them by using an absolute path to the file, rather than placing an FLV file or files in the same folder as the Flash SWF file. This is a great way of managing multiple videos and players that use the same video. Let’s publish this project.

1. Select File ➤ Publish Settings. When the Publish Settings dialog box opens (see Figure 2-27) the Flash SWF file and the HTML options will most likely be selected.

Figure 2-27. The Flash 8 Publish Settings dialog box

70

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8

Another way to access the Publish Settings dialog box is to click the Flash stage once and click the Settings button in the Publish area of the Property inspector. If the SWF file is destined for placement in a Dreamweaver 8 or GoLive CS2 document, feel free to deselect the HTML option. All this option does is create a web page containing the object and embed tags necessary to hold the SWF file. If you do deselect the HTML option, the HTML tab in the dialog box will disappear.

2

2. Click the Flash tab to open the Flash settings as shown in Figure 2-28.

Figure 2-28. The Flash Publish Settings dialog box is where you can choose your target Flash Player.

This area is where you have to make some decisions. The first is the target player to create. The Version pull-down will present you with a full list of Player options ranging from Flash Player 9, the latest version of the Player on the street, to FlashLite 2.0, which is used for mobile devices such as cell phones.

71

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

If you choose Flash Player 7 or lower, you may be presented with an alert box telling you that certain features of your project can’t be published. For example, using the FLVPlayback component and then selecting Flash Player 7 is a great way of kicking off this alert. If you see it when you are creating the Flash movie, open the Publish Settings dialog box and change the Flash Player version.

Your next decision is whether to use ActionScript 1 or ActionScript 2. Explaining the differences between the two is well out of the scope of this book. Still, all ActionScript presented in this book uses ActionScript 2 and, if you are publishing to Flash Player 8, it is advisable to select ActionScript 2. The load order controls the way the layers are loaded into the Flash movie. The default, Bottom up, loads from the layer at the bottom up to the top layer. There are also a number of options to choose from, as listed here: Generate size report: You will be shown, in the Output panel, the size of the data contained in the movie. Protect from import: Users won’t be able to right-click a SWF file in the web page

and download it to their hard drive. Omit trace actions: Coders love to use the trace command to see how things work. Select this before the movie is published and they will be ignored. Debugging permitted: Select this to remotely debug a Flash movie. Compress movie: Select this to create the smallest SWF file possible.

Changing the JPEG and Audio compression settings will override any settings you have made in the Library.

3. Click the Formats tab to return to the Formats panel. Deselect the HTML option. 4. Click the Browse button to navigate to the folder that will contain the SWF file. Click the Save button and you will return to the Formats panel. The absolute last thing you want to do now is to click the Publish button. If you check the path in the SWF area, you will notice it is the path to the folder where you just saved the SWF file (see Figure 2-29). Clicking the Publish button, to be gentle, would be a fatal error because that path will get embedded into the published SWF file, and users will be asked where it is when they try to view it. Not a good situation for either of you.

72

FROM FINAL PRODUCT TO UPLOAD IN FLASH PROFESSIONAL 8

2

Figure 2-29. Click the Use Default Names button to clear the path out of the SWF file.

5. Click the Use Default Names button and the path will be stripped out of the SWF file.

6. Click the Publish button. You will see a dialog box showing you the progress of the publishing operation. When it disappears, click OK to close the Publish Settings dialog box.

Summary This has been quite a long chapter, but if you have reached this point in the book you should now understand how Flash videos are created in After Effects and how they are encoded and deployed in Flash. We started the chapter by explaining how streaming works and the importance of data rate. We then walked you through how to use the Flash 8 Video Encoder to convert the video created in Chapter 1 into the FLV file needed for this chapter. We then showed you how to get it to play in Flash. As you may have discovered, a lot of possibilities are open to you. We showed you how to use the FLVPlayback component, how to add a skin, and how to deal with a rather sneaky gotcha associated with this component. We also showed you how to use the component designed for use in situations where Flash Player 7 or Flash Player 6 is the target player. Obviously, relying on components give you a “code-free” video deployment option, but there will be times when the component simply does fit the design or the space requirement for the project.

73

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS To do this, we eased you into the use of a “skinless” FLVPlayback component and how to use the FLVPlayback UI components to control a video. If you are just getting into using ActionScript, you discovered that the code that makes the buttons work is not terribly difficult to write. The next section of the chapter, especially if you are new to Flash, moved you right into Dragon Country as we showed you how to create a custom video player that contains much of the same functionality as its component counterpart. We showed you how to stream a video into a video object, how to control the video with a play/pause button, how to turn the video’s volume on and off, and finally how to show the user the loading progress of the video. Best of all, you did it with a SWF file that is less than one-third the file size of the SWF file using the FLVPlayback component created at the start of the chapter. We finished the chapter by explaining how to publish the SWF file that will play the video from Chapter 1 and some of things to be aware of during the publish process. It was a lot of ground to cover, but the good news is everything you will do in Flash over the balance of this book will be a variation on the themes in this chapter. Speaking of Flash ... did you know there is some really cool stuff you can do with text in After Effects that can also be used in Flash? To find out more, turn the page.

74

3 MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS When it comes to the subject of motion graphics, the first place where designers tend to look is text in motion. This idea was first explored by Flash artists such as Hillman Curtis, Todd Purgason, Yugo Nakamura, and Brendan Dawes, and since then the term motion graphics as become intimately associated with text movement in the Flash page. This is not a negative, and there is a tremendous amount you can do with text in Flash. One of our favorite examples of text-based motion graphics is about as elemental as one can get with text and Flash. Created by a talented Korean artist living in Seoul, Young-hae Chang, her site, www.yhchang.com, is a collection of web-based musings that are elemental, risqué, and heavy with irony. The words seen in Figure 3-1 hit the screen and dance in time with a 1950s jazz beat and drag you along for the waltz.

Figure 3-1. From Young-hae Chang’s “Artist’s Statement No: 45,730,944: The Perfect Artistic Web Site”

Yugo Nakamura takes type and motion graphics to a whole different level. He has created an example (available at his site, www.yugop.com/) called the “Typographic Book Search.” Using the Amazon search engine, Yugo creates a list of the top-selling books in a variety of categories, and, when you make a selection, the name selected is drawn using copies of the book where the name appears (see Figure 3-2).

Figure 3-2. Yugo’s name is constructed using copies of the friends of ED book New Masters of Flash.

Whether it is movie titles, product names, or even blocks of text, putting type in motion is an extremely effective technique. It is not surprising, therefore, to learn those who have mastered it are huge film buffs and have closely studied the film work of Saul Bass (Psycho) and Kyle Cooper (Nixon and Donnie Brasco). The key to understanding the use of text as a motion graphic is understanding that such factors as time and dimension

78

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS contribute to creating text that isn’t read on a static printed page, but from a computer screen where it is in motion. This raises such issues as the readability and legibility of the text that moves and is only visible for a finite amount of time. If text in motion can’t be read or understood, you have failed in your job. Though the intention of this chapter is not to turn you into a Kyle Cooper, Saul Bass, or Young-hae Chang, we are going to get you used to working with the medium of text and demonstrate how After Effects 7 offers the Flash artist an amazing suite of creative tools expressly designed for motion graphics. Rather than overwhelm you, we are going to start our hunt for motion graphic dragons with the text animation presets in After Effects.

3

Text animation presets After Effects ships with well over 250 text animation presets, which you can apply, change, and even stack on top of each other. What is not as well known, on the Flash side of the pasture, is that many of these presets, after they are applied to some text, can actually be dropped, intact, into Flash and edited even more in Flash. Obviously, reviewing each one of those presets would require a separate, companion volume to the book. Still, it is rather simple to review each one. When you open After Effects, select Help ➤ Animation Preset Gallery. The menu that appears (see Figure 3-3) will list all of the animation preset categories available to you.

Figure 3-3. The listing of the animation presets in the Help menu

79

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS When you click a category, another window (as shown in Figure 3-4) will open. Inside this window are examples of each preset animation. Each animation has the effect applied to the name of the effect. In this way, if you are at all curious about what an animation looks like—Helicopter, for example, really doesn’t tell you much—you can select its category and see whether the motion or animation effect is what you were expecting.

Figure 3-4. You can preview each animation preset.

Using an animation preset So much for the overview; let’s put some text in motion.

1. Open After Effects and, when the After Effects interface appears, either select Composition ➤ New Composition or click the New Composition button in the Project window to open the Composition Settings dialog box.

2. In the Composition Settings dialog box (see Figure 3-5) use the following settings: Composition Name: Use your name. Width: 320 Height: 240

80

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS Pixel Aspect Ratio: Square Pixels Frame Rate: 24 Duration: 0:00:10:00

When finished, click OK to close the dialog box. The new Comp will appear in the Project panel.

3

Figure 3-5. The composition settings that will be used to put your name in motion

3. Click the Text tool and click once in the Comp window. Enter your name. Instead of clicking the Text tool in the Comp window, you could also insert a Text layer by selecting Layer ➤ New ➤ Text. You can then enter the text directly into the new Text

4. Select Window ➤ Character to open the Character panel. Select your name and change the font and point size used for your name. We chose 40-point Arial Black, but feel free to use any font.

5. With your name selected, click the Fill Color chip in the Character panel once to open the Color Picker (see Figure 3-6). Change the color at the bottom of the Color Picker to #FFFF00, which is a web-safe yellow. Click OK to close the Color Picker.

81

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 3-6. The After Effects Color Picker is the same one used by Photoshop.

As you have seen in this step, you get to choose from among three color spaces—HSB, RGB, and hexadecimal—when adding or changing the color of selected objects. These three spaces make sense because the display medium is the computer screen.

As of version 6.5 of After Effects, Adobe moved its Color Picker to one familiar to practically anybody in the digital media industry: the Photoshop Color Picker. You can enter color values directly into any of the fields, and the selected color will change. The two color swatches are the new color (top) and the original color (bottom). If you just can’t wrap your head around the Photoshop Color Picker, you can change to your System Color Picker by select Edit ➤ Preferences ➤ General and selecting Use System Color Picker.

6. If it isn’t already open, open the Effects & Presets panel by selecting Window ➤ Effects & Presets.

7. Twirl down Animation Presets. And then twirl down the Text and Animate In folders.

82

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS 8. Select the Center Spiral preset (see Figure 3-7) and drag it on top of your name.

3

Figure 3-7. Drag and drop a preset onto a piece of text, and the text is swirling and twirling.

9. Click the Play button in the Time Controls panel, and your name will come swirling onto the screen. As you can see, with little or no effort on your part, you can create an animated text effect that can be done in Flash only if you are prepared to invest a serious amount of time and aggravation to the project. The really neat thing about these presets is they can be readily exported to Flash . . . as vectors. Here’s how:

1. Twirl down Text on the main timeline in order to see the keyframes. You may notice the animation occurs in less than three seconds.

2. Zoom in on the timeline and drag the timeline’s Work End handle to the 3-second mark on the timeline as shown in Figure 3-8.

Figure 3-8. Trimming a comp starts with reducing the length of the work area.

83

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 3. Select Composition ➤ Trim comp to work area. When you created the comp, you specified a duration of 10 seconds. Requiring a user to twiddle his or her thumbs for 7 seconds while staring at stationary text is not a best practice. By pulling the timeline’s Work End handle to the 3-second mark and then trimming the Comp to that duration, you remove the section where the text just sits there.

4. Select File ➤ Export ➤ Macromedia Flash (SWF). The first thing you will be asked to do is to save the SWF file. Save it to the Exercise folder in the Chapter 3 code download.

5. When you click OK to save the SWF file, the SWF Settings dialog box (see Figure 3-9) will open. Don’t worry about the JPG settings; just select Ignore from the Unsupported Features pull-down menu.

Figure 3-9. The most critical step of the process is telling the SWF file to ignore any unsupported features.

This dialog box is the key to successfully moving the animation from After Effects to Flash. By selecting Ignore from the Unsupported Features pull-down, any vectors in the project will not get flattened into bitmaps, which is a good thing because Flash is a vector-based application. This means the text, which is nothing more than vector artwork, moves into Flash in its common vector format.

84

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS 6. Click OK. A dialog box will appear telling you that After Effects is exporting about 72 or so Flash frames, and you will also see a bar showing you the progress of the export process.

7. Save the project and quit After Effects.

Importing an After Effects SWF animation into Flash Though you can import a SWF animation created in After Effects into Flash, you do need to be aware of a couple issues. The first is the contents of the SWF timeline are added to the Flash timeline, and Flash designers like to keep the main timeline as short as possible. The second is you can use ActionScript to import the SWF file at runtime, and, if you are new to Flash, this relatively simple process can be quite confusing. In this example, we are going to ignore both approaches and use a Flash movie clip instead.

3

1. Launch Flash 8 and, when the application opens, create a new Flash document and set the stage color to a medium gray—#666666—using the Color Picker in the Property inspector.

2. Select Insert ➤ New Symbol and when the New Symbol dialog box opens, name the new symbol Twirl, and select movie clip as its type. Click OK.

3. When you click OK in the New Symbol dialog box, the dialog box will close, and you will be looking at the timeline for the Twirl movie clip.

4. Select File ➤ Import ➤ Import to Stage. When the Import dialog box opens, navigate to the folder where you saved the SWF file from the previous exercise and doubleclick it to import the SWF file. Close the Import dialog box. When the dialog box closes, you will see that the SWF file has arrived on the movie clip’s stage as a series of keyframes (see Figure 3-10). Drag the playback head across the timeline, and you will see the animation.

Figure 3-10. SWF animations from After Effects arrive on the Flash timeline as a series of keyframes.

85

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

When the SWF animation is placed on the timeline, all of the symbols and graphics that make up the SWF file are also placed in the Library. Depending upon the complexity of the animation, this can result in a lot of stuff in the Library. In this case, the graphic symbols in the library are the letters in the animation. Click the folder icon at the bottom of the Library panel to add a folder to the Library. Name the folder Letters, and drag the graphic symbols, not the movie clip, into the folder.

5. Drag the playback head to Frame 60 of the movie clip. If you drag the playback head to the right, you will notice quite a few frames where nothing happens. Drag the playback head to the frame where the words stop moving. Select the next frame in the timeline. Press the Shift key and select the last frame in the animation. Right-click (PC) or Ctrl-click (Mac) and select Remove Frames from the context menu.

6. Click the Scene 1 link to return to the main timeline and drag the movie clip from the Library to the stage. You will see a blue box, the animation area of the movie clip, and a + sign, which marks the registration point of the movie clip. That + sign is the location of the similar sign in the movie clip.

7. With the movie clip still selected on the stage, set the movie clip’s location to 76 on the X axis and 8 on the Y axis in the Property inspector.

8. Test the movie by pressing the Ctrl+Enter (PC) or Cmd+Return (Mac) keys. Your name should now be in motion as shown in Figure 3-11. If you wish, feel free to save this file.

Figure 3-11. The name is in motion in the Flash Player.

86

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS

Combining animation presets to create Flash animations Now that you know how to use an animation preset to animate text in After Effects and use that animation in Flash, let’s get into something a bit more complicated. You may have noticed that in the After Effects text animation presets there are two related folders: Animate In and Animate Out. These folders contain a series of preset animations that allow you to apply one effect to an animation and a different one, later in the timeline, to remove the animation from the screen. Let’s have some more fun with your name.

3

1. Open After Effects and create a new Comp. 2. Click the Comp window once, select the Text tool, and enter your name. 3. Open the Effects & Presets panel and in Animation Presets select Text ➤ Animate In. Scroll down and drag the Twirl On Each Word preset onto your name.

4. Twirl down your name in the timeline and then twirl down the Text and Animator 1 categories.

Animation presets, when applied to an object on the screen, will appear in the timeline as an animator. Each animation added to an object will create a separate animator in that object’s timeline.

5. The animation is a bit too long for our purposes here. To shorten its duration to 2 seconds, drag the keyframe under the 3-second mark of the timeline to the 2-second mark as shown in Figure 3-12.

Figure 3-12. Reduce or increase the duration of an animation by moving keyframes.

That takes care of the first sequence in the animation. You are going to let your name remain static for about one-half second and then it will whirl off the stage. Here’s how:

6. Drag the playback head to the 2:10 mark on the timeline. 7. Twirl down the Animate Out folder in Animation & Presets. Select Text ➤ Animate Out and drag the Twirl Off Each Word preset onto your name as shown in Figure 3-13.

87

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 3-13. You use a simple drag-and-drop technique to apply animation presets to a selection.

8. If you go to the timeline and twirl down the Text strip, you will notice you now have an Animator 2 category. Click the Animator 2 and the Range Selector 1 twirlies to see the keyframes, as shown in Figure 3-14.

Figure 3-14. The Animate In and Animate Out sequences have their own animators in the timeline.

If you want to reduce the time between the two animations, simply Shift-click the two keyframes of the Animate Out sequence and drag them closer to the last keyframe of the Animate In sequence.

9. Trim the work area to the 6-second mark and export as a Flash SWF file.

88

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS

You may have noticed a few of the Animate In presets don’t have an Animate Out counterpart. For example, you may or may not have noticed there is not a Center Spiral preset, used in the first exercise in this chapter, in the Animate Out folder. Fear not. Flash to the rescue.

If you double-click the movie clip in the Flash Library, you will open its timeline. When you see the keyframes, select them all on the timeline and select Modify ➤ Timeline ➤ Reverse Frames. If you press the Return/Enter key, you will see the animation now works in reverse. Press Cmd+Z (Mac) or Ctrl+Z (PC) to undo the change. With this invaluable nugget of information, we think you can see how to animate the sequence out. All you need to do is to select all of the keyframes and either right-click (PC) or Ctrl-click (Mac) to open the context menu. Select Copy Frames. Select Frame 62 on the timeline, open the context menu, and select Paste Frames. The range will be added to the timeline. To finish up, simply select the new frames added to the timeline and select Reverse Frames. Instant Animate Out effect.

3

Creating a rich media Flash Video with animated text To this point in the chapter, you have discovered how easy it is to apply an animation preset to a single line of text. In this exercise, we deal with integrating the effect into an After Effects project. The premise is rather simple: you will create a rich media ad that will promote the book you are reading. The project scope is such that the ad can’t be more than 320 pixels high and 240 pixels deep. It must weigh in with a SWF file that is under 30K in size and contain user controls that allow the viewer to turn the video on and off. If you have made it to this point in the book, you know how to meet the technical specifications. The Flash project will use a video object to stream the video, and you will use ActionScript to give the user control of the video stream. Both of these techniques were presented in the previous chapter, so it isn’t necessary to add that to the exercise. What we will do, though, is show you a rather clever way of creating a very small FLV file that will load quickly and show you how to use Photoshop and Illustrator images in a Comp. Let’s start building an ad.

1. Download the files for this chapter and unzip the Ad_01.zip file. Inside the AD_01 folder are an Illustrator image named clouds.ai and a Photoshop image named background.tif.

2. Open After Effects and create a new Comp using these settings: Composition Name: MainComp Preset: Web Video Width: 320

89

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS Height: 240 Pixel Aspect Ratio: Square Pixels Frame Rate: 15 Resolution: Full Duration: 0:00:14:00

3. Import the background.tif image and drag it from the Project panel to the timeline.

Importing and manipulating Illustrator images in After Effects There is a lot you can do when you include Illustrator images in an After Effects project. Though this exercise just touches the surface, by the end of it, you will have a deeper appreciation of the creative possibilities open to you when these two applications team up.

1. Import the clouds.ai image from the AD_01 folder into the project. When you import an Illustrator image into an After Effects project, you will see a dialog box— as shown in Figure 3-15—that asks you how you want to treat the image. Your choices are as footage or as a Comp. Select Composition from the pull-down and click OK.

Figure 3-15. This dialog box starts the process of importing an Illustrator file into After Effects.

When the Illustrator file arrives in the Project panel, you will see that a new Comp, using the file name, has been added to the Project panel as well as a folder named CloudLayers. Inside this folder is a series of Illustrator images that really are nothing more than the images sitting on the six layers of the Illustrator document. If you double-click the Clouds Comp, you will also see each image in the folder has been placed onto its own layer in the Comp. This is an important feature to note. By turning the clouds image into a Comp and placing each image on its own layer, you can animate or otherwise manipulate each image in the Comp, and those changes will appear when the Clouds Comp is placed on the main timeline. Let’s do that right now . . .

90

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS 2. Drag the Clouds Comp from the Project panel to the timeline. Drag the Clouds comp layer above the background.tif layer. The first thing you will notice is the Comp is seriously larger than the stage. This needs to be fixed.

3. Click the Clouds Comp once in the timeline to select it and press the S key. This will open the Scale properties for the Comp. Change the Scale value to 50%. Even though you have scaled the clouds, they are still static. It is time to put them in motion. The neat thing about animating in After Effects is the application creates the motion based upon the values between the keyframes. Here’s how:

3

4. Double-click the Clouds Comp in the Project panel to open the Comp in the timeline. The last layer, Layer 1, is the blue sky. The other layers are the clouds.

5. Select the first layer—Layer 3—and press the P key to open the Position properties. You may have noticed the layers seem to be out of order. Not true. If you open the Illustrator document in Illustrator, you will see the layering order in After Effects is exactly the same as that in Illustrator. The After Effects timeline can become a pretty cluttered place when there are a lot of objects on the timeline. Though twirling down is one method of accessing properties, using the keyboard is a bit more efficient because only the property to be manipulated—in this case Position—appears under the strip.

The plan for this animation is to have the cloud in Layer 3 move right and down and then up and to the right. The really cool thing we are going to do is to have the cloud look like it is moving in a 3D space. Here’s how to do it by the numbers:

6. Click once in the 3D switch check box. You will see a small box appear in that layer. Now you can animate by the numbers.

7. Click the stopwatch in the Position property once. You will add a keyframe to the timeline. The three numbers are the X value, Y value, and the Z value. Use these settings: X: 151.5 Y: 151.4 Z: 0

8. Drag the playback head to the 2-second mark on the timeline and specify the following values: X: 175.6 Y: 141.3 Z: 298

91

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 9. Drag the playback head to the 14-second mark on the timeline and specify the following values: X: 295.5 Y: 91.4 Z: 0

That’s a lot of typing. Here’s a really fast way of doing it. Right-click (PC) or Ctrl-click (Mac) and you will see an Edit Value menu. Click it and the dialog box shown in Figure 3-16 will appear. Enter the values and click OK.

Figure 3-16. Layers can be positioned by the numbers by either changing the values on the timeline or using the Position dialog box.

10. Now that you know what to do, click the 3D switch for each layer containing a cloud and use these keyframe and position values: Layer

Keyframe

Position

Layer 4

0 seconds

67.7, 173.7, 0

14 seconds

493.5, 170.4, 0

0 seconds

493.5, 347.4, 0

2 seconds

376.9, 351.2, 541.1

14 seconds

191.5, 357.4, –267

0 seconds

457.5, 537.4, 0

14 seconds

665.5, 534.4, 0

0 seconds

156, 507, 0

14 seconds

420, 483, 0

Layer 5

Layer 6

Layer 2

92

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS If you drag the playback head across the timeline, you can see the clouds move. Those layers where there is a Z-axis value appear to grow and shrink depending upon whether they are approaching the viewer or moving away. Now that the clouds are done, let’s fix the fact that they seem to cover the background image.

11. Close the clouds panel to return to the main timeline and select the Clouds comp layer.

12. Click the Modes pull-down in the Clouds comp layer and select Silhouette Luma. The sky disappears and the background image is faintly visible as shown in Figure 3-17.

3

Figure 3-17. The Comp after the Silhouette Luma blend mode is applied to the Clouds comp layer

If you are a Photoshop, Flash 8, or Fireworks user, you are quite familiar with the blend modes. The one chosen here creates a silhouette over the background image by changing the luma values of the pixels in the Clouds comp layer. You see the clouds because the lighter pixels become more transparent than the darker pixels in the

Having completed the animation of the items in the background, we can now turn our attention to creating and animating the text that will appear over the background.

1. Click the Comp window once, select the Text tool, and enter the text a motion picture by. With the text selected, open the Character panel and use these settings: Font: Arial Style: Regular Size: 14 px Color: White

2. Change to the Selection tool and drag the text to a position just above the cloud in the bottom-left corner of the Comp window.

93

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 3. Open the Effects & Presets panel. Locate the Raining Characters Out preset in Text ➤ Animate Out and drag it onto the text.

4. Twirl down Text and Animator 1. Move the playback head to the 2-second mark on the timeline and drag the first keyframe to the playback head. Move the playback head to the 3-second mark and drag the second keyframe to the 3-second mark. The text will stay on screen for two seconds and then fall off of the bottom of the screen between seconds 2 and 3.

5. Select the Text tool and enter your name. When you open the Character panel, just change the size to 24 px. Drag your name to a point under the letter p in picture.

6. In the Animation & Presets panel locate the Evaporate preset—Text ➤ Blurs ➤ Evaporate—and drag it on top of your name.

Here’s a quick way of hunting for a preset. Instead of opening a bunch of folders, just enter the name of the preset into the text input area at the top of the Animations Presets panel. When you press the Enter/Return key, all of the presets containing that term will appear.

7. Twirl down your name in the timeline and then twirl down Text ➤ Evaporate Animator ➤ Range Selector 1. Place the keyframes at the 2-second and 3-second marks, respectively. If you click the RAM Preview button and then drag the playback

head across the timeline, you will see your name smudge out and evaporate (see Figure 3-18).

Figure 3-18. The Raining Characters Out and the Evaporate effects

8. Drag the Out points for both layers to the 7-second mark and drag your name layer under the other text layer. Save the file.

Combining animation effects In this next part of the exercise, you create a rather interesting “Matrix-like” effect. The letters of the words pour in from the top of the screen, form a phrase, hold for two seconds, and then pour off of the bottom of the screen.

94

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS 1. Click the Comp window, select the Text tool, and enter the text production assistant. In the Character panel, set the text size to 14 px. Drag this text layer under your name.

2. Set the In point for this layer to 3 seconds and set the Out point to 7 seconds. 3. In the Animation & Presets panel, twirl down Animation Presets ➤ Text ➤ Animate In. Locate the Raining Characters In preset and drag it on top of the text.

4. Twirl down the layer in the timeline and then twirl down Animator 1 ➤ Range Selector1. Drag the keyframes to the 3-second and 4-second marks.

3

5. Drag the playback head to the 6-second mark on the timeline and drag and drop the Raining Characters Out preset from the Animate Out folder onto the text.

6. In the timeline, twirl down its animator—Animator 2—and drag the second keyframe to the 7-second mark of the timeline. Twirl up the strip in the timeline.

7. Click the RAM Preview button and, when it passes the 7-second mark, click the Play button. The text, as shown in Figure 3-19, will rain into place, hold, and then rain out.

Figure 3-19. The exercise so far includes a number of effects including a Raining Characters Out effect.

8. Click the Comp window once, select the Text tool, and enter the text Tiago Dias. Set the size to 24 px in the Character panel and drag the text to a position just under the t in production.

9. In the timeline, set the In point for the new layer to 3 seconds and set the Out point to 7 seconds. Move the playback head to the In point and add the Evaporate effect to Tiago’s name. Move the playback head to the 5-second mark and add another Evaporate effect to Tiago’s name.

95

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 10. Open Animator 1 to see the keyframes of the animator’s Offset property for the first Evaporate effect. Move the second keyframe to the 4-second mark on the timeline. Twirl down Animator 2 on the timeline and switch the positions of the two keyframes in Animator 2. This has the effect of reversing the Evaporate effect to a fade out. After you switch the positions of the keyframes in Animator 2, drag the

first keyframe to the 5-second mark on the timeline and the second one to the 6second mark. Save the project.

11. Move the playback head to the 7-second mark on the timeline, select the Text tool, and enter the text Poetry in Motion. Set the size to 24 px.

12. Open the Animation & Presets panel. Select Animation Presets ➤ Text ➤ Organic and drag the Drop Bounce effect from the Organic folder onto the text.

13. Switch back to the Text tool and enter friendsofED. Set the size for this text to 14 px and, in the timeline, drag the text’s In point to the 8-second mark.

14. Drag the Boomerang effect from the Organic folder onto this text. 15. Rearrange your layers to match those in Figure 3-20 and save the project. If you do a RAM preview and click the Play button, you will see how carefully applying effects to text results in a rather interesting and engaging animation.

Figure 3-20. The layering and layer timing order so far

Now that the text is in motion, let’s add a little bit more interest to the project.

1. Click the Comp window once and select Layer ➤ New ➤ Solid to open the Solid Settings dialog box shown in Figure 3-21. Specify these values: Name: Gray Solid 2 Width: 320 Height: 99 Color: #666666

96

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS

3

Figure 3-21. Creating the solid

2. Drag this layer under the Tiago Dias layer and set its blend mode to Color Dodge. The result of this mode will be to lighten the solid and make it look somewhat transparent.

3. The solid will move down and back up the video as it is playing. Drag the solid to a position just above the Comp window.

4. Move the playback head to the 1-second mark of the timeline and twirl down the Gray Solid 2 layer. Twirl down Transition and click the stopwatch once in the Position

property to add a keyframe. Move the playback head to the 2-second mark and drag the solid to a point just under the bottom of the Comp window. This will result in a keyframe at this mark in the timeline and the motion is indicated by the dotted line running from the top to the bottom of the Comp.

5. Add a keyframe at the 5-second mark in the timeline. 6. Move the playback head to the 6-second mark of the timeline and drag the solid to a point just above the top of the Comp window.

7. Save the project. 8. With the project saved, add the Comp to the Render Queue by clicking the Comp once and selecting Composition ➤ Add to Render Queue.

9. Click the Render Queue tab and output the video using the following specifications: Format: QuickTime Compression Type: Video

10. Once you have rendered the QuickTime video, quit After Effects.

97

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Creating the FLV file The final step in this project is to create the FLV file that will be used in Flash. If you have been following this exercise rather closely, you may have noticed there is really no color in this video and there is no audio. This tells you that you can create a seriously small FLV file because you won’t need to add an audio stream and that a low video data rate will have a minimal effect upon the quality of the video. The other important point to keep in mind is the user is only going to be able to turn the video off and on. There is no jog control. This means you can let the Flash 8 Video Encoder determine the keyframe placement. Remember the further apart the keyframes, the lower the final file size. Let’s go to work:

1. Open the Flash 8 Video Encoder and add the video you just created to the queue. Click the Settings button to open the Flash Video Encoding Settings dialog box.

2. Click the Show Advanced Settings button to open the Advanced Settings area. 3. When the Advanced Settings area opens, specify the following values: Output filename: Ad_01 Video codec: ON2VP6 Frame rate: 15 Key frame placement: Automatic Quality: Custom Max data rate: 175

When you have entered these values, click OK to return to the Render Queue. Click the Start Queue button to create the FLV file.

At this point all you need to do is to open Flash and create a custom player (Chapter 2) that uses only a play and a pause button. The complete FLA and SWF files (shown in Figure 3-22) can be found in the Chapter 3 Exercise folder if you want to explore the code.

Figure 3-22. The project playing in the Flash Player

98

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS If you do explore the code, you may notice a new “chunk” of code that wasn’t covered in the previous chapter. The code block is ns.onStatus = function(info) { if (info.code == "NetStream.Play.Stop") { ns.seek(0); } } What this code does is to “loop” a video. When an FLV file plays through the Flash Player, it is sending status messages to the player. One of those messages essentially says, “I have reached the end of the FLV and the video is now stopped.” When the player detects this message, you can capture it and tell Flash to go back to the start of the video— ns.seek(0)—and to start playing the video again.

3

The buttons used to control the video in the Flash movie are the flat gray stop and flat gray play buttons that can be found in Window ➤ Common Libraries ➤ Buttons. When the panel opens, the buttons can be found in the playback flat folder.

Creating a motion graphics banner ad In this exercise, you will create a rather “snazzy” banner ad that will promote this book. This one is going to be a bit different because you will be working in a rather limited space. The ad is 728 pixels wide and only 90 pixels deep. This means you must make effective use of the space and catch the viewer’s attention. You will be doing this using a number of the text animation presets and through the use of some wiggles. Essentially a wiggle effect transforms the properties of the text it is applied to. The neat thing about this effect is it has certain randomness to it. It is both extremely powerful and effective. It is also able to produce effects that Flash can only do through the use of bruteforce ActionScript. The bottom line: judicious use of wiggles is more effective than overuse. Let’s sell a book.

1. Open the Banner.aep file found in the AD_02 folder in your Chapter 3 Exercise folder. As you can see in Figure 3-23, the interface has been somewhat constructed for you. The Actionscript_txt layer is animated, the other text layers and graphics are in place, and the layering order and In and Out points for the layers have been set. All you need to do is to add the effects.

99

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 3-23. The project is ready for you to finish.

To start, turn off the visibility of all of the layers above the NO ACTIONSCRIPT KNOWLEDGE layer.

2. Select the text in the Comp window and open the Effects & Presets panel. 3. Twirl down Animation Presets ➤ Text ➤ Miscellaneous and drag the Chaotic preset onto the text. When you release the mouse, the words will look like they have “exploded” as shown in Figure 3-24.

Figure 3-24. The Chaotic effect tends to explode text.

If you twirl down the layer and then twirl down Text, you will see how this effect works. The Position, Scale, Skew, and Rotation properties of the text have all had a wiggle applied to them. To see how a wiggle works, twirl down Wiggle Position and then Wiggly Selector 1. Essentially you can have text bend, move, blur, spin, and so on by simply giving it some parameters for the effect. Where the randomness comes in is how the effect is applied. The parameter is the outer limit, which means the effect can be applied to any letter in the group and it will change using any value up to the parameter value. For example, the phrase “NO ACTIONSCRIPT KNOWLEDGE” contains 23 letters. They are in a fixed position, but the Position parameter says the maximum distance each of the 23 letters can move is 50% of the start position. When the wiggle is applied, each letter will move any distance from 1% to 50% of its starting position, meaning one letter may move a short distance while the one beside it moves to the other side of the screen. The result is the explosion of letters that you see on the screen.

100

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS 4. If it isn’t already open, twirl down Wiggly Selector 1 under Wiggle Position. 5. Drag the keyframes in the Max Amount and Min Amount areas to the 1- and 2-second marks on the timeline. This keeps the animation confined to a second.

6. To clear the phrase off of the screen, move the playback head to the 3-second mark on the timeline, select the text in the Comp window and apply the Raining Characters Out preset to the text.

7. Twirl down Animator 1 and Range Selector 1. Drag the last keyframe in the Position property to the 4-second mark. Lock the layer and save the project.

3

8. Turn on the visibility of the JUST YOUR CREATIVITY layer. 9. Select the text and drag the Boomerang preset—Animation Presets ➤ Text ➤ Organic—onto the selected text.

10. Save the project. If you click the RAM Preview button, you will see that the Boomerang effect has your text come flying in from the front of the screen, move

to the back of the screen, and then return to the front of the screen to form the words.

Applying effects to images To this point in the chapter, we have been whirling and twirling text all over the screen. It isn’t only text that benefits from special effects. The next layer in the exercise contains the image of a lightbulb. The plan is to have the bulb light up. Here you will learn how to key a background color to remove it from an image and how to animate a Glow effect.

1. Turn on the visibility of the Lightbulb.tif layer. You can’t help but notice the image is sitting on a green background and that the bulb shown in Figure 3-25 looks somewhat dull.

Figure 3-25. A dull lightbulb is not exactly what we want.

2. Select the image on the stage and open the Effects & Presets panel. 3. Twirl down the Keying presets and drag the Color Key preset onto the image. When you release the mouse, this preset will appear in the Effect Controls panel.

4. This preset will be used to remove the green background of the image. In the Effect Controls panel, click the eyedropper tool in the Key Color area.

5. Roll the cursor onto the green area of the image in the Comp window and click the mouse. The green color, except for a thin edge around the object, will disappear and will also appear in the Color chip beside the eyedropper.

101

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS 6. To remove the edge, twirl down Color Tolerance and drag the slider that appears to the right until you see a value of 60. As you drag the slider, the green glow will start to disappear.

7. Twirl down Edge Thin and move the slider all the way to the right. What you have just done here is to enlarge the mask that is hiding the green color and increasing the transparent area.

8. If your settings and image resemble those shown in Figure 3-26, twirl up Color Key.

Figure 3-26. Color Key effects can be used to remove color backgrounds from images.

With the green color “keyed” out of the image, we can now concentrate on turning on the lightbulb.

1. In the Effects & Presets panel, twirl down the Stylize folder and drag the Glow preset onto the lightbulb. The first thing you will notice is the bulb has changed color. This is due to the default value for this effect which, if you look in the Effect Controls panel, is set to Color Channels. This isn’t exactly the effect we were hoping to obtain, but the default value gives us a clue as to how we can achieve our goal. When you are keying out the color of an image, you aren’t removing the color, you are masking it. If you are familiar at all with masking in Photoshop, you know that the mask is applied to the image through the use an alpha channel, which is a channel that essentially “sits under” the image. It is no different in After Effects, and understanding this opens up a huge world of possibilities in Flash Video that utilizes an alpha channel. (We are going to dig deeper into this whole area in the next chapter.)

2. Click the Glow Based On pull-down in the Effect Controls panel and select Alpha Channel. You will notice there is a bit of a glow that appears around the bulb.

3. Twirl down Glow Radius and drag the slider all the way to the right. The maximum value of 100 is acceptable but still doesn’t really do the job. The interesting thing about many of the maximum values you can apply to the various effect properties is that you can ignore them. Double-click the value in the Glow Radius area and change it from 100 to 164. The light, as shown in Figure 3-27, turns on! This is still not exactly what we are looking for. We want the bulb to light up in front of the viewer.

102

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS

3

Figure 3-27. Turning on a light with the Glow effect

4. On the timeline, twirl down Lightbulb.tif ➤ Effects ➤ Glow. 5. Drag the playback head to the 7-second mark on the timeline and add keyframes for Glow Radius and Glow Intensity. Set the Glow Radius value to 0.

6. Move the playback head to the 7.5-second mark and change the Glow Radius value to 164 and the Glow Intensity value to 1.7.

7. Save the project and click the RAM Preview button. You should see your lightbulb turn on.

If you want to turn effects on and off, click the icon beside the effect in the visibility area of the timeline. You can also turn effects on and off by clicking the Effects icon beside the effect in the Effect Controls panel.

8. Turn on the visibility of the POETRY IN MOTION layer. 9. Select the text and drop the Evaporate effect onto it. 10. Twirl down to Range Selector 1 for this layer and place the Offset keyframe at the In point of the layer and a second one at the 9-second mark.

11. Save the project. From here you should render out the video as a QuickTime movie using the Video codec. This file can then be converted to an FLV file using the Flash 8 Video Encoder. To keep the size of the Flash SWF file manageable, set the stage size of the Flash document to match the 728✕90 dimensions of the video. Place a video object on the stage, resize it to fit the dimensions of the video, and add the ActionScript that makes it play. Don’t forget to use the looping code presented earlier in the chapter to keep the video playing. The SWF animation can then be placed in an HTML page and uploaded to your web server as shown in Figure 3-28.

103

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

Figure 3-28. The project is playing through a browser.

The QuickTime video, FLA, FLV, and the SWF files can all be found in the Ad_02 folder inside the Completed folder of the Chapter 3 download.

After Effects motion graphics used as loaders for Flash movies Up to this point in the chapter, all of the examples have been used as video ads and so on. In this final section of the chapter, we answer a question that we commonly encounter: “Is that all they can be used for?” Based on the subhead for this section, the answer is, “Not really.” No matter how you approach it, a Flash movie sits on a straight line called the timeline, and all of the content in the movie has to load before the movie plays. That is a simplistic description of the linear basis of animation, but it is fairly close to the mark. Add navigation to the mix—either through buttons or ActionScript—and these movies become nonlinear. Instead of going to Frame 3 from Frame 2, the Flash playback head may be sent to Frame 15 and, when that frame finishes, the user is taken to Frame 3. The problem with that is one we have all encountered: a pause in the playback as the content loads into the frame, and the viewer has to sit and wait for that to occur. To avoid this nastiness, Flash developers will add loaders to their Flash movies that ensure the content is ready to play. These loaders can be anything from a graphic to a movie clip and, at their heart, they are a graphic indication that something really is happening when the movie first appears on the screen. This can take the form of a simple progress bar that grows to an After Effects motion graphic that plays and replays for as long as it takes to get the content loaded. Obviously, there are as many approaches to the subject of creating a loader as there are Flash developers. In this section, we give you a taste of what we mean by presenting three different ways of using a simple motion graphic that plays while a really large image loads into a Flash movie. Each of the authors will present one approach, and the third one has been prepared by a colleague, Joseph Balderson, who is a Flash developer based in Toronto, Canada. The bottom line here is no one cares how you create your loader. They only care that it works.

104

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS Before we dig into using an After Effects motion graphic as a loader, let’s create a very simple load bar that will familiarize you with the subject.

1. In Flash, open the Loader_01.fla file, which can be found in the Loaders folder of the Chapter 3 Exercise folder.

2. If you look at the timeline (as shown in Figure 3-29), you will see the movie is composed of three frames. Frames 1 and 2 have a white bar in them, and Frame 3 contains an overly large JPG image of an architectural detail from a Las Vegas hotel. The white bar, which is the Loader movie clip in the library, will be used as the loading progress indicator. Frames 1 and 2 will actually be the frames used to create the loader. The playback head will move between them until the JPG image in Frame 3 loads. When it loads, the playback head will jump from Frame 1 to Frame 3 and the image will appear.

3

Figure 3-29. The project requires only three frames, a movie clip, and one big, fat JPG image.

Why is the loader bar a movie clip? When manipulating objects on the Flash stage using ActionScript, an object’s properties, such as its width, height, and color, can be manipulated using code. The only objects that can be manipulated in this manner are movie clips.

Now that you know how the movie is constructed, let’s discuss how the whole thing works. Let’s assume the amount of data in the JPG that has to load is 100 bytes and that the length of the loader bar is 200 pixels. What has to happen when 50 bytes of the JPG have loaded is the bar must be 100 pixels long. What we need to do, therefore, is to keep an eye

105

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS on how much of the data in the JPG has loaded and have the length of the bar equal the percentage of the amount of data that has loaded so far. When the percentage equals 100%, the playback head is told to scoot over to Frame 3 and show us the JPG. How this loader works is not terribly complicated. Frame 1 is where the movie asks how much of the JPG has loaded, and Frame 2 is where the bar’s length is set to equal the percentage amount of data loaded so far.

3. Click once in Frame 1 of the Actions layer and open the ActionScript Editor by either selecting Window ➤ Actions or pressing the F9 key (PC) or Option+F9 (Mac).

4. Click once in the Script pane and enter the following code: if (getBytesLoaded() > 0 && getBytesLoaded() ➥ >= getBytesTotal()) gotoAndStop(3); In plain English, this line simply checks the number of bytes currently loaded for the movie (getBytesLoaded) and, if that value is greater than 0 and also greater than or equal to the bytes loaded so far (getBytesTotal), scoots the playback head over to Frame 3 and stays put (gotoAndStop(3)). This line of code, or a variation of it, is at the heart of the vast majority of the loaders in use today, and you will see it used throughout this book and other ActionScript sources.

5. Close the Script pane to return to the main timeline. Select Frame 2 of the Actions layer and enter the following code: mcLoader._xscale = (getBytesLoaded()/getBytesTotal()) * 100; gotoAndPlay(1); The first line is how the bar is sized. Let’s use real numbers from the explanation given earlier. We know the size of the movie is 100 bytes and that the width of the loader movie clip (mcLoader) is 200 pixels. Let’s also assume only a quarter of the movie has loaded at this point. Toss in those numbers and the code becomes mcLoader._xscale = (25/100) * 100 mcLoader._xscale = .25 *100 mcLoader._xscale = 25 At this point the loader bar is scaled to 25% of its width (._xscale), and the playback head is sent back to Frame 1 to start the process all over again. When the getBytesLoaded() value is 200 bytes or more, the playback head is sent to Frame 3 instead of Frame 2.

6. Save the movie and press Ctrl+Enter (PC) or Cmd+Return (Mac) to test the movie. Testing locally is a bit of a tricky process. If you test the movie and immediately see the JPG image, press the Ctrl+Enter or Cmd+Return keys once more. You should now see the loading process shown in Figure 3-30. Remember, your hard drive is not exactly a web connection, and things happen a lot faster on a computer. Pressing the keys again actually simulates the loading progress you would see in a dial-up modem.

106

MOTION GRAPHICS AND THE PRESET TEXT EFFECTS IN AFTER EFFECTS

3

Figure 3-30. The loader in action

A frame-based loader Now that you understand how a loader works, let’s look at a couple of ways of using the After Effects animation presets to add a bit more zip to your movie than a simple bar growing on the screen. In this example, you won’t be checking to see how many bytes have loaded. Instead you will be telling Flash to keep an eye on how many frames have loaded.

1. Open the Loader_02.fla file in your Chapter 3 Exercise folder. 2. Click the first frame of the Actions layer and open the ActionScript Editor. 3. Click once in the Script pane and enter the following code: onEnterFrame = function () { if (_framesloaded