Criando uma animação utilizando layers e a timeline no Dreamweaver MX

Quando você entra nos grandes portais e vê aqueles banners cruzando a tela, você pensa: "mas como será que se faz isso ?!? " Esse tutorial busca responder essa pergunta de modo fácil e dinâmico, ensinando você a utilizar duas ferramentas do Dreamweaver para realizar essa tarefa.
Clique aqui para ver um exemplo do que você vai aprender a fazer nesse tutorial.
Pois bem, vamos ao que interessa: abra uma nova página no Dreamweaver e desenhe um LAYER nela no topo esquerdo da mesma. Para desenhar um layer selecione a opção DRAW LAYER na barra de ferramentas, clique onde você deseja criar o layer e sem soltar o botão do mouse arraste o mesmo para ajustar o tamanho do layer.

Você deve obter um resultado parecido com a figura abaixo. Note que existe uma aba na área superior esquerda do layer: ela é usada para selecionarmos o layer mais facilmente e movimentar o mesmo pra qualquer lugar na página entre outras coisas.

Clique dentro do layer e insira uma imagem dentro dele: para inserir a imagem clique no botão Image da barra de ferramentas e procure no seu computador a figura que gostaria de usar.

Selecione o layer com a figura dentro, clique com o botão direito do mouse para abrir um novo menu de opções do layer. Selecione e clique em ADD to Timeline

Aparecerá um novo painel como o da imagem abaixo. Aqui vale a pena ficarmos atentos para alguns detalhes como:
- o ponto mais escuro no início da timeline representa o layer que você criou na posição 1 ou seja, de onde a animação vai começar a acontecer.
- o ponto mais escuro no final da linha destacada em azul representa a posição final do layer que você criou. Ou seja, o ponto onde a animação deve acabar.
- os números indicam a velocidade com que a animação vai ocorrer: quanto mais curto o intervalo selecionado entre o ponto de início da animação e o seu final, mais rápida a animação toda irá ocorrer, isto é, se você selecionar um intervalo entre 1 e 200, a animação ocorrerá mais lentamente já entre 1 e 15 será extremamente rápida.

No nosso exemplo, extendemos o ponto final para o ponto 45 da timeline (para isso basta clicar na bolinha mais escura final e arrastar até o número desejado). Agora atente para um detalhe importante: o marcador vermelho deve estar exatamente sobre a bolinha escura final para irmos para o próximo passo - se ele estiver em qualquer outro lugar com certeza o resultado final não será o esperado.

Agora nós vamos definir onde o fim da animação deve acontecer: selecione novamente o layer na página que você está construindo e o arraste até onde você quer que a animação vá. Pode ser pra cima, pra baixo, pra esquerda ou direita e no nosso exemplo seguimos da esquerda pra direita. Se você fez tudo certo, ao definir o ponto final da animação, uma linha (indentificada pelo retângulo azul) aparecerá indicando a direção da sua animação. Clique no indicador vermelho dentro da timeline (indicado pelo retângulo vermelho) e o arraste em direção ao número 1 da timeline.

Agora você só precisa definir no box da timeline que a animação deve ser automaticamente executada quando sua página web for carregada: para isso selecione o box AUTOPLAY sinalizado pelo círculo vermelho. Para tornar a animação infinita (pra ela ficar em looping) basta selecionar o box LOOP indicado pelo círculo azul. O campo circulado em preto é para você nomear a timeline (um recurso muito útil quando você está utilizando várias timelines) ...

Nota - Quando você seleciona a opção looping aparece um traço na parte superior da timeline: ele é o item que indica que a timeline deve retornar ao ponto 1 e recomeçar a animação. Caso você venha a mexer na bolinha final na timeline, você deve sempre lembrar de levar junto o traço - ou então sua animação vai dar um looping no meio (ou só vai dar um looping depois de muito tempo que a animação acabou).

Dicas:
1. A imagem dentro do layer pode conter link.
2. Combine a timeline com behaviors: você pode aplicar efeitos de show/hide layers em imagens ou texto na página podendo assim fazer a animação aparecer ou sumir da tela por completo.
3. Para posicionar o layer inicial na lateral esquerda fora da página (para que por exemplo a imagem comece totalmente fora da página e entre gradualmente), utilize as setas do teclado para movimentar o layer (pois o mouse nem sempre alcança a borda).