- 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
Create a Personalized Text Message
ACA Objective 4.3
The final visual element to apply to your animated greeting is the message that the viewer sees after the animation has concluded. You might normally encounter problems working with text with HTML5 Canvas, since you can choose only Dynamic Text; you must be sure that the font used is a common font that everyone has installed. The old workaround is to break the text apart into shapes after it is created or to render the text elements to image data and then include those elements in place of editable text.
This is no longer necessary. Now Animate CC includes an option to render the text as outlines when publishing for HTML5 Canvas. So feel free to use any bizarre typeface you like in this greeting.
Building the text block
In this exercise you’ll build a text message that you’ll include on the main timeline.
Video 4.19 Creating a Text Greeting
- If you’re still within the Flower Graphic symbol instance, click the Scene 1 identifier in the location breadcrumbs above the Stage to return.
Extend the main timeline to 65 frames just like the Flower animation by moving the playhead to frame 65, selecting this frame, and choosing Insert > Timeline > Frame from the application menu (Figure 4.31).
Figure 4.31 Timeline extended
With the number of frames on the main timeline now matching those within the Graphic symbol instance, scrubbing the playhead will reveal one of the strengths of Graphic symbols. Notice that for every frame, the animation is completely synchronous. If you compare this with a Movie Clip symbol instance, you’ll see only the first frame of that animation unless you test or publish. This is one reason Graphic symbols are great for animation.
Create a new layer above the Flower layer and rename it Message.
This layer will hold your text message content. The message won’t display until the animation is complete, so you need to create an empty keyframe on frame 65 and create your message there.
To do so, choose Insert > Timeline > Keyframe from the application menu.
Notice that it created a blank keyframe even though you didn’t choose that option. That’s because there was no content in the previous keyframe, so inserting a keyframe simply duplicates the content of the previous keyframe—which, in this case, contained nothing.
- Select frame 65 on the Message layer, lock every other layer, and then choose the Text tool.
Access the Properties panel and notice in the Text Type drop-down that only Dynamic Text is selectable because you’re targeting HTML5 Canvas (Figure 4.32). Choose a font that looks nice to you and set the size value to roughly 60 pt.
Figure 4.32 Choose Dynamic Text from the Text Type drop-down.
- For color, click the color swatch and then use the Eyedropper tool that appears to sample the color from the flower petals on Stage. You can, of course, color as you desire.
- With your text properties in place and the Text tool selected, click and drag a text block in an empty area of the Stage. Feel free to move the Flower instance to the side if need be.
Type in a message. I’m using the generic greeting “A Flower for You!” but as with many choices in this project, it’s really up to you.
The text should display in the exact font, color, and size you have chosen (Figure 4.33).
Figure 4.33 Text displayed
- Because the text is editable, select the text block to modify any of the properties within the Properties panel. You can also adjust the size of the text block itself. Double-click anywhere in the text block to edit the text and change your message, if needed.
)
)
Applying Text Effects
All text types accept filters, which can be applied from the bottom of the Properties panel. You access these filters by selecting the text and then clicking the Add Filters icon in the Filters area.
- Video 4.20 Text Effects in HTML5 Canvas
Available filters include Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color.
Available filters for HTML5 Canvas are restricted to Drop Shadow, Blur, Glow, and Adjust Color.
Next you’ll add a Drop Shadow to your text.
- Select the text block and then click the Add Filters icon in the Properties panel.
Choose Drop Shadow and make the following adjustments: change Blur X and Blur Y to a value of 6, keep Strength at 100%, and choose #000000 for a color (Figure 4.34).
Figure 4.34 Choosing Drop Shadow settings
When you’re using HTML5 Canvas as a publish target, many filters will work just fine on text. However, if you choose to render text to outlines in your publish settings, the filter will not be applied because a filter cannot be applied to simple shapes but only text blocks or Movie Clip content. As a workaround, you can always wrap the actual text within a Movie Clip symbol and then apply the filter to that instance on the Stage. You’ll do this now.
- With the text block selected, click the Options icon in the Filters area of the Properties panel. Choose the “Copy all filters” option and then remove the Drop Shadow by selecting it and clicking the Delete Filter icon.
- Choose Modify > Convert to Symbol from the application menu. When the Convert to Symbol dialog box opens, create a Movie Clip symbol named Message.
Select the instance on the Stage and access the Properties panel.
Movie Clip instances have a Filters area that’s identical to what you’ve seen with text blocks.
Click the Options icon and choose “Paste filters.” Watch as the Drop Shadow previously attributed to the text block becomes active on the Movie Clip instance.
Now, no matter how you choose to publish your text, it will render with the Drop Shadow applied in HTML5 Canvas (Figure 4.35).
Figure 4.35 Drop Shadow applied
)
){kind=link}
){kind=link}