Fireworks CS6

O Adobe Fireworks CS6 hoje a melhor ferramenta de crio para a Internet.

Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por
costume, outros por comodidade e alguns por no conhecerem a ferramenta.
Como citado anteriormente, o Fireworks uma poderosa ferramenta,
principalmente quando utilizada no desenvolvimento de aplicaes para a Web,
como design de pginas e tratamento e criao de imagens e animaes.
Trabalhando com as demais ferramentas de tratamento de imagens, como o
Photoshop; ferramentas de criao de pginas HTML, como o Adobe
Dreamweaver; ou at mesmo com softwares especializados em animaes,
como o Adobe Flash, podemos criar Websites pessoais, empresariais ou de
comrcio, de uma forma simples, objetiva e com grande desenvoltura de
criatividade, tanto em edio de imagens, como na produo de animaes.
Dentre os assuntos abordados durante esse curso, criaremos desde um
simples grfico, com formas bsicas e textos, passaremos por etapas de
montagem de efeitos visuais e tratamento de imagens, at a criao de uma
pgina Web e a produo de animaes.
Como voc pode ver, o Fireworks uma ferramenta poderosa e com mltiplas
funes, no que diz respeito criaes Web.
Utilizaremos o software mais comum para a criao de animaes, o Adobe
Flash cs6, para aplicarmos efeitos extras sobre a animao criada pelo
Fireworks, buscando aproveitar ao mximo o seu aprendizado.
Os computadores trabalham com dois formatos de grficos: vetorial ou de
bitmap. Entender a diferena entre estes dois formatos fundamental para a
realizao de um bom trabalho com o Fireworks.

Grficos Vetoriais
Um grfico vetorial pode ser traduzido como uma imagem composta de linhas e
curvas, que tambm possui informaes sobre sua cor e posio.

Ao editar um grfico vetorial, voc modifica as propriedades das linhas e curvas

do objeto e, como os grficos vetoriais so livres de resoluo, voc poder
mover, redimensionar, mudar a forma e alterar a cor do mesmo, que no
ocorrero alteraes na qualidade de sua aparncia.

Grficos de Bitmap
Os grficos de bitmap so constitudos por pontos denominados Pixels,
organizados em uma grade. A prpria tela do computador consiste em uma
grande grade de pixels.
Ao contrrio da composio de um grfico vetorial, o bitmap constitudo por
pontos, aos quais so atribudos uma determinada cor e fixados sobre uma
grade de tamanho determinado. Quando visualizados na resoluo correta, os
pontos so encaixados como um quebra-cabeas.
Quando editado, o usurio modifica os pixels em vez das curvas e linhas, como
no grfico vetorial. Dessa maneira, os grficos de bitmap tornam-se
dependentes de resoluo, e o aumento do grfico pode fazer com que as
bordas e cores fiquem alteradas, pois os mesmos pixels so redistribudos
dentro da nova grade.
Vale destacar ainda, que a exibio de um bitmap atravs de um dispositivo de
resoluo menor que a do grfico, tambm degrada a qualidade de sua
imagem.

Inicinado o Fireworks CS6

Para iniciar o Fireworks CS6, clique no boto Iniciar, da Barra de Tarefas,
escolha a opo Todos os programas, Adobe Master Collection CS6 e
selecione Adobe Fireworks CS6.

Janela do Fireworks CS6 aberta com seus principais componentes:

Barra de Menu: nesta rea esto localizados todos os menus de comandos, os

quais so responsveis por armazenar a maior parte dos recursos disponveis
no programa.
Painel de Ferramentas: possui os principais botes e ferramentas de criao e
edio de desenhos.

Paletas de Controle: janelas suspensas com recursos para configurar efeitos,

formatar objetos, etc.

Inspetor de Propriedades: a paleta onde sero exibidas as propriedades de

cada objeto, ferramenta selecionada ou documento.

Iniciando um novo documento

Atravs da tela de apresentao possvel abrir um arquivo existente ou criar
um novo como na imagem abaixo:

Na opo Criar novo, cliquem em Documento do Fireworks (PNG).

Com a opo selecionada escolha com o mouse Largura e defina os seguintes
valores:

Temos agora, a janela do documento exibindo a nova tela, onde sero criadas
e editadas as imagens.

Salvando o arquivo
Para salvar o documento em branco, clique no menu Arquivo, da barra de
menus do Fireworks e selecione a opo Salvar.

Ao surgir a caixa de dilogo Salvar como, selecione o boto drop-down Salvar

em e procure sua pasta.

Em seguida, o nome cartaz, definido para o arquivo, juntamente com a

extenso png de arquivos padro do Fireworks, exibido na barra de ttulo do
programa e na guia de ttulo da janela do documento.

Abrindo o arquivo
Clique no menu Arquivo do Fireworks e selecione a opo Abrir.

Ao surgir a caixa de dilogo Abrir, ative o boto drop-down do Examinar e

procure sua pasta.

Selecione, com um clique, o arquivo cartaz.png.

Clique no boto Abrir para abrir o arquivo no Fireworks.

Painel de Ferramentas

O Painel de Ferramentas encontra-se no canto esquerdo da rea de trabalho

do Fireworks.

Se as ferramentas no aparecerem, atravs do menu Janela e selecionando a

opo Ferramentas possvel v-las novamente.
Esto subdivididas em 6 grupos, de acordo com sua aplicao: Selecionar,
Bitmap, Vetor, Web, Cores e Exibir. So elas:

Quando selecionamos uma ferramenta, no painel, algumas opes da mesma

so oferecidas para escolha em Propriedades.
Propriedades com a ferramenta Gradiente selecionada:

Propriedades
O Propriedades um painel sensvel ao contexto que exibe as propriedades
da seleo atual, opes de ferramenta atual ou propriedades do documento.
Por padro, localiza-se na parte inferior da rea de trabalho do Fireworks.
Possui uma seta expansora em sua parte inferior direita, a qual determina sua
visualizao no espao de trabalho, variando entre inteira e meia altura.

Para ocultar o Inspetor de propriedades ou visualiz-lo, voc deve clicar

sobre o ttulo da paleta:

Essa mesma regra vale tambm para as Paletas de controle, localizadas no

canto direito da janela do Fireworks.

Voc pode ainda ocultar todas as paletas simultaneamente, clicando na seta da

barra vertical que divide a rea de trabalho do Fireworks CS6:

Formas vetoriais
Primeiramente, criaremos um objeto vetorial no documento. Selecione a forma
Retngulo na ferramenta Formas, localizada na categoria Vetor do Painel de
ferramentas:

Clique sobre o boto de cor do preenchimento, localizado no Inspetor de

propriedades e selecione a cor azul #0000CC, ou simplesmente digite esse
nmero no campo referente cor:

Em seguida, note que, sobre a tela, o cursor toma a forma de uma cruz. Clique
prximo do canto inferior esquerdo do documento e, com o boto pressionado,
arraste-o at o canto inferior direito, dando ao objeto a forma de um retngulo,
como mostra a figura abaixo:

VDEO

Selecione a ferramenta de seleo Ponteiro :

possvel saber quando o objeto est selecionado pelos pontos de seleo de

cor azul em seus cantos, como tambm, por adquirirem um contorno dessa
mesma cor.

Definindo largura e altura do objeto

Com o cursor sobre o objeto retngulo, mantenha o boto esquerdo do mouse
pressionado e arraste-o at a borda inferior da tela do documento, como
mostra a figura abaixo:

Leve o cursor do mouse at o campo L e d dois cliques sobre ele para

selecion-lo.

Em seguida, atribua o valor 420 para ele:

Observe agora, que o objeto retngulo exibe a largura de 420 pixels, que foi
estipulada de acordo com a largura determinada inicialmente para a criao do
documento. Observe tambm, que pela situao do objeto no documento, ele
ultrapassa seu limite visual:

Clique sobre o campo da posio X e atribua-lhe o valor 0 (zero) para centr-lo

corretamente no documento.

Voc tambm pode clicar sobre o retngulo e arrast-lo para a esquerda para
ajust-lo ao documento.
Retngulo ajustado horizontalmente a partir do ponto "0" da borda esquerda do
documento.

Definiremos agora, a altura do nosso objeto retngulo: selecione a opo A e

atribua-lhe o valor 30.

Tecle <Enter>.
Observe pelos pontos de controle azuis, como o retngulo aumentou seu
tamanho, agora no sentido vertical:

Assim como ajustado anteriormente, clique sobre o objeto e arraste-o para que
sua borda inferior acompanhe a do documento.

Para ajust-lo alterando a posio Y (vertical), vale destacar que a posio "0"
equivale borda superior do objeto.

Um clculo simples seria subtrair a altura do objeto do valor da altura do

documento.
Por exemplo: observe que o valor da altura do documento equivale a 315
Pixels:

A altura do retngulo determinada anteriormente foi de 30 Pixels:

Portanto, 315 - 30 = 285.

Crie outro Retngulo um segundo objeto vetorial.

No boto cor de preenchimento da barra de ferramentas propriedades
selecione a opo de preenchimento transparente, fazendo com que esse
retngulo atue como uma borda no documento.

Troque a cor de trao para um tom de verde claro.

Em seguida selecione a caixa de largura do trao e altere seu valor para 5.
Nova aparncia do objeto:

Em seguida defina os seguintes valores da largura, altura e coordemnadas do

objeto:
W: 420
H: 315
X: 0
Y: 0

Bitmap
O Fireworks pode trabalhar com objetos vetoriais e de bitmap em um mesmo
documento.
Para trabalhar com esse tipo de imagens necessrio importar .

Depois de selecionada a imagem o cursor se transforma em um ponteiro de

insero e possui a forma representativa do canto superior esquerdo da figura.
Caso a figura no tenha ficado alinhada corretamente com os cantos do
documento, alm do recurso de clicar e arrastar do mouse, voc pode tambm
utilizar as setas do teclado para realizar o ajuste que achar necessrio, ou

ainda, atravs das coordenadas X: 0 e Y: 0, j que a altura da imagem possui

os mesmos 315 Pixels da tela do documento.

Camadas
Cada objeto de um documento reside em uma camada diferente. A Paleta de
controle Camadas permite a manipulao dessas camadas e objetos.

- Ttulo da paleta Camadas;

- Camada 1;
- Objeto Retngulo;
Conforme vo sendo criados, os objetos seguem a ordem de baixo, que
representa o ltimo objeto da camada ou a ltima subcamada do documento,
para cima.
- Objeto sendo visualizado na camada;
- Nome do objeto/camada
Para visualizar as paletas de controle, basta clicar no boto Visualizar/Ocultar
Paletas, no canto direito da janela do Adobe Fireworks CS6.

o Fireworks organiza as camadas como se fossem pastas e subpastas. Na

prtica, o efeito o mesmo, servindo apenas para uma melhor organizao das
camadas quando necessrio, ou seja, quando houver uma complexidade e um
grande nmero de objetos para compor o documento.

Selecionando a camada
Para selecionar uma camada basta clicar sobre ela, observe que se a camada
selecionada for a ltima, ter uma parte oculta sob os outros objetos, os pontos
de seleo indicam e simbolizam a presena e o posicionamento do objeto no
documento.

Alterando o nome do objeto

Clique sobre a camada que deseja alterar o nome, na guia propriedades,
habilite com um clique a caixa do nome do objeto. Digite o nome desejado e
tecle <Enter> para confirmar.

Perceba que o nome na camada j modificado.

Outra forma de renomear o objeto dando um duplo clique sobre ela na paleta
Camadas.

Alterando a Ordem dos Objetos na Camada

Para alterar a ordem das camadas, basta clicar sobre o objeto

e manter o boto esquerdo do mouse pressionado, arrastar
sem soltar o boto esquerdo do mouse para cima ou para
baixo, de modo que seu desenho fique como o de cima.
Exemplo: para deixar igual a imagem abaixo, posicione a
camada da borda verde por primeiro, logo em seguida
posicione a imagem em bitmap por segundo e por fim
posicione a faixa azul deixando-a por ltimo. Perceba que
como a borda verde ficou por primeiro na paleta das
camadas, ela aparece a frente da imagem bitmap.

Ocultando/Visualizando Camada
Para deixar de visualizar determinada camada, basta clicar no smbolo do olho,
frente do objeto Borda Verde. Observe que quando clicamos no olho, o
objeto no mais visualizado, mas continua no documento.

Ferramenta Zoom
Os efeitos ao vivo do Fireworks CS6 so melhorias que podem ser aplicadas
aos objetos vetoriais, imagens de bitmap e texto. Chanfros e relevo, sombras e
brilhos, correo de cor e graus de desfoque so alguns dos efeitos ao vivo
possveis. Depois de aplicados, permitido ainda, alterar suas opes,
reorganizar a sua ordem e testar a combinao com outros efeitos, bem como
exclui-los.
Para trabalhar com a ferramenta Zoom, inicialmente ter que abrir um bitmap.
Feito isso, selecione a ferramenta Zoom, observe que o cursor transforma-se
em uma pequena lupa, com um sinal de +. Para aumentar a visualizao da
imagem d um clique com o boto esquerdo do mouse sobre o documento.

Em seguida, observe que a visualizao mostra 150%, no indicador do

canto inferior direito da tela do documento:

Ferramenta seleo
Ferramentas de seleo do grupo Lao.

Trabalhando com a Lao Poligonal. Quando selecionada o cursor toma forma

do lao polgono.
Na barra de ferramentas Propriedades, na opo Borda temos 3 tipos de
opes:

Intenso: mantm as
alterao/suavizao.

Suavizao: permite que desenhe uma seleo de pixels usando uma

srie de linhas retas.

Difuso: oferece uma suavizao arredondada nas extremidades da

seleo de pixels, arredondando-as.

extremidades

do

corte

de

seleo

sem

Para trabalhar com a ferramenta necessrio posicionar o cursor sobre um

ponto inicial, que recebe o smbolo de um quadrado ao lado do cursor.Com

cliques seguidos, v contornando toda a parte do pssaro visualizada acima do

galho. Ao se aproximar do ponto de partida, o cursor volta a exibir um quadrado
ao lado, indicando o ponto de chegada.
Para selecionar partes da figura onde tem outro objeto sobre, deve-se
pressionar a tecla <Shift>, no momento de inicio e fim da seleo.
VDEO

Para colocar uma imagem em outra camada, basta estar com a mesma que
queira em outra selecionada, clicar no menu Editar>Copiar. Em seguida
selecione novamente o menu Editar>Colar. Observao: tem que estar com a
imagem selecionada!
Quando a imagem bitmap, colada, ela fica sobre a camada original. Observe
a imagem abaixo:

Adicionando
predefinio

filtro

em

tempo

real

ou

escolhendo

uma

Esse efeito interessante pois, o filtro adicionado fica sobre o fundo da

imagem selecionado com alguma ferramenta de seleo.
Para adicionar o efeito, clique no Inspetor de propriedades.

Para ajuste de cor, clique em Ajuste de cor e selecione a opo

Matiz/Saturao.

Surgir a caixa de diologo Hue/Saturation, onde voc definir quais os

possveis valores para a alterao da cor. Clique sobre Colorize, para ter uma
pr-visualizao da cor final.

Observe que o pssaro no sofre alteraes de cor por estar numa camada
separada, e por ter sido colado anteriormente encontra-se sobre aquela que
est sofrendo o efeito.
Para fazer alteraes no efeito, basta clicar sobre ele na lista que aparece na
barra de propriedades.

Mscaras
As mscaras mostram ou ocultam partes de um objeto ou imagem. Possibilitam
vrios tipos de efeitos criativos, como uma janela enevoada ou at a utilizao
de seus prprios tons de transparncia para afetar a visibilidade.
O objeto de mscara pode ser vetorial ou de bitmap e sua aplicao resulta
tambm em uma mscara vetorial ou de bitmap, respectivamente. possvel
ainda, utilizar vrios objetos livres ou agrupados para o mesmo fim.
Para adicionar uma mscara clique sobre o boto Adicionar mscara,
localizado na barra auxiliar da paleta Camada.

Mscara inserida sobre o objeto.

interessante adicionar algum efeito essa mscara. Se fosse usar um efeito

gradiente, para faz-lo, primeiramente selecione a camada que apresenta a
imagem bitmap, em seguida adicione o efeito gradiente imagem.
preciso mesclar a camada que contm o efeito e a mscara com a camada
que contm s a imagem bitmap, para isso selecione a figura bitmap, clique
sobre o boto de opes da paleta Camadas, localizada no canto direito da
barra de titulo da mesma.

Selecione a opo Mesclar para baixo.

Pode surgir uma caixa de dilogo notificando que a operao ser feita com
uma camada que contm uma mscara, e essa mesma tambm ser mesclada
na imagem, impossibilitando, a partir disso, alteraes sobre ela. Clique no
boto OK para executar a mesclagem.

Observe que agora, o Bitmap, j mesclado, voltou a ser uma nica imagem,
contendo as modificaes decorrentes de efeitos e mscaras:

Exemplo de imagem com efeito gradiente em uma mscara:

Repare as imagens e as camadas, uma com j com a mscara.

Ferramenta texto
O Fireworks disponibiliza recursos avanados para criao e edio de textos,
permitindo que o usurio utilize fontes em diferentes tamanhos e cores.
A edio de um texto pode ser feita a qualquer momento, inclusive aps a
importao de textos editveis de outros aplicativos para o Fireworks.
A ferramenta texto fica localizada na categoria Vetor do painel de
ferramentas.

O cursor passa a representar uma forma caligrfica, como mostra a figura

abaixo.

Blocos de Textos
Todo texto inserido e um documento do Fireworks exibido no interior de um
bloco de texto. Este bloco de texto representado por um retngulo com alas
que permitem redimensionar sua largura e altura.
Os blocos de texto podem ser de dois tipos diferentes: com largura fixa, ou com
redimensionamento automtico.
Dimensionamento automtico: Expande-se horizontalmente conforme o
usurio segue digitando seu texto. Tambm se redimensiona no caso de
remoo do mesmo ou de parte dele. So criados por padro, quando se clica
na tela. Esse tipo de bloco de texto possui o canto superior direito vazado e
arredondado.

Indicador de Largura Fixa: Blocos de texto de largura fixa permitem controlar

sua largura com quebra de linha. So criados por padro, quando arrastamos o
cursor no documento com a ferramenta Texto selecionada. Possuem um
quadrado vazado no canto superior direito.

Para alterar um bloco de texto de dimensionamento automtico para largura

fixa ou vice-versa, com o mesmo ativo, basta dar um duplo clique sobre o canto
vazado.

Quando se insere um texto, automaticamente criada uma nova camada e

essa camada fica com o nome que voc digitou na caixa de texto.

Na imagem acima o texto inserido foi Ambient.

Camada com o nome que foi inserido o texto:

Tambm possvel aplicar efeitos em textos.

Com o texto selecionado basta clicar em Efeitos, no boto de + e adicionar o
efeito desejado.

Ainda existem opes para Orientao, Trao, Preenchimentos e Traados.

Vejamos alguns exemplos adicionais:
Orientao do texto
Um bloco de texto pode ser orientado horizontal ou verticalmente, conforme
seleo atravs do boto localizado no Inspetor de propriedades. Por padro,
o mesmo orientado horizontalmente, da esquerda para a direita, como
podemos observar atravs da figura abaixo:

Pode ser definido tambm horizontalmente da direita para a esquerda:

FALTA IMAGEM

Verticalmente da esquerda para a direita:

E verticalmente da direita para a esquerda:

possvel ainda, atribuir um estilo ou textura para o texto selecionado. Basta

utilizar, as diversas opes no painel da guia Estilos, localizado na paleta
Ativa. Veja abaixo, alguns exemplos possveis de:
Estilos de textos

Estilos de Texto Criativo:

Ressaltando que o mesmo ainda oferece diversas possibilidades de

combinaes atravs do Inspetor de propriedades.
Os efeitos sublinhados referem-se aos itens mostrados no campo Efeitos.
possvel sua Ativao/Desativao com um clique sobre o cone indicado na
figura acima.
Convertendo texto em traado
Voc pode converter texto em traado e depois edit-lo como qualquer outro

objeto, com todas as ferramentas de edio vetorial disponveis. No entanto,

ele perde suas propriedades de "Texto".
Para obter esse efeito, selecione a ferramenta Linha na categoria Vetor do
painel de ferramentas. Lembrando que j tem que estar criada a caixa de texto.

Para fazer uma linha semelhante a da imagem abaixo, faa uma linha clicando,
arrastando o cursor e soltando o boto do mouse.

Selecione a ferramenta Ponteiro, na categoria Seletar e selecione com um

clique, o objeto Texto.

Com a tecla <Shift> pressionada, clique tambm sobre a linha, selecionando

os dois objetos simultaneamente. Para finalizar, clique no menu Texto e
selecione a opo Anexar ao Caminho.

Para mudar a orientao do texto, clique sobre o menu Texto e selecione uma
nova opo em Orientao.

Resultado:

Preenchimentos e Texturas de Vetores

O usurio pode definir as ferramentas de desenho vetoriais e de bitmap,
preenchimentos e texturas diversas para traos e formas; entre elas o
Retngulo, Elipse e Polgono. Vejamos os diferentes tipos de
Preenchimentos e Texturas.

Preenchimento Slido
Um preenchimento slido representa uma cor slida que ocupa o interior de um
objeto.
Observe a estrela na imagem abaixo, j com o preenchimento da cor. Para
colorir um objeto basta criar um e no painel de ferramentas, na categoria cor
selecionar uma cor de seu gosto.

Preenchimento Padro
possvel tambm, preencher um objeto com um grfico de bitmap
padronizado pelo Fireworks, que oferece diversas opes prontas para este
fim.
Para utiliz-lo basta criar um objeto na rea do documento, e com o mesmo
selecionado, clicar sobre o boto de preenchimento e selecionar novamente a
opo Preenchimento Padro.

Atravs do boto Categorias possvel alterar o tipo de preenchimento.

Atravs dos pontos de ajuste visual, possvel que se mude a visualizao da

imagem, alterando-se a posio dos pixels Vertical e Horizontalmente.

No exemplo abaixo um retngulo com o preenchimento padro definido:

Para utilizar essa opo basta clicar sobre o ponto central, que tem a forma
arredondada, e arraste-o para o canto inferior esquerdo da tela, como mostra a
figura abaixo:

Se clicar sobre o ponto de ajuste horizontal e arrast-lo para o canto superior

direito, observendo a mudana na imagem:

Preenchimento Padro Personalizado

Tambm possvel utilizar um preenchimento Padro Personalizado,
escolhendo uma imagem PNG, GIF, JPEG, BMP ou TIFF, para preencher um
determinado espao.
Com algum objeto criado no documento, clique sobre o boto de
preenchimento no Inspetor de propriedades e no drop-down Nome de
preenchimento.

Selecione a opo Outro:

Ser aberta a caixa de dilogo Locate File para que possa ser localizado o
arquivo de imagem desejado. Atravs do campo Examinar ser selecionado
local de seu computador que deseja abrir a imagem.

Imagem inserida no objeto:

Preenchimento Degrad

Atravs do preenchimento degrad possvel colocar preenchimentos em

textos.

Rguas, Guias e Grades

O Adobe Fireworks, assim como outros editores grficos, permitem a
utilizao de rguas, guias e grades para obter uma melhor preciso no
posicionamento de trabalhos grficos. Facilita um melhor manejo das
ferramentas de desenho e possibilita alinhar objetos s guias e grades.
Utilizando a rgua
As rguas so muito teis para auxiliar a medio, organizao e planejamento
do layout de seu trabalho. Como o Fireworks CS6 um software com fins de
tratamento de imagens para a Web, onde os grficos so medidos em pixels,
esta tambm a unidade de medida da rgua, independentemente da utilizada
para a criao do documento.
Se a rgua no estiver sendo exibida, atravs do menu Exibir, na opo
Rguas possvel visualiz-la denovo, ou atravs das teclas de atalho
<Ctrl>+<Alt>+<R>.
Rguas sendo exibidas:

Clicando sobre as rguas e arrastando o cursor sobre a imagem, surgem as

linhas-guias, que devero ser arrastadas conforme a necessidade do usurio.

VDEO

Grades
Alm das rguas e guias, existe tambm um recurso muito interessante no
auxlio composio de imagens e demais grficos no Fireworks CS6. Este
recurso chamado de Grades e sua ativao d-se por meio do menu Exibir.

Em um projeto grfico para a Web, uma imagem precisa ter duas

caractersticas principais: atratividade e leveza. Para isso, necessitamos
otimiz-la.
A Otimizao permite que a imagem seja gerada com o melhor equilbrio entre
qualidade e compresso, no formato que melhor se adeque s necessidades
do projeto.

Otimizando uma imagem

Paleta Otimizar.

A paleta Otimizar exibe automaticamente a melhor opo para a exportao do

arquivo. A figura abaixo exibe na paleta, o formato JPEG, para o qual o arquivo
ser exportado com 73% de qualidade, relativa ao arquivo original PNG. O
documento exibe tambm, em sua Barra de Status Visualizar atravs da guia ,
o tamanho com que o arquivo ser salvo nessas condies e o tempo que
levar para ser descarregado pelo navegador de um usurio atravs de uma
conexo de 56 KBPS (1024 Bytes Por Segundo). Lembrando que essa
informao leva em considerao o fato de a imagem poder ser utilizada para a
Web.

Exportando a imagem
Para exportar um arquivo, selecione com um clique, uma das janelas no
modificadas e que permanecem no formato JPEG com a porcentagem de 73
para a qualidade a ser exportada na imagem.

Para concluir a exportao da imagem, clique no boto Exportar.

Aps feito isso, selecione o local onde deseja salvar.

Interagindo com a Web

Alm de criar e editar imagens graficamente, como visto at o presente
momento, o Fireworks pode concluir documentos interativos para a Web (rede
mundial de computadores).
O programa gera automaticamente, todo o HTML e Javascript necessrios
para a aplicao desenvolvida.
Nas prximas lies, aprenderemos a utilizar esse aspecto do Adobe
Fireworks CS6, compreendendo toda a versatilidade deste poderoso software.

Fatias
Fatias so blocos bsicos de construo para uma pgina HTML. O fatiamento
corta um documento do Fireworks em pedaos menores e exporta cada fatia
individualmente. Com essa diviso, o usurio ir visualizar a pgina conforme
as fatias so carregadas e remontadas pelo navegador. Sendo assim, ele no
precisa aguardar o carregamento da pgina inteira, antes de visualiz-la,
acelerando o processo.
Alm disso, essa propriedade na construo de uma pgina Web possui ainda
trs outras grandes vantagens:
Otimizao: permite otimizar cada fatia individual, com o uso do formato de
arquivo e configuraes de compresso mais apropriadas, possibilitando que

as imagens sejam descarregadas com maior rapidez pelo navegador, sem

perder a qualidade.
Interatividade: criando reas de resposta presena do cursor do mouse.
Atualizao: permite atualizar com facilidade, partes de uma pgina que sofre
modificaes freqentes em alguns setores, sem que seja necessria a
atualizao ou modificao da mesma por inteiro.
Para agrupar duas ou mais imagens, transformando-as em um nico bitmap,
antes deve-se selecionar os objetos que sero envolvidos. Atravs da
ferramenta Ponteiro, clica-se sobre os objetos e com a tecla <Shift>. Aps,
clica-se com o boto direito do mouse, sobre os objetos selecionados e
escolhe-se no menu suspenso a opo Agrupar.

Paleta Camadas com os objetos agrupados.

Para desagrup-los basta utilizar a opo Desagrupar.

Fatiando a imagem
Para fatiar uma imagem basta clica no menu Editar da barra de menus, e
selecionar o comando Inserir e clicar na opo Fatia Regular ou Poligonal.

Por padro, a imagem fatiada recebe uma sobreposio de cor verde.

Exemplo:

Para selecionar vrios objetos no documento, basta pressionar a tecla <Shift>.

Se aparecer uma caixa de dilogo informando que mltiplos itens foram
selecionados e que se deseja criar mltiplas fatias. Clique no boto Multiple
para resposta afirmativa.
agora com todos os objetos fatiados:

Lembrando que tambm pode-se usar a ferramenta Fatia, localizada na

categoria Fatia Poligonal Web do Painel de Ferramentas, para selecionar uma
fatia.

As guias de uma fatia definem o permetro e a posio dela. Elas se estendem

alm dos objetos de fatia e definem como o restante do documento ser
dividido na exportao, abrangendo o mximo possvel da pgina dentro das
fatias, agilizando o carregamento da mesma pelo navegador. possvel
tambm alterar o formato de um objeto de fatia retangular e ajustar as demais
fatias ao documento, arrastando suas guias. impossvel redimensionar
objetos de fatia no retangulares atravs da movimentao das guias.

Para trabalhar com as fatias basta posicionar o cursor do mouse sobre uma
das fatias, at que o cursor transforme-se em um ponteiro de movimento de
guia, arrastando-a at o incio da guia da fatia acima.
VDEO

Na paleta Camada da Web, onde comporta todas as fatias definidas no

documento. Portanto no deve ser movida.

Pontos Ativos e Mapeamento de Imagens

Os Designers da Web utilizam algumas vezes um recurso chamado Pontos
Ativos, que tornam interativas pequenas partes de um grfico interativo maior.
Um ponto ativo um ponto de controle que define a rea de mapeamento
sobre um grfico da pgina vinculado uma URL.
Um mapa de imagem nada mais do que um grfico sobre o qual foi definido
um ou mais pontos ativos. Eles so ideais para vincular a rea de uma imagem

a outras pginas da Web, no sendo necessrio realar aquelas reas ou

produzir efeitos de Rollover (tpico que ser visto a seguir), em resposta
movimentao ou ao do mouse.
Para definir pontos ativos sobre uma image, deve-se ir at o menu Editar,
posicionar o mouse sobre o comando Inserir e clicar na opo Hotspot.

Atravs desse comando possvel contornar s a pessoa na imagem,

atravs da caixa Inspetor de Propriedades, clicando na opo Forma e
selecionando a opo Crculo. Veja o exemplo abaixo:

Para criar um link na imagem atravs desta seleo, basta clicar novamente no
mapa de seleo sobre a imagem, tomando o cuidado de no selecionar a fatia
que est abaixo. Clique sobre o mapa da imagem ou selecione-a dentro da
camanda Web Camada, na paleta Camadas denominada Hotspot.

Para finalizar, ativar o campo Link do Inspetor de Propriedades e digitar o

endereo que desejamos que quando o usurio clicar, ele seja direcionado.
VDEO

Rollover
um recurso muito utilizado por Designers da Web, que consiste na exibio
de um objeto com a imagem trocada e acionada pela atual, quando o cursor do
mouse passar sobre ela atravs de um navegador. O acionador sempre um
objeto da Web, como: um ponto ativo, um boto ou uma fatia, como o nosso
caso.

Quando um usurio seleciona uma fatia, aparece um crculo com um retculo

em seu centro. A ela damos o nome de Ala de comportamento.

Existem dois tipos de Rollovers:

Simples: troca uma imagem da Moldura atual (1) por outra diretamente abaixo
dela localizada na Moldura 2.
Desarticulado: Possibilita a construo de Rollovers mais complexos,
trocando imagens em fatias diferentes utilizando diversas Molduras.

Paleta Estados

A guia Camada contm as Molduras que compem o projeto. Observe que

atualmente h apenas uma moldura no documento Camada 1, que representa
todos os objetos e fatias criadas at o momento.
Se a paleta Quadros e Histria no esteja sendo visualizada, ative o menu
Janela e clique no comando Estados.

Com o Adobe Fireworks CS6 possvel criar uma srie de botes e menus
pop-up em JavaScript, mesmo no tendo nenhum conhecimento da
linguagem, pois o prprio Fireworks encarrega-se de gerar todo o cdigo
necessrio.
Botes so considerados tipos especiais de smbolos. Elementos de
navegao para uma pgina da Web so criados atravs dos links de ao e
do Editor de boto existentes no programa. Dentre suas principais
caractersticas, esto: possibilitar que se crie um boto partindo do zero,
converter um objeto em boto ou importar um j existente. Isso facilita muito o
trabalho de quem est desenvolvendo o projeto.
Para criar um smbolo basta selecionar o bitmap, clicar no menu Modificar, e
ativar o comando Smbolo e clicar na opo Converter em Smbolo. Sem
esquecer de selecionar a opo boto.

Menus pop-up
So aqueles que se exibem, por exemplo, um navegador em resposta a um
movimento do cursor do mouse sobre um boto. Esses itens podem ter
vnculos com endereos eletrnicos ou at com uma determinada pgina no
site. possvel criar submenus em menus pop-up para tantos nveis quanto os
desejados.

No Fireworks CS6 existe tambm um Editor de menus pop-up, que uma

caixa de dilogo com guias que orientam o usurio no processo de criao,
assim como no Editor de boto.
As guias para controle das caractersticas de um menu pop-up possuem as
seguintes funes:
Contedo : contm as opes que determinam a estrutura bsica do menu, tal
como texto, vnculo de URL e destino para cada item.
Aparncia: Contm opes que determinam a aparncia dos estados Acima e
Sobre, de cada clula do menu, assim como sua orientao vertical ou
horizontal.
Avanada: Contm as opes que determinam dimenso, preenchimento e
espaamento da clula, suas bordas, seu tempo de espera e o recuo do texto.
Posio: Contm opes que determinam o posicionamento do menu e
submenus, assim como a posio do primeiro em relao fatia, e a posio
do segundo em relao ao primeiro, e assim sucessivamente, incluindo opes
como: ao fundo, no canto superior direito, no inferior direito e no topo.
Dependendo do design que se deseja obter com o menu pop-up, nem todas as
guias ou opes podero ser usadas no Editor de menu pop-up. Suas
configuraes permitem alteraes a qualquer momento, mas necessrio ao
menos, uma opo na guia Contedo, para criar um menu que seja
visualizado atravs do navegador.
Para adicionar clique no menu Editar, posicione o cursor sobre o comando
Menu Pop-up e clicar na opo Adicionar Menu Pop-up.

Barra de Navegao
A principal caracterstica que determina uma Barra de navegao a sua
permanncia consistente em todo o site, oferecendo uma navegao direta
para o usurio, independentemente da pgina em que voc se encontre.
Para utilizar uma Barra de Navegao, tem que converter o objeto em
smbolo, ativando a opo boto.

Exportando em formato HTML

Para exportar, primeiro tem que visualizar o documento, sem eguida clicar em
Visualizar imagem no menu Arquivo.

O formato de exportao JPG trabalha com milhares de cores e o formato GIF

apenas com 256, no mximo. Isso nos leva a concluir que, se o trabalho uma
imagem complexa, como a utilizada acima, devemos usar um formato que
tenha suporte quantidade de cores suficiente para supri-la.

Porm, o formato GIF possui algumas opes que conseguem suprir essa falta
de cor at um certo limite, interligando as cores existentes e adaptando-as de
forma a reduzir a falha, quando possvel, oferecendo um tamanho de arquivo
menor, o que interessante quando se trata de Web.

Alisamento : Essa opo funciona suavizando todo o JPG, reduzindo tambm

o tamanho do arquivo. Vai do nivel 0 (JPG normal) at o 8 (JPG sem definio
ntida de detalhes). uma opo que, para a Web, no gera um resultado
satisfatrio. A qualidade fica prejudicada, mesmo que em nveis baixos.

Lembrando que no campo Exportar, da caixa de dilogo Exportar, tem que

clicar no boto drop-down e escolher a opo HTML and Images.

Ateno! importante que todos os arquivos do site, gerados pela

exportao, fiquem na mesma pasta. So necessrios para a completa
visualizao do mesmo atravs do Browser.

Animaes
So iluses de movimentos, criadas atravs de smbolos e de alterao das
propriedades do grfico. Cada uma de suas aes so armazenadas em uma
moldura, de nome Estados e, quando todos os Estados so reproduzidos em
uma seqncia, elas so obtidas.
Assim como os smbolos, foram tratados nas lies anteriores, onde produziam
propriedades em grficos de botes e rollovers, tambm agem em qualquer
objeto criado ou importado. A possibilidade de se ter vrios smbolos em um
mesmo arquivo, permite que cada um deles possua uma animao diferente.
Dessa forma, mesmo no sendo obrigatria na produo de grficos animados,
a utilizao de smbolos de animao, possibilitam uma maior complexidade
em sua criao como um todo.
Um Smbolo de animao pode ser qualquer objeto criado ou importado.
Assim como j dito anteriormente, em um nico filme de animao possvel
ter vrios objetos atuando juntos, cada um em seu papel, sendo um smbolo
diferente de outro e com suas propriedades de animao especficas para a
sua atuao. Entre elas, podemos citar ocorrncias do tipo mover, encolher ou
apagar. Uma animao no precisa, necessariamente, ser produzida por
objetos transformados em smbolos, porm, a utilizao deste recurso
possibilita uma criao de arquivos menores em seu tamanho final, detalhe
importante quando se trabalha com animaes, principalmente quando
direcionadas para a Web, onde o tempo de carregamento e tamanho de
pginas so importantssimos para promover um acesso agradvel ao usurio
final.
Para tranformar um objeto em animao, basta clicar no menu Modifique e,
em Smbolo, selecione a opo Converter em Smbolo, ou pressione <F8>.

Como salvar uma figura animada em formato GIF

Atravs do menu Arquivo, basta selecionar o Assistente de Exportao.

Caso uma caixa de dilogo aparea, clique em continuar.

Em seguida, no decorrer do assistente, mantenha a opo GIF animado
selecionado e clique no boto Continuar.
Na caixa de dilogo Visualizao da imagem, clique em Exportar.

Por final, basta s escolher o local (pasta) a ser salvada.

Visualize seu contedo atravs do Windows Explorer e execute o arquivo pelo
Internet Explorer, clicando com o boto direito do mouse sobre o mesmo e
selecionando o item Internet Explorer, na opo Abrir com.

Trabalhando com o Adobe Flash Professional CS6

O Adobe Flash Professional CS6 o software mais utilizado no mundo para
aplicao e produo de animaes grficas para a Web. Com ele, tambm
possvel importar arquivos e salv-los em seguida, com suas propriedades, o
que o deixa bem menor do que se fosse exportado em formato SWF (Flash),
pelo prprio Fireworks, tambm possvel.
Mas, nossa meta nesta lio no ser apenas a importao do arquivo em
formato GIF, para sua posterior exportao em SWF (Flash) e sim a aplicao
de recursos extras, no possveis ao Fireworks, oferecendo a voc uma
experincia muito interessante da utilizao deste extraordinrio software,
oferecido tambm pela Adobe.

Para utiliz-lo, clique em Iniciar, Todos os programas e, em Adobe,

selecione o programa Adobe Flash Professional CS6.

Janela do Adobe Flash Professional CS6:

Para criar um novo documento, clique no menu Arquivo, clique na opo

Novo, para criar um novo documento.

Na caixa de dilogo Novo Documento, certifique-se de que estar criando um

documento Flash e clique em OK.

Aps criado, para redefinir o tamanho do documento: clique no boto

Propriedades de Configurao do Arquivo do Flash, na parte Lateral
direita da tela.

Na caixa de dilogo Configuraes do Arquivo, digite os valores em destaque

na figura abaixo e finalize clicando em OK.

O valor de 36 fps (frames por segundo) para a opo Taxa de quadros

justifica uma taxa de quadros (Estados) coerente para que a animao resulte
em movimentos suaves, pois taxas baixas apresentam movimentos muito
rpidos e pouco perceptveis, assim como altas taxas em movimentos mais
lentos.
Para trabalhar com algum documento criado no Fireworks, basta selecionar o
menu Arquivo e, na opo Importar, clique em Importar para o palco.

Aps importado, todos os smbolos e objetos, antes presentes e visualizados

no Fireworks, agora tornaram-se apenas imagens Bitmaps, dispostas e
seqenciadas em uma Camada, quadro-a-quadro.

Para testar a animao, o SWF, que o arquivo de animao produzido pelo

Flash, sem que seja necessrio export-lo, pois o Adobe Flash Professional
CS6 o faz automaticamente, assim que o filme testado. Utilizando as teclas
<Ctrl>+<Enter>.

A animao ser exibida no espao de trabalho do Flash, j com os efeitos

sonoros introduzidos at o momento.