Web Objects blurry, especially text

We're running into the same issue. I don't know at what point it started happening (we had to downgrade from 360 to 3 for security reasons), but the culprit looks to be in the transform scale class (div object 'webobject' - element.style transform: scale). When I turn that off or set it to 1, it's clear as day (but obviously not scaled in the window) - turn on or change to any value but 1, blurry.

This seems odd, because i've built modals and actually iframes that scale in HTML and I've not run into this issue - so instead of doing a transform scale, I found that if i did some math (I tried this actually on the iFrame div, but I imagine it should work at the webobject level) and set a width and height based on the scale value and it was clear (I also removed the W=100% and H=100% from the parent webobject div).

My suggestion for a fix might be to add a script to get a W and H based on the scale (it looks like some amount of this is already in the library since the window is being 'moved' based on innerwindow) and use those values vs a transform.

Since this issue (or at least thread) has been out for a while, perhaps this will help for a resolution.

Best,
Lisa

While I get itchy having to create workarounds (and now jquery since it's not "packaged" anymore), this seems to at least resolve the issue. I also get itchy that someone at Articulate will rename classes at some point, so know there's a risk.

Hopefully the articulate developers will look and tweak their code to set the width and height based on the scale rather than using the transform class.

Either way...here goes:

NOTE - this solution requires jquery - use whichever method works best for you to ensure jquery is loaded. It could also be rewritten in native javascript (moderately safer, IMHO, based on experience with Storyline versioning),

--JAVASCRIPT TRIGGER CODE--
//This code is needed to fix bug where webobjects in Storyline appear blurry 11/21.

$(window).resize(resizeInteraction);

function resizeInteraction(){
var webObjWidth=$('.webobject').width();
var webObjHeight=$('.webobject').height();
var stageWidth=$('#frame').width();;
var scale=(stageWidth/webObjWidth);
webObjWidth=(webObjWidth*scale);
webObjHeight=(webObjHeight*scale);
$('.webobject').css({width: webObjWidth, height: webObjHeight, transform:'' });
}

$(document).ready(function () {
resizeInteraction();
});

----

I might also suggest if you use any workarounds to "fix" these bugs that you keep a log of where you used them...I only say this because there have been way too many times that a bug-fix is finally made for things which then breaks the workarounds (this goes not only for javascript, but other workarounds) when files are maintained. For me, this is so frequent that I actually append the words FIX-*description* to my objects, layers, etc. just to call out that at some point I had to do something really crazy to fix bugs.

Best of luck!
Lisa

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. 

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!

Hi Eric,

Thanks for sharing the original link along with the content inside your .story file. 

It looks like the content is scaling down considerably to fit into the 418px x 385px frame provided in your project.

We recommend adding content that does not scale up or down for the best quality:

Best Practices for High-Quality Images and Videos

I'd recommend allowing the web object to display in a new window so that it's not limited by the Storyline project size for the best quality:

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.

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. 

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.

Thank you Crystal. I anxiously await any updates, since they will be critical to my development process.

I have the same issue and would also appreciate an update here.  Thanks