Video with transparent bg for Storyline

May 05, 2015

Hi

I would like to get some inputs on how to do the following. I have an audio mp3 file, and a graphic with transparent background. How do I put these two items together to create a video with transparent bg? So that I can import the video to Storyline. Thanks in advance

-Ben

21 Replies
Brian Allen

If all you're shooting for are the video controls (to control the audio), have you tried to do something like pull the audio into a video editor, like adobe media encoder, and create a wide but short video, like 350 wide by 1 pixel tall or something...  then you could position the video controls under your image with the transparent background.

I haven't tried anything like this before but it seems like it should work.

Brian Allen

Was just playing around with adding some video to storyline (audio converted to video using Adobe Media Converter, H.264 format).

You can actually pick any of the standard sizes in media encoder that match the width you'd like your controls to be.

After you import your video into Storyline you can resize the video to 1 pixel high and you will see the play bar, scrub bar, etc, and the audio plays back fine.  I tried 0 pixels but then the video goes away.

Brian Allen
Bruce Holliday

However SL can't handle video with transparency

To clarify, SL will handle video with transparency, but not in the HTML5 output.  FLV with an alpha channel will convert to FLV for both Flash and AMP output, but will play as an .mp4 for HTML5 output.

http://www.articulate.com/support/storyline-2/how-videos-are-encoded-in-storyline

Ben Kur

Thank you for everyone feedback. I really appreciate it. Can anyone point me to a tutorial on how to produce video with transparent bg? By no mean, I am no video expert at all. I also don't own After Effect but I can subscribe to for a month or two just for the project purpose. But I will love to use any open source software so that it always on my disposal to create the video. Again, I really appreciate any suggestions or inputs. 

Brian Allen

Bruce - the SL discussion with Tim Wright appears to be referring to using FLV?  If so, we know that SL will convert FLV w alpha channel to MP4 for HTML5 output.

I'll check out the other resources you point to.  I'd love to get this figured out, and would love even more to see a working example of this in SL.  This link, however, seems to indicate that video with alpha channel transparency is not supported in SL's HTML5 output, which would be a bummer for the HTML5 need...  http://www.articulate.com/support/storyline-2/how-videos-are-encoded-in-storyline.  Video with alpha transparency works fine in Flash and AMP output...

Brian Allen
Bruce Holliday

I was responding to Ben Kurs request for tips and links on alpha channel software.

Gotcha... Was just trying to figure out how the tips were relevant (if at all) to Ben's need for this to work in the HTML5 output, per the comments after the initial post, or if they were just in regards to video with alpha channel in general.

Like everyone else, I'd like to know if there is a way to do this that also works with the HTML5 output.  Would be nice...

Ashley Terwilliger-Pollard

Hi all,

You can see the information here in regards to all the bug fixes and features included in Update 5 as detailed here. And it does appear that the issue you're referring to in regards to the FLV alpha transparency was fixed as documented here:

  • Fixed issue where FLV alpha channel transparency wasn't working in published output

Please let us know if you need anything else please let us know. 

This discussion is closed. You can start a new discussion or contact Articulate Support.