• 
• Forums
• Calendar
• CMX Info
• Join CMX
• My CMX

•  Home
•  All Content
•  Dreamweaver
•  ColdFusion
•  Flash
•  Fireworks
•  Freehand

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials

Latest Free Content

• Filter Forge 2.0 Review
• Depth of Field
• The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
• Welcome to Workflow Lab
• A PHP CodeIgniter Library for Authorize.net Customer Information Manager (CIM)

View All
Free Content

Accessibility

• Main content
• Log in
• Power Search
• Today's Content

Motion Tweening in Flash CS4 - Think Again!

By: Rafiq Elmansy

Page 1 of 4

Set for printing

Next

Rafiq Elmansy has been a multimedia graphic designer since 2001 and a graphic and web designer since 1999. His background is in fine art and sculpture. He uses Flash to create graphics and animations for desktop applications, cartoons, games, web sites, e-learning courses, and mobile and Pocket PC applications. He is the founder of Bee Design Studio. He is Adobe Flash CS3 Certified, Adobe Photoshop CS3 Certified, and the founder of the first Adobe User Group in Egypt. Rafiq also creates computer artwork and writes articles and reviews about graphic, animation, and Flash topics at his articles site Graphic Mania. Rafiq is an Adobe Community Expert and Contributing writer at Adobe Design and Developer center.

Introduction

The first impression I had when I saw the new motion tweening in Flash CS4 was a face-value assessment: there was a new animation concept inside Flash. I quickly realized, however, there was more to it than that. In this article, I hope to convey something like National Geographic's slogan, "Think Again," in regards to motion tweening.

The changes in Flash's motion tweening are the effect of two changes in Adobe Flash CS4. The first change is in the new interface. There is a new location for the panels and a different arrangement for the properties related to motion tweening. The second change is the new concept of animation itself in Flash CS4. This concept is imported from other Adobe video products, such as Adobe After Effects. The new animation concept is built on two facts:

• The symbol follows an animation path. This path starts with the first keyframe in the animation (the start of the animation) and ends with the last keyframe in the animation (the end of the animation). This path can be manipulated as if it were a stroke or a symbol.
• The keyframe concept has changed slightly from the previous version of Flash. The old keyframe concept requires you to add keyframes manually when indicating a change in the symbol. Old-style motion tweening is now called classic tweening. The keyframe used in the new motion tweening concept is created automatically when you create a change in the symbol. This happens after you apply motion tweening to the symbol.

In this article, we will show examples of how to create and work with the new tweening concept in Flash CS4.

Understanding Motion Tweening in Flash CS4.

To be able to understand the new concept of motion tweening in Flash, let's use the following example:

1. Open a new document in Adobe Flash CS4.
2. Choose the text tool and create a text field on the stage and write in it New Concept.
3. To convert the text field to a movie clip symbol, press F8 and choose Movie Clip from the drop-down list.
4. In the Timeline panel, repeatedly press F5 to extend the layer to 50 frames.
5. Right-click the frame on the timeline and choose Create Motion Tweening. This activates the new motion tween mechanism, so Flash will create a motion keyframe automatically when you change the symbol property.
   
6. Drag the playhead to frame number 50, and then select the text symbol to move it to the right. You will notice that a motion path appears to identify that the animation has been created. A small, diamond-shaped keyframe appears automatically at frame 50.
   

   
   Figure 1: Motion tweening in Adobe Flash CS4

Just like the previous version of motion tweening (now called classic tweening), the above steps may be applied to any type of change in the symbol properties, such as changing the size, rotation or the applied filter properties.

As we see in the example above, when you right-click the frames and choose motion tweening, you actually activate the ability of auto-creating keyframes when you change the status or the property of the symbol. Note that when you changed the position of the symbol in frame 50, an animation keyframe is created automatically. These diamond-shaped animation keyframes are called property keyframes.

Page 1 of 4 1 2 3 4 Next

Download Support Files

Keywords
motion tweening, shape tweening, motion path, Motion Editor, Flash CS4