Fall 2010 week 11:—11/24: Wed 12:25pm - 3:25pm &—11/26: Fri 6:00pm - 9:00pm

Hi Everyone,

We are getting down to the end of the term. Only 3 weeks 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 (11/24)
   • 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 actionscript file we will be working with this week. If you have not done so, please create a wk11 directory within your projects directory.
      3. Next, open up a new .as file and save it into the correct 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 wk11
      2. {
      
      
      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. import flash.events.*; /* allows access to all events held within the events class built-in to Flash. */
      
      
      5. public class CreateRectBtn extends MovieClip { /* this tells us that the custom class that we are now creating will build upon, or extend the capabilities of the MovieClip class that is built-in to Flash. Recall that the MovieClip class is very similar to the Sprite class, only it contains timeline information, and therefore is able to have any animation within it that you wish to add */
      
      
      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;
      
      
      6. }
      
      
      3. }
      
      
      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 wk11
      2. {
      
      
      1. import flash.display.*;
      2. import flash.text.*;
      3. import fl.motion.Color;
      4. import flash.events.*;
      5. import flash.display.MovieClip;
      
      
      6. public class CreateRectBtn extends MovieClip {
      
      
      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()
      8. {
      9. }
      7. }
      
      
      3. }
      
      
      9. The next step is to connect the parameters to the variables:
      
      
      1. package wk11
      2. {
      
      
      1. import flash.display.*;
      2. import flash.text.*;
      3. import fl.motion.Color;
      4. import flash.events.*;
      5. import flash.display.MovieClip;
      
      
      6. public class CreateRectBtn extends MovieClip {
      
      
      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()
      8. {
      1. _w = 80;
      2. _h = 20;
      3. _lineWt = 2;
      4. _col = 0x006666;
      5. _txt = "hello";
      6. _txtCol = 0x002222;
      9. }
      7. }
      
      
      3. }
      
      
      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 closing 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. Button states, which appear depending on what the user is doing with them (just looking at them, mousing over them, clicking on them, etc), involve determining the colors of the button as the user interacts with it. We will use what's known as the Color class to do this. This is a class similar to any other that we have used, such as the display or the graphics classes that are built-in to Flash.
      13. The method (aka function) that we will be using to set the color is known as interpolateColor(). What this method does is find a color that is mixture 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 much of one or the other colors that the new interpolated color should contain.
      14. For example, if your two colors were black and white, and then the 3rd parameter was 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 color and thus a very dark gray.
      
      
      1. private function createBtn():SimpleButton
      2. {
      1. var ovCol:uint = Color.interpolateColor();
      2. var dnCol:uint = Color.interpolateColor();
      3. }
      
      
      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 themselves yet. That is because we have to type into the method the colors so that it can determine the mixed color:
      
      
      1. private function createBtn():SimpleButton
      2. {
      1. var ovCol:uint = Color.interpolateColor(_col, 0xFFFFFF);
      2. var dnCol:uint = Color.interpolateColor(_col, 0x000000);
      3. }
      
      
      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 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
      2. {
      1. var ovCol:uint = Color.interpolateColor(_col, 0xFFFFFF, 0.3);
      2. var dnCol:uint = Color.interpolateColor(_col, 0x000000, 0.3);
      3. }
      
      
      21. The next thing we need to add is the line of code that actually creates the button object. This will entail using a rectangle graphic that we will have to create with code (we are going to use the graphics class that we worked with when drawing the face). This means that, the moment after we create the new button object with ActionScript, we will have to call upon another function to do the job of creating the actual graphics using code we learned to draw the face:
      
      
      1. private function createBtn():SimpleButton
      2. {
      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()
      
      
      22. 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
      1. btn.upState = createRect();
      2. btn.overState = createRect();
      3. btn.downState = createRect();
      
      
      
      
      23. The line below makes the HIT state the SAME as the OVER state of the button:
      1. btn.hitTestState = btn.upState;
      
      
      2. return btn;
      1. }
      
      
      24. 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 actually to 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. We will call this function each time we need a new rectangle shape, which means it will be called for each state of the button, 3 times.
      25. Notice here on the first line of the function that the return value has a TYPE of SHAPE. Try to recall that whenever we create variables or pass values from one function to another that we must TYPE the data. That is what we are doing there. The type of data we are creating is a shape.
      26. We then proceed, as we did in class last 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
      2. {
      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;
      3. }
      
      
      27. 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
      2. {
      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;
      3. }
      
      
      28. 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 type 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.
      29. To handle the first of the two above tasks, we will simply call on our createBtn() function:
      1. var btn:SimpleButton = createBtn();
      30. 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 call the function that actually builds the button. So far we have the function written; and just now, we have created the code object, the SimpleButton object. What we don't have, however, is the trigger that puts those two things together, that calls our function, createBtn().
      4. What happens next is immediately after declaring that variable, we activate our createBtn() function so as to provide our variable with a value. 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.
      31. After that, we have to add it as a child object onto the stage:
      1. var btn:SimpleButton = createBtn();
      2. addChild(btn);
      32. With our button complete, we now have to create a text field. A text field is a built-in object in ActionScript just as a SimpleButton is a built-in object, so we just type our variable as a TextField.
      1. var txt:TextField
      33. In order to create this text field, however, we have to call upon another function, a function we have NOT yet created. We'll do it in exactly the same way we called upon the createBtn() function. Therefore, let's call it createTxt():
      1. var txt:TextField = createTxt();
      34. Like the button object above, we also have to add that text field object to the stage as a child:
      1. var txt:TextField = createTxt();
      2. addChild(txt);
      35. Now, we will add one last line to this function. We do NOT want this text field to be accessible to the mouse. What this means is that we don't want it clickable or selectable. This makes sense because 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. If we do not take this last step, the user will not be able to click on the button properly:
      1. var txt:TextField = createTxt();
      2. addChild(txt);
      3. txt.mouseEnabled = false;
      36. The completed constructor function now looks like this:
      
      
      1. public function CreateRectBtn()
      2. {
      1. _w = 80;
      2. _h = 20;
      3. _lineWt = 2;
      4. _col = 0x006666;
      5. _txt = "hello";
      6. _txtCol = 0x00222222;
      
      
      7. var btn:SimpleButton = createBtn();
      8. addChild(btn);
      9. var tField:TextField = createTxt();
      10. addChild(tField);
      11. tField.mouseEnabled = false;
      3. }
      
      
      
      
      37. 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
      2. {
      1. var tField:TextField = new TextField();
      2. var format:TextFormat = new TextFormat();
      3. }
      
      
      38. Now, we give the text field a width and a height:
      
      
      1. private function createTxt():TextField
      2. {
      1. var tField:TextField = new TextField();
      2. tField.width = _w;
      3. tField.height = _h;
      
      
      4. var format:TextFormat = new TextFormat();
      3. }
      
      
      39. 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
      2. {
      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;
      3. }
      
      
      40. Now, we must apply our formatting instructions that are inside our format variable to our text field:
      
      
      1. private function createTxt():TextField
      2. {
      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;
      3. }
      
      
      41. 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
      2. {
      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;
      3. }
      
      
      42. 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 project directory, NOT the same directory as the .as file which should be in the wk11 directory. Doing this means that all we have to do is to type the document class in the space provided in the properties panel.
      43. You do NOT have to do anything else in this document at all. Just save it after you type the document class and test it.
      
      
      
      44. 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. This should go inside the class within the constructor function. But where?
      45. We put it around those lines of code whose job it is to create the button, create the text, and then place them onto the stage:
      
      
      1. public function CreateRectBtn()
      2. {
      1. _w = 80;
      2. _h = 20;
      3. _lineWt = 2;
      4. _col = 0x006666;
      5. _txt = "hello";
      6. _txtCol = 0x002222;
      
      
      
      7. for (var i:int = 0; i < 5; i++)
      8. {
      1. var btn:SimpleButton = createBtn();
      2. addChild(btn);
      3. var tField:TextField = createTxt();
      4. addChild(tField);
      5. tField.mouseEnabled = false;
      9. }
      3. }
      
      
      46. That'll do it, but if you were to test it now, chances are you'd only see one button there. Don't worry, the ARE all there, they're just stacked on top of each other. They're just all in the same position. That means we have to change the X and/or Y position of the buttons as they are created. The first one can be where it is now, but the 2nd one has to be over a little, and the 3rd one has to be over a bit more than that (and so on) so they won't be overlapping. How do we do that?
      47. We must take into consideration the WIDTH of the button when determining the horizontal position, also known as the X position of the object on the stage.
      48. If we add 1 width to the X position of the 2nd button, it won't be on top the first. If we add 2 widths to the X position of the 3rd button, it won't be on top the first nor the second. If we add 3 widths to the X position of the 4th button, it won't be on top the first 3. If we add 4 widths to the X position of the 5th button, it won't be on top the other four (and so on if we had more of them)!!!
      49. Notice above I typed 1 width, 2 widths, 3 widths, 4 widths, and 5 widths. The key there are the numbers 1 - 5. There is only one other thing that increments up like that, and that is the counter variable that we have created in the for-loop, i. We'll use that to position the buttons.
      
      
      1. public function CreateRectBtn()
      2. {
      1. _w = 80;
      2. _h = 20;
      3. _lineWt = 2;
      4. _col = 0x0066666;
      5. _txt = "hello";
      6. _txtCol = 0x002222;
      
      
      
      7. for (var i:int = 0; i < 5; i++)
      8. {
      1. var btn:SimpleButton = createBtn();
      2. addChild(btn);
      3. btn.x = i * (btn.width);
      4. var tField:TextField = createTxt();
      5. addChild(tField);
      6. tField.mouseEnabled = false;
      9. }
      3. }
      
      
      
      
      50. But as it is here, you should notice, all the buttons are enjambed: there is no space between each button. Let's add a bit of space:
      
      
      1. public function CreateRectBtn()
      2. {
      1. _w = 80;
      2. _h = 20;
      3. _lineWt = 2;
      4. _col = 0x006666;
      5. _txt = "hello";
      6. _txtCol = 0x002222;
      
      
      
      7. for (var i:int = 0; i < 5; i++)
      8. {
      1. var btn:SimpleButton = createBtn();
      2. addChild(btn);
      3. btn.x = i * (btn.width + 5);
      4. var tField:TextField = createTxt();
      5. addChild(tField);
      6. tField.mouseEnabled = false;
      9. }
      3. }
      
      
      
      
      51. Now, let's put different text within each button. To do this, we'll use an array. First we'll declare the array at the top where we declare all the other properties. Then, in the constructor function, we'll populate the array with 5 text elements. Finally, we'll position the tField in the same way we position the btn:
      
      
      1. package wk11
      2. {
      
      
      1. import flash.display.*;
      2. import flash.text.*;
      3. import fl.motion.Color;
      4. import flash.events.*;
      5. import flash.display.MovieClip;
      
      
      6. public class CreateRectBtn extends MovieClip {
      
      
      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. private var _txtArray:Array;
      
      
      8. public function CreateRectBtn()
      9. {
      1. _w = 80;
      2. _h = 20;
      3. _lineWt = 2;
      4. _col = 0x006666;
      5. _txt = "hello";
      6. _txtCol = 0x002222;
      7. _txtArray = new Array("hello", "hola", "ça va", "ciao", "bye");
      
      
      8. for (var i:int = 0; i < 5; i++)
      9. {
      1. var btn:SimpleButton = createBtn();
      2. addChild(btn);
      3. btn.x = i * (btn.width + 5);
      
      
      4. var tField:TextField = createTxt();
      5. addChild(tField);
      6. tField.mouseEnabled = false;
      7. _txt = _txtArray[i];
      8. tField.x = i * (btn.width + 5);
      10. }
      10. }
      
      
      7. }
      
      
      3. }
      
      
      • Exercise 2:    Now you on your own must create a new method (function) within the class that causes something, anything, to happen when the user clicks on the button, even just a trace action is fine so long as it happens when the user clicks on the buttons. If you can manage to get something different to happen for each button, then even better.

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

Hi Everyone,

Please forgive me for the crappy code I posted last week. I didn't have time to do much testing after I typed it in. I create the files in Flash, and then copy it into this webpage and make a lot of errors in the process. So, what was working in flash, once it gets transferred into HTML (and last week I did it in a rush), includes many typos.

Please use the steps below to correct my code from last week.

Carter-

1. WEEK 10
   
   1. Classwork I:
   • LINK    Here are some files we will be using next week in class.
   2. Homework:
      • Exercise 1:   Please bring to me the beginning of your PORTFOLIO PROJECTS done in FLASH.
      
      
      
      • Exercise 2:    Carefully follow the steps below. The steps must be completed by the beginning of class this week.
      
      
      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 wk9. This will be sitting beside the wk8 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 wk9 {
      
      
      1. import flash.display.Shape; /* allows access to all properties of the Shape class built-in to Flash */
      
      
      2. public class Face extends MovieClip { /* 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, wk9.
      7. Type the following code inside your new file and save it again once complete:
      
      
      1. package wk9 {
      
      
      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 */
      
      
      2. public class FaceTest extends Sprite {
      3. }
      
      
      2. }
      
      
      
      
      8. As mentioned, the FaceTest class is going to actually create the face object, and it to the stage, and position it. Below, we add the constructor function for the FaceTest Class. It does the job of creating the class and its primary parts. In this case, adding an instance to the stage of the FACE CLASS and positioning it:
      
      
      1. package wk9 {
      
      
      1. import flash.display.Sprite;
      
      
      2. public class FaceTest extends 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. }
      3. }
      
      
      2. }
      
      
      
      
      9. Create a new .fla file and save it in the project directory with the name smileyFace.fla.
      10. Set the document class of this file to the path and name of the second class file, wk9.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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // creates a line that is 1px thick
      3. graphics.lineStyle(1);
      4. /* 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) */
      5. graphics.lineTo(50, 0);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // creates a line that is 1px thick
      3. graphics.lineStyle(1);
      4. /* 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) */
      5. graphics.lineTo(50, 0);
      6. graphics.lineTo(50, -50);
      2. }
      
      
      5. }
      
      
      2. }
      
      
      
      
      21. Now, let's pick up the pen and move it to a new position and begin drawing again:
      
      
      1. package wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // creates a line that is 1px thick
      3. graphics.lineStyle(1);
      4. /* 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) */
      5. graphics.lineTo(50, 0);
      6. graphics.lineTo(50, -50);
      7. // Move pen 100px to left & 50px downward
      8. graphics.moveTo(-50, 0);
      9. // Draw a line upwards 100px
      10. graphics.lineTo(-50, -100);
      11. // Draw a line to right 100px
      12. graphics.lineTo(50, -100);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // change thickness, color, and alpha
      3. graphics.lineStyle(5, 0xff0000, 0.5);
      4. graphics.lineTo(50, 0);
      5. graphics.lineTo(50, -50);
      6. graphics.moveTo(-50, 0);
      7. graphics.lineTo(-50, -100)
      8. graphics.lineTo(50, -100);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. graphics.lineStyle(5, 0xff0000, 0.5);
      3. graphics.lineTo(50, 0);
      4. graphics.lineTo(50, -50);
      5. graphics.moveTo(-50, 0);
      6. graphics.lineTo(-50, -100);
      7. graphics.lineTo(50, -100);
      8. /* 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 */
      9. graphics.curveTo(100, 100, -50,0);
      2. }
      
      
      5. }
      
      
      2. }
      
      
      
      
      29. Okay, those are the very basics. Let's start our actual drawing by commenting out those test lines:
      
      
      1. package wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      
      
      9. // draw head
      10. graphics.lineStyle(5);
      11. graphics.drawCircle(0, 0, 100);
      
      
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      
      
      9. // draw head
      10. graphics.lineStyle(5);
      11. graphics.drawCircle(0, 0, 100);
      
      
      12. // draw eyes
      13. graphics.lineStyle(2);
      14. graphics.drawEllipse(-60, -15, 40, 15);
      15. graphics.drawEllipse(20, -15, 40, 15);
      2. }
      
      
      5. }
      
      
      2. }
      
      
      
      
      34. Now, we'll put two circles inside those ellipses:
      
      
      1. package wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      
      
      9. // draw head
      10. graphics.lineStyle(5);
      11. graphics.drawCircle(0, 0, 100);
      
      
      12. // draw eyes
      13. graphics.lineStyle(2);
      14. graphics.drawEllipse(-60, -15, 40, 15);
      15. graphics.drawEllipse(20, -15, 40, 15);
      16. graphics.lineStyle(1);
      17. graphics.drawCircle(-40, -8, 7);
      18. graphics.drawCircle(40, -8, 7);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      
      
      9. // draw head
      10. graphics.lineStyle(5);
      11. graphics.drawCircle(0, 0, 100);
      
      
      12. // draw eyes
      13. graphics.lineStyle(2);
      14. graphics.drawEllipse(-60, -15, 40, 15);
      15. graphics.drawEllipse(20, -15, 40, 15);
      16. graphics.lineStyle(1);
      17. graphics.drawCircle(-40, -8, 7);
      18. graphics.drawCircle(40, -8, 7);
      
      
      19. // draw glasses
      20. graphics.lineStyle(3);
      21. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      22. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      
      
      9. // draw head
      10. graphics.lineStyle(5);
      11. graphics.drawCircle(0, 0, 100);
      
      
      12. // draw eyes
      13. graphics.lineStyle(2);
      14. graphics.drawEllipse(-60, -15, 40, 15);
      15. graphics.drawEllipse(20, -15, 40, 15);
      16. graphics.lineStyle(1);
      17. graphics.drawCircle(-40, -8, 7);
      18. graphics.drawCircle(40, -8, 7);
      
      
      19. // draw glasses
      20. graphics.lineStyle(3);
      21. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      22. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      23. graphics.moveTo(-70, -20);
      24. // left ear piece
      25. graphics.lineTo(-95, -25);
      26. graphics.moveTo(70, -20);
      27. // right ear piece
      28. graphics.lineTo(95, -25);
      29. graphics.moveTo(-10, -20);
      30. // bridge over nose
      31. graphics.curveTo(0, -25, 10, -20);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      
      
      9. // draw head
      10. graphics.lineStyle(5);
      11. graphics.drawCircle(0, 0, 100);
      
      
      12. // draw eyes
      13. graphics.lineStyle(2);
      14. graphics.drawEllipse(-60, -15, 40, 15);
      15. graphics.drawEllipse(20, -15, 40, 15);
      16. graphics.lineStyle(1);
      17. graphics.drawCircle(-40, -8, 7);
      18. graphics.drawCircle(40, -8, 7);
      
      
      19. // draw glasses
      20. graphics.lineStyle(3);
      21. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      22. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      23. graphics.moveTo(-70, -20);
      24. // left ear piece
      25. graphics.lineTo(-95, -25);
      26. graphics.moveTo(70, -20);
      27. // right ear piece
      28. graphics.lineTo(95, -25);
      29. graphics.moveTo(-10, -20);
      30. // bridge over nose
      31. graphics.curveTo(0, -25, 10, -20);
      
      
      32. // draw mouth
      33. graphics.lineStyle(2);
      34. graphics.moveTo(-45, 30);
      35. graphics.curveTo(0, 50, 45, 30);
      36. graphics.curveTo(0, 30, -45, 30);
      2. }
      
      
      5. }
      
      
      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 wk9 {
      
      
      1. import flash.display.Shape;
      2. import flash.display.MovieClip;
      
      
      3. public class Face extends MovieClip
      4. {
      
      
      1. public function Face() {
      ;
      1. // Testing lines
      2. // graphics.lineStyle(5, 0xff0000, 0.5);
      3. // graphics.lineTo(50, 0);
      4. // graphics.lineTo(50, -50);
      5. // graphics.moveTo(-50, 0);
      6. // graphics.lineTo(-50, -100);
      7. // graphics.lineTo(50, -100);
      8. // graphics.curveTo(100, 100, -50,0);
      
      
      9. // draw head
      10. graphics.beginFill(0xffccaa);
      
      
      11. // draw head
      12. graphics.lineStyle(5);
      13. graphics.drawCircle(0, 0, 100);
      
      
      14. // draw eyes
      15. graphics.beginFill(0xffffff);
      16. graphics.lineStyle(2)
      17. graphics.drawEllipse(-60, -15, 40, 15);
      18. graphics.drawEllipse(20, -15, 40, 15);
      19. graphics.endFill();
      20. graphics.beginFill(0x009966);
      21. graphics.lineStyle(1);
      22. graphics.drawCircle(-40, -8, 7);
      23. graphics.drawCircle(40, -8, 7);
      24. graphics.endFill();
      
      
      25. // draw glasses
      26. graphics.beginFill(0x999966, 0.5);
      27. graphics.lineStyle(3);
      28. graphics.drawRoundRect(-70, -25, 60, 30, 15, 15);
      29. graphics.drawRoundRect(10, -25, 60, 30, 15, 15);
      30. graphics.moveTo(-70, -20);
      31. // left ear piece
      32. graphics.lineTo(-95, -25);
      33. graphics.moveTo(70, -20);
      34. // right ear piece
      35. graphics.lineTo(95, -25);
      36. graphics.moveTo(-10, -20);
      37. // bridge over nose
      38. graphics.curveTo(0, -25, 10, -20);
      39. graphics.endFill();
      
      
      40. // draw mouth
      41. graphics.beginFill(0xffffff);
      42. graphics.lineStyle(2);
      43. graphics.moveTo(-45, 30);
      44. graphics.curveTo(0, 50, 45, 30);
      45. graphics.curveTo(0, 30, -45, 30);
      46. graphics.endFill();
      2. }
      
      
      5. }
      
      
      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.