TGJ2O_animating_basics

include component="page" page="course_tabs_header" include component="page" wikiName="jmcintyre" page="menu_tgj2o_crumbs" include component="page" page="menu_tgj2o_animation"

=Using Flash in Animation=

We use [|Flash] as a tool to demonstrate the basics of animation. While it's not a perfect //animation// tool, because of many student's experiences with Pivot, it yields decent results with little extra knowledge. Flash itself is a fairly complex tool once you get into the programming language ([|action scripting]).


 * Please note: you will have roughly 20 *.fla files at the end of this exercise. I will be collecting ALL OF YOUR FILES**


 * LEARNING TO DRAW IN FLASH **

These segmented tutorials will teach you how to use the drawing tools in Flash by drawing a sailboat. You’ll be surprised how Flash’s drawing tools help you conceal the fact that you “can’t draw.” With Flash’s new Brush modes, even scribblers can color inside the lines. If you like to draw, on the other hand, you’re in for a treat. **Note: You will learn to animate your sailboat in Lesson 3.**

If you draw one line crossing another, both lines will be cut and segmented at the crossing point (unless you're in Object Drawing mode (J on the keyboard). The same is true when you draw a line through a filled shape or a brush stroke. This rule applies to lines drawn with the Line tool, the Pencil tool, or the Brush tool. The Pencil tool has modes that change the way it works. In the Straighten mode, you can easily draw a straight line by holding down the cursor and dragging. Select the properties of the Pencil tool from the Tool Modifiers before you draw.

//To use the Straighten drawing mode: //

 1. Select the Pencil tool by clicking on the Pencil icon on the toolbar to the left of your screen. It is the fourth icon from the top of the toolbar, on the left side (see Figure 1-2). You can also press Y on the keyboard. When the Pencil tool is selected, a set of Tool options appears at the bottom of the toolbar.

 2. From the Pencil Mode Selector, select the Straighten drawing mode. It looks like stairsteps.

 3. Select Black for the Line color. The Line Color modifier under the Line Mode selection box shows the currently selected line color.

 4. Line Color modifier to open the Color palette. Click to select any color. The color you select will determine the color of any line you draw with the Pencil tool until you change it.

 5. In the properties panel in the bottom, leave the Line Thickness at 1.0 points and leave the Line Style Solid.


 * Note: Solid lines usually display best on the Web. **

 6. Move your cursor to the work area. In Flash the work area is called the Stage. The cursor looks like a pencil.

 7. Hold down the mouse button and drag to draw the hull of the boat (see Figure 1-3). If you release the mouse before you complete the drawing, hold down the button and drag the Pencil cursor again to continue the line. Notice that the Pencil tool stays selected. It is not necessary to be sure you close the shape, but notice that the Pencil tool “helps” you connect lines if they are near each other.

8. Choose File, Save As to save your boat in the My Work folder. Flash files are called movies and have the extension .fla. Your boat doesn’t look much like a movie yet, but you’ll animate it in Lesson 3. **Save your file as** **boat1.fla ****. **

 You can use the Magnifier tool to take a closer look at any portion of your drawing. The Magnifier tool looks like a magnifying glass with a plus in the center of the glass. By clicking repeatedly with the Magnifier tool in Enlarge (+) mode, you can enlarge your drawing so you can edit it pixel by pixel. To magnify a specific area of the drawing, draw a marquee around the area with the Magnifier tool in Enlarge mode. The Magnifier tool in Reduce mode is a magnifying glass with a minus in the center of the glass. The Magnifier tool in Reduce (-) mode shows you a smaller version of your drawing.

//<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To magnify your drawing: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Select the Magnifier tool from the Drawing toolbar. The Magnifier tool in <span style="font-family: 'Arial','sans-serif';">Enlarge <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">mode has a plus sign to indicate that it will make the objects appear larger.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Click on the drawing to enlarge it, or create a marquee with the Magnifier tool cursor to define more precisely the area you want to enlarge. Hold down the cursor and drag it diagonally from the top left of the area to the bottom left of it. You will see a rectangle encompassing (outlining) the area. Release your cursor.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. To reduce the size of the drawing, select the Magnifier tool in Reduce mode from the Tool Modifier or press and hold the Alt key while you click on the drawing with the Magnifier tool.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> The Magnifier now has a minus sign to show that it moves you away from objects. You can use the Arrow tool to correct or improve the lines of your boat. Flash does not use handles to reshape lines. Use the Arrow tool to stretch a line or change the line’s direction, or use it to stretch a curve, change the curve’s direction, or enlarge or reduce the size of a curve

//<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> To reshape your drawing: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Open boat1.fla. As you approach a line segment, the Arrow cursor changes to a cursor with a curved modifier. Use it to create or modify a curve.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">2. As you approach an endpoint, the Arrow cursor changes to a cursor with a right-angle modifier.Use it to stretch a line or change its direction.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">3. To create additional endpoints (break a line), press the Ctrl key and drag at any point on the line.


 * <span style="font-family: 'Arial','sans-serif';">Note: **<span style="font-family: 'Arial','sans-serif';"> You create the endpoint with an arrow cursor with a curved modifier. The cursor changes to a straight arrow when you release the mouse.

<span style="font-family: 'Arial','sans-serif';">4. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Choose Edit, Undo to erase changes that are not improvements. The Rectangle tool provides a quick and precise way to create squares and rectangles. You should specify the color and width of the line before you draw. For now, accept whatever fill is currently defined. You will color the mast in the next lesson.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">1. Create a mast with the Rectangle tool, but instead of drawing the mast in its correct place on the hull, draw it off to one side of the Stage. The Line cursor looks lke a crosshair. To draw the shape, hold down your cursor and drag down and slightly to the right.
 * <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To create a mast with the Rectangle tool: **

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Before you can rotate and move the mast into position, you must select it. First, select the Arrow tool from the toolbar. The cursor looks like an arrow with a dotted rectangle to the right of it.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. Draw a marquee around the mast by placing the cursor to the left and above the mast Hold down the cursor and drag it diagonally to the right and below the mast. Release the cursor. The outline of the mast should look striped.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. With the mast selected, select the Rotate tool from the middle left of the toolbar. Eight small hollow circles appear in a rectangle surrounding the mast. These are the handles you use to rotate the mast.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 5. When you move the Arrow cursor over one of the corner circles, the cursor changes to four circling arrows. This is the Rotate tool. Click and drag the hollow circle handle in the direction you wish to rotate the mast. When you have reached the desired rotation, release the mouse button.

6. Using the Arrow tool, click and drag the mast into position. The Arrow cursor changes to two crossed arrows when it is positioned correctly to move an object. If you find the mast jumping to places you don’t want it to connect to make sure to turn off snapping to gid or snapping to objects under //View// on your top toolbar.


 * <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To create a sail for your boat: **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">[[image:sailboat3.png width="382" height="248" align="right" caption="Boat2"]]

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Use the Pencil tool in the Smooth mode to draw a sail for your boat. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Use the Arrow tool to reshape the sail. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. Use the Arrow tool to draw a marquee for selecting the sail. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. Rotate the sail if necessary and move it into place.
 * <span style="font-family: 'Arial','sans-serif';">5. ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Save your work in the My Documents folder as ****<span style="font-family: 'Arial','sans-serif';">boat2.fla ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">. **


 * <span style="font-family: 'Arial','sans-serif';">COLOR BASICS **

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Before you draw or fill a shape, choose a tool and the color you want to use for drawing or filling. You can select colors for lines or fills from the color palette. In the next exercise, you use the Paint Bucket tool to add some color to your boat. The keyboard shortcut is k.

//<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> Note //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">: The default color palette for Flash contains 216 Web-safe hues and tints. These 216 colors are compatible with major browsers on both Macs and PCs. Additional colors are generated by dithering, approximating the specified color with a pixel pattern of Web-safe colors. While colors created by dithering might work well for photographs, graphics with solid areas of dithered colors are not sharp and clear. You can make colors transparent. You can also create new colors and gradients. Each Flash file has its own color palette.

//<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To fill the hull with color: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Open your file boat2.fla. Choose the Paint Bucket tool and look at the Fill Color modifier (in the Tool Modifier section of the toolbar) to see which color is currently selected for fills. Click on the Fill Color modifier (ctrl F9 - or hit shift F9 and enter #ff9932). The Color palette opens. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Select a golden oak color for the hull (it’s the third color from the right in the ninth row of colors). <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. The Fill Color modifier changes to the color you chose. Until you change the color selection, any fill you apply will use this color, regardless of the tool you are using (Oval tool, Rectangle tool, Paint Bucket tool, or Brush tool). To change the fill for an object, select the object. Then choose the Paint Bucket tool, select a new color, and fill the object again. If the outline of your shape is not completely closed, you can fill it anyway. Use the Gap Size modifier (in the options section at the bottom of the toolbar) to specify how big a gap should be ignored. Completely closed shapes display faster, so don’t use this modifier unless you need it. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. Click on the Paint Bucket Gap Size modifier below the Fill Color modifier. From the pop-up menu, select the gap size you need. With Don’t Close Gaps selected, the Gap Size modifier looks like a closed circle. With Close Small Gaps selected, the circle on the Gap Size modifier has a small gap in it. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 5. Move the Paint Bucket cursor to the Stage and click inside the hull of the boat. The hull fills with color. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 6. Be sure the Paint Bucket is still selected. Choose the color you want from the color palette and then click on the mast. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 7. The mast fills with color.
 * <span style="font-family: 'Arial','sans-serif';">8. ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Save your file as ****<span style="font-family: 'Arial','sans-serif';">boat3.fla ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">. **


 * <span style="font-family: 'Arial','sans-serif';">MOVING A FILLED OBJECT **

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Moving a filled object can be surprising. Even in a shape created with the Rectangle tool or the Oval tool, the fill and the line are separate elements. It is easy to find you have only selected and moved the fill, leaving the outline of the shape behind.

//<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To move a filled object: //

<span style="font-family: Arial,Helvetica,sans-serif; font-size: 9pt;">1. Click inside the hull to select it. Then hold down the mouse button and drag to move the hull to the right. Notice that only the fill moves. Press Ctrl+Z to undo. 2. <span style="font-family: Arial,Helvetica,sans-serif; font-size: 9pt;">Double-click on the hull. Be sure the <span style="font-family: Arial,Helvetica,sans-serif;">fill looks checkered and the outline looks striped. Hold down the mouse button and drag the hull to the right. The object has been temporarily grouped and moves as one. <span style="font-family: Arial,Helvetica,sans-serif;"> 3. Use Undo to undo your moves.

ENHANCING THE DRAWING

Now that you have a basic boat, you want to customize it. First you can use the Brush tool to add a decorative stripe. Then you can create and apply a gradient fill to the sail and modify its line color. Finally, you can add portholes. You can add an empty porthole, using Flash 4’s new No-Color chip, and then use the Transparency option to add portholes with see-through windows. Have fun with this next exercise. At the end, you can decide to keep the brushstrokes you have added to customize the hull, or you can use File > Revert to go back to the last saved version of the boat–the version you are opening now. //To customize the hull:// 1. Open your file boat3.fla. Use the Arrow tool to select the hull. 2. Make sure your hull is selected by shift-clicking all the lines of the hull (or drag a marquee around the hull only). Choose the Brush tool (B). 3. Click on the Brush Mode modifier in the lower part of the toolbar and choose Paint Inside from the pop-up menu. The Paint Inside mode guarantees that you can color inside the lines of the hull. 4. Choose a color that contrasts with the color of your boat hull. The icon beside the Fill Color modifier is not clickable; it reminds you that the color you select will be a fill because lines created with the Brush are fills. 5. Select a small brush size. To see the available sizes, click on the down arrow on the Brush Size modifier to open the pop-up menu. 6. Select a brush shape. Click on the down arrow on the Brush Shape modifier and choose the fifth brush shape, which looks like a vertical column. 7. Move the Brush cursor to the Stage. The size and shape of the cursor reflect your choices of brush size and shape. 8. To draw, hold down the mouse button and drag. Draw a decorative stripe on the hull, letting your brushstroke continue past the edge of the hull


 * NOTE: it’s critical that you start your painting from within the hull and go to the outside of the hull, otherwise the fill won’t take properly.** **You can hold down the Shift key as you paint to constrain the brushstroke to a straight horizontal line.**

9. Release the mouse button and watch Flash tidy up your work. If you want to change the color of your stripe, you can select another color and fill the brushstroke by using the Paint Bucket. If you want to remove a color instead of replacing it with another color, you can use the Eraser tool’s Faucet modifier (options at bottom of toolbar), which drains the color out of your brushstroke or out of any fill or line. In the next exercise, you draw the color out of your brushstroke, just to see how this tool works. Then you use the Dropper to sample and match the hull color and fill in the space again with the Paint Bucket. (above the hand in the toolbar)

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To drain the color out: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Select the Eraser tool and the Faucet modifier. The faucet works like a siphon, drawing the color out of a fill. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Using the Faucet cursor, click on the brushstroke. The color drains away, leaving an ugly white gash in the side of the hull. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. To fill the white gash, you need to be sure you can match the color of the hull exactly. Flash provides a tool to help you do just that: the Dropper (D). Select the Dropper and click on the colored portion of the hull. The Fill Color modifier shows the hull color selected. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. Now select the Paint Bucket tool and fill the white slash with color. You might have to select Fill Large or Medium Gaps from the Gap Size modifier. <span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Note **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">: If you have tiny areas to fill, remember to click with the tip of the drip of the Paintbrush cursor. If your decoration is not an improvement, choose File > Revert to go back to the last saved version of the file. If you like your decoration, save it. <span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">5. Save your file as ****<span style="font-family: 'Arial','sans-serif';">boat4.fla ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">. **

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> In the next exercise, you apply a gradient fill to the sail. A gradient fill shades from one hue to another or from one tint to another. In a radial gradient, the change of hue or tint moves toward or away from a center point. Linear gradients move along a straight line from one hue or tint to another.

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To apply a gradient fill: // <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Open boat4.fla. Use the Arrow tool to select the sail. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Select the Paint Bucket tool. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. Then click on the button at the top that looks like a small palette or choose Window > Color (Shift F9). <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. On the fill drop down menu (says solid by default) click on the linear gradient tab. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 5. Locate the Color Definition bar—it has two color pointers for modifying the gradient. Color pointers define where colors change in a gradient. <span style="font-family: Arial,Helvetica,sans-serif;"> <span style="font-family: 'Arial','sans-serif';">6. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Click on the left color pointer on the Gradient definition bar and click on the color swatch to see the Color palette. Select a rich medium brown from the Color palette. The color on the left color pointer changes to a rich red brown. Click on the right color pointer on the Gradient definition bar. Select a golden apricot from the Color palette. The color on the right color pointer changes to a golden apricot. <span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: 'Arial','sans-serif';"> 7. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Click then drag your cursor in your boat’s sail. You’ll notice that your gradient will follow the direction of your dragged cursor. The longer the cursor is dragged then released, the more gentle the gradient. The quicker the cursor is released in the drag, the more defined the gradient.

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif';">Cursor dragged left-right longer Cursor dragged left-right short distance // <span style="font-family: 'Arial','sans-serif';"> <span style="font-family: 'Arial','sans-serif';"> 8. On the pull-down menu below the Gradient definition bar, change from Radial to Linear. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 9. You can change the gradient’s fill abruptness. Move the right color pointer along the slider. Notice how the gradient changes more gradually or more abruptly from one color to the other as you move the color pointer. You have created a new gradient. You can save this gradient (by clicking on your Color panel) so you can use it later. <span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">10. ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Save your file as ****<span style="font-family: 'Arial','sans-serif';">boat5.fla ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">in the My Documents file folder. **

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To select the colors for a gradient by specifying a color in the RGB text boxes: //

<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Click on the right color pointer and type the following numbers in the RGB text boxes: R: <span style="font-family: 'Arial','sans-serif';">232 <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">, G: <span style="font-family: 'Arial','sans-serif';">23 <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">, B: <span style="font-family: 'Arial','sans-serif';">201 <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">. The color and the right color pointer turn to a hot pink. The current color window shows how the gradient has changed.

<span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Note **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">: Full saturation of a color is 255; no saturation is 0.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. To insert another color in your linear gradient, simply hover the cursor at the desired location of the colour definition bar and click. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 5. Adjust the color pointers to control the transition from one color to another. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 6. if you wish to save this gradient click in the Color Swatches panel. <span style="font-family: Arial,Helvetica,sans-serif;"> <span style="font-family: 'Arial','sans-serif';">7. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">If you want to save your unique colour palette (swatches) click on the top right corner of the Colour Palette, select save colour, then save it in your work folder as <span style="font-family: 'Arial','sans-serif';">boat_colours.clr <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">.

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To change line color by using the Ink Bottle: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. First, select the sail by clicking on the line at one edge of the sail with the Arrow tool. Use Shift+click to select the two lines at the other edges of the sail. The outline of the sail should appear striped. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Choose the Ink Bottle tool from the toolbar (seventh tool down on the left) and choose a color that complements the gradient fill of the sail. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. Move the Ink Bottle cursor to the Stage and click on the sail. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. The line color changes to the color you chose in step 2. <span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">5. ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Save your file as ****<span style="font-family: 'Arial','sans-serif';">boat6.fla ****<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">and close the file. **

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> Because this is a luxury sailboat, you need to add portholes. The Oval tool, like the Rectangle tool, draws and fills the shape at the same time. Before you draw the shape, select and set Tool Modifiers for line and fill colors and select any Tool Mode Modifiers you want.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> When you choose your Fill color in the next exercise, use Flash’s No-Color chip in the top right corner of the color palette. This No-Color choice enables you to draw a circle or rectangle with no fill or with no outline.

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To draw an “empty” porthole: //

<span style="font-family: 'Arial','sans-serif';"> 1. Open boat6.fla and choose the Oval tool. Select a dark mahogany for the line color and 2 points for the line width. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Click on the Fill Color modifier to open the Color palette. Instead of a color, select the empty square (box with a diagonal red line through it) at the top left corner of the palette.

<span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Note **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">: The icons beside the two Color Selection boxes remind you that the top box selects the line color and the lower box selects the fill color.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. Move the Oval cursor to the Stage. It looks like a crosshair. Hold down the Shift key (PC) or Cmd key (Mac) while you hold down the mouse button and drag to make a perfect circle. It looks as if you have drawn a dark brown circle on the boat, but that’s not all that has happened.

<span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Note **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">: Remember that when you draw a line on a solid shape, it cuts the shape.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. Click inside the circle. A round shape is selected. <span style="font-family: Arial,Helvetica,sans-serif;"> <span style="font-family: 'Arial','sans-serif';">5. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Hold down your mouse button and drag the round shape outside the boat, as shown. You have “cut out” a section of the hull and created a porthole (an actual circle devoid of any fill now).

<span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif';">Note **<span style="font-family: 'Arial','sans-serif';">: If you had selected a colored fill, you would have replaced the boat color fill with the color of your round shape. Because you chose a No-Color fill (no fill at all), the outline of your circle acts just like a cookie cutter and cuts a round shape out of the hull.

<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: 'Arial','sans-serif';"> 6. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">You don’t need the round shape you have cut from the hull. Click on it and press Delete to delete the shape. You will be able to see through your empty porthole to see the waves behind the boat (you’ll draw this soon). Just for fun, you are now going to make two portholes with transparent windows you can also see right through.

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To draw a porthole with a transparent window: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Select the Oval tool. Choose a 2-point wide, dark mahogany line and a pale gray fill. <span style="font-family: Arial,Helvetica,sans-serif;"> <span style="font-family: 'Arial','sans-serif';">2. Go up to the Color Mixer window and change the <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">alpha slider. This slider (or the alpha % text box) controls the degree of transparency of your color. As you move the slider down, the color becomes more and more transparent (you can see the grid behind the colour to indicate that it is more and more transparent). Move the alpha slider to 51%

Draw two more portholes on the hull. Later, when you place an ocean behind the boat, you’ll be able to see it through all three portholes, but you’ll only get splashed through the open porthole you drew first (insert laughtrack here).

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> GROUPING OBJECTS

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> Because you’ll be moving the boat around as you arrange it among the waves, it might be more convenient to group all the parts of the boat so that they are easy to select and move.

<span style="font-family: Arial,Helvetica,sans-serif;"> //<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">To group objects: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Select the whole boat. A striped outline appears around each part. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. Choose Modify > Group. The striped outline now surrounds the whole boat. If you hold your mouse button down and drag the hull, the boat moves as a unit. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. Note: When objects are grouped, you cannot select one of the objects and modify it unless you first choose Modify > Ungroup to separate them. <span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. Your boat is nearly complete. **Save it as** **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">boat7.fla **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> and close the file. Now it’s time to add some text to the drawing.

<span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">USING THE TEXT TOOL **

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> The Text Tool gives you real text that remains selectable and retains its text attributes even when added to a graphic shape. For example, you can choose a font and font size and apply attributes such as bold and italic.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> **Note:** Flash powerful editable text feature (dynamic text, or input text – from the drop down menu on the properties panel when you select the text tool in the toolbar) is important to its interactive features, which are beyond the scope of this lesson. Editable text can be used for forms, passwords,variables, and user interaction. We’ll play with these later when we make some games in the course.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> You can insert ordinary text in two ways. You can select the Text tool and click once on the Stage where you want to insert a single line of text. Flash creates a text box with a circular resizing handle (which changes into a rectangular handle after you’ve typed) at the top right of the box. As you type, the text block widens. Text does not wrap automatically, but you can create line breaks by using the Enter key. In the final exercise for this lesson, you will use this method to type the name for your drawing. The second kind of text block has a fixed width and is used for larger blocks of text. You select the Text tool and use it to draw a rectangle to hold your text. Flash creates a text box with a square resizing handle. The text you type wraps automatically and the box expands line by line as you need more space.

<span style="font-family: Arial,Helvetica,sans-serif;">//<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> To use the Text tool: //

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 1. Open your file boat7.fla or open boat7.fla from the Lesson1 folder. Choose the Text tool from the toolbar (third from the top in the right column). The keyboard shortcut is A. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 2. From the properties panel below the scroll to Arial as your font choice. Choose 22 as the size of your font. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 3. Select a color for the text color. The colour you choose for your font will be chosen from the properties panel not from the line or fill colour choices from the bottom of the toolbar. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 4. Leave the left-aligned paragraph style selected. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 5. Move the Text cursor to the Stage (the cursor looks like a crossbar with a letter A). In an empty space on the Stage, click on the mouse button to create a text box. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 6. The height of the text box is determined by the type size you selected. The width of the text block expands as you type. Type My Boat in the text box to name your boat. Click on the Stage to deselect the text box. You can use the Arrow tool to scale text. Be sure that you use a corner handle to avoid distorting the text. The text is vector based when the rectangular handle is shown and scales with no distortion. However, using the transform tool to resize text will make the text expand as a bitmap image and ‘pixelate’. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 7. Choose the Arrow tool and click on the Scale icon at the bottom right of the toolbar. A marquee with eight square handles surrounds the text.

<span style="font-family: Arial,Helvetica,sans-serif;"> **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">Note **<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">: Because letters are round and pixels are square, it’s inevitable that text—at large sizes especially—looks jagged on a computer display. Flash has the capability to smooth curves in your text when it creates the Flash Player file (swf). Flash can also smooth the curves of other rounded objects in your movie. This function is called antialiasing. Antialiasing blurs the edge of the curve to which it is applied so it appears smoother. When you publish your movie, you will decide whether to have the text antialiased in the Flash Player file. If you intend to use that option, you might want to check the effect by choosing View > Antialias Text.

<span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 8. Click and drag on a corner handle to make the text box the right size to fit on the prow of the boat. Hold down the mouse button and drag the text into position. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;"> 9. With the Arrow tool selected, click on the Rotate icon. A marquee of eight circular handles surrounds your text. Position the cursor over one of the circular handles at a corner of the selection. The cursor changes to circling arrows. Hold down the mouse button and drag to rotate the text box until it lines up with the top edge of the boat. <span style="font-family: Arial,Helvetica,sans-serif;"> 10. <span style="font-family: 'Arial','sans-serif'; font-size: 9pt;">You have completed your boat. **Save it as boat8.fla**

<span style="font-family: Arial,Helvetica,sans-serif;"> NEXT: Tweening