Aproveitando que a Macromedia lançou o update para a versão 7.0 (MX 2004) do Dreamweaver e , na minha modéstia opinião , corrigiu o único ponto fraco da nova versão acrescentando a ferramenta Timeline no DW MX 2004 , vamos nessa matéria, abordar essa Ferramenta que permite ao Desenvolvedor incluir movimento aos seus projetos.

O Update 7.01 para Dreamweaver MX 2004 pode ser pego no site da Macromedia (20Mb). Além da inclusão da Timeline ele realiza a correção de diversos bugs que travavam o programa , corrige o problema de lentidão , permitindo ao DW funcionar bem mais rápido no Windows.

Antes de começarmos na Ferramenta propriamente dita, vale ressaltar alguns pontos a serem considerados para sua aplicação.

1 > as linhas de tempo necessitam de um navegador 4.0 ou superior ;
2 > para que a linha de tempo possa animar um objeto , esse objeto deve obrigatoriamente estar inserido em uma Layer (Camada) ;
3 > você pode iniciar um evento em qualquer local de uma linha de tempo ;
4 > você pode incluir várias animações em uma mesma linha de tempo ;
5 > você pode ter diversas linhas de tempo que animam diversas camadas simultaneamente.

Criando suas animações

Pelo Painel Timelines você gerencia suas linhas de tempo. para acessá-lo vá em Menu Window > Timelines. ele possui basicamente 4 áreas importantes:

1. Controles de Timelines > inclui a lista drop-down Timeline para selecionar a linha de tempo. Contém também os botões: Rewind , Back e Play , a caixa de texto Fps e as caixas de seleção Autoplay e Loop

2. Canal Behaviors > mostra o posicionamento de qualquer comportamento na linha de tempo

3. Quadros > exibe o número de quadros para todas as linhas de tempo e o cabeçote de reprodução

4. Canais Animation > representa as animações de qualquer camada e imagem incluída.

Imagem do IPB
figura 01 - Painel Timelines

Você pode inserir no painel Timelines uma camada de mais de uma forma. por exemplo , você pode inseri-la em uma linha de tempo por meio dos Menus (Menu Modify > Timeline > Add Object to Timeline) ou até mesmo arrastando-a para uma linha de tempo. Note que ao fazer qualquer um dos processos . O DW insere uma Barra de Animação com duração de 15 quadros rotulada com o nome do objeto.

Imagem do IPB
figura 02

Para adicionar outro objeto, repita o mesmo processo. Se você quiser adicionar na mesma Barra de Animação outra camada , clique no quadro que você quer que ela fique e repita o processo.

Imagem do IPB
figura 03

Se você clicar com o botão direito do Mouse em seu Painel Timelines , você terá várias opções de configurações.

Modificando sua Timeline

Ao adicionar um objeto , perceba na linha de tempo que a Barra de Animação possui um círculo aberto no início e no fim. Esse círculo aberto determina um Quadro-Chave. É por intermédio desse Quadro-Chave que você especifica uma alteração no estado do objeto. O que isso quer disser ? Por exemplo, quando você insere uma camada em seu site com uma imagem , o primeiro quadro-chave tem as mesmas propriedades do último quadro-chave (posição , tamanho , visibilidade etc ...) Para que uma animação ocorra você tem que alterar alguma dessas propriedades. Vamos mover uma camada rapidamente pela tela:

1. crie uma camada ;
2. adicione uma imagem a essa camada ;
3. abra o Painel Timelines ;
4. arraste a camada para o Painel Timelines e solte o mouse ;
5. selecione o quadro-chave de término na barra de animação da camada ;
6. na janela de seu documento pegue a alça de seleção da camada e arraste-a para uma nova localização.

Uma linha liga a posição inicial e a posição final. Essa linha se chama: caminho da Animação.

Imagem do IPB
figura 04 - Caminho da Animação

7. para visualizar a animação , clique no botão "Rewind" no Painel Timelines e em seguida clique e mantenha pressionado o botão "play".

Para você alterar suas Barra de Animação , clique com o botão direito nela e você terá muitas opções: AddFrame , RemoveFrame , AddObject , RemoveObject etc... para mover totalmente a Barra , clique e arraste-a para onde quiser.

Controles Timelines

Você não precisa usar seu navegador para visualizar uma linha linha de tempo. Os Controles Timelines permitem a você fazer ajustes.

Imagem do IPB
figura 05 - Controles Timelines

1 > botão rewind - move o cabeçote de reprodução para o primeiro quadro da linha de tempo
2 > botão back - move o cabeçote de reprodução para o quadro prévio da linha de tempo
3 > indicador de quadro - indica em qual quadro está a animação
4 > botão play - move o cabeçote de reprodução para o próximo quadro e se for mantido pressionado , reproduz a animação
5 > Fps (velocidade de projeção)
6 > autoplay - se você marcar essa opção , assim que o download de sua página for concluido , sua animação será iniciada.
7 > loop - assinale essa opção para que sua animação seja repetida quando alcançado o quadro final. Você pode definir quantas vezes essa repetição será feita. Após marcar "Loop" vá no painel Behaviors e clique em "Go To Timeline Frame" Na caixa que se abre , você pode em "Loop" determinar quantas vezes será repetido , em "Go to Frame" , você determina qual será o primeiro quadro dessa repetição. Em "Timeline" você determina em qual Timeline aplicar.

Imagem do IPB
figura 06 - Go To Timeline Frame

Quadros Chave

Você pode fazer suas animações terem mais de um movimento , para isso , basta adicionar quadros-chave em sua linha de tempo. Clique com o botão direito do mouse em um quadro de sua Barra de Animação e "AddKeyFrame" ou escolha um quadro em sua Barra de Animação e Menu Modify > Timelines > AddKeyFrame. Exemplo:

Imagem do IPB
figura 07

Painel Timelines:

Imagem do IPB
figura 08

Note que além de aumentar o número de quadros dessa Barra de Animação , inseri um quadro-chave no quadro 10 e outro no quadro 20 . Alterando em ambos, a posição da camada.

Alterando a Velocidade da Animação

Você pode , ou clicar e arrastar o último quadro-chave de sua animação , aumentando o tamanho do seu Caminho de Animação, ou você pode alterar o valor do Fps do Painel Timelines. Se for aumentado seu valor , a animação será acelerada e vice-versa.

Em posteriores matérias , estarei abordando outros assuntos relacionados a Ferramenta Timeline como por exemplo , como inserir caminhos precisos a suas Camadas em um movimento e inserindo Comportamentos a Timeline.

Você gostou? Comente no fórum!

Mais recentes em HTML e Editores Visuais

Remover quebras de linha de um código-fonte
Por Manito - Juntar todo código em uma linha!...
O que são tags?
Por Raphael Leão - O que são tags? - tags são os comandos do html. um...
Guia prático de html 2007 (atualizado e revisado)
Por Tiago Souza - Aborda html, xhtml, css, padrões web, web standards, dicas, etc...
Tabela de acentos e caracteres especiais
Por marcinha - Entities e ascii em html...
Elementos e atributos html em desuso segundo w3c
Por luishenrique - <style type="text/css"> - table.elementos,...

Ver mais Artigos de HTML e Editores Visuais.

Ver e retirar outras dúvidas no fórum Webly.

Alguns Direitos Reservados | RSS | O Fórum

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com