TGJ2O_animating_Tweens

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

Tweens in Animation
"Tween" is actually short for "in-between", and refers to the creation of successive frames of animation between key frames. In computer animation, the term is most commonly used for Flash's "shape tweening" and "motion tweening" processes, where the user can define two key frames and Flash will automatically create the in-between frames, either morphing one shape into another over a set period of time or else moving a shape or shapes from point A to point B over a set period of time.

In Flash Tweening has become much easier than in past versions. In the past - keyframes dictated the start and stop placements of a tween. Now, all you need is a keyframe at the starting location. When you create a tween in CS versions of Flash, the final keyframe is 'embedded' or hidden.


 * LAYERS**

Think of layers as a stack of transparencies. You can separate your graphic elements in layers for easier (and safer) modifications and handling. You can use layers generously because they do not make your file significantly larger. Layers are controlled through the panel at the left of the Timeline.

Notice in the timeline there are 2 layers. The boat layer (behind) and the wave1 layer (in front). Layers can be locked or unlocked.

When a layer is locked, a padlock icon appears in the Padlock column. Lines and shapes cannot be drawn, selected, or modified in a locked layer. To lock all layers, click on the Padlock toggle at the top left of the Timeline. Layers can be visible or hidden. When a layer is visible, a dot is displayed in the Eye column. When a layer is hidden, a red X is displayed in the Eye column. To make all layers visible, click on the Eye toggle at the top left of the Timeline. Click again to unlock all layers.

Before you can work on a layer, you must select it as the active layer. A pencil icon next to the layer name indicates that the layer is the current active layer in which all drawing occurs. You are going to separate the elements of your artwork into layers. The first layer, where you have created the sailboat, will be named “boat.” You will add a layer for each new object. Because the ocean will overlap the boat, it is essential to place the boat and the ocean on different layers. When one shape overlaps another, the top shape knocks out the fill of the shape underneath. Color-fill knockout is not only acceptable but also desirable in a static image, but if the boat is to rise and fall among the waves, the image must remain intact because the area of overlap will move and change.

//To name a layer://

1. Open your file boat8.fla. 2. Right-click on Layer 1 and choose Properties from the pop-up menu (or choose Layer from the 3. Modify menu or simply double click the name). 4. In the Name box, type Boat. 5. Under the Name box, choose Lock. Leave the other defaults unchanged and click OK. 6. The layer now has a new name and a padlock in the Padlock column.

//To create a new layer:// 1. To create Layer 2, choose Insert, Layer or click on the Add Layer icon at the bottom of the Layers panel. 2. Double-click on Layer 2 to select it. 3. Name the layer by typing Ocean 1 in the highlighted area. Notice that the Boat layer is locked and visible and the Ocean 1 layer is unlocked and visible. The pencil in the Ocean 1 layer indicates that the layer is active. Next, draw a closed shape for the ocean (e.g. draw waves on the surface of the ocean, then make sure the waves have a line offstage that goes all the way around to the other side of the wave). Be sure to make your shape wider than the Stage so you will have room to adjust the position of the shape later. See below for more details.

//To draw and fill the ocean://

1. Choose the Line tool from the Drawing toolbar (second icon from the top in the left column). Choose a colour of blue for the line colour. On the Stage, the Line tool cursor looks like a crosshair. 2. Under the boat, make a zigzag, beginning beyond the left edge of the Stage (you’re going to be passing the ocean by the stage to give the effect of moving waves so you need that extra ocean off to the sides). 3. Hold the cursor down and drag the line up. Release the cursor, but don’t move it. Hold the cursor down and drag the line down. Release the cursor, but don’t move it. Continue making zigzags a little beyond the right edge of the Stage. Continue the line to make a closed shape. Your ocean should now look something like the picture at left. If necessary, use the Arrow tool to stretch the bottom of the zigzag shape to the bottom edge of the Stage.

You need to shape the waves, fill the ocean with a blue gradient and make it slightly transparent. Then you will remove the line around the ocean shape. The alpha slider controls the level of transparency for a color. You will then set the transparency level in the Color window by using the alpha slider or by entering a number in the alpha percentage box. To see how to do this follow the steps below.

//To shape and fill the ocean://

1. Choose the select tool (black arrow). Hover the cursor near the middle of each straight ‘wave’ segment. Bend the segment so that the wave begins to look like a wave. 2. Choose the Paint Bucket tool from the toolbar. Go to your Colour Mixer palette and choose a linear gradient. Choose the following colours for your wave #0000CC for the left colour and #A9A9CF for the right colour. Locate the alpha slider to the far right. Set the slider to 85% or type 85 in the alpha percentage box. 3. On the Solid tab, locate the alpha slider to the far right. Set the slider to 85% or type 85 in the alpha percentage box (see Figure 2-6). Then close the Color window. 4. Go to the options section of your toolbar and make sure you choose fill large gaps from the drop down menu. Chances are you made tiny gaps between each wave you drew and flash by default won’t fill the ‘enclosed’ space you left behind since it’s not truly enclosed and the whole stage would be filled if the program worked like MS Paint. 5. Fill the ocean by dragging your fill vertically. Double click your ocean. You notice both the fill and the line are selected. We want to now de-select the ocean because we’re about to delete the line around the ocean. To do so shift-click the ocean fill. This leaves behind only the line. Press delete. 6.Save **your file as** **boat9.fla** and close the file.

Note: What other tool could you have used to create the waves? The Pencil tool in Smooth mode.

Using Layers
It is possible to select objects on multiple layers if those layers are unlocked. Selecting multiple layers is useful when you want to align elements in a number of layers. By locking layers, you can control the selection of elements of your artwork (you can also do this by grouping the layers within a folder, but that is beyond the scope of this lesson). When you use layers, you can more easily make changes to one element without disturbing others. Complex Flash animations have dozens and dozens of layers (my portfolio has over 50), including layers for sound and interaction, and are still small enough to be exported to the Web. Even with the three layers you work with in this exercise, you need to lock and unlock layers and hide layers to work efficiently. You can hide all layers except the active one to simplify what you see and focus on the element you are modifying. When shapes overlap, you often have to hide one or more layers to see the whole image on the active layer, as in the following exercise. You can then make two or more layers visible but leave only one unlocked, and move the elements of the active layer into place in relation to elements in other layers.

In section, you will create a second Ocean layer so you can sandwich the boat between the ocean layers. You do not have to draw a second ocean shape—you can cut and paste Ocean 1 to a new Ocean 2 layer and modify it, which is faster and easier. Then you will adjust the positions of Ocean 1, Ocean 2, and the boat. Before you copy Ocean 1 to a new layer, take a minute to experiment with locking and unlocking and notice how locking affects selections.

//To paste from one layer to another://

1. Open boat9.fla. 2. Lock the Boat layer by clicking on the white dot in the Padlock column. The white dot is replaced by a padlock. Hide the Boat layer by clicking on the white dot in the Eye column. A red X appears in the Eye column. The sailboat is no longer selected or visible. 3. Click on the Ocean layer to select it. The ocean shape is selected on the Stage and appears to be filled with dots. Make a copy of the ocean by using Ctrl+C. You won’t be doing anything with the copy until step 6. 4. Make a new layer by clicking on the Add Layer icon below the list of layers. 5. Double-click on Layer 3 and type the name Ocean 2. 6. With the Ocean 2 layer selected and visible, paste your copy of the ocean onto the Stage. Notice that it moves location on the stage as you paste it. If you wanted it to paste in exactly the same spot a very valuable shortcut is the paste in place (on the stage) command which is Ctrl-Shift-C. 7. Use the Paint Bucket tool to fill the ocean with a dark blue color. 8. Hold down the mouse button and drag the Ocean 2 layer to the bottom of the stack of layers. 9. Lock the Ocean 1 layer by clicking on the white dot in the Padlock column. 10. Ocean 1 should be at the top of the stack. 11. Use the Arrow tool to move Ocean 2 into position. 12. Select the Scale modifier and scale the second ocean so it is taller than Ocean 1 but deep enough to reach the bottom of the Stage. 13. Adjust the position of Ocean 2 until the waves of Ocean 2 show between the waves of Ocean 1. Lock the Ocean 2 layer. 14. Unlock the Boat layer and make it visible. Move the boat into position so the waves from Ocean 1 overlap it. 15. You will be able to see the boat through the waves of Ocean 1, and you will be able to see Ocean 2 through the portholes in the boat. 16. **Save your work as** **boat10.fla****.**


 * IMPORTING A COLOR SET**

The easiest way to import a color set is to use Flash to extract new colors from a GIF image and add them to the existing or default Color palette within your Flash file.


 * Note**: GIF is a highly compressed bitmap format best suited to line art and simple graphics with large areas of solid color. Unlike the PKZIP or StuffIt compression routines, GIF compression discards data so the files cannot be restored to their original resolution after compression. In the next exercise, you will extract new colors from an imported GIF and then set up the background color for your movie.

//To import a color set://

1. Open boat10.fla. 2. Look at the right side of the page for the Swatches panel Ctrl-F9 (if it’s not there then all toolbars including the Colour and Swatches palette can be found by accessing Windows>Toolbars).
 * 1) Click on the little icon that looks like bullets in the top right of the palette. A pop-up menu appears. Choose Add Colours.
 * 2) Open [[file:jmcintyre/colorpalette.gif|colorpalette.gif]] (right click and save target to your MyDocuments folder)
 * 3) You should see the new colors appear at the bottom of the Swatches palette

Graphic artists often design the look and feel of a project while leaving the ‘grunt work’ of development for others. They will usually give a colour swatch palette for all of the develloppers to use so that nobody can use colours they shouldn’t.

Now you can choose the background color for your movie from the colors you just added.

6. Simply click on the stage someplace where there is no object. In the properties panel at the bottom you’ll notice all sorts of information about your animation. Included there is a background colour selector. It is by default white.
 * 1) Choose the pale yellow color you just added. The color button changes to the color you have chosen.
 * 2) **Save the file as** **boat11.fla****.**


 * USING ART CREATED WITH OTHER SOFTWARE**

Using the import function, you can bring in art created with many, many other software packages. Flash can import files in the JPEG and GIF formats widely used for Web graphics. It can also import PNG (the native format of Macromedia Fireworks), SWF (the Flash Player format), and EPS (encapsulated PostScript).
 * Note**: JPEG is a bitmap format for digital photographs, which can be compressed 0–100%. It also works well for complex graphics. Like GIF compression, JPEG compression is “lossy” (data is lost or discarded during compression, based on the percentage of compression you choose). If you use FreeHand or Illustrator for creating artwork, you can export the artwork as a Flash Player file. Because the file is a vector file, you can scale it to the size you need inside Flash.

In the following exercise, you will import a JPEG format image of a beach scene and trace it to create a special effect. This photo is an ordinary vacation snapshot, but you will transform it into an interesting graphic.


 * IMPORTING ARTWORK**

//To import an image in JPEG format://

1. Open boat11.fla. 2. Add a layer and name it beach. Be sure it is the active layer and that it is visible (the active layer is highlighted). You should see a pencil icon in the Eye column and a white dot in the Lock column. Lock and hide all other layers. You should see a padlock in the Lock column and a red X in the Eye column. 3. Choose File > Import>Import to Stage. In the Import window, set the Files of Type to JPEG image (.jpg.) and browse to the Lesson 2 folder. Open the picture (right click Save As...). Notice the blue border around the picture? It indicates that the image is scalable as a group. 4. You will need to drag the beach layer to the bottom of the layers panel so that it is behind both ocean layers and the boat layer.


 * Note**: If you need to center the Stage in your view, use the Hand tool (the keyboard shortcut is H, but better yet, no matter what tool is currently active, by hitting and holding the space bar you will be able to manipulate the selected object). Hold down the mouse button and drag the Stage to center it.

5. Choose the Arrow tool and the Scale modifier. Click shift to constrain the proportions and drag on the corner handles of the image to make it the size of the Stage. Drag on the center handles at top and bottom to make small final adjustments to the height of the image.


 * Note**: The fast way to resize and center objects is to look at the properties panel. By looking at the poperties panel at the bottom you will[[image:properties_panel.png align="right"]] notice that the object has an X and Y value that aren’t 0. By typing in 0 for both of these values you place the top left corner of your object at the stage’s origin (yep, that’s MATH!). If it doesn’t fit quite right the other set of values you want to think about are the object’s height and width. By default all flash animations are 550x400 pixels. If you want the picture to fit perfectly without guessing simply type in the dimensions 550 for width and 400 for height and your picture fits the stage PERFECTLY. Notice that the dimensions are constrained until you unlock them by clicking to the left of the W and H boxes.

6. **Save your file as** **boat12.fla**.


 * TRACING BITMAPS**

You can create interesting effects by tracing a bitmap. Some simple bitmaps will be significantly smaller if you trace them as vector graphics. More complex bitmaps, however, will be larger if traced with any precision. That said, most people will tailor their images in a package better suited to photo editing (Photoshop or Fireworks) then import the pictures.

//To trace a bitmap://

1. Open boat12.fla. verify that the Beach layer is visible, unlocked, and active. The other layers should remain locked and invisible. The Beach layer should have a white dot and a pencil in the Eye and Lock columns. The other layers should have padlocks in the Lock layer and red Xs in the Eye column. 2. Use the Arrow tool to draw a marquee around the beach photo to select it. Then choose Modify > Bitmap>Trace Bitmap. The image is surrounded by a striped rectangle, showing that it is selected. 3. A pop up window will appear. Set the Color Threshold to 50, the Minimum Area to 20 pixels, Curve Fit to Smooth, and Corners to Few Corners. Then click OK. A message appears, indicating that Trace Bitmap is in progress. 4. When the tracing is finished, choose the Arrow tool and deselect the beach image to see the results. The graphic now looks like a painting of the beach scene. 5. To protect individual elements in the traced bitmap group the elements in the image so they cannot be selected individually. 6. Use the Arrow tool to draw a marquee around the beach graphic to select it. Then choose Modify > Group. 7. Lock and hide the Beach layer. **Save your file as** **boat13.fla**.

Next you will import a JPEG image of a duck and edit it, removing the white background so that you can place the duck in the ocean.

// To edit an imported bitmap: //

1. Open boat13.fla. 2. Add a layer and name it duck. Be sure it is the active layer and that it is visible (the active layer is highlighted). You should see a pencil icon in the Eye column and a white dot in the Lock column. Lock and hide all other layers. You should see a padlock in the Lock column and a red X in the Eye column. 3. Choose File > Import to Library. In the Import window, set the Files of Type to JPEG image (.jpg.). 4. Browse to the Lesson2 folder. **Import to the library the .** 5. Note: The Library is a fantastically important tool in Flash. By bringing the image directly to the library we ensure that the picture of the duck that we will eventually put on the stage will be kept pristine as a master copy. 6. Open the Library by typing Ctrl-L (or Windows>Library). Organize your elements by clicking on kind (which if you have many elements quickly groups all file types together). You’ll notice all you have in your library at the moment are the duck and the hatteras pictures. 7. Select the duck and you’ll notice that the window at the top of the library shows that element. 8. To edit that duck and forever have the white gone we want to create a symbol known as a graphic symbol. In Flash there are 3 symbol types: Graphic Symbols, Movie Symbols and Button Symbols. We will focus on Graphic Symbols now and leave the others for later in the course. Click on the top right of the Library window to **get a menu where you’ll choose new symbol. Make sure it’s a graphic symbol** and call it Ducky (you can’t call it duck because the bitmap picture is called duck.bmp). Click OK. 9. DON’T FREAK-OUT. Your stage has gone white. What happened was the Flash recognized that you want to edit a symbol and so it has blanked out all other information you’re working on so that you can concentrate on editing the symbol. 10. Now, let’s take care of that duck’s white background. Click on the **duck** jpg n the library and drag an **instance** (that’s what it’s called when you put a symbol from the library onto the stage) of it to the big white stage in the center. To get rid of the image’s white background, you first break it apart (you must break a bitmap apart before it can be edited). 11. Select Modify>Break apart (it's much faster to remember Crtl-B to break apart and Crtl-G to group) to turn the bitmap into an editable image. The duck and its background are selected and the whole image appears dotted.
 * Note**: Notice that there is Scene 1 (that’s what you were working on) a[[image:duck_edit.png width="494" height="366" align="right"]]nd there is to it’s right ducky with the icon next to it. That means you’re editing the ducky symbol. If you wanted to get out of edit mode you simply click on scene 1 (or the back arrow) and you’ll return to your boat.


 * Note**: To select all of the white area, you could use the Lasso tool’s Polygon Lasso to define a very precise selection area. Fortunately, with the duck picture, the Polygon Lasso isn’t necessary because the background is very different in color from the duck. The Lasso tool’s Magic Wand “smart” bitmap selection makes it easy to select an area by its color.

12. Deselect the duck by clicking on an empty space on the Stage. Choose the Lasso tool and click the Magic Wand Properties Modifier at the bottom right of the options section in the toolbar. In the Magic Wand Settings dialog box, set the Threshold to 120 and the Smoothing to Pixels.

//**Note **: The higher the threshold setting, the more inclusive the Magic Wand selection will be. With the default threshold setting of 10 and Smoothing set to Smooth, you would get a blurry white line around this image because its thin edge area of blended white and colored pixels would not be selected and deleted. The duck will be floating on the blue water, so a blurry white edge would be visible and distracting. The correct setting for the Magic Wand depends on the size and resolution of the image. If you experiment, you can find the best combination. //

13. Choose the Magic Wand (to the left of the Magic Wand modifier in the options panel at the bottom of the toolbar) and move the cursor to the Stage. When it is over the image, the cursor looks like a sparkler. 14. Notice that you have a hard time seeing the white part of the image against the background. A trick to editing regions the same colour as your background is to temporarily insert a layer behind the layer you’re working on. Make a rectangular box with a fill consisting of a contrasting colour to white (black). Notice now how the white is visible. Hover the cursor over the white are of the image. Click once with the Magic Wand on a large section of the white background. The area becomes highlighted. Press the Delete key to delete the highlighted area. 15. Using the Magic Wand cursor, select any remaining white areas and delete them. 16. If necessary, use the Magnifier and Hand tools to zero in on small areas where the background “shows through.” With the Lasso tool and the Magic Wand Modifier active, highlight and delete each of these small areas. 17. Go ahead and delete the temporary layer. 18. You’ve done it. You’ve edited the Graphic Symbol ducky. Click on Scene 1 and you are out of symbol editing mode. 19. Create a layer called Duck that is between Ocean 1 and Ocean 2 but behind the boat layer. Click on the duck Graphic Symbol in your library. Hover a picture of your newly edited ducky symbol. Click and drag an instance of it to the stage. 20. Lock the Duck layer. **Save the file as boat14.fla**
 * Note**: The edges of the image look jagged after the white background has been deleted, particularly when you enlarge the image with the Magnifier tool. To check the image at 100% size, choose View > 100% or press Ctrl+1. Flash can antialias the image when you export the movie (antialiasing the image blurs and smoothes the edges of the image).

**IMPORTING FLASH PLAYER FILES**

Macromedia FreeHand or Adobe Ilustrator can export a vector graphic as a Flash Player file (.swf). This is the best format for exporting from FreeHand—the graphic comes in to Flash beautifully, with no white background. Although you import it as a Flash Player file, the file behaves like a graphic. You can enlarge the figure, without losing its sharpness and without making your movie file larger, and you can break it apart, just as you broke apart the JPEG image. In the following exercise, you import the duck image in SWF format. Because the duck was originally created as a vector image, it will look best in SWF format. It is also quite small—only 3KB.

//To import a graphic in the Flash Player format://

1. Open boat14.fla. Be sure that the Duck layer is active. Use the Arrow tool to move the JPEG duck over to the right side of the Stage. Use the Magnifier tool with the Reduce modifier to see the whole Stage. 2. Choose File > Import to Library and select the Flash Player format (.swf) in the File as Type box. From the Lesson2 folder, choose. Notice when you select the image in the library that it image comes in sharp, with no background. For a line drawing like this duck, a vector image is preferable to a bitmap image (plus it is COMPLETELY scalable). 3. Delete the bitmap version of the duck from the Stage that you just worked on gettting rid of the white background on. **Instead, drag an instance of the duck.swf to the stage on the duck layer.** 4. Save your file as **boat15.fla**.


 * SYMBOLS AND INSTANCES**

As we talked about earlier a “symbol” is a reusable image, animation, or button. For example, say that your animation shows the sailboat in most of the frames. The boat enters the Stage at one point and travels along a path until it exits from the Stage. In Flash, you create one boat symbol and store it in the Symbol Library. Each time you use the boat in the animation, Flash retrieves that symbol and reuses it. The result is a far smaller movie file that loads, opens, and plays quickly. Each appearance of a symbol on the Stage or nested within another symbol is called an “instance.” You can place as many instances of the symbol in your movie as you like without making the file significantly larger. You can use Motion Tweening (explained in Lesson 3) only with symbols. You can create symbols from artwork you create on the Stage within Flash or from artwork you import. The next exercise shows you how to create a symbol.

//To convert your artwork to a symbol://

1. Open boat15.fla. The boat layer should be active and unlocked. Now you will convert the boat image to a symbol so it can be animated. 2. With the whole boat highlighted, choose Insert > Convert to Symbol (or press F8, or right click and choose convert to symbol). The Symbol Properties dialog box opens. Name the symbol boat. Select Graphic for the symbol type and click OK or press Enter. The boat no longer appears dotted. It is surrounded by a striped selection line and has a crosshair at the center. 3. Lock the Boat layer and unlock the Duck layer. With the duck selected, press F8 to convert it to a symbol. Name the symbol duck. Choose Graphic as the symbol type and click OK or press Enter. 4. Unlock all layers by clicking on the Padlock at the top of the Timeline. Make all the layers visible by clicking on the Eye at the top of the Layers panel. Now click and drag on the boat. 5. Notice how easily you can select and move the image now that it has been converted to a symbol. 6. Lock and hide all layers except the Boat layer. 7. Choose the Eraser tool from the Drawing toolbar and try to erase the boat. At first you seem to be erasing it, but when you release the cursor, you see that the boat is erase-proof. After you have converted an object to a symbol, you can edit the object only in the symbol sub-editing window. 8. **Save your file as boat16.fla**.


 * THE LIBRARY**

Flash’s Library gives you an editable list of all bitmaps and sounds you import as well as of the graphic, button, and movie clip symbols you create within Flash. The Library can be sorted in a number of ways, and you have only to click on an item to see a preview at the top of the Library pane. You can even listen to a sound or run an animation in the preview window.

The Library also serves as a trunk for transporting all of these assets to a new movie. By using the Open as a Library feature, you can easily transport all your symbols and assets to a new Flash file and use any or all of them. The ones you place in your new movie become part of that movie’s Library.

//To look in your Library://

In boat16.fla, choose Window > Library or use Ctrl+L to open the Library. A list appears of the items you have imported into the Flash file and of the symbols you have created (but not all the drawings…notice that oceans 1 & 2 aren’t there). The bitmap icon is a tree; the graphics symbol icon is a drawing of a circle, square, and triangle. Notice that you have the duck in the library as both a bitmap (the JPEG image) and a graphic symbol. You also have the beach JPEG image. You will not convert the beach image to a symbol unless you decide to use it more than once in your movie.


 * Note**: The icon for the Flash Player file you imported has the graphics symbol icon because you converted it to a graphics symbol.


 * EDITING SYMBOLS (which changes every single instance of that symbol)**

You can edit even a complex symbol, making deletions, additions, and changes. You have the use of the entire Drawing toolbar in the symbol-editing window. Changing the symbol changes the color of every instance in the movie, unless the Color Effect property of the instance has been changed. In this exercise you will modify the boat in the symbol-editing window, coloring the name of the boat mahogany brown instead of light olive green.

//To edit a symbol://

1. Open boat16.fla. Make the Boat layer active Notice the pencil icon beside the name of the layer. One instance of the boat appears on the Stage—the image you converted to a symbol earlier in the lesson. 2. Choose Window > Library to open the Library. Select the boat symbol. Hold down the mouse cursor and drag the symbol to the Stage. Repeat this until you have three instances of the boat symbol on the Stage. The last boat you dragged onto the Stage is selected. It has a striped rectangle around it and a crosshair at the center. 3. To edit the boat symbol, choose Edit > Edit Symbols or press Ctrl+E. You can also Right-click on the symbol and choose Edit. The symbol-editing window opens. Notice that you now have two tabs at the top of the Layers panel: Scene 1 and Boat. The Boat tab is highlighted because you are editing the boat symbol. 4. Break apart the boat. Choose the Text tool (T) and click on the Fill Color modifier to open up the Color palette. Choose mahogany brown. The text color changes to mahogany brown. 5. Return to the Stage by choosing Edit > Movie, pressing Ctrl+E, or clicking on the Scene 1 tab. Now all three instances of the boat symbol have brown text instead of green text. Delete the two extra boats.


 * MODIFYING INSTANCES (which leaves the 'parent' symbol intact)**

Each instance can be modified. In this exercise, you will make two baby ducks by making two instances of the duck smaller.

//To modify an instance://

1. Open boat17.fla. 2. Make the Duck layer active. Choose Window > Library to open the library or press Ctrl+L. 3. Drag two more instances of the duck graphic symbol onto the Stage for three ducks in total (the vector symbol, not the jpg one we used the magic wand on). With the Arrow tool, drag a marquee around the two ducks so that both are selected. Choose the Scale modifier. A rectangle of square handles surrounds the two ducks. 4. Use one of the corner handles to scale the ducks proportionally. Make them small enough to look like ducklings. Release the mouse button. 5. Make the boat and both layers of the ocean visible, but leave them locked. Place the duck on the right side of the Stage, with the two ducklings behind it. Now you have a family outing.


 * Note**: The Duck layer should be above Ocean 2 and below the Boat layer. If it is not in the correct place, select the Duck layer and drag it to its correct position. (You might need to scroll down to see the Ocean 2 layer. The scrollbar is on the far right of the Timeline.)


 * 6.** **Save the boat as boat18.fla**.

An animation is a series of frames. In the days before animations were done on computers, studios had two classes of artists. The top artists drew the essential poses (keyframes) that defined a character or object and the way that character or object moved. To create the illusion of smooth movement, many additional frames had to be drawn to move the character or object from one pose to another. Drawing the “in-betweens,” as these additional frames were called, was regarded as semiskilled labor. In Flash you draw, import, and compose the artwork for the keyframes. Using tweening, Flash then generates the in-between frames automatically, according to your instructions. A good writer makes a character come alive with a few telling details. Animators must not only be superb observers of how things and people move, they also must draw a few poses that capture the essence of an action or character. These essential poses are the keyframes for the animation. The other frames are tweens—transitions from one pose to another.
 * ANIMATION**
 * KEYFRAMES**

You use the Timeline in Flash to arrange the frames that make up your movie. Each frame in the movie appears on the Timeline, which looks like a table at the top of the main Flash window. Each layer occupies a row of the table, and each column of the table represents a frame. Notice that the frames are numbered in increments of 5 across the top of the Timeline. Keyframes are marked with a black dot when they contain content and with a white dot when they are empty. The picture below shows the Timeline with the Current Frame indicator at Frame 1.
 * THE TIMELINE**
 * SYMBOLS AND INSTANCES**

Before you can create a Motion Tween, the art you are going to animate must be converted to a symbol (while not an absolute prerequisite, it is best practice to make ALL tweened objects symbols first). This requirement makes Flash files small. Whether the image is repeated with slight variations in 10 frames or 100 frames, Flash has little extra overhead because the image is stored once as a symbol and used again and again. Each separate use is an “instance.” **Anytime you change the symbol, the instance also changes.** **Each instance has its own properties, which you can modify for just that instance.** This means that if you wanted the boat to be different at 2 different points in time you would have to edit each instance you dragged onto the stage of the boat rather than edit the boat symbol (you would do this by breaking apart [ctrl-B] the instance then editing it, then regrouping it [ctrl-G].


 * MOTION TWEENING**

Using Motion Tween automatically generates the Tween frames needed between two keyframes. The first keyframe is visible, but in Flash CS4 only the first keyframe is visible, the 2nd one appears as a small diamond in the tween when you move the element to another location on the screen. In the following steps you will animate the sailboat by first placing a keyframe on the Timeline. You will place an instance of the sailboat in this keyframe. The sailboat will be poised at the left edge of the Stage, ready to make its entrance. You will create a frame at Frame 20. You will move the boat to the right side of the screen at Frame 20. The sailboat will look exactly the same but will be moved to a position on the other side of the Stage. You could create the animation frame by frame, creating the frames between 1 and 20 by copying, pasting, and moving the image. Instead, you will use Motion Tween in the following exercise to quickly generate in-between frames that move the sailboat in a straight line from its position in Frame 1 to its position in Frame 20. You can refine your results by altering the position of the sailboat during intermediary Frames.


 * EXERCISES**

//To animate the sailboat://

1. Open boat18.fla. Unlock the Boat layer and make it visible and active, if necessary. All layers except the Beach layer should be visible. Next you will extend the Timeline for the Ocean 1 and Ocean 2 layers. 2. Click on Frame 20 of the Ocean 1 layer. Choose Insert > Frame to insert a frame (the default shortcut is F5). In the Ocean 1 layer, the frames between 1 and 20 are tinted gray and end with an empty rectangle to indicate that they are static frames (non-moving). Each frame now contains the Ocean 1 image. The sailboat disappears because Frame 20 of the boat layer is still blank. 3. Right-click on Frame 20 of the Ocean 2 layer. Choose Insert Frame from the pop-up menu In the Ocean 2 layer, the frames between 1 and 20 are tinted gray to indicate that they are static frames. Each frame now contains the Ocean 2 image. 4. Right-click on Frame 20 of the Duck layer and choose Insert Frame from the pop-up menu. In the Duck layer, the frames between 1 and 20 are tinted gray to indicate that they are static frames. Each frame now contains the image of the ducks.


 * Note**: When your frame indicator is positioned at Frame 20, the boat is not visible, because there are no frames yet on the boat layer in Frame 20. Now you will position the boat.

5. Select Frame 1 in the Boat layer. You can see the sailboat and both ocean shapes, but the boat is highlight.


 * Note**: The first frame in the Timeline is always a keyframe. Notice the black dot already in Frame 1, indicating that it is a keyframe and that there is content in the frame.


 * 1) Click on Frame 20 of the Boat layer. Choose Insert>frame. Make sure the boat in frame one of the Boat layer is at the far left of the stage.
 * 2) Select the keyframe at Frame 1 and choose Motion Tween under the Tween drop down menu on the property panel on the bottom. Notice how the grey timeline for the sailboat is now a greenish-blue colour. This indicates a tween is present. However - the boat has yet to move anywhere. Left click on frame 20. Select the boat, and drag it to the far right of the screen. Two things should be apparent. 1) You will see a diamond-shaped icon at Frame 20 in your timeline[[image:http://www.adobe.com/devnet/flash/learning_guide/animation/assets/fig03.jpg align="right"]], this indicates that you've made a tweened keyframe at Frame 20 and 2) there is a motion guide added to track the position of the boat across the screen [in older versions of Flash you used to have to make 2 keyframes, one for the first position of the boat, and one for the end position, likewise motion guides were added as a separate layer - Adobe has refined this now to be all inclusive - think of a modern tween as a group of layers and keyframes). Deselect the frames and notice that the Tween frames are light blue so you can easily recognize them. An arrow extends from keyframe 1 to keyframe 20.
 * 3) **Save your file as** **boat19.fla**.

**PLAYING YOUR MOVIE **

 Not only can you create a movie in Flash—you can also preview it or run it as a test in Flash Player format. In a preview, the movie runs in the workspace. In the test, you actually export the movie as Flash Player and see it run in full-screen mode. You have three options for controlling the movie: you can choose menu items from the Control menu, you can use keyboard shortcuts, and you can open the controller and use it to rewind, stop, and play the movie.

 //To play your movie: //

 1. Be sure the boat19.fla file is still open. To play the file, open the controller by choosing Window > Toolbar>Controller. The controller appears on the Stage or above the toolbar. Drag the controller to a handy place at the edge of the Stage.

 **Note ** :Like a video, your movie must be rewound before you can play it. Rewinding the movie resets the Current Frame indicator to Frame 1.

 2. Click on the Rewind button on the Controller to rewind the movie. You also can use Ctrl+Alt+R. Notice that the Current Frame indicator has moved to the first frame of the Timeline.  3. Click on the Play button on the controller to play the movie.or press Enter. The boat moves from the left of the Stage (your first keyframe) across to the right of the Stage (your keyframe in Frame 20). - - Cheer! …. No really…..do it! <span style="font-family: Arial,Helvetica; font-size: 9pt;"> 4. Now press Enter (PC) to stop the movie if it is playing over and over. If you wished to see the movie exported (as you’d see it on the web with only the stage shown) use Ctrl-Enter - the movie exports to an .swf file and a new window opens up in Flash showing you the animated movie. Notice that if you use the Restore Down button on the top right of the window the Flash animation will resize to exactly fit your animation’s stage size. <span style="font-family: Arial,Helvetica; font-size: 9pt;"> 5. Close boat19.fla.


 * Creating more tweens**

We will now animate the ocean 1 and ocean 2 layers as well as move the ducks across the screen.

1. Open boat19.fla. 2. Lock all layers but the Ocean 1 layer. 3. For Ocean 1 to be tweened we first want to make it a symbol. Do so by right-clicking on the Ocean 1 layer on frame 1. Choose convert to symbol. Make it a graphic symbol called, not surprisingly, Ocean 1. 4. In the Ocean 1 layer insert a keyframe at frame 11 (right click on frame 11 and choose insert keyframe – or choose F6 -this copies the previous instance of Ocean1). 5. **Make sure that the Ocean1 symbol at frames 1 and 11 are on opposite sides of the stage**. 6. Right click on frame 1 and make a motion tween (right click and make motion tween). Left click at frame 10 and make sure that the ocean 1 symbol is placed approximately where the Ocean1 symbol is at frame 11. Right click on frame 11 and make another motion tween. Make sure that the ocean in frame 20 is back where the Ocean1 symbol started in Frame 1. 7. Lock the Ocean 1 layer. 9. Unlock the Ocean 2 layer and repeat steps 3-7 except you will make sure that the Ocean2 symbol in frames 1 and 20 is at far right while the ocean at frame 11 is at far left. 10. Lock all layers and unlock the duck layer. 11. Select all of the ducks and convert them to a graphic symbol by choosing convert to symbol by contextual clicking one of the ducks (right click). 12. Create a motion tween for the ducks. Position the ducks at frame 20 on the far left of the stage. 13. **Save the boat as boat20.fla**


 * EDITING A MOTION GUIDE**

You can use a Motion Guide to make the movement of an image more interesting or realistic. A Motion Guide creates a path for the image to move along. The path provides a guide for the placement of the image in the frames generated when you use Motion Tween. Instead of going in a straight line, you want the sailboat to bounce on the waves. The first thing you do is use Onion Skinning to show multiple frames on the Stage.

//To create a motion guide://

1. Open boat19.fla. 2. Unlock the Boat layer, but lock all others. Additionally, hide all layers except for the boat and the beach. 3. Select Frame 20 of the Boat layer. Click on Edit Multiple Frames, the fourth icon from the left under the frames on the Timeline. Click on the Onion Skin icon, the second icon from the left under the frames on the Timeline. In the Frame indicator at the top of the Timeline, two onion skin markers appear. 4. Drag the left onion skin marker to Frame 1 and the right onion skin marker to Frame 20. You can see the whole series of frames. The keyframes in Frames 1 and 20 are opaque and the other frames are transparent. 5. Select frames 1-20 in the Boat layer. Make sure that Snap and Sync are clicked on (and Orient to path as well, which ensure that the object will be ‘facing’ the direction it travels as it follows the motion guide. 6. The dotted path is the Motion Guide for the boat. You can alter it by hovering over the path and curving it, or altering it by dragging the line around with Subselection Tool (white arrow instead of black arrow) using ALT to edit individual points. Another way to edit a motion path is to draw a new one using the Pencil or Pen, and then paste it onto your tween. There are times when this can be the best and easiest solution for changing the tween path. 7.**Pull the path of the Boat into a series of swells to approximate the bobbing of the boat on the ocean.** 8. Go to the properties inspector and make sure the Boat is oriented to path (it'll 'face' the direction it's moving). 9. Turn off Multiple Frame Edit and Onion Skinning by clicking on their respective boxes. 10. **Save your work as boat21.fla**
 * Note**: Your Motion Tween is active and changes as you make changes to the Motion Guide or your keyframes. Notice how high the motion guide line is drawn since the center of each graphic symbol is halfway up the mast. You can choose to make the center of each image different by using the transform tool and moving the circle in the center of the image down to the hull of the boat.


 * CREATING A SHAPE TWEEN**

A Shape Tween morphs (transforms) one shape into another. In the following exercise you convert a graphic symbol into a movie clip symbol and animate it, using Shape Tween instead of Motion Tween. Shape Tween changes one shape into another in a series of steps. A Motion Tween must be made between two or more instances of **A** symbol, each placed in a keyframe in the same layer. A Shape Tween is different—it must be made between two graphic images, not symbols, in the same layer. A movie clip symbol has its own Timeline that plays independently, regardless of what is happening on the main Timeline of the movie.

Note: To save time you will use prepared graphics for this lesson.

To create a Shape Tween:

1. Open boat21.fla. 2. Choose Insert > New Symbol. Name the symbol duck head button and choose Movie Clip for its behavior. Click on OK. The symbol-editing window opens. The Stage is empty except for a crosshair in the center. 3. Double-click on the layer name (Layer 1 in the movie clip symbol) and type Tween to rename the layer. The layer displays the pencil icon to show that it is active. 4. Select the first frame. Notice that, as always, the first frame is already a keyframe. 5. Save to your working folder. Choose File > Import to Stage. From the Files of Type pop-up menu, choose Flash Player (.swf). From the list of files, import duckhead.swf. The image is placed on the Stage. 6. Select the image by drawing a marquee around it with the Arrow tool. Use the Object Inspector to place the image at the center of the Stage. 7. On the Properties panel at bottom type 0 for the x and y coordinates. The duck head jumps to the center of the Stage. You must break the imported image apart before it can be used for a Shape Tween. 8. Choose Modify >Break Apart (CTRL-B by default). The outline of the image is striped to show that it is selected. The fills are patterned with dots. 9. Select Frame 10. Right-click and choose Blank Keyframe from the shortcut menu. The Stage is empty. The keyframe circle in Frame 10 is hollow to show that it has no content. 10. Save to your working folder. Choose File > Import to Stage and choose encircle.swf from the list of SWF files. The image is imported and placed on a new layer. 11. Select the encircle image and press Ctrl+X to cut the image. 12. Select the blank keyframe at frame 10 in in the Tween layer. Press Ctrl+V to paste the encircle image. The circle in the keyframe is solid to indicate that it now has content. 13. With the image selected, check Use Center Point in the Object Inspector and enter 0 for the x and y coordinates. The image jumps to the center of the Stage. 14. Choose Modify > Break Apart to prepare the image for the Shape Tween. 15. Select Frames 1–10 of the Tween layer. On the Properties panel at bottom choose Shape tween. The frames turn green to indicate the Shape Tween. An arrow crosses the frames pointing toward Frame 10. 16. On the Controller, click the Rewind button and then the Play button to play your Shape Tween movie clip. The duck head dissolves into the encircle graphic.

Wow!

17. Click on Scene 1 to exit your symbol editing window. 18. Create a new layer called Duckshead and drag an instance of this tween to the top right corner of the stage. You don’t have to create any other keyframes since this movie clip will continue to play regardless of what’s happening with the main timeline. 19. **Save your file as** **boat22.fla**.

**You’re done!!!**



Evaluation:
progress in journal) with no reminders. || Used time well during most class periods (as shown by observation by teacher, and documentation of progress in journal) with no reminders. || Used time well (as shown by observation by teacher and documentation of progress in journal), but required reminders on one or more occasions to do so. || Used time poorly (as shown by observation by teacher and/or documentation of progress in journal) in spite of several reminders to do so. ||
 * **CATEGORY** || **4** || **3** || **2** || **1** ||
 * **Diligently follows tutorial** || Judicious use of tools lead to an exemplary product || Small errors in the use of the tools results in a product that is completely acceptable, but does contain noticeable flaws || The piece has many distracting elements but the tool use is obvious. || Either in following the steps, or mistakes in the use of the tools, the work is largely flawed. ||
 * **Practical product** || Stylistic choice in tones, arrangement and colour choices in presenting the render show no errors in following steps || Overall the piece is well constructed, but the some steps have been missed. || Generally the piece is satisfactorily constructed, but the end result is lacking in many areas. || The piece is incomplete, or shows signs of obvious neglect in process. ||
 * **Use of Time** || Used time well during each class period (as shown by observation by teacher, and documentation of
 * **Filetype and size** ||  || All 22 relevant files are submitted. || There may be missing elements or files in the submission || There is a submission but that's about it ||



Assignment # 7 -Activity: Whale breaching the water
You are to make a short animation that involves a cartoon whale breaching the surface of the water, breathing (i.e. you should include a air/water plume as it breathes), then submerging beneath the surface again. The animation (12 sec long) should include a motion tween and a shape tween, a graphic symbol and a movie symbol. The whale __**must**__ be a movie symbol (a 3 sec long undulation of the whale that approximates swimming). Try to incorporate some of the basics of animation and have some part of the animation seem 'cartoonish' (that is - exaggerate various aspects for artistic effect - like the height of the wale's water spot, or the tail or something of that nature).

You will be evaluated as follows:

Evaluation:
shown by observation by teacher, and documentation of progress in journal) with no reminders. || Used time well during most class periods (as shown by observation by teacher, and documentation of progress in journal) with no reminders. || Used time well (as shown by observation by teacher and documentation of progress in journal), but required reminders on one or more occasions to do so. || Used time poorly (as shown by observation by teacher and/or documentation of progress in journal) in spite of several reminders to do so. || For those of you who are done - try this
 * **CATEGORY** || **4** || **3** || **2** || **1** ||
 * **Uses prior knowledge to apply a realistic effect** || Judicious use of tools lead to an exemplary product || Small errors in the use of the tools results in a product that is completely acceptable, but does contain noticeable flaws || The piece has many distracting elements but the tool use is obvious. || Either in following the steps, or mistakes in the use of the tools, the work is largely flawed. ||
 * **Practical product produced** || Stylistic choice in tones, arrangement and colour choices in presenting the render show no errors. || Overall the piece is well constructed, but the some key steps have been missed. || Generally the piece is satisfactorily constructed, but the end result is lacking in many areas. || The piece is incomplete, or shows signs of obvious neglect in process. ||
 * **Use of Time** || Used time well during each class period (as
 * **Filetype and size** ||  || All relevant files are submitted. || There may be missing elements in the submission || There is a submission but that's about it. ||