Book Image

Mastering Adobe Animate 2023 - Third Edition

By : Joseph Labrecque
Book Image

Mastering Adobe Animate 2023 - Third Edition

By: Joseph Labrecque

Overview of this book

Adobe Animate is a platform-agnostic asset creation application that enables you to create motion design and vector animations while facilitating interactivity across other Adobe software such as After Effects, Photoshop, and Illustrator. This book comes packed with explanations of essential concepts and step-by-step walk-throughs of practical examples, guiding you in using Animate to create immersive experiences and breaking the walls of creative limitations. In this third edition, you’ll begin by getting up to speed with the features of Adobe Animate. You'll learn how to set up Animate as a creative platform and explore the enhancements introduced in its most recent versions. The book will show you how to consume and produce media assets for different platforms through the publish and export workflows. You'll explore advanced rigging workflows and discover how to create more dynamic animations with complex depth and movement techniques. As the book demonstrates different ways of channeling your creativity through Animate, you'll be able to build projects such as games, virtual reality experiences, generative art, and apps for various platforms. Finally, this graphic design book covers the different methods used to extend the software to meet various user requirements. By the end of this book, you'll be able to produce a variety of media assets, motion graphic designs, animated artifacts, and interactive content pieces for platforms such as HTML5 Canvas, WebGL, and mobile devices.
Table of Contents (19 chapters)
1
Part 1: Getting Up to Speed
5
Part 2: Animating with Diverse Techniques
11
Part 3: Exploring Additional Capabilities

Choosing Between Document Types

While Flash Professional was, for years, focused entirely on the Flash Platform, Adobe Animate seeks to define itself as a platform-agnostic software application. This means that any target platform is welcome to be part of the publish pipeline – even those not traditionally associated with the software.

Even though Animate seeks to play well with any platform that wants in on the game, it does support a number of important platforms natively:

Figure 1.3 – The Publish targets native to Animate

Figure 1.3 – The Publish targets native to Animate

Today, Animate comes prepackaged with a number of target platforms for common usage. These include ActionScript 3.0, AIR for Desktop, AIR for iOS, AIR for Android, HTML5 Canvas, VR 360, VR Panorama, and WebGL glTF (in both standard and extended flavors). Some of these target platforms are still Flash-based, but most of the newer platforms have been added as target native web technologies, such as the HTML5 Canvas element with JavaScript, and include specifications such as WebGL and glTF to achieve some pretty neat stuff!

You can see all the available document types by choosing File | New from the application menu. or by choosing Create New or More Presets from the Home screen and then choosing the Advanced category of the New Document dialog.

Figure 1.4 – The New Document dialog – the Advanced presets

Figure 1.4 – The New Document dialog – the Advanced presets

The Advanced category of presets allows you to create a new document based upon a specific publishing platform, while the other category presets tend to only allow the choice of ActionScript 3.0 or HTML5 Canvas.

Tip

Within the New Document dialog, document types are listed under Platforms and Beta Platforms. You may need to scroll down to see them all. Any third-party platforms that have been enabled will show up even farther down the stack.

We’ll next proceed through an overview of the major platforms available in Animate today. These are all based upon the Flash Platform runtimes, native web technologies, and a set of beta platforms that extend these technologies.

Considering the Flash Platform Runtimes

As mentioned in the preceding section, Choosing Between Document Types, Animate was once only able to author Flash Platform technologies. You could create content to publish as a .swf file to be executed using Adobe Flash Player in the web browser. For a long time, that was pretty much it! Of course, Flash content was absolutely huge during that time and Flash Platform designers and developers had no problem with this popularity.

The Flash Platform covers two main runtimes: the web-based Flash Player and the Adobe Integrated Runtime (AIR).

Figure 1.5 – The Adobe Flash runtimes: Flash Player and AIR

Figure 1.5 – The Adobe Flash runtimes: Flash Player and AIR

An ActionScript 3.0 document within Animate publishes a .swf file for use with Flash Player or other external mechanisms. There are a couple of different versions of Flash Player to know about. There is, of course, the once-ubiquitous web browser plugin that was finally deprecated on December 31, 2020, after years of being a staple web technology and even being built directly into major browsers such as Google Chrome and Microsoft Internet Explorer due to its status as a de facto standard.

Adobe announced that Flash Player in the web browser would be deprecated way back in 2017 and we should assume from now on that no user will be able to run such content through the browser plugin.

The reasoning behind this decision was stated that native web standards such as HTML5, WebGL, and WebAssembly had reached a point of maturity that they could now be relied upon to serve the same (or similar) needs that Flash Player in the browser had fulfilled in years past, thus making Flash Player redundant.

The web browser is only part of the story, though. There are also standalone and debug versions of the Flash Player runtime, which can operate outside of the browser environment. A good example of this is the Flash Player that is built into Animate itself. Whenever a Test Movie action is performed from an ActionScript 3.0 project, Animate opens a .swf file produced from your project within this version of Flash Player. It’s very convenient to be able to test your animated content directly within the authoring software in this way.

The .swf file extension is so named due to Macromedia wanting to extend its Shockwave branding that was being used by another software product, Director, to produce content that would run on the web. When Macromedia acquired FutureSplash Animator and renamed it Flash, they also named the files it produced Shockwave FlashSWF!

Figure 1.6 – ActionScript 3.0 produces an .swf file

Figure 1.6 – ActionScript 3.0 produces an .swf file

What made this file format so desirable for use on the web was that it could contain all sorts of media: vectors, bitmaps, sound, video, data, and program code. It did all of this in a very efficient way, as these files were known for being small in size and as such, quite suitable for transfer over the web.

With all major web browsers – and even Adobe – no longer supporting Flash Player in the browser, we’ve come to a very interesting point in time. Even with web browsers no longer supporting Flash Platform content, the .swf format and other files published in various forms using the platform are still usable for many purposes. These purposes include the format’s role as a motion graphics interchange format for other software, such as Adobe After Effects, as packaged projector content, and most importantly, as an application development platform in Adobe AIR with the ability to target macOS, Windows, iOS, Android, and more!

Branching Out to the Native Web

In 2011, Adobe began an experiment which involved converting documents created with Flash Professional to HTML5. The project was codenamed Wallaby and only existed for a year or two until superior tools emerged. Wallaby required an existing .fla file for conversion and only included about 50% of the capabilities of a Flash .swf file.

In 2012, this was followed by Toolkit for CreateJS, an extension that would allow Flash Professional users to export to HTML5 directly from the software without having to produce an intermediate .fla file. The problem with this mechanism was that it was an optional extension that users would need to install. It was still not tightly coupled with the authoring environment in the way that users would expect, and so was limited when compared to producing Flash content. Toolkit for CreateJS ran as an extension and appeared as a panel within the interface, which was very different from the normal publishing process.

Eventually, with the maturity of the CreateJS libraries, coupled with a more platform-agnostic approach to publishing within the software, Flash Professional made CreateJS a native platform within the software through the use of the HTML5 Canvas document type. Since that time, Adobe and the CreateJS team have expanded the capabilities and integrations to the point that HTML5 Canvas is now one of the primary document types within Animate. For interactive, web-based content, HTML5 Canvas is the go-to document type.

Figure 1.7 – HTML5 Canvas produces a bundle of native web files

Figure 1.7 – HTML5 Canvas produces a bundle of native web files

In addition, Animate can publish to the native web beyond the use of CreateJS through the use of the WebGL standard, alongside additional WebGL and VR JavaScript runtime engines.

Opening Up to Custom Platforms

We mentioned previously that Adobe Animate is a platform-agnostic software application. This is a pretty major change in the software since, for most of its existence, Flash Professional produced content that ran exclusively within Flash Player.

We’ve explained a bit about expanding to additional platforms with CreateJS and related standards, such as WebGL. But Animate actually goes even further by opening up the entire publishing API for anyone to incorporate their publish target platform of choice into the software.

Using the Custom Platform Support Development Kit (CPSDK), anyone can create an extension that allows Animate users to target any platform of their choosing. The CPSDK extends the power of Animate to new platforms, such as LottieFiles.

Figure 1.8 – Custom platforms can produce a variety of file types

Figure 1.8 – Custom platforms can produce a variety of file types

Support for these additional platforms is maintained and implemented by third-party developers engaged with those platforms. They generally supply Animate with either new document types or specialized export and publish options. We’ll look into different examples of extending Animate in greater depth in Chapter 13, Extending Adobe Animate.

Note

Animate can be extended in two ways, using the JavaScript API (JSAPI), which automates actions in the user interface, and the CPSDK, which extends the power of Animate to new platforms.

In this section, we had a brief introduction to the three main target platform types supported by Adobe Animate: Flash/ActionScript-based targets, HTML/JavaScript-based targets, and custom platforms. Next, we’ll see what is new in Animate 2023.