List of Figures

Chapter 1: Basic Animation Concepts

Figure 1-1: A series of still photographs by Eadweard Muybridge

Figure 1-2: The legendary gabocorp.com intro

Figure 1-3: Intro for rayoflight.com

Chapter 2: Basics of ActionScript for Animation

Figure 2-1: Converting to a movie clip

Figure 2-2: Naming the instance

Figure 2-3: Frame-by-frame animation

Figure 2-4: Rendering frames , then displaying

Figure 2-5: Scripted animation

Figure 2-6: Why you cant animate with a for loop

Figure 2-7: Timeline for a frame loop

Figure 2-8: Frame loop with initialization frame

Figure 2-9: The Actions panel shows where the code is going

Figure 2-10: Setting export properties

Figure 2-11: Randomly attached particles

Figure 2-12: Specifying your class path

Chapter 3: Trigonometry for Animation

Figure 3-1: Two lines form four angles

Figure 3-2: Radians and degrees

Figure 3-3: Standard coordinate system

Figure 3-4: Flashs coordinate system

Figure 3-5: Usual angle measurements

Figure 3-6: Flashs angle measurements

Figure 3-7: The parts of a right triangle

Figure 3-8: The sine of an angle is the opposite leg/ hypotenuse

Figure 3-9: The same triangle in Flash coordinate space

Figure 3-10: The cosine of an angle is the adjacent leg/hypotenuse.

Figure 3-11: Looking at the opposite angle

Figure 3-12: The tangent of an angle is the opposite leg/adjacent leg.

Figure 3-13: Angles in four quadrants

Figure 3-14: Two ways of measuring an angle

Figure 3-15: Making the arrow symbol

Figure 3-16: Computing the rotation

Figure 3-17: A sine wave

Figure 3-18: Values of sine

Figure 3-19: A cosine wave

Figure 3-20: Positions of an object as it moves around a circle

Figure 3-21: A right triangle

Figure 3-22: What is the distance between the two objects?

Figure 3-23: Turn it into a right triangle.

Chapter 4: Rendering Techniques

Figure 4-1: Multiple curves, the wrong way. You can plainly see where one curve ends and the next begins.

Figure 4-2: Multiple curves with midpoints

Figure 4-3: Smooth multiple curves

Figure 4-4: Multiple closed curves

Figure 4-5: Linear fills

Figure 4-6: A radial fill

Figure 4-7: Before and after setRGB (trust me, this is purple)

Chapter 5: Velocity and Acceleration

Figure 5-1: A few vectors

Figure 5-2: Negative velocity is really velocity in the opposite direction.

Figure 5-3: If vectors have the same magnitude and direction, they are the same. Position doesnt matter.

Figure 5-4: A magnitude and a direction

Figure 5-5: Magnitude and direction mapping becomes a right triangle.

Figure 5-6: Vector addition

Figure 5-7: Velocities as vectors

Figure 5-8: Behold the future of space travel.

Figure 5-9: Beware of flame.

Chapter 6: Boundaries and Friction

Figure 6-1: This ball isnt fully off stage, but it will be removed.

Figure 6-2: This ball is completely off stage and can be safely removed.

Figure 6-3: This ball is just slightly off stage, but it needs to bounce.

Figure 6-4: The ball has been repositioned to be exactly against the boundary.

Figure 6-5: This technique isnt perfect, but is quick, easy, and close enough for most situations.

Chapter 7: User InteractionMoving Objects Around

Figure 7-1: Two overlapping movie clips with mouse event handlers. Only the top one receives the event.

Figure 7-2: The ball has been dragged to a new position. The velocity is the distance from its last position to this new position.

Chapter 8: Easing and Springing

Figure 8-1: Basic easing

Figure 8-2: Springing from the mouse, with a visible spring

Figure 8-3: Chained springs

Figure 8-4: Multiple springs

Figure 8-5: Offsetting a spring

Figure 8-6: Two objects connected by a spring

Figure 8-7: Three objects connected by a spring

Chapter 9: Collision Detection

Figure 9-1: A bounding box

Figure 9-2: Which ones are touching?

Figure 9-3: Not what you expected?

Figure 9-4: The distance of a collision

Figure 9-5: The distance of a collision of two different sized objects

Figure 9-6: Collision-based springing

Figure 9-7: Multiple-object collision

Chapter 10: Coordinate Rotation and Bouncing Off Angles

Figure 10-1. Rotating coordinates

Figure 10-2: A ball hitting an angled surface

Figure 10-3: The same scene, rotated

Figure 10-4: After the bounce

Figure 10-5: After rotating back

Figure 10-6: Creating a line

Figure 10-7: Did it go through, or just pass under?

Figure 10-8: Maybe a pinball machine?

Chapter 11: Billiard Ball Physics

Figure 11-1: Setting up the stage for conservation of momentum on one axis

Figure 11-2: A one-dimensional collision

Figure 11-3: A two-dimensional collision

Figure 11-4: A two dimensional collision, rotated

Figure 11-5: Draw in the x and y velocities.

Figure 11-6: All you care about is the x velocity.

Figure 11-7: New x velocities, same y velocities, with the result of a new overall velocity

Figure 11-8: Everything rotated back

Figure 11-9: Setting up the stage for conservation of momentum on two axes

Figure 11-10: Setting up the stage with multiple objects

Chapter 12: Particle Attraction and Gravity

Figure 12-1: We have particles!

Figure 12-2: Colliding planets?

Figure 12-3: Setting up the stage

Figure 12-4: Jared Tarbells Node Garden

Figure 12-5: My version of a node

Figure 12-6: Nodes in action

Figure 12-7: Connect the dots

Figure 12-8: Subtle change, but a world of difference

Figure 12-9: One more for the road

Chapter 13: Forward KinematicsMaking Things Walk

Figure 13-1: A single segment

Figure 13-2: It moves!

Figure 13-3: Forward kinematics with two segments

Figure 13-4: The beginnings of a walk cycle

Figure 13-5: Clips seg0 and seg2 appear as one, and seg1 and seg3 are below.

Figure 13-6: Behold! It walks!

Figure 13-7: Adding the sliders

Figure 13-8: Setup for real walking

Figure 13-9: Has it hit bottom or not?

Chapter 14: Inverse KinematicsDragging and Reaching

Figure 14-1: A single segment reaching toward the mouse

Figure 14-2: Multiple-segment dragging

Figure 14-3: Dragging 50 segments

Figure 14-4: seg0 rotates to the mouse. tx, ty is where it would like to be. seg1 will rotate to tx, ty.

Figure 14-5: Multiple-segment reaching

Figure 14-6: It likes to play ball.

Figure 14-7: Two segments form a triangle with sides a, b, c, and angles A, B, C.

Figure 14-8: Figuring the rotation of seg1

Figure 14-9: Figuring the rotation of seg0

Chapter 15: 3D Basics

Figure 15-1: Right-hand coordinate system

Figure 15-2: Left-hand coordinate system

Figure 15-3: Perspective seen from the side

Figure 15-4: Perspective in action.

Figure 15-5: Bouncing 3D balls

Figure 15-6: Fireworks! (Trust me, it looks much better in motion.)

Figure 15-7: My tree. (By now you know why I became a programmer instead of a designer.)

Figure 15-8: Watch out for the trees!

Figure 15-9: Look, Im flying!

Figure 15-10: Rotation on the z axis

Figure 15-11: Rotation on the x axis

Figure 15-12: Rotation on the y axis

Figure 15-13: 3D coordinate rotation on the y axis

Chapter 16: 3D Lines and Fills

Figure 16-1: 3D points and lines

Figure 16-2: 3D lines with invisible points

Figure 16-3: Coordinates of a square in 3D space

Figure 16-4: 3D spinning square

Figure 16-5: Using graph paper to plot out points

Figure 16-6: 3D spinning letter E

Figure 16-7: First 3D fills

Figure 16-8: More complex 3D shape

Figure 16-9: The same shape as in Figure 16-8, rendered with triangles

Figure 16-10: The points and polygons that make up this shape

Figure 16-11: The A shape, rendered in 3D

Figure 16-12: The A shape, with lines removed

Figure 16-13: The A shape, with individually colored polygons

Figure 16-14: The points of a 3D cube

Figure 16-15: The front face of the cube

Figure 16-16: The top face of the cube

Figure 16-17: The back face of the cube

Figure 16-18: The resulting 3D cube

Figure 16-19: A 3D pyramid

Figure 16-20: An extruded letter A

Figure 16-21: The first face of the cylinder

Figure 16-22: The last face of the cylinder

Figure 16-23: The resulting 3Dcylinder

Chapter 17: Backface Culling and 3D Lighting

Figure 17-1: A triangle facing you has points in a clockwise direction.

Figure 17-2: A triangle facing away from you has points in a counterclockwise direction.

Figure 17-3: Backface culling in action

Figure 17-4: Sorting the depths puts it all right!

Figure 17-5: The normal is perpendicular to the surface of the triangle.

Figure 17-6: 3D solid with backface culling, depth sorting, and 3D lighting

Chapter 18: Matrix Math

Figure 18-1: A 3—3 matrix, a 1—3 matrix, and a 3—1 matrix

Figure 18-2: Rotation with a matrix

Figure 18-3: Embedding the fonts before transforming a text field

Figure 18-4: Movie clip with text, skewed on the x axis

Figure 18-5: Movie clip with text, skewed on both axes

Chapter 19: Tips and Tricks

Figure 19-1: Brownian motion

Figure 19-2: Brownian motion with trails

Figure 19-3: Randomly placed dots

Figure 19-4: This method starts to form a square. Not so random looking anymore.

Figure 19-5: Circular random distribution

Figure 19-6: A smoother distribution

Figure 19-7: Biased distribution with one iteration

Figure 19-8: Biased distribution with six iterations

Figure 19-9: Two-dimensional biased distribution.