Chapter 7: Motion

From your very first experiment to the umpteenth time you've performed a familiar task, moving assets with code can be a gratifying experience. In addition to creating more dynamic work by freeing yourself from the permanency of the timeline, there is something very immediate and pleasing about controlling the motion of a symbol instance purely with ActionScript.

Because programming motion can cover a large number of concepts, we've chosen a few as the main focus areas for this subject. In each area, we offer what we call simplified simulations—that is, we do not maintain that our examples accurately reflect real-world scenarios. We won't be accounting for every possible force that can act on an object in each sample file. On the contrary, we try to present approaches to each topic that are simple enough to integrate into your projects with ease.

In addition to simplifying some topics, we also hope to show that math can be your friend. To some of you, this is a given, but to others, having to deal with numbers is an uphill journey. If you find yourself in the latter category, we hope to smooth over some of the smaller bumps that might be caused by a knee-jerk reaction to the need for math. Understanding just a few small applications of mathematical or scientific principles can really go a long way. You may even find yourself becoming comfortable with these principles and applying them even when there are other ways to accomplish a goal.

In this chapter, we'll look at the following topics:

• Basic Movement. We'll start with simple movement, updating x and y coordinates using constant velocities, and eventually adding acceleration.
• Geometry and Trigonometry. We'll then discuss three of the most basic principles of geometry and trigonometry. We'll show you how to determine the distance between two objects, and then how to animate objects in a circular path and point objects at a specific location.
• Physics. Friction, elasticity, and gravity add a bit of realism to animations, and you may be surprised how easy they are to simulate.
• Programmatic Tweening. Scripting movement entirely from scratch affords the greatest flexibility but also requires a fair amount of labor. Sometimes, a pre-written method or two can satisfy a basic need for motion. We'll demonstrate ActionScript's Tween class, and its occasional partner in crime, the Easing package.
• Timeline Animation Recreations. New to Flash CS3 is the ability to copy or export timeline tweens as XML and ActionScript. ActionScript 3.0's new Animator class can read that XML and recreate a timeline animation with ActionScript. We'll show you how to create a simple player for displaying such an animation.
• Particle Systems. We'll close out the chapter with an applied example covering much of what we've discussed herein, creating a simple particle system—a group of autonomous sprites that, taken collectively, simulate a complex material or environment, such as water, fireworks, or colonies of insects.

This excerpt is from Learning ActionScript 3.0. Learning ActionScript 3.0 gives you a solid foundation in the Flash language and demonstrates how you can use it for practical, everyday projects. The book does more than give you a handful of sample scripts, defining how ActionScript and Flash work. It gives you a clear look into essential topics such as logic, event handling, displaying content, migrating legacy projects to ActionScript 3.0, classes, and much more. Written for those new to the language, this book doesn't rely exclusively on prior knowledge of object-oriented programming (OOP). Instead, it helps you expand your skillset by first focusing on clear, concise examples in the timeline, evolving into OOP examples over time-allowing you to choose the programming approach with which you are most comfortable.

Section 7.1: Basic Movement

When discussing scripted motion, a good place to begin is simple incrementing (increasing by a certain amount) or decrementing (decreasing by a certain amount) of x and y coordinates. Whether you realize it or not, you are probably used to working in a Cartesian coordinate system, where unique points are expressed on a single plane of two numbers, typically x and y. However, you are probably used to thinking about positive x values moving to the right and positive y values moving up, the way simple graphs are usually expressed.

The Flash coordinate system differs a bit from the typical coordinate system, in that the origin, or point (0, 0), is the upper-left corner of the stage, and y values increase when moving down. We will mention this again when it is directly applicable to an example, such as in when you control sound volume with your mouse. However, if you try to remember this difference, you will probably have fewer surprises.

To increment or decrement a value, you simply add or subtract a unit from that value. Here are two example ways of doing this:

mc.x++;
mc.y−−;

mc2.x += 10;
mc2.y −= 10;

The first example uses double plus signs to increment a movie clip's x coordinate by 1 and double minus signs to decrement its y coordinate by 1. If you need to add or subtract more than one unit, you can use a plus or minus sign followed by an equal sign to add the amount shown on the right side of the equation to the entity on the left side. The second example cited adds 10 pixels to the x coordinate and subtracts 10 pixels from the y coordinate. In both cases, because the amount added and subtracted is the same, these hypothetical movie clips will move up (subtracting y coordinate values moves a movie clip up) and to the right by 1 pixel in the first example, and move up and to the right 10 pixels in the second example.

As we start discussing speed, velocity, and acceleration, it might help to have a little background that you can relate to the code. Speed, or how fast an object is moving, is a scalar quantity. That means it is a value that can be expressed with a magnitude alone, such as 80 miles per hour. Velocity is the rate of change in movement, and is a vector quantity. It must be expressed with both a magnitude and a direction. In contrast to the definition of speed, velocity can be described as how fast in a particular direction, such as 80 miles per hour, South-South-East. Acceleration is also a vector quantity and is the rate of change in velocity.

These distinctions are subtle but helpful when it comes to getting from point a to point b. An easy way to remember each property is to think of your own movement. You can move very quickly, alternating one step forward and one step backward. This will give you speed but (from a simple way of looking at things) an overall velocity of 0. If you switch to always moving one step forward, you may move at the same speed but now have a constant velocity. If you increase your speed over time, while continuing to move forward, your velocity increases, giving you acceleration.

This is not terribly important if you just want to create a basic animation. However, as you begin to build more complex systems, it may help to understand what is required to meet your goals, and it may help you create more realistic simulations.

Velocity

Figure 7-1: Simulated movement of a movie clip, at a constant velocity, down and to the right

Later on, we'll show you how to express a direction using an angle. For now, however, the direction of movement will be dictated by whether you increase or decrease x and y coordinates—that is, velocity is often implied in, or can be extrapolated from, simple code. For example, if you remember that positive x values move an object to the right, you can specify a velocity merely by incrementing an x coordinate.

Breaking out this change into a variable can make this clearer and easier to work with. For instance, if you think of always adding a velocity to a movie clip's position, you not only simplify your operator use, but you also need to add only a positive value to move in a positive direction, or add a negative value to move in a negative direction.

This code creates a ball from a library movie clip included in this lesson with the linkage identifier class Ball. It then adds 4 pixels to the ball's x and y coordinates each time the enter frame event occurs. This means the ball moves down and to the right, as depicted in multiple frames in Figure 7-1.