Adobe Animate Designing Interactive Experiences

On August 17, 2018

Release date:2018, May 30

Duration:02 h 10 m

Author:Joseph Labrecque

Skill level:Intermediate

Language:English

Exercise files:Yes

Interactivity is not a perk for modern web projects—it’s a prerequisite. Learn what you need to go beyond the basics and create engaging, interactive apps and web experiences using the tools in Adobe Animate. Instructor Joseph Labrecque shows how to build out a library of UI elements, such as buttons, toggles, sliders, and lists. He shows how to use these building blocks to design application views within the Animate timeline and create a persistent navigation bar. Then he shows how to add interactivity—using event listeners and custom functions to respond to user input—and animate application views with keyframes, motion tweening, and camera transitions. Finally, learn how to export your prototypes for distribution on desktop, web, and mobile devices.

Topics include:
Designing buttons
Building a toggle switch
Drawing a slider
Creating app views
Building persistent navigation
Adding interactivity
Animating nested elements
Animating interactive views with transitions
Publishing for web, desktop, and mobile
Converting ActionScript to JavaScript

Table of Contents

Introduction
What you should know 39s
Using exercise files 30s
1. Animate Design Fundamentals
Document properties overview 4m
Drawing on the stage 3m 1s
Understanding the Timeline 2m 18s
Specifying a color set 5m 13s
2. Building a Ul Library
Design a simple button 2m 32s
Component design considerations 2m 54s
Create a set of button variants 2m 39s
Building a toggle switch 2m 4s
Mocking up a list component 4m 12s
Drawing a slider 3m 24s Text layout 4m 4s
3. Creating Timeline Views
Designating screen views 3m 56s
Importing additional content 4m 17s
Manipulating the views 3m 28s
Creating view symbols 1m 56s
Building persistent navigation 5m 46s
4. Adding Interactivity
Naming symbol instances 3m 19s
Creating an actions layer 1m 7s
Navigating to different views 6m 24s
Animating nested elements 5m 1s
Making nested elements interactive 5m 47s
Targeting nested elements 3m 58s
5. Animating Interactive Views
Extending frame spans 5m 19s
Animating transitions with overlays 5m 49s
Preparing for direct transitions 2m 41s
Animating direct transitions 9m 10s
Preparing for camera transitions 2m 19s
Animating with camera transitions 4m 57s
6. Prototypes for Web and Mobile
Publish for desktop 4m 28s
Publish for mobile 1m 21s
Converting for the web 1m 26s
Rewriting interactivity 8m 17s
Conclusion
Goodbye 36s