Shape Tween in Flash
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash CS4 must be installed in your system to download the .fla file.
This tutorial will teach you a simple shape tween.
Steps to follow:
- Open a new flash file (Ctrl+N).
New Document window will appear
Select General panel and choose Type: Flash Document . Press OK. - If your timeline window is not open, press (Ctrl+Alt+T).
- Now you can see a single Layer called "Layer1" in your timeline Window.
- Select the first frame. Now go to your working area and draw any object. To start off with, may be you can draw a circle.This is going to be your initial object.
In the above demonstration, my initial object is a short line. - Select frame 20 and press F6 to insert a new keyframe.
- Still keeping playhead on frame 20, delete the object present in your working area. Now draw a different object, may be a square.
In the above demonstration, I have drawn a long line. - Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.
- Now press (Ctrl+Enter) to view your motion tween.
Animation & Effects Tutorials - Motion Tween
Motion Tween
Flash can create two types of tweened animation using timeline:
Motion Tween &
Shape Tween Creation of Motion/Shape tween using timeline is the basics of Flash.
Motion tween is nothing but tweening a Symbol's movement from one position to another.
To implement Motion Tween all that you have to do is, provide Flash with Symbol's initial position and the end position. Rest is taken care by Flash. Isn't it really simple.
For example in the above demonstration,I have converted the pencil object to a Symbol. Provided Flash with its initial and the end position, intermediate tweening is done by Flash. Motion Tween animation is as simple as that :)
Okay, you ready to learn how to create motion tween. All you have to do is just follow this tutorial step by step.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash CS4 must be installed in your system to download the .fla file.
Steps to follow:
- Open a new flash file (Ctrl+N).
New Document window will appear
Select General panel and choose Type: Flash Document . Press OK. - If your timeline window is not open, press (Ctrl+Alt+T).
- Now you can see a single Layer called "Layer1" in your timeline Window.
- Select the first frame. Import your image onto stage, upon which you would want to implement motion tween.
File>Import>Import to Stage, or just press (Ctrl+R).
Or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape. - Now select your object on the stage and press F8 to convert this image to a Symbol. Convert to Symbol window will pop-up.
Name your Symbol what ever you like.
Select Graphic behavior and press OK.
Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, First convert the object to a Symbol.
- Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new keyframe.
- Still keeping playhead on frame 20, move your Symbol to any other position other than the present one.
- Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.
- Now press (Ctrl+Enter) to view your motion tween.
Working with Layers in Flash
This tutorial will teach you how to work on layers using Flash MX 2004.
If you still haven't finish motion tween. Please go through Motion Tween Tutorial and then get back here.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash CS4 must be installed in your system to download the .fla file.
Steps to follow:
- Open a new flash file (Ctrl+N).
New Document window will appear
Select General panel and choose Type: Flash Document . Press OK. - If your timeline window is not open, press (Ctrl+Alt+T).
- Now you can see a single Layer called "Layer1" in your timeline Window.
- Create a Shape Tween on Layer1. Similar to the one in Shape Tween Tutorial.
- Single click on add new layer button.
- A new layer gets added. By default it will be named "Layer 2".
- Create a Motion Tween on Layer 2. Similar to the one in Motion Tween Tutorial. After creating two layers, your timeline will look something like the one shown below.
- Now press (Ctrl+Enter) to view your motion tween.
Motion Guide in Flash
What is Motion Guide?
Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles. Learn how to move Flash objects in circular, zig zag or curved paths using Flash motion guide.
This tutorial will explain on how to create motion guide in Flash CS4
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash CS4 must be installed in your system to download the .fla file.
Steps to follow :
- Create a graphic symbol or drag a pre-existing graphic symbol from library onto the stage. Name the layer as "graphic"
- Right click on the "graphic" label and select "Add Motion Guide" from the pop-up window.
- A new layer will appear on top of the "graphic" layer with the label "Guide:graphic" along with the guide icon.
- Draw the path for your symbol in this new layer using pencil or line tool.
For example: I drew a circle for my car.
- Select frame 50 of guide layer and press "F5" to insert frames.
- Now go to "Frame 1" of "graphic" layer and drag your symbol to one end of your path. While dragging, you will see a bubble on the symbol. That bubble should go right below the path. Something like the one shown below.
- Now go to "Frame 50" of "graphic" layer and press F6 to insert a new keyframe.
- Now drag your symbol to other end of your path. Again, the bubble should go right below the path.
- Select any frame between 1 to 50 of your "graphic" layer. Right click and select "motion tween" from the pop-up menu.
That's it, you are through. Press Ctrl+Enter to view your work.
Masking in Flash
Masking is revealing portion of your picture or graphic in the layer below.
While surfing through net you might have come across lots of beautiful Flash effects such as ripple effect , some wording with sky background or glitter bordering an object, and wondered "How? What is the logic behind this". The answer for all this is masking.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash CS4 must be installed in your system to download and view the .fla file.
I shall start this tutorial assuming that the reader has basic knowledge of flash such as Shape Tween and working with layers. Okay! if you are ready, just follow the steps given below.
STEPS TO FOLLOW
Inserting Layers and Naming them
- By default you will have a layer in your timeline window. Insert one more layer, totally you need two layers to mask an object.
- Rename the top layer to "Mask" and the layer below that to "background".
Creating Shape Tween
- Import your picture to the "background" layer.
- Using Oval tool from your tool box, draw a circle in your "Mask" layer and delete it's border.
- Drag the circle to one end of your picture.
- Now go to"frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.
- Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that your background image is available all through your mask.
- Select "frame 40" of your "Mask" layer, that is your new keyframe, Keeping the playhead on "frame 40" of "Mask" layer, drag the circle to other end of your picture.
- Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your "Mask" layer, select Shape tween in your properties window.
Masking
- Right click on the "Mask" layer (the area where you named the layer not where the frames exist) and select Mask.
Your Mask is all ready. Press Ctrl+Enter to view your Mask.
