Monthly Archives: March 2017

Storyline 360 recently added a built-in function to provide closed captions for video and audio narration. In previous versions of Storyline, you had to add layers and/or scrolling panels to display CC in a slide…those days are finally over. The process of creating Closed Captions is pretty straightforward. Here is a lengthy tutorial that provides a lot of information about implementing CC.

Closed Captions require a file (a separate file for each video/audio clip) that provides a transcript of the narration, as well as timing info.

This file can then be added to a video/audio in SL360. There is also a new True/False variable ‘Player.DisplayCaptions’ that can be used in triggers to turn CC on or off. This variable comes in handy when using  custom navigation elements, rather than the built-in player controls.

The Player Properties dialog provides an option to select the CC font, but there is no way to control the placement or background color of the CC  box.

Once published, Closed Caption can either be toggled withe built-in button on the player bar or with a custom button.

Here is a quick test file that shows the options to control CC.

I was looking for something on Wikipedia the other day and came across an article about planispheres. As a kid I was interested in astronomy and had built my own planishere out of cardboard. I thought it shouldn’t be too difficult to create one of these starcharts using Storyline 360 dials. A starchart is very simple to use: You turn a disk to line up today’s date with the current time (e.g. March 14, 2AM), turn into a direction (e.g. NorthWest), and the starchart will show the constellations above you in the night sky. I based my starchart on this awesome example here. This web-based version is much more sophisticated than my simple experiment. I just wanted to verify that Storyline dials could be used to build an interaction like this.

First I created a ‘cover’ that would be placed on top of the rotating star chart.

The trick is that the cover needs two transparent cutouts, one of the date ring and the other for the star chart area. That’s easy enough to do in Photoshop.

Then in Storyline, I created a dial from the star chart bitmap and placed the cover bitmap on top of it.

The only issue was that, although the dial was visible through the cutouts, I couldn’t turn it because the transparent areas ‘block’ the dial from being turned. So, I created a second, transparent dial that sits on top of the cover and used this dial’s variable to control the star chart dial as well. As you can see in the setup not a single trigger was required to make this interaction work.

Here is the published example. I also tested this on a mobile device without issues.

Finally, here is a link to some Dial interactions I created during SL360 beta testing.