Macromedia Flash MX e Dreamweaver MX - Manual Em Portugues

III.4 Macromedia Flash – Programa de Animação Gráfica Web . . . . . . . . . . . . . . . . . . 2

III.4.1 Apresentação do programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

III.4.2 Projectos multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

III.4.3 Ferramentas de desenho e pintura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

III.4.4 Som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

III.4.5 Botões . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

III.4.6 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

III.4.7 Animação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

III.4.8 Publicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

III.5 Dreamweaver – Programa de Edição de Páginas Web . . . . . . . . . . . . . . . . . . . . . . 18

III.5.1 Apresentação do programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

III.5.2 Criação de documentos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

III.5.3 Inserção e formatação de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

III.5.4 Hiperligações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

III.5.5 Inserção de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

III.5.6 Multimédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

III.5.7 Camadas dinâmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

III.5.8 Formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

III.5.9 Publicação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Questões . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Soluções . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Unidade III2

III.4 Macromedia Flash – Programa de Animação Gráfica Web

III.4.1 Apresentação do programa

O programa Macromedia Flash é um software vocacionado para a anima-ção vectorial para a Web. Permite animações que ultrapassam o simples GIFanimado, atingindo graus elevados de interactividade e associando texto,áudio, vídeo, imagem, etc.

Através de código (ActionScript) permite um nível avançado de controloda informação e de integração com outras aplicações e linguagens de progra-mação, nomeadamente, ASP, consultas de bases de dados, etc.

Atendendo a que os ficheiros que produz têm tamanho reduzido, quandocomparados com outros ficheiros de informação gráfica, e que podem servisualizados nas plataformas de sistemas operativos mais comuns, como porexemplo, Windows e Linux, o Flash tem ganho preponderância nos últimostempos, sendo uma referência para trabalhos multimédia.

O Macromedia Flash apresenta as seguintes vantagens:

• formato de exportação comprimido e aberto (SWF);

• é compatível com a maioria das plataformas e linguagens da Web;

• bom controlo sobre a imagem;

• permite som, vídeo, imagem e animação;

• possibilita um elevado nível de interactividade.

O Macromedia Flash apresenta os seguintes inconvenientes:

• conteúdos dificilmente indexados em todos os motores de busca;

• pode levar a um excesso de animações, em detrimento dos objectivosreais;

• pode diminuir a usabilidade;

• tendencialmente complexo;

• obriga ao uso de plug-ins.

Criação de Páginas Web 3

O ambiente de trabalho do Macromedia Flash é apresentado na Fig. III.25.

Fig. III.25 Ambiente detrabalho do Flash.

1 2

3

45

6

78

1. Camadas (layers) – níveis de empilhamento de objectos.

2. Linha de tempo (timeline) – mostra graficamente a permanência do objecto na escala temporal.

3. Controlo de visualização – aumenta ou diminui a área do palco.

4. Caixa de ferramentas – ferramentas comuns a outras aplicações.

5. Área do palco – local onde os objectos ganham visibilidade.

6. Conjunto de painéis – vários painéis de trabalho.

7. Painel de acções – área de inserção de código ActionScript.

8. Caixa / Inspector de propriedades (Property Inspector, P.I.) – menu de contexto de acordo com aferramenta seleccionada.

O Macromedia Flash carateriza-se pela disponibilização de uma linha detempo (timeline) e pela utilização de camadas. Estas características tambémpodem ser encontradas no Dreamweaver, que é uma aplicação destinada àedição e publicação de sites produzida pela mesma empresa: no entanto, oFlash permite a animação de praticamente todo o tipo de recursos visuais,enquanto o Dreamweaver está limitado a imagens e layers.

As camadas são, por analogia, uma espécie de acetatos transparentes quesuportam um objecto em cada folha.

Nota: Cada camada poderá ter mais de um objecto mas, em termos de animação, épreferível guardar apenas um objecto por camada.

Unidade III4

Na mesma linha da camada existem os quadros (assinalados, na Fig. III.26,com o número 4), que correspondem, em sentido figurativo, aos fotogramasde um filme.

Se existirem quadros, o objecto dessa camada vai ser visualizado; casocontrário, o objecto não aparece.

Fig. III.26 Linha de tempo.

1. Cabeça de leitura2. Camada oculta3. Camada activa

4. Quadros ou células (frames)5. Camada bloqueada

Nota: Ver as cinco primeiras lições apresentadas na Ajuda do Flash, para consolidarestas noções.

É possível observar, na parte inferior da Fig. III.26, a expressão 12.0 qps(quadros por segundo). Esta taxa de quadros, ajustável, representa a veloci-dade com que os quadros são exibidos (frame rate): uma velocidade altaimplica a perda de nitidez de pormenores da animação; pelo contrário, umavelocidade baixa pode criar uma aparência de arranques e paragens.

Note-se que uma velocidade alta pode representar ficheiros maiores, porisso mais demorados na transferência.

2

1

43

5

t a r e f a1. Abrir o programa Macromedia Flash. Criar um novo documento com o comando Arquivo

novo. Guardar o documento com o nome tarefaFlash.fla.

Nota: A extensão .fla é preenchida automaticamente pelo programa.

2. Clicar sobre o palco e verificar o nome do ficheiro no P.I.

3. Modificar a área do palco para 320 x 240 através do P.I. do palco.

4. Colorir o palco com uma cor a gosto.

5. Diminuir a taxa de quadros para 10 qps.

Nota: As tarefas 2 a 5 devem ser confirmadas no P.I. do palco.

6. Criar uma imagem parecida com a apresentada ao lado.

7. Fazer um arrastamento da imagem para o centro.

8. Usar a lupa da caixa de ferramentas para aumentar.

9. Utilizar a tecla Alt alternadamente com a lupa.

10. Arrastar o palco com a ferramenta de visualização que tem uma mão desenhada.

11. Criar uma nova camada.

12. Com um duplo clique sobre o nome da camada, alterar o nome da camada1 para «10tic» eo da camada2 para «10tic cópia».

13. Ocultar as camadas.

14. Abrir a biblioteca através do menu JANELA.

15. Tornar as camadas ocultas novamente visíveis.

Ver as lições 6 e seguintes do menu AJUDA e investigar as bibliotecas comuns.

Fazer mais animações em Flash, visando atingir objectivos concretos de uma página Webque se pretenda criar.

T III.6

III.11, III.12


Unidade III6

III.4.2 Projectos multimédia

O programa Macromedia Flash trabalha com os principais elementos mul-timédia: texto, imagem, som, vídeo e animação. Até à versão Mx, o Flash nãotem comandos para 3D, embora permita carregar ficheiros finais (.swf) comessas características.

III.4.3 Ferramentas de desenho e pintura

A Fig. III.27 mostra uma descrição das ferramentas de desenho e pinturamais importantes. As ferramentas cujas legendas têm um asterisco (*) apre-sentam alguma especificidade própria do Flash.

1. Seta (V) – usada para seleccionar e mover objectos, assim como para remodelar linhas e formas.

2. Linha (N).

3. Caneta (P) – para desenhar linhas rectas ou curvas com grande precisão.

4. Oval (O).

5. Lápis (Y) – desenha linhas (com a tecla Shift premida) e formas livres.

6. Transformação livre (Q).

7. * Nanquim (S) (Ink Bottle) – permite colorir um contorno.

8. Conta-gotas (I) – selecciona e activa a cor sobre a qual se clicou.

9. Mão (H) – permite arrastar a visualização do palco.

10. Cor do traço com respectiva cor activa.

11. Cor de preenchimento com opção gradiente e respectiva cor activa.

12. Cor branca e preta, modifica a cor do traço para preto e do preenchimento para branco.

13. Opções da ferramenta seleccionada.

14. * Sub-seleccionar (A) (Outline Selector) – permite mover e editar pontos criados com a Caneta eajustar curvas de Bézier (usar com cuidado).

15. Laço (L).

16. Texto (T).

17. Rectângulo (R) – com a tecla Shift pressionada, permite desenhar um quadrado.

18. Pincel (B).

19. * Transformar preenchimento (F) – permite alterar o gradiente na cor de preenchimento.

20. Balde de tinta (K).

21. Borracha (E).

22. Zoom (M, Z).

23. Troca a cor do traço pela cor do preenchimento.

Fig. III.27 Ferramentas dedesenho e pintura.

Nota: A letra associada à ferramenta corresponde à primeira letra do respectivo sig-nificado em língua inglesa, com excepção das repetições. Esta letra dá acesso à ferra-menta a partir do teclado: por exemplo, Alt + P – Caneta, Pen.

1 14

2 15

3 16

4 17

5 18

6 19

7 20

8 21

9 22

10

11

12 23

13


III.4.4 Som

No Flash, a inserção de som passa pela impor-tação do ficheiro para a biblioteca e depois porum arrastamento para o palco. Normalmente dei-xa-se o som numa camada vazia (Fig. III.28).

Na tabela seguinte estão resumidos os principais comandos dos menus doprograma Macromedia Flash.

ARQUIVO

Principais comandosMenu

• manusear ficheiros: abrir, guardar fechar, criar modelos; • importar áudio, vídeo e imagens e exportar;• configurar, visualizar publicação e publicar;• visualizar, configurar página e imprimir.

• recortar, copiar e colar;• desfazer acção e refazer acção;• edição sobre o quadro;• edição de símbolos;• mapear fontes, atalhos e configurações.

• trabalhar com o zoom;• ver réguas, grades e guias;• activar linha de tempo e área de trabalho.

• criar e remover cenas;• converter ou inserir símbolo;• criar camada ou pasta;• inserir e limpar quadros (chave em branco ou não);• criar interpolação de movimento.

• alterar camada, cena ou documento;• trocar ou editar símbolo;• suavizar, acertar, optimizar, sub-menu forma;• transformar: girar, inclinar, inverter, livremente, etc.

• alinhamentos, fontes, tamanhos, estilos.

• o avanço, paragem e retrocesso do filme.

• activar, ou não, os vários painéis de ferramentas;• acesso às bibliotecas.

• acesso à Ajuda, lições, tutoriais e exemplos.

EDITAR

EXIBIR

INSERIR

MODIFICAR

TEXTO

CONTROLAR

JANELA

AJUDA

III.4.4

Nota: A abertura da biblioteca faz-se através do menuJANELA ou da tecla Função (F11).

Fig. III.28 Inserção desom.

Unidade III8

III.4.5 Botões

O Macromedia Flash permite vários tipos de interactividade. Uma daspossibilidades é usar botões. No Flash, o botão pode ter quatro estados(Fig. III.29):

• Para cima – quando não está a sofrer nenhuma influência do rato outeclado;

• Sobre – quando o apontador do rato está sobre o botão;• Para baixo – quando está pressionado pelo apontador do rato;• Área – zona em que o botão é sensível ao clique.

Fig. III.29 Os quatro esta-dos que um botão podeter no Flash: Para cima(A), Sobre (B), Para baixo(C) e Área (D).

É possível associar código ActionScript às células da linha detempo e aos objectos do palco. Os botões não são excepção,como se vê na Fig. III.30.

A grande força do Flash passa pela utilização de códigoActionScript.

A B

C D

Fig. III.30 Código Action-Script associado a umbotão.

t a r e f a1. Abrir o programa Macromedia Flash. Criar um novo documento. Guardar o documento com

o nome tarefaFlash2.fla.

2. Digitar o texto seguinte, atendendo a que cada parágrafo deve ter a sua caixa de texto pró-pria e uma camada separada:

A energia nuclear tem os seus perigos. Obtém-se a partir da fissão nuclear, que, para além deoriginar energia útil para o Homem, conduz também à produção de materiais perigosos. Poreste motivo, alguns países, prudentemente, estão a encerrar as suas centrais nucleares.

A fusão nuclear (processo inverso da fissão) não produz materiais perigosos, mas está ain-da distante a possibilidade de ser usada para a produção de energia em grande escala.

3. O tipo de texto deverá ser estático.

4. Activar o comando Alinhar (Ctrl + K) do menu JANELA.

5. Carregar no botão No palco.

6. Seleccionar as caixas de texto e alinhar à esquerda, horizontalmente.

7. Formatar a fonte para Trebuchet MS, tamanho 25, centrada.

8. Inserir um quadro na célula 60 de todas as camadas.

9. Arrastar a célula 1 da segunda camada para o quadro 10. Na camada 3, arrastar a célula 1para a célula 20 e assim sucessivamente.

10. Verificar, arrastando a cabeça de leitura, o aparecimento dos blocos de texto da partesuperior para a parte inferior.

11. No menu CONTROLAR, activar o comando Reproduzir (Enter). Testar a cena pressionando Ctrl + Enter.

Explorar a ferramenta Pincel nos seus diferentes modos de pintura. Completar com outrosrecursos (textos e figuras animadas) o que poderá vir a ser uma página Web sobre energianuclear, usando o mais possível o Macromedia Flash.

T III.7

III.13, III.14


Unidade III10

III.4.6 Imagens

Existem, essencialmente, dois tipos de imagens:

1. Mapas de bits (raster images) – imagens criadas por uma grelha decores, conhecida por pixels; editam-se pontos (Fig. III.31).

Fig. III.31 Imagem mapade bits e respectiva am-pliação parcial.

Fig. III.32 Imagem vec-torial e respectiva am-pliação parcial.

O Flash importa um número extenso de formatos de imagens, com asextensões .png, .bmp, .emf, .gif, .jpg, .wmf, .pct, .psd, .pntg, .tga, .tif, .cgi,etc. (Fig. III.33 A).

A importação destes ficheiros, assim como os ficheiros de som e vídeo, éfeita em ARQUIVO – Importar ou ARQUIVO – Importar para a biblioteca(Fig. III.33 B).

Nota: Como leitura complementar, colocar a palavra-chave «vectoriais» no menuAJUDA – Usando o Flash (F1) e seleccionar o tópico «Sobre gráficos bitmap evectoriais».

2. Imagens vectoriais – criadas por linhas e curvas, geradas matematica-mente, independentes da resolução; podem ser redimensionadas semperder a qualidade; editam-se formas (Fig. III.32).


Fig. III.33 Formatos deimportação (A) e impor-tação para a biblioteca(B).

A B

Depois de colocados na biblioteca, os objectos podem ser arrastados parao palco. Este processo chama-se instanciamento.

Pode, por exemplo, criar-se uma estrela e depois puxar este símbolo dabiblioteca para originar um céu estrelado. O Flash considera apenas um sím-bolo, mesmo que algumas estrelas sejam modificadas no palco quanto à cor,forma, tamanho, etc.

Esta reutilização de símbolos é responsável pelo relativamente pequenopeso das animações em Flash.

Nota: Como leitura complementar, colocar a palavra-chave «instância» no menuAJUDA – Usando o Flash (F1) e seleccionar o tópico «Símbolos e instâncias».

Para editar uma cor ou retirar um fundo de uma imagem mapa de bits,utilizar o comando MODIFICAR – Desmembrar (Break apart). Com a Vari-nha mágica, opção da ferramenta Laço (L), seleccionar o fundo e carregar natecla Delete. Finalmente, tornar a agrupar a imagem com o comando MODI-FICAR – Agrupar.

Os comandos Suavizar, Optimizar e Acertar, do menu MODIFICAR,podem ser usados para melhorar e optimizar a imagem.

Unidade III12

Um mapa de bits pode ser convertido numa imagem vectorial com ocomando MODIFICAR – Traçar bitmap (Fig. III.34).

Nota: O comando MODIFICAR – Optimizar deve ser usado, depois de uma conversãode mapa de bits para vectorial, no intuito de diminuir o número de curvas do desenho.

A operação Traçar bitmap é normalmente realizada após várias tentativas.O gráfico vectorial final pode ser mais «pesado» do que o mapa de bits ini-cial, caso a imagem seja bastante complexa.

III.4.7 Animação

Animações de movimento (tween)A animação tween – da palavra inglesa between (entre) – corresponde ao

esforço do programa para calcular as imagens intermédias, quando apresen-tada uma situação inicial (A) e uma situação final (B) (Fig. III.35).

Fig. III.34 Traçar bitmap.

Fig. III.35 Animação demovimento.

A B

Para criar uma animação de movimento (tween) de uma imagem, proce-der da seguinte forma:

1. importar uma imagem para a livraria do Flash: ARQUIVO – Importarpara livraria (FILE – Import to library);

2. criar uma nova camada (layer);3. seleccionar um quadro dessa camada;4. abrir a livraria com F11;


5. arrastar, da livraria, a imagem para o palco;6. seleccionar a imagem (se for um quadrado ou um círculo, clicar duas

vezes);7. convertê-la em símbolo (Fig. III.36): seleccionar INSERIR – Converter

em símbolo (INSERT – Convert to symbol), ou pressionar F8; dar umnome e clicar na opção Gráfico (Graphic);

Fig. III.36 Converter emsímbolo.

Nota: No caso de prever que o trabalho envolverá código ActionScript, deveráoptar-se pela opção Clipe de filme (Movieclip).

18. criar uma keyframe na célula 30, por exemplo. Seleccionar o quadro30 e carregar em F6 (ou INSERIR – Quadro-chave);

19. arrastar a imagem anterior para uma nova posição;10. sobre os quadros anteriormente criados, carregar no botão direito do

rato e activar Criar interpolação de movimento – Animação tween(tween animation) (Fig. III.37).

Fig. III.37 Criar interpo-lação de movimento como rato.

III.4.7aPara criar um efeito de transparência gradual (Fig. III.38), isto é, passarde alfa a 100% para alfa a 0%, realizar as seguintes operações:

• realizar os itens anteriores de 1 a 9;• seleccionar o último keyframe na

linha de tempo (timeline); • depois, clicar na imagem; • na caixa de propriedades, activar o

menu pendente «Cor» para a opçãoAlfa e ajustar para o valor 0%.

Nota: É possível optar por todas as variantesde transparência entre 100% e 0%.

Fig. III.38 Animaçãocom efeito de transpa-rência.

Unidade III14

III.4.7b

III.4.7c

Fig. III.39 Animação derotação.

Para criar rotações na imagem, realizar as seguintes operações (Fig. III.39):

• realizar os itens anteriores (páginas 12 e 13) de 1 a 9;

• seleccionar o primeiro keyframe na linha de tempo (timeline);

• na caixa das propriedades, activar o menu pendente «Rotação» e optarpor Sentido horário ou Sentido anti-horário; digitar o número de voltasque pretende ver o objecto a rodar.

Animação com guia

Para criar uma animação de movimento com guia (motion guide), efectuaros seguintes passos:

• realizar os itens anteriores de 1 a 10;

• com o botão direito do rato, clicar sobre a camadaanterior; seleccionar o comando Adicionar guia demovimento ou activar o comando INSERIR – Guiade movimento (Fig. III.40);

• desenhar uma guia nesta nova camada;

• com a célula que inicia a interpolação de movimentoseleccionada, puxar a cruz, pelo seu ponto de registo,para o início da guia;

• com a última célula da interpolação de movimentoseleccionada, puxar a cruz, pelo seu ponto de registo,para o fim da guia;

• testar a animação com Ctrl + Enter.Fig. III.40 Adicionarguia de movimento.


Animação de forma

A animação de forma faz-se seguindo os passos 1 a 9 (descritos nas pági-nas 12 e 13), mas sem realizar o passo 7.

Seleccionado um dos quadros intermédios da animação, abrir o menupendente «Interpol», na barra Propriedades, e activar «Forma» (Fig. III.41).

Animação quadro a quadro

Cada célula vai conter um objecto com uma pequena alteração relativa-mente à célula anterior.

Estas alterações podem ser obtidas com a ajuda de várias técnicas e ferra-mentas: Traçar bitmaps, Separar bitmaps, Seta, Sub-seleccionar, etc.

Animação com máscaras

Neste tipo de animação, a forma do objecto de uma camada serve paramostrar parte de um segundo objecto noutra camada (Fig. III.42).

Fig. III.41 Animação deforma.

Fig. III.42 Exemplo deuma animação com más-caras.

n~be

Célula 1 Célula 5 Célula 10 Célula 15

água ém bemrecioso

A água éum bemprecioso

A água éum bemprecioso

A máscara consiste, no exemplo da Fig. III.42, num círculo que vaiaumentando de tamanho, por interpolação de movimento, e a camada mas-carada consiste num texto fixo, igual ao da célula 15.

A camada que exibe a interpolação de movimento é definida com máscara.

III.4.7d

III.4.7e

III.4.7f

Unidade III16

SWF O mais usado, necessita de um visualizador (Flash player) para trabalhar. Achata ascamadas do ficheiro FLA.

Formato Web por excelência, envolve o SWF em código para ser visível em HTML.

Permite movimento e uma cor transparente; óptimo para sequências de animaçãocurtas (faz a montagem).

Imagens do tipo fotográfico, com gradientes de muitas cores.

Tipo de imagem mapa de bits, tem um canal alfa de transparência.

Formato de vídeo QuickTime.

Ficheiro executável que inclui o visualizador (Flash Player).

Projector para Macintosh.

HTML

GIF

JPG

PNG

MOV

EXE

HQX

III.4.8 Publicação

O ficheiro de trabalho tem a extensão .fla. Este formato só é lido na pró-pria aplicação Flash.

A publicação de um trabalho final tem três fases:

• escolher os formatos de saída com as várias opções (Ctrl + Shift + F12);

• fazer a visualização da publicação em Visualizar publicação;

• exportar a publicação (Shift + F12).

Todos estes comandos estão disponíveis no menu ARQUIVO.

O Flash, entretanto, permite a publicação do trabalho final em vários for-matos:

CaracterísticasFormato

t a r e f a1. Abrir o programa Macromedia Flash; criar um novo documento, com o nome «memorias-

flash».

2. Pesquisar na Internet uma imagem semelhante à apresentada e importá-la para a livraria.

3. Desmembrar a imagem anterior.

4. Retirar o seu fundo.

5. Rodar a imagem de forma que a memória fique na hori-zontal.

6. Importar outras imagens de memórias (SD, MMC, Com-pact flash, Smart Media, etc.) para a biblioteca.

7. Arrastar para o palco as imagens anteriores, de modoque cada uma fique na sua camada.

8. Associar a cada memória um texto com o nome damesma.

9. Aplicar:

• interpolação de movimento para as memórias SD e MMC;

• animação com guia para a memória Compact flash;

• transparência de 80% a 10% com movimento à memória Smart Media;

• animação com rotação às restantes memórias.

10. Fazer uma animação com máscara para o texto «memoriasflash».

11. Fazer a publicação e optimização nos formatos SWF, HTML, GIF, EXE e PNG.

Criar uma nova animação, que associe a cada uma das memórias um botão. O botão,quando carregado, deve mostrar a memória; caso contrário, deve esconder a memória.

Nota: Poderá ser necessário usar código ActionScript associado ao botão.

T III.8

III.15, III.16


Unidade III18

III.5 Dreamweaver – Programa de Edição de Páginas Web

Para iniciar o Dreamweaver, pressionar o botão INICIAR – Todos osProgramas – Macromedia – Macromedia Dreamweaver (Fig. III.43).

Fig. III.43 Iniciar oDreamweaver.

Fig. III.44 Duas organi-zações para o ambientede trabalho do Dream-weaver: janela (A) e pai-néis integrados (B).

Nota: Em alternativa, seleccionar o comando Executar a partir do botão INICIAR edigitar «Dreamweaver», pressionando em seguida a tecla Enter.

III.5.1 Apresentação do programa

O ambiente de trabalho do Dreamweavere seus componentes

O Dreamweaver fornece duas opções de apresentação da área de trabalho(Fig. III.44):

• janela;

• painéis integrados ou flutuantes.

III.5.1a

A B


Nota: Para expandir um grupo de painéis, clicar na seta de expansão à esquerda donome do grupo; para desanexar um grupo de painéis, arrastar a pinça na extremidadeesquerda da barra de título do grupo.

1. Barra Inserir – contém botões para inserção de vários tipos de objectos no documento,como imagens, tabelas e camadas, permitindo definir vários atributos à medida que sãoinseridos. É possível, por exemplo, inserir uma imagem clicando no ícone de Imagem, nabarra Inserir. Também se pode utilizar o menu INSERIR em vez da barra Inserir.

2. Grupos de painéis – são conjuntos de painéis relacionados, agrupados sob um cabeçalho.

3. Barra de ferramentas do documento – contém botões e menus pendentes que possibilitamdiferentes visualizações da janela do documento (visualização do Projecto e de Código),várias opções de exibição e algumas operações comuns, como a visualização no browser.

4. Janela do documento – mostra o documento que está a ser criado e editado.

5. Painel do site – permite gerir os ficheiros e as pastas que compõem o site, mostrando osseus nomes de modo análogo ao Explorador do Windows.

6. Selector de tags – situa-se na barra de status, na parte inferior da janela do documento; mos-tra a hierarquia das tags (etiquetas) que delimitam a selecção actual na visualização do pro-jecto.

7. Inspector de propriedades – mostra e permite alterar várias propriedades do objecto outexto seleccionado. Cada tipo de objecto apresenta propriedades distintas.

Painéis de objectos e propriedades

Fig. III.45 Painéis deobjectos e propriedadesdo Dreamweaver.

32

5

7

4

6

1

Unidade III20

Fig. III.47 Criação deum novo documento.

Fig. III.46 Configurarum site de Dreamweaver.

III.5.1b

Criação e gestão de um Web siteOs sites do Dreamweaver constituem uma maneira de organizar todos os

documentos associados a um site da Web. Para cada site a ser criado na Web,é necessário configurar um site no Dreamweaver. Este processo permitirá,por exemplo, que o Dreamweaver utilize o protocolo de comunicação FTPpara transferir o site do computador local para o servidor da Web, para con-trolar automaticamente as hiperligações e para gerir os arquivos.

Não é possível fazer uso completo dos recursos do Dreamweaver se nãofor definido um site.

Para configurar um site do Dreamweaver (Fig. III.46):

• seleccionar SITE – Novo site. Aparecerá a caixa de diálogo «Definiçãodo site»;

• clicar no separador «Básico», para utilizar o Assistente de definição dosite, ou no separador «Avançado», para usar as definições avançadas;

• concluir o processo de configuração do site do Dreamweaver no Assis-tente de definição do site, responder às perguntas e clicar em Avançar,para continuar o processo de configuração.

III.5.2 Criação de documentos HTML

Criação, abertura e guarda de documentos HTML

Como criar documentos

Para criar um novo documento em branco, proceder da seguinte forma(Fig. III.47):


• seleccionar ARQUIVO – Novo;• na lista «Categoria», seleccionar a categoria do documento a ser criado; • na lista «Página básica», seleccionar o tipo de página que deseja e clicar

em Criar.

Para criar um novo documento a partir de um modelo:

• escolher ARQUIVO – Novo para abrir a caixa de diálogo «Novo docu-mento»;

• no separador «Modelos», na lista «Modelos», seleccionar o site doDreamweaver que contém o modelo desejado;

• seleccionar o modelo a ser utilizado;• desmarcar a opção «Actualizar a página quando o modelo for alterado»,

para que o novo documento do modelo passe a ser independente; • clicar em Criar;• guardar o documento.

Como criar documentos existentes

Determinados ficheiros, como documentos CSS, são abertos somente navisualização do código.

Se o documento a ser aberto é um arquivo do Microsoft Word guardadocomo HTML, convém importá-lo para o Dreamweaver em vez de o abrir.

Ao importar um arquivo HTML do Word, o Dreamweaver pode limpar astags de markup irrelevantes que o Word insere em arquivos HTML. É possívelutilizar o comando Limpar o HTML do Word para definir uma cor de fundopara a página e limpar a formatação da folha de estilos CSS no documentoimportado.

Para abrir um arquivo existente, proceder da seguinte forma:

• seleccionar ARQUIVO – Abrir.• na caixa de diálogo que aparece, seleccionar o ficheiro a ser aberto;• clicar em Abrir.

Como guardar documentos

Ao guardar um documento, evitar utilizar espaços e caracteres especiaisnos nomes de ficheiros e pastas, ou seja, não utilizar acentos, pontuação, ç,etc. Além disso, não colocar um número no início de um nome de ficheiro.

Unidade III22

Para guardar um documento:

• seleccionar ARQUIVO – Salvar;• na caixa de diálogo, navegar até a pasta onde se vai guardar o ficheiro;

• em «Nome do ficheiro», digitar um nome para o ficheiro;

• clicar em Salvar para guardar o ficheiro.

Definição das propriedades

Os títulos de páginas, as cores e imagens de fundo, as cores do texto e doslinks, tal como as margens, são propriedades básicas de todos os documentosHTML.

O título da página identifica o documento.

Uma cor ou imagem de fundo define a aparência geral do documento. Ascores do texto e dos links ajudam os utilizadores do site a distinguir entretexto comum e hipertexto e também a identificar os links que foram ou nãovisitados.

Para alterar o título de uma página (Fig. III.48):

• seleccionar Exibir – Barra de ferramentas – Documento (caso abarra de ferramentas ainda não esteja seleccionada);

• clicar com o botão direito do rato numa área vazia do documentoe, em seguida, seleccionar Propriedades da página;

• na caixa de texto «Título», digitar o título da página e pressionarEnter;

• clicar em OK.

O título é exibido na barra de título da janela do documento e na barrade ferramentas, se esta estiver visível. Um asterisco (*) indica que o docu-mento contém alterações que ainda não foram guardadas (Fig. III.49).

Fig. III.48 Alterar o títulode uma página.

Fig. III.49 Barra de títuloda janela do documento.

Para definir uma imagem ou cor de fundo (Fig. III.50):

1. Seleccionar MODIFICAR – Propriedades da página ou, alternativa-mente, seleccionar Propriedades da página no menu de atalho, se esti-ver a ser usada visualização de Projecto da janela do documento.


Fig. III.50 Definir ima-gem ou cor de fundo.

2. Para definir uma imagem de fundo, clicar no botão Procurar…, pes-quisar a imagem e seleccioná-la. Alternativamente, digitar o caminho /a localização da imagem de fundo na caixa «Imagem de fundo».

Nota: O Dreamweaver colocará lado a lado (repetirá) a imagem de fundo seesta não preencher toda a janela, exactamente como fazem os browsers. Paraque a imagem de fundo não seja repetida, seleccionar a opção «Folhas de estiloem cascata».

3. Para definir uma cor de fundo, clicar na caixa «Fundo» e seleccionaruma cor na paleta de cores.

III.5.3 Inserção e formatação de texto

Inserção de texto e objectosHá várias formas de adicionar texto a um documento do Dreamweaver.

Para adicionar texto a um documento, seguir um dos procedimentos abaixo:

1. Digitar o texto directamente na janela do documento.

2. Copiar o texto de outra aplicação, alternar para o Dreamweaver, posi-cionar o ponto de inserção no documento e escolher EDITAR – Colar(o Dreamweaver não mantém a formatação de texto que foi aplicada nooutro programa, mas preservará as quebras de linha).

Unidade III24

Fig. III.53 Guardar esti-los de formatação.

Definição da fonte, tamanho, cor e alinhamentosA formatação de um documento no Dreamweaver é semelhante à utilizada

num processador de texto, como por exemplo o Word.

No Inspector de propriedades, utilizar o sub-menu Texto – Formato doparágrafo ou o menu pendente «Formato» para definir o estilo de formata-ção padrão (Parágrafo, Pré-formatado, Cabeçalho 1, Cabeçalho 2, etc.) paraum bloco de texto (Fig. III.51).

Para alterar a fonte, o tamanho, a cor e o alinhamento do texto seleccio-nado, usar o menu TEXTO ou o Inspector de propriedades (Fig. III.52).

Para aplicar formatação de texto como Negrito, Itálico, Sublinhado, etc.,utilizar o sub-menu Texto – Estilo.Fig. III.51 Estilos de for-

matação padrão.

Fig. III.52 Formatar (A)e alinhar texto (B).

É possível combinar várias formata-ções num único estilo, denominadoestilo HTML, guardando-o em «EstilosHTML» (Fig. III.53).

A B


III.5.4 Hiperligações

Há três tipos de caminhos de link, que são os seguintes: • caminhos absolutos (por exemplo,

http://www.jovem.te.pt/servlets/Lazer?P=Noticias&ID=5663); • caminhos relativos (por exemplo, 10TIC/exemplo.html); • caminhos relativos à raiz do site (por exemplo:

/manuais/10TIC/exemplo.html).

Com o Dreamweaver é possível seleccionar facilmente o tipo de caminhoa ser criado para os links.

Nota: É preferível usar links relativos a documentos ou a sites: assim, mesmo que osite seja publicado com outro endereço, o link continuará a funcionar.

Criação e edição de linksPodem ser criados diversos tipos de links num documento: • links a outro documento ou ficheiro, que pode ser de imagem, de filme,

de som ou PDF; • links de âncora com nome, que saltam para uma localização específica

dentro de um documento; • links de correio electrónico, que criam uma nova mensagem com o

endereço do destinatário já preenchido; • links nulos e de script, que permitem anexar comportamentos a um

objecto ou executar código JavaScript.

Para adicionar uma hiperligação utilizando o comando Hyperlink: • colocar o ponto de inserção onde a hiperligação deve ser inserida no

documento;• escolher INSERIR – Hyperlink ou, na barra Inserir, seleccionar o separa-

dor «Comuns» e clicar no botão Hyperlink – aparecerá a caixa de diálogoda Fig. III.54;

Fig. III.54 Inserir Hyper-link.

• preencher a caixa de diálogo;• clicar em OK.

Unidade III26

III.5.4

Para criar uma âncora com nome:

• na visualização de Projecto, na janela do documento, posicionar o pon-to de inserção no local onde se pretende inserir a âncora com nome;

• optar por um dos procedimentos seguintes: escolher INSERIR – Âncoracom nome ou, alternativamente, pressionar as teclas Ctrl + Alt + A;outra possibilidade é, na barra Inserir, seleccionar o separador«Comuns» e clicar no botão Âncora com nome – aparecerá a caixa dediálogo da Fig. III.55;

Para estabelecer um link a uma âncora com nome:

• na visualização de Projecto, na janela do documento, seleccionar umtexto ou uma imagem a partir da qual será criado um link;

• no campo «Link», no Inspector de propriedades, digitar um sinal decardinal (#) e o nome da âncora. Por exemplo: para estabelecer um linka uma âncora com o nome TIC no documento actual, digitar «#TIC»;para estabelecer um link a uma âncora com o nome TIC num documen-to diferente, na mesma pasta, digitar «nomedoficheiro.html#TIC».

Nota: Os nomes de âncoras distinguem maiúsculas e minúsculas.

Para criar um link de correio electrónico:

• na visualização de Projecto, na janela do documento, colocar o pontode inserção onde deverá aparecer o link de correio electrónico, ou selec-cionar o texto ou a imagem a ser mostrada nesse local;

Fig. III.55 Criar umaâncora com nome.

• no campo «Nome da âncora», digitar um nome para a âncora.


Fig. III.56 Criar um linkde correio electrónico.

• preencher a caixa de diálogo;

• clicar em OK.

Nota: Ao usar a opção INSERIR – Link de correio electrónico, não digitar espaços entreos dois pontos e o endereço electrónico. Deve ficar, por exemplo, «mailto:[email protected]».

Para criar um link nulo:

• seleccionar o texto, uma imagem ou um objecto na visualização de Pro-jecto, na janela do documento;

• no Inspector de propriedades, na caixa de texto «Link», digitar«javascript:;» (a palavra javascript, seguida de dois pontos e de um pontoe vírgula).

• escolher INSERIR – Link de correio electrónico ou, na barra Inserir,separador «Comuns», clicar no botão Inserir link de correio electrónico– surgirá a caixa de diálogo da Fig. III.56;

Para criar um link de script, proceder depois da seguinte forma:

• no campo «Link», no Inspector de propriedades, digitar «javascript:»seguido de código JavaScript ou de uma chamada à função, que normal-mente envolve o nome da função definida e a chamar.

Unidade III28

Para inserir uma imagem na página:

• posicionar o ponto de inserção onde a imagem deverá ser incluída najanela do documento;

• no separador «Comuns» da barra Inserir, clicar no botão Imagem ouseleccionar INSERIR – Imagem (Fig. III.57);

III.5.5a

Fig. III.57 Botão Inserir.

Fig. III.58 Janela do Ins-pector de propriedades.

III.5.5 Inserção de imagens

Inserção de imagens na páginaAo inserir uma imagem num documento do Dreamweaver, o programa

gerará automaticamente uma referência dessa imagem no código HTML.Para garantir que essa referência está correcta, o ficheiro de imagem deveráestar no site. Caso não esteja no site actual, o Dreamweaver perguntará sedeve ser copiado para o site.

• na caixa de diálogo, seleccionar «Sistema de arquivos» para escolher umficheiro de imagem ou «Procurar» para escolher a imagem ou origemdo conteúdo a ser inserido;

• no Inspector de propriedades (JANELA – Propriedades), definir aspropriedades da imagem (Fig. III.58).

t a r e f a1. Abrir o programa Dreamweaver. Criar um novo documento com o comando Arquivo novo.

Guardar o documento com o nome index.htm.

2. Atribuir o título «10TIC – Poupar energia».

3. Mudar a cor do fundo da página para #FFFF99.

4. Inserir o título «O que fazer para poupar energia», com fonte Verdana, tamanho 12 e corazul, centrado.

5. Inserir uma tabela como a apresentada a seguir:

6. Inserir na célula C2 uma imagem de uma lâmpada incandescente (pesquisa na Web).

7. Inserir na célula C3 uma imagem de uma lâmpada economizadora.

8. Explicar na célula C4 que cuidados se podem ter que permitam poupar energia; usar a fonteArial, tamanho 8 e uma cor escura.

9. Criar uma hiperligação no texto que chame uma página da Web relacionada com energia,aberta numa nova janela.

10. Criar outra página HTML em branco, guardando-a com o nome dreamdoc2.htm na mesmapasta da página index.htm.

11. Inserir na página dreamdoc2.htm uma lista de oito electrodomésticos com rendimentos deenergia baixos, com um espaço de dez linhas entre eles.

12. Criar uma âncora com nome na última designação inserida.

13. Na página com a tabela, criar uma hiperligação que abra a página da lista no ponto deâncora com nome anterior.

14. Na célula C1 especificar a identificação de quem está a executar esta tarefa, inserindo umahiperligação para o respectivo endereço de correio electrónico.

15. Configurar as páginas anteriores como um novo site, definindo a ligação ao servidor comosendo através de rede local e especificando outra pasta previamente criada (que pode serno mesmo computador) como o endereço do servidor.

Optimizar a aplicação criada com outros recursos do Dreamweaver.

T III.9

III.17, III.18

C1

C2

C4

C3


Unidade III30

Criação de imagens dinâmicasUma imagem dinâmica é aquela que, quando exibida no browser, é alterada

por acção do rato.

Este tipo de imagem consiste em pelo menos duas imagens: a imagem pri-mária (exibida quando a página for carregada pela primeira vez) e a imagemsecundária (que será exibida quando o rato desencadear a acção sobre a ima-gem primária).

As imagens dinâmicas deverão ter o mesmo tamanho, caso contrário oDreamweaver redimensionará automaticamente a segunda imagem para que assuas propriedades coincidam com as da primeira.

Para criar uma imagem dinâmica:

• na janela do documento, colocar o ponto de inserção no local ondedeverá aparecer a imagem;

• escolher INSERIR – Imagens interactivas – Imagem cambiável; é exi-bida a caixa de diálogo da Fig. III.59.

• em «Nome da imagem», digitar um nome para a imagem dinâmica;

• em «Imagem original», clicar em Procurar e seleccionar a imagem a serexibida quando a página carregar ou, alternativamente, digitar o cami-nho do arquivo da imagem na caixa de texto;

III.5.5b

Fig. III.59 Caixa de diá-logo para inserir umaimagem dinâmica.

Utilização de um editor de imagens externoÉ possível definir quais os tipos de ficheiro que um determinado editor

pode abrir e seleccionar editores diferentes para outros tipos de ficheiro. Por exemplo, é possível configurar o Dreamweaver para iniciar o Paint ShopPro quando quiser editar um arquivo GIF e iniciar o PhotoShop quando oarquivo tiver o formato JPG ou PNG.

Para configurar um programa editor de imagem conforme o tipo deficheiro, seleccionar EDITAR – Preferências – Tipos de arquivos/editores(Fig. III.60).

Para adicionar um tipo de ficheiro à lista de extensões visualizada nas «Pre-ferências», em «Tipos de arquivos/editores», proceder da seguinte forma:

• clicar no botão de adição (+) situado acima da lista de extensões;

• digitar a extensão do tipo de arquivo (incluindo o ponto no início daextensão), ou diversas extensões relacionadas, separadas por espaços. É possível, por exemplo, digitar «.css .png .jpg».


• em «Imagem cambiável», clicar em Procurar e seleccionar a imagem aser exibida quando o rato desencadear a acção; alternativamente, digitaro caminho do arquivo da imagem na caixa de texto;

• seleccionar a opção «Pré-carregar a imagem cambiável» para que a ima-gem seja pré-carregada na Cache do browser, evitando atrasos quando oponteiro passar sobre ela;

• em «Texto alternativo», digitar texto para descrever a imagem;

• em «Quando tiver clicado, vá para a URL», clicar em Procurar e selec-cionar o ficheiro; alternativamente, digitar o caminho do ficheiro a seraberto quando um utilizador clicar na imagem dinâmica;Nota: Se não for definido um link para a imagem, o Dreamweaver insere umlink nulo (#) no código-fonte HTML. Se o link nulo for removido, a imagemdinâmica não funcionará.

• clicar em OK para fechar a caixa de diálogo da Fig. III.59;

• seleccionar ARQUIVO – Visualizar no browser; • no browser, passar o cursor sobre a imagem original: a exibição deve

alternar para a imagem secundária.

Unidade III32

Para adicionar um editor a um determinado tipo de arquivo:

• seleccionar a extensão do tipo de arquivo na lista «Extensões»;• clicar no botão de adição (+) situado acima da lista de editores;• seleccionar a aplicação a ser adicionada à lista «Editores» na caixa de

diálogo que for exibida. Escolher, por exemplo, o ícone do aplicativoExcel e adicioná-lo à lista «Editores».

III.5.6 Multimédia

Inserção de objectos multimédiaO Dreamweaver permite adicionar sons, filmes ou outros ficheiros dinâ-

micos e interactivos aos sites da Web, de maneira rápida e fácil. É possívelincorporar ou editar os ficheiros e objectos multimédia, como por exemploFlash e Shockwave, applets Java, Quicktime, ActiveX e som, assim comoobjectos de botão e texto Flash, editáveis no próprio Dreamweaver.

Fig. III.60 EDITAR –Preferências.


Importação de conteúdos do FlashA tecnologia Flash constitui a solução mais eficiente para a produção de

gráficos e animações com base em vectores.

O Dreamweaver disponibiliza objectos Flash para serem usados com ousem o programa de criação Flash. É possível utilizar esses objectos para criarbotões e textos a incluir num documento HTML.

O botão Flash é um botão actualizável baseado num modelo Flash. É pos-sível personalizar um objecto botão Flash adicionando texto, cor de fundo elinks para outros arquivos. É possível inserir botões Flash durante o trabalho,quer na visualização do projecto quer na visualização do código.

Nota: É necessário guardar os documentos antes de inserir um objecto Flash.

Para inserir um objecto botão Flash:

• na janela do documento, posicionar o ponto de inserção onde se pretendeinserir o botão Flash;

• na barra Inserir, seleccionar «Mídia» e, em seguida, clicar no ícone doBotão Flash; alternativamente, seleccionar INSERIR – Imagens inte-ractivas – Botão Flash (Fig. III.61);

III.5.6a

Fig. III.61 Inserir umbotão Flash.

Unidade III34

• em «Estilos», seleccionar o estilo de botão;

• no campo «Texto do botão» (opcional), digitar o texto a ser exibido;Nota: Este campo aceitará alterações apenas se o botão seleccionado tiver oparâmetro {Button Text} definido. O texto digitado substituirá o parâmetro{Button Text} quando o ficheiro for visualizado.

• em «Fonte», seleccionar a fonte; a fonte seleccionada não será vista nocampo «Exemplo», mas é possível clicar em Aplicar para inserir o botãona página (para examinar a aparência do texto);

• no campo «Tamanho», digitar um valor numérico para o tamanho da fonte;

• em «Link» (opcional), digitar o URL de um link;

• no campo «Destino» (opcional), especificar a localização na qual odocumento com link será aberto; é possível seleccionar uma moldura ouopção de janela no menu pendente (os nomes das molduras só são lista-dos se o objecto Flash estiver num conjunto de molduras);

• no campo «Cor de fundo» (opcional), definir a cor de fundo para oficheiro Flash; utilizar o selector de cores ou digitar um valor hexadecimalda Web (como por exemplo #FFFFFF);

• no campo «Salvar como», digitar um nome para o ficheiro de modo aguardar o novo arquivo SWF; Nota: É possível utilizar o nome do ficheiro padrão (por exemplo:button1.swf) ou digitar um novo nome. Se o ficheiro contiver um link relativoa um documento do site, será necessário guardar o ficheiro na mesma pastaque o documento HTML actual para manter os links relativos ao documento.

• clicar em Aplicar ou OK para inserir o botão Flash na janela do docu-mento.

Inserção de um filme Shockwave numa página WebAo inserir um ficheiro Shockwave, o Dreamweaver utilizará as tags object

(para o programa ActiveX) e embed (para o plug-in) para obter os melhoresresultados em todos os browsers. Ao alterar o ficheiro no Inspector de pro-priedades, o Dreamweaver mostrará as entradas dos parâmetros apropriadosàs tags object e embed.

Para inserir um filme Shockwave:

• na janela do documento, colocar o ponto de inserção onde se pretendeinserir o ficheiro Shockwave;

• no separador «Mídia» da barra Inserir, clicar no ícone/botão Shockwave;alternativamente, escolher INSERIR – Mídia – Shockwave;


• na caixa de diálogo que será exibida, seleccionar um ficheiro Shockwave;

• no Inspector de propriedades, digitar a largura e altura de visualização nascaixas L e U.

Adição de somHá vários tipos diferentes de ficheiros e formatos de som, assim como

diversas maneiras de adicionar som às páginas da Web. Entre os factores aserem considerados antes de decidir qual o formato e método a serem utiliza-dos para adicionar o som, estão o objectivo, o público, o tamanho do arquivo,a qualidade do som e as diferenças entre os browsers.

Nota: Os ficheiros de som são tratados de forma diferente e inconsistente pelosdiversos browsers. Pode ser recomendável adicionar um ficheiro de som a um filmeFlash e, em seguida, incorporar um ficheiro SWF.

Hiperligação para um ficheiro de som

Uma hiperligação para um ficheiro de som é uma forma simples e efectivade adicionar som às páginas da Web.

Este método permite escolher se se quer ouvir o som e coloca-o à disposi-ção de um público maior, uma vez que alguns browsers não oferecem suportea ficheiros de som incorporados.

Para criar uma hiperligação para um ficheiro de som, proceder do seguintemodo:

• seleccionar o texto ou a imagem que deseja utilizar como hiperligaçãopara o ficheiro de som;

• no Inspector de propriedades, clicar no ícone correspondente à pastapara procurar o ficheiro de som; alternativamente, digitar o caminho e onome do ficheiro no campo «Link».

Incorporação de um ficheiro de som

A incorporação de som é um processo que inclui o programa de reprodu-ção de som directamente na página, mas que só será executado se os visitan-tes do site dispuserem do plug-in apropriado ao ficheiro escolhido.

É possível ajustar, por exemplo, o volume, a aparência do programa dereprodução do som na página e os pontos de início e fim do som.

Unidade III36

Para incorporar um ficheiro de som:

• na visualização de projecto, colocar o ponto de inserção onde desejaincorporar o ficheiro;

• no separador «Mídia» da barra Inserir, clicar no ícone / botão Plug-in;alternativamente, escolher INSERIR – Mídia – Plug-in;

• no Inspector de propriedades, clicar no ícone correspondente à pastapara procurar o ficheiro de áudio; alternativamente, digitar o caminho eo nome do ficheiro no campo «Link»;

• digitar a largura e a altura, através da inserção dos valores nos camposapropriados ou do redimensionamento da área de reserva de espaço deplug-in, na janela «Documento».

Inserção de controlos ActiveXOs programas ActiveX (anteriormente conhecidos como programas OLE)

são componentes reutilizáveis semelhantes a applets que podem funcionarcomo plug-ins dos browsers.

No Dreamweaver, o objecto ActiveX permite fornecer atributos e parâme-tros a um programa ActiveX no browser do utilizador do site; além disso, uti-liza a tag object para marcar o local na página onde será exibido.

Para inserir o conteúdo do programa ActiveX (Fig. III.62):

• na janela do documento, colocar o ponto de inserção onde se pretendeinserir o conteúdo;

• no separador «Mídia» da barra Inserir, clicar no ícone / botão ActiveX;alternativamente, seleccionar INSERIR – Mídia – ActiveX.

III.5.6b

Fig. III.62 Inserir oconteúdo do programaActiveX.


Guardar o documento com o nome index.htm.

2. Mudar a cor do fundo da página para #99CCFF.

3. Inserir o título «Prevenção rodoviária», com fonte Verdana, tamanho 12 e cor preta, centrado.

4. Inserir uma tabela como a apresentada a seguir:

5. Na célula C1, inserir uma imagem de um sinal de trânsito de limite de velocidade.

6. Na célula C2, descrever sucintamente a importância do cumprimento dos limites de veloci-dade na frequência e na gravidade dos acidentes – usar fonte Verdana, tamanho 8 e umacor contrastante.

7. Inserir um botão Flash na célula C6 que permita abrir,numa nova janela, o site da Direcção Geral de Viação napágina de sinalização rodoviária.

8. Inserir em C3 uma imagem dinâmica de um carro que, ao ser percorrida pelo cursor, mudepara a imagem de um acidente.

9. Inserir em C5 um vídeo através de um dispositivo plug-in.

10. Utilizando um dispositivo ActiveX, inserir em C4 um som, de preferência que simule o ruídode um carro.

Nota: Procurar um ficheiro de som na pasta Windows\Media, por exemplo.

11. Configurar o dispositivo ActiveX inserindo os seguintes valores no Inspector de propriedades:classid=«clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6» id=«WindowsMediaPlayer1» L=«197» U=«44»>param name=«URL» value=«??Caminho para o ficheiro de música??»>param name=«enabled» value=«-1»param name=«autoStart» value=«0»

12. Configurar as páginas anteriores como um novo site, definindo a ligação ao servidor comosendo através de rede local e especificando outra pasta previamente criada (que pode serno mesmo computador) como o endereço do servidor.

Dividir uma imagem grande em pedaços; inseri-los numa tabela com bordo zero de modo areconstituir a imagem global e, através do comando INSERIR – Imagem cambiável, criar umcenário animado que interaja com o utilizador. Optimizar o documento criado com mais recursos do Dreamweaver.

T III.10

III.19, III.20

C1C3C4

C2

C5 C6

www.projectos.TE.pt/linkspara saber mais sobre...


• Direcção Geral de Viação (sinalização rodoviária)

Unidade III38

III.5.7 Camadas dinâmicas

Quando se coloca uma camada num documento, o Dreamweaver insere atag HTML correspondente à camada no código. É recomendável configuraro Dreamweaver para utilizar a tag div ou span nas camadas. Por omissão, oDreamweaver cria as camadas utilizando a tag div.

Criação e manipulação de camadasO Dreamweaver permite criar de forma interactiva camadas na página e

posicioná-las com precisão.

Para criar uma camada há duas alternativas:

1. Para desenhar uma camada, clicar no botão Desenhar camada, na barraInserir, e em seguida arrastar para o documento na respectiva janela.

2. Para inserir o código de uma camada num determinado local do docu-mento, posicionar o ponto de inserção na janela do documento e, emseguida, escolher INSERIR – Camada.

Nota: Se a opção «Elementos invisíveis» estiver activa, os elementos na página pode-rão parecer deslocados. Contudo, como os elementos invisíveis não aparecerão nobrowser, quando a página for visualizada todos os elementos visíveis aparecerão nasposições correctas.

Para desenhar diversas camadas consecutivamente:

• clicar no botão Desenhar camada, na barra Inserir;

• manter a tecla Ctrl pressionada e clicar no documento, arrastando paraconstruir/desenhar cada camada.

Nota: Poder-se-á continuar a adicionar novas camadas desde que não se solte a tecla Ctrl.

Criação de animação na linha de tempoO HTML dinâmico, ou DHTML, refere-se à combinação entre HTML e

uma linguagem de criação de scripts que permite alterar as propriedades deestilo ou posicionamento de elementos HTML.

No Dreamweaver, as linhas de tempo utilizam o HTML dinâmico paraalterar as propriedades de camadas e imagens ao longo do tempo. As linhasde tempo são utilizadas para criar animações que dispensem outro software,embora utilizem JavaScript.


As linhas de tempo permitem alterar a posição, visibilidade, ordem deempilhamento e o tamanho de uma camada. As funções de camadas daslinhas de tempo funcionam apenas nos browsers de versões 4.0 ou mais avan-çadas.

As linhas de tempo também são úteis para outras acções que deverãoocorrer após o final da transferência da página. Podem, por exemplo, alteraro ficheiro de origem de uma tag de imagem, para mostrar imagens diferentes,durante um certo período de tempo.

O painel Linhas de tempo mostra como as propriedades das camadas eimagens se alteram ao longo do tempo.

Escolher JANELA – Outros – Linhas de tempo, para abrir o painelLinhas de tempo (Fig. III.63).

Fig. III .63 Linhas detempo.

1. Menu pendente «Linhas de tempo» – especifica que linhas de tempo do documento estão exibidas nopainel Linhas de tempo.

2. Inspector de propriedades – indica o número sequencial de quadros. O número entre os botões Voltare Executar representa o quadro actual. A duração da animação pode ser controlada ao definir o númerototal de quadros e o número de quadros por segundo (qps). A definição padrão é de 15 qps e constituiuma boa taxa média, a ser utilizada na maior parte dos browsers executados nos sistemas mais comuns.

3. Canal de comportamentos – é o canal contendo os comportamentos que deverão ser executados numdeterminado quadro da linha de tempo.

4. Marcador de execução – mostra o quadro da linha de tempo que está em exibição na janela do docu-mento.

5. Barra de animação – mostra a duração de cada animação de objecto. Uma única linha pode incluirvárias barras, que representam diversos objectos. Barras diferentes não podem controlar o mesmoobjecto no mesmo quadro.

6. Canal de animação – exibe as barras para animar as camadas e imagens.

12

3

65

4

Unidade III40

Para animar uma camada utilizando uma linha de tempo, proceder daseguinte forma:

• mover a camada até ao ponto inicial da animação (Fig. III.64);

• escolher JANELA – Outros – Linhas de tempo;

• seleccionar a camada a ser animada;

• escolher MODIFICAR – Linha de tempo – Adicionar objecto à linha detempo; alternativamente, arrastar a camada seleccionada até ao painelLinhas de tempo;

Nota: Aparecerá uma barra no primeiro canal da linha de tempo. O nome dacamada aparecerá na barra (Fig. III.65).

• clicar no marcador do quadro primário, no final da barra;

• mover a camada na página para o local onde deverá estar no final daanimação: aparecerá uma linha exibindo o caminho da animação najanela do documento (Fig. III.66);

Fig. I I I .64 Mover acamada até à posiçãoinicial.

Fig. III .65 Adicionarum objecto à linha detempo.

Fig. I I I .66 Mover acamada até à posiçãofinal.

• se se desejar que a camada se mova em curva, seleccionar a respectivabarra de animação e, mantendo pressionada a tecla Ctrl, clicar numquadro no meio da barra de animação para adicionar um quadro pri-mário na posição do cursor; alternativamente, clicar num quadro nomeio da barra de animação e, no menu de atalhos, escolher Adicionarquadro primário. Repetir esta etapa para definir outros quadros pri-mários;


• arrastar a camada para descrever o caminho em curva pretendido(Fig. III.67);

• manter pressionado o botão Executar para visualizar a animação napágina. Repetir o procedimento para adicionar outras camadas e ima-gens à linha de tempo, criando uma animação mais complexa.

Criação de uma linha de tempo arrastando um caminho

Para criar uma animação com um caminho complexo, a gravação docaminho à medida que se arrasta a camada poderá ser mais eficiente do que acriação de quadros primários individuais.

Para criar uma linha de tempo arrastando um caminho, proceder daseguinte forma:

• seleccionar uma camada;

• mover a camada até ao ponto inicial da animação;

• escolher MODIFICAR – Linha de tempo – Gravar o caminho dacamada;

• arrastar a camada pela página para criar um caminho;

• soltar a camada no ponto em que a animação deverá parar – o Dream-weaver adicionará uma barra de animação à linha de tempo, que possuiráo número apropriado de quadros primários;

• no painel Linhas de tempo, clicar no botão Rebobinar (Fig. III.68);manter pressionado o botão Executar para visualizar a animação.

Fig. III.67 Arrastar acamada em curva.

Fig. III.68 Rebobinar.

Unidade III42

III.5.8 Formulários

É possível utilizar quebras de linha, parágrafos, texto pré-formatado outabelas para formatar os formulários. Um formulário não pode ser inseridonoutro formulário, ou seja, as tags não podem ser sobrepostas, embora sejapossível incluir mais de um formulário numa página.

Criação de formuláriosOs objectos de formulários são inseridos seleccionando-se INSERIR –

Objectos de formulário ou acedendo aos objectos de formulário no separa-dor «Formulários» da barra Inserir (Fig. III.69).

11. Formulário – insere um formulário no documento. O Dreamweaver insere tags form de abertura efinalização no código-fonte HTML. Quaisquer outros objectos de formulário, como campos de texto,botões e outros, devem ser inseridos entre as tags form, para que os dados sejam processados correcta-mente por todos os navegadores.

12. Campo de texto – insere um campo de texto. Os campos de texto aceitam qualquer tipo de entradaalfanumérica. O texto digitado pode ser exibido como uma linha simples, ou com marcadores ou aste-riscos (para protecção das senhas).

13. Campo oculto – insere um campo oculto no documento, no qual é possível armazenar dados do utili-zador. Os campos ocultos permitem armazenar informações complementares.

14. Área de texto – insere o equivalente ao campo de texto, mas prevendo linhas múltiplas.

Nota: No Inspector de Propriedades, seleccionar «Linhas múltiplas» transforma um campo de textoem área de texto. Por outro lado, as opções «Linhas simples» e «Senha» transformam uma área detexto em campo de texto.

15. Caixa de selecção – insere uma caixa de selecção. As caixas de selecção permitem múltiplas respostasnum único grupo de opções.

16. Botão de opção – insere um botão de opção. Os botões de opção representam opções exclusivas. A selecção de um botão num grupo cancela a escolha de todos os outros botões do mesmo grupo.

17. Grupo de botões de opção – insere vários botões de opção com o mesmo nome.18. Lista/menus – permite criar opções do utilizador numa lista e permitirá seleccionar diversas opções na

lista. A opção Menu exibe os valores de opção num menu pendente e permite seleccionar apenas umaúnica opção.

19. Menu pendente – insere uma lista de navegação ou menu. Os menus pendentes permitem inserir ummenu no qual cada opção é vinculada a um documento ou arquivo.

10. Campo de imagens – permite inserir uma imagem. Os campos de imagens podem ser utilizados emvez dos botões Enviar para criar botões com aparência gráfica.

11. Campo de arquivos – insere um campo de texto em branco e um botão Procurar num documento. Os campos de arquivos permitem que se procure ficheiros nos discos locais e se efectue o upload comdados do formulário.

12. Botão – insere um botão com texto. Os botões realizam tarefas quando são pressionados, como oenvio e redefinição dos dados dos formulários. É possível adicionar um nome ou identificador perso-nalizado ao botão, ou utilizar um dos identificadores predefinidos: «Enviar» ou «Redefinir».

Fig. III.69 CategoriaFormulários.

1 2 3 4 5 6 7 8 9 10 11 12


Fig. III.70 Inspector depropriedades.

Fig. III.71 Opções domenu pendente «Método».

Para adicionar um formulário a um documento:

• colocar o ponto de inserção onde o formulário deve ser incluído;

• escolher INSERIR – Formulário ou seleccionar o separador «Formulá-rios» na barra Inserir e clicar no botão / ícone Formulário;Nota: Com a página no modo de visualização de projecto, os formulários sãoindicados por um contorno pontilhado a vermelho. Se este contorno não estivervisível, verificar se a opção EXIBIR – Auxílios visuais – Elementos invisíveisestá seleccionada.

• na janela do documento, clicar no contorno do formulário para esco-lher; alternativamente, o formulário seleccionar a tag <form> no selectorde tags situado no canto inferior esquerdo da janela do documento;

• no campo «Nome do formulário», no Inspector de propriedades, digi-tar um nome exclusivo para identificar o formulário; Nota: Dar um nome a um formulário possibilita referenciá-lo ou controlá-locom uma linguagem de scripts, como JavaScript ou VBScript. Se o formulárionão tiver um nome, o Dreamweaver gera um nome utilizando a sintaxe formn eaumentará o valor n para cada formulário incluído na página.

• especificar, no campo «Acção» do Inspector de propriedades (Fig. III.70),o caminho até à página ou o script dinâmico que processará o formulário(digitar o caminho completo ou clicar no ícone de pasta para navegar atéà pasta que contém a página do script);

• no menu pendente «Método», escolher o métodode transmissão dos dados do formulário ao servi-dor (Fig. III.71).

III.5.9 Publicação

Publicação das páginas num servidor WebPara colocar os ficheiros um servidor remoto ou de teste, proceder do

seguinte modo:

• no painel Site, escolher um site no menu pendente «Site»;• seleccionar os ficheiros para transferir.

Unidade III44

Nota: Normalmente os ficheiros são escolhidos na visualização local, mas épossível seleccioná-los na visualização remota, se se preferir.

• clicar no botão Colocar na barra de ferramentas do painel Site ou, no menude atalho, escolher Colocar (se o ficheiro estiver aberto na janela do docu-mento, será possível escolher SITE – Colocar);

• se o ficheiro não tiver sido guardado, dependendo da definição da pre-ferência, é possível que apareça uma caixa de diálogo (no painel Site, nacaixa de diálogo «Preferências») que permite guardar o ficheiro antesde o colocar no servidor;

• para efectuar a transferência dos ficheiros dependentes, clicar em Sim;para os ignorar, clicar em Não na janela de diálogo que se abre automa-ticamente para o efeito.Nota: Para interromper a transferência de arquivos, clicar no botão Cancelar nacaixa de diálogo «Status». É possível que a transferência não pare imediata-mente.

Gestão e actualização dos conteúdos de um Web siteO painel Site permite exibir um site, inclusive todos os arquivos locais,

remotos e do servidor de teste que a ele estiverem associados.

Utiliza-se o painel Site para executar as operações de manutenção deficheiros, como por exemplo:

• criar novos documentos HTML;

• exibir, abrir e transferir arquivos;

• criar pastas;

• excluir itens;

• transferir arquivos entre sites locais, remotos e servidores de teste;

• determinar o layout da navegação do site utilizando o mapa do mesmo.

Depois dos ficheiros terem sido criados ou modificados no site local, épossível sincronizá-los, ou seja, enviá-los para o site remoto (publicá-los):seleccionar SITE – Sincronizar para transferir as versões mais recentes dosficheiros de e para o site remoto.


Guardar o documento com o nome anim01.htm.

2. Criar uma camada inserindo o código <div id="Layer1" style="position:absolute;visibility:inherit; width:200px; height:115px; z-index:1"></div> na janela do documento,usando o visualizador de código.

3. Modificar a cor de fundo da camada para #33FF99.

4. Inserir uma imagem de uma espiga de milho no interior da camada.

5. Fechar o painel Inspector de propriedades e abrir o painel Linhas de tempo.

6. Arrastar a camada para a barra de animação 1.

7. Seleccionar o quadro final da animação na respectiva linha e arrastar a camada para outraposição.

8. Seleccionar um quadro intermédio e adicionar um quadro primário; arrastar a camada paraoutra posição de modo a criar um caminho de deslocação curvo, quase circular.

9. Adicionar o comportamento Mensagem pop-up à animação, desencadeado quando se clicana camada, com a mensagem «Alimento biológico!».

10. Seleccionar a opção Execução automática e verificar a animação visualizando a página nobrowser (F12).

11. Adicionar mais camadas com animações idênticas mas usando outros caminhos, atribuindoequitativamente a mensagem «Alimento biológico!» e «Alimento transgénico!». O que acon-tecerá?

12. Estender a animação de modo que, mantendo o ritmo de 15 qps, ela dure 1 minuto.

13. Adicionar o comportamento de ocultação das camadas à linha de comportamentos no últimoquadro.

14. No quadro a seguir ao último, adicionar o comportamento que mostre a mensagem «Aca-bou! Verificar se tem uma alimentação saudável.»

15. Visualizar a página no browser e jogar durante 1 minuto, fazendo o balanço total dos pontos.

Com a ajuda do professor, procurar um servidor na Web que permita publicar sites usandoo protocolo FTP (ex.: http://homepages.sapo.pt). Criar uma conta de acesso, configurar umnovo site no Dreamweaver e publicar o site.

T III.11

III.21, III.22


Unidade III46

Flash

1. Qual é a principal função do Macromedia Flash?

A. Edição de som.B. Edição de imagem.C. Navegar na Web.D. Animação e interactividade.

2. A que tipo de animação corresponde a figura?

A. De movimento.B. De forma.C. Com máscara.D. De aproximação.

3. O que significa a expressão «instanciar um objecto»?

A. Colocá-lo numa nova camada.B. Aplicar o zoom sobre o objecto.C. Arrastá-lo da biblioteca.D. Criar uma interpolação de movimento.

4. Qual é o código nativo do Macromedia Flash?

A. JavaScript.B. ActionScript.C. Java.D. DHTML.

5. Das seguintes extensões de formatos de ficheiros, indicar a que não está directamente acessívelna publicação do Flash.

A. .swfB. .movC. .xmlD. .jpeg

6. Que ferramenta se deve usar para converter uma imagem mapa de bits em vector?

A. Traçar mapa de bits.B. Separar mapa de bits.C. Unir mapa de bits.D. Interpolação.

Questões


Dreamweaver

7. Indicar qual das opções seguintes não se adapta ao Dreamweaver.

A. Permite criar animações de objecto em função do tempo.B. Facilita a publicação de páginas Web.C. Muda o formato das imagens para se adequarem à Web.D. Permite limpar as tags inseridas pelo Word nas páginas Web.

8. Que comando se utiliza para inserir uma imagem dinâmica no Dreamweaver?

A. INSERIR – Imagem.B. INSERIR – Formulário.C. INSERIR – Imagens interactivas – Imagem cambiável.D. INSERIR – Objectos de modelos – Região editável.

9. Que comando se usa para configurar um novo site no Dreamweaver?

A. SITE – Novo site.B. SITE – Mapa do site.C. SITE – Editar site.D. SITE – Arquivos do site.

10. Que objectos podem ser animados nas linhas de tempo, em Dreamweaver?

A. Tabelas e imagens.B. Vídeos e formulários.C. Imagens e molduras.D. Camadas e imagens.

11. Qual é o atributo que, no Dreamweaver, dá a ordem de posição relativa na visualização dascamadas?

A. Id. da camada.B. Vis.C. Índice Z.D. Estouro.

12. O que são, em Dreamweaver, os comportamentos?

A. Códigos atribuídos a objectos relacionados com uma acção.B. Códigos dos atributos dos objectos.C. Objectos multimédia que mostram vídeo.D. Caixas de diálogo perguntando o que se quer fazer.

Soluções48

11. D.

12. A.

13. C.

14. B.

15. C.

16. A.

17. C.

18. C.

19. A.

10. D.

11. C.

12. A.

TIC

• C

D-R

OM

do

Alu

no •

972

-47-

2498

-0-3

Macromedia Flash MX e Dreamweaver MX - Manual Em Portugues

Documents

Transcript of Macromedia Flash MX e Dreamweaver MX - Manual Em Portugues