b. l. u. e. p. r. i. n. t.

::: Tutorials > Flash

Animate with Tween
Introduction to Flash.

Tutorial by Ka Ming
Tuesday March 25, 2003
Download the source files from this tutorial: Download (4kb)

If you want to attract visitors, you sould definitely add some animation to your web site. In this tutorial we will introduce the basics about animating objects in Flash by using Tween.

So... how does this whole thing work?
Think about the cartoons that you used to watch every Saturday morning. The movement of an object in Flash is very similar with how cartoons or motion pictures work, which consists of frame by frame motion. But don't worry, this tutorial will tell you how to generate the motion an object without having to draw the motion frame by frame like a cartoonist.

What is Tween?
Tweening is the easiest and most basic way to animate in Flash. Flash will automatically write out the frames in the animation when you provide the first and last frame.

Tip: Before you begin, it would be great to start by sketching out what you are planning to animate on a piece of paper, just like a director's storyboard. That way it will be easier to capture what you are aiming for.

Let's say we want to animate the square moving from point A to point B. You can download our source file to walk through the process.


1
1			Create your object first; let's use the gray box that we had mentioned. After creating your object, you should see a frame with a dot on your timeline. This is the first frame in the movie. You have to generate the first and last frame in order to tell Flash where you want the box to move. There are ways to generate the last frame without having to draw the box again: First, copy the 1st frame (right click>Copy frames or press Ctrl+Alt+C ). Then, let's say our animation will end at frame 15. Click on the place where it says 15 on your timeline, and paste your frame (right click>Paste Frames or press Ctrl+Alt+V ).


2
2			Next, click on frame 15, and move the box where you want your animation to end. In this example, our objective is to move the box to point B at the right, so we will drag our box to where point B is.


3
3			To tell Flash to animate this entire clip, right click the first frame and then "Create Motion Tween" and do the same thing on frame 15. You will see the frames in purple with an arrow running down. When you are finished, you can check if the motion is working by pressing enter anywhere to preview the movie.

Additional Options:

If you click on a frame of the movie, you will notice the frame option will appear in the properties popup window (or at the bottom of your screen for Flash MX or version 6)

There are several more option to apply to the motion to make it more interesting:
Ease: Select a value of 1 to 100 to adjust how fast you want the object to move from fast and slow down as it reaches towards the end. Select from -100 to -1 for the opposite effect.
Rotation: there are Normal (auto), Counter Clockwise, and Counter Counter Clockwise options available to allow the object to rotate as it moves.

>>TRY THIS:
Fade In/ Fade out effect
Since you have learned how to create motion using Tweens, you can also make a fade in/ and fade out effect using the Tween feature.
1. Simply create frames and objects as stated above. Click on an object, the "graphic" option will appear in the properties popup window (or at the bottom of your screen if you are using Flash MX or version 6).
2. Find “Color”, then choose Alpha. You will see numbers with % sign next to it. Select how much you want to fade as 0% is completely transparent and 100% is opaque.
3. Apply them on either the first or the last frame, depending on if you want a fade in or fade out effect. Finally right click all the frames and select Create Motion Tween.