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
Matt Lang

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.

Crystal Horn

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!

Crystal Horn

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.

Crystal Horn

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!

Crystal Horn

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.

Matt Lang

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.

Leslie McKerchie

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.

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