Problem displaying animations in Storyline 3 with html5-only publishing
May 31, 2017
Hi - we're having trouble with animations in html5-only publishing from Storyline 3. Our old swf animations aren't working with html5-only obviously, so I've been changing them to .mov files. They work, but intermittently and randomly they have grey boxes around them. They don't do this all the time but there doesn't seem to be any pattern. The same published SL3 file with the same animation on the same panel will sometimes show the grey box and sometimes won't. Because of this, I've started switching to animated gifs instead but that has its own display problem. The gifs will often appear pixelated, as though there's electricity shooting through the animation. These are simple animations downloaded from PresenterMedia. For the gifs, I turned off transparency. I tried with small, medium and large versions - changing the size, not changing the size, it doesn't matter - they all pixelate. So I either need the gifs to not do that or the .mov files to not have the random grey box. Suggestions are appreciated.
37 Replies
Have you tried encoding your video to mp4 format instead of mov?
Hi there, Matt. Thanks for that suggestion, Michael!
Are you able to share either your SL3 .story file or even a couple of the .mov files that are behaving strangely?
I'd like to do some testing on them to see if we can nail down what's going on with those video files.
OK I've set this module up to demonstrate the issues.
wiredhealthresources.net/presentations/950/story.html
Slide 3 has the spinning globe as a .mov Sometimes it will show a grey box around it and sometimes not.
Slide 6 (and the other animations later in the module) has an animated gif that is breaking up.
I haven't tried adding the .mov as an mp4 because SL3 changes it to mp4 on its own during publishing.
Note that the welcome .mov on slide 4 is ok because there is no where for the intermittent grey box to display.
Here's a screenshot of the phenomena.
Thanks for that info, Matt! I'm going to test this out in a few different browsers and let you know what I find. I did see the "electric" effect of the GIF after a quick view, so I'll definitely dig into that.
If you are able to share your source .story file, that'd be great too.
I'll report back here what I find out!
Hi Matt. Just checking in.
I saw a weird "border" line on the spinning globe video in Internet Explorer 11 and Microsoft Edge.
The pixelation of the GIF was noticeable in all browsers I tested: IE 11, Edge, Chrome, Safari and Firefox, on both Mac and PC setups.
I tried to force a Flash output of your course, but it wouldn't play. Did you publish only for HTML5? That's totally fine- we want every output to work, but I would like to see if it's an HTML5-only issue.
Hi Crystal -
Yes it's published as html5 only. We're very excited about SL3 because we are able to get away from all the problems Flash was causing us. This is the only issue we've found in html5 so far. The SL3 html5 output is much, much better than it was from SL2.
Ok, Matt. Thanks for that. We'll do some testing on those types of files, and I'll let you know what we see.
I tried converting the mov animations to mp4s and adding them. I published to html5-only and then checked the module. Same problem - intermittent grey boxes around the animations.
Hi again, Matt. I wrote up an issue for the pixelation of the GIF image in HTML5. I was able to reproduce that behavior in my own file as well.
The only workaround right now is to publish to Flash first, which I know is not ideal for you given your excitement about HTML5 only publishing.
I'll update this discussion if we get new information regarding the pixelating GIF behavior from our QA folks.
Are you able to share one of those original .mov files for us to test? Other video files are working ok for me...the intermittent issues are always the hardest. Thanks!
This post was removed by a moderator
Crystal - can you download those animation attachments and then delete from this page? We purchased them and I can't distribute them to the internet. I didn't realize when I attached them that they would be available for download. Thanks -
Sure thing, Matt. I saved the comment for our use internally, but it is now deleted from the forum.
Thanks for sending those along!
Hey Matt. Just to touch base around the video files.
I noticed outlines (not quite gray boxes, but "edges") around the video files when I put them into my own project and viewed them using Internet Explorer 11, Edge, and Safari.
Firefox and Chrome played the video files without any outlines around them.
I'm going to log this with our team so we can explore if this is a browser limitation or if there are changes we can make to help those videos display more cleanly.
Hi Crystal - they aren't supposed to have any lines around them at all, but sometimes they display with the lines you described, sometimes the whole thing is in a grey box like the screenshot I attached earlier in the thread, and sometimes they display correctly. It seems to be an html5 issue. Never had this trouble in flash with either swf animations or mov animations.
By the way, the problem is intermittent. I can view the same animation in the same published module on the same computer with the same browser and sometimes it will appear one way and other times it will appear another way.
Thanks, Matt. This is definitely a tricky problem, and I really appreciate all the detail you're providing.
Any updates on this Crystal?
Hey Matt!
I took a peek at the issues that Crystal shared with our team and I do not have any updates to provide at this time. We do try to prioritize based on user impact and this documentation may explain how we handle this process a bit better.
I also verified that this thread was flagged for update when we have something to share.
Sorry if this is holding up your progress.
It's kind of a major problem with your html5 publishing. Animated gifs pixelate and if I use .mov's instead, we get the intermittent grey boxes or borders. If either one or the other worked, it would be ok but currently there is no way to have animations look acceptably good in html5.
Just to reiterate - this problem is with SL3. HTML5 output.
Thanks for those screenshots, Matt. I'll share that with the team!
Hi, I'm having the same problem with the pixelated gifs, They worked perfectly in Storyline 2 but just seem to be acting up now that I have moved to Storyline 3. Any solutions for it yet?
Also my gifs seem to only run for 3 seconds and not loop like they are supposed to. Just tested this in both SL2 and SL3 and it works perfectly in 2 but the problems arise in 3.
Hi Rebecca,
Are you seeing this on any files in SL3 with animated GIFs, or only files you've upgraded from Storyline 2? If you have a sample file to share I'd love to take a look at that too.
This discussion is closed. You can start a new discussion or contact Articulate Support.