CADASTRE-SE

Preloader com Máscaras - preenchendo objetos

Alguma vez você já se perguntou como efeito preloader com preenchimento de cor é feita? Ou como nós encher um copo vazio com a cerveja em Flash? No tutorial de hoje vou mostrar como fazer isso.

Thauan Almeida

Alguma vez você já se perguntou como efeito preloader com preenchimento de cor é feita? Ou como nós encher um copo vazio com a cerveja em Flash? No tutorial de hoje vou mostrar como fazer isso com a ajuda de máscara do Flash . Na primeira parte do tutorial vamos implementar a animação que iremos utilizar mais tarde como um preloader para um filme. Desde o Outono é apenas em torno do corned vamos usar uma folha verde que fica cheio com laranja / cor cinza. Você pode ver a demonstração de que estaremos criando abaixo.

ETAPA 1 - PREPARAÇÃO DO ARQUIVO FLASH

Abra o Flash e criar um novo documento no AS3. Vá em File / Import / Import para palco e importar uma imagem agradável de uma folha. Convertê-lo em símbolo (clique direito / Convert to Symbol) e nomeá-la greenLeaf . Não se esqueça de também o nome da instância a greenLeaf em guia Propriedades. Agora copie e cole a sua folha para fazer outra instância do mesmo. Coloque-o em posição exatamente igual ao da folha anterior. O nome da instância desta folha para orangeLeaf (orangeLeaf deve ser colocado acima greenLeaf em exatas mesmas coordenadas de modo que coveres perfeitamente).

ETAPA 2 - CODIGOS

É hora de fazer o nosso preloader folha. Primeiro você tem que importar classes TweenLite que vai cuidar da nossa animação.


import com.greensock.*;

import com.greensock.TweenLite;
import com.greensock.easing.*;



[amazon_carousel widget_type="SearchAndAdd" width=600" height="200" title="" market_place="US" shuffle_products="True" show_border="False" keywords="flash" browse_node="" search_index="Books" /]

Vamos primeiro mudar a cor do nosso orangeLeaf para laranja / marrom Usaremos classe TweenLite. ColorMatrixFilter que nos permitem mudar variação de cores sem perder detalhes da imagem (como gotas de chuva) Use o código a seguir.:


TweenMax.to(orangeLeaf, 0, {colorMatrixFilter:{colorize:0xFF7F00, amount:1.2}});



É chegada a hora de máscaras aplly. Temos que definir máscaras para ambas as folhas . Folha verde é visível no início e desaparecerá lentamente enquanto animação progride. Folha de laranja está escondido no início, mas lentamente vai revelar-se exatamente no mesmo ritmo como um verde desaparecerá. Use o código a seguir para aplicar máscaras:

Confira nosso curso: Curso completo de Flash


orangeLeaf.mask =  greenLeafMask;

greenLeaf.mask =orangeLeafMask;



Tudo o que temos de fazer agora é definir a animação tanto para folhas. Máscara para a folha verde vai lentamente esconder a folha, enquanto a máscara para um marrom vai fazer exatamente o oposto. Aplicar animações seguinte:


TweenMax.to(greenLeafMask, 15, {height:200,ease:Linear.easeNone});

TweenMax.to(orangeLeafMask, 15, {scaleY:0,ease:Linear.easeNone});



Esta pronto nosso carregamento.

CONCLUSÃO

Máscaras em Flash pode ser útil para muitas coisas e nos permitem fazer muitos efeitos divertidos, como nosso simples enchendo animações. Podemos usar estas animações para implementar um preloader para um conjunto de imagens ou um filme. Até o proximo tutorial.

flash-as3-mask-fillcolor-tutorial.zip

 



Recomendamos:
Comentários:
Compartilhe com seus amigos:


destaques da home page
Cadastre-se em nossa newsletter:

As melhores histórias em seu e-mail:




TOPO