Animate 2015.2 and up does have built in HiDPI support in the new publish templates. If you uncheck "Overwrite HTML on Publish", you'll get the latest settings.
You'll probably want to update your publishing template so you have both the newest features from Animate, but also any scripts you need for the clicktag to track.
Check this out for a comprehensive overview: Creating HTML5 Ads with Animate CC: High-DPI Compatible HTML5 Canvas Output and Author-Time Bitmap Snapping | Adobe Anim…
I would like to prepare a projevt with this new HiDPI integrated support of Animate CC.
The overview you mentioned above explains:
"It’s important to understand that even when using this functionality you are still required to properly prepare and leverage double-scaled assets within your FLA in order to achieve the desired results. You’ll need to ensure that you have imported double-scaled image assets for any bitmaps that you wish to support high-DPI screens and that you have also double-scaled any vector assets that are contained within MovieClips that are being cached as bitmaps in order to improve performance."
i really don't understand HOW to PREPARE this in Animate CC correctly and i find no instructions or tutorial about this.
Are the imported doublesized assets only in the library or should they be on the stage?
Should they have the same name? Are they exported automatically with different names?
Is the stage doublesized also?
Its really not easy to use this new feature without an explanation.
1 person found this helpful
The stage does not need to be double sized. For a 300x250 banner, the stage should be 300x250 px.
Import any bitmap images (jpgs and pngs) into the library at double the size, and scale them down to actual size (50% scale) on the stage.
Images are the only thing you will need to resize; the HiDPI code will automatically sharpen the appearance all of the vector art (lines, shapes, text) from Animate.
the scaled-down version looks sharper on higher pixel density devices like iPad Retina.
But on a standard lower pixel density desktop (iMac) it looks blurry and the not-scaled version looks sharper.
I would like to publish the best version for all displays at once.
What's wrong? Thanks for Help.
Make sure the x and y positions of your symbols are always on whole pixels, and not fractions; that can help. You can try adding stage.snapToPixelEnabled = True; to your actions to do this automatically, though I personally prefer to handle positioning manually.
Other than that, though, if you're working with small text and thin lines, it's always going to look clearer on a screen with a higher pixel density. That's not an issue with Animate; it would be the same with DOM elements like a SVG in your browser.
Thanks, I already tried this and much more.
The not scaled Bitmap is always a little bit sharper on low pixel density devices.
This issue concerns only Bitmaps, text and vectors are fine. It is logic because Browser scaled Bitmaps have less quality.
So there should be an opportunity to write Media Queries or to serve two versions, dependent on display ppi. ?
But Animate does everything automatically
Scaled for HiDPI: