We’ve done some practice with text tweens, but there are some neat things you can do, especially 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 Drive or DropBox 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 right click on it and convert it to a graphic symbol named bgblue. Turn the visibility of this layer off.
6. Make sure the Color Panel is showing, if not, choose Window > Color
7. Set the stroke to none and the fill colour 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 right click on it and 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. Make sure the visibility is back on.
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 Classic 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 classic tween.
22. Show and lock both Layers
23. Choose Control > Test Movie
This should fade one rectangle in as the other fades out.
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/hotspotaccess1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
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 right click 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 (⌘B).
This will break the text object out of its symbol. The symbol still exists in the library for later use.
29. With the text symbol selected, choose Modify > Break Apart (⌘B) again.
Doing this a second time breaks the text into separate pieces of text.
30. Using the Arrow Tool, click outside of the text on your stage to deselect, then select the first letter P and right click 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 ⌘ + 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 its 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 its 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 its 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 Classic 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. Right click 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.
49. Create a Classic Tween between frames 80 and 90.
Your animation should now play as seen below:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/hotspotaccess.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
50. Save your Flash file and drop it into your shared DropBox or Drive folder