Animation / Motion Tween Animations
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
We now get to one of the most important Flash techniques, motion tweening, the true motion comes from the fact that the animation includes motion and from the way that the motion is created. The term tween is short for in between. The motion tweening animation method takes the position and attributes of an object in a start key frame, the position and attributes of an object in an end key frame and calculates for you all the animation that will occur in between the two. This is an exciting prospect especially for beginners to Flash because it means that Flash does a lot of the animation work for you. I have an example of a motion tween here in the first key frame. I have an hour hand in the twelve o'clock position in the second key frame the same hour hand is in the six o'clock position. I've set up a tween between the two so that Flash rotates the clock hand many times actually in between the two key frames starting in the twelve o'clock position and then finally resting after spinning several cycles in the six o'clock position. Now with Flash you can do much more then simply moving a shape from one area of the stage to another or rotating a hour hand using motion tweening you can create animations involving the changing of a symbols position, size, tint, transparency, rotation and distortion. In contrast to shape tweening, motion tweening requires that you use symbols, groups and text blocks rather then shapes to create the animation. In this tutorial I demonstrate how to create some basic motion tweens using a graphic symbol, this is really a simple process especially if you've already practiced creating shape tweens. In fact when you first start working in Flash you might be confused about which type of tween to choose motion or shape. The basic distinction between these two is that shape tweens use shapes to morph one shape into another turning a red square into a blue circle for example where as motion tweens use groups, text or symbols to animate the position or attributes of an object. You can also tell the difference between shape tweens and motions tweens after you've created them, motion tweens have this blue, purple, span, where as shape tweens are green up here in the timeline. However the big difference between the two techniques is not the technique used to create them but in understanding when to use which of the five tween object types, shapes, groups, symbols, text blocks, or broken apart text. In summary shape tween shapes that have not been converted to symbols and broken apart text apply motion tweens to symbols, text blocks, groups and object shapes. Let me go ahead and create a few motion tweens for you to demonstrate the various techniques in creating them and modifying them. First you'll want to create the starting point of the animation in key frame one, I have a blank key frame here in frame one, so I'll just use this one. Let's supply a text block as I mentioned you can apply motion tweens to symbols or text blocks. So let's label this motion tween with some text here. And let's use the arrow tool, the selection tool, the position this text block in the upper left hand corner. Now I need to set up the ending point, let's add a key frame, a copy, of that text block and let's move it into the lower right hand position in the stage. So I've set up my starting point and my ending point now let's instruct Flash to fill out all the frames in between. Click in between the two key frames and then from the properties inspector change the tween setting from none to motion. Notice that I have a frame span that goes purple, blue with an arrow pointing from the first key frame to the second key frame and Flash has created the animation the animation for me. Now despite its name a motion tween isn't used solely for tweening motion, you can also tween the alpha tint, brightness, size, position and skew of a symbol. Let me demonstrate how to do that with another example. Let's go ahead and convert our text here, in both key frames to a symbol, modify convert to symbol. And let's just create a graphic symbol; actually I think it might be easier to delete this key frame. And go ahead and insert another copy, another key frame of that first frame by pressing F6. Notice that I still have my motion tween there, still working and I can even take my second key frame and move this down to the lower right hand corner again and it's still animating. You may be wondering well why did I convert it to a symbol. Well let's this time, tween something beyond just motion. Let's tween the alpha of that text so we can make it fade in and out by clicking on the symbol, the text object that's now a symbol. I get a color drop down here in the properties inspector and there's an alpha setting there and I can set the alpha down to zero, notice that it disappears. Go to my second key frame; make sure I have the text selected here. And let's move my property inspector out of the way, there's the object and let's set its alpha to 100, it was already set to 100 but I wanted to show you the basic steps here and you want to ensure that you've got two different alpha settings, one at zero the other one at one hundred percent. Now because I've already set up the tween, Flash, will do all the work for me, fading the text into view. This is probably one of the most popular and common motion tween applications is to just fade things in and out of view in Flash. I've only demonstrated the very rudiments of tweening here, you can also tween objects along an invisible path, you can tween effects like drop shadows and blurs. You can tween sizes and colors you can even tween the rate at which the tween progresses from key frame one to key frame two and much, much more. All of these techniques and more are covered in my full Flash CS3 Professional course for VTC.
Tutorial Information
| Course: | QuickStart! - Adobe Flash CS3 |
| Author: | James Gonzalez |
| SKU: | 33770 |
| ISBN: | |
| Release Date: | 2007-06-29 |
| Duration: | 1.5 hrs / 15 lessons |
| Captions: | For Online University members only |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 