Setting the origin X and Y coordinate for a radial gradient fill in Flex Gumbo

In a previous example, “Creating a radial gradient fill on a Rect object in Flex Gumbo”, we saw how you could create a radial gradient fill on a Flex Gumbo Rect object by setting the fill property to a RadialGradient object.

The following example shows how you can set the origin X and Y coordinate for a radial gradient fill in Flex Gumbo by setting the x and y properties on the RadialGradient 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/24/setting-the-origin-x-and-y-coordinate-for-a-radial-gradient-fill-in-flex-gumbo/ -->
<Application name="Rect_fill_RadialGradient_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="sliderX"
                        minimum="-150"
                        maximum="450"
                        value="150"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
            <FormItem label="y:">
                <HSlider id="sliderY"
                        minimum="-100"
                        maximum="300"
                        value="100"
                        snapInterval="1"
                        tickInterval="50"
                        liveDragging="true" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Graphic>
        <Rect id="rect" width="300" height="200">
            <fill>
                <RadialGradient x="{sliderX.value}" y="{sliderY.value}">
                    <entries>
                        <GradientEntry color="red" />
                        <GradientEntry color="white" />
                        <GradientEntry color="blue" />
                    </entries>
                </RadialGradient>
            </fill>
        </Rect>
    </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.

One thought on “Setting the origin X and Y coordinate for a radial gradient fill in Flex Gumbo

  1. If Adobe had reference as good as your blog, people wouldn’t be talking about the death of flash. People wouldn’t be crying out for Adobe’s head. Sure the massive commercial cost of their products is a part of it, but that’s being solved as we speak.

    A little more push towards subscription based software, a zealous effort to reduce processor overhead and power consumption on mobile devices, and a solid and full-filled commitment to the OpenSource community will solve all these things. And modifying the plug-in to handle the insane tasks of 3-4 crappy basement-budget Ads on the pages of the dark back alleys and red light districts of the world wide network of light & electron would definitely help their reputation.

    But the death of flash will still be on the lips of frustrated developers and users until Adobe’s documentation efforts go past Tutorial Videos and a scattered reference system. It will be reference material like this blog that will save Adobe from internet obsolesce. If they aren’t paying you or you don’t work for them, please show them this comment. I have to use flash to for the webcam functions I need right now, but I’d otherwise be ditching their product for the HTML5 hype if it wasn’t for this blog.

Comments are closed.