Summer 2010 week 12:—7/28/10: Wed, 12:25 - 3:25

Hi Everyone,

Okay, so this weekend you should begin working on your final project. I will give you many of the steps, but there are some important parts that you should be able to do on your own. To start with, you should begin on your own, and then over the next day or so I will add some steps for you to work on over the next 2 weeks when the project will be due.

Class this coming Wednesday will largely be a workday. I will have posted here by class time everything that you will need for the final project and will be going around helping people. Although everyone's project will be very similar, there should be differences so that not everyone has exactly the same project. If you do, your grade will reflect it.

As a class, on the whole this is been a good one. You should be proud of yourselves that you have learned quite a lot. There is still so much to learn that I wish I could've gotten to; but good luck during the next couple weeks.

Carter-

1. WEEK 12
   
   1. Classwork
   • LINK    NO FILES from this week's class
   2. Homework:
      • Exercise 1:    First you'll have to create a folder for music. Name this folder either songs, music, or something of the sort. These files MUST be .mp3 files. It is possible to convert files with iTunes, as well as many other free programs that you can find online. Once you collect your songs and convert them into .mp3 files if necessary, then you should make a list of these songs and the artists that perform them. You may use as many songs as you like but it should be at least 5 songs.
      
      
      • Exercise 2:    Next, using what you have learned about creating graphics with ActionScript in external class files, draw your player. This player should have the following in the main function of the class:
      1. a main shape with an outline and a fill color;
      2. a window within the shape where an image will eventually appear; and
      3. a smaller text-window for text referring to the music track that is currently playing;
      • In a separate function within the class, you should create a series of four button shapes. These buttons do NOT need to function yet: all you need to do is draw the SHAPES. Eventually we will make them function and put text in them. These button-shapes should appear somewhere on the player graphic that you create. However, I want to emphasize, these shapes do NOT need to function as buttons yet. They may be any size, shape, or color of your selection.
      • Below you will see a very basic example of how to do this. You MUST create a unique version of this for your own music player.
      1. Create a folder for your work, and name it dma213_yourName.
      2. Within this folder, create another folder named fProject.
      3. Then open up Flash and create a new .as file named MusPlay.as.
      4. Type the following code within this file:
      
      
      1. package fProject {
      
      
      1. import flash.display.Sprite; <-- Notice here that I have made a change. This should clear up some of the errors that you may be having.
      
      
      2. public class MusPlay extends Sprite { /* this tells us that the custom class that we are now creating will build upon, or extend the capabilities of the Sprite class that is built-in to Flash. Recall that the Sprite class is very similar to the Movieclip class, only it does not contain any timeline information, and therefore cannot have any animation within it */
      
      
      3. public function MusPlay() { <-- Notice here that I have made another change. This should clear up any remaining errors that you may be having.
      1. var player:MusPlayShape = new MusPlayShape();
      2. addChild(player);
      3. player.x = stage.stageWidth/2;
      4. player.y = stage.stageHeight/2;
      
      
      4. }
      
      
      2. }
      
      
      5. Above, you should see that we are creating a variable named player.
      6. You will also see in the same line that we are converting it from a variable into a new object. The type of object it will be is a custom-made object called a MusPlayShape.
      1. var player:MusPlayShape = new MusPlayShape();
      7. If that type of object, MusPlayShape were to have appeared as blue code in the actionscript file, it would mean that Flash recognized it as a built-in object that is a recognized part of Flash. However, it is NOT blue text, but black. This means it is not a recognized object, but a custom object, a user-created object. It is part of a class that we will create in another separate file.
      8. The next line of code adds an instance of that MusPlayShape object class onto the stage:
      1. addChild(player);
      9. The least two lines position this object halfway between the top and bottom, and then halfway between the right and left sides of the stage:
      1. player.x = stage.stageWidth/2;
      2. player.y = stage.stageHeight/2;
      10. As you can see, this file is only responsible for creating the class instance, and positioning it as a child object onto the stage.
      11. A separate file is actually responsible for creating the graphics that make up the visible design of our music player, the MusPlayShape class file.
      12. Therefore, save the current file and open up a new .as file.
      13. Name this new file MusPlayShape.as and save it into the same directory as the other.
      14. Within this document, define the package and class as the following code suggests:
      
      
      1. package fProject {
      
      
      1. import flash.display.Shape;
      2. import fl.motion.Color;
      
      
      3. public class MusPlayShape extends Shape {
      4. }
      
      
      2. }
      
      
      15. Within the class, define the constructor function as follows:
      
      
      1. public class MusPlayShape extends Shape {
      
      
      1. public function MusPlayShape() {
      2. }
      
      
      2. }
      
      
      16. Next, within the class, we need to declare our first variables. These are for the width, the height, the x position, and the y position of the graphic shape. The second set of variables, the stroke thickness, the fill color, and the stroke color
      
      
      1. public class MusPlayShape extends Shape {
      1. private var _playW:Number;
      2. private var _playH:Number;
      3. private var _playX:Number;
      4. private var _playY:Number;
      
      
      5. private var _strkWt:Number;
      6. private var _col:uint;
      7. private var _fillCol:uint;
      8. private var _strkCol:uint;
      
      
      9. public function MusPlayShape() {
      10. }
      
      
      2. }
      
      
      17. Now, let's give those variables values within the constructor function:
      
      
      1. public function MusPlayShape() {
      1. // 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);
      2. }
      
      
      18. The last two lines above we use the same method that we did last week. Recall that the interpolateColor() method takes two colors and finds a color somewhere in the middle between them. Above our first color is _col, which above that we'd given a value of 0x00cccc (a green-blue color), and our second color is white (0xffffff). The interpolated color, therefore, will be some mixture of those two resulting in a lighter version of the original color. For the last line, we mix the same blue-green with black, resulting in a darker version of the original color.
      19. Now, let's begin our drawing:
      
      
      1. public function MusPlayShape() {
      1. // 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. // draw main shape
      11. graphics.lineStyle(_strkWt, _strkCol);
      12. graphics.beginFill(_fillCol);
      13. graphics.drawRoundRect(_playX, _playY, _playW, _playH, 10, 10);
      14. graphics.endFill();
      2. }
      
      
      20. Now, let us see what this looks like. Save this file, and open up a new .fla file. Name this file MusPlayTest.fla, and save it into the main folder that has your name.
      21. You should indicate the document class in the properties panel to indicate the first class file we created, as fProject.MusPlay.
      22. Save and test and you should end up with a rectangle with rounded corners.
      
      
      23. We'll draw another rounded rectangle for an inner window which will eventually have images displaying within it. Let's first declare new variables for the new shape and then afterwards, draw the shape within the constructor function:
      
      
      1. public class MusPlayShape extends Shape {
      1. private var _playW:Number;
      2. private var _playH:Number;
      3. private var _playX:Number;
      4. private var _playY:Number;
      
      
      5. private var _strkWt:Number;
      6. private var _col:uint;
      7. private var _fillCol:uint;
      8. private var _strkCol:uint;
      
      
      9. private var _imgBxW:Number;
      10. private var _imgBxH:Number;
      11. private var _imgBxX:Number;
      12. private var _imgBxY:Number;
      13. private var _imgBxCol:uint;
      
      
      14. public function MusPlayShape() {
      1. // 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. // image window variables
      11. _imgBxW = 180;
      12. _imgBxH = 150;
      13. _imgBxX = -90;
      14. _imgBxY = -140;
      15. _imgBxCol=Color.interpolateColor(_col,0x000000,0.9);
      
      
      16. // draw main shape
      17. graphics.lineStyle(_strkWt, _strkCol);
      18. graphics.beginFill(_fillCol);
      19. graphics.drawRoundRect(_playX, _playY, _playW, _playH, 10, 10);
      20. graphics.endFill();
      
      
      21. // draw image window
      22. graphics.beginFill(_imgBxCol);
      23. graphics.drawRoundRect(_imgBxX, _imgBxY, _imgBxW, _imgBxH, 10, 10);
      24. graphics.endFill();
      15. }
      
      
      2. }
      
      
      24. Save and test again, and you should end up with a second rectangle with rounded corners, smaller and darker and inside the first.
      25. Let's create some more variables and draw a third rounded rectangle which will eventually hold some text regarding which music track is currently playing:
      
      
      1. public class MusPlayShape extends Shape {
      1. private var _playW:Number;
      2. private var _playH:Number;
      3. private var _playX:Number;
      4. private var _playY:Number;
      
      
      5. private var _strkWt:Number;
      6. private var _col:uint;
      7. private var _fillCol:uint;
      8. private var _strkCol:uint;
      
      
      9. private var _imgBxW:Number;
      10. private var _imgBxH:Number;
      11. private var _imgBxX:Number;
      12. private var _imgBxY:Number;
      13. private var _imgBxCol:uint;
      
      
      14. private var _txtBxW:Number;
      15. private var _txtBxH:Number;
      16. private var _txtBxX:Number;
      17. private var _txtBxY:Number;
      18. private var _txtBxCol:Number;
      
      
      19. public function MusPlayShape() {
      1. // 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. // image window variables
      11. _imgBxW = 180;
      12. _imgBxH = 150;
      13. _imgBxX = -90;
      14. _imgBxY = -140;
      15. _imgBxCol=Color.interpolateColor(_col,0x000000,0.9);
      
      
      16. // text window variables
      17. _txtBxW = 180;
      18. _txtBxH = 40;
      19. _txtBxX = -90;
      20. _txtBxY = -20;
      21. _txtBxCol=Color.interpolateColor(_col,0x000000,0.9);
      
      
      22. // draw main shape
      23. graphics.lineStyle(_strkWt, _strkCol);
      24. graphics.beginFill(_fillCol);
      25. graphics.drawRoundRect(_playX, _playY, _playW, _playH, 10, 10);
      26. graphics.endFill();
      
      
      27. // draw image window
      28. graphics.beginFill(_imgBxCol);
      29. graphics.drawRoundRect(_imgBxX, _imgBxY, _imgBxW, _imgBxH, 10, 10);
      30. graphics.endFill();
      
      
      31. // draw text window
      32. graphics.beginFill(_txtBxCol);
      33. graphics.drawRoundRect(_txtBxX, _txtBxY, _txtBxW, _txtBxH, 10, 10);
      34. graphics.endFill();
      20. }
      
      
      2. }
      
      
      26. Save and test one last time, and you should end up with a third rectangle with rounded corners, again smaller and just below the second one.
      
      
      27. Your job is to take what you have learned about creating graphics with codd here in this lesson and in our previous lesson on the topic, and draw a player of your own.
      
      
      28. Recall from what I wrote above, that your class will have another function to create button graphics. These buttons do NOT need to function as buttons nor have text in them, but the graphics need to appear. There should be four of them (for future play, stop, next, andback text and functions).