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

Hi Everyone,

Please forgive me everyone in my WEDNESDAY class. I've not been able to post this until now.

Because of that, I will not expect you to have completed this by class-time, but please at least be about halfway done with it by the time we meet. We'll complete it in class together.

Carter-

1. WEEK 8
   
   1. Classwork
   • LINK    last week's class files will be here, but they are not ready yet.
   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, create a new project folder named dma213_classFProj. Now, INSIDE your project folder, create a new folder named wk8. From now on, we will save all our homework and classwork files inside of this new dma213_classFProj folder, week by week.
      4. Next, 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 wk8 {
      
      
      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, wk8.
      7. Type the following code inside your new file and save it again once complete:
      
      
      1. package wk8 {
      
      
      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 add it to the stage, and position it:
      
      
      1. package wk8 {
      
      
      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 whit the name smileyFace.fla.
      10. Set the document class of this file to the path and name of the second class file, wk8.FaceTest. Remember, this is typed in the properties panel.
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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 wk8 {
      
      
      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.