flash tutorials
  Home Computer Graphic Tutorials   Tutorials Computer Graphics tutorials   Forums Computer Graphics Community   Interview Interview   Articles Articles Making Making About the Team About US Contact us
flash 8 tutorial
flash tutorial
* Home / Tutorials / flash tutorials / Shape Tweening
     
Maya tutorials   Autodesk Maya
Photoshop tutorials   Adobe Photoshop
Illustrator tutorials   Adobe Illustrator
flash tutorials   Adobe Flash
3Ds max tutorials   Autodesk 3D's Max
Premiere tutorials   Adobe Premiere
Dreamweaver tutorials   Adobe Dreamweaver
     
  Shape tweening tutorial  
 
Author: Nihal   Level : Intermediate   Environment : Adobe Flash 5.0
User Rating  : * * * * *  
 
 
Shape Tweening allows a shape to appear to change into another shape over a period of time. The location, size, and color of shapes can also be tweened. In addition to that, text and images are also among the list of objects that can be tweened.

Step 1 - Place the object on the work area, Right- click on the key frame, choose panels -> frame. Refer figure 1 for more details
Frame settings
Figure 1. Frame settings

Step 2 - In the Tweening drop down menu, choose shape
Shape Menu
Figure 2. Tweening drop down menu

Step 3 - Insert a keyframe into any other frame, delete the previous object and place another object.

Key frame
Figure 3.  Insert keyframe

For text and images, break apart (CTRL+B) or modify -> break apart has to be done

Break Apart
Break Apart
Figure 5. Break apart

Shape Hints

To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.

Step 1 – Perform the explained shape tween mentioned above.
Step 2 – Click on the first frame and then go to Modify -> Transform -> Add Shape Hints (Ctrl+shift+H)
Shape Hint
Shape Hint
Figure 6. Shape Hint

An “a” with a red colored circle below it, will appear at the center of the object like shown in figure 6.

Step 3 – Continue pressing Ctrl + Shift + H according to how many you require and place each one at a corner of the object.
Shape Hint
Figure 7.

Go to the last frame. Observe that the same alphabets used in the first frame are already present there. Place the alphabets at each corner like done for the first frame.
Notice that once an alphabet is placed at a corner, it’s color automatically changes to light green.

Examine the shapes located in the in – between frames.
Final Output
The best part of using shape hints is that you get so many different shapes during the transition between the main shapes.
 
     
 
        Bookmark   Googlize this * Add to Yahoo * Add To_Delicious * Digg It * Scrutinize this * Spurl this * Furl * Socializer * Onlywire
     
  Discuss This   Add to Any * Add this * Blink It * Socialize It
Home | Tutorials | Forums | Interviews | Articles | Making | About the Team | Terms and Conditions | Privacy Policy | Contact us
Copyright © 2006-2007 CGShelf.com. All Rights Reserved