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

By Peter deHaan On November 26, 2008 · 5 Comments

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

 
Tagged with: •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

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

  1. Raul Riera says:
    November 26, 2008 at 7:39 am

    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?

    Reply
  2. peterd says:
    November 26, 2008 at 5:04 pm

    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

    Reply
  3. Raul Riera says:
    November 28, 2008 at 7:51 am

    Thanks Peter, will do

    Reply
  4. prolabi says:
    April 17, 2010 at 7:22 am

    what a nice tutorial,

    but how about creating ellipses with multiple color, not a solid one ??

    Reply
    • Peter deHaan says:
      April 17, 2010 at 9:07 am

      @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

      Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree