Home / Articles / Compose an Animated HTML5 Greeting with Adobe Animate CC

Compose an Animated HTML5 Greeting with Adobe Animate CC

Create a Personalized Text Message

star.jpg 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

In this exercise, you’ll build a text message that you’ll include on the main timeline.

  1. 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.

  2. 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

    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.

  3. 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.

  4. 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.

  5. Select frame 120 (at the 5-second mark) on the Message layer, lock every other layer, and then select the Text tool.

  6. 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

    Figure 4.40 Choose Static Text from the Text Type menu.

  7. 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.

  8. 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.

  9. 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

    Figure 4.41 Text displayed as intended

  10. 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

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.

  1. With the text block selected, choose Modify > Convert To Symbol.

  2. 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.

  1. Select the instance on the Stage and access the Properties panel.

  2. Click the Add Filter button in the Properties panel.

  3. 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

    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

    Figure 4.43 Drop Shadow effect applied

Creating multiple messages

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.

  1. Double-click the Message movie clip instance on the Message layer in order to edit it in place.

  2. Within the Message symbol, select the text object on the Stage that composes the message itself.

  3. With the text selected, choose Modify > Convert To Symbol. The Convert To Symbol dialog appears (Figure 4.44).

    Figure 4.44

    Figure 4.44 Creating the Messages graphic symbol

  4. 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.

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.

  1. Enter the new symbol instance on the Stage by double-clicking it. You are now in the Messages graphic symbol.

  2. 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

    Figure 4.45 Duplicate the text keyframes.

  3. 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.”

  4. 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!

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.

  1. 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.

  2. 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.

  3. 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

    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.

  4. 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.

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.

8. Using JavaScript Code to Stop the Playhead | Next Section Previous Section

Adobe Press Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Adobe Press and its family of brands. I can unsubscribe at any time.


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Adobe Press products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.


Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.


If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.


This site is not directed to children under the age of 13.


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.adobepress.com/u.aspx.

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020