Flash MX Studio

Dennis Baldwin Jamie Macdonald

Keith Peters Jon Steer

David Tudury Jerome Turner Steve Webster

Alex White Todd Yard

Additional material to this book can be downloaded from http://extras.springer.com

/

Flash MX Studio © 2002 Springer Science+Business Media New York

Originally published by Friends of ED in 2002

All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

The authors and publisher have made every effort in the preparation of this book to ensure the accuracy of the information. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, friends of ED nor its dealers or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book.

Reprinted October 2002

Trademark Acknowledgements

ISBN 978-1-59059-188-8 ISBN 978-1-4302-5166-8 (eBook) DOI 10.1007/978-1-4302-5166-8

/

Flash MX Studio

Credits

Authors Author Agent Dennis Baldwin Chris Matterface

Jamie Macdonald Keith Peters Project Manager

Jon Steer Simon Brand David Tudury

Jerome Turner Technical Reviewers Steve Webster Sally Cruikshank

Alex White Steve Kirby Todd Yard Steve McCormick

Mike Pearce Additional Material Jon Steer

Kristian Besley Steve Webster Steven Williams

Commissioning Editor Jim Hannah Indexer

Fiona Murray Graphic Editor

Ty Bhogal Proofing Cathy Succamore

Editors Adam Dutton Managing Editor

Caroline Robeson Ben Huczek James Robinson

Gavin Wray

/

Flash MX Studio

Alex White: Coming from a Fine Art background, Alex once did 'arty' things with Director and obscure Mac 3D modelling programs, before selling out and moving to the big city making fancy Flash web sites for companies who could afford it. He has recently combined creative forces with fellow 'Messenger Buddy' Jez Turner for their 'ground-breaking' Flatpack Media venture.

Thanks go out to Jez at the 'Poole office', Claire for the countless hearty meals, and mum for her moral support.

David Tudury: David discovered Flash while interning in San Francisco three years ago. Since then he's worked in advertising, plug-in development, and online-gaming. The volatile economy quickly added some breadth to his experience. He's used Flash for simple animations, web sites, video games, and as a presentation layer for N-tier web applications. Mostly though, he just likes playing with it (www.outmoded.com is his playground).

"I need to thank Aaron Piland of www.apakstudio.com for the terrific portrait, Michael Montagna for helping with possible XML examples, Adam Dutton who edited (fixed) this chapter, Keith Peters who got me this opportunity, the other good folks at www.were-here.com, and Regina, my fiance, for understanding that computer people aren't supposed to sleep at night."

Dennis Baldwin: Dennis' main focus is to stay on top of technology and find exciting new ways to push the envelope of web development. He currently maintains a couple of online resources for Flash and ColdFusion developers at www.flashcfm.com and www.devmx.com. He is also the lead developer for Eternal Media (www.eternal-media.com), a web and multimedia firm that offers technology solutions for ministries and non-profit organizations. When he's not in front of the computer screen, Dennis mainly spends time with his wife Jamie or can be found skating around the streets of Dallas with his friends.

Jamie Macdonald; Jamie Macdonald works at Relevare in London. When he finds time he updates his own site www.nooflat.nu.

Author Biographies

Jerome Turner: comes from Leighton Buzzard where his first cinematic experience was watching Tom and jerry beat the hell out of each other on his parent's woodchip wallpaper. He then studied Art at Bedford College where he learnt that photography was cool because you could visit the Fine Art department whilst your films were drying. Following this he travelled to Exeter, wouldn't touch the cider, but did wander off with a degree in Media ArtsNisual Arts, which involved a lot of photocopying and pointing cameras at people who didn't really enjoy being filmed.

Since then he's moved to Poole with his long-suffering partner Claire and worked on a number of film and video productions as a production assistant, camera operator, script writer, boom operator, 1st AD, runner, producer, and director. Sometimes when he's very bored he goes to the boating lake to film Canadian geese.

Jon Steer: jon has been working as a web developer for nearly five years after graduating from Durham University with a degree in Economics. He is Technical Director of Durham Associates Ltd (www.da-group.co.uk), a marketing communications company in the north-east of England and admits to being far happier working with code than with pretty pictures! His main focus is server­side technologies, especially PHP and mySQL, and is always looking for different ways to put these to work. jon lives near Durham with his wife and two daughters to whom special thanks go for their enormous support and encouragement.

Keith Peters: lives in Lynn, Massachusetts with his wife Kazumi. He's been using Flash on and off for nearly three years now, but far more heavily in the last year. His personal site, www.bit-101.com, launched in August 2001 and he strives to keep up with the experiment-a-day schedule. It features fairly simple graphics, usually relying on math and scripting to build complex forms and movements.

Steve Webster: propeller beanie hat firmly in place, spends most of his time tinkering with scripting, backend, and Flash technologies, or writing about tinkering with scripting, backend, and Flash technologies. Being clearly masochistic in nature, he's been programming since he was knee-high to a grasshopper and can currently be found plotting his route to world domination. Mwahahaha ...

As always, I owe a great debt to my girlfriend Nicki for her saint-like patience while I was once again "that bloke locked away upstairs". Thanks also to the fantastic team at friends of Ed -you rock!

Flash MX Studio

Todd Yard: After studying and working for seven years as an actor, Todd was introduced to Flash in 2000 and was quickly taken by how it allowed for both stunning creativity and programmatic logic application -a truly left-brain, right­brain approach to production - and has not looked back. He now works as Creative Director for Daedalus Media in New York City, which specializes in the creation of Flash-based corporate presentations, primarily for clients in the investment banking industry. His more frivolous work and experimentation can be found at his personal web site www.27Bobs.com.

Table of Contents

Introduction 1

Macromedia Flash MX: The Lay of the Land .......................................................... 1 Flash MX Studio: not for the faint-hearted ...................................................... 1 What's on the CD? .................................................................................................. 2 Layout conventions .................................................................................................. 2 Start building this movie ......................................................................................... .3 Support ....................................................................................................................... .4

section 1: Site Presentation

chapter 1: Motion 7

Easing out .......................................................................................................................... 8 Making a movie clip move with easing .............................................................. 8 Initiating motion with a mouse click ................................................................ 11 Adding a trail to an object's motion .................................................................. 12

Making the trail fade ...................................................................................... 13 Frame-based motion .................................................................................................... 16

Constant velocity .................................................................................................... 17 Swinging motion ...................................................................................................... 18 Scale in motion ........................................................................................................ 24

Managing the motion .................................................................................................. 26 Using empty movie clips ...................................................................................... 28 Picture navigator ...................................................................................................... 33

Summary .......................................................................................................................... 39

chapter 2: Formatting Text 41

Creating our own text effects ................................................................................... .41 Creating a typewriter effect ............................................................................... .42 Setlnterval .................................................................................................................. 45

Creating a text field dynamically .............................................................................. 47 Typing in ................................................................................................................... .49

A note on prototypes .................................................................................................. 56 Working with textFormat ............................................................................................ 51

Using setTextFormat. ............................................................................................... 57 Application of technique ............................................................................................ 61

Converting Strings .................................................................................................. 64 Advanced text effects .................................................................................................. 67

Calculating the width of a string ........................................................................ 68 Obtaining character positions ...................................................................... 69

Obtaining further data .......................................................................................... 69 Using the character positions ...................................................................... 72

Using character data for a text fade .................................................................. 73 Further possibilities ...................................................................................................... 76

Creating a random fade ........................................................................................ 76 Enhancing the picture navigation interface .......................................................... 78

Dynamically positioning images and adding text effects ............................ 79 Summary .......................................................................................................................... 87

Flash MX Studio /

chapter 3: Drawing API 89 Drawing a straight line ................................................................................................ 89 Drawing a curved line .................................................................................................. 91 Adding fills ...................................................................................................................... 95 Adding gradient fills .................................................................................................... 96 A draw square function .............................................................................................. 98 A draw circle function .............................................................................................. 1 01 Drawing a curve through a specified point ........................................................ 1 03 Making a sample application .................................................................................. 1 08

Drawing .................................................................................................................. 1 08 Shared objects ...................................................................................................... 11 0 Using a shared object .......................................................................................... 111 Saving our picture data ...................................................................................... 112 The fully functioning drawing application .................................................... 114

Summary ........................................................................................................................ 121

chapter 4: Components 123

The guts of a component ........................................................................................ 124 Tooltip basics .......................................................................................................... 125

Live preview .................................................................................................................. 133 Setting up a live preview .................................................................................... 134

What we want our tooltip to do ............................................................................ 136 Making a tooltip appear on rollover .............................................................. 138 Dynamically changing the text inside the tooltip ........................................ 142 Adding an enabled property .............................................................................. 144 Attaching the tooltip dynamically to a movie clip ...................................... 146 Preserving the original button actions ............................................................ 148 Adding the final requirements for the tooltip .............................................. 152

Extra button interactivity: retrieving alpha and brightness settings with Color.setBrightness .............................................................................. 155

Building our own button component ............................................................ 157 Summary ........................................................................................................................ 161

chapter 5: Taking Things Further 163

The Stage object ........................................................................................................ 163 Resizing the stage with the Stage object ........................................................ 164 More efficient resizing ........................................................................................ 170 Applying motion when the stage is resized .................................................. 173

XML ................................................................................................................................ 185 An XML loader ...................................................................................................... 191 Building the XML loader ...................................................................................... 194 Preloading the pictures ........................................................................................ 205 Displaying the photographs ................................................................................ 213

Summary ........................................................................................................................ 219

Table of Contents

section 2: ActionScript Interfaces

chapter 6: Introduction to Events and Handlers 221

Some basic definitions .............................................................................................. 221 Deleting event handlers ............................................................................................ 225 Changing event handlers .......................................................................................... 226

Passing parameters to event handlers .......................................................... 227 Event driven programming ...................................................................................... 228

Other events .......................................................................................................... 228 Button event handler .......................................................................................... 230

Keyboard event handlers .......................................................................................... 233 Event listeners ...................................................................................................... 233 Creating a Simple Game ...................................................................................... 235

Watches ............................................................................................................ 247 Summary ........................................................................................................................ 2S1

chapter 7: Advanced Collision Detection 253 hitTest ............................................................................................................................ 253

Bounding boxes .................................................................................................... 254 Using shapeFlag .................................................................................................... 255 Using the different types of hitTest ................................................................ 257

Mathematical collision detection .......................................................................... 259 Bouncing ball .......................................................................................................... 259 World cup pong .................................................................................................... 264

Distance-based movie clip to movie clip collision detection .......... 272 Look at the size of that thing .................................................................... 274 Multiple object collision ............................................................................ 277

Handling multiple objects in an array ............................................................ 278 Summary ........................................................................................................................ 283

chapter 8: Flash Math and Physics 287 Introducing trigonometry ........................................................................................ 287

Circular motion ...................................................................................................... 290 You looking at me? .............................................................................................. 293

Motion basics .............................................................................................................. 295 Uniform speed ........................................................................................................ 297 Acceleration .......................................................................................................... 299 Do you want to go faster? .................................................................................. 299 Gravity ..................................................................................................................... .301 Project #1: Asteroids ........................................................................................... .302

Springs ............................................................................................................. .320 Coordinate rotation ..................................................................................... .325

Ships in flight ......................................................................................................... .327 Project #2: Bounce ............................................................................................... .329

Summary ........................................................................................................................ 339

Flash MX Studio

chapter 9: Animation and lnteractivity with the Drawing API 343

Coded line drawing ................................................................................................... .343 Chaos lines ............................................................................................................. .344

Animating drawings ................................................................................................... .346 Cel generator ......................................................................................................... .347 Frame-by-frame animation ................................................................................ 350 Coded tweens ...................................................................................................... 352 Morphing fruit ....................................................................................................... .353

Gradients ..................................................................................................................... .359 linear gradients ..................................................................................................... .360 Radial gradients ..................................................................................................... .362 Dynamic color palette ......................................................................................... .365

Transformation matrix ............................................................................... .378 Gradient transform 1: sunrise blues ............................................................... .381 Gradient transform 2: rotation .......................................................................... 382 Gradient transform 3: fading gradients ......................................................... .384

Summary ....................................................................................................................... .386

chapter 10: 30 with the drawing API 389 Methods for 3D ......................................................................................................... .389

Pre-rendered ................................................................................................. .389 Approximated illustrations ....................................................................... .390 Real-time 3D ................................................................................................. .390

3D concepts reviewed ............................................................................................. .390 Axes ................................................................................................................. .391 Vertex .............................................................................................................. 391 Depth ................................................................................................................ 391 Vectors ........................................................................................................... .392 Matrices .......................................................................................................... 392

Coding the cube ......................................................................................................... .392 Setting the vertices ............................................................................................. .393 Adding mesh lines ................................................................................................. .395

Transformation matrices ........................................................................... .398 Depth sorting ............................................................................................................. .404

Filling the sides ..................................................................................................... .405 Backface culling .......................................................................................................... 407

Rendering only the necessities .......................................................................... 409 lighting polygons ....................................................................................................... .411

lighting the cube .................................................................................................. 411 Summary ........................................................................................................................ 417

chapter 11: Case Study: SphereCage 419

Concept ......................................................................................................................... .420 The 1% ........................................................................................................................... .421

Reflection map ..................................................................................................... .421 SphereCage: media ............................................................................................. .424

Table of Contents

The code ....................................................................................................................... .426 The SphereCage interface ................................................................................. .427 Master Classes ....................................................................................................... .431 Exploring inheritance ........................................................................................... .438 Game functions and object instantiation ..................................................... .448

Developing SphereCage further ............................................................................ 460 Summary ........................................................................................................................ 461

section 3: Rich Media 463

chapter 12: Dynamic Graphics 467 Optimizing JPEGs ....................................................................................................... .467 Optimizing JPEGs with Fireworks MX ...................................................................... 468 Loading JPEGs ............................................................................................................. .472

Flatpack sleeve designs ....................................................................................... .472 Preloaders ....................................................................................................... .475 Coding the Flatpack designs and photography .................................. ..477

Random backdrop ............................................................................................... .484 Bracken photo diary ................................................................................................. .487

Constructing the photo diary ............................................................................ 488 Calendar buttons .................................................................................................. 489

Summary ....................................................................................................................... .491

chapter 13: Video 493 Digital video basics ................................................................................................... .494

Exporting from Quicklime Pro ......................................................................... .496 Importing video into Flash ...................................................................................... 498

Optimization with Sorenson Spark ................................................................. .499 MX video test ....................................................................................................... .502

Controlling video in Flash ........................................................................................ 503 Banthacontroller .......................................................................................................... 504

Stage ................................................................................................................ 505 Video ............................................................................................................... .505 Buttons ........................................................................................................... .505 Library .............................................................................................................. 506 Actions ............................................................................................................ 506 Creating rewind and fast forward controls ......................................... .507 Broadband Banthafodder .......................................................................... 512

Flatpack video ............................................................................................................. .514 Video menu components: the Slipshod tour diary .................................... 520 Manipulating video: video playground ........................................................... .522

Summary ........................................................................................................................ 528

chapter 14: Audio 531

Non-streaming audio ................................................................................................ 532 Streaming audio .......................................................................................................... 532

Encoding MP3s using iTunes ........................................................................... .533

Flash MX Studio /

Loading MP3s into Flash .......................................................................................... 534 Flatpack MP3 .......................................................................................................... 535

File management ........................................................................................................ 540 Backing theme ........................................................................................................ 541 Mute ......................................................................................................................... .546

Summary ........................................................................................................................ 547

section 4: Dynamic Data Integration 551

chapter 15: Working with external files 551

The text file .................................................................................................................. 551 The functions .............................................................................................................. 554

loadVariables ................................................................................................. .554 loadVars .......................................................................................................... 557

Multiple variables ........................................................................................................ 560 Updateable marquee ............................................................................................ 560 Updateable navigation bar ................................................................................ 563

Putting it all together ................................................................................................ 566 Easily updateable site .......................................................................................... 566

Summary ...................................................................................................................... 570

chapter 16: Dynamic Flash: PHP 573

History 101 .................................................................................................................... 573 Two servers of Verona .............................................................................................. 574 Installing PHP ................................................................................................................ 576 PHP in action ................................................................................................................ 576

Recap, cap'n ................................................................................................... .577 Another message of the day .............................................................................. 578

PHP for the masses .................................................................................................... 582 Creating a simple e-mail application ................................................................... .584

Designer application .................................................................................... 585 Funky button component ahoy ....................................................................... .586 Da Flash Moo-Vee ................................................................................................ 591 And Now for something completely PHP ...................................................... 602

Trouble and strife ........................................................................................ 604 Where to go from here .............................................................................. 605

Summary ........................................................................................................................ 605

chapter 17: XML 609 What is XML? ................................................................................................................ 61 0

Tags and elements ........................................................................................ 61 0 Attributes ........................................................................................................ 611 Why use attributes when a bit of content would do? ...................... 611 Nodes .............................................................................................................. 612 Declarations .................................................................................................... 612 Comments ...................................................................................................... 612

Well-formed XML ........................................................................................................ 613

Table of Contents

Error message ................................................................................................ 614 Nesting ............................................................................................................ 614 White space .................................................................................................... 615

Naming .................................................................................................................... 615 Styling XML content .................................................................................................. 616

Default style sheet .............................................................................................. 616 Attaching style sheets to XML documents .................................................... 616

Valid XML ...................................................................................................................... 619 Accessing XML from Flash ........................................................................................ 619

Updateable marquee revisited .......................................................................... 621 Dynamic XML driven content .................................................................................. 624

Creating a browser in Flash with PHP and XML .......................................... 625 Summary ........................................................................................................................ 633

chapter 18: Flash, ColdFusion and Remoting 635 Getting started with ColdFusion ............................................................................ 636

The basics ........................................................................................................ 636 Message of the day using ColdFusion .................................................... 639

Flash Remoting ............................................................................................................ 640 Setting yourself up for Remoting ............................................................ 642

PMA contacts application .................................................................................. 642 The database .................................................................................................. 643 The components .......................................................................................... 645

Getting contacts .................................................................................................... 6SO Adding user interaction .............................................................................. 652

Selecting contacts .................................................................................................. 653 Adding contacts .................................................................................................... 655 Updating contacts ................................................................................................ 659 Delete contacts ...................................................................................................... 661

Summary ........................................................................................................................ 663

Index 665

j