March 11, 2019
Typing Text – HTML output
Comments
(0)
March 11, 2019
Typing Text – HTML output
Lieve is a civil engineer (ir) and a professional musician. After years of teaching and research (project management/eLearning/instability) she is now a freelancer specializing in advanced Adobe Captivate as trainer and consultant. Her blog is popular with Captivate users worldwide. As an Adobe Community Expert and Adobe Education Leader, she has presented both online and offline. Since 2015 she is moderator on the Adobe forums and was named as Forum Legend (special category) in the Wall of Fame. In 2017 Adobe Captivate users voted for Lieve as a Top Content Experience Strategist.
Legend 245 posts
Followers: 422 people
(0)

Intro

You are probably aware of the fact that Text animations are SWF-based and cannot be used for HTML5 output. Several users have been asking for an alternative. Of course, the best way would be to create a HTML animation (OAM) and insert it as animation. You could use JS as well.  I found it a fun challenge to see if it is possible to mimick the behavior using uniquely Captivate’s features. This small showcase explains using a shape as a moving mask.  The While loop combined with a multistate text object was another idea. Did I use audio? Sure, but since I am on the road with a more limited system than in my home network, that may not be as perfect as I normally want.

Moving Masks

I wanted to create the effect for these two lines, each of them being an individual Text container:

The background of the text needs to be solid color, to be able to use the proposed method. You see that I created vertical guides to allow me to create masks with exactly the same width as the text containers. Those masks will be shapes, no stroke but filled with the same color as the background.

I applied a Motion path  ‘Left to Right’, but extended the path to match the width of the text container. Remember to keep SHIFT pressed to force moving the points horizontally:

The path has now to be moved to the right, for that purpose I added another vertical guide. Same was done for the second timeline, as you can see here:

To avoid flickering of the text lines, I added another short effect to them ‘Alpha from 0 to 100%’.

Timing for the motion paths has to be found by trial and error. Have no idea what your typing speed is  

Of course, timeline of second line and mask has to be moved to start after the first one has appeared totally. Here is a screenshot of the timeline panel:

Audio

As explained before, I would have preferred an audio clip extended for the duration of the text, but doesn’t have all applications installed on my travel device. Instead I used the provided KeyClick.mp3 clip from the Gallery/SoundEffects. I inserted it as looping background audio, and muted that background audio on all slides except this typing text slide.

0 Comments
Add Comment