Masking a Rect object with a TextGraphic in Flex Gumbo

The following example shows how you can use a TextGraphic object as a mask on a Rect object in Flex Gumbo by setting the maskType property to “alpha”.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3”.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/14/masking-a-rect-object-with-a-textgraphic-in-flex-gumbo/ -->
<Application name="Rect_mask_TextGraphic_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            private function init():void {
                rect.width = textGr.width;
                rect.height = textGr.height;
            }
        ]]>
    </Script>

    <Graphic maskType="alpha">
        <Rect id="rect">
            <fill>
                <LinearGradient>
                    <entries>
                        <GradientEntry color="red" />
                        <GradientEntry color="blue" />
                    </entries>
                </LinearGradient>
            </fill>
        </Rect>
        <mask>
            <Group updateComplete="init();">
                <TextGraphic id="textGr"
                        text="The quick brown fox jumps over the lazy dog."
                        fontSize="32"
                        width="300" />
            </Group>
        </mask>
    </Graphic>

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

One thought on “Masking a Rect object with a TextGraphic in Flex Gumbo

  1. Dear Peter,

    I am an avid fan of your blogs. Your blogs helps me a lot in overcoming the obstacles faced during the development of applications using Adobe Flex Builder 4.

    Currently, I am stuck with a problem and I seriously need your help on this. I am building an application where I have taken two border containers. The upper container contains button for drawing a triangle. The lower boarder container is where the figures are drawn dynamically.

    Now the problem : There is a button on the upper border container that is used to draw a triangle. Upon clicking the triangle button-> I click on the lower border container and on down click the dynamic ( means when the mouse down click is ON, the triangle is formed and upon dragging the mouse, the size of the triangle starts increasing till the mouse down click is released) triangle is formed.

    Now when I created a triangle on the upper region of the lower container, the triangle is masked ( I constructed a mask container for that triangle object before the launch of application so that the mask container is drawn under the lower border container ( the container on which the triangle is drawn)) and the portion of the triangle is not visible on the upper border container. Upon drawing many triangles, the masking property seems to fail and the masked portion of some triangles appears on the upper border container. Kindly provide a solution to this problem….Thanks in advance…Cheers!!!

Comments are closed.