Daily Calendar | TGJ2O Info | Graphic Design | Animation | Audio/Video Recording and Editing | Summative Project | Google Classroom

Basic Animation Theory | Animation Fundamentals |3D environment | Stop Motion | Animation using Flash - Basics | UE5

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

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.

To magnify your drawing: 

1. Select the Magnifier tool from the Drawing toolbar. The Magnifier tool in Enlarge mode has a plus sign to indicate that it will make the objects appear larger.

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.

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.

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

To reshape your drawing: 

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. 

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. 

3. To create additional endpoints (break a line), press the Ctrl key and drag at any point on the line. 

Note: You create the endpoint with an arrow cursor with a curved modifier. The cursor changes to a straight arrow when you release the mouse. 

4. 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.

To create a mast with the Rectangle tool:

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.

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.

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.

1. Use the Pencil tool in the Smooth mode to draw a sail for your boat.

2. Use the Arrow tool to reshape the sail.

3. Use the Arrow tool to draw a marquee for selecting the sail.

4. Rotate the sail if necessary and move it into place. 

5. Save your work in the My Documents folder as boat2.fla.

COLOR BASICS 

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. 

Note: 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. 

To fill the hull with color: 

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.

2. Select a golden oak color for the hull (it’s the third color from the right in the ninth row of colors).

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.

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.

5. Move the Paint Bucket cursor to the Stage and click inside the hull of the boat. The hull fills with color.

6. Be sure the Paint Bucket is still selected. Choose the color you want from the color palette and then click on the mast.

7. The mast fills with color. 

8. Save your file as boat3.fla.

MOVING A FILLED OBJECT 

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. 

To move a filled object: 

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. Double-click on the hull. Be sure the 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.

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)

1. Select the Eraser tool and the Faucet modifier. The faucet works like a siphon, drawing the color out of a fill.

2. Using the Faucet cursor, click on the brushstroke. The color drains away, leaving an ugly white gash in the side of the hull.

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.

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. 

Note: 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. 

5. Save your file as boat4.fla. 

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. 

To apply a gradient fill: 

1. Open boat4.fla. Use the Arrow tool to select the sail.

2. Select the Paint Bucket tool.

3. Then click on the button at the top that looks like a small palette or choose Window > Color (Shift F9).

4. On the fill drop down menu (says solid by default) click on the linear gradient tab.

5. Locate the Color Definition bar—it has two color pointers for modifying the gradient. Color pointers define where colors change in a gradient. 

6. 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.

7. 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.

Cursor dragged left-right longer Cursor dragged left-right short distance 

Short-drag fill

8. On the pull-down menu below the Gradient definition bar, change from Radial to Linear. 

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. 

10. Save your file as boat5.fla in the My Documents file folder. 

To select the colors for a gradient by specifying a color in the RGB text boxes: 

1. Click on the right color pointer and type the following numbers in the RGB text boxes: R: 232, G: 23, B: 201. The color and the right color pointer turn to a hot pink. The current color window shows how the gradient has changed. 

Note: Full saturation of a color is 255; no saturation is 0.

4. To insert another color in your linear gradient, simply hover the cursor at the desired location of the colour definition bar and click.

5. Adjust the color pointers to control the transition from one color to another.

6. if you wish to save this gradient click in the Color Swatches panel. 

7. 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 boat_colours.clr.

To change line color by using the Ink Bottle: 

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.

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.

3. Move the Ink Bottle cursor to the Stage and click on the sail.

4. The line color changes to the color you chose in step 2. 

5. Save your file as boat6.fla and close the file. 

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.

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.

To draw an “empty” porthole: 

1. Open boat6.fla and choose the Oval tool. Select a dark mahogany for the line color and 2 points for the line width. 

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. 

Note: 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.

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. 

Note: Remember that when you draw a line on a solid shape, it cuts the shape.

4. Click inside the circle. A round shape is selected. 

5. 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).

Note: 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.

6. 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.

To draw a porthole with a transparent window: 

1. Select the Oval tool. Choose a 2-point wide, dark mahogany line and a pale gray fill. 

2. Go up to the Color Mixer window and change the 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).

GROUPING OBJECTS

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. 

To group objects: 

1. Select the whole boat. A striped outline appears around each part.

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.

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.

4. Your boat is nearly complete. Save it as boat7.fla and close the file. Now it’s time to add some text to the drawing.

USING THE TEXT TOOL 

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.

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.

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. 

To use the Text tool: 

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 .

2. From the properties panel below the scroll to Arial as your font choice. Choose 22 as the size of your font.

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.

4. Leave the left-aligned paragraph style selected.

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.

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’.

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. 

Note: 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.

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.

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. 

10. You have completed your boat. Save it as boat8.fla