Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Jukebox

VCB424 Advanced Interactive Design IV

Jukebox

This is the first of two music playing Flash objects that we will build, both of which read information (data) from an external source. This one takes a "juke box" approach—a variety of songs are available in any order, but one must press the appropriate button to make it work. The second player will be more of an "iTunes/Winamp" style player—it plays the songs in sequence but there is only one play/pause button and you can skip ahead and backward.

For the juke box you will need more than just a Flash file; you will also need several mp3 files (obviously) and a data file. If you don't have any songs handy I've put five song snippets along with a sample data file and a Flash file with some ready-made buttons together in a zip file that you can download and use.

Part 1: External files

1. Create a folder for this project called “yourName_jukebox."
2. Find some mp3 files (or use the ones I provide, see link above). Put them in a folder called "tunes" inside the jukebox folder created in step 1. Hint: make sure that there are no spaces in the names of the mp3 files.
3. Launch textEdit or similar text editing application. If you use textEdit be sure to disable "rich text."
4. Type your song information as a set of variables. Surround each variable with ampersands (&). Create three variables for each song: title, artist, and name/url. The format should look something like this:

&title1=Toccata in D&&artist1=J.S.Bach&&song1=tunes/BachEdit.mp3&

 

Notice that I named my variables title1, artist1 and song1. Notice also that the variable values aren't surrounded by quotation marks. Also note the ampersands—each variable has one at the beginning and end.

For the second song, do the same thing except change the variable names to title2, artist2, and song2:

&title2=5th Symphony&&artist2=L.V.Beethoven&&song2=tunes/BeethovenEdit.mp3&

 

Add a new line for each song, changing the variable numbers accordingly.

 

5. Save this file as music.txt and put it into your jukebox folder.

Part 2: Flash Layout

1. Open a new file in Flash. Feel free to change the size. Save your file as jukebox.fla in a folder called “yourName_jukebox”.
2. Create two different button symbols, one for "play" and one for "stop." For now keep it simple—make the "play" button a circle and the "stop" button a square. Later you can make them as fancy as you like. Note that on a juke box there will be a separate "play" button for each song, so it will be used multiple times.
3. Drag five instances of the "play" button on stage. Put one instance of the "stop" button on stage.
4. Next make two dynamic text boxes; give one the variable name "titleWindow", and the other "artistWindow" (forgot how to do that? Select the text field, make sure it's set to "Dynamic" in the Properties window, and put the variable name in the box that says "Var"). Make sure you set a variable name not an instance name.

You can set the font style, size, and color to whatever you like (make sure you pick a text color other than white if your player has a white background!). Bare in mind the the text has to be small enough and/or the fields large enough to contain the variable information (titles & artist names).

5. Next we'll make a volume slider. You will need two new graphics: a volume slider knob, and the track it slides upon. The knob can be a simple circle, the track a long, horizontal rectangle. For best results, make sure the rectangle's length & width are whole numbers (for example: 86 pixels, not 85.7). Also, if you make the slider exactly 100px wide it'll work the best.
6. Convert both knob and track into separate movie clip symbols (I called mine sliderKnob_mc and sliderBase_mc).
7. Place the slider and the knob on the stage. I put each on its own layer. Place the base so that its x & y coordinates are whole numbers (avoid decimals).
8. Give the knob the instance name hSlider, give the base track the instance name hBase.

Part 3 Flash: Actionscript

1. Change the name of the default layer to "controls" and then add a layer called "actions."
2. In frame 1 of the actions layer, put the following ActionScript:

loadVariablesNum("music.txt", 0);

 

This of course loads the variables stored in the text file into Flash. Why not just put all the variables in Flash to begin with? Well, once the Flash movie is completed and exported you can't get back into the file to edit the Actionscript. To update songs you would have to change the code on the original Flash file & export it again, and that's assuming you have the original file. With this method, however, you can update the songs (and song information) by simply changing the text file—which is easy to do; as long as you use the same variables, you can substitute any songs you like.

3. Select the first play button, open the script window and write the following code:

on (release) {
stopAllSounds();
mySong = new Sound();
mySong.loadSound(song1, true);
titleWindow = _root.title1;
artistWindow = _root.artist1;
}

 

The stopAllSounds(); command does what you'd expect—stops any and all songs that might be playing; it's important to do this before we start a new song or we will get noise. mySong = new Sound(); creates a container object within the project to hold the sound. mySong.loadSound(song1, true); grabs the first song and puts it into the sound object we just created. "True" in this case means that the song is set to stream (begin to play before it's fully downloaded). If you want your sound to download completely before it plays you would write "false," but that's not recommended for this project. The artistWindow line loads the artist1 variable into the first text window; the titleWindow line loads the title variable into the title field.

4. Select the second play button. Copy & paste the script above (step 3) but change the variables so that it loads the appropriate sound and data (thus the second button should load “song2,” "title2" and "artist2."
5. Repeat for buttons 3–5, changing the variables accordingly.
6. Select the stop button and add the following script:

on (press) {
stopAllSounds();
artistWindow = "";
titleWindow = "";
}

7. You know what stopAllSounds does; the other lines clean out the text boxes.
8. Now for the volume control. Select the knob movie clip instance (hSlider) and open the Actionscript window. Inside type the following code:

onClipEvent(load) {
this._x=_root.hBase._x + _root.hBase._width/2 - this._width/2;
left=this._x - _root.hBase._width/2;
top=this._y;
right=this._x + _root.hBase._width/2;
bottom=this._y;
volCalc=_root.hSlider._x - _root.hBase._width/2

}

 

onClipEvent(enterFrame) {
this.onPress = function () {
startDrag(this, false, left , top , right, bottom)
}
this.onRelease = this.onReleaseOutside = function () {
this.stopDrag();
}
sliderx=_root.hSlider._x;
audioVolume=(sliderx-volCalc);
_root.mySong.setVolume(audioVolume);

}

 

The first part of the script is triggered when the slider knob movie clip loads. It calculates the width and height of the base movie clip, divides those measurements in half, and then places the knob in the middle of the base. It also sets the maximum amount that the knob can be moved left & right, top & bottom. Finally it creates a variable called volCalc and assigns a value to it equal to the position of the slider (so since the slider starts at 50 on a 100 pixel base, volCalc is given a value of 50).

The second part of the script (enterFrame) is constantly running (unlike the onLoad which only runs once). This script does two things: first it makes the knob "draggable;" second it creates a variable called audioVolume which determines the position of the slider and then assigns that value to the volume of the sound. As the value drops towards zero, the volume drops. As it increases towards 100, the volume increases.

Finishing Touches.

1. Try it out, does it work?
2. Make your juke box pretty. Add some color, some pizzazz... you get the idea.
3. Customize your juke box—you can add additional text fields (album, genre, etc.) if you like. Just create a new variable for each of the songs in the text document, and add one or more text fields to your interface.
4. Here's a challenge: can you figure out how to add album artwork (or other images?).
5. Export a .swf file.
6. Embed the .swf file into an html page (called jukebox.html for example). Keep the html file in the same folder as the .swf file & data file (otherwise you may have linking problems).
7. FTP the entire jukebox folder to your server space (make sure the folder contains the data (txt) file and the "tunes" folder with the songs.
8. Make a link to the html file from your home page.

References

• Kenny Bellew has put together an excellent series of tutorials on using sound in Flash.

Course Outline

Syllabus

Student Resources