2 Replies Latest reply on May 4, 2009 11:02 AM by david.bonafe

    Skinning TextInput (and others) changes text position

    david.bonafe

      Hi there,

       

      I've been working on updating the visuals of our application and one path I took was skinning components. There's a designer in our team that works well with Photoshop and Flash (but not with Flex or programming at all), so I sent him the link of Narciso Jamarillo's article on creating skins for Flex using Adobe Creative Suit.

       

      Although we had few troubles working over the default template for HaloSkin at first, we kinda figured out most of them. But now there's one problem I couldn't find a solution yet. Whenever I apply the skins he made, the components that show text like TextInput and ComboBox start showing text in the wrong position, a little above the center and closer to the borders (sometimes it gives the impression it cuts out characters when I align the text at right).

       

      Here's a picture:

      skinProblem1.png

      Skinned on the left, not skinned on the right.

       

      So I'd like to know what exactly has influences over text position when I create a skin in flash, or any hint on what is causing this behavior.

       

      Thanks in advance.

       

      With regards,

       

      David

        • 1. Re: Skinning TextInput (and others) changes text position
          ATIF FAROOQ Level 3

          hi,

             it mostly happens due to change in scale 9 slicing configuration . if there is unequal distance between top and bottom gridLine or right and left gridLine so the difference originates in such case where the sliced portion on the left is taking more space then on right and same case for top and bottom.Altough when using custom Skin you will  need to do minor tweaking  from  flash to make your text come in center.

          • 2. Re: Skinning TextInput (and others) changes text position
            david.bonafe Level 1

            I asked the designer to check in Flash and all grid lines are in proportional distance (4 pixels from edge). I also asked him to create a new skin from template, without any changes, and it displayed the same behavior, so I don't think it's a scale 9 slice configuration problem.

             

            Could you elaborate what kind of "minor tweaking" I could do on Flash? I ask because we just changed the shapes and and the 9 slice scale grid, is there anything else you could setup for a skin?

             

            David