Archive | agosto 2009

Gerar imagens ou skinning para o Adobe Flex utilizando o Adobe Fireworks CS4

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

tutorialSkinningAdobeFlex1

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.

tutorialSkinningAdobeFlex2

tutorialSkinningAdobeFlex3

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.
tutorialSkinningAdobeFlex4
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.
tutorialSkinningAdobeFlex5
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.
tutorialSkinningAdobeFlex6
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
tutorialSkinningAdobeFlex7
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.
tutorialSkinningAdobeFlex8
tutorialSkinningAdobeFlex9
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:
tutorialSkinningAdobeFlex10
Selecione a pasta qual você exportou o Skin criado no Fireworks e depois clique em Next.
tutorialSkinningAdobeFlex11
Agora é só concluir clicando em Finish.
tutorialSkinningAdobeFlex12
Pronto o seu novo Skin já está incorporado ao seu projeto Flex.
tutorialSkinningAdobeFlex13
Está concluído o processo criação e aplicação do Skin no seu projeto Flex.

Qualquer dúvida, é só postar abaixo.

Anúncios