Adding the ActionScript

  • With the first frame of the Actions layer selected, add the following code to the Actions Panel:

    • Example 5.9. random-gui.fla Actions : 1 (excerpt)

    function randomBetween (a, b)
    {
            return Math.min (a, b) + random (Math.abs (a - b) + 1);
    }
    function roundNumber (toRound, numDecimals)
    {
            return Math.round (toRound * Math.pow (10, numDecimals)) / Math.pow (10, numDecimals);
    }
    MovieClip.prototype.PlayQueue = function (clip)
    {
            this.orchestra = new Sound (this);
            this.orchestra.attachSound (clip);
            this.orchestra.start ();
    };
    function PlayClips ()
    {
            var background = "background" + randomBetween (1, 5);
            var drums = "drum" + randomBetween (1, 5);
            var guitar = "guitar" + randomBetween (1, 5);
            var overlay = "overlay" + randomBetween (1, 5);
            var clips = new Array (background, drums, guitar, overlay);
            var mc;
            for (var i = 0; i < clips.length; i++)
            {
                    mc = createEmptyMovieClip ("SoundHolder" + i, i);
                    mc.PlayQueue (clips[i]);
            }
            mc.onEnterFrame = function ()
            {
                    _root.progress._xscale = this.orchestra.position / this.orchestra.duration * 100;
            };
            mc.orchestra.onSoundComplete = function ()
            {
                    stopAllSounds ();
                    LoopClips ();
            };
    }
    function LoopClips ()
    {
            _root.SoundHolder0.orchestra.start ();
            _root.SoundHolder1.orchestra.start ();
            _root.SoundHolder2.orchestra.start ();
            _root.SoundHolder3.orchestra.start ();
    }
    PlayClips ();

     

    We've used the randomBetween and roundNumber functions previously in this chapter, so there's no need to cover them again.

    The PlayQueue method is identical to that used in the previous example, as is the PlayClips function, except for a couple of event handlers we added to the last dynamically generated movie clip.

      

    mc.onEnterFrame = function ()
    {
            _root.progress._xscale = this.orchestra.position / this.orchestra.duration * 100;
    };
    mc.orchestra.onSoundComplete = function ()
    {
            stopAllSounds ();
            LoopClips ();
    };

    After the sound object is initialized, the sound clip is attached, and the sound clip has started to play, we dynamically track the position of the last sound object that's created using an onEnterFrame event handler attached to the containing movie clip. This event handler controls the width of the progress bar by altering its _xscale property. When the sound finishes, the onSoundComplete event handler will call the stopAllSounds function. Immediately after that, we call LoopClips to restart the four tracks we've produced, creating the effect of an infinite loop.

    function LoopClips ()
    {
            _root.SoundHolder0.orchestra.start ();
            _root.SoundHolder1.orchestra.start ();
            _root.SoundHolder2.orchestra.start ();
            _root.SoundHolder3.orchestra.start ();
    }

     

    So far, so good, right? When the movie is running, we want to dynamically switch the different tracks on or off by clicking the checkboxes on the stage. To this end, each CheckBox has its own event handler that controls the volume of the track. Let's add these now.

  • Add the following code below the existing code in the Actions Panel:

    • Example 5.10. random-gui.fla Actions : 1 (excerpt)

    function backgroundChange (background)
    {
            if (background.getValue ())
            {
                    _root.SoundHolder0.Orchestra.setVolume (100);
            }
            else
            {
                    _root.SoundHolder0.Orchestra.setVolume (0);
            }
    }
    function drumsChange (drums)
    {
            if (drums.getValue ())
            {
                    _root.SoundHolder1.Orchestra.setVolume (100);
            }
            else
            {
                    _root.SoundHolder1.Orchestra.setVolume (0);
            }
    }
    function guitarChange (guitar)
    {
            if (guitar.getValue ())
            {
                    _root.SoundHolder2.Orchestra.setVolume (100);
            }
            else
            {
                    _root.SoundHolder2.Orchestra.setVolume (0);
            }
    }
    function overlayChange (overlay)
    {
            if (overlay.getValue ())
            {
                    _root.SoundHolder3.Orchestra.setVolume (100);
            }
            else
            {
                    _root.SoundHolder3.Orchestra.setVolume (0);
            }
    }

     

    The names of these functions correspond to the Change Handler parameter values we assigned to each of the heckBox components when we created them. All these event handlers work the same way. They check whether the CheckBox is checked using the getValue method, then set the volume of the corresponding sound clip to match. The initial state of each CheckBox is true (checked). So, when the checkbox is clicked, its status switches to false, and the volume is set to 0 for that particular Sound object. Clicking it again changes the status to true and the volume to 100. Using the change handlers in this way, we can drop individual tracks out and bring them back in at will.

  • Save your Flash document and preview it.

    • You're probably listening to a funky composition right now. Click the checkboxes to drop different tracks out and bring them back in. If you don't like the composition, or it's a little too wild for your tastes, preview the movie again to see what the random sequencer comes up with!