Túlio Vargas

Com Adobe Fireworks CS4 é possível gerar imagens ou Skins para sistemas desenvolvidos no Adobe Flex, nesse tutorial irei explicar passo a passo como isso é possível e também como é simples a edição dessas imagens e sua aplicação em  projetos no Flex,  deixando assim seu projeto mais personalizado.
Na verdade o Adobe Flex ira gerar as imagens com o formato padrão, ou seja, o default do Flex e essas imagens nada mais são que todos os componentes contidos no Flex. Juntamente com as imagens o Fireworks CS4 também ira gerar o código CSS(Cascading Style Sheets) para aplicação dessas imagens no projeto feito Flex.

Vamos abrir o Adobe Fireworks Cs4 e clicar em:
Commands>> Flex Skinnig>> New Flex Skin

Na seguinte tela podemos optar em criar o Skin para todos os componentes do Flex, clicando em Multiplie components ou então gerar um Skin para um componente especifico, para isso você deve optar pela opção Specific components.
No caso vamos escolher a segunda opção e então criar um Skin para o componente Panel.

Podemos observar que todos os elementos que fazem parte do design do componente Panel esta dividido em camadas, assim facilitando muito o trabalho do designer.

Eu alterei a cor azul solida que vem como padrão no elemento Panel e apliquei um efeito degrade nas cores Azul e Branco(cores do meu time de coração – Cruzeiro Esporte Clube) e também coloquei um efeito suave de linhas em background.

Para aplicação de todos os efeitos eu utilizei as opções contidas na tab PROPERTIES. Dentro dessa tab podemos encontrar opções para alterar cor, aplicar efeitos, textura, borda, etc.. Deixando totalmente personalizado o seu componente.

Assim que todo trabalho de estilização do componente estiver realizado então deveremos exportar o skin para o Adobe Flex.
Para isso vc deve ir no seguinte item do menu:
Commands>> Flex Skinnig>> Export Flex Skin

Selecione uma pasta qualquer onde ficará salvo o Skin. Lembrando que essa pasta não precisa ser a pasta qual esta salvo o projeto Flex.


Após selecionado o projeto Flex qual ira receber o Skin criado no Fireworks, então devemos realizar a importação do mesmo. Para isso iremos fazer a seguinte  fazer o seguinte passo:

Selecione a pasta qual você exportou o Skin criado no Fireworks e depois clique em Next.

Agora é só concluir clicando em Finish.

Pronto o seu novo Skin já está incorporado ao seu projeto Flex.

Está concluído o processo criação e aplicação do Skin no seu projeto Flex.

Qualquer dúvida, é só postar abaixo.