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

• Adobe Animate 2022 (version 22.0.2 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 to its users, and 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 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 play back 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, which 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 their properties (including Flash!) and have been holders of this technology ever since. In the years under Adobe, Animate has seen great strides, but also 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 their 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 from Packt:

https://www.packtpub.com/product/flash-development-for-android-cookbook/9781849691420

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 following 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:

Figure 1.2 – Adobe Animate being announced

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 was 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.

Note

The year 2021 marked 25 years of Animate – encompassing all of its identities over the years. From FutureSplash Animator to Macromedia Flash, then to Adobe Flash Professional, and all the way to the present with Adobe Animate – 2021 was a well-deserved milestone!

Figure 1.3 – Adobe Animate 2022

Animate 2022 is the latest release, and the major Animate features that have shipped over the past year will be detailed within 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 all over 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, with 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 common uses for the software. Coming up, we'll take a comprehensive look at the new features that were introduced between Animate 2021 and Animate 2022.

With nearly every new Animate release, users receive access to new features and improved workflows. Since the previous major release, which was Animate 2021 in October 2020, 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!

Note

Those of you who are coming to Adobe Animate for the first time should approach this section as a glimpse toward the sort of improvements and additions that are made during each release cycle. Those of you who are more seasoned users of Animate can use this section for a comprehensive rundown of changes to expect in this version of the software.

Modern Rigging with Warped Objects

While Animate has included the Asset Warp tool and warped objects for a couple of years now, this feature's initial set of capabilities was only a stepping stone to something much greater. With the release of Animate 2022 (version 22.0.2), the capabilities of this feature have been greatly expanded to include the rigging of warped objects through bones and joints, as well as a modernized rigging system.

When you select the Asset Warp tool from the toolbar, you can now set a number of new tool properties in addition to the previous options:

Figure 1.4 – The Asset Warp tool properties

As you can see in the preceding figure, the Warp Options have been expanded! Let's go over these options briefly:

• Mesh: Selecting this universal checkbox when using the Asset Warp tool allows you to view a mesh overlay over any warped object or to hide it to better see the artwork.
• Create Bones: We now have the option of creating bones within a warped object. Creating a branching set of bones will establish an armature. Toggling this option off will allow the creation of pins, as per the existing workflows in Animate.
• Bone Type: When the Create Bones toggle is enabled, you can choose between creating hard or soft bones. Each armature can have a mix of both bone types and they can be converted from one to another.
• Propagate Changes: If you have established keyframes in your timeline that are tied to the properties of a warped object, this will propagate any changes you make to various pins and bones across existing keyframes.

These are all tool-level properties. Once either pins or bones are established as part of a warped object, a number of properties can be tweaked that belong to each individual joint or handle.

Note

This feature was not included in the first version of Animate 2022 that was released but it was originally intended to be. It was released in a follow-up version (22.0.2). If you do not see these options in your installed version of Animate 2022 then check for an update!

In the following figure, you can see how pins now appear within a warped object and the various properties associated with them:

Figure 1.5 – Pins and Warped Object Properties

The Mesh Density Slider allows for finer control over the mesh deformation and how it impacts the underlying artwork. Just as we have been able to do in previous versions of Animate, we can set an individual pin's Handle Mode radio buttons to either Open or Fixed, depending on our needs. An open handle allows for a greater degree of freedom when making a transformation, while a fixed handle allows less movement but also allows for rotation around the pin. The other options shown in Figure 1.5 pertain only to bones.

In the next figure, you can see how the new bones appear within a warped object and the various properties associated with them:

Figure 1.6 – Bones and Warped Object Properties

Since this is also a warped object, we still get access to the same Mesh Density Slider control. Additionally, we can set any joint as a Freeze Joint, which pins it in place on the stage as immovable. The Handle Mode radio buttons function in a similar way to before, with the option of either open or fixed. However, it is not possible to perform rotations in this instance, as rotation is handled differently in the case of bones.

We have the option of using the Bone Type radio buttons to specify the bone type as either Hard or Soft, and an armature can contain a mixture of both types. Soft bones are great for things like ropes, tentacles, and that sort of thing – whereas hard bones are intended to work as more rigid structures. Note that there is also a Rotation Angle field that takes a numerical value that can be manipulated for each bone, and you might prefer to work in that fashion instead of through the onscreen overlays.

Even though the two previous figures showed the use of pins and bones separately, you can actually combine them both and include multiple armatures within the same warped object – it is an incredibly flexible system.

We'll examine these new capabilities in much greater detail in Chapter 9, Manipulating Warped Objects Through Advanced Rigging.

Layer Parenting Enhancements

Layer parenting itself is not new, but this release of Animate includes extended capabilities for this feature. When making use of layer parenting workflows, we now have the ability to scale, skew, and flip parent objects and have these properties propagate to their children.

Figure 1.7 – The Propagate Scale, Skew and Flip feature is activated by default

This feature can be toggled by holding the cursor down over the Layer Parenting toggle above the timeline and either checking or unchecking the option. You can also temporarily enable this functionality by holding the accent key (`) while performing these transformations.

Last Frame Options for Graphic Symbol Looping

Adobe has been slowly adding extra options for controlling graphic symbol instance playback through the use of keyframes. Since graphic symbols cannot be manipulated with code in any way, this is the ideal mechanism for providing such instances with specific behavioral instructions. With the new release of Animate, we now have the ability to define a last frame option along with the previously available first frame option, allowing us to specify a frame span as a looped region within any graphic symbol instance.

To further explain the usefulness of this property, consider the following figure:

Figure 1.8 – Deciding on a segment of the graphic symbol timeline to loop

If we wanted to have this animated character loop in the main timeline from frames 51 to 103, we'd need to add a lot of keyframes in the parent timeline to make it happen.

With the new last frame property, we can set all these options using only a single keyframe through either the Object tab of the Properties panel or even the integrated Frame Picker panel:

Figure 1.9 – The Last frame option can be chosen from the Properties panel or the Frame Picker panel

Setting both a first and last frame value and setting the behavior to loop effectively creates a looping region of the internal graphic symbol timeline that is all controlled from a single keyframe.

Paint Fills Only Option when Drawing

Throughout its history, Animate has had a number of brush modes to choose from when using certain tools (such as the Classic Brush tool, or the newer Fluid Brush tool). These brush modes include Paint Normal, Paint Behind, Paint Selection, and Paint Inside. Depending on the brush mode that is selected, the brush will apply to certain portions of the artwork and avoid others.

A new brush mode, Paint Fills Only, has now been added alongside the existing options. This has now been added to the brush modes dropdown in the Classic Brush and Fluid Brush properties:

Figure 1.10 – The Paint Fills Only brush mode

This new brush mode is designed to speed up shading workflows by affecting only existing fills on the active layer.

Fill on Active Layer with the Paint Bucket Tool

The active layer in an Animate timeline is the layer that is currently selected. A new option exists when using the Paint Bucket tool that will apply the Paint Bucket to the active layer only.

This can be activated from the Paint Bucket Options section of the Tool properties in the Properties panel if the Paint Bucket tool is selected:

Figure 1.11 – The new Fill on Active Layer option for the Paint Bucket tool

With this option selected, the Paint Bucket will only be applied to content within the active layer.

Color Effect Tweening for HTML5 Canvas Documents

Before this release of Animate, when a Color Effect was applied to a tweened symbol instance within an HTML5 Canvas document, upon publication, the appearance would be frozen at the first frame of the tween. In other words, color effects could not be animated at all using this document type.

However, now any color effect applied to a symbol instance can be tweened with the confidence that the animation will continue to exist – even within the published version of the HTML5 Canvas project:

Figure 1.12 – Color effects can now be tweened in HTML5 Canvas documents

When published, any color effects in HTML5 Canvas documents are now properly tweenable.

Asset Panel Updates

Adobe has made the workflow for using assets from within the Assets panel a simpler process by automatically increasing the timeline frame span when an animated asset is placed on the stage for the first time. This removes the step that was previously required for the user to make many of the assets actually animated.

To make use of this feature, you simply need to drag animated content from the Assets panel to the stage:

Figure 1.13 – Automated timeline frame span expansion

The existing frame span is automatically expanded based on the chosen asset's internal timeline length.

In this section, we took a comprehensive look at all the new features introduced in Animate over the past year. Next, we'll learn how to keep up-to-date with new versions of the software and any related industry activity.

As we have seen, Animate receives a significant number of new features between major versions! It's always a good idea to be aware of the changes introduced in any software – this helps you reap the benefits of new functionality and stay up to date on things like compatibility with other software. Aside from the software itself, it's also beneficial to understand how people are using the software and general thoughts around intersections will stay in touch with others in the industry.

Adobe Creative Cloud Desktop

Just like any other Adobe Creative Cloud Desktop application, Animate is managed through the Creative Cloud Desktop application. You can download the desktop application from https://www.adobe.com/creativecloud/desktop-app.html – this works if you need to install it for the first time or if you need to perform a forced update.

The Creative Cloud Desktop application will alert you whenever a new version of Animate has been released:

Figure 1.14 – Adobe Creative Cloud for desktop

If you have the application installed, you can easily see whether Animate is up-to-date by viewing your installed applications.

Any applications that are up to date will indicate this, and any that have an available update will display that information as well:

Figure 1.15 – Animate is up to date!

This is a great mechanism for staying on top of new updates across all Creative Cloud software.

To manually check for updates, click the Updates tab along the side and locate the More Actions button on the upper right-hand side of the screen. Clicking this button allows you to either select Enable Auto Update or select Check for Updates. With the automatic update option disabled, you'll need to manually update Animate when a new version is released.

Adobe MAX

Generally, new versions of Animate (and most Adobe Creative Cloud software) are released at the annual creativity conference called Adobe MAX. You can learn more about Adobe MAX at http://max.adobe.com/ and even register to attend if it is the right time of year. Adobe MAX normally takes place in the autumn and runs for about 3 days.

It is a great place to learn more about Animate and other creative software while being inspired by industry experts:

Figure 1.16 – The Adobe MAX creativity conference logo

Animate 2021 was released at Adobe MAX 2020 and Animate 2022 was released during Adobe MAX 2021. You can see how important this conference is to Adobe and its release strategy!

In this section, we discovered how to keep Animate updated and also how to explore any news and related ongoings in the wider Adobe community.

This was only the first chapter, but we have already gone over a lot of content! You should now have a good understanding of the history of Adobe Animate and know about its current capabilities. You will also have an excellent understanding of all the new features that have been released since the previous major version of the software. These features include being able to use bones within warped objects, the functionality to implement a graphic symbol instance loop with the last frame option, and new options for the Paint Bucket tool and various other brush tools. We also covered some good places to look to ensure your installation of Animate remains up to date and that you stay abreast of any changes to the software.

In the next chapter, we'll explore the various target platforms supported by Animate. Get ready to learn about HTML5 Canvas, ActionScript 3.0, AIR for desktop, WebGL glTF, and more!