Waves

Lets get into some more concrete uses of trig in Flash. Surely youve heard the term sine wave before, and surely youve seen the shape shown in Figure 3-17, which is a graphical representation of a sine wave.

Figure 3-17: A sine wave

But what exactly does that shape have to do with the sine function? It is the graph of the results of the sine function, when fed in all the angles from 0 to 360 (or 0 to 2 pi in radians). From left to right is the value of the angle used, and the y value of the graph is the sine of that particular angle. In Figure 3-18, Ive indicated some specific values.

Figure 3-18: Values of sine

Now you can see that the sine of 0 is 0. The sine of 90 degrees or pi/2 radians is 1. The sine of 180 degrees, or pi radians, is 0 again. The sine of 270 degrees, or 3/2 pi, is ˆ 1. The sine of 360 degrees, or 2 pi, is back to 0 once again. Lets play with this sine wave a bit in Flash. Type in the following code:

 for(angle = 0;angle < Math.PI * 2; angle += .1){       trace(Math.sin(angle)); } 

From here on out, you should start getting used to radians alone. Youll be leaving degrees behind, except when you actually need them for rotation or some other purpose.

In this example, the variable angle starts out as 0 and increments by 0.1 until its greater than Math.PI * 2 . It then traces the sine of that angle. If you look at the long list of results, youll see it starts out at 0, goes up to almost 1, then down to almost ˆ 1, and back to around 0. Youll never hit exactly 1 or 0 because, using an increment of 0.1, youll never get an exact multiple of pi or pi/2.

Smooth up and down motion

So what can you use Math.sin(angle) for? Have you ever needed to move something up and down or back and forth smoothly? This is your function. Consider this: Instead of just going from 0 to 1 and ˆ 1 and back to 0, and stopping there, keep adding on to the angle. Youll keep getting the wave over and over again. And instead of just taking the 1 and ˆ 1, multiply those values by some higher value, say 100, and you have a stream of values that goes from 100 to ˆ 100, back and forth, continuously.

In the file bobbing.fla , Ive created a movie clip named ball , placed it on stage, named the instance ball as well, and then added the following code:

 angle = 0; onEnterFrame = function(){       ball._y = 200 + Math.sin(angle) * 50;       angle += .1; } 

First, you need to set angle to 0; otherwise , it will start as undefined . In ActionScript 1, if you added a value to undefined , the undefined would be converted to zero, and the math would work fine. With ActionScript 2, adding a value to undefined will give you NaN (not a number), which isnt useful at all for calculating positions of movie clips.

In the onEnterFrame handler, you take the sine of that angle and multiply it by 50. This will give you a range of values from 50 to ˆ 50. If you add that to 200, your values will be from 250 to 150. Make that the _y position of the ball, and then add 0.1 to the angle for the next time around. You get a nice smooth up and down motion.

Play around with the various values. Youll notice that changing the .1 to another value changes the speed of the motion. This makes sense, because the faster or slower the angle is increasing, the faster or slower the return values from Math.sin will go from 1 to ˆ 1. Obviously, changing the 50 changes how far the ball moves, and changing the 200 changes the point that it oscillates around. From this, you could abstract the values into variables like so:

 angle = 0;  centerY = 200;   range = 50;   speed = .1;  onEnterFrame = function(){       ball._y =  centerY  + Math.sin(angle) *  range  ;       angle +=  speed  ; } 

Keeping actual numbers out of your motion code is a very good practice, and you should strive to do it as much as possible. In this case, its all pretty much in the same place anyway. But what happens when you get a couple of pages worth of code, and those values are used in several places throughout? Every time you want to change the speed, you need to hunt down every instance of that .1 value and change it. You could do a search and replace, but if something else in the file has .1 in it, that would get replaced as well. By keeping the numbers out of the code, preferably up at the top of the listing, you know exactly where all your variables are.

Linear vertical motion

In the wave1.fla file, I added linear vertical motion, just to give you some inspiration for your own animation. Heres the code for that file:

 angle = 0; centerY = 200; range = 50;  xspeed = 1;  yspeed = .05; onEnterFrame = function(){  ball._x += xspeed;  ball._y = centerY + Math.sin(angle) * range;       angle += yspeed; } 

Pulsing motion

One very important thing to keep in mind is that you can apply sine values to items other than physical locations. In the pulse.fla file, I used the values to affect the scale of the ball instead. This gives it a pulsating appearance. Heres the code:

 angle = 0; centerScale = 100; range = 50; speed = .1; onEnterFrame = function(){       ball._xscale = ball._yscale =                     centerScale + Math.sin(angle) * range;       angle += speed; } 

The principles are the same. You have a center point (which is 100% scale in this case), a range, and a speed. Dont stop there. Apply some sine waves to _alpha , _rotation , or any other interesting property.

Waves with two angles

Heres another idea to get you started: Rather than just a single angle, set up two sets of values, angle1 and angle2 , along with separate centers and speeds for both. Apply one sine wave to one property and the other sine wave to another property, such as position and scale. I cant guarantee youll come up with anything useful, but playing around like this, you will really get a feel for how these functions work.

Ive included one example in the random.fla file to get you started. This takes two angles, speeds, and centers, and applies one of the angles to the balls x position and the other angle to the y position. The result is something like a bug flying around a room. Although it is all very mathematically predetermined, it looks pretty random. Heres the code:

 angleX = 0; angleY = 0; centerX = 270; centerY = 200; range = 100; xspeed = .07; yspeed = .11; onEnterFrame = function(){       ball._x = centerX + Math.sin(angleX) * range;       ball._y = centerY + Math.sin(angleY) * range;       angleX += xspeed;       angleY += yspeed; } 

Waves with the drawing API

Finally, in wave2.fla , I took out the ball and used the drawing API to draw the sine wave.

 angle = 0; centerY = 200; range = 50; xspeed = 1; yspeed = .05; moveTo(0, 200); lineStyle(1,0, 100); x = 0; onEnterFrame = function(){       x += xspeed;       y = centerY + Math.sin(angle) * range;       lineTo(x, y);       angle += yspeed; } 

Ill cover the drawing API in detail in the next chapter, but you should have fun playing with this file and seeing the various waves you can draw with it. Note that the sine wave comes out a bit upside down, again due to the y axis being reversed in Flash.