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.

Por | @oficinadanet Softwares
<p>Alguma vez voc&ecirc; j&aacute; se perguntou como efeito preloader com preenchimento de cor &eacute; feita? Ou como n&oacute;s encher um copo vazio com a cerveja em Flash? No tutorial de hoje vou mostrar como fazer isso com a ajuda de m&aacute;scara do Flash . Na primeira parte do tutorial vamos implementar a anima&ccedil;&atilde;o que iremos utilizar mais tarde como um preloader para um filme. Desde o Outono &eacute; apenas em torno do corned vamos usar uma folha verde que fica cheio com laranja / cor cinza. Voc&ecirc; pode ver a demonstra&ccedil;&atilde;o de que estaremos criando abaixo.<br /> <br /> <strong>ETAPA 1 - PREPARA&Ccedil;&Atilde;O DO ARQUIVO FLASH</strong><br /> <br /> Abra o Flash e criar um novo documento no AS3. V&aacute; em File / Import / Import para palco e importar uma imagem agrad&aacute;vel de uma folha. Convert&ecirc;-lo em s&iacute;mbolo (clique direito / Convert to Symbol) e nome&aacute;-la greenLeaf . N&atilde;o se esque&ccedil;a de tamb&eacute;m o nome da inst&acirc;ncia a greenLeaf em guia Propriedades. Agora copie e cole a sua folha para fazer outra inst&acirc;ncia do mesmo. Coloque-o em posi&ccedil;&atilde;o exatamente igual ao da folha anterior. O nome da inst&acirc;ncia desta folha para orangeLeaf (orangeLeaf deve ser colocado acima greenLeaf em exatas mesmas coordenadas de modo que coveres perfeitamente).<br /> <br /> <strong>ETAPA 2 - CODIGOS</strong><br /> <br /> &Eacute; hora de fazer o nosso preloader folha. Primeiro voc&ecirc; tem que importar classes TweenLite que vai cuidar da nossa anima&ccedil;&atilde;o.<br /> <br /></p> <pre><code>import com.greensock.*; import com.greensock.TweenLite; import com.greensock.easing.*;</code></pre> <p><br /> <br /> [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" /]<br /> <br /> Vamos primeiro mudar a cor do nosso orangeLeaf para laranja / marrom Usaremos classe TweenLite. ColorMatrixFilter que nos permitem mudar varia&ccedil;&atilde;o de cores sem perder detalhes da imagem (como gotas de chuva) Use o c&oacute;digo a seguir.:<br /></p> <pre><code>TweenMax.to(orangeLeaf, 0, {colorMatrixFilter:{colorize:0xFF7F00, amount:1.2}});</code></pre> <p><br /> <br /> &Eacute; chegada a hora de <strong>m&aacute;scaras aplly</strong>. Temos que definir m&aacute;scaras para ambas as folhas . Folha verde &eacute; vis&iacute;vel no in&iacute;cio e desaparecer&aacute; lentamente enquanto anima&ccedil;&atilde;o progride. Folha de laranja est&aacute; escondido no in&iacute;cio, mas lentamente vai revelar-se exatamente no mesmo ritmo como um verde desaparecer&aacute;. Use o c&oacute;digo a seguir para aplicar m&aacute;scaras:<br /></p> <pre><code>orangeLeaf.mask = greenLeafMask; greenLeaf.mask =orangeLeafMask;</code></pre> <p><br /> <br /> Tudo o que temos de fazer agora &eacute; <strong>definir a anima&ccedil;&atilde;o</strong> tanto para folhas. M&aacute;scara para a folha verde vai lentamente esconder a folha, enquanto a m&aacute;scara para um marrom vai fazer exatamente o oposto. Aplicar anima&ccedil;&otilde;es seguinte:<br /></p> <pre><code>TweenMax.to(greenLeafMask, 15, {height:200,ease:Linear.easeNone}); TweenMax.to(orangeLeafMask, 15, {scaleY:0,ease:Linear.easeNone});</code></pre> <p><br /> <br /> Esta pronto nosso carregamento.<br /> <br /> <strong>CONCLUS&Atilde;O</strong><br /> <br /> M&aacute;scaras em Flash pode ser &uacute;til para muitas coisas e nos permitem fazer muitos efeitos divertidos, como nosso simples enchendo anima&ccedil;&otilde;es. Podemos usar estas anima&ccedil;&otilde;es para implementar um preloader para um conjunto de imagens ou um filme. At&eacute; o proximo tutorial.<br /> <br /> <a href="https://www.oficinadanet.com.br/imagens/coluna/3400//flash-as3-mask-fillcolor-tutorial.zip" target="_blank">flash-as3-mask-fillcolor-tutorial.zip</a></p> <p>&nbsp;</p>

Mais sobre: flash preloader preenchendo
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo