Adobe Animate 2022 for Creative Professionals E-Book

Joseph Labrecque

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 454

Veröffentlichungsjahr: 2022

Beschreibung

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.

Leseprobe

Adobe Animate 2022 for Creative Professionals

Second Edition

Implement professional techniques and create vivid animated and interactive content with Animate

Joseph Labrecque

BIRMINGHAM—MUMBAI

Adobe Animate 2022 for Creative Professionals Second Edition

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Ashitosh Gupta

Senior Editor: Keagan Carneiro

Content Development Editor: Aamir Ahmed

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Rashika BA

Proofreader: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Nilesh Mohite

First published: February 2021

Second edition: January 2022

Production reference: 1011221

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80323-279-9

www.packt.com


This book is dedicated to everyone who has helped me along the way. I don't express my thanks enough and hope you all know in some way how grateful I am.

– Joseph Labrecque

Contributors

About the author

Joseph Labrecque is a creative developer, designer, and educator with nearly two decades of experience creating expressive web, desktop, and mobile solutions. He joined the University of Colorado Boulder College of Media, Communication, and Information as an instructor of technology for the Department of Advertising, Public Relations, and Media Design in Autumn 2019. His teaching focuses on creative software, digital workflows, user interaction, and design principles and concepts. Before joining the faculty at CU Boulder, he was associated with the University of Denver as adjunct faculty and as a senior interactive software engineer, user interface developer, and digital media designer.

Labrecque has authored a number of books and video course publications on design and development technologies, tools, and concepts through publishers including Packt, LinkedIn Learning (Lynda.com), and Adobe. He has spoken at large design and technology conferences such as Adobe MAX and for a variety of smaller creative communities. He is also the founder of Fractured Vision Media, LLC, a digital media production studio and distribution vehicle for a variety of creative works.

Joseph is an Adobe Education Leader, Adobe Community Professional, and member of Adobe Partners by Design. He holds a bachelor's degree in communication from Worcester State University, and a master's degree in digital media studies from the University of Denver.

I want to thank my wife, Leslie… and our daughters, Paige and Lily. Also, Poe. Good kitty.

About the reviewers

Matthijs Clasener was schooled as a multimedia designer. He now is a well-experienced educator at the Grafisch Lyceum Rotterdam, in the Netherlands.

He teaches media and design and is highly interested in animation. He takes the lead in the animation curriculum at his vocational career school, and Adobe Animate is of course one of the topics under 2D animation.

His lessons are characterized by interaction with students, gamification, and attempts at humor.

Matthijs is an Adobe Education Leader and is well known for his contributions to educational (online) events.

Johnathan Kuehl spotted a rare opportunity to use Animate (known as Flash at the time) to combine his graphic design, web, and animation skills all into one — which inspired him to start BlooVooDoo Studio back in the early 2000s.

Since then, Johnathan has developed creative solutions to unique problems for a variety of clients in all different types of industries. He has created engaging illustrated, animated, and interactive material for television, video games, advertisements, e-learning, apps, and more.

Johnathan is amazed every day at Animate's capability to bring a wide range of diverse content to life, and he looks forward to where the software will go in the future!

Table of Contents

Preface

Section 1 – Getting up to Speed

Chapter 1: A Brief Introduction to Adobe Animate

Technical Requirements

Understanding Adobe Animate

A Bit of History

Familiar uses of Adobe Animate

Exploring the New Features of Animate

Modern Rigging with Warped Objects

Layer Parenting Enhancements

Last Frame Options for Graphic Symbol Looping

Paint Fills Only Option when Drawing

Fill on Active Layer with the Paint Bucket Tool

Color Effect Tweening for HTML5 Canvas Documents

Asset Panel Updates

Keeping Up to Date with Animate Releases

Adobe Creative Cloud Desktop

Adobe MAX

Summary

Chapter 2: Exploring Platform-Specific Considerations

Technical Requirements

Exploring Animate Document Types

Flash Platform Runtimes

Branching Out to the Native Web

Open to Custom Platforms

Understanding ActionScript 3.0 Documents

Adobe Flash Player

The SWF File Format

The ActionScript Programming Language

Understanding HTML5 Canvas Documents

HTML and JavaScript

The Canvas Element

The CreateJS Libraries

Exploring the Adobe Integrated Runtime

Adobe AIR

Adobe AIR and ActionScript 3.0

Adobe AIR and HARMAN

AIR for Desktop

AIR for iOS

AIR for Android

Experimenting with Animate Beta Platforms

WebGL glTF – Standard and Extended

VR Panorama and VR 360

Summary

Chapter 3: Settling into the User Interface

Technical Requirements

Exploring the Animate interface

Important User Interface Elements

Choosing Your Start Settings

Changing Your Start Settings

Managing Workspaces and Panels

Using the Default Workspaces

Customizing the Workspaces

Saving a Custom Workspace

Managing Workspaces

Customizing the Tools and Timeline Panels

Customizing the Tools Panel

Exploring the Timeline Tools

Customizing the Timeline Tools

Managing Animate Preferences

Customizing Preferences

Keyboard Shortcuts

Managing Your Preferences

Summary

Chapter 4: Publishing and Exporting Creative Content

Technical Requirements

Publishing versus Exporting

Publishing your Projects

Exporting your Content

Differences between Document Types when Publishing

Publishing ActionScript 3.0 Documents

Publishing HTML5 Canvas Documents

Publishing AIR Document Types

Publishing Beta Document Types

Options for Exporting your Content

Exporting Video Files

Exporting Animated GIFs

Exporting Image File Sequences

Export Options from the Library Panel

Sharing Content as Animate Asset Packages

Social Share and Quick Publish

Social Share

Quick Publish

Summary

Section 2 – Animating with Diverse Techniques

Chapter 5: Creating and Manipulating Media Content

Technical Requirements

Working with Shapes

Understanding the Shape Tools

Creating a Shape for Animation

Animating with Shape Tweens

Exploring Shape Tween Properties

Manipulating Shape Properties across Tweens

Working with Symbols

Creating Symbols

Exploring Symbol Types

Animating with Classic Tweens

Using Classic Motion Guides

Exploring Classic Tween Properties

Summary

Chapter 6: Interactive Motion Graphics for the Web

Technical Requirements

Designing a Document for the Native Web

Creating a New Document for Digital Advertising

Importing External Content

Creating Text Objects

Animating with Motion Tweens

Building Symbols for use in Motion Tweens

Including Additional Library Items

Adjusting the Timeline

Animating with Motion Guides

Exploring Motion Tween Properties

Adding Interactivity with JavaScript

Writing Code with the Actions Panel

Summary

Chapter 7: Character Design through Layer Parenting

Technical Requirements

Working with Advanced Layers Mode

Assessing Layer Mode Benefits and Gotchas

Switching Between Layer Modes

Animating a Character with Layer Parenting

Preparing Assets for Layer Parenting

Establishing a Layer Hierarchy

Animating using Layer Parenting

Exploring Additional Character Animation Features

Making use of Graphic Symbols

Importing Audio for Stream Sync

Configuring our Graphic Symbol Frames

Assigning Visemes and Automating Lip Syncing

Summary

Chapter 8: Animating Poses with IK Armatures

Technical Requirements

Building an Armature using Inverse Kinematics

Understanding Inverse Kinematics vs. Forward Kinematics

Using the Bone Tool to Rig Symbol Instances

Refining the Rig Properties

Using Bone Tool to Rig Shapes

Animating an IK Armature

Creating Additional Poses

Managing Armature Poses

Sharing a Completed IK Rig

Saving a Rig for Reuse

Importing a Rig within the Assets Panel

Summary

Chapter 9: Manipulating Warped Objects through Advanced Rigging

Technical Requirements

Warped Objects and the Asset Warp Tool

Creating Distortion Meshes using Pins

Animating Warped Object Meshes

Animating Warped Objects using Armatures

Creating Armatures using Warped Objects

Animating with Modern Rigging Techniques

Summary

Chapter 10: Working with the Camera and Layer Depth

Technical Requirements

Understanding the Camera

Examining the Starter Project

Activating and Manipulating the Camera

Understanding and Manipulating Layer Depth

Activating the Layer Depth Panel

Modifying Layer Depth

Animating the Camera

Setting Camera Keyframes

Adding Motion and Easing to the Camera

Applying Layer Effects and Filters

Adding Effects to the Camera

Adding Filters to a Layer

Summary

Section 3 – Exploring Additional Platforms

Chapter 11: Developing Web-Based Games

Technical Requirements

Understanding the Game Concept

Starter Document Overview

Exploring the Timeline and Stage

Exploring the Project Library

Preparing the Game Timeline, Stage, and Library

Labeling the Timeline

Creating Dynamic Text and Clickable Overlays

Adding Linkage IDs within the Library

Programming the Game with JavaScript

Creating Global Variables

Programming the Start Screen

Programming Player Actions

Programming Enemy Behavior

Programming the Game Loop

Programming the End Screen

Finishing the Game Project

Summary

Chapter 12: Producing Virtual Reality Content for WebGL

Technical Requirements

Overview of Virtual Reality Documents

Managing Scenes for Virtual Reality

Capturing Photographs for Virtual Reality

Adding Textures to Virtual Reality Scenes

Adding Additional Content

Importing Transparent 3D Renders

Animating with the Asset Warp Tool

Animating the Spectre Warped Object

Writing Code for Virtual Reality Interactions

Moving from Scene to Scene

Interacting with Animated Objects

Refining Perspective within the VR View Panel

Summary

Chapter 13: Building Apps for Desktop and Mobile

Technical Requirements

Working with the Adobe Integrated Runtime

Installing an AIR SDK in Animate

Configuring an AIR for Desktop Project

Testing Your AIR Project

Building a User Interface

Working with Button Symbols

Using Components within an AIR Project

Exploring Advanced Movie Clip Symbol Settings

Programming an AIR Application

Establishing a Document Class

Writing ActionScript Code

Converting an AIR Application for Mobile Devices

Summary

Chapter 14: Extending Adobe Animate

Technical Requirements

Creating Custom In-App Tutorials

Writing JSFL Scripts

Understanding the Animate Custom Platform SDK

Summary

Other Books You May Enjoy

Section 1 – Getting up to Speed

Welcome to Adobe Animate 2022 for Creative Professionals! This book is divided into three sections, each containing a set of chapters that focus on a variety of fundamental topics. This first section of the book includes all the foundational and background content you must understand before tackling the more advanced chapters. You'll be introduced to a number of must-know concepts and related background information that will be steadily built upon as we proceed through the remainder of the book.

This section comprises the following chapters:

Chapter 1, A Brief Introduction to Adobe AnimateChapter 2, Exploring Platform-Specific ConsiderationsChapter 3, Settling into the User InterfaceChapter 4, Publishing and Exporting Creative Content

Chapter 1: A Brief Introduction to Adobe Animate

This chapter provides background information on Animate, discusses what it is used for in the industry, and explores some of its new features for 2022 and how to put them to use. When new features are released, the software release notes usually just aren't enough to give an in-depth description of how to use them – so, we'll explore each of the new features in-depth so that you can start using them right away. These include the new bone creation and rigging capabilities of the Asset Warp tool and Warped Objects, the last frame options for Graphic Symbol instance looping, and a set of convenient features for the Paint Bucket, Classic Brush, and Fluid Brush tools. We'll also cover some resources for keeping up-to-date with all things Animate. You'll come away from this chapter with a refreshed understanding of Animate as a creative platform for designers, animators, and developers.

After reading this chapter, you'll come away with the following skills:

Understand the history of Animate and what the software can be used for.Learn which features have been added to the software, what their purpose is, and how to put them to use.Know where to look for new releases and how to stay abreast of new resources for Animate, as well as its related software and the industry generally.

Technical Requirements

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

Understanding Adobe Animate

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

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

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.

Keeping Up to Date with Animate Releases

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

Summary

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!

Chapter 2: Exploring Platform-Specific Considerations

We will now spend some time exploring the various target platforms that are natively supported by Adobe Animate. To be successful with Animate, you must understand the underlying technologies involved in each platform and when to use one over another, as they each have their strengths and weaknesses. This understanding enables sound decisions when selecting a target document type upon starting a new Animate project.

We'll begin with an overview of the major platforms supported natively as publish targets within Animate. Following this, we can then explore the variety of document types that support and target different aspects of these platforms for a greater understanding of why you might use certain document types over others.

After reading this chapter, you will be able to do the following:

Understand the set of platforms native to Adobe Animate.Explore best practices around the ActionScript 3.0, HTML5 Canvas, and AIR document types.Employ recommendations around beta document types, including both Virtual Reality (VR) and WebGL (standard and extended).

Technical Requirements

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

Adobe Animate 2022 (version 22.0 or above).Refer to the Animate System Requirements page for hardware specifications: https://helpx.adobe.com/animate/system-requirements.html.

The code in action video for this chapter can be found here: https://bit.ly/3nnCM8X

Exploring Animate 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 basically 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 2.1 – 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 newer platforms have been added as to target native web technologies, such as the HTML 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 2.2 – New Document dialog – 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.

Flash Platform Runtimes

As we detailed in the previous chapter, Animate was once only able to author content for 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 2.3 – The Adobe Flash runtimes – Flash Player and AIR

Both publish targets are based upon ActionScript 3.0, but in Animate terminology, the ActionScript 3.0 document type publishes a .swf file for use with Flash Player or other external mechanisms.

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 with converting documents created with Flash Professional to HTML5. The project was codenamed Wallaby and only existed for a few years until other technologies and superior workflows took its place. Wallaby required an existing .fla file for conversion and only included about 50% of the capabilities of a Flash .swf file.

This was followed in 2012 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, and 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 – 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 document type within the software through the use of the HTML5 Canvas document type.

Since that time, Adobe and the CreateJS team have expanded capabilities and integrations to the point where HTML5 Canvas is one of the primary document types within Animate. For interactive, web-based content, HTML5 Canvas is the go-to document type.

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. We'll explore some basic information around these additional native web-based target platforms in a bit!

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

Figure 2.4 – Animate Custom Platform SDK

Using the Custom Platform Support Development Kit (CPSDK), anyone can create an extension that allows Animate users to target a platform of their own choosing. The CPSDK extends the power of Animate to new platforms, such as PixiAnimate and LottieFiles. 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 export and publish options. We'll look more deeply into different examples of extending Animate in Chapter 14, Extending Adobe Animate.

Note

Animate can be extended in various ways. It includes a JavaScript API (JSAPI) to automate actions in the user interface and the CPSDK to extend 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. Coming up, we'll have a look at the particulars around using ActionScript 3.0 documents.

Understanding ActionScript 3.0 Documents

It makes sense to first explore what was at one time the single target platform supported by Animate for most of its existence: Flash Player and the .swf file format. Since Flash Player is a runtime, it exists to execute a packaged set of assets and data in order to run a program. The .swf file format is basically a compressed little bundle of creative assets and code that Animate can publish for this purpose.

Note

ActionScript 3.0 used to be used to produce all sorts of rich, interactive content. With the deprecation of Flash Player in the web browser, however, the role of .swf has become more focused.

There is a bit of confusion around the naming of this document type within Animate, as you won't find a document type that targets "Flash Player" or "SWF" but rather "ActionScript 3.0" instead.

Figure 2.5 – The ActionScript 3.0 document type

Newcomers are often confused by this terminology and expect that, if creating an ActionScript 3.0 document, they will be writing code. While you can absolutely write full applications using this document type, it isn't necessary to do so.

ActionScript 3.0 documents are ideal for working in Animate when exporting to video or even for integration with After Effects and other compositing software. ActionScript 3.0 is the document most often chosen for creative, non-interactive content today. If you want to create interactive content for the web or other platforms, Animate can do those things too! You'll want to use other document types, such as HTML5 Canvas or AIR, for these purposes.

Okay, let's dig deeper through an overview of the technologies behind ActionScript 3.0 documents in Animate by exploring Adobe Flash Player, the SWF file format, and the ActionScript programming language.

Adobe Flash Player

There are a couple of different versions of Flash Player to