Using a Workaround to Support Alpha Transparency in Storyline
Our team at Innovative Learning Group (ILG) has been working with Articulate Storyline since the first version was released in 2012. Over the 11 years since then, I’ve been impressed with how Storyline has been updated with a ton of great new features. However, there’s one useful feature that hasn’t been added yet —support for videos with alpha channel transparency. Based on this Articulate Community post, it seems like many others are looking for this feature too.
Where can I see a sample of Storyline with a video with a transparent background?
First, choose a background color, then select Play Video.
Why would I need a video with a transparent background?
A video with alpha transparency generally has a much larger file size for the same quality compared to a video flattened to a specific background image or color. You shouldn’t use alpha transparency if the background behind the video won’t change. However, the flexibility to have a transparent background could be invaluable in cases where you have interactivity changing the background and you want the video to play over the top. A good example would be if you were building an e-learning course with several different challenges and you wanted to use the same fireworks video at the end of each challenge with different scenes behind the fireworks.
How will I know if my learners have browsers that support the WebM format?
Where can I find videos with transparent backgrounds?
If you already have a source of stock videos, check to see if it provides an option to search for videos with transparent backgrounds and/or videos with alpha transparency. For most stock sites, the number of videos with background transparency is very small compared to the overall number of videos. In addition, you may find that the transparent videos they provide are in a high resolution MOV format, such as ProRes 4444, which is meant to preserve quality before compositing with other elements. As a result, this format isn’t good for direct playback in browsers.
How can I convert from MOV format or make my own video with alpha transparency?
If you have Adobe Creative Cloud tools, such as Premiere or After Effects, you can use chroma keying to remove an existing background color to make it transparent. Another option is to start with a transparent background and add other elements over parts of that background. You can also use Adobe Media Encoder to compress a video you’ve created with transparency, but this requires a third-party plug-in. I tested this using the fnord Open Move Plug-In for Premiere. There are also other options available at WebM.
Once I have a WebM file with alpha transparency, how do I insert it into Storyline?
const VIDEO_MARKER = document.querySelector(‘[data-acc-text = “videoMarker”]’);
Once you find the marker, use the following code to programmatically create a video tag, provide the path to the video, set the video properties, and append the video as child of the videoMarker.
Altogether, it looks like this:
Can I have the source code to your example Storyline file?
The video licensed for this sample can’t be distributed for reuse. You must license the fireworks video directly from Getty Images or replace it with another transparent video of your own choosing. You can download the latest version of the color picker I used to change the background from Huebee. Everything else from this sample can be downloaded here.
After you download and extract, you will have a folder \Copy_After_Publish\transparent_video with one file called ilg.js. Add your video file and the Huebee CSS and JS files, so your folder looks like this:
Then, each time after you publish your STORY file, copy this \transparent_video folder from the \Copy_After_Publish folder to the top level of the published course like this:
Blog: Let’s Talk Video
Podcast Episode: Advanced Storyline Tips and Tricks
Podcast Episode: Animate Your Ideas