Iniciando uma série sobre o Director no iMasters, veremos que ele oferece alguns ótimos recursos de animação utilizando keyframes. Vamos conhecer alguns desses recursos nesta matéria. Abordaremos os seguintes assuntos:

. Alterar as propriedades de Sprites
. Uso de Keyframes
. Efeitos de Tweening

01. Abra um novo arquivo. Eu estou usando um stage com 512 X 342. Para alterar o tamanho do Stage, vá até o Property Inspector (Ctrl + Shift + D), e modifique o tamanho em Stage Size.

02. Vá até o painel Tools e escolha a ferramenta Filed Elipse.

03. Crie um círculo no canto superior esquerdo do Stage.

04. Vá até o Score e selecione o último frame do Sprite do círculo.

05. Volte até o Stage, clique sobre o sprite do círculo e arraste-o até o canto inferior esquerdo da tela.

Observe que é criada uma linha amarela com vários pontos. Essa linha indica a trajetória do Sprite e cada pequeno ponto desse representa um frame.

06. Salve o seu Filme e clique no botão play para ver a animação.

Bem simples, não é? Vamos agora alterar algumas propriedades do Sprite para incrementar a animação e entenderemos o conceito de keyframes.

01. Vá até o Score e clique sobre o frame 10 do Sprite, do canal 1.

02. No menu Insert escolha a opção Keyframe (Ctrl + Alt + K). Observe que apareceu um pequeno circulo no frame 10. Este círculo representa um keyframe.

O Keyframe, como o próprio nome diz, é um frame chame. Nele podemos inserir modificações das propriedades do Sprite. O Director automaticamente faz a interpolação entre keyframes.

03. No Score, clique no frame 10 do Sprite do canal 1, para selecionar o keyframe criado.

04. Voltando ao Stage, clique no Sprite do círculo de arraste-o para a base do Stage. Observe que a linha de trajetória do Sprite mudou.

05. Rode o filme para ver o movimento do Sprite no Stage.

Vou criar mais um keyframe no frame 20 e irei arrastar o Sprite bola para cima, criando assim um movimento ondulatório.

Outras propriedades podem ser alteradas. Como disse anteriormente, o keyframe armazena um conjunto de propriedades do Sprite. Essas propriedades podem ser posição, tamanho, rotação, inclinação, opacidade e cores de foreground e background. Vamos alterar o tamanho do Sprite.

01. No Score, selecione o keyframe do frame 20 do Sprite. Vamos alterar as propriedades de tamanho neste keyframe.

02. Volte ao Stage, segure a tecla Shift e clique em um dos cantos do Sprite para diminuir o seu tamanho.

03. Rode o Filme e veja a alteração.

Tente depois modificar outras propriedades no painel Property Inspector. Faça essas alterações nos keyframes e veja os resultados.

É possível modificar a interpolação entre o frames da animação. Para isso vamos usar as opções de Tweening do sprite.

01. Selecione o Sprite no Stage e vá até o menu Modify > Sprite > Tweening.

Vamos suavizar um pouco o movimento inicial do Sprite.

02. Deixe somente as opções de Patch e Size marcadas na opção Tween. Vamos desabilitar as outras, pois só estamos modificando essas duas propriedades.

03. Na parte de baixo da janela, arraste a barra da opção Ease-In para 50%.

Observe, na representação da trajetória que está no canto superior esquerdo, que os pontos iniciais ficam mais juntos. O que acontece é que serão utilizados mais frames para realizar o movimento de uma trajetória menor e consequentemente a velocidade do movimento diminui nesse ponto e suaviza o início do movimento.

Na janela Sprite Tween temos outras opções:

Curvature:
. Normal - Sem modificações
. Linear - Os pontos serão reajustados para criar um movimento linear
. Extreme - Os pontos serão reajustados para criar um movimento circular

Continuouos at Endpoints - O pontos inicial e final serão alinhados.

Speed:
. Sharp Changes - As mudanças entre os pontos serão mais rápidas.
. Snootch Changes - As mudanças entre os pontos serão mais suaves.

Ease-In - Suaviza o movimento inicial do Sprite
Ease-Out - Suaviza o movimento final do Sprite

Faça o download do arquivo final aqui.

É isso aí pessoal. Enviem suas dúvidas e sugestões.