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

2 thoughts on “Repeating the background fill on a BitmapFill in Flex Gumbo

  1. Hello Peter!! Sorry for offtopic..but can u post some examples about how to pause or stop all application (include all playing animations, sounds,videos etc.) on rollOut (after some time maybe) and resume it all after rollOver ?
    And Thanxx for posting such great examples in ur blog!! I love it!!

Comments are closed.