Flash 5 is more than a movie and sound player—it's an application platform. Using a little ingenuity and some ActionScript, you can build a fully-functioning remixer that runs in any Flash-enabled browser A "remixer" is an audio application that allows users to control the volume and pan (the right or left position of sound) of a multi-track recording. A remixer typically has a user interface similar to an audio mixer console, which includes volume sliders, pan sliders, and mute buttons (see figure 1). Users can rearrange or "remix" audio tracks by changing the volume and pan of different tracks at different points in time.


Figure 1. Example of a typical Audio Mixer Console

Try your hand at remixing with the demo Flash remixer. Launch remixer

It's now possible to create a remixer using the Flash 5 player, because Flash 5 supports separate volume and pan for up to 8 sounds playing simultaneously. These features and the fact that Flash is ubiquitous, make it an attractive technology for developing audio applications.

In this article, I'll show you how to build a simple Flash remixer. To get the greatest benefit from this article, you should be familiar with the Flash 5 authoring environment, ECMA compliant ActionScript and basic digital audio concepts.

The example remixer console has one "channel strip", containing a volume slider, pan slider and a mute button, for each track in your song and a master control strip for master volume, pan and mute. Sliders and toggle buttons on the strips, control the audio tracks.

Create a Volume Slider
A slider consists of three parts: a button representing the handle, a movie clip to hold the button, and a graphic representing the slider "groove". A user drags the slider up or down its groove to change volume.

To create a slider you must constrain the drag space of a movie clip. A movie clip's registration point, with the cross hair icon typically in the center of the clip, represents its current x and y position on the stage. By passing coordinates to the startDrag(( ) method you define a rectangle within which a user can drag the movie clip.

The constrained area of your volume slider will be a vertical line 1 pixel wide and 100 pixels high, which corresponds to the Flash player's volume range of 0 - 100. The default position of your slider is the top of the slider "groove" representing maximum volume. I am using the default value of 100 to simplify the slider building process. Later on, when you are more comfortable with the process you can change the default setting of your volume slider.

Figure 2. Constrained Drag Space for Volume Slider

1. Create a button representing your slider handle and place it within movie clip.

2. Add the following ActionScript to the button:

   on (press) {
	   startDrag("", false, left, top, right, bottom);
	   dragging = true;
   }

   on(release, releaseOutside) {
	   stopDrag( );
	   dragging = false;
   }

3.	Select the movie clip and add the following Actions:

   onClipEvent(load) {
	   top = Math.round(_y); // default position
	   left = Math.round(_x);
	   right = left; // prevent horizontal drag
	   bottom = top + 100 //100 pixels below top
   }

Create a Pan Slider
A user drags the slider to the right or left to change pan. The default position of your pan slider is the middle of the groove, representing the center point between left and right speakers.

Create a slider following the previous steps, however in Step 3 use the following ActionScript code:

   onClipEvent(load) {
	   top = Math.round(_y);
	   left = Math.round(_x) - 10; // default handle position
	    is middle of 20 px slider range
   right = Math.round(_x) + 10; // 
   bottom = top; // prevent vertical drag.
   center = Math.round(_x); // default position
   }

Figure 3. Constrained Drag Space for Pan Slider

Create a Mute Toggle Button
The final element in your channel strip is the mute toggle button. When "muted" a track is silenced regardless of changes to the volume slider, when "unmuted" volume control returns to the volume slider.

Start your remixer with all tracks but one muted so users can build a song. For buttons that will be "muted" at the beginning, frame one of your movie clip represents the "muted" state.

1. Create a button with the following ActionScript attached:

   on(release) {
	   play( );  // change frames when clicked
   }

   stop( ); 
   muted = true; 

   stop( ); 
   muted = false;

   // loop through all movie clip objects attached to this movie clip
   for(name in this)
   {
		   // play each sound track movie clip
		   this[name].gotoAndPlay(2); 
   }

   // if audio in frame 8 is loaded exit loop.
   ifFrameLoaded(8) { 
   gotoAndPlay("objects");
   mixerstate = "Audio Loaded"; 
   }

   gotoAndPlay(_currentframe - 1 );  // loop
   mixerstate = "Loading Audio"; // show loading message

   mySoundObject = new Sound(target path to movie clip containing a  sound)

   drumTrack = new Sound(_root.sounds.drumtrackmc);

   global = new Sound( );

	   mySoundObject.method(value)

   drumTrack.setVolume(0); // mutes drumtrack.wav.
   drumTrack.setVolume(100); // maximum volume for drumtrack.wav.
   global.setVolume(0); // mutes all sound.

   drumTrack.setPan(-100); // drumtrack.wav plays from the left speaker
   drumTrack.setPan(100); // plays from the right speaker
   drumTrack.setPan(0); // plays equally from both speakers

   onClipEvent(enterFrame) {
	   // convert _y into a number between 0 and 100.
   position = Math.round(100 - (_y - top));  

   // only change volume when user is dragging this movie clip or 
   // corresponding mute button is unselected.
   if (dragging && !_root.correspondingmutebtn.muted) {
		   _root.mySoundObject.setVolume(position);
	   }
   }

   onClipEvent(enterFrame) {
	   if(dragging){
   // convert _x into a number between -100 and 100.
   position = Math.round((_x - center) * 10);
		   _root. mySoundObject .setPan(position);
	   }
   }
	

   In frame one: _root.mySoundObject.setVolume(0);
   In frame two: _ root.mySoundObject.setVolume
   (_root.correspondingslider.position);

   In frame one: _ root.mySoundObject.setVolume
   (_root.correspondingslider.position);
   In frame two: _root.mySoundObject.setVolume(0);

   on(release){
	   // disable the play button if the mixerstate 
	   has the substring "Load" 
   // because audio is loading.
	   if(_root.mixerstate.indexOf("Load") == -1){
			   stopAllSounds( ); // prevent event sync layering
			   sounds.gotoAndPlay(2);
			   mixerstate = "Playing";
		   }
	   }

	   on(release){
   if(_root.mixerstate.indexOf("Load") == -1){
			   stopAllSounds( );
			   mixerstate = "Stopped";
		   }
   }

   // intialize volume and pan for track 1, do this for each track
   if (track1MuteButtonName.muted) {volume =  0} else 
   {volume = track1VolumeSliderName.position}
   track1SoundObjectName.setVolume(volume);
   track1SoundObjectName.setPan(track1panSlider.position);

Hayden Porter is a Web developer and musician with a special interest in Interactive Sound for the Web. He is a frequent contributor both as writer and forum moderator for www.sonify.org and maintains a Web design business, www.aviarts.com, in Akron Ohio.Reach him at Email address: hayden@aviarts.com.