Flash MX 2004 MP3 Player Pg.6

source: http://www.thegoldenmean.com/

6 — Preliminaries

ActionScript Preliminaries

The remainder of this tutorial (and I must warn you that quite a bit remains) is all code. I guess you might have three reactions to this news. You could think

What a crashing bore. I have the .fla already. Who reads instruction books anyway? or
What a crashing bore. You’re telling me I have to tediously copy and paste all this code gibberish in order to make a lousy MP3 player? or
What a cool opportunity to get an insight into how someone approached a complex project, to see how they methodically structured their script to accomplish a goal!

I need hardly say that after months of work on this project I am hoping you lean toward “C” and feel up to continuing through the following pages! I tried to approach a project of this scale in as orderly and organized a way as possible. Developing a project like this involves a lot of reworking and fine tuning. Do yourself as many favors as you can when writing the code! Make it as easy as possible for you to locate areas you think might be causing problems. Even if you don’t intend to share the code with other people, write comments and group similar things together as much as possible rather than sprinkling around functions, variables and Objects haphazardly.

The major ActionScript structure of the Player occurs in the following order:

Import major external Classes
Declare variables, arrays and Objects
Give short names to deeply nested assets commonly referred to
Major functions
Secondary functions
Provide functionality to User Interface elements

The ActionScript Odyssey starts on this page. If you feel ready, click once on frame 14 of the scripts layer and create a keyframe by pressing the F6 key.

Before turning our attention to writing any functions we need to set up an environment to make things work efficiently. Two external classes (or packages) need to become available to our movie: the Delegate Class which will help us manage scope issues within callback functions, and the XPath Classes discussed in the previous page. We do this with the import method:

import mx.utils.Delegate;
import com.xfactorstudio.xml.xpath.*;

The star character in the second line is a “wild card” which means import everything in that folder. (At the time of this writing Neeld had 13 individual class files in the set. By using the wildcard character “*” we can make every one of them avaliable to our movie in one statement. Although you might imagine this could add unnecessary bloat to the Flash movie, it turns out that Flash will only compile the classes it uses. Isn’t that convenient?

Next we do a few things to initialize movie environment. We need to remove the text field that previously held the preloader’s “loading...” message. It’s also a good idea to prohibit resizing the movie, and we want to be sure to tell the “play” button to move to its active state because at this point in the movie music will either be playing or loading.

loadmsg_txt.removeTextField();
Stage.scaleMode = "noScale";
controls_mc.play_mc.gotoAndStop("lit");

It should be clear from previous pages that we have a lot of objects and movieclips floating around in this movie, many of them nested in other movieclips several layers deep. Referring to frequently used assets by their full path names would be extremely cumbersome (for example, the position progress bar’s full path would have to be written “loadStatus_mc.bars_mc.pBar_mc” every time we referred to it). This would be a good time to write some shortcuts, some “nicknames”, to make repeated references to some elements faster and less prone to error. Here is how I did it.

Begin by declaring critical variables and Objects so they can be accessed from within functions. If you define a variable within a function, that variable only exists while the function executes and then is removed. Varibles declared on the main timeline persist. They can be modified by functions, but it is very important to declare important varibles outside of function, even if you don’s assign them a value immediately.

Note that I am using ActionScript 2.0 datatyping notation in this tutorial to to permit the Flash compiler to perform error checking. If you are using MX 2004 and are not using datatyping, you are missing out on a very powerful and helpful feature of the program.

My apologies for the “cookbook recipe” format of what follows. I know that most of the variables at this point represent concepts and functionality I haven’t yet discussed but I hope soon things will make sense. For now you will just have to follow along. The important point from all this is to learn how to make a Flash movie that is organized and easy to work with. I will start by providing short explainations for the variables abd Objects, and then show how the block of ActionScript would look in your script.

Declare the main Sound Object:

var myTunes:Sound;

Declare the XML playlist (“pl” is short for “playlist”). Note the datatype is XML:

var plXML:XML;

Define a variable of datatype Number to store the current track (“ct”):

var ct:Number;

Define a variable of datatype Number to store the maximum tracks (“mt”):

var mt:Number;

Define a variable of datatype Number to store the position at which the sound was paused; since the Player doesn’t start out paused, set it to zero:

var pauseTime:Number = 0;

Define the default starting volume; this can later be modified by the volume slider:

var volume:Number = 50;

Determine whether or not tracks are played randomly; the default play mode is “linear”. This can be modified by “shuffle_mc”:

var shuffle:Boolean = false;

Declare a variable of datatype boolean to store a value that indicates whether or not the Player is currently stoppd. The default value is false (not stopped):

var stopped:Boolean = false;

Next is a variable of datatype boolean which serves tp indicate whether the current track has loaded or is still streaming:

var trackLoaded:Boolean;

Now declare and define a variable of datatype Number to store the width of the info text module:

var infoW:Number = info_mc._width;

Without all the commentary, this portion of your script would look like this:

var myTunes:Sound;
var plXML:XML;
var ct:Number;
var mt:Number;
var pauseTime:Number = 0;
var volume:Number = 50;
var shuffle:Boolean = false;
var stopped:Boolean = false;
var trackLoaded:Boolean;
var infoW:Number = info_mc._width;

Next come the three setIntervals that animate the progress bars and infoTxt text field:

var streamingID:Number;
var playingID:Number;
var crawlerID:Number;

Having done that, the next step is to supply short, convenient names for frequently used movieclips. Because many of them are deeply nested and frequently referred to it would be extremely cumbersome to continually have to type out the full path name.

   //the slider on the volume control
var marker:MovieClip = controls_mc.volume_mc.slider_mc;
   //the bar that indicates how much of the song has played
var pBar:MovieClip = loadStatus_mc.bars_mc.pBar_mc;
   //the bar that indicates how much of the song has downloaded
var dBar:MovieClip = loadStatus_mc.bars_mc.dBar_mc;
   //the scrolling text field
var infoTxt:TextField = info_mc.info_txt;

Now we make the infoTxt text field expandable. This permits the text field to be as wide as necessary to contain differing amounts of text:

infoTxt.autoSize = "left";

The following two lines are useful for animating the infoTxt text field. We scroll the text field relative to its parent’s (info_mc) coordinates, but code written on the main timeline will return info_mc's coordinates relative to the Stage. The globalToLocal() method will convert stage coordinates to the clip’s internal coordinates. (Sharp eyed reader Nathan at the GurusNetwork brought this to my attention. If you have your info_mc clip positioned near the left side of the Player as I did you will most likely not notice any difference. Nathan placed his at the far right side and noticed the text field was severly offset.) We first have to create a generic Object to hold the coordinates and then convert them to info_mc’s origin.

var myPoint:Object = {x:info_mc._x, y:info_mc._y};
info_mc.globalToLocal(myPoint);

Note: it was brought to my attention that designating the globalToLocal reference relative to the info_mc clip fails if the Player is embedded in another Flash Movie. If you use this as a stand-alone module the code above is fine. If you intend to embed this in another Flash movie please modify the globalToLocal code as follows:

var myPoint:Object = {x:info_mc._x, y:info_mc._y};
	_root.globalToLocal(myPoint);

Several times in the Player something is done based on the length of a clip (the volume slider and the progress bars specifically). Volume and percent are both based on a 0-100 scale, but, depending on design decisions you make, your movieclip symbols might not be 100 pixels long. The next two variables allow the Player to gracefully adjust to any dimensions:

var progBarFactor = dBar._width/100;
var volTrackFactor = controls_mc.volume_mc.track_mc._width/100;

The preliminary setup concludes by declaring six Arrays that will contain data drawn from the XML playlist file:

var artists:Array;
var albums:Array;
var titles:Array;
var times:Array;
var sizes:Array;
var urls:Array;

The stage is now set so to speak. On page seven we begin writing the code that drives the Player, beginning with the major functions.

go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14

--top--