Mastering Adobe Animate 2021 E-Book

Joseph Labrecque

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

Seitenzahl: 416

Veröffentlichungsjahr: 2021

Beschreibung

Adobe Animate is platform-agnostic asset creation, motion design, animation, and interactivity software. Complete with step-by-step explanations of essential concepts, practical examples, and hands-on walkthroughs, this book shows you how to use Adobe Animate to create immersive experiences by breaking through creative limitations across every medium.
You will begin by getting up to speed with what you need to know about Adobe Animate quickly. Next, you will learn how to get started with Animate as a creative platform and explore the features introduced in the most recent version of the software. Moving on, you'll consume and produce media assets for multiple platforms through both the publish and export workflows. Following this, you’ll delve into 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. The book concludes with an examination of different methods used to extend the software for various needs.
By the end of this book, you'll be able to produce a variety of media assets, motion design materials and animated artifacts, and interactive content pieces - all while targeting a variety of platforms including HTML5 Canvas, WebGL, and mobile devices.

Leseprobe

Mastering Adobe Animate 2021

Explore professional techniques and best practices to design vivid animations and interactive content

Joseph Labrecque

BIRMINGHAM—MUMBAI

Mastering Adobe Animate 2021

Copyright © 2021 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: Ashwin Nair

Publishing Product Manager: Rohit Rajkumar

Senior Editor: Hayden Edwards

Content Development Editor: Aamir Ahmed

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Kinjal Bari

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Aparna Bhagat

First published: February 2021

Production reference: 2050221

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80107-416-2

www.packt.com

This book is dedicated to those who search for a deeper insight... in all things.

-Joseph Labrecque

Packt.com

Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionalsImprove your learning with Skill Plans built especially for youGet a free eBook or video every monthFully searchable for easy access to vital informationCopy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Foreword

I have known Joseph Labrecque for about seven years now. He is believed to be one of the leading experts in the field of digital animations. His videos, books and lectures about Adobe Animate have provided immense help to those interested in creating animations with the product.

In this book, Joseph helps you get started with the basics including the types of content you can create including character animations, interactive animations, games, web content and more. He goes over the tips and techniques of creating animations with the product and then the ability to export them to various platforms. It is a book that will help you gain a deeper understanding of the various workflows and platforms that will allow you to express yourself freely and create amazing animations that suit your style on a platform and device of your choice.

Ajay Shukla

Group Product Manager, Adobe Animate

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

Joseph has authored a number of books and video course publications on design and development technologies, tools, and concepts through publishers which include Packt, LinkedIn Learning (Lynda.com), Peachpit Press, and Apress. 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 would like to thank my wife, Leslie… and our daughters, Paige and Lily. It's been a weird couple of years!

About the reviewer

Matthijs Clasener was schooled as a multimedia designer. He now is a well experienced educator at the Grafisch Lyceum Rotterdam, The Netherlands. He teaches media and design subjects and is highly interested in animation. He takes the lead in the animation curriculum at this vocational career school. Matthijs is an Adobe Education Leader and is well known for his contributions to educational (online) events. Through his own company Cutaway, he develops courses on nearly all of the Adobe tools.

Packt is searching for authors like you

If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

Table of Contents

Preface

Section 1: Getting Up-To-Speed

Chapter 1: A Brief Introduction to Adobe Animate

Technical Requirements

Understanding Ado be Animate

A Bit of History

Familiar uses of Adobe Animate

Exploring New Features of Animate

Assets Panel

Social Share and Quick Publish

Timeline and Symbol Enhancements

Advanced Rigging

Auto KeyFrame

Hands-on Tutorial Creator

Selective Texture Publishing

New Canvas Blend Modes

Stream Audio Sync in Canvas

Enhanced Video Export

Keeping Up to Date with Animate Releases

Adobe Creative Cloud Desktop

Adobe Blog

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 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 Workspace

Saving a Custom Workspace

Managing Workspaces

Customizing the Tools and Timeline panels

Customizing the Tools Panel

Exploring the Timeline Tools

Customizing the Timeline

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

Publish Settings Differences between Document Types

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

Summary

Section 2: Animating with Diverse Techniques

Chapter 5: Creating and Manipulating Media Content

Technical Requirements

Working with Shapes

Understanding the Shape Tools

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 versus Forward Kinematics

Using the Bone Tool to Rig Symbol Instances

Refining the Rig Properties

Using the 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: Working with the Camera and Layer Depth

Technical Requirements

Understanding the Camera

Examining the Starter Project

Activating and Manipulating the Camera

Understanding and Manipulating the Layer Depth

Activating the Layer Depth Panel

Modifying the 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 10: 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

Summary

Chapter 11: 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 Warped Objects

Writing Code for Virtual Reality Interactions

Moving from Scene to Scene

Interacting with Animated Objects

Refining Perspective within the VR View Panel

Summary

Chapter 12: 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 13: 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 Mastering Adobe Animate 2021! This book is divided into three sections, each containing a set of chapters that focuses 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 foundational concepts and background information here that will be 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, what it is used for in the industry, and specifics around the new features in Adobe Animate 2021 and how to put them to use. When new features are released, the software release notes usually just aren't enough, so we'll explore each of the new features in depth so that you can start using them right away, including the new Assets panel, rig management, quick publish options, timeline and symbol features, and even the new capabilities around creating your own in-app tutorials. We'll also cover some resources around 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 stay abreast of new resources around Animate, related software, and the industry.

Technical Requirements

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

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

Understanding Adobe Animate

Adobe 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 upon certain, relevant points here. It is important to know, however, that beginning a new project in Adobe Animate is now a unique experience that, without certain decisions by Adobe and obvious passion from the community of users, might not be possible today.

A Bit of History

Animate began its journey as a simple vector graphics drawing program called SmartSketch 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 blossoming popularity of the World Wide Web at this time led to the software pivoting to target this young medium through the use of a browser-based runtime.

This was the beginnings of both the authoring software that we still use today and what eventually became the Flash Player browser runtime. The idea was that you could author your content using FutureSplash Animator and play back the content through the 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 sematic text declaration and hyperlinks. Technologies such as the current iterations of 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 such 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 the authoring software and web browser plugin, renaming it to Flash Player. Macromedia was also responsible for the ActionScript programming language and the expansion of the Flash Platform across a number of areas, including web, server, and even small steps into mobile.

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

Figure 1.1 – 25 years of Adobe Animate

In 2005, Adobe Systems acquired Macromedia and all their properties (including Flash!) and have been holders of this technology ever since. Under Adobe, we've seen both great strides and seriously 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 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 the Adobe Integrated Runtime (AIR), which allowed iOS, Android, and desktop applications and games to be developed with Flash technologies, and Flash Player on desktop browsers with a renewed interest in 3D and gaming technologies in the form of Stage3D.

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

Important Note

If you'd like to learn more about mobile Flash Player and AIR for Android, have a look at the book 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 actually using Flash Professional heavily to produce content for television, web, and film projects.

Tip

If you are curious about what television series make use of Adobe Animate, have a look at the following resource: https://en.wikipedia.org/wiki/List_of_Flash_animated_television_series.

In late 2015, following a year or two of a visible increase 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 rebranded as Adobe Animate:

Figure 1.2 – Adobe Animate is 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 continues to be used by creatives and developers alike to target multiple platforms without restriction:

Note

The year 2021 marks 25 years of Adobe Animate through all its various identities over the years, from FutureSplash Animator to Macromedia Flash and Adobe Flash Professional, all the way to the present with Adobe Animate. A well-deserved milestone!

Figure 1.3 – Adobe Animate 2021

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

Familiar uses of Adobe Animate

With 25 years of history behind it, Adobe 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 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 the software to revisit it and see what is now possible.

Animation and motion design remain two of the biggest uses of the software. People all across the world are exposed to content created in Animate every day and likely 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 the web and mobile 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.

One of the things that makes Animate unique, however, is its dynamic and interactive capabilities. 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 games and interactive applications hosted on the web with Flash Player and HTML5 Canvas, but also on Android and iOS, as packaged natively for those platforms using AIR. In fact, YouTube got its start and saw such immense popularity thanks to Flash Player and what was made possible through these technologies.

Again, 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 Adobe Animate and gained an understanding of the many reasons it has changed identities over the decades. We also had a look at some common uses of the software. Coming up, we'll take a comprehensive look at the new features that were introduced between Animate 2020 and Animate 2021.

Exploring New Features of Animate

With nearly every new Animate release, users receive access to new features and improved workflows. Since the release of Animate 2020 in November 2019, there have been a large number of features added to the software that users should know about. We'll go over each of these features now, and will work with some more thoroughly in subsequent chapters of this book!

Assets Panel

While Animate has had a Library panel for most of its existence, it is just used on a per-document basis to contain assets such as bitmap images, sound files, and internal symbols, and once that document is closed, you'd need to open it back up again to transfer any assets between documents for reuse.

Tip

If the Assets panel is not visible within your chosen workspace, you can enable it by selecting Windows | Assets from the app menu.

The new Assets panel works differently from the Library panel in that it contains a persistent set of assets that exist apart from any single document. When you first use the panel, it is prepopulated with a library of material from Adobe, but the real power of this panel comes into play once you create your own custom collection of assets and include them in the panel. Managing important assets in this way allows quick access to them, no matter what document you might be working in at any one time.

Assets are organized into main categories that include Animated, Static, and Sound clips:

Figure 1.4 – Assets Panel

You can search the panel for keywords and tags or expand a number of subcategories to find what you need.

Managing Animate Assets

Assets are managed externally from the Animate program itself by exporting them as .ana(Animate asset) files. You can generate and export .ana files from any project library and even export a full scene as a single .ana file.

Note

You might expect an Animate authoring file to hold the .ana extension, but the extension for an authoring file is actually .fla! The reason for this is due to Animate formerly being known as Flash Professional.

To export content as an Animate asset file from the library, select the asset you want to export and open the right-click menu:

Figure 1.5 – Asset generation

Choose the Export Asset option and follow the prompts to specify what to include and how to tag your asset for organizational purposes:

Tip

You can also generate assets for use immediately within the Assets panel and avoid the intermediate .ana file format by simply choosing Save as Asset instead of Export Asset from the Library panel.

Upon initial installation, Animate includes a small number of default assets within the Assets panel. Adobe makes additional assets available through a download mechanism available at the bottom of the panel. It appears as a small cloud with a downward-facing arrow. If additional assets are available for download, this icon becomes brightly colored and you can then click on it to download additional assets from Adobe's servers.

Tip

It is also possible to delete assets from the Assets panel that you no longer need. Right-click on the asset you want to remove and choose Delete for the right-click menu that appears. Note that you can also rename assets in this way!

Anyone with a recent copy of Animate can then use the Assets panel to import prepared assets into the Custom area of the Assets panel.

Social Share and Quick Publish

Traditionally, there have been two primary methods for generating distributable content from an Animate document.

The first way would be to publish your content, and what form the published content takes would be tied directly to the document target type. Examples of this would include the following:

HTML5 Canvas publishes to HTML and JavaScript.ActionScript 3.0 publishes to Flash Player.WebGL glTF publishes to JavaScript.AIR for iOS publishes to an iOS app.

These are just a small set of examples to show a direct relationship between the chosen target platform and the resulting published file types.

The second way would be to export files derived from your Animate document through various export mechanisms found under the File | Export menu. These file types vary quite a bit from one another and are completely independent of the chosen document type. For instance, any document type in Animate can export content as a video file or animated GIF.

The new social share and quick publish options help to get around that confusion and publish directly to some of the most common formats, regardless of the traditional differences between exporting and sharing your Animate content. Both are accessed from the Quick Share and Publish menu at the upper right of the Animate UI, left of both the workspace switcher and the Play Movie button:

Figure 1.6 – 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.7 – Social share

Choosing either option will open a secondary menu of choices. Let's take a look at these options.

Social share

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.8 – Social share

Selecting either of these two options will necessitate an authentication task that allows Animate to publish directly on your behalf.

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 and the media is, at that point, live.

Quick Publish

Choosing Publish provides an alternative set of choices that depends somewhat on your document target platform.

For instance, if you're using HTML5 Canvas, 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.9 – Quick publish

However, if working from an ActionScript 3.0 document type, you'll be presented with only options for video and animated GIF, since a .swf file is no longer appropriate for public distribution.

Note

SWF files can be used in many different ways as part of an authoring workflow across applications such as Animate and After Effects, but are no longer able to be used in public channels due to web browsers no longer supporting Flash Player since December 31, 2020. Adobe no longer supports Flash Player in the web browser, but the format is thankfully still useful for advanced workflows.

Just as with the channel selection for social sharing, the quick publish options will likely change over time, especially as more targets are added to Animate.

Timeline and Symbol Enhancements

Almost every new release of Animate contains not just entirely new features but also quality-of-life improvements, which expand upon existing functionality in meaningful ways. This new version of Animate does an excellent job in this area, expanding and improving workflows across the timeline and symbols.

Converting Layers to a Symbol

Oftentimes when working in Animate, you'll find yourself having created some really engaging content in the main timeline that you then decide should have really been created within a symbol instead. At that point, you'll need to create a new symbol, then manually cut the layers you need as part of that symbol from the main timeline, and finally, paste these layers into the empty symbol itself. It can be a lot of work!

Thankfully, with this new version of Animate, converting layers to a symbol no longer has to be such a manual process.

We now have the ability to select the layers we want to convert to a symbol, open the right-click context menu from the selected layers, and choose the new Convert Layers to Symbol option:

Figure 1.10 – Converting layers to a symbol

The Convert Layers to Symbol dialog will then appear. It looks exactly like the dialog to either create an empty symbol or convert existing assets to a symbol:

Figure 1.11 – Convert Layers to Symbol Dialog

You can provide a symbol name, choose the symbol type, and even set the registration point for your new symbol.

Once you hit OK, the selected layers will be automatically transferred to the symbol's internal timeline and the original layers are replaced with a new layer containing an instance of the new symbol.

Converting Symbols to Layers

In a similar way, you can perform the inverse action on an existing symbol. Simply right-click on a symbol instance and choose Break Apart Symbol to Layers from the menu that appears:

Figure 1.12 – Breaking Apart a Symbol to Layers

New layers will be created, and the contents of the selected symbol will be placed in each layer with all properties intact.

Additional Looping Options for Graphic Symbol Instances

We also have additional looping options when working with graphic symbols. These small options will make long-time users of Animate very happy!

With a graphic symbol instance selected on the Stage, have a look at the Properties panel for Object properties and locate the Looping section:

Figure 1.13 – Graphic Symbol Looping Options

Now, this will only exist for graphic symbols, so any other type of object selected will not include this special section.

Notice the set of five buttons at the top of this section. Previous versions of Animate only included three options here:

Play Graphic in LoopPlay Graphic OncePlay Single Frame for the Graphic

There are now two additional options that will make things so much easier whenever you want to reverse the playback of a graphic symbol instance:

Play Graphic Reverse OncePlay Graphic in Reverse Loop

To reverse playback before these options, you'd need to enter the symbol, copy and paste keyframes and associated tweens, and finally, reverse the order of the keyframes to create reverse motion. The same effect can now be accomplished with the click of a button!

Copy and Paste Tween Settings

Animate has also improved the tween management controls in this new version (we will discuss tweening in more detail in Chapter 5, Creating and Manipulating Media Content). You now have the ability to copy and paste tween settings from one tween to another.

With a tween selected in the timeline, look at the Properties panel for Frame properties and locate the Tweening section:

Figure 1.14 – Copy and Paste Tween Settings

At the upper right of that section is now a small gear icon and clicking it gives you access to additional tween options, which allow you to choose Copy settings, Paste settings, or even Reset settings for the selected tween.

Advanced Rigging

Animate includes a variety of ways in which various structures can be bound together in some form of hierarchy to create a rig. The most common of these involve layer parenting through the use of Advanced Layers mode and Inverse Kinematics (IK) through armatures and poses. The expanded rigging system in Animate expands upon the use of IK armatures in order to isolate a rig independently from the visual assets for reuse across additional visual forms.

Note

The rigging process described here is in beta form as of the time of writing this book. Adobe intends to continue improving upon the rigging process, and rigs themselves, for subsequent releases of Animate.

Rig Mapping

The new Rig Mapping panel can be opened from the application menu by choosing Window | Rig Mapping.

This panel will also open automatically when selecting a rig for use within the Assets panel, as you must identify individual movie clip symbol instances to apply to specific bones of the rig armature:

Figure 1.15 – Locating Rigs within the Assets panel

Rig Mapping is, at this point, bound directly to Rigs available through the Assets panel. Of course, you can create and use your own rigs as assets as well!

To apply a rig from the Assets panel to a symbol instance, you must first double-click the instance to enter the symbol itself. Dragging and dropping a rig onto the Stage will then open the Rig Mapping panel and allow you to map certain visual elements, such as torso, arms, and legs, to the rig itself.

You simply click each bone in the Rig Mapping panel and then choose individual movie clip symbol instances within the containing symbol to associate each bone with a symbol instance in order for the system to recreate the armature:

Figure 1.16 – Applying a pre-built rig

Be sure to start with the root node and then branch off from there. Rigged bones will appear green, while unrigged bones are gray in color.

Once you've mapped all the necessary visuals to the rig, choosing ApplySkeleton will create an armature, with full animation if the Motion checkbox is selected, to your symbol instance.

When a skeleton has been completely applied to a set of objects, the rig will appear pink.

Tip

There is also a way to automatically map a rig to your symbol instance and avoid the manual mapping process. For this to work, be sure that each of the movie clip symbol instances that make up your visuals include instance names that are identical to those from the rig itself. This method bypasses the visual Rig Mapping panel workflow altogether but is very specific.

Bone Tool Enhancements

Since the current rigging model is based upon IK armatures, and in an effort to improve how this model functions, improvements have been made to the IK engine itself.

With this particular improvement, we have the ability to further refine our rigs and control constraints at the end of leaf nodes for our armatures. While constraints were available across other node types as part of an armature in the past, this extends that model all the way to the end of each branch.

Auto KeyFrame

Traditionally, when using a Shape Tween or Classic Tween, you had to manually create keyframes before making a change in the object properties on the Stage. This is normally done by selecting a frame location where you'd like to create a keyframe and choosing to insert a new keyframe from the buttons above the timeline, from the right-click menu, from the application menu by selecting Insert | Timeline | Keyframe, or by using the F6 keyboard shortcut. You then select that keyframe and modify the properties of your object on the Stage to create a change between the preceding keyframe and the one just created.

The new Auto KeyFrame option makes Shape and Classic Tweens behave closer to how Motion Tweens work, in that keyframes are created automatically as you adjust object properties across the timeline.

The Auto KeyFrame option can be turned on and off as desired from the Insert Frames Group drop-down menu:

Figure 1.17 – Auto KeyFrame

When enabled, you get a small, circular indicator that appears above any selected frame. This indicates that a keyframe will be created there if any object properties are changed.

Hands-on Tutorial Creator

Beginning with Animate 2020, Adobe began to ship a number of in-app tutorials within Animate. While this began with a set of 2 introductory tutorials, the selection has now grown considerably larger and includes 15 tutorials of varying complexity. These tutorials appear within the application directly, in the form of little card overlays on the application UI.

They can include text instructions, motion previews of the step in action, and the ability to navigate across the various steps of a tutorial:

Figure 1.18 – Steps appear as contextual cards within Animate

Each tutorial will contain a curated set of steps prompting the user to perform certain actions in order to provide a step-by-step walkthrough directly within the application.

Adobe-supplied tutorials can be activated under the Help menu by selecting a specific tutorial from the Hands-on Tutorial submenu:

Figure 1.19 – In-app tutorial selection

These tutorials are meant to showcase certain techniques within the application in a way that is visual, engaging, and reliant upon the wilful action of the user. The tools to build these same types of tutorials are now available to any Animate user through a built-in extension.

All you need to do to get started is open Window | Extension | Hands-on Tutorial Creator to access this feature:

Figure 1.20 – Hands-on Tutorial Creator Panel

With the panel open and ready, you'll then proceed step by step through the process, building out various cards that contain explanatory steps, preview images or animation, and contextual prompts anchored to the application interface.

We'll explore this feature in depth in Chapter 13, Extending Adobe Animate.

Selective Texture Publishing

When using an HTML5 Canvas document, if you select Texture from the Export as dropdown within the Image Settings tab under the publishing options, Animate will process your textures using new optimizations thawt aim to reduce the file size by only converting complex vectors to bitmap textures, while retaining simpler shapes as vector data.

While there are additional export options for images when publishing HTML5 Canvas documents, in order to make use of this feature, you must be sure to choose Texture as the others will not support the new optimizations:

Figure 1.21 – Selective Texture Publishing

Adobe claims that even with such optimizations, runtime performance remains stable.

New Canvas Blend Modes

ActionScript 3.0 remains the most powerful and flexible document type you can choose to work with in Animate. It is a format that grew alongside the software and, for a long time, was the only platform available! Adobe owned the format and could add to or make adjustments however they pleased, making it all very powerful.

HTML5 Canvas is based upon web standards and, as such, does not have a close relationship with Animate, nor the flexibility and power that comes with a proprietary format such as ActionScript 3.0 and Flash. Because of this, things move much more slowly, and HTML5 Canvas still has a long way to go before it gets even close to what a Flash-based SWF can do in many areas. A good example of this is blend mode support. For a long time, there were only a few blend modes that were available to use when authoring content for HTML5 Canvas.

In newer versions of Animate, this has opened up a bit and many more blend modes are now accessible to content authors:

Figure 1.22 – Blend mode selection

The list of blend modes when using HTML5 Canvas is now much closer to what we can use when targeting ActionScript 3.0.

Previously supported blend modes in HTML5 Canvas included Add and Normal; that was it! In the current version of Animate, we have access to Darken, Multiply, Lighten, Screen, Overlay, HardLight, and Difference, in addition to the two that were previously supported. Even with these additions though, there are a few that will still be disabled when using HTML5 Canvas.

Note

Blend modes in HTML5 Canvas are still quite limited as they cannot be animated across keyframes. Once set, that is what you are stuck with at runtime!

Stream Audio Sync in Canvas

One of the best reasons for choosing the ActionScript 3.0 target platform in Animate is that it provides not one but four sound sync types. Audio is hugely important in many mixed-media projects, and massively important in animation, especially when synchronizing sound with visual motion, event sounds, characters speaking, incidental noises, and so forth. If audio sync is off, the viewer will notice!

The best way to ensure that your audio is perfectly synchronized to the animated content is through the use of the Stream