Setting the rotation of a linear gradient in Flex Gumbo

The following example shows how you can set the angle of a LinearGradient fill on a Flex Gumbo Ellipse object by setting the rotation property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/29/setting-the-rotation-of-a-linear-gradient-in-flex-gumbo/ -->
<Application name="LinearGradient_rotation_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="rotation:">
                <HSlider id="slider"
                        minimum="-360"
                        maximum="360"
                        value="0"
                        snapInterval="1"
                        tickInterval="45"
                        liveDragging="true" />

            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Ellipse id="ellipse" width="300" height="200">
            <fill>
                <LinearGradient id="linearGrad"
                        rotation="{slider.value}">
                    <GradientEntry color="red" />
                    <GradientEntry color="white" />
                    <GradientEntry color="blue" />
                </LinearGradient>
            </fill>
        </Ellipse>
    </Graphic>

</Application>

View source is enabled in the following example.

You could also set the rotation property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/29/setting-the-rotation-of-a-linear-gradient-in-flex-gumbo/ -->
<Application name="LinearGradient_rotation_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                linearGrad.rotation = evt.value;
            }
        ]]>
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="rotation:">
                <HSlider id="slider"
                        minimum="-360"
                        maximum="360"
                        value="0"
                        snapInterval="1"
                        tickInterval="45"
                        liveDragging="true"
                        change="slider_change(event);" />

            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Ellipse id="ellipse" width="300" height="200">
            <fill>
                <LinearGradient id="linearGrad">
                    <GradientEntry color="red" />
                    <GradientEntry color="white" />
                    <GradientEntry color="blue" />
                </LinearGradient>
            </fill>
        </Ellipse>
    </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"?>
<!-- http://blog.flexexamples.com/2008/11/29/setting-the-rotation-of-a-linear-gradient-in-flex-gumbo/ -->
<Application name="LinearGradient_rotation_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.HSlider;
            import mx.events.SliderEvent;
            import mx.graphics.Ellipse;
            import mx.graphics.GradientEntry;
            import mx.graphics.Graphic;
            import mx.graphics.LinearGradient

            private var ellipse:Ellipse;
            private var linearGrad:LinearGradient;
            private var slider:HSlider;

            private function init():void {
                slider = new HSlider();
                slider.minimum = -360;
                slider.maximum = 360;
                slider.value = 0;
                slider.snapInterval = 1;
                slider.tickInterval = 45;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "rotation:";
                formItem.addChild(slider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

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

                var entryArr:Array = [];
                entryArr.push(new GradientEntry(0xFF0000)); // red
                entryArr.push(new GradientEntry(0xFFFFFF)); // white
                entryArr.push(new GradientEntry(0x0000FF)); // blue

                linearGrad = new LinearGradient();
                linearGrad.entries = entryArr;

                ellipse = new Ellipse();
                ellipse.fill = linearGrad;
                ellipse.width = 300;
                ellipse.height = 200;

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

            private function slider_change(evt:SliderEvent):void {
                linearGrad.rotation = evt.value;
                // or
                // LinearGradient(ellipse.fill).rotation = evt.value;
            }
        ]]>
    </Script>

</Application>