Web Objects blurry, especially text

Jan 24, 2019

Hello. I have created a Web Object in Animate CC and inserted into Storyline. Outside of Storyline, the Web Object looks great, even zoomed in (see attachment AnimateCCWebObject_OutsideStoryline-SHARP.jpg). When I import that same Web Object into Storyline, the quality decreases noticeably (see attachment AnimateCCWebObject_InsideStoryline_-BLURRY.jpg).

Yes, I am scaling my Player size to "fill browser window," but even changing that option to "Lock player at optimal size" does not help all that much.

Why is the quality decreasing so much? Is Storyline bitmapping the text and vector images, rather than just playing the Web Object as is? What can I do to improve the quality (please don't say change my Player setting to "Lock player at optimal size, we all know that's not practical)? I am forced to use Animate CC created Web Objects to work around Storyline limitations, unfortunately, so the drop in quality is really a bummer.

Thanks for any info you have about this issue. I assume that others are affected also.

Pinned Reply
Steven Benassi

Hello Everyone!

I'm happy to share that we have released Storyline 360 version 78 (Build 3.78.30680.0)!

Included in this release is the fix for the bug: HTML5: Web Objects With Images Are Blurry.

Now all you need to do is update Storyline 360 in your Articulate 360 desktop app on your computer. You'll find our step-by-step instructions here.

Please let us know if you have any questions by reaching out to our Support Engineers directly.

Have a great day!

56 Replies
Alyssa Gomez

Hi there Paul,

I do see the decreased in quality in the "Inside Storyline" screenshot you shared. I would love our team to take a closer look at this Storyline file, with your permission. We'll delete it when we're done troubleshooting.

If that works for you, you can upload your file privately to our support team here. They'll be able to dig deeper into the cause of the bluriness you're seeing. 

Paul Colby

Good morning Alyssa. Thank you for your reply. I have stripped any proprietary information from the files, so I can upload here as well, in case someone in the community has a possible solution. I am in the middle of working out a solution for playing Animate CC within Storyline, including a custom volume slider and screen seekbar, so there are some bugs up to this point. I'll work them out when I can (or someone else is welcome to) and I plan on posting a complete solution when I have it fully debugged.

I believe the process I am working out has high value for the Storyline community (I know it does for me), but all will be for naught if I cannot get my Animate CC files to look good within Storyline. I've done most of the heavy lifting, now I just need Storyline to make it look like it does outside of Storyline.

There is one other issue with the Storyline slider that I am using in the attached files. If you click on the thumb of the Storyline slider I inserted on the screen, then move your mouse off the thumb and release, the slider is still active (the mouse up has not been registered). Without clicking again, if you then move your cursor over the thumb and move left and right, the thumb follows your cursor. That is not standard seekbar behavior and causes all kinds of issues. I could code this in javascript, but why should I have to? Basic functionality of a slider is that when you click on it, once you mouse up anywhere on the screen, the slider should turn off. I have a custom variable for debugging called "userScrubbing" that is displayed on screen in the attached files, which demonstrates the issue.

Thanks again Alyssa.

Alyssa Gomez

Hi there Paul,

Thanks so much for sending over your file! I published it using Storyline 360, and I do see that the web object does appear a bit blurry. It looks clear outside of Storyline when I use browser zoom to zoom in on the animation. Does the blurriness here match what you're seeing on your side?

Also, I'm not seeing the "sticky" slider thumb you were experiencing. Can you double check that you're using Storyline 360 Update 24? You can find that detail by going to the Help tab, then About Storyline

Paul Colby

Good morning Alyssa, thanks for the reply. I'm not sure what you're asking me. I posted screenshots of the blurriness I'm seeing and you've acknowledged that it's blurry, so it seems that we have consensus on that. I am using Storyline 3, update 5.

I like your "sticky slider" description. It's easy to reproduce (unfortunately Windows Snipping Tool does not capture cursor, or I would send a screenshot). Click on the slider thumb, then while holding down the mouse move your mouse above the slider (say to the middle of the screen), then release the mouse. You can see that the "User scrubbing" debug string on screen is still true. If you then move your mouse over the thumb without clicking (or below into the Storyline wrapper area at bottom of screen) and move mouse left and right, the slider thumb will follow your mouse.

Thanks again.

Crystal Horn

Hi Paul.  Thanks for those details and for letting us know which version of Storyline you're using!  I can recreate the sticky slider with those instructions, and we have an existing report for each of these issues, now.

I'm adding your discussion so we can update you with any changes to either the blurry web object or the sticky slider.

Katie Riggio

Hi, Andy. Thanks for checking in! 

No update to share to share yet, but I promise we'll keep this discussion posted with any new information. Here's a glimpse into how we tackle bugs

In the meantime, we're happy to look at your .story file to explore some custom approaches. If you're able to share the project, please use this private upload link. We'll let you know what we find and will delete the file after.

Tom Eichhorn

I experienced the same issue.

It seems that Articulate Storyline (360) takes its own stage size and displays embedded web objects in that size. So regardless of whether you have fit-to-screen set, the animation will be rendered at the default stage size and then be upscaled.

Workaround: make the stage size larger in Storyline. For example FullHD 1920x1080.
Now embedded web objects with vector graphics look much sharper.
Remember: for better quality: never scale up, always scale down.

And hope that Articulate will support scalable vector graphics in the future (not only in edit mode but also in the output). Fingers crossed!

Paul Colby

This is still an issue. I have new information to share on the issue. For the first half of this year, I have been using Storyline 3, without having installed new updates. The web objects were of acceptable quality. This week, we switched to Storyline 360. I took literally the exact same file, published it to Articulate 360, and the quality of the Web Object went way way down. You can clearly see the degradation in quality in the attached files Storyline3_cropped2 and Storlyine360_cropped2. NOTE: Images have been removed since they now superseded by zip file below.

Also, I went ahead and looked at the two published folders and compared (see attached StorylinePublishFolder.jpg).  The Storyline3 published folder has two additional html files with a suffix of _html5.

Within the html5\lib\scripts folders, the files are also different. Storyline 3 has one file: app.min.js. Storyline 360 has four files: ds-bootstrap.min.js, ds-frame.desktop.min.js, ds-frame.mobile.min.js, ds-slides.min.js.

The method for publishing courses has clearly changed, resulting in unacceptable quality for Web Objects. It seems 360 with the latest updates is using Bootstrap, is that right?

This is a big issue and needs to be addressed by Articulate. Is there a phone number I can call to talk to a live person? It's a progress stopper for our company.

Paul Colby

While we're on the subject, there is another glaring difference in the Notes. Attached are two files of the exact same file published from Storyline 3, without latest updates, and Storyline 360, with latest updates. NOTE: Images have been removed since they now superseded by zip file below.

Something has clearly changed in your publishing architecture. This is literally the same exact file. In Storyline, the Notes look fine in either 3 or 360. Nothing I can do there to prevent this odd line spacing that 360 decided to just randomly apply.

Please help. This is clearly a Storyline issue, along with the poor quality of Web Objects when publishing.

Lauren Connelly

Hi Paul!

We'd love to help! I'd like our Support Engineers to assist you with this snag. Let's start with having you upload your project, so we can take a look. Our Support Engineers will begin troubleshooting from there.

I'm so sorry you're still running into this! We'll make sure to get expert eyes on your file!

Paul Colby

Unfortunately, I cannot share my project. It is highly proprietary. I know from the forums that others have seen this issue also. I gave you a lot of useful information about the published architecture. Clearly, something has changed on your end, as noted above.

If it helps, I was using Storyine 3, Update 9: 3.9.21069.0. Everything was fine. I updated to Storyline 360 and installed all the latest updates. Then quality of Web Objects decreased significantly and the line spacing on Notes changed dramatically. Again, this is with the same exact Storyline file.

I suggest you publish a course which includes Notes with bullets, and Web Objects, in the Storyline 3 version I noted above. Then either install all updates to Storyline 3, or use Storyline 360, then compare published files. I believe you will see a difference. Please do your due diligence and let me know what you find. I know I am not the first one to see this issue.

FYI, at one point earlier this year, I installed all of the updates for Storyline 3, and saw the same issues. I used Windows Restore to back up to the earlier version of Storyline 3 noted above, and the issues went away.

Leslie McKerchie

Thanks for the details, Paul. 

I was unable to recreate the issue using the steps you described.

I did a quick search for the issue you described. I located a conversation you shared as well and took a look at a file you shared here. I published to Review 360 with the latest update to Storyline 360 and do not see any additional spacing as you've described here.

  • Do you see any issue with my published output? 
  • Do you experience this issue in a specific environment or browser?
Paul Colby

Hi Leslie. Thank you for your attempt to help. Yes, I do see an issue. It is the same issue I described above, with screenshots. The line spacing for the bullets is different in Storyline 360 application than it is when I publish it and view. Please tell me you see the difference. I did not have the issue with Storyline 3, version noted above. After installing updates, I did also have the issue.

As far as my issues, the Notes spacing is secondary to the Web Object quality. That is a showstopper for our company.

Paul Colby

I don't know if this will help at all, but I am using an Animate CC canvas document to publish my Web Objects. I have tried every combination of image settings possible. They look great outside of Storyline, and as mentioned above, when published in Storyline 3 before installing latest updates. Once I install SL3 updates or publish with SL360, the Web Objects look horrible. As noted above, you have clearly changed something in your publishing methodology that has broken something. I've pasted below for reference:

Also, I went ahead and looked at the two published folders and compared (see attached StorylinePublishFolder.jpg).  The Storyline3 published folder has two additional html files with a suffix of _html5.

Within the html5\lib\scripts folders, the files are also different. Storyline 3 has one file: app.min.js. Storyline 360 has four files: ds-bootstrap.min.js, ds-frame.desktop.min.js, ds-frame.mobile.min.js, ds-slides.min.js.

Is there a way to install older versions of Storyline, like the version noted above? Until you figure this out, the current version of the product is unusable for Web Objects.

Paul Colby

Okay, I've rigged up a sample to demonstrate the problem (see attached zip file). It has everything you need to reproduce the issues. There is:

  • An Adobe Animate CC file that is used to publish the Web Object
  • The Web Object itself
  • A Storyline file that embeds the Web Object
  • An "Examples" folder with screenshots of the issues

You can clearly see that the Web Object with the Storyline publish is much, much lower quality than the actual Web Object itself found in ... story_content\WebObjects\6TlShZk93OQ

You can also clearly see that the line spacing for the bullets in the published project is different than it is in the Storyline file itself. Keep in mind that everything was fine in an earlier version of Storyline 3, including the Web Object quality. It was only when installing latest updates to Storyline 3, or using latest version of Storyline 360, that quality degraded. Also, we have multiple courses with 80 pages or more, so touching/reformatting the Notes for every screen is not a practical option, even if that did work.

Again, as detailed above, something changed on your end as far as publishing courses. That is plain to see. I think that's where you should start looking. If you publish the attached file in older version of Storyline 3, it will look fine.