Stickman - Gradient Mask

TUTORIAL INFO
Version Flash 4 Difficulty Intermediate Created 5th June 2000 Updated 12th June 2000

OTHER LANGUAGES
Français

DOWNLOAD
ZIP	FLA

I've seen the question asked numerous times on various forums: "Is it possible to do gradient masks?". Meaning, is it possible to have a mask that fades between one layer and another, instead of having a 'hard' edge? Strictly speaking the answer is no, but it is possible to fake the effect. By the way, the static circle in the example is there just to show what a non-gradient mask would look like.

Well, aren't you the smug one?

To be honest, I can't believe this is an original idea, but I've looked around and can't find mentioned on any of the tutorial sites that I know of. Can't say I looked very hard, though. It's not the most elegant of solutions -- anything but -- but heck, it does the job, so who's complaining?

So what's the secret?

It's really easy, actually. To understand how the draggable mask bit works, you'll have to read the tutorial I did on that a while back. Once you've grasped that then you're ready to learn about the gradient mask. Brace yourself.

You can't have a gradient in a mask, but you can have a series of masks, each one slightly more transparent than the last. In this case, there's a series of concentric circles around the mouse, each of which masks only a very narrow piece of the image, and which are more transparent as you move away from the centre of the circle.

The tricky bit is creating concentric circles that fit exactly together, with no discernable gaps. There are two methods -- my 'original' method and one sugested by Wooozle:

1) The 'Stickman' method

That's done by first creating a series of concentric circles from lines only, hairline (H) width. You can see this if you look in the movie clip Circle (source). Then fill between the lines with the Paint Bucket, and cut and paste the resulting circles (one each, without the lines) into separate movie clips -- here called circle1 to circle8 -- in a mask layer.

2) The 'Wooozle' method

During a discussion on We're Here Wooozle suggested that much time could be saved by using Shape Tween to generate the masks instead of creating each one individually. You can see this technique in action in this example file. Cleverly, this uses just one movie clip (Circle (tweened mask)), with a shape tween between a large circle and a small one. Then we create multiple instances and send each one to a different frame (you can see the code for this in frame 1 of the main timeline), giving the appearance of a smooth transition. The result isn't as accurate as the above method but it looks fine if you don't zoom in. It also saves quite a lot of work.

When you place the resulting masks into the main timeline, you'll need to set the transparency such that the one nearest the centre is opaque (100% Alpha), the next one out slightly transparent (eg. 90% alpha), the next one slightly more transparent (eg. 80% Alpha) and so forth until the last is almost entirely invisible (eg. 10% Alpha). Zoom right in on the top-left corner of the main timeline and you'll see something like this.

Pah! Simple.

Indeed. It might not be very smooth on slower machines (I haven't tested it) but I think that the amount of work being done is in fact fairly small so it should be ok.