Working With Animation: Introduction to Flash

Working With Animation: Introduction to Flash With Adobe Flash, you can create artwork and animations that add motion and visual interest to your Web pages. Flash movies can be interactive users can click buttons or rollover images to stop, start, or move to another segment of the movie. You can create vector artwork using Flash or you can import graphics, music, and sounds into your Flash movie. You animations are exported as Flash Player movies. These movies are compact, which allows for faster downloads on the WWW. The Process Creating animation with Flash is similar to directing a movie. You first assemble your actors [images, artwork, sound] on the Stage. You then block the scene and have your actors move to their new position. When you are through filming the scene, you can edit it, you can play it back, slow it down or speed it up, or move that scene to another part of the movie. Your final product is a series of frames synchronized to a Timeline. The Flash Interface The Stage You use the Stage to assemble your cast members for each frame in a movie. You can draw objects using Flash s Toolbox, or you can import artwork from other applications. Information Technology Services, UIS 1

The Timeline The Timeline determines the timing of the movie, controlling how fast or slow frames are displayed over time. It is also where you create layers, which help you organize the various elements on the Stage. Note the Playhead. The red rectangle will move across the Timeline to show you the current frame on the Stage. The Panels Panels let you view information on selected elements in your movie. You can then make adjustments and change options for those selected items. For example, if you have selected text on your Stage, you can go to the Character, Paragraph, or Text options on the Properties panel to make changes to the text. To view all the available panels, choose the Window menu item. To hide all the Panels, choose Window > Hide Panels. Information Technology Services, UIS 2

The Controller To play, rewind, or step through a movie, you can use the Flash Controller. To access the Controller, choose Window > Toolbars > Controller. The Tools Panel With Flash s Tools panel, you can create artwork and text, as well as change views. The Tools panel is divided into four sections: Tools, Views, Colors, and Options. Tools for creating shapes, paths, and lines. Page views [Zoom] and navigation. Colors for lines and fills. Tool modifiers for selected tools. Information Technology Services, UIS 3

Creating a Flash Movie 1. To create a new movie, choose File > New. 2. The New Document dialog box is displayed. Click OK. Setting the Movie Properties 1. To set the movie properties, choose Modify > Document. The Document Properties dialog box is displayed. Dimensions: These options determine the stage size in pixels. Match: You can match the size to the printing dimensions or to the content of the movie. Background color: This sets the background color for the movie. Frame rate: This sets the number of frames played per second. Most WWW movies use a frame rate between 8 and 12. Ruler units: This sets the unit for the rulers along the top and side of the application window. 2. When you have competed the settings, click on OK. Information Technology Services UIS 4

Saving a Flash File 1. To save the movie you are working on, choose File > Save. Select the folder you wish to save the file and name the file. Flash will automatically add the.fla file extension. 2. Click on Save. NOTE: When you use the Save command, you can open up the Flash file and edit it. If you Export the file as a Flash Player Movie for use on the WWW, the file is compressed and you can no longer edit the file. Information Technology Services UIS 5

Drawing Rectangles and Squares 1. Select the Rectangle Tool from the Tools panel. 2. Set the Fill and Stroke color by clicking on the icon and selecting a color. 3. To set the transparency for a fill, choose Window > Color if the Color panel is not already open. Set the Alpha value for transparency. Notice you can set fill and color from the Color panel, and access the Web-safe color swatches from the Swatches panel. 4. Set the thickness and style of the stroke from the Properties panel. You may also set the color and characteristics of the fill from this panel. 5. Bring your cursor to the Stage. You will notice that the cursor icon becomes a crosshair. 6. For the Rectangle tool, specify rounded corners by clicking the Round Rectangle modifier and entering a corner radius value. A value of zero (0) creates square corners. 7. Position the cursor where you want one corner of the shape to be and holding down the mouse button, drag open the shape. To constrain the rectangle to a square, hold down the shift key as you drag opens the shape. Selecting Shapes Unlike many drawing programs, Flash creates shapes that have the fills separate from the strokes. Select the Selection Tool from the Tools panel. If you click on the middle of the rectangle, you will notice that only the fill is selected. You can tell this by the dotted pattern that is now on the fill but not on the stroke. If you double-click inside the rectangle, you will notice that both the fill and the stroke are selected. If you click on any segment of the stoke, only that segment is selected. This only applies to rectangles. When you click on any part of an oval s stroke, the entire stroke is selected. Information Technology Services, UIS 6

If you double-click on any stroke segment, the entire stroke around the object is selected. Once you have selected the fill or the stroke segments, you can then change the color by using the Fill and Stroke tools on the Tools panel. Altering and Selecting If you move the Arrow tool toward a shape or path, you will notice that the cursor icon becomes an arrow and a curved line. This indicates that you can now drag the path to change the size or shape of the curve on the path. If you click directly on the line, your cursor becomes an arrow with a four-headed arrow. This indicates that you can move the path without changing its shape. If you position your cursor on a corner or on the end of the line, the cursor becomes an arrow with a square corner. Overlapping Shapes When you draw or move one shape on top of the other, the portion underneath is deleted. If two shapes are the same color, then they are merged into one shape. Drawing Ovals and Circles 1. Select the Oval Tool. 2. Set the fill and stroke attributes by clicking the icon and selecting a color. 3. Position the cursor on the Stage. Your cursor icon will be displayed as a cross. 4. Holding down the mouse button, drag and open the shape. To constrain the oval to a circle, hold down the shift key as you drag open the shape. Information Technology Services, UIS 7

Drawing with the Line Tool 1. Select the Line Tool. 2. Drag the cursor across the Stage. Hold down the shift key to constrain the line to 45 degrees. Drawing with the Pencil Tool 1. Select the Pencil Tool. 2. Drag the cursor across the Stage to create the path. 3. There are three pencil Options that you can select: Straighten draws a straight line. If you draw a freehand triangle, oval, circle, rectangle, or square, this mode will convert your approximations into the actual shape. Smooth draws curved lines. Ink draws freehand lines with no alternation. Drawing with the Pen Tool With the Pen tool, you can create straight lines and Bezier curves that are defined by their endpoints. You choose where the curve begins and ends, and Flash fills in the curve. This tool is used to make smooth curves as well as straight lines. This is the precision drawing tool. Creating a Straight Line 1. Position the cursor where you want the beginning of the line. Click once and let go of the mouse button. 2. Move your cursor where you want the end of the line or line segment. Double-click. Information Technology Services, UIS 8

Creating Multi-Segment Lines and Polygons 1. Position the cursor where you want the beginning of the line. Click once and let go of the mouse button. 2. Move your cursor where you want to end of the first segment and the start of the second, and click. 3. To end a line, double-click. 4. To close a polygon, position on the beginning point. You will notice a circle next to the Pen icon. When you see the circle, click once. Creating Curves 1. Position your cursor at the start of the curve. Hold down the mouse button. 2. With the mouse button still held down, drag the mouse in the direction you want the curve. You will see two tangent handles, which show you the height and angle of the curve you are drawing. 3. When the tangent handle defines the curve you want, let go of the mouse. 4. Move the cursor where the curved segment will end and hold down the mouse button. Drag the mouse so that the control points are properly defining the next curve segment you will be drawing. Let go of the mouse. 5. To end the path, double-click. Painting with the Brush Tool 1. Select the Brush Tool and choose a fill color. 2. Select a Brush Mode from Options. These options apply when all objects are on the same layer. Paint Normal paints on top of other fills and lines. Paint Fills paint only fills and not strokes. Paint Behind covers only blank areas on the Stage. Paint Selection applies a new color to the selected area. Paint Inside paints fills and does not allow you to go outside the lines. 3. Select a Brush size and shape. 4. Position the cursor on the stage and drag the Brush to paint. Information Technology Services, UIS 9

Using the Eraser Tool 1. Click on the Eraser Tool and simply drag it across the objects to delete. To erase everything on the Stage, double-click the Eraser tool. To erase only strokes or only fills, click on the Faucet modifier from Options, then click on the stroke or fill. Use the Mode modifiers to erase only fills, only lines, both, or only those fills that are selected. Layers The layering feature in Flash gives you flexibility in designing your artwork and animations. With layering, you can lock parts of your image into place, hide portions of your artwork, and specify layers to animate. Show/Hide Lock/Unlock Show as Outlines Layer Name Insert Layer Delete Layer Adding and Naming Layers To show the layer features, we will create two layers, for a total of three layers. We will add a shape to each layer. 1. We will start by drawing a red circle on the first layer. 2. Select both the fill and stroke. Choose Modify > Group. Information Technology Services, UIS 10

3. To rename the layer, double-click on Layer 1 and type in the new name. We will call this layer red. 4. To add the next layer, click on the Insert Layer icon. 5. Name this layer blue and draw a blue circle on the Stage. Group the fill and stroke. 6. Add a third layer and call the layer white and draw a white circle on the Stage. Group the fill and stroke. Showing and Hiding Layers 1. To hide a layer, go to the layer on the layer listing and click on the black dot that is under the eye icon. Note the red X that appears when you click. 2. To show the layer again, click on the red X. Locking and Unlocking Layers 1. To protect your artwork from being accidentally altered as you are working on other shapes or paths around it, you can place the art on its own layer, and then lock it. For example, in our example, we will lock the red layer by clicking on the black dot under the lock icon. A lock appears. Also, note that the Layer Name pencil is crossed out. 2. To unlock the layer, click on the lock icon. Reordering Layers 1. The order of the layers in the layer information box determines the stacking order of the artwork on the Stage. For example, we could move the blue circle over the red circle, and because the blue circle layer is on top of the red, the blue circle will always be on top of the red circle. 2. If we want the red circle to appear on the top, we must reorder the layers in the layer information box. Information Technology Services, UIS 11

Animation Although there are several ways of creating animation in Flash, all animation is based on the concept of changing content over time. In this workshop, we will look at Tweening, which is the simplest way of animating graphics of any type. Timeline The Timeline determines the timing of the movie, controlling how fast or slow frames are displayed over time. It is also where you create layers, which help you organize the various elements on stage. Keyframe A keyframe is a frame in which you define a change to an object s properties for an animation or include ActionScript code to control some aspect of your document. Within the Timeline, there are numbered frames. When you want to change the content, you insert a keyframe. The keyframe indicates a change. Frame Types in Flash Term Empty/Blank Keyframe F7 Definition An empty keyframe has no visual representation. It means that there is no artwork on the stage on that frame. By placing artwork on the stage, you will fill an empty keyframe. The Flash Timeline, by default, opens with an empty keyframe. As soon as you put content on the stage, the empty keyframe will change to a keyframe. Information Technology Services, UIS 12

Keyframe F6 Frame F5 A solid circle represents a keyframe that contains content. A keyframe can also contain actions or sounds and is represented by a hollow circle. By default, adding a keyframe in Flash copies the content from the previous keyframe. The timeline in Flash looks like it has many frames in each layer, which can be a bit deceiving. While it has the slots for frames, you have to specifically define them as frames. Frame Rate The frame rate indicates the speed of the movie. It is shown in frames per second [fps] at the bottom of the Timeline. For WWW movies, 12 fps usually gives the best results. Animating with Tweening With tweening, you create your artwork in the first and last frames of your animation. Flash fills in the intermediate steps [or the steps between]. Tweening creates a minimal file size, since Flash only stores the changes between the frames and not the complete frames. There are two types of tweening: motion tweening and shape tweening. Motion tweening means changing the position of an object along the Timeline. Shape tweening means changing the properties of the objects along the Timeline. Motion Tweening 1. Begin by creating a graphic of type to use in the animation. 2. Go to the Timeline and select the frame where you want the animation to end. 3. Choose Insert > Timeline > Keyframe. 4. With the keyframe selected, move the text or graphic on the Stage. Use the shift key to limit the movement in a straight line. 5. Click and select the first and last frames. 6. Choose Insert > Timeline > Create Motion Tween. 7. To test the animation, open the Controller and click on the Play button. Information Technology Services, UIS 13

Motion Tweening with a Motion Path 1. Begin by creating a motion tween. 2. Position the cursor on the first frame. 3. From the Properties panel, select Orient to Path. 4. Choose Insert > Timeline > Motion Guide. This inserts a new guide layer. Guide layers are not published with the Flash movie. 5. Make the Guide Layer active by clicking on it. Use a drawing tool to draw a motion path. 6. In the first frame, drag the shape by its registration point and snap it to the beginning of the line. 7. In the last frame, drag the shape by it registration point and snap it to the end of the line. 8. To test the animation, open the Controller. 9. Click on the Play button. Shape Tweening With shape tweening, you will change an object s shape over time. Shape tweening can also include changing the object s location on the stage, as well as color and size. With shape tweening, you can create morphing effect, with one shape transforming into another. 1. Using the Oval tool, draw a circle on Frame 1 Layer 1. This will be the starting frame of this shape tween animation. 2. Select Frame 12 on Layer 1 and press F7 to add a blank keyframe. The circle on your screen will disappear so you have a place to draw the ending frame of this animation. 3. Using the Rectangle tool, draw a square along the right side of the stage. This will be the ending frame of your animation. 4. Double-click anywhere in the Timeline between the two keyframes to select the range of frames. You want to make sure you have this selected before you apply the shape tween. Information Technology Services, UIS 14

5. On the Properties panel, select Shape from the Tween drop-down menu. This will create a shape tween between the two keyframes in Layer 1. Green tinting and solid arrow on the timeline indicate an active shape tween. 6. Press return [Macintosh] or Enter [Windows] on your keyboard to preview your animation. The circle will gradually turn into a square. Multiple Shape Tweens So far, we have learned how to create a single shape tween. There will likely come a time when you will want to create more than one shape tween in your project. In the following example, you will learn how to create multiple shape tweens by placing them on separate layers. Working with multiple layers is the best way to choreograph animations with multiple tweens. 1. Open the file named mutplshptwn.fla file located inside the Flash folder on the desktop. You will notice four layers: one layer named background with the hula girl s body parts that will remain stationary and three more layers where you will apply motion tweens to make her skirts and arms move. 2. Double-click on each of the layer names to give them new, more descriptive names. Name layer 1 Left Arm, Layer 2 Right Arm, and layer 3 Skirt. It is important to name the layers so that it is easy to recognize what content is on that layer. 3. Click the Lock icon at the top of the Layers panel to lock all the layers at once. Click the Skirt layer s Lock icon to unlock the layer. 4. On the Skirt layer, press F6 on Frame 20 and again on Frame 40 of the Skirt to add keyframes to those frames. This process duplicates the artwork on those specific frames. You should now see artwork from Frame 1 of the Skirt layer, representing the beginning of the animation, artwork on Frame 20, which will represent the middle of the animation, and then artwork on Frame 40, which will represent the end of the animation. 5. Next, make sure that your Playhead is over Frame 20. Since this is where you want the animation to change, you are going to slightly alter the artwork on Frame 20. Move you pointer over the right side of the skirt and notice how the cursor icon changes to a curved line. Move the right side of the skirt outward and the left side inward. 6. To animate the hula girl s skirt, all you have left to do is to add a shape tween. Click on the right side of the Skirt layer name to select all the frames on that layer. From the Properties panel, choose Tween > Shape. This will generate a shape tween between each of the two keyframes. 7. Press the return [Macintosh] or Enter [Windows] key to see the shape tween in action. Information Technology Services, UIS 15

8. Lock the Skirt layer and unlock the Right Arm layer. You are going to create the shape tween for the right arm. 9. On the Right Arm layer, press F6 on Frame 20 and again on Frame 40 to add keyframes to those frames. This process duplicates the artwork on those specific frames. You should now see artwork from Frame 1 of the Right Arm layer, representing the beginning of the animation, artwork on Frame 20, which will represent the middle of the animation, and then artwork on Frame 40, which will represent the end of the animation. 10. Click on Frame 20 to select all the artwork in that frame. Move the arm slightly towards the center, just to the middle of the skirt. Click anywhere on the stage to deselect the artwork and modify the shape by dragging out the left side. 11. To animate the hula girl s right arm, all you have left to do is to add a shape tween. Click on the right side of the Right Arm layer name to select all the frames on that layer. From the Properties panel, choose Tween > Shape. This will generate a shape tween between each of the two keyframes. 12. Press the return key to see the shape tween in action. 13. Lock the Right Arm layer and unlock the Left Arm layer. You are going to create the shape tween for the left arm. 14. Repeat steps 9 through 12 on the Left Arm layer to create the shape tween for the left arm. Be sure to move it slightly left of the existing arm so that you can see them both in the final animation. 15. On Frame 40 of the Background layer, press F5 to add frames so that you can see the hula girl s stationary parts throughout the animation. 16. Press the return [Macintosh] or Enter [Windows] key to test your animation! Acknowledgements Flash Hands-On Training, Lynda Weinman Introduction to Flash, Karen Rohne Information Technology Services, UIS 16