Adobe Flex Skins, changing the look easily.


Who is already accustomed to working with Adobe Flex Builder, which of course already noticed that the properties of most components have some properties on the skin's, such as overSkin, downSkin, borderSkin among others .. However, it was very beautiful if it were easy to understand .. something that is on the one hand it is good to have support for skins, on the other it is not the slightest idea of how to do.

I went to another back and found the net on the site of adobe quite interesting. A component to Adobe Photoshop to design skins for Adobe Flex.

However, starting, just download it from flexbuilder3_sdext_b2_ps_100107.zip and extract its contents to the folder Presents which is the installation folder of Adobe Photoshop.

And it is done, simply start your Photoshop, in my File-> Scripts-> New Flex Skins and choose the component that you want and it is patterned after the original skin Flex. to change to select the layer and layer change one by one, and not put more than one element by layer, or add layers.

At the end of the changes, simply hide the layer (0) what it says HIDE BEFORE EXPORT, and go to the File menu-> Scripts-> Export Flex Skins

Choose the destination folder and the skin is made.

In Flex, simply go to File-> Import-> Flex Artwork and indicate the directory where you saved the skins Photoshop.

After just continue and put a new panel in your application and see it for longer with proper skin.
Note that the skin starts to be used in all panels of your application, if you wish to apply to only one, or edit the CSS and put in the definition. MeuPainel1 and attach this definition to the Panel, or q in the establishment of the skin in Photoshop, he asks whether it should apply to the skin every panel, choose the other option and put your ID panel to be affected by the skin. But then it gets to your description.

Here let a small example of a button and a Panel:

To see the source code click here

More information on how to change the appearance of Flex using Photoshop, Illustrator or Flash CS3

http://blogs.adobe.com/flexdoc/pdf/fbskinning.pdf

http://www.adobe.com/devnet/flex/articles/skins_styles.html

http://www.adobe.com/devnet/flex/articles/flex_skins.html

So? Easy is not?

It is awaiting feedback.

pdf version temporarily unavailable.
Leave a comment or Leave a Trackback

One Trackback

  1. By Manifesto Flex Brazil | TSW - That Should Work on March 19, 2008 at 1:26 pm

    [...] Post: Adobe Flex Skins - Changing the visual easily [...]

Leave a comment

Your email is never published or shared. Required fields are marked with an *