Adobe Animate Team Blog

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

Aug 9, 2016/HTML5, Web Ads/

Creating HTML5 Ads with Animate CC: High-DPI Compatible HTML5 Canvas Output and Author-Time Bitmap Snapping

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.

Up until the latest release of Animate CC if you wanted to support high-DPI screens then you were required to author your FLA at double-scale and then scale down your content using CSS. You could have alternatively linked to external helper files such as AdHelper.js that would allow you to optimize your Canvas output for high-DPI screens. These particular approaches that I’ve already covered in my previous articles, are still valid and will continue to provide you with acceptable results. That being said, Animate CC has now introduced native support for high-DPI compatible Canvas output, providing the most straight-forward and seamless solution to date.

Animate CC generated Canvas output is now high-DPI compliant and delivers sharper output on high resolution displays. Animate CC will intelligently scale the output based on the pixel ratio of the device on which the user views the content, ensuring fully optimized rendering on both standard and high-DPI displays. This feature also ensures sharper output when the browser is zoomed and fixes pixelation issues that previously existed when viewing Animate CC Canvas output on high-DPI devices.

From this release onwards, Animate CC will automatically scale and render the Canvas output so that it is fully optimized for the users screen. This functionality is enabled by default and can only be turned off by manually removing the appropriate code from the generated HTML and then unchecking Overwrite HTML file on publish or by excluding the $RESP_HIDPI token from a custom template that you are leveraging with your project. If you decide to use one of the alternative methods that I’ve already introduced to handle support for high-DPI screens, then you’ll want to make sure that you’ve removed Animate CC’s high-DPI support by employing one of these two methods. When deciding which approach to take, it really comes down to personal preference as to which one will most effectively meet the specific needs of your project and workflow.

It’s important to understand that even when using this functionality you are still required to properly prepare and leverage double-scaled assets within your FLA in order to achieve the desired results. You’ll need to ensure that you have imported double-scaled image assets for any bitmaps that you wish to support high-DPI screens and that you have also double-scaled any vector assets that are contained within MovieClips that are being cached as bitmaps in order to improve performance. Please refer to my previous articles for detailed information regarding the proper integration of these types of assets.

Author-time Bitmap Snapping

The latest release of Animate CC now supports the option to enable bitmap snapping during authoring. In previous releases, bitmaps that were not placed on integer positions (i.e. x and y positions with fractional values) appeared blurred on the Canvas when published, producing undesired results. From this release onwards, when publishing an HTML Canvas document, Animate CC ensures that the bitmaps are snapped to the nearest pixels so that they appear sharper when rendered to the Canvas. When enabled, this feature will prevent you from placing any of your bitmaps on fractional positions when positioning them within the FLA. Even if you type in fractional x and y values in the property inspector, Animate CC will automatically round the positions to the nearest integer for you. Please be aware that this feature does not apply to MovieClip or Graphic symbols, so if you have placed bitmaps inside of these objects, then you will need to manually ensure that you have placed them on even pixels. For your convenience, author-time bitmap snapping is now enabled by default, and available across all doctypes. That said, if you wish to verify that the feature is enabled or want to disable it for some reason, changing the setting is extremely easy:

 

  1. Select View > Snapping > Snap Bitmaps to Pixels. The tick mark adjacent to this option indicates that the feature is enabled. When the tick mark is disabled, you can place your bitmaps at any location.
  2. You can also save your preferred snapping settings in the FLA file and the active settings will then be carried forward to your subsequent documents so that you don’t have to remember to configure your preferred settings with each and every project. Simply select View > Snapping > Edit Snapping and then click Save Default.

For detailed information regarding the options available for snapping your art into position please refer to this Adobe article.

Aug 4, 2016/HTML5, Web Ads/

Creating HTML5 Ads with Animate CC: Embed JavaScript into HTML

We’re back with our series highlighting some of the best Animate CC features for creating HTML5 ads. In case you missed it, check out our first post on HTML5 Canvas templates.

Some ad-serving vendors require that all of your local JavaScript be included within the HTML file rather than a separate JavaScript file. This format requirement may exist because of platform compatibility issues or restrictions on the number of files and server requests required to support your ad experience. Regardless of the reasons, this spec can vary widely from vendor to vendor so you are encouraged to check your vendor’s documentation before finalizing and packaging your assets. If your vendor requires you to combine your local JavaScript and HTML, you are in luck because in order to facilitate an easy and integrated way of consolidating these two files, Animate CC now introduces the capability to automatically embed the code from the FLA’s JavaScript file within the HTML file during publishing. To enable this feature:

  1. In the File > Publish Settings menu, switch to the Advanced tab and select the Include JavaScript In HTML
  2. Select OK after being alerted to the fact that when opting to include JavaScript in the HTML file, Animate will overwrite the HTML every time the file is republished. This selection disables the Overwrite HTML file on publishcheck box, and during any publishing event, the HTML will be overwritten.
  3. Republish your project to update your files.
  4. In order to revert to the default behavior of outputting the JavaScript to a separate file, simply select Stop including JavaScript in HTML, and then select Publish in order stop combining the JavaScript and HTML files.
  5. Please be aware that when the Overwrite HTML file on publish is not selected, the Include JavaScript In HTML option is automatically disabled. If you do not want to overwrite your HTML, then you will be unable to use this feature because the options Overwrite HTML file on publish and Include JavaScript in HTML cannot coexist.blog2html5ads-1

Lastly, you should know that if you plan to merge your JavaScript with your HTML, then you need to ensure that you are not using a custom template that is also referencing the FLA’s external JavaScript file. For example, you would not be able to successfully merge your JavaScript and HTML if you were using the following approach within your custom template, which leverages a placeholder token to pull in the FLA’s JavaScript file name:

<script src=”$TITLE.js”></script>

This is an approach that some ad creators are using in order to avoid having Animate CC automatically append a cache-busting variable to the file name when testing the FLA. When this approach is not taken, Animate CC automatically generates the script tag that references your FLA’s JavaScript file and appends a random cache-busting query string variable to the file name in order to ensure that the browser is not caching an outdated version of the file when you view and test your work. The problem with this practice is that some ad-serving platforms will reject your ad because their automated systems do not recognize the file name with the appended cache-busting variable as being the same file as the actual file that is located within your assets.

Because of this fact, some ad creators began implementing the above solution so that they wouldn’t have to manually remove the cache-busting query string variable before packaging and submitting their finalized assets to the ad-serving vendor. This can be an elegant solution for most use cases, however it is worth calling out that it would prevent you from being able to merge your JavaScript with your HTML, causing your code to break because the custom template would still be expecting the external JavaScript file which would then no longer exist after enabling this feature. So, if you want to use this feature, please make sure you are using a template that does not explicitly pull in the external JavaScript file as described above, but rather use the following placeholder token which will allow you to switch back and forth between the two approaches if needed:

$ANIMATE_CC_SCRIPTS

Keep in mind that using this token will still allow for the cache-busting variable to be appended each time you CTRL+ENTER to test your FLA, however if you simply Publish your FLA before finalizing your HTML, then you can prevent Animate CC from appending the cache-busting variable. So in summary, if you press CTRL+ENTER to test your FLA then the random cache-busting variable is still generated. However, if you publish your FLA instead, by selecting File > Publish then there will be no cache-busting variable appended to the JavaScript file name. Because of this, it can be useful to Publish the FLA as final step before unchecking Overwrite HTML file on publish and making any custom edits to the HTML.

Aug 2, 2016/HTML5, Web Ads/

Creating HTML5 Ads with Animate CC: HTML5 Canvas Templates and Automatic Merging of JSON/JS Sprite Sheet Code

Over the course on 2016 I have already written several articles focused on proper usage of Adobe Animate CC for HTML5 ad creation. If you’ve read those articles, then you are already well aware of the required areas of focus and the specific challenges that needed to be addressed in order to create and deliver a fully optimized ad experience. The Adobe Animate CC team has been committed to developing the features and functionality that ad creators need to do their jobs efficiently and in compliance with emerging IAB specs and industry standards.

The latest release of Adobe Animate CC, provides ad creators with a powerful collection of tools to accomplish more than ever before.

In a series of posts, I will be reviewing the latest and greatest Adobe Animate CC features that are sure to become staples in your ad creation workflow. First up, HTML5 Canvas publish template improvements.

The latest release of Animate CC introduces one of the most powerful features to date for ad creators. The introduction of an entirely new library of modularized placeholder tokens that can be included within your custom templates to tailor the supported functionality to the specific requirements of your project. This dramatically improved feature provides flexibility and control over the published Animate CC output. The individual tokens are completely modularized in nature and provide you with the freedom to use them at your complete discretion and in whatever combination meets your particular needs.

When you import a new custom template, during publishing, the default token variables are replaced with customized code snippets based on the configuration of your Publish Settings. The following table lists the current template variables that Animate CC now recognizes and replaces on publish:

Attribute Parameter Template Variable
Title of the HTML document $TITLE
Placeholder for including CreateJS scripts $CREATEJS_LIBRARY_SCRIPTS
Placeholder for including generated scripts (including web font scripts) $ANIMATE_CC_SCRIPTS
HTML Tag to start a client-side script $SCRIPT_START
Placeholder for code to create loader (CreateJS LoadQueue) $CREATE_LOADER
Placeholder for code to load assets present in the manifest $LOAD_MANIFEST
Placeholder for code defining the method to load files $HANDLE_FILE_LOAD_START
Placeholder for code to handle file load event $HANDLE_FILE_LOAD_BODY
Placeholder for code concluding the method to load files $HANDLE_FILE_LOAD_END
Placeholder for code defining the method handle Complete, called after assets are loaded $HANDLE_COMPLETE_START
Placeholder for code to create the stage $CREATE_STAGE
Placeholder for code to register for tick event, after which animation starts $START_ANIMATION
Placeholder for code to support responsive scaling and hidpi displays $RESP_HIDPI
Placeholder for code concluding the method handle Complete $HANDLE_COMPLETE_END
Placeholder for a function to handle content with

sounds

$PLAYSOUND
Placeholder for styling section to support centering the canvas $CENTER_STYLE
Placeholder for canvas display style property to support Preloader $CANVAS_DISP
Placeholder for code to display Preloader $PRELOADER_DIV
HTML Tag for end of client-side script $SCRIPT_END
Canvas element ID $CANVAS_ID
Width of the stage or canvas element $WT
Height of the stage or canvas element $HT
Background color of the stage or canvas element $BG
Version of Animate CC used to generate

content

$VERSION

 

The following tokens from the previous versions have now been deprecated and can no longer be used. These tokens have been modularized and replaced by new tokens in the above table:

Attribute Parameter Template Variable
Placeholder to include scripts (CreateJS and generated Javascript) $CREATEJS_SCRIPTS
Placeholder for code to initialize CreateJS libraries, load media, create and update stage $CJS_INIT*

 

Now there are some things that you should be aware of as you begin experimenting with these template variables. Please understand that if you remove a placeholder token then you cannot use it’s corresponding code later on, because when you are leveraging a custom template, Animate CC respects the structure of the template and needs to know where it is allowed to inject generated scripts. For example, if you decided to omit the $RESP_HIDPI token from your custom template, but then later decided that you wanted for your ad to support high-DPI screens by configuring the proper Publishing Settings to do so, then the intended functionality would not actually get included in your resulting HTML output. Even though you enabled the proper Publish Settings to enable high-DPI support, Animate CC would not have a place within the custom template to inject the required code, because the placeholder token does not exist in the template. Because of this, it is probably a much safer approach to leave most of the placeholder tokens in place even if you do not have an immediate use for them. Allowing tokens to exist does not mean that there will actually be any additional code inserted into your HTML, the tokens are simply placeholders that you can use to inject code on an as-needed basis by configuring your Publish Settings.  This approach allows you greater flexibility if you need to implement new functionality within a particular project that is leveraging a default custom template.

One example of a placeholder token that some ad creators might choose to exclude from their custom templates would be the $CREATEJS_LIBRARY_SCRIPTS template variable that when published includes a reference to the combined CreateJs library, either a locally stored version or the CDN hosted version depending on which option you choose within the Publish Settings. If you were serving your ad with a vendor that had their own version of the CreateJs library stored on their CDN, then you would choose to not use this token and would instead include a direct link to the vendor’s CDN hosted library in it’s place.

Another placeholder token that might commonly be excluded from the custom template would be the previously mentioned $RESP_HIDPI token. Some ad creators might choose to delete this token if they did not want for Animate CC to handle high-DPI scaling because they had another solution in place, such as AdHelper. If this is something that you might be interested in doing, then be aware that this token is also a placeholder for code that supports Animate’s new responsive Canvas scaling functionality, so omitting it would prevent you from leveraging this feature. I’ll provide further detail on using this new feature in a later article.

One final example of a token that some ad creators might initially choose to exclude from their custom templates would be the $ANIMATE_CC_SCRIPTS template variable that when published includes any Animate CC generated scripts, including web fonts. An ad creator might remove this token if they were planning to include their own reference to the FLA’s JavaScript file. This may seem like a good idea, however the problem with this approach is that this particular placeholder token is also used for other generated scripts as well, and by removing it, you are limiting what functionality you might be able to use in the future. We’ll take a closer look at this specific example as it relates to one of the next new Animate CC features that I’ll be introducing in an upcoming post, which is the option to embed your FLA’s JavaScript into the HTML output.

Automatic Merging of JSON/JS Sprite Sheet Code

Next up in our series highlighting some of the best Animate CC features for creating HTML5 ads is automatic merging of JSON/JS sprite sheet code. In case you’ve missed them, check out other posts from this series.

Prior to the latest release of Animate CC, leveraging sprite sheets within your projects required a dependency on an automatically generated JSON file. When Animate CC generated your sprite sheets it would also produce corresponding JSON files that contained all of the specific dimensions and coordinates of the separate image regions that comprised the sprite sheets. This information was used by Adobe Animate to properly position and render the individual images. The problem with this approach was that most ad-serving platforms would reject your ad because they did not support or allow the JSON file format to be uploaded within their systems. Because of this ad industry reality and also the fact that JSON files are inherently insecure, Animate CC now merges the relevant data previously contained inside of the JSON within the FLA’s JavaScript file, completely eliminating the creation of a separate JSON file. This is amazingly, awesome news for ad creators!

If you’ve read my previous articles then you can undoubtedly appreciate the significance of this new functionality. Following the necessary workaround to manually remove the JSON dependency was an extremely laborious and time consuming process that required a great deal of precision in order to implement successfully. The process required a great deal of time and effort and it was unfortunately far too easy to make mistakes. Thanks to Animate CC now automatically merging the JSON with the FLA’s JavaScript file and completely eliminating the usage of JSON files, you will be able to maintain your sanity while saving yourself an enormous amount of time and effort and confidently delivering HTML5 ads that will be widely accepted and approved by all of the most prominent and popular ad-serving vendors.

There are no required steps or workarounds to enable this functionality, as this feature is now the default behavior. Simply enable sprite sheet usage and go about your business. If this wasn’t good enough on its own there is an added bonus with this change, because you can now even preview the published HTML file locally without hosting your files on a server or running a local server as was previously required. It just doesn’t get much better than this!

Jul 27, 2016/Adobe Stock/

Night and Day: Easily Create a Landscape Alteration in Animate CC

Ever since Flash Professional became Animate CC back in February of this year, we’ve had access to the CC Libraries panel. Included within this panel is a direct connection to search against the library of assets included in Adobe Stock. Why would anyone want to search for Stock assets within Animate? For one thing, it’s a great way to throw some ideas together without a lot of commitment. You can use an unlicensed, watermarked version of the assets within your project as a proof-on-concept or to simply try out some new ideas. Later on, when decisions have been made, you can license the asset to use the full-resolution, un-watermarked version in your project, or even replace the unlicensed version with a final asset created by you or your team.

Figure_01

Figure 1: The completed animation

We are going to demonstrate how to go about using Adobe Stock within Animate CC – and build out the animation seen above with those assets.

Project File Downloads

You are encouraged to explore Adobe Stock on your own and find some assets which appeal to your own sense of creativity. However, if you want to use the same exact Adobe Stock assets used below within your own projects, they can be found at the following locations:

“hill at sunset” by Dmitriy Sladkov

https://stock.adobe.com/search?k=84819895

“full moon night” by magann

https://stock.adobe.com/search?k=61979038

…and here is the completed FLA from Joseph.

Access Adobe Stock Assets

When working in an Animate project, it’s easy to search for and add assets from Adobe Stock. We do so through the CC Libraries panel. If you do not see the CC Libraries panel open within your Animate project, you can reveal it through the Window > CC Libraries command in the application menu.

Figure_02

Figure 2: The CC Libraries panel within Animate

Once open, you will see all of your personal and shared libraries, as well as the assets within the selected library. Any Adobe Stock assets you may have previously added to a library will become immediately available when that library is selected from the dropdown.

Figure_03

Figure 3: Searching Adobe Stock

If you would like to search for a new asset from Adobe Stock, we can do so by using the Search Adobe Stock input directly below the library dropdown. Once search terms have been entered, the results of that search will appear directly below in a visual grid.

Figure_04

Figure 4: Stock asset options

To add an asset from the search results to the currently chosen library, we have two options. Both options are accessed by hovering the cursor over any of the individual assets. The choices are as follows:

License and Save to… This option will license the asset and save the high resolution version to the selected CC Library.

Save Preview to… This option will download a low resolution preview of the asset and save this preview version to the selected CC Library. If you decide to purchase the asset, you can do so from within the CC Libraries panel and receive the full resolution version.

In the next section, we will have a detailed look at building an animated project using assets from Adobe Stock.

Using Adobe Stock Assets

As seen above, we’ll be building a short piece of animated content using assets from Adobe Stock.

Project Setup

I’ve created a new ActionScript 3.0 document at 747 x 420. The FPS is the default 24 – though any of this can vary depending upon your own project. Why ActionScript 3.0? We’re producing a raw video and an animated gif image from this project, so the chosen document type doesn’t matter all that much since there is no interactivity. However, when working within an ActionScript 3.0 document, when you test your movie, Animate is able to do using the built-in Flash Player, keeping the entire experience of designing your content within one focused application. Additionally, you have access to tools like 3D Rotation and Transform – and the widest variety of filters and blend modes –  always a fun option to have!

Timeline Setup

Find the two assets you’d like to use from Adobe Stock (as detailed above) and bring the preview versions of those assets down into your CC Library. They’ll now be available for use within your project.

I’ve gathered a detailed landscape photo and have placed this on the very bottom layer. I have also found a nice nighttime sky with a great moon to use as a blending layer. The sky photo has been placed in a layer directly above the previous.

Figure_05

Figure 5: The Adobe Stock assets are assembled in the Timeline

Blending MovieClip

I want to use a blend mode upon the sky photo to create an ethereal effect upon the landscape. To do so, I must first create a MovieClip symbol around that photo – as MovieClip symbol instances can accept blend modes and photographic bitmap images cannot.

To create a MovieClip symbol, we select the shy photo and choose Modify > Convert to Symbol from the application menu. A small dialog will appear allowing us to name the symbol (I named mine “NightSky”) and choose a symbol type. Choose MovieClip!

Once the symbol is created, an instance of that MovieClip symbol will exist upon the stage where the photo one was. Select this instance and have a look at the Properties panel. We can see that the selected object is a MovieClip instance of “NightSky”. Perfect. All that needs to be done now is the selection of a blend mode.

Under the Display section of the Properties panel for your MovieClip symbol instance, you’ll find a Blending dropdown. Go ahead and play around until you find one with the desired effect expressed upon the stage. I chose Overlay.

Figure_06

Figure 6: MovieClip instance properties – Blending choice

Animated Masking

What we want to do now is create a mask layer and a shape within that layer that is animated across the stage – performing a dynamic transition between the two photographic images. The first thing we do is create a new layer above the previous two, right-click and choose Mask from the contextual menu. This will transform the top layer into a special mask layer, and will automatically nest the layer below it within the mask as indicated by the visual indentation of the layer and the change in layer icon.

Now to create the animated content. You can use any sort of shape or motion you like – I created a large rectangular shape to cover the stage and then employed the Free Transform tool to skew the shape a bit, creating a neat angle.  At this point, it’s just a matter of creating an additional further along the timeline, shifting the content of the previous keyframe so that it begins off-stage, and then applying a Shape Tween to the content. To apply a shape tween between two keyframes, select any of the frames within that span, right-click, and choose Shape Tween for the menu. If all is well the mask will now be animated.

Figure_07

Figure 7: The project with masking applied

For more detail on how to use Shape Tweens in Animate CC, have a look at the following resource:
https://helpx.adobe.com/animate/using/shape-tweening.html

And if you need more information on how masking works… here you go:
https://helpx.adobe.com/animate/using/using-mask-layers.html

Reverse Duplication

Not only do we want the mask to animate across the stage in one direction – we also want to have it leave the stage as well – creating a seamless looping animation. Animate CC makes this task very simple. All we need to do is select the entire tween with the cursor, including the keyframes on each end. With all of these frames selected, right-click and choose Copy Frames. Now, move about 10 frames past the final keyframe (frame 60 in the demo) and select the frame. Right-click again and this time choose Paste Frames. The entire tween will be pasted across the timeline.

At this point, the second tween is just a repetition of the previous one. To reverse the tween, select all frames once again (in the second tween this time) including both keyframes. Now right-click to summon the contextual menu once again and this time choose Reverse Frames. Pesto! We hardly had to lift a finger and now the animation is reversed, completing our loop.

Video Export

There are a couple of options to exporting the content we have created. You can, of course, choose to simply publish for Flash Player – but we want to export as a video and animated GIF. Let’s look at how to export a video file first.

This is actually super-simple. Just choose File > Export > Export Video from the application menu. An Export Video dialog will appear, allowing you to save off your completed animation as raw video data. This exported file can then be taken into Adobe Media Encoder and be transcoded to any number of video file formats.

Figure_08

Figure 8: Exporting the animation as a video file

Animated GIF Export

An often-overlooked feature of Animate is the ability to produce animated GIF files. To export the animation as an animated GIF, we’ll need to use the Publish Settings dialog. Publish Settings can be accessed through the Properties panel with the document itself selected (no objects on the stage or pasteboard selected) or directly from the application menu using File > Publish Settings.

As you can see in the figure below, we have numerous file publish option through use of this dialog. One of these options – the one we are immediately interested in – is GIF Image. If we select this option, we’ll see all of the properties we can tweak when exporting a GIF. The important one here is that we want to choose Animated from the Playback dropdown, and then select Loop continuously.

Once we hit the Publish button, an animated GIF will be generated alongside our FLA, assuming we haven’t specified an alternative file location.

Figure_09

Figure 9: Animated GIF Export

Conclusion

The use of Adobe Stock assets within Animate CC is a great way to try out a wide array of easily approachable stock assets. From this point, you can build out your content around the asset previews, and when you feel confident enough that the asset will work… go ahead and license it from directly within Animate itself.