2 Replies Latest reply on Jun 14, 2010 6:42 AM by David_F57

    set background image in flex 4 button

    athiroy Level 1

      hi

       

      i am using flex 4

      i don't know how to set the background image in a button Control

      i think it is possible to use skinning.

       

      anybody give ideas or sample code

       

      regards

      athi

        • 1. Re: set background image in flex 4 button
          MikisMM Level 2

          You are totally right: you have to create custom skin for a button. You can create this skin based on default skin and add there a BitmapImage tag or something like that.

          • 2. Re: set background image in flex 4 button
            David_F57 Level 5

            hi,

             

            In the buttonskin you would have something like the following

             

            <s:HGroup top="4" left="3" bottom="3" right="3" gap="6">

            <mx:Image id="imageDisplay" top="0" left="0" bottom="0" source="@Embed(source='flag.png')"

               maintainAspectRatio="true" scaleContent="true" verticalAlign="middle"/>

            <s:Label id="labelDisplay"

                         textAlign="left"

                         verticalAlign="middle"

                         maxDisplayedLines="1"

            height="100%">

                </s:Label>

            </s:HGroup>

             

            Basically if you create a copy of the button skin then scroll to the bottom you will see the labelDisplay item, the code above can replace that section.

             

            Above just puts an Icon to the left but you could also have a full image background just by declaring an image before the label

            <mx:Image id="imageDisplay" top="2" left="2" bottom="2" right="2" source="@Embed(source='flag.png')"

              maintainAspectRatio="false" scaleContent="true" verticalAlign="middle"/>

            <s:Label id="labelDisplay"

                         textAlign="centre"

                         verticalAlign="middle"

                         maxDisplayedLines="1"

            height="100%" width= "100%">

                </s:Label>

            1 person found this helpful