Week 2 Topics

Chapter 3

• Exercise 5 - Modifying Strokes and Fills (using modifyFills.fla)
  1. To use the Property Inspector to change the color of a fill - e.g. use the Arrow took to select the blue background of the snowboard and in the Property Inspector, change the fill color
  2. To use the Paint Bucket to change the color of a fill - just select the Paint Bucket and click on the fill
  3. Zoom feature - Ctrl + plus (or Ctrl + equals) or M + click or Z plus click to zoom in, Ctrl + minus to zoom out, or click on the enlarge or reduce option in the toolbar and then click the area of the stage you want to enlarge or reduce
  4. Undo feature - Ctrl + z (or Edit>Undo)
  5. To select multiple objects - Hold down the shift key while clicking each
  6. To clear all selections - Hit the escape key
• Exercise 6 - Working with Multiple Objects (using the multiple.fla file)
  1. Select the Arrow tool and move the cursor over the line of the glove -- a small curved line appears at the end of the cursor -- this means that you will select the line (rather than the fill) if you click
  2. Double click to select the entire line around the glove. Shift + double click on the black strap to select that also
  3. Click again on the line and drag it to the right off the glove -- Flash treats the line and fill as separate objects
  4. Move the cursor over the long line and click to select it. Drag the line over the boot. Click in the right section of the boot and drag it to the right. Dragging the line on top of the boot has cut the fill into different objects. -- Since the fill color is gray and the line is a different color, the line will cut the color beneath it into separate sections.
  5. Click and drag one of the lines so that it crosses another line - then click in a blank area to deselect the line, click on one of the line segments and notice that the lines were split into four segments by having them intersect
  6. Click and drag the blue circle onto the middle of the glove - click in a blank area to deselect the circle and then click and drag the circle away -- it has left a whole in the middle of the glove. If the circle were exactly the same color as the glove it would not have cut the circle and made a hole. Instead it would have combined with the glove into one shape
• Exercise 7 - Grouping Objects (using the same multiple.fla file) - This shows you how to create shapes that overlap without cutting into or combining with one another. Also how to create a grouped object.
  1. Using the Arrow tool, select the half of the boot you separated
  2. Choose Modify>Group. A thin blue rectangle appears around the object, indicating it is a grouped object, which protects it from interecting with other elements on the Stage. To see this, drag the gray half of the boot on top of the blue glove, deselect it by clicking on a blank area of the stage, and then select it again and drag it off. Both objects are not disturbed.
  3. With the gray half still selected, choose Modify>Ungroup. Now repeats the dragging onto the blue glove, deselecting it, and dragging it off -- and you see the cutout effect now.
  4. You may want to demonstrate for yourself that if the colors are the same, the objects are combined. For example, using the rectangle tool, draw two rectangles. Move the lines off and then move the fills on top of each other. Click away and then select them and you see the two fills have combined.
• Exercise 8 - Creating Gradients (using the newGradient.fla file) - Flash lets you create two types of gradient fills: linear and radial.
  1. Using the Arrow tool, click on the blue fill on the snowboard to the left.
  2. Make sure the Color Mixer Panel is open; if not, choose Window>Color Mixer to open it. Click the down arrow to choose Radial in the Fill Style drop down menu.
  3. By clicking on the Fill Color box and selecting a color, this color will be used as the endpoint for the gradient.
  4. Using the Arrow tool, click on the blue fill of the snowboard on the left. Now select Linear in the Fill Style drop down menu.
  5. Click the top right corner of the Color Mixer Panel and select Add Swatch. This adds this gradient to the Color Swatches panel. If it isn't open, choose Window>Color Swatches to open the panel and the new gradient should be at the bottom on the right.
• Exercise 9 - Drawing with the Pen Tool (using the pen.fla file) - The Pen Tool is used in various vector graphics applications, including Macromedia Freehand and Adobe Illustrator.
  1. Note this document has two layers. The patterns layer is locked so you can't do any damage to the outlines.
  2. Make sure the draw here layer is selected in the Timeline. With the Pen tool selected, move your mouse to a corner and the triangle and click. A small circle appears -- this is an anchor point. Click another corner of the triangle to create another anchor point, thus creating a line segment with the current stroke color.
  3. Click on the third corner of the triangle and then move your cursor back to the first corner you clicked. A small circle will appear, indicating you will close the path if you click.
  4. Drawing a circle - Using the Pen tool, click at the top of the circle. Then click at the middle right edge and drag down to see two tangent handles. Move the mouse around to see how the line changes. Drag down toward the bottom right until the line segment seems to match the outline of the circle, then release the mouse button.
  5. Add the point at the bottom and then one at the left and drag up and toward the top left so that it matches the outline of the circle Then click the point at the top which will complete the circle. Save this file for the next exercise.

Creation and of a Web Page in Notepad and Viewing in Brower

• The following HTML tags should be used once and exactly once on every page in this order: <html> <head><title></title></head><body></body></html>. Note that the closing tag looks the same as the beginning tag except for the presence of the / in the closing tag. Character spacing beyond one and new lines, are ignored when the page is displayed in the browser.
• Basic formatting tags <br> to start a new line, <p> to start a new paragraph
• Absolute Links <a href="http://www.foo.com>link to foo</a> - This will create a link "Link to foo" will be underlined in the browser, typically in blue such that if the user clicks on the link, the user will be taken to the address specified in the href attribute. Absolute links must be used to link to pages on other people's websites.
• Relative Links <a href="foo.html">Link to foo</a> - A relative link is the preferred way to link to other pages on your own web site. It is preferable to absolute because with relative links, the site is portable -- i.e., it can be hosted at different sites will no changes necessary in the links. This syntax above only works if foo.html is in the same folder as the file containing the link. If they are in different folders, there are several rules which describe the way the reference should be written.