Forum Discussion
Web Objects blurry, especially text
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.
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!
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?
- PaulColby-e9841Community Member
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.
- PaulColby-e9841Community Member
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.
- PaulColby-e9841Community Member
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.
- ChrisGervais-efCommunity Member
I'm experiencing the same issue Paul. I've got web objects generated from Adobe Animate that look poor in Storyline. Forgive me if you've been down this road already, but if make my animate source files high resolution (such as 1920 x 1080) and my Storyline file that large as well, it will display with good resolution... until the browser gets smaller, then the quality or sharpness of the web object decreases.
Hi Paul!
Thank you so much for sharing these details! I've shared these examples with our team, as well as the troubleshooting steps you've already taken. They'll be in touch if they have additional questions.
- PaulColby-e9841Community Member
Hello Chris. Thanks for the input. I have tried that. However, I find that it changes the size of everything in the wrapper, which is not desired. Have you found that also? If so, what did you do about that? Just live with it? Up the font sizes of text?
Also, the goal is to make it look good at all browser sizes, not just at HD resolution. If I'm creating an Animate Web Object at a certain size, it should at least look good at that size. I'm a little weary of finding work arounds for Storyline issues/bugs.
It would be nice to have Storyline fix the issue. It looks worse within Storyline than it does in the published WebObjects folder itself. With older versions of Storyline 3, specifically Storyline 3, Update 9: 3.9.21069.0, everything looks fine. Something changed in their publishing architecture that created the issue. I have documented some of the changes in one of my comments.
- OscarGagliardiCommunity Member
I am experiencing the same issue as others have reported here. Web Objects look fine outside Storyline. When they play within Storyline they look very blurry. When should we see a solution implemented?
- HeatherMiller-7Community Member
We are still very interested in resolving this issue as well. We've had to use other development platforms for projects that involve web objects because the quality is a no go.
- SamanthaLowe-d4Community Member
I don't know if this helps, but it seems to have something to do with a transform: scale in the CSS on the container with classes of ="webobject is-scrollable". Hopefully some expert at CSS can help us figure out how to override or something. I'm attaching a video.
- SamanthaLowe-d4Community Member
What's weird is, I am transferring courses from captivate to articulate. I published a software demo from captivate as html5 and embedded as a webobject in storyline 360 and it looked great! But when trying to embed pdfs in slide it looks soooo blurry.
Hi Samantha,
Thank you for the details about your pdf. With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.
- SamanthaLowe-d4Community Member
Thanks Leslie,
I was just testing it out. It wasn't for anything real.