Book Image

Adobe Animate 2022 for Creative Professionals - Second Edition

By : Joseph Labrecque
Book Image

Adobe Animate 2022 for Creative Professionals - Second Edition

By: Joseph Labrecque

Overview of this book

Adobe Animate is platform-agnostic asset creation, motion design, animation, and interactivity software. Complete with explanations of essential concepts and step-by-step walkthroughs of practical examples, this book will guide you in using Adobe Animate to create immersive experiences by breaking through creative limitations across every medium. We begin by getting up to speed with all that you need to know about Adobe Animate. You'll learn how to get started with Animate as a creative platform and explore the features introduced in its most recent versions. The book will show you how to consume and produce media assets for multiple platforms through both the publish and export workflows. Following this, you’ll explore advanced rigging techniques and discover how to create more dynamic animation with advanced depth and movement techniques. You’ll also find out how to build projects such as games, virtual reality experiences, and apps for various platforms as the book demonstrates different ways to use Animate. Finally, it covers the different methods used to extend the software for various needs. By the end of this Adobe Animate book, you'll be able to produce a variety of media assets, motion graphic design materials, animated artifacts, and interactive content pieces for platforms such as HTML5 Canvas, WebGL, and mobile devices.
Table of Contents (19 chapters)
1
Section 1 – Getting up to Speed
6
Section 2 – Animating with Diverse Techniques
13
Section 3 – Exploring Additional Platforms

Exploring the New Features of Animate

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

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

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

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

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

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

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

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

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

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

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.