Resumo

Neste tutorial você vai aprender como criar um reflexo de água para aplicar em um Movieclip movimento.

Aqui o resultado final:


Requisitos

Flash 8, Flash CS3 ou Flash CS4.

Nota: As imagens nesse tutorial são feitos em Flash CS3. Ele funciona exatamente o mesmo em Flash 8. Este tutorial é Actionscript 2 (ActionScript Embora não seja obrigatório).

Passo 1 - Instalar o componente do efeito

Baixe o efeito reflexo de água aqui. Por favor, siga as instruções de instalação e arraste o componente do painel de componentes para a biblioteca do seu arquivo FLA..

Arraste o componente para a biblioteca

Passo 2 - Criar Movieclip pato

Importar a imagem pato [pressione Ctrl-R] ou "File" -> "Import" -> "Importar on Stage ...". Certifique-se de que o pato é uma imagem PNG. Com fundo transparente.

Importação de imagens

Selecione a imagem deste e convertê-lo em um pressionar F8 Movieclip [] ou com o botão direito sobre o MovieClip -> "Convert to Symbol ...". Dê o movieclip o nome de "pato".

Criar Movieclip pato

Passo 3 - Criar animação Movieclip

Criar um novo movieclip com [pressione Ctrl-F8] ou Inserir -> "New Symbol ...". Nome este Movieclip animação ".

Criar novo movieclip

Criar novo movieclip

Arraste o Movieclip pato de sua biblioteca para o primeiro quadro na linha do tempo. Agora clique no frame 60 e crie um novo quadro-chave [pressione F6] ou com o botão direito e "Insert Keyframe".

Criar um novo quadro-chave

Clique no quadro-chave recém-criada e selecione o MovieClip pato na tela. Agora mova esta Movieclip com a tecla do cursor para a direita (digamos 100px). Você pode conferir a nova posição no painel de informação.

Mover Movieclip

Volte para o primeiro quadro da linha do tempo. No painel de propriedade Tween escolha: "Movimento". Se você clicar em algum lugar na linha do tempo agora, você vê que o pato Movieclip está se movendo da esquerda para a direita.

Definir interpolação de movimento

Passo 4 - Coloque Movieclip animação na timeline principal

Agora clique em "Scene 1" para voltar para a timeline principal. Se o pato Movieclip ainda está lá, removê-lo.

Volte para a timeline principal

Move o movieclip a animação de sua biblioteca para o primeiro quadro da linha do tempo.

Movieclip Put on timeline

Defina o nome de instância do movieclip a "animation_mc" (você pode escolher um nome diferente se você quiser. Certifique-se que o nome da instância é única). Sem um nome de instância, o componente é capaz de detectar o MovieClip.

Definir nome de instância

Passo 5 - Aplicar componente efeito

Criar uma nova camada, selecione o primeiro frame e arraste o componente a partir de sua biblioteca para o movieclip animação. O componente irá ajustar automaticamente.

Arrastar componente para Movieclip

Defina o parâmetro do componente dentro do painel Inspetor de componentes como na imagem. Movieclips Todos com nomes de instância neste quadro estão listados na seção "Target Movieclip" lista de seleção. Desde que você tem apenas um Movieclip, o componente assume, que pretende aplicar o efeito sobre o MovieClip "animation_mc".

Parâmetro Set

Nota: Estes ajustes só são aplicados a este exemplo de um componente de efeito. Se você chamar o componente no outro movieclip (outro lugar dentro do fla. Ou em um novo projeto) você tem que definir as configurações novamente.

Agora exportação (Ctrl pressione [-ENTER] ou ...). Você vai ver que a cabeça do pato é cortado de alguma forma. Isso porque o componente tem exatamente o tamanho do movieclip pato. Mas desde que a onda de reflexão irá aumentar o tamanho isso não vai caber mais nada.

A reflexão é cortado

Passo 6 - Ajuste Movieclip animação

Para corrigir isso, você vai inserir uma forma invisível no fundo do pato MovieClip, qual o tamanho acima do Movieclip um pouco.

Voltar para o movieclip pato com um duplo clique sobre ele em sua biblioteca.

Pato Editar Movieclip

Criar uma nova camada abaixo da camada de interpolação.

Criar nova camada

Selecione a ferramenta retângulo e desenhe uma forma com a largura do pato. A altura deve ser um pixel pouco maior, então o pato pixel (aproximadamente 10). Pode ajudar a definir o ícone esquema na linha do tempo, para ver apenas as dimensões da imagem de pato.

Desenhar retângulo

Com a forma selecionada, abra o painel de cores e definir o alpha a 0.

Definir alfa de forma

Quando você testar o filme agora, você vai ver que o reflexo é aplicado sobre o pato buraco.

Não há mais corte

Passo 6 - Adicione a imagem de fundo

Criar uma nova camada abaixo da camada com a animação ea componente. Importar uma imagem corresponder. Agora você pode mudar a posição do movieclip animação para fazê-lo caber dentro com o fundo.

Resultado final

Baixar

Clique aqui para baixar o arquivo FLA desse tutorial. Nota: O FLA. Inclui a versão de avaliação do componente de efeito, que só funciona no IDE Flash (Flash 8, Flash CS3 e Adobe Flash CS4), mas não dentro do navegador.

Você também pode fazer o download do Água Efeito reflexo aqui.

  • Share / Bookmark