Hack 21 Interference Patterns and Ripple Effects

Masks are one of those weird features that seem useless until you start learning what they can do and seeing tricks that use them. Here are a few applications of doughnut-shaped scripted masks [Hack #20], and these are just the tip of the iceberg.

A series of circles interfering with themselves can create some really cool pattern effects, as shown in Figure 3-32. The effect is symmetrical in that either shape can be the mask.

Figure 3-32. Interference patterns drawn with masks

This effect in Figure 3-32.Make the circles really thin and close together and it starts getting really psychedelic, as shown in Figure 3-33!

Figure 3-33. Interference patterns with masks with concentric circles

These circular patterns, when used to mask images or other content, can be used as interesting transition effects. Without knowledge of this hack, nobody will be able to re-create them either, which is a bonus for the Flash trendsetters looking for the next cheesy mouse-follower-type effect (go on, admit it!).

Using complex masks, you can also create lots of separately masked parts of an image and create scripted wave/ripple or rotation effects. The visual effect in Figure 3-34 is created by two masked leaves, one of which is rotating.

Figure 3-34. A ripple effect created with leaves and masks

Final Thoughts

Masking is one of the most underused secrets in Flash. Although the Flash documentation tells us masking is used to hide content, that doesn't really do justice to what masks can be used for. Masking is used in everything from freaky way-out transition effects to the totally utilitarian v2 UI components. Scripted masking was an absolute godsend for the more tuned-in designers when it first appeared, until everyone realized the limitation of simple mask shapes. Well, now that you know this hack, there is no excuse!

I uncover a particularly clever use of masking when I deconstruct the ideas behind the page-turning trick [Hack #25] .