Overlapping and animating the colors

show more Overlapping and animating the colors provides you with in-depth training on 3D + Animation. Taught by Dermot O' Connor as part of the Animation Tips and Tricks with Flash Professional show less
please wait ...

Overlapping and animating the colors

One of the really fun things about Flash is how easy it is to play with colors, and gradients of colors, and find ways to overlap them together. So before we do that and simply start messing with colors, if you haven't had any experience with color theory, it's a good idea to have just a very simple introduction to that. So essentially in the visual arts, the three primary colors are red, yellow, and blue. And we obtain green, orange, and purple by mixing them in varying degrees. And of course, you can change the hues of the different colors to get different kinds of yellow, different kinds of blue, and different kinds of the secondary colors: green, purple, and orange.

One of the principles in art is to combine complementary colors, and these are colors that are completely opposite to one another on this color wheel. So that would make red and green complementary colors, yellow and purple are complementary, and orange and blue are complementary. And if you move to any point on the circle, its complementary will be, in theory, on the opposite side of the wheel. So this is a very useful technique; you'll see how I use this and implement it throughout some of the later sections of the course. But to see how we can then play with different overlapping areas of color, let's have a look at this simple scene.

So I've made a very basic color, and this is a radial color. Let me unpadlock it. So if you want to alter the gradient of this color area, you can select the color area. You will see it suddenly is covered in little white dots; it's very hard to see anything. Under this button here, the Free Transform tool, it also houses the Gradient Transform tool, which you can also access by hitting F on the keyboard. Let's do that. And now you can see how I created this gradient area. This is the Transform tool, and I can size it, I can make it bigger by moving the white circle around. I can change the centerpoint.

So that essentially is a very quick introduction to how I created it, and we will cover this in far more detail later on, so don't worry too much right now. So this shows you how we can go from one color form and tween to another one. So on the bottom layer I've gone from this color, and let's open up the Color panel, and you can see the gradient color is here, and we can change them by altering this. Let's go back to the default. So by having the second keyframe here with a slightly different color, we then activate classic shape tween, and that shape tweens from one to the other. And it doesn't just tween the colors; it can tween the position of the colors.

So you can use this for creating all kinds of effects of light changes. It's more dynamic than it might seem at first glance. Let me undo that. I like to padlock of the bottom layer, because it's very easy to select the wrong one. On the top layer, I created a slightly different gradient going from, again, two different colors. I'm having a green layer on top and a red layer on the bottom. I find that if you combine a red layer, for example, with its complementary: in this case that make the other layer a green layer. I am making it slightly transparent.

You get all kinds of very subtle cooler colors that combine to make a much more natural feeling. So by clicking on this -- if you don't see this Transform tool, don't forget it's up here. Click on the color selector, and you'll see the colors are set to opacity: they are transparent. And the Alpha transparency, it's 30% on the first one, 39 on the other. By clicking and sliding we can make them even less or more opaque. And in this case I have also tweened the color at the end of it, just for a little variety. It's a very simple demonstration just to give you an idea of some of the optical effects that we'll be playing with later on to create more concrete illusions.

So that's a basic introduction to the kind of color gradients, and the effects of overlapping color gradients, and how we can shape tween those gradients to create some pretty interesting effects.

Overlapping and animating the colors
Video duration: 3m 53s 5h 16m Intermediate


Overlapping and animating the colors provides you with in-depth training on 3D + Animation. Taught by Dermot O' Connor as part of the Animation Tips and Tricks with Flash Professional

please wait ...