Essas comparações são as vezes providas de WebDesigners e designers que não tiveram ainda a oportunidade de obter informações e técnicas concretas para utilizar o Fireworks e tudo o que ele pode oferecer de melhor em matéria de designer da Web, a breve comparação ao Photoshop normalmente é relevante ao tratamento digital de imagens, mas o que estamos levando em questão aqui, é o quanto Fireworks nos ajuda no desenvolvimento de sites, e realmente, não pode-se tirar o mérito do gigante Photoshop, ele realmente é impecável para o que foi desenvolvido, tratamento de imagens…, como Fireworks é impecável para seu foco, criação para Web.

Ao longo dos próximos artigos que levarei à vocês, tentarei recheá-los com muitos macetes e funcionalidades incomparáveis à qualquer outro software de criação para Web, recursos que até agora não encontrei disponibilizados em nenhum site, por isso me propus a escrever o artigo batizado de “F I R E W O R K I N G “.

Dentre as grandes vantagens em se trabalhar com softwares da mesma família, está a integração entre eles, como CorelDRAW e Corel Photopain, Illustrator e Photoshop, assim também funciona a família Web da Macromedia; Fireworks X Flash X Dreamweaver.

O exemplo a seguir, revela a técnica ideal para se criar essa animação que está acontecendo abaixo, partindo de uma arte feita em Fireworks, e animada em Flash.

Vamos seguir os passos:

1. Desenvolver a criação propriamente dentro do Fireworks com todos os efeitos e recursos que você já sabe usar, caso ainda não saiba muito, continue acompanhando a coluna que em breve estarei demonstrando também recursos de construção de objetos e efeitos.

2. Após ter utilizado os recursos de multiply em camadas ou nos objetos, o segredo do sucesso da exportação para o Flash consiste em converter todos os elementos com efeitos editáveis em bitmap, mas isto só se faz no momento da exportação para Flash, durante a edição, é necessário os elementos ainda estarem em estado de edição.

Para efetuar a conversão, clique com o botão direito do mouse sobre o objeto e selecione “Convert to Bitmap”.

A conversão das fontes também se faz necessário, pois o arquivo exportado ao final, irá armazenar o texto, porém nem a fonte, nem a formatação correta.

3. Finalizados os procedimentos de conversões, basta um clique com o botão direito do mouse na área externa cinza do arquivo e solicitar Export ou Export Preview. a diferença entre ambos é que no Preview, é possível fazer todas as modificações de formato de saída.

Agora, na tela abaixo, é onde você configura o formato de saída do arquivo, mas no caso, não é necessário a configuração de absolutamente nada pois vamos usar a exportação SWF do Fireworks.

Esta é mais uma boa dica, o melhor formato de entrada de arquivos no Flash é o que ele próprio gera, SWF, e quanto aos bitmaps? o que acontece com eles?

Os bitmaps que são incluídos no Flash por esse método tornam-se ineditáveis, porém, já são exportados em formato PNG8, ou seja, mantendo o canal alpha de suas transparências intactas, evitando assim o velho serrilhado branco do gif, que a tempos deixou de ser um problema desde o surgimento do formato PNG.

Para efetuar a exportação, portanto basta clicar em “Export”.

Nessa próxima tela, configura-se o loval da exportação e tipo de objeto a ser gerado, estarei explicando todos eles ao decorrer das matérias.

Selecione “Macromedia Flash SWF”, em seguida em “salvar”, a partir daí você já possui um arquivo SWF perfeito, vamos ao próximo passo agora.

4. Abra o Flash, e em um arquivo novo, importe o SWF exportado pelo Fireworks. (acesso por file/import ou Ctrl+R).

Logo em seguida, você tem o arquivo SWF importado com todos os elementos separados e dispostos na biblioteca do Flash para utilização, para os mais conhecedores de Flash, sabem que já que todos são symbols, não haverá mais a necessidade de criação de motion tween, que geram novos symbols e começam a sobrecarregar o tamanho final do arquivo, dessa forma todos os elementos ja estão prontos também para serem distribuídos em camadas e animados separadamente e receberem qualquer modificação pelo painel efect.

Veja abaixo uma demonstração de como você pode movimentar livremente cada elemento dentro do Flash, repare nos elementos bitmaps que conseguem dentro do Flash simular o efeito de” Multiply”, as perfeitas transparências sem serrilhados brancos ou qualquer outro impecílio.

Exemplo dos elementos já distribuídos em layers no Flash, com a animação quase finalizada.

O resultado.

Dicas:

a. Se quiser reeditar algum elemento bitmap do arquivo Flash, você pode tomar 2 procedimentos:

1. Gerar a figura separadamente no Fireworks e exporta-la em formato PNG8 com Alpha transparence;

2. Abrir o PNG no Fireworks, fazer as alterações necessárias e reexportar o arquivo SWF, desta vez com outro nome, efetuar a importação em um arquivo em branco do Flash, copiar o objeto alterado e colá-lo dentro do symbol referente ao alterado. Dessa forma, todo conjunto será alterado instantaneamente.

b. Compressão das Imagens no Flash:

1. Quando o arquivo tem saída direta do Fireworks para Flash, seu bitmaps como já foi esclarecido, dê entrada no Flash como PNG8 com Alpha transparente, sendo assim, a reconversão para JPG 50% ou qualquer outro formato torna-se desnecessária, pois o Flash, por alguma questão, trata de um jeito especial essas imagens, e o arquivo acaba ficando mais leve que se recomprimido em JPG, façam o teste se duvidarem!

c. Gradientes complexos também devem ser convertidos em bitmaps antes da exportação, já que o Fireworks possui uma biblioteca de gradientes mais evoluída e com mais tipos padrões em relação a do Flash.

Autor/fonte: Eduardo Carrega

Atendendo a pedidos, o assunto em pauta dessa vez é imagens no Fireworks, aos construtores de sites de plantão, que me perguntarem incansavelmente nos e-mails como fazer as seguintes tarefas:

1. Fotos com imagens de efeito televisivo, aquelas, cheias de risquinhos;
2. Como fazer uma transparência que termina em alpha;
3. Tem path no Fireworks para se recortar com precisão uma imagem?

Resposta: Tudo isso se faz com uma ferramenta poderosíssima no Fireworks, a Máscara (Mask).

Mãos à obra!

Primeira questão

Fotos com imagens de efeito televisivo, aquelas, cheias de risquinhos.

1. Abra uma foto ou crie uma figura qualquer;

2. Desenhe sobre a figura um quadrado preto (não precisa ser exatamente do mesmo tamanho);

3. Selecione o quadro preto, vá ao painel Fill / texture/lines-Horiz-4, nesse caso não se faz necessário marcar o item “transparence”;

4. Selecione ambas as figuras simultaneamente (por layers ou por englobar);

5. Selecione a opção no menu Modify/mask/group as mask.

Dicas:

a. Você pode selecionar na layer, somente um dos objetos (máscara ou alvo) e reeditá-los sem separá-los da mascara, inclusive aplicar texturas diferentes em ambos;
b. Para reeditar a posição de uma máscara em relação a um objeto, basta liberar o “elo” entre ambos na layer;
c. para desmembrar uma mascara, basta pressionar Ctrl+Shift+G;
d. Uma máscara pode ser visualizada ou inabilitada da mesma forma que já é feita no Photoshop.

Clique sobre as Mask, vá à seta de opções de layers e selecione “disable Mask”.

Segunda questão

Como fazer uma transparência que termina em alpha.

Com esse próprio arquivo aberto, já é possível fazer essa conversão com 3 cliques!

1. Selecione o objeto da mascara em layers, vá ao painel Fill, e escolha no item “gradiente” a opção “Linear”, no modo preto»»branco.

Dicas:

a. Você pode assim mesmo continuar mesclando efeitos em ambos os objetos separadamente.

Terceira questão

Tem path no Fireworks para se recortar com precisão uma imagem?

Sim, perfeitamente, aliás, é a forma de recorte de imagem que mais se assemelha ao Photoshop.

1. Uma imagem qualquer na tela, selecione a ferramenta Pen (pressione “P” no teclado), e comece a simplesmente clicar e arrastar a linha por volta da imagem, contornando-a toda até seu final;

2. Efetue a Mascara entre o objeto desenhado e a figura;

3. Para obter um acabamento especial em blur nas bordas (Feather), selecione em layers o objeto Mask e no painel Fill, no item “edge”(borda) selecione “Feather”, e de seu valor na caixa deslizante ao lado.

Dicas:

a. Qualquer objeto vetorial no Fireworks pode receber um Feather;
b. Para selecionar somente a máscara sem necessitar clicar na layer, utilize a seta branca (Subselection Tool)(A) e clique no objeto;
c. Outra forma de mascarar alguma coisa, é selecionar o objeto alvo, recorta-lo da tela, selecionando o objeto máscara e pressionando Ctrl+Shift+V (paste in place).

Faça aqui (http://www.imasters.com.br/web/colunistas/fireworks/2/imagens.zip) o download dos arquivos PNG.

PNG8 é um bom formato pois no Flash suporta o canal alpha e no HTML tem as mesmas características de um GIF, no máximo 256 cores, em alguns casos mais leve e de maior qualidade.

Autor/fonte: Eduardo Carrega

Quem nunca se deparou com aquela situação contundente, com um site praticamente pronto, desenvolvido em HTML, com as imagens todas recortadas em tabelas, muito bem divididas e nomeadas, e de repente, seu cliente faz aquela declaração: “Eu gostei do azul… mas não dava para ser um pouco mais clarinho? … e se fosse verde?!”, e dá-lhe você passando 2 dias alterando todos os blocos de imagens criados, caçando nome de imagens em tabelas, aquele trabalhão já conhecido por muitos.

Neste novo artigo da série Fireworking, exemplifico a utilização lógica da ferramenta de multidesenvolvimento Fireworks com o Dreamweaver ou Ultradev, com destaque à criação de imagens e inserção delas em tabelas diretamente dentro do Fireworks, posteriormente com a exportação do arquivo para HTML e pós-editado no Dreamweaver e implementado com behaviors e componentes Javascript não existentes no Fireworks.

Logo será feita a alteração de todo conteúdo bitmap do site, mantendo as tabelas e HTML já alterados intactos após a troca de todas as imagens de uma forma muito simples e rápida, mãos à obra!

Vamos seguir os passos:

1. Slices

Com a arte já construída no Fireworks, o procedimento agora é a criação das tabelas, que são representadas por “slices”, e que vão automaticamente “repicando e otimizando” a criação das tabelas, cada slice (fatia) tem um nome próprio, nas próximas matérias acompanhe como ele pode ser configurado para exportar determinada facção do arquivo em JPG, outra parte em GIF, outra em PNG, isso, num só procedimento de exportação.

2. Exportar ou publicar

Com os slices configurados, a exportação é feita pelo comando “File/Export preview”, nessa tela agora demonstrada, o principal comando é o formato de saída do arquivo (JPG, GIF…), configure o documento de acordo com a necessidade de cores, dê sempre preferência ao formato GIF com a média de 64 cores para não sobrecarregar o arquivo, em seguida clique no botão “Export”.

Nessa última tela, temos as referências de salvamento, escolha um local de fácil acesso para o salvamento e selecione os seguintes parâmetros:

a. Nome do arquivo: teste.html;
b. Salvar como: HTML and images;
c. HTML: export HTML files;
d. Slices: export slices;
e. Include areas without slices;
f. Put images in subfolder.

O diretório padrão de salvamento das imagens é “images”.

Importante: Caso nunca tenha clicado no botão “options” ao lado direito dessa janela e configurado as opções, deve fazê-lo agora para gravar algumas configurações avançadas permanentemente e extremamente necessárias, são elas:

GENERAL
extension = .html
TABLE
Space with = Nested Tables - no spacers
Cell color = nada
Contents = Non-breaking spacer
DOCUMENT ESPECIFIC
Botão “SET DEFAULTS” (para gravar permanentemente as configurações)

Essas configurações, modificam completamente a forma de que o documento será exportado e gerado em HTML, no modo original do Fireworks, ele cria pequenas imagens de 1px de espaçamento, utilizadas para controlar o tamanho das tabelas geradas, mas que tem um resultado terrível na reedição do HTML no Dreamweaver.

Com as novas configurações, o problema é eliminado, são geradas tabelas puras, sem impecílios para reedição e manipulação de objetos no HTML.

Clique no botão “salvar” para finalizar a exportação e não feche o Fireworks.

3. No Dreamweaver

Abra o arquivo “teste.html” gerado anteriormente…

… atribua na imagem “fireworking”, um behavior (comportamento) de “open browser window”, configure-o para abrir “teste2.html, 200px de largura e altura, nome da janela “teste2″”…

O evento do behavior deve ser no “onMouseUp” (quando o mouse subir).

Salve o documento e teste o arquivo no navegador pressionando F12.

4. Trocar a cor

Mantenha seu Browser de Internet aberto, e feche o Dreamweaver.

Retorne ao Fireworks, e troque a cor do fundo do trabalho à seu gosto “Modify/canvas color”.

5. Exportar novamente

Novamente vamos Exportar o arquivo, “File/Export Preview”, configure o tipo de saída de imagens, clique no botão “Export” novamente, e na última tela, onde configura-se o local da exportação, vamos alterar os seguintes itens:

a. Salvar: selecione a pasta “images” desta vez;
b. Nome do arquivo: teste;
c. Salvar como: images;
d. Slices: export slices;
e. Include areas without slices.

O que foi feito acima, é dizer ao Fireworks exportar somente as imagens recortadas nos slices diretamente dentro da pasta “images”, substituindo com absoluta exatidão de nomes um número ilimitado de imagens simultaneamente.

6. O navegador

Na tela de seu navegador ainda aberto:

Simplesmente atualize a tela (Ctrl+R) e veja o resultado.

Uma ação que demoraria horas, não foi suficiente nem para ocupar mais do que 5 minutos de seu dia, isso foi possível graças aos recursos disponíveis no Fireworks.

Caso queira tirar a prova, abra o arquivo novamente no Dreamweaver e constate, o botão “fireworking” ainda contém o behavior intacto.

Dicas:

a. Você pode facilmente inserir um slice sobre uma figura ou um bloco de texto qualquer, basta clicar com o botão direito sobre o item, e ir até a opção “insert slice”, pronto… rapidinho e sem sofrimento;

b. Você pode fazer o procedimento acima (inset slices) em várias imagens ao mesmo tempo, o Fireworks ira lhe dar uma caixa de diálogo com a questão: “Multiples slices or single slice?”, responda que é MULTIPLE que o fireworks dá conta do recado;

c. Um slice pode ser perfeitamente duplicado, basta arrastá-lo apertando o ALT;

d. O slice possui uma camada ou layer especial, é chamada de” Web Layer” e pode ser visualizada no painel Layers (window/layers), é sempre a primeira de todas, e pode também ser travada e ocultada;

e. Uma página toda dividida em slices, permite um melhor carregamento e a simulação de mais rápido, e ainda altera a seqüência de carregamento habitual “de cima para baixo” para facções do arquivo, vale a pena testar!

Autor/fonte: Eduardo Carrega