Parag’s Den

Dedicated to my adored friends…..

Flash Tweening

Posted by paragdongre on February 5, 2009


Tweening comes from the words “in between”.
With Tweening you can go from one keyframe to another and specify changes in the animation and let the Flash program create the frames in between.

Example

In this example we will learn how to make an object move across the screen.

<html><body>
<object width=”400″ height=”400″>
<param name=”movie” value=”ball.swf”>
<embed src=”ball.swf” width=”400″ height=”400″></embed>
</object>
</body></html>

Step 1
Create a small circle to the left in the Stage area. Do this by selecting the circle tool from the left toolbar. Draw the circle in the Stage area.
Step 2
Select the Arrow tool from the left toolbar. Double-click on the circle to select it.
Step 3
Now we have to convert the circle to a symbol. When the circle is converted to a symbol we can create instances of the circle. From the top menu choose Modify > Convert to Symbol. Name the symbol “Ball”, and select OK.
Step 4
Go to Frame 10 in the Timeline. Do this by clicking the gray field below 10. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.
Note: A keyframe specifies changes in an animation. You create keyframes at important points in the Timeline and let Flash create the frames in between.
Step 5
Select the circle and move it to the right a couple of inches.
Step 6
Click on the Timeline any place between Frame 1 and Frame 10. Then right click and choose Create Motion Tween.
Step 7
Choose Control > Test Movie from the top menu to test your Flash movie.

    Flash Guide Tweening

With Motion Guide Tweening you can move an object from one location to another along a specified path.

Example
In this example you will learn how to draw a path an object should follow.

<html><body>
<object width=”400″ height=”400″>
<param name=”movie” value=”man.swf”>
<embed src=”man.swf” width=”400″ height=”400″></embed>
</object>
</body></html>

 

Step 1
Choose Window > Common Libraries > Graphics. Select the image you want to use. In this example we have used a Man.
Step 2
Click on the image and drag it outside the left edge of the Stage
Step 3
Go to Frame 40 in the Timeline. Do this by clicking the gray field below 40. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.
Step 4
Click on the Timeline any place between Frame 1 and Frame 40. Then right click and choose Create Motion Tween.
Step 5
Right click on Layer 1 (Click on the layer name, where it says “Layer 1”). Choose Add Motion Guide in the pop-up menu. The Flash program will now insert a motion guide layer on top of layer 1. Motion guide layers are used to draw lines an animated symbol should follow.
Step 6
Click on the Motion Guide Layer to make sure it is the active layer (Click on the layer name, where it says “Guide: Layer 1”).
Step 7
Click on the Pencil tool in the left toolbox. Set the Pencil Mode to Smooth (in the Options section of the left toolbox).
Step 8
Draw a line. Begin on the image and draw a line to the other side of the Stage.
Step 9
Go back to Frame 1 in the Timeline. Click on the Arrow tool in the left toolbox. Select the “Snap to Objects” button in the Options section of the left toolbox.
Step 10
Place the image with its center on the beginning of the motion guide (the black line you have drawn with the Pencil). The center of the image shows as a +. A black circle appears when the image is snapped to the motion guide. Release the mouse button when the image is snapped to the guide.
Step 11
Go to Frame 40. Place the image with its center on the end of the motion guide.
Step 12
Choose Control > Test Movie from the top menu to test your Flash movie.

Is your Flash Movie Playing too Fast?

You can control this by selecting Modify > Movie from the top menu. A Movie Properties box will show. The Frame Rate field sets how many frames to display per second. Adjust the number to a lower number, and test your movie again.

 

    Flash Tint Tweening

With Tint Tweening you can change the color of an object.

Example
In this example you will learn how to change the color of an object.

<html><body>
<object width=”400″ height=”400″>
<param name=”movie” value=”changecolor.swf”>
<embed src=”changecolor.swf” width=”400″ height=”400″></embed>
</object>
</body></html>

Step 1
Choose Insert > New Symbol.
Note: To add Tint effects the object must be a symbol.
Step 2
Name the symbol “changecolor ” and select the Graphic option in Behavior. Click OK.
Note: You will now be taken to the symbol generator in the Flash program. Here you create symbols. Symbols can be dragged to the stage of your movie after you have created them. Step 3
Choose the Text tool in the left toolbox. Choose Text > Size > 36 from the top menu to make the text big. Choose Text > Style > Bold to make the text thick.
Step 4
Click in the work area and write “Demo: Color Changing Text”.
Step 5
Jump back to the movie. Do this by choosing Edit > Edit Movie.
Step 6
Insert the symbol you just created into the movie. Choose Window > Library. Select the “changecolor” symbol and drag it into the middle of the Stage.
Step 7
Insert a keyframe in Frame 15 and in Frame 30.
Step 8
Go to Frame 15. Right click on the text in the Stage. In the pop-up menu, choose Panels > Effect.
Step 9
Choose Tint from the drop down menu. A color map will show. Set the colors to: R=0, G=255, B=0.
Step 10
Click on the Timeline any place between Frame 1 and Frame 15. Then right click and choose Create Motion Tween.
Step 11
Click on the Timeline any place between Frame 15 and Frame 30. Then right click and choose Create Motion Tween.
Step 12
Choose Control > Test Movie from the top menu to test your Flash movie.

    Flash Shape Tweening

With Shape Tweening you can change one object into another.

Example
In this example you will learn how to change one object into another.

<html><body>
<object width=”400″ height=”400″>
<param name=”movie” value=”helloworld.swf”>
<embed src=”helloworld.swf” width=”400″ height=”400″></embed>
</object>
</body></html>

Step 1
Choose the Text tool in the left toolbox. Choose Text > Size > 48 from the top menu to make the text big. Choose Text > Style > Bold to make the text thick.
Step 2
Click in the work area and write “Learning”.
Step 3
Right click on the text you just wrote and choose Panels > Align from the pop-up menu.
Step 4
In the Align box select the “To Stage” button first. Then click on the “Align Horizontal Center” button and the “Align Vertical Center” button. Close the Align box.
Step 5
Select the Arrow Tool and click on the text. Choose Modify > Break Apart from the top menu.
Step 6
Insert keyframes at Frame 24, 50 and 51.
Step 7
Delete the text “Learning” in Frame 24. Select it and press the Delete button on your keyboard.
Step 8
Write a new text on the Stage. Write “Flash!” (Font size: 48, style: bold).
Step 9
Right click on the text you just wrote and choose Panels > Align from the pop-up menu. In the Align box select the “To Stage” button first. Then click on the “Align Horizontal Center” button and the “Align Vertical Center” button. Close the Align box.
Step 10
Select the Arrow Tool and click on the text. Choose Modify > Break Apart from the top menu.
Step 11
Insert a keyframe in Frame 26.
Step 12
Double click the keyframe in Frame 1. In the small pop-up box click on the Frame tab. Set Tweening to Shape. Close the pop-up box.
Step 13
Double click the keyframe in Frame 26. In the small pop-up box click on the Frame tab. Set Tweening to Shape. Close the pop-up box.
Step 14
Double click the keyframe in Frame 51. In the large pop-up box click on the Frame Actions tab. Click on the + sign. Choose Basic Actions > Go To. Close the pop-up boxes.
Step 15
Choose Control > Test Movie from the top menu to test your Flash movie.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: