Flex Examples » rotation http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a gradient background fill on a Spark TextArea control in Flex 4 http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/#comments Sat, 24 Oct 2009 22:44:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=2079 In a previous example, “Setting a gradient background fill on a Halo TextArea control in Flex 4″, we saw how you could create a linear gradient background on a Halo/MX TextArea control in Flex 4 by creating a custom border skin with a LinearGradient fill and setting the borderSkin style.

The following example shows [...]]]> In a previous example, “Setting a gradient background fill on a Halo TextArea control in Flex 4″, we saw how you could create a linear gradient background on a Halo/MX TextArea control in Flex 4 by creating a custom border skin with a LinearGradient fill and setting the borderSkin style.

The following example shows how you can create a linear gradient background on a Spark TextArea control in Flex 4 by modifying the background fill in the TextArea control’s skin to a LinearGradient.

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/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_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:controlBarContent>
        <s:Button id="btn"
                label="Set TextArea background gradient"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.graphics.GradientEntry;
            import mx.graphics.LinearGradient;
            import mx.utils.ObjectUtil;
            import spark.skins.spark.TextAreaSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                var grad1:GradientEntry = new GradientEntry(0xFF0000);
                var grad2:GradientEntry = new GradientEntry(0xFF00FF);
 
                var linearGrad:LinearGradient = new LinearGradient();
                linearGrad.entries = [grad1, grad2];
                linearGrad.rotation = 90;
 
                TextAreaSkin(ta.skin).background.fill = linearGrad;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.


You can also set the background fill to a gradient using a custom TextArea skin and then set the skinClass style, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_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:TextArea id="ta"
            text="{Capabilities.serverString}"
            skinClass="skins.CustomTextAreaSkin"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark TextArea skin, skins/CustomTextAreaSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<s:SparkSkin name="CustomTextAreaSkin"
        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"
        blendMode="normal">
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.TextArea")]
        ]]>
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            private var paddingChanged:Boolean;
 
            /* Define the skin elements that should not be colorized.
            For text area, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["background", "scroller"];
 
            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 commitProperties():void {
                super.commitProperties();
 
                if (paddingChanged) {
                    updatePadding();
                    paddingChanged = false;
                }
            }
 
            override protected function initializationComplete():void {
                useBaseColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    shadow.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
                } else {
                    border.visible = false;
                    shadow.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function updatePadding():void {
                if (!textDisplay) {
                    return;
                }
 
                // Push padding styles into the textDisplay
                var padding:Number;
 
                padding = getStyle("paddingLeft");
                if (textDisplay.getStyle("paddingLeft") != padding) {
                    textDisplay.setStyle("paddingLeft", padding);
                }
 
                padding = getStyle("paddingTop");
                if (textDisplay.getStyle("paddingTop") != padding) {
                    textDisplay.setStyle("paddingTop", padding);
                }
 
                padding = getStyle("paddingRight");
                if (textDisplay.getStyle("paddingRight") != padding) {
                    textDisplay.setStyle("paddingRight", padding);
                }
 
                padding = getStyle("paddingBottom");
                if (textDisplay.getStyle("paddingBottom") != padding) {
                    textDisplay.setStyle("paddingBottom", padding);
                }
            }
 
            override public function styleChanged(styleProp:String):void {
                super.styleChanged(styleProp);
 
                if (!styleProp || styleProp.indexOf("padding") == 0) {
                    paddingChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            override public function get focusSkinExclusions():Array {
                return [ textDisplay ]
            };
        ]]>
    </fx:Script>
 
    <!-- 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>
 
    <!-- fill -->
    <!--- Defines the appearance of the TextArea component's background. -->
    <s:Rect id="background"
            left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="purple" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect id="shadow"
            left="1" top="1" right="1" height="1">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
 
    <!--- Defines the scroller used to scroll the RichEditableText. -->
    <s:Scroller id="scroller"
            left="0" top="0" right="0" bottom="0"
            minViewportInset="1"
            measuredSizeIncludesScrollBars="false">
        <s:RichEditableText id="textDisplay"
                widthInChars="15" heightInLines="10" />
    </s:Scroller>
 
</s:SparkSkin>

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/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|TextArea {
            skinClass: ClassReference("skins.CustomTextAreaSkin");
        }
    </fx:Style>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</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/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_skin_background_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:controlBarContent>
        <s:Button id="btn"
                label="Set TextArea background gradient"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomTextAreaSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                ta.setStyle("skinClass", CustomTextAreaSkin);
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</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/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/feed/ 5 Setting the origin X and Y coordinate for a linear gradient stroke in Flex Gumbo http://blog.flexexamples.com/2009/01/04/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-stroke-in-flex-gumbo/ http://blog.flexexamples.com/2009/01/04/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-stroke-in-flex-gumbo/#comments Mon, 05 Jan 2009 07:42:11 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/04/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-stroke-in-flex-gumbo/ The following example shows how you can set the origin X and Y coordinate for a linear gradient stroke in Flex Gumbo by setting the x and y properties on the LinearGradientStroke object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo [...]]]> The following example shows how you can set the origin X and Y coordinate for a linear gradient stroke in Flex Gumbo by setting the x and y properties on the LinearGradientStroke 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/2009/01/04/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-stroke-in-flex-gumbo/ -->
<Application name="LinearGradientStroke_x_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="x:">
                <HSlider id="xSlider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="y:">
                <HSlider id="ySlider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="rotation:">
                <HSlider id="rotationSlider"
                        minimum="-360"
                        maximum="360"
                        value="0"
                        snapInterval="1"
                        tickInterval="45"
                        liveDragging="true" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Rect id="rect" width="300" height="200">
            <stroke>
                <LinearGradientStroke id="linearGrad"
                        x="{xSlider.value}"
                        y="{ySlider.value}"
                        rotation="{rotationSlider.value}"
                        weight="5">
                    <GradientEntry color="red" />
                    <GradientEntry color="white" />
                    <GradientEntry color="blue" />
                </LinearGradientStroke>
            </stroke>
        </Rect>
    </Graphic>

</Application>

View source is enabled in the following example.

You can also set the LinearGradientStroke object’s x, y, and rotation properties using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/04/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-stroke-in-flex-gumbo/ -->
<Application name="LinearGradientStroke_x_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function xSlider_change(evt:SliderEvent):void {
                linearGrad.x = evt.value;
            }

            private function ySlider_change(evt:SliderEvent):void {
                linearGrad.y = evt.value;
            }

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

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="x:">
                <HSlider id="xSlider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true"
                        change="xSlider_change(event);" />
            </FormItem>
            <FormItem label="y:">
                <HSlider id="ySlider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true"
                        change="ySlider_change(event);" />
            </FormItem>
            <FormItem label="rotation:">
                <HSlider id="rotationSlider"
                        minimum="-360"
                        maximum="360"
                        value="0"
                        snapInterval="1"
                        tickInterval="45"
                        liveDragging="true"
                        change="rotationSlider_change(event);" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Rect id="rect" width="300" height="200">
            <stroke>
                <LinearGradientStroke id="linearGrad"
                        x="{xSlider.value}"
                        y="{ySlider.value}"
                        rotation="{rotationSlider.value}"
                        weight="5">
                    <GradientEntry color="red" />
                    <GradientEntry color="white" />
                    <GradientEntry color="blue" />
                </LinearGradientStroke>
            </stroke>
        </Rect>
    </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/2009/01/04/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-stroke-in-flex-gumbo/feed/ 0 Setting the rotation of a linear gradient stroke in Flex Gumbo http://blog.flexexamples.com/2009/01/03/setting-the-rotation-of-a-linear-gradient-stroke-in-flex-gumbo/ http://blog.flexexamples.com/2009/01/03/setting-the-rotation-of-a-linear-gradient-stroke-in-flex-gumbo/#comments Sun, 04 Jan 2009 07:59:45 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/03/setting-the-rotation-of-a-linear-gradient-stroke-in-flex-gumbo/ The following example shows how you can set the angle of a LinearGradientStroke stroke on a Flex Gumbo Ellipse object by setting the rotation property on the LinearGradientStroke 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 [...]]]> The following example shows how you can set the angle of a LinearGradientStroke stroke on a Flex Gumbo Ellipse object by setting the rotation property on the LinearGradientStroke 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/2009/01/03/setting-the-rotation-of-a-linear-gradient-stroke-in-flex-gumbo/ -->
<Application name="LinearGradientStroke_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>
        <Rect id="rect" width="300" height="200">
            <stroke>
                <LinearGradientStroke id="linearGrad"
                        rotation="{slider.value}"
                        weight="10">
                    <entries>
                        <GradientEntry color="red" />
                        <GradientEntry color="white" />
                        <GradientEntry color="blue" />
                    </entries>
                </LinearGradientStroke>
            </stroke>
        </Rect>
    </Graphic>

</Application>

View source is enabled in the following example.

You can 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/2009/01/03/setting-the-rotation-of-a-linear-gradient-stroke-in-flex-gumbo/ -->
<Application name="LinearGradientStroke_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>
        <Rect id="rect" width="300" height="200">
            <stroke>
                <LinearGradientStroke id="linearGrad"
                        weight="10">
                    <entries>
                        <GradientEntry color="red" />
                        <GradientEntry color="white" />
                        <GradientEntry color="blue" />
                    </entries>
                </LinearGradientStroke>
            </stroke>
        </Rect>
    </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/2009/01/03/setting-the-rotation-of-a-linear-gradient-stroke-in-flex-gumbo/feed/ 0 Smoothing images using the BitmapGraphic object in Flex Gumbo http://blog.flexexamples.com/2008/12/20/smoothing-images-using-the-bitmapgraphic-object-in-flex-gumbo/ http://blog.flexexamples.com/2008/12/20/smoothing-images-using-the-bitmapgraphic-object-in-flex-gumbo/#comments Sun, 21 Dec 2008 07:32:44 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/20/smoothing-images-using-the-bitmapgraphic-object-in-flex-gumbo/ The following example shows how you can smooth a Flex Gumbo BitmapGraphic object by setting the Boolean smooth property.

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 following example shows how you can smooth a Flex Gumbo BitmapGraphic object by setting the Boolean smooth property.

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/20/smoothing-images-using-the-bitmapgraphic-object-in-flex-gumbo/ -->
<Application name="BitmapGraphic_smooth_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="smooth:">
                <CheckBox id="checkBox" />
            </FormItem>
            <FormItem label="rotation:">
                <HSlider id="slider"
                        minimum="0"
                        maximum="360"
                        snapInterval="1"
                        tickInterval="15"
                        liveDragging="true" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <BitmapGraphic id="bitmapGraphic"
                source="@Embed('assets/fx_appicon-tn.gif')"
                rotation="{slider.value}"
                smooth="{checkBox.selected}" />
    </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/20/smoothing-images-using-the-bitmapgraphic-object-in-flex-gumbo/feed/ 0 Setting the origin X and Y coordinate for a linear gradient fill in Flex Gumbo http://blog.flexexamples.com/2008/11/30/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-fill-in-flex-gumbo/ http://blog.flexexamples.com/2008/11/30/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-fill-in-flex-gumbo/#comments Mon, 01 Dec 2008 07:50:35 +0000 Peter deHaan http://blog.flexexamples.com/2008/11/30/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-fill-in-flex-gumbo/ The following example shows how you can set the origin X and Y coordinate for a linear gradient fill in Flex Gumbo by setting the x and y properties on the LinearGradient object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/11/30/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-fill-in-flex-gumbo/ --> <Application name="LinearGradient_x_test" xmlns="http://ns.adobe.com/mxml/2009" layout="vertical" verticalAlign="middle" backgroundColor="white"> [...]]]> The following example shows how you can set the origin X and Y coordinate for a linear gradient fill in Flex Gumbo by setting the x and y properties on the LinearGradient object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/30/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-fill-in-flex-gumbo/ -->
<Application name="LinearGradient_x_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="x:">
                <HSlider id="xSlider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="y:">
                <HSlider id="ySlider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="rotation:">
                <HSlider id="rotationSlider"
                        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"
                        x="{xSlider.value}"
                        y="{ySlider.value}"
                        rotation="{rotationSlider.value}">
                    <GradientEntry color="red" />
                    <GradientEntry color="white" />
                    <GradientEntry color="blue" />
                </LinearGradient>
            </fill>
        </Ellipse>
    </Graphic>

</Application>

View source is enabled in the following example.

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/11/30/setting-the-origin-x-and-y-coordinate-for-a-linear-gradient-fill-in-flex-gumbo/feed/ 0 Setting the rotation of a linear gradient in Flex Gumbo http://blog.flexexamples.com/2008/11/29/setting-the-rotation-of-a-linear-gradient-in-flex-gumbo/ http://blog.flexexamples.com/2008/11/29/setting-the-rotation-of-a-linear-gradient-in-flex-gumbo/#comments Sun, 30 Nov 2008 05:26:25 +0000 Peter deHaan http://blog.flexexamples.com/2008/11/29/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" [...]]]> 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>
 
]]> http://blog.flexexamples.com/2008/11/29/setting-the-rotation-of-a-linear-gradient-in-flex-gumbo/feed/ 0