I have a Button object in my application that glows when a certain condition is true. When that condition is false, the glow Effect must be removed. When I initially took a stab at this, I was using the setStyle() method of the Button object in an attempt to set the showEffect property of the Button. With this method, I needed to hide and then immediately show the Button. This felt like a hack, and it was…

<mx:Button id="messageButton" label="Simple Button"
      showEffect="{glowEffect}"
      toolTip="Click to read the alert" />

<mx:Script>
   <![CDATA[

      public function glowElement(condition:Boolean):void
      {
         messageButton.visible = false;
         if (condition == true)
         {
            messageButton.setStyle("showEffect", glowEffect);
         } else {
            messageButton.setStyle("showEffect", "");
         }
         messageButton.visible = true;
      }

   ]]>
</mx:Script>

This information took me a while to find, so I’m publishing an article to make the info more available. Most examples you find involve effects being added, or assigned, based on user gestures or standard events.

However, if you want to remove an effect while the control to which it is applied has not changed its state in any way, the proper way is to set the target property of the effect to the control to which you want to apply it.

<mx:Glow id="glowEffect" target="{messageButton}"
        duration="1000" repeatCount="0" repeatDelay="2000"
        alphaFrom="1.0" alphaTo="0.25"
        color="0xFF0000"/>

<mx:Button id="messageButton" label="Simple Button"
      toolTip="Click to read the alert" />

Then when some condition is met in your application, you simply call the end() and play() methods of the effect.

<mx:Script>
   <![CDATA[

      public function glowElement(condition:Boolean):void
      {
         if (condition == true)
         {
            glowEffect.end();
         } else {
            glowEffect.play();
         }
      }

   ]]>
</mx:Script>