Applying a Mask in Flex 4 by using the maskType Property

9 Sep
2008
Delicious

This is a new property in Flex 4 and you apply the mask via the Group attribute. It behaves much like the mask attribute that comes with all components except now you have the ability to control the detail more to please your specification. If you are having trouble understanding how a mask works, think of it this way. You overlay something over your image and whatever is overlayed on the image gets shown and everything outside that overlay gets cut. The Example is pretty straight forward so Here is the Example and source. Visit the Forums If you have anymore questions. Flash Player 10 to view it. Keep Reading.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:adobe/flex/halo"
    xmlns="http://ns.adobe.com/mxml/2009"
    xmlns:ns="library:adobe/flex/gumbo" 
     xmlns:local="*" backgroundColor="0xFFFFFF">
    <!--Image Mask, So Whatever You 
          draw on is what appear to you 
          on the screen and everything
        around it Dissappers-->
	<ns:Group maskType="clip">
		<ns:mask>
			<ns:Group>
				<ns:Rect width="400" height="300"
                                               radiusY="30" radiusX="30">
					<ns:fill>
						<ns:SolidColor color="0xCCCCCC"/>
					</ns:fill>
				</ns:Rect>
			</ns:Group>
			</ns:mask>
			<mx:Image source="@Embed('assets/1.jpg')" />
	</ns:Group>
 
	<ns:Group maskType="clip">
		<ns:mask>
			<ns:Group>
				<Path data="M 100 100 L 300 100 L 200 300 z">
			        <fill>
			            <SolidColor color="#FF0000" />
			        </fill>
			        <stroke>
			            <SolidColorStroke weight="3" color="#0000FF" />
			        </stroke>
			    </Path>
			</ns:Group>
			</ns:mask>
			<mx:Image source="@Embed('assets/1.jpg')"/>
	</ns:Group>
</mx:Application>
Incoming Search Terms :flex 4 mask , flex4 mask , flex 4 masking , mask flex 4 , flex 4 image mask , flex 4 masks , flex 4 masktype , mask in Flex , masking in flex , flex 4 mask image

Share this story with a friend !
Join SherifAbdou's Rss Feed Stumble This Article! Add this to your Delicious Bookmarks! Digg this story ! Add this story to Reddit ! Tweet This Brush


Comment Form