Introduction to Flash and Actionscript

S1 - Using Tweens

T4 - Images to Text

Shape Tweens using Text

1. Start a new flash document

2. Use the circle tool to draw a small circle
(remember holding down shift while drawing makes a perfect circle)

http://gcctech.org/cmm/cmm21g/flash/shape_morph_tutorial/circle1.gif

3. Select the entire circle (and the stroke)
(you must double click to get both the stroke and fill)

4. Make a copy of the circle

5. Paste the circle (it will appear in the middle of the stage)

http://gcctech.org/cmm/cmm21g/flash/shape_morph_tutorial/circle2.gif

 

6. Move the pasted image up beside the first circle

7. Keep pasting and moving the circles until you have as many circles as are in your name
(don't worry about them being aligned or spaced exactly, this will be fixed shortly)

8. Change the fill colour of each of the circles so that each one is different.

http://gcctech.org/cmm/cmm21g/flash/shape_morph_tutorial/circles_coloured.gif

 

Now to align and evenly space the circles

9. Select all the circles

10. To make the circle in a straight row Choose Modify > Align > Top from the menus

http://gcctech.org/cmm/cmm21g/flash/shape_morph_tutorial/menu_align_top.gif

 

11. To adjust the spacing between the circle to make it even, Choose Modify > Align > Distribute Widths from the menus.

 

http://gcctech.org/cmm/cmm21g/flash/shape_morph_tutorial/circles_done.gif

 

The animation is going to be just over approximately 3 seconds long, so 36 frames (3 x 12 fps) are needed.

12. Insert a keyframe at frame 36

13. The circles are not needed on this last frame, so delete them from frame 36

14. On the Stage, below where the circles were, type your name
(you may wish to use onion skinning to help in the alignment)

15. You will need to adjust the point size and font.
(I used 80 point, Arial Black in the example)

 

 

There are 10 circles and 10 letters, Each individual circle is going to morph to an individual letter. Right now the text is all one symbol, it needs to be broken into individual letters.

16. Select the text, choose Modify > Break Apart from the menus. The text will break into individual letters. You may need to do this more than once to completely break apart your name


 

17. On the timeline, click anywhere between the starting frame and the ending frame.

18. Choose Create Shape Tween from the menu. If a dotted line appears in the timeline, this indicates the tween is not complete

http://gcctech.org/cmm/cmm21g/flash/shape_morph_tutorial/timeline_dotted.gif

19. To fix the broken tween, go to frame 36 (the last frame), again Select the Name text choose Modify > Break Apart again. Keep doing this until you have a solid line.

21. Test your movie