4 Replies Latest reply on Sep 28, 2011 6:37 AM by NilsTT

    Skinning a Button (FB 4.5.1)

    Kurrykid Level 3

      I am having a hard time getting my hands around the button skinning task (FB 4.5.1).  I have been able to skin a radio button but for some reason, the things I have tried for a button haven't worked.  I am really just trying to change from the deafault square grey button.  Anything else would be an improvement.

       

      Does anyone have a link for demos/videos/tutorials?

       

      It would be greatly appreciated.

        • 1. Re: Skinning a Button (FB 4.5.1)
          Comxian

          just creat a new skin in your default package,

          in css use "" s|button skinClass:ClassReference("skins.buttonSkins"); "" skin will be applid to all buttons in application here is the link for detailed tutorial

           

          http://help.adobe.com/en_US/flex/using/WS422719A4-7849-4921-AF39-57FF567B483B.html

          • 2. Re: Skinning a Button (FB 4.5.1)
            NilsTT

            I would also like to do something similar.

             

            I'd like to have a button which only displays an Image. Butt the image is different for the UP, DOWN and DISABLED states. More over the Images can be different for each instace of this button (so I doubt a skin can help me here). I've tried extending the button class (in mxml) but than I have to process the events for the UP and DOWN myself (which I think can be done by the button class).

             

            What am I missing?

            • 3. Re: Skinning a Button (FB 4.5.1)
              Comxian Level 1

              You need to make different skin states. In the above link you can have a look on the Rect tag. in this tag define different Rects for each State (MXML Skin File).

              If you want the same behavior on all states; provide the same data in each Rect tag .Still if you are having peoblems, let me know i`ll send you the running application example. which you can run by using SDK 4.5.1

               

              Regards

              Imran Akram

              comxian@gmail.com

              http://www.uthsms.com

              • 4. Re: Skinning a Button (FB 4.5.1)
                NilsTT Level 1

                Got it working, this is how to do it:

                 

                1 ) Create an actionscript class MyButton extends Button.

                 

                Add the vars:

                 

                [Bindable]

                                    public var DisabledImage:String;

                                    [Bindable]

                                    public var UpImage:String;

                                    [Bindable]

                                    public var DownImage:String;

                 

                2 ) In the mxml view, add the buttons with the strings for the images and a skinclass:

                 

                <controls:MyButton id="..." click="..." skinClass="MySkinclass" UpImage="assets/up.png" DownImage="assets/down.png" DisabledImage="assets/disabled.png"/>

                 

                 

                In the skinclass (mxml) link three different images to the states, using hostcomponent.XXXX

                 

                <fx:Metadata>

                                    [HostComponent("MyButton")]

                          </fx:Metadata>

                 

                 

                <s:states>

                                    <s:State name="disabled" />

                                    <s:State name="down" />

                                    <s:State name="over" />

                                    <s:State name="up" />

                          </s:states>

                          <s:Group contentBackgroundColor="#000000" left="0" right="0" top="0" bottom="0">

                                    <s:Image source="{hostComponent.DownImage}" includeIn="down" />

                                    <s:Image source="{hostComponent.UpImage}" includeIn="up" />

                                    <s:Image source="{hostComponent.DisabledImage}" includeIn="disabled" />

                 

                          </s:Group>