Building the Wanderer symbol
Building the Wanderer symbol
In this section you’ll build some character animation similar to that of an arcade classic. The Wanderer class will control a character that wanders around the screen (in search of food or possibly to evade tiny ghosts). You’ll start by building a simple character with a hyperactive jaw.
1. Save a copy of your current (Mover.fla) document as WandererExample.fla in the examples folder.
2. Double-click on the character instance on the Stage to edit the symbol’s Timeline.
Figure 3.30 Setting the Start and End
3. Select the oval primitive shape that is already on Stage.
angle of the oval primitive shape will create the opening for the character’s 4. Set the Start angle and End angle settings in the Prop- mouth.
erties panel to 10 and 350, respectively (Figure 3.30).
Chapter 3 Introduction to ActionScript Classes
Setting the Start and End angles will create a 20-degree opening for the character’s mouth (Figure 3.31).
Figure 3.31 The oval primitive shape on frame
1 with a 20-degree opening.
5. Select frame 10 in the Timeline and add a new key- frame (F6).
6. Select the oval on frame 10.
7. Update the Start angle and End angle settings in the Properties panel to 40 and 320, respectively. This will
create a wider (80-degree) opening for when the char- acter’s mouth is completely open (Figure 3.32).
Figure 3.32 The oval primitive shape on frame
10 with an 80-degree opening.
Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques
8. Select frame 1 and create a Shape Tween (Insert > Shape Tween). If you scrub the Timeline at this point,
you’ll notice that the tween doesn’t look like a mouth opening and closing (Figure 3.33).
Figure 3.33 The shape tween needs a little work.
9. Select frame 1 again. Break the shape primitive into a raw vector shape (Command+B/Ctrl+B). This will allow
you to add shape hints to help Flash interpolate the tweened frames.
10. Add three shape hints by choosing Modify > Shape > Add Shape Hint three times. The three hints will all
have letters (a, b, and c) and will overlap when they are added.
Chapter 3 Introduction to ActionScript Classes
11. Move the shape hints to the three points that compose the mouth. The points will be red for the moment
(Figure 3.34).
Figure 3.34 The shape hints in position on frame 1.
12. Select frame 10 on the Timeline and break that shape apart (Command+B/Ctrl+B).
13. Move the three shape hints to match the three points on frame 1. The points should turn green when they
are in place (Figure 3.35). When the shape hints on frame 10
are in place, the hints on frame 1
Figure 3.35 The shape
should turn yellow. You may have to
hints in position on
move the first point away (release
frame 10.
it) and move it back into position (on both frames 1 and 10) to have it turn yellow on frame 1 and green on frame 10.
Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques
14. Scrub the Timeline again. The mouth should now appear to open as you move from frame 1 to frame 10
(Figure 3.36).
Figure 3.36 The shape now tweens properly.
15. Ctrl-click/right-click on the first frame and choose Copy Frames.
16. Select frame 20, Ctrl-click/right-click and choose Paste Frames.
17. Ctrl-click/right-click on frame 10 and choose Create Shape Tween.
Chapter 3 Introduction to ActionScript Classes
18. Add three new shape hints to frame 10 and move them to match the positions of the three shape hints already
in place on frame 10 (Figure 3.37).
Figure 3.37 The second set of shape hints added to frame 10.
19. Select frame 20 and move the three shape hints into position (Figure 3.38).
Figure 3.38 The second set of shape hints in position on frame 20.
Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques
20. Scrub the Timeline. You should now have a mouth that opens and closes.
One last adjustment is needed: You’ll want this mouth to loop (at the moment, frame 1 and frame 20 are iden- tical and you only need one of them).
21. Select frame 19 and add a keyframe (F6). Note that two of the shape hints are now slightly out of place on
frame 19.
22. Reposition the shape hints to match the points of the mouth (Figure 3.39).
Figure 3.39 The second set of shape hints repositioned on frame 19.
23. Ctrl-click/right-click on frame 20 and choose Remove Frames.
Chapter 3 Introduction to ActionScript Classes
24. Add a new layer and create an eye for your character using the Oval tool. Make sure the eye doesn’t overlap
with the mouth on frame 10 (Figure 3.40).
Figure 3.40 The completed character with the eye in place.
25. Test your movie. You should now have a looping anima- tion of your character.