Chapter 4Creating Animations

TABLE OF CONTENTSChapter Objectives..........................................................................................1File Listing.......................................................................................................2Projects to Assign............................................................................................2Lecture Note: Chapter Overview.....................................................................3Lecture Note: Create Frame-by-Frame Animations........................................4

Teaching Tip: Image Rates....................................................................4Lecture Note: Create Motion-Tweened Animation..........................................5

Discussion Topic: Tweened Animation..................................................6Lecture Note: Work with Motion Guides.........................................................6

Teaching Tip: Path Smoothing..............................................................7Lecture Note: Create Animation Effects.........................................................8

Teaching Tip: Affecting the Entire Object.............................................8Lecture Note: Animate Text............................................................................9

Discussion Question: Comparing Animation.........................................9

CHAPTER OBJECTIVES Create frame-by-frame animations. Create motion-tweened animation. Work with motion guides. Create animation effects. Animate text.

File Listing

LOCATION PROVIDED FILENAME

SAVED FILENAME

Chapter 1 fla4_1.fla frameAn.fla

Chapter 2 fla4_2.fla carAn.fla

Chapter 3 fla4_3.fla carPath.fla

Chapter 4 fla4_4.fla mBikeRotate.fla

Chapter 5 No file provided textAn.fla

Skills Review fla4_6.fla skillsdemo4.fla

Project Builder 1 ultimatetours3.fla

ultimatetours4.fla

Project Builder 2 No file provided summerBB4.fla

Design Project No file provided dpc4

Group Project No file provided portfolio4.fla

Projects to Assign

The Skills Review covers all of the objectives covered in the chapter in a step-by-step progression.Assign this exercise for extra reinforcement. Solution files will be very similar.

Project Builder 1 gives students practice in creating animations for a Web site.

Project Builder 2 gives student practice in creating a Web site.

Design Project asks students to evaluate the design and effectiveness of an existing Web site.

Portfolio Project gives students the opportunity to expand their portfolio started in Chapter 2 by adding buttons and linking them to small animations.

Lecture Note: Chapter OverviewLecture Note: Chapter OverviewSee Figure on 4-3 when discussing the tools used in this chapter.

Animation can serve as a powerful part of your communication medium, regardless of whether the medium is e-commerce, education, or entertainment.

Chapter 4 introduces students to the primary forms of animation available within Flash: frame-by-frame and tweened animation. Macromedia Flash allows you to create animations that can move and rotate an object around the stage, and change its size, shape and color. Animations are created by changing the content of successive frames.

The chapter provides insight into the fundamentals of animation, as well as how the presentation of a series of still images can give the appearance of movement. It then explores some of the strengths and weaknesses of each type of Flash animation.

Lecture Note: Create Frame-by-Frame Lecture Note: Create Frame-by-Frame AnimationsAnimationsSee Figure 1 and 2 when discussing frame-by-frame animation.

A frame-by-frame animation is probably the most basic, but time-consuming, form of animation supported by Flash.

This chapter introduces students to how to work with the timeline, and place a sequence of images “frame-by-frame” in a specified frame rate to give the appearance of motion.

Students will learn that frame animation requires a unique balance between the appropriate number of images, number of frames used, and frame rate to create a realistic look. With too few graphics, your animation might appear choppy. Too fast a frame rate and your animation might appear blurry.

The chapter’s exercises will provide your students with hands-on experimentation on how to manipulate the number of images, the frame rate, as well as the ability to manipulate an image’s appearance over time via the transform tools.

While Flash can support imported graphics for its frame animation content, such as content created in Photoshop or Illustrator, now is a perfect time to combine a students Flash drawing tools experience with the need to create individual illustrated “frames” that will compose their animation.

IMAGE RATES

Macromedia Flash uses a default rate of 12 frames-per-second (fps). Lower frame rates result in a jerky image, while higher frame rates may result in a blurred image.

Lecture Note: Create Motion-Tweened Lecture Note: Create Motion-Tweened AnimationAnimationSee Figure 10 when discussing the Motion Tween Timeline.

This chapter introduces your students to Flash’s motion-tweened animation, which they should find infinitely less time consuming than frame animation.

Motion tweening causes Flash to interpolate and create “in-between” movements between a first and last frame of animation, instead of requiring that the user create each graphic frame-by-frame.

Flash tweened animation is created by:

1. Creating a starting keyframe.

2. Declaring an ending keyframe.

3. Modifying the content in the ending keyframe (via the effects or transform tools).

4. Select the first keyframe, or any space between the first and last keyframe and choose Insert > Create Motion Tween.

Discussion Topic

TWEENED ANIMATIONWhile motion-tweened animation is generally easier and less time-consuming than frame animation, there are times when frame-by-frame animation is just what is needed. Ask your students to describe what circumstances would be appropriate for both tweened animation and frame animation.

Students should recognize that Flash has two forms of tweening: motion and shape. These forms are represented differently in the timeline. Shape tweening, which is similar to a morph effect, is covered in the next chapter.

Lecture Note: Work with Motion GuidesLecture Note: Work with Motion GuidesSee Figure 13 when discussing an object’s orientation to the path.See Figure 19 when the orient to path and ease options.

Without the use of motion guides, as discussed in this chapter, objects animated in Flash would only be able to travel in a straight line.

With motion guides, which can essentially be created with any Flash drawing tool, students will generate a path that will guide moving objects around the stage in any direction.

Students should be aware of the unique relationship between the guide layer, and the object being guided, remembering that the guide layer is always on top.

There are two methods in which your students will be able to animate with the assistance of a motion guide:

1. Create a motion tweened animation. Insert a motion guide layer above, and then “snap” the animated object to that guide.

2. Draw a path first, and then create the animation. Declare the path on its own guide layer and snap the animation to the path.

Students may initially have some difficulty “snapping” their animation to their motion guide; that is, causing their object to respect the suggested motion of the path. It is important for them to recognize that the object will snap based on its “registration point”, which by default is in the dead center of an object.

As your students become familiar with creating motion guides and snapping to the guide, they will then move on to working with the other Motion Guide options which are available to them via the Properties Dialog Box. These include:

Tweening: specifically, the type of tweening they choose - Motion, Shape, or None.

Scale: when turned on, this option allows for the smooth transition from a smaller to a larger object (and vice versa).

Ease: specifies the rate of change between tweened frames. Ease values are between –100 (slow) and 100 (fast.)

Orient to Path: orients the baseline of the object to the path

PATH SMOOTHINGYou can smooth out a path by selecting it with the Selection tool, and then clicking the Smooth option several times.

Lecture Note: Create Animation EffectsLecture Note: Create Animation EffectsSee Figure 21 when discussing the Onion Skin feature.See Figure 22 when discussing the Timeline effects.

This chapter uses a culmination of the motion-tweening skills developed earlier in the chapter, and introduces some techniques for altering properties, such as an object’s scale, rotation, color or alpha effects over time to add more visual interest.

Exercises in the book indicate how students can use motion-tweening to rotate and resize an object, change the color of an object over time, use the onion skinning feature, create timeline effects, and apply a several timeline effects to one object.

Students are also introduced to Flash’s Onion Skin feature, a powerful animation planning method, which allows the user to view an outline of an object in any number of frames. (See figure 21). Onion skinning is only visible within the Flash-authoring environment, and will not be presented in the finished .swf file.

Macromedia Flash allows you to combine various animation effects and provides several pre-built Timeline effects, such as an object fade-in. You can apply Timeline effects to the following objects:

Text Graphics Bitmap images Button symbols

AFFECTING THE ENTIRE OBJECTStress that motion-tweening is performed on instances of symbols and text blocks; this means that changing a color of a motion-tweened object affects the entire object. To make changes to individual areas of an object, you must first select the object and choose the Break Apart command from the Modify menu.

Lecture Note: Animate TextLecture Note: Animate TextSee Figure 35 when discussing animating text.

Like most other objects in Flash, Text can also be animated, as long as the user understands that the entire text block will be animated together.

For example, a text block containing the word “Spin” can be set to rotate over time 5 times, but in order to have each letter rotate independently, you’d need to either create four separate text blocks with S-P-I-N, or break the text into separate graphic objects that are independently animated.

This chapter works through the animation of a number of text objects, and helps the student create rotating, resized and fading text, and treat text blocks to a combination of alpha effects and rotations. Finally, students make a text block into a button, and then add actions to buttons.

DiscussionQuestion

COMPARING ANIMATIONAsk your students to compare animating text and animating graphic objects. Discuss the issues involved with animating both. For example, ask the students if they can edit individual characters within the text block after they create a motion animation.