Animate CC: Interactive HTML5 Canvas Video Projects

Since beginning this practice with the Adobe Generation Professional demo sessions, I’ve begun recording any live demos using Camtasia 9 and uploading them to YouTube. The full session with all speakers is linked below as well – but this segment has better audio and video. I also include the project files created during the session if you wish to download.

Part of the “Four Masters of Animate CC” session from December 10th, 2016.

Direct link:

Animate CC Demo Files

Joseph’s demo files (with video included) [176 MB]

Joseph’s demo files (no video) [20.7 KB]

Full Recording (Adobe Connect)

Full recording with Tom Green, Joseph Labrecque, Myra Ferguson, and Chris Georgenes:

Using Animate CC HTML5 Canvas Templates with Multiple Publish Profiles

I nearly forgot to post about this… I have an article up at the Adobe Animate CC Team Blog on using Templates and Publish Profiles to do some neat stuff.


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.

Convert Flash Ads to HTML5

Adobe has published a video I authored for them describing the process of converting ads targeting Flash Player to HTML5 Canvas using Flash Professional CC.

Flash Ads

See how you can convert your existing Flash Ads to Canvas and optimize them for use on any modern browser.

Watch Video (3 minutes)

Adobe Animate CC: The Evolution of Flash Professional

Adobe Animate CCAdobe has announced the release of all new versions of the major desktop applications available through Creative Cloud. There are a couple of applications which have not had updates made available during this milestone release… primary among those is Flash Professional CC.

Flash Professional CC is now Animate CC

FLAFlash Professional has had a strong showing at Adobe MAX this year. If you were able to attend those sessions, or any of the subsequent presentations I have given around the product, you will know that it has received a lot more resources, leading to many more enhancements over the past year. Adobe cares very deeply about Flash Professional once again and wishes to restore it as the premiere animation and interaction tool – but now as a platform agnostic creativity application not restricted to any single platform. As a point of clarity – to reinforce this renewed focus – Adobe has decided to rebrand Flash Professional CC as Animate CC.

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.

In the opening chapter of my upcoming book, I spend a good deal time specifying terminology. Explaining to the reader the differences between such terms as “Flash Player” and “Flash Professional”… with the caveat that many resources they will encounter on their journey will simply refer to either (or even both) as simply “Flash”. How confusing for users just starting their journey! The “Flash Professional” designation itself was always an odd one as it emerged when Macromedia decided to offer it alongside of a “Flash Standard” edition. Generally, most people in the community of users simply ever refer to the application as “Flash” anyhow… and none of this really makes sense any longer, given the platform agnostic nature of Animate CC.

What does all this mean for Flash Player and AIR? Nothing has changed in terms of what can be accomplished with these targets in regard to previous versions of the application. In fact… all of the enhanced drawing tools and additional features that will be soon available can absolutely be used when targeting ActionScript-based .fla documents.

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.

All platforms benefit from new tooling and enhancements present in Animate CC! The message that is most important in regard to this subject is that Flash Player and AIR remain two targets among many – just as it has been with recent versions of Flash Professional CC. The Flash Runtimes are absolutely supported within Animate CC and will continue to be supported in the same way. These runtimes are very important to a lot of people and Adobe will not abandon them. I have a few more words on the subject of Flash Player and AIR below, suffice to say that these targets exist within Animate CC and remain a first class target platform.

1441905319366On a personal note… I feel really quite validated by this change. I have been pressing the fact that Flash Professional is one of the most creative tools out there… with lengthy emails documenting this struggle over the past few years. The variety of different project types available to us as creative people through this single application is astounding. Many of us have been holding high the banners for Flash Professional even when much of Adobe has refused to even notice them laying trampled and broken in the mud. Our work around these technologies has been marginalized and diminished – yet many have not given up. There have been handfuls of supporters who have fought alongside us in this effort – some within Adobe but most on the outskirts just building cool stuff every day despite what we’ve had to deal with.

Today… things have changed. Drastically. Flash Professional, as Adobe Animate CC, is now poised to regain its proper place aside such giants as Illustrator and Photoshop as a top tier application in the Creative Cloud portfolio. Kudos to Adobe for making some really good decisions around Flash Professional – and where to invest resources for future innovation. No more messing around… let’s create some amazing experiences regardless of platform! Choice in technology is a grand thing – and POWERFUL.

Adobe re-commits to Flash Player and AIR

Flash Player and AIRThe Adobe Runtimes, Flash Player and AIR have had a rough couple of years. There has bee no other technology which has seen such an amount of literal death threats against it than Flash Player. However, both runtimes manage to survive… and even thrive across certain segments of distribution.

Casual gamers experience Flash Player every day through their interactions across the Facebook platform.Those with small children understand how important Flash Player is when completing learning exercises through a Chromebook. Those playing console games may not know it, but the menus and HUDs are often created using Flash technology. Speaking of mobile – for the past two years Adobe AIR has won awards as the best cross platform mobile application development platform!

  • Flash Player is build into every current version of Google Chrome, Microsoft Edge, and Internet Explorer.
  • Flash Player remains an integral part of the Google Chromebook experience.
  • Flash Player for other browsers is downloaded over 1.2 billion times every month from Adobe’s servers. This is in addition to what is stated above.
  • Adobe AIR has seen over 4 BILLION application installs in the past couple of years.
  • There are over 200,000 Adobe AIR applications available for both Apple iOS and Google Android.
  • A number of 3rd party projects continue to make use of ActionScript, Flash Player, or AIR: Apache Flex and FlexJS, RedTamarin, and others.
  • Even the very DNA of the web has been affected by these technologies as HTML5, JavaScript, and related technologies absorb capabilities first introduced through the runtimes. Flash is absolutely everywhere!

Adobe has announced today that they have partnered with Facebook alongside existing partners such as Microsoft and Google to assist with the Adobe Runtimes moving forward!

“While standards like HTML5 will be the web platform of the future across all devices, Flash continues to be used in key categories like web gaming and premium video, where new standards have yet to fully mature. Moving forward, Adobe is committed to working with industry partners, as we have with Microsoft and Google, to help ensure the ongoing compatibility and security of Flash content. In that spirit, today we are announcing that we are working together with Facebook to help ensure Flash gaming content on Facebook continues to run reliably and securely. As part of this cooperation, Facebook will report security information that helps Adobe improve the Flash Player.”

There is truly nothing like Flash Player and AIR.

Edge Animate and the Edge Suite

Edge AnimateWith all these good announcements also comes the bittersweet news that Adobe is no longer going to be actively developing Edge Animate (and the entire suite) and is working toward integrating the more successful concepts from these tools into the major desktop applications. Some examples of this include .oam output from Animate CC, device preview in Photoshop CC, visual breakpoints in Dreamweaver, et cetera.

I’ve been a big supporter of Edge Animate… having been an active member of the early advisory board for “Edge”, writing two books and authoring a number of courses and standalone tutorials on the product, and even teaching a university class on Edge Animate for the past four years… I’ve placed a lot of time and love into this product. Part of me is quite sad to see development come to a close.

With so many great libraries out there which can animate DOM elements, it really doesn’t require a tool to do so. Where a tool is required is for complex animations and interactions which are rendered within HTML5 Canvas. This is where Flash Professional CC (now Animate CC) has always had the upper hand.

Moving Forward

51XhAEoe3EL._SX402_BO1,204,203,200_Over the past few months, I have been working on a good number of resources in support of these changes. Having published content on Flash Professional earlier this year for BrainBuffet, Train Simple, and… I happen to know that ALL of these publishers are interested in more material focusing on Animate CC! In addition to this, I’ve written what will be the very first book on Animate CC to be published soon by Adobe Press and Peachpit. I’ve also recorded a good amount of video content in support of Animate CC and the transition to come. Please join me in enthusiastically embracing this change – advancing these technologies and tools to the forefront of the creative community!

Additional Resources (updated 12/14/2015)

I’m adding this section post-publication to include helpful links and other resources around these subjects as they come to my attention.

Official Adobe Announcements

Helpful Community Resources

Why Flash Professional Still Matters for the Web and Beyond

Adobe has placed some very significant effort into making Flash Professional a multi-platform, target-agnostic animation and asset creation tool. The results — are spectacular! No longer constrained to a single platform and budding with new creative tooling; Flash Professional has become an animation and interactivity powerhouse.

Join Joseph Labrecque, Adobe Community Professional and author of the new course “HTML5 Canvas and WebGL in Flash Professional CC” for an overview on using Adobe Flash Professional CC 2015 to publish content for HD Video, HTML5 Canvas, WebGL, animated SVG, and more! Give Flash Professional another look — and spread the word.

Presentation for Adobe Community groups.