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.

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:

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

 
Mais sobre: flash, preloader, preenchendo