Terça-feira, 04 de novembro de 2003 às 03h59

Integração Fireworks x XML

Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

A maioria dos designers, ao ler esse título, possivelmente não se animará a ler o resto da matéria. A grande maioria tenta ficar o mais longe possível de qualquer possibilidade de se digitar código. Mas eu peço um voto de confiança, pois nesse caso, poderá ser muitíssimo útil e poupar bastante trabalho.

Vamos imaginar uma situação hipotética: Você trabalha para o governo federal, que está organizando um seminário que discutirá os planos e resultados do governo até agora. Sua tarefa é criar pequenas imagens diferentes que conterão o nome do palestrante, sua função no governo, sua foto e o título de sua palestra. Fria, né? Criar não sei quantas imagens diferentes, mas no mesmo molde. Ou seja, o famoso, abre o arquivo, faz as alterações e salva com outro nome. Mas você fez tudo.Legal, ficou do jeito que você queria. Mas é preciso deixar em negrito a função dos palestrantes. Ou seja, temos que abrir todos os arquivos e mudar um por um.

Esse trabalho todo pode ser poupado, utilizando a integração do Fireworks MX (e também o MX 2004) com XML, que é uma linguagem de programação muito simples e bem semelhante a HTML. O XML é também baseado em tags. Vamos lá: iremos criar um molde para nossas imagens no Fireworks, primeiramente. Abra um arquivo novo com 400px x 180px e desenhe um pequeno layout para essas imagens. Eu fiz algo assim:

OK. Agora vamos definir aonde irão ficar os textos extraídos do arquivo XML. Para isso vamos criar variáveis. Variável é um local na memória que irá armazenar alguma informação. Ela irá ser relacionável com o arquivo XML e é lá que irão se encontrar os dados que irão preencher nossa imagem. Para isso, com a ferramenta Texto crie um texto moldado dessa forma: {nomedaVariavel}. Preste atenção nas chaves. A formatação do texto: cor, negrito, itálico, alinhamento, irá ser definido de acordo com o texto criado agora.

Agora falta definir onde ficará a imagem. Então crie um retângulo aonde irá estar a imagem, converta-o para um Bitmap (Ctrl + Alt + Shift +Z) e de um nome para ele.

Então nós temos aqui quatro variáveis, que irão receber os valores do arquivo XML. Então vamos a ele.

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

<imagem>
<varNome>Lula da Silva</varNome>
<varFuncao>Presidente</varFuncao>
<varTitulo>O Milagre do Crescimento</varTitulo>
<varImagem>lula.jpg</varImagem>
</imagem>

<imagem>
<varNome>Antonio Palocci</varNome>
<varFuncao>Ministro da Fazenda</varFuncao>
<varTitulo>A Economia volta a crescer</varTitulo>
<varImagem>palocci.jpg</varImagem>
</imagem>

<imagem>
<varNome>Agnelo Queiroz</varNome>
<varFuncao>Ministro dos Esportes</varFuncao>
<varTitulo>PAN Rio 2007 </varTitulo>
<varImagem>agnelo.jpg</varImagem>
</imagem>

<imagem>
<varNome>Jose Dirceu</varNome>
<varFuncao>Ministro Chefe da Casa Civil</varFuncao>
<varTitulo>Resumo das Reformas</varTitulo>
<varImagem>dirceu.jpg</varImagem>
</imagem>

<imagem>
<varNome>Gilberto Gil</varNome>
<varFuncao>Ministro da Cultura</varFuncao>
<varTitulo>Cultura para Todos</varTitulo>
<varImagem>gil.jpg</varImagem>
</imagem>

</encontro>

A primeira linha do XML é padrão e define a codificação do documento. Note que existe uma hierarquia nas tags, a tag encontro possui várias tags imagem, que possuem todas as variáveis declaradas no Fireworks. Portanto, ele irá substituir no fireworks, os textos colocados por esses dados. Ou seja, cada tag imagem será uma imagem diferente, com conteúdo diferente. Note também que é aqui que eu mostrei o nome das fotos. Eu coletei todas as imagens e salvei numa pasta chamada fotos.

Agora de volta ao Fireworks, com o documento salvo, vai em Commands >> Data-Driven Graphics Wizard. Esse processo vai abrir a seguinte janela.

O processo tem 6 passos. Irei explicar um por um:

Passo 1 : Ele mostra a definição das variáveis. Eu tenho 3 variáveis de texto e 1 de imagem. no campo de texto embaixo, eu seleciono o meu arquivo XML que será a fonte de dados e ainda mais embaixo, seleciono a pasta que conterá minhas imagens.

Passo 2 : Este passo apenas vai mostrar a relação das varíaveis setadas e os dados do XML

Passo 3 : Esse passo lhe permite selecionar quais registros selecionar. Vamos deixar marcada a primeira opção, pois queremos todos eles.

Passo 4 : Esse passo mostra a linkagem das variáveis, com os valores no XML. Se nos dois quadros de cima não houver valor, o relacionamento está perfeito, senão senão necessárias correções.

Passo 5 : Este é a etapa mais importante. Primeiramente, definimos o nome dos arquivos gerados. Ele nos permite definir um prefixo e gera sufixos numéricos. Por exemplo: encontro1, encontro2, encontro3, ... , encontroN . Embaixo, ele nos pergunta se queremos exportar os arquivos. Podemos definir a qualidade da exportação, e a pasta onde os arquivos serão salvos. Podemos também salvar os arquivos originais.

Passo 6 : Essa é a etapa final que mostra o resumo das outras.
Ao final, aperte DONE e é só esperar o fireworks gerar todas as imagens. Veja só:

Pronto. Os arquivos foram gerados, salvos e exportados. Para alterar as imagens, você deve alterar o XML, mas refazer o processo. Espero que aproveitem e até a próxima

1 comentário

 Fernando Peres Farto da Silva
18/06/2006 11h50

coisas novas

Taí uma coisa que eu desconhecia sobre o Fireworks

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.