Blurry HTML5 Output in Zoom Regions

Hi James!

I just wanted to quickly pop in and welcome you to E-Learning Heroes!

Your post has created internal conversation and testing. The QA Team has also been reached out to for further clarification as well.

So, I do not have a response at this time, nor do I have any kind of timeline to share - but I did want you to know that your comment was received and being looked into.

Thanks, Leslie.

Hi James,

I discussed this with our QA team, and this is currently by design. Let me explain a bit further. Storyline will always conduct a certain amount of compression especially with media files. When you also include the option for mobile we look to further optimize it for issues you may encounter with memory and speed. 

In your situation, if you're inserting an image that is larger than the overall story size, but smaller than the maximum image size you'll see it scaled on publish (looking in the mobile output folder) to match the story size. That is what I saw when testing out the scenario you described above and also shared with our QA team. The zoom regions will cause further blurriness based on the documentation here. 

I hope that helps clarify, and if you have further questions feel free to let me know. Also you can always share your thoughts here in regards to the change of the behavior as a feature request. 

It does not help clarify. Storyline still distorts images beyond recognition in its export process, and you're telling me this is by design. Do you know how I've "solved" this problem without having to redo all my work? I preview in Storyline, record the animation using screen recording software, export to MP4, and display that instead of the native Storyline animation. MP4 is not vectorized. It looks excellent, and is reasonably well compressed. Make excuses if you like, but I see them for exactly what they are.

Furthermore, when I decompile the SWF-based animations and extract the images, they are not vectorized images. They are JPGs, and they look great. As do the SWF-based animations, but not their HTML5-based counterparts. 

Based on further analysis, and referencing the attached files, here is what is happening.

1.     Start with a stage that is 720 wide.

2.     Embed images that are 2048, 1024, and 720 wide and zoom in on the image.

3.     Export to SCORM

4.     Flash export (in the story_content folder) exports images that are 1440, 1024, and 720 wide.

5.     Flash 1440 zoom looks good. Flash 1024 zoom looks OK. Flash 720 zoom looks unacceptable.

6.     HTML5 export (in the mobile folder) exports images that are all only 720 wide. All zooms look unacceptable 

So it would appear that the problem is that the HTML5 zoom never exports an image that is wider than the stage, but the Flash zoom exports images that are up to twice as wide as the stage.

As an entirely separate issue, because Flash uses vectors for shapes, the rectangle and text contents look good in the zoom.

Storyline does not support this feature for HTML5 exports, and so the rectangle and text do not look good in the zoom. 

It appears that if Storyline just used the Flash-exported images, which can apparently be exported at least twice as wide as the stage, instead of using the HTML5-exported images, which Storyline inexplicably limits to the width of the stage, this part of the HTML5 zoom blurriness problem could be resolved.

Hi James,

Thanks for sharing the additional information and a copy of your file. I was discussing it with our QA team when this came in and we were going to ask to see a copy of your file as well so that we could try and understand what you were seeing. I'll be in touch after we've had some time to review it, so I appreciate your patience and understanding as we seek to look at what you're describing and comparing it with elements of how we'd expect it to behave. 

Thanks, Ashley.

Hi, is there any follow-up on this? James' previous post did look promising :)

Hi Michael!

I do not see any follow up from James or files shared. Would you be able to share a .story file for us to take a look at or you are welcome to share privately here.

Kudos to James for pointing out the details of this egregious issue. I've just encountered it myself, but not in the context of mobile devices. Now that some browsers, such as Chrome, are eliminating support for Flash — or more people choose to disable it — the problem will appear with more frequency on desktop computers.

For example, a client of mine recently reported some Storyline anomalies that were visible only because his browser does not have Flash enabled, so he was unknowingly viewing the HTML5 version on his laptop. This means I'll now need to troubleshoot HTML5 as vigorously as I do Flash, and modify the mechanics and aesthetics to suit both types of output.

Hi Adele!

Our team has continued our focus on HTML5 output and looking at ways in which we can provide HTML5 only or first - it's something we feel strong about and have committed a lot too going forward, but we don't have a date/timeline yet in regards to when that will be available. We will certainly keep folks posted once there is additional information to share. 

Thanks for your reply, Leslie — being able to render an HTML5 production that is aesthetically and mechanically equivalent to Flash should be one of Articulate's top priorities. The inexorable elimination of support for Flash is forcing the issue into the forefront for Storyline authors, as HTML5 will soon become a requisite delivery format for desktop computers as well as devices.

I know the Articulate team has made great strides in improving the look and behavior of HTML5 output. Right now, however, HTML5 output still seems "quirky" at best and buggy at worst. That said, it seems to me that this particular issue of zoom image quality should be relatively easy for the team to resolve, compared to some of the other HTML5 challenges. 

Since I don't want to have to do quality assurance checks on both HTML5 and Flash every time I export a course, I just disable Flash in the output SCORM package and then check the content in HTML5 only. It would be nice if HTML5-only were a Storyline export option, so I wouldn't have to go into the code every time to disable Flash.

Leslie, you said you don't see any files shared from James? I posted them three months ago. Scroll up to StorylineCompressionExample.zip 5.45 MB

Thanks,

Jim

Oh, I apologize James - I was looking for a support case based on the conversation shared above.

Hello. I have been trying to publish a file with zoom regions. 

It is hopelessly blurry when published as CD version. 

When I publish as SCORM with HTML5/Flash setting, it is clear on one computer and still blurry on another. Can you please suggest what settings may be contributing to this? I have attached the file. 

thanks. 

Hi Louise,

Thanks for sharing your published output. Could I take a look at your .story file to see what you've set up and the publishing settings you were using? 

Also what version of Storyline are you using?

We still have an issue with our team for Storyline 2 as the zoom regions are blurrier in HTML5 than Flash. It's a difference in how our Flash and HTML5 players were built, as the Flash player can specify higher resolution images than necessary and Flash will automatically use them when a region is zoomed. The HTML5 player is rendering images at a given size onto a canvas, and when the region is zoomed, it can only use the pixels that were on screen and zoom those. 

With Storyline 3 and 360, we rewrote the HTML5 publish output to ensure a better experience and match to what you've come to expect in Flash. 

Hi Ashley. I am using S360. I published the file as flash/html5 fall back. It is still blurry when viewed on IE11, although clear in Chrome. Unfortunately, we can't just tell learners to use Chrome as IE is the organisational default. The module will only launch in IE if pointing to the HTML5 file (not the flash one).

Also, frustratingly, it worked on SCORMcloud in IE, just not when it was loaded to our LMS (Success Factors).

We are trialling publishing it as HTML5/flash to see if that works. Can you please suggest anything that will help it launch in IE? I have attached the story file.

Hi Louise, 

When you're viewing the content in SCORM Cloud and using IE - did is display blurry for you there? To clarify, when you're viewing it - it's only the IE output that is blurry, in SuccessFactors? But that's only allowing you to show HTML5?

My guess on SuccessFactors and IE is that it's blocking the Flash output, but also not allowing for the information to be passed to use HTML5. You can see a few troubleshooting steps and workarounds for this here.  

Do you know if you're seeing the HTML5 output in Chrome? 

All this info will help as I give it a test too - although, I'll be testing in SCORM Cloud I want to make sure I'm doing the same Flash vs. HTML5 set up that you have! 

Hi again

The output is blurry in IE only. It is fine in Chrome and SF. the systems team can only point it to the HTML5 output (index_lms_html5.html), whether or not I publish it as HTML5_Flash or Flash_HTML5.

I haven't been able to update for a while. When I try to download the update, it says 'Failed to update' and that's all. Error message attached.

I'm not sure where you are based. I'm in Melbourne (Aus) so the time difference is making this a bit protracted. Is there a local support desk? It's not that I don't appreciate your help.... ;)

Hello again

I have successfully installed the update and continue to have the same problems whether I publish as HTML5/Flash or Flash/HTML5.

I looked at the troubleshooting tips and can confirm that:

* I updated today so should capture the August change to Flash 

* the launch file already has the compatibility meta tag and code listed 

* compatibility view is already turned off

* it works in Chrome but this is not the default browser for our organisation (more's the pity)

I'd love any other suggestions you might have. Otherwise I think we're going to have to provide instructions about installing Chrome and just field the phone calls that will result (not a great option!)

Hi Louise,

Sorry for the delays in responding - I'm US based (and so is the majority of our ELH team), and although we don't have an Australia based team our Support Engineers are available 24/7 here. 

I'll go ahead and open a case for you and that way our Support team can reach out to work with you one on one! 

Hello again, Our systems team made a happy discovery that using a different file to launch fixed it! For anyone else using this thread, it was: story_flash.html

Thanks for opening the case but happily I don't need it. I've let them know.

Thanks Louise :)