Working with the Opacity Masks
Well, it's been a while since I've managed to post, but I've been working with Interactive Designer pretty heavily lately, and it's been a pretty exciting time.
On top of that, I've starting doing internal training classes at Microsoft for Interactive Designer. It started with a couple classes on how Graphic Designer and Interactive Designer can work together, but it's grown to a full-blown formal series of classes.
Last week, we spent a fair amount of time on the Appearance Palette, talking about what it can do. Specifically, most people don't know how to work with opacity masks, and just what you can do with them.
The best place to start, is on what an opacity mask actually is. There are several ways you can make an object partially transparent... to show what objects are underneath.
First, you can set the Opacity on the entire object. This applies a uniform N% transparency to the entire object, stroke, fill, and all. This opacity is an animatable property, so you can make the object fade in or out with this, but you can't control which parts get more or less transparency.
Second, you can set the Alpha channel on individual colors. This allows a gradient where you can see through parts of the element, and still have solid colors elsewhere. The downside is that an individual channel is not animatable, and this sets individual colors on a single piece (Fill/Stroke/etc...). So, if you want, for instance, a linear gradient whose tranparency extends both into the stroke and the fill, getting this correct is a VERY tricky business.
Finally, you can use an opacity mask. It's the least commonly used, since it's not immediately apparent how it works. But, it provides some functionality that the other two methods don't provide.
An opacity mask is a brush that is applied on top of all of the other brushes that make up an element. However, in an opacity mask, only the alpha channel is applied.
(I need to learn how to put pictures into my blog... I'll work on that for next time around)
But, if you've got Interactive Designer available, try this. Create a rectangle with a wide stroke. Make the stroke Black and the rectangle itself red.
Now, switch to the Opacity Mask, and change the type to a linear gradient. At first, you won't see any change in the rectangle, but that's because the Opacity Mask brush has an alpha that goes from 1.0 to 1.0. In other words, the opacity of every pixel in the element will remain at it's previous setting.
Change the right gradient stop's Alpha to 0.0.
At this point, the right side of the rectangle, stroke and fill, both disappear. What happened? Consider a pixel 3/4th of the way across the rectangle. The brush that effects the color of that pixel has an Alpha of 1.0, or completely opaque. The Opacity mask, 3/4s of the way across has an alpha channel of 0.25. So, the 1.0 and the 0.25 are multiplied together, and the pixel is displayed with a 25% transparency.
This may not be too exciting, but select the paint transform tool, and drag the vector around. Change the spread method to either reflect or repeat. As you drag around the gradient, you can see how you can do things with the Opacity Mask that you wouldn't be able to do any other way. Try using a Radial Gradient as well...
The biggest take-away here is that Opacity Masks are applied to the entire object at once, regardless of fill/stroke, etc... and you can do anything with an opacity mask that you can do with any other brush with regards to animation and paint transform.
--Dante