From the course: Prototyping Microinteractions with Adobe Animate

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Bouncing icon

Bouncing icon - Adobe Animate Tutorial

From the course: Prototyping Microinteractions with Adobe Animate

Start my 1-month free trial Buy for my team

Bouncing icon

“

- [Instructor] A common indicator on both desktop and mobile to grab the user's attention is to have an icon or prompt bounce, jump or wiggle. This is such a common microinteraction, we'd be remiss to address it and show how to perform this animation in our Animate projects. In the starter file for this lesson, you'll notice that we've actually disabled the visibility for the progress bar that we have on stage here, but we also have two extra items. And these are the layers dock and bounce. For this microinteraction we need to look down to the bottom of the device. So here we have a little animate symbol. This is our icon that will perform the microinteraction. And then we simply have a background here as well. This is a simple drawing object that's a darker color. And we can actually go ahead and lock that layer, because we won't be manipulating the actual dock assets, only those within bounce. Let's start our animation. Somewhere around frame 10. So we'll select frame 10, and insert…

Contents