You are on page 1of 448

Usando o Fireworks MX

macromedia

Marcas comerciais Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developers Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind e Xtra so marcas registradas da Macromedia, Inc. e podem ser registradas nos Estados Unidos ou em outras jurisdies, inclusive internacionalmente. Outros nomes de produtos, logotipos, desenhos, ttulos, palavras ou frases mencionados nesta publicao podem ser marcas comerciais, marcas de servio e denominaes comerciais pertencentes Macromedia, Inc. ou a outras entidades, e podem ser registrados em determinadas jurisdies, iclusive internacionalmente. Este guia contm vnculos com sites de terceiros na Web que no esto sob o controle da Macromedia e a Macromedia no responsvel pelo contedo dos sites vinculados. Ao acessar um site de terceiros na Web mencionado neste guia, faa-o por seu prprio risco. A Macromedia fornece estes vnculos apenas como convenincia e a incluso do vnculo no significa que a Macromedia endosse ou aceite qualquer responsabilidade pelo contedo dos sites de terceiros. Iseno de responsabilidade da Apple A APPLE COMPUTER, INC. NO D GARANTIAS, EXPLCITAS OU IMPLCITAS, RELATIVAS AO PACOTE DE SOFTWARE ANEXO, SUA COMERCIABILIDADE OU SUA ADEQUAO A QUALQUER PROPSITO ESPECFICO. A EXCLUSO DAS GARANTIAS IMPLCITAS NO PERMITIDA EM ALGUNS LOCAIS. A EXCLUSO ACIMA PODE NO SE APLICAR A VOC. ESTA GARANTIA LHE D DIREITOS JURDOS ESPECFICOS. VOC PODE TER OUTROS DIREITOS QUE VARIEM DE UM LUGAR PARA O OUTRO. Copyright 2002 Macromedia, Inc. Todos os direitos reservados. Patentes americanas 5.353.396, 5.361.333, 5.434.959, 5.467.443, 5.500.927, 5.594.855 e 5.623.593. Partes do software licenciadas sob patente americana 4.558.302 e contrapartes estrangeiras. Outras patentes pendentes. Copyright parcial 1988, 2000 Aladdin Enterprises. Todos os direitos reservados. Este software baseia-se em parte no trabalho do Independent JPEG Group. Copyright parcial 1998 Soft Horizons. Todos os direitos reservados. Este manual no pode ser copiado, fotocopiado, reproduzido, traduzido ou convertido em qualquer formato eletrnico ou de leitura por mquina no todo ou em parte sem a prvia autorizao por escrito da Macromedia, Inc. Nmero de pea ZFW60M200PO Agradecimentos Redao: Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price Edio: Rosana Francescato Projeto gerenciado por: Stuart Manning Produo: Caroline Branch, John Francis, Patrice O'Neill Produo de localizao snior: Masayo Noda Gerente de localizao snior: Sami Kaied Gerente de projeto de localizao: Gloria Figueroa Fotografia: Chris Basmajian Multimdia: Aaron Begley Primeira edio: junho de 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

NDICE ANALTICO

INTRODUO Guia de introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Requisitos do sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Instalao do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 O que h de novo no Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10


CAPTULO 1 Tutorial de princpios bsicos do projeto grfico . . . . . . . . . . . . . . . . . . . . . . 15

O que voc aprender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 O que voc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Cpia da pasta Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Exibio do arquivo concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Criao e salva de um novo documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Explorao do ambiente de trabalho do Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Criao e edio de um objeto vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Importao de bitmap e seleo de pixels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Adio e edio de efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Como trabalhar com camada e objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Criao e edio de mscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Criao e edio de um texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Exportao do documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Seguir as prximas etapas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
CAPTULO 2 Tutorial de princpios bsicos do projeto da Web . . . . . . . . . . . . . . . . . . . . . 43

O que voc aprender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . O que voc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Cpia da pasta Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exibir a pgina da Web concluda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abertura do arquivo de origem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Importao de um grfico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diviso do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Criao de um rollover de arrastar e soltar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Criao e edio de um boto para criar uma barra de navegao . . . . . . . . . . . . . . . . . Criao e edio de um menu pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Otimizao do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exportao de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Teste do arquivo concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Seguir as prximas etapas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43 43 44 44 45 45 46 48 51 57 64 67 70 71

CAPTULO 3 Princpios bsicos do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Sobre grficos vetoriais e de bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Sobre o trabalho no Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Criao de um novo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Abertura e importao de um arquivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Salva de um arquivo do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Ambiente de trabalho do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Alterao da tela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
CAPTULO 4 Seleo e transformao de um objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Seleo de um objeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Seleo de um pixel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Edio de objetos selecionados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Transformao e distoro de objetos selecionados e selees . . . . . . . . . . . . . . . . . . . 118 Organizao de um objeto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
CAPTULO 5 Como trabalhar com um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Como trabalhar com um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Criao de um objeto bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Desenho, pintura e edio de um objeto bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Retoque de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Ajuste da cor e do tom de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Embaamento e aguamento de um bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
CAPTULO 6 Como trabalhar com objetos vetoriais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Desenho de objeto vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Edio de um traado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159


CAPTULO 7 Utilizao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Digitao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Edio de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Como aplicar traos, preenchimentos e efeitos ao texto . . . . . . . . . . . . . . . . . . . . . . . . 180 Anexao de texto a um traado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Transformao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Converso de texto em traados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Importao de texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Verificao ortogrfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Utilizao do Editor de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
CAPTULO 8 Aplicao de cor, trao e preenchimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Uso da seo Cores do painel Ferramentas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Organizao de um grupo de exemplos e de um modelo de cor . . . . . . . . . . . . . . . . . . 190 Uso de uma caixa de cor e janela pop-up de cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Como trabalhar com um trao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Como trabalhar com um preenchimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Aplicao de um preenchimento dgrad ou com padro . . . . . . . . . . . . . . . . . . . . . . 205 Adio de textura a traos e preenchimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

ndice analtico

CAPTULO 9 Uso de Efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Aplicao de Efeitos ao vivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Edio de Efeitos ao vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218


CAPTULO 10 Camada, mascaramento e mistura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Como trabalhar com uma camada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Mascaramento de imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Mistura e transparncia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
CAPTULO 11 Uso de estilo, smbolo e URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Uso de um estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Uso de um smbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Como trabalhar com um URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
CAPTULO 12 Fatias, rollovers e pontos ativos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Criao e edio de fatias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como tornar as fatias interativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Preparao de fatias para exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como trabalhar com pontos ativos e mapas de imagem . . . . . . . . . . . . . . . . . . . . . . .

261 269 276 282

CAPTULO 13 Criao de botes e menus pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Criao de um smbolo de boto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Criao de barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Criao de menus pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
CAPTULO 14 Criao de animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Como construir uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Como trabalhar com um smbolo de animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Como trabalhar com uma moldura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Interpolao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Como visualizar uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Exportao de uma animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Como trabalhar com uma animao existente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 Utilizao de mltiplos arquivos como uma animao. . . . . . . . . . . . . . . . . . . . . . . . . 323
CAPTULO 15 Otimizao e exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Sobre otimizao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como usar o Assistente de exportao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Otimizao no espao de trabalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exportao do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Como usar o boto Exportao rpida. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

325 326 329 347 361

CAPTULO 16 Uso do Fireworks com outros aplicativos. . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Como trabalhar com o Macromedia Dreamweaver MX. . . . . . . . . . . . . . . . . . . . . . . . 363 Como trabalhar com o Macromedia Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

ndice analtico

Como trabalhar com o Macromedia FreeHand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Como trabalhar com o Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Como trabalhar com o Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Como trabalhar com o Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 Como trabalhar com o Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Sobre como trabalhar com o Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Sobre como trabalhar com editores de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
CAPTULO 17 Automatizao de uma tarefa repetitiva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Localizar e substituir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Processo em lote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 Uso do Registro de projeto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Extenso dos recursos do Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
CAPTULO 18 Preferncias e atalhos de teclado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Configurao de preferncias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Alterao dos conjuntos de atalho de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Como trabalhar com arquivos de configurao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
NDICE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

ndice analtico

INTRODUO Guia de introduo

Macromedia Fireworks MX a soluo para produo e projetos grficos profissionais na Web. o primeiro ambiente de produo que trata e resolve os desafios especiais que se apresentam aos desenvolvedores e projetistas grficos da Web. Usar o Fireworks para criar, editar e animar imagens grficas na Web, adicionar interatividade avanada e otimizar imagens em um ambiente profissional. No Fireworks, possvel criar e editar grficos vetoriais e de bitmap em um nico aplicativo. Tudo editvel, o tempo todo. E o usurio pode automatizar o fluxo de trabalho para atender as necessidades de atualizaes e alteraes demoradas. Fireworks opera integrado com outros produtos da Macromedia como Flash, FreeHand e Director e tambm com os mais conhecidos aplicativos de imagens grficas e editores de HTML, para proporcionar uma soluo de Web verdadeiramente integrada. Voc pode facilmente exportar imagens grficas do Fireworks com cdigo personalizado de HTML e Java Script para o editor HTML que estiver usando.

Requisitos do sistema
Antes de instalar o Fireworks, assegurar-se de que seu computador esteja equipado com o hardware e software descritos a seguir. Microsoft Windows

Processador Intel Pentium II de 300MHz Windows 98 SE, ME, NT 4 (Service Pack 6), 2000 ou XP 64 MB de RAM disponvel (recomenda-se 128 MB) mais 80 MB de espao disponvel em
disco

resoluo de 800 x 600 pixels, 256 cores ou melhor Adobe Type Manager verso 4 ou posterior, para uso com fontes Tipo 1 unidade de CD-ROM
Macintosh

Processador Power Macintosh G3, executando o OS 9.1 ou posterior, ou OS X verso 10.1 ou


posterior

64 MB de RAM disponvel (recomenda-se 128 MB) mais 80 MB de espao disponvel em disco resoluo de 800 x 600 pixels, 256 cores ou melhor

Adobe Type Manager verso 4 ou posterior para uso com fontes Tipo 1 (somente OS 9.x) unidade de CD-ROM Instalao do Fireworks
Ler o documento ReadMe no DC-ROM do Fireworks para para ficar a par das informaes mais recentes.
Para instalar o Fireworks: 1 2

Inserir o CD do Fireworks na unidade de CD-ROM do computador. Seguir um destes procedimentos: acontecer, escolher Iniciar > Executar. Clicar em Procurar e escolher o arquivo Setup.exe no CD do Fireworks. Clicar em OK na caixa de dilogo Executar.

No Windows, o programa de instalao do Fireworks se inicia, automaticamente. Se isso no No Macintosh, clicar duas vezes no cone Instalador do Fireworks.
3

Seguir as instrues da tela. O programa de instalao solicita a digitao das informaes necessrias. Quando solicitado, reiniciar o computador.

Execuo do Fireworks em sistemas conectados em rede A Macromedia utiliza deteco de licena de rede para impedir que cpias do Fireworks com o mesmo nmero de srie sejam executadas em vrios sistemas conectados por uma rede local. Se tentar iniciar o Fireworks e houver um nmero maior de usurios do que o definido pela licena executando o Fireworks na mesma rede, aparecer um alerta de restrio de licena. Se achar que no deveria receber esta mensadem ou se desejar obter licenas adicionais para o produto, entre em contato com o Suporte Tcnico da Macromedia em http://www.macromedia.com/br/ support/email/cs/. Exibio de um arquivo instalado com Fireworks Em algum momento pode ser necessrio exibir ou acessar os arquivos instalados com o Fireworks. Durante a instalao, o Fireworks coloca os arquivos em vrios locais no sistema. importante entender onde esses arquivos residem e por qu. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427. Usurios de Macintosh devem prestar ateno especial ao novo formato que o Fireworks utiliza para armazenar o aplicativo e seus arquivos de configurao padro. Para mais informaes, consultar Exibio do contedo do pacote (somente Macintosh) na pgina 431. Como aprender o Fireworks Existem vrios recursos para aprender a trabalhar com o Fireworks, inclusive um manual de incio rpido impresso (Guia de introduo do Fireworks MX), o sistema de ajuda que pode ser iniciado no aplicativo, uma verso PDF da documentao completa do Fireworks e vrios recursos informativos na Internet.

Introduo

A Ajuda do Fireworks est

disponvel sempre que o aplicativo estiver ativo e contm a documentao completa do Fireworks. Escolher Ajuda > Usando o Fireworks para abrir a Ajuda do Fireworks. Usurios do Mac OS X, escolher Ajuda > Ajuda do Fireworks.

Os tutoriais do Fireworks fornecem uma introduo interativa aos principais recursos do aplicativo e podem ser concludos em cerca de uma hora cada um. Eles incluem tarefas comuns do Fireworks como utilizar as ferramentas de desenho e edio, otimizar imagens e criar elementos interativos como rollovers e barras de navegao. O painel de Respostas

um local central onde possvel encontrar tutoriais, notas tcnicas e as mais atualizadas informaes sobre o Fireworks, tudo em um nico lugar. O painel de Respostas dinmico; com apenas um clique no boto possvel obter as atualizaes e informaes mais recentes sobre o Fireworks, diretamente da Macromedia. vrias caixas de dilogo e dicas de ferramentas, criadas para auxililo a utilizar o programa. As dicas de ferramentas aparecem quando o ponteiro ficar parado sobre um elemento da interface de usurio. de viso geral sobre os recusos bsicos do

O Aplicativo Fireworks possui

Guia de introduo do Fireworks MX inclui informaes

Fireworks.
O documento Utilizao do Fireworks MX em PDF um documento pesquisvel e imprimvel, que

contm a documentao completa do Fireworks. O PDF est disponvel no CD de instalao e no site da Macromedia na Web em http://www.macromedia.com/br/.
O site da Macromedia na Internet atualizado regularmente com as ltimas informaes sobre o Fireworks, alm de apresentar recomendaes de usurios especializados, tpicos avanados, exemplos, dicas e novidades. Consultar o site da Macromedia na Web para saber das ltimas notcias sobre o Fireworks e como obter o mximo do programa no site http://www.macromedia.com/br/support/. O grupo de discusso Fireworks proporciona um intercmbio estimulante para usurios do

aplicativo, representantes de suporte tcnico e para a equipe de desenvolvimento do Fireworks. Usar um leitor de grupo de notcias e ir para news://forums.macromedia.com/macromedia.fireworks.
Extending Fireworks MX inclui informaes sobre escrita em JavaScript para automatizar as tarefas

do Fireworks. Todos os comandos ou configuraes no Fireworks podem ser controlados usandocomandos JavaScript especiais que o Fireworks pode interpretar. A verso PDF do Extending Fireworks MX est disponvel no CD de instalao e no site da Macromedia na Web em http://www.macromedia.com/support/fireworks/extend.html. Registro do Fireworks Para obter suporte adicional da Macromedia, importante registrar a cpia do Macromedia Fireworks, pela Internet ou por correio. Ao efetuar o registro, o usurio ser colocado na lista de prioridade para receber notcias do momento sobre atualizaes e novos produtos da Macromedia. E receber e-mails contendo informaes sobre atualizaes do produto e novidades que aparecerem nos sites www.macromedia.com e www-euro.macromedia.com.
Para registrar sua cpia do Fireworks, seguir um destes procedimentos:

Escolher Ajuda > Registro on-line e preencher o formulrio eletrnico. Escolher Ajuda > Registro por correio, imprimir o formulrio e enviar para o endereo indicado.

Guia de introduo

O que h de novo no Fireworks


Os novos recursos tornam o Fireworks MX um aplicativo cada vez mais acessvel com maior capacidade para criar grficos e maior interatividade com sites da Web. O Fireworks MX aumenta a produtividade de designers experientes da Web, desenvolvedores de HTML que tambm trabalhem com grficos e desenvolvedores da Web iniciantes, que precisem desenvolver pginas da Web interativas e ricas em grficos, com pouco ou nenhum conhecimento de JavaScript. O Fireworks MX passou por um importante refinamento, com a racionalizao da interface de usurio, capacidades mais poderosas de botes e menus pop-up e ferramentas vetoriais e de bitmap intuitivas. A integrao com outros aplicativos da Macromedia bem como com aplicativos de terceiros facilita trabalhar com vrios formatos de arquivos no Fireworks e envilos a outros aplicativos tranqilamente enquanto estiver trabalhando. Tambm nova no Fireworks a capacidade para criar comandos JavaScript com o Macromedia Flash, que aparecem no Fireworks MX como painis ou caixas de dilogo. Recursos fceis de usar Graas a um ambiente de trabalho intuitivo e confortvel que inclui um Inspetor de propriedades e ferramentas que funcionam de forma profissional o Fireworks MX um aplicativo fcil de aprender e de incio operacional rpido. O Fireworks MX tem nova aparncia, melhor organizada e em consonncia com outros aplicativos no Macromedia MX Studio.
Os aprimoramentos do gerenciamento de painis incluem a capacidade de agrupar painis e recolher os grupos de modo que apenas a barra de ttulo do grupo fique visvel, at que seja necessrio usar os painis. Pode-se encaixar os grupos de painis em uma rea de encaixe de painel para organizar o espao de trabalho ou arrastar grupos ou painis individuais em qualquer lugar no espao de trabalho. Para mais informaes, consultar Organizao de grupos de painis e painis na pgina 87. O Inspetor de propriedades um painel dinmico cheio de opes que mudam medida que o usurio trabalha. Abrir um documento, e o Inspetor de propriedades exibir as propriedades do documento como a cor e o tamanho da tela. Escolher uma ferramenta do painel Ferramentas, e o Inspetor de propriedades exibir as opes da ferramenta. Selecionar um objeto vetorial, e ele exibir as informaes de trao e preenchimento.

possvel alterar essas e outras opes inclusive Efeitos ao vivo, modos de mesclagem e opacidade diretamente do Inspetor de propriedades, em vez de clicar para abrir ou ativar painel aps painel. O Inspetor de propriedades, familiar aos usurios do Macromedia Dreamweaver e Flash reduz o nmero de painis no espao de trabalho. Para mais informaes, consultar Utilizao do Inspetor de propriedades na pgina 85.
A edio vetorial e de bitmap no-modal elimina a necessidade de manter-se atualizado nos modos vetoriais e de bitmap. Escolher uma ferramenta ou selecionar um tipo de objeto determina automaticamente se devero ser criados e editados bitmaps, vetores ou texto. Aprimoramentos da edio de bitmap proporcionam capacidades intuitivas para criar bitmaps por meio de recortar ou copiar e colar, para mover selees de moldura entre bitmaps e para efetuar o ajuste fino de imagens com um novo grupo de ferramentas de retoque de imagens. Alm disso, os comandos de seleo comuns esto organizados em um novo menu Seleo.

10

Introduo

As sees do painel Ferramentas, que separam as ferramentas usadas para criar e editar objetos de

bitmaps, vetoriais e objetos da Web oferecem dicas para escolher de forma intuitiva a ferramenta adequada e alcanar os resultados criativos previsveis. Outras ferramentas e recursos de ferramentas so separados nas categorias Selecionar, Cores e Exibir. Para mais informaes, consultar Utilizao do painel Ferramentas na pgina 84.
O boto Exportao rpida exibe opes convenientes para exportar vrios formatos de arquivo ou estilos de HTML ou iniciar outros produtos Macromedia a partir da janela de documento, eliminando o tempo de configurao e racionalizando o fluxo de trabalho. Para mais informaes, consultar Como usar o boto Exportao rpida na pgina 361. O texto na tela permite integrar visualmente texto e grficos sem a utilizao do Editor de texto. Basta escolher a ferramenta Texto, clicar na tela e comear a digitar. No Inspetor de propriedades, possvel definir os atributos de texto para a ferramenta Texto antes de iniciar a digitao ou de realar o texto existente e format-lo. O Fireworks MX tem uma gama de novos controles de texto e pargrafo para formatar texto. Para mais informaes, consultar Utilizao de texto na pgina 169. O zoom varivel permite

arrastar a ferramenta Ampliar para determinar o valor preciso da ampliao. Aps arrastar para ampliar o documento, o valor da ampliao ser exibido na caixa de texto Definir ampliao na parte inferior do documento.

A compatibilidade com Windows XP e Macintosh OS X beneficia-se de sistemas operacionais mais

recentes. O Fireworks MX totalmente "carbonizado" para suportar todas as melhorias da interface de usurio do SO X.
Exportao de XHTML permite exportar, atualizar e usar o Roundtrip XHTML nos mesmos estilos que o Fireworks oferece para HTML. possvel integrar totalmente (roundtrip) documentos legados que tenham sido convertidos em XHTML no Dreamweaver MX. Painel Resultados,

um novo recurso no Fireworks MX, Dreamweaver MX e Flash MX, um vnculo atualizvel para o contedo da Web, localizado de forma conveniente no espao de trabalho do Fireworks. Quando estiver on-line, o usurio poder clicar no boto Atualizar e fazer o download de informaes de referncia recentes da Macromedia ou fazer pesquisa on-line de documentao em bancos de dados, como de notas tcnicas.

O corretor ortogrfico pesquisa palavras incorretas em todos os blocos de texto do documento. Ao encontrar a palavra que no reconhea, ele oferece sugestes para corrigi-la ou permite adicion-la ao seu dicionrio. Cache de fonte entre plataformas facilita

compartilhar arquivos entre grupos de trabalho e clientes sem se preocupar com problemas de fonte entre plataformas. O Fireworks mantm a aparncia de todo o texto de um documento em sistemas que no tenham as fontes existentes nesse documento.

Recursos de aumento de capacidade O Fireworks MX apresenta uma srie de novos recursos poderosos de criatividade e automao que os designers iniciantes da Web acharo fceis de usar e que agradaro aos desenvolvedores mais experientes. Esses recursos fazem com que o Fireworks seja um elemento essencial do processo de design e desenvolvimento da Web desde a concepo at a integrao.
O Assistente de grficos controlado por dados permite atribuir variveis a texto, imagens, pontos ativos e fatias, para gerar, em seguida, vrios documentos baseados no original, cada um contendo informaes exclusivas obtidas em um arquivo de banco de dados delimitado por vrgula ou XML.

Guia de introduo

11

O Criador da barra de navegao no

menu Comandos automatiza o processo para a criao rpida de barras de navegao usando os convenientes smbolos de boto do Fireworks MX. possvel selecionar uma ocorrncia de um smbolo de boto e escolher o nmero de cpias a fazer, escolher a orientao e o espaamento vertical ou horizontal e atribuir rtulos de boto e URLs em uma caixa de dilogo integrada.

Os aprimoramentos do Editor de menu pop-up acrescentaram

controle criativo ao novo recurso mais popular do Fireworks 4. Agora, possvel criar um menu pop-up horizontal ou vertical e determinar as caractersticas da borda, espaamento da clula e o tamanho da clula, independentemente do tamanho do texto. Tambm possvel definir a posio de menus em relao ao objeto de acionamento, assim como a posio de submenus em relao ao item do menu de acionamento ou ao menu pop-up principal. O Fireworks gera, automaticamente, o cdigo JavaScript; os menus exportados so totalmente compatveis com o Dreamweaver MX. Para mais informaes, consultar Criao de menus pop-up na pgina 298.

A edio de smbolo de boto no nvel de ocorrncia permite

criar um smbolo de boto e, facilmente, diferenciar botes individuais com texto, URLs e alvos exclusivos usando o Inspetor de propriedades. Entretanto, possvel editar outras caractersticas grficas no nvel do smbolo e atualizar as edies em todas as ocorrncias do boto sem afetar as propriedades no nvel da ocorrncia. Para mais informaes, consultar Criao de um smbolo de boto na pgina 287.

Recursos de fluxo de trabalho aberto No necessrio ficar limitado ao fluxo de trabalho de outra pessoa. Com o Fireworks MX, possvel integrar a produo grfica ao processo de desenvolvimento com um fluxo de trabalho aberto e eficiente, que reconhece e oferece suporte aos formatos de arquivo, aplicativos e padres utilizados.
Comandos JavaScript com interface SWF colocam a criao de comandos JavaScript em um nvel mais elevado. Os desenvolvedores podem criar e executar comandos complexos para estender e automatizar o Fireworks MX por meio da combinao da API de extensibilidade do Fireworks JavaScript com interfaces desenvolvidas no Flash MX usando componentes e ActionScript. Para mais informaes, consultar Extending Fireworks MX, disponvel como documento PDF no CD de instalao e no site http://www.macromedia.com/support/fireworks/extend.html. Suporte ao Macromedia Exchange significa

que os usurios, mesmo os que no estejam interessados em criar comandos JavaScript, podem fazer download de comandos criados por usurios a partir do Exchange. Os comandos aparecem no espao de trabalho do Fireworks MX como painis ou caixas de dilogo fceis de usar. O Fireworks MX fornecido com vrios comandos criados pelo usurio no menu Comandos, assim como um painel Alinhar no menu Janela.

Os controles de layout da tabela de fatias permitem

definir e otimizar layouts da tabela de fatias arrastando as guias de fatia. O Fireworks redimensiona, automaticamente, as fatias anexadas, adicionando e excluindo fatias conforme necessrio. Para mais informaes, consultar Movimentao de guias de fatia para editar fatias na pgina 267.

O recurso Reconstituir tabelas cria,

de forma instantnea, um novo arquivo de origem PNG no Fireworks quando o usurio aponta para qualquer arquivo HTML que contenha tabelas com fatias de imagens. Comportamentos do Macromedia Fireworks e Dreamweaver, tais como rollovers de imagem e menus pop-up so importados e anexados s fatias apropriadas.

12

Introduo

Isso ser til quando estiver trabalhando em projetos de site da Web existentes em que os nicos arquivos diponveis forem as pginas HTML postadas. possvel abrir arquivos HTML no Fireworks e criar arquivos de origem PNG a partir deles. Para mais informaes, consultar Criao de arquivo PNG do Fireworks a partir de arquivos HTML na pgina 78.
Texto do Roundtrip Photoshop 6 permite abrir arquivos Photoshop 6 ou 7 com texto intacto, de forma que os grficos possam ser editados e exportados novamente para o formato do Photoshop, enquanto mantm aparncia correta e possibilidade de edio. Para mais informaes, consultar Sobre importao de texto do Photoshop na pgina 396. Roundtrip com Microsoft FrontPage est

disponvel com um clique no boto Exportao rpida. As tabelas Iniciar e Editar funcionam no arquivo original no Fireworks; as tabelas so atualizadas no FrontPage sem perder as alteraes de cdigo feitas no FrontPage. Para mais informaes, consultar Exportao de HTML do Fireworks para o FrontPage na pgina 393. de clientes no espao de trabalho do Fireworks MX. Basta escolher Janela > Sitespring para abrir a janela Sitespring. Para mais informaes, consultar a documentao do Sitespring.

A integrao com Macromedia Sitespring aplica as melhores prticas na produo e gerenciamento

Guia de introduo

13

14

Introduo

CAPTULO 1 Tutorial de princpios bsicos do projeto grfico

Este tutorial ir orient-lo nas tarefas bsicas para execuo de um projeto grfico com o Macromedia Fireworks MX. Voc ter experincia prtica usando o aplicativo grfico da Web, lder no seu segmento, e aprender os conceitos bsicos de um projeto grfico no caminho. Se j estiver familiarizado com projetos grficos no Fireworks, talvez deseje ir para Tutorial de princpios bsicos do projeto da Web na pgina 43, onde aprender tudo sobre como projetar pginas da Web com o Fireworks.

O que voc aprender


Neste tutorial, em menos de uma hora, ter concludo as tarefas necessrias para criar uma propaganda de aluguel de carros clssicos usando o Fireworks. Voc aprender o seguinte:

Cpia da pasta Tutorials Exibio do arquivo concludo Criao e salva de um novo documento Explorao do ambiente de trabalho do Fireworks Criao e edio de um objeto vetorial Importao de bitmap e seleo de pixels Adio e edio de efeitos ao vivo Como trabalhar com camada e objeto Criao e edio de mscara Criao e edio de um texto Exportao do documento

O que voc deve saber


Embora o tutorial seja projetado para usurios iniciantes do Fireworks, ele abrange diversos recursos novos do aplicativo, assim usurios avanados do Fireworks tambm podem ter benefcios. No necessrio ser um designer grfico para executar este tutorial, mas preciso ter habilidades bsicas com computadores e ser capaz de usar aplicativos comuns do espao de trabalho. Entre outros, voc deve saber como procurar arquivos e pastas no disco rgido.

15

Cpia da pasta Tutorials


Antes de mais nada, fazer uma cpia da pasta Tutorials, para salvar os resultados do seu trabalho permitindo, assim, que voc ou outro usurio conclua o tutorial posteriormente, usando os arquivos originais.
1

Navegar at a pasta do aplicativo Fireworks no disco rgido.


Nota: Se no conseguir exibir a pasta do aplicativo Fireworks, talvez tenha acesso limitado aos arquivos do sistema. possvel fazer o download dos arquivos necessrios ao tutorial no Centro de suporte Fireworks na Web em http://www.macromedia.com/br/support/.

Arrastar uma cpia da pasta Tutorials para o espao de trabalho.

Exibio do arquivo concludo


Exibir o arquivo do tutorial concludo para verificar a aparncia do projeto aps a concluso.
1 2

Iniciar o navegador da Web. No disco rgido, navegar at a pasta Tutorials, copiada no espao de trabalho, e procurar Tutorial1/Complete.
Nota: Algumas verses do Microsoft Windows ocultam, por padro, as extenses dos tipos de arquivos conhecidos. Se essa configurao no tiver sido alterada, ento os arquivos existentes na pasta Complete no exibiro as extenses. Ao manipular grficos da Web, prefervel visualizar as extenses dos arquivos. Para informaes sobre como exibir novamente as extenses de arquivos, consultar a Ajuda do Windows.

Selecionar o arquivo final.htm e arrast-lo para uma janela aberta do navegador. Neste tutorial, usar o Fireworks para desenhar e exportar uma cpia desta propaganda de aluguel de carros clssicos.
Nota: A pasta Complete tambm inclui o documento do Fireworks a partir do qual ser gerado este arquivo JPEG. Para exibir o documento, clicar duas vezes em final.png.

Criao e salva de um novo documento


Agora, que o arquivo final.htm foi exibido, voc est pronto para iniciar seu projeto.
1

No Fireworks, selecionar Arquivo > Novo. A caixa de dilogo Novo Documento aberta.

16

Captulo 1

Digitar 480 para a largura e 214 para a altura. Certificar-se de que as medidas estejam em pixels e de que a cor da tela seja, branca e clicar em OK. Uma janela do documento aberta com uma barra de ttulo em que se l Untitled-1.png (Windows) ou Untitled-1 (Macintosh).

Se a janela do documento no estiver maximizada, ou seja, se no preencher o centro da tela, maximize-a clicando no boto de maximizao (Windows) ou na caixa zoom (Macintosh) no topo da janela do documento. Isso proporcionar um grande espao de trabalho. Selecionar Arquivo > Salvar como. A caixa de dilogo Salvar como (Windows) ou Salvar (Macintosh) aberta.

5 6 7 8

Procurar a pasta Tutorials/Tutorial1 no espao de trabalho. Nomear o arquivo Vintage. Selecionar a opo Adicionar extenso de nome de arquivo, caso isso ainda no tenha sido feito (apenas Macintosh). Clicar em Salvar. A barra de ttulos exibe o novo nome do arquivo com a extenso PNG. PNG o formato de arquivo nativo do Fireworks. A arquivo PNG o arquivo de origem; onde voc realizar todo o seu trabalho no Fireworks. No final deste tutorial, aprender como exportar seu documento para outro formato para us-lo na Web.

Quando estiver concluindo o tutorial, lembrar-se de salvar seu trabalho com freqncia selecionando Arquivo > Salvar.
Nota: Na concluso do tutorial, talvez ache til desfazer uma alterao feita. O Fireworks pode desfazer vrias das alteraes recentes, dependendo do nmero de etapas de desfazer definido em Preferncias. Para desfazer a alterao mais recente, selecionar Editar > Desfazer.

Tutorial de princpios bsicos do projeto grfico

17

Explorao do ambiente de trabalho do Fireworks


Antes de prosseguir o tutorial, examinar os elementos que compem o ambiente de trabalho do Fireworks:

No centro da tela est a janela do documento. No centro da janela do documento est a tela.
Esse o local em que so exibidos o documento Fireworks e quaisquer imagens criadas.

No topo da tela est uma barra de menus. A maior parte dos comandos do Fireworks pode ser
acessando a partir da barra de menus.

No lado esquerdo da tela est o painel Ferramentas. Se o painel Ferramentas no estiver visvel,
selecionar Janela > Ferramentas. O painel Ferramentas onde voc encontrar as ferramentas para selecionar, criar e editar diversos itens grficos, bem como objetos da Web.

Na base da janela est o Inspetor de propriedades. Se o Inspetor de propriedades no estiver


visvel, selecionar Janela > Propriedades. O Inspetor de propriedades exibe as propriedades de cada objeto ou ferramenta selecionada. possvel alterar essas propriedades. Se no houver objetos ou ferramentas selecionadas, o Inspetor de propriedades exibir as propriedades do documento. O Inspetor de propriedades exibe duas ou quatro fileiras de propriedades. Se o Inspetor de propriedades estiver na metade da altura, ou seja, exibindo apenas duas fileiras, ser possvel clicar na seta expansora no canto inferior direito para visualizar todas as propriedades.

Seta expansora na metade da altura

18

Captulo 1

No lado direito da tela h uma srie de painis como o painel Camadas e o painel Otimizar.
possvel abrir esses e outros painis a partir do menu Janela.

Mover o ponteiro sobre diversos elementos da interface. Se o ponteiro for mantido sobre um
item por algum tempo na interface, ser exibida uma dica da ferramenta. As dicas das ferramentas identificam ferramentas, menus, botes e outros recursos de interface em todo o Fireworks. As dicas das ferramentas desaparecem ao distanciar o ponteiro dos elementos de interface que ele est identificando. Voc aprender mais sobre cada um desses elementos medida que avanar neste tutorial.

Criao e edio de um objeto vetorial


Com o Fireworks, pode-se criar e editar dois tipos de grficos: objetos vetoriais e imagens bitmap. Um objeto vetorial uma descrio matemtica de uma forma geomtrica. Os traados vetoriais so definidos por pontos. Os traados vetoriais no apresentam degradao na qualidade quando voc os aumenta ou os dimensiona para mais ou para menos. A folha da ilustrao abaixo um conjunto de objetos vetoriais. Observar o grau de suavidade das bordas da folha mesmo quando se aumenta o objeto.

Ao contrrio, uma imagem bitmap composta por uma grade de pixels coloridos. Imagens com variaes complexas de cores como fotografias so, em geral, imagens bitmap.

Enquanto vrios aplicativos oferecem ferramentas para editar formas vetoriais ou imagens bitmap, o Fireworks permite que se trabalhe com ambos os tipos de grficos. Voc trabalhar com grficos vetoriais nesta seo.

Tutorial de princpios bsicos do projeto grfico

19

Criao de objetos vetoriais Agora, voc criar dois dos elementos grficos do seu documento. Primeiro ir criar um retngulo azul na parte inferior do documento. Depois, criar um retngulo que atuar como uma borda do contedo da tela.
1

Selecionar a ferramenta Retngulo na seo Vetor do painel Ferramentas.

No Inspetor de propriedades, clicar na caixa Cor de preenchimento.

A janela pop-up Cor de preenchimento ser aberta.

Digitar 333366 na caixa de texto no topo da janela e, em seguida, pressionar Enter. A caixa Cor de preenchimento alterada para um tom de azul escuro de modo a refletir sua opo de cor.

Na janela do documento, posicionar o ponteiro em forma de cruz sobre a tela e arrast-lo para baixo e para a direita para criar um retngulo. possvel desenhar o retngulo em qualquer lugar da tela. Mais adiante neste procedimento, ir posicion-lo e redimension-lo.

Ao soltar o boto do mouse aparecer um retngulo azul escuro selecionado na rea que voc definiu.

20

Captulo 1

possvel saber quando um objeto est selecionado pois esse exibido com pontos azuis no canto. A maioria dos objetos tambm possui um realce azul em volta das bordas externas, mas os retngulos so uma exceo.
6

No canto esquerdo inferior do Inspetor de propriedades, digitar 480 na caixa Largura e 15 na caixa Altura, depois pressionar Enter. O retngulo redimensionado para ser ajustado s dimenses especificadas. Selecionar a ferramenta Ponteiro na seo Selecionar do painel Ferramentas. Arrastar o retngulo para que fique posicionado na parte inferior da tela, conforme mostrado abaixo. Usar as teclas de seta para obter um posicionamento exato.

7 8

Selecionar a ferramenta Retngulo novamente e desenhar um segundo retngulo. Desenh-la em qualquer parte da tela e coloc-la no tamanho desejado. Voc alterar suas propriedades e posio na prxima seo.

Definio de propriedades do objeto Aqui, editar o segundo retngulo criado alterando seu tamanho, posio e cor no Inspetor de propriedades.
1

Com o retngulo ainda selecionado, clicar na caixa Cor do trao no Inspetor de propriedades e digitar CCCCCC como o valor da cor. Pressionar Enter para aplicar a alterao.

Definir o Tamanho da ponta como 1, arrastando o controle deslizante pop-up ou digitando um nmero na caixa de texto.

Clicar na caixa Cor de preenchimento no Inspetor de propriedades e clicar no boto Transparente.

Tutorial de princpios bsicos do projeto grfico

21

No Inspetor de propriedades, digitar os valores a seguir nas caixas de altura, largura e coordenada. Depois, clicar fora do Inspetor de propriedades para aplicar as alteraes. Largura: 480 Altura: 215 X: 0 Y: 0 O retngulo se transforma em uma borda cinza em volta da borda da tela.

Se o sistema usar o cinza cor de fundo da janela, talvez seja difcil visualizar o retngulo neste ponto. Mas, no se preocupe, ele ainda est l.
5

Selecionar a ferramenta Ponteiro e clicar em qualquer lugar fora do retngulo para cancelar a seleo. As propriedades alteram no Inspetor de propriedades. Como no h objetos selecionados, agora as propriedades do documento so visualizadas em vez das propriedades do objeto.

Importao de bitmap e seleo de pixels


A seguir, importar uma imagem bitmap e criar uma seleo flutuante com os pixels. Importao de imagem Voc modificar a imagem de um automvel clssico. Primeiro, necessrio importar a imagem.
1 2

Selecionar Arquivo > Importar e navegar at a pasta Tutorials no espao de trabalho. Procurar a pasta Tutorial1/Assets. Selecionar car.jpg e clicar em Abrir.

22

Captulo 1

Alinhar o ponteiro de insero com o canto superior esquerdo da tela e clicar, conforme mostrado na ilustrao a seguir.

A imagem aparece selecionada na tela.


4

Clicar em qualquer lugar fora da imagem selecionada para cancelar a seleo.

Criao de seleo de pixels A seguir, voc selecionar os pixels que compem o carro na imagem importada e ir copi-los e col-los como um novo objeto.
1

Selecionar a ferramenta Zoom na seo Exibir do painel Ferramentas.

Ferramenta Zoom

Clicar uma vez na imagem. A exibio ampliada para 150%. O aumento permite melhor visualizao do objeto selecionado e oferece um controle mais apurado sobre a seleo.

Clicar e manter pressionado o boto do mouse na ferramenta Lao na seo Bitmap do painel Ferramentas. Selecionar a ferramenta Lao polgono no menu pop-up que aparece.

A ferramenta Lao polgono permite que voc desenhe uma seleo em volta dos pixels usando uma srie de linhas retas. Voc usar a ferramenta Lao polgono para selecionar os pixels que formam a imagem do carro.
4

No Inspetor de propriedades, definir a opo Borda como Suavizao de serrilhado.

Tutorial de princpios bsicos do projeto grfico

23

Clicar com o ponteiro da ferramenta Lao polgono na borda superior do carro, depois clicar vrias vezes em volta da borda do carro para continuar com a seleo.

Completar a seleo movendo o ponteiro sobre o ponto em que iniciou a seleo. Um pequeno quadro cinza aparece ao lado do ponteiro Lao polgono para indicar que voc est quase completando a seleo. Clicar para completar a seleo.

Uma borda de moldura aparecer em volta dos pixels selecionados.


7

Selecionar Editar > Copiar. A seleo copiada na rea de transferncia. Selecionar Editar > Colar. A imagem do carro colada no documento como um novo objeto bitmap. Selecionar a ferramenta Ponteiro e clicar duas vezes em qualquer lugar fora do bitmap para cancelar a seleo. Clicar no menu pop-up Definir ampliao, na base da janela do documento, e retornar exibio100%.

9 10

24

Captulo 1

Adio e edio de efeitos ao vivo


A seguir, aplicar efeitos ao vivo imagem bitmap original. Alm disso, alterar o embaamento.
1

Clicar em qualquer parte da imagem do deserto. (Porm, cuidado para no clicar no carro.)

No Inspetor de propriedades, clicar no boto Adicionar efeitos (o boto com o sinal mais (+)).

Boto Excluir efeitos Boto Adicionar efeitos 3

Selecionar Ajustar cor > Matiz/Saturao no menu pop-up Efeitos. A caixa de dilogo Matiz/Saturao exibida.

Selecionar a opo Colorir e clicar em OK. A imagem fica colorida na tela e o efeito adicionado lista de Efeitos ao vivo no Inspetor de propriedades. Os efeitos ao vivo so editveis; sempre possvel adicion-los lista, exclu-los ou edit-los.

Tutorial de princpios bsicos do projeto grfico

25

Para editar um efeito, clicar duas vezes em Matiz/Saturao.


Dica: Uma outra opo, clicar no boto Informaes ao lado do efeito.

A caixa de dilogo Matiz/Saturao exibida novamente.


6

Alterar o Matiz para 25 e a Saturao para 20, e clicar em OK. Os nveis de matiz e saturao da imagem so alterados para exibir uma aparncia spia, como nas fotografias antigas.

7 8

Para adicionar um outro Efeito ao vivo, clicar novamente no boto Adicionar efeitos. Selecionar Embaar > Embaamento maior no menu pop-up Efeitos. Os pixels do bitmap selecionado ficaram embaados e o novo efeito adicionado lista de Efeitos ao vivo no Inspetor de propriedades.

Como trabalhar com camada e objeto


As camadas dividem um documento do Fireworks em planos distintos. Um documento pode ser formado por vrias camadas e cada uma delas pode conter vrios objetos. No Fireworks, o painel Camadas relaciona as camadas e os objetos contidos em cada camada. Com a utilizao do painel Camadas, possvel nomear, ocultar, mostrar e alterar a ordem de empilhamento das camadas e objetos, bem como mesclar bitmaps e aplicar mscaras de bitmap. Alm disso, pode adicionar e excluir camadas com o painel Camadas. Nesta parte do tutorial, usar o painel Camadas para mesclar as duas imagens bitmaps. Depois, nomear os objetos no seu documento. Alm disso, usar o painel Camadas para alterar a ordem de empilhamento dos objetos. Mais adiante no tutorial, ir usar o painel Camadas para aplicar uma mscara imagem mesclada. Mesclagem de bitmaps Agora que aplicou efeitos ao vivo imagem de fundo, ir mescl-la com a imagem do carro em tons de cinza para criar um nico bitmap.

26

Captulo 1

Se o painel Camadas estiver minimizado ou invisvel, clicar na seta expansora ou selecionar Janela > Camadas.
Seta expansora

2 3

Clicar na miniatura da imagem do carro em tons de cinza no painel Camadas. Com a imagem do carro selecionada, clicar no cone do menu pop-up Opes na parte direita superior do painel Camadas.
cone do menu pop-up Opes

Selecionar Mesclar para baixo. No painel Camadas, os dois objetos bitmap so mesclados em um bitmap. No Inspetor de propriedades no h mais efeitos na lista de Efeitos ao vivo. Isto porque mesclar para baixo combina os pixels de cada bitmap e os renderiza de modo no editvel como imagens separadas. Os efeitos ao vivo aplicados a um objeto ou bitmap no so mais editveis depois que uma mesclagem para baixo for executada em outro bitmap.

Tutorial de princpios bsicos do projeto grfico

27

Nomeao de um objeto sempre bom nomear seus objetos para poder identific-los com facilidade mais tarde. Quando um documento se tornar grande e possuir vrios objetos, o manuseio ficar difcil se os objetos no tiverem nomes exclusivos. Nesta parte, nomear os objetos no documento usando o painel Camadas e o Inspetor de propriedades.
1

Clicar duas vezes na palavra Bitmap ao lado da miniatura da imagem no painel Camadas. Uma caixa de texto exibida.

Digitar Classic Car na caixa de texto e pressionar Enter. O novo nome aplicado ao objeto bitmap.

Na janela do documento, selecionar o retngulo cinza que circunda o documento. Se estiver muito difcil a visualizao na tela, selecion-lo no painel Camadas. Desta vez, nomear um objeto usando o Inspetor de propriedades. Digitar Border na caixa Nome do objeto do Inspetor de propriedades e pressionar Enter.

O nome digitado tambm exibido do lado da miniatura do objeto no painel Camadas.


5

Digitar um nome para o objeto do retngulo remanescente usando o painel Camadas ou o Inspetor de propriedades. Usar qualquer nome, mas certificar-se de que esteja escolhendo um nome representativo para poder identificar e gerenciar objetos facilmente no documento mais tarde.

28

Captulo 1

Alterao da ordem de empilhamento de um objeto A imagem bitmap mesclada sobrepe o objeto da borda e o retngulo azul. A borda e o retngulo azul precisam permanecer no topo, pois voc usar o painel Camadas para alterar a ordem de empilhamento dos objetos no documento.
1 2

Clicar na miniatura do retngulo azul do painel Camadas para selecion-la. Arrast-la para o topo da Camada 1, acima da miniatura Classic Car.
Nota: A camada mais acima no painel Camadas sempre a camada da Web. Voc aprender mais sobre a camada da Web em Tutorial de princpios bsicos do projeto da Web na pgina 43.

Durante o arraste do mouse, o ponteiro alterado de modo a refletir que voc est arrastando um objeto (apenas no Windows). Uma linha escura no painel Camadas indica onde o objeto ser solto se o boto do mouse for liberado naquele momento.
3

Soltar o boto do mouse. O retngulo azul solto logo acima do objeto bitmap no painel Camadas. A ordem de empilhamento dos objetos tambm alterada na tela. Agora, o retngulo azul sobrepe o objeto bitmap e o objeto da borda.

Voc deseja que o objeto da borda seja o objeto mais superior, ento selecionar sua miniatura e arrast-la para o topo do painel Camadas, acima do retngulo azul.

Tutorial de princpios bsicos do projeto grfico

29

Criao e edio de mscara


Agora que vrias modificaes j foram efetuadas na imagem do carro clssico, voc executar um ltimo procedimento para que ela fique transparente gradativamente. No Fireworks possvel aplicar dois tipos de mscaras: mscaras vetoriais e mscaras de bitmap. Neste tutorial, ser aplicada uma mscara de bitmap simples imagem do carro. Depois, ir modific-la colocando um preenchimento de dgrad. Os pixels da mscara exibiro ou ocultaro a imagem do carro em funo do valor de tons de cinza neles existentes. Aplicao de mscara Primeiro, aplicar uma mscara de bitmap branca e vazia, imagem do carro. A mscara branca mostra um objeto ou uma imagem selecionada, enquanto os pixels pretos em um mscara ocultam a imagem ou o objeto selecionado. Alm disso, ir pintar a mscara para fazer com que a imagem do carro parea estar desaparecendo no fundo.
1 2

Com a ferramenta Ponteiro, selecionar a imagem bitmap. Clicar no boto Adicionar mscara na base do painel Camadas. Uma mscara transparente e vazia ser adicionada imagem selecionada. Para verificar se a mscara foi adicionada, observar a miniatura da mscara no painel Camadas. O realce amarelo em volta da miniatura da mscara indica que ela est selecionada.

Miniatura da mscara Objeto da mscara

Edio da mscara Agora, voc vai dar imagem bitmap uma transparncia aparente introduzindo um preenchimento de dgrad na mscara.
1

Com a miniatura da mscara selecionada no painel Camadas, clicar e manter o boto do mouse pressionado na ferramenta Lata de tinta na seo Bitmap do painel Ferramentas. Selecionar a ferramenta Dgrad no menu pop-up que aparece.

30

Captulo 1

Clicar na caixa Cor de preenchimento no Inspetor de propriedades. A janela pop-up Editar dgrad aberta. Selecionar Branco, Preto na base do menu pop-up Predefinio. Os exemplos e a inclinao da cor so alterados para refletir a nova configurao. Os exemplos de cores localizados logo abaixo da inclinao da cor permitem a modificao das cores no dgrad.
Inclinao da cor Exemplos de cor

4 5 6

Arrastar o exemplo de cores (branca) da esquerda para a direita, cerca de 1/4 do caminho, para ajustar o dgrad. Clicar fora da janela pop-up Editar dgrad para fech-la. Na tela, arrastar o ponteiro Dgrad pela imagem bitmap, como mostrado na ilustrao a seguir. A avaliao visual aparece na tela durante o arraste do mouse, permitindo a definio do ngulo e da distncia em que o dgrad ser aplicado.

Soltar o boto do mouse. A mscara modificada com o preenchimento de dgrad criado. A mscara afeta a imagem do carro conferindo a ela uma aparncia de transparncia em dgrad. A miniatura da mscara no painel Camadas exibe o preenchimento de dgrad aplicado.

Tutorial de princpios bsicos do projeto grfico

31

Selecionar a ferramenta Ponteiro e clicar na miniatura da mscara no painel Camadas. O Inspetor de propriedades mostra que a mscara foi aplicada usando sua aparncia de tons de cinza. Os pixels mais escuros da mscara bloqueiam a imagem do carro, enquanto os pixels mais claros mostram o carro.

Criao e edio de um texto


A seguir, adicionar texto ao documento e aplicar propriedades ao texto com o Inspetor de propriedades. Alm disso, criar quatro blocos de texto, dois para o ttulo da propaganda e dois para o texto do corpo. Criao do texto de ttulo Primeiro criar o texto do ttulo para a propaganda de aluguel de carro.
1

Selecionar a ferramenta Texto na seo Vetor do painel Ferramentas e mover o ponteiro sobre a janela do documento. O ponteiro alterado para uma forma de I e o Inspetor de propriedades exibe as propriedades do texto.
Tamanho Cor do preenchimento Fonte Botes de estilo

Entrelinhamento Escala horizontal Botes de alinhamento

No Inspetor de propriedades, executar um destes procedimentos:

Selecionar Times New Roman no menu pop-up Fonte. Digitar 85 como o tamanho da fonte. Clicar na caixa Cor de preenchimento. O ponteiro alterado para um conta-gotas. Clicar no
ponteiro conta-gotas no retngulo azul da tela.

A janela pop-up de cores fechada e a caixa Cor de preenchimento alterada para refletir a cor escolhida.

32

Captulo 1

Certificar-se de que nenhum dos botes de estilo (Negrito, Itlico e Sublinhado) esteja selecionado. Clicar no boto Alinhamento esquerda.
3

Com o ponteiro em forma de I, clicar uma vez no meio da tela. Um bloco de texto vazio ser criado. O crculo vazado no canto superior direito do bloco de texto indica que o bloco de texto dimensionado automaticamente. Um bloco de texto dimensionado automaticamente no Fireworks ajusta sua prpria largura com base na linha de texto mais longa do bloco.
Indicador de dimensionamento automtico

Digitar Vintage no bloco de texto. A largura do bloco de texto expandida durante a digitao. Clicar uma vez fora do bloco de texto para aplicar a entrada do texto. O bloco de texto permanece selecionado e a ferramenta Texto ainda a ferramenta selecionada. O crculo vazado no bloco de texto no est mais visvel. Esse indicador somente est visvel durante a insero ou edio de texto.

Selecionar a ferramenta Ponteiro e arrastar o texto para posicion-lo como mostrado na ilustrao a seguir.

7 8 9

Clicar fora do bloco de texto para cancelar a seleo e escolher de novo a ferramenta Texto. No Inspetor de propriedades, escolher Arial como fonte e 12 como o tamanho da fonte. Clicar novamente na tela, em algum lugar sob o bloco de texto recm-criado e digitar CLASSIC RENTALS em caixa alta.

Tutorial de princpios bsicos do projeto grfico

33

10

Selecionar a ferramenta Ponteiro para aplicar a entrada do texto. A alternncia para uma outra ferramenta no painel Ferramentas aplica entradas e edies de texto da mesma forma que ao clicar fora de um bloco de texto. Ao pressionar a tecla Esc voc obter o mesmo resultado.

11

Arrastar o novo bloco de texto para posicion-lo logo abaixo do bloco de texto Vintage, conforme mostrado na ilustrao a seguir.

12

Clicar fora do bloco de texto para cancelar a seleo.

Criao do texto do corpo Em seguida, criar dois blocos de texto que compem o texto do corpo desta propaganda.
1 2

Selecionar a ferramenta Texto. Agora, em vez de apenas clicar na tela, arrastar a ferramenta para desenhar uma moldura com o ponteiro em forma de I, conforme mostrado na ilustrao a seguir.

A bloco de texto exibido. O quadrado vazado no canto superior direito indica que o bloco de texto tem uma largura fixa, definida pela moldura desenhada. Os blocos de texto com largura fixa mantm a mesma largura especificada independentemente da quantidade de texto digitado. A ala de canto vazada ativada ou desativada ao ser clicada. Clicando duas vezes nela alternar o bloco de texto entre dimensionamento automtico e largura fixa.
3

Digitar o texto a seguir sem inserir nenhuma quebra de linha durante a digitao: Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you to any destination.

34

Captulo 1

Dica: Se voc estiver exibindo o tutorial on-line, basta simplesmente copiar e colar o texto acima no bloco de texto do Fireworks.

O texto flui no bloco de texto criado. O bloco de texto cresce na vertical, no na horizontal.
4 5 6

Selecionar a ferramenta Ponteiro e clicar fora do bloco de texto para cancelar a seleo. Depois, escolher de novo a ferramenta Texto. No Inspetor de propriedades, clicar na caixa Cor de preenchimento e escolher o branco como a cor do texto. Clicar no canto inferior esquerdo da tela. Um novo bloco de texto ser exibido no topo do retngulo azul. Digitar o texto a seguir em caixa alta sem inserir quebras de linha: SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC EXOTIC - ROADSTER
Dica: Se estiver exibindo o tutorial on-line, basta simplesmente copiar e colar o texto acima.

Selecionar a ferramenta Ponteiro e reposicionar o bloco de texto conforme mostrado a seguir.

Todo texto criado no Fireworks pode ser editado da mesma forma que em um processador de textos. Para editar texto, basta clicar duas vezes em um bloco de texto com a ferramenta Ponteiro, realar o texto a ser alterado e digitar em cima dele. Ou, clicar com o ponteiro em forma de I em qualquer parte do bloco de texto para introduzir o novo texto.

Tutorial de princpios bsicos do projeto grfico

35

Definio de uma propriedade de texto Agora que os blocos de texto foram criados, voc utilizar o Inspetor de propriedades para alterar diversas propriedades do texto.
1

Selecionar o bloco de texto Vintage. As propriedades do bloco de texto aparecem no Inspetor de propriedades. Essas propriedades so semelhantes s opes exibidas quando a ferramenta Texto est selecionada.

No Inspetor de propriedades, executar um destes procedimentos: no esteja selecionado. A suavizao de serrilhado suaviza as bordas do texto para que os caracteres do texto apaream mais limpos e mais legveis. Em geral, as fontes serif, como Times New Roman, tm melhor aparncia se a opo Suavizar serrilhado estiver definida com um tamanho superior a 45 pontos. Da mesma forma, as fontes sans serif, como Arial, tm melhor aparncia se a opo Suavizar serrilhado estiver definida com um tamanho superior a 32 pontos.
Dica: O termo serif se refere a linhas mnimas (muitas vezes chamadas de ps) anexadas aos caracteres do texto de fontes como Times New Roman. A fonte Arial considerada uma fonte sans serif porque os caracteres do texto no contm serifs.

Selecionar Suavizar serrilhado no menu pop-up Nvel de suavizao de serrilhado, caso esse ainda

Definir a opo Escala horizontal no Inspetor de propriedades como 89% e pressionar Enter.

Os caracteres no bloco de texto Vintage se tornam mais finos. A escala horizontal alonga ou reduz os caracteres no texto selecionado no sentido horizontal. A configurao padro 100%. Uma opo maior alongar o texto na horizontal e uma opo menor diminuir na largura.
3

Arrastar o bloco de texto Vintage para que fique posicionado como mostrado na ilustrao a seguir.

4 5

Selecionar o bloco de texto Classic Rentals. No Inspetor de propriedades, executar um destes procedimentos:

Clicar na caixa Cor de preenchimento, digitar FF6600 como o valor da cor e pressionar Enter. Clicar no boto Negrito.

36

Captulo 1

Selecionar Ondular suavizao de serrilhado no menu pop-up Nvel de suavizao de serrilhado.


Em geral, as fontes sans serif como a Arial tm melhor aparncia se definidas como Ondular suavizao de serrilhado quando seus tamanhos forem entre 12 e 18 pontos. Da mesma forma, as fontes serif tm melhor aparncia se definidas como Ondular suavizao de serrilhado, quando seus tamanhos forem entre 24 e 32 pontos.
6

Arrastar o bloco de texto para reposicion-lo como mostrado a seguir.

7 8

Selecionar o bloco de texto Mate. No Inspetor de propriedades, executar um destes procedimentos: Definir o tamanho da fonte como 13. Selecionar preto como a cor do texto. Clicar no boto Alinhamento direita. Selecionar Ondular suavizao de serrilhado no menu pop-up Nvel de suavizao de serrilhado. Definir a opo Escala horizontal como 88%. Definir a opo Entrelinhamento como 150% e pressionar Enter. O entrelinhamento define o espao entre as linhas do texto. O entrelinhamento normal de texto 100%. Qualquer opo acima de 100% aumentar o espao entre as linhas e qualquer fator abaixo mover as linhas para ficarem mais prximas.

Arrastar uma das alas de canto do bloco de texto para redimension-lo, a fim de que o texto flua como mostrado a seguir. Se necessrio, arrastar todo o bloco de texto para reposicion-lo.

Tutorial de princpios bsicos do projeto grfico

37

10 11

Selecionar o bloco de texto na base do documento. No Inspetor de propriedades, executar um destes procedimentos:

Definir o tamanho da fonte como 13. Selecionar Ondular suavizao de serrilhado no menu pop-up Nvel de suavizao de
serrilhado.

Definir a opo Escala horizontal como 75% e pressionar Enter.


12

Reposicionar o bloco de texto se necessrio.

Adicionar uma sombra ao texto possvel aplicar efeitos ao vivo ao texto. Aqui, ir adicionar uma sombra ao texto Vintage usando os controles de Efeitos ao vivo no Inspetor de propriedades.
1 2

Selecionar o bloco de texto Vintage. Clicar no boto Adicionar efeitos no Inspetor de propriedades. Selecionar Sombra e brilho > Aplicar sombra no menu pop-up Efeitos. As opes para o novo efeito aparecem em uma janela pop-up.

Digitar 5 em Distncia e 60% em Opacidade. Clicar fora da janela pop-up para fech-la. Um efeito de sombra adicionado ao bloco de texto Vintage. Clicar em uma rea vazia da janela do documento para cancelar a seleo do bloco de texto.

Exportao do documento
Nesta fase, voc criou um objeto vetorial e editou suas propriedades, importou uma imagem bitmap e fez modificaes nos pixels, alm de ter criado e formatado texto. Agora, est pronto para otimizar e exportar o documento. Otimizao do grfico Antes de exportar qualquer documento do Fireworks, sempre necessrio otimiz-lo. A otimizao assegura que um grfico seja exportado com o melhor equilbrio de compresso e qualidade possvel.
1

Executar um destes procedimentos para abrir o painel Otimizar, caso ainda no esteja aberto:

Selecionar Janela > Otimizar. Se o painel estiver minimizado no lado direito da tela, clicar na seta expansora para exibir todo
o painel.

38

Captulo 1

Selecionar JPEG - Melhor qualidade no menu pop-up Configuraes. As opes no painel so alteradas para refletir a nova configurao.

Essas configuraes podem ser alteradas, mas neste tutorial usaremos as configuraes padro.
3

Clicar na guia Visualizar perto do topo da janela do documento. A guia Visualizar exibe o documento na forma como ele aparecer quando exportado com as configuraes atuais.
Tamanho do arquivo Tempo de transferncia

Na parte superior direita da janela, o Fireworks exibe qual ser o tamanho do arquivo exportado e o tempo estimado que levar para exibir o grfico ao ser visualizado na Web.

Tutorial de princpios bsicos do projeto grfico

39

Exportao do grfico O grfico foi otimizado, portanto voc j est pronto para export-lo como um arquivo JPEG.
1

Selecionar Arquivo > Exportar. A caixa de dilogo Exportar aberta.

O nome do arquivo listado possui a extenso .jpg. O Fireworks escolhe este formato de arquivo, pois foi selecionado no painel Otimizar.
2 3

Navegar at a pasta Tutorials no espao de trabalho e procurar Tutorial1/Export. Certificar-se de que o menu pop-up Salvar como tipo (Windows) ou Salvar Como (Macintosh) l Somente imagens e clicar em Salvar. O arquivo JPEG exportado para o local especificado. Lembrar-se de que o arquivo PNG seu arquivo de origem ou arquivo de trabalho. Embora tenha exportado o documento no formato JPEG, tambm necessrio salvar o PNG, pois, assim, qualquer alterao feita tambm ser refletida no arquivo de origem.

4 5

Selecionar Arquivo > Salvar para salvar as alteraes no arquivo PNG. Selecionar Arquivo > Fechar.

Exibio do documento exportado O novo arquivo criado durante o processo de exportao est localizado na pasta especificada.
1

No Fireworks, selecionar Arquivo > Abrir e procurar a pasta Export. O Fireworks criou um arquivo neste local denominado vintage.jpg.

40

Captulo 1

Selecionar vintage.jpg e clicar em Abrir. O grfico aberto em uma nova janela do documento do Fireworks. No painel Camadas, todos os objetos foram nivelados. Quando isso ocorre, os objetos so mesclados em um nico objeto e tornam-se objetos que no podem ser editados como objetos separados.

O Inspetor de propriedades exibe as propriedades de um bitmap. Todos os efeitos ao vivo e outros atributos aplicados com o Inspetor de propriedades no esto mais disponveis para o bitmap selecionado.

O documento fica com essa aparncia porque o Fireworks tem que nivelar a imagem e todas as propriedades quando se escolheu export-lo para o formato JPEG. No entanto, voc ainda tem o arquivo PNG de origem, assim se precisar trabalhar mais no desenho, sempre ser possvel abrir o arquivo PNG e todos os objetos ainda podero ser editados.
3

Selecionar Arquivo > Abrir e selecionar vintage.png na pasta Tutorial1. Clicar em Abrir. No painel Camadas, todos os objetos esto novamente disponveis como objetos separados. Cada objeto editvel e possui suas propriedades.

Clicar em cada objeto. O Inspetor de propriedades exibe as diversas opes para cada um dos objetos selecionados. Selecionar o texto Vintage na tela. O efeito ao vivo Aplicar sombra desse objeto de texto aparece no Inspetor de propriedades. Agora, possvel observar a vantagem de usar um arquivo PNG do Fireworks como seu arquivo de origem. Voc pode fazer alteraes em um documento e esse sempre ser editvel, mesmo se escolher exportar o documento para outro formato como o JPEG.

Tutorial de princpios bsicos do projeto grfico

41

Seguir as prximas etapas


As tarefas necessrias para criar grficos no Fireworks foram completadas. Voc aprendeu como criar e salvar um novo documento e como adicionar objetos vetoriais e grficos de bitmap ao documento. Alm disso, aplicou efeitos ao vivo, trabalhou com camadas, criou uma mscara e adicionou texto. Finalmente, aprendeu a exportar o grfico concludo. Para obter informaes sobre qualquer recurso mencionado neste tutorial e informaes sobre recursos adicionais do Fireworks, consultar o ndice de Usando o Fireworks ou pesquisar os tpicos da Ajuda do Fireworks. Para mais tutoriais do Fireworks, visitar o site da Macromedia na Web, em http://www.macromedia.com/br/. Certificar-se de visitar o premiado Centro de suporte da Macromedia, em http://www.macromedia.com/br/support/. Para aprender como usar o Fireworks na criao de pginas da Web interativas, consultar Tutorial de princpios bsicos do projeto da Web na pgina 43. Voc usar a imagem JPEG exportada deste documento e a importar na pgina da Web. Alm disso, aprender a criar interatividade na Web como botes, rollovers e menus pop-up.

42

Captulo 1

CAPTULO 2 Tutorial de princpios bsicos do projeto da Web

Este tutorial ir orient-lo nas tarefas bsicas para execuo de um projeto grfico e interativo para Web com o Macromedia Fireworks MX. Voc adquirir experincia na prtica usando o aplicativo grfico da Web, lder no seu segmento, e aprender os conceitos de um projeto de Web enquanto treina.

O que voc aprender


Neste tutorial, voc vai repetir um fluxo de trabalho de produo tpico do Fireworks para o projeto de uma pgina da Web. Voc aprender o seguinte:

Cpia da pasta Tutorials Exibir a pgina da Web concluda Abertura do arquivo de origem Importao de um grfico Diviso do documento Criao de um rollover de arrastar e soltar Criao e edio de um boto para criar uma barra de navegao Criao e edio de um menu pop-up Otimizao do documento Exportao de HTML Teste do arquivo concludo

O que voc deve saber


Antes de iniciar este tutorial, necessrio estar familiarizado com a criao de imagens grficas no Fireworks ou em outros aplicativos grficos de bitmap ou vetoriais. Alm disso, precisa possuir as habilidades bsicas descritas no Fireworks Tutorial de princpios bsicos do projeto grfico na pgina 15. Em especial, voc deve saber como realizar as seguintes tarefas no Fireworks:

Salva de um documento Seleo de um objeto Edio de uma propriedade de objeto Exibio e utilizao de um painel

43

Como trabalhar com camadas e objetos Criao e edio de texto Exportao de grfico Cpia da pasta Tutorials
Antes de mais nada, fazer uma cpia da pasta Tutorials, para salvar os resultados do seu trabalho permitindo, assim, que voc ou outro usurio possa concluir o tutorial em uma outra oportunidade, usando os arquivos originais. Se tiver concludo o tutorial Princpios bsicos do projeto grfico, voc j ter feito uma cpia da pasta Tutorials, portanto pode ignorar esta etapa.
1

Navegar at a pasta do aplicativo Fireworks no disco rgido.


Nota: Se no conseguir exibir a pasta do aplicativo Fireworks, talvez tenha acesso limitado aos arquivos do sistema. possvel fazer o download dos arquivos necessrios ao tutorial no Centro de suporte Fireworks na Web em http://www.macromedia.com/br/support/.

Arrastar uma cpia da pasta Tutorials para o espao de trabalho.

Exibir a pgina da Web concluda


A seguir, exibir o arquivo do tutorial concludo para ver como o projeto terminado aparecer depois de export-lo como um arquivo HTML.
1 2

Iniciar o navegador da Web. No disco rgido, navegar at a pasta Tutorials, copiada no espao de trabalho, e procurar Tutorial2/Complete.
Nota: Algumas verses do Microsoft Windows ocultam, por padro, as extenses dos tipos de arquivos conhecidos. Se essa configurao no tiver sido alterada, ento os arquivos existentes na pasta Complete no exibiro as extenses. Na manipulao de grficos e pginas da Web, prefervel visualizar as extenses dos arquivos. Para informaes sobre como exibir novamente as extenses de arquivos, consultar a Ajuda do Windows.

Selecionar o arquivo final.htm e arrast-lo para uma janela aberta do navegador. Para o tutorial, voc concluir uma verso parcialmente terminada desta pgina da Global, uma locadora de carros.

Mover o ponteiro sobre a imagem grande Vintage. Quando o ponteiro mover sobre a imagem Vintage, uma outra imagem na pgina ser alterada. Isso denominado um rollover desarticulado.

Mover o ponteiro pela barra de navegao no topo da pgina da Web. Os botes so alterados em funo da passagem do ponteiro sobre eles. Clicar no boto Rates para testar o link. O link leva voc pagina do Fireworks, em http://www.macromedia.com/br/, mas ser necessrio digitar seu prprio URL para esse e outros itens ao concluir o tutorial.

6 7

Usar o boto Voltar do navegador para retornar pgina final.htm. Mover o ponteiro sobre a imagem Worldwide Airports. Um menu pop-up ser exibido. Fazer um rollover com o ponteiro sobre cada item do menu, inclusive sobre o primeiro item, que contm um submenu. Clicar em United States para testar o link, depois retornar pgina final.htm.

44

Captulo 2

Ao concluir a exibio da pgina da Web, poder fech-la ou deix-la aberta para referncia conforme seguir no tutorial.
Nota: A pasta Complete tambm inclui o documento do Fireworks a partir do qual o arquivo HTML gerado. Para exibir o documento, clicar duas vezes em final.png.

Abertura do arquivo de origem


Voc exibiu o arquivo final.htm em um navegador; agora, est pronto para iniciar seu projeto.
1 2

No Fireworks, selecionar Arquivo > Abrir. Navegar at a pasta Tutorials no espao de trabalho. Procurar Tutorial2/Start e abrir global.png.

Nota: Durante a execuo do tutorial, lembrar-se de salvar o trabalho com freqncia selecionando Arquivo > Salvar.

Importao de um grfico
Agora que voc j abriu o projeto no concludo da pgina Global na Web, importar um grfico. Se tiver concludo o tutorial Princpios bsicos do projeto grfico do Fireworks, usar o JPEG que voc criou. Se no tiver executado este tutorial, existe uma imagem concluda para voc.
1

Selecionar Arquivo > Importar e executar uma das aes a seguir: Export.

Se tiver concludo o tutorial Princpios bsicos do projeto grfico, procurar a pasta Tutorial1/ Se no tiver concludo o tutorial Princpios bsicos do projeto grfico, procurar a pasta Tutorial2/
Assets.
2 3

Selecionar vintage.jpg e clicar em Abrir. Clicar em qualquer lugar da rea branca e vazia da tela. A imagem exibida, selecionada. Arrastar a imagem para que fique posicionada conforme mostra a ilustrao a seguir.

Tutorial de princpios bsicos do projeto da Web

45

Diviso do documento
Os designers da Web usam um processo denominado fatiamento para recortar documentos da Web em pequenas partes, por uma srie de motivos. Imagens menores so transferidas de modo mais rpido na Web, desta forma os usurios podem observar o carregamento da pgina aos poucos em vez de esperar a transferncia de uma imagem enorme. Alm disso, o fatiamento viabiliza a otimizao de vrias partes de um documento de modo diferente. O fatiamento tambm necessrio para introduzir interatividade. Aqui, voc ir criar fatias para alguns dos elementos grficos da pgina da Web. Posteriormente, introduzir interatividade a essas fatias, alm de definir configuraes de compactao e otimizao para elas.
1

Com a imagem Vintage ainda selecionada, selecionar Editar > Inserir > Fatia. Uma fatia inserida no topo da imagem. Por padro, as fatias possuem uma sobreposio verde.

Clicar em qualquer lugar fora da fatia para cancelar a seleo. As guias de fatia vermelhas definem a fatia, estendendo a altura e a largura do documento. Quando tiver criado a fatia, o Fireworks dividir automaticamente o restante do documento.
Nota: Se voc no visualizar as guias de fatia vermelhas, selecionar Exibir > Guias de fatia.

3 4

Clicar com a tecla Shift no grfico Worldwide Airports e no grfico Great WEEKEND Rates no lado esquerdo do documento, para selecionar os dois ao mesmo tempo. Selecionar Editar > Inserir > Fatia. Na caixa de mensagem que exibida, selecionar Mltiplos. Isso permite a insero de vrias fatias ao mesmo tempo. As fatias so inseridas no topo de cada um dos grficos selecionados. A adio de outras fatias altera o layout de fatias automticas no restante do documento.

46

Captulo 2

Clicar em qualquer lugar fora das fatias para cancelar a seleo. Existe agora um espao entre as fatias Vintage e Great WEEKEND Rates. Esta uma fatia automtica fina.

Colocar o ponteiro sobre a guia da fatia esquerda da imagem Vintage.

O ponteiro alterado para um ponteiro Movimento de guia, indicando que voc pode clicar na guia de fatia e arrast-la. Com o arraste da guia de fatia, possvel alterar a forma de uma fatia.
7

Arrastar a guia de fatia para a esquerda at encaixar na guia de fatia da direita, na imagem Great WEEKEND Rates, como mostrado na ilustrao a abaixo.

Soltar o boto do mouse. A fatia Vintage agora se estende por toda a borda da fatia Great WEEKEND Rates e a fatia automtica mnima excluda. Considerar a fatias como clulas de uma tabela em um aplicativo de planilhas ou processador de textos. Se voc arrastar as guias para redimensionar uma fatia no Fireworks redimensionar as outras fatias, da mesma forma que se arrastar as bordas da clula de uma tabela redimensionar todas as outras clulas da tabela. Se voc arrastar uma guia de fatia sobre a fatia automtica ou ultrapass-la, as guias de fatia sero mescladas e as fatias automticas desnecessrias sero excludas.

Tutorial de princpios bsicos do projeto da Web

47

Se o painel Camadas estiver minimizado ou invisvel, clicar na seta expansora ou selecionar Janela > Camadas. No topo do painel est a Camada da Web. Ela contm todos os objetos da Web de um documento. As trs fatias criadas esto listadas aqui. A Camada da Web sempre a camada mais acima de qualquer documento. Ela no pode ser movida, renomeada ou excluda.

Criao de um rollover de arrastar e soltar


Depois de ter fatiado seu documento, agora est na hora de adicionar interatividade. Voc ir usar duas das fatias inseridas na etapa anterior para criar um rollover de arrastar e soltar. H dois tipos de rollovers: simples e desarticulados. Um rollover simples exibe uma imagem diferente quando o ponteiro passar sobre ele em um navegador da Web. Um rollover desarticulado faz com que outra imagem seja alterada em uma parte diferente da tela quando o ponteiro passar sobre ela. Aqui, voc ir criar um rollover desarticulado.
1

Selecionar a fatia que cobre a imagem Vintage. O cone redondo no centro da fatia denominado ala de comportamento. Ele permite a introduo de comportamentos, ou interatividade, em uma fatia. Se estiver familiarizado com o Macromedia Dreamweaver, identificar diversos desses comportamentos no Fireworks.

Ala de comportamento

48

Captulo 2

Os comportamentos tambm podem ser aplicados usando o painel Comportamentos. Mas, para obter uma interatividade simples como os rollovers, a ala de comportamento de fatia representa um mtodo mais rpido e fcil de aplicar um comportamento.
2

Arrastar a ala de comportamento na fatia Great WEEKEND Rates e liberar o boto do mouse.

Uma linha de comportamento azul se estende da ala de comportamento at o canto da fatia, e a caixa de dilogo Trocar imagem exibida.
3

Certificar-se de que a Moldura 2 esteja selecionada no menu pop-up Trocar imagem de, e clicar em OK. Quando o ponteiro passar sobre a fatia Vintage em um navegador, uma imagem da Moldura 2 substituir a imagem Great WEEKEND Rates. A imagem Vintage considerada a acionadora do efeito rollover, e a imagem que substituir a imagem Great WEEKEND Rates considerada a imagem trocada.

Se o painel Molduras estiver minimizado ou no estiver visvel, clicar na seta expansora do grupo de painis Molduras e Histrico e clicar na guia Molduras, ou selecionar Janela > Molduras.

O painel Molduras lista as molduras disponveis no documento atual. No momento, existe apenas uma moldura no documento. Em geral, o painel Molduras usado em animao. No caso de rollovers, ele usado para manter a troca de imagens.

Tutorial de princpios bsicos do projeto da Web

49

Clicar no boto Moldura nova/duplicada na base do painel. Uma nova moldura criada no painel Molduras, denominada Moldura 2. Agora, o espao de trabalho est vazio, exceto quanto s fatias inseridas.

No h objetos listados no painel Camadas, com exceo do contedo da Camada da Web. Isso se deve ao fato de que, por padro, as camadas no Fireworks no so compartilhadas em todas as molduras, com exceo da Camada da Web, que sempre compartilhada. Os objetos na Camada da Web aparecem em cada uma das molduras do documento, assim sendo, qualquer alterao feita nesses objetos, como nas fatias, afetam todas as molduras.
6 7

Selecionar Arquivo > Importar e navegar at a pasta Tutorial2/Assets. Selecionar o arquivo denominado rates.gif e clicar em Abrir. Posicionar o ponteiro de insero sobre a fatia em que estava localizada a imagem Great WEEKEND Rates na Moldura 1. Alinhar o ponteiro da melhor forma possvel com o canto superior esquerdo da fatia.

50

Captulo 2

Clicar para inserir a imagem. A imagem Vintage Classic Rates exibida.

Clicar na guia Visualizao no topo da janela do documento, e ocultar as fatias do documento clicando no boto Ocultar fatias e pontos ativos na seo Web do painel Ferramentas.

Mover o ponteiro sobre a imagem Vintage. A imagem Great WEEKEND Rates ser alterada quando o ponteiro passar sobre a imagem Vintage.
Dica: Se parecer que a imagem salta um pouco ou que a transio entre as imagens no est suave, ajustar a posio da imagem trocada na Moldura 2 enquanto estiver na exibio Original. Para obter um posicionamento preciso, ativar Onion Skinning no painel Molduras, ou verificar se as coordenadas X e Y da imagem Vintage Classic Rates so as mesmas que as da imagem Great WEEKEND Rates no Inspetor de propriedades. Quanto tiver terminado, retornar Moldura 1 e, se necessrio, desativar Onion Skinning. Para mais informaes sobre essas opes, consultar o ndice de Usando o Fireworks ou pesquisar a Ajuda do Fireworks.

10

Depois de concludo, clicar na guia Original no topo da janela do documento para retornar exibio normal, e voltar as fatias posio inicial clicando no boto Mostrar fatias e pontos ativos no painel Ferramentas.

Voc criou um rollover desarticulado com sucesso. Os rollovers simples so criados de modo semelhante: quando arrastar a ala de comportamento de uma fatia como na etapa 2, voc simplesmente a arrasta de volta para a mesma fatia. Em geral, os designers da Web adicionam efeito rollover a uma imagem para oferecer aos usurios uma dica visual de que possvel clicar na imagem. Se o site da Global na Web fosse um site real da Internet, provavelmente seria conveniente que as imagens Vintage e Descontos tivessem um link para pginas que oferecessem mais informaes. Para fins deste tutorial, deixar o rollover desarticulado como est. Na prxima seo, voc ganhar muita prtica sobre como anexar links a outros objetos da Web.

Criao e edio de um boto para criar uma barra de navegao


Os botes so objetos da Web com link para outras pginas da Web. Normalmente, a aparncia deles alterada em funo do movimento do mouse ou de outra ao do usurio, como clicar, como uma dica visual que indique interatividade. Por exemplo, um boto exibe um efeito rollover diferente quando o ponteiro passa sobre ele; diferente de quando se clica nele. Uma barra de navegao constituda de uma srie de botes que aparecem em uma ou mais pginas de um site da Web. Em geral, os botes de uma barra de navegao tm a mesma aparncia, com exceo do texto. Aqui, voc ir criar uma barra de navegao para o site da Global na Web.

Tutorial de princpios bsicos do projeto da Web

51

Criao de um smbolo de boto O grfico inicial e o texto do boto j foram criados. Voc converter esse grfico em um smbolo de boto.
1 2

No Fireworks, selecionar o grfico do boto (intitulado BUTTON TEXT) no canto superior esquerdo do documento. Selecionar Modificar > Smbolo > Converter em smbolo. A caixa de dilogo Propriedades do smbolo exibida. Digitar My button na caixa de texto Nome, selecionar Boto como o tipo de smbolo e clicar em OK.

Uma fatia aparece no topo do grfico do boto e um cone de atalho aparece esquerda da fatia. Isso indica que a seleo no espao de trabalho uma ocorrncia do smbolo recmcriado. Os smbolos so como cpias mestra de seus grficos. Quando voc alterar um smbolo, todas as ocorrncias desse smbolo no seu documento sero automaticamente alteradas. Os smbolos esto na biblioteca.

Se o painel Biblioteca estiver minimizado ou no estiver visvel, clicar na seta expansora do grupo de painis Propriedades e clicar na guia Biblioteca, ou selecionar Janela > Biblioteca. Seu smbolo est listado no painel Biblioteca.

52

Captulo 2

Criao de um estado de boto A seguir voc criar vrios estados para um smbolo de boto. Os estados de boto so formas diferentes de exibio de um boto quando houver um rollover ou quando for clicado em um navegador da Web.
1

Clicar duas vezes na ocorrncia de boto criada.


Dica: Uma outra alternativa clicar duas vezes para visualizar o boto no painel Biblioteca ou no cone da pasta do lado dele na lista de smbolos do painel Biblioteca.

O Editor de boto aberto com o grfico de boto exibido no espao de trabalho.

Clicar nas guias no topo do Editor de boto. As quatro primeiras guias representam os estados de boto. A ltima guia, rea ativa, representa a rea ativa do boto, ou o local em que o usurio deve clicar ou fazer um rollover para os estados de boto serem ativados. A rea ativa tambm representa a rea de troca do boto, ou a rea que alterada a cada estado do boto. No momento, no h estados para o smbolo do boto, exceto o Estado acima, estado do boto antes de ser feito um rollover ou de ser clicado.

Clicar na guia Sobre no topo do Editor de boto, depois clicar no boto Copiar grfico acima. O grfico de boto copiado a partir da guia Acima. O estado Sobre de um boto a aparncia que ele assume quando o ponteiro passar sobre ele. Para proporcionar aos usurios avaliao visual, voc ir alterar a cor do retngulo atrs do texto.

Selecionar o retngulo. Certificar-se de selecionar o retngulo e no o texto; se estiver em dvida sobre qual deles est selecionando, verificar o painel Camadas para visualizar o retngulo selecionado.

Tutorial de princpios bsicos do projeto da Web

53

Clicar na caixa Cor de preenchimento no Inspetor de propriedades e selecionar preto como cor.

Agora, o retngulo est preto.


6

Clicar na guia Abaixo no topo do Editor de boto, e clicar no boto Copiar grfico sobre. O grfico de boto copiado a partir da guia Sobre. O estado Abaixo a aparncia do boto depois de ter sido clicado. Desta vez voc no vai mudar a cor do retngulo; ir deix-la como est.

7 8

Clicar em Concludo no Editor de boto para aplicar as alteraes ao smbolo de boto. Clicar na guia Visualizao na janela do documento e testar os estados do boto. Se necessrio, desativar as fatias. Depois de concludo, clicar na guia Original e voltar as fatias posio inicial.

Criao de vrias ocorrncias de boto Em seguida, criar mais ocorrncias do smbolo de boto.
1 2

Selecionar o boto no espao de trabalho se ainda no estiver selecionada. Selecionar Editar > Clonar. Uma nova ocorrncia do boto aparece no topo do boto original. Manter a tecla Shift pressionada enquanto pressiona a tecla Seta direita vrias vezes para mover a nova ocorrncia para a direita. Isso move a ocorrncia a incrementos de 10 pixels. Se necessrio, usar as teclas de seta sozinhas para mover a seleo um pixel de cada vez. Posicionar a ocorrncia para a direita da ocorrncia original, mas sem sobreposio, como mostrado na ilustrao a seguir.

Clonar mais duas ocorrncias do boto e posicionar cada um delas direita da ocorrncia anterior.
Dica: Como atalho, pressionar Alt (Windows) ou Opo (Macintosh) durante o arraste da ocorrncia selecionada com o ponteiro para criar uma cpia. Depois de posicionar a nova ocorrncia direita da ocorrncia anterior, selecionar Editar > Repetir duplicar, para criar e colocar automaticamente uma outra cpia da ocorrncia.

54

Captulo 2

Alterao do texto de ocorrncia de boto Agora que j criou todos os botes para sua barra de navegao, necessrio dar um texto exclusivo para cada um. possvel alterar com facilidade o texto em uma ocorrncia de boto usando o Inspetor de propriedades.
1

Selecionar a ocorrncia de boto na extrema esquerda. As propriedades da ocorrncia de boto aparecem no Inspetor de propriedades. Com exceo do menu pop-up Configuraes de exportao, essas propriedades so aplicadas apenas ocorrncia selecionada. Alteraes feitas neste local no afetaro o smbolo de boto original na Biblioteca.

No Inspetor de propriedades, substituir o texto da caixa Texto com a palavra HOME em caixa alta. Em seguida, pressionar Enter. O texto no boto alterado para refletir sua entrada.

Nos trs botes restantes, alterar o texto do boto para VEHICLES, RATES e CONTACT US, respectivamente.

Atribuir URLs aos botes A seguir, ir atribuir um URL exclusivo, ou um link, a cada ocorrncia de boto. Um URL, ou Uniform Resource Locator, o endereo ou o local de uma pgina na Web. possvel atribuir com facilidade URLs a botes usando o Inspetor de propriedades.
1 2

Selecionar a ocorrncia de boto entitulada Home. Digitar index.htm na caixa de texto Link do Inspetor de propriedades.

Quando clicado em um navegador da Web, o boto Home ir para a pgina denominada index.htm. Voc descobrir posteriormente neste tutorial porque fez um link no boto Home com esta pgina.

Tutorial de princpios bsicos do projeto da Web

55

Selecionar a ocorrncia de boto Veculos e inserir o URL favorito na caixa de texto Link do Inspetor de propriedades.

Para fins deste tutorial, qualquer URL serve. Se estivesse criando um site da Web de verdade, teria que digitar o URL para o local de destino do boto Veculos.
Nota: Certificar-se de digitar o URL de um site real da Web, para poder testar os vnculos do boto posteriormente.

4 5

Atribuir um URL a cada uma das demais ocorrncias de boto. Novamente, qualquer URL que funcione serve. Selecionar Arquivo > Visualizar no navegador > Visualizao em [seu navegador preferido]. Para testar os vnculos do boto, necessrio visualizar o documento em um navegador.
Nota: Se o navegador no estiver listado, necessrio selecionar primeiro um navegador escolhendo Arquivo > Visualizar no navegador > Definir navegador primrio.

Quando o documento for aberto no navegador, testar os botes criados. Exceto pelo boto Home, que est vinculado a um arquivo que ainda no foi criado, cada boto deve ir para o link especificado no Fireworks. Edio do smbolo de boto A seguir, voc modificar o smbolo de boto original. As alteraes realizadas sero aplicadas automaticamente a todas as ocorrncias de boto na barra de navegao. Talvez esteja pensando na aparncia do smbolo de boto original, uma vez que o texto foi alterado em diversas ocorrncias.
1

Clicar duas vezes em qualquer das ocorrncias de boto no espao de trabalho. O Editor de boto aberto com o smbolo e o texto de boto original exibido no espao de trabalho. O smbolo de boto original ainda est intacto e exibe o texto original. Na alterao do texto de cada boto do espao de trabalho, voc s editou as ocorrncias de boto. Aqui, se fizer alguma alterao no retngulo ou na aparncia do texto, voc estar editando o smbolo original, assim sendo, essas alteraes sero refletidas em todas as ocorrncias do espao de trabalho.

2 3 4

Clicar na guia Sobre. Selecionar o retngulo preto. Clicar na caixa Cor de preenchimento no Inspetor de propriedades e digitar FF6633 como valor da cor. Pressionar Enter para aplicar a alterao da cor. Agora, o retngulo est laranja. Clicar em Concludo no Editor de boto para aplicar a alterao ao smbolo de boto. Clicar na guia Visualizao na janela do documento e testar os botes. Agora, cada estado de boto Sobre est laranja. Voc s alterou o smbolo de boto, mas a alterao foi aplicada a todas as ocorrncias de boto na sua barra de navegao.

5 6

56

Captulo 2

7 8

Clicar na guia Original, e clicar duas vezes em qualquer ocorrncia de boto no espao de trabalho. Desta vez voc alterar o texto no smbolo de boto. Selecionar o texto do boto no Editor de boto, e no Inspetor de propriedades escolher Arial como o tipo de fonte. Fazer isso em cada estado de boto.

Clicar duas vezes no bloco de texto no Editor de boto e excluir a palavra BUTTON.

10

Clicar em Sim na caixa de mensagem que solicita se deseja alterar o texto nos outros estados de boto. Examinar os vrios estados de boto no Editor de boto. O texto alterado em um estado que se reflete em todos os estados de boto. Comparar isso com a fonte alterada; voc teve que modific-la em cada estado. Isso porque se pode aplicar diferentes atributos de texto e grfico a cada um dos estados de um boto. Isso til, por exemplo, se desejar que a cor do texto seja alterada quando o usurio fizer rollover em um boto.

11

Clicar em Concludo para sair do Editor de boto. A fonte alterada em cada ocorrncia de boto para refletir a nova seleo de fonte, mas o texto permanece o mesmo. Ocorrncias de boto refletem apenas as alteraes feitas na aparncia grfica de um smbolo de boto, inclusive nos atributos de texto, mas no alteraes feitas no texto propriamente dito. Smbolos de boto possibilitam a alterao da aparncia grfica de todas as ocorrncias de boto em uma barra de navegao, enquanto preserva o texto exclusivo de cada uma das ocorrncias.

Criao e edio de um menu pop-up


Menu pop-up aquele que aparece quando se movimenta o ponteiro sobre uma imagem acionadora em um navegador. Ele contm uma lista de itens com links para outras pginas da Web. Aqui, voc ir criar e editar um menu pop-up que lista os locais em aeroportos da Global. Criao de itens de lista de menu pop-up Primeiro criar os itens de lista do menu pop-up usando o Editor de menu pop-up.
1

Selecionar a fatia que abrange a imagem Worldwide Airports.

Tutorial de princpios bsicos do projeto da Web

57

Selecionar Modificar > Menu pop-up > Adicionar menu pop-up. O Editor de menu pop-up aberto.

3 4

Clicar duas vezes na caixa de texto no canto superior esquerdo (apenas no Windows). Digitar North America na caixa de texto e pressionar Enter. A caixa de texto seguinte est realada, pronta para a criao de uma outra entrada.

5 6

Digitar Europe e pressionar Enter. Criar mais trs entradas para Africa, Middle East e Asia/Pacific.

58

Captulo 2

7 8

Clicar duas vezes na caixa de texto Link para a entrada North America. Digitar um URL de sua escolha que funcione e pressionar Enter. Para fins deste tutorial, qualquer URL serve. Certificar-se de que seja um URL de verdade para poder testar os links posteriormente.

Digitar os URLs para as entradas remanescentes.


Nota: Sempre existe uma linha extra na base da lista de entradas no Editor de menu pop-up. Ela est l para voc adicionar novas entradas com facilidade, sem ter que clicar no boto Adicionar menu.

10

Clicar em Concludo para fechar o Editor de menu pop-up. No espao de trabalho, aparece um contorno do menu pop-up anexo fatia.

11

Para testar o menu pop-up, selecionar Arquivo > Visualizar no navegador > Visualizao em [seu navegador preferido], para visualizar o documento em um navegador.
Nota: Os menus pop-up devem ser visualizados em um navegador; eles no so visveis ao usar a guia Visualizao no Fireworks.

Quando o documento for aberto no navegador, mover o ponteiro sobre a imagem Worldwide Airports. O menu pop-up criado ser exibido. Clicar em todas as entradas para testar os links.

Tutorial de princpios bsicos do projeto da Web

59

Personalizao do menu pop-up A seguir, retornar ao Editor de menu pop-up para modificar a aparncia do menu pop-up.
1

No Fireworks, clicar duas vezes no contorno do menu pop-up. O Editor de menu pop-up aberto exibindo suas entradas. Clicar no boto Prximo. A guia Aparncia exibida. Este o local em que possvel alterar as cores e fontes usadas nos menus pop-up.

3 4 5

Selecionar HTML como tipo de clula e Menu vertical como alinhamento. Selecionar Arial, Helvetica, sans-serif como fonte e 12 como tamanho de fonte. Na seo Estado acima, definir a cor do texto como preto, se ainda no estiver selecionada. Em seguida, clicar na caixa Cor da clula. Se CCCCCC ainda no for exibido na caixa de texto no topo da janela pop-up de cores, digitar CCCCCC e pressionar Enter. Esses valores da cor representam as cores padro selecionadas no Editor de menu pop-up se nunca tiver criado um menu pop-up. Depois de alterar essas cores, elas sero usadas sempre que voc criar um menu pop-up, at outras cores serem escolhidas.

60

Captulo 2

Na seo Estado sobre, definir a cor do texto como Branco, se ainda no estiver selecionada, e clicar na caixa Cor da clula. Clicar no ponteiro conta-gotas no retngulo azul da tela que circunda a imagem Worldwide Airports, como mostrado abaixo.

Clicar no boto Prximo. A guia Avanada exibida. A guia Avanada permite a alterao de vrias propriedades de clula e borda. Aqui, poder aumentar a largura da clula, fazendo com que o menu pop-up parea mais largo.

Selecionar Pixels no menu pop-up Largura da clula. Isso ativa a caixa Largura da clula. Digitar 137 como largura da clula.

Tutorial de princpios bsicos do projeto da Web

61

10

Selecionar Automtica no menu pop-up Altura da clula e clicar no boto Prximo. A guia Posio exibida. Este o local em que se pode especificar a posio da tela em que o menu pop-up aparecer. Coordenadas de 0,0 significam que o canto esquerdo superior do menu pop-up ser alinhado com o canto esquerdo superior da fatia que o aciona. Existem tambm diversas posies predefinidas escolha.

11

Digitar 3 nas caixas de Posio de menu X e Y, depois clicar em Concludo.


Nota: Tambm possvel reposicionar um menu pop-up arrastando seu contorno no espao de trabalho.

12

Visualizar as alteraes do menu pop-up em um navegador. Mover o ponteiro sobre a imagem Worldwide Airports. O menu pop-up est posicionado de forma diferente e aparece mais largo. Fazer um rollover sobre cada entrada do menu para verificar as alteraes de cor.

Edio do menu pop-up A seguir, usar o Editor de menu pop-up novamente para adicionar outra entrada ao menu popup. Alm disso, alterar a ordem das entradas e adicionar um submenu.
1 2 3

No Fireworks, clicar duas vezes no contorno do menu pop-up. Clicar na entrada Europe para selecion-la. Clicar no boto Adicionar menu, acima da lista de entradas. Uma linha branca inserida.

62

Captulo 2

Clicar duas vezes no campo Texto da nova entrada e digitar Latin/South America. Clicar em qualquer lugar fora do campo Texto para aplicar a entrada.

As Amricas no esto juntas na lista.


5

Arrastar a entrada Latin/South America uma linha para cima e soltar o boto do mouse. Durante o arraste, uma linha preta indica o local em que a entrada ser colocada se voc liberar o boto do mouse naquele ponto. A entrada colocada no local especificado.

6 7 8

Selecionar a entrada North America e clicar no boto Adicionar menu. Clicar duas vezes no campo Texto da nova entrada e digitar United States. Depois, clicar em qualquer lugar fora dos campos de entrada. Porm, cuidado para no selecionar outra entrada. Selecionar a entrada United States se ela ainda no estiver selecionada e clicar no boto Recuar menu. A entrada recuada abaixo da entrada North America.

Tutorial de princpios bsicos do projeto da Web

63

Clicar novamente no boto Adicionar menu e criar uma nova entrada para o Canada. Acaba de ser criado um submenu que ser exibido quando se fizer um rollover na entrada North America em um navegador.

10 11

Atribuir URLs a todas as novas entradas. Opcionalmente, possvel excluir o link para a North America, pois os usurios escolhero itens do submenu. Clicar em Concludo para fechar o Editor de menu pop-up, e depois visualizar as alteraes do menu pop-up em um navegador.

Otimizao do documento
O documento est quase pronto para a Web. A nica ao que voc precisa tomar antes de exportar o documento otimiz-lo. Antes de exportar qualquer documento do Fireworks, sempre necessrio otimiz-lo. A otimizao assegura que os grficos sero exportados com o melhor equilbrio possvel de compactao e qualidade. Quando diferentes tipos de grficos encontram-se no mesmo documento, aconselhvel escolher uma configurao de compactao e formato de arquivo apropriado para cada um. A pgina da Global na Web composta por vrios elementos: bitmaps, objetos vetoriais e texto.
1

Se o painel Camadas estiver minimizado ou invisvel, clicar na seta expansora ou selecionar Janela > Camadas.

64

Captulo 2

O Fireworks escolhe o formato de arquivo GIF como o padro de exportao e Websnap adaptiva como a paleta de cores padro. A maioria dos grficos da pgina da Global Rental Cars na Web ficar perfeita com essas configuraes. No entanto, a imagem bitmap Vintage contm uma fotografia e um dgrad. Devido complexa variao de cores, ser melhor export-la em outro formato.
2

Clicar na guia Visualizao 2 para cima na janela do documento.

A guia 2 para cima permite a exibio dos resultados das configuraes de otimizao e as compara com o original. Agora, voc j deve ter percebido que a fatia branca sobreposta sempre que uma das guias Visualizao for exibida. A sobreposio permite que se enfoque apenas a rea a ser otimizada.
3

Clicar na fatia da imagem Vintage na visualizao direita. A sobreposio da fatia desaparece, assim possvel exibir a imagem abaixo da fatia. Na base da visualizao, exibido o formato do arquivo de exportao da fatia selecionada, assim como o tamanho aproximado do arquivo de exportao e o tempo de transferncia do grfico na Web.

Dica: Usar a ferramenta Mo na seo Exibir do painel Ferramentas, para exibir mais partes da imagem, caso no esteja totalmente visvel.

Ocultar as fatias por um instante clicando no boto Ocultar fatias e pontos ativos na seo Web do painel Ferramentas. Isso permite a comparao da visualizao com o original e a verificao das diferenas entre os dois grficos. A visualizao da direita possui faixas no dgrad.

Voltar com as fatias novamente e clicar na imagem Vintage com a ferramenta Ponteiro.

Tutorial de princpios bsicos do projeto da Web

65

No painel Otimizar, escolher JPEG - menor arquivo no menu pop-up Configuraes.

As faixas de dgrad agora desapareceram e o tamanho do arquivo diminuiu consideravelmente. Isso porque as fotografias e as imagens com variaes de cores complexas esto melhor otimizadas e compactadas como JPEGs do que como GIFs. Agora que o tamanho do arquivo diminuiu, a imagem ficou confusa.

Para melhorar a aparncia do bitmap, arrastar o controle deslizante Qualidade no painel Otimizar para 77 e definir a opo Suavizao como 0. O bitmap est muito mais ntido, mas, tambm, o tamanho do arquivo aumentou. No entanto, isso ainda representa uma melhora no tamanho do arquivo quando a comparamos com a imagem otimizada como GIF.

Clicar na guia Original para retornar exibio normal.

66

Captulo 2

Exportao de HTML
HTML (HyperText Markup Language, linguagem de marcao de hipertexto) o principal mtodo utilizado na Internet para criar e exibir pginas da Web. No necessrio conhecer HTML para usar o Fireworks, mas isso ajuda a entender que as fatias do Fireworks se transformam em clulas em uma tabela HTML quando exportadas. Aqui, voc ir exportar e exibir o documento finalizado em um navegador da Web. Alm disso, tambm examinar o cdigo HTML exportado pelo Fireworks. Definio de preferncias HTML Antes de exportar o documento, necessrio definir as preferncias de exportao HTML.
1

Selecionar Arquivo > Configurao do HTML. A caixa de dilogo Configurao do HTML exibida. As opes definidas nesta caixa de dilogo afetaro todos os prximos documentos criados no Fireworks, exceto as opes existentes na guia Especfico do documento.

Na guia Geral, selecionar um estilo HTML. Se usar um editor de HTML como o Macromedia Dreamweaver ou o Microsoft FrontPage, voc deve selecion-lo neste menu pop-up. Fazendo isso poder abrir e editar com facilidade o arquivo exportado nesse editor de HTML. Se no usar um editor de HTML ou se utilizar um que no esteja listado, selecionar HTML genrico.

Selecionar .htm como a extenso de arquivo.

Tutorial de princpios bsicos do projeto da Web

67

Clicar na guia Tabela. A guia Tabela permite a alterao das propriedades da tabela HTML.

No menu pop-up Espaar com, selecionar Espaador transparente de 1 pixel. A seleo dessa opo faz o Fireworks exportar um arquivo grfico denominado spacer.gif, que uma imagem transparente de 1 pixel. Os espaadores so usados pelos designers da Web para ajudar no layout da pgina. Eles mantm clulas da tabela HTML abertas. Sem eles, as clulas vazias de uma tabela HTML so recolhidas, alterando assim o layout pretendido para a pgina. Voc observar o arquivo spacer.gif mais tarde quando exibir os arquivos exportados. No necessrio entender os espaadores, mas bom saber sobre essa opo se desejar utiliz-la no futuro.

Clicar na guia Especfico do documento.

68

Captulo 2

A guia Especfico do documento permite a escolha de uma srie de preferncias especficas do documento, inclusive uma conveno de denominao personalizada para os arquivos exportados. Lembrar-se de que as opes definidas aqui somente se aplicam ao documento Fireworks atual.
Dica: Para aplicar as configuraes da guia Especfico do documento a todos os documentos novos, clicar no boto Configurar padres.

Clicar em OK para aceitar as configuraes da guia Especfico do documento e fechar a caixa de dilogo Configurao do HTML.

Exportao do documento para o formato HTML Agora, seu documento est pronto para ser exportado.
1

Selecionar Arquivo > Exportar. A caixa de dilogo Exportar aberta.

2 3

Na caixa de dilogo, navegar at a pasta Tutorial2/Export. Certificar-se de que HTML e Imagens esto selecionados como tipo de arquivo e digitar index.htm como nome do arquivo. A denominao de index.htm como pgina inicial uma conveno comum usada na Web. Muitos navegadores exibiro automaticamente a pgina index.htm quando um URL listar uma localizao, mas no o nome da pgina. Alm disso, anteriormente neste tutorial voc atribuiu o boto Home a um URL de index.htm. No momento, existe apenas uma pgina no site da Global na Web, ento vincular essa pgina a si mesmo no faz muito sentido. Mas, se voc criar outras pginas para este site no futuro, ser possvel usar essa barra de navegao em todas as pginas, proporcionando aos usurios um mtodo de navegao consistente.

Tutorial de princpios bsicos do projeto da Web

69

4 5

Certificar-se de que Exportar arquivo HTML esteja selecionado no menu pop-up HTML e que Exportar fatias esteja selecionado no menu pop-up Fatias. Selecionar as opes seguir e deixar todas as demais sem seleo:

Incluir reas sem fatias Colocar imagens na subpasta


Quando voc escolher essa opo, o Fireworks permite a seleo de uma pasta em que fiquem armazenados os arquivos grficos exportados. Se a pasta no existir, o Fireworks a criar. Se voc no escolher uma pasta, por padro, o Fireworks selecionar uma pasta denominada images. Neste tutorial, aceitar a configurao padro.
6

Clicar em Salvar. Os arquivos so exportados para o local especificado. Selecionar Arquivo > Salvar para salvar o arquivo PNG.

Teste do arquivo concludo


Os arquivos foram exportados, portanto hora de verificar sua criao. Exibio da lista de arquivos exportados Primeiro, examinar a lista de arquivos exportada pelo Fireworks. Os novos arquivos criados durante o processo de exportao aparecem na pasta Export.
1

No espao de trabalho, procurar a pasta Export e abri-la. O Fireworks criou um arquivo HTML denominado index.htm. Esta a pgina inicial do site da Global na Web. O programa tambm criou um arquivo denominado mm_menu.js, que contm o cdigo necessrio para exibir menus pop-up.

Abrir a subpasta images. O Fireworks tambm exportou arquivos grficos para todas as artes-finais. Cada fatia do Fireworks exportada como um arquivo grfico em separado. Existem vrios arquivos GIF e um arquivo JPEG. JPEG representa a imagem bitmap otimizada anteriormente. O arquivo denominado spacer.gif o resultado da opo de espaamento selecionada na caixa de dilogo Configurao do HTML e ser usada para ajudar no layout da pgina.

70

Captulo 2

Exibio de arquivo HTML Fireworks em um navegador Agora que j verificou os arquivos exportados, hora de testar a pgina da Web em um navegador.
1 2 3 4

Na pasta Export, arrastar o arquivo index.htm para um navegador da Web aberto. No navegador, clicar nos botes adicionados para testar os links, depois retornar ao arquivo index.htm. Testar os outros recursos adicionados. A maioria dos navegadores da Web permite a exibio do cdigo de origem com um comando como Exibir > Origem. Localizar e executar o comando que permite exibir o cdigo.

Rolar o cdigo de origem. Se conhecer HTML e JavaScript, ir reconhecer o cdigo criado pelo Fireworks. Se no conhecer HTML e JavaScript, vai gostar de saber que com o Fireworks voc no precisa conhecer essas linguagens.

Seguir as prximas etapas


Voc completou as principais tarefas no fluxo de trabalho de produo para criar uma pgina da Web com o Fireworks. E mais, aprendeu como abrir um documento, importar grficos dentro dele e fatiar o documento. Alm disso, criou um rollover de arrastar e soltar, criou botes e um menu pop-up. Finalmente, aprendeu a otimizar e exportar o documento concludo. Para informaes detalhadas sobre qualquer recurso mencionado neste tutorial e informaes sobre recursos adicionais do Fireworks, consultar o ndice de Usando o Fireworks ou pesquisar a Ajuda do Fireworks. Para mais tutoriais, visitar http://www.macromedia.com/br/. Certificar-se de visitar o premiado Centro de suporte da Macromedia, em http://www.macromedia.com/br/support/.

Tutorial de princpios bsicos do projeto da Web

71

72

Captulo 2

CAPTULO 3 Princpios bsicos do Fireworks

O Macromedia Fireworks MX um aplicativo para elaborar grficos para usar na Web. Suas solues inovadoras atacam os principais problemas com que se deparam os projetistas grficos e mestres da Web. Sua ampla variedade de ferramentas permite criar e editar imagens grficas vetoriais e de bitmap em um nico aplicativo. O advento do Fireworks libertou os criadores da Web das idas e vindas de uma srie de aplicativos especficos para essa tarefa. Os Efeitos ao vivo no destrutivos eliminaram a frustrao de ter que recriar grficos da Web desde o incio, depois de qualquer edio simples. O programa gera JavaScript, facilitando a criao de rollovers. Recursos de otimizao eficientes reduziram o tamanho dos arquivos de grficos da Web sem prejudicar a qualidade. Se o usurio for um iniciante no Fireworks, ser til entender os conceitos gerais, como abrir, importar e salvar arquivos; familiarizar-se com o ambiente do Fireworks e trabalhar com um arquivo. O ambiente de trabalho do Fireworks estar disponvel assim que o usurio criar um arquivo ou abrir um arquivo existente. O Fireworks MX introduz vrias melhorias no espao de trabalho, inclusive o Inspetor de propriedades, um painel Ferramentas segmentado e grupos de painis.

Sobre grficos vetoriais e de bitmap


Os computadores exibem grficos em formato vetorial ou de bitmap. Entender a diferena entre os dois formatos, o ajuda a entender o Fireworks, que contm ferramentas vetoriais e de bitmap e tem capacidade para abrir ou importar ambos os formatos. Sobre grficos vetoriais Grficos vetoriais descrevem imagens utilizando linhas e curvas, denominadas vetores, que tambm incluem informaes sobre cor e posio. Por exemplo, a imagem de uma folha pode ser descrita por uma srie de pontos, cujo resultado represente o contorno da folha. A cor da folha determinada pela cor do contorno, ou trao, e pela cor da rea abrangida pelo contorno, ou preenchimento. Ao editar um grfico vetorial, o usurio modifica as propriedades das linhas e curvas que descrevem sua forma. Grficos vetoriais so independentes de resoluo, ou seja, possvel mover, redimensionar, mudar forma e alterar a cor de um grfico vetorial, assim como exibi-lo em dispositivos de sada de resoluo varivel, sem alterar a qualidade de sua aparncia. Sobre grficos de bitmap Grficos de bitmap consistem em pontos, denominados pixels, organizados em uma grade. A prpria tela do computador consiste em uma grande grade de pixels. Em uma verso bitmap, a imagem de uma folha seria determinada pelo local e valor de cor de cada pixel na grade. A cada ponto atribuda uma cor. Quando visualizados na resoluo correta, os pontos so encaixados como pastilhas em um mosaico para formar uma imagem.

73

Ao editar um grfico de bitmap, o usurio modifica pixels, em vez de linhas e curvas. Esses grficos de bitmap so dependentes de resoluo, significando que os dados que descrevem a imagem so fixos a uma grade de um determinado tamanho. O aumento do grfico de bitmap pode fazer com que as bordas da imagem fiquem dentadas, pois os pixels so redistribudos dentro da grade. A exibio de um grfico de bitmap em um dispositivo de sada com uma resoluo mais baixa do que a prpria imagem, tambm degrada a qualidade da imagem.

Sobre o trabalho no Fireworks


O Fireworks uma aplicativo verstil para criar, editar e otimizar grficos da Web. Voc pode criar e editar imagens vetoriais e de bitmap, projetar efeitos na Web como rollovers e menus pop-up, cortar e otimizar grficos para reduzir o tamanho do arquivo e economizar tempo, automatizando tarefas repetitivas. Quando o documento estiver concludo, poder export-lo como um arquivo JPEG, GIF ou de outro formato junto com arquivos HTML que contenham tabelas HTML e cdigo JavaScript para utiliz-lo na Web. Tambm ser possivel exportar um tipo de arquivo especfico para outro aplicativo como Photoshop ou Macromedia Flash, se quiser continuar a trabalhar no outro aplicativo. Objetos vetoriais e de bitmap No painel Ferramentas do Fireworks, o usurio encontrar sees diferentes que contm ferramentas de desenho e edio vetorial e de bitmap. No Fireworks MX, a ferramenta escolhida determina se o objeto criado um objeto vetorial ou bitmap. Por exemplo, ao escolher a ferramenta Caneta na seo Vetorial do painel Ferramentas, possvel comear a desenhar traados vetoriais desenhando pontos. Escolher a ferramenta Pincel, e ser possvel arrastar para pintar um objeto bitmap. Escolher a ferramenta Texto, e ser possvel comear a digitar. Aps desenhar objetos vetoriais, objetos bitmap ou texto, ser possvel usar uma ampla gama de ferramentas, efeitos, comandos e tcnicas para aprimorar e completar seus grficos. Alm disso, poder usar as ferramentas do Fireworks no Editor de boto para criar botes de navegao interativos. Tambm possvel usar as ferramentas do Fireworks para editar grficos importados, nos formatos JPEG, GIF, PNG, PSD e vrios outros formatos. Depois que tiver importado uma imagem grfica, o usurio poder ajustar sua cor e tom, assim como cort-la, retoc-la e mascar-la. Grficos interativos As fatias e os pontos ativos so objetos da Web, que especificam reas interativas em um grfico da Web. As fatias recortam uma imagem em diferentes sees, e possibilitam a aplicao de comportamentos de rollover, animao e vnculos URL (Uniform Resource Locator) com partes da imagem total. Alm disso, as fatias permitem exportar as sees usando diferentes configuraes. Em uma pgina da Web, cada fatia aparece em uma clula da tabela. Os pontos ativos permitem atribuir vnculos URL e comportamentos a todo o grfico ou a uma parte dele. Para mais informaes, consultar Captulo 12, Fatias, rollovers e pontos ativos, na pgina 261. As fatias e pontos ativos possuem alas de rollover de arrastar-e-soltar, que permitem atribuir, de forma rpida, comportamentos de troca de imagem e reollover a grficos diretamente no espao de trabalho. O Editor de boto e o Editor de menu pop-up so recursos convenientes do Fireworks que ajudam a criar grficos interativos especiais para navegar em sites da Web.

74

Captulo 3

Sobre otimizao e exportao de grficos O Fireworks tem recursos poderosos de otimizao para ajud-lo a encontrar o equilbrio entre tamanho do arquivo e qualidade aceitvel, durante a preparao para exportar grficos. possvel otimizar grficos da Web no Fireworks para reduzir o tamanho do arquivo e tornar mais rpido o carregamento ao exibir sites da Web, enquanto compara a qualidade dos grficos nos modos Visualizar, 2 para cima, 4 para cima, no espao de trabalho. Pode-se fatiar uma imagem em partes menores e otimizar cada parte no formato que melhor se adaptar ao contedo. Para melhorar a flexibilidade da otimizao, possvel utilizar a compresso seletiva de JPEG para focalizar a parte mais importante de um JPEG, enquanto se reduz a qualidade do fundo. Depois de otimizar os grficos, a prxima etapa ser export-los para utilizao na Web. A partir do documento PNG de origem no Fireworks, possvel exportar vrios tipos de arquivo, inclusive JPEG, GIF, GIF animado e tabelas HTML contendo imagens fatiadas em vrios tipos de arquivos. Para mais informaes, consultar Captulo 15, Otimizao e exportao, na pgina 325.

Criao de um novo documento


Quando escolher Arquivo > Novo para criar um novo documento no Fireworks, ser criado um documento Portable Network Graphic ou PNG. PNG o formato de arquivo nativo do Fireworks. Depois de criar grficos no Fireworks, possvel export-los como outros formatos de grfico da Web, como JPEG, GIF e GIF animado. Pode-se tambm export-los para diversos formatos populares usados fora da Web, tais como TIFF e BMP. Seja qual for a configurao de otimizao e exportao escolhida, o arquivo PNG original do Fireworks ser preservado para permitir rpida edio posterior. Para criar um grfico da Web no Fireworks, necessrio primeiro configurar um novo documento ou abrir um j existente. possvel ajustar as opes de configurao mais tarde no Inspetor de propriedades.
Para criar um novo documento: 1

Escolher Arquivo > Novo. A caixa de dilogo Novo Documento abre.

Princpios bsicos do Fireworks

75

2 3 4

Digitar a largura e altura da tela em pixels, polegadas ou centmetros. Digitar uma resoluo em pixels por polegada ou centmetros. Selecionar uma cor branca, transparente ou personalizada para a tela.
Nota: Usar a janela pop-up da caixa Cor personalizada para escolher uma cor de tela personalizada.

Clicar em OK para criar o novo documento.

Para criar um novo documento com o mesmo tamanho de um objeto na rea de transferncia: 1

Copiar o objeto para a rea de Transferncia a partir de um dos seguintes:

Outro documento do Fireworks Navegador da Web Qualquer dos aplicativos listados em Como colar no Fireworks na pgina 79
2

Escolher Arquivo > Novo. A caixa de dilogo Novo Documento abre com as dimenses de largura e altura do objeto na rea de transferncia.

3 4

Definir a resoluo e cor da tela e clicar em OK. Escolher Editar > Colar para colar o objeto da rea de transferncia no novo documento.

Abertura e importao de um arquivo


No Fireworks, possvel abrir, importar e editar imagens vetoriais e bitmap criadas em outros programas grficos, facilmente. Alm disto, o usurio pode importar imagens a partir de uma cmara digital ou digitalizador. Para mais informaes sobre como importar grficos do Photoshop, Macromedia FreeHand, CorelDraw ou Illustrator, consultar Uso do Fireworks com outros aplicativos na pgina 363.
Para abrir um documento do Fireworks: 1

Escolher Arquivo > Abrir. A caixa de dilogo Abrir exibida. Selecionar o arquivo e clicar em Abrir.
Dica: Para abrir um arquivo sem substituir a verso anterior, escolher Abrir como sem ttulo e salvar usando um nome diferente.

Abertura de um documento fechado recentemente O menu Arquivo relaciona at 10 documentos fechados recentemente no submenu Abrir recente.
Para abrir um documento fechado recentemente: 1 2

Escolher Arquivo > Abrir recente. Escolher um arquivo do submenu.

76

Captulo 3

Abertura de um grfico criado em outros aplicativos Com o Fireworks, possvel abrir arquivos de outros aplicativos ou formatos de arquivo, inclusive arquivos do Photoshop, Macromedia FreeHand, Illustrator, descompactado do CorelDRAW, WBMP, EPS, JPEG, GIF e GIF animado. Quando abrir um formato de arquivo diferente do PNG usando Arquivo > Abrir, ser criado um novo documento PNG do Fireworks baseado no arquivo aberto. Embora esse novo documento seja um arquivo PNG, o arquivo original permanecer inalterado. Para mais informaes sobre como trabalhar com Freehand, Photoshop, Illustrator e CorelDraw, consultar Uso do Fireworks com outros aplicativos na pgina 363. GIFs animados possvel trazer arquivos GIF animados para o Fireworks de duas maneiras:

Importar um GIF animado como um smbolo de animao, que permite editar e mover todos
os elementos da animao como uma nica unidade e usar o painel Biblioteca para criar novas ocorrncias do smbolo.
Nota: Quando importar um GIF animado, a configurao de retardo de moldura padronizada para 0,07 segundos. Se necessrio, usar o painel Molduras para restaurar o tempo original.

Abrir um GIF animado da mesma forma que um arquivo GIF normal. Cada elemento do GIF
colocado como uma imagem separada em sua prpria moldura do Fireworks. possvel converter o grfico em um smbolo de animao no Fireworks. Arquivos EPS O Fireworks abre a maioria dos arquivos EPS, tais como arquivos EPS do PhotoShop, como imagens bitmap planas, nas quais todos os objetos so combinados em uma nica camada. No entanto, alguns arquivos EPS exportados do Illustrator, retm suas informaes vetoriais. Quando abrir ou importar a maioria dos arquivos EPS, a caixa de dilogo Opo de arquivos EPS abrir.

Tamanho da imagem determina as dimenses da imagem e as unidades em que so exibidas suas propores. Pode-se escolher entre pixels, porcentagem, polegadas e centmetros. Resoluo indica

a resoluo, em pixels por unidade. o arquivo na mesma proporo de tamanho que o original.

Limitar propores abre

Princpios bsicos do Fireworks

77

Sem serrilhado suaviza

as bordas serrilhadas do arquivo EPS aberto.

Quando abrir ou importar arquivos EPS do Illustrator que contiverem informaes vetoriais, a caixa de dilogo Opes de arquivo vetorial abrir. Esta a mesma caixa de dilogo que aparece ao abrir ou importar arquivos do FreeHand. Para mais informaes sobre as opes nesta caixa de dilogo, consultar Importao de um grfico do FreeHand para o Fireworks na pgina 382. Arquivos WBMP O Fireworks pode abrir arquivos WBMP, arquivos de 1 bit (monocromo) otimizados para dispositivos de computao mvel. Esse formato para ser usado nas pginas Protocolo de aplicativo sem fio (WAP). possvel abrir um arquivo WBMP diretamente utilizando Arquivo > Abrir ou importar um arquivo WBMP utilizando Arquivo > Importar. Criao de arquivo PNG do Fireworks a partir de arquivos HTML O Fireworks pode abrir e importar contedo HTML criado em outros aplicativos. Quando abrir ou importar um arquivo HTML, o Fireworks reconstruir o layout e os comportamentos definidos pelo cdigo HTML, permitindo recriar pginas da Web que contenham grficos fatiados, botes JavaScript e outros tipos de interatividade. Isso permite salvar sites da Web herdados mesmo que o usurio no tenha os arquivos PNG originais. Com este recurso, possvel abrir ou importar com rapidez uma pgina da Web para atualizar grficos, alterar layout de documentos ou alterar vnculos de navegao, botes e outros elementos interativos, tudo sem ter que reconstruir a pgina do zero ou modificar seu script. Como o Fireworks exporta o contedo HTML na forma de uma tabela HTML, ele tambm determina o layout do documento para HTML importado com base em tabelas HTML. Um arquivo HTML deve conter pelo menos uma tabela para que o Fireworks possa reconstru-lo. Para mais informaes sobre HTML, consultar Exportao de HTML na pgina 352. possvel trazer contedo HTML para o Fireworks de vrias maneiras:

Abrir todas as tabelas HTML dentro de um arquivo HTML. Abrir a primeira tabela HTML que o Fireworks encontrar em um arquivo HTML. Importar a primeira tabela HTML que o Fireworks encontar em um documento do Fireworks
existente.
Nota: O Fireworks tambm pode importar documentos que utilizem codificao UTF-8 e aqueles escritos em XHTML. Arquivos XHTML normalmente tm a extenso .xhtm ou .xhtml. Para mais informaes sobre esses tipos de arquivo, Exportao de um arquivo com codificao UTF-8 na pgina 359 e Exportao de XHTML na pgina 358.

Para abrir todas as tabelas de um arquivo HTML: 1 2

Escolher Arquivo > Reconstituir tabela. Selecionar o arquivo HTML que contm as tabelas que deseja abrir e clicar em Abrir. Cada uma das tabelas se abre na sua prpria janela de documento.

Para abrir apenas a primeira tabela de um arquivo HTML: 1 2

Escolher Arquivo > Abrir. Selecionar o arquivo HTML que contm a tabela que deseja abrir e clicar em Abrir. A primeira tabela no arquivo HTML abrir em uma nova janela de documento.

78

Captulo 3

Para importar a primeira tabela de um arquivo HTML para um documento do Fireworks aberto: 1 2 3

Escolher Arquivo > Importar. Selecionar o arquivo HTML do qual deseja importar e clicar em Abrir. Clicar no ponteiro de insero onde deseja que a tabela importada aparea.

Insero de um objeto em um documento do Fireworks possvel importar, arrastar-e-soltar ou copiar e colar objetos vetoriais, imagens bitmap ou texto criado em outros aplicativos para um documento do Fireworks. Alm disto, o usurio pode importar imagens a partir de uma cmara digital ou digitalizador. Como arrastar-e-soltar Voc pode arrastar objetos vetoriais, imagens bitmap ou texto para o Fireworks a partir de qualquer aplicativo que suporte o recurso arrastar-e-soltar:

FreeHand 7 ou posterior Flash 3 ou posterior Photoshop 4 ou posterior Illustrator 7 ou posterior Microsoft Office 97 ou posterior Microsoft Internet Explorer 3 ou posterior Netscape Navigator 3 ou posterior CorelDRAW 7 ou posterior

Para arrastar-e-soltar no Fireworks:

Do outro aplicativo, arrastar o objeto ou texto para o Fireworks. Como colar no Fireworks Colar um objeto copiado de outro aplicativo para o Fireworks posiciona o objeto no centro do documento ativo. possvel copiar e colar um objeto ou texto em qualquer um destes formatos da rea de transferncia:

FreeHand 7 ou posterior Illustrator PNG PICT (Macintosh) DIB (Windows) BMP (Windows) Texto ASCII EPS WBMP TXT RTF

Princpios bsicos do Fireworks

79

Para colar no Fireworks: 1 2

No outro aplicativo, copiar o objeto ou texto que deseja colar. No Fireworks, colar o objeto ou texto no seu documento.

Localizao de um objeto colado Quando colar um objeto no Fireworks, a localizao do objeto colado depender do que for selecionado:

Se pelo menos um objeto em uma nica camada for selecionado, o objeto colado ser colocado
na frente do ou empilhado sobre objeto selecionado na mesma camada.

Se a prpria camada for selecionada e nenhum objeto ou todos os objetos forem selecionados, o
objeto colado ser colocado na frente do ou empilhado sobre primeiro objeto da mesma camada.

Se dois ou mais objetos em mais de uma camada forem selecionados, o objeto colado ser
colocado na frente do ou empilhado sobre primeiro objeto na primeira camada.

Se a Camada da Web ou um objeto na Camada da Web for selecionado, o objeto colado ser
colocado na frente de ou empilhado sobre todos os outros objetos na camada mais baixa.
Nota: A Camada da Web uma camada especial que contm todos os objetos da Web e sempre permanece no topo do painel Camadas. Para mais informaes sobre camadas, consultar Camada, mascaramento e mistura na pgina 221.

Como fazer nova amostragem de um objeto colado Quando colar um bitmap com uma resoluo diferente daquela do documento do Fireworks de destino, o Fireworks pergunta se deseja fazer uma nova amostragem do bitmap. Fazer nova amostragem adiciona pixels a ou subtrai pixels de um bitmap redimensionado para corresponder aparncia do bitmap original, da forma mais acurada possvel. Fazer nova amostragem de um bitmap com uma resoluo mais alta, normalmente provoca pouca perda de qualidade. Fazer nova amostragem com uma resoluo menor, entretanto, sempre provoca perda de dados e, em geral, reduz a qualidade.
Para fazer nova amostragem de um objeto bitmap por meio de colagem: 1 2

Copiar um bitmap para a rea de transferncia no Fireworks ou em outro programa. Escolher Editar > Colar no Fireworks. Se a imagem bitmap na rea de transferncia tiver uma resoluo diferente do documento atual, uma caixa de dilogo aparecer, solicitando a escolha entre fazer ou no uma nova amostragem.

Escolher um dos seguintes procedimentos:


Nova amostragem mantm a largura e altura originais do bitmap colado, adicionando ou subtraindo pixels conforme necessrio. No efetuar nova amostragem mantm

todos os pixels originais, o que poder tornar o tamanho relativo da imagem maior ou menor do que o esperado.

80

Captulo 3

Importao de arquivo PNG possvel importar arquivos PNG do Fireworks para a camada atual do documento ativo do Fireworks. Todos os objetos de ponto ativo e de fatia so colocados na Camada da Web do documento. Para mais informaes sobre fatias e objetos da Web, consultar Visualizao e exibio de fatias e guias de fatia na pgina 264. Para mais informaes sobre fatias, consultar Como trabalhar com uma camada na pgina 221.
Para importar um arquivo PNG para uma camada do documento do Fireworks: 1 2 3 4 5

No painel Camadas, selecionar a camada para a qual deseja importar o arquivo. Escolher Arquivo > Importar para abrir a caixa de dilogo Importar. Navegar at o arquivo a ser importado e clicar em Abrir. Na tela, posicionar o ponteiro de importao no local em que o canto superior esquerdo da imagem dever aparecer. Importar o arquivo:

Clicar para importar a imagem inteira. Arrastar o ponteiro de importao para redimensionar a imagem durante a importao.
O Fireworks mantm as propores da imagem. Importao de um digitalizador ou de uma cmera digital O scanner ou a cmera digital deve ser compatvel com TWAIN (Windows) ou oferecer suporte aos plug-ins do Photoshop Acquire (Macintosh) para poder importar imagens. As imagens importadas para o Fireworks de um digitalizador ou cmera digital abrem como novos documentos.
Nota: O Fireworks no pode importar imagens de digitalizadores ou cmeras digitais a menos que os drivers de software, mdulos e plug-ins apropriados tenham sido instalados. Para mais instrues especficas sobre instalao, configuraes e opes, consultar a documentao do mdulo TWAIN ou o plug-in do Photoshop Acquire.

No Macintosh, o Fireworks procura automaticamente plug-ins do Photoshop na pasta Plug-ins da pasta de aplicativo do Fireworks. Caso no queira colocar os plug-ins aqui, indicar um local alternativo para o Fireworks.
Nota: A localizao exata da pasta Plug-ins varia, dependendo do sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

Para direcionar o Fireworks para os plug-ins do Photoshop Acquire: 1

No Fireworks, escolher Editar > Preferncias.


Nota: No Mac OS X, escolher Fireworks > Preferncias.

2 3 4 5

Clicar na guia Pastas. Selecionar Plug-ins do Photoshop. Se a caixa de dilogo Selecionar a pasta de plug-ins do Photoshop (Windows) ou Escolher uma pasta (Macintosh) no abrir automaticamente, clicar em Procurar. Navegar at a pasta que contm os plug-ins do Photoshop.

Princpios bsicos do Fireworks

81

Para importar uma imagem a partir de um digitalizador ou cmera digital: 1 2 3

Conectar o scanner ou cmera ao computador. Instalar o software fornecido com o digitalizador ou camera se ainda no o tiver instalado. No Fireworks, escolher Arquivo > Digitalizar e, em seguida, escolher um mdulo TWAIN ou plug-in de aquisio do Photoshop que corresponda ao dispositivo a partir do qual a imagem ser importada.
Nota: Para a maioria de mdulos TWAIN ou plug-ins de aquisio do Photoshop, caixas de dilogo adicionais solicitaro que o usurio defina outras opes.

Seguir as instrues para aplicar as configuraes desejadas. A imagem importada aberta como um novo documento do Fireworks.

Salva de um arquivo do Fireworks


Quando criar ou abrir um documento no Fireworks, o nome do documento ter a extenso .png. Isso ocorrer mesmo se abrir um arquivo com uma extenso diferente como jpg, .gif ou .psd. O arquivo exibido na janela do documento do Fireworks passar a ser o arquivo de origem ou de trabalho. Todas as edies efetuadas sero aplicadas ao arquivo PNG. Utilizar um PNG do Fireworks como arquivo de origem, tem as seguintes vantagens:

O arquivo PNG de origem sempre pode ser editado. possvel voltar e fazer alteraes
adicionais mesmo depois que tiver exportado arquivos para utilizar na Web.

Se abrir um arquivo existente de um formato diferente, como JPEG, e fizer alteraes nele, o
arquivo original estar protegido. As alteraes, na verdade, so feitas em um arquivo PNG do Fireworks, mantendo inalterado o arquivo original.

Grficos complexos podem ser fatiados em partes no arquivo PNG e, em seguida, exportados
como vrios arquivos com formatos de arquivo diferentes e vrias configuraes de otimizao. Documentos do Fireworks so sempre salvos no formato PNG. Para salvar as alteraes feitas em JPEG, GIF ou outro arquivo grfico nos respectivos formatos originais, necessrio exportar o arquivo.
Nota: No Windows, quando abrir um arquivo no PNG no Fireworks, esse arquivo ainda ser identificado usando sua extenso original na janela do documento do Fireworks. Contudo, todas as edies feitas sero, na verdade, feitas no arquivo PNG do Fireworks.

Para salvar um novo documento do Fireworks: 1

Escolher Arquivo > Salvar como. A caixa de dilogo Salvar como abre. Navegar at o local desejado e digitar o nome do arquivo. No necessrio digitar a extenso, o Fireworks far isso. Clicar em Salvar.

Para salvar um documento existente do Fireworks:

Escolher Arquivo > Salvar.

82

Captulo 3

Para salvar (exportar) um documento em outro formato: 1 2

Escolher um formato de arquivo no painel Otimizar. Escolher Arquivo > Exportar para exportar o documento. Para mais informaes, consultar Otimizao e exportao na pgina 325.

Ambiente de trabalho do Fireworks


Quando abrir um documento no Fireworks MX pela primeira vez, o ambiente de trabalho ser ativado, inclusive o painel Ferramentas, Inspetor de propriedades, menus e outros painis. O painel Ferramentas, do lado esquerdo da tela, contm categorias rotuladas, inclusive bitmap, vetorial e grupos de ferramentas da Web. O Inspetor de propriedades aparece, por padro, ao longo da parte inferior do documento e exibe, inicialmente, as propriedades do documento. medida que trabalhar no documento, ele muda para exibir as propriedades de uma ferramenta recm selecionada ou de um objeto selecionado no momento. A princpio, os painis so encaixados em grupos do lado direito da tela. A janela do documento aparece no centro do aplicativo.

Princpios bsicos do Fireworks

83

Utilizao do painel Ferramentas O painel Ferramentas organizado em seis categorias: Selecionar, Bitmap, Vetorial, Web, Cores e Exibir. Nas verses anteriores do Fireworks, era necessrio alterar entre os modos bitmap e vetorial. Agora, basta escolher uma ferramenta e comear a utiliz-la. O aplicativo aplicar a ferramenta de maneira apropriada.

Alterao de uma opo de ferramenta Quando escolher uma ferramenta, o Inspetor de propriedades exibir suas opes. Algumas opes de ferramenta continuam a ser exibidas medida o usurio trabalha com a ferramenta. Para outras ferramentas como forma bsica, Caneta e Linha, o Inspetor de propriedades exibe as propriedades dos objetos selecionados. Para mais informaes sobre o Inspetor de propriedades, consultar Utilizao do Inspetor de propriedades na pgina 85.
Para exibir as opes da ferramenta usada no momento no Inspetor de propriedades:

Escolher Selecionar > Cancelar seleo para desmarcar todos os objetos.

84

Captulo 3

Para mais informaes sobre opes especficas da ferramenta, consultar as sees que introduzem as vrias ferramentas em Usando o Fireworks ou a Ajuda do Fireworks.

Seleo de uma ferramenta em um grupo de ferramentas Um pequeno tringulo no canto inferior direito de uma ferramenta no painel Ferramentas indica que essa faz parte de um grupo de ferramentas. Por exemplo, a ferramenta Retngulo faz parte do grupo bsico de ferramentas de forma, que tambm inclui as ferramentas Retngulo arredondado, Elipse e Polgono.

Para escolher uma ferramenta alternativa em um grupo de ferramentas: 1

Clicar no cone da ferramenta e manter pressionado o boto do mouse. Um menu pop-up aparece com cones de ferramentas, nomes de ferramentas e teclas de atalho. A ferramenta selecionada no momento tem uma marca de seleo esquerda do nome da ferramenta.

Arrastar o ponteiro para realar a ferramenta desejada e soltar o boto do mouse. A ferramenta aparece no painel Ferramentas e as opes da ferramenta aparecem no Inspetor de propriedades.

Utilizao do Inspetor de propriedades O Inspetor de propriedades um painel sensvel ao contexto que exibe as propriedades da seleo atual, opes da ferramenta atual ou propriedades do documento. Por padro, o Inspetor de propriedades encaixado na parte inferior do espao de trabalho. O Inspetor de propriedades pode ser aberto com metade da altura, exibindo duas fileiras de propriedades, ou com toda a altura, exibindo quatro fileiras. Tambm possvel recolher totalmente o Inspetor de propriedades, enquanto esse permanece no espao de trabalho.
Nota: A maioria dos procedimentos descritos em Usando o Fireworks pressupem que o Inspetor de propriedades seja exibido com toda a altura.

Para desencaixar o Inspetor de propriedades:

Arrastar o prendedor no canto superior esquerdo para outro local do espao de trabalho.

Princpios bsicos do Fireworks

85

Para encaixar o Inspetor de propriedades na parte inferior do espao de trabalho (somente Windows):

Arrastar a barra lateral no Inspetor de propriedades para a parte inferior da tela.


Para expandir um Inspetor de propriedades com metade da altura para toda a altura, exibindo opes adicionais:

Clicar na seta de expanso no canto inferior direito do Inspetor de propriedades. Clicar no cone na parte direita superior do Inspetor de propriedades e escolher Toda a altura
no menu Opes do Inspetor de propriedades.
Nota: No Windows, o menu Opes s estar disponvel quando o Inspetor de propriedades estiver encaixado.

Para reduzir o Inspetor de propriedades a metade da altura:

Clicar na seta de expanso no canto inferior direito do Inspetor de propriedades. Escolher Meia altura no menu Opes do Inspetor de propriedades.
Nota: No Windows, o menu Opes s estar disponvel quando o Inspetor de propriedades estiver encaixado.

Para recolher o Inspetor de propriedades quando esse estiver encaixado:

Clicar na sera de expanso ou no ttulo do Inspetor de propriedades. Escolher Recolher grupo de painis no menu Opes do Inspetor de propriedades encaixado.
Para mais informaes sobre opes especficas do Inspetor de propriedades, consultar as sees apropriadas em Usando o Fireworks ou a Ajuda do Fireworks.

Utilizao de um painel Painis so controles flutuantes que o ajudam a editar diferentes aspectos de objetos ou elementos selecionados no documento. Os painis permitem trabalhar em molduras, camadas, smbolos, amostras de cor, e muito mais. Cada painel pode ser arrastado, portanto pode-se agrupar painis em arranjos personalizados.
Os painis Misturador e Exemplos de cores gerenciam

a paleta de cores do documento atual.

Os painis Camadas e Molduras organizam a estrutura de um documento e possuem opes para criar,

excluir e manipular camadas e molduras. O painel Molduras inclui opes para criar animaes.
O painel Informaes fornece

informaes sobre as dimenses de objetos selecionados e as coordenadas exatas do ponteiro medida que movido na tela. comportamentos, determinando o que os pontos ativos e fatias devem fazer em resposta ao movimento do mouse.

O painel Comportamentos gerencia

O painel Histrico lista os comandos recentes usados, que podem ser rapidamente desfeitos ou

refeitos. Alm disso, possvel selecionar vrias aes e, em seguida, salv-las e reutiliz-las como comandos. Para mais informaes, consultar Utilizar o painel Histrico para desfazer e repetir vrias aes na pgina 101.

86

Captulo 3

O painel Biblioteca contm

smbolos grficos, smbolos de boto e smbolos de animao. possvel arrastar, com facilidade, as ocorrncias desses smbolos do painel Biblioteca para o seu documento. Alm disso, pode-se fazer alteraes globais em todas as ocorrncias modificando apenas o smbolo. Para mais informaes, consultar Uso de estilo, smbolo e URL na pgina 249.

O painel Otimizar permite gerenciar as configuraes que controlam o tamanho de um objeto e o tipo de arquivo e trabalhar com a paleta de cores do arquivo ou fatia a ser exportado. O painel Estilos permite armazenar e reutilizar combinaes de caractersticas de objeto ou escolher um estilo de estoque. O painel URL permite

criar bibliotecas que contm os URLS usados com mais freqncia.

O painel Localizar e substituir permite pesquisar e substituir elementos em um documento ou vrios documentos, tais como texto, URLs, fontes e cores. O Registro de projeto ajuda a rastrear e controlar as alteraes feitas em mltiplos arquivos quando for usado Localizar e substituir, ou no processo em lote. O painel de Respostas um novo recurso capaz de fazer download dinmico de uma ampla gama de informaes teis a partir do site da Macromedia na Web. O painel tem funes de pesquisa de palavra chave para localizar informaes na Internet a partir de vrias origens.

Organizao de grupos de painis e painis Por padro, os painis do Fireworks MX so encaixados em grupos na rea de encaixe do lado direito do espao de trabalho. possvel desencaixar grupos de painis, adicionar painis a um grupo, desencaixar painis individuais, reorganizar a ordem dos grupos de painis encaixados, e recolher e fechar grupos de painis. Tambm possvel abrir e fechar painis individuais.
Para desencaixar ou mover um painel ou grupo de painis:

Arrastar o prendedor do painel no canto superior esquerdo para fora da rea de encaixe de painel do lado direito da tela.
Para encaixar um painel ou grupo de painis:

Arrastar o prendedor do painel para a rea de encaixe de painel. Conforme arrastar um painel ou grupo de painis sobre a rea de encaixe, uma linha ou retngulo de visualizao de posio mostra onde ele ser posicionado entre os grupos.
Para recolher ou expandir um painel ou grupo de painis, seguir um destes procedimentos:

Clicar no ttulo do painel ou grupo de painis.


Nota: A barra de ttulo ainda ser visviel quando o painel ou grupo de painis for recolhido.

Clicar na seta de expanso no canto superior esquerdo do painel ou grupo de painis.


Para separar um painel de um grupo de painis:

Arrastar o painel para fora do grupo de painis.


Para adicionar um painel a um grupo de painis aberto:

Arrastar o prendedor do painel at a rea abaixo do nome do grupo de painis.

Princpios bsicos do Fireworks

87

Para renomear um grupo de painis: 1 2

Clicar no cone na parte superior direita do grupo de painis e escolher Renomear grupo de painis no menu Opes. Digitar o novo nome.

Para retornar os painis s posies padro para a resoluo da sua tela, seguir um destes procedimentos:

Escolher Comandos > Definies de layout de painel > 800 x 600. Escolher Comandos > Definies de layout de painel > 1024 x 768. Escolher Comandos > Definies de layout de painel > 1280 x 1024.
Para abrir um painel:

Escolher o nome do painel no menu Janela.


Dica: Uma marca de seleo ao lado do nome de um painel no menu Janela indica que o painel est aberto.

Para fechar um painel, seguir um destes procedimentos:

Escolher o nome do painel no menu Janela. Clicar no boto Fechar na barra de ttulo do painel quando o painel estiver desencaixado.
Para ocultar todos os painis e o Inspetor de propriedades:

Escolher Exibir > Ocultar painis. Para exibir os painis ocultos, escolher Exibir > Ocultar painis novamente.
Nota: Painis que estiverem ocultos ao escolher Ocultar painis permanecero ocultos quando o usurio desmarcar esse comando.

Configurao de uma opo de painel Em geral, possvel definir as opes em um painel usando menus pop-up, paletas de cores, controles deslizantes ou discos. Algumas opes apresentam caixas de texto nas quais possvel digitar texto ou valores.
Para alterar uma opo com um menu pop-up: 1 2

Clicar na opo. Alterar o valor:

Selecionar uma opo ou amostra de cor. Arrastar o controle deslizante ou disco. Digitar a primeira letra da opo que deseja escolher e pressionar a letra repetidamente para
percorrer todas as opes que comearem com aquela letra (somente Windows).
Para inserir informaes em uma caixa de texto de painel: 1 2 3

Clicar dentro da caixa de texto. Digitar um valor. Pressionar Enter.

88

Captulo 3

Utilizao do menu Opes do painel ou grupo de painis Cada painel ou grupo de painis tem um menu Opes que relaciona uma gama de opes especficas ao painel ou grupo de painis ativo. O Inspetor de propriedades tambm apresenta um menu Opes (exceto no Windows quando o Inspetor de propriedades estiver desencaixado).

Para escolher uma opo no menu Opes de um painel ou grupo de painis 1 2

Clicar no cone do menu Opes no canto superior direito do painel ou grupo de painis para abrir o menu. Clicar para escolher um item de menu.

Salva de um layout de painel possvel salvar o layout de painis usando o menu Comandos. Desta maneira, da prxima vez que abrir o Fireworks, os painis estaro organizados na mesma posio.
Para salvar o layout de um painel: 1 2

Escolher Comandos > Salvar layout de painel. Nomear o layout de painel e clicar em OK.

Para abrir um layout de painel salvo:

Escolher Comandos > Definies de layout de painel e, em seguida, escolher um layout de painel no submenu.

Princpios bsicos do Fireworks

89

Sobre o boto Exportao rpida O boto Exportao rpida permite exportar os arquivos do Fireworks para vrios aplicativos da Macromedia, que incluem Dreamweaver, Flash, Director e FreeHand. Alm disso, possvel exportar os arquivos para Photoshop, FrontPage, Adobe GoLive e Illustrator, ou visualiz-los no navegador de sua preferncia. Para mais informaes, consultar Como usar o boto Exportao rpida na pgina 361.

Abertura e movimentao de uma barra de ferramentas (somente no Windows) O Fireworks MX para Windows inclui duas barras de ferramentas que contm comandos comuns do Fireworks.
Para mostrar ou ocultar uma barra de ferramentas:

Escolher Janela > Barras de ferramentas e, em seguida, escolher uma barra de ferramentas.
Para desencaixar uma barra de ferramentas:

Arrastar a barra de ferramentas para fora do seu local de encaixe.


Nota: Se a barra de ferramentas estiver desencaixada, clicar no boto Fechar do lado superior direito da barra para fech-la.

Para encaixar uma barra de ferramentas:

Arrastar a barra de ferramentas para uma rea de encaixe no topo, na base, esquerda ou direita da janela do aplicativo at que o retngulo de visualizao de posio aparea. Navegao e exibio de um documento possvel controlar a ampliao, o nmero de exibies e o modo de exibio do documento. Alm disso, pode facilmente girar um documento, o que ser til se aumentar a exibio e no puder mais ver a tela inteira.

90

Captulo 3

Zoom e giro O Fireworks permite aumentar e reduzir em uma porcentagem de ampliao predefinida ou definida pelo usurio.

Ferramenta Zoom Ferramenta Mo

Menu pop-up Zoom

Para aumentar usando incrementos predefinidos, seguir um destes procedimentos:

Escolher a ferramenta Zoom e clicar dentro da janela do documento para especificar o novo
ponto central. Cada clique ampliar a imagem para o prximo nvel de ampliao predefinido.

Escolher uma configurao de zoom no menu pop-up Definir ampliao na base da janela do
documento.

Escolher Aumentar ou uma ampliao predefinida no menu Exibir.


Para reduzir usando incrementos predefinidos, seguir um destes procedimentos:

Escolher a ferramenta Zoom e clicar com Alt (Windows) ou clicar com Option (Macintosh)
dentro da janela do documento. Cada clique reduz a exibio para a prxima porcentagem predefinida.

Escolher uma configurao de zoom no menu pop-up Definir ampliao na base da janela do
documento.

Escolher Reduzir ou uma ampliao predefinida no menu Exibir.


Princpios bsicos do Fireworks 91

Para aumentar uma rea especfica sem a limitao de incrementos de zoom predefinidos: 1 2

Escolher a ferramenta Zoom. Arrastar a parte da imagem que deseja ampliar. O tamanho da caixa de seleo de zoom determina a porcentagem precisa de ampliao, que exibida na caixa de texto Definir ampliao.
Nota: possvel inserir uma porcentagem de ampliao na caixa de texto Definir ampliao.

Para reduzir baseado em uma rea especfica:

Arrastar com a tecla Alt (Windows) ou com Option (Macintosh) uma rea de seleo com a ferramenta Zoom.
Para retornar ampliao de 100%:

Clicar duas vezes na ferramenta Zoom no painel Ferramentas.


Para enquadrar o documento: 1 2

Escolher a ferramenta Mo. Arrastar o ponteiro Mo. medida que gira a tela, o enquadramento da exibio continua de maneira que seja possvel trabalhar com os pixels ao longo da borda da tela.

Para ajustar o documento na exibio atual:

Clicar duas vezes na ferramenta Mo. Utilizao de um modo de exibio para gerenciar o espao de trabalho Os botes do modo de exibio na rea de Exibio do painel Ferramentas permitem escolher entre os trs modos de exibio para controlar o layout do espao de trabalho:
Modo de tela padro

a exibio padro da janela do documento

Modo tela cheia com menus Modo tela cheia

uma exibio maximizada da janela do documento contraposta a um fundo cinza com menus, barras de ferramentas, barras de rolagem e painis visveis.

uma exibio maximizada da janela do documento contraposta a um fundo preto sem menus, barras de ferramentas ou barras de ttulo. visveis.

Para alterar os modos de exibio, seguir um destes procedimentos:

Para alterar para o modo Tela cheia com menus, clicar no boto Modo tela cheia com menus
no painel Ferramentas.

Para alterar para o Modo tela cheia, clicar no boto Modo tela cheia no painel Ferramentas. Para retornar ao Modo de tela padro, clicar com o boto direito do mouse (Windows) ou
clicar com Control (Macintosh) na janela do documento e selecionar Sair do modo de tela cheia, ou clicar no boto Modo de tela padro no painel Ferramentas.

92

Captulo 3

Exibio de mltiplas exibies de documento Usar mltiplas exibies para ver um documento em diferentes ampliaes simultaneamente. Alteraes feitas em uma exibio refletiro automaticamente em todas as outras exibies do mesmo documento.
Para abrir uma exibio adicional do documento em uma configurao de zoom diferente: 1 2

Escolher Janela > Nova janela. Escolher uma configurao de zoom para a nova janela.

Para colocar lado a lado as exibies do documento:

Escolher Janela > Lado a lado horizontal ou Janela > Lado a lado vertical.
Para fechar uma janela de exibio de documento:

Clicar no boto Fechar da janela. Controle de redesenho do documento Os modos de exibio afetam a apresentao dos documentos na tela, mas no seus dados de objeto ou a qualidade da sada.
Para controlar o redesenho do documento:

Escolher Exibir > Tela inteira. Quando Tela inteira estiver selecionado, o Fireworks exibir o documento em todas as cores disponveis com todos os detalhes. Quando Tela inteira estiver desselecionado, o Fireworks exibir o traado com 1 pixel de largura sem preenchimento e imagens com um X dentrodelas.

Modos de exibio e de rascunho


Para exibir um documento como apareceria em uma plataforma diferente:

No Windows, escolher Exibir > Macintosh Gamma. No Macintosh, escolher Exibir > Windows Gamma.
O Fireworks mostra a visualizao da aparncia do documento na outra plataforma de comutador. Por exemplo, ao trabalhar na plataforma Windows, usar esse comando para visualizar a aparncia de um documento na plataforma Macintosh.

Princpios bsicos do Fireworks

93

Utilizao do Mini-iniciador O Mini-iniciador contm cones para abrir e fechar os painis usados com maior freqncia, inclusive os painis Misturador de cores e Informaes, Otimizar, Camadas, Biblioteca, Estilos e Comportamentos. Quando ativado, o Mini-iniciador est localizado na base da janela do documento. Por padro, o Mini-iniciador no visvel.

Para exibir o Mini-iniciador: 1 2

Escolher Editar > Preferncias. Na guia Geral, escolher Mostrar cones de guias na seo Espao de trabalho e clicar em OK.

Para abrir ou fechar um painel a partir do Mini-iniciador:

Clicar no cone correspondente do painel.


Nota: O fundo do cone do painel fica realado enquanto o painel estiver aberto.

Utilizao da barra de status (somente Windows) Quando ativada, a barra de status exibida na base da janela de aplicativo do Fireworks. Ela proporciona dicas e informaes teis sobre os objetos e ferramentas selecionados. Por padro, a barra de status est desativada.
Para ativar ou desativar a barra de status:

Escolher Exibir > Barra de status.


Para usar a barra de status:

Selecionar um objeto ou ferramenta, ou mover o ponteiro sobre uma ferramenta no painel Ferramentas. As informaes sobre o objeto ou operao selecionada so exibidas na barra de status.

Alterao da tela
Quando criar um novo documento do Fireworks, necessrio especificar suas caractersticas. Pode-se modificar o tamanho e a cor da tela e alterar a resoluo da imagem a qualquer momento usando o menu Modificar ou o Inspetor de propriedades. medida que trabalha com o documento, tambm possvel girar a tela e aparar partes indesejadas. Alterao de tamanho, cor e resoluo da tela O Fireworks facilita a alterao do tamanho da tela, da cor da tela e da resoluo da imagem.
Para alterar o tamanho da tela: 1

Seguir um destes procedimentos:

Escolher Modificar > Tela > Tamanho da tela. Escolher Selecionar > Cancelar seleo, clicar na ferramenta Ponteiro para exibir as propriedades
do documento no Inspetor de propriedades e, em seguida, clicar no boto Tamanho da tela.

94

Captulo 3

2 3

Digitar as novas dimenses nas caixas de texto Largura e Altura. Clicar em um boto ncora para especificar quais lados da tela o Fireworks adicionar ou excluir e, em seguida, clicar em OK.
Nota: Por padro, a ncora central selecionada, indicando que alteraes no tamanho da tela foram feitas em todos os lados.

Para alterar a cor da tela a partir do menu Modificar: 1 2

Escolher Modificar > Tela > Cor da tela. Escolher Branco, Transparente ou Personalizada. Se escolher Personalizada, clicar em uma cor na janela pop-up de amostras.

Para selecionar a cor da tela a partir do Inspetor de propriedades: 1

Escolher Selecionar > Cancelar seleo, clicar na ferramenta Ponteiro para exibir as propriedades do documento no Inspetor de propriedades e, em seguida, clicar na caixa de cores Tela. Selecionar uma cor na janela pop-up de amostras ou clicar no conta-gotas em uma cor em qualquer lugar na tela. Para escolher uma tela transparente, clicar no boto Nenhum na janela pop-up de amostras.

Para redimensionar um documento e todo o seu contedo: 1

Seguir um destes procedimentos: propriedades do documento no Inspetor de propriedades e, em seguida, clicar no boto Tamanho da imagem no Inspetor de propriedades.

Escolher Selecionar > Cancelar seleo, clicar na ferramenta Ponteiro para exibir as Escolher Modificar > Tela > Tamanho da imagem.
A caixa de dilogo Tamanho da imagem aberta.

Nas caixas de texto Dimenses do pixel, digitar novas dimenses horizontal e vertical. possvel alterar as unidades de medida. Se Amostrar imagem novamente estiver desmarcado, ser possvel alterar a resoluo ou o tamanho de impresso, mas no as dimenses do pixel.

Princpios bsicos do Fireworks

95

3 4

Nas caixas de texto Tamanho da impresso, digitar as dimenses horizontal e vertical da imagem para imprimir. Na caixa de texto Resoluo, digitar uma nova resoluo para a imagem. Tambm possvel escolher entre as unidades pixels/polegada e pixels/cm, ou selecionar Amostrar imagem novamente. Alterar a resoluo tambm altera as dimenses de pixel.

Seguir um destes procedimentos: escolher Limitar propores.

Para manter a mesma proporo entre as dimenses horizontal e vertical do documento, Cancelar a seleo Limitar propores para redimensionar largura e altura de forma
independente.
6 7

Selecionar Amostrar imagem novamente para adicionar ou remover pixels ao redimensionar a imagem, para proporcionar uma aparncia aproximadamente igual em um tamanho diferente. Clicar em OK.

Sobre fazer uma nova amostragem Fazer uma nova amostragem no Fireworks difere da maioria dos aplicativos de edio de imagens. O Fireworks contm objetos de imagem bitmap baseados em pixels e objetos vetoriais baseados em traados.

Quando for feita uma nova amostragem de um objeto bitmap, devero ser adicionados ou
removidos pixels do objeto para aument-lo ou diminu-lo.

Quando for feita uma nova amostragem de um objeto vetorial, ocorrer pouca perda de
qualidade porque o traado ser redesenhado matematicamente com um tamanho maior ou menor. Como os atributos de objetos vetoriais no Fireworks so visveis como pixels, alguns traos ou preenchimentos ficam ligeiramente diferentes depois da nova amostragem porque os pixels que compem o trao ou preenchimento devem ser redesenhados.
Nota: Guias, objetos de ponto ativo e objetos de fatia so redimensionados quando o tamanho da imagem do documento for alterado.

Redimensionar objetos bitmap sempre apresenta um problema sui generis adicionar ou remover pixels para redimensionar a imagem, ou alterar o nmero de pixels por polegada ou centmetro? Pode-se alterar o tamanho de uma imagem bitmap ajustando a resoluo ou fazendo uma nova amostragem da imagem. Ao ajustar a resoluo, o usurio na verdade altera o tamanho dos pixels na imagem para que mais ou menos pixels se encaixem em um determinado espao. O ajuste da resoluo sem fazer uma nova amostragem no resulta em perda de dados.
Aumentar a resoluo, ou adicionar pixels para aumentar a imagem, pode causar perda de qualidade porque os pixels adicionados nem sempre correspondem imagem original. Reduzir a resoluo ou

remover pixels para diminuir a imagem, sempre provoca perda de qualidade porque pixels esto sendo descartados para redimensionar a imagem. A perda de dados na imagem outro efeito colateral da reduo de resoluo.

96

Captulo 3

Giro da tela Girar a tela til quando uma imagem importada est invertida ou de lado. possvel girar a tela em 180 graus, 90 graus no sentido horrio ou 90 graus no sentido anti-horrio. Quando girar a tela, todos os objetos do documento giram.
Para girar a tela, seguir um destes procedimentos:

Escolher Modificar > Tela > Girar 180. Escolher Modificar > Tela > Girar 90 SH. Escolher Modificar > Tela > Girar 90 SAH.
Como aparar a tela Se o documento tiver espao adicional em volta do contedo da tela, ser possvel aparar a tela. Tambm possvel remover o espao vazio da tela cortando o documento. Para mais informaes sobre como cortar, consultar Corte de um documento na pgina 98.

Original; Tela aparada


Para aparar a tela:

Escolher Modificar > Tela > Aparar tela. As partes da tela que se estenderem alm dos pixels extremos do documento sero removidos automaticamente. Cada borda da tela cortada at as bordas do objeto ou objetos no documento. Se o documento tiver mais de uma moldura, o recurso Aparar tela far o corte para incluir todos os objetos em todas as molduras, e no apenas a moldura atual. Ajuste da tela possvel expandir a tela para encaixar objetos que ultrapassem seus limites.
Para ajustar a tela:

Escolher Modificar > Tela > Ajustar tela.

Princpios bsicos do Fireworks

97

Corte de um documento Com a ferramenta Cortar, possvel excluir partes indesejadas de um documento. A tela redimensionada para ajustar-se a uma rea definida. Por padro, o corte exclui objetos que ultrapassem os limites da tela. Pode-se manter objetos fora da tela alterando a preferncia antes de cortar.
Para cortar um documento: 1 2 3

Escolher a ferramenta Cortar no painel Ferramentas ou escolher Editar > Cortar documento. Arrastar uma caixa delimitadora na tela. Ajustar as alas de corte at que a caixa delimitadora envolva a rea do documento que deseja manter. Clicar duas vezes dentro da caixa delimitadora ou pressionar Enter para cortar o documento. A tela redimensionada para a rea definida e os objetos alm das bordas da tela so excludos.
Dica: possvel manter objetos fora da tela cancelando a seleo Excluir objetos ao cortar na guia Edio da caixa de dilogo Preferncias antes de cortar. Para mais informaes sobre preferncias, consultar Configurao de preferncias na pgina 421.

Utilizao de um menu contextual Os menus contextuais permitem acessar rapidamente comandos importantes para a seleo atual.

Para exibir um menu contextual:

Clicar com o boto direito do mouse (Windows) ou clicar com Control (Macintosh) em um item selecionado na janela do documento.

98

Captulo 3

Utilizao de rguas, guias e a grade possvel usar rguas e guias para posicionar objetos da forma mais precisa possvel e para ajudlo a desenhar. possvel colocar guias no documento e alinhar objetos s guias ou ativar a grade do Fireworks e alinhar objetos a ela.

Utilizao de uma rgua As rguas o ajudam a medir, organizar e planejar o layout do seu trabalho. Como as imagens do Fireworks tm como objetivo a utilizao na Web, onde os grficos so medidos em pixels, as rguas no Fireworks sempre medem em pixels, independentemente da unidade de medida usada ao criar o documento.
Para mostrar e ocultar rguas:

Escolher Exibir > Rguas.

Princpios bsicos do Fireworks

99

Rguas vertical e horizontal aparecem ao longo das margens da janela do documento.

Utilizao de uma guia Guias so linhas que o usurio arrasta na tela do documento a partir das rguas. Elas servem de apoio ao desenho para ajud-lo a colocar e alinhar objetos. Usar as guias para marcar partes importantes do documento, como as margens, o ponto central do documento e reas em que deseja executar um trabalho preciso. Para ajud-lo a alinhar objetos, o Fireworks permite alinhar objetos s guias. possvel evitar que as guias sejam movidas acidentalmente bloqueando-as.
Nota: Guias no permanecem em uma camada, tampouco so exportadas com um documento. Elas so apenas ferramentas de desenho.

O Fireworks tambm tem guias de fatia, que permitem fatiar um documento para usar na Web. Contudo, guias normais de imagem so diferentes de guias de fatia. Para mais informaes sobre guias de fatia, consultar Movimentao de guias de fatia para editar fatias na pgina 267.
Para criar uma guia horizontal ou vertical: 1 2

Clicar e arrastar a rgua correspondente. Posicionar a guia na tela e soltar o boto do mouse.
Nota: possvel reposicionar a guia arrastando-a novamente.

Para mover uma guia para uma posio especfica: 1 2

Clicar duas vezes na guia. Digitar a nova posio na caixa de dilogo Mover guia e clicar em OK.

100 Captulo 3

Para mostrar ou ocultar guias:

Escolher Exibir > Guias > Mostrar guias.


Para alinhar objetos s guias:

Escolher Exibir > Guias > Alinhar s guias.


Para alterar cores da guia: 1 2

Escolher Exibir > Guias > Editar guias. Selecionar a nova cor de guia na janela pop-up da caixa de cores e clicar em OK.

Para bloquear ou desbloquear todas as guias:

Escolher Exibir > Guias > Bloquear guias.


Para remover uma guia:

Arrastar a guia para fora da tela. Utilizao da grade A grade do Fireworks exibe um sistema de linhas horizontais e verticais na tela. A grade til para posicionar precisamente objetos. Alm disso, possvel exibir, editar, redimensionar e alterar a cor da grade.
Nota: A grade no permanece em uma camada, tampouco exportada com um documento. Ela meramente uma ferramentade desenho.

Para mostrar e ocultar a grade:

Escolher Exibir > Grade > Mostrar grade.


Para alinhar objetos grade:

Escolher Exibir > Grade > Alinhar grade.


Para alterar a cor da grade: 1 2

Escolher Exibir > Grade > Editar grade. Selecionar a nova cor da grade na janela pop-up da caixa de cores e clicar em OK.

Para alterar o tamanho das clulas da grade: 1 2

Escolher Exibir > Grade > Editar grade. Digitar os valores apropriados nas caixas de texto de espaamento horizontal e vertical e clicar em OK.

Utilizar o painel Histrico para desfazer e repetir vrias aes Com o painel Histrico, pode-se exibir, modificar e repetir as aes tomadas para criar o documento. O painel Histrico lista as aes mais recentes executadas no Fireworks, at atingir o nmero especificado no campo Etapas de desfazer na caixa de dilogo Preferncias do Fireworks. Com o painel Histrico, possvel fazer um dos seguintes:

Desfazer e refazer rapidamente as aes mais recentes.

Princpios bsicos do Fireworks 101

Escolher aes recm executadas no painel Histrico e clicar em Reproduzir para repeti-las. Copiar comandos selecionados para a rea de transferncia como o equivalente de texto
JavaScript.

Salvar um grupo de aes recm executadas como um comando personalizado e escolh-lo no


menu Comando para reutilizar o grupo como um comando simples. Para mais informaes sobre como criar comandos usando o painel Histrico, consultar Scripts com o painel Histrico na pgina 416.

Para desfazer e refazer aes: 1 2

Escolher Janela > Histrico para abrir o painel Histrico. Arrastar o marcador para cima e para baixo.

Para repetir aes: 1 2

Executar as aes. Para realar as aes a serem repetidas no painel Histrico, seguir um destes procedimentos:

Clicar em uma ao para real-la. Clicar com Control (Windows) ou clicar com Command (Macintosh) para realar vrias aes
individuais.

Clicar com Shift para realar um intervalo contnuo de aes.


3

Clicar no boto Reproduzir na parte inferior do painel Histrico.

Para salvar aes para serem reutilizadas: 1 2 3

Realar as aes a serem salvas no painel Histrico. Clicar no boto Salvar na parte inferior do painel. Digitar o nome do comando e clicar em OK.

Para usar o comando personalizado salvo:

Escolher o nome do comando no menu Comandos.

102 Captulo 3

CAPTULO 4 Seleo e transformao de um objeto

medida que trabalhar no Macromedia Fireworks MX, ser necessrio manipular objetos bitmap e vetoriais, blocos de texto, fatias e pontos ativos, e reas de pixels. Com a utilizao das ferramentas de seleo e transformao possvel mover, copiar, excluir, girar, dimensionar ou inclinar objetos. Em documentos com objetos mltiplos, o usurio pode organizar os objetos empilhando-os, agrupando-os e alinhando-os.

Seleo de um objeto
Antes de executar algum procedimento em qualquer objeto da tela, necessrio selecion-lo. Isso se aplica a um objeto vetorial, traado ou pontos; um bloco de texto, uma palavra ou letra; uma fatia ou um ponto ativo; uma ocorrncia; ou um objeto bitmap. possvel usar qualquer um destes recursos para selecionar objetos:
O painel Camadas exibe cada objeto. possvel clicar em um objeto no painel Camadas para ele ser selecionado quando for aberto e as camadas serem estendidas. Para mais informaes, consultar Captulo 10, Camada, mascaramento e mistura, na pgina 221.
A ferramenta Ponteiro seleciona objetos quando se clicar neles ou quando arrastar uma rea de seleo ao redor dos objetos. A ferramenta Selecionar secundrio seleciona um objeto individual dentro de um grupo ou os pontos de um objeto vetorial. A ferramenta Selecionar atrs seleciona um objeto que est atrs de outro. A ferramenta rea de exportao seleciona uma rea a ser exportada como um arquivo separado.

Para informaes sobre como selecionar reas especficas de pixels dentro de uma imagem bitmap, consultar Seleo de um pixel na pgina 106. Uso da ferramenta Ponteiro A ferramenta Ponteiro seleciona objetos quando o usurio clica neles ou quando arrasta uma rea de seleo ao redor de parte dos objetos.
Para selecionar um objeto por meio de um clique, seguir um destes procedimentos:

Mover a ferramenta Ponteiro sobre o traado ou caixa delimitadora do objeto e dar um clique. Clicar na borda ou preenchimento do objeto. Selecionar o objeto no painel Camadas.
103

Dica: Para visualizar o que ser selecionado ao clicar em um objeto abaixo do ponteiro da tela, necessrio selecionar a opo Realar mouse na guia Edio da caixa de dilogo Preferncias. Para mais informaes sobre preferncias, consultar Configurao de preferncias na pgina 421.

Para selecionar objetos arrastando:

Arrastar a ferramenta Ponteiro para incluir um ou mais objetos na rea de seleo.

Uso da ferramenta Selecionar secundrio Usar a ferramenta Selecionar secundrio para selecionar, mover ou modificar pontos em um traado vetorial ou em um objeto que pertena a um grupo.
Para mover ou modificar objetos com a ferramenta Selecionar secundrio: 1 2

Selecionar a ferramenta Selecionar secundrio. Fazer uma seleo. As alas de seleo sero exibidas. Seguir um destes procedimentos:

Para modificar um objeto, arrastar um dos pontos ou alas de seleo. Para mover todo o objeto, arrastar em qualquer parte do objeto, exceto um ponto ou ala de
seleo. Uso da ferramenta Selecionar atrs Ao trabalhar em grficos que contm vrios objetos, possvel usar a ferramenta Selecionar atrs para selecionar um objeto que esteja oculto ou obscurecido por outros objetos.
Para selecionar um objeto que est atrs de outros objetos:

Clicar repetidamente na ferramenta Selecionar atrs sobre os objetos empilhados, passando pelos objetos do topo base na ordem de empilhamento, at selecionar o objeto desejado.
Nota: Tambm possvel selecionar um objeto de difcil acesso clicando no painel Camadas quando as camadas forem expandidas.

Informaes de seleo no Inspetor de propriedades Sempre que o usurio seleciona um objeto, o Inspetor de propriedades identifica a seleo. A rea superior esquerda do Inspetor de propriedades contm as seguintes informaes sobre a seleo:

Uma descrio do item em inspeo

104 Captulo 4

Uma caixa de texto para digitar o nome do item


Nota: O nome aparecer na barra de ttulo do documento sempre que esse item for selecionado. Para fatias e botes, o nome o nome do arquivo quando exportado.

O nmero de objetos quando mais de um objeto for selecionado


Nota: Se a barra de status estiver ativada (apenas Windows), os objetos selecionados tambm sero identificados na barra de status na base da janela do documento.

O Inspetor de propriedades tambm exibe informaes e configuraes sobre o tipo de objeto selecionado. Por exemplo, quando se seleciona um traado vetorial, o Inspetor de propriedades exibe as propriedades do traado vetorial como largura do trao e cor. Modificao de uma seleo Aps selecionar um nico objeto, possvel adicionar objetos seleo e cancelar a seleo de objetos selecionados. Com um nico comando possvel selecionar ou cancelar toda a seleo em cada uma das camadas de um documento. Alm disso, pode-se ocultar o caminho de seleo para editar um objeto selecionado enquanto exibe a forma como ele aparecer na Web ou impresso.
Para adicionar a uma seleo:

Manter a tecla Shift pressionada enquanto clica em objetos adicionais com a ferramenta Ponteiro, Selecionar secundrio ou Selecionar atrs.
Para cancelar a seleo de um objeto e deixar outros objetos selecionados:

Manter a tecla Shift pressionada, enquanto clica no objeto selecionado.


Para selecionar tudo em todas as camadas do documento:

Escolher Selecionar > Selecionar tudo.


Nota: Selecionar tudo no seleciona objetos ocultos.

Para cancelar a seleo de todos os objetos selecionados:

Escolher Selecionar > Cancelar seleo.


Nota: Alm disso, necessrio cancelar a seleo da preferncia Edio de camada nica para selecionar todos os objetos visveis em todas as camadas de um documento. Quando a preferncia Edio de camada nica for escolhida, apenas objetos da camada atual so selecionados. Para mais informaes, consultar Organizao de uma camada na pgina 224.

Para ocultar a avaliao da seleo de traado de um objeto selecionado:

Selecionar Exibir > Ocultar bordas.


Nota: Usar o painel Camadas ou o Inspetor de propriedades, para identificar o objeto selecionado quando o contorno e os pontos estiverem ocultos.

Seleo e transformao de um objeto 105

Para ocultar objetos selecionados:

Selecionar Exibir > Ocultar seleo.


Nota: Os objetos ocultos no so exportados. (Isso no se aplica a objetos de ponto ativo e de fatia na Camada da Web.)

Para exibir todos os objetos:

Selecionar Exibir > Mostrar tudo.


Dica: Para ocultar objetos selecionados ou no, clicar ou arrastar ao longo da coluna do olho no painel Camadas.

Seleo de um pixel
possvel editar pixels na tela inteira ou escolher uma das ferramentas de seleo para restringir a edio a uma determinada rea da imagem:
A ferramenta Moldura da caixa de seleo seleciona uma rea retangular de pixels em uma imagem.

A ferramenta Moldura oval da caixa de seleo seleciona uma rea elptica de pixels em uma imagem.

A ferramenta Lao seleciona uma rea de pixels de forma livre em uma imagem.

A ferramenta Lao polgono seleciona uma rea de pixels de forma livre com borda reta em uma imagem.

A ferramenta Varinha mgica seleciona uma rea de pixels coloridos semelhantes em uma imagem.

As ferramentas de seleo de pixel desenham uma moldura de seleo que define a rea de pixels selecionada. Depois de desenhar a moldura de seleo, possvel manipul-la por meio da movimentao, adio ou colocao de outra seleo. Voc pode editar pixels dentro da seleo, aplicar filtros aos pixels ou apagar pixels sem afetar os pixels que ultrapassam a seleo. Alm disso, pode criar uma seleo de pixels flutuante que pode ser editada, movida, recortada ou copiada. Opes da ferramenta de seleo de bitmap Quando selecionar a ferramenta Moldura da caixa de seleo, Moldura oval da caixa de seleo, Lao, Lao polgono ou Varinha mgica, o Inspetor de propriedades exibe trs opes de borda para a ferramenta:
Acentuada cria

uma seleo de moldura com uma borda definida. bordas dentadas na seleo de moldura. suavizar a borda da seleo de pixels.

Suavizao de serrilhado evita Enevoar permite

Antes de criar uma seleo enevoada com a ferramenta Seleo, definir a opo Enevoar. possvel enevoar as selees existentes com o comando Enevoar do menu Selecionar. Para mais informaes, consultar Enevoamento de uma seleo de pixel na pgina 113. Quando selecionar a ferramenta Moldura da caixa de seleo, Moldura oval da caixa de seleo ou Varinha mgica, o Inspetor de propriedades tambm exibe trs opes de estilo:
Normal permite

criar uma moldura de seleo em que a altura e a largura so independentes. a altura e a largura a propores definidas.

Proporo fixa restringe

106 Captulo 4

Tamanho fixo estabelece

a altura e a largura em uma dimenso definida.

Nota: A ferramenta Varinha mgica tambm possui configurao de Tolerncia. Para mais informaes, consultar Seleo de uma rea com cores semelhantes na pgina 109.

Criao de moldura de seleo de pixel As ferramentas Moldura da caixa de seleo, Moldura oval da caixa de seleo e Lao na seo Bitmap do painel Ferramentas permitem a seleo de reas de pixel de uma imagem bitmap arrastando uma moldura em volta delas.
Para selecionar uma rea retangular ou elptica de pixels: 1 2 3

Selecionar a ferramenta Moldura da caixa de seleo ou Moldura oval da caixa de seleo. Definir as opes Estilo e Borda no Inspetor de propriedades. Para mais informaes, consultar Opes da ferramenta de seleo de bitmap na pgina 106. Arrastar para desenhar uma moldura de seleo, que define a seleo de pixel.

Manter a tecla Shift pressionada enquanto arrasta a ferramenta Moldura da caixa de seleo ou Moldura oval da caixa de seleo para desenhar molduras quadradas ou circulares. Para desenhar uma moldura a partir de um ponto central, cancelar a seleo de outras molduras ativas e, em seguida, manter a tecla Alt (Windows) ou Option (Macintosh) pressionada enquanto desenha.
Para selecionar uma rea de forma livre de pixels: 1 2

Selecionar a ferramenta Lao. Selecionar uma opo de Borda no Inspetor de propriedades. Para mais informaes, consultar Opes da ferramenta de seleo de bitmap na pgina 106.

Seleo e transformao de um objeto 107

Arrastar o ponteiro em torno dos pixels que deseja selecionar.

Plotagem de um ponto para criar uma seleo de moldura A ferramenta Lao polgono permite a seleo de determinados pixels em uma imagem bitmap clicando vrias vezes em volta do permetro da rea de pixel a ser selecionada.
Para selecionar uma rea poligonal de pixels: 1 2 3

Selecionar a ferramenta Lao polgono. Selecionar uma opo de Borda no Inspetor de propriedades. Para mais informaes, consultar Opes da ferramenta de seleo de bitmap na pgina 106. Clicar para plotar pontos em volta do permetro do objeto ou rea para contornar a seleo. Manter a tecla Shift pressionada para restringir os segmentos da moldura do Lao polgono a incrementos de 45 graus.

Seguir um destes procedimentos para fechar o polgono:

Clicar no ponto inicial. Clicar duas vezes no espao de trabalho.

108 Captulo 4

Seleo de uma rea com cores semelhantes A ferramenta Varinha mgica permite a seleo de reas de pixels com cores semelhantes. Pelo ajuste das opes Borda e Tolerncia da Varinha mgica no Inspetor de propriedades, possvel controlar a forma como essa ferramenta seleciona os pixels.
Para selecionar uma rea de pixels de faixas de cores semelhantes: 1 2 3

Selecionar a ferramenta Varinha mgica. Selecionar uma opo de Borda no Inspetor de propriedades. Para mais informaes, consultar Opes da ferramenta de seleo de bitmap na pgina 106. Definir o nvel de tolerncia arrastando o controle deslizante de tolerncia no Inspetor de propriedades. Tolerncia representa a faixa de tons de cores que so selecionadas quando um pixel clicado com a Varinha mgica. Se digitar 0 e clicar em um pixel, apenas os pixels adjacentes que tenham exatamente o mesmo tom sero selecionados. Se digitar 65, uma faixa mais ampla de tons ser selecionada.

Clicar na rea de cor que deseja selecionar. Uma moldura aparecer em torno da faixa de pixels selecionada.

Pixels selecionados com um nvel de tolerncia mais baixo (acima), depois uma tolerncia mais alta (abaixo)

Seleo e transformao de um objeto 109

Para selecionar cores semelhantes no documento: 1 2

Selecionar uma rea de cor com a ferramenta Moldura da caixa de seleo ou Lao, ou com a Varinha mgica. Escolher Selecionar > Selecionar similar. Uma ou mais molduras selecionam todas as reas que contm a faixa de pixels selecionada, de acordo com a configurao atual da opo Tolerncia no Inspetor de propriedades para a ferramenta Varinha mgica.
Nota: Para ajustar a tolerncia do comando Selecionar similar, selecionar a ferramenta Varinha mgica e depois, antes de usar o comando, alterar a configurao de Tolerncia no Inspetor de propriedades.

Remoo de uma seleo de moldura possvel remover uma moldura sem afetar o documento.
Para remover uma moldura, seguir um destes procedimentos:

Desenhar outra moldura. Clicar fora da seleo atual com uma ferramenta Moldura da caixa de seleo ou Lao. Pressionar Esc. Escolher Selecionar > Cancelar seleo.

Ajuste de uma moldura de seleo Aps selecionar pixels com a ferramenta Moldura da caixa de seleo ou Lao, possvel editar ou mover a borda da moldura sem afetar os pixels embaixo dela. Voc pode adicionar ou excluir manualmente pixels da borda da moldura usando teclas modificadoras. Alm disso, possvel expandir ou contrair a borda da moldura em um valor especificado, selecionar uma rea adicional de pixels em torno da moldura existente ou suavizar a borda da moldura. Como mover uma moldura possvel mover uma moldura para coloc-la em uma rea de pixels diferente.
Para mover uma moldura, seguir um destes procedimentos:

Arrastar a moldura com a ferramenta Moldura da caixa de seleo ou Lao, ou com a


ferramenta Varinha mgica.

Usar as teclas de seta para deslocar a moldura a incrementos de 1 pixel. Pressionar a tecla Shift e usar as teclas de seta para mov-la a incrementos de 10 pixels.
Ajuste da seleo de moldura com a barra de espaos possvel reposicionar com facilidade uma moldura durante o arraste dela pressionando a barra de espaos enquanto desenha.
Para reposicionar a seleo com a barra de espaos: 1 2

Iniciar o arraste para desenhar a seleo. Sem soltar o boto do mouse, manter a barra de espaos pressionada.

110 Captulo 4

3 4 5

Arrastar a moldura para outro local da tela. Enquanto mantm o boto do mouse pressionado, liberar a barra de espaos. Continuar arrastando para desenhar a seleo.

Adio a uma seleo de pixel Depois de desenhar uma moldura de seleo com qualquer ferramenta de seleo de bitmap, ser possvel fazer adies seleo com a mesma ferramenta ou com outra ferramenta de seleo de bitmap.
Para fazer adio a uma seleo de pixel existente: 1 2 3

Selecionar qualquer ferramenta de seleo de bitmap. Manter a tecla Shift pressionada e desenhar molduras de seleo adicionais. Repetir as etapas 1 e 2 com qualquer ferramenta de seleo de bitmap para continuar a adio seleo. Molduras sobrepostas se unem para formar uma moldura contnua.

Subtrao de pixels de uma seleo possvel subtrair pixels de uma seleo ou perfurar partes de uma seleo, definindo reas de pixel dentro da moldura original que no faro mais parte da seleo.
Para subtrair pixels de uma seleo:

Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e usar uma ferramenta de seleo de bitmap para selecionar a rea de pixel a ser perfurada. Criao de uma moldura a partir de intersees de molduras Voc pode selecionar pixels dentro de uma moldura existente desenhando uma moldura que sobreponha a original.
Para selecionar uma rea de pixels definida pela rea de interseo de duas molduras: 1

Manter as teclas Alt+Shift (Windows) ou Option+Shift (Macintosh) pressionadas enquanto cria uma nova seleo de moldura que sobreponha a moldura original.

Seleo e transformao de um objeto

111

Soltar o boto do mouse. Apenas os pixels na rea de interseo das duas molduras so selecionados.

Moldura retangular; moldura retangular aps interseo da moldura circular Uso de miniaturas e teclas modificadoras para modificar selees de pixel Com um bitmap selecionado, possvel criar uma seleo de pixel nesse bitmap usando a opacidade de qualquer objeto ou mscara do painel Camadas. Para mais informaes sobre o painel Camadas, consultar Como trabalhar com uma camada na pgina 221.
Para criar ou substituir uma seleo de pixel em um bitmap selecionado usando a opacidade de um objeto: 1 2

No painel Camadas, posicionar o ponteiro sobre a miniatura do objeto a ser usado para criar a seleo de pixel. Manter a tecla Control (Windows) ou Command (Macintosh) pressionada. O ponteiro alterado para indicar que ir selecionar o canal alfa ou a rea opaca do objeto. Clicar na miniatura. A nova seleo de pixel criada no bitmap selecionado.

Para fazer uma adio seleo de pixel atual:

Clicar com a tecla Control-Shift (Windows) ou Command-Shift (Macintosh) na miniatura de um objeto no painel Camadas para adicionar a forma da rea opaca seleo de pixel atual.
Dica: Quando posicionado sobre a miniatura com as teclas modificadoras especificadas pressionadas, o ponteiro indica que o usurio ir fazer uma adio seleo de pixel.

Para fazer uma subtrao da seleo de pixel atual:

Clicar com a tecla Control-Alt (Windows) ou Command-Option (Macintosh) na miniatura de um objeto no painel Camadas para subtrair a forma da rea opaca da seleo de pixel atual.
Dica: Quando posicionado sobre a miniatura com as teclas modificadoras especificadas pressionadas, o ponteiro indica que o usurio ir fazer uma subtrao na seleo de pixel.

112

Captulo 4

Para criar uma seleo de pixel em um bitmap selecionado a partir da interseo de objetos sobrepostos: 1 2

Clicar com a tecla Control (Windows) ou Command (Macintosh) na miniatura de um objeto para selecionar o canal alfa ou a rea opaca. Clicar com a tecla Control-Shift-Alt (Windows) ou Command-Shift-Option (Macintosh) em outro objeto. Uma seleo de pixel criada no bitmap selecionado a partir da interseo das reas opacas dos dois objetos sobrepostos.
Dica: Quando posicionado sobre a miniatura com as teclas modificadoras especificadas pressionadas, o ponteiro indica que o usurio ir criar uma seleo de pixel a partir da interseo das reas opacas de dois objetos sobrepostos.

Criao de uma seleo de pixel inversa Tendo como ponto de partida a seleo de pixel atual, possvel criar outra seleo de pixel que selecione todos os pixels no selecionados atualmente. Pode-se usar este mtodo para selecionar todos os pixels em volta da seleo original, por exemplo, e depois apag-los.
Para criar uma seleo de pixel inversa: 1 2

Fazer uma seleo de pixel usando qualquer ferramenta de seleo de bitmap. Escolher Selecionar > Selecionar inverso. Todos os pixels que no estavam na seleo original agora esto selecionados.

Enevoamento de uma seleo de pixel O enevoamento cria um efeito de transparncia visual nos pixels selecionados. Ao usar o comando Enevoar, pode-se experimentar vrias quantidades de enevoamento e exibir os resultados antes de cancelar a seleo de pixels. Alm disso, possvel enevoar uma seleo definindo uma quantidade de enevoamento no Inspetor de propriedades antes de usar uma ferramenta de seleo de bitmap. Para mais informaes, consultar Opes da ferramenta de seleo de bitmap na pgina 106.
Para enevoar uma seleo de pixel: 1 2

Escolher Selecionar > Enevoar. Digitar uma quantidade em Enevoar na caixa de dilogo Enevoar. O tamanho da moldura de seleo alterado para refletir a quantidade de enevoamento. Se necessrio, alterar o nmero na caixa de dilogo Enevoar para ajustar a quantidade. Clicar em OK.
Dica: Para exibir a aparncia da seleo enevoada sem os pixels volta, escolher Selecionar > Selecionar Inverso, e, em seguida, pressionar Excluir. possvel usar o painel Histrico ou Editar > Desfazer para tentar novamente.

3 4

Expanso ou retrao de uma moldura Uma vez que tiver desenhado uma moldura para selecionar pixels, ser possvel expandir ou contrair sua borda.
Para expandir a borda de uma moldura: 1

Aps desenhar a moldura, escolher Selecionar > Expandir moldura da caixa de seleo.

Seleo e transformao de um objeto 113

Digitar o nmero de pixels que deseja expandir a borda da moldura e clicar em OK.

Para contrair a borda de uma moldura: 1 2

Aps desenhar a moldura, escolher Selecionar > Contrair moldura da caixa de seleo. Digitar o nmero de pixels que deseja contrair na borda da moldura e clicar em OK.

Seleo de uma rea em torno de uma moldura existente Pode-se criar uma moldura adicional, com uma largura especificada, para emoldurar uma moldura existente. Isso permite criar efeitos grficos especiais, como enevoamento das bordas de uma seleo de pixels.

Moldura original; depois do enquadramento com outra moldura


Para selecionar uma rea em torno de uma moldura existente: 1 2

Aps desenhar a moldura, escolher Selecionar > Borda da moldura da caixa de seleo. Digitar a largura da moldura que deseja colocar em torno da moldura existente e clicar em OK.

Suavizao da borda de uma moldura possvel eliminar o excesso de pixels ao longo das bordas de uma seleo de pixel. Isso ser til se aparecerem pixels em excesso ao longo da borda de uma seleo de pixels ou moldura, aps o uso da ferramenta Varinha mgica.

Uma seleo de pixels antes e depois da suavizao

114

Captulo 4

Para suavizar a borda de uma moldura: 1 2

Escolher Selecionar > Suavizar moldura. Digitar um raio de amostragem para especificar o grau de suavizao desejado e clicar em OK.

Transferncia de uma seleo de moldura possvel transferir uma seleo de moldura de um bitmap para outro objeto bitmap na mesma camada ou um em uma camada diferente. Alm disso, pode-se transferir a seleo da moldura para uma mscara.
Para transferir uma seleo de moldura para outro objeto bitmap: 1 2

Fazer uma seleo desenhando a moldura. No painel Camadas, selecionar um objeto bitmap diferente na mesma camada ou um objeto em uma camada diferente. A moldura transferida para esse objeto.
Nota: O Fireworks trata mscaras e objetos mascarados como objetos separados. Para mais informaes sobre mscaras, consultar Mascaramento de imagens na pgina 227.

Salva e recuperao de selees de moldura possvel salvar o tamanho, a forma e o local de uma seleo para reaplic-la futuramente.
Para salvar uma seleo de moldura:

Escolher Selecionar > Salvar seleo de bitmap.


Para restaurar uma seleo de moldura:

Escolher Selecionar > Restaurar seleo de bitmap.


Nota: S possvel salvar uma seleo de cada vez.

Criao e movimentao de uma seleo de pixel flutuante Quando arrastar uma moldura para uma outra posio, a prpria moldura ser movida. Para mover, editar, recortar ou copiar uma seleo de pixels, transformar primeiro os pixels em seleo flutuante.
Para criar uma seleo de pixel flutuante: 1 2

Fazer uma seleo de pixel com uma ferramenta de seleo de bitmap. Seguir um destes procedimentos: com qualquer ferramenta da seo Bitmap do painel Ferramentas.

Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e arrastar a seleo Selecionar a ferramenta Ponteiro e arrastar a seleo.
Para mover uma seleo flutuante, seguir um destes procedimentos:

Arrastar a seleo flutuante com a ferramenta Ponteiro ou com qualquer ferramenta de seleo
de bitmap.

Se uma ferramenta que no selecionar bitmap estiver ativa, manter a tecla Control (Windows)
ou Command (Macintosh) pressionada e arrastar a seleo flutuante.

Seleo e transformao de um objeto 115

Usar as teclas de seta ou as teclas de seta+Shift.


Quando cancelar a seleo de pixel flutuante ou selecionar qualquer ferramenta vetorial ou da Web, a seleo flutuante se tornar parte do objeto bitmap atual. Insero de um novo bitmap por meio de recorte ou cpia possvel inserir um novo bitmap com base em uma seleo de pixel na camada atual do documento atravs de recorte e cpia dos pixels selecionados.
Para inserir um novo bitmap recortando e colando uma seleo de pixel: 1 2

Selecionar uma rea de pixels usando uma ferramenta de seleo de pixel. Selecionar Editar > Inserir > Bitmap atravs de recorte. Um novo objeto bitmap criado na camada atual com base na seleo de pixel e os pixels selecionados so removidos do objeto bitmap original. No painel Camadas, uma miniatura do novo bitmap aparece na camada atual, acima do objeto do qual foi recortado.

Para inserir um novo bitmap copiando e colando uma seleo de pixel: 1 2

Selecionar uma rea de pixels usando uma ferramenta de seleo de pixel. Selecionar Editar > Inserir > Bitmap atravs de recorte. Um novo objeto bitmap criado na camada atual com base na seleo de pixel e os pixels selecionados permanecem no objeto bitmap original. No painel Camadas, uma miniatura do novo bitmap aparece na camada atual, acima do objeto do qual foi copiado.

Edio de objetos selecionados


O Fireworks oferece diversas maneiras para editar objetos selecionados. Voc pode mover objetos na tela ou de um aplicativo para outro, inclusive, replicar objetos com os comandos Clonar e Duplicar, ou ainda remover objetos do espao de trabalho em conjunto.
Para mover uma seleo, seguir um destes procedimentos:

Arrastar a seleo com as ferramentas Ponteiro, Selecionar secundrio ou Selecionar atrs. Pressionar qualquer tecla de seta para mover a seleo em incrementos de 1 pixel. Manter a tecla Shift pressionada enquanto pressiona qualquer tecla de seta para mover a seleo
a incrementos de 10 pixels.

No Inspetor de propriedades, digitar as coordenadas X e Y para a localizao do canto esquerdo


superior da seleo.

Digitar as coordenadas X e Y no painel Informaes. Se as caixas X e Y no estiverem visveis,


arrastar a borda da inferior do painel.
Para mover ou copiar objetos selecionados colando: 1 2 3

Selecionar um objeto ou vrios objetos. Selecionar Editar > Recortar ou Editar > Copiar. Selecionar Editar > Colar.

116

Captulo 4

Para duplicar um ou mais objetos selecionados:

Selecionar Editar > Duplicar. Durante a repetio do comando, aparecem duplicatas do objeto selecionado organizadas em cascata a partir do original, dispostas 10 pixels abaixo e 10 pixels direita da duplicata anterior. O objeto duplicado mais recente passa a ser o objeto selecionado.
Nota: No possvel usar os comandos Duplicar ou Clonar com selees de bitmaps. Usar a ferramenta Selecionar secundrio ou Carimbo para duplicar partes de uma imagem bitmap. Para mais informaes sobre como usar a ferramenta Selecionar secundrio, consultar os procedimentos a seguir.

Para duplicar um objeto selecionado arrastando:

Arrastar com a tecla Alt (Windows) ou Option (Macintosh) o objeto usando a ferramenta Ponteiro.
Para duplicar a seleo de pixel, seguir um destes procedimentos:

Arrastar a seleo de pixel usando a ferramenta Selecionar secundrio. Arrastar com a tecla Alt (Windows) ou Option (Macintosh) o objeto usando a ferramenta
Ponteiro.
Para clonar uma seleo:

Selecionar Editar > Clonar. O clone da seleo est empilhado exatamente na frente do original e passa a ser o objeto selecionado.
Dica: Para afastar um clone selecionado do original com preciso pixel por pixel, usar as teclas de seta ou teclas de seta+Shift. Essa uma forma conveniente para manter uma distncia especfica entre os clones ou o alinhamento vertical ou horizontal dos clones.

Para excluir objetos selecionados, seguir um destes procedimentos:

Pressionar a tecla Delete ou Backspace. Selecionar Editar > Limpar. Selecionar Editar > Recortar. Clicar com o boto direito do mouse (Windows) ou com Control (Macintosh) no objeto e selecionar Editar > Recortar no menu contextual.

Para cancelar ou cancelar a seleo de uma seleo, seguir um destes procedimentos:

Escolher Selecionar > Cancelar seleo. Se estiver usando a ferramenta Moldura da caixa de seleo, Moldura oval da caixa de seleo e
Lao, clicar em qualquer lugar da imagem fora da rea selecionada.

Pressionar Esc.

Seleo e transformao de um objeto

117

Transformao e distoro de objetos selecionados e selees


possvel transformar um grupo ou objeto selecionado, ou uma seleo de pixel usando as ferramentas Dimensionar, Inclinar e Distorcer e os comandos de menu:
Dimensionar aumenta ou reduz um objeto.

Inclinar inclina um objeto ao longo de um eixo especificado. Distorcer move os lados ou cantos de um objeto na direo em que uma ala de seleo for arrastada enquanto a ferramenta estiver ativa. Isso til na criao de efeito 3-D.

Na seleo de qualquer ferramenta de transformao ou comando de menu Transformar so exibidas as alas de transformao em volta dos objetos selecionados.
Alas de transformao

Ponto central

Objeto original

Objeto girado, dimensionado, inclinado, distorcido e virado na vertical e na horizontal


Para transformar objetos selecionados usando as alas de transformao: 1

Selecionar uma ferramenta de transformao. medida que mover o ponteiro nas alas de seleo, ou perto delas, esse ser transformado para indicar a transformao atual.

Para transformar os objetos, seguir um destes procedimentos:

Posicionar o ponteiro prximo a um ponto de canto e depois arrast-lo para girar. Arrastar a ala de transformao para executar a ao de acordo com a ferramenta de
transformao ativa.
3

Clicar duas vezes dentro da janela ou pressionar Enter para aplicar as alteraes.

118

Captulo 4

Redimensionamento (colocao em escala) de objetos A colocao de um objeto em escala aumenta ou reduz o objeto na horizontal, na vertical ou nos dois sentidos.
Para colocar um objeto selecionado em escala: 1

Exibir as alas de transformao:

Selecionar a ferramenta Dimensionar. Selecionar Modificar > Transformar > Dimensionar.


2

Arrastar as alas de transformao: propores sero limitadas a tecla Shift for pressionada durante o dimensionamento.

Para dimensionar o objeto na horizontal e na vertical, arrastar uma das alas de canto. As Para dimensionar o objeto na horizontal ou vertical, arrastar uma ala lateral.
Nota: Tambm possvel redimensionar objetos selecionados pela digitao de dimenses no Inspetor de propriedades. Para mais informaes, consultar Transformao de um objeto numericamente na pgina 120.

Como girar objetos Ao girar um objeto ele gira em torno de seu ponto central. Para girar um objeto, arrastar suas alas de transformao ou selecionar um ngulo predefinido.
Nota: Tambm possvel girar o documento na tela. Para mais informaes, consultar Giro da tela na pgina 97.

Para girar um objeto selecionado em 90 ou 180 graus:

Selecionar Modificar > Transformar e selecionar o comando Girar no submenu.


Para girar um objeto selecionado por arraste: 1 2

Selecionar qualquer ferramenta de transformao. Mover o ponteiro para fora do objeto at o ponteiro de rotao aparecer.

Arrastar o ponteiro para girar o objeto.


Dica: Para limitar a rotao a incrementos de 15 graus em relao ao horizonte, arrastar a tecla Shift com o ponteiro.

Clicar duas vezes dentro da janela ou pressionar Enter para aplicar as alteraes.

Para reposicionar o eixo de rotao:

Arrastar o ponto central para longe do centro.


Para redefinir o eixo de rotao no centro da seleo, seguir um destes procedimentos:

Clicar duas vezes no ponto central. Pressionar Esc para cancelar a seleo do objeto, depois selecion-lo novamente.
Seleo e transformao de um objeto 119

Inverter objetos possvel inverter um objeto no seu eixo vertical ou horizontal, sem mover sua posio relativa na tela.
Para inverter um objeto selecionado:

Selecionar Modificar > Transformar > Inverter horizontalmente ou Inverter verticalmente. Inclinao de um objeto Quando um objeto inclinado, ele transformado, pois inclinado ao longo de um ou dos dois eixos horizontal e vertical.
Para inclinar um objeto selecionado: 1

Seguir um destes procedimentos para exibir as alas de transformao:

Selecionar a ferramenta Inclinar. Selecionar Modificar > Transformar > Inclinar.


2 3

Arrastar uma ala para inclinar o objeto. Clicar duas vezes dentro da janela ou pressionar Enter para remover as alas de transformao.

Para obter a iluso de perspectiva:

Arrastar um ponto de canto. Distoro de um objeto Para alterar o tamanho e as propores de um objeto, arrastar uma ala de seleo com a ferramenta Distorcer.
Para distorcer um objeto selecionado: 1

Seguir um destes procedimentos para exibir as alas de transformao:

Selecionar a ferramenta Distorcer. Selecionar Modificar > Transformar > Distorcer.


2 3

Arrastar uma ala para distorcer o objeto. Clicar duas vezes dentro da janela ou pressionar Enter para aplicar as alteraes.

Transformao de um objeto numericamente Em vez de arrastar para dimensionar, redimensionar ou girar um objeto, possvel transform-lo utilizando valores especficos.
Para redimensionar objetos selecionados usando o Inspetor de propriedades ou o painel Informaes:

Digitar novas medidas de largura (L) ou altura (A).


Nota: Se as caixas L e A no estiverem visveis no Inspetor de propriedades, clicar na seta expansora para visualizar todas as propriedades.

120 Captulo 4

Para dimensionar ou girar objetos selecionados usando a Transformao numrica: 1

Selecionar Modificar > Transformar > Transformao numrica. A caixa de dilogo Transformao numrica aberta. No menu pop-up, selecionar o tipo de transformao a ser executada na seleo atual: Dimensionar, Redimensionar ou Girar. Selecionar Limitar propores para manter proporcional o tamanho horizontal e vertical ao dimensionar ou redimensionar uma seleo. Selecionar Atributos de escala para transformar o preenchimento, trao e efeitos do objeto junto com ele. Cancelar a seleo de Atributos de escala para transformar apenas o traado. Digitar valores numricos para transformar a seleo, depois clicar em OK.

2 3 4 5 6

Exibio de informaes de transformao no painel Informaes O painel Informaes permite a exibio de informaes de transformao numrica do objeto atualmente selecionado. As informaes so atualizadas medida que o objeto editado.

Para dimensionar e liberar transformaes, o painel Informaes mostra a largura (L) e altura
(A) do objeto original antes da transformao e a porcentagem de aumento ou diminuio da largura e altura durante a transformao.

Para inclinar e distorcer, o painel Informaes mostra o ngulo de inclinao a incrementos de


um grau e as coordenadas do ponteiro X e Y durante a transformao.
Para exibir informaes de transformao durante a transformao de uma seleo:

Selecionar Janela > Informaes.

Organizao de um objeto
Ao trabalhar com vrios objetos dentro de um nico documento, possvel usar diversas tcnicas para organizar o documento:

possvel agrupar objetos individuais para trat-los como um nico objeto ou proteger a
relao de cada objeto com os outros objetos do grupo.

Voc pode organizar objetos atrs ou na frente de outros objetos. O modo de organizao dos
objetos chamado de ordem de empilhamento.

possvel alinhar objetos selecionados em uma rea da tela, no eixo vertical ou horizontal.

Seleo e transformao de um objeto 121

Como agrupar um objeto possvel agrupar objetos individuais selecionados e, em seguida, manipul-los como se fossem um nico objeto. Por exemplo, depois de desenhar as ptalas de uma flor como objetos individuais, poder agrup-las para facilitar a seleo e mover a flor inteira como um nico objeto. Voc pode editar grupos sem agrup-los. Alm disso, pode selecionar um objeto individual em um grupo para edio, sem agrupar os objetos. Pode, inclusive, desagrupar os objetos a qualquer momento.

Agrupamento de objetos selecionados como um nico objeto


Para agrupar dois ou mais objetos selecionados:

Selecionar Modificar > Agrupar.


Para desagrupar objetos selecionados:

Selecionar Modificar > Desagrupar. Seleo de um objeto dentro de grupos Para trabalhar com objetos individuais em um grupo, pode-se desagrupar os objetos ou usar a ferramenta Selecionar secundrio para selecionar objetos individuais enquanto deixa o grupo intacto.

Ferramenta Selecionar secundrio Quando os atributos de um objeto selecionado secundariamente so modificados, somente esse objeto alterado, no o grupo inteiro. Mover um objeto selecionado secundariamente para outra camada remover o objeto do grupo.

Seleo secundria de um objeto em um grupo

122 Captulo 4

Para selecionar um objeto que faz parte de um grupo:

Selecionar a ferramenta Selecionar secundrio e clicar no objeto, ou arrastar uma rea de seleo ao seu redor. Para adicionar objetos ou cancelar a seleo deles em uma seleo, manter a tecla Shift pressionada enquanto clica ou arrasta.
Para selecionar o grupo que contm um objeto selecionado secundrio, seguir um destes procedimentos:

Clicar com o boto direito do mouse (Windows) ou com Control (Macintosh) em qualquer
lugar no grupo e escolher Selecionar > Seleo principal no menu de contexto.

Escolher Selecionar > Selecionar principal.


Para selecionar todos os objetos dentro de um grupo selecionado, seguir um destes procedimentos:

Clicar com o boto direito do mouse (Windows) ou com Control (Macintosh) em qualquer
lugar no grupo e escolher Selecionar > Selecionar secundrio no menu de contexto.

Escolher Selecionar > Selecionar secundrio.


Empilhamento de um objeto Dentro de uma camada, o Fireworks empilha objetos com base na ordem em que foram criados, sendo o objeto criado mais recentemente inserido no topo da pilha. A ordem de empilhamento dos objetos determina a maneira como eles aparecem quando sobrepostos. As camadas tambm afetam a ordem de empilhamento. Por exemplo, se um documento tiver duas camadas chamadas Camada 1 e Camada 2, e a Camada 1 estiver listada abaixo da camada 2 no painel Camadas, ento, tudo o que estiver na camada 2 aparecer na frente de tudo o que estiver na Camada 1. Para alterar a ordem das camadas arrastar a camada no painel Camadas para uma nova posio. Para mais informaes, consultar Organizao de uma camada na pgina 224.
Para alterar a ordem de empilhamento de um objeto ou grupo selecionado em uma camada:

Selecionar Modificar > Organizar > Trazer para frente ou Enviar para trs para mover o objeto
ou grupo para o topo ou para a base da ordem de empilhamento.

Selecionar Modificar > Organizar > Avanar ou Recuar para mover o objeto ou grupo uma
posio acima ou abaixo na ordem de empilhamento. Quando mais de um objeto ou grupo for selecionado, os objetos se movem na frente ou atrs de todos os objetos no selecionados enquanto mantm a ordem relativa entre eles. Alinhamento de um objeto Os comandos Alinhar do menu Modificar oferecem uma ampla gama de opes de organizao permitindo a execuo de qualquer um destes procedimentos:
Alinhar objetos ao

longo do eixo horizontal ou vertical.

Alinhar objetos selecionados verticalmente, na borda direita, no centro ou na borda esquerda, ou horizontalmente, na borda superior, no centro ou na borda inferior.
Nota: Bordas so determinadas pelas caixas delimitadoras includas em cada objeto selecionado.

Distribuir objetos selecionados de

forma que seus centros ou bordas fiquem eqidistantes.

possvel aplicar um ou mais comandos Alinhar a objetos selecionados.

Seleo e transformao de um objeto 123

Para alinhar objetos selecionados, seguir um destes procedimentos:

Selecionar Modificar > Alinhar > Esquerda para alinhar os objetos na extremidade esquerda do
objeto selecionado.

Selecionar Modificar > Alinhar > Centralizado vertical para alinhar os pontos centrais dos
objetos no eixo vertical.

Selecionar Modificar > Alinhar > Direita para alinhar os objetos na extremidade direita do
objeto selecionado.

Selecionar Modificar > Alinhar > Topo para alinhar os objetos na extremidade superior do
objeto selecionado.

Selecionar Modificar > Alinhar > Centralizado horizontal para alinhar os pontos centrais dos
objetos no eixo horizontal.

Selecionar Modificar > Alinhar > Base para alinhar os objetos na extremidade inferior do
objeto selecionado.
Para distribuir igualmente as larguras ou alturas de trs ou mais objetos selecionados:

Selecionar Modificar > Alinhar > Distribuir larguras ou Modificar > Alinhar > Distribuir alturas. Sobre como organizar os objetos entre camadas O painel Camadas oferece outra dimenso de controle organizacional. Voc pode mover objetos selecionados de uma camada para outra arrastando a miniatura do objeto ou o indicador azul de seleo no painel Camadas para outra camada. Para mais informaes, consultar Organizao de uma camada na pgina 224.

124 Captulo 4

CAPTULO 5 Como trabalhar com um bitmap

Bitmaps so grficos compostos de pequenos quadrados coloridos chamados de pixels, que se combinam como os ladrilhos de um mosaico para criar uma imagem. Exemplos de grficos de bitmap incluem fotografias, imagens digitalizadas e grficos criados em programas de pintura. s vezes, eles so chamados imagens de varredura. O Macromedia Fireworks MX combina a funcionalidade de aplicativos de pintura, desenho de vetor e edio de fotos. H vrias opes para criar imagens bitmap: desenhar e pintar com ferramentas de bitmap, converter objetos vetoriais em imagens bitmap ou abrir ou importar imagens. O Fireworks dispe de um sofisticado conjunto de Efeitos ao vivo para ajuste de cores e tons, alm de uma ampla gama de mtodos para retocar imagens bitmap, inclusive cortar, enevoar e duplicar ou clonar imagens. Alm disso, agora o Fireworks incorpora um novo conjunto de ferramentas de retoque de imagem Embaar, Aguar, Clarear, Escurecer e Mancha. Os mtodos para seleo e transformao de imagens e pixels so descritos em Captulo 4, Seleo e transformao de um objeto, na pgina 103.

Como trabalhar com um bitmap


A seo Bitmap do painel Ferramentas contm ferramentas de seleo e edio de bitmap. Para editar os pixels de um bitmap no documento, escolher uma ferramenta na seo Bitmap. Ao contrrio de verses anteriores do Fireworks, no preciso alternar deliberadamente entre o modo bitmap e o modo vetorial, mas ainda assim possvel trabalhar com bitmaps, objetos vetoriais e texto. Alternar para o modo apropriado to simples quanto escolher uma ferramenta vetorial ou de bitmap no painel Ferramentas.
Nota: Verses anteriores do Fireworks exibem uma borda listrada ao redor da tela para indicar que o Fireworks est no modo bitmap. Se preferir ver a conhecida borda listrada ao trabalhar com bitmaps, o usurio poder escolher Opes de bitmap > Exibir borda listrada na categoria Editar da caixa de dilogo Preferncias.

Criao de um objeto bitmap


H vrias maneiras de criar grficos de bitmap: usar as ferramentas de desenho e pintura de bitmap do Fireworks; recortar ou copiar e colar selees de pixels; ou converter uma imagem vetorial em um objeto bitmap. Uma outra forma de criar um objeto bitmap inserir uma imagem bitmap vazia no documento e, depois, desenh-la, pint-la ou preench-la. Ao ser criado, o novo objeto bitmap adicionado camada atual. O painel Camadas, com as camadas expandidas, mostra uma miniatura e o nome de cada objeto bitmap abaixo da camada na qual ele reside. Embora alguns aplicativos de bitmap considerem cada objeto bitmap como uma camada, o Fireworks organiza os objetos bitmap e vetoriais e o texto como objetos separados que residem em camadas. Para mais informaes, consultar Como trabalhar com uma camada na pgina 221.

125

Para criar um novo objeto bitmap: 1 2

Escolher a ferramenta Pincel ou Lpis na seo Bitmap do painel Ferramentas. Pintar ou desenhar com a ferramenta Pincel ou Lpis para criar objetos bitmap na tela. Um novo objeto bitmap adicionado camada atual no painel Camadas. Para mais informaes sobre como usar as ferramentas Lpis ou Pincel, consultar Desenho, pintura e edio de um objeto bitmap na pgina 127.

possvel criar um novo bitmap vazio e, depois, desenhar ou pintar pixels nele.
Para criar um objeto bitmap vazio, seguir um destes procedimentos:

Clicar no boto Nova imagem bitmap no painel Camadas. Escolher Editar > Inserir > Bitmap vazio. Desenhar uma moldura de caixa de seleo, comeando em uma rea em branco da tela, e
preench-la. Para mais informaes, consultar Criao de moldura de seleo de pixel na pgina 107. Um bitmap vazio adicionado camada atual no painel Camadas. Se o bitmap vazio for desselecionado antes de quaisquer pixels serem desenhados, importados ou colocados de alguma outra forma nele, o objeto bitmap vazio desaparecer automaticamente do painel Camadas e do documento.
Para recortar ou copiar pixels e col-los como um novo objeto bitmap: 1

Fazer uma seleo de pixels com a ferramenta Lao, Moldura da caixa de seleo ou Varinha mgica. Para mais informaes, consultar Seleo de um pixel na pgina 106. Seguir um destes procedimentos:

Escolher Editar > Recortar e, em seguida, Editar > Colar. Escolher Editar > Copiar e, em seguida, Editar > Colar. Escolher Editar > Inserir > Bitmap atravs de cpia, para copiar a seleo atual em um novo
bitmap.

Escolher Editar > Inserir > Bitmap atravs de recorte, para recortar a seleo atual e coloc-la em um
novo bitmap. A seleo aparece no painel Camadas como um objeto da camada atual.
Nota: Uma outra alternativa clicar com o boto direito do mouse (Windows) ou clicar com Control (Macintosh) em uma moldura da caixa de seleo de pixel e escolher uma opo de recorte ou cpia no menu contextual. Para mais informaes sobre as opes Bitmap atravs de recorte e Bitmap atravs de cpia, consultar Insero de um novo bitmap por meio de recorte ou cpia na pgina 116.

Para converter objetos vetoriais selecionados em uma imagem bitmap, seguir um destes procedimentos:

Escolher Modificar > Nivelar seleo. Escolher Nivelar seleo no menu Opes do painel Camadas.
A converso de vetor em bitmap irreversvel, exceto quando Editar > Desfazer ou desfazer aes no painel Histrico ainda for uma opo. Imagens bitmap no podem ser convertidas em objetos vetoriais.

126 Captulo 5

Desenho, pintura e edio de um objeto bitmap


A seo Bitmap do painel Ferramentas contm ferramentas que selecionam, desenham, pintam e editam pixels em uma imagem bitmap. Desenho de um objeto bitmap O usurio pode utilizar a ferramenta Lpis para desenhar linhas retas, limitadas ou de forma livre de um pixel, praticamente da mesma maneira que usa um lpis verdadeiro para desenhar uma linha com bordas acentuadas. Ele tambm pode aumentar um bitmap e clicar na ferramenta Lpis para editar pixels individuais.
Para desenhar um objeto com a ferramenta Lpis: 1 2

Escolher a ferramenta Lpis. Definir as opes da ferramenta no Inspetor de propriedades:


Sem serrilhado suaviza

as bordas das linhas desenhadas. a cor do preenchimento quando a ferramenta Lpis clicada na

Apagar automaticamente usa

cor do trao.
Preservar transparncia restringe a ferramenta Lpis a desenhar apenas em pixels existentes, e no nas reas transparentes de um grfico. 3

Arrastar para desenhar. Manter pressionada a tecla Shift e arrastar para restringir o traado a uma linha diagonal, horizontal ou vertical.

Pintura de um objeto bitmap A ferramenta Pincel pinta um trao de pincel com a cor da caixa Cor do trao, enquanto a ferramenta Lata de tinta altera a cor de pixels selecionados para a cor na caixa Cor de preenchimento. A ferramenta Dgrad preenche objetos bitmap ou vetoriais com uma combinao de cores em padres ajustveis.
Para pintar um objeto com a ferramenta Pincel: 1 2 3

Escolher a ferramenta Pincel. Definir os atributos de trao no Inspetor de propriedades. Arrastar para pintar. Para mais informaes sobre como definir opes da ferramenta Pincel, consultar Como trabalhar com um trao na pgina 198.

Para alterar a cor dos pixels para a cor na caixa Cor de preenchimento: 1 2 3

Escolher a ferramenta Lata de tinta. Escolher uma cor na caixa Cor de preenchimento. Definir o valor de tolerncia no Inspetor de propriedades.
Nota: A tolerncia determina como pixels com cores semelhantes devem ser preenchidos. Um valor de tolerncia baixo preenche os pixels com valores da cor semelhantes ao pixel clicado. Um valor de tolerncia alto preenche os pixels com uma faixa mais ampla de valores da cor.

Como trabalhar com um bitmap 127

Clicar na imagem. Todos os pixels dentro da faixa de tolerncia mudam para a cor de preenchimento.

Para aplicar um preenchimento dgrad a uma seleo de pixels: 1 2 3 4

Fazer a seleo. Escolher a ferramenta Dgrad. Definir os atributos de preenchimento no Inspetor de propriedades. Clicar na seleo de pixels para aplicar o preenchimento. As ferramentas Lata de tinta e Dgrad tambm podem preencher objetos vetoriais selecionados. Para mais informaes sobre como criar, aplicar e editar preenchimentos dgrad, consultar Como trabalhar com um preenchimento na pgina 204.

Amostragem de cor para usar como cor do trao ou preenchimento A ferramenta Conta-gotas pode fazer amostragem de cor de uma imagem para designar uma nova cor do trao ou preenchimento. H vrias opes sua escolha: fazer amostragem da cor de um nico pixel, uma mdia de valores da cor dentro de uma rea de 3 por 3 pixels ou uma mdia de valores da cor dentro de uma rea de 5 por 5 pixels.
Para fazer amostragem de uma cor de trao ou preenchimento: 1

Se o atributo correto ainda no estiver ativo, seguir um destes procedimentos: ativo.

Clicar no cone Trao ao lado da caixa Cor do trao no painel Ferramentas para torn-lo o atributo Clicar no cone Preenchimento ao lado da caixa Cor de preenchimento no painel Ferramentas
para torn-lo o atributo ativo.
Nota: No clicar na caixa de cor propriamente dita. Caso contrrio, o ponteiro conta-gotas que aparecer no ser a ferramenta Conta-gotas. Para informaes sobre o ponteiro conta-gotas da caixa de cor, consultar Amostragem de uma cor em uma janela pop-up de cores na pgina 198.

2 3

Abrir um documento do Fireworks ou qualquer arquivo que o Fireworks possa abrir. Para mais informaes, consultar Abertura de um grfico criado em outros aplicativos na pgina 77. Escolher a ferramenta Conta-gotas na seo Bitmap do painel Ferramentas. Definir a configurao Mdia de cores de amostragem no Inspetor de propriedades.
1 pixel cria

uma cor de preenchimento ou trao a partir de um nico pixel.

3x3 pixels cria uma cor de preenchimento ou trao a partir da mdia de valores da cor dentro de

uma rea de 3 por 3 pixels.


5x5 pixels cria uma cor de preenchimento ou trao a partir da mdia de valores da cor dentro de uma rea de 5 por 5 pixels. 4

Clicar a ferramenta Conta-gotas em qualquer parte do documento. O exemplo de cor aparece em todas as caixas Cor do trao ou Cor de preenchimento do Fireworks.

128 Captulo 5

Como apagar um objeto bitmap Uma das utilidades da ferramenta Borracha remover pixels. Por padro, o ponteiro da ferramenta Borracha representa o tamanho da borracha atual, mas possvel alterar seu tamanho e aparncia na caixa de dilogo Preferncias. Para mais informaes, consultar Edio de preferncias na pgina 422.

Ferramenta Borracha
Para apagar pixels em um objeto bitmap selecionado ou em uma seleo de pixels: 1 2 3 4 5 6

Escolher a ferramenta Borracha. No Inspetor de propriedades, escolher a forma de borracha redonda ou quadrada. Arrastar o controle deslizante Borda para definir a suavidade da borda da borracha. Arrastar o controle deslizante Tamanho para definir o tamanho da borracha. Arrastar o controle deslizante Opacidade do apagador para definir o grau de opacidade. Arrastar a ferramenta Borracha sobre os pixels que deseja apagar.

Enevoamento de uma seleo de pixels O enevoamento desfoca as bordas de uma seleo de pixels e ajuda a misturar a rea selecionada com os pixels que a envolvem. O recurso de enevoamento til durante o processo de copiar uma seleo e col-la em outro fundo.

Para enevoar as bordas de uma seleo de pixels ao fazer essa seleo: 1 2 3 4

Escolher uma ferramenta de seleo de bitmap no painel Ferramentas. Escolher Enevoar no menu pop-up Borda do Inspetor de propriedades. Arrastar o controle deslizante para definir o nmero de pixels que deseja embaar ao longo da borda da seleo. Fazer uma seleo.

Como trabalhar com um bitmap 129

Para enevoar as bordas de uma seleo de pixels a partir da barra de menus: 1 2

Escolher Selecionar > Enevoar. Digitar um valor na caixa de dilogo Enevoar seleo, para definir o raio de enevoamento, e clicar em OK. O valor do raio determina o nmero de pixels que so enevoados de cada lado da borda da seleo.

Retoque de um bitmap
O Fireworks incorpora uma ampla gama de ferramentas que iro ajud-lo a retocar suas imagens. H vrias opes sua escolha: alterar o tamanho de uma imagem, reduzir ou aguar seu foco, ou copiar e carimbar uma parte dela em outra rea.
A ferramenta Carimbo copia ou clona uma rea de uma imagem em outra.

A ferramenta Embaar reduz o foco das reas selecionadas em uma imagem.

A ferramenta Mancha seleciona uma cor e a empurra na direo em que o usurio arrasta em uma imagem.

A ferramenta Aguar agua reas de uma imagem.

A ferramenta Clarear clareia partes de uma imagem.

A ferramenta Escurecer escurece partes de uma imagem.

Clonagem de um pixel A ferramenta Carimbo clona uma rea de uma imagem bitmap de modo que seja possvel carimb-la em outra parte da imagem. Clonar pixels til para corrigir fotos arranhadas ou remover poeira de uma imagem; possvel copiar uma rea de pixels de uma foto e substituir o ponto arranhado ou com poeira por uma rea clonada.
Para clonar partes de uma imagem bitmap: 1 2

Escolher a ferramenta Carimbo. Clicar em uma rea para design-la como origem, ou como a rea que deseja clonar. O ponteiro de amostragem se transforma em um ponteiro em forma de cruz.
Nota: Para designar uma outra rea de pixels para clonar, manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e clicar em outra rea de pixels a fim de design-la como origem.

Ir para outra parte da imagem e arrastar o ponteiro. Aparecem dois ponteiros. O primeiro, a origem da clonagem, tem forma de cruz. Edio de preferncias na pgina 422. Dependendo das preferncias de pincel selecionadas, o segundo ponteiro ser um carimbo, uma cruz ou um crculo azul. medida que ele arrastado, os pixels sob o primeiro ponteiro so copiados e aplicados rea sob o segundo.

130 Captulo 5

Para definir as opes da ferramenta Carimbo: 1 2

Escolher a ferramenta Carimbo. Escolher uma das seguintes opes no Inspetor de propriedades: Tamanho determina o tamanho do carimbo. Borda determina a suavidade do trao (100% acentuado; 0% suave). Origem alinhada afeta a operao de amostragem. Quando a opo Origem alinhada est selecionada, o ponteiro de amostragem move-se vertical e horizontalmente alinhado com o segundo. Quando ela est desselecionada, a rea de amostragem fica fixa, independentemente do local para onde o usurio for e clicar no segundo ponteiro.
Usar documento inteiro faz uma amostragem de todos os objetos em todas as camadas. Quando

esta opo est desselecionada, a ferramenta Carimbo faz a amostragem apenas do objeto ativo. Opacidade determina quanto do fundo pode ser visto atravs do trao. Modo Misturar afeta a forma como a imagem clonada afeta o fundo.
Para duplicar uma seleo de pixels, seguir um destes procedimentos:

Arrastar a seleo de pixels com a ferramenta Subseleo. Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e arrastar a seleo de pixels
com a ferramenta Ponteiro. Como embaar, aguar e manchar um pixel As ferramentas Embaar e Aguar afetam o foco dos pixels. A ferramenta Embaar acentua ou desacentua partes de uma imagem embaando, de forma seletiva, o foco dos elementos, praticamente da mesma maneira que um fotgrafo controla a profundidade de campo. A ferramenta Aguar pode ser til para resolver problemas de digitalizao ou fotografias fora de foco. A ferramenta Mancha mistura suavemente as cores, como se criasse um reflexo da imagem.
Para embaar ou aguar uma imagem: 1 2

Escolher a ferramenta Embaar ou Aguar. Definir as opes de pincel no Inspetor de propriedades: Tamanho define o tamanho da ponta do pincel. Borda especifica a suavidade da ponta do pincel. Forma define uma forma quadrada ou redonda para a ponta do pincel. Intensidade define a quantidade de embaamento ou aguamento. Arrastar a ferramenta sobre os pixels a serem aguados ou embaados.
Dica: Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) alternar o comportamento da ferramenta.

Para manchar as cores de uma imagem: 1 2

Escolher a ferramenta Mancha. Definir as opes da ferramenta no Inspetor de propriedades: Tamanho especifica o tamanho da ponta do pincel. Forma define uma forma quadrada ou redonda para a ponta do pincel. Borda especifica a suavidade da ponta do pincel.

Como trabalhar com um bitmap 131

Presso define

a intensidade do trao.

Cor da mancha mancha com uma cor especificada no incio de cada trao. Se esta opo estiver desselecionada, a ferramenta usar a cor sob o ponteiro ferramenta. Usar documento inteiro mancha

com os dados das cores de todos os objetos em todas as camadas. Se esta opo estiver desselecionada, a ferramenta Mancha usar a cor apenas do objeto ativo.

Arrastar a ferramenta sobre os pixels a serem manchados.

Clareamento e escurecimento de um pixel A ferramenta Clarear ou Escurecer clareia ou escurece partes de uma imagem, respectivamente. Esse processo semelhante tcnica de cmara escura de adicionar ou retirar luz de uma fotografia.
Para clarear ou escurecer partes de uma imagem: 1 2

Escolher a ferramenta Clarear para clarear partes de uma imagem, ou a ferramenta Escurecer para escurec-las. Definir as opes de pincel no Inspetor de propriedades:
Tamanho define Forma define

o tamanho da ponta do pincel. a suavidade da ponta do pincel.

uma forma quadrada ou redonda para a ponta do pincel.

Borda especifica 3

Definir a exposio no Inspetor de propriedades. A exposio varia de 0% a 100%. Para um efeito mais brando, especificar um valor percentual mais baixo; para um efeito mais forte, especificar um valor mais alto.

Definir a faixa no Inspetor de propriedades:


Sombras altera Realces altera

principalmente as partes escuras da imagem. principalmente a faixa intermediria por canal na imagem.

principalmente as partes claras da imagem.

Meios-tons altera 5

Arrastar sobre a parte da imagem a ser clareada ou escurecida. Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) ao arrastar a ferramenta para alternar temporariamente entre as ferramenta Clarear e Escurecer.

Corte de um bitmap selecionado possvel isolar um nico objeto bitmap em um documento do Fireworks e cortar apenas esse objeto, deixando os demais objetos intactos na tela.
Para cortar uma imagem bitmap sem afetar outros objetos do documento: 1 2

Selecionar um objeto bitmap clicando nele na tela ou em sua miniatura no painel Camadas, ou desenhar uma moldura de caixa de seleo com uma ferramenta de seleo de bitmap. Escolher Editar > Cortar bitmap selecionado. As alas de corte aparecem ao redor de todo o bitmap selecionado ou ao redor da moldura da caixa de seleo, caso tenha sido desenhada na etapa 1.

132 Captulo 5

Ajustar as alas de corte at que a caixa delimitadora envolva a rea da imagem bitmap que deseja manter.
Nota: Para cancelar uma seleo de corte, pressionar Esc.

Caixa delimitadora
4

Clicar duas vezes dentro da caixa delimitadora ou pressionar Enter para cortar a seleo. Todos os pixels do bitmap selecionado que estiverem fora da caixa delimitadora sero removidos, mas os outros objetos do documento permanecero.

Ajuste da cor e do tom de um bitmap


O Fireworks incorpora filtros de ajuste de cor e de tom que melhoram e intensificam as cores nas imagens bitmap. possvel ajustar o contraste e o brilho, a faixa tonal, o matiz e a saturao de cor das imagens. simples adicionar seus plug-ins favoritos do Photoshop ao Fireworks e aplic-los a bitmaps usando o menu Filtros ou a rea Efeitos ao vivo do Inspetor de propriedades. A aplicao de filtros como Efeitos ao vivo no Inspetor de propriedades um processo no-destrutivo. Os Efeitos ao vivo no alteram permanentemente os pixels; possvel remov-los ou edit-los a qualquer momento. A aplicao de um filtro a um objeto vetorial selecionado usando o menu Filtros converte a seleo em um bitmap. Se preferir aplicar filtros de uma forma permanente e irreversvel, o menu Filtros o local certo para fazer a sua escolha. No entanto, recomendvel usar filtros como Efeitos ao vivo sempre que possvel. Para mais informaes sobre como adicionar plug-ins do Photoshop, consultar Aplicaes de filtros e plug-ins do Photoshop como Efeitos ao vivo na pgina 217. Os filtros do menu Filtros podem ser aplicados a selees de pixels, j os Efeitos ao vivo no podem. No entanto, possvel definir uma rea de um bitmap, criar um bitmap separado a partir dela e, depois, aplicar um Efeito ao vivo a ele.
Para aplicar um Efeito ao vivo a uma rea definida por uma moldura de caixa de seleo de bitmap: 1 2

Escolher uma ferramenta de seleo de bitmap e desenhar uma moldura de caixa de seleo. Escolher Editar > Recortar.

Como trabalhar com um bitmap 133

Escolher Editar > Colar. A seleo colada no mesmo lugar em que estavam os pixels originais, mas agora ela um objeto bitmap separado.

4 5

Clicar na miniatura do novo objeto bitmap no painel Camadas para selecionar o objeto bitmap. Aplicar um Efeito ao vivo no Inspetor de propriedades. O Efeito ao vivo aplicado somente ao novo objeto bitmap, simulando a aplicao de um filtro a uma seleo de pixels.
Nota: Embora os Efeitos ao vivo sejam mais flexveis, um grande nmero deles em um documento pode resultar em uma queda no desempenho do Fireworks. Para mais informaes, consultar Controle de redesenho do documento na pgina 93.

Ajuste da faixa tonal Os recursos Nveis e Curvas so teis para ajustar a faixa tonal de um bitmap. Nveis corrige bitmaps que contm uma alta concentrao de pixels nos realces, meios-tons ou sombras. O recurso Nveis automticos permite que o Fireworks ajuste a faixa tonal automaticamente. O recurso Curvas confere um controle mais preciso sobre a faixa tonal de um bitmap, pois permite ajustar qualquer cor da faixa sem afetar outras cores. Uso do recurso Nveis Um bitmap com uma faixa tonal completa deve ter um nmero par de pixels em todas as reas. O recurso Nveis corrige bitmaps com alta concentrao de pixels em realces, meios-tons ou sombras.
Realces

aplicado quando uma alta concentrao de pixels claros parece desbotada. aplicado quando muitos pixels em meios-tons parecem suaves. aplicado quando uma rea de pixels excessivamente escuros oculta grande parte dos

Meios-tons Sombras

detalhes. O recurso Nveis define os pixels mais escuros e os mais claros como preto e branco, e redistribui os meios-tons proporcionalmente. Isso produz uma imagem com os detalhes mais aguados em todos os seus pixels.

Original com pixels concentrados nos realces; imagem aps o ajuste com o recurso Nveis

134 Captulo 5

O Histograma na caixa de dilogo Nveis exibe a distribuio de pixels de um bitmap. O Histograma uma ilustrao grfica da distribuio de pixels em realces, meios-tons e sombras de um bitmap. O Histograma ajuda a determinar o melhor mtodo de corrigir a faixa tonal de uma imagem. Uma alta concentrao de pixels nos realces ou sombras indica que a imagem poderia ser melhorada com os recursos Nveis ou Curvas. O eixo horizontal ilustra os valores das cores, da mais escura (0) at a mais clara (255). A leitura do eixo horizontal deve ser feita da esquerda para a direita: a esquerda representa os pixels mais escuros, o centro, os pixels em meios-tons e a direita, os pixels mais claros. O eixo vertical representa o nmero de pixels em cada nvel de brilho. Normalmente, a primeira operao ajustar os realces e sombras. Ajustar os tons mdios em segundo lugar permite melhorar o valor do brilho sem afetar os realces e sombras.
Para ajustar realces, meios-tons e sombras: 1 2

Selecionar a imagem bitmap. Seguir um destes procedimentos para abrir a caixa de dilogo Nveis: Nveis no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Ajustar cor > Escolher Filtros > Ajustar cor > Nveis.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Caixa de dilogo Nveis


Dica: Para exibir as alteraes no espao de trabalho, escolher Visualizar na caixa de dilogo. medida que so feitas alteraes, a imagem atualizada automaticamente.

No menu pop-up Canal, escolher se deseja aplicar alteraes a canais de cores individuais (vermelho, azul ou verde) ou a todos os canais de cores (RGB).

Como trabalhar com um bitmap 135

Arrastar os controles deslizantes Nveis de entrada abaixo do Histograma para ajustar os realces, meios-tons e sombras:

O controle deslizante da direita ajusta os realces usando valores de 255 to 0. O controle deslizante do centro ajusta os meios-tons usando valores de 10 a 0. O controle deslizante da esquerda ajusta as sombras usando valores de 0 a 255.
medida que o usurio move os controles deslizantes, os valores so inseridos automaticamente nas caixas Nveis de entrada.
Nota: O valor de sombra no pode ser mais alto do que o valor de realce; o valor de realce no pode ser mais baixo do que o valor de sombra; e os meios-tons devem estar entre as configuraes de sombra e realce.

Arrastar os controles deslizantes Nveis de sada para ajustar os valores de contraste na imagem:

O controle deslizante da direita ajusta os realces usando valores de 255 to 0. O controle deslizante da esquerda ajusta as sombras usando valores de 0 a 255.
medida que o usurio move os controles deslizantes, os valores so inseridos automaticamente nas caixas Nveis de sada. Uso do recurso Nveis automticos O recurso Nveis automticos permite que o Fireworks ajuste a faixa tonal automaticamente.
Para ajustar realces, meios-tons e sombras automaticamente: 1 2

Selecionar a imagem. Seguir um destes procedimentos para escolher Nveis automticos: Nveis automticos no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Ajustar cor > Escolher Filtros > Ajustar cor > Nveis automticos.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213. Dica: Existe tambm a possibilidade de ajustar os realces, meios-tons e sombras automaticamente clicando no boto Automtico na caixa de dilogo Nveis ou Curvas.

Uso do recurso Curvas O recurso Curvas semelhante ao Nveis, mas oferece controle mais preciso sobre a faixa tonal. Enquanto Nveis usa realces, sombras e meios-tons para corrigir a faixa tonal, Curvas permite ajustar qualquer cor na faixa tonal, em vez de ajustar apenas trs variveis, sem afetar outras cores. Uma das aplicaes do recurso Curvas , por exemplo, para corrigir um matiz de cor causado por condies de iluminao. A grade na caixa de dilogo Curvas ilustra dois valores de brilho:
O eixo horizontal ilustra

o brilho original dos pixels, mostrado nacaixa Entrada. os novos valores de brilho, mostrados na caixa Sada.

O eixo vertical representa

136 Captulo 5

Quando a caixa de dilogo Curvas aberta pela primeira vez, a linha diagonal indica que no foram feitas alteraes, de modo que os valores de entrada e de sada so os mesmos para todos os pixels.
Para ajustar um ponto especfico na faixa tonal: 1 2

Selecionar a imagem. Seguir um destes procedimentos para abrir a caixa de dilogo Curvas: Curvas no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Ajustar cor > Escolher Filtros > Ajustar cor > Curvas.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Caixa de dilogo Curvas


3 4

No menu pop-up Canal, escolher se deseja aplicar alteraes a canais de cores individuais ou a todas as cores. Clicar em um ponto na linha diagonal da grade e arrast-lo at a nova posio para ajustar a curva. ponto, os valores de entrada e sada so atualizados automaticamente.

Cada ponto na curva tem seus prprios valores de entrada e sada. Quando se arrasta um

Como trabalhar com um bitmap 137

A curva exibe valores de brilho de 0 a 255, com 0 representando as sombras.

Curva aps arrastar um ponto para ajustar


Dica: Tambm possvel ajustar os realces, meios-tons e sombras automaticamente clicando no boto Automtico na caixa de dilogo Curvas.

Para excluir um ponto ao longo da curva:

Arrastar o ponto para fora da grade.


Nota: No possvel excluir os pontos finais da curva.

Uso de um conta-gotas tonal A caixa de dilogo Nveis ou Curvas oferece o conta-gotas de realce, sombra ou meio-tom, que ajusta realces, sombras e meios-tons.
Para ajustar o equilbrio tonal manualmente com os contas-gotas tonais: 1 2

Abrir a caixa de dilogo Nveis ou Curvas e escolher um canal de cor no menu pop-up Canal. Escolher o conta-gotas apropriado para redefinir os valores tonais na imagem:

Clicar no pixel mais claro na imagem com o conta-gotas Realce para redefinir o valor de realce. Clicar no pixel de cor neutra na imagem com o conta-gotas Meio-tom para redefinir o valor de
meio-tom.

Clicar no pixel mais escuro na imagem com o conta-gotas Sombra para redefinir o valor de
sombra.
3

Clicar em OK.

138 Captulo 5

Ajuste de brilho e contraste O recurso Brilho/Contraste modifica o contraste ou o brilho dos pixels em uma imagem. Isso afeta os realces, sombras e meios-tons de uma imagem. A aplicao mais comum do recurso Brilho/Contraste para corrigir imagens muito escuras ou muito claras.

Original; aps o ajuste do brilho


Para ajustar o brilho ou contraste: 1 2

Selecionar a imagem. Seguir um destes procedimentos para abrir a caixa de dilogo Brilho/Contraste: Contraste no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Ajustar cor > Brilho/ Escolher Filtros > Ajustar cor > Brilho/Contraste.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Arrastar os controles deslizantes Brilho e Contraste para ajustar as configuraes. Os valores variam de -100 a 100. Clicar em OK.

Aplicao do efeito ao vivo Preenchimento colorido O Efeito ao vivo Preenchimento colorido altera rapidamente a cor de objetos, seja substituindo totalmente os pixels por uma cor especfica ou misturando uma cor em um objeto existente. A mistura de cores adiciona a cor no topo do objeto. Misturar uma cor em um objeto existente funciona de forma semelhante ao filtro Matiz/Saturao; entretanto, permite aplicar rapidamente uma cor especfica de um painel de amostragem de cores.
Para adicionar um efeito Preenchimento colorido a um objeto selecionado: 1

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Ajustar cor > Preenchimento colorido no menu pop-up Adiciona efeitos.

Como trabalhar com um bitmap 139

Escolher um modo de mistura. O modo padro Normal. Para informaes sobre cada modo de mistura, consultar Sobre modos de mistura na pgina 245.

3 4

Escolher uma cor de preenchimento no menu pop-up da caixa de cor. Escolher uma porcentagem de opacidade para a cor de preenchimento e pressionar Enter.

Ajuste de matiz e saturao O recurso Matiz/Saturao ajusta o tom de uma cor, seu matiz; a intensidade de uma cor, sua saturao; ou a luminosidade de uma cor em uma imagem.

Original; aps o ajuste da saturao


Para ajustar o matiz ou saturao: 1 2

Selecionar a imagem. Seguir um destes procedimentos para abrir a caixa de dilogo Matiz/Saturao: Saturao no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Ajustar cor > Matiz/ Escolher Filtros > Ajustar cor > Matiz/Saturao.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Arrastar o controle deslizante Matiz para ajustar a cor da imagem. Os valores variam de -180 a 180. Arrastar o controle deslizante Saturao para ajustar a pureza das cores. Os valores variam de -100 a 100. Arrastar o controle deslizante Luminosidade para ajustar a luminosidade das cores. Os valores variam de -100 a 100. Clicar em OK.

140 Captulo 5

Para alterar uma imagem RGB para uma imagem de dois tons ou adicionar cor a uma imagem em tons de cinza:

Escolher Colorir na caixa de dilogo Matiz/Saturao.


Nota: A escolha de Colorir altera a faixa de valores dos controles deslizantes Matiz e Saturao. O matiz varia de 0 a 360. A saturao varia de 0 a 100.

Inverso de um valor de cor de uma imagem O filtro Inverter altera cada cor em uma imagem para seu inverso na roda de cores. Por exemplo, aplicar o filtro a um objeto vermelho (R=255, G=0, B=0) altera a cor para azul claro (R=, G=55, B=255).

Uma imagem em preto e branco; a imagem invertida

Uma imagem colorida; a imagem invertida


Para inverter cores: 1 2

Selecionar a imagem. Seguir um destes procedimentos: Inverter no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Ajustar cor >

Como trabalhar com um bitmap 141

Escolher Filtros > Ajustar cor > Inverter.


Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Embaamento e aguamento de um bitmap


O Fireworks dispe de um conjunto de opes de embaamento e aguamento que o usurio pode aplicar como Efeitos ao vivo ou filtros permanentes irreversveis. Embaamento de uma imagem O embaamento suaviza a aparncia de uma imagem bitmap. O Fireworks possui trs opes de embaamento:
Embaar suaviza

o foco de pixels selecionados. aproximadamente trs vezes mais que Embaar. uma mdia ponderada de embaamento a cada pixel para produzir

Embaamento maior embaa Desfoque Gaussiano aplica

um efeito de neblina.

Antes e depois de usar Desfoque Gaussiano


Para embaar uma imagem: 1 2

Selecionar a imagem. Seguir um destes procedimentos: ou Embaamento maior no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Embaar > Embaar Escolher Filtros > Embaar > Embaar ou Embaamento maior.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

142 Captulo 5

Para embaar uma imagem usando Desfoque Gaussiano: 1 2

Selecionar a imagem. Seguir um destes procedimentos para abrir a caixa de dilogo Desfoque Gaussiano: Gaussiano no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Embaar > Desfoque Escolher Filtros > Embaar > Desfoque Gaussiano.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Arrastar o controle deslizante Raio de desfoque para definir a intensidade do efeito de embaamento. Os valores variam de 0,1 a 250. Um aumento no raio resulta em um efeito de embaamento mais forte.

Clicar em OK.

Uso do efeito Localizar bordas para criar uma aparncia de esboo O efeito Localizar bordas identifica as transies de cores nas imagens e as transforma em linhas para dar aos bitmaps a aparncia de desenhos de linhas.

Original; aps a aplicao de Localizar bordas


Para aplicar o efeito Localizar bordas a uma rea selecionada, seguir um destes procedimentos:

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Outro > Localizar
bordas no menu pop-up Adiciona efeitos.

Escolher Filtros > Outro > Localizar bordas.


Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Como trabalhar com um bitmap 143

Converso de uma imagem em uma transparncia O efeito Converter em Alfa converte um objeto ou texto em uma transparncia com base na transparncia da imagem.
Para aplicar o efeito Converter em Alfa a uma rea selecionada, seguir um destes procedimentos:

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Outro >


Converter em Alfa no menu pop-up Adiciona efeitos.

Escolher Filtros > Outro > Converter em Alfa.


Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

Uso do recurso Aguar para aguar uma imagem O recurso Aguar corrige imagens embaadas. O Fireworks possui trs opes de aguamento:
Aguar ajusta

o foco de uma imagem embaada aumentando o contraste dos pixels adjacentes. o contraste dos pixels adjacentes aproximadamente trs vezes mais

Aguamento maior aumenta

que Aguar.
Desfocar mscara agua

uma imagem ajustando o contraste das bordas dos pixels. Esta opo oferece o maior controle, portanto, normalmente a melhor opo para aguar uma imagem.

Original; aps o aguamento


Para aguar uma imagem usando uma opo de aguamento: 1 2

Selecionar a imagem. Seguir um destes procedimentos para escolher uma opo de aguamento: Aguar ou Aguamento maior no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Aguar > Escolher Filtros > Aguar > Aguar ou Aguamento maior.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

144 Captulo 5

Para aguar uma imagem usando Desfocar mscara: 1 2

Selecionar a imagem. Seguir um destes procedimentos para abrir a caixa de dilogo Desfocar mscara: Desfocar mscara no menu pop-up Adiciona efeitos.

No Inspetor de propriedades, clicar no boto Adiciona efeitos e escolher Aguar > Escolher Filtros > Aguar > Desfocar mscara.
Nota: A aplicao de um filtro a partir do menu Filtros uma operao destrutiva; ou seja, no possvel desfaz-la, exceto quando Editar > Desfazer for uma opo. Para manter a capacidade de ajustar, desativar ou remover esse filtro, melhor aplic-lo como um Efeito ao vivo, conforme descrito na primeira opo com marcador desta etapa. Para mais informaes, consultar Uso de Efeitos ao vivo na pgina 213.

3 4

Arrastar o controle deslizante Grau de desfoque para selecionar o grau de efeito de aguamento de 1 a 500 por cento. Arrastar o controle deslizante Raio do pixel para selecionar um raio de 0,1 a 250. Um aumento no raio resulta em uma rea maior de contraste ntido em torno de cada borda de pixel.

Arrastar o controle deslizante Limiar para selecionar um limiar de 0 a 255. Valores entre 2 e 25 so os mais usados. Um aumento no limiar agua somente os pixels com contraste maior na imagem. Uma diminuio no limiar inclui pixels de menor contraste. Um limiar de 0 agua todos os pixels na imagem.

Clicar em OK.

Como trabalhar com um bitmap 145

146 Captulo 5

CAPTULO 6 Como trabalhar com objetos vetoriais

Um objeto vetorial uma imagem grfica de computador cuja forma definida por um traado. A forma de um traado vetorial determinada por pontos plotados ao longo do caminho. Uma cor de trao do objeto vetorial segue o traado. Seu preenchimento ocupa a rea interna do traado. Em geral, o trao e o preenchimento determinam a forma como o grfico aparecer quando for impresso ou publicado na Web. O Macromedia Fireworks MX possui vrias ferramentas para desenhar e editar objetos vetoriais que usam diversas tcnicas. Com as ferramentas de forma bsica, possvel desenhar rapidamente linhas retas, crculos e elipses, quadrados e retngulos, estrelas e qualquer polgono eqilateral de 3 a 360 lados. Pode-se desenhar traados vetoriais livres com as ferramentas Caneta e Traado vetorial. A ferramenta Caneta permite desenhar formas complexas com curvas suaves e linhas retas, plotando pontos um a um. Depois de desenhar objetos vetoriais, o Fireworks lhe oferece vrios mtodos para edit-los. possvel alterar a forma de um objeto movendo, adicionando ou excluindo pontos. Alm disso, possvel usar alas de ponto para alterar a forma dos segmentos de traado adjacentes. Ferramentas de forma livre permitem a alterao na forma dos objetos por meio da edio direta dos traados. A opo Comandos do menu Modificar lhe oferece mais opes para editar objetos, inclusive combinando objetos para criar um nico objeto, criando um objeto da partir do ponto de interseo de vrios objetos e expandindo o trao de um objeto. Alm disso, o usurio pode importar imagens e manipul-las usando esses comandos.

Desenho de objeto vetorial


O Fireworks possui vrias ferramentas para desenhar objetos vetoriais. Com elas possvel desenhar formas bsicas, traados livres e formas complexas plotando pontos um a um. Desenho de formas bsicas Quadrados, retngulos, crculos, ovais, estrelas e outros polgonos so facilmente desenhados com as ferramentas de forma bsica. possvel desenhar retngulos com formas arredondadas e ajustar o raio do canto depois de desenh-lo. Alm disso, pode-se desenhar uma variedade de estrelas, de estreitas e pontudas a largas e atarracadas.

147

As ferramentas de desenho de forma bsica esto na seo Vetor do painel Ferramentas. Quando usar qualquer ferramenta de desenho ou pintura para criar um objeto, a ferramenta aplicar os atributos atuais de trao e preenchimento ao objeto. Para alterar os atributos atuais de trao e preenchimento, bem como os atributos de trao e preenchimento de objetos existentes, consultar Captulo 8, Aplicao de cor, trao e preenchimento, na pgina 189.

Ferramentas de forma bsica Desenho de linhas, retngulos e elipses possvel usar a ferramenta Linha, Retngulo ou Elipse para desenhar rapidamente formas bsicas. A ferramenta Retngulo desenha retngulos como objetos agrupados. Para mover um ponto de canto de um retngulo de forma independente, necessrio desagrupar o retngulo ou usar a ferramenta Selecionar secundrio. Para desenhar retngulos com cantos arredondados, consultar Desenho de retngulos com cantos arredondados na pgina 149.
Para desenhar linha, retngulo ou elipse: 1 2 3

Selecionar a ferramenta Linha, Retngulo ou Elipse. Se desejar, definir os atributos de trao e preenchimento no Inspetor de propriedades. Consultar Captulo 8, Aplicao de cor, trao e preenchimento, na pgina 189. Arrastar na tela para desenhar a forma. Para a ferramenta Linha, arrastar com a tecla Shift para limitar linhas a incrementos de 45 graus. Para a ferramenta Retngulo ou Elipse, arrastar com a tecla Shift para limitar as formas a quadrados ou crculos.

Para desenhar linha, retngulo ou elipse a partir de um ponto central especfico:

Posicionar o ponteiro no ponto central pretendido e arrastar com a tecla Alt (Windows) ou com Option (Macintosh) a ferramenta de desenho.
Para limitar uma forma e desenhar a partir do ponto central:

Posicionar o ponteiro no ponto central pretendido e arrastar a ferramenta de desenho com as teclas Shift+Alt (Windows) ou com Shift+Option (Macintosh).
Para ajustar a posio de uma forma bsica durante o desenho:

Enquanto pressionar o boto do mouse, pressionar e manter a barra de espaos pressionada, depois arrastar o objeto para um outro local da tela. Soltar a barra de espaos para continuar a desenhar o objeto.
Nota: A ferramenta Linha uma exceo. Se pressionar a barra de espaos enquanto estiver usando a ferramenta Linha, a posio de uma linha no ser alterada na tela.

Para redimensionar linha, retngulo ou elipse, seguir um destes procedimentos:

Digitar novos valores de largura (L) ou altura (A) no Inspetor de propriedades ou no painel
Informaes.

148 Captulo 6

Selecionar a ferramenta Dimensionar na seo Selecionar do painel Ferramentas e arrastar a


ala de transformao de canto. Isso redimensiona o objeto proporcionalmente.
Nota: Tambm possvel redimensionar um objeto proporcionalmente ao selecionar Modificar > Transformar > Dimensionar e arrastar a ala de transformao de canto, ou selecionar Modificar > Transformar > Transformao numrica e digitar novas dimenses. Para mais informaes sobre como redimensionar ou dimensionar objetos, consultar Transformao e distoro de objetos selecionados e selees na pgina 118.

Arrastar o ponto de canto de um retngulo.


Nota: O dimensionamento de um objeto vetorial no altera a largura do trao.

Desenho de retngulos com cantos arredondados possvel desenhar retngulos com cantos arredondados usando a ferramenta Retngulo arredondado ou usando a opo Arredondamento no Inspetor de propriedades, para ajustar o arredondamento de cantos de retngulos selecionados. A ferramenta Retngulo arredondado desenha retngulos como objetos agrupados. Para mover pontos de retngulo arredondado livremente, necessrio desagrupar o retngulo ou usar a ferramenta Selecionar secundrio.
Para desenhar um retngulo com cantos arredondados: 1 2

Selecionar a ferramenta Retngulo arredondado, localizada no menu pop-up da ferramenta Retngulo. Arrastar o mouse na tela para desenhar o retngulo.
Dica: possvel ajustar o arredondamento do canto enquanto se desenha pressionando qualquer uma das teclas de seta ou as teclas numricas 1 ou 2 vrias vezes.

Para arredondar os cantos de um retngulo selecionado:

Inserir um valor entre 0 e 100 na caixa Arredondamento no Inspetor de propriedades e pressionar Enter, ou arrastar o controle deslizante pop-up.

Nota: Se o Inspetor de propriedades estiver a meia altura, clicar na seta expansora no canto direito inferior para expandi-lo na altura total.

Desenho de polgonos Com a ferramenta Polgono, possvel desenhar qualquer polgono eqilateral, desde um tringulo a um polgono com 360 lados.

Como trabalhar com objetos vetoriais 149

Para desenhar um polgono: 1 2

Selecionar a ferramenta Polgono, uma das ferramentas bsicas de desenho de forma, na seo Vetor do painel Ferramentas. No Inspetor de propriedades, seguir um destes procedimentos para especificar o nmero de lados do polgono:

Usar o controle deslizante para escolher de 3 a 25 lados. Digitar um nmero de 3 a 360 na caixa de texto Lados.

Arrastar o mouse para desenhar o polgono. Para limitar a orientao de um polgono a incrementos de 45 graus, manter a tecla Shift pressionada enquanto desenha. A ferramenta Polgono sempre desenha a partir de um ponto central.

Desenho de estrelas Com a opo Estrela da ferramenta Polgono, possvel desenhar estrelas com 3 at 360 pontas e todos os ngulos da faixa de pontas.
Para desenhar uma estrela: 1 2

Selecionar a ferramenta Polgono. No Inspetor de propriedades, selecionar Estrela no menu pop-up Forma.

3 4

Digitar o nmero de pontas da estrela na caixa de texto Lados. Selecionar Automtica ou digitar um valor na caixa de texto ngulo. Valores prximos de 0 resultam em pontos longos e finos; valores prximos de 100 resultam em pontos curtos e robustos.

Arrastar o mouse na tela para desenhar a estrela. Para limitar a orientao de uma estrela a incrementos de 45 graus, manter a tecla Shift pressionada durante o arraste. A ferramenta Polgono sempre desenha a partir de um ponto central.

150 Captulo 6

Desenho de traados de forma livre possvel desenhar traados vetoriais de forma livre com a ferramenta Traado vetorial praticamente da mesma forma quando desenha com um marcador de ponta porosa ou crayon.

Ferramenta Traado vetorial, localizada no menu pop-up da ferramenta Caneta possvel alterar os atributos de trao e preenchimento de traados desenhados com a ferramenta Traado vetorial. Consultar Captulo 8, Aplicao de cor, trao e preenchimento, na pgina 189. Uso da ferramenta Traado vetorial A ferramenta Traado vetorial possui uma grande variedade de categorias de traos de pincel, inclusive aergrafo, caligrafia, carvo, crayon e artificial. Em geral, cada categoria possui uma opo de traos, como pontas porosas, claras e escuras, leo borrifado, bambu, fita, confete, 3D, pasta de dente e pintura viscosa. Embora os traos sejam parecidos com a pintura ou tinta, cada um possui pontos e traados de um objeto vetorial. Isso significa que possvel alterar a forma do trao, usando qualquer uma das diversas tcnicas de edio vetorial. Depois de mudar a forma do traado, o trao redesenhado.

Pintura editada pela movimentao de pontos vetoriais possvel modificar traos de pincel e adicionar preenchimentos a objetos selecionados desenhados com a ferramenta Traado vetorial. As novas configuraes de trao e preenchimento so retidas para uso futuro da ferramenta Traado vetorial dentro do documento atual.
Para desenhar um traado vetorial de forma livre: 1

Selecionar a ferramenta Traado vetorial, localizada no menu pop-up da ferramenta Caneta.

Como trabalhar com objetos vetoriais 151

2 3 4

Se desejar, definir os atributos de trao e preenchimento no Inspetor de propriedades. Consultar Captulo 8, Aplicao de cor, trao e preenchimento, na pgina 189. Arrastar o mouse para desenhar. Para limitar o traado a uma linha horizontal ou vertical, manter a tecla Shift pressionada durante o arraste. Soltar o boto do mouse para terminar o traado. Para fechar o traado, soltar o boto do mouse quando tiver retornado o ponteiro ao ponto inicial do traado.

Desenho de um traado atravs da plotagem de pontos Uma forma para desenhar e editar objetos vetoriais no Fireworks plotar pontos como se estivesse desenhando uma figura conectada por pontos. Quando clicar em cada ponto com a ferramenta Caneta, o traado do objeto vetorial automaticamente desenhado desde o ltimo ponto clicado at o prximo. Alm de conectar os pontos s com segmentos retos, a ferramenta Caneta pode desenhar segmentos curvos suaves, derivados matematicamente, conhecidos como curvas Bzier. Cada tipo de ponto ponto de canto ou ponto de curva determina se as curvas adjacentes representam linhas retas ou curvas.

Ferramenta Caneta possvel modificar segmentos de traado reto e curvo arrastando os pontos. Alm disso, pode-se modificar segmentos de traado curvo arrastando as alas de ponto. possvel, inclusive, converter segmentos de traado reto em curvo (e vice-versa) pela converso dos pontos. Desenho de um segmento de traado reto Desenhar segmentos de linha reta com a ferramenta Caneta s uma questo de clicar para colocar os pontos. Cada clique com a ferramenta Caneta plota um ponto de canto.

Para desenhar um traado com segmentos de linha reta: 1

Selecionar a ferramenta Caneta.

152 Captulo 6

Se desejar, selecionar Editar > Preferncias e ativar uma das opes a seguir na guia Edio da caixa de dilogo Preferncias e depois clicar em OK:

Mostrar visualizao da caneta visualiza o segmento da linha que resultaria do prximo clique. Mostrar pontos slidos mostra os pontos slidos durante o desenho.
Nota: No Mac OS X, selecionar Fireworks > Preferncias, para abrir a caixa de dilogo Preferncias.

3 4 5 6

Clicar na tela para substituir o primeiro ponto de canto. Mover o ponteiro e clicar para colocar o prximo ponto. Um segmento de linha reta une os dois pontos. Continuar plotando pontos. Os segmentos retos unem intervalos entre pontos. Seguir um destes procedimentos para finalizar o traado, aberto ou fechado:

Clicar duas vezes no ltimo ponto para terminar o traado como aberto. Escolher uma outra ferramenta para termin-lo como um traado aberto.
Nota: Quando selecionar qualquer ferramenta Seleo ou ferramenta Vetor alm da ferramenta Texto e depois retornar ferramenta Caneta, seu prximo clique continuar com o desenho do objeto.

Clicar no primeiro ponto plotado para fechar o traado. Os pontos inicial e final de um traado
fechado so o mesmo ponto.

Nota: Ciclos formados por uma sobreposio de traado no so traados fechados. Apenas traados iniciados e terminados no mesmo ponto so considerados traados fechados.

Desenho de um segmento de traado curvo Para desenhar segmentos de traado curvo, basta clicar e arrastar durante a plotagem dos pontos. Durante o desenho, o ponto atual mostra alas. Sejam desenhados com a ferramenta Caneta ou com outra ferramenta de desenho do Fireworks, todos os pontos de todos os objetos vetoriais tm alas de ponto. No entanto, essas alas apenas so visveis nos pontos curvos.

Para desenhar um objeto com segmentos curvos: 1 2

Selecionar a ferramenta Caneta. Clicar para colocar o primeiro ponto de canto.

Como trabalhar com objetos vetoriais 153

Mover o local do prximo ponto e, em seguida, clicar e arrastar para elaborar um ponto de curva. Toda vez que clicar e arrastar o mouse, o Fireworks estende o segmento de linha para o novo ponto.

Continuar plotando pontos. Se um novo ponto for clicado e arrastado, ser elaborado um ponto de curva, se for apenas clicado, ser produzido um ponto de canto.
Dica: possvel alternar temporariamente para a ferramenta Selecionar secundrio de modo a alterar o local dos pontos e a forma das curvas durante o desenho. Pressionar a tecla Control (Windows) ou Command (Macintosh) enquanto arrasta um ponto ou uma ala de ponto com a ferramenta Caneta.

Seguir um destes procedimentos para finalizar o traado, aberto ou fechado:

Clicar duas vezes no ltimo ponto para terminar o traado como aberto. Escolher uma outra ferramenta para termin-lo como um traado aberto. Quando selecionar
algumas ferramentas e depois retornar ferramenta Caneta, seu prximo clique continuar com o desenho do objeto.

Clicar no primeiro ponto plotado para fechar o traado. Os pontos inicial e final de um traado
fechado so o mesmo ponto. Ajuste da forma de um segmento de traado reto possvel aumentar, diminuir ou alterar a posio de um segmento de traado reto pela movimentao dos pontos.
Para alterar um segmento de traado reto: 1 2

Selecionar o traado com a ferramenta Ponteiro ou Selecionar secundrio. Clicar em um ponto com a ferramenta Selecionar secundrio para selecion-lo. Pontos de canto selecionados aparecem como quadrados azuis slidos. Arrastar o ponto ou usar as teclas de seta para mover o ponto para um novo local.

Ajuste da forma de um segmento de traado curvo possvel editar a forma de um objeto vetorial arrastando as alas de ponto com a ferramenta Selecionar secundrio. As alas de ponto determinam o grau de curvatura entre os pontos fixos. Essas curvas so conhecidas como curvas Bzier.
Para editar a curva Bzier de um segmento de traado: 1

Selecionar o traado com a ferramenta Ponteiro ou Selecionar secundrio.

154 Captulo 6

Clicar em um ponto de curva com a ferramenta Selecionar secundrio para selecion-lo. Um ponto de curva selecionado aparece como um quadrado azul slido. As alas de ponto se estendem a partir do ponto.

Arrastar as alas para um novo local. Para restringir o movimento da ala a ngulos de 45 graus, manter a tecla Shift pressionada durante o arraste. A visualizao do traado azul mostra o local em que o novo traado ser desenhado se o boto do mouse for solto.
Alas de ponto Ponteiro Selecionar secundrio Visualiza traado

Traado Ponto selecionado

Por exemplo, se arrastar a ala de ponto esquerda para baixo, a ala de ponto direita ir para cima. Para mover a ala de forma independente, arrast-la pressionando a tecla Alt.

Converso de segmentos de traado para reto ou curvo Segmentos de traado reto so intersecionados por pontos de canto. Segmentos de traado curvo contm pontos de curva.

Como trabalhar com objetos vetoriais 155

possvel a converso de um segmento reto em curvo e vice-versa, por meio da converso do ponto.

Para converter um ponto de canto de um traado selecionado em um ponto de curva: 1 2

Selecionar a ferramenta Caneta. Clicar em um ponto de canto e arrast-lo para longe dele. As alas se estendem, curvando os segmentos adjacentes.

Nota: Para editar as alas de ponto, selecionar a ferramenta Selecionar secundrio ou pressionar a tecla Control (Windows) ou Command (Mac) enquanto a ferramenta Caneta estiver ativa.

Para converter um ponto de curva de um traado selecionado em um ponto de canto: 1 2

Selecionar a ferramenta Caneta. Clicar em um ponto curvo.

As alas se retraem e os segmentos adjacentes ficam retos.

156 Captulo 6

Seleo de um ponto A ferramenta Selecionar secundrio permite a seleo de vrios pontos. Antes de selecionar um ponto com a ferramenta Selecionar secundrio, necessrio selecionar o traado com a ferramenta Ponteiro ou Selecionar secundrio, ou clicar na miniatura no painel Camadas.
Para selecionar pontos especficos em um traado selecionado: 1 2

Selecionar a ferramenta Selecionar secundrio. Seguir um destes procedimentos:

Clicar em um ponto ou manter a tecla Shift pressionada e clicar em vrios pontos, um por um.

Arrastar em volta dos pontos a serem selecionados.


Para exibir as alas de um ponto de curva:

Clicar no ponto com a ferramenta Selecionar secundrio. Se qualquer ponto mais perto do ponto clicado for um ponto de curva, a ala prxima tambm ser exibida. Movimento de um ponto e de uma ala de ponto possvel alterar a forma de um objeto arrastando os pontos e as alas de ponto com a ferramenta Selecionar secundrio.
Para mover um ponto:

Arrastar o ponto com a ferramenta Selecionar secundrio. O traado redesenhado para refletir a nova posio do ponto.
Para alterar a forma de um segmento de traado:

Arrastar uma ala de ponto com a ferramenta Selecionar secundrio. Arrastar com a tecla Alt (Windows) ou com Option (Macintosh) para arrastar uma ala de cada vez.

Para ajustar a ala de um ponto de curva: 1

Selecionar a ferramenta Selecionar secundrio.

Como trabalhar com objetos vetoriais 157

2 3

Selecionar um ponto de canto. Arrastar com a tecla Alt (Windows) ou com Option (Macintosh) o ponto para exibir sua ala e dobrar o segmento adjacente.

Arraste de uma ala de ponto com a ferramenta Selecionar secundrio para editar o segmento adjacente de traado Insero e excluso de um ponto em um traado possvel adicionar e excluir pontos de um traado. A adio de pontos a um traado proporciona controle sobre um segmento especfico dentro do traado. A excluso de pontos do traado muda sua forma ou simplifica a edio.

Para inserir um ponto em um traado selecionado:

Com a ferramenta Caneta, clicar em qualquer ponto do traado que no tenha um ponto.
Para excluir o ponto de um segmento de traado selecionado, seguir um destes procedimentos:

Clicar em um ponto de canto de um objeto selecionado com a ferramenta Caneta. Clicar duas vezes em um ponto de curva de um objeto selecionado com a ferramenta Caneta. Selecionar um ponto com a ferramenta Selecionar secundrio e pressionar a tecla Delete ou
Backspace. Continuao de um traado existente possvel usar a ferramenta Caneta para continuar a desenhar um traado aberto existente.

158 Captulo 6

Para retomar o desenho de um traado aberto existente: 1 2

Selecionar a ferramenta Caneta. Clicar no ponto final e continuar o traado. O ponteiro da ferramenta Caneta alterado para indicar a adio de um traado.

Mesclagem de dois traados abertos possvel conectar dois traados abertos para formar um traado contnuo. Na conexo de dois traados, os atributos de trao, preenchimento e efeito do segundo traado superior se transformam nos atributos do traado recm-mesclado.
Para mesclar dois traados abertos: 1 2 3

Selecionar a ferramenta Caneta. Clicar no ponto final de um dos traados. Mover o ponteiro para o ponto final do outro traado e dar um clique.

Unir automaticamente traados abertos semelhantes possvel unir facilmente um traado aberto com outro que tenha caractersticas de trao e preenchimento semelhantes.
Para unir automaticamente dois traados abertos: 1 2

Selecionar um traado aberto. Selecionar a ferramenta Selecionar secundrio e arrastar um ponto final do traado para dentro de alguns pixels do final do traado semelhante. O ponto final fica alinhado com o outro traado e os dois se transformam em um nico traado.

Edio de um traado
O Fireworks lhe oferece diversos mtodos para edio de objetos vetoriais. possvel alterar a forma de um objeto movendo, adicionando ou excluindo pontos, ou, ainda, mover as alas de ponto para alterar a forma de segmentos de traado adjacente. Ferramentas de forma livre permitem a alterao na forma dos objetos por meio da edio direta dos traados. Alm disso, possvel usar operaes de traado para criar novas formas, pela combinao ou alterao de traados existentes. Edio com ferramentas vetoriais Alm de arrastar pontos e alas de ponto, o usurio pode usar diversas ferramentas do Fireworks para editar objetos vetoriais diretamente.

Como trabalhar com objetos vetoriais 159

Como dobrar e mudar a forma de objetos vetoriais A ferramenta Forma livre permite que o usurio dobre e mude a forma de objetos vetoriais diretamente, em vez de manipular os pontos. possvel empurrar ou puxar qualquer parte de um traado, independentemente de onde os pontos estiverem localizados. O Fireworks adiciona, move ou exclui pontos automaticamente ao longo do traado, medida que a forma do objeto vetorial for alterada.
Comprimento especificado

Ferramenta Forma livre puxando um segmento de traado

Ferramenta Forma livre empurrando o segmento de um traado e traado redesenhado para refletir o puxado Quando o usurio move o ponteiro do mouse sobre um traado selecionado, ele se transforma no ponteiro de empurrar ou puxar, dependendo da sua posio em relao ao traado selecionado.
Este ponteiro Indica que A ferramenta Forma livre est em uso. A ferramenta Forma livre est em uso e o ponteiro de puxar est em posio para puxar o traado selecionado. A ferramenta Forma livre est em uso e o ponteiro de puxar est puxando o traado selecionado.

160 Captulo 6

Este ponteiro

Indica que A ferramenta Forma livre est em uso e o ponteiro de empurrar est ativo.

A ferramenta Mudar forma da rea est em uso e o ponteiro de mudana da rea est ativo. A rea do crculo interno para o crculo externo representa a intensidade reduzida.

Quando o ponteiro estiver diretamente sobre o traado, ser possvel puxar o traado. Quando o ponteiro no estiver diretamente sobre o traado, ser possvel empurrar o traado. Voc pode alterar o tamanho do ponteiro de empurrar e puxar.
Nota: A ferramenta Forma livre da rea tambm responde presso de um digitalizador Wacom ou de outra mesa digitalizadora compatvel.

Para puxar um traado selecionado: 1 2

Selecionar a ferramenta Forma livre. Mover o ponteiro diretamente sobre o traado selecionado. O ponteiro alterado para o ponteiro puxar.

Arrastar o traado.

Para empurrar um traado selecionado: 1

Selecionar a ferramenta Forma livre. O ponteiro alterado para o ponteiro empurrar e puxar.

2 3

Apontar ligeiramente para fora do traado. Arrastar em direo ao traado para empurr-lo. Empurrar ou puxar o traado selecionado para mudar sua forma.

Para alterar o tamanho do ponteiro de empurrar, seguir um destes procedimentos:

Com o boto do mouse pressionado, pressionar a tecla Seta direita ou 2, para aumentar a
largura do ponteiro.

Com o boto do mouse pressionado, pressionar a tecla Seta esquerda ou 1, para diminuir a
largura do ponteiro.

Para definir o tamanho do ponteiro e o comprimento do segmento do traado afetado, cancelar


a seleo de todos os objetos do documento e, em seguida, digitar um valor de 1 a 500 na caixa de texto Tamanho do Inspetor de propriedades. O valor indica o tamanho do ponteiro em pixels.

Como trabalhar com objetos vetoriais 161

Como distorcer um traado possvel usar a ferramenta Mudar forma da rea para puxar a rea de todos os traados selecionados para dentro do crculo externo do ponteiro de mudana de forma da rea.

O crculo interno do ponteiro o limite da ferramenta em sua intensidade total. A rea entre os crculos interno e externo muda a forma dos traados abaixo da intensidade total. O crculo externo do ponteiro determina o movimento gravitacional do ponteiro. Voc pode definir a sua intensidade.
Nota: A ferramenta Mudar forma da rea tambm responde presso de um digitalizador Wacom ou de outra mesa digitalizadora compatvel.

Para distorcer traados selecionados: 1 2

Selecionar a ferramenta Mudar forma da rea, localizada no menu pop-up da ferramenta Forma livre. Arrastar os traados para redesenh-los.

Para alterar o tamanho do ponteiro de mudana de forma da rea, seguir um destes procedimentos:

Com o boto do mouse pressionado, pressionar a tecla Seta direita ou 2, para aumentar a
largura do ponteiro.

Com o boto do mouse pressionado, pressionar a tecla Seta esquerda ou 1, para diminuir a
largura do ponteiro.

Para definir o tamanho do ponteiro e o comprimento do segmento do traado afetado, cancelar a


seleo de todos os objetos do documento e, em seguida, digitar um valor de 1 a 500 na caixa de texto Tamanho do Inspetor de propriedades. O valor indica o tamanho do ponteiro em pixels.
Para definir a intensidade do crculo interno do ponteiro de mudana de forma da rea:

Digitar um valor de 1 a 100 na caixa de texto Fora do Inspetor de propriedades. O valor indica a porcentagem de intensidade potencial do ponteiro. Quanto maior a porcentagem, maior ser a intensidade.

162 Captulo 6

Como redesenhar um traado possvel usar a ferramenta Redesenhar traado para redesenhar ou estender o segmento de um traado selecionado, mantendo suas caractersticas de trao, preenchimento e efeitos.
Para redesenhar ou estender o segmento de um traado selecionado: 1 2

Selecionar a ferramenta Redesenhar traado, localizada no menu pop-up da ferramenta Caneta. Mover o ponteiro diretamente sobre o traado. O ponteiro transformado no ponteiro de redesenho de traado. Arrastar o mouse para redesenhar ou estender um segmento de traado. A parte do traado a ser redesenhada est realada em vermelho. Soltar o boto do mouse.

3 4

Alterao da aparncia de um traado por presso e velocidade variada Voc pode alterar a aparncia de um traado usando as ferramentas Corretor de traado. Com a utilizao de presso e velocidade variada, possvel alterar as propriedades do trao de um traado. Essas propriedades incluem tamanho do trao, ngulo, quantidade de tinta, disperso, matiz, luminosidade e saturao. possvel especificar quais as propriedades que sero afetadas pelas ferramentas Corretor de traado usando a guia Sensibilidade da caixa de dilogo Editar trao. Alm disso, pode-se especificar qual a quantidade de presso e velocidade que afeta essas propriedades. Para detalhes sobre as opes de configurao da caixa de dilogo Editar trao, consultar Como trabalhar com um trao na pgina 198.

Ferramentas Corretor de traado Recorte de um traado em vrios objetos A ferramenta Faca permite fatiar um traado em dois ou mais traados.

Para recortar um traado selecionado: 1

Selecionar a ferramenta Faca.


Nota: Se usar a borracha das canetas Wacom a ferramenta Faca ser selecionada automaticamente.

Seguir um destes procedimentos:

Arrastar o ponteiro no traado. Clicar no traado.


3

Cancelar a seleo do traado.

Como trabalhar com objetos vetoriais 163

Edio com operaes de traado possvel usar operaes de traado no menu Modificar para criar novas formas, por meio da combinao ou alterao de traados existentes. No caso de algumas operaes de traado, a ordem de empilhamento dos objetos de traado selecionados define o modo de funcionamento da operao. Para informaes sobre como organizar a ordem de empilhamento de objetos selecionados, consultar Empilhamento de um objeto na pgina 123.
Nota: O uso de uma operao de traado remove todas as informaes de presso e velocidade dos traados afetados.

Combinao de um objeto de traado Voc pode combinar objetos de traado em um nico objeto de traado. possvel conectar os pontos finais de dois traados abertos para criar um nico traado fechado, ou pode-se unir vrios traados para criar um traado composto.
Para criar um traado contnuo a partir de dois traados abertos: 1 2 3

Selecionar a ferramenta Selecionar secundrio. Selecionar dois pontos finais nos traados abertos. Selecionar Modificar > Combinar traados > Unir.

Para criar um traado composto: 1 2

Selecionar dois ou mais traados abertos ou fechados. Selecionar Modificar > Combinar traados > Unir.

Para separar um traado composto: 1 2

Selecionar o traado composto. Selecionar Modificar > Combinar traados > Dividir.

Para combinar traados fechados selecionados como um traado que abranja toda a rea dos traados originais:

Selecionar Modificar > Combinar traados > Unio. O traado resultante assume os atributos de trao e preenchimento do objeto que est colocado mais atrs. Criao de um objeto a partir da interseo de outros objetos Com a utilizao do comando Interseo, possvel criar um objeto a partir da interseo de dois ou mais objetos.

164 Captulo 6

Para criar um traado fechado que abranja a rea comum a todos os traados selecionados:

Selecionar Modificar > Combinar traados > Interseo. O traado resultante assume os atributos de trao e preenchimento do objeto que est colocado mais atrs. Remoo de partes de um objeto de traado possvel remover partes de um objeto de traado selecionado, conforme definido pelas partes sobrepostas de outro objeto de traado selecionado que est organizado na sua frente.

Para remover partes de um objeto de traado: 1 2 3 4

Selecionar o objeto de traado que define a rea a ser removida. Selecionar Modificar > Organizar > Trazer para frente. Manter a tecla Shift pressionada e adicionar seleo o objeto de traado do qual as partes devem ser removidas. Selecionar Modificar > Combinar traados > Perfurao. Os atributos de trao e preenchimento permanecem inalterados.

Corte de um traado possvel cortar um traado usando a forma de um outro traado. O traado da frente ou o mais superior define a forma da rea cortada.

Para cortar um traado selecionado: 1 2 3

Selecionar o objeto de traado que define a rea a ser cortada. Selecionar Modificar > Organizar > Trazer para frente. Manter a tecla Shift pressionada e adicionar seleo o objeto de traado a ser cortado.

Como trabalhar com objetos vetoriais 165

Selecionar Modificar > Combinar traados > Cortar. O objeto de traado resultante retm os atributos de trao e preenchimento do objeto que est colocado mais atrs.

Simplificao de um traado possvel remover pontos de um traado e manter a mesma forma geral. O comando Simplificar remove os pontos redundantes do traado na quantidade especificada. Convm usar o comando Simplificar se tiver uma linha reta com mais de dois pontos, por exemplo. (S dois pontos so necessrios para formar uma linha reta.) Ou, talvez, seu traado tenha pontos que caiam exatamente um em cima do outro. O comando Simplificar remover os pontos desnecessrios para reproduzir o traado desenhado.
Para simplificar um traado selecionado: 1

Selecionar Modificar > Alterar traado > Simplificar. A caixa de dilogo Simplificar exibida. Digitar uma quantidade de simplificao e clicar em OK. medida que aumentar a quantidade de simplificao, estar aumentando a quantidade que o Fireworks ter permisso para alterar o traado de modo a reduzir o nmero de pontos nele existentes.

Expanso de um trao possvel converter o trao de um traado selecionado em traado fechado. O traado resultante cria a iluso de um traado sem preenchimento e um trao com os mesmos atributos que o preenchimento do objeto original.

Nota: A expanso do trao de um traado que faz interseo com ele prprio pode produzir resultados interessantes. Se o traado original tiver um preenchimento, as partes de interseo do traado no tero preenchimento depois da expanso do trao.

166 Captulo 6

Para expandir o trao de um objeto selecionado: 1

Selecionar Modificar > Alterar traado > Expandir trao para abrir a caixa de dilogo Expandir trao.

2 3 4

Definir a largura do traado fechado resultante. Especificar um tipo de canto: meia-esquadria, redondo ou chanfrado. Se selecionar meia-esquadria, ser necessrio definir o limite de meia-esquadria, o ponto em que um canto de meia-esquadria se torna automaticamente um canto chanfrado. O limite de meia-esquadria a proporo do comprimento do canto de meia-esquadria em relao largura do trao. Selecionar uma opo de extremidade da linha: boto, quadrada ou redonda. Depois, clicar em OK. Um traado fechado na forma do original e com os mesmos atributos de trao e preenchimento substitui o traado original.

Retrao ou expanso de um traado Voc pode retrair ou expandir o traado de um objeto selecionado em um nmero especfico de pixels.
Para expandir ou retrair um traado selecionado: 1 2

Selecionar Modificar > Alterar traado > Interiorizar traado para abrir a caixa de dilogo Interiorizar traado. Selecionar uma direo para retrair ou expandir o traado:
Dentro retrai

o traado. o traado.

Fora expande 3 4 5

Definir a largura entre o traado original e o traado expandido ou retrado. Especificar um tipo de canto: meia-esquadria, redondo ou chanfrado. Se selecionar meia-esquadria, ser necessrio definir o limite de meia-esquadria, o ponto em que um canto de meia-esquadria se torna automaticamente um canto chanfrado. O limite de meia-esquadria a proporo do comprimento do canto de meia-esquadria em relao largura do trao. Clicar em OK. Um objeto de traado maior ou menor com os mesmos atributos de trao e preenchimento substitui o objeto de traado original.

Como trabalhar com objetos vetoriais 167

168 Captulo 6

CAPTULO 7 Utilizao de texto

O Macromedia Fireworks MX tem muitos recursos de texto normalmente reservados para aplicativos de editorao eletrnica sofisticados. Voc pode criar texto em vrias fontes e tamanhos, alm de ajustar kerning, espaamento, cor, entrelinhamento, deslocamento da linha de base e muito mais. Combinar os recursos de edio de texto do Fireworks com a vasta gama de traos, preenchimentos, efeitos e estilos faz do texto um elemento vivo dos seus projetos grficos. Tambm possvel usar o verificador ortogrfico do Fireworks para corrigir erros ortogrficos. A capacidade de editar texto a qualquer momento mesmo depois de aplicar Efeitos ao vivo como sombras e chanfros significa que possvel alterar o texto com facilidade. Tambm possvel copiar objetos que incluam texto e alterar o texto para cada cpia. Texto vertical, texto transformado, texto anexado a traados e texto convertido em traados ou imagens estendem as possibilidades de projeto. possvel importar texto mantendo os atributos RTF (Rich Text Format). Alm disso, ao importar um documento Photoshop que contm texto, o texto permanece editvel. O Fireworks trata fontes ausentes na importao pedindo para escolher uma fonte substituta ou permitindo importar texto como uma imagem esttica.

Digitao de texto
Com a ferramenta Texto e as opes do Inspetor de propriedades, possvel digitar, formatar e editar texto em seus grficos.

Ferramenta Texto
Nota: Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades do texto.

O Inspetor de propriedades quando a ferramenta Texto estiver selecionada

169

Criao de bloco de texto Todo texto em um documento Fireworks aparece dentro de um retngulo com alas denominado bloco de texto.

Para digitar texto: 1

Escolher a ferramenta Texto. O Inspetor de propriedades exibe opes para a ferramenta Texto. Escolher fonte, tamanho, espaamento e outras caractersticas de texto. Seguir um destes procedimentos: de dimensionamento automtico.

2 3

Clicar no documento onde deseja que o bloco de texto comece. Ser criado um bloco de texto Arrastar para desenhar um bloco de texto. Ser criado um bloco de texto com largura fixa.
Para mais informaes sobre os diferentes tipo de blocos de texto, consultar Utilizao de um bloco de texto de dimensionamento automtico e largura fixa na pgina 171.
4 5 6

Digitar o texto. Para inserir uma quebra de pargrafo, pressionar Enter. Se desejar, realar o texto no bloco de texto aps digit-lo e reformat-lo. Ao concluir a digitao do texto, seguir um destes procedimentos:

Clicar fora do bloco de texto. Escolher outra ferramenta no painel Ferramentas. Pressionar Esc.
Como mover um bloco de texto possvel selecionar um bloco de texto e mov-lo para qualquer ponto do documento, como qualquer outro objeto. Tambm possvel mover blocos de texto ao arrastar para cri-los.
Para mover um bloco de texto:

Arrast-lo at o novo local.


Para mover um bloco de texto enquanto arrasta para cri-lo: 1 2

Manter pressionado o boto do mouse, pressionar e manter pressionada a barra de espao no teclado e arrastar o bloco de texto para outro local na tela. Soltar a barra de espao para continuar a desenhar o bloco de texto.

170 Captulo 7

Utilizao de um bloco de texto de dimensionamento automtico e largura fixa O Fireworks trabalha com blocos de texto de dimensionamento automtico e blocos de texto de largura fixa. Um bloco de texto de dimensionamento automtico expande-se horizontalmente medida que o usurio digita. Se remover texto, o bloco de texto de dimensionamento automtico encolher para acomodar o texto restante. Blocos de texto de dimensionamento automtico so criados por padro quando clicar na tela com a ferramenta Texto e comear a digitar. Blocos de texto de largura fixa permitem controlar a largura de texto com quebra de linha. Esses so criados por padro quando arrastar para desenhar um bloco de texto com a ferramenta Texto. Quando o ponteiro do texto estiver ativo em um bloco de texto, um crculo ou quadrado vazado aparece no canto superior direito do bloco de texto. O crculo indica que o bloco de texto de dimensionamento automtico; o quadrado indica que de largura fixa. Clicar no canto alterna entre os dois.
Indicador de largura fixa Indicador de dimensionamento automtico

Um bloco de texto de largura fixa e um bloco de texto de dimensionamento automtico


Para alterar um bloco de texto para largura fixa ou dimensionamento automtico: 1 2

Clicar duas vezes dentro do bloco de texto. Clicar duas vezes no crculo ou quadrado no canto superior direito do bloco de texto. O bloco de texto alterna para o outro tipo.

Para alterar um bloco de texto selecionado para largura fixa redimensionando-o:

Arrastar uma ala de redimensionamento. O bloco de texto alterado automaticamente de dimensionamento automtico para largura fixa.

Edio de texto
Em um bloco de texto, possvel variar todos os aspectos do texto, inclusive tamanho, fonte, espaamento, entrelinhamento e deslocamento da linha de base. Ao editar o texto, seus atributos de trao, preenchimento e efeitos sero respectivamente redesenhados. possvel alterar os atributos de um bloco de texto, usando o Inspetor de propriedades. Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades do texto.

Inspetor de propriedades quando o texto estiver selecionado

Utilizao de texto

171

Tambm possvel usar o Editor de texto e os comandos no menu Texto para editar texto, mas o Inspetor de propriedades oferece o meio mais rpido para alterar os atributos de texto e proporciona controle de edio mais detalhado do que as outras duas opes. Para mais informaes sobre o Editor de texto, consultar Utilizao do Editor de texto na pgina 186.
Nota: As alteraes feitas durante um sesso de edio de texto consistem em apenas um Desfazer. Escolher Editar > Desfazer durante a edio de texto desfar todas as edies feitas a partir do momento em que clicou duas vezes no bloco de texto para editar seu contedo.

Para editar o texto: 1

Selecionar o texto que deseja alterar: selecionar o bloco inteiro. Para selecionar vrios blocos simultaneamente, manter pressionada a tecla Shift ao selecionar cada bloco. Clicar duas vezes em um bloco de texto com a ferramenta Ponteiro ou Selecionar secundrio e realar um intervado de texto. Clicar dentro de um bloco de texto com a ferramenta Texto e realar um intervalo de texto. Fazer as alteraes. Para mais informaes sobre como alterar atributos de texto, consultar Escolha de fonte, tamanho e estilo do texto na pgina 172, Aplicao de cor do texto na pgina 173, Configurao de kerning na pgina 174, Configurao de entrelinhamento na pgina 175, Configurao da orientao do texto na pgina 176, Configurao do alinhamento de texto na pgina 177 e Recuo do texto na pgina 177. Seguir um destes procedimentos para aplicar as alteraes: Clicar fora do bloco de texto. Escolher outra ferramenta no painel Ferramentas. Pressionar Esc.

Clicar em um bloco de texto com a ferramenta Ponteiro ou Selecionar secundrio para


2

Escolha de fonte, tamanho e estilo do texto Usar o Inspetor de propriedades para alterar a fonte, o tamanho e os atributos de estilo do texto em um bloco de texto.
Nota: Para usar fontes Tipo 1 nos sistemas operacionais Macintosh 9.x, necessrio o Adobe Type Manager 4 ou posterior. Ele no necessrio para o OS X.

Para alterar a fonte, o tamanho e o estilo do texto selecionado usando o Inspetor de propriedades: 1

Para alterar a fonte, escolher uma fonte no menu pop-up Fontes.

2 3

Para alterar o tamanho da fonte, arrastar o controle deslizante pop-up Tamanho da fonte ou digitar um valor na caixa de texto. O tamanho da fonte medido em pontos. Para aplicar um estilo negrito, itlico ou sublinhado, clicar no boto de estilo correspondente.

Nota: Quando transformar um bloco de texto e o resultado for texto redimensionado ou escalonado, o tamanho da fonte antes da transformao continuar o mesmo no Inspetor de propriedades quando o texto for selecionado. Alteraes subseqentes do tamanho da fonte do texto transformado alteraro o tamanho do texto, mas apenas em relao transformao.

172 Captulo 7

Aplicao de cor do texto A cor do texto controlada pela caixa Cor de preenchimento. Por padro, o texto preto e sem trao. possvel alterar a cor de todo o texto em um bloco de texto selecionado ou do texto realado em um bloco de texto. A ferramenta Texto mantm a cor atual do texto de um bloco de texto para outro. A ferramenta Texto mantm a cor atual do texto independentemente da cor de preenchimento de outras ferramentas. Quando usar outra ferramenta depois de usar a ferramenta Texto, as configuraes de preenchimento e trao revertero s configuraes mais recentes antes da utilizao da ferramenta Texto. Da mesma forma, quando retornar ferramenta Texto, a cor de preenchimento reverter configurao mais recente da ferramenta Texto e o trao ser redefinido como Nenhum. A cor atual da ferramenta Texto ser retida quando alternar de um documento para outro ou fechar e reabrir o Fireworks. Pode-se adicionar um trao e Efeitos ao vivo a todo o texto em um bloco de texto selecionado, mas no realar o texto. As caractersticas e Efeitos ao vivo aplicados a um bloco de texto so atualizados quando editar o texto no bloco de texto, mas a ferramenta Texto no reter as caractersticas do trao ou Efeitos ao vivo se criar um novo bloco de texto. Para mais informaes, consultar Como aplicar traos, preenchimentos e efeitos ao texto na pgina 180. Como aplicar cor a todo o texto em blocos de texto selecionados possvel aplicar cor de texto a todo o texto nos blocos de texto selecionados usando o Inspetor de propriedades, qualquer caixa Cor de preenchimento ou a ferramenta Conta-gotas. Tambm possvel usar qualquer um desses mtodos para definir a cor do texto para a ferramenta Texto.
Para definir a cor do texto para todo o texto em um bloco de texto selecionado, seguir um destes procedimentos:

Clicar na caixa Cor de preenchimento no Inspetor de propriedades e escolher uma cor na


janela pop-up de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gontagotas enquando a janela estiveraberta.

Caixa Cor de preenchimento Caixa Cor do trao

Janela pop-up Cor de preenchimento

Caixa Cor de preenchimento no Inspetor de propriedades

Utilizao de texto 173

Clicar na caixa Cor de preenchimento no painel Ferramentas e escolher uma cor na janela popup de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gonta-gotas enquando a janela pop-up estiver aberta.

Clicar no cone ao lado da caixa Cor de preenchimento no painel Ferramentas, escolher a


ferramenta Conta-gotas e clicar para amostrar uma cor em qualquer lugar de qualquer documento aberto. A cor na caixa Cor de preenchimento no painel Ferramentas muda para refletir a cor amostrada com o ponteiro conta-gotas ou com a ferramenta Conta-gotas, e a cor do texto selecionado tambm muda. Como aplicar cor ao texto realado em um bloco de texto possvel alterar a cor do texto realado em um bloco de texto usando o Inspetor de propriedades ou qualquer caixa Cor de preenchimento. No possvel usar a ferramenta Conta-gotas para editar a cor do texto realado.
Nota: Se tentar aplicar um trao ou Efeitos ao vivo ao texto realado em um bloco de texto, o bloco de texto inteiro ser automaticamente selecionado.

Para aplicar cor de texto apenas ao texto selecionado em um bloco de texto, seguir um destes procedimentos:

Clicar na caixa Cor de preenchimento no Inspetor de propriedades e escolher uma cor da


janela pop-up de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gontagotas enquando a janela pop-up estiver aberta.

Clicar na caixa Cor de preenchimento no painel Ferramentas e escolher uma cor na janela popup de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gonta-gotas enquando a janela pop-up estiver aberta. Configurao de kerning O kerning aumenta ou diminui o espaamento entre certos pares de letras para melhorar a aparncia. A maioria das fontes inclui informaes que automaticamente reduzem a quantidade de espao entre certos pares de letras, como TA ou Va. O kerning automtico do Fireworks utiliza informaes de kerning de uma fonte ao exibir texto, mas possvel desativ-lo em tamanhos de ponto menores ou quando o texto no tiver suavizao de serrilhado. O kerning medido como um porcentagem. Para definir o kerning, usar o Inspetor de propriedades ou o teclado.
Para desabilitar o kerning automtico:

No Inspetor de propriedades, desmarcar Kern automtico. Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades.
Para definir o kerning: 1

Seguir um destes procedimentos para selecionar o texto para fazer kerning:

Clicar entre dois caracteres com a ferramenta Texto. Usar a ferramenta Texto para realar os caracteres que deseja alterar. Usar a ferramenta Ponteiro para selecionar um bloco de texto inteiro. Clicar com Shift para
selecionar vrios blocos de texto.

174 Captulo 7

Seguir um destes procedimentos: porcentagem na caixa de texto.


Porcentagem de kerning

No Inspetor de propriedades, arrastar o controle deslizante pop-up Kerning ou digitar uma

Controle deslizante pop-up de kerning

Zero representa kerning normal. Valores positivos distanciam as letras. Valores negativos aproximam as letras.

Manter pressionada a tecla Control (Windows) ou Command (Macintosh) enquanto pressiona


as teclas seta esquerda ou seta direita no teclado. A tecla de seta esquerda distancia as letras em 1% e a tecla de seta direita aproxima as letras em 1%.
Dica: Manter pressionada as teclas Shift e Control (Windows) ou Shift e Command (Macintosh) enquanto pressiona as teclas seta esquerda ou seta direita para ajustar o kerning em incrementos de 10%.

Configurao de entrelinhamento O entrelinhamento determina a distncia entre linhas adjacentes em um pargrafo. O entrelinhamento pode ser medido em pixels ou como uma porcentagem do tamanho do ponto que as linhas so separadas de uma linha de base a outra. Para definir o entrelinhamento, usar o Inspetor de propriedades ou o teclado.

Opes de entrelinhamento no Inspetor de propriedades


Para definir o entrelinhamento do texto selecionado no Inspetor de propriedades: 1 2

No Inspetor de propriedades, arrastar o controle deslizante pop-up Entrelinhamento ou digitar um valor na caixa de texto. O padro 100%. Para alterar o tipo de unidade do entrelinhamento, escolher % ou px (pixels) no menu pop-up Unidades de entrelinhamento.

Para definir o entrelinhamento do texto selecionado usando o teclado:

Manter pressionada a tecla Control (Windows) ou Command (Macintosh) enquanto pressiona as teclas seta para cima ou tecla para baixo. A tecla de seta para cima distancia as linhas e a tecla de seta para baixo as aproxima.
Dica: Manter pressionadas as teclas Shift e Control (Windows) ou Shift e Command (Macintosh) enquanto pressiona as teclas seta para cima ou seta para baixo para ajustar o kerning em incrementos de 10%.

Utilizao de texto 175

Configurao da orientao do texto Um bloco de texto pode ser orientado horizontal ou verticalmente. Por padro, o texto orientado horizontalmente.

Orientao horizontal e vertical O texto tambm pode fluir da direita para a esquerda ou da esquerda para a direita.

Texto fluindo da esquerda para a direita e da direita para a esquerda No Fireworks, possvel definir a orientao horizontal e vertical, assim como a direo do fluxo de texto no Inspetor de propriedades. Essas configuraes se aplicam apenas a blocos de texto inteiros.
Para definir a orientao de um bloco de texto selecionado: 1 2

Clicar no boto Orientao do texto no Inspetor de propriedades. Selecionar uma opo de orientao no menu pop-up:
Horizontal da esquerda para a direita

a configurao padro do texto no Fireworks, para a maior parte dos idiomas. Ela orienta o texto na horizontal e exibe os caracteres da esquerda para a direita.

Horizontal da direita para a esquerda orienta o texto na horizontal e exibe os caracteres da direita para a esquerda. til para exibir texto em idiomas em que o texto flui da direita para a esquerda como hebraico ou rabe. Vertical da esquerda para a direita orienta o texto verticalmente. Se aplicar esta definio s linhas de texto separadas por quebras de linha condicional ou incondicional, cada linha de texto ser exibida como uma coluna. As colunas fluem da esquerda para a direita. Vertical da direita para a esquerda orienta o texto verticalmente. Vrias linhas de texto separadas por quebras de linha so exibidas como colunas que fluem da direita para a esquerda. Esta opo til para exibir texto em idiomas em que o texto flui da direita para a esquerda em colunas como o japons.
Nota: Os caracteres de texto vertical sempre fluem do topo para a base. Escolher uma das opes de orientao Vertical afetar apenas a ordem das colunas de texto, no a ordem dos caracteres.

176 Captulo 7

Configurao do alinhamento de texto O alinhamento determina a posio de um pargrafo de texto relativo s bordas do bloco de texto. O alinhamento horizontal do texto feito em relao s bordas esquerda e direita de um bloco de texto. O alinhamento vertical do texto feito em relao s bordas superior e inferior de um bloco de texto. Para mais informaes sobre como configurar a orientao de texto vertical ou horizontal, consultar Configurao da orientao do texto na pgina 176. possvel alinhar o texto horizontal borda esquerda ou direita do bloco de texto, centraliz-lo ou justific-lo completamente, para que o texto fique alinhado s bordas esquerda e direita. Por padro, o texto horizontal alinhado esquerda. O texto vertical pode ser alinhado ao topo ou base de um bloco de texto, centralizado dentro de um bloco de texto ou justificado completamente entre as bordas superior e inferior. Para atingir um efeito alongado, ou para encaixar o texto em um espao especfico, pode-se definir o alinhamento para esticar o texto horizontal (para texto orientado na horizontal) ou verticalmente (para texto orientado na vertical).

Texto horizontal esticado para preencher um bloco Os controles de alinhamento aparecem no Inspetor de propriedades quando o texto for realado ou um bloco de texto for selecionado.

Opes de alinhamento de texto no Inspetor de propriedades


Para definir o alinhamento de texto: 1 2

Selecionar o texto. Clicar em um boto de alinhamento no Inspetor de propriedades.

Recuo do texto possvel recuar a primeira linha de um pargrafo usando o Inspetor de propriedades. O recuo medido em pixels.

Opo de recuo de pargrafo no Inspetor de propriedades Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades.
Para recuar a primeira linha de pargrafos selecionados:

No Inspetor de propriedades, arrastar o controle deslizante pop-up Recuo do pargrafo ou digitar um valor na caixa de texto.

Utilizao de texto 177

Configurao do espaamento de pargrafo possvel especificar o espaamento desejado antes e depois dos pargrafos usando o Inspetor de propriedades. O espaamento de pargrafo medido em pixels.

Opes de espaamento de pargrafo no Inspetor de propriedades Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades.
Para definir o espao que precede os pargrafos selecionados:

No Inspetor de propriedades, arrastar o controle deslizante pop-up Espao para o pargrafo anterior.
Para definir o espao depois dos pargrafos selecionados:

No Inspetor de propriedades, arrastar o controle deslizante pop-up Espao depois do pargrafo ou digitar um valor na caixa de texto. Suavizao das bordas de texto Para suavizar uma borda de texto, fazer a suavizao de serrilhado nela. Isso faz com que as bordas do texto misturem-se com o fundo de modo que o texto fique mais limpo e legvel quando for ampliado.

Para definir a suavizao de serrilhado, usar o Inspetor de propriedades. Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades.

Opes de suavizao de serrilhado no Inspetor de propriedades A suavizao de serrilhado se aplica a todos os caracteres em um dado bloco de texto.
Para aplicar uma borda com serrilhado suavizado ao texto selecionado:

No Inspetor de propriedades, escolher uma opo no menu pop-up Nvel de suavizao de serrilhado: Ondular, Forte, Suavizar, Sem suavizao de serrilhado.

178 Captulo 7

Nota: Quando abrir arquivos vetoriais como arquivos do FreeHand, no Fireworks, o texto apresentar suavizao de serrilhado. Para editar este atributo, usar o Inspetor de propriedades. Para mais informaes sobre como abrir arquivos vetoriais, consultar Como trabalhar com outros aplicativos grficos vetoriais na pgina 385.

Expanso e contrao da largura de caractere possvel expandir ou contrair a largura de caractere do texto horizontal usando a opo Escala horizontal no Inspetor de propriedades. A escala horizontal medida em valores percentuais. 100% o padro.

Opo Escala horizontal no Inspetor de propriedades Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades.
Para expandir ou contrair caracteres selecionados:

No Inspetor de propriedades, arrastar o controle deslizante pop-up Escala horizontal ou digitar um valor na caixa de texto. Arrastar o controle deslizante para valores superiores a 100% expandir a largura ou altura dos caracteres, e arrast-lo para valores inferiores contrair a largura ou altura dos caracteres. Configurao do deslocamento da linha de base O deslocamento da linha de base determina o grau de proximidade que o texto ficar acima ou abaixo da sua linha de base natural. O texto ficar sobre a linha de base se essa no for deslocada. Usar o deslocamento da linha de base para criar caracteres subscritos e sobrescritos.

Os controles de deslocamento da linha de base esto no Inspetor de propriedades. O deslocamento da linha de base medido em pixels.

Opo de deslocamento da linha de base no Inspetor de propriedades


Para definir o deslocamento da linha de base:

No Inspetor de propriedades, arrastar o controle deslizante pop-up Deslocamento da linha de base ou digitar um valor na caixa de texto para especificar o valor para sobrescrever ou subscrever o texto. Para criar caracteres sobrescritos, inserir valores positivos. Para criar caracteres subscritos, inserir valores negativos.

Utilizao de texto 179

Como aplicar traos, preenchimentos e efeitos ao texto


possvel aplicar traos, preenchimentos e efeitos ao texto em um bloco de texto selecionado, como a qualquer outro objeto. Pode-se aplicar qualquer estilo do painel Estilos no texto, mesmo se no for um estilo de texto. Alm disso, possvel criar um novo estilo salvando os atributos de texto. O texto criado poder ser editado no Fireworks. Traos, preenchimentos, efeitos e estilos so atualizados automaticamente durante a edio do texto.

Texto com trao, preenchimento e estilo aplicado possvel aplicar cor de texto slida ao texto realado em um bloco de texto. Contudo, os atributos de trao, Efeitos ao vivo e atributos de preenchimento no slido como preenchimentos em dgrad so aplicados a todo o texto no bloco selecionado, no apenas ao texto realado. Para mais informaes sobre traos e preenchimentos, consultar Captulo 8, Aplicao de cor, trao e preenchimento, na pgina 189. Para mais informaes sobre como usar estilos, consultar Uso de um estilo na pgina 249. Para mais informaes sobre Efeitos ao vivo, consultar Aplicao de Efeitos ao vivo na pgina 213. A ferramenta Texto no reter configuraes de trao ou Efeito ao vivo quando criar um novo bloco de texto. Entretanto, possvel salvar atributos como trao, preenchimento e Efeitos ao vivo aplicados ao texto, para reutilizao como um estilo no painel Estilos. Salvar atributos de texto como estilo no salva o texto propriamente dito, apenas os efeitos.
Para salvar atributos de texto como estilo: 1 2 3 4 5

Criar um objeto de texto e aplicar os atributos desejados. Selecionar o objeto de texto. Escolher Novo estilo no painel Estilos do menu Opes. Escolher as propriedades para o novo estilo e nome-lo. Clicar em OK.

Anexao de texto a um traado


Para liberar o texto das restries de blocos de texto retangulares, desenhar um traado e anexar texto a ele. O texto flui ao longo da forma do traado e ainda pode ser editado. Para mais informaes sobre como desenhar diferentes tipos de traados, consultar Desenho de formas bsicas na pgina 147. Um traado ao qual um texto est anexado perde temporariamente seus atributos de trao, preenchimento e efeito. Qualquer trao, preenchimento e atributos de efeito aplicados subseqentemente sero aplicados ao texto, no ao traado. Se depois o usurio separar o texto do traado, este recuperar seus atributos de efeito, preenchimento e trao.
Nota: Anexar texto que contm quebras de linha condicionais ou incondicionais pode produzir resultados inesperados.

180 Captulo 7

Se o texto anexado a um traado aberto exceder o comprimento do traado, o texto restante retornar e reproduzir a forma do traado.

O texto em um traado que retorna e repete a forma do traado


Para incluir texto em um traado: 1 2

Manter pressionada a tecla Shift e selecionar um bloco de texto e um traado. Escolher Texto > Anexar ao traado.

Para separar o texto de um traado selecionado:

Escolher Texto > Separar a partir do traado. Edio de traados e texto anexado a traados possvel editar o texto anexado a um traado. Alm disso, pode-se editar a forma do traado.
Para editar o texto anexado a um traado, seguir um destes procedimentos:

Clicar duas vezes no objeto de texto em um traado com a ferramenta Ponteiro ou Subseleo. Escolher a ferramenta Texto e selecionar o texto a editar.
Para editar a forma do traado: 1 2 3

Escolher Texto > Separar a partir do traado. Editar o traado. Colocar o texto de volta no traado.

Alterao da orientao e direo do texto em um traado A ordem em que desenhar um traado estabelece a direo do texto a ele anexado. Por exemplo, se desenhar um traado da direita para a esquerda, o texto anexado aparecer de trs para frente e de cabea para baixo.

Texto anexado a um traado desenhado da direita para a esquerda

Utilizao de texto 181

possvel inverter a direo ou alterar a orientao do texto anexado a um traado. Alm disso, pode-se alterar o ponto inicial do texto em um traado.
Para alterar a orientao de texto em um traado selecionado:

Escolher Texto > Orientao e selecionar uma orientao.


Para inverter a direo do texto em um traado selecionado:

Escolher Texto > Inverter direo.

Texto girado ao redor do traado

Texto orientado verticalmente em um traado

Texto inclinado verticamente ao redor do traado

Texto inclinado horizontalmente ao redor do traado


Para mover o ponto inicial do texto anexado a um traado: 1 2

Selecionar o objeto de texto em um traado. No Inspetor de propriedades, digitar um valor na caixa de texto Deslocamento do texto. Em seguida, pressionar Enter.
Nota: Se o Inspetor de propriedades estiver minimizado, clicar na seta de expanso no canto inferior direito para ver todas as propriedades.

182 Captulo 7

Transformao de texto
possvel transformar blocos de texto da mesma forma que outros objetos. possvel colocar em escala, girar, inclinar e virar o texto para criar efeitos de texto sem igual. Voc ainda pode editar o texto transformado, embora transformaes maiores possam dificultar a leitura. Transformar texto no altera o tamanho do ponto do texto. Quando transformar um bloco de texto e o resultado for texto redimensionado ou escalonado, o tamanho da fonte antes da transformao continuar o mesmo no Inspetor de propriedades quando o texto for selecionado. Alteraes subseqentes do tamanho da fonte do texto transformado alteraro o tamanho do texto, mas apenas em relao transformao. Para mais informaes, consultar Transformao e distoro de objetos selecionados e selees na pgina 118.

Converso de texto em traados


Voc pode converter texto em traados e depois editar as formas das letras como faria com qualquer objeto vetorial. Todas as ferramentas de edio vetorial esto disponveis para editar o texto aps sua converso em traados. No entanto, ele no poder mais ser mais editado como texto.
Para converter o texto selecionado em traados:

Escolher Texto > Converter em traados. O texto convertido em traados mantm todos os seus atributos visuais, mas s possvel edit-lo como traados. possvel editar o texto convertido como um grupo ou editar os caracteres convertidos de modo individual.

Para editar traados de caracteres de texto convertido individualmente, seguir um destes procedimentos:

Selecionar o texto convertido com a ferramenta Subseleo. Selecionar o texto convertido e escolher Modificar > Desagrupar.
Para editar os traados de caracteres de texto convertido individualmente, usar as ferramentas de edio vetorial. Para mais informaes sobre como editar traados, consultar Edio de um traado na pgina 159. possvel criar um traado composto a partir de um objeto de texto criado por meio da converso de texto em traados.
Para criar um traado composto a partir de um grupo de traados criado por meio da converso de texto em traados: 1 2 3

Selecionar o grupo de traados. Escolher Modificar > Desagrupar. Escolher Modificar > Combinar traados > Unir.

Utilizao de texto 183

Importao de texto
Voc pode usar texto de outros documentos com o recurso arrastar-e-soltar, ou copiar-e-colar o documento fonte no documento Fireworks atual. Pode tambm abrir ou importar um arquivo de texto inteiro no Fireworks. O Fireworks pode importar formatos RTF (rich text format) e ASCII (texto regular).
Para abrir ou importar um arquivo de texto: 1 2 3

Escolher Arquivo > Abrir ou Arquivo > Importar. Navegar at a pasta que contm o arquivo. Selecionar o arquivo e clicar em OK.

Texto do Photoshop possvel abrir ou importar um arquivo Photoshop que contm texto, ou copiar-e-colar, ou arrastar-e-soltar texto de um arquivo Photoshop no documento Fireworks atual. Para mais informaes, consultar Colocao de um grfico do Photoshop no Fireworks na pgina 395. Arquivos RTF Ao importar texto RTF, o Fireworks mantm estes atributos:

Fonte, tamanho e estilo (negrito, itlico, sublinhado) Alinhamento (esquerda, direita, centralizado, justificado) Entrelinhamento Deslocamento da linha de base Kerning da faixa Escala horizontal Cor do primeiro caractere

Todas as outras informaes de RTF so ignoradas. O Fireworks no pode importar texto RTF usando os recursos de copiar-e-colar ou arrastar-esoltar. Texto ASCII possvel importar texto ASCII usando qualquer um dos mtodos de importao. O texto ASCII importado configurado para a fonte padro atual, com 12 pixels de altura e utiliza a cor de preenchimento atual. Tratamento de fontes ausentes Se o usurio abrir um documento no Fireworks que contm fontes que no estejam instaladas no computador, o Fireworks perguntar se deseja substituir as fontes ou manter sua aparncia. Isto ser til ao compartilhar arquivos com outros usurios em outros computadores que talvez no tenham as mesmas fontes instaladas.

184 Captulo 7

Escolher Manter aparncia substitui o texto pela imagem bitmap que representa a aparncia do texto na sua fonte original. Ainda possvel editar o texto, mas se fizer isso, o Fireworks substituir a imagem bitmap pela fonte que estiver instalada no sistema. A aparncia do texto pode ser alterada. possvel escolher fontes para substituir as fontes ausentes. Uma vez substitudas as fontes, o documento aberto e possvel editar e salvar o texto. Quando o arquivo for reaberto em um computador que contenha as fontes originais, o programa se lembrar da fonte original.
Para selecionar uma fonte de substituio: 1

Abrir um documento com as fontes ausentes. A caixa de dilogo Fontes ausentes se abre. Escolher uma fonte ausente na lista Alterar fonte ausente. Seguir um destes procedimentos:

2 3

Escolher uma fonte de substituio na lista Para. Escolher exibir o texto na fonte padro do sistema. Para deixar a fonte inalterada, clicar em Sem alterao.
4

Clicar em OK. Da prxima vez que abrir um documento com as mesmas fontes ausentes, a caixa de dilogo Fontes ausentes conter as fontes selecionadas.

Verificao ortogrfica
Para verificar a ortografia de blocos de texto especficos ou de todo o texto em um documento, usar o comando Verificar a ortografia no menu Texto.
Para verificar a ortografia do texto: 1 2 3

Selecionar um ou mais blocos de texto. Se nenhum bloco de texto for selecionado, a correo ortogrfica ser verificada no documento inteiro. Escolher Texto > Verificar a ortografia. Se no tiver verificado a ortografia no Fireworks antes, aparecer uma caixa de dilogo solicitando a escolha de um dicionrio. Clicar em OK para fechar a caixa de dilogo. Escolher um idioma na lista Dicionrio e clicar em OK. Se no escolher um idioma, ser solicitado a escolher um dicionrio toda vez que verificar a ortografia de um documento.
Nota: A opo Macromedia.tlx est sempre selecionada no topo da lista de dicionrios. Para mais informaes sobre esta opo, consultar Personalizao da verificao ortogrfica na pgina 186.

A caixa de dilogo Verificar a ortografia aparece. Para cada palavra encontrada, escolher a opes apropriada:
Adicionar a Pessoais adiciona Ignorar ignora

a palavra no reconhecida ao seu dicionrio pessoal.

a ocorrncia atual da palavra no reconhecida.

Ignorar todas ignora todas as ocorrncias da palavra no reconhecida durante a sesso atual de verificao da correo ortogrfica. A palavra no reconhecida ser identificada novamente da prxima vez que fizer a verificao ortogrfica.

Utilizao de texto 185

Alterar substitui a ocorrncia atual da palavra no reconhecida pelo texto digitado na caixa Alterar para ou pela seleo na lista Sugestes. Alterar tudo substitui Excluir remove

todas as ocorrncias da palavras no reconhecida da mesma maneira.

uma palavra duplicada.

Quando o Fireworks concluir a verificao da correo ortogrfica em um documento, a caixa de dilogo Verificar a ortografia aparece indicando que a verificao da correo ortogrfica est concluda. Personalizao da verificao ortogrfica possvel personalizar como o Fireworks verifica a ortografia de documentos usando a caixa de dilogo Configurao da correo ortogrfica. Daqui possvel especificar um ou mais dicionrios que o Fireworks usar durante a verificao ortogrfica, assim como editar as palavras no seu Dicionrio pessoal. Tambm possvel especificar os itens desejados para a verificao ortogrfica do Fireworks, inclusive endereos de Internet e de arquivos.
Para personalizar a verificao ortogrfica no Fireworks: 1

Seguir um destes procedimentos:

Escolher Texto > Configurao da verificao ortogrfica. Clicar no boto Configurar na caixa de dilogo Verificar a ortografia.
2

Escolher as opes desejadas na caixa de dilogo Configurao da verificao ortogrfica:


Nota: A opo Macromedia.tlx est sempre selecionada no topo da lista de dicionrios. Este o arquivo que contm seu dicionrio personalizado de correo ortogrfica.

Escolher um ou mais dicionrios. Para buscar o dicionrio personalizado, clicar no cone da pasta ao lado da caixa de
texto Caminho do dicionrio pessoal.

Para editar o dicionrio personalizado, clicar no boto Editar dicionrio pessoal e adicionar,
excluir ou modificar as palavras na lista.

Escolher os tipos de palavras que deseja incluir na verificao ortogrfica.


3

Clicar em OK.

Utilizao do Editor de texto


No Fireworks 4 e verses anteriores, o texto era criado e editado usando o Editor de texto. Todas as opes de edio e formatao de texto encontradas no Editor de texto esto agora localizadas no Inspetor de propriedades. Contudo, ainda possvel acessar o Editor de texto pelo menu Texto. O Editor de texto til para trabalhar com o texto difcil de editar na tela, como grandes blocos de texto, texto anexado a um traado ou texto com fontes e tamanhos difceis de ler. possvel escolher exibir este texto na fonte e tamanho padro do sistema se for necessrio para facilitar a edio.
Nota: Alguns recursos de texto novos no Fireworks MX no esto disponveis no Editor de texto.

186 Captulo 7

Para exibir o Editor de texto: 1 2 3

Selecionar um bloco de texto e escolher Texto > Editor. Modificar e formatar o texto usando as opes disponveis. Clicar em OK e aplicar as alteraes e fechar o Editor de texto.

Para visualizar o texto na fonte do sistema:

Cancelar a seleo Mostrar fonte no Editor de texto.

Para exibir o texto no tamanho padro:

Cancelar a seleo Mostrar tamanho & cor no Editor de texto.

Utilizao de texto 187

188 Captulo 7

CAPTULO 8 Aplicao de cor, trao e preenchimento

O Macromedia Fireworks MX oferece uma ampla gama de painis, ferramentas e opes para organizar, escolher e aplicar cores a imagens bitmap e a objetos vetoriais. O painel Exemplos de cores inclui opes que permitem a escolha de um grupo de exemplos predefinidos como Cubos de cor, Tom contnuo ou Tons de cinza, ou a criao de grupos de exemplos personalizados que incluam suas cores favoritas ou as cores aprovadas pelo cliente. O Misturador de cores apresenta opes que possibilitam a escolha de um modelo de cor como Hexadecimal, RGB ou Tons de cinza, assim como a escolha das cores de traos e preenchimentos, diretamente na barra de cores ou por meio da insero de valores especficos da cor. O espao de trabalho do Fireworks contm caixas de cores que mostram as escolhas de cores atuais para opes e caractersticas de objetos. Um clique em uma caixa de cor abre uma janela pop-up de cores, na qual possvel escolher uma cor para a caixa de cor. Para aplicar uma cor caixa de cor, basta afastar o ponteiro da janela pop-up de cores aberta e clicar em qualquer cor na tela. A seo Cores do painel Ferramentas contm controles de cor de preenchimento e trao, alm de outras opes de cor. A seo Bitmap contm as ferramentas Lata de tinta, Preenchimento dgrad e Conta-gotas, que so teis para aplicar cor a selees de bitmaps, reas com cor semelhante e objetos vetoriais. Para informaes sobre essas ferramentas de bitmap, consultar Captulo 5, Como trabalhar com um bitmap, na pgina 125.
Nota: Para informaes sobre correo de cor com Efeitos ao vivo e filtros, consultar Ajuste da cor e do tom de um bitmap na pgina 133.

Uso da seo Cores do painel Ferramentas


A seo Cores do painel Ferramentas contm controles que ativam as caixas Cor do trao e Cor de preenchimento, as quais, por sua vez, determinam se as escolhas de cores afetam os traos ou preenchimentos de objetos selecionados. Alm disso, a seo Cores possui controles que restauram rapidamente o padro das cores, definem as configuraes de cores de preenchimento e trao como Nenhum e trocam as cores de traos e preenchimentos.
Para ativar a caixa Cor do trao ou Cor de preenchimento:

Clicar no cone ao lado da caixa Cor do trao ou Cor de preenchimento no painel Ferramentas. A rea da caixa de cor ativa aparece como um boto pressionado no painel Ferramentas.

189

Nota: A ferramenta Lata de tinta preenche as selees de pixels e os objetos vetoriais com a cor mostrada na caixa Cor de preenchimento no painel Ferramentas.

Caixas de cores no painel Ferramentas e a janela pop-up de cores


Para restaurar o padro das cores:

Clicar no boto Cores padro no painel Ferramentas ou no Misturador de cores.


Para remover o trao e o preenchimento dos objetos selecionados usando o boto Nenhum trao ou preenchimento: 1

Clicar no boto Nenhum trao ou preenchimento na seo Cores do painel Ferramentas. O trao ou preenchimento da caracterstica ativa ficar definido como Nenhum. Para definir a caracterstica inativa tambm como Nenhum, clicar novamente no boto Nenhum trao ou preenchimento.

Nota: Uma outra opo disponvel definir o preenchimento ou trao de objetos selecionados como Nenhum. Para fazer isso, basta clicar no boto Transparente em qualquer janela pop-up da caixa Cor de preenchimento ou Cor do trao, ou escolher Nenhum no menu pop-up Opes de preenchimento ou Opes de trao no Inspetor de propriedades.

Para trocar cores de trao e preenchimento:

Clicar no boto Trocar cores no painel Ferramentas ou no Misturador de cores.

Organizao de um grupo de exemplos e de um modelo de cor


O painel Exemplos de cores e o Misturador de cores se combinam para formar o grupo de painis Cores. O painel Exemplos de cores oferece opes para exibir, alterar, criar e editar grupos de exemplos, assim como para escolher cores de trao e de preenchimento. O Misturador de cores permite escolher um modelo de cor, misturar cores de trao e preenchimento arrastando-se os controles deslizantes de valor da cor ou digitando-se valores da cor, alm de permitir a escolha de cores de trao e de preenchimento diretamente na barra de cores. Aplicao de uma cor atravs do painel Exemplos de cores O painel Exemplos de cores exibe todas as cores do grupo de exemplos atual. Uma de suas utilidades aplicar cores de trao e de preenchimento a textos ou objetos vetoriais selecionados.
Para aplicar uma cor ao trao ou preenchimento de um objeto selecionado atravs do painel Exemplos de cores: 1

Clicar no cone ao lado da caixa Cor do trao ou Cor de preenchimento no painel Ferramentas ou no Inspetor de propriedades para ativ-lo.

190 Captulo 8

Se o painel Exemplos de cores ainda no estiver aberto, escolher Janela > Exemplos de cores.

Painel Exemplos de cores


3

Clicar em um exemplo para aplicar a cor ao trao ou preenchimento do objeto selecionado. A cor aparece na caixa Cor do trao ou Cor de preenchimento ativa.

Alterao de um grupo de exemplos fcil alternar para outro grupo de exemplos ou criar um grupo prprio. O menu Opes do painel Exemplos de cores contm os seguintes grupos de exemplos: Cubos de cor, Tom contnuo, Sistema Macintosh, Sistema Windows e Tons de cinza. possvel importar exemplos personalizados de arquivos de paleta de cores como arquivos ACT ou GIF.

Menu Opes do painel Exemplos de cores


Para escolher um grupo de exemplos:

Escolher um grupo de exemplos no menu Opes do painel Exemplos de cores.


Nota: A escolha de Cubos de cor retorna ao grupo de exemplos padro.

Para escolher um grupo de exemplos personalizados: 1 2

Escolher Substituir exemplos no menu Opes do painel Exemplos de cores. Navegar at a pasta e escolher um arquivo de exemplo.

Aplicao de cor, trao e preenchimento 191

Clicar em Abrir. Os exemplos de cores do arquivo substituem os exemplos anteriores.


Nota: Para informaes sobre como criar um grupo de exemplos personalizados, consultar Personalizao do painel Exemplos de cores na pgina 192 e Como salvar uma paleta na pgina 340.

Para anexar exemplos de uma paleta de cores externa aos exemplos atuais: 1 2

Escolher Adicionar exemplos no menu Opes do painel Exemplos de cores. Navegar at a pasta desejada e escolher um arquivo de paleta de cores.
Nota: O Fireworks pode adicionar novos exemplos de paletas exportadas como arquivos ACT ou GIF.

Clicar em OK. Os novos exemplos so anexados ao final dos exemplos atuais.

Personalizao do painel Exemplos de cores O painel Exemplos de cores oferece opes que adicionam, excluem, substituem e classificam exemplos de cores ou grupos de exemplos inteiros.
Nota: Escolher Editar > Desfazer no desfaz adies nem excluses de exemplos.

Painel Exemplos de cores


Para adicionar uma cor ao painel Exemplos de cores: 1 2 3 4

Escolher a ferramenta Conta-gotas no painel Ferramentas. Escolher o nmero de pixels para amostragem no menu pop-up Exemplo do Inspetor de propriedades: 1 pixel, 3x3 mdia ou 5x5 mdia. Clicar em qualquer ponto na janela do documento do Fireworks aberta para fazer amostragem de uma cor. Mover a ponta do ponteiro conta-gotas para o espao aberto aps o ltimo exemplo no painel Exemplos de cores. O ponteiro conta-gotas se transforma no ponteiro lata de tinta. Clicar para adicionar o exemplo.
Dica: Quando a opo Alinhar pela cor Websafe estiver selecionada no menu Opes da janela pop-up de cores, qualquer cor Websafe selecionada com o ponteiro conta-gotas ser alterada para a cor Websafe mais prxima.

192 Captulo 8

Para substituir um exemplo por outra cor: 1 2 3 4

Escolher a ferramenta Conta-gotas no painel Ferramentas. Escolher o nmero de pixels para o exemplo no menu pop-up Exemplo do Inspetor de propriedades: 1 pixel, 3x3 mdia ou 5x5 mdia. Clicar em qualquer ponto na janela do documento do Fireworks para fazer amostragem de uma cor. Manter pressionada a tecla Shift e colocar o ponteiro sobre um exemplo no painel Exemplos de cores. O ponteiro se transforma no ponteiro lata de tinta. Clicar no exemplo para substitu-lo pela nova cor.

Para excluir um exemplo do painel Exemplos de cores: 1

Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e colocar o ponteiro sobre um exemplo. O ponteiro se transforma no ponteiro tesoura. Clicar no exemplo para exclu-lo do painel Exemplos de cores.

Para salvar uma seleo de cores de exemplo: 1 2

Adicionar as cores de exemplo ao painel Exemplos de cores. Escolher Salvar exemplos no menu Opes do painel Exemplos de cores. A caixa de dilogo Exportar exemplos exibida. Escolher um nome de arquivo e diretrio e clicar em Salvar.

Limpeza e classificao de um exemplo O menu Opes do painel Exemplos de cores oferece a opo de limpar e classificar exemplos:
Para limpar ou classificar exemplos:

Escolher um dos seguintes itens no menu Opes do painel Exemplos de cores:


Limpar exemplos limpa

todo o painel Exemplos de cores. os exemplos por valor da cor.

Classificar por cor classifica

Criao de uma cor no Misturador de cores O Misturador de cores permite criar cores arrastando-se os controles deslizantes ou digitando-se valores para cada componente de um modelo de cor, como RGB, Hexadecimal ou CMY. A cor criada aplicada caixa Cor do trao ou Cor de preenchimento ativa. O Misturador de cores tambm possui uma barra de cores que exibe a faixa de cores do modelo de cor atual. Para aplicar uma cor, clicar em qualquer ponto na barra de cores. Outra opo clicar no boto selecionador de cores do sistema para escolher uma cor do sistema Windows ou Macintosh.
Dica: Ainda que CMY seja uma opo de modelo de cor, grficos exportados diretamente do Fireworks no so ideais para impresso. Para readaptar os grficos exportados do Fireworks para impresso, uma possibilidade import-los para o FreeHand MX, que executar automaticamente a converso das imagens RGB em CMYK ao gerar separaes de cores digitais. Para mais informaes, consultar a documentao do FreeHand MX.

Aplicao de cor, trao e preenchimento 193

Mistura de uma cor no Misturador de cores O Misturador de cores oferece opes para exibir os valores da cor ativa e editar valores da cor a fim de criar novas cores.

Por padro, o Misturador de cores identifica as cores RGB como hexadecimais, exibindo os valores dos componentes vermelho (R), verde (G) e azul (B) da cor. Os valores RGB hexadecimais so calculados com base em uma faixa de 00 a FF.
Escolher RGB Para expressar componentes de cor como Valores de Vermelho, Verde e Azul, onde cada componente tem um valor de 0 a 255. 0-0-0 preto e 255-255-255 branco. Valores RGB de Vermelho, Verde e Azul, onde cada componente tem um valor hexadecimal de 00 a FF. 00-00-00 preto e FF-FF-FF branco. Valores de Matiz, Saturao e Brilho, onde Matiz tem um valor de 0 a 360 graus, e Saturao e Brilho tm valores que variam de 0 a 100%. Valores de Ciano, Magenta e Amarelo, onde cada componente tem um valor de 0 a 255. 0-0-0 branco e 255-255-255 preto. Porcentagem de preto. O valor do componente simples Preto (K) varia de 0 a 100%, onde 0 branco e 100 preto. Os valores intermedirios correspondem a tons de cinza.

Hexadecimal

HSB

CMY

Tons de cinza

O menu Opes do Misturador de cores oferece modelos de cor alternativos sua escolha. Os valores dos componentes da cor atual mudam para cada novo modelo de cor.
Para exibir o Misturador de cores:

Escolher Janela > Misturador de cores.


Para aplicar uma cor da barra de cores a um objeto vetorial selecionado: 1 2

Clicar no cone ao lado da caixa Cor do trao ou Cor de preenchimento no Misturador de cores. Mover o ponteiro sobre a barra de cores. O ponteiro se transforma no ponteiro conta-gotas. Clicar para selecionar uma cor. A cor aplicada ao objeto selecionado e se torna a cor ativa de trao ou preenchimento.

194 Captulo 8

Para selecionar uma cor no Misturador de cores: 1 2 3 4

Cancelar a seleo de todos os objetos antes de misturar uma cor, para evitar a edio indesejada de um objeto durante a mistura de cores. Clicar na caixa Cor do trao ou Cor de preenchimento para torn-la o destino da nova cor. Escolher um modelo de cor no menu Opes do Misturador de cores. Seguir um destes procedimentos para especificar valores de componentes de cor:

Digitar valores nas caixas de texto de componentes de cor. Usar os controles deslizantes pop-up. Selecionar uma cor na barra de cores.
A adio da cor ao painel Exemplos de cores possibilita a sua reutilizao. Para mais informaes, consultar Personalizao do painel Exemplos de cores na pgina 192.
Para alternar a barra de cores entre os modelos de cor:

Manter pressionada a tecla Shift e clicar na barra de cores na parte inferior do Misturador de cores.
Nota: As opes do Misturador de cores no se alteram.

Criao de uma cor com os selecionadores de cores do sistema Em vez de usar o Misturador de cores e o painel Exemplos de cores para criar cores, existe a alternativa de utilizar a caixa de dilogo Sistema Windows ou Sistema Macintosh.
Para selecionar uma cor do selecionador de cores do sistema: 1 2

Clicar em qualquer caixa de cor. Escolher Windows OS ou Mac OS no menu Opes de qualquer janela pop-up de cores. A janela pop-up exibe os exemplos de cores do sistema. Escolher uma cor do selecionador de cores do sistema. A cor se torna a nova cor de trao ou preenchimento.

Para informaes sobre como adicionar uma cor do selecionador de cores ao painel Exemplos de cores, consultar Personalizao do painel Exemplos de cores na pgina 192. Exibio de um valor da cor Alm do Misturador de cores e da janela pop-up de cores, tambm possvel identificar valores da cor atravs do painel Informaes.
Para exibir o valor da cor de qualquer parte do documento usando o painel Informaes: 1 2

Escolher Janela > Informaes, para exibir o painel Informaes. Mover o ponteiro sobre o objeto que contm a cor que deseja exibir (somente Windows).

Para exibir o valor da cor de preenchimento ou trao ativa, seguir um destes procedimentos:

Escolher Janela > Misturador de cores para RGB ou outros valores do sistema de cores. Clicar em uma caixa de cor para abrir a janela pop-up de cores e exibir o valor hexadecimal na
parte superior da janela.

Aplicao de cor, trao e preenchimento 195

Colocar o ponteiro sobre uma caixa de cor e ler a dica de ferramenta (somente Windows).
Nota: Por padro, os valores RGB da cor aparecem no painel Informaes e no Misturador de cores, e seu valor hexadecimal aparece na janela pop-up de cores, assim como a dica de ferramenta da caixa de cor, no Windows. No entanto, possvel alterar o modelo de cor exibido no Misturador de cores ou no painel Informaes a qualquer momento.

Para exibir informaes de cores de um modelo de cor alternativo:

Escolher um outro modelo de cor no menu Opes do painel Informaes ou do Misturador de cores. Pontilhamento com uma cor Websafe s vezes, pode ser necessrio usar uma cor que no uma cor Websafe. Por exemplo, o logotipo da sua empresa pode utilizar uma cor que no Websafe. Para criar a aparncia de uma cor Websafe que no ser trocada nem pontilhada quando for exportada com uma paleta Websafe, usa-se um preenchimento Pontilhamento Web.
Nota: O pontilhamento Web pode aumentar o tamanho do arquivo.

Duas cores Websafe criam um preenchimento Pontilhamento Web.


Para usar o preenchimento Pontilhamento Web: 1 2 3

Selecionar um objeto que contenha uma cor no-Websafe. Escolher Pontilhamento Web no menu pop-up Opes de preenchimento no Inspetor de propriedades. Clicar na caixa Cor de preenchimento no Inspetor de propriedades. A janela pop-up de cores abre, exibindo opes de preenchimentos Pontilhamento Web. A cor no-Websafe do objeto aparece na caixa Cor da origem na janela Opes de preenchimento. As duas cores de pontilhamento Websafe aparecem nas caixas de cores direita. O pontilhamento Web aparece no objeto e se torna a cor de preenchimento ativa.
Nota: Definir a borda de um preenchimento Pontilhamento Web como Suavizao de serrilhado ou Enevoar resulta em cores que no so Websafe.

Clicar fora da janela pop-up para fech-la.

Para criar a iluso de um verdadeiro preenchimento transparente em um navegador da Web: 1 2 3

Selecionar o objeto ao qual deseja aplicar um preenchimento transparente. Escolher Pontilhamento Web no menu pop-up Opes de preenchimento no Inspetor de propriedades. Clicar na caixa Cor de preenchimento no Inspetor de propriedades. A janela pop-up de cores abre, exibindo opes de preenchimentos Pontilhamento Web.

196 Captulo 8

Clicar na opo Transparente. As caixas de cores no lado direito da janela pop-up mudam para refletir a seleo, e o objeto na tela se torna semi-opaco ou translcido.

5 6

Clicar fora da janela pop-up para fech-la. Exportar o objeto como GIF ou PNG com a opo Transparncia do ndice ou Transparncia alfa definida. Para mais informaes sobre como exportar arquivos com transparncia, consultar Como tornar reas transparentes na pgina 341. Quando o grfico for exibido em um navegador da Web, o fundo da pgina da Web mostrar todos os pixels do preenchimento Pontilhamento Web transparente, criando o aspecto de transparncia.
Nota: Nem todos os navegadores oferecem suporte a arquivos PNG.

Uso de uma caixa de cor e janela pop-up de cores


H caixas de cores em todo o Fireworks MX da seo Cores do painel Ferramentas at o Inspetor de propriedades e o Misturador de cores. Cada uma exibe a cor atual atribuda propriedade do objeto associado. Escolha de uma cor em uma janela pop-up de cores Um clique em qualquer caixa de cor abre uma janela pop-up de cores semelhante ao painel Exemplos de cores. So oferecidas duas opes: exibir, em uma janela pop-up de cores, os mesmos exemplos exibidos no painel Exemplos de cores ou exibir exemplos diferentes.
Para escolher uma cor para uma caixa de cor: 1

Clicar na caixa de cor. A janela pop-up de cores exibida. Seguir um destes procedimentos:

Clicar em um exemplo para aplic-lo caixa de cor. Clicar o ponteiro conta-gotas em uma cor na tela para aplic-la caixa de cor. Clicar no boto Transparente para tornar transparente o trao ou preenchimento.
Para exibir o grupo de exemplos atuais do painel Exemplos de cores na janela pop-up de cores:

Escolher Painel de exemplos no menu Opes da janela pop-up de cores.


Para exibir um outro grupo de exemplos na janela pop-up de cores:

Escolher um grupo de exemplos no menu Opes da janela pop-up de cores. A escolha de um grupo de exemplos aqui no afeta o painel Exemplos de cores.

Aplicao de cor, trao e preenchimento 197

Amostragem de uma cor em uma janela pop-up de cores Quando uma janela pop-up de cores estiver aberta, o ponteiro se transformar em um conta-gotas especial que pode fazer amostragem de cores de praticamente qualquer parte da tela. Isso conhecido como amostragem.
Para fazer amostragem de uma cor de qualquer parte da tela para a caixa de cor atual: 1

Clicar em qualquer caixa de cor. A janela pop-up de cores exibida e o ponteiro se transforma em um conta-gotas. Clicar em qualquer ponto no espao de trabalho do Fireworks a fim de escolher uma cor para a caixa de cor. A cor aplicada caracterstica ou ao recurso associado caixa de cor e a janela pop-up de cores fecha.
Dica: Manter pressionada a tecla Shift e clicar para escolher uma cor Websafe.

Como trabalhar com um trao


O Inspetor de propriedades, o menu pop-up Opes de trao e a caixa de dilogo Editar trao proporcionam controle total sobre todas as nuanas do pincel, inclusive a quantidade de tinta, o tamanho e a forma da ponta, a textura, o efeito de borda e o aspecto. Aplicao de um trao O usurio pode alterar os atributos de trao das ferramentas Caneta, Lpis e Pincel para que o prximo objeto vetorial que desenhar apresente os novos atributos, ou ele pode aplicar atributos de trao a um objeto ou traado depois de desenh-lo. A cor atual do trao aparece na caixa Cor do trao no painel Ferramentas, no Inspetor de propriedades e no Misturador de cores. possvel alterar a cor do trao de uma ferramenta de desenho ou do objeto selecionado em qualquer um desses trs painis.

O cone do lpis indica a caixa Cor do trao no painel Ferramentas, no Inspetor de propriedades e no Misturador de cores.
Para alterar atributos do trao de objetos selecionados, seguir um destes procedimentos:

Escolher um dos atributos de trao no Inspetor de propriedades.


Dica: Escolher Opes de trao no menu pop-up Opes de trao para obter mais atributos.

198 Captulo 8

Clicar na caixa Cor do trao no painel Ferramentas e clicar em Opes de trao. Escolher um
dos atributos de trao na janela pop-up Opes detrao.

Usar as opes do Inspetor de propriedades ou da janela pop-up Opes de trao para alterar o trao aplicado a um objeto.
Para alterar a cor do trao de uma ferramenta de desenho: 1 2 3 4 5

Pressionar Control+D (Windows) ou Command+D (Macintosh) para cancelar a seleo de todos os objetos. Escolher uma ferramenta de desenho no painel Ferramentas. Clicar na caixa Cor do trao no painel Ferramentas ou no Inspetor de propriedades para abrir a janela pop-up de cores. Escolher uma cor para o trao no conjunto de exemplos. Arrastar para desenhar o objeto.
Nota: Um trao recm-criado assume a cor exibida no momento na caixa Cor do trao.

Para remover todos os atributos de trao de um objeto selecionado, seguir um destes procedimentos:

Escolher Nenhum no menu pop-up Opes de trao do Inspetor de propriedades ou da janela


pop-up Opes de trao.

Clicar na caixa Cor do trao no painel Ferramentas ou no Inspetor de propriedades e clicar no


boto Transparente.

Aplicao de cor, trao e preenchimento 199

Criao de um trao personalizado A caixa de dilogo Editar trao oferece a opo de alterar caractersticas especficas do trao.

Essa caixa de dilogo tem trs guias: Opes, Forma e Sensibilidade. A visualizao do trao, na parte inferior de cada guia, mostra o pincel atual com as configuraes atuais. Um trao na visualizao que se estreite, desaparea ou altere-se de qualquer outra forma, da esquerda para a direita, ilustra as configuraes atuais de sensibilidade presso e velocidade.
Para abrir a caixa de dilogo Editar trao: 1

Seguir um destes procedimentos para abrir a janela pop-up Opes de trao:

Escolher Opes de trao no menu pop-up Opes de trao do Inspetor de propriedades. Escolher Opes de trao na janela pop-up da caixa Cor do trao no painel Ferramentas.
2

Clicar em Avanado. A caixa de dilogo Editar trao exibida.

200 Captulo 8

Para definir opes gerais do trao de pincel: 1

Na guia Opes da caixa de dilogo Editar trao, definir a quantidade de tinta, o espaamento e a taxa de fluxo. Taxas de fluxo mais altas criam traos de pincel que flutuam ao longo do tempo, como com um aergrafo.

2 3 4 5

Para sobrepor carimbos de traos de pincel densos, escolher Montar. Para definir a textura do trao, alterar a opo Textura. Quanto mais alto o nmero, mais aparente ficar a textura. Para definir a textura nas bordas, digitar um nmero na caixa de texto Textura da borda e escolher um efeito de borda no menu pop-up Efeito da borda. Definir o nmero de pontas que deseja que o trao de pincel tenha. Para vrias pontas, digitar um valor de espaamento da ponta e escolher o mtodo de variao da cor. Estas so as opes sua escolha: Aleatria, Uniforme, Complementar, Matiz ou Sombra. Clicar em Aplicar para aplicar as configuraes a traos selecionados e, em seguida, clicar em OK.

Aplicao de cor, trao e preenchimento 201

Para modificar a ponta do pincel: 1

Na guia Forma da caixa de dilogo Editar trao, selecionar Quadrado para uma ponta quadrada ou, para uma ponta redonda, cancelar a seleo de Quadrado.

2 3

Digitar valores para o tamanho da ponta do pincel, a suavidade da borda, o aspecto da ponta e o ngulo da ponta. Clicar em Aplicar e, em seguida, em OK.

O Fireworks possui configuraes de trao para fazer o ajuste fino dos atributos de trao controlados por velocidade e presso quando for utilizada uma caneta ou uma mesa digitalizadora Wacom sensvel presso. possvel escolher o atributo de trao a ser controlado com a caneta.

202 Captulo 8

Para definir a sensibilidade do trao: 1

Na guia Sensibilidade da caixa de dilogo Editar trao, escolher uma propriedade de trao como Tamanho, Quantidade de tinta ou Saturao no menu pop-up Propriedade do trao.

2 3

Nas opes Afetado por, escolher at que ponto os dados da sensibilidade afetam a propriedade do trao atual. Clicar em OK.

Posicionamento de um trao em traados Por padro, o trao de pincel de um objeto centralizado no traado. possvel alterar as opes para posicionar o trao de pincel inteiramente dentro ou fora do traado. Isso permite que o usurio controle o tamanho geral de objetos com traos, alm de lhe permitir criar efeitos como, por exemplo, usar traos nas bordas de botes chanfrados.

Trao centralizado, trao interno e trao externo O menu pop-up Trao da janela Opes de trao oferece a opo de reorientar os traos de pincel.

Aplicao de cor, trao e preenchimento 203

Para mover um trao de pincel dentro ou fora do traado selecionado: 1 2 3

Clicar na caixa Cor do trao no painel Ferramentas ou no Inspetor de propriedades para abrir a janela pop-up da caixa de cor. Escolher uma opo do menu pop-up Localizao do trao em relao ao traado: Dentro, Centralizado ou Fora. Opcionalmente, escolher a opo Preencher sobre trao. Normalmente, o trao sobrepe o preenchimento. Escolher Preencher sobre trao desenha o preenchimento sobre o trao. A escolha dessa opo para um objeto com preenchimento opaco faz com que qualquer parte do trao que cair dentro do traado fique obscurecida. Um preenchimento com um grau de transparncia pode ser tingido ou misturado com traos do pincel dentro do traado.

Criao de um estilo de trao possvel alterar caractersticas especficas de trao, como quantidade de tinta, forma da ponta e sensibilidade da ponta, e salvar o trao personalizado como um estilo para reutilizar em vrios documentos.
Para criar traos personalizados: 1

Seguir um destes procedimentos:

Clicar na caixa Cor do trao no painel Ferramentas e clicar em Opes de trao. Escolher Opes de trao no menu pop-up Opes de trao do Inspetor de propriedades.
2 3

A janela pop-up Opes de trao exibida. Editar os atributos de trao de pincel desejados. Salvar os atributos de trao personalizados como um estilo. Para mais informaes, consultar Criao e excluso de um estilo na pgina 250.

Como trabalhar com um preenchimento


O Inspetor de propriedades, o menu pop-up Opes de preenchimento, a janela pop-up Opes de preenchimento e a janela pop-up Dgrad, assim como um conjunto de padres e texturas de bitmap, possibilitam a criao de uma ampla variedade de preenchimentos para texto e objetos vetoriais. Com a ferramenta Dgrad ou Lata de tinta, tambm possvel preencher selees de pixels com base nas configuraes de preenchimento atuais. Definio de um atributo de preenchimento das ferramentas de desenho O usurio pode definir os atributos de preenchimento das ferramentas de desenho Retngulo, Retngulo arredondado, Elipse e Polgono que sero aplicados aos prximos objetos que desenhar. O preenchimento atual aparece na caixa Cor de preenchimento no painel Ferramentas, no Inspetor de propriedades e no Misturador de cores. possvel utilizar qualquer um desses painis para alterar o preenchimento de uma ferramenta de desenho.

O cone da lata de tinta indica a caixa Cor de preenchimento no painel Ferramentas, no Inspetor de propriedades e no Misturador de cores.

204 Captulo 8

Para alterar a cor de preenchimento slido das ferramentas de desenho de vetor aplicveis e da ferramenta Lata de tinta: 1

Escolher uma ferramenta de desenho de vetor ou a ferramenta Lata de tinta. 2 Seguir um destes procedimentos: Pressionar Control+D (Windows) ou Command+D (Macintosh) para cancelar a seleo de todos os objetos e clicar na caixa Cor de preenchimento no Inspetor de propriedades, para abrir a janela pop-up Cor de preenchimento. 3 Clicar na caixa Cor de preenchimento no painel Ferramentas ou no Misturador de cores para abrir a janela pop-up de cores. 4 Escolher uma cor para o preenchimento no conjunto de exemplos, ou usar o ponteiro contagotas para fazer amostragem de uma cor de qualquer parte da tela. 5 Usar a ferramenta da forma desejada.
Nota: A escolha da ferramenta Texto sempre faz com que a caixa Cor de preenchimento reverta para a ltima cor de texto slida usada por essa ferramenta.

Edio de um preenchimento slido Um preenchimento slido uma cor slida que preenche o interior de um objeto. O painel Ferramentas, o Inspetor de propriedades e o Misturador de cores oferecem a opo de alterar a cor de preenchimento de um objeto.
Para editar o preenchimento slido de um objeto vetorial selecionado no Inspetor de propriedades: 1 2

Clicar na caixa Cor de preenchimento no painel Ferramentas, no Inspetor de propriedades ou no Misturador de cores, para abrir a janela pop-up de cores. Escolher um exemplo na janela pop-up de cores. O preenchimento aparece no objeto selecionado e se torna a cor de preenchimento ativa.

Aplicao de um preenchimento dgrad ou com padro


O usurio pode alterar preenchimentos para exibir uma variedade de caractersticas slidas, pontilhadas, dgrad ou com padro, desde cores slidas at dgrads que se assemelham a acetinado, ondulaes ou dobras. Alm disso, existe a possibilidade de alterar vrios atributos de um preenchimento, como cor, borda, textura e transparncia. H uma ampla gama de preenchimentos dgrad e com padro predefinidos sua escolha; existe tambm a opo de criar um preenchimento personalizado.
Nota: Um preenchimento recm-criado assume a cor atual exibida na caixa Cor de preenchimento no painel Ferramentas.

As opes de preenchimento do Inspetor de propriedades ou da janela pop-up Opes de preenchimento permitem editar os atributos de preenchimento.

Aplicao de cor, trao e preenchimento 205

Aplicao de um preenchimento com padro possvel preencher um objeto de traado com um grfico de bitmap, conhecido como preenchimento como preenchimento com padro. O Fireworks oferece mais de uma dezena de preenchimentos com padro, incluindo Capacho Berbere, Folhas e Madeira.

Para aplicar um preenchimento com padro a um objeto selecionado: 1

Seguir um destes procedimentos:

Escolher Padro no menu pop-up Opes de preenchimento no Inspetor de propriedades. Clicar na caixa Cor de preenchimento no painel Ferramentas, clicar em Opes de
preenchimento e escolher Padro no menu pop-up Opes de preenchimento.
2

Escolher um padro no menu pop-up Nome padronizado. O preenchimento com padro aparece no objeto selecionado e se torna a cor de preenchimento ativa.

Adio de um padro personalizado possvel definir um arquivo de bitmap como um novo preenchimento com padro. Estes so os formatos de arquivo que podem ser usados como padres: PNG, GIF, JPEG, BMP, TIFF e PICT (apenas Macintosh). Quando um preenchimento com padro for uma imagem transparente de 32 bits, a transparncia afetar o preenchimento no Fireworks. Se uma imagem no tiver 32 bits, ela ser opaca. Quando um novo padro adicionado, seu nome aparece no menu pop-up Nome padronizado da janela pop-up Opes de preenchimento.
Para criar um novo padro a partir de um arquivo externo: 1 2 3

Com as propriedades do objeto vetorial exibidas no Inspetor de propriedades, escolher Padro no menu pop-up Opes de preenchimento. Clicar na caixa Cor de preenchimento e escolher Outro no menu pop-up Nome padronizado. Navegar at o arquivo de bitmap que deseja usar como o novo padro e clicar em Abrir. O novo padro adicionado parte inferior da lista Nome padronizado.

206 Captulo 8

Aplicao de um preenchimento dgrad As categorias de preenchimento, alm de Nenhum, Slido, Padro e Pontilhamento Web, so preenchimentos dgrad. Esses preenchimentos misturam cores para criar vrios efeitos.

Objetos com vrios preenchimentos dgrad


Para aplicar um preenchimento dgrad a um objeto selecionado:

Escolher um dgrad no menu pop-up Opes de preenchimento no Inspetor de propriedades. O preenchimento aparece no objeto selecionado e se torna o preenchimento ativo. Edio de um preenchimento dgrad Para editar o preenchimento dgrad atual, clicar em qualquer caixa Cor de preenchimento e usar a janela pop-up Editar dgrad.
Inclinao da cor

Visualizar

Janela pop-up Editar dgrad


Para abrir a janela pop-up Editar dgrad: 1 2

Selecionar um objeto com um preenchimento dgrad ou escolher um preenchimento dgrad no menu pop-up Opes de preenchimento no Inspetor de propriedades. Clicar na caixa Cor de preenchimento no painel Ferramentas ou no Inspetor de propriedades para abrir a janela pop-up. A janela pop-up Editar dgrad aberta com o dgrad atual na visualizao e na inclinao da cor.

Aplicao de cor, trao e preenchimento 207

Para adicionar um novo exemplo de opacidade ou cor, seguir um destes procedimentos:

Para adicionar um exemplo de cor, clicar na rea abaixo da inclinao da cor dgrad. Para adicionar um exemplo de opacidade, clicar na rea acima da inclinao da cor dgrad.
Para remover um exemplo de opacidade ou cor do dgrad:

Arrastar o exemplo para longe da janela pop-up Editar dgrad.


Para definir ou alterar a cor de um exemplo de cor: 1 2

Clicar no exemplo de cor. Escolher uma cor na janela pop-up.

Para definir ou alterar a transparncia de um exemplo de opacidade: 1 2

Clicar no exemplo de opacidade. Seguir um destes procedimentos: transparente e 100 totalmente opaco.

Arrastar o controle deslizante at a porcentagem de transparncia, onde 0 totalmente Digitar um valor numrico de 1 a 100 para definir a opacidade.
Nota: O quadriculado de transparncia mostra o dgrad em reas transparentes.

Quando terminar de editar o dgrad, pressionar Enter ou clicar fora da janela pop-up Editar dgrad. O preenchimento dgrad aparece em quaisquer objetos selecionados e se torna o preenchimento ativo.

Para ajustar a transio entre as cores no preenchimento:

Arrastar exemplos de cores para a esquerda ou para a direita. Criao de um preenchimento com a ferramenta Dgrad A ferramenta Dgrad se encontra no mesmo grupo da ferramenta Lata de tinta. Essa nova ferramenta funciona de forma semelhante ferramenta Lata de tinta, mas preenche um objeto com um dgrad e no com uma cor slida. Da mesma maneira que a ferramenta Lata de tinta, ela conserva as propriedades do ltimo dgrad utilizado.
Para usar a ferramenta Dgrad: 1 2

Clicar na ferramenta Lata de tinta no painel Ferramentas e escolher a ferramenta Dgrad no menu pop-up. Escolher um dos atributos a seguir no Inspetor de propriedades:
Opes de preenchimento

um menu pop-up no qual possvel escolher um tipo de dgrad.

A caixa Cor do preenchimento, quando clicada, exibe a janela pop-up Editar dgrad, na qual

possvel definir vrias opes de cor e transparncia.


Borda determina se o dgrad tem uma borda de preenchimento enevoada, sem serrilhado ou acentuada. A escolha de uma borda enevoada permite que se determine a quantidade de enevoamento. Textura oferece vrias opes sua escolha, inclusive Gro, Metal, Linha diagonal, Malha ou Lixa.

208 Captulo 8

Clicar e arrastar o ponteiro para estabelecer o ponto de partida do dgrad, assim como a direo e o comprimento da rea dgrad.

Transformao e distoro de um preenchimento possvel mover, girar, inclinar e alterar a largura do preenchimento dgrad ou com padro de um objeto. A seleo de um objeto com um preenchimento dgrad ou com padro usando as ferramentas Ponteiro ou Dgrad faz com que seja exibido um conjunto de alas no objeto ou prximas a ele. Para ajustar o preenchimento do objeto, arrastar essas alas.

Usar as alas de preenchimento para ajustar interativamente um preenchimento dgrad ou com padro.
Para mover o preenchimento dentro de um objeto:

Arrastar a ala redonda ou clicar em um outro local dentro do preenchimento usando a ferramenta Dgrad.
Para girar o preenchimento:

Arrastar as linhas que conectam as alas.


Para ajustar a largura e a inclinao do preenchimento:

Arrastar uma ala quadrada. Definio de uma borda de preenchimento acentuada, enevoada ou sem serrilhado O Fireworks permite definir a borda de um preenchimento como uma linha acentuada regular ou suaviz-la atravs dos recursos Suavizao de serrilhado ou Enevoar. Por padro, as bordas apresentam serrilhados suavizados. A suavizao de serrilhado suaviza bordas irregulares que podem ocorrer em objetos arredondados, como elipses e crculos, atravs de uma mistura sutil da borda com o fundo. No entanto, o enevoamento cria uma mistura perceptvel nos dois lados da borda. Isso confere borda um efeito suavizado quase um brilho.
Para alterar a borda de um objeto selecionado: 1

Seguir um destes procedimentos para exibir o menu pop-up Borda:

Clicar no menu pop-up Borda no Inspetor de propriedades. No painel Ferramentas, clicar na caixa Cor de preenchimento, clicar em Opes de
preenchimento e, em seguida, clicar no menu pop-up Borda.
2 3

Escolher uma opo de borda: Borda acentuada, Suavizao de serrilhado ou Enevoar. Para uma borda enevoada, escolher tambm o nmero de pixels a serem enevoados em cada lado da borda.

Aplicao de cor, trao e preenchimento 209

O padro 10. A escolha varia de 0 a 100. Quanto mais alto o nvel, maior ser o enevoamento.

Sobre como salvar um preenchimento dgrad personalizado Para salvar as configuraes de dgrad atuais como um dgrad personalizado para usar em vrios documentos, necessrio criar um estilo. Para mais informaes, consultar Criao e excluso de um estilo na pgina 250. Remoo de um preenchimento simples remover atributos de preenchimento de objetos selecionados.
Para remover o preenchimento de um objeto selecionado, seguir um destes procedimentos:

Escolher Nenhum no menu pop-up Opes de preenchimento do Inspetor de propriedades ou


da janela pop-up Opes de preenchimento.

Clicar em qualquer caixa Cor de preenchimento e clicar no boto Transparente. Essa opo
remove somente preenchimentos slidos.

Adio de textura a traos e preenchimentos


possvel adicionar efeitos tridimensionais tanto a traos quanto a preenchimentos atravs da adio de textura. O Fireworks oferece vrias texturas, mas tambm permite o uso de texturas externas. Adio de textura a um trao As texturas modificam o brilho do trao, mas no o matiz, e conferem aos traos uma aparncia menos mecnica e mais orgnica, como se o usurio estivesse passando tinta em uma superfcie texturizada. As texturas so mais eficazes quando usadas com traos largos. possvel adicionar uma textura a qualquer trao. O Fireworks oferece vrias texturas escolha, como Chiffon, Mancha de leo e Lixa.

Usar as opes de trao do Inspetor de propriedades ou da janela pop-up Opes de trao para adicionar uma textura a um trao depincel.

O menu pop-up Textura exibe uma visualizao da textura realada.

210 Captulo 8

Para adicionar textura ao trao de um objeto selecionado: 1

Seguir um destes procedimentos para abrir o menu pop-up Textura do trao:

Clicar no menu pop-up Textura do trao no Inspetor de propriedades. No painel Ferramentas, clicar na caixa Cor do trao, clicar em Opes de trao e, em seguida,
clicar no menu pop-up Textura.
2

Seguir um destes procedimentos:

Escolher uma textura no menu pop-up. Para usar uma textura externa, escolher Outra no menu pop-up e navegar at um arquivo de
textura.
Nota: Estes so os formatos de arquivo que podem ser usados como texturas: PNG, GIF, JPEG, BMP, TIFF e PICT (apenas Macintosh).

Digitar uma porcentagem de 0 a 100 para controlar a profundidade da textura. Aumentar a porcentagem aumenta a intensidade da textura.

Adio de textura a um preenchimento As texturas modificam o brilho de um preenchimento, mas no o matiz, e conferem aos preenchimentos uma aparncia menos mecnica e mais orgnica. possvel adicionar uma textura a qualquer preenchimento. O Fireworks oferece vrias texturas sua escolha, como Chiffon, Mancha de leo e Lixa, mas tambm permite o uso de arquivos de bitmap como texturas. Isso permite criar praticamente qualquer tipo de textura personalizada.
Para adicionar textura ao preenchimento de um objeto selecionado: 1

Seguir um destes procedimentos para abrir o menu pop-up Textura do preenchimento:

Clicar no menu pop-up Textura do preenchimento no Inspetor de propriedades. No painel Ferramentas, clicar na caixa Cor de preenchimento, clicar em Opes de
preenchimento e, em seguida, clicar no menu pop-up Textura.
2

Seguir um destes procedimentos:

Escolher uma textura no menu pop-up. Para usar uma textura externa, escolher Outra no menu pop-up e navegar at um arquivo de
textura.
3

Digitar uma porcentagem de 0 a 100 para controlar a profundidade da textura. Aumentar a porcentagem aumenta a intensidade da textura. Escolher Transparente para introduzir um nvel de transparncia no preenchimento. A porcentagem de textura tambm controla o grau de transparncia.

Adio de uma textura personalizada Existe a opo de usar arquivos de bitmap do Fireworks e de outros aplicativos como texturas. Estes so os formatos de arquivo que podem ser usados como texturas: PNG, GIF, JPEG, BMP, TIFF e PICT (apenas Macintosh). Quando uma nova textura adicionada, seu nome aparece no menu pop-up Nome da textura.

Aplicao de cor, trao e preenchimento 211

Para criar uma nova textura a partir de um arquivo externo: 1 2

Com as propriedades do objeto vetorial exibidas no Inspetor de propriedades, escolher Outra em qualquer um dos menus pop-up Nome da textura. Navegar at o arquivo de bitmap que deseja usar como a nova textura e clicar em Abrir. A nova textura adicionada parte inferior da lista Nome da textura.

212 Captulo 8

CAPTULO 9 Uso de Efeitos ao vivo

Efeitos ao vivo do Macromedia Fireworks MX so melhorias que podem ser aplicadas aos objetos vetoriais, imagens bitmap e texto. Chanfros e relevo, sombras e brilhos, correo de cor, e desfoque e grau de desfoque so alguns Efeitos ao vivo. possvel aplicar Efeitos ao vivo aos objetos selecionados diretamente no Inspetor de propriedades. Os efeitos ao vivo so atualizados automaticamente quando se edita qualquer objeto em que tenham sido aplicados. Depois de aplicado o Efeito ao vivo, possvel alterar suas opes a qualquer momento, ou reorganizar a sua ordem para testar a combinao com outros efeitos. No Inspetor de propriedades possvel ativar ou desativar, ou excluir os Efeitos ao vivo. Quando um efeito removido, o objeto ou a imagem volta a ter a aparncia anterior. Alguns efeitos agora includos nos Efeitos ao vivo do Fireworks tais como, Nveis automticos, Desfoque Gaussiano e Desfocar mscara j estiveram disponveis somente como plug-ins ou filtros irreversveis. Alm desses efeitos, possvel adicionar plug-ins de outros fornecedores para usar como Efeitos ao vivo no Fireworks. Se preferir, poder usar esses filtros no modo tradicional usando o menu Filtros. Para mais informaes, consultar Ajuste da cor e do tom de um bitmap na pgina 133.

Aplicao de Efeitos ao vivo


possvel aplicar um ou mais Efeitos ao vivo aos objetos selecionados, usando o Inspetor de propriedades. Sempre que um novo efeito for adicionado ao objeto, este ser adicionado lista no menu pop-up Efeitos do Inspetor de propriedades. possvel ativar ou desativar o efeito.

Menu pop-up Efeitos do Inspetor de propriedades

213

Quando os objetos aos quais sero aplicados Efeitos ao vivo forem selecionados, o local das opes Efeitos ao vivo ser um pouco diferente, se o Inspetor de propriedades estiver com toda a altura ou metade da altura:

Se o Inspetor de propriedades estiver maximizado para toda a altura, usar o boto Adicionar
efeitos, o boto Excluir efeitos e a lista de Efeitos ao vivo aplicados, que esto exibidos no Inspetor de propriedades.

Se o Inspetor de propriedades estiver com a metade da altura, clicar em Editar efeitos para
exibir o boto Adicionar efeitos, o boto Excluir efeitos e a lista de Efeitos ao vivo aplicados.
Nota: Em Usando o Fireworks, as etapas que envolvem Efeitos ao vivo assumem que o Inspetor de propriedades est aberto com toda a altura.

Cada Efeito ao vivo pode ser personalizado para ficar com a aparncia desejada. Ao selecionar Chanfro, Embaar, Relevo, Brilho, Sombra ou Aguar, uma janela pop-up aberta e nela o usurio pode ajustar as configuraes de efeito. Quando o usurio seleciona efeitos para a correo de cores, so abertas caixas de dilogo contendo controles para o ajuste de caractersticas das cores como, nvel, brilho e contraste, matiz e saturao, inverso, curvas e preenchimento colorido. Na seleo de um efeito embaado ou aguado, ele aplicado diretamente no objeto. Testar as configuraes at obter a aparncia desejada. Se desejar alterar as configuraes de efeito posteriormente, consultar Edio de Efeitos ao vivo na pgina 218.
Largura de chanfro

Contraste Suavidade ngulo de chanfro Chanfro de boto predefinido

Janela pop-up Chanfro interno


Para aplicar um Efeito ao vivo aos objetos selecionados: 1

Clicar no boto Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar um efeito do menu pop-up Efeitos. O efeito ser adicionado lista Efeitos para o objeto selecionado. Se for aberta uma janela pop-up ou caixa de dilogo, digitar as configuraes do efeito e, em seguida, seguir um destes procedimentos:

Se o Efeito ao vivo tiver uma caixa de dilogo, clicar em OK. Se o Efeito ao vivo tiver uma janela pop-up, pressionar Enter ou clicar em qualquer parte do
espao de trabalho.
3

Repetir as etapas 1 e 2 para aplicar mais Efeitos ao vivo.

214 Captulo 9

Nota: A ordem de aplicao dos Efeitos ao vivo afeta o efeito geral. Voc pode arrastar os Efeitos ao vivo para reorganizar a ordem de empilhamento. Para mais informaes, consultar Reordenao de Efeitos ao vivo na pgina 218. Dica: Para aplicar um Efeito ao vivo de forma que aparea para afetar apenas uma seleo de pixel dentro de uma imagem, recortar e colar a seleo no local para criar uma nova imagem bitmap, selecion-la e, em seguida, aplicar o Efeito ao vivo.

Para ativar ou desativar um efeito aplicado a um objeto:

Clicar na caixa de seleo ao lado do efeito na lista Efeitos do Inspetor de propriedades.


Para ativar ou desativar todos os efeitos aplicados a um objeto:

Clicar no boto Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar Opes > Tudo ativado ou Opes > Tudo desativado no menu pop-up. Para informaes sobre como remover permanentemente os efeitos, consultar Remoo de Efeitos ao vivo na pgina 219. Aplicao de bordas chanfradas A aplicao de uma borda chanfrada a um objeto cria uma aparncia de alto relevo. possvel criar um chanfro interno ou um chanfro externo.

Um retngulo com Chanfro interno e Chanfro externo


Para aplicar uma borda chanfrada a um objeto selecionado: 1

Clicar no boto Adicionar efeitos no Inspetor de propriedades e, em seguida, escolher uma opo de chanfro no menu pop-up:

Chanfro e relevo > Chanfro interno Chanfro e relevo > Chanfro externo
2 3

Editar as configuraes do efeito na janela pop-up. Clicar fora da janela ou pressionar Enter para fech-la.

Aplicao de relevo Pode-se usar o efeito Relevo para que a imagem, o objeto ou texto parea estar em alto ou baixo relevo na tela.

Um objeto com o efeito Interiorizar relevo e Relevo elevado

Uso de Efeitos ao vivo 215

Para aplicar um efeito Relevo: 1

Clicar no boto Adicionar efeitos no Inspetor de propriedades e, em seguida, escolher uma opo de relevo no menu pop-up:

Chanfro e relevo > Interiorizar relevo Chanfro e relevo > Relevo elevado
2

Editar as configuraes do efeito na janela pop-up. Para que o objeto original aparea na rea em relevo, selecionar Mostrar objeto. Depois de concludo, clicar fora da janela ou pressionar Enter para fech-la.
Nota: Para manter a compatibilidade com verses anteriores, os efeitos Relevo em objetos de documentos mais antigos so abertos com a opo Mostrar objeto sem estar selecionada.

Aplicao de sombras e brilhos No Fireworks fcil aplicar sombras, sombras internas e brilhos a objetos. Voc pode especificar o ngulo da sombra para simular o ngulo de incidncia da luz sobre o objeto.

Efeitos Aplicar sombra, Sombra interna e Brilho


Para aplicar uma sombra ou sombra interna: 1

Clicar no boto Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar uma opo de sombra no menu pop-up:

Sombra e brilho > Aplicar sombra Sombra e brilho > Sombra interna
2

Editar as configuraes do efeito na janela pop-up:

Arrastar o controle deslizante Distncia para definir a distncia entre a sombra e o objeto. Clicar na caixa de cores para abrir a janela pop-up de cores e definir a cor da sombra. Arrastar o controle deslizante Opacidade para definir a porcentagem de transparncia da
sombra.

Arrastar o controle deslizante Suavidade para definir a preciso da sombra. Arrastar o dial ngulo para definir a direo da sombra. Selecionar Separao para ocultar o objeto e exibir apenas a sombra.
3

Depois de concludo, clicar fora da janela ou pressionar Enter para fech-la. Clicar no boto Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar Sombra e brilho > Brilho.

Para aplicar um brilho: 1

216 Captulo 9

Editar as configuraes do efeito na janela pop-up: Clicar na caixa de cores para abrir a janela pop-up de cores e definir a cor do brilho. Arrastar o controle deslizante Largura para definir a largura do brilho. Arrastar o controle deslizante Opacidade para definir a porcentagem de transparncia do brilho. Arrastar o controle deslizante Suavidade para definir a preciso do brilho. Arrastar o controle deslizante Deslocamento para especificar a distncia entre o brilho e o objeto. Depois de concludo, clicar fora da janela ou pressionar Enter para fech-la.

Aplicaes de filtros e plug-ins do Photoshop como Efeitos ao vivo possvel aplicar todos os filtros integrados e plug-ins no menu Filtros como Efeitos ao vivo usando o Inspetor de propriedades. A sua aplicao como Efeitos ao vivo garante a edio ou remoo de um objeto a qualquer momento. Os plug-ins do Photoshop 6 e 7 so incompatveis com o Fireworks MX. No Macintosh, os filtros de outros fornecedores criados para serem executados no Mac OS 9 so suportados pelo Fireworks MX quando executados no Mac OS 9, e aqueles criados para serem executados no Mac OS X so suportados pelo Fireworks MX quando executados no Mac OS X.
Nota: O menu que nas verses anteriores do Fireworks era conhecido como Xtras, foi renomeado para menu Filtros no Fireworks MX. Os Xtras do Fireworks agora so os filtros.

Plug-ins do menu Filtros Na instalao de um plug-in do Photoshop no Fireworks, ele adicionado ao menu Filtros e ao Inspetor de propriedades. O menu Filtros deve ser usado para aplicar filtros e plug-ins do Photoshop, apenas se o usurio tiver certeza de que no desejar editar ou remover o efeito. Somente possvel remover um filtro se o comando Desfazer estiver disponvel. Instalao de plug-ins do Photoshop possvel usar o Inspetor de propriedades para aplicar alguns plug-ins do Photoshop como Efeitos ao vivo. Nem todos os plug-ins do Photoshop podem ser usados como Efeitos ao vivo. Alm disso, tambm possvel importar plug-ins do Photoshop apontando para uma pasta de plug-ins, usando a caixa de dilogo Preferncias. Para mais informaes, consultar Preferncias de pastas na pgina 423. No compartilhamento de um arquivo do Fireworks em que um plug-in do Photoshop esteja aplicado como Efeito ao vivo, o usurio que abri-lo poder exibir o efeito somente em um computador que tenha o plug-in instalado. No entanto, os efeitos internos do Fireworks so salvos com o arquivo do Fireworks.
Para instalar plug-ins do Photoshop: 1 2 3

Clicar no boto Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar Opes > Localizar plug-ins. Navegar at a pasta em que os plug-ins do Photoshop esto instalados e clicar em OK. Reiniciar o Fireworks para carregar os plug-ins.
Nota: Se o usurio mover os plug-ins para uma pasta diferente, repetir as etapas acima ou escolher Arquivo > Preferncias e clicar na guia Pastas para alterar o caminho dos plug-ins. Em seguida, reiniciar o Fireworks.

Uso de Efeitos ao vivo 217

Para aplicar um plug-in do Photoshop a um objeto selecionado como um Efeito ao vivo:

Clicar no boto Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar um efeito no submenu Opes. Sobre aplicao de efeito a objetos agrupados Se o usurio aplicar um efeito a um grupo, ele ser aplicado a todos os objetos do grupo. Se os objetos forem desagrupados, as configuraes do efeito de cada objeto sero revertidas para o efeito aplicado ao objeto individualmente. possvel aplicar um efeito a um objeto individual dentro de um grupo, selecionando apenas esse objeto com a ferramenta Subseleo. Para informaes sobre como selecionar um grupo ou objetos de um grupo, consultar Seleo de um objeto dentro de grupos na pgina 122.

Edio de Efeitos ao vivo


Se o usurio clicar no boto de informaes do Efeito ao vivo no Inspetor de propriedades, ser aberta uma janela pop-up contendo as configuraes atuais do efeito, que podem ser editadas.
Para editar um Efeito ao vivo: 1

No Inspetor de propriedades, clicar no boto de informaes ao lado do efeito que deseja editar. A janela pop-up ou caixa de dilogo adequada ser aberta.

Nota: Se o Inspetor de propriedades estiver aberto com a metade da altura, clicar em Adicionar efeitos para abrir a lista Efeitos ao vivo.

Ajustar as configuraes do efeito.


Nota: Se o efeito no for editvel, o boto de informaes estar esmaecido. Por exemplo, no possvel editar Nveis automticos.

Clicar fora da janela ou pressionar Enter.

Reordenao de Efeitos ao vivo possvel reorganizar a ordem dos efeitos aplicados a um objeto. A reorganizao dos efeitos altera a seqncia em que foram aplicados, e isso pode alterar o efeito combinado. Em geral, os efeitos que alteram o interior de um objeto, como o Chanfro interno, devem ser aplicados antes dos efeitos que alteram o exterior do objeto. Por exemplo, aplicar o efeito Chanfro interno antes de aplicar os efeitos Chanfro externo, Brilho ou Sombra.
Para reordenar os efeitos aplicados a um objeto selecionado:

Arrastar o efeito para a posio desejada na lista do Inspetor de propriedades.


Nota: Os efeitos listados no topo da lista so aplicados antes daqueles que esto na base da lista.

218 Captulo 9

Remoo de Efeitos ao vivo fcil remover os efeitos individuais ou todos os efeitos de um objeto.
Para remover um nico efeito aplicado a um objeto selecionado:

Selecionar o efeito a ser removido da lista Efeitos no Inspetor de propriedades e, em seguida, clicar no boto Excluir efeitos.
Para remover todos os efeitos de um objeto selecionado:

Clicar no boto Adicionar efeitos no Inspetor de propriedades e, em seguida, escolher Nenhum no menu pop-up. Criao de Efeitos ao vivo personalizados possvel salvar uma combinao especfica de configuraes de Efeitos ao vivo, criando um Efeito ao vivo personalizado. Todos os Efeitos ao vivo personalizados aparecem no menu pop-up Adicionar efeitos no Inspetor de propriedades e no painel Estilos. Efeitos ao vivo personalizados so, na verdade, estilos com todas as opes de propriedade desativadas, exceto a opo Efeito.

possvel criar um Efeito ao vivo personalizado usando o Inspetor de propriedades ou o painel


Estilos.

Voc pode aplicar um Efeito ao vivo personalizado aos objetos selecionados, a partir do menu
pop-up Adicionar efeitos ou no painel Estilos.

Ou, renomear ou excluir um Efeito ao vivo personalizado, usando o painel Estilos.


Para criar um Efeito ao vivo personalizado usando o Inspetor de propriedades: 1 2

Aplicar as configuraes do Efeito ao vivo aos objetos selecionados. Para mais informaes, consultar Aplicao de Efeitos ao vivo na pgina 213. Clicar no boto Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar Opes > Salvar como estilo. A caixa de dilogo Adicionar estilo ser aberta. Digitar um nome para o estilo e clicar em OK. O nome do Efeito ao vivo personalizado ser adicionado ao menu pop-up Adicionar efeitos, e um cone de estilo representando o Efeito ao vivo ser adicionado ao painel Estilos.

Para criar um Efeito ao vivo usando o painel Estilos: 1 2

Aplicar as configuraes do Efeito ao vivo aos objetos selecionados. Para mais informaes, consultar Aplicao de Efeitos ao vivo na pgina 213. Selecionar Adicionar estilo no menu Opes do painel Estilos. A caixa de dilogo Adicionar estilo ser aberta. Desativar todas as propriedades exceto a propriedade Efeito, digitar um nome e clicar em OK. O nome do Efeito ao vivo personalizado ser adicionado ao menu pop-up Adicionar efeitos, e um cone de estilo representando o Efeito ao vivo ser adicionado ao painel Estilos.
Nota: Se o usurio selecionar qualquer propriedade adicional na caixa de dilogo Adicionar estilo, o estilo no poder mais ser um item do menu pop-up Efeitos do Inspetor de propriedades, apesar de ele permanecer no painel Estilos como um estilo normal.

Uso de Efeitos ao vivo 219

Para aplicar um Efeito ao vivo personalizado a objetos selecionados, seguir um destes procedimentos:

Clicar no boto Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar o


Efeito ao vivo personalizado.

Clicar no cone do Efeito ao vivo personalizado no painel Estilos.


possvel renomear ou excluir um Efeito ao vivo personalizado, do mesmo modo que se faz com qualquer outro estilo no painel Estilos. Para mais informaes, consultar Criao e excluso de um estilo na pgina 250 e Edio de um estilo na pgina 251.
Nota: Um efeito padro do Fireworks no pode ser renomeado ou excludo.

Como salvar Efeitos ao vivo como comandos Voc pode salvar e reutilizar um efeito, criando um comando com base nesse efeito. Usando o painel Histrico, possvel automatizar todos os Efeitos ao vivo aplicados a um objeto, criando um comando disponvel a partir do menu Comandos. Voc pode usar esses comandos no processamento em lote. Para mais informaes, consultar Execuo de um comando com um processo em lote na pgina 412.
Para salvar as configuraes do efeito como comando: 1 2 3 4

Aplicar os efeitos ao objeto. Se o painel Histrico no estiver visvel, selecionar Janela > Histrico. Pressionar a tecla Shift e clicar na faixa de aes que deseja salvar como comando. Seguir um destes procedimentos:

Selecionar Salvar como comando no painel Histrico do menu Opes. Clicar no boto Salvar na parte inferior do painel Histrico.

Boto Salvar

Digitar o nome do comando e clicar em OK para adicionar o comando ao menu Comandos.

220 Captulo 9

CAPTULO 10 Camada, mascaramento e mistura

As camadas dividem um documento do Macromedia Fireworks MX em planos distintos, como se os componentes da ilustrao tivessem sido desenhados em folhas separadas de papel vegetal. Um documento pode ser formado por vrias camadas e cada camada pode conter diversos objetos. No Fireworks, o painel Camadas contm uma lista das camadas e dos objetos contidos em cada uma delas. As camadas do Fireworks so semelhantes aos conjuntos de camadas do Photoshop 6. As camadas do Photoshop so semelhantes aos objetos individuais do Fireworks. O mascaramento proporciona um controle de criatividade sobre camadas e objetos. O painel Camadas oferece a opo de aplicar mscaras e modos de mistura. As opes dos menus Selecionar e Modificar permitem a criao de mscaras. Usando um objeto vetorial ou bitmap, possvel delinear parte da imagem que est embaixo. Por exemplo, para delinear parte de uma fotografia de modo que ela parea ter uma moldura elptica ao seu redor, cole uma forma elptica como uma mscara em cima da fotografia. Todas as reas fora da elipse desaparecero como se tivessem sido cortadas, mostrando apenas a parte da figura dentro da elipse. Tcnicas de mistura proporcionam um outro nvel de controle de criatividade. possvel criar efeitos exclusivos misturando cores em objetos sobrepostos. O Fireworks oferece vrios modos de mistura para ajud-lo a obter exatamente a aparncia desejada.

Como trabalhar com uma camada


Cada objeto de um documento reside em uma camada. O usurio pode criar as camadas antes de desenhar ou adicion-las, conforme a necessidade. A tela est embaixo de todas as camadas, mas ela mesma no uma camada. Para informaes sobre como trabalhar com a tela, consultar Alterao da tela na pgina 94.

O painel Camadas exibe a ordem de empilhamento de camadas e objetos. Essa a ordem em que aparecem no documento. O Fireworks empilha as camadas com base na ordem em que foram criadas, inserindo a ltima camada criada no topo da pilha. A ordem de empilhamento determina a forma como os objetos de uma camada se sobrepem aos objetos de outra. A ordem das camadas e dos objetos pode ser reorganizada em camadas.

221

O painel Camadas exibe o estado atual de todas as camadas da moldura atual de um documento. Para exibir outras molduras, usar o painel Molduras ou escolher uma opo no menu pop-up Moldura, na parte inferior do painel Camadas. Para mais informaes, consultar Como trabalhar com uma moldura na pgina 314. O nome da camada ativa realado no painel Camadas. possvel expandir uma camada para exibir uma lista de todos os seus objetos. Os objetos so exibidos como miniaturas. O painel Camadas tambm mostra mscaras. Selecionar a miniatura da mscara permite edit-la. O painel Camadas tambm oferece a possibilidade de criar novas mscaras de bitmap. Para mais informaes sobre mscaras, consultar Mascaramento de imagens na pgina 227. Os controles do modo de mistura e opacidade se encontram na parte superior do painel Camadas. Para mais informaes, consultar Ajuste da opacidade e aplicao de uma mistura na pgina 247.
Expande/recolhe camada Mostra/oculta camada Bloqueia/desbloqueia camada

Camada ativa

Exclui camada Nova imagem bitmap Adiciona mscara Camada nova/duplicada

Ativao de uma camada Um clique em uma camada ou em um de seus objetos faz com que ela se torne a camada ativa. Os objetos desenhados, colados ou importados residem inicialmente na camada ativa.
Para ativar uma camada, seguir um destes procedimentos:

Clicar no nome da camada no painel Camadas. Selecionar um objeto nessa camada.


Adio e remoo de uma camada O painel Camadas oferece as seguintes opes: adicionar novas camadas, excluir camadas indesejadas e duplicar camadas e objetos existentes. Quando se cria uma nova camada, uma camada em branco inserida acima da camada selecionada atualmente. A nova camada passa a ser a camada ativa e realada no painel Camadas. Quando se exclui uma camada, a camada acima dela se torna a camada ativa.

222 Captulo 10

A criao de uma camada duplicada adiciona uma nova camada que contm os mesmos objetos que a camada selecionada atualmente. Objetos duplicados retm o modo de mistura e opacidade dos objetos dos quais foram copiados. possvel alterar os objetos duplicados sem afetar os originais.
Para adicionar uma camada, seguir um destes procedimentos:

Clicar no boto Camada nova/duplicada sem selecionar uma camada. Escolher Editar > Inserir > Camada. No menu Opes do painel Camadas, selecionar Nova camada e clicar em OK.
Para excluir uma camada, seguir um destes procedimentos:

Arrastar a camada para o cone de lixeira no painel Camadas. Selecionar a camada e clicar no cone de lixeira no painel Camadas.
Para duplicar uma camada, seguir um destes procedimentos:

Arrastar uma camada at o boto Camada nova/duplicada. No menu Opes do painel Camadas, selecionar uma camada e escolher Duplicar camada.
Escolher o nmero de camadas duplicadas a inserir e onde posicion-las na ordem de empilhamento:
No topo posiciona

as novas camadas no topo do painel Camadas. A Camada da Web sempre a camada superior; portanto, selecionar No topo posiciona a camada duplicada embaixo da Camada da Web. as novas camadas acima da camada selecionada. as novas camadas abaixo da camada selecionada.

Antes da camada atual posiciona

Depois da camada atual posiciona Na base posiciona

as novas camadas na base do painel Camadas.

Para duplicar um objeto:

Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e arrastar o objeto at a posio desejada. Exibio de uma camada O painel Camadas exibe os objetos e camadas em uma estrutura hierrquica. Se um documento contiver vrios objetos e camadas, o painel Camadas poder ficar desorganizado e ficar difcil navegar nele. Recolher a exibio de camadas ajuda a eliminar a baguna. Quando for necessrio exibir ou selecionar objetos especficos em uma camada, ela poder ser expandida. Tambm possvel expandir ou recolher todas as camadas ao mesmo tempo.
Para expandir ou recolher os objetos em uma camada:

Clicar no sinal de adio (+) ou subtrao (-) (Windows) ou no tringulo (Macintosh) esquerda do nome da camada no painel Camadas.
Para expandir ou recolher todas as camadas:

Manter pressionada a tecla Alt e clicar no sinal de adio (+) ou subtrao (-) (Windows), ou manter pressionada a tecla Option e clicar no tringulo (Macintosh) esquerda do nome da camada no painel Camadas.

Camada, mascaramento e mistura 223

Organizao de uma camada possvel organizar os objetos e camadas em um documento nomeando-os e reorganizando-os no painel Camadas. Os objetos podem ser movidos dentro de uma camada ou entre camadas. Mover camadas e objetos no painel Camadas altera a ordem em que os objetos aparecem na tela. Os objetos no topo de uma camada aparecem acima dos outros objetos dessa camada na tela. Os objetos na camada mais alta aparecem na frente de objetos em camadas inferiores.
Nota: O painel Camadas rola automaticamente quando uma camada ou um objeto arrastado para cima ou para baixo alm dos limites da rea visualizvel.

Para nomear um objeto ou camada: 1 2

Clicar duas vezes em um objeto ou camada no painel Camadas. Digitar um novo nome para o objeto ou camada e pressionar Enter.
Nota: No possvel renomear a camada da Web. No entanto, possvel nomear objetos da Web na camada da Web, como fatias e pontos ativos. Para mais informaes, consultar Uso da Camada da Web na pgina 226.

Para mover um objeto ou camada:

Arrastar a camada ou o objeto at a posio desejada no painel Camadas.

Para mover todos os objetos selecionados em uma camada para outra posio:

Arrastar o indicador de seleo azul de uma camada para outra. Todos os objetos selecionados na camada so movidos simultaneamente para a outra camada.
Para copiar todos os objetos selecionados em uma camada para outra posio:

Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e arrastar o indicador de seleo azul de uma camada para outra. Todos os objetos selecionados na camada so copiados para a outra camada. Como proteger uma camada e um objeto O painel Camadas oferece vrias opes que permitem controlar a acessibilidade de objetos.

224 Captulo 10

possvel proteger os objetos de um documento contra edio e seleo acidentais. Bloquear uma camada evita a seleo ou edio dos respectivos objetos. O recurso Edio de camada nica protege os objetos em todas as camadas, exceto na camada ativa, contra alteraes ou selees indesejadas. Atravs do painel Camadas tambm possvel controlar a visibilidade dos objetos e camadas na tela. Quando um objeto ou camada estiver oculto no painel Camadas, ele no aparecer na tela e, assim, no poder ser alterado nem selecionado inadvertidamente.
Nota: Camadas e objetos ocultos no so includos quando um documento exportado. No entanto, os objetos da camada da Web podem ser exportados sempre, independentemente de estarem ocultos ou no. Para mais informaes sobre exportao, consultar Exportao do Fireworks na pgina 347.

Para bloquear uma camada:

Clicar no quadrado da primeira coluna imediatamente esquerda do nome da camada. Um cone de cadeado indica que a camada est bloqueada.
Nota: Embora seja possvel bloquear camadas, o mesmo no ocorre com objetos individuais.

Para bloquear vrias camadas:

No painel Camadas, arrastar o ponteiro pela coluna Bloquear.


Para bloquear ou desbloquear todas as camadas:

No menu Opes do painel Camadas, escolher Bloquear todas ou Desbloquear todas.


Para ativar ou desativar o recurso Edio de camada nica:

No menu Opes do painel Camadas, escolher Edio de camada nica. Uma marca de seleo indica que a Edio de camada nica est ativa.
Para mostrar ou ocultar uma camada ou objetos em uma camada:

Clicar no quadrado da coluna do meio esquerda de um nome de camada ou objeto. O cone de um olho indica que a camada est visvel.
Para mostrar ou ocultar vrios objetos ou camadas:

No painel Camadas, arrastar o ponteiro pela coluna do olho.


Para mostrar ou ocultar todos os objetos e camadas:

No menu Opes do painel Camadas, escolher Mostrar tudo ou Ocultar tudo. Mesclagem de um objeto no painel Camadas O trabalho com objetos bitmap poder fazer com que o painel Camadas fique desorganizado em pouco tempo. O Fireworks oferece a opo de mesclagem de objetos no painel Camadas, caso o ltimo objeto selecionado esteja imediatamente acima de um objeto de bitmap. Os objetos e bitmaps a serem mesclados no necessitam ser adjacentes no painel Camadas, nem residir na mesma camada. Mesclar para baixo faz com que todos os objetos bitmap e vetoriais selecionados sejam nivelados no objeto bitmap que est logo abaixo do ltimo objeto selecionado. O resultado um nico objeto bitmap. Depois de mesclados, os objetos bitmap e vetoriais no podem ser editados separadamente e perde-se a capacidade de edio de objetos vetoriais.

Camada, mascaramento e mistura 225

Para mesclar objetos: 1

No painel Camadas, selecionar os objetos que se deseja mesclar com um objeto bitmap. Manter pressionada a tecla Shift e clicar para selecionar mais de um objeto.
Dica: possvel mesclar o contedo de uma camada selecionada em um objeto bitmap que seja o primeiro da camada imediatamente abaixo da camada selecionada.

Seguir um dos seguintes procedimentos:

Escolher Mesclar para baixo no menu Opes do painel Camadas. Escolher Modificar > Mesclar para baixo. No menu contextual que aparece quando se clica com o boto direito do mouse (Windows) ou
com a tecla Control (Macintosh) nos objetos selecionados na tela, escolher Mesclar para baixo. Os objetos selecionados so mesclados com o objeto bitmap. O resultado um nico objeto bitmap.
Nota: Mesclar para baixo no afeta fatias, pontos ativos nem botes.

Compartilhamento de uma camada possvel compartilhar uma camada entre todas as molduras de um documento. Com isto, ao atualizar um objeto em uma camada, ele atualizado automaticamente em todas as molduras. Isso ser til para mostrar objetos, como elementos de fundo, em todas as molduras de uma animao.
Para compartilhar uma camada selecionada entre molduras, seguir um dos seguintes procedimentos:

No menu Opes do painel Camadas, escolher Compartilhar esta camada. No painel Camadas, clicar duas vezes no nome da camada e escolher Compartilhar entre
molduras. Uso da Camada da Web A camada da Web uma camada especial que aparece como a camada superior em cada documento. Essa camada contm objetos da Web, como fatias e pontos ativos, que so usados para atribuir interatividade a documentos exportados do Fireworks. Para mais informaes sobre objetos da Web, consultar Captulo 12, Fatias, rollovers e pontos ativos, na pgina 261. No possvel cancelar o compartilhamento, excluir, duplicar, mover ou renomear a camada da Web. Tambm no possvel mesclar objetos que nela residam. Ela sempre compartilhada entre todas as molduras, e os objetos da Web ficam visveis em todas as molduras.
Para renomear uma fatia ou um ponto ativo na camada da Web: 1 2

No painel Camadas, clicar duas vezes na fatia ou no ponto ativo. Digitar um novo nome e clicar fora da janela ou pressionar a tecla Enter.
Nota: Se uma fatia for renomeada, esse nome ser usado quando ela for exportada.

Sobre importao de camadas agrupadas do Photoshop Os arquivos do Photoshop que contm camadas so importados com cada camada posicionada como um objeto separado em uma camada nica do Fireworks. As camadas agrupadas so importadas como camadas individuais, como se tivessem sido desagrupadas no Photoshop antes da importao para o Fireworks. O efeito de corte nas camadas agrupadas do Photoshop perde-se na importao.

226 Captulo 10

Mascaramento de imagens
Como o nome sugere, as mscaras ocultam ou mostram partes de um objeto ou imagem. Qualquer uma das diversas tcnicas de mascaramento possibilita a aplicao de vrios tipos de efeitos criativos a objetos. possvel criar uma mscara que funcione como uma estampa de biscoito em outros objetos. Para isso, basta cortar imagens ou objetos com seu traado que esto embaixo. Uma outra possibilidade criar uma mscara que funcione como uma janela enevoada, que permite revelar ou ocultar partes dos objetos embaixo dela. Para isso, basta desenhar na mscara. Esse tipo de mscara usa os tons da aparncia dos tons de cinza para afetar a visibilidade dos objetos selecionados. Uma outra alternativa criar uma mscara que use sua prpria transparncia para afetar a visibilidade. Para criar uma mscara, usa-se o painel Camadas ou os menus Editar, Selecionar ou Modificar. Depois de criada a mscara, ser possvel ajustar a posio da seleo com mscara na tela ou modificar a aparncia da mscara editando o objeto de mscara. Alm disso, existe a opo de aplicar transformaes mscara como um todo ou a seus componentes individuais. Sobre mscaras O objeto de mscara pode ser um objeto vetorial ou bitmap. O uso de um objeto vetorial ou bitmap como mscara produz uma mscara vetorial ou de bitmap, respectivamente. Tambm possvel usar vrios objetos ou objetos agrupados para criar uma mscara. Sobre mscaras vetoriais Se o usurio estiver acostumado a trabalhar com outros aplicativos de ilustrao de vetor, como o Macromedia FreeHand, talvez j estar familiarizado com mscaras vetoriais, que s vezes so chamadas de traados de corte ou itens de colagem. O traado de um objeto de mscara vetorial corta os objetos que esto embaixo para lhes dar a forma de seu traado, criando um efeito de estampa de biscoito.

Uma mscara vetorial aplicada com o uso de seu contorno de traado Ao se criar uma mscara vetorial, uma miniatura de mscara com um cone de caneta aparece no painel Camadas para indicar que essa uma mscara vetorial.

Uma miniatura de mscara vetorial no painel Camadas

Camada, mascaramento e mistura 227

Ao selecionar uma mscara vetorial, o Inspetor de propriedades exibe informaes sobre a maneira como ela aplicada. A metade inferior do Inspetor de propriedades exibe propriedades adicionais que permitem editar o preenchimento e o trao do objeto de mscara.

Propriedades da mscara vetorial no Inspetor de propriedades Por padro, mscaras vetoriais so aplicadas com o uso de seu contorno de traado, mas tambm possvel aplic-las de outras maneiras. Para mais informaes, consultar Alterao da forma de aplicao de uma mscara na pgina 241.
Nota: As mscaras vetoriais criadas no Fireworks 4 e aplicadas com o uso da aparncia dos tons de cinza so importadas como mscaras de bitmap no editveis no Fireworks MX.

Sobre mscaras de bitmap Os usurios do Photoshop talvez j estejam familiarizados com mscaras de camada. As mscaras de bitmap do Fireworks so semelhantes s mscaras de camada, pois os pixels de um objeto de mscara afetam a visibilidade dos objetos que esto embaixo. Entretanto, as mscaras de bitmap do Fireworks so muito mais versteis: fcil alterar a forma como so aplicadas, quer usando a aparncia dos tons de cinza ou sua prpria transparncia. Alm disso, o Inspetor de propriedades do Fireworks torna as propriedades da mscara e as opes de ferramentas de bitmap mais acessveis, o que simplifica consideravelmente o processo de edio da mscara. Quando uma mscara selecionada, o Inspetor de propriedades exibe uma ampla gama de propriedades, no apenas para a mscara selecionada, mas tambm para quaisquer ferramentas de bitmap que possam ser usadas para edit-la.

Objetos originais e uma mscara de bitmap aplicada com o uso da aparncia dos tons de cinza H duas maneiras de aplicao de mscaras de bitmap:

Com o uso de um objeto existente para mascarar outros objetos. Essa tcnica semelhante
forma como mscaras vetoriais so aplicadas.

228 Captulo 10

Co a criao daquilo que conhecido como mscara vazia. Inicialmente, as mscaras vazias so
totalmente transparentes ou totalmente opacas. Uma mscara transparente (ou branca) mostra todo o objeto com mscara e uma mscara opaca (ou preta) oculta todo o objeto. As ferramentas de bitmap podem ser usadas para desenhar no objeto de mscara ou para modificlo, mostrando ou ocultando os objetos com mscara que esto embaixo. Ao se criar uma mscara de bitmap, o Inspetor de propriedades exibe informaes sobre a maneira como ela aplicada. Se uma ferramenta de bitmap for escolhida quando uma mscara de bitmap estiver selecionada, o Inspetor de propriedades exibir as propriedades e opes da mscara para a ferramenta selecionada, simplificando o processo de edio da mscara.

Propriedades da mscara de bitmap no Inspetor de propriedades quando uma ferramenta de bitmap est selecionada Por padro, a maioria das mscaras de bitmap so aplicadas com o uso da aparncia dos tons de cinza, mas tambm possvel aplic-las com o uso de seu canal alfa. Para mais informaes, consultar Alterao da forma de aplicao de uma mscara na pgina 241.
Nota: Agora, as mscaras de tons de cinza do Fireworks MX funcionam de uma maneira muito semelhante s mscaras de outros aplicativos grficos. As mscaras de tons de cinza criadas no Fireworks MX diferem das criadas em verses anteriores do Fireworks, pois as mscaras brancas sempre mostram objetos com mscara, enquanto as mscaras pretas sempre ocultam esses objetos. Compare isso com o Fireworks 4, no qual uma mscara preta mostrava os objetos que estavam embaixo e uma mscara branca os ocultava.

Criao de uma mscara com base em um objeto existente possvel criar uma mscara com base em um objeto existente. Quando usado como mscara, o contorno do traado de um objeto vetorial pode ser utilizado para cortar outros objetos. Quando um objeto bitmap usado como mscara, o brilho de seus pixels ou sua transparncia afeta a visibilidade de outros objetos. Mascaramento de um objeto com o comando Colar como mscara O comando Colar como mscara permite a criao de mscaras atravs do mascaramento de um objeto ou grupo de objetos com outro objeto. O comando cria uma mscara vetorial ou de bitmap, dependendo do tipo de objeto de mscara usado. Ao se usar um objeto vetorial como mscara, Colar como mscara cria uma mscara vetorial que corta objetos com mscara usando o contorno do traado do objeto vetorial. Ao utilizar uma imagem bitmap como mscara, Colar como mscara cria uma mscara de bitmap que afeta a visibilidade de objetos com mscara usando os valores de cor dos tons de cinza do objeto bitmap.
Para criar uma mscara com o comando Colar como mscara: 1

Selecionar o objeto que se deseja usar como mscara. Manter pressionada a tecla Shift e clicar para selecionar vrios objetos.
Nota: O uso de vrios objetos como mscara sempre cria uma mscara vetorial, mesmo que todos os objetos sejam bitmaps.

Camada, mascaramento e mistura 229

Posicionar a seleo de modo que sobreponha-se ao objeto ou grupo de objetos a ser mascarado. O objeto ou objetos a serem usados como mscara podem ficar na frente ou atrs dos objetos ou grupo a serem mascarados.

3 4

Escolher Editar > Recortar para recortar o objeto ou objetos que se deseja usar como mscara. Selecionar o objeto ou grupo a ser mascarado. Se o usurio mascarar vrios objetos, eles devero ser agrupados. Para mais informaes sobre como agrupar objetos, consultar Como agrupar um objeto na pgina 122.

Para colar a mscara, seguir um dos seguintes procedimentos:

Escolher Editar > Colar como mscara.

230 Captulo 10

Escolher Modificar > Mscara > Colar como mscara.

Uma mscara aplicada

A mscara no painel Camadas Mascaramento de um objeto com o comando Colar em Os usurios do Macromedia FreeHand talvez j estejam familiarizados com o mtodo de criao de mscaras Colar em. O comando Colar em cria uma mscara vetorial ou de bitmap, dependendo do tipo de objeto de mscara utilizado. O comando Colar em cria uma mscara que preenche com outros objetos (grficos vetoriais, texto ou imagens bitmap) um traado fechado ou objeto bitmap. s vezes, o prprio traado chamado de traado de corte e os itens que ele contm so chamados de contedo ou itens de colagem. O contedo que ultrapassar o traado de corte ficar oculto. No Fireworks, o comando Colar em produz um efeito semelhante ao comando Colar como mscara, com algumas diferenas:

Com Colar em, o objeto recortado e colado aquele a ser mascarado. Comparar isso com o
comando Colar como mscara, em que o objeto recortado e colado o objeto de mscara.

Com mscaras vetoriais, Colar em mostra o preenchimento e o trao do prprio objeto de


mscara. Por padro, o comando Colar como mscara no torna visveis o preenchimento e o trao do objeto de mscara vetorial. No entanto, possvel ativar ou desativar o preenchimento e o trao de uma mscara vetorial com o uso do Inspetor de propriedades. Para mais informaes, consultar Alterao da forma de aplicao de uma mscara na pgina 241.

Camada, mascaramento e mistura 231

Para criar uma mscara com o comando Colar em: 1 2

Selecionar o objeto ou objetos a serem usados como contedo da colagem. Posicionar o objeto ou objetos de modo que sobreponham-se ao objeto dentro do qual ser colado o contedo.
Nota: A ordem de empilhamento no importante, desde que os objetos a serem usados como contedo da colagem permaneam selecionados. Esses objetos podem estar acima ou abaixo do objeto de mscara no painel Camadas.

3 4

Escolher Editar > Recortar para mover os objetos para a rea de transferncia. Selecionar o objeto no qual se deseja colar o contedo. Esse objeto ser usado como mscara ou traado de corte.

232 Captulo 10

Escolher Editar > Colar em. Os objetos colados parecem estar dentro do objeto de mscara ou cortados por ele.

Uso de texto como mscara Mscaras de texto so um tipo de mscara vetorial e so aplicadas da mesma maneira que as mscaras so aplicadas com o uso de objetos existentes. Basta usar o texto como o objeto de mscara. A maneira mais comum de se aplicar uma mscara de texto com o uso de seu contorno de traado. Mas tambm possvel aplicar uma mscara de texto com o uso da aparncia dos tons de cinza.

Uma mscara de texto aplicada com o uso de seu contorno de traado Para mais informaes, consultar Criao de uma mscara com base em um objeto existente na pgina 229. Para mais informaes sobre as diferentes formas de aplicar mscaras, consultar Alterao da forma de aplicao de uma mscara na pgina 241. Mascaramento de um objeto atravs do painel Camadas A maneira mais rpida de se adicionar uma mscara de bitmap transparente vazia atravs do painel Camadas. O painel Camadas adiciona uma mscara branca a um objeto, que o usurio pode personalizar desenhando nela com as ferramentas de bitmap.
Nota: Para detalhes sobre como criar mscaras opacas (ou pretas) vazias, consultar Mascaramento de um objeto com os comandos Revelar e Ocultar na pgina 234.

Para criar uma mscara de bitmap com o uso do painel Camadas: 1

Selecionar o objeto que se deseja mascarar.

Camada, mascaramento e mistura 233

Na parte inferior do painel Camadas, clicar no boto Adicionar mscara. Uma mscara vazia aplicada ao objeto selecionado. O painel Camadas exibe uma miniatura de mscara que representa a mscara vazia.

3 4 5 6

Opcionalmente, se o objeto com mscara for um bitmap, usar uma das ferramentas de Moldura da caixa de seleo ou Lao para criar uma seleo de pixels. No painel Ferramentas, escolher uma ferramenta de pintura de bitmap, como as ferramentas Pincel, Lpis, Lata de tinta ou Dgrad. Definir as opes de ferramenta desejadas no Inspetor de propriedades. Com a mscara ainda selecionada, desenhar na mscara vazia. Nas reas desenhadas, o objeto com mscara que est embaixo fica oculto.

Imagem original; mscara aplicada

A mscara da maneira como aparece no painel Camadas


Nota: Para mais informaes sobre como modificar a aparncia de uma mscara de bitmap desenhando nela, consultar Modificao da aparncia de uma mscara na pgina 240.

Mascaramento de um objeto com os comandos Revelar e Ocultar O submenu Modificar > Mscara oferece vrias opes de aplicao de mscaras de bitmap vazias a objetos:
Revelar tudo aplica uma mscara transparente vazia a um objeto, o que revela todo o objeto. Revelar tudo tem o mesmo efeito que clicar no boto Adicionar mscara no painel Camadas. Ocultar tudo aplica

uma mscara opaca vazia a um objeto, o que oculta todo o objeto.

Revelar seleo pode ser usada somente com selees de pixels. Ela aplica uma mscara de pixels transparentes com o uso da seleo de pixels atual. Os outros pixels do objeto bitmap ficam ocultos.

234 Captulo 10

Ocultar seleo pode ser usada somente com selees de pixels. Ela aplica uma mscara de pixels opacoscom o uso da seleo de pixels atual. Os outros pixels do objeto bitmap so mostrados. Para usar os comandos Revelar tudo e Ocultar tudo para criar uma mscara: 1 2

Selecionar o objeto que se deseja mascarar. Para criar a mscara, seguir um dos seguintes procedimentos:

Escolher Modificar > Mscara > Revelar tudo, para mostrar o objeto. Escolher Modificar > Mscara > Ocultar tudo, para ocultar o objeto.
3 4

No painel Ferramentas, escolher uma ferramenta de pintura de bitmap, como Pincel, Lpis ou Lata de tinta. Definir as opes de ferramenta desejadas no Inspetor de propriedades. Se uma mscara Ocultar tudo estiver aplicada, ser necessrio escolher uma cor diferente de preto. Desenhar na mscara vazia. Nas reas desenhadas, o objeto com mscara que est embaixo fica oculto ou mostrado, dependendo do tipo de mscara aplicada.
Nota: Para mais informaes sobre como modificar a aparncia de uma mscara de bitmap desenhando nela, consultar Modificao da aparncia de uma mscara na pgina 240.

Para usar os comandos Revelar seleo e Ocultar seleo para criar uma mscara: 1 2

Escolher Varinha mgica ou alguma ferramenta de Moldura, na caixa de seleo, ou Lao, no painel Ferramentas. Selecionar pixels em um bitmap.

Imagem original; pixels selecionados com a Varinha mgica


3

Para criar a mscara, seguir um dos seguintes procedimentos: pixels.

Escolher Modificar > Mscara > Revelar seleo para mostrar a rea definida pela seleo de

Camada, mascaramento e mistura 235

Escolher Modificar > Mscara > Ocultar seleo para ocultar a rea definida pela seleo de pixels.

Os resultados de Revelar seleo e Ocultar seleo Usa-se a seleo de pixels para aplicar uma mscara de bitmap. Com as ferramentas de bitmap do painel Ferramentas, possvel fazer outras edies na mscara para revelar ou ocultar os pixels restantes do objeto com mscara. Para mais informaes sobre como modificar a aparncia de uma mscara de bitmap desenhando nela, consultar Modificao da aparncia de uma mscara na pgina 240. Sobre importao e exportao de uma mscara de camada do Photoshop O Photoshop permite mascarar imagens com mscaras de camada ou camadas agrupadas. O Fireworks permite importar com xito imagens que usem mscaras de camada sem perder a capacidade de edit-las. Mscaras de camada so importadas como mscaras de bitmap. As mscaras do Fireworks tambm podem ser exportadas para o Photoshop. Elas so convertidas em mscaras de camada do Photoshop. Se os objetos com mscara inclurem texto e o usurio desejar manter a editabilidade do texto no Photoshop, ser necessrio escolher Manter a editabilidade sobre a aparncia ao exportar.
Nota: Se o objeto de mscara for texto, ele ser convertido em bitmap e perder sua editabilidade depois de importado para o Photoshop.

Agrupamento de um objeto para formar uma mscara possvel agrupar dois ou mais objetos existentes para criar uma mscara. O objeto do topo tornase o objeto de mscara. H a opo de agrupar objetos como mscaras vetoriais ou de bitmap. A ordem de empilhamento determina o tipo de mscara aplicada. Se o objeto do topo for um objeto vetorial, o resultado ser uma mscara vetorial. Se o objeto do topo for um objeto bitmap, o resultado ser uma mscara de bitmap.
Nota: Para mais informaes sobre mscaras vetoriais e de bitmap, consultar Sobre mscaras na pgina 227.

236 Captulo 10

Para agrupar objetos a fim de formar uma mscara: 1

Manter pressionada a tecla Shift e clicar em dois ou mais objetos sobrepostos.

possvel selecionar objetos de camadas diferentes.


2

Escolher Modificar > Mscara > Agrupar como mscara.

Edio de uma mscara H vrias maneiras de se modificar uma mscara. A modificao da posio, forma e cor de uma mscara altera a visibilidade dos objetos com mscara. Tambm existe a opo de se alterar o tipo de mscara e a forma como ela aplicada. Alm disso, possvel substituir, desativar ou excluir mscaras. Os resultados da edio de uma mscara ficam visveis imediatamente, mesmo que o prprio objeto de mscara no esteja visvel na tela. A miniatura de mscara no painel Camadas exibe as edies feitas na mscara. Os objetos com mscara tambm podem ser modificados. possvel reorganizar objetos com mscara sem mover a mscara. Uma outra opo oferecida de adicionar outros objetos com mscara a um grupo de mscaras existente.

Camada, mascaramento e mistura 237

Seleo de mscara e objeto com mscara com o uso de miniaturas de mscara Com as miniaturas do painel Camadas, fcil identificar e selecionar mscaras e objetos com mscara. As miniaturas permitem selecionar e editar com facilidade apenas a mscara ou os objetos com mscara, sem afetar os outros objetos. Quando a miniatura da mscara selecionada, o cone da mscara aparece ao lado dela no painel Camadas e suas propriedades so mostradas no Inspetor de propriedades, onde podem ser alteradas, se desejado.

Para selecionar uma mscara:

Clicar na miniatura da mscara no painel Camadas. Quando uma miniatura de mscara est selecionada, o painel Camadas exibe um realce amarelo ao seu redor.
Para selecionar objetos com mscara:

No painel Camadas, clicar na miniatura do objeto com mscara. Quando a miniatura de um objeto com mscara est selecionada, o painel Camadas exibe um realce azul ao seu redor. Seleo de mscara e objeto com mscara com o uso da ferramenta Selecionar secundrio Com a ferramenta Selecionar secundrio, possvel selecionar mscaras individuais e objetos com mscara na tela sem selecionar os outros componentes da mscara. Quando uma mscara ou um objeto com mscara selecionado com a ferramenta Selecionar secundrio, o Inspetor de propriedades mostra as propriedades do objeto selecionado.
Para selecionar uma mscara ou objeto com mscara de forma independente:

Clicar no objeto na tela com a ferramenta Selecionar secundrio. Quando selecionados, os objetos com mscara exibem um realce azul e as mscaras exibem um realce amarelo.

238 Captulo 10

Como mover uma mscara e um objeto com mscara possvel reposicionar mscaras e objetos com mscara. Eles podem ser movidos ao mesmo tempo ou de forma independente.
Para mover uma mscara e respectivos objetos com mscara ao mesmo tempo: 1 2

Selecionar a mscara na tela com a ferramenta Ponteiro. Arrastar a mscara para a nova posio, mas tomar cuidado para no arrastar a ala de movimentao, e mover o objeto com mscara separadamente da mscara.

Para mover mscaras e objetos com mscara de forma independente por meio de desvinculao: 1

Clicar no cone de vnculo na mscara no painel Camadas. Isso desvincula as mscaras dos objetos com mscara para que possam se mover de forma independente.

cone de vnculo

2 3

Selecionar a miniatura do objeto que se deseja mover: a mscara ou os objetos com mscara. Arrastar o objeto ou objetos na tela com a ferramenta Ponteiro.
Nota: A operao de movimentao de objetos com mscara move todos eles ao mesmo tempo.

Clicar entre as miniaturas de mscara no painel Camadas. Esse procedimento revincula os objetos com mscara mscara.

Para mover uma mscara de forma independente com o uso de sua ala de movimentao: 1

Selecionar a mscara na tela com a ferramenta Ponteiro.

Camada, mascaramento e mistura 239

Escolher a ferramenta Selecionar secundrio e arrastar a ala de movimentao da mscara para a nova posio.

Para mover objetos com mscara de forma independente da mscara com o uso da ala de movimentao: 1 2

Selecionar a mscara na tela com a ferramenta Ponteiro. Arrastar a ala de movimentao para a nova posio.

Os objetos so movidos sem afetar a posio da mscara.

Nota: Se houver mais de um objeto com mscara, esse procedimento mover todos eles juntos.

Para mover objetos com mscara independentemente uns dos outros:

Clicar no objeto com a ferramenta Selecionar secundrio para selecion-lo e, em seguida, arrastlo. Esse o nico mtodo que permite selecionar e mover um objeto com mscara individual sem afetar outros objetos com mscara. Modificao da aparncia de uma mscara A modificao da forma e cor de uma mscara altera a visibilidade dos objetos com mscara. possvel modificar a forma de uma mscara de bitmap. Para fazer isso, basta desenhar nela com as ferramentas de bitmap. Para modificar a forma de uma mscara vetorial, basta mover os pontos do objeto de mscara.

240 Captulo 10

Se a mscara for aplicada com o uso da aparncia dos tons de cinza, ser possvel modificar suas cores para afetar a opacidade dos objetos com mscara que esto embaixo. O uso de cores de meio-tom em uma mscara de tons de cinza confere uma aparncia translcida aos objetos com mscara. Cores mais claras exibem os objetos com mscara, enquanto cores mais escuras os ocultam e mostram o fundo. Uma outra possibilidade alterar uma mscara adicionando outros objetos de mscara a ela. Alm disso, as ferramentas de transformao oferecem um outro mtodo para alterar mscaras.
Para modificar a forma da mscara selecionada, seguir um dos seguintes procedimentos:

Desenhar na mscara de bitmap com as ferramentas de desenho de bitmap. Mover os pontos de um objeto de mscara vetorial com a ferramenta Subseleo.
Para modificar a cor da mscara selecionada, seguir um dos seguintes procedimentos:

No caso de mscaras de bitmap com tons de cinza, desenhar na mscara com as ferramentas de
bitmap, usando vrios valores de cor dos tons de cinza.

No caso de mscaras vetoriais com tons de cinza, alterar a cor do objeto de mscara.
Nota: Usar cores mais claras para exibir os objetos com mscara e cores mais escuras para ocult-los.

Para modificar uma mscara adicionando mais objetos de mscara: 1 2 3 4

Escolher Editar > Recortar para recortar o objeto ou objetos selecionados a serem adicionados. No painel Camadas, selecionar a miniatura do objeto com mscara. Escolher Editar > Colar como mscara. Escolher Adicionar quando for perguntado se deseja substituir a mscara existente ou adicionar a ela. O objeto ou objetos so adicionados mscara.

Para modificar uma mscara com as ferramentas de transformao: 1 2

Selecionar a mscara na tela com a ferramenta Ponteiro. Usar uma ferramenta de transformao ou um comando do submenu Modificar > Transformar para aplicar uma transformao mscara. Para mais informaes sobre como usar as ferramentas de transformao, consultar Transformao e distoro de objetos selecionados e selees na pgina 118. A transformao aplicada mscara e aos respectivos objetos com mscara.
Nota: Existe a opo de se aplicar uma transformao spmente ao objeto de mscara. Para fazer isso, primeiro necessrio desvincular a mscara dos objetos de mscara no painel Camadas e, em seguida, executar a transformao.

Alterao da forma de aplicao de uma mscara possvel usar o Inspetor de propriedades para certificar-se de que se esteja editando uma mscara e para identificar o tipo de mscara em que se est trabalhando. Ao selecionar uma mscara, o Inspetor de propriedades permite alterar a maneira como ela aplicada. Se o Inspetor de propriedades estiver minimizado, ser necessrio clicar na seta expansora para exibir todas as propriedades.

Camada, mascaramento e mistura 241

Por padro, as mscaras vetoriais so aplicadas com o uso de seu contorno de traado. O contorno do traado ou o texto usado como mscara. Uma outra opo mostrar o preenchimento e o trao da mscara. Isso produz um resultado semelhante ao uso do comando Colar em para criar mscaras. Para mais informaes, consultar Criao de uma mscara com base em um objeto existente na pgina 229.

Uma mscara vetorial aplicada com o uso de seu contorno de traado com a opo Mostrar preenchimento e trao ativada A aplicao de uma mscara de bitmap com o uso de seu canal alfa permite criar uma mscara semelhante a uma mscara vetorial aplicada usando seu contorno de traado. Ao se aplicar uma mscara com o uso de seu canal alfa, a transparncia do objeto de mscara afeta a visibilidade do objeto que est recebendo a mscara.

Uma mscara de bitmap aplicada com o uso de seu canal alfa

242 Captulo 10

Mscaras vetoriais e de bitmap podem ser aplicadas com o uso da aparncia dos tons de cinza. Por padro, as mscaras de bitmap so aplicadas com o uso da aparncia dos tons de cinza. Quando a mscara for aplicada com o uso da aparncia dos tons de cinza, a luminosidade de seus pixels determinar quanto do objeto com mscara ser exibido. Pixels claros exibem o objeto com mscara. Pixels mais escuros na mscara separam a imagem e mostram o fundo. A aplicao de mscaras com o uso da aparncia dos tons de cinza criar efeitos interessantes se o objeto de mscara contiver um preenchimento dgrad ou com padro.

Uma mscara vetorial com preenchimento com padro aplicada com o uso da aparncia dos tons de cinza Alm disso, h a opo de se converter mscaras vetoriais em mscaras de bitmap. No entanto, mscaras de bitmap no podem ser convertidas em mscaras vetoriais. Para mais informaes sobre mscaras vetoriais e de bitmap, consultar Sobre mscaras na pgina 227.
Para aplicar uma mscara vetorial com o uso de seu contorno de traado:

No Inspetor de propriedades, escolher Contorno do traado quando uma mscara vetorial estiver selecionada.
Para mostrar o preenchimento e o trao da mscara vetorial:

No Inspetor de propriedades, escolher Mostrar preenchimento e trao quando estiver selecionada uma mscara vetorial que tenha sido aplicada com o uso de seu contorno de traado.
Para aplicar uma mscara de bitmap com o uso de seu canal alfa:

No Inspetor de propriedades, escolher Canal alfa quando uma mscara de bitmap estiver selecionada.
Para aplicar uma mscara vetorial ou de bitmap com o uso da aparncia dos tons de cinza:

No Inspetor de propriedades, escolher Aparncia da escala de cinza quando uma mscara estiver selecionada.
Para converter uma mscara vetorial em uma mscara de bitmap: 1 2

No painel Camadas, selecionar a miniatura do objeto de mscara. Escolher Modificar > Nivelar seleo.

Camada, mascaramento e mistura 243

Adio de um objeto a uma seleo com mscara possvel adicionar mais objetos a uma seleo com mscara existente.
Para adicionar outros objetos com mscara a uma seleo com mscara: 1 2 3

Escolher Editar > Recortar para recortar o objeto ou objetos selecionados a serem adicionados. No painel Camadas, selecionar a miniatura do objeto com mscara. Escolher Editar > Colar em. O objeto ou objetos so adicionados aos objetos com mscara.
Nota: O uso do comando Colar em em uma mscara existente no mostrar o preenchimento e o trao do objeto de mscara, a menos que a mscara original tenha sido aplicada com seu trao e preenchimento.

Substituio, desativao e excluso de uma mscara possvel substituir uma mscara por um novo objeto de mscara, bem como desativar ou excluir uma mscara. A desativao temporria da mscara a oculta, enquanto que a sua excluso permanente a remove.
Para substituir uma mscara: 1 2 3

Escolher Editar > Recortar para recortar o objeto ou objetos selecionados que se deseja usar como mscara. No painel Camadas, selecionar a miniatura do objeto com mscara e escolher Editar > Colar como mscara. Clicar em Substituir quando for perguntado se deseja substituir a mscara existente ou adicionar a ela. O objeto de mscara existente substitudo pelo novo.

Para desativar ou ativar uma mscara selecionada, seguir um dos seguintes procedimentos:

No menu Opes do painel Camadas, escolher Desativar mscara ou Ativar mscara. Escolher Modificar > Mscara > Desativar mscara ou Modificar > Mscara > Ativar mscara.
Um X vermelho aparece na miniatura da mscara quando ela est desativada. Clicar no X ativa a mscara.
Para excluir a mscara selecionada: 1

Para excluir a mscara, seguir um dos seguintes procedimentos:

No menu Opes do painel Camadas, escolher Excluir mscara. Escolher Modificar > Mscara > Excluir mscara. No painel Camadas, arrastar a miniatura da mscara para o cone de lixeira.

244 Captulo 10

Escolher se deseja aplicar ou descartar o efeito da mscara nos objetos com mscara antes de exclu-la:
Aplicar mantm as alteraes feitas no objeto, mas a mscara deixa de ser editvel. Se o objeto que estiver recebendo a mscara for um objeto vetorial, a mscara e o objeto vetorial sero convertidos em uma nica imagem bitmap. Descartar elimina Cancelar anula

as alteraes feitas e restaura o objeto sua forma original.

a operao de excluso e deixa a mscara inalterada.

Mistura e transparncia
Composio o processo de variao da interao da transparncia ou da cor de dois ou mais objetos sobrepostos. No Fireworks, os modos de mistura permitem criar imagens compostas. Os modos de mistura tambm adicionam uma dimenso de controle opacidade de objetos e imagens. Sobre modos de mistura A escolha de um modo de mistura aplica esse modo a toda a aparncia dos objetos selecionados. Objetos em um nico documento ou em uma nica camada podem ter modos de mistura diferentes de outros objetos do documento ou camada. Quando objetos com diferentes modos de mistura so agrupados, o modo de mistura do grupo substitui os modos individuais. O desagrupamento dos objetos restaura o modo de mistura individual de cada um deles. O modo de mistura contm os seguintes elementos:
Cor de mistura Opacidade Cor base

a cor qual se aplica o modo de mistura.

o grau de transparncia ao qual se aplica o modo de mistura. o resultado do efeito do modo de mistura na cor base.

a cor dos pixels sob a cor de mistura.

Cor resultante

Estes so os modos de mistura do Fireworks:


Normal no

aplica nenhum modo de mistura. a cor base pela cor de mistura, resultando em cores mais escuras. o inverso da cor de mistura pela cor base, resultando em um efeito alvejante.

Multiplicar multiplica Tela multiplica

Escurecimento seleciona a cor de mistura e a cor base mais escuras para usar como cor resultante. Esse procedimento substitui apenas pixels mais claros que a cor de mistura. Clareamento seleciona a cor de mistura e a cor base mais claras para usar como cor resultante. Esse

procedimento substitui apenas os pixels mais escuros que a cor de mistura.


Diferena subtrai a cor de mistura da cor base ou a cor base da cor de mistura. A cor com menos brilho subtrada da cor com mais brilho. Matiz combina

o valor de matiz da cor de mistura com a luminncia e saturao da cor base para criar a cor resultante.

Saturao combina

a saturao da cor de mistura com a luminncia e o matiz da cor base para criar a cor resultante.

Camada, mascaramento e mistura 245

Cor combina o matiz e a saturao da cor de mistura com a luminncia da cor base para criar a cor resultante, mantendo os nveis de cinza para colorir imagens monocromticas e tingir imagens coloridas. Luminosidade combina a luminncia da cor de mistura com o matiz e a saturao da cor base. Inverter inverte Tingir adiciona Apagar remove

a cor base. a cor cinza cor base. todos os pixels da cor base, inclusive os da imagem de fundo.

Exemplos do modo de mistura

Imagem original

Normal

Multiplicar

Tela

Escurecimento

Clareamento

Diferena

Matiz

Saturao

Cor

Luminosidade

Inverter

Tingir

Apagar

246 Captulo 10

Ajuste da opacidade e aplicao de uma mistura O Inspetor de propriedades e o painel Camadas oferecem opes de ajuste de opacidade de objetos selecionados e aplicao de modos de mistura. Uma configurao de opacidade de 100 torna um objeto totalmente opaco. Uma configurao de 0 (zero) torna o objeto totalmente transparente. Tambm existe a opo de se especificar o modo de mistura e a opacidade antes de desenhar um objeto.
Para especificar o modo de mistura e a opacidade antes de se desenhar um objeto:

Com a ferramenta desejada selecionada no painel Ferramentas, definir as opes de mistura e opacidade no Inspetor de propriedades antes de desenhar o objeto.
Nota: As opes de mistura e opacidade no esto disponveis para todas as ferramentas.

Para definir um modo de mistura e o nvel de opacidade de objetos existentes: 1 2 3

Com dois objetos sobrepostos, selecionar o objeto do topo. No menu pop-up Modo Misturar do Inspetor de propriedades ou no painel Camadas, escolher uma opo de mistura. Escolher uma configurao no controle deslizante pop-up Opacidade ou digitar um valor na caixa de texto.

Para definir um nvel de opacidade e um modo de mistura padro para aplicar a objetos medida que forem desenhados: 1 2

Escolher Selecionar > Cancelar seleo para evitar a aplicao inadvertida de um modo de mistura e opacidade. Com a ferramenta de desenho de bitmap ou vetor selecionada, escolher um modo de mistura e um nvel de opacidade no Inspetor de propriedades. O modo de mistura e o nvel de opacidade escolhidos sero usados como padro para quaisquer objetos subseqentes que forem desenhados com essa ferramenta especfica.

Sobre o Efeito ao vivo Cor de preenchimento O Fireworks tambm oferece um Efeito ao vivo que permite ajustar a cor de um objeto atravs da alterao de seu modo de mistura e sua opacidade. Esse Efeito ao vivo, denominado Cor de preenchimento, produz o mesmo efeito de uma sobreposio de um objeto com um objeto que tenha uma opacidade e um modo de mistura diferentes. Para mais detalhes sobre como usar o Efeito ao vivo Cor de preenchimento, consultar Captulo 9, Uso de Efeitos ao vivo, na pgina 213.

Camada, mascaramento e mistura 247

248 Captulo 10

CAPTULO 11 Uso de estilo, smbolo e URL

O Macromedia Fireworks MX oferece trs painis nos quais possvel armazenar e reutilizar estilos, smbolos e URLs. Os estilos, smbolos e URLs so armazenados nos painis Estilos, Biblioteca e URL, respectivamente. Por padro, todos os trs painis esto organizados no grupo de painis Propriedades. O painel Estilos contm um conjunto de estilos predefinidos do Fireworks sua escolha. Alm disso, se criar uma combinao de traos, preenchimentos e outros atributos e desejar reutiliz-los, o usurio poder salvar os atributos como um estilo. Em vez de reconstruir atributos, basta salvlos no painel Estilos e, depois, aplicar essa combinao de atributos a outros objetos. O Fireworks dispe de trs tipos de smbolos: grfico, animao e boto. Cada um apresenta caractersticas exclusivas para seu uso especfico. O painel Biblioteca oferece opes para criar novos smbolos, assim como para duplicar, importar e editar smbolos. Para informaes sobre recursos especficos incorporados aos smbolos de animao e de boto, consultar Captulo 14, Criao de animao, na pgina 309 e Captulo 13, Criao de botes e menus pop-up, na pgina 287. Um URL (Localizador uniforme de recursos, Uniform Resource Locator) um endereo de uma pgina ou arquivo especfico na Internet. Se usar o mesmo URL muitas vezes, o usurio poder adicion-lo ao painel URL. Os URLs podem ser organizados e agrupados em bibliotecas de URLs.

Uso de um estilo
Criando um estilo, o usurio pode salvar e reaplicar um conjunto de atributos predefinidos de preenchimento, trao, efeito e texto. Quando um estilo aplicado a um objeto, esse objeto assume as caractersticas do estilo.

O Fireworks contm vrios estilos predefinidos. possvel adicionar, alterar e remover estilos. O CD-ROM do Fireworks e o site da Macromedia na Web contm vrios outros estilos predefinidos que podem ser importados para o Fireworks. Tambm existe a possibilidade de exportar estilos e compartilh-los com outros usurios do Fireworks ou importar estilos de outros documentos do Fireworks.
Nota: No possvel aplicar estilos a objetos bitmap.

249

Aplicao de um estilo O painel Estilos permite criar, armazenar e aplicar estilos a objetos ou texto.

Painel Estilos Depois de aplicado a um objeto, o estilo poder ser atualizado sem afetar o objeto original. O Fireworks no mantm um registro do estilo que foi aplicado a um objeto. No haver como recuperar um estilo personalizado se ele for excludo. Mas possvel recuperar estilos fornecidos no Fireworks, assim como todos os outros estilos excludos, usando o comando Redefinir estilos no menu Opes do painel Estilos. No entanto, a redefinio de estilos tambm exclui os estilos personalizados.
Para aplicar um estilo a um bloco de texto ou objeto selecionado: 1 2

Escolher Janela > Estilos, para abrir o painel Estilos. Clicar em um estilo do painel Estilos.

Criao e excluso de um estilo possvel criar um estilo com base nos atributos de um objeto selecionado. O estilo ser exibido no painel Estilos. O painel Estilos tambm oferece a opo de excluir estilos. Os atributos a seguir podem ser salvos em um estilo:

Cor e tipo de preenchimento, inclusive padres, texturas e atributos dgrad de vetores, como
ngulo, posio e opacidade

Cor e tipo de trao Efeitos Atributos de texto, como fonte, tamanho do ponto, estilo (negrito, itlico ou sublinhado),
alinhamento, suavizao de serrilhado, kerning automtico, kerning da faixa e entrelinhamento
Para criar um novo estilo: 1

Criar ou selecionar um objeto vetorial ou texto com os atributos desejados de trao, preenchimento, efeito ou texto.

250 Captulo 11

2 3

Clicar no boto Novo estilo na parte inferior do painel Estilos. Escolher os atributos que deseja integrar ao estilo na caixa de dilogo Novo estilo.
Nota: Para salvar outros atributos de texto no listados, como alinhamento, suavizao de serrilhado, kerning automtico, escala horizontal, kerning da faixa e entrelinhamento, escolher a opo Texto outro.

Dar um nome ao estilo, se desejar, e clicar em OK. No painel Estilos, aparecer um cone que mostra o estilo.

Para basear um novo estilo em um estilo existente: 1 2 3

Aplicar o estilo existente a um objeto selecionado. Editar os atributos do objeto. Salvar os atributos criando um novo estilo, conforme descrito no procedimento anterior.

Para excluir um estilo: 1

Selecionar um estilo no painel Estilos. Manter pressionada a tecla Shift e clicar para selecionar vrios estilos; manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar para selecionar vrios estilos no contguos. Clicar no boto Excluir estilos no painel Estilos.

Edio de um estilo Uma forma de alterar os atributos que um estilo contm editando o estilo no painel Estilos.
Para editar um estilo: 1 2 3

Escolher Selecionar > Cancelar seleo para desselecionar quaisquer objetos na tela. Clicar duas vezes em um estilo no painel Estilos. Na caixa de dilogo Editar estilo, escolher ou desselecionar os componentes dos atributos que deseja aplicar. A caixa de dilogo Editar estilo contm as mesmas opes da caixa de dilogo Novo estilo. Para detalhes sobre como escolher atributos para incluir em um estilo, consultar Criao e excluso de um estilo na pgina 250. Clicar em OK para aplicar as alteraes ao estilo.

Exportao e importao de um estilo O compartilhamento de estilos com outros usurios do Fireworks uma maneira de economizar tempo e manter a consistncia. Uma forma de compartilhar estilos export-los para usar em outros computadores.
Para exportar estilos: 1

2 3 4

Selecionar um estilo no painel Estilos. Manter pressionada a tecla Shift e clicar para selecionar vrios estilos; manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar para selecionar vrios estilos no contguos. Escolher Exportar estilos no menu Opes do painel Estilos. Digitar um nome e um local para o documento que conter os estilos salvos. Clicar em Salvar.

Uso de estilo, smbolo e URL 251

Para importar estilos: 1 2

Escolher Importar estilos no menu Opes do painel Estilos. Escolher um documento de estilos para importar. Todos os estilos do documento de estilos so importados e inseridos diretamente aps o estilo selecionado no painel Estilos.

Uso de um padro de estilo A redefinio do painel Estilos para o seu estado padro exclui todos os estilos personalizados do painel Estilos e recupera quaisquer estilos padro excludos. Uma outra possibilidade oferecida alterar o tamanho dos cones exibidos no painel Estilos.
Para redefinir o painel Estilos com os estilos padro:

Escolher Redefinir estilos no menu Opes do painel Estilos.


Nota: Redefinir estilos para o padro remove quaisquer estilos personalizados que possam ter sido salvos.

Para alterar o tamanho dos cones de visualizao de estilo:

Escolher cones grandes no menu Opes do painel Estilos, para alternar entre os tamanhos pequeno e grande de visualizao. Aplicao de um atributo sem criar um estilo possvel copiar atributos de um objeto e aplic-los a outros objetos, sem criar um novo estilo no painel Estilos. Esse mtodo aplica rapidamente atributos a um objeto quando no se planeja reutilizar esses atributos em outros objetos. Os atributos que podem ser copiados e aplicados incluem preenchimentos, traos, efeitos e atributos de texto.
Para copiar atributos de um objeto e aplic-los a outros objetos: 1 2 3 4

Selecionar o objeto cujos atributos deseja copiar. Escolher Editar > Copiar. Cancelar a seleo do objeto original e selecionar o objeto ou objetos aos quais deseja aplicar os novos atributos. Escolher Editar > Colar atributos. Os objetos selecionados assumem os mesmos atributos do objeto original.

Uso de um smbolo
O Fireworks dispe de trs tipos de smbolos: grfico, animao e boto. Cada um apresenta caractersticas exclusivas para seu uso especfico. Ocorrncias so representaes de um smbolo do Fireworks. Quando o objeto de smbolo (o original) editado, as ocorrncias (cpias) so automaticamente alteradas para refletir as modificaes no smbolo. Os smbolos so muito teis sempre que se deseja reutilizar um elemento grfico. possvel colocar ocorrncias em vrios documentos do Fireworks e manter a associao ao smbolo. Os smbolos so teis para criar botes e animar objetos em diversas molduras. Para mais informaes sobre os recursos adicionais incorporados aos recursos de animao e boto, consultar Criao de um smbolo de animao na pgina 310 e Criao de um smbolo de boto na pgina 287.

252 Captulo 11

Criao de um smbolo O submenu Editar > Inserir oferece opes que criam smbolos de grfico, animao e boto. possvel criar um smbolo tendo como base qualquer objeto, bloco de texto ou grupo e, depois, organiz-los no painel Biblioteca. Para colocar ocorrncias em um documento, basta arrast-las do painel Biblioteca para a tela.
Para criar um novo smbolo tendo como base um objeto selecionado: 1 2 3

Selecionar o objeto e escolher Modificar > Smbolo > Converter em smbolo. Digitar um nome para o smbolo na caixa de texto Nome da caixa de dilogo Propriedades do smbolo. Escolher um tipo de smbolo: Grfico, Animao ou Boto. Em seguida, clicar em OK. O smbolo aparece na biblioteca, o objeto selecionado se torna uma ocorrncia do smbolo e o Inspetor de propriedades exibe opes de smbolo.

Para criar um smbolo a partir do zero: 1

Seguir um destes procedimentos:

Escolher Editar > Inserir > Novo smbolo. Escolher Novo smbolo no menu Opes do painel Biblioteca.
2

Escolher um tipo de smbolo: Grfico, Animao ou Boto. Em seguida, clicar em OK. Dependendo do tipo de smbolo escolhido, o programa abre o Editor de smbolo ou o Editor de boto.

Criar o smbolo com as ferramentas do painel Ferramentas e fechar o editor.

Para mais informaes, consultar Criao de um smbolo de boto na pgina 287 e Criao de um smbolo de animao na pgina 310. Posicionamento de uma ocorrncia possvel posicionar ocorrncias de um smbolo no documento atual.
Para posicionar uma ocorrncia:

Arrastar um smbolo do painel Biblioteca para o documento atual.

Uma ocorrncia de um smbolo na tela Edio de um smbolo Quando um smbolo modificado no Editor de smbolo, este modifica automaticamente todas as ocorrncias associadas.

Uso de estilo, smbolo e URL 253

Nota: Para a maioria dos tipos de edies, a modificao de uma ocorrncia afeta o smbolo e todas as outras ocorrncias. Entretanto, existem algumas excees. Para mais informaes, consultar Edio de uma ocorrncia na pgina 254.

Para editar um smbolo e todas as suas ocorrncias: 1

Seguir um destes procedimentos para abrir o Editor de smbolo:

Clicar duas vezes em uma ocorrncia. Selecionar uma ocorrncia e escolher Modificar > Smbolo > Editar smbolo.
2

Fazer as alteraes no smbolo e fechar a janela. O smbolo e todas as ocorrncias refletem as modificaes feitas.

Para renomear um smbolo: 1 2

Clicar duas vezes no nome do smbolo no painel Biblioteca. Alterar o nome na caixa de dilogo Propriedades do smbolo e clicar em OK.

Para duplicar um smbolo: 1 2

No painel Biblioteca, selecionar o smbolo. Escolher Duplicar no menu Opes do painel Biblioteca.

Para alterar o tipo do smbolo: 1 2

Clicar duas vezes no nome do smbolo na Biblioteca. Escolher uma outra opo de tipo de smbolo.

Para selecionar todos os smbolos no usados no painel Biblioteca:

Escolher Selecionar itens no usados no menu Opes do painel Biblioteca.


Para excluir um smbolo: 1 2 3

No painel Biblioteca, selecionar o smbolo. Escolher Excluir no menu Opes do painel Biblioteca. Clicar em Excluir. O smbolo e todas as suas ocorrncias so excludos.

Edio de uma ocorrncia Ao clicar duas vezes em uma ocorrncia para edit-la, o usurio estar efetivamente editando o prprio smbolo no Editor de smbolo ou no Editor de boto. Para editar apenas a ocorrncia atual, ser necessrio quebrar o vnculo entre ela e o smbolo. No entanto, esse procedimento quebra permanentemente o relacionamento entre os dois e quaisquer edies futuras feitas no smbolo no se refletiro na ocorrncia. Os smbolos de boto apresentam recursos convenientes que permitem manter o relacionamento entre o smbolo e a ocorrncia para um grupo de botes, ao mesmo tempo em que atribuem texto exclusivo de boto e URLs a cada ocorrncia. Para mais informaes, consultar Edio de smbolos de boto na pgina 293.

254 Captulo 11

Quebra de um vnculo de smbolo possvel modificar uma ocorrncia sem afetar o smbolo ou outras ocorrncias. Para isso, primeiro preciso quebrar o vnculo entre a ocorrncia e o smbolo.
Para liberar uma ocorrncia de um smbolo: 1 2

Selecionar a ocorrncia. Escolher Modificar > Smbolo > Desmembrar. A ocorrncia selecionada se torna um grupo. O smbolo no painel Biblioteca no estar mais associado a esse grupo. Aps a separao do smbolo, uma ocorrncia anterior do boto perder suas caractersticas de smbolo de boto, e uma ocorrncia anterior da animao perder suas caractersticas de smbolo de animao.

Edio de uma propriedade da ocorrncia As propriedades da ocorrncia especificadas a seguir podem ser modificadas sem afetar o smbolo ou outras ocorrncias:

Modo de mesclagem Opacidade Efeitos Largura e altura Coordenadas X e Y

Nota: As ocorrncias de boto possuem propriedades adicionais que podem ser editadas sem afetar o smbolo. Para mais informaes sobre edio de ocorrncias de boto, consultar Edio de smbolos de boto na pgina 293.

Para editar propriedades da ocorrncia sem afetar o smbolo ou quebrar o vnculo com ele: 1 2

Selecionar a ocorrncia. Modificar propriedades da ocorrncia no Inspetor de propriedades.

Importao e exportao de um smbolo O painel Biblioteca armazena os smbolos de grfico, boto e animao criados no documento atual. Ele tambm armazena os smbolos importados para o documento atual. O painel Biblioteca especfico do documento, mas possvel usar os smbolos de uma biblioteca em mais de um documento do Fireworks. Para isso, basta importar e exportar, recortar e colar ou arrastar e soltar. H possibilidade de importar smbolos de outras bibliotecas, inclusive das bibliotecas que contm smbolos preparados no Macromedia Fireworks e daquelas que contm smbolos exportados anteriormente pelo prprio usurio ou por outras pessoas. Se, por outro lado, o usurio tiver criado smbolos que gostaria de reutilizar ou compartilhar, ele poder exportar suas prprias bibliotecas de smbolos. Bibliotecas de smbolos so exportadas como arquivos PNG. Importao de um smbolo O submenu Editar > Bibliotecas do Fireworks MX contm bibliotecas de smbolos das quais possvel importar smbolos preparados de boto, grfico e animao, assim como barras de navegao e temas com mltiplos smbolos. O uso desses smbolos agiliza o processo de criao de sofisticadas pginas da Web que contm elementos de navegao avanados, sem a necessidade de criar smbolos originais.

Uso de estilo, smbolo e URL 255

Para importar um ou mais smbolos preparados de uma biblioteca de smbolos do Fireworks: 1 2

Abrir um documento do Fireworks. Escolher Editar > Bibliotecas e escolher uma biblioteca:
Animaes abre

um conjunto de smbolos com animao. um conjunto de smbolos grficos semelhantes a vrios marcadores.

Marcadores abre Botes abre

um conjunto de smbolos de boto do Fireworks com 2, 3 e 4 estados.

Temas abre uma lista de smbolos de animao, grfico e boto; cada tema consiste em um trio de smbolos com nome e design semelhantes e com cores coordenadas para uso em conjunto. Outro abre uma caixa de dilogo Abrir que d acesso a arquivos PNG de bibliotecas de smbolos que foram exportados anteriormente. Para mais informaes, consultar o prximo procedimento.

Alm disso, existe a opo de importar smbolos de arquivos PNG de bibliotecas que foram exportados anteriormente e esto localizados no disco rgido, em um CD ou em uma rede. Para mais informaes sobre exportao de smbolos, consultar Exportao de um smbolo na pgina 257.
Para importar smbolos de outro arquivo para o documento atual: 1

Seguir um destes procedimentos:

Escolher Importar smbolos no menu Opes do painel Biblioteca. Escolher Editar > Bibliotecas > Outro.
2 3

Navegar at a pasta que contm o arquivo, escolher o arquivo e clicar em Abrir. Selecionar os smbolos que deseja importar e clicar em Importar. Os smbolos importados so exibidos no painel Biblioteca.

Um outro mtodo de importar e exportar smbolos individuais de e para os painis Biblioteca de vrios documentos arrastar e soltar ou copiar e colar ocorrncias.
Para importar um smbolo arrastando e soltando ou copiando e colando, seguir um destes procedimentos:

Arrastar uma ocorrncia do smbolo do documento que contm o smbolo para o documento
de destino.

256 Captulo 11

Copiar uma ocorrncia do smbolo no documento que contm o smbolo e col-la no


documento de destino. O smbolo importado para o painel Biblioteca do documento de destino e mantm um relacionamento com o smbolo do documento original. Para mais informaes, consultar Atualizao de smbolo e ocorrncia exportados em vrios documentos na pgina 257. Exportao de um smbolo O menu Opes do painel Biblioteca oferece a opo de exportar, em um arquivo PNG, os smbolos importados ou criados em um documento do Fireworks para que possam ser reutilizados em outros documentos. Depois, para importar os smbolos, basta usar o submenu Editar > Bibliotecas e navegar at o arquivo PNG que contm os smbolos. Para mais informaes, consultar Importao de um smbolo na pgina 255.
Para exportar smbolos: 1 2 3

Escolher Exportar smbolos no menu Opes do painel Biblioteca. Selecionar os smbolos que deseja exportar e clicar em Exportar. Navegar at uma pasta, digitar um nome para o arquivo do smbolo e clicar em Salvar. O Fireworks salva os smbolos em um nico arquivo PNG.

Atualizao de smbolo e ocorrncia exportados em vrios documentos O smbolo original mantm seu vnculo com todos os smbolos exportados para outros documentos. Dessa forma, edies feitas no smbolo no documento original alteram as propriedades do smbolo e da ocorrncia em todos os documentos.
Para atualizar todos os smbolos e ocorrncias importados: 1 2 3 4

No documento original, clicar duas vezes em uma ocorrncia para abrir o editor de smbolo apropriado, modificar o smbolo e fechar o editor. Salvar o arquivo. No documento para o qual o smbolo foi exportado, selecionar o smbolo no painel Biblioteca. Escolher Atualizar no menu Opes do painel Biblioteca.
Nota: Para atualizar todos os smbolos exportados, selecionar todos eles no painel Biblioteca e escolher Atualizar.

possvel quebrar automaticamente o vnculo entre o smbolo exportado e o documento original. Para isso, basta editar o smbolo no documento atual. A quebra do vnculo permite a edio do smbolo exportado independentemente do smbolo original.
Para quebrar o vnculo entre um smbolo exportado e o documento original:

No documento original para o qual o smbolo foi exportado, clicar duas vezes em uma ocorrncia do smbolo para abrir o editor de smbolo apropriado, modificar o smbolo e fechar o editor. O vnculo entre o smbolo no documento atual e o smbolo original est quebrado.
Nota: O Fireworks no avisa que uma quebra do smbolo original est prestes a ocorrer. Assim, certifique-se do smbolo que est no documento original antes de editar um smbolo que aparece em mais de um documento.

Uso de estilo, smbolo e URL 257

Como trabalhar com um URL


A atribuio de um URL a um objeto da Web cria um vnculo com um arquivo, como uma pgina da Web. possvel atribuir URLs a pontos ativos, botes e objetos de fatia. Se pretender usar os mesmos URLs diversas vezes, crie uma biblioteca de URLs no painel URL para armazenar os URLs. Use o painel URL para adicionar, editar e organizar seus URLs. Por exemplo, se o seu site na Web contiver vrios botes de navegao para retornar pgina principal, adicione o URL de sua pgina principal ao painel URL. A seguir, atribua esse URL a cada boto de navegao selecionando-o na biblioteca de URLs. O recurso Localizar e substituir pode alterar um URL em vrios documentos (consultar Localizar e substituir na pgina 402). As bibliotecas de URLs esto disponveis para todos os documentos do Fireworks e so salvas entre as sesses.

Painel URL Criao de uma biblioteca de URLs possvel agrupar os URLs em bibliotecas. Esse procedimento os mantm juntos, facilitando o acesso. Os URLs podem ser salvos na biblioteca de URLs padro, URLs.htm, ou em novas bibliotecas de URLs que forem criadas. A pasta URL Libraries, localizada no disco rgido, armazena a biblioteca URLs.htm e todas as novas bibliotecas criadas. A localizao exata dessa pasta varia de acordo com o sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.
Para criar uma nova biblioteca de URLs: 1 2

Escolher Nova biblioteca de URL no menu Opes do painel URL. Digitar o nome da biblioteca na caixa de texto e clicar em OK. O nome da nova biblioteca aparece no menu pop-up Biblioteca do painel URL.

Para adicionar um novo URL a uma biblioteca de URLs: 1 2

Escolher uma biblioteca no menu pop-up Biblioteca. Digitar um URL na caixa de texto Link.

258 Captulo 11

Clicar no boto de mais (+).

Adicionar URL

O boto de mais (+) adiciona o URL atual biblioteca. Mais tarde, para organizar ainda mais os URLs, bastar adicionar apenas aqueles que esto em uso no documento.
Para adicionar um URL biblioteca e simultaneamente atribu-lo a um objeto da Web: 1 2

Selecionar o objeto. Para inserir o URL, seguir um destes procedimentos: relativo e clicar em OK.

Escolher Adicionar URL no menu Opes do painel URL, inserir um URL absoluto ou Digitar um URL na caixa de texto Link. Clicar no boto de mais (+).
O URL aparece no painel de visualizao de URL. Consultar Atribuio de URLs na pgina 277 e Configurao de URL para um smbolo de boto ou ocorrncia na pgina 295.
Para adicionar os URLs mais usados a uma biblioteca de URLs: 1 2

Escolher uma biblioteca no menu pop-up Biblioteca. Escolher Adicionar URLs usados biblioteca no menu Opes do painel URL.

Para excluir um URL selecionado do painel de visualizao de URL:

Clicar no boto Excluir URL da biblioteca na base do painel URL.


Para excluir todos os URLs no usados da biblioteca: 1 2

Escolher Apagar URLs no usados no menu Opes do painel URL. Clicar em OK.

Edio de um URL simples editar URLs atravs do painel URL. Para isso, h duas opes sua escolha: editar apenas uma nica ocorrncia do URL ou fazer com que as alteraes se espalhem por todo o documento.
Para editar um URL: 1 2 3

Selecionar o URL que deseja editar no painel de visualizao de URL. Escolher Editar URL no menu Opes do painel URL. Editar o URL. Selecionar Alterar todas as ocorrncias no documento para atualizar este vnculo por todo o documento.

Uso de estilo, smbolo e URL 259

Sobre URLs absolutos e relativos No painel URL, o usurio pode digitar um URL absoluto ou relativo:

Se estiver vinculando a uma pgina da Web que esteja fora do seu site na Web, use um URL
absoluto.

Se estiver vinculando a uma pgina da Web dentro do seu site na Web, tanto faz usar um URL
absoluto ou um URL relativo. URLs absolutos so URLs completos que incluem o protocolo do servidor, que normalmente http:// para pginas da Web. Por exemplo, http://www.macromedia.com/br/support/ o URL absoluto da pgina do Suporte do Macromedia Fireworks na Web. Os URLs absolutos permanecem precisos, independentemente da localizao do documento de origem, mas eles no vincularo corretamente se o documento de destino for movido. URLs relativos so relativos pasta que contm o documento de origem. Estes so exemplos de sintaxe de navegao de URLs relativos:

file.htm vincula a um arquivo localizado na mesma pasta do documento de origem. ../../file.htm vincula a um arquivo localizado na pasta dois nveis acima da pasta que contm o
documento de origem. Cada ../ representa um nvel.

htmldocs/file.htm vincula a um arquivo localizado na pasta htmldocs, que est dentro da pasta
que contm o documento de origem. Em geral, os URLs relativos so os mais simples de usar em vnculos com arquivos que estaro sempre na mesma pasta do documento atual. Exportao e importao de um URL Se o painel URL contiver URLs que deseje usar novamente em outros documentos do Fireworks, o usurio poder export-los para uso posterior. Depois, ser simples import-los para qualquer outro documento do Fireworks para fcil acesso. Tambm existe a possibilidade de importar URLs referenciados em qualquer documento HTML existente.
Para exportar URLs: 1 2

Escolher Exportar URLs no menu Opes do painel URL. Digitar um nome de arquivo e clicar em Salvar. criado um arquivo HTML. Esse arquivo contm os URLs exportados.

Para importar URLs: 1 2

Escolher Importar URLs no menu Opes do painel URL. Selecionar um arquivo HTML e clicar em Abrir. Todos os URLs contidos nesse arquivo so importados.

260 Captulo 11

CAPTULO 12 Fatias, rollovers e pontos ativos

Fatias so os blocos bsicos de construo para a criao de interatividade no Macromedia Fireworks MX. As fatias so objetos da Web: elas no existem como imagens, mas fundamentalmente como cdigo HTML. possvel v-las, selecion-las e renome-las atravs da camada Web no painel Camadas. Este captulo descreve os conceitos bsicos que devem ser compreendidos sobre fatias e aborda seu uso para incorporar interatividade a pginas da Web. Com o uso do mtodo de rollover arrastar e soltar para anexar interatividade a fatias, possvel criar com rapidez efeitos de rollover e mudana de imagens no espao de trabalho. possvel visualizar os comportamento atribudos no painel Comportamentos e criar interaes mais complexas com o uso desse painel. Tambm possvel incorporar interatividade a pginas da Web com pontos ativos. Os pontos ativos so geralmente usados para criar mapas de imagens, que so grficos contendo um certo nmero de reas ativas que se vinculam a outras pginas da Web. Os pontos ativos tambm recebem eventos de mouse, permitindo a execuo de comportamentos de JavaScript nas fatias.

Criao e edio de fatias


O fatiamento corta um documento do Fireworks em pedaos menores e exporta cada fatia como um arquivo separado. Na exportao, o Fireworks tambm cria um arquivo HTML que contm o cdigo da tabela para a remontagem da imagem em um navegador.

O fatiamento corta um documento em mltiplos pedaos, exportados como arquivos separados. O fatiamento de uma imagem apresenta pelo menos trs grandes vantagens:
Otimizao Um desafio, no design grfico para a Internet, garantir que as imagens sejam descarregadas rapidamente sem sacrificar sua qualidade. O fatiamento permite otimizar cada fatia individual com o uso do formato de arquivo e as configuraes de compresso mais apropriados. Para mais informaes, consultar Otimizao e exportao na pgina 325.

261

Interatividade possvel usar fatias para criar reas que respondem quando o ponteiro do mouse passa sobre elas ou ao clic-las. Para obter mais informaes sobre como acrescentar interatividade a fatias, consultar Como tornar as fatias interativas na pgina 269. Atualizao de partes de uma pgina da Web O

fatiamento permite atualizar com facilidade partes de uma pgina da Web que sofre modificaes freqentes. Por exemplo, uma pgina da Web corporativa pode ter uma seo dedicada ao funcionrio do ms que muda mensalmente. O fatiamento permite mudar rapidamente o nome do funcionrio e a foto sem a necessidade de substituir a pgina inteira.

Criao de objetos de fatia possvel criar um objeto de fatia desenhando-o com a ferramenta Fatia ou inserir uma fatia com base em um objeto selecionado. As linhas que se estendem do objeto de fatia so guias de fatia que determinam os limites dos arquivos da imagem separada nos quais se divide o documento na exportao. Por padro, essas guias so vermelhas.

Para inserir uma fatia retangular com base em um objeto selecionado: 1 2

Escolher Editar > Inserir > Fatia. A fatia um retngulo cuja rea inclui as bordas mais distantes do objeto selecionado. Se mais de um objeto for selecionado, escolher como aplicar as guias de fatia:
nico cria

um nico objeto de fatia que cobre todos os objetos selecionados. um objeto de fatia para cada objeto selecionado.

Mltiplos cria

Para desenhar um objeto de fatia retangular: 1

Selecionar a ferramenta Fatia.

262 Captulo 12

Arrastar para desenhar o objeto de fatia. O objeto de fatia e as guias de fatia aparecem na Camada da Web.
Nota: possvel ajustar a posio de uma fatia medida que a mesma arrastada para ser desenhada. Mantendo-se pressionado o boto do mouse, simplesmente manter pressionada a barra de espao no teclado e arrastar a fatia para outro local da tela. Soltar a barra de espao para continuar o desenho da fatia.

Criao de fatias HTML Uma fatia HTML designa uma rea de uma imagem fatiada em que aparece texto HTML normal no navegador. Uma fatia HTML no exporta nenhum dado de pixel de imagem, mas sim o texto HTML que aparece na clula da tabela definida pela fatia.

Fatias HTML so teis quando se deseja atualizar rapidamente o texto que aparece na pgina da Web sem ter que criar novas imagens.
Para criar uma fatia HTML: 1 2 3 4

Desenhar um objeto de fatia e selecion-lo. No Inspetor de propriedades, escolher HTML no menu pop-up Tipo. Clicar em Editar. Digitar o texto na janela Editar fatia HTML e format-lo, caso desejado, com a adio de tags de formatao de texto HTML.

Nota: Alternativamente, possvel adicionar tags de formatao de texto HTML ao HTML, depois de sua exportao, com o uso de um editor de texto ou HTML.

Clicar em OK para aplicar as alteraes e fechar a janela Editar fatia HTML. O texto e os tags de HTML digitados aparecem no arquivo PNG do Fireworks.
Nota: A aparncia das fatias de texto HTML pode variar quando visualizadas em navegadores e sistemas operacionais diferentes, porque o tamanho e tipo das fontes podem ser configurados no navegador.

Fatias, rollovers e pontos ativos 263

Criao de fatias no retangulares Fatias retangulares podem ser insuficientes ao se incorporar interatividade a uma imagem no retangular. Se o usurio desejar acrescentar um efeito de rollover a uma fatia, por exemplo, e os objetos de fatia se sobrepuserem ou tiverem formas irregulares, uma fatia retangular poder trocar imagens de fundo indesejadas com a imagem de troca. O Fireworks resolve este problema com o uso da ferramenta Fatia poligonal, que permite o desenho de fatias com qualquer forma poligonal.

Tambm possvel converter traados vetoriais em fatias para criar formas irregulares de fatias.
Para desenhar um objeto de fatia poligonal: 1 2 3 4

Selecionar a ferramenta Fatia poligonal. Clicar para posicionar os pontos vetoriais do polgono. A ferramenta Fatia poligonal desenha apenas segmentos de retas. Ao desenhar um objeto de fatia poligonal em torno de objetos com bordas suaves, certificar-se de incluir todo o objeto para evitar a criao de bordas acentuadas indesejadas no grfico da fatia. Para interromper o uso da ferramenta Fatia poligonal, escolher uma ferramenta alternativa no painel de Ferramentas. No necessrio clicar no primeiro ponto novamente para fechar o polgono.
Nota: Evitar o uso de fatias poligonais em excesso, uma vez que elas exigem muito mais cdigos JavaScript do que as fatias retangulares similares. Um grande nmero de fatias poligonais pode, inclusive, afetar negativamente o tempo de processamento do navegador da Web.

Para criar uma fatia poligonal em um objeto vetorial ou traado: 1 2 3

Selecionar um traado vetorial. Escolher Editar > Inserir > Ponto ativo. Escolher Editar > Inserir > Fatia. Gera-se uma fatia que se adapta ao formato do objeto vetorial.

Visualizao e exibio de fatias e guias de fatia possvel controlar a visibilidade de fatias e outros objetos da Web em um documento com o uso dos painis Camadas e Ferramentas. Ao desativar a visibilidade da fatia para o documento inteiro, as guias de fatia tambm se ocultam. Com o uso do Inspetor de propriedades, possvel organizar as fatias atravs da atribuio de uma cor exclusiva para cada objeto de fatia. Tambm possvel alterar a cor da guia de fatia atravs do menu Exibir.

264 Captulo 12

Visualizao de fatias no painel Camadas Camada da Web exibe todos os objetos da Web no documento para possibilitar a seleo e visualizao de cada um deles.

Para visualizar e selecionar uma fatia no painel Camadas: 1 2

Selecionar Janela > Camadas para abrir o painel Camadas. Expandir a Camada da Web clicando no boto de adio (+) (Windows) ou no tringulo (Macintosh). Exibe-se a lista completa dos objetos da Web atualmente no documento em Camada da Web. Clicar em um nome de fatia para selecion-la. A fatia realada em Camada da Web e selecionada na tela.

Como mostrar e ocultar fatias Ao ocultar uma fatia, esta se torna invisvel no arquivo PNG do Fireworks. possvel ocultar todos ou alguns objetos da Web. Como as fatias so objetos da Web, elas so listadas em Camada da Web no painel Camadas, onde a visibilidade pode ser ativada ou desativada para uma fatia selecionada. Tambm possvel controlar a visibilidade da fatia atravs do painel Ferramentas. Ocultar um objeto de fatia no impede sua exportao no HTML.
Para ocultar e mostrar fatias e pontos ativos especficos: 1 2

Clicar no cone do olho prximo aos objetos da Web especficos no painel Camadas. Clicar na coluna do olho para ativar novamente a visibilidade. O cone do olho reaparecer quando os objetos da Web estiverem novamente visveis.

Para ocultar ou mostrar todos os pontos ativos, fatias e guias, seguir um dos seguintes procedimentos:

No painel Ferramentas, clicar no boto Ocultar/mostrar fatias apropriado.

Fatias, rollovers e pontos ativos 265

No painel Camadas, clicar no cone do olho prximo a Camada da Web.

Para exibir ou ocultar guias de fatias em qualquer exibio de documento:

Selecionar Exibir > Guias de fatia. Alterao da cor de fatias e guias de fatia Se as cores usadas em um documento forem semelhantes cor da fatia, a sua exibio contra os objetos no documento poder ser dificultada. Para facilitar a exibio das fatias, possvel atribuir uma nova cor de fatia a fatias selecionadas. A atribuio de cores exclusivas a fatias individuais tambm ajuda a organiz-las. Tambm possvel alterar a cor das guias de fatia.
Nota: Ao visualizar o documento, as fatias no selecionadas so visveis como uma sobreposio branca.

Para mudar a cor de um objeto de fatia selecionado:

No Inspetor de propriedades, selecionar uma nova cor na caixa de cores.


Para mudar a cor das guias de fatia: 1 2

Selecionar Exibir > Guias > Editar guias. Na caixa de dilogo Guias, selecionar uma nova cor na seo Cor da fatia e clicar em OK.

266 Captulo 12

Edio de fatias No Fireworks, possvel trabalhar com um layout de fatia como se fosse uma tabela em um aplicativo de processamento de texto. Ao arrastar uma guia de fatia para redimensionar uma fatia, todas as fatias retangulares adjacentes tambm se redimensionam automaticamente. Alm disso, possvel usar o painel Ferramentas para redimensionar e transformar fatias da mesma forma que objetos vetoriais e de bitmap. Movimentao de guias de fatia para editar fatias As guias de fatia definem o permetro e a posio das fatias. As guias de fatia que se estendem alm dos objetos de fatia definem como o restante do documento ser fatiado na exportao. possvel alterar o formato de um objeto de fatia retangular arrastando as guias de fatia que o circundam. impossvel redimensionar objetos de fatia no retangulares atravs da movimentao das guias de fatia.

Como redimensionar um objeto de fatia arrastando suas guias de fatia


Nota: Arrastando-se as guias de fatia que circundam um boto do Fireworks na janela do documento, a fatia que define a rea (ou fatia) ativa para aquele boto redimensionada. Porm, impossvel excluir a rea ativa de um boto do Fireworks arrastando-se as guias de fatia que a circundam.

Se mltiplos objetos de fatia estiverem alinhados ao longo de uma guia de fatia nica, ser possvel arrastar aquela guia de fatia para redimensionar simultaneamente todos os objetos de fatia.

Como redimensionar mltiplos objetos de fatia arrastando uma nica guia Alm disso, arrastando-se uma guia ao longo de uma determinada coordenada, todas as demais guias sero movimentadas para aquela mesma coordenada.

Fatias, rollovers e pontos ativos 267

Para redimensionar uma ou mais fatias: 1

Posicionar as ferramentas Ponteiro ou Selecionar secundrio sobre uma guia de fatia. O ponteiro se transforma em um ponteiro de movimento de guia. Arrastar a guia de fatia at o local desejado. As fatias so redimensionadas automaticamente, bem como todas as fatias adjacentes.

Para remover uma guia de fatia:

Usar as ferramentas Ponteiro ou Selecionar secundrio para arrastar a guia de fatia alm da borda da tela.
Para mover guias de fatia adjacentes: 1 2

Pressionar a tecla Shift e arrastar uma guia de fatia ao longo das guias de fatia adjacentes. Soltar a guia de fatia no local desejado. Todas as guias de fatia arrastadas movem-se at esse local.
Dica: possvel cancelar esta operao soltando a tecla Shift antes de soltar o boto do mouse. Todas as guias de fatia capturadas retornam s suas posies originais.

Uso de ferramentas para editar objetos de fatia possvel usar as ferramentas Ponteiro, Selecionar secundrio e Transformao para redefinir a forma de uma fatia ou redimension-la. possvel recortar, dimensionar, inclinar e distorcer fatias.
Nota: O redimensionamento e a redefinio da forma de fatias com o uso dessas ferramentas permite criar sobreposies de fatias, porque o tamanho dos objetos de fatia adjacentes no se ajusta automaticamente. Quando as fatias se sobrepuserem, a fatia de cima ter precedncia, caso haja o envolvimento de interatividade. Para evitar a sobreposio de fatias, usar as guias de fatia para edit-las. Para mais informaes, consultar Movimentao de guias de fatia para editar fatias na pgina 267.

Para editar a forma de uma fatia selecionada, executar um dos seguintes procedimentos:

Selecionar a ferramenta Ponteiro ou Selecionar secundrio e arrastar os pontos do canto da fatia


para modificar sua forma.

Usar a ferramenta Transformao para realizar a transformao desejada e pressionar Enter.


Para mais informaes sobre como usar as ferramentas de transformao, consultar Transformao e distoro de objetos selecionados e selees na pgina 118.
Nota: A transformao de uma fatia retangular pode alterar sua forma, posio ou dimenses, mas a fatia propriamente dita permanece retangular.

Como usar os painis Inspetor de propriedades ou Informaes para editar objetos de fatia Tambm possvel alterar a posio e dimenso de um objeto de fatia numericamente com o uso do Inspetor de propriedades. Para mais informaes sobre como alterar numericamente as dimenses de um objeto, consultar Transformao de um objeto numericamente na pgina 120. Para mais informaes sobre como alterar numericamente a posio de um objeto, consultar Edio de objetos selecionados na pgina 116.

268 Captulo 12

Como tornar as fatias interativas


Os blocos de construo bsicos para a criao de interatividade no Fireworks so os objetos de fatia. O Fireworks oferece duas maneiras para tornar as fatias interativas:

O mtodo de rollover arrastar e soltar a maneira mais fcil para tornar uma fatia interativa.
possvel criar uma interatividade simples com rapidez simplesmente arrastando-se a ala de comportamento de uma fatia e soltando-a na fatia alvo.

O painel Comportamentos permite criar interatividades mais complexas. O painel


Comportamentos contm uma srie de comportamentos interativos que se podem acrescentar s fatias. possvel criar efeitos interessantes com o acrscimo de mltiplos comportamentos a uma fatia nica. Tambm possvel criar interaes personalizadas atravs da edio de comportamentos existentes. Os comportamentos no Fireworks MX so compatveis com os comportamentos do Macromedia Dreamweaver MX. Ao exportar um rollover do Fireworks para o Dreamweaver, possvel editar comportamentos do Fireworks com a utilizao do painel Comportamentos do Dreamweaver. Adio de interatividade simples a fatias O mtodo de rollover arrastar e soltar uma forma rpida e eficiente para a criao de efeitos de rollover e troca de imagem. Especificamente, o mtodo de rollover arrastar e soltar permite determinar o que ocorre com uma fatia quando o ponteiro passa sobre ela. Denomina-se o resultado final uma imagem de rollover. Imagens de rollover so imagens que mudam a aparncia em um navegador da Web ao se mover o ponteiro do mouse sobre as mesmas. Quando o usurio seleciona uma fatia, aparece um crculo com um retculo no centro da fatia. Denomina-se uma ala de comportamento.
Nome da fatia Ala de comportamento Ala de seleo

possvel criar efeitos de rollover e troca de imagem com facilidade arrastando-se a ala de comportamento de uma fatia de acionamento e soltando-a em uma fatia alvo. O acionador e o alvo podem ser a prpria fatia.

Os pontos ativos tambm tm alas de comportamento para a incorporao de efeitos de rollover. Para mais informaes, consultar Criao de pontos ativos na pgina 282.

Fatias, rollovers e pontos ativos 269

Sobre rollovers Todos os rollovers funcionam da mesma forma. Uma imagem aciona a exibio de outra quando o ponteiro rola sobre a primeira. O acionador sempre um objeto da Web: uma fatia, um ponto ativo ou um boto. O rollover mais simples troca uma imagem na Moldura 1 por uma imagem diretamente abaixo dela na Moldura 2. Tambm possvel construir rollovers mais complexos. Rollovers de troca de imagem podem alternar uma imagem em qualquer moldura; rollovers desmembrados exibem uma imagem afastada do ponteiro.

No Fireworks, ao selecionar um objeto acionador da Web criado com o uso de uma ala de comportamento ou no painel Comportamentos, exibem-se todas as suas relaes de comportamento. Por padro, uma interao de rollover representada por uma linha de comportamento azul. Criao de um rollover simples Um rollover simples troca uma imagem por outra imagem em uma moldura com o mesmo objeto da Web. Um rollover simples envolve somente uma fatia ou ponto ativo. possvel selecionar a imagem de troca em qualquer moldura.

Para acrescentar um rollover simples a uma imagem ou objeto selecionado: 1 2 3

Certificar-se de que a imagem ou o objeto no esteja sobre uma camada compartilhada. Para mais informaes, consultar Compartilhamento de uma camada na pgina 226. Selecionar Editar > Inserir > Fatia para criar uma fatia no topo da imagem ou objeto. Criar uma nova moldura no painel Molduras clicando no boto Moldura nova/duplicada.

270 Captulo 12

Criar, colar ou importar uma imagem para us-la como a imagem de troca. Posicionar a imagem abaixo da fatia criada na etapa 1, a qual ser visvel mesmo que se esteja na Moldura 2. As fatias sero visveis em todas as molduras.

5 6

No painel Molduras, selecionar Moldura 1 para retornar moldura com a imagem original. Selecionar a fatia e colocar o ponteiro sobre a ala de comportamento. O ponteiro se transforma em uma mo.

Nota: possvel selecionar a fatia estando em qualquer moldura.

Arrastar a ala de comportamento at a borda superior esquerda da fatia. Uma linha de comportamento azul se estende do centro at o canto superior esquerdo da fatia e a caixa de dilogo Trocar imagem aparece.

8 9

No menu pop-up Trocar imagem de, selecionar a moldura na qual se localiza a imagem a ser trocada e clicar em OK. Clicar na guia Visualizao para exibir e testar o rollover ou pressionar F12 para visualiz-lo em um navegador.

Fatias, rollovers e pontos ativos 271

Criao de um rollover desmembrado Um rollover desmembrado troca uma imagem em um objeto da Web quando o ponteiro do mouse passa sobre outro objeto da Web. Quando o ponteiro do mouse passa sobre uma imagem de acionamento ou se esta clicada, exibe-se uma imagem em um local diferente na pgina da Web. Considera-se a imagem sobre a qual passa o ponteiro como o acionador e a imagem que se altera o alvo. De forma semelhante ao que ocorre com rollovers simples, que usam apenas uma fatia, primeiro necessrio configurar as fatias acionador e alvo, bem como a moldura na qual residir a imagem de troca. Em seguida, ser possvel vincular o acionador fatia alvo com uma linha de comportamento.
Nota: O acionador para um rollover desmembrado no pode ser uma fatia. Pontos ativos e botes tambm tm alas de comportamento que podem ser usadas para criar rollovers desmembrados. Para mais informaes sobre pontos ativos, consultar Criao de pontos ativos na pgina 282. Para mais informaes sobre botes, consultar Criao de um smbolo de boto na pgina 287.

Para acrescentar um rollover desmembrado a uma imagem selecionada: 1

Selecionar Editar > Inserir > Fatia para acrescentar uma fatia imagem acionadora.
Nota: Esta etapa no ser necessria se o objeto selecionado for um boto ou se uma fatia ou ponto ativo j cobrirem a imagem.

2 3 4 5 6 7

No painel Molduras, criar uma nova moldura clicando no boto Moldura nova/duplicada. Colocar uma segunda imagem, a ser usada como o alvo na nova moldura, no local desejado da tela. possvel colocar a imagem em qualquer lugar, exceto sob a fatia criada na etapa 1. Selecionar a imagem e, em seguida, selecionar Editar > Inserir > Fatia para acrescentar uma fatia imagem. No painel Molduras, selecionar Moldura 1 para retornar moldura com a imagem original. Selecionar a fatia, ponto ativo ou boto que cobre a rea acionadora (a imagem original) e colocar o ponteiro sobre a ala de comportamento. O ponteiro se transforma em uma mo. Arrastar a ala de comportamento da fatia acionadora at a fatia alvo criada na etapa 4. A linha de comportamento se estende do centro do acionador at o canto superior esquerdo da fatia alvo e a caixa de dilogo Trocar imagem se abre.

8 9

No menu pop-up Trocar imagem de, selecionar a moldura criada na etapa 2 e clicar em OK. Clicar na guia Visualizao para exibir e testar o rollover de desmembramento.

272 Captulo 12

Aplicao de mltiplos rollovers a uma fatia possvel arrastar mais de uma ala de comportamento de uma nica fatia para criar mltiplas interaes de rollover. Por exemplo, possvel acionar um rollover e um rollover desmembrado na mesma fatia.

Acionamento de um comportamento de rollover e um de rollover desmembrado a partir de uma fatia


Nota: Tambm possvel adicionar mltiplos comportamentos com o uso do painel Comportamentos. Para mais informaes, consultar Uso do painel Comportamentos para adicionar interatividade a fatias na pgina 274.

Para aplicar mais de um rollover fatia selecionada: 1

Arrastar uma ala de comportamento na fatia selecionada at a borda da mesma fatia ou sobre outra fatia. Arrastando-se a ala at a borda superior esquerda da mesma fatia, cria-se um rollover simples e, arrastando-se a ala at outra fatia, cria-se um rollover desmembrado.

2 3

Selecionar a moldura da imagem de troca e clicar em OK. Para criar mais rollovers, repetir as etapas 1 e 2 tantas vezes quanto desejado.

Remoo de um rollover arrastar e soltar possvel remover com facilidade um rollover arrastar e soltar de uma fatia, ponto ativo ou boto.
Para remover um rollover arrastar e soltar de um objeto da Web ou boto selecionado: 1 2

Clicar na linha de comportamento azul que se deseja remover. Clicar em OK para remover a interao de rollover.

Fatias, rollovers e pontos ativos 273

Uso do painel Comportamentos para adicionar interatividade a fatias Alm de rollovers, possvel acrescentar outros tipos de interatividade a fatias com o uso do painel Comportamentos. possvel criar interaes personalizadas atravs da edio de comportamentos existentes.
Nota: Embora seja possvel criar rollovers simples, desmembrados e complexos com o painel Comportamentos, recomenda-se o mtodo de rollover arrastar e soltar. Para mais informaes, consultar Adio de interatividade simples a fatias na pgina 269.

Os seguintes comportamentos esto disponveis no Fireworks:


Rollover simples adiciona um efeito de rollover fatia ou objeto da Web selecionado com o uso da

Moldura 1, como o estado Acima, e da Moldura 2, como o estado Sobre. Depois de selecionar este comportamento, ser necessrio criar uma imagem na segunda moldura com o uso da mesma fatia para criar o estado Sobre. A opo Rollover simples, na verdade, um grupo de comportamentos que contm os comportamentos Trocar imagem e Restaurar imagem trocada.
Trocar imagem substitui

a imagem da fatia especificada pelo contedo de outra moldura na mesma fatia ou pelo contedo de um arquivo externo. a aparncia padro do rollover na Moldura 1. uma fatia para fazer parte de uma barra de navegao do Fireworks. Cada fatia que faa parte da barra de navegao deve ter este comportamento. A opo Definir imagem da barra de navegao, na verdade, um grupo de comportamentos que contm os comportamentos Sobre na barra de navegao, Abaixo na barra de navegao e Restaurar barra de navegao. Por padro, esse comportamento definido automaticamente ao se usar o Editor de boto para criar um boto que inclui um estado Abaixo e um Sobre durante o estado Abaixo. Para mais informaes sobre botes, consultar Criao de um smbolo de boto na pgina 287.

Restaurar imagem trocada restaura

Definir imagem da barra de navegao define

Sobre na barra de navegao especifica

o estado Acima para a fatia selecionada atualmente, quando esta faz parte de uma barra de navegao e especifica, opcionalmente, o estado Sobre durante o estado Abaixo. um estado Abaixo para a fatia selecionada atualmente, quando esta faz parte de uma barra de navegao. todas as outras fatias na barra de navegao para o estado

Abaixo na barra de navegao especifica Restaurar barra de navegao restaura

Acima.
Definir o menu pop-up acrescenta

um menu pop-up a uma fatia ou ponto ativo. Esse comportamento ser definido automaticamente caso o usurio use o Editor de menu pop-up. Para mais informaes, consultar Criao de menus pop-up na pgina 298. maioria das janelas de navegadores. Como acrescentar comportamentos Com o uso do painel Comportamentos possvel acrescentar um comportamento a uma fatia. Tambm possvel acrescentar mais de um comportamento.

Definir texto da barra de status permite definir o texto para exibio na barra de status, na base da

274 Captulo 12

Para acrescentar um comportamento a uma fatia selecionada com o painel Comportamentos: 1

No painel Comportamentos, clicar no boto Adicionar comportamento.


Boto Adicionar comportamento Boto Remover comportamento

No menu pop-up Adicionar comportamento, selecionar um comportamento. Para uma explicao de cada comportamento, consultar Uso do painel Comportamentos para adicionar interatividade a fatias na pgina 274.

Edio de comportamentos O painel Comportamentos tambm permite editar comportamentos existentes. possvel especificar o tipo de evento (como clicar) que aciona o comportamento.
Nota: No possvel alterar o evento para Rollover simples e Definir imagem da barra de navegao.

Para alterar o evento de mouse que ativa o comportamento: 1

Selecionar a fatia acionadora que contm o comportamento que se deseja modificar. Todos os comportamentos associados quela fatia so exibidos no painel Comportamentos. Selecionar o comportamento que se deseja editar. Clicar na seta ao lado do evento e selecionar um novo evento no menu pop-up:
onMouseOver aciona onMouseOut aciona onClick aciona onLoad aciona

2 3

o comportamento quando o ponteiro passa sobre a rea acionadora.

o comportamento quando o ponteiro deixa a rea acionadora.

o comportamento quando se clica no objeto acionador. o comportamento quando a pgina da Web carregada.

Fatias, rollovers e pontos ativos 275

Uso de arquivos de imagem externos para estados de rollover possvel usar uma imagem fora do documento atual do Fireworks como a imagem de origem para um estado de rollover. possvel usar GIFs, GIFs animados, JPEGs ou PNGs. Ao escolher um arquivo externo como a origem da imagem, aquele arquivo trocado pela fatia alvo quando o rollover acionado em um navegador da Web. O arquivo deve ter a mesma largura e altura da fatia pela qual est sendo trocado. Se isto no ocorrer, o navegador redimensionar o arquivo para que se ajuste dentro do objeto de fatia. O redimensionamento do arquivo poder reduzir sua qualidade, especialmente no caso de um GIF animado.
Para selecionar um arquivo de imagem externo como a origem para um estado de rollover: 1

Nas caixas de dilogo Trocar imagem, Sobre na barra de navegao ou Abaixo na barra de navegao, selecionar Arquivo de imagem e clicar no cone de pasta.
Nota: Caso essa opo no seja vista na caixa de dilogo Trocar imagem, selecionar Mais opes e executar a etapa 1.

2 3

Navegar at o arquivo que se deseja usar e clicar em Abrir. Se necessrio, cancelar a seleo de Pr-carregar as imagens (se o arquivo externo for um GIF animado). O pr-cacheamento pode interromper a exibio de GIFs animados como estados de rollover. Para evitar esse problema, cancelar a seleo de Pr-carregar imagens ao configurar o rollover.
Nota: Se o usurio planejar a exportao do documento para uso na Web, dever certificar-se de que o arquivo de imagem externo seja acessvel no HTML do Fireworks exportado. O Fireworks cria caminhos relativos do documento at os arquivos de imagem. aconselhvel colocar os arquivos externos dentro do site local antes de us-los como estados de rollover no Fireworks. Em seguida, ao carregar os arquivos na Web, certificar-se de tambm carregar o arquivo de imagem externo. Para mais informaes sobre o Fireworks HTML, consultar Exportao de HTML na pgina 352.

Preparao de fatias para exportao


Com o uso do Inspetor de propriedades, possvel realizar fatias interativas atribuindo-se URLs e molduras alvo a elas. Tambm possvel especificar a exibio de um texto alternativo em um navegador enquanto a imagem carregada. Alm disso, possvel selecionar um formato de arquivo de exportao para otimizar uma fatia selecionada. Se o Inspetor de propriedades estiver minimizado, ser necessrio clicar na seta de expanso, no canto inferior direito, para ver todas as propriedades da fatia.

Propriedades da fatia no Inspetor de propriedades

276 Captulo 12

Com o uso do Inspetor de propriedades ou do painel Camadas, possvel atribuir nomes exclusivos s fatias. Na exportao, o Fireworks usa o nome especificado para nomear os arquivos gerados a partir do fatiamento. Se o nome de uma fatia no for inserido no Inspetor de propriedades ou no painel Camadas, o Fireworks nomear as fatias automaticamente na exportao. possvel alterar a conveno de nomeao automtica que o Fireworks usa atravs da caixa de dilogo Configurao do HTML. Ao exportar um documento fatiado do Fireworks, ele exportado como um arquivo HTML e uma srie de arquivos grficos. possvel definir as propriedades do arquivo HTML exportado com o uso da caixa de dilogo Configurao do HTML. Atribuio de URLs O URL (Uniform Resource Locator, localizador uniforme de recursos) representa o endereo de uma pgina ou arquivo especficos da Internet. Ao se atribuir um URL a uma fatia, os usurios podem navegar at aquele endereo clicando na rea definida pela fatia em seus navegadores da Web.
Para atribuir um URL fatia selecionada:

No Inspetor de propriedades, digitar um URL na caixa de texto Link.


Dica: Se o usurio desejar reutilizar os URLs, ser possvel criar uma biblioteca de URLs no painel URL e, em seguida, armazen-los nesta. Para mais informaes, consultar Como trabalhar com um URL na pgina 258.

Digitao de texto alternativo Texto alternativo, ou alt, aparece no marcador de lugar de imagem enquanto esta descarregada da Web e tambm substitui as imagens que falham ao serem descarregadas. Em algumas verses de navegadores, o texto tambm aparece prximo ao ponteiro como uma dica. A digitao de um texto alternativo breve e claro torna-se cada vez mais importante no design para a Web. Um nmero crescente de pessoas com limitaes visuais usa aplicativos de leitura de tela, os quais convertem o texto alternativo em voz gerada pelo computador medida que o ponteiro do mouse passa sobre as imagens de uma pgina da Web.
Para especificar um texto alternativo para uma fatia selecionada:

No Inspetor de propriedades, digitar o texto na caixa de texto Alt. Atribuio de um alvo Alvo uma moldura de pgina da Web ou janela de navegador da Web alternativa na qual o documento vinculado aberto. possvel especificar um alvo para uma fatia selecionada no Inspetor de propriedades. Se o Inspetor de propriedades estiver minimizado, ser necessrio clicar na seta de expanso para ver todas as propriedades.
Para especificar um alvo para uma fatia selecionada no Inspetor de propriedades:

Digitar o nome da moldura HTML na caixa de texto Destino ou selecionar um alvo reservado no menu pop-up Destino:
_blank carrega

os documentos vinculados em uma nova janela do navegador sem nome.

_parent carrega

o documento vinculado no conjunto principal de molduras ou na janela da moldura que contm o vnculo. Se a moldura que contm o link no estiver aninhada, o documento vinculado ser carregado na janela inteira do navegador.

Fatias, rollovers e pontos ativos 277

_self carrega _top carrega

o documento vinculado na mesma moldura ou janela do vnculo. Este alvo est subentendido e, por isso, normalmente no necessrio especific-lo. o documento vinculado na janela inteira do navegador, removendo, assim, todas as

molduras. Configuraes de exportao No Inspetor de propriedades, possvel otimizar uma fatia com a seleo de uma opo no menu pop-up Configuraes de exportao. possvel selecionar dentre configuraes de exportao comuns para definir rapidamente um formato de arquivo e aplicar vrias configuraes com formatos especficos. Para mais informaes sobre essas configuraes e como personaliz-las, consultar Como usar configuraes de otimizao predefinidas na pgina 329. Nomeao de fatias O fatiamento desmembra uma imagem em partes. Cada pedao de cada moldura exportado como um arquivo separado e, dessa forma, cada arquivo deve ter um nome. O Fireworks nomeia automaticamente cada arquivo de fatia no momento da exportao. possvel aceitar a conveno de nomeao padro ou alter-la, ou digitar um nome personalizado para cada fatia. Como personalizar a nomeao de arquivos de fatia possvel atribuir nomes especficos a fatias para que os arquivos de fatias possam ser identificados facilmente na estrutura de arquivos do site da Web. Por exemplo, se houver um boto em uma barra de navegao que retorna pgina inicial, ser possvel atribuir o nome Incio fatia.
Para digitar um nome de fatia personalizado, executar um dos seguintes procedimentos:

Selecionar a fatia na tela, digitar um nome na caixa Editar nome do objeto, no Inspetor de
propriedades, e pressionar Enter.

Em Camada da Web, clicar duas vezes no nome da fatia, digitar um novo nome e pressionar
Enter. No adicionar a extenso do arquivo ao nome-base. O Fireworks adiciona automaticamente as extenses aos arquivos de fatia no momento da exportao. Nomeao automtica de arquivos de fatia Caso no seja digitado um nome de fatia no Inspetor de propriedades ou no painel Camadas, o Fireworks alternar para a nomeao automtica. A nomeao automtica atribui automaticamente um nome exclusivo a cada arquivo de fatia com base na conveno de nomeao padro.
Para nomear automaticamente um arquivo de fatia:

Ao exportar a imagem fatiada, digitar um nome nas caixas de texto Nome do arquivo (Windows) ou Nome (Macintosh) na caixa de dilogo Exportar. No adicionar uma extenso de arquivo. O Fireworks adiciona automaticamente as extenses aos arquivos de fatia no momento da exportao.

278 Captulo 12

Alterao da conveno de nomeao automtica padro Na caixa de dilogo Configurao do HTML, guia Especfico do documento, possvel alterar a conveno de nomeao para fatias. O Fireworks permite construir uma conveno de nomeao personalizada com o uso de uma vasta gama de opes de nomeao. possvel criar uma conveno de nomeao contendo at seis elementos. Um elemento pode consistir em qualquer uma das seguintes opes de nomeao automtica.
Opo Nenhum nome.doc "fatia" Fatia # (1,2,3...) Fatia # (01,02,03...) Fatia # (A,B,C...) Fatia # (A,B,C...) Descrio Nenhum nome aplicado ao elemento. O elemento recebe o nome do documento. possvel inserir a palavra fatia na conveno de nomeao. O elemento numerado numrica ou alfabeticamente, de acordo com o estilo escolhido.

linha/coluna (r3_c2, r4_c7...) Linha (r##) e coluna (c##) designam as linhas e colunas da tabela que os navegadores da Web usam para reconstruir uma imagem fatiada. possvel usar essa informao na conveno de nomeao. Sublinhar Ponto Espao Hfen O elemento usa normalmente qualquer um desses caracteres como separadores entre outros elementos.

Por exemplo, se o nome do documento for meudoc, a conveno de nomeao nome.doc + "fatia" + Fatia # (A,B,C...) resultar em uma fatia chamada meudocfatiaA. Provavelmente, nunca ser necessria uma conveno de nomeao utilizando todos os seis elementos. Se uma fatia possuir mais de uma moldura, por padro o Fireworks adicionar um nmero a cada arquivo da moldura. Por exemplo, se for digitado o nome de arquivo de fatia personalizado incio para um boto de trs estados, o Fireworks nomear a imagem do estado Acima como incio.gif, a imagem do estado Sobre como incio_f2.gif e a imagem do estado Abaixo como incio_f3.gif. possvel criar uma conveno de nomeao personalizada para fatias de mltiplas molduras com o uso da caixa de dilogo Configurao do HTML.
Para alterar a conveno de nomeao automtica padro: 1 2

Selecionar Arquivo > Configurao do HTML para abrir a caixa de dilogo Configurao do HTML. Clicar na guia Especfico do documento.

Fatias, rollovers e pontos ativos 279

Na seo Nomes dos arquivos, construir a nova conveno de nomeao selecionando nas listas desejadas. Por exemplo, a conveno de nomeao nome.doc + "fatia" + Fatia # (A,B,C...) apareceria da seguinte maneira:

(Opcional) Para definir essas informaes como o padro para todos os novos documentos do Fireworks, clicar em Definir padres.
Nota: Tomar cuidado ao selecionar Nenhum como opo de menu para a nomeao automtica de fatias. Se Nenhum for selecionado como a opo para os trs primeiros menus, o Fireworks exportar arquivos de fatia que se sobregravam, resultando em um nico grfico exportado e uma tabela que exibe esse grfico em todas as clulas.

Definio da forma de exportao das tabelas HTML O fatiamento define como a estrutura da tabela HTML aparecer quando um documento do Fireworks for exportado para uso na Web. Ao exportar um documento fatiado do Fireworks para HTML, ele recriado com o uso de uma tabela HTML. Cada elemento fatiado no documento do Fireworks reside em uma clula da tabela. Depois de exportada, uma fatia do Fireworks migra para uma clula de tabela HTML. possvel especificar como uma tabela do Fireworks ser reconstruda em um navegador. Dentre outras opes, possvel selecionar o uso de espaadores ou ninhos de tabelas ao exportar para HTML:

Espaadores so imagens que ajudam a alinhar corretamente as clulas da tabela ao ser exibida
em um navegador.

Um ninho de tabelas uma tabela dentro de outra. Ninhos de tabelas no usam espaadores.
Eles podem carregar com maior lentido nos navegadores, mas, como no h espaadores, mais fcil para a edio de seu HTML. Para mais informaes sobre HTML, consultar Exportao de HTML na pgina 352.

280 Captulo 12

Para definir como exportar tabelas HTML no Fireworks: 1 2 3

Selecionar Arquivo > Configurao do HTML ou, na caixa de dilogo Exportar, clicar no boto Opes. Clicar na guia Tabela. Selecionar uma opo de espaamento no menu pop-up Espaar:
Ninhos de tabelas - Sem espaadores cria Tabela simples - Sem espaadores cria

um ninho de tabelas sem espaadores.

uma tabela simples sem espaadores. Se esta opo estiver ativada, as tabelas podero ser exibidas de forma incorreta em alguns casos.

Espaador transparente de 1 pixel usa um GIF transparente de 1 pixel por 1 pixel como espaador, o qual redimensionado, conforme necessrio, no HTML. Isto gera uma linha com altura de 1 pixel no topo da tabela e uma coluna com largura de 1 pixel no lado direito. 4

Selecionar uma cor de clula para as fatias de HTML:

Para dar s clulas a mesma cor de fundo da tela do documento, selecionar Usar cor da tela. Para selecionar uma cor diferente, cancelar a seleo de Usar cor da tela e selecionar uma cor na
janela pop-up de cores.
5

Selecionar o contedo das clulas vazias no menu pop-up Contedo:


Nenhum faz

com que as clulas vazias permaneam em branco. uma pequena imagem transparente chamada spacer.gif em um tag HTML de espao nas clulas vazias. A clula aparece

Imagem do espaador coloca

clulas vazias.
Espao no-separvel coloca

vazada.
Nota: As clulas vazias ocorrero somente se a seleo da opo Incluir reas sem fatias, na caixa de dilogo Exportar, for cancelada durante a exportao.

Clicar em OK. Para mais informaes sobre como especificar as opes de exportao de HTML, consultar Configurao de opes de exportao de HTML na pgina 359.
Nota: possvel especificar configuraes exclusivas de exportao de tabela para objetos fatiados de cada documento. Ou possvel usar, na caixa de dilogo Configurao do HTML, guia Especfico do documento, o boto Definir padres para aplicar os padres para todos os novos documentos.

Fatias, rollovers e pontos ativos 281

Como trabalhar com pontos ativos e mapas de imagem


Os designers da Web usam, algumas vezes, pontos ativos para tornar interativas pequenas partes de um grfico interativo maior. Um ponto ativo uma rea de um grfico da Web vinculada a um URL. Um mapa de imagem no nada mais do que um grfico sobre o qual foram colocados um ou mais pontos ativos.

Mapa de imagem com pontos ativos Na maioria das vezes, pontos ativos e mapas de imagem dependem menos de recursos do que grficos fatiados. O fatiamento pode depender mais de recursos para os navegadores da Web em funo do cdigo HTML adicional que devem descarregar e pela quantidade de processamento necessrio para reconstruir os grficos fatiados.
Nota: possvel criar um mapa de imagem fatiada. A exportao de um mapa de imagem fatiada normalmente gera vrios arquivos grficos. Para mais informaes sobre fatias, consultar Criao de objetos de fatia na pgina 262.

Os pontos ativos so ideais quando se deseja vincular reas de uma imagem a outras pginas da Web, no sendo necessrio, porm, realar aquelas reas ou produzir efeitos de rollover em resposta movimentao ou aes do mouse. Os pontos ativos e mapas de imagem tambm so ideais quando o grfico no qual foram colocados os pontos ativos for melhor exportado como um arquivo grfico simples; em outras palavras, a exportao do grfico inteiro ser melhorada com o uso do mesmo formato de arquivo e das mesmas configuraes de otimizao. Criao de pontos ativos Depois de identificar as reas em um grfico de origem que seriam pontos de navegao satisfatrios, criar os pontos ativos e, em seguida, atribuir vnculos URL a eles. H duas maneiras de se criar pontos ativos:

possvel desenhar o ponto ativo em volta de uma rea de destino no grfico com o uso das
ferramentas Ponto ativo retangular, Ponto ativo circular ou Ponto ativo poligonal (forma irregular).

possvel selecionar um objeto e inserir o ponto ativo sobre ele.


Um ponto ativo no necessita sempre ser um retngulo ou um crculo. Tambm possvel criar pontos ativos poligonais compostos por muitos pontos. Esta pode ser uma boa abordagem ao se trabalhar com imagens complexas.

282 Captulo 12

Para criar um ponto ativo retangular ou circular: 1

No painel Ferramentas, seo Web, selecionar a ferramenta Ponto ativo retangular ou Ponto ativo circular.

Arrastar a ferramenta Ponto ativo para desenhar um ponto ativo sobre uma rea do grfico. Manter pressionado Alt (Windows) ou Opo (Macintosh) para desenhar a partir do ponto central.
Nota: possvel ajustar a posio de um ponto ativo medida que o mesmo arrastado para ser desenhado. Enquanto o boto do mouse mantido pressionado, simplesmente deve-se manter pressionada a barra de espao no teclado e, em seguida, arrastar o ponto ativo para outro local na tela. Soltar a barra de espao para continuar a desenhar o ponto ativo.

Para criar um ponto ativo de formato irregular: 1 2

Selecionar a ferramenta Ponto ativo poligonal. Clicar para posicionar pontos vetoriais, como se estivesse desenhando segmentos retos com a ferramenta Caneta. Se o traado for aberto ou fechado, o preenchimento definir a rea do ponto ativo.

Para criar um ponto ativo traando-se um ou mais objetos selecionados: 1

Escolher Editar > Inserir > Ponto ativo. Se mais de um objeto for selecionado, aparecer uma mensagem solicitando se o usurio deseja criar um ponto ativo retangular simples cobrindo todos os objetos ou mltiplos pontos ativos, um para cada objeto.

Clicar em nico ou Mltiplos. A Camada da Web exibe o novo ponto ativo ou pontos ativos.

Edio de pontos ativos Pontos ativos so objetos da Web e, como muitos outros objetos, podem ser editados com o uso das ferramentas Ponteiro, Selecionar secundrio e Transformar. Para mais informaes sobre o uso dessas ferramentas para a edio de um objeto da Web, consultar Uso de ferramentas para editar objetos de fatia na pgina 268.

Fatias, rollovers e pontos ativos 283

possvel alterar numericamente a posio e o tamanho de um ponto ativo com o uso do Inspetor de propriedades ou do painel Informaes. Para mais informaes sobre como alterar numericamente as dimenses de um objeto, consultar Transformao de um objeto numericamente na pgina 120. Para mais informaes sobre como alterar numericamente a posio de um objeto, consultar Edio de objetos selecionados na pgina 116. Tambm possvel alterar a forma de um ponto ativo com o uso do Inspetor de propriedades.
Para converter um ponto ativo selecionado em um ponto ativo retangular, circular ou poligonal:

No Inspetor de propriedades, selecionar Retngulo, Crculo ou Polgono no menu pop-up Forma do ponto ativo. Preparao de pontos ativos para exportao possvel usar o Inspetor de propriedades para atribuir URLs, textos alternativos, destinos e nomes personalizados a pontos ativos. Se o Inspetor de propriedades estiver minimizado, ser necessrio clicar na seta de expanso, no canto inferior direito, para ver todas as propriedades.

A atribuio de propriedades a um ponto ativo semelhante atribuio de propriedades a uma fatia. Para mais informaes sobre como usar o Inspetor de propriedades para atribuir URLs, texto alternativo, molduras de destino e nomes personalizados, consultar Preparao de fatias para exportao na pgina 276. Criao de mapas de imagem Aps inserir vrios pontos ativos no topo de um grfico desejado, necessrio exportar o grfico como um mapa de imagem para que funcione em um navegador da Web. A exportao de um mapa de imagem gera o grfico e o HTML que contm as informaes do mapa para os pontos ativos e links de URL correspondentes.
Nota: Ao exportar, o Fireworks produz apenas mapas de imagens do lado do cliente.

Como uma alternativa exportao, possvel copiar o mapa de imagem na rea de transferncia e col-lo no Dreamweaver ou em outro editor de HTML.
Para exportar um mapa de imagem ou copi-lo para a rea de transferncia: 1

Otimizar o grfico para prepar-lo para a exportao. Para mais informaes, consultar Sobre otimizao na pgina 325. Selecionar Arquivo > Exportar. Se a imagem for exportada (em vez de copi-la para a rea de transferncia), navegar at a pasta em que se deseja colocar o arquivo HTML e nome-lo. Se j houver uma estrutura de arquivos local construda para o site da Web, ser possvel salvar o grfico na pasta apropriada do site a partir daqui.

2 3

No menu pop-up Salvar como tipo, selecionar HTML e imagens.

284 Captulo 12

Selecionar uma opo no menu pop-up HTML:


Exportar arquivo HTML gera o arquivo HTML solicitado e os arquivos grficos correspondentes, que posteriormente podero ser importados no Dreamweaver ou em outro editor de HTML. Copiar para a rea de transferncia simplesmente

copia o mapa de imagem para a rea de transferncia para que seja possvel col-la posteriormente no Dreamweaver ou em outro editor de HTML.

6 7 8

Para Fatias, selecionar Nenhum. Caso necessrio, selecionar Colocar imagens na subpasta e navegar at a pasta apropriada (isto no ser necessrio se o usurio copiar para a rea de transferncia). Clicar em Salvar para fechar a caixa de dilogo Exportar.
Dica: Ao exportar arquivos, o Fireworks pode utilizar comentrios em HTML para rotular claramente o incio e o fim do cdigo para mapas de imagens e outros recursos da Web criados no Fireworks. Por padro, os comentrios em HTML no so includos no cdigo. Para inclu-los, selecionar Incluir comentrios HTML na caixa de dilogo Configurao do HTML.

Para mais informaes sobre como colocar contedo exportado do Fireworks no Dreamweaver ou em outro editor de HTML, consultar Uso do Fireworks com outros aplicativos na pgina 363. Criao de rollovers com pontos ativos Com o uso do mtodo de criao de interatividade rollover arrastar e soltar, possvel anexar com facilidade um efeito de rollover desmembrado a um ponto ativo, caso a rea de destino seja definida por uma fatia. Os efeitos de rollover aplicam-se a pontos ativos de maneira semelhante a fatias. Para mais informaes, consultar Adio de interatividade simples a fatias na pgina 269.
Nota: Um ponto ativo pode acionar somente um rollover desmembrado. Ele no pode ser o alvo de um rollover que venha de outro ponto ativo ou fatia.

Depois de criar um rollover desmembrado com um ponto ativo, a linha azul de conexo permanece visvel somente enquanto o ponto ativo est selecionado. Uso de pontos ativos no topo de fatias possvel colocar um ponto ativo no topo de uma fatia para iniciar uma ao ou comportamento. Isto poder ser desejvel se houver um grfico grande e se o usurio desejar que somente uma pequena parte atue como o acionador para uma ao.

Fatias, rollovers e pontos ativos 285

Por exemplo, pode ser que haja um grfico grande contendo um texto e se deseje que somente o texto acione uma ao ou comportamento, tal como um efeito de rollover. Ser possvel colocar uma fatia no topo do grfico e, em seguida, um ponto ativo no topo do texto. O efeito de rollover ser acionado simplesmente com a passagem do ponteiro do mouse sobre o texto, ainda que o grfico inteiro sob a fatia seja trocado ao ocorrer o efeito de rollover. recomendvel evitar a criao de pontos ativos que se sobreponham a mais de uma fatia, pois isto poder resultar em comportamento imprevisvel.

Para criar um acionador para um efeito de rollover com o uso de um ponto ativo no topo de uma fatia: 1 2 3

Inserir uma fatia sobre a imagem que se deseja trocar. Criar uma nova moldura no painel Molduras e inserir uma imagem que ser usada como a imagem de troca. Certificar-se de coloc-la debaixo da fatia inserida na etapa 1. Arrastar e soltar uma linha de comportamento do ponto ativo at a fatia que contm a imagem que se deseja trocar. A caixa de dilogo Trocar imagem se abre. Selecionar a moldura que suportar a imagem de rollover na lista Trocar imagem de e clicar em OK.

286 Captulo 12

CAPTULO 13 Criao de botes e menus pop-up

No Macromedia Fireworks MX, possvel criar uma srie de botes e menus pop-up em JavaScript, mesmo no conhecendo nada dessa linguagem. O Editor de boto do Fireworks permite navegar pelo processo de criao do boto, automatizando vrias tarefas de criao. O resultado um smbolo de boto apropriado. Depois de criar um smbolo de boto, possvel criar facilmente instncias do smbolo para elaborar uma barra de navegao ou nav bar. O Fireworks tambm tem um Editor de menu pop-up que permite criar, com rapidez e facilidade, menus pop-up verticais ou horizontais. A guia Avanada do Editor de menu pop-up proporciona controle sobre o espaamento e preenchimento de clulas, recuo de texto, bordas de clulas e outras propriedades. Ao exportar um boto ou menu pop-up, o Fireworks gera automaticamente o JavaScript necessrio para exibi-lo em um navegador da Web. No Macromedia Dreamweaver, possvel inserir facilmente cdigos JavaScript e HTML do Fireworks em pginas da Web ou recortar e colar o cdigo em qualquer arquivo HTML. Para mais informaes, consultar Como trabalhar com o Macromedia Dreamweaver MX na pgina 363.

Criao de um smbolo de boto


Botes so elementos de navegao para uma pgina da Web. Os botes criados no Editor de boto tm as seguintes caractersticas:

possvel elaborar praticamente qualquer objeto grfico ou de texto em um boto. possvel criar um boto do zero, converter um objeto existente em um boto ou importar
botes j criados.

Um boto um tipo especial de smbolo. possvel arrastar suas ocorrncias da biblioteca de


smbolos para dentro do documento. Isto permite alterar a aparncia grfica de um boto simples e atualizar automaticamente a aparncia de todas as ocorrncias do boto em uma barra de navegao. Para mais informaes sobre smbolos, consultar Uso de um smbolo na pgina 252.

possvel editar o texto, URL e alvo para uma ocorrncia de boto sem afetar outras
ocorrncias do mesmo boto e sem quebrar a relao smbolo-ocorrncia.

A ocorrncia do boto encapsulada. Arrastar o boto no documento move todos os


componentes e estados a ele associados e, assim, no existe mais a necessidade de se editar molduras mltiplas e complexas.

287

Editar um boto fcil. Basta clicar duas vezes na ocorrncia na tela para poder alter-la no
Editor de boto ou no Inspetor de propriedades.

Como qualquer smbolo, os botes tm um ponto de registro. O ponto de registro um ponto


central que ajuda no alinhamento do texto e dos diferentes estados do boto enquanto no Editor de boto. Sobre os estados do boto Um boto pode ter at quatro estados. Cada estado representa a aparncia do boto em resposta a um evento do mouse:
O estado Acima

o padro ou a aparncia do boto "em repouso".

O estado Sobre como o boto aparece quando o ponteiro se move sobre ele. Esse estado alerta os usurios de que o clique no mouse provavelmente resultar em uma ao. O estado Abaixo na maioria das vezes a imagem do boto pressionado, representando-o depois de

clicado. Este estado do boto normalmente representa a pgina da Web atual em barras de navegao com mltiplos botes.
O estado Sobre durante o estado Abaixo a aparncia do boto quando o ponteiro se move sobre

ele enquanto o boto est no estado Abaixo. Esse estado do boto normalmente mostra que o ponteiro est sobre o boto da pgina da Web atual em barras de navegao com mltiplos botes. Com o Editor de boto possvel criar todos esses diferentes estados do boto, bem como uma rea para iniciar a ao do boto.

288 Captulo 13

Uso do Editor de boto O Editor de boto o local de criao e edio de um smbolo de boto em JavaScript no Fireworks. As guias no topo do Editor de boto correspondem aos quatro estados do boto e rea ativa. As dicas em cada opo do Editor de boto ajudam a tomar decises de design para todos os quatro estados do boto.

Editor de boto Criao de um boto simples com dois estados Com o Editor de boto possvel criar botes personalizados desenhando formas, importando imagens grficas ou arrastando objetos da janela do documento. O Editor de boto conduz atravs das etapas para efetuar o controle do comportamento do boto.
Para criar um estado Acima: 1

Selecionar Editar > Inserir > Novo boto para abrir o Editor de boto. O Editor de Boto abre o indicador de estado Acima. Importar ou criar o grfico do estado Acima: de trabalho do Editor de boto.

Arrastar e soltar, ou importar, o grfico que aparecer como o estado do boto Acima no espao Usar as ferramentas de desenho para criar um grfico ou a ferramenta Texto para criar um
boto a partir de um texto.

Clicar em Importar um boto e selecionar um boto predefinido editvel na biblioteca de


importao Boto. Se essa opo for selecionada, no ser necessrio ocupar-se da criao dos estados restantes do boto. Cada um dos estados do boto ser preenchido automaticamente com os grficos e o texto apropriados.
3

Se desejado, selecionar a ferramenta Texto e criar o texto para o boto.

Criao de botes e menus pop-up 289

Para criar um estado Sobre: 1 2

Com o Editor de boto aberto, clicar na guia Sobre. Executar um dos seguintes procedimentos para criar o estado do boto Sobre: Sobre e, em seguida, edit-lo para alterar sua aparncia.

Clicar em Copiar grfico Acima para colar uma cpia do boto do estado Acima na janela Arrastar e soltar, importar ou desenhar um grfico.
Criao de um boto com trs ou quatro estados Ao criar um boto, alm dos estados Acima e Sobre, possvel adicionar um estado Abaixo e um estado Sobre durante o estado Abaixo. Esses estados adicionam dicas para usurios de pginas da Web. possvel criar uma barra de navegao com o uso de botes de dois estados e at mesmo um estado, mas somente um boto com todos os quatro estados se qualifica como um verdadeiro boto de barra de navegao no Fireworks. O Fireworks tem vrios comportamentos de Barra de navegao que fazem com que os botes atuem como se apresentassem um relacionamento entre si. Por exemplo, possvel criar botes de barra de navegao que atuam como os botes de presso em um velho auto-rdio: ao clicar em um boto, ele permanece pressionado at que outro boto seja clicado. Embora os botes de quatro estados no sejam necessrios para a criao de uma barra de navegao, seu uso permite aproveitar os comportamentos de Barra de navegao incorporados no Fireworks. Para detalhes sobre a criao dos estados Acima e Sobre para um boto, consultar Criao de um boto simples com dois estados na pgina 289.
Para criar um estado Abaixo: 1 2

Com um boto de dois estados aberto no Editor de boto, clicar na guia Abaixo: Executar um dos seguintes procedimentos para criar o estado do boto Abaixo: edit-lo para alterar sua aparncia.

Clicar em Copiar grfico Acima para colar uma cpia do boto do estado Abaixo e, em seguida, Arrastar e soltar, importar ou desenhar um grfico.
Nota: Ao inserir ou criar um grfico para o estado Abaixo, a opo Incluir estado Abaixo na barra de navegao selecionada automaticamente. Este estado do boto para botes que fazem parte de barras de navegao.

Para criar um estado Sobre durante o estado Abaixo: 1 2

Com um boto de trs estados aberto no Editor de boto, clicar na guia Sobre durante o estado Abaixo. Executar um dos seguintes procedimentos para criar o estado do boto Sobre durante o estado Abaixo: Sobre durante o estado Abaixo e, em seguida, edit-lo para alterar sua aparncia.

Clicar em Copiar grfico Abaixo para colar uma cpia do grfico do estado Abaixo na janela Arrastar e soltar, importar ou desenhar um grfico.
Nota: Ao inserir ou criar um grfico para o estado Sobre durante o estado Abaixo, a opo Incluir estado Abaixo na barra de navegao selecionada automaticamente. Este estado do boto para botes que fazem parte de barras de navegao.

290 Captulo 13

Uso de efeitos de chanfro para desenhar estados de botes medida que o usurio cria grficos para cada estado do boto, possvel aplicar predefinies de Efeitos ao vivo para a criao de aparncias comuns para cada estado. Por exemplo, se o usurio criar um boto de quatro estados, ser possvel aplicar o efeito Alto relevo ao grfico do estado Acima, o efeito Realado ao grfico do estado Abaixo e assim por diante.
Para aplicar Efeitos ao vivo predefinidos a um smbolo de boto: 1 2 3

Com o smbolo de boto desejado aberto no Editor de boto, selecionar o grfico ao qual se deseja adicionar um Efeito ao vivo. No Inspetor de propriedades. clicar no boto Adiciona efeitos. No menu pop-up exibido que aparece, executar um dos seguintes procedimentos:

Selecionar Chanfro e relevo > Chanfro interno. Selecionar Chanfro e relevo > Chanfro externo.
4

Na janela pop-up que aparece, selecionar uma predefinio de boto. As predefinies de boto so descritas abaixo.
Descrio O chanfro aparece levantado a partir dos objetos subjacentes.

Efeito de predefinio de boto Alto relevo

Realado

As cores do boto clareiam.

Interiorizar

O chanfro aparece afundado nos objetos subjacentes.

Invertido

O chanfro aparece afundado nos objetos subjacentes e suas cores so clareadas.

Repetir as etapas de 1 a 4 para os estados restantes do boto, dando a cada estado um efeito diferente de Predefinio do boto.

Criao de botes e menus pop-up 291

Converso de rollovers do Fireworks em botes possvel criar botes a partir de rollovers criados em verses anteriores do Fireworks. Os componentes so convertidos em um boto e o novo boto colocado na biblioteca. Para mais informaes sobre rollovers, consultar Como tornar as fatias interativas na pgina 269.
Para converter um rollover do Fireworks em um boto: 1 2 3

Excluir a fatia ou ponto ativo que cobre as imagens de rollover. No menu pop-up Opes de transparncia, painel Molduras, selecionar Mostrar todas as molduras. Selecionar todos os objetos a serem includos no boto.
Dica: Usar a ferramenta Selecionar atrs para selecionar os objetos que estejam ocultos atrs de outros. Para mais informaes, consultar Uso da ferramenta Selecionar atrs na pgina 104.

Selecionar Modificar > Smbolo > Converter em smbolo. Abre-se a caixa de dilogo Propriedades do smbolo. Digitar um nome para o smbolo na caixa de texto Nome. Selecionar o tipo de Smbolo do boto. Clicar em OK. O novo boto adicionado biblioteca.

5 6 7

Dica: Tambm possvel converter animaes de quatro molduras em botes. Basta selecionar todos os quatro objetos: cada um deles colocado em seu prprio estado do boto.

Como inserir botes em um documento possvel inserir ocorrncias de smbolos de boto em um documento no painel Biblioteca.
Para colocar ocorrncias de um smbolo de boto em um documento: 1 2

Abrir o painel Biblioteca. Arrastar o smbolo de boto no documento.

Para colocar ocorrncias adicionais de um smbolo de boto em um documento, executar um dos seguintes procedimentos:

Selecionar uma ocorrncia, selecionar Editar > Clonar para colocar outra ocorrncia
diretamente na frente da ocorrncia selecionada. A nova ocorrncia se torna o objeto selecionado.
Dica: A clonagem de ocorrncias de boto conveniente ao criar barras de navegao alinhadas, pois possvel mover os clones em uma direo com as setas de direo enquanto se mantm o alinhamento com a outra coordenada de posio.

Arrastar outra ocorrncia de boto do painel Biblioteca para o documento. Pressionar Alt e arrastar (Windows) ou pressionar Opo e arrastar (Macintosh) uma
ocorrncia na tela para criar outra ocorrncia de boto.

Copiar uma ocorrncia e colar as ocorrncias adicionais.

292 Captulo 13

Importao de smbolos de boto Os smbolos de boto no painel Biblioteca so especficos de documentos. Se houver um documento aberto com smbolos no painel Biblioteca e se usurio criar um novo documento, o painel Biblioteca no novo documento aparecer vazio. Porm, h vrios mtodos que se podem usar para importar smbolos de boto no painel Biblioteca de um documento, seja de uma biblioteca, seja de outro documento do Fireworks.
Para importar smbolos de boto para o painel Biblioteca de um documento, seguir um dos seguintes procedimentos:

Arrastar e soltar uma ocorrncia boto de outro documento do Fireworks no documento atual. Recortar e colar uma ocorrncia de boto de outro documento do Fireworks no documento atual. Exportar os smbolos de boto de outro documento do Fireworks para um arquivo de
biblioteca PNG e, em seguida, importar os smbolos de boto do arquivo de biblioteca PNG para o documento.

Selecionar Editar > Bibliotecas e importar os smbolos de boto para o painel Biblioteca do
documento a partir das bibliotecas de boto no submenu. Essas bibliotecas contm uma grande variedade de smbolos de boto predefinidos preparados pela Macromedia. Os mtodos de importao e exportao de smbolos de boto so os mesmos daqueles para smbolos grficos e de animao. Para mais informaes, consultar Importao de um smbolo na pgina 255 e Exportao de um smbolo na pgina 257. Edio de smbolos de boto Os smbolos de boto do Fireworks MX so um tipo especial de smbolo. Eles tm dois tipos de propriedade: algumas propriedades alteram-se em todas as ocorrncias quando se edita uma ocorrncia ou o smbolo, e outras propriedades afetam somente a ocorrncia atual. Os smbolos de boto do Fireworks permitem desfrutar a convenincia de smbolos, possibilitando a edio de certas propriedades de uma ocorrncia de boto, como texto, sem afetar as outras ocorrncias. Edio de propriedades em nvel de smbolo Os smbolos de boto so editados no Editor de boto. As propriedades que se alteram em uma ocorrncia ao editar seu smbolo de boto so aquelas que seriam normalmente comuns dentre uma srie de botes usados em uma barra de navegao ou em um site da Web:

Modificaes na aparncia grfica, como cor e tipo de trao, cor e tipo de preenchimento,
forma do traado e imagens

Efeitos ao vivo, opacidade ou modo de mistura aplicados a objetos individuais dentro do


smbolo de boto

Tamanho e posio da rea ativa Comportamento do boto principal Configuraes de otimizao e exportao Vnculo URL (tambm disponvel como uma propriedade em nvel de ocorrncia) Moldura de destino (tambm disponvel como uma propriedade em nvel de ocorrncia)

Criao de botes e menus pop-up 293

Para editar as propriedades do boto em nvel de smbolo: 1

Executar um dos seguintes procedimentos para abrir o boto no Editor de boto:

Clicar duas vezes em uma ocorrncia de boto no espao de trabalho. No painel Biblioteca, clicar duas vezes na visualizao do boto ou no cone do smbolo ao lado
do smbolo do boto.
2

Efetuar as alteraes nas caractersticas grficas do boto e clicar em Concludo. As alteraes aplicam-se a todas as ocorrncias do smbolo de boto.

Edio de propriedades em nvel de ocorrncia As propriedades em nvel de ocorrncia so editadas no Inspetor de propriedades quando se seleciona uma ocorrncia nica. As propriedades que se podem alterar para uma ocorrncia sem afetar o smbolo associado, ou nenhuma outra ocorrncia daquele smbolo, so aquelas que normalmente diferem de um boto para outro em uma srie de botes:

O nome de objeto de uma ocorrncia que aparece no painel Camadas e usado para nomear as
fatias exportadas para a ocorrncia de boto na exportao

Efeitos ao vivo, opacidade ou modo de mistura aplicados ocorrncia inteira Caracteres de texto e formatao de texto, como fonte, tamanho, orientao e cor Vnculo URL (tambm disponvel como uma propriedade em nvel de smbolo) Descrio alternativa (alt) de imagem Moldura de destino (tambm disponvel como uma propriedade em nvel de smbolo) Comportamentos adicionais atribudos a uma ocorrncia com o uso do painel Comportamentos uma barra de navegao
Nota: No Fireworks MX, no necessrio selecionar a opo Mostrar Abaixo ao carregar para cada ocorrncia de boto em uma barra de navegao. A seo Especfico do documento, na caixa de dilogo Configurao do HTML, contm uma opo denominada Exportar mltiplos arquivos. Quando o usurio seleciona essa opo e, em seguida, exporta uma barra de navegao, o Fireworks MX exporta cada pgina de HTML com o estado de boto Abaixo correspondente. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

A opo Mostrar Abaixo ao carregar, no Inspetor de propriedades, para ocorrncias dentro de

Para editar propriedades em nvel de ocorrncia de uma ocorrncia nica de smbolo de boto: 1 2

Selecionar a ocorrncia de boto no espao de trabalho. Definir as propriedades no Inspetor de propriedades.

294 Captulo 13

Configurao de propriedades de boto interativo Com o Fireworks, possvel controlar os elementos interativos de um boto, inclusive a rea ativa, URL, destino e descrio alternativa (alt) de imagem. Modificao da rea ativa de um smbolo de boto A rea ativa de um smbolo de boto aciona a interatividade quando um usurio move o ponteiro sobre ele ou o clica em um navegador da Web. A rea ativa de um boto uma propriedade em nvel de smbolo e exclusiva para smbolos de boto. Ao se criar um smbolo de boto, o Fireworks cria automaticamente uma fatia especial grande o suficiente para incluir todos os estados de um boto. possvel editar a fatia de um boto somente na guia rea ativa do Editor de boto. Cada boto pode ter somente uma fatia. Se uma fatia for desenhada com o uso de uma ferramenta de fatia na rea ativa, a fatia anterior ser substituda pela nova fatia desenhada. possvel desenhar objetos de ponto ativo na guia rea ativa, mas somente possvel edit-los no Editor de boto.
Nota: Objetos da Web que definem a rea ativa de um smbolo de boto aparecem no documento quando fatias e pontos ativos no esto ocultos, mas os objetos da Web de um boto no so listados no painel Camadas, nem podem ser editados no espao de trabalho.

Para editar uma fatia ou ponto ativo na rea ativa de um smbolo de boto: 1

Executar um dos seguintes procedimentos para abrir o smbolo de boto no Editor de boto:

Clicar duas vezes em uma ocorrncia de boto no espao de trabalho. No painel Biblioteca, clicar duas vezes na visualizao do boto ou no cone do smbolo ao lado do
smbolo do boto.
2 3

Clicar na guia rea ativa. Seguir uma das seguintes opes:

Usar a ferramenta Ponteiro para mover ou alterar a forma da fatia ou mover a guia da fatia. Usar uma das ferramentas de fatia ou ponto ativo para desenhar uma nova rea ativa.
Configurao de URL para um smbolo de boto ou ocorrncia Um URL (Uniform Resource Locator, localizador uniforme de recursos) um vnculo para outra pgina da Web, site da Web ou ncora na mesma pgina da Web. O URL pode ser uma propriedade de boto em nvel de smbolo ou ocorrncia. possvel anexar um URL a uma ocorrncia de boto selecionada no Inspetor de propriedades ou no painel URL. possvel anexar um URL a um smbolo para que o mesmo URL aparea na caixa de texto Link no Inspetor de propriedades para cada ocorrncia. Isto til ao se digitar URLs absolutos dentro de um site; basta completar a ltima parte do URL na caixa de texto Link de cada ocorrncia no Inspetor de propriedades para vincular as ocorrncias de boto.
Nota: Para mais informaes sobre URLs estticos versus relativos, consultar Sobre URLs absolutos e relativos na pgina 260.

Para definir o URL para um smbolo de boto no Editor de boto: 1

Executar um dos seguintes procedimentos para abrir o boto no Editor de boto:

Clicar duas vezes em uma ocorrncia de boto no espao de trabalho.

Criao de botes e menus pop-up 295

No painel Biblioteca, clicar duas vezes na visualizao do boto ou no cone do smbolo ao lado do
smbolo do boto.
2 3 4

No Editor de boto, clicar na guia rea ativa. Selecionar a fatia ou ponto ativo na rea ativa. Seguir uma das seguintes opes:

No Inspetor de propriedades, digitar o URL na caixa de texto Link. No painel URL, selecionar um URL.
Nota: A alterao do URL para um smbolo de boto no altera o URL para as ocorrncias de boto daquele smbolo existentes que j possuam URLs exclusivos atribudos s mesmas. Isto tambm se aplica s alteraes feitas ao destino e ao texto alternativo de um smbolo de boto.

Para definir o URL para uma ocorrncia de boto selecionada no espao de trabalho, executar um dos seguintes procedimentos:

No Inspetor de propriedades, digitar o URL na caixa de texto Link. No painel URL, selecionar um URL.
Configurao de destino para um boto Destino a janela ou moldura na qual a pgina da Web de destino aparece ao se clicar em uma ocorrncia de boto. Se o usurio no digitar um destino no Inspetor de propriedades, a pgina da Web aparecer na mesma moldura ou janela do link que a chamou. O destino por ser uma propriedade de boto em nvel de smbolo ou ocorrncia. possvel definir o destino para um smbolo de modo que todas as ocorrncias do smbolo tenham a mesma opo de destino.
Para definir o destino para um smbolo de boto no Editor de boto: 1

Executar um dos seguintes procedimentos para abrir o boto no Editor de boto:

Clicar duas vezes em uma ocorrncia de boto no espao de trabalho. No painel Biblioteca, clicar duas vezes na visualizao do boto ou no cone do smbolo ao lado do
smbolo do boto.
2

Executar um dos seguintes procedimentos no Inspetor de propriedades:


Nenhum ou _self carrega _blank carrega

No menu pop-up Destino, selecionar um destino predefinido:


a pgina da Web na mesma moldura ou janela do vnculo. a pgina da Web em uma nova janela do navegador sem ttulo.

_parent carrega a pgina da Web no conjunto principal de molduras ou na janela da moldura que contm o vnculo. _top carrega

a pgina da Web na janela inteira do navegador, removendo todas as molduras.

Na caixa de texto Destino, digitar um destino.


Nota: A alterao do destino para um smbolo de boto no altera o destino para as ocorrncias de boto daquele smbolo existentes que j possuam destinos exclusivos atribudos s mesmas. Isto tambm se aplica s alteraes feitas ao URL e ao texto alternativo de um smbolo de boto.

Para definir o destino para uma ocorrncia de boto no espao de trabalho: 1

Selecionar a ocorrncia de boto no espao de trabalho.

296 Captulo 13

No Inspetor de propriedades, executar um dos seguintes procedimentos:


Nenhum ou _self carrega _blank carrega

No menu pop-up Destino, selecionar um destino predefinido:


a pgina da Web na mesma moldura ou janela do vnculo. a pgina da Web em uma nova janela do navegador sem ttulo.

_parent carrega a pgina da Web no conjunto principal de molduras ou na janela da moldura que contm o vnculo. _top carrega

a pgina da Web na janela inteira do navegador, removendo todas as molduras.

Na caixa de texto Destino, digitar um destino.


Configurao de texto alternativo (alt) para um smbolo ou ocorrncia de boto O texto alternativo (alt) aparece no ou prximo a um marcador de lugar de imagem enquanto esta descarregada da Web ou no lugar dela caso ocorra uma falha no descarregamento. Ele tambm substitui os grficos caso o usurio tenha configurado o navegador para no exibir imagens. O texto alternativo pode ser uma propriedade de boto em nvel de smbolo ou ocorrncia. possvel definir um texto alternativo para um smbolo ou ocorrncia de boto no Inspetor de propriedades.
Nota: As aplicaes que auxiliam as pessoas portadoras de limitao visual lem o texto alternativo para grficos ou pginas da Web em um navegador. Sempre que possvel, recomendvel digitar um texto alternativo conciso e explicativo.

Para definir um texto alternativo para um smbolo de boto no Editor de boto: 1

Executar um dos seguintes procedimentos para abrir o boto no Editor de boto:

Clicar duas vezes em uma ocorrncia de boto no espao de trabalho. No painel Biblioteca, clicar duas vezes na visualizao do boto ou no cone do smbolo ao lado
do smbolo do boto.
2

No Inspetor de propriedades, digitar o texto desejado para aparecer como texto alternativo em um navegador.
Nota: A alterao do texto alternativo para um smbolo de boto no altera o texto para as ocorrncias de boto daquele smbolo existentes que j possuam textos alternativos exclusivos atribudos s mesmas. Isto tambm se aplica s alteraes feitas ao destino e ao URL de um smbolo de boto.

Para definir um texto alternativo para uma ocorrncia de boto no espao de trabalho: 1 2

Selecionar a ocorrncia de boto no espao de trabalho. Na caixa de texto Alt do Inspetor de propriedades, digitar a descrio.

Criao de barras de navegao


A barra de navegao, ou nav bar, um grupo de botes que oferece vnculos para diferentes reas de um site da Web. Ela normalmente permanece consistente em todo o site, proporcionando um mtodo de navegao constante, independentemente da localizao do usurio dentro do site. A aparncia da barra de navegao a mesma de uma pgina da Web para outra, mas em alguns casos os vnculos podem ser especficos para a funo de cada pgina. No Fireworks, o usurio elabora uma barra de navegao atravs da criao de um smbolo de boto no Editor de boto e da colocao das ocorrncias daquele smbolo no espao de trabalho.

Criao de botes e menus pop-up 297

Para criar uma barra de navegao bsica: 1 2 3

Criar um smbolo de boto. Para mais informaes, consultar Criao de um smbolo de boto na pgina 287. Arrastar (copiar) uma ocorrncia do smbolo do painel Biblioteca para o espao de trabalho. Executar um dos seguintes procedimentos para fazer uma cpia da ocorrncia de boto:

Selecionar a ocorrncia de boto e selecionar Editar > Clonar. Pressionar Alt e arrastar (Windows) ou pressionar Opo e arrastar (Macintosh) a ocorrncia de
boto. Cria-se uma cpia da ocorrncia de boto.
4

Manter a tecla Shift pressionada medida que se pressiona uma tecla de direo repetidamente para posicionar o boto clonado. Para um controle mais preciso, usar as teclas de direo sem pressionar Shift. Repetir as etapas 3 e 4 para criar ocorrncias de boto adicionais. Selecionar cada ocorrncia e atribuir mesma um texto, URL e outras propriedades exclusivas com o uso do Inspetor de propriedades.

5 6

Criao de menus pop-up


Menus pop-up so menus que se exibem em um navegador em resposta a um movimento do ponteiro sobre, ou um clique do mouse em, um objeto acionador da Web, como uma fatia ou ponto ativo. Os itens de menus pop-up podem ter vnculos de URL anexados aos mesmos para navegao. Por exemplo, possvel usar menus pop-up para organizar vrias opes de navegao relacionadas a um boto em uma barra de navegao. possvel criar submenus em menus popup para tantos nveis quanto desejados. Cada item de menu pop-up aparece como uma clula de HTML ou imagem com um estado Acima, um estado Sobre e texto em ambos os estados. Para visualizar um menu pop-up em um navegador, necessrio pressionar F12. A guia Visualizao, no espao de trabalho do Fireworks MX, no exibe menus pop-up. Sobre o Editor de menu pop-up O Editor de menu pop-up uma caixa de dilogo com guias que orienta o usurio no processo de criao de um menu pop-up. Suas vrias opes para o controle das caractersticas de um menu pop-up so organizadas em quatro guias:
Contedo contm

as opes que determinam a estrutura bsica do menu, bem como o texto, vnculo de URL e destino para cada item do menu. opes que determinam a aparncia dos estados Acima e Sobre de cada clula do menu, bem como a orientao, vertical ou horizontal, do menu.

Aparncia contm

Avanada contm opes que determinam a dimenso, preenchimento e espaamento das clulas, a largura e a cor da borda das clulas, a espera do menu e o recuo do texto. Posio contm

opes que determinam o posicionamento do menu e submenus:

A configurao do menu posiciona o menu pop-up em relao fatia. As posies predefinidas


incluem: no fundo, no canto inferior direito, no topo e no canto superior direito de uma fatia.

298 Captulo 13

A configurao do submenu posiciona o submenu pop-up direita ou canto inferior direito do


menu principal, ou abaixo dele.

Dependendo do design do menu pop-up, nem todas as guias ou opes podero ser usadas no Editor de menu pop-up. possvel editar configuraes em qualquer guia e a qualquer momento, mas ser necessrio adicionar pelo menos um item de menu na guia Contedo para criar um menu que possa ser visualizado em um navegador. Criao de um menu pop-up bsico A guia Contedo, do Editor de menu pop-up, o local no qual se determinam a estrutura e o contedo bsicos do menu pop-up. As configuraes atuais ou padro das opes nas outras guias do Editor de menu pop-up aplicam-se ao menu ao cri-lo.
Para criar um menu pop-up simples: 1 2

Selecionar um ponto ativo ou fatia que ser a rea acionadora para o menu pop-up. Executar um dos seguintes procedimentos para abrir o Editor de menu pop-up:

Selecionar Modificar > Menu pop-up > Adicionar menu pop-up. Clicar na ala de comportamento no centro da fatia e selecionar Adicionar menu pop-up.
3 4

Clicar na guia Contedo. Clicar no boto Adicionar menu para adicionar um item de menu vazio. possvel adicionar e excluir clulas a qualquer momento.

Criao de botes e menus pop-up 299

Clicar duas vezes em cada clula e digitar ou selecionar a informao apropriada:


Texto especifica Link determina

o texto para o item de menu.

o URL do item de menu. possvel digitar um vnculo personalizado ou selecionar um no menu pop-up Link, caso haja algum disponvel. Se forem inseridos URLs para outros objetos da Web no documento, esses URLs sero listados no menu pop-up Link.

Destino designa o destino para o URL. possvel digitar um destino personalizado ou selecionar um existente no menu pop-up Destino.

A digitao do contedo no ltimo campo da janela adicionar automaticamente uma linha vazia abaixo dele.
Dica: Para navegar de uma clula ativa para outra e continuar a inserir informaes, pressionar a tecla Tab para se movimentar entre as clulas e as teclas Seta para cima e Seta para baixo para rolar verticalmente atravs da lista.

6 7 8

Repetir as etapas 4 e 5 at adicionar todos os itens de menu. Opcionalmente, para se excluir um item de menu, real-lo e clicar no boto Excluir menu. Seguir uma das seguintes opes: construo do menu pop-up.

Clicar em Prximo para ir para a guia Aparncia ou selecionar outra guia para continuar a Criar entradas de submenu para o menu pop-up. Para mais informaes, consultar Criao de
submenus dentro de um menu pop-up na pgina 300.

Clicar em Concludo para completar o menu pop-up e fechar o Editor de menu pop-up.
No espao de trabalho, o ponto ativo ou fatia no qual o menu pop-up foi construdo exibe uma linha azul de comportamento anexada a um contorno do nvel superior do menu pop-up.
Nota: Para exibir um menu pop-up, necessrio pressionar F12 para visualiz-lo em um navegador. A guia Visualizao, no espao de trabalho do Fireworks MX, no exibe menus pop-up.

Criao de submenus dentro de um menu pop-up Com o uso dos botes Recuar menu e Recuar menu para fora, na guia Contedo do Editor de menu pop-up, possvel criar submenus, que so menus pop-up que aparecem quando o ponteiro se move sobre ou se clica em outro item do menu pop-up. possvel criar tantos nveis de submenus quanto desejados.
Para criar um submenu pop-up: 1

No Editor de menu pop-up, abrir a guia Contedo e criar itens de menu. Criar os itens de menu que se deseja usar para o submenu e coloc-los diretamente sob o item de menu para o qual eles sero um submenu. Para mais informaes, consultar Criao de um menu pop-up bsico na pgina 299. Clicar para realar um item de menu pop-up que se deseja transformar em um item de submenu. Clicar no boto Recuar menu para designar o item como um item de submenu do item diretamente acima dele na lista de itens de menu. Para adicionar o prximo item ao submenu, real-lo e clicar em Recuar menu. Todos os itens recuados contiguamente no mesmo nvel constituem um submenu pop-up simples. Opcionalmente, realar um item de menu ou submenu e clicar em Adicionar menu para inserir um novo item imediatamente abaixo do item realado.

2 3 4

300 Captulo 13

Executar uma das seguintes opes: construo do menu pop-up.

Clicar em Prximo para ir para a prxima guia ou selecionar outra guia para continuar a Clicar em Concludo para fechar o Editor de menu pop-up.
Para criar um submenu pop-up dentro de um submenu pop-up: 1 2

Na guia Contedo do Editor de menu pop-up, realar um item de submenu. Para mais informaes, consultar o procedimento anterior. Clicar no boto Recuar menu para recu-lo novamente, para que fique recuado em relao ao item de submenu imediatamente acima dele. possvel continuar o recuo para criar submenus dentro de submenus para tantos nveis quanto desejados.

Para mover um item de menu para um submenu de nvel mais alto ou para dentro do menu pop-up principal: 1 2

Na guia Contedo do Editor de menu pop-up, realar o item de menu. Clicar no boto Recuar o menu para fora. Para mais informaes sobre como posicionar submenus, consultar Posicionamento de menus e submenus pop-up na pgina 306.

Executar um dos seguintes procedimentos para completar o menu pop-up ou continuar a constru-lo: construo do menu pop-up.

Clicar em Prximo para ir para a guia Aparncia ou selecionar outra guia para continuar a Clicar em Concludo para fechar o Editor de menu pop-up.
No espao de trabalho, o ponto ativo ou fatia no qual o menu pop-up foi construdo exibe uma linha azul de comportamento anexada a um contorno do nvel superior do menu pop-up.
Nota: Para exibir um menu pop-up, necessrio pressionar F12 para visualiz-lo em um navegador. A guia Visualizao, no espao de trabalho do Fireworks MX, no exibe menus pop-up.

Criao de botes e menus pop-up 301

Criao da aparncia de um menu pop-up Depois de criar um menu bsico e submenus opcionais, possvel formatar o texto, aplicar estilos grficos aos estados Sobre e Acima, e selecionar a orientao, vertical ou horizontal, na guia Aparncia do Editor de menu pop-up.

Para definir a orientao de um menu pop-up: 1

Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparncia. Para mais informaes sobre como abrir um menu pop-up existente no Editor de menu popup, consultar Edio de menus pop-up na pgina 307.

Selecionar Menu vertical ou Menu horizontal no menu pop-up.

Para definir se o menu pop-up baseado em HTML ou imagem: 1

Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparncia. Para mais informaes sobre como abrir um menu pop-up existente no Editor de menu popup, consultar Edio de menus pop-up na pgina 307.

Selecionar uma opo em Clulas:


HTML define

a aparncia do menu somente com o uso de cdigo HTML. Esta definio produz pginas com tamanhos de arquivo menores.

Imagem oferece uma seleo de estilos de imagem grfica para uso como o fundo das clulas. Esta definio produz pginas com tamanhos de arquivo maiores.
Nota: possvel adicionar estilos de menu pop-up personalizados a esta seleo. Para mais informaes, consultar Adio de estilos de menu pop-up na pgina 303.

302 Captulo 13

Para formatar o texto no menu pop-up atual: 1

Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparncia. Para mais informaes sobre como abrir um menu pop-up existente no Editor de menu popup, consultar Edio de menus pop-up na pgina 307.

Selecionar um tamanho predefinido no menu pop-up Tamanho ou digitar um valor na caixa de texto Tamanho.
Nota: Quando a largura e a altura das clulas so definidas em Automtica na guia Avanada do Editor de menu pop-up, o tamanho do texto determina o tamanho dos grficos associados ao item de menu.

Selecionar um grupo de fontes do sistema no menu pop-up Fonte ou digitar o nome de uma fonte personalizada.
Nota: Tomar cuidado ao selecionar uma fonte. Se os usurios que visualizarem a pgina da Web no tiverem a fonte selecionada instalada em seus sistemas, uma fonte de substituio ser exibida nos respectivos navegadores da Web.

4 5 6

Opcionalmente, clicar em um boto de estilo de texto para aplicar um estilo negrito ou itlico. Clicar em um boto de justificao para alinhar o texto esquerda ou direita, ou para centraliz-lo. Na caixa Texto, selecionar uma cor para o texto.

Para definir a aparncia das clulas do menu: 1

Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparncia. Para mais informaes sobre como abrir um menu pop-up existente no Editor de menu popup, consultar Edio de menus pop-up na pgina 307.

2 3 4

Selecionar as cores do texto e das clulas para cada estado. Se Imagem for selecionado como o tipo das clulas, selecionar um estilo grfico para cada estado. Seguir uma das seguintes opes: construo do menu pop-up.

Clicar em Prximo para ir para a guia Avanada ou selecionar outra guia para continuar a Clicar em Concludo para fechar o Editor de menu pop-up.
No espao de trabalho, o ponto ativo ou fatia no qual o menu pop-up foi construdo exibe uma linha azul de comportamento anexada a um contorno do nvel superior do menu pop-up.
Nota: Para exibir um menu pop-up, necessrio pressionar F12 para visualiz-lo em um navegador. A guia Visualizao, no espao de trabalho do Fireworks MX, no exibe menus pop-up.

Adio de estilos de menu pop-up possvel adicionar estilos de clulas personalizados ao Editor de menu pop-up. Estilos de clulas personalizados esto disponveis, junto com as selees predefinidas na guia Aparncia, quando o usurio seleciona a opo Imagem como o tipo das clulas, a qual define o uso de fundos grficos nas clulas dos menus pop-up.
Para adicionar um estilo de clula personalizado s opes de estilos de clula na guia Aparncia do Editor de menu pop-up: 1

Aplicar qualquer combinao de traado, preenchimento, textura e Efeitos ao vivo a um objeto e salv-lo como um estilo usando o painel Estilos. Para mais informaes, consultar Criao e excluso de um estilo na pgina 250.

Criao de botes e menus pop-up 303

2 3

Selecionar o novo estilo no painel Estilos e, em seguida, selecionar Exportar estilos no menu de opes do painel Estilos. Navegar at a pasta Nav Menu no disco rgido, renomear o arquivo de estilo, caso desejado, e clicar em Salvar.
Nota: A localizao exata da pasta Nav Menu varia em funo do sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

Ao retornar guia Aparncia do Editor de menu pop-up e selecionar a opo de fundo de clulas Imagem, o novo estilo estar disponvel junto com os estilos predefinidos das clulas dos menus pop-up para os estados Acima e Sobre. Configurao de propriedades avanadas de menus pop-up A guia Avanada, do Editor de menu pop-up, oferece configuraes adicionais para o controle do tamanho, preenchimento e espaamento das clulas, recuo do texto, tempo de espera para o desaparecimento do menu e da largura, cor, sombra e realce das bordas das clulas.

Para definir propriedades avanadas de clulas para o menu pop-up atual: 1

Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Avanada. Para mais informaes sobre como abrir um menu pop-up existente no Editor de menu popup, consultar Edio de menus pop-up na pgina 307.

304 Captulo 13

No menu pop-up Automtica/Fixa, selecionar um limite de largura ou altura:


Automtica fora a altura da clula a se ajustar ao tamanho do texto definido na guia Aparncia

do Editor de menu pop-up e a largura da clula a se ajustar ao item de menu que contm o texto mais longo.
Pixels permite 3 4 5 6 7

digitar medidas especficas em pixels nas caixas de texto Largura da clula e Altura da clula.

Na caixa de texto Preenchimento da clula, digitar um valor para determinar a distncia entre o texto do menu pop-up e a borda da clula. Na caixa de texto Espaamento entre as clulas, digitar um valor para definir a quantidade de espao entre as clulas do menu. Na caixa de texto Recuo do texto, digitar um valor para definir a quantidade de recuo para o texto do menu pop-up. Na caixa de texto Espera do menu, digitar um valor para definir a quantidade de tempo em segundos em que o menu permanece visvel aps a passagem do ponteiro sobre o mesmo. Definir as propriedades das bordas do menu pop-up:
Mostrar bordas permite

mostrar ou ocultar as bordas do menu pop-up. Se esta opo no estiver selecionada, as opes a seguir sero desativadas. a largura da borda do menu pop-up. modificar a cor das bordas do menu pop-up.

Largura da borda ajusta

Cor, sombra e realce da borda permite

Nota: Muitas dessas opes sero desativadas se o tipo de clula Imagem estiver selecionado na guia Aparncia.

Executar um dos seguintes procedimentos para completar o menu pop-up ou continuar a constru-lo: construo do menu pop-up.

Clicar em Prximo para ir para a guia Posio ou selecionar outra guia para continuar a Clicar em Concludo para fechar o Editor de menu pop-up. No espao de trabalho, o ponto
ativo ou fatia no qual o menu pop-up foi construdo exibe uma linha azul de comportamento anexada a um contorno do nvel superior do menu pop-up.
Nota: Para exibir um menu pop-up, necessrio pressionar F12 para visualiz-lo em um navegador. A guia Visualizao, no espao de trabalho do Fireworks MX, no exibe menus pop-up.

Criao de botes e menus pop-up 305

Posicionamento de menus e submenus pop-up A guia Posio, do Editor de menu pop-up, permite especificar a posio de um menu pop-up. Tambm possvel posicionar um menu pop-up de nvel superior arrastando seu contorno no espao de trabalho quando a Camada da Web est visvel.

Para definir a posio de um menu pop-up com o uso do Editor de menu pop-up: 1

Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Posio. Para mais informaes sobre como abrir um menu pop-up existente no Editor de menu popup, consultar Edio de menus pop-up na pgina 307.

Executar um dos seguintes procedimentos para definir a posio do menu:

Clicar em um boto Posio para posicionar o menu pop-up em relao fatia que o aciona. Digitar as coordenadas X e Y. As coordenadas 0,0 alinham o canto superior esquerdo do menu
pop-up ao canto superior esquerdo da fatia que o aciona.
3

Seguir uma das seguintes opes:

Se houver submenus, posicion-los como descrito no prximo procedimento. Clicar em Voltar para modificar as propriedades em outras guias. Clicar em Concludo para fechar o Editor de menu pop-up.
Para definir a posio de um submenu pop-up com o uso do Editor de menu pop-up: 1

Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Posio. Para mais informaes sobre como abrir um menu pop-up existente no Editor de menu popup, consultar Edio de menus pop-up na pgina 307.

306 Captulo 13

Executar um dos seguintes procedimentos para definir a posio do submenu: menu pop-up que o aciona.

Clicar em um boto Posio do submenu para posicionar o submenu em relao ao item de Digitar as coordenadas X e Y. As coordenadas 0,0 alinham o canto superior esquerdo do
submenu pop-up ao canto superior direito do menu ou item de menu que o aciona.
3

Seguir uma das seguintes opes: selecionar a opo Colocar na mesma posio para a posio do submenu.

Para tornar a posio de cada submenu relativa ao item de menu principal que o aciona, Para tornar a posio de cada submenu relativa ao menu pop-up inteiro, cancelar a seleo da
opo Colocar na mesma posio.
4

Clicar em Concludo para fechar o Editor de menu pop-up ou em Voltar para modificar as propriedades em outras guias.

Para definir a posio de um menu pop-up arrastando-o: 1

Se necessrio, seguir um dos procedimentos a seguir para exibir a Camada da Web:

No painel Ferramentas, clicar no boto Mostrar fatias e pontos ativos. No painel Camadas, clicar na coluna com um olho.
2 3

Selecionar o objeto da Web que o acionador do menu pop-up. Arrastar o contorno do menu pop-up para outro local no espao de trabalho.

Edio de menus pop-up No Editor de menu pop-up, possvel editar ou atualizar o contedo de um menu pop-up, reordenar os itens de menu ou alterar outras propriedades em quaisquer das quatro guias.
Para editar um menu pop-up no Editor de menu pop-up: 1

Se necessrio, seguir um dos procedimentos a seguir para exibir a Camada da Web:

No painel Ferramentas, clicar no boto Mostrar fatias e pontos ativos. No painel Camadas, clicar na coluna com um olho.
2 3

Selecionar a fatia qual est anexado o menu pop-up. Clicar duas vezes no contorno azul do menu pop-up no espao de trabalho. O Editor de menu pop-up se abre, exibindo as entradas do menu pop-up. Efetuar as modificaes desejadas em uma das quatro guias e clicar em Concludo.

Para alterar uma entrada de um menu pop-up: 1 2 3 4

Com o menu pop-up desejado sendo exibido no Editor de menu pop-up, clicar na guia Contedo. Clicar duas vezes nas caixas de texto Texto, Link ou Destino e editar o texto do menu. Clicar fora da lista de entradas para aplicar a alterao. Clicar em Concludo.

Criao de botes e menus pop-up 307

Para mover uma entrada no menu pop-up: 1 2 3

Com o menu pop-up desejado sendo exibido no Editor de menu pop-up, clicar na guia Contedo. Arrastar o item de menu para um novo local na lista. Clicar em Concludo.

Sobre exportao de menus pop-up O Fireworks gera todo o JavaScript necessrio para exibir menus pop-up em navegadores da Web. Ao exportar um documento do Fireworks contendo menus pop-up para HTML, um arquivo JavaScript denominado mm_menu.js exportado para o mesmo local do arquivo HTML. Ao carregar os arquivos, ser necessrio carregar mm_menu.js no mesmo local do diretrio da pgina da Web que contm o menu pop-up. Se o usurio desejar enviar o arquivo a um local diferente, ser necessrio atualizar o hiperlink que faz referncia a mm_menu.js no cdigo HTML do Fireworks, para que reflita o local personalizado. Se o documento contiver vrios menus popup ou se houver vrios documentos com menus pop-up, o Fireworks no criar arquivos mm_menu.js adicionais; somente um nico arquivo ser usado para todos os menus em todos os documentos. Ao incluir submenus, o Fireworks gera um arquivo de imagem denominado arrows.gif. Essa imagem a seta fina que aparece prximo da entrada de um menu, a qual indica aos usurios a existncia de um submenu. Independentemente da quantidade de submenus em um documento, o Fireworks sempre usa o mesmo arquivo arrows.gif. Para mais informaes sobre como exportar HTML e JavaScript, consultar Exportao de HTML na pgina 352.

308 Captulo 13

CAPTULO 14 Criao de animao

Grficos animados proporcionam um visual sofisticado e emocionante a um site da Web. No Macromedia Fireworks MX, possvel criar grficos animados com faixas de propaganda, logotipos e desenhos animados. Por exemplo, possvel fazer o mascote da companhia danar atravs de uma pgina enquanto o logotipo clareia e escurece. Uma maneira de se construir animaes no Fireworks atravs da criao de smbolos e da alterao de suas propriedades ao longo do tempo, para criar a iluso de movimento. Um smbolo como um ator cuja coreografia criada pelo usurio. A ao de cada smbolo armazenada em uma moldura. Quando todas as molduras juntas so reproduzidas em uma seqncia, obtm-se a animao. possvel aplicar configuraes diferentes ao smbolo para alterar gradualmente o contedo das molduras sucessivas. possvel fazer com que um smbolo parea se mover atravs da tela, clareie e escurea, fique maior ou menor, ou gire. Como possvel ter vrios smbolos em um nico arquivo, possvel criar uma animao complexa onde tipos diferentes de ao ocorrem todas de uma vez. O painel Otimizar permite definir configuraes de otimizao e exportao para controlar a forma de criao do arquivo. O Fireworks pode exportar animaes como arquivos GIF animado ou Flash SWF. Tambm possvel importar animaes do Fireworks diretamente no Macromedia Flash para edio adicional.

Como construir uma animao


No Fireworks, possvel criar animaes atribuindo-se propriedades a objetos denominados smbolos de animao. A animao de um smbolo dividida em molduras que contm as imagens e objetos que compem cada etapa da animao. possvel ter mais de um smbolo em uma animao, e cada smbolo pode ter uma ao diferente. Smbolos diferentes podem conter nmeros diferentes de molduras. A animao termina quando toda a ao de todos os smbolos se conclui.
Para construir uma animao com o uso de smbolos de animao no Fireworks: 1

Criar um smbolo de animao atravs da criao do smbolo do zero ou da converso de um objeto existente em um smbolo. Para mais informaes, consultar Criao de um smbolo de animao na pgina 310. Usar o Inspetor de propriedades ou a caixa de dilogo Animar para inserir configuraes para o smbolo de animao. possvel definir o grau e a direo do movimento, o dimensionamento, a opacidade (clarear ou escurecer), bem como o ngulo e a direo de rotao. Para mais informaes, consultar Edio de um smbolo de animao na pgina 311.
Nota: O grau e a direo das opes de movimento encontram-se somente na caixa de dilogo Animar.

309

Usar os controles Retardo de moldura no painel Molduras para definir a velocidade do movimento da animao. Para mais informaes, consultar Configurao do retardo de uma moldura na pgina 314. Otimizar o documento como um GIF animado. Para mais informaes, consultar Otimizao de uma animao na pgina 321. Exportar o documento como um GIF ou SWF animado, ou salv-lo como um PNG Fireworks e import-lo no Macromedia Flash para edio posterior. Para mais informaes, consultar Formatos de exportao de uma animao na pgina 322.

4 5

Como trabalhar com um smbolo de animao


Os smbolos de animao executam aes no arquivo Fireworks como os atores em um filme. Por exemplo, em uma animao com trs gansos voando no cu, cada ganso um membro do elenco. Um smbolo de animao pode ser qualquer objeto criado ou importado, e possvel ter vrios smbolos em um arquivo. Cada smbolo tem suas prprias propriedades e apresenta uma animao independentemente. Desta forma, possvel criar smbolos que se movem atravs da tela enquanto outros se apagam ou encolhem. No necessrio usar smbolos para cada aspecto da animao. Porm, o uso de smbolos e ocorrncias para grficos que aparecem em mltiplas molduras manter o tamanho do arquivo de animao menor, alm das vantagens discutidas neste captulo. possvel alterar as propriedades do smbolo de animao a qualquer momento com o uso da caixa de dilogo Animar ou do Inspetor de propriedades. Tambm possvel editar a imagem do smbolo no Editor de smbolo. O Editor de smbolo permite editar o smbolo sem afetar o resto do documento. Tambm possvel alterar o movimento do smbolo alterando seu percurso de movimento. Como os smbolos de animao so colocados automaticamente na biblioteca, possvel reutilizlos para criar outras animaes. Criao de um smbolo de animao Depois de criar um smbolo de animao, possvel definir as propriedades que determinam o nmero de molduras na animao e o tipo de ao, como dimensionamento e rotao. Por padro, o novo smbolo de animao tem cinco molduras, cada uma com um tempo de retardo de 0,07 segundo.
Para criar um smbolo de animao: 1 2 3 4

Selecionar Editar > Inserir > Novo smbolo. Na caixa de dilogo Propriedades do smbolo, digitar um nome para o novo smbolo. Selecionar Animao e clicar em OK. No Editor de smbolo, usar as ferramentas de desenho ou texto para criar um novo objeto. possvel desenhar objetos vetoriais ou de bitmap. Fechar a janela do Editor de smbolo. O Fireworks coloca o smbolo na biblioteca e uma cpia no centro do documento.

possvel adicionar novas molduras ao smbolo com o uso do controle deslizante Molduras no Inspetor de propriedades. Selecionar Janela > Propriedades para abrir o Inspetor de propriedades, caso no esteja j aberto.

310 Captulo 14

Para converter um objeto em um smbolo de animao: 1 2 3

Selecionar o objeto. Selecionar Modificar > Animao > Animar seleo. Inserir as configuraes desejadas na caixa de dilogo. Para mais informaes sobre essas configuraes e como personaliz-las, consultar Edio de um smbolo de animao na pgina 311. Os controles de animao aparecem na caixa de limites do objeto e uma cpia adicionada biblioteca.

Edio de um smbolo de animao possvel manipular as propriedades de smbolos de animao para dar vida a um site da Web. possvel alterar uma srie de propriedades em um smbolo, da velocidade de animao opacidade e rotao. Ao manipular essas caractersticas, possvel fazer com que um smbolo parea rodar, aumentar a velocidade, escurecer e clarear, ou qualquer combinao dos efeitos acima. Uma propriedade chave para qualquer smbolo de animao o seu nmero de molduras. Essa propriedade define quantos passos so necessrios para que o smbolo complete sua animao. Ao definir o nmero de molduras para um smbolo, o Fireworks adiciona automaticamente o nmero necessrio de molduras ao documento para completar a ao. Se o smbolo exigir mais molduras do que as existentes atualmente na animao, o Fireworks adicionar mais molduras. Alterao de uma propriedade de animao possvel alterar as propriedades da animao com o uso da caixa de dilogo Animar ou do Inspetor de propriedades.

Propriedades de smbolo de animao no Inspetor de propriedades possvel editar quaisquer das seguintes propriedades de um smbolo de animao:
Molduras

o nmero de molduras que se deseja incluir na animao. Embora o controle deslizante permita definir apenas um mximo de 250 molduras, possvel inserir qualquer nmero desejado na caixa de texto Molduras. O padro 5.

Movimento a distncia desejada, em pixels, para a movimentao de cada objeto. Esta opo est disponvel somente na caixa de dilogo Animar. A faixa de valores vai de 0 a 250 pixels e o padro 72. O movimento linear e no h quadros-chave (como no Macromedia Flash e Director). Direo a direo, em graus, na qual se deseja que o objeto se mova. A faixa de valores vai de 0 a 360 graus. Esta opo est disponvel somente na caixa de dilogo Animar.

Tambm possvel alterar os valores de Movimento e Direo arrastando-se as alas do objeto de animao (consultar Edio de caminhos de movimento de smbolo na pgina 313).

Criao de animao 311

Dimensionamento a porcentagem de alterao do tamanho do incio ao fim. A faixa de valores vai de 0 a 250 e o padro 100%. Para dimensionar um objeto de 0 a 100%, o objeto original deve ser muito pequeno; recomendam-se os objetos vetoriais. Opacidade o grau de escurecimento ou clareamento do incio ao fim. A faixa de valores vai de 0 a 100 e o padro 100%. A criao de um clareamento/escurecimento exige duas ocorrncias do mesmo smbolo, uma para executar o clareamento e outra para executar o escurecimento. Rotao a quantidade, em graus, que o smbolo gira do incio ao fim. A faixa de valores vai de 0 a 360 graus. possvel inserir valores maiores para mais de uma rotao. O padro 0 grau. SH e SAH indica

a direo na qual o objeto gira. SH indica rotao em sentido horrio e SAH indica rotao em sentido anti-horrio.

Para alterar as propriedades de um smbolo de animao: 1 2

Selecionar um smbolo de animao. Selecionar Modificar > Animao > Configuraes para abrir a caixa de dilogo Animar ou Janela > Propriedades para abrir o Inspetor de propriedades caso este no esteja j aberto.

Alterar as propriedades desejadas.

Remoo de uma animao possvel remover animaes atravs da excluso do smbolo de animao da biblioteca ou da remoo da animao do smbolo.
Para remover um smbolo da biblioteca: 1 2

No painel Biblioteca, selecionar o smbolo de animao que se deseja remover. Arrastar o smbolo para o cone de lixeira no canto inferior direito.

Para remover a animao de um smbolo de animao selecionado:

Selecionar Modificar > Animao > Remover animao. O smbolo se transforma em um smbolo grfico e no mais animado. Posteriormente, se o smbolo for convertido outra vez em um smbolo de animao, as configuraes anteriores da animao retornaro.

312 Captulo 14

Edio do grfico de um smbolo possvel alterar o grfico em que se baseia o smbolo, bem como suas propriedades. possvel editar grficos de smbolos no Editor de smbolo. O Editor de smbolo permite usar as ferramentas de desenho, texto ou cor para editar o grfico. Enquanto o usurio trabalha no Editor de smbolo, somente o smbolo selecionado afetado. Como o smbolo um item da biblioteca, se a aparncia de uma de suas ocorrncias for alterada, todas as demais ocorrncias tambm sero alteradas.
Para alterar os atributos grficos de um smbolo selecionado: 1

Executar um dos seguintes procedimentos para abrir o Editor de smbolo:

Clicar duas vezes no objeto de smbolo. Selecionar Modificar > Smbolo > Editar smbolo. Na caixa de dilogo Animar, clicar no boto Editar.
2 3

Modificar o smbolo de animao e alterar qualquer texto, traos, preenchimentos e efeitos, como for apropriado. Fechar o Editor de smbolo.

Edio de caminhos de movimento de smbolo Ao selecionar um smbolo de animao, ele apresenta uma caixa de limites exclusiva e um caminho de movimento anexado que indica a direo na qual o smbolo se move. O ponto verde no caminho do movimento indica o ponto de incio, enquanto o ponto vermelho mostra o ponto final. Os pontos azuis no caminho representam as molduras. Por exemplo, um smbolo com cinco molduras ter um ponto verde, trs pontos azuis e um ponto vermelho em seu caminho. A posio do objeto no caminho indica a moldura atual. Assim, se o objeto aparecer no terceiro ponto, a Moldura 3 ser a moldura atual. possvel alterar a direo do movimento alterando o ngulo do do traado.

Para alterar o movimento ou direo:

Arrastar uma das alas de incio ou final de animao do smbolo para uma nova localizao. O ponto verde indica o ponto de incio; o ponto vermelho indica o ponto final. Manter pressionada a tecla Shift e arrastar para restringir a direo do movimento em incrementos de 45 graus.

Criao de animao 313

Como trabalhar com uma moldura


As animaes so construdas com a criao de vrias molduras. possvel ver o contedo de cada moldura usando-se o painel Molduras. O painel Molduras o local de criao e organizao de molduras. possvel nomear as molduras, reorganiz-las, definir manualmente a durao da animao e mover objetos de uma moldura para outra.
Coluna onion skinning

Nome da moldura Coluna Retardo de moldura

Opes de tcnica onion skin

Exclui moldura Moldura nova/duplicada Distribui para molduras

Cada moldura tambm tem um nmero de propriedades associadas. Ao definir o retardo de uma moldura ou escond-la, possvel fazer com que sua animao fique com a aparncia desejada durante o processo de construo e edio. Configurao do retardo de uma moldura O retardo de moldura determina a durao de exibio da moldura atual. O retardo especificado em centsimos de segundo. Por exemplo, uma configurao de 50 exibe a moldura por meio segundo, enquanto uma configurao de 300 a exibe por trs segundos.
Para definir o valor de retardo de uma moldura: 1

Selecionar uma ou mais molduras: primeira e da ltima molduras.

Para selecionar uma faixa contgua de molduras, pressionar a tecla Shift e clicar nos nomes da Para selecionar uma faixa de molduras no contguas, manter pressionada a tecla Control
(Windows) ou Comando (Macintosh) e clicar no nome de cada moldura.
2

Seguir uma das seguintes opes:

No menu de opes do painel Molduras, selecionar Propriedades. Clicar duas vezes na coluna de retardo da moldura.
Aparece a janela pop-up Propriedades da moldura.
3 4

Digitar um valor para o retardo da moldura. Pressionar Enter ou clicar fora do painel para fechar a janela pop-up.

314 Captulo 14

Como mostrar e ocultar molduras para reproduo possvel mostrar ou ocultar molduras para a reproduo. Se uma moldura estiver oculta, no ser exibida durante a reproduo e no ser exportada.
Para mostrar ou ocultar uma moldura: 1

Seguir uma das seguintes opes:

No menu de opes do painel Molduras, selecionar Propriedades. Clicar duas vezes na coluna de retardo da moldura.
Aparece a janela pop-up Propriedades da moldura.
2

Cancelar a seleo de Incluir ao exportar. Exibe-se um X vermelho no lugar do tempo de retardo da moldura.

Pressionar Enter ou clicar fora da janela pop-up Propriedades da moldura para fech-la.

Nomeao de molduras de animao medida que o usurio configura uma animao, o Fireworks cria o nmero de molduras apropriado e as exibe no painel Molduras. As molduras so nomeadas com o padro Moldura 1, Moldura 2 e assim por diante. Ao mover uma moldura no painel, o Fireworks renomeia todas elas para refletir a nova ordem. uma boa idia nomear as molduras para uma referncia fcil e para poder acompanh-las. Desta forma, o usurio sempre saber qual moldura contm uma parte da animao. Ao renomear uma moldura e depois mov-la, seu nome no se altera.

Para alterar o nome de uma moldura: 1 2

No painel Molduras, clicar duas vezes no nome da moldura. Na caixa de texto pop-up, digitar um novo nome e pressionar Enter.

Criao de animao 315

Como adicionar, mover, copiar e excluir molduras possvel adicionar, copiar, excluir e alterar a ordem de molduras no painel Molduras.
Para adicionar uma nova moldura:

Na base do painel Molduras, clicar no boto Novo/Duplicar moldura.


Para adicionar molduras a um local especfico na seqncia: 1 2 3

No menu de opes do painel Molduras, selecionar Adicionar molduras. Digitar o nmero de molduras a adicionar. Selecionar onde inserir as molduras: antes da moldura atual, depois dela, no incio ou no final. Em seguida, clicar em OK.

Para fazer uma cpia de uma moldura:

Arrastar uma moldura existente at o boto Moldura nova/duplicada na base do painel Molduras.
Para copiar uma moldura selecionada e coloc-la em uma seqncia: 1 2

No menu de opes do painel Molduras, selecionar Duplicar moldura. Digitar o nmero de duplicatas a criar para a moldura selecionada e escolher onde as molduras duplicadas sero inseridas e, em seguida, clicar em OK. A duplicao de uma moldura til quando se deseja que os objetos reapaream em outra parte da animao.

Para reordenar molduras:

Arrastar as molduras, uma a uma, para uma nova localizao na lista.


Para excluir a moldura selecionada, executar um dos seguintes procedimentos:

No painel Molduras, clicar no boto Excluir moldura. Arrastar a moldura at o boto Excluir moldura. No menu de opes do painel Molduras, selecionar Excluir moldura.
Como mover objetos selecionados no painel Molduras possvel usar o painel Molduras para mover objetos para uma moldura diferente. Os objetos que aparecem somente em uma nica moldura parecem desaparecer medida em que se executa a animao. possvel mover objetos para faz-los aparecer ou desaparecer em pontos diferentes do filme.

316 Captulo 14

Para mover um objeto selecionado para uma moldura diferente:

No painel Molduras, arrastar o indicador de seleo (o pequeno quadrado azul), direita do tempo de retardo da moldura, para a nova moldura.

Compartilhamento de camadas atravs de molduras As camadas dividem um documento do Fireworks em planos individuais, como camadas separadas de papel vegetal. Com animaes, possvel usar camadas para organizar objetos que faam parte do cenrio ou do pano de fundo da animao. Isto oferece a comodidade de poder fixar objetos em uma camada para que no afetem o resto de uma animao. Para mais informaes, consultar Como trabalhar com uma camada na pgina 221. Se o usurio desejar que os objetos apaream em toda a animao, ser possvel coloc-las em uma camada e, em seguida, usar o painel Camadas para compartilh-la entre as molduras. Quando uma camada for compartilhada entre as molduras, todos os objetos naquela camada sero visveis em cada moldura. possvel editar objetos em camadas compartilhadas em qualquer moldura; estas edies refletem-se em todas as outras molduras.

Neste exemplo, a camada quadrada vermelha compartilhada pelas molduras.


Para compartilhar uma camada entre molduras: 1 2

Clicar duas vezes na camada. Selecionar Compartilhar entre molduras.


Nota: O contedo de uma camada compartilhada inteira aparece em cada moldura.

Para desativar o compartilhamento de uma determinada camada entre molduras: 1 2

Clicar duas vezes na camada compartilhada. Cancelar a seleo de Compartilhar entre molduras.

Criao de animao 317

Selecionar uma das seguintes opes de cpia de objetos em molduras:

Deixar o contedo da camada compartilhada somente na moldura atual. Copiar o contedo da camada compartilhada para todas as molduras.
Exibio de objetos dentro de uma moldura especfica possvel exibir com facilidade objetos dentro de uma moldura especfica com o uso, no painel Camadas, do menu pop-up Moldura.
Para exibir objetos dentro de uma moldura especfica:

Na base do painel Camadas, selecionar a moldura desejada no menu pop-up.

Todos os objetos dentro da moldura selecionada so listados no painel Camadas e so exibidos na tela. Utilizao de onion skinning O recurso "onion skinning" permite exibir o contedo de molduras anteriores e posteriores moldura selecionada atualmente. possvel animar objetoscom facilidade sem a necessidade de se mover para frente e para trs atravs delas. O termo onion skinning provm de uma tradicional tcnica de animao que utiliza papel vegetal fino para exibir seqncias animadas. Ao ativar o "onion skinning", os objetos em molduras antes ou depois da atual so atenuados para que possam se distinguir dos objetos na moldura atual. Por padro, Edio de mltiplas molduras ativado, o que significa que possvel selecionar e editar objetos atenuados em outras molduras sem sair da moldura atual. possvel usar a ferramenta Selecionar atrs para selecionar objetos em molduras de maneira seqencial.

318 Captulo 14

Para ajustar o nmero de molduras visveis antes e depois da moldura atual: 1

No painel Molduras, clicar no boto Opes de transparncia.

Selecionar uma opo de exibio: Sem onion skin desativa o onion skinning e exibe somente o contedo da moldura atual. Mostrar prxima moldura exibe o contedo da moldura atual e da prxima moldura. Antes e depois exibe o contedo da moldura atual e das adjacentes. Mostrar todas as molduras exibe o contedo de todas as molduras. Personalizar define um nmero personalizado de molduras e controla a opacidade do onion skinning. seleo dessa opo para selecionar e editar objetos somente na moldura atual.

Edio de mltiplas molduras permite selecionar e editar todos os objetos visveis. Cancelar a Interpolao
Interpolao um termo tradicional em animao que descreve o processo no qual um animadorchefe desenha somente os quadros-chave (molduras contendo as alteraes principais), enquanto os assistentes desenham as molduras intermedirias. No Fireworks, a interpolao mistura duas ou mais ocorrncias do mesmo smbolo, criando ocorrncias intermedirias com atributos interpolados. A interpolao um processo manual til para movimentos mais sofisticados de um objeto atravs da tela e para objetos cujos Efeitos ao vivo mudam em cada moldura da animao. Por exemplo, possvel interpolar um objeto de modo que ele parea mover-se ao longo de um caminho linear.
Para interpolar ocorrncias: 1 2 3

Selecionar duas ou mais ocorrncias do mesmo smbolo grfico na tela. No selecionar ocorrncias de smbolos diferentes. Selecionar Modificar > Smbolo > Interpolar ocorrncias. Na caixa de dilogo Interpolar ocorrncias, digitar o nmero de etapas intermedirias a serem inseridas entre o par original.

Criao de animao 319

Para distribuir os objetos interpolados em molduras separadas, selecionar Distribuir para molduras e clicar em OK. Se o usurio optar por no distribuir os objetos em molduras separadas, isto poder ser feito posteriormente selecionando todas as ocorrncias e clicando, no painel Molduras, no boto Distribuir para molduras.

Nota: Na maioria dos casos, o uso de smbolos de animao prefervel interpolao. Para mais informaes, consultar Como trabalhar com um smbolo de animao na pgina 310.

Como visualizar uma animao


possvel visualizar uma animao enquanto se trabalha nela para ver sua evoluo. Tambm possvel visualizar uma animao depois de uma otimizao, para ver como ser sua aparncia em um navegador da Web.
Para visualizar uma animao no espao de trabalho:

Usar os controles de moldura que aparecem na base da janela do documento.

Controles de moldura Ter em mente o seguinte ao visualizar animaes:

Para definir quanto tempo cada moldura aparecer na janela do documento, informar as
configuraes de retardo da moldura no painel Molduras.

As molduras excludas da exportao no aparecem na visualizao. A visualizao da animao na exibio Original mostra o grfico de origem com resoluo
total, no a visualizao otimizada usada para o arquivo de exportao.
Para visualizar uma animao na janela Visualizao: 1 2

Clicar na guia Visualizao no topo da janela do documento. Usar os controles de moldura.


Nota: No recomendvel visualizar animaes em 2 para cima e 4 para cima.

Para visualizar uma animao em um navegador da Web:

Selecionar Arquivo > Visualizar no navegador e selecionar um navegador no submenu.


Nota: necessrio selecionar GIF animado como o formato de arquivo de exportao no painel Otimizar, ou no ser visvel nenhum movimento ao visualizar o documento no navegador. Isto ser necessrio mesmo se o usurio planejar importar uma animao no Flash como um arquivo SWF ou PNG Fireworks.

Exportao de uma animao


Depois de configurar os smbolos e molduras que compem uma animao, possvel exportar o arquivo como uma animao. Antes de exportar os arquivos, primeiro necessrio definir algumas configuraes para fazer com que a animao seja carregada e reproduzida mais facilmente. possvel definir configuraes de reproduo, como ciclo e transparncia, e, em seguida, usar a otimizao para tornar o arquivo exportado menor e mais fcil de se transferir.

320 Captulo 14

Nota: Se o usurio planejar a importao de uma animao no Macromedia Flash para edio posterior, no ser necessrio export-la. O Flash MX pode importar diretamente arquivos de origem PNG Fireworks. Consultar Como trabalhar com o Macromedia Flash MX na pgina 377.

Definio da repetio de uma animao A configurao de Ciclo no painel Molduras determina o nmero de repeties da animao. Esse recurso executa vrios ciclos com as molduras, possibilitando a minimizao do nmero de molduras necessrias para construir a animao.
Para definir a repetio da animao selecionada: 1 2 3

Selecionar Janela > Molduras para exibir o painel Molduras. Na base do painel, clicar no boto Ciclo de animao GIF. Selecionar o nmero de repeties da animao depois da primeira execuo. Se, por exemplo, o usurio selecionar 4, a animao ser executada cinco vezes ao todo. Para sempre repete a animao continuamente.

Definio de uma transparncia Como parte do processo de otimizao, possvel definir uma ou mais cores dentro de um GIF animado para exibio em um navegador da Web como transparente. Isto til quando se deseja mostrar uma cor ou imagem de fundo da pgina da Web na animao.
Para exibir uma cor como transparente em um navegador da Web: 1 2

Selecionar Janela > Otimizar, se o painel Otimizar no estiver visvel. No menu pop-up Transparncia do painel Otimizar, selecionar Transparncia do ndice ou Transparncia alfa. Para uma descrio dessas opes, consultar Como tornar reas transparentes na pgina 341. Usar as ferramentas de transparncia no painel Otimizar para selecionar cores para a transparncia.

Otimizao de uma animao A otimizao comprime ao mximo o arquivo para proporcionar transferncia e exportao rpidas, tornando o tempo de visualizao muito menor no site da Web.
Para otimizar uma animao: 1

Se o usurio planejar a exportao de uma animao como um GIF animado, dever selecionar GIF animado como o formato de exportao de arquivo no painel Otimizar. Selecionar Janela > Otimizar, se o painel no estiver visvel. Definir as opes Paleta, Pontilhado ou Transparncia. Para mais informaes sobre opes de otimizao, consultar Otimizao de GIF, PNG, TIFF, BMP e PICT na pgina 334. No painel Molduras, definir o retardo das molduras. Para mais informaes, consultar Configurao do retardo de uma moldura na pgina 314.

2 3

Criao de animao 321

Formatos de exportao de uma animao Depois de criar e otimizar uma animao, ela est pronta para ser exportada. Os GIFs animados oferecem os melhores resultados para imagens grficas de clipart e do tipo desenho animado. Para mais informaes sobre como exportar GIFs animados, consultar Exportao de uma animao na pgina 350. possvel exportar a animao como um arquivo Flash SWF e, em seguida, import-la para o Macromedia Flash. Ou possvel ignorar a etapa de exportao e importar o arquivo de origem PNG Fireworks diretamente no Flash MX. Essa opo proporciona o maior controle sobre a forma de importao de uma animao. possvel importar todas as camadas e molduras de uma animao, se desejado, e edit-las posteriormente no Flash. Para mais informaes, consultar Como trabalhar com o Macromedia Flash MX na pgina 377. Tambm possvel exportar molduras ou camadas de animaes como arquivos mltiplos. Isto poder ser til quando existirem muitos smbolos em camadas diferentes para o mesmo objeto. Por exemplo, ser possvel exportar um anncio em faixa como vrios arquivos se cada letra do nome da empresa for animada em um grfico. Cada letra separada das outras. Para mais informaes sobre como exportar camadas ou molduras para mltiplos arquivos, consultar Exportao de uma moldura ou camada na pgina 351.

Como trabalhar com uma animao existente


possvel usar um arquivo de GIF animado existente como parte de uma animao do Fireworks. H duas maneiras de o usurio usar o arquivo: importar o GIF para um arquivo Fireworks existente ou abri-lo como um novo arquivo. Ao importar um GIF animado, o Fireworks o converte em um smbolo de animao e o coloca na moldura selecionada atualmente. Se a animao tiver mais molduras do que o filme atual, o usurio poder selecionar a adio automtica de mais molduras. Os GIFs importados perdem suas configuraes originais de retardo de moldura e assumem o retardo de moldura do documento atual. Como o arquivo importado um smbolo de animao, ser possvel aplicar movimento adicional a ele. Por exemplo, o usurio pode importar uma animao de um homem andando no lugar e depois aplicar propriedades de direo e movimento para faz-lo andar atravs da tela. Ao abrir um GIF animado no Fireworks, cria-se um novo arquivo e coloca-se cada moldura do GIF em uma moldura separada. Embora o GIF no seja um smbolo de animao, ele mantm as configuraes de retardo de moldura do arquivo original. Depois que o arquivo for importado, ser necessrio definir seu formato de arquivo como GIF animado para exportar o movimento a partir do Fireworks.
Para importar um GIF animado:

Selecionar Arquivo > Importar. 2 Localizar o arquivo e clicar em Abrir. 3 Clicar em Sim para adicionar mais molduras animao. Clicando-se em Cancelar, somente a primeira moldura do GIF animado ser exibida. Embora todo o documento seja importado, ser necessrio adicionar mais molduras para visualiz-lo.
1 Para abrir um GIF animado:

Selecionar Arquivo > Abrir e localizar o arquivo GIF.

322 Captulo 14

Utilizao de mltiplos arquivos como uma animao


O Fireworks pode criar uma animao com base em um grupo de arquivos de imagem. Por exemplo, possvel criar um anncio em faixa com base em diversos grficos existentes, abrindo cada grfico e colocando-o em uma moldura separada no mesmo documento.
Para abrir mltiplos arquivos como uma animao: 1 2 3

Selecionar Arquivo > Abrir. Manter a tecla Shift pressionada e clicar para selecionar mltiplos arquivos. Selecionar Abrir como animao e clicar em OK. O Fireworks abre os arquivos em um novo documento nico, colocando cada um em uma moldura separada, na ordem em que foram selecionados.

Criao de animao 323

324 Captulo 14

CAPTULO 15 Otimizao e exportao

A meta principal em um projeto grfico para a Web a criao de imagens atraentes e que se descarreguem com rapidez. Para isso, necessrio selecionar um formato de arquivo com a melhor compresso para a imagem, mantendo ao mesmo tempo a melhor qualidade possvel. Este procedimento de equilbrio denominado otimizao, atravs do qual encontram-se a mistura correta de cor, compresso e qualidade. A exportao de grficos do Macromedia Fireworks MX um processo com duas etapas:

Primeiro, prepara-se um documento ou grfico fatiado individual para exportar, selecionandose as configuraes de otimizao e comparando-se as visualizaes para determinar um equilbrio aceitvel entre qualidade e tamanho de arquivo.

Em seguida, exporta-se o documento ou grfico fatiado individual com o uso das configuraes
de exportao adequadas para seu destino, na Web ou em outro local. Se a otimizao e exportao de grficos para a Web for uma novidade, o usurio poder usar o Assistente de exportao. O assistente orienta atravs do processo de exportao e sugere configuraes. Ele tambm exibe Visualizar exportao, onde possvel otimizar um documento como parte do processo de exportao. Se houver familiaridade com as tarefas de otimizao e exportao de grficos, podero ser usadas outras ferramentas disponveis no Fireworks para executar essas tarefas. Para otimizar, possvel usar o painel Otimizar e as guias de visualizao na janela do documento. Elas oferecem maior controle sobre o processo de otimizao. Para exportar, possvel usar a caixa de dilogo Exportar ou o boto Exportao rpida. O boto Exportao rpida torna mais fcil a exportao de grficos para uso em outros aplicativos atravs da configurao automtica das opes apropriadas na caixa de dilogo Exportar. Se o Fireworks for usado com outros aplicativos, o boto Exportao rpida poder simplificar o fluxo de trabalho de criao.

Sobre otimizao
A otimizao de grficos no Fireworks envolve a execuo do seguinte:

Escolha do melhor formato de arquivo. Cada formato de arquivo tem um mtodo diferente de
compresso das informaes de cores. A escolha do formato apropriado para determinados tipos de grficos pode reduzir sensivelmente o tamanho do arquivo.

Configurao de opes especficas do formato. Cada formato de arquivo grfico tem um


conjunto exclusivo de opes. possvel usar opes, como profundidade de cor, para reduzir o tamanho do arquivo. Alguns formatos de arquivo grfico, como GIF e JPEG, tambm tm opes para o controle da compresso da imagem.

325

Ajuste das cores no grfico (somente para formatos de arquivo de 8 bits). possvel limitar as
cores limitando a imagem a um conjunto de cores especfico, denominado paleta de cores. Com isto, possvel eliminar cores no usadas na paleta de cores. Menos cores na paleta significam menos cores na imagem, o que resulta em um tamanho de arquivo menor para os tipos de arquivo de imagem com paletas. recomendvel experimentar todos os controles de otimizao para encontrar o melhor equilbrio entre qualidade e tamanho.

Como usar o Assistente de exportao


Se a otimizao e exportao de grficos da Web for uma novidade, o usurio poder usar o Assistente de exportao. Com o uso do Assistente de exportao, possvel exportar grficos facilmente, sem a necessidade de se compreender os detalhes de otimizao e exportao. O Assistente de exportao orienta o usurio passo a passo atravs dos processos de otimizao e exportao. Respondendo s perguntas sobre o destino do arquivo e uso pretendido, o Assistente de exportao sugere o tipo de arquivo e as configuraes de otimizao. Se for prefervel otimizar o tamanho do arquivo alvo ao mximo, o Assistente de exportao otimizar o arquivo exportado para que se ajuste ao limite de tamanho definido.

Assistente de exportao Depois de estar mais familiarizado com a otimizao e exportao, o usurio poder desejar usar o painel Otimizar e a guia Visualizao na janela do documento para otimizar os grficos. Eles so mais convenientes do que o Assistente de exportao e oferecem maior controle sobre a otimizao para os usurios habituados ao processo de otimizao. Depois de otimizar os grficos desta maneira, ser necessrio executar uma etapa adicional para exportar o grfico. Para mais informaes, consultar Otimizao no espao de trabalho na pgina 329 e Exportao do Fireworks na pgina 347.
Para exportar um documento com o uso do Assistente de exportao: 1 2

Selecionar Arquivo > Assistente de exportao. Responder s perguntas que aparecem e clicar em Continuar em cada painel.

326 Captulo 15

Dica: Selecionar Tamanho do arquivo de exportao de destino no primeiro painel para otimizar o tamanho do arquivo ao mximo.

O Fireworks faz recomendaes relativas aos formatos de arquivo.


3

Clicar em Sair. A janela Visualizar exportao se abre, com recomendaes de opes de exportao. Para mais informaes, consultar a prxima seo.

Como usar Visualizar exportao A janela Visualizar exportao exibe as opes de otimizao e exportao recomendveis para o documento atual.
Nota: A janela Visualizar exportao era usada em verses anteriores do Fireworks para otimizar e exportar grficos simultaneamente. Ainda possvel abrir a janela Visualizar exportao atravs do Assistente de exportao ou selecionando Arquivo > Visualizar exportao.

A rea de visualizao da janela Visualizar exportao exibe o documento ou grfico exatamente como ser exportado e estima o tamanho do arquivo e o tempo de descarregamento com as configuraes de exportao atuais.
Tamanho do arquivo e tempo de download estimados

Configuraes de exportao salvas na exibio ativa Visualizao das configuraes de exportao escolhidas

Conjunto de opes salvo para a exportao selecionada

possvel dividir as exibies para comparar as vrias configuraes e encontrar o menor tamanho de arquivo que mantenha um nvel de qualidade aceitvel. Tambm possvel limitar o tamanho usando o assistente Otimizar para tamanho. Ao exportar GIFs animados ou rollovers JavaScript, o tamanho estimado do arquivo representa o tamanho total de todas as molduras.
Nota: Para aumentar a velocidade de redesenho de Visualizar exportao, cancelar a seleo de Visualizar. Para interromper o redesenho da rea de visualizao ao alterar as configuraes, pressionar Esc.

Para exportar com o uso de Visualizar exportao: 1

Selecionar Arquivo > Visualizar exportao para abrir a janela Visualizar exportao, caso ela no esteja aberta.

Otimizao e exportao 327

Na base da caixa de dilogo, usar o boto Zoom para ampliar ou reduzir a visualizao. Clicar nesse boto para ampliar a visualizao. Pressionar Alt e clicar (Windows) ou pressionar Opo e clicar (Macintosh) no boto para reduzir. Executar um dos seguintes procedimentos para enquadrar a rea de visualizao:

Na base da caixa de dilogo, clicar no boto Ponteiro e arrastar na visualizao. Manter pressionada a barra de espao quando o ponteiro Zoom estiver ativo e arrastar na
visualizao.
4

Clicar em um boto de diviso de exibio para dividir a rea de visualizao em duas ou quatro reas para comparar as configuraes de otimizao.

Cada janela de visualizao pode exibir uma visualizao do grfico com configuraes de exportao diferentes.
Nota: Ao aplicar o zoom ou enquadrar com mltiplas exibies abertas, todas as exibies se ampliam/reduzem e se enquadram simultaneamente.

Clicar no boto Assistente de Otimizar para o tamanho para otimizar um grfico com base em um tamanho de arquivo de destino. Digitar um tamanho de arquivo, em kilobytes, e clicar em OK.

O Assistente de Otimizar para o tamanho tenta ajustar o tamanho do arquivo solicitado usando os seguintes mtodos:


6 7

Ajuste da qualidade do JPEG Modificao da suavizao do JPEG Alterao do nmero de cores em imagens de 8 bits Alterao das configuraes de pontilhamento em imagens de 8 bits Ativao ou desativao das configuraes de otimizao Clicar em Exportar ao concluir a alterao das configuraes de otimizao. Na caixa de dilogo Exportar, digitar um nome para o arquivo, selecionar um destino, definir quaisquer outras opes desejadas e clicar em Salvar. Para mais informaes sobre as opes da caixa de dilogo Exportar, consultar Exportao do Fireworks na pgina 347.

328 Captulo 15

Otimizao no espao de trabalho


A exportao de grficos para uso na Web um processo com duas etapas: otimizao e exportao. A otimizao de grficos assegura o balano correto entre cor, compresso e qualidade. Depois de finalizar as configuraes de otimizao de um grfico, ele est pronto para a exportao. No ser necessrio usar o Assistente de exportao e Visualizar exportao no Fireworks caso haja familiaridade com a otimizao e exportao de grficos. O Fireworks tem recursos de otimizao e exportao no espao de trabalho que proporcionam maior controle sobre a forma de exportao de arquivos:

O painel Otimizar contm os controles principais para a otimizao. Para formatos de arquivo
de 8 bits, tambm existe uma tabela de cores que exibe as cores na paleta de cores de exportao atual.

Ao selecionar uma fatia, o Inspetor de propriedades apresenta o menu pop-up Configuraes


de exportao da fatia no qual possvel selecionar configuraes de otimizao predefinidas ou salvas.

As guias Visualizao mostram como o grfico a ser exportado apareceria com as configuraes
de otimizao atuais. possvel otimizar o documento inteiro da mesma forma ou selecionar fatias individuais, ou reas selecionadas de um JPEG, e atribuir configuraes de otimizao diferentes para cada um deles. Como usar configuraes de otimizao predefinidas possvel selecionar configuraes de otimizao comuns no Inspetor de propriedades ou no painel Otimizar para definir rapidamente o formato de um arquivo e aplicar vrias configuraes de formato especficas. Ao selecionar uma opo no menu pop-up Configuraes, o restante das opes no painel Otimizar definido automaticamente. Caso desejado, ser possvel ajustar ainda mais cada opo individualmente.

Otimizao e exportao 329

Se for necessrio um controle de otimizao mais personalizado do que as predefinies oferecem, ser possvel criar configuraes de otimizao personalizadas no painel Otimizar. Tambm ser possvel modificar a paleta de cores de um grfico com o uso da tabela de cores no painel Otimizar.

Para selecionar uma otimizao predefinida:

No Inspetor de propriedades ou no painel Otimizar, selecionar uma predefinio no menu popup Configuraes:
GIF Web 216 fora todas as cores para cores Websafe. A paleta de cores contm at 216 cores (consultar Otimizao de GIF, PNG, TIFF, BMP e PICT na pgina 334). GIF WebSnap 256 converte GIF WebSnap 128 converte

cores no-Websafe em cores Websafe mais prximas. A paleta de cores contm at um mximo de 256 cores. cores no-Websafe em cores Websafe mais prximas. A paleta de

cores contm at 128 cores.


GIF adaptativa 256 uma paleta de cores

que contm somente as cores reais usadas no grfico. A paleta de cores contm at um mximo de 256 cores.

JPEG - Melhor qualidade define a qualidade para 80 e a suavizao para 0, resultando em um grfico de alta qualidade, porm maior. JPEG - Arquivo menor define qualidade para 60 e a suavizao para 2, resultando em um grfico com menos da metade do tamanho de um JPEG - Qualidade melhor, mas com qualidade reduzida. GIF animado Websnap 128 define o formato do arquivo para GIF animado e converte cores noWebsafe em cores Websafe mais prximas. A paleta de cores contm at 128 cores.

Para mais informaes sobre tipos de arquivo, consultar Seleo de um tipo de arquivo na pgina 333.
Para especificar configuraes de otimizao personalizadas: 1 2 3

No painel Otimizar, selecionar uma opo no menu pop-up Formato de arquivo de exportao. Definir opes especficas do formato, como profundidade de cor, pontilhamento e qualidade. No menu de opes do painel Otimizar, selecionar outras configuraes de otimizao, caso necessrio. Para mais informaes sobre controles de otimizao especficos, consultar as sees apropriadas em Otimizao no espao de trabalho na pgina 329.

330 Captulo 15

possvel nomear e salvar configuraes de otimizao. Os nomes de configuraes salvas so adicionados s configuraes de otimizao predefinidas no painel Otimizar, menu pop-up Configuraes, e no Inspetor de propriedades quando as propriedades da fatia, do boto ou do documento so exibidas. Para mais informaes, consultar Como salvar e reutilizar uma configurao de otimizao na pgina 347.

Para modificar a paleta de cores:

Selecionar Janela > Otimizar para exibir e editar a paleta de cores de um documento. Para mais informaes, consultar Otimizao de GIF, PNG, TIFF, BMP e PICT na pgina 334.
Para otimizar fatias individuais: 1 2

Clicar em uma fatia para selecion-la. Pressionar a tecla Shift e clicar para selecionar mais de uma fatia. Otimizar as fatias selecionadas com o uso do painel Otimizar.

Visualizao e comparao de configuraes de otimizao As guias de visualizao exibem o grfico tal como apareceria em um navegador da Web com base nas configuraes de otimizao. possvel visualizar os comportamentos de rollover e navegao, bem como animaes.

A guia Original e as guias de visualizao ficam no canto superior esquerdo da janela do documento. As guias de visualizao exibem o tamanho total de um documento, o tempo de download estimado e o formato do arquivo. O tempo de download estimado a quantidade de tempo mdia que levaria para efetuar a transferncia de todas as fatias e molduras do documento com um modem de 56 Kbps. As visualizaes 2 para cima e 4 para cima exibem informaes adicionais que variam dependendo do tipo de arquivo selecionado.

Visualizao com a seleo de GIF como o tipo de arquivo

Otimizao e exportao 331

possvel usar o painel Otimizar para otimizar um documento enquanto o mesmo visualizado, como na exibio Original. possvel otimizar o documento inteiro de uma s vez ou somente em fatias selecionadas. A sobreposio de fatias ajuda a diferenciar as fatias sendo otimizadas atualmente do resto do documento. A sobreposio de fatias exibe as reas que no esto sendo otimizadas atualmente com uma colorao esmaecida, branca transparente. possvel ativar ou desativar a sobreposio de fatias.

Ao otimizar uma fatia selecionada, as partes que no so otimizadas aparecem apagadas.


Para visualizar um grfico com base nas configuraes de otimizao atuais:

Clicar na guia Visualizao no canto superior esquerdo da janela do documento.


Nota: No painel Ferramentas, clicar em Ocultar fatias e pontos ativos para ocultar fatias e guias de fatia durante a visualizao.

Para comparar exibies com configuraes de otimizao diferentes: 1 2 3 4

Clicar na guia 2 para cima ou 4 para cima no canto superior esquerdo da janela do documento. Clicar em uma das visualizaes de tela dividida para selecion-la. No painel Otimizar, digitar as configuraes. Selecionar as outras visualizaes e especificar configuraes de otimizao diferentes para cada visualizao para compar-las. Ao escolher as visualizaes 2 para cima ou 4 para cima, a primeira exibe o documento PNG original do Fireworks, de forma a permitir a sua comparao com as verses otimizadas. possvel alternar essa exibio para exibir outra verso otimizada.

332 Captulo 15

Para alternar qualquer exibio otimizada com uma original na visualizao 2 para cima e 4 para cima: 1 2

Selecionar uma exibio otimizada. No menu pop-up Visualizao, na base da visualizao, selecionar Original (Sem visualizao).

Para alternar a exibio original com uma otimizada na visualizao 2 para cima e 4 para cima: 1 2

Selecionar a exibio que contm o original. No menu pop-up Visualizao, selecionar Visualizar exportao.

Para ocultar ou exibir uma sobreposio de fatia:

Selecionar Exibir > Sobreposio de fatia. Seleo de um tipo de arquivo O usurio deve basear a seleo do formato de arquivo no design e uso do grfico. A aparncia de um grfico pode variar de um formato para outro, especialmente ao usar tipos de compresso diferentes. Alm disso, somente certos tipos de arquivos grficos so aceitos pela maior parte dos navegadores da Web. Finalmente, outros tipos de arquivo so ideais para impresso ou uso em aplicativos de multimdia. Os seguintes tipos de arquivo esto disponveis: , GIF Graphics Interchange Format, um formato grfico popular para a Web. GIFs contm um mximo de 256 cores. Alm disso, os GIFs podem conter uma rea transparente e vrios quadros para animao. Imagens com reas de cor slida podem se compactar mais ao serem exportadas como GIFs. Um GIF geralmente ideal para imagens como desenhos, logotipos, imagens com reas transparentes e animaes.

Otimizao e exportao 333

JPEG, desenvolvido pelo Joint Photographic Experts Group especificamente para imagens fotogrficas ou com cores de alta densidade. O formato JPEG suporta milhes de cores (24 bits). O formato JPEG o melhor para fotografias digitalizadas, imagens que usam texturas, imagens com transio de cores de dgrad e qualquer imagem que exija mais de 256 cores. PNG, Portable Network Graphic, um formato grfico verstil para a Web. Porm, nem todos os navegadores da Web podem visualizar grficos PNG. O formato PNG pode suportar cores de at 32 bits, conter transparncia ou um canal alfa e ser progressivo. PNG o formato de arquivo nativo do Fireworks. Porm, arquivos PNG Fireworks contm informaes especficas do aplicativo que no so armazenadas em um arquivo PNG exportado ou em arquivos criados em outros aplicativos.

, WBMP

Wireless Bitmap, um formato grfico criado para dispositivos de computao mveis, como telefones celulares e PDAs (Personal Digital Assistant, assistente pessoal digital). Esse formato usado especificamente em pginas WAP (Wireless Application Protocol, protocolo de aplicaes sem fio). O WBMP tem um formato de 1 bit e, dessa forma, somente duas cores so visveis: preto e branco. Tagged Image File Format, um formato grfico usado para armazenar imagens de bitmap. TIFFs so usados com maior freqncia em publicaes impressas. Muitos aplicativos de multimdia tambm aceitam grficos TIFF importados.

, TIFF

, BMP formato de arquivo grfico da Microsoft Windows, um formato de arquivo comum usado para exibir imagens de bitmap. BMPs so usados primariamente no sistema operacional Windows. Muitos aplicativos podem importar imagens BMP.
PICT, desenvolvido pela Apple Computer, um formato de arquivo grfico normalmente usado no sistema operacional Macintosh. A maioria dos aplicativos para Mac pode importar imagens PICT.

Otimizao de GIF, PNG, TIFF, BMP e PICT Cada formato de arquivo grfico no Fireworks tem um conjunto de opes de otimizao. Para a maior parte, somente os tipos de arquivo de 8 bits, como GIF, PNG 8, TIFF 8, BMP 8 e PICT 8, oferecem um volume significativo de controle sobre a otimizao.
Nota: O formato JPEG uma exceo. Para mais informaes sobre controles de otimizao de JPEG, consultar Otimizao de um JPEG na pgina 343.

As configuraes de otimizao do Fireworks so semelhantes para todos os formatos de arquivo grfico de 8 bits. Para formatos de arquivo para a Web, como GIF e PNG, tambm possvel especificar a quantidade de compresso desejada para o grfico.

334 Captulo 15

possvel otimizar tipos de arquivo de 8 bits atravs do ajuste de suas paletas de cores. Menos cores na paleta representam menos cores na imagem, resultando em um tamanho de arquivo menor. O inconveniente da reduo de cores que ela tambm reduz a qualidade da imagem. medida que experimenta configuraes de otimizao diferentes, o usurio pode usar as visualizaes 2 para cima e 4 para cima para testar e comparar a aparncia e o tamanho estimado de um arquivo grfico. Para mais informaes sobre como usar as guias de visualizao, consultar Visualizao e comparao de configuraes de otimizao na pgina 331. Como escolher uma paleta de cores GIFs e outros formatos de imagem de 8 bits exportados contm uma paleta de cores. A paleta de cores uma lista de at 256 cores disponveis para o arquivo. Somente as cores definidas na paleta de cores aparecem na imagem grfica, porm algumas paletas de cores contm cores que no esto no grfico. As seguintes paletas esto disponveis no Fireworks:
Adaptativa uma paleta personalizada derivada das cores reais do documento. As paletas adaptativas freqentemente produzem imagens com a melhor qualidade. Adaptativa WebSnap uma paleta adaptativa na qual as cores prximas s cores Websafe so convertidas na cor Websafe mais prxima. Cores Websafe so aquelas que tm como origem a paleta Web216. Web 216 uma paleta com as 216 cores comuns aos computadores Windows e Macintosh. Essa paleta muitas vezes denominada paleta Websafe ou prova de navegador, pois produz resultados razoavelmente consistentes em vrios navegadores da Web em qualquer plataforma, quando exibidas em monitores de 8 bits. Exata contm as cores exatas usadas na imagem. Somente as imagens contendo 256 cores ou menos podem usar a paleta Exata. Se a imagem contiver mais de 256 cores, a paleta ser alternada para Adaptativa. Sistema (Windows) e Sistema (Macintosh) cada uma contm 256 cores definidas pelos padres da plataforma Windows ou Macintosh, respectivamente. Tons de cinza uma paleta de 256 (ou menos) tons de cinza. A escolha dessa paleta converter a imagem exportada para tons de cinza. Preto e branco Uniforme

uma paleta de duas cores, somente preto e branco.

uma paleta matemtica baseada em valores RGB de pixel.

Personalizada uma paleta que foi modificada ou carregada de uma paleta externa (arquivo ACT) ou um arquivo GIF.

O ajuste da paleta de cores durante a otimizao afeta as cores da imagem exportada. possvel otimizar e personalizar paletas de cores com o uso da tabela de cores no painel Otimizar.
Para selecionar uma paleta de cores:

No menu pop-up Paleta indexada do painel Otimizar, selecionar uma opo.


Para importar uma paleta personalizada: 1

Seguir uma das seguintes opes:

No menu de opes do painel Otimizar, selecionar Carregar paleta.

Otimizao e exportao 335

No menu pop-up Paleta indexada do painel Otimizar, selecionar Personalizada.


2

Navegar at um arquivo de paleta ACT ou GIF e clicar em Abrir.


Nota: Os usurios de Windows devem selecionar Arquivos GIF no menu pop-up Arquivos do tipo para ver arquivos com extenso .gif na caixa de dilogo Abrir.

As cores dos arquivos ACT ou GIF so adicionadas tabela de cores no painel Otimizar. Configurao da intensidade da cor Intensidade de cor o nmero de cores da imagem grfica exportada. possvel tornar os arquivos menores com a reduo do nmero de cores usadas. A reduo da intensidade da cor remove algumas cores da imagem a partir daquelas menos usadas. Os pixels que contm as cores descartadas so convertidos nas cores mais prximas restantes na paleta. Isto pode reduzir a qualidade da imagem.
Nota: A opo de intensidade da cor est disponvel somente para os formatos de arquivo grfico GIF e outros de 8 bits.

Para selecionar uma intensidade de cor:

No menu pop-up Cores do painel Otimizar, selecionar uma opo ou digitar um valor na caixa de texto. possvel selecionar de 2 at 256 cores.

Dica: As cores reais na imagem podem ser menos do que o nmero mximo de cores selecionadas. O nmero na base da tabela de cores indica o nmero real de cores visveis na imagem. Se no houver nenhum nmero visvel, aparecer o boto Reconstruir, o que indicar a necessidade de se reconstruir a paleta de cores. Para mais informaes, consultar Exibio de cores em uma paleta na pgina 337.

Para selecionar uma intensidade de cor alm de 256 cores:

No menu pop-up Formato de arquivo de exportao do painel Otimizar, selecionar um formato de arquivo de 24 ou 32 bits.
Nota: As intensidades de cor maiores criam arquivos exportados maiores e normalmente no so ideais para imagens grficas da Web. Usar somente intensidades de cor de 24 ou 32 bits ao exportar imagens fotogrficas com tons contnuos ou misturas de cores com dgrad complexo. Para grficos com alta intensidade de cor para a Web, usar o formato JPEG. Para mais informaes, consultar Otimizao de um JPEG na pgina 343.

336 Captulo 15

Remoo de cores no usadas A remoo de cores no usadas de uma imagem antes da exportao diminui o tamanho do arquivo.
Nota: Esta opo est disponvel somente para os formatos de arquivo grfico GIF e outros de 8 bits.

Para remover cores no usadas:

No menu de opes do painel Otimizar, selecionar Remover cores no usadas. Cancelar a seleo de Remover cores no usadas para incluir todas as cores na paleta, inclusive aquelas que no estejam na imagem exportada. Como pontilhar para aproximar cores perdidas O pontilhamento aproxima cores que no esto na paleta atual atravs da alternncia de pixels coloridos de maneira semelhante. A uma certa distncia, as cores se misturam para criar a aparncia da cor ausente. O pontilhamento especialmente til ao exportar imagens com misturas ou dgrads complexos, ou imagens fotogrficas, para um formato de arquivo grfico de 8 bits, como o GIF. O pontilhamento pode aumentar sensivelmente o tamanho do arquivo.
Nota: A opo de pontilhamento est disponvel somente para os formatos de arquivo grfico GIF, outros de 8 bits e WBMP.

Para pontilhar um grfico:

Na caixa de texto Pontilhamento do painel Otimizar, digitar um valor percentual. Exibio de cores em uma paleta A tabela de cores no painel Otimizar exibe as cores na visualizao atual ao trabalhar com cores de 8 bits ou menos, e permite modificar a paleta de uma imagem. A tabela de cores atualiza-se automaticamente no modo de Visualizao. Ela aparecer vazia ao otimizar mais do que uma fatia ao mesmo tempo ou ao otimizar um formato de 8 bits, como o GIF.

Otimizao e exportao 337

Vrios smbolos pequenos aparecem em alguns exemplos de cores, indicando certas caractersticas de cores individuais, como segue:
Este smbolo Indica que A cor foi editada, afetando somente o documento exportado. Isto no altera a cor no documento de origem. A cor est bloqueada.

A cor transparente.

A cor Websafe.

A cor tem mltiplos atributos. Neste caso, a cor Websafe, est bloqueada e foi editada.

Se o documento for editado, a Tabela de cores poder no mostrar mais todas as cores do documento. Se isto ocorrer, ser necessrio reconstruir a tabela de cores. Um boto Reconstruir aparecer na base do painel Otimizar quando for necessrio reconstruir a tabela de cores.
Para reconstruir a tabela de cores para que reflita as edies no documento:

Na base do painel Otimizar, clicar em Reconstruir. Quando a tabela estiver reconstruda, o boto Reconstruir desaparecer e o nmero real de cores usado na imagem ser exibido em seu lugar.
Para selecionar uma cor:

Na tabela de cores do painel Otimizar, clicar na cor.


Para selecionar mltiplas cores:

Pressionar a tecla Control e clicar (Windows) ou Comando e clicar (Macintosh) nas cores.
Para selecionar uma faixa de cores: 1 2

Clicar em uma cor. Pressionar a tecla Shift e clicar na ltima cor da faixa que se deseja selecionar.

Para visualizar todos os pixels no documento que contenham uma cor especfica: 1 2

Clicar na guia Visualizao da janela do documento. Na tabela de cores do painel Otimizar, clicar e manter o mouse sobre um exemplo. Os pixels contendo o exemplo selecionado mudaro temporariamente para outra cor de realce at o usurio soltar o boto do mouse.
Nota: Ao visualizar pixels no documento com o uso das exibies 2 para cima ou 4 para cima, selecionar uma exibio diferente de Original.

338 Captulo 15

Como bloquear cores em uma paleta possvel bloquear cores individuais para no permitir sua remoo ou alterao ao alternar entre paletas ou reduzir o nmero de cores de uma paleta. Ao alternar para outra paleta depois de bloquear cores, estas so adicionadas nova paleta.
Para bloquear uma cor selecionada:

Na base do painel Otimizar, clicar no boto Bloquear cor.


Para desbloquear uma cor: 1 2

Na tabela de cores do painel Otimizar, selecionar uma cor bloqueada. No painel Otimizar, clicar no boto Bloquear cores.

Para desbloquear todas as cores:

No menu de opes do painel Otimizar, selecionar Desbloquear todas as cores. Edio de cores em uma paleta possvel alterar uma cor na paleta editando-a na tabela de cores do painel Otimizar. A edio da cor substitui todas as ocorrncias da mesma na imagem a ser exportada. A edio no substitui a cor na imagem original.
Para editar uma cor: 1

Executar um dos seguintes procedimentos para abrir o seletor de cores do sistema:

No boto Editar cor na base do painel Otimizar, selecionar uma cor e clicar. Na tabela de cores, clicar duas vezes em uma cor.
2

Alterar a cor com o uso do seletor de cores do sistema. A nova cor substitui cada ocorrncia da cor substituda na rea de visualizao.
Nota: Clicar com o boto direito (Windows) ou pressionar Control e clicar (Macintosh) em uma cor da paleta para exibir um menu de atalho de opes de edio para a cor.

Como usar uma cor Websafe As cores Websafe so cores comuns s plataformas Macintosh e Windows. Essas cores no ficam pontilhadas quando exibidas em um navegador da Web na tela de um computador configurada para 256 cores. O Fireworks tem diversos mtodos de aplicao e uso de cores Websafe.
Para forar todas as cores para cores Websafe:

No menu pop-up Paleta indexada do painel Otimizar, selecionar Web 216.


Para criar uma paleta adaptativa com cores semelhantes s Websafe:

Selecionar a paleta WebSnap adaptativa. As cores no-Websafe que estejam prximas s cores Websafe sero convertidas em cores Websafe mais prximas.

Otimizao e exportao 339

Para forar uma cor para a Websafe mais prxima equivalente: 1 2

Na tabela de cores do painel Otimizar, selecionar uma cor. Clicar no boto Alinhar pela cor Websafe. A alterao das cores para Websafe no painel Otimizar afeta somente sua verso exportada, no a imagem real.

Como salvar uma paleta possvel salvar paletas personalizadas como arquivos externos de paleta. possvel usar paletas salvas com outros documentos do Fireworks ou em outros aplicativos que suportem arquivos externos de paleta, como o Adobe Photoshop, Macromedia FreeHand e Flash 5. Os arquivos de paleta tm a extenso .act.
Para salvar uma paleta de cores personalizada: 1 2 3

No menu de opes do painel Otimizar, selecionar Salvar paleta. Digitar um nome para a paleta e selecionar uma pasta de destino. Clicar em Salvar. possvel carregar o arquivo salvo da paleta no painel Exemplos ou no painel Otimizar para us-lo ao exportar outros documentos.

Como ajustar a compresso possvel comprimir arquivos GIF, para torn-los ainda menores do que o normal, alterando sua configurao de perda. Configuraes maiores de perda produzem arquivos menores, mas com uma qualidade de imagem inferior. Uma configurao de perda entre 5 e 15 geralmente produz os melhores resultados.

GIF original; valor de perda de 30; valor de perda de 100


Para alterar a compresso de um GIF:

No painel Otimizar, digitar uma configurao para Perda.

340 Captulo 15

Como tornar reas transparentes possvel definir reas transparentes tanto em GIFs como em PNGs de 8 bits de maneira que, em um navegador da Web, o fundo da pgina da Web fique visvel atravs dessas reas. No Fireworks, um quadriculado cinza e branco nas guias de visualizao indica as reas transparentes.

Visualizao de imagem otimizada no Fireworks; imagem exportada com transparncia e colocada em uma pgina da Web com um fundo colorido
Nota: Os PNGs de 32 bits contm a transparncia automaticamente, embora, no painel Otimizar, no aparea uma opo de transparncia para esses PNGs.

O usurio deve usar o recurso transparncia do ndice ao exportar imagens GIF que contenham reas transparentes. Com a transparncia do ndice, possvel definir cores especficas que sero transparentes na exportao. A transparncia do ndice ativa ou desativa pixels com valores de cor especficos. Como o formato GIF suporta a transparncia do ndice, esta a forma mais comum de transparncia usada na Web.
Nota: Por padro, as imagens GIF so exportadas sem transparncia no Fireworks. Embora a tela atrs de uma imagem ou objeto aparea transparente na exibio Original no Fireworks, isto no significa que o fundo daquela imagem ser transparente ao ser exportada como um GIF para uso na Web. Ser necessrio selecionar Transparncia do ndice antes da exportao.

Tambm possvel usar a transparncia alfa, embora no seja usada com freqncia em grficos da Web porque somente o formato PNG a suporta e a maioria dos navegadores da Web no suporta esse formato. A transparncia alfa usada com freqncia em grficos exportados que contm transparncia dgrad e pixels semi-opacos. A transparncia alfa tambm se torna til ao exportar arquivos para o Macromedia Flash ou Director, porque ambos os aplicativos suportam esse tipo de transparncia.
Nota: A configurao de cores para transparncias afeta somente a verso exportada da imagem, no a imagem real. possvel ver qual a aparncia da imagem exportada em uma visualizao. Para mais informaes sobre as guias de visualizao, consultar Visualizao e comparao de configuraes de otimizao na pgina 331.

Para selecionar uma cor para transparncia: 1 2

Clicar nas guias Visualizar, 2 para cima ou 4 para cima. Nas guias 2 para cima ou 4 para cima, clicar em uma exibio diferente do original. No menu pop-up Transparncia, na base do painel Otimizar, selecionar Transparncia do ndice. A cor da tela torna-se transparente na visualizao. Para selecionar uma cor diferente, clicar no boto Selecionar cor transparente. O ponteiro se torna um conta-gotas.

Otimizao e exportao 341

Executar um dos seguintes procedimentos para selecionar a cor para torn-la transparente:

Na tabela de cores do painel Otimizar, clicar em um exemplo de cor. Clicar em uma cor no documento.
Para adicionar ou remover cores transparentes: 1

Clicar nas guias Visualizar, 2 para cima ou 4 para cima. Nas guias 2 para cima ou 4 para cima, clicar em uma exibio diferente do original.
Nota: possvel adicionar ou remover cores transparentes na exibio Original, mas os resultados somente podero ser vistos ao se exibir uma visualizao.

No painel Otimizar, clicar no boto Adicionar cor transparncia ou Remover cor da transparncia.

Executar um dos seguintes procedimentos para selecionar outra cor para torn-la transparente ou para remov-la da transparncia:

Na tabela de cores do painel Otimizar, clicar em um exemplo de cor. Clicar em uma cor na visualizao.
Para tornar o fundo de uma imagem transparente: 1 2

Clicar nas guias Visualizar, 2 para cima ou 4 para cima. Nas guias 2 para cima ou 4 para cima, clicar em uma exibio diferente do original. No menu pop-up Selecionar tipo de transparncia, selecionar GIF como o formato de arquivo no painel Otimizar e selecionar Transparncia do ndice. A cor da tela torna-se transparente na visualizao e o grfico est pronto para ser exportado.

Entrelaamento: download gradual Quando exibidas em um navegador da Web, as imagens entrelaadas aparecem gradualmente medida que se descarregam. Primeiro, so exibidas com baixa resoluo, passando para a resoluo total ao se concluir o download.
Nota: Esta opo est disponvel somente para formatos de arquivo GIF e PNG. possvel obter resultados semelhantes com um JPEG transformando-o em progressivo. Para mais informaes, consultar Otimizao de um JPEG na pgina 343.

Para entrelaar um GIF ou PNG exportado:

No menu de opes do painel Otimizar, selecionar Entrelaado.

342 Captulo 15

Otimizao de um JPEG Com o uso do painel Otimizar, possvel otimizar JPEGs atravs da configurao das opes de compresso e suavizao.

O formato JPEG sempre salvo com cores de 24 bits e, assim, no possvel otimizar um JPEG com a edio de sua paleta de cores. A tabela de cores fica vazia quando o usurio seleciona uma imagem JPEG. medida que experimenta configuraes de otimizao diferentes, o usurio pode usar as visualizaes 2 para cima e 4 para cima para testar e comparar a aparncia e o tamanho estimado de um arquivo grfico JPEG. Para mais informaes sobre como usar as guias de visualizao, consultar Visualizao e comparao de configuraes de otimizao na pgina 331. Ajuste da qualidade do JPEG JPEG um formato com muita perda, o que significa que alguns dados da imagem so descartados quando comprimidos, com a reduo da qualidade do arquivo final. Entretanto, os dados de imagem geralmente podem ser descartados com pouca ou nenhuma diferena perceptvel em qualidade.

Imagem original; configurao de qualidade em 50; configurao de qualidade em 20


Para controlar a quantidade de perda de qualidade ao comprimir um arquivo JPEG para exportao:

No menu pop-up Qualidade no painel Otimizar, ajustar a qualidade com o controle deslizante.

A configurao de uma porcentagem alta mantm a qualidade da imagem, mas comprime


menos, produzindo arquivos maiores.

Otimizao e exportao 343

A configurao de uma porcentagem baixa produz um arquivo menor, mas com uma qualidade
de imagem inferior. Compresso seletiva de reas de um JPEG A compresso seletiva de um JPEG permite comprimir reas diferentes de um JPEG em nveis diferentes. reas de interesse particular em uma imagem podem ser comprimidas em um nvel elevado. reas de menor importncia, como fundos, podem ser comprimidas em um nvel inferior, reduzindo o tamanho global da imagem, mantendo a qualidade das reas mais interessantes.

A rea selecionada nesta imagem est sendo comprimida com um nvel de qualidade de 90, enquanto a rea no selecionada est sendo comprimida com um nvel de qualidade de 50.
Para comprimir reas selecionadas de um JPEG: 1 2 3 4

Na exibio Original, selecionar uma rea do grfico para compresso com o uso de uma das ferramentas Moldura. Selecionar Modificar > JPEG seletiva > Salvar seleo como mscara JPEG. No menu pop-up Formato de arquivo de exportao do painel Otimizar, selecionar JPEG, caso no esteja selecionado. No painel Otimizar, clicar no boto Editar opes de qualidade seletiva. A caixa de dilogo Configurao de JPEG seletiva aparece. Selecionar Ativar qualidade seletiva e digitar um valor de compresso na caixa de texto. A digitao de um valor baixo para compacta a rea seletiva do JPEG mais do que o resto da imagem. A digitao de um valor alto comprime a rea seletiva do JPEG menos do que o resto da imagem.

6 7 8 9

possvel alterar a Cor de sobreposio para a rea de JPEG seletiva, caso desejado. Isto no afeta a sada. Selecionar Preservar qualidade do texto. Todos os itens do texto sero automaticamente exportados em um nvel superior, independente do valor Qualidade seletiva. Selecionar Preservar qualidade do boto. Todos os smbolos de boto sero automaticamente exportados em um nvel superior. Clicar em OK.

344 Captulo 15

Para modificar a rea de compresso de um JPEG seletiva: 1

Selecionar Modificar > JPEG seletiva > Restaurar mscara JPEG como seleo. A seleo realada. Usar a ferramenta Moldura ou outra ferramenta de seleo para efetuar alteraes no tamanho da rea. Selecionar Modificar > JPEG seletiva > Salvar seleo como mscara JPEG. No painel Otimizar, alterar as configuraes de qualidade seletiva, se desejado.
Nota: Para desfazer uma seleo, selecionar Modificar > JPEG seletiva > Remover mscara JPEG.

2 3 4

Como embaar ou aguar um detalhe possvel definir a Suavizao no painel Otimizar para ajudar a diminuir o tamanho de arquivos JPEG. A suavizao embaa bordas acentuadas, que no so bem comprimidas em JPEGs. Nmeros maiores produzem mais embaamento no JPEG exportado, criando, normalmente, arquivos menores. Uma configurao de suavizao de aproximadamente 3 reduz o tamanho da imagem, mantendo, porm, uma qualidade razovel.
Para ajudar a preservar as bordas finas entre duas cores:

No menu de opes do painel Otimizar, selecionar Aguar bordas JPEG. Usar Aguar bordas JPEG ao exportar arquivos JPEG com texto ou detalhes finos para manter a nitidez dessas reas. A seleo de Aguar bordas JPEG aumenta o tamanho do arquivo. Como usar JPEGs progressivos JPEGs progressivos, como GIFs e PNGs entrelaados, so exibidos com uma resoluo menor e, em seguida, aumentam sua qualidade medida que se efetua seu download.
Para exportar um JPEG progressivo:

No menu de opes do painel Otimizar, selecionar JPEG progressivo.


Nota: Alguns aplicativos de edio de bitmap no abrem arquivos JPEG progressivos.

Como igualar a cor de fundo de um destino A suavizao de serrilhado faz com que um objeto aparea mais suave atravs da mistura da cor do objeto com o fundo sobre o qual est colocado. Por exemplo, se o objeto for preto e a pgina na qual ele estiver for branca, a suavizao de serrilhado adicionar vrios tons de cinza aos pixels que contornam a borda do objeto, fazendo uma transio suave entre o preto e o branco.

Otimizao e exportao 345

Com a configurao da opo Mate no painel Otimizar, possvel suavizar o serrilhado de objetos que repousam diretamente sobre a tela com a cor Mate. Isto til ao exportar grficos para aparecer em pginas da Web com fundos coloridos.
Para igualar a cor do fundo do destino:

No painel Otimizar, selecionar uma cor no menu pop-up Mate. Igual-la o mximo possvel cor do fundo do destino sobre o qual o grfico exportado ser colocado.
Nota: A suavizao de serrilhado aplica-se somente a objetos com bordas suaves que permanecem diretamente no topo da tela.

Remoo de aurolas Em uma imagem que tenha sofrido suavizao de serrilhado anteriormente, os pixels da suavizao de serrilhado permanecem ao tornar a cor da tela transparente. Assim, quando o usurio exportar o grfico e coloc-lo em uma pgina da Web com uma cor de fundo diferente, os pixels do permetro do objeto com suavizao de serrilhado podero aparecer no fundo da pgina da Web. Esses pixels formam a aurola, que pode ser observada especialmente em um fundo escuro.

O usurio pode impedir com facilidade a formao de aurolas em arquivos PNG nativos do Fireworks e em arquivos importados do Photoshop. Porm, para alguns arquivos exportados, como GIF, necessrio remover a aurola manualmente.
Para impedir a formao de aurolas em arquivos PNG nativos do Fireworks e em arquivos importados do Photoshop, proceder da seguinte forma:

Definir a Cor da tela no Inspetor de propriedades ou a Cor mate no painel Otimizar para a cor
do fundo da pgina da Web de destino.

Com o objeto que se deseja exportar selecionado, selecionar Acentuado no menu pop-up
Borda do Inspetor de propriedades.
Para remover uma aurola de um GIF ou outro arquivo grfico exportado manualmente: 1 2 3

Com o arquivo aberto no Fireworks, clicar na guia Visualizao, 2 para cima ou 4 para cima. Nas guias 2 para cima ou 4 para cima, clicar em uma exibio diferente do original. No menu pop-up Selecionar tipo de transparncia do painel Otimizar, selecionar Transparncia do ndice. Clicar no boto Adicionar cor transparncia e clicar em um pixel na aurola. Todos os pixels da mesma cor so removidos na Visualizao. Se a aurola ainda aparecer, repetir a etapa 3 at que desaparea.

346 Captulo 15

Como salvar e reutilizar uma configurao de otimizao possvel salvar configuraes de otimizao personalizadas para uso futuro em uma otimizao ou processamento em lote. O salvamento de predefinies personalizadas armazena as seguintes informaes:

Configuraes e tabela de cores no painel Otimizar Configuraes de retardo de moldura selecionadas no painel Molduras (somente para animaes)
Para salvar configuraes de otimizao como uma predefinio: 1 2

No painel Otimizar, clicar no boto Salvar configuraes atuais. Digitar um nome para a predefinio de otimizao e clicar em OK. As configuraes de otimizao salvas aparecem na base do menu pop-up Configuraes do painel Otimizar e no Inspetor de propriedades. Elas ficam disponveis em todos os documentos subseqentes. O arquivo da predefinio salvo na pasta Export Settings do disco rgido.
Nota: A localizao exata da pasta Export Settings varia em funo do sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

Para compartilhar uma configurao de otimizao salva com outro usurio do Fireworks:

Copiar o arquivo de predefinio de otimizao salvo da pasta Export Settings do Fireworks para a mesma pasta no outro computador.
Para excluir uma otimizao predefinida personalizada: 1 2

No menu pop-up Configuraes salvas do painel Otimizar, selecionar a configurao de otimizao que se deseja excluir. No painel Otimizar, clicar no boto Excluir configurao salva. No possvel excluir uma configurao predefinida do Fireworks.

Exportao do Fireworks
A exportao a partir do Fireworks um processo com duas etapas. Primeiro necessrio otimizar o grfico ou documento para a exportao. Depois de otimizar o grfico ou documento, possvel export-lo. Para mais informaes sobre otimizao, consultar Sobre otimizao na pgina 325. possvel exportar grficos do Fireworks de vrias formas. possvel exportar um documento como uma imagem simples nos formatos GIF, JPEG ou outro formato de arquivo grfico, exportar o documento inteiro como um arquivo HTML e arquivos de imagem associados, ou exportar somente fatias selecionadas. Tambm possvel exportar somente uma rea especfica de um documento. Alm disso, possvel exportar molduras e camadas do Fireworks como arquivos de imagem separados.

Otimizao e exportao 347

Exportao de uma imagem simples Usar o comando Arquivo > Exportar para exportar um grfico depois de concluir a otimizao no espao de trabalho.

Caixa de dilogo Exportar


Nota: Para exportar somente imagens especficas dentro de um documento, primeiro necessrio fati-lo e, em seguida, exportar somente as fatias desejadas. Para mais informaes, consultar Exportao de fatias selecionadas na pgina 349.

Para exportar um documento do Fireworks como uma imagem simples: 1 2

Selecionar Arquivo > Exportar. Selecionar um local em que exportar o arquivo de imagem. Para grficos da Web, o melhor local uma pasta dentro do site local da Web. Digitar um nome de arquivo. No necessrio digitar uma extenso de arquivo; o Fireworks far isso na exportao com o uso do tipo de arquivo especificado nas configuraes de otimizao. Para mais informaes sobre otimizao, consultar Sobre otimizao na pgina 325. No menu pop-up Salvar como tipo, selecionar Somente imagens. Clicar em Salvar.

4 5

Exportao de um documento fatiado Por padro, ao exportar um documento fatiado do Fireworks, so exportados um arquivo HTML e as imagens associadas. O arquivo HTML exportado pode ser exibido em um navegador da Web ou ser importado em outros aplicativos para edio posterior.

348 Captulo 15

Nota: possvel obter um HTML do Fireworks em outros aplicativos com o uso de vrias tcnicas. Para mais informaes sobre HTML e as outras maneiras de se exportar HTML do Fireworks, consultar Exportao de HTML na pgina 352.

Antes de exportar, necessrio certificar-se de selecionar o estilo de HTML apropriado na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.
Para exportar um documento fatiado do Fireworks: 1 2 3 4 5 6 7 8

Selecionar Arquivo > Exportar. Navegar at a pasta Nav Menu no disco rgido. No menu pop-up Salvar como tipo, selecionar HTML e imagens. Digitar um nome de arquivo nas caixas Nome do arquivo (Windows) ou Salvar como (Macintosh). No menu pop-up HTML, selecionar Exportar arquivo HTML. No menu pop-up Fatias, selecionar Exportar fatias. (opcional) Selecionar Colocar imagens na subpasta. Clicar em Salvar. Os arquivos do Fireworks exportados aparecem no disco rgido. As imagens e um arquivo HTML so gerados no local especificado na caixa de dilogo Exportar. Para mais informaes sobre as opes disponveis na caixa de dilogo Exportar ao selecionar HTML e imagens como o tipo de arquivo, consultar Exportao de HTML do Fireworks na pgina 354.

Exportao de fatias selecionadas possvel exportar fatias selecionadas em um documento do Fireworks. Pressionar a tecla Shift e clicar para selecionar vrias fatias.
Nota: Para mais informaes sobre fatiamento, consultar Criao e edio de fatias na pgina 261.

Para exportar fatias selecionadas: 1

Seguir uma das seguintes opes:

Selecionar Arquivo > Exportar. Para exportar uma fatia individual, clicar com o boto direito do mouse (Windows) ou
pressionar Control e clicar (Macintosh) na fatia, e selecionar Exportar fatia selecionada.
2

Selecionar uma localizao na qual armazenar os arquivos exportados. Normalmente, o melhor local uma pasta dentro do site local da Web. Digitar um nome de arquivo. No necessrio digitar uma extenso; o Fireworks faz isso automaticamente. Ao exportar mltiplas fatias, o Fireworks usa o nome digitado como o nome-raiz para todos os grficos exportados, menos para aqueles com nomes personalizados com o uso do painel Camadas ou o Inspetor de propriedades.

4 5

Selecionar Exportar fatias no menu pop-up Fatias. Para exportar somente fatias selecionadas antes da exportao, selecionar Apenas fatias selecionadas e certificar-se de no selecionar a opo Incluir reas sem fatias.

Otimizao e exportao 349

Clicar em Salvar. Cada fatia ser exportada com suas configuraes de otimizao, tal como definidas no painel Otimizar. Para mais informaes sobre otimizao, consultar Sobre otimizao na pgina 325.

Atualizao de uma fatia Se um documento fatiado foi exportado e se foram feitas alteraes ao documento original no Fireworks depois de export-lo, o usurio poder atualizar somente a imagem ou fatia alterada sem a necessidade de exportar e carregar a imagem fatiada inteira. Recomenda-se usar a nomeao personalizada de fatias para permitir localizar com facilidade a fatia a ser substituda. Para mais informaes, consultar Nomeao de fatias na pgina 278.
Para atualizar uma fatia simples: 1 2 3 4 5 6

Esconder a fatia e editar a rea debaixo dela. Exibir a fatia novamente e selecion-la. Selecionar Arquivo > Exportar. Selecionar Apenas fatias selecionadas. Clicar em Salvar para exportar a fatia na mesma pasta da fatia original usando o mesmo nome da base. Clicar em OK ao ser solicitado a substituir o arquivo existente. Quando se mantm o nome de arquivo original para a fatia atualizada e se carrega a fatia no mesmo local do site da Web de onde veio a imagem original, a nova fatia substitui a fatia original na imagem.
Nota: Evitar o redimensionamento da fatia alm de seu tamanho de exportao original no Fireworks para evitar resultados inesperados no documento HTML ao atualizar a fatia.

Exportao de uma animao Depois de criar e otimizar uma animao, ela est pronta para ser exportada. possvel exportar uma animao como um GIF animado, um arquivo SWF Flash ou como mltiplos arquivos. Se o documento contiver mais de uma animao, ser possvel inserir fatias no topo de cada animao para exportar cada uma delas usando configuraes de animao diferentes, como ciclo e retardo de moldura. Para mais informaes sobre exportao de animaes como arquivos SWF Flash, consultar Como trabalhar com o Macromedia Flash MX na pgina 377. Para mais informaes sobre exportao para mltiplos arquivos, consultar Exportao de uma moldura ou camada na pgina 351.
Para exportar uma animao como um GIF animado: 1

Selecionar Editar > Cancelar seleo para cancelar a seleo de todas as fatias e objetos, e, no painel Otimizar, selecionar GIF animado como o formato de arquivo. Para mais informaes sobre otimizao, consultar Otimizao de GIF, PNG, TIFF, BMP e PICT na pgina 334.

2 3 4

Selecionar Arquivo > Exportar. Na caixa de dilogo Exportar, digitar um nome para o arquivo e selecionar o destino. Clicar em Salvar.

350 Captulo 15

Para exportar mltiplas animaes com configuraes de animao diferentes como GIFs animados: 1 2

Pressionar a tecla Shift e clicar nas animaes para selecionar todas elas. Escolher Editar > Inserir > Fatia. Aparece uma caixa de mensagem solicitando confirmar se inserir uma fatia ou mltiplas fatias. Clicar em Mltiplos. Selecionar cada fatia individualmente e usar o painel Molduras para definir configuraes de animao diferentes para cada uma. Para mais informaes sobre configuraes de animao, consultar Captulo 14, Criao de animao, na pgina 309. Selecionar Editar > Cancelar seleo para cancelar a seleo de todas as fatias e objetos, e, no painel Otimizar, selecionar GIF animado como o formato de arquivo. Para mais informaes sobre otimizao, consultar Otimizao de GIF, PNG, TIFF, BMP e PICT na pgina 334.

3 4

Clicar com o boto direito do mouse (Windows) ou pressionar Control e clicar (Macintosh) na tabela desejada e selecionar Exportar fatia selecionada no menu de contexto para exportar cada fatia individualmente. Na caixa de dilogo Exportar, digitar um nome para cada arquivo, selecionar o destino e clicar em Salvar.

Exportao de uma moldura ou camada O Fireworks pode exportar cada camada ou moldura em um documento como um arquivo de imagem separado com o uso das configuraes de otimizao especificadas no painel Otimizar. O nome da camada ou moldura determina o nome de cada arquivo exportado. Este mtodo de exportao usado algumas vezes para exportar animaes.
Para exportar molduras ou camadas como mltiplos arquivos: 1 2 3

Selecionar Arquivo > Exportar. Digitar um nome de arquivo e selecionar uma pasta de destino. No menu pop-up Salvar como tipo, selecionar o seguinte:

Para exportar molduras como mltiplos arquivos, selecionar Molduras para arquivos. Para exportar camadas como mltiplos arquivos, selecionar Camadas para arquivos.
Nota: Isso exporta todas as camadas da moldura atual.

Selecionar Aparar imagens para recortar automaticamente as imagens exportadas para adequ-las aos objetos em cada moldura. Se desejar exportar molduras ou camadas com o mesmo tamanho do documento, cancelar a seleo de Aparar imagens.

Clicar em Salvar.

Exportao de uma rea possvel usar a ferramenta rea de exportao para exportar uma parte de um documento do Fireworks.
Para exportar uma parte de um documento: 1

No painel Ferramentas, selecionar a ferramenta rea de exportao.

Otimizao e exportao 351

Arrastar uma moldura da caixa de seleo para definir a parte do documento que se deseja exportar.
Nota: possvel ajustar a posio da moldura medida que se arrasta. Pressionado o boto do mouse, manter pressionada a barra de espao no teclado e arrastar a moldura para outro local da tela. Soltar a barra de espao para continuar o desenho da moldura.

Ao soltar o boto do mouse, a rea de exportao permanece selecionada.


3

Como redimensionar a rea de exportao, se necessrio: rea de exportao.

Pressionar a tecla Shift e arrastar uma ala para redimensionar proporcionalmente a moldura da Pressionar a tecla Alt e arrastar (Windows) ou pressionar a tecla Opo e arrastar (Macintosh)
uma ala para redimensionar a moldura a partir do centro.

Pressionar as teclas Alt + Shift e arrastar (Windows) ou pressionar as teclas Opo + Shift e
arrastar (Macintosh) uma ala para limitar as propores e redimensionar a partir do centro.
4 5 6 7 8

Clicar duas vezes dentro da moldura da caixa de seleo da rea de exportao para ir para Visualizar exportao. Ajustar as configuraes em Visualizar exportao e clicar em Exportar. Na caixa de dilogo Exportar, digitar um nome para o arquivo e selecionar uma pasta de destino. No menu pop-up Salvar como, selecionar Somente imagens. Clicar em Salvar.
Nota: Para cancelar sem exportar, clicar duas vezes fora da moldura da caixa de seleo da rea de exportao, pressionar Esc ou selecionar outra ferramenta.

Exportao de HTML A menos que especificado de outra forma, ao exportar um documento fatiado do Fireworks, o que se exporta na verdade um arquivo HTML e uma srie de imagens. O Fireworks gera HTML puro que pode ser lido pela maioria dos navegadores da Web e editores de HTML. H uma srie de meios para se exportar HTML do Fireworks:

Exportar um arquivo HTML que pode ser aberto posteriormente para edio em um editor de
HTML.

Copiar o cdigo HTML para a rea de transferncia no Fireworks e, em seguida, colar aquele
cdigo diretamente em documento HTML existente.

Exportar um arquivo HTML, abri-lo em um editor de HTML, copiar manualmente sees do


cdigo do arquivo e col-las em outro documento HTML.

Usar o comando Atualizar HTML para efetuar alteraes em um arquivo HTML criado
anteriormente.
Nota: O Macromedia Dreamweaver e o Microsoft FrontPage compartilham uma integrao estreita com o Fireworks. O Fireworks manuseia a exportao de HTML para aqueles aplicativos de maneira diferente do que fazem outros editores de HTML. Ao exportar HTML do Fireworks para um desses aplicativos, consultar Captulo 16, Uso do Fireworks com outros aplicativos, na pgina 363.

Tambm possvel exportar HTML como camadas CSS (Cascading Style Sheet, folha com estilo de cascata). O Fireworks suporta codificao UTF-8 e XHTML, para permitir a exportao de documentos tambm com o uso desses padres.

352 Captulo 15

Para definir a forma de exportao de HTML pelo Fireworks, possvel usar a caixa de dilogo Configurao do HTML. Essas configuraes podem ser especficas do documento ou ser usadas como configuraes padro para todas as exportaes de HTML do Fireworks. Sobre HTML O cdigo HTML gerado automaticamente pelo Fireworks ao exportar, copiar ou atualizar HTML. No necessrio entend-lo para utiliz-lo. Depois de gerado, no h necessidade de alter-lo para faz-lo funcionar, desde que os arquivos no sejam renomeados ou movidos. HTML (HyperText Markup Language, linguagem de marcao de hipertexto) o padro atual para a exibio de pginas da Web na Internet. Um arquivo HTML um arquivo texto que contm estes elementos:

Texto que aparece na pgina da Web Tags de HTML que definem a formatao e estrutura daquele texto e de todo o documento,
bem como vnculos para imagens e outros documentos HTML (pginas da Web). As tags de HTML aparecem entre sinais de maior/menor e tm a seguinte aparncia:
<TAG> texto afetado </TAG>

A tag de abertura indica ao navegador a formatao do texto que aparece em seguida ou a incluso de um grfico. A tag de fechamento (</TAG>), quando presente, indica o final daquela formatao. Incluso de comentrios em HTML O HTML do Fireworks bem comentado, indicando o relacionamento das partes do cdigo. Os comentrios de HTML do Fireworks iniciam com <!-- e finalizam com -->. Tudo entre esses dois marcadores no interpretado como cdigos HTML ou JavaScript. Ao desejar incluir comentrios em um HTML, necessrio indicar ao Fireworks a ativao dessa opo.
Para incluir comentrios em um HTML exportado:

Antes da exportao, selecionar a opo Incluir comentrios HTML na guia Geral da caixa de dilogo Configurao do HTML. Resultados de uma exportao Ao exportar ou copiar HTML do Fireworks, gera-se o seguinte para permitir a recriao da imagem do Fireworks em uma pgina da Web:

O cdigo HTML necessrio para reconstruir imagens fatiadas e qualquer cdigo JavaScript,
caso o documento contenha elementos interativos. O HTML do Fireworks contm vnculos com as imagens exportadas e define a cor do fundo da pgina da Web como a cor da tela.

Um ou mais arquivos de imagem, dependendo da quantidade de fatias no documento e da


quantidade de estados includos nos botes.

Um arquivo chamado spacer.gif, se necessrio. O arquivo spacer.gif um GIF transparente de 1


pixel por 1 pixel que o Fireworks usa para corrigir problemas de espaamento ao reconstruir imagens fatiadas em uma tabela de HTML. possvel selecionar a exportao de um espaador pelo Fireworks. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Se o documento do Fireworks contiver menus pop-up, um arquivo mm_menu.js ser criado,


contendo o cdigo necessrio para a exibio de menus pop-up.

Otimizao e exportao 353

Ao exportar ou copiar HTML para o Macromedia Dreamweaver, criam-se arquivos de notas


para ajudar a ativar a integrao estreita entre o Fireworks e o Dreamweaver. Exportao de HTML do Fireworks O Fireworks permite a exportao de HTML nos formatos Genrico, Dreamweaver, FrontPage e Adobe GoLive. O HTML genrico funciona com a maioria dos editores de HTML. A exportao de HTML do Fireworks gera um arquivo HTML e arquivos de imagem associados em um local especificado.
Nota: O Fireworks tambm exporta HTML ao exportar para Macromedia Director e para camadas CSS. Para mais informaes, consultar Como trabalhar com o Macromedia Director na pgina 386 e Exportao de uma camada CSS na pgina 358.

O mtodo de exportao de HTML do Fireworks para outros aplicativos ideal ao se trabalhar em um ambiente de equipe de trabalho. A exportao de um arquivo HTML segmenta o fluxo de trabalho, permitindo que uma pessoa execute uma tarefa em um aplicativo e outra possa continuar posteriormente usando outro aplicativo. possvel configurar preferncias globais de exportao de HTML com o uso da caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.
Nota: O Macromedia Dreamweaver e o Microsoft FrontPage compartilham uma integrao estreita com o Fireworks. O Fireworks exporta HTML para esses aplicativos de maneira diferente do que fazem outros editores de HTML. Ao exportar HTML do Fireworks para um desses aplicativos, seguir estas instrues, mas consultar tambm Captulo 16, Uso do Fireworks com outros aplicativos, na pgina 363 para obter notas adicionais especficas dos aplicativos.

Para exportar HTML do Fireworks: 1

Executar um dos seguintes procedimentos para abrir a caixa de dilogo Exportar:

Selecionar Arquivo > Exportar. No canto superior direito da janela do documento, clicar no boto Exportao rpida e
selecionar uma opo de exportao no menu pop-up do aplicativo de destino. O Fireworks preenche automaticamente as caixas de texto da caixa de dilogo Exportar com as configuraes apropriadas para o aplicativo selecionado.
Nota: Aplicativos de terceiros so encontrados no submenu Exportao rpida > Outro.

2 3 4

Navegar at a pasta desejada do site no disco rgido. No menu pop-up Salvar como tipo, selecionar HTML e imagens. Na caixa de dilogo Configurao do HTML, guia Geral, menu pop-up Estilo do HTML, clicar no boto Opes e selecionar o editor de HTML. Se o editor de HTML desejado no estiver na lista, selecionar Genrico.
Nota: importante selecionar um editor de HTML como o estilo de HTML; caso isto no ocorra, elementos interativos, como botes e rollovers, podero no funcionar corretamente ao serem importados no editor de HTML desejado.

5 6

Clicar em OK para retornar caixa de dilogo Exportar. Digitar um nome de arquivo nas caixas Nome do arquivo (Windows) ou Salvar como (Macintosh).

354 Captulo 15

Selecionar Exportar arquivo HTML no menu pop-up HTML. A seleo de Exportar arquivo HTML gera um arquivo HTML e os arquivos de imagem associados no local especificado.

8 9

No menu pop-up Fatias, selecionar Exportar fatias, caso o documento contenha fatias. Selecionar Colocar imagens na subpasta caso se deseje armazenar as imagens em uma pasta separada. possvel selecionar uma pasta especfica ou usar uma pasta padro do Fireworks, chamada images. Clicar em Salvar. Depois da exportao, os arquivos exportados do Fireworks aparecero no disco rgido. As imagens e um arquivo HTML so gerados no local especificado na caixa de dilogo Exportar.

10

Como copiar um HTML para a rea de transferncia Uma maneira rpida de se exportar um HTML gerado pelo Fireworks copiando-o para a rea de transferncia. possvel efetuar a cpia de um cdigo HTML no Fireworks de duas formas. Usando o comando Copiar cdigo HTML ou selecionando Copiar para a rea de transferncia como opo na caixa de dilogo Exportar. Assim, copia-se o HTML do Fireworks para a rea de transferncia e geramse os arquivos de imagem associados no local especificado. Posteriormente, ser possvel colar esse HTML em um documento no editor de HTML preferido. Embora a cpia para a rea de transferncia seja uma maneira rpida de colocar HTML do Fireworks em outros aplicativos, no a maneira ideal para todas as situaes. A cpia de HTML para a rea de transferncia apresenta as seguintes desvantagens:

No h a opo de salvar imagens em uma subpasta. Elas devem residir na mesma pasta do
arquivo HTML em que se cola o HTML copiado. Uma exceo o HTML copiado para o Macromedia Dreamweaver.

Todos os vnculos ou caminhos usados nos menus pop-up do Fireworks sero mapeados para o
disco rgido. O HTML copiado para o Dreamweaver uma exceo.

Ao usar um editor de HTML diferente do Dreamweaver ou Microsoft FrontPage, o cdigo


JavaScript associado a botes, comportamentos e imagens de rollover ser copiado, mas poder no funcionar corretamente. Se esses itens representarem um problema, ser prefervel usar a opo Exportar arquivo HTML em vez de copiar o HTML para a rea de transferncia.
Nota: Antes de copiar o cdigo HTML, certificar-se de selecionar o estilo de HTML apropriado e a opo Incluir comentrios HTML na guia Geral da caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para copiar HTML do Fireworks com o uso da opo Copiar cdigo HTML: 1

Seguir uma das seguintes opes:

Selecionar Editar > Copiar cdigo HTML. Clicar no boto Exportao rpida e, no menu pop-up, selecionar Copiar cdigo HTML.
2

Seguir a orientao do assistente durante a configurao da exportao do cdigo HTML e das imagens. Ao ser solicitado, especificar uma pasta desejada como o destino para as imagens exportadas. Esse deve ser o local em que o arquivo HTML residir.

Otimizao e exportao 355

Nota: Se o cdigo HTML for colado no Macromedia Dreamweaver, no importar a localizao das imagens exportadas, porque elas residiro no mesmo site do Dreamweaver, bem como o arquivo HTML no qual o cdigo ser colado.

O assistente exporta as imagens para o destino especificado e copia o cdigo HTML para a rea de transferncia.
Para copiar HTML do Fireworks com o uso da caixa de dilogo Exportar: 1

Selecionar Arquivo > Exportar.


Nota: Opcionalmente, ao exportar para o Dreamweaver, clicar no boto Exportao rpida e selecionar Copiar HTML para rea de transferncia no submenu Dreamweaver.

Na caixa de dilogo Exportar, especificar uma pasta de destino para as imagens exportadas. Esta dever ser o mesmo local em que o arquivo HTML residir.
Nota: Se o cdigo HTML for colado no Macromedia Dreamweaver, no importar a localizao das imagens exportadas, porque elas residiro no mesmo site do Dreamweaver, bem como o arquivo HTML no qual o cdigo ser colado.

3 4 5 6 7

No menu pop-up Salvar como tipo, selecionar HTML e imagens. No menu pop-up HTML, selecionar Copiar para a rea de transferncia. Se o documento contiver fatias, selecionar Exportar fatias no menu pop-up Fatias. Clicar no boto Opes, selecionar o editor de HTML desejado na caixa de dilogo Configurao do HTML e clicar em OK. Na caixa de dilogo Exportar, clicar em Salvar.

Para colar um HTML copiado do Fireworks em um documento HTML: 1

No editor de HTML, abrir um documento HTML existente ou criar um novo documento. Salvar o documento no mesmo local das imagens exportadas.
Nota: Ao usar o Macromedia Dreamweaver, no necessrio salvar o arquivo HTML no mesmo local das imagens exportadas. Ao exportar imagens do Fireworks para um site do Dreamweaver e salvar o arquivo HTML em algum local dentro daquele site, o Dreamweaver resolve automaticamente os caminhos at as imagens associadas.

Exibir o cdigo HTML e colocar o ponto de insero no local desejado entre as tags <BODY>.
Nota: O cdigo HTML copiado do Fireworks no inclui as tags de abertura e fechamento <HTML> e <BODY>.

Colar o cdigo HTML. Consultar o sistema de ajuda do editor de HTML para obter instrues sobre como colar contedo da rea de transferncia. Ao colar o cdigo em editores de HTML, importante manter os arquivos de imagens e HTML no local correto, pois, do contrrio, os vnculos podero ser desfeitos. Se possvel, ao copiar para a rea de transferncia, certificar-se de que as imagens sejam exportadas para o local definitivo em que residiro no site da Web. O Fireworks usa URLs relativos de documentos, de forma que se o HTML ou as imagens forem movidos, os vnculos URL sero desfeitos.

Como copiar e colar HTML de um arquivo do Fireworks exportado possvel abrir HTML do Fireworks exportado em um editor de HTML e copiar e colar sees do cdigo em outro arquivo HTML.
Para copiar o cdigo de um arquivo do Fireworks exportado e col-lo em outro documento HTML: 1

Abrir o arquivo HTML do Fireworks exportado em um editor de HTML.

356 Captulo 15

2 3 4

Realar o cdigo necessrio e copi-lo para a rea de transferncia. Abrir um documento HTML existente ou criar um novo documento. Colar o cdigo da rea de transferncia no local desejado dentro do novo arquivo HTML. No ser necessrio copiar as tags <HTML> e <BODY>, porque as mesmas devero j estar includas no documento HTML de destino. Ao selecionar Incluir comentrios HTML na caixa de dilogo Configurao do HTML do Fireworks, seguir as instrues dos comentrios para copiar e colar o cdigo no local apropriado. Se o documento do Fireworks contiver elementos interativos, ser necessrio copiar tambm o cdigo JavaScript. O cdigo JavaScript circundado por tags <SCRIPT> e localiza-se na seo <HEAD> do documento. Copiar e colar a seo <SCRIPT> inteira, a menos que o documento de destino j tenha uma seo <SCRIPT>. Neste caso, ser necessrio copiar e colar somente o contedo da seo <SCRIPT> na seo <SCRIPT> existente, tomando cuidado para no sobrescrever o contedo da seo existente. Certificar-se tambm de no duplicar as funes JavaScript na seo <SCRIPT> depois de copiar o cdigo.

Atualizao de um HTML exportado O comando Atualizar HTML permite efetuar alteraes em um documento HTML do Fireworks exportado anteriormente. Este recurso til quando se deseja atualizar somente uma parte de um documento.
Nota: Atualizar HTML funciona de forma diferente com documentos HTML do Macromedia Dreamweaver. Para mais informaes, consultar Como trabalhar com o Macromedia Dreamweaver MX na pgina 363.

Ao atualizar um HTML do Fireworks, possvel selecionar entre substituir somente as imagens alteradas ou sobrescrever todos os cdigos e imagens. Ao selecionar a substituio somente das imagens alteradas, todas as alteraes efetuadas no arquivo HTML fora do Fireworks sero preservadas.
Nota: Para alteraes considerveis no layout de um documento, efetuar as alteraes no Fireworks e exportar novamente o arquivo HTML.

Para atualizar o HTML com o uso do comando Atualizar HTML:

Seguir uma das seguintes opes: Selecionar Arquivo > Atualizar HTML. Clicar no boto Exportao rpida e selecionar Atualizar HTML no menu pop-up. 2 Selecionar o arquivo a ser atualizado na caixa de dilogo Localizar arquivo HTML. 3 Clicar em Abrir. 4 Se no for encontrado o HTML gerado pelo Fireworks, clicar em OK para inserir o novo HTML no final do documento. 5 Se no for encontrado o HTML gerado pelo Fireworks, selecionar uma das opes seguintes e clicar em OK: Substituir imagens e seus HTML substitui o HTML anterior.
1 Atualizar apenas imagens substitui 6

somente as imagens.

Se aparecer a caixa de dilogo Selecionar pasta de imagens, selecionar uma pasta e clicar em Abrir.

Otimizao e exportao 357

Exportao de uma camada CSS O recurso CSS (Cascading Style Sheets, folhas de estilo em cascata) proporciona maior controle sobre a forma de exibio de pginas da Web. As camadas CSS permitem criar folhas de estilo ou modelos que definem a aparncia de elementos diferentes, como cabealhos e vnculos. Com o CSS possvel controlar simultaneamente o estilo e layout de mltiplas pginas da Web. As camadas CSS podem sobrepor-se e ser empilhadas uma em cima da outra. No Fireworks, a sada HTML normal no empilha.
Para exportar um grfico em camadas CSS: 1 2 3 4

Selecionar Arquivo > Exportar. Na caixa de dilogo Exportar, digitar um nome para o arquivo e selecionar uma pasta de destino. No menu pop-up Salvar como tipo, selecionar Camadas CSS. No menu pop-up Origem, selecionar uma das seguintes opes:

Camadas do Fireworks exporta todas as camadas como camadas CSS. Molduras do Fireworks exporta todas as molduras como camadas CSS. Fatias do Fireworks exporta as fatias no documento como camadas CSS.
5 6 7

Selecionar Aparar imagens para recortar automaticamente as imagens e camadas exportadas para que se ajustem aos objetos. Selecionar Colocar imagens na subpasta para escolher uma pasta para as imagens. Clicar em Salvar.

Exportao de XHTML Em um futuro breve, espera-se que o XHTML substitua o HTML como o padro para a exibio de contedo para a Web. O XHTML no apenas compatvel retroativamente, o que significa que a maioria dos navegadores da Web atuais podem exibi-lo, mas tambm pode ser lido por qualquer dispositivo que exiba contedo XML, como PDAs, telefones celulares e outros dispositivos portteis. O XHTML uma combinao de HTML, o padro atual de formatao e exibio de pginas da Web, e XML (eXtensible Markup Language, linguagem de marcao extensvel). O XHTML contm os elementos do HTML e, ao mesmo tempo, obedece s regras de sintaxe mais restritas do XML. Para suportar esse novo padro, o Fireworks permite exportar XHTML.
Nota: O Fireworks tambm pode importar XHTML. Para mais informaes, consultar Criao de arquivo PNG do Fireworks a partir de arquivos HTML na pgina 78.

Para mais informaes sobre XHTML, visite a especificao de XHTML do World Wide Web Consortium (W3C) em http://www.w3.org.
Para exportar XHTML no Fireworks: 1

Selecionar Arquivo > Configurao do HTML, selecionar um estilo de XHTML no menu pop-up Estilo do HTML na guia Geral e clicar em OK.

358 Captulo 15

Exportar o documento com o uso de um dos mtodos disponveis para exportao ou cpia de HTML. Para mais informaes sobre as vrias formas de se exportar e copiar HTML no Fireworks, consultar Exportao de HTML na pgina 352.
Nota: O Fireworks usa codificao UTF-8 ao exportar para XHTML. Para mais informaes sobre codificao UTF-8, consultar Exportao de um arquivo com codificao UTF-8 na pgina 359.

Exportao de um arquivo com codificao UTF-8 Historicamente, os navegadores da Web no eram capazes de exibir conjuntos de caracteres diferentes dentro de um nico documento HTML. Por exemplo, textos em chins e textos em ingls no podiam ser exibidos na mesma pgina porque os navegadores da Web no eram capazes de exibir conjuntos de caracteres diferentes em um nico documento. O UTF-8 (Universal Character Set Transformation Format-8, transformao de conjunto de caracteres universal formato 8) um mtodo de codificao de texto que permite aos navegadores da Web exibir conjuntos de caracteres diferentes na mesma pgina HTML. O Fireworks permite exportar HTML com codificao UTF-8.
Nota: O Fireworks tambm pode importar documentos que usam codificao UTF-8. Para mais informaes, consultar Criao de arquivo PNG do Fireworks a partir de arquivos HTML na pgina 78.

Para exportar documentos com codificao UTF-8: 1

Selecionar Arquivo > Configurao do HTML, selecionar Usar codificao UTF-8 na guia Especfico do documento e clicar em OK.
Nota: Para mais informaes sobre opes de configurao de HTML, consultar Configurao de opes de exportao de HTML na pgina 359.

Exportar o documento com o uso de um dos mtodos disponveis para exportao ou cpia de HTML. Para mais informaes sobre as vrias formas de se exportar e copiar HTML no Fireworks, consultar Exportao de HTML na pgina 352.

Configurao de opes de exportao de HTML A caixa de dilogo Configurao do HTML permite definir como o Fireworks exporta HTML. Essas configuraes podem ser especficas do documento ou podem ser usadas como configuraes padro para todas as exportaes de HTML. As alteraes efetuadas na guia Especfico do documento afetam somente o documento atual, mas essas configuraes podero ser usadas como padro para novos documentos ao clicar no boto Definir padres antes de fechar a caixa de dilogo Configurao do HTML. As configuraes Geral e Tabela so preferncias globais e afetam todos os novos documentos.
Para definir como o Fireworks exporta HTML: 1 2

Selecionar Arquivo > Configurao do HTML ou, na caixa de dilogo Exportar, clicar no boto Opes. Na guia Geral, selecionar uma das seguintes opes: HTML genrico funciona em qualquer editor de HTML. Porm, se o documento contiver comportamentos ou outro contedo interativo, selecionar um editor especfico caso o mesmo aparea na lista. Elementos interativos so exportados de maneira diferente no Fireworks, dependendo do estilo de HTML selecionado.

Selecionar um Estilo do HTML para definir o estilo do HTML exportado.

Otimizao e exportao 359

Para exportar um documento com o uso do padro XHTML, selecionar o estilo XHTML apropriado no menu pop-up. Para mais informaes sobre XHTML, consultar Exportao de XHTML na pgina 358.

Selecionar um nome de extenso de arquivo no menu pop-up Extenso ou digitar um novo. Selecionar Incluir comentrios HTML para incluir comentrios relativos ao local em que copiar e
colar o HTML. Esta opo recomendvel caso o documento contenha elementos interativos, como botes, comportamentos ou imagens de rollover. Os comentrios do HTML ajudam a determinar quais partes do cdigo copiar e colar.

Selecionar Nome de arquivo em minsculas para criar o nome do arquivo HTML e os arquivos
de imagem associados em minsculas na exportao.
Nota: Isto no colocar a extenso do arquivo HTML em minsculas caso uma extenso em maisculas seja selecionada no menu pop-up Extenso.

Selecionar um aplicativo associado no menu pop-up Criador de arquivos (Macintosh). Ao


clicar duas vezes no arquivo HTML exportado no disco rgido, o aplicativo especificado se abre automaticamente.
3

Na guia Tabela, selecionar as configuraes para as tabelas de HTML. Para mais informaes sobre como definir propriedades para tabelas de HTML exportadas do Fireworks, consultar Definio da forma de exportao das tabelas HTML na pgina 280. Na guia Especfico do documento, selecionar uma das seguintes opes: Nomeao automtica de fatias. possvel usar as configuraes padro ou selecionar opes personalizadas.
Nota: Tomar cuidado ao selecionar Nenhum como uma opo de menu para a nomeao automtica de fatias. Se Nenhum for selecionado como a opo para os trs primeiros menus, o Fireworks exportar os arquivos de fatia que se sobregravam entre si, resultando em um nico grfico exportado e uma tabela que exibe esse grfico em todas as clulas.

Selecionar uma frmula para modo de nomeao automtica de fatias nos menus pop-up

Digitar o texto na caixa de texto Descrio de imagem alternativa. Este texto alternativo
aparece no lugar de todas as imagens enquanto so descarregadas da Web e no lugar das mensagens com falha de download. Em alguns navegadores, elas tambm podem aparecer como uma dica quando o ponteiro passa sobre a imagem. Tambm usado para usurios da Web com deficincia visual.

Selecionar Mltiplas barras de navegao e pginas HTML ao exportar uma barra de


navegao que se vincular a vrias pginas. Ao selecionar esta opo, o Fireworks exporta pginas adicionais para cada boto na barra de navegao.

Selecionar Codificao UTF-8 se o documento exibir caracteres de mltiplos conjuntos de


caractere. Para mais informaes sobre codificao UTF-8, consultar Exportao de um arquivo com codificao UTF-8 na pgina 359.
5 6

Clicar em Definir padres para salvar as configuraes como configuraes globais padro. Clicar em OK.

360 Captulo 15

Como usar o boto Exportao rpida


O boto Exportao rpida, localizado no canto superior direito da janela do documento, oferece acesso fcil s opes comuns de exportao de arquivos do Fireworks para outros aplicativos. Com o uso do boto Exportao rpida, possvel exportar para vrios formatos, incluindo aplicativos Macromedia e outros aplicativos, como o Microsoft FrontPage e Adobe GoLive.

Todas as opes de exportao disponveis atravs do boto Exportao rpida tambm so acessveis em outras partes do Fireworks, como na caixa de dilogo Exportar e no menu Editar. O boto Exportao rpida oferece um atalho para a maioria das opes de exportao comuns. Para mais informaes sobre como exportar cada formato, consultar Uso do Fireworks com outros aplicativos na pgina 363. Para a maioria dos formatos, esto disponveis vrios mtodos de exportao. Por exemplo, possvel exportar HTML do Dreamweaver ou atualizar um HTML existente do Dreamweaver. Ou possvel copiar o HTML do Dreamweaver para a rea de transferncia. possvel exportar um arquivo SWF do Flash ou copiar objetos selecionados como vetores. O boto Exportao rpida tambm pode ser usado para iniciar outros aplicativos, bem como visualizar documentos do Fireworks em um navegador especfico. Atravs da simplificao do processo de exportao, o boto Exportao rpida economiza tempo e melhora o fluxo de trabalho de design.
Nota: O boto Exportao rpida exporta grficos e fatias com o uso das configuraes especificadas no painel Otimizar; dessa forma, certificar-se de otimizar o grfico antes de export-lo com o boto Exportao rpida. Para mais informaes sobre otimizao, consultar Sobre otimizao na pgina 325.

Para exportar um documento ou grfico selecionado do Fireworks com o uso do boto Exportao rpida: 1

Clicar no boto Exportao rpida e selecionar uma opo de exportao no menu pop-up exibido. As opes apropriadas sero definidas automaticamente na caixa de dilogo Exportar. Alterar as opes, caso desejado.

Selecionar uma localizao na qual armazenar os arquivos exportados, digitar um nome de arquivo e clicar em Salvar.

Para iniciar outro aplicativo Macromedia com o uso do boto Exportao rpida:

Clicar no boto Exportao rpida e, no submenu do aplicativo, selecionar a opo Iniciar.

Otimizao e exportao 361

Como personalizar o menu pop-up Exportao rpida Desde que o usurio conhea JavaScript e XML, possvel adicionar opes ao menu pop-up Exportao rpida.
Para adicionar opes ao menu pop-up Exportao rpida: 1

Criar arquivos JSF personalizados e arrast-los na pasta Quick Export Menu do disco rgido.
Nota: A localizao exata dessa pasta varia em funo do sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

Editar o arquivo Quick Export Menu.xml incluindo as referncias aos novos arquivos JSF.

Ao iniciar o Fireworks novamente, as novas opes criadas sero adicionadas ao menu pop-up Exportao rpida. Para mais informaes, consultar Extending Fireworks MX, disponvel, no formato PDF, no CD de instalao do Macromedia Fireworks MX.

362 Captulo 15

CAPTULO 16 Uso do Fireworks com outros aplicativos

Na criao de multimdia ou contedo para a Web, o Macromedia Fireworks MX representa um componente essencial da caixa de ferramentas de qualquer designer. Ele se integra perfeitamente com outros aplicativos, oferecendo vrios recursos de integrao que simplificam o processo de criao. possvel exportar grficos do Fireworks para diversos aplicativos, inclusive para outros produtos da Macromedia. Quando utilizado em conjunto com outros aplicativos da Macromedia, o Fireworks oferece recursos de integrao sofisticados:

O Fireworks pode ser iniciado para editar grficos selecionados a partir de vrios aplicativos da
Macromedia, como Dreamweaver, Flash, HomeSite, FreeHand e Director.

Os comportamentos do Fireworks so preservados aps a exportao para vrios aplicativos da


Macromedia, o que permite exportar elementos interativos, como botes e rollovers.

O Dreamweaver e o Fireworks compartilham uma integrao fsica conhecida como Roundtrip


HTML, que permite efetuar alteraes em um aplicativo e fazer com que elas se reflitam integralmente no outro.

O Flash e o Fireworks tambm compartilham uma integrao fsica. possvel importar


arquivos PNG de origem do Fireworks diretamente para o Flash, sem necessitar export-los para qualquer outro formato grfico. O Flash oferece vrias opes que possibilitam o controle da importao de objetos e camadas do Fireworks. O Fireworks tambm simplifica a tarefa de trabalhar com aplicativos que no sejam da Macromedia. simples iniciar e editar tabelas e grficos do Fireworks a partir do Microsoft FrontPage, por exemplo, ou importar e exportar grficos do Photoshop como arquivos totalmente editveis.

Como trabalhar com o Macromedia Dreamweaver MX


Recursos exclusivos de integrao tornam fcil trabalhar em arquivos no Macromedia Dreamweaver e no Macromedia Fireworks de maneira intercambivel. O Dreamweaver e o Fireworks reconhecem e compartilham muitas das edies de arquivo, incluindo alteraes em vnculos, mapas de imagens, fatias de tabelas e muito mais. Juntos, os dois aplicativos proporcionam um fluxo de trabalho simplificado para edio, otimizao e colocao de arquivos grficos da Web em pginas HTML.

363

Se o usurio desejar modificar imagens e tabelas do Fireworks colocadas em um documento do Dreamweaver, bastar iniciar o Fireworks para fazer as edies e, em seguida, retornar ao documento atualizado no Dreamweaver. Para fazer edies rpidas de otimizao em imagens e animaes colocadas no Fireworks, bastar abrir a caixa de dilogo Visualizar exportao do Fireworks e inserir as configuraes atualizadas. Em ambos os casos, as atualizaes sero feitas nos arquivos colocados no Dreamweaver, assim como nos arquivos de origem do Fireworks, se esses arquivos tiverem sido abertos. A criao de marcadores de lugar de imagem no Dreamweaver para futuras imagens do Fireworks simplifica ainda mais o fluxo do trabalho de criao para a Web. Posteriormente, bastar selecionar esses marcadores de lugar e iniciar o Fireworks para criar os grficos desejados nas dimenses especificadas pelas imagens dos marcadores de lugar do Dreamweaver. O Fireworks oferece a opo de alterar as dimenses da imagem, se isso for desejado. Colocao de uma imagem do Fireworks em um arquivo do Dreamweaver H duas maneiras de se colocar grficos do Fireworks em um documento do Dreamweaver: colocar um grfico concludo do Fireworks com o uso do menu Inserir do Dreamweaver ou criar um novo documento do Fireworks com base em um marcador de lugar de imagem do Dreamweaver. Insero de uma imagem do Fireworks no Dreamweaver possvel inserir imagens GIF ou JPEG geradas pelo Fireworks diretamente em um documento do Dreamweaver. Mas primeiro necessrio exportar as imagens do Fireworks. Para mais informaes sobre como exportar imagens GIF e JPEG, consultar Exportao de uma imagem simples na pgina 348.
Para inserir uma imagem do Fireworks em um documento do Dreamweaver: 1 2

Posicionar o ponto de insero no local em que se deseja que a imagem aparea na janela do documento do Dreamweaver. Seguir um dos seguintes procedimentos:

Escolher Inserir > Imagem. Na categoria Comum do painel Objetos, clicar no boto Inserir imagem.
3

Navegar at a imagem exportada do Fireworks e clicar em Abrir. Se o arquivo de imagem no estiver no site atual do Dreamweaver, aparecer uma mensagem perguntando se o usurio deseja copiar o arquivo para a pasta do site.

Criao de um novo arquivo do Fireworks com base em um marcador de lugar do Dreamweaver Os marcadores de lugar de imagem combinam a eficincia do Fireworks e do Dreamweaver, o que permite testar vrios layouts de pgina da Web antes de se criar a arte final da pgina. Esses marcadores permitem especificar o tamanho e a posio de futuras imagens do Fireworks a serem colocadas no Dreamweaver. O processo de criao de uma imagem do Fireworks com base em um marcador de lugar de imagem do Dreamweaver cria um novo documento do Fireworks cuja tela tem as mesmas dimenses do marcador de lugar selecionado. No Fireworks, possvel utilizar qualquer uma de suas ferramentas para criar grficos. at mesmo possvel fatiar o documento e adicionar interatividade com o uso de botes, rollovers e outros comportamentos.

364 Captulo 16

Nota: Todos os comportamentos aplicados no Fireworks so preservados aps a exportao para o Dreamweaver. Da mesma forma, a maioria dos comportamentos do Dreamweaver aplicados a marcadores de lugar de imagem tambm so preservados quando iniciados e editados com o Fireworks. Entretanto, h uma exceo: rollovers desmembrados aplicados a marcadores de lugar de imagem no Dreamweaver no so preservados quando iniciados e editados no Fireworks.

Uma vez que a sesso do Fireworks tenha terminado e o usurio tenha retornado ao Dreamweaver, o novo grfico do Fireworks que ele criou substituir o marcador de lugar de imagem originalmente selecionado.
Para criar uma imagem do Fireworks com base em um marcador de lugar de imagem no Dreamweaver: 1 2

No Dreamweaver, salvar o documento HTML desejado em um local dentro da pasta do site do Dreamweaver. Posicionar o ponto de insero na posio desejada no documento e escolher Inserir > Marcador de lugar de imagem. Um marcador de lugar de imagem inserido no documento do Dreamweaver.

Seguir um dos seguintes procedimentos:

Selecionar o marcador de lugar de imagem e clicar em Criar no Inspetor de propriedades. Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar duas vezes
no marcador de lugar de imagem.

Clicar com o boto direito do mouse (Windows) ou manter pressionada a tecla Control
(Macintosh) e clicar, e escolher Criar imagem no Fireworks. O Dreamweaver iniciar o Fireworks caso ainda no esteja aberto. A janela do documento indica que o usurio est editando uma imagem no Dreamweaver.

4 5

Criar uma imagem no Fireworks e clicar em Concludo ao terminar. Na caixa de dilogo Salvar como, especificar um nome e local para o arquivo PNG de origem e clicar em Salvar.
Nota: O nome inserido para o marcador de lugar de imagem no Inspetor de propriedades do Dreamweaver ser o nome de arquivo padro no Fireworks.

Para mais informaes sobre como salvar arquivos PNG do Fireworks, consultar Salva de um arquivo do Fireworks na pgina 82.

Uso do Fireworks com outros aplicativos 365

6 7

Na caixa de dilogo Exportar, especificar um nome para o arquivo ou arquivos de imagem exportados. Esses so os JPEGs ou GIFs que sero exibidos no Dreamweaver. Especificar uma localizao para o arquivo ou arquivos de imagem exportados. O local escolhido deve estar dentro da pasta do site do Dreamweaver. Para mais informaes sobre exportao, consultar Exportao do Fireworks na pgina 347. Clicar em Salvar. Quando o usurio retornar ao Dreamweaver, a nova tabela ou imagem do Fireworks que ele criou substituir o marcador de lugar de imagem que selecionou originalmente.

Colocao de HTML do Fireworks no Dreamweaver H vrias maneiras de se colocar HTML do Fireworks no Dreamweaver: exportar o HTML ou copiaro HTML do Fireworks para a rea de transferncia. Uma outra possibilidade abrir o arquivo HTML exportado do Fireworks no Dreamweaver e copiar e colar sees de cdigo selecionadas. Com o comando Atualizar HTML do Fireworks, simples atualizar o cdigo exportado para o Dreamweaver. Existe at mesmo uma opo de exportao do HTML como um item de biblioteca do Dreamweaver. possvel exportar HTML do Fireworks como camadas CSS (Folha de estilos em cascata, Cascading Style Sheet). Para mais informaes, consultar Exportao de HTML na pgina 352.
Nota: Antes de exportar, copiar ou atualizar HTML do Fireworks para utilizar no Dreamweaver, certificar-se de escolher Dreamweaver como tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Exportao de HTML do Fireworks para o Dreamweaver A exportao de arquivos do Fireworks para o Dreamweaver um processo em duas etapas. A primeira etapa consiste em exportar arquivos do Fireworks diretamente para uma pasta do site do Dreamweaver. Isso gera um arquivo HTML e os arquivos de imagem associados no local especificado. A etapa seguinte consiste em colocar o cdigo HTML no Dreamweaver com o uso do recurso Inserir.
Nota: Antes de exportar, certificar-se de escolher Dreamweaver como o tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para exportar HTML do Fireworks:

Exportar o documento para o formato HTML. Consultar Exportao de HTML do Fireworks na pgina 354.
Para inserir HTML do Fireworks em um documento do Dreamweaver: 1 2

No Dreamweaver, salvar o documento em um site definido. Posicionar o ponto de insero no documento em que se deseja que o cdigo HTML inserido comece.

366 Captulo 16

Seguir um dos seguintes procedimentos:

Escolher Inserir > Imagens interativas > HTML do Fireworks. Na categoria Comum do painel Objetos, clicar no boto Inserir HTML do Fireworks.
4 5

Na caixa de dilogo que aparece, clicar em Procurar para escolher o arquivo HTML do Fireworks desejado. Escolher Excluir o arquivo aps a insero, para mover o arquivo HTML para a Lixeira (Windows) ou Lixo (Macintosh) quando a operao estiver concluda. Utilizar essa opo caso no seja mais necessrio o arquivo HTML do Fireworks aps sua insero. Essa opo no afeta o arquivo PNG de origem associado ao arquivo HTML.
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele ser permanentemente excludo, em vez de movido para o Lixo ou Lixeira.

Clicar em OK para inserir o cdigo HTML, junto com suas imagens, fatias e cdigo JavaScript associados, no documento do Dreamweaver.

Cpia de HTML do Fireworks para a rea de transferncia para utilizar no Dreamweaver Uma maneira rpida de se colocar um HTML gerado pelo Fireworks no Dreamweaver copi-lo do Fireworks para a rea de transferncia e col-lo diretamente em um documento do Dreamweaver. Todo o cdigo HTML e JavaScript associado ao documento do Fireworks copiado para o documento do Dreamweaver, as imagens so exportadas para o local especificado e o Dreamweaver atualiza o HTML com vnculos, relativos ao site, com essas imagens.
Nota: Antes de copiar para a rea de transferncia, certificar-se de escolher Dreamweaver como o tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para copiar HTML do Fireworks para a rea de transferncia para utilizao no Dreamweaver:

Copiar HTML para a rea de transferncia no Fireworks e col-lo em um documento do Dreamweaver. Consultar Como copiar um HTML para a rea de transferncia na pgina 355. Como copiar cdigo de um arquivo exportado do Fireworks e col-lo no Dreamweaver possvel abrir um arquivo HTML exportado do Fireworks no Dreamweaver e copiar e colar manualmente apenas as sees desejadas em outro documento do Dreamweaver.
Nota: Antes de exportar do Fireworks, certificar-se de escolher Dreamweaver como o tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para copiar cdigo de um arquivo exportado do Fireworks e col-lo no Dreamweaver:

Exportar um arquivo HTML do Fireworks e copiar e colar o cdigo em um documento existente do Dreamweaver. Consultar Como copiar e colar HTML de um arquivo do Fireworks exportado na pgina 356. Atualizao do HTML do Fireworks exportado para o Dreamweaver O comando Atualizar HTML do Fireworks permite fazer alteraes em um documento HTML exportado anteriormente para o Dreamweaver.

Uso do Fireworks com outros aplicativos 367

Nota: Embora Atualizar HTML seja um recurso til para atualizar HTML exportado anteriormente para o Dreamweaver, o Roundtrip HTML oferece vantagens ainda maiores. Para mais informaes, consultar Edio de um arquivo do Fireworks no Dreamweaver na pgina 369.

Com o comando Atualizar HTML, possvel editar uma imagem PNG de origem no Fireworks e, em seguida, atualizar automaticamente qualquer cdigo HTML exportado e os arquivos de imagem colocados em um documento do Dreamweaver. Esse comando permite atualizar arquivos do Dreamweaver mesmo quando o Dreamweaver no est sendo executado.
Nota: Antes de atualizar HTML, certificar-se de escolher Dreamweaver como o tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para atualizar HTML do Fireworks no Dreamweaver: 1 2 3 4

Fazer alteraes no documento PNG desejado no Fireworks. Escolher Arquivo > Atualizar HTML ou clicar no boto Exportao rpida e escolher Atualizar HTML no menu pop-up do Dreamweaver. Navegar at o arquivo do Dreamweaver que contm o HTML que se deseja atualizar e clicar em Abrir. Navegar at a pasta de destino onde se deseja colocar os arquivos de imagem atualizados e clicar em Abrir. O Fireworks atualiza o cdigo HTML e JavaScript no documento do Dreamweaver. Alm disso, ele tambm exporta as imagens atualizadas associadas ao HTML e as coloca na pasta de destino especificada. Se o Fireworks no conseguir encontrar o cdigo HTML correspondente para atualizar, ele oferecer a opo de inserir o novo cdigo HTML no documento do Dreamweaver. O Fireworks coloca a seo JavaScript do novo cdigo no incio do documento e coloca a tabela HTML ou o vnculo com a imagem no final.

Exportao de um arquivo do Fireworks para uma biblioteca do Dreamweaver Os itens de biblioteca do Dreamweaver simplificam o processo de edio e atualizao de componentes usados com freqncia em sites na Web como, por exemplo, logotipos de empresas ou outros elementos grficos que aparecem em todas as pginas de um site. Um item de biblioteca uma parte de um arquivo HTML localizado em uma pasta denominada Library na raiz do site. Os itens de biblioteca aparecem na paleta Biblioteca do Dreamweaver. possvel arrastar uma cpia da paleta Biblioteca para qualquer pgina do site na Web. No h possibilidade de se editar um item de biblioteca diretamente no documento do Dreamweaver; s possvel editar o item de biblioteca principal. Em seguida, pode-se fazer com que o Dreamweaver atualize cada cpia desse item, medida que ela for colocada no site na Web. Os itens de biblioteca do Dreamweaver so muito semelhantes aos smbolos do Fireworks; as alteraes feitas no documento da biblioteca principal (LBI) se refletem em todas as ocorrncias da biblioteca no site.
Para exportar um documento do Fireworks como um item de biblioteca do Dreamweaver: 1

Escolher Arquivo > Exportar.

368 Captulo 16

No menu pop-up Salvar como tipo, escolher Biblioteca do Dreamweaver (*.lbi).

Escolher a pasta Library no site do Dreamweaver como o local onde colocar os arquivos. Se essa pasta no existir, aparecer a caixa de dilogo Selecionar pasta, que permite criar ou localizar uma pasta. O nome da pasta deve ser Library; o uso de maisculas e minsculas importante, pois o Dreamweaver distingue maisculas de minsculas.
Nota: O Dreamweaver no reconhecer o arquivo exportado como um item de biblioteca, a menos que ele seja salvo na pasta Library.

3 4 5 6

Na caixa de dilogo Exportar, digitar um nome de arquivo. Se a imagem contiver fatias, escolher as opes de fatiamento. Para mais informaes, consultar Exportao de um documento fatiado na pgina 348. Selecionar Colocar imagens na subpasta para escolher uma pasta separada para salvar as imagens. Clicar em Salvar.

Edio de um arquivo do Fireworks no Dreamweaver O Roundtrip HTML um recurso eficiente que integra fisicamente o Fireworks e o Dreamweaver. Ele permite efetuar alteraes em um aplicativo e fazer com que elas se reflitam integralmente no outro. Com o Roundtrip HTML, a integrao iniciar-e-editar permite editar imagens e tabelas geradas pelo Fireworks e colocadas em um documento do Dreamweaver. O Dreamweaver inicia automaticamente o arquivo PNG de origem do Fireworks referente imagem ou tabela colocada, permitindo que as edies desejadas sejam feitas no Fireworks. De volta ao Dreamweaver, as atualizaes feitas no Fireworks so aplicadas imagem ou tabela colocada.
Nota: Antes de trabalhar com o Roundtrip HTML, necessrio executar algumas tarefas preliminares. Para mais informaes, consultar Definio de uma opo de iniciar-e-editar na pgina 374.

Uso do Fireworks com outros aplicativos 369

Sobre o Roundtrip HTML O Fireworks reconhece e preserva a maioria dos tipos de edio feitas em um documento no Dreamweaver, incluindo vnculos alterados, mapas de imagens editados, HTML e texto editados em fatias HTML, bem como comportamentos compartilhados entre o Fireworks e o Dreamweaver. O Inspetor de propriedades do Dreamweaver ajuda a identificar, em um documento, imagens, fatias de tabelas e tabelas geradas pelo Fireworks. Embora o Fireworks aceite a maioria dos tipos de edio do Dreamweaver, alteraes radicais feitas na estrutura de uma tabela no Dreamweaver podero criar diferenas irreconciliveis entre os dois aplicativos. Se o usurio fizer alteraes profundas em um layout de tabela no Dreamweaver e, em seguida, tentar inici-la e edit-la no Fireworks, ser exibida uma mensagem avisando que as alteraes feitas no Fireworks substituiro todas as edies feitas anteriormente na tabela no Dreamweaver. Se o usurio desejar fazer alteraes considerveis em um layout de tabela, dever utilizar o recurso iniciar-e-editar do Dreamweaver para editar a tabela no Fireworks. Edio de uma imagem do Fireworks O Fireworks permite editar imagens individuais colocadas em um documento do Dreamweaver.
Nota: Antes de editar grficos do Fireworks no Dreamweaver, necessrio executar algumas tarefas preliminares. Para mais informaes, consultar Definio de uma opo de iniciar-e-editar na pgina 374.

Para iniciar e editar uma imagem do Fireworks colocada no Dreamweaver: 1 2

No Dreamweaver, escolher Janela > Propriedades para abrir o Inspetor de propriedades, se necessrio. Seguir um dos seguintes procedimentos: imagem do Fireworks e exibe o nome do arquivo PNG de origem conhecido da imagem) Em seguida, no Inspetor de propriedades, clicar em Editar.

Selecionar a imagem desejada. (o Inspetor de propriedades identifica a seleo como uma Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar duas vezes
na imagem que deseja editar.

Clicar com o boto direito do mouse (Windows) ou manter pressionada a tecla Control
(Macintosh) e clicar na imagem desejada, e escolher Editar com Fireworks no menu contextual. O Dreamweaver inicia o Fireworks, se este ainda no estiver aberto.
3

Se perguntado, especificar se deseja localizar um arquivo de origem do Fireworks para a imagem colocada. Para mais informaes sobre arquivos PNG de origem do Fireworks, consultar Salva de um arquivo do Fireworks na pgina 82. No Fireworks, editar a imagem. A janela do documento indica que o usurio est editando uma imagem a partir do Dreamweaver. O Dreamweaver reconhece e preserva todas as edies aplicadas imagem no Fireworks. Quando terminar de fazer as edies, clicar em Concludo na janela do documento. A imagem exportada com as configuraes atuais de otimizao, o arquivo GIF ou JPEG usado pelo Dreamweaver atualizado e o arquivo PNG de origem salvo, se tiver sido selecionado um arquivo de origem.
Nota: O ato de abrir uma imagem a partir da janela Site do Dreamweaver no ativa os recursos de integrao do Fireworks descritos acima; o Fireworks no abre o arquivo PNG original. Para usar os recursos de integrao com o Fireworks, abrir as imagens a partir da janela do documento do Dreamweaver.

370 Captulo 16

Edio de tabelas do Fireworks Quando o usurio inicia e edita uma fatia de imagem que faz parte de uma tabela colocada do Fireworks, o Dreamweaver automaticamente inicia o arquivo PNG de origem de toda a tabela.
Nota: Antes de editar tabelas do Fireworks no Dreamweaver, necessrio executar algumas tarefas preliminares. Para mais informaes, consultar Definio de uma opo de iniciar-e-editar na pgina 374.

Para iniciar e editar uma tabela do Fireworks colocada no Dreamweaver: 1 2

No Dreamweaver, escolher Janela > Propriedades para abrir o Inspetor de propriedades, se necessrio. Seguir um dos seguintes procedimentos: Clicar dentro da tabela e clicar no tag TABLE na barra de status para selecionar toda a tabela. (o Inspetor de propriedades identifica a seleo como uma tabela do Fireworks e exibe o nome do arquivo PNG de origem conhecido da tabela) Em seguida, no Inspetor de propriedades, clicar em Editar. Clicar no canto superior esquerdo da tabela para selecion-la e, em seguida, no Inspetor de propriedades, clicar em Editar. Selecionar uma imagem na tabela e clicar em Editar no Inspetor de propriedades. Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar duas vezes na imagem que deseja editar. Clicar com o boto direito do mouse (Windows) ou manter pressionada a tecla Control (Macintosh) e clicar na imagem e escolher Editar com Fireworks no menu contextual. O Dreamweaver inicia o Fireworks, se este ainda no estiver aberto. O arquivo PNG de origem da tabela inteira aparece na janela do documento.
Nota: Para mais informaes sobre arquivos PNG de origem do Fireworks, consultar Salva de um arquivo do Fireworks na pgina 82.

No Fireworks, fazer as edies desejadas. O Dreamweaver reconhece e preserva todas as edies aplicadas imagem no Fireworks. Quando terminar de fazer as edies, clicar em Concludo na janela do documento. Os arquivos HTML e de fatias de imagem da tabela so exportados com as configuraes atuais de otimizao, a tabela colocada no Dreamweaver atualizada e o arquivo PNG de origem salvo.

Sobre comportamentos do Dreamweaver Se um grfico simples sem fatias do Fireworks for inserido em um documento do Dreamweaver e um comportamento do Dreamweaver for aplicado, esse grfico ter uma fatia sobre ele quando for iniciado e editado no Fireworks. Inicialmente, a fatia no fica visvel, porque as fatias so desativadas automaticamente ao se iniciar e editar grficos simples sem fatias aos quais comportamentos do Dreamweaver estejam aplicados. Para exibir a fatia, basta ativar sua visibilidade na Camada da Web do painel Camadas. A exibio, no Fireworks, de propriedades de uma fatia com um comportamento do Dreamweaver anexado pode fazer com que a caixa de texto Link do Inspetor de propriedades exiba javascript:;. No faz mal excluir esse texto. Se o usurio desejar digitar por cima dele para inserir um URL, o comportamento permanecer inalterado no Dreamweaver. O Dreamweaver aceita todos os comportamentos aplicados no Fireworks, inclusive aqueles necessrios para rollovers e botes. Os comportamentos do Dreamweaver especificados a seguir so aceitos pelo Fireworks durante uma sesso de iniciar-e-editar: Rollover simples

Uso do Fireworks com outros aplicativos 371

Trocar imagem Restaurar imagem de troca Definir texto da barra de status Definir imagem da barra de navegao Menu pop-up

Otimizao de imagem e animao do Fireworks colocadas no Dreamweaver O usurio pode iniciar o Fireworks a partir do Dreamweaver para fazer alteraes rpidas de exportao em imagens e animaes colocadas do Fireworks, como fazer uma nova amostragem ou alterar o tipo do arquivo. O Fireworks permite fazer alteraes nas configuraes de otimizao e de animao, bem como no tamanho e rea da imagem exportada.
Para alterar as configuraes de otimizao de uma imagem do Fireworks colocada no Dreamweaver: 1 2

No Dreamweaver, selecionar a imagem desejada e escolher Comandos > Otimizar a imagem no Fireworks. Se perguntado, especificar se deseja iniciar um arquivo de origem do Fireworks para a imagem colocada. Uma caixa de dilogo exibida. Embora a barra de ttulo no exiba esse nome, essa , na verdade, a caixa de dilogo Visualizar exportao do Fireworks.

Fazer as edies desejadas na caixa de dilogo Visualizar exportao: Para editar as configuraes de otimizao, clicar na guia Opes. Para mais informaes, consultar Como usar Visualizar exportao na pgina 327.
3

372 Captulo 16

Para editar o tamanho e rea da imagem exportada, clicar na guia Arquivo e alterar as
configuraes desejadas. Se o usurio alterar as dimenses da imagem no Fireworks, tambm ser necessrio redefinir o seu tamanho no Inspetor de propriedades quando retornar ao Dreamweaver.

Para editar as configuraes de animao da imagem, clicar na guia Animao e alterar as


configuraes desejadas.
4

Quando terminar de editar a imagem, clicar em Atualizar. A imagem ser exportada com as novas configuraes de otimizao, o arquivo GIF ou JPEG colocado no Dreamweaver ser atualizado e o arquivo PNG de origem ser salvo, caso tenha sido selecionado um arquivo de origem. Se o formato da imagem tiver sido alterado, o verificador de vnculos do Dreamweaver solicitar a atualizao das referncias imagem. Por exemplo, se o formato de uma imagem chamada minha_imagem tiver sido alterado de GIF para JPEG, clicando-se em OK neste aviso alterar todas as referncias a minha_imagem.gif no site para minha_imagem.jpg.

Redimensionamento de uma imagem colocada do Fireworks Ao iniciar e otimizar uma imagem do Fireworks a partir do Dreamweaver, o usurio pode redimensionar a imagem e selecionar uma rea especfica da imagem para exportar.
Nota: Se o usurio alterar as dimenses da imagem no Fireworks, tambm ser necessrio redefinir o seu tamanho no Inspetor de propriedades quando retornar ao Dreamweaver.

Para especificar as dimenses da imagem exportada: 1 2

No Fireworks, clicar na guia Arquivo na caixa de dilogo Visualizar exportao. Para colocar a imagem em escala ao export-la, especificar uma porcentagem de escala ou digitar a largura e a altura desejadas em pixels. Selecionar Restringir para colocar em escala a largura e a altura proporcionalmente.

Para exportar uma rea selecionada da imagem, selecionar a opo rea de exportao e seguir um dos seguintes procedimentos para especificar a rea de exportao: exportao desejada. (arrastar dentro da visualizao a fim de mover reas ocultas para a exibio)

Arrastar a borda pontilhada que aparece em volta da visualizao at que ela circunde a rea de Digitar as coordenadas de pixel para os limites da rea de exportao.

Uso do Fireworks com outros aplicativos 373

Alterao de uma configurao de animao Durante o processo de iniciar e otimizar uma animao colocada no Fireworks tambm possvel editar as configuraes da animao. As opes de animao na caixa de dilogo Visualizar exportao so semelhantes quelas disponveis no painel Molduras do Fireworks.
Nota: No possvel editar elementos grficos individuais em uma animao do Fireworks durante uma sesso de otimizao iniciada a partir do Dreamweaver. Para editar os elementos grficos em uma animao, necessrio iniciar e editar a animao do Fireworks. Para mais informaes, consultar Edio de um arquivo do Fireworks no Dreamweaver na pgina 369.

Para editar uma imagem animada: 1 2

No Fireworks, clicar na guia Animao na caixa de dilogo Visualizar exportao. Utilizar as tcnicas a seguir para visualizar molduras de animao a qualquer momento: caixa de dilogo ou utilizar os controles de moldura na rea inferior direita da caixa de dilogo.

Para exibir uma nica moldura, selecionar a moldura desejada na lista do lado esquerdo da Para reproduzir a animao, clicar no controle Reproduzir/Parar na rea inferior direita da caixa
de dilogo.
3

Fazer as edies na animao: escolher uma opo no menu pop-up (indicado pelo cone de lixeira).

Para especificar o mtodo de eliminao de moldura, selecionar a moldura desejada na lista e Para definir o retardo da moldura, selecionar a moldura desejada na lista e digitar o tempo de
retardo em centsimos de segundo.

Para configurar a animao de modo a reproduzi-la repetidamente, clicar no boto Ciclos e


escolher o nmero desejado de repeties no menu pop-up.

Escolher a opo Cortar automtico para cortar cada moldura como uma rea retangular, de
forma que apenas a rea de imagem que difere entre as molduras seja exportada. A seleo dessa opo reduz o tamanho do arquivo.

Escolher a opo Diferena automtica para exportar apenas os pixels que se alteram entre
molduras. A seleo dessa opo reduz o tamanho do arquivo. Definio de uma opo de iniciar-e-editar Para usar efetivamente o Roundtrip HTML, necessrio executar algumas tarefas preliminares, como definir o Fireworks como o editor de imagem primrio no Dreamweaver e especificar preferncias de iniciar-e-editar no Fireworks.
Nota: Alm disso, necessrio definir um site local no Dreamweaver antes de trabalhar com o Roundtrip HTML. Para mais informaes, consultar Usando o Dreamweaver MX.

374 Captulo 16

Designao do Fireworks como o editor de imagem externo primrio do Dreamweaver O Dreamweaver oferece preferncias para iniciar automaticamente aplicativos especficos a fim de se editar determinados tipos de arquivo. Para usar os recursos iniciar-e-editar do Fireworks, certificar-se de que o Fireworks esteja definido como o editor primrio para arquivos GIF, JPEG e PNG no Dreamweaver. Embora seja possvel usar verses anteriores do Fireworks como editores de imagem externos, essas verses oferecem recursos iniciar-e-editar limitados. Ao trabalhar com o Roundtrip HTML, o Fireworks 4 no oferece suporte total a edies feitas em propriedades de clulas de tabelas do Dreameweaver, nem a comportamentos aplicados no Dreamweaver. O Fireworks 3 no fornece suporte completo execuo e edio de tabelas colocadas e fatias de tabelas, enquanto o Fireworks 2 no oferece suporte execuo e edio de arquivos PNG de origem de imagens colocadas.
Para definir o Fireworks como o editor de imagem externo primrio no Dreamweaver: 1 2 3

No Dreamweaver, escolher Editar > Preferncias e escolher Tipos de arquivo/editores. Na lista Extenses, selecionar uma extenso de arquivo de imagem da Web (.gif, .jpg ou .png). Na lista Editores, selecionar Fireworks, se ele aparecer na lista. Caso o Fireworks no esteja na lista, clicar no boto do sinal de adio (+), localizar o aplicativo Fireworks no disco rgido e clicar em Abrir.

4 5

Clicar em Tornar primrio. Repetir as etapas de 2 a 4 para definir o Fireworks como o editor primrio para outras extenses de arquivo de imagem da Web.

Uso do Fireworks com outros aplicativos 375

Sobre Design Notes e arquivos de origem Sempre que um arquivo do Fireworks exportado de uma origem PNG salva para um site do Dreamweaver, o Fireworks escreve uma Design Note que contm informaes sobre o arquivo. Por exemplo, durante a exportao de uma tabela do Fireworks, este escreve uma Design Note para cada imagem exportada. Essas Design Notes contm referncias ao arquivo PNG de origem que gerou os arquivos exportados. Quando uma imagem do Fireworks iniciada e editada a partir do Dreamweaver, o Dreamweaver usa uma Design Note para localizar um arquivo PNG de origem para esse arquivo. Para obter melhores resultados, recomendvel salvar sempre o arquivo PNG de origem do Fireworks e os arquivos exportados em um site do Dreamweaver. Isso garante que qualquer usurio que compartilhe o site possa localizar o PNG de origem ao iniciar o Fireworks a partir do Dreamweaver. Especificao de uma preferncia de iniciar-e-editar para um arquivo de origem do Fireworks As preferncias de iniciar-e-editar do Fireworks permitem especificar como manipular arquivos PNG de origem ao iniciar arquivos do Fireworks a partir de outro aplicativo. O Dreamweaver reconhece as preferncias de iniciar-e-editar do Fireworks apenas em determinadas situaes em que se inicia e otimiza uma imagem do Fireworks. Especificamente, necessrio iniciar e otimizar uma imagem que no seja parte de uma tabela do Fireworks e que no contenha um caminho correto na Design Note para um arquivo PNG de origem. Em todas as demais situaes, inclusive em todos os casos de iniciar-e-editar imagens do Fireworks, o Dreamweaver inicia automaticamente o arquivo PNG de origem, solicitando localizar esse arquivo de origem caso no possa ser encontrado.
Para especificar preferncias de iniciar-e-editar para o Fireworks: 1

No Fireworks, escolher Editar > Preferncias.


Nota: No Mac OS X, escolher Fireworks > Preferncias.

2 3

Clicar na guia Iniciar e editar (Windows) ou escolher Iniciar e editar no menu pop-up (Macintosh). Especificar as opes de preferncia a serem utilizadas durante a edio ou otimizao de imagens do Fireworks colocadas em um aplicativo externo:
Usar sempre o PNG de origem inicia

automaticamente o arquivo PNG do Fireworks que est definido na Design Note como a origem da imagem colocada. As atualizaes so feitas tanto no PNG de origem quanto na sua imagem colocada correspondente.

Nunca usar PNG de origem inicia automaticamente a imagem colocada do Fireworks, independentemente da existncia ou no de um arquivo PNG de origem. As atualizaes so feitas apenas na imagem colocada. Perguntar ao iniciar permite especificar toda vez se o usurio deseja ou no iniciar o arquivo PNG de origem. Durante a edio ou otimizao de uma imagem colocada, o Fireworks exibe uma mensagem perguntando se o usurio deseja tomar uma deciso sobre iniciar-e-editar. Tambm possvel especificar preferncias globais de iniciar-e-editar nessa mensagem.

376 Captulo 16

Como trabalhar com o Macromedia Flash MX


H uma integrao perfeita entre o Fireworks e o Macromedia Flash. simples exportar vetores, bitmaps, animaes e grficos de botes de mltiplos estados do Fireworks para usar no Flash. A funcionalidade iniciar-e-editar tambm facilita a edio de grficos do Fireworks no Flash.
Nota: Os comportamentos dos botes do Fireworks e outros tipos de interatividade no so importados para o Flash.

Colocao de um arquivo do Fireworks no Flash H vrias maneiras de se colocar grficos do Fireworks no Flash. A melhor delas importar um arquivo PNG do Fireworks. Esse mtodo proporciona maior controle sobre a forma de importao dos grficos e animaes para o Flash. Embora oferea menos controle do que a importao de PNGs do Fireworks, tambm permite importar arquivos JPEG, GIF, PNG e SWF que foram exportados do Fireworks. Tambm existe a opo de se copiar manualmente grficos do Fireworks e col-los diretamente no Flash. Importao de um arquivo PNG do Fireworks para o Flash possvel importar arquivos PNG de origem do Fireworks diretamente para o Flash sem necessitar export-los para qualquer outro formato grfico. Todos os vetores, bitmaps, animaes e grficos de botes de mltiplos estados do Fireworks podem ser importados para o Flash.
Nota: Os comportamentos dos botes do Fireworks e outros tipos de interatividade no so importados para o Flash.

H diversas opes de importao de arquivos PNG do Fireworks para o Flash escolha: importar todos os objetos e camadas como um smbolo de biblioteca ou importar todo o contedo para uma nica camada nova. Com relao a objetos vetoriais e de texto, possvel manter sua editabilidade ou optar por manter a aparncia somente quando os objetos tiverem efeitos aplicados ou outras propriedades que no estejam disponveis no Flash. Uma outra opo absterse de toda a editabilidade e optar por importar o arquivo PNG do Fireworks como uma nica imagem bitmap plana.
Para importar um arquivo PNG do Fireworks para o Flash: 1

Salvar o documento desejado no Fireworks. Para mais informaes sobre como salvar arquivos, consultar Salva de um arquivo do Fireworks na pgina 82.

2 3

Alternar para um documento aberto no Flash. (Opcional) Clicar na moldura principal e na camada para a qual o contedo do Fireworks ser importado. Isso s ser necessrio se o usurio for importar o PNG como um smbolo de biblioteca (clipe de filme). Escolher Arquivo > Importar.

Uso do Fireworks com outros aplicativos 377

Navegar at o arquivo PNG desejado, selecion-lo na caixa de dilogo Importar e clicar em OK. A caixa de dilogo Configuraes de importao de PNG do Fireworks exibida.

Escolher uma opo de Estrutura de arquivos:


Importar como clipe de filme e manter camadas importa o arquivo do Fireworks como um clipe

de filme que contm todas as camadas e molduras do arquivo original do Fireworks. O clipe de filme inserido na moldura principal e na camada atuais. Se uma moldura principal no for selecionada antes da importao, o clipe de filme ser colocado na moldura principal anterior.
Importar para nova camada na cena atual importa o arquivo do Fireworks para uma nica camada nova, com todas as suas molduras intactas. 7

Escolher a forma de importao de texto e objetos vetoriais desejada:


Converter se necessrio para manter a aparncia preserva a editabilidade de objetos vetoriais, a menos que tenham preenchimentos, traos ou efeitos especiais aos quais o Flash no oferea suporte. Para manter a aparncia desses objetos, o Flash os converte em imagens bitmap no editveis. Manter todos os traados editveis preserva a editabilidade de todos os objetos vetoriais. Se os objetos contiverem preenchimentos, traos ou efeitos especiais aos quais o Flash no oferea suporte, essas propriedades sero perdidas.

Escolher a forma de importao de texto desejada:


Converter se necessrio para manter a aparncia preserva a editabilidade do texto, a menos que tenha preenchimentos, traos ou efeitos especiais aos quais o Flash no oferea suporte. Para manter a aparncia desse texto, o Flash o converte em imagem bitmap no editvel. Manter todo o texto editvel preserva a editabilidade de todo o texto. Se o texto contiver preenchimentos, traos ou efeitos especiais aos quais o Flash no oferea suporte, essas propriedades sero perdidas.

Escolher a opo Importar como um nico bitmap nivelado para importar o arquivo como uma nica imagem bitmap e perder toda a editabilidade.
Nota: Se essa opo for selecionada, nenhuma das outras opes da caixa de dilogo ficaro disponveis.

10

Clicar em OK. O arquivo PNG do Fireworks importado para o Flash com as opes de importao escolhidas.

378 Captulo 16

Como copiar e colar um grfico do Fireworks no Flash Uma maneira rpida de colocar grficos do Fireworks no Flash copi-los e col-los.
Nota: Para copiar grficos em verses anteriores do Flash, necessrio escolher Editar > Copiar contornos de traado.

Durante o processo de copiar grficos do Fireworks e col-los no Flash, perdem-se alguns atributos, como Efeitos ao vivo e texturas. Alm disso, o Flash oferece suporte somente a preenchimentos slidos e dgrad e a traos bsicos.
Para copiar e colar grficos no Flash: 1 2 3

Selecionar o objeto ou objetos a serem copiados. Escolher Editar > Copiar ou clicar no boto Exportao rpida e escolher Copiar no menu pop-up do Macromedia Flash. No Flash, criar um novo documento e escolher Editar > Colar.
Nota: Talvez seja necessrio desagrupar objetos com Modificar > Desagrupar para que eles possam ser editados como objetos vetoriais separados no Flash.

Sobre exportao de grficos do Fireworks para outros formatos para usar no Flash possvel exportar grficos do Fireworks como arquivos JPEG, GIF e PNG e, em seguida, import-los para o Flash. Para mais informaes sobre como exportar JPEGs e GIFs, consultar Exportao de uma imagem simples na pgina 348. Para mais informaes sobre como exportar para o formato PNG, consultar Exportao de PNG com transparncia na pgina 381. Para mais informaes sobre como importar qualquer um desses formatos para o Flash, consultar Importao de animao e grficos exportados do Fireworks para o Flash na pgina 381.
Nota: Embora PNG seja o formato de arquivo nativo do Fireworks, os arquivos grficos PNG exportados do Fireworks so diferentes dos arquivos PNG de origem salvos no Fireworks. Os arquivos PNG exportados no so diferentes dos GIFs ou JPEGs; eles contm somente dados de imagens e no contm informaes adicionais, como fatias, camadas, interatividade, Efeitos ao vivo ou outro contedo editvel. Para mais informaes sobre arquivos PNG de origem, consultar Salva de um arquivo do Fireworks na pgina 82.

Exportao de grficos e animao do Fireworks como um arquivo SWF possvel exportar grficos e animaes do Fireworks como arquivos SWF do Flash. H vrias opes de exportao de objetos sua escolha. Algumas formataes so perdidas, a menos que o usurio escolha Manter aparncia na caixa de dilogo Opes de exportao do Flash SWF. O tamanho e a cor do trao so mantidos. As formataes perdidas durante a exportao para o formato SWF incluem as seguintes:

Efeitos ao vivo Categorias de trao e preenchimento, texturas e bordas enevoadas Suavizao de serrilhado em objetos (o Flash Player aplica a suavizao de serrilhado no nvel
do documento; portanto, ela aplicada ao documento durante a exportao)

Modos de mistura e opacidade (objetos com opacidade tornam-se smbolos com um canal alfa). Camadas Mscaras

Uso do Fireworks com outros aplicativos 379

Objetos de fatia, mapas de imagem e comportamentos Algumas opes de formatao de texto, como kerning e traos de bitmap
Para exportar um grfico ou animao do Fireworks como arquivo SWF: 1 2 3 4

Escolher Arquivo > Exportar ou clicar no boto Exportao rpida e escolher Exportar SWF no menu pop-up do Macromedia Flash. Na caixa de dilogo Exportar, digitar um nome de arquivo e escolher uma pasta de destino. Escolher Macromedia Flash SWF no menu pop-up Salvar como. Clicar no boto Opes. A caixa de dilogo Opes de exportao do Flash SWF exibida.

Na seo Objetos, escolher uma das seguintes opes:


Manter traados permite

manter a editabilidade dos traados. Os efeitos e a formatao so

perdidos.
Manter aparncia converte objetos vetoriais em objetos bitmap e preserva a aparncia de traos e preenchimentos aplicados. A editabilidade perdida. 6

Na seo Texto, escolher uma das seguintes opes:


Manter editabilidade permite

manter a editabilidade do texto. Os efeitos e a formatao so

perdidos.
Converter em traados converte texto em traados, preservando qualquer kerning ou espaamento personalizado inserido no Fireworks. A editabilidade do texto perdida. 7 8 9 10

Definir a qualidade de imagens JPEG com o controle deslizante do pop-up Qualidade JPEG. Selecionar as molduras a serem exportadas e a taxa de molduras em segundos. Clicar em OK. Na caixa de dilogo Exportar, clicar em Salvar.

Para mais informaes sobre como importar um arquivo SWF exportado para o Flash, consultar Importao de animao e grficos exportados do Fireworks para o Flash na pgina 381.

380 Captulo 16

Exportao de PNG com transparncia O formato PNG permite transparncia com imagens coloridas de 32 bits. O PNG do Fireworks, o formato de arquivo de origem do programa, tambm oferece suporte para transparncia com imagens coloridas de 32 bits. H uma opo de importao de arquivos PNG de origem do Fireworks diretamente para o Flash. Tambm possvel criar transparncias com um PNG de 8 bits. Existe a possibilidade de exportar grficos PNG de 8 bits do Fireworks com transparncia para inserir no Flash.
Para exportar um PNG de 8 bits com transparncia: 1 2 3 4

No Fireworks, escolher Janela > Otimizar, para abrir o painel Otimizar, se ele ainda no estiver aberto. No menu pop-up Transparncia, escolher PNG 8 como Exportao de formato de arquivo e Transparncia alfa. Escolher Arquivo > Exportar. No menu pop-up Salvar como tipo, selecionar Somente imagens. Dar um nome ao arquivo e clicar em Salvar.

Para mais informaes sobre como importar arquivos PNG exportados para o Flash, consultar Importao de animao e grficos exportados do Fireworks para o Flash na pgina 381. Importao de animao e grficos exportados do Fireworks para o Flash O comando Importar do Flash importa grficos e animaes que foram exportados do Fireworks.
Para importar grficos e animaes do Fireworks para o Flash: 1 2 3

Criar um novo documento no Flash. Escolher Arquivo > Importar e localizar o arquivo do grfico ou animao. Clicar em Abrir para importar o arquivo.

Uso do Fireworks na edio de um grfico importado para o Flash Com a integrao iniciar-e-editar, o usurio pode utilizar o Fireworks para fazer alteraes em um grfico importado anteriormente para o Flash. possvel editar qualquer grfico importado dessa maneira, mesmo que ele no tenha sido exportado do Fireworks.
Nota: Os arquivos PNG nativos do Fireworks importados para o Flash so uma exceo, a menos que tenham sido importados como imagem bitmap plana.

Se o grfico for exportado do Fireworks e o arquivo PNG original for salvo junto com o arquivo grfico exportado, ser possvel abrir o arquivo PNG original no Fireworks a partir do Flash para fazer alteraes. De volta ao Flash, tanto o arquivo PNG como o grfico sero atualizados.
1 2

No Flash, clicar com o boto direito do mouse (Windows) ou manter pressionada a tecla Control (Macintosh) e clicar no arquivo grfico no painel Biblioteca. Escolher Editar com Fireworks no menu pop-up.
Nota: Se Editar com Fireworks no aparecer no menu pop-up, escolher Editar com e localizar o aplicativo Fireworks.

Na caixa Localizar origem, clicar em Sim, se desejar localizar o arquivo PNG original do grfico do Fireworks e clicar em Abrir.

Uso do Fireworks com outros aplicativos 381

Nota: Essa caixa de dilogo poder no aparecer se as preferncias de iniciar-e-editar do Fireworks tiverem sido alteradas.

A arquivo se abre no Fireworks e a janela do documento indica que o arquivo est sendo editado a partir do Flash.
4

Fazer alteraes na imagem e clicar em Concludo quando terminar. O Fireworks exporta um novo arquivo grfico para o Flash e, caso o arquivo PNG original tenha sido editado, ele tambm ser salvo.

Sobre como ampliar o Fireworks com comandos personalizados criados no Flash Com o Flash, possvel criar filmes SWF que contm cdigo JavaScript. Esses filmes podem ser usados como comandos do Fireworks, acessveis a partir do menu Comandos do Fireworks, ou como painis, acessveis a partir do menu Janela. Para mais informaes, consultar Extending Fireworks MX, disponvel como PDF no CD de instalao do Macromedia Fireworks.

Como trabalhar com o Macromedia FreeHand


Visto que ambos os aplicativos oferecem suporte a vetores, simples compartilhar grficos vetoriais entre o Fireworks e o Macromedia FreeHand. No entanto, a aparncia dos objetos pode ficar diferente entre os aplicativos, pois o Fireworks e o FreeHand no compartilham todos os recursos. Para mais informaes, consultar Como trabalhar com outros aplicativos grficos vetoriais na pgina 385. Os procedimentos fornecidos nesta seo se aplicam no apenas ao uso do Fireworks com o FreeHand, mas tambm ao uso do Fireworks com outros aplicativos grficos vetoriais, como o Adobe Illustrator e o CorelDraw. Para mais informaes, consultar Como trabalhar com outros aplicativos grficos vetoriais na pgina 385. Colocao de um grfico do FreeHand no Fireworks H vrias maneiras de se colocar grficos do FreeHand no Fireworks: import-los, copi-los e col-los ou arrast-los e solt-los. O Fireworks MX oferece suporte a grficos do FreeHand 7 ou mais recente. Importao de um grfico do FreeHand para o Fireworks O Fireworks pode importar grficos vetoriais criados no FreeHand. Durante a importao de um grfico do FreeHand, possvel definir as seguintes opes:
Escala especifica

a porcentagem de escala para o arquivo importado. a resoluo do arquivo importado.

Largura e altura especifica a largura e a altura do arquivo importado em pixels, polegadas ou centmetros. Resoluo especifica

Suavizao de serrilhado suaviza

objetos importados para evitar bordas serrilhadas. Esta opo pode ser escolhida separadamente para traados ou texto.

Nota: Para alterar objetos selecionados para Suavizao de serrilhado ou Borda acentuada, usar Modificar > Alterar > Preenchimento acentuado, Suavizar serrilhado do preenchimento e Preenchimento suave depois da importao.

Converso de arquivo especifica o tratamento dado a documentos com vrias pginas durante sua

importao:

382 Captulo 16

A opo Abrir uma pgina importa apenas a pgina especificada. A opo Abrir pginas como moldura importa todas as pginas do documento e coloca cada
uma em uma moldura separada.

A opo Ignorar camadas importa todos os objetos em uma nica camada. A opo Lembrar camadas mantm a estrutura de camadas do arquivo importado. A opo Converter camadas em molduras coloca cada camada do documento importado em
uma moldura separada.
Incluir camadas invisveis importa Incluir camadas de fundo importa

objetos em camadas que tenham sido desativadas. Caso contrrio, as camadas invisveis sero ignoradas. objetos da camada de fundo do documento. Caso contrrio, a camada de fundo ser ignorada.

Renderizar como imagens renderiza grupos complexos, misturas ou preenchimentos lado a lado e coloca cada um como um objeto bitmap simples em um documento do Fireworks. Digitar um nmero na caixa de texto para determinar quantos objetos um grupo, uma mistura ou um preenchimento lado a lado pode conter antes de ser renderizado durante a importao. Para importar grficos vetoriais de um arquivo do FreeHand: 1

No Fireworks, escolher Arquivo > Abrir para navegar at o arquivo desejado do FreeHand, e clicar em Abrir. A caixa de dilogo Opes de arquivo vetorial exibida.

2 3

Escolher as opes desejadas. Clicar em OK.

Uso do Fireworks com outros aplicativos 383

Como copiar e colar ou arrastar e soltar um grfico do FreeHand no Fireworks Uma maneira rpida de se colocar grficos do FreeHand no Fireworks envolve copiar e colar ou arrastar e soltar esses grficos.
Para copiar e colar um grfico selecionado do FreeHand no Fireworks: 1 2 3

No FreeHand, escolher Editar > Copiar. Criar um novo documento no Fireworks ou abrir um existente. Escolher Editar > Colar.

Para arrastar e soltar um grfico do FreeHand no Fireworks:

Arrastar o grfico do FreeHand para um documento aberto no Fireworks. Colocao de um grfico do Fireworks no FreeHand O Fireworks oferece a opo de exportar traados vetoriais para o FreeHand, assim como copiar e colar grficos vetoriais no FreeHand.
Para exportar um grfico vetorial para o FreeHand: 1 2 3

No Fireworks, escolher Arquivo > Exportar ou clicar no boto Exportao rpida e escolher Exportar para o FreeHand no menu pop-up do FreeHand. Na caixa de dilogo Exportar, digitar um nome de arquivo e escolher uma pasta de destino. Escolher Illustrator 7 no menu pop-up Salvar como.
Nota: Illustrator 7 o formato de arquivo grfico usado para exportar do Fireworks para qualquer outro aplicativo grfico vetorial, inclusive o Macromedia FreeHand. A maioria dos aplicativos vetoriais l o formato de arquivo do Illustrator 7.

4 5

Clicar no boto Opes. Na caixa de dilogo Opes de exportao do Illustrator, escolher uma das seguintes opes: atual.

Exportar apenas a moldura atual preserva nomes de camadas e exporta somente a moldura Converter molduras em camadas exporta cada moldura do Fireworks como uma camada.
6

Escolher Compatvel com o FreeHand a fim de exportar o arquivo para utilizar no FreeHand. A seleo de Compatvel com o FreeHand omite bitmaps e converte preenchimentos dgrad em preenchimentos slidos.

7 8

Clicar em OK. Na caixa de dilogo Exportar, clicar em Salvar.


Nota: Ao exportar, o Fireworks define as bordas dos objetos como acentuadas.

9 10

Alternar para um documento aberto no FreeHand. Escolher Arquivo > Abrir ou Arquivo > Importar para navegar at o arquivo exportado do Fireworks e clicar em Abrir.

384 Captulo 16

Como copiar e colar um vetor no FreeHand O comando Copiar contornos de traado copia traados selecionados do Fireworks para o FreeHand. Esse comando copia apenas traados do Fireworks.
Nota: O mtodo copiar-e-colar de colocao de vetores do Fireworks em outros aplicativos funciona no apenas com o FreeHand, mas tambm com o Illustrator, CorelDraw e Adobe Photoshop.

Para copiar traados selecionados do Fireworks: 1 2 3

Escolher Editar > Copiar contornos de traado ou clicar no boto Exportao rpida e escolher Copiar contornos de traado no menu pop-up do FreeHand. Alternar para um documento aberto no FreeHand. Escolher Editar > Colar para colar os traados.

Como trabalhar com outros aplicativos grficos vetoriais O Fireworks pode compartilhar grficos vetoriais com outros aplicativos grficos vetoriais, inclusive o Adobe Illustrator e o Corel Draw. No Fireworks, o processo de exportao e importao de grficos vetoriais desses aplicativos idntico ao processo de exportao e importao de grficos do Macromedia FreeHand. Para mais informaes, consultar Como trabalhar com o Macromedia FreeHand na pgina 382. Recursos sem suporte Como o Fireworks e outros editores de grficos vetoriais nem sempre compartilham os mesmos recursos, a aparncia dos objetos ficar diferente entre um aplicativo e outro. A maioria dos outros editores de grficos vetoriais, inclusive o Macromedia FreeHand, no oferece suporte aos seguintes recursos do Fireworks:

Efeitos ao vivo Modos de mistura Textura, padro, preenchimentos de pontilhamento Web e preenchimentos dgrad Objetos de fatia e mapas de imagem Vrias opes de formatao de texto Cores de telas, guias e grades Imagens bitmap Alguns traos

Nota: Como a maioria dos outros aplicativos grficos vetoriais no oferece suporte a esses recursos, o Fireworks no os inclui ao exportar para esses aplicativos.

Da mesma forma, o Fireworks no compatvel com todos os recursos encontrados em outros editores de grficos vetoriais. Por exemplo, ao importar arquivos do CorelDraw (CDR), o Fireworks faz os seguintes ajustes para levar em conta os recursos sem suporte:

O contedo da pgina principal repetido em cada moldura do Fireworks. Apenas os dois objetos finais de uma mistura do CorelDRAW so importados. Os objetos so
agrupados aps a importao.

As dimenses so convertidas em objetos vetoriais.

Uso do Fireworks com outros aplicativos 385

O texto bsico importado. No h suporte para a maioria dos parmetros de caractere e


pargrafo.

As cores so convertidas em RGB.


Nota: O Fireworks no abre arquivos compactados do CorelDraw.

Como trabalhar com o Macromedia Director


Combinados, o Fireworks e o Director oferecem recursos extremamente eficientes. O Fireworks permite exportar grficos e contedo interativo para o Director. O processo de exportao preserva os comportamentos e fatias do grfico. A exportao de imagens em fatias com rollovers e at mesmo de imagens em camadas uma operao segura. Isso permite que os usurios do Director tirem vantagem das ferramentas de otimizao e projeto grfico do Fireworks sem comprometer a qualidade.
Nota: O Director 8.0 ou anterior requer o download e a instalao da verso gratuita do Fireworks Import Xtra para Director em http://www.macromedia.com/br/.

Colocao de um arquivo do Fireworks no Director O Director pode importar imagens planas do Fireworks, como JPEGs e GIFs, assim como imagens PNG de 32 bits com transparncia. No caso de contedo interativo, animado e em fatias, o Director pode importar HTML do Fireworks. Para mais informaes sobre como exportar imagens planas do Fireworks, como JPEGs e GIFs, consultar Exportao de uma imagem simples na pgina 348. Exportao de um grfico com transparncia No Director, possvel obter transparncia atravs da importao de imagens PNG de 32 bits. O aplicativo oferece a opo de exportao de grficos PNG de 32 bits com transparncia a partir do Fireworks.
Para exportar um PNG de 32 bits com transparncia: 1 2 3

No Fireworks, escolher Janela > Otimizar, alterar o formato do arquivo de exportao para PNG 32 e definir o Mate como transparente. Escolher Arquivo > Exportar. No menu pop-up Salvar como tipo, selecionar Somente imagens. Dar um nome ao arquivo e clicar em Salvar.

Exportao de contedo em fatias e em camadas para o Director O processo de exportao de fatias do Fireworks para o Director permite exportar contedo interativo e em fatias, como botes e imagens de rollover. O processo de exportao de camadas para o Director permite exportar contedo em camadas do Fireworks, como animaes.
Para exportar arquivos do Fireworks para o Director: 1

No Fireworks, escolher Arquivo > Exportar.


Nota: Uma outra alternativa clicar no boto Exportao rpida e escolher Origem como camadas ou Origem como fatias no menu pop-up do Director. Escolher Origem como camadas se exportar uma animao e Origem como fatias se exportar contedo interativo, como botes.

Na caixa de dilogo Exportar, digitar um nome de arquivo e escolher uma pasta de destino.

386 Captulo 16

3 4

No menu pop-up Salvar como, escolher Director. No menu pop-up Origem, escolher uma opo:
Camadas do Fireworks exporta todas as camadas do documento. Escolher esta opo se exportar contedo em camadas ou uma animao. Fatias do Fireworks exporta

as fatias do documento. Escolher esta opo se exportar contedo interativo ou em fatias, como botes ou imagens de rollover.

5 6 7

Selecionar Aparar imagens para cortar automaticamente as imagens exportadas, de modo a ajustar os objetos em cada moldura. Selecionar Colocar imagens na subpasta para escolher uma pasta para as imagens. Clicar em Salvar.

Importao de um arquivo do Fireworks para o Director O Director oferece a opo de importao de imagens planas que foram exportadas do Fireworks, como JPEGs, GIFs e PNGs de 32 bits. Uma outra possibilidade importar camadas, fatias e elementos interativos do Fireworks atravs da insero de HTML do Fireworks.
Para importar uma imagem plana do Fireworks: 1 2 3 4

No Director, escolher File > Import. Navegar at o arquivo desejado e clicar em Import. Se desejar, alterar as opes na caixa de dilogo Image Options. Para mais informaes sobre cada opo, consultar Usando o Director. Clicar em OK. O grfico importado aparecer no elenco como um bitmap.

Para importar contedo interativo, em fatias ou em camadas do Fireworks: 1

No Director, escolher Insert > Fireworks > Images from Fireworks HTML.
Nota: O nome e a localizao desse comando de menu podem ser diferentes, dependendo da verso do Director.

Uso do Fireworks com outros aplicativos 387

Localizar o arquivo HTML do Fireworks que foi exportado para uso no Director. A caixa de dilogo Open Fireworks HTML exibida.

Se desejar, alterar as opes:


Color permite especificar a intensidade da cor para os grficos importados. Se eles contiverem transparncia, escolher cores de 32 bits. Registration permite

definir o ponto de registro para os grficos importados. comportamentos do Fireworks em cdigo Lingo. membros do elenco em Score upon import.

Import Rollover Behaviors as Lingo converte Import to Score coloca 4

Clicar em Open. Os grficos e o cdigo do arquivo HTML do Fireworks so importados.


Nota: Se o usurio importar uma animao do Fireworks, arrastar as molduras principais no Director para deslocar a cronometragem de cada camada importada, conforme necessrio.

Edio de um membro do elenco do Director no Fireworks Com a integrao iniciar-e-editar, possvel fazer alteraes em membros do elenco do Director. Para isso, basta iniciar o Fireworks para edit-los a partir do Director. H tambm a opo de iniciar o Fireworks a partir do Director para otimizar membros do elenco.
Para iniciar o Fireworks e editar um membro do elenco do Director: 1 2

No Director, clicar com o boto direito do mouse (Windows) ou manter pressionada a tecla Control (Macintosh) e clicar no grfico na janela Cast. Escolher Launch External Editor no menu pop-up.
Nota: Se o Fireworks no iniciar como editor de imagem externo, escolher File > Preferences > Editors, no Director, e definir o Fireworks como o editor externo para tipos de arquivo grfico de bitmap.

388 Captulo 16

A arquivo se abre no Fireworks e a janela do documento indica que o arquivo est sendo editado a partir do Director.

Fazer alteraes na imagem e clicar em Concludo quando terminar. O Fireworks exporta o novo grfico para o Director.

Otimizao de um membro do elenco no Director possvel iniciar o Fireworks a partir do Director para fazer alteraes rpidas e otimizar membros selecionados do elenco.
Para iniciar o Fireworks e alterar as configuraes de otimizao de um membro do elenco do Director: 1 2 3

No Director, selecionar o membro do elenco na janela Cast e clicar em Otimizar no Fireworks, na guia Bitmap do Inspetor de propriedades. No Fireworks, alterar as configuraes de otimizao da maneira desejada. Quando terminar, clicar em Atualizar. Clicar em Concludo se a caixa de dilogo MIX Editing aparecer. A imagem exportada de volta para o Director com as novas configuraes.

Como trabalhar com o Macromedia HomeSite


Juntos, o Fireworks e o HomeSite oferecem recursos para a criao e edio de pginas da Web. simples exportar e abrir HTML do Fireworks no HomeSite, bem como inserir grficos do Fireworks em documentos do HomeSite. Mas o que ainda mais importante, o Fireworks e o HomeSite compartilham uma integrao perfeita que permite iniciar o Fireworks a partir do HomeSite para a edio de grficos da Web. Colocao de uma imagem do Fireworks no HomeSite possvel inserir imagens GIF ou JPEG geradas pelo Fireworks em um documento do HomeSite. Mas, primeiro preciso exportar as imagens do Fireworks. Para mais informaes sobre como exportar imagens GIF e JPEG, consultar Exportao de uma imagem simples na pgina 348.
Para inserir uma imagem do Fireworks em um documento do HomeSite: 1

No HomeSite, salvar o documento.


Nota: O HomeSite cria caminhos relativos para as imagens, mas s poder fazer isso se o documento estiver salvo.

Na janela Resources, navegar at a imagem do Fireworks que foi exportada.

Uso do Fireworks com outros aplicativos 389

Criar um vnculo com a imagem do Fireworks no documento: janela do documento.

Arrastar o arquivo da janela Resources at a posio desejada no cdigo HTML na guia Edit da Na guia Edit da janela do documento, posicionar o ponto de insero no local em que deseja
inserir a imagem do Fireworks e clicar com o boto direito do mouse no arquivo na janela Resources e escolher Insert as Link. Um vnculo com a imagem do Fireworks criado no cdigo HTML. Clicar na guia Browse para visualizar a imagem no documento. Colocao de HTML do Fireworks no HomeSite H vrias maneiras de se colocar HTML do Fireworks no HomeSite: exportar ou copiar HTML do Fireworks para a rea de transferncia, eabrir o arquivo HTML exportado do Fireworks no HomeSite e copiar e colar sees de cdigo selecionadas. Alm disso, fcil atualizar o cdigo exportado para o HomeSite com o comando Atualizar HTML do Fireworks.
Nota: Antes de exportar, copiar ou atualizar HTML do Fireworks para utilizar no HomeSite, certificar-se de definir o tipo de HTML como Genrico na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Exportao de HTML do Fireworks para o HomeSite A exportao de HTML do Fireworks gera um arquivo HTML e os arquivos de imagens associados no local especificado. O usurio pode ento abrir o arquivo HTML para edio no HomeSite.
Nota: Antes de exportar, certificar-se de definir o tipo de HTML como Genrico na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para exportar HTML do Fireworks para o HomeSite:

Exportar o documento para HTML no Fireworks e abrir o arquivo exportado no HomeSite escolhendo File > Open. Consultar Exportao de HTML do Fireworks na pgina 354. Cpia de HTML do Fireworks para a rea de transferncia para usar no HomeSite Uma maneira rpida de se colocar um HTML gerado pelo Fireworks no HomeSite copi-lo do Fireworks para a rea de transferncia e col-lo diretamente em um documento do HomeSite. Durante o processo de cpia de HTML do Fireworks para a rea de transferncia, as imagens necessrias so exportadas para o local especificado.
Nota: Antes de copiar para a rea de transferncia, certificar-se de definir o tipo de HTML como Genrico na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para copiar HTML do Fireworks para uso no HomeSite:

Copiar o HTML para a rea de transferncia no Fireworks e col-lo em um novo documento do HomeSite. Consultar Como copiar um HTML para a rea de transferncia na pgina 355. Como copiar cdigo de um arquivo exportado do Fireworks e col-lo no HomeSite possvel abrir um arquivo HTML exportado do Fireworks no HomeSite e, em seguida, copiar e colar manualmente apenas as sees desejadas em outro documento do HomeSite.

390 Captulo 16

Nota: Antes de exportar, certificar-se de definir o tipo de HTML como Genrico na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para copiar cdigo de um arquivo exportado do Fireworks e col-lo no HomeSite:

Exportar um arquivo HTML do Fireworks e copiar e colar o cdigo desejado em um documento existente do Dreamweaver. Consultar Como copiar e colar HTML de um arquivo do Fireworks exportado na pgina 356. Atualizao de HTML do Fireworks exportado para o HomeSite O comando Atualizar HTML permite fazer alteraes em um documento HTML do Fireworks que foi exportado anteriormente para o HomeSite.
Nota: Antes de atualizar HTML, certificar-se de definir o tipo de HTML como Genrico na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para atualizar HTML do Fireworks exportado para o HomeSite:

Usar o comando Atualizar HTML do Fireworks. Consultar Atualizao de um HTML exportado na pgina 357. Edio de uma imagem do Fireworks no HomeSite A integrao iniciar-e-editar permite a edio de imagens em um documento do HomeSite. O HomeSite inicia automaticamente o Fireworks, permitindo que o usurio faa as edies desejadas na imagem. Ao sair do Fireworks, as atualizaes so aplicadas automaticamente imagem colocada no HomeSite. Juntos, os dois aplicativos proporcionam um fluxo de trabalho simplificado para a edio de grficos da Web em pginas HTML.
Para iniciar e editar imagens do Fireworks colocadas no HomeSite: 1 2

No HomeSite, salvar o documento. Seguir um dos seguintes procedimentos:

Clicar com o boto direito do mouse nas guias Files na janela Resources. Clicar com o boto direito do mouse na imagem na guia Thumbnails da janela Results. Clicar com o boto direito do mouse no tag <img> associado no cdigo HTML na guia Edit da
janela do documento.
3

No menu pop-up, escolher Edit in Macromedia Fireworks. O HomeSite inicia o Fireworks, se este ainda no estiver aberto. Se perguntado, especificar se deseja localizar um arquivo de origem do Fireworks para a imagem colocada. Para mais informaes sobre arquivos PNG de origem do Fireworks, consultar Salva de um arquivo do Fireworks na pgina 82. No Fireworks, editar a imagem. A janela do documento indica que o usurio est editando uma imagem do Fireworks partir de outro aplicativo.

Quando terminar de fazer as edies, clicar em Concludo na janela do documento. A imagem atualizada exportada novamente para o HomeSite e o arquivo PNG de origem salvo, se tiver sido selecionado um arquivo de origem.

Uso do Fireworks com outros aplicativos 391

Como trabalhar com o Microsoft FrontPage


O Fireworks apresenta recursos de integrao sofisticados quando utilizado em combinao com vrios aplicativos, mesmo com produtos que no sejam da Macromedia. O Fireworks simplifica o processo de criao e edio de design de pginas da Web com o Microsoft FrontPage. Com o recurso Roundtrip HTML, fcil iniciar o Fireworks a partir do FrontPage para criar ou editar grficos e tabelas HTML. O Roundtrip HTML, um eficiente recurso de integrao que o Fireworks compartilha com o FrontPage e com o Macromedia Dreamweaver, permite efetuar alteraes em um aplicativo e fazer com que elas se reflitam integralmente no outro. Colocao de uma imagem do Fireworks no FrontPage H vrias maneiras de se colocar grficos do Fireworks em um documento do FrontPage: colocar um grfico concludo do Fireworks no FrontPage com o uso do o menu Inserir ou criar um novo grfico do Fireworks clicando no boto Editar no Fireworks, localizado na barra de ferramentas principal do FrontPage. Insero de uma imagem do Fireworks no FrontPage possvel inserir imagens GIF ou JPEG geradas pelo Fireworks diretamente em um documento do FrontPage. Mas, primeiro necessrio exportar as imagens do Fireworks. Para mais informaes sobre como exportar imagens GIF e JPEG, consultar Exportao de uma imagem simples na pgina 348.
Para inserir uma imagem do Fireworks em um documento do FrontPage: 1 2 3

No modo de exibio Editar ou Cdigo, posicionar o ponto de insero no local em que deseja que a imagem aparea. Escolher Inserir > Figura > Do arquivo. Navegar at o arquivo desejado do Fireworks e clicar em OK.

Criao de uma nova imagem do Fireworks no FrontPage O usurio pode iniciar o Fireworks a partir do FrontPage para criar uma imagem sem fatias.
Nota: Se o usuiro desejar criar uma imagem em fatias, primeiro ser necessrio criar e exportar uma imagem simples sem fatias. E, em seguida, iniciar e editar novamente o grfico no Fireworks para adicionar fatias e interatividade. Para mais informaes sobre como iniciar e editar grficos existentes no FrontPage, consultar Edio de um arquivo do Fireworks no FrontPage na pgina 394.

Para criar uma imagem sem fatias do Fireworks no FrontPage: 1 2 3 4

Na barra de ferramentas principal do FrontPage, clicar no boto Iniciar e editar elemento grfico selecionado no Fireworks. Quando aparecer uma mensagem perguntando se deseja criar uma nova imagem, clicar em Sim. O Fireworks ser iniciado, se ainda no estiver aberto. Abrir um novo documento no Fireworks e criar uma imagem. Escolher Arquivo > Salvar quando terminar. Na caixa de dilogo Salvar como, especificar um nome e local para o arquivo PNG de origem e clicar em Salvar. Para mais informaes sobre como salvar arquivos PNG do Fireworks, consultar Salva de um arquivo do Fireworks na pgina 82.

392 Captulo 16

5 6 7 8 9 10

Escolher Arquivo > Exportar. Na caixa de dilogo Exportar, especificar um nome e local para o arquivo de imagem exportado. Na caixa de dilogo Exportar, clicar em Salvar para exportar o arquivo. Retornar ao FrontPage. No modo de exibio Editar ou Cdigo, posicionar o ponto de insero no local em que deseja que a imagem aparea. Escolher Inserir > Figura > Do arquivo. Navegar at o arquivo de imagem recm-exportado e clicar em Inserir.

Colocao de HTML do Fireworks no FrontPage H vrias maneiras de se colocar um HTML do Fireworks no FrontPage: exportar HTML ou copiar HTML do Fireworks para a rea de transferncia. Uma outra possibilidade abrir o arquivo HTML exportado do Fireworks no FrontPage e copiar e colar sees de cdigo selecionadas. Alm disso, fcil atualizar o cdigo exportado para o FrontPage com o comando Atualizar HTML do Fireworks.
Nota: Antes de exportar, copiar ou atualizar HTML do Fireworks para utilizao no FrontPage, certificar-se de escolher FrontPage como tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Exportao de HTML do Fireworks para o FrontPage A exportao de HTML do Fireworks gera um arquivo HTML e os arquivos de imagens associados no local especificado. O usurio pode ento abrir o arquivo HTML para edio no FrontPage.
Nota: Antes de exportar HTML do Fireworks para utilizao no FrontPage, certificar-se de escolher FrontPage como tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para exportar HTML do Fireworks para o FrontPage:

Exportar o documento do Fireworks para HTML e abrir o arquivo HTML exportado no FrontPage escolhendo Arquivo > Abrir. Consultar Exportao de HTML do Fireworks na pgina 354. Cpia de HTML do Fireworks para a rea de transferncia para uso no FrontPage Uma maneira rpida de se colocar um HTML gerado pelo Fireworks no FrontPage copi-lo do Fireworks para a rea de transferncia e col-lo diretamente em um documento do FrontPage. Todo o cdigo HTML e JavaScript associado ao documento do Fireworks copiado para o documento do FrontPage e todas as imagens so exportadas para o local especificado.
Nota: Antes de se copiar HTML do Fireworks para utilizao no FrontPage, certificar-se de escolher FrontPage como o tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para copiar HTML do Fireworks para a rea de transferncia para uso no FrontPage:

Copiar HTML para a rea de transferncia no Fireworks e col-lo em um novo documento do FrontPage. Consultar Como copiar um HTML para a rea de transferncia na pgina 355.

Uso do Fireworks com outros aplicativos 393

Nota: Esse mtodo no ser recomendvel se o documento do Fireworks contiver botes ou outros elementos interativos que exijam cdigo JavaScript, pois ser necessrio modificar o cdigo HTML e JavaScript depois de colado no FrontPage. Para mais informaes, consultar Exportao de HTML na pgina 352.

Como copiar cdigo de um arquivo exportado do Fireworks e col-lo no FrontPage possvel abrir um arquivo HTML exportado do Fireworks no FrontPage e copiar e colar manualmente apenas as sees desejadas em outro documento do FrontPage.
Nota: Antes de exportar do Fireworks, certificar-se de escolher FrontPage como o tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para copiar cdigo de um arquivo exportado do Fireworks e col-lo no FrontPage:

Exportar um arquivo HTML do Fireworks e copiar e colar o cdigo desejado em um documento existente do FrontPage. Consultar Como copiar e colar HTML de um arquivo do Fireworks exportado na pgina 356. Atualizao de HTML do Fireworks exportado para o FrontPage O comando Atualizar HTML permite fazer alteraes em um documento HTML do Fireworks que tenha sido exportado anteriormente para o FrontPage.
Nota: Antes de atualizar HTML do Fireworks, certificar-se de escolher FrontPage como o tipo de HTML na caixa de dilogo Configurao do HTML. Para mais informaes, consultar Configurao de opes de exportao de HTML na pgina 359.

Para atualizar HTML do Fireworks exportado para o FrontPage:

Usar o comando Atualizar HTML do Fireworks. Consultar Atualizao de um HTML exportado na pgina 357. Edio de um arquivo do Fireworks no FrontPage fcil usar o Fireworks e o FrontPage juntos com o Roundtrip HTML, um recurso que permite efetuar alteraes em um aplicativo e fazer com que elas se reflitam integralmente no outro. Com o Roundtrip HTML, a integrao iniciar-e-editar permite a edio de imagens e tabelas geradas pelo Fireworks e colocadas em um documento do FrontPage. O FrontPage inicia o Fireworks automaticamente, permitindo que o usurio faa as edies desejadas na imagem. As atualizaes feitas no Fireworks so aplicadas automaticamente imagem colocada no FrontPage. Juntos, os dois aplicativos proporcionam um fluxo de trabalho simplificado para edio e colocao de arquivos grficos da Web em pginas HTML.
Para iniciar e editar imagens do Fireworks colocadas no FrontPage: 1 2

No FrontPage, salvar o documento. Selecionar a fatia de tabela ou imagem que se deseja editar e clicar no boto Iniciar e editar elemento grfico selecionado no Fireworks. O FrontPage inicia o Fireworks, se este ainda no estiver aberto. Se perguntado, especificar se deseja iniciar um arquivo de origem do Fireworks para a fatia de tabela ou imagem colocada. Para mais informaes sobre arquivos PNG de origem do Fireworks, consultar Salva de um arquivo do Fireworks na pgina 82.

394 Captulo 16

Nota: Quando o usurio inicia e edita uma imagem ou fatia que faz parte de uma tabela do Fireworks, este programa abre automaticamente o arquivo PNG de origem de toda a tabela.

4 5

No Fireworks, editar a imagem. A janela do documento indica que o usurio est editando uma imagem do Fireworks partir do FrontPage. Quando terminar de fazer as edies, clicar em Concludo na janela do documento. A imagem ou o HTML exportada com as configuraes atuais de otimizao, o grfico usado pelo FrontPage atualizado e o arquivo PNG de origem salvo, se tiver sido selecionado um arquivo de origem.

Como trabalhar com o Adobe Photoshop


O Fireworks fornece um suporte excelente para a importao de arquivos criados no Photoshop (PSD) e oferece opes para a manuteno de vrios aspectos dos arquivos importados, inclusive camadas, mscaras e texto editvel. Isso permite levar para o Fireworks as imagens do Photoshop para uma edio mais detalhada e otimizao para a Web, sem perder a possibilidade de reexportlas para o Photoshop. Colocao de um grfico do Photoshop no Fireworks possvel arrastar e soltar grficos individuais do Photoshop no Fireworks, bem como importar um arquivo inteiro do Photoshop. Como arrastar e soltar um grfico individual do Photoshop no Fireworks Uma maneira de se colocar grficos do Photoshop no Fireworks arrast-los e solt-los.
Para arrastar e soltar um grfico do Photoshop no Fireworks:

Arrastar o grfico do Photoshop para um documento aberto no Fireworks. Cada grfico arrastado se torna um novo objeto bitmap. O texto tambm importado como objeto bitmap e perde sua editabilidade como texto. Para mais informaes, consultar Sobre importao de texto do Photoshop na pgina 396. Importao de um arquivo do Photoshop para o Fireworks Quando o usurio importa ou abre um arquivo do Photoshop no Fireworks, ele importado para um arquivo PNG de acordo com as preferncias de importao especificadas. Alm de preservar as camadas e o texto, conforme especificado nas opes de importao, o Fireworks preserva e converte os seguintes recursos do Photoshop:

Converso de mscaras de camada em mscaras de objeto do Fireworks. Os efeitos de camada so convertidos em Efeitos ao vivo do Fireworks, se houver um Efeito ao
vivo correspondente. Por exemplo, o efeito de camada Aplicar sombra convertido em um Efeito ao vivo Aplicar sombra no Fireworks.
Nota: Os efeitos de camada e os efeitos ao vivo podem variar um pouco na aparncia.

Modos de mistura de camadas so convertidos em modos de mistura do Fireworks para objetos


correspondentes, se o Fireworks oferecer suporte a esses modos de mistura.

O primeiro canal alfa na paleta Canais convertido em reas transparentes na imagem do


Fireworks. O Fireworks no oferece suporte a canais alfa adicionais do Photoshop.

Uso do Fireworks com outros aplicativos 395

O Fireworks no fornece suporte para camadas de ajuste, grupos de recorte e traados do Photoshop. O Fireworks ignora esses recursos quando importa arquivos do Photoshop.
Nota: No Windows, os nomes de arquivo do Photoshop devem incluir uma extenso PSD para que o Fireworks reconhea o tipo de arquivo do Photoshop.

Para importar um arquivo do Photoshop para o Fireworks: 1 2

Escolher Arquivo > Importar ou Arquivo > Abrir e navegar at um arquivo do Photoshop (PSD). Clicar em Abrir. O arquivo do Photoshop importado para um arquivo PNG. Se o usurio fizer alteraes e desejar salvar o arquivo como PSD, primeiro ser necessrio export-lo para o formato PSD. Para mais informaes, consultar Colocao de um grfico do Fireworks no Photoshop na pgina 398.

Sobre importao de texto do Photoshop possvel abrir ou importar um arquivo Photoshop que contenha texto. Ao abrir arquivos do Photoshop que contm texto, o Fireworks verifica se existem as fontes necessrias no sistema. Se no houver, o Fireworks perguntar se deve substituir as fontes ou manter sua aparncia. Para mais informaes, consultar Tratamento de fontes ausentes na pgina 184. Se o texto do arquivo do Photoshop contiver efeitos suportados pelo Fireworks, os efeitos ainda sero aplicados quando levados para o Fireworks. No entanto, como o Fireworks e o Photoshop aplicam efeitos de maneiras distintas, os efeitos talvez fiquem diferentes em cada um dos aplicativos. Quando arquivos do Photoshop 6 ou 7 contendo texto so abertos ou importados no Fireworks, uma imagem do texto armazenada em cache exibida para que sua aparncia permanea inalterada em relao imagem do Photoshop. Depois que o texto for editado, a imagem armazenada em cache ser substituda pelo texto real, que poder ser diferente em aparncia em relao ao texto original.
Nota: O Fireworks no exporta texto no formato do Photoshop 6 ou 7. Se o usurio editar um documento que contenha texto do Photoshop 6 ou 7 e, em seguida, reexportar o documento para o Photoshop, o arquivo ser exportado no formato do Photoshop 5.5. Entretanto, se no fizer alteraes no texto, o arquivo ser exportado no formato do Photoshop 6. Para mais informaes sobre como exportar arquivos do Photoshop, consultar Colocao de um grfico do Fireworks no Photoshop na pgina 398.

Especificao de opes para importar arquivo do Photoshop As opes do Fireworks para preferncias de importao permitem especificar como manipular as camadas e o texto nos arquivos importados do Photoshop. Dependendo das opes escolhidas, o usurio pode controlar o grau da aparncia e editabilidade dos arquivos importados.
Para especificar as opes de importao para arquivos do Photoshop: 1

Escolher Editar > Preferncias.


Nota: No Mac OS X, escolher Fireworks > Preferncias.

Clicar na guia Importar (Windows) ou escolher Importar no menu pop-up (Macintosh).

396 Captulo 16

Especificar as opes de importao:


Camadas: Converter em objetos do Fireworks importa cada camada do arquivo do Photoshop como um objeto separado em uma nica camada do Fireworks. Camadas: Compartilhar camada entre molduras torna visveis as camadas importadas em todas

as molduras do arquivo do Fireworks.


Camadas: Converter em molduras importa

cada camada do arquivo do Photoshop como um objeto em uma moldura separada do Fireworks. Essa opo til para a importao de arquivos a serem usados como animaes.

Texto: Editvel converte o texto do arquivo do Photoshop em texto editvel do Fireworks. Essa opo permite editar texto importado com a ferramenta Texto do Fireworks e o Inspetor de propriedades. O texto convertido poder variar um pouco na aparncia quando comparado com o original. Texto: Manter a aparncia converte o texto do arquivo do Photoshop em um objeto bitmap do Fireworks. Esta opo mantm a aparncia original do texto, mas no permite edio com a ferramenta Texto do Fireworks. Usar imagem plana composta importa o arquivo do Photoshop como uma imagem plana, sem

camadas.
4

Clicar em OK.

Importao de filtro e plug-in do Photoshop O Fireworks permite a importao de filtros e plug-ins do Photoshop e de terceiros para a janela Efeitos ao vivo ou para o menu Filtros. Importar filtros para qualquer um desses locais os disponibiliza em ambos.
Nota: Os filtros e plug-ins do Photoshop 6 e 7 no so compatveis com o Fireworks MX. No Macintosh, filtros de terceiros criados para execuo no Mac OS 9 so compatveis com o Fireworks MX, quando em execuo no Mac OS 9, e filtros de terceiros criados para execuo no Mac OS X so compatveis com Fireworks MX, quando em execuo no Mac OS X.

Para mais informaes sobre a janela Efeitos ao vivo e o menu Filtros, consultar Uso de Efeitos ao vivo na pgina 213.
Para importar plug-ins e filtros do Photoshop e de terceiros usando a caixa de dilogo Preferncias: 1

Escolher Editar > Preferncias.


Nota: No Mac OS X, escolher Fireworks > Preferncias.

2 3

Clicar na guia Pastas (Windows) ou escolher Pastas no menu pop-up (Macintosh). Escolher a opo Plug-Ins do Photoshop. A caixa de dilogo Selecionar uma pasta (Windows) ou Selecionar uma pasta (Macintosh) se abre.
Nota: Caso ela no abra automaticamente, clicar em Procurar.

4 5

Navegar at a pasta em que os plug-ins e filtros do Photoshop ou de outros programas esto instalados e clicar em Selecionar (Windows) ou Escolher (Macintosh). Clicar em OK para fechar a caixa de dilogo Preferncias.

Uso do Fireworks com outros aplicativos 397

Reiniciar o Fireworks para carregar os filtros e plug-ins.

Para importar plug-ins e filtros do Photoshop e de terceiros com o uso da caixa de dilogo Efeitos ao vivo: 1

Selecionar algum objeto vetorial, objeto bitmap ou bloco de texto na tela e clicar no boto Adicionar efeitos no Inspetor de propriedades.
Nota: O boto Adicionar efeitos s estar disponvel quando um objeto estiver selecionado na tela.

2 3

No menu pop-up que exibido, escolher Opes > Localizar plug-ins. Navegar at a pasta em que os plug-ins e filtros do Photoshop ou de outros programas esto instalados e clicar em Selecionar (Windows) ou Escolher (Macintosh). Se for exibida uma mensagem perguntando se deseja reiniciar o Fireworks, clicar em OK. Reiniciar o Fireworks, para carregar os filtros e plug-ins.

Colocao de um grfico do Fireworks no Photoshop O Fireworks proporciona amplo suporte para a exportao de arquivos no formato do Photoshop (PSD). As configuraes de exportao permitem controlar quais elementos do arquivo permanecero editveis quando o arquivo for reaberto no Photoshop. Uma imagem do Fireworks exportada para o Photoshop mantm a mesma editabilidade quando reaberta no Fireworks como outro elemento grfico do Photoshop. As opes de exportao para editabilidade, aparncia e tamanho do arquivo permitem determinar o melhor procedimento possvel de exportao para o grfico especfico. Os usurios do Photoshop podem trabalhar com seus grficos no Fireworks e continuar a edio no Photoshop.
Para exportar um arquivo no formato do Photoshop: 1 2 3

Escolher Arquivo > Exportar ou clicar no boto Exportao rpida e escolher Outro > Exportar para o Photoshop. Na caixa de dilogo Exportar, dar nome ao arquivo e escolher Photoshop PSD no menu Salvar como. Para especificar configuraes de exportao agrupadas, escolher uma opo do menu Configuraes. Essas configuraes fornecem combinaes predefinidas de opes de exportao individuais para objetos, efeitos e texto no arquivo do Fireworks. As opes de exportao individuais so descritas com detalhes em Personalizao de um arquivo para exportar para o Photoshop na pgina 399. editveis e converte o texto em camadas editveis de texto do Photoshop. Escolher esta opo se desejar editar imagens de forma extensiva no Photoshop e no tiver necessidade de preservar a aparncia exata da imagem do Fireworks.

Manter a editabilidade sobre a aparncia converte objetos em camadas, mantm efeitos

Manter a aparncia do Fireworks converte cada objeto em uma camada individual do


Photoshop e transforma efeitos e texto em itens no editveis. Escolher esta opo para manter o controle sobre os objetos do Fireworks no Photoshop, mas tambm manter a aparncia original da imagem do Fireworks.

Arquivo Photoshop menor nivela cada camada em um imagem totalmente renderizada.


Escolher esta opo se estiver exportando um arquivo que contm um grande nmero de objetos do Fireworks.

398 Captulo 16

Personalizar permite escolher configuraes especficas para objetos, efeitos e texto.


4

Clicar em Salvar para exportar o arquivo do Photoshop.


Nota: O Photoshop 5.5 e verses anteriores no abrem arquivos com mais de 100 camadas. Ser necessrio excluir ou mesclar objetos se o documento do Fireworks que for exportado contiver mais de 100 objetos.

Personalizao de um arquivo para exportar para o Photoshop Ao exportar um arquivo para o Photoshop, o usurio pode escolher configuraes personalizadas para a exportao de objetos, efeitos e texto.
Para personalizar configuraes de exportao para o Photoshop: 1 2

Na caixa de dilogo Exportar, enquanto Photoshop PSD estiver selecionado como o tipo de arquivo de exportao, escolher Personalizar no menu pop-up Configuraes. No menu pop-up Objetos, escolher uma das seguintes opes:
Converter em camadas do Photoshop converte objetos individuais do Fireworks em camadas do Photoshop e mscaras do Fireworks em mscaras de camada do Photoshop. Nivelar cada camada do Fireworks nivela

todos os objetos do Fireworks para uma nica camada do Photoshop. A escolha desta opo suprime a capacidade de editar os objetos do Fireworks no Photoshop, assim como os recursos, como modos de mistura, que esto associados aos objetos do Fireworks.

No menu pop-up Efeitos, escolher uma das seguintes opes:


Manter a editabilidade converte Efeitos ao vivo do Fireworks em seus equivalentes no Photoshop. Se os efeitos no existirem no Photoshop, sero descartados. Renderizar efeitos transforma efeitos em objetos. A escolha desta opo preserva a aparncia dos efeitos, mas no permite sua edio no Photoshop.

No menu pop-up Texto, escolher uma das seguintes opes:


Manter a editabilidade converte o texto em uma camada editvel do Photoshop. A formatao de texto que no for suportada pelo Photoshop ser perdida. Renderizar texto transforma o texto em um objeto de imagem. A escolha desta opo preserva a aparncia do texto, mas no permite sua edio.

Sobre como trabalhar com o Adobe GoLive


Juntos, o Fireworks e o Adobe GoLive permitem a criao e a edio de pginas da Web. possvel exportar e copiar HTML do Fireworks para o Adobe GoLive da mesma maneira que com a maioria dos outros editores de HTML. A nica exceo que necessrio escolher GoLive HTML como o estilo de HTML antes de exportar ou copiar HTML do Fireworks. Para mais informaes sobre como escolher um estilo HTML, consultar Configurao de opes de exportao de HTML na pgina 359. Para mais informaes sobre como exportar e copiar HTML do Fireworks, consultar Exportao de HTML na pgina 352.
Nota: O estilo HTML do Adobe GoLive no oferece suporte a cdigo de menu pop-up. Se o documento do Fireworks contiver menus pop-up, escolher Generic HTML como o estilo de HTML antes da exportao.

Uso do Fireworks com outros aplicativos 399

Sobre como trabalhar com editores de HTML


O Fireworks gera HTML puro que todos os editores de HTML lem. Para informaes gerais sobre como colocar HTML do Fireworks em editores de HTML, consultar Exportao de HTML na pgina 352. O Fireworks oferece recursos de integrao especiais para o Macromedia Dreamweaver, Macromedia HomeSite e Microsoft FrontPage. Para mais detalhes sobre como trabalhar com esses aplicativos, consultar Captulo 16, Uso do Fireworks com outros aplicativos, na pgina 363. O Fireworks tambm pode importar contedo de HTML. Esse um recurso eficiente que permite abrir e editar a maioria dos documentos HTML no Fireworks. Para mais informaes, consultar Criao de arquivo PNG do Fireworks a partir de arquivos HTML na pgina 78.

400 Captulo 16

CAPTULO 17 Automatizao de uma tarefa repetitiva

Os Web designers muitas vezes ficam sobrecarregados de tarefas repetitivas como, por exemplo, otimizar imagens ou converter imagens para adapt-las a determinadas restries. Um fator que contribui para a potncia do Macromedia Fireworks MX sua capacidade de automatizar e simplificar vrias tarefas tediosas de desenho, edio e converso de arquivos. O recurso Localizar e substituir agiliza o processo de edio pesquisando e substituindo elementos dentro de um arquivo ou elementos de mltiplos arquivos. possvel localizar e substituir elementos como URLs, fontes, cor, texto e comandos criados no painel Histrico. O recurso Processo em lote converte grupos inteiros de arquivos de imagem em outros formatos, alm de alterar as paletas de cores. O Processo em lote pode aplicar configuraes de otimizao personalizadas a grupos de arquivos. Esse recurso tambm pode redimensionar um grupo de arquivos, o que faz dele uma ferramenta ideal para a criao de miniaturas. O painel Histrico oferece opes para criar comandos, que so atalhos para os recursos usados com mais freqncia, ou criar um script que possa executar uma srie complexa de etapas. O Fireworks entende e executa JavaScript. Assim, usurios avanados podem automatizar tarefas muito complexas escrevendo comandos em JavaScript e, em seguida, executando-os dentro do Fireworks. possvel controlar quase todos os comandos ou configuraes do Fireworks por meio de comandos JavaScript especiais que o Fireworks pode interpretar. O Extension Manager possibilita a importao, instalao e excluso de extenses em aplicativos Macromedia para estender os recursos do Fireworks.

401

Localizar e substituir
O recurso Localizar e substituir ajuda a pesquisar e substituir elementos como texto, URLs, fontes e cores. Localizar e substituir pode pesquisar no documento atual ou em mltiplos arquivos. O uso desse recurso faz com que o Fireworks rastreie e armazene um registro das alteraes no painel Registro de projeto. Localizar e substituir s funciona em arquivos PNG do Fireworks ou em arquivos que contenham objetos vetoriais, como arquivos do FreeHand, CorelDRAW descompactado e Illustrator.

Opo Pesquisar Opo Localizar

Painel Localizar e substituir


Para selecionar a origem da pesquisa: 1 2

Abrir o documento. Para abrir o painel Localizar e substituir, seguir um destes procedimentos:

Escolher Janela > Localizar e substituir. Escolher Editar > Localizar e substituir. Pressionar Control+F (Windows) ou Command+F (Macintosh).
3

No menu pop-up Pesquisar, escolher a origem da pesquisa:


Pesquisar seleo localiza e substitui elementos apenas entre os objetos selecionados no momento e o texto. Pesquisar moldura localiza

e substitui elementos apenas dentro da moldura atual. e substitui elementos no documento ativo.

Pesquisar documento localiza

Pesquisar registro de projeto localiza e substitui elementos em arquivos listados no Registro de projeto. Para mais informaes, consultar Gerenciamento de uma pesquisa com o Registro de projeto na pgina 415. Pesquisar arquivos localiza

e substitui elementos em mltiplos arquivos. Se esta opo ainda no estiver selecionada no menu pop-up Pesquisar, a sua escolha abrir uma caixa de dilogo na qual possvel escolher os arquivos a serem pesquisados. Se Pesquisar arquivos j estiver selecionado no menu pop-up Pesquisar, depois que a operao de pesquisa for iniciada com um clique em Localizar, Substituir ou Substituir tudo, ser oferecida a opo de escolher os arquivos para pesquisa.

402 Captulo 17

4 5 6

No menu pop-up Localizar, escolher um atributo a pesquisar. As opes do painel mudam em funo da seleo. Definir as opes para o atributo Localizar selecionado. Escolher uma operao localizar-e-substituir:
Localizar localiza a prxima ocorrncia do elemento. Os elementos encontrados aparecem selecionados no documento. Substituir substitui

um elemento localizado pelo contedo da opo Alterar para. e substitui todas as ocorrncias de um elemento localizado em toda a

Substituir tudo localiza

faixa de pesquisa.
Nota: A substituio de objetos em mltiplos arquivos salva esses arquivos automaticamente; no possvel reverter a alterao com Editar > Desfazer. Para mais informaes, consultar Localizao e substituio durante um processo em lote na pgina 411.

Definio de opes para localizar e substituir em mltiplos arquivos Durante uma operao localizar-e-substituir em mltiplos arquivos, possvel determinar como vrios arquivos abertos devem ser tratados depois da pesquisa.
Para salvar, fechar e fazer backup de cada arquivo depois de pesquisado: 1

Escolher Opes de substituio no menu Opes do painel Localizar e substituir.

Escolher Salvar e fechar arquivos para salvar e fechar cada arquivo aps a operao localizar-esubstituir. Apenas os documentos originalmente ativos permanecero abertos.
Nota: Se Salvar e fechar estiver desativado e um grande nmero de arquivos for processado em lote, o Fireworks poder ficar sem memria e anular o processo em lote.

Automatizao de uma tarefa repetitiva 403

No menu pop-up Backups, escolher uma das seguintes opes:


Sem backups localiza e substitui sem fazer backup dos arquivos originais. Os arquivos alterados substituem os originais. Substituir backups existentes cria

e armazena apenas uma cpia de backup de cada arquivo alterado durante uma operao localizar-e-substituir. A execuo de outras operaes localizare-substituir sempre substitui a cpia de backup pelo arquivo original anterior. As cpias de backup so armazenadas em uma subpasta chamada Arquivos originais.

Backups incrementais salva todas as cpias de backup de arquivos alterados durante uma operao localizar-e-substituir. Os arquivos originais so movidos para uma subpasta Arquivos originais dentro da pasta atual e um nmero incremental anexado a cada nome de arquivo. A execuo de operaes localizar-e-substituir adicionais copia o arquivo original para a pasta Arquivos originais e adiciona o nmero mais alto seguinte ao nome do arquivo. Por exemplo, no caso de um arquivo chamado Drawing.png, na primeira execuo de uma operao localizar-e-substituir, o arquivo de backup receber este nome: Drawing-1.png. Na segunda execuo de uma operao localizar-e-substituir, o arquivo de backup receber o nome Drawing-2.png e assim por diante. 4

Clicar em OK.

Localizao e substituio de texto fcil pesquisar e substituir texto com o Fireworks. H vrias opes para refinar a pesquisa de modo a coincidir maisculas e minsculas ou localizar palavras inteiras ou partes delas.
Para pesquisar e substituir palavras, frases e seqncias de texto: 1 2 3

Escolher Localizar texto no menu pop-up Localizar do painel Localizar e substituir. Digitar o texto a ser pesquisado na caixa de texto Localizar. Digitar o texto de substituio na caixa Alterar para.

Se desejar, escolher opes que definam a pesquisa com mais detalhes:


Palavra inteira localiza o texto apenas da mesma forma que ele aparece na opo Localizar, no como parte de qualquer outra palavra. Coincidir maisc./minsc. diferencia Expresses regulares coincide

letras maisculas de minsculas na pesquisa de texto.

partes de palavras ou nmeros condicionalmente durante uma

pesquisa.

404 Captulo 17

Localizao e substituio de fonte Tambm h maneiras de localizar e substituir rapidamente fontes em documentos do Fireworks.
Para pesquisar e substituir fontes em um ou mais documentos do Fireworks: 1 2

Escolher Localizar fonte no menu pop-up Localizar do painel Localizar e substituir. Escolher a fonte e o estilo de fonte a serem localizados.
Dica: Existe a possibilidade de limitar a pesquisa por tamanhos de ponto mximo e mnimo.

Especificar a fonte, o estilo da fonte e o tamanho do ponto a serem usados como substituio na rea Alterar para.

Localizao e substituio de cor possvel localizar todas as ocorrncias de uma cor especfica em documentos do Fireworks e, em seguida, alter-la para outra cor.
Para pesquisar e substituir cores em documentos do Fireworks: 1

Escolher Localizar cor no menu pop-up Localizar.

Automatizao de uma tarefa repetitiva 405

Escolher um item no menu pop-up Aplicar a, para determinar como as cores encontradas na operao localizar-e-substituir sero aplicadas:
Preenchimentos e traos localiza Todas as propriedades localiza Preenchimentos localiza Traos localiza Efeitos localiza

e substitui cores de preenchimento e trao.

e substitui cores de preenchimento, trao e efeito.

e substitui uma cor de preenchimento, exceto dentro de preenchimentos com padro. e substitui apenas cores de trao. e substitui apenas cores de efeito.

Localizao e substituio de URL Alm de palavras, tipos e cores, o Fireworks localiza e substitui URLs atribudos a elementos interativos dos documentos.
Para pesquisar e substituir URLs atribudos a objetos da Web: 1 2 3

Escolher Localizar URL no menu pop-up Localizar do painel Localizar e substituir. Digitar o URL a ser pesquisado na caixa de texto Localizar. Digitar o URL de substituio na caixa de texto Alterar para.

Se desejar, escolher opes que definam a pesquisa com mais detalhes:


Palavra inteira localiza o texto apenas da mesma forma que ele aparece na opo Localizar, no como parte de qualquer outra palavra. Coincidir maisc./minsc. diferencia Expresses regulares coincide

letras maisculas de minsculas na pesquisa de texto.

partes de palavras ou nmeros condicionalmente durante uma

pesquisa. Localizao e substituio de cor no-Websafe Uma cor no-Websafe uma cor no includa na paleta de cores Web216. Uma cor ser Websafe se parecer sempre a mesma cor nas plataformas Macintosh e Windows. Para mais informaes sobre cores Websafe, consultar Otimizao de GIF, PNG, TIFF, BMP e PICT na pgina 334.

406 Captulo 17

Para pesquisar todas as cores no-Websafe e substitui-las por cores Websafe:

Escolher Localizar no-Web216 no menu pop-up Localizar do painel Localizar esubstituir.

Nota: Localizar no-Web216 no localiza nem substitui pixels dentro de objetos de imagem.

Processo em lote
O processo em lote uma maneira conveniente de converter automaticamente um grupo de arquivos grficos. Estas so as opes de processo em lote:

Converter uma seleo de arquivos em outro formato. Converter uma seleo de arquivos no mesmo formato com configuraes de otimizao
diferentes.

Colocar em escala arquivos exportados. Localizar e substituir texto, cores, URLs, fontes e cores no-Web216. Renomear grupos de arquivos adicionando um prefixo ou sufixo. Executar comandos em uma seleo de arquivos.

Para processar arquivos em lote:

Escolher Arquivo > Processo em lote.

Automatizao de uma tarefa repetitiva 407

Escolher os arquivos a serem processados. possvel escolher arquivos de pastas diferentes ou agrup-los por tipo de arquivo.
Adicionar adiciona

arquivos e pastas selecionados lista de arquivos para processo em lote. Se uma pasta for selecionada, todos os arquivos vlidos e legveis dentro dela sero adicionados ao processo em lote.

Nota: Arquivos vlidos so arquivos que foram criados, nomeados e salvos. Se a ltima verso no for salva, o usurio ser instrudo a salv-la e continuar o processo em lote. Se ele no salvar o arquivo, todo o processo em lote ser concludo.

Adicionar todos adiciona Remover remove 3

todos os arquivos vlidos da pasta selecionada no momento lista de arquivos para processo em lote. arquivos ou pastas selecionados da lista de arquivos para processo em lote.

Escolher Incluir arquivos do registro de projeto, para adicionar todos os arquivos do Registro de projeto. Esses arquivos no aparecem na lista de arquivos para processo em lote, mas sero includos no processo.

Escolher Incluir arquivos atuais abertos, para adicionar todos os arquivos abertos no momento. Esses arquivos no aparecem na lista de arquivos para processo em lote, mas sero includos no processo.

Clicar em Prximo e seguir um destes procedimentos, ou ambos:

Para adicionar uma tarefa ao lote, selecion-la na lista Opes de lote e clicar em Adicionar.
Cada tarefa pode ser adicionada apenas uma vez. Para mais informaes sobre como adicionar comandos, consultar Execuo de um comando com um processo em lote na pgina 412.

Para reorganizar a lista, selecionar a tarefa na lista Incluir em lote e clicar nos botes de seta
acima e abaixo.

Nota: A ordem em que as tarefas aparecem na lista Incluir em lote a ordem em que elas sero executadas durante o processo em lote, com a exceo de Exportar, que sempre a ltima a ser executada.

408 Captulo 17

6 7

Selecionar uma tarefa na lista Incluir em lote, para exibir opes extras para essa tarefa. Escolher configuraes para cada opo, se necessrio. Para remover uma tarefa do lote, selecion-la na lista Incluir em lote e clicar em Remover. Clicar em Prximo. Escolher opes para salvar arquivos processados:
Mesmo local do arquivo original salva

8 9

o arquivo no mesmo local que o arquivo de origem e substitui o arquivo de origem se os nomes dos arquivos forem os mesmos e estiverem no mesmo formato. escolher um local para salvar os arquivos processados.

Personalizar local permite 10

Selecionar Backups a fim de escolher opes de backup para os arquivos originais. sempre mais seguro fazer backup dos arquivos. Para mais informaes, consultar Especificao do local de sada do processo em lote na pgina 412.

11

Clicar em Salvar script a fim de salvar as configuraes do processo em lote para uso futuro. Para mais informaes, consultar Salva de um processo em lote como script na pgina 413. Clicar em Lote para executar o processo em lote.

12

Alterao de uma configurao de otimizao com um processo em lote A opo Exportar da caixa de dilogo Processo em lote permite alterar as configuraes de otimizao de arquivo.

Para definir as configuraes de exportao para um processo em lote: 1 2

Escolher Exportar na lista Opes de lote e clicar em Adicionar. No menu pop-up Configuraes, escolher uma das seguintes opes e clicar em OK: anteriores de cada arquivo durante o processo em lote. Por exemplo, durante o processo em lote de uma pasta de GIFs e JPEGs, os arquivos resultantes ainda sero GIFs e JPEGs e as configuraes originais de paleta e compactao sero usadas na exportao de cada arquivo.

Escolher Usar configuraes de cada arquivo para manter as configuraes de exportao

Automatizao de uma tarefa repetitiva 409

Escolher Personalizar ou clicar em Editar para alterar as configuraes na caixa de dilogo


Visualizar exportao.

Escolher uma configurao de exportao predefinida como GIF Web 216 ou JPEG - Melhor
qualidade. Todos os arquivos sero convertidos nessa configurao.
3

Clicar em Prximo para continuar o processo em lote. Para informaes sobre como concluir o processo em lote, consultar Processo em lote na pgina 407.

Como colocar uma imagem grfica em escala com um processo em lote A opo Escala da caixa de dilogo Processo em lote permite alterar a altura e a largura das imagens que esto sendo exportadas.
Para definir opes de escala para arquivos processados em lote: 1 2

Escolher Escala na lista Opes de lote e clicar em Adicionar. No menu pop-up Escala, escolher uma opo:
No escalonar exporta

os arquivos inalterados. imagens em escala com a largura e altura exatas

Escalonar para dimensionar coloca

especificadas.
Escalonar para encaixar na rea ajusta as imagens em proporo faixa especificada de largura

e altura mximas.
Dica: Use Escalonar para encaixar na rea a fim de converter um grupo de imagens em miniaturas com tamanho uniforme.

Escalonar pela porcentagem coloca 3

imagens em escala por porcentagem.

Clicar em Prximo para continuar o processo em lote. Para informaes sobre como concluir o processo em lote, consultar Processo em lote na pgina 407.

410 Captulo 17

Localizao e substituio durante um processo em lote A opo Localizar e substituir da caixa de dilogo Processo em lote localiza e substitui texto, fontes, cores ou URLs em botes, pontos ativos ou fatias.

Substituio em lote afeta apenas os seguintes formatos de arquivo: Fireworks PNG, Illustrator, FreeHand e CorelDRAW. Substituio em lote no afeta GIFs e JPEGs.
Para selecionar atributos a localizar e substituir durante um processo em lote: 1 2 3 4 5

Escolher Localizar e substituir na lista Opes de lote e clicar em Adicionar. Clicar em Editar. Selecionar o tipo de atributo a localizar e substituir no menu pop-up Localizar: texto, fonte, cor, URL ou no-Web216. Digitar o elemento especfico a ser localizado na caixa de texto Localizar. Digitar, na caixa de texto Alterar para, o elemento especfico para substituir o item localizado.
Dica: Escolher Atualizar registro de projeto para adicionar arquivos alterados ao Registro de projeto, de modo a facilitar sua localizao posterior.

6 7

Clicar em OK para armazenar as configuraes de Localizar e substituir. Clicar em Prximo para continuar o processo em lote. Para informaes sobre como concluir o processo em lote, consultar Processo em lote na pgina 407. Para mais informaes sobre as opes de Localizar e substituir, consultar Localizar e substituir na pgina 402.

Alterao de um nome de arquivo com um processo em lote A opo Renomear da caixa de dilogo Processo em lote permite alterar os nomes dos arquivos que esto sendo processados.
Para definir as opes de nomes para arquivos processados em lote: 1 2

Escolher Renomear na lista Opes de lote e clicar em Adicionar. Escolher uma opo no menu pop-up Renomear.
Nome original mantm

os nomes de arquivo inalterados.

Automatizao de uma tarefa repetitiva 411

Adicionar prefixo permite adicionar texto ao incio do nome do arquivo. Por exemplo, se digitar night_, o arquivo Sunrise.gif ser renomeado para night_Sunrise.gif quando for processado em lote. Adicionar sufixo permite adicionar texto ao final do nome do arquivo antes da extenso. Por exemplo, se digitar _day, o arquivo Sunset.gif ser renomeado para Sunset_day.gif quando for processado em lote. Clicar em Prximo para continuar o processo em lote. Para informaes sobre como concluir o processo em lote, consultar Processo em lote na pgina 407.

Execuo de um comando com um processo em lote A opo Comandos da caixa de dilogo Processo em lote permite executar comandos JavaScript em arquivos.
Para definir opes de comando para arquivos processados em lote: 1 2

Clicar no sinal de mais (+) (Windows) ou no tringulo (Macintosh) ao lado da opo Comandos na lista Opes de lote, para exibir os comandos disponveis. Selecionar um comando e clicar em Adicionar para adicion-lo lista Incluir em lote.
Nota: Esses comandos no podem ser editados.

Clicar em Prximo para continuar o processo em lote. Para informaes sobre como concluir o processo em lote, consultar Processo em lote na pgina 407. Para mais informaes sobre como criar comandos, consultar Scripts com o painel Histrico na pgina 416.
Nota: Alguns comandos no funcionam durante um processo em lote. Escolha comandos que funcionem no documento sem a necessidade de selecionar qualquer objeto.

Especificao do local de sada do processo em lote Depois de escolher todas as opes de lote na caixa de dilogo Processo em lote, ser necessrio escolher as opes para salvar os arquivos. possvel salvar cpias de backup dos arquivos originais de um processo em lote. As cpias de backup dos arquivos so colocadas em uma subpasta Arquivos originais, na mesma pasta que todos os arquivos originais.

412 Captulo 17

Para fazer backup de arquivos processados em lote: 1 2 3

Escolher um local de sada do processo em lote. Escolher Backups para definir as opes de backup. Escolher como deseja fazer o backup dos arquivos:
Substituir backups existentes substitui

o arquivo de backup anterior.

Backups incrementais mantm cpias de todos os arquivos de backup. Quando for executado um novo processo em lote, um nmero ser anexado ao final do nome do arquivo da nova cpia de backup.
Nota: Se Backup for desselecionado, o processo em lote no mesmo formato de arquivo substituir o arquivo original, se o nome for o mesmo. Entretanto, o processo em lote em um formato diferente de arquivo criar um novo arquivo e no mover nem excluir o arquivo original.

Clicar em Lote para concluir o processo em lote, ou em Voltar para retornar caixa de dilogo Processo em lote.

Salva de um processo em lote como script possvel salvar as configuraes do processo em lote como script ou comando para recriar facilmente o processo em lote no futuro. Depois de escolhidas todas as opes de lote na caixa de dilogo Lote, sero apresentadas as opes para salvar os arquivos.
Para criar um script em lote: 1 2 3

Clicar em Salvar script para criar um script em lote. Digitar um nome e um destino para o script. Clicar em Salvar.
Nota: Se o script for salvo na pasta Comandos no disco rgido, ele ser adicionado ao menu Comandos do Fireworks. A localizao da pasta Comandos varia de acordo com o sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

Para executar um script em lote: 1

Seguir um destes procedimentos:

No Fireworks, escolher Comandos > Executar script. Fora do Fireworks, clicar duas vezes no nome do arquivo de script no disco rgido.
2 3

Selecionar um script e clicar em Abrir. Escolher os arquivos a serem processados com o script:
Arquivos atuais abertos processa

todos os documentos abertos. todos os arquivos listados no painel Registro

Registro de projeto (Todos os arquivos) processa

de projeto.
Registro de projeto (Arquivos selecionados) processa os arquivos selecionados no momento no

painel Registro de projeto.


Personalizar permite

selecionar os arquivos a serem processados.

Automatizao de uma tarefa repetitiva 413

Nota: Clicar no boto de reticncias (...) ao lado do menu pop-up Arquivos a processar para selecionar arquivos a processar.

Clicar em OK. Para mais informaes sobre como escolher arquivos, consultar Processo em lote na pgina 407.

Execuo de script arrastando e soltando Se o usurio tiver um processo em lote que repita com freqncia, ele dever salv-lo como um script e, em seguida, arrastar esse script da unidade de disco rgido at o cone do Fireworks em seu espao de trabalho para executar o processo em lote. O aplicativo Fireworks inicia e executa esse script.
Para executar scripts arrastando e soltando: 1 2

Salvar um script. Seguir um destes procedimentos:

Arrastar o cone do arquivo de script at o cone do Fireworks no espao de trabalho. Arrastar o cone do arquivo de script at um documento aberto do Fireworks.
Nota: Arrastar vrios arquivos de script e vrios arquivos grficos para o Fireworks processa os arquivos grficos vrias vezes, uma vez para cada script.

Uso do Registro de projeto


O Registro de projeto ajuda a rastrear e controlar as alteraes feitas em mltiplos arquivos com Localizar e substituir ou durante o processo em lote. Os documentos alterados por Localizar e substituir so registrados no Registro de projeto.

414 Captulo 17

Gerenciamento de uma pesquisa com o Registro de projeto O usurio pode utilizar o Registro de projeto para navegar pelos arquivos selecionados, exportar arquivos selecionados com suas ltimas configuraes de exportao ou selecionar arquivos a serem processados em lote. O Registro de projeto registra cada documento alterado e exibe a moldura do documento que contm a alterao, assim como a data e hora da alterao. O usurio pode adicionar arquivos manualmente ao Registro de projeto para rastrear os arquivos que pretende editar com freqncia.
Para adicionar manualmente arquivos ao Registro de projeto: 1 2 3 4 5

Escolher Janela > Registro de projeto. Escolher Adicionar arquivos ao registro no menu Opes do Registro de projeto. Navegar at o arquivo que deseja adicionar. Selecionar o arquivo. Clicar em Abrir.

Para abrir os arquivos listados no Registro de projeto, seguir um destes procedimentos:

Clicar duas vezes no arquivo. Selecionar o arquivo e clicar em Abrir.


Para remover entradas do Registro de projeto:

Selecionar uma ou mais entradas e escolher Limpar seleo ou Limpar tudo no menu Opes do painel Registro de projeto.
Para exportar um arquivo listado no Registro de projeto com suas ltimas configuraes de exportao:

Selecionar o arquivo e escolher Exportar novamente. Exibio e impresso do Registro de projeto A verso mais recente do Registro de projeto armazenada como um arquivo HTML no disco rgido. Sua localizao exata varia de acordo com o sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.
Para exibir ou imprimir o Registro de projeto:

Abrir o arquivo Project_Log.htm em um navegador.

Extenso dos recursos do Fireworks


Nunca foi to fcil estender os recursos do Fireworks. O Fireworks oferece vrias maneiras diferentes de criar comandos personalizados que aprimoram seus recursos. O Extension Manager permite instalar e gerenciar extenses que estendem a funcionalidade do Fireworks. Uma outra opo escrever cdigo JavaScript e us-lo como um comando personalizado no Fireworks. Os filmes Flash SWF tambm podem ser usados como comandos personalizados no Fireworks. Alm disso, o painel Histrico do Fireworks oferece uma interface fcil de usar que permite criar comandos personalizados a partir de vrias tarefas gravadas.

Automatizao de uma tarefa repetitiva 415

Depois de instaladas, as extenses so adicionadas ao menu Comandos do Fireworks, o mesmo acontecendo com os comandos personalizados que so criados.
Nota: Se os comandos forem armazenados como um arquivo SWF na pasta Command Panels no disco rgido, eles sero disponibilizados como painis no menu Janela. Para mais informaes, consultar Sobre a criao de scripts com arquivos do Flash SWF na pgina 418.

Uso do Macromedia Extension Manager Uma extenso um script de comando, biblioteca, filtro, padro ou textura que pode ser adicionado a um aplicativo Macromedia para aprimorar seus recursos. O Fireworks inclui o Macromedia Extension Manager, que instala, gerencia e exclui extenses com facilidade. Durante a instalao, o Fireworks inclui um conjunto de extenses padro no menu Comandos. O Extension Manager tambm pode agrupar extenses personalizadas e envi-las ao Macromedia Exchange para Fireworks. O Exchange permite o compartilhamento de extenses entre usurios do Fireworks. Para saber mais sobre o Macromedia Exchange, visite http://www.macromedia.com/br/ exchange/. As extenses do Fireworks so armazenadas na pasta Configuration/Comandos dentro da pasta do aplicativo Fireworks no disco rgido. Para mais informaes sobre a localizao da pasta Comandos, consultar Como trabalhar com arquivos de configurao na pgina 427.
Nota: Os comandos criados pelo usurio, como aqueles salvos atravs do painel Histrico, e algumas extenses de terceiros so tratados de formas diferentes. Eles so armazenados na subpasta Comandos na pasta de configurao de cada usurio. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

Para mais informaes sobre como usar o Extension Manager, consultar Uso do Macromedia Extension Manager, acessvel a partir do menu Ajuda do Extension Manager. Scripts com o painel Histrico O painel Histrico grava uma lista das etapas executadas durante o trabalho no Fireworks. Cada etapa armazenada em uma linha separada do painel Histrico, comeando com a mais recente. Por padro, o painel lembra de 20 etapas. Entretanto, possvel alterar esse valor a qualquer momento. Criao de um comando O Fireworks oferece a opo de salvar grupos de etapas no painel Histrico como um comando que possa ser reutilizado. Alm disso, ele executa os comandos salvos em qualquer um de seus respectivos documentos. Esses comandos no so especficos do documento. Os comandos salvos so armazenados como arquivos JSF na pasta Comandos especfica do usurio no disco rgido. A localizao exata dessa pasta varia de acordo com o sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.
Para salvar etapas como um comando: 1

Escolher as etapas a salvar como um comando: uma faixa de etapas a serem salvas como um comando.

Clicar em uma etapa, manter pressionada a tecla Shift e clicar em outra etapa para selecionar Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar para
selecionar etapas no contguas.

416 Captulo 17

2 3

Clicar no boto Salvar como comando na parte inferior do painel Histrico. Digitar um nome para o comando e clicar em OK. O comando aparece no menu Comandos.

Para desfazer ou refazer etapas usando o painel Histrico:

Arrastar o Marcador do Desfazer para cima no painel at atingir a ltima etapa que deseja
desfazer ou refazer.

Clicar na trilha do Marcador do Desfazer esquerda do painel Histrico.


Nota: Etapas desfeitas permanecem no painel Histrico realadas em cinza.

Para alterar o nmero de etapas no painel Histrico: 1

Escolher Editar > Preferncias.


Nota: No Mac OS X, escolher Fireworks > Preferences.

Alterar Etapas de desfazer para o nmero de etapas que deseja que o painel Histrico registre.
Nota: Etapas adicionais requerem mais memria do computador.

Para limpar todas as etapas do painel Histrico:

Escolher Limpar histrico no menu Opes do painel Histrico, para liberar espao na memria e em disco.
Nota: Limpar aes do painel Histrico remove a possibilidade de Desfazer edies.

Execuo de um comando possvel executar comandos gravados ou uma seleo de aes no painel Histrico a qualquer momento.
Para reproduzir um comando salvo: 1 2

Se necessrio, selecionar um ou mais objetos. Escolher o comando no menu Comandos.

Para reproduzir uma seleo de etapas: 1 2 3

Selecionar um ou mais objetos. Escolher as etapas no painel Histrico. Clicar no boto Reproduzir na parte inferior do painel Histrico. As etapas marcadas com um X no podem ser repetidas e no sero reproduzidas. Linhas separadoras indicam que foi selecionado um objeto diferente. Comandos criados a partir de etapas que ultrapassam uma linha separadora podem gerar resultados imprevisveis.

Para aplicar etapas selecionadas a objetos em vrios documentos: 1 2 3

Selecionar uma faixa de etapas. Clicar no boto Copia etapas na rea de transferncia, na parte inferior do painel Histrico. Selecionar um ou mais objetos em qualquer documento do Fireworks.

Automatizao de uma tarefa repetitiva 417

Escolher Editar > Colar.

Para repetir a ltima etapa:

Escolher Editar > Repetir Script de comando. Sobre a criao de scripts com JavaScript Para reduzir o tdio de algumas tarefas repetitivas, o usurio pode escrever seu prprio cdigo em JavaScript em um editor de texto para executar no Fireworks. Ele pode controlar quase todos os comandos ou configuraes do Fireworks com JavaScript. O Macromedia Dreamweaver tambm usa JavaScript. possvel escrever scripts que controlem o Fireworks de dentro do Dreamweaver. Para documentao sobre a API de JavaScript, consultar Extending Fireworks MX, disponvel como PDF no CD de instalao do Macromedia Fireworks MX. Sobre a criao de scripts com arquivos do Flash SWF Com o Flash, possvel criar filmes SWF que contm cdigo JavaScript. Esses filmes podem ser usados como comandos do Fireworks, acessveis a partir do menu Comandos do Fireworks. Existe at mesmo a opo de criar um filme SWF e us-lo como um painel do Fireworks, acessvel a partir do menu Janela. O painel Alinhar do Fireworks um exemplo de um filme do Flash importado como um painel. Os filmes SWF que so usados como comandos so armazenados na pasta Comandos no disco rgido e os filmes SWF que so usados como painis so armazenados na pasta Command Panels. A localizao exata dessas pastas varia de acordo com o sistema e depende de o usurio querer disponibilizar os comandos personalizados apenas para uso prprio ou para todos os usurios que fizerem login no sistema. Para mais informaes sobre localizaes de pastas, consultar Como trabalhar com arquivos de configurao na pgina 427. Para instrues mais detalhadas sobre como criar comandos a partir de filmes do Flash SWF, consultar Extending Fireworks MX, disponvel como PDF no CD de instalao do Macromedia Fireworks MX. Gerenciamento de um comando possvel renomear ou excluir comandos que aparecem no menu Comandos. A opo Gerenciar comandos salvos do Fireworks permite renomear e excluir os comandos criados por qualquer usurio. Outros comandos e extenses que foram instalados com o Fireworks ou que foram transferidos por download e instalados a partir do site do Macromedia Exchange na Web devem ser gerenciados com o Extension Manager.
Para renomear um comandos personalizado que criar: 1 2 3

Escolher Comandos > Gerenciar comandos salvos. Selecionar o comando. Clicar em Renomear, digitar um novo nome e clicar em OK.

418 Captulo 17

Para excluir um comando que criou, seguir um destes procedimentos:

No Fireworks, escolher Comandos > Gerenciar comandos salvos. Em seguida, selecionar o


comando e clicar em Excluir.

No disco rgido, excluir o arquivo JSF do comando da pasta Comandos especfica do usurio.
A localizao exata dessa pasta varia de acordo com o sistema operacional. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.
Para renomear ou excluir um comando includo no Fireworks ou transferido por download a partir do Macromedia Exchange:

Escolher Comando > Gerenciar extenses. O Extension Manager exibido. Para informaes sobre como gerenciar extenses, consultar a Ajuda do Extension Manager. Edio ou personalizao de um script de comando Scripts de comando so salvos como JavaScript. Se conhecer JavaScript, o usurio poder abrir e editar comandos em qualquer editor de texto, como o Bloco de notas (Windows) ou SimpleText (Macintosh).
Para editar um comando usando JavaScript: 1

No espao de trabalho, navegar at a pasta Comandos ou Command Panels apropriada no disco rgido.
Nota: A localizao exata dessas pastas varia de acordo com o sistema e depende de o comando estar disponvel apenas para seu perfil de usurio ou para todos os usurios. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

2 3

Abrir o arquivo de script desejado em um editor de texto e modificar o cdigo JavaScript. Salvar e fechar o script.

Para editar aes selecionadas no painel Histrico usando JavaScript: 1 2 3 4 5 6 7

No Fireworks, selecionar uma faixa de etapas no painel Histrico. Clicar no boto Copia etapas na rea de transferncia, na parte inferior do painel Histrico. Criar um novo documento em um aplicativo de edio de texto. Colar as etapas no novo documento de texto. Modificar as etapas da maneira desejada. Salvar e fechar o script. Copiar o script para a pasta Comandos no disco rgido.
Nota: A localizao exata dessa pasta varia de acordo com o sistema e depende de o comando estar disponvel apenas para seu perfil de usurio ou para todos os usurios. Para mais informaes, consultar Como trabalhar com arquivos de configurao na pgina 427.

O novo comando estar disponvel no menu Comandos na prxima vez que o usurio iniciar o Fireworks.

Automatizao de uma tarefa repetitiva 419

420 Captulo 17

CAPTULO 18 Preferncias e atalhos de teclado

As configuraes de preferncia do Macromedia Fireworks permitem controlar a aparncia geral da interface do usurio, assim como a edio e os aspectos de pasta. Alm disso, o Fireworks permite personalizar os atalhos de teclado. Isto , o usurio pode personalizar os atalhos e padroniz-los para usar em seus programas de software preferidos.

Configurao de preferncias
O Fireworks tem configuraes de preferncia que controlam a aparncia geral da interface do usurio, alm de opes relacionadas a recursos especficos, como cores padro, opes de ferramentas, locais das pastas e converses de arquivo.
Para definir preferncias: 1

Selecionar Editar > Preferncias.


Nota: No Mac OS X, selecionar Fireworks > Preferncias.

2 3

Selecionar o grupo de preferncias que deseja modificar: Geral, Edio, Iniciar e editar, Pastas ou Importar. Fazer as alteraes e clicar em OK.

Preferncias gerais As opes a seguir esto na guia Geral de preferncias:


Etapas de desfazer define as etapas de desfazer/refazer em um nmero entre 0 e 999. Essa

configurao se aplica ao comando Editar > Desfazer e ao painel Histrico. Um grande nmero do recurso desfazer pode aumentar a quantidade de memria que o Fireworks necessita. Voc deve reiniciar o Fireworks para a alterao dessa configurao entrar em vigor.
Padres de Cores define os padres para traos de pincel, preenchimentos e caminhos de realce. As opes Trao e Preenchimento no alteram automaticamente as cores exibidas nas caixas de cores do painel Ferramentas. Elas permitem alterar as cores padro especificadas pelo boto Definir trao padro/cores de preenchimento no painel Ferramentas. Interpolao define um dos quatro diferentes mtodos de escala usados pelo Fireworks para interpolar pixels quando as imagens so colocadas em escala:

A interpolao bicbica proporciona, na maioria das vezes, a melhor e mais precisa qualidade
no resultado e o mtodo de escala padro.

A interpolao bilinear proporciona resultados mais precisos do que a interpolao suave, mas
no tanto quanto a bicbica.

421

A interpolao suave, usada no Fireworks 1, oferece um desfoque suave e elimina os detalhes


precisos. Este mtodo til quando outros produzem artefatos indesejados. A interpolao Vizinho mais prximo resulta em bordas dentadas e contrastes aguados sem desfoque. O efeito semelhante ao de aumentar ou reduzir uma imagem usando a ferramenta Zoom. Espao de trabalho: Mostrar cones de guias no est selecionado por padro. Permite exibir ou ocultar os cones grficos nas guias de painel, que estavam visveis nas verses anteriores do Fireworks. Essa opo tambm afeta a exibio do Mini-iniciador na base de cada janela do documento. Salvar arquivos: Adicionar cones de visualizao (somente Macintosh) permite exibir ou ocultar miniaturas de arquivos PNG do Fireworks no seu disco rgido. Se a seleo desta opo for cancelada o cone tradicional do Fireworks usado para arquivos PNG do Fireworks ser exibido. Esta opo entra em vigor depois que o arquivo for salvo. Edio de preferncias As preferncias de edio controlam a aparncia do ponteiro e sugestes visuais para trabalhar com objetos de bitmap.
Cursores precisos substitui

os ponteiros de cone de ferramenta pelo ponteiro de fios cruzados.

Excluir objetos ao cortar exclui

permanentemente pixels ou objetos fora da caixa limite de uma seleo ao selecionar Editar > Cortar documento ou Modificar > Tela > Tamanho da tela. o tamanho e a forma dos ponteiros da ferramenta Pincel, Borracha, Embaar, Aguar, Clarear, Escurecer e Mancha para mostrar com preciso aquilo que o usurio est prestes a desenhar ou apagar. Para alguns pincis grandes com vrias pontas, o padro do ponteiro ser fios cruzados. Quando esta opo e Cursores precisos so desativados, os ponteiros de cone de ferramenta sero exibidos.

Cursores para pintar do tamanho do pincel definem

Exibir borda listrada coloca a borda listrada familiar em volta de toda a tela quando se est trabalhando com objetos bitmap (modo bitmap). Mostrar visualizao da caneta proporciona uma visualizao do prximo segmento do traado que ser criado se o usurio clicar naquele momento com a ferramenta Caneta. Mostrar pontos slidos mostra

os pontos selecionados como vazados e pontos no selecionados

como slidos.
Desativar Ocultar bordas desativa automaticamente Ocultar bordas quando a seleo for alterada. Distncia de seleo permite especificar o grau de proximidade que um ponteiro deve estar do objeto antes de selecion-lo. A distncia de seleo pode estar entre 1 e 10 pixels. Distncia de alinhamento permite especificar o grau de proximidade que o objeto que est sendo movido deve estar antes de alinh-lo grade ou linha-guia. Distncia de alinhamento funciona quando Encaixar na grade ou Encaixar nas guias estiver ativado. Distncia de alinhamento pode ter um valor entre 1 e 10 pixels.

Preferncias Iniciar e editar Com a configurao das preferncias de iniciar-e-editar, possvel controlar como os aplicativos externos, como o Macromedia Flash, Macromedia Director e Microsoft FrontPage iniciam e editam os grficos no Fireworks. Na maioria das vezes, o Fireworks tenta ele mesmo localizar o PNG de um grfico. Quando no consegue, o Fireworks usa as preferncias de iniciar-e-editar que o usurio definiu, para determinar como tentar localizar o arquivo PNG de origem.

422 Captulo 18

Nota: O Macromedia Flash uma exceo. Ao iniciar e editar grficos no Flash, o Fireworks sempre usa as preferncias definidas na seo Iniciar e editar da caixa de dilogos Preferncias.

Quando editar a partir de um aplicativo externo determina se o arquivo PNG original do Fireworks

deve ser aberto quando se usa o Fireworks para editar imagens de dentro de outros aplicativos.
Quando otimizar a partir de um aplicativo externo determina se o arquivo PNG original do Fireworks deve ser aberto quando se otimiza um grfico.
Nota: Essa configurao no se aplica ao Director, que sempre abre automaticamente e otimiza um grfico, sem pedir um PNG de origem, mesmo que essa preferncia seja definida de outra forma no Fireworks.

Para mais informaes sobre como trabalhar com Fireworks graphics no Flash, consultar Como trabalhar com o Macromedia Flash MX na pgina 377. Para mais informaes sobre como trabalhar com grficos do Fireworks no Director, consultar Como trabalhar com o Macromedia Director na pgina 386. Para mais informaes sobre como trabalhar com grficos do Fireworks dentro do FrontPage, consultar Como trabalhar com o Microsoft FrontPage na pgina 392.
Nota: O Macromedia Dreamweaver manipula as configuraes de iniciar-e-editar de forma diferente. O Dreamweaver sempre abre o PNG de origem, mesmo que as preferncias de iniciar-e-editar tenham sido definidas de forma diferente no Fireworks. Se no houver Nota de design ou o caminho para o PNG de origem estiver partido, o Dreamweaver sempre exibe um aviso para localizar o arquivo PNG de origem. Para mais informaes sobre como trabalhar com grficos e elementos interativos do Fireworks dentro do Dreamweaver, consultar Como trabalhar com o Macromedia Dreamweaver MX na pgina 363.

Preferncias de pastas As preferncias de pasta do acesso a plug-ins adicionais do Photoshop, arquivos de textura e de padres de fontes externas. Alm disso, no Mac OS 9.x, possvel especificar o local em que o Fireworks deve armazenar os arquivos cache temporrios.
Materiais adicionais (Plug-ins do Photoshop, Texturas e Padres ) pastas de destino contendo plug-ins, texturas e padres. As pastas podem ficar em outra pasta no disco rgido, em um CDROM ou outra unidade externa ou em rede.

Os plug-ins do Photoshop aparecem no menu Filtros do Fireworks e no menu Adicionar efeitos do Inspetor de propriedades. As texturas e os padres armazenados como arquivos PNG, JPEG e GIF aparecem como opes nos menus pop-up do Inspetor de propriedades. Para mais informaes sobre texturas e padres, consultar Adio de textura a um preenchimento na pgina 211.
Discos temporrios (principal e secundrio) especificam onde o Fireworks armazenar arquivos cache temporrios, que algumas vezes podem ficar muito grandes. Se tiver mais de um disco rgido no seu computador, destine aquele com maior espao para ser seu disco temporrio principal. Voc pode especificar um disco rgido secundrio, se o disco principal ficar sem espao livre.

O recurso Discos temporrios est disponvel somente no sistema operacional Mac OS 9. Como o gerenciamento de memria no Windows e no Mac OS X so mais eficientes, esses sistemas no necessitam do recurso Disco temporrio. Preferncias de importao do Photoshop As preferncias da guia Importar permitem gerenciar a converso de arquivos do Photoshop:

possvel converter camadas em objetos ou novas molduras. possvel selecionar entre editar o texto importado ou manter sua aparncia. possvel importar um arquivo do Photoshop como objeto de bitmap plano.

Preferncias e atalhos de teclado 423

Para mais informaes sobre as preferncias Importar, consultar Colocao de um grfico do Photoshop no Fireworks na pgina 395. Restaurao de preferncias possvel restaurar as configuraes originais de preferncias, excluindo o arquivo de preferncias. A primeira vez que o Fireworks for iniciado depois que o arquivo de preferncias for excludo, ser criado um novo arquivo restaurando a configurao original.
Para restaurar as preferncias padro: 1 2

Sair do Fireworks. Localizar o arquivo Fireworks MX Preferences no seu disco rgido e exclu-lo. O local exato desse arquivo varia conforme o sistema. Para mais informaes, consultar Localizao dos arquivos de preferncias do Fireworks na pgina 430.

Reiniciar o Fireworks.

Alterao dos conjuntos de atalho de teclado


O Fireworks permite usar atalhos de teclado para selecionar comandos de menu, escolher ferramentas no painel Ferramentas e acelerar tarefas diversas inexistentes como comandos de menu. O uso de atalhos aumenta a produtividade permitindo a execuo rpida de aes simples. Se o usurio estiver acostumado a usar atalhos de outros aplicativos como o FreeHand, Illustrator, Photoshop ou produtos que usem o padro Macromedia, poder mudar para o conjunto de atalhos de sua preferncia.
Para alterar o conjunto de atalhos atual: 1

Selecionar Editar > Atalhos do teclado para abrir a caixa de dilogo Atalhos do teclado.
Nota: No Mac OS X, selecionar Fireworks > Atalhos do teclado.

424 Captulo 18

Selecionar o conjunto de sua preferncia no menu pop-up Conjunto atual e clicar em OK.

Caixa de dilogo Atalhos do teclado Criao de atalhos personalizados e secundrios Voc pode criar seus prprios atalhos de teclado personalizados e criar atalhos secundrios se precisar de vrias maneiras diferentes de executar uma ao. Um conjunto de atalho personalizado est sempre baseado em um conjunto pr-instalado.
Nota: No Fireworks, os atalhos para as ferramentas no podem incluir teclas modificadoras: Control, Shift e Alt (Windows) ou Command, Shift, Option e Control (Macintosh). Atalhos de ferramentas consistem em uma nica tecla de nmero ou letra.

Para criar um atalho personalizado ou secundrio para um comando do menu, uma ferramenta ou uma ao variada: 1 2 3

Selecionar Editar > Atalhos do teclado para abrir a caixa de dilogo Atalhos do teclado. Clicar no boto Duplicar conjunto. Digitar um nome para o conjunto personalizado na caixa de dilogo Duplicar conjunto e clicar em OK. O nome do novo menu personalizado aparece na caixa de texto Conjunto atual. Selecionar a categoria de atalho apropriada na lista Comandos. acessado pela barra de menu.

Selecionar Comandos do menu para criar um atalho personalizado para qualquer comando

Preferncias e atalhos de teclado 425

Selecionar Ferramentas para criar um atalho personalizado para qualquer ferramenta no painel
Ferramentas.

Selecionar Miscelnea para criar um atalho personalizado para diversas aes predefinidas.
Depois de selecionados, todos os atalhos possveis em uma determinada categoria aparecem na lista de rolagem Comandos.
5

Selecionar o comando cujo atalho deseja modificar na lista Comandos. Se existir um atalho, esse ser exibido na lista Atalhos. Clicar na caixa de texto Pressionar tecla e pressionar as teclas desejadas para o novo atalho no teclado. Se a combinao de teclas j estiver sendo usada por outro atalho, uma mensagem de aviso ser exibida abaixo da caixa de texto Pressionar tecla.

Seguir um destes procedimentos:

Clicar no boto Adicionar novo atalho (+) para adicionar um atalho secundrio lista de atalhos. Clicar em Alterar para substituir o atalho selecionado.
Excluso de atalhos personalizados e conjuntos de atalhos personalizados Voc pode excluir qualquer atalho personalizado ou conjunto de atalhos personalizado.
Para excluir um conjunto de atalhos personalizados: 1 2

Selecionar Editar > Atalhos do teclado para abrir a caixa de dilogo Atalhos do teclado. Clicar no boto Excluir conjunto.

Boto Excluir conjunto

3 4

Selecionar o conjunto de atalhos que deseja excluir da caixa de dilogo Excluir conjunto. Clicar no boto Excluir.

Para excluir um atalho personalizado: 1 2 3

Selecionar o comando na lista Comandos. Selecionar o atalho personalizado na lista Atalhos. Clicar no boto Excluir atalho selecionado (-).

Criao de folha de referncia para o conjunto de atalho atual Folha de referncia o registro do conjunto atual de atalho armazenado em formato de tabela HTML. Voc pode exibir a folha de referncia em um navegador da Web ou imprimi-la.
Para criar uma folha de referncia: 1

Selecionar Editar > Atalhos do teclado para abrir a caixa de dilogo Atalhos do teclado.

426 Captulo 18

Clicar no boto Exportar conjunto como HTML ao lado da caixa de texto Conjunto atual. A caixa de dilogo Salvar exibida. Digitar o nome para a folha de referncia e selecionar o local apropriado para o arquivo. Clicar em Salvar.

3 4

Como trabalhar com arquivos de configurao


Para acomodar sistemas multiusurio, o Fireworks suporta arquivos de configurao do usurio. Desse modo, possvel usar recursos personalizados do usurio no Fireworks, como estilos, atalhos de teclado, comandos e outros, sem afetar a configurao do Fireworks para outros usurios. O Fireworks cria um conjunto diferente de arquivos de configurao para cada usurio. O Fireworks tambm instala arquivos de configurao principal na pasta de aplicativo do Fireworks. Os arquivos de configurao principal contm as configuraes padro do Fireworks e afetam todos os usurios. Alguns arquivos de configurao ficam somente na pasta de aplicativo do Fireworks, como o Fireworks plug-ins. Em alguns sistemas, somente os administradores tm acesso aos arquivos de configurao principal na pasta de aplicativo do Fireworks. Sobre os arquivos de configurao do usurio Os arquivos de configurao do usurio do Fireworks so armazenados na sua pasta de configurao de usurio. O local exato dessa pasta varia conforme o sistema operacional. Para mais informaes, consultar Localizao dos arquivos de configurao na pgina 428. Dentro da pasta de configurao do usurio Fireworks MX, os arquivos esto organizados da seguinte forma:
Os comandos, painis de comando, estilos, configuraes de exportao e bibliotecas URL ficam

em subpastas dentro da pasta Macromedia/Fireworks MX.


O Registro de projeto fica

armazenado no arquivo chamado Project_Log.htm, dentro da pasta Macromedia/Fireworks MX.

As preferncias ficam armazenadas no arquivo chamado Fireworks MX Preferences.txt (Windows) ou Fireworks MX Preferences (Macintosh). O local do arquivo varia conforme o sistema. O arquivo no fica sempre dentro da pasta de configurao do usurio. Para mais informaes, consultar Localizao dos arquivos de preferncias do Fireworks na pgina 430. Os atalhos de teclado ficam

na pasta Macromedia/Fireworks MX/English/Keyboard Shortcuts.

O seu dicionrio pessoal de ortografia fica armazenado no arquivo chamado Personal Dictionary.tlx dentro da pasta Macromedia/Common. Esse dicionrio compartilhado com outros aplicativos Macromedia. Os arquivos de estilos personalizados (STL) podem

ser salvos na subpasta Nav Menu, da pasta Macromedia/Fireworks MX. Voc pode salvar os arquivos STL nessa subpasta para us-los como fundo de clulas no Editor de menu pop-up.

Vrios outros arquivos configurados pelo usurio tambm so armazenados na pasta Macromedia/

Fireworks MX.

Preferncias e atalhos de teclado 427

Sobre os arquivos de configurao principal que afetam todos os usurios Os arquivos de configurao principal, que afetam todos os usurios, ficam na pasta de aplicativo do Fireworks, isto , no local do disco rgido em que o usurio instalou o Fireworks. Para informaes sobre como localizar essa pasta, consultar Localizao dos arquivos de configurao na pgina 428.
Nota: Diversos arquivos de configurao ficam armazenados nas subpastas dentro da pasta de aplicativo do Fireworks. O local exato desses arquivos depende de cada sistema operacional. E ainda, os usurios do Macintosh devem estar familiarizados com o novo conceito de pacote da Apple. Para mais informaes, consultar Exibio do contedo do pacote (somente Macintosh) na pgina 431.

Os arquivos de configurao principal que esto na pasta de aplicativo do Fireworks so:


A pasta Keyboard Shortcuts contm os conjuntos de atalho padro. As alteraes feitas nos atalhos de teclado dentro do Fireworks no sero salvas nessa pasta, mas sim na pasta de configurao do usurio.

A pasta Keyboard Shortcuts fica dentro da subpasta English nos sistemas Windows. Nos sistemas Macintosh, essa pasta fica na Contents/Resources/English.lproj, dentro do pacote de aplicativos do Fireworks. Para mais informaes, consultar Localizao dos arquivos de configurao na pgina 428.
A pasta Plug-ins o local em que o usurio pode instalar os plug-ins e filtros adicionais. Os filtros ou

plug-ins de outros fornecedores sero instalados nessa pasta somente se ela for selecionada durante a instalao. No existe configurao de usurio equivalente para essa pasta. Portanto, qualquer plugin instalado nessa pasta fica disponvel para todos os usurios. O local exato da subpasta Plug-ins dentro da pasta de aplicativo do Fireworks varia de acordo com cada sistema operacional.
A pasta Quick Export Menu o local em que fica armazenado o contedo do menu pop-pop Exportao rpida. Se o usurio conhecer JavaScript e XML, poder personalizar esse menu. Para mais informaes, consultar Como personalizar o menu pop-up Exportao rpida na pgina 362.

A pasta Quick Export Menu fica dentro da subpasta English nos sistemas Windows. Nos sistemas Macintosh, essa pasta fica na Contents/Resources/English.lproj, dentro do pacote de aplicativos do Fireworks. Para mais informaes, consultar Localizao dos arquivos de configurao na pgina 428.
A pasta Configuration contm

diversas subpastas, inclusive Batch Code, Commands, Command Panels, Libraries, Patterns, Spelling e Textures. Qualquer alterao feita dentro dessa pasta ser aplicada para todos os usurios. contm vrios outros arquivos de configurao.

A pasta de aplicativo do Fireworks tambm

Localizao dos arquivos de configurao O local exato dos arquivos de configurao varia de acordo com cada sistema operacional e se o sistema usado multiusurio ou usurio nico.
Nota: Os sistemas Windows normalmente ocultam alguns arquivos e pastas por padro. Verificar se as opes de Modo de exibio de pasta esto configuradas para exibir todos os arquivos e pastas. Em alguns sistemas, talvez seja necessrio clicar em Mostrar arquivos quando o usurio localizar a pasta, para ver o contedo. Consultar a Ajuda do Windows para mais informaes sobre como exibir todos os arquivos e pastas.

Para localizar sua pasta de configurao do usurio:

No disco rgido, navegar at o caminho abaixo correspondente ao seu sistema operacional, onde User ID o nome do usurio ou a identificao usada para efetuar logon no seu sistema operacional:
Mac OS X: HD/Users/User

ID/Library/Application Support/Macromedia/Fireworks MX

Mac OS 9.1 ou posterior, sistema de um nico usurio:

HD/System Folder/Application Support/Macromedia/Fireworks MX

428 Captulo 18

Mac OS Mac 9.1 ou posterior, sistema multiusurio, usurio normal:

HD/Users/User ID/Preferences/Macromedia/Fireworks MX
Mac OS Mac 9.1 ou posterior, sistema multiusurio, administrador (proprietrio):

HD/System Folder/Application Support/Macromedia/Fireworks MX


Windows 98 e Windows ME, sistema de um nico usurio:

C:\Windows\Application Data\Macromedia\Fireworks MX
Windows 98 e Windows ME, sistema multiusurio:

C:\Windows\Profiles\User ID\Application \Application Data\Macromedia\Fireworks MX


Windows NT 4: C:\WINNT\Profiles\User Windows 2000 e Windows XP:

ID\Application Data\Macromedia\Fireworks MX

C:\Documents and Settings\User ID\Application \Application Data\Macromedia\Fireworks MX Se o usurio no conseguir localizar a pasta de configurao do usurio usando um dos caminhos acima, talvez o sistema tenha uma configurao personalizada. Para informaes sobre como localizar manualmente sua pasta de configurao do usurio, consultar Localizao da pasta de configurao do usurio nos sistemas personalizados na pgina 429.
Nota: Os nomes de algumas pastas de sistema podem variar nos sistemas traduzidos.

Para localizar os arquivos de configurao que afetam todos os usurios:

Navegar at o local do disco rgido em que o Fireworks foi instalado. O local padro nos sistemas Windows Program Files/Macromedia/Fireworks MX. Nos sistemas Macintosh, o local padro Applications/Macromedia/Fireworks MX.
Nota: Os nomes de algumas pastas de sistema podem variar nos sistemas traduzidos.

Localizao da pasta de configurao do usurio nos sistemas personalizados Se o usurio no conseguiu localizar sua pasta de configurao do usurio do Fireworks usando o procedimento descrito em Localizao dos arquivos de configurao na pgina 428, pode ser que a configurao do sistema tenha sido personalizada. Ser necessrio pesquisar manualmente a pasta de configurao do usurio no disco rgido. Se tiver dificuldade em localizar sua pasta de configurao do usurio, entrar em contato com o administrador do sistema para ajud-lo.
Nota: Os nomes de algumas pastas de sistema podem variar nos sistemas traduzidos.

Para localizar sua pasta de configurao do usurio nos sistemas Mac OS X, Windows XP, Windows NT, Windows 2000, Windows 98 multiusurio e Windows ME multiusurio: 1

Pesquisar no disco rgido usando o nome do usurio ou a identificao usada para efetuar logon no sistema. Talvez apaream mais de um arquivo ou uma pasta nos resultados da pesquisa. Abrir a pasta com o seu nome ou a sua identificao de usurio. Abrir a pasta Application Data/Macromedia/Fireworks MX (Windows) ou Application Support/Macromedia/Fireworks MX (Macintosh).

2 3

Preferncias e atalhos de teclado 429

Para localizar sua pasta de configurao do usurio nos sistemas Mac OS 9.x de um nico usurio, Windows 98 de um nico usurio e Windows ME de um nico usurio: 1 2

Procurar a pasta Application Data (Windows) ou Application Support (Macintosh) no disco rgido. Abrir a pasta Macromedia/Fireworks MX.

Para localizar sua pasta de configurao do usurio em um sistema Mac OS 9.x multiusurio: 1

Pesquisar no disco rgido usando o nome do usurio ou a identificao usada para efetuar logon no sistema. Talvez apaream mais de um arquivo ou uma pasta nos resultados da pesquisa. Abrir a pasta com o seu nome ou a sua identificao de usurio. Abrir a pasta Preferences/Macromedia/Fireworks MX.

2 3

Localizao dos arquivos de preferncias do Fireworks As preferncias do Fireworks ficam armazenadas no arquivo chamado Fireworks MX Preferences.txt (Windows) ou Fireworks MX Preferences (Macintosh). O local desse arquivo varia de acordo com cada sistema operacional.

No Windows, as preferncias esto na pasta Application Data/Macromedia/Fireworks MX. No Mac OS X, as preferncias esto na pasta Library/Preferences dentro da sua pasta de usurio. Nos sistemas Mac OS 9.x de um nico usurio, as preferncias esto na pasta System/
Preferences.

Nos sistemas Mac OS 9.x multiusurio, as preferncias esto na pasta Preferences dentro da sua
pasta de usurio. Mas se o usurio tiver acesso em nvel de administrador (nvel de proprietrio), o local das suas preferncias ser o mesmo como se fosse no sistema de um nico usurio. Para mais informaes sobre como localizar sua pasta de usurio ou a pasta Application Data, consultar Localizao dos arquivos de configurao na pgina 428. Personalizao dos arquivos de configurao para todos os usurios Independentemente de estar em um sistema multiusurio ou nico usurio, o Fireworks alterar os arquivos de configurao do usurio na pasta de aplicativo do Fireworks quando o usurio salvar a maioria das configuraes. Isso ocorre por que muitos usurios no tm acesso a todos os arquivos quando esto em sistemas multiusurio. Os usurios com acesso em nvel de administrador podem personalizar recursos para todos os usurios, modificando os arquivos de configurao principal na pasta de aplicativo do Fireworks.
Para salvar a definio de configurao principal para todos os usurios:

Salvar ou arrastar uma cpia do arquivo para o local adequado dentro da pasta de aplicativo do Fireworks. Para informaes sobre como localizar a pasta de aplicativo do Fireworks, consultar Localizao dos arquivos de configurao na pgina 428.

430 Captulo 18

Sobre como reinstalar o Fireworks Quando o usurio desinstala ou reinstala o Fireworks, seus arquivos de configurao do usurio no so alterados na maioria dos sistemas. Para reinstalar o Fireworks usando as configuraes padro, o usurio dever excluir manualmente os arquivos de configurao do usurio antes de reinstalar o aplicativo. Para informaes sobre como localizar esses arquivos, consultar Localizao dos arquivos de configurao na pgina 428. Entretanto, durante o processo de desinstalao nos sistemas Windows XP, Windows 2000 e Windows NT 4, ser exibido um aviso perguntando se o usurio deseja remover os arquivos de configurao e de preferncias. Se optar pela remoo, esses arquivos sero removidos para todos os usurios do sistema. Exibio do contedo do pacote (somente Macintosh) No Macintosh, o Fireworks instalado em um formato chamado pacote de programa aplicativo. Esse um novo recurso da Apple que permite a instalao dos aplicativos em um pacote de contedo prprio. Nesse pacote de aplicativos fica armazenado o arquivo do aplicativo Fireworks, juntamente com todos os arquivos de configurao padro que acompanham o Fireworks. O contedo do pacote fica oculto por padro. Com o pacote aberto, o usurio observar que existem vrios arquivos e pastas. Dois desses arquivos so especficos do seu sistema operacional. Os arquivos da pasta MacOS aplicam-se somente aos usurios do Mac OS X, e os da pasta MacOSClassic, somente aos usurios do Classic Mac. Para mais informaes, consultar Execuo do Fireworks MX Classic (somente Macintosh) na pgina 431.
Para mostrar ou ocultar o contedo do pacote do programa aplicativo Fireworks: 1 2

Navegar at o local do disco rgido em que o Fireworks foi instalado. Clicar com a tecla Control no cone Fireworks MX e selecionar Mostrar contedo do pacote no menu de contexto. Uma nova janela aberta exibindo o contedo do pacote. Para uma explicao do contedo, consultar Sobre os arquivos de configurao principal que afetam todos os usurios na pgina 428.

Execuo do Fireworks MX Classic (somente Macintosh) Para o Mac OS X, o Fireworks tem uma nova interface Aqua. Nos sistemas Macintosh, o Fireworks instala tanto a verso Aqua do aplicativo como a verso tradicional Classic. O Fireworks inicia automaticamente a verso do aplicativo para o seu sistema operacional. No entanto, se os usurios do OS X desejarem, podero executar o aplicativo Classic.
Dica: Os usurios do Mac OS X talvez queiram executar a verso Classic do Fireworks se, por exemplo, tiverem plug-ins antigos no suportados pelo Mac OS X. Eles podero executar a verso Classic do Fireworks para usar esses plug-ins. Para mais informaes sobre o pacote do Fireworks, consultar Exibio do contedo do pacote (somente Macintosh) na pgina 431.

Para executar a verso Classic do Fireworks no sistema Mac OS X: 1

No disco rgido, selecionar o pacote do Fireworks. Ele est dentro da pasta de aplicativo do Fireworks, isto , o local de instalao do Fireworks.

Preferncias e atalhos de teclado 431

2 3 4 5

Selecionar Arquivo > Obter Informaes. Selecionar Abrir no ambiente clssico. Fechar a janela Obter Informaes. Iniciar normalmente o Fireworks MX. Depois de alterar essa configurao, o Fireworks ser iniciado no ambiente Classic sempre que for aberto. Para retornar verso Aqua do Fireworks, ser necessrio cancelar a seleo da opo Abrir no ambiente clssico na janela Obter Informaes antes de iniciar o Fireworks.

432 Captulo 18

NDICE

abrir arquivos mltiplos como animaes 323 arquivos recentes 76 documentos 76 GIFs animados 77, 322 grficos criados em outros aplicativos 77 mltiplas exibies de documento 93 adicionar estilos 250 molduras 316 Adobe GoLive 361 Adobe Type Manager 8 agrupar objetos 122 aguar 144 reas de bitmap 130 imagens 131 Ajuda do Fireworks 9 Ajuda do Macromedia 9 ajustar faixa tonal com conta-gotas 138 matiz ou saturao 140 alas de ponto 154 exibir 157 alas, transformar 118 alfa, converter imagens em 144 alinhar objetos 123 ambiente de trabalho 18, 83 animao 309 abrir 322 adicionar molduras 316 ativar e desativar molduras 315 ciclo 321 compartilhar camadas atravs de molduras 317 configurar retardo de moldura 314 criar a partir de arquivos mltiplos 323 desativar compartilhamento de camadas 317 dimensionar 312

editar 374 editar mltiplas molduras 319 excluir molduras 316 executar 320 exibio personalizada de molduras 319 exibir molduras atual e adjacente 319 exibir mltiplas molduras 318 exibir todas as molduras 319 exportar 322 gerenciar molduras 314 inserir molduras 316 molduras 311 mover objetos para outra moldura 317 movimento 311 nomear molduras 315 onion skinning 318 opacidade 312 otimizar 321 propriedades 311 remover 312 reordenar molduras 316 rotao 312 transparncia 321 visualizar 320 visualizar prxima moldura 319 apagar bitmaps 129 aparar a tela 97 aplicar sombras 38, 216 aprender o Fireworks grupo de notcias 9 rea de desenho. Ver tela reas transparentes 341 arquivos de configurao 427 em sistemas multiusurio 428 localizar 428 personalizar 430 principal 428 arquivos de configurao de usurio 427

433

arquivos EPS abrir no Fireworks 77 arquivos externos, converter em rollovers 276 arquivos JPEG comando Aguar bordas JPEG 345 compresso seletiva de JPEG 344 configuraes de otimizao 343 editar reas selecionadas 345 progressivos 345 selecionar formato JPEG 334 arquivos temporrios 423 arquivos vlidos, definidos 408 arquivos WBMP exportar para 334 arrastar-e-soltar 79 Assistente de exportao 326 assistentes Exportao 326 Otimizar para o tamanho 328 atalhos de teclado alterar conjunto atual 424 atalhos secundrios 425 conjuntos de atalhos personalizados 425 excluir conjuntos de atalhos personalizados 426 folha de referncia para o conjunto atual 426 atualizar fatias 350 aurolas, remover 346 automatizar tarefas 401
B

backup durante Localizar e substituir 404 barra de cores 190, 193 alternar entre modelos de cor 195 escolher uma cor com 194 barra de status (Windows) 94 barras de ferramentas desbloquear 90 encaixar 90 mostrar e ocultar 90 barras de navegao comportamento Restaurar 274 criar 51, 297 estado Abaixo 274 estado Sobre 274 biblioteca de smbolos 253 biblioteca de URLs 258 adicionar URLs 258 adicionar URLs usados 259 criar 258 inserir URLs absolutos ou relativos 260 bitmaps

ajustar brilho e contraste 139 ajustar cor e tom 133 ajustar matiz e saturao 140 apagar 129 embaar e aguar 142 retocar 130 blocos de texto dimensionamento automtico 171 largura fixa 171 mover 170 redimensionar 171 bloquear camadas 225 bordas chanfradas 215 exibir e ocultar 105 bordas chanfradas 215 boto Exportao rpida 90 boto Qualidade seletiva 344 botes rea ativa 295 atribuir URLs a 55 barras de navegao 297 configurar um destino 296 criar 51, 287 definio 288 Editor de boto 287 Efeitos ao vivo 291 estados 53 exportar 287 ocorrncias 54 texto de ocorrncia 55 viso geral 287 brilho 139
C

caixa Cor de preenchimento 127 caixa cor do trao 199 caixa de dilogo Editar dgrad 207 caixa de dilogo Editar trao 200 caixa de dilogo Exportar 348 caixa de dilogo Processo em lote 407 caixa de dilogo Propriedades do smbolo 253 Camada da Web 226 camadas 26 adicionar e remover 222 ativar 222 bloquear 225 compartilhar 226 compartilhar atravs de molduras para animao 317 desativar compartilhamento entre molduras 317 duplicar 223

434 ndice

exibir 223 exportar 351 mover 224 nomear 224 camadas CSS, exportar 358 canal alfa de um objeto, selecionar 112 cancelar a seleo de todos os objetos 105 Centro de suporte Fireworks na Internet 9 crculos, desenhar 148 clarear reas de bitmap 130 imagens 132 clonar reas de bitmap 130 imagens 130 objetos 117 codificao UTF-8 359 colar HTML 356 colocar em escala grficos 410 colorir imagens 140 comando Atualizar HTML 357, 368 comando Avanar 123 comando Borda 114 comando Cancelar seleo 110 comando Colar em 232 comando Contrair 114 comando Cortar 166 comando Dividir 164 comando Enevoar 129 comando Enviar para trs 123 comando Expandir 113 comando Expandir trao 167 comando Interiorizar traado 167 comando Interpolar ocorrncias 319 comando Interseo 165 comando Nivelar seleo 126 comando Ocultar painis 88 comando Ocultar seleo 234 comando Ocultar tudo 234 comando Otimizar imagem no Fireworks 372 comando Perfurao 165 comando Recuar 123 comando Revelar seleo 234 comando Revelar tudo 234 comando Simplificar 166 comando Suavizar 114 comando Transformao numrica 120 comando Trazer para frente 123 comando Unio 164 comando Verificar a ortografia 185

comandos criar 416 editar 419 excluir personalizados 419 processo em lote 412 renomear ou excluir comandos do Fireworks 419 renomear personalizados 418 salvar 102 combinar. Consultar mesclar Como aprender o Fireworks recursos 8 compartilhar camadas 226 comportamento Definir imagem da barra de navegao 274 comportamento Definir o menu pop-up 274 comportamento Definir texto da barra de status 274 comportamento Rollover simples 274 comportamento Trocar imagem 274 comportamentos Abaixo na barra de navegao 274 Definir imagem da barra de navegao 274 Definir o menu pop-up 274 Definir texto da barra de status 274 Macromedia Dreamweaver 4 269 painel Comportamentos 274 Restaurar barra de navegao 274 Rollover simples 274 Sobre na barra de navegao 274 Trocar imagem 274 comportamentos de arrastar e soltar criar rollovers desmembrados com 271 definio 270 excluir 272, 273 linha azul 270 para uma fatia nica 270 composio 245 compresso ajustar 340 e otimizao 329 embaar bordas 345 selecionar um tipo de arquivo 333 seletiva 344 compresso JPEG seletiva cor de sobreposio 344 preservar qualidade do boto 344 preservar qualidade do texto 344 compresso seletiva de JPEG 344 Ativar qualidade seletiva 344 configurao padro do retardo de moldura 77 configuraes de otimizao alterar em um processo em lote 409

ndice 435

comparar duas ou quatro configuraes 332 compartilhar com outro usurio 347 excluir configuraes predefinidas 347 JPEG 343 predefinir 278, 330 reutilizar 331, 347 salvar 331, 347 configurar Fireworks 421 conjuntos de atalho. Consultar atalhos de teclado conjuntos de atalho personalizados. Consultar atalhos de teclado contedo do pacote, exibir 431 contornos 198 Ver tambm traos contraste 139 copiar atributos de objeto 252 bitmaps 116 HTML 355 molduras 316 objetos 116 pixels 106 todos os objetos selecionados em uma camada 224 copiar e colar HTML do Fireworks 355, 356 objetos de outros aplicativos 79 ocorrncias de smbolo 256 cor 139 ajustar 133 alterar 127 alterar trao 199 amostragem 128, 198 aplicar a partir do painel Exemplos de cores 190 configurar preferncias 421 criar com selecionador de cores do sistema 195 criar no Misturador de cores 195 escolher com a ferramenta Conta-gotas 198 escolher grupo de exemplos 191 excluir do painel Exemplos de cores 193 exibir valores da cor 195 inverter valores 141 janela pop-up 197 localizar e substituir 405 modelos de cor 194 pontilhamento com Websafe 196 preenchimentos dgrad 207 remover no usadas 337 restaurar padro 190 salvar exemplos personalizados 193 selecionar intensidade de cor 336

selecionar na barra de cores 194 substituir um exemplo 193 cor de 24 bits 336 cor de 32 bits 336 cores, localizar e substituir no-Websafe 406 cores do sistema Windows como um grupo de exemplos 191 cores Websafe 339 correo de cor brilho e contraste 139 com conta-gotas 138 Curvas 136 Nveis 134 cortar documentos 98 tela 97
D

desagrupar objetos 122 desenhar alterar segmentos adjacentes 157 converter traados retos em curvos 156 distorcer objetos 120 dividir traados 164 dobrar segmentos adjacentes 157 selecionar um ponto 157 desfazer 101 com o painel Histrico 417 definir nmero de etapas de desfazer 421 Design Notes para integrao entre Macromedia Dreamweaver e Fireworks 376 desinstalar o Fireworks 431 deslocamento da linha de base 179 dicas de ferramentas 9 dimensionar objetos 119 discos temporrios 423 distorcer objetos 120 dividir um documento 46 documentos abrir 76 criar novos 75 exibies lado a lado 93 modo padro 147 mltiplas exibies 93 recentes 76 salvar 82 DPI. Ver resoluo duplicar objetos selecionados 117 por arrastar 117

436 ndice

editar aes no painel Histrico 419 camada nica 225 comportamentos 275 Efeitos ao vivo 218 estilos 251 menus pop-up 307 objetos bitmap 127 objetos selecionados 116 pixels 106 preenchimentos slidos 205 smbolos de animao 311 smbolos de boto 56 traados 159 Editor de boto 289 criar smbolos no 253 editar smbolos no 254 Efeito ao vivo Cor de preenchimento 247 efeitos aplicar a objetos 214 brilho 216 definir padres 220 editar 218 Efeitos ao vivo 213 localizar e substituir 405 plug-ins 218 remover 219 Efeitos ao vivo 25 aplicar 220 ativar ou desativar 215 Cor de preenchimento 247 criar 219 editar 218 em botes 291 plug-ins do Photoshop 217 remover 219 renomear 220 efeitos de brilho 216 elipses desenhar 148 embaar 142 reas de bitmap 130 imagens 131 empilhar objetos 123 encaixar painis 87 enevoamento criar bordas enevoadas 209 enevoar 129 selees de pixel 113

entrelaar grficos 342 entrelinhamento 175 escalonar opes de interpolao 421 escurecer reas de bitmap 130 imagens 132 espaadores 280 espaamento de caracteres. Ver kerning espaamento de letras. Ver kerning espaamento de linhas. Ver entrelinhamento espaamento de pargrafo 178 espao de trabalho 18 espelhar. Consultar inverter objetos estado de boto Acima 288 estado do boto Abaixo 288 estado do boto Sobre 288 estado do boto Sobre durante o estado Abaixo 288 estados do boto Abaixo 288, 290 Acima 288, 289 Sobre 288, 290 Sobre durante o estado Abaixo 288, 290 estilos adicionar 250 aplicar 250 aumentar cones de visualizao 252 basear em estilos existentes 251 definidos 249 editar 251 excluir 251 exportar 251 importar 252 novos 250 redefinir para padres 252 estilos de texto efeitos 180 itlico 172 negrito 172 preenchimentos 180 sublinhado 172 traos 180 estrelas desenhar com a ferramenta Polgono 150 limitar 150 eventos de mouse 275 excluir camadas 223 Efeitos ao vivo 219 estilos 251

ndice 437

exemplos 193 molduras 316 objetos selecionados 117 pontos 158 pontos em curvas 138 excluir mscaras 244 executar animaes 320 comandos salvos 417 macros 417 exemplos, escolher personalizados 191 exibir bordas 105 exibir arquivos do Fireworks em um navegador 71 expandir traos 166, 167 Exportao rpida 361 menu pop-up 362 exportar 40 animaes 320, 350 arquivos do Fireworks para o Dreamweaver 390, 393 botes 287 camadas como arquivos mltiplos 351 camadas CSS 358 configuraes de processo em lote 409 estilos 251 fatias 276, 349 GIFs animados 322 grficos 75 HTML 67, 352 imagens 348 molduras como arquivos mltiplos 351 para arquivos WBMP 334 para Illustrator 384 para Macromedia Director 386 para Macromedia Dreamweaver 368 para Macromedia Flash 377, 379 para Macromedia FreeHand 384 para Photoshop 398 personalizar arquivos para Photoshop 399 pontos ativos 284 resultados 353 smbolos 257 uma rea 351 UTF-8 359 XHTML 358 Extending Fireworks 9 Extensions Manager 415
F

faces de tipos. Ver fontes faixa tonal 134

ajustar com Curvas 136 ajustar com Nveis 134 fatiamento definio 261 fatiar 46 para interatividade 262 fatias 74 alterar cor 266 atualizar 350 criar 262 editar fatias de tabelas do Fireworks a partir do Macromedia Dreamweaver 371 exportar 348, 349 mostrar ou ocultar sobreposio de fatia 333 nomear automaticamente 278 polgono 264 redimensionar 268 sobrepor 268 texto 263 usar espaador 280 usar ninhos de tabelas 280 ferramenta Aguar 130 ferramenta rea de exportao 351 ferramenta Borracha 129 ferramenta Caneta 152 adicionar pontos com 158 continuar o traado 158 excluir pontos com 158 segmentos curvos 153 segmentos retos 152 ferramenta Carimbo 130 ferramenta Clarear 130 ferramenta Conta-gotas 128, 192 ferramenta Dimensionar 119 ferramenta Distorcer 120 ferramenta Elipse 148 ferramenta Embaar 130 ferramenta Escurecer 130 ferramenta Faca 163 ferramenta Inclinar 120 ferramenta Lpis 127 ferramenta Linha 148 ferramenta Mancha 130 ferramenta Pincel 127, 151 ferramenta Polgono 149 desenhar estrelas com 150 ferramenta Ponteiro 103, 106 ferramenta Redesenhar traado 163 ferramenta Retngulo 148 ferramenta Retngulo arredondado 149

438 ndice

ferramenta Selecionar secundrio unir automaticamente traados com 159 ferramenta Subseleo selecionar mscaras com 238 ferramenta Texto 169 ferramenta Zoom 91 ferramentas Aguar 130 alterar cor do trao 199 alterar opes 84 Borracha 129 Carimbo 130 Clarear 130 Conta-gotas 128 Dimensionar 119 Distorcer 120 Embaar 130 Escurecer 130 Inclinar 120 Lao 106 Lao polgono 106 Lpis 127 Mancha 130 menus pop-up do grupo de ferramentas 85 Moldura da caixa de seleo 106 Moldura oval da caixa de seleo 106 pincel 127 Ponteiro 103, 106 seo Cores no painel Ferramentas 189 Selecionar secundrio 159 Subseleo 238 Texto 169 Transformar 118 Varinha mgica 106 Zoom 91 ferramentas Corretor de traado 163 ferramentas de transformao Dimensionar 119 Distorcer 120 Inclinar 120 filtro Aguamento maior 144 filtro Aguar 144 filtro Brilho/Contraste 139 filtro Desfocar mscara 145 filtro Desfoque Gaussiano 143 filtro Embaamento maior 142 filtro Embaar 142 filtro Inverter 141 filtro Localizar bordas 143 Filtro Matiz/Saturao 140

filtros 25 Aguamento maior 144 Aguar 144 Brilho/Contraste 139 Desfocar mscara 145 Desfoque Gaussiano 143 Embaamento maior 142 Embaar 142 Inverter 141 Localizar bordas 143 Matiz/Saturao 140 plug-ins do Photoshop 217 Fireworks MX Classic 431 fluxo de trabalho no Fireworks 74 fontes estilos 172 localizar e substituir 405 tamanhos do tipo 172 tratar ausentes 184 formas. Ver grficos vetoriais formato de arquivo ACT, exemplos 191 formato de arquivo BMP 334 formato de arquivo GIF exemplos 191 selecionar 333 selecionar uma paleta de cores 335 formato de arquivo PICT 334 formato de arquivo PNG selecionar 334 selecionar uma paleta de cores 335 transparncia 381 formato de arquivo TIFF, selecionar 334 formatos de arquivo BMP 334 GIF 333 JPEG 334 PNG 334 TIFF 334 FrontPage 361 colocar HTML do Fireworks no 393 colocar imagens do Fireworks no 392 criar imagens do Fireworks no 392 editar arquivos do Fireworks no 394
G

girar 92 objetos 119 GoLive 361, 399 grade alinhar objetos 101 alterar cor padro 101

ndice 439

alterar tamanho da clula 101 mostrar/ocultar 101 grficos de bitmap 73 Ver tambm bitmaps grficos de telefone celular. Ver arquivos WBMP grficos de telefone mvel. Ver arquivos WBMP grficos orientados a objeto. Ver grficos vetoriais grficos vetoriais 73 grupo de discusso, Fireworks 9 grupo de exemplos, escolher personalizados 191 grupo de notcias, Fireworks 9 guia Visualizao 331 guias alinhar objetos s 101 bloquear 101 guias de fatia alterar cor 266 exibir 266 remover 268
H

histograma 135 HomeSite colocar HTML do Fireworks no 390 colocar imagens do Fireworks no 389 HTML 353 abrir tabelas 78 atualizar HTML do Fireworks colocado no Macromedia Dreamweaver 368 configurao 359 copiar e colar do Fireworks para o Dreamweaver 355, 356 exportar 67, 352, 354 inserir do Fireworks no Dreamweaver 366 preferncias para exportao 67 Roundtrip 370 substituir verso mais antiga 357 trabalhar com editores 400
I

Illustrator, exportar para 384 iluso de perspectiva 120 iluso de transparncia 196 imagens exportar 348 pintar 127 selecionar 106 selecionar pixels 106 imagens coladas 80 imagens como preenchimentos. Ver comando Colar em imagens de cones. Ver miniaturas

imagens de varredura 125 importar arquivos do Photoshop 396 arquivos PNG 81 de cmera digital 81 estilos 252 grficos 45 imagens 22 preferncias de importao do Photoshop 424 smbolos 256 importar texto 184 arquivos do Photoshop 184, 396 arquivos RTF 184 texto ASCII 184 importar Xtra para Director 386 inclinar objetos 120 iniciar o Fireworks a partir do Dreamweaver. Consultar integrao entre Macromedia Dreamweaver e Fireworks inserir HTML do Fireworks no Dreamweaver 366 imagens do Fireworks no Dreamweaver 364 Inspetor de propriedades 85, 105 criar mscaras com 241 desencaixar 85 encaixar 86 expandir 86 informaes de seleo 104 recolher 86 reduzir 86 trabalhar com texto no 169 instalao do Fireworks 8 instalar plug-ins do Photoshop 217 integrao entre Macromedia Dreamweaver e Fireworks atualizar HTML do Fireworks 368 comando Otimizar imagem no Fireworks 372 Design Notes 376 editar animaes do Fireworks 374 iniciar e editar imagens do Fireworks 370 iniciar e editar tabelas do Fireworks 371 iniciar e otimizar imagens do Fireworks 372 preferncia de editor externo 375 preferncias Iniciar e editar 376 redimensionar imagens do Fireworks 373 interatividade 74 interface "carbonizada" 431 interpolao caractersticas 319 definio 319 objetos 319

440 ndice

interpolao (escalonar) 421 inverter objetos 120


J

JavaScript 7 JPEGs progressivos 345


K

kerning 174
L

limitar rotao 119 limites 198 linhas desenhar 148 linhas. Ver traos localizar e substituir 402 arquivos processados em lote 411 cores 405 cores no-Websafe 406 fontes 405 selecionar origem da pesquisa 402 texto 404 URLs 406 usos 402 vrios arquivos 403
M

Macintosh 7 OS 9.1 428 OS X 428 requisitos do sistema para 8 Macromedia Director 7 colocar arquivos do Fireworks no 386 exportar para 386 membros do elenco 388 Macromedia Dreamweaver 7 arquivos 364 bibliotecas 368 comportamentos 371 comportamentos do Dreamweaver 4 269 editar imagens do Fireworks no 369 exportar para 368 marcadores de lugar 364 tornar o Fireworks o editor de imagem padro 375 Macromedia Flash 7 exportar para 377, 379 importar PNG do Fireworks para 377 Macromedia FreeHand 7 colocar grficos do Macromedia Fireworks no 382 exportar para 384

macros 418 manchar reas de bitmap 130 imagens 131 mapas de imagem criar 282 exportar 284 mscaras 30, 227 agrupar objetos para formar uma mscara 236 aplicar 30 ativar 244 bitmap 228 criar vazias 234 desativar 244 editar 30 excluir 244 modificar 240 mover com objetos com mscara 239 texto como uma mscara 233 usar um objeto existente como 231, 233 vetor 227 mscaras de bitmap 227, 228 criar 233 usar um objeto existente como 231, 233 mscaras vetoriais 227 converter em mscara de bitmap 243 criar 229 usar um objeto existente como 231, 233 matiz, ajustar 133, 140 meios-tons 135 menu Comandos 417 gerenciar comandos salvos 418 menu Opes em painis 89 menu pop-up Efeitos 213 menus contextuais 98 menus pop-up configurar posio 306 criar 57 criar a aparncia 302 descrio 298 digitar texto do menu 299, 300 editar 62, 307 exportar 308 personalizar 60 propriedades avanadas 304 mesclar bitmaps 26 traados 159, 164 mtodo de escala de interpolao bicbica 421 mtodo de escala de interpolao bilinear 421

ndice 441

mtodo de escala de interpolao suave 422 mtodo de escala de interpolao vizinho mais prximo 422 miniaturas no painel Camadas 222 selecionar mscaras com 238 Mini-iniciador 94 mistura aplicar 247 definir modo de mistura 247 Misturador de cores 86, 193, 194 criar cores com 195 exibir 194 misturar cores no 194 restaurar cores padro no 190 trocar cores de trao e de preenchimento no 190 misturar cores de objetos sobrepostos 245 objetos 319 modelo de cor CMY 194 modelo de cor Hexadecimal 194 modelo de cor HSB 194 modelo de cor RGB 194 modelo de cor Tons de cinza 194 modelos de cor CMY 194 Hexadecimal 194 HSB 194 RGB 194 Tons de cinza 194 modo bitmap 74 alternar para 125 aplicar com ferramentas 84 preferncia Exibir borda listrada 422 modo de tela padro 92 modo tela cheia com menus 92 modo vetorial 74 alternar para 125 desenhar em 147 modos entrar bitmap 74 entrar vetorial 74 vetorial 147 modos de exibio 92 modos de exibio, alternar 93 modos de mistura 245 apagar 246 clarear 245 cor 246 diferena 245 escurecer 245

inverter 246 luminosidade 246 matiz 245 multiplicar 245 saturao 245 tela 245 tingir 246 molduras 23, 106 adicionar 316 ativar e desativar 315 cancelar a seleo 110 compartilhar camadas para animao 317 configurar retardo 314 contrair 113 desativar compartilhamento de camadas 317 desativar onion skinning 319 editar mltiplas molduras 319 excluir 316 exibio personalizada 319 exibir atual e adjacente 319 exibir todas 319 expandir 113 exportar 351 gerenciar 314 inserir 316 mover 110 mover objetos para uma outra moldura 317 nomes na animao 315 onion skinning 318 remover 110 reordenar 316 salvar e recuperar 115 selecionar rea em torno 114 selecionar pixels por interseo 111 suavizar 114 transferir para outro objeto 115 visualizar prxima 319 mostrar barras de ferramentas 90 painis 88 rguas 99 mostrar e ocultar pontos ativos e fatias 265 mudar a forma de objetos vetoriais 162
N

navegador, exibir arquivos do Fireworks em 71 navegar em um documento 90 ninhos de tabelas 280 nomear fatias automaticamente 278 alterar conveno padro de nomeao 279 nomear objetos 28

442 ndice

nomes de arquivo, alterar em um processo em lote 411 nova amostragem aumentar a resoluo 96 descrito 96 objetos bitmap 96 objetos vetoriais 96 reduzir a resoluo 96 novo documento, corresponder tamanho na rea de transferncia 76 novos recursos 10
O

objetos 26 agrupar 122 converter em animao 311 criar bitmaps 126 desagrupar 122 distorcer 120 empilhar 123 inclinar 120 localizar colados 80 mesclar 225 mover selecionados 116 nomear 28 ordem de empilhamento 29 propriedades 21 remover efeito 219 selecionar 103 selecionar canal alfa 112 vetoriais 19 objetos vetoriais 19 criar 20 mudar a forma 160 ocorrncias definidas 252 interpolar 319 posicionar no documento 253 ocultar barras de ferramentas 90 bordas 105 camadas 225 objetos em camadas 225 painis 88 onion skinning definio 318 desativar 319 editar mltiplas molduras 319 exibio personalizada 319 exibir molduras atual e adjacente 319 exibir todas as molduras 319 visualizar prxima moldura 319

opacidade ajustar 247 Ver tambm transparncia opo Limitar propores 77 organizar molduras 316 OS X, Macintosh 428 otimizar 38, 64 animaes 321 conceitos bsicos 325 grficos 75 imagens do Fireworks no Dreamweaver 372 usar Visualizar exportao 327 ovais desenhar 148
P

pacote do programa aplicativo 431 painis 86 abrir layouts personalizados 89 Biblioteca 87, 253 Camadas 86 Comportamentos 86, 274 desencaixar 87 encaixar 87 Estilos 87, 250 Exemplos 86 Exemplos de cores 190 Ferramentas 84 Histrico 86, 101 Informaes 86 Localizar e substituir 87, 402, 404 menu Opes em 89 Molduras 86, 314 mover 87 ocultar 88 Optimizar 87 organizar 87 Registro de projeto 87 remover de um grupo 87 Respostas 87 restaurar posies padro 88 salvar layouts personalizados 89 URL 87, 258 painel Biblioteca 87, 253 inserir smbolos de boto 292 painel Camadas 86 exibir fatias 265 nomear fatias 278 painel Comportamentos 86, 274 painel Estilos 87, 250 painel Exemplos 86

ndice 443

painel Exemplos de cores 190 anexar exemplos 192 cores do sistema Windows 191 excluir uma cor 193 salvar personalizado 193 substituir uma cor 193 painel Ferramentas 84 painel Histrico 86, 101 alterar o nmero de etapas no 417 editar aes com 419 limpar todas as etapas do 417 reproduzir etapas 417 painel Informaes 86 painel Localizar e substituir 87, 402, 404 painel Molduras 86, 314 painel Otimizar 87 painel Respostas 9, 87 painel URL 87, 258 paletas de cores Adaptativa 335 anexar a exemplos atuais 192 bloquear cores 339 definir nmero de cores 336 editar 339 Exata 335 exibir 337 importar 335 otimizar 339 Personalizada 335 Preto e branco 335 salvar 340 Sistema (Macintosh) 335 Sistema (Windows) 335 Tons de cinza 335 Uniforme 335 Web 216 335 WebSnap adaptativa 335 pesquisar 402 Ver tambm localizar e substituir Photoshop aplicar plug-ins 218 camadas agrupadas 226 exportar para 398 importar arquivos para o Fireworks 395 instalar plug-ins 217 mscaras de camada 236 padres 423 personalizar arquivos para exportao 399 plug-ins 397, 423 plug-ins de instalao do Acquire 81

preferncias de importao 424 texturas 423 Photoshop e Fireworks exportar arquivos PSD do Fireworks 398 importar arquivos PSD para Fireworks 396 pincis definir ponta 202 opes de trao 201 salvar configuraes 204 pixels ajustar faixa tonal com conta-gotas 138 clonar 130 contrair borda de seleo 114 copiar 106 enevoar 129 expandir borda de seleo 113 faixa tonal 135 mover 106 pintar 127 recortar 106 selecionar 23, 106 selecionar rea de forma livre 107 selecionar rea em torno da moldura 114 selecionar rea poligonal 108 selecionar cores semelhantes 109 suavizar borda da moldura 114 planificar bitmaps 26 plotar pontos 152 plug-ins 25, 397 local dos arquivos 428 polgonos desenhar 149 limitar 150 ponteiro conta-gotas 194, 197, 198, 205 pontilhamento com cores Websafe 196 pontilhar 337 ponto central desenhar a partir de 148 e eixo de rotao 119 pontos adicionar 158 alterar segmentos adjacentes 157 converter 155 converter retos em curvos 156 dobrar segmentos adjacentes 157 excluir 158 mover 157 selecionar 157 pontos ativos 74

444 ndice

aplicar rollovers arrastar e soltar 285 atribuir URLs 277 criar 282 editar forma 283 irregulares 283 sobre as fatias 285 pontos de canto 152 pontos de curva 153 pontos. Ver pixels preenchimentos adicionar textura a 211 ajustar 209 alterar bordas 209 alterar cor para ferramentas de formas bsicas 205 aplicar dgrad 128, 207 aplicar padro 206 aplicar preenchimentos coloridos 139 aplicar slidos 205 desenhar sobre traos 204 editar dgrad 207 editar slidos 205 enevoamento ou suavizao de serrilhado 209 girar 209 iluso de transparncia 196 localizar e substituir 405 mover 209 preenchimento pontilhado Web 196 restaurar cor padro 190 salvar dgrad 210 salvar dgrad personalizado 210 transformar dgrad 209 transformar padro 209 trocar cores de trao e de preenchimento 190 preenchimentos com padro ajustar 209 aplicar 206 girar 209 mover 209 transformar 209 preenchimentos dgrad 128 adicionar nova cor 208 ajustar 209 ajustar transio de cores 208 alterar cores 208 aplicar 207 caixa de dilogo Editar dgrad 207 converter imagens em transparncia 144 editar 207 preenchimentos dgrad 207 girar 209

mover 209 remover cores de 208 salvar personalizados 210 transformar 209 preenchimentos slidos adicionar textura a 211 aplicar 205 preferncia Adicionar cones de visualizao 422 preferncia Cursores para pintar do tamanho do pincel 422 preferncia Cursores precisos 422 preferncia de editor externo 375 preferncia Desativar "Ocultar bordas" 422 preferncia Distncia de alinhamento 422 preferncia Distncia de seleo 422 preferncia Excluir objetos ao cortar 422 preferncia Exibir borda listrada 422 preferncia Mostrar cones de guias 422 preferncia Mostrar pontos slidos 422 preferncia Mostrar visualizao da caneta 422 preferncias 421 definir 421 Etapas de desfazer 421 Importar 396 Iniciar e editar 376 local dos arquivos 427, 430 opes de edio 422 opes de importao 423 opes de interpolao 421 opes de pasta 423 padro 424 padres de cores 421 para exportao de HTML 67 restaurar padres 424 preferncias Iniciar e editar 376 preferncias padro 424 processo em lote 407 backup de arquivos 412 colocar grficos em escala 410 comandos 412 configuraes de exportao 409 configuraes de otimizao 409 Localizar e substituir 411 nomes de arquivo 411 salvar arquivos 409 salvar como scripts 413 propriedades exibir no Inspetor de propriedades 85 objeto 21 texto 36 propriedades de bordas de clula 305

ndice 445

propriedades de boto interativo 295 propriedades em nvel de ocorrncia 294 propriedades em nvel de smbolo 293
Q

quadrados, desenhar 148


R

RAM. Ver Requisitos do sistema realces 135 recortar traados 163 recuar texto 177 recurso Nveis automticos para ajustar a faixa tonal 134 recurso Nveis para ajustar a faixa tonal 134 recursos para aprender o Fireworks 8 redesenhar traados 163 redimensionar imagens do Fireworks no Dreamweaver 373 reduzir a resoluo 96 reduzir pontos 166 refazer com o painel Histrico 417 Registro de projeto 87, 414 abrir arquivos 415 adicionar arquivos ao 415 exibir 415 exportar um arquivo 415 imprimir 415 pesquisar 415 registrar alteraes de Localizar e substituir 402 remover uma entrada 415 rguas 99 reinstalar o Fireworks 431 relevo 215 remover efeitos 219 partes de um traado 165 renomear smbolos 254 repetir aes 102 reproduzir animaes 320 requisitos do sistema para o Fireworks 7 resoluo 7 retngulos cantos arredondados 149 desenhar 148 retngulos de seleo. Consultar molduras retardo de moldura animaes 314 retrair traos 167 rolar a tela. Ver girar rollovers 74 rea ativa 295

barras de navegao 297 com forma irregular 264 comportamento Rollover simples 274 converter em botes 292 criar 48, 287 definio 269 imagem de troca 270 imagens externas para 276 simples 274 rollovers de troca de imagem 270 com fatia nica 270 criar rollovers desmembrados 272 rollovers desmembrados 272 anexar a pontos ativos 285 aplicar a uma fatia 273 criar 272 rollovers simples, criar 274 rotao limitar 119 recolocar eixo de rotao 119
S

salvar documentos 82 saturao, ajustar 133 scripts 418 arquivos do Flash SWF 418 editar scripts 419 scripts de comando, editar 419 scripts em lote 413 arrastar e soltar 414 executar 413 segmentos curvos, editar 154 segmentos retos, editar 154 segmentos, converter 155 seleo de pixel flutuante criar 115 selecionador de cores do sistema 195 selecionador de cores, sistema 195 selecionar rea alfa 112 rea de forma livre de pixels 107 rea em torno da moldura 114 rea poligonal de pixels 108 reas de pixel 107 cancelar a seleo da moldura 110 cancelar seleo de um objeto 105 cancelar uma seleo 117 contrair borda da moldura 114 cores semelhantes 109 enevoar bordas 129 enevoar uma seleo de pixel 113

446 ndice

expandir borda da moldura 113 fazer uma adio a uma seleo de pixel 111, 112 imagens 106 inverter uma seleo de pixel 113 objetos adicionais 105 objetos agrupados 122 pixels 23, 106 pontos 157 seleo de pixel flutuante 115 sobreposicionar reas de bitmaps 113 suavizar borda da moldura 114 subtrair de uma seleo de pixel 112 selees de pixel flutuante mover 115 smbolos criar 253 criar ocorrncias 253 definidos 252 duplicar 254 editar 254 editar grficos 313 excluir 254 exportar 257 importar 256 interpolar 319 modificar 253 posicionar ocorrncias no documento 253 quebrar um vnculo 255 smbolos de boto criar 52 editar 56, 293 inserir em um documento 292 simplificar traados 166 sobrepor fatias 268 sombras 38, 135, 216 suavizao de serrilhado bordas 209 cor de fundo de destino 345 remover aurolas 346 suavizar bordas de texto 178 substituir elementos 402
T

tabela de cores 337 atualizar 338 exemplo bloqueado na 338 exemplo com mltiplos atributos na 338 exemplo editado na 338

exemplo transparente na 338 exemplo Websafe na 338 selecionar cores na 338 tamanho de arquivo definir perda para reduzir tamanho 340 reduzir qualidade 343 tcnica onion skin Editor de boto 287 tela aparar 97 girar 97 modificar caractersticas 94 modificar resoluo 95 testar arquivos 70 texto alinhamento 177 atributos, salvar 180 cor 173 criar 32, 34 digitar 169 direo de 176 editar 171 Editor de texto 186 espaamento de pargrafo 178 expandir ou contrair largura de caractere 179 fatias 263 localizar e substituir 404 ocorrncias de boto 55 orientao 176 propriedades 36 recuar 177 verificar a ortografia 185 texto alt (alternativo) 277 atribuir a botes ou ocorrncias 297 texto itlico 172 texto negrito 172 texto sublinhado 172 textura adicionar a preenchimentos 211 adicionar a traos 210 tom, ajustar 133 traados 163 adicionar textura de trao 210 alterar a forma 157 alterar segmentos adjacentes 157 converter retos em curvos 156 copiar e colar 385 cortar 165

ndice 447

criar traos personalizados 200 dividir 164 dobrar segmentos adjacentes 157 editar traos 198 empurrar 161 puxar 161 restaurar cores padro 190 selecionar um ponto 157 trocar cores de trao e de preenchimento 190 traados compostos 164 traados de forma livre 151 traados de texto alterar a forma do traado 181 anexar texto ao traado 180 colocar o texto em um traado 182 converter texto em traado 183 editar o texto anexado a um traado 181 mover o ponto inicial do texto 182 separar a partir do traado 181 traos 198 adicionar textura 210 alterar a cor das ferramentas de desenho 199 alterar centralizao 203 bordas de 199 criar personalizados 200 definir sensibilidade 203 desenhar preenchimento sobre 204 editar 198 escolher 199 localizar e substituir 405 reorientar 203 restaurar cor padro 190 salvar configuraes 204 texturas 199 trocar cores de trao e de preenchimento 190 transformar numericamente 120 objetos 118 por arraste 118 preenchimentos com padro 209 preenchimentos dgrad 209 texto 183 transparncia adicionar ou remover cores 342 animao 321 converter imagens em transparncia dgrad 144 em arquivos PNG 381 selecionar uma cor 341, 342 Consultar tambm opacidade tringulos, desenhar 149 tutoriais 9

Tutorial de princpios bsicos do projeto da Web 43 Tutorial de princpios bsicos do projeto grfico 15
U

unir. Consultar mesclar URLs atribuir a botes 55 atribuir a botes ou ocorrncias 295 atribuir a um objeto da Web 259 localizar e substituir 406 selecionar opes de destino 277 URLs absolutos, inserir 260 URLs relativos, inserir 260
V

vrias ocorrncias de boto 54 verificao ortogrfica 185 visualizar com Visualizar exportao 327 configuraes de otimizao 331, 332 documentos em plataformas diferentes 93 documentos em um navegador 361 pixels contendo cor especfica 338 traos 200 Visualizar exportao 327 rea de enquadramento 328 comparar configuraes de otimizao 328 otimizar 327 visualizar 327 visualizar otimizao 327 zoom 328
W

Windows requisitos do sistema para 7 Windows 2000 429 Windows 98 429 Windows ME 429 Windows NT4 429 Windows XP 429
X

XHTML 358 Xtras. Consultar filtros


Z

zoom 90 em uma rea especfica 92 utilizar incrementos predefinidos 91

448 ndice

You might also like