Adobe Animate Team Blog

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

Category

HTML5

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/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.

Aug 11, 2016/HTML5, Web Ads/

Creating HTML5 Ads with Animate CC: Responsive Canvas Scaling

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:

  1. Select File > Publish Settings.
  2. 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.
  3. 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.

blog4html5ads-1

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.