As mentioned before, you can change a shape into text or vice versa, but you must first convert the text into a vector-based image. In this lesson we will show you how to use shape tweens to morph text to shapes, shapes to text and even text to text.

Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 and the canvas colour white. Save this file as morphtext.fla in your DropBox or Drive folder.

***Note: If you wish, you can change the colours used and the text that you animate, but please make sure that you are still following the same process, and animating in the same ways and in the same spots.

To Convert Text

1. Name the first layer “background.”

2. In the colour panel set the fill colour to a linear gradient using two sliders: Orange (#CC3300) and Black (#000000).

3. Draw a rectangle using the gradient on the background layer. Make sure that it is big enough to cover the entire stage.

4. Use the Gradient Transform Tool  to rotate the the gradient feature

This can be done by clicking and dragging the rotate handle  in the corner.

5. Go to frame 160 on the background layer and insert a frame (F5), then lock the background layer.

***Note: This is important because we want the background to be there for our entire animation.

6. Create a new layer and call it customcre8tive text

7. Use the text tool to create the text seen below in frame 1 of this layer.

8. Choose frame 40 on this layer and insert a keyframe.

9. Select the Filter tab in the property inspector and choose the  button

10. Choose drop shadow.

***Note: You can use these filters to add extra effects to text, movie clips and buttons only!

You text should now have a drop shadow added.

You may modify the settings of the drop shadow in the filters panel if you want. You can also apply more than one effect to the same object (i.e. drop shadow and bevel). Play around with these options and see what they do. If you don’t like the effect, you can always choose the  button to remove each effect and start over.

Shape Tween – Shape To Text

You can have a shape morph into text, but first you have to convert the text into the right format.

11. With the text object selected choose Modify > Break Apart

This will break each letter into its own text object.

12. Choose Modify > Break Apart again

***Note: This is how we are able to shape tween text. Each letter is no longer an editable piece of text, but rather a vector drawing object (bascially a shape). Unfortunately, because this is not text, the drop shadow filter is automatically removed.

13. Create the layers seen below and insert a blank keyframe in frame 10 and 20 on each of the new layers.

14. Select the first keyframe of the customcre8tive layer and using the arrow tool, click and drag over the first letter C to select it. Be careful only to select the letter C as you drag.

15. Choose Edit > Copy or CMD + C

16. Choose frame 20 on the first c layer and choose Edit > Paste in Place or CMD + Shift + V

This has now placed a copy of the letter C in exactly the same place, but on a new layer.

17. Repeat these steps until each layer has been copied to its own layer.

18. Lock the customcre8tive text layer.

19. Choose View > Rulers

20. Click on the top ruler and drag down a horizontal guide to intersect the words.

21. Choose the Polygon Tool 

22. In the property inspector, choose the  button.

This will bring up the tool options that you can set up as seen below:

23. In the property inspector, set the fill colour to white and the stroke colour to none.

24. Choose keyframe 10 on the first C layer.

25. Draw a small star that is centered above the letter C and on the green guide line.

26. Repeat this until you have a star drawn on keyframe 10 of each letter layer.

Your timeline will look like this:

While your stage should look like this:

27. Right-Click on the C layer between frames 10 and 20 and choose Create Shape Tween

28. Repeat this for each of the letter layers.

Your animation should now run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

You might notice that the words are there from the beginning. This is because we still have the original text on the customcre8tivetext layer. Normally, you could delete this layer, but we will actually need it for the next effect.

29. Unlock the customcre8tivetext layer and select frame 1

30. Click again on frame 1 and drag it to frame 20 and release to move the content on frame 1 to frame 20 instead.

***Note: Simply clicking and dragging will not move the content. You must click on the frame, then click again and drag.

31. On the customcrea8tivetext layer create a keyframe (F6) in frame 40.

This will extend the text to stay on the stage long enough for the audience to read it.

Your animation will now appear as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Shape Tween – Text To Text

You can have text morph into another selection of text by following pretty much the same process as shape to text.

32. Create a blank keyframe (F7) in frame holder 60.

33. In the new blank keyframe, using the text tool, type the text seen below:

34. With the text selected, choose Modify > Break Apart

35. Break the text apart a second time.

36. Create a shape tween between frames 41 and 60.

Your timeline should now look like this:

Your animation should now run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext3.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

37. Insert a keyframe (F6) in frameholder 70.

This will extend how long the text stays on the stage so that the audience can read it.

38. Insert a blank keyframe (F7) in frame 90.

39. In the new blank keyframe, using the text tool, type the text seen below in the top left corner of the stage:

40. With the text selected, choose Modify > Break Apart

41. Break the text apart a second time.

42. Create a shape tween between frames 70 and 90.

43. Insert a keyframe (F6) in frameholder 100.

This will extend how long the text stays on the stage so that the audience can read it.

Your animation should now run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

44. Using what you have learned in this lesson, complete your flash file so that it runs as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morphtext5.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

45. Save your morphtext.fla file and test movie so that you have an .swf file in your folder.