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.
Multi-line Behavior Support for Canvas Text Objects
This latest release enhances the visual design experience when working with dynamic text fields in an Animate CC Canvas document. Prior to this latest version, Animate CC would visually truncate the text within dynamic text fields instead of wrapping the text to the next line, as one would expect. This made it very difficult to achieve an accurate representation of the published text output when designing on the Stage. Now the visual representation of the text that you see on the Stage matches the resulting published Canvas output. This provides a much more efficient workflow and allows additional control during the design process, making it easier to determine how the text should be displayed.
Because type is such an integral part of our digital ad experiences (headlines, ad copy, CTAs, etc.) it is obviously very important that designers have as much control over the design of their text as possible. When Animate CC introduced support for static text fields in their previous release it was a tremendous advancement with how Animate CC handled text. And now the Animate CC team has enhanced it’s support for dynamic text fields making them much easier to work with. This is significant because dynamic text provides the ability to leverage web fonts within your Animate CC Canvas projects as well as being able to change the text within our ad experiences in real time based off of any number of factors such as user input, feed content or an API response. Even in scenarios where the resulting populated text is completely unknown it can be helpful for designers to use placeholder copy in order to make design decisions, making this new feature extremely useful. The good news is that this functionality is the default behavior so you don’t have to do anything to enjoy the benefits it provides.
Publish Canvas Assets to Root Folder
Some ad serving platforms require that your assets are organized within a flat file structure rather than a hierarchical system that leverages relevant sub-directories. By default Animate CC employs a directory based approach where your assets are output to logically named folders. This has long been a web best practice and is still recommended in most scenarios in order to provide organization and structure to your deliverable assets. That said, there will likely be times when an ad serving platform requires the assets to be delivered without any folders in place in order to comply with their system requirements. Luckily Animate CC now provides ad creators with the ability to easily decide how the outputted assets should be organized, within a single flat directory or within logical sub-directories.
This new feature saves ad creators a great deal of time and manual effort as well as the flexibility to easily switch between output modes as the requirements for a particular project may change or require submission to multiple vendors or publishers. In order to opt for publishing your assets to a flat root folder rather than sub-folders simply toggle OFF the folder icons for exporting image, sound and CreateJs assets. This buttons are toggled ON by default. Toggling OFF disables the folder field and exports assets to the same folder as the HTML output file. In order to locate these toggle buttons, go to File > Publish Settings > Basic and then click the appropriate folder icons that are positioned to the right of Export Image assets, Export Sound assets and Export CreateJs assets as follows:
One thing to be aware of when using this feature is that if you decide to change your approach midway through a project the previous file structure will not be replaced. So if you had initially published your project using the default sub-directories and then toggled the folder icons OFF in order to publish to a flat root folder, the preexisting folder structure would remain in place in addition to the newly published assets to the root folder. You would then have identical assets stored in sub-folders as well as on the root folder level. In order to avoid any potential confusion or the possibility of mistakenly including duplicate assets in your deliverable ad package, I would suggest that you manually delete the assets that you will be replacing before changing your settings and republishing. You may also want to consider publishing to a flat file structure as your default approach, because it seems that the majority of ad serving vendors will accept both flat and hierarchical file structures while other vendors will only accept a flat file structure. Because of this it may be the safer approach to cater to the lowest common denominator in order to increase the likelihood that your ad package will be widely accepted. That said, specs can varying greatly across the industry, so I would strongly suggest that you make it a habit to check the specs of your ad-serving vendor before starting a project and configuring this setting. Regardless of the specs that you need to adhere to, this is a very useful feature for ad creators that allows you to more easily ensure that your published assets conform to specific ad vendor requirements.
Center Stage
The last feature that I’d like to introduce is probably most useful for non-advertising based scenarios, however I can still see it coming in handy from time to time. This new feature allows for you to easily decide how your Canvas output should be displayed within the browser, specifically if it should be centered Horizontally, Vertically or Both. When enabling this feature, the Canvas output is displayed in the center of the browser window by default. Now because most HTML ads are served within an iframe it is usually expected that your ad unit should have zero padding and margins and should be aligned to the top left of the browser window. Because of this reality, this feature may not be something that you use very often in ad production, however it can be a nice time saver and improve the user experience when providing a preview of your work to the client. Centering the Canvas in the browser can result in a nicer presentation of your ad for client review, providing effective white space around the ad and literally ensuring that it is the center of attention…no pun intended! In order to use this feature and set the Canvas to align to the center of the browser window, follow these simple steps:
- Select File > Publish Settings > Basic in your HTML5 Canvas document.
- In the Basic tab, select between the various options under Center stage specifically Horizontally, Vertically or Both.
- The HTML Canvas is displayed at the center of the browser window by default along the width and height.
Please note that using this feature requires Animate CC to update code within the HTML so it can only be enabled if Overwrite HTML file on publish is also selected. As was the case with some of the other new features covered in this article, it is probably a good idea to configure this setting before unchecking Overwrite HTML file on publish and making any customization within the HTML output. If you do not need to make any custom edits within the HTML file, then you don’t really need to worry about it.
