DESIGNDIGITALALUNOS

Adobe CS4
Digital Design
Livro do Aluno
uma sociedade que incentiva o uso de tecnologias poderosas e versáteis levando a mudanças que atingem todas as
áreas da atividade humana. Os efeitos desta sociedade são mais evidentes em particular no mercado de trabalho e no
mundo educativo, os quais demandam competências tecnológicas em várias áreas do desenvolvimento pessoal e
Neste contexto, a Educational Technology Consulting Iberoamérica, consciente de sua responsabilida -

de como uma empresa inovadora e comprometida com a educação, está lhe preparando para o futuro do nosso país.
Tem contribuído na construção do conhecimento e das habilidades tecnológicas, que os estudantes devem desenvol-
em ferramenta web da Adobe CS4.
oferecendo um material que permitirá a você dominar as ferramentas poderosas da Adobe como o Flash, Drea-
mweaver e o Fireworks (todos na versão CS4) e assim, ter um material que permita que você tenha um extraordinário
potencial para criar e desenvolver vários projetos.
Usando este manual você irá desenvolver competências-chave em quatro áreas:
• Gestão de projetos e colaboração
• Design
• Pesquisa e Comunicação
• Ferramentas para criação de web profissional
Com Design Digital você aprenderá a usar e adquirirá experiências extraordinárias, se preparando para se tornar
design, construir e efetivamente comunicar-se utilizando diferentes formas de mídia digital, em ambiente avançado
para projetar e criar, da concepção e planejamento do projeto até a avaliação e entrega do mesmo conteúdo nas
principais ferramentas de mídias, como Flash CS4, Dreamweaver CS4 e Fireworks CS4 e auxiliares, como Fireworks,
projetos bem sucedidos.
Para saber mais sobre o programa de certificação ACA, visite os sites:

http://www.certiport.com/Portal/desktopdefault.aspx?page=common/pagelibrary/adobe_home.html
http://www.etciberoamerica.com/brasil/adobe/index.htm
Indice
Princípios e regras dos direitos autorais ..................................................................................... 13
Regras dos direitos autorais .................................................................................................... 13
Citações na internet .................................................................................................................... 15
Formato de citação ................................................................................................................. 15
World Wide Web ..................................................................................................................... 15
Imagem online......................................................................................................................... 15
Som online............................................................................................................................... 15
Online video clip ...................................................................................................................... 15
Modelo de documento do aluno ................................................................................................ 16
Escaneamento ............................................................................................................................. 18
Planejamento .......................................................................................................................... 18
Captura .................................................................................................................................... 18
Edição ...................................................................................................................................... 19
Salvamento.............................................................................................................................. 19
Como escanear imagens sem software de edição de imagens................................................... 20
Exercício - Painel Otimização do Fireworks................................................................................. 21
Painel Otimizar do Fireworks ...................................................................................................... 22
Opções para Otimização de GIF .............................................................................................. 22
Opções para otimização JPEG ................................................................................................. 23
Como otimizar imagens GIF ........................................................................................................ 24
Otimize uma imagem GIF ................................................................................................... 24
Como otimizar imagens JPEG ...................................................................................................... 25
Otimização de uma imagem JPEG.................................................................................... 25
Use uma máscara JPEG para mais otimizações (opcional) ..................................................... 26
Exercício - Ferramentas do Fireworks ......................................................................................... 27
Painéis do Fireworks ................................................................................................................... 28
Painéis flutuantes e encaixados .............................................................................................. 28
Painel de Ferramentas ............................................................................................................ 28
Inspetor de Propriedades ........................................................................................................ 29
Como construir uma barra de identificação ............................................................................... 30
Construa uma barra de identificação ...................................................................................... 30
Como criar efeitos ....................................................................................................................... 32
Efeitos presentes na área Filtros do inspetor de Propriedades. ............................................. 32
Ajustar Cor ........................................................................................................................... 32
Bisel ..................................................................................................................................... 32
Entalhe ................................................................................................................................ 33
Desfocar .............................................................................................................................. 33
Ruído ................................................................................................................................... 33
Outros.................................................................................................................................. 33
Sombra e Brilho ................................................................................................................... 33
Nitidez ................................................................................................................................. 34
Photoshop Live Effects ............................................................................................................ 34
Efeitos na área de Preenchimento .......................................................................................... 34
Efeitos na área de Traçado ...................................................................................................... 34
Exercício - Entrevista sobre Barra de Identificação ..................................................................... 36
Exercício - Revisão e reformulação da logomarca ............................................................. 37
Satisfação de metas iniciais..................................................................................................... 37
Requisição de novas metas ..................................................................................................... 38
Demonstração de bons princípios de design .......................................................................... 38
Mudanças de reformulação .................................................................................................... 39
Como criar um banner ................................................................................................................ 40
Criação de um banner ............................................................................................................. 40
Exercício - Revisão e reformulação do banner ............................................................................ 41
Reformulação do designer ...................................................................................................... 43
Tópicos de apresentação de revisão e reformulação ................................................................. 45
Como configurar uma pasta raiz local a estrutura do site .......................................................... 46
Configuração de uma pasta raiz local ..................................................................................... 46
Modificação das informações do site ..................................................................................... 48
Exercício - A interface Dreamweaver .......................................................................................... 49
A interface Dreamweaver ........................................................................................................... 53
A janela Documento e os painéis ............................................................................................ 54
A barra Inserir.......................................................................................................................... 55
A categoria Comum na barra Inserir ................................................................................... 55
Categoria Layout na Barra Inserir .................................................................................. 56
O inspetor de Propriedades .................................................................................................... 57
Trabalhando com texto e imagem .............................................................................................. 58
Acrescentar texto a um documento ....................................................................................... 58
Vinculação de texto a outras páginas, sites e endereços de e-mail ........................................... 59
Acréscimo de imagens ............................................................................................................ 60
Redimensionamento de imagens............................................................................................ 61
Exercício - A barra Inserir do Dreamweaver ............................................................................... 62
A barra Inserir do Adobe Dreamweaver ..................................................................................... 65
Exercício - Análise de sites .......................................................................................................... 66
Compreensão das Folhas de Estilo em Cascata (Cascading Style Sheets, CSS) ........................... 73
Criação de novo CSS ................................................................................................................ 74
Aplicação de estilos CSS .......................................................................................................... 76
Painel Estilos CSS ......................................................................................................................... 77
O painel Estilos CSS ..................................................................................................................... 79
Lista de arquivos Design Digital................................................................................................... 80
Portfólio do aluno ....................................................................................................................... 81
Portfólio de apresentação ....................................................................................................... 81
Portfólio de aprimoramento da técnica.................................................................................. 83
Portfólio de progresso de projeto ........................................................................................... 85
Como planejar um portfólio ........................................................................................................ 86
Convenções de nomenclatura..................................................................................................... 87
Exercício - Pastas de gerenciamento de arquivos ....................................................................... 89
Exercício - Gerenciamento de arquivos ...................................................................................... 90
Planejamento de uma página inicial ........................................................................................... 92
Objetos de imagem ................................................................................................................. 92
Textos ...................................................................................................................................... 92
Navegação ............................................................................................................................... 92
Cor ........................................................................................................................................... 92
Como diagramar uma página da web com CSS........................................................................... 93
Criação de uma nova página ............................................................................................... 94
Inserção de tag div .................................................................................................................. 95
Redimensionamento de divs ............................................................................................... 97
Mudando divs de lugar........................................................................................................ 97
Acréscimo de conteúdo aos divs ......................................................................................... 98
Visualização da página ............................................................................................................ 98
Criação de páginas coerentes de conteúdo ................................................................................ 99
Organização de conteúdo ....................................................................................................... 99
Navegação ............................................................................................................................... 99
Como configurar as propriedades do documento .................................................................... 100
Configure as propriedades do documento ....................................................................... 100
Altere a fonte padrão da página ....................................................................................... 100
Altere a cor de texto padrão da página............................................................................. 100
Altere a cor de fundo de uma página ................................................................................ 100
Como criar listas ........................................................................................................................ 101
Criação de listas numeradas ................................................................................................. 101
Criação de listas com marcadores......................................................................................... 102
Como adicionar texto de um outro documento ....................................................................... 103
Copie o texto do outro documento....................................................................................... 103
Importação de HTML do Word ............................................................................................. 103
Como criar tabelas de dados ..................................................................................................... 104
Inserção de uma tabela em uma página ............................................................................... 104
Seleção de elementos de tabela. .......................................................................................... 105
Adicionando linhas e colunas ................................................................................................ 106
Excluir linhas e colunas ......................................................................................................... 106
Redimensionando tabelas, linhas e colunas ......................................................................... 107
Modificação das propriedades da tabela .............................................................................. 108
Inserir uma tabela de planilha............................................................................................... 109
Como criar links ......................................................................................................................... 111
Criação de um link interno .................................................................................................... 111
Criando um link externo ........................................................................................................ 112
Criação de link para uma âncora com nome ......................................................................... 112
Criação de link para um endereço de e-mail ........................................................................ 113
Exercício – Usabilidade.............................................................................................................. 114
Exercício - Acessibilidade .......................................................................................................... 117
Como criar botões e barras de navegação ................................................................................ 119
Construção de um botão ....................................................................................................... 119
Copie os botões e crie a barra de navegação........................................................................ 123
Exportação de uma barra de navegação para utilizar no Dreamweaver .............................. 124
Inserir a barra de navegação em um documento Dreamweaver ......................................... 125
Como verificar links ................................................................................................................... 126
Como publicar arquivos na web ................................................................................................ 127
Conexão com um site remoto ............................................................................................... 127
Carregar e baixar arquivos .................................................................................................... 128
Carregando o site inteiro pela primeira vez ...................................................................... 128
Carregar uma versão revisada de um arquivo existente .................................................. 129
Baixar arquivos para trabalhar neles ................................................................................ 129
Gerenciando arquivos e links utilizando o painel Arquivos ...................................................... 130
Abrindo arquivos ................................................................................................................... 130
Renomeando arquivos .......................................................................................................... 131
Excluindo arquivos ................................................................................................................ 131
Trocando links para um arquivo................................................................................................ 132
Criação de uma nova pasta ................................................................................................... 132
Tags HTML ................................................................................................................................. 134
Principais tags de configuração para um documento HTML ................................................ 134
Principais tags de formatação do documento. ..................................................................... 134
Links....................................................................................................................................... 135
Tabelas de dados ................................................................................................................... 135
Listas ...................................................................................................................................... 135
Processo profissional de criação e desenvolvimento de sites .................................................. 136
Exercício - Entrevista do cliente ................................................................................................ 137
Exercício - Planejamento do projeto ......................................................................................... 143
Modelos de wireframes ............................................................................................................ 145
Storyboard de produção ........................................................................................................... 148
Exercício - Storyboard de produção .......................................................................................... 149
Como criar folhas de estilo em cascata (CSS)............................................................................ 150
Definição dos estilos CSS ....................................................................................................... 150
Exportação de regras CSS para uma folha de estilos externa ............................................... 157
Vinculação a uma folha de estilos externa............................................................................ 159
Criação de folha de estilos externa ....................................................................................... 161
Edição de estilos .................................................................................................................... 163
Como usar modelos .................................................................................................................. 164
Criação de um modelo .......................................................................................................... 164
Edição de um modelo................................................................................................................ 166
Como usar bibliotecas ............................................................................................................... 168
Criação de um item de biblioteca ......................................................................................... 168
Inserção de um novo item de biblioteca ............................................................................... 169
Edição de um item de biblioteca ........................................................................................... 169
Atualização de todos os documentos para usar itens de biblioteca atuais .......................... 170
Como adicionar animações e vídeos Flash em um site ............................................................. 171
Acréscimo de Animações Flash (Arquivos SWF) ................................................................... 171
Acrescentar vídeo Flash (arquivos FLV)................................................................................. 173
Como efetuar a devolução e retirada de arquivos.................................................................... 175
Retirada de arquivos ............................................................................................................. 175
Devolução de arquivos .......................................................................................................... 177
Desfazer retirada ................................................................................................................... 178
Como criar um calendário ......................................................................................................... 179
Como criar formulários ............................................................................................................. 180
Configuração de um formulário ............................................................................................ 181
Acréscimo de elementos de formulário ................................................................................ 181
Utilização de caixas de seleção e botões de opção............................................................... 184
Utilizando botões de formulário ........................................................................................... 189
Utilizando menus de salto para navegação .......................................................................... 191
Como criar mapas de imagem .................................................................................................. 192
Criação de um mapa de imagem........................................................................................... 192
Como criar imagens de sobreposição ....................................................................................... 194
Criação de uma imagem de sobreposição ............................................................................ 194
Como criar menus pop-up......................................................................................................... 196
Criação de itens de menus pop-up........................................................................................ 196
Editar um menu pop-up ........................................................................................................ 200
Exportar um menu pop-up para utilização no Adobe Dreamweaver CS4 ............................ 200
Importar um menu pop-up para o Dreamweaver ................................................................ 201
Como preparar fotografias ........................................................................................................ 202
Aplicação de máscaras a fotografias ..................................................................................... 202
Ajustar o tom de cor de fotos ............................................................................................... 206
Exercício - Como promover um site .......................................................................................... 207
Oficina de Crítica ....................................................................................................................... 208
Exercício - A área de trabalho do Flash ..................................................................................... 209
A Área de Trabalho do Flash ..................................................................................................... 211
Palco ...................................................................................................................................... 211
Linha do Tempo e camadas ................................................................................................... 212
Painéis ................................................................................................................................... 214
Painel de Ferramentas .......................................................................................................... 215
Inspetor de Propriedades ...................................................................................................... 218
Como criar uma face animada .................................................................................................. 219
Desenho de traços faciais...................................................................................................... 219
Desenhar o nariz ................................................................................................................... 221
Acrescente quadros para fazer um filme de três segundos .................................................. 222
Desenhar a boca .................................................................................................................... 222
Animar os traços faciais ........................................................................................................ 223
Use as interpolações de movimento para animar os olhos .............................................. 223
Utilize uma interpolação de forma para animar a boca ................................................... 224
Publique seu filme ................................................................................................................. 225
Símbolos, ocorrências e a biblioteca ......................................................................................... 227
Símbolos e ocorrências ......................................................................................................... 227
Bibliotecas ............................................................................................................................. 227
Tipos de símbolos .................................................................................................................. 228
Criação de símbolos .............................................................................................................. 228
Quadros e quadros-chave ......................................................................................................... 229
Representação de animações na Linha de Tempo................................................................ 230
Criação de Animações no Adobe Flash CS4 .............................................................................. 232
Visão geral da interpolação ................................................................................................... 232
Tipos de Animação Flash CS4 ................................................................................................ 232
Interpolações de movimento ................................................................................................ 233
Interpolações de forma ......................................................................................................... 237
Interpolação clássica ............................................................................................................. 239
Como começar a usar o ActionScript ........................................................................................ 241
Utilização de ActionScript para parar um filme .................................................................... 243
Manipulação de evento ........................................................................................................ 245
Utilização de ActionScript para ir para quadro ................................................................. 245
Como criar um símbolo de botão .............................................................................................. 250
Símbolos de botão................................................................................................................. 250
Criação de um botão ............................................................................................................. 250
Acrescentando som a um botão ........................................................................................... 252
Acrescentando controle com ações ...................................................................................... 253
Exercício - Analisando Flash na web ......................................................................................... 256
Análise do Flash na web ............................................................................................................ 260
Como produzir vídeos Flash para usar na web ......................................................................... 262
Emprego de vídeo ................................................................................................................. 262
Incorporação de vídeos dentro de arquivos SWF ................................................................. 265
Como importar sons .................................................................................................................. 266
Importar som......................................................................................................................... 266
Importar um som .................................................................................................................. 267
Edição das configurações do som ......................................................................................... 268
Compactação de Som............................................................................................................ 269
Como usar guias e réguas ......................................................................................................... 270
Utilização de guias................................................................................................................. 270
Mudar as propriedades da guia ............................................................................................ 271
Utilização de símbolos............................................................................................................... 272
Tipos de símbolos .................................................................................................................. 272
Criação de novos símbolos .................................................................................................... 272
Edição de um símbolo ........................................................................................................... 274
Edição de um símbolo no local.......................................................................................... 274
Edição de um símbolo através da Biblioteca..................................................................... 274
Utilizando símbolos com a ferramenta de desenho Deco .................................................... 275
O efeito Simetria ................................................................................................................... 275
O efeito Preenchimento de Grade ........................................................................................ 277
O efeito Preenchimento de Videira ...................................................................................... 278
Como criar máscaras ................................................................................................................. 280
Criação de uma máscara ....................................................................................................... 280
Animação de máscara ........................................................................................................... 281
Altere o conteúdo mascarado ............................................................................................... 281
Como utilizar um guia de movimento com uma animação de interpolação de filme .............. 282
Como atenuar interpolações..................................................................................................... 283
Atenuação de propriedades individuais para interpolações de movimento no Editor de
movimento ............................................................................................................................ 283
Edição de curvas de atenuação para interpolações de movimento no Editor de Movimento
............................................................................................................................................... 285
Atenuando propriedades individuais de interpolações clássicas no Inspetor de Propriedades
............................................................................................................................................... 285
Edição de uma curva de atenuação para interpolações clássicas no Inspetor de Propriedades
............................................................................................................................................... 286
Como criar um personagem animado....................................................................................... 287
Poses de Cinemática Inversa ................................................................................................. 287
Como aplicar cores e gradientes ............................................................................................... 291
Crie cores............................................................................................................................... 291
Adicione cores à paleta ......................................................................................................... 292
Paleta de cores seguras para a web ...................................................................................... 292
Como criar efeitos de texto com filtros .................................................................................... 295
Utilizando o filtro Sombra projetada ao texto ...................................................................... 295
Outros filtros gráficos ................................................................................................................ 296
Desfoque ........................................................................................................................... 296
Brilho ................................................................................................................................. 296
Bisel ................................................................................................................................... 296
Brilho de Gradiente ........................................................................................................... 297
Bisel de Gradiente ............................................................................................................. 297
Ajustar Cor ......................................................................................................................... 297
Como importar imagens............................................................................................................ 298
Formatos de imagens aceitos pelo Flash .............................................................................. 298
Imagens bitmap e vetoriais ................................................................................................... 298
Importação de imagens para o palco .................................................................................... 299
Importação de imagens para a biblioteca ............................................................................. 299
Importação de um PNG Fireworks ........................................................................................ 300
Importação de imagens do Photoshop e Illustrator ............................................................. 301
Importação de um documento XFL ....................................................................................... 302
Como criar usando a interpolação de movimentos .................................................................. 303
Rotação ................................................................................................................................. 303
Altere a taxa de quadros ....................................................................................................... 304
Transparência ........................................................................................................................ 305
Transparência de cor ............................................................................................................. 307
Virar imagens ........................................................................................................................ 308
Predefinições de movimento ................................................................................................ 310
Como criar efeitos visuais ......................................................................................................... 311
Remoção ou desativação de efeitos visuais .......................................................................... 313
Como usar técnicas cinematográficas ....................................................................................... 314
Crie um efeito de pan, tilt ou zoom usando interpolações clássicas .................................... 314
Acrescentar rótulos de quadro ............................................................................................. 318
Outras idéias ......................................................................................................................... 318
Ângulos de câmera ................................................................................................................ 319
Crie cross-fades usando interpolações clássicas ................................................................... 320
Crie um efeito de salto usando interpolações clássicas........................................................ 321
Exemplos de Efeitos .................................................................................................................. 324
Análise e roteirização de uma narrativa digital......................................................................... 326
Descrição da narrativa........................................................................................................... 326
Exemplo de resumo de narrativa e storyboard ........................................................................ 330
Exercicio - Resumo de narrativa e storyboard .......................................................................... 332
Como manter a coerência ......................................................................................................... 334
Criação de modelos. .............................................................................................................. 335
Como otimizar conteúdo do Flash ............................................................................................ 336
Otimização de imagens ......................................................................................................... 336
Otimização de som ................................................................................................................ 337
Como organizar conteúdo ......................................................................................................... 338
Organize a biblioteca............................................................................................................. 338
Organize camadas ................................................................................................................. 339
Defina as opções de compactação de áudio ......................................................................... 339
Rotule quadros-chave ........................................................................................................... 340
Como tornar o conteúdo do Flash acessível ............................................................................. 341
Habilitando e desabilitando a acessibilidade ........................................................................ 342
Controle de ordenação por tabulação do conteúdo Flash ................................................... 344
Teste de acessibilidade para conteúdo Flash........................................................................ 345
Como publicar um documento Flash ........................................................................................ 346
Exportação de conteúdo Flash como uma imagem .............................................................. 346
Como testar uma narrativa digital ............................................................................................ 347
Realização de testes técnicos ................................................................................................ 347
Revisão da narrativa .............................................................................................................. 347
Realizar um teste de usabilidade .......................................................................................... 348
Exercicio - Avaliação de uma narrativa digital .......................................................................... 350
Comunicação ......................................................................................................................... 350
Técnico .................................................................................................................................. 350
Usabilidade ............................................................................................................................ 351
Critérios narrativos ................................................................................................................ 351
Revisão do design ...................................................................................................................... 352
Resumo.................................................................................................................................. 352
Coerência............................................................................................................................... 352
Navegação universal ............................................................................................................. 353
Layout .................................................................................................................................... 354
Usabilidade ............................................................................................................................ 356
Acessibilidade ........................................................................................................................ 357
Características técnicas e suas soluções de design ................................................................... 358
Como tornar sites acessíveis ..................................................................................................... 360
Texto alternativo ................................................................................................................... 360
Folhas de Estilo em Cascata (CSS) ......................................................................................... 360
Mapas de Imagem ................................................................................................................. 360
Tabelas .................................................................................................................................. 360
Modelos e objetos de biblioteca ........................................................................................... 361
Quadros ................................................................................................................................. 361
Filmes .................................................................................................................................... 361
Independência de dispositivos .............................................................................................. 361
Exemplo de documento de design ............................................................................................ 362
Site da escola Coast Middle School - Visão Geral do Projeto ............................................... 362
Metas, objetivos e mensagens .............................................................................................. 362
Público ................................................................................................................................... 362
Metas de Reformulação ........................................................................................................ 363
Especificações técnicas/Requisitos de entrega ..................................................................... 363
Conteúdo do site ................................................................................................................... 363
Estrutura do Site.................................................................................................................... 364
Design Visual ......................................................................................................................... 365
Amostras de cores e fontes ................................................................................................... 366
Exemplo de proposta de design ............................................................................................ 367
Exercicio - Documento de Design.............................................................................................. 370
Visão geral do projeto ........................................................................................................... 370
Metas, objetivos e mensagens .............................................................................................. 370
Público ................................................................................................................................... 371
Metas para a reformulação ................................................................................................... 371
Especificações técnicas/Requisitos de entrega ..................................................................... 371
Conteúdo do site ................................................................................................................... 372
Estrutura do site .................................................................................................................... 373
Design visual .......................................................................................................................... 374
Exemplos de cores e fontes................................................................................................... 374
Exemplos de propostas de design ......................................................................................... 374
Princípios de design para conteúdo .......................................................................................... 375
Design centrado no usuário .................................................................................................. 375
Propósito ............................................................................................................................... 375
Coerência............................................................................................................................... 375
Tecnologia ............................................................................................................................. 375
Conteúdo ............................................................................................................................... 375
Controle................................................................................................................................. 375
Como criar folhas de estilo em cascata (CSS)............................................................................ 376
Definição dos estilos CSS ....................................................................................................... 376
Exportação de regras CSS para uma folha de estilos externa ............................................... 383
Vinculação a uma folha de estilos externa............................................................................ 385
Criação de folha de estilos externa ....................................................................................... 387
Edição de estilos .................................................................................................................... 389
Criação e modificação de texto no Flash................................................................................... 390
Criação de texto .................................................................................................................... 390
Edição de texto ...................................................................................................................... 392
Copie e cole texto.................................................................................................................. 394
Como criar efeitos visuais ......................................................................................................... 395
Como usar botões transparentes ou invisíveis ......................................................................... 398
Criar um botão ...................................................................................................................... 398
Tornar o botão transparente ................................................................................................ 399
Acrescente ActionScript para ativar um site ......................................................................... 400
Como usar InContext Editing..................................................................................................... 403
Pré-requisitos para utilizar o InContext Editing .................................................................... 403
Características do Dreamweaver InContext Editing.............................................................. 403
Apostila Exercício 1.1
Princípios e regras dos direitos autorais

Direitos autorais tratam-se da proteção dada à propriedade intelectual.
A propriedade intelectual consiste de qualquer coisa que um indivíduo tenha escrito ou criado. Pode ser
música, texto, imagens, fotografias, sons, e assim por diante.
A doutrina do uso legítimo integra as leis de direitos autorais. Ela dita que porções limitadas de materiais
podem ser utilizadas, sem permissão escrita, para determinados fins, tais como a reportagem de notícias ou
o trabalho escolar. Contudo, como ela não define o termo “limitado” , tome cuidado para não utilizar de tais
materiais excessivamente. A doutrina do uso legítimo exige que se dê crédito ao autor ou criador de qualquer
material que seja utilizado.
Trabalhos derivativos são materiais protegidos por direitos autorais que foram alterados ou mudados. Tais
materiais são protegidos por lei. Mesmo que você altere, usando um software de computador,uma foto
protegida por direitos do autor, esta foto continuará protegida, e você não poderá usá-la sem permissão
expressa.
As normas acadêmicas para os materiais protegidos por direito autoral são mais exigentes que as outras.
Como os acadêmicos e pesquisadores estudam muitas ideias diferentes e são responsáveis por compartilhar
estas ideias com o mundo, requer-se deles que atendam a parâmetros mais altos de honestidade. Eles
devem dar crédito não somente aos autores de citações diretas, mas também a ideias que tais citações
representem. Como pesquisador, você não pode parafrasear o que outra pessoa disse sem lhe dar crédito.
Bibliografias são listas das fontes de informação usadas em uma pesquisa. Quando a internet é usada para
a pesquisa ou trabalho de design, cabe dar crédito onde este for devido. Frequentemente, pessoas que usam
objetos e imagens da internet criam uma lista de créditos de imagem, ao invés de uma bibliografia.
Regras dos direitos autorais
1. Você não pode usar materiais protegidos por direitos autorais sem a permissão expressa do criador
de tais materiais (ou do detentor de seus direitos).
2. Materiais podem estar protegidos mesmo se não exibirem o símbolo ©. Mesmo que nenhuma
referência aos direitos do autor seja feita, você deve presumir que todo material de outra fonte seja
protegido.
3. As penas por violação de direitos autorais vão de leves a severas. Se você infringir a lei dos direitos
autorais, pode receber simplesmente uma mensagem de email do autor solicitando que deixe de usar
o material. Se você publicar o material em um site, o administrador do site pode fechar o seu site. Ou
você pode ser processado pelo autor e pelas autoridades federais.
4. Para garantir que não está infringindo nenhuma lei de direitos autorais, é importante que você faça
o seguinte:
• Escreva ou mande um email para o autor ou criador, pedindo permissão para usar o material. Não o
utilize até receber permissão.
• Siga as instruções do próprio site acerca do uso de materiais. É possível que lhe peçam para criar
um link em sua página, ou que notifique o autor ou criador.
© Adobe Systems Incorporated Princípios e regras dos direitos autorais 1

• O mais importante: Não use nenhum material se não tiver permissão por escrito.
5. Para proteger os seus próprios materiais, a declaração de direitos do autor para materiais visualmente
perceptíveis deve conter um ou mais dos seguintes elementos:
• O símbolo © (a letra C dentro de um círculo), ou a palavra “Copyright,” ou a abreviação “Copr.”; e
o O ano da primeira publicação
o O nome do dono dos direitos autorais
Exemplo: © 2010 Adobe Systems Incorporated
• Fonogramas e gravações de som utilizam a letra P dentro de um círculo, e
o a declaração de direitos autorais deve ser exibida de forma que “dê exposição razoável à atribuição
de direitos autorais.”
Para mais informações sobre os direitos autorais, visite o site do United States Copyright Office no
http://www.copyright.gov/.
2 Princípios e regras dos direitos autorais © Adobe Systems Incorporated

Citações na internet
Qualquer informação de um livro ou revista que você use em um trabalho deve ter a fonte anotada ou citada
em sua bibliografia. Citar as fontes de informação significa que você está dando crédito para o trabalho de
seu autor. Há formas específicas de tratar cada tipo de fonte.
Formato de citação
Não deixe de usar a citação tal qual ela está escrita, com a informação sobre a fonte. Você deve empregar
com exatidão o método de citação de fontes preferencial de sua escola. Abaixo, exemplos de formatos de
citação específicos para fontes da internet.
World Wide Web
Autor. Título do ítem. [Online] Disponível http://address/filename, data do documento ou, se não disponível,
data do download.
Exemplo:
Wood, Lois. Regra dos Terços. [Online] Disponível http://www.aea1.k12.ia.us/lois/ruleofthirds.html, 26
de julho, 1999.
Imagem online
Descrição ou título da imagem. (Imagem Online) Disponível http://address/filename, data do documento ou,
se não disponível, data do download.
Som online
Descrição ou título do som. (Som online) Disponível http://address/filename, data do documento ou, se não
disponível, data do download.
Online video clip
Descrição ou título do clipe de vídeo. (Clipe de Vídeo Online) Disponível http://address/filename, data do
documento ou, se não disponível, data do download.
Outras fontes a citar
• E-mail
• Newsgroups
© Adobe Systems Incorporated Citações na internet 1

Modelo de documento do aluno

Nome do arquivo: planetary_nebula_mz3.jpg
Tamanho do arquivo: 35.5 KB
Encontrado em http://heritage.stsci.edu/2001/05/index.html
Nebulosa planetária Mz3 pela equié do Hubble Heritage. Copyright 2001 NASA e
Space Telescope Science Institute.
Nome do arquivo: WYPLOGO_4c.gif

Tamanho do arquivo: 11 KB
Encontrado em http://www.physics2005.org/
Logomarca do site do World of Physics. Copyright 2005 World Year of Physics.
© Adobe Systems Incorporated Modelo de documento do aluno 1

Nome do arquivo: pnglogo-blk-sml1.png

Tamanho do arquivo: 17 KB
Encontrado em http://www.libpng.org/pub/png/
Logomarca PNG. Copyright 2007 Greg Roelofs
2 Modelo de documento do aluno © Adobe Systems Incorporated

Escaneamento
Colete imagens de revistas, jornais, ou livros, trabalhos de arte, ou objetos encontrados (folhas, flores e
assim por diante) para praticar o escaneamento e gerar conteúdo gráfico para incluir em projetos futuros.
Você vai escanear as imagens e objetos e produzir um corpo independente de trabalho (arquivos e pastas
eletrônicos com materiais originais).
Captura
Planejamento Edição Salvamento
(Escaneamento)
Planejamento
Pergunte a si mesmo:
• Que mensagem quero transmitir?
• Selecione imagem ou objeto.
• Essa imagem conta a história? Concentre-se na mensagem.
• Ela me conta a mesma história que outra imagem?
• Como vou usar esta imagem? Exibida em um montior? Impressa?
• Vou precisar modificar esta imagem para outro propósito?
• Há alguma informação estranha à imagem?
• Há detalhes que desviam a atenção?
Captura
Visualização de escaneamento:
• Ligue o scanner.
• Posicione a imagem ou objeto na superfície.
• Inicie o software do scanner (se ele não se iniciou automaticamente quando o scanner foi ligado).
• Configure o modo de escaneamento.
• Escaneie.
• Configure o tamanho final.
• Configure a resolução.
Escaneamento final:
• Escaneie novamente para adquirir a imagem escaneada que você de fato vai usar.
© Adobe Systems Incorporated Escaneamento 1

Edição
Edite a imagem:
• Inicie o software de edição de imagens.
• Corrija a cor, se necessário.
• Acrescente efeitos especiais.
• Redimensione, se necessário.
Salvamento
Salve os arquivos:
• Salve como arquivo que eu possa modificar no futuro.
• Salve como uma imagem própria para a internet.
• Salve como imagem própria para a impressão.
2 Escaneamento © Adobe Systems Incorporated

Adobe Firewors CS4 Apostila Exercício 1.2
Como escanear imagens sem software

de edição de imagens
1. Levante a tampa do scanner. Confira a orientação para posicionamento da imagem. Atente para as
marcações de orientação impressas na moldura de plástico ao redor da parte de vidro.
2. Posicione a imagem no vidro. Certifique-se de que está alinhada no vidro.
3. Pressione o botão Escanear (normalemente no lado esquerdo da fileira de botões). Se não houver botões,
você deve conferir a caixa de diálogo para selecionar o próximo passo.
4. A lâmpada do scanner é acionada e se aquece. Espere até a imagem ser totalmente escaneada.
5. O scanner faz um escaneamento de visualização.

Nota: Agora você pode fazer seus primeiros ajustes. Recorte as partes da imagem que não quer incluir
no escaneamento final. Configure a resolução ou tipo de escaneamento conforme necessário.
6. Faça o escaneamento final.
7. Salve a imagem como TIF (TIFF), GIF, ou JPEG. Estes são os formatos de arquivo mais comuns.
8. Se tiver software de edição de imagens, você pode abrir o arquivo escaneado e usar o editor de imagens
para editá-lo.
© Adobe Systems Incorporated Como escanear imagens sem software de edição de imagens 1
Adobe Fireworks CS4 Apostila Exercício 1.4
Painel Otimização do Fireworks

Nome do aluno: ________________________________________________ Data: _______________
Rotule as opções para otimização de GIF.
Rotule as opções de otimização de JPEG.
© Adobe Systems Incorporated Painel Otimização do Fireworks 1

Painel Otimizar do Fireworks

Você pode utilizar o painel Otimizar para selecionar as suas configurações de otimização. O primeiro passo
é determinar que tipo de arquivo você planeja exportar, tais como GIF ou JPEG. Em seguida pode selecionar
as configurações detalhadas. Imagens GIF em geral são usadas para a arte linear e as imagens com cores
sólidas. Imagens GIF podem conter áreas transparentes e podem ser usadas para arquivos de animação. A
desvantagem das imagens GIF é que elas são restritas a 256 cores. O JPEG em geral é usado para imagens
fotográficas ou imagens com gradientes ou maior número de cores. Arquivos JPEG não podem ser
transparentes ou animados.
Opções para Otimização de GIF
Configurações Salvas
Formato do Arquivo
de Exportação
Paleta indexada
Adicionar Cor
Editar Cor
Bloquear Cor
Remover Cor da
Transparência
Adicionar Cor à Excluir Cor

Transparência
Selecionar Cor Encaixar nas Cores

Transparente Seguras para Web
Figura 1 Painel Otimizar GIF
Configurações Salvas: Use Configurações Salvas para selecionar uma configuração de qualidade de
imagem previamente selecionada para exportação. Para GIF, estas incluem GIF Web 216, GIF WebSnap
256, GIF WebSnap 128, GIF Adaptável 256 e GIF Animado WebSnap 128.
Fosco: Se você quer suavizar as bordas de uma imagem para exportação com fundos de diferentes cores,
clique na caixa de cor Fosco e selecione uma cor para o fundo da imagem. Isto é útil para se criar uma borda
mais suave para a imagem, particularmente se a imagem vai aparecer em páginas da web com fundos de
diferentes cores.
Cores: Controla o número de cores na imagem. Este número é automaticamente configurado com base nas
seleções em Configurações salvas. Ao se diminuir o número de cores, diminui-se o tamanho do arquivo mas
também reduz-se a qualidade da imagem.
© Adobe Systems Incorporated Painel Otimizar do Fireworks 1

Apostila Exercício 1.4 Adobe Fireworks CS4
Pontilhamento: A opção Pontilhamento é útil para imagens com muitas gradações de cor. Pontilhamento
aproxima cores que não estão na atual paleta alternando duas cores semelhantes. Aumentando as
configurações do Pontilhamento pode aumentar muito o tamanho do arquivo, portanto considere utilizar o
formato JPEG em lugar de pontilhamento a imagem.
Perda: Reduz a qualidade da imagem na exportação. Configurações de perda maiores podem possibilitar menores
arquivos, mas imagens de baixa qualidade. A configuração de perda ideal é 0, mas se você precisa reduzir o
tamanho do arquivo uma configuração de perda entre 5 e 15 normalmente oferece os melhores resultados.
Transparência: Remove a cor de fundo ou os halos em volta de uma imagem de forma que, em um
navegador da web, o fundo da página da web seja visível através destas áreas. (Esta capacidade é a
principal vantagem de exportar imagens como GIFs.) O Índice Transparência remove a cor de fundo.
Transparência Alfa remove o fundo de uma imagem se a cor da tela de pintura for transparente. Utilize o
botão Adicionar Cor à transparência para remover cores específicas de uma imagem.
Opções para otimização JPEG
Figura 2 Painel Otimizar JPEG

Configurações Salvas: Selecionar uma configuração de qualidade de imagem previamente selecionada
para exportação. Para JPEG, estas incluem JPEG Melhor Qualidade e JPEG Menor Arquivo.
Fosco: Se você quer suavizar as bordas de uma imagem para exportação com fundos de diferentes cores,
clique na caixa de cor Fosco e selecione uma cor para o fundo da imagem. Isto é útil para se criar uma borda
mais suave para a imagem, particularmente se a imagem vai aparecer em páginas da web com fundos de
diferentes cores.
Qualidade: Ajusta a qualidade de imagem. Reduzir a qualidade diminui o tamanho da imagem; uma qualidade
maior aumenta o tamanho da imagem.
Qualidade Seletiva: Ajusta a qualidade apenas de uma parte selecionada da imagem, enquanto deixa o
resto da imagem intacta. Em áreas de interesse particular, uma imagem pode ser compactada a uma taxa
mais alta do que o resto da imagem. Utilizada com uma máscara JPEG.
Suavização: Desfoca as bordas sólidas e reduz o tamanho do arquivo.
2 Painel Otimizar do Fireworks © Adobe Systems Incorporated

Como otimizar imagens GIF

O GIF (Graphic Interchange Format) é um arquivo gráfico melhor usado para imagens com grandes áreas
de cor sólida e chapada, tais como ilustrações e logomarcas simples, e textos. Com o Adobe Fireworks CS4,
você pode comparar versões diferentes do mesmo objeto de imagem para criar a melhor qualidade com o
menor tamanho de arquivo. Antes de otimizar, termine o objeto de imagem (tamanho, efeitos, cor e desenho).
Otimize uma imagem GIF
1. Abra um objeto de imagem pronto no Fireworks. Esta ferramenta é uma vantagem

fundamental na exportação de imagens
2. No painel Otimizar, selecione GIF no menu como GIFs.
Formato de arquivo de exportação. Depois
selecione o tipo de GIF que você deseja no menu À medida que experimenta diferentes
Paleta Indexada. Adaptável ou Web Adaptivo configurações, atente para o tamanho do
são as melhores opções para a maioria das arquivo e tempo de download para cada
imagens pequenas para a web. nível de qualidade.
3. Selecione o botão Até 4 para comparar versões 5. Para exportar a versão da imagem que preferir,
distintas da imagem (Figura 1). clique nela e selecione Arquivo > Exportar.
Nomeie o arquivo com a extensão .gif.
Certifique de que a imagem está visível. (Se
necessário, use a ferramenta MÃO para 6. Para salvar a versão mais rica do arquivo,
arrastar a imagem para o meio). selecione Arquivo > Salvar Como e salve a
imagem como um arquivo PNG do Fireworks
4. Use a ferramenta Cursor para selecionar (com a extensão .png).
alternadamente qual das três versões possíveis
da imagem original, e experimente ajustes Adicionar Cor à
diferentes no painel Otimizar para encontrar o Botão até 4 Transparência
menor tamanho com a maior qualidade aceitável:
• Para ajustar a imagem para várias
gradações de cor, aumente o ajuste de
Pontilhamento.
• Para fazer o arquivo menor, aumente Perda
(normalmente entre 5 e 15).
• Para remover a imagem do plano de fundo
e halos em volta da imagem, selecione
Transparência de Índice.
• Para remover cores específicas da imagem,
use o botão Adicionar Cor à Transparência. Figura 1 Comparação de Imagens GIFs
© Adobe Systems Incorporated Como otimizar imagens GIF 1

Como otimizar imagens JPEG

JPEG (Joint Photograph Experts Group) é um formato gráfico de arquivos que é melhor aplicada a fotografias
ou imagens com sutis mudanças de cores, graduações ou luz. Com Adobe Fireworks CS4 você pode comparar
diferentes versões do mesmo objeto gráfico para criar a melhor imagem com o menor tamanho de arquivo.
Antes de otimizar, complete o objeto gráfico (tamanho, efeitos, cor, design).
Otimização de uma imagem JPEG
1. Abra o objeto gráfico completo no Fireworks. 6. Para salvar a versão mais rica do arquivo,
selecione Arquivo > Salvar Como e salve o
2. No painel Otimizar, selecione JPEG no menu arquivo como PNG Fireworks (com uma
Formato de Exportação do Arquivo. extensão .png).
3. Selecione o botão 4 - Para Cima para comparar
Botão 4 Páginas / Folha
diferentes versões da imagem.
Certifique-se de que a imagem está visível na
área de exibição (Figura 1). (Se necessário,
utilize a ferramenta Mão para arrastar a imagem
para o meio).
4. Use a ferramenta Ponteiro para selecionar uma
versão da imagem original por vez e
experimentar diferentes configurações no painel
Otimizar, até encontrar o menor tamanho de
arquivo com a qualidade mais aceitável.
• No menu Configurações, selecione JPEG –
Figura 1 Comparação de imagens JPEG
Melhor Qualidade ou JPEG Menor Arquivo
para valores de qualidade pré-configurados.
• Experimente diferentes valores para
as configurações de Qualidade.
• Para tornar o arquivo menor, aumente a
Suavização.
Enquanto você experimenta diferentes
configurações, atente para o tamanho do arquivo
e o tempo de download para cada nível de
qualidade.
5. Para exportar a versão da imagem que
você escolher, clique nela e selecione
Arquivo > Exportar. Nomeie o arquivo com uma
extensão .jpg.
© Adobe Systems Incorporated Como otimizar imagens JPEG 1

Use uma máscara JPEG para mais otimizações (opcional)

Você pode otimizar ainda mais o tamanho de seu objeto gráfico selecionando uma área específica da imagem
e mudando suas configurações de qualidade.
1. Clique o botão Original para retornar para a

imagem (individual) original.
2. Com a ferramenta Marca de Seleção, contorne
o ponto de interesse na sua imagem.
3. Com o ponto de interesse selecionado, escolha
Selecionar > Selecionar Inverso.
Isto seleciona tudo exceto o ponto de interesse
na imagem. Uma marca de seleção envolve a
seleção inversa (Figura 2).
4. Para fazer modificações apenas na região fora
do ponto de interesse, selecione Modificar >
Figura 2 Seleção inversa
JPEG Seletivo > Salvar Seleção Como Máscara
JPEG.
Uma cor de realce aparece em tudo exceto no
ponto de interesse da imagem.
No painel Otimizar você pode agora fazer
mudanças no valor da Qualidade Seletiva.
Reduzindo este número mantém-se a qualidade
da imagem do ponto de interesse mas reduz-se
a qualidade do fundo e também o tamanho do
arquivo.
5. Clique no botão Visualizar para ver o efeito de
suas mudanças.
2 Como otimizar imagens JPEG © Adobe Systems Incorporated

Ferramentas do Fireworks
Nome do aluno: ______________________________________________ Data: _________________
O painel Ferramentas do Adobe Fireworks CS4 contém as principais ferramentas para se criar e modificar
imagens.
Identifique as ferramentas de seleção, movimentação e transformação:
Identifique as ferramentas de modificação de imagens:
Identifique as ferramentas de desenho e escrita:
Identifique as ferramentas de objetos interativos:
Identifique as ferramentas de cor:
Identifique as ferramentas de visualização:
© Adobe Systems Incorporated Ferramentas do Fireworks 1

Painéis do Fireworks
Painéis flutuantes e encaixados

Os painéis proporcionam acesso fácil aos controles que o ajudam a editar no Adobe Fireworks CS4 objetos
ou elementos selecionados de um documento. Você pode usar os painéis para trabalhar com bordas, camadas,
símbolos, amostras de cor e outros. Cada painel pode ser arrastado, de forma que você pode agrupar painéis
de acordo com arrumações personalizadas. Por padrão, os painéis ficam encaixados na parte direita da área
de trabalho. Você pode desencaixar grupos de painéis, adicionar painéis a um grupo, desencaixar painéis
individuais, redefinir a ordem dos grupos de painéis encaixados, e recolher e fechar grupos de painéis. Para
desencaixar um painel, arraste a aba do painel pelo canto superior esquerdo da barra de título. Muitos dos
painéis contém abas, combinando dois ou mais painéis.
Painel de Ferramentas
O painel de Ferramentas (Figura 1) é organizado em seções claramente rotuladas, para facilitar a seleção
de ferramentas. Se o painel de Ferramentas não estiver visível, você pode exibi-lo selecionando Janela >
Ferramentas. Para selecionar uma ferramenta, simplesmente clique nela ou use a tecla de atalho exibida em
parênteses. Se uma ferramenta tiver um pequeno triângulo preto na parte inferior direita, significa que
pertence a um grupo de ferramentas; posicione o ponteiro sobre a ferramenta, clique e segure o botão do
mouse para acessar o menu pop-up do grupo de ferramentas.
© Adobe Systems Incorporated Painéis do Fireworks 1

Ferramentas de seleção, movimento e Ferramentas de modificação de imagem:

transformação: Ferramenta Marca de Seleção: Selecione uma
Ferramenta Ponteiro (seta preta): Clique em um região de pixels retangular. Clique e mantenha
objeto para selecioná-lo. Arraste o objeto pressionada a pequena seta na parte inferior
selecionado para movê-lo. direita para selecionar uma forma diferente para
Ferramenta Dimensionar: Aumente ou diminua sua ferramenta de seleção.
objetos, gire, vire, distorça ou incline objetos ou grupos. Ferramenta Varinha Mágica: Selecione pixels
Ferramenta Subseleção (seta branca): Selecione de cor semelhante.
e mova pontos de um objeto ou edite caminhos Ferramenta Lápis: Desenhe uma linha bitmap
entre pontos adjacentes. com traçado de 1-pixel.
Ferramenta Cortar: Remova a parte de uma imagem Ferramenta Desfocar: Tire o foco de partes da
fora de uma região retangular selecionada. imagem.
Ferramenta Laço: Semelhante à ferramenta
Ferramentas de desenho e escrita: Marca de Seleção, porém permite que você
Ferramenta Linha: Desenhe linhas retas. selecione uma área de pixels de forma livre.
Ferramenta Retângulo: Desenhe retângulos. Clique Ferramenta Pincel: Escolha de uma variedade
e pressione a pequena seta na parte inferior direita pinceladas, tais como borrifo de tinta, caligrafia,
para selecionar uma forma diferente para desenhar. lápis-cera e aerógrafo.
Ferramenta Forma Livre: Desenhe formas livres. Ferramenta Borracha: Apague partes de uma
Ferramenta Caneta: Clique para posicionar imagem.
pontos; a ferramenta Caneta conecta pontos Ferramenta Carimbo: Duplique uma área de uma
sucessivos com linhas retas. Puxe um ponto para imagem.
formar uma curva.
Ferramenta Texto: Digite textos. Ferramentas de Cor:
Ferramenta Faca: Corte um caminho em dois ou Ferramenta Conta-Gotas: Crie uma amostra a
mais caminhos. partir de pixels existentes. Você pode criar
amostras de áreas de 1-pixel, 3-por-3 ou 5-por-5.
Ferramentas de Objetos Interativos: A cor amostrada aparece em todas as caixas de
Ferramenta Ponto de Acesso Retangular: Desenhe cor de Traçado ou Preenchimento em todo o
uma área especial sobre uma imagem, que possa ser Fireworks.
clicada para vincular a uma nova página da web. Ferramenta Balde de Tinta: Altere a cor de pixels
Ocultar Fatias e Pontos de Acesso: Ocultar todas selecionados.
as fatias e pontos de acesso desenhados em uma Caixa de Cor do Traçado: Defina a cor do
imagem. Figura 1 contorno de um objeto.
Painel de
Ferramenta Fatia: Desenhe áreas de fatias sobre Ferramentas Caixa de Cor do Preenchimento: Defina a cor
uma imagem, de forma a permitir a interação do de uma região dentro de um objeto.
usuário com a imagem na página da web.
Três ícones inferiores:
Mostrar Fatias e Pontos de Acesso: Mostrar todas as
camadas e pontos de acesso desenhadas na imagem. Definir Cores Padrão de Traçado/Preenchimento: Defina
automaticamente as cores de traçado e preenchimento; os
Ferramentas de Visualização: padrões são preto para o traçado e branco para o
Três ícones superiores: modo de Tela Padrão, modo de preenchimento.
Tela Inteira com Menus, modo de Tela Inteira. Sem Traçado ou Preenchimento: Uma caixa branca com
Ferramenta Mão: Mova a porção visível de uma imagem uma linha vermelha significa que não há cor
sem utilizar as barras de rolagem do documento. (completamente transparente). Você não pode modificar
Ferramenta Zoom (lente de aumento): Aproxime ou um traçado ou preenchimento sem cor.
Distancie o foco de visualização de uma imagem. Alternar Cores de Traçado/Preenchimento.
2 Painéis do Fireworks © Adobe Systems Incorporated

Inspetor de Propriedades
O inspetor de Propriedades exibe opções que mudam de acordo com a seleção de objeto ou ferramenta. Ao
abrir um documento, o inspetor de Propriedades exibe as propriedades do documento. Ao selecionar uma
ferramenta, ele exibe as opções da ferramenta. Ao selecionar um objeto vetorizado, ele exibe opções como
traçado e preenchimento. Você pode alterar estas e outras opções direto do inspetor de Propriedades. Por
padrão, o inspetor de Propriedade fica visível, mas você pode ocultá-lo ou mostrá-lo selecionando Janela >
Propriedades. Os exemplos a seguir mostram as propriedades de um objeto de texto (Figura 2) e de uma
forma retangular (Figura 3). As opções variam de acordo com o tipo de objeto ou ferramenta que você
selecionar.
Figura 2 Inspetor de Propriedades de Texto
Figura 3 Inspetor de Propriedades de Retângulo

A primeira área na parte esquerda do inspetor de Propriedades fornece informações sobre o objeto selecionado.
Você também pode usar esta área para definir o tamanho ou posição de um objeto na tela de desenho.
Área de preenchimento: Altere a cor do preenchimento de uma forma clicando na caixa de cores da
segunda parte do inspetor de Propriedades. Você pode selecionar o tipo de preenchimento de uma forma,
como sólido, padrão ou pontilhado, no menu ao lado da caixa de cor. Este menu também oferece vários
efeitos de gradiente. Outras opções incluem mudar o tipo ou quantidade de textura.
Área de traçado: Altere a categoria ou cor de uma forma na terceira parte do inspetor de Propriedades.
Altere o tamanho da ponta (grossura do traçado) digitando um número na caixa de texto ao lado da caixa de
cor, ou clicando na seta para baixo e configurando o menu deslizante. Selecione a categoria de traçado,
como lápis, caneta hidrográfica ou lápis-cera, utilizando o último menu na parte direita da área de traçado.
Outras opções incluem alterar a suavidade das bordas, o tipo e quantidade de textura, e a circunferência dos
cantos.
Área de filtros: Aplique efeitos em objetos clicando no botão Adicionar Filtros em Tempo Real (o símbolo de
adição) a última parte à direita do inspetor de Propriedades. Você pode aplicar filtros tanto no interior quanto
na borda dos objetos.Os filtros incluem brilhos, sombras, biséis e ajustes de cor. Exclua os filtros existentes
selecionando o filtro e clicando no botão Excluir o Filtro em Tempo Real atualmente selecionado (o símbolo
de subtração). Após selecionar o filtro no menu, você poderá variar o modo de opacidade e fusão.
© Adobe Systems Incorporated Painéis do Fireworks 3

Como construir uma barra de identificação

Para construir uma barra de identificação, crie uma forma, adicione texto e depois adicione efeitos à forma
e ao texto. Você cria um design adicionando vários efeitos e cores ao preenchimento, traçado e texto.
Construa uma barra de identificação
1. Inicie Fireworks CS4, abra um novo documento

e especifique as dimensões da tela. (pelo menos
400 pixels de largura por 100 pixels de altura).
2. Salve o arquivo.
3. Crie um fundo para sua barra de identificação

usando a ferramenta Retângulo do painel
Ferramentas. Deixe algum espaço em branco
na tela ao redor do retângulo para adicionar Figura 1 Texto e retângulo
efeitos mais tarde.
O retângulo tem pequenos quadrados azuis nos
cantos quando você os seleciona.
4. Troque a cor do traçado (contorno) ou o

preenchimento (interior) do retângulo utilizando
a caixa Cor do Traçado e a caixa Cor do
Figura 2 Inspetor de Propriedades Retângulo
Preenchimento no inspetor de Propriedades (ou
no painel Ferramentas).
5. Para adicionar seu nome ao retângulo, selecione

a ferramenta Texto no painel Ferramentas;
depois clique e arraste para desenhar uma caixa
de texto sobre o retângulo que acabou de criar.
No inspetor de Propriedades selecione a fonte, Figura 3 Inspetor de Propriedades Texto
tamanho, cor e estilo que você quer.
Digite seu nome.
(O exemplo na Figura 1 usa Comic Sans MS,
32 pt, branco e negrito.)
6. Para mover seu nome dentro do retângulo,

selecione a ferramenta Ponteiro no painel
Ferramentas, selecione o texto em questão e
arraste para a posição desejada.
© Adobe Systems Incorporated Como construir uma barra de identificação 1

7. Para personalizar o aspecto da barra de

identificação, selecione o retângulo ou texto,
clique no botão Adicionar Filtros em Tempo Real
do inspetor de Propriedades, selecione um filtro
e selecione sua configuração.
Você também pode trocar o tipo de
preenchimento e traçado.
O inspetor de Propriedade Retângulo para a
barra de identificação mostra um preenchimento
Figura 4 Barra de identificação com tela aparada
padrão pintura a óleo sem traçado, com uma
borda difusa e textura granulada para o retângulo
(Figura 2). O texto na barra de identificação
utiliza o efeito sombra (Figura 3).
8. Após completar todos os efeitos desejados,

selecione Modificar > Tela de Desenho > Aparar
Tela de Desenho do menu principal. Esta ação
remove qualquer excesso de espaço em branco
em volta da imagem final (Figura 4).
9. Salve a barra de identificação.
2 Como construir uma barra de identificação © Adobe Systems Incorporated

Como criar efeitos

Os efeitos no Adobe Fireworks CS4 aplicam-se a objetos de imagem e objetos de texto, tanto no interior do
objeto, como na borda ou ambos. Efeitos adicionam dimensão e contraste entre objetos e seu fundo. Você
pode encontrar efeitos no inspetor de Propriedades (Figura 1)- na área Filtros, na área Preencher e na área
Traçar. Cada efeito tem variáveis que você pode mudar para personalizar como o efeito irá aparentar. Os
efeitos são descritos nas seções seguintes.
Figura 1 Inspetor de Propriedades
Efeitos presentes na área Filtros do inspetor de Propriedades.
Ajustar Cor
• Níveis Automáticos: Muda da mais clara à mais escura gama de pixels, ajustando realces, tons médios
e sombras automaticamente.
• Brilho: Faz o objeto mais brilhante ou mais escuro.
• Contraste: Aumenta ou diminui a diferença entre luz e sombra.
• Preenchimento de cor: Coloca outra cor sobre o objeto e muda seu grau de transparência e/ou como
esta cor se mistura à cor original.
• Curvas: Ajusta qualquer cor juntamente com sua gama tonal (Do espectro claro ao escuro) sem afetar
as outras cores.
• Matiz/Saturação: Ajusta a cor permitindo a mudança de pureza e clareza da cor na imagem.
• Inverter: Muda a cor para a sua cor inversa no círculo cromático. Por exemplo, aplique Inverter em um
objeto vermelho para mudar sua cor para azul claro.
• Níveis: Muda a gama tonal (O espectro do claro ao escuro) através da mudança do número de pixels
que são realces, tons médios e sombras.
Bisel
Cada um desses filtros tem atributos para alterar o efeito biselado. Você pode alterar a cor do bisel, o
formato da borda do bisel (tais como chata, suave e arredondada), seu contraste, sua difusão e o ângulo da
luz que incide nele.
© Adobe Systems Incorporated Como criar efeitos 1

• Bisel Interno: Dê a um objeto um aspecto tri-dimensional fazendo o interior de um objeto parecer mais
baixo do que a parte de fora do objeto.
• Bisel Externo: Dê a um objeto um aspecto tri-dimensional fazendo o interior de um objeto parecer mais
alto do que a parte de fora do objeto.
Entalhe
Os filtros de entalhe têm atributos que alteram a forma que o entalhamento se parece. Você pode alterar seu
contraste, sua difusão e o ângulo da luz que incide nele.
• Entalhe Inserido: Faz a imagem parecer em baixo relevo em relação ao fundo.
• Entalhe Elevado: Faz a imagem parecer em alto relevo em relação ao fundo.
Desfocar
Desfoca os pixels em uma imagem.
• Desfocar: Suaviza o foco de pixels selecionados.
• Desfocar Mais: Desfoca cerca de três vezes mais do que o Desfoque.
• Desfoque Gaussiano: Aplica uma média ponderada de desfoque em cada pixel para produzir um efeito
enevoado.
• Desfoque de Movimento: Cria a aparência que a imagem esta se movendo.
• Desfoque Radial: Cria a aparência de que a imagem está rodando.
• Desfocar com Zoom: Cria a aparência de que a imagem está se movendo para perto ou para longe do
observador.
Ruído
O filtro de ruído simula a ocorrência natural da coloração da imagem ser composta de pixels de várias cores
diferentes. O Ruído refere-se à variação de cor aleatória de pixels que formam uma imagem. Você pode
aplicar ruídos de cor ou ruídos monocromáticos. A quantidade de ruído pode ser ajustada de 1 até 400, com
um aumento de sua quantidade resultando em mais pixels colocados aleatoriamente.
Outros
• Converter em Alfa: Converte um objeto em uma transparência baseada na transparência da imagem.
• Localizar bordas: Muda um bitmap para parecer uma linha desenhada para identificar as transições de
cores e mudando estas transições por linhas.
Sombra e Brilho
Estes filtros simulam diferentes ângulos de luz incidindo sobre o objeto. Cada um desses filtros têm atributos
para alterar os efeitos de luz. Você pode alterar a cor de uma sombra ou de um brilho, a distância de uma
sombra de um objeto, a largura do brilho, a opacidade de uma sombra ou de um brilho, sua suavidade, o
ângulo da luz que incide sobre uma sombra, ou a distância entre o brilho e o objeto.
• Sombra: Faz um objeto parecer que está projetando uma sombra.
• Brilho: Faz o objeto parecer brilhar.
2 Como criar efeitos © Adobe Systems Incorporated

• Brilho Interno: Realça o objeto.

• Sombra interna: Escurece o objeto de forma que parece que algo está projetando uma sombra nele.
• Sombra Sólida: Cria uma sombra no formato do objeto em qualquer direção.
Nitidez
Estes filtros corrigem imagens desfocadas.
• Nitidez: Ajusta o foco de uma imagem desfocada através do aumento de contraste de pixels adjacentes.
• Mais Nitidez: Ajusta o foco cerca de três vezes mais do que Nitidez.
• Tirar Nitidez da Máscara: Ajusta o contraste das bordas da imagem para dar nitidez a uma imagem.
Esta opção oferece mais controle, portanto frequentemente é a melhor opção para dar nitidez a uma
imagem.
Photoshop Live Effects

Você pode aplicar alguns efeitos de camadas do Photoshop usando o menu pop-up no inspetor de Propriedade.
Depois de selecionar Photoshop Live Effects, uma caixa de diálogo aparecerá. Selecione um dos efeitos no
painel à esquerda na caixa de diálogo e editar as configurações no painel à direita. Você pode selecionar
vários efeitos de uma vez. Os seguintes efeitos do Photoshop estão disponíveis:
• Sombra • Acetinado
• Sombra Interna • Superpor Cores
• Brilho Externo • Superpor Gradientes
• Brilho Interno • Superpor Padrões
• Bisel e Entalhe • Traçado
Efeitos na área de Preenchimento

Efeitos de Preenchimento alteram apenas o interior de um objeto. Estes efeitos acrescentam textura à
forma. O menu Opções de Preenchimento na parte superior da área de Preenchimento inclui as seguintes
opções:
• Nenhum: Não utiliza nenhuma cor para preencher um objeto. (Indicado na caixa de cor por uma linha
diagonal vermelha).
• Sólido: Preenche um objeto com uma cor sólida.
• Pontilhamento da Web: Aproxima cores que não estão presentes na paleta em uso.
• Gradiente: Preenche um objeto com cores ou sombras que gradualmente se misturam.
• Padrão: Cria um padrão de textura como preenchimento.
Efeitos na área de Traçado

Efeitos de Traçado afetam apenas o traçado ou contorno de um objeto gráfico ou de texto. Você pode mudar
o tipo de mídia usado para criar o contorno. Cada mídia tem opções como tamanho da ponta, textura da tinta
e a suavidade da borda. A seguir, uma lista das mídias disponíveis:
© Adobe Systems Incorporated Como criar efeitos 3

• Básico: Diversos tipos de canetas.

• Aerógrafo: Diversos tipos de aerógrafos.
• Caligrafia: Diversos tipos de canetas de caligrafia.
• Carvão: Diversas cores e tipos de lápis de carvão.
• Lápis-cera: Diversos tipos de lápis-cera.
• Tracejado: Diversos tipos de linhas tracejadas.
• Caneta Hidrográfica: Diversos tipos de canetas hidrográficas.
• Óleo: Diversos tipos de pincéis de tinta a óleo.
• Lápis: Diversos tipos de lápis.
• Aquarela: Diversos tipos de pincéis de aquarela.
• Aleatório: Diversos tipos de elementos cercando o objeto (confete, pêlos, pontos, quadrados, fio).
• Artificial: Diversos aspectos aplicados ao traçado do objeto com várias canetas (3D, Brilho 3D, Camaleão,
Borrifo Fluido, Contorno, Borrifo de Tinta, Creme Dental, Lixo Tóxico, Pintura Viscosa Alienígena).
4 Como criar efeitos © Adobe Systems Incorporated

Entrevista sobre Barra de Identificação

Nome do aluno: ________________________________________ Data: ____________________
Nome do aluno entrevistado: _______________________________________________________
Que ferramentas do Fireworks você utilizou para criar sua Barra de Identificação? (Liste-as abaixo.)
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Que efeitos você utilizou?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Descreva, passo a passo, como você criou sua barra de identificação?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Entrevista sobre Barra de Identificação 1

Revisão e reformulação da logomarca

Nome do aluno entrevistado: _______________________________________________________
Responda as questões em cada uma das seguintes categorias, que o auxiliarão a raciocinar acerca da
revisão e reformulação de sua logomarca.
• Satisfação das metas iniciais
• Requisição de novas metas
• Demonstração de bons princípios de design
• Mudanças de reformulação
Satisfação de metas iniciais

Quais eram as metas iniciais para a logomarca?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
A logomarca que você tem satisfaz as metas iniciais? Por quê?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Revisão e reformulação da logomarca 1

Requisição de novas metas

Você tem em mente novas metas para a logomarca? Em caso positivo, quais são e por quê?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Demonstração de bons princípios de design

Que conceitos e princípios de design você incorporou originalmente na logomarca?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Existem alguns novos princípios e conceitos de design que você queira incluir em sua logomarca? Em caso
positivo, quais e por quê?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Revisão e reformulação da logomarca © Adobe Systems Incorporated

Mudanças de reformulação
Que mudanças precisam ser feitas para satisfazer suas metas iniciais? Esboce ou desenhe as mudanças,
além de escrever sobre elas.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Que mudanças você precisa fazer para satisfazer os novos conceitos e princípios de design? Esboce ou
desenhe as mudanças, além de escrever sobre elas.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Como criar um banner

O propósito de um banner é estabelecer uma identidade coerente em todas as páginas de modo que os
usuários saibam que estão em uma página do seu website e reconheçam sobre o que é o website.
Criação de um banner
1. Inicie o Adobe Fireworks CS4.
2. Crie um novo arquivo com dimensões de no

mínimo 400 pixels de largura e 100 pixels de
altura. (Combine a largura do banner com a
Figura 1 Modelo de banner
largura em pixels da página que você está
criando.)
3. Ative as Guias, Réguas e Guias Inteligentes do

menu Visualizar de forma que você possa alinhar
os elementos do banner com mais facilidade.
4. Use a ferramenta Retângulo ou a ferramenta Figura 2 Efeitos de texto em um modelo de banner.

Elipse para criar um formato de fundo (tais como
quadrado ou oval) para o banner.
5. Adicione efeitos ao formato de fundo.
6. Adicione texto ao banner.

Figura 3 Efeitos de forma em um modelo de banner
7. Adicione efeitos ao texto, conforme queira
(Figura 1).
8. Adicione imagens ao seu banner, conforme

queira.
As ilustrações à direita mostram os efeitos

usados nos inspetores de Propriedades para o
texto (Figura 2) e a elipse de fundo (Figura 3)
no modelo de banner.
9. Salve o arquivo.
10. Exporte o arquivo como imagem GIF ou JPGE,

dependendo do nível de gradação de cor ou de
presença de elementos fotográficos no banner.
Utilize a Visualização Até 2 ou a Visualização
Até 4 para determinar quais as melhores opções
para exportar sua imagem.

Revisão e reformulação do banner

Nome do revisor: _______________________________________
Anotações do designer Avaliação do revisor

Quais eram suas metas iniciais para o banner? O banner satisfaz as metas iniciais? Por quê?
___________________________________________ ____________________________________________
__________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
Existem novos conceitos e/ou princípios de design
Quais princípios e conceitos de design você que poderiam ser incluídos ao banner? Em caso
incorporou ao banner? positivo, quais são eles e porque?
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
© Adobe Systems Incorporated Revisão e reformulação do banner 1

Anotações do designer Avaliação do revisor

Qual a contribuição de cada conceito de design na Os conceitos de design escolhidos contribuem para
comunicação do propósito do banner? a comunicação do propósito do banner? Porque?
___________________________________________ ____________________________________________
__________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
Você tem alguma nova meta em mente para o Como poderiam estas novas metas serem
banner? Em caso positivo, quais são e porque? incorporadas ao banner?
___________________________________________ ____________________________________________
___________________________________________ ___________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
___________________________________________ ____________________________________________
2 Revisão e reformulação do banner © Adobe Systems Incorporated

Reformulação do designer
Que mudanças precisam serem feitas para satisfazer suas metas iniciais? Por favor faça um esboço ou
desenhe as mudanças e também escreva sobre elas.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Que mudanças você precisa fazer para satisfazer os novos conceitos e princípios de design? Por favor faça
um esboço ou desenhe as mudanças e também escreva sobre elas.
____________________________________________________________________________________________
___________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Revisão e reformulação do banner 3

Que mudanças você precisa fazer para se utilizar dos conceitos de design para melhor comunicar o propósito
do banner?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Que mudanças você precisa fazer para satisfazer suas novas metas e requisitos? Por favor faça um esboço
ou desenhe as mudanças e também escreva sobre elas.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
4 Revisão e reformulação do banner © Adobe Systems Incorporated

Tópicos de apresentação de revisão e reformulação
Aqui estão algumas sugestões para a apresentação das reformulação.
• Como o seu design original se parecia?
o Mostre o arquivo original.
o Descreva as metas, conceitos de design e requisitos iniciais.
• Qual foi a avaliação do revisor?
o Que partes atenderam às intenções, metas e conceitos originais?
o Que partes atenderam às intenções, metas e conceitos originais?
• Que novas ideias foram propostas pelo revisor?
o O que é a reformulação?
o Mostre o novo banner.
© Adobe Systems Incorporated Tópicos de apresentação de revisão e reformulação 1

Adode Dreamweaver CS4 Apostila Exercício 2.1
Como configurar uma pasta raiz local a estrutura do site

A primeira coisa a fazer para criar um novo website com Adobe Dreamweaver CS4 é definir um site e
identificar uma pasta raiz onde você possa salvar todos os arquivos, imagens e outros elementos para as
páginas da web.
Configuração de uma pasta raiz local

1. Crie uma pasta no seu computador para servir
de pasta principal para o seu website. Dê à pasta
um nome que identifique o website.
Esta pasta é chamada a pasta raiz local.
Nota: Ao criar uma pasta raiz para um site em
seu computador, é altamente recomendado que
você a localize em um nível alto do seu disco
rígido. Por exemplo, C:\meu-site
(Windows) ou Macintosh HD: meu-site
(Mac OS).
2. Inicie o Dreamweaver.
3. Do menu, selecione Site> Gerenciar Sites. Figura 1 Caixa de diálogo Definição do Site (Básico)
A caixa de diálogo Gerenciar Sites se abre.
4. Clique Novo e selecione Site do menu pop-up
que aparece.
A caixa de diálogo Definição do Site se abre
(Figura 1). Certifique-se de que a aba Básico
está selecionada.
5. Apague o nome temporário, Site sem Nome 1.
Digite um novo nome para o site. Deixe o campo
para o URL em branco por enquanto (ou digite
o URL sugerido pelo seu professor).
Clique Avançar.
6. Certifique-se de que Não, Não Desejo Usar
Uma Tecnologia De Servidor está selecionado
e clique Avançar.
Figura 2 Caixa de diálogo Definição do Site
Página 2
© Adobe Systems Incorporated Como configurar uma pasta raiz local a estrutura do site 1
Apostila Exercício 2.1 Adode Dreamweaver CS4
7. Certifique-se de que Editar Cópias Locais Neste

Computador E Carregar No Servidor Quando
Terminar (Recomendável) está selecionado
(Figura 3).
8. Clique no ícone Pasta à direita de Em Que Local
Do Computador Você Deseja Armazenar Os
Arquivos?
A caixa de diálogo Escolha A Pasta Imagens
Locais Para o Site (Figura 4).
9. Localize selecione a pasta raiz que você criou
para o seu site. Clique Abrir e depois Selecionar
(Windows), ou clique Escolha (Mac OS).
10. Clique Avançar. Figura 3 Caixa de diálogo Definição do Site, página 3
11. Selecione Nenhum(a) em Como Você Se
Conecta Com O Servidor Remoto? Menu pop-
up (Figura 5). Clique Avançar.
Figura 4 caixa de diálogo Escolha A Pasta Imagens

Locais Para o Site
Figura 5 Caixa de diálogo Definição do Site, página 4
2 Como configurar uma pasta raiz local a estrutura do site © Adobe Systems Incorporated
Você é apresentado com um resumo de suas

configurações (Figura 6).
12. Clique Concluído.
A sua pasta raiz local está definida.
13. Clique Concluído na caixa de diálogo Gerenciar
Site.
Do lado direito da janela do Dreamweaver, o
painel Arquivos mostra as pastas e arquivos de
seu site (Figura 7) No Windows, o painel
Arquivos é uma dos painéis localizados à direita
da janela. Você pode deixar este painel aberto
enquanto trabalha. No Mac OS, o lado esquerdo
do painel Site mostra um mapa do site a medida
em que você o cria. Se o painel não estiver Figura 6 Caixa de diálogo Definição do Site,
encaixado, você pode optar por fechá-lo. página 6
Figura 7 Painel Arquivos
Modificação das informações do site

Você pode modificar as configurações do site a
qualquer momento.
1. Selecione Site > Gerenciar Sites no menu.
A caixa de diálogo Gerenciar Sites se abre
(Figura 8).
2. Selecione o nome do site e clique Editar.
A caixa de diálogo Definição do Site se abre.
3. Mude quaisquer das configurações originais
como desejar.
Figura 8 Caixa de diálogo Gerenciar Sites
© Adobe Systems Incorporated Como configurar uma pasta raiz local a estrutura do site 3
A interface Dreamweaver
Nome do aluno: __________________________________________ Data: __________________
As partes mais comumente usadas na interface do Adobe Dreamweaver CS4 são a janela Documento, a
barra Inserir, os painéis, e o inspetor de Propriedades. Na figura abaixo, rotule a janela Documento, a barra
Inserir, os painéis, e o inspetor de Propriedades.
© Adobe Systems Incorporated A interface Dreamweaver 1

A Barra inserir contém botões para inserção no documento (página da web) de vários tipos de objetos, tais
como imagens e tabelas. A barra Inserir contém várias categorias, tais como Comum e Layout.
A categoria Comum contém botões para inserção dos objetos mais comumente utilizados.
Identifique e descreva a função dos botões na categoria Comum da barra Inserir.
2 A interface Dreamweaver © Adobe Systems Incorporated

Identifique e descreva a função dos botões da categoria Layout da barra Inserir.

O inspetor de Propriedades permite que você visualize e altere uma variedade de propriedades do objeto
ou texto selecionado.
Descreva o inspetor de Propriedades.

A interface Dreamweaver
Você pode acessar as ferramentas, comandos e recursos do Adobe Dreamweaver CS4 usando os menus ou
selecionando opções de uma das barras Inserir, ou a partir dos painéis Dreamweaver. As partes mais
comumente usadas na interface do Adobe Dreamweaver CS4 são a janela Documento, a barra Inserir, os
painéis, e o inspetor de Propriedades.
A janela Documento exibe o documento aberto à medida que você o cria e edita. A barra Inserir contém
os botões para a criação e inserção de objetos tais como imagens, tabelas, camadas e molduras que deseje
acrescentar à suas páginas na web.
O inspetor de Propriedades exibe as propriedades do objeto ou texto selecionado e permite que você
modifique essas propriedades. A parte direita da janela, por definição, exibe painéis que você pode expandir
ou retrair conforme necessário.
Um dos painéis mais frequentemente usados é o painel Arquivos. Este painel exibe a organização de seu
site e permite que você abra arquivos para edição, que publique arquivos em um servidor, ou que delete
arquivos.
Outro painel frequentemente usado é o painel Ativos. Este painel fornece duas maneiras de visualização
dos ativos do site. Os ativos do site são os elementos usados em um site, tais como imagens, cores ou
animações.
O Dreamweaver permite que você trabalhe com uma variedade de visualizações. Faça o layout de uma
página graficamente usando a visualização Design; trabalhe diretamente com o código-fonte; divida a tela
em ambas as visualizações Código e Design; ou trabalhe no modo Código Ativo, que exibe uma representação
não editável de seu documento como seria visto em um navegador, à medida que o cria e edita. Alterne
visualizações usando os botões de visualização.
O painel de Ativos oferece duas formas de visualizar os ativos:
• A lista Site exibe todos os ativos em seu site.
• A lista Favoritos exibe somente os ativos que optou por incluir em sua lista de Favoritos.

A janela Documento e os painéis

Você pode acrescentar e manipular texto, imagens, menus, tabelas e outros elementos na janela Documento,
e ela exibirá uma representação aproximada de sua página na web.
Botões de visualização Inspetor de Propriedades

Barra Inserir
Janela
Painel Arquivos
Documento
Painel Ativos
Figura 1 Interface Dreamweaver

A barra Inserir
A barra Inserir contém botões para a inserção de vários tipos de objetos, tais como imagens e tabelas, no
documento.
A barra Inserir contém várias categorias, tais como Comum e Layout.
A categoria Comum na barra Inserir de página e outros dados do documento que são
descritos no tag head de uma página.
A categoria Comum da Barra Inserir (Figura 2)
contém botões para a inserção dos objetos mais Script: Insere ou remove script, tal como Javascript.
comumente usados.
Modelos: Crie um modelo com base no documento
Hyperlink: Insere link de hipertexto. aberto.
Link de e-mail: Insere um link para um endereço Seletor de tags: Insere um tag HTML.
de e-mail.
Âncora com nome: Insere um link para um local
específico em uma página.
Régua horizontal: Insere uma régua horizontal
para separar visualmente as seções de uma página.
Tabela: Insere uma tabela.
Inserir Tag Div: Insere um tag div usado na

diagramação da página.
Imagens: Insere uma imagem.
Mídia: Insere objetos de mídia, tais como Flash,

Shockwave, Applets, e ActiveX.
Data: Insere a data atual, com uma opção para
atualização automática quando você salvar o
documento.
Inclusão do Servidor: Use como lugar de

armazenamento de códigos comumente usados, que
podem ser reutilizados em várias páginas de seu
site. Quando você usa um arquivo SSI, o servidor
pega todo o conteúdo do arquivo armazenado no
servidor e o insere na página, substituindo o código
incluir.
Comentário: Insere um comentário, que não será

exibido em sua página da web.
Título: Insere palavras-chave, meta tags, descrições
Figura 2 Categoria Comum na Barra
Inserir

Categoria Layout na Barra Inserir

Na categoria Layout da Barra Inserir (Figura 3), você pode inserir tabelas e selecionar entre dois modos.
O modo Padrão exibe a tabela como uma grade de linhas. O modo Expandida acrescenta enchimento e
espaçamento à tabela e aumenta as bordas para facilitar a edição.
Inserir Tag Div: Insere um tag div para criar um bloco de conteúdo.
Desenhar Div AP: Insere um tag div absolutamente

posicionado para delimitar determinado conteúdo a
um local específico da página.
Barra de Menus do Spry: Insere um conjunto de

botões de navegação que exibem sub-menus quando
o visitante do site passa o cursor sobre um dos
botões.
Painéis com Abas do Spry: Insere abas em que o

visitante do site pode clicar para revelar conteúdo
oculto.
Menu Sanfonado do Spry: Insere um conjunto de

painéis retráteis que pode armazenar uma grande
quantidade de conteúdo em um espaço compacto.
Painel Flexível do Spry: Insere um painel que pode

ocultar ou revelar uma grande quantidade de
conteúdo quando o visitante do site clicar na aba do
painel.
Tabela: Insere uma tabela.
Inserir Linha Acima: Insere uma linha acima da

linha selecionada na tabela.
Inserir Linha Abaixo: Insere uma linha abaixo da

linha selecionada.
Inserir Coluna à Esquerda: Insere uma coluna à

esquerda da coluna selecionada na tabela.
Inserir Coluna à Direita: Insere uma coluna à direita

da coluna selecionada.
IFrame: Insere um bloco de conteúdo dentro do
qual o navegador exibe um documento HTML
separado.
Figura 3 Categoria Inserir na Barra Inserir
Molduras: Insere uma moldura.

O inspetor de Propriedades
No inspetor de Propriedades, você pode visualizar e alterar uma variedade de propriedades do objeto ou
texto selecionado.
Cada tipo de objeto tem diferentes propriedades. A Figura 4 mostra o inspetor de Propriedades para uma
tabela selecionada. Ele exibe as propriedades da coluna e das linhas, as cores das células, e as cores das
bordas. Você pode alterar o enchimento da célula (a quantidade de espaço entre o conteúdo da célula e suas
bordas) bem como o espaçamento das células (a quantidade de espaço entre as células da tabela). Quando
você selecionar texto, pode alterar a fonte, o tamanho, a cor e o alinhamento no inspetor de Propriedades.

Trabalhando com texto e imagem

Texto e imagens são os elementos básicos de quase todos os sites. Você acrescenta texto exatamente como
faria num programa de processamento de texto, e você acrescenta imagens inserindo-as a partir de um
arquivo existente. Organizar texto e imagens numa página da web requer conhecimento de folhas de estilo
em cascata (CSS) ou o uso de tabelas, ambos os quais serão cobertos em exercícios futuros.
Neste exercício, você cria uma página simples da web digitando texto, aplicando formatação básica de
parágrafo, e acrescentando uma imagem a uma página.
Acrescentar texto a um documento

Você adiciona texto usando o teclado ou colando de um outro documento. Você modifica o texto utilizando o
inspetor de Propriedades.
Para acrescentar texto:

2. Clique HTML para criar um novo documento
(Figura 1).
O ponto de inserção fica localizado no topo do
novo documento.
Nota: Em um documento existente, você pode
clicar para situar o ponto de inserção onde quer Figura 1 Crie novo documento HTML
que deseje que o novo texto comece.
3. Digite algum texto ou cole o texto copiado de
outro programa.
Certifique-se de que o inspetor de Propriedades
está aberto e que a opção HTML está
selecionada. No Windows, ele fica atracado na
parte inferior da tela. Se o inspetor de Figura 2 Opções de HTML no inspetor de
Propriedades não estiver aberto, selecione Propriedades
Janela > Propriedades.
Assim que começa a digitar, não há nenhuma
formatação de parágrafo aplicada ao texto,
como indica a palavra Nenhum no menu
Formatação do inspetor de Propriedades
(Figura 2).
4. Pressione Enter (Windows) ou Return (Mac OS)
para começar uma nova linha de texto. Figura 3 Formatação de parágrafo
Dreamweaver aplica o estilo padrão de
parágrafo ao seu texto, como indicado no
inspetor de Propriedades (Figura 3).

Para aplicar formatação básica de HTML nos parágrafos e texto:
Para aplicar formatação simples, tal como negrito ou itálico, ou para vincular texto para outra página da web,
você pode usar as opções de HTML do inspetor de Propriedades.
1. Clique para posicionar o ponto de inserção em Nota: Você vai aprender como aplicar
qualquer lugar da linha de texto que acrescentou formatações de textos adicionais, tais como
à página. tamanho e cor, em exercício posterior.
2. No inspetor de Propriedades, selecione
Negrito
Cabeçalho 1 no meu Formato. Lista não ordenada
O parágrafo inteiro é formatado de acordo com Itálico Lista ordenada

estilo padrão de formatação de parágrafo Recuo à direita
Cabeçalho 1.
Recuo à esquerda
3. Clique duas vezes em uma palavra individual
para selecioná-la, ou arraste o cursos para
selecionar várias palavras.
4. No inspetor de Propriedades, clique no botão
Itálico (Figura 4).
O texto selecionado agora está em itálico. Figura 4 Propriedades de parágrafo/texto HTML
Vinculação de texto a outras páginas, sites e endereços de e-mail

Utilizando as opções de HTML no inspetor de Propriedades, você pode vincular texto a outros documentos
dentro de seu site ou outros sites. Você também pode criar um link de e-mail. Quando um usuário clica em um
link de e-mail, uma nova mensagem de email se abre no programa padrão de e-mail do usuário.
A mensagem é endereçada automaticamente ao endereço de e-mail que você especificar.
Como este é um novo site com somente uma página, você vai criar um link de e-mail.
Para vincular texto a um endereço de e-mail:

1. Selecione o texto que quiser que represente o
link.
2. No inspetor de Propriedades, clique
na caixa Link e digite mailto:
meuendereco@domain.com (ou .net, .org,
etc.) (Figura 5), e pressione Enter (Windows)
ou Return (Mac OS). Figura 5 Link de e-mail
O texto selecionado é então formatado como
um link, como indicado pelo sublinhado azul
padrão (Figura 6).
Nota: Para vincular texto a um outro documento,
digite o caminho do documento na caixa Link.
Você vai aprender mais sobre a criação de links
em exercício posterior. Figura 6 Texto vinculado

Acréscimo de imagens
Você pode inserir qualquer imagem em uma página da web, contanto que seja acessível ao Dreamweaver e
em formato compatível com a web. A maioria das imagens nas páginas da web são GIFs ou JPEGs.
Para acrescentar uma imagem:

1. Abra um documento no Dreamweaver .
2. Certifique-se de que o documento está salvo na
pasta local de seu site.
3. Posicione o ponto de inserção onde você deseja
acrescentar uma imagem.
4. Selecione Inserir > Imagem.
A caixa de diálogo Selecionar Origem da
Imagem se abre (Figura 7).
5. Procure a pasta com a imagem desejada.
6. Selecione a imagem desejada.
Uma visualização da imagem aparece no lado
direito da caixa de diálogo. Figura 7 Caixa de diálogo Selecionar Origem da
7. Clique OK (Windows) ou Escolher (Mac OS). Imagem
Se a imagem não estiver na pasta de seu site, o
Dreamweaver pergunta se você deseja salvar
uma cópia do arquivo ali (Figura 8). Se a
imagem já estiver armazenada em seu site, você
pode pular as etapas 8 e 9.
8. Clique Sim.
A caixa de diálogo Copiar Arquivo Como se abre.
O padrão é copiar a imagem para o pasta raiz
de seu site. Você pode armazenar a imagem na
Figura 8 Mensagem de advertência Arquivo fora
pasta raiz, ou salvá-la em uma sub-pasta de seu
da pasta raiz
site.
9. Procure a pasta em seu site onde deseja
armazenar a imagem, e clique em Salvar.
A caixa de diálogo Atributos de Acesso a Tag
de Imagem se abre (Figura 9). Esta caixa de
diálogo permite que você acrescente uma
descrição à imagem de forma que os leitores de
tela possam interpretá-la.
10. Digite uma breve descrição. Você também pode
fornecer um link para um arquivo com uma Figura 9 Caixa de diálogo Atributos de Acesso a
descrição mais extensa. Tag de Imagem
11. Clique em OK.
A imagem é acrescentada ao documento.

Redimensionamento de imagens
Você pode redimensionar uma imagem clicando nela e arrastando a seleção pelas bordas.
Nota: Mudar a largura ou altura de sua imagem no Dreamweaver pode reduzir a qualidade da imagem. É
mais recomendável redimensionar uma imagem em um programa de edição de imagens tal como o Adobe
Fireworks CS4 antes de a importar para o Dreamweaver.
Para redimensionar uma imagem no Dreamweaver:

1. Selecione a imagem.
Alças de redimensionamento aparecem nos cantos direito e inferior da imagem (Figura 10).
2. Escolha uma das seguinte opções.
• Para redimensionar a imagem horizontalmente, arraste as alças à direita da seleção.
• Para redimensionar a imagem verticalmente, arrastes as alças na parte inferior da seleção.
• Para redimensionar em ambas as direções ao mesmo tempo, arraste a alça de redimensionamento no
canto direito inferior. Para manter a proporção relativa de altura e imagem, mantenha a tecla Shift
pressionada enquanto arrasta.
Alças de redimensionamento
Figura 10 Imagem com alças de redimensionamento

A barra Inserir do Dreamweaver

Nome do aluno: _____________________________________________ Data:________________
No Adobe Dreamweaver CS4, a barra Inserir contém botões para inserção de vários tipos de objetos, tais
como imagens e formas, em um documento (página da web). A barra Inserir contém várias categorias, tais
como Comum e Layout.
Identifique e descreva os botões na categoria Comum da barra Inserir.
© Adobe Systems Incorporated A barra Inserir do Dreamweaver 1

Identifique e descreva os botões da categoria Layout da barra Inserir.
2 A barra Inserir do Dreamweaver © Adobe Systems Incorporated

Descreva o conteúdo das outras categorias da barra Inserir.
Categoria Formas: _______________________________________________________________
____________________________________________________________________________________________
Categoria Dados: ________________________________________________________________
____________________________________________________________________________________________
Categoria Spry: _________________________________________________________________
____________________________________________________________________________________________
Categoria InContext Editing: ________________________________________________________
____________________________________________________________________________________________
Categoria Texto: ________________________________________________________________
____________________________________________________________________________________________
Categoria Favoritos: _____________________________________________________________
____________________________________________________________________________________________
Na barra Inserir abaixo, indique onde você pode alternar entre as categorias:
© Adobe Systems Incorporated A barra Inserir do Dreamweaver 3

A barra Inserir do Adobe Dreamweaver

No Adobe Dreamweaver CS4, a barra Inserir contém botões para inserção de vários tipos de objetos, tais
como imagens e formas, em uma página da web.
Você pode usar a barra Inserir para criar ou inserir conteúdo em oito categorias:
• A categoria Comum contém botões para inserção dos objetos mais comumente usados, tais como links,
imagens e tabelas.
• A categoria Layout oferece opções de inserção de tabelas, tags div, camadas e molduras. Você pode
visualizar as tabelas no modo Padrão ou no (padrão) e no modo Expandida.
• A categoria Forma contém botões para a criação de formas e a inserção de elementos de forma.
• A categoria Dados permite que você insira elementos dinâmicos tais como conjuntos de registros, regiões
repetitivas e formulários de inserção e atualização de registros.
• A categoria Spry permite que você insira “widgets” que exibam dados de outros arquivos e vários
elementos de interface (tais como barras de navegação e menus) que usam JavaScript e CSS. (Widgets
Spry não são tratados neste estudo, mas você pode descobrir mais sobre eles na Ajuda do Dreamweaver
(selecione Ajuda > Ajuda Dreamweaver e procure a seção denominada “Criação visual de páginas do
Spry.”)
• A categoria InContext Editing é usada para permitir usuário final a fazerem edições simples a suas
páginas da web ages sem a sua ajuda ou de programas adicionais em seus computadores. Adobe InContext
Editing (ICE) é um serviço hospedado online que oferece ferramentas de edição simples de conteúdo
dentro do navegador de internet.
• A categoria Texto é usada para trabalhar na visualização Código e permite que você insira uma variedade
de tags de texto e listas, tais como b, em, p, h1, e ul.
• Use a categoria Favoritos para personalizar uma lista de botões da barra Inserir, para acesso rápido.
Você pode personalizar esta categoria clicando com o botão direito (Windows) ou pressionando a tecla
Control e clicando (Mac OS) na barra Inserir.
O menu da barra Inserir

Você alterna entre estas categorias usando a o menu da barra Inserir, localizada na parte superior da barra
Inserir (Figura 1).
Figura 1 menu da barra Inserir
© Adobe Systems Incorporated A barra Inserir do Adobe Dreamweaver 1

Análise de sites
Nome: _________________________________________________ Data: __________________
URL: __________________________________________________________
Nome do Site: ____________________________________________________
Categoria: _______________________________________________________
Layout Visual
Descreva os elementos visuais na página inicial. O que chamou sua atenção primeiro?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Como o design gráfico (equilíbrio, ênfase, cor, tom, hierarquia visual etc.) comunica o conteúdo?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Se houver imagens na página, elas acrescentam ao valor do conteúdo, ou servem como decoração e atrativo?
Se acrescentarem ao conteúdo, descreva como.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Análise de sites 1

Com que velocidade a página carregou? Valeu a espera?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
O layout do texto ajuda os usuários a entender os principais pontos do conteúdo do site? O layout e estilo do
texto seguem uma hierarquia visual adequada? Nesse caso, como a hierarquia visual ajuda o usuário a
entender o conteúdo?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Estruturas de coerência
Há elementos repetidos em páginas subsequentes? Os elementos são decorativos ou parte da navegação?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
A repetição ajuda ou atrapalha a intenção geral do site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Análise de sites © Adobe Systems Incorporated

A localização do esquema de navegação é coerente?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
O uso de cores é coerente?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
O uso de fontes e tamanhos de fonte é coerente? De que formas os estilos de texto variam?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Esquema de cores
O esquema de cores acrescenta à intenção ou tom do site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

O esquema de cores ajuda ou atrapalha na transmissão do propósito do site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Viés do conteúdo
Dá para perceber por que o site foi criado? Há uma organização associada ao site, e nesse caso, que tipo de
organização?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Está claro que partes do conteúdo do site são fato e quais são opinião?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Há algum viés na informação apresentada? Existe algum propósito oculto?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Atualidade do conteúdo
Quando a informação foi primeiramente publicada na página?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Quando foi revisada pela última vez?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Há alguma outra indicação de que esta informação é atual? Qual é a qualidade dos links relacionados?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Fontes de conteúdo
Quem responde pelo site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Que qualificações ou experiência tem o autor para escrever sobre o assunto deste site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Há uma maneira de verificar a legitimidade do autor, tal como um endereço de e-mail, número de telefone ou
endereço para correspondência?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Quem financia o site? O site foi indicado ou ganhou algum prêmio?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Outras fontes são citadas neste site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Qual é a extensão de domínio deste site? O que esta extensão comunica sobre o site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Corroboração de Conteúdo
Que outros sites contêm informação sobre este assunto?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
A informação é a mesma?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
As fontes são válidas?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Compreensão das Folhas de Estilo em Cascata

(Cascading Style Sheets, CSS)
Antes de aprender sobre o CSS, você deveria ter uma noção básica de HTML, a linguagem de programação
usada para criar páginas da web.
A estrutura e aparência de uma página da web é controlada por seu código-fonte. A linguagem predominante
usada para redigir este código para páginas da web é a Linguagem de Marcação Hipertexto, HTML.
Se você visualizar o código da maioria das páginas da web, você vai ver que linha após linha de texto normal
é cercada de pequenos comandos, os chamados tags de HTML. Estes tags são digitados entre parênteses
angulares (sinais de maior e menor) antes e depois de blocos de texto, dizendo ao navegador como exibir e
interagir com a informação de uma página da web. A Figura 1 mostra dois tags de HTML que dizem ao
navegador da web quando o parágrafo começa e quando acaba. Você vai aprender mais sobre os tags de
HTML em um exercício posterior.
Tag de começo de parágrafo Tag de fim de parágrafo
<p>Isto é um parágrafo de texto.</p>
Figura 1 Exemplo de tag de HTML
Quando você cria uma página da web usando a visualização Design do Dreamweaver, o código HTML é
gerado automaticamente.
Embora o HTML inclua tags para apresentação de texto, imagens, tabelas e outros elementos, também tem
suas limitações quanto à diagramação e formatação precisa de páginas – uma frustração para muitos
designers. As folhas de estilo em cascata (CSS) são a resposta a esse problema. O CSS oferece grande
controle sobre o layout e design de páginas da web. Usando CSS, você pode formatar texto, acrescentar
margens, criar colunas, acrescentar bordas a imagens, controlar a aparência e comportamento de links, e
muito mais.
Se você já trabalhou com estilos em outros programas, tais como um processador de texto, você já estará
familiarizado com a função básica do CSS. No CSS, um estilo é simplesmente uma regra que descreve
como formatar o conteúdo de uma página da web. Uma folha de estilo CSS é uma coleção destas regras.
Uma vez que você crie uma regra CSS e a aplique a textos ou imagens, quaisquer mudanças no estilo se
refletem em seus documentos automaticamente. Isso pode representar uma enorme economia de tempo,
além de garantir coerência em todo o site.
© Adobe Systems Incorporated Compreensão das Folhas de Estilo em Cascata (CSS) 1

Criação de novo CSS

A maneira mais básica de se criar CSS no Dreamweaver é aplicando formatação por meio do inspetor de
Propriedades. Quando você faz isso, você é solicitado a criar uma nova regra CSS. Você precisa nomear a
nova regra e definir o tipo de CSS.
Existem três tipos principais de CSS:
Estilo Classe: Semelhante aos estilos que você usa em programas de processamento de texto e diagramação.
Por exemplo, você pode desejar formatar todo o corpo do texto em Arial 10pt, em cor verde escura. Você
pode criar um estilo Classe com estes atributos e então aplicar este estilo a todo o corpo do texto de seu site.
Estilo Tag: Aplica formatação global a tags individuais de HTML, ao invés de seleções individuais. Suponha
que você queira modificar o estilo de parágrafo do Cabeçalho 1 de forma que apareça sempre com o texto
em roxo. Ao invés de criar um estilo Classe e aplicá-lo em todos os cabeçalhos do documento, você pode
criar um estilo de tag de HTML com estes atributo e aplicá-lo ao tag Cabeçalho 1 <h1>. Efetivamente, você
estará redefinindo o tag de HTML.
Estilo ID: Um identificador (ID) único para um estilo aplicado em cabeçalhos, banners, menus e outros
elementos presentes em apenas um local do documento. Usado uma vez dentro do documento ou página.
Nesta apostila, você usará o inspetor de Propriedades para criar um uma regra de CSS estilo Classe para
formatar um bloco de texto.
Para criar uma nova regra CSS para Classe no inspetor de Propriedades:
1. Inicie o Dreamweaver e abra um novo

documento HTML.
2. Acrescente duas linhas de texto breve ao
documento.
Para fazer isso, digite a linha te texto, pressione Figura 2 inspetor de Propriedades
Enter (Windows) ou
Return (Mac OS) e digite uma segunda linha de
texto.
3. Clique para situar um ponto de inserção em
qualquer lugar da primeira linha de texto. (Não
selecione o texto).
4. No inspetor de Propriedades, clique CSS para
alternar para as opções de formatação CSS
(Figura 2).
5. Abra o menu Fonte do inspetor de Propriedades
(Figura 3), e selecione um grupo de fontes.
Figura 3 menu Fonte do inspetor de Propriedades
2 Compreensão das Folhas de Estilo em Cascata (CSS) © Adobe Systems Incorporated

A caixa de diálogo Nova Regra CSS aparece

(Figura 4).
Nota: É recomendável atribuir uma combinação
de fontes ao invés de uma única fonte. Isto
garante que a maior parte dos visitantes da
página consigam ver a página da mesma forma.
Os navegadores usam a primeira fonte da lista
que estiver instalada no sistema do visitante. Se
nenhuma das fontes da lista estiver instalada, o
navegador exibe o texto de acordo com as
preferências padrão do navegador do visitante.
Abra o menu Tipo de Seletor, e selecione Classe
(Pode ser aplicada a qualquer elemento HTML) Figura 4 Caixa de diálogo Nova Regra CSS
(Figura 5).
6. FALTOU!!!!!
7. Clique na caixa Nome do Seletor e digite
.meuestilo (Figura 6).
Nota: Regras CSS devem começar com um
ponto e não podem conter espaços ou
caracteres especiais.
8. Abra o menu Definição de Regra e selecione Figura 5 Menu Tipo de Seletor
(Apenas Este Documento) (Figura 7).
Isto diz ao Dreamweaver para criar e armazenar
a folha de estilos CSS somente no documento
aberto. O novo estilo não estará disponível para
outros documentos.
Para criar CSS para o site inteiro, você teria
que selecionar (Novo arquivo de folha de estilos).
Isto será discutido em outro exercício.
Figura 6 Nome do Seletor
9. Clique em OK.
A nova fonte é aplicada ao primeiro parágrafo.
O nome do estilo aparece na caixa Regra-alvo
do inspetor de Propriedades.
Nota: Como você não selecionou nenhuma
palavra ou caractere específico, você pode
continuar a definir esta regra, aplicando
formatação adicional. Figura 7 Definição da Regra
© Adobe Systems Incorporated Compreensão das Folhas de Estilo em Cascata (CSS) 3

10. No inspetor de Propriedades, mude o tamanho

para 18.
11. Clique na caixa Cor do e selecione uma nova
cor para o texto. Figura 8 Regra-alvo no inspetor de Propriedades
O inspetor de Propriedades exibe a regra-alvo
(.meuestilo) e sua formatação (Figura 8). A
regra-alvo é aplicada ao primeiro parágrafo
(Figura 9).
Você pode usar esta regra CSS para formatar
textos adicionais no documento.
Figura 9 Texto formatado
Aplicação de estilos CSS

Após criar a regra CSS, você pode usá-la para dar ao seu documento ou site inteiros um aspecto coerente.
Você pode aplicar uma regra CSS para textos usando o inspetor de Propriedades.
Para aplicar uma regra CSS:

1. Clique em qualquer lugar do segundo parágrafo.
Nota: Para formatar uma palavra ou caractere

individual, selecione o texto arrastando o cursor.
2. No inspetor de Propriedades, abra o menu

Regra-alvo selecione a regra CSS para Classe
que você acabou de criar (Figura 10).
O novo estilo é aplicado ao segundo parágrafo Figura 10 Menu Regra-alvo

(Figura 11).
Nota: Se você editar o estilo CSS, ambos os

parágrafos vão ser atualizados automaticamente
e coerentemente. Você vai aprender mais sobre
a criação e modificação de CSS em exercício
posterior.
Figura 11 Estilo CSS aplicado a ambos os

parágrafos
4 Compreensão das Folhas de Estilo em Cascata (CSS) © Adobe Systems Incorporated

Painel Estilos CSS

Use o painel Estilos CSS para criar, visualizar, aplicar ou editar estilos CSS para elementos de uma página
da web. No modo Tudo, o painel tem dois painéis: Todas as Regras e Propriedades.
Selecione um estilo para aplicar ao texto Desvincular folha de estilos CSS / Excluir regra
selecionado em seu documento ou para CSS: Desvincule a folha de estilos selecionada do
examinar e editar as regras deste estilo. documento ou remova uma regra de uma folha de
estilos. Quando você desvincula folhas de estilo e
exclui regras, toda a formatação associada com a
folha de estilo ou regra é removida.
Mostrar visualização de
categoria: Visualize as
propriedades de uma regra de
estilos por categoria de
propriedades.
Editar folha de estilos /

Editar regra: Faça
mudanças na folha de
estilos selecionada
vinculada ao documento ou
Mostrar visualização de lista: ao estilo selecionado.
Visualize uma lista alfabética
de propriedades possíveis e
aquelas que compõem a regra Nova regra CSS: Crie uma
de estilos selecionada. nova regra de estilo.
Mostrar somente propriedades definidas:

Visualize uma lista das propriedades que Anexe folha de estilos: Anexe uma folha de
compõem a regra de estilos selecionada. estilos externa ao documento aberto.
© Adobe Systems Incorporated Painel Estilos CSS 1

No modo Atual, o painel tem três painéis: Resumo para Seleção, Sobre, e Propriedades.
O painel Propriedades permite que você

edite as propriedades da regra e adicione
novas propriedades.
O painel Sobre exibe a localização da

propriedade selecionada.
O painel Resumo para Seleção exibe as

propriedades CSS da seleção atual no
documento.
2 Painel Estilos CSS © Adobe Systems Incorporated

O painel Estilos CSS

Use o painel Estilos CSS para criar, visualizar, aplicar ou editar estilos CSS para elementos de uma página da
web. No modo Tudo, o painel tem dois painéis: Todas as Regras e Propriedades. Use o painel Todas as
Regras para aplicar estilos ao seu documento e o painel Propriedades para editar as propriedades existentes
e acrescentar novas propriedades ao estilo selecionado.
Rotule as opções disponíveis para a criação e edição de folhas de estilo em cascata (CSS).
© Adobe Systems Incorporated O painel Estilos CSS 1

Lista de arquivos Design Digital
Você pode ter alguns ou todos os documentos abaixo:
• Documento de texto com imagens da web (Unidade 1)

• Imagens pesquisadas na internet (Unidade 1)
• Imagens escaneadas (originais)
• Documento de texto com anotações sobre as imagens escaneadas (Unidade 1)
• Fotos de câmera digital (Unidade 1)
• Documento de texto com anotações e fotografias (Unidade 1)
• Imagens GIF e JPEG otimizadas (Unidade 1)
• Barra de identificação (Unidade 1)
• Questionário sobre Barra de Identificação (Unidade 1)
• Storyboard de logomarca (Unidade 1)
• Logomarca (Unidade 1)
• Logomarca reformulada (Unidade 1)
• Storyboard de banner (Unidade 1)
• Banner (Unidade 1)
• Banner reformulado (Unidade 1)
• Planejamento de testes técnicos (Unidade 2)
• Resultados de testes técnicos (Unidade 2)
• Planejamento de testes de usabilidade (Unidade 2)
• Resultados de testes de usabilidade (Unidade 2)
Outros arquivos criados por sua turma:
© Adobe Systems Incorporated Lista de arquivos Design Digital 1

Portfólio do aluno
O conteúdo e propósito de um portfólio pode variar muito. O portfólio do aluno normalmente contém exemplos
de trabalho bem como descrições textuais e reflexões sobre cada peça. Três tipos de portfólios web exibem
trabalho, documentam o progresso de um projeto, ou realçam o aprimoramento da técnica. Seguem abaixo
exemplos destes três tipos.
Portfólio de apresentação
Um portfólio de apresentação realça a experiência de seu dono, exibindo os melhores exemplos de seu
trabalho. Uma apresentação de um aluno deve também fornecer uma reflexão sobre as peças ou informações
sobre o processo seguido para criá-la. Abaixo, segue um modelo desta categoria com arquivos associados:
Trabalho de imagens
• Fotos em câmera digital

• Imagens otimizadas
trabalho de design
• Logomarca
• Banner
Site de cliente (a se completar posteriormente)
© Adobe Systems Incorporated Portfólio do aluno 1

Este é um exemplo de organograma para um portfólio de apresentação:
Página
inicial
Site de cliente
(a se com-
Trabalho de Trabalho de
pletar
imagens design
posterior-
mente)
Imagens
Logomarca Banner
otimizadas
2 Portfólio do aluno © Adobe Systems Incorporated

Portfólio de aprimoramento da técnica

Um portfólio de aprimoramento da técnica exibe vários exemplos do trabalho executado em um mesmo
projeto, para demonstrar a melhoria da técnica. Por exemplo, o aluno inclui várias versões de seus banners
para mostrar como o design evoluiu. Este portfólio pode também incluir uma reflexão e discussão sobre as
reformulações. Abaixo, segue um exemplo desta categoria com arquivos associados:
Trabalho de design
Logomarca
• Logomarca (primeira versão)
• Logomarca (versão final)
• Logomarca (auto-crítica)
Banner
• Banner (primeira versão)
• Banner (versão final)
• Banner (crítica dos colegas)
Objeto de imagem interativo (a se completar posteriormente)
Site de cliente (a se completar posteriormente)
• Site de cliente (primeiras versões)
• Site de cliente (versão final)
• Site de cliente (reflexões)

Este é um modelo de organograma para um portfólio de aprimoramento da técnica:
Página
Inicial
Site de cliente
Design (a se completar
posteriormente)
Primeira Versão
Logomarca Banner Reflexões
versão Final
Primeira Versão Auto- Primeira Versão Crítica dos

versão final crítica versão final colegas
4 Portfólio do aluno © Adobe Systems Incorporated

Portfólio de progresso de projeto

Um portfólio de progresso de projeto contém uma seleção mais completa do trabalho executado em um
projeto em particular. O portfólio reflete uma gama do trabalho desenvolvido – exibindo os estágios, das
primeiras etapas à conclusão. Um exemplo seria mostra todo o trabalho desenvolvido pelos alunos enquanto
aprendiam sobre o Adobe Fireworks CS4. O portfólio incluiria wireframes e storyboards, primeiras versões,
versions finais, críticas de colegas, e auto-críticas. Para este tipo de portfólio, os alunos precisarão escanear
planilhas e outros documentos escritos à mão para criar versões para a web.

Como planejar um portfólio

Planejar um site usando arquitetura da informação é uma prática comum entre designers profissionais. Os
designers criam um organograma que mostra todas as páginas do site e como elas se conectam. O organograma
pode também descrever a intenção e audiência de um site, além de fornecer listas organizadas do conteúdo.
Crie um organograma para seu portfólio que mostre a organização e conteúdo de seu trabalho neste curso.
Inclua o seguinte:
1. Descreva o propósito do portfólio.
2. Inclua uma lista dos ativos do portfólio, organizando arquivos e projetos em categorias.
3. Com base nas categorias esboçadas na etapa 2, desenhe um organograma para seu portfólio web.
© Adobe Systems Incorporated Como planejar um portfólio 1

Convenções de nomenclatura
Como nomear os seus arquivos é um fator importante. Bons nomes para pastas facilita o desenvolvimento
de seu site (especialmente quando você trabalha com outras pessoas). Eles também ajudam os visitantes do
site a encontrarem os seus arquivos. Se estiver trabalhando com outras pessoas, é aconselhável discutir com
eles como vocês vão nomear os arquivos.
As dicas a seguir se aplicam a todos os arquivos usados na web – arquivos HTML, arquivos de imagem,
animações Flash etc.
Dica Motivo Exemplo
Dê aos arquivos nomes Como você não pode colocar dois arquivos botão_feedback.gif
particulares e significativos com o mesmo nome em uma mesma pasta, ao invés de botão3.gif
todos os nomes de arquivo devem ser
diferentes. Use nomes de arquivo que mascote-turma.jpg
ao invés de toto.jpg
indiquem o seu conteúdo.
Use nomes de pasta As pastas organizam o conteúdo. Se seus imagens

significativos nomes não forem significativos, elas serão ao invés de pasta_2
menos úteis.
Use letras minúsculas ao O uso de uma mistura de letras minúsculas e pagina_inicial.htm

invés de maiúsculas. maiúsculas aumenta a probabilidade de links ao invés de
quebrados, já que alguns navegadores Pagina_Inicial.htm
diferenciam entre caixa baixa e alta.
Use extensões (.htm, .gif, O uso de uma mistura de extensões também indice.htm e
.jpg) coerentemente. Apesar aumenta a probabilidade de links quebrados. instrucoes.htm
de você poder usar tanto .htm ao invés de indice.html e
como .html, você deve ser instrucoes.htm
coerente na escolha de um ou
de outro .
Se estiver trabalhando em um Ao contrário do Windows o Macintosh não indice.htm ao invés de

computador Macintosh, pede as extensões dos arquivos. Os indice
sempre inclua a extensão do navegadores precisam dessas extensões para
arquivo exibir os arquivos.
© Adobe Systems Incorporated Convenções de nomenclatura 1

Dica Motivo Exemplo
Use uma hífen (-) ou um Alguns navegadores não reconhecem meus2amigos.gif ao invés
caractere de sublinhado ( _ ) espaços, ou os convertem em outros de eu&amigos.gif
ao invés de espaço. caracteres.
Use letras e números Muitos símbolos especiais não são meus2amigos.gif ao invés
reconhecidos por navegadores, ou têm de eu&amigos.gif
significados especiais para navegadores.
Mantenha os nomes de Isso não só ajuda a evitar links quebrados caminho_do_parque.htm

arquivo o mais curtos como alguns navegadores cortam nomes ao invés de
possível com mais de 26 caracteres. caminho_para_quarta_ru
a_do_parque_mais_um_
mapa.htm
2 Convenções de nomenclatura © Adobe Systems Incorporated

Pastas de gerenciamento de arquivos

Nome: _________________________________________________ Data: __________________
Dobre aqui
© Adobe Systems Incorporated Pastas de gerenciamento de arquivos 1

Gerenciamento de arquivos
Nome: _________________________________________________ Data: __________________
Parte I
À medida que cria uma estratégia de gerenciamento de arquivos, descreva o método usado respondendo às
seguintes perguntas:
Perguntas Anotações sobre o gerenciamento de arquivos

Como está categorizando os arquivos?
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
Como a organização de seus arquivos o ajuda a

encontrar arquivos específicos?
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
É fácil entender os nomes de seus arquivos e pastas?
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
© Adobe Systems Incorporated Gerenciamento de arquivos 1

Parte II
Escreva o nome do arquivo que você está procurando, seu conteúdo, e a localização em que o encontrou.
Depois responda às perguntas a seguir.
Exemplo:
Nome do arquivo: cenoura.gif
Conteúdo do arquivo: ciências
Localização do arquivo: joao_silva/ciencias/imagens/cenoura.gif
Nome do arquivo: _______________________ Nome do arquivo: _______________________
Conteúdo do arquivo:_____________________ Conteúdo do arquivo:_____________________
Localização do arquivo: ___________________ Localização do arquivo: ___________________
Foi difícil encontrar este arquivo? Por quê, ou por Foi difícil encontrar este arquivo? Por quê, ou por
quê não? quê não?
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
O arquivo foi encontrado na pasta que você O arquivo foi encontrado na pasta que você
esperava? Caso contrário, onde esperava localizar esperava? Caso contrário, onde esperava localizar
o arquivo? o arquivo?
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
___________________________________________ ___________________________________________
Os nomes das pastas e arquivos fizeram sentido Os nomes das pastas e arquivos fizeram sentido
para você? Por quê, ou por quê não? para você? Por quê, ou por quê não?
____________________________________________ ____________________________________________
____________________________________________ ____________________________________________
____________________________________________ ____________________________________________
____________________________________________ ____________________________________________
2 Gerenciamento de arquivos © Adobe Systems Incorporated

Planejamento de uma página inicial

O wireframe da página inicial inclui um layout do design (objetos de imagem, textos e esquema de navegação
do site) para facilitar a criação da página inicial. Use as seguintes diretrizes para ajudá-lo a criar o wireframe
para sua página inicial usando o Adobe Fireworks.
Objetos de imagem
Desenhe retângulos na página para indicar o tamanho e localização dos objetos de imagem. Rotule estes
retângulos com os nomes de arquivo dos objetos que representam.
• Quais objetos de imagem serão incluídos em sua página inicial?
• Onde você vai situar os objetos na página?
Textos
Desenhe retângulos na página, para indicar a localização dos textos. Rotule estes retângulos com uma
descrição do conteúdo.
• Quais textos serão incluídos em sua página inicial?
• Onde você vai situar os textos na página?
Navegação
Desenhe um retângulo para indicar a localização dos links para outras páginas. Rotule este retângulo com os
nomes das outras páginas. (você vai desenvolver botões gráficos para estes links em etapa posterior deste
curso).
• De acordo com seu organograma, a página inicial contém links diretos para quais páginas (quais são os
itens do menu)?
• Onde você vai situar estes links em sua página inicial?
Cor
Preencha o plano de fundo do wireframe com a cor desejada e crie de modelos de texto que mostrem as
diferentes cores de texto que pretende utilizar em sua página inicial.
© Adobe Systems Incorporated Planejamento de uma página inicial 1

Como diagramar uma página da web com CSS

Você pode usar ferramentas de construção de tabelas do Adobe Dreamweaver CS4 para criar um layout
simples de página. Contudo, uma técnica mais poderosa será utilizar as folhas de estilo em cascada (CSS).
A peça fundamental da diagramação em CSS é o tag div — um tag de HTML que, na maioria dos casos,
funciona como um delimitador retangular para textos, imagens e outros elementos da página. Quando você
cria um layout em CSS, você coloca tags div (ou divs) na página, acrescenta conteúdo a eles, e os posiciona
em vários lugares. Ao contrário das células de uma tabela, que são restritas a existir em algum lugar dentro
das linhas e colunas da tabela, divs podem aparecer em qualquer lugar de uma página da web. Você pode
posicionar divs absolutamente (especificando coordenadas x- e y-), ou relativamente (especificando sua
distância de outros elementos da página).
No Dreamweaver, você pode posicionar um div AP (abreviação de tag divs absolutamente posicionados)
rápida e facilmente. Estes elementos possibilitam um grande controle sobre o layout da página, reduzem a
quantidade de código necessário, e permitem que você formate blocos de layout com margens, bordas e
cores. Além disso, pessoas que utilizem leitores de tela para visualizar páginas da web têm muito mais
facilidade para navegar por páginas construídas com CSS, já que o código é mais simples e curto. A limitação
do div AP, contudo, é que, já que está absolutamente posicionado, sua posição nuca se ajusta à página para
se adaptar ao tamanho da janela do navegador.
Você vai aprender mais sobre o CSS em unidades posteriores.
© Adobe Systems Incorporated Como diagramar uma página da web com CSS 1
Criação de uma nova página Menu do site

2. Certifique-se de que o painel Arquivos esteja

visível (Figura 1).
No Windows, ele fica atracado na parte direita
da tela.
Se o painel Arquivos não estiver aberto,
selecione Janela > Arquivos.
3. Certifique-se de que o site de seu portfólio esteja

selecionado. Se não estiver, clique no menu pop-
up Site e selecione o site de seu portfólio. Figura 1 Painel Arquivos
4. Selecione Arquivo > Novo.

A caixa de diálogo Novo Documento se abre
(Figura 2).
5. Selecionando a categoria Página em Branco na

seção Tipo de Página, clique em HTML.
6. Clique em Criar.
Um novo documento HTML sem título se
abrirá.
7. para salvar o documento sem título como sua

Figura 2 A caixa de diálogo Novo Documento
página inicial, selecione Arquivo > Salvar como.
A caixa de diálogo Salvar como se abre para a
pasta raiz do site de seu portfólio
automaticamente.
8. Nomeie a nova página como indice.html e clique

em Salvar.
O novo arquivo, indice.html, é acrescentado à
pasta raiz no painel Arquivos (Figura 3).
Figura 3 Painel Arquivos exibindo indice.html
2 Como diagramar uma página da web com CSS © Adobe Systems Incorporated
Inserção de tag div

1. Selecione a categoria Layout na barra Inserir.
Certifique-se de que o botão Padrão está Botão Desenhar Div AP
selecionado (Figura 4).
2. Clique no botão Desenhar Div AP (Figura 4).

O cursor do mouse mudará para uma cruz
quando o movimentar pela página.
3. Selecione uma das áreas da página de seu

storyboard. Para criar o div que definirá esta
área de sua página, arraste um retângulo no
documento Dreamweaver. Quando o retângulo Figura 4 Barra Inserir, categoria Layout
corresponder ao tamanho da área da página de
seu storyboard, solte o botão do mouse.
4. Clique na borda do div para selecioná-lo.

Alças aparecerão ao longo da borda
(Figura 5) e as propriedades do div aparecerão
no inspetor de Propriedades.
5. Certifique-se de que o inspetor de Propriedades

esteja aberto (Figura 6).
No Windows, ele fica atracado na parte inferior
da tela. Se o inspetor de Propriedades não estiver
aberto, selecione Janela > Propriedades. Figura 5 Div inserido e selecionado
6. Clique em na caixa Elemento CSS-P

(Figura 6) e digite um nome para o div.
Escolha um nome particular que o ajudará a se Caixa de ID do Elemento CSS-P
lembrar o conteúdo do div, tal como cabeçalho
ou navegação.
Nota: “CSS-P” é uma abreviação comumente
aceita para “Posicionamento de CSS”.
7. Clique na caixa Cor de fundo e selecione uma Figura 6 Inspetor de Propriedades do ID do

cor no seletor de cores. Elemento CSS
O div muda para a cor selecionada.
8. Abra o painel Elementos AP (Janela > Elementos

AP).
Você verá como o Dreamweaver adicionou um
novo div à lista de Elementos AP.
9. Clique uma vez fora do novo div para

desmarcá-lo.
Uma fina linha preta aparecerá contornando o
div. Esta linha não aparece no navegador. Se
você não visualizar esta linha, selecione Exibir Figura 7 Divs múltiplos na página
> Auxílios Visuais > Contornos de Layout CSS.
Painel Elementos AP
10. Continue acrescentando divs para todas as
seções de seu storyboard. Você pode posicionar
divs diretamente um ao lado do outro
(Figura 7).
11. Salve sua página.
Redimensionamento de divs
Você pode redimensionar um div individualmente ou vários divs simultaneamente, para fazê-los todos da
mesma altura e largura.
Nota: Se a opção Evitar Sobreposições do painel Elementos AP estiver selecionada, você não poderá
redimensionar um div de forma que este se sobreponha a um outro div.
1. Selecione um div clicando em sua borda ou

clicando no nome do div no painel Elementos
AP.
2. Execute uma das seguintes opções para
redimensionar o div:
• Para redimensionar arrastando a borda,
clique e arraste qualquer uma das alças de
redimensionamento do div (Figura 8).
• Para redimensionar um pixel de cada vez,
pressione Control (Windows) ou Option Alça de redimensionamento de Div
(Mac OS) ao mesmo tempo em que
pressiona as teclas de seta. Figura 8 Redimensione arrastando as alças
Nota: As teclas de seta movimentam para a
direita e esquerda do div; você não pode
redimensionar para cima e esquerda usando este
método.
• No inspetor de Propriedades, digite valores
para Largura (L) e Altura (A).
Mudando divs de lugar

Você pode mudar divs de lugar na visualização Design, de forma parecida com a que movimenta objetos na
maioria dos programas básicos de edição de imagens.
Para movimentar um ou mais divs selecionados:
1. Selecione um ou mais divs.
2. Execute uma das opções abaixo:
• Para movimentar arrastando as alças, clique
e arraste a alça de seleção do div
(Figura 9).
• Para movimentar um pixel de cada vez, use
as teclas de seta.
Nota: Se a opção Evitar Sobreposições do Alça de seleção
painel Elementos AP estiver selecionada, você
não poderá mudar um div de lugar de forma Figura 9 Mude um div de lugar
que este se sobreponha a um outro div.
Acréscimo de conteúdo aos divs

Você pode acrescentar imagens, texto e outros conteúdos (tais como animações flash) aos seus divs da
mesma forma que pode fazê-lo em outros lugares da página.
1. Para inserir uma imagem em um div, clique no

div e selecione Inserir > Imagem na barra do
menu.
Nota: Certifique-se de que o div tem proporções
grandes o suficiente para segurar a imagem ou
outros conteúdos. Se o div tiver dimensões
menores do que a imagem, o div pode não exibi-
la corretamente em todos os navegadores.
2. na caixa de diálogo Selecionar Origem da
Imagem, localize e selecione uma imagem para
inserir (tal como o seu banner). Depois clique
em OK (Windows) ou choose (Mac OS). Figura 10 Div com imagem acrescentada
A imagem aparece no div (Figura 10).
3. Para formatar a imagem dentro do div, selecione
a imagem e selecione elementos de formatação
4. Para acrescentar texto a um div, clique no div e
digite texto ou cole texto copiado de outro
documento.
Visualização da página
Você pode acrescentar imagens, textos e outros conteúdos (tais como animações em Flash) aos seus divs da
mesma forma que pode fazê-lo em outros lugares de uma página da web.
Para visualizar a página em um navegador

(Figura 11), selecione Arquivo > Visualizar no
Navegador, e depois selecione um navegador do
sub-menu (ou tecle F12).
Nota: É importante visualizar no navegador para
se certificar de que o seu design se encaixa na janela
padrão do navegador. Tente redimensionar a janela
do navegador para ver o efeito em sua página.
Figura 11 Página da web em uma janela de

navegador
Criação de páginas coerentes de conteúdo

Páginas de conteúdo estão vinculadas à página inicial do portfólio web. Usando as ideias da discussão em
sala de aula, determine os elementos de coerência de suas páginas de conteúdo e projete sua barra de
navegação. Crie uma lista de verificação dos itens que aparecerão em cada página respondendo ao questionário
abaixo. Depois, crie um wireframe para o layout geral de uma página de conteúdo, desenhando e rotulando
os elementos que aparecerão em todas as páginas de conteúdo.
Organização de conteúdo
A maneira como você organiza o conteúdo em uma página realça as características e elementos importantes
de seu site. Os elementos importantes podem ficar em posição mais alta na página, ter tamanho maior ou
cores mais fortes. Inclua breves descrições sobre navegação, o layout do conteúdo, localizações de objetos
de imagem, cabeçalhos chave e outros elementos que apareçam na tela. Identificar as estruturas comuns
entre as páginas ajuda os visitantes a entender que permanecem no mesmo site à medida que navegam de
página a página.
• O banner da página inicial vai ser repetir em cada página? Neste caso, está no mesmo lugar?
Tem o mesmo tamanho?
• Que fonte você usará nos títulos ou cabeçalhos de suas páginas de conteúdo?
• Que cor usará nos títulos ou cabeçalhos de suas páginas de conteúdo?
• Que fonte usará nas descrições de suas páginas de conteúdo?
• Que cor usará em suas descrições?
Navegação
Para os visitantes de seu site entenderem o conteúdo, você deve proporcionar navegação clara. Os visitantes
precisam saber onde estão dentro do site, onde precisam ir e como voltar ao ponto onde estavam. Ter uma
grade de layout coerente ajuda a orientar os visitantes e evita que eles se sintam perdidos. A utilização de
botões, links e objetos gráficos coerentes em cada página mantém a sensação de localização. À medida que
os visitantes passam de uma página a outra, forneça dicas visuais e auxílio à navegação.
Aqui estão algumas perguntas a se fazer:
• Em que lugar da página você vai posicionar a barra de navegação?
• Qual o conteúdo da barra de navegação?
• Haverá uma barra de navegação em todas as páginas?
• Como sua barra de navegação vai ajudar os visitantes a saber em que página estão?
© Adobe Systems Incorporated Criação de páginas coerentes de conteúdo 1

Como configurar as propriedades do documento

Você pode usar a caixa de diálogo Propriedades da Página para configurar as propriedades de layout e
formatação, tais como um padrão de família, tamanho e cor de fonte, e uma cor de plano de fundo.
Configure as propriedades do documento

1. Abra um documento no Adobe Dreamweaver
CS4.
2. Selecione Modificar > Propriedades da Página.
A caixa de diálogo Propriedades da Página se
abre (Figura 1).
Altere a fonte padrão da página

Figura 1 Caixa de diálogo Propriedades da Página
1. Selecione uma fonte no menu pop-up Fonte da
Página.
2. Selecione um tamanho de fonte no menu pop-
up Tamanho.
Qualquer texto não formatado passará a ser
exibido na fonte e tamanho de fonte
selecionados.
Altere a cor de texto padrão da página

1. Clique na caixa Cor do Texto.
2. Escolha uma cor usando o seletor de cores
(Figura 2). Figura 2 Seletor de cor de texto
Altere a cor de fundo de uma página

1. Clique na caixa Cor do Fundo.
2. Escolha uma cor usando o seletor de cores
(Figura 3).
Para mais informações sobre as outras opções
da caixa de diálogo Propriedades da Página,
clique em Ajuda.
3. Clique em OK para fechar a caixa de diálogo
Propriedades da Página. Figura 3 Seletor de cor de fundo
© Adobe Systems Incorporated Como configurar as propriedades do documento 1

Como criar listas

Você pode criar listas numeradas ou com marcadores usando texto já inserido ou a partir de novos textos
que digite na janela Documento. Listas numeradas também são chamadas de listas ordenadas. Listas com
marcadores também são chamadas listas não ordenadas.
Criação de listas numeradas

No Adobe Dreamweaver CS4, você pode usar listas numeradas (Figura 1) para organizar informações que
precisam ser ordenadas. Você pode aplicar numeração à medida em que cria a lista, ou você pode adicionar
numeração a uma lista já existente.
Para criar uma lista numerada:
1. Posicione o ponto de inserção na parte de seu

documento onde deseja acrescentar a lista.
2. No inspetor de Propriedades, clique em HTML,
e depois clique no botão Lista Ordenada
(Figura 2).
3. Digite o primeiro item da lista.
ao término de cada item da lista para digitar outro
item. Figura 1 Uma lista numerada
5. Quando terminar de digitar a lista, pressione
Enter (Windows) ou Return (Mac OS) duas
vezes para desativar a função de listagem.
Lista não ordenada

Para criar uma lista numerada a partir de texto
já inserido: Opção HTML Lista ordenada
1. Selecione várias linhas do texto inserido.

2. Clique no botão Lista Ordenada do Inspetor de
Propriedades (Figura 2).
Figura 2 Botões de lista no inspetor de Propriedades
© Adobe Systems Incorporated Como criar listas 1

Criação de listas com marcadores

Use listas com marcadores (Figura 3) para organizar informação que não precisa ser ordenada. Você pode
aplicar marcadores à medida que cria a lista, ou acrescentar os marcadores a uma lista existente.
Para criar uma lista com marcadores:

1. Posicione o ponto de inserção na parte
documento onde deseja acrescentar a lista.
2. No Inspetor de Propriedades, clique em HTML,
e depois no botão Lista não ordenada
(Figura 2).
3. Digite o primeiro item da lista.
ao término de cada item da lista para digitar outro
item.
5. Quando terminar de digitar a lista, pressione
Enter (Windows) ou Return (Mac OS) duas
vezes para desativar a função de listagem. Figura 3 Uma lista com marcadores
Para criar uma lista com marcadores a partir

de texto já inserido:
1. Selecione várias linhas do texto inserido.
2. Clique no botão Lista Não Ordenada do Inspetor
de Propriedades (Figura 2).
2 Como criar listas © Adobe Systems Incorporated

Como adicionar texto de um outro documento

Copie o texto do outro documento
1. Abra o documento de onde você quer copiar o texto.
2. Selecione o texto e selecione Editar > Copiar.
3. Inicie o Adobe Dreamweaver CS4.
4. Abra o documento do Dreamweaver no qual você quer colar o.
5. Posicione o ponto de inserção na página onde você quer colar o texto copiado.
6. Selecione Editar > Colar.
O novo texto aparece no documento do Dreamweaver.
Nota: O texto copiado pode perder alguma de sua formatação original, incluindo quebra de linha e
quebra de parágrafo.
Para inserir uma linha em branco após uma seção de texto, posicione o ponto de inserção no fim da
última linha de texto e pressione Enter (Windows) ou Return (Mac OS). Para criar uma quebra de linha
no ponto de inserção, pressione Shift-Enter (Windows) ou Shift-Return (Mac OS).
7. Para mudar a formatação de um novo texto no documento, selecione o texto e aplique uma regra de CSS
ou crie uma nova regra de CSS com base no formato do novo texto.
Importação de HTML do Word

Páginas criadas em HTML no Microsoft Word têm elementos que precisam ser limpados antes que você
possa trabalhar estas páginas no Dreamweaver.
1. No Dreamweaver CS4, selecione Arquivo >

Abrir.
A caixa de diálogo Abrir se abre.
2. Procure e selecione o arquivo HTML que você
quer e clique Abrir.
O arquivo Word em HTML se abre em
Dreamweaver.
3. Selecione Comandos > Limpar HTML do Word.
A caixa de diálogo Limpar HTML do Word se
abre (Figura 1).
4. Clique OK.
Um resumo do processo de limpeza aparece.
Figura 1 Caixa de diálogo Limpar HTML do Word
5. Clique OK.
Use o inspetor de Propriedade para editar o texto
como for necessário.
© Adobe Systems Incorporated Como adicionar texto de um outro documento 1

Como criar tabelas de dados

No Adobe Dreamweaver CS4, você pode usar tabelas para criar e formatar dados. Apesar de ser possível
usar tabelas para criar layout de páginas incluindo texto e imagens. tabelas são usadas primariamente para
organizar informações em colunas e linhas simples.
Depois de criar uma tabela, você pode facilmente modificá-la tanto na sua aparência quanto em sua estrutura.
Você pode inserir uma nova tabela da barra Inserir, ou pode importar uma planilha criada em uma programa
como Microsoft Excel.
Inserção de uma tabela em uma página

Você pode inserir uma tabela em qualquer lugar de uma página, inclusive dentro de uma outra tabela. Você
pode rapidamente inserir uma tabela padrão com três linhas e três colunas, ou você pode modificar opções
para inserir uma tabela personalizada.
Quando você inserir uma tabela, é uma boa ideia configurar uma propriedade de cabeçalho para uma linha
ou coluna, se pretende usar esta linha ou coluna para rotular a informação na tabela. Um cabeçalho faz a
tabela ser mais acessível para pessoas com deficiências visuais, porque leitores de tela pode reconhecer que
um cabeçalho contém rótulos. (Note que você tem que configurar um cabeçalho de coluna ou de linha para
oferecer acessibilidade. Não é suficiente utilizar negrito ou texto centralizado.)
Para inserir uma tabela:

1. Abra um documento no Dreamweaver.
2. Coloque o ponto de inserção em seu documento

onde você quer que a tabela apareça.
3. Selecione a categoria Layout na barra Inserir e

certifique-se de que o modo Padrão esteja
selecionado.
4. Clique no botão Tabela na barra Inserir Figura 1 Categoria Comum na barra Inserir
(Figura 1).
A caixa de diálogo Tabela se abre(Figura 2).
5. Digite o número de linhas e colunas.
6. Faça mudanças em qualquer das opções na

caixa de diálogo. Para informações sobre as
opções, clique no botão Ajuda na caixa de
diálogo.
A aplicação de um cabeçalho de coluna ou linha
específico pode melhorar a acessibilidade de
uma tabela de dados. O navegador irá exibir
esses cabeçalhos ligeiramente diferentes e tais
cabeçalhos são legíveis por leitores de telas. Figura 2 Caixa de diálogo Tabela
© Adobe Systems Incorporated Como criar tabelas de dados 1

Para configurar um cabeçalho de linha ou de

coluna:
7. Na caixa de diálogo Tabela (Figura 2), selecione
uma das opções na seção Cabeçalho.
Por exemplo, se você criar uma tabela que liste
uma coleção de livros, com colunas rotuladas
Autor, Título e Ano, você deve configurar a linha Figura 3 Tabela com linha superior configurada
superior como cabeçalho. O padrão é que os como cabeçalho
cabeçalhos de linhas ou colunas sejam em negrito
e centralizados (Figura 3). Leitores de tela
agora podem ler este cabeçalho.
8. Clique OK.
A tabela aparece em seu documento.
Seleção de elementos de tabela.

Você pode selecionar uma tabela inteira, uma linha ou uma coluna ou pode selecionar um bloco de células
contíguas dentro de uma tabela. Depois de ter selecionado a tabela ou células, você pode modificar a
aparência da seleção ou do texto contido na seleção.
Para selecionar uma tabela inteira: • Clique na célula. Depois selecione Editar >
Siga um dos seguintes procedimentos: Selecionar Tudo.
• Clique no canto superior esquerdo da tabela

ou clique em qualquer lugar de sua parte
inferior.
• Clique em uma célula da tabela, e selecione
Modificar > Tabela > Selecionar Tabela.
Alças de seleção aparecem nas bordas direita
e inferior da tabela selecionada (Figura 4). Figura 4 Alças de Seleção em uma tabela
selecionada
Para selecionar linhas e colunas:
1. Posicione o cursor para apontar para a borda
esquerda de uma linha ou na borda superior de
uma coluna.
2. Quando o cursor muda para uma seta de
seleção, clique para selecionar a linha ou coluna,
ou arraste para selecionar múltiplas linhas ou
colunas (Figura 5).
Para selecionar uma única célula:

Siga um dos seguintes procedimentos:
Figura 5 Uma coluna selecionada em uma tabela
• Clique na célula. Depois arraste para
selecionar a célula.
2 Como criar tabelas de dados © Adobe Systems Incorporated

Adicionando linhas e colunas

Você pode adicionar uma coluna ou linha individual, ou pode adicionar múltiplas colunas ou linha ao mesmo
tempo.
Para adicionar uma linha:

1. Coloque o ponto de inserção e uma célula da tabela,
ou selecione uma linha inteira.
2. Siga um dos seguintes procedimentos:
• Na categoria Layout da barra Inserir, clique no
botão Inserir Linha Acima ou no botão Inserir
Linha Abaixo (Figura 6).
• Selecione Inserir > Objetos da Tabela > Inserir
Linha Acima ou Inserir > Objetos de Tabela >
Inserir Linha Abaixo.
Uma nova linha aparece acima ou abaixo do ponto
de inserção ou da linha selecionada.
Para adicionar uma coluna:

1. Coloque o ponto de inserção em uma célula da tabela
ou selecione uma coluna inteira.
2. Siga um dos seguintes procedimentos:
• Na categoria Layout da barra Inserir, clique no
botão Inserir Coluna à Esquerda ou no botão
Inserir Coluna à Direita (Figura 6).
• Selecione Inserir > Objetos de Tabela > Inserir Figura 6 Barra Inserir, modo Layout
Coluna à Esquerda ou selecione Inserir > Objetos
de Tabela > Inserir Coluna à Direita.
Uma nova coluna aparece à esquerda ou à direita
do ponto de inserção ou da coluna selecionada.
Excluir linhas e colunas

Você pode excluir uma linha ou coluna individual ou pode excluir múltiplas linhas e colunas ao mesmo tempo.
Para excluir linhas ou colunas de uma tabela:

1. Selecione uma ou mais linhas ou colunas.
2. Pressione Delete ou Backspace.
Para remover o conteúdo de células mas conservar as células intactas:

1. Selecione uma ou mais células.
2. Selecione Editar > Limpar ou pressione Delete.
Nota: Se você selecionar uma linha ou coluna inteira e depois selecionar Editar > Limpar ou pressionar
Delete, o Dreamweaver remove a coluna ou linha inteira, não apenas seu conteúdo da tabela.

Redimensionando tabelas, linhas e colunas

Você pode redimensionar uma tabela inteira ou linhas e colunas individuais. Quando você redimensiona uma
tabela inteira, todas as células na tabela são redimensionadas proporcionalmente.
Para redimensionar uma tabela: Largura da Coluna
Selecione a tabela e siga um dos seguintes Altura da Linha

procedimentos.
• Para redimensionar uma tabela
horizontalmente, arraste a alça de seleção
da direita.
• Para redimensionar a tabela verticalmente,
Figura 7 Inspetor de Propriedade da Tabela
arraste a alça de seleção da parte inferior.
• Para redimensionar em ambas as
dimensões, arraste a alça de seleção do
canto direito inferior.
Para redimensionar a largura de uma coluna:

• Arraste a borda direita da coluna.
• Selecione a coluna. No inspetor de
Propriedades (Figura 7), mude os valores
do número na caixa Largura da Coluna.
Para redimensionar a altura de uma linha:

• Arraste a borda inferior da linha.
• Selecione a linha. No inspetor de
Propriedades (Figura 7), mude os valores
do número na caixa de texto Altura da
Linha.

Modificação das propriedades da tabela

Você pode modificar as propriedades de uma tabela, suas colunas e linhas ou suas células utilizando o
A atenção às bordas da tabela e ao enchimento da tabela (o espaço entre as células da tabela) e especial
pode te ajudar a criar designs de tabelas mais eficientes.
Você também pode configurar uma linha ou tabela como cabeçalho utilizando o inspetor de Propriedades.
Cabeçalhos ajuda a fazer tabelas mais úteis e acessíveis.
Para modificar as propriedades de uma tabela:

1. Selecione a tabela que quer modificar.
2. Faça mudanças em quaisquer das opções no
inspetor de Propriedades (Figura 8). Figura 8 Inspetor de Propriedade da Tabela
Para modificar as propriedades de linha ou

coluna da tabela:
1. Selecione a linha ou coluna que você quer
modificar.
2. Faça as mudanças em quaisquer opções no
Para modificar as propriedades de células da

tabela:
1. Em seu documento, selecione a célula ou as
células que quer modificar.
2. Faça as mudanças em quaisquer das opções no Figura 9 Inspetor de Propriedade de linha da tabela
Para configurar uma linha ou coluna como

cabeçalho:
1. Selecione a linha ou coluna.
2. No inspetor de Propriedades, selecione a opção
Cabeçalho.
As palavras na linha ou coluna aparecerão em
negrito e centralizadas (Figura 10). Figura 10 Tabela com linha superior configurada
como cabeçalho

Inserir uma tabela de planilha

Para inserir uma planilha criada em outro programa, como o Microsoft Excel, salve o arquivo da planilha
delimitado por tabulação (TXT) ou no formato de valores separados por vírgula (CSV) Estas tabelas são
um jeito rápido de configurar o layout para um catálogo ou diretório de informação..
Para salvar uma planilha em formato TXT ou CSV:
1. Abra um arquivo de planilha no programa onde Importação de dados tabulares

ala foi criada, como o Microsoft Excel.
2. Selecione Arquivo > Salvar Como.
3. Como o formato do arquivo, selecione TXT
(Delimitado por Tabulação) ou CSV (Delimitado
por Vírgula) no menu pop-up para salvar a
planilha como um arquivo de dados.
4. Salve e feche o programa de planilhas.
Figura 11 Botão Importar Dados Tabulares na
Para inserir a planilha em um documento do barra Inserir
Dreamweaver:
1. Inicie o Dreamweaver e abra o documento no

qual você quer inserir a planilha.
2. Selecione a categoria Dados na barra Inserir e

clique no botão Importar Dados Tabulares
(Figura 11).
A caixa de diálogo Importar Dados Tabulares
se abre (Figura 12).
Figura 12 Caixa de diálogo Importar Dados
3. Na caixa de diálogo, clique Procurar e selecione
Tabulares
o arquivo da planilha. Clique em Abrir.
4. No menu pop-up Delimitador (Figura 13),

selecione Tabulação se você salvou o arquivo
em formato delimitado por tabulação ou
selecione Vírgula se você salvou o arquivo em
formato CSV.
5. Clique OK para fechar a caixa de diálogo

Importar Dados Tabulares.
O conteúdo da arquivo da planilha é exibido em
uma tabela na página.
Figura 13 Menu pop-up Delimitador

Para ordenar dados da tabela:

1. Para ordenar dados da tabela selecione a tabela
e selecione Comandos > Ordenar Tabela.
A caixa de diálogo Ordenar Tabela se abre
(Figura 14). Você pode selecionar a coluna a
ser ordenada e organizá-la em ordem numérica
ou alfabética. Você pode ordenar por uma
coluna e depois ordenar os dados mais adiante
por uma segunda coluna.
Figura 14 Caixa de diálogo Ordenar Tabela
2. Selecione suas preferências de ordenação e
clique OK.

Como criar links

Existem diversos tipos de links no Adobe Dreamweaver CS4:
• Um link interno (link com caminho relativo a um documento ou link de caminho relativo à raiz do site)
vai para outra página do seu site.
• Um link externo (link de caminho absoluto) vai para outro site.
• Um link de âncora com nome vai para uma posição específica de uma página do seu site.
• Um link de e-mail abre uma janela de e-mail em branco ao invés de se vincular à uma página.
Criação de um link interno. HTML

Apontar para arquivo Procurar arquivo
1. Salve seu documento Dreamweaver.
2. Selecione uma imagem, uma palavra, ou
uma frase de texto que você quer formatar
como link.
Assegure-se de que o inspetor de Propriedades
está aberto. (Figura 1). No Windows, ele está
localizado na parte inferior da tela. Se o inspetor Figura 1 Inspetor de Propriedades de Texto
de Propriedades não estiver aberto, selecione
Janela > Propriedades.
3. Clique HTML no inspetor de Propriedades
(Figura 1).
4. Ao lado da caixa de texto Link no inspetor de
Propriedades (Figura 1), clique no ícone de
Procurar Arquivos (pasta de arquivo) .
A caixa de diálogo Selecione Arquivo se abre
(Figura 2).
5. Procure o arquivo que você quer vincular e
clique nele.
6. Clique OK.
A caixa de diálogo Selecione Arquivo se fecha.
O nome do arquivo aparece na caixa de texto
Nota: À esquerda do ícone Procurar Arquivo
está o ícone Apontar Para Arquivo. Figura 2 Caixa de diálogo Selecione Arquivo
Se estiver com o painel de Arquivos aberto você
pode clicar e arrastar o ícone Apontar Para
Arquivo para desenhar uma linha de link para o
arquivo desejado no painel Arquivos. O nome
do arquivo para o qual você apontar será
adicionado à caixa de texto Link automa-
ticamente.
© Adobe Systems Incorporated Como criar links 1

Criando um link externo

1. Selecione uma imagem ou texto que você quer Menu pop-up Destino Caixa de texto Link
formatar como link.
2. Na caixa de texto Link no inspetor de

propriedades, digite ou cole o endereço (URL)do
site com o qual você quer vincular (Figura 3).
Lembre-se de incluir “http://” no endereço.

Figura 3 URL na caixa de texto Link
Nota: Se você quiser que o link abra em uma
nova janela de navegador, selecione o link e use
o menu pop-up no Inspetor de Propriedades para
selecionar “_blank.”
Criação de link para uma âncora com nome

Para criar um link para um local específico em uma página da web, primeiro crie uma âncora com nome
neste local, e depois vincule para a âncora com nome.
1. Posicione o ponto de interseção no local da

página onde você quer definir uma âncora.
2. Selecione Inserir > Âncora Com Nome.
A caixa de diálogo Âncora Nomeada se abre

(Figura 4). Figura 4 Caixa de diálogo Âncora Nomeada
3. Digite um curto nome da âncora sem nenhum

espaço.
4. Clique OK.
5. Selecione uma imagem ou texto para vincular

com a âncora nomeada.
6. Na caixa de texto Link no inspetor de

Propriedades, digite “#” e depois digite ou cole o
nome da âncora.
2 Como criar links © Adobe Systems Incorporated

Criação de link para um endereço de e-mail

Você pode adicionar um link para um endereço de e-mail. Quando os visitantes clicam neste link, a aplicação
padrão de e-mail deles será ativada
1. Clique no local do documento onde você quer

que o link apareça, ou selecione o texto ou
imagem que você quer formatar como link de
e-mail.
2. Escolha uma das seguintes opções para inserir
o link:
• Selecione Inserir > Link de E-mail. Figura 5 Caixa de diálogo Link de E-mail
• Na categoria Comum da barra Inserir, clique

o botão Inserir Link de E-mail.
A caixa de diálogo Link de E-mail se abre
(Figura 5).
3. Na caixa Texto, digite o texto para o link.
Se você selecionou texto para formatar como o
link, este texto aparece na caixa Texto.
4. Na caixa de texto E-mail, digite o endereço de
e-mail.
5. Clique OK para fechar a caixa de diálogo Link
de E-mail.
© Adobe Systems Incorporated Como criar links 3

Usabilidade
Nome: _________________________________________________ Data: __________________
URL: ___________________________________________________________________________
Nome do Site: _____________________________________________________________________
Quais os tipos de elementos de navegação utilizados: botões, hyperlinks, imagens, outro? Um tipo, ou vários?
Descreva cada tipo de elemento de navegação.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
À medida que navega, quantos cliques leva normalmente para chegar à informação que está procurando?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Quando navega, você chega à informação que está esperando?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Usabilidade 1

A estrutura do site é aparente?

____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Quanto tempo leva para as páginas carregarem?

____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
O texto é legível? O texto é estilizado de forma particular? Neste caso, o estilo adiciona valor ao propósito?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Quais são os elementos do layout visual? Como estes elementos facilitam ou dificultam a navegação para os
visitantes?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Usabilidade © Adobe Systems Incorporated

Há títulos, cabeçalhos e outros elementos visuais claros, que ajudem especificamente a organizar a informação?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Usabilidade 3

Acessibilidade
Nome do estudante: _____________________________________________ Data: ____________
URL: _________________________________________________________________________
Nome do site: ___________________________________________________________________
As imagens têm texto alternativo, de forma que leitores de tela possam ler as descrições?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Todos os links, incluindo os links incorporados, estão rotulados de forma a poderem aparecer sozinhos?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
As tabelas de dados têm linhas de cabeçalho ou colunas de cabeçalho?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Acessibilidade 1

Existem títulos e cabeçalhos claros, que ajudam a organizar a informação para pessoas usando leitores de
tela?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
O esquema de navegação é posicionado convenientemente para alguém usando um leitor de tela?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
É a cor o único elemento utilizado para conferir ênfase?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Acessibilidade © Adobe Systems Incorporated

Adobe Fireworks CS4 e Adode Dreamweaver CS4 Apostila Exercício 2.10
Como criar botões e barras de navegação

O Adobe Fireworks CS4 permite a você criar o aspecto e a funcionalidade de botões, incluindo recursos
como links e elementos de rolagem. Depois de exportar estes botões do Fireworks, você pode importá-los
para o Adobe Dreamweaver CS4.
Construção de um botão
1. Inicie o Fireworks. Crie um novo documento. Digite 200 pixels para Largura e 200 pixels para a Altura.
Digite 72 pixels/polegada como Resolução.
Nota: Ao fim deste exercício, você irá aparar a tela para caber o botão.
2. Salve o documento na pasta de imagens do seu site Dreamweaver.

Nota: Se o seu site não contém uma pasta chamada imagens, crie uma agora.
3. Selecione Editar > Inserir > Novo Botão.

Um novo botão é acrescentado à Biblioteca de Documentos. O editor de botões se abre e o inspetor de
Propriedades exibe as propriedades do botão (Figura 1).
Menu pop-up Estado

Opção ativar / bloquear guias de escala
com 9 fatias
Figura 1 Inspetor de Propriedades de botão
4. Desmarque a opção Habilitar das Guias de escala com 9 fatias no inspetor de Propriedades.
(Para saber mais sobre as guias de escala com 9 fatias, selecione Ajuda > Ajuda do Fireworks).
Os botões contêm quatro estados:
• Para Cima (Quando o botão não foi tocado)
• Sobre (cursor sobre o botão)
• Para Baixo (o botão foi clicado)
• Sobre Enquanto Pressionado (O cursor sobre enquanto o botão é pressionado)
Você pode visualizar cada estado selecionando-os no menu pop-up Estado no inspetor de Propriedades
(Figura 1). O estado atual do novo botão é Para Cima, como indica o inspetor de Propriedades.
5. Utilize a ferramenta Retângulo ou Elipse do painel de Ferramentas para desenhar uma forma para o
estado Para Cima do botão. Faça as dimensões da forma caberem em sua barra de navegação.
© Adobe Systems Incorporated Como criar botões e barras de navegação 1

Apostila Exercício 2.10 Adobe Fireworks CS4 e Adode Dreamweaver CS4
6. Para acrescentar profundidade ao botão, clique no botão Adicionar Filtros em Tempo Real no inspetor
de Propriedades (o sinal de adição ao lado de Filtros) e depois selecione uma opção de bisel do menu
pop-up:
• Bisel e Entalhe > Bisel Interno
• Bisel e Entalhe > Bisel Externo
7. Utilizando o inspetor de Propriedades, acrescente cor ao botão. Usando a ferramenta Texto, acrescente
texto ao botão.
Estes deve combinar com o design de fontes e cores da sua página.
8. Alterne para a ferramenta Ponteiro. Pressionando Shift, clique no botão e na caixa de texto para selecionar
ambos.
9. Selecione Modificar > Alinhar > Centralizar Verticalmente para alinhar o texto centralizado verticalmente
no botão.
10. Selecione Modificar > Alinhar > Centralizar Horizontalmente para alinhar o texto centralizado
horizontalmente no botão.
Mais tarde você irá duplicar esta primeiro botão para criar os outros botões. Se o texto estiver centralizado,
os rótulos dos botões com variados números de caracteres estarão todos bem alinhados.
11. Clique fora do forma e do texto para desmarcar a sua seleção. No inspetor de Propriedades, selecione
Sobre no menu pop-up Estado (Figura 2).
Menu pop-up Estado
Figura 2 Menu pop-up Estado
12. No inspetor de Propriedades, clique em Copiar Gráfico Acima para copiar o elemento gráfico Para Cima
para o estado Sobre do botão (Figura 3).
Isto economiza tempo e ajuda a manter coerente o aspecto e o posicionamento do botão.
2 Como criar botões e barras de navegação © Adobe Systems Incorporated

Botão Copiar Gráfico Acima
Figura 3 Botão Copiar Gráfico Acima

13. Decida como você quer o aspecto do botão quando o cursor passar por cima dele. Então mude o
elemento gráfico copiado modificando sua cor, efeitos de texto ou o formato do botão.
Para Baixo no menu pop-up Estado.
15. Clique em Botão Copiar Gráfico Acima para copiar o elemento gráfico Sobre para o estado deste botão.
16. Decida como você quer que o botão aparente quando os visitantes clicarem nele. Adicione efeitos, tais
como escurecer a cor.
Você pode acrescentar uma sombra projetada para a forma clicando em Adicionar Filtros no inspetor de
Propriedades e depois selecionando Sombra e Brilho > Sombra.
Nota: Neste projeto, você vai pular o estado Sobre Enquanto Pressionado.
Área Ativa no menu pop-up Estado.
A área ativa do botão é mostrada por sombreamento esverdeado e linhas vermelhas. Este sombreamento
indica a área na qual os visitantes podem clicar para ativar o botão.
18. Para modificar o tamanho da área ativa, arraste as guias vermelhas para aumentar ou diminuir as áreas
ativas sombreadas de verde.
19. Quando você estiver satisfeito com os estados do seu botão no Editor de Botão, clique na Página 1 na
parte superior da tela de desenho (Figura 4) para fechar o editor de Botão e retornar à tela de desenho
Página 1.
Figura 4 Feche o Editor de Botão e retorne para a tela de desenho Página 1
Seu botão aparece no tela de desenho Página 1 do Fireworks.

20. Clique no botão para selecioná-lo. Na caixa de texto Link do Inspetor de Propriedades, digite o nome da
página da web para vincular a este botão (Figura 5).
Figura 5 Página da web na caixa de texto Link
21. Na caixa de texto Alt, entre um rótulo de texto alternativo para o botão.
O texto alternativo é exibido no lugar da imagem quando o visitante escolhe não exibir as imagens em
seus navegadores.
Esses textos também podem ser vocalizados por leitores de tela para visitantes que as utilizem. Em geral
o texto alternativo para o botão deve ser o mesmo texto exibido no botão.
22. Selecione Modificar > Tela de Desenho > Ajustar Tela de Desenho para corresponder a tela de desenho
ao tamanho do botão.

Copie os botões e crie a barra de navegação
1. Mude o tamanho da tela de desenho para

acomodar todos os botões de sua barra de
navegação. Selecione Modificar > Tela de
Desenho > Tamanho da Tela de Desenho e edite
o valor para a altura ou largura na caixa de
diálogo Tamanho da Tela de Desenho. Por
exemplo, se você tem 4 botões, multiplique a
altura ou largura do primeiro botão por 4
(dependendo se sua barra de navegação é
horizontal ou vertical).
2. Selecione o primeiro botão. Mova-o para o topo

da tela de desenho.
Selecione Editar > Clonar. Figura 6 Botões clonados
Uma nova ocorrência do botão aparece no em
cima do botão original.
3. Arraste a nova ocorrência do botão para baixo

do botão original.
Você também pode usar as teclas de seta para
mover os botões.
4. Repita as etapas 2 e 3 quantas vezes forem

necessárias para criar o resto de sua barra de
navegação (Figura 6).
5. Clique no segundo botão e use o inspetor de

Propriedades para editá-lo. Na caixa Texto,
mude o texto para o nome do segundo botão.
Edite a informação na caixa de texto Link e na
caixa de texto Alt deste botão.
Figura 7 Botões com rótulos de texto editados
6. Repita a etapa 5 para os botões restantes
(Figura 7).
7. Encaixe a tela pintura na sua barra de

navegação: Selecione Modificar > Tela de
Desenho > Ajustar Tela de Desenho.
8. Salve o arquivo.

Exportação de uma barra de navegação para utilizar no Dreamweaver

Fireworks permita a você salvar elementos gráficos interativos (um botão, por exemplo) como HTML de
forma que você pode importar botões ativos para um documento Dreamweaver.
1. Para exportar sua barra de navegação, escolha Menu pop-up Exportar

Arquivo > Exportar.
A caixa de diálogo Exportar se abre
(Figura 8).
2. Navegue até a pasta em sua pasta de raiz local

onde você quer salvar a barra de navegação.
3. Dê a sua barra de navegação um nome

descritivo curto.
4. Certifique-se de que a opção HTML E Imagens

está selecionada no menu pop-up Exportar.
5. Certifique-se de que a opção Incluir Áreas sem

Fatias esteja selecionada.
Figura 8 Caixa de diálogo Exportar
6. Selecione a opção Colocar Imagens na
Subpasta.
7. Clique em Salvar (Windows) ou Exportar

(Mac OS).
8. Salve o documento Fireworks e feche o

Fireworks.

Inserir a barra de navegação em um documento Dreamweaver
2. Abra a página na qual você deseja inserir a barra

de navegação. Salve o arquivo Dreamweaver
antes de importar.
Figura 9 Caixa de diálogo HTML do Fireworks
3. Posicione o ponto de inserção onde você deseja
que a barra de navegação apareça.
4. Na categoria Comum da barra Inserir, clique no

menu pop-up Imagens e selecione HTML do
Fireworks.
A caixa de diálogo Inserir HTML do Fireworks
se abre (Figura 9).
5. Na caixa de diálogo Inserir HTML do

Fireworks, clique no botão Procurar e localiza e
selecione o arquivo HTML de sua barra de
navegação. Clique em Abrir.
Figura 10 Visualização de página no navegador
6. Na caixa de diálogo Inserir HTML do
Fireworks, clique em OK.
A barra de navegação aparece na página.
7. Para editar um botão, selecione o botão e depois

use o inspetor de Propriedades para alterar
definições como o link ou o texto alternativo.
8. Confira se o endereço do link e o rótulo de texto

alternativo estão corretos para cada botão.
9. Selecione Arquivo > Visualizar no Navegador e

escolha um navegador no submenu para testar
os botões e seus links em um navegador
(Figura 10).
10. Salve o documento Dreamweaver.

Como verificar links

Uma importante tarefa de testes técnicos é a verificação de todos os links. O Adobe Dreamweaver CS4
permite a você faze-lo automaticamente.
2. Assegure-se de que o site está aberto.
3. No menu, selecione Site > Verificar Links no Site Inteiro.
A aba Verificador de Links exibirá todos os links quebrados no site (Figura 1).
Figura 1 Aba Verificador de Links
Nota: Mesmo os links estando listados como quebrados devem ser verificados no navegador para
confirmar.
4. Repare os links quebrados e verifique novamente.
Nota: Para limpar os resultados do Verificador de Links, selecione Limpar Resultados do menu opções
do Verificador de Link.
© Adobe Systems Incorporated Como verificar links 1

Como publicar arquivos na web

Após acabar de editar seus documentos, você deve publica-los em seu servidor na web de forma que os
documentos possam ser visualizados.
Conexão com um site remoto

Muitos sites permitem que você publique arquivos através de FTP (File Manager Protocol). Você conecta
com um site remoto utilizando a caixa de diálogo Definição de Site no Adobe Dreamweaver CS4.
1. Selecione Site > Gerenciar Sites do menu.
A caixa de diálogo Gerenciar Sites se abrirá

(Figura 1).
2. Selecione o nome do site com que quer conectar

remotamente e clique Editar.
A caixa de diálogo Definição de Site aparecerá.
3. Clique na aba Avançado e selecione a categoria

Informação Remota na caixa de diálogo
Definição de Site (Figura 2). Figura 1 Caixa de diálogo Gerenciar Sites
4. Selecione FTP no menu pop-up Acesso.
5. Digite a informação de acesso FTP como

determinada pelo seu professor.
6. Clique em Testar para testar a conexão.
Dreamweaver confirma a conexão.
7. Clique em OK.
8. Clique Concluído para fechar a caixa de diálogo

Gerenciar Sites.
Figura 2 Caixa de diálogo Definição de Site
© Adobe Systems Incorporated Como publicar arquivos na web 1

Carregar e baixar arquivos

Uma vez que você estabeleceu a conexão FTP você pode publicar arquivos diretamente do painel Arquivos.
Carregando o site inteiro pela primeira vez Botão Expandir/Recolher
1. Certifique-se de que o painel Arquivos está

aberto (Figura 3).
O painel Arquivo está normalmente localizado

no lado direito da tela. Se o painel Arquivos não
está aberto, selecione Janela > Arquivos.
2. Clique o botão Expandir/Recolher na barra de

ferramentas do painel Arquivos (Figura 3).
O painel Arquivos se expandirá (Figura 4). Figura 3 Painel Arquivos
3. Certifique-se de que o botão Estabelece

Conexão Com Host Remoto está ativo (Figura
5). Clique se necessário.
Dreamweaver se conecta com o servidor.
4. Selecione a pasta raiz para o seu site no painel

Local (direita). Figura 4 Painel Arquivos expandido.
5. Clique o botão Colocar Arquivos (a seta Botão Estabelece Conexão

Com Host Remoto Botão Colocar
apontando para cima).
O Dreamweaver carrega os arquivos do site e

abre a caixa de diálogo Atividade de Arquivo
em Segundo Plano (Figura 6).
Figura 5 Botões Estabelece Conexão Com Host
Nota: Para carregar um ou mais pastas ou
Remoto e Colocar
arquivos sem carregar o site inteiro, selecione-
os e clique o botão Colocar Arquivos.
Figura 6 Caixa de diálogo Atividade de Arquivo

em Segundo Plano
2 Como publicar arquivos na web © Adobe Systems Incorporated

Carregar uma versão revisada de um arquivo existente

1. Selecione o arquivo que você revisou.
2. Clique no botão Colocar Arquivos.
Dreamweaver coloca o arquivo revisado.
Baixar arquivos para trabalhar neles Botão Desconecta Botão Obter

Botão Atualizar
do Host Remoto
Uma vez que seu site tenha sido publicado,
frequentemente você irá querer baixar um arquivo
de forma que possa revisa-lo. Você o faz através
do painel Site Remoto, no lado esquerdo do painel
Arquivos expandido. Figura 7 Botão Obter
1. Clique no botão Atualizar para certificar-se de

que os arquivos no Site Remoto estão atualizados.
2. Selecione um arquivo para baixar.
3. Clique no botão Obter (Figura 7).
Se o arquivo tiver algum arquivo dependente,
a caixa de diálogo Arquivos Dependentes se abrirá
Figura 8 Caixa de diálogo Arquivos Dependentes
(Figura 8). Arquivos dependentes são arquivos,
tais como imagens ou animações Flash,
incorporadas em uma página da web. Na maior
parte dos casos, você precisa baixar estes
arquivos para a pagina ser visualizada
corretamente.
4. Clique em Sim.
Dreamweaver copia o arquivo e seus arquivos
dependentes para a sua pasta local. Os arquivos
baixados aparecem no painel direito do painel
Arquivos expandido.
5. Clique no botão Desconecta do Host Remoto
(Figura 7), e então recolha o painel de Arquivos.
© Adobe Systems Incorporated Como publicar arquivos na web 3

Gerenciando arquivos e links utilizando o painel

Arquivos
Você pode organizar e gerenciar os arquivos e pastas do seu site utilizando o painel Arquivos no Adobe
Dreamweaver CS4. Use o painel Arquivos para abrir, adicionar, renomear ou excluir arquivos e pastas. Use
o painel Arquivos para modificar links. No painel Arquivos você pode visualizar um mapa do site que apresenta
uma representação gráfica dos arquivos e links do seu site.
Abrindo arquivos
1. Assegure-se de que o painel Arquivos está
visível (Figura 1).
O painel Arquivos normalmente está localizado
do lado direito da tela. Se o painel Arquivos não
está aberto, selecione Windows > Arquivos.
2. Selecione um arquivo no painel Arquivos.
3. Pressione a tecla Enter (Windows) ou Return

(Mac OS) para abrir o arquivo no Dreamweaver.
Nota: Se você estiver com o Devolução/
Retirada habilitado, Dreamweaver vai retirar o
arquivo antes de abrir. Se outro visitante houver
retirado o arquivo, Dreamweaver vai alertá-lo
sobre a situação do arquivo e informar quem o
retirou. Você pode decidir se continua a abrir o Figura 1 Painel Arquivos
arquivo ou não.
© Adobe Systems Incorporated Gerenciando arquivos e links utilizando o painel Arquivos 1

Renomeando arquivos
Quando você renomeia um arquivo no painel Arquivo, o Dreamweaver pode automaticamente mudar o link
que aponta para esse arquivo. Por esta razão, é sempre aconselhável renomear usando o painel Arquivos ao
invés de renomeá-los em seu disco rígido.
1. Use uma das seguintes opções para selecionar

o nome de um arquivo ou pasta no painel de
Arquivos:
• Clique o nome, espere e então clique de novo.
• Clique com o botão direito (Windows) ou
pressionando a tecla Control (Mac OS) no ícone
do arquivo ou pasta, então selecione Editar >
Renomear.
2. Digite o novo nome. Figura 2 Atualizar Arquivos
3. Pressione Enter (Windows) ou Return
(Mac OS).
Se algum link apontar para o arquivo ou pasta, a
caixa de diálogo Atualizar Arquivos se abrirá.
(Figura 2).
4. Clique Atualizar para mudar links que apontem
para o arquivo renomeado ou para um arquivo
na pasta renomeada.
Excluindo arquivos
Quando você exclui um arquivo ou uma pasta, o Dreamweaver o alertará se links apontarem para o arquivo
ou para a pasta.
1. Clique no arquivo ou pasta que deseja excluir.

2. Pressione a tecla Delete.
Se quaisquer links de site apontar para o arquivo
ou para a pasta, o alerta Excluir Arquivos se
abrirá (Figura 3), dando a oportunidade para
mudar os links antes de excluir o arquivo. Figura 3 Alerta Excluir Arquivos
Para excluir o arquivo de qualquer maneira,

clique Sim. Para cancelar sua ordem para excluir
o arquivo, clique Não.
2 Gerenciando arquivos e links utilizando o painel Arquivos © Adobe Systems Incorporated

Trocando links para um arquivo

Você também pode trocar os links para um arquivo atravéa do painel Arquivos. É aconselhável trocar os
links antes de excluir um arquivo ao qual outros arquivos são vinculados.
1. Selecione um arquivo no painel Arquivos.
2. Selecione Site > Alterar Link no Site Inteiro.

A caixa de diálogo Alterar Link no Site Inteiro
se abrirá (Figura 4).
3. No campo Em Links Para, digite o nome do

arquivo para o qual os novos links devem Figura 4 Caixa de diálogo Alterar Link no Site Inteiro
apontar.
4. Clique OK.
A caixa de diálogo Atualizar arquivos se abrirá
(Figura 5).
5. Clique Atualizar .
Figura 5 Caixa de diálogo Atualizar arquivos
Criação de uma nova pasta

Use pastas para manter o seu site bem organizado. Por exemplo, a maioria dos sites usam uma pasta
chamada ‘imagens’ para abrigar todas as imagen para o site.
1. Clicar com o botão direito (Windows) ou

pressionar Control (Mac OS) na pasta raiz do
site.
Um menu de contexto aparecerá.
2. Selecione Nova Pasta.

A nova pasta aparecerá como uma subpasta na
pasta raiz.
O nome da pasta deve estar destacado
(Figura 6).
3. Digite um nome para a pasta.
4. Pressione Enter (Windows) ou Return

(Mac OS). Figura 6 Nomear uma nova pasta
© Adobe Systems Incorporated Gerenciando arquivos e links utilizando o painel Arquivos 3

Tags HTML
O que se segue é um guia de referência rápida para tags comumente usados em páginas HTML.
Principais tags de configuração para um documento HTML

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
<html></html> envolve todos os tags em um documento HTML e define que este é um documento HTML.
<head></head> envolve o tag de título e contém os títulos do documento e informações sobre a autoração do
documento.
<title></title> envolve o título do documento.
<body></body> envolve todos os tags que compõem o documento.

<body bgcolor=”name of color”></body> envolve todos tags que compõem o documento e confere ao
documento uma cor de fundo.
<body background=”path to image”></body> envolve todos tags que compõem o documento e confere ao
documento uma imagem de fundo.
Principais tags de formatação do documento.

<h1></h1> é um tag de cabeçalho que cria o texto de maior tamanho. O número do tag de cabeçalho pode
variar de 1 até 6. Aumentar o número faz o texto menos.
<p></p> cria parágrafos.
<br /> Cria quebra de linha.

<strong></strong> texto em negrito.
<em></em> enfatiza texto com itálico.
© Adobe Systems Incorporated Tags HTML 1

Links
<a href=”http://www.example.com”></a> Insere um link para o endereço fornecido no atributo href.
Tabelas de dados
<table></table> cria uma tabela. Este par de tags envolve toda a linha e tags de células na tabela.
<tr></tr> cria as linhas de uma tabela. Este par de tags envolve todos os tags de células em uma linha de
tabela e deve ser colocada entre tags <table></table>.
<td></td> cria uma célula em uma linha de tabela e deve ser colocada entre tags <tr></tr>.
<th></th> cria uma célula de cabeçalho de tabela em uma linha de tabela. Como os tags <td></td>, esses
tags devem ser colocados entre tags <tr></tr>.
Listas
<ol></ol> cria uma lista ordenada.
<ul></ul> cria uma lista não ordenada.

<li></li> envolve uma lista de item e deve ser colocada entre tags <ol></ol> ou tags <ul></ul>.
2 Análise de sitesTags HTML © Adobe Systems Incorporated

Processo profissional de criação e

desenvolvimento de sites
Quando planejam um projeto de web, os profissionais dividem o processo de design a de desenvolvimento
em fases tais como as que se seguem.
Reformulação e reforma
Definição
Objetivos e público
Coleta de conteúdo/ativos
Informação de conteúdo/estilo
Condições de entrega
Lançamento Estruturação
Plano de divulgação Organograma
Reformular e
Site entra no ar Wireframes
Refazer
Construção e Teste Design

Produção do site Propostas de design
Teste técnico Revisão do design
Teste de usabilidade Reformulação
Revisão Storyboard de produção
Teste do site revisado
Apresentação final
Revisão final
Note que este processo se dá em etapas para revisão, reformulação e reforma.
Definição Estruturação Design Construção Lançamento

e teste
Objetivos e público Organograma Propostas de Produção do site Plano de
alvo design divulgação
Coleta de conteúdo Wireframes Revisão do design Teste técnico e lista Colocar o site no ar
e ativos de bugs
Informação de Reformulação Teste de
conteúdo/estilo usabilidade
Condições de Storyboard de Reforma
entrega produção
Teste do site
reformado
Revisão final
© Adobe Systems Incorporated Processo profissional de criação e desenvolvimento de sites 1

Entrevista do cliente
Nome do grupo: _______________________________________ Data: ________________________
Nome do cliente: __________________________________________________
Tópicos da entrevista
• Objetivos e público alvo
• Conteúdo
• Requisitos de design
• Condições de entrega
Objetivos e público alvo

Identifique três objetivos de longo prazo para o seu site
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
O que o site deve inspirar o público a fazer depois que o visitam?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Identifique alguns objetivos imediatos do seu site.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Entrevista do cliente 1

Relacione as informações chave que você quer que seu público assimile do seu site.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Descreva as expectativas de conteúdo do seu público alvo.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Outras questões.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Entrevista do cliente © Adobe Systems Incorporated

Contexto do público
Descreva as características do seu público alvo.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Qual a faixa etária do seu público alvo?
____________________________________________________________________________________________
Qual o nível de leitura de seu público alvo?
____________________________________________________________________________________________
O seu público alvo tem necessidades especiais, tais como deficiências?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Com que frequência o seu público alvo está online?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Descreva o uso mais comum de web pelo seu público alvo.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Use alguns adjetivos sobre a forma que você quer que o seu público alvo perceba o seu site. (Exemplos:
prestigiado, amigável, institucional, divertido, vanguarda, inovador, modernidade, sério, maluco.)
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Outras questões.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Conteúdo
Qual deve ser o título do seu site?
____________________________________________________________________________________________
Que tópicos devem ser abordados pelo seu site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Outras questões.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Requerimentos de design
Existe alguma combinação de cores, fontes, objetos de imagem ou logomarcas que devam ser incluídos no
design?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Existem algumas cores ou fontes que você não deseja que sejam usadas no site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Quais são os sites que te agradam? Descreva elementos específicos que você gosta acerca de cada site,
tais como navegação, cores, layout e outros elementos de design.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Outras questões.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Com que navegadores (e que versões destes navegadores) este site tem que funcionar?
• Internet Explorer
• Mozilla Firefox
• AOL
• Outro:
Em que plataformas este site tem que funcionar?

• Macintosh
• Windows
• Outra:

Planejamento do projeto
Nome do grupo: _______________________________________ Data: ________________________
Nome do cliente: __________________________________________________
Analise as fases do projeto de seu cliente e determine a data em que cada tarefa será cumprida. Designe o
gerente de cada tarefa que cuidará para que a tarefa seja cumprida.
Estimativa Prazo de entrega Gerente

Fases do Projeto
de horas
Definição
Objetivos e público alvo
Coleta de conteúdo e ativos
Informação de conteúdo e estilo
Estruturação
Organograma
Wireframes
Design
Propostas de design
Revisão do design
Reformulação
Storyboard de produção
© Adobe Systems Incorporated Planejamento do projeto 1

Estimativa Prazo de entrega Gerente

Fases do Projeto
de horas
Construção e teste
Produção do site
Teste técnico e lista de bugs
Teste de usabilidade
Reforma
Teste do site reformado
Revisão final
Lançamento
Plano de divulgação
Colocar o site no ar
Tempo total = Prazo final
2 Planejamento do projeto © Adobe Systems Incorporated

Modelos de wireframes
© Adobe Systems Incorporated Modelos de wireframes 1

2 Modelos de wireframes © Adobe Systems Incorporated

© Adobe Systems Incorporated Modelos de wireframes 3

Nome: D. Smith Data: 20/12/09
Nome do site: Friends of the Golden Gate
Título da página: Página Inicial Golden Gate Nome do Arquivo: índice.html
Wireframe (Tudo específico a esta página; elementos comuns de navegação são opcionais)
Imagem/Logomarca
Início Cabeçalho do texto
História
Informações ao Turista Corpo do texto
Horário/Localização
corpo do texto do link corpo do texto do link corpo do texto do link
Cor de fundo (nome e/ou valor hexadecimal): Creme (#FFFCCC)
Textos de cabeçalho (Fontes estilos, bordas, margens, alinhamento, enchimento e cores): Arial, 18 pontos,
negrito, alinhadas à esquerda, enchimento de 6 pixels na parte superior e inferior, texto preto.
Corpo do texto (fontes, estilos, bordas, margens, alinhamento, enchimento e cores) Corpo - Times New
Roman, 11 pontos, alinhado à esquerda, texto preto. Corpo do link - Times New Roman, 10 pontos, alinhado
à esquerda, texto marrom escuro, sublinhado.
Descrição ( O que acontece na tela, tal como a ordem de exibição, texto e etapas da animação): Os botões
de navegação vão se tornar um pouco mais claros quando um visitante do site passar o cursor sobre um
deles. Quando o cursor não estiver sobre nenhum deles, todos exibirão a mesma cor mais escura.
Navegação (Botões ou nomes de links ou destinações):

Início: Vai para indice.html, História: Goes to historia.html, Informações ao Turista: Vai para turista.html,
Horários/Localização: Vai para horarios.html
Links: Cada link vai para um dos seguintes:
Museu de São Francisco (www.sfmuseum.org/assoc/bridge00.html)
Geometria da Construção da Ponte (www.faculty.fairfield.edu/jmac/rs/bridges.htm)
Fotografias da Ponte Golden Gate (www.pcimagenetwork.com/golden/golden.htm)
Arquivo de Objetos de Imagem (Todos os arquivos específicos a esta página): ggate_logo.png e

ggate_logo.gif.
© Adobe Systems Incorporated Storyboard de produção 1

Nome:_________________________________________________ Data:_____________________
Nome do site: ___________________________________________________
Nome do site: __________________________________ Nome do Arquivo: _____________________
Wireframe (Tudo específico a esta página; elementos comuns de navegação são opcionais)
Cor de fundo (nome e/ou valor hexadecimal) _______________________________________________
Textos de cabeçalho (Fontes estilos, bordas, margens, alinhamento, enchimento e cores) ________________
____________________________________________________________________________________________
Corpo do texto (fontes, estilos, bordas, margens, alinhamento, enchimento e cores) ____________________
____________________________________________________________________________________________
Descrição ( O que acontece na tela, tal como a ordem de exibição, texto e etapas da animação)
__________________________________________________________________________________________
____________________________________________________________________________________________
Navegação (Botões ou nomes de links ou destinações) _______________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Arquivos de Objetos de Imagem (Todos os arquivos específicos a esta página) ______________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Storyboard de produção 1

Como criar folhas de estilo em cascata (CSS)

Folhas de estilo em cascata (CSS) são conjuntos de regras de formatação que controlam a aparência do
conteúdo de uma página da web. Ao usar folhas de estilo, você pode garantir melhor coerência através de
seu site (mesmo que seu site consista somente de uma página). Estilos CSS oferecem uma ampla gama de
opções de formatação de texto. Esta apostila mostra como você pode fazer proveito das folhas de estilo em
cascada para manter a coerência e para aplicar características ao texto.
Se você tem usado o Adobe Dreamweaver CS4, você pode vir usando CSS sem saber. O padrão do
Dreamweaver é formatar todo texto como CSS. Toda vez que você muda certas propriedades de texto no
inspetor de Propriedades, tais como o tamanho ou cor do texto, o Dreamweaver solicita que você defina
uma nova regra de CSS ou atualize um estilo para o texto.
O Dreamweaver coloca estas definições de estilo no começo do código de cada página da web. Um conjunto
destas definições é conhecido como uma folha de estilos interna, porque está contido dentro de uma
página da web individual.
Folhas de estilo (às vezes chamadas folhas de estilo incorporadas) são ótimas para manter a coerência
dentro de um documento, mas as folhas de estilo em cascata são especialmente úteis na manutenção da
coerência através de várias páginas diferentes. Ao usar uma folha de estilo externa – um documento separado
que contém informações de estilo CSS – você pode garantir que a aparência do texto será coerente em
páginas múltiplas. A apresentação coerente não só tem aspecto mais profissional, como os especialistas de
usabilidade afirmam que os visitantes encontram mais facilmente aquilo que procuram com mais facilidade
nos sites onde a aparência e localização dos textos é mais coerente.
Definição dos estilos CSS

A maneira mais básica de se definir os estilos CSS no Dreamweaver é aplicando as opções de CSS do
inspetor de Propriedades. Quando faz isso, você é solicitado a criar uma nova regra CSS. Você tem que
nomear a nova regra e definir o tipo de CSS.
Um estilo Classe, semelhante aos estilos que você usa em programas de processamento de texto e
diagramação. Por exemplo, você pode desejar formatar todo o corpo do texto em Arial 10pt, em cor verde
escura. Você pode criar um estilo Classe com estes atributos e então aplicar este estilo a todo o corpo do
texto de seu site.
Um estilo Tag aplica formatação global a tags individuais de HTML, ao invés de seleções individuais. Suponha
© Adobe Systems Incorporated Como criar folhas de estilo em cascata (CSS) 1

Um estilo ID só é usado uma vez dentro de um documento ou página. É usado como um identificador (ID)
único para um estilo aplicado em cabeçalhos, banners, menus e outros elementos presentes em apenas um
local do documento.
Um estilo Composição é usado para formatar texto de formas diferentes, com base em como o usuário
interagir com o texto. Por exemplo, você pode usar um estilo Composição para mudar o aspecto do texto
quando o usuário desdobrar um link de sobreposição.
Sempre que possível, redefina os tags presentes ao invés de criar novos estilos CSS. Os tags presentes
fornecem uma hierarquia útil, tanto para você quanto para os usuários de seu site, e também facilitam o uso
de leitores de tela em seu site.
Além das opções de CSS do inspetor de Propriedades, você pode definir, aplicar e modificar estilos CSS
usando o painel CSS, o que você fará nesta apostila.
2 Como criar folhas de estilo em cascata (CSS) © Adobe Systems Incorporated

Para redefinir um HTML existente usando uma regra CSS seletor Tag:
2. Crie um novo documento HTML.
3. Salve e nomeie o documento Dreamweaver.
4. Digite algum texto no documento.
5. Selecione o texto. Figura 1 Texto com aplicação de tag padrão
6. Usando o inspetor de Propriedades, aplique ao texto um Cabeçalho 1
tag HTML como Cabeçalho 1.
O texto aparece no formato padrão Cabeçalho 1
(Figura 1).
7. Certifique-se de que o painel Estilos CSS esteja aberto e
expandido.
Se não estiver aberto, selecione Janela > Estilos CSS.
8. Para criar um novo estilo, clique no botão Nova Regra
Botão Nova Regra CSS
CSS (+) na parte inferior do painel CSS (Figura 2).
A caixa de diálogo Nova Regra CSS se abre (Figura 3). Botão Nova Regra CSS
9. No menu pop-up Tipo de Seletor, selecione Tag.

Esta opção permite que você acrescente propriedades Figura 2 Painel Estilos CSS
de CSS a um tag de HTML existente.
10. No menu pop-up Nome do Seletor, selecione h1 (o tag
para Cabeçalho 1).
11. No menu pop-up Definição da Regra, selecione Apenas
Este Documento ou Novo Arquivo de Folha de Estilos.
A opção Apenas Este Documento define o estilo como
parte da folha de estilos interna do documento. A opção
Novo Arquivo de Folha de Estilos define os estilos como
parte de uma folha de estilos externa.
12. Clique em OK.
Nota: Se você optar por criar uma folha de estilos externa
selecionando Novo Arquivo de Folha de Estilos, será Figura 3 Caixa de diálogo Nova Regra CSS
solicitado a selecionar uma localização para o novo
documento de folha de estilos (.css).

A caixa de diálogo Definição de Estilos CSS se abre com a

categoria Tipo selecionada (Figura 4). A caixa de diálogo
contém as opções listadas abaixo. (Para mais detalhes,
selecione Ajuda > Ajuda do Dreamweaver).
• Tipo altera as propriedades do texto, tais como fonte,
tamanho e cor.
• Fundo controla as propriedades do plano de fundo. Por
exemplo, você pode usar um fundo colorido ou uma
imagem ou criar um fundo fixo ou com rolamento.
Figura 4 Caixa de diálogo Definição de
• Bloco controla o espaçamento e alinhamento de texto e Regra CSS
linhas de um documento.
• Caixa altera a caixa que cerca um elemento de bloco.
Afeta propriedades como altura, largura, enchimento e
margens.
• Borda afeta as propriedades da borda ao redor de textos,
tais como estilo, largura e cor.
• Lista controla as propriedades da lista, tais como o tipografia
do texto e o aspecto dos marcadores.
• Posicionamento define a posição do texto em uma página.
• Extensões controla as quebras de página e a aparência
visual do cursor.
Figura 5 A caixa de diálogo Definição de
13. Selecione opções para Tipo, tais como as seguintes
Estilos CSS exibindo as opções de tipo
(Figura 5):
• Selecione Verdana, Arial, Helvetica, Sans-serif no menu
pop-up Font-family.
• Selecione 14 no menu pop-up Font-size, e selecione px
(pixels) como unidade de medida (no menu pop-up
imediatamente à direita do menu pop-up Font-size).
• Digite #006600 na caixa Cor, ou selecione uma cor no
seletor de cores.
Nota: Todos os estilos de Cabeçalho usam o padrão
negrito. Se você não desejar que o texto seja em negrito,
selecione Normal no menu pop-up Weight.
14. Clique em Aplicar.
Observe como o texto do Cabeçalho 1, ou o texto que Estilos CSS exibindo as opções de fundo
você selecionou, mudou no documento. (Talvez você
tenha que mover a caixa de diálogo).
15. Para alterar o fundo, selecione Fundo no painel de
Categorias à esquerda.
A categoria Fundo da caixa de diálogo Definição de
Estilos CSS se abre (Figura 6).

16. Selecione uma cor no seletor de cores ou digite um

número hexadecimal na caixa de diálogo Cor de Fundo,
tal como #CCCCCC. (Certifique-se de que a cor do fundo
seja mais clara que a cor do texto.)
17. Clique em Aplicar para visualizar suas alterações.
18. Para alterar a borda e suas propriedades, selecione Borda
no painel Categorias.
A categoria Borda da caixa de diálogo Definição de Figura 7 Caixa de diálogo Definição de
Estilos CSS se abre (Figura 7). Estilos CSS exibindo opções de formatação
19. Sob Style, você pode fazer alterações tais como: de bordas
desmarcar a opção Igual Para Tudo e selecionar a opção
Solid no menu pop-up Top.
20. Sob Width, você pode fazer alterações tais como: digitar
1 menu pop-up Top, e deixar pixels selecionado como a
unidade de medida.
21. Sob Cor, você pode fazer alterações tais como: digitar #006600, Figura 8 Texto com aplicação de
ou qualquer cor que tenha escolhido na etapa 13. formatação de novo estilo
22. Clique em OK.
A caixa de diálogo Definição de Estilos CSS se fecha.
Observe como o aspecto do texto Cabeçalho 1 que você
havia criado agora foi alterado (Figura 8).
23. Certifique-se de que o painel Estilos CSS esteja aberto.
Se não estiver, selecione Janela > Estilos CSS. Regra CSS de
24. Certifique-se de que Tudo está selecionado no Painel seletor Tag
Propriedades da
Estilos CSS. regra selecionada
Observe como o estilo h1 agora figura sob <style> na área
Todas as Regras, indicando que este tag faz parte da folha
de estilos. Observe também que as propriedades para este
tag aparecem na área Propriedades (Figura 9).
25. Para fazer mais alterações ao estilo Tag, selecione-o e
clique no Botão Editar Regra.
A caixa de diálogo Definição de Estilos CSS se abre.
Faça as mudanças que desejar. Quando terminar, clique
em OK.
Nota: Você pode também fazer alterações usando a área
Botão Editar
Propriedades do Painel Estilos CSS, mas é mais fácil Regra
fazer as alterações usando a caixa de diálogo Definição
de Estilos CSS.
26. Para aplicar o estilo textos novos, selecione o texto e
depois selecione Cabeçalho 1, ou o tag que você Figura 9 Estilo acrescentado ao painel
modificou, no inspetor de Propriedades de Texto. Estilos CSS

Para criar uma nova regra de CSS Classe:

4. Digite algum texto no documento. Certifique-se de que
nenhuma formatação está sendo aplicada no texto
(Figura 10). Figura 10 Texto sem aplicação de
5. Certifique-se de que o painel Estilos CSS esteja aberto. formatação
Se não estiver, selecione Janela > Estilos CSS.
CSS(+) na parte inferior do painel.
A caixa de diálogo Nova Regra CSS se abre (Figura 11).
7. No menu pop-up Tipo de Seletor, selecione Classe.
Esta opção cria uma nova regra de seletor Classe.
8. Na caixa Nome do Nome do Seletor, digite um nome para
o estilo, tal como .aviso.
Nota: Nomes de regras Classe devem começar com um
ponto e não podem conter espaços ou caracteres
especiais. Se esquecer de digitar o ponto, o Dreamweaver
vai acrescentá-lo automaticamente.
9. No menu pop-up Definição de Regra, selecione Apenas Figura 11 Caixa de diálogo Nova Regra
Neste Documento ou Novo Arquivo de Folha de Estilos. CSS
selecionando Novo Arquivo de Folha de Estilos, será
10. Clique em OK.
A caixa de diálogo Definição de Estilos CSS se abre
(Figura 12).
11. Selecione as opções para Tipo, tais como as seguintes Estilos CSS exibindo opções de tipo
(Figura 12):
• Selecione Arial, Helvetica, Sans-serif no menu pop-
up Font-family
• Selecione 12 no menu pop-up Font-size, e selecione
px (pixels) como unidade de medida.
• Digite #CC0033 na caixa Cor, ou clique na caixa Cor
e selecione a cor no seletor de cores.

12. Para mudar a formatação de blocos de texto, selecione

Bloco no painel Categoria. A categoria bloco da caixa de
diálogo Definição de Estilos CSS se abre (Figura 13).
13. Na caixa Letter-spacing, você pode fazer alterações como:
digitar 3 e selecionar pixels como unidade de medida.
Este ajuste acrescenta espaço entre cada letra.
14. Na caixa Text-indent, você pode fazer alterações como:
Isto recua a primeira linha de cada parágrafo. Estilos CSS exibindo opções de formatação
15. Clique em OK. de blocos de texto

16. Selecione o texto do documento.
17. Certifique-se de que o inspetor de Propriedades esteja
aberto e a opção HTML esteja selecionada.
No Windows, o inspetor de Propriedades fica atracado
na parte inferior da tela. Se o inspetor de Propriedades
não estiver aberto, selecione Janela > Propriedades. Figura 14 Inspetor de Propriedades de texto
18. Selecione aviso, ou o nome de seu estilo, no menu pop-up
Classe (Figura 14).
19. No documento, desmarque o texto posicionando o ponteiro
do mouse ao lado e clicando uma vez.
Observe como o formato o formato do texto muda
(Figura 15).
21. Certifique-se de que Tudo está selecionado no painel
Estilos CSS.
Observe como a recém-criada regra CSS agora consta Figura 15 Texto com aplicação de
formatação
sob <style> na Área Todas as Regras, indicando que a
nova regra faz parte de uma folha de estilos CSS. Observe
também como as propriedades do estilo figuram na área
Propriedades.
22. Para efetuar mais alterações ao estilo, selecione-o e
clique no botão Editar Regra.
Nota: Você também pode fazer alterações usando a
área Propriedades do painel Estilos CSS.

Exportação de regras CSS para uma folha de estilos externa

Você pode converter uma folha de estilos CSS interna em externa ao exportá-la, removendo a folha de
estilo CSS interna, e vinculando a folha de estilos CSS exportada a uma ou mais páginas da web.
Para exportar uma folha de estilos:
1. Certifique-se de que o painel Estilos CSS esteja aberto

(Figura 16).
Estilos CSS.
3. Selecione a regra CSS que deseja mover para uma folha
de estilos externa.
Nota: Para mover mais do que uma regra por vez, você
pode clicar ao manter a tecla Shift pressionada, selecionado
regras múltiplas que estejam em sequência. Para
selecionar regras múltiplas que não estejam em sequência,
você pode você pode clicar ao manter a tecla Control
(Windows) ou a tecla Command (Mac OS) pressionada,
selecionado os nomes das regras.
Figura 16 Painel Estilos CSS
4. Clique com o botão direito do mouse (Windows) ou
pressionando a tecla Control (Mac OS) na(s) regra(s)
selecionadas e selecione Mover Regras CSS no menu de
contexto.
A caixa de diálogo Mover Para Folha de Estilos Externa
Figura 17 Caixa de diálogo Mover para
se abre (Figura 17). Folha de Estilos Externa
5. Selecione a Nova Folha de Estilos e clique em OK.
A caixa de diálogo Salvar Arquivo de Folha de Estilos
Como se abre (Figura 18).
6. Procure uma localização para o arquivo CSS, digite um
nome para o arquivo, e clique em Salvar.
Nota: É aconselhável colocar os arquivos CSS em pasta
própria e também aconselhável nomear esta pasta como
“css.”
O Dreamweaver exporta o arquivo CSS.
Figura 18 Caixa de diálogo Salvar Arquivo

de Folha de Estilos Como

Para excluir uma folha de estilos interna:
1. No painel Estilos CSS, sob Tudo, selecione <style>.

2. Clique no botão Excluir Folha de Estilos Incorporada
O Dreamweaver remove a folha de estilos interna. Se a
folha de estilos interna contiver quaisquer estilos que ainda
estejam sendo usados na página, o texto afetado volta
Botão Excluir Folha de
para sua formatação padrão, ou toma a formatação Estilos Incorporada
definida na folha de estilos externa.

Vinculação a uma folha de estilos externa

É preferível usar uma folha de estilos externa, especialmente se tiver mais de uma página da web. Uma vez
que crie uma folha de estilos externa e a vincule a documentos múltiplos, você pode instantaneamente
alterar qualquer estilo em todos os seus documentos ao fazer alterações na folha de estilos externa.
Nota: Uma vez que comece a usar uma folha de estilos externa, é melhor fazer todas as mudanças de
formatação de texto por meio desta folha de estilos. Se você fizer as mudanças de estilo usando o inspetor
de Propriedades, o Dreamweaver vai automaticamente criar uma nova folha de estilos interna.
1. Abra um documento.
3. Clique no botão Anexar Folha de estilos (Figura 20).
A caixa de diálogo Anexar Folha de Estilos Externa se

abre (Figura 21).
4. Clique Procurar, encontre sua folha de estilos salva,

selecione-a, e clique em OK (Figura 22).
Anexar Folha de Estilos
Figura 21 Caixa de diálogo Anexar Folha

de Estilos Externa
Figura 22 Seleção de folha de estilos CSS

para anexar

5. Na caixa de diálogo Anexar Folha de Estilos Externa,

clique em OK (Figura 23).
O Dreamweaver anexa a folha de estilos a seu
documento (Figura 24).
Figura 23 Confirmação de vinculação de
As regras da folha de estilos agora estão disponíveis no
estilo
inspetor de Propriedades. Talvez você precise expandir
a folha de estilos para visualizar suas regras.
Você pode vincular a mesma folha de estilos a vários
documentos.
Quando você fizer alterações à folha de estilos, estas
alterações aparecerão em todos os documentos
vinculados à folha de estilos.
Figura 24 Folha de estilos anexada

Criação de folha de estilos externa

Você também pode criar uma folha de estilos externa.
(Figura 25).
CSS (+) na parte inferior do painel.
A caixa de diálogo Nova Regra CSS se abre.
6. Selecione um dos seguintes tipos de estilo: Figura 25 Painel Estilos CSS
• Classe (Pode se Aplicar a Qualquer elemento HTML).

Faça seu próprio tag HTML nomeando um novo estilo e
definindo sua formatação.
o No menu pop-up Tipo de Seletor, selecione Classe.
o Digite um nome na caixa Nome do Seletor.
Nota: nomes de Classe normalmente começam com um
ponto e não contêm espaços ou caracteres especia is.
Exemplo: .realce (Figura 26).
• Tag (Redefine um Elemento HTML). Altere o formato
padrão de qualquer tag em um documento. Figura 26 Crie seu próprio tag HTML
o No menu pop-up Tipo de Seletor, selecione Tag. (Classe)
o No menu pop-up Nome do Seletor, selecione o tipo

de tag redefinir (por exemplo, tag H1, Corpo, ou
Tabela) (Figura 27).
Figura 27 Altere um tag existente

• ID (Se Aplica a Somente Um Elemento HTML).

o No menu pop-up Tipo de Seletor, selecione ID.
• Composição (Baseada em Sua Seleção).

o No menu pop-up Tipo de Seletor, selecione
Composição.
de controle a aplicar ao texto vinculado (Figura 28).
- Link controla o estado normal do link.
Figura 28 Criação de um estilo Composição
A cor padrão é azul.
- Visitado controla o formato do link após o
visitante ter clicado nele. A cor padrão é roxo.
- Hover controla o formato do link quando o mouse
é movimentado sobre o link. A cor padrão é
vermelho.
- Ativo controla o formato do link enquanto está
sendo clicado. A cor padrão é vermelho.
8. No menu pop-up Definição de Regra, selecione Novo

Arquivo de Folha de Estilos.
9. Clique em OK. de Folha de Estilos Como
10. Nomeie e salve a folha de estilos em sua pasta raiz local.
11. Certifique-se de que a Raiz do Site está selecionada na

caixa Relativo A.
12. Clique em Salvar. Folha de estilo
13. Use a caixa de diálogo Definição de Estilos CSS para

definir os formatos do novo estilo.
14. Clique em OK.

A nova folha de estilos externa é automaticamente
anexada ao documento aberto e listada no painel Estilos
CSS (Figura 30).
Figura 30 Nova folha de estilos externa

Edição de estilos
1. Para visualizar as regras de uma folha de estilos, clique
no símbolo de adição (+) ao lado da folha de estilos que
deseja editar no painel Estilos CSS.
O Dreamweaver exibe as regras da folha de estilos.
2. Selecione a regra que deseja editar.

Editar Regra
3. Na parte inferior do painel Estilos CSS, clique no botão
Editar Regra (Figura 31).
A caixa de diálogo Definição de Estilos CSS do estilo
selecionado se abre (Figura 32).
4. Faça as mudanças de formatação de regra na caixa de

diálogo Definição de Regra CSS. Depois clique em OK.
As mudanças são aplicadas imediatamente. Como você
está editando uma folha de estilos externa, as mesmas
alterações são aplicadas a quaisquer outros documentos
vinculados a esta folha de estilos.

Estilos CSS

Como usar modelos

Você pode usar um documento modelo do Adobe Dreamweaver CS4 para criar várias páginas com o
mesmo layout. Em um modelo, você controla quais elementos de página devem permanecer constantes em
documentos baseados neste modelo, e quais elementos devem mudar de página a página. Modelos são úteis
na construção de um site em que a maioria das páginas têm o mesmo cabeçalho, sistema de navegação, e
outros elementos. O uso de modelos ajuda você a economizar tempo, bem como a criar e manter um
aspecto coerente quando mais de uma pessoa está desenvolvendo o site.
Criação de um modelo
2. Construa uma página que contenha elementos
destinados a aparecer em todas as páginas de
conteúdo, tais como objetos de imagem, uma
barra de navegação, e estruturas comuns de
layout, como tabelas (Figura 1).
Nota: Você pode desejar criar elementos de
navegação no Adobe Fireworks CS4 e exportá-
Figura 1 Elementos comuns em uma página da web
los como documentos de HTML.
3. Selecione Arquivo > Salvar Como Modelo.
4. Na caixa de diálogo Salvar Como Modelo
(Figura 2), dê um nome ao modelo. Você
também pode digitar uma breve descrição do
modelo. Depois clique em Salvar. De o
Dreamweaver lhe perguntar se deseja atualizar
os links, clique em Sim.
O Dreamweaver cria uma pasta Modelos na
pasta raiz de seu site e salva seu modelo nesta
pasta. Arquivos de Modelo têm extensão .dwt. Figura 2 Caixa de diálogo Salvar Como Modelo
© Adobe Systems Incorporated Como usar modelos 1

Para criar uma região editável:

Regiões editáveis de um modelo são as partes do layout da página que podem ser alteradas nos arquivos
baseados no modelo. Regiões bloqueadas (não editáveis) são as partes do layout da página que permanecem
constantes de página a página. Todas as regiões de um novo modelo são bloqueadas, de forma que, para que
o modelo seja útil, você deve tornar algumas regiões editáveis.
1. Na categoria Layout na barra Inserir, clique em

Desenhar Div AP, e depois arraste o cursor na
página para criar um novo div para representar
a região editável do modelo.
Nota: Você também pode clicar para indicar
onde posicionar a região editável, mas o uso de
um div proporciona maior controle sobre o layout
da página.
2. Com o div ainda selecionado, execute uma das
seguintes opções para criar uma região editável:
• Selecione Inserir > Objetos de Modelo > Região
Editável. Figura 3 Botão Modelos na barra Inserir
• Clique com o botão direito (Windows) ou clique
ao pressionar a tecla Control (Mac OS) na região
e selecione Modelos > Nova Região Editável
no menu de contexto.
• Na categoria Comum da barra Inserir, clique no
botão Modelos (Figura 3), e selecione Região
Editável no menu pop-up. Figura 4 Caixa de diálogo Nova Região Editável
A caixa de diálogo Nova região editável se abre
(Figura 4).
3. Na caixa de diálogo, digite um nome particular
para a região, e clique em OK.
A região editável fica dentro do div selecionado,
cercada por um retângulo azul claro no
(Figura 5).
Nota: Você não pode usar o mesmo nome para
mais de uma região editável em um mesmo
modelo. Use somente letras e números no nome.
4. Salve e feche o modelo.
Figura 5 Nova região editável dentro do div Modelos
2 Como usar modelos © Adobe Systems Incorporated

Para criar um documento com base em

um modelo:
Uma vez que você cria um modelo, você pode usá-
lo para criar novos documentos.
1. Selecione Arquivo > Novo.
2. Na caixa de diálogo Novo Documento, selecione
a categoria Modelos.
A caixa de diálogo exibe os seus sites e todos os
modelos selecionados para o site. (Figura 6).
3. Na lista Sites, selecione o site que contém o
Figura 6 Página da categoria Modelo na caixa de
modelo que você deseja usar.
diálogo Novo Documento
4. Selecione o modelo que você deseja usar.
5. Certifique-se de que a opção Atualizar a Página
Quando o Modelo for Alterado está selecionada.
Com esta opção selecionada, o Dreamweaver
pode atualizar todas as páginas baseadas em
modelo se você alterar o modelo posteriormente.
6. Clique em Criar para criar uma nova página
baseada em modelo.
O documento se abre na janela Documento.
Edição de um modelo
Você pode editar um modelo a qualquer hora, mesmo que já tenha criado páginas baseadas no modelo.
1. Selecione Janela > Ativos.
O painel Ativos se abre.
2. Clique no botão Modelos no lado esquerdo do
painel (Figura 7).
Uma lista de modelos do seu site aparece no
painel inferior. O painel superior exibe uma
visualização do modelo selecionado. (Talvez
você tenha que rolar o painel de visualização
para vê-lo). Edição de Modelos
3. Selecione o modelo que deseja editar e execute
uma das seguintes opções:
• Clique duas vezes no nome do modelo.
• Clique no botão Editar do painel (Figura 7). Figura 7 Painel Ativos
4. Edite o modelo na janela Documento, alterando
os elementos não editáveis ou criando regiões
editáveis no modelo, conforme desejado.
5. Salve o modelo editado escolhendo Arquivo >
Salvar.
A caixa de diálogo Atualizar Arquivos de Modelo
se abre, com uma lista de documentos baseados Figura 8 Caixa de diálogo Atualizar Arquivos de
em seu modelo (Figura 8). Modelo
© Adobe Systems Incorporated Como usar modelos 3

6. Clique em Atualizar para atualizar os

documentos com base nas alterações feitas em
seu modelo.
Se você renomeou ou excluir quaisquer regiões
editáveis, a caixa de diálogo Nomes de Região
Inconsistentes se abre (Figura 9). Ela lista as
regiões dos documentos baseadas no modelo
que não mais existe.
Nota: Se você habilitou devolução e retirada, e
os arquivos a serem atualizados estão
devolvidos, o Dreamweaver solicita que você Figura 9 Caixa de diálogo Nomes de Região
os retire antes de atualizá-los. Inconsistentes com menu Mover Conteúdo para
7. Selecione uma região da lista. Nova Região
8. No menu Mover Conteúdo Para Nova Região,
selecione uma nova região na qual deseja
posicionar o conteúdo da região selecionada
(Figura 9).
9. Repita as etapas 7 e 8 nas regiões restantes da
lista.
10. Clique em OK.
A caixa de diálogo Atualizar Páginas exibe
um resumo das atualizações realizadas (Figura
10). Talvez você precise selecionar Exibir
Registro para visualizar a informação de status.
11. Clique em Fechar.
Figura 10 Caixa de diálogo Atualizar Páginas
Exclusão de modelo
1. Selecione o modelo no painel Ativos.
2. Clique no botão Excluir (ícone de lixeira) na parte inferior do painel e confirme que você deseja deletar
o modelo.
O arquivo de modelo é excluído de seu site.
Os documentos que foram baseados em um modelo que você deletou mantêm a estrutura e as regiões
editáveis que o arquivo de modelo tinha antes de ser deletado. Para transformar o documento em um
arquivo normal de HTML sem regiões editáveis ou bloqueadas, você precisa desconectá-lo do modelo.
Desconectar um modelo
Para remover a estrutura do modelo e as limitações de um documento baseado em um modelo, você pode
desconectar o documento do modelo. Quando o documento é desconectado de seu modelo, você pode editar
qualquer elemento, inclusive as regiões anteriormente bloqueadas.
1. Para desconectar um documento de um modelo, abra o documento.
2. Selecione Modificar > Modelos > Desconectar de Modelo.
4 Como usar modelos © Adobe Systems Incorporated

Como usar bibliotecas

Você pode usar bibliotecas no Adobe Dreamweaver CS4 para armazenar elementos de página tais como
imagens, texto, áudio ou tabelas que você queira usar em seu site. Quando você insere um item na biblioteca,
na realidade o Dreamweaver insere um link para o item na biblioteca. Se mais tarde você precisar fazer uma
modificação em um item da biblioteca, como mudar um texto ou imagem, atualizar o item da biblioteca
automaticamente atualiza cada ocorrência do item em todas as páginas do site onde o item estiver inserido.
Criação de um item de biblioteca
1. Inicie o Dreamweaver e abra o documento que

contém o elemento que você quer salvar como
um item da biblioteca.
2. Selecione o elemento (como uma imagem ou
texto) para salvar como um item de biblioteca.
3. Selecione Janela > Ativos, clique no botão
Biblioteca e depois clique no botão Novo Item Botão Biblioteca
de Biblioteca na parte inferior direita do painel Botão Novo

Item de Biblioteca
Ativos (Figura 1).
4. Digite um nome para o novo item de biblioteca:
Certifique-se de que Untitled está selecionado,
digite um nome e pressione Enter (Windows) Figura 1 Botões Biblioteca e Novo Item de
ou Return (Mac OS) (Figura 2). Biblioteca
Cada item da biblioteca é salvo como um arquivo
individual (com a extensão de arquivo .lbi) na
pasta Biblioteca da pasta raiz local do site.
Figura 2 Nomeação de um novo item de biblioteca
© Adobe Systems Incorporated Como usar bibliotecas 1

Inserção de um novo item de biblioteca

1. Posicione o ponto de inserção na janela
Documento onde você quer inserir um novo item
de biblioteca.
2. Certifique-se de que o painel Biblioteca está
Botão Inserir
aberto. Em caso negativo, selecione Janela >
Ativos e clique no botão Biblioteca no lado
esquerdo do painel Ativos.
Figura 3 Inserção de um item de biblioteca em uma
O painel Ativos se abre e exibe a categoria
página
Biblioteca.
3. Arraste o item de biblioteca do painel Ativos
para a janela Documento ou selecione um item
e clique no botão Inserir na parte inferior do
painel (Figura 3).
Edição de um item de biblioteca

aberto. Em caso negativo, selecione Janela >
Ativos e clique no botão Biblioteca no lado
esquerdo do painel Ativos.
2. Selecione um item da biblioteca.
3. Clique no botão Editar na parte inferior do painel
Ativos.
Figura 4 Janela de edição da Biblioteca
O Dreamweaver abre uma nova janela para a
edição do item de biblioteca (Figura 4). Esta
janela é semelhante à janela Documento. Você
pode identificar que este é um item de biblioteca
pela extensão de arquivo .lbi na aba do
documento.
4. Edite o item de biblioteca e depois salve suas
mudanças.
A caixa de diálogo Atualizar Itens de Biblioteca
se abre, com uma lista de arquivos que usam o
item de biblioteca (Figura 5). Figura 5 Caixa de diálogo Atualizar Itens de
Biblioteca se abre
2 Como usar bibliotecas © Adobe Systems Incorporated

5. Clique em Atualizar para substituir o item de

biblioteca original pela versão editada nos
arquivos que usam o item de biblioteca.
A caixa de diálogo Atualizar Páginas se abre.
6. Para ver um relatório do processo de atualização,
certifique-se de que a opção Mostrar Registro
está selecionada (Figura 6).
7. Clique em Concluir.
Figura 6 Relatório Atualização de Páginas
Atualização de todos os documentos para usar itens de biblioteca atuais

Se você não optar por atualizar documentos que usam itens de biblioteca enquanto você edita itens individuais
da biblioteca, você pode atualizar posteriormente todas as páginas do site com a versão atualizada de todos
os itens da biblioteca.
1. Abra um item de biblioteca ou uma página que
contenha um item de biblioteca.
2. Selecione Modificar > Biblioteca > Atualizar
Páginas.
A caixa de diálogo Atualizar Páginas se abre
(Figura 7).
3. Do menu pop-up Procurar em selecione Site
Inteiro, e depois selecione o nome do site do
menu pop-up adjacente.
4. Certifique-se de que Itens de Biblioteca está
selecionado na seção Atualizar.
5. Clique em Iniciar. Figura 7 Caixa de diálogo Atualizar Páginas
O Dreamweaver atualiza os documentos e
fornece um relatório do processo de atualização
(Figura 8). Se você atualizou o documento
enquanto editava itens de biblioteca, este
relatório que nenhuma atualização adicional foi
necessária.
Figura 6 Relatório Atualização de Páginas
© Adobe Systems Incorporated Como usar bibliotecas 3

Como adicionar animações e vídeos Flash em um site

Para incrementar o interesse e a interatividade, você pode acrescentar animações criadas no Adobe Flash
CS4 e vídeos Flash a seu site. As animações Flash comportam conteúdo animado e interativo, ao passo que
os vídeos Flash incorporam vídeo de outras fontes, como de uma câmera de vídeo. Por exemplo, você pode
acrescentar uma animação Flash de instrução sobre aeromodelos, ou um slide show, ou algum vídeo que
documente um evento comunitário.
Acréscimo de Animações Flash (Arquivos SWF)
1. Inicie o Adobe Dreamweaver e abra o

documento onde deseja inserir a animação Flash.
2. Certifique-se de que a categoria Comum da

barra Inserir está marcada.
3. Clique na seta para baixo do botão Mídia e

selecione SWF no menu pop-up (Figura 1).
A caixa de diálogo Selecionar Arquivo se abre

(Figura 2).
Figura 1 Menu pop-up Mídia
Figura 2 Caixa de diálogo Selecionar Arquivo
© Adobe Systems Incorporated Como adicionar animações e vídeos Flash em um site 1

4. Localize e selecione a animação Flash (SWF),

e depois clique em OK (Windows) ou Choose
(Mac OS).
Object se abre (Figura 3).
5. Na caixa Título, digite um breve título para
identificar o conteúdo da animação. Depois
Figura 3 Caixa de diálogo Atributos de Acesso a
clique em OK.
Tag Object
Um alocador de espaço de conteúdo Flash, ao
invés de uma cena da animação Flash em si,
aparece no documento (Figura 4). Isto
acontece porque a página está apontando para
o arquivo SWF. Quando o visitante abrir esta
página, o navegador executa o arquivo SWF.
Figura 4 Alocador de Espaço de conteúdo Flash

Para definir as opções de execução:
Para definir como uma animação é executada quando a página é carregada, você ajusta as opções do
6. Certifique-se de que o alocador de espaço de

conteúdo Flash está selecionado.
7. No inspetor de Propriedades (Figura 5), Figura 5 Inspetor de Propriedades Flash
selecione a opção Loop para fazer com que a
animação se repita enquanto o visitante
permanecer na página. Ou, se você não desejar
que a animação se repita, certifique-se de que a
opção Loop não está marcada.
8. Seleciona a opção Execução Automática para
fazer com que a animação seja executada
quando a página for carregada.
9. Para testar a animação, clique em Executar.
Dreamweaver executa o arquivo Flash no
documento, exibindo o que os visitantes verão
quando visualizarem a página em um navegador.
10. Quando terminar de visualizar a animação Flash,
clique em Parar no inspetor de Propriedades.
2 Como adicionar animações e vídeos Flash em um site © Adobe Systems Incorporated

Acrescentar vídeo Flash (arquivos FLV)

O vídeo Flash é executado como qualquer outro conteúdo de vídeo. Quando você acrescenta um vídeo
Flash, o Dreamweaver também insere um conjunto de controles de execução. Estes controles aparecem no
navegador quando um visitante abre a página.
1. Clique na seta para baixo do botão Mídia da

barra Inserir e selecione FLV no menu pop-up.
A caixa de diálogo Inserir FLV se abre
(Figura 6).
2. Clique no botão Procurar ao lado da caixa de
texto URL.
3. Localize e selecione o vídeo Flash (FLV) e
depois clique em OK (Windows) ou Choose
(Mac OS).
4. Certifique-se de que a opção Vídeo de
Download Progressivo esteja selecionada no
menu Tipo de Vídeo, na parte superior da caixa
de diálogo.
A opção Vídeo de Download Progressivo Figura 6 Caixa de diálogo Inserir FLV
permite que os visitantes assistam à animação
à medida em que baixam, ao invés de esperar
até que o vídeo inteiro tenha baixado.
Nota: A opção Vídeo de Fluxo Contínuo requer
a utilização do Adobe® Flash® Media Server.
5. Clique no botão Detectar Tamanho para
preencher as caixas Largura e Altura.
O Dreamweaver necessita desta informação
para incluir o vídeo.
6. Selecione a capa no menu pop-up Capa. Figura 7 Vídeo Flash em um navegador com capa
Isto define o aspecto dos controles de execução Clear Skin selecionada
do vídeo (Figura 7).
7. Selecione a opção Executar Automaticamente
para fazer com que o vídeo seja executado
quando a página for carregada.
8. Selecione a opção Retroceder Automaticamente
para fazer com que o vídeo retroceda
automaticamente quando chegar ao fim.
© Adobe Systems Incorporated Como adicionar animações e vídeos Flash em um site 3

9. Clique em OK para fechar esta caixa de diálogo

e inserir o vídeo.
Um alocador de espaço aparece em seu

10. Salve o documento.
Nota: Se a caixa de diálogo Copiar Arquivos

Dependentes se abrir, clique em OK para copiar
os scripts necessários para seu site para garantir
a execução adequada do vídeo.
Figura 8 Alocador de espaço de vídeo Flash
selecione um navegador no sub-menu para
visualizar a página e testar o vídeo.
4 Como adicionar animações e vídeos Flash em um site © Adobe Systems Incorporated

Como efetuar a devolução e retirada de arquivos

Quando você está trabalhando em uma equipe colaborativa, você pode utilizar o Adobe Dreamweaver CS4
para efetuar a devolução e retirada de arquivos de servidores locais e remotos. A retirada de arquivos é
como declarar “Estou trabalhando neste arquivo agora – não toque nele!” Quando um arquivo é retirado, o
Dreamweaver exibe uma marca de seleção ao lado do ícone do arquivo no painel Arquivos a também exibe
o nome da pessoa que retirou o arquivo. A devolução de um arquivo torna o arquivo disponível no servidor
remoto para outros membros da equipe para retirá-lo e editá-lo em seus computadores. A devolução também
permite que outros membros da equipe vejam as mudanças que você fez.
Retirada de arquivos
Para retirar arquivos em um servidor remoto:
2. No painel Arquivos (Figura 1), selecione o seu site local do menu Site.
3. Clique no botão Expandir/Recolher no painel Arquivos (Figura 1).
4. Clique no botão Estabelece Conexão com Host Remoto (Figura 2).
Botão Expandir/Recolher Botão Estabelece Conexão com Host Remoto

Menu Site
Figura 2 Painel Arquivos expandido para exibir site

remoto
Figura 1 Painel Arquivos
© Adobe Systems Incorporated Como efetuar a devolução e retirada de arquivos 1

Você agora está conectado com o site remoto. Botão Retirar Arquivo(s)
Os painéis dos sites remoto e local estão lado a

lado (Figura 3). Você pode também alternar
entre estas duas janelas quando o painel
Arquivos está recolhido.
5. Selecione um ou mais arquivos no painel Site

Remoto e clique no botão Retirar Arquivo(s)
no topo do painel Arquivos (Figura 3).
Nota: Se o botão Retirar Arquivo(s) não estiver Figura 3 Painéis Site Remoto e Site Local
disponível, abra a caixa de diálogo Definição
do Site de seu site, mude para a categoria
Remoto e selecione Habilitar Devolução e
Retirada de Arquivo e depois digite seu endereço
de e-mail.
A caixa de diálogo Arquivos Dependentes se

abre (Figura 4). Figura 4 Caixa de diálogo Arquivos Dependentes
Arquivos dependentes são aqueles que são

usados ou exibidos em uma dos arquivos que
você escolheu. Eles incluem quaisquer imagens
ou animações exibidas na página, assim como
folhas de estilo externas vinculadas à página.
6. Para baixar arquivos dependentes juntamente

com os arquivos selecionados, clique Sim. Caso
contrário, clique Não.
O Dreamweaver exibe uma marca de seleção

ao lado de cada arquivo que você retirou, ao
lado de seu nome.
2 Como efetuar a devolução e retirada de arquivos © Adobe Systems Incorporated

Devolução de arquivos
Você pode editar arquivos retirados em seu computador. Quando você concluir seu trabalho nos arquivos
retirados, lembre-se de devolvê-los de forma que outros membro de seu grupo possam ter acesso à eles.
Para devolver arquivos para um servidor remoto:
1. No painel Arquivos (Figura 1), selecione o seu Arquivo retirado

por um membro
site local do menu Site. da equipe Botão
Atualizar
2. Selecione um ou mais arquivos retirados ou
novos na janela Arquivos Locais no painel
Arquivos.
Nota: Uma marca de seleção de cor verde ao Botão
lado do nome de um arquivo indica que eles está Devolver
atualmente retirado por você. Uma marca de
seleção de cor vermelha indica que o arquivo
está retirado por um outro membro da equipe. Arquivo retirado
Você pode clicar no botão atualizar para por você
descobrir o estado atual de arquivos no site
Figura 5 Devolver Arquivos
remoto (Figura 5).
3. Clique no botão Devolver no topo do painel
Arquivos (Figura 5).
A caixa de diálogo Arquivos Dependentes se
abre (Figura 6).
4. Para devolver arquivos dependentes juntamente
com os arquivos selecionados, clique Sim. Caso Figura 6 Caixa de diálogo Arquivos Dependentes
contrário, clique Não.
Na visualização expandida do painel Arquivos,
o Dreamweaver exibe um ícone de bloqueio no
painel Arquivos Locais ao lado de cada arquivo
que você devolver, e isto faz com que a marca Figura 7 Arquivo devolvido
de seleção que era exibida quando o arquivo
estava retirado desapareça (Figura 7).
Dado que o administrador de seu site o tenha
habilitado, você pode visualizar e imprimir
qualquer arquivo bloqueado no painel Arquivos
Locais. Contudo, o ícone bloqueio indica que
você não pode editar o arquivo e salvá-lo, sem
antes efetuar a retirada.
5. Clique no botão Expandir/Retrair para retrair o
painel Arquivos.
© Adobe Systems Incorporated Como efetuar a devolução e retirada de arquivos 3

Desfazer retirada
Por vezes, depois de retirar um arquivo e fazer mudanças nele, você pode querer mudar descartar estas
mudanças. O comando Desfazer Retirada possibilita a devolução de um arquivo sem as mudanças feitas
nele.
1. No painel Arquivos, selecione o seu site local do menu Site.
2. Selecione um ou mais arquivos retirados na janela Arquivos Locais no painel Arquivos.
3. Clique com o botão direito (Windows) ou clique Control (Mac OS) e selecione Desfazer Retirada no
menu de contexto.
4 Como efetuar a devolução e retirada de arquivos © Adobe Systems Incorporated

Como criar um calendário

Extensões são recursos que você pode facilmente adicionar ao Adobe Dreamweaver CS4. Você pode usar
vários tipos de extensões; por exemplo, existem extensões que permitem reformatar tabelas, conectar à
bancos de dados back-end ou ajudam a escrever script para navegadores. Extensões são instaladas e
removidas utilizando o Adobe Extension Manager CS4.
A extensão Calendário para o Dreamweaver é um modo rápido de criar um calendário editável. Usos
incluem calendários de empresas, calendários escolares, e listas de eventos comunitários que podem ser
atualizados e mudados facilmente.
1. Baixe a extensão Objeto Calendário do site da 5. Configure as preferências que desejar na caixa
Adobe: www.adobe.com/exchange/dreamweaver/ de diálogo Inserir Calendário.
Nota: Para baixar extensões gratuitas, você 6. Clique OK.
precisa de tem uma ID Adobe. A inscrição é
O calendário do mês aparece como uma tabela
gratuita. Para encontrar o Objeto Calendário,
no documento.
talvez você tenha que clicar o botão Buscar no
Exchanges (Search Exchanges) e digitar 7. Para adicionar informação a um dia, clique em
Calendar Object (Objeto Calendário) como a sua célula e digite.
palavra chave para a sua busca. A extensão é
gratuita para baixar.
2. Localize a extensão que você baixou e clique
duas vezes para ativar o Gerente de Extensão.
Siga as instruções de instalação.
Quando a instalação for completada, a extensão Figura 1 Gerente de Extensão com extensão
Calendário instalada
vai aparecer no Gerenciador de Extensão com
uma marca de seleção na coluna Habilitado
(Figura 1).
Nota: Para instalar extensões às quais todos os
usuários de um sistema operacional de múltiplos
usuários tenham acesso, você tem que estar
logado como Administrador (Windows) ou root
(Mac OS).
3. Feche o Gerente de Extensões e inicie o
Dreamweaver.
4. Selecione Inserir > Calendário. A caixa de
diálogo Inserir Calendário se abre (Figura 2). Figura 2 Caixa de diálogo Inserir Calendário
© Adobe Systems Incorporated Como criar um calendário 1

Como criar formulários

Você pode usar formulários para interagir ou coletar informações com os visitantes do site. Com formulários,
os visitantes podem proporcionar feedback, assinar um livro de visitas, responder pesquisas ou fazer uma
encomenda de mercadoria. No Adobe Dreamweaver CS4 você pode criar uma variedade de elementos de
formulários, tais como campos de texto, campos de senha, botões de opção, caixas de seleção, menus
pop-up, e imagens clicáveis (tais como um botão Enviar).
A categoria Formulários na barra Inserir (Figura 1) contém botões para criar formulários e inserir elementos
de formulário.
Figura 1 Categoria Formulários na barra

Inserir
Os dados colhidos em formulários são em geral enviados para um banco de dados em um servidor ou via e-
mail. Para configurar o processamento do formulário, contate o administrador do seu site. Esta apostila
ajuda você a criar a interface do usuário de um formulário.
© Adobe Systems Incorporated Como criar formulários 1

Configuração de um formulário • POST envia o conteúdo do formulário diretamente

para o servidor de maneira que não é visível para
1. Abra uma página no Dreamweaver.
o visitante. Use POST se os dados do formulário
2. Coloque um ponto de inserção na página onde podem ser longos (Se por exemplo o formulário
você deseja inserir um formulário ou desenhe inclui um campo de texto que o visitante pode usar
um novo div para um posicionamento mais para digitar uma quantidade ilimitada de texto).
preciso do formulário em sua página.
5. Na caixa de texto Ação, digite o URL ou script
Nota: Para desenhar um novo div, clique em CGI que processará o formulário..
Desenhar Div AP na categoria Layout na barra
Nota: Obtenha esta informação do administrador
Inserir e depois arraste para desenhar o div.
do seu site.
Certifique-se de que o div seja grande o bastante
para conter todo o formulário que você deseja criar.
3. Selecione a categoria Formulário na barra
Inserir (Figura 1), e clique Formulário.
Um formulário em branco aparece, com um
contorno pontilhado em vermelho (Figura 2).
Você coloca todos os elementos do formulário
dentro deste contorno. Se você colocou o
formulário dentro de um div, você pode ter que
clicar fora do div para ver a totalidade do
contorno do formulário.
As opções de formulários aparecem no inspetor
de Propriedades. Figura 2 Formulário em branco
4. Do menu pop-up Método no inspetor de
Propriedades (Figura 3), selecione ou GET ou
POST.
• GET vincula o conteúdo do formulário para o
URL especificado na caixa de texto Ação.
Utilize GET se os dados do formulário são
curtos e o resultado do formulário levará o
visitante para a pagina que você deseja que o
visitante seja capaz de adicionar aos favoritos. Figura 3 Menu Método no inspetor de Propriedades
Acréscimo de elementos de formulário

Utilizando a categoria Formulários na barra Inserir, você pode inserir quaisquer combinações de elementos
de formulário dentro do contorno vermelho do formulário. Você pode utilizar tabelas para diagramar estes
elementos se assim o escolher.
Utilizando campos de formulário
Campos de formulário habilita os visitantes do site a digitarem texto dentro de um formulário. Campos de
formulário incluem o seguinte:
• Campos de texto, nos quais um visitante digita uma resposta
• Campos de texto, nos quais um visitante digita o vínculo de um arquivo para carregar em seu servidor
2 Como criar formulários © Adobe Systems Incorporated

Para adicionar um campo de texto: Nota: Você também pode criar um campo de
texto com múltiplas linhas clicando no botão Área
Campos de texto proporciona um espaço no qual
de Texto na barra Inserir.
visitantes pode digitar texto.
1. Clique no botão Campo de Texto na barra Inserir.
Input se abre (Figura 4).
2. Na caixa de diálogo Atributos de Acesso a Tag
Input digite um nome único para o campo de
texto na caixa de texto ID.
Você pode utilizar qualquer combinação de letra,
números e um símbolo de sublinhado (_).
A ID é usada pelo HTML e/ou código Javascript
para distinguir este tag input dos outros, mas ele
não é visível aos visitantes do site.
3. Digite um rótulo para o campo de texto na caixa
de texto Rótulo. Você pode deixar as outras
propriedades na caixa de diálogo em seus
valores padrões.
Figura 4 Caixa de diálogo Atributos de Acesso a
O rótulo será exibido ao lado do campo de texto,
Tag Input
indicando para o visitante o que deve colocar
no campo.
4. Clique no botão OK para fechar a caixa de
diálogo Atributos de Acesso a Tag Input.
O campo de texto aparece no formulário
(Figura 5).
5. Clique no campo de texto (não no rótulo) para
selecioná-lo.
6. No inspetor de Propriedades do Formulário
(Figura 6), selecione um dos três tipos de
campos de texto:
• Linha Única de texto para respostas Figura 5 Exemplo de campo de texto no formulário
curtas
• Múltiplas Linhas de texto para respostas
longas tais como a descrição de um
problema com uma aquisição feita pelo
visitante
• Texto de Senhas para senhas (Nos quais
asteriscos aparecem no lugar dos Figura 6 Inspetor de Propriedades do formulário
caracteres digitados) Campo de Texto

Para adicionar um campo de arquivo:

Um campo de arquivo permite aos visitantes do site a selecionar um arquivo de seus computadores (tais
como um documento de um processador de texto ou um arquivo de imagem) e carregá-lo em seu servidor.
Um campo de arquivo assemelha-se a outros campos de texto de linha única, exceto que também proporciona
um botão Procurar. O visitante tento pode digitar o vínculo para o arquivo que ele quer carregar ou utilizar o
botão Procurar para localizar e selecionar o arquivo.
1. Clique no botão Campo de Arquivo na barra

Inserir.
Input se abre.
Input, digite um nome particular para o campo
de arquivos na caixa de texto ID. Figura 7 Exemplo de campo de arquivo

3. Digite um rótulo para o campo de arquivo na
caixa de texto Rótulo. Você pode deixar as
outras propriedades na caixa de diálogo em seus
valores padrões.
4. Clique no botão OK para fechar a caixa de Figura 8 Inspetor de Propriedades formulário
diálogo Atributos de Acesso a Tag Input. Campo de Arquivo
O campo de arquivo aparece no seu documento

(Figura 7).
5. Clique no campo de arquivo (não no rótulo) para
selecioná-lo. No inspetor de Propriedades, na
caixa de texto Largura em caracteres,
especifique o número máximo de caracteres que
os visitantes visualizarão no campo (Figura 8).
6. Na caixa de texto Caracteres (Máximo),
especifique o número máximo de caracteres que
o campo suportará.
Nota: Contate o administrador do seu site para
confirmar que carregamento de arquivos
anônimos serão permitidos antes de utilizar o
campo de arquivo.

Utilização de caixas de seleção e botões de opção

Os visitantes clicam em uma caixa de seleção ou em um botão de opção para fazer uma escolha. Com
caixas de seleção, os visitantes podem alternar uma opção simples ligada ou desligada (SIM ou Não) ou eles
podem selecionar uma ou mais opções de um grupo de opções. Com o botão de opção, os visitantes podem
escolher apenas uma opção de um grupo de opções.
Para adicionar uma caixa de seleção:
1. Clique no botão Caixa de Seleção na barra

Inserir.
Input se abre.
2. Na A caixa de diálogo Atributos de Acesso a
Tag Input, digite um nome único para a caixa de
seleção na caixa de texto ID.
Figura 9 Exemplo de caixa de seleção
3. Digite um rótulo para a caixa de seleção na caixa
de textos Rótulo. Você pode deixar as outras
valores padrões.
O botão Caixa de seleção aparece em seu
Figura 10 Inspetor de propriedades formulário
5. Clique a caixa de seleção (não no rótulo) para
Caixa de Seleção
selecioná-la.
6. Na caixa de texto Valor Selecionado no inspetor
de Propriedades (Figura 10), digite um valor
para a caixa de seleção.
Este é o valor que será retornado pelo formulário.
Por exemplo, para uma caixa de seleção que
indique se o visitante deseja entrar em uma lista
de mala direta, você pode conferir o valor 1 para
uma resposta positiva.
7. Para Estado Inicial, selecione Marcado se você
deseja que uma opção apareça selecionada
quando o formulário carrega inicialmente no
navegador do visitante. Caso contrário, selecione
Desmarcado.

Para adicionar um grupo de botões de

opção:
Botões de opção em geral são usados em grupos.
1. Clique no Grupo de botões de opção na barra

Inserir para inserir um grupo.
A caixa de diálogo Grupo de botões de opção

Figura 11 Caixa de diálogo Grupo de botões de
2. Digite um nome na caixa de texto Nome. opção
3. Clique no botão com o sinal mais (+) para
adicionar um botão de opção ao grupo.
4. Digite um rótulo e (se desejar) um valor marcado

para cada botão.
5. Selecione um item na lista de botões de opção e

clique nas setas para cima ou para baixo para
reordenar os botões.
6. Selecione Quebras de Linha para organizar os

botões sem utilizar uma tabela. Selecione Tabela
para organizar utilizando uma tabela.
7. Clique em OK. Figura 12 Exemplo de Grupo de botões de opção
O grupo de botões de opção é adicionado ao

formulário (Figura 12).
8. Clique em um botão de opção (não em seu

rótulo) para selecioná-lo.
9. No inspetor de Propriedades, clique Marcado

ou Desmarcado para indicar que esta opção é Figura 13 Inspetor de Propriedades formulário
selecionada como padrão (Figura 13). Botão de Opção

Para adicionar um menu de lista:

1. Clique o botão Lista/Menu na barra Inserir.
Input se abre.
2. Na A caixa de diálogo Atributos de Acesso a

Tag Input, digite um nome único para o menu
de lista na caixa de texto ID.

números e um símbolo de sublinhado (_). Figura 14 Exemplo de campo lista/menu
3. Digite um rótulo para o menu de lista na caixa

valores padrões.

diálogo Atributos de Acesso a Tag Input. Figura 15 Inspetor de Propriedades Menu de Lista
O campo lista/menu aparece em seu documento
(Figura 14).
5. Clique o campo lista/menu (não em seu rótulo)

para selecioná-lo.
6. No inspetor de Propriedades, para Tipo,

selecione Lista (Figura 15).
7. Na caixa de texto Altura, digite o número de

itens que a lista exibirá.
Figura 16 Caixa de diálogo Listar Valores
Se este número for menor do que o número total
de itens da lista, uma barra de rolamento será
exibida.
8. Se você desejar permitir que os visitantes

selecionem mais de um item da lista, selecione
Permitir Múltiplas para Seleções.
9. Clique no botão Listar Valores para adicionar

os itens da lista.
A caixa de diálogo Listar Valores se abre

(Figura 16).

10. Com o ponto de inserção na caixa de texto Rótulo

do Item, digite o texto que você deseja que
apareça na lista.
11. Na caixa de texto Valor, digite os dados que você
deseja que sejam enviados ao servidor quando
Figura 17 Escolha qual item será inicialmente
um visitante os seleciona.
selecionado
Se você não digitar nenhum valor, então o
formulário envia o rótulo como o valor para este
item.
12. Para adicionar outro item à lista, clique o botão
mais (+).
13. Quando finalizar, clique em OK para fechar a
caixa de diálogo Listar Valores.
Figura 18 Formulário de Lista com três itens na
14. Para ter um dos itens da lista selecionado como lista
padrão, selecione este item na caixa de texto
Selecionado Inicialmente no inspetor de
O item Inicialmente selecionado é realçado na
lista (Figura 18).
Para adicionar um menu suspenso:

1. Clique o botão Lista /Menu na barra Inserir.
Input se abre.
Input, digite um nome único para o menu pop-
up na caixa de texto ID.
3. Digite um rótulo para o menu pop-up na caixa Figura 19 Um campo lista/menu
valores padrões.
O campo lista/menu aparece em seu documento
(Figura 19).

5. Clique o campo lista/menu (não em seu rótulo)

para selecioná-lo.
6. No inspetor de Propriedades, para Tipo,

selecione Menu.
7. Clique no botão Listar Valores para adicionar

os itens de menu.
Figura 20 Caixa de diálogo Listar Valores
A caixa de diálogo Listar Valores se abre
(Figura 20).
8. Com o ponto de inserção na caixa de texto Rótulo

do Item, digite o texto que você deseja que
apareça no menu.
9. Na caixa de texto Valor, digite os dados que você

deseja que sejam mandados para o servidor
quando o visitante selecionar o item.
10. Para adicionar outro item ao menu, clique no

botão de sinal de adição (+).
11. Quando terminar, clique em OK para fechar a

caixa de diálogo Listar Valores.
Figura 21 Visualização em um navegador
12. Para ter um dos itens no menu selecionado como
padrão, selecione este item na caixa de texto
Selecionado Inicialmente no inspetor de
Propriedades.
Nota: Para ver estes valores na página, você
necessita visualizar esta página em uma
navegador (Figura 21).

Utilizando botões de formulário

Botões de formulário controlam operações no formulário. Utilize um botão de formulário para enviar dados
incluídos em um formulário para o servidor ou para redefinir um formulário. Existem dois tipos de botões de
formulário: Botões de texto padrão são os botões com o estilo padrão do navegador, com o texto que você
deseja exibir (em geral Enviar, Enviar Dados e Redefinir); botões gráficos utilizam a imagem escolhida
por você.
Para adicionar um botão de texto padrão: 5. Na caixa de texto Valor do inspetor de

1. Clique o botão Botão na barra Inserir. Propriedades, digite o texto que você deseja que
apareça no botão (Figura 23).
Input se abre. Nota: É recomendável configurar o valor à
qualquer ação do botão. “Enviar” é uma boa
escolha mas você pode considerar também usar
Input, digite um nome único para o botão na caixa
frases curtas nos formulários de comando (por
de texto ID.
exemplo, “Enviar mensagem” ou “Atualizar
Você pode utilizar qualquer combinação de letra, Perfil” ou “Cadastrar”).
6. Selecione o tipo de Ação (em geral este é Enviar
Nota: Existem dois nomes reservados Enviar, Formulário).
que envia os dados do formulário para o
processamento e Redefinir, que redefine todos
os campos ao seu valor original.
3. Não atribua um rótulo ao botão. Clique em OK
para fechar a caixa de diálogo Atributos de
Acesso a Tag Input.
Note: Um rótulo apareceria ao lado do botão, ao
invés de nele, então você não deseja um rótulo
para um botão elemento de formulário. O texto
do botão em si é determinado pelo valor atribuído
ao botão, que você configurará na próxima etapa..
Figura 22 Exemplo de botão de texto
Um botão de texto aparece no documento
(Figura 22).
Nota: Neste exemplo, um botão de Enviar é
colocado abaixo de um campo de arquivo
existente.
Figura 23 Inspetor de Propriedades Botão de
4. Clique no botão para selecioná-lo. Formulário

Para adicionar um botão gráfico de envio:
Você pode utilizar imagens como ícones de botões de envio. Usar uma imagem para cumprir tarefas diferentes
do envio de dados requer a atribuição de um comportamento ao objeto do formulário utilizando o painel
Comportamentos.
1. Clique o botão Campo de Imagem na barra

Inserir.
A caixa de diálogo Selecionar Origem da
Imagem se abre (Figura 24).
2. Localize e selecione a imagem a ser usada como
ícone de botão de envio; Depois clique em OK
(Windows) ou Choose (Mac OS).
Input se abre.
Input, digite um nome único para o botão na caixa Figura 24 Caixa de diálogo Selecionar Origem da
de texto ID. Imagem
Nota: Existem dois nomes reservados Enviar,
que envia os dados do formulário para o
processamento e Redefinir, que redefine todos
os campos ao seu valor original.
4. Não atribua um rótulo ao botão. Clique em OK
para fechar a caixa de diálogo Atributos de
Acesso a Tag Input.
O botão de imagem de envio aparece no
5. Clique no botão para selecioná-lo.
Figura 25 Exemplo de botão de envio com imagem
6. Na caixa de texto Alt, digite o texto alternativo
que você deseja que apareça no lugar da imagem
para navegadores exclusivamente de texto
(Figura 26).
Nota: Você também pode clicar no ícone da
pasta ao lado da caixa de texto Src para Figura 26 Inspetor de Propriedades formulário
selecionar uma nova imagem para o botão. Campo de Imagem

Utilizando menus de salto para navegação

Um menu de salto é um menu pop-up com opções que o vincula a documentos ou arquivos. É um elemento
de formulário que age como navegador. Você cria links para documentos no seu site ou para outros sites, e-
mails, imagens ou vínculos para qualquer tipo de arquivo que possa ser aberto em um navegador. Como o
uso deste tipo de menu fará com que o navegador vá para outra página, não misture menus de salto com
outros elementos de formulário.
Para adicionar um menu de salto:
1. Clique no botão Menu de Salto na barra Inserir.
A caixa de diálogo Inserir Menu de Salto se abre

(Figura 27).
2. Preencha a caixa de diálogo.
Para mais informações, clique no botão de Ajuda

na caixa de diálogo.
3. Clique em OK. Figura 27 Caixa de diálogo Inserir Menu de Salto

Como criar mapas de imagem

Um mapa de imagem é uma imagem que foi dividida em regiões ou pontos ativos. Quando um visitante clica
em um ponto ativo em sua página de web, uma ação ocorre; por exemplo, uma outra página se abre. Um
exemplo é um mapa geográfico em que vincula cada país do mapa com outra página em seu site ou uma
página externa contendo informações sobre este país.
Criação de um mapa de imagem

1. Inicie o Adobe Dreamweaver CS4 e abra o
documento no qual você quer criar um mapa de
imagem.
2. Certifique-se de que a categoria Comum está

selecionada na barra Inserir.
3. Clique na seta para baixo no botão de Imagens

e selecione Imagem no menu pop-up
(Figura 1).
A caixa de diálogo Selecionar Fonte da Imagem
se abre.
4. Localize uma imagem para o mapa de imagem,

selecione-a e clique em OK (Windows) ou Figura 1 Menu pop-up Imagens
Choose (Mac OS).
de Imagem se abre.
5. Digite o texto alternativo para a imagem e depois

clique em OK.
A imagem é adicionada à página (Figura 2).
6. Selecione a imagem na janela Documento. No

inspetor de Propriedade, digite o nome do mapa
na caixa de texto Mapa.
Figura 2 Imagem inserida
Nota: Convenções de nomenclatura para
mapas de imagem seguem as mesmas regras
de nomes de arquivo: Sem espaços ou
caracteres especiais.
© Adobe Systems Incorporated Como criar mapas de imagem 1

6. Selecione uma das ferramentas de ponto ativo

localizadas embaixo do nome do Mapa e
desenhe um retângulo, círculo ou polígono em
volta de uma parte da imagem (Figura 3). Mapa de Imagem
Assim que você começa a desenhar, você é

solicitado à digitar um tag Alt para o ponto ativo.
7. Clique em OK, digite um nome descritivo na

caixa de texto Alt no inspetor de propriedade, e
depois acabe de desenhar o ponto ativo.
8. Depois de desenhar o ponto ativo, adicione um

link para uma página no seu site ou para um Ferramentas de Ponto Ativo
URL externo (Figura 4):
Figura 3 Mapa de Imagem
9. Repita as etapas 6 até 8 para adicionar outros
pontos ativos no mapa de imagem.
10. Salve a página.

selecione um navegador do submenu para
visualizar a página e testar cada link.
Figura 4 Inspetor de Propriedades de Ponto Ativo
2 Como criar mapas de image © Adobe Systems Incorporated

Como criar imagens de sobreposição

Imagem de sobreposição é uma imagem que muda quando o cursor se move sobre ela. Uma Imagem de
sobreposição na verdade consiste de duas imagens: a imagem primária (a imagem exibida quando a página
carrega inicialmente)e a imagem de sobreposição (a imagem que é exibida quando o cursos se move sobre
a imagem primária).
Imagens de sobreposição adicionam realce e efeitos de design para atrair a atenção do usuário quando as
imagens se transformam. Um exemplo é o botão que realça ou muda de cor quando o cursor passa sobre ele.
Criação de uma imagem de sobreposição
1. Inicie o Adobe Dreamweaver CS4 e abra o

documento no qual você quer criar a imagem
de sobreposição.
2. Assegure-se de que a categoria Comum está

selecionada na barra Inserir. Clique a seta para
baixo no botão Imagens e selecione Imagem De
Sobreposição do menu pop-up (Figura 1).
A caixa de diálogo Inserir Imagem De

Sobreposição se abre (Figura 2).
3. Use a caixa de diálogo Inserir Imagem De

Sobreposição para configurar a sua imagem de
sobreposição:
• Nome da Imagem: digite uma nome para a

imagem de sobreposição.
• Imagem Original: Clique Buscar e

selecione a imagem a ser exibida quando a
página carrega.
• Imagem de Sobreposição: Clique Buscar

e selecione a imagem a ser exibida quando
o cursor passa sobre a imagem original. Figura 1 Menu pop-up Imagens
• Texto Alternativo: Digite o texto que você
quer que apareça como texto alternativo
para a imagem.
• Ao Clicar, Vai Para URL: Clique Buscar e

selecione arquivo (ou o caminho para o
arquivo) a ser aberto quando a imagem é
clicada.
© Adobe Systems Incorporated Como criar imagens de sobreposição 1

5. Clique OK para fechar a caixa de diálogo.
6. Salve a página.
7. Selecione Arquivo > Visualizar no navegador e

selecione um navegador do submenu para
visualizar a imagem de sobreposição e testar o
link. Figura 2 Caixa de diálogo Inserir Imagem De
Sobreposição
2 Como criar imagens de sobreposição © Adobe Systems Incorporated

Como criar menus pop-up

Menus pop-up são menus que são exibidos em um navegador quando o visitante de um site move o cursor
sobre ou clica em uma imagem de acionamento. Os itens em um menu pop-up podem ter links URL vinculados
a eles para a navegação.
Você pode usar menus pop-up para exibir vários links em um pequeno espaço. Eles oferecem flexibilidade
de navegação sem longos períodos para carregamento. Você pode escolher a aparência dos menus pop-up
de forma que eles combinem com o aspecto e textura geral de seu site. Um menu pop-up é semelhante a
uma tabela: cada item é como uma célula em uma tabela. Você pode personalizar o menu escolhendo a
partir de uma variedade de tipos de fontes, cores de células e estilos de imagens de fundo.
Criação de itens de menus pop-up

1. Inicie Adobe Fireworks CS4.
2. Abra ou crie a imagem que vai acionar o menu

pop-up.
Nota: A imagem de acionamento pode ser um
objeto de texto ou elemento gráfico. Assegure-
se de definir dimensões da tela de desenho que
dêem conta do tamanho do menu pop-up; você
pode aparar a tela após construir o menu, para
acertar o tamanho.
3. Clique na imagem de acionamento para Figura 1 Fatia

selecioná-la.
Alça de comportamento
4. Selecione Editar > Inserir > Fatia Retangular

para inserir uma fatia sobre a imagem de
acionamento (Figura 1).
Nota: Para criar uma fatia que não seja
retangular, você pode usar a ferramenta Fatia
Poligonal. Consulte a Ajuda do Fireworks para
obter mais informações.
Quando uma fatia é selecionada, um círculo com
cursores de mira aparece no centro da fatia.
Este elemento é chamado de alça de
comportamento.
5. Clique na alça de comportamento e selecione

Adicionar Menu Pop-Up no menu de contexto Figura 2 Menu de contexto da alça de
(Figura 2). comportamento
© Adobe Systems Incorporated Como criar menus pop-up 1

O Editor de menu pop-up se abre (Figura 3).
6. Na aba Conteúdo do Editor de menu pop-up,

clique duas vezes na coluna de texto para
posicionar um ponto de inserção na primeira
caixa de Texto. Digite o texto de um item do
menu. Clique na caixa Link e digite o nome do
arquivo para onde vincula.
7. Para adicionar um novo item de menu, clique

no botão Adicionar Menu (+) e repita a etapa 6
(Figura 4).
8. Para excluir um item de menu, selecione o item

e clique no botão Excluir Menu (–).
9. Após incluir todos os itens do menu, clique em

Figura 3 Editor de menu pop-up
Avançar ou na aba Aparência.
Excluir item de menu
Adicionar item de menu
Figura 4 Editor de menu pop-up com itens de menu
2 Como criar menus pop-up © Adobe Systems Incorporated

Para definir a aparência de um menu pop-up:

Na aba Aparência do Editor de menu pop-up, você pode formatar o texto, aplicar estilos gráficos aos
estados Sobre e Para Cima, e selecionar orientação vertical ou horizontal para o menu pop-up.
10. Selecione para as Células a opção HTML ou

Imagem (Figura 5).
Nota: A opção HTML define a aparência do
menu somente por meio do código HTML;
esta configuração produz páginas com
arquivos menores. A opção Imagem oferece
uma variedade de estilos de imagens gráficas
para usar como fundo das células; esta
configuração produz páginas com arquivos
maiores.
11. Selecione Menu Vertical ou Menu Horizontal

no menu pop-up Orientação, próximo à parte
superior da aba Aparência. Figura 5 Aba Aparência do Editor de menu pop-up
As configurações que escolher aparecem
imediatamente na janela de visualização
próxima à parte inferior da aba Aparência.
12. Selecione o tipo de fonte, tamanho de fonte e

estilos de texto para seus itens de menu.
13. Selecione cores de texto e fundo (Célula) para

o estado Para Cima e o estado Sobre.
Estes estados são semelhantes a estados de
botão. O estado Para Cima de um item de menu
é a aparência padrão do menu. O estado Sobre
é a aparência do item de menu quando o
ponteiro passa por cima dele.
14. Se a opção Imagem for selecionada como tipo

de célula, selecione um estilo gráfico para os Figura 6 Estilos gráficos para as células
estados Para Cima e Sobre (Figura 6).

15. Clique em Avançar ou clique na aba Avançado

(Figura 7) se desejar alterar os atributos da
célula ou da borda.
Normalmente você pode usar as configurações
padrão na aba Avançado.
Figura 7 Aba Avançado do Editor de menu pop-up
Para definir a posição de um menu pop-up:

16. Clique em Avançar ou clique na aba Posição
do Editor de menu pop-up (Figura 8).
17. Clique em um botão de Posição do Menu para

posicionar o menu pop-up em relação à fatia
de acionamento.
Nota: Uma alternativa é digitar as coordenadas
X e Y.
Coordenadas de 0, 0 alinham o canto esquerdo
superior do menu pop-up com o canto esquerdo
superior da fatia de acionamento.
18. Clique em Concluído. Depois, salve seu

arquivo. Figura 8 Aba Posição do Editor de menu pop-up
19. Para visualizar seu menu pop-up, selecione

Arquivo > Visualizar no Navegador e selecione
um navegador no submenu.

Editar um menu pop-up

1. Para editar um menu pop-up, selecione a fatia
à qual o seu menu está ligada e clique duas vezes
no contorno azul do menu pop-up na área de
trabalho, ou clique na alça de comportamento e
selecione Editar Menu pop-up (Figura 9).
O Editor de menu pop-up se abre. Figura 9 Menu de contexto da alça de
2. Defina as opções no Editor de menu pop-up comportamento
exatamente como fez para criar seu menu
pop-up.
Exportar um menu pop-up para utilização no Adobe Dreamweaver CS4

Para salvar o menu pop-up de forma que fique ativo em seu site, exportar o documento como HTML.
1. Enquanto ainda estiver no Fireworks, apare

quaisquer sobras de tela de desenho no entorno
da imagem, selecionando Modificar > Tela de
Desenho > Aparar Tela de Desenho.
2. Salve o arquivo.
3. Selecione Arquivo > Exportar.

A caixa de diálogo Exportar se abre
(Figura 10).
4. Encontre a pasta apropriada em sua pasta raiz
local, tal como Imagens.
Figura 10 Caixa de diálogo Exportar
5. Dê ao menu pop-up um nome curto e descritivo.
6. Selecione HTML e Imagens no menu Exportar.
7. Certifique-se de que a opção Colocar Imagens

em Subpasta esteja selecionada.
Nota: Colocar todos os arquivos de imagem
exportados em uma Subpasta é uma boa maneira
de gerenciar estes arquivos.
8. Clique em Salvar.
9. Salve seu documento e feche o Fireworks.

Importar um menu pop-up para o Dreamweaver
2. Abra o documento para dentro do qual deseja

importar o menu pop-up.
3. Posicione o ponto de inserção onde desejar que

o menu pop-up apareça. Você também pode
posicionar o menu pop-up dentro de um div, para
obter um posicionamento mais preciso do menu.
4. Certifique-se de que a categoria Comum esteja

selecionada na barra Inserir. Clique na seta para
baixo do botão Imagens, e selecione HTML do
Fireworks (Figura 11).
A caixa de diálogo Inserir HTML do Fireworks
5. Clique em Procurar e selecione o arquivo HTML

do menu pop-up.
Nota: A subpasta Imagens contém as imagens
fatiadas de seu menu pop-up. Figura 11 Inserir HTML do Fireworks
6. Clique em OK.
O menu pop-up é inserido em seu documento
Dreamweaver.
7. Salve seu documento Dreamweaver. Selecione

Arquivo > Visualizar no Navegador e selecione
um navegador no submenu para testar o menu Figura 12 Caixa de diálogo Inserir HTML do
e os links para os itens do menu. Fireworks

Como preparar fotografias

A exibição de fotos em uma página da web pode ser complexa, já que as fotos devem funcionar bem com os
textos, as cores e o design do site. No Adobe Fireworks CS4, você pode definir o tom das fotografias ou
aplicar a elas máscaras com formatos que funcionem melhor com o design geral do site.
Aplicação de máscaras a fotografias

Máscaras são imagens bitmap ou vetoriais posicionadas sobre uma fotografia, deixando visível somente a
parte da fotografia delimitada pelas bordas da imagem de máscara. Você pode usar máscaras para aplicar
em fotos efeitos de recorte ou de transparência.
Para criar uma máscara:

1. Inicie o Fireworks e abra a fotografia a ser
mascarada (Figura 1).
2. Selecione uma ferramenta de desenho como as

ferramenta Pincel, Lápis, Retângulo ou Elipse
de delineie a região da máscara na foto
(Figura 2).
3. Selecione Editar > Recortar para passar a região

de máscara para a Área de Transferência.
Figura 1 Fotografia a ser mascarada
Figura 2 Região de máscara
© Adobe Systems Incorporated Como preparar fotografias 1

4. Selecione a fotografia e selecione Editar > Colar

como Máscara.
Somente a parte da fotografia dentro da área
delimitada pela região de máscara fica visível
(Figura 3).
5. Certifique-se de que o painel Camadas esteja

visível.
Se o painel Camadas não estiver aberto,
selecione Janela > Camadas.
6. Clique na miniatura da imagem no painel Figura 3 Fotografia visível através da máscara

Camadas (Figura 4).
Uma alça azul-clara aparece na imagem
(Figura 5).
Você pode usar esta alça para ajustar a posição
da imagem dentro da máscara.
7. Arraste a imagem para definir sua posição

dentro da máscara.
8. Salve o arquivo como PNG do Fireworks. Isto

permitirá que você edite a máscara
Miniatura de imagem
posteriormente.
9. Selecione Editar > Exportar para exportar a

imagem como um arquivo JPEG ou GIF. Figura 4 Miniatura da imagem no painel Camadas
Alça
Figura 5 Imagem com alça
2 Como preparar fotografias © Adobe Systems Incorporated

Para aplicar difusão e efeitos a uma máscara:

1. Selecione a miniatura da máscara no painel
Camadas (Figura 6).
2. Na seção Preenchimento do inspetor de

Propriedades, selecione Difusão no menu Borda
(Figura 7) e aumente a Quantidade de Difusão.
Miniatura de máscara
(Digite um número mais alto na caixa de texto
ou clique na seta para baixo e arraste o menu
deslizante). Figura 6 Miniatura da máscara selecionada
A difusão é aplicada na borda da máscara
(Figura 8). Você poderá visualizar a difusão
melhor se desmarcar a imagem.
3. Para acrescentar brilho, selecione a miniatura

da imagem (não a máscara) no painel Camadas. Figura 7 Inspetor de Propriedades de Máscara
Vetorial
Adicionar Filtros (+) e selecione Sombra e Brilho
> Brilho Interno no menu pop-up (Figura 9).
A janela pop-up Brilho Interno se abre
(Figura 10).
5. Aumente o Deslocamento e Largura do brilho

Figura 8 Máscara com Difusão
até visualizá-lo na imagem mascarada.
aplicada
6. Ajuste a Suavidade, Opacidade e Cor até
alcançar o efeito desejado.
7. Quando terminar, clique fora da janela ou

pressione Enter (Windows) ou Return (Mac OS)
para fechar a janela.
8. Salve o arquivo e exporte a imagem como um

arquivo JPEG ou GIF.
Figura 9 Menu pop-up Adicionar Filtros
Largura
Opacidade
Suavidade
Deslocamento
de halo
Figura 10 Janela pop-up Brilho Interno

Para criar uma máscara de texto:

1. Inicie o Fireworks e abra a foto a ser mascarada.
2. Crie textos para transformar em máscara para

a imagem (Figura 11).
3. Defina o tamanho do texto e da fonte e selecione

Editar > Recortar para mover o texto para a
Área de Transferência.
4. Selecione a foto e selecione Editar > Colar como

Máscara. Figura 11 Texto para usar como máscara de
imagem
A imagem aparece somente na área delimitada
pela máscara de texto (Figura 12).
5. Clique na miniatura da imagem no painel

Camadas (Figura 13).
Uma alça azul-clara aparece no centro da
imagem (Figura 14).
6. Arraste o ponto central da imagem para ajustar Figura 12 Fotografia visível através da máscara
a posição da imagem por baixo da máscara.
7. Salve e exporte a imagem como um arquivo

JPEG ou GIF.
Miniatura de imagem
Figura 13 Miniatura de imagem selecionada
Alça
Figura 14 Máscara de texto com alça
4 Como preparar fotografias © Adobe Systems Incorporated

Ajustar o tom de cor de fotos

1. Selecione a imagem bitmap cujas cores deseja
ajustar.
2. Selecione Filtros > Ajustar Cores > Matiz/

Saturação.
A caixa de diálogo Matiz/Saturação se abre
(Figura 15). Figura 15 Caixa de diálogo Matiz/Saturação
3. Certifique-se de que a opção Visualizar esteja

selecionada.
4. Arraste o menu deslizante de Matiz, Saturação

e Luminosidade para criar o tom de cor desejado
para a foto.
Nota: Ao invés de arrastar o menu deslizante,
você pode digitar um número na caixa de texto
associada.
5. Para ajustar as cores gerais de uma foto,

selecione a opção Colorir na caixa de diálogo
Matiz/Saturação. Quando estiver satisfeito com
suas escolhas, clique em OK para fechar a
caixa de diálogo.
6. Para aplicar uma aparência antiquada à foto,

selecione Comandos > Criativo > Converter em
Tom Sépia.
7. Para tornar a foto em preto-e-branco, selecione

Comandos > Criativo > Converter em Escala
de Cinza.

Como promover um site

Nome do grupo: ________________________________________ Data: ____________________
Estude como utilizar sites de busca na web para promover um site.Quando você inscreve o URL do seu site
para um site de busca, as pessoas podem encontrar seu site com base na informação que você fornece
sobre o seu site.
Visite o site http://www.searchenginewatch.com/webmasters/ para dicas de como incluir seu site em sites
de busca.
Encontre um site de busca que ofereça inscrições gratuitas para sites.

Nome e URL do site: ________________________________________________________________
Processo de inscrição: _______________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Encontre um site de busca ou de promoção para o qual você tenha que pagar para inscrever seu site.
Nome e URL do site: ________________________________________________________________
Custo de inscrição: _________________________________________________________________
Processo de inscrição: _______________________________________________________________
_______________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Este site de busca ou promoção vale o custo da inscrição? Por que? _______________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Como promover um site 1

Oficina de Crítica
Uma oficina de crítica trata-se de um método para proporcionar feedback construtivo sobre o design e
conteúdo de um projeto. As diretrizes de avaliação consistem em definir os componentes ou elementos, tanto
do design quanto do conteúdo, de forma a ajudar na crítica do trabalho.
Cada trabalho é analisado separadamente, seguindo o processo abaixo:
1. O designer descreve brevemente a audiência, o propósito e objetivos do portfólio e por que motivo
esta informação está sendo incluída.
2. Durante a sessão de feedback, o designer toma nota do feedback do grupo. A partir deste ponto, o
designer não participa da discussão.
3. Primeiro, um membro do grupo resume a audiência, propósito e objetivos do designer, bem como o
tipo de informação incluída no portfólio e os motivos por que a informação foi incluída. Isso ajuda a
confirmar se o grupo entendeu a intenção do designer.
4. O grupo discute primeiro os fortes do design contido no portfólio.
5. O grupo discute os fortes do conteúdo.
6. O grupo discute maneiras de melhorar o design e conteúdo.
7. Enfim, um membro do grupo resume os aspectos positivos do portfólio.
© Adobe Systems Incorporated Oficina de Crítica 1

Adode Flash CS4 Apostila Exercício 2.1
A área de trabalho do Flash

Nome do aluno: ______________________________________________ Data: ______________
Identifique o Palco, área de trabalho, Linha do Tempo, Editor de Movimento, camadas, painéis, painel de
Ferramentas e o inspetor de Propriedade.
© Adobe Systems Incorporated A área de trabalho do Flash 1

Apostila Exercício 5.1 Adode Flash CS4
Identifique as ferramentas de seleção, as ferramentas de desenho e as ferramentas de cor:
2 A área de trabalho do Flash © Adobe Systems Incorporated

A Área de Trabalho do Flash
Palco
O Palco é uma região branca e retangular da Área de Trabalho do Adobe Flash CS4 (Figura 1). Os objetos
que posicionar no Palco aparecerão em seu filme publicado. Os objetos posicionados na Área de Trabalho
(a área cinza ao redor do Palco) não aparecerão no filme finalizado, mas você pode posicionar objetos ali até
a hora em que desejar que eles apareçam no Palco.
Palco Painel de
Editor de Movimento Ferramentas
Linha do Tempo
Figura 1 Flash - Área de Trabalho do Flash
© Adobe Systems Incorporated A Área de Trabalho do Flash 1

Linha do Tempo e camadas

A Linha do Tempo é onde você controla as imagens e sons de seu documento Flash (Figura 2). A
Linha do Tempo se divide em quadros. Nela você trabalha com estes quadros para organizar e controlar
o conteúdo de seu documento. Você insere quadros na Linha do Tempo na ordem em que desejar que
os objetos nos quadros apareçam em seu conteúdo final.
Um quadro-chave é um quadro onde uma ocorrência de símbolo aparece na Linha do Tempo. Um

quadro-chave também pode ser um quadro que inclua código ActionScript para controlar algum aspecto
de seu documento. Você também pode acrescentar um quadro-chave em branco à Linha do Tempo
como alocador de espaço para símbolos que pretenda acrescentar posteriormente ou explicitamente
deixar o quadro em branco.
Um quadro-chave de propriedade é um quadro no qual você define uma mudança às propriedades de

um objeto em uma animação. O Flash pode interpolar, ou automaticamente preencher, os valores de
propriedade entre os quadros-chave de propriedade para produzir animações fluidas. Como quadros-
chave de propriedade permitem que você produza animações sem desenhar cada quadro individual,
torna-se mais fácil a criação de animações. Uma série de quadros contendo animação interpolada se
chama uma interpolação de movimento.
O quadro atual, taxa de quadros e tempo decorrido todos são exibidos na parte inferior da Linha do
Tempo. O indicador de reprodução, representada por um retângulo vermelho com uma linha vermelha
longa, exibe o quadro atual que está visualizando na Linha do Tempo. Você pode clicar em um quadro
para mover o indicador de reprodução para aquele quadro, ou você pode arrastar o indicador de
reprodução para frente e para trás na Linha do Tempo, para visualizar rapidamente toda ou qualquer
parte de sua animação.
As camadas na Linha do Tempo proporcionam uma maneira de organizar os elementos de seu filme.
Você pode desenhar ou editar objetos em uma camada sem afetar os objetos em outra camada. As
camadas controlam a ordem de armazenamento dos objetos – a ordem progride de cima para baixo, de
forma que os objetos exibidos na frente estão na camada de cima, enquanto os objetos exibidos no
fundo estão na camada de baixo. Isto permite que você posicione objetos à frente ou atrás um do outro.
Para mudar a ordem das camadas, arraste o nome da camada até a nova posição. Os controles de
camada ficam na parte esquerda da Linha do Tempo. Cada camada tem uma opção para se ocultar ou
mostrar, bloquear e mostrar seu conteúdo como contornos.
2 A Área de Trabalho do Flash © Adobe Systems Incorporated

Mostrar/Ocultar Camada
Bloquear / Desbloquear Camada
Camadas Indicador de reprodução
Excluir Camada
Quadro atual
Tempo decorrido
Inserir Camada Pasta
Inserir Camada Taxa de Quadros
Figura 2 Linha do Tempo
Barra de edição
A barra de edição, na parte superior do Palco, permite que você navegue rapidamente entre as diferentes
partes de seu documento Flash (Figura 3). Ela permite que você alterne entre cenas e símbolos. Você
também pode mudar o nível de ampliação do Palco.
Selecione Símbolos
Cena atual Selecione Cena
Mude a ampliação
Figura 3 Barra de Edição

Menu Painéis
Painéis Aba
Painéis proporcionam acesso fácil aos controles que

ajudam você a trabalhar com o conteúdo de seu
documento (Figura 4). Como padrão, o inspetor de
Propriedades e o painel Biblioteca ficam encaixados
na parte direita da área de trabalho. Qualquer painel
disponível pode ser aberto selecionando-o no
menu > Janela.
Você pode desencaixar grupos de painéis,

acrescentar painéis a um grupo, desencaixar painéis
individuais, reorganizar a ordem dos painéis
encaixados, e recolher e fechar grupos de painéis.
Para desencaixar um painel, arraste-o de sua
posição atual por sua aba ou barra de título. Você
pode arrastá-lo até outro encaixe ou deixá-lo solto.
Figura 4 Painéis

Painel de Ferramentas
As ferramentas no painel Ferramentas permitem que você desenhe, pinte, selecione e modifique trabalhos
de arte, assim como alterar a visualização do Palco (Figura 5). A área Opções na parte inferior do Painel
de Ferramentas permite que você modifique uma ferramenta que tenha selecionado. Se o painel de
Ferramentas não estiver visível, você pode exibi-lo selecionando Janela > Ferramentas. Para selecionar
uma ferramenta, simplesmente clique nela. (Você também pode usar o atalho de teclado exibido em
parênteses na dica de ferramenta que aparece quando você posiciona o cursor sobre uma ferramenta
durante alguns segundos).
Seleção
Subseleção
Transformação Livre
Rotação 3D
Laço
Caneta
Texto
Linha
Retângulo
Lápis
Pincel
Deco
Bone
Balde de tinta
Conta-gotas
Borracha
Mão
Zoom
Cor do traçado
Cor do preenchimento
Área de Opções
Figura 5 Painel de Ferramentas do Flash

Ferramentas de Seleção
Ferramenta de Seleção (seta negra): clique em um objeto para selecioná-lo. Arraste um objeto selecionado
para movimentá-lo.
Ferramenta Subseleção (seta branca): selecione e movimente os pontos de um objeto ou edite caminhos
entre pontos adjacentes.
Ferramenta Transformação livre: Redimensione ou gire objetos selecionados ao arrastá-los. Também

contém a ferramenta Transformação de Gradiente (que transforma o preenchimento gradiente ou bitmap
ajustando o tamanho, direção ou centro do preenchimento).
Ferramenta Rotação 3D: Gire ocorrências de um clipe de filme no espaço 3D. Um controle de rotação 3D
aparece na parte superior dos objetos selecionados no Palco. O controle X é vermelho, o controle Y é verde,
e o controle Z é azul.
Ferramenta de Translação 3D: Movimente ocorrências do clipe de filme no espaço 3D. Quando você
seleciona um clipe de filme com a ferramenta, seus três eixos, X, Y e Z, aparecem no Palco, acima do
objeto. O eixo X é vermelho, o eixo Y é verde, e o eixo Z é azul.
Ferramenta Laço: Arraste para selecionar uma região.
Ferramentas de Desenho
Ferramenta Caneta: Crie linhas retas e curvas. Você também pode criar curvas Bezier.
Ferramenta Texto: Crie ou edite texto com campos de texto.
Ferramenta Linha: Desenhe linhas retas.
Ferramenta Retângulo: Crie retângulos ou quadrados compostos de preenchimentos e traçados, só

preenchimentos, ou só traçados. Também contém a ferramenta Polígono (para criar tanto polígonos quanto
formas estelares – você pode definir quantas pontas que qualquer dos formatos terá), a ferramenta Oval
(para criar círculos e elipses), a ferramenta Primitiva de Retângulo, e a ferramenta Primitiva Oval. As
formas primitivas são objetos individuais que podem ser editados no inspetor de Propriedades.
Ferramenta Lápis: Crie linhas em qualquer um de três modos - Correção, Suavização e Tinta.
Ferramenta Pincel: Crie formas apenas com preenchimento.
Ferramenta Pincel de Borrifar: O Pincel de Borrifar atua como um spray de partículas, permitindo que
você “pincele” um padrão de formatos no Palco de uma só vez. Como padrão, o Pincel de Borrifar emite um
spray de partículas pontuais usando a cor de preenchimento atualmente selecionada. Contudo, você pode
usar a ferramenta Pincel de Borrifar para aplicar um padrão sobre um clipe de filme ou símbolo gráfico.

Ferramenta Deco: Aplique um efeito a um objeto selecionado. Selecione efeitos do inspetor de Propriedades
após selecionar a ferramenta Deco.
Ferramenta Bone: A Cinemática Inversa (IK) é um método de animação de um objeto ou de um conjunto
de objetos em relação uns aos outros, usando uma estrutura articulada de bones. Esta ferramenta permite
que você acrescente bones a um conjunto de objetos, um em relação ao outro.
Ferramenta de Associação: A Cinemática Inversa (IK) é uma ferramenta que permite que você clique em
um ponto de controle ou um bone por meio desta ferramenta de Associação, exibindo as conexões entre os
ossos e os pontos de controle. Você pode então alterar as conexões em diferentes formas.
Ferramenta Balde de Tinta: Acrescente preenchimento dentro de uma forma ou altere a cor do
preenchimento.
Ferramenta Tinteiro: Altere a cor ou largura de uma linha, ou acrescente um traçado a uma forma.
Ferramenta Conta-Gotas: Selecione uma cor a partir de amostras ou de qualquer lugar na tela.
Ferramenta Borracha: Apague partes de uma imagem.
Ferramentas de Visualização
Ferramenta Mão: Arraste o Palco para visualizar outra parte de seu documento.
Ferramenta Zoom: Aproxime ou afaste o Palco para ver mais ou menos dele. Para se afastar, pressione a
tecla Alt (Windows) ou Option (Mac OS).
Ferramentas de Cor
Cor do Traçado: Defina uma cor de traçado.
Cor do Preenchimento: Defina uma cor de preenchimento.

O inspetor de Propriedades proporciona acesso fácil aos atributos mais comumente usados na seleção
atual, seja no Palco ou na Linha do Tempo. Você pode fazer alterações nos atributos de um objeto ou
documento no inspetor de Propriedades sem acessar os menus ou painéis que também controlam estes
atributos.
Dependendo do que estiver atualmente selecionado, o inspetor de Propriedades exibe informações e ajustes
do documento, texto, símbolo, forma, bitmap, vídeo, grupo, quadro, ou ferramenta selecionada. Quando dois
ou mais tipos diferentes de objetos estiverem selecionados, o inspetor de Propriedades exibe o número total
de objetos selecionados. Como padrão, o inspetor de Propriedades fica visível; você pode ocultá-lo ou
mostrá-lo selecionando Janela > Propriedades. A Figura 6 mostra as propriedades de um objeto de texto e
uma forma retangular, respectivamente.
Figura 6 Inspetor de Propriedades de texto (esquerda) e retângulo (direita)

Como criar uma face animada

Este exercício o guiará passo a passo pelo processo de criar uma animação simples utilizando o
Adobe Flash CS4.
Você usará ferramentas de desenho e

implementará movimento e interpolação de
formas. Depois de testar seu filme, você o
publicará para ser passado por terceiros, ou
através de um navegador ou diretamente por um
Flash Player. Ferramenta Oval
Desenho de traços faciais

Desenho do olho direito
1. Inicie o Flash e abra um documento em

branco. Figura 1 Olho direito desenhado com a ferramenta
Oval.
2. O novo documento contém uma camada e um
quadro-chave vazio.
3. Seleciona a ferramenta Oval e desenhe um

pequeno círculo para representar o olho
direito em uma face (Figura 1).
Cor do Traçado
4. Selecione a ferramenta Seleção e clique duas
vezes no centro do círculo para selecioná-lo.
Você deve ver tanto o contorno (traço) quanto
o meio (preenchimento) selecionados.
5. Para mudar a cor de contorno do olho, clique Cor do

Preenchimento
na caixa de Cor do Traçado no inspetor de
Propriedades e selecione uma nova cor
(Figura 2). Para mudar a cor do
preenchimento, utilize a caixa Cor do
Figura 2 Inspetor de Propriedades de Imagem
Preenchimento.
6. Na Linha do tempo, clique duas vezes no nome

da camada, Camada 1 (Figura 3).
Isto seleciona o nome da camada de forma

que você pode renomeá-la.
Figura 3 Nome da Camada
© Adobe Systems Incorporated Como criar uma face animada 1

7. Renomeie a camada Olho Direito e pressione

Enter (Windows) ou Return (Mac OS)
(Figura 4).
Figura 4 Novo nome de camada
Salve a imagem do olho como um símbolo na

Biblioteca
Ao invés de criar dois olhos separadamente,

converta o olho direito de uma forma em um
símbolo gráfico. isso acrescenta o olho à Figura 5 Quadro 1 selecionado
biblioteca de forma que você pode usá-lo mais
vezes. Isso também reduzirá o tamanho de seu
filme finalizado.
8. Na camada Olho Direito, clique no quadro 1

para selecioná-lo (Figura 5).
Isto automaticamente seleciona o conteúdo

do quadro.
Nota: Se o olho direito não estiver

inteiramente selecionado, clique duas vezes
no Palco com a ferramenta Seleção para
selecioná-lo.
9. Selecione Modificar > Converter Em Símbolo.
A caixa de diálogo Converter Em Símbolo se

abre (Figura 6).
10. Na caixa de diálogo, nomeie o símbolo olho,

selecione Gráfico como o tipo e clique em Figura 6 Caixa de diálogo Converter Em Símbolo
OK.
O olho no Palco é agora apenas uma

ocorrência (cópia) da matriz do símbolo olho,
que está armazenado na biblioteca.
O olho agora tem uma borda única de seleção

azul (Figura 7) e pode ser selecionado com
um clique.
Figura 7 Símbolo gráfico selecionado
2 Como criar uma face animada © Adobe Systems Incorporated

11. Selecione Janela > Biblioteca para certificar-

se que seu símbolo foi acrescentado ao painel
Biblioteca (Figura 8).
Nota: Você deve selecionar o símbolo olho à
biblioteca para visualizar o gráfico na janela de
visualização.
Você pode reutilizar o símbolo olho quantas
vezes quiser sem ter que redesenhá-lo.
Figura 8 Painel Biblioteca
Reutilização do símbolo olho para criar o olho

esquerdo
12. Clique o botão Inserir Camada no canto inferior
esquerdo da Linha do Tempo para inserir uma
nova camada (Figura 9).
13. Clique duas vezes no nome da nova camada e
mude o nome para Olho Esquerdo.
14. Na camada Olho Esquerdo, selecione o quadro 1.
15. Selecione o símbolo olho no painel Biblioteca e
arraste o símbolo para o Palco.
Botão Inserir Camada
Você agora tem a segunda ocorrência do olho
no Palco. Figura 9 Botão Inserir Camada
Utilizar ocorrências da biblioteca mantém o

tamanho do arquivo do seu filme menor do que
copiando e colando. Filmes menores carregam
mais rapidamente em um navegador.
Desenhar o nariz
16. Insira uma nova camada e a nomeie Nariz.

17. Selecione o quadro 1 na camada Nariz.
18. Selecione a ferramenta Linha e desenhe duas
linhas formando um ângulo para representar um
nariz (Figura 10).
19. Para ajustar o ângulo após ter desenhado o
nariz, use a ferramenta Subseleção (seta
branca) para arrastar a quina ou uma das pontas
da linha. (Você pode tentar arrastar uma ponta
de uma linha com a ferramenta Seta para ver a
diferença entre as duas ferramentas.) Figura 10 Desenhar um nariz

Acrescente quadros para fazer um filme de três segundos

Um filme Flash tem geralmente 12 quadros por segundo. para manter o nariz no Palco por 3 segundos, por
exemplo, você deve inserir 36 quadros adicionais na camada Nariz depois do quadro 1, o quadro atual.
(Começando no quadro 1, o filme levará 3 segundos para alcançar o quadro 37, porque 1 + 36 = 37.)
20. Selecione o quadro 37 na camada Nariz e

selecione Inserir > Linha do Tempo > Quadro.
Flash insere quadro até o quadro 37 (Figura 11).
Observe que o indicador de reprodução (o
retângulo vermelho no alto da Linha do Tempo) Figura 11 Quadro inserido na Linha do Tempo
está no quadro 37 e que o nariz está visível mas
os olhos desapareceram. Na parte inferior da
Linha do Tempo você pode ver que este filme
tem atualmente 37 quadros, é configurado para
12 quadros por segundo e vai durar 3 segundos.
Nota: O atalho do teclado para inserção de
quadros é F5.
21. Arraste indicador de reprodução para frames
variados, O nariz se mantém visível do quadro 1
até o quadro 37, mas os olhos aparecem apenas
no quadro 1.
22. Para ver o seu filme, arraste o indicador de
reprodução para o quadro 1 e selecione Controlar
> Reproduzir. Até este ponto, não tem muita
coisa acontecendo além do quadro 1.
Figura 12 A Boca como uma linha reta

Desenhar a boca
23. Insira uma nova camada e a nomeie Boca.
24. Selecione o quadro 1 da camada Boca.
25. Desenhe uma boca no quadro 1.
• Utilize a ferramenta Linha para desenhar uma
linha reta (Figura 12).
• Selecione a ferramenta Seleção e clique no
Palco fora da linha para desmarcá-la.
• Mova o cursor na direção do meio da linha. Figura 13 Arraste a linha com a ferramenta Seta
Quando uma curva aparecer perto do cursor
arraste o meio da linha para baixo para criar um
sorriso (Figura 13).
• Quando você soltar o botão do mouse, restará
apenas o sorriso (Figura 14). Figura 14 A Boca está completa

Animar os traços faciais

Use as interpolações de movimento para animar os olhos
Como você criou os olhos usando um símbolo gráfico, você pode animá-los utilizando interpolação de
movimento. Para criar interpolações de movimento, você precisa estender a Linha do Tempo na camada do
Olho Direito.
1. Na camada do Olho Direito, selecione 37

quadros e selecione Inserir > Linha do Tempo >
Quadro (Figura 15).
2. Com a camada do Olho Direito selecionada,
escolha Inserir > Interpolação de Movimento.
Figura 15 Extensão de interpolação no painel Linha
3. Selecione o quadro 37 na camada do Olho do Tempo
Direito e arraste o olho direito por uma curta
distância.
Um caminho de movimento aparece no Palco
mostrando o caminho da posição no primeiro
quadro da extensão de interpolação para a nova
posição (Figura 16). Como você explicitamente
definiu as propriedades do objeto para X e Y, as
propriedades dos quadros-chave são
acrescentadas para X e Y no quadro contendo
o indicador de reprodução. As propriedades dos
quadros-chave aparecem como pequenos Figura 16 Objeto interpolado com caminho de
diamantes na extensão de interpolação na linha movimento
do tempo.
4. Posicione o indicador de reprodução no quadro
1 e selecione Controlar > Reproduzir para
executar seu filme e ver o efeito da interpolação
de movimento.
O olho direito gradualmente se move de sua
posição original no quadro 1 para a nova posição
no quadro 37. Note que apenas o olho direito se
move.
Nota: Se você quiser modificar o movimento,
mova apenas o símbolo do quadro 37.
5. Escolha o quadro 37 da camada do Olho
Esquerdo e selecione Inserir > Linha do Tempo
> Quadro.
6. Com a camada Olho Direito selecionada,
escolha Inserir > Interpolação de Movimento.
No quadro 37, mova o olho esquerdo a mesma
distância que o olho direito.

Utilize uma interpolação de forma para animar a boca

Como você criou a boca utilizando uma das ferramentas de desenho (a ferramenta Linha) e não converteu
a boca em um símbolo, ela ainda é uma forma. Você pode usar a interpolação de forma para animar a boca.
1. Selecione o quadro 37 na camada Boca e insira

um quadro-chave.
2. Com a ferramenta Seleção, clique no Palco fora
da linha da boca para desmarcá-la. Então arraste
a linha da boca em um sorriso mais largo.
Figura 17 Interpolação de Forma na camada Boca
3. Para criar uma interpolação entre o primeiro e
o último quadro na camada Boca, clique em um
quadro entre os quadros 1 e 37, e selecione
Inserir > Interpolação de Forma.
Os quadros contendo as interpolações de forma
agora estará verde claro, contendo uma seta
sólida que vai do quadro de início ao quadro final
(Figura 17).
4. Selecione Arquivo > Salvar.
5. Selecione Controlar > Testar Filme, para assistir
à execução.
A seleção de Controlar > Testar Filme exporta
um arquivo .swf e o reproduz em uma janela de
visualização. Quando o filme alcançar o último
quadro, ele retrocede O primeiro quadro e se
reproduz novamente.
6. Selecionar Arquivo > Fechar para fechar a
janela de visualização.
Crie tantos traços faciais animados quanto
desejar.

Publique seu filme

Quando você estiver pronto para entregar o seu filme a um público, você pode publicar o documento Flash
(arquivo FLA) para ser reproduzido. O comando Publicar crie um arquivo Flash SWF (executável com o
Flash Player) e um documento HTML que insere seu filme flash em uma janela de navegador. Para usuários
que não tenha o Flash Player instalados, você pode escolher publicar o arquivo FLA em formatos alternativos
— GIF, JPEG, PNG, ou QuickTime — junto ao HTML necessário para exibi-los em uma janela de navegador.
Quando você publica o HTML com o seu filme, o Flash cria também um arquivo chamado AC_OETags.js.
Este arquivo de JavaScript permite que seu arquivo SWF seja reproduzido automaticamente quando certos
navegadores (chamados navegadores compatíveis com conteúdo ativo) que, de outra forma, precisariam
que o visitante do site clicasse para reproduzir o seu filme. Para evitar este problema, carregue o AC_OETags.js
para o seu site na mesma localização que o arquivo HTML que hospeda o filme. Para saber mais sobre esta
questão, visite www.adobe.com/go/activecontent.
1. Selecione Arquivo > Configurações de

Publicação para abrir a caixa de diálogo
Configurações de Publicação (Figura 18).
2. Use a aba Formatos para determinar quais os
formatos de arquivo a usar quando você publicar.
Figura 18 Caixa de diálogo Configurações de

Publicação

3. Use a aba Flash para determinar qual o Flash

Player você vai publicar (Figura 19). Se você
achar que seu público talvez não tenha o player
mais atual, é aconselhável selecionar um player
mais antigo no menu de versões.
4. Selecione Gerar Relatório de Tamanho para ver
um relatório detalhado to tamanho de cada ativo
de seu filme.
5. Selecione Proteger Contra Importação para
evitar que alguém importe seu arquivo SWF
para o Flash e o converta novamente em um
arquivo FLA.
6. Selecione Compactar Filme para reduzir o
tamanho do filme exportado.
7. Use a aba HTML para controlar as
configurações do arquivo HTML (Figura 20).
8. Desmarque a opção Repetir se você quiser Figura 19 Aba Flash na caixa de diálogo
que seu filme pare após ser reproduzido uma Configurações de Publicação
única vez.
9. Para publicar seu filme, clique no botão Publicar.
Figura 20 Aba HTML na caixa de diálogo

Configurações de Publicação

Símbolos, ocorrências e a biblioteca
Símbolos e ocorrências
Um símbolo é um objeto de imagem, botão ou clipe de filme que você cria uma vez no Adobe Flash CS4 e
pode usar quantas vezes quiser em seu filme. Qualquer símbolo que você cria é automaticamente colocado
em uma área de armazenamento chamada biblioteca do documento em uso.
Uma ocorrência é uma cópia do símbolo localizada no Palco. Uma ocorrência pode ser diferente de seu
símbolo em cor, tamanho e função. Para criar a ocorrência de um símbolo, arraste o símbolo da biblioteca
para o Palco. Uma vez que você criou uma ocorrência, você pode usar as opções de cores no inspetor de
Propriedades para modificar seu brilho, tonalidade, alfa ou as configurações de cores RGB.
Editar o símbolo automaticamente atualiza todas as suas ocorrências, mas aplicar efeitos em uma ocorrência
de um símbolo atualiza apenas esta ocorrência.
A utilização de símbolos oferece algumas vantagens. Símbolos acrescentam interatividade a seus documentos.
Eles economizam espaço e reduzem o tempo de carregamento do seu filme finalizado porque Flash não tem
que salvar informações duplicadas de cada ocorrência. Por exemplo, se você cria um símbolo de uma roda
animada, você pode usar várias ocorrência do símbolo para criar as rodas de um trem. O resultado é um
arquivo muito menor do que se você tivesse criado cada roda separadamente. Os símbolos também ajudam
a manter coerência em todo o seu documento Flash. Por exemplo, se você tem botões em todo o seu
documento, o uso de símbolos assegura que todos os botões serão semelhantes. Você pode facilmente editar
todas as ocorrências de botões em um documento de uma vez quando se utiliza de símbolos para criá-los.
Você também pode usar símbolos para compartilhar conteúdo entre vários diferentes documentos.
Quando você cria um novo desenho em Flash, você não está criando uma forma, e não um símbolo. Você
converte qualquer forma em um símbolo selecionando-a e depois selecionando Modificar > Converter Para
Símbolo.
Bibliotecas
A biblioteca é um local em cada filme onde o Flash
armazena e organiza símbolos, sons, imagens bitmap,
vídeos e outros elementos. A biblioteca é anexada ao
documento com o qual você está trabalhando. Para abrir
o painel Biblioteca, selecione Janela > Biblioteca
(Figura 1). Se você compartilha seu documento com
outras pessoas e eles o abrem em seus computadores,
eles vão ver os mesmos objetos de biblioteca. Você
também pode abrir bibliotecas de outros documentos
selecionando Arquivo > Importar > Abrir Biblioteca
Externa. À medida em que seus documentos se tornem
mais complexos, você vai achar útil usar pastas para
organizar os seus símbolos em grupos relacionados dentro
da biblioteca. Figura 1 Painel Biblioteca
© Adobe Systems Incorporated Símbolos, ocorrências e a biblioteca 1

Tipos de símbolos
Flash tem três tipos de símbolos: gráfico, botões e clipes de filmes.
Cada símbolo tem uma Linha de Tempo e Palco, completos com camadas. Quando cria um símbolo, você
escolhe o tipo de símbolo, dependendo de como quer usar o símbolo em seu documento.
• Utilize símbolos gráficos para imagens estáticas e para criar peças de animação reutilizáveis que são
ligadas à Linha de Tempo principal. Símbolos gráficos operam em sincronia com a Linha de Tempo
principal. Controles interativos e sons não funcionam em uma sequência de animação contida em um
símbolo gráfico.
• Utilize símbolos para criar botões interativos que respondam a cliques de mouse, menus de sobreposição
e outras ações do visitante do site. Você define os objetos de imagem associados com os vários estados
do botão e depois atribui ações a uma ocorrência do botão.
• Use símbolos de clipes de filme para criar peças de animação reutilizáveis. Um clipe de filme tem sua
própria Linha de Tempo, que é independente da Linha de Tempo principal - Considere-a como uma sub-
Linha de Tempo aninhada dentro da Linha de Tempo principal. Clipes de filmes podem conter controles
interativos, sons, e até outras ocorrências de clipe de filme.
Criação de símbolos
Você pode criar símbolos de duas maneiras:
• Selecione Inserir > Novo Símbolo. Isto cria um novo símbolo ao qual você precisa acrescentar conteúdo.
• Selecione uma forma existente e selecione Modificar > Converter Em Símbolo.
2 Símbolos, ocorrências e a biblioteca © Adobe Systems Incorporated

Quadros e quadros-chave
Como em filmes, documentos Adobe Flash CS4 Professional dividem períodos de tempo em quadros. Na
Linha de Tempo, você trabalha com estes quadros para organizar e controlar o conteúdo de seu documento.
Você dispõe os quadros na Linha de Tempo na ordem em que desejar que os objetos dos quadros apareçam
no seu conteúdo final.
Quadros definem incrementos na Linha de Tempo (Figura 1). A ordem na qual cada quadro aparece na
Linha de Tempo determina a ordem na qual eles aparecerão quando documento Flash for executado. Você
pode distribuir quadros-chave na Linha de Tempo para editar a sequencia de eventos em uma animação.
Um quadro-chave é um quadro onde uma nova ocorrência de símbolo aparece na Linha de Tempo. Um
quadro-chave também pode ser um quadro que inclui um código ActionScript para controlar certos aspectos de
seu documento. Você também pode acrescentar um quadro-chave em branco à Linha de Tempo como reserva
para símbolos que você deseja acrescentar mais tarde ou para deixar propositadamente um quadro em branco.
Um quadro-chave de propriedade é um quadro no qual você define uma mudança nas propriedades de
um objeto para uma animação. Flash pode interpolar, ou automaticamente completar, os valores de propriedades
entre os quadros-chave de propriedade com o intuito de produzir animações fluidas. Porque quadros-chave
permitem a você produzir animação sem desenhar cada quadro individualmete, eles fazem a criação de
animação muito mais fácil. Uma série de quadros contendo animações interpoladas é chamada de um
movimento interpolado.
Um quadro estático é um quadro que não faz parte de uma interpolação.
Você distribui quadros-chave e quadros-chave de propriedade na Linha de Tempo para controlar a sequencia
de eventos em seu documento e sua animação.
Um quadro-chave é indicado na Linha de Tempo por um círculo sólido negro. O quadro em que a extensão
de um quadro-chave termina é indicado por um pequeno retângulo branco. Um quadro-chave em branco é
indicado por um círculo vazio.
Você pode fazer o seguinte com quadros e quadros-chave:
quadro-chave de propriedade
em uma interpolação clássica
quadro-chave de
propriedade em uma
interpolação de movimento
quadros-chave em
branco
quadro-chave fim da extensão de
estático quadro-chave
Figura 1 Quadros
• Inserir quadros, quadros-chave e quadros em branco.

• Remover quadros, quadros-chave e quadros em branco.
• Converter quadros em quadros-chave ou quadros em branco.
• Arrastar quadros e quadros-chave para uma nova localização na mesma camada ou em uma camada diferente.
• Copiar e colar quadros e quadros-chave.
© Adobe Systems Incorporated Quadros e quadros-chave 1

Representação de animações na Linha de Tempo

Flash distingue animações interpoladas de animações quadro a quadro na Linha de Tempo exibindo diferentes
indicadores em cada quadro que contenha conteúdo. Os seguintes indicadores de conteúdo dos quadros
aparecem na Linha de Tempo:
• Uma extensão de quadros com um fundo azul indica uma interpolação de movimento. Um ponto negro
no primeiro quadro da extensão indica que a extensão de interpolação tem um objeto de destino vinculado
a ele. Diamantes negros indicam o último quadro e qualquer outro quadro-chave. Quadros-chave de
propriedade são quadros que contêm mudanças de propriedade explicitamente definidas por você. Para
escolher que tipos de quadros-chave de propriedade exibir, clique com o botão direito (Windows) ou
clique + Command (Mac OS) sobre a extensão de interpolação de movimento, e escolha Exibir Quadros-
Chave > tipo no menu de contexto. Flash exibe todos os tipos de quadros-chave de propriedade como
padrão. Todos os outros quadros na extensão contêm valores para as propriedades interpoladas do
objeto de destino.
• Um ponto vazio no primeiro quadro indica que o objeto de destino da interpolação de movimento foi
removido. A extensão de interpolação ainda contém seus quadros-chave e pode ter outro objeto de
destino aplicados a ele.
• Uma extensão de quadros com um fundo verde indica uma camada Uma extensão de quadros com um
fundo verde indica uma camada de pose de Cinemática Inversa (IK). As camadas de pode contêm
armaduras IK e poses. Cada pose aparece na Linha de Tempo como um diamante negro. O Flash
interpola as posições da armadura nos quadros entre poses.
• Um ponto negro no quadro-chave inicial com uma seta negra e fundo azul, indica uma interpolação
clássica.
• Uma linha pontilhada indica que a interpolação clássica está quebrada ou incompleta, como quando o
quadro-chave final está ausente.
• Um ponto negro no quadro-chave inicial com uma seta negra e um fundo verde-claro indica uma
interpolação de forma.
• Um ponto negro indica uma quadro-chave individual. Quadros em cinza-claro depois de um quadro-
chave individual contém o mesmo conteúdo sem mudanças. Estes quadros têm uma linha vertical negra
e um retângulo vazio no último quadro da extensão.
2 Quadros e quadros-chave © Adobe Systems Incorporated

• Um pequeno a indica que o quadro tem uma ação de quadro designada a ele.
• Uma bandeira vermelha indica que o quadro contém um rótulo.
• Uma barra verde dupla indica que o quadro contém um comentário.
• Uma âncora dourada indica que o quadro é uma âncora com nome.
© Adobe Systems Incorporated Quadros e quadros-chave 3

Criação de Animações no Adobe Flash CS4
Visão geral da interpolação
Uma interpolação é uma animação que você cria ao especificar um valor para uma propriedade de
objeto em um quadro e outro, e outro valor para a mesma propriedade entre estes dois quadros. Você
pode interpolar campos de clipes de filme, objetos de imagem, símbolos de botão e textos.
A extensão de interpolação é um grupo de quadros na Linha do Tempo onde é possível alterar uma ou
mais propriedades do objeto no Palco ao longo do tempo. A extensão de interpolação aparece na Linha do
Tempo como um grupo de quadros em uma única camada, com fundo azul ou verde. Você pode selecionar
a extensão de interpolação como um único objeto e arrastá-la de um lugar na Linha do Tempo para outro,
inclusive outra camada. Só um objeto no Palco pode ser animado em cada extensão de interpolação. Este
objeto é chamado de objeto de destino da extensão de interpolação.
Um quadro-chave de propriedade é um quadro dentro da extensão de interpolação onde você define

explicitamente onde um ou mais valores de propriedade para o objeto destino de interpolação. Cada
propriedade que você define tem seus próprios quadros-chave de propriedade. Se você configurar mais
de uma propriedade em um único quadro, os quadros-chave de propriedade para cada uma destas
propriedades permanecem neste quadro. Você pode visualizar cada propriedade de uma extensão de
interpolação e seus quadros-chave de propriedade no Editor de movimento. Você também pode escolher
que tipos de quadros-chave de propriedade exibir na Linha do Tempo no menu de contexto da extensão
de interpolação.
Nota: A partir do Adobe Flash Professional CS4, os conceitos de quadro-chave e de quadro-chave de

propriedade diferem das versões anteriores do Flash. O termo quadro-chave indica um quadro na Linha
do Tempo no qual uma ocorrência de símbolo no Palco pela primeira vez. O termo quadro-chave de
propriedade, novidade no Flash CS4, se refere ao valor definido para uma propriedade em um momento
ou quadro específico de uma interpolação de movimento.
Tipos de Animação Flash CS4
Interpolações de movimento: Configura as propriedades de um objeto, tais como uma posição ou

transparência alfa em um quadro e novamente em outro quadro no meio. Interpolações de movimento
são úteis para animações que consistem de movimento contínuo ou transformação de um objeto.
Interpolações de movimento aparecem na Linha do Tempo como uma extensão contínua de quadros
que você pode selecionar como um único objeto por padrão. Interpolações de movimento são poderosas
e simples de se criar.
© Adobe Systems Incorporated Criação de Animações no Adobe Flash CS4 1

Interpolação de forma: Desenhe uma forma em um quadro na Linha do Tempo e altere esta forma ou
desenhe outra forma em outro quadro. O Flash vai interpolar as formas intermediárias nos quadros no
meio, criando animações ao transformar uma forma em outra.
Interpolações clássicas: Semelhantes às interpolações de movimento, mas de criação mais complexa.

Você pode criar efeitos de animação específicos que não seriam possíveis em interpolações de extensão.
Por exemplo, você pode aplicar atenuações ao grupo de quadros entre os quadros-chave dentro de uma
interpolação, ao invés de através de toda a duração de uma extensão de interpolação de movimento.
(Para atenuar somente alguns quadros específicos de uma interpolação de movimento, você tem que
criar uma curva de atenuação personalizada). Você também pode usar interpolações clássicas para
animar entre dois efeitos de cor, tais como tonalidade e transparência alfa, a passo que as interpolações
de movimento só podem aplicar um efeito de cor por interpolação.
Poses de cinemática inversa: Você pode esticar ou dobrar objetos de forma e vincular grupos de
ocorrências de símbolos para fazê-los se movimentar juntos de maneira naturalística. Se você posicionar
o objeto de forma ou ocorrências vinculadas de diferentes maneiras em quadros diferentes, o Flash
interpola as posições dentro dos quadros no meio. Poses de cinemática inversa ajudam a tornar a
animação de personagens rápida e fácil.
Nota: Você vai aprender mais sobre como usar poses de cinemática inversa para criar animações de
personagem no Exercício 5.4.
Interpolações de movimento
Você só aplica interpolações de movimento em ocorrências de símbolo e campos de texto. Todos os

outros tipos de objeto são englobados em um símbolo quando uma interpolação lhes é aplicada. A
ocorrência de símbolo pode conter símbolos aninhados, que podem em si ser interpolados em suas
próprias linhas do Tempo.
O bloco de construção mínimo em uma camada de interpolação é uma extensão de interpolação. A

extensão de interpolação em uma camada correspondente pode conter apenas uma instância de símbolo.
A instância de símbolo é chamada de instância de destino da extensão de interpolação. A inclusão de
um segundo símbolo à extensão de interpolação substitui o símbolo original da interpolação. Também é
possível alterar o objeto de destino de uma interpolação arrastando um símbolo diferente da biblioteca
sobre a extensão de interpolação na Linha do tempo. Você pode excluir o símbolo de uma camada de
interpolação sem remover ou romper a interpolação.
Para se ter um símbolo na Linha do Tempo, você não tem que incluir mais do que um quadro-chave de
propriedade. Você pode editar quadros-chave de propriedade individuais no Palco, no inspetor de
Propriedades ou no Editor de movimento.
2 Criação de Animações no Adobe Flash CS4 © Adobe Systems Incorporated

Para criar uma interpolação de movimento:

1. Inicie o Flash e abra um novo documento em Ferramenta de seleção
branco.
2. Desenhe uma forma no Palco.

A forma aparece no quadro-chave 1 da
Camada 1.
3. Usando a ferramenta Seleção (Figura 1),

Figura 1 Barras de ferramenta do Flash com a
selecione a forma e escolha Modificar >
ferramenta de seleção
Converter em Símbolo. Clique com o botão
direito para selecionar a forma e a borda, se
houver.
A caixa de diálogo Converter em Símbolo se
abre (Figura 2).
Nota: Você não pode aplicar interpolações de
movimento a formas. A aplicação de
interpolação de movimento a uma forma
automaticamente converte a forma em símbolo.
Figura 2 Caixa de diálogo Converter em Símbolo
4. Digite um novo nome para o símbolo na caixa
de texto Nome, selecione a opção Gráfico, e
5. Selecione o quadro 10.
6. Selecione Inserir > Linha do Tempo > Quadro.

(A interpolação de movimento durará 10
quadros).
Quando você insere um quadro, o Flash
preenche a área entre o último quadro (na Figura 3 Quadro-chave inserido
camada selecionada) e o novo quadro com o
mesmo conteúdo (Figura 3). Os quadros 1 até
10 todos contêm o novo símbolo.
7. Certifique-se de que o quadro 10 (o quadro final

da interpolação de movimento) esteja
selecionado e selecione Inserir > Interpolação
de movimento.
8. Selecione o símbolo no quadro 10; depois faça

uma ou mais das seguintes alterações:
Alteração de cor: No inspetor de Propriedades,
selecione Tonalidade no menu pop-up Estilo em
Efeito de Cor (Figura 4). Selecione 100% para
Tonalidade e mude a cor na caixa de cor. Figura 4 Menu pop-up de Cor

Transparência: No inspetor de Propriedades,

selecione Alfa no menu pop-up Estilo em Efeito
de Cor. Reduza a percentagem de Alfa para
obter mais transparência. Por exemplo, um valor
Alfa de 0% faz com que o objeto desapareça.
Posição: Use a ferramenta de Seleção para
mover o objeto para uma posição diferente do Figura 5 Interpolação de movimento na Linha do
Palco. Um caminho de movimento aparece. Os Tempo
pontos deste caminho de movimento são
editáveis.
Tamanho: Selecione o objeto. Depois selecione
Modificar > Transformar > Transformação
Livre. Arraste as alças do objeto para aumentar
o tamanho, diminuir o tamanho e girar o objeto.
9. Selecione o quadro 1 na Linha do Tempo.

Na Linha do Tempo, a interpolação de
movimento é representada por um fundo azul
sólido que vai do quadro-chave de início até o
quadro-chave final (Figura 5).
10. Selecionando a Linha do Tempo (Figura 6),

configure uma ou mais propriedades da
Interpolação de movimento no painel de
Propriedades.
• Atenuação: Controla a velocidade com que o
objeto inicia ou termina a interpolação de
movimento. Por exemplo, um número alto faz
o objeto iniciar rapidamente e terminar
lentamente.
• Rotação: Gira o objeto em sentido horário ou
anti-horário o número de vezes designado.
• Caminho: Se você acrescentar uma camada Figura 6 Inspetor de Propriedades de Interpolação
guia, o objeto fica vinculado ao caminho
desenhado na camada guia.
• Opções: Começa e termina a interpolação de
todos os objetos no Palco ao mesmo tempo.
11. Você também pode usar o Editor de movimento

para configurar as interpolações (Figura 7).
Você pode visualizar todas as propriedades de
interpolação e seus quadros-chave de
propriedade no Editor de movimento. Você
também pode acrescentar precisão e detalhe
a suas interpolações. Uma vez que você crie Figura 7 Editor de movimento

uma interpolação na Linha do Tempo, você

pode controlar a interpolação de várias formas
diferentes:
• Acrescente ou remova quadros-chave de
propriedade para propriedades individuais.
• Mova quadros-chave de propriedade para outros
quadros dentro da interpolação.
• Acrescente ou remova filtros ou efeitos de cor Papel de Transparência visível
e defina suas configurações. Contornos do Papel de Transparência
• Acrescente atenuações pré-configuradas para Figura 8 Botão Contornos do Papel de

propriedades individuais e categorias de Transparência
propriedade.
• Crie curvas de atenuação personalizadas.
• Habilite movimentação para quadros-chave
individuais de propriedade para as propriedades
X, Y, e Z. A movimentação permite que o
quadro-chave de propriedade se mova para
quadros diferentes ou entre quadros individuais,
criando um movimento suave.
12. Selecione Controlar > Testar Filme para testar
o filme.
13. Selecione Arquivo > Fechar para fechar a

14. Para ver todas as fases de interpolação ao

mesmo tempo, clique no botão Contornos do
Papel de Transparência na parte inferior da Figura 9
Linha do Tempo (Figura 8).
15. Arraste as alças do papel de transparência do

quadro (elas parecem parênteses com círculos
nelas, acima da Linha do Tempo) para
selecionar o intervalo de quadros no qual o
objeto aparece.
As etapas de interpolação todas ficam visíveis
no Palco (Figura 9).
16. Desabilite o papel de transparência.
17. Salve o filme.

Interpolações de forma
Na interpolação de forma, você desenha uma forma vetorial em um quadro específico da Linha do Tempo e
altera esta forma ou desenha outra forma em outro quadro específico. O Flash então interpola as formas
intermediárias para os quadros do meio, criando as animações de uma forma se transformando em outra.
Nota: As interpolações de forma funcionam melhor com formas simples. Evite formas com recuos ou
espaços negativos. Experimente com as formas que desejar usar para determinar os resultados. Você pode
usar dicas de forma para dizer ao Flash que pontos da forma inicial devem corresponder a pontos específicos
da forma final. As interpolações de forma podem gastar muito mais memória de computador do que as
interpolações de movimento, então é melhor usar as interpolações de forma com moderação.
Para criar uma interpolação de forma:

1. Inicie o Flash e abra um novo documento em selecionado e faça uma ou mais das seguintes
branco. mudanças a sua forma:
O quadro 1 da Camada 1 já contém um quadro- Mudança amorfa de forma: Clique no Palco
chave em branco. com a ferramenta de Seleção para desmarcar o
objeto. Traga a ferramenta de Seleção para perto
2. Primeiro acrescente uma forma ao Palco:
do objeto para segurar uma borda. Arraste a borda
Objetos desenhados: Seleciona a ferramenta para mudar a forma do objeto (Figura 10).
Forma (retângulo ou oval) e desenhe um objeto no
Palco. Forma diferente: Para transformar entre sua
forma e uma nova forma, exclua o objeto no
Texto: Selecione a ferramenta Texto e digite uma quadro-chave 10 desenhe um novo objeto.
palavra ou frase no Palco. Depois selecione o texto
e selecione Modificar > Separar. Isto separa as Nota: Selecione Modificar > Separar caso o objeto
palavras em letras separadas. Com as letras ainda desenhado não seja uma forma.
selecionadas, selecione Modificar > Separar Texto: Para transformar entre sua forma original
novamente para converter as letras em formas. e texto, exclua o objeto no quadro-chave 10 e digite
Imagens externas: Selecione Arquivo > Importar o texto no Palco. Selecione Modificar > Separar
> Importar para o Palco para importar uma até o bloco de texto se reduzir a uma forma,
imagem. Se a imagem for um bitmap, você precisa conforme indicado no inspetor de Propriedades.
separá-la. Se a imagem é um desenho vetorial Imagem externa: Para transformar entre sua
agrupado, você deve desagrupá-lo completamente. forma original e uma nova imagem que tenha
Para separar um bitmap, selecione Modificar > importado, exclua o objeto do quadro-chave 10 e
Separar. Para desagrupar uma imagem, selecione selecione Arquivo > Importar para obter a imagem
Modificar > Desagrupar. externa. Selecione Modificar > Separar para reduzir
Nota: Você talvez tenha que selecionar Modificar o objeto a uma forma, conforme indicado no
> Separar ou Modificar > Desagrupar várias vezes inspetor de Propriedades.
até o objeto se tornar uma forma, conforme
indicado no inspetor de Propriedades.
4. Selecione Inserir > Linha do Tempo > Quadro-
chave.
A interpolação terá duração de 10 quadros.
5. Certifique-se de que o quadro 10 ainda está Figura 10 Alterar uma forma com a ferramenta de
Seleção

6. Clique em qualquer parte dentro da extensão

de interpolação na Linha do Tempo (Figura 11)
e selecione Inserir > Interpolação de forma.
7. Selecione o quadro 1 na Linha do Tempo (na

camada atual).
Este é o quadro inicial de suas animações.
8. Na seção Interpolação do inspetor de Figura 11 Clique dentro da extensão de

Propriedades, ajuste uma ou mais propriedades interpolação
da Interpolação de forma (Figura 12):
Atenuação: Controla a velocidade com que o
objeto inicia ou termina a interpolação de
movimento. Por exemplo, um número alto faz o
objeto iniciar rapidamente e terminar lentamente.
Mesclagem (Distributiva): Cria uma animação
na qual as formas intermediárias são mais
suaves e mais irregulares.
Mesclagem (Angular): Cria uma animação que
preserva as quinas e linhas retas das formas
intermediárias.

o filme.
10. Selecione Arquivo > Fechar para fechar a janela

de visualização.
11. Para ver todas as fases de interpolação ao

mesmo tempo, clique no botão Contornos do
Papel de Transparência na parte inferior da
Figura 12 Interpolação no inspetor de Propriedades
Linha do Tempo.
12. Arraste as alças do papel de transparência do

quadro (elas parecem parênteses com círculos
nelas, acima da Linha do Tempo) para
selecionar o intervalo dos primeiros 10 quadros
da Camada 1.
As etapas de interpolação todas ficam visíveis
no Palco.
13. Desabilite o papel de transparência.
14. Salve o filme.
15. Feche o filme.

Interpolação clássica
Nas animações de interpolação clássica, você define os quadros-chave em pontos significativos da
animação e o Flash cria os conteúdos dos quadros no meio. Os quadros interpolados de uma animação
interpolada aparecem em cor azul clara, com uma seta desenhada entre os quadros-chave. Como os
documentos Flash salvam as formas em cada quadro-chave, crie quadros-chave somente naqueles
pontos da arte em que algo muda.
As interpolações clássicas são semelhantes às interpolações de movimento, exceto porque são mais
complexas e você pode gerar alguns tipos de efeitos de animação impossíveis nas interpolações de
movimento, tais como:
• Trabalhar com efeitos de Linha do Tempo
• Acrescentar animações a ocorrências, grupos e tipos
• Criar interpolações de movimento ao longo do caminho
• Colar propriedades de interpolação de movimento
• Aplicar atenuações internas e externas personalizadas
Nota: O uso avançado das interpolações clássicas, tais como os aqui listados, serão tratados em maior
detalhe na Unidade 6. O próximo exercício esboça as etapas de criação de uma interpolação clássica
simples, que servirá como uma introdução básica à interpolação clássica e as diferenças de procedimento
entre a interpolação clássica e de movimento.
Para criar uma interpolação clássica:
1. Inicie o Flash e abra um novo documento em

branco.
O quadro 1 da Camada 1 já contém um quadro-
chave em branco. Figura 12 Inserir quadro-chave
2. Primeiro acrescente um símbolo ao Palco.

chave.
A duração da interpolação será de 10 quadros
(Figura 12).
5. Certifique-se de que o quadro 10 ainda está

selecionado e mova o símbolo a uma nova
posição no Palco.

6. Clique na extensão de interpolação na Linha do

Tempo e selecione Inserir > Interpolação
clássica.
A interpolação clássica aparece em azul claro,
com uma seta (Figura 13).
Figura 13 Inserir interpolação clássica
7. Selecione o quadro 1 na Linha do Tempo (na
camada selecionada).
Este será o quadro inicial das animações.
8. Configure a posição, cor e escala do símbolo no

quadro-chave inicial.
9. Selecione o quadro 10, e configure a posição,

cor ou escala do símbolo da maneira que deseja
que a animação termine.
Você também pode configurar as propriedades
do símbolo na seção de interpolação do inspetor
de Propriedades.

o filme.

de visualização.
12. Salve o filme.
13. Feche o filme.

Como começar a usar o ActionScript

ActionScript 3.0 é a linguagem de script do Adobe Flash CS4. Você pode usar o ActionScript para incorporar
à sua aplicação maior complexidade de interação, controle de reprodução e exibição de dados. Por exemplo,
você pode querer animar uma imagem de um garoto caminhando. Ao usar ActionScript, você pode fazer a
animação do garoto seguir o cursor pela tela, parando sempre que ele esbarre em um móvel animado.
ActionScript é uma linguagem de programação orientada a objetos. A programação orientada a objetos
trata-se de uma maneira de organizar o código em um programa, utilizando o código para definir os objetos
e depois enviando mensagens entre um objeto e outro.
Você não precisa ser um programador para fazer uso do ActionScript (consulte o “Utilização do Modo
Assistência de Script” mais adiante nesta apostila). Contudo, os seguintes conceitos são úteis:
• Classe: O código que define um objeto. Este código consiste em propriedades, métodos e eventos.
Pense na planta de uma casa: você não pode viver na planta, mas precisa dela para construir a casa.
Você usa as classes para criar objetos.
• Objeto: Uma ocorrência de uma classe. Quando você transforma um objeto em ocorrência, você
declara de qual classe ela está sendo criada e define suas propriedades. Você pode criar tantos objetos
quanto desejar de uma única classe – se tiver uma classe bicicleta, poderá criar muitos objetos bicicleta,
cada um com suas próprias propriedades (uma bicicleta pode ser vermelha e outra verde).
• Propriedade: Um dos trechos de dados mantidos juntos em um objeto. A propriedade ajuda a definir um
objeto – ela fornece as características do objeto. Um objeto de música pode ter propriedades denominadas
melodia e título.
Você define as propriedades de um objeto quando você cria o objeto, mas você pode alterá-las depois,
conforme necessário. Uma propriedade é uma variável que pertence a um objeto.
• Variável: Um nome que representa um valor na memória do computador. À medida que você escreve
o código, você cria o nome da variável, como um alocador do valor. Isto permite que você crie código
mesmo se você não saiba todos os valores possíveis que um visitante venha a fornecer. Se você criar a
variável primeiroNome, você pode dizer a sua programação que exiba o primeiro nome do visitante sem
saber de antemão qual é o nome do visitante.
• Método: Uma que pode ser executada por um objeto. Por exemplo, a classe cavalo pode ter um método
chamado galope(). Quando o método galope() for chamado, ele exibe uma animação do cavalo galopando
de um ponto a outro.
• Função: Um bloco de código que executa tarefas específicas e pode ser reutilizado em sua programação.
Por exemplo, você pode criar uma função chamada checkEmail() para verificar que o texto digitado por
um visitante é um endereço de e-mail válido. Cada vez que um visitante fornece um endereço de e-mail,
você pode chamar checkEmail() para se certificar de que o visitante forneceu um texto que pode de fato
ser utilizado como um endereço de e-mail. Se você vier a querer atualizar a função, você só terá de
fazê-lo uma vez, ao invés de a cada lugar onde endereços de e-mail requeiram validação.
Você também pode pensar em um método como uma função vinculada a um objeto.
• Evento: Algo que acontece em um filme Flash que o ActionScript conhece e ao que pode reagir. Muitos
eventos são relacionados à interação do usuário - por exemplo, um usuário clica um botão ou pressiona
uma tecla do teclado. A técnica para especificar certas ações que devem ser executadas em reação a
eventos em particular é conhecida como manipulação de eventos.
© Adobe Systems Incorporated Como começar a usar o ActionScript 1

Se você já trabalhou com símbolos no Flash, você já está familiarizado com os objetos. Imagine que você
definiu um símbolo de clipe de filme – digamos, um desenho ou um retângulo – e que você posicionou uma
cópia dele no Palco. Este símbolo de clipe de filme também é um objeto no ActionScript; trata-se de uma
ocorrência da classe MovieClip. A linha do tempo principal de um filme Flash também pertence à Classe
clipe de filme.
Você pode modificar várias características de qualquer clipe de filme. Quando o clipe de filme é selecionado,
o inspetor de Propriedades exibe algumas das características que você pode mudar, tais como suas coordenadas
X ou sua largura. Ou você pode fazer ajustes de cor, tais como mudar a transparência alfa do clipe. Outras
ferramentas do Flash permitem que você faça mais alterações, tais como a utilização da ferramenta
Transformação Livre para girar um retângulo. Todas as maneiras com que você pode modificar um símbolo
de clipe de filme no ambiente de autoração do Flash também são coisas que você pode fazer com o
ActionScript. No ActionScript, você usa os métodos da classe MovieClip para manipular ou alterar as
propriedades de seu clipe de filme.
Para saber mais sobre programação orientada a objetos, consulte Programação ActionScript 3.0,
“Programação orientada a objetos no ActionScript” (no Flash, selecione Ajuda > Ajuda do Flash).
Utilização do Modo Assistência de Script

Você pode acrescentar ActionScript no ambiente de autoração usando o painel Ações (Figura 1). O painel
Ações proporciona o modo Assistência de Script para simplificar o processo de codificação.
Área de parâmetros
Caixa de
ferramentas
Ações
Botão Assistência
de Script
Painel Script
Navegador
de script
Figura 1 Painel Ações no modo Assistência de Script modo
No Modo Assistência de Script, você pode acrescentar ActionScript a seu documento Flash sem ter que
escrever o código você mesmo. Você seleciona ações na caixa de ferramentas Ações e define as opções
para cada ação na área de parâmetros. Você tem que entender um pouco sobre quais funções utilizar para
realizar tarefas específicas, mas você não precisa aprender a sintaxe (a gramática do ActionScript). Muitos
designers e não-programadores usam este modo.
Uma das primeiras coisas a aprender é como parar o seu filme em determinado ponto. Você também vai aprender
como enviar o indicador de reprodução para um quadro específico do filme to a particular quadro no filme.
2 Como começar a usar o ActionScript © Adobe Systems Incorporated

Utilização de ActionScript para parar

um filme
1. Inicie o Flash e abra um filme. Crie uma camada
em seu filme chamada ações. No quadro que
corresponda ao fim de seu filme, insira um novo Botão Assistência
de Script
quadro-chave.
2. Selecione Janela > Ações para exibir o painel

Ações.
3. Se você não vir a área de parâmetros no painel

Ações, clique no botão Assistência de Script no Figura 2 Painel Ações
canto direito superior (Figura 2).
As Classes são organizadas em pacotes. Você
deverá adicionar uma ação stop()a um clipe de
filme (neste caso, sua linha do tempo é o clipe
de filme), de forma que você deve localizar a
Classe clipe de filme. A Classe clipe de filme é
parte integral do pacote Flash.Display.
4. Na caixa de ferramentas Ações, no lado
esquerdo do painel Ações, role para baixo e
clique no pacote Flash.Display para exibir as
classes que contém.
5. Role para baixo novamente para encontrar a

classe Clipe de filme e clique para expandi-la
(Figura 3).
6. Clique em Métodos para visualizar os métodos

disponíveis para a classe Clipe de filme.
Figura 3 Classe Clipe de filme

7. Role para baixo até o método Stop. Execute uma Botão Inserir Caminho de
Destino
das opções abaixo:
• Clique duas vezes no método Stop.
• Arraste o método Stop para o Painel Script.
O código para aplicar Método Stop aparece no
painel Script (Figura 4). A primeira linha
(importar flash.display.MovieClip();) importa o
código necessário para a classe Clipe de filme.
A segunda linha é a ação Stop em si. O código
em vermelho not_set_yet indica que você deve
usar a Assistência de Script para terminar o
código.
8. Clique no campo do objeto na área de parâmetros Figura 4 Método Stop

do painel Ações. o botão Inserir Caminho de
Destino agora estará ativo. O caminho de
destino ajuda você a localizar o objeto que você
está tentando controlar.
9. Clique no botão Inserir Caminho de Destino.

A caixa de diálogo Inserir Caminho de Destino
se abre (Figura 5).
10. Selecione a opção Relativo e clique em Raiz.

Isto define o caminho de destino. Figura 5 Caixa de diálogo Inserir Caminho de
11. Clique em OK para fechar a caixa de diálogo Destino
Inserir Caminho de Destino.
O script completo para o Método Stop aparece
no Painel Script (Figura 6). Este código fará
com que seu filme pare de ser reproduzido no
fim do filme, quadro 40.
Nota: No ActionScript, isto é usado da mesma
forma em que você se referiria a você mesmo
como “eu” ao invés de usar o seu nome
completo. Lembre-se que a principal linha do
tempo trata-se de uma ocorrência da classe
MovieClip. Na Figura 6, o Flash utiliza isso Número do quadro
para se referir ao clipe de filme ao qual pertence
o quadro 40.
12. Feche o painel Ações.
Figura 6 Método Stop aplicado ao quadro 40

Manipulação de evento
A técnica para se especificar que determinadas ações devem ser executadas em resposta a eventos
específicos é conhecida como manipulação de evento. A manipulação de evento consiste em três importantes
elementos:
• A origem do evento: Qual objeto vai acionar evento? Por exemplo, qual botão será pressionado, ou
qual objeto Loader está carregando a imagem?
• O evento: O que vai acontecer, a qual interação você deseja responder? A identificação do evento
é importante, pois um objeto pode acionar (e ficar atento a) vários eventos.
• A resposta: Qual ação(ações) você deseja que sejam executadas quando o evento ocorrer?
Quando uma programação de ActionScript está sendo executada, o Adobe Flash Player fica esperando que
certos eventos ocorram e quando estes eventos ocorrem, o player aciona o código ActionScript específico
que você designou para estes eventos. Para a programação saber quais eventos são importantes, você deve
criar um ouvinte de evento. Um ouvinte de evento trata-se de uma função que o Flash Player executa em
resposta a eventos específicos.
Acrescentar um ouvinte de evento é um processo de duas etapas:
• Primeiro, você cria uma função ou método de classe para que Flash Player a execute em resposta
ao evento. Esta função à vezes é denominada função ouvinte.
• Depois, você usa o método addEventoListener() para conectar a função ouvinte ao destino do
evento. A função addEventoListener() diz ao Flash a qual objeto ou evento ouvir e que função
executar em resposta.
Utilização de ActionScript para ir para quadro

1. Crie um botão que os usuários possam clicar
para ir a um quadro em particular de seu filme.
Certifique-se de que posiciona o botão no Palco Figura 7 Botão ocorrência
(Figura 7).
2. Selecione o botão e use o inspetor de Nome da ocorrência
Propriedades para dar ao botão um nome de
ocorrência particular (Figura 8).
3. Na principal linha do tempo de seu filme, crie
uma camada denominada ações.
4. Crie um quadro-chave na camada ações que
corresponda ao quadro-chave onde seu botão
aparece pela primeira vez no Palco. Selecione
este quadro-chave na camada ações.
Nota: Se seu botão não aparecer neste quadro,
o Flash irá gerar uma mensagem de erro porque
você está apontando para um objeto que ainda
não está no Palco.
Ações. Figura 8 Botão ocorrência


Ações, clique no botão Assistência de Script.
7. Na caixa de ferramentas Ações, no

lado esquerdo do painel, selecione o
método AddEventoListener da classe
IEventoDispatcher.
Para encontrar o método AddEventoListener,
abra Flash.Events e depois abra
IEventoDispatcher.
8. Clique duas vezes bi método

AddEventoListener para adicioná-lo ao Painel Figura 9 O método AddEventoListener na caixa
Script (Figura 9). de ferramentas Ações
9. Clique no campo do objeto na área de

parâmetros do painel Ações.
O botão Inserir Caminho de Destino agora
estará ativo.

11. Selecione a opção Relativo e selecione o nome

da ocorrência de seu botão. Clique em OK para
fechar a caixa de diálogo.
O ouvinte de evento estará anexado à
Figura 10 Caixa de diálogo Inserir Caminho de
ocorrência de seu botão (Figura 11).
Destino
Avance, selecionando um evento para ouvir.
Figura 11 Código de Ouvinte de evento no painel

Script

12. Na caixa de ferramentas Ações no lado

esquerdo do painel, selecione a propriedade
CLICK da classe MouseEvent (Figura 12).
Para encontrar a propriedade CLICK, abra
Flash.Events, abra MouseEvent e abra
Propriedades.
13. No painel Script, selecione a linha

AddEventoListener() para exibir os
parâmetros deste método. Depois, na área de
parâmetros, clique no campo Tipo.
14. Na caixa de ferramentas Ações, clique duas

vezes na propriedade CLICK. Figura 12 Propriedade CLICK na caixa de
A Assistência de Script acrescenta a ferramentas Ações
propriedade a seu código como
MouseEvent.CLICK (Figura 13).
Agora seu código estará atento a cliques no
botão. Para dizer ao ouvinte de evento como
responder quando este clique ocorrer, você
prossegue para criar uma função.
15. Na área de parâmetros, digite um nome para

sua função no campo Ouvinte. Você pode usar
o nome que desejar, mas certifique-se de que
o nome da função é particular e não contém
espaços (Figura 14).
O nome da função aparece no painel Script
enquanto você digita. Você já nomeou a função,
mas você ainda não a criou.
Figura 13 Propriedade CLICK no painel Script
16. Na caixa de ferramentas Ações, selecione a
função palavra-chave entre os Elementos de
Linguagem.
Para encontrar a função palavra-chave,
expanda os Elementos de Linguagem. Depois
expanda Instruções, Palavras-Chave &
Diretivas e expanda Palavra-Chave de
Definição.
17. Clique duas vezes na função palavra-chave

na caixa de ferramentas Ações.
O código para criar a função aparece no painel Figura 14 Nome da função no campo Ouvinte
Script (Figura 15).

18. Na área de parâmetros do Painel Script, digite

o nome de sua função no campo Nome.
Nota: O nome da função deve ser digitado
exatamente como você o digitou na função
AddEventoListener na etapa 15. Nomes de
função diferenciam maiúsculas de minúsculas.

event:MouseEvent no campo Parâmetros. Figura 15 Função código
Neste campo, você está nomeando uma
variável (evento) e indicando que tipo de
variável ele é (MouseEvent).
20. Na área de parâmetros do Painel Script,

selecione Void do menu pop-up Tipo.
Algumas funções retornam um valor quando
chamadas. A palavra-chave void indica que
esta função não retorna um valor.
Você agora pode dizer qual função você deseja
que seja executada quando ocorrer o evento
CLICK.

esquerdo do painel, selecione o método
GotoAndPlay para a classe Flash.Display
(Figura 16).
Para encontrar o método GotoAndPlay,
expanda Flash.Display e depois expanda
MovieClip.
Figura 16 Método GotoAndPlay

22. Selecione a função no painel Script e clique

duas vezes no método GotoAndPlay, na caixa
de ferramentas Ações.
O método agora está adicionado à função
(Figura 17).
23. Clique no campo do objeto na área de

parâmetros do Painel Ações.
O botão Inserir Caminho de Destino agora está
Figura 17 Método GotoAndPlay no painel Script
ativo.
24. Clique no botão Inserir Caminho de Destino

para exibir a caixa de diálogo Inserir Caminho
de Destino.
25. Selecione a opção Relativo e selecione o clipe

de filme que você deseja que seja reproduzido
quando o botão for clicado. Se você desejar
que o filme na principal linha do tempo seja
reproduzido, selecione Raiz para definir o
caminho de destino.

27. No campo Quadro, digite o número do quadro

para onde você deseja enviar o indicador de
reprodução. Por exemplo, se você desejar que
o filme comece no início, digite o número 1
para reproduzir o primeiro quadro do filme.
29. Salve o filme.

o filme.

Para saber mais sobre o ActionScript, consulte
Programação para ActionScript 3.0, “Sobre o
ActionScript” (no Flash, selecione Ajuda >
Ajuda do Flash).

Como criar um símbolo de botão

Símbolos de botão
Botões dão ao visitante um meio de controlar partes de um filme. Você pode usar símbolos de botões para
criar botões interativos que respondem à cliques de mouse, menus de sobreposição ou outras interações do
visitante. Símbolos de botões são clipes de filme interativos de quatro quadros. Os primeiros três quadros
exibem os três estados possíveis do botão: Para cima, Sobre e Para Baixo. O quarto quadro, Ativo, define a
área ativa do botão. A linha do tempo na verdade não é reproduzida como em outros filmes; ela reage ao
movimento do cursor e às ações saltando para o quadro apropriado.
Você pode criar a imagem que representa seus botões de diversas formas. Por exemplo, você pode usar
uma imagem existente como o botão ou pode criar uma forma utilizando ferramentas de desenho.
Criação de um botão
Você criará um novo símbolo de botão que contém
duas camadas. Uma camada conterá uma forma
representando o fundo do botão. A segunda camada
vai incluir um rótulo de texto para o botão. Você
mudará o fundo e o rótulo de texto nos estados Para
Cima e Para Baixo do botão para criar o efeito
rollover.
1. Inicie o Adobe Flash CS4 e crie um novo arquivo
Flash (ActionScript 3.0).
2. Selecione Inserir > Novo Símbolo.
A caixa de diálogo Criar Novo Símbolo aparece
(Figura 1).
3. Selecione Botão como tipo de comportamento
e clique em OK.
Você está agora no modo de criação de símbolo
e visualizando uma Linha do Tempo separada
para o símbolo de botão. O quadro Para Cima
contém quadro-chave (Figura 2).
Figura 1 Caixa de diálogo Criar Novo Símbolo
Cada quadro na Linha do Tempo de um símbolo
de botão tem uma função específica:
• Estado Para Cima: representando o
botão sempre que o ponteiro não estiver
sobre o botão.
• Estado Sobre: representando a aparência do
botão quando o ponteiro estiver sobre o botão.
• Estado Para Baixo: representando a Figura 2 Quadros do botão: Para Cima, Sobre, Para
aparência do botão quando clicado. Baixo e Ativo
© Adobe Systems Incorporated Como criar um símbolo de botão 1

• Estado Ativo: definindo a área que 16. Selecione o texto e utilize o inspetor de
responde ao clique do mouse. Essa área é propriedades para mudar algumas
invisível no filme publicado. características do texto no quadro Sobre, tais
4. Certifique-se de que o quadro Para Cima está como a cor.
selecionado. 17. Insira um quadro-chave no quadro Para Baixo.
5. Use as ferramentas de desenho para criar uma Se você quer que o texto mude de aparência
forma para o seu botão. quando o botão é clicado, edite a aparência do
texto no quadro Para Baixo.
Use o inspetor de Propriedades para configurar
as cores de preenchimento e do traçado para o A Linha do Tempo deve aparecer como mostra
estado Para Cima do botão. a Figura 3.
6. Selecione o estado Sobre e selecione Inserir > Agora você pode inserir uma ocorrência (cópia)
Linha do Tempo > Quadro-Chave para do símbolo de botão na Linha do Tempo principal
acrescentar um quadro-chave. de seu filme.
Acrescentar este quadro-chave copia a imagem 18. Clique em Cena 1 para sair do modo de edição
do botão do quadro Para Cima para o quadro de símbolo e retornar à Linha do Tempo
Sobre. principal.
7. Selecione o quadro-chave Sobre e use a 19. Selecione Janela > Biblioteca para exibir o painel
ferramenta Selecionar para selecionar o botão. Biblioteca.
8. Mude a cor de preenchimento ou do traçado da O novo símbolo de botão aparece no painel
forma do botão. Biblioteca.(Figura 4).
Quando visitantes passarem o mouse sobre o
botão, o botão aparecerá como você o vê no
estado Sobre.
9. Insira quadros-chave nos quadros Para Baixo e
Ativo da camada Texto. Isto copia a imagem
do botão do quadro Sobre para ao quadros Para
Baixo e Ativo.
10. Insira a nova camada e a nomeie Texto.
11. Selecione o quadro Para Cima da camada Texto.
Figura 3 Linha do Tempo do Botão
Este quadro já contém um quadro-chave.
12. Utilize a ferramenta Texto para digitar o texto
na forma do botão.
13. Use o inspetor de propriedades para ajustar a
fonte, o tamanho, e a cor do texto de forma que
combine com o formato do botão.
14. Use a ferramenta Selecionar ou as teclas de
seta Para Cima, Para Baixo, Para a Esquerda e
Para a Direita para posicionar o texto na forma
do botão.
15. Insira um quadro-chave no quadro Sobre da
camada texto. Figura 4 Botão na biblioteca
2 Como criar um símbolo de botão © Adobe Systems Incorporated

Nota: Você deve selecionar o símbolo na

biblioteca para ver o símbolo no painel de
visualização.
20. Arraste o símbolo de botão da biblioteca
para o Palco.
21. Selecione Controlar >Testar Filme para t
estar o filme.
Quando você passa o cursor sobre o botão você
verá as mudanças que você definiu nos quadros
Sobre para o botão. Se você editou o estado
Para Baixo do botão, este será visível quando
você clicar o botão.
de visualização. Depois salve seu filme.
Acrescentando som a um botão

Você também pode acrescentar sons ao botão de forma que os visitantes escutem um som quando eles
interagirem com o botão.
1. Use a ferramenta Selecionar para clicar duas
vezes no botão para entrar no modo de edição
de símbolo do botão.
2. Insira uma nova camada e a nomeie Som
3. Selecione Arquivo > Importar > Importar Para
a Biblioteca para importar um pequeno som para
a biblioteca.
Você pode adquirir sons com direitos autorais
livres do sites como www.flashkit.com.
4. Na camada Som, acrescente um quadro-chave
para corresponder com o estado do botão ao
qual você quer acrescentar som.
Por exemplo, para reproduzir um som quando
os visitantes passarem o cursor sobre o botão,
acrescente o quadro-chave ao estado Sobre.
5. Clique no novo quadro-chave.
6. Certifique-se de que o inspetor de Propriedades
está visível. (Selecione Janela > Propriedades.)
7. No inspetor de Propriedades, selecione um menu pop-up Som
arquivo de som do menu pop-up Som
(Figura 5). Figura 5 Inspetor de propriedades
8. Selecione Evento no menu pop-up Sincronizar.
O som será reproduzido quando os visitantes
interagirem com o botão.

Acrescentando controle com ações

Até o momento o botão está lindo, mas não executa nenhuma ação. Você pode solucionar isto acrescentando
um código ActionScript ao seu filme.
Botões dão ao visitante controle sobre o filme. Você pode criar um código para seus botões interromperem
o filme, interromperem os sons, reiniciarem o filme (depois de pará-lo) ou pularem para diferentes quadros
dentro do filme e iniciarem a reprodução. Você pode acrescentar ações a qualquer ocorrência de símbolo de
botão que você tenha colocado no filme.
1. Selecione a ocorrência de botão ao qual você

quer acrescentar uma ação. Utilize a caixa de
texto Nome no inspetor de Propriedades para
dar ao botão um nome particular de ocorrência
(Figura 6).
2. Na Linha do Tempo principal, crie uma nova
camada chamada Ações.
3. Crie um quadro-chave na camada de ações que
corresponda ao quadro-chave onde o seu botão
aparece pela primeira vez no Palco. Selecione
este quadro-chave na camada Ações.
Nota: Se seu botão não aparecer neste quadro,
o Flash irá gerar uma mensagem de erro porque
você está apontando para um objeto que ainda
não está no Palco.
Nome da ocorrência
4. Janela > Ações para exibir o painel Ações.
Figura 6 Inspetor de Propriedades de Botão
esquerdo do painel, selecione o método
AddEventListener da classe IEventDispatcher.
Para encontrar o método AddEventListener,
abra Flash.Events e depois abra
IEventDispatcher.
7. Clique duas vezes bi método AddEventListener
para adicioná-lo ao Painel Script (Figura 7).
8. Clique no campo do objeto na área de parâmetros
do painel Ações.
O botão Inserir Caminho de Destino agora Figura 7 Método AddEventListener na caixa de
estará ativo. ferramentas Ações


10. Selecione a opção Relativo e selecione o nome
da ocorrência de seu botão. Clique em OK para
fechar a caixa de diálogo.
esquerdo do painel, selecione a propriedade
CLICK da classe MouseEvent. (Figura 9)
Para encontrar a propriedade CLICK, abra Figura 8 Caixa de diálogo Inserir Caminho de
Flash.Events, abra MouseEvent e abra destino
Propriedades.
AddEventListener() para exibir os parâmetros
deste método. Depois, na área de parâmetros,
clique no campo Tipo.
vezes na propriedade CLICK.
A Assistência de Script acrescenta a propriedade
a seu código como MouseEvent.CLICK
(Figura 10).
14. No campo Ouvinte da área de parâmetros, digite
um nome para sua função no campo Ouvinte.
Você pode usar o nome que desejar, mas
Figura 9 Propriedade CLICK na caixa de
certifique-se de que o nome da função seja
ferramentas Ações
particular e não contenha espaços.
O nome da função aparece no painel Script
enquanto você digita. Você já nomeou a função,
mas você ainda não a criou.
15. Na caixa de ferramentas Ações, selecione a
função palavra-chave entre os Elementos de
Linguagem.
Para encontrar a função palavra-chave, expanda
os Elementos de Linguagem. Depois expanda
Instruções, Palavras-Chave & Diretivas e
expanda Palavra-Chave de Definição. Figura 10 Propriedade CLICK no painel Script

16. Clique duas vezes na função palavra-chave na

caixa de ferramentas Ações.
O código para criar a função aparece no painel
Script.
o nome de sua função no campo Nome.
Nota: O nome da função deve ser digitado Figura 11 Códigos de função no painel Script
exatamente como você o digitou na função
AddEventListener na etapa 15. Nomes de
função diferenciam maiúsculas de minúsculas.
event:MouseEvent no campo Parâmetros.
(Figura 11)
Neste campo, você está nomeando uma variável
(evento) e indicando que tipo de variável ele é
(MouseEvent).
esquerdo do painel, selecione o método StopAll
para a classe SoundMixer.
Figura 12 Método StopAll no painel Ações
Para encontrar o método StopAll, expanda
Flash.Media, e depois expanda SoundMixer.
20. Selecione a função no painel Script e clique duas
vezes no método StopAll na caixa de
ferramentas Ações.
O método é adicionado à função (Figura 12).
21. Salve o filme.
Agora, quando os visitantes clicarem no botão,
todos os sons em execução naquele momento
do filme vão se interromper.
Para saber mais sobre o ActionScript, consulte
Programação para ActionScript 3.0, “Sobre o
ActionScript” (no Flash, selecione Ajuda > Ajuda

Analisando Flash na web

Nome do aluno: ________________________________________________ Data: _____________
Examine alguns sites que utilizam Adobe Flash CS4 para ver exemplos de técnicas que os designers usam
para atingir um público variado. Use esta planilha para registrar suas observações.
URL: ___________________________________________________________________________
Nome do site: _____________________________________________________________________
Qual o principal tipo de público que este site está visando? Como o site tenta atingir este público?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Identifique as seguintes técnicas de Flash e explique qual parte do site as utiliza:
Interpolação de movimento
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Interpolação de forma
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Analisando Flash na web 1

Clipes de filme
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Botões
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Sons (Quantos sons você ouve? Quantas vezes o som parece se repetir?)
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Ações Stop
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Ações GoTo e Play
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Analisando Flash na web © Adobe Systems Incorporated

Combinações de símbolos (tais como botões que contêm clipes de filme animados)
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Desafio:
Para os efeitos complexos que você vê, sugira combinações ou habilidades técnicas que podem ter sido
usadas para criá-las.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Descreva uma técnica que o surpreendeu.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Descreva uma técnica desafiadora.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Analisando Flash na web 3

Descreva técnicas não identificadas.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Descreva um design criativo.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
4 Analisando Flash na web © Adobe Systems Incorporated

Análise do Flash na web

Este modelo de análise de um site Flash demonstra algumas técnicas que os designers usam para atingir
públicos específicos.
URL: georgewashington.si.edu/
Nome do site: George Washington: Um tesouro nacional.
Qual o principal tipo de público que este site está visando? Como o site tenta atingir este público?
O público principal é composto de professores que podem usar as informações deste site para compor
uma unidade de estudo sobre George Washington, história, cultura ou arte.
Identifique as seguintes técnicas de Flash e explique que parte do site as utiliza:

Interpolação de movimento
Quando você abre o site as barras vermelhas e brancas que se expandem e contraem são interpolações
de movimento, assim como a estrela branca que aparecem.
Interpolação de forma
A estrela branca que se transforma no perfil de George Washington é possivelmente uma interpolação
de forma.
Clipes de filme
A estrela rotativa que aparece quando o cursor está sobre as palavras “Explore o Retrato” é um clipe
de filme.
Botões
Depois que você abre o retrato e clica “Explore o Retrato”, as caixas no topo do retrato, rotuladas
de Simbólico, Biográfico e Artístico, são todos botões. Os números que aparecem no retrato também
são botões.
Sons (Quantos sons você ouve? Quantas vezes o som parece se repetir?)
Não existem sons no retrato.
Ações stop
Provavelmente existe uma ação de parada colocada após as listras vermelhas e brancas completarem
suas interpolações de movimento, para manter os visitantes na tela antes deles decidirem clicar no
retrato.
Ações GoTo e Play

O mais provável é que haja uma ação GoTo e Play configurada em cada um dos botões principais
sobre o retrato e nos botões numéricos no retrato.
© Adobe Systems Incorporated Análise do Flash na web 1

Combinações de símbolos (tais como botões que contêm clipes de filme animados)
O botão “Explore o Retrato” na página inicial é uma combinação de um botão e um clipe de filme,
porque o clipe de filme aparece apenas quando o cursor está sobre o botão.
Desafio:
Para os efeitos complexos que você vê, sugira combinações ou habilidades técnicas que podem ter sido
usadas para criá-las.
Quando o cursor passa sobre um dos números do retrato, esses botões desbotam todas as outras
partes da imagem e realçam a seção da imagem à qual o número está vinculado. Esses botões
provavelmente contêm uma ação que ativa um clipe de filme a começar quando o estado Sobre é
alcançado no botão. O clipe de filme desbota todos os aspectos da imagem exceto o aspecto
relacionado com o número selecionado.
Descreva uma técnica que o surpreendeu.

A lente de aumento é uma técnica surpreendente que acrescenta ao visual geral do site. Arraste o
painel da parte inferior do retrato para aumentar a porção do retrato sob o painel.
Descreva uma técnica desafiadora.

A lente de aumento é uma técnica desafiadora. Provavelmente envolve o uso de programação com
ActionScript.
Descreva técnicas não identificadas.

É difícil dizer como a lente de aumento foi feita.
Descreva um design criativo.

Um efeito criativo é o desbotado e a aproximação de aspectos do retrato quando você clica em um
botão de número.
2 Análise do Flash na web © Adobe Systems Incorporated

Como produzir vídeos Flash para usar na web

Adobe Flash CS4 oferece uma gama de opções para importar a publicar vídeo com um filme Flash.
Você pode importar os seguintes formatos de vídeo:
• Vídeo para Adobe Flash (.flv, .f4v)
• 3GPP/3GPP2 para dispositivos móveis (.3gp, .3gpp)
Você pode importar os seguintes formatos de vídeo se você tiver QuickTime 7 ou versões mais recentes
instaladas (Windows e Mac OS):
• Audio Vídeo Interleaved (.avi)
• Digital Vídeo (.dv)
• Motion Picture Experts Group (.mp4, .m4v, .avc)
• QuickTime Movie (.mov, .qt)
Você pode importar os seguintes formatos de vídeo se você tiver DirectX 9 ou versões mais recentes
instaladas (Windows apenas):
• Audio Vídeo Interleaved (.avi)
• Motion Picture Experts Group (.mpg ou .mpeg)
• Windows Media File (.wmv, .asf)
Emprego de vídeo
Como você escolhe empregar seu vídeo determina como você cria seu conteúdo de vídeo e como você o
integra com o Flash. Você pode incorporar vídeo no Flash das seguintes maneiras:
Download progressivo de vídeo a partir de um servidor de web: O Flash cria um arquivo de vídeo que
baixa de um servidor normal de web e o reproduz dentro do arquivo SWF.
Fluxo de vídeo com o Flash Media Server: Esta opção produz a melhor performance, mas requer ou o
Flash Media Server ou uma assinatura do serviço Flash Vídeo Streaming. Visite o site da Adobe para
maiores informações: www.adobe.com.
Incorporar vídeo em um documento do Flash: Você pode incorporar um pequeno arquivo de vídeo de
curta duração diretamente dentro do documento Flash e publicá-lo como parte do arquivo SWF. Incorporar
conteúdo de vídeo diretamente dentro do arquivo SWF aumenta significantemente o tamanho do arquivo
quando publicado e é aconselhável para pequenos arquivos de vídeo (normalmente menos de 10 segundos
de duração).
© Adobe Systems Incorporated Como produzir vídeos Flash para usar na web 1
Para codificar seu vídeo para Flash:
1. Abra um documento existente ou crie e salve

um novo documento Flash.
Nota: Você tem que salvar o documento Flash

antes de começar o processo de importação do
vídeo.
2. Selecione um quadro-chave na camada na qual

você quer importar o vídeo.
Aqui é onde o player vai estar localizado depois

que a importação do vídeo estiver completada. Figura 1 Caixa de diálogo importar Vídeo
3. Clique Arquivo > Importar > Importar Vídeo.
A caixa de diálogo importar Vídeo aparece

(Figura 1).
4. Clique no botão Abrir o Decodificador de Mídia

Adobe.
O Decodificador de Mídia Adobe aparece

(Figura 2).
5. No Decodificador de Mídia clique no botão

Adicionar e procure a localização do arquivo de
vídeo que você deseja decodificar.
Figura 2 Decodificador de Mídia Adobe
6. Escolha o Formato apropriado, Pré-
configuração (Figura 3) e a locação do Arquivo
De Saída no Decodificador de Mídia.
7. Clique no botão Iniciar Fila para começar a

decodificação.
Quando a decodificação estiver completa, feche

o Decodificador de Mídia Adobe.
Figura 3 Opções Pré-configuradas para deco-

dificação de vídeo
2 Como produzir vídeos Flash para usar na web © Adobe Systems Incorporated
Para utilizar o download progressivo:
1. Clique em Arquivo > Importar > Importar Vídeo.
A caixa de diálogo importar Vídeo aparece

(Figura 4).
2. Clique no botão procurar para encontrar a

localização para o arquivo de vídeo recentemente
decodificado que você deseja importar.
Você pode usar um arquivo de vídeo localizado

tanto em seu computador quanto na Internet.
3. Selecione Carregue o Vídeo Externo com Figura 4 Assistente de Importação de Vídeo, página
Componente de Reprodução. Esta opção Selecionar Vídeo
carrega progressivamente seu arquivo externo
de vídeo no seu documento Flash.
4. Clique em Avançar (Windows) ou Continuar

(Mac OS). A página de Atribuição de Capa do
assistente para Importação de Vídeo aparece
(Figura 5). A capa do vídeo determina a locação
e aparência dos controles do vídeo. Os visitantes
vêem esta capa quando o Flash reproduz o vídeo.
5. Selecione uma capa do menu pop-up Capa.
6. Selecione uma cor de capa do seletor de cores.
7. Clique em Avançar (Windows) ou Continuar

(Mac OS).
A página Concluir Importação de Vídeo do

assistente de Importação de Vídeo aparece.
Esta página confirma a localização do arquivo Figura 5 Assistente para Importação de Vídeo,
do vídeo Flash. página de Atribuição de Capa
© Adobe Systems Incorporated Como produzir vídeos Flash para usar na web 3
O componente FLVPlayback aparece no Palco

(Figura 6).
9. Selecione Controlar > Testar Filme para vê-lo

passar.
O vídeo passa na janela do Flash Player. Você

pode usar os controles para, pausar, avançar,
retroceder e mudar o volume do vídeo.
10. Selecione Arquivo > Fechar para fechar a janela Figura 6 Componente FLVPlayback no Palco
de visualização.
11. Abra a pasta na qual você salvou o documento.
Esta pasta agora contém dois novos arquivos:

um arquivo FLV e um SWF para a capa do vídeo.
(A capa será denominada algo como
MojaveOverAll.swf) Quando você publicar seu
documento Flash, precisará copiar ambos os
arquivos na mesma localização do documento
Flash.
Incorporação de vídeos dentro de arquivos SWF

Quando você seleciona a opção incorporação de vídeo, Flash converte o vídeo em quadros da Linha de
Tempo. Quando o arquivo SWF é publicado, o vídeo está inteiramente contido neste arquivo. Diferentemente
do download progressivo, vídeos incorporados não requerem arquivos externos portanto são fáceis de
empregar. No entanto, porque vídeos incorporados frequentemente têm problemas com sincronização de
áudio depois de 120 quadros, Adobe recomenda vídeos incorporados em apenas 3 casos:
• Quando você quer que visitantes que possuem Flash 5 possam ver seu vídeo
• Quando você precisa ter um único arquivo que contenha o vídeo e o conteúdo Flash
• Quando o seu vídeo clipe tem menos de 5 segundos de duração.
Essas situações não são comuns. Em todas as outras situações, vídeo incorporado não é recomendado.
4 Como produzir vídeos Flash para usar na web © Adobe Systems Incorporated
Como importar sons

No Adobe Flash CS4 você pode importar som e vídeo para integrá-los a Linha de Tempo. Você pode criar
conteúdo media-rich com controle preciso.
Importar som
Você pode utilizar som com vários propósitos no Flash. Alguns exemplos incluem trilhas sonoras, narração e
efeitos de som que complementam objetos tais como botões de sobreposição.
Você pode importar os seguintes formatos de arquivo de áudio para o Flash:
• ASND Adobe Sound Document (Documento de Som do Adobe)
• WAV (Windows apenas)
• AIFF (Mac OS apenas)
• MP3 (Windows ou Mac OS)
Se você tem QuickTime 4 versões mais modernas instaladas em seu sistema, você pode importar estes
formatos adicionais de arquivo de áudio:
• AIFF (Windows ou Mac OS)
• Sound Designer II (Mac OS apenas)
• Apenas o som do QuickTime Movies (Windows ou Mac OS)
• Sun AU (Windows ou Mac OS)
• System 7 Sounds (Mac OS apenas)
• WAV (Windows ou Mac OS)
Quando você importa um arquivo de áudio, ele é colocado na biblioteca. Então você pode arrastar uma
ocorrência (cópia) do som para o Palco. Arquivos de áudio devem ser vinculados a quadros-chave.
Você pode sincronizar o som para seu filme de diversas formas (utilizando o menu pop-up no inspetor de
Propriedades)
• Evento: Um som de evento toca quando o indicador de reprodução alcança o primeiro quadro-
chave contendo o som. Ele toca em sua totalidade, independente da Linha de Tempo mesmo se o
filme pare.Se uma diferente ocorrência do mesmo som é iniciada, o som vai se sobrepor.
• Iniciar: O mesmo que Evento, exceto que se o som já estiver sendo executado, nenhuma ocorrência
do som começará a tocar.
• Parar: Silencia o som especificado.
• Fluxo: Força o filme a manter o compasso do som. Se o Flash não consegue desenhar quadros de
animação rápido o bastante, ele pula quadros. Diferentemente dos sons Evento, sons Correntes
param se o filme para. Sons Correntes também produzem arquivos de tamanho muito menor, apesar
de sua qualidade tender a ser mais pobre do que sons Evento.
© Adobe Systems Incorporated Como importar sons 1

Importar um som
1. Inicie o Flash e abra um documento
2. Insira uma nova camada.
3. Clique duas vezes o novo nome da camada e a
renomeie Som.
a Biblioteca.
A caixa de diálogo Importar se abre (Figura 1).
5. Localize o arquivo de áudio, selecione-o e clique
Abrir (Windows) ou Import To Library (Mac OS).
Nota: Você pode baixar gratuitamente loops de Figura 1 Caixa de diálogo Importar
música e clipes de efeitos de som em sites como
o www.flashkit.com, por exemplo.
6. Selecione o quadro 1 da camada Som.
Botão Reproduzir
aberto. (Em caso negativo, selecione Janela .
Biblioteca.)
O som aparece no painel Biblioteca. Para
executar o som, selecione-o e clique no botão
Reproduzir no painel superior do painel
Biblioteca (Figura 2).
8. Arraste o arquivo de áudio do painel Biblioteca
para o Palco.
Nota: A camada Som deve conter quadros o
bastante para executar o som inteiro. Por
exemplo, se o seu filme é configurado para 12
quadros por segundo e seu som tem 2 segundos,
a camada de som deve conter pelo menos 24
quadros. Se você está acrescentando som à um
filme existente, seu filme já deve ser longo o Figura 2 Painel Biblioteca
bastante para acomodar o som.
9. Se necessário, acrescente quadros à camada
Som. Para fazer isso, clique um quadro em algum
ponto da Linha do Tempo da camada Som, tal
como o quadro 24 para um filme de 2 segundos
a 12 quadros por segundos, e selecione Inserir
> Quadro.
O som não aparece no Palco mas aparece na Figura 3 Som na Linha de tempo
Linha de Tempo como um gráfico de ondas
(Figura 3).
Note: Pressione F5 para inserir um quadro.
Pressione Chefa-F5 para excluir um quadro.
2 Como importar sons © Adobe Systems Incorporated

Edição das configurações do som

Através do inspetor de Propriedades você pode mudar as configurações do som, incluindo fazendo o som
fade in e fade out.
10. Selecione o primeiro quadro-chave e ajuste as

configurações do som no inspetor de
Efeitos: Escolha entre efeitos criados

previamente tais como Aparecer Gradualmente,
Desvanecer Gradualmente, mantendo o som em
apenas um canal (esquerdo ou direito), ou
diminuindo o som de um canal para o outro
(Figura 5). Escolhendo Personalizada (ou
clicando o botão Editar) se abre uma janela onde
você pode editar seus próprios efeitos de
aparecimento e desvanecimento (Figura 6). Na Figura 4 Inspetor de Propriedades de Som
janela de edição de som chamada e caixa de
diálogo Editar Envelope, ajuste as alças de som
para controlar o volume do som em cada canal.
Sincronizar (Sync): Escolha Evento, Iniciar,

Parar, Fluxo.
Loop: Configure a quantidade de vezes que o

som deve ser repetido.
Figura 5 Menu pop-up de efeito
Figura 6 Caixa de diálogo Editar Envelope
© Adobe Systems Incorporated Como importar sons 3

Compactação de Som
Arquivos de áudio podem aumentar drasticamente o tamanho do arquivo de seus filmes. Uma maneira de
controlar isto é configurar a compactação do som utilizando o Flash.

aberto e selecione o arquivo de áudio.
2. Clique o botão Propriedades no painel Biblioteca

(Figura 7).
A caixa de diálogo Propriedades do Som se abre

(Figura 8).
3. Escolha o método de compactação do menu

Compactação e clique em OK.
ADPCM: Este método configura a

compactação dos dados de som para 8-bit e 16- Botão Propriedades
bit. Utilize esta configuração quando você
exportar eventos de som curtos, tais como o som
de um botão sendo apertado.
Figura 7 Botão Propriedades da Biblioteca
MP3: Este método oferece boa compactação
e fidelidade para sons correntes mais longos,
tais como faixas de música.
Raw: Isto faz uma nova amostra do arquivo mas

não realiza nenhuma compactação.
Fala: Uma boa compactação para usar arquivos

de áudio de fala.
4. Salve o filme.
5. Selecione Controlar > Testar o Filme.
Figura 8 Caixa de diálogo Propriedades do Som
4 Como importar sons © Adobe Systems Incorporated

Como usar guias e réguas
Utilização de guias
Você pode arrastar guias horizontais e verticais das réguas para dentro do Palco quando as réguas estão
exibidas. Você pode mover guias, bloquear guias, esconder guias e remover guias. Você também pode
encaixar objetos à guia e mudar a cor da guia, e a tolerância do encaixe (A proximidade que um objeto estar
para se encaixar em uma guia). Adobe Flash CS4 permite a você criar Linhas de Tempo aninhadas (por
exemplo, clipes de filmes dentro de um filme principal). Guias aparecem no Palco apenas quando a Linha de
Tempo na qual elas foram criadas está ativa.
Para criar uma guia:
1. Certifique-se de que as réguas estão visíveis

selecionando Exibir > Réguas.
2. Clique em uma régua e a arraste em direção ao
Palco (Figura 1). Figura 1 Arraste uma régua
A guia aparece enquanto você arrasta.
3. Solte o botão do mouse no ponto em que deseja
posicionar a guia (Figura 2).
Figura 2 Guia no Palco
Para bloquear ou desbloquear guias:

• Selecione Exibir > Guias > Bloquear Guias.
Este comando alterna entre bloqueio e desbloqueio de guias. Quando as guias estão bloqueadas, elas
não respondem à cliques ou à arrastar, de forma que você não as moverá acidentalmente quando você
estiver trabalhando com objetos no Palco. No entanto, você ainda pode criar novas guias.
Nota: Você também pode usar a opção Bloquear Guias na caixa de diálogo Guias (Exibir > Guias >
Editar Guias) para mais informações, veja a seção intitulada Mudar as Propriedades das Guias no final
desta apostila.
© Adobe Systems Incorporated Como usar guias e réguas 1

Para Exibir e esconder guias de desenho

• Selecione Exibir > Guias > Exibir Guias.
Para mover uma guia:

• Certifique-se que as guias não estão bloqueadas.
Com a ferramenta Seleção, clique em qualquer
ponto da guia e arraste para o local desejado no
Palco.
Para remover uma guia:

• Coma as guias desbloqueadas, use a ferramenta
Seleção para arrastar a guia para a régua
horizontal ou vertical.
Utilização de guias para posicionar objetos no

Palco
1. Selecione Exibir > Encaixe > Encaixar nas Guias.

2. Arraste a borda de um objeto na direção de uma
guia.
Quando você se aproxima de uma guia, o objeto Figura 3 Encaixe objeto na guia
se encaixa nela (Figura 3).
3. Solte o botão do mouse.
O objeto se mantém encaixado na guia.
Você pode usar guias para alinhar diferentes
objetos (Figura 4). Guias são especialmente
úteis para alinhar objetos em camadas Figura 4 Alinhando objetos com guias
diferentes.
Mudar as propriedades da guia

Você pode mudar cores, configurar propriedades de
encaixe e bloquear guias..
1. Selecione Exibir > Guias > Editar Guias.
A caixa de diálogo Guias aparece (Figura 5).
2. Clique o controle Cor das Guias para mudar as
cores da guia.
3. Selecione Bloquear Guias para bloquear guias
em sua posição.
4. Clique OK para fechar a caixa de diálogo Guias. Figura 5 Caixa de diálogo Guias
2 Como usar guias e réguas © Adobe Systems Incorporated

Utilização de símbolos
Um símbolo é um objeto de imagem reutilizável armazenado na biblioteca de um documento Adobe Flash
CS4. Ele pode ser simples como um desenho estático ou complexo como um clipe de filme que roda dentro
de um outro clipe de filme. Tanto você quanto o Flash player podem reutilizar o símbolo armazenados na
biblioteca. Isso não apenas acelera a rapidez do desenvolvimento do projeto, mas também mantém seu
documento reduzido, possibilitando ao visitante rapidez no carregamento.
Cada símbolo possui uma Linha de tempo. Você pode adicionar quadros, quadros-chave e camadas à Linha
de tempo de um símbolo, da mesma forma que na Linha de tempo principal.
A ocorrência é uma cópia de um símbolo localizado no Palco ou dentro de outro símbolo. A ocorrência pode
ser diferente do seu símbolo em cor, tamanho e função. A edição de um símbolo atualiza todas as ocorrências
do símbolo, mas a aplicação de efeitos à ocorrência de um símbolo atualiza apenas a ocorrência.
Tipos de símbolos
Cada símbolo possui uma Linha de tempo e um Palco exclusivos e completos, com camadas. Você pode
acrescentar quadros, quadros-chave e camadas à Linha de tempo de um símbolo, do mesmo modo que na
Linha de tempo principal. Ao criar um símbolo você seleciona o seu tipo.
• Use símbolos gráficos para imagens estáticas e para criar peças reutilizáveis de animação vinculadas à
Linha de Tempo principal. Os símbolos gráficos operam em sincronização com a Linha de Tempo
principal. Em uma seqüência de animação de símbolos gráficos, os controles e sons interativos não
funcionam. Os símbolos gráficos acrescentam menos tamanho ao arquivo FLA do que botões ou clipes
de filme, porque não possuem Linha de Tempo.
• Utilize símbolos de botão para criar botões interativos que respondam a cliques do mouse, rolagens ou
outras ações. Você define os gráficos associados a vários estados do botão e depois atribua ações à
ocorrência do botão. Para obter mais informações, consulte Manipulando eventos em Aprendizado do
ActionScript 2.0 no Adobe Flash ou Manipulando eventos em Programação em ActionScript 3.0.
• Use símbolos de clipe de filme para criar peças reutilizáveis de animação. Os clipes de filme têm a sua
própria Linha de Tempo com múltiplos quadros, independente da Linha de tempo principal - imagine-os
como aninhados dentro de uma Linha de Tempo principal que pode conter controles e sons interativos e
até outras ocorrências de clipe de filme. Você também pode colocar ocorrências de clipe de filme
dentro da Linha de tempo de um símbolo de botão para criar botões animados. Além disso, os clipes de
filme são compatíveis com o ActionScript®.
Criação de novos símbolos

Você pode criar um símbolo a partir de objetos selecionados no Palco, criar um símbolo vazio e construir ou
importar o conteúdo no modo de edição de símbolo, ou criar símbolos fonte no Flash. Os símbolos contém
todas as funcionalidades que o Flash pode criar, incluindo animação.
Flash acrescenta o símbolo à biblioteca e alterna pra o modo de edição de símbolo. No modo de edição de
símbolo, o nome do símbolo aparece acima do canto superior direito do Palco, e uma cruz indica o ponto de
registro do símbolo.
© Adobe Systems Incorporated Utilização de símbolos 1

Para criar um novo símbolo:

1. Abra um documento Flash existente ou crie e
salve um novo documento Flash.
2. Selecione Inserir > Novo símbolo.
A caixa de diálogo Criar Novo Símbolo aparece.
(Figura 1).
3. Na caixa de diálogo Criar Novo Símbolo, digite Figura 1 Caixa de diálogo Criar Novo Símbolo
o nome do símbolo e selecione o tipo.
4. Clique em OK.
O novo símbolo foi criado e se abre em modo
de edição de símbolo.. Figura 2 Barra Edição
5. Acrescente conteúdo ao símbolo.
6. Para sair do modo de edição de símbolo e
retornar à Linha de Tempo principal, clique em
Cena 1 na barra Edição (Figura 2).
O novo símbolo está armazenado na biblioteca
de Documentos e pode ser reutilizado neste e
em outros documentos Flash.
Conversão de um objeto existente em

símbolo
Um objeto existente pode ser facilmente convertido
em um símbolo.
Para converter um objeto em um símbolo:
1. Selecione o objeto que você quer converter em
símbolo.
Nota: Para selecionar tanto o traçado quanto o
preenchimento de uma forma, você deve clicar
duas vezes sobre o preenchimento a não ser
que o objeto esteja agrupado.Um clique simples
no preenchimento seleciona apenas o Figura 3 Caixa de diálogo Converter em Símbolo
preenchimento, um clique simples no traçado
seleciona um lado do traçado enquanto que dois
cliques no traçado seleciona o traçado todo.
2. Selecione Modificar > Converter em Símbolo.
A caixa de diálogo Converter em Símbolo
aparece (Figura 3).
3. Na caixa de diálogo Converter em Símbolo,
nomeie o novo símbolo e selecione o seu tipo.
O objeto agora é um símbolo que está
armazenado na biblioteca de Documentos e pode
ser reutilizado neste e em outros documentos.
4. Selecione Janela > Biblioteca para exibir o painel
Biblioteca para ver o seu novo símbolo.
2 Utilização de símbolos © Adobe Systems Incorporated

Edição de um símbolo
Você pode editar um símbolo existente ou através do painel Biblioteca ou localmente no Palco. Você também
pode utilizar o comando Editar no Local para editar um símbolo. Utilizando o comando Editar no Local você
pode editar uma símbolo enquanto ainda visualiza outros objetos no Palco.Editar um símbolo é diferente de
mudar as propriedades de uma ocorrência de símbolo. Quando você clica em um símbolo no Palco e muda
suas propriedades, você está mudando a ocorrência de símbolo e não o símbolo em si Neste caso, apenas a
ocorrência é afetada. Quando você edita o símbolo, todas as ocorrências do símbolo são afetadas.
Edição de um símbolo no local
Para editar um símbolo no local, você pode clicar duas vezes em uma ocorrência de símbolo no Palco ou
você pode selecionar uma ocorrência do símbolo no Palco e clicar com o botão direito (Windows) ou clicar
pressionando Control (Mac OS) e então selecionar Editar no Local. Você também pode selecionar Editar >
Editar no Local para editar um símbolo.
Edição de um símbolo através da Biblioteca
Quando você edita um símbolo através da Biblioteca, o Flash atualiza todas as ocorrências do símbolo no
Palco. Se o símbolo não tiver ocorrências (ou seja, se não houver sido copiado da Biblioteca para o Palco),
nada mudará no Palco quando você editar o símbolo.

Utilizando símbolos com a ferramenta de desenho Deco
Utilizando as ferramentas de desenho Decorativa você pode transformar seus símbolos em padrões
geométricos complexos. As ferramentas de desenho Decorativa aplicam cálculos algorítmicos, conhecidos
como desenho de procedimento, a clipes de filme ou símbolos gráficos na Biblioteca. Desta forma, você
pode criar padrões complexos se utilizando de qualquer forma ou objeto gráfico.
O efeito Simetria
Use o efeito Simetria para organizar símbolos
simetricamente em volta de um ponto central.
Para aplicar o efeito Simetria:

1. Selecione a ferramenta de desenho Deco e
selecione o efeito Pincel de Simetria do menu
Efeito de Desenho no inspetor de Propriedades
(Figura 4).
Editar.
A caixa de diálogo Trocar Símbolo aparece, com
uma lista de símbolos personalizados da
biblioteca (Figura 5).
Figura 4 Menu Efeito de Desenho no inspetor de
Você pode usar qualquer clipe de filme ou Propriedades
símbolo de imagem da biblioteca com o efeito
Pincel de Simetria. Este efeito com base em
símbolos permite um grande controle sobre o
trabalho artístico que você cria no Flash.
3. Selecione o símbolo na caixa de diálogo Trocar
Símbolo e clique em OK.
Figura 5 Caixa de diálogo Trocar Símbolo

4. No inspetor de Propriedades, escolha uma das

opções do menu Opções Avançadas (Figura 6).
• Girar ao redor do ponto: Gira as formas

na simetria ao redor de um ponto fixo
designado por você. O ponto de referência
padrão é o ponto central da simetria. Para
girar o objeto ao redor de seu ponto central,
arraste-o em um movimento circular.
• Refletir em toda a linha: Inverte as formas

separadas por uma distância igual através
de uma linha invisível especificada por você.
• Refletir ao redor do ponto: Coloca duas

formas separadas por uma distância ao
redor de um ponto fixo especificado por
você.
Figura 6 Menu Opções Avançadas
• Translação de grade: Cria uma grade
usando as formas no efeito de Simetria que
você está desenhando. Cada clique da
ferramenta de desenho Deco no Palco cria
uma grade de formas. Ajuste a altura e a
largura das formas usando as coordenadas
X e Y definidas pelas alças do Pincel de
Simetria.
5. Clique no Palco no local onde você deseja o

que Pincel de Simetria apareça (Figura 7).
6. Use as alças do Pincel de Simetria para ajustar

o tamanho da simetria e o número de Figura 7 Organizando símbolos com o Pincel de
ocorrências de símbolos. Simetria

O efeito Preenchimento de Grade

Você pode utilizar o efeito Preenchimento de Grade para preencher o Palco, um símbolo ou uma região
fechada com um símbolo da biblioteca. Após o Preenchimento de grade ser desenhado no Palco, se o
símbolo preenchido for movido ou redimensionado, o Preenchimento de grade será movido ou redimensionado
de acordo.
O efeito Preenchimento de Grade cria um fundo quadriculado, um fundo lado a lado ou uma área ou forma
com um padrão personalizado. O símbolo padrão do efeito de Simetria é uma forma de retângulo preta sem
traçado de 25 x 25 pixels.
Para aplicar o efeito Preenchimento de Grade: 5. Clique no Palco ou dentro da forma ou do símbolo
1. Selecione a ferramenta de desenho Deco e, em onde deseja que o padrão Preenchimento de
seguida, Preenchimento de grade, no menu grade apareça. (Figura 9).
Efeito do desenho, no inspetor de Propriedades. O padrão preenche a área.
(Figura 8).
2. No Inspetor de propriedades clique no botão
Editar para selecionar um símbolo personalizado
na biblioteca.
biblioteca.
Você pode usar qualquer clipe de filme ou
símbolo gráfico na Biblioteca como efeito de
Preenchimento de Grade.
3. Selecione um símbolo na caixa de diálogo Trocar
4. Você pode usar as seguintes opções do inspetor
de Propriedades para especificar o
espaçamento horizontal e vertical e a escala do Figura 8 Efeito do desenho no inspetor de
preenchimento. Propriedades
• Espaçamento horizontal: Especifica a
distância horizontal em pixels entre formas
usadas no Preenchimento de Grade
• Espaçamento vertical: Especifica a distância
vertical em pixels entre formas usadas no
Preenchimento de Grade.
• Escala padrão: Amplia ou diminui um objeto
horizontalmente (ao longo do eixo X) e
verticalmente (ao longo do eixo Y).
Nota: Depois de aplicar o efeito Preenchimento
de Grade, você não pode alterar as opções
avançadas para mudar o padrão de Figura 9 Organizando símbolos com o efeito
preenchimento. Preenchimento de Grade

O efeito Preenchimento de Videira

Você pode utilizar o efeito Preenchimento de Videira para preencher o Palco, um símbolo ou uma região
fechada com um padrão de videira. Você pode substituir a sua própria arte pelas folhas e flores, selecionando
símbolos da biblioteca. O
padrão resultante fica contido em um clipe de filme que contém os símbolos que formam o padrão.
Aplicar o efeito Preenchimento de Videira:

1. Selecione a ferramenta de desenho Deco e, em
seguida, Preenchimento de Videira, no menu
Efeito do Desenho, no inspetor de Propriedades.
2. No Inspetor de propriedades (Figura 10),clique
em Editar para selecionar um símbolo
personalizado da Biblioteca e substituir um ou
ambos os símbolos de flores e folhas padrão.
biblioteca.
Você pode usar qualquer clipe de filme ou
símbolo gráfico na Biblioteca para substituir os
símbolos de flores e folhas padrão pelo efeito
Preenchimento de Videira.
3. Selecione um símbolo na caixa de diálogo Trocar
4. Você pode especificar o espaçamento horizontal
e vertical, bem como o dimensionamento da
forma de preenchimento.
• Ângulo da ramificação: Especifica o
ângulo do padrão de ramificação. Figura 10 Botões editar no inspetor de
• Cor da ramificação: Especifica a cor a Propriedades
ser usada para a ramificação.
• Escala padrão: O dimensionamento de um
objeto o reduz ou o amplia horizontalmente
(ao longo do eixo x) e verticalmente (ao
longo do eixo y).
• Extensão do segmento: Especifica a
extensão dos segmentos entre os nós da
folha e da flor.

• Padrão de animação: Especifica que cada

iteração do efeito seja desenhada em um
novo quadro na linha de tempo. Esta opção
cria uma seqüência animada quadro a quadro
do padrão de flor conforme ele é
desenhado.
• Etapa do quadro: Especifica a quantidade
de quadros a serem interpolados por
segundo do efeito que está sendo
desenhado.
Nota: Após aplicar o efeito Preenchimento de
Videira, você não poderá mais alterar as opções
avançadas no inspetor de Propriedades para
mudar o padrão de preenchimento.
5. Clique no Palco ou dentro da forma ou do símbolo Figura 11 Opções avançadas do Pincel de Simetria
onde deseja que o padrão Preenchimento de
Videira apareça (Figura 11).
O padrão preenche a área.

Como criar máscaras

No Adobe Flash CS4, uma máscara é um tipo especial de camada que permite que você revele partes
selecionadas de outra camada. Por exemplo, se você desejar mostrar pessoas andando por dentro de uma
casa, e você desejar que eles só fiquem visíveis quando passam por uma janela, você pode usar uma
máscara. Você pode usar máscaras em técnicas como criação de luz de spot ou para mostrar imagens por
trás de outras imagens.
Criação de uma máscara

1. Inicie o Flash e abra um documento.
2. Importe uma imagem para o Palco.
3. Crie uma nova camada e nomeie-a “máscara”.
Ponha esta camada diretamente acima da
camada que contém a imagem.
2. Use uma ferramenta de desenho, como a
ferramenta Oval ou Retângulo, para definir a
região da camada de máscara que deseja que
seja transparente (Figura 1).
Aplique na área transparente da máscara uma
cor sólida e forte. Isto o ajudará a localizá-la.
4. Clique com o botão direito (Windows) ou Região da Máscara
pressionando a tecla Control (Mac OS) na Camada de máscara
camada de máscara, e selecione Máscara no
menu pop-up. Figura 1 Camada de máscara com região de
máscara
As duas camadas mudam para indicar que a
camada de baixo está mascarada. O nome da
camada mascarada fica recuado abaixo do nome
da camada de máscara e seu ícone muda para
um ícone de camada de máscara (Figura 2).
Nota: Para exibir o efeito da máscara, bloqueie
tanto a máscara quanto a camada que contém
o conteúdo mascarado. Desbloqueie uma ou
ambas as camadas para ocultar o efeito.
5. Selecione Controlar > Testar Filme para ver sua Ícone de Máscara Ícone de bloqueio
reprodução.
Observe como somente a área mascarada fica
visível.
de visualização. Figura 2 Máscara aplicada
© Adobe Systems Incorporated Como criar máscaras 1

Animação de máscara
Você pode animar a máscara de forma que, por
exemplo, a máscara atravesse a imagem.
7. Na camada de máscara, acrescente um quadro
na altura do quadro 20.
8. Na camada mascarada abaixo, adicione também
um quadro ao quadro 20.
9. Clique na Camada de máscara em qualquer
lugar entre os quadros 1 e 20, e então selecione
Inserir > Interpolação de Movimento.
10. Desbloqueie a camada de máscara, clique no
quadro 20, e mova o objeto de máscara
(Figura 3). Figura 3 Interpolação de Movimento na camada
11. Configure a guia de movimento conforme de máscara
necessário.
12. Selecione Controlar > Testar Filme e assista à
reprodução.
Observe como somente a região mascarada
atravessa a o conteúdo abaixo dela.
Janela de visualização.
Altere o conteúdo mascarado
Você também pode fazer mudanças no conteúdo da camada abaixo da máscara sem alterar a máscara.
14. Na camada mascarada, selecione o quadro 10 Observe como a região abaixo da máscara
e selecione Inserir > Linha do Tempo > muda no meio da animação.
Quadro-Chave em Branco.
Ao inserir um quadro-chave em branco, se janela de visualização.
apaga o conteúdo do quadro. Devolva o conteúdo mascarado ao seu estado
O conteúdo da camada mascarada some. original
15. Acrescente novos conteúdos à camada 18. Selecione o quadro 10 (onde você inseriu o
mascarada no quadro 10. segundo quadro-chave), e selecione Modificar
> Linha do Tempo > Limpar Quadro-Chave.
Por exemplo, você pode arrastar uma imagem
diferente até o Palco. Isto transforma o quadro-chave novamente em
um quadro normal, e devolve a camada de
16. Selecione Controlar > Testar Filme para assistir
volta a seu estado original.
à reprodução.
2 Como criar máscaras © Adobe Systems Incorporated

Como utilizar um guia de movimento com uma

animação de interpolação de filme
No Adobe Flash CS4, guias de movimento aparecem quando você cria interpolações de movimento. com o
uso de guias de movimento você pode mover objetos ao longo de um caminho editável.
1. Selecione a camada que contém o objeto que

deseja.
2. Selecione Inserir Interpolação de Movimento.
Figura 1 Camada do objeto com interpolação de
Note a interpolação na camada Linha de Tempo movimento aplicada
(Figura 1)
3. No Palco, mova o objeto e note aparecimento
da guia de movimento (Figura 2).
4. Clique e arraste um ponto na guia de movimento.
Edite quantos pontos da guia for necessário
(Figura 3).
5. Ative o Papel de Transparência para ver como Figura 2 Guia de movimento
o objeto se move (Figura 4).
6. Selecione Controlar > Testar Filme para
executá-lo.
Observe que o objeto se move ao longo da guia.
de visualização.
Figura 3 Edição de guia de movimento
Figura 4 Objeto se movendo ao longo da guia
Como utilizar um guia de movimento com uma animação de

© Adobe Systems Incorporated interpolação de filme 1
Como atenuar interpolações

Atenuação é uma técnica para modificar a maneira como Flash calcula os valores de propriedade entre
quadros-chave de propriedade em uma interpolação. Sem atenuação, Flash calcula estes valores de modo
que as mudanças de valor são as mesmas entre cada quadro. Você pode utilizar Atenuação para ajustar o
intervalo de mudanças dos valores para uma animação mais natural ou mais complexa.
Uma atenuação é uma curva matemática que se aplica aos valores de propriedade de uma interpolação. O
efeito final da interpolação é o resultado da combinação do intervalo dos valores de propriedade na interpolação
e da curva de atenuação.
Você pode utilizar a atenuação no Editor de Movimento para interpolações de movimento ou no inspetor de
Propriedades para interpolações clássicas. Atenuações aplicadas ao Editor de Movimento podem afetar
uma propriedade individual, um grupo de propriedades ou todas as propriedades de uma interpolação.
Atenuações aplicadas ao inspetor de Propriedades podem afetar uma propriedade individual ou todas as
propriedades de uma interpolação.
Uma atenuação pode ser simples ou complexa. O Flash contém uma série de atenuações pré-configurados
que você pode aplicar para efeitos simples ou complexos. No inspetor de Propriedades ou no Editor de
Movimento, você pode criar suas próprias curvas de atenuação personalizadas.
Um dos muitos usos comuns da atenuação é quando você edita um caminho de movimento no palco e
habilita a movimentação de quadros-chave para fazer a velocidade de movimento consistente em cada
segmento do caminho. Você pode então utilizar a atenuação para acrescentar uma aceleração e desaceleração
mais realistas nas extremidades do caminho.
Atenuação de propriedades individuais para interpolações de movimento no

Editor de movimento
Você pode aplicar uma atenuação pré-configurada a uma propriedade individual ou a uma categoria de
propriedades no Editor de Movimento.
Para aplicar uma atenuação pré-configurada:
1. Inicie o Flash. Abra um documento contendo

uma interpolação de movimento.
2. Na Linha de Tempo, selecione a Interpolação Aba Editor de Movimento

de Movimento e selecione a aba Editor de
Figura 1 Linha de Tempo do Flash com interpolações
Movimento (Figura 1).
de movimento e aba Editor de Movimento
© Adobe Systems Incorporated Como atenuar interpolações 1

3. No Editor de Movimento, acrescente a

atenuação à lista de atenuações disponíveis às
interpolações selecionadas, e depois aplique a
atenuação às propriedades que escolheu
(Figura 2). (Veja os seguintes marcadores para
instruções).
Quando você aplica uma atenuação a uma
propriedade, você pode ver sua curva na área
de gráfico da curva de propriedade (Figura 3).
• Para acrescentar uma atenuação à lista de
atenuações para a interpolação selecionada,
clique o botão Adicionar (+) na seção Atenuar
na parte inferior do Editor de Movimento e então
selecione a atenuação a ser acrescentada.
• Para acrescentar uma atenuação à uma Figura 2 Incluindo atenuações no Editor de
propriedade individual, selecione a atenuação do Movimento
menu Atenuação Selecionada para a
propriedade.
• Para acrescentar uma atenuação à uma
categoria inteira de propriedades, tais como
movimento, transformação, efeitos de cor ou
filtros, selecione uma atenuação do menu
Atenuação Selecionada para a categoria da
propriedade.
• Pra habilitar ou desabilitar o efeito de uma
atenuação para uma propriedade ou categorias
de propriedades, selecione a opção Habilitar/ Figura 3 Atenuação Salto Interno acrescentada
Desabilitar Atenuação para a propriedade ou ao Editor de Movimento
categorias de propriedades. Isto permite a você
visualizar rapidamente os efeitos de uma
atenuação nas curvas de propriedades.
• Para remover uma atenuação da lista de
interpolações disponíveis, clique no botão
Remover Atenuação na seção Atenuações do
Editor de Movimento e depois selecione a
atenuação do menu pop-up. .
4. Para visualizar a animação no palco, clique Enter

(Windows) ou Return (Mac OS).
5. Ajuste as atenuações na interpolação até obter

o efeito desejado.
2 Como atenuar interpolações © Adobe Systems Incorporated

Edição de curvas de atenuação para interpolações de movimento no Editor de

Movimento
No Editor de Movimento você pode editar o formato de curvas de atenuação pré-configuradas e criar
curvas de atenuação personalizadas.
• Para editar uma curva de atenuação pré- disponíveis utilizando o botão Adicionar (+) na
configurada, configure o valor de atenuação no seção Atenuação do Editor de Movimento.
campo ao lado do nome da atenuação (Figura 4). • Para editar uma curva de atenuação acrescente-
• Para curvas de atenuação simples, o valor é uma a à lista de atenuações e depois edite a curva
porcentagem representando a força da aplicação utilizando as mesmas técnicas de edição de
da curva de atenuação na curva de propriedade. qualquer outra curva de Bezier.
Valores positivos aumentam a atenuação no fim
da curva. Valores negativos aumentam a
atenuação no começo da curva.
• Para curvas de atenuação que são ondas, tais
como ondas senoidais ou ondas dente-de-serra,
o valor representa o número de meio-ciclos na
onda.
• Para editar uma atenuação pré-configurada,
primeiro a acrescente na lista de atenuações Figura 4 Edição de uma curva de atenuação simples
Atenuando propriedades individuais de interpolações clássicas no

Você pode criar atenuações para interpolações
clássicas utilizando o inspetor de Propriedades.
Para atenuar uma interpolação clássica:
1. Inicie o Flash e abra um documento contendo
uma interpolação clássica.. Figura 5 Interpolação clássica na Linha de Tempo
2. Na Linha de Tempo, seleciona a interpolação
clássica (Figura 5).
Campo do Valor
3. No inspetor de Propriedades digite um valor para de Atenuação
a força da atenuação no campo Valor da
Atenuação (Figura 6).
4. Para visualizar a animação no Palco, clique Enter
5. Ajuste as atenuações na interpolação até atingir Botão Editar
o efeito desejado.
Figura 6 Edição de uma curva de atenuação simples
© Adobe Systems Incorporated Como atenuar interpolações 3

Edição de uma curva de atenuação para interpolações clássicas no Inspetor de

Propriedades
No inspetor de Propriedades você pode editar o formato das curvas para criar atenuações interna e atenuações
externas personalizadas.
Para editar curvas de atenuação:
1. Na Linha de Tempo, selecione a interpolação
clássica que você deseja modificar as curvas
de atenuação.
2. Clique no botão Editar ao lado do campo Valor
de Atenuação no inspetor de Propriedades do
quadro (Figura 6).
A caixa de diálogo Atenuação Interna/Externa
Personalizada aparece b (Figura 7).
3. (Opcional) Para exibir a curva para uma
propriedade, desmarque Usar Uma Figura 7 Caixa de diálogo Atenuação Interna/
Configuração Para Todas as Propriedades e Externa Personalizada
selecione uma propriedade no menu (Figura 8).
4. Você pode acrescentar pontos de controle em
qualquer lugar ao longo da curva para ajudá-lo
a manipular a curva. Para acrescentar pontos
de controle, clique pressionando Control
(Windows) ou clique pressionando Command
(Mac OS) na linha diagonal.
5. Para aumentar a velocidade do objeto, arraste o
ponto de controle para cima, para diminuir a Figura 8 Menu das propriedades de atenuação
velocidade, arraste o ponto de controle para baixo.
6. Para maiores ajustes na curva de atenuação e
afinar o valor de atenuação da interpolação,
arraste as alças do vértice (Figura 9).
7. Para visualizar a animação no Palco, clique o
botão reproduzir no canto esquerdo inferior.
8. Ajuste os controles até conseguir o efeito desejado.
Nota: Se você usar a caixa de diálogo
Atenuação Interna/Externa Personalizada para
aplicar uma atenuação personalizada a um
quadro, o valor da atenuação da caixa de edição
exibe ‘—’. Se você usar a caixa de edição ou o
controle deslizante pop-up para aplicar um valor
de atenuação a um quadro, o gráfico Atenuação Alças de Vértice
Botão de reprodução
Personalizada será configurado para uma curva
equivalente e a opção Usar Uma Configuração
Para Todas as Propriedades estará selecionada. Figura 9 Alças de Vértice e botão de reprodução
4 Como atenuar interpolações © Adobe Systems Incorporated

Como criar um personagem animado

Poses de Cinemática Inversa
Cinemática Inversa (IK) é um método para animar um objeto ou conjunto de objetos relacionados entre si
utilizando uma estrutura articulada de bones (ossos). Bones permitem ocorrências de símbolos e objetos de
forma a se moverem de maneira mais complexa e natural com um mínimo de esforço de design. Por
exemplo, Cinemática Inversa permite que você crie animações de personagem tais como braços, pernas e
expressões faciais com muito mais facilidade.
Você pode acrescentar bones para separar ocorrências de símbolos ou para o interior de uma forma simples.
Quando um bone se move, os outros bones conectados se movem em relação ao bone que iniciou o movimento.
Ao fazer animação usando Cinemática Inversa você precisa apenas especificar as posições de início e de
final dos objetos. Cinemática Inversa ajuda você a criar movimentos naturais muito mais facilmente.
Figura 1 Uma forma acrescentada com uma Figura 2 Um grupo de diversos símbolos com bones
armadura de Cinemática Inversa IK anexados
Uma cadeia de bones é chamada de armadura. Os bones em uma armadura são conectados por uma
hierarquia pai-filho. Uma armadura pode ser linear ou ramificada. As ramificações de uma armadura originadas
no mesmo bone são chamadas de irmãos.
Você pode usar a IK no Flash de duas maneiras. A primeira é articular uma série de ocorrências de símbolos,
adicionando um bone para conectar cada ocorrência. Os bones permitem que a cadeia de ocorrências de
símbolo se mova conjuntamente.
Por exemplo, você pode ter um conjunto de clipes de filme em que cada item represente partes diferentes do
corpo humano. Vinculando torso, membros superiores, membros inferiores e mãos, você pode criar um
braço com uma movimentação realista. Você pode criar uma armadura ramificada para incluir braços,
pernas e cabeça.
A segunda maneira de usar a IK é adicionar uma armadura ao interior de um objeto de forma. A forma pode
ser criada no modo de mesclar desenho ou no modo de desenho do objeto. Os bones permitem mover e animar
partes da forma sem precisar desenhar versões diferentes da forma nem criar uma interpolação de forma.
Por exemplo, você pode adicionar bones a um desenho simples de uma cobra para permitir que a cobra se
mova e faça curvas de maneira realista.
Quando você adiciona bones a ocorrências de símbolo ou formas, o Flash move a ocorrência ou forma e a
armadura associada para uma nova camada na Linha do Tempo.
© Adobe Systems Incorporated Como criar um personagem animado 1

Essa nova camada é chamada de camada de pose. Cada camada de pose só pode conter uma armadura e
as respectivas formas ou ocorrências associadas.
O Flash inclui duas ferramentas para trabalhar com IK. Você acrescenta bones às ocorrências de símbolo
e formas com a ferramenta Bone. Você utiliza a ferramenta Ligar para ajustar os relacionamentos entre
bones individuais e pontos de controle de objetos de forma.
Você pode animar armaduras e respectivos símbolos associados ou formas na Linha do Tempo ou com o
ActionScript 3.0. Você anima na Linha do Tempo, definindo poses diferentes para a armadura em quadros
diferentes. O Flash interpola as posições da armadura entre os quadros. Para obter informações sobre
como animar armaduras com o ActionScript, consulte as classes fl.ik na Referência de componentes e
linguagem do ActionScript 3.0.
Nota: Para utilizar IK, seu arquivo FLA deve especificar ActionScript 3.0 como a configuração de script na
aba do Flash da caixa de diálogo Configurações de Publicação.
Para acrescentar IK bones e poses: à ocorrência. Solte o botão do mouse sobre o

ponto específico onde você deseja que o bone
1. Inicie o Flash e selecione Arquivo > Novo.
seja anexado. Você também pode editar estes
2. Na aba Geral, selecione Arquivo Flash pontos de anexação posteriormente.
(ActionScript 3.0) e clique em OK.
O primeiro bone em uma armadura é o bone raiz.
3. Comece criando e organizando no Palco Ele tem um círculo em volta da cabeça do bone.
múltiplas formas em um esboço espacial do
Como padrão, o Flash move o ponto de
objeto que você deseja animar utilizando o IK.
transformação de cada ocorrência de símbolo
4. Converta todas as formas no Palco em para o local da junta formado por cada conexão
ocorrências de símbolo (Figura 3). Neste de bones. Para o bone raiz o ponto de
exemplo, os símbolos forma organizados para transformação se move para a cabeça do bone.
criar um homem musculoso. Para o último bone na ramificação, o ponto de
5. Selecione o ferramenta Bone do painel transformação se move para a cauda do bone.
Ferramentas. Você pode desabilitar o movimento automático
do ponto de transformação na aba Desenho
Você também pode pressionar a tecla X para
selecionando Editar > Preferências (Windows)
selecionar a ferramenta Bone.
ou Flash > Preferências (Mac OS).
6. Com a ferramenta Bone, clique na ocorrência
de símbolo que será a raiz ou a cabeça da
armadura. Então arraste para outras ocorrências
de símbolo para vinculá-la à ocorrência raiz.
Ao arrastar, um bone aparece. Quando você
solta o botão do mouse, um bone sólido estará
presente entre as duas ocorrências de símbolo
Cada bone tem uma cabeça (a finalização
redonda) e uma cauda (a finalização pontuda)
Cada ocorrência de símbolo pode ter somente
um ponto de anexação. Você pode editar estas
anexações posteriormente.
Ao arrastar de uma ocorrência para a outra para
criar um bone, clique na primeira ocorrência no
ponto específico onde você deseja anexar o bone Figura 3 Ocorrências de símbolo no Palco
2 Como criar um personagem animado © Adobe Systems Incorporated

6. Para acrescentar outro bone, arraste da cauda

do primeiro bone para a próxima ocorrência de
símbolo que você deseja acrescentar à
armadura.
O cursor muda quando você o passa sobre a

cabeça ou sobre a cauda de um bone existente.
Vincule objetos com bone na ordem das relações

pai-filho que você queira criar (Figura 4).
Você pode mover, (Figura 5) acrescentar,

excluir e editar pontos de controle do contorno Figura 4 Vinculando símbolos com a ferramenta
de uma forma IK utilizando a ferramenta Bones
Subseleção (Figura 5).
• Para mover a posição de um bone sem mudar a

forma IK, arraste a finalização do bone.
• Para exibir os pontos de controle dos limites da

forma IK, clique no traçado da forma.
• Para mover um ponto de controle, arraste o

ponto de controle.
• Para acrescentar um novo ponto de controle,

clique em uma parte do traçado que não tenha
nenhum ponto de controle.
Você também pode utilizar a ferramenta Adicionar

Ponto de Ancoragem no painel de ferramentas. Figura 5 Movendo objetos vinculados com a
ferramenta Subseleção
Para excluir um ponto de controle existente, clique
nele para selecioná-lo e pressione a tecla Delete.
Você também pode usar a ferramenta Excluir Ponto

de Ancoragem no painel de ferramentas.
À medida que você acrescenta bones às

ocorrências, o Flash move cada ocorrência para uma
nova camada na Linha do Tempo. A nova camada
é chamada camada de pose (Figura 6). Todos os
bones e ocorrências de símbolo associadas com a
referida armadura localizam-se na camada de pose.
Figura 6 Camada de Pose
Cada camada de pose pode conter apenas uma
armadura. O Flash acrescenta uma nova camada
de pose à Linha de Tempo entre camadas existentes
para manter a ordem armazenamento dos objetos
no Palco.
© Adobe Systems Incorporated Como criar um personagem animado 3

Agora você pode animar este personagem e

manter a relação entre os símbolos utilizando
os bones que você criou.
7. Insira uma Pose na camada Armadura no
quadro 10 clicando o botão direito do mouse
(Windows) ou clique pressionado Control
(Mac OS) o quadro e selecionando Inserir Pose
(Figura 7).
Figura 7 Inserir Pose
8. Reorganize a pose como desejar.
9. Selecione Controlar > Testar Filme para
visualizar o filme. Os símbolos se movem
coordenadamente. Você pode afinar este
movimento mudando os pontos de ancoragem
nos bones.
anterior.
11. Salvar o filme.
12. Fechar o filme.
4 Como criar um personagem animado © Adobe Systems Incorporated

Como aplicar cores e gradientes

Cada documento Flash contém sua própria paleta de cor. Você pode usar o painel Cor para aplicar cores
que não estão na paleta padrão de paleta segura para a web, de 216 cores. Você pode criar novas cores e
adicioná-las à paleta, que você pode salvar para uso posterior. Você também pode incorporar novas cores
aos preenchimentos de gradiente e armazenar seus gradientes para uso repetido. Um gradiente é um
preenchimento multicolorido no qual uma cor gradualmente muda para outra cor.
Gradientes podem ser úteis na criação de efeitos, tais como brilhos, esferas foto-realísticas, chamas solares,
botões brilhosos. Com o Adobe Flash CS4, você pode criar dois tipos de preenchimento gradiente - linear e radial.
Crie cores Controle de cor de

preenchimento
1. Inicie o Flash e abra um novo documento em branco.
2. Use a ferramenta Oval para criar uma forma simples
no Palco.
Seletor de
3. Você pode definir preenchimento e cor de traçados Cores do
Sistema
usando o Inspetor de Propriedades. Para aplicar uma
cor que não esteja na paleta atual, use o painel Cor
Controle
(Figura 1). de Brilho
Se o painel Cor não estiver aberto, selecione Janela
> Cor. Valor
hexadecimal
4. Certifique-se de que você selecionou tanto o traçado
e preenchimento de sua forma. Alfa
Nota: Para selecione o traçado e preenchimento de

sua forma, clique duas vezes na forma com a
ferramenta Seleção.
Figura 1 Painel Cor
5. No painel Cor, clique no ícone balde de tinta (não na
caixa de cor ao lado dele) para selecionar a seção
Cor de preenchimento.
Você pode selecionar uma nova cor de preenchimento
na paleta clicando no controle de cor de
preenchimento, ou você pode preencher valores RGB
precisos. Você pode também preencher estes valores
como números hexadecimais. Isto é útil se o cliente
fornecer valores RGB ou hexadecimais para as cores.
Use o controle deslizante de Alfa para definir o nível
de transparência.
6. Para procurar uma cor, clique e arraste no seletor de
cores do sistema. Para definir a tonalidade, arraste o Cor antiga
controle de Brilho. Cor atual
À medida que arrasta, as cores às quais aponta são

exibidas na área Amostra de Cor Atual e no controle Figura 2 Seleção de uma nova cor
Cor de preenchimento (Figura 2).
© Adobe Systems Incorporated Como aplicar cores e gradientes 1

Adicione cores à paleta

Uma vez que tenha misturado suas próprias cores, você pode usá-las para criar uma paleta personalizada.
Você faz isso com o painel Cor e no painel Amostras.
1. Certifique-se de que o painel Cor e o Painel

Amostras estão ambos abertos.
Se não estiverem, selecione Janela > Cor e
Janela > Amostras.
Nota: Como o painel Cor e o Painel Amostras
normalmente se encontram no mesmo grupo de
painéis, você pode preferir desencaixar um painel
para poder ver ambos ao mesmo tempo. Clique
no título do painel e arraste-o para fora do grupo
de painéis.
2. No painel Cor, use o seletor de cores do sistema

ou as caixas RGB para criar a nova cor.
Figura 3 Menu do painel Cor
3. No menu do painel Cor, selecione Adicionar
Amostra (Figura 3).
A nova cor é adicionada à paleta no painel
Amostras (Figura 4).
Nova
amostra de
cor
Gradiente
Figura 4 Painel Amostras
Paleta de cores seguras para a web

Por padrão, o Painel Amostras exibe a paleta de cores seguras para a web. Esta paleta é destinada a
funcionar em todos os monitores dos visitantes, inclusive aqueles com monitores antigos que exibem somente
256 cores. Apresar dos novos monitores funcionarem com mais de 256 cores, muitos web designers
recomendam a continuação do uso desta paleta para garantir que suas páginas tenham aparência coerente
para todos os visitantes. (Um benefício adicional é que ele te dá uma gama limitada de cores dentre as quais
escolher; às vezes é mais fácil fazer boas escolhas quando as opções são limitadas). Se você tem certeza de
que seus visitantes possuem monitores mais novos, pode se sentir à vontade para fugir desta paleta usando
o painel Cor.
2 Como aplicar cores e gradientes © Adobe Systems Incorporated

Crie gradientes
1. Certifique-se de que o painel Cor e o Painel Menu Tipo
Amostras estão ambos visíveis.
Se não estiverem, selecione Janela > Cor e
Janela > Amostras.
2. Use a ferramenta Seleção para clicar duas vezes

na forma oval no Palco.
3. No painel Cor, selecione Radial no menu Tipo

(Figura 5). As seleções no menu Tipo
determinam o estilo de preenchimento de
uma forma.
Isto preenche a forma selecionada com um
gradiente radial, composto de duas cores
indicadas nas duas Amostras de cor de
gradiente. Figura 5 Menu Tipo, exibindo estilos de preen-
chimento disponíveis
Nota: Por padrão, estas cores podem ser
definidas como preto e branco.
Você pode ter até dezesseis Amostras de cor Modo Estender no
diferentes em um gradiente. Para adicionar menu Estouro
outras, clique na barra de definição do gradiente
(Figura 6).
Nota: Gradientes radiais funcionam melhor em
formas elípticas.
4. Certifique-se de que o menu Estouro está

definido como Estender (Figura 6).
Estouro permite que você permite que você
controle as cores aplicadas além dos limites de
um gradiente. Os modos Estouro são Estender
(o modo padrão), Refletir e Repetir.
O gradiente começa preto no interior
(determinado pela amostra de cor mais à Ponteiro
esquerda) e progride para o branco (determinado de Cor
pela amostra de cor mais à direita).
5. Clique duas vezes o ponteiro de cor à esquerda,

abaixo da barra de definição da Cor de gradiente. Amostra de cor Barra de
Use o seletor de cores para escolher a nova cor do gradiente definição do
para o interior do gradiente. A amostra de cor gradiente
muda de cor. Figura 6 Opções de gradiente no painel Cor
© Adobe Systems Incorporated Como aplicar cores e gradientes 3

6. Clique na barra de definição do gradiente para

adicionar uma nova amostra de cor ao gradiente
(Figura 7).
7. Clique e arraste no seletor de cores do sistema

para selecionar uma nova cor para a amostra.
Você pode também selecionar cores digitando
números nas caixas de RGB ou hexadecimais.
Você pode alterar a cor do ponteiro da amostra
da direita para mudar a cor externa do gradiente.
Selecionando preto (ou outra cor escura) dá a
forma um contorno forte.
Figura 7 Adicionar uma nova cor à barra de

8. No menu do painel Cor, selecione Adicionar
definição do gradiente
Amostra. O novo gradiente é adicionado aos
gradientes do Painel Amostras.
9. Desmarque a forma no Palco para visualizar o

gradiente aplicado à forma (Figura 8).
Figura 8 Gradiente aplicado
4 Como aplicar cores e gradientes © Adobe Systems Incorporated

Como criar efeitos de texto com filtros

Você pode acrescentar filtros gráficos a texto, clipes de filme e botões no Adobe Flash CS4. Filtros gráficos
estão disponíveis na seção Filtros do inspetor de Propriedades.
Utilizando o filtro Sombra projetada ao texto

O filtro Sombra projetada cria a impressão que o texto ou um objeto está projetando uma sombra.
1. Inicie o Flash e abra o documento que você

quer editar.
2. Selecione o texto no qual você deseja

acrescentar o filtro.
3. No inspetor de Propriedades, exiba a seção

Filtros (Figura 1).
Se o inspetor de Propriedades não estiver visível,
selecione Janela > Propriedades.
4. Clique no ícone Adicionar Filtro ( ) no canto

inferior esquerdo do painel. Ícone
Adicionar
5. Selecione Sombra Projetada no menu Filtros Filtro
(Figura 2). Figura 1 Seção Filtros no inspetor de Propriedades
O filtro Sombra Projetada é aplicado ao texto
(Figura 3).
Figura 2 Menu Filtros
Figura 3 Sombra Projetada aplicada
© Adobe Systems Incorporated Como criar efeitos de texto com filtros 1

Você pode ajustar as características da Sombra

Projetada, tais como suas cores na seção Filtros no
Figura 4 Propriedades da Sombra Projetada
Outros filtros gráficos

Existem vários outros filtros que você pode aplicar ao texto para criar efeitos visuais interessantes.
Desfoque
O filtro Desfoque suaviza as bordas e detalhes dos objetos. Aplicando um desfoque em um objeto pode
fazê-lo parecer que ele está atrás de outros objetos, ou dar a impressão que o objeto está em movimento.
Ajuste o grau e direção do desfoque utilizando as caixas de texto X e Y.
Brilho
O filtro Brilho permite que você aplique uma cor em volta das bordas de um objeto.
• Brilho: Faz o objeto parecer brilhar.
• Brilho Interno: Aplica o brilho apenas dentro das bordas do objeto.
• Vazado: Remove o objeto e deixa o brilho. O objeto aparece contornado em brilho.
Bisel
A utilização de um bisel aplica um realce no objeto que o faz parecer curvado acima da superfície de fundo.
• Bisel Interno: Dá ao objeto um aspecto tri-dimensional aplicando realces e uma sombra ao
interior do objeto.
• Bisel Externo: Dá ao objeto um aspecto tri-dimensional aplicando realces e uma sombra ao
exterior do objeto.
• Bisel Máxima: Aplica efeitos de bisel interno e bisel externo ao objeto.
Você pode alterar a sombra e cores de realce do bisel, tipo de bisel (interno, externo, inteiro), seu grau e o
ângulo que a luz recai sobre ele.
2 Como criar efeitos de texto com filtros © Adobe Systems Incorporated

Brilho de Gradiente
A aplicação de um brilho de gradiente produz um efeito de brilho com um gradiente colorido através da
superfície do brilho. O brilho de gradiente requer uma cor no início do gradiente com um valor Alfa 0. Você
não pode mover a posição desta cor, mas pode mudar a cor.
Bisel de Gradiente
A aplicação de um bisel de gradiente produz um efeito de elevação que faz o objeto parecer que está
elevado acima do fundo, com uma gradiente de cor através da superfície do bisel. O bisel de gradiente
requer uma cor no meio do gradiente com um valor Alfa.
Ajustar Cor
O filtro Ajustar Cor permite que você controle com precisão os atributos de cor do objeto selecionado,
incluindo contraste, brilho, saturação e matiz.
• Brilho: faz o objeto parecer mais claro ou mais escuro.
• Contraste: Aumenta ou diminui a distinção entra luz e sombra
• Saturação: Aumenta a intensidade da cor. Por exemplo, aumentar a saturação em um texto azul faz o
texto de um azul mais vibrante.
• Matiz: Aumenta ou diminui o tom da cor.
© Adobe Systems Incorporated Como criar efeitos de texto com filtros 3

Como importar imagens

Mesmo que o Adobe Flash CS4 por si só ofereça ótimas ferramentas de desenho, você frequentemente vai
querer utilizar imagens de outras fontes. No Flash você pode importar fotografias, desenhos vetoriais criados
com outros programas, imagens preexistentes tais como logomarcas e assim por diante. Como designer,
você tem que decidir quando é melhor criar a imagem no Flash e quando você tem que importar imagens.
Você toma estas decisões baseadas nas necessidades do design e nos recursos disponíveis.
Formatos de imagens aceitos pelo Flash

Flash aceita a importação uma gama de formatos de imagens. Em geral você precisa obter estas imagens
em seus tamanhos e formatos desejados utilizando um programa de edição de imagem antes de importá-las
para o Flash.
Alguns dos formatos usados mais comuns são:
• PNG: Este é o formato de arquivo que o Adobe Fireworks CS3 usa e Flash aceita edição plena entre
Flash e Fireworks. Isto quer dizer que você pode abrir um documento PNG no Fireworks de dentro do
Flash, editá-lo em Fireworks e visualizar estas mudanças imediatamente no Flash. Qualquer camada do
documento Fireworks é preservada no Flash.
• JPEG: Este é o formato padrão para fotos na web. JPEGs podem ser compactados. Utilize Fireworks
para realizar as necessárias compactações antes de importar. Você também pode abrir um JPEG de
dentro do Flash, editá-lo em Fireworks ou outro programa de edição de imagem e visualizar estas
mudanças imediatamente no Flash.
• GIF e BMP: Estes devem ter seus tamanhos otimizados antes de serem importados, usando o
Fireworks.
• Arquivos do Adobe Photoshop CS4: Ao importar um arquivo, Flash pode preservar muitos dos atributos
que foram aplicados no Photoshop e oferece opções para manter a fidelidade visual da imagem e para
mais modificações na imagem.
• Arquivos Vetoriais do Adobe Illustrator CS4: Você pode importá-los no Flash, completos com vetores,
camadas, quadros e símbolos.
Imagens bitmap e vetoriais

Imagens bitmap são compostas de pixels de diferentes cores que combinados formam uma imagem. Gráficos
e imagens salvos como GIFs ou JPEGs são ambos formatos bitmap. Quando você cria bitmaps, você
essencialmente está escolhendo a cor de cada pixel.
Imagens bitmap são dependentes de resolução. Isto quer dizer que o tamanho e a qualidade da imagem
depende do número de pixels por polegada na imagem. Imagens salvas para exibição em telas têm a
resolução de 72 pixels por polegada porque esta é a resolução da maioria dos monitores, enquanto imagens
salvas para impressão requerem 300 pixels por polegadas (ou mais).
Em contraste com bitmaps, imagens vetoriais não são criadas pixel a pixel. Pelo contrário, imagens vetoriais
se utilizam de uma série de comandos que determinam a forma de uma linha, sua locação, espessura e cor.
A forma real é renderizada (ou desenhada) na tela no momento da visualização.
O formato nativo do Flash é o vetorial, porque imagens vetoriais produzem arquivos de menor tamanho. No
entanto, como a lista anterior indica, você pode importar imagens bitmap para o Flash quando for necessário.
© Adobe Systems Incorporated Como importar imagens 1

Importação de imagens para o palco

Quando você importa uma imagem para o Palco, ela é também armazenada na biblioteca.
1. Inicie o Flash e abra o documento para qual você

quer importar uma imagem.
2. Selecione o quadro-chave onde a imagem deve
aparecer.
o Palco.
A caixa de diálogo Importar se abre
(Figura 1).
4. Procure pela pasta com a imagem desejada e
selecione a imagem.
5. Clique em Abrir (Windows) ou Escolher (Mac OS).
A imagem aparece no Palco. A imagem foi Figura 1 Caixa de diálogo Importar
também armazenada na biblioteca.
Nota: Para editar a imagem, clique com o botão
direito do mouse na imagem (Windows) ou
clique na imagem pressionando Control (Mac
OS) no painel biblioteca e selecione Editar Com
Fireworks do menu de contexto. Flash abre o
Fireworks, onde você pode editar a imagem e
retornar ao Flash após concluir.
Importação de imagens para a biblioteca

Quando você importa uma imagem para a biblioteca de documentos do Flash, a imagem está pronta para
uso mas não é imediatamente acrescentada ao documento Flash.
1. Inicie o Flash e abra o documento para qual você
quer importar uma imagem.
a Biblioteca. A caixa de diálogo Importar se abre.
3. Procure pela pasta com a imagem desejada e
selecione a imagem.
4. Clique em Abrir (Windows) ou Escolher
(Mac OS).
5. Se o painel Biblioteca não estiver aberto,
selecione Janela > Biblioteca.
A imagem aparece no painel Biblioteca
(Figura 2).
6. Selecione a imagem para visualizá-la no painel
Biblioteca. Figura 2 Painel Biblioteca com a imagem importada
2 Como importar imagens © Adobe Systems Incorporated

Importação de um PNG Fireworks

Ao importar um PNG Fireworks PNG, o Flash permite que você mantenha elementos editáveis do PNG,
incluindo camadas e texto.
1. Inicie o Flash e abra o documento para o qual

você deseja importar o PNG Fireworks.
2. Selecione o quadro-chave onde o PNG deve

aparecer.
3. Selecione Arquivo > Importar > Importar para

o Palco.
A caixa de diálogo Importar se abre.
4. Procure pela pasta com arquivo PNG desejado

e o selecione.

(Mac OS). Figura 3 Caixa de diálogo Importar Documento
A caixa de diálogo Importar Documento Fireworks
Fireworks se abre (Figura 3).
6. Para manter as camadas da imagem fonte

intactas, certifique-se de que Importar Como
Bitmap Nivelado Único não esteja selecionado.
7. No menu Importar, selecione qual a página(s)

da imagem fonte você quer importar. Você pode
selecionar todas as páginas ou pode selecionar
uma única página.
8. Use o menu Em: para indicar como você quer

que os quadros sejam importados – tanto como
um clipe de filme ou como novas camadas.
9. Flash também pergunta se você quer manter os

objetos de imagem PNG e de texto editáveis ou
se quer importá-los como bitmaps para manter
sua aparência.
• Para manter segmentos de imagem
editáveis, selecione Manter Todos os
Caminhos Editáveis.
• Para manter textos editáveis, selecione
Manter Todos os Textos Editáveis.
10. Clique em OK.

Flash importa o PNG. A imagem aparece tanto
no Palco quanto na biblioteca.

Importação de imagens do Photoshop e Illustrator

Como programas como Illustrator e Photoshop trabalham com camadas, Flash permite que você preserve
estas características durante a importação. As instruções abaixo descrevem como importar uma imagem
originária do Illustrator – a importação de uma imagem do Photoshop é muito semelhante.
1. Inicie o Flash e abra o documento para o qual

você quer importar a imagem originada do
Illustrator.
Nota: Apesar de não haver problemas
conhecidos em importar arquivos AI criados em
versões anteriores do Illustrator, Adobe
recomenda a importação de arquivos criados
utilizando o Illustrator CS4. Se você encontrar
problemas ao importar arquivos criados em
versões anteriores do Illustrator, abra o arquivo
no Illustrator CS4, salve o arquivo AI como
compatível com o CS4 e importe-o novamente
para o Flash.
2. Selecione o arquivo-chave onde você quer que

o arquivo vetorial apareça. Figura 4 Caixa de diálogo Importar Documento
Illustrator Para o Palco
o Palco.
A caixa de diálogo Importar se abre.
4. Procure a pasta contendo o arquivo vetorial

desejado e o selecione.

(Mac OS).
A caixa de diálogo Importar Documento
Illustrator Para o Palco se abre (Figura 4).
Você pode selecionar que camadas quer
importar. Você pode escolher se quer importar
camadas na imagem fonte como camadas ou
como quadros separados. Selecione cada
camada para configurar variadas opções de
importação para determinada camada.
4 Como importar imagens © Adobe Systems Incorporated

Importação de um documento XFL

Um arquivo XFL – e uma tipo de arquivo Flash que armazena a mesma informação que um arquivo FLA,
mas em formato XML. Outros programas da Adobe, tais como o InDesign ou After Effects pode exportar
arquivos no formato XFL. Isto permite a você trabalhar em um projeto primeiro em um programa em
separado e posteriormente continuar a trabalhar com ele no Flash.
Você pode abrir e trabalhar com arquivos XFL no Flash da mesma forma que você abriria um arquivo FLA.
Quando você abre um arquivo XFL no Flash, você pode salvá-lo como um arquivo FLA. Você não pode
salvar arquivos XFL de dentro do Flash.
1. Em outros programas da Adobe, tais como o InDesign ou o After Effects, exporte seu trabalho como um
arquivo XFL. O programa preserva todas as camadas e objetos de imagem do arquivo original no
arquivo XFL.
2. No Flash, escolha Arquivo > Abrir e procure pelo arquivo XFL. Clique em Abrir.
O arquivo XFL se abre no Flash da mesma maneira que um arquivo FLA. Todas as camadas do arquivo
original aparecem na Linha de Tempo e os objetos de imagem originais aparecem no painel Biblioteca.
Você pode agora trabalhar com o arquivo normalmente.
3. Para salvar o arquivo, selecione Arquivo > Salvar.

Como criar usando a interpolação de movimentos

Ao assistir à televisão e filmes, você já deve ter notado que as transições são uma parte sutil mas importante
da narrativa de uma história. Por exemplo, a fusão entre imagens indica uma passagem de tempo. Na
internet, você pode usar efeitos de transição para criar climas e para ajudar a manter os seus visitantes
interessados. Você pode usar transições para concentrar a atenção do visitante ou para indicar um caminho
preferível ao longo do site. Uma maneira de criar transições no Adobe Flash CS4 é aplicar efeitos à interpolação
de movimento.
Rotação
No inspetor de Propriedades, você pode dar rotação a qualquer interpolação de movimento. A rotação atrair
atenção ao conteúdo que está entrando ou saindo do Palco.
Para dar rotação à interpolação de movimento:
1. Abra um documento Flash preexistente ou crie
e salve um novo documento Flash.
2. Acrescente um símbolo no Palco e certifique-
se de que ele esteja sozinho em sua própria Figura 1 Linha do Tempo do Flash
camada. Por padrão o símbolo é colocado no
primeiro quadro-chave da Linha do Tempo. Este
vai ser o primeiro quadro e a posição inicial do
símbolo de interpolação de movimento.
3. Decida quanto tempo é necessário para o
símbolo entrar ou sair do Palco.
Isto lhe dirá onde colocar o quadro final da
interpolação de movimento.
4. De acordo com isto, insira o quadro final na Linha
do Tempo (Figura 1).
Nota: Se calcular com base em segundos, não
deixe de anotar a taxa de quadros (fps) na parte
inferior da Linha do Tempo. Por padrão, Flash
configura novos documentos como 12 quadros
por segundo.
5. Selecione a camada na Linha do Tempo e
selecione Inserir > Interpolação de movimento.
6. No último quadro-chave, use a ferramenta de Figura 2 Posição final da interpolação de movimento
Seleção para mover o objeto a sua posição final
(Figura 2). Repare na aparência do caminho
de movimento.
© Adobe Systems Incorporated Como criar usando a interpolação de movimentos 1

Nota: Talvez você deseje adicionar vários

efeitos, tais como mudar o tamanho ou
desvanecimento, para fazer o objeto parecer
brilhar ou aparecer gradualmente quando entra
ou desaparecer e diminuir quando sai.
• Mudar tamanho: Reduza ou aumente o
percentual da imagem no painel
Transformação com as opções de Restringir
selecionadas.
• Transparência: Selecione o símbolo e
selecione Alfa no menu Estilo, na seção
Efeito de Cor do inspetor de Propriedades.
Defina a configuração de alfa para aumentar
ou diminuir a transparência.
7. Com a camada da interpolação selecionada,
exiba a seção Rotação do inspetor de
Propriedades. Selecione Sentido horário ou
Sentido anti-horário no menu pop-up Direção
(Figura 3).
8. Para Girar, digite o número de vezes que deseja Figura 3 Menu Direção na seção Rotação
que o símbolo gire (Figura 4).
9. Na seção Opções, selecione a opção Sincronizar
Símbolos Gráficos. Isto sincroniza o movimento
ao número de quadros na Linha do Tempo.
10. Salve o filme.
o filme.
de visualização. Figura 4 Parâmetro de rotação
Altere a taxa de quadros

A taxa de quadros do documento determina a velocidade em que o indicador de reprodução se movimenta.
Por padrão, a taxa de quadros está configurada como 12 quadros por segundo (fps), o que normalmente
oferece os melhores resultados para a web. Você pode alterar isso para qualquer número entre 0.01 e 120.
Os filmes QuickTime e AVI geralmente têm uma taxa de quadros de 12 fps, enquanto a taxa de um filme
tradicional é de 24 fps. A qualidade de execução de um filme Flash provavelmente será prejudicada se a
taxa de quadros for de 16 fps ou superior. Nos filmes mais longos, aumentar a taxa de quadros aumenta o
tamanho de seu documento publicado.
Em suma, se você deseja alterar a duração de uma animação, geralmente é melhor mudar o número de
quadros do que mudar a taxa de quadros.
2 Como criar usando a interpolação de movimentos © Adobe Systems Incorporated

Para alterar a taxa de quadros:

1. Selecione Editar > Cancelar Todas as Seleções para certificar-se de que nenhum objeto está selecionado.
O inspetor de Propriedades muda para Documento.
2. Em FPS (na seção Propriedades), digite 15 e pressione Enter (Windows) ou Return (Mac OS).
Nota: Geralmente é preferível manter a taxa de quadros abaixo de 16.
3. Selecione Controlar > Testar Filme para testar o filme.
Observe como a animação é reproduzida mais rápido.
4. Mude o valor FPS para 6 e pressione Enter (Windows) ou Return (Mac OS).
5. Selecione Controlar > Testar Filme para testar o filme.
Observe como a animação é reproduzida muito mais vagarosamente.
6. Selecione Arquivo > Fechar para fechar a janela de visualização.
Transparência
Ao criar uma interpolação de movimento com diversas configurações de alfa, você pode fazer com que
apareçam ou desvaneçam gradativamente.
Aparecimento / Desvanecimento de imagens:
1. Inicie o Flash e abra o documento que deseja
editar.
2. Localize a camada e quadro-chave que contêm
o símbolo que você pretende fazer aparecer ou
desvanecer. Figura 5 Linha do Tempo e Aba Editor de
Este será o quadro inicial da transição. Movimentos
3. Certifique-se de que o símbolo está sozinho em
sua própria camada.
símbolo completar a transição.
Isto lhe dirá onde posicionar o quadro final da
do Tempo. Então, com a camada selecionada,
selecione Inserir > Interpolação de movimento.
por segundo.
6. Selecione o quadro inicial da transição e clique
no símbolo para selecioná-lo.
7. Exiba o Editor de Movimento clicando na aba
Editor de Movimento ao lado da aba Linha do
Tempo (Figura 5). Ou selecione Janela > Editor
de Movimento.

Nota: O Editor de Movimento exibe todas as

propriedades de interpolação e seus quadros-chave
de propriedade. Ele também oferece ferramentas
para proporcionar precisão e detalhe às
interpolações. O Editor de Movimento exibe as
propriedades da interpolação selecionada.
8. No Editor de Movimento, clique no ícone do sinal Figura 6 Controles de Alfa do Editor de Movimento
de adição (+) e selecione Alfa na aba Efeito de
Cor (Figura 6).
9. Ajuste o controle deslizante Alfa para 0%
(Figura 7).
Nota: O objeto vai desaparecer do Palco, mas
um contorno azul fica visível quando o símbolo
for selecionado.
10. Volte à Linha do Tempo e selecione o quadro
final, ajustando o Alfa do símbolo para 100% no
Editor de Movimento.
11. Salve o filme. Figura 7 Controle deslizante de quantidade de Alfa
o filme.
O símbolo aparece gradativamente.
Nota: Para criar um desvanecimento, deixa a
configuração de quantidade de Alfa em 100%
no quadro-chave inicial e altere a configuração
de quantidade de Alfa do quadro final-chave
para 0%.
de visualização.

Transparência de cor
Você pode usar transparências de cor para atrair a atenção do observador para um objeto na tela. Para criar
uma transparência de cor, aplique uma interpolação de movimento entre duas ocorrências do mesmo símbolo
e depois mude a cor das ocorrências nos quadros inicial e final.
Para criar uma transparência de cor:

editar.
2. Localize a camada e quadro-chave que contêm
o símbolo.
Este será o quadro inicial da transição.
3. Certifique-se de que o símbolo está sozinho em
sua própria camada. Figura 8 Ajustar Cor na seção Filtros
símbolo completar a transição.
Isto lhe diz onde posicionar o quadro final da
do Tempo.
Selecione a camada na Linha do Tempo e
escolha Inserir > Interpolação de movimento.
por segundo.
Figura 9 Controle deslizante Matiz
6. Selecione o quadro inicial da transição e
selecione o símbolo.
7. No Editor de Movimento, clique no ícone de sinal
de adição (+) e selecione Ajustar Cor na aba
Filtros (Figura 8).
8. Use o controle deslizante Matiz para selecionar
uma nova cor, alterando o valor. (Figura 9).
Enquanto muda o valor, repare nas mudanças
de cor do símbolo no Palco.
9. Quando tiver selecionado a cor, Salve o filme.
o filme.
de visualização.

Virar imagens
Virar imagens e depois criar uma interpolação de movimento pode criar uma transição eficiente entre
imagens com aproximadamente o mesmo tamanho. Uma dica é virar a primeira imagem mais ou menos até
a metade e depois começar a fazer a parecer a segunda imagem enquanto a primeira imagem ainda está
virando, para fazer uma transição suave.
Para virar uma imagem:

editar.
2. Coloque em camadas diferentes os dois

Figura 10 Dois símbolos de imagem em duas
símbolos de imagem entre os quais pretende camadas
fazer uma transição: o objeto de entrada e o
objeto de saída (Figura 10). Posicione os
símbolos aproximadamente na mesma posição
no Palco.

símbolo entrar ou sair do Palco.
Isto lhe dirá onde colocar o quadro final da


do Tempo. Para cada imagem, selecione uma
camada na Linha do tempo e selecione Inserir Figura 11 Definição dos ajustes de Alfa da imagem
> Interpolação de movimento.
5. Selecione a primeira interpolação de movimento

na primeira camada. No Editor de Movimento,
seleciona o efeito de cor Alfa e configure a
imagem para 0% (Figura 11).
6. Selecione a segunda interpolação de movimento

na segunda camada e altere o efeito de cor Alfa Figura 12 Inserção da transição de virada no meio
desta imagem para 100%. da Linha do Tempo
7. Clique no último quadro da primeira imagem na

Linha do Tempo e ajuste a cor Alfa para 100%.
8. Clique no último quadro da segunda imagem na

Linha do Tempo e ajuste a cor Alfa para 0%.
9. No meio da Linha do Tempo, selecione objeto

de saída no Palco e selecione Modificar >
Transformar > Virar Horizontal (Figura 12).

Nota: Ao invés de Virar Horizontal, você pode

selecionar Virar Vertical. Contanto que tanto as
imagens de saída e de entrada virem no mesmo
sentido, a transição vai funcionar. Selecione o
mesmo tipo de virada para o objeto de entrada
quanto para o objeto de saída.
10. Clique no primeiro quadro da interpolação de

movimento do primeiro objeto. Exiba a seção
Atenuação no Editor de Movimento e altere a
atenuação Simples (Lento) para –100%
(Figura 13).
Figura 13 Seção Atenuação do Editor de
Alterar os valores de atenuação adapta a taxa Movimento
de mudança entre os quadros interpolados.
Valores negativos de atenuação fazem com que
a interpolação de movimento comece
lentamente e se acelere ao fim da interpolação.
Um valor positivo faz com que a interpolação
comece rapidamente e desacelere no fim. A
animação ainda toma o mesmo tempo,
independentemente do valor de atenuação.

o filme.

de visualização.

Predefinições de movimento
Você também pode usar predefinições de movimento em seu símbolo interpolado. Predefinições de movimento
tratam-se de interpolações de movimento pré-configuradas que você pode aplicar a um objeto no Palco. Você
pode simplesmente selecionar o símbolo e clicar no botão Aplicar no Painel de predefinições de movimento.
Para usar uma predefinição de movimento em seu símbolo:
1. Abra um documento Flash preexistente ou crie 8. Salve o filme.

2. Crie uma forma e a converta em símbolo. o filme.
3. Exiba o Painel de predefinições de movimento 10. Selecione Arquivo > Fechar para fechar a janela
selecionando Janela > Predefinições de de visualização.
movimento.
Você pode visualizar as Predefinições de
movimento clicando em uma predefinição na lista
de Predefinições Padrão (Figura 15)
4. Para aplicar uma predefinição de movimento ao
símbolo no Palco, clique no botão Aplicar.
5. Clique na aba Editor de Movimento para
encontrar as propriedades para a predefinição
que você acabou de aplicar. Faça quaisquer
mudanças que deseje no Editor de Movimento.
6. Depois de fazer as alterações a qualquer
definição de movimento no Editor de
Movimento, salve sua predefinição de
movimento personalizada, clicando no ícone
Salvar Seleção como Predefinição no canto
esquerdo inferior do Painel de predefinições de
movimento (Figura 16).
7. Digite um nome para a predefinição
personalizada e clique em OK.
Figura 15 Painel de predefinições de movimento
Você agora vai ver sua predefinição de
movimento na pasta de Predefinições
Personalizadas do Painel de predefinições de
movimento. Você pode aplicar suas
predefinições de movimento personalizadas a
outras interpolações neste arquivo ou novos
arquivos. O uso de predefinições pode poupar
significativamente tempo de produção durante
a criação e desenvolvimento de seus projetos,
especialmente se você usar tipos semelhantes
de interpolação com frequência. Figura 16 Ícone Salvar Seleção como Predefinição

Como criar efeitos visuais

Com os filtros do Adobe Flash CS4 Professional (efeitos gráficos), você pode acrescentar efeitos visuais a
textos, botões e clipes de filme. Você pode alterar textos, formas e símbolos de muitas maneiras ao usar
filtros. Esta apostila ilustra como aplicar efeitos específicos a formas, como editar efeitos e como remover
efeitos. Você pode aplicar um quantos efeitos desejar com esta técnica.
Para criar um efeito visual:
1. Abra um Documento preexistente Flash ou crie

e salve um novo Documento Flash.
2. No Painel de ferramentas, selecione a

Ferramenta Retângulo (Figura 1).
3. Na ferramenta Retângulo, especifique cantos

arredondados clicando no modificador de
retângulo arredondado no inspetor de
Propriedades e digitando um valor de raio de
canto, tal como 25 (Figura 2).
Um valor zero (0) cria cantos quadrados.
4. Para criar uma forma retangular, arraste a Figura 1 Opções de ferramentas de forma
ferramenta Retângulo no Palco.
Com a ferramenta Retângulo, arraste

pressionando a tecla Shift para manter a forma
quadrada. (Da mesma maneira, você pode
desenhar círculos perfeitos arrastando a
ferramenta oval e pressionando a tecla Shift.
5. Você vai precisar converter a forma em símbolo.

Selecione o retângulo ou vários elementos no
Palco. Execute uma das seguintes opções: Modificador de
Retângulo
• Selecione Modificar > Converter em Arredondado
Símbolo.
• Arraste a seleção para o painel Biblioteca.

clique pressionando a tecla Control
(Mac OS) e selecione Converter em Símbolo
no menu de contexto. Figura 2 Defina as opções de retângulo
© Adobe Systems Incorporated Como criar efeitos visuais 1


digite o nome do símbolo e selecione o tipo Clipe
de filme (Figura 3).
Note: Tipos de símbolo incluem Clipe de filme,
Botão e Gráfico, e oferecem opções diferentes
de filtro.
• Use símbolos gráficos para imagens Figura 3 Caixa de diálogo Converter em Símbolo
estáticas e para criar animações reutilizáveis
que estejam vinculadas à Linha do Tempo
principal.
• Use símbolos de botão para criar botões
interativos que reajam a cliques de mouse,
menus de sobreposição ou outras ações.
• Use símbolos de clipes de filme para criar
animações reutilizáveis.
7. Clique em OK.
O Flash adiciona o símbolo à biblioteca e alterna
para o modo de edição do símbolo. No modo de
edição de símbolo, o nome do símbolo aparece
acima do canto superior esquerdo do Palco e
uma cruz indica o ponto de registro do símbolo.
8. Selecione o objeto retangular ao qual aplicar o
filtro.
9. Na seção Filtros do inspetor de Propriedades, Figura 4 Menu Adicionar Filtro no inspetor de
clique no botão Adicionar Filtro (+) e selecione Propriedades
um filtro, tal como o filtro Bisel (Figura 4).
O filtro é aplicado ao objeto (Figura 5).
Figura 5 filtro Bisel aplicado a retângulo
2 Como criar efeitos visuais © Adobe Systems Incorporated

10. Experimente configurações diferentes de filtro (Figura 6) até acertar a aparência que desejar
(Figura 7).
Figura 6 Configurações de filtro Bisel Figura 7 Filtro Bisel modificado aplicado a retângulo
Remoção ou desativação de efeitos visuais

Você pode remover ou desativar um efeito após sua aplicação.
Para remover ou desabilitar um efeito:
1. Selecione o objeto do qual deseja remover o filtro.

2. Clique no ícone excluir na seção inferior do
inspetor de Propriedades de Filtro (Figura 8).
O efeito é removido.
Você pode também ativar ou desativar um filtro
aplicado a um objeto clicando no ícone Ativar
ou Desativar Filtro.
Ativar ou Excluir
Desativar Filtro
Figura 8 Ative/Desative ou exclua um filtro

Como usar técnicas cinematográficas

Os web designers têm toda uma história de cinematografia à qual recorrer e onde se inspirar na hora de criar
sites da web e filmes digitais. Com o Adobe Flash CS4, você pode simular técnicas tradicionais do cinema.
Quando você criar filmes Flash, pense em maneiras criativas de incorporar estes efeitos e procure
oportunidades de criar novos efeitos que possam, por sua vez, inspirar a cinematografia tradicional.
Você pode criar as seguintes técnicas populares do cinema com o Flash:
• Efeitos de panorâmica, tilt e zoom: Movimentar a câmera horizontalmente através da cena é conhecido
como uma panorâmica (ou pan). Mover a câmera para cima ou para baixo em uma cena é conhecido
como tilt. Mover a câmera para longe ou para perto do sujeito de uma cena é conhecido como zoom.
• Ângulos de câmera: usar a regra dos terços e ajustar o ângulo de visão para ajudar a enfatizar um certo
aspecto de seu sujeito.
• Cross fades: Uma imagem parece se apagar enquanto outra se materializa, um efeito de transição de
uma imagem se transformando em outra.
• Efeito Bounce: Um objeto em movimento quica antes de parar. Esta técnica chama a atenção e pode
concentrar os observadores em uma região da tela. Este efeito às vezes é combinado com um efeito
súbito de som, como um “boing” ou o som de pneus cantando.
Crie um efeito de pan, tilt ou zoom usando interpolações clássicas

Para definir a cena em um filme, a câmera se movimenta por uma longa cena e então se aproxima de um
ponto específico. Uma pan (ou tilt) seguido de um zoom é uma boa técnica para apresentar uma narrativa
digital. O Zoom - in concentra a atenção do observador em uma parte particular da imagem.
Para criar um efeito pan e zoom:

2. Para importar uma imagem diretamente para o
documento Flash atual, selecione Arquivo >
Importar > Importar para o Palco.
3. Se sua imagem já não for um símbolo, converta-
a em símbolo de clipe de filme (Figura 1).
Coloque o símbolo na parte direita da área de
trabalho, cobrindo o Palco. Figura 1 Imagem convertida em símbolo
Assegure-se de que o Palco é menor do que a
imagem.
© Adobe Systems Incorporated Como usar técnicas cinematográficas 1

4. Na Linha do Tempo, selecione o quadro-chave

onde deseja que a pan termine e selecione Inserir
> Linha do Tempo > Quadro-Chave (Figura 2).
5. Selecione o quadro-chave final. Arraste a

ocorrência do símbolo de filme para o lado
oposto da área de trabalho.
6. Clique na coluna Contorno à direita do nome da

camada que contém o símbolo de filme
(Figura 3).
Nota: você pode visualizar a borda de uma
imagem mais facilmente se você definir o modo
da camada que contém a imagem como
Contorno (especialmente se a imagem contiver Figura 2 Insira um quadro-chave
muitos cinzas que podem se misturar com a área
fora do Palco). Assegure-se de que a imagem
não extrapola o Palco durante uma panorâmica.
Coluna
7. Selecione o quadro inicial e selecione Inserir > Contorno
Interpolação Clássica.
Esta interpolação clássica move o símbolo de
Figura 3 Contorno de Imagem
filme horizontalmente através o Palco (uma
pan). O segundo quadro-chave que termina a
interpolação clássica também vai servir como o
ponto de partida da próxima interpolação.
8. Adicione um terceiro quadro-chave mais adiante

na Linha do Tempo para servir como ponto final
da segunda interpolação clássica (um zoom) Figura 4 Quadro-chave para zoom
(Figura 4).
9. Selecione o terceiro quadro-chave e selecione

Modificar > Transformar > Dimensionar para
exibir o painel Transformação.
Alças de transformação aparecem na imagem
(Figura 5).
10. Pressionando a tecla Shift, arraste uma das

quinas das alças de transformação para
redimensionar a imagem aproximadamente três
vezes o tamanho original.
A imagem se expande.
11. Selecione o segundo quadro-chave e selecione

Inserir > Interpolação clássica, criando uma Alça de transformação
interpolação clássica entre o segundo e terceiro
Figura 5 Contorno de imagem com alças de
quadros-chave.
transformação
2 Como usar técnicas cinematográficas © Adobe Systems Incorporated

12. No inspetor de Propriedades, aumente a

atenuação para um valor entre 60 e 100 para a
interpolação clássica (Figura 6).
O zoom irá começar rapidamente e perder
velocidade à medida que chegar no ponto final.
13. No painel Linha do Tempo, clique no botão Nova

Camada.
14. Dê à nova camada o nome ações (Figura 7).
15. Selecione o último quadro da camada ações e

insira um novo quadro-chave.

Ações.
O painel Ações se abre (Figura 7).
Nota: Se a Caixa de ferramentas Ações estiver
oculta, clique no triângulo ou arraste a barra
vertical para abri-la. Se você não vir a área de
parâmetros no painel Ações, clique no botão
Nova Camada
Assistência de Script.
Figura 6 Botão Nova Camada na Linha do Tempo
17. Você precisa colocar um comando Stop no final
da Linha do Tempo para terminar o clipe de
filme. Na Caixa de ferramentas Ações do lado Botão Inserir Caminho
de Destino
esquerdo do painel, escolha flash.display >
MovieClip > Métodos. Botão Assistência de
Script
Método Stop
18. Clique duas vezes ou arraste o item Stop à janela
de script.
O código para o método stop aparece na janela
de script.
Nota: Você também pode posicionar o stop e
outros métodos usando o Índice localizado na
parte inferior da Caixa de ferramentas Ações. Método Stop adicionado
19. No painel Script, selecione o método stop.

Depois clique na caixa de texto Objeto,na área
de parâmetros do painel Ações.
O botão Inserir Caminho de Destino agora Mostrar / Ocultar ações
estará ativo. Figura 7 Método Stop no painel Ações


se abre (Figura 8).
21. Selecione a opção Relativo e selecione o clipe

de filme que você deseja que seja reproduzido
quando o observador clicar no botão. Se você
desejar que o filme na principal Linha do Tempo
seja reproduzido, selecione raiz para definir o
caminho de destino.
Figura 8 Caixa de diálogo Inserir Caminho de
Destino
O painel Script exibe o código correto para parar
o filme (Figura 9).
21. Para testar como o arquivo SWF funciona antes

de publicar seu arquivo SWF, use Testar Filme
(Controlar > Testar Filme) e Testar Cena
(Controlar > Testar Cena).

de visualização. Figura 9 Método Stop no painel Script

Acrescentar rótulos de quadro

Você pode desejar acrescentar rótulos de quadro aos quadros-chave. Rótulos de quadro ajudam você e
outros designers a lembrar o que está acontecendo em um quadro específico.
Para acrescentar um rótulo de quadro:

1. Adicione uma nova camada chamada rótulos
como a camada superior da Linha do Tempo.
Inserir > Linha do Tempo > Quadro-Chave em
branco nesta camada para corresponder com
cada quadros-chave de movimento que orientam
a animação. Um quadro-chave em branco
funciona como alocador de espaço para
símbolos que você pretende adicionar
posteriormente ou pretende deixar em branco.
2. Selecione a quadro-chave em branco na camada
rótulos. Depois, no inspetor de Propriedades, Figura 10 Caixa de texto Nome do Quadro no
digite o nome do rótulo na caixa de texto Nome inspetor de Propriedades
(Figura 10).
O rótulo aparece ao longo da Linha do Tempo
no quadros após o quadro-chave em branco
(Figura 11).
3. Desative Mostrar as Camadas como Contorno, Figura 11 Rótulos de quadro na Linha do Tempo
salve o arquivo e selecione Controlar > Testar
Filme.
Outras idéias
• Para um documentário: Freie o processo para refletir o passo da narrativa. Por exemplo, uma
panorâmica e zoom lentos vão bem com o estilo de narrativa de um documentário.
• Humor ou ação: Faça a parte da panorâmica em que ocorrer o zoom-in rápida e um pouco instável,
como se você estivesse buscando o sujeito da cena. Você pode fazer zoom in e zoom out várias vezes
durante a panorâmica para mostrar que está procurando alguma coisa.
• Drama: Use pan ou tilt na cena sem o zoom. Este método apresenta uma larga paisagem, tal como uma
cordilheira levando até o oceano. Como ele exibe a maior parte da paisagem, o efeito dá profundidade e
seriedade ao tom da narrativa.

Ângulos de câmera
Quando você tem várias imagens na tela em uma
narrativa digital, você pode usar alguns truques em
nome da ênfase. use a regra dos terços e ajeite o
ângulo de visão para enfatizar um determinado
aspecto do sujeito.
• A regra dos terços dita que se você dividir a
tela em uma grade de 3-por-3, as interseções
das linhas são áreas onde o olho tende a pousar. Figura 12 Regra dos terços
Alinhe os itens a serem enfocados ao longo
destas interseções da tela.
• Você pode aumentar a importância de um sujeito
apresentando-o de um ponto de vista abaixo
dele. Da mesma forma, você pode diminuir a
importância do sujeito visto de cima.
Embora a menina não esteja no centro da
Figura 12, ela chama a tenção pois está perto da
interseção das linhas da regra dos terços.
Olhar para cima para ver o homem na Figura 13
dá a ele uma aparência de poder. O ângulo da
câmera apontado para baixo faria com que ele Figura 13 Ângulo da câmera
parecesse menor e menos poderoso.

Crie cross-fades usando interpolações clássicas

Um efeito de transição para passar de uma imagem para outra é apagar uma imagem à medida em que
materializa a outra.
Para criar um cross fade:
2. Importe duas imagens para o documento Flash
atual, selecione Arquivo > Importar > Importar
para o Palco.
3. Converta em símbolos as duas imagens às quais
aplicar o cross-fade, e coloque-as em camadas
separadas. Figura 14 Aplicação de um nível de Alfa no menu
Efeito de Cor
4. Insira quadros-chave em ambas as camadas no
mesmo ponto da Linha do Tempo para marcar
o começo do fade-out (desvanecimento gradual)
da primeira imagem e do fade-in (aparecimento
gradual) da segunda imagem.
5. Decida quanto tempo você deseja que a
transição dure. Insira quadros-chave em ambas
as camadas na mesma altura da Linha do Tempo
para marcar o final do fade-out da primeira
imagem e o fade-in da segunda imagem.
6. Selecione o primeiro quadro-chave para a
imagem que vai se apagar, selecione a imagem,
e use o inspetor de Propriedades para definir
seu nível de alfa como 100% (Figura 14).
Nota: Se suas imagens estiverem na mesma
posição no Palco, você precisará ocultar a
camada de cima antes de poder selecionar o
símbolo na camada de baixo. É mais fácil
selecionar suas imagens se elas estiverem
distanciadas no Palco.
7. Selecione o primeiro quadro-chave de cada
imagem e insira uma interpolação clássica.
8. Selecione o primeiro quadro-chave da imagem
que vai se materializar (fade-in) e defina seu
nível defina seu nível de alfa para 0%.
9. Selecione o último quadro da imagem que vai
se materializar (fade-in) e defina seu nível de
alfa para 100%.

10. Selecione o último quadro da imagem que vai

se apagar (fade-out) e defina seu nível de alfa
para 0%.
11. Acrescente rótulos de quadro para os primeiros
quadros-chave de cada interpolação clássica
Figura 15 Caixa de texto Rótulo de quadro
(Figura 15).
Os rótulos aparecem na Linha do Tempo
(Figura 16).
Nota: Você pode fazer o fade-out começar
depois do fade-in ou vice versa. Você também
pode extender o fade-out para terminar no
mesmo quadro que o final do fade-in. Figura 16 Rótulos de quadro no inspetor de
Se as imagens se aproximam (zoom in) ou se Propriedades
distanciam (zoom out) antes do fade-out, é
recomendável continuar o zoom durante o fade.
12. Salve o filme.
o filme.
de visualização.
Crie um efeito de salto usando interpolações clássicas

Some animated text and imagens that move onto o Palco will seem more lifelike if you add a little bounce to
them when they reach their stopping point. This is an old animation técnica acknowledging that any moving
objeto carries momentum and thus rebounds a bit before it comes to a stop. This técnica also grabs attention
and can focus viewers on an area of the screen.
To create a bounce efeito:
2. Begin by adding a symbol to o Palco. By default
the symbol is placed in o primeiro quadro-chave
of the Linha do Tempo.
3. Selecione a second quadro along the Linha do
Tempo.
Chave.
5. Certifique-se de que o novo quadro ainda está
selecionado e mova o símbolo para uma nova
posição no Palco.
6. Clique no intervalo de interpolação na Linha do
Tempo e selecione Inserir > Interpolação
clássica.

A interpolação clássica aparece como azul clara

com uma seta.
7. Rotule o quadro-chave incial da interpolação
clássica move para a direita ou move para a
esquerda (Figura 17) e rotule o segundo quadro-
chave como salto.
8. Insira um quadro-chave de 3 a 5 quadros depois
do final da interpolação clássica. Rotule este
quadro como volta.
9. Insira outro quadro-chave de 8ª 10 quadros Figura 17 Rótulo de quadro
depois do final da interpolação clássica original.
Este será o ponto de pouso final da imagem.
Rotule este quadro Fim.
Nota: Se você desejar que o último salto de
volta para a posição leve mais tempo (mais
quadros) de forma que o objeto aparente estar
perdendo velocidade, insira o quadro-chave
desta estapa mais adiante na Linha do Tempo.
10. Selecione o quadro-chave rotulado volta.
11. Neste quadro-chave, selecione a ocorrência do
símbolo no Palco e use as teclas de seta para
mover a ocorrência 5 – 10 de volta à direção de
onde veio. Figura 18 Painel Ações
12. Crie interpolações clássicas entre todos os

quadros-chave clicando em cada intervalo de
interpolação e selecionando Inserir >
Interpolação clássica.
13. Adicione uma camada ação no topo da Linha
do Tempo.
14. Nesta camda, insira um quadro-chave depois Figura 19 Linha do Tempo final
do último quadro e acrescente uma ação stop.
na caixa de ferramentas Ações, no lado esquerdo
do painel, marque flash.display > MovieClip >
Métodos.
15. Clique duas vezes ou arraste o item stop até a
janela de script. O código para o método stop
aparece na janela de script.
16. No painel Script, selecione o método stop.
Depois clique na caixa de texto Objeto na área
de parâmetros do painel Ações.


estará ativo.
se abre.
18. Selecione a opção Relative e selecione o clipe
de filme que deseja que seja executado quando
o observador clicar no botão. Se você desejar
que o filme na Linha do Tempo principal seja
executado, selecione raiz para definir o caminho
de destino. Figura 18 Painel Ações

O painel Script exibe o código correto para parar
o filme (Figura 18).
A Linha do Tempo deveria ficar com a aparência
descrita na Figura 19.
Figura 19 Linha do Tempo final
21. Para testar como o arquivo SWF funciona antes
de publicar seu arquivo SWF, use Testar Filme
(Controlar > Testar Filme) e Testar Cena
(Controlar > Testar Cena).
de visualização.

Exemplos de Efeitos
Efeito Como é usado? (Descreva seu uso Por que é usado? (Explique como
no site). adiciona valor ao público ou
mensagem do site).
Pan: Move a câmera
horizontalmente
através de uma cena.
Tilt: Move a câmera

verticalmente através
de uma cena.
Zoom: Move a
câmera para mais
perto ou mais longe.
Ângulo de câmera:
Aplica a regra dos
terços ou define o
ângulo de visualização.
Salto: Faz um objeto

em movmento quicar
antes de parar.
© Adobe Systems Incorporated Exemplos de Efeitos 1

Efeito Como é usado? (Descreva seu uso Por que é usado? (Explique como
no site). adiciona valor ao público ou
mensagem do site).
Transição Cross-
fade: Uma imagem
aparece gradati-
vamente enquanto
outra se apaga.
Transição Virada:
Faça com que um
objeto pareça se
transformar em outro
quando for virado.
Trandição Fade
simples: Faça um
objeto aparecer ou se
apagar
gradativamente.
Transição Fade de
cor: Altere
gradualmente a cor de
um objeto
Transição de
Rotação: Faça com
que um objeto apareça
ou desapareça ao
rodar
2 Exemplos de Efeitos © Adobe Systems Incorporated

Análise e roteirização de uma narrativa digital

Nome do aluno: ______________________________________________ Data: _________________
Descrição da narrativa
Responda as seguintes questões para auxiliá-lo a construir sua narrativa.
Que tipo de narrativa é? ______________________________________________________________
____________________________________________________________________________________________
Quem é o público principal? ___________________________________________________________
____________________________________________________________________________________________
Qual é a mensagem da narrativa? (Resuma em uma sentença.) _________________________________
____________________________________________________________________________________________
Como a narrativa valoriza as metas gerais do site? ___________________________________________
____________________________________________________________________________________________
Escreva uma narrativa que se situe dentro dos seguintes critérios:
• O arquivo de áudio não excede 45 segundos.
• A duração do filme não excede um minuto.
• O número de palavras escritas e faladas é menor do que 50.
• A narrativa contém pelo menos um efeito de transição.
• A narrativa contém pelo menos uma técnica de cinematográfica.
• A narrativa não contém mais de cinco diferentes técnicas cinematográficas ou de transição.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Análise e roteirização de uma narrativa digital 1

____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Análise e roteirização de uma narrativa digital © Adobe Systems Incorporated

____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Análise e roteirização de uma narrativa digital 3

____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
4 Análise e roteirização de uma narrativa digital © Adobe Systems Incorporated

Exemplo de resumo de narrativa e storyboard
© Adobe Systems Incorporated Exemplo de resumo de narrativa e storyboard 1

2 Exemplo de resumo de narrativa e storyboard © Adobe Systems Incorporated

Resumo de narrativa e storyboard

Nome do aluno: ____________________________________________________________________ Data: _________________________
Para ajudar seu produtor a criar sua narrativa, forneça as seguintes informações:
• Descrição geral do filme na forma de uma organograma básico
• Lista de todos os nomes de arquivo e configurações gerais do filme
• Storyboard detalhadamente desenhados e descrições de cada seção do filme
Organograma da narrativa
Configurações gerais do filme

Nome do arquivo: ________________________________________ Pasta de origem dos áudios: ________________________________
Pasta principal (contém todos os arquivos do filme): ________________ Tamanho do documento: __________________________________
Pasta de origem das imagens: ________________________________ Cor do fundo: ___________________________________________
Pasta de origem dos vídeos: _________________________________
Exemplo de resumo de narrativa e storyboard © Adobe Systems Incorporated 1

Taxa de quadros: ___________________________________________________

Storyboard # _______________ Nome do aluno: ____________________________ Título do filme: __________________________________
Para completar o storyboard, desenhe e descreva o estado inicial e final de cada seção. Depois descreva a transição do estado inicial para o final.
Descrição do estado inicial Descrição da transição Descrição do estado final

Descreva os objetos que se alteram e
Imagens desenhadas: como se alteram. Imagens desenhadas:
Faça uma estimativa do tempo de

cada alteração em segundos.
Imagens importadas: Imagens importadas:
Áudio (loop de música ou de efeito sonoro): Áudio (loop de música ou de efeito sonoro):
Áudio (texto falado): Áudio (texto falado):
Texto exibido: Texto exibido:
Outro: Outro:
2 © Adobe Systems Incorporated Exemplo de resumo de narrativa e storyboard

Como manter a coerência

A coerência é um elemento importante para a usabilidade – a medida da facilidade com que os visitantes
podem executar tarefas ao utilizar o seu site. A Coerência é especialmente importante para sites maiores
que contém múltiplas páginas e conteúdo criado com o Adobe Flash CS4. Quanto mais você fizer as páginas
terem o mesmo aspecto e textura, mais confortáveis os visitantes se sentirão ao utilizá-la.
Você deve manter a coerência dos elementos em seu site, mas também, sempre que possível, seguir as
convenções dos outros sites. Por exemplo, muitos sites localizam a principal barra de navegação no topo de
cada página. A não ser que você tenha uma razão muito boa para colocar a principal barra de navegação em
outro lugar, você deve também localizá-la no topo da página. (Apesar de inovações de design serem bem
vindas, ter a certeza de que tantos visitantes quanto o possível podem usar o seu site é mais importante.)
Coerência é especialmente importantes nas seguintes áreas:
Navegação: Não apenas os controles de navegação devem estar disponíveis em todas as páginas, mas eles
devem também ser semelhantes em cada página. A navegação deve informar aos visitantes onde eles se
encontram na organização do site, usando um botão realçado, por exemplo. Ela deve também permitir que
o visitante se mova para outras áreas do site com facilidade.
Cores: Objetos de imagem similares devem ter as mesmas cores ou similares, e diferentes objetos de
imagem devem ter cores diferentes. Use uma paleta de cor limitada em seu site. Você pode fazê-lo facilmente
localizando as cores no painel Amostras.
Botões: Em geral, todos os botões devem se parecer ou manter alguma similaridade – Com a mesma fonte,
sombra projetada e bisel, por exemplo. Às vezes os visitantes têm dificuldades em saber no que clicar, e
manter a similaridade entre os botões os ajuda a usar o que aprenderam em uma página anterior. Você pode
utilizar a biblioteca para reutilizar botões em outras páginas (isto traz a vantagem adicional de reduzir o
tamanho do arquivo do seu site.)
Fontes: Use um grupo limitado de fontes. Normalmente você não precisará de mais de dois ou três tipos de
fontes, mesmo para um site grande.
Elementos gráficos: Mantenha elementos gráficos similares em cada página. Você pode usar a biblioteca
para reutilizar elementos gráficos em diferentes páginas.
Transições: Use transições semelhantes entre páginas. Por exemplo, se uma página se desvanece na
próxima página, utilize este efeito em todas as transições de página. As transições também devem ter
tempos de decorrência similares; se uma dura três segundos, todas deve durar três segundos também.
Barras de rolamento: Muitos especialistas em usabilidade recomendam o uso de barras de rolamento que
sejam tão similares o quanto possível às utilizadas em software de uso comum. Faça-as se parecerem em
todas as páginas.
Som: Use som com coerência nas páginas do seu site. Por exemplo, se um botão em uma página faz um
som quando o visitante passa o cursor nele, todos os botões similares em todas as páginas devem fazer o
mesmo som.
© Adobe Systems Incorporated Como manter a coerência 1

Layout: Todas as páginas em seu site devem ter um layout semelhante: A navegação deve estar no mesmo
local em todas as páginas, por exemplo. Áreas interativas devem estar também no mesmo local. Se uma
página tem um jogo simples, por exemplo, e outra página tem um gráfico interativo, posicione-os na mesma
área. Você pode usar modelos de Flash para manter layouts coerentes em diferentes páginas.
Criação de modelos.
Modelos são um bom modo de manter as páginas do seu site coerentes. Você pode incluir navegação,
fontes, imagens e layout em um modelo de forma que esses elementos tenham coerência em todo
o seu site.
1. Inicie o Flash.
2. Acrescente conteúdo a um documento para
servir de modelo, como navegação, imagens,
botões e plano de fundo.
3. Selecione Arquivo > Salvar Como Modelo.
A caixa de diálogo Salvar Como Modelo se abre.
(Figura 1).
4. Digite um nome para o modelo.
Figura 1 Caixa de diálogo Salvar Como Modelo
5. Selecione uma categoria no menu pop-up
Categoria ou digite um novo nome de categoria.
6. Digite uma descrição do modelo.
Esta descrição aparece na caixa de diálogo
Novo a Partir de Modelo.
7. Clique em OK.
O modelo agora está disponível como opção da
caixa de diálogo Novo a Partir de Modelo.
2 Como manter a coerência © Adobe Systems Incorporated

Como otimizar conteúdo do Flash

Como em todo conteúdo da web, é importante manter o tamanho dos arquivos Adobe Flash CS4 o menor
possível. Mesmo com a velocidade de conexão aumentando nos últimos anos, manter o tamanho dos arquivos
reduzidos continua a ser importante, porque o tamanho dos documentos pode também afetar a performance
do conteúdo. Este processo é conhecido com otimização de conteúdo do Flash.
Os seguintes princípios gerais podem ajudá-lo a otimizar o conteúdo do Flash:
• Utilize símbolos, animados ou não, para cada elemento que apareça mais de uma vez.
• Ao criar sequências de animação, utilize animações interpoladas sempre que possível. Estas animações
usam menos espaço de arquivo do que uma série de quadros-chave.
• Para sequências de animação, utilize clipes de filme ao invés de símbolos gráficos.
• Limite a área de mudança em cada quadro-chave; faça a ação acontecer na pequena área mais
pequena que for possível.
• Evite animar elementos bitmap; use imagens bitmap como fundo ou elementos estáticos.
Otimização de imagens
As imagens representam uma das melhores oportunidades para otimizar o tamanho do arquivo no Flash.
Alguns preenchimentos e efeitos podem aumentar o tamanho de seu filme Flash. Use as seguintes dicas
para otimizar as características desses filme:
• Utilize o menu Cores no inspetor de Propriedades Símbolo para criar diversas cores para as
ocorrências de um único símbolo ao invés de criar múltiplos símbolos.
• Use gradientes de forma parcimoniosa. Minimize o número de gradientes simultâneos em um
determinado quadro. Preencher uma área com gradientes de cor usa 50 bytes a mais do que com
uma cor sólida. Gradientes são mais complexos para um processador de computador lidar do que
uma cor sólida.
• Use transparência alfa parcimoniosamente. Ela pode tornar mais vagarosa a reprodução.
Otimização de bitmaps
Imagens Bitmap tomam mais espaço do que imagens vetoriais (O formato vetorial é o normal do Flash).
Imagens Bitmap são importadas para o Flash. JPEGs, GIFs e BMPs são todas Bitmap. O melhor formato
bitmap para importar para o Flash é o PNG, que é o formato padrão do Adobe Fireworks. Todas as fotos –
que normalmente são no formato JPEG – são bitmaps. Quando você cria uma animação com imagens
bitmap, o Flash tem que armazenar uma imagem bitmap para cada quadro da animação. Além disso, imagens
bitmap, ao contrário de imagens vetoriais, não redimensionam ou giram bem na tela. As imagens bitmap têm
que ser renderizadas cada vez que mudam de posição na tela. Isso frequentemente implica em mudanças
em grandes do filme e torna o reprodução vagarosa pois estas áreas estão sendo constantemente
redesenhadas.
Se você achar que seu filme Flash precisa incluir bitmaps, utilize as seguintes dicas para otimizar seu filme:
• Utilize imagens bitmap parcimoniosamente.
• Evite animar imagens bitmap.
• Converta a imagem bitmap em um símbolo se ela aparecer em mais de um quadro-chave.
© Adobe Systems Incorporated Como otimizar conteúdo do Flash 1

Utilização do comando Traçar Bitmap

O comando Traçar Bitmap (Modificar > Bitmap > Traçar Bitmap) permita a você converter um bitmap em
uma imagem vetorial. Isto funciona melhor com imagens simples compostas majoritariamente de grandes
blocos de cores. Se o bitmap contém formas complexas e muitas cores, a imagem vetorial convertida pode
ter um tamanho de arquivo maior do que o bitmap original. Tente configurações variadas na caixa de diálogo
Traçar Bitmap para achar um equilíbrio entre o tamanho do arquivo e a qualidade da imagem.
Opções de compactação
Compactação ajuda a reduzir o espaço total do arquivo ocupado pelas imagens bitmaps. A compactação
JPEG é o padrão de compactação para todas as imagens bitmaps publicadas do Flash. Na caixa de diálogo
Configurações de Publicação, você pode ajustar o valor no campo Qualidade JPEG de 1 (maior compactação,
menor qualidade) até 100 (menor compactação, maior qualidade). Como a compactação JPEG pode resultar
na perda de dados de imagem, teste imagens com diferentes valores de qualidade de JPEG para alcançar o
melhor equilíbrio entre compactação e qualidade de imagem para o seu filme em particular.
Otimização de som
Som é outro fator que pode aumentar o tamanho do arquivo do Flash. Existem várias maneiras de utilizar o
som com eficiência em um filme mantendo o tamanho do arquivo baixo.
• Utilize compactação MP3, o menor formato de som, sempre que possível.
• Mantenha os sons curtos.
• Use a menor profundidade de bits e taxa de amostragem aceitável para obter o menor tamanho de
arquivo de dados. Tente achar uma média satisfatória entre a qualidade e o tamanho do arquivo de
dados.
• Crie loops de sons curtos para criar música de fundo.
• A criação de loops de pequenos eventos sonoros pode obter uma reprodução de áudio mais longa
pois uma pequena quantidade de dados sonoros é baixada uma vez e utilizada repetidamente.
• Não configure a repetição de sons de fluxo.
• Utilize a opção sincronizar Evento para executar todos os dados de som de uma vez, conforme o
necessário para a reprodução. Use a sincronização de fluxo para executar os dados de som ao longo
da série de quadros especificados. Experimente ambas as técnicas. Então preste atenção no relatório
de tamanho de arquivo para evitar o acúmulo de dados próximo aos quadros-chave e use técnicas de
pré-carregamento para reduzir a quantidade de dados necessária por quadro ou por segundo. Você
pode gerar um relatório de tamanho para um filme Flash na aba Flash da caixa de diálogo
Configurações de Publicação (Arquivo > Configurações de Publicação).
Para mais informações sobre as melhores práticas no Flash, consulte a seção “Melhores Práticas” em Uso
do Flash (Ajuda > Ajuda do Flash).
2 Como otimizar conteúdo do Flash © Adobe Systems Incorporated

Como organizar conteúdo
Organize a biblioteca
Você pode criar pastas para organizar seus arquivos na biblioteca de um documento Adobe Flash CS3.
1. Abra um documento no Flash.

2. Selecione Windows > Biblioteca para abrir a
biblioteca.
3. Para criar a pasta na biblioteca, escolha Nova
Pasta na menu do painel biblioteca ou clique no
botão Nova Pasta (Figura 1).
A nova pasta é adicionada à biblioteca.
Pastas são representadas por ícones de pastas
de arquivo.
4. Nomeie a pasta e arraste arquivos para dentro
da pasta.
Você pode até armazenar pastas dentro de
outras pastas.
5. Clique duas vezes no ícone da pasta para
visualizar ou ocultar o seu conteúdo.
Botão Nova pasta
Figura 1 Biblioteca organizada com pastas
© Adobe Systems Incorporated Como organizar conteúdo 1

Organize camadas
Organize suas camadas usando nomes de camada descritivos, colocando as camadas em ordem lógica, e
criando pastas (Figura 2). Use camadas separadas para arquivos de som, ActionScript, rótulos de quadro e
comentários de quadro. Isto ajuda você a encontrar e editar estes itens rapidamente.
1. Para alterar o nome de uma camada, clique duas
vezes no nome e digite o novo nome.
2. Você pode alterar a ordem das camadas
arrastando uma camada para cima ou para baixo
da pilha.
Nota: É recomendável que você coloque
ActionScript em uma camada chamada ações
Figura 2 Linha do Tempo organizada com pastas
e rótulos em uma camada chamada rótulos,
normalmente no topo da pilha de camadas.
Camadas de fundo ficam no fundo da pilha.
3. Para criar uma pasta de camadas, clique no
botão Inserir Pasta de Camadas e dê um novo
nome à pasta.
4. Arraste as camadas para as pastas para
mantê-las organizadas.
Defina as opções de compactação de áudio

1. Importe áudios para a camada Som de seu
documento Flash.
2. No inspetor de Propriedades, marque sincronizar
com o Fluxo (Figura 3).
Nota: Apesar do fluxo representar a perda de
alguma qualidade de áudio, cria um arquivo SWF
menor e sincroniza o áudio aos movimentos do
objeto no Palco.
3. Use a taxa de quadros e a duração do áudio
para calcular sobre quantos quadros ao longo
da Linha do Tempo estender o som. Figura 3 Seção de Som do inspetor de Propriedades
4. Selecione o quadro e estenda a Linha do Tempo
na camada Som selecionando Inserir > Quadro
(Figura 4).
Todo o áudio vai ficar visível na Linha do Tempo.
Nota: Não use Inserir > Quadro-chave, porque
um novo quadro-chave interromperia o áudio
antes dele terminar. Figura 4 Linha do Tempo com sons
2 Como organizar conteúdo © Adobe Systems Incorporated

Rotule quadros-chave Rótulo de quadro
Você pode rotular alguns quadros-chave de forma

a indicar quando mudanças ocorrem na Linha do
Tempo.
1. Selecione um quadro que deseje rotular.
2. No inspetor de Propriedades, digite o rótulo na

caixa de texto Nome (Figura 5).
Os rótulos aparecem na Linha do Tempo

(Figura 6). Figura 5 Caixa de texto Nome
Nota: Evite nomes longos para minimizar o
tamanho do arquivo e também para impedir que
o rótulo cubra muitos quadros.
Figura 6 Rótulos de quadro na Linha do Tempo
© Adobe Systems Incorporated Como organizar conteúdo 3

Como tornar o conteúdo do Flash acessível

Você pode tornar o conteúdo do Adobe Flash CS4 acessível a pessoas portadoras de deficiências. Aqui
estão alguns passos que você pode seguir para tornar seu conteúdo da web mais acessível para aqueles
portadores de deficiências visuais, motoras ou auditivas:
• Exponha as informações para leitores de tela. Pessoas com deficiências visuais usam programas de
leitura de tela de tela que oferecem uma descrição falada do que está na tela. Em filmes Flash, você
decide que objetos de em seu filme vão ser lidos pelos leitores de tela.
• Faça textos e imagens redimensionáveis. Alguns visitantes pode ter dificuldades para ler textos pequenos
ou para ver pequenos objetos de imagem.
Permita aos usuários que aproximem estes elementos, tomando partido de gráficos vetoriais
dimensionáveis em arquivos SWF.
• Ofereça narrativa de áudio. Considere oferecer narrativa de áudio para visitantes sem leitor de tela,
ou onde leitores de tela podem não funcionar, como em conteúdo de vídeo.
• Ofereça legendas para narrativas de áudio. Alguns visitantes podem não ser capazes de ouvir a narrativa
de áudio de seu site ou de um vídeo.Considere oferecer legendas para estes visitantes.
• Não se baseie apenas em cores para passar informação. Muitos visitantes podem ser daltônicos. Se
você se baseia em cores para passar informações, ofereça equivalentes em texto ou voz.
Historicamente, muitos formatos on-line (tais como vídeos) oferecem meios alternativos para visitantes
com deficiências visuais terem acesso ao conteúdo, por exemplo, uma descrição textual do vídeo. no entanto,
Flash oferece informação textual diretamente para o leitor de tela. Apesar disto geralmente significar que
você terá que criar configurações adicionais ou ActionScript em um arquivo FLA, você não terá que criar
uma versão completamente separada.
Os seguintes objetos são accessíveis como padrão em filmes Flash e são incluídos na informação que o
Flash Player fornece para programas de leitura de tela:
• Texto
• Campos de inserção de texto
• Botões
• Clipes de filmes
• Filmes inteiros
© Adobe Systems Incorporated Como tornar o conteúdo do Flash acessível 1

Habilitando e desabilitando a acessibilidade

Como padrão, seu filme Flash é acessível a leitores de tela. Textos estáticos são lidos automaticamente.
Outros objetos de imagem, tais como botões e clipes de filme são anunciados usando um rótulo que é
aplicado ao objeto pelo Flash. Os rótulos padrões são termos gerais tais como um botão, mas você pode
oferecer termos mais específicos.
Você pode habilitar ou desabilitar a acessibilidade para o filme inteiro ou para objetos selecionados usando o
painel Acessibilidade. A seguir, algumas das melhores práticas para tornar objetos acessíveis:
• Ofereça o sua própria denominação e descrição para cada objeto de imagem acessível com exceção do
texto. (Como o texto é lido pelos leitores de tela, você não precisa fornecer descrições.)
• Acrescente rótulos descritivos aos botões, tais como próximo ou anterior.
• Acrescente rótulos e descrições aos clipes de filmes, se eles mostram uma animação que não é explicada
em texto na página.
• Desabilite a acessibilidade para um objeto de imagem, tal como uma animação que não acrescente
novas informações ao texto explanatório em uma página. Em particular, se você utiliza áudio, desabilite
a acessibilidade para qualquer texto que duplique o conteúdo de áudio.
• Tente permitir aos visitantes controlar sua movimentação pelo site usando botões, tais como anterior ou
próximo.
• Certifique-se de que os visitantes possam se movimentar pelo site utilizando o teclado.
2 Como tornar o conteúdo do Flash acessível © Adobe Systems Incorporated

Para habilitar e desabilitar a acessibilidade:

1. Selecione Janela > Outros Painéis >
Acessibilidade.
O painel Acessibilidade se abre (Figura 1).
Como padrão, o filme é acessível em sua
totalidade e a rotulação automática esta
habilitada.
2. Desmarque a opção Tornar Filme Acessível
para desabilitar a acessibilidade. Selecione esta
mesma opção para habilitar a acessibilidade.
Figura 1 Painel Acessibilidade
Para acrescentar uma descrição do site Flash:

Sites Flash podem ter layouts, estrutura e navegação
complexos. Esta complexidade pode dificultar a
navegação para visitantes usando leitores de tela.
Uma boa ideia é fornecer uma descrição geral do
site inteiro para ajudar na orientação de usuários de
leitores de tela sobre a estrutura do site. Você pode
acrescentar esta descrição através do painel
Acessibilidade.
1. Selecione Editar > Cancelar Todas as Seleções
para se assegurar que o painel Acessibilidade
esta configurando propriedades para o filme
inteiro (Figura 1). Figura 2 Descrição do site no painel Acessibilidade
2. Na caixa de texto Descrição, digite uma
descrição da estrutura do site (Figura 2).
Para acrescentar um nome e descrição para

um objeto de imagem:
1. No Palco, clique em um botão ou clipe de filme.
O painel acessibilidade muda para mostrar as
opções para o objeto selecionado.
2. Digite o nome e a descrição para o objeto de
imagem (Figura 3).
Os leitores de tela lerão a informação fornecida
quando o indicador de reprodução alcançar o
quadro no qual o objeto de aparece
primeiramente.
Figura 3 Nome e descrição de um objeto de imagem

Para desabilitar a acessibilidade de um objeto:

1. No Palco, clique em um objeto que não
acrescenta informações para a página, tal como
uma animação.
Nota: É especialmente importante desabilitar a
acessibilidade de objetos repetitivos de modo que
leitores de tela não fique lendo a mesma
informação repetidamente.
2. Desmarque Tornar Objeto Acessível. leitores de
tela irão ignorar o objeto.
Constantemente acontecem situações onde um clipe de filme contém outros clipes de filme que não
requerem descrições de texto separadas. Neste casos, crie uma descrição para o filme parente e desabilite
Tornar Objetos-Filho Acessíveis (Figura 3) de forma que apenas as informações necessárias serão
mandadas para o leitor de tela
Controle de ordenação por tabulação do conteúdo Flash

Para favorecer a acessibilidade de visitantes com deficiências motoras, é importante oferecer acesso via
teclado para todos os objetos em seu site Flash. Você pode fazê-lo configurando um índice de tabela para
cada objeto. O índice de tabela determina a ordem na qual o visitante se move pelo site quando pressiona a
tecla Tab.
1. Certifique-se de que o painel Acessibilidade está

aberto (selecione Janela > Outros Painéis >
Acessibilidade).
2. Selecione o objeto ou texto onde você quer que
o visitante comece.
3. Na caixa Índice de tabulação, digite 1
(Figura 4).
4. Repita os passos 2 e 3 para todos os objetos no
Palco, aumentando o número do índice de Tabela
para cada objeto.
5. Selecione Exibir > Mostrar Ordem de
Tabulação. Figura 4 Painel Acessibilidade
O número de índice por tabulação que você
digitou aparece ao lado da ocorrência no Palco.
Nota: A ordenação por índice de tabulação
também controla a ordem na qual muitos leitores
de tela lêem os sites Flash. No entanto para
controlar a ordem de leitura de todos os leitores,
você precisa configurar o índice de tabulação
através do ActionScript. Veja a Ajuda Flash para
mais detalhes.
4 Como tornar o conteúdo do Flash acessível © Adobe Systems Incorporated

Teste de acessibilidade para conteúdo Flash

Como para outros conteúdos, você deve testar o seu conteúdo de acessibilidade Flash antes de publicá-lo.
Aqui vão algumas recomendações para o teste de acessibilidade:

• Baixe diversos leitores de tela e teste seu site executando-o em um navegador com o leitor de tela
habilitado.
Certifique-se de que o texto lido pelo leitor de tela não é duplicado pelo áudio fornecido por você.
• Verifique que os visitantes podem navegar seu conteúdo eficientemente usando apenas o teclado. Você
deve testar a navegação por teclado tanto com um leitor de tela ativado quanto desativado, porque
acesso via teclado pode se comportar de forma diferente quando um leitor de tela está presente.
• Teste o site com visitantes reais. Se é importante que seu site seja acessível, teste-o com pessoas
portadoras de deficiências.
Para obter mais informações sobre acessibilidade e sobre as melhores práticas no Flash, consulte a
seção “Melhores Práticas” em Uso do Flash (Ajuda > Ajuda do Flash)ou visite www.adobe.com/go/
flash_accessibility/.

Como publicar um documento Flash

Você desenvolve conteúdos no Adobe Flash CS4 usando um documento Flash FLA. Estes documentos têm
a extensão .fla e podem ser abertos e editados no Flash.
Para outras pessoas assistirem a seu filme, você o publica em um formato que seja acessível a outros softwares.
Você usa a caixa de diálogo Configurações de Publicação para determinar quais formatos publicar.
Por padrão, o comando Publicar cria um arquivo Flash SWF, um documento HTML que insere o seu conteúdo
Flash em uma janela de navegador, e um arquivo JavaScript denominado AC_OETags.js que permite que seu
arquivo SWF seja reproduzido automaticamente em navegadores compatíveis com conteúdo ativo.
Você também pode publicar arquivos Flash em formatos EXE e HQX. Use estes formatos para players
independentes quando você sabe que os visitantes não têm o Flash Player instalado. Arquivos EXE funcionam
no Windows; arquivos HQX funcionam no Mac OS.
Exportação de conteúdo Flash como uma imagem

Às vezes você pode desejar exportar conteúdo Flash como uma imagem, para uso em outro documento.
Você pode exportar conteúdo Flash em formato JPEG, PN ou GIF. Isto é semelhante a exportar uma
imagem do Adobe Fireworks CS4. Quando você seleciona uma dessas opções, o Flash adiciona uma aba à
caixa de diálogo Configurações de Publicação que permite que você altere as configurações de formato da
imagem. Por exemplo, se você selecionar o formato JPEG, o Flash acrescenta uma aba JPEG que permite
que você altere as configurações de compactação para o JPEG a exportar.
Para publicar conteúdo Flash:

1. Abra um documento no Flash.
2. Selecione > Configurações de Publicação na
barra de menu. Se esta fora a primeira vez em
que abriu a caixa de diálogo Configurações de
Publicação, ela se abre com a aba Formatos
selecionada (Figura 1).
3. Na aba Formatos, selecione os tipos de arquivo
a produzir quando você publicar o filme.
4. Se você desejar alterar os nomes de qualquer
dos arquivos a publicar, digite os novos nomes
nas caixas de texto sob Arquivo. Por padrão,
todo tipo de arquivo usa o mesmo nome que o
arquivo FLA. Somente as extensões são
diferentes.
5. Clique no ícone da pasta à direita do nome do
arquivo se quiser selecionar um local diferente
para publicar os arquivos. Por padrão,os
arquivos são publicados na mesma pasta que o Figura 1 Caixa de diálogo Configurações de
arquivo FLA. Publicação
© Adobe Systems Incorporated Como publicar um documento Flash 1

6. Clique na aba Flash.

A aba Flash da Caixa de diálogo Configurações
de Publicação se abre (Figura 2).
7. Para alterar a versão do Flash que tem suporte
para o conteúdo Flash, use o menu pop-up
Versão.
Por regra, a versão é definida como Flash Player
9. Se você souber que seus visitantes terão uma
versão anterior instalada, selecione a versão
apropriada no menu.
8. Para controlar a compactação do bitmap, ajuste
o menu deslizante Qualidade do JPEG ou digite
um valor. Uma qualidade mais baixa produz
arquivos menores; uma qualidade mais alta
produz arquivos maiores. Tente configurações
diferentes para decidir qual a melhor negociação
entre tamanho e qualidade.
9. Para definir a taxa de amostragem e
compactação de todos os sons contidos no
arquivo SWF, clique no botão Definir ao lado de
Fluxo de Áudio ou Evento de Áudio e selecione
opções de Compactação, Taxa de Bits e
Qualidade na caixa de diálogo Propriedades de
Som. Clique em OK quando terminar. Figura 2 Aba Flash da Caixa de diálogo
Configurações de Publicação
10. Clique em Publicar. O filme é publicado em
cada um dos formatos que você selecionou.
Para publicar um filme sem alterar as Configurações de Publicação, selecione Arquivo > Publicar na barra
de menu.
2 Como publicar um documento Flash © Adobe Systems Incorporated

Como testar uma narrativa digital

É muito importante testar seu conteúdo de Adobe Flash CS4 antes de publicá-lo. São recomendados três
tipos de teste: técnica, ortografia e gramática, e usabilidade.
Realização de testes técnicos

Um teste técnico responde a perguntas como as seguintes:
• Todos os botões funcionam corretamente, de acordo com o organograma?
• Os textos, elementos gráficos, animações e sons correspondem ao storyboard?
• Existe layout e coordenação adequados entre os textos, elementos gráficos, animações e sons, conforme
especificado no storyboard?
Com sua narrativa aberta no Flash, selecione Controlar > Testar Filme e realize um teste técnico respondendo
a cada uma das perguntas listadas.
Visualização do conteúdo Flash
Você também pode testar como o conteúdo vai funcionar numa página da web usando o comando Publicação
de Visualização. Por exemplo, se você pretende publicar o conteúdo como um arquivo HTML para a web,
você pode visualizar o conteúdo em um arquivo HTML.
1. Selecione Arquivo > Publicar Visualização > HTML.
Um documento HTML contendo o arquivo SWF de seu conteúdo se abre em seu navegador padrão.
2. Clique pelas páginas de sua narrativa para ver como ela funciona em um navegador da web. Certifique-
se de que os botões operam corretamente e que os textos, elementos gráficos, animações e sons estão
devidamente coordenados.
3. Feche a janela do navegador.
Revisão da narrativa
Não há melhor maneira de revisar sua narrativa do que lendo cada página cuidadosamente várias vezes
seguidas, comparando com seu storyboard. Leia o texto vagarosamente e em voz alta, para conferir a
ortografia e erros gramaticais. Peça que alguém menos familiarizado com seu projeto revise a narrativa
também.
© Adobe Systems Incorporated Como testar uma narrativa digital 1

Uso do revisor ortográfico

Flash tem um revisor ortográfico incorporado que
você pode usar para conferir a ortografia de todo o
texto em seu documento.
1. Selecione Texto > Verificar Ortografia.
A caixa de diálogo Verificar Ortografia se abre

(Figura 1).
2. Use a caixa de diálogo Verificar Ortografia como

faz com qualquer outro corretor ortográfico. Por Figura 1 Caixa de diálogo Verificar Ortografia
exemplo, clique em Alterar para mudar a palavra
com ortografia incorreta para a palavra na caixa
de texto Alterar para.
Realizar um teste de usabilidade

Testes de usabilidade são sessões em que você observa os visitantes enquanto eles usam sua aplicação.
Seu feedback vai ajudá-lo a melhorar a organização, a navegação, os textos, a utilização de cor e outros
fatores de sua aplicação. Para realizar um teste de usabilidade, é necessário fazer o seguinte:
1. Defina o público para seu teste de usabilidade. Este público deve parecer os usuários reais de sua
aplicação.
2. Desenvolva as metas para o projeto de testes de usabilidade. Comece por fazer as seguintes perguntas:
O que o público-alvo deveria conseguir tirar da aplicação? O que você deseja aprender sobre sua
aplicação? Há algum problema com que esteja especialmente preocupado, tal como uma barra de
navegação não convencional?
3. Crie um roteiro teste. Trata-se de uma lista de tarefas que o moderador do teste irá pedir que o testador
realize. O roteiro deve também incluir o feedback e perguntas derivativas àquelas colocadas pelo
moderador. Articule as perguntas feitas, as tarefas apresentadas e as opiniões buscadas de forma que
permita aos participantes sentir que estão contribuindo para o projeto, ao invés de estarem sendo testados
pelo moderador. Faça perguntas como Você gosta das cores? Você consegue ler o texto? Onde você
clicaria para obter informações sobre a empresa/organização?
4. Recrute os seus testadores. Use as características que você definiu inicialmente como as de seu público.
Além destas características, escolha seus testadores pela praticidade. Por exemplo, eles devem morar
perto o suficiente do local dos testes para chegar lá com facilidade. Você deve tornar o processo o mais
simples possível para seus testadores. Para eficiência máxima, os profissionais de usabilidade recomendam
um mínimo de oito testadores.
2 Como testar uma narrativa digital © Adobe Systems Incorporated

5. Forneça um ambiente de testes confortável, silencioso e com privacidade. Idealmente, você deveria
filmar os participantes. Configure a câmera de forma a não apontar diretamente para o participante ou
para a tela, mas de forma que inclua tanto a tela quanto parte do usuário. Em testes profissionais de
software, normalmente existem duas câmeras: uma que grava o rosto do testador e outra que grava a
tela. Os moderadores dos testes depois analisam a sessão assistindo a ambas as gravações lado a lado,
de maneira que a reação do testador é comparada com o que o testador estava fazendo.
6. Observe o testador (ou análise o vídeo). Tente encontrar comportamentos latentes, comportamentos dos
quais os participantes não têm consciência. O comportamento latente se encontra na linguagem corporal
ou expressões faciais que os participantes não verbalizam. um exemplo de comportamento latente é
quando os participantes movimentam o cursos pela tela por algum tempo, procurando algo, mas não
documentam que tal item foi difícil de encontrar. Outro exemplo é o participante suspirar ou parecer
insatisfeito depois de clicar em um link porque se cansou de esperar que uma imagem carregue; este
comportamento indica que o arquivo de imagem está grande demais, mas o participante pode não
documentar este acontecimento.
7. Após completar estes testes, organize e estude seus dados. Enquanto estiver fazendo isso, mantenha em
mente os comentários dos participantes. Resista à tentação de impor sua opinião. Por exemplo, se
alguns usuários reclamarem sobre a localização sobre a localização de um menu, evite concluir que
“eles vão se acostumar uma vez que o utilizem”.
Para obter maiores informações, visite www.adobe.com/devnet/articles/usability_testing.html.
© Adobe Systems Incorporated Como testar uma narrativa digital 3

Avaliação de uma narrativa digital
Nome do aluno: ________________________________________________ Data: _______________
Nome do projeto que você está avaliando: _________________________________________________
Comunicação
Qual é o público alvo? _______________________________________________________________
Qual a mensagem pretendida? _________________________________________________________
A mensagem pretendida está clara? Por que sim, ou por que não? ________________________________
____________________________________________________________________________________________
Quais são os objetivos da narrativa? _____________________________________________________
____________________________________________________________________________________________
Como os efeitos e o conteúdo visual enriquecem ou prejudicam a mensagem e os objetivos da narrativa

como um todo?
____________________________________________________________________________________________
Como o conteúdo de texto e áudio da narrativa enriquecem ou prejudicam a sua mensagem e os seus
objetivos como um todo?
____________________________________________________________________________________________
____________________________________________________________________________________________
O quanto os efeitos e o conteúdo visual são eficientes para atingir o público alvo? ______________________
____________________________________________________________________________________________
O quanto o conteúdo de texto e de áudio da narrativa são eficientes para atingir o público alvo? ____________
____________________________________________________________________________________________
Técnico
A animação funciona bem ? Por que sim, ou por que não? ______________________________________
____________________________________________________________________________________________
Todos os botões funcionam? Se não, quais mudanças precisam serem feitas? ________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Avaliação de uma narrativa digital 1

As transições são suaves? Se não, como podem ser aperfeiçoadas? _______________________________
____________________________________________________________________________________________
As interpolações ocorrem da forma esperada? Se não, como o problema pode ser resolvido? _____________
____________________________________________________________________________________________
O tamanho do filme finalizado é aceitável para a veiculação pretendida? ____________________________
Comente qualquer excesso ou precariedade na utilização de animação, som, transições ou efeitos. _________
____________________________________________________________________________________________
____________________________________________________________________________________________
Usabilidade
É fácil navegar pela narrativa? A navegação é previsível e fácil de usar? O texto é legível? As imagens e
outros elementos de mídia carregam em um tempo razoável? É fácil seguir e entender as animações?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Critérios narrativos
A narrativa está contida dentro dos limites de tempo e palavras requeridos? __________________________
A narrativa inclui pelo menos uma transição e técnica cinematográfica? _____________________________
A narrativa excede o uso de cinco efeitos ou técnicas cinematográficas? ____________________________
A narração de áudio excede 45 segundos? _________________________________________________
A narrativa fica dentro do limite de um minuto de duração? ______________________________________
2 Avaliação de uma narrativa digital © Adobe Systems Incorporated

Revisão do design
Nome do aluno: _____________________________________________ Data: _________________
Nome do grupo de design: ____________________________________________________________
Nome do cliente: __________________________________________________________________
URL do cliente: ___________________________________________________________________
Resumo
• Depois de compreender os objetivos e o público do cliente, faça uma revisão do site do cliente.
• Um membro do grupo resume os objetivos, o propósito e o público do cliente para confirmar que o
entendimento do grupo.
• O grupo avalia os pontos fortes do design do site. Leve em consideração os seguintes elementos de
design:
o Coerência
o Facilidade de uso
o Utilização de cor
o Navegação universal
o Layout
o Links
o Usabilidade
o Acessibilidade
• O grupo discute melhoramentos que eles sugeririam para o design do site.
• Um membro do grupo resume os pontos fortes do site.
Coerência
Que elementos são repetidos nas páginas de conteúdo, ajudando a identificar o site inteiro?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Revisão do design 1

Como essa repetição ajuda ou atrapalha o propósito geral do site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Quando chegam no site, como os visitantes identificam onde estão, para onde podem ir ou se eles continuam
no mesmo site enquanto vão de uma página à outra ?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
A página obedece aos padrões da web? (por exemplo, os links são azuis e sublinhados)?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Navegação universal
Onde a navegação principal do site está localizada, e o quanto ela é coerente de uma página para a outra?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Revisão do design © Adobe Systems Incorporated

Como os visitantes podem retornar para a página inicial provenientes de outras páginas do site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Como os visitantes controlam seus movimentos no site (por exemplo, existe uma forma de retornar para a
página que visitaram anteriormente)?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Layout
O layout da página é lógico ou o design parece distribuído ao acaso
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Até que ponto a relação de tamanho e distribuição do texto e da imagem confere uma relação de importância?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

____________________________________________________________________________________________
Com que frequência você tem que rolar a página para baixo para encontrar elementos importantes?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Se existem imagens, elas são claras?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
As imagens acrescentam valor ao conteúdo ou são apenas para decoração e chamar a atenção?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Como o esquema de cor contribui para o propósito e para o espírito do site?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Usabilidade
Os links são claramente rotulados?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Vale a espera do tempo que a página demora para carregar?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Com que facilidade os visitantes conseguem achar as informações?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Com que facilidade os visitantes conseguem retornar para seções essenciais do site (se houver alguma)?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Acessibilidade
Todas as páginas são rotuladas com texto alternativo?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Até que ponto os textos e títulos são claros e facilmente legíveis para todos os visitantes (cor, tamanho,
etc.)?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Os links de imagem e pontos ativos (mapas de imagem) têm texto alternativo?
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Características técnicas e suas soluções de design

Característica técnica Solução de Design
Menu pop-up Exibe múltiplos links em um pequeno espaço.

Oferece flexibilidade de navegação sem longos tempos de
carregamento.
Imagem de sobreposição Acrescenta efeitos de realce ou de design com uma troca

de imagens para atrair a atenção do visitante.
Indica áreas ativas (ou clicáveis) da tela.
Exemplo: Botões que mudam de aparência quando o cursor
passa sobre eles
Mapa de imagem Ajuda a configurar a navegação em um site.

Exemplo: Um mapa geográfico com áreas ativa ou botões
invisíveis vinculados a sites cobre cada país
Apresentação de fotos Acrescenta elementos a fotografias para enriquecer o

design geral do site.
Faz mudanças na apresentação de elementos das
fotografias tais como tom, cor e fusão.
Tabelas de planilhas Rapidamente configura uma tabela de informações tais

como um índice, um grande catálogo ou agenda.
Calendário Cria com rapidez um calendário editável.

Exemplos: Calendários de empresa, lista de eventos
comunitários
Formulários Interage com os visitantes do site, coletando informações.

Exemplos: Formulários de feedback, livro de visitas, pesquisas ou
formulários de encomenda de produtos
Folhas de Estilo em Cascata (CSS) Cria um design coerente para todas as páginas e facilmente atualiza
múltiplas páginas de um site
Utiliza com modelos para gerenciar grandes sites.
© Adobe Systems Incorporated Características técnicas e suas soluções de design 1

Transições, efeitos cinematográficos Enriquecem ou reforçam o espírito de um site.

ou efeitos de linha de tempo Acrescentam à mensagem geral do site.
Exemplos: Anúncios em banner e desenhos animados
Som Acrescenta à narração para esclarecer mais ou enriquecer

elementos visuais.
Vídeo Use vídeo em sites para personalizar e enriquecer a experiência

do usuário.
2 Características técnicas e suas soluções de design © Adobe Systems Incorporated

Como tornar sites acessíveis
Texto alternativo
Oferecer texto alternativo para imagens é essencial para os muitos dispositivos que ajudam portadores de
deficiência a acessar a web. O inspetor de Propriedades do Adobe Dreamweaver CS4 tem uma caixa de
texto Alt para digitação de texto alternativo para imagem, link ou botão.
O texto pode ser descritivo e tão longo o quanto for necessário, mas deve ser tão sucinto o quanto for
possível.
Folhas de Estilo em Cascata (CSS)

Desenvolvedores utilizam CSS para separar o conteúdo de apresentação de seus sites, permitindo a dispositivos
de assistência fácil acesso à informação fornecida no conteúdo. Desenvolvedores também usam CSS para
criar uma estrutura coerente para o conteúdo de texto, auxiliando dispositivos interpretativos (tais como
navegadores texto-para-fala).
Mapas de Imagem
Fornecer texto para áreas ativas em imagens para fazê-las legíveis por dispositivos interpretativos.
Tabelas
Oferecer textos alternativos descritivos para tabelas, tais como identificadores de linha ou cabeçalhos de
coluna para tabelas de dados ou descrições mais longas para tabelas com informações textuais.
© Adobe Systems Incorporated Como tornar sites acessíveis 1

Modelos e objetos de biblioteca

Designers podem criar um modelo simples e acessível ou um pequeno conjunto de modelos como base do
site inteiro. Modelos limitam os erros quando vários designers estão trabalhando em um site. Além disso,
modelos produzem um site coerente, que mantém os visitantes orientados, contando com elementos comuns
e coerentes, tais como barras de navegação.
Quadros
Acrescentar descrições de quadros com o inspetor de Propriedades do Adobe Dreamweaver CS4. Este
texto alternativo fornece informações adicionais para navegadores da web e leitores enquanto os visitantes
navegam cada quadro.
Filmes
Utilize o painel Acessibilidade do Adobe Flash CS4 para fornecer textos equivalentes onde for apropriado.
Se houverem elementos de filme que forem puramente decorativos, repetitivos ou que não exprimam nenhum
conteúdo, torne-os inacessíveis desmarcando a opção Tornar Objeto Acessível. Use a seção de descrição
do painel para oferecer informações sobre o contexto do filme.
Independência de dispositivos
Independência de dispositivos quer dizer que sua página da web não requer um dispositivo ou programa
em especial para ser usada.
Por exemplo, a página não pode requerer do usuário um mouse para usá-la – todos os controles devem ser
gerenciáveis também pelo teclado. Proporcione um equivalente no teclado para cada botão e inclua todos os
links e botões no índice de tabulação, de forma que os visitantes possam usar a tecla Tab para se mover de
um elemento para o outro.
Use o painel o painel Comportamentos no Dreamweaver para criar rolagens ou outros scripts que são
ativados por eventos lógicos, tais como onFocus e OnBlur. Crie scripts que combinem eventos de mouse
com eventos lógicos para beneficiar os variados tipos de visitantes.
Para obter mais informações sobre comportamentos, veja “Adição de comportamentos JavaScript” na
Ajuda Dreamweaver (no Dreamweaver, selecione Ajuda > Ajuda do Dreamweaver).
2 Como tornar sites acessíveis © Adobe Systems Incorporated

Exemplo de documento de design

Site da escola Coast Middle School
Visão Geral do Projeto

Desafios do Site:
Navegação: A página é longa demais, exigindo que os visitantes rolem para baixo. Há um excesso de
informações contido sob poucos tópicos. Por exemplo, a seção Quem Somos deveria ser dividida em Atletismo,
atividades e Oportunidades de Voluntariado.
Diagramação: Usa tabelas e links de âncora que deveriam ser separados em várias páginas, para os
visitantes encontrarem todas as informações.
Cores: As cores não funcionam bem juntas e s imagens não chamam a atenção do público.
Acessibilidade: A imagem principal não contém texto alternativo, de forma que um leitor de telas não
descreveria a imagem.
Soluções Possíveis:
Navegação: Divida a página em várias páginas, organizadas por temas, com uma estrutura de navegação
na página inicial.
Diagramação: Crie uma nova logomarca para substituir a pequena foto da escola que repete o nome do site.
Cores: Selecione duas ou três cores unificantes para criar um site coerente.
Use estruturas tecnológicas, tais como modelos e folhas de estilo em cascata (CSS), para fazer as páginas
coerentes e fáceis de atualizar.
Metas, objetivos e mensagens
A escola Coast Middle School precisa reformular seu site para ajudar o visitante a navegar e encontrar
informações. O site atual fornece informações sobre a localização da escola, um mapa, uma lista de professores
e uma breve descrição da escola e suas atividades. A escola usa o site para informar os pais e a comunidade
sobre a escola. A missão da escola é promover o envolvimento dos pais e da comunidade com a escola, ao
informá-los sobre as atividades de voluntariado e os eventos relacionados à escola.
Público
O público-alvo do site são os pais, membros da comunidade, administradores da escola, professores e alunos.
Eles irão ao site buscar informação sobre a escola, seus professore e seus eventos, bem como para encontrar
mais maneiras de se envolver com a escola.
© Adobe Systems Incorporated Exemplo de documento de design 1

Metas de Reformulação
A reformulação deve incluir o seguinte:
• Faça o site mais fácil de se atualizar, para oferecer informações sobre as novas atividades da escola,
assim como as mudanças de professores e funcionários.
• Incorpore a nova logomarca.
• Forneça informações mais detalhadas sobre as atividades, o atletismo, e os departamentos, já que estes
grupos criarão seus próprios sites.
• Use um calendário para informar a comunidade sobre eventos na escola.
• Proporcione acesso fácil às categorias de informação.
• Incentive o público a aumentar a participação da comunidade e dos pais na escola.
Especificações técnicas/Requisitos de entrega

Os membros do público normalmente vão acessar este site usando uma conexão discada de 56Kbps ou um
modem a cabo. Eles podem usar o Internet Explorer, o Mozilla Firefox, o Safari ou outro navegador. O site
deve otimizar todas as imagens para que carreguem rapidamente sem perder o atrativo.
Conteúdo do site
Página inicial:
• Logomarca da Coast Middle School
• Título da Coast Middle School
• Links para as seguintes áreas:
o Acadêmico: departamentos, horários, páginas de turmas, biblioteca
o Atividades estudantis: atletismo, clubes e organizações
o Informações sobre a Escola: novidades, calendário, manual, voluntariado
o Professores e funcionários: Professores, administradores, funcionários
o Quem Somos: missão, quem é quem, cidadania, informações de contato, mapas, links
Exemplo de página de conteúdo:

• Barra de navegação de texto
• Navegação universal para cada um dos seguintes itens:
o Acadêmico
o Atividades Estudantis
o Quem somos
o Informações sobre a Escola
o Professores e Funcionários
• Nova logomarca Coast Middle School
2 Exemplo de documento de design © Adobe Systems Incorporated

Estrutura do Site
Página inicial
Atividades Quem somos Informações Professores

Acadêmico
Estudantis sobre a Escola e Funcionários
Biblioteca Atletismo Missão Novidades Professores
Páginas de turma Clubes Quem é quem Calendário Administradores
Departamentos Cidadania Manual Funcionários
Informações
Horários Voluntariado
de contato
Mapas
Links

Design Visual
Este é o site original da Coast Middle School. Ele só contém uma página e o rola para baixo para incluir
todas as informações da escola. O site é difícil de se atualizar e o texto é muito denso.

Amostras de cores e fontes
Design A
• A cor principal, o azul, será usada na estrutura de navegação e como parte da logomarca.
• A cor rosa será usada no texto comum das páginas.
• O preto e branco será usado na logomarca.
Design B
• A cor laranja principal será usada na logomarca e para realçar qualquer texto.
• O gradiente azul-preto será usado como o fundo como estrutura de navegação de todas as páginas.
• Preto e branco serão todos os textos da página: texto branco no fundo azul-preto e texto preto no fundo
branco.

Exemplo de proposta de design
Design A
Este design de página inicial usa menus pop-up para gerenciar todo o conteúdo e links como navegação
principal. Usa a cor azul para navegação e um misto de azul e rosa na logomarca. O texto principal da
página é parecido com o rosa da logomarca, para chamar a atenção do visitante. Uma página de conteúdo
teria exatamente a mesma aparência da página inicial, com a mesma barra de navegação atravessada no
topo. Para este design, a equipe teria que criar um modelo para ser usado em todo o site.
O design unifica o site, sem que fique difícil o visitante saber quando está na página inicial e quando em uma
página de conteúdo.
• Coerência: O site é coerente porque usa somente três cores e usa a logomarca e rodapé em todas as
páginas.
• Facilidade de uso: Os menus pop-up menus tornam o site fácil de usar, já que os visitantes podem
pular para informações específicas fácil e rapidamente.
• Navegação universal: Um esquema de navegação universal se repete em todas as páginas.
• Layout: O layout usa o espaço branco entre a logomarca e o rodapé para concentrar a atenção do
visitante no meio da página.
Este design usa a escolha de logomarca e cor para criar um site simples, capaz de agradar vários públicos.

Design B
Este design usa um grande menu na página inicial ao invés de menus pop-up. Também inclui um quiz sobre
a escola para incentivar os visitantes a descobrir mais sobre a escola Coast Middle School. As cores principais
e a logomarca são aplicadas conforme solicitação.
Este exemplo de página de conteúdo é semelhante à página inicial com a logomarca, mas contém uma barra
de navegação flexível.
Além disso, links de texto na parte inferior da página fazem a página mais acessível. O site está unificado
pela logomarca e logomarca de rodapé.

• Coerência: Este site usa cores com coerência, e a logomarca aparece em todas as páginas.
• Navegação universal: O esquema de navegação é um menu grande na página inicial que se repete de
forma mais simples em todas as páginas de conteúdo.
• Facilidade de uso: O site tem um esquema principal de navegação que permeia o site e também
contém navegação textual na parte inferior do site para visitantes que desabilitaram a visualização de
elementos gráficos.
• Layout: O layout concentra a atenção dos visitantes no espaço em branco entre a logomarca e o rodapé.
Este design usa fontes e cores para fazer o site mais divertido e mais representativo dos estudantes de uma
escola de ensino médio.

Documento de Design
Use esta planilha para fazer anotações sobre seu documento de design.
Visão geral do projeto

Faça uma lista dos desafios do site.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Faça uma lista das possíveis soluções para estes desafios. Se você tem exemplos de outros sites que
solucionem estes problemas, reproduções de tela e informações bibliográficas.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Metas, objetivos e mensagens

Faça uma lista de metas do site.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
© Adobe Systems Incorporated Documento de Design 1

Público
Escreva uma curta descrição do público alvo deste site.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Metas para a reformulação

Faça uma lista de metas para a reformulação.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Especificações técnicas/Requisitos de entrega

Faça uma lista de requisitos de entrega (navegadores, velocidade de conexão) para este site.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
2 Documento de Design © Adobe Systems Incorporated

Conteúdo do site
Página inicial: Faça uma lista das imagens, logomarcas, texto e links que aparecerão nesta página. Descreva
quaisquer padrões de cores ou fontes que devem ser usadas nesta página.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Exemplo de página de conteúdo: Faça uma lista das imagens, logomarcas, texto e links que aparecerão nesta
página. Descreva quaisquer padrões de cores ou fontes que devem ser usadas nesta página.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________

Estrutura do site
Crie um organograma para o site.
4 Documento de Design © Adobe Systems Incorporated

Design visual
Insira reproduções de tela da página inicial do site original e um exemplo de página de conteúdo
Exemplos de cores e fontes

Crie dois exemplos de cores e de fontes com o Adobe Fireworks CS4 e insira reproduções de tela dos
exemplos. Descreva e justifique o layout de sua página e suas decisões de design.
Exemplos de propostas de design

Crie e insira reproduções de tela de duas diferentes propostas de design da página inicial e de páginas de
conteúdo. Use exemplos de cores e de fontes como parte destes designs. Descreva e justifique o layout da
página e o design de navegação.

Princípios de design para conteúdo

Ao criar conteúdo com o Adobe Flash CS4 você precisa levar em consideração os seguintes princípios:
Design centrado no usuário

O que você está apresentando com o Flash é determinado pelo usuário, também referido como público.
Você deve conhecer o seu público: O seu tamanho, quem são, de onde eles vêm, quais são suas metas e
quais as dificuldades que eles podem ter ao acessar seu conteúdo Flash. Algumas variantes a se levar em
consideração incluem:
• Linguagem
• Limitações
• Interesses
• Experiência com tecnologia
Propósito
Qual o principal propósito de sua apresentação Flash? É um site corporativo, um software de programa, um
site de entretenimento, um jogo ou é para uso pessoal? Para cada tipo de apresentação você deve considerar
o uso de diferentes técnicas, imagens gráficas e fatores de usabilidade.
Coerência
Enquanto você planeja o conteúdo de sua apresentação, crie uma diagramação, um esquema de cor e um
sistema de navegação que sejam coerentes. Por exemplo, utilize o mesmo estilo de botão e sistema de menu
para todas as páginas do seu site.
Tecnologia
Fique atento aos requisitos técnicos que você precisará para implementar, entregar e acessar a sua
apresentação. São elementos a serem considerados:
• Hospedagem e ISPs
• Servidores web
• Segurança do navegador e do e-mail
• Programas externos necessários, tais como o Java
• Componentes de reprodução de mídia, tais como caixas de som e placas de som
Conteúdo
O conteúdo de seu site leva em consideração todos os outros princípios de design. O conteúdo deve ser
apropriado para o seu público e deve respeitar o propósito do site. O conteúdo deve ser bem organizado,
coerente em sua apresentação e tecnologicamente adequado aos seus usuários. Certifique-se de que a
mídia que você inclui enriquece a sua mensagem ao invés de criar uma distração. Aumente a legibilidade de
elementos de texto usando os tipos, tamanhos e cores de fontes apropriados. Utilize elementos gráficos e
fotografias que são significativos e que complementem outros conteúdos..
Controle
Proporcione objetos de navegação simples para os usuários. Use design padrão para todos os botões, barras
de rolamento, menus e linguagem. Não esconda elementos de navegação. Leve em conta diretrizes de
acessibilidade ao criar o sistema de navegação para a sua apresentação.
© Adobe Systems Incorporated Princípios de design para conteúdo 1

Como criar folhas de estilo em cascata (CSS)

Folhas de estilo em cascata (CSS) são conjuntos de regras de formatação que controlam a aparência do
conteúdo de uma página da web. Ao usar folhas de estilo, você pode garantir melhor coerência através de
seu site (mesmo que seu site consista somente de uma página). Estilos CSS oferecem uma ampla gama de
opções de formatação de texto. Esta apostila mostra como você pode fazer proveito das folhas de estilo em
cascada para manter a coerência e para aplicar características ao texto.
Se você tem usado o Adobe Dreamweaver CS4, você pode vir usando CSS sem saber. O padrão do
Dreamweaver é formatar todo texto como CSS. Toda vez que você muda certas propriedades de texto no
inspetor de Propriedades, tais como o tamanho ou cor do texto, o Dreamweaver solicita que você defina
uma nova regra de CSS ou atualize um estilo para o texto.
O Dreamweaver coloca estas definições de estilo no começo do código de cada página da web. Um conjunto
destas definições é conhecido como uma folha de estilos interna, porque está contido dentro de uma
página da web individual.
Folhas de estilo (às vezes chamadas folhas de estilo incorporadas) são ótimas para manter a coerência
dentro de um documento, mas as folhas de estilo em cascata são especialmente úteis na manutenção da
coerência através de várias páginas diferentes. Ao usar uma folha de estilo externa – um documento separado
que contém informações de estilo CSS – você pode garantir que a aparência do texto será coerente em
páginas múltiplas. A apresentação coerente não só tem aspecto mais profissional, como os especialistas de
usabilidade afirmam que os visitantes encontram mais facilmente aquilo que procuram com mais facilidade
nos sites onde a aparência e localização dos textos é mais coerente.
Definição dos estilos CSS

A maneira mais básica de se definir os estilos CSS no Dreamweaver é aplicando as opções de CSS do
inspetor de Propriedades. Quando faz isso, você é solicitado a criar uma nova regra CSS. Você tem que
nomear a nova regra e definir o tipo de CSS.
Um estilo Classe, semelhante aos estilos que você usa em programas de processamento de texto e
diagramação. Por exemplo, você pode desejar formatar todo o corpo do texto em Arial 10pt, em cor verde
escura. Você pode criar um estilo Classe com estes atributos e então aplicar este estilo a todo o corpo do
texto de seu site.
Um estilo Tag aplica formatação global a tags individuais de HTML, ao invés de seleções individuais. Suponha

Um estilo ID só é usado uma vez dentro de um documento ou página. É usado como um identificador (ID)
único para um estilo aplicado em cabeçalhos, banners, menus e outros elementos presentes em apenas um
local do documento.
Um estilo Composição é usado para formatar texto de formas diferentes, com base em como o usuário
interagir com o texto. Por exemplo, você pode usar um estilo Composição para mudar o aspecto do texto
quando o usuário desdobrar um link de sobreposição.
Sempre que possível, redefina os tags presentes ao invés de criar novos estilos CSS. Os tags presentes
fornecem uma hierarquia útil, tanto para você quanto para os usuários de seu site, e também facilitam o uso
de leitores de tela em seu site.
Além das opções de CSS do inspetor de Propriedades, você pode definir, aplicar e modificar estilos CSS
usando o painel CSS, o que você fará nesta apostila.

Para redefinir um HTML existente usando uma regra CSS seletor Tag:
4. Digite algum texto no documento.
5. Selecione o texto. Figura 1 Texto com aplicação de tag padrão
6. Usando o inspetor de Propriedades, aplique ao texto um Cabeçalho 1
tag HTML como Cabeçalho 1.
O texto aparece no formato padrão Cabeçalho 1
(Figura 1).
7. Certifique-se de que o painel Estilos CSS esteja aberto e
expandido.
Se não estiver aberto, selecione Janela > Estilos CSS.
Botão Nova Regra CSS
CSS (+) na parte inferior do painel CSS (Figura 2).
A caixa de diálogo Nova Regra CSS se abre (Figura 3). Botão Nova Regra CSS
9. No menu pop-up Tipo de Seletor, selecione Tag.

Esta opção permite que você acrescente propriedades Figura 2 Painel Estilos CSS
de CSS a um tag de HTML existente.
10. No menu pop-up Nome do Seletor, selecione h1 (o tag
para Cabeçalho 1).
11. No menu pop-up Definição da Regra, selecione Apenas
Este Documento ou Novo Arquivo de Folha de Estilos.
12. Clique em OK.
selecionando Novo Arquivo de Folha de Estilos, será Figura 3 Caixa de diálogo Nova Regra CSS

A caixa de diálogo Definição de Estilos CSS se abre com a

categoria Tipo selecionada (Figura 4). A caixa de diálogo
contém as opções listadas abaixo. (Para mais detalhes,
selecione Ajuda > Ajuda do Dreamweaver).
• Tipo altera as propriedades do texto, tais como fonte,
tamanho e cor.
• Fundo controla as propriedades do plano de fundo. Por
exemplo, você pode usar um fundo colorido ou uma
imagem ou criar um fundo fixo ou com rolamento.
• Bloco controla o espaçamento e alinhamento de texto e Regra CSS
linhas de um documento.
• Caixa altera a caixa que cerca um elemento de bloco.
Afeta propriedades como altura, largura, enchimento e
margens.
• Borda afeta as propriedades da borda ao redor de textos,
tais como estilo, largura e cor.
• Lista controla as propriedades da lista, tais como o tipografia
do texto e o aspecto dos marcadores.
• Posicionamento define a posição do texto em uma página.
• Extensões controla as quebras de página e a aparência
visual do cursor.
13. Selecione opções para Tipo, tais como as seguintes
Estilos CSS exibindo as opções de tipo
(Figura 5):
• Selecione Verdana, Arial, Helvetica, Sans-serif no menu
pop-up Font-family.
• Selecione 14 no menu pop-up Font-size, e selecione px
(pixels) como unidade de medida (no menu pop-up
imediatamente à direita do menu pop-up Font-size).
• Digite #006600 na caixa Cor, ou selecione uma cor no
seletor de cores.
Nota: Todos os estilos de Cabeçalho usam o padrão
negrito. Se você não desejar que o texto seja em negrito,
selecione Normal no menu pop-up Weight.
14. Clique em Aplicar.
Observe como o texto do Cabeçalho 1, ou o texto que Estilos CSS exibindo as opções de fundo
você selecionou, mudou no documento. (Talvez você
tenha que mover a caixa de diálogo).
15. Para alterar o fundo, selecione Fundo no painel de
Categorias à esquerda.
A categoria Fundo da caixa de diálogo Definição de
Estilos CSS se abre (Figura 6).

16. Selecione uma cor no seletor de cores ou digite um

número hexadecimal na caixa de diálogo Cor de Fundo,
tal como #CCCCCC. (Certifique-se de que a cor do fundo
seja mais clara que a cor do texto.)
17. Clique em Aplicar para visualizar suas alterações.
18. Para alterar a borda e suas propriedades, selecione Borda
no painel Categorias.
A categoria Borda da caixa de diálogo Definição de Figura 7 Caixa de diálogo Definição de
Estilos CSS se abre (Figura 7). Estilos CSS exibindo opções de formatação
19. Sob Style, você pode fazer alterações tais como: de bordas
desmarcar a opção Igual Para Tudo e selecionar a opção
Solid no menu pop-up Top.
20. Sob Width, você pode fazer alterações tais como: digitar
1 menu pop-up Top, e deixar pixels selecionado como a
unidade de medida.
21. Sob Cor, você pode fazer alterações tais como: digitar #006600, Figura 8 Texto com aplicação de
ou qualquer cor que tenha escolhido na etapa 13. formatação de novo estilo
22. Clique em OK.
Observe como o aspecto do texto Cabeçalho 1 que você
havia criado agora foi alterado (Figura 8).
Regra CSS de
24. Certifique-se de que Tudo está selecionado no Painel seletor Tag
Estilos CSS. Propriedades da
regra selecionada
Observe como o estilo h1 agora figura sob <style> na área
Todas as Regras, indicando que este tag faz parte da folha
de estilos. Observe também que as propriedades para este
tag aparecem na área Propriedades (Figura 9).
25. Para fazer mais alterações ao estilo Tag, selecione-o e
clique no Botão Editar Regra.
Faça as mudanças que desejar. Quando terminar, clique
em OK.
Nota: Você pode também fazer alterações usando a área
Propriedades do Painel Estilos CSS, mas é mais fácil Botão Editar
fazer as alterações usando a caixa de diálogo Definição Regra
de Estilos CSS.
26. Para aplicar o estilo textos novos, selecione o texto e
depois selecione Cabeçalho 1, ou o tag que você
Figura 9 Estilo acrescentado ao painel
modificou, no inspetor de Propriedades de Texto.
Estilos CSS

Para criar uma nova regra de CSS Classe:

4. Digite algum texto no documento. Certifique-se de que
nenhuma formatação está sendo aplicada no texto
(Figura 10). Figura 10 Texto sem aplicação de
5. Certifique-se de que o painel Estilos CSS esteja aberto. formatação
CSS(+) na parte inferior do painel.
A caixa de diálogo Nova Regra CSS se abre (Figura 11).
7. No menu pop-up Tipo de Seletor, selecione Classe.
Esta opção cria uma nova regra de seletor Classe.
8. Na caixa Nome do Nome do Seletor, digite um nome para
o estilo, tal como .aviso.
Nota: Nomes de regras Classe devem começar com um
ponto e não podem conter espaços ou caracteres
especiais. Se esquecer de digitar o ponto, o Dreamweaver
vai acrescentá-lo automaticamente.
9. No menu pop-up Definição de Regra, selecione Apenas Figura 11 Caixa de diálogo Nova Regra
Neste Documento ou Novo Arquivo de Folha de Estilos. CSS
selecionando Novo Arquivo de Folha de Estilos, será
10. Clique em OK.
A caixa de diálogo Definição de Estilos CSS se abre
(Figura 12).
11. Selecione as opções para Tipo, tais como as seguintes Estilos CSS exibindo opções de tipo
(Figura 12):
• Selecione Arial, Helvetica, Sans-serif no menu pop-
up Font-family
• Selecione 12 no menu pop-up Font-size, e selecione
px (pixels) como unidade de medida.
• Digite #CC0033 na caixa Cor, ou clique na caixa Cor
e selecione a cor no seletor de cores.

12. Para mudar a formatação de blocos de texto, selecione

Bloco no painel Categoria. A categoria bloco da caixa de
diálogo Definição de Estilos CSS se abre (Figura 13).
13. Na caixa Letter-spacing, você pode fazer alterações como:
Este ajuste acrescenta espaço entre cada letra.
14. Na caixa Text-indent, você pode fazer alterações como:
digitar 5 e selecionar pixels como unidade de medida. Figura 13 Caixa de diálogo Definição de
Isto recua a primeira linha de cada parágrafo. Estilos CSS exibindo opções de formatação
15. Clique em OK. de blocos de texto

16. Selecione o texto do documento.
17. Certifique-se de que o inspetor de Propriedades esteja
aberto e a opção HTML esteja selecionada.
No Windows, o inspetor de Propriedades fica atracado
na parte inferior da tela. Se o inspetor de Propriedades
não estiver aberto, selecione Janela > Propriedades. Figura 14 inspetor de Propriedades de texto
18. Selecione aviso, ou o nome de seu estilo, no menu pop-up
Classe (Figura 14).
19. No documento, desmarque o texto posicionando o ponteiro
do mouse ao lado e clicando uma vez.
Observe como o formato o formato do texto muda
(Figura 15).
Estilos CSS.
Observe como a recém-criada regra CSS agora consta Figura 15 Texto com aplicação de
formatação
sob <style> na Área Todas as Regras, indicando que a
nova regra faz parte de uma folha de estilos CSS. Observe
também como as propriedades do estilo figuram na área
Propriedades.
22. Para efetuar mais alterações ao estilo, selecione-o e
clique no botão Editar Regra.
Nota: Você também pode fazer alterações usando a
área Propriedades do painel Estilos CSS.

Exportação de regras CSS para uma folha de estilos externa

Você pode converter uma folha de estilos CSS interna em externa ao exportá-la, removendo a folha de
estilo CSS interna, e vinculando a folha de estilos CSS exportada a uma ou mais páginas da web.
Para exportar uma folha de estilos:

(Figura 16).
Estilos CSS.
3. Selecione a regra CSS que deseja mover para uma folha
de estilos externa.
Nota: Para mover mais do que uma regra por vez, você
pode clicar ao manter a tecla Shift pressionada, selecionado
regras múltiplas que estejam em sequência. Para
selecionar regras múltiplas que não estejam em sequência,
você pode você pode clicar ao manter a tecla Control
(Windows) ou a tecla Command (Mac OS) pressionada,
selecionado os nomes das regras.
4. Clique com o botão direito do mouse (Windows) ou
pressionando a tecla Control (Mac OS) na(s) regra(s)
selecionadas e selecione Mover Regras CSS no menu de
contexto.
A caixa de diálogo Mover Para Folha de Estilos Externa
Figura 17 Caixa de diálogo Mover para
se abre (Figura 17). Folha de Estilos Externa
5. Selecione a Nova Folha de Estilos e clique em OK.
6. Procure uma localização para o arquivo CSS, digite um
nome para o arquivo, e clique em Salvar.
Nota: É aconselhável colocar os arquivos CSS em pasta
própria e também aconselhável nomear esta pasta como
“css.”
O Dreamweaver exporta o arquivo CSS.

de Folha de Estilos Como

Para excluir uma folha de estilos interna:
1. No painel Estilos CSS, sob Tudo, selecione <style>.

2. Clique no botão Excluir Folha de Estilos Incorporada
O Dreamweaver remove a folha de estilos interna. Se a
folha de estilos interna contiver quaisquer estilos que ainda
estejam sendo usados na página, o texto afetado volta
Botão Excluir Folha de
para sua formatação padrão, ou toma a formatação Estilos Incorporada
definida na folha de estilos externa.

Vinculação a uma folha de estilos externa

É preferível usar uma folha de estilos externa, especialmente se tiver mais de uma página da web. Uma vez
que crie uma folha de estilos externa e a vincule a documentos múltiplos, você pode instantaneamente
alterar qualquer estilo em todos os seus documentos ao fazer alterações na folha de estilos externa.
Nota: Uma vez que comece a usar uma folha de estilos externa, é melhor fazer todas as mudanças de
formatação de texto por meio desta folha de estilos. Se você fizer as mudanças de estilo usando o inspetor
de Propriedades, o Dreamweaver vai automaticamente criar uma nova folha de estilos interna.
1. Abra um documento.

3. Clique no botão Anexar Folha de estilos (Figura 20).
A caixa de diálogo Anexar Folha de Estilos Externa se

abre (Figura 21).
4. Clique Procurar, encontre sua folha de estilos salva,

selecione-a, e clique em OK (Figura 22).
Anexar Folha de Estilos
Figura 21 Caixa de diálogo Anexar Folha

de Estilos Externa
Figura 22 Seleção de folha de estilos CSS

para anexar

5. Na caixa de diálogo Anexar Folha de Estilos Externa,

O Dreamweaver anexa a folha de estilos a seu
Figura 23 Confirmação de vinculação de
As regras da folha de estilos agora estão disponíveis no estilo
inspetor de Propriedades. Talvez você precise expandir
a folha de estilos para visualizar suas regras.
Você pode vincular a mesma folha de estilos a vários
documentos.
Quando você fizer alterações à folha de estilos, estas
alterações aparecerão em todos os documentos
vinculados à folha de estilos.
Figura 24 Folha de estilos anexada

Criação de folha de estilos externa

Você também pode criar uma folha de estilos externa.
(Figura 25).
CSS (+) na parte inferior do painel.
A caixa de diálogo Nova Regra CSS se abre.
6. Selecione um dos seguintes tipos de estilo: Figura 25 Painel Estilos CSS
• Classe (Pode se Aplicar a Qualquer elemento HTML).

Faça seu próprio tag HTML nomeando um novo estilo e
definindo sua formatação.
o No menu pop-up Tipo de Seletor, selecione Classe.
Nota: nomes de Classe normalmente começam com um
ponto e não contêm espaços ou caracteres especia is.
Exemplo: .realce (Figura 26).
• Tag (Redefine um Elemento HTML). Altere o formato
padrão de qualquer tag em um documento. Figura 26 Crie seu próprio tag HTML
o No menu pop-up Tipo de Seletor, selecione Tag. (Classe)

de tag redefinir (por exemplo, tag H1, Corpo, ou
Tabela) (Figura 27).
Figura 27 Altere um tag existente

• ID (Se Aplica a Somente Um Elemento HTML).

o No menu pop-up Tipo de Seletor, selecione ID.
• Composição (Baseada em Sua Seleção).
o No menu pop-up Tipo de Seletor, selecione
Composição.
de controle a aplicar ao texto vinculado (Figura 28).
- Link controla o estado normal do link. Figura 28 Criação de um estilo Composição
A cor padrão é azul.
- Visitado controla o formato do link após o
visitante ter clicado nele. A cor padrão é roxo.
- Hover controla o formato do link quando o mouse
é movimentado sobre o link. A cor padrão é
vermelho.
- Ativo controla o formato do link enquanto está
sendo clicado. A cor padrão é vermelho.
8. No menu pop-up Definição de Regra, selecione Novo
Arquivo de Folha de Estilos.
9. Clique em OK. de Folha de Estilos Como
10. Nomeie e salve a folha de estilos em sua pasta raiz local.
11. Certifique-se de que a Raiz do Site está selecionada na
caixa Relativo A.
12. Clique em Salvar.
Folha de estilo
13. Use a caixa de diálogo Definição de Estilos CSS para
definir os formatos do novo estilo.
14. Clique em OK.
A nova folha de estilos externa é automaticamente
anexada ao documento aberto e listada no painel Estilos
CSS (Figura 30).
Figura 30 Nova folha de estilos externa

Edição de estilos
1. Para visualizar as regras de uma folha de estilos, clique
no símbolo de adição (+) ao lado da folha de estilos que
deseja editar no painel Estilos CSS.
O Dreamweaver exibe as regras da folha de estilos.
2. Selecione a regra que deseja editar.
3. Na parte inferior do painel Estilos CSS, clique no botão Editar Regra
Editar Regra (Figura 31).
A caixa de diálogo Definição de Estilos CSS do estilo
selecionado se abre (Figura 32).
4. Faça as mudanças de formatação de regra na caixa de
diálogo Definição de Regra CSS. Depois clique em OK.
As mudanças são aplicadas imediatamente. Como você
está editando uma folha de estilos externa, as mesmas
alterações são aplicadas a quaisquer outros documentos
vinculados a esta folha de estilos.

Estilos CSS

Criação e modificação de texto no Flash

Para criar textos, você pode usar a ferramenta Texto do Adobe Flash CS4 ou você pode copiar e colar texto
de outras origens. Depois de criar o texto, você usa o inspetor de Propriedades para modificar atributos do
texto. Existem três tipos de texto que você pode especificar no inspetor de Propriedades: Estático, Dinâmico
e Entrada. O tipo padrão de texto é Estático. O texto estático é utilizado quando o texto não vai se alterar,
como em um botão ou nos rótulos de um formulário. Texto dinâmico é usado para textos que vão mudar
enquanto o filme é reproduzido, como textos buscados em bancos de dados externos em resposta a pedidos
do usuário. Texto editável é usado para pedir entrada do usuário, tais como um nome de usuário e senha –
o texto editável é semelhante a um campo de formulário.
Criação de texto
1. Inicie o Flash e abra um novo documento Flash.
Menu
2. Na Linha do Tempo, clique duas vezes em uma Ferramenta
camada, dê a ela um nome, e pressione Enter Texto
A nomeação de camadas ajuda a manter a Linha
do Tempo organizada.
3. No painel Ferramentas, selecione a ferramenta
Texto (Figura 1).
4. No inspetor de Propriedades, certifique-se de
que Texto estático está marcado no menu
Ferramenta Texto (Figura 2).
Ferramenta Texto
Figura 2 Inspetor de Propriedades de ferramenta

Figura 1 Ferramenta Texto Texto

5. Movimente o ponteiro sobre o Palco. O

ponteiro muda para uma cruz com a letra “T”
Ponto de inserção Alça arredondada
anexada a ele.
6. Para criar um campo de texto de largura
expansível, clique no Palco.
O campo de texto contém um ponto de inserção Figura 3 Campo de texto estático expansível de
piscante. É aqui que o texto vai aparecer à uma linha
medida que você o digita. A alça arredondada
inicia que o campo de texto é um campo de texto
estático expansível de uma linha (Figura 3). Ponto de inserção Alça quadrada
7. Digite o texto.
O campo de texto se expande à medida que
você digita.
Figura 4 Campo de texto estático de largura fixa
8. Clique para fora do texto para desmarcá-lo.
9. Para criar um campo de texto de largura fixa,
arraste aproximadamente três centímetros no
Palco.
A campo de texto se cria. Este campo de texto
tem uma alça quadrada no canto superior
direito (Figura 4). A alça quadrada incida que
o campo de texto é um campo de texto estático
de largura fixa.
10. Digite o texto.
O texto que você digitar passa para uma nova
linha quando alcança o canto direito do campo
de texto.
11. Arraste a alça quadrada para a direita até o texto
ocupar uma única linha.
Nota: Clicando duas vezes na alça quadrada
alça quadrada transformá-la em uma alça
arredondada e o campo de texto em um campo
de texto estático expansível de uma linha.
12. Clique para fora do texto para desmarcá-lo.

Edição de texto
Use o inspetor de Propriedades para modificar atributos de texto como a fonte, o tamanho da fonte, a cor do
preenchimento, o alinhamento e o espaçamento.
13. Use a ferramenta Texto para selecionar o texto.

O texto é cercado pelo campo de texto
(Figura 5). Figura 5 Texto selecionado
14. Use o inspetor de Propriedades para aplicar Nome da

atributos de texto (Figura 6). Ocorrência
• Tipo de Texto Tipo de Texto

o Estático: Texto que não se altera, como
botões, rótulos de formulários e dicas de
navegação.
Este é o tipo padrão de texto.
o Dinâmico: Informações que podem ser
atualizadas - por exemplo, um painel de texto
exibindo notícias atuais geradas a partir de
um arquivo ou banco de dados externo.
o Editável: Texto digitado por um visitante do
Posição de
site, como informações pessoais acres- Caracteres
centadas a um formulário.
Mostrar Borda
• Nome de ocorrência (somente texto dinâmico ao redor do
e editável): Designe um nome de ocorrência Texto
específico a um campo de texto. Isto é muito

útil quando você deseja controlar seus campos Renderizar
Texto como
de texto com ActionScript. HTML
• X e Y: Controle a posição X e Y do campo de
texto em relação ao Palco, onde 0,0 representa
Selecionável
o canto superior esquerdo do Palco.
• W (largura) e H (altura): Controle a largura e
altura do campo de texto.
• Família: Selecione uma família de fontes para
aplicar ao texto.
• Estilo: Dê maior ênfase ao texto, usando negrito
ou itálico.
• Tamanho: Ajuste o tamanho do texto.
• Cor: Defina a cor que preenche cada letra do
texto.
• Kerning automático: Controle o espaço entre
Figura 6 Inspetor de Propriedades Ferramenta de
os pares de caracteres.
Texto

• Suavização de borda: Suavização de borda é Esta é a configuração padrão.

atenuação das bordas do texto para fazê-lo mais
legível. o Sobrescrito: Posicione os caracteres de
texto acima da linha de base, como em
o Use Fontes de dispositivo: Permita que o expoentes.
documento Flash publicado selecione uma
fonte do sistema do visitante que o Subscrito: Posicione os caracteres de texto
corresponda o máximo possível a fonte que abaixo da linha de base.
você selecionou quando criou o documento.
• Incorporação de Caracteres (somente texto
o Texto Bitmap (Sem Suavização de borda): dinâmico e editável): Controle os conjuntos
Útil para exibir tamanho pequeno de fonte. de caracteres incluídos em seu documento
Fontes bitmap fontes não contém contornos, Flash publicado. Fontes incorporadas
o que ajuda a manter o tamanho do arquivo aumentam o tamanho de arquivo do
de um documento Flash publicado o menor documento publicado.
possível.
• Formato: Alinhe parágrafos à esquerda, ao
o Suavização de borda para Animação: centro, à direita, ou justificados.
Suavização especial de bordas para textos
• Espaçamento: Permite que você defina o recuo
animados.
e o espaçamento entre linhas.
o Suavização de borda para Legibilidade:
• Margens: Permite que você defina as margens
Suavização especial de bordas para textos
direita e esquerda.
que serão somente lidos.
o Suavização de borda personalizada: • Comportamento (somente texto dinâmico

Modifique a espessura e definição para e editável): Determine se o campo de
controlar o efeito suavização de bordas em texto dinâmico ou editável é configurado
seu texto. para ter textos em uma linha única ou em
múltiplas linhas.
• Selecionável (somente texto estático e
dinâmico): Permita que os visitantes selecionem • Orientação (somente texto estático): Controle
e copiem o texto em campos de texto. o posicionamento vertical ou horizontal do texto.
• Renderizar Texto como HTML (somente texto • Link (somente texto estático e dinâmico):
dinâmico e editável): Mantenha a formatação Associe um endereço de site a um texto.
rich-text do texto, incluindo os tags de HTML
• Destino: Controle se o URL se abre em uma
associados à formatação.
nova janela ou em uma seção específica de uma
• Mostrar Borda ao redor do Texto (somente página.
texto dinâmico e editável): Acione ou Desative
• Variável: Determine uma variável a um campo
a borda do campo de texto.
de texto para usar quando estiver escrevendo
• Posição dos Caracteres (somente texto scripts.
estático):
• Filtros: Acrescente a textos filtros como sombras
o Normal: Posicione os caracteres de texto projetadas e brilhos, e modifique as propriedades
na linha de base. do filtro.

Copie e cole texto

1. Inicie o Flash e abra um novo documento Flash.
2. Abra um arquivo externo ao Flash que contenha

o texto que deseja copiar.
3. Selecione o texto e copie para a área de

transferência.
4. No Flash, crie um campo de texto no Palco.

Figura 7 Caixa de diálogo Colar Especial
5. Selecione Editar > Colar Especial.
A caixa de diálogo Colar Especial se abre
(Figura 7).
6. Selecione Texto (ASCII).
7. Clique em OK.
O texto é colado no campo de texto que você
criou. Agora você pode formatar o texto usando
o inspetor de Propriedades.

Como criar efeitos visuais

Com os filtros do Adobe Flash CS4 Professional (efeitos gráficos), você pode acrescentar efeitos visuais a
textos, botões e clipes de filme. Você pode alterar textos, formas e símbolos de muitas maneiras ao usar
filtros. Esta apostila ilustra como aplicar efeitos específicos a formas, como editar efeitos e como remover
efeitos. Você pode aplicar um quantos efeitos desejar com esta técnica.
Para criar um efeito visual:
1. Abra um Documento preexistente Flash ou crie

e salve um novo Documento Flash.
2. No Painel de ferramentas, selecione a

Ferramenta Retângulo (Figura 1).
3. Na ferramenta Retângulo, especifique cantos

arredondados clicando no modificador de
retângulo arredondado no inspetor de
Propriedades e digitando um valor de raio de
canto, tal como 25 (Figura 2).
Um valor zero (0) cria cantos quadrados.
4. Para criar uma forma retangular, arraste a Figura 1 Opções de ferramentas de forma
ferramenta Retângulo no Palco.
Com a ferramenta Retângulo, arraste

pressionando a tecla Shift para manter a forma
quadrada. (Da mesma maneira, você pode
desenhar círculos perfeitos arrastando a
ferramenta oval e pressionando a tecla Shift.
5. Você vai precisar converter a forma em símbolo.

Selecione o retângulo ou vários elementos no
Palco. Execute uma das seguintes opções: Modificador de
Retângulo
• Selecione Modificar > Converter em Arredondado
Símbolo.
• Arraste a seleção para o painel Biblioteca.

clique pressionando a tecla Control (Mac
OS) e selecione Converter em Símbolo no
menu de contexto. Figura 2 Defina as opções de retângulo


digite o nome do símbolo e selecione o tipo Clipe
de filme (Figura 3).
Note: Tipos de símbolo incluem Clipe de filme,
Botão e Gráfico, e oferecem opções diferentes
de filtro.
• Use símbolos gráficos para imagens Figura 3 Caixa de diálogo Converter em Símbolo
estáticas e para criar animações reutilizáveis
que estejam vinculadas à Linha do Tempo
principal.
• Use símbolos de botão para criar botões
interativos que reajam a cliques de mouse,
menus de sobreposição ou outras ações.
• Use símbolos de clipes de filme para criar
animações reutilizáveis.
7. Clique em OK.
O Flash adiciona o símbolo à biblioteca e alterna
para o modo de edição do símbolo. No modo de
edição de símbolo, o nome do símbolo aparece
acima do canto superior esquerdo do Palco e
uma cruz indica o ponto de registro do símbolo.
8. Selecione o objeto retangular ao qual aplicar o
filtro.
9. Na seção Filtros do inspetor de Propriedades, Figura 4 Menu Adicionar Filtro no inspetor de
clique no botão Adicionar Filtro (+) e selecione Propriedades
um filtro, tal como o filtro Bisel (Figura 4).
O filtro é aplicado ao objeto (Figura 5).
Figura 5 filtro Bisel aplicado a retângulo
2 Como criar efeitos visuais © Adobe Systems Incorporated

10. Experimente configurações diferentes de filtro (Figura 6) até acertar a aparência que desejar
(Figura 7).
Figura 6 Configurações de filtro Bisel Figura 7 Filtro Bisel modificado aplicado a retângulo
Remoção ou desativação de efeitos visuais

Você pode remover ou desativar um efeito após sua aplicação.
Para remover ou desabilitar um efeito:
1. Selecione o objeto do qual deseja remover o filtro.

2. Clique no ícone excluir na seção inferior do
inspetor de Propriedades de Filtro (Figura 8).
O efeito é removido.
Você pode também ativar ou desativar um filtro
aplicado a um objeto clicando no ícone Ativar
ou Desativar Filtro.
Ativar ou Excluir
Desativar Filtro
Figura 8 Ative/Desative ou exclua um filtro

Como usar botões transparentes ou invisíveis

Lembre-se que o estado Ativo de um botão não é visível. Se você criar um botão sem objetos de imagem nos estados
Para Cima, Sobre ou Para Baixo, o botão será transparente. No entanto, você pode controlar como um botão
transparente irá reagir quando um visitante clicar dentro da área ativa. Você pode usar botões transparentes no
Adobe Flash CS4 da mesma forma que usa áreas ativas em um mapa de imagem no Adobe Dreamweaver CS4.
Criar um botão
1. Inicie o Flash e crie um novo arquivo Flash
(ActionScript 3.0).
2. Renomeie a camada 1 como Elementos Gráficos.
3. Insira uma nova camada e a nomeie como Botão.
4. Na camada Elementos Gráficos, acrescente
uma foto ou um elemento gráfico ao Palco.
O documento ilustrado na Figura 1 contém uma
foto de São Francisco. Você pode colocar
botões transparentes sobre diferentes áreas de
uma foto. Os visitantes podem então clicar em Figura 1 Fotografia
diferentes partes da foto para navegar por
diferentes sujeitos na foto.
Neste exercício, você criará um botão
Forma usada para criar o botão
transparente para tornar um morro (ao fundo)
em uma área clicável vinculada a mais
informações.
5. Selecione a camada.
6. Selecione a ferramenta Retângulo.
Escolha qualquer cor para o preenchimento.
7. Configure a cor do Traçado para Sem Cor.
8. Desenhe um retângulo sobre uma área na
fotografia ou elemento de imagem no qual você
quer acrescentar um botão. (Figura 2).
9. Selecione a ferramenta Seleção.
10. Clique no retângulo para selecioná-lo.
11. Selecione Modificar > Converter em Símbolo.
Figura 2 Retângulo desenhado sobre o morro
12. Na caixa de diálogo Converter em Símbolo, digite
um nome para o botão na caixa de texto Nome.
13. Selecione o Tipo como Botão.
14. Clique em OK.
O botão é acrescentado à biblioteca e uma
ocorrência é acrescentada sobre a foto no Palco.
© Adobe Systems Incorporated Como usar botões transparentes ou invisíveis 1

Tornar o botão transparente

1. No Palco, clique duas vezes na ocorrência do
botão.
O botão se abre em modo de edição de símbolo. Figura 3 Apenas o quadro Ativo do Botão tem
Na Linha do Tempo o quadro Para Cima está conteúdo
selecionado.
2. Acrescente um quadro-chave ao quadro Ativo.
3. Selecione o quadro Para Cima.
4. Pressione a tecla Delete.
O retângulo colorido representando o botão no
Palco o quadro Para Cima é excluído. O quadro
Ativo deve ser o único quadro contendo um
retângulo colorido no Palco. Os quadros Para
Cima, Sobre e para baixo estão vazios, o que
torna o botão invisível. (Figura 3).
5. Na barra de edição, clique na Cena 1.
O botão agora é transparente. Apesar de você
ainda poder vê-lo no ambiente de autoração Figura 4 Botão transparente sobre a fotografia
(Figura 4), o botão não será visível quando o
filme for reproduzido.
Neste exemplo, o botão representa os morros.
Você pode agora vincular este botão com a
informação sobre esta parte da foto.
6. Salve o arquivo.
2 Como usar botões transparentes ou invisíveis © Adobe Systems Incorporated

Acrescente ActionScript para ativar um site Nome da Ocorrência
1. Selecione a ocorrência do botão que você quer

usar para ativar uma página da web. Utilize a
caixa de texto no inspetor de propriedades para
dar ao botão um nome de ocorrência único
(Figura 5).
Neste exemplo, existe uma ocorrência do botão
invisible_btn no Palco (Figura 4). Esta
ocorrência é chamada hills_btn (Figura 5) e está Figura 5 Inspetor de Propriedades Botão
colocada sobre os morros na fotografia.
2. Na Linha do Tempo principal do seu filme, crie
uma nova camada chamada Ações.
3. Crie um quadro-chave na camada Ações que
corresponda ao quadro-Chave onde seu botão
aparece primeiro no Palco. Selecione este
quadro-chave na camada Ações.
Nota: Se o seu botão não aparecer neste quadro,
o Flash vai gerar uma mensagem de erro quando
você publicar o filme, porque o ActionScript que
você incluiu neste quadro se refere a um objeto
que ainda não está no Palco.
4. Selecione Janela > Ações para exibição do painel
Ações.
Figura 6 Método AddEventListener no painel
Ações
esquerdo do painel, expanda Flash.Events,
EventDispatcher e Métodos.
Clique duas vezes em AddEventListener.
O ouvinte AddEvent é adicionado à janela Script
do painel (Figura 6).
8. Clique na caixa Objeto da área de parâmetros
painel Ações.
estará ativo.
9. Clique o botão Inserir Caminho de Destino.
se abre (Figura 7).
10. Selecione a opção Relativo, selecione o nome Figura 7 Caixa de diálogo Inserir Caminho de
da ocorrência do seu botão e clique em OK. Destino

11. Na caixa de ferramentas Ações no canto

esquerdo do painel, expanda Flash.Events,
MouseEvent e Propriedades.
Localize Propriedade CLICK.
Figura 8 Propriedade CLICK no painel Ações
AddEventListener() para exibir os parâmetros
para este método. Depois clique na caixa Tipo
na área de parâmetros.
vezes na propriedade CLICK.
A Assistência de Script crescente a
Parâmetros de função
propriedades em seu código como
MouseEvent.CLICK (Figura 8).
14. Na caixa Ouvinte na área de parâmetros, digite
um nome para a função que deve ser executada
quando um usuário clicar o botão. Você pode
usar o nome que quiser, mas certifique-se que
o nome da função é único e que não contenha
espaços. (exemplo: open URL)
O nome da função aparece no painel de script
à medida que você digita. Você nomeou a
Figura 9 Parâmetros de função
função, mas ainda não a criou.
15. Na caixa de ferramentas Ações, expanda
Elementos de Linguagem, Instruções,
Palavras-chave & Diretivas e Palavra-Chave
de definição.
16. Clique duas vezes em Function na caixa de
ferramentas Ações.
O código para criar a função aparece no painel
Script.
17. Na área de parâmetros do painel Script, digite
o nome de sua função na caixa Nome.
Nota: O nome da função deve ser digitado
exatamente da forma que você o digitou na
função AddEventListener. Nomes de funções
diferencia maiúsculas de minúsculas.
18. Na área de parâmetros do painel Script, digite
event: MouseEvent na caixa Parâmetros
(Figura 9).
Nesta caixa, você está nomeando uma
variável (evento) indicando que tipo de variável
ela é (MouseEvent).
4 Como usar botões transparentes ou invisíveis © Adobe Systems Incorporated


esquerdo do painel, expanda Flash.Net e
Métodos.
20. Selecione a linha da função no painel de Script

e clique duas vezes no método NavigateToURL
na caixa de ferramentas Ações.
O método é adicionado à função (Figura 10).
21. Na caixa Chamada, digite: Figura 10 Método NavigateToURL no painel

new URLRequest (“http://www.adobe.com”) Ações
(Figura 11).
Nota: você pode substituir www.adobe.com
com o endereço de web de sua escolho.
22. Recolha o painel Ações.

23. Salve o documento.
Figura 11 URL digitado na caixa Chamada
o botão.
25. Clique na área do elemento gráfico no qual

você criou o botão invisível.
Uma janela de navegador se abre e navega
para o site que você definiu para o botão.
Para obter mais informações sobre o ActionScript,

veja Programação ActionScript 3.0, “Sobre o
ActionScript” (no Flash, selecione Ajuda > Ajuda
Flash).

Como usar InContext Editing

Adobe InContext Editing é uma serviço on-line que proporciona recursos de edição para conteúdo simples
dentro de um navegador na web.
Utilizando Dreamweaver CS4, você acrescenta regiões de conteúdo editáveis para publicar em seu site.
Depois de registrar seu site com o serviço Adobe InContext Editing, o site pode ser editado e atualizado
utilizando um navegador na web.
Isto permite o desenvolvimento colaborativo do site por membros da equipe que não tenham acesso ao
Dreamweaver.
Pré-requisitos para utilizar o InContext Editing

• Instale o Dreamweaver CS4.
• Defina um site Dreamweaver, com um servidor (de preferência um servidor de teste) que:
o Tenha um servidor web instalado (recomenda-se o Apache).
o Tenha um servidor FTP instalado: Seu servidor deve permitir acesso FTP (ou FTPS ou SFTP)
o Seja publicamente acessível: O servidor que vai abrigar o site não deve estar protegido por
Firewall.
• Instale um dos navegadores compatíveis:
o Internet Explorer 6
o Internet Explorer 7
o Safari 3
o Firefox 3 Beta
• Instale Flash (versão 9.0.124 ou mais moderna) e Javascript e habilite-os em seu navegador.
Características do Dreamweaver InContext Editing

Antes que outras pessoas de sua equipe possam utilizar o InContext Editing para modificar páginas da web
em um navegador, você tem que definir que partes da página podem ser editadas, carregar estas páginas em
um servidor e registrar seu site no serviço InContext Editing.
Três tipos de conteúdo podem ser editados usando o InContext Editing.
• Região editável: Uma região simples que o membro da equipe pode editar diretamente em um
navegador.
• Regiões repetitivas: Conteúdo que pode ser reutilizado, excluído e movido. Regiões repetitivas
podem conter regiões editáveis.
• Classe CSS editável: Estilo CSS que foi configurável como editável quando usados em regiões
editáveis. Apenas classes CSS são disponíveis para InContext Editing.
© Adobe Systems Incorporated Como usar InContext Editing 1

Criação de uma região editável em uma

página da web
2. Selecione Arquivo > Menu.
A caixa de diálogo Novo Documento aparece
(Figura 1).
3. Selecione a categoria Página em Branco. Na
coluna Tipo de Página, selecione HTML. Na
coluna Layout, selecione 2 Coluna Elástica,
Barra Lateral Esquerda, Cabeçalho e Rodapé. Figura 1 Caixa de diálogo Novo Documento
4. Clique em Criar.
Um novo documento sem título se abre, com o
layout que você escolheu.
5. Salve o documento no diretório raiz do seu site.
6. Clique na barra de menu Inserir, e selecione
InContext Editing (Figura 2).
Esta barra Inserir inclui comandos representando
os três tipos de conteúdo editável (Figura 3).
7. Realce o cabeçalho e os dois primeiros
parágrafos do Main Content (Conteúdo
Principal) (Figura 4). Figura 2 Barra de menu Inserir
Esta será a região editável da página.
Figura 3 Comandos do InContext Editing
Figura 4 Texto realçado
2 Como usar InContext Editing © Adobe Systems Incorporated

8. Na barra inserir, clique em Criar Região

Editável.
A caixa de diálogo Criar Região Editável aparece
(Figura 5).
9. Selecione a opção para delimitar a seleção atual
com uma tag div (a primeira opção) e depois
clique em OK. Figura 5 Caixa de diálogo Criar Região Editável
O texto selecionado é delimitado por uma borda
azul e as palavras Região Editável aparecem
sobre ela (Figura 6). Região Editável
O inspetor de Propriedades exibe as opções da

(Figura 7). Isto permite que você controle quais
opções outros membros de sua equipe terão à
disposição quando editarem esta página em um
navegador.
Figura 6 Região Editável
Figura 7 Região Editável

Utilizando InContext Editing em um navegador.

Antes de fazer sua página de web editável em um navegador, você precisa salvar o documento com o
conteúdo editável. Quando o fizer, os arquivos compatíveis são adicionados a uma nova pasta chamada
Includes (Inclui). Você deve carregar a página de web editável e a pasta Inclui inteira ao seu servidor para
tornar a página editável em um navegador.
1. Selecione File > Save (Arquivo > Salvar).
Se esta é a primeira vez que você salva uma

página com conteúdo InContext Editing, a caixa
de arquivos Copiar Arquivos Dependentes se
abre (Figura 8). Se você já criou páginas
editáveis, esta caixa de arquivos não aparecerá.
2. Clique em OK para acrescentar os arquivos

necessários ao diretório do seu site.
Figura 8 caixa de diálogo Copiar Arquivos
Eles serão colocados na nova pasta chamada Dependentes
Includes.
3. Publique as páginas editáveis e a pasta Includes

inteira em seu servidor FTP.
4. Abra uma janela de navegação e visualize a

página editável, usando o URL para a página
editável em seu servidor FTP (não em seu
computador local)
A página que você publicou aparece na janela

do navegador.
5. Pressione Ctrl+E (Windows) ou Command+E

Figura 9 caixa de diálogo Cadastrar do InContext
(Mac OS).
Editing
A caixa de diálogo Sign In (Faça Logon) aparece
(Figura 9). Barra de ferramentas
InContext Editing
6. Digite seu e-mail e senha, e depois clique em
Sign In.
Depois de se cadastrar, o navegador se atualiza

e a barra de ferramentas
InContext Editing aparece na parte superior da

janela do navegador (Figura 10). Figura 10 Barra de ferramentas InContext Editing

7. Na Barra de ferramentas InContext Editing, Região editável

clique em Edit (Editar).
A Região Editável agora estará ativa e
contornada por uma borda cinza.
8. Clique em qualquer lugar da região editável. As
áreas não editáveis ficam apagadas. Você agora
pode fazer alterações à região editável
(Figura 11).
9. Faça mudanças no texto editável, e depois clique
em Save (Salvar) na Barra de ferramentas
InContext Editing. Figura 11 Região editável em um navegador
Se o site não estiver registrado no serviço
InContext Editing, você será questionado se
deseja registrar o site (Figura 12). Você deverá
fazer isto antes de salvar e republicar o site.
10. Clique em Yes (Sim) para registrar o novo site.
Você será solicitado a digitar novamente a senha
de sua conta InContext Editing.
11. Digite sua senha e clique em OK. Figura 12 Solicitação para fazer logon no site
Você deve digitar as configurações de FTP do
seu site. Isto permite que o serviço InContext
Editing publique mudanças em seu servidor FTP
(Figura 13).
Obtenha essa informação do administrador de
seu site.
Figura 13 Formulário de configurações FTP

12. Digite as informações FTP de seu site e clique

em Save (Salvar).
Uma mensagem lhe informará quando sua
conexão for feita e o site for registrado
(Figura 14). Figura 14 Conexão e confirmação de registro
13. Clique em OK para fechar a mensagem.
Seu site será salvo no servidor InContext Editing,
mas as mudanças ainda não terão sido
publicadas em seu site. Edite rascunho Publique
Descarte rascunho
O botão Publish (Publicar) na barra de
ferramentas InContext Editing torna-se acessível
tão logo a versão rascunho de suas mudanças
esteja disponível para publicação (Figura 15).
Você pode continuar editando ou descartar o Figura 15 Alterações estão prontas para publicação
rascunho.
14. Clique em Publish (Publicar) na barra de
ferramentas InContext Editing.
Uma mensagem pede que você confirme o
pedido de publicação.
15. Clique em Yes (Sim).
Você editou e republicou a sua página da web a
partir de um navegador.
16. Clique em Sign Out (Sair) na barra de
ferramentas InContext Editing.
Você voltará à página padrão do navegador.
Agora você estará visualizando a página da
forma que ela aparece em seu servidor.

Convidar outras pessoas para editar o seu site

Antes de outras pessoas poderem editar suas páginas da web a partir de um navegador, elas devem criar
suas próprias contas no InContext Editing, com acesso a seu site. Para lhes dar acesso, você pode convidá-
las, usando a tela Manage Users (Gerenciar Usuários) do InContext Editing.
1. Abra uma nova janela do navegador e visite http:/

/incontextediting.adobe.com/
2. Faça logon.
3. Clique em View All Websites (Ver Todos os Figura 16 Botão View All Websites (Ver todos os
Sites)
Sites) (Figura 16).
Quaisquer sites que você tenha registrado no
InContext Editing estarão listados (Figura 17).
4. Clique em um site que deseje que outras pessoas

possam editar através de um navegador. Figura 17 Lista de sites registrados
Por padrão, a aba Manage Users (Gerenciar
Usuários) é exibida para o site selecionado
(Figura 18). Com esta aba, você pode
gerenciar suas permissões de usuário e
convidar novos usuários. Figura 18 Aba Manage Users (Gerenciar Usuários)
do site selecionado
5. Clique em Invite User (Convidar Usuário).
Você será questionado sobre quem deseja
convidar (Figura 19).
6. Digite o nome e endereço de e-mail do usuário.
7. Abra o menu pop-up Privileges (Privilégios),

selecione um nível de privilégio (Figura 20), e
clique em OK.
O convite é enviado. Figura 19 Convide um novo usuário
8. Clique em OK para fechar a mensagem de

confirmação.
O novo usuário é adicionado à lista. O convite é
listado como pendente até o usuário o aceitar.
O usuário receberá o convite por e-mail.
O usuário pode utilizar o link no e-mail para fazer
logon, aceitar o convite e começar a editar no
site colaborativo. Figura 20 Confira privilégios

DESIGNDIGITALALUNOS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

DESIGNDIGITALALUNOS

Enviado por

Direitos autorais:

Formatos disponíveis

Adobe CS4

Neste contexto, a Educational Technology Consulting Iberoamérica, consciente de sua responsabilida -

em ferramenta web da Adobe CS4.

projetos bem sucedidos.

Para saber mais sobre o programa de certificação ACA, visite os sites:

Princípios e regras dos direitos autorais

Regras dos direitos autorais

© Adobe Systems Incorporated Princípios e regras dos direitos autorais 1

2 Princípios e regras dos direitos autorais © Adobe Systems Incorporated

World Wide Web

Online video clip

© Adobe Systems Incorporated Citações na internet 1

Modelo de documento do aluno

Nome do arquivo: WYPLOGO_4c.gif

Logomarca do site do World of Physics. Copyright 2005 World Year of Physics.

© Adobe Systems Incorporated Modelo de documento do aluno 1

Nome do arquivo: pnglogo-blk-sml1.png

Logomarca PNG. Copyright 2007 Greg Roelofs

2 Modelo de documento do aluno © Adobe Systems Incorporated

© Adobe Systems Incorporated Escaneamento 1

2 Escaneamento © Adobe Systems Incorporated

Como escanear imagens sem software

2. Posicione a imagem no vidro. Certifique-se de que está alinhada no vidro.

5. O scanner faz um escaneamento de visualização.

6. Faça o escaneamento final.

Painel Otimização do Fireworks

Rotule as opções para otimização de GIF.

Rotule as opções de otimização de JPEG.

© Adobe Systems Incorporated Painel Otimização do Fireworks 1

Painel Otimizar do Fireworks

Opções para Otimização de GIF

Adicionar Cor à Excluir Cor

Selecionar Cor Encaixar nas Cores

Figura 1 Painel Otimizar GIF

© Adobe Systems Incorporated Painel Otimizar do Fireworks 1

Opções para otimização JPEG

Figura 2 Painel Otimizar JPEG

2 Painel Otimizar do Fireworks © Adobe Systems Incorporated

Como otimizar imagens GIF

Otimize uma imagem GIF

1. Abra um objeto de imagem pronto no Fireworks. Esta ferramenta é uma vantagem

© Adobe Systems Incorporated Como otimizar imagens GIF 1

Como otimizar imagens JPEG

Otimização de uma imagem JPEG

© Adobe Systems Incorporated Como otimizar imagens JPEG 1

Use uma máscara JPEG para mais otimizações (opcional)

1. Clique o botão Original para retornar para a

2 Como otimizar imagens JPEG © Adobe Systems Incorporated

Identifique as ferramentas de seleção, movimentação e transformação:

Identifique as ferramentas de modificação de imagens:

Identifique as ferramentas de desenho e escrita:

Identifique as ferramentas de objetos interativos:

Identifique as ferramentas de cor:

Identifique as ferramentas de visualização:

© Adobe Systems Incorporated Ferramentas do Fireworks 1

Painéis flutuantes e encaixados

© Adobe Systems Incorporated Painéis do Fireworks 1

Ferramentas de seleção, movimento e Ferramentas de modificação de imagem:

2 Painéis do Fireworks © Adobe Systems Incorporated

Figura 2 Inspetor de Propriedades de Texto

Figura 3 Inspetor de Propriedades de Retângulo

© Adobe Systems Incorporated Painéis do Fireworks 3

Como construir uma barra de identificação

Construa uma barra de identificação