Adobe Animate Team Blog

The latest news, tips and insights directly from the Animate team

Aug 24, 2016/HTML5, WebGL/

Creating HTML5 Ads with Animate CC: Google HTML5 Ad Templates

So, as a reward for you readers who have made it to the end of my series on creating HTML5 ads with Animate CC (see more posts on this), I am providing you with 2 updated AdStarter FLAs in order to help you get started using Animate CC for HTML5 ads that will be served through one of Google’s ad-serving solutions.

Specifically I am sharing separate templates for standard HTML5 ads that are compatible with both Google DoubleClick and Google AdWords. It’s probably worth mentioning that the 2 templates are identical except for the fact that the AdWords template uses the Google Exit API for click-through handling which allows you to easily limit the clickable area to specific elements if desired. This can come in handy because HTML5 ads that are created with Animate CC, will by default, be clickable on the entire area of the ad when uploaded into the AdWords platform.

Please understand that this is a behavior of the AdWords platform and not a limitation of Animate CC. In fact, when using Animate CC it is extremely easy to assign click-through functionality to individual elements such as simple Buttons, invisible Buttons and MovieClips in order to define and restrict the clickable areas of your ad unit. You are free to take this approach with ads created for DoubleClick, however AdWords handles this differently, which is why the template leverages the Google Exit API.

For more information regarding the specific HTML ad requirements for both AdWords and DoubleClick, please refer to the following links:

The AdStarter FLAs automatically leverage the most commonly used features covered in this article, specifically the new template tokens, high-DPI scaling and preloader support. The other features that I’ve introduced in this article are ones that you can decide to enable through the Publish Settings on an as-needed basis.

Now if you’ve read my previous articles then you may recall that AdHelper handled high-DPI scaling and my custom template handled preloader support for you. With these new FLAs that I am providing, Animate CC is now handling those features instead. That said, the custom templates still provide you with the option to leverage AdHelper for animation control, performance monitoring and backup logic. If you wish to continue to use AdHelper, simply uncomment the AdHelper code within the HTML output.

Download the custom AdStarter templates here.

There is no better time than the present to begin using Animate CC for HTML5 ad creation. The program has continued to evolve and currently features a powerful collection of tools that are extremely easy to use and that facilitate an incredibly efficient workflow.

Aug 18, 2016/HTML5, Web Ads/

Creating HTML5 Ads With Animate CC: Multi-line Text Support, Publish Assets to Root Folder, and Center Stage

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:

blog6html5ads-1

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:

  1. Select File > Publish Settings > Basic in your HTML5 Canvas document.
  2. In the Basic tab, select between the various options under Center stage specifically Horizontally, Vertically or Both.
  3. The HTML Canvas is displayed at the center of the browser window by default along the width and height.

blog6html5ads-2

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.

Aug 15, 2016/General/

Adobe Animate CC August 2016 Update is Here!

Hey guys!

Continuing on the momentum we’ve gained over the last few months, we are releasing a quick update of Animate CC. We’ve included a couple compelling features in addition to performance enhancements and a few critical bug fixes.

Google Fonts Support

Add web fonts to your HTML5 compositions.  Google Fonts are now available integrated in the Adobe Animate workflow. More details here.

Webfonts-under-Font-menu

 

New Brush sizes

Now available over 200 brush sizes instead of the earlier 8.  Go ahead and give wings to your creativity!!  More details here.

Brush Size Slider - Live Preview

Please refer to release notes and new feature summary to know more.

We look forward to hear your feedback on these enhancements.

Thanks,

Ajay Shukla, Product Manager – Adobe Animate CC

Aug 15, 2016/HTML5, Web Ads/

Creating HTML5 Ads with Animate CC: Support for Canvas Transparency and Preloaders

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:

  1. Select the Canvas you wish to modify.
  2. In the Properties panel, select Stage.
  3. In Stage, select your background color of choice and then set the percentage values using the Alpha
  4. 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.
  5. You can alternatively achieve this through the Animate CC menus by selecting Modify > Document > Stage Color.

blog5html5ads-1

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:

  1. Go to File > Publish Settings > Basic and select Include preloader.
  2. Leave the Default option as is if you wish to use the default Animate CC preloader.
  3. Click the Default button and select Browse in order to locate and use a custom preloader GIF of your choice.
  4. Use the Preview option to preview the selected GIF within Animate CC.

blog5html5ads-2

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.