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: Making Animations with Easing (Flash Professional only)

Creating Graphics: Making Animations with Easing
(Flash Professional only)

Examine the completed FLA file

Open the starter document

Create a motion tween

Add the necessary frames to the Timeline

Create a motion tween in the new frames

Use easing controls

Ease in the eight-ball animation

Ease out the eight-ball animation

Add custom easing settings to the eight-ball tween

Create a motion tween with an alpha setting

Create the tween of the alpha value for the shadow

Test the application

 

Creating Graphics: Making Animations with Easing (Flash Professional only)

TOP

This tutorial guides you through the process of using the tweening tools in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. Tweening is the process of animating a graphic by setting starting and ending values for its properties and letting Flash calculate the values in between. The term tween comes from "in between."

A simple example of a tween would be to place a graphic at the top of the Stage and then add several frames to the Timeline and move the graphic to the bottom of the Stage in the last frame. By letting Flash fill in the position values for the frames in between, you can easily create a smooth animation of the graphic from the top of the Stage to the bottom.

Flash Professional also lets you exercise fine control over how the tweened property values are calculated, so you can easily create more complex animations. By using the Custom Ease In / Ease Out window, you can control the speed at which the changes to properties are applied at the beginning, middle, and end of your animations. Careful use of this window can yield visually compelling results.

This tutorial takes you through the process of creating an animation by tweening different properties of a graphic using the various tweening controls in the Flash authoring environment.
After examining the completed animation, you'll begin by opening a starter Flash document and end by publishing the document for web playback. The tutorial should take approximately 20 minutes to complete.

Before you take this tutorial you should read Flash Basics, in Getting Started with Flash.

 

Examine the completed FLA file

#TOP

As you examine the finished version of the application you'll create, you will also look at the Flash workspace.

In this section, you will complete the following tasks:

  • Open the authoring document

  • Review the completed FLA file

  • Close the application

In subsequent sections, you'll go through the steps to create the application yourself.

Open the authoring document

It's helpful to analyze the completed authoring document, which is a FLA file, to see how the author designed the animation and understand what you are going to create.

The files for this tutorial are located in the Samples and Tutorials folder in the Flash application folder. For many users, particularly in educational settings, this folder is read-only. Before proceeding with the tutorial, you should copy the entire Animation Easing tutorial folder to the writable location of your choice.

On most computers, you will find the Animation Easing tutorial folder in the following locations:

  • In Windows: boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Animation Easing

  • On the Macintosh: boot drive/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Animation Easing

Copy the Animation Easing folder to another location on your hard disk that you have write access to. In the Animation Easing folder, you will find a Flash file called tween_finished.fla.

Double-click the file to open it in Flash. You now see the completed tutorial file in the Flash authoring environment.


Review the completed FLA file


In the completed FLA file, you will see a graphic of an eight ball with a shadow beneath it on a green background. The illustration looks like this:


The completed FLA file

There are two tweens in the document:

  • A motion tween of the ball bouncing down to the green surface.

  • A motion tween of the shadow becoming larger and smaller according to the proximity of the eight ball.

There are two ways to see the animation in action.

See the animation play in a separate window as a SWF file

To see the animation play in a separate window as a SWF file, select Control > Test Movie.

See the animation on the Stage in the Flash authoring environment

To see the animation on the Stage in the Flash authoring environment, drag the red playhead across the Timeline.

Close the application

To close the document, select File > Close.

If you prefer to keep the finished file open as a reference while working with the starter file, be careful not to edit it or save any changes to it.

 

Open the starter document

TOP

Now that you have seen the completed file, it is time to create your own Flash document. To get started, you'll open a starter file that contains a few graphics to which you will apply animations.

In the Animation Easing folder, open the file called tween_start.fla. This file contains some graphics that you will use to create the animation.

In this section, you will complete the following tasks:

  • Create a motion tween

  • Use easing controls

  • Create a motion tween with an alpha setting

 

Create a motion tween

TOP

To animate the eight-ball graphic over time, you need to insert enough frames in the Timeline to lengthen the time from the beginning of the FLA file to its end. In this section, you will add frames to the Timeline and then create a motion tween within those frames.

 

Add the necessary frames to the Timeline

TOP

To add the necessary frames to the Timeline:

  1. In the Timeline, drag the pointer to select all the frames from 1 to 60 in all four layers.

    Selecting multiple frames in the Timeline

  2. Select Insert > Timeline > Frame. You should see the frames added to all four layers in the Timeline.



  3. The frames added to the Timeline

 

Create a motion tween in the new frames

TOP

To create a motion tween in the new frames:

  1. Select Frame 61 of the layer named Ball.

  2. Select Insert > Timeline > Keyframe.

    The keyframe added in Frame 61 of the Timeline

  3. On the Stage, press Shift and drag the eight ball downward until the bottom of the eight ball is in the middle of the shadow graphic.

    The eight ball correctly placed on the shadow

    You have now defined a new position for the eight ball on the Stage in Frame 61. The ball now has one position for the first 60 frames, and a different position for the keyframe in Frame 61.

    When you define the motion tween, Flash calculates the positions in each frame for the eight ball, that is, between its original position above the Stage and its final position in the middle of the shadow.

  4. In the Timeline, click the Ball layer name. This selects all the frames in that layer.

  5. In the Property inspector, select Motion from the Tween menu. This applies the motion tween to the selected frames.

    The Motion selected in the Tween menu of the Property inspector

  6. In the Timeline, drag the playhead from Frame 1 to Frame 61. You will see the eight ball animate downward towards the shadow graphic.

    NOTE The speed of the ball's motion is constant throughout the animation. In the next section you will learn to control the speed with which your animations begin and end their motion.

  7. Select File > Save As.

  8. Name the file my_tween_start.fla and click OK.
     

 

Use easing controls

TOP

You can control the speed at which your animations start and stop with the easing controls in Flash. The term easing is used because when you make an animation, such as dropping the eight ball slowly and then speeding it up, it is considered to be "easing in" to its motion. When slowing an animation at the end, it is said to be "easing out." Flash also allows you to perform easing in the middle of a tween with its custom easing controls.

 

Ease in the eight-ball animation

TOP

  1. In the Timeline, select the entire Ball layer by clicking the layer name.

  2. In the Property inspector, drag the Ease slider down until the value

    is -100.

    This will provide the maximum amount of easing in, thereby causing the eight-ball motion to start slowly and accelerate.

    The Ease slider set to -100

  3. Drag the playhead across the Timeline and observe the animation speed.

 

Ease out the eight-ball animation

TOP

  1. In the Timeline, select the entire Ball layer by clicking the layer name.

  2. In the Property inspector, drag the Ease slider up until the value is 100.

    This will provide the maximum amount of easing out, thereby causing the eight-ball motion to start abruptly and then decelerate.

  3. Drag the playhead across the Timeline and observe the animation speed.

  4. In the Timeline, select the entire Ball layer.

  5. In the Property inspector, drag the Ease slider down until the value is 0.

    This will remove the easing from the animation.

Flash also provides more precise control of how easing occurs and allows you to add easing in the middle of a tween. In the next section, you will apply custom easing settings to the animation instead of using the Ease slider.

 

Add custom easing settings to the eight-ball tween

TOP

  1. In the Timeline, select the entire Ball layer.

  2. In the Property inspector, click Edit next to the Ease slider.

    The Edit button in the Property inspector

    The Custom Ease In / Ease Out dialog box displays a graph representing the degree of motion over time. Frames are represented by the horizontal axis, and the percentage of change is represented by the vertical axis.

    The Custom Ease In / Ease Out dialog box

  3. In the Custom Ease In / Ease Out dialog box, Control-click (Windows) or Command-click (Macintosh) on the diagonal line where it crosses Frame 20 in the horizontal axis and on about 32% in the vertical axis. Click just once. This adds a new control point to the line.

    Clicking the Ease In / Ease Out diagonal line

  4. Drag the line to the top of the graph (the 100% line) while keeping it at Frame 20 on the horizontal axis. The line is now a complex curve.

    Dragging the control point to the top of the graph

  5. Drag the left vertex handle of the new control point to the right until it touches the control point. Drag the right vertex handle to the left until it touches the control point. This makes the curve pass through the control point with a simple sharp angle.

    The control point with the vertex handles dragged onto the point

  6. Control-click (Windows) or Command-click (Macintosh) the flat part of the curve at the top of the graph near Frame 32 and drag the new point downward to approximately 76% along the vertical axis.

    Dragging the point at Frame 32

  7. Drag the vertex handles so that the line connecting them to the control point is horizontal and each handle is the same distance from the control point.

    Dragging the vertex handles

  8. Control-click (Windows) or Command-click (Macintosh) the curve at about Frame 44 and drag it up to the 100% line.

  9. Drag the vertex handles for the new control point onto the control point.

  10. Control-click (Windows) or Command-click (Macintosh) the curve at about Frame 52 and drag it down to about 95% on the vertical axis.

  11. Drag the vertex handles so that the line connecting them to the control point is horizontal and each handle is the same distance from the control point.

    The completed Ease In / Ease Out curve

    You have now created a complex easing curve that represents a bouncing eight ball instead of a simple one-way motion tween. You can use the Play button in the Custom Ease In / Ease Out dialog box to preview your animation on the Stage while you experiment with the tween curve.

  12. In the lower-left corner of the Custom Ease In / Ease Out dialog box, click Play. Review the live preview of your animation on the Stage.

  13. Click OK to close the dialog box.

  14. Select File > Save to save your FLA file.


 

Create a motion tween with an alpha setting

TOP

In this section, you will create a tween of the alpha value of the shadow graphic that appears under the eight ball. Because the changes in the shadow should match the speed and timing of the bouncing eight ball, you will use the same easing curve you created in the previous section.

 

Create the tween of the alpha value for the shadow

TOP

  1. In the Timeline, select Frame 61 of the layer called Shadow.

  2. Select Insert > Timeline > Keyframe.

  3. Drag the playhead to Frame 1.

  4. Click outside the Stage to deselect all selections.

  5. Click the shadow movie clip on the Stage.

  6. In the Property inspector, select Alpha from the Color menu.

  7. Drag the Alpha slider down until the value is 25%. You have now set the alpha value to 25% in Frame 1 and 100% in Frame 61.

    Setting the alpha value of the Shadow movie clip on the Stage to 25%

  8. In the Timeline, click the layer named Ball to select the frames in that layer.

  9. In the Property inspector, click Edit next to the Ease slider.

  10. In the Custom Ease In / Ease Out dialog box, press Control-C (Windows) or Command-C (Macintosh) to copy the easing curve you applied to the ball tween.

  11. Click Cancel to dismiss the dialog box.

  12. In the Timeline, click the layer named Shadow to select all the frames in that layer.

  13. In the Property inspector, select Motion from the Tween menu.

  14. Click Edit next to the Ease slider.

  15. In the Custom Ease In / Ease Out dialog box, press Control+V (Windows) or Command+V (Macintosh) to paste the easing curve from the ball tween.

  16. Click Play in the dialog box to preview the animation on the Stage.

    By applying the same curve to the Shadow tween, you have made the transparency of the shadow animate according to the proximity of the ball. This way the shadow appears to become darker as the ball approaches the surface and lighter as the ball bounces away from the surface.

  17. Click OK to close the dialog box.

  18. Select File > Save to save your FLA file.

 

Test the application

TOP

At any point during authoring, you can test how your application plays as a SWF file. Because this tutorial contains no animation or interactivity, the file will look the same in test mode as it does in authoring mode.

  1. Select File > Save to save your FLA file.

  2. Select Control > Test Movie.

  3. When you finish viewing the application, close the SWF file by clicking the close box in the test window.

You have now completed a successful complex animation using the custom easing controls in Flash. By using these controls while tweening the various properties of objects on the Stage,

you can create a wide range of complex motions and interesting visual effects.

 

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