Custom Component in Flex 4 (Gumbo). A Knob Button - part 1.

    //--------------------------------------------------------------------------
    //
    //  States & Skin Parts
    //
    //--------------------------------------------------------------------------
 
     /**
	 *  Up State of the Button
	 */
	[SkinState("up")]
 
	/**
	 *  Over State of the Button
	 */
	[SkinState("over")]
 
	/**
	 *  Down State of the Button
	 */
	[SkinState("down")]
 
	/**
	 *  Disabled State of the Button
	 */
	[SkinState("disabled")]
 
    protected var isOver:Boolean;
    protected var isDown:Boolean;
 
     /**
     *  A skin part that defines the knob.
     *  TODO: Use a strict type once the Skin is defined
     */
    [SkinPart(required="true")]
    public var knob:*;
 
     /**
     *  Add Handlers to the knob part
     */
    override protected function partAdded(partName:String, instance:Object):void
    {
        super.partAdded(partName, instance);
        if (partName == "knob") {
        	  addInitialHandlers();
        }
    }
 
    /**
     * Remove Handlers from the knob part
     * @param partName
     * @param instance
     *
     */
    override protected function partRemoved(partName:String, instance:Object):void {
    	 super.partRemoved(partName, instance);
    	 if (partName == "knob") {
        	  removeInitialHandlers();
        	  removeMoveHandlers();
        }
    }
 
    /**
     * This is called by the Framework. We need to keep track of the state and
     * return it here. Called by Flex after a call to invalidateSkinState()
     * @return The current state of the Component
     *
     */
    override protected function getCurrentSkinState():String
    {
         if (!enabled)
            return "disabled";
 
        if (isDown)
            return "down";
 
        if (isOver)
            return "over";
 
        return "up";
    }

<!-- states -->
	<states>
		<State name="up" />
		<State name="over" />
		<State name="down" />
		<State name="disabled" />
	</states>
 
	<!-- The required Knob Skin Part -->
	<Ellipse id="knob" width="{this.width}" height="{this.height}" horizontalCenter="0" verticalCenter="0">
		 <stroke>
            <SolidColorStroke  weight="2" weight.over="3" weight.down="4" color="{c2}" color.over="{c2}" color.down="{c1}">
 
            </SolidColorStroke>
        </stroke>
        <fill>
        	<LinearGradient >
                    <entries>
                        	<GradientEntry color="{c1}" ratio="0"  />
                         	<GradientEntry color="{c2}" ratio=".35"  />
                         	<GradientEntry color="{c3}" ratio=".4"  />
                          	<GradientEntry color="{c4}" ratio="1"  />
                    </entries>
                </LinearGradient>
        </fill>
	</Ellipse>
 
	<!-- Additional stuff to spice up the knob. Not Required -->
	<Ellipse blendMode="overlay" width="{this.width}" height="{this.height}" horizontalCenter="0" verticalCenter="0">
        <fill>
        	<RadialGradient focalPointRatio="-.5" rotation="45">
        		<entries>
        			<GradientEntry color="0xffffff" ratio="0"   />
                     <GradientEntry color="0xd0d0d0" ratio=".65"  />
                     <GradientEntry color="0xb0b0b0" ratio=".85"  />
                     <GradientEntry color="0xa0a0a0" ratio="1"  />
        		</entries>
        	</RadialGradient>
 
        </fill>
	</Ellipse>
 
	<!-- A filter to make it a little more interesting. Not required -->
	<filters>
       <DropShadowFilter blurX="4" blurY="4" alpha="0.32" distance="3" distance.down="0" angle="45" knockout="false" />
    </filters>