How to Use Green-Screen Images and Videos in Storyline 360 – Keying-Out Colors on the Fly

I’m sure you’ve seen the various images and even videos on offer in Storyline’s content library with green-screen backgrounds. You know, the ones often used to key in alternate images into the green areas. There are even more freely available on the web. Maybe you have your own custom green-screen media from other projects. Unfortunately, Storyline does not offer a built-in way to utilize these media, so they’ve been of limited use. You can certainly try masking out the green in images and that often works, but green-screen video in particular has no real options outside of editing in outside applications.

Here, I will describe an actually pretty simple approach that allows you to apply chroma-key and other color effects to these media, right inside your finished project. This removes most of the need for other tools and opens the possibility for more dynamic effects that can be applied to your media on the fly.

Process video demos:

https://360.articulate.com/review/content/5b1051ff-0a85-4675-9041-462c5e10c357/review

https://360.articulate.com/review/content/cc586179-8ed2-41fb-b489-ae9a30aa78db/review

Project demos:

Apply Effect in Slide

Filter Tester

Approach

This approach uses a single SVG filter called feColorMatrix. See the links below for additional details.

https://alistapart.com/article/finessing-fecolormatrix/

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix

This filter allows us to customize how the colors in an SVG are displayed in a web page. One effect is that you can make a color transparent, essentially keying the color out and allowing what’s below to show through. It also allows us to change the colors displayed.

Media in Storyline

Images in storyline are generally placed inside an SVG structure. The image may be raster, but it’s put inside an SVG to allow easier handling and manipulation. It also allows things like borders to be added. Videos are placed inside regular <div> elements, but with a little JavaScript we can move them into an SVG to make handling them similar to regular images. Once it’s in the SVG, we can apply SVG filters.

The Script

There are two project files included with this post. One shows a simple application of this effect to an image or video on a slide. The steps are as follows:

1. A media file (image or video) is placed on your slide.
2. A variable called tag is set to match the first unique portion of the media’s alternate text (right click media on timeline, select Accessibility).
3. A variable called filterValue is set with the correct settings for your desired filter.
4. A trigger then runs a script that looks in your slide for the media referenced in tag. If it is an image, then the details for the filter (in filterValue) are inserted into the existing SVG wrapping the image. If it is a video, then a new SVG is created, the filter inserted, the video inserted, and then the SVG placed where the video used to be. This all happens when you click the Key It! button.

It is quite easy to add to a slide and apply. You could apply this to multiple media on one slide by changing tag and filterValue before each additional triggering of the script.

There is another variable called filterName that holds a reference to the filter you set on the media. If you wanted to change the effect later, you can use this to access and replace the filter values (see the scripts inside the other Tester project for details). Note, if you wanted to dynamically update multiple filtered media on one slide, you would need to modify the scripts slightly to load and save the filter references to a sequential set of SL variables rather than just one.

Getting the filterValue Settings

Since our filter is using a matrix of values, the exact settings can be difficult to wrap your head around. I’ve included another project called Tester that lets you insert your desired media onto the slide, set the tag variable, and then publish the project to determine the settings you need. You can stack media so your keyed media will overlay any other media you plan to use. This lets you judge the final effect.

Once published, you will see your media, a set of controls on the side, and a final filter value at the bottom.

Use the dials to adjust your matrix values. The RGBα headers represent the rows and columns linked to the red, green, blue, and alpha (transparency) values of the filter. The X column has multipliers which are included since they are part of the filter. The numeric values will show below the dials. The matrix is represented by a text string at the bottom, which you can copy and paste into your SL filterValue variable once you are satisfied.

You can reset the matrix rows or columns by clicking on the corresponding header. Reset the whole matrix by clicking on circled plus in the top left corner..

If your desire is to key out background colors, like green or black, you will mostly be adjusting the bottom row of dials. Depending upon the exact color and the other colors in your media, your settings may vary. Trial and error will give you the best results. The upper dials are useful for changing the displayed colors in the media. Try different values and combinations to achieve your goals.

Limitations

This approach is super easy and simple to incorporate into Storyline, but since it is just one filter, it has its limits. You may not be able to get every bit of color completely keyed-out every time. You may lose some detail depending upon how similar your media colors are. If this is unacceptable, you may need external applications.

There are many SVG filters available. You could always add additional filters to improve the output. They can be inserted and applied the same way feColorMatrix is.

I’ve done only limited testing, and I have not investigated using this on SL media that have other effects, cropping, or color filters applied. If the DOM structure changes from what is expected, this this will not work. Best to just use the base media (as it is imported). Resizing is fine, but make sure to test it on any other changes.

The attached project files include several media that you can experiment with.

Remember to watch the Peek videos linked above for the basics of keying out green and black backgrounds.