EchoEcho.Com Homepage
Web Hosting - As Reliable As It Gets!
   Home > Tutorials > Flash > Tweenings


 Tutorials 
 D-Zine Articles 
 Online Tools 
 Free Resources 
 References 
 Quiz 
 Hosting 

















  Flash Tweenings :
SHAPE TWEEN








First look at this example of a Shape Tweening:






Do the following to create a Shape Tweening.

1. First insert 41 frames in your movie.
To do this click frame 41 in Layer 1 on the timeline, then press F5.

Timeline




2. Enter a "1" on the canvas of your movie.
To do this: choose the Text Tool in the Toolbox.
Then enter "1" with font size 48 and bold.
It is important that the font is not too thin.




3. Now you need to position the "1" at the very center of your movie.
Select it by clicking on it with the mouse.
Choose Modify > Align in the menu (or press Ctrl + K),
an Align Properties box appears.
Choose the settings shown below.
Remember to select the "Align to page" option.

Click OK.

Align

Your "1" is now positioned at the center of the movie.




4. Next step is to "break apart" the font.
Select your "1" with the mouse and press Ctrl + B
(or choose Modify > Break Apart in the menu).




5. Now insert keyframes in frame 19, 40 and 41,
You do this by positioning the frame pointer in frame 19 - then press F6,
then repeating the same procedure for frame 40 and frame 41.

Timeline




6.Now delete the "1" in frame 19.
To do this: position the frame pointer in frame 19.
Select your "1" and press the delete button on the keyboard.




7.Next step is to enter a "2" in frame 19.
Choose Text Tool in the Toolbox and enter "2" with font size 48 and bold.
(The "2" can be in another color than you used for the "1")




8. Now align the "2" to the center of the movie.
Select the "2" with the mouse and choose Modify > Align in the menu(or press Ctrl + K),
an Align Properties box appears.
(Remember to select the "Align to page" option).

Click OK.

Align

The "2" is now positioned at the center of the movie.




9. Next step is to "break apart" the font of the "2".
Select it with the mouse and press Ctrl + B (Or choose Modify > Break Apart in the menu).




10. Now you need to insert a keyframe in frame 21.
This is done by positioning the frame pointer in frame 21 and then pressing F6,
(for illustration, refer to #5 in this tutorial).




11. Now comes the shape tweening.
First double click the keyframe in frame 1.
A Frame Properties Box appears.
Choose "Tweening" and select Shape in the "Tweening" drop-down menu.
Click OK.

Shape tweening

Repeat this step to make a Shape Tweening in frame 21.




12. Next step is to add shape hints to your movie.
Shape hints allow you to control the shape tweening.
This means that you select certain points on the element you want to shape tween,
and then select the according points on the element you want the tweening to end with.
This way you are in charge of which points on the start object should become which on the end object.

Shape hints contain characters to identify corresponding points on the start and end objects.

You can add up to 26 different shape hints in a shape tweening.

Position the frame pointer on frame 1.
Choose Modify > Transform > Add shape hint in the menu (or press Ctrl + H).
Do this twice.

Now you have 2 hints in frame 1 and 2 hints in frame 19.
Each hint has a letter showing its current position.




13. Now you'd want to position the hints. Starting with the hints on the "1".
Position the frame pointer on frame 1.
Drag the a hint to the top of your "1".
Drag the b hint to the bottom of the "1".

Shape Hint frame 1

The Hint must be on the edge of the "1".




14. Next position the hints on the "2".
Position the frame pointer on frame 19.
Move the a hint to the top of the "2".
Move the b hint to the bottom of the "2".

Shape Hint frame 1




15. Now we will repeat step 12 through 14 to enter shape hints on frame 21 and frame 40.
First position the frame pointer on frame 21.
Choose Modify > Transform > Add shape hint in the menu (or press Ctrl + H).
Do this twice.

Now you have 2 hints in frame 12 and 2 hints in frame 40.
Each hint has a letter showing its current position.




16. Next repeat step 13 to position shape hints on frame 21
Position the frame pointer on frame 21.
Drag the a hint to the top of your "2".
Drag the b hint to the bottom of the "2".

Shape Hint frame 1

The hint must be on the edge of the "2".




17. Finally repeat step 14 to position shape hints on frame 40
Position the frame pointer on frame 40.
Move the a hint to the top of the "1".
Move the b hint to the bottom of the "1".

Shape Hint frame 1





18. All we need now is to get the movie to loop.
You do this by double clicking the keyframe in frame 41.
A Frame Properties Box appears.
Choose "Actions".

Click the button with the plus sign on it.

Choose GoTo.
Select the "Go to and Play" option.
Click OK.

Frame Action




That's all there is to it.
You have now created your Shape Tweening.
Test the movie by pressing Ctrl + Enter.

You can create Shape Tweenings on any element.
You just need to remember to break apart the element before doing so.

 << PREVIOUS
BACK TO MENU >>  
















DEVELOPER TIP!
FACT:
Table widths are MINIMUM settings in HTML. Therefore they sometimes span wider than you wanted.
TIP:
Enclose the table within another table. This ensures that the inner table does not stretch beyond the minimum size defined for the outer table.





     "Better Than Books - As Easy As It Gets!"


On EchoEcho: D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | HostingAbout EchoEcho