Multiple Masks Demo: Click to View
This demonstration project suggests some interesting possibilities for animated masking layers. The project consists of five independent Flash movies (.swf). The first of these is the main movie, loaded into Level 0. This movie contains the sketch-style depiction of the scene. A Movie Clip contained within this movie then executes an on-load handler and loads more movies in Levels 1 through 4.
Each of these subsequent movies contains an animated mask and a scene image. The images are full-color versions of the scene, showing different times of day with the characters at varying positions. The masking circles move around automatically unless the viewer clicks and drags them, in which case they follow the cursor while the mouse button is down.
Dragging the mask also causes the selected view to jump from 40% to 100% opacity.
As you can see, when a movie is loaded into a layer that overlaps another movie, any pure white pixels (hexadecimal value FFFFFF) are considered transparent. Thus we can layer movies as if they were attached to acetate sheets or some other clear medium.
The code for this demonstration is entirely adapted from previous examples. The animation of the masking circles, for instance, uses the same logic as the "Timeline vs. Scripting" demo from the early days of the course. Because there's nothing new here except architecture and arrangement, I won't discuss the code in detail.
If you look at the source, note that all the scripting is concentrated in a Movie Clip called "scripts" which resides in the main or Level 0 movie. The masking objects contain the usual set of handlers (same as in last week's discussion of draggable masks), though there is one small difference in the way they invoke functions; for instance, here's the handler for mouseDown:
onClipEvent(mouseDown){
_level0._root.scripts.pickUp(this);
}
The reference above reflects the object hierarchy of the project.
You can download the source file from MMShare/multiMask on Crow. You'll find files for each of the five components.
Finally, here's a slightly more advanced version. Instead of circles this one uses rectangular masks which move automatically from left to right and can be picked up and dragged horizontally. Once a mask is acquired it expands and its layer becomes fully opaque. The source files for this revision are in the Version2 subdirectory of MMShare/multiMask.
