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>

When user presses and holds Space it is in down state until user releases Space. Do you want to do the same for some other key? — Maxim Kachurovskiy

Wade Mueller Wade Mueller · Accepted Answer · 2010-10-20T22:11:53

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();
        }
    }
}

keep 'down' state for spark skin button

1 Answers