6 Replies Latest reply on Sep 27, 2011 3:28 AM by awQQ

    Overriding button's skin text color

    awQQ

      Hey everybody,

       

      How do I override button's skin text color on hover over.

      So basically I have a button which is skinned, has it's own label color etc.

      I want to make when I hover over a button, it's label's text color becomes other.

      How do I do that?

       

      <s:Button id="customButton" skinClass="some.skin.Skin" mouseOver="mouseOverEvent(event)"  mouseOut="mouseOutEvent(event)/>

       

      I made mouseOver event:

       

      protected function mouseOverEvent(event:MouseEvent):void

      {

           customButton.setStyle("color", 0xFFF000);

      }

       

      protected function mouseOutEvent(event:MouseEvent):void

      {

           customButton.setStyle("color", 0x000000);

      }

       

      but it doesn't change hover over text color. Anyone knows why is that? It only overrides mouseOut color, but not mouseOver

       

      Thanks

        • 1. Re: Overriding button's skin text color
          Flex harUI Adobe Employee

          What does the skin look like?

          • 2. Re: Overriding button's skin text color
            BobTheCoolGuy

            You can just set the color for that specific state in the skin by doing color.stateName="0xff0000" or whatever. Here's an example. I just copied the default skin and added one statment. Note at the bottom where I set the color of the text by color.over="0xFF0000"

                                  

            <?xml version="1.0" encoding="utf-8"?>
            
            <!--
            
                ADOBE SYSTEMS INCORPORATED
                Copyright 2008 Adobe Systems Incorporated
                All Rights Reserved.
            
                NOTICE: Adobe permits you to use, modify, and distribute this file
                in accordance with the terms of the license agreement accompanying it.
            
            -->
            
            <!--- The default skin class for the Spark Button component.  
            
                   @see spark.components.Button
                    
                  @langversion 3.0
                  @playerversion Flash 10
                  @playerversion AIR 1.5
                  @productversion Flex 4
            -->
            <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                         minWidth="21" minHeight="21" 
                         alpha.disabled="0.5">
                 
                <fx:Metadata>
                    <![CDATA[ 
                    /** 
                     * @copy spark.skins.spark.ApplicationSkin#hostComponent
                     */
                    [HostComponent("spark.components.Button")]
                    ]]>
                </fx:Metadata>
                
                <!-- states -->
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                    <s:State name="disabled" />
                </s:states>
                
                <!-- layer 1: shadow -->
                <!--- @private -->
                <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0x000000" 
                                             color.down="0xFFFFFF"
                                             alpha="0.01"
                                             alpha.down="0" />
                            <s:GradientEntry color="0x000000" 
                                             color.down="0xFFFFFF" 
                                             alpha="0.07"
                                             alpha.down="0.5" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                
                <!-- layer 2: fill -->
                <!--- @private -->
                <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xFFFFFF" 
                                             color.over="0xBBBDBD" 
                                             color.down="0xAAAAAA" 
                                             alpha="0.85" />
                            <s:GradientEntry color="0xD8D8D8" 
                                             color.over="0x9FA0A1" 
                                             color.down="0x929496" 
                                             alpha="0.85" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
            
                <!-- layer 3: fill lowlight -->
                <!--- @private -->
                <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
                    <s:fill>
                        <s:LinearGradient rotation="270">
                            <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                            <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                            <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                
                <!-- layer 4: fill highlight -->
                <!--- @private -->
                <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xFFFFFF"
                                             ratio="0.0"
                                             alpha="0.33" 
                                             alpha.over="0.22" 
                                             alpha.down="0.12"/>
                            <s:GradientEntry color="0xFFFFFF"
                                             ratio="0.48"
                                             alpha="0.33"
                                             alpha.over="0.22"
                                             alpha.down="0.12" />
                            <s:GradientEntry color="0xFFFFFF"
                                             ratio="0.48001"
                                             alpha="0" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                
                <!-- layer 5: highlight stroke (all states except down) -->
                <!--- @private -->
                <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                            <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
                
                <!-- layer 6: highlight stroke (down state only) -->
                <!--- @private -->
                <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
                <!--- @private -->
                <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
            
                <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
                <!--- @private -->
                <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0x000000" 
                                             alpha="0.5625"
                                             alpha.down="0.6375" />
                            <s:GradientEntry color="0x000000" 
                                             alpha="0.75" 
                                             alpha.down="0.85" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
                
                <!-- layer 8: text -->
                <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
                <s:Label id="labelDisplay"
                         textAlign="center"
                         maxDisplayedLines="1"
                         horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
                         left="10" right="10" top="2" bottom="2"
                         color.over="0xFF0000">
                </s:Label>
                
            </s:SparkButtonSkin>
            

            • 3. Re: Overriding button's skin text color
              awQQ Level 1

              Yes, I know that you can add color.over etc., but I already have it, I just need to override it only for one specific place.

              Basically I have like 10 buttons, all of the 10 uses my custom skin, but for 1 button I need to change hover color, how do I do that? Create separate skin, and only change color in it just for that one button? Maybe there is some other way no?

               

              Btw code:

              //some default AS code

              <s:states>

              //...states here

              </s:states>

              <s:Label id="displayLabel" color.over="#FFAA00" .../>

              • 4. Re: Overriding button's skin text color
                BobTheCoolGuy Level 1

                My apologies.  You do bring up a good point - skinning has always felt strangley static for me in the OOP world of ActionScript.  If anyone knows a good article on working with skins dynamically, that would be great to see.

                1 person found this helpful
                • 5. Re: Overriding button's skin text color
                  Flex harUI Adobe Employee

                  Maybe skin.setStyle(...).  Still, that’s sort of a hack.  You can also try using advanced CSS.

                   

                  The styles set in the skin take precedence over styles set on the outer component.

                  • 6. Re: Overriding button's skin text color
                    awQQ Level 1

                    skin.setStyle("color",0x000000); only changes color when mouse is gets off from button, but still when I hover over, color, which is written in skin remains.

                    It would be great if there were such command like skin.setStyle("color.over",0x000000);