Làm hoạt hình flash với Actionscript 3
In this book, you’ll learn All the ActionScript 3.0 (including math and trigonometry functions) and Flash rendering techniques you'll need to start animating with code Basic motion principles such as velocity, acceleration, friction, easing, and bouncing How to handle user interaction via the keyboard and mouse Advanced motion techniques such as springs, coordinate rotation, conservation of momentum, and forward and inverse kinematics All the basic 3D concepts you need to do 3D in Flash, from simple perspective to full 3D solids complete with backface culling and dynamic lighting Foundation ActionScript 3.0 Animation: Making Things Move! F lash has long been one of the most approachable, user-friendly tools for creating web-based animations, games, and applications. This has contributed to making it one of the most widely used programs for creating interactive web content. With each new version of Flash, ActionScript, its built-in scripting language, has become more powerful and a little more complex, too. ActionScript, now at version 3.0, has significantly matured as a programming language, bringing power and speed only previously dreamed about to Flash-based animation, going far beyond traditionally used keyframes and tweens. The material inside this book covers everything you need to know to harness the power of ActionScript 3.0. First, all the basics of script-based animation and setting up an ActionScript 3.0 project are covered. An introduction to object-oriented programming follows, with the new syntax, events, and rendering techniques of ActionScript 3.0 explained, giving you the confidence to use the language, whether starting from scratch or moving up from ActionScript 2.0. The book goes on to provide information on all the relevant trigonometry you will need, before moving on to physics concepts such as acceleration, velocity, easing, springs, collision detection, conservation of momentum, 3D, and forward and inverse kinematics. In no time at all you'll both understand the concepts of scripted animation and have the ability to create all manner of exciting animations and games. ACTIONSCRIPT 3.0 ANIMATION this print for reference only—size & color not accurate spine = 1.072" 568 page count Peters FOUNDATION Find all the formulas and techniques you’ll need to create dynamic scripted animation, including real-world physics Covers ActionScript 3.0 object-oriented techniques Supports the Flash IDE, Flex Builder 2, and the free Flex 2 SDK Also Available US $39.99 Mac/PC compatible www.friendsofed.com ISBN-13: 978-1-59059-791-0 ISBN-10: 1-59059-791-5 9 781590 597910 5 3 9 9 9 SHELVING CATEGORY 1. FLASH Keith Peters Foreword by Aral Balkan ActionScript 3.0 Animation Foundation Making Things Move! Foundation ActionScript 3.0 Animation Making Things Move! Keith Peters 7915FM.qxd 3/6/07 2:00 PM Page i Lead Editor Chris Mills Technical Reviewer Todd Yard Editorial Board Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Jeff Pepper, P aul Sarknas, Dominic Shakeshaft , Jim Sumser , Matt Wade Project Manager | Production Editor Laura Esterman Copy Edit Manager Nicole Flores Copy Editors Nicole Flores, Ami Knox Assistant Production Director Kari Brooks-Copony Compositor Dina Quan Artist April Milne Proofreader April Eddy Indexer John Collin Cover Image Designer Corné van Dooren Interior and Cover Designer Kurt Krames Manufacturing Director Tom Debolski Foundation ActionScript 3.0 Animation: Making Things Move! C opyright © 2007 by Keith Peters All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, i ncluding photocopying, recording, or by any information storage or retrieval system, without the prior written permission o f the copyright owner and the publisher. I SBN-13 (pbk): 978-1-59059-791-0 ISBN-10 (pbk): 1-59059-791-5 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 T rademarked 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 orders-ny@springer-sbm.com, 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 info@apress.com, 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 author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section. Credits 7915FM.qxd 3/6/07 2:00 PM Page ii To Kazumi and Kristine, who again put up with me doing this whole writing-a-book thing. Just a few dozen more, at most. 7915FM.qxd 3/6/07 2:00 PM Page iii iv Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii About the Cover Image Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv PART ONE ACTIONSCRIPTED ANIMATION BASICS . . . . . . . . . . 1 Chapter 1 Basic Animation Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Chapter 2 Basics of ActionScript 3.0 for Animation . . . . . . . . . . . . . . . 13 Chapter 3 Trigonometry for Animation . . . . . . . . . . . . . . . . . . . . . . . 51 Chapter 4 Rendering Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 PART TWO BASIC MOTION . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Chapter 5 Velocity and Acceleration . . . . . . . . . . . . . . . . . . . . . . . . 121 Chapter 6 Boundaries and Friction . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Chapter 7 User Interaction: Moving Objects Around . . . . . . . . . . . . . 173 CONTENTS AT A GLANCE 7915FM.qxd 3/6/07 2:00 PM Page iv PART THREE ADVANCED MOTION . . . . . . . . . . . . . . . . . . . . . 187 Chapter 8 Easing and Springing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Chapter 9 Collision Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Chapter 10 Coordinate Rotation and Bouncing Off Angles . . . . . . . . . 249 Chapter 11 Billiard Ball Physics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Chapter 12 Particle Attraction and Gravity . . . . . . . . . . . . . . . . . . . . 305 Chapter 13 Forward Kinematics: Making Things Walk . . . . . . . . . . . . 323 Chapter 14 Inverse Kinematics: Dragging and Reaching . . . . . . . . . . . 349 PART FOUR 3D ANIMATION . . . . . . . . . . . . . . . . . . . . . . . . . . 373 Chapter 15 3D Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Chapter 16 3D Lines and Fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Chapter 17 Backface Culling and 3D Lighting . . . . . . . . . . . . . . . . . . 451 PART FIVE ADDITIONAL TECHNIQUES . . . . . . . . . . . . . . . . . . 471 Chapter 18 Matrix Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Chapter 19 Tips and Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 v 7915FM.qxd 3/6/07 2:00 PM Page v 7915FM.qxd 3/6/07 2:00 PM Page vi Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii About the Cover Image Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv PART ONE ACTIONSCRIPTED ANIMATION BASICS . . . . . . . . . . 1 Chapter 1 Basic Animation Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . 3 What is animation? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Frames and motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Frames as records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Programmed frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Dynamic vs. static animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Chapter 2 Basics of ActionScript 3.0 for Animation . . . . . . . . . . . . . . . 13 Basic animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 A note on ActionScript versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Classes and OOP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 A basic class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Inheritance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 A MovieClip/Sprite subclass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Creating your document class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 vii CONTENTS 7915FM.qxd 3/6/07 2:00 PM Page vii Setting up an ActionScript 3.0 application . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Using the Flash CS3 IDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Using Flex Builder 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Using the free command-line compiler . . . . . . . . . . . . . . . . . . . . . . . . . . 23 A note on tracing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Scaling the movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Animating with code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Looping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Frame loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Clip events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Events and event handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Listeners and handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Events for animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 The display list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Subclassing display objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 User interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Mouse events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Mouse position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Keyboard events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Key codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Chapter 3 Trigonometry for Animation . . . . . . . . . . . . . . . . . . . . . . . 51 What is trigonometry? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Angles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Radians and degrees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Flash’s coordinate system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Triangle sides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Trig functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Sine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Cosine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Tangent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Arcsine and arccosine. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Arctangent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Waves. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Smooth up and down motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Linear vertical motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Pulsing motion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 W aves with two angles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Waves with the drawing API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Circles and ellipses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Circular movement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Elliptical movement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Pythagorean Theorem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Distance between two points. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 CONTENTS viii 7915FM.qxd 3/6/07 2:00 PM Page viii Important formulas in this chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Calculate basic trigonometric functions . . . . . . . . . . . . . . . . . . . . . . . 80 Convert radians to degrees and degrees to radian . . . . . . . . . . . . . . . . . 80 Rotate to the mouse (or any point) . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Create waves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Create circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Create ovals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Get the distance between two points . . . . . . . . . . . . . . . . . . . . . . . . . 81 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Chapter 4 Rendering Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Colors in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Using hexadecimal color values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Transparency and 32-bit color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 New number types: int and uint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Combining colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Extracting component colors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 The Drawing API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 The graphics object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Removing drawing with clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Setting line appearance with lineStyle. . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Drawing lines with lineTo and moveTo . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Drawing curves with curveTo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Curving through the control point . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Creating multiple curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Creating shapes with beginFill and endFill. . . . . . . . . . . . . . . . . . . . . . . . 100 Creating gradient fills with beginGradientFill . . . . . . . . . . . . . . . . . . . . . . 101 Specifying the fill type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Setting the colors, alphas, and ratios . . . . . . . . . . . . . . . . . . . . . . . . 102 Creating the matrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Color transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Changing colors with the ColorTransform class . . . . . . . . . . . . . . . . . . . . . 105 Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Creating a filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Animating filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Loading and embedding assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Loading assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Embedding assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Important formulas in this chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Convert hex to decimal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Convert decimal to hex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Combine component colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Extract component colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Draw a curve through a point . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 CONTENTS ix 7915FM.qxd 3/6/07 2:00 PM Page ix . ActionScript 3. 0 Animation Foundation Making Things Move! Foundation ActionScript 3. 0 Animation Making Things Move! Keith Peters 7915FM.qxd 3/ 6 /07 2 :00 . Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 100 13. Phone 1- 800 -SPRINGER, fax 201 -34 8-4 505 , e-mail orders-ny@springer-sbm.com,