Adobe Animate Team Blog

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

Category

General

Jun 21, 2016/General/

Available now: Adobe Animate CC 2015.2

Following Animate’s rebirth just a few months ago, our latest update is focused on expressivity, performance and time saving, and additional publishing options for the web. This release is essential for animators, designers and advertisers who want to create amazing animations for everything from mobile devices to the latest high resolution displays.

Pattern Brushes

Paint a vector pattern along the path or stretch to its entire length. You can use the integrated global library within Animate to use Art and Pattern brushes. In addition to the default brush presets, you can import new Pattern Brushes to your Animate document using the CC Libraries. See them in action here.

image01

 

Frame Picker

(graphic symbol thumbnails)

Visually preview and choose the first frame for a graphic symbol. In previous releases, you could not preview the frames without getting within the symbol. This feature enhances the user experience for animation workflows such as Lip Sync.

image03 image02

Layer Transparency

You can now skip manual workarounds and sketch on top of other layers right inside Animate. To set the visibility of the layer to transparent, Shift+Click on the eye column in the timeline.

image05

 

Improved Web Publishing Options

Merging JSON/JS Code

Animate embeds JSON file into JS. When you create a Spritesheet during canvas publishing, no external Json file is created and is included within the JS instead by default.

With this change, you can even preview the published files locally without hosting them on a server (as before).

Embed JavaScript into HTML

You can now include a JS file within your HTML file when publishing Canvas documents.

image04

Support for Transparent Backgrounds with Canvas

You can now make the background transparent in a Canvas document to see the underlying HTML content. To do so, use the Alpha % to set the transparency level and the No Color swatch option to completely set the canvas stage to transparent.

image00

HiDPI-compatible HTML5 Canvas Output

Projects published in HTML5 Canvas now support the latest Hi-DPI and Retina displays.

Responsive Scaling

With more and more Animate content being published in HTML, responsive animations are essential. Animate can now resize published content based on various form factors to look awesome on mobile devices.

We’ve been hard at work with this latest update and are excited to see what you’ll create with it. Check out our complete list of updates, and don’t forget to tag your projects on social media with #madewithanimate!

Mar 30, 2016/General/

Using Animate CC HTML5 Canvas Templates with Multiple Publish Profiles

The ability to publish to HTML5 Canvas from Animate CC (and Flash Professional before it) is nothing new… however, with the release of Animate CC we now have a number of additional options when managing how a project gets published – especially in terms of how the HTML output is constructed.

 

HTML5 Canvas Output

When publishing to HTML5 Canvas from Animate CC, the resulting HTML file is hugely important in terms of the project’s ultimate destination. This can be clearly seen in terms of the differing specifications which ad distribution networks expect content producers to conform to when submitting their projects.

 

figure1

Figure 1. We are using an HTML5 Canvas document for this project.

 

In the Properties Panel, we can easily see it specified that we are working on an HTML5 Canvas Document. You might also notice that the Publish Profile is listed as Default. This is an often overlooked features of Animate CC and we will be examining it later in this article.

 

figure2

Figure 2. The Properties Panel indicates the type of document and Publish Profile being used.

 

Before moving on, if we go ahead and test our document in the web browser by choosing Control > Test, we’ll see the result of this Default Publish Profile. The canvas element which is our published project is aligned to the upper left and the HTML background color is a sad grey.

 

figure3

Figure 3. Our content rendered using the default Publish Template.

 

The good news is that it doesn’t have to be this way! Let’s now go ahead and click on Publish Settings in the Properties Panel to access all of our document publish options.

 

HTML5 Canvas Templates

The first thing to do if you want to create a template of your own is to export the default template in order to modify it to your liking. To do so, from the Advanced tab in Publish Settings, click the Export button and save the HTML file on your machine for editing. You will be prompted by Animate CC to give this file a name and location on your hard drive.

 

figure4

Figure 4. Exporting the Default Template file from the Advanced Publish Settings.

 

With the default template exported, you will now be able to open it up in Adobe Dreamweaver, Brackets, or any text editor of your choosing to customize the HTML, JavaScript, and CSS contained within. Perhaps you want to center your HTML5 Canvas content or add other elements like headers and descriptive text. This is all possible using Templates.

 

Editing the Template

Now that we have our Template file open within an editor, we can make whatever modifications we wish. In this example, I’ve styled the Body element to inherit the Stage background color as defined in our Animate project. I’ve also gone ahead and given some margin to the document, and have centered the Canvas element. That should make things a bit more balanced and lively!

 

figure5

Figure 5. Editing the Template HTML file in Brackets.

 

One thing to make note of before we move on, is the availability of special tokens with the HTML Template which ca be used when customizing. For instance, tokens such as $BG, $WT, and $HT can be used in conjunction with custom logic and elements to adjust for sizing and background colors within your Template.

Here is a short list detailing some of these tokens, and what they represent:

$CANVAS_ID                    The ID of the Canvas element within your HTML document.

$TITLE                                 The title of your project document.

$BG                                       The background color of the Stage defined within the FLA.

$WT                                       The width of the Stage defined within the FLA.

$HT                                       The height of the Stage defined within the FLA.

These tokens are available for use within any Template and will be replaced by their appropriate values upon publication. Other tokens exist as well, and can be explored within the exported HTML Template file.

 

Using Ad Network Code within a Template

In this example, we’ve created a very visual Template in order to more easily express what can be achieved through this mechanism. However, we can also include non-visual elements within a Template as often required by various ad distribution networks.

Here, for example, is a bit of HTML to include in the HEAD of your Template in order to conform to DoubleClick ad campaign requirements.

<meta name=”ad.size” content=”width=300,height=250″>

<script type=”text/javascript”>

var clickTag = “http://www.google.com”;

</script>

In the above code, we set the ad size though a META tag, and then expose a ClickTag variable for use within our Animate CC project. Within the actual Animate content, we can respond to user interaction by invoking the following:

window.open(window.clickTag);

This will allow the use of ClickTag events within out HTML5 Canvas project easily through the use of Animate CC Templates! The same sort of functionality can be enabled for a variety of ad distribution networks by creating a Template for each one.

 

Importing the Custom Template

When you are finished editing, save your HTML and return to Animate CC and the Advanced Publish Settings. Simply click the Import New… button and locate the edited HTML file to use it within your project. The selected template is now clearly indicated within the dialog.

 

figure6

Figure 6. Importing the custom Template file.

 

Now, whenever you test or publish your HTML5 Canvas document, it will employ your custom Template in place of the default. If at any time you wish to use the default Template again, simply click the Use Default button.

 

Publish Profiles

What if you have a number of Templates which you wish to switch between when publishing your content? It would be a pain to have to import Template files every time you need to switch. This is where Publish Profiles come into play.

To establish the Template just created as part of a Profile, you can click the gear icon and choose to Create profile.

 

figure7

Figure 7. Creating a custom Profile.

 

A small dialog will appear, allowing you to provide a name for this profile. In this manner, you can define any number of Profiles in your document and easily switch between them.

 

figure8

Figure 8. Naming the new Profile.

 

With a custom Profile defined in the project, you can now switch between that and the default with ease by simply choosing it by name from the dropdown. Note as well that these can be exported and imported to share between projects!

 

Employing Templates by Swapping Profiles

Templates can be automatically applied to your content prior to publication by assigning a specific Template to a Profile, and then switching to whichever Profile you want to use. This action will employ the specific Template applied within that Profile to the document being published.

For the last part of this article, I’ll go ahead and switch my Publish Profile to new newly created “Center Content + BGProfile by selecting it from the Profile dropdown in the Advanced tab of our Publish Settings dialog.

 

figure9

Figure 9. Switching Publish Profiles.

 

Clicking the OK button within our Publish Settings will apply the selected Profile and return us to the project document. Notice that the Properties Panel now reflects the selected Profile and no longer the default.

 

figure10

Figure 10. Selected Profile is indicated in the Properties Panel.

 

From here, we can once again test the project in the web browser by choosing Control > Test. The compiled HTML5 Canvas project will appear in a new browser window and the changes will become obvious with the entire background inheriting the Stage color chosen in Animate CC and the content itself perfectly centered – much nicer!

 

figure11

Figure 11. Published content using the custom Template and Profile

 

To return to the Default Profile or to manage and select other Publish Profiles, simply return to the Publish Settings dialog.

 

Feb 8, 2016/General/

Animate CC is HERE!

marqueeimage

Much like proud new parents, the entire Flash Professional Animate team is overjoyed to announce that Adobe Animate CC is finally here.

Late last year, we informed you that Flash Professional’s name will be changing to Animate starting with this release. But beyond the name change, this is one of our biggest releases ever — check out this seriously long list of new features and enhancements. Most of these were covered in the last blog post, but we also snuck in some new ones:

  • Typekit integration for HTML5 Canvas docs
  • Publishing settings for spritesheets, which can be optimized for ads that need to load quickly, or for websites that require higher resolutions
  • Support for HTML5 Canvas templates that can be customized with any code editor (for example, you can add script for Doubleclick or AOL tracking)

This week, we’ll have an all-star of cast of animators and game developers streaming live on Twitch, showing off what Animate can do.

Download Animate CC now and let us know what you think. Happy animating!

Nov 30, 2015/ActionScript, Animation, Creative Tools, Custom Platform Support, Custom Platform Support, Extensions, General, HTML5, Toolkit for CreateJS, Video/

Welcome Adobe Animate CC, a new era for Flash Professional

Adobe Animate CC
For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016. [Update 2/8: Animate CC is now here!]

Today, over a third of all content created in Flash Professional uses HTML5, reaching over one billion devices worldwide. It has also been recognized as an HTML5 ad solution that complies with the latest Interactive Advertising Bureau (IAB) standards, and is widely used in the cartoon industry by powerhouse studios like Nickelodeon and Titmouse Inc.

Animate CC will continue supporting Flash (SWF) and AIR formats as first-class citizens. In addition, it can output animations to virtually any format (including SVG), through its extensible architecture.

There’s much more than just a name change however. Our team is hard at work on a major update with significant new features to create animations for any platform. Here’s a sneak peek by Michael Chaize, Principal Creative Cloud Evangelist:

Here’s what you can expect in Animate CC:

  • Drawing, illustration and authoring
    • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
    • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
    • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
    • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
    • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
    • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
  • CreativeSync integration
    • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
    • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
    • [Update 2/8: We’ve also added Typekit integration!]
  • Output capabilities
    • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
    • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
    • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
    • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

Note: This release is listed as “Adobe Animate CC” in the Creative Cloud desktop application. When you install or update Animate CC, it will be found on your computer as Adobe Animate CC 2015, not Adobe Flash CC 2015.

Previous versions of Flash Professional prior to the 2016 release will continue to be available.

Throughout the week, we will be giving a sneak peek of Adobe Animate on our Adobe live stream channel on Twitch, showing it both for animation and building games.

The entire team is thrilled about our upcoming release, and more importantly, beginning a new era with Animate CC. As we approach the 20th anniversary of Flash Professional, we invite animators and interactive designers around the world to join us for decades to come.

[Update 2/8: Animate CC is available now!]