Você já trabalhou com timeline no Dreamweaver?! Não sabe pra que serve esta ferramenta, que é no mínimo, interessante?! Pois bem, hoje iremos aprender um pouco mais sobre esta ferramenta, inclusive com um exemplo! ;)
Bem, a Timeline, ou simplesmente "linha do tempo", serve para muita coisa! Você pode trabalhar desde menus avançados e jogos até colocar aquelas imagens "flutuantes" em seu site! E é justamente este o exemplo que utilizaremos para explicar sobre o uso da Timeline! Vamos lá?! Primeiramente, você deve abrir o painel da Timeline, clicando em Window/Others/Timeline ou simplesmente apertando Alt+F9, conforme indica a figura:
Você terá um painel semelhante ao da figura abaixo:
Na figura acima você pode perceber que alguns itens estão numerados! Confira o significado de cada um:
1 - Neste campo é que fica o nome da Timeline que você está utilizando
2 - Indica o Frame que você está, que no caso é o Frame 1
3 - Indica o FPS (Frames per second ou frames por segundo)
4 - Autoplay: Caso você selecione esta opção, a timeline irá começar a rodar a animação automaticamente
5 - Selecione esta opção para que a animação fique em Loop
Agora que você já conhece a Timeline, vamos utiliza-la para construirmos um efeito bastante utilizado em alguns portais. Vamos começar selecionando a ferramenta de criação de camadas e criando uma camada no site, conforme indica a figura abaixo:
Agora, insira uma figura - no nosso caso um GIF - dentro da camada que você acaba de criar, ajustando a camada conforme indica a figura:
Agora, clique com o botão direito no Frame 1 da Timeline e escolha Add Object conforme indica a figura:
Perceba agora que a Timeline ficou com o objeto dentro dela:
Agora, para animarmos a nossa camada, clique no último frame de sua animação, que no nosso caso é o 15 e arraste a Camada para outro lugar da tela que você desejar. Marque também as opções: Autoplay e Loop e caso queira altere o número de FPS. Sua Timeline deve agora ter ficado mais ou menos assim:
Perceba na imagem acima um círculo que fiz de cor vermelha. Ao clicar nele, você percebe que o painel Behaviors está da seguinte forma:
O que o Behavior está indicando?! Bem, ele está informando para a Timeline: Ao chegar no Frame 16 vá para o Frame 1 da Timeline. Isso acontece porquê selecionamos a opção Loop da Timeline para que nossa animação não pare!
Agora muitos devem estar se perguntando: "Opa! O painel Behavior nos dá funções para controlarmos a Timeline?" E minha resposta é: Sim!!! Se você der uma olhada, no painel Behaviors há um menu chamado Timeline e ele nos dá algumas opções...
Dê uma boa "fuçada" neste painel para descobrir coisas realmente interessantes ! Bom, agora que já fizemos nossa animação, salve o documento e aperte F12 para ver uma prévia! Agora você já sabe pra que serve uma Timeline e pode começar a soltar a imaginação para criar efeitos interessantes! ;)
Produzido com base no software Macromedia Dreamweaver MX - Inglês
0 comentários:
Postar um comentário