Quem já está habituado a trabalhar com o Adobe Flex Builder, com certeza que já reparou que nas propriedades da maior parte dos componentes existe algumas propriedades relativas a skin’s, tais como overSkin, downSkin, borderSkin entre outras.. Ora, isto era muito lindo se fosse fácil de perceber.. coisa que se por um lado é bom ter suporte a skins, por outro não se faz a mínima ideia de como as fazer.

Andei a dar mais uma volta pela net e encontrei no site da adobe algo bem interessante. Um componente para o Adobe Photoshop para desenhar skins para o adobe Flex.

Ora, começando, basta fazer o download de flexbuilder3_sdext_b2_ps_100107.zip e extrair o seu conteudo para a pasta Presents que está na pasta de instalação do Adobe Photoshop.

E está feito, basta iniciar o Photoshop, no meu File->Scripts->New Flex Skins e escolham o componente que desejam e aparece-vos o modelo da skin original do Flex. para alterar deve seleccionar layer a layer e alterar um a um, e não colocar mais que um elemento por layer, nem adicionar layers.

No final das alterações feitas, basta esconder o layer (0) o que diz HIDE BEFORE EXPORT, e vão ao menu File->Scripts->Export Flex Skins

Escolhem a pasta de destino e está feita a skin.

No Flex, basta irem em File->Import->Flex Artwork e indicarem a directoria onde o Photoshop guardou as skins.

Depois basta prosseguirem e colocarem um novo Painel na vossa aplicação e ver-lo-ao já com a devida skin.
Nota que esta skin passa a ser utilizada em todos os painéis da vossa aplicação, se desejarem aplicar a apenas um, ou editam o CSS e colocam na definição .meuPainel1 e atribuem essa definição ao Painel, ou q quando da criação da skin no Photoshop, ele pergunta se deseja aplicar a skin a todos os painéis, escolham a outra opção e coloquem o vosso ID do painel a ser afectado pela skin. Mas depois isso fica à vossa descrição.

Ora aqui deixo um pequeno exemplo de um botão e de um Panel:

Para ver o código fonte clique aqui

Mais informações de como alterar a aparência do Flex utilizando o Photoshop, Ilustrador ou 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

Então? Fácil não é??

Aguardam-se comentários.