New Perspectives on Macromedia Flash 8, Comprehensive Tutorial 3

New Perspectives on Macromedia Flash 8, Comprehensive Tutorial 3 Tutorial 3 Creating Animations At A Glance

Creating Animations...... 2 Elements of Animation...... 2 Quick Quiz...... 2 The Timeline...... 3 Classroom Activity...... 4 Scenes and Multiple Timelines...... 5 Quick Quiz...... 5 Creating Animation...... 6 Timeline Effects...... 6 Classroom Activity...... 6 Frame-by-Frame Animation...... 7 Quick Quiz...... 8 Classroom Activity...... 8 Tweened Animation...... 8 Classroom Activity...... 9 Graphic Symbol Animations...... 9 Quick Quiz...... 10 Classroom Activity...... 10 Key Terms...... 12 Discussion Questions...... 13

of 12 New Perspectives on Macromedia Flash 8, Comprehensive Tutorial 3

CREATING ANIMATIONS

In this tutorial students learn how to create animations. Animations make graphics more exciting and they are fun to create. Once students learn how to create animations in Flash, they can experiment with many creative ways of animating objects. You should emphasize the importance of learning the basic methods and tools used in creating animations in Flash as well as the terminology involved. Stress to students that by first learning the animation fundamentals, they can then become more proficient and creative using Flash.

In this tutorial, students explore a sample document (sports2.fla) to see how an animation was created using layers and frames and to explore the use of scenes. They also create different types of animation effects using a partially completed banner (banner.fla) for the Flounders Pet Shop.

ELEMENTS OF ANIMATION

Flash animations are created by adding frames with varying content to a document. Typically this content is arranged into several layers. These frames and layers are organized and controlled using the document’s Timeline. A document can have more than one Timeline by using more than one scene. Scenes are covered later in the tutorial. Refer students to Figure 3-2 to see how the basic elements of animation are related. Make sure they understand the concept of having different content on more that one layer and on more than one frame.

The first part of this section explains what layers are. Point out to students that layers can help keep the many graphic elements of a document organized. Also, remind them that in Tutorial 1 they saw how objects drawn or moved on top of other objects can segment or merge with those objects. To prevent objects from affecting other objects, they can be placed in separate layers. Also, tell students that another reason to use layers is to create animations.

This section also introduces two types of special layers. These are guide layers and mask layers. A guide layer contains objects used as guides in drawing objects on other layers. They can also be used to provide a path for an animated object. Stress to students that the contents of a guide layer do not display in the final movie. Mask layers are used to create special effects.

A key element of an animation is frames. Frames represent the different states of the document’s animation. Each frame is played in sequence. Each layer in the document starts with one frame. Explain to students that the length of an animation depends on the number of frames. Also, explain how the frame rate determines how long each frame is displayed. And be sure to emphasize the difference between regular frames and keyframes. Keyframes are used when the content changes from the previous frame within the same layer. Students will need to know when to add keyframes in order to create animations.

Quick Quiz 1. Layers are used to organize graphic objects in a Flash document. True/False? (Answer: True) 2. A Flash animation is created by changing the Stage content from one ______to the next within the same layer. (Answer: frame)

3. A(n) ______layer is a special type of layer that may be used to align objects on other layers. (Answer: d) a. scene b. mask

c. frame d. guide

THE TIMELINE

This section covers a very important element of Flash that is central to the development of animations. Students must understand the different parts of the Timeline. They should learn how to change the view of the Timeline, how to identify the different types of layers and frames within the Timeline, and how to use the playhead and other Timeline elements to determine what part of an animation they are working with.

Refer to Figures 3-3 and 3-4 to see the different elements of the Timeline and the purpose of each. Stress to students that even though the many components of the Timeline may seem confusing at first, they will learn how to use all of the components as they work through this and future tutorials. Students should be encouraged to work through the hands-on activities that start on page 118 to practice working with the Timeline of the sample document sports2.fla.

Use the sample document to demonstrate how the layers and frames work to create the animation. Use the document’s Timeline to show how its different elements work. For example, you can hide the Baseball layer to show how its content (the baseball) is no longer visible. Other elements of the Timeline can be demonstrated at this point also, such as the elapsed time indicator and the current frame indicator. For example, you can demonstrate to students how the content on the Stage changes as each frame is played. And then move the playhead to a specific frame and point out the current frame indicator and elapsed time indicator on the Timeline.

Another important part of working with the Timeline is knowing how to adjust its view. Show students how to expand the height of the Timeline window, which is something they will have to do when the number of layers increases as they develop animations.. Also, demonstrate how the Timeline changes with the different settings in the Frame View pop-up menu as shown in Figure 3-7.

Students will be working extensively with layers once they start creating their own animations. It’s important for them to learn how to organize and work with layers within the Timeline. Show students the various icons on the Timeline that are used with layers, such as the icons to hide and lock layers shown below. Also show them how to easily add and delete layers using the icons on the lower-left side of the Timeline also shown below.

Demonstrate the use of these icons

Also show students how they can rename a layer by double-clicking its name. And show them how to open the Layer Properties dialog box by double-clicking the layer icon to the left of the layer name. Then refer to Figure 3-10 to explain the various layer properties.

Classroom Activity Have students use Flash to open the sports2.fla file. Have the students select the top-most layer in the Timeline. Then have them click the Insert Layer icon to add a new layer. Have them double-click the layer icon to the left of the new layer to open the Layer Properties dialog box as shown below.

Ask the students to make the following changes to this layer’s properties in the Layer Properties dialog box. Change the name of the layer to Temp; click the Lock checkbox to select it; click the Guide radio button to change the layer’s type. Then have them click OK to close the dialog box. Ask them to observe the changes they made in the Timeline as shown below. Finally, with the Temp layer selected, have the students click the Delete Layer icon to delete the layer.

Another important item that can be used to organize layers is a layer folder. A layer folder can be created to store any number of layers. This is especially useful when you have a group of layers that are related to each other. For instance, if several layers are created to make a particular animation, the group of layers can be placed inside one layer folder. The folder’s contents can then be hidden or displayed in the Timeline. You can hide the layers within a folder when you are not working with them. Demonstrate layer folders to your students and explain why they can be useful. Emphasize to the students that the number of layers can quickly increase as you develop an animation, so creating layer folders can make it easier to organize and work with the layers. Be sure to have the students review the example of Figure 3-11.

When working with the frames in the Timeline you will often want to select, delete, copy, or move one or more frames. Demonstrate to students how to do these tasks. Explain to your students the importance of being able to manipulate the frames within the Timeline particularly when the number of frames and the complexity of the animations increase.

Demonstrate to the students and have them practice how to select one or more frames. Do this by dragging the mouse pointer across the frames as shown below.

Selected frames

Then show them how to move the group of frames to another location within the same layer or to another layer.

SCENES AND MULTIPLE TIMELINES

An important but possibly confusing topic is that of scenes. Scenes are used to better manage a long document. Rather than having one long scene, it is often easier to break it into several shorter scenes which can be developed individually. As with any complex problem it is usually better to break the problem down into smaller, more manageable parts. Explain to your students that breaking a long complex document into scenes is not necessary, but it will help them work more efficiently. Use Figure 3-14 to explain the concept of scenes carefully to your students. Stress to them that each scene has its own Timeline and that the frames in each Timeline play one after another.

The Scene panel is a good way to show students how the scenes in a document are organized. Use the sports2.fla document to demonstrate the Scene panel. Show students how each scene can be renamed and how the order of the scenes can be changed. Also, show how clicking a scene name in the Scene panel causes the selected scene to be displayed in the program window. Another important element is the Edit Scene button shown in Figure 3-17. This button provides a quick and easy way to switch from one scene to another.

Students should be encouraged to work through the steps starting on page 128 to practice using scenes with the sports2.fla file. On page 129 students are to open the Banner.fla file and add a new scene to the document. They rename the new scene.

Quick Quiz 1. A document’s Timeline consists of symbols and frames. True/False? (Answer: False) 2. You can place related layers inside a layer ______to keep them organized. (Answer: folder) 3. Each scene in a document contains its own ______. (Answer: a) a. Timeline b. Scene panel c. Edit Scene button d. Library

CREATING ANIMATION

In this section students learn how to create animations using Timeline effects and frame-by-frame animations. Another form of animations is tweened animations. Tweened animations are covered in

Session 3.3. Students will also learn how to test these animations both within the program window and in a separate Flash Player window. Students will create an animation sequence for the Flounders banner in which a fish pulls a sale sign across the Stage. This animation will be created with a Timeline effect. In a second animation sequence that students will create, the plant leaves will be animated so that the leaves’ tips appear to be moving. This will be done with a frame-by-frame animation. The fish in the banner will be animated using tweened animations in the next session.

TIMELINE EFFECTS

One of the quickest ways to create an animation is by using one of the Timeline effects. A Timeline effect is similar to a macro in other programs. You specify certain settings in a dialog box and Flash creates the necessary, frames, layers, symbols, and/or motion tweens to create the effect based on your selections. The easiest way to demonstrate a Timeline effect is to draw an object on the Stage such as a square. Then select the object and insert a Timeline effect, such as a transition. The Timeline effect dialog box contains a preview of the effect, so that as you make your selections, you can update the preview within the dialog box as shown in Figure 3-21.

Have your students try inserting various Timeline effects to see how they work. Also, emphasize to your students that the animations created with Timeline effects can also be created without using Timeline effects. When you use Timeline effects, Flash creates the elements needed for the animation as shown in Figure 3-22 where a new layer is added and also in Figure 3-23 where symbols are added to the library. Remind students that they will be able to create similar and more complex animations without using Timeline effects later in this tutorial and in later tutorials.

In the steps starting on page 133, students will draw a sale sign next to the fish and then they create a Timeline effect animation of the fish pulling the sign across the Stage. Point out that the sign and the fish are combined into one symbol as evidenced by the blue outline around them as shown in Figure 3-26.

Classroom Activity Have the students create a new document in Flash. Instruct them to select the Text tool from the toolbar, and to type the word FLASH at the center of the Stage. Have them select the Selection tool and with the text still selected to change the properties of the text in the Property inspector. Use Impact for the font, 50 for the text size and black for the text color as shown below.

With the text still selected, instruct the students to click Insert on the menu bar, point to Timeline Effects, point to Effects, and click Expand. In the dialog box, change the effect to Both and increase the size of the Height to 50 pixels as shown below. Have them click the Update Preview button to see the effect. Once they are satisfied with the effect they should click the OK button to create the effect in the document. They can then use the Test Movie command in the Control menu to see the animation in the Flash Player.

FRAME-BY-FRAME ANIMATION

Use Figure 3-27 to show what the Timeline for a frame-by-frame animation looks like. Point out that each frame in the figure is a keyframe because the content for each frame changes from the previous frame. This is indicated by the black dot in each frame. Also, point out that the content does not need to change for every frame. You can have several frames where the content does not change and then others where it does. This would still be considered a frame-by-frame animation as shown in the example below. Gray areas indicate content does not change from the previous keyframe

The steps that begin on page 137 instruct the students to create a frame-by-frame animation. The students will first convert the fish and the plant graphics into symbols. Then they use the plant symbol to create the frame-by-frame animation. Tell students to follow the instructions carefully. The plant is edited in symbol- editing mode as shown in Figure 3-28.

Point out that while in symbol-editing mode, the plant symbol has its own Timeline which is different from the Timeline for the whole document. As they start adding frames to the Timeline make sure they are in the plant symbol’s Timeline and not in the main document’s Timeline. Remind students to look at the Address bar to see that they are indeed in symbol-editing mode. Also, point out that the animation they are creating is contained within the symbol. As a result, instances of this symbol will each contain the same animation.

Students will add frames to the symbol’s Timeline and they will adjust the position of the plant leaves with the Selection tool in each new keyframe.

In the steps that start on page 140, students are instructed to create instances of the Plant symbol on the Stage. But before they start to add instances, they have to delete the plant symbol that is on the Stage. Remind students that the plant graphic on the Stage is now an instance of the Plant symbol, so deleting it

of 12 New Perspectives on Macromedia Flash 8, Comprehensive Tutorial 3 does not affect the symbol that is stored in the library. They are instructed to delete the plant instance so that new instances can be created in a separate layer. Explain to students that it is best to keep different parts of a Flash document in separate layers and that in order to create certain animations the animated objects must be in their own individual layers. Students will use the Free Transform tool and the Flip Horizontal command in the Transform submenu of the Modify menu as they create the final plant graphic shown in Figure 3-33.

Once they create an animation students are ready to test it. Explain that since the plant animation was created inside the Movie Clip symbol, its animation cannot be viewed within the document’s main Timeline. In other words, if they click the Play command in the Control menu, the plant will not move. This is because the Timeline of the Movie Clip is not synchronized with the document’s main Timeline. To view the Plant symbol’s animation they should test it by having the SWF file play in a Flash Player window. This is accomplished by using the Test Movie command in the Control menu. The Test Movie command actually causes Flash to create a SWF file which is then played in a Flash Player window. The SWF file is stored in the same folder as the FLA file. Also, point out that Figure 3-34 shows the SWF file playing in a Flash Player window which is within the Flash program.

Another way to test the animation is used in Step 4 of page 144. By using the Default (HTML) command in the Publish Preview menu, a SWF file is created along with an HTML file with the code to play the SWF file. This HTML file is then opened in the default Web browser. If possible, use Windows Explorer to show students the files that are created when they use these test options.

Quick Quiz 1. The Test Movie command creates a FLA file that is then played in a Flash Player window. True/False? (answer: False) 2. In a frame-by-frame animation, the frames where the content changes from the previous frame are called ______. (Answer: Keyframes) 3. A Movie Clip symbol has its own ______which can be used to create an animation within the symbol. (Answer: b) a. Flash Player window b. Timeline c. Library d. Property inspector

Classroom Activity Have the students create a new document in Flash. Ask them to draw a small circle on the upper-left corner of the Stage. They can use stroke and fill colors of their choice. Next have them add a keyframe in Frame 5. In Frame 5, have the students use the Selection tool to move the circle slightly down and to the right. Then have them add another keyframe in Frame 10. Again, they should move the circle farther down and to the right. Have them repeat this process by adding keyframes at Frames 15 and 20. When they add each keyframe they should move the circle farther down and to the right getting closer to the lower-right corner of the Stage. Then have them test the animation by pressing the Enter key. This shows them a simple example of a frame-by-frame animation. Note that in this case they do not need to create a symbol.

TWEENED ANIMATION

Now that students have created a frame-by-frame animation they will learn how to create a tweened animation. Point out to students the difference between the two types of animations. Explain to them that a tweened animation is easier to create because they only have to create the content for the beginning and ending frames. Flash fills the in-between frames for them.

Students learn how to create a motion tween in this section. Be sure to emphasize the basic steps involved in this process including the following points.

. An object that is to be animated using a motion tween must be a symbol. . The symbol to be animated must be in its own layer. . The beginning and ending frames for the motion tween must be keyframes.

Be sure to refer to Figure 3-35 and explain how you can create the motion tween and its settings using the Property inspector.

In the steps that begin on page 146, students are instructed to create a motion tween for the fish symbol. They first create a new layer in which they drag an instance of the Fish1 symbol. Initially the Timeline only contains one frame. In order to create the animation new frames have to be added. Explain the difference between adding regular frames and adding keyframes. Highlight the fact that when they first add a regular frame at Frame 48 for Layer 1 on page 146, the fish and the plant disappear. Make sure students understand that this is because the layers containing the fish and the plant do not yet exist beyond Frame 1. Finally, in steps 11 and 12 on page 147, students create the motion tweens to make the fish swim across the tank and back again to its starting position. Remind students that if they make a mistake they have many levels of Undo available.

Shape tweening is only briefly discussed here since it is not used with the Flounders banner. However, mention to students that one main difference between a shape tween and a motion tween is that in a shape tween the object to be animated should not be a symbol.

Classroom Activity Ask your students to create a new document and to draw a large rectangle in the middle of the Stage. Then have them add a keyframe in Frame 20 and another keyframe in Frame 40. Then in Frame 20, have them use the Free Transform tool with the Scale modifier to reduce the size of the rectangle. Have them click Frame 1 and in the Property inspector instruct them to select Shape from the Tween drop-down list. Then in Frame 20 have them also select Shape from the Tween drop-down list in the Property inspector. They should have two shape tweens. Ask them to test the animation by pressing the Enter key. The shape of the rectangle changes throughout the animation. It gets smaller through Frame 20 and then returns to its original size in Frame 40.

GRAPHIC SYMBOL ANIMATIONS

A special type of animation can be created by using graphic symbols. Animations created within graphic symbols have special characteristics different from animations created within movie clip symbols. You want to stress these differences in this section.

The main difference between a graphic symbol and a movie clip symbol is that the Timeline of a graphic symbol is synchronized with the Timeline of the document, whereas the Timeline of a movie clip symbol is independent of the document’s Timeline. Refer to the Plant movie clip symbol animation created in the previous section. When instances of the Plant symbol are placed in the document, their animation did not play within the program window. That is, when you use Control and Play, the plant leaves did not move. Instead, you had to publish the file as a SWF file and then play it in the Flash Player. In order for the animation to play within the program window, the Timeline of the symbol and the document’s Timeline have to be synchronized. This is the case with graphic symbols.

In this section, students will create a graphic symbol animation. In the graphic symbol, two words will display one at a time and continuously change from one word to another. Instances of the symbol will then be added to the document’s Stage. Once the instances are placed on the Stage, each instance will be changed to have a different starting point. This is another characteristic of a graphic symbol animation and is possible because the Timeline’s of the graphic symbol instances are synchronized with the document’s timeline.

Starting on page 150, students will create a graphic symbol animation. This is a fairly simple animation of a word fading out. Be sure to point out the reason for converting the word Fish into a movie clip symbol in step 5 of page 150. In order to create a motion tween with the word, it must be a symbol. Also explain to students that symbol instances are often inserted inside other symbols to create complex animation effects.

Once they create the Fish text motion tween, the tween’s frames are copied and pasted unto a new layer in the steps starting on page 151. Students should follow these steps carefully and should understand how to select all the frames of one layer by clicking the layer’s name and how to paste the frames into another layer. You should also explain that a set of frames can be copied from one part of a layer to another part of the same layer. On page 152 the students are instructed to swap the Fish text instances with the Aquarium text instances. Be sure that the instances are swapped in each keyframe of the motion tween and not just in the beginning keyframe.

To complete the graphic symbol animation, on page 151, students reposition the frames of the Aquarium layer so that its motion tween starts on Frame 11 instead of Frame 1. This completes the graphic symbol animation. On page 154, students are instructed to add instances of the graphic symbol animation to the Stage in the Intro scene. At this point, explain to students how the starting frame of each instance can be changed in the Property inspector by selecting the instance and then changing the number in the First text box. In this exercise, one instance will start at Frame 1 of its Timeline and the other instance starts at Frame 11 of its Timeline.

Quick Quiz 1. An object that is to be animated using a motion tween must be a symbol. True/False? (Answer: True) 2. In a(n) ______tween, the object that is tweened must not be a symbol. (Answer: shape) 3. In a(n) ______symbol, the symbol’s Timeline is synchronized with the Timeline of the document. (Answer: d) a. button b. movie clip c. static d. graphic

KEY TERMS

Term Definition Guide layer A special type of layer that may contain objects to which objects on other layers may be aligned. Objects in a guide layer do not appear in the final movie. Motion guide layer A guide layer that contains a path for an animated object to follow. Guided layer The layer below a guide layer. Mask layer Layer that contains a graphic object through which the contents of the underlying layer will show. Masked layer The layer below a mask layer. Keyframe A frame that represents a change in the content from the previous frame. Layer folder A container in the Timeline in which you can place layers. The display of the contents of a layer folder can be collapsed to hide the list of layers. Scenes Provide a way to break up a large document into smaller sections that are more manageable. A Flash document may be divided into scenes similar to a motion picture. Timeline effects Special effects and animations that can be easily created by making selections and entering values into a dialog box. Frame-by-frame animation An animation in which the content for each individual frame must be

created. Tweened animation An animation in which the content for the beginning and ending frames is created and where Flash then creates the content for the in-between frames. Motion tweening Tweened animation in which an object changes its position, rotates, scales in size, or even changes in color. Shape tweening Tweened animation in which a shape changes into another shape over time.

DISCUSSION QUESTIONS

1. Animation can make your Web graphics more appealing. Overuse of animation, however, can drive people away from your Web site. Ask the students to think about how much animation is enough to get a message across on a Web page and at what point does the use of animation become distracting? Point out that there is probably no right answer, but instead the use of animation on a Web page should be thought out carefully. Lead them to think in terms of what purpose a particular animation serves. In other words, is the animation necessary? Or can the same message be effectively delivered without animation. 2. Tweened animations are easy to create since you just have to create the content for the beginning and ending frames. Flash then creates the in-between frames for you. Why then would you want to create a frame-by-frame animation which can be more work? Are there situations where a frame- by-frame animation has to be used instead of a tweened animation? Give an example. 3. When editing a movie clip symbol a Timeline is displayed. Is this Timeline the same as the document’s Timeline? If not, how is it different? Can you create frames in a movie clip symbol’s Timeline without editing the symbol? Why can’t a movie clip’s animation be tested by clicking Play on the Control menu? 4. Ask students to think about what type of animations they would add to their school logo if they were to redesign it using Flash. Ask them to think about how they could incorporate motion tweens for text blocks and for at least one of the graphic elements in the logo. If the school logo already has animation, explain how you think it was created. If it does not have animation, do you think the school administration would want to have animation added to it? Why or why not?