Fall 2010 week 13:—12/08: Wed 12:25pm - 3:25pm &—12/10: Fri 6:00pm - 9:00pm

Hi Everyone,

This is the last blog posting for the autumn term, and the last that many of you will see from me forever (since you are done at TCI). So, congratulations, you've made it through the term! I'm VERY pleased by your hard work and interest. You made it a pleasure to teach this class.

Regarding the work here, you should start as soon as possible. Please forgive my lateness in posting. Because of it, I will not expect miracles, nor go through too great a length at explaining things. I will not make it too difficult for you to get the code you need to make your music players function properly.

That noted, some things I will assume that you understand and know, which will make the lengthy explanations that I've been giving you unnecessary. In order for me to know that you understand, of course, I cannot give you absolutely every tiny detail. You will have to figure some things out on your own.

You will have the class to complete this; however, you will NOT be allowed to help each other during the class. At that point, you will be on your own. I will be there to assist you, but there is a limit to what I will assist you with. You will have everything here necessary to make your project functional. Of course, you may also use past files and past blogs for further assistance.

If you are able, the best course of action is to type all the code here in the correct places, and make certain that all the files are saved in the right locations BEFORE you get to class. That way, you can come to class with only the errors to clear up and any questions you may have, and you won't have to spend time reading my blog and typing large swaths of code. Of course, to do that, you'll have to understand most of it. Remember, you have to create your own player, not use mine.

Good Luck, and I'll see you this Week!

Carter-

P.S. Let me know if there are any errors, and refresh occasionally in case someone tells me of some mistake or other and I make some correction.

• WEEK 13
  
  1. Final Project
  1. Part 1:   Setting everything up:
  1. First you'll have to create a folder for your project which should be named with your LAST NAME and FIRST INITIAL. For example, if I were one of my students, my project folder would be called johnsonC.
  2. Within that folder, you will need two additional folders, one named songs or music, and the other named fProject.
  3. You'll need to create several .as files for your fProject folder, and these should be named:

  PlayText.as,

  The first file in the list, PlayText.as will be in charge of creating and styling a dynamic text field. This text field will contain text relating to the song titles and the artists' names. This is the simplest file of the bunch, and we did something like it when placing text inside of our buttons a couple of weeks back.

  PlayShape.as,

  The next file in the list, PlayShape.as will be something that you have already completed last week, create the player graphics. This is what you did last week and, hopefully, completed by this week. What it should consist of is the main shape of your player, and two smaller windows, one for images and the other for text. You also have 4 button graphics in it as well. These you will take out eventually, and use in the next file, the PlayBtns.as file.

  PlayBtns.as,

  The third file in the list, PlayBtns.as is in charge of creating four fully-functioning buttons for your player. These will be for play, stop, next, and previous buttons. This week, you presumably designed these buttons for your player, and the shape of them doesn't matter; however, they should all be the same size and shape for simplicity sake.

  PlayControls.as, and

  The fourth file in the list, PlayControls.as is also one that we have already done: this file is basically the same code that we used when creating our text music player several weeks back. These will be the controls that actually make the player function properly, helping us move forward or backward in our playlist of songs.

  Player.as

  The last file in the list, Player.as is the file that brings all of these parts together in to one whole, functioning object.

  
  
  
  2. Part 2:   Add the code:
  1. File 1:
  
  
  1. Go back to the first file, PlayText.as and let's type some code:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.display.Sprite;
  2. import flash.text.*;
  3. import fl.motion.Color;
  
  
  4. public class PlayText extends Sprite
  5. {
  
  
  1. public function PlayText()
  2. {
  
  
  3. }
  
  
  6. }
  
  
  3. }
  
  
  2. Now let's add the variables that we'll need. They will go just after the class delcaration.
  3. The first two have to do with the text field and then the text that will go into the field, both of which are public variables, because we will need them in other files. If they were private, we would NOT be able to access them in other files.
  
  
  1. public var sngTxt:String;
  2. public var tField:TextField;
  
  
  4. The next four variables are private because we will only need to use them here in this file. They are the width and height of the text field, the general color that we start from and then the interpolated color that will give us the color of our text:
  
  
  1. private var _txtW:Number;
  2. private var _txtH:Number;
  3. private var _col:uint;
  4. private var _txtCol:uint;
  
  
  5. We will work on the constructor function of the class now, and to start out, we will just give values to a few of our variables:
  
  
  1. public function PlayText()
  2. {
  1. sngTxt="Press Play!!";
  2. _col=0x00cccc;
  3. _txtCol=Color.interpolateColor(_col,0xffffff,0.6);
  3. }
  
  
  6. Immediately following the constructor function, we must type a function that actually does the work of creating a text field and styles it. You should notice that following the name of the function, createTxt, we have the type of data that it creates, which you see after the colon is a TextField.
  7. The first 3 lines create a text field object, nad then give it a width and a height.
  8. The remaining lines create a text format object and then provide instructions as to how the text should be formatted.
  9. The last line returns data or, in this case, an object, a formatted text field object. WHERE does it return this object to, you might ask?
  10. It is returned to the very spot where the function is called. We will put the line of code that calls the function into the script last:
  
  
  1. public function createTxt():TextField
  2. {
  1. //create text field object
  2. var tField:TextField = new TextField();
  3. tField.width=_txtW;
  4. tField.height=_txtH;
  
  
  5. //create text format object
  6. var format:TextFormat = new TextFormat();
  7. format.font="Helvetica";
  8. format.color=_txtCol;
  9. format.size=12;
  10. format.bold=false;
  11. format.align=TextFormatAlign.LEFT;
  
  
  12. //apply text format object to text field object
  13. tField.defaultTextFormat=format;
  14. tField.text=sngTxt;
  15. tField.selectable=false;
  
  
  16. //return formatted text field object
  17. return tField;
  3. }
  
  
  11. Lastly, we'll add the code to the constructor function that actually CALLS the above function to create the text field object, adds it to the stage, and then finally disables the mouse so that the text is neither clickable nor detectable by the mouse:
  
  
  1. public function PlayText()
  2. {
  1. sngTxt="Press Play!!";
  2. _col=0x00cccc;
  3. _txtCol=Color.interpolateColor(_col,0xffffff,0.6);
  
  
  4. tField=createTxt();
  5. addChild(tField);
  6. tField.mouseEnabled=false;
  3. }
  
  
  
  2. File 2:
  1. Now, go to the second one one, PlayShape.as and let's type some more code. Keep in mind that YOU MUST USE YOUR OWN VARIABLES AND VALUES FOR YOUR OWN SHAPE HERE IN THIS FILE. Also, REMOVE the code for your BUTTONS and reserve for later usage in a different file:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.display.Shape;
  2. import fl.motion.Color;
  
  
  3. public class PlayShape extends Shape
  4. {
  
  
  1. public function PlayShape()
  2. {
  
  
  3. }
  
  
  5. }
  
  
  3. }
  
  
  2. As before, the first thing we need to do is to add the variables that we will be using for this file. These should be familiar from last week's class. We have the variables for the width, height, x-position, y-position, stroke thickness, basic color, interpolated stroke color, and interpolated fill color. Moreover, we need those variables for three different things: the main shape, the image window shape, and the text window shape:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.display.Shape;
  2. import fl.motion.Color;
  
  
  3. public class PlayShape extends Shape
  4. {
  
  
  1. //general variables for the whole player
  2. private var _fillCol:uint;
  3. private var _col:uint;
  4. private var _strkWt:Number;
  5. private var _strkCol:uint;
  
  
  6. //variables for the main shape
  7. private var _playW:Number;
  8. private var _playH:Number;
  9. private var _playX:Number;
  10. private var _playY:Number;
  
  
  11. //variables for the image shape
  12. private var _imgBxW:Number;
  13. private var _imgBxH:Number;
  14. private var _imgBxX:Number;
  15. private var _imgBxY:Number;
  16. private var _imgBxCol:uint;
  
  
  17. //variables for the text shape
  18. private var _txtBxW:Number;
  19. private var _txtBxH:Number;
  20. private var _txtBxX:Number;
  21. private var _txtBxY:Number;
  22. private var _txtBxCol:Number;
  
  
  23. public function PlayShape()
  24. {
  
  
  25. }
  
  
  5. }
  
  
  3. }
  
  
  3. Next, we have to provide values for many of those variables before we use them within the constructor function:
  
  
  1. public function PlayShape()
  2. {
  
  
  1. //values for main shape variables
  2. _playW = 200;
  3. _playH = 300;
  4. _playX = -100;
  5. _playY = -150;
  6. _strkWt = 1;
  7. _col = 0x00cccc;
  8. _fillCol=Color.interpolateColor(_col,0xffffff,0.4);
  9. _strkCol=Color.interpolateColor(_col,0x000000,0.4);
  
  
  10. //values for image window variable
  11. _imgBxW = 180;
  12. _imgBxH = 150;
  13. _imgBxX = -90;
  14. _imgBxY = -140;
  15. _imgBxCol=Color.interpolateColor(_col,0x000000,0.9);
  
  
  16. //values for text window variables
  17. _txtBxW = 180;
  18. _txtBxH = 40;
  19. _txtBxX = -90;
  20. _txtBxY = 20;
  21. _txtBxCol=Color.interpolateColor(_col,0x000000,0.9);
  3. }
  
  
  4. Following those variables WITHIN THE SAME FUNCTION, we must type the code that actually draws the shapes:
  
  
  1. //draw main shape
  2. graphics.lineStyle(_strkWt, _strkCol);
  3. graphics.beginFill(_fillCol);
  4. graphics.drawRoundRect(_playX, _playY, _playW, _playH, 10, 10);
  5. graphics.endFill();
  
  
  6. //draw image window
  7. graphics.beginFill(_imgBxCol);
  8. graphics.drawRoundRect(_imgBxX, _imgBxY, _imgBxW, _imgBxH, 10, 10);
  9. graphics.endFill();
  
  
  10. //draw text window
  11. graphics.beginFill(_txtBxCol);
  12. graphics.drawRoundRect(_txtBxX, _txtBxY, _txtBxW, _txtBxH, 10, 10);
  13. graphics.endFill();
  
  
  5. And that's it for the 2nd file. We'll now move on to the slightly more complicated file to create our buttons. This is nearly identical to the file that created our buttons a few weeks ago. The primary difference will be the shapes of the buttons that you create. For many of you, this will be different from the rectangular buttons that we created together in class. You must use the same shapes that you designed in class last week for your player.
  
  
  
  
  
  3. File 3:
  1. Next, you should go to the third file, PlayBtns.as and, as in the previous files, we should type the code to create the buttons. It is nearly identical to the code we used to create our buttons a couple weeks ago.
  2. In this file, keep in mind that the buttons are being created according to MY specifications for MY player. What this means is that you must customize this function to fit YOUR PLAYER DESIGN.
  3. Below, where I design the shapes for the buttons, you must modify this to fit your player. Also, you must change the colors to fit your player.
  
  
  1. package fProject
  2. {
  
  
  1. import flash.display.*;
  2. import flash.text.*;
  3. import fl.motion.Color;
  4. import flash.events.MouseEvent;
  
  
  5. public class PlayBtns extends MovieClip
  6. {
  
  
  1. public function PlayBtns()
  2. {
  
  
  3. }
  
  
  7. }
  
  
  3. }
  
  
  4. Now, we need to declare the variables that we will need for this file:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.display.*;
  2. import flash.text.*;
  3. import fl.motion.Color;
  4. import flash.events.MouseEvent;
  
  
  5. public class PlayBtns extends MovieClip
  6. {
  
  
  
  
  1. private var _w:Number;
  2. private var _h:Number;
  3. private var _lineWt:Number;
  4. private var _col:uint;
  5. private var _txtCol:uint;
  6. private var _txt:String;
  
  
  7. public function PlayBtns()
  8. {
  
  
  9. }
  
  
  7. }
  
  
  3. }
  
  
  5. Let's initialize these variables by providing values for them within the constructor function.
  6. With the risk of sounding like a broken record, make certain that you provide the width, height, line-weight and color according to YOUR design:
  
  
  1. public function PlayBtns()
  2. {
  1. _w=38;
  2. _h=24;
  3. _lineWt=1;
  4. _col=0x006666;
  5. _txt=txt;
  6. _txtCol=0x002222;
  3. }
  
  
  7. Below the constructor function, we will create two more functions, one that will create our shapes for the buttons, and one that will creat the text fields for our buttons.
  8. Notice for the first function that there is a type of Shape placed after the function name. This means that it has a return value.
  10. As in previous files, we will return a value with this function back to the place where the function was called. We will put the line in that calls this function later.
  11. This function draws the shape and then returns the completed shape::
  
  
  1. private function createRect():Shape
  2. {
  1. //create and draw shape
  2. var rect:Shape = new Shape();
  3. rect.graphics.lineStyle(_lineWt, _col);
  4. rect.graphics.beginFill(col, 0.5);
  5. rect.graphics.drawRect(0, 0, _w, _h);
  6. rect.graphics.endFill();
  
  
  7. return rect;
  3. }
  
  
  12. Like the previous function, this one returns a value back to the place where the function was called. Also as for the previous function, we will put that line which calls this function afterwards.
  13. This function creates and formats the text field that holds the text for the buttons, and the returns the completed text field.
  
  
  1. private function createTxt():TextField
  2. {
  1. //create text field object
  2. var tField:TextField = new TextField();
  3. tField.width=_w;
  4. tField.height=_h;
  
  
  5. //create text format object
  6. var format:TextFormat = new TextFormat();
  7. format.font="Verdana";
  8. format.color=_txtCol;
  9. format.size=10;
  10. format.bold=true;
  11. format.align=TextFormatAlign.CENTER;
  
  
  12. //apply formatting object to text field object
  13. tField.defaultTextFormat=format;
  14. tField.text=_txt;
  15. tField.selectable=false;
  
  
  16. return tField;
  3. }
  
  
  14. Next, we are going to create the function that creates the button object. Buttons, as you know, require several frames—the up, the over, the down, and the hit frames.
  15. That is why we need to create the same shape 3 times, with the hit frame just being a duplicate of the up frame:
  
  
  1. private function createBtn():SimpleButton
  2. {
  1. //variables for 2 interpolated colors of over & down frames
  2. var ovCol:uint=Color.interpolateColor(_col,0xffffff,0.3);
  3. var dnCol:uint=Color.interpolateColor(_col,0x000000,0.3);
  
  
  4. //create button object
  5. var btn:SimpleButton = new SimpleButton();
  
  
  6. //call function to create shape for each frame
  7. btn.upState=createRect(_col);
  8. btn.overState=createRect(ovCol);
  9. btn.downState=createRect(dnCol);
  10. btn.hitTestState=btn.upState;
  
  
  11. //return completed button
  12. return btn;
  3. }
  
  
  16. If you will notice above, in ech of the lines that call the createRect() function to create the shapes for the button, there is a term within the parentheses.
  17. This is a variable, but whenever you put a variable between parentheses it is known as a parameter.
  18. What we are doing here is passing the basic color that we have decided on for our buttons to the function that creates the shapes so that it will know what color to make the shapes. For example:
  
  
  1. btn.upState=createRect(_col);
  
  
  19. That parameter holds the color passed to the createRect() function.
  20. Therefore, we need a parameter also to receive this color in the createRect() function itself:
  
  
  1. private function createRect(col:uint):Shape
  2. {
  1. //create and draw shape
  2. var rect:Shape = new Shape();
  3. rect.graphics.lineStyle(_lineWt, _col);
  4. rect.graphics.beginFill(col, 0.5);
  5. rect.graphics.drawRect(0, 0, _w, _h);
  6. rect.graphics.endFill();
  
  
  7. return rect;
  3. }
  
  
  21. Finally, we have to add the lines of code to the constructor function where we call the functions that create the text field & button objects:
  
  
  1. public function PlayBtns()
  2. {
  1. _w=38;
  2. _h=24;
  3. _lineWt=1;
  4. _col=0x006666;
  5. _txt=txt;
  6. _txtCol=0x002222;
  
  
  7. var btn:SimpleButton=createBtn();
  8. _addChild(btn);
  9. var tField:TextField=createTxt();
  10. addChild(tField);
  11. tField.mouseEnabled=false;
  3. }
  
  
  
  4. File 4:
  1. We will now go to the last of the PRIMARY actionscript class files, the ones that actually do the job of creating objects and processes. This one is the PlayControls.as. This file has the job of controlling the play of music, and it is very nearly identical to the file that we created several weeks ago when making music play, go forward to the next song, and backward to the previous song:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.media.Sound;
  2. import flash.media.SoundChannel;
  3. import flash.net.URLRequest;
  
  
  4. public class PlayControls
  5. {
  
  
  1. public function PlayControls()
  2. {
  
  
  3. }
  
  
  6. }
  
  
  3. }
  
  
  2. Next come the variables that we must declare for this class file:
  • the first variable is for the current track number;
  • the second is for the volume level;
  • the third is for the name of the player; and
  • the fourth is for whether the order of the tracks should be shuffled or not:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.media.Sound;
  2. import flash.media.SoundChannel;
  3. import flash.net.URLRequest;
  
  
  4. public class PlayControls
  5. {
  
  
  1. public var playTCurrent:int;
  2. public var playVolume:int;
  3. public var playName:String;
  4. public var playMix:Boolean;
  
  
  5. public function PlayControls()
  6. {
  
  
  7. }
  
  
  6. }
  
  
  3. }
  
  
  3. We also have a few Arrays that we must declare:
  • the first array is for the song list;
  • the second is for the artist list: these should be in the same order to match the artist with the song;
  • the third is for the songs that have already been played; and
  • the fourth is for list of artists who have already been played:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.media.Sound;
  2. import flash.media.SoundChannel;
  3. import flash.net.URLRequest;
  
  
  4. public class PlayControls
  5. {
  
  
  1. public var playTCurrent:int;
  2. public var playVolume:int;
  3. public var playName:String;
  4. public var playMix:Boolean;
  
  
  5. public var playTList:Array;
  6. public var playAList:Array;
  7. public var playPTList:Array;
  8. public var playPAList:Array;
  
  
  9. public function PlayControls()
  10. {
  
  
  11. }
  
  
  6. }
  
  
  3. }
  
  
  4. The next are a series of variables that will become objects that pertain to the loading of sound files into the player:
  • the first variable will be used to create a URLRequest object;
  • the second variable will be used to create a sound object;
  • the third will be used to create a sound channel object—a sound object is like the water that flows from a faucet and a sound channel object is faucet that controls the water flow.
  
  
  1. package fProject
  2. {
  
  
  1. import flash.media.Sound;
  2. import flash.media.SoundChannel;
  3. import flash.net.URLRequest;
  
  
  4. public class PlayControls
  5. {
  
  
  1. public var playTCurrent:int;
  2. public var playVolume:int;
  3. public var playName:String;
  4. public var playMix:Boolean;
  
  
  5. public var playTList:Array;
  6. public var playAList:Array;
  7. public var playPTList:Array;
  8. public var playPAList:Array;
  
  
  9. public var req:URLRequest;
  10. public var snd:Sound;
  11. public var sc:SoundChannel;
  
  
  12. public function PlayControls()
  13. {
  
  
  14. }
  
  
  6. }
  
  
  3. }
  
  
  5. The last two variables contain path information. The path information that it contains refers to the track names and artist names:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.media.Sound;
  2. import flash.media.SoundChannel;
  3. import flash.net.URLRequest;
  
  
  4. public class PlayControls
  5. {
  
  
  1. public var playTCurrent:int;
  2. public var playVolume:int;
  3. public var playName:String;
  4. public var playMix:Boolean;
  
  
  5. public var playTList:Array;
  6. public var playAList:Array;
  7. public var playPTList:Array;
  8. public var playPAList:Array;
  
  
  9. public var req:URLRequest;
  10. public var snd:Sound;
  11. public var sc:SoundChannel;
  
  
  12. public var tStr:String;
  13. public var aStr:String;
  
  
  14. public function PlayControls()
  15. {
  16. }
  
  
  6. }
  
  
  3. }
  
  
  6. Now, we will start initializing arrays and other objects in the constructor function, as well as passing parameters to the player essential for it to function:
  
  
  1. public function PlayControls()
  2. {
  1. playTList = new Array();
  2. playAList = new Array();
  3. playPTList = new Array();
  4. playPAList = new Array();
  
  
  5. snd = new Sound();
  6. sc = new SoundChannel();
  3. }
  
  
  7. What comes next are the three functions that cause the player to actually play:
  • the first function, playSong(), has the job of playing the songs (imagine that!);
  • the second function, nextSong(), has the job of choosing a song from the playlist to play next; but it must also determine if the songs should be mixed in random order (shuffled) or if they should be played in order;
  • the third function, prevSong(), has the job of going back to the previous song that was played, whether or not the songs are being shuffled or being played in order.
  8. The first line (sc.stop();) makes certain that before a song is being loaded to play, that another one is not already playing.
  9. The second line (playPTList.push(playTList[playTCurrent]);) puts the current track, the one that is currently being played, into the previously played track list. The PUSH() method is what does that. The variable, playTCurrent is the number of the track that is currently being played from the list of tracks named playTList. So, whenever a song is chosen from the tracklist, playTList(), as soon as it is chosen it gets pushed into the already-played tracklist, playPTList().
  10. The third line (playPAList.push(playAList[playTCurrent]);) puts the current artist, the one for the track that is currently being played, into the previously played artist list.
  11. The fourth line (tStr=playPTList[playPTList.length-1];) puts that same previously played track into a variable. The only reason for doing this is because it is a much shorter thing to type than the whole array name. Now, rather than typing that whole thing, playPTList[playPTList.length-1], all we have to do is type tStr. The way it works, though,s that the length is the total number of tracks in the list; so, if there are 20 tracks in the list, then the length of the list is 20. However, as you should remember, counting in Arrays always begins at zero, so the number of the last track is always going to be one less that the length. Therefore, in a track list of 20 tracks, the last track will be number 19. That's why length-1 always works to select the last element of an array. The reason we want to select the last track in the array is because each time we select a track from the track list, it gets added onto the already-already played list (playPTList). That means that the song at the end of that list is always going to be the most current track. That is the one we want to say is currently playing, which is why we put it in the tStr variable.
  12. The fifth line (aStr=playPAList[playPAList.length-1];) does the same thing as the previous line, but for the previously played artist.
  13. The fifth line (trace(tStr + "\n " + aStr);) traces the track and the artist into the output window, and puts them on separate lines: that's what the \n refers to.
  14. The sixth line (var req=new URLRequest("songs/"+tStr+".mp3");) concatenates the name of the current song with the name of the folder where they are being stored, and the file extension and puts it into a new sound request object.
  15. The seventh line (var snd = new Sound();) creates a new sound object.
  16. The seventh line (snd.load(req);) loads the url request object into the sound object.
  17. The eighth line (sc=snd.play();) tells the sound channel to allow the sound object to play.
  
  
  1. public function playSong():void
  2. {
  1. sc.stop();
  2. playPTList.push(playTList[playTCurrent]);
  3. playPAList.push(playAList[playTCurrent]);
  
  
  4. tStr=playPTList[playPTList.length-1];
  5. aStr=playPAList[playPAList.length-1];
  6. trace(tStr + "\n " + aStr);
  
  
  7. var req=new URLRequest("songs/"+tStr+".mp3");
  8. var snd = new Sound();
  9. snd.load(req);
  10. sc=snd.play();
  3. }
  
  
  18. Our next function is the nextSong() function. This function checks, first, whether the songs should be mixed up randomly.
  19. If the variable playMix is set to true, then that means that the next song should be selected at random.
  20. The third line of the function (playTCurrent=Math.floor(Math.random()*playTList.length);) is what actually selects the song randomly from the list, depending on how many songs are actually in the list (playTList.length will determine the total number).
  21. If the variable playMix is NOT set to true, then the songs just come in order.
  22. However, if that is the case, then there is still another issue that must be determined: what happens when the player reaches the last song in the list? Well, it starts over at the first track (track 0).
  23. Lines 5 & 6
      (if (playTCurrent==playTList.length-1) {
      playTCurrent=0;)
      are what actually do this job.
  24. Otherwise, if the track is NOT the last track, if the player is NOT at the end of the list, then the current track number just gets incremented, added onto by 1 (playTCurrent++;);
  25. At the end, whichever track is chosen, it must still be played. That is why the playSong() function is called in the last line.
  
  
  1. public function nextSong():void
  2. {
  1. if (playMix)
  2. {
  1. playTCurrent=Math.floor(Math.random()*playTList.length);
  3. }
  4. else
  5. {
  1. if (playTCurrent==playTList.length-1)
  2. {
  1. playTCurrent=0;
  3. }
  4. else
  5. {
  1. playTCurrent++;
  6. }
  6. }
  7. playSong();
  3. }
  
  
  26. For the last function, prevSong(), the primary thing that the code has to determine is one thing: are there any songs at all that have already been added to the already-played lists for the artist names and the track names (playPAList & playPTList).
  27. If there is at least one song, then the length of the array is also going to be at least one. That means that the player is as far back as it can go. There is no other song before it. A LENGTH OF ONE means there is ONE ITEM in the array.
  28. Therefore, if there is no other song to go backward to, the player must play the same song, the song that is currently playing. This is THE ONLY SONG THERE IS, therefore it could only play that one song. That is what line 1 is asking
      if (playPAList.length <= 1)
      {
      
  29. Now, if there is only one song in our list of already played songs, then the current track, playTCurrent, is already at zero, but just in case, we must make certain it stays there. That's why line three reads as follows:
      {
        playTCurrent = 0;
      }
      
  30. However, if there is more than one song on the already-played list, then there is at least one song to go back to, you can still subtract one, or decrement the track number by 1. That is what line 5 is doing.
      else if (playPAList.length > 1)
      {
      
  31. If that is indeed the case, if there is more than one song and the user CAN go back to some previously played song. He or she is trying to go to a song that played BEFORE whatever is currently playing. That means that we should do three things, subtract one from the current track number, playTCurrent, remove the last song song from the list, and remove the artist song song from its list.
      
      Just to be clear, however, we must make certain that the current track, playTCurrent, is GREATER THAN ONE before we decrement or subtract one from it. That is why there is another if statement inside there, to make certain of this:
      {
        playPAList.pop();
        playPTList.pop();
        if (playTCurrent > 0)
        {
          playTCurrent--;
        }
      
  32. Once it is determined what is the previous song, then the playSong() function is invoked in the last line.
  
  
  1. public function prevSong():void
  2. {
  1. if (playPAList.length <= 1)
  2. {
  1. playTCurrent = 0;
  3. }
  4. else if (playPAList.length > 1)
  5. {
  1. playPAList.pop();
  2. playPTList.pop();
  3. if (playTCurrent > 0)
  4. {
  1. playTCurrent--;
  5. }
  6. }
  
  
  7. playSong();
  3. }
  
  
  
  
  
  5. File 5:
  1. The last of the class files is what brings all the previous 4 classes together into one coherent whole object. This object is then placed onto the stage of a separate .fla file. Therefore, you'll find mention all 4 classes in the last file. This is the one file that is completely new to this class, but what you will see is that there is nothing new in it:
  
  
  1. package fProject
  2. {
  
  
  1. import flash.events.MouseEvent;
  2. import flash.display.Sprite;
  3. import flash.display.MovieClip;
  4. import flash.text.*;
  5. import flash.media.Sound;
  6. import flash.media.SoundChannel;
  7. import flash.net.URLRequest;
  
  
  8. public class Player extends MovieClip
  9. {
  
  
  1. public function Player()
  2. {
  
  
  3. }
  
  
  10. }
  
  
  3. }
  
  
  2. What we have to declare at the beginning of this class are not technically variables, but objects. These are going to be the 4 objects created by the four class files we've typed, the player graphics, the buttons, the dynamic text field, and the player controls.
  3. We must add these objects to this so as to use them and make them work together. That is why we declare them at the beginning of this class:
  4. We also have an array that we must declare here. The array will hold the strings that we will use as text for the labels of the buttons, so that we know which one is the one that will stop or play, for example.
  
  
  1. package fProject
  2. {
  
  
  1. import flash.events.MouseEvent;
  2. import flash.display.Sprite;
  3. import flash.display.MovieClip;
  4. import flash.text.*;
  5. import flash.media.Sound;
  6. import flash.media.SoundChannel;
  7. import flash.net.URLRequest;
  
  
  8. public class Player extends MovieClip
  9. {
  
  
  1. public var playText:PlayText;
  2. public var playControls:PlayControls;
  3. public var playShape:PlayShape;
  4. public var playBtns:PlayBtns;
  
  
  5. public var btnTxt:Array;
  
  
  6. public function Player()
  7. {
  
  
  8. }
  
  
  10. }
  
  
  3. }
  
  
  5. In the constructor function we will start to give these objects values and add them to the stage as children of the main movie.
  6. The first two things we'll do are relatively simple: we have to populate the array, give it the string values that will be placed in the 4 buttons; and then we will add the graphic shapes into the movie as a child:
  
  
  1. public function Player()
  2. {
  1. btnTxt=new Array("PREV","PLAY","STOP","NEXT");
  
  
  2. playShape = new PlayShape();
  3. addChild(playShape);
  
  
  3. }
  
  
  7. Next we have to create and add the button objects to the stage. Now, since these are identical and since we have to do this four times, rather than typing the same lines of code four times in a row to create 4 different buttons, we will use a for loop and just type the code one time.
  8. Aside from creating and adding the buttons as children objects, we also have to position them and put the text from the array within them:
  
  
  1. public function Player()
  2. {
  1. btnTxt=new Array("PREV","PLAY","STOP","NEXT");
  
  
  2. playShape = new PlayShape();
  3. addChild(playShape);
  
  
  4. for (var i:int = 0; i < 4; i++)
  5. {
  1. playBtns=new PlayBtns();
  2. addChild(playBtns);
  3. playBtns.x = (i * (playBtns.width + 2)) -82;
  4. playBtns.y=105;
  5. playBtns.name=btnTxt[i];
  
  
  6. playBtns.addEventListener(MouseEvent.CLICK, onClick);
  6. }
  
  
  3. }
  
  
  9. Now, we'll add the text field object for the text that will show which song and artist is currently playing.
  10. We will also have to position this object and determine its width:
  
  
  1. public function Player()
  2. {
  1. btnTxt=new Array("PREV","PLAY","STOP","NEXT");
  
  
  2. playShape = new PlayShape();
  3. addChild(playShape);
  
  
  4. for (var i:int = 0; i < 4; i++)
  5. {
  1. playBtns=new PlayBtns();
  2. addChild(playBtns);
  3. playBtns.x = (i * (playBtns.width + 2)) -82;
  4. playBtns.y=105;
  5. playBtns.name=btnTxt[i];
  
  
  6. playBtns.addEventListener(MouseEvent.CLICK, onClick);
  6. }
  
  
  7. playText=new PlayText();
  8. addChild(playText);
  
  
  9. playText.x=-85;
  10. playText.y=24;
  11. playText.width=200;
  12. playText.mouseEnabled=false;
  3. }
  
  
  11. After that, we need to ceate the player controls object. In addition, we need to populate two arrays associated with the controls. These arrays are the track list, and the artist list for those tracks:
  
  
  1. public function Player()
  2. {
  1. btnTxt=new Array("PREV","PLAY","STOP","NEXT");
  
  
  2. playShape = new PlayShape();
  3. addChild(playShape);
  
  
  4. for (var i:int = 0; i < 4; i++)
  5. {
  1. playBtns=new PlayBtns();
  2. addChild(playBtns);
  3. playBtns.x = (i * (playBtns.width + 2)) -82;
  4. playBtns.y=105;
  5. playBtns.name=btnTxt[i];
  
  
  6. playBtns.addEventListener(MouseEvent.CLICK, onClick);
  6. }
  
  
  7. playText=new PlayText();
  8. addChild(playText);
  
  
  9. playText.x=-85;
  10. playText.y=24;
  11. playText.width=200;
  12. playText.mouseEnabled=false;
  
  
  
  13. playControls=new PlayControls(0,"Carter's Music Player",15,false);
  
  
  14. playControls.playTList = ["1978",
  1. "Black Eye",
  2. "Crystalised",
  3. "From the Morning",
  4. "Future",
  5. "I Want It All",
  6. "If I Had a Heart",
  7. "Kim & Jessie",
  8. "Moon and Moon",
  9. "No One Does It Like You",
  10. "Norway",
  11. "Til I Gain Control Again",
  12. "Two Doves",
  13. "Young Adult Friction"];
  
  
  15. playControls.playAList = ["Bloodcat Love",
  1. "Ivana XL",
  2. "The XX",
  3. "Nick Drake",
  4. "Cut Copy",
  5. "Trans Am",
  6. "Fever Ray",
  7. "M83",
  8. "Bat for Lashes",
  9. "Department of Eagles",
  10. "Beach House",
  11. "This Mortal Coil",
  12. "Dirty Projectors",
  13. "The Pains of Being Pure at Heart"];
  3. }
  
  
  12. Now, we must create the function, which immediately follows the constructor function, that manages the button controls. This function calls the functions in the playControl Class that handles the playSong() function, the nextSong function, and the prevSong() function depending on which button is pressed.
  13. To take care of all of this, we use a switch statement to determine which button has been clicked on, and then call the appropriate function associated with that button:
  14. The first line inside the function places the name of whichever button that the user is currently clicking into a variable named btnName.
  15. The switch statement then looks at that button name and determines which case to send it to:
  
  
  1. public function onClick(evt:MouseEvent):void
  2. {
  
  
  1. var btnName:String=evt.currentTarget.name;
  2. switch (btnName)
  3. {
  1. case "PREV" :
  1. //first case calls on the prevSong() function
  2. playControls.prevSong();
  3. playText.tField.text=playControls.tStr+"\n "+playControls.aStr;
  4. break;
  2. case "PLAY" :
  1. //second case calls on the playSong() function
  2. playControls.playSong();
  3. playText.tField.text=playControls.tStr+"\n "+playControls.aStr;
  4. break;
  3. case "STOP" :
  1. //third case stops the sound channel
  2. playText.tField.text="Press PLAY!!";
  3. playControls.sc.stop();
  4. break;
  4. case "NEXT" :
  1. //fourth case calls the nextSong() function
  2. playControls.nextSong();
  3. playText.tField.text=playControls.tStr+"\n "+playControls.aStr;
  4. break;
  4. }
  3. }
  
  
  16. Finally, we have one last VERY brief function. This little function is what actually puts the text from the btnTxt array into the buttons. So, all it does is return a string value to the place where the function was called back in the constructor function.
  17. This tiny function belongs below the onClick function above:
  
  
  1. function getBtnTxt(num):String
  2. {
  1. return btnTxt[num];
  }
  
  
  18. Notice above that it returns a string value. We are going to invoke or call this function at the moment that this object is created up above in the constructor function. Therefore, we'll have to go back up to the contructor function and put one last item into it.
  19. But before we do that, you should also notice that there is a parameter named num within the parentheses after the name of the function.
  20. If you recall, this means that the function is being passed a value. This value that it is being passed is the index number of the array, depending on which of the 4 text items in the array the button corresponds to.
  21. The i down below within the parentheses corresponds to num. The value of i, depending on which loop the looped has looped through to, is being passed down to the getBtnTxt function.
  22. Once the getBtnTxt function is completed, it passes its string value back to the point below where the function was called, and so the value goes into the object named, playBtns.
  
  
  1. public function Player()
  2. {
  1. btnTxt=new Array("PREV","PLAY","STOP","NEXT");
  
  
  2. playShape = new PlayShape();
  3. addChild(playShape);
  
  
  4. for (var i:int = 0; i < 4; i++)
  5. {
  1. playBtns=new PlayBtns(getBtnTxt(i));
  2. addChild(playBtns);
  3. playBtns.x = (i * (playBtns.width + 2)) -82;
  4. playBtns.y=105;
  5. playBtns.name=btnTxt[i];
  
  
  6. playBtns.addEventListener(MouseEvent.CLICK, onClick);
  6. }
  
  
  7. playText=new PlayText();
  8. addChild(playText);
  
  
  9. playText.x=-85;
  10. playText.y=24;
  11. playText.width=200;
  12. playText.mouseEnabled=false;
  
  
  
  13. playControls=new PlayControls(0,"Carter's Music Player",15,false);
  
  
  14. playControls.playTList = ["1978",
  1. "Black Eye",
  2. "Crystalised",
  3. "From the Morning",
  4. "Future",
  5. "I Want It All",
  6. "If I Had a Heart",
  7. "Kim & Jessie",
  8. "Moon and Moon",
  9. "No One Does It Like You",
  10. "Norway",
  11. "Til I Gain Control Again",
  12. "Two Doves",
  13. "Young Adult Friction"];
  
  
  15. playControls.playAList = ["Bloodcat Love",
  1. "Ivana XL",
  2. "The XX",
  3. "Nick Drake",
  4. "Cut Copy",
  5. "Trans Am",
  6. "Fever Ray",
  7. "M83",
  8. "Bat for Lashes",
  9. "Department of Eagles",
  10. "Beach House",
  11. "This Mortal Coil",
  12. "Dirty Projectors",
  13. "The Pains of Being Pure at Heart"];
  3. }
  
  
  
  
  
  3. Part 3:   Create the Instance:
  1. .fla File:
  1. To create the instance for this new object, you will have to open up a new .fla file named playerTest.fla.
  2. Save the file into the main folder, the one you created with your name.
  3. In the actions panel, type the following lines:
  
  
  1. import fProject.*;
  
  
  2. var player:Player=new Player();
  3. addChild(player);
  4. player.x = stage.stageWidth/2;
  5. player.y = stage.stageHeight/2;
  
  
  4. You have now completed typing the required code for this project.
  5. If you wish to add any additional functionality, you will receive extra credit.
  6. You may make the player pause which is different from stop. Or, you may add a volume function. You may also add images to the image window that we created that change depending on the song being played. Whatever you want to add will be considered extra credit.
  7. Extra credit will also be given to those who make a particularly nice design for their players, adding interesting details.
  8. If you have errors, try to get help before class from others. Or, you may wait until class time. Keep in mind, however, that only I will be helping people during class. Everyone is on her/his own and you may NOT help each other during class time.
  
  
  
  4. Part 4:   Addendum I:
  1. PlayControls parameters:
  1. If you were to have tested your code now, despite having typed it correctly, you would still have gotten errors; and chances are, the error would have told you something about PlayControls expecting 0 parameters and instead received 4.
  2. That is because, in the PlayControls.as file, I forgot to place the parameters within it to send information to the Player.as file. This information is necessary for the instance of the PlayControls clas to be created.
  3. The four pieces of information that the instance of the PlayControls class requires are the current track (playTControl), the name of the controls (playName), the volume level (playVolume), and the toggle for mixing up the tracks (playMix).
  4. We must put these 4 parameters between the parentheses of the constructor function in the PlayControls.as file as shown below:
  
  
  1. public function PlayControls(playTCurrent:int, playName:String, playVolume:int, playMix:Boolean
  2. {
  
  
  1. ...etc...
  3. }
  
  
  
  
  
  5. Part 5:   Addendum II:
  1. getBtnTxt() parameters:
  1. When you get to the very end of the code, you will probably still get a couple errors, and these errors will say something about expecting 0 arguments but instead got 1 argument for the line above that reads playBtns=new PlayBtns(getBtnTxt(i));.
  2. That's because in this line, we are creating an instance of the PlayBtns class. We created the PlayBtns Class in the PlayBtns.as file. Here, in the Player.as file, we are creating an instance of that class and then adding it as a child.
  3. In that one line, between the parentheses, we have what is known as a parameter or an argument. Whenever you put something between parentheses when creating an instance of a class, as we are doing here, we are providing an argument, or specifying a parameter for that object.
  4. In this case, we are creating an instance of one of our button objects. If you recall, when creating the script that makes the buttons, each one also contains a textfield. This is because we want a little bit of text inside each button.
  5. That text field, in order for us to see anything in it, requires some actual text. That means that we have a parameter for the button: in order for the button to be 100% functional, it must have text in it. That is what a parameter is, a feature that is required for something to be fully functional.
  6. Now, in addition, we are putting text inside that button in a special way: getBtnTxt(i);. This is a call to our third little function. That little function should already be down at the bottom of the script, and what it does is get the text that is inside of the array named btnTxt. That array contains the 4 text items for the buttons.
  7. Depending on which loop it is in, the 1st time through the loop, the 2nd, the 3rd or the 4th, the variable i will have a different number in it. If it has the number 0 in it, then the getBtnTxt() function will return the 1st text value in the array. If it contains the number 1, then it will return the 2nd text value of the array, and so on.
  8. This brings us to the error: the reason you may still be getting an error, even if all this is typed correctly, is that we have put the argument or parameter for the PlayBtns() class, here in this file, the Player.as file; but we have not put it yet into the PlayBtns.as file.
  9. The PlayBtns.as file is the Class File, and it is the file where we actually create the class for the PlayBtn objects; however, when creating it, we did NOT specify an argument. That means that we put ZERO (0) required arguments in the PlayBtns class file, but ONE (1) argument in the Player.as class file; and so we have a mismatch.
  10. In order to correct this error, you have to return to the PlayBtns.as file.
  11. There in that file, locate the constructor function for this class. It should say something like: function PlayBtns().
  12. The name of the text field object for the button is txt and it should be placed within the parentheses when you declare the class for the buttons, function PlayBtns(txt).

If the music player does not appear below OR,
if it does not play when activated, then
click here