1 Reply Latest reply on Feb 5, 2011 3:07 PM by jordana309-36

    Problem using images in a button skin

    jordana309-36

      So, I have a weird problem. I need to be able to see a button in design mode. My button is a custom component (a ButtonBase) with a skin. So, I left is a tiny bit of the default skin so that you can see what it looked like in design mode. Now, the paths to the images that will be used for the various states of the button are binded to strings passed from another subcomponent. There was no other way to get what we needed done, so it stays messy. Anyway, I don't get things to display correctly. Here's the code, and after an image for what I'm getting:

       

      [CODE]

      <s:SparkSkin 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:mx="library://ns.adobe.com/flex/mx"
                               minWidth="21" minHeight="21" alpha.disabled="0.5"
                               preinitialize="initImageVars()" creationComplete="init()">
         
          <!-- host component -->
          <fx:Metadata>
              <![CDATA[
              [HostComponent("customComponents.ToggleButtonCustom")]
              ]]>
          </fx:Metadata>
         
          <!-- states -->
          <s:states>
              <s:State name="up" />
              <s:State name="down" />
              <s:State name="selected" />
              <s:State name="disabled" />
              <s:State name="over" />
          </s:states>

          <fx:Script>
              <![CDATA[        
                  import mx.controls.Alert;
                  /* First thing's first: we need to initialize our global and accessable components. */
                  [Bindable]
                  public var upButtonPath:String = "";
                  [Bindable]
                  public var downButtonPath:String = "";
                  [Bindable]
                  public var activeButtonPath:String = "";
                  [Bindable]
                  public var disabledButtonPath:String = "";
                  [Bindable]
                  protected var label:String = "";
                 
                  private function initImageVars():void
                  {
                      upButtonPath = "assets/" + this.hostComponent.upButtonPath;
                      downButtonPath = "assets/" + this.hostComponent.downButtonPath;
                      activeButtonPath = "assets/" + this.hostComponent.activeButtonPath;
                      disabledButtonPath = "assets/" + this.hostComponent.disabledButtonPath;
                  }
                 
                  private function init():void
                  {
                      /* Give values to public variables */
                      //upButtonPath = "Up.png";
                      //downButtonPath = "Down.png";
                      //activeButtonPath = "Active.png";
                      label = this.hostComponent.label;
                  }
                 
                  /* 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"];
                 
                  override public function get colorizeExclusions():Array {return exclusions;}
                  override protected function initializationComplete():void
                  {
                      useChromeColor = true;
                      super.initializationComplete();
                  }

                  private var cornerRadius:Number = 2;
              ]]>       
          </fx:Script>

       

          <!-- layer 1: fill -->
          <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.down="0xAAAAAA"
                                                       color.selected="0xBBBDBD"
                                                       alpha="0.85" />
                      <s:GradientEntry color="0xD8D8D8"
                                                       color.down="0x929496"
                                                       color.selected="0x9FA0A1"
                                                       alpha="0.85" />
                  </s:LinearGradient>
              </s:fill>
          </s:Rect>

       

          <mx:ViewStack id="buttonImage" x="0" y="0"
                                      selectedIndex="0" selectedIndex.down="1" selectedIndex.selected="2"    selectedIndex.disabled="3">
              <s:NavigatorContent id="upState">
                  <mx:Image source="{upButtonPath}" width="500" height="500" />
              </s:NavigatorContent>
              <s:NavigatorContent id="downState">
                  <mx:Image source="{downButtonPath}" />
              </s:NavigatorContent>
              <s:NavigatorContent id="activeSate">
                  <mx:Image source="{activeButtonPath}" />
              </s:NavigatorContent>
              <s:NavigatorContent id="disabledState">
                  <mx:Image source="{disabledButtonPath}" />
              </s:NavigatorContent>
          </mx:ViewStack>
         
          <s:Label id="labelDisplay" text="{label}"
                           textAlign="center"
                           verticalAlign="middle"
                           maxDisplayedLines="3"
                           horizontalCenter="0" verticalCenter="1"
                           left="10" right="10" top="2" bottom="2">
          </s:Label>
         
      </s:SparkSkin>

      [/CODE]

       

      That gives me this image:

      Example.JPG

      And if I use the following code to resize it, I get this:

      [CODE]

      /* From the component, called from init(), which is called on creationComplete */

      private function resizeEverything():void
      {
        var dummyImage:Image = new Image();
        var pathToDummy:String = "assets" + upButtonPath;
        dummyImage.source = pathToDummy;
        thisBtn.height = dummyImage.height;
        thisBtn.width = dummyImage.width;
        dummyImage = null;
      }

      [/CODE]

      Example.JPG

      If you have any idea what to do with this, let me know. I set the buttons to the exact height and width of the images I'm using when I first call them. I don't know how else to manage this. I want the faded white to be an exact mirror of the image, so that designers (not me) can move them around on design mode. Thank you!