0 Replies Latest reply on Jul 14, 2011 5:50 PM by Malkyne

    Filter causes colorizeExclusions to be ignored?

    Malkyne Level 1

      I'm working on a button skin.  It's lovely, and works quite well, except for one thing.  Whenever I push the button, I am applying an inner drop shadow to the button art.  However, whenever the drop shadow filter appears, the button appears to be ignoring my colorizeExclusions property (which currently protects both the text and the highlight on the button).  Is this a known bug?

       

      Button Up:

      button_up.png

      Button Over:

      button_over.png

      Button Down:

      button_down.png

      Notice how both the highlight and the text have been colorized?  Weird, huh?

       

       

      Here is the code that created the above button:

       

      <s:Button id="buttonTextExample" label="I am a button." chromeColor="#29A1C4" color="#FFFFFF"/>
      

       

       

      Here is the CSS from the Default.css for the theme the skin appeared in (and there is no additional styling in effect for the above call -- I checked):

       

       

      s|Button
      {
           skinClass: ClassReference('sometheme.skins.ButtonSkin');
           font-size: 15;
      }
      
      Here is the skin code:
      <?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"
                             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                             xmlns:fxg="assets.fxg.*"
                             minWidth="18" minHeight="18"
                             alpha.disabled="0.5">
           
          <fx:Metadata>
              <![CDATA[ 
              /** 
               * @copy spark.skins.spark.ApplicationSkin#hostComponent
               */
              [HostComponent("spark.components.Button")]
              ]]>
          </fx:Metadata>
          
          <fx:Script fb:purpose="styling">
              <![CDATA[         
                  import spark.components.Group;
                  /* Define the skin elements that should not be colorized. 
                  For button, the graphics are colorized but the label is not. */
                  static private const exclusions:Array = ["labelDisplay", "highlight"];
                  
                  /** 
                   * @private
                   */     
                  override public function get colorizeExclusions():Array {return exclusions;}
                  
                  /**
                   * @private
                   */
                  override protected function initializationComplete():void
                  {
                      useChromeColor = true;
                      super.initializationComplete();
                  }  
                  
                                                   
              ]]>        
          </fx:Script>
              
          <!-- states -->
          <s:states>
              <s:State name="up" />
              <s:State name="over" />
              <s:State name="down" />
              <s:State name="disabled" />
          </s:states>
           
           <s:Group left="0" right="0" top="0" bottom="0">
                <!-- Background -->     
                <s:Group id="background" left="0" right="0" top="0" bottom="0">
                     <fxg:GlassButtonBack excludeFrom="over" left="0" right="0" top="0" bottom="0"/>
                     <fxg:GlassButtonBackBright includeIn="over" left="0" right="0" top="0" bottom="0"/>
                </s:Group>
                
                
               <!-- layer 8: text -->
               <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
                
               <s:Label id="labelDisplay" left="16" right="16" top="8" bottom="8"
                           fontWeight="bold" horizontalCenter="0" maxDisplayedLines="1" textAlign="center"
                           verticalAlign="middle" verticalCenter="1"/>
                
                <s:Rect id="highlight" left="3" right="3" top="3" height="40%" radiusX="6" radiusY="6">
                     <s:fill>
                          <s:LinearGradient rotation="90">
                               <s:entries>
                                    <s:GradientEntry ratio="0" alpha="0.9" color="#FFFFFF" />
                                    <s:GradientEntry ratio="1" alpha="0" color="#FFFFFF" />
                               </s:entries>
                          </s:LinearGradient>
                     </s:fill>
                </s:Rect>
                <s:filters>
                     <s:DropShadowFilter includeIn="down" inner="true" color="#000000" blurX="10" blurY="10" angle="90"/>
                </s:filters>
       
           </s:Group>
       
      </s:SparkButtonSkin>
       
      

       

      Thank you so much for your time!