Usando Movie clips (clipes de filme)

 

Objetivos:

 

Mostrar como e quando usar um clipe de filme.

 

Autor: Carlos Vitor de Castro

 

O clipe de filme é um tipo de símbolo que tem como característica principal uma linha de tempo própria, independente da linha de tempo principal. Por isso ele é muito usado para criar animações independentes dentro da cena-raiz do documento. A linha de tempo do clipe de filme tem os mesmos recursos de sua similar da cena principal, como quadros-chave, camadas, máscaras e guias de movimento.

 

Este recurso é muito útil para deixar a linha de tempo da cena principal mais simples e com menos camadas.

 

Exemplo prático 1

 

1. Crie um novo arquivo com 400 pixels de largura e 250 de altura.

 

2. Clique em Insert/New symbol e escolha movie clip.

 

3. Desenhe um círculo de 40 por 40 na posição mostrada na imagem abaixo e converta-o em símbolo gráfico.

 

 

4. Clique no quadro 20 da linha de tempo pressione F6.

 

5. Mova o círculo para a posição indicada abaixo.

 

 

6. Aplique uma interpolação de movimento na linha de tempo.

 

7. Retorne a cena principal.

 

 

8. Pressione F11 para exibir a biblioteca e traga o clipe de filme que você acabou de criar para o centro do palco, teste seu filme com CTRL ENTER.

 

Exercício prático 2

 

1. Crie um novo arquivo com 400 pixels de largura e 250 de altura.

 

2. Clique em Insert/New symbol e escolha movie clip.

 

3. Desenhe um barquinho simples como o da figura abaixo.

 

 

4. Selecione todo o barco e converta em símbolo gráfico.

 

5. Clique no quadro 10 e pressione F6.

 

6. Incline o barco para frente e crie uma interpolação de movimento.

 

 

7. Clique no quadro 20 da linha de tempo e pressione F6, incline o barco para trás e crie uma interpolação de movimento.

 

 

8. Retorne a cena principal e insira o clipe de filme recém criado no lado esquerdo do palco, preste atenção quando trouxer o clipe para o palco, porque você tem na biblioteca dois símbolos, o gráfico e o clipe de filme, clipes de filme são reconhecidos pelo ícone abaixo.

 

 

9. Na cena principal clique no quadro 20 e pressione F6 para criar um quadro-chave, mova o barco para o lado direito e crie uma interpolação de movimento.

 

Exercício prático 3

 

Neste exemplo iremos colocar um clipe de filme dentro do outro para ter uma idéia do que podemos fazer com este recurso.

 

1. Crie um novo arquivo com 300 pixels de largura por 300 pixels de altura.

 

 

2. Clique no menu Insert/New Symbol.

 

 

3. Desenhe um círculo de 50 pixels de largura por 50 pixels de altura e posicione como mostrado na próxima figura.

 

 

4. Converta esta forma em símbolo gráfico.

 

5. Dê um clique no círculo e use a paleta Properties para modificar seu Alpha para 0%.

 

 

6. Clique no quadro 20 da linha de tempo e pressione F6.

 

7. Dê um clique no círculo e modifique seu Alpha para 80%.

 

8. Aplique uma Motion tween entre o quadro 1 e o 10 da linha de tempo.

 

9. Você está no modo de edição de símbolos, vamos retornar a cena principal para continuar o trabalho, se você não lembra de uma olhada no item 7 do primeiro exemplo prático.

 

10. Crie outro Movie clip com o nome de “círculo final”.

 

 

11. Pressione F11 para exibir a Library.

 

12. Vamos puxar o movie clip circulo inicial 5 vezes para o palco, vamos ter uma pequena dificuldade, pois, os clipes estão iniciando com o Alpha de 0%, neste caso não conseguimos enxergá-los quando eles vão para a tela de edição, para resolver este problema, iremos ligar a opção Show All Layers as Outlines, que mostra um contorno nos objetos que estão naquela camada, clique onde indica a próxima figura.

 

 

13. Agora puxe da biblioteca o símbolo “circulo inicial” cinco vezes, e posicione como mostrado abaixo.

 

 

14. Retorne a cena principal e puxe o símbolo “circulo final” para o palco e teste seu filme com CTRL + ENTER.

 

15. Experimente mais, por exemplo, crie um terceiro Movie clip e insira nele o clip “circulo final” algumas vezes, para ver o resultado.

 

Dando nome a uma Instância de Movie clip

 

Damos um nome de instância a um Movie clip para quando há a necessidade de fazer uma referência a este objeto dentro de código Action Script do Flash.

 

No caso do próximo exemplo vamos criar um Movie clip que pode ser arrastado pelo mouse quando o filme estiver sendo executado, podemos, por exemplo, criar um jogo de damas usando este recurso.

 

Exemplo prático 4

 

1. Crie um novo arquivo no Flash com 400 pixels de largura e 400 pixels de altura.

 

2. Desenhe um círculo no palco com 50 por 50 pixels, remova seu contorno e converta-o em Movie Clip, selecionando-o e pressionando F8.

 

3. Dê o nome a sua instância de “bola”

 

 

4. Selecione o clipe de filme, clicando sobre ele, e pressione F9 para exibir a paleta Actions

 

 

5. Digite o código abaixo na paleta Actions.

 

on (press)

     {

     startDrag("../bola");

     }

on (release)

     {

     stopDrag();

     }

 

6. Temos dois eventos no código acima, o PRESS que acontece quando você pressiona o botão esquerdo do mouse, e o RELEASE que acontece quando você solta o botão esquerdo do mouse, note que em PRESS no damos o comando STARTDRAG (inicia o arrastar) e no RELEASE o STOPDRAG (para o arrastar).

 

7. Pressione CTRL ENTER e arraste seu círculo.

 

Arrastando uma máscara

 

Vamos usar o recurso acima para complementar o último tutorial sobre máscaras, nesse tutorial eu mostrei como fazer animações usando máscaras, agora vamos ver como arrastar a máscara.

 

Exemplo prático 5

 

1. Crie um novo arquivo com 300 por 300 pixels.

 

2. Importe uma imagem para o palco, usando o menu File/Import/Import to stage.

 

3. Modifique o tamanho da imagem para 300 por 300 e converta-a em Graphic, posicione-a em X=0 e Y=0.

 

4. Crie outra camada.

 

5. Importe outra imagem para o palco e também modifique seu tamanho para 300 por 300, posicione como no item e converta em Graphic.

 

6. Crie uma terceira camada e desenhe nesta camada um círculo de 100 por 100, converta esta forma em Movie Clip.

 

7. Converta esta camada em Mask, clicando com o botão direito do mouse sobre ela e escolhendo a opção Mask.

 

 

8. Desligue os cadeados das camadas que apareceram quando você converteu a camada.

 

9. Dê um clique no círculo que está na terceira camada, e dê o nome de “mascara” à sua instância.

 

 

10. Selecione o círculo de novo e pressione F9 para ver a paleta de camadas.

 

11. Digite o código abaixo dentro da paleta Action.

 

on (press)

     {

     startDrag("../mascara");

     }

on (release)

     {

     stopDrag();

    }