11 Replies Latest reply on Jun 29, 2007 5:21 PM by Peter Flynn (Adobe)

    Changing button graphic

    Level 7
      If I want to skin my buttons so that they are using a round graphic rather
      than the rounded rectangle, which style properties would I look at? The
      ones that seem the closest matches actually seem to point at class files.
      I'm looking at something that will point directly to a graphic.

      Thanks;

      Amy


        • 1. Re: Changing button graphic
          rgrzywinski Level 1
          I use something along the lines of:

          <mx:Button id="deleteButton"
          disabledSkin="@Embed(source='/resource/icons/delete_disabled.gif')"
          overSkin="@Embed(source='/resource/icons/delete_over.gif')"
          upSkin="@Embed(source='/resource/icons/delete_up.gif')"
          downSkin="@Embed(source='/resource/icons/delete_down.gif')"
          click="deleteClicked()"/>
          • 2. Re: Changing button graphic
            Level 7

            "rgrzywinski" <webforumsuser@macromedia.com> wrote in message
            news:f5b2h2$j7g$1@forums.macromedia.com...
            >I use something along the lines of:
            >
            > <mx:Button id="deleteButton"
            > disabledSkin="@Embed(source='/resource/icons/delete_disabled.gif')"
            > overSkin="@Embed(source='/resource/icons/delete_over.gif')"
            > upSkin="@Embed(source='/resource/icons/delete_up.gif')"
            > downSkin="@Embed(source='/resource/icons/delete_down.gif')"
            > click="deleteClicked()"/>

            How would you do this in CSS?

            Thanks!

            Amy


            • 3. Re: Changing button graphic
              rgrzywinski Level 1
              Same thing:

              .xyz {
              upSkin: Embed(...");
              downSkin: Embed("...");
              ...
              }
              • 4. Re: Changing button graphic
                Level 7

                "rgrzywinski" <webforumsuser@macromedia.com> wrote in message
                news:f5bbsp$ms$1@forums.macromedia.com...
                > Same thing:
                >
                > .xyz {
                > upSkin: Embed(...");
                > downSkin: Embed("...");
                > ...
                > }

                OK, what I'm doing is this (and keep in mind I am using the June 11 build,
                so some things may have changed). With the CSS file open, I select the +
                button and "Class style for a specific component", Button, and name my
                style. I select the upSkin row and navigate to my png file. All the rows
                disappear, and I get "selected item is invalid" at the top above where the
                rows were. The button icons don't update to reflect the change.

                Going back to source mode, I see:

                Button.mybtn

                {

                upSkin: @Embed('../images/ButtonSkin.png');

                }



                However, since the rows have all disappeared, I can't add more styles
                without jumping back and forth to the help, and even then I'm not confident
                it will work.



                Have I encountered a bug, or am I misunderstanding how this all works?



                Thanks;



                Amy


                • 5. Re: Changing button graphic
                  rgrzywinski Level 1
                  Since I've never used the design view (or anything but the source view), I honestly can't help you. Hopefully someone else will chime in. I personally just type "do" and hit ctrl+space and it completes to "downSkin" and I finish typing. But what do I know =D
                  • 6. Re: Changing button graphic
                    Level 7

                    "rgrzywinski" <webforumsuser@macromedia.com> wrote in message
                    news:f5bql7$i7g$1@forums.macromedia.com...
                    > Since I've never used the design view (or anything but the source view), I
                    > honestly can't help you. Hopefully someone else will chime in. I
                    > personally
                    > just type "do" and hit ctrl+space and it completes to "downSkin" and I
                    > finish
                    > typing. But what do I know =D

                    I'm even finding that the things that do work in design view don't seem to
                    be translating to my compiled AIR app.

                    -Amy


                    • 7. Re: Changing button graphic
                      Peter Flynn (Adobe) Adobe Employee
                      Hi Amy,

                      You've encountered a bug in the beta of CSS Design view. It is already fixed in our current builds, and once Beta 2 rolls around you will get a much nicer experience for applying skins in general.

                      The correct syntax is what rgrzywinski suggested:
                      Button {
                      upSkin: Embed("someImage.png"); /* notice no "@" sign */
                      /* etc. */
                      }

                      But if *all* you want to do is make the edges completely rounded off (like in OS X), you can just use cornerRadius.

                      Hope that helps and sorry about the bug,

                      - Peter
                      • 8. Re: Changing button graphic
                        Level 7

                        "Peter Flynn (Adobe)" <webforumsuser@macromedia.com> wrote in message
                        news:f5c39a$s63$1@forums.macromedia.com...
                        > Hi Amy,
                        >
                        > You've encountered a bug in the beta of CSS Design view. It is already
                        > fixed
                        > in our current builds, and once Beta 2 rolls around you will get a much
                        > nicer
                        > experience for applying skins in general.
                        >
                        > The correct syntax is what rgrzywinski suggested:
                        > Button {
                        > upSkin: Embed("someImage.png"); /* notice no "@" sign */
                        > /* etc. */
                        > }
                        >
                        > But if *all* you want to do is make the edges completely rounded off (like
                        > in
                        > OS X), you can just use cornerRadius.

                        No I wanted to use a completely different button graphic. But I couldn't
                        get the button to respect the css style, so I set it directly in the
                        properties. Might I suggest that you do some sort of step by step in the
                        docs for how to get this to work? The current help seems to speak in vague
                        generalities that aren't very helpful.

                        Thanks;

                        Amy


                        • 9. Re: Changing button graphic
                          Peter Flynn (Adobe) Adobe Employee
                          Hi Amy,

                          I've found the current documentation to be pretty decent:
                          * Help - http://livedocs.adobe.com/flex/201/html/skinning_071_03.html
                          * Quickstart - http://www.adobe.com/devnet/flex/quickstart/skinning_components/
                          But maybe this stuff is too hard to find. Do you remember what keywords you searched on?

                          I'd also like to figure out why your buttons weren't respecting the CSS...
                          * Did you try correcting the CSS syntax by removing the "@" sign that was erroneously created?
                          * Did you include the CSS file into your MXML app? (use <mx:Style source="foo.css" />).

                          - Peter
                          • 10. Re: Changing button graphic
                            Level 7

                            "Peter Flynn (Adobe)" <webforumsuser@macromedia.com> wrote in message
                            news:f5engq$7su$1@forums.macromedia.com...
                            > Hi Amy,
                            >
                            > I've found the current documentation to be pretty decent:
                            > * Help - http://livedocs.adobe.com/flex/201/html/skinning_071_03.html
                            > * Quickstart -
                            > http://www.adobe.com/devnet/flex/quickstart/skinning_components/
                            > But maybe this stuff is too hard to find. Do you remember what keywords
                            > you
                            > searched on?
                            >
                            > I'd also like to figure out why your buttons weren't respecting the CSS...
                            > * Did you try correcting the CSS syntax by removing the "@" sign that was
                            > erroneously created?
                            > * Did you include the CSS file into your MXML app? (use <mx:Style
                            > source="foo.css" />).

                            I've done a commentary for the article you posted (which I found previously)
                            about why it wasn't too helpful. Unfortunately it won't post. Please
                            contact me off forum if you'd like me to send it to you directly.

                            Thanks;

                            Amy


                            • 11. Re: Changing button graphic
                              Peter Flynn (Adobe) Adobe Employee
                              Hi Amy,

                              Thanks for sending me your comments. I've passed them on to our documentation team and I will respond to you offline with answers to your specific questions.

                              I think you will really like our next beta release (Beta 2). The completed CSS Properties Inspector will let you attach skins and edit styles without ever seeing the code.

                              Thanks again for your feedback -- keep it comin'!

                              - Peter