Toggling whether transparent pixels are clickable in a Spark Graphic in Flex 4

The following example shows how you can toggle whether transparent pixels are clickable in a Spark Graphic container in Flex 4 by setting the mouseEnabledWhereTransparent property.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/26/toggling-whether-transparent-pixels-are-clickable-in-a-spark-graphic-in-flex-4/ -->
<s:Application name="Spark_Graphic_mouseEnabledWhereTransparent_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="chckBx"
                label="mouseEnabledWhereTransparent"
                selected="true" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </fx:Script>
 
    <s:Rect id="rect"
            width="200" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:stroke>
            <s:SolidColorStroke weight="0" />
        </s:stroke>
    </s:Rect>
 
    <s:Graphic id="gr"
            mouseEnabledWhereTransparent="{chckBx.selected}"
            click="Alert.show(event.type);"
            horizontalCenter="0" verticalCenter="0">
        <s:Ellipse id="ellipse"
                width="200" height="200">
            <s:fill>
                <s:SolidColor color="red" />
            </s:fill>
        </s:Ellipse>
    </s:Graphic>
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

When the mouseEnabledWhereTransparent property is true, the transparent corner pixels in the <s:Ellipse/> object are clickable. Conversely, when the mouseEnabledWhereTransparent property is false, only the red ellipse itself is clickable.

This entry is based on a beta version of the Flex 4 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 4 SDK.

7 thoughts on “Toggling whether transparent pixels are clickable in a Spark Graphic in Flex 4

  1. What a great addition. I’ve had to revert to flash in a number of projects just because clickable areas were shape-based. Thanks for the info!

    1. @blah,

      Well, the example will be just as useless *with* as SWF as without… But if you’re curious, you can copy the 35 lines into a Builder project and see it working. It doesn’t need any additional assets or setup. It would literally take 10 seconds to test.

      Peter

  2. Does this solve the problem using PNGs with transparency? Also, will the object under the transparent area receive the click/over mouse events ? Would love to have a solution that works as well as when using SVG “images”.

  3. I’m also curious how to use this property to work with transparent PNGs. Have a group of layered images that need to be clickable everywhere they are visible. Right now, they are transparent PNGs, but thinking we may need to go to Flash to solve this issue.

  4. Hi,
    I have a border container that uses an image to create the application’s background. This image has several post-its and text. My problem is that I want to make this post-its and texts clickable i.e I want to make parts of my background image clickable…. is that even possible ???

Comments are closed.