Introduction: Dynamic OOP Music Player
The following tutorial will show you how to create a dynamic music player with features such as: a track and artist name, volume control, track preloader, and more. We will make use of object-orientated programming (OOP) techniques. A working knowledge of this concept is required.
1. Directory Structure
and creating your Index and Flash File
musicplayer/
musicplayer/tracks
musicplayer/actionscript
You can upload the musicplayer folder anywhere on your server without path issues since we will be using relative paths.
Now let's create the file. This is the main index file for the player, and it should be placed in the main folder ( musicplayer/index.html ).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>MusicPlayer</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
body
{
background-color: #B4CEE3;
}
</style>
</head><body>
<object type="application/x-shockwave-flash" data="musicplayer.swf">
<param name="movie" value="musicplayer.swf" /></object>
</body></html>
This displays the player movie on a blank HTML page. Not much to explain here.
Now wer are ready to create our Flash file.This movie will only contain a few lines of code, the buttons and bars. All the player’s back-end will be kept in external class files.
First thing is to create an instance of the MusicPlayer class (we will create the full class later). Open the “Actions” panel (Window > Actions) and input the following:
var tracks = {};
tracks["titles"] = ["lebleu", "pensive", "brasilia"];
tracks["artists"] = ["shane madden", "shane madden", "shane madden"];
tracks["urls"] = ["tracks/LeBleu.mp3", "tracks/Pensive.mp3", "tracks/Brasilia.mp3"];
var player = new MusicPlayer(player, tracks, 0);
The MusicPlayer class has three parameters: The first is the path to the player movie clip, second is an object containing data of each track (title, artist, and URL), and the last is the ID of the initial track to play (zero-based, which means that the first track ID is 0).
Note: This object could easily be populated via XML for more control, but I thought it would be easier and more on topic to keep track data in an object. For more information on adding XML support checkout the additions section at the end of this article.
Open up the movie Publish Settings panel and then click on Settings... (next to the ActionScript version details). The ActionScript 2.0 Settings window should now be displayed so we'll add a new class path. This will tell Flash to look in the musicplayer/actionscript folder for our soon-to-exist AS2 classes (the path is relative to the FLA file).
Click on the big plus sign and then type in actionscript and hit the Enter key. The new class path is now added...
(Note: All screenshots were taken using Flash 8 on Macintosh)
Now we need to create all the player elements (title and artist text fields, UI buttons, bars, etc).
Start by creating a new movie clip (Insert > New Symbol) and give it an instance name of “player”. This movie clip will be used as a container for all the player elements.
Inside the player movie clip create two dynamic text fields and give them the instance names of title_txt and artist_txt. As the names suggest, these text fields will be used to display the title and artist for the current track. This information will be read from the object “tracks” created early.
Make a new movie clip and give it an instance name of “volume”. Inside it draw a rectangle for the volume bar and make a duplicate.
The first rectangle is used to show the total width of the volume slider, the second is to show the current volume level. Instead of resizing the second rectangle we’re going to apply and resize a mask. This is especially useful if you are using an image or pattern because it will not cause distortion.
On a new layer draw another rectangle with the same size and position as the rest. Convert it to a movie clip (Modify > Convert to Symbol) and give it an instance name of “mask”. Now to make this mask actually function, set it as the second layer’s mask.
(Note: Rectangles have been resized to show level)
Moving onto the second bar! Create a new movie clip called “track”, inside this movie clip draw a bar the same as we did for volume and repeat this process twice. When I say repeat twice I mean draw these three rectangles twice on different layers except this time call the first mask “load_mask” since it will be used as the percent bar.
That’s it for the bars, now let’s make the controls. Create a new movie clip inside player called “controls” and inside it make 4 buttons with the instance names of “play_btn”, “pause_btn”, “prev_btn”, and “next_btn”. Style them however you like as long as the label“hover” is the frame you want to be shown when the button has been rolled over and “up” when rolled out. Also be sure to add a stop command to each of these frames.
If all went well you should end up with an FLA that looks like musicplayer_base.fla (provided in the source files on top of this page) (except for the interface design of course).
|
Download Source Files