- Creating a New HTML5 Canvas Document
- Laying Out the Background Elements
- Drawing the Flowerpot
- Editing the Flower Graphic Symbol
- Animating the Flower Stalk with Inverse Kinematics
- Designing and Animating the Flower Head
- Create a Personalized Text Message
- Using JavaScript Code to Stop the Playhead
- Publishing Your Project for HTML5 Canvas
- Challenge!
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Designing and Animating the Flower Head
Now you’ll create the head of the flower, which will bloom as the stalk grows. This process is pretty simple—you’ll animate the flower head to follow the growth of the stalk and scale accordingly as the stalk rises until you have a fully matured flower.
Drawing the flower head
To draw the head of your flower, you’ll use the Oval or Oval Primitive tool. But you’ll need to do a little setup before you start drawing.
Video 4.17 Drawing the Flower Head
- Create a new layer directly above the pot layer and name it Flower.
Lock all the other layers and move the playhead to frame 45 (Figure 4.28).
Figure 4.28 Playhead at frame 45
This is where your flower will first appear.
Choose Insert > Timeline > Blank Keyframe from the application menu to create a blank keyframe.
Now you’ll use this new keyframe to contain the vector content that forms your flower head.
- Choose the Oval Primitive tool and draw a small circle by holding Shift as you click and drag. The resulting circle shape should be about 40px to 44px in diameter.
- Choose the same color for both the fill and stroke. I’m using #FF9900 in this example.
To roughen the stroke a bit, click the Brush Library icon with the object still selected and browse through the various brushes.
In this example I’ve selected Artistic > Chalk Charcoal > Charcoal - Tapered as my vector brush and adjusted the stroke width to a value of 8. This is the center of your flower.
- To draw the petals, once again use the Oval Primitive tool and draw an oval that is roughly 25px wide and 65px tall. Change the color of the fill to something floral, like #FFFF99, and disable the stroke.
- Duplicate this petal by making seven copies, resulting in eight complete petals.
Using the Free Transform tool, arrange each petal around the center circle shape created previously (Figure 4.29).
Figure 4.29 Petals arranged
Select all the petals and choose Modify > Group from the application menu.
All of the petals are now grouped together, making them easier to manage.
- Right-click the new group and choose Arrange > Send to Back so that the center shape appears in front.
)
)
Animating the flower head along the stalk
Even though the flower head is made entirely out of shapes, you can’t use a shape tween to animate it because it is too complex. Instead, you’ll create a Movie Clip symbol and apply a motion tween to the instance that results.
- Video 4.18 Animating the Flower Head
- Select all the parts of the flower head—the petal group and the center portion—and choose Modify > Convert to Symbol from the application menu.
In the dialog box that appears, name the symbol Bud. For the type, choose Movie Clip.
The Movie Clip Symbol itself will now be in your project Library, and an instance of that symbol is added to the Stage.
Now that you have your completed flower head as a Movie Clip symbol instance on the Stage, all you need to do is tween it along with the growth of your stalk to complete the flower animation (Figure 4.30). To do this, you’ll adjust the scale and position of the instance with a motion tween.
Figure 4.30 Completed flower head on the stage
Select any frame or span of frames on the Flower layer between frames 45 and 65, right-click the frame(s), and choose Create Motion Tween from the menu.
The background of the entire frame span should turn blue, and the layer icon should change to a small box in motion, indicating the motion tween has been created.
Now all you need to do is adjust the scale and position of the Movie Clip instance on both keyframes.
On frame 65, the instance should be at full size and positioned at the top center of the fully extended stalk. On frame 45, scale it down using the Free Transform tool or the Properties panel so that it measures about the same width as the stalk.
Position it at the top of the stalk wherever it is at this point in the animation.
That should be it, although you may need to tweak the motion guide or even add an additional keyframe to help direct the tween.
)
