Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Morphing Text

By: Travis Webb
 

For this tutorial,  am assuming that you have some basic knowledge of creating tweens and managing text items.  This is a Beginner/Intermediate tutorial, but creates a pretty neat effect when used under the right circumstances.
Note:  For the example above I am using 22 FPS.

pic 1.JPG (2616 bytes)1. Create a text box and type in it whatever you want to begin with (I started with my E-mail address).  Now create a key frame at Frame 10 by selecting Frame 10 and pressing F6, and convert that frame into a Shape Tween.

pic 2.JPG (8297 bytes)2. Now Right-Click on the text you have made, and selected "Break Apart". Now do this again by selecting all the letters as demonstrated below.  Flash cannot shape tween text, so we break it down into individual letters, and then down again into graphic fragments. 

3. Now your text is able to be shape tweened.  Create another Key frame at Frame 30 by pressing F6.  You should see an arrow inside a green box that extends for 20 Frames on the timeline.

4. Now at frame 30, create another text box with text in it (I wrote my name, Travis Webb), and "Break Apart" twice just as you did in Step 2. This is the text that the first text will be "morphed" into.  Now delete the older text and move the new one in its place.

Note:  If you do not wish to morph into 3 different texts, then you are finished!  If you want to morph it 3 times (like what I did), then continue to step 5.

5.  Now create another keyframe 10 frames after that, at Frame 40.  I make each tween in 10 Frame increments so the viewer as time to read what it says.  Here at Frame 40 create another Shape Tween (should already be done for you).

6. Now create another text item at Frame 60, and repeat steps 2 - 4.   Below is a picture of what my timeline looks like.

pic 3.JPG (6136 bytes)

 

And there you have it folks!  Many people make the mistake of trying to Shape Tween words (which of course will not work), without breaking them down first.  Shape Tweening cannot be used with Graphic Symbols, Buttons, or text.   It can only be used with basic shapes and colors. 



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2008 All Rights Reserved
Privacy and Legal