Adobe Animate: Designing Interactive Experiences
2h 10mIntermediate2018-05-30
Authors

Joseph Labrecque
University Professor, Adobe Educator, Studio Head
Course details
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.
Learning objectives
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
Learning objectives
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
Skills covered
Adobe AnimateInteractive Web ContentWeb GraphicsWeb DesignProjectAdobe
Concepts
0. Introduction
- 01 - Welcome
- 02 - What you should know
- 03 - Using exercise files
1. Animate Design Fundamentals
- 04 - Document properties overview
- 05 - Drawing on the stage
- 06 - Understanding the Timeline
- 07 - Specifying a color set
2. Building a UI Library
- 08 - Design a simple button
- 09 - Component design considerations
- 10 - Create a set of button variants
- 11 - Building a toggle switch
- 12 - Mocking up a list component
- 13 - Drawing a slider
- 14 - Text layout
3. Creating Timeline Views
- 15 - Designating screen views
- 16 - Importing additional content
- 17 - Manipulating the views
- 18 - Creating view symbols
- 19 - Building persistent navigation
4. Adding Interactivity
- 20 - Naming symbol instances
- 21 - Creating an actions layer
- 22 - Navigating to different views
- 23 - Animating nested elements
- 24 - Making nested elements interactive
- 25 - Targeting nested elements
5. Animating Interactive Views
- 26 - Extending frame spans
- 27 - Animating transitions with overlays
- 28 - Preparing for direct transitions
- 29 - Animating direct transitions
- 30 - Preparing for camera transitions
- 31 - Animating with camera transitions
6. Prototypes for Web and Mobile
- 32 - Publish for desktop
- 33 - Publish for mobile
- 34 - Converting for the web
- 35 - Rewriting interactivity
Conclusion
- 36 - Goodbye
Related courses
- Adobe Animate for UX Design
- Prototyping Microinteractions with Adobe Animate
- Creating a Mobile App Interface in After Effects
- Adobe XD Essential Training: Prototype
- Applied Interaction Design: Card Transitions
- Designing Interactive Infographics with Adobe Animate
- Adobe Express: Designing Presentations
- After Effects Guru: Animating Infographics