Join Dermot O' Connor for an in-depth discussion in this video Applying gradients to a character's eye, part of Flash Professional: Animation Tips and Tricks.
In the previous section I showed you how you could remove the dreaded flashy effect from a background. In this section I am going to show you how you can remove it from a character, as long as your character is reasonably simple and not too angular. You notice this guy has an egg head and his eyes are nice and round. He is not square. And this plays to the strength of the gradient tool. With that in mind let's take a quick look. So I am going to enter the head of the character and go in a bit tighter. And as you can see we have gradients all over him, and not too many.
He really is deceptively simple. So let's go back onto the main Stage. I am going to hide the other guy. I'm going to going to go into Mr. Flat and show you some tricks that you can apply. So the one thing, if you only do one thing, and I think this could probably be applied to any character, is you can do something about these dead eyes. So let's go into the pupil. We have three layers. The outer layer is the blue, the middle one is the black, and the top one is the highlight.
So let's padlock these. I am going to make new layers, and we are going to make a new version of each of these objects. So I am going to select the Circle tool, select Radial gradients, and we are going to go from white to white. So let's do that right now in here: white on the inside, white on the outside. The inner color will be 100%, the outer edge will go to 0 opacity. The Circle tool is selected. Hold down Shift, and drag. And hard to see it right now, so let's hide the old one, and we will drag the new one into place.
It's a little bit tight, so let's give him a bit more room. I am going to select the Gradient Transform tool, or F on the keyboard. Pull this in a little bit. And I am going to get a bit more room for that little dropoff, and there you see the difference. Now we will do the same thing for the black of the eye. Select the layer beneath, select the Circle tool, we're in Radial gradients. Select one of the whites, and let's go to black this time; black on the inside, black on the outside. I am moving these here just to make sure that the color took. And on Layer 5, or the second layer from the top, hold down Shift, and drag. And to see this properly, let's hide the other black layer.
It's not as blurry as I'd like. So let's select that, and we see what the problem is: we just didn't have that in tight enough. So there we go. And now we have the black and the white. You notice also if you select these that there's little line appearing around them out here. That's because if you make any of these shapes they tend to have some kind of line edge built in by default, which you can see if I use the Ink Bottle tool, and repaint it. So I like to get rid of them. Just click on the outside, or double- click to get rid of the entire thing.
Hit Delete there and there. It just makes it a little bit cleaner. And then the final thing will be to make the blue of the eye. So I want to pull down the bottom layer, which was the original blue. Hold down the Alt, Option key, drag to the empty layer, select, and let's go to Radial gradient. We want to have a nice blue color on the outside. Blue on the inside. And we are seeing it already. Let's go to Gradient Transform tool so we can really see what we are doing here.
I am going to the pull is 0 in a little bit. The reason why you're not seeing the dropoff properly; I've still got the bottom layer visible. We can hide that now. Good! So let's pull that out, and let's add a little bit of extra interest here. We will click to add an extra color, go to the middle one, and let's make this darker. You can see how easy it is to add a little bit of dimension to that eye. If you want to harden the outer line, you just close to gap between it and the outer alpha, this 0 color here. But I like to give it a little bit of dropoff. So that's it.
Don't forget: delete the old reference layers; you won't need them again. An incredibly simple thing to do, and looking at it now you probably would want to blur the white to highlight it a little bit. I am going to hit Q, Free Transform tool. Bring that down a little bit, pull in the white just to extend the blur around that. It is, after all, a little bead of light. You could add more of them if you wanted. There is no end to where you could go with this. So then the other thing I really would want to do would be to add a gradient to the white of the eye, and that's the eye left layer.
I am going to select that, hit the Fill tool again, and select Radial gradient. And let's drop the last gradient we were working on; you may have a different gradient. You're going to have to change it anyway. So let's go to the gradient and bring the edge back up to 100% so we can see it. Give it a weird color so you can really get a high contrast. This won't be the color you're going to use, but you really probably will want to see, you know, what the effect that your changes are having on the object.
I like this outer ellipse to match as closely as I can, but you just want to make sure that if you have any transparencies on this that they don't affect the cut into the outside edge of the eye. This triangle here; by moving that triangle you can offset the shape of the gradient, and it can help you to fit the gradient to the shape of the eye. I am going to pull this in a little more, and that is as close as you're going to get. So now that we've done that we can go to a more natural color.
When I have something like this, if I get this color to be more or less what I want -- I think a little tint will be nicer than that, just a little; not much. Then that's a pretty harsh dropoff, so let's make it a little more subtle. I want to make a new color there, and just drag it. There we go. And that's created a pretty nice feeling of volume. If you think that's a little too heavy; his eyes are a little too buggy, just go into that outside color and pull it up a little bit.
You have great control over this. So now we are out, and the next step will be to add a new layer that describes the shadow that's going to surround the eye here. So let's add that new layer, and we will call it eye left shadow. So the quickest way to do it; we'll just duplicate the eye layer itself. And let's get the padlock off. And let's just give it a really fake color; it's black, so we can see exactly where it is.
Select it again. Hit Q; Free Transform tool on the keyboard. Maybe select it again, and then drag. And right now we're not worrying about the color. We are just trying to get the shape to match. Now let's apply that color again. So Color Bottle>Radial gradient. And again strip this down; make it as simple as we can. Maybe red on one end; I am going to pick a phony color on the other. Oops! I hit the wrong one. Control+Z; Paint Bottle tool.
Paint that in there. Now I am going to use the Gradient Transform tool to try to match this again to the eye. I could've copied eye gradient onto this. It might have been a bit quicker, but I like to show you, too, exactly how I can build these from scratch. I don't have to copy and paste something that's pre-existing to match this, and neither do you. So don't be afraid of making one of these from scratch and fitting it in. If you don't like it, you can just make another one. Don't be afraid of working, as I am here, in false color. The beauty of working in false color is that you can really see where your colors are going inside the restrictions of the shapes that you're building.
This is looking pretty good. So now that I've got that, let's put some real colors on here. Let's say I like this color here, this dark coffee color, and I want to match it there. It's very simple, just click there, make a new one, drag the blue away, copy this over, and drag the opacity down to 0. And you will have something reasonably close. Now if you think that dropoff isn't working, maybe you can pull the triangle up to fit that to the curve. That might mess something else up. You can expand it. You see what I'm doing here? I am hitting the outside end of my geometrical shape, and I don't want that to be much bigger than it already is.
So I am going to just pull it up, try to fit it inside, and pull it back in. Sometimes, if you want to fit it again, go to Outline mode, and that way you can see, oh, I've spread out outside the blue. You want to keep this shape inside the line of your shape, your actual color, so that way any modifications are contained. So there we go. There is still a little bit of hard edge there. So it's possible to extend that outline a little bit. If it buys you a little more room, that's not going to mess anything up.
Go back into this, maybe pull the triangle down. You can also rein in these colors a little bit. Maybe add another one. Change the falloff. And this is at 100%; maybe you want to make a bit more subtle. Go from 75%, to 30%, to 20%. I am going to make the dark a little lower even; maybe 55. That's nicer. So now we have a much more natural little shadow effect that defines the hollow of the eye socket. There's more layers you can add of course.
You can add as many as you think you can handle, but it's best not to go too crazy if you're doing this for the first time. The other thing that I would do next would be simply to take the eye layer, and to copy it onto the other side. And then we can proceed, and move on to adding a few gradients to the skull, the nose, and the ears, and round off the character.
- Overlapping and animating colors
- Creating lens flares
- Animating hair with shape tweens
- Animating an explosion
- Animating smoke with particles
- Animating a scream
- Using Virtual Cam
- Lighting a 3D shot
- Animating cross dissolves