Sunday, August 28, 2011

Using Captivate to Create Cool Text Animations

by Jonathan Shoaf

Adobe Captivate 5.5 is a well suited e-learning development tool for simulations and the tool I turn to first for Flash-based e-learning development.  It’s screen recording is top notch for creating simulations and its ability to track variables and advanced actions makes it very versatile to my needs.

One of the cool features in Adobe Captivate I have found myself using lately is the text animation.  Captivate 5.5 comes with over 80 text animations you can add to your projects.  Many of these animations look very nice and there is enough variety that you should be able to find one to match your project.  Each animation can be customized with fonts, sizing, color, and more.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Adding a Text Animation

To add a text animation, open a project, select a slide, and then go to the Insert menu and choose Text Animation.  You will be prompted with the Text Animation Properties window.

You can access this properties window at any time by using the Properties button when the text animation is selected.  Here is what to consider when selecting the properties:
  • Text to be animated (e.g. "You Failed!" ;) or "Lesson Complete")
  • Font to use - use some thing that is easy to read
  • Font size
  • Bold or italic text
  • The delay, in Flash frames, between each letter in the animation - lower is faster, higher is slower
  • Text color - here is your chance to show some emotion!
  • Preference for looping the animation or not

Enter your options and click Ok to create the text animation then preview the project to see it in action.

Customizing a Text Animation

Once you have created the text animation, you can choose from a wide variety of animation effects.  I counted 85 different effects in Adobe Captivate 5.5.  Select each effect and you will see it’s preview.

Captivate also provides a good selection of shadow properties you can adjust.  Select color, angle, transparency, blur and more until you get the desired look.  However, I have found that keeping it simple is usually the best choice.

Create a Standalone Text Animation

These text animations look great embedded into your Captivate project.  However, you may also consider creating a standalone text animation to use on a web page, blog, or non-Captivate e-learning project.  Let’s create one for a web page.
  1. Create a new blank project with a width of 200 and height of 150. Keep the project size small because it will be embedded as part of a web page.
  2. Choose Insert > Text Animation to add the animation to your project.
  3. Enter “e-learning is cool” for the text.
  4. Enter “6” for the Delay and click Ok.
  5. Select “Fly_Away” for the Effect.
  6. Set the Transition Effect to “No Transition” - do this so that the text does not fade away and become unreadable when the animation is complete.
  7. Set the Transition Effect for the project to the same (for the same reason).  These settings can be found by going to Edit > Preferences > Project > Start and End.
  8. Under the Project > Skin Editor... turn off the playback controls and border.  If you are embedding this on a web page, you probably don't need these.
Preview the project and you should see something similar to the animation below.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

To learn how to put this on your web page see this article from Adobe or just Google "embed Flash in HTML".  I hope this gets you started with using text animations in your projects.  I like to use a text animation as an award when a lesson is completed or when a perfect score is obtained on a quiz.  How do you use text animations?

1 comment:

  1. That is really very cool...and such superb tutorials make our knowledge more interesting and effective.


Thank you for your comments.