Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Applying gradients to a character's eye


Animation Tips and Tricks with Flash Professional

with Dermot O' Connor

Video: Applying gradients to a character's eye

Applying gradients to a character's eye 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
Expand all | Collapse all
  1. 6m 35s
    1. Welcome
      1m 4s
    2. Using the exercise files
    3. Common keystrokes and shortcuts used in this course
      4m 40s
  2. 1h 24m
    1. Understanding video versus SWF
      2m 30s
    2. Overview of shortcuts, extensions, and setup
      6m 27s
    3. Understanding linear and radial gradients
      2m 39s
    4. Overlapping and animating the colors
      3m 53s
    5. Lighting a scene
      10m 24s
    6. Creating lens flares
      10m 40s
    7. Animating ripples
      7m 2s
    8. Creating a gradient globe
      11m 41s
    9. Creating a gradient bottle
      10m 26s
    10. Applying gradients to a character's eye
      10m 2s
    11. Applying gradients to a character's skull
      8m 49s
  3. 56m 53s
    1. Tweening a circle to a square
      10m 9s
    2. Using thumbnails
      4m 39s
    3. Animating a magic carpet jump
      10m 12s
    4. Setting up a magic carpet walk cycle
      7m 41s
    5. Animating a magic carpet walk cycle
      9m 33s
    6. Shape tweening hair
      3m 50s
    7. Intro to overlapping hair
      1m 57s
    8. Animating overlapping hair
      8m 52s
  4. 1h 8m
    1. Animating waves
      8m 7s
    2. Animating clouds
      7m 48s
    3. Animating a flame
      11m 38s
    4. Animating an explosion
      9m 1s
    5. Adding in-betweens to the explosion
      4m 36s
    6. Adding explosion clusters
      6m 43s
    7. Optimizing the explosion
      7m 30s
    8. Animating smoke with particles
      12m 45s
  5. 32m 18s
    1. Introduction to staggers
      1m 5s
    2. Animating a simple stagger
      5m 8s
    3. Animating a diving board
      6m 15s
    4. Animating a tremor
      5m 56s
    5. Animating a scream
      7m 12s
    6. Refining the scream
      6m 42s
  6. 47m 49s
    1. Introduction to Virtual Camera
      5m 4s
    2. Animating parallax
      6m 9s
    3. Animating a crane shot
      6m 26s
    4. Animating a zoom and rotate shot
      9m 30s
    5. Animating a track shot
      11m 0s
    6. Lighting a 3D shot
      9m 40s
  7. 19m 48s
    1. Animating a cross dissolve
      6m 10s
    2. Animating a wipe
      3m 34s
    3. Animating a fadeout
      10m 4s
  8. 20s
    1. Goodbye

please wait ...
Applying gradients to a character's eye
Video Duration: 10m 2s5h 16m Intermediate Aug 09, 2011

Viewers: in countries Watching now:

Applying gradients to a character's eye 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

View Course Description

In this course, author Dermot O' Connor introduces a variety of real-world issues that animators commonly encounter and offers practical solutions to them in Flash. The course covers how to apply gradients to create subtle texture and light characters, reducing the flat look of most cartoons; how to simulate natural phenomenon such as wind, fire, and clouds; how to mimic 3D space; and how to add fades and transitions to create custom cuts between scenes. The course also includes a look at staggers, which can be used to create camera shake, tremor effects, and extreme character reactions.

Topics include:
  • 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
3D + Animation
Flash Professional
Dermot O' Connor

Applying gradients to a character's eye

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.

There are currently no FAQs about Animation Tips and Tricks with Flash Professional.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Animation Tips and Tricks with Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.