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.

Ripple effect

Ripple effect - Adobe Animate Tutorial

From the course: Prototyping Microinteractions with Adobe Animate

Start my 1-month free trial Buy for my team

Ripple effect

“

- [Narrator] Common to Google's material design specifications, this effect is clean and direct. Drawing the users eye to solidify their intention. When interacting with some element within a design. Let's see how to accomplish this in Animate with a bit of masking. So I have this empty layer in my starter file called a button. This is where we're going to do our initial drawing and for that we'll use the rectangle tool and if you look down here, there's actually a way to change the corner radius of your rectangle. We're going to change the corner radius of all four corners, to a value of four. I'm going to have no stroke and a light blue color for my fill. From there we just click and drag to create what is effectively a button. With this button background created, let's go ahead and use the selection tool to select it. And then we'll choose modify, convert to symbol. This will be a graphic symbol. And we can name it UI_ripple. Okay. So now we have an instance of that graphic symbol…

Contents