What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

 

Adobe Flash Help & Tutorials

 Back to Topics

 

    How to Create Graphics: Create a Timeline Animation in Flash

Creating Graphics: Create a Timeline Animation

Create a motion tween

Create a shape tween

Copy and paste keyframes in an animation

Change the speed of the animation

Change the frames per second speed

Change the acceleration and deceleration

Test the SWF file

Summary

 

Creating Graphics: Create a Timeline Animation

TOP

Macromedia Flash Basic 8 and Macromedia Flash Professional 8 provide powerful tools for creating animation. Most simple animation in Flash is done using a process known as

tweening. Tweening is short for "in between" and refers to filling in the frames between two keyframes so that a graphic displayed in the first keyframe changes into the graphic displayed in the second keyframe.

There are two types of tweening that you can create in Flash--a motion tween and a shape tween. The main difference between motion tweening and shape tweening is that motion tweening operates on grouped objects or symbols, and shape tweening is used with objects that are not symbols and are ungrouped.

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

  1. To open your start file, in Flash select File > Open and navigate to the file:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Timeline Animation and double-click animation_start.fla.

    • On the Macintosh, browse to Macintosh HD/Applications\Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Timeline Animation and double-click animation_start.fla.

    NOTE The Timeline Animation folder contains completed versions of lesson FLA files for your reference.

  2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

  3. Select Window > Workspace Layout > Default to modify your workspace for taking lessons.

  4. In the Stage View pop-up menu, in the upper-right side of the Timeline, select Show Frame to view both the Stage and the workspace.

  5. If necessary, drag the lower edge of the Timeline (Window > Timeline) down to enlarge the Timeline view.

    You can also use the scroll bar to scroll through the layers.

     

Create a motion tween

#TOP

You create a motion tween by defining properties for an instance, a grouped object, or text in a starting keyframe, and then changing the object's properties in a subsequent keyframe.

Flash creates the animation from one keyframe to the next in the frames between the keyframes.

To create a motion tween, you'll take an instance of a tire symbol and make it appear to bounce.

  1. In the Timeline (Window > Timeline), double-click the Layer 1 title and type TireAnim. Press Enter (Windows) or Return (Macintosh) to rename the layer.

  2. With the TireAnim layer still selected, drag the Tire movie clip from the Library window (Window > Library) to the Stage, positioning it above the tire shadow.

  3. Use the Selection tool to reposition the tire, if necessary.

  4. With the Selection tool still selected, in the TireAnim layer, select Frame 30. Then press F6 to insert a keyframe.

  5. Select Frame 15 and press F6 to add another keyframe.

  6. With the playhead still on Frame 15, press Shift to move the tire in a straight line, and drag the tire up.

  7. In the TireAnim layer, select any frame between Frames 2 and 14. In the Property inspector, select Motion from the Tween pop-up menu.

    An arrow appears in the Timeline between the two keyframes.

  8. Select any frame between Frames 16 and 29. Again, use the Tween pop-up menu in the Property inspector to select Motion.

  9. Select File > Save to save your changes.

 

Create a shape tween

TOP

With shape tweening, you specify attributes for a shape in one keyframe, and then modify the shape or draw another shape in a subsequent keyframe. As with motion tweening, Flash creates the animation in the frames between the keyframes.

You'll now set up a tween for the tire's shadow so that as the tire bounces, the shadow moves and fades.

  1. Click the ShadowAnim layer to select it.

  2. Select Frame 30 and press F6 to insert a keyframe; then select Frame 15 and press F6 to insert a keyframe.

  3. With the playhead on Frame 15, select the Selection tool. Drag the tire shadow slightly up and to the right.

  4. With Frame 15 still selected, select the Eyedropper tool in the Tools panel, and then click the shadow object.

  5. If the Color Mixer is not already open, select Window > Color Mixer to open it, and change the Alpha value from 25% to 10%.

  6. Click the pop-up menu control in the upper-right side of the Color Mixer and select Close Panel.

  7. Select any frame between Frames 2 and 14 on the ShadowAnim layer. In the Property inspector, select Shape from the Tween pop-up menu.

  8. On the ShadowAnim layer, select any frame between Frames 16 and 29. Again, use the Tween pop-up menu in the Property inspector to select Shape.

 

Copy and paste keyframes in an animation

TOP

For the tire to look realistic as it bounces, it should compress slightly on each bounce. You can create this effect by transforming the shape of the tire in Frame 1 of the animation, and copying that frame in Frame 30.

  1. With the Selection tool, select Frame 1 of the TireAnim layer. Then press F6 to add a keyframe.

    A new keyframe is added and the playhead moves to Frame 2.

  2. Select Frame 1 of the TireAnim layer again.

  3. In the Tools panel, select the Free Transform tool.

    The tire is selected, and transform handles appear around it.

  4. Select the transformation center point (the small circle near the center of the movie clip) and drag it to the bottom of the tire.

    The center point snaps to the lower-middle transform handle.

  5. On the Stage, drag the upper-middle transform handle down to slightly compress the tire shape.

    If necessary, drag the tire to align it over the shadow. To view the positioning, drag the playhead over Frames 1 and 2.

  6. Save your file.

    NOTE Always save your document before attempting to manipulate tweens, including copying, cutting, and pasting frames. If you make an error, you can revert to your saved document.

  7. Right-click (Windows) or Control-click (Macintosh) Frame 1 of the TireAnim layer and select Copy Frames from the context menu.

  8. Select Frame 29 of the TireAnim layer and press F6 to insert a keyframe.

  9. In Frame 30 of the TireAnim layer, right-click (Windows) or Control-click (Macintosh) and select Paste Frames from the context menu.

  10. Select Control > Test Movie to view the animation.

  11. Close the SWF file window to return to the authoring environment.

 

Change the speed of the animation

TOP

When you tested the animation, you might have noticed that the tire bounces rather slowly. You can change the speed of an animation by changing the number of frames that play per second, and by setting positive and negative easing values, which determine the rate of acceleration and deceleration.

 

Change the frames per second speed

TOP

The frame rate, measured in frames per second (fps) is the speed at which the animation plays. By default, Flash animations play at a rate of 12 fps, which is ideal for web animation.

 Sometimes, however, it's desirable to change the fps rate. You'll now change the frame rate to 36 frames per second, which will make the tire appear to bounce more rapidly.

  1. Click the Stage, away from any objects.

  2. In the Property inspector, type 36 in the Frame Rate text box.

    The frame rate applies to the entire Flash document, not just to an animation within the document.

     

Change the acceleration and deceleration

TOP

By default, tweened frames play at a constant speed. With easing, you can create a more realistic rate of acceleration and deceleration. Positive values begin the tween rapidly and decelerate the tween toward the end of the animation. Negative values begin the tween slowly and accelerate the tween toward the end of the animation. You'll now add both positive and negative easing values to your animation.

  1. On the TireAnim layer, select any frame between Frames 2 and 14. Then in the Property inspector, in the Ease text box, type 100. Press Enter (Windows) or Return (Macintosh).

  2. On the same layer, select any frame between Frames 16 and 29. Then in the Ease text box, type -100. Press Enter or Return.

  3. On the ShadowAnim layer, select any frame between Frames 2 and 14. Then in the Ease text box, type 100. Press Enter or Return.

  4. In the same layer, select any frame between Frames 16 and 29. Then in the Ease text box, type -100. Press Enter or Return.

 

Test the SWF file

TOP

You'll test your document to view the animation and see if it works as expected.

  1. Save your document and select Control > Test Movie.

  2. When you finish viewing the animation, close the SWF file window.

 

Summary

TOP

Congratulations on learning how to animate objects in Flash. In just a few minutes, you learned how to accomplish the following tasks:

  1. Create an animation using motion tweening.

  2. Create an animation using shape tweening.

  3. Copy and paste keyframes in an animation.

  4. Change the speed of an animation.

You can also use Timeline effects to quickly add animation effects to text, graphics, images, and symbols.

 

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash