<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>eduardo lacorte &#187; Efeitos</title>
	<atom:link href="http://www.eduardolacorte.com.br/tag/efeitos/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.eduardolacorte.com.br</link>
	<description>algo sobre desenvolvimento web</description>
	<lastBuildDate>Wed, 30 Dec 2009 19:37:38 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Máscara simples no Flash CS4</title>
		<link>http://www.eduardolacorte.com.br/2009/04/16/mascara-simples-no-flash-cs4/</link>
		<comments>http://www.eduardolacorte.com.br/2009/04/16/mascara-simples-no-flash-cs4/#comments</comments>
		<pubDate>Fri, 17 Apr 2009 00:12:12 +0000</pubDate>
		<dc:creator>Eduardo Lacorte</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Animação]]></category>
		<category><![CDATA[Efeitos]]></category>

		<guid isPermaLink="false">http://www.eduardolacorte.com.br/?p=79</guid>
		<description><![CDATA[Essa é para o povo do Flash (Van, Erica, Renan, Lu e galerinha que eu tinha falado que escreveria)&#8230; máscara!
Máscara é um recurso bastante utilizado por profissionais do Flash, mas ao mesmo tempo é um recurso bastante simples de ser criado e explicado. É um dos meus recursos preferidos, por se tratar de um efeito [...]]]></description>
			<content:encoded><![CDATA[<img alt="M003   Máscara no Flash CS4" src="http://www.eduardolacorte.com.br/wp-content/uploads/wp-post-thumbnail/M003---Máscara-no-Flash-CS4_MpmrN.jpg" class="wppt_float_left" /><p>Essa é para o povo do Flash (Van, Erica, Renan, Lu e galerinha que eu tinha falado que escreveria)&#8230; máscara!</p>
<p>Máscara é um recurso bastante utilizado por profissionais do Flash, mas ao mesmo tempo é um recurso bastante simples de ser criado e explicado. É um dos meus recursos preferidos, por se tratar de um efeito que tem muitas vertentes de uso.</p>
<p>Veja abaixo como vou tratar esse assunto:<span id="more-79"></span></p>
<p>- Configure o arquivo para fundo preto, velocidade de 30 fps (frames por segundo). Para isso vamos pela forma mais fácil, através do painel Properties (Ctrl + F3).</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img011.jpg"><img class="alignnone size-medium wp-image-84" title="Painel Properties" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img011-232x300.jpg" alt="Painel Properties" width="232" height="300" /></a></p>
<p>- Selecione a ferramenta Oval (O) e faça um círculo sem contorno fora do palco, na cor que desejar.</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img021.jpg"><img class="alignnone size-medium wp-image-85" title="Ferramenta Oval" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img021-232x300.jpg" alt="Ferramenta Oval" width="232" height="300" /></a></p>
<p>- Com a ferramenta seleção (V), selecione o círculo e alinhe-o verticalmente ao centro em relação ao palco, através do painel Align (Ctrl + K)</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img031.jpg"><img class="alignnone size-medium wp-image-86" title="Alinhamento vertical com o Painel Align" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img031-300x230.jpg" alt="Alinhamento vertical com o Painel Align" width="300" height="230" /></a></p>
<p>- Com o círculo ainda selecionado, selecione o círculo e pressione F8, para salvá-lo com o nome de Luz, sendo um objeto do tipo Gráfico. Adote como padrão a opção Registration ao centro, até obter maiores explicações sobre o que é isso (outros posts&#8230;).</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img041.jpg"><img class="alignnone size-medium wp-image-87" title="Transformar o objeto em gráfico" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img041-300x176.jpg" alt="Transformar o objeto em gráfico" width="300" height="176" /></a></p>
<p>- De volta ao palco, no painel Timeline, vá ao frame 60, pressione F6 para a inserção de um Keyframe* e desloque o objeto para a outra extremidade do palco.</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img051.jpg"><img class="alignnone size-medium wp-image-88" title="Deslocando o objeto no frame 60" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img051-300x206.jpg" alt="Deslocando o objeto no frame 60" width="300" height="206" /></a></p>
<p>* Keyframe: Quadro-chave, cópia do quadro-chave imediatamente anterior.</p>
<p>- Ainda no painel Timeline, com o botão direito no primeiro keyframe, clique na opção Create Classic Tween, para aplicar a interpolação de movimento. Até o Flash CS3 essa opção era conhecida como Create Motion Tween.</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img061.jpg"><img class="alignnone size-medium wp-image-89" title="Create Classic Tween" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img061-300x206.jpg" alt="Create Classic Tween" width="300" height="206" /></a></p>
<p>- Dê à camada o nome de Luz, e crie uma nova camada com o nome de Palavra.</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img071.jpg"><img class="alignnone size-full wp-image-90" title="Configuração das camadas" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img071.jpg" alt="Configuração das camadas" width="249" height="270" /></a></p>
<p>- Com a ferramenta texto em Static Text e a configuração do texto com a fonte desejada e um tamanho aproximado ao da altura da Luz, escreva a palavra Ellemento (tá, marketing&#8230; rs), pinte-a de preto e dê o mesmo nome à camada. Os contornos na palavra são apenas a opção Outlines habilitada. Desconsidere-as. Alinhe a palavra ao centro da tela.</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img081.jpg"><img class="alignnone size-medium wp-image-91" title="Criando a camada superior" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img081-295x300.jpg" alt="Criando a camada superior" width="295" height="300" /></a></p>
<p>- Teste o filme (Ctrl + Enter). A luz deverá passar por trás da palavra.</p>
<p style="text-align: center;"><a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img09.jpg"><img class="alignnone size-medium wp-image-92" title="Animação comum, com Motion Tweening" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img09-300x241.jpg" alt="Animação comum, com Motion Tweening" width="300" height="241" /></a></p>
<p>Bom, agora vamos à mascara:</p>
<p>- Com o mouse em cima do nome da camada superior (Ellemento), clique com o botão direito, e habilite a opção Mask.</p>
<p style="text-align: center;"><a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img10.jpg"><img class="alignnone size-medium wp-image-93" title="Habilitando a opção Mask" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img10-209x300.jpg" alt="Habilitando a opção Mask" width="209" height="300" /></a><a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img011.jpg"></a></p>
<p>- Os ícones das camadas mudarão, conforme a figura abaixo:</p>
<p style="text-align: center;"><a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img11.jpg"><img class="alignnone size-full wp-image-94" title="Mudança de ícones no painel Timeline" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img11.jpg" alt="Mudança de ícones no painel Timeline" width="222" height="110" /></a><a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img021.jpg"></a></p>
<p>- Teste o filme (Ctrl + Enter). O resultado deverá ser como o da imagem abaixo:</p>
<p style="text-align: center;"> <a href="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img12.jpg"><img class="alignnone size-medium wp-image-95" title="Animação com máscara e Motion Tweening" src="http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img12-300x242.jpg" alt="Animação com máscara e Motion Tweening" width="300" height="242" /></a></p>
<p>- Salve o arquivo como máscara.fla e gere o swf novamente através do Ctrl + Enter. Está pronto para ser inserido em alguma página HTML.</p>
<p>Em resumo: Máscara não passa de inversão do campo de visão. O que não víamos passamos a ver, e o que víamos se torna oculto. No exemplo construído não conseguíamos ver a luz por trás da letra, e com a máscara só vemos o que estava por trás da letra. A mesma coisa acontece com um quadrado em cima de uma imagem. Sem máscara o quadrado tapa a imagem, e com o quadrado ele mostra a imagem. Para editar a máscara, basta tirar os cadeados das camadas. Simples, não?</p>
<p>Até!</p>
<div class="pdf24Plugin-cp-box"><form method="POST" action="http://doc2pdf.pdf24.org/doc2pdf/wordpress.php" target="pdf24PopWin" onsubmit="window.open('about:blank', 'pdf24PopWin', 'scrollbars=yes,width=400,height=200,top=0,left=0'); return true;"><input type="hidden" name="blogCharset" value="UTF-8">
<input type="hidden" name="blogPosts" value="1">
<input type="hidden" name="blogUrl" value="http://www.eduardolacorte.com.br">
<input type="hidden" name="blogName" value="eduardo lacorte">
<input type="hidden" name="blogValueEncoding" value="htmlSpecialChars">
<input type="hidden" name="postTitle_0" value="Máscara simples no Flash CS4">
<input type="hidden" name="postLink_0" value="http://www.eduardolacorte.com.br/2009/04/16/mascara-simples-no-flash-cs4/">
<input type="hidden" name="postAuthor_0" value="Eduardo Lacorte">
<input type="hidden" name="postDateTime_0" value="2009-04-16 21:04:12">
<input type="hidden" name="postContent_0" value="&lt;p&gt;Essa é para o povo do Flash (Van, Erica, Renan, Lu e galerinha que eu tinha falado que escreveria)&amp;#8230; máscara!&lt;/p&gt;
&lt;p&gt;Máscara é um recurso bastante utilizado por profissionais do Flash, mas ao mesmo tempo é um recurso bastante simples de ser criado e explicado. É um dos meus recursos preferidos, por se tratar de um efeito que tem muitas vertentes de uso.&lt;/p&gt;
&lt;p&gt;Veja abaixo como vou tratar esse assunto:&lt;span id=&quot;more-79&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;- Configure o arquivo para fundo preto, velocidade de 30 fps (frames por segundo). Para isso vamos pela forma mais fácil, através do painel Properties (Ctrl + F3).&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img011.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-84&quot; title=&quot;Painel Properties&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img011-232x300.jpg&quot; alt=&quot;Painel Properties&quot; width=&quot;232&quot; height=&quot;300&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Selecione a ferramenta Oval (O) e faça um círculo sem contorno fora do palco, na cor que desejar.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img021.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-85&quot; title=&quot;Ferramenta Oval&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img021-232x300.jpg&quot; alt=&quot;Ferramenta Oval&quot; width=&quot;232&quot; height=&quot;300&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Com a ferramenta seleção (V), selecione o círculo e alinhe-o verticalmente ao centro em relação ao palco, através do painel Align (Ctrl + K)&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img031.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-86&quot; title=&quot;Alinhamento vertical com o Painel Align&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img031-300x230.jpg&quot; alt=&quot;Alinhamento vertical com o Painel Align&quot; width=&quot;300&quot; height=&quot;230&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Com o círculo ainda selecionado, selecione o círculo e pressione F8, para salvá-lo com o nome de Luz, sendo um objeto do tipo Gráfico. Adote como padrão a opção Registration ao centro, até obter maiores explicações sobre o que é isso (outros posts&amp;#8230;).&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img041.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-87&quot; title=&quot;Transformar o objeto em gráfico&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img041-300x176.jpg&quot; alt=&quot;Transformar o objeto em gráfico&quot; width=&quot;300&quot; height=&quot;176&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- De volta ao palco, no painel Timeline, vá ao frame 60, pressione F6 para a inserção de um Keyframe* e desloque o objeto para a outra extremidade do palco.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img051.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-88&quot; title=&quot;Deslocando o objeto no frame 60&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img051-300x206.jpg&quot; alt=&quot;Deslocando o objeto no frame 60&quot; width=&quot;300&quot; height=&quot;206&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;* Keyframe: Quadro-chave, cópia do quadro-chave imediatamente anterior.&lt;/p&gt;
&lt;p&gt;- Ainda no painel Timeline, com o botão direito no primeiro keyframe, clique na opção Create Classic Tween, para aplicar a interpolação de movimento. Até o Flash CS3 essa opção era conhecida como Create Motion Tween.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img061.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-89&quot; title=&quot;Create Classic Tween&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img061-300x206.jpg&quot; alt=&quot;Create Classic Tween&quot; width=&quot;300&quot; height=&quot;206&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Dê à camada o nome de Luz, e crie uma nova camada com o nome de Palavra.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img071.jpg&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-90&quot; title=&quot;Configuração das camadas&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img071.jpg&quot; alt=&quot;Configuração das camadas&quot; width=&quot;249&quot; height=&quot;270&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Com a ferramenta texto em Static Text e a configuração do texto com a fonte desejada e um tamanho aproximado ao da altura da Luz, escreva a palavra Ellemento (tá, marketing&amp;#8230; rs), pinte-a de preto e dê o mesmo nome à camada. Os contornos na palavra são apenas a opção Outlines habilitada. Desconsidere-as. Alinhe a palavra ao centro da tela.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img081.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-91&quot; title=&quot;Criando a camada superior&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img081-295x300.jpg&quot; alt=&quot;Criando a camada superior&quot; width=&quot;295&quot; height=&quot;300&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Teste o filme (Ctrl + Enter). A luz deverá passar por trás da palavra.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img09.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-92&quot; title=&quot;Animação comum, com Motion Tweening&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img09-300x241.jpg&quot; alt=&quot;Animação comum, com Motion Tweening&quot; width=&quot;300&quot; height=&quot;241&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Bom, agora vamos à mascara:&lt;/p&gt;
&lt;p&gt;- Com o mouse em cima do nome da camada superior (Ellemento), clique com o botão direito, e habilite a opção Mask.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img10.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-93&quot; title=&quot;Habilitando a opção Mask&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img10-209x300.jpg&quot; alt=&quot;Habilitando a opção Mask&quot; width=&quot;209&quot; height=&quot;300&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img011.jpg&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Os ícones das camadas mudarão, conforme a figura abaixo:&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img11.jpg&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-94&quot; title=&quot;Mudança de ícones no painel Timeline&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img11.jpg&quot; alt=&quot;Mudança de ícones no painel Timeline&quot; width=&quot;222&quot; height=&quot;110&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img021.jpg&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Teste o filme (Ctrl + Enter). O resultado deverá ser como o da imagem abaixo:&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot;&gt; &lt;a href=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img12.jpg&quot;&gt;&lt;img class=&quot;alignnone size-medium wp-image-95&quot; title=&quot;Animação com máscara e Motion Tweening&quot; src=&quot;http://www.eduardolacorte.com.br/wp-content/uploads/2009/04/img12-300x242.jpg&quot; alt=&quot;Animação com máscara e Motion Tweening&quot; width=&quot;300&quot; height=&quot;242&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;- Salve o arquivo como máscara.fla e gere o swf novamente através do Ctrl + Enter. Está pronto para ser inserido em alguma página HTML.&lt;/p&gt;
&lt;p&gt;Em resumo: Máscara não passa de inversão do campo de visão. O que não víamos passamos a ver, e o que víamos se torna oculto. No exemplo construído não conseguíamos ver a luz por trás da letra, e com a máscara só vemos o que estava por trás da letra. A mesma coisa acontece com um quadrado em cima de uma imagem. Sem máscara o quadrado tapa a imagem, e com o quadrado ele mostra a imagem. Para editar a máscara, basta tirar os cadeados das camadas. Simples, não?&lt;/p&gt;
&lt;p&gt;Até!&lt;/p&gt;
">
<table cellspacing="0" cellpadding="0" border="0" width="100%" ><tr><td align="left">Send post as <a href="http://en.pdf24.org" target="_blank">PDF</a> to <input class="pdf24Plugin-cp-input" type="text" name="sendEmailTo" value="Enter email address" onMouseDown="this.value = '';"> <input class="pdf24Plugin-cp-submit" type="submit" value="Send"></td><td align="right"><a href="http://en.pdf24.org" target="_blank" title="PDF | PDF Creator | PDF Converter"><img src="http://www.pdf24.org/images/sheep_16x16.gif" alt="PDF | PDF Creator | PDF Converter" border="0"></a></td></table></form></div>]]></content:encoded>
			<wfw:commentRss>http://www.eduardolacorte.com.br/2009/04/16/mascara-simples-no-flash-cs4/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
