3 - Recursos Avançados de Animação

3 - Recursos Avançados de Animação
O Stage, conforme dissemos anteriormente, é onde todo o filme acontece. Mas o próprio
Stage pode ter suas propriedades (dimensões, cor etc) alteradas. No entanto, estas propriedades
são únicas para um mesmo filme. Isto significa que, se definirmos a cor do Stage como sendo
preto, não podemos ter em uma outra parte do mesmo filme um Stage azul.
Para aprendermos mais alguns recursos do Director 8.0, vamos criar uma apresentação
de um relatório financeiro anual, de uma fábrica de violinos. O nosso objetivo é que a abertura
seja parecida com o mostrado na figura 42.
Figura 42 - Esquema Básico da Apresentação da Empresa Strauss S.A.
Property Inspector
A primeira alteração a fazer é sobre a cor e as dimensões do Stage. Assim, vamos criar
um novo filme e alterar suas propriedades.
1. Clique sobre File / New / Movie;
Ao criar um novo filme, o Director utiliza como padrão, as mesmas propriedades do
filme anterior. Assim, como o Stage do filme exercício8.dir possuía uma dimensão de 640 x 480
e cor branca, o novo filme será criado com estas mesmas características.
2. Clique modify / Movie / Properties;
3. No campo Stage Size, escolha 640 x 480;
Figura 43 - Caixa de Diálogo Property Inspector
O tamanho escolhido equivale ás dimensões de um monitor de 13 ”. Desta formas, um
filme com estas dimensões será exibido adequadamente em todos os monitores. Podemos definir
um tamanho maior, mas se 46 o monitor do usuário for menor, parte do Stage não poderá ser
visto.
4. No campo Stage Fill Color, escolha Preto;
5. Pressione OK.
6. Salve o filme como strauss.dir.
O nosso próximo passo é criar a animação do logotipo da empresa. Já comentamos
anteriormente que os keyframes são
os pontos-chaves de uma animação, pois, são nestes pontos onde podemos fazer
modificações de algumas propriedades do Sprite. Antes de inserir o keyframe, no entanto,
vamos fazer uma animação em linha reta, em direção ao centro do Stage.
Vamos utilizar, então, o arquivo que acabamos de criar: strauss.dir.
1. Abra o arquivo strauss.dir;
2. Clique File / Import;
3. Importe o arquivo violino.bmp;
4. Na janela Score, clique sobre o Frame 1 do Canal 1.
É muito importante que você especifique sempre o frame e o onde será inserido algum
elemento. Isto evita que o uma posição inadequada dentro do Score, isto não afete seu
posicionamento no Stage. Mas, a organização da janela Score é fundamental para que outra ou
mesmo você, possa localizar rapidamente os de um filme;
5. Na janela Cast, clique sobre o cast member Violino e arraste-o para o canto inferior
esquerdo do stage, deixando apenas uma pequena parte visível;
Sprite
Figura 44. Posicionamento do Sprite 1 no Stage
6. Na janela Property Inspector, altere o Ink para Background Transparent;
7. Clique sobre o frame 28 do sprite 1 (para selecioná-lo) e shift-clique o frame 40 do
canal 1;
Você deve ter observado que uma moldura retangular "piscou" rapidamente ao redor dos
sprites 28 a 40. Isto indica a faixa de sprites que estamos selecionando. Estamos estendendo o
sprite 1 para que a animação fique mais "suave".
8. Clique Modify / Extend Sprite;
9. Clique sobre o frame 40 do sprite 1;
10- No Stage, clique e arraste o Sprite 1 (violino) até o centro superior do Stage;
Figura 45 - Reposicionando o Sprite 1
11. Salve o filme. Rode o filme
Keyframes
Para que possamos fazer com que o movimento do sprite 1 siga uma trajetória diferente
de uma reta, vamos inserir um keyframe.
1. Abra o arquivo strauss.dir;
2. No Score, selecione o Sprite 1;
3. Posicione a Cabeça de Leitura e Gravação sobre o frame 15.
Figura 46 - Posicionamento da Cabeça de Leitura e Gravação
4. Clique Insert / Keyframe;
5. No stage, arraste o violino até a parte superior da tela;
Figura 47. Alteração da Posição do Keyframe do Sprite 1
É importante notar que, para se alterar o posicionamento do violino, o frame 15 do sprite
1 deve estar selecionado.
6. Salve o filme. Rode o filme;
Observe que, ao posicionarmos o keyframe no frame 15, deixamos poucos sprites para
que o Sprite 1 se movimente da parte inferior até a parte superior do Stage. Assim, a velocidade
de deslocamento do sprite parece maior do que a velocidade na segunda parte do movimento (da
parte superior até o centro). Com isto, parece que o violino foi atirado para o alto e, após atingir
seu ponto máximo, ele "flutua" até o centro do Stage, produzindo um efeito bastante
interessante.
Uma vez que já vimos como inserir um keyframe, vamos utilizar este recurso para
realizar a animação do nome da empresa e do titulo do relatório. Para isto vamos utilizar,
também, dos recursos de texto do Director 8.0.
Inserindo Texto
O Director oferece recursos para se inserir textos em uma aplicação multimídia,
funcionando como um editor de textos básico. No nosso exemplo, vamos fazer com que o nome
da empresa comece a se movimentar, após o logotipo ter passado por seu ponto mais alto.
l. Abra o arquivo strauss.dir;
2. Abra a janela Score e clique sobre o Frame 20 do canal 2.
3. Abra a janela Cast e clique sobre o primeiro Cast Member vazio (cast member 3);
4. Clique sobre o menu Window / Text;
Figura 48 – Janela Text
Antes de se digitar qualquer texto na Janela Text, é importante definir as características a
serem utilizadas.
5. Clique Modify / Font;
Figura 49. Caixa de Diálogo Font
6. Na lista de fontes, escolha Arial. No campo Style, clique sobre Bold;
7. Abra o campo Size e escolha 48;
8. Clique sobre o campo Color e escolha uma cor próxima ao dourado;
9. Clique OK;
10- Na janela Text, digite STRAUSS S.A.;
11. No campo Cast Member Name, digite Strauss;
Figura 50 - Campo Cast Member Name
12. Feche a janela Text;
13. Arraste o Cast Member Strauss para o canto superior direito, de forma que o texto
fique praticamente todo fora do Stage;
Figura 51 - Posicionamento do Sprite 2
14. Na janela Property Inspector, com o Sprite 2 selecionado, altere o campo Ink para
Background Transparent;
Observe, na janela Score, se o Sprite 2 inicia no frame 20. Caso isto não tenha
acontecido, selecione o sprite 2 e arraste-o até o frame 20. Note que esta defasagem de 20
frames irá fazer com que o texto comece seu movimento, somente quando o sprite 1 atingir seu
ponto mais alto.
15. Posicione o mouse sobre a última célula do Sprite 2 e, quando ele se transformar em
uma seta preta, arraste-o para o Frame 40 do Sprite 2;
16. Clique sobre o Frame 40 do Sprite 2;
17. No Stage, arraste o Sprite 2 para uma posição abaixo do logotipo da empresa (o
violino) ;
18. Salve o filme. Rode o filme.
Se compararmos a movimentação do Sprite 1 e do Sprite 2, vamos observar que o
Sprite 2 possui uma velocidade maior. Vamos, então, aumentar o número de frames do Sprite 2
para que seu movimento pareça mais suave. .
1. Na janela Score, clique sobre o Frame 40 do Sprite 2 e shift-clique sobre o Frame
60 do Canal 2;
2. Clique Modify / Extend Sprite;
3. Rode o filme.
Enquanto o filme está rodando, observe que ele está em "loop", ou seja, ao chegar ao
último frame ele retorna automaticamente para o primeiro. Isto está ocorrendo pois, o botão
Loop Playback; na janela Control Panel está pressionado. Se você clicar sobre este botão, o
filme irá rodar até o último frame e, após isso, irá parar.
Figura 52 - Botão Loop Playback
4. Na janela Score e clique sobre o Frame 40 do Sprite 1;
5. Clique Edit / Copy Sprites;
6. Clique sobre o Frame 41 do Canal 1.
7. Clique Edit / Paste Sprites;
8. Com o frame 41 do sprite 1 selecionado, shift-clique o Frame 60 do Canal 1.
9. Clique Modify / Extend Sprite;
10.Salve o filme. Rode o filme
É importante observar que o procedimento que acabamos de fazer é diferente do que
vínhamos fazendo até agora! Note que ao estendermos o Sprite 1, nós primeiro copiamos o
conteúdo do Frame 40 do Sprite 1 para o Frame 41 do mesmo canal e, só então estendemos o
sprite. No entanto, quando, anteriormente, estendemos o Sprite 2, nós o fizemos diretamente a
partir do Frame 40 (sem copiar este conteúdo para o frame 41). Observe esta diferença na figura
53, que mostra como estavam os sprites antes e depois do Extend Sprite.
Figura 53 - Diferenças no Resultado da Função Extend Sprite
No Sprite 2, os keyframes eram os Frames 20 e 40. Após estendermos o sprite, os
keyframes passaram a ser os Frames 20 e 60. Desta forma, o Director refez o movimento do
Sprite 2, tomando como base as informações dos keyframes 20 e 60. Com isto o movimento
ficou mais suave, pois, temos mais frames para que o movimento se realize.
No caso do Sprite 1, nós criamos um novo segmento de sprite, ou seja, definimos o
Frame 41 (keyframe) como inicio e o Frame 60 como frame final (keyframe). O Director,
então fez o movimento entre os dois keyframes. Como não houve mudança de posição, o sprite
permaneceu imóvel.
Vamos inserir um keyframe no Sprite 2 para que o movimento não fique em linha reta.
1. Selecione todo o Sprite 2;
2. Na área da Cabeça de Leitura, clique sobre o Frame 50;
Estamos deixando mais frames para a primeira parte do movimento, de forma que a
mesma fique mais suave. Por outro lado, a segunda parte do movimento vai ficar mais rápida.
3. Clique Insert / Keyframe;
4. No Stage, arraste o Sprite 2 para uma posição abaixo e á direita do logotipo da
empresa;
5. Salve o Filme. Rode o filme.
A única coisa que falta fazermos para atingirmos nosso objetivo inicial é criar o texto e
fazer a animação do titulo do relatório. Para isto vamos utilizar o canal 3.
1.Na janela Score, clique sobre o Frame 60 do Canal 3;
No Sprite 3, vamos criar o titulo Relatório Financeiro.
2. Na janela Cast, clique sobre o primeiro cast member vazio;
3. Clique window / Text.
4. Clique Modify / Font;
5. Faça as alterações necessárias para que a fonte fique com as seguintes características:
Arial, Bold, 18 e Vermelho;
6. Na janela Text, digite RELATÓRIO FINANCEIRO;
7. No campo Cast Member Name, digite Relatório;
8. Feche as janelas Text e Score;
9. Abra a janela Cast;
10. Arraste o Cast Member Relatório para a parte central inferior da tela, deixando
apenas uma parte do texto visível;
11. Abra a janela Property Inspector e altere o campo Ink para Background
Transparent;
12. Posicione o mouse sobre a última célula do Sprite 3 e, quando o ponteiro mudar para
uma seta preta, clique e arraste a marca de fim de sprite para o Frame 80;
13. Estenda o Sprite 1 até o Frame 80;
Neste caso estamos copiando um sprite que está fixo em uma posição.
14. Estenda o Sprite 2 até o Frame 80;
Observe que se você estender diretamente o Sprite 2 (clique Frame 60 e shift-clique
Frame 80), você estará ampliando o número de frames para que o movimento o sprite 2. Mas o
que queremos é copiar o sprite em sua posição final, ou seja, no centro do Stage. Para isto, você
deve, antes de estender o Sprite 2, copiar o Frame 60 para o Frame 61 e, após isto, estender o
sprite até o Frame 80.
Figura 54 – Diferenças no Resultado da Função Extend Sprite
15. Clique sobre o Frame 80 do Sprite 3;
16. No Stage, arraste o Sprite 3 para uma posição logo abaixo do Sprite 2;
17. Salve o filme. Rode o filme.
Nossa abertura já está concluída. Observe que utilizamos poucos recursos do Director e
já foi possível realizar uma animação interessante. O mais importante é que os recursos
utilizados até aqui, são utilizados em muitos tipos de animação em títulos multimídia.
Film Loop
O film loop é um recurso muito utilizado para se fazer animações. Quando se cria um
film loop, cria-se um cast member que agrupa toda uma seqüência de animação (ou mesmo
sprites fixos). Vamos criar nosso primeiro film loop, a partir da animação feita no exemplo
anterior.
1. Abra o arquivo efeitoPerspectiva.dir, caso ele ainda não esteja aberto;
2. Na janela Score, selecione todo o Sprite 1;
3. Clique lnsert / Film Loop;
4. Na caixa de diálogo Create Film Loop, digite Film Loop 1 e clique OK;
Figura 58 - Caixa de Diálogo Creat Film Loop
5. Na janela Score, certifique-se de que o Sprite 1 está selecionado;
6. Clique Edit / Clear Sprites;
Uma vez que o nosso film loop está criado, podemos apagar a seqüência de animação no
Score.
7. Na janela Cast, selecione o cast member Film Loop 1 e arraste-o para o frame 1 do
canal 1;
Aqui introduzimos uma importante diferença! Quando cast member diretamente para o
Stage, nós o posição que desejarmos. No entanto, usando o cast member para um frame na
janela Score, o posiciona o sprite no centro do Stage.
8. Salve o filme com o nome filmLoopl.dir;
9. Rode o filme;
Aparentemente, não houve nenhuma diferença com relação á animação anterior. No
entanto, existe uma grande diferença, que veremos a seguir.
10. Pare o filme.
11. Abra a janela Score, posicione o mouse sobre a marca de fim do Sprite 1 (última
célula) e arraste-a para o Frame 1.
12.Rode o filme.
Esta é a diferença! Com um filmLoop, podemos fazer uma seqüência de animação em
um único frame!
13. Salve o filme.
Um aspecto importante a ser ressaltado, com relação aos Film Loops é que não podemos
alterar os cast members que geraram o Film Loop. Assim, uma vez criado, um Film Loop
não ode ser alterado. Caso seja necessário alterar algum Cast member que faz parte de um film
loop, nós devemos recriar o film loop, após ter feito a alteração necessária no cast member.
Span Duration
Sempre que arrastamos um cast member para o Stage ou para a janela Score, o Director
“ajusta” o tamanho do sprite para 28 frames. Isto porque, em geral, queremos fazer uma
animação e precisaremos de uma seqüência de frames. Mas vamos alterar esta propriedade e,
adicionalmente, vamos criar um film loop com um efeito de Blend.
l. Abra o filme filmLoopl, caso ele não esteja aberto;
2. Salve o filme com o nome de efeitoBlend.dir;
3. Abra a janela Score e selecione o Frame 1 do Sprite 1;
4. Clique Edit / Clear Sprites;
5. Clique File / Preferences / Sprite;
6. Na caixa de diálogo Sprite Preference, altere o camp Span Duration para 1 e clique
OK;
Figura 59 - Caixa de Diálogo Sprite Preferences
7. Abra a janela Cast e arraste o cast member balao para o Frame 1 do Canal 1 e altere
o Ink para Background Transparent;
8. Estenda o Sprite 1 até o Frame 20;
9. Selecione o Frame 20 do Sprite 1;
10. No Stage, arraste o Sprite 1 para o canto superior esquerdo do Stage;
11. Na janela Score, com o Frame 20 ainda selecionado, altere o Blend para 40;
12. Salve o filme. Rode o Filme.
Como a animação já está criada, vamos agora criar um film loop que irá substituir esta
seqüência de animação.
l. Selecione todo o Sprite 1;
2. Clique lnsert / Film Loop;
3. Digite Blend, como nome do film loop. Clique OK;
4. Delete todo o sprite 1(Edit / Clear Sprites);
5. Na janela Score; clique sobre o Frame 1 do Canal 1;
6. Feche a janela Score;
7. Arraste o cast member Blend para o canto inferior direito do Stage;
8. Salve o filme. Rode o filme;
Um Film Loop pode incluir vários sprites, ao invés de apenas 1. Para praticar isto,
transforme toda a seqüência de animação do filme Strauss.dir em um único film loop. O roteiro
básico que você deve seguir é apresentado a seguir.
l. Salve o filme com outro nome (Por exemplo, straussLoop.dir)
2. Selecione os 3 sprites;
3. Clique Insert / Film Loop;
4. Delete os 3 sprites;
5. Arraste o cast member film loop para o Frame 1 do Canal 1.
Recursos para Rotação de Imagens
A janela Paint inclui algumas ferramentas que possibilitam a rotação de imagens. Para
utilizar esta ferramenta, vamos fazer algumas alterações na animação feita no filme strauss.dir.
Na animação original, o violino se movimenta da parte inferior esquerda do Stage para o centro.
No entanto, o próprio violino fica estático. Vamos fazer com que o violino, enquanto se
movimenta, faça um loop de 360°.
1. Abra o arquivo strauss.dir;
2. Abra a janela Cast e selecione o cast member Violino.
3. Pressione CTRL + C.
4. Clique sobre o primeiro cast member vazio e pressione CTRL + V.
5. Digite Violino 1, como nome deste novo cast member.
6. Dê duplo-clique sobre o cast member Violino 1, para abrir a janela Paint;
7. Clique sobre o botão Marquee e mantenha o mouse pressionado por alguns instantes,
até que o menu correspondente apareça;
Figura 61 - Menu do Botão Marquee
8. Escolha a opção Shrink;
9. Na Área de Desenho, clique em uma posição á esquerda e acima da imagem do
violino e, mantendo o mouse pressionado, arraste-o para baixo e para a direita, até que todo o
violino esteja selecionado. Solte o mouse;
Figura 62 - Seleção do violino
10. Na parte superior da janela Paint, clique sobre Rotate Right;
Figura 63 - Botão Rotate Right
11.Clique mais 3 vezes sobre Rotate Right;
Neste ponto o violino está novamente na posição original.
12. Clique sobre Xtras / Auto Distort;
13. Na caixa de diálogo Auto Distort, digite 8 para que sejam criados oito novos cast
members. Clique sobre Begin;
Figura 64 - Caixa de Diálogo Auto Distort
14.Feche a janela Paint;
15. Na janela Score, clique sobre o Frame 1 do Canal 4;
Vamos utilizar o canal 4, apenas como base para criar o film loop do violino girando.
16. Na janela Cast, selecione todos os oito novos cast members (clique sobre o primeiro
e shifl-clique sobre último) ;
17. Clique Modify / Cast to Time
Observe, na janela Score, que foi criado um sprite no Canal 4, com oito frames. Antes de
transformar este sprite em um film loop, vamos alterar o Ink, pois caso contrário o film loop
final ficará com Ink do tipo Copy, ou seja, com um "quadrado Branco".
18. Na janela Score, com o Sprite 4 selecionado, altere o ink para Background
Transparent;
19. Clique Insert/Film Loop;
20. Digite logoAnimado como nome do film loop e clique OK.
21. Com o Sprite 4 ainda selecionado, clique Edit / Clear Sprites;
Agora já podemos substituir o cast member do primeiro segmento do Sprite 1 pelo film
loop logoAnimado.
22. Selecione os Frames 1 a 40 do Sprite 1;
Para isto, basta clicar sobre um dos frames intermediários. Por exemplo o Frame 2.
23. Na janela Cast, selecione o cast member logoAnimado;
24. Clique Edit / Exchange Cast Members;
25. Salve o filme. Rode o filme.
Analisando nosso filme, notamos que após chegar ao centro, o violino fica numa posição
vertical. Vamos alterar isto, para que ele fique um pouco mais inclinado para a direita. Para
fazer isto, poderíamos criar um novo cast member (violino inclinado) e, depois disso, utilizar o
recurso Exchange Cast Member. Mas, lembre-se que o sprite é uma cópia, no Stage, do cast
member. Assim, se alterarmos o cast member original, alteraremos todos os sprites que utilizam
este cast member. É importante ressaltar que, o film loop criado não utiliza o cast member 1
(Violino). Caso isto tivesse ocorrido, deveríamos recriar o film loop. Mas, como este não é o
caso, vamos alterar a inclinação do cast member Violino.
l. Na janela Cast dê duplo-clique sobre o cast member Violino (cast member 1);
2. Na janela Paint, dê duplo-clique sobre o botão Marquee;
O duplo-clique no botão Marquee é um atalho para se selecionar uma imagem na janela
Paint. A única restrição em usa-la é que ela seleciona toda a imagem Se quisermos selecionar
apenas uma parte da imagem deveremos fazê-lo "manualmente" (pelo processo mostrado
anteriormente).
3. Clique sobre o botão Free Rotate;
Figura 65 - Botão Free Rotate
4. Posicione o mouse sobre o vértice superior direito da caixa de seleção, clique e arraste
para a direita. Solte o botão do mouse.
Figura 66 - Utilizando a Ferramenta Free Rotate
5. Feche a janela Cast.
6. Salve o filme. Rode o filme.