7 Replies Latest reply on Oct 28, 2007 8:30 PM by atta707

    Fade button to a different color

    Joe Haswell
      Hey everyone.

      Sorry if I'm posting questions that've been answered before. I'm very new to Flash and Flex and I'm new to the terminology, so I don't always know what to search for.

      I'm wondering if there's a simple way to fade the text on a button from one color to another on rollover. I have a button with zero fill alpha (it just appears as text), and no matter what I do, I can't get the text to fade from its default color (white) to gray on over.

      I've been Googling this for several hours, and can't find a solution. Any help would be great.

      Thanks!

      Joe
        • 1. Re: Fade button to a different color
          ntsiii Level 3
          Are you looking for a real "fade", or just to change the color?

          Color is a style, so to change it you must use setStyle(), and not just try to assign a value to the property.

          Tracy
          • 2. Re: Fade button to a different color
            Joe Haswell Level 1
            I'm trying to get a real fade. I can change the color on rollover using CSS, but I can't get it to fade gradually.

            Thanks for responding.

            Joe
            • 3. Re: Fade button to a different color
              Joe Haswell Level 1
              Sorry to bump this. I purchased the Adobe book on Flex and tried a bunch of different effects and combinations, but I still can't get this right. I'd be willing to PayPal someone 20 bucks for some suggestions.

              Joe
              • 4. Re: Fade button to a different color
                atta707 Level 2
                Okay, Joe, just because you bought a book, here is one idea that might help :)

                1) Create a new class from Button, let's just call it XButton and expose the underlying textfiled:

                package
                {
                import mx.controls.Button;
                import mx.core.UITextField;

                public class XButton extends Button
                {

                public function textFieldX() : UITextField {
                return this.textField;
                }
                }
                }

                2) write a text app and let's try blur *only* on the text:
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:local="*">

                <mx:Script>
                <![CDATA[
                import mx.effects.Blur;
                import mx.effects.Fade;

                private function mo(event:MouseEvent) : void {
                var b:Blur = new Blur();
                b.play([this.t1.textFieldX()]);
                }
                ]]>
                </mx:Script>

                <local:XButton label="Howdy?" color="white" id="t1" mouseOver="mo(event)"/>

                </mx:Application>

                works?

                3) Create your tween effect by extending TweenEffect class and use that effect instead of blur!

                Hope this helps.

                ATTA

                P.S. as for your $20, please have beer on me, if works :)
                • 5. Re: Fade button to a different color
                  Joe Haswell Level 1
                  Wow! Thanks! It worked! And thanks for the beer!

                  Joe
                  • 6. Fade button to a different color
                    Joe Haswell Level 1
                    You guys probably already knew this, but if you override a button's rollover and rollout handlers without invoking the base class' handlers, then you can emulate a "selected" look on the button that was last clicked.

                    here's an example:

                    public class MenuButton extends LinkButton {
                    private var tweenIn:ColorTween;
                    private var tweenOut:ColorTween;
                    private var initColor = this.textField.textColor;

                    public function MenuButton() {
                    super();
                    init();
                    }
                    private function init():void {
                    tweenIn = new ColorTween();
                    tweenOut = new ColorTween();

                    tweenIn.colorTo = 0x000000;
                    tweenIn.colorFrom = initColor;

                    tweenOut.colorFrom = 0x000000;
                    tweenOut.colorTo = initColor;
                    }
                    override protected function rollOverHandler(event:MouseEvent):void {
                    tweenInplay([this]);
                    }

                    override protected function rollOutHandler(event:MouseEvent):void {
                    tweenOut.play([this]);
                    }

                    }

                    Now, when you roll over the button, the effect is played, and when you move your cursor out of the button, it's restored, but if you click the button, its color is set to whatever rollOver color is specified in your CSS stylesheet.

                    Atrocious hack? Maybe

                    Joe.

                    Edit: Fixed mistake
                    • 7. Fade button to a different color
                      atta707 Level 2
                      > Atrocious hack? Maybe

                      No, it's not. Perfectly legal and smarter solution.

                      Could you show people on the forum your ColorTween impl, if it's okay?

                      ATTA