Dreamweaver - Animação

Por: ibestmasters - 3/12/2000

Com a evolução dos navegadores foi possível melhorar a linguagem de

programação chamada de Javascript. Com isto foi possível que webdesigners fizessem
animações simples mas com um custo de centenas de linhas de código.

Neste módulo nós vamos aprender a fazer qualquer tipo de animação com Javascript
no Dreamweaver, e o melhor, sem ter que escrever nenhuma linha de código.

Behaviors

Os behaviors são a base para qualquer animação no Dreamweaver. Com os behaviors

você pode definir um número ilimitado de ações para diversos eventos de sua página,
desde o movimento de um mouse até mesmo o carregamento ou a saída da página.
Para acessar a janela dos behaviors você pode ir em Window, Behaivior, ou então
teclar F9, ou então apertar o ícone de behaviors na janela launcher (imagem abaixo).

Antes de definir qualquer behavior você deve definir em que navegadores a sua página
vai ser vista corretamente. Existem as seguintes opções:
3.0 and Later Browsers - esta opção faz com que os seus behaviors sejam vistos em
praticamente todos os navegadores (versões 3 e posteriores) porém eles ficam bem
limitados;

4.0 and Later Browsers - esta opção permite que a sua animação seja vista
corretamente no Internet Explorer 4, Netscape 4 e posteriores; IE 3.0 - a sua
animação é vista corretamente no Internet Explorer 3 e posteriores;

IE 4.0 - a sua animação é vista corretamente no Internet Explorer 4 e posteriores;

IE 5.0 - a sua animação é vista corretamente no Internet Explorer 5;

Netscape 3.0 - a sua animação é vista corretamente no Netscape 3 e 4; e Netscape
4.0 - a sua animação é vista corretamente no Netscape 4.

Uma vez configurado o tipo de navegador a ser utilizado você deve selecionar o tipo de
elemento que vai acionar o behavior e clicar no ícone "+", por exemplo, para definir
um link que troca uma determinada imagem por outra você deve selecionar o link.

Agora você deve definir que tipo de ação vai acontecer, os exemplos mais comuns são:
Check Browser - redireciona o usuário para diferentes páginas conforme o navegador
que ele está usando;
Check Plugin - redireciona o usuário para diferentes páginas conforme os plugins que
ele tem instalado;
Go To URL - redireciona o usuário para uma outra página, que pode estar dentro de
uma estrutura de frames;
Open Browser Window - abre uma nova janela do navegador;
Popup Message - abre a caixa de mensagem do sistema do usuário com o texto que
você definir;
Show/Hide Layers - mostra ou esconde layers em sua página;
Swap Image - troca imagens, tanto a imagem que possue o link como outras imagens
na página, podendo inclusive trocar mais de uma imagem ao mesmo tempo;
Swap Image Restore - restaura a última imagem trocada; e Validate Form - valida
os campos de um formulário.

Ao escolher e configurar, se necessário, a ação que vai ser utilizada o Dreamweaver

coloca um evento padrão, que varia para cada tipo de ação. Você pode mudar este
evento padrão em qualquer momento, basta você selecionar o elemento que possui o
behavior (caso ele já não esteja selecionado) e clicar na seta para baixo do lado direito
do evento padrão. Abaixo a figura mostra as opções disponíveis de eventos para a
ação "Check Browser" para o Internet Explorer 3:

Conforme você for fazendo páginas para navegadores mais atuais, como o Internet
Explorer 4 ou o Netscape 4, você vai perceber que a lista de eventos fica enorme.
Abaixo estão os eventos mais comuns e as respectivas explicações:

OnMouseOver - ativa o evento quando o mouse passa por cima do elemento que
possui esta ação
OnMouseOut - ativa o evento quando o mouse passa por cima de qualquer parte da
página que não faça parte do elemento que possui esta ação
OnClick - ativa o evento quando o usuário dá um clique no elemento que possui esta
ação
OnDblClick - ativa o evento quando o usuário dá um duplo clique no elemento que
possui esta ação
OnLoad - ativa o evento quando a página é carregada
OnUnload - ativa o evento quando o usuário sai da página

Layers
Layers foram implantadas nos navegadores 4 e posteriores e possuem a intenção de
substituir as tabelas na função de diagramação das páginas para a internet. Eles
possuem uma idéia ótima e são totalmente configuráveis e também podem ser
inseridos em qualquer lugar da página, sem depender de outros elementos. O único, e
grande, problema dos layers é que a sua visualização está limitada aos navegadores 4
ou posteriores e para piorar tudo o Internet Explorer e o Netscape possuem problemas
para mostrar layers entre si.

Para inserir uma layer em sua página basta clicar no ícone do layer na paleta de
objetos e desenhar a layer pela página. Depois de inserir uma layer na página você
pode modificar as suas propriedades selecionando ela. Para selecionar uma layer
existem dois modos, o primeiro é clicando no quadrado que aparece no canto esquerdo
superior quando o cursor está dentro da layer ou então clicando no ícone do layer que
aparece no canto esquerdo superior da página. Outra maneira de selecionar um layer é
através da janela "Layers" onde basta selecionar a layer pelo o seu nome que a layer é
selecionada na página, esta maneira é muito útil para selecionar layers invisíveis.
Abaixo temos a janela de propriedades das layers e que cada campo determina:

1. Layer ID, nesta opção você pode determinar o nome do layer, nota-se que o
Dreamweaver já coloca um nome padrão no layer criado;
2. especifica a posição da camada em relação ao canto esquerdo da página;
3. especifica a posição da camada em relação ao canto superior da página;
4. especifica a largura da camada, esse valor será ignorado se o conteúdo da camada
exceder o tamanho especificado;
5. especifica a altura da camada, esse valor será ignorado se o conteúdo da camada
exceder o tamanho especificado;
6. Z-index, define a ordem dos layers, uma layer de número menor fica atrás da de
número maior;
7. define a visibilidade inicial da layer (a qual pode ser modificada com um behavior),
elas podem ser padrão, herdar, visível e oculta;
8. define uma imagem de fundo no layer;
9. define uma cor de fundo no layer;
10. Tag, define a tag a ser utilizada pelo layer, as opções DIV e SPAN criam layers CSS
(Internet Explorer) e as opções LAYER e ILAYER criam layers para o Netscape;
11. Overflow (somente layers CSS), determina se aparece ou não barras de navegação
dentro dos layers que os elementos são maiores que o próprio layer;
12. define a área visível de uma camada. Especifica valores que representam a
distância, em pixels, dos limites da camadas.

Timelines

A timeline é a janela que vai controlar a animação no Dreamweaver. A timeline pode

modificar a posição, dimensão, visibilidade e a ordem das layers. A timeline também
pode mudar qualquer imagem desde que tenha o mesmo tamanho da original e
qualquer Behavior pode ser definido no meio de uma timeline. Porém é importante
respeitar as regras mais básicas da timeline:
1.a timeline requer navegadores 4.0 ou superiores;
2.para animar algo em uma timeline você deve usar uma layer; e
3.você não pode ter duas animações afetando o mesmo layer.
Abaixo tem a figura da janela da timeline (que pode ser executada indo em Window,
Timeline ou então pela janela launcher):

1. seleciona que timeline você quer visualizar, nota-se que você pode ter mais de uma
timeline sendo executada ao mesmo tempo no Dreamweaver;
2. mostra em que frame você está e permite que você vá até o primeiro, o anterior ou
o próximo frame;
3. determina a velocidade de frames por segundo que por padrão é 15 frames por
segundo;
4. Autoplay, quando clicado é inserido automaticamente um behavior de "Play
Timeline" no evento de carregar página;
5. Loop, quando clicado é inserido automaticamente um behavior de voltar ao primeiro
frame no último frame da timeline criando assim um loop;
6. mostra as behaviors relacionadas aos frames em sua timeline;
7. mostra os frames de sua timeline;
8. isto é o que aparece quando você insere uma layer em sua timeline, percebe-se que
o nome do layer é mostrado dentro da timeline para um reconhecimento mais rápido;
e
9. os pontos brancos marcam onde este elemento pode ser modificado, você pode
clicar e arrastar esses pontos para o frame desejado.

Agora, para criar uma animação você precisa fazer somente cinco coisas:
1. criar uma layer;
2. inserir a layer na timeline;
3. selecionar o frame onde está o segundo ponto branco;
4. modificar as propriedades da layer, tal como a posição na página; e 5. inserir um
behavior "Play Timeline".

Conclusão

Neste módulo nós vimos como funciona os behaviors, layers e a timeline e por
conseqüência agora nós podemos fazer qualquer tipo de animação possível com o
Javascript sem que seja necessário escrever, nem ao menos saber como escreve,
nenhuma linha de código fonte.