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).

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

Hi Everyone,

We are getting down to the end of the term. Only 3 weeks from Wednesday's class is the last day for us, so we haven't much time remaining.

For this week's posting, we will be doing two exercises, both of which synthesize many of the things that we've been working with over the last several weeks. The first one is to create buttons completely out of code and place them onto the stage of a document. The second is to start working on the music player, so we'll be going back and using some of the code learned a few weeks ago from the classes that pertained to our "music player" that played on the names of the songs. Now we have to add music and a few more things.

Carter-

1. WEEK 11
   
   1. Classwork (7/14)
   • LINK    last week's class files
   2. Homework:
      • Exercise 1:    This applied example is a class that creates functioning buttons entirely with code, and it's based on our work with the graphics class this week, and with the display from last week. We will create a new custom class that creates a rectangle. This method is similar to the methods that create the circle, ellipse and rounded-rectangle of this week's class exercise.
      
      
      1. This class declaration will have 4 functions within it.
      1. Constructor—The first function is the main function. We have seen this type function before for as many times as we have created classes. The primary function of the class is always the one that actually generates or constructs, puts all things together to form the class object.
      2. Button Creator—The next function creates our button object with all of its most obvious properties, including the 4 button states; however, this button is an empty object and will not yet contain any graphics.
      3. Rectangle Creator—This function creates the rectangle graphic that will be inserted into the button above. We will use the graphics class to do this as we did this week in class to create the face.
      4. Label Text Creator—The last function creates the text-field that will go inside the button so that there is something to read that tells us the name of the button and gives us an idea of what will happen when you click on it.
      2. We must begin by creating a folder for the files we will be working with today. For this one little homework project, simply create a folder for the work and name it whatever you like. We will NOT be putting the .as and .fla files in separate folders.
      3. Next, open up a new .as file and save it into your new folder as CreateRectBtn.as.
      4. We'll start our coding by declaring a few variables which we will use to define the appearance of our rectangular button. We will do this when we instantiate our CreateRectBtn class. The resulting button will have the 4 states we normally associate with buttons: UP, OVER, DOWN, and HIT. When complete with this class, all that will remain is a listener to be attached to the button that will activate some function of your choosing.
      
      
      1. package {
      
      
      1. import flash.display.*; /* allows access to all properties of the display class built-in to Flash. Remember, the asterisk allows us to be non-specific as to which aspects of the display class we will to import, but rather import ALL of them */
      2. import flash.text.*; /* allows access to all properties of the text class built-in to Flash. */
      3. import fl.motion.Color; /* allows access to all properties of the Color class built-in to Flash. */
      
      
      4. public class CreateRectBtn 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 */
      
      
      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;
      
      
      5. }
      
      
      2. }
      
      
      5. Save the file above again into the correct directory. The name you give the file should be the SAME NAME as the NAME OF THE CLASS.
      6. You will notice that we have six private variables above. As we did in the past, the first character in all of our private variables is the underscore (_) character. This gives us a visual cue as to whether it is public or private later on. Also, recall, that the values of private variables may NOT be altered in the instance of the class that is created in the .fla file.
      7. The first variable is going to be for the width, the second is for the height, the third is for the height, the fourth is for the button color, the fifth is for the text color, and the sixth is for the actual text that will serve as a label for the button. Notice that it is typed as STRING.
      
      
      8. The next step, as you may recall, is to add the constructor function. After the name of the constructor function as we did for our music player a few weeks ago, we listed the variables that are necessary for beginning our button. In this case, we need all six. When them come inside the parentheses as they do below, we call them parameters. That means that our six class variables above, are equivalent to the parameters of the constructor function below. Note, however, that the parameter names do NOT have the underlines in front of the names:
      
      
      1. package {
      
      
      1. import flash.display.*;
      2. import flash.text.*;
      3. import fl.motion.Color;
      
      
      4. public class CreateRectBtn extends Sprite {
      
      
      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 CreateRectBtn(w:Number, h:Number, lineWt:Number, col:uint, txt:String, txtCol:uint){
      8. }
      5. }
      
      
      2. }
      
      
      9. The next step is to connect the parameters to the variables:
      
      
      1. package {
      
      
      1. import flash.display.*;
      2. import flash.text.*;
      3. import fl.motion.Color;
      
      
      4. public class CreateRectBtn extends Sprite {
      
      
      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 CreateRectBtn(w:Number, h:Number, lineWt:Number, col:uint, txt:String, txtCol:uint){
      1. _w = w;
      2. _h = h;
      3. _lineWt = lineWt;
      4. _col = col;
      5. _txt = txt;
      6. _txtCol = txtCol;
      8. }
      5. }
      
      
      2. }
      
      
      10. Since this is our constructor function, we should construct our object; and as this class is intended for the creation of a button, we will call on the simpleButton object that is built-in to Flash. Therefore, let us start that 2nd function. This 2nd function, goes directly below the closeing curly bracket of the first constructor function.
      11. As mentioned above, this function is to generate and create a button with all of its 4 parts, the up, over, down, and hit states. Notice here on the first line of the function code down below that the return value is SimpleButton.
      12. This function, therefore, has a primary job of creating the button states which primarily means determining the colors of the various button states. We will use what's known as the Color class to do this. It is a class like any other that we have used, such as the display or the graphics classes that are built-in to Flash.
      13. The method that we will be using to set the color is known as interpolateColor(). What this method does is find a color in the middle of two other colors. Given two colors, the method calculates a color that is in between the two provided. A third item in the function (its 3rd parameter) tells how close to one or the other colors that the new interpolated color should be.
      14. For example, if your two colors were black and white, and then the 3rd parameter were 0.5, the new interpolated color would be EXACTLY IN THE MIDDLE between the black and white. It would be a middle gray. If your 3rd parameter, however, were 0.1, then the new interpolated color would be closer to the 2nd color and be a very light gray as a result. If it were 0.9, it would be closer to the first and thus a very dark gray.
      
      
      1. private function createBtn():SimpleButton {
      1. var ovCol:uint = Color.interpolateColor();
      2. var dnCol:uint = Color.interpolateColor();
      2. }
      
      
      15. The variable ovCol is the variable that will hold the color for the OVER state of the button; and the variable dnCol is the variable that will hold the color for the DOWN state of the button.
      16. Okay, great, so we have the interpolateColor() methods above, but we don't have the colors yet. That is because we have to provide colors to the method so that it can determine the color in between:
      
      
      1. private function createBtn():SimpleButton {
      1. var ovCol:uint = Color.interpolateColor(_col, 0xFFFFFF);
      2. var dnCol:uint = Color.interpolateColor(_col, 0x000000);
      2. }
      
      
      17. Above, we have the two colors. In both, notice, we used the _col variable. This is the original variable up at the top that we declared as part of the class to contain the color of the button. So, there is going to be an as yet undetermined main color for the button.
      18. Notice above also that for the ovCol, the over color, that we are trying to find a color in between the original color (_col), and a new color, 0xFFFFFF, which is white. That means that for the over color we will have a lighter version of the original color.
      19. Similarly, for the dnCol, the down color, we are trying to find a color in between the original color (_col), and another new color, 0x000000, which is black. This means that for the down color we will have a darker version of the original color.
      
      
      20. Next, we have to add the 3rd parameter that I mentioned above to tell whether we want the new interpolated color to be closer to the original color, or closer to the new color added. If I wanted 50% of the original and 50% of the new color, exactly in the middle, I'd use the value of 0.5; however, I want it to be closer to the 2nd color (either white or black), so I'll use a value of 30% for the 3rd parameter, which would be 0.3.
      
      
      1. private function createBtn():SimpleButton {
      1. var ovCol:uint = Color.interpolateColor(_col, 0xFFFFFF, 0.3);
      2. var dnCol:uint = Color.interpolateColor(_col, 0x000000, 0.3);
      2. }
      
      
      21. The next thing we need to add is the line of code that actually creates the button object. However, since that entails using a rectangle graphic, the moment after we create the button object, we will have to call upon another function to do the job of creating the actual graphics:
      
      
      1. private function createBtn():SimpleButton {
      1. var ovCol:uint = Color.interpolateColor(_col, 0xFFFFFF, 0.3);
      2. var dnCol:uint = Color.interpolateColor(_col, 0x000000, 0.3);
      
      
      3. /* The line below creates the button object as an instance of SimpleButton */
      4. var btn:SimpleButton = new SimpleButton()
      
      
      5. /* The lines below, create the different states of the button. After the equal sign (=) it calls on our next function that does the work of actually creating the rectangle shape */
      6. btn.upState = createRect();
      7. btn.overState = createRect();
      8. btn.downState = createRect();
      
      
      9. /* The line below makes the HIT state the SAME as the OVER state of the button */
      10. btn.hitTestState = btn.upState;
      
      
      11. return btn;
      2. }
      
      
      22. Even though we're not quite finished with this function, let's move on to the third one. Now that we have the colors for the different states of the button, what we have left to do here is to actually create the graphics to fit into the different states. To do that we'll just draw a rectangle in our next function, the createRect() function. Notice here on the first line of the function that the return value is SHAPE. We then proceed, as we did in class this week, to use the graphics class to draw the rectangle and color it with code. This function should be typed directly below the curly bracket of the 2nd function.
      1. The first line creates the shape object:
      1. var rect:Shape = new Shape();
      2. The next line indicates what style of line we are using. If you recall from class this week, this can take 3 parameters. These parameters indicate the line-weight (thickness), the color of the line, and the alpha value of the line. If there is no alpha value stated, the default value is 100%, or 1.0.
      1. rect.graphics.lineStyle(_lineWt, _col);
      3. The variable above, _lineWt, will have a numerical value to determine the thickness of the outline; and the variable, _col is the original color.
      4. The next line of code determines the fill color as we learned in class this week. It has two parameters, the color value and then the alpha value. So, what we have is the original color set to an alpha of 50% (0.5):
      1. rect.graphics.beginFill(col, 0.5);
      5. We then must actually draw the rectangle. We didn't use this method in class, but used similar ones, the rounded-rectangle, the ellipse, and the circle. The logic is the same. It takes 4 parameters: The first two numbers are the x/y coordinates, and the 2nd 2 numbers are the width and the height.
      1. rect.graphics.drawRect(0, 0, _w, _h);
      6. The next line ends the fill as we saw this week in class. It is a method that must be started and then stopped when desired:
      1. rect.graphics.endFill();
      7. The last line returns a value. This is the same thing that we saw back when we were doing the music player, but then we just returned numbers or text, numerical and string values. In this case, we are returning an object, an entire rectangle shape.
      1. return rect;
      8. Therefore, what we end up with is a shape with both an outline and a fill, and that is sent back to the previous function that we were working on:
      
      
      1. private function createRect(col:uint):Shape {
      1. var rect:Shape = new Shape();
      2. rect.graphics.lineStyle(_lineWt, _col);
      3. rect.graphics.beginFill(col, 0.5);
      4. rect.graphics.drawRect(0, 0, _w, _h);
      5. rect.graphics.endFill();
      6. return rect;
      2. }
      
      
      23. Now that we have the shape of the button drawn, let's return to the previous function. Its job is to create the button object with all of its 4 states. It also sets the colors of those states using the interpolateColor() method. What we haven't done is put those two things together: when creating the different states of the buttons, we haven't told the function which color should be used for which button state:
      
      
      1. private function createBtn():SimpleButton {
      1. var ovCol:uint = Color.interpolateColor(_col, 0xFFFFFF, 0.3);
      2. var dnCol:uint = Color.interpolateColor(_col, 0x000000, 0.3);
      
      
      3. var btn:SimpleButton = new SimpleButton()
      
      
      4. btn.upState = createRect(_col);
      5. btn.overState = createRect(ovCol);
      6. btn.downState = createRect(dnCol);
      7. btn.hitTestState = btn.upState;
      
      
      8. return btn;
      2. }
      
      
      24. So we have our first three functions almost completely done, but not quite: our constructor function, remember, is missing a few things. Recall, what we have done in that function so far is only declare our variables. This means we have only stated their names and what kind of variables they will be, such as numerical or string variables. We haven't constructed anything yet, and that's just what a constructor function should do. In truth, it should just trigger the beginning of the construction of the buttons in this case; and there are two things that it needs to trigger:
      1. The construction of the rectangular button; and
      2. The construction of a text box that goes inside that button.
      25. To handle the first of the two above tasks, we will simply call on our createBtn() function:
      1. var btn:SimpleButton = createBtn();
      26. The following is what this one line of code does:
      1. It creates a variable (var btn) which we've given the name of btn.
      2. Next, we have typed that variable as a SimpleButton, not as a String nor as a Number nor an integer, but as a simple button object (var btn:SimpleButton).
      3. The last piece in that line is to trigger our function, createBtn().
      4. What happens next is that declaring that variable activates, our createBtn() function. That function then goes to work to create the rectangular button.
      5. When it is done, it returns a value; but in this case, as mentioned, it returns NOT a simple value but an entire object, a button object.
      6. This completed button object then gets put inside the btn variable.
      7. This means that btn is the name of our simple button.
      27. After that, we have to add it as a child object onto the stage:
      1. var btn:SimpleButton = createBtn();
      2. addChild(btn);
      28. With our button complete, we now have to create a text field. A text field is a built-in object in ActionScript, so we just type our variable as a TextField.
      1. var txt:TextField
      29. In order to create this text field, however, we have to call upon another function, a function we have NOT yet created. Let's call it createTxt():
      1. var txt:TextField = createTxt();
      30. Like the button object above, we also have to add the text field object to the stage as a child:
      1. var txt:TextField = createTxt();
      2. addChild(txt);
      31. We will also add one last line to this function, and that is to make it so that it is NOT accessible to the mouse. What this means is that we don't want it clickable or selectable. The user will not be editing the text, neither adding to it nor subtracting from it. We don't want the user to interact with it at all, other than simply reading it as the name of the button. This is important because if this step is not taken, the cursor wil change to the I-beam text editing cursor when you mouse over the button. Moreover, the button will NOT be clickable where covered by the text field if we do not disable it:
      1. var txt:TextField = createTxt();
      2. addChild(txt);
      3. txt.mouseEnabled = false;
      32. The completed constructor function now looks like this:
      
      
      1. public function CreateRectBtn(w:Number, h:Number, lineWt:Number, col:uint, txt:String, txtCol:uint){
      1. _w = w;
      2. _h = h;
      3. _lineWt = lineWt;
      4. _col = col;
      5. _txt = txt;
      6. _txtCol = txtCol;
      
      
      7. var btn:SimpleButton = createBtn();
      8. addChild(btn);
      9. var tField:TextField = createTxt();
      10. addChild(tField);
      11. tField.mouseEnabled = false;
      2. }
      
      
      
      
      33. Finally, we must create the 4th and final function. As mentioned above in number 29 above, this is the createTxt() function that we call when we must create our text field for the button. Basically, it just goes about formatting a text field the same way we would do in the Properties panel. We start out by creating a TextField object. We follow that by creating a TextFormat object. Notice in the first line of code below that the return value is the whole text field.
      
      
      1. private function createTxt():TextField {
      1. var tField:TextField = new TextField();
      2. var format:TextFormat = new TextFormat();
      2. }
      
      
      34. Now, we give the text field a width and a height:
      
      
      1. private function createTxt():TextField {
      1. var tField:TextField = new TextField();
      2. tField.width = _w;
      3. tField.height = _h;
      
      
      4. var format:TextFormat = new TextFormat();
      2. }
      
      
      35. Next, we must format the text field with a font, a color, a font-size, a font-weight, and an alignment:
      
      
      1. private function createTxt():TextField {
      1. var tField:TextField = new TextField();
      2. tField.width = _w;
      3. tField.height = _h;
      
      
      4. var format:TextFormat = new TextFormat();
      5. format.font = "Verdana";
      6. format.color = _txtCol;
      7. format.size = 10;
      8. format.bold = true;
      9. format.align = TextFormatAlign.CENTER;
      2. }
      
      
      36. Now, we must apply our formatting instructions that are inside our format variable to our text field:
      
      
      1. private function createTxt():TextField {
      1. var tField:TextField = new TextField();
      2. tField.width = _w;
      3. tField.height = _h;
      
      
      4. var format:TextFormat = new TextFormat();
      5. format.font = "Verdana";
      6. format.color = _txtCol;
      7. format.size = 10;
      8. format.bold = true;
      9. format.align = TextFormatAlign.CENTER;
      
      
      10. tField.defaultTextFormat = format;
      2. }
      
      
      37. After that, we must put some actual text into the text field. To do that, we use the _txt variable that we declared at the beginning of this exercise. We will also prevent the user from selecting the text:
      
      
      1. private function createTxt():TextField {
      1. var tField:TextField = new TextField();
      2. tField.width = _w;
      3. tField.height = _h;
      
      
      4. var format:TextFormat = new TextFormat();
      5. format.font = "Verdana";
      6. format.color = _txtCol;
      7. format.size = 10;
      8. format.bold = true;
      9. format.align = TextFormatAlign.CENTER;
      
      
      10. tField.defaultTextFormat = format;
      11. tField.text = _txt;
      12. tField.selectable = false;
      
      
      13. return tField;
      2. }
      
      
      38. Excellent, we have completed the class for our use, which will be, first, to create a single button on the stage of an .fla file, and then, second, to create a series of buttons. So, make sure you save this file one last time, and then open up a new .fla file named button_test.fla. Make sure you save this into the same directory as the .as file this time. Doing this means we do not have to type anything into the document class space in the properties panel.
      39. In this new file, let's first create our button object instances:
      1. var btn:Sprite = new CreateRectBtn();
      2. addChild(btn);
      
      
      40. This is great, but you'll get errors if you try to save and test the movie. First, you should notice that the new object that we are creating is an instance of our the object that our class creates. How do you know that? Well, look at the first line and notice that the new object we are creating has the same name as our class, CreateRectBtn().
      41. Also, if you look back at your class definition file (the .as file), you'll see that there are six parameters in the constructor function: the width, the height, the line weight, the color, the text, and the text color. That means, we must put values between the parentheses of our object that coorespond to those 6 parameters, and we must make certain that we put them in the correct order:
      
      
      1. var btn:Sprite = new CreateRectBtn(90, 20, 2, 0x0066CC, "Play", 0x000000);
      2. addChild(btn);
      
      
      42. Those numbers mean that the width will be 90, the height will be 20, the line-weight of the stroke will be 2, the color will be 0x0066cc (a light blue), the text for the button will read Play, and that the color of the text will be 0x000000 (black).
      43. You can save and test this file if you like. If you typed all the code correctly, you'll see a single small blue button on the stage, but it will not have any functionality yet. In order to give it some, we have to add a listener and give it something to do. Let's start with a listener:
      
      
      1. var btn:Sprite = new CreateRectBtn(90, 20, 2, 0x0066CC, "Play", 0x000000);
      2. addChild(btn);
      
      
      3. btn.addEventListener(MouseEvent.CLICK, traceIt);
      
      
      44. Now let's add the function. From the listener you can probably surmise that the name of the function is traceIt, and that should also give you a good idea of what it's going to do:
      
      
      1. var btn:Sprite = new CreateRectBtn(90, 20, 2, 0x0066CC, "Play", 0x000000);
      2. addChild(btn);
      
      
      3. btn.addEventListener(MouseEvent.CLICK, traceIt);
      4. function traceIt(evt:MouseEvent):void {
      1. trace("click");
      5. }
      
      
      45. Great! Now that the button is there on the stage AND it also works, let's put 4 more onto the stage. To do that, all we need is a for-loop that loops around 5 times:
      
      
      1. for (var i:int = 0; i < 5; i++) {
      1. var btn:Sprite = new CreateRectBtn(90, 20, 2, 0x0066CC, "Play", 0x000000);
      2. addChild(btn);
      
      
      3. btn.addEventListener(MouseEvent.CLICK, traceIt);
      2. }
      
      
      3. function traceIt(evt:MouseEvent):void {
      1. trace("click");
      4. }
      
      
      46. Almost done, but if you tested the above file and it functioned, you don't get five buttons, you get one larger button...What really happened is that the five buttons are sort of on top of each other, so we have to separate them and position them horizontally with space in between. To do that, we will use the var i from the loop. Remember, this starts at 0 and counts up to 5.
      47. We canuse that number and multiply it times the width of the button. This means that for the first time throught the loop we will get 0 X 80, where the zero is the i value, and 80 is the width of the button. This comes out to 0, because anything multiplied by 0 results in 0!!
      48. If we use that as the X position, the first button will be positioned along the left margin at the zero position. Then, the 2nd time through the loop, we will get 1 X 80, where i now has a value of 1 and the width of course is still 80. This results in a value of 80, so the 2nd button will now be positioned at 80 in the X direction, directly to the right of the first.
      49. For the 3rd time through the loop, we will get 2 X 80, then the 4th time, 3 X 80, and the 5th time, 4 X 80. With each loop the buttons move over 80 pixels to the right. Great, so they'll line up side-by-side.
      
      
      1. for (var i:int = 0; i < 5; i++) {
      1. var btn:Sprite = new CreateRectBtn(90, 20, 2, 0x0066CC, "Play", 0x000000);
      2. addChild(btn);
      3. btn.x = i * btn.width;
      
      
      4. btn.addEventListener(MouseEvent.CLICK, traceIt);
      2. }
      
      
      3. function traceIt(evt:MouseEvent):void {
      1. trace("click");
      4. }
      50. And lastly, if you want to put space between the buttons, then simply add five pixels to the width:
      
      
      1. for (var i:int = 0; i < 5; i++) {
      1. var btn:Sprite = new CreateRectBtn(90, 20, 2, 0x0066CC, "Play", 0x000000);
      2. addChild(btn);
      3. btn.x = i * (btn.width + 5);
      
      
      4. btn.addEventListener(MouseEvent.CLICK, traceIt);
      2. }
      
      
      3. function traceIt(evt:MouseEvent):void {
      1. trace("click");
      4. }
      
      
      
      
      
      

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

Hi Everyone,

Please forgive me the last couple of weeks for either absent or, in this case, late posting. This past week, I've been a little ill. In fact, I didn't go into work yesterday, nor today. Hopefully, I'll be there tomorrow, but if not, the posting below is to guide you through steps IN CLASS on Wednesday whether I am there or not.

If you like, you can go ahead and start whenever you like on the steps. That will help in two ways, you will have more time to look for any errors you may have, and you can get ahead with any other work we may have after and in addition to this posting.

Carter-

1. WEEK 10
   
   1. Classwork
   • LINK    last week's class files
   2. Homework:
      • Exercise 1:    Carefully follow the steps below. The steps must be completed by 3:25pm Wednesday afternoon. You may begin now if you wish, or wait until class tomorrow to start. You should have sufficient time either way. The advantages to beginning earlier are so that you may finish earlier, go home earlier, and/or move on to the next thing earlier.
      
      
      1. The first exercise has to do with drawing with code, creating vector graphics with what's known as Flash's Drawing API. We will play around with creating lines and shapes first, and then do a simple drawing. For the first exercise, we will have 3 files.
      2. The first file is the .as file that contains the class that has all the necessary code to create a drawing of a face; the second file is another .as file which actually creates a face object to put that drawing into, and then places that object on the stage; and the third file is the .fla file which is an instance of the class.
      3. So, INSIDE your project folder that you should've created last week or the week before, create a new folder named wk11. This will be sitting beside the wk10 folder that you created last week.
      4. Now, create a new ActionScript file named Face.as, save it into that folder, and type the following code to create our new class:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Shape; /* allows access to all properties of the Shape class built-in to Flash */
      
      
      2. public class Face extends Shape { /* this tells us that the custom class that we are now creating will build upon, or extend the capabilities of the Shape class that is built-in to Flash */
      
      
      1. public function Face() {
      2. }
      
      
      3. }
      
      
      2. }
      
      
      5. Save the file above.
      6. Next, we will create the file that contains the actual document class. What that means is that it is the class that the instance in the .fla file connects to. You should open a new .as file and save it as FaceTest.as inside the same directory, wk10.
      7. Type the following code inside your new file and save it again once complete:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite; /* In case you have forgotten, the Sprite class is also built-in to Flash and it is a class of objects which has properties very similar to the MovieClip class; however, it does not have its own timeline in the way MovieClips do */
      
      
      1. public function FaceTest() {
      2. }
      
      
      2. }
      
      
      2. }
      
      
      8. As mentioned, the FaceTest class is going to actually create the face object, and it to the stage, and position it:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. // Divides stage width in half so as to center face horizontally
      5. smileyFace.x = (stage.stageWidth)/2
      6. // Divides stage height in half so as to center smileyFace vertically
      7. smileyFace.y = (stage.stageHeight)/2
      2. }
      
      
      2. }
      
      
      2. }
      
      
      9. Create a new .fla file and save it in the project directory wiht the name smileyFace.fla.
      10. Set the document class of this file to the path and name of the second class file, wk10.FaceTest.
      11. Save and test. What you'll get is an empty SWF file and, hopefully, no errors.
      12. Now that we've set up our class and file structure, let's begin with the actual Drawing API.
      13. There are two basic actions when drawing with code: one is drawing lines from point-A to point-B, and the other is moving from point-A to point-B. The first is akin to when you drag your pencil across the surface of your paper from its starting point to another point on the paper and then stop. The second is more like when you lift up your pencil and move it to a new location to begin drawing a new line that is separate from the first.
      14. To draw a line with the Drawing API, we use the lineTo() action, and to move to a new starting point, we use the moveTo() action.
      15. Go to the Face.as file and add the following lines of code to draw a straight line:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // creates a line that is 1px thick
      8. graphics.lineStyle(1);
      9. /* draws a line from the origin (right in the center at 0/0, the x/y coordinates) to the new coordinates indicated, 50px to the right, (50,0) */
      10. graphics.lineTo(50, 0);
      2. }
      
      
      2. }
      
      
      2. }
      
      
      16. Save and test your .fla file again. You will see a small black line that starts in the center of the stage at (0,0) and that goes to the right 50 pixels to (50,0).
      17. Even though we didn't indicate a starting point, the drawing starts automatically by default at the origin, at (0,0) in the x/y coordinates.
      18. In this case, the origin is right in the center of the stage because when we told Flash to position the face, we told it to place it right in the center of the stage, half of the height and half of the width. If we wanted to start in a new position, we'd have to state the moveTo() action first.
      19. Let us add a vertical line to the horizontal line we already have. We won't move the pen from where it stopped at (50,0), so it will start drawing again right from the end point of the first line.
      20. I will now tell it to draw a straight line upwards. Remember y is the vertical dimension, up and down, so if we draw up from here where we are at (50,0), we will be going into negative territory. We are currently at the 0 x-position and at the 50 y-position, and drawing up from the 0 point will mean, as mentioned, that we're drawing into negative territory. That means that we have to tell Flash to go in the negative direction with a negative number:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. graphics.lineStyle(1);
      8. graphics.lineTo(50, 0);
      9. graphics.lineTo(50, -50);
      2. }
      
      
      2. }
      
      
      2. }
      
      
      21. Now, let's pick up the pen and move it to a new position and begin drawing again:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. graphics.lineStyle(1);
      8. graphics.lineTo(50, 0);
      9. graphics.lineTo(50, -50);
      10. // Move pen 100px to left & 50px downward
      11. graphics.moveTo(-50, 0)
      12. // Draw a line upwards 100px
      13. graphics.lineTo(-50, -100)
      14. // Draw a line to right 100px
      15. graphics.lineTo(50, -100)
      2. }
      
      
      2. }
      
      
      2. }
      
      
      22. We can modify the thickness of the line if we want with a value anywhere between 0 and 255. It may also include decimals if necessary. As we have it, 1 creates a 1px line and 75 would create a 75px line.
      23. If you choose a thickness of 0 pixels, this will draw a hairline.
      24. Typically, if we later scale up a 1px line to 10 times its normal size, the line will grow to 10px in thickness; however, a hairline will NEVER get thicker, no matter how big you scale it.
      25. You can also change the color and alpha of a line. Below, I will increase the thickness of the line to 5px, give it a bright red color, and cut its opacity (alpha) to 50%. Remember, to set alpha, it needs to be a decimal from 0 to 1, with 0 being invisible, and 1 being completely opaque. If you want half (50%) alpha, then you need to set it at 0.5.
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // change thickness, color, and alpha
      8. graphics.lineStyle(5, 0xff0000, 0.5);
      9. graphics.lineTo(50, 0);
      10. graphics.lineTo(50, -50);
      11. graphics.moveTo(-50, 0)
      12. graphics.lineTo(-50, -100)
      13. graphics.lineTo(50, -100)
      2. }
      
      
      2. }
      
      
      2. }
      
      
      26. Curves are a bit more complicated. Instead of just 2 numbers, the x/y coordinates of the the ending point, there are 4, the x/y coordinates of the ending point, and the x/y coordinates of the control point.
      27. What the hell is a control point? Well, think of using the pen tool or the sub-selection tool (direct-selection in Illustrator), aka the white arrow tool. When you use this too on the anchor points of a curved line, little handles point outward. You can drag on those handles to alter the curve. Each one of those is a control point. If the control point is moved to a new spot, the height or depth of the curve will change.
      28. To draw a curve, we use the curveTo() action. Inside the parentheses you put 4 numbers: curveTo(control-point-X, control-point-Y, end-point-X, end-point-Y).
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. graphics.lineStyle(5, 0xff0000, 0.5);
      8. graphics.lineTo(50, 0);
      9. graphics.lineTo(50, -50);
      10. graphics.moveTo(-50, 0)
      11. graphics.lineTo(-50, -100)
      12. graphics.lineTo(50, -100)
      13. /* First two numbers are the control point x/y coordinates; and the second two numbers are the end point x/y coordinates—this is back to the starting point of the 2nd L-shape we've drawn */
      14. graphics.curveTo(100, 100, -50,0)
      2. }
      
      
      2. }
      
      
      2. }
      
      
      29. Okay, those are the very basics. Let's start our actual drawing by commenting out those test lines:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      2. }
      
      
      2. }
      
      
      2. }
      
      
      30. We'll start the drawing with a circle. A circle takes three parameters, 3 numbers. The first two are the x/y coordinates of the center point of the circle, and the last number is the radius of the circle (remember, a radius is the distance from the center of a circle to its edge, one half of its full width, or diameter).
      31. We will draw one circle, a large circle for the head:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      14. graphics.lineStyle(5)
      15. graphics.drawCircle(0, 0, 100
      2. }
      
      
      2. }
      
      
      2. }
      32. Next, we'll draw 2 small ellipses for the eyes. They're similar to the circle, only they're oblong. Ellipses have 4 parameters, 4 numbers, instead of just 3 for circle. Like the circle, the first two numbers deal with the x/y coordinates of the center point. The 3rd number is the horizontal diameter of the ellipse (the width), and the 4th number is the vertical diameter of the ellipse (its height).
      33. We will draw one circle, a large circle for the head:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      14. graphics.lineStyle(5)
      15. graphics.drawCircle(0, 0, 100
      
      
      16. // draw eyes
      17. graphics.lineStyle(2)
      18. graphics.drawEllipse(-60, -15, 40, 15);
      19. graphics.drawEllipse(20, -15, 40, 15);
      2. }
      
      
      2. }
      
      
      2. }
      34. Now, we'll put two circles inside those ellipses:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      
      
      14. // draw head
      15. graphics.lineStyle(5)
      16. graphics.drawCircle(0, 0, 100
      
      
      17. // draw eyes
      18. graphics.lineStyle(2)
      19. graphics.drawEllipse(-60, -15, 40, 15);
      20. graphics.drawEllipse(20, -15, 40, 15);
      21. graphics.lineStyle(1)
      22. graphics.drawCircle(-40, -8, 7);
      23. graphics.drawCircle(40, -8, 7);
      2. }
      
      
      2. }
      
      
      2. }
      35. How about we add some glasses to the little face? We'll use a new shape which is basically a rectangle, but which has rounded corners. There are six parameters for this shape:
      • x: the x coordinate for the top-left corner of the rectangle
      • y: the y coordinate for the top-left corner of the rectangle
      • width: the width of the rectangle
      • height: the height of the rectangle
      • ellipseWidth: the width of the ellipse to draw the rounded corners
      • ellipseHeight: the height of the ellipse to draw the rounded corners
      36. Now, I didn't just know the right numbers to put in there, but did a little trial and error until I ended up with numbers that drew the rectangles the way they looked good to me:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      
      
      14. // draw head
      15. graphics.lineStyle(5)
      16. graphics.drawCircle(0, 0, 100
      
      
      17. // draw eyes
      18. graphics.lineStyle(2)
      19. graphics.drawEllipse(-60, -15, 40, 15);
      20. graphics.drawEllipse(20, -15, 40, 15);
      21. graphics.lineStyle(1)
      22. graphics.drawCircle(-40, -8, 7);
      23. graphics.drawCircle(40, -8, 7);
      
      
      24. // draw glasses
      25. graphics.lineStyle(3)
      26. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      27. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      2. }
      
      
      2. }
      
      
      2. }
      37. For the ear-pieces and the bridge of the glasses above the nose, we'll just draw a couple of diagonal lines and a curve:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      
      
      14. // draw head
      15. graphics.lineStyle(5)
      16. graphics.drawCircle(0, 0, 100
      
      
      17. // draw eyes
      18. graphics.lineStyle(2)
      19. graphics.drawEllipse(-60, -15, 40, 15);
      20. graphics.drawEllipse(20, -15, 40, 15);
      21. graphics.lineStyle(1)
      22. graphics.drawCircle(-40, -8, 7);
      23. graphics.drawCircle(40, -8, 7);
      
      
      24. // draw glasses
      25. graphics.lineStyle(3)
      26. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      27. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      28. graphics.moveTo(-70, -20);
      29. // left ear piece
      30. graphics.lineTo(-95, -25);
      31. graphics.moveTo(70, -20);
      32. // right ear piece
      33. graphics.lineTo(95, -25);
      34. graphics.moveTo(-10, -20);
      35. // bridge over nose
      36. graphics.curveTo(0, -25, 10, -20);
      2. }
      
      
      2. }
      
      
      2. }
      38. Drawing the mouth is simple, all we need are a couple of curves connected to each other, the bottom curve and the top curve:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      
      
      14. // draw head
      15. graphics.lineStyle(5)
      16. graphics.drawCircle(0, 0, 100
      
      
      17. // draw eyes
      18. graphics.lineStyle(2)
      19. graphics.drawEllipse(-60, -15, 40, 15);
      20. graphics.drawEllipse(20, -15, 40, 15);
      21. graphics.lineStyle(1)
      22. graphics.drawCircle(-40, -8, 7);
      23. graphics.drawCircle(40, -8, 7);
      
      
      24. // draw glasses
      25. graphics.lineStyle(3)
      26. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      27. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      28. graphics.moveTo(-70, -20);
      29. // left ear piece
      30. graphics.lineTo(-95, -25);
      31. graphics.moveTo(70, -20);
      32. // right ear piece
      33. graphics.lineTo(95, -25);
      34. graphics.moveTo(-10, -20);
      35. // bridge over nose
      36. graphics.curveTo(0, -25, 10, -20);
      
      
      37. // draw mouth
      38. graphics.lineStyle(2);
      39. graphics.moveTo(-45, 30);
      40. graphics.curveTo(0, 50, 45, 30);
      41. graphics.curveTo(0, 30, -45, 30);
      2. }
      
      
      2. }
      
      
      2. }
      39. Since we've gone through line-drawing, it's now time to try working with solid color fills. It's quite simple and can commence with the beginFill() action. This action takes two arguments: the color with which to fil the shape and a number between 0 and 1 for alpha. If you leave the alpha argument off, the default will be 1, opaque. You simply start with the beginFill() either before or after you set the lineStyle(). When drawing is complete, you call the endFill() action. We'll start by giving the head a color, and then make the whites of the eyes white, and then give the irises of the eyes colors. Lastly, we'll make the glass of the glasses somewhat tinted like sunglasses, but only partly transparent at 50%, which would be 0.5:
      
      
      1. package wk10 {
      
      
      1. import flash.display.Sprite;
      
      
      1. public function FaceTest() {
      1. // Create & center Face sprite on the stage
      2. var smileyFace:Face = new Face();
      3. addChild(smileyFace);
      4. smileyFace.x = (stage.stageWidth)/2
      5. smileyFace.y = (stage.stageHeight)/2
      6. // Testing lines
      7. // graphics.lineStyle(5, 0xff0000, 0.5);
      8. // graphics.lineTo(50, 0);
      9. // graphics.lineTo(50, -50);
      10. // graphics.moveTo(-50, 0)
      11. // graphics.lineTo(-50, -100)
      12. // graphics.lineTo(50, -100)
      13. // graphics.curveTo(100, 100, -50,0)
      
      
      14. // draw head
      15. graphics.beginFill(0xffccaa);
      16. graphics.lineStyle(5)
      17. graphics.drawCircle(0, 0, 100
      18. graphics.endFill()
      
      
      19. // draw eyes
      20. graphics.beginFill(0xffffff);
      21. graphics.lineStyle(2)
      22. graphics.drawEllipse(-60, -15, 40, 15);
      23. graphics.drawEllipse(20, -15, 40, 15);
      24. graphics.endFill()
      25. graphics.beginFill(0x009966);
      26. graphics.lineStyle(1)
      27. graphics.drawCircle(-40, -8, 7);
      28. graphics.drawCircle(40, -8, 7);
      29. graphics.endFill()
      
      
      30. // draw glasses
      31. graphics.beginFill(0x999966, 0.5);
      32. graphics.lineStyle(3)
      33. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      34. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      35. graphics.moveTo(-70, -20);
      36. // left ear piece
      37. graphics.lineTo(-95, -25);
      38. graphics.moveTo(70, -20);
      39. // right ear piece
      40. graphics.lineTo(95, -25);
      41. graphics.moveTo(-10, -20);
      42. // bridge over nose
      43. graphics.curveTo(0, -25, 10, -20);
      44. graphics.endFill()
      
      
      45. // draw mouth
      46. graphics.beginFill(0xffffff);
      47. graphics.lineStyle(2);
      48. graphics.moveTo(-45, 30);
      49. graphics.curveTo(0, 50, 45, 30);
      50. graphics.curveTo(0, 30, -45, 30);
      51. graphics.endFill()
      2. }
      
      
      2. }
      
      
      2. }
      40. Now you try and add some features, a nose or ears perhaps, maybe a moustache, a beard or some hair. You could try adding a hat or a bow-tie. You could even change the lips to be full and luscious and add some rosey cheeks. Adding other body parts could also be nice. It's all up to you, but be creative and experiment and add several things.