SÉRIE EFEITOS – PARTE 20

 

Olá galera!

 

Neste tutorial daremos continuidade a criação do banner integrando o Fireworks com a linguagem XML. No tutorial anterior, construímos a base do banner. Neste tutorial, o objetivo é implementar a parte de programação.

 

A figura abaixo mostra o ponto que paramos.

 

Figura 01: ponto de partida.

 

Siga os passos abaixo para finalizarmos o processo.

 

1) Selecione a ferramenta Text tool e crie as três variáveis do banner. Utilize as fontes, cores e estilos de sua preferência, lembrando que da maneira que configurar os textos no banner será como serão exibidos.

 

OBS: o nome das variáveis devem vir sempre entre chaves ( { } ).

 

Figura 02: inserção das variáveis no banner.

 

2) Chegou o momento de fazermos a codificação para interpretar as variáveis criadas. Abra o aplicativo Bloco de Notas e copie o código abaixo e personalize de acordo com suas necessidades. As linhas do código serão explicadas a seguir.

 

<?xml version="1.0" encoding="iso-8859-1"?>

<banners>

<banner>

<varTutorial>Efeitos Avançados</varTutorial>

<varAutor>Fábio Almeida</varAutor>

<varDescricao>Tutorial ensina a criar efeitos avançados utilizando o Fireworks</varDescricao>

</banner>

<banner>

<varTutorial>Botão Aqua</varTutorial>

<varAutor>Joaquim Pires</varAutor>

<varDescricao>Tutorial ensina a criar um botão aqua muito bonito</varDescricao>

</banner>

<banner>

<varTutorial>Banner Animado</varTutorial>

<varAutor>Juliana Rosa</varAutor>

<varDescricao>Aprenda a criar um banner animado para web com Juliana Rosa</varDescricao>

</banner>

</banners>

 

Observe que são criados “blocos” contendo as informações que serão carregadas para cada banner criado. No primeiro bloco, a variável {varTutorial} será preenchida com a informação “Efeitos Avançados”. A variável {varAutor} será alimentada pela informação “Fábio Almeida” e por fim, a variável {varDescricao} será preenchida pela informação “Tutorial ensina a criar efeitos avançados utilizando o Fireworks”. Os demais blocos são preenchidos de forma análoga, alterando apenas o conteúdo das informações.

 

3) Salve o arquivo com o nome codigo.xml. Não se esqueça da extensão XML.

 

Figura 03: arquivo XML salvo.

 

4) Com o arquivo salvo, acesse o menu Commands, Data-Driven Graphics Wizard.

 

Figura 04: menu Data-Driven Graphics Wizard.

 

5) Serão 6 etapas até a conclusão deste processo. O primeiro passo apresenta, inicialmente, a quantidade de variáveis criadas. Logo abaixo, devemos selecionar o arquivo XML criado no passo 2. Após selecionar o arquivo XML, clique no botão Next.

 

Figura 05: passo 1.

 

6) A segunda janela apresenta os registros (blocos de informações) contidos no arquivo XML. Utilize as setas de comando para navegar entre os registros. Clique no botão Next.

 

Figura 06: passo 2.

 

7) No terceiro passo, devemos marcar a opção All Records para que todos os registros contidos no arquivo XML sejam executados. As demais opções selecionam registros específicos. Clique no botão Next.

 

Figura 07: passo 3.

 

8) No quarto passo, as caixas Select a Variable e Select a Field não devem conter nenhuma informação. Caso estejam preenchidas, reveja os passos acima. Na caixa abaixo, Mapped Variables, as variáveis são relacionadas.

 

Figura 08: passo 4.

 

9) O quinto passo é muito importante. Na primeira opção, Filename, selecione o checkbox Use Sequential Names e defina o nome banner. Em File numbering, deixe a ordenação como 1, 2, 3.... Para o item Export Images, selecione a opção JPEG – Better Quality. No campo abaixo, selecione o diretório onde deseja salvar os banner com extensão JPEG. Minha sugestão é que crie um diretório “imagens” no mesmo diretório onde salvou o arquivo XML. Na opção Source Files, selecione a caixa Save Source PNG files e indique o diretório onde devem ser salvos os arquivos originais (PNG) dos banners criados. A sugestão, novamente, é que se crie um diretório chamado “PNG” no mesmo diretório onde se salvou o arquivo XML. Após feitas todas as configurações necessárias, clique no botão Next.

 

Figura 09: passo 5.

 

10) A última etapa apresenta a revisão das configurações feitas ao longo dos cinco passos anteriores. Clique no botão Done para concluir o processo.

 

Figura 10: passo 6.

 

11) Acesse o diretório onde salvou as imagens dos banners para conferir o resultado.

 

Figura 11: banners criados a partir da integração Fireworks com XML.

 

Figura 12: exemplo de banner com as informações contidas no arquivo XML.

 

Desta forma, finalizamos este tutorial com a certeza de que terá aprendido um recurso muito útil presente no Fireworks.

 

Conto com o acesso de todos para os próximos tutoriais!

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 

Estou à disposição de todos! Envie suas críticas e/ou sugestões para o e-mail webdesigner.pro@pop.com.br. Terei todo prazer em respondê-lo.

 

Pessoal, trago uma boa notícia a todos os que acompanham os tutoriais da série Fireworks, aqui no site do Júlio Battisti. Já estão à venda os cursos Fireworks Básico – Passo a Passo e Fireworks – Aprenda na Prática, ambos de minha autoria. É uma maneira fácil e didática de se aprender esta maravilhosa ferramenta de design. São inúmeros exemplos práticos que irão te levar a um mundo totalmente real em se tratando de design em geral. Clique aqui para saber mais sobre o curso Fireworks Básico – Passo a Passo e acesse o site https://juliobattisti.com.br para saber mais sobre o curso Fireworks – Aprenda na Prática.

 

Galera, participem do Fórum de Fireworks no site https://juliobattisti.com.br/ e troque conhecimentos com diversas pessoas. Acesse já!

 

Caso tenha dúvida(s), entre em contato comigo através do e-mail webdesigner.pro@pop.com.br.

 

Para desenvolvimento de Sites, Layout, Apresentações, Flyes, Banners, Identidade Visual, Diagramação, Vetorização e Serviços Gráficos em geral, enviem e-mail para: webdesigner.pro@pop.com.br e solicite seu orçamento. Profissionalismo sempre!

 

Até a próxima!

 

Um cordial abraço a todos,

 

Fábio Almeida