Week 4 Topics

Chapter 5 - Shape Tweening

A shape in Flash is a vector-based object or series of objects. To be suitable for shape tweening, a shape can't be composed of grouped objects. If you have a grouped object, you must first break it apart. Shape tweening involves putting a shape in one keyframe and another shape in another keyframe, and Flash generates the in-between frames in which the first object morphs into the second. This is in contrast to Chapter 4, where we constructed all the frames ourselves.

Exercise 1 - Shape Tweening Text (using textTweenFinal.fla and textTween.fla)

1. In Flash, open the Final version and hit Enter to play it. Then open the other file and hit Enter.
2. In the tween layer, press F7 on Frame 10. This adds a blank keyframe -- we add a blank keyframe because we want to add new content here, not copy the content of frame 1.
3. Note the word "boarding" disappears after the first frame because the tween layer now has 10 frames whereas the boarding layer has only 1. So we click on Frame 10 in the boarding layer and click F5 to insert a frame.
4. Select the Text Tool. Select Frame 10 on the tween layer, click on the Stage, and type the letter X just before the letter b. Use the Arrow tool to select the X and position it before the b.
5. Note: the X is still editable; to use the text in a shape tween, we'll have to break it apart to make it into a shape so with the X still selected, choose Modify>Break Apart.
6. Click anywhere between the two keyframes in the tween layer and in the Property Inspector, click the Tween drop down menu and select Shape. This will turn the timeline green between the two frames (if you see a broken, dashed line appear in the Timeline, that indicates that the tween is not working properly.)
7. Press Enter to test the tween and save the file.

1. With the previous exercise, slow down the frame rate a lot so you can see the shape tween in detail when you hit Enter
2. When you add shape hints, you must start on the first frame in the animation so with the Playhead over Frame 1 and the tween layer selected, choose Modify>Shape>Add Shape Hint -- a red circle with an "a" will appear in the middle of the snowboard. Using the Arrow tool to drag this to the upper left corner of the snowboard shape.
3. Move the Playhead to Frame 10 and click and drag the shape hint to the upper left inside corner of the X. When you let go, if the shape hint turns from red to green, this means that the shape hint has been accepted. Press Enter to view the animation.
4. Move the Playhead to Frame 1 and choose Modify>Shape>Add Shape Hint to add another shape hint -- this will appear as a small "b". Click and drag this to the upper right corner of the snowboard. Move the Playhead to Frame 10 and drag the second shape hint to the upper right outside corner of the X. Press Enter to view the animation.
5. Add two more shape hints - in frame 10, they should be at the bottom of the X and below the first two. Experiment with moving them around.
6. To remove a hint, right-click on the hint in the initial frame and choose Remove Hint. You can also remove all shape hints by right-clicking.

Exercise 3 - Multiple Shape Tweening (using mutplShpTwnFinal.fla and mutplShpTwn.fla) - You will place them on separate layers using the Distribute to Layers feature. You will also use a Layer Folder to group layers which will be useful as the number of layers in an animation increases.

1. Open the final version and preview it. If you can't see the entire stage, choose View>Magnification>Show All. Close the file and open the other file.
2. Click on Frame 1 in the layer to select all the shapes on Frame 1 (you can see the selection mesh) and choose Modify>Distribute to Layers. This puts each selected shape into its own layer. You can see what is in each layer by clicking underneath the "eye" to make the contents of all other layers invisible. Before moving on to the next layer, double click the layer name to make it more descriptive.
3. To see more layers, either use the scrollbars or click and drag the bottom boundary to see more layers.
4. Starting with Frame 6 in the layer left bottom, click and drag down to select Frame 6 on all the layers below left bottom.
5. Press F6 to add a keyframe on Frame 6 of each of these layers - inserting a keyframe will copy the contents of Frame 1 of that layer to Frame 6 of that layer.
6. Move the Playhead back to Frame 1 and click the Lock icon to lock all layers at once. Click the Lock icon for the left bottom layer to unlock just that layer (this is quicker than individually locking each layer but this layer).
7. Click on Frame 1 in the left bottom layer to select it. Select the Free Transform Tool and click and drag the upper right resize handle down toward the left corner. This will scale the shape down to create the starting point of the animation for this layer.
8. Click on the dot in the Lock column of the left bottom layer to relock it and then click on the Lock icon for the top left layer to unlock that layer. Click in Frame 1 to select it, select the Free Transform Tool and click and drag the lower right resize handle toward the upper left.
9. Repeat these steps for the other layers - you will need to use the Arrow key to reposition the center shape near the center of the Stage.
10. Unlock all the layers and starting with the left bottom layer, click and drag down between the two keyframes to select all the layers below. In the Property Inspector, select Shape from the Tween drop down menu. Press Enter to Preview.
11. Double click the Layer 1 icon -- this opens the Layer Properties box. For the name, enter container and select Folder for Type. A Layer folder can't have artwork; it's only purpose is to hold other layers.
12. Click on the layer at the top below the folder and then shift-click the layer on the bottom to select all the layers, and then drag them onto the container layer. The layers will then appear as indented in this folder. You can click on the container layer arrow to collapse the folder. Save and close the file

1. Open the final version and hit Enter to Preview. Close this file and open the other file. Click on Frame 1 in the text layer to select the artwork in that frame. It contains text that has been broken apart so that one can apply a gradient to it (you can't apply a gradient to text, but you can to a shape).
2. In the Color Mixer Panel, click on the Fill Color box to open the Fill Color palette. Select the black and white radial gradient, it is second from the left at the bottom. Click away to see the effect.
3. Click on Frame 1 of the text layer to select the shapes again. Select the Paint Bucket Tool and click on the upper left hand corner of the X. The point where you click defines the center of the radial gradient (the center of the radial gradient is white for this gradient).
4. On the text layer, press F6 on Frame 30 in the timeline to add a new keyframe. This copies the content from the previous keyframe.
5. On the dot layer, press F5 on Frame 30 to add frames up to Frame 30 on this layer; this allows the dot to be visible through frame 30.
6. On the text layer, click on frame 30 to select it and using the Paint Bucket, click on the top right of the letter "m". This will make this white (because white is the color of the center of the gradient).
7. Click in the text layer anywhere between the two keyframes and choose Shape from the Tween drop-down menu in the Property Inspector to create a Shape Tween between the two keyframes. Press Enter to test it. Save and close the file.

Chapter 6 - Symbols and Instances

Symbols reduce the file size of movies because the file size isn't proportional to the number of instances of the symbol; each additional instance increase the file size very little because it references the symbol. Three types of symbols - graphic symbols, button, and movie clip symbols. Each graphic symbol has its own timeline. Symbols are also useful because changes in the symbol are automatically reflected in all instances of the symbol.

Exercise 1 - Creating Graphic Symbols (using graphicSymbol.fla)

1. Open the file. Choose Window>Library to open the Library panel. Notice that the project name is displayed at the top of the Library Panel.
2. Using the Arrow Tool, select the snowflake on the Stage and drag it into the lower half of the Library panel. This will open the Symbol Properties box. Alternatively, you can select the snowflake and chose Insert>Convert to Symbol to open this box.
3. In the Symbol Properties box, give it a name, select Graphic, and for registration keep in the middle, and then click OK. This will create a symbol in the library and an instance will be on the Stage. Save and close the file.

Above we have used two methods for creating a symbol from artwork already in a move -- by dragging artwork into the Library Panel or by selecting the artwork and choosing Insert>Convert to Symbol. Alternatively, one can go into Symbol Editing Mode with a blank canvas and create the symbol there. There are three ways; to go into symbol editing mode with a blank canvas: (1) Insert>New Symbol, (2) Select New Symbol from the Library Options menu in the upper right corner of the Library, or (3) Click the New Symbol button in the bottom left corner of the library.

Exercise 2 - Creating Symbol Instances (using instances.fla) -

1. Open the file and select the instances layer and make sure the library is displayed (Window>Library or F11). In the library, click on the snowflake's Graphic symbol icon (the thing to the left of the name) and drag it onto the Stage. This places an instance of the symbol on the Stage. Drag seven more snowflakes from the Library. Save the file.

Exercise 3 - Editing Symbols - If you change a symbol in the Library, all of the instances of the item on the Stage will be updated.

1. Using the previous file, in the Library, double click on the Graphic symbol icon to the left of the snowflake symbol name. The Stage will change, because you are now editing the Timeline for the symbol and no longer working on the main Timeline. Notice the gray (work) area around the Stage is gone as is the bounding box around the symbol. Furthermore the information bar above the Stage shows two names: Scene1 and snowflake. This is another indicator you are no longer working on the main Timeline.
2. Select the Ink Bottle tool and select black for the Stroke Color. Click on the snowflake to add a stroke to the snowflake shape.
3. In the Information Bar, click on the underlined Scene 1 to return to the main Timeline. Notice that all the instances of the snowflake now have a black stroke around them.
4. Choose a snowflake instance on the Stage and double click on it. This will allow you to edit the symbol in place, in the context of the other instances on the Stage. When you edit in place, the other objects on the Stage are dimmed. Alternatively you can edit in place by choosing Edit>Edit in Place. Both editing in the library and editing in place change the appearance of the master symbol as well as all its instances; the difference is that when you edit in place you can see the object in the context of other objects on the Stage in the main Timeline.
5. Use the Arrow tool to select the snowflake shape. Change the Fill Color in the Property Inspector. Click on Scene 1 to return to the main timeline.

Exercise 4 - Editing Symbol Instances - Sometimes you want to change an instance without making changes to the other instances of a symbol. You can change the tint, brightness, and alpha settings of symbol instances using the Property Inspector. We will also use the Free Transform tool to change instances.

1. Use the previous file. Select the snowflake instance in the upper left corner of the Stage - click only once; if you double click it, you will be editing the symbol, not the instance.
2. Choose Brightness from the Color Styles box in the Property Inspector and set the brightness at 100%. -100% is black and +100% is white.
3. Select another snowflake and choose Tint in the Color Styles box in the Property Inspector and set the Tint at 75%
4. Select another snowflake and choose Alpha in the Color Styles box in the Property Inspector - 100% is opaque, and 0% is fully transparent
5. Select another snowflake and choose Advanced in the Color Styles box in the Property Inspector and click the Settings button where you can set RGB and alpha - on the left one enters percentages and on the right decimal values.
6. To remove any styles, choose None from the Color Styles box in the Property Inspector; this will restore the instance to its original condition.
7. Select another snowflake and select the Free Transform tool. In addition to the obvious changes, you can get skew by moving your cursor between the handles until you seen the skew cursor icon - then click and drag toward a handle. You can also change the registration point.

Exercise 5 - Animating Graphic Symbols (using animSymbolFinal.fla and animSymbol.fla)

1. Open the final version and select Control>Test Movie to test the movie. Close this file and open the other file. This has two layers - a locked background layer with a bitmap background image and another layer where you will place the animated symbol you are about to create.
2. In the Library (F11 if not open), double click on the snowflake graphic to put you into editing mode for this symbol. In the Timeline, press F7 on Frame 10 to add a blank keyframe to Frame 10.
3. Using the Oval Tool, set the Stroke to none and the Fill to white, and then draw a small circle directly below the Registration Point. Click anywhere between Frame 1 and Frame 10 and select Shape from the Tween drop-down menu in the Property Inspector.
4. Press F6 on Frame 20 to add a keyframe to Frame 20. With the Arrow Tool, move the snowball circle down. With the snowball circle still selected, set the Alpha to 0% in the Color Mixer. Click anywhere between Frame 10 and 20 to select one of the frames, and select Shape from the Tween drop-down menu. Press Enter to preview the animation - as it falls, the snowflake should turn into a snowball and then fade away.
5. Click on Scene 1 in the Information Bar to return to the Main Timeline. Drag an instance of the snowflake onto the Stage and choose Control>Test Movie. The animation doesn't work. In this case, the main Timeline is only one frame in length, then only one frame will be displayed. You need to extend the Main Timeline to be at least as long as the Timeline of the animated Graphic symbol, which is 20 frames.
6. Click in Frame 20 of the animSymbl layer and drag down to Frame 20 of the background layer to select the range of frames between the layers. Press F5 to insert frames and extend the Timeline of both layers to 20 frames in length.
7. Choose Control>Test Movie to preview the movie; the problem now is that the snowflakes are all falling in unison. Click to select a snowflake on the Stage. Enter any number between 1 and 20 in the First field in the middle of the Property Inspector; this sets the frame in the Master Timeline at which the animation of this instance of the symbol begins. Do this for the remainder of the snowflakes, choosing numbers randomly between 1 and 20. When you are done, scrub the playhead (move it manually back and forth) to see how this starting of animation in different frames for different snowflakes is working. Click on a particular frame and inspect the various snowflakes and their starting points. Save the changes to the file and close it.

Revised: February 8, 2006. Comments to William Pegram, wpegram@nvcc.edu