Forum Discussion

PaulColby's avatar
PaulColby
Community Member
6 years ago

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-SHA...
storyline 360
  • StevenBenassi's avatar
    StevenBenassi
    2 years ago

    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!

LisaJones-20cfa's avatar
LisaJones-20cfa
Community Member
4 years ago

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

Related Content