SVG Masking with Text, Images, and Video

Demo: https://360.articulate.com/review/content/e08cc931-d39d-4abc-bd2a-263db3206549/review

I’ve read many posts that lament the lack of masking available inside Storyline. Yes, we can easily use several other software packages to simulate the results we want, but that becomes tedious when editing or changing design styles. Here, I offer an approach to achieve text masking in Storyline 360. Special thanks to Math Notermans for pointing me in the right direction when dealing with SVGs.

The attached example project makes punching text out of shapes and masking images and even video quite easy. All you need is a bit of code on the master slide and a single text variable that holds your masking request. Trigger the code, and you have your results.

This uses the accessibility tag to identify your text. You will need to select a unique portion of your text as a short identifier. The key to everything is the request string, held in the textParameters variable. The format is “text identifier, mask type, video identifier, text opacity, text outline color, outline width, outline opacity, preserve video”, each separated by commas.

Details:

Text identifier:  Short unique string from the accessibility tag, any position

Mask type:  0 to punch a hole in a shape, 1 to paint the text only

Video identifier: If adding video, short unique string from the accessibility tag, any position

Text opacity:  Adjust the opacity of the text (the image or video painted on or surround a punchout)

Text outline color: Color of text outline (lowercase word or color number, e.g., #000000 = black)

Outline width: Thickness of the outline

Outline opacity: Adjust the opacity of the outline only

Preserve video: 0 to remove video after it is applied to text, 1 to keep it available for using again

 

Defaults:

Text identifier:  This is required, all others are optional, unless using video (which is then required)

Mask type:  1, paint text

Video identifier: Empty string, this is required if adding video

Text opacity:  1, fully opaque

Text outline color: none, no outline

Outline width: 1

Outline opacity: 1, fully opaque

Preserve video: 0, remove video after adding to text

You only need to include the values you want. The others can be omitted entirely or left empty (just use two sequential commas) if you need to change something further down the list. Missing values use the defaults.

This works by using a filled textbox as the template. You can use solid filled textboxes to punch text out of shapes. If you use a transparent fill and paint the text (mask type 1), then you can make outlined text.

For images, just use an image background fill for the textbox (or shape). Again, punchout or paint the text (mask type 0 or 1). You can use the standard background image adjustments available in the text formatting dialog.

For videos, use a solid filled text box and place a video somewhere next to the slide. It does not have to be on it. Make the video large enough to cover the text. You can trim the video with the editing tools. You may have to make some adjustments if your text is not fully covered. You can punch text out of a video or paint the video onto the text. Outlines are also available, as is opacity control. Once the video is applied to the text, it is removed from the slide, unless you indicate you need it to stay. This lets you use the same video more than once on multiple texts. Just have the last text you use it on indicate that it should be removed when done.

The code is placed on the master slide so it can be easily called using a variable toggle trigger. The code is long but just contains a lot of similar code. I left them separated so they could be easily edited if Articulate eventually modifies the HTML structure of the pages.

This has some limitations and quirks but should be useful for a number of things. Feel free to make improvements and share.