2 Replies Latest reply on Nov 11, 2010 5:40 AM by JoGlez

    Button Skin: How to add button properties (over, down,up)

    JoGlez Level 1

      Hi all,

           I made a custom button "skin" because I want my buttons to be images with NO box or border around it and it works great, but I don't know how to add the button functionality. ex. In "over" state buttons tend to light up and in "down" state they tend to get darker. Anyone know how to apply this to an image??? below is my code. Thanks guys!!

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx" width="64" height="64">
         
          <fx:Metadata>
              [HostComponent("spark.components.Button")]
          </fx:Metadata>
         
          <s:states>
              <s:State name="over" />
              <s:State name="down" />
              <s:State name="up" />
              <s:State name="disabled" />
          </s:states>   
         
          <mx:Image source="@Embed(source='assets/images/lightbulb.png')"/>
      </s:SparkSkin>

        • 1. Re: Button Skin: How to add button properties (over, down,up)
          Peter deHaan Level 4

          You could try something like this:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="64" height="64">
          
              <fx:Metadata>
                  [HostComponent("spark.components.Button")]
              </fx:Metadata> 
          
              <s:states>
                  <s:State name="over" />
                  <s:State name="down" />
                  <s:State name="up" />
                  <s:State name="disabled" />
              </s:states>    
          
              <mx:Image source="@Embed('assets/images/lightbulb.png')"
                        source.over="@Embed('assets/images/lightbulb_lit.png')"
                        source.down="@Embed('assets/images/lightbulb_dark.png')"
                        source.disabled="@Embed('assets/images/candle.png')" />
          
          </s:SparkSkin>
          
          
          

           

           

          Peter