Flash tutorials
Home 3D (2) Actionscripting (65) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (52) Text Effects (38)

Advanced motion tweening effect

2.8.2006, 0:0    Total views: 55586
This tutorial shows you how to create advanced motion tweening effect. To create this tutorial, you don't have to use action script code.You can use this effect for some banners, header animation, or wherever you like.It is so effective and simple to create it, so lets go!



Step 1

Open a new flash document. Open the Document Properties dialog (CTRL+J) and set Width to 300 and Height to 250px. Frame rate set to 50fps (Frames per second).





Step 2


Take the Oval Tool (O), Stroke Color must be switched off, under Fill Color choose any color and draw a circle. After you have drawn a circle, open the Align Panel (Ctrl+K) and click on Align to stage icon, and after that on Align horizontal and Align vertical center icon to precisely center your circle with background. Look at the pictures below!







Step 3

Click on Insert > Timeline > Create Motion Tween.



Step 4

Click on the twentieth frame of layer 1 and press F6. After that take the Free Transform Tool (Q) and do like it is shown on the picture below!







Step 5

While you're circle that you have just increase is still selected open the Properties Panel (Ctrl+F3) and set the alpha to 0%.





Step 6

Insert a new layer (layer 2), take the Text Tool (A), click on the first frame and type any text on the circle. Look at the picture below!



Step 7

Then click on Insert > Timeline > Create Motion Tween.

Step 8

Click on the twentieth frame of layer 2 and press F6.

#ads#



Step 9

After that, you have to increase the text (in my example flashvault) using Free Transform Tool (Q) in an equivalent way like we have increased the circle in step 4. Then open the Properties Panel (Ctrl+F3) and set the alpha to 0%.

Now you'll need to get something like this:



Step 10

Insert a new layer (layer 3). After that using the mouse select the whole frames of layer 1 and press right click and choose Copy Frames. Look at the picture below!



Step 11

Then, click on the first frame of layer 3, press right click and choose Paste Frames.



Step 12

Using drag and drop technique, do like it is shown on the picture below!



Step 13

Insert a new layer (layer 4). Then, using the mouse select the whole frames of layer 2 and press right click and choose Copy Frames, like we have done in step 10.

Step 14

Click on the first frame of layer 4 and press right click and choose Paste Frames.



Step 15

After that using drag and drop tehnique, do like it is shown on the picture below!



Step 16

Repeat steps 10-15 as many times you like. Note! Every other process must start five frames after regarding the previously process. Look at the picture below!



We're done! I hope that you understand this tutorial. If you don't understand it, download the
source file (.fla) and everything will be clear!

Cheers!

Download source file (.fla)
Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 221534

2. Water effect
Total views: 166040

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146246

Related links