Animate PNG export slightly blurry

[SamPotasz]

Hi all 🙂

I am having trouble preserving image quality when exporting symbols as PNG sequences from Animate.

On the left is the symbol on the Animate stage, and on the right is the exported PNG. As you can see, it's not great 😞

My first thought was to bump up the DPI on the export, but I'm not able to do that without increasing the overall size of the image so that doesn't help at all, either.

I need the image at the original size at the original high quality, in PNG format.

Is that at all possible with Animate?

Is it possible through some convoluted way of exporting it into some other CC application and then exporting it to a PNG?

Thanks so much,

Sam

[resdesign]

Hi there. I am wondering if the publish setting for images in ANCC makes a difference when you export a symbol to png.

Anyway, i would increase the dpi then you could probably bring it in PS after and change the image settings - upsampling/downsampling, etc...

[SamPotasz]

Thanks, @redesign. I am messing around with it in PS now with pretty much the same issue 🙂
Seems like downsampling from a larger png runs into the same issue as Animate's PNG export.

Is there just some natural loss going from vector to non?

[resdesign]

Let me try to find a solution for you.

[resdesign]

Let me ask you a question: have you tried to get the image through PUBLISH instead of Export from Library? In your publish settings you could chose to export document assets and check off Combine Images into spritesheet. If you tried to do that and choose 32 bit, what do you get?

First leave the Combine checked so you can choose 32 bit. then uncheck it.

Frankly this can seem pretty unorthodox but I am not sure what else can be done except tweeking the image after export. If you get the best possible resolution for your image on export from libray then you can resample to be a smaller file. 

See Deke's tutorials here: https://www.youtube.com/watch?v=44mV3NsLmXw  (all his tutorials are great!)

[ClayUUID]

So what happens when you uncheck "Smooth"?

[SamPotasz]

it's much worse lol

[mark@headTrix]

Hi,

I just tested this and unchecking smoothing unfortunately doesnt help. I see it does get pretty blurry. If you try the Export>Image option it works better then the Export>Image (Legacy). You will loose a little quality since the file is being rasterized to a bitmap, and all your vector lines are being converted to pixels. And because of that it will add some anti-aliasing to smooth the edges so it doesn't look like its made of up squares (pixels), which it indeed is.

Not sure its worth the effort, but you can get it a little bit cleaner if you take a screen shot of your image as you want it in Animate then open the screenshots in Photoshop, drop out the background, and export to a PNG24. But the new export option seems to be pretty good. See my two test pics below..... not much of a difference, but maybe the Photoshop export is a little bit cleaner?
excuse the quick art! 

Hope this helps.

Cheers,
mark

[n. tilcheff]

Hi mate,

If I understood your explanations correctly, you export a symbol to PNG sequence by right-clicking it in the Library and choosing the option from the context menu.

I haven't used this functionality before due to the nature of my work, but just did a quick test in AnCC 19.2.1 on Win 10 and the export is perfectly sharp.

My guess is that the problem comes from some display scaling that you have on your high DPI mac monitor.

I wouldn't be surprised if animate just captures the images via the screen buffer...

Anyway... I'd suggest that you go to native resolution, restart Animate and try again. There is a chance that it will work as expected.

Animate does not seem good at hadnling non-native resolutions well.

Hope this helps!

[SamPotasz]

Thank you all so much for your suggestions and taking the time to look into this frustrtating issue! I really appreciate it.

Unfortunately, nothing seems to work in terms of exporting what I see on the stage cleanly to a PNG.

I think the best solution is to take screenshots for now and then edit out the backgrounds. Pretty sloppy, but for a small amount of still images, it'll work!

Is it possible that this weirdness is caused by this document being super old (as in, AS1) and then upgraded to the latest version?

Thanks again,

Sam

[rayek.elfin]

Before you take that path, have you tried the following:

- export your asset at 10x the original px size (just add a 0 in the publishing tab to the width and height)

- scale down the asset with an image editor or tool which supports the catmul-rom resampling method. Also use a bit of pre-sharpening.

Adobe software doesn't support this resampling option. Use either PhotoLine or Color Quantizer to perform this last step. CQ only works on Windows, but it is free and great for PNG image optimization. PhotoLine is free to use for the first 30 days.

I always export my vector work at a much higher resolution and scale down with the aforementioned method to keep it sharp looking. Catmul-rom down-sampling works really well, and maintains edge details and clarity much better than most other methods.

http://x128.ho.ua/color-quantizer.html

Fourth button from the right is the image resize button. Select as resampling method "CatRom", and play around with the sharpness slider(s).

I can't post the url for PhotoLine here, since it is a competing product.

[n. tilcheff]

Can you  upload one FLA with one symbol somewhere, mate, so that I can have a look at the source file and do some tests?

Ideally, it will be the original AS1 file.

[John Hepworth]

Did you ever resolve this issue?  I'm having something similar.  My old Animate 2018 seemed to handle this kind of thing better, but the updated one seems way more lossy.