Question

I need to be able to detect a fill area for something similar to a coloring book picture. The user will click inside the area that needs to be filled. The image is user created bitmap content and so the fill area must be detected at runtime.

<fx:Script>
    <![CDATA[
        protected function myImage_clickHandler(event:MouseEvent):void
        {
            myImage.imageDisplay.bitmapData.floodFill(event.localX,event.localY,0xFFFFFF);
        }
    ]]>
</fx:Script>

<s:Image id="myImage" click="myImage_clickHandler(event)" source="/images/square.gif"/>

Answer 1

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html?filter_coldfusion=9&filter_flex=3&filter_flashplayer=10&filter_air=1.5#floodFill%28%29

mouseX and mouseY are always the mouse position add a click listener to whatever object and just use the mouseX/mouseY or else the MouseEvent’s event.localX and event.localY for the object that the listener is attached to

<mx:Image id="myImage" click="(myImage.content as Bitmap).bitmapData.floodFill(event.localX,event.localY,0xFFFFFF)" source="http://www.carolynsbloomingcreations.com/images/square.gif"/>

Here’s a solution if you use the Flex 4.5 Hero framework otherwise I was unable to get a handle on the bitmapData through the BitmapImage, the above solution also still works with Flex 3 or 4:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <!--
    <mx:Image
        id="myImage"
        click="(myImage.content as Bitmap).bitmapData.floodFill(event.localX,event.localY,0xFFFFFF)"
        source="http://www.carolynsbloomingcreations.com/images/square.gif"/>
    -->
    <fx:Script>
        <![CDATA[
            private function handleClick(event:MouseEvent):void
            {
                trace('test');
                var tempData:BitmapData = new BitmapData(myBitmapImage.width,myBitmapImage.height);
                tempData = myBitmapImage.bitmapData;

                var localPoint:Point = container.globalToLocal(new Point(mouseX,mouseY));
                tempData.floodFill(localPoint.x,localPoint.y,0xFFFFFFFF);
                myBitmapImage.source = tempData;
                trace(localPoint.x + ":" + localPoint.y);
            }
        ]]>
    </fx:Script>
    <s:Group
        id="container"
        click="handleClick(event)">
        <s:BitmapImage
            id="myBitmapImage"
            source="@Embed('square.gif')" />
    </s:Group>


</s:Application>

even though they exposed the bitmapData in the 4.5 framework it’s read only though so I had to copy it and re-assign it to the source that seemed to work