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.