|
1
Agora que você já tem alguma intimidade com as
Layers, e já tem alguma noção do que é
um DHTML, com certeza vai querer ir um pouquinho 'além',
com elas, não é? Sabia que elas podem, literalmente,
dançar na página? É verdade... com elas,
e o Dreamweaver 4, você poderá criar um pequeno
filme, sem precisar ser um expert, e sem usar nenhum controle
ActiveX, plugins ou Java applets - para isso você só
vai precisar aprender a usar o recurso "Timelines",
do
Dream4, que
vai criar para você uma animação a partir
de um Java Script - e tudo isso automaticamente: você
só terá de "dizer" ao Dreamweaver, através
dos comandos certos, o que vai querer "animar" em
sua página. Que delícia, hein? Então vamos
ver isso de perto! Para tanto, iremos produzir um pequeno filme,
especialmente leve, com quatro imagens em movimentos simples
- exatamente como o filme que você viu logo que abriu
esta página.
2
Você
está com seu arquivo HTML pronto e aberto no Dreamweaver
4. Já escolheu as imagens que irá utilizar no
filme, dentro das layers (é isso mesmo... são
as layers que se movimentam, levando junto tudo o que está
dentro delas), e já salvou-as todas (as imagens, é
claro) dentro da pasta adequada. O próximo passo será,
então, desenhar as layers que irão carregar as
imagens.
Nota: se desejar, poderá colocar o que queira dentro
dessas layers, inclusive texto. Para o nosso exercício,
escolhi imagens (sempre muito leves, hein?) com as mesmas dimensões.
3
O segundo passo será desenhar a primeira layer.
Pressione as teclas CTRL+F2 para abrir a paleta Objects (se
já não estiver aberta). Em "Common"
clique no ícone "Draw Layer", e desenhe uma
layer em qualquer lugar de sua página (você já
sabe como... mas se quiser relembrar, confira o tutorial "8").
Logo após desenhar, repare que o ponto de inserção
do mouse já se encontra automaticamente pulsando dentro
da layer, pronto para receber a imagem ou o texto de sua escolha.
Como já combinamos anteriormente, vamos colocar aqui
a primeira das imagens já escolhidas para o nosso exercício,
OK? Dá uma olhadinha em como ficou:
|
|
|
a
layer recém desenhada, com uma imagem inserida,
e automaticamente selecionada
|
4
Note, no gráfico acima, que as alças de
seleção (aqueles quadradinhos pretos) estão
ao redor da imagem, indicando que ela, a imagem, está
selecionada. Para selecionar a layer, e não a imagem,
clique sobre a alça branca, superior, e verá que
o resultado será parecido com o do gráfico abaixo:
|
|
|
ao
clicar sobre a alça branca, a layer será
selecionada
|
5
Assim sendo, selecione a layer e pressione as teclas CTRL+F3
para abrir a paleta Properties (se já não estiver
aberta), e veja como essa paleta apresenta algumas informações
referentes à layer que acabou de selecionar. Confira
no gráfico abaixo uma representação disso:
|
|
|
nesse
exemplo, a paleta reflete a Layer1, que no momento se
encontra nas coordenadas 1678px a partir do topo da página
e 512px a partir da borda esquerda, e mede 140px de largura
por 126px de altura.
|
6
Arraste
a layer com a imagem para o local em que deseja que ela esteja
no início do filme que iremos preparar - ajuste também
as dimensões da layer para que fique do mesmo tamanho
da imagem: se a imagem mede 60 x 60px, coloque as mesmas medidas
nos campos "W" e "H" da paleta Properties
(estando a layer em questão selecionada).
7
Após
colocar a layer (selecionada) com a imagem no local, na página,
em que deverá estar no início do filme, clique
em Window/ Timelines (ou pressione SHIFT+F9) para exibir a paleta
Timelines. Na barra de menus do Dreamweaver 4 clique em "Modify/
Timeline/ Add Object to Timeline". Sua layer aparecerá
inserida na primeira linha (Animation channel) da paleta Timeline,
e será representada por uma barra azul claro (Animation
bar), com um ponto branco no início (keyframe 1) seguido
do nome da layer, e um ponto branco no final (keyframe 15).
Veja uma representação reduzida dessa paleta:
|
|
|
a
primeira layer de seu filme (em destaque azul) definida
para apresentar quinze frames por segundo, durante sua
animação
|
8
Clique, para selecionar, na marca da 'keyframe' final na barra
da primeira animação, exatamente na bolinha branca
na altura do número quinze, para começar a definir
o lugar em que a layer deverá estar ao final de sua animação.
Veja o gráfico:
|
|
|
toda
keyframe é representada por uma bolinha branca,
e indica alguma propriedade do objeto, como posicionamento,
por exemplo
|
9
Retorne
ao documento e arraste pela página a Layer1 (pela alça
branca) até o ponto em que deverá estar no final
da animação, e solte o mouse: uma linha cinza
irá aparecer na página, mostrando o caminho que
a layer seguiu até lá. Veja o gráfico:
|
|
|
a
Layer1 no ponto final de sua animação mostrando,
através da linha cinza, ao seu lado, o caminho
que percorreu para chegar até ali
|
10
Novamente
na paleta Timelines, selecione o campo "Autoplay"
para fazer com que a animação comece logo na abertura
da página, no Browser (essa ação vai acionar
um aviso de que esse comportamento será adicionado ao
seu filme - clique "OK" para continuar), e pressione
a tecla "F12" para ver como ficou o seu filme, até
aqui.
Continua...
|
