3 Replies Latest reply on Nov 7, 2011 8:10 AM by mitz11

    Fading glow on button press

    mitz11 Level 1

      I am trying to get a glow filter (sparks) to appear instantly when you press a button, and then slowly fade away, regardless of where you move the cursor, or if you press other buttons, etc.  The way I have it, it works only until you move the mouse cursor off of the button, at which point the transition is interrupted and stops.  Here's the code:

       

      <fx:Declarations>

                          <s:GlowFilter id="glowFilter" color="#FFFFFF" strength="4"/>

                </fx:Declarations>

       

                <s:transitions>

                          <s:Transition fromState="down" toState="*" interruptionBehavior="stop">

                                    <s:AnimateFilter target="{fill}" bitmapFilter="{glowFilter}" duration="1000">

                                              <s:SimpleMotionPath property="alpha" valueFrom="1" valueTo="0"/>

                                    </s:AnimateFilter>

                          </s:Transition>

                </s:transitions>

       

                <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="3">

                               <s:fill>

                                              <s:LinearGradient rotation="45" rotation.down="225">

                                                        <s:GradientEntry id="fillGradient1" color="0x003896"

                                                                                                      color.down="0x001948"

                                                                                                      alpha="0.85" />

                                                        <s:GradientEntry id="fillGradient2" color="0x1a75cf"

                                                                                                      color.down="0x003896"

                                                                                                      alpha="0.85" />

                                              </s:LinearGradient>

                               </s:fill>

                               <s:filters>

                                         <s:BevelFilter excludeFrom="down, disabled"/>

                               </s:filters>

                </s:Rect>

       

      There are other layers and stuff going on in the skin, but I don't think it's important. 

        • 1. Re: Fading glow on button press
          mitz11 Level 1

          ignore the  interruptionBehavior="stop" part, I've tried with and without it.

          • 2. Re: Fading glow on button press
            Shongrunden Adobe Employee

            You'll want to use interruptionBehavior="stop" and also define a transition for the over to up state, for example:

            <?xml version="1.0" encoding="utf-8"?>

            <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         alpha.disabled="0.5">

                <fx:Metadata>

                    <![CDATA[

                        [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:transitions>

                    <s:Transition fromState="down" toState="*" interruptionBehavior="stop">

                        <s:Fade target="{downFilter}" />

                    </s:Transition>

                    <s:Transition fromState="over" toState="up" interruptionBehavior="stop">

                        <s:Fade target="{downFilter}" />

                    </s:Transition>

                </s:transitions>

             

                <s:Rect id="rect" left="0" right="0" top="0" bottom="0" radiusX="2">

                    <s:fill>

                        <s:SolidColor color="red" />

                    </s:fill>

                    <s:filters>

                        <s:GlowFilter id="downFilter" alpha.down="1" alpha="0" color="0x0000ff" strength="5" />

                    </s:filters>

                </s:Rect>

               

                <s:Label id="labelDisplay"

                         textAlign="center"

                         maxDisplayedLines="1"

                         horizontalCenter="0" verticalCenter="1" verticalAlign="middle"

                         left="10" right="10" top="2" bottom="2">

                </s:Label>

               

            </s:SparkButtonSkin>

            • 3. Re: Fading glow on button press
              mitz11 Level 1

              Thanks!  That works.