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.
Support for Canvas Transparency
Another new feature which introduces the possibility of some very useful and practical creative executions is the ability to publish your Canvas output with a transparent background. Doing so will allow the user to view the underlying HTML content, so that your Canvas output can appear to seamlessly merge with other DOM elements. Some common ad related use cases that I could see benefiting from this feature would be creating organically shaped rich media expandable or takeover executions as well as integrating your Animate CC Canvas content with HTML5 video tags, HTML5 forms, other Canvas elements, etc. Basically Canvas transparency can allow your Animate CC Canvas content to overlay and visually merge with any other existing DOM elements or HTML5 functionality that is either not currently supported within Animate CC or that makes more sense to implement in the DOM rather than within Animate CC. Depending on the specific needs of your project, this functionality could prove to be significantly powerful and open the door to plenty of new creative possibilities.
In order to adjust the transparency level of the Canvas background you simply adjust the Background Color settings for your Stage by changing the Alpha % to set the transparency level to your desired percentage or by choosing the No Color swatch option to set the Canvas background to be completely transparent. You can customize the Canvas background to various colors and also modify its display transparency. Again, when you create a Canvas with a semi-transparent or completely transparent background, the user will be able to view the underlying HTML content during publishing, so make sure that is what you are intending and that it also supports the ad experience in a way that adheres to the publisher specs. To apply this feature, follow these steps:
- Select the Canvas you wish to modify.
- In the Properties panel, select Stage.
- In Stage, select your background color of choice and then set the percentage values using the Alpha
- In order to make your Canvas background completely transparent simply select the No Color swatch in the upper left hand corner of the dialog box.
- You can alternatively achieve this through the Animate CC menus by selecting Modify > Document > Stage Color.
Please be aware that if you plan to work directly in the HTML document associated with your FLA, then make sure that you set your Canvas transparency before you begin making any customizations to the HTML. Once you have set the Canvas transparency within your FLA you should then go to the Publish Settings > Advanced and uncheck Overwrite HTML file on publish so that you can safely begin your modifications without accidentally overwriting your manual additions to the HTML file upon each subsequent republish of your FLA. Also, you should know that if you later decided to change the attributes of your Canvas background it would require Animate CC generated code modifications within the HTML in order to update, so you’ll most likely want to finalize your Canvas background requirements before unchecking Overwrite HTML file on publish and making any custom modifications to code within the HTML file.
One thing to note, about this feature as well as some of the other new features that also require Animate CC generated updates to the HTML output (i.e. Preloader and Center Stage), is that you only need to worry about how they are affected by Overwrite HTML file on publish if you plan to write custom code within the HTML file rather than inside of your FLA. If you keep all of your re-useable code within your custom templates and then put all of your unique code within your FLAs then you can avoid having to uncheck Overwrite HTML file on publish and concerning yourself with managing when you can safely implement a certain feature in the Publish Settings. Obviously, there are certain scenarios where manual modifications to the HTML might be required, such as integrating HTML5 video or forms with your Animate CC Canvas output. Some code savvy ad creators might also prefer to only include simple timeline focused code in the FLA and then write all of their additional and more complex code within the HTML using a more robust code editor. This approach is actually very common when a designer is creating the FLA and then providing the HTML and JavaScript output to another developer who does not work within Animate CC. This all being said, whenever you are able to code directly in the FLA and avoid custom coding in the HTML, it can provide a much more flexible workflow.
Preloaders
The latest release of Animate CC now allows ad creators to decide if they want to include a preloader within the HTML output. This is an IAB recommended best practice for HTML5 ads, due to the fact that HTML5 ads require multiple server requests and the transfer of numerous individual assets. The number of the requests made to fetch the files as well as the weight of the assets themselves can have a significant impact on the load performance of the ad as well as the publisher’s page. This can especially be of concern on mobile and tablet devices for a variety of reasons including less available CPU power, memory, cache size, slower servers, slower network download speeds and latency, un-optimized publisher pages, etc. In order to be considerate of users and provide a better advertising experience on all devices, I would strongly suggest implementing a lightweight preloader within your HTML5 ads whenever possible.
A preloader provides a visual indication to the user that while the ad experience is loading, it is not broken and that something is actually happening in the background. If you decide to leverage Animate CC’s default preloader functionality then the preloader will take the form of an animated GIF that is displayed when the scripts and assets required to render the ad unit are loading. Once the assets have successfully loaded, the preloader is then hidden and the actual Canvas content is displayed.
If you have read my previous articles and used any of the AdStarter templates that I have provided then you already know that I implemented a custom preloader solution into those templates for your convenience. Now if you want to use an animated GIF as your preloader than Animate CC’s new feature can easily replace the custom approach that I provided in those templates. That said, currently Animate CC only supports the GIF format for preloaders so if you wanted to use static JPG/PNG, animated SVG or custom HTML content for your preloader than you should not use Animate CC’s preloader feature and instead take a similar approach to the one that I implemented in my previous AdStarter templates. Hopefully the Animate CC team will extend support for preloaders to include other formats, such as static images, animated SVG and custom HTML. For now, it is good to know that both approaches automate the functionality for you, and that you now have the option of using this new native feature that will likely meet your needs most of the time.
By default, the preloader option is not selected. If you decide to use this feature you have the option to either use the default Animate CC preloader or select a custom preloader of your choice. In order to configure support for a preloader follow these steps:
- Go to File > Publish Settings > Basic and select Include preloader.
- Leave the Default option as is if you wish to use the default Animate CC preloader.
- Click the Default button and select Browse in order to locate and use a custom preloader GIF of your choice.
- Use the Preview option to preview the selected GIF within Animate CC.
Please note that the preloader GIF will be copied into whatever location you have specified to export your image assets in the Export Image assets publish setting. Regardless of the name of the file that you are using for your preloader it will be renamed as _preloader.gif which allows Animate CC to easily overwrite the GIF should you decide to change the preloader later with a new file so you don’t end up including a bunch of unused preloader GIFs in your image assets. That said if you later decided to disable the feature and to not use a preloader at all, then be aware that the preloader GIF would still exist and you would have to manually remove it from your assets. Lastly, you should know that enabling or changing this feature requires Animate CC generated code modifications within the HTML so you’ll most likely want to finalize your preloader approach before unchecking Overwrite HTML file on publish and making any custom modifications to code within the HTML file. Again, this is only a concern if you need to add custom code within the HTML file rather than keeping it inside of the FLA.
