Flex, Masks and Collaboration
It is pretty common these days that Flex developers come from traditional programming backgrounds. This means that more and more, many developers leveraging the Flash Player, have never worked with Flash CS3. It also then means that many Flex developers aren’t always familiar with common Flash authoring techniques. Here’s a quick introduction on masking for Flex developers, with some collaboration thrown in for good measure.
The idea behind masking is to be able to reveal only a portion of a display object. To perform masking you need two display objects. The first one is the object to be obscured by the mask. The second object is the item to be used as the mask. The size and shape of the mask is what will show through when the mask is applied. The apply a mask, you set the “mask” property on the object to be masked to the masking object. The first display object will “disappear” except for the area covered by the mask.
You might be inclined to think that the mask will be transparent, but that’s not always the case. If the mask has an alpha value, then it will be only that amount opaque/transparent. If the mask has a fill that starts with an alpha of 1, and has a gradient to an alpha of 0, then that too will be reflected in what you can see through to the, now obscured, display object. Masks can also be animated. This might mean motion, or programmatic fills using the drawing API.
To remove a mask, just set the “mask” property to “null”.
One might then imaging a mask that changes shape, fill, location or other property by the location of the mouse. Changing the mask based on the amount of data that has arrived (i.e. a progress bar) is also a common technique. A declarative graphics framework like Degrafa is really in an ideal position to maximize Flex’s binding capabilities, as you can see on their blog. More to come here in the not too distant future.
The that end, I’ve built a simple masking example that lets you play around with this concept a little. You are presented a graphic, and can turn the mask on and off through a toggle button. When the toggle is selected, the mask will follow the mouse over the graphic. For those new to graphical skinning, I’ve put a light dash of the Adobe Lightroom user interface in as well, which might be useful for those new to that feature of Flex. You click the graphic below to link to the full application, and the source is also available for download (include following collaboration feature).
Great, so you can mask. Flex makes the layout of the application a snap, to include the famous Flex layout management. Graphical skinning is thrown in to make the application look a little different, and it respects the aforementioned layout management via 9-scale. Yet here we are using a much older Flash Player feature of masking. The lesson is that even though you may be a Flex developer, to not forget the roots of the runtime that makes all that work.
Taking this lesson one step further, and leveraging features that come easy in Flex, I’ve even added collaboration. When the mask is turned on, mouse coordinates will be broadcast and the mask will move in any other client viewing the application.
While BlazeDS would work here, I wanted a much lower latency means of messaging, so I’m using the RTMP channel in LiveCycle DS (technically the LiveCycle DS included with ColdFusion 8). Rather than kill my private server via public sharing, you can download the code for the collaborative version separately. I also haven’t put in any means to control who owns the masking and mouse movement, but I’ll leave that for later exploration. Until then, enjoy masking with Flex.