Creating a solid color fill on a Spark Ellipse object in Flex 4

The following example shows how you can create a solid color fill on a Spark Ellipse object in Flex 4 by setting the fill property to a SolidColor object.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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/2008/11/26/creating-a-solid-color-fill-on-an-ellipse-object-in-flex-gumbo/ -->
<s:Application name="Spark_Ellipse_fill_solidColor_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>
        <mx:Form>
            <mx:FormItem label="color:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
            <mx:FormItem label="alpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        stepSize="0.1" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Ellipse id="ellipse"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:fill>
            <s:SolidColor color="{colorPicker.selectedColor}"
                    alpha="{slider.value}" />
        </s:fill>
    </s:Ellipse>
 
</s:Application>

View source is enabled in the following example.

You can also set the SolidColor object’s color and alpha properties using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/26/creating-a-solid-color-fill-on-an-ellipse-object-in-flex-gumbo/ -->
<s:Application name="Spark_Ellipse_fill_solidColor_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:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_changeHandler(evt:ColorPickerEvent):void {
                solidColor.color = evt.color;
            }
 
            protected function slider_changeHandler(evt:Event):void {
                solidColor.alpha = evt.currentTarget.value;
            }
        ]]>
    </fx:Script>
 
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="color:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="alpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        stepSize="0.1"
                        change="slider_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Ellipse id="ellipse"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:fill>
            <s:SolidColor id="solidColor" />
        </s:fill>
    </s:Ellipse>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/26/creating-a-solid-color-fill-on-an-ellipse-object-in-flex-gumbo/ -->
<s:Application name="Spark_Ellipse_fill_solidColor_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ColorPicker;
            import mx.events.ColorPickerEvent;
            import mx.graphics.SolidColor;
            import spark.components.HSlider;
            import spark.primitives.Ellipse;
 
            protected var colorPicker:ColorPicker;
            protected var slider:HSlider;
            protected var ellipse:Ellipse;
            protected var solidColor:SolidColor;
 
            protected function init():void {
                colorPicker = new ColorPicker();
                colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_changeHandler);
 
                slider = new HSlider();
                slider.minimum = 0.0;
                slider.maximum = 1.0;
                slider.value = 1.0;
                slider.snapInterval = 0.1;
                slider.stepSize = 0.1;
                slider.addEventListener(Event.CHANGE, slider_changeHandler);
 
                var formItem1:FormItem = new FormItem();
                formItem1.label = "color:";
                formItem1.addElement(colorPicker);
 
                var formItem2:FormItem = new FormItem();
                formItem2.label = "alpha:";
                formItem2.addElement(slider);
 
                var form:Form = new Form();
                form.addElement(formItem1);
                form.addElement(formItem2);
 
                this.controlBarContent = [form];
 
                solidColor = new SolidColor(colorPicker.selectedColor, slider.value);
 
                ellipse = new Ellipse();
                ellipse.fill = solidColor;
                ellipse.width = 300;
                ellipse.height = 200;
                ellipse.horizontalCenter = 0;
                ellipse.verticalCenter = 0;
                addElement(ellipse);
            }
 
            protected function colorPicker_changeHandler(evt:ColorPickerEvent):void {
                solidColor.color = evt.color;
            }
 
            protected function slider_changeHandler(evt:Event):void {
                solidColor.alpha = evt.currentTarget.value;
            }
        ]]>
    </fx:Script>
 
</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.

5 thoughts on “Creating a solid color fill on a Spark Ellipse object in Flex 4

  1. Are this Fx going to replace the mx: namespace? I am wondering if I should start coding my app in Gumbo and then make the changes once is final.

    Suggestions?

  2. Raul Riera,

    The 2009 namespace will replace the 2006 namespace. The 2009 namespace will also contain both the Gumbo (Fx*) components and the older Halo components. Personally, I’m not sure if all the Halo components will be migrated to Gumbo components right away though. The good news is that you can use both Gumbo and Halo based components in the same application. Likewise, you can continue to use the Halo Application container or you can use the Gumbo FxApplication container in your Flex applications.

    Gumbo is still somewhat “beta”, and isn’t expected to be final until the second half of 2009 (according to the Gumbo page on opensource.adobe.com). But if you want to start developing applications with Gumbo, please do! We appreciate any bugs you find and file in the bug base (bugs.adobe.com/flex/).

    Regards,
    Peter

    1. @prolabi,

      Sure, you can use a SolidColor fill:

      <s:Ellipse id="ellipse"
                 width="300" height="200"
                 horizontalCenter="0" verticalCenter="0">
          <s:fill>
              <s:SolidColor color="red" alpha="0.33" />
          </s:fill>
      </s:Ellipse>

      Or a LinearGradient fill:

      <s:Ellipse id="ellipse"
                 width="300" height="200"
                 horizontalCenter="0" verticalCenter="0">
          <s:fill>
              <s:LinearGradient rotation="45">
                  <s:entries>
                      <s:GradientEntry color="red" alpha="0.33" />
                      <s:GradientEntry color="purple" alpha="0.66" />
                  </s:entries>
              </s:LinearGradient>
          </s:fill>
      </s:Ellipse>

      Or a RadialGradient fill:

      <s:Ellipse id="ellipse"
                 width="300" height="200"
                 horizontalCenter="0" verticalCenter="0">
          <s:fill>
              <s:RadialGradient rotation="45">
                  <s:entries>
                      <s:GradientEntry color="red" alpha="0.33" />
                      <s:GradientEntry color="yellow" alpha="0.5" />
                      <s:GradientEntry color="purple" alpha="0.66" />
                  </s:entries>
              </s:RadialGradient>
          </s:fill>
      </s:Ellipse>

      Or a BitmapFill fill:

      <s:Ellipse id="ellipse"
              width="300" height="200"
              horizontalCenter="0" verticalCenter="0">
          <s:fill>
              <s:BitmapFill source="@Embed('assets/pattern_143.gif" fillMode="repeat" />
          </s:fill>
      </s:Ellipse>

      Peter

Comments are closed.