Join Chris Converse for an in-depth discussion in this video Creating colors, gradients, and swatches, part of Edge Animate Essential Training.
- One of the first things that you'll probably want to do in your composition is create some colors and color swatches. Now here I have opened a file called color.an, which is inside the 01 Color folder in the exercise files. Now here I have a background graphic. This is a PNG file that I saved from Illustrator just as a position only, so I can sample the colors. I also have a text block on the stage and a DIV element that's been styled and colored to look like a chalkboard. Now the places that you can access the Color panel will change based on the content you have selected. Here I have the chalkboard selected and in the Properties panel you can see the Color down here.
The first swatch here is the background color, the one in the middle here is a background gradient, which is actually defined as a background-image, and then we have the border color showing up here. I can also get access to the colors at the top here, I can see the background color and the border color. Now if I come in here and select the text you'll see in the Properties panel, the color for text is defined inside of the Text area. So the first thing I want to do is set up a series of swatches. So I'll come up here and select the chalkboard, I'll come over here to the Color, come over to background, click on this swatch, this is going to bring up the Color dialog box.
And in here we have three different color modes. The one that is chosen by default is the RGBa, the a here stands for Alpha. And we can control the Alpha with this slider on the far right, we'll take a look at this in a moment. The second color space we can use is HEX, and the third one is HSLa, and the a here is for Alpha as well. So I'll go back to RGBa. Now with the chalkboard selected, if I grab this little color indicator here and move this around, we'll get a live preview on the stage, based on where I drag the colors around.
At any point, I can always come back and click on the original color and go back to the grey that we had. There's also a + here and a series of swatch panels. If I come over here and click on the + I've now added my first swatch. And now color swatches are available for the entire composition, regardless of how I open the Color panel. Now to create some additional color swatches, let's come down here to the Eyedropper, we'll click on the Eyedropper, I'll move inside of the composition and I'll get a selection ring. I'll come over here and add the color of the coffee inside of the coffee cup, I'll click once and that will give me the active color here, and then I'll come over here and click on the +.
You'll also notice the chalkboard changed to that color, we will set it back to the grey, but we will spend a minute here and define some additional colors. Come back to the Eyedropper Tool, let's come over here and select the table color. We'll add that. I'll select the Eyedropper again. We'll grab the white color inside of the sugar cubes. And then I'll continue to grab the Eyedropper Tool and we'll grab some additional colors. I want to grab the center of the background gradient and then I'll also grab the darker color of that gradient. Once we have our swatches in place, we can click on the swatches and drag them around to reorder them.
So I'll order these from darkness to light. Once I have all of these in place, I'll come back and I'll reclick on the dark grey background. So now I have a series of swatches that I can use throughout my entire composition. Now with the chalkboard background color set, I'll simply hit return. Now with the chalkboard still selected, let's come over here and select the background gradient. Now this dialog box is going to look a little bit different. On the left-hand side we have another tool that gives us the ability to define color stops. So for the chalkboard, let's add a simple gradient. I'll come over here to the left-hand side, let's select a very first color stop.
With that selected, I'll come over here and click on the dark grey background. Let's come down and select the second color stop. I'll select the same background, and let's just make this a little bit lighter. So I'll drag this up. We can see the gradient now showing in the chalkboard. We can also change the degree. So I can drag the degrees around and you can see that the gradient will now start in different corners and just rotate around the center. So I'll set this up so that the lighter side of the gradient is on the right-hand side. We can also change this from a linear gradient to radial.
And now we can see the darker color's in the center. With the color ramps we can grab these and change the order, so I can drag the bottom one and move it up to the top. Now we're making the center lighter and the outer area darker. And then we can change the percentage values of the X and Y, for where their gradient starts. So if I bring the Y all the way up to 0, we can see that this starts at the top. And we can also move this side-to-side as well. So I can come over here and position the beginning of the radial gradient to the upper left-hand corner. And now if I come back to the Color panel and click on the + to add a swatch, on the right-hand side we're going to get a swatch of the active color stop on the left-hand gradient panel.
In order to save all of the gradient settings into it's own swatch, we need to use the swatches that are part of the Gradient grouping on the left. So we'll come down here on the bottom and click on the + and add our gradient to the Gradient color swatches. Now that I'm happy with those colors, I'll hit return. And let's lastly take a look at how we can make transparent colors. So let's come up here to the stage, let's click on the text, in the Properties panel let's click on the swatch for the Text color. As I mentioned earlier, the RGBa and the HSLa, the a at the end of these stands for Alpha, and we have a slider over here which let's us define how much transparency is included in the color.
So with this selected, we can see that this is white. RGBa, we have 255 for red, green, and blue. And then we have 1.0, which tells us this is 100% opaque. If we come over here and grab the slider and drag this down, we can see on the stage that the color becomes semi-transparent. Now this might not be obvious on the stage, since the text is against the chalkboard, so I'll hit return with our opacity set to around 60%, and if I grab the text and move this over, you can see that as the text overlaps other elements on the page, that semi-transparent color allows the background to show through.
So this gives us a really nice effect of having a color semi-transparent against this background. If we come back to the color swatch, click on this, we can come up here and we can add this to our swatches as well. And now we have a whole series of swatches that we can use throughout our composition.
- Creating a new project
- Preparing content in Photoshop or Illustrator
- Adding text to a composition
- Working with web fonts
- Creating reusable symbols
- Adding HTML5 audio and video to compositions
- Making responsive layouts
- Animating elements
- Targeting elements with actions
- Controlling HTML5 video and audio playback with actions
- Working in the Code panel
- Publishing your project
- Adding Edge Animate compositions to existing webpages
- Using OAM files in other applications