<?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>MXStudio &#187; Leandro_Amano</title>
	<atom:link href="http://www.mxstudio.com.br/author/leandro_amano/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mxstudio.com.br</link>
	<description>Macromedia e Adobe - Artigos, colunas, tutorias e muito mais...</description>
	<lastBuildDate>Sun, 29 Jan 2012 11:31:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Utilizando CSS com Flash</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/flash/utilizando_css_com_flash/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/flash/utilizando_css_com_flash/#comments</comments>
		<pubDate>Wed, 31 May 2006 00:00:00 +0000</pubDate>
		<dc:creator>Leandro_Amano</dc:creator>
				<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Hoje vamos entender como o Flash exibe a leitura de um css externo anexado a um texto corrido. &#201; muito &#250;til quando temos muito texto no site e necessitamos atualiza-los de forma din&#226;mica..]]></description>
			<content:encoded><![CDATA[<p><script src="http://www.mxstudio.com.br/js/ColorCode.js"></script></p>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td id="colunaTexto" valign="top">
<h1>Coluna Flash &#8211; <strong> Utilizando CSS com Flash</strong></h1>
<h2>Introdução</h2>
<p align="justify">Hoje vamos entender como o Flash exibe a leitura de um css externo anexado a um texto corrido. É muito útil quando temos muito texto no site e necessitamos atualiza-los de forma dinâmica&#8230; um exemplo disso seria você, desenvolvedor, criar dezenas de página, arredondemos para 60, e o cliente resolve que o texto não pode ser mais Verdana, corpo 10, cor 0&#215;666666, e sim, Arial 11, 0&#215;000000, o que fazer?&#8230;. A solução natural seria abrir todos os 60 arquivos e alterá-los um a um&#8230;. podem ver que o trabalho é no mínimo maçante (um saco), nesse caso, se o desenvolvedor fez o trabalho com CSS (<strong>Cascading Style Sheets</strong>) ele terá de alterar unicamente o css (um arquivo css), e não mais os 60 arquivos, dessa forma, quando o solicitador pedir para alterar propriedades do texto, você fará até com gosto a manutenção, já que agora ela não mais se tornará despendiosa!</p>
<h2>Pré-Requisitos</h2>
<p>Este artigo é básico, não é necessário conhecer ActionScript a fundo.<br />
Nível Básico.</p>
<h2><strong>Arquivo Final</strong></h2>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="430" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><embed type="application/x-shockwave-flash" width="550" height="430"></embed></object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="430" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.mxstudio.com.br/imagens_artigos/leandroAmano_abril06_FlashCSS_imagens/styleSheet" /><embed type="application/x-shockwave-flash" width="550" height="430" src="http://www.mxstudio.com.br/imagens_artigos/leandroAmano_abril06_FlashCSS_imagens/styleSheet"></embed></object></p>
<h2>Objetivo</h2>
<p align="justify">Aperfeiçoar técnicas de programação dentro do Flash 8.</p>
<h2>Conteúdo</h2>
<p align="justify">No Flash 8, abra um novo documento em branco.</p>
<p>Inicialmente, vamos abrir o painel de components (CTRL+F7), arraste dois TextArea, eles se encontram na árvore UI, onde estão os componentes para formulário.<br />
O nome de instância dos objetos são: texto e exibe, onde texto mostrará o conteúdo textual e exibe mostrará as tags de css disponíveis no documento.<br />
Esses componentes podem ser esticados para melhor visualização.</p>
<p>Abra o Dreamweaver 8, ou, caso não possua o bloco de notas:</p>
<p>Digite o seguinte texto:</p>
<p id="codigo" title="CSS">.titulo {<br />
font-family:Verdana, Arial, Helvetica, sans-serif;<br />
font-size:14px;<br />
color:#990000;<br />
font-weight:bold;<br />
}<br />
corpo {<br />
font-family:Verdana, Arial, Helvetica, sans-serif;<br />
font-size:10;<br />
color:#000000;<br />
}<br />
corpoDetalhe {<br />
font-family:Verdana, Arial, Helvetica, sans-serif;<br />
font-size:10;<br />
color:#FF0000;<br />
font-style:italic;<br />
}</p>
<p>Nesse tutorial não entrarei em detalhes do css, mas para quem não conhece, basicamente aplicamos fontes, cores e tamanhos diferentes.<br />
Salve-o como estilos.css na mesma pasta que vamos salvar o flash (isso não é obrigatório, porém, para aprendizado fica mais fácil).</p>
<p>Voltando ao Flash 8.</p>
<p>Com isso pronto, o resto é código, criem um novo layer de actions (~AS) e digitem:</p>
<p id="codigo" title="AS">/* Importamos a classe TextArea para utilizar o componente de visualização e edição de texto. */<br />
import mx.controls.TextArea;<br />
/* Importamos a classe StyleSheet para o css */<br />
import TextField.StyleSheet;<br />
/* Declaração dos 2 TextArea */<br />
var exibe:TextArea;<br />
var texto:TextArea;<br />
/* Declaração do CSS */<br />
var estilos:StyleSheet = new StyleSheet();<br />
/* Lendo o arquivo .css */<br />
estilos.load(&#8220;estilos.css&#8221;);<br />
/* Quando ler o css o que fazer? */<br />
estilos.onLoad = function(success:Boolean):Void {<br />
if (success) {<br />
/* Resposta: os campos TextArea poderão ler html e não serão editáveis */<br />
exibe.html = true;<br />
exibe.editable = false;<br />
/* Exibe no TextArea os estilos css convertidos em String (getStylesNames retorna um array, precisamos passar para String, para exibição dos mesmos) */<br />
exibe.text = estilos.getStyleNames().toString();<br />
texto.html = true;<br />
texto.editable = false;<br />
/* No TextArea texto exibimos na propriedade styleSheet o próprio objeto css do onLoad */<br />
texto.styleSheet = this;<br />
/* Texto a ser exibido no texto: Como podemos observar, podemos aplicar os estilos usando o tradicional span class usado no html ou mesmo inserir via xml, com inserção de tags personalizadas, como boa regra de xhtml, toda tag aberta deve ser fechada, não esqueça nunca disso. */<br />
texto.text = &#8220;&lt;span class=&#8217;titulo&#8217;&gt;Macromedia Flash 8&lt;/span&gt;&lt;br&gt;&lt;corpo&gt;Estamos carregando um arquivo CSS externo.&lt;br&gt;O nome do arquivo é &lt;corpoDetalhe&gt;estilos.css.&lt;/corpoDetalhe&gt;&lt;/corpo&gt;&#8221;;<br />
}<br />
};</p>
<p>É só salvar o documento na mesma pasta do css agora, a sugestão do nome é styleSheet.fla.<br />
É só testar!</p>
<p>Obs.: Isso também pode (e deve) ser aplicado a textos chamados de fora.<br />
Obs.2: Apesar deste artigo utilizar os componentes, isso não é necessário, aplique isso direto a campos dinâmicos.</p>
<p>Espero que tenham gostado e apliquem isso aos próximos trabalhos em Flash, dúvidas ou sugestões são bem vindas.<br />
Abraços e até a próxima!</p>
<p><a href="http://www.mxstudio.com.br/mx_novo/wp-admin/styleSheet.zip" target="_blank">Download dos arquivos </a></p>
<p><strong>Autor: Leandro Amano &#8211; Colunista de Flash do MXSTUDIO </strong></p>
<p>Site: <a href="http://www.leandroamano.com.br" target="_blank">www.leandroamano.com.br</a><br />
Leandro Amano é designer/desenvolvedor <a href="http://www.adobe.com" target="_blank">Adobe</a>, iniciou sua carreira profissional em 1999, atualmente é Adobe User Group Leader do <a href="http://www.flashfor.com.br" target="_blank">FlashFor</a>, diretor de criação da <a href="http://www.digitalbug.com.br" target="_blank">Digital Bug</a> e instrutor Oficial na <a href="http://www.eng.com.br" target="_blank">ENG DTP &amp; Multimídia</a>, centro de treinamentos oficiais Adobe/Macromedia, onde ministra a tecnologia Adobe Flash em São Paulo &#8211; SP.</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/flash/utilizando_css_com_flash/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Movie Clip &#8211; HitTest (Galeria)</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/flash/movie_clip___hittest__galeria_/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/flash/movie_clip___hittest__galeria_/#comments</comments>
		<pubDate>Wed, 10 May 2006 00:00:00 +0000</pubDate>
		<dc:creator>Leandro_Amano</dc:creator>
				<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Neste artigo vamos ver um pouco sobre o m&#233;todo HitTest da classe MovieClip, na verdade fiz este exemplo para um aluno h&#225; algum tempo e resolvi postar.]]></description>
			<content:encoded><![CDATA[<p><script src="http://www.mxstudio.com.br/js/ColorCode.js"></script></p>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td id="colunaTexto" valign="top">
<h1>Coluna Flash &#8211; Movie Clip &#8211; HitTest</h1>
<h2>Introdução</h2>
<p align="justify">Um olá para todos os amigos do MXStudio.</p>
<p align="justify">Neste artigo vamos ver um pouco sobre o método HitTest da classe MovieClip, na verdade fiz este exemplo para um aluno há algum tempo  e resolvi postar.</p>
<p align="justify">Para testar arraste uma miniatura para a área de exibição.</p>
<p align="center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="580" height="510" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="quality" value="high" /><param name="src" value="http://www.mxstudio.com.br/mx_novo/wp-admin/leandroAmano_maio06_HitTest_imagens/galeria.swf" /><embed type="application/x-shockwave-flash" width="580" height="510" src="http://www.mxstudio.com.br/mx_novo/wp-admin/leandroAmano_maio06_HitTest_imagens/galeria.swf" quality="high"></embed></object></p>
<h2>Pré-Requisitos</h2>
<p>Este artigo pede um conhecimento básico de ActionScript, mas é necessário ter uma familiaridade com o Flash.</p>
<h2>Objetivo</h2>
<p align="justify">Aprimoramento da Action Script junto ao Flash 8.</p>
<h2>Conteúdo</h2>
<p>Incialmente, vamos ao Dreamweaver escrever um XML, para quem ainda não utiliza recomendo que leiam muito sobre isso.Muito é facilitado utilizando essa meta-linguagem que é portabilidade entre quaisquer sistemas.</p>
<div id="codigo" title="XML">&lt;?xml version=&#8221;1.0&#8243; encoding=&#8221;utf-8&#8243;?&gt;<br />
&lt;galeria&gt;<br />
&lt;thumb title=&#8221;Hades Chapter Sanctuary&#8221; img=&#8221;images/01.jpg&#8221; thumb=&#8221;images/01_p.jpg&#8221; /&gt;<br />
&lt;thumb title=&#8221;Hades Chapter Sanctuary&#8221; img=&#8221;images/02.jpg&#8221; thumb=&#8221;images/02_p.jpg&#8221; /&gt;<br />
&lt;thumb title=&#8221;Hades Chapter Inferno &#8221; img=&#8221;images/03.jpg&#8221; thumb=&#8221;images/03_p.jpg&#8221; /&gt;<br />
&lt;/galeria&gt;</div>
<p>Basicamente o que temos nesse xml são atributos para exibição de título, thumbnail e a imagem em seu tamanho maior. Em uma breve oportunidade veremos mais sobre a classe XML.</p>
<p>Salve o como galeria.xml.</p>
<p>Nosso trabalho no xml acaba aqui, o Flash se encarregará de ler esses dados. Não esquecendo que esse xml deveria ser gerado por um banco de dados, para fácil manutenção do mesmo.</p>
<p>No Flash 8, abra um novo documento (580px 510px) em branco.</p>
<p>Salve-o como galeria.fla.</p>
<p>Vamos inicialmente definir nossos elementos visuais, desenhe:</p>
<p>Um MovieClip de 378 de largura por 510 de altura, nome de instância: finalTarget;<br />
Um MovieClip de qualquer tamanho (ele será seu preloader), nome de instância: preloader;<br />
Va até o menu superior do Flash, clique em Insert, new Symbol, tipo MovieClip, nome item. Selecione o botão no canto inferior direito e selecione a opção Export For ActionScript, o Identifier deve ter o mesmo nome do símbolo, para facilitar sua localização numa Library complexa, neste caso item.<br />
Dentro deste símbolo, inclua mais duas layers, nomes das três layers:</p>
<p><strong>~AS<br />
target_mc<br />
title_txt</strong></p>
<p>Na layer target_mc, desenhe mais um MovieClip de 100 de largura por 135 de altura, nome de instancia target_mc.<br />
Na layer title_txt, desenhe um texto dinâmico com qualquer tamanho, nome de instância title_txt.</p>
<p>Esses sinais de _mc e _txt vão facilitar para que não esqueçamos o tipo desses objetos e também para lembrar que são variáveis de instâncias.</p>
<p>Na layer de actions digite:</p>
<div id="codigo" title="Flash">/*Estamos importando a classe Tween para facilitar as animações via Action Script*/<br />
import mx.transitions.Tween;<br />
/*Declarando os tipos das instâncias visuais*/<br />
var title_txt:TextField;<br />
var target_mc:MovieClip;<br />
/*Declarando as vriáveis não visuais*/<br />
/*Indica se a thumb está dentro do container */<br />
var selected:Boolean = false;<br />
/*Indica se estamos arrastando a Thumb */<br />
var isDragging:Boolean = false;<br />
/*Posição inicial da Thumb */<br />
var posX:Number = target_mc._x;<br />
var posY:Number = target_mc._y;<br />
/*Velocidade da animação do MovieClip via cálculo */<br />
var time:Number = 10;<br />
/*Inicialização dos objetos*/<br />
/*Classe para preload das imagens grandes*/<br />
var loader:MovieClipLoader = new MovieClipLoader();<br />
/*Criação do objeto que irá ouvir os eventos da classe MovieClipLoader() */<br />
var o:Object = new Object();<br />
/*O MCL está cadastrando um objeto para receber seus futuros eventos */<br />
loader.addListener(o);<br />
/*Evento liberado ao iniciar um preload */<br />
o.onLoadStart = function():Void {<br />
with (_root.preloader) {<br />
_alpha = 100;<br />
}<br />
};<br />
/*Evento liberado no progresso do preload (carregando&#8230;.) */<br />
o.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number):Void {<br />
_root.preloader._xscale = loaded/total*100;<br />
};<br />
/*Evento liberado ao finalizar o preload, é aqui que coloco as ações que devem acontecer ao finalizar o preload */<br />
o.onLoadInit = function():Void {<br />
var effPreloader:Tween = new Tween(_root.preloader, &#8220;_alpha&#8221;, None.easeNone, _root.preloader._alpha, 0, .5, true);<br />
var effTarget:Tween = new Tween(_root.finalTarget, &#8220;_alpha&#8221;, None.easeNone, 0, 100, .5, true);<br />
};<br />
/*Propriedades das instâncias*/<br />
this.tabEnabled = false;<br />
with (title_txt) {<br />
html = true;<br />
autoSize = true;<br />
type = &#8220;dynamic&#8221;;<br />
selectable = false;<br />
}<br />
/*Eventos do próprio Objeto*/<br />
function onPress():Void {<br />
/*Alterando o nível de altura do próprio MovieClip*/<br />
this.swapDepths(_root.getNextHighestDepth());<br />
target_mc.startDrag(false);<br />
/*Estou arrastando */<br />
isDragging = true;<br />
}<br />
function onRelease():Void {<br />
target_mc.stopDrag();<br />
/*Não estou arrastando mais */<br />
isDragging = false;<br />
/*Se o target_mc colidir com o FinalTarget que está no _root, faça algo*/<br />
/*O HitTest passa outros parâmetros dependendo do caso: obj.hitTest(_x, _y, flag), onde flag indica se ele deve respeitar o bounding box (caixa delimetadora do MovieClip) ou não */<br />
if (target_mc.hitTest(_root.finalTarget)) {<br />
/*Aqui dizemos que ele continua sendo arrastado, mais abaixo vamos entender */<br />
isDragging = true;<br />
/*Estou selecionado agora que colidi com finalTarget */<br />
selected = true;<br />
/*Um loop básico que nada mais faz que liberar todos aqueles que não são o que eu estou arrastando*/<br />
/*Para propriedade no _root faça */<br />
for (var i in _root) {<br />
/*Se o nome de instância do meu MovieClip no _root contiver item, faça&#8230; */<br />
if (_root[i]._name.indexOf(&#8220;item&#8221;)&gt;=0) {<br />
/*Se o objeto nesse _root for eu mesmo faça&#8230; */<br />
if (_root[i] == this) {<br />
/*Aqui dentro o target_mc fica invisivel e o loader carrega minha variável largeImage, inserida pelo XML que já vamos ver */<br />
this.target_mc._visible = false;<br />
loader.loadClip(this.largeImage, _root.finalTarget);<br />
/*Caso contrário */<br />
} else {<br />
/*Todos que não são eu mesmo não estão arrastando, não estão mais selecionados e voltam a ficar visíveis */<br />
_root[i].isDragging = false;<br />
_root[i].selected = false;<br />
_root[i].target_mc._visible = true;<br />
}<br />
}<br />
}<br />
}<br />
}<br />
function onReleaseOutside():Void {<br />
onRelease();<br />
}<br />
/*Esse evento de loop de &#8220;animação&#8221; verifica se minha condição isDragging (está arrastando) é verdadeira, se não for faça isso&#8230; */<br />
function onEnterFrame():Void {<br />
if (!isDragging) {<br />
/*A posição do meu objeto será incrementada pela posição inicial menos a posição em que está, dividido pelo tempo de percurso, quanto menor, mais rápido */<br />
target_mc["_x"] += (posX-target_mc["_x"])/time;<br />
target_mc["_y"] += (posY-target_mc["_y"])/time;<br />
}<br />
}</div>
<p>Agora nosso item arrastável já funciona sozinho, o que temos de fazer é populá-lo com o XML, então, agora, voltemos ao _root.<br />
No palco definiremos três layers com os seguintes nomes:</p>
<p><strong>~AS<br />
preloader<br />
finalTarget<br />
</strong><br />
Em cada layer deixamos os respectivos objetos, nesse caso, não coloquei _mc para eles, mas seria bom que vocês o fizessem futuramente&#8230;<br />
Na layer de Actions vamos ao código final:</p>
<div id="codigo" title="Flash2">/*Declarando os tipos das instâncias visuais*/<br />
var preloader:MovieClip;<br />
var finalTarget:MovieClip;<br />
/*Propriedades das instâncias*/<br />
/*Aqui estamos definindo um background para o finalTarget, seu depth (nível, aqui não podemos dizer, suba duas layers, deça três&#8230;) que será o mesmo do finalTarget menos um. */<br />
finalTarget.duplicateMovieClip(&#8220;bgTarget&#8221;, finalTarget.getDepth()-1);<br />
/*Declaração de funções*/<br />
function createGallery():Void {<br />
/*Criação do objeto XML */<br />
var xml:XML = new XML();<br />
xml.ignoreWhite = true;<br />
/*Carregando nosso arquivo xml */<br />
xml.load(&#8220;galeria.xml&#8221;);<br />
/*Ao ler o xml faça isso */<br />
xml.onLoad = function(success:Boolean):Void {<br />
if (success) {<br />
var path:Object = this.firstChild.childNodes;<br />
/*Para variável i que vale 0, enquanto ela for menor que o número de itens dentro do xml, incremente 1 */<br />
for (var i:Number = 0; i&lt;path.length; i++) {<br />
/*Estamos chamando o item da Library */<br />
t = _root.attachMovie(&#8220;item&#8221;, &#8220;item&#8221;+i, i, {_x:10});<br />
/*Esse item terá sua instância title_txt em sua propriedade text o valor alterado para o atributo title do XML */<br />
t.title_txt.text = path[i].attributes.title;<br />
/*Esse item terá sua instância target_mc carregando via loadMovie o atributo thumb do XML */<br />
t.target_mc.loadMovie(path[i].attributes.thumb);<br />
/*Anexamos uma variável largeImage ao MovieClip item, a mesma que chamamod no método loadClip da classe MovieClipLoader dentro do item */<br />
t.largeImage = path[i].attributes.img;<br />
/*Definimos a posição do item e incrementamos um espaço de px a distância entre eles */<br />
t._y = i*t._height+10;<br />
}<br />
}<br />
};<br />
}<br />
/*Inicialização das funções */<br />
createGallery();</div>
<p>Neste artigo não vimos a paginação deste xml, ficará para a parte 2 juntamente com os Downloads dessas imagens.</p>
<p>Espero que tenham gostado, dúvidas ou sugestões são bem vindas em meu e-mail.</p>
<p>Abraços e até a próxima!</p>
<p align="justify"><strong>Autor: Leandro Amano &#8211; Colunista de Flash do MXSTUDIO</strong></p>
<p>Site: <a href="http://www.leandroamano.com.br" target="_blank">www.leandroamano.com.br</a><br />
Sobre: Leandro Amano atualmente é designer/desenvolvedor <a href="http://www.adobe.com" target="_blank">Macromedia</a>, Macromedia User Group Leader do <a href="http://www.flashfor.com.br" target="_blank">Flashfor</a>, diretor de criação da <a href="http://www.digitalbug.com.br" target="_blank">Digital Bug</a> e instrutor Macromedia na <a href="http://www.eng.com.br" target="_blank">ENG DTP &amp; Multimídia</a> em São Paulo &#8211; SP.</p>
<p align="justify">Qualquer dúvida envie um email para  <a href="mailto:amano@leandroamano.com.br?subject=MXStudio%20HitTest">amano@leandroamano.com.br</a> ou acesse o nosso <a href="http://forum.mxstudio.com.br" target="forum">fórum</a>.</p>
</td>
<p><script type="text/javascript"><!--
FormatAS();
// --></script></tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/flash/movie_clip___hittest__galeria_/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flash Vídeo &#8211; Media Components</title>
		<link>http://www.mxstudio.com.br/desenvolvimento/flash/flash_video___media_components/</link>
		<comments>http://www.mxstudio.com.br/desenvolvimento/flash/flash_video___media_components/#comments</comments>
		<pubDate>Tue, 09 May 2006 00:00:00 +0000</pubDate>
		<dc:creator>Leandro_Amano</dc:creator>
				<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Definir o uso de Flash V&#237;deo com e sem servidor, utilizando novos componentes providos junto ao Flash 8.]]></description>
			<content:encoded><![CDATA[<p><script src="http://www.mxstudio.com.br/js/ColorCode.js"></script></p>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td id="colunaTexto" valign="top">
<h1>Coluna Flash &#8211; Flash Vídeo &#8211; Media Components</h1>
<h2><strong>Flash Platform &#8211; Developing a Simple Rich Media Player<br />
Desenvolvendo um Simples Tocador de Vídeo em Flash 8</strong></h2>
<h2>Introdução</h2>
<p align="justify">Estaremos definindo neste artigo algo mais concreto sobre Flash 8 e vídeo, mídia rica que nenhum outro pode propor, tanto em facilidade de desenvolvimento como retorno em menor prazo.</p>
<h2>Pré-Requisitos</h2>
<p>Este artigo pede um conhecimento básico de ActionScript, mas é necessário ter uma familiaridade com o Flash.</p>
<h2>Objetivo</h2>
<p align="justify">Definir o uso de Flash Vídeo com e sem servidor, utilizando novos componentes providos junto ao Flash 8.</p>
<h2>Conceitos</h2>
<p>O Flash 8 trabalha diferentemente dos seus antecessores com vídeo, nesta versão qualquer um pode trabalhar com download progressivo de maneira profissional. No momento da importação o Flash já nos traz a opção desse tipo de uso com vídeo, mas não entrarei em detalhes sobre isso aqui.</p>
<p>Estaremos utilizando o formato .flv nos vídeos que é o único formato real de vídeo no Flash.<br />
A vantagem de se utilizar esse formato, é que a Frame Rate do vídeo pode ser diferente a do seu filme principal, além da distribuição externa de arquivos, é claro. Mas a principal vantagem que considero é a possibilidade de streaming real, que na versão MX só era possível com o Macromedia Flash Communication Server, como as actions netConnection e netStream. Não vamos esquecer que o Flash 8 suporta vídeo com canal Alpha e filtros aplicados dentro do próprio Flash!</p>
<p>Mas, o que e Streaming? Streaming e a distribuição em tempo real de vídeo ao vivo ou áudio na internet. Esse streaming só pode ser transferido com o Flash utilizando o Macromedia Flash Media Server 2 (ou Macromedia Flash vídeo Streaming Service). A buferização é usada para armazenar dados, antes que o streaming comece a tocar ou continue tocando.<br />
Vídeos digitais são codificados e decodificados usando um CODEC (CODEC=COmpression (compressão) / DECompression (descompressão)). V ídeos e áudios utilizam diferentes CODECs, mas são compilados dentro de um único arquivo, o player precisa do mesmo CODEC para que possa ser assistido.</p>
<p>Então a vantagem do Flash 8. A nova versão já traz consigo o Macromedia Flash 8 vídeo Encoder que converte AVI, MOV, WMV, DV, MPEG em FLV, neste caso o cliente necessita apenas do mesmo Flash Player para visualizar esse conteúdo rico.<br />
Algumas das vantagens que a Macromedia traz com o Flash:</p>
<ul>
<li>Nenhum JavaScript complexo e requerido;</li>
<li>Não necessita de checagem de plataforma;</li>
<li>Não necessita de pop up;</li>
<li>Rápida buferização e play</li>
<li>100% de controle sobre o player ;</li>
<li>O player é facilmente controlado com ActionScript;</li>
<li>Player 100% customizável;</li>
<li>Captura de vídeo (fire-wire cameras, USB cameras, microfones);</li>
</ul>
<p>Agora que conhecemos uma leve camada superficial sobre vídeo e alguns conceitos, vamos desenvolver um mini player</p>
<h2>Conteúdo</h2>
<p align="justify">No Macromedia Flash 8, num novo Flash Document:</p>
<p>Já iremos criar as layers que iremos trabalhar, algumas boas convenções a serem seguidas:</p>
<ul>
<li>A layer do topo deve ser a de ActionScript, uso o nome as;</li>
<li>Layers nunca são chamadas por actions, logo o nome descritivo deve sempre ser alterado de forma que fique fácil de entender, não importando espaços e acentuações;</li>
<li>Layers que não são usadas em tempo de execução devem ser alteradas para &#8220;guides&#8221;, para isso é só clicar com o direito sobre a layer e pedir guide;</li>
</ul>
<p>Em nossas layers:<br />
Na layer do topo, vamos chamar a layer de <strong>~AS</strong>(actionScript).<br />
Também criaremos mais três layers: UI Components, FLV Playback e controles, a ordem de cima para baixo é:</p>
<ul>
<li>as (corrigir para ~AS)</li>
<li>UI Components</li>
<li>FLV Playback</li>
<li>controles</li>
</ul>
<p><img src="http://www.mxstudio.com.br/imagens_artigos/leandroAmano_maio06_FlashVideo_imagens/leandroAmano_maio06_FlashVideo_01.jpg" alt="" width="&gt; &lt;/p&gt; &lt;p&gt;Em seguida, abriremos o painel de componentes, o caminho é: Window - Components.&lt;br /&gt;   Com o painel aberto, abra o nó da árvore FLV Playback - Player 8 e arraste o FLVPlayback para sua respectiva layer.&lt;br /&gt;   Reparem que como todo componente, na aba parameters na barra de propriedades, o componente possui uma série de configurações que facilitam o desenvolvimento, esses detalhes não entram no escopo desse artigo, o que devemos saber é unicamente são as seguintes opções:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;autoPlay - começar tocando? true para sim e false para não;&lt;/li&gt; &lt;li&gt;contentPath - arquivo .flv que será utilizado para o componente de vídeo, em nosso caso não definiremos via parâmetro;&lt;/li&gt; &lt;li&gt;skin - essa opção pode definir vários estilos de personalização do player, porém, todos padrões, não é essa nossa intenção, utilizaremos None; &lt;/li&gt; &lt;li&gt;maintainAspectRatio - Utilizaremos false para que o vídeo tenha sempre a mesma proporção; &lt;/li&gt; &lt;/ul&gt; &lt;p&gt;&lt;img src=" height="170" />import mx.video.FLVPlayback;<br />
var _playback:FLVPlayback;</p>
<p>Estamos importando a classe <em>FLVPlayback</em> e identificando o objeto visual que estará associado a classe, isso nos permite acessar as propriedades e métodos dos componentes mais facilmente.<br />
Através das actions abaixo vamos dizer ao Flash qual filme chamar:</p>
<div id="codigo">_playback.contentPath = &#8220;sampleFLV/video.flv&#8221;;</div>
<p>Note que no <strong>contentPath</strong>, coloquei o vídeo em uma pasta separada, de nome sampleFLV. Isso adota uma prática importante de organização de arquivos do aplicativo. O nome do arquivo será o arquivo de cada um, no meu caso o mesmo se chama video.flv.</p>
<p>Vamos abrir novamente o painel de componentes e arrastar para a layer UI Components dois componentes List, que se encontram no nó User Interface, esses componentes terão os nomes de instâncias _filmes e _capitulos.<br />
Dentro do componente _filmes vamos editar seus labels e datas, que nada mais são que respectivamente rótulos e dados que serão armazenados, onde no caso de filmes, labels guardará os nomes descritivos dos filmes e data o endereço dos filmes.<br />
Para o componente _capitulos, iremos armazenar nomes descritivos para os capítulos do filme correspondente e em data armazenaremos o tempo que corresponde a entrada do capítulo, por exemplo 5 (5 segundos).</p>
<p>As configurações para _filmes são:</p>
<ul>
<li>Label: Baby, Montain, Jamie;</li>
<li>Data: sampleFlv/adrian.flv, sampleFlv/MtnBike.flv, sampleFLV/Jamie_on_White.flv;</li>
</ul>
<p><img src="http://www.mxstudio.com.br/imagens_artigos/leandroAmano_maio06_FlashVideo_imagens/leandroAmano_maio06_FlashVideo_03.jpg" alt="" width="&gt;&lt;/p&gt; &lt;p&gt;As configurações para _capitulos são:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Label: Capítulo 1, Capítulo 2, Capítulo 3, Capítulo 4;&lt;/li&gt; &lt;li&gt;Data: 0, 15, 30, 45;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Os capítulos são meramente ilustrativos, cada um deve considerar seu próprio filme em questão e configurar o tempo correspondente a sua mídia. &lt;/p&gt; &lt;p&gt;Agora que estão configurados devemos fazer com que funcionem junto ao componente de vídeo FLVPlayback, para isso abrimos a janela - Window - Component Inspector com _filmes selecionado. Na aba Bindings (relacionamentos) vamos agora dizer ao List (_filmes) que o mesmo será relacionado junto ao FLVPlayback (_playback), para isso, vamos clicar no sinal de + (positivo) e adicionar o SelectedItem, clicar na opção abaixo Use Path Expression e digitar data, já que nossos dados estão armazenados na propriedade data do componente List, clique em OK.&lt;br /&gt;   Nas opções abaixo direction, bound to... vamos deixar direction como out, já que o mesmo vai sair do componente List e entrar no componente Playback, em bound to selecionamos o componente FLVPlayback e pedimos o contentPath, já que é ele quem nos diz que filme será tocado.&lt;br /&gt;   No componente _capitulos devemos fazer a mesma coisa, com exceção que ao final o SelectedItem.data será relacionado com playheadTime em bound to. &lt;/p&gt; &lt;p&gt;Apenas isso já resolve boa parte de nossos problemas, podemos até testá-lo. O filme já está funcionando com os componentes UI!&lt;br /&gt;   A partir de agora vamos customizar nosso tocador de Vídeo.&lt;br /&gt;   Na layer controles iremos agora arrastar alguns componentes novos, abriremos novamente Window - Components, no nó FLV Playback Custom UI vamos trazer:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;PlayButton;&lt;/li&gt; &lt;li&gt;PauseButton;&lt;/li&gt; &lt;li&gt;StopButton;&lt;/li&gt; &lt;li&gt;SeekBar;&lt;/li&gt; &lt;li&gt;VolumeBar;&lt;/li&gt; &lt;li&gt;MuteButton;&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;&lt;img src=" height="291" /></p>
<p>_playback.playButton = _play;<br />
_playback.pauseButton = _pause;<br />
_playback.stopButton = _stop;<br />
_playback.seekBar = _seek;<br />
_playback.volumeBar = _volume;<br />
_playback.muteButton = _mute;</p>
<p>Podemos testar e ver como reage com esses novos componentes, e um detalhe muito importante, com dois cliques nesses componentes de navegação, podemos editar formas e cores personalizadas, como acontecia com os componentes UI na versão MX. Tudo isso com apenas nove linhas de ActionScript.</p>
<p>Na layer de ActionScript iremos agora adicionar alguns eventos que nos informam eventos ocorridos durante a execução:</p>
<div id="codigo">
<p>/*Estamos criando o campo de texto*/<br />
var texto:TextField = _root.createTextField(&#8220;info&#8221;, _root.getNextHighestDepth(), 11, 340, 0, 0);<br />
/*O texto será auto dimensionável a partir da esquerda*/<br />
texto.autoSize = &#8220;left&#8221;;<br />
/*O texto não será selecionável*/<br />
texto.selectable = false;<br />
/*Estamos criando o estilo para o campo de texto*/<br />
var estilo:TextFormat = new TextFormat();<br />
/*Fonte*/<br />
estilo.font = &#8220;Verdana&#8221;;<br />
/*Tamanho*/<br />
estilo.size = 12;<br />
/*Negrito*/<br />
estilo.bold = true;<br />
/*Cor do texto*/<br />
estilo.color = 0&#215;990000;<br />
/*Sublinhado*/<br />
estilo.underline = true;</p>
</div>
<p>Agora que já temos nosso texto precisamos adicionar eventos e conforme a ocorrência apresenta-los no campo de texto, nosso componente possui alguns eventos, como ready e stateChange, veremos algo muito breve sobre isso. Assim como todo componente devemos adicionar ou objeto genérico que fica prestando atenção a eventos que ocorrem com o Objeto, é ele quem nasce exclusivamente para escutar esses eventos, chamaremos ele de ouvidor:</p>
<div id="codigo">
<p>var ouvidor:Object = new Object();</p>
</div>
<p>Agora que está criado nosso objeto (abaixo das actions anteriores) devemos aplicar a este objeto os eventos que escutaremos, no caso ready e stateChange:</p>
<div id="codigo">
<p>ouvidor.ready = function():Void {<br />
//Exibe o tempo total do filme<br />
texto.text = &#8220;Tempo total: &#8220;+_playback.totalTime;<br />
//Aplica o estilo ao texto<br />
texto.setTextFormat(estilo);<br />
};<br />
ouvidor.stateChange = function():Void {<br />
//Exibe o estado do filme, como por exemplo tocando, pausado, etc<br />
texto.text = _playback.state;<br />
//Aplica o estilo ao texto<br />
texto.setTextFormat(estilo);<br />
};</p>
</div>
<p>Aplicando agora o objeto ouvidor ao componente utilizado:</p>
<div id="codigo">
<p>_playback.addEventListener(&#8220;ready&#8221;, ouvidor);<br />
_playback.addEventListener(&#8220;stateChange&#8221;, ouvidor);</p>
</div>
<p>Nosso código final é esse:</p>
<div id="codigo">
<p>import mx.video.FLVPlayback;<br />
var _playback:FLVPlayback;<br />
_playback.contentPath = &#8220;sampleFLV/betina.flv&#8221;;<br />
_playback.playButton = _play;<br />
_playback.pauseButton = _pause;<br />
_playback.stopButton = _stop;<br />
_playback.seekBar = _seek;<br />
_playback.volumeBar = _volume;<br />
_playback.muteButton = _mute;<br />
//Estamos criando o campo de texto<br />
var texto:TextField = _root.createTextField(&#8220;info&#8221;, _root.getNextHighestDepth(), 11, 340, 0, 0);<br />
//O texto será auto dimensionável a partir da esquerda<br />
texto.autoSize = &#8220;left&#8221;;<br />
//O texto não será selecionável<br />
texto.selectable = false;<br />
//Estamos criando o estilo para o campo de texto<br />
var estilo:TextFormat = new TextFormat();<br />
//Fonte<br />
estilo.font = &#8220;Verdana&#8221;;<br />
//Tamanho<br />
estilo.size = 12;<br />
//Negrito<br />
estilo.bold = true;<br />
//Cor do texto<br />
estilo.color = 0&#215;990000;<br />
//Sublinhado<br />
estilo.underline = true;<br />
var ouvidor:Object = new Object();<br />
ouvidor.ready = function():Void {<br />
//Exibe o tempo total do filme<br />
texto.text = &#8220;Tempo total: &#8220;+_playback.totalTime;<br />
//Aplica o estilo ao texto<br />
texto.setTextFormat(estilo);<br />
};<br />
ouvidor.stateChange = function():Void {<br />
//Exibe o estado do filme, como por exemplo tocando, pausado, etc<br />
texto.text = _playback.state;<br />
//Aplica o estilo ao texto<br />
texto.setTextFormat(estilo);<br />
};<br />
_playback.addEventListener(&#8220;ready&#8221;, ouvidor);<br />
_playback.addEventListener(&#8220;stateChange&#8221;, ouvidor);</p>
</div>
<p><em><img src="http://www.mxstudio.com.br/imagens_artigos/leandroAmano_maio06_FlashVideo_imagens/leandroAmano_maio06_FlashVideo_05_III.jpg" alt="" width="580" height="&gt;&lt;br /&gt; 		  &lt;/i&gt;. &lt;/p&gt; &lt;h2 align=" />Considerações Finais </em></p>
<p><em>O uso direto de filtros no vídeo não é permitido, para isso transforme o vídeo em MovieClip e aplique filtros e Blend Modes como desejar, só não esqueça de mudar na ActionScript a referência ao objeto.</em></p>
<p><em>Espero que tenham gostado, dúvidas ou sugestões são bem vindas em meu e-mail.<br />
Abraços e até a próxima! </em></p>
<p><em> <strong>Autor: Leandro Amano &#8211; Articulista de Flash do MXSTUDIO</strong></em></p>
<p><em>Site: <a href="http://www.leandroamano.com.br" target="_blank">www.leandroamano.com.br</a><br />
Sobre: Leandro Amano atualmente é designer/desenvolvedor <a href="http://www.adobe.com" target="_blank">Macromedia</a>, Macromedia User Group Leader do <a href="http://www.flashfor.com.br" target="_blank">Flashfor</a>, diretor de criação da <a href="http://www.digitalbug.com.br" target="_blank">Digital Bug</a> e instrutor Macromedia na <a href="http://www.eng.com.br" target="_blank">ENG DTP &amp; Multimídia</a> em São Paulo &#8211; SP.</em></p>
<p align="justify"><em>Qualquer dúvida envie um email para  <a href="mailto:amano@leandroamano.com.br?subject=MXStudio%20Media%20Player%208">amano@leandroamano.com.br</a> ou acesse o nosso <a href="http://forum.mxstudio.com.br" target="forum">fórum</a>.</em></p>
</td>
<p><script type="text/javascript"><!--
FormatAS();
// --></script></tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/desenvolvimento/flash/flash_video___media_components/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

