Our series highlighting some of the best Animate CC features for creating HTML5 ads continues! In case you’ve missed them, check out other posts from this series.
Up until the latest release of Animate CC if you wanted to support high-DPI screens then you were required to author your FLA at double-scale and then scale down your content using CSS. You could have alternatively linked to external helper files such as AdHelper.js that would allow you to optimize your Canvas output for high-DPI screens. These particular approaches that I’ve already covered in my previous articles, are still valid and will continue to provide you with acceptable results. That being said, Animate CC has now introduced native support for high-DPI compatible Canvas output, providing the most straight-forward and seamless solution to date.
Animate CC generated Canvas output is now high-DPI compliant and delivers sharper output on high resolution displays. Animate CC will intelligently scale the output based on the pixel ratio of the device on which the user views the content, ensuring fully optimized rendering on both standard and high-DPI displays. This feature also ensures sharper output when the browser is zoomed and fixes pixelation issues that previously existed when viewing Animate CC Canvas output on high-DPI devices.
From this release onwards, Animate CC will automatically scale and render the Canvas output so that it is fully optimized for the users screen. This functionality is enabled by default and can only be turned off by manually removing the appropriate code from the generated HTML and then unchecking Overwrite HTML file on publish or by excluding the $RESP_HIDPI token from a custom template that you are leveraging with your project. If you decide to use one of the alternative methods that I’ve already introduced to handle support for high-DPI screens, then you’ll want to make sure that you’ve removed Animate CC’s high-DPI support by employing one of these two methods. When deciding which approach to take, it really comes down to personal preference as to which one will most effectively meet the specific needs of your project and workflow.
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. Please refer to my previous articles for detailed information regarding the proper integration of these types of assets.
Author-time Bitmap Snapping
The latest release of Animate CC now supports the option to enable bitmap snapping during authoring. In previous releases, bitmaps that were not placed on integer positions (i.e. x and y positions with fractional values) appeared blurred on the Canvas when published, producing undesired results. From this release onwards, when publishing an HTML Canvas document, Animate CC ensures that the bitmaps are snapped to the nearest pixels so that they appear sharper when rendered to the Canvas. When enabled, this feature will prevent you from placing any of your bitmaps on fractional positions when positioning them within the FLA. Even if you type in fractional x and y values in the property inspector, Animate CC will automatically round the positions to the nearest integer for you. Please be aware that this feature does not apply to MovieClip or Graphic symbols, so if you have placed bitmaps inside of these objects, then you will need to manually ensure that you have placed them on even pixels. For your convenience, author-time bitmap snapping is now enabled by default, and available across all doctypes. That said, if you wish to verify that the feature is enabled or want to disable it for some reason, changing the setting is extremely easy:
- Select View > Snapping > Snap Bitmaps to Pixels. The tick mark adjacent to this option indicates that the feature is enabled. When the tick mark is disabled, you can place your bitmaps at any location.
- You can also save your preferred snapping settings in the FLA file and the active settings will then be carried forward to your subsequent documents so that you don’t have to remember to configure your preferred settings with each and every project. Simply select View > Snapping > Edit Snapping and then click Save Default.
For detailed information regarding the options available for snapping your art into position please refer to this Adobe article.
