Além de criar e editar imagens graficamente, como #isto até o presente momento, o Fireworks pode concluir documentos interati#os para a Web 7rede
mundial de computadores8.
O programa gera automaticamente, todo o HTML e +avascript necess%rios
para a aplicação desen#ol#ida.
6as pr1)imas liç$es, aprenderemos a utili"ar esse aspecto do Adobe Fireworks CS6 , compreendendo toda a #ersatilidade deste poderoso software.
Fatias
Fatias são blocos b%sicos de construção para uma p%gina HTML. O fatiamento
corta um documento do Fireworks em pedaços menores e e)porta cada fatia
indi#idualmente. om essa di#isão, o usu%rio ir% #isuali"ar a p%gina conforme as fatias são carregadas e remontadas pelo na#egador. 9endo assim, ele não precisa aguardar o carregamento da p%gina inteira, antes de #isuali"%3la, acelerando o processo.
Além disso, essa propriedade na construção de uma p%gina Web possui ainda
tr*s outras grandes #antagens
>timi)aBo permite otimi"ar cada fatia indi#idual, com o uso do formato de
as imagens sejam descarregadas com maior rapide" pelo na#egador, sem perder a !ualidade.
!"teratividade criando %reas de resposta presença do cursor do mouse. At%ali)aBo permite atuali"ar com facilidade, partes de uma p%gina !ue sofre
modificaç$es fre!Lentes em alguns setores, sem !ue seja necess%ria a atuali"ação ou modificação da mesma por inteiro.
Para agrupar duas ou mais imagens, transformando3as em um +nico bitmap,
antes de#e3se selecionar os objetos !ue serão en#ol#idos. Atra#és da ferramenta Po"teiro, clica3se sobre os objetos e com a tecla @Shi/t . Ap1s,
clica3se com o botão direito do mouse, sobre os objetos selecionados e
escolhe3se no menu suspenso a opção A#r%par .
Paleta amadas com os objetos agrupados.
Fatiando a ima&em
Para fatiar uma imagem basta clica no menu *ditar da barra de menus, e
selecionar o comando !"serir e clicar na opção atia 1egular ou /oligonal .
Por padrão, a imagem fatiada recebe uma sobreposição de cor verde.
Para selecionar #%rios objetos no documento, basta pressionar a tecla @Shi/t .
9e aparecer uma cai)a de di%logo informando !ue m+ltiplos itens foram selecionados e !ue se deseja criar m+ltiplas fatias. li!ue no botão M%ltiple
para resposta afirmati#a.
=embrando !ue também pode3se usar a ferramenta Fatia, locali"ada na
categoria Fatia Poli#o"al Web do /ainel de erramentas, para selecionar uma
fatia.
As guias de uma fatia definem o per0metro e a posição dela. /las se estendem
além dos objetos de fatia e definem como o restante do documento ser% di#idido na e)portação, abrangendo o m%)imo poss0#el da p%gina dentro das fatias, agili"ando o carregamento da mesma pelo na#egador. < poss0#el também alterar o formato de um objeto de fatia retangular e ajustar as demais fatias ao documento, arrastando suas guias. < imposs0#el redimensionar objetos de fatia não retangulares atra#és da mo#imentação das guias.
Para trabalhar com as fatias basta posicionar o cursor do mouse sobre uma
das fatias, até !ue o cursor transforme3se em um ponteiro de movimento de guia, arrastando3a até o in0cio da guia da fatia acima.
V"#$%
6a paleta Camada da Web, onde comporta todas as fatias definidas no
documento. Portanto não de#e ser mo#ida.
ontos Ativos e ;apeamento de Ima&ens
Os Designers da Web utili"am algumas #e"es um recurso chamado Po"tos Ativos, !ue tornam interati#as pe!uenas partes de um gr%fico interati#o maior.
-m ponto ati#o é um ponto de controle !ue define a %rea de mapeamento sobre um gr%fico da p%gina #inculado uma 213.
-m mapa de imagem nada mais é do !ue um gr%fico sobre o !ual foi definido um ou mais pontos ati#os. /les são ideais para #incular a %rea de uma imagem
a outras p%ginas da Web, não sendo necess%rio realçar a!uelas %reas ou
produ"ir efeitos de 1ollover 7t1pico !ue ser% #isto a seguir8, em resposta
mo#imentação ou ação do mouse.
Para definir pontos ati#os sobre uma image, de#e3se ir até o menu *ditar ,
posicionar o mouse sobre o comando !"serir e clicar na opção Hotspot .
Atra#és desse comando é poss0#el contornar s1 a pessoaN na imagem, atra#és da cai)a !"spetor de Propriedades, clicando na opção Forma e
Para criar um linH na imagem atra#és desta seleção, basta clicar no#amente no mapa de seleção sobre a imagem, tomando o cuidado de não selecionar a fatia
!ue est% abai)o. li!ue sobre o mapa da imagem ou selecione3a dentro da camanda Web Camada, na paleta Camadas denominada Hotspot .
Para finali"ar, ati#ar o campo =inH do Inspetor de Propriedades e digitar o endereço !ue desejamos !ue !uando o usu%rio clicar, ele seja direcionado.
V"#$%
@ollover
é um recurso muito utili"ado por Designers da Web, !ue consiste na e)ibição
de um objeto com a imagem trocada e acionada pela atual, !uando o cursor do
mouse passar sobre ela atra#és de um na#egador. O acionador é sempre um
objeto da Web, como um ponto ati#o, um botão ou uma fatia, como é o nosso
2uando um usu%rio seleciona uma fatia, aparece um c0rculo com um ret0culo em seu centro. A ela damos o nome de AlBa de comportame"to.
/)istem dois tipos de -ollovers
Simples troca uma imagem da Mold%ra atual 778 por outra diretamente abai)o
dela locali"ada na Mold%ra 3 .
Desartic%lado Possibilita a construção de -ollovers mais comple)os,
trocando imagens em fatias diferentes utili"ando di#ersas 4olduras.
aleta $stados
A guia Camada contém as Mold%ras !ue comp$em o projeto. Obser#e !ue
atualmente h% apenas uma moldura no documento amada !, !ue representa
todos os objetos e fatias criadas até o momento.
9e a paleta J%adros e HistKria não esteja sendo #isuali"ada, ati#e o menu +a"ela e cli!ue no comando *stados.
om o Adobe Fireworks CS6 é poss0#el criar uma série de bot$es e menus pop-up em +avaScript , mesmo não tendo nenhum conhecimento da
linguagem, pois o pr1prio Fireworks encarrega3se de gerar todo o c1digo
necess%rio.
ot$es são considerados tipos especiais de s0mbolos. /lementos de na#egação para uma p%gina da Web são criados atra#és dos lin5s de ação e
do *ditor de boto e)istentes no programa. (entre suas principais
caracter0sticas, estão possibilitar !ue se crie um botão partindo do "ero, con#erter um objeto em botão ou importar um j% e)istente. Isso facilita muito o trabalho de !uem est% desen#ol#endo o projeto.
Para criar um s0mbolo basta selecionar o bitmap, clicar no menu Modi/icar , e
ati#ar o comando SGmbolo e clicar na opção Co"verter em SGmbolo. 9em
Me"%s pop9%p
9ão a!ueles !ue se e)ibem, por e)emplo, um na#egador em resposta a um mo#imento do cursor do mouse sobre um botão. /sses itens podem ter
#0nculos com endereços eletrnicos ou até com uma determinada p%gina no
site. < poss0#el criar submenus em menus pop-up para tantos n0#eis !uanto os
desejados.
6o Fireworks CS6 e)iste também um *ditor de me"%s pop9%p, !ue é uma
cai)a de di%logo com guias !ue orientam o usu%rio no processo de criação, assim como no *ditor de boto.
As guias para controle das caracter0sticas de um menu pop-up possuem as
seguintes funç$es
Co"tedo contém as opç$es !ue determinam a estrutura b%sica do menu, tal
como te)to, #0nculo de ->= e destino para cada item.
Apar"cia ontém opç$es !ue determinam a apar*ncia dos estados Acima e
9obre, de cada célula do menu, assim como sua orientação #ertical ou hori"ontal.
Ava"Bada ontém as opç$es !ue determinam dimensão, preenchimento e
espaçamento da célula, suas bordas, seu tempo de espera e o recuo do te)to.
PosiBo ontém opç$es !ue determinam o posicionamento do menu e
submenus, assim como a posição do primeiro em relação fatia, e a posição do segundo em relação ao primeiro, e assim sucessi#amente, incluindo opç$es como ao fundo, no canto superior direito, no inferior direito e no topo.
(ependendo do design !ue se deseja obter com o menu pop-up, nem todas as
guias ou opç$es poderão ser usadas no *ditor de me"% pop9%p. 9uas
configuraç$es permitem alteraç$es a !ual!uer momento, mas é necess%rio ao menos, uma opção na guia Co"tedo, para criar um menu !ue seja
#isuali"ado atra#és do na#egador.
Para adicionar cli!ue no menu *ditar , posicione o cursor sobre o comando Me"% Pop9%p e clicar na opção Adicio"ar Me"% Pop9%p.