Crie um efeito de transição listrada no Flash

0
48
Crie um efeito de transição listrada no Flash

Olá pessoal, sei que tenho pecado um pouco na atualização das postagens do site, mas a partir desta semana estaremos seguindo um cronograma específico, com as postagens de cada programa em um dia da semana. Assim teremos uma frequência maior de postagens e muito mais conteúdo de qualidade.

No tutorial de hoje utilizaremos o Flash CS5. No final você terá um efeito de transição que pode ser visualizado clicando aqui.

No link a seguir você pode baixar o arquivo deste tutorial.

Fonte File.fla

Vamos aprender como criar um efeito de mascaramento para transição de imagens. Podemos começar criando um novo documento no Flash com Action Script 2.0. Veja a imagem de referência abaixo

Vamos aprender como criar um efeito de mascaramento para transição de imagens. Podemos começar criando um novo documento no Flash com Action Script 2.0. Veja a imagem de referência abaixo

Passo 1: Configurando as propriedades do documento

Selecione modify na barra de menus e clique em Document (você também pode pressionar Ctrl + J para abrir as propriedades do documento)

Selecione modify na barra de menus e clique em Document (você também pode pressionar Ctrl + J para abrir as propriedades do documento)

Agora altere as dimensões para 285 × 180 e o Frame rate coloque 30, como mostrado na figura abaixo.

Agora altere as dimensões para 285 × 180 e o Frame rate coloque 30, como mostrado na figura abaixo.

Passo 2: Importar imagens necessárias

Primeiro, importe as imagens utilizadas a partir do arquivo que você baixou no inicio deste tutorial. Primeiro descompacte o arquivo e em seguida, no flash, vá ao menu File> Import> Open external Library e selecione-o.

Primeiro, importe as imagens utilizadas a partir do arquivo que você baixou no inicio deste tutorial. Primeiro descompacte o arquivo e em seguida, no flash, vá ao menu File> Import> Open external Library e selecione-o.

Passo 3: Posicionando imagens no cenário

Antes de começar, já temos a camada 1, mude seu nome para “Images”. Arraste a imagem 1.jpg da biblioteca sobre o palco.

Antes de começar, já temos a camada 1, mude seu nome para “Images”. Arraste a imagem 1.jpg da biblioteca sobre o palco.

Alinhe a imagem no centro do cenário utilizando o painel de alinhamento (Window> Align). Tenha em mente que para alinhar qualquer item no centro do cenário você deve marcar a opção no “Align to stage” na parte inferior da paleta.

Alinhe a imagem no centro do cenário utilizando o painel de alinhamento (Window> Align). Tenha em mente que para alinhar qualquer item no centro do cenário você deve marcar a opção no "Align to stage” na parte inferior da paleta.

Passo 4: Criando forma de máscara

Agora insira uma nova camada acima da camada Imagens, e nomeie-a como Masking.

Agora insira uma nova camada acima da camada Imagens, e nomeie-a como Masking.

Pressione Ctrl + F8 para criar um novo símbolo . Digite o nome Box Animation e selecione type Movie Clip.

Pressione Ctrl + F8 para criar um novo símbolo . Digite o nome Box Animation e selecione type Movie Clip.

Você vai entrar no clipe de filme Box Animation. Em seguida, crie uma forma de retângulo, como indicado na imagem de referência abaixo:

Você vai entrar no clipe de filme Box Animation. Em seguida, crie uma forma de retângulo, como indicado na imagem de referência abaixo:

Passo 5: Criando animação mascaramento

Agora selecione o 1º quadro e arraste para o quadro 10.

Agora selecione o 1º quadro e arraste para o quadro 10.

Insira novos quadros-chave pressionando a tecla F6 no quadro 15 e 30 .

Insira novos quadros-chave pressionando a tecla F6 no quadro 15 e 30 .

No quadro 10 , transforme ou redimensione o retângulo para um tamanho menor e mova-o ligeiramente para a direita do ponto central, como indicado na imagem de referência abaixo:

No quadro 10 , transforme ou redimensione o retângulo para um tamanho menor e mova-o ligeiramente para a direita do ponto central, como indicado na imagem de referência abaixo:

No frame 15 , mova o retângulo à esquerda do ponto central, como indicado na imagem de referência abaixo:

No frame 15 , mova o retângulo à esquerda do ponto central, como indicado na imagem de referência abaixo:

No quadro 30 , transformar ou redimensionar o retângulo para um tamanho um pouco menor e mantenha-o no ponto central, como indicado na imagem de referência abaixo:

No quadro 30 , transformar ou redimensionar o retângulo para um tamanho um pouco menor e mantenha-o no ponto central, como indicado na imagem de referência abaixo:

Agora Selecione os quadros entre os quadros 10 e 30 e crie a interpolação de forma. Para fazer isso, Selecione os quadros e em seguida clique com o botão direito sobre o quadro selecionado, selecione “Create Shape tween”.

Agora Selecione os quadros entre os quadros 10 e 30 e crie a interpolação de forma. Para fazer isso, Selecione os quadros e em seguida clique com o botão direito sobre o quadro selecionado, selecione “Create Shape tween”.

Agora insira novos quadros-chave pressionando F6 nos quadros 75 e 90 .

Agora insira novos quadros-chave pressionando F6 nos quadros 75 e 90 .

Selecione o quadro 91 e Pressione a tecla F7 para inserir quadro chave em branco.

Agora selecione qualquer quadro entre o quadro 75 e quadro 90 e crie a interpolação de forma. Para fazer isso, clique com o botão direito sobre o quadro selecionado e selecione a opção Create Shape Tween.

Agora selecione qualquer quadro entre o quadro 75 e quadro 90 e crie a interpolação de forma. Para fazer isso, clique com o botão direito sobre o quadro selecionado e selecione a opção Create Shape Tween.

Passo 6: Organizando a animação de máscara para a Transição

Agora volte para a linha do tempo principal clicando na pequena seta no canto superior esquerdo do cenário.

Agora volte para a linha do tempo principal clicando na pequena seta no canto superior esquerdo do cenário.

E selecione a camada de máscara.

E selecione a camada de máscara.

Abra o painel da biblioteca, pressionar Ctrl + L . Em seguida, arraste a caixa de Animação Box Animation que você criou a partir da biblioteca.

Abra o painel da biblioteca, pressionar Ctrl + L . Em seguida, arraste a caixa de Animação Box Animation que você criou a partir da biblioteca.

Para abrir o painel de propriedades, Vá ao menu Window> Properties. Em seguida, selecione o Graphic no menu dropown no topo da paleta, como indicado na imagem de referência à esquerda e vá para o Looping e em Options selecione Single frame, como indicado na imagem de referência do lado direito.

Para abrir o painel de propriedades, Vá ao menu Window> Properties. Em seguida, selecione o Graphic no menu dropown no topo da paleta, como indicado na imagem de referência à esquerda e vá para o Looping e em Options selecione Single frame, como indicado na imagem de referência do lado direito.clip_image025[4]

 

 

Agora digite 35 na primeira opção.

Agora digite 35 na primeira opção.

Passo 7: Colocando os símbolos de animação de caixa sobre a imagem

Agora mova o símbolo do Box Animation  para o canto superior esquerdo do cenário.

Agora mova o símbolo do Box Animation  para o canto superior esquerdo do cenário.

Aqui vamos cobrir a imagem com um número de cópias do Box Animation. Copie este símbolo. Para isso, pressione Ctrl + C , depois Ctrl + V e colocar cada símbolo copiado, cobrindo toda a imagem, como indicado na imagem de referência.

Abra novamente o painel propriedades (Window> Properties). Em seguida, selecione Movie clip a partir do menu dropdown., como indicado na imagem de referência.

Abra novamente o painel propriedades (Window> Properties). Em seguida, selecione Movie clip a partir do menu dropdown., como indicado na imagem de referência.

Passo 8: Randomização dos clipes de animação

Com esta transição pronta, clique com o botão direito e selecione Distribute to layers.

Com esta transição pronta, clique com o botão direito e selecione Distribute to layers.

Insira uma nova camada e nomeie como Action.

Insira uma nova camada e nomeie como Action.

Insira um novo quadro chave no frame 20 pressionando F6. Selecione o frame 20 e pressione F9 para abrir o painel de ações. Digite stop (); no painel de ação.

Insira um novo quadro chave no frame 20 pressionando F6. Selecione o frame 20 e pressione F9 para abrir o painel de ações. Digite stop (); no painel de ação.

Agora selecione o quadro 20 de todas as camadas exceto a camada de Ação e Pressione F5 para inserir uma moldura.

Agora selecione o quadro 20 de todas as camadas exceto a camada de Ação e Pressione F5 para inserir uma moldura.

Aqui você pode reorganizar o quadro inicial de cada camada a sua maneira.

Aqui você pode reorganizar o quadro inicial de cada camada a sua maneira.

Passo 9: Finalizando a transição

Agora vamos para a timeline principal e selecione a camada de máscara. Você precisa aplicar máscara a esta camada. Para fazer isso, clique direito> selecione máscara .

Agora vamos para a timeline principal e selecione a camada de máscara. Você precisa aplicar máscara a esta camada. Para fazer isso, clique direito> selecione máscara .

No final, você irá colocar outras imagens e dar o período de tempo para cada imagem aparecer na tela. Agora insira uma chave no frame 101, 201, 301 e 401 em ambas as camadas.

No final, você irá colocar outras imagens e dar o período de tempo para cada imagem aparecer na tela. Agora insira uma chave no frame 101, 201, 301 e 401 em ambas as camadas.

Agora, mude a outras imagens na camada Image, onde os quadros principais estão inseridos. Pressione F5 no frame 500.

Agora pressione Ctrl + Enter para ver que efeito.

Site original: Entheosweb Blog

Comente! Sugestões, dúvidas e opiniões são ótimos para melhorar o conteúdo do Clube.

Aproveite para seguir o Clube no twitter, facebook, youtube ou google+, assim você fica por dentro das novidades, e acompanha os melhores links do blog. Você também pode assinar nosso feed de notícias e receber todas as atualizações de maneira exclusiva.

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here