In this video, learn about drawing simple shapes and combining shapes.
- [Instructor] With all our document and layout settings now in place, it's time to design some UI assets within our project. We'll first create a new layer and begin creating content within it. So I am going to lock down our Guides layer so that we don't mess with it. And then clicking the New Layer button above the timeline, we get a new layer named Layer_2. I'm going to double-click that name and rename it to UI since we're going to be drawing out some user interface elements in this layer. I'm going to create the basic skin of a button to start. So we can choose from the Rectangle tool or the Rectangle Primitive tool. Both of these tools, by default, are grouped together. So you just long press on one to summon the group, and then choose the specific tool you want. So I'm choosing the Rectangle Primitive tool because, when using primitives, what you're able to do is actually adjust more options after the object has been created than you would if you had created a simple rectangle. It's a bit more flexible. For my fill color, I'm just going to choose black for now, and bring that up to 100% opacity. And then draw out something like this. Now, I'm not sure how big this is quite yet, just by looking at the stage. However, if I look at position and size for my rectangle primitive object within the Properties panel, I can see that right now it's 275 by 100. I actually want this to be 300 by 100, so all I need to do is type in 300 for width, and there we go. Note that for rounded, ovals, ellipses, and circles, you also have the Oval tool and the Oval Primitive tool. Using the Rectangle and Oval Primitive shape tools like this allows for the design of a number of common UI components.
- Setting up a UX project in Animate
- Drawing simple shapes
- Adding text
- Creating symbols
- Building interactive states
- Defining screens in the timeline
- Linking between screens
- Animating interactions
- Publishing and exporting your project