Links

Did You Know?

 

Tweening Text

By now you're no doubt realized that you can apply tweening to most object by converting them to symbols, but what about text? Text is no different that drawn object it you convert it to a symbol and then tween it. There are some neat things you can do, however, if you treat each letter as a separate object.

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 but change the canvas colour to black. Save this file as hotspotaccess.fla in your Assignment 9 folder.

1. Create two layers, one called bggradient and one called bgblue

2. Select frame 1 of the bgblue layer

3. Choose the Rectangle Tool, select a fill colour of blue (#0000FF) and a stroke of none.

4. Draw a rectangle that covers the entire stage area.

5. With this rectangle selected press F8 to convert it to a graphic symbol named bgblue.

6. Make sure the Color Panel is showing, if not, choose Window > Color

7. Set the stroke to none and the fill color to a linear gradient as seen in the panel below:

8. Select frame 1 of the bggradient layer

9. Draw a rectangle that covers the entire stage area.

10. With this rectangle selected press F8 to convert it to a graphic symbol named bggradient.

11. Select frame 20 in the bggradient layer and press F6 to insert a keyframe.

12. Do the same for the bgblue layer.

13. Choose keyframe 20 on the bgblue layer.

14. Using the arrow tool, select the blue rectangle on the stage

15. In the Property inspector, change the alpha to 0%

16. Right-click on this layer to create a motion tween.

17. Hide the bgblue layer and make sure the bggradient layer is showing.

18. Choose keyframe 1 on the bggradient layer.

19. Using the arrow tool, select the blue gradient rectangle on the stage

20. In the Property inspector, change the alpha to 0%

21. Right-click on this layer to create a motion tween.

22. Show and lock both Layers

23. Choose Control > Test Movie

This should fade one rectangle in as the other fades out.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Now that we've created a cool fading background effect, let's get to the text tweening.

To Tween Text

24. Create a new layer called peak.

25. On frame 20, press F6 to insert a new keyframe.

26. Use the Text Tool to create a text object as seen below:

27. Select the text with the Arrow Tool, and Press F8 to covert it to a graphic symbol named peak.

 

Now that the text has been made into a symbol, you can tween the whole text object if you like, but what if we want each letter to animate individually? To do this, we must break apart the text.

To Break Apart Text:

28. With the text symbol selected, choose Modify > Break Apart.

This will break the text object out of it's symbol. The symbol still exists in the library for later use.

29. With the text symbol selected, choose Modify > Break Apart again.

Doing this a second time breaks the text into separate pieces of text.

30. Using the Arrow Tool, select the first letter P and press F8 to convert it to a graphic symbol named p

31. Create a new layer called p and insert a keyframe at frame holder 20.

32. Using the Arrow Tool, select the symbol P on frame 20 of the peak layer and choose Edit > Cut or CMD+X

This will remove the symbol from this layer.

33. Select keyframe 20 on layer p and choose Edit > Paste in Place or SHIFT+CMD+V

Note - Using paste in place ensures that the letters stay in exactly the same position even though we are moving each letter to it's own individual layer.

Repeat this process staggering each letter on the timeline by 5 frames until your timeline appear as seen below:

Note - Don't forget that you are moving each letter to it's own layer and converting it to a symbol. When naming your symbols, repeat letters will require you to name the symbols differently. For example, when you get to the word Performance, you will need to call the symbol for the second letter p p2.

Now that each letter is on it's own layer and has been converted to a symbol, you can animate each one.

34. On the layer p choose frame holder 30 and press F6 to create a new keyframe.

35. Select keyframe 20 on layer p and then use the Arrow Tool to select the symbol p on the stage.

36. In the property inspector, change alpha for symbol p to 0%

37. Choose Window > Transform to get the transform panel

38.Change the size to 20% and press Enter.

39. Change rotate to 60 degrees and press Enter.

Note - You must press the Enter key to make the 20% and 60 degrees changes take effect. Simply clicking off of the box will not apply the changes.

In the last three steps, you've changed the first instance (frame 20) of the symbol p to be transparent, reduced in size and rotated by 60 degrees. This did not change the second instance (frame 30).

40. Right-click between keyframe 20 and 30 on layer p and select Create Motion Tween.

41. Select frame holder 100 on layer p and press F5 to insert a regular frame

This will extend keyframe 30 so that it shows up for the rest of the animation.

Repeat this until each letter is tweened in the same way. Your timeline should appear as seen below:

42. Unlock bgblue and bggradient layers and insert a frame in each at frame holder 100 to extend them until the end of the animation.

43. Create a new layer called hotspot

44. On the hotspot layer, create a keyframe in frame holder 80

45. In keyframe 80, create a new text object as seen below:

46. Press F8 to convert this text object to a graphic symbol called hotspot.

47. Create a keyframe on the same layer in frame holder 90.

48. Select the hotspot symbol in frameholder 90 using the Arrow Tool, then use your arrow keys to nudge the symbol onto the stage.

Your animation should now play as seen below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

49. Save your Flash file and go complete Assignment 9.