keep 'down' state for spark skin button

Question

I have spark skin a button with up, down, over, and disable states in a button component to create a modular. Is there a way when the user press and hold a key, the button will remain in 'down' state?

The button component include skinclass:

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    skinClass="wfm.keyBtn">
</s:Button>

Spark skin:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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:Metadata>
  [HostComponent("spark.components.Button")]
 </fx:Metadata>
 <s:states>
  <s:State name="up"/>
  <s:State name="over"/>
  <s:State name="down"/>
  <s:State name="disabled"/>
 </s:states>
 <s:Rect width="18" height="80" height.down="83" radiusX="1">
  <s:stroke>
   <s:SolidColorStroke color="0xaaaaaa" weight="1"/>
  </s:stroke>
  <s:filters>
   <s:BevelFilter
    distance="0"
    angle="5" angle.down="5"
    highlightColor="0xbbbbbb" highlightColor.down="0xaaaaaa"
    highlightAlpha="1" highlightAlpha.down="1"
    shadowColor="0xaaaaaa" shadowColor.down="0xffffff"
    shadowAlpha="1" shadowAlpha.down="1"
    blurX="5" blurX.down="6"
    blurY="5" blurY.down="6"
    strength="2" strength.down="2"
    type="inner"
    />
  </s:filters>
  <s:fill>
   <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xf3f3f3" color.down="0xfff963" />
   </s:LinearGradient>
  </s:fill>
 </s:Rect>
</s:SparkSkin>

Answer 1

Create a subclass of Button and tell the skin to be in the down state whenever the key you care about is down. Also, whenever you detect the key is down (or no longer down), invalidate the skin state so the skin knows to check what state it should be in:

package mypackage
{
    import spark.components.Button;

    public class MyButton extends Button
    {
        private var _isKeyDown:Boolean = false;

        private function get isKeyDown():Boolean {
            return _isKeyDown;
        }

        private function set isKeyDown(b:Boolean):void {
            _isKeyDown = b;
            this.invalidateSkinState();
        }

        // Add handlers in here to set isKeyDown to true/false appropriately

        override protected function getCurrentSkinState():String {
            if (isKeyDown)
                return "down";
            else
                return super.getCurrentSkinState();
        }
    }
}