Next up in our series highlighting some of the best Animate CC features for creating HTML5 ads, responsive canvas scaling. In case you’ve missed them, check out other posts from this series.
Animate CC now allows users to create Canvas output that can be responsively scaled within the browser. This new feature allows users to select if the Canvas output should be responsive in regards to it’s width, height, or both and automatically resizes the published output based on various form factors. The result is a responsive and visually crisper high-DPI compliant output.
To be quite honest and up front, I do not believe that this feature is immediately useful for most ad creation scenarios. That said, the introduction of this functionality is very exciting and can be extremely useful for web-based content that you intend to scale across multiple devices. This feature could also possibly lay the groundwork for future iterations that might allow ad creators to develop Canvas based output that can properly scale to various ad sizes while still allowing the contained visual elements to maintain their aspect ratio and reposition themselves accordingly. In the meantime, I would encourage you to begin exploring this powerful feature for creating any web based output that you intend to be accessed on all types of screens and that should maintain it’s aspect ratio, such as a website header or splash content. In previous releases, this type of content had to be authored separately to suit different screen sizes or resolutions. To enable responsive scaling:
- Select File > Publish Settings.
- In the Basic tab, select Make Responsive > Width, Height or Both. This option ensures that entire Canvas is visible even when viewing on a smaller screen (such as mobile devices or tablets) by scaling down the size of the Canvas while maintaining it’s aspect ratio. If you select width then the content will be scaled down only when the width of the browser window is smaller than that of your published content. The opposite is true when selecting height, as the content will then only get scaled down when the height of the browser window is smaller than that of your published content. When selecting both then as you might expect, your content will get scaled down when either the width or height of the browser window becomes smaller than your published content. If the size of the browser window becomes larger than the authored stage size, then the Canvas does not get scaled up, it gets displayed at it’s original intended dimensions.
- Select Scale to fill visible area to view the output in full screen mode. By default, this option is disabled. When selecting Fit in view your content will be displayed in full screen mode, meaning that your content will be scaled up to fill the entire available screen space. However the aspect ratio is maintained, so if the maximum width was reached there could still be an unfilled area of screen height and vice versa. In most practical use cases this setting is not affected by whether you have previously selected to make the content responsive by width, height or both however it is worth noting that if you wanted to manually resize the content in the browser then the resize event is only fired and the Canvas resized when the specified parameter has been changed. So if you had selected height, and then manually resized the browser window’s width, the ad would not resize unless you then also changed the height of the window. Alternatively, when selecting Stretch to fit your content will scale to fill the entire visible area of the browser window so that there is no unfilled area. The aspect ratio is still maintained so some of your content may not actually fit into view and could extend outside of the viewable area. As with the previous setting, when manually resizing the browser the content will only be resized when the selected parameter (width, height, or both) is resized.
Please note that when scaling up your Canvas content, bitmap assets could become blurry if they were imported at a smaller size. Vector based assets that are not cached as bitmaps will be re-rendered at the larger scale, maintaining their crispness.
