Adding the ActionScript

Example 5.1. volcontrol.fla Actions : 1 (excerpt)

MovieClip.prototype.WaveFade = function (minValue, maxValue, period)
{
        this.period = period;
        this.minValue = minValue;
        this.maxValue = maxValue;
        this.count = 0;
        this.onEnterFrame = function ()
        {
                var value = (1 + Math.cos (this.count++ * 2 * Math.PI / this.period)) / 2;
                this._yscale = this.minValue + value *
                Math.abs (this.maxValue - this.minValue);
        };
};
clipper.WaveFade (20, 100, 48);

Here, we extend the movie clip class with a new method called WaveFade, which scales the clip up and down vertically in a smooth, regular pattern. The method is relatively straightforward, with the exception that careful use of the cosine function is required to produce the values that control the scaling.

The method takes three parameters: minValue, the minimum scale for the clip (as a percentage); maxValue, the maximum scale for the clip; and period, the number of frames in one oscillation (from the maximum scale to the minimum and back again).

The value variable is assigned a value using the cosine function. We add one and then divide the result by two to get values oscillating between zero and one. (Cosine oscillates between one and minus one.) We then multiply that by the difference between the maximum and minimum scaling values to determine the vertical scaling of the clip for each frame.

Notice that the _yscale of the movie clip oscillates smoothly from its full height down to 20% and then back up again. Now that we have the animation in place, we can add the sound clip:

Example 5.2. volcontrol.fla Actions : 1

MovieClip.prototype.WaveFade = function (minValue, maxValue, period)
{
        this.period = period;
        this.minValue = minValue;
        this.maxValue = maxValue;
        this.count = 0;
        this.reverb = new Sound ();
        this.reverb.attachSound ("reverb");
        this.reverb.start (0, 999);
        this.onEnterFrame = function ()
        {
                var value = (1 + Math.cos (this.count++ * 2 * Math.PI / this.period)) / 2;
                this._yscale = this.minValue + value * Math.abs (this.maxValue - this.minValue);
                this.reverb.setVolume (this.minValue + value * Math.abs (this.maxValue - this.minValue));
        };
};
clipper.WaveFade (20, 100, 48);

We start by creating a new Sound object and attaching the sound from the Library Panel. We start the clip at the beginning (0), and set it to loop 999 times.

Meanwhile, within the onEnterFrame event handler, we set the percentage volume of the sound clip using the same calculation we employed for its _yscale:

this.reverb.setVolume (this.minValue + value * Math.abs (this.maxValue - this.minValue));

This is the same code we used to control the clip's _yscale; in theory, we could replace it with the following:

this.reverb.setVolume(this._yscale);

However, we avoid using this code as it's less readable. When you revisit your code at a later date, you might easily become confused if you saw sound properties linked to movie clip properties.

Notice that, as the scale of the clip decreases, so does the volume of the sound. As the scale increases, so does the volume. The addition of scripted sound has enhanced this simple effect, which strengthens the message and creates a more powerful experience.

Dynamic Panning Control

In this example, we animate an object across the screen and alter the panning of sound in accordance with the object's location. Panning involves the movement of a sound in stereo, which can add dynamism to even a single continuous tone. This builds on the previous example to increase your skills with the Sound class using a new method: setPan.

By default, the panning of a sound is set to 0, but we can use setPan to alter that between the limits of -100 (all sound to the left channel) and +100 (all sound to the right channel).

Let's mirror the movement of a simple animation from left to right with an effect that moves the sound from the left channel to the right.

To skip ahead and modify this effect, locate pancontrol.fla in the code archive.