Flex Examples » BitmapFill http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a fading bitmap fill background on a Spark Panel container in Flex 4 http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/#comments Sun, 14 Jun 2009 06:48:20 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ The following example shows how you can create a “fancy” fading bitmap fill background on a Spark Panel container in Flex 4 by using a combination BitmapFill and LinearGradient fill.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_fill_BitmapFill_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="rotation:"> [...]]]> The following example shows how you can create a “fancy” fading bitmap fill background on a Spark Panel container in Flex 4 by using a combination BitmapFill and LinearGradient fill.

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_fill_BitmapFill_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="rotation:">
                <s:HSlider id="rotationSlider"
                        minimum="-360"
                        maximum="360"
                        value="90"
                        liveDragging="true"
                        width="{pnl.width}" />
            </mx:FormItem>
            <mx:FormItem label="ratio:">
                <s:HSlider id="ratioSlider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.2"
                        valueInterval="0.05"
                        liveDragging="true"
                        width="{pnl.width}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            width="320" height="240"
            horizontalCenter="0" verticalCenter="0">
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:BitmapFill source="@Embed('assets/pattern_140.gif')" />
            </s:fill>
        </s:Rect>
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:LinearGradient rotation="{rotationSlider.value}">
                    <s:GradientEntry color="white"
                            alpha="0.0"
                            ratio="0.0" />
                    <s:GradientEntry color="#F0EBD2"
                            alpha="1.0"
                            ratio="{ratioSlider.value}" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
        <s:TextArea id="textArea"
                verticalScrollPolicy="on"
                left="20" right="20"
                top="20" bottom="20">
            <s:text>The quick brown fox jumps over the lazy dog.</s:text>
        </s:TextArea>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.


You can also set the BitmapFill and LinearGradient fills in a custom Spark Panel skin, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_fill_BitmapFill_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            skinClass="skins.CustomPanelSkin"
            contentBackgroundColor="#F0EBD2"
            width="320" height="240"
            horizontalCenter="0" verticalCenter="0">
        <s:TextArea id="textArea"
                contentBackgroundColor="white"
                verticalScrollPolicy="on"
                left="20" right="20"
                top="20" bottom="20">
            <s:text>The quick brown fox jumps over the lazy dog.</s:text>
        </s:TextArea>
    </s:Panel>
 
</s:Application>

And the custom Spark Panel skin, CustomPanelSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ -->
<s:SparkSkin name="CustomPanelSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        <![CDATA[
             [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>
 
    <fx:Script>
        /* Define the skin elements that should not be colorized.
        For panel, border and title backround are skinned, but the content area and title text are not. */
        static private const exclusions:Array = ["background", "titleField", "contentGroup"];
 
        override public function get colorizeExclusions():Array {return exclusions;}
 
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];
 
        override public function get contentItems():Array {return contentFill};
    </fx:Script>
 
    <!-- drop shadow -->
    <s:RectangularDropShadow id="shadow"
                             blurX="20" blurY="20"
                             alpha="0.32" distance="11"
                             angle="90" color="#000000"
                             left="0" top="0" right="0" bottom="0"/>
 
    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
        </s:stroke>
    </s:Rect>
 
    <!-- layer 2: background fill -->
    <s:Rect left="1" top="1" right="1" bottom="1">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_140.gif')" />
        </s:fill>
    </s:Rect>
 
    <!--- Defines the appearance of the PanelSkin class's background. -->
    <s:Rect id="background" left="1" top="1" right="1" bottom="1">
        <s:fill>
            <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="white"
                                 alpha="0.0"
                                 ratio="0.0" />
                <s:GradientEntry id="bgFill"
                                 color="0xFF0000"
                                 alpha="1.0"
                                 ratio="0.3" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: title bar fill -->
    <s:Rect left="1" right="1" top="1" height="30">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xE2E2E2" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: title bar highlight -->
    <s:Rect left="1" right="1" top="1" height="30">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xEAEAEA" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <s:Rect left="1" right="1" top="31" height="1">
        <s:fill>
            <s:SolidColor color="0xC0C0C0" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: text -->
    <!--- Defines the appearance of the PanelSkin class's title bar. -->
    <s:SimpleText id="titleField" lineBreak="toFit"
                  left="10" right="4" top="2" height="30"
                  verticalAlign="middle" fontWeight="bold"
                  truncation="1" />
 
    <s:Scroller left="1" right="1" top="32" bottom="1">
        <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
        -->
        <s:Group id="contentGroup"
                 width="100%" height="100%"
                 minWidth="0" minHeight="0">
            <!--
            <s:layout>
                <s:VerticalLayout paddingLeft="20" paddingRight="20"
                        paddingTop="20" paddingBottom="20" />
            </s:layout>
            -->
        </s:Group>
    </s:Scroller>
 
</s:SparkSkin>

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.

 
]]> http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/feed/ 2 Creating a bitmap background fill on a Spark List control in Flex 4 http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/#comments Mon, 27 Apr 2009 06:59:38 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/26/1048/ The following example shows how you can set a bitmap background fill on a Spark List control in Flex 4 by creating a custom Spark List skin with a BitmapFill object and setting a custom item renderer.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ --> <s:Application name="Spark_List_background_BitmapFill_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:List id="list" itemRenderer="skins.CustomItemRenderer" skinClass="skins.CustomListSkin" horizontalCenter="0" [...]]]> The following example shows how you can set a bitmap background fill on a Spark List control in Flex 4 by creating a custom Spark List skin with a BitmapFill object and setting a custom item renderer.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_background_BitmapFill_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:List id="list"
            itemRenderer="skins.CustomItemRenderer"
            skinClass="skins.CustomListSkin"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>The</fx:String>
                <fx:String>Quick</fx:String>
                <fx:String>Brown</fx:String>
                <fx:String>Fox</fx:String>
                <fx:String>Jumps</fx:String>
                <fx:String>Over</fx:String>
                <fx:String>The</fx:String>
                <fx:String>Lazy</fx:String>
                <fx:String>Dog</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

The custom Spark List skin file, skins/CustomListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minWidth="112"
        alpha.disabled="0.5"
        blendMode="normal">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.List")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For list, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["scroller", "background"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [];
 
            override public function get contentItems():Array {
                return contentFill;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    scroller.minViewportInset = 1;
                } else {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    scroller.minViewportInset = 0;
                }
 
                borderStroke.alpha = getStyle("borderAlpha");
                borderStroke.color = getStyle("borderColor");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component id="dropIndicator">
            <s:Group minWidth="3" minHeight="3" maxWidth="3" maxHeight="3">
                <s:Rect left="0" right="0" top="0" bottom="0">
                    <s:fill>
                        <!--- Defines the color of the background. -->
                        <s:SolidColor color="0xBBBBBB" />
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke color="0x868686" weight="1"/>
                    </s:stroke>
                </s:Rect>
            </s:Group>
        </fx:Component>
    </fx:Declarations>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the background appearance of the list-based component. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <s:BitmapFill id="bgFill" source="@Embed('pattern_149.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!--- The Scroller component to add scroll bars to the list. -->
    <s:Scroller id="scroller"
                left="0" top="0" right="0" bottom="0"
                minViewportInset="1"
                hasFocusableChildren="false">
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
            <s:layout>
                <!--- The default layout is vertical and measures at least for 5 rows.
                When switching to a different layout, HorizontalLayout for example,
                make sure to adjust the minWidth, minHeihgt sizes of the skin -->
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
 
</s:SparkSkin>

And the custom item renderer, skins/CustomItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="false">
    <!-- states -->
    <s:states>
        <s:State name="normal" stateGroups="normalStates" />
        <s:State name="hovered" stateGroups="hoveredStates" />
        <s:State name="selected" stateGroups="selectedStates" />
        <s:State name="normalAndShowsCaret" stateGroups="normalStates,caretStates" />
        <s:State name="hoveredAndShowsCaret" stateGroups="hoveredStates,caretStates"/>
        <s:State name="selectedAndShowsCaret" stateGroups="selectedStates,caretStates"/>
    </s:states>
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke.caretStates>
            <s:SolidColorStroke color="{getStyle('selectionColor')}"
                    weight="1"/>
        </s:stroke.caretStates>
        <s:fill>
            <s:SolidColor color.normalStates="{getStyle('contentBackgroundColor')}"
                    color.hoveredStates="{getStyle('rollOverColor')}"
                    color.selectedStates="{getStyle('selectionColor')}"
                    alpha="0.5"/>
        </s:fill>
    </s:Rect>
 
    <s:Label id="labelDisplay"
            verticalCenter="0"
            left="3" right="3" top="5" bottom="4" />
 
</s:ItemRenderer>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/04/26/creating-a-bitmap-background-fill-on-a-spark-list-control-in-flex-gumbo/feed/ 3 Creating a repeating background fill on a Spark Panel container in Flex 4 http://blog.flexexamples.com/2009/03/28/creating-a-repeating-background-fill-on-an-fxpanel-container-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/28/creating-a-repeating-background-fill-on-an-fxpanel-container-in-flex-gumbo/#comments Sun, 29 Mar 2009 04:32:40 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/28/creating-a-repeating-background-fill-on-an-fxpanel-container-in-flex-gumbo/ The following example shows how you can create a repeating tiled background fill on a Spark Panel container in Flex 4 by creating a custom skin, setting a BitmapFill on the background Rect and then set the skinClass style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/28/creating-a-repeating-background-fill-on-an-fxpanel-container-in-flex-gumbo/ --> <s:Application name="Spark_Panel_skinClass_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:Panel id="panel" title="Spark [...]]]> The following example shows how you can create a repeating tiled background fill on a Spark Panel container in Flex 4 by creating a custom skin, setting a BitmapFill on the background Rect and then set the skinClass style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/03/28/creating-a-repeating-background-fill-on-an-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_skinClass_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:Panel id="panel"
            title="Spark Panel title"
            skinClass="skins.CustomPanelSkin"
            left="20" right="20" top="20" bottom="20">
        <s:RichText id="rchTxt"
                text="The quick brown fox jumps over the lazy dog."
                fontSize="72"
                left="10" right="10"
                top="10" bottom="10" />
    </s:Panel>
 
</s:Application>

The custom skin class, skins/CustomPanelSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/28/creating-a-repeating-background-fill-on-an-fxpanel-container-in-flex-gumbo/ -->
<s:SparkSkin name="CustomPanelSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        blendMode="normal"
        mouseEnabled="false"
        minWidth="131" minHeight="127"
        alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Panel")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For panel, border and title background are skinned, but the content area and title text are not. */
            static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    contents.left = contents.top = contents.right = contents.bottom = 1;
                } else {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    contents.left = contents.top = contents.right = contents.bottom = 0;
                }
 
                dropShadow.visible = getStyle("dropShadowVisible");
 
                var cr:Number = getStyle("cornerRadius");
                var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
 
                    dropShadow.tlRadius = cornerRadius;
                    dropShadow.trRadius = cornerRadius;
                    dropShadow.blRadius = (withControls) ? cornerRadius : 0;
                    dropShadow.brRadius = (withControls) ? cornerRadius : 0;
 
                    setPartCornerRadii(topMaskRect, withControls);
                    setPartCornerRadii(border, withControls);
                    setPartCornerRadii(background, withControls);
                }
 
                if (bottomMaskRect) {
                    setPartCornerRadii(bottomMaskRect, withControls);
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void {
                target.topLeftRadiusX = cornerRadius;
                target.topRightRadiusX = cornerRadius;
                target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
                target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
            }
 
            private var cornerRadius:Number;
        ]]>
    </fx:Script>
 
    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
    <s:RectangularDropShadow id="dropShadow"
            blurX="20" blurY="20" alpha="0.32" distance="11"
            angle="90" color="#000000"
            left="0" top="0" right="0" bottom="0"/>
 
    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">
 
        <!-- top group mask -->
        <s:Group id="topGroupMask"
                left="1" top="1" right="1" bottom="1">
            <s:Rect id="topMaskRect"
                   left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
 
        <!-- bottom group mask -->
        <s:Group id="bottomGroupMask"
                left="1" top="1" right="1" bottom="1" 
                includeIn="normalWithControlBar, disabledWithControlBar">
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
 
        <!-- layer 1: border -->
        <s:Rect id="border"
                left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>
 
        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background"
                left="1" top="1" right="1" bottom="1">
            <s:fill>
                <s:BitmapFill id="backgroundFill" source="@Embed('skins/pattern_149.gif')" fillMode="repeat" />
            </s:fill>
        </s:Rect>
 
        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group id="contents"
                left="1" right="1" top="1" bottom="1">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>
 
            <s:Group id="topGroup" mask="{topGroupMask}">
 
                <!-- layer 0: title bar fill -->
                <s:Rect id="tbFill"
                        left="0" right="0" top="0" bottom="1">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xE2E2E2" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
 
                <!-- layer 1: title bar highlight -->
                <s:Rect id="tbHilite"
                        left="0" right="0" top="0" bottom="0">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0xEAEAEA" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
 
                <!-- layer 2: title bar divider -->
                <s:Rect id="tbDiv"
                        left="0" right="0" height="1" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0xC0C0C0" />
                    </s:fill>
                </s:Rect>
 
                <!-- layer 3: text -->
                <s:Label id="titleDisplay"
                        maxDisplayedLines="1"
                        left="9" right="3" top="1" bottom="0" minHeight="30"
                        verticalAlign="middle" fontWeight="bold">
                </s:Label>
            </s:Group>
 
            <!--
            Note: setting the minimum size to 0 here so that changes to the host component's
            size will not be thwarted by this skin part's minimum size.   This is a compromise,
            more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <s:Group id="contentGroup"
                    width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
 
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >
 
                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
 
                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
 
                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:LinearGradientStroke rotation="90" weight="1">
                                <s:GradientEntry color="0xE5E5E5" />
                                <s:GradientEntry color="0xD8D8D8" />
                            </s:LinearGradientStroke>
                        </s:stroke>
                    </s:Rect>
 
                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0xDADADA" />
                                <s:GradientEntry color="0xC5C5C5" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- layer 3: control bar -->
                <s:Group id="controlBarGroup"
                         left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
</s:SparkSkin>

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.

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.

 
]]> http://blog.flexexamples.com/2009/03/28/creating-a-repeating-background-fill-on-an-fxpanel-container-in-flex-gumbo/feed/ 1 Setting a repeating background image on a Spark Application in Flex 4 http://blog.flexexamples.com/2009/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/#comments Tue, 24 Mar 2009 05:21:17 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/ In a previous example, “Setting a background image on an Spark Application in Flex 4″, we saw how you can add a scaled background image to a Flex 4 Spark Application by creating a custom skin with a BitmapGraphic and setting the skinClass style in MXML, CSS, or ActionScript.

The following example shows how [...]]]> In a previous example, “Setting a background image on an Spark Application in Flex 4″, we saw how you can add a scaled background image to a Flex 4 Spark Application by creating a custom skin with a BitmapGraphic and setting the skinClass style in MXML, CSS, or ActionScript.

The following example shows how you can create a tiled background image by creating a custom skin, creating a repeating bitmap fill, and setting the skinClass style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/ -->
<s:Application name="Spark_Application_skinClass_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"
        skinClass="skins.CustomApplicationSkin"
        controlBarVisible="{chckBx.selected}">
    <s:controlBarContent>
        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

The custom skin class, skins/CustomApplicationSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/ -->
<s:Skin name="CustomApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5"
        alpha.disabledWithControlBar="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata> 
 
    <!-- fill -->
    <!--- 
    A rectangle with a solid color fill that forms the background of the application.
    The color of the fill is set to the Application's backgroundColor property.
    -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <s:BitmapFill source="@Embed('skins/pattern_147.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <!--- Application Control Bar -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                 includeIn="normalWithControlBar, disabledWithControlBar" >
 
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
                <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
 
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    </s:Group>
 
</s:Skin>

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.

You can also set the skinClass style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/ -->
<s:Application name="Spark_Application_skinClass_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Application {
            skinClass: ClassReference("skins.CustomApplicationSkin");
        }
    </fx:Style>
 
    <s:Label id="sdkVer"
            horizontalCenter="0" verticalCenter="0"
            initialize="sdkVer.text = mx_internal::VERSION;" />
 
</s:Application>

Or, you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/ -->
<s:Application name="Spark_Application_skinClass_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:Button id="btn"
                label="Click to set application skin"
                click="btn_clickHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import skins.CustomApplicationSkin;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                FlexGlobals.topLevelApplication.setStyle("skinClass", CustomApplicationSkin);
            }
        ]]>
    </fx:Script>
 
    <s:Label id="sdkVer"
            horizontalCenter="0" verticalCenter="0"
            initialize="sdkVer.text = mx_internal::VERSION;" />
 
</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/03/23/setting-a-repeating-background-image-on-an-fxapplication-in-flex-gumbo/feed/ 5 Repeating the background fill on a BitmapFill in Flex Gumbo http://blog.flexexamples.com/2008/12/08/repeating-the-background-fill-on-a-bitmapfill-in-flex-gumbo/ http://blog.flexexamples.com/2008/12/08/repeating-the-background-fill-on-a-bitmapfill-in-flex-gumbo/#comments Tue, 09 Dec 2008 07:31:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/08/repeating-the-background-fill-on-a-bitmapfill-in-flex-gumbo/ The following example shows how you can control the tiling of a bitmap fill on a Flex Gumbo Rect object by setting the Boolean repeat property on the BitmapFill object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- --> <Application name="BitmapFill_repeat_test" xmlns="http://ns.adobe.com/mxml/2009" layout="vertical" verticalAlign="middle" backgroundColor="white"> <ApplicationControlBar dock="true"> <Form styleName="plain"> [...]]]> The following example shows how you can control the tiling of a bitmap fill on a Flex Gumbo Rect object by setting the Boolean repeat property on the BitmapFill object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<Application name="BitmapFill_repeat_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="repeat:">
                <CheckBox id="checkBox" selected="true" />
            </FormItem>
            <FormItem label="width:">
                <HSlider id="widthSlider"
                        minimum="100"
                        maximum="300"
                        value="300"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="height:">
                <HSlider id="heightSlider"
                        minimum="100"
                        maximum="300"
                        value="200"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Rect id="rect"
                width="{widthSlider.value}"
                height="{heightSlider.value}">
            <fill>
                <BitmapFill id="bitmapFill"
                        repeat="{checkBox.selected}"
                        source="@Embed('assets/fx_appicon-tn.gif')" />
            </fill>
        </Rect>
    </Graphic>

</Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<Application name="BitmapFill_repeat_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.CheckBox;
            import mx.controls.HSlider;
            import mx.events.SliderEvent;
            import mx.graphics.BitmapFill;
            import mx.graphics.Graphic;
            import mx.graphics.Rect;

            [Embed("assets/fx_appicon-tn.gif")]
            private const FlexIcon:Class;

            private var checkBox:CheckBox;
            private var widthSlider:HSlider;
            private var heightSlider:HSlider;
            private var rect:Rect;
            private var bitmapFill:BitmapFill;

            private function init():void {
                checkBox = new CheckBox();
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                widthSlider = new HSlider();
                widthSlider.minimum = 100;
                widthSlider.maximum = 300;
                widthSlider.value = 300;
                widthSlider.snapInterval = 1;
                widthSlider.tickInterval = 50;
                widthSlider.liveDragging = true;
                widthSlider.addEventListener(SliderEvent.CHANGE, widthSlider_change);

                heightSlider = new HSlider();
                heightSlider.minimum = 100;
                heightSlider.maximum = 300;
                heightSlider.value = 300;
                heightSlider.snapInterval = 1;
                heightSlider.tickInterval = 50;
                heightSlider.liveDragging = true;
                heightSlider.addEventListener(SliderEvent.CHANGE, heightSlider_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "repeat:";
                formItem1.addChild(checkBox);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "width:";
                formItem2.addChild(widthSlider);

                var formItem3:FormItem = new FormItem();
                formItem3.label = "height:";
                formItem3.addChild(heightSlider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);
                form.addChild(formItem3);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                bitmapFill = new BitmapFill();
                bitmapFill.repeat = checkBox.selected;
                bitmapFill.source = FlexIcon;

                rect = new Rect();
                rect.width = 300;
                rect.height = 300;
                rect.fill = bitmapFill;

                var graphic:Graphic = new Graphic();
                graphic.addItem(rect);
                addChild(graphic);
            }

            private function checkBox_change(evt:Event):void {
                bitmapFill.repeat = checkBox.selected;
            }

            private function widthSlider_change(evt:SliderEvent):void {
                rect.width = evt.value;
            }

            private function heightSlider_change(evt:SliderEvent):void {
                rect.height = evt.value;
            }
        ]]>
    </Script>

</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.

 
]]> http://blog.flexexamples.com/2008/12/08/repeating-the-background-fill-on-a-bitmapfill-in-flex-gumbo/feed/ 2 Setting a bitmap fill on a shape in Flex Gumbo http://blog.flexexamples.com/2008/12/07/setting-a-bitmap-fill-on-a-shape-in-flex-gumbo/ http://blog.flexexamples.com/2008/12/07/setting-a-bitmap-fill-on-a-shape-in-flex-gumbo/#comments Mon, 08 Dec 2008 03:25:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/07/setting-a-bitmap-fill-on-a-shape-in-flex-gumbo/ The following example shows how you can set a bitmap fill on an Flex Gumbo Ellipse object by setting the source property on the BitmapFill object.

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. [...]]]> The following example shows how you can set a bitmap fill on an Flex Gumbo Ellipse object by setting the source property on the BitmapFill object.

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/2008/12/07/setting-a-bitmap-fill-on-a-shape-in-flex-gumbo/ -->
<Application name="BitmapFill_source_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="width:">
                <HSlider id="widthSlider"
                        minimum="100"
                        maximum="300"
                        value="300"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="height:">
                <HSlider id="heightSlider"
                        minimum="100"
                        maximum="300"
                        value="200"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Ellipse id="ellipse"
                width="{widthSlider.value}"
                height="{heightSlider.value}">
            <fill>
                <BitmapFill id="bitmapFill"
                        source="@Embed('assets/fx_appicon-tn.gif')" />
            </fill>
        </Ellipse>
    </Graphic>

</Application>

View source is enabled in the following example.

You can also embed the asset using ActionScript and set the BitmapFill source using data binding, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/07/setting-a-bitmap-fill-on-a-shape-in-flex-gumbo/ -->
<Application name="BitmapFill_source_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            [Embed("assets/fx_appicon-tn.gif")]
            private const FlexIcon:Class;
        ]]>
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="width:">
                <HSlider id="widthSlider"
                        minimum="100"
                        maximum="300"
                        value="300"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="height:">
                <HSlider id="heightSlider"
                        minimum="100"
                        maximum="300"
                        value="200"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Ellipse id="ellipse"
                width="{widthSlider.value}"
                height="{heightSlider.value}">
            <fill>
                <BitmapFill id="bitmapFill"
                        source="{FlexIcon}" />
            </fill>
        </Ellipse>
    </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.

 
]]> http://blog.flexexamples.com/2008/12/07/setting-a-bitmap-fill-on-a-shape-in-flex-gumbo/feed/ 0