Forum Discussion

Nathan_Hilliard's avatar
Nathan_Hilliard
Community Member
15 days ago

Typing or Typewriter Animation for Storyline Textboxes

Update: Added some adjustable randomness to the typing speed to make it seem more realistic. I've attached the updates files here.

I've seen many questions about typing and typewriter-like effects pop over the years. While some workable solutions have been posted, they often lack flexibility or rely on outside software. I've been sharpening my skills in scripting in Storyline lately and thought this could be a good project.

I've created an (updated) example project that demonstrates an easy-to-use typing simulation. It also offers a few options for customization. One valuable feature is that it allows you to maintain most of the formatting in your text box (e.g., fonts, sizes, styles, colors, etc.) It also offers optional sound and animation effects. These should work on both Chrome and Firefox. Firefox still exhibits a few quirks, however.

Once the JavaScript is put into place (one main routine and one small piece to set up a few variables), and a few SL variables are created, then you can just set a couple of variables to make your textbox type into place. You can have multiple textbox animations on one slide.

For best project use, the main JavaScript and its trigger should probably go on the Master slide base layer. The smaller settings script goes on each slide that will use the effect.

This has a few potential uses, so feel free to try it out in your projects. I have attached the .story file.

P.S. - There is a free typewriter font you can install first for the best visual effect.

The sounds are included as Base64 strings ,and could easily changed out to suit your needs.

Additional Comments

The key point to consider when try to use this are:

  1. Make sure you have all of the Storyline variables set up to match these, with the initial values as required
  2. The initialization script (first JavaScript Trigger in the list) has a textKeyList variable that lists the text keys for each textbox you will be using on the slide. This is for the first initialization, which is done using an empty textKey variable. If you only use one one textbox, make sure to edit this list to match the single text entry. Also, make sure the accessibility tag asigned by Storyline matches the text you entered, or at least the textKey value you are using.
  3. textKey only has to be long enough to uniquely identify each textbox by its content
  4. Make sure you don't assign a default value to the textKey variable (in the Storyline variable list). It need to be blank when first being initialized.
  5. To change the way things are typed, modify the variables (as listed in the initialization script (step 2)) before you toggle typeTextNow
  6. Make sure to set textKey to the value appropriate for your target textbox before toggling typeTextNow
  7. To reset a textbox, set initializeText to true before toggling typeTextNow

Typewriter font used in the demo:

https://www.dafont.com/underwood-champion.font 

No RepliesBe the first to reply