< Day Day Up >
Controlling Panning
Although the volume of a sound gives a sense of distance, panning helps determine its
left/right position. Similar to setting the volume of a Sound object, setting a Sound
object's panning is straightforward, as the following example demonstrates:
bounce.setPan (100);
This code causes the bounce sound to play out of the right speaker only. You can set a
Sound object's panning anywhere between -100 (left speaker only) and 100 (right speaker
only), with a setting of 0 causing the sound to play equally out of both speakers.
As with the setVolume() method, the setPan() method can use the value of a variable to
set a Sound object's panning more dynamically, as the following example demonstrates:
bounce.setPan (myVariable);
We'll use a variable to set the pan of the bounce Sound object. As in the preceding
exercise, this variable will contain a percentage value between -100 and 100
(encompassing the entire spectrum of panning values). We'll base the pan setting of the
bounce Sound object on the horizontal distance of the mouse pointer from the center
point in either the left or right quadrant.
To make this technique work, we must do the following:
1. Determine the horizontal size of the draggable boundary and then split it in two,
essentially breaking the boundary into two "quadrants," left and right.
2. Establish the position of the horizontal center.
3. Determine the mouse pointer's current horizontal position (at the exact center or in
the left or right quadrant) each time it's moved.
If the mouse pointer is at the exact center point, the pan is set to 0. If the mouse is left of
the center point (in the left quadrant), the pan is set to a value between -100 and 0. This
value represents the horizontal distance (percentage-
b
ased) of the mouse pointer from the
center point in relation to the overall size of the quadrant. Likewise, if the mouse pointer
is right of the center point (in the right quadrant), the pan is set to a value between 0 and
100, which represents the horizontal distance (percentage-based) of the mouse pointer
from the center point in relation to the overall size of the quadrant.
Don't worry if you're confused. We've already discussed most of the principles for
translating this logic into ActionScript; we just need to adapt them a bit.
1. Open basketball4.fla.
Continue using the file you were working with at the end of the preceding
exercise.
2. With the Actions panel open, select Frame 1 of the Actions layer. After the line of
script var boundaryHeight:Number = bottomBoundary - topBoundary, insert the
following line of script:
3.
4. var boundaryWidth:Number = rightBoundary - leftBoundary;
5.
This line creates a variable named boundaryWidth and assigns it the value of
rightBoundary - leftBoundary. The lines of script directly above this one indicate
that rightBoundary = 490 and leftBoundary = 60. This is how the line of script
looks when written out:
boundaryWidth = 490 – 60
or
boundaryWidth = 430
This value represents the horizontal size of the boundary and will be used to
determine the size of the left and right quadrants of the boundary.
3. Add the following line of script after the line added in Step 2:
4.
5. var quadrantSize:Number = boundaryWidth / 2;
6.
This step creates a variable named quadrantSize and assigns it a value based on the
value of boundaryWidth / 2. At this point, boundaryWidth has a value of 430. This
line of script written out would look like this:
quadrantSize = 430 / 2
or
quadrantSize = 215
You need to know the size of these quadrants to determine what percentage values
to use for setting the pan of the bounce Sound object.
4. Add the following line of script after the line added in Step 3:
5.
6. var centerPoint:Number = rightBoundary - quadrantSize;
7.
This step creates a variable named centerPoint and assigns it the value of
rightBoundary - quadrantSize. At this point, rightBoundary has a value of 490 and
quadrantSize has a value of 215. Here's how this line of script would look when
written out:
centerPoint = 490 – 215
or
centerPoint = 275
This value denotes the horizontal location of the center point of the boundary—the
place where the left and right quadrants meet. This variable plays a critical role in
the panning process because it allows us to determine which quadrant the mouse
pointer is in—and thus whether the bounce Sound object should be panned left or
right. If the mouse pointer's horizontal position (_xmouse) is greater than
centerPoint (275), we know that the mouse pointer is in the right quadrant; if it's
less than 275, we know the mouse pointer is in the left quadrant.
5. After the line basketball_mc._yscale = topToBottomPercent; in the script (within
the onMouseEvent handler), insert the following lines of script:
6.
7. var panAmount = ((_xmouse - centerPoint) / quadrantSize) * 100;
8.
9. bounce.setPan(panAmount);
10.