While managing color in Animate may seem fairly straightforward at first glance… there are some things to know which can help with color workflows which may not be obvious at first glance.
- [Voiceover] While managing color in Animate may seem fairly straightforward, there are some things to know which can help with color workflows which may not be obvious at first glance. So far, we've seen being able to use select colors over in the toolbar and actually selecting colors when we have a specific tool selected. When we do this we get this nice color palette that comes up. However, there are two additional palettes that we should look at. We have this color palette here and using this we can define our own custom colors.
And we have our swatches panel. This is the panel that determines which colors come up when we choose any one of these color pickers. What I want to do is create a nice gradient wash that starts out dark at the bottom and then blends into the rest of my visual project space here. So what I'll do is go down and create right above my texture layer, a new layer, and name it wash. This will be a gradient wash. And what we'll do is actually go ahead and create this off the color panel.
I'll make sure to have fill selected and from this drop down here, you can choose what kind of color you want to create. So I want to create a linear gradient. Notice that you can also create solid colors, radial gradients, or even bitmap fills. Choosing linear gradient, things change a little bit in terms of the interface. I now have a flow option that determines how to handle colored edges. So to repeat the edges, reflect, or extend the colors.
I'm going to keep this at extend. And then using this gradient selector, I can go ahead and determine which particular colors I want to choose for my gradient. What I'm going to choose is this dark color here. And once again double click on that little key and choose that dark color. Now, I want this to go from very dark to very light or transparent. So, to do that, I can actually change the alpha value with any of these keys selected.
So let's go ahead and pull that down. That's now at alpha zero. And for this one, too, I can make adjustments to it if I want. I'm going to keep that at 100% right now, though. Let's go ahead and add this to our swatches. Going over to our swatches, we can see that there is our custom swatch right there. And we can also go ahead and convert any of these swatches to a tag swatch. When you convert something to a tag swatch and apply it to different things within your project, when you actually make adjustments to the tag swatch, those adjustments will cascade across the project to anything that's using that particular tag swatch.
So let's do that in this case. I'll call this wash. Again, it's a linear gradient. I have the ability to edit it directly in here. I'm just going to hit okay and now I have it appearing in my tag swatches. Let's go ahead and close that and choose my rectangle tool. For my rectangle, it's already chosen my tag swatch here and that's exactly what I want. But I don't want any stroke color, so I'm going to click this and choose this little white swatch with a red line through it.
That is always going to disable the stroke or the fill when it's chosen. With that done, I can go ahead and in my wash layer, draw out a nice rectangle about halfway up. Something like that. Now, this wash isn't exactly like I want it to be. For one thing I want it to go up and down which, we'll take care of that later, but before that, I want to make sure that it isn't quite as filled up in here.
We want it to be more transparent than this. So I can go ahead into my swatches and double click on this tag swatch to edit it. If you remember, I set this particular key to 0% and this one remains at 100%. Let's actually pull that down to about 50% and hit okay. Notice as soon as I do that, that it's reflected on that gradient. The reason for that is because it is a tag swatch.
If I had that applied to many different things, it would apply to those things as well. There are many options for managing color in Animate even beyond what you've seen demonstrated in this video.
- Setting up your workspace
- Using the stage and the pasteboard
- Importing images, Illustrator files, and Photoshop files
- Modifying text
- Drawing shapes and creating vector objects
- Managing your timeline
- Adding audio
- Using shape and motion tweens
- Coding navigation buttons
- Testing your animation