Download .FLA - 933kb zipped Flash ® file
Introduction
Using the enhanced ActionScripting features of Flash 5®, it is now possible to create some truly interactive audio effects, for example volume and panning controls. This tutorial will explain how to use sound objects, Smart Clips and ActionScripting to create an interactive 3 band graphic equalizer effect with volume control.
HOW IT WORKS
The effect is achieved by altering the volume of sound objects, which contains audio loops filtered at different frequencies, and uses the SubKloda sound object synchronisation™ technique to ensure that the loops are in perfect time.
PART 1: Audio Loops
To start off the filtered audio loops must be created. For this tutorial I have used Sonic Foundry's Sound Forge®, but any sample editing software that has an EQ filter function will work just as well. For the effect you will need 4 versions of your audio loop:
| Audio File | Description |
| combolow.wav | Loop filtered to keep low-range frequencies |
| combomid.wav | Loop filtered to keep mid-range frequencies |
| combohigh.wav | Loop filtered to keep high-range frequencies |
| comboflat.wav | Loop reduced to 40% amplitude |
DIAGRAM 1: EQ filter function in Sonic Foundry's Sound Forge® to create combolow.wav
PART 2: Sound Objects
For those who are unfamiliar with sound objects, they allow you to set and control sounds in a particular movie clip instance, or if a target isn't specified, the global timeline.
The object is created by:
| soExample = new Sound([target]); |
Where target is an optional argument to specify the movie clip instance to which the Sound object applies. This means that unless a target movie clip is specified, any methods used to control a sound object will affect all sound objects that aren't targeted.
To attach a sound from the library to the sound object you use:
| soExample.attachSound("idName"); |
Where idName is the same as the name entered for the identifier in the Symbol Linkage Properties dialog box.
To start and stop the sound playing you use:
| soExample.start([secondOffset,loop]); |
| soExample.stop(); |
Where secondOffset is an optional argument to allow you to start the sound playing at a particular point and loop is an optional argument to specify the number of times the sound should loop. So to make the sound loop 'continuously' you simply set the number of loops to a very high value (eg. 999).
To set or read the volume for the sound object you use:
| soExample.setVolume(volume); |
| soExample.getVolume(); |
Where volume is an integer value from 0 (silent) to 100 (full volume).
PART 3: Flash® File
Although the Flash® movie contains some fairly advanced Actionscripting, it essentially consists of three parts:
1: Start Button
This starts the sound objects playing, and by using the SubKloda sound object syncronisation™ technique, ensures that the audio loops are in time with each other.
2: Stop Button
This stops the sound objects playing.
3: Track Movie Clips
The sound objects are contained in separate movie clips so that their volume can be independently controlled. In each track there is a slider control which alters the volume of the audio loop depending upon its position. But to create the effect of having a master volume control, the volumes of the filtered audio loops are calculated by using the position of the slider controls as a percentage rather than the actual volume.
First of all create the start, stop and slider buttons, then import the audio loops and give them the following export symbol identifiers by selecting the audio loop in the library and choosing Linkage from the Options menu:
| Imported Sound | Export Symbol Identifier |
| combolow.wav | low |
| combomid.wav | mid |
| combohigh.wav | high |
| comboflat.wav | flat |
DIAGRAM 2: Setting Linkage Parameters for comboflat.wav
PART 4: Creating the Track Movie Clip
Since the tracks are essentially the same, it's better to use a Smart clip with different parameters for each track, rather than duplicate a movie clip four times and alter the Actionscript code in each clip.
This is done by first inserting a new movie clip symbol into the library called TrackMC, and then choosing Define Clip Parameters from the Options menu.
The following parameters are then added to the clip:
| Clip Parameter | Description |
| track | A number to identify the track movie clip |
| sampleID | A string which will identify the export symbol of the sound to be used |
| initVol | A number which will be used to set the initial position of the track slider |
DIAGRAM 3: TrackMC Clip Parameters
Now we're ready to add the code to the TrackMC movie clip, so select it from the library and choose Edit from the Options menu. Create two layers in the clip and in the first layer add a background graphic for the track then select the first frame and add the following Actionscript by choosing Actions from the window menu:
| //Variable to store the volume when stopping & starting
currVol = 0; //Set the name of this instance of the TrackMC _name="track"+track; //Create and attach sound object //NOTE: the Sound object is attached to this MC s = new Sound(this); s.attachSound(sampleID); stop(); |
Next drag an instance of the slider button into the second layer, select it, and then choose Convert To Symbol from the Insert menu to create a movie clip with the name SliderButtonMC. Then select the button movie clip on the stage, give it the instance name SliderMC and add the following code to the movie clip:
| //The code for deciding which TrackMC slider is here
onClipEvent (load) { //Info for the drag limits //Limit set to 100 to make the maths for working out the volumes easier top=_y; left=_x; right=_x; bottom=_y+100;
//Move the slider & set the initial Volume
onClipEvent(enterFrame){
|
Then choose Edit Selected from the Edit menu and add the following code to the selected slider button within the movie clip:
| //Drag limits defined in the onClipEvent of the SliderButtonMC
on (press) { startDrag ("", false, left, top, right, bottom); dragging = true; } on (release, releaseOutside) { stopDrag (); dragging = false; } |
Now choose Edit Movie from the Edit menu which will take you back to the main stage. Add two layers for the background graphics and various text labels. Then in the topmost layer drag four instances of the TrackMC movie clip from the library. Next the clip parameters, as shown below, have to be entered for the tracks, which is done by selecting each TrackMC movie clip on the stage and choosing Panels->Clip Parameters from the Window menu:
| Parameter | Track0 | Track1 | Track2 | Track3 |
| track | 0 | 1 | 2 | 3 |
| sampleID | flat | low | mid | high |
| initVol | 100 | 50 | 50 | 50 |
PART 5: SubKloda Sound Object Syncronisation ™
All that remains to do now is add buttons to start and stop the sound objects and the Flash® should be almost finished. So drag an instance of the start button onto the stage and add the following code:
| on (release) {
//Stop the sound objects if they are currently playing for (i=0; i<4; i++) { _root["track"+i].s.stop(); } //Start the sound objects playing for (i=0; i<4; i++) { _root["track"+i].s.start(0,999); } } |
Then drag an instance of the stop button onto the stage and add the following code:
| on (release) {
for (i=0; i<4; i++) { //Stop the sound objects _root["track"+i].s.stop(); } } |
You can now try the movie by choosing Test Movie from the Control menu, and then press the start button to start the sound objects playing.... Then you'll notice that the sounds sometimes are out of sync and the start button needs to be pressed several times before they start playing in sync, which basically spoils the whole effect!
The probable (although not definite) reason for this is due to the time it takes the Flash® player to initialise the sound objects it starts them playing.
So when you press the start button the sound objects start playing out of time BUT if you press the start button again then you might notice that the sound objects seem to be now playing in time!
This is the basis for the SubKloda sound object synchronisation™ technique. When you press the start button rather than just starting the sound objects the following happens:
1. Store the volumes of the sound objects
2. Stop them playing
3. Set their volume to zero
4. Start them playing
5. Stop them playing
6. Start them playing again
7. Restore their volumes
This has the effect of basically pressing the start button twice.
So the Actionscript for the start button needs to be altered to the following code:
| //SubKloda Sound Object Synchronisation™ Technique
on (release) { for (i=0; i<4; i++) { with(_root["track"+i]){ //For each Sample... //Store the volume, Stop the sample //Set the volume to zero, Start the sample currVol = s.getVolume(); s.stop(); s.setVolume(0); s.start(0,999); } } for (i=0; i<4; i++) { with(_root["track"+i]){ //Then... //Stop the sample, Start the sample again //Restore the sample volume s.stop(); s.start(0,999); s.setVolume(currVol); } } } |
Now you should have a fully functioning Flash ® EQ effect, and hopefully a understanding of sound objects and how to control them using Actionscript.
