11
No passo anterior você acompanhou a criação do movimento para a primeira layer (com sua respectiva imagem inserida). Siga os mesmos procedimentos para implementar o mesmo tipo de animação para as outras layers de nosso "filme" (sempre tendo em mente que iremos reproduzir a animação de abertura da página anterior deste tutorial).

12
Assim sendo, e recapitulando: desenhe uma layer (em qualquer área de sua página), insira uma imagem dentro dessa layer, com as mesmas dimensões da imagem anterior, ajuste as dimensões da layer às dimensões da imagem (usando a paleta Properties para definir com facilidade essas dimensões), arraste a layer para o local onde deverá estar no início do filme (mantendo-a selecionada), clique em "Modify/ Timeline/ Add Object to Timeline", na barra de menus do Dream4 (sua layer será inserida na segunda linha da paleta Timelines, uma vez que a primeira já contém uma animação) e, a partir daí, siga os passos 8, 9 e 10 deste tutorial para definir o ponto final do movimento da layer na página.
Dica: use a paleta Properties para inserir os numerais corretos do posicionamento do início e fim da apresentação da layer. Exemplo: se a layer anterior inicia sua apresentação na página em "L=0px e T=10px" (onde "L" dedine o posicionamento 'à partir da borda esquerda' e "T" define o posicionamento 'à partir do topo da página') e você quer que a segunda layer inicie sua performance exatamente desse mesmo ponto, basta que você selecione a segunda layer, esteja onde estiver, e insira os mesmos numerais nos campos "L" e "T" da paleta Properties, e sua layer será automaticamente colocada na posição 'inicial' correta, na página - da mesma forma, se você quiser colocar a segunda layer exatamente ao lado da layer anterior, no ponto final de sua animação, basta considerar o posicionamento da layer anterior e 'subtrair' ou 'acrescentar' de seu montante (lado esquerdo e/ou direito) a quantidade de pixels da largura da layer1 (exemplo: se a Layer1 está localizada em "L=684px, T=21px" e tem "W=60px", para colocar a Layer2 do lado esquerdo da Layer1, você irá definir, na paleta Properties, o posicionamento final da Layer2 em "L=624px, mantendo o mesmo numeral de 21px para "T") - não é necessário que você ajuste manualmente o posicionamento de suas layers, arrastando-as pela página: basta inserir os numerais usando a paleta Properties. Como é simples, não? Experimente.

usando a paleta Properties você define a localização exata de suas layers - no exemplo acima, a layer2 está ao lado da Layer1

13
A primeira etapa está concluída. Se você optou por uma animação como a que apresentamos em nosso tutorial, você tem agora uma animação básica com quatro layers (cada uma com sua respectiva imagem), movimentando-se da esquerda para a direita em sua página. A paleta Timeline reflete o que acontece em seu filme, ou seja, quantas layers estão presentes, onde começa e onde termina o movimento de cada uma, e qual o caminho que cada uma segue, na página (entre outras coisas). Se você clicar na "keyframe1", da "Animation bar Primeira" (a barra de animação da primeira layer - cada uma das linhas contendo layers é chamada "animation channel" e cada barra de animação, dentro dessas linhas, é chamada "animation bar"), verá a posição inicial desse objeto na página. Se clicar na "keyframe15" verá a posição final do mesmo objeto - clicando num ponto qualquer (frame) entre a keyframe1 e a keyframe15 verá a layer "à caminho" entre o ponto inicial e o ponto final de seu movimento nesta fase. Note que todas as 'casas' da animação são chamadas "frames" (por default o Dream4 define 15 frames para toda animação inserida, o que pode ser modificado manualmente por você, logo em seguida), e todo frame contendo uma "propriedade", tal qual uma marcação de Início ou de Final da animação ou movimento, é sempre relacionado como "keyframe" - portanto, um keyframe é um frame contendo uma propriedade (e está sempre marcado com uma bolinha branca sobre ele).
Veja abaixo um exemplo de como isso será representado na paleta Timeline:

da forma como se apresenta, com todos os objetos (layers) começando na keyframe1, todas as layers iniciarão seus movimentos ao mesmo tempo.

com cada layer em um keyframe 'avançado', a segunda layer só se movimentará após o término do movimento da primeira, e a terceira após o término do movimento da segunda, e assim sucessivamente - se a layer Segunda estivesse inserida na keyframe10 e não na keyframe16, sua animação iniciaria enquanto a layer Primeira ainda estivesse à caminho

14
Mas como inserir as layers dentro dos "Animation channels" da forma como se apresentam no gráfico acima? O modo mais rápido é posicionar a layer no local, na página, onde deve iniciar sua apresentação, mantendo-a selecionada; em seguida clicar sobre a alça branca da layer e arrastá-la na direção da paleta Timelines soltando-a no local desejado: a paleta refletirá sua ação, mantendo a layer em seu devido lugar na página e na paleta Timeline . Veja o gráfico:

ao se arrastar a layer para o local desejado dentro do"Animation channel 2", a imagem desaparece e o cursor do mouse assume a aparência acima - solte o mouse para deixar o início do movimento da layer "Segunda" na keyframe16, enquanto que a layer que foi arrastada permanece em seu devido lugar na página

15
Outra forma de fazer isso é simplesmente clicar no meio de uma "animation bar" (isso fará com que essa barra fique em azul escuro, selecionada), e em seguida arrastar essa animation bar para o ponto desejado, dentro do respectivo "Animation channel". Note que esse movimento não interfere nas características intrínsecas da animação (tais quais o ponto em deverá estar na página e como deverá fazer sua apresentação) apenas no seu posicionamento na Timeline, indicando o momento exato de iniciar sua apresentação (se junto, antes ou depois que as outras layers). Veja o gráfico:

a animation bar "Segunda" sendo arrastada para o frame16

16
Isto posto, continuemos com nosso roteiro. Em nossa animação uma das layers, ao término da primeira fase, sai do lugar em que se encontra, no último ponto à direita, e caminha em movimento curvo para o primeiro lugar à esqueda, no início da fila das imagens. Vejamos como isso foi possível. Acompanhe o roteiro da segunda fase: vamos adicionar uma nova animação na Timeline, em que a layer Primeira irá se deslocar de um ponto a outro percorrendo um "caminho curvo", que iremos traçar para ela. Isso significa que teremos de adicionar mais um movimento (ou uma animação) à animação já existente para a layer Primeira - existem algumas formas de se fazer isso - escolhi o método de criar uma nova animação, em qualquer lugar dentro da Timeline, e posteriormente anexá-la à animação Primeira.

17
Na paleta Timeline, clique em qualquer lugar após a última keyframe de toda a animação, preferencialmente estando no "animation channel1" (isso fará com que todas as layers fiquem no lugar onde terminaram sua apresentação, e é a partir desse ponto que faremos a layer Primeira se deslocar do final para o início da fila de layers). Exemplo: se a última layer termina sua animação no frame "60" (vide o segundo gráfico do item 13 deste tutorial), você deverá clicar no frame "61" do animation channel1, para forçar todas as layers a tomarem seus lugares de chegada, respectivamente, ao mesmo tempo em que você já estará no local desejado para inserir uma nova animação.

18
Vá até a página e selecione a layer Primeira, clicando em sua alça branca, e em seguida retorne à paleta Timeline e clique com o botão secundário do mouse no frame "61" - no menu que se apresenta escolha o item "Record Path of Layer" (você acaba de dizer ao Dream4 que deseja criar um "caminho curvo" para a layer Primeira). Arraste a layer Primeira (sempre pela alça branca) pela página, para traçar o caminho curvo que ela deve seguir até o início da fila, e solte-a no local desejado. Acompanhe o gráfico:

a layer Primeira estava à direita, no final da fila de layers, e agora foi levada, em traçado curvo (note a linha cinza abaixo das layers) para o início da fila

note que uma animation bar foi adicionada ao canal de animação da layer Primeira, exatamente no frame "61" e já assumiu o nome da mesma, estando automaticamente inserida na animação da layer... e só será acionada quando a animação chegar ao frame"61"

19
Confira o resultado no Browser, pressionando a tecla "F12". Se preferir visualizar o resultado do filme sem sair da página de edição, clique e mantenha pressionado o botão "Play" do menu da paleta Timeline. Veja o gráfico:

o botão "Play" sendo pressionado - se quiser que sua animação inicie logo ao abrir sua página, ative o item "Autoplay" - se quiser que ela se apresente seguidamente, ative o item "Loop"

Ufa, que canseira! Também não é para menos: você trabalhou um bocado, hein? Tantas novas informações e tantas descobertas interessantes!! Agora você só precisa colocar em prática o que aprendeu - e se tiver alguma dúvida pelo caminho, não hesite em perguntar... é claro que farei o melhor possível para ajudá-lo - para tanto, clique em DÚVIDAS, e apresente sua questão, ok?

Não perca: o próximo tutorial estará mais quente do que nunca, com dicas e roteiros para você fazer ótimas animações. Até lá e...

Divirta-se!

Guacira Sampaio Rocha direitos reservados