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.

With nearly every new Animate release, users receive access to new features and improved workflows. Since the previous major release, which was Animate 2022 in October 2021, there have been important features added to the software that both new and seasoned users should know about. We’ll go over each of these features now, but we’ll work with many of them more thoroughly in subsequent chapters of this book!

Flexi Bones

A new type of bone has been added to the Warped Object rigging called the Flexi Bone. This is in addition to the existing Hard Bones and Soft Bones tools released in the previous version of the software. Flexi Bones give you the greatest amount of control when animating through modern rigging workflows, as they are modified via Bezier curves – similar to the Pen tool.

Figure 1.9 – Flexi Bones in use upon a Warped Object

The Bezier handles that protrude from each joint allow controlled curvature to its related bones.

Envelope Deformers

Prior to this new release, when working with the mesh distortion of a warped object, we had little control over the object path when deforming objects with pins or bones. With the inclusion of Envelope deformers, anchors will appear along the path of a Warped Object and Bezier handles can then be adjusted in a similar way to Flexi Bones. The combination of both of these features provides a very fine level of control to your rigged animation!

Figure 1.10 – Warped Object Envelope Deformers

The inclusion of Envelope Deformers allows an even finer degree of control over the mesh distortion of a Warped Object.

Rig Edit Mode

The new Rig Edit Mode can be used to add to or otherwise modify the underlying rig structure of an existing Warped Object armature. Before this feature’s release on Animate, it wasn’t possible to perform edits to an existing rig in a simple way without, at the same time, complicating the associated mesh and underlying artwork. A dedicated mode for editing your Warped Object rigs makes this process much easier and has benefits that go beyond the previously available methods.

Figure 1.11 – Rig Edit Mode

Being able to efficiently edit a preexisting rig in this way provides much flexibility in the modern rigging process.

Warped Shapes and Warped Bitmaps in the Library Panel

Similar to symbols, Warped Objects can now be managed and edited within the Library panel. Warped Objects take the form of either Warped Shapes or Warped Bitmaps depending upon their contents, but are both managed in the same exact way.

Figure 1.12 – Warped Objects in the Library panel

The ability to treat Warped Objects like symbols is a huge improvement for associated workflows.

In this section, we touched upon the new features of Adobe Animate 2023. Many of these features will be expanded upon in great detail during both Chapter 7, Creating and Manipulating Warped Objects, and Chapter 8, Modern Rigging Techniques. Coming up, we’ll jump in with a quick-start exercise and we will create a simple animation using the Assets panel.

To close out this first chapter, we are going to get hands-on with Animate and build a quick animation using existing assets. Animate comes loaded up with a set of static, animated, and sound assets that are accessed from the Assets panel. We can use these assets to arrange something very quickly – even without knowing how to animate with the software. We’ll also use this opportunity to configure the Animate interface and get familiar with many of its aspects.

Creating a New Document

We’ll first create a new ActionScript 3.0 document from the various presets available to us in Adobe Animate. The New Document dialog includes a series of categories containing focused sets of presets to be used. You can access this dialog by choosing File | New or by clicking the Create New button on the welcome screen.

Whichever method you choose, the New Document dialog will appear:

Figure 1.13 – The New Document dialog

With the New Document dialog open, we are ready to choose a preset. Along the top, you’ll find six categories: Character Animation, Social, Game, Education, Ads, Web, and Advanced. Next, follow these steps:

1. Ensure that the Character Animation category is selected.
2. Locate the preset named Standard and select it. It will appear highlighted with a blue border.
3. The sidebar will change to display the details of our chosen preset. Note that the size of our document is 640 x 480, with an FPS value of 30. It’s fine to adjust the Frame Rate setting if you find that the playback requires a smoother frame rate or you have too many frames for your needs, but there is no need to make any adjustments to the width and height for this exercise.
4. Look below the Frame Rate setting and notice that there is a Platform Type selection box. If you interact with this control, you will see two choices: the default option of ActionScript 3.0 or HTML5 Canvas. Since we are exploring native Animate features, we want to be sure that ActionScript 3.0 is selected here.
5. When you are ready to create your document, click the Create button. A new document will open within Animate.
6. Be sure to save your new document as starter.fla by choosing File | Save from the application menu before moving on.

With that, our new document has been configured, saved, and is ready to be worked on:

Figure 1.14 – Our newly created starter document

A quick look at the Properties panel should confirm that all of the choices we’ve made regarding the width, height, FPS, and the target platform have been preserved.

While it is absolutely true that the Animate interface can be customized to create hundreds of variants depending on specific user preferences and workflows, it is a good idea to confirm that your settings match what you will see in the figures included in this book. Let’s now ensure that this is the case.

Adjusting the User Interface

How the Adobe Animate interface appears for you, at this point, will largely depend upon a single choice made when you first run the application from a fresh install. A dialog appears before anything else and asks a simple question, New to Animate?:

Figure 1.15 – The New to Animate? decision dialog

Answering Yes on this screen will create a default workspace within Animate that is simplified and caters to new users. Answering No will present a more traditional experience within the software.

You will either be taken to the Basic workspace with Beginner Preferences enabled or to the Essentials workspace with Expert Preferences enabled, as indicated in the following screenshot:

Figure 1.16 – The result of your choice

There are notable differences in the interface layouts and preferences depending upon your choice. For instance, the Basic workspace includes far fewer panels and the overall UI elements are given a Comfortable appearance. This means that the various icons, panel sections, and other elements are given a bit more space between them all. In addition, the Assets panel is given prominent placement and the Timeline view is set to Preview in Context, displaying each frame as a visual preview.

The Essentials workspace includes many more panels; in fact, it includes an entire column of additional panels along the right-hand side of the interface. The Properties panel is given prominence here and the Assets panel is grouped behind it. The UI elements are given a tighter, more Compact feel, with the icons and panel sections being given less space between them all. The Timeline view is also set to the much more traditional Standard setting, displaying keyframes rather than frame preview thumbnails.

Okay – so, what if your choice of start settings was misguided, or you simply want to switch? Don’t panic! It’s not that difficult to switch between the results you’ve been given. Again, Animate is highly customizable.

The first course of action will be to change your preferences settings. From the application menu, choose Animate | Preferences on macOS and Edit | Preferences on Windows. This will reveal a submenu, which includes the choice between Beginner Preferences or Expert Preferences. To follow along with this book and other references more closely, I suggest you switch to Expert Preferences:

Figure 1.17 – Switching to Expert Preferences

Once you switch your preferences settings in this way, the Animate interface should conform to your chosen settings and you are likely very close to getting Animate in proper shape. There are two additional items to check though, just to be sure.

The first additional item to check is your Workspace setting. In the upper right-hand area of the Animate interface is the Workspace switcher. The icon for this looks a bit like an application window:

Figure 1.18 – Switching the workspace to Essentials

Clicking on this icon reveals the available workspaces you can choose from.

Tip

When working through the steps alongside this book, I recommend that you choose the Essentials workspace if it hasn’t already been chosen.

The second additional item to look for is the Timeline view setting. In the upper right-hand corner of the Timeline panel is a small icon that looks like three lines stacked atop one another:

Figure 1.19 – Adjusting the Timeline view to Standard

All panels in Animate include this icon and clicking it reveals additional options for that specific panel along with a number of standard options, such as the ability to close the panel. You will want to make sure that Standard is chosen here, not Preview or Preview in Context. Additional options, such as a frame height of Short, Medium, or Tall, are left to your discretion.

Since your interface settings should now match what is shown within this book, we’ll next continue with our starter project and pull in some assets for assembly.

Assembling an Animation Using the Assets Panel

Now that we have created and saved our document and have verified and adjusted all of our preferences and workspace settings, it’s time to assemble a quick little animation using the Assets panel, the Stage, and the Timeline. Follow these steps:

1. Open the Assets panel by choosing Window | Assets from the application menu:

Figure 1.20 – The Assets panel

If the Assets panel is already open, it will be expanded or revealed. If it isn’t open, it will appear as a floating panel.

2. Expand the Static category and select Backgrounds from the drop-down menu:

Figure 1.21 – Viewing static backgrounds

A selection of pre-designed static backgrounds will appear.

3. Find a background you like and drag its thumbnail onto the Stage to place it within our document:

Figure 1.22 (a) – The background is placed upon the Stage

As you can see in the preceding figure, the largest visual portion of the Animate interface is the Document panel, which includes both the Stage and Pasteboard areas. Multiple documents can be opened simultaneously through a system of tabs that display the document name above this panel.

Each document also exhibits a Stage with a Pasteboard surrounding it. The Stage is effectively a viewable area through which any visual elements are displayed as you work on your project and when it is published. This is the only portion that will be visible to the viewer once a document has been published or exported. In the preceding figure, you can see a black border present, which indicates the boundary between these two elements.

Tip

You can show or hide content on the Pasteboard when working in Animate by toggling the Clip content outside the stage button at the top right of the Document panel:

Figure 1.22 (b) – The Clip content outside the stage button

It’s just to the left of the document-level zoom percentage.

Notice that in addition to content appearing across the Stage and Pasteboard that the Timeline also appears slightly different with the initial keyframe at frame 1 exhibiting a filled, black circle. This indicates that this keyframe has content present within it. This Timeline is where you control all of the layers within your project. They behave similarly to layers in other Adobe creative applications, such as Photoshop, in that the content of layers at the top of the layer stack will obscure content within the layers beneath. Layers can be created and managed from tools within this panel.

Let’s add another asset to our project. This time, let’s add an animated one:

1. Expand the Animated category and select Characters from the drop-down menu:

Figure 1.23 – Selecting an animated character

A selection of pre-designed animated characters will appear. Hovering over each thumbnail will display a preview of the animation.

2. Locate an animated character and drag it from the Assets panel and onto the Stage.

Figure 1.24 – The character is added to the stage as the timeline expands

Note that in the Timeline, an additional layer is added and now includes many more frames across time as well. More on this in a bit!

3. Click the Test Movie button in the upper right of the interface to have the project playback in a native preview window.

Figure 1.25 – Performing a Test Movie preview

You can close this window whenever convenient to return to Animate.

Congratulations – you have created a simple animation by using panels, layers, and the document stage.

You will have noticed that when placing your animated character onto the Stage that a new layer is created and the frame span of both layers grows to accommodate the length of the animation. Each layer in Animate includes a number of frames that span across the timeline. These frames can be basic frames to extend the content of that layer across time, keyframes, which designate some sort of change in properties, and various types of tweens to create motion across these frames.

With our starter project complete, next we’ll look at ways to quickly share and publish your creation with the world.

Using Social Share and Quick Publish

The social share and quick publish options allow us to produce content directly to some of the most common export formats. Both are accessed from the Quick Share and Publish menu in the upper right of the Animate UI – left of both the workspace switcher and the Play Movie button:

Figure 1.26 – Quick Share and Publish appears as a box with an upward arrow emerging from it

When you click this button, you gain access to the Social share (One click social media share) and Publish (Export in multiple formats) options:

Figure 1.27 – The Social share and Publish options

Choosing Social share will bring you to the next step in that process, which presents the choice of sharing directly to Twitter or YouTube, with more social channels coming soon:

Figure 1.28 – The Social share options

Selecting either of these two options will necessitate an authentication task, which allows Animate to publish directly to the selected platform on your behalf. You only need to provide permissions once for each social network as Animate will retain this connection.

Once authenticated, Animate generates the media in a format suitable for either channel and allows the inclusion of a small message (with hashtags, of course!) before posting. After the content is successfully posted to the chosen social channel, Animate lets you know through a small confirmation dialog – at that point, the media is live.

Choosing Publish leads to some alternative choices that depend on your document’s target platform. For instance, if you’re using HTML5 Canvas as a document type, you’ll get the option to publish an MP4 video file, an animated GIF file, or a set of files compatible with HTML/JavaScript:

Figure 1.29 – The Quick Publish options for HTML5 Canvas

However, if working from an ActionScript 3.0 document type as we are in this chapter, you’ll be presented with the option to publish video and animated GIF files – since a .swf file is no longer appropriate for public distribution.

In this section, we explored many of the interface features of Animate through the design of a simple animation using prebuilt assets and saw how to export and publish our project quickly through the software.

This was only the first chapter, but we have already gone over a lot of content and even designed a small project! You should now have a good understanding of the history of Adobe Animate and know about its current capabilities. You will also have a conceptual understanding of all the new features that have been released since the previous major version of the software. These features include a new bone type for Warped Object rigging called Flexi bones, which allow fine, Bezier control over bone curvature, and the ability to manipulate an object’s Distortion Envelope along its outer path through Bezier controls and anchor points to refine and control the envelope distortion bounds. The new features also include the existence of a new Rig Edit mode as a dedicated workflow for editing existing rigs in isolation, and the ability to manage and edit Warped Objects from the Library panel in a workflow very similar to how symbols are edited. We also performed a quick exercise using pre-designed assets in Animate to get a hands-on feel for the software.

In the next chapter, we’ll begin to explore Animate in earnest with a look at drawing and animating custom vector shape content.