Tutorial: Criar um efeito de reflexão da água com animação
Escrever Comentário 18 de novembro de 2008
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..
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.
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".
Passo 3 - Criar animação Movieclip
Criar um novo movieclip com [pressione Ctrl-F8] ou Inserir -> "New Symbol ...". Nome este Movieclip animação ".
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".
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.
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.
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.
Move o movieclip a animação de sua biblioteca para o primeiro quadro da linha do tempo.
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.
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.
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".
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.
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.
Criar uma nova camada abaixo da camada de interpolação.
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.
Com a forma selecionada, abra o painel de cores e definir o alpha a 0.
Quando você testar o filme agora, você vai ver que o reflexo é aplicado sobre o pato buraco.
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.
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.






















Escrever um comentário