You will need the following software and hardware to complete this chapter:

• Adobe Animate 2023 (version 23.0 or above)
• Refer to the Animate System Requirements page for hardware specifications, please refer to the Adobe Animate system requirements page: https://helpx.adobe.com/animate/system-requirements.html

Animate has a lengthy history that is full of growth, accolades, disappointments, crushing defeats, pivots, and at least one notable resurrection. To cover the entire history of this software would take a book in itself, so we’ll only touch on the relevant points here. However, it is important to know that beginning a new project in Adobe Animate is now a unique experience for its users. Without certain decisions being made by Adobe and the passion of the Animate community, this might not have been possible today.

A Bit of History

Animate began its journey as a simple vector graphics drawing program called SmartSketch, which was intended for use on stylus-based devices developed by a company called FutureWave. It soon gained such popularity that it was made available on both Windows and macOS with added motion capabilities and was given the name FutureSplash Animator. The rising popularity of the World Wide Web during this period led to the software pivoting to target this young medium through the use of a browser-based runtime.

This was the beginning of both the authoring software that we still use today and what eventually became the Flash Player browser runtime. The idea behind this pairing was that you could author your content using FutureSplash Animator and playback the content through a web browser using an installed extension – often referred to as a plugin. The capabilities of web browsers at the time were such that HTML was a simple markup language for semantic text declaration and hyperlinks. Technologies such as CSS and JavaScript didn’t even exist yet – even image files were barely supported! If you wanted a rich media experience on the web, you had to rely on browser plugins.

Macromedia acquired FutureWave (and FutureSplash Animator) in 1996 and rebranded the software as Flash – sort of a combination of the two names. They made huge investments in both the authoring software and web browser plugin, renaming the extension to Flash Player. Macromedia was also responsible for the ActionScript programming language and the expansion of the Flash Platform across a number of areas. This included both web and server implementations and it even took small steps into mobile.

From FutureWave to Macromedia and now to Adobe, Animate has changed a lot over the years!

Figure 1.1 – Over 25 years of Adobe Animate

In 2005, Adobe Systems acquired Macromedia and all of its properties (including Flash!) and have been the holders of this technology ever since. In the years under Adobe, Animate has seen great strides as well as some missed opportunities over the years.

On the one hand, the Flash Platform was greatly expanded upon under a number of proprietary and open-source initiatives – ActionScript 3.0 was released, and MXML/Flex was made much more accessible to many developers. We even had Flash Platform technologies integrated into nearly every piece of creative software Adobe distributes – for example, directly within the workspace panels of software such as Photoshop and Illustrator.

On the other hand, the push for Flash Player on mobile was so bungled that the platform could never recover from the fallout.

While Adobe did release a number of versions of Flash Player for Android and RIM/BlackBerry devices, they were never able to get the runtime on Apple devices such as the iPhone and iPad. Adobe eventually gave up on Flash Player on mobile altogether and decided to refocus its efforts on Adobe Integrated Runtime (AIR) – which allowed iOS, Android, and even Windows and macOS applications and games to be developed with Flash technologies. However, Adobe did continue to focus on Flash Player for desktop browsers and took a renewed interest in 3D and gaming technologies in the form of Stage3D.

Adobe made huge efforts with Flash Player at one point, developing Stage3D, concurrency, and other options designed to create a blazing-fast experience for the user that appealed to game developers.

Important Note

If you’d like to learn more about mobile Flash Player and AIR for Android, have a look at Flash Development for Android Cookbook by Joseph Labrecque. Also, visit https://www.packtpub.com/product/flash-development-for-android-cookbook/9781849691420 by Packt.

During this time, Flash Professional (the authoring software) was neglected quite a bit. The focus on mobile and developers left creative software such as Flash Professional with fewer resources, and once Adobe lost the war for mobile, the association of Flash Player with Flash Professional was one that even they had trouble justifying. Many expected Adobe to abandon the software entirely. But while Adobe was focused on developers during these years, animators were still making heavy use of Flash Professional to produce content for television, web, and film projects.

Tip

If you are curious about the television series that have used Animate, have a look at the resource at https://en.wikipedia.org/wiki/List_of_Flash_animated_television_series.

In late 2015, following a year or two of visible increases in both the creative feature set of the software and the inclusion of new target platforms such as HTML5 Canvas, Adobe announced that the next version of Flash Professional would be re-branded as Animate. The name change was primarily a way to let the world know that the software was no longer bound to a single platform (Flash) and that creative motion graphics and animation were going to be a big focus moving forward. Since that time, Animate has only gotten better, and it continues to be used by creatives and developers alike to target multiple platforms without restriction.

With the decline of Flash Player and the eventual removal of the runtime from web browsers, it has become increasingly difficult to play .swf files as originally intended. Thankfully, the .swf file format can also be used as a transport format, and other applications such as Adobe After Effects can use this as part of an animator’s compositing pipeline.

Figure 1.2 – Adobe Animate 2023

Animate 2023 is the latest release, and the major Animate features that have shipped over the past year will be detailed in this chapter.

Familiar Uses of Adobe Animate

With over 25 years of history behind it, Animate has been used in all sorts of projects. In recent years, as the focus of the application has moved from a purely Flash-based experience to one that is much more platform-agnostic and increasingly expansive, the creative possibilities have expanded as well. This is a great time for new users to learn the software and for those who may have used older versions of Animate to revisit it and see what is now possible.

Animation and motion design remain two of the biggest uses for Animate. People across the world are exposed to content created in Animate every day, and it’s likely they do not even realize it! This content is hosted on the web, streamed through subscription services, and can be viewed on a wide assortment of television channels.

Of course, many digital advertisements across web and mobile settings are also created with Animate. The software even has a number of presets that conform to such ad standards – making it easy to get going with this platform.

However, something that makes Animate unique is its ability to create dynamic and interactive content. Non-interactive animated features such as Star Wars: Galaxy of Adventures and My Little Pony: Friendship is Magic are all great, but Animate can produce rich, interactive content as well.

Dumb Ways to Die and Angry Birds are two well-known examples of interactive content created with the software. Animate – and Flash before it – has a long history of producing games and interactive applications. They have frequently been hosted on the web, utilizing Flash Player and HTML5 Canvas. But they have also been launched on Android and iOS – packaged natively for these platforms using AIR. In fact, YouTube originally got its start and saw such immense popularity thanks to Flash Player and owes much of its early success to what was made possible by these technologies.

So, Animate is unique and powerful due to its ability to combine both design and development capabilities seamlessly within the same environment.

In this section, we explored the history of Animate and gained an understanding of the ways in which it has changed identities over the decades. We also had a look at some of the common uses for the software. Coming up, we’ll have a look at the various document types and platforms supported by the software today.

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

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

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

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 Flash – SWF!

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

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

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.