3 Replies Latest reply on Jun 11, 2010 3:51 PM by UbuntuPenguin

    Add icon on spark button skin

    jerry98225 Level 1

      Hello all I am trying to add different icon on different buttons. I have my skin file ready but not sure if I have to create different skin class for different button. It sounds inefficient. Any suggestions? Thanks for the reply...




      <s:Button id="pass"
           
      width="110"
           
      height="35"
           
      fontWeight="bold"
               
      fontSize="12"
           
      fontFamily="arial"
           
      label="Past Track"
          
      click="pass_clickHandler(event)" skinClass="skins.CustomSkin"/>      
      <s:Button id="future"
           
      width="110"
           
      height="20"
           
      fontWeight="bold"
           
      fontSize="12"
           
      fontFamily="arial"
           
      label="Future Plan"
               
      click="future_clickHandler(event)"
               
      skinClass="skins.CustomSkin"/>

      Skin.....

         <!-- 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="#304fd7"
                                  
      color.over="#4b6bf6"
                                  
      color.down="0xAAAAAA"
                                  
      alpha="0.85" />
                 
      <s:GradientEntry color="#1f38a3"
                                  
      color.over="#3653cf"
                                  
      color.down="0x929496"
                                  
      alpha="0.85" />
             
      </s:LinearGradient>
         
      </s:fill>
      </s:Rect>


      <!-- icon --> // I could add my icon here but that would make me to create 
                        //different icon image for different button
        • 1. Re: Add icon on spark button skin
          UbuntuPenguin Level 4

          I find it easier to create a new skin than to fanagle with other stuff.  Just make a class that extends button ,

          that has a Class class required as a skin part.  Then use that to make the skin and you are home free.

           

          By creating a custom button that has an class/image as a required part , you can bypass creating a new skin for each and every button.

           

          If this post was helpful , please mark it as such.

           

          Sincerely ,

            Ubu

          1 person found this helpful
          • 2. Re: Add icon on spark button skin
            jerry98225 Level 1

            Thanks UbuntuPenguin, but how do you make the class/image as a required part? Would you please be more specific? Thanks a lot!

            • 3. Re: Add icon on spark button skin
              UbuntuPenguin Level 4

              so you could do something like this even though it doesn't have to be a required item.

               

                  public class ImageButton extends Button
                  {
                      /**
                       *  The skin part that defines the area where
                       *  the user may drag to resize the window.
                       */
                      [SkinPart(required="true")]
                      public var buttonImage:Object

               

                     .......

                   }

               

              Then , in your skin you would have an mxml image with the same name ( buttonImage ) that you would position in the skin.  In the mxml where you use the class you could just do

               

              <custom:ImageButton id="ib" buttonImage="assets/myButton.jpg" />

               

              I must warn you though , skinning is not my specialty.

               

              If this post was helpful please mark it as such.

               

              Sincerely ,

                Ubu