Create a Personalized Text Message
ACA Objective 4.2
The final visual element to apply to your animated greeting is the message that the viewer sees after the animation has concluded. We’ll create a text object and use the various font properties available to us to relay the personalized message.
Building the text block
VIDEO 4.20
Creating a Text Greeting
In this exercise, you’ll build a text message that you’ll include on the main timeline.
If you’re still within the Flower graphic symbol instance, click the scene name in the location breadcrumbs above the Stage to return to the main timeline.
Extend the main timeline to cover a full 6 seconds of animation to match the nested Flower animation by moving the playhead to the 6-second mark, selecting this frame across all layers, and choosing Insert > Timeline > Frame (Figure 4.39).
Figure 4.39 The main timeline is extended.
With the number of frames on the main timeline now matching those in 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 nearly complete, so you need to create an empty key-frame around the 5-second mark and create your message there.
To do so, choose Insert > Timeline > Keyframe.
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, and inserting a keyframe simply duplicates the content of the previous keyframe—which, in this case, contained nothing.
Select frame 120 (at the 5-second mark) on the Message layer, lock every other layer, and then select the Text tool.
Access the Properties panel and notice in the Text Type menu that only Static Text and Dynamic Text are available because you’re targeting HTML5 Canvas (Figure 4.40). Choose Static Text and select a font that looks nice to you with the Size value set to roughly 60 pt.
Figure 4.40 Choose Static Text from the Text Type menu.
For color, click the color swatch and then use the Eyedropper tool that appears to sample the color from the flower petals on the Stage. You can, of course, color as you desire.
With your text properties in place and the Text tool selected, drag out 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 up to you.
The text should display in the exact font, color, and size you have chosen (Figure 4.41).
Figure 4.41 Text displayed as intended
Because the text is editable, select the text block to modify any of the properties in 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
VIDEO 4.21
Text Effects in HTML5 Canvas
Only the Dynamic Text type accepts filters, whose controls are at the bottom of the Properties panel. Since we are using the Static Text type for this project, we’ll need to wrap the text object in a symbol, which can have filters applied to it. You access these filters by selecting the object and then clicking the Add Filters icon in the Filters section.
Available filters for ActionScript 3.0 documents 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.
Let’s convert the Static Text object to a movie clip symbol instance in order to apply filters to it.
With the text block selected, choose Modify > Convert To Symbol.
When the Convert To Symbol dialog box opens, create a movie clip symbol named Message.
You now have a movie clip symbol instance that contains a text object on the Stage. Next, you’ll add a drop shadow to this instance.
Select the instance on the Stage and access the Properties panel.
Click the Add Filter button 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 the color (Figure 4.42).
Figure 4.42 Choosing Drop Shadow settings
The project is now able to include text with a nice Drop Shadow effect because the text is contained in a movie clip instance (Figure 4.43).
Figure 4.43 Drop Shadow effect applied
)
Creating multiple messages
VIDEO 4.22
Using the Frame Picker
We currently have a single message for our greeting. Let’s create a set of messages to choose from and make it super simple to switch between them by using a graphic symbol and the Frame Picker.
Double-click the Message movie clip instance on the Message layer in order to edit it in place.
Within the Message symbol, select the text object on the Stage that composes the message itself.
With the text selected, choose Modify > Convert To Symbol. The Convert To Symbol dialog appears (Figure 4.44).
Figure 4.44 Creating the Messages graphic symbol
Provide a name of Messages (note this is plural) and choose Graphic from the Type menu. Click OK to close the dialog box and create the graphic symbol.
)
){kind=link}
){kind=link}
Now that we have created a new symbol from the text, an instance of the Messages graphic symbol exists on the Stage within our Message movie clip symbol. We have a fair bit of nesting involving different symbol types now! Next we’ll enter the new symbol and edit its contents.
Enter the new symbol instance on the Stage by double-clicking it. You are now in the Messages graphic symbol.
You currently have only a single keyframe containing the original text object. Duplicate this keyframe (F6) three times for a total of four keyframes (Figure 4.45).
Figure 4.45 Duplicate the text keyframes.
For the content on frames 2–4, change the text messages, color, and font choices to whatever you like. The important thing is to make each one visually unique.
Here are some text suggestions to use: “Springtime Flowers,” “Happy Birthday!,” and “With Deepest Sympathies.”
With the four unique text messages in place, click Message above the Stage to move up one level to the Message symbol. Don’t go out to Scene 1 just yet!
){kind=link}
The last thing we need to do is to use the Frame Picker to select which particular message is displayed to the user. The Frame Picker only works with graphic symbol instances and allows us to choose specific frames along the symbol’s internal time-line through a clean visual representation.
Go up one level to the Message movie clip symbol instance and use the Selection tool to select the Messages graphic symbol instance on the Stage.
Access the Properties panel. In the Looping section, select Single Frame from the Options menu and then click the Use Frame Picker button. The Frame Picker panel will appear.
In the Frame Picker panel, deselect Create Keyframe and note that the choice of Single Frame looping is still in place. Beneath this you will see a visual representation of each of the four keyframes in the Messages graphic symbol (Figure 4.46).
Figure 4.46 Using the Frame Picker
Note that as you select each one, the instance on the Stage changes to display the message chosen in the Frame Picker.
Once you are happy with the message chosen in the Frame Picker, close the Frame Picker panel and return to the main timeline by choosing Scene 1 above the Stage.
){kind=link}
With that, our animated elements are complete. Before publishing the project, we’ll need to be sure to stop the playhead once it reaches the final frame of the timeline. A tiny bit of JavaScript code will do that for us.