Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
I will show you now how the ActionScript makes possible for the music player to play a mp3 tune in a loop.
The first line creates a variable, musicPlays, by which you tell Flash if the music is playing or not.
var musicPlays:Boolean = false;
This variable is of a Boolean type, as defined by the keyword of the same name. The value of a Boolean variable can be either true or false. If you wonder why is it called this way, it is because it was invented by George Boole, an inventor who set the bases for all modern computer arithmetic, even though computers didn't exist in his time! If you want to know more about him, go to Wikipedia's site and type in "Boole" in their search box.
So, since the music hasn't loaded yet, you set this variable's value to false. The next line,
var loopTune:Sound = new Sound();
creates a new Sound object. You create this object by creating a variable (named loopTune in this case) and writing new Sound() on the right side of the equals sign.
This object is used to load mp3 files into Flash and manipulate them. So once Flash has read this line, this object is created and stored in computer's memory, where it waits and does nothing until you tell it to perform an action.
Now comes the onLoad function.
loopTune.onLoad = function(success:Boolean) {
if (success) {
loopTune.start(0, 999);
musicPlays = true;
_root.musicPlayer.gotoAndStop("playing");
}
};
This function is tied to your sound object (loopTune.onLoad) and has a parameter passed to it (success:Boolean). The success variable is of a Boolean type also, so it turns out either true or false.
Inside the function, there is a conditional if statement. The condition: (success). When you write only a variable name inside a conditional's parentheses, it means only one thing: if this between the parentheses turns out to be true, execute the actions that come next. If not, skip them altogether as if they even don't exist.
So this means that if success equals true (success is of Boolean type also), every ActionScript command between the curly braces ( { and } ) will be executed.
If success turns out to be false, nothing of this gets executed. And when does success turns out to be either true or false? Well, simple. If the mp3 file (cooltune.mp3) loads successfully, it turns out as true. If not, its value becomes false.
So, if everything is fine and the mp3 tune has loaded successfully, the conditional statement's contents get executed. Let's have a look at those.
loopTune.start(0, 999);
musicPlays = true;
_root.musicPlayer.gotoAndStop("playing");
The first line tells your loopTune sound object to start playing. The first parameter between the parentheses is the delay. It tells Flash if the loaded mp3 file should start from a certain point in time. It is set to zero, which means that it will start from the beginning. If you set it to 1 for example, the mp3 would start 1 second after its beginning.
The second parameter is the number of times this tune will loop (i.e. repeat itself). I put 999 because this means infinitely for all practical purposes. Say, for example, that your mp3 background tune has a duration of 30 seconds. This means that by putting the loop parameter to 999, it will be played for almost 30.000 seconds, which means 500 minutes. I doubt that anyone would stay at a single webpage or even a website that long. So you're confident that the music won't stop playing while someone is visiting yours or your client's site.
The second line, musicPlays = true, tells Flash that music is playing now. This will come in handy later.
The third line tells the musicPlayer movie clip (the one you designed throughout this tutorial) to jump to the frame labelled playing and stop there. This frame is the one the equalizer is on. It makes sense - the music begins playing, and the equalizer stars to move happily. :)
Now comes the loadSound method. It tells the loopTune sound object to load the mp3 file called cooltune.mp3.
loopTune.loadSound("cooltune.mp3", false);
The second parameter between the parentheses tells Flash if this mp3 sound is a streaming one (meaning that it will begin playing as soon as a portion of it has loaded and will continue playing while it is being loaded at the same time) or not.
Here, it is put to false. This means the sound won't begin playing until it has fully been loaded. This is made so because the previous function, onLoad, does not work and cannot work if this value is set to true. That's why I told you to find a background tune that has to be small in filesize. You wouldn't want to put an mp3 tune that has a size of 2 megabytes here and have to wait until that loads! That makes no sense.
And the last part of ActionScript is the one that makes the button for controlling the playback work.
musicPlayer.playStop.onPress = function ():Void {
if (musicPlays) {
this._parent.gotoAndStop("stopped");
loopTune.stop();
musicPlays = false;
} else {
this._parent.gotoAndStop("playing");
loopTune.start(0, 999);
musicPlays = true;
}
};
The musicPlayer.playStop construction is the target path to your button. Since it is inside the musicPlayer movie clip, you have to target it by writing musicPlayer.playStop.
Then you assign an onPress event to it. This event happens when a user clicks the button in question. A function is tied to it. This means that when a user presses her mouse button over this button, this function will be executed. The Void keyword means that this function does not return a value. It simply does a few things.
Inside the function, there is a conditional if / else statement. It says that if the value of the musicPlays variable equals true (musicPlays), the button's parent movie clip (the one inside whom the button is situated - musicPlayer), jumps to frame labelled stopped and stays there.
if (musicPlays) {
this._parent.gotoAndStop("stopped");
This too makes perfect sense. A user clicks the button, and if the music is playing (musicPlays is true) the movie clip goes to frame with the label stopped where the equalizer isn't present. This is good, because you don't want it to jump around if there is no sound to be heard.
After that, the mp3 sound is stopped with the line
loopTune.stop();
and the value of the musicPlays variable is set to false, because the music isn't playing any more.
musicPlays = false;
So, the user has turned the music off. Suppose it wants it to play again (play it again, Sam). She clicks again. Remember, the value of the musicPlays variable has just been set to false.
The conditional if statement sees this and skips the first pair of curly braces - { and } and proceeds to the else part. The else part gets executed.
} else {
this._parent.gotoAndStop("playing");
loopTune.start(0, 999);
musicPlays = true;
}
Inside it, the musicPlayer movie clip is told to jump to the frame where the equalizer is visible (the frame called playing), the sound is being turned on again (loopTune.start), with the same parameters as before and the value of the musicPlays variable is set to true because the music is playing.
Simple, isn't it? To translate this into english:
if (the music is playing) {
- hide the equalizer
- stop the music from playing
- set the musicPlays variable to false
} else {
- show the equalizer
- start the music
- set the musicPlays variable to true
}
Cool! Conditional statements are very useful, and yet simple to implement as you can see!
To place your mp3 player into an HTML page, you have to make your document's dimensions smaller first. The dimensions of the player I made are 41 by 54 pixels. Yours may be smaller or bigger, depending on the size of the player's background rectangle. So, do the following:
1. Unlock the layer with the player. Click on the mp3 player movie clip to select it.
2. Open the Align panel (Window > Align). Make sure that the Align to Stage button is turned on (see 1 on the image below). Click on the Align top edge button (2) and then on the Align left edge button (3).
Your movie clip will now be sitting perfectly in the top left corner of the stage.
3. Move the movie clip with the arrow keys on your keyboard 1 pixel to the right and one pixel down.
4. Go to the Properties panel and look at the dimensions of your movie clip. Mine are 41 by 54 pixels (the dimensions are found in the W and H fields). Remember them or write them down.
5. Open the Document properties window (Modify > Document). Make the size of your document 3 pixels bigger than the dimensions of your movie clip, both the height and the width.
The width of my movie clip was 44 pixels, so I put the width of the document to 44 pixels. Likewise, the height was at 54 pixels, so the document's height I set to 57 pixels.
Click OK. You will have a fine small SWF file now, with a 1 pixel border around the mp3 player movie clip.
So, to put this gizmo into an HTML page, just place the SWF file (in Dreamweaver or whichever webpage building program you might be using) into a cell of a table on your page, or a layer if you're working with CSS. Put it somewhere on top of your page, near the header, navigation, etc, so that it is easiyl visible and accessible.
If you are placing your mp3 player into a Flash site, which consists of a SWF file, of course, just pay attention to the following:
playStop both in your mp3 player and on your main site, this is not good - you will certainly lose some, if not all of your movie's functionality.That's not an exhaustive list, but it will give you some good directions to consider when placing your mp3 music player movie clip inside an existing FLA file.
If you want to change the way your player looks, it is easy. Just change the color gradient bar graphic symbol (double-click on it inside the Library to change it), the color and look of the background rectangle, the play and stop icons, and you're done. You can even rotate the equalizers. Just look at the cool results you can obtain:
I hope that you had fun learning from this tutorial as much as I had creating it. Ride on!
Download the zipped source FLA file for this lesson.
Download the source file for the second mp3 player.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
