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-SHA...
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!
Hi Kel,
I don't know if this will work for you or not, but I updated this a couple of months ago to resolve resizing of the object with the browser.
I initiate jQuery (as a failsafe) on the slide when timeline starts, then I set this to start at .25 seconds (to ensure it's loaded). Again - not ideal by any measure - but I guess better than webobjects that look like an amateur overcompressed them :).
var initStage=$('#slide').width();
var initObjWidth=$('.slide-object-webobject').width();
var initObjHeight=$('.slide-object-webobject').height();
var webObjWidth=(initObjWidth);
var webObjHeight=(initObjHeight);
$('.slide-object-webobject').css({width: webObjWidth, height: webObjHeight});
$('.webobject').css({width: webObjWidth, height: webObjHeight, transform:'' });
$(window).resize(resizeInteraction);
function resizeInteraction(){
var stageWidth=$('#slide').width();
scale=((stageWidth-initStage)/initStage+1);
var webObjWidth=(initObjWidth*scale);
var webObjHeight=(initObjHeight*scale);
$('.slide-object-webobject').css({width: webObjWidth, height: webObjHeight});
$('.webobject').css({width: webObjWidth, height: webObjHeight, transform:'' });
}
I mentioned before this could be written in pure javascript (safer), but I keep hoping there will be a native solution. Perhaps your issue will give this a little bump and their devs can look to see what I'm doing here - which is to scale using more precise values since the percentage method doesn't seem to get precise enough (I want to say it rounds or something) and if something is just like one pixel off from "perfect" from original, images can look blurry (I run into this in regular images as well, actually - it's especially evident on system screens - they never look as clear as the original).
Fingers crossed that helps or at least points you in a direction to a fix.
Best,
Lisa
<style>.webobject {width: 100% !important;height: 100% !important;
transform: none !important;}</style>
integrated at the end of story.html, index_lms.html should do the same result without javascript
example - trackable vimeo video player in web object
before:
after:
=> interface of the videoplayer has a fixed size
before:
after:
