From the course: Prototyping Microinteractions with Adobe Animate
Join today to access over 24,800 courses taught by industry experts.
Progress bar - Adobe Animate Tutorial
From the course: Prototyping Microinteractions with Adobe Animate
Progress bar
- [Instructor] Progress bars and loaders come in many styles. The most used is a simple bar that fills from left to right as some action occurs in the background. We can build a progress bar using the drawing tools in Animate and package it as a symbol for easy reuse. The first thing we'll do is go ahead and create a new layer above our phone background layer and let's just name this bar. Going over to our toolbar, choose the rectangle tool and what we'll do is have a fill color of white and we want that fill to be about 40% alpha. Stroke, we want to have disabled, so if yours is not disabled, make sure to choose the disabled icon here. With that done, we can then draw out our progress bar. We want to keep it pretty thin just like that. With the progress bar created, we can switch back to the selection tool, select that shape, and choose modify, convert to symbol. Here, we'll create a graphics symbol and we'll name this UI underscore progress. And there we have it. Now to actually…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.