Randomly portions of symbols or entire symbol will be a blurry mess on preview

(brian) #1

In the IDE everything looks fine. Once I attempt to preview certain elements just turn into a blurry smudge. The only fix I’ve found so far is to delete the element entirely and start again. Other similar complaints on this forum seem to be minor image compression issues related to the library setting. Mine is almost as if the blur property has been set (but it hasn’t). This has happened several times already. Does anyone have an idea as to the cause?


In what browser/OS are you previewing? Can you share an example document?

(brian) #3


OSX 10.9.5

Previewing in FireFox 45.0.2 and also Chrome Canary. Both appear the same.

My apologies, this file I cannot share. I realize this makes debugging difficult.

  • B


Well if you can reproduce it (in a new document that you can share) that will make our guessing game easier. Is it an SVG? A PNG? Is it scaled or resized?

(brian) #5


Yes it can be reproduced. Attached is a file and the steps are -

  1. create oval and change into symbol
  2. click into symbol
  3. drag in pointer and 2 text png files
  4. animate cross fades and add timeline pauses + custom behavior
  5. go to main timeline and move origin point
  6. animate the bubble transition in

I may have worked through this in a different order in other occurrences. Sometimes it wasn’t a symbol but they all seem to have a scale transform and a png.

replicateError.zip (44.8 KB)


This looks like an error in how we calculate the maximum size of the element when we determine how to optimize images. To avoid this issue, select your images that become blurry in your resource library, and uncheck ‘Automatically optimize while exporting’. replicate-fixed.hype.zip (24.4 KB)

For example the txt_ohYeahAnd.png image was only being rendered at 21x7, since that was what Hype thought its maximum size was. I’ve filed a bug on this issue.

(brian) #7


Thank you for checking into this issue.


  • Brian

(Ken Heins) #9

I’ve had an occasional problem like it. More like oddities in preview, not a serious problem the seem to go away.

Brings up a question which occurred to me, may be irrelevant. If I use the Image Optimizer app separately, (I do) should the “automatically optimize while exporting” be unchecked, or does it matter?

And: do I need to be using the Image Optimizer app at all if it IS checked?

My theory: code that doesn’t need to be there could be a problem waiting to happen.

(brian) #10


Indeed I thought at first image optimization might be causing what I was seeing. Unchecking that option however did not fix the problem in my projects but deleting and reanimating did. I’m just grateful the Tumult team is so responsive and looking into the issue.

I haven’t looked into using tinypng or another alternative for optimization yet. You do have me curious if there is way to default the library to not optimize until things are resolved. (there might be I just haven’t looked) I’d rather not go through and uncheck a box for every image.

(Roth) #11

FWIW I’ve just started seeing this too, with a PNG button graphic. The animation is a simple scale up from 1% to 100% and keyframe to disable/enable visibility. I had the same experience as described by byahoo across Safari, FF, and Chrome. My fix was similar, deleting my keyframes, setting display to visible (if off) and setting size to 100%. Previewing then is fine, and could even undo the keyframe deletions to original and it works again. The PNG in question is the button background for several button symbols and when one goes blurry, they all go. Fix one and they’re all fixed. It appears to happen at random while not working on the affected image - maybe once every 20 or so previews. I can pretty accurately simulate the effect in Photoshop by taking my 200 x 60 px button graphic and resizing it to 10 x 3, then upsizing it back to 200 x 60.