Prototyping Microinteractions with Adobe Animate

Prototyping Microinteractions with Adobe Animate

1h 51mIntermediate2019-08-23

Authors

Joseph Labrecque

Joseph Labrecque

University Professor, Adobe Educator, Studio Head

Course details

Progress bars, ripple and pulsing effects, and other microinteractions should achieve a single task, and do so in a way that feels unobtrusive. But while these elements may be understated, they play an important role in a user's overall experience with your project. In this course, join Joseph Labrecque as he demonstrates how to prototype gestures and design a number of useful microinteractions for UX design projects using Adobe Animate. Explore the basics of creating motion within Animate, as well as how to prototype common gestures such as the double tap and long press. Finally, learn how to design a variety of microinteractions, including stretch and fill, icon transformation, and bouncing icons.

Learning objectives
Setting up Adobe Animate to create microinteractions
Shape, classic, and motion tweens
Easing with the Properties panel and Motion Editor
Using masks
Prototyping gestures, including tap and swipe
Designing progress bars and bouncing icons

Skills covered

Adobe AnimateInteractive Web ContentUser Interface PrototypingWeb GraphicsWeb DesignUser ExperienceAdobeDeep Dive (X:Y)

Concepts

Introduction

  • Prototype microinteractions with Adobe Animate
  • What you should know
  • Using the exercise files

Preparing Your Project

  • What are microinteractions
  • Configuring an Animate document
  • Drawing basic shapes
  • Using the timeline
  • Adding keyframes
  • Defining frame labels

Basics of Motion

  • Shape tweens
  • Creating symbols
  • Classic tweens
  • Easing with the Properties panel
  • Motion tweens
  • Easing with the Motion Editor
  • Using masks

Prototyping Gestures

  • Tap gestures
  • Double-tap
  • Long press
  • Swipe gesture
  • Pinch gesture

Designing Microinteractions

  • Progress bar
  • Bouncing icon
  • Icon transformation
  • Stretch and fill
  • Ripple effect
  • Pulsing effect

Conclusion

  • Further information
40,000 Toman