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
Hello Ben, I'm wondering if you could get what you need accomplished just by adding your image and .mp3 file to a slide in Storyline, without creating the video? Just wondering if there is a certain reason you are trying to convert to video...
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.
What I would like to get to is that video control player. With your suggestion, it will be very hard for me to do. I have multiple items that need to be on one slide that needs their own video controls.
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.
I did use the Adobe Media Encoder for the same purpose but when you change the video to 1 pixel high, you will have issue with the player in HTML5. The video player is not showing up on iPad Safari.
Adobe Aftereffects can handle this. However SL can't handle video with transparency in my experience. I get round this by using the slide bg and export video at those dimensions, should be doable as a player video too.
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.
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.
I'm interested if anyone knows if it is possible to produce a MP4 with a transparent background... I don't believe it is. I think this is a limitation with the video format, not Storyline.
I know FLV supports transparent background, but the FLV is not compatible with HTML5 output...
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...
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...
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.
21 Replies
Hello Ben, I'm wondering if you could get what you need accomplished just by adding your image and .mp3 file to a slide in Storyline, without creating the video? Just wondering if there is a certain reason you are trying to convert to video...
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.
Hi Brian,
What I would like to get to is that video control player. With your suggestion, it will be very hard for me to do. I have multiple items that need to be on one slide that needs their own video controls.
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.
I did use the Adobe Media Encoder for the same purpose but when you change the video to 1 pixel high, you will have issue with the player in HTML5. The video player is not showing up on iPad Safari.
I wonder if the HTML5 output would behave the same if you used the "crop" function under video editing in Storyline...
Thank you for the suggestion. I will give it a try
Adobe Aftereffects can handle this. However SL can't handle video with transparency in my experience. I get round this by using the slide bg and export video at those dimensions, should be doable as a player video too.
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
Thank you, Brian and Bruce, for your suggestions! :)
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.
I'm interested if anyone knows if it is possible to produce a MP4 with a transparent background... I don't believe it is. I think this is a limitation with the video format, not Storyline.
I know FLV supports transparent background, but the FLV is not compatible with HTML5 output...
Using Aftereffects to create alpha channel video
SL discussion on alpha channel video, see comment by Tim Wright
Open source tools for creating alpha channel video Blender and ffmpeg
html5 and h264 and alpha channel video demo. Click on the Directions buton to see how it is done.
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...
Thank you everyone. I am going to look into the tutorials. i really appreciate all the help.
Looks like Articulate just pushed out new update to the Storyline, and they seemed to address the alpha issue.
For FLV video, correct?
As I remembered Yes, But I was trying to get more info from the site but it looks like the site is having issues.
Hi Brian,
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...
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:
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.