Populando ComboBox no Adobe Flex com dados vindos do PHP

Posted by Andrews on agosto 14th, 2009

Percebi que muita gente busca esta informação poraqui devido a outro post que fiz sobre como popular ComboBox no Adobe Flash com PHP e MySQL, então resolvi escrever este pequeno post solucionando e ajudando quem tem está dúvida.

Teremos então uma function no PHP que retorna os dados para o Adobe Flex dentro de um Array.

function popularCombo() {
  for ($i = 0; $i<=10; $i++) {
    $aReturn['data'][$i]['data']  = $i;
    $aReturn['data'][$i]['label'] = 'Label ' . $i;
  }
  return $aReturn;
}

E no Adobe Flex devemos então criar outro for que por sua vez, irá tratar e jogar os dados para dentro do ComboBox.

// Variavel do tipo ArrayCollection,
// que serve para acondicionar
// os dados para o dataProvider
private var aDados:ArrayCollection = new ArrayCollection();
 
// Function
function... {
  for(var i:int = 0; i<event.result.data.length; i++) {
    var objDados:Object = new Object();
    // passando ao objeto (objDados)
    // os dados vindos do php
    objDados.data  = event.result.data[i].data;
    objDados.label = event.result.data[i].label;
    // adiciona o objeto da vez ao ArrayCollection (aDados)
    this.aDados.addItem(objDados); 
  }
  // informa ao dataProvider do ComboBox que ele
  // recebera os dados do ArrayCollection (aDados),
  // assim preenchendo o mesmo
  ComboBox.dataProvider = this.aDados;
} // End of function

Bem simples não?
Não me apronfudei muito, pois entendo que neste caso, tu saiba trabalhar com Adobe Flex e PHP.

Aplicando filtros com caurina FilterShortcuts

Posted by Andrews on abril 14th, 2009

Continuando os posts sobre as classes caurina vou mostrar como trabalhar com os filtros DropShadow, Glow e Blur.
Não vou me ater muito na criação do arquivo para não ficar extenso o post, assim entendo que tu saiba trabalhar com flash.
Neste caso estou aplicando os filtros através de uma function, onde verificamos qual é o filtro solicitado pelo botão, após aplica-se o filtro solicitado.

// IMPORTAMOS A CLASSE Tweener e FilterShortcuts
import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
 
// INICIANDO A CLASSE FilterShortcuts
FilterShortcuts.init();
 
/**
 * FUNCTION aplicarFiltro
 * @param MouseEvent
 */
function aplicarFiltro(event:MouseEvent):void {
	var target:String = event.target.name;
	switch(target) {
		case 'shadow_mc':
			Tweener.addTween(container_mc, {_DropShadow_blurX:30, _DropShadow_blurY:30, time:.5, transition:'linear'});
			break;
		case 'glow_mc':
			Tweener.addTween(container_mc, {_Glow_blurX:30, _Glow_blurY:30, time:.5, transition:'linear'});
			break;
		case 'blur_mc':
			Tweener.addTween(container_mc, {_Blur_blurX:30, _Blur_blurY:30, time:.5, transition:'linear'});
			break;
	}
}
 
/**
 * FUNCTION removerFiltro
 * @param MouseEvent
 */
function removerFiltro(event:MouseEvent):void {
	var target:String = event.target.name;
	switch(target) {
		case 'shadow_mc':
			Tweener.addTween(container_mc, {_DropShadow_blurX:0, _DropShadow_blurY:0, time:.5, transition:'linear'});
			break;
		case 'glow_mc':
			Tweener.addTween(container_mc, {_Glow_blurX:0, _Glow_blurY:0, time:.5, transition:'linear'});
			break;
		case 'blur_mc':
			Tweener.addTween(container_mc, {_Blur_blurX:0, _Blur_blurY:0, time:.5, transition:'linear'});
			break;
	}
}
 
// EVENTOS
shadow_mc.addEventListener(MouseEvent.MOUSE_OVER, aplicarFiltro);
shadow_mc.addEventListener(MouseEvent.MOUSE_OUT, removerFiltro);
glow_mc.addEventListener(MouseEvent.MOUSE_OVER, aplicarFiltro);
glow_mc.addEventListener(MouseEvent.MOUSE_OUT, removerFiltro);
blur_mc.addEventListener(MouseEvent.MOUSE_OVER, aplicarFiltro);
blur_mc.addEventListener(MouseEvent.MOUSE_OUT, removerFiltro);

Repare que no filtro Glow você precisa alterar a cor, pois ele utiliza uma cor padrão para o filtro. Neste caso pode-se estar aplicando também a propriedade _Glow_color, que é o responsável pela manipulação da cor do Glow.

Tweener.addTween(container_mc, {_Glow_blurX:30, _Glow_blurY:30, _Glow_color:0x333333, time:.5, transition:'linear'});

As classes caurina são uma mão na roda para quem não curte usar a timelime e manipular os objetos no palco, assim facilitando e muito nossa vida. Lembrando que devemos essa ao Zeh por te-la disponibilizado a comunidade.

Clique aqui e veja como ficou o exemplo.

Criando um perseguidor de mouse

Posted by Andrews on abril 2nd, 2009

Uma dica bem simples para causar um tchan a mais ao se passar o mouse sobre objetos em uma aplicação flash é criar um perseguidor ou como queiram chamar.
Pois bem… primeiro crie então um movieclip no palco e instancie-o com o nome de botao_mc, após ter o botão criado, criaremos nosso perseguidor.
Desenho um circulo, retângulo ou qualquer outra coisa no palco, e transforme-o em um movieclip setando seu nome como perseguidor_mc, também será necessário setar uma identificação para o Linkage, pois iremos chamar ele da biblioteca. Para fazer isto clique em Advanced, e após marque a opção Export for ActionScript. Veja o exemplo abaixo.

configuração do perseguidor

Após ter criado o perseguidor, delete-o do palco, deixando apenas o botão.
Crie uma nova layer e escreva a action que será responsável por atachar e movimentar o persseguidor do mouse.

// IMPORTANDO A CLASSE CAURINA TWEENER
import caurina.transitions.Tweener;
 
// EVENTO OVER
botao_mc.onRollOver = function() {
 
	// ATACHA O PERSEGUIDOR NA POSICAO X E Y DO MOUSE
	attachMovie('perseguidor_mc', 'perseguidor_mc', 1, {_x:_xmouse, _y:_ymouse});
 
	// AO MOVER O MOUSE, MOVE TAMBEM O PERSEGUIDOR
	onMouseMove = function() {
 
		// APLICANDO TWEENER PARA SUAVIZAR O MOVIMENTO DO PERSEGUIDOR
		Tweener.addTween(perseguidor_mc, {_x:_xmouse+9, _y:_ymouse+20, time:1, transition:'easeOutExpo'});
	}
}
 
// EVENTO OUT
botao_mc.onRollOut = function() {
 
	// REMOVE O PERSEGUIDOR
	removeMovieClip(perseguidor_mc);
 
	// DELETA A FUNCAO MOUSE MOVE
	delete onMouseMove;
}

Esta feito nosso perseguidor, supimpa não!
clique aqui e veja como ficou o exemplo

Populando ComboBox no Flash com PHP, MySQL e XML

Posted by Andrews on fevereiro 5th, 2009

Tenho estudado muito nos últimos dias, afinal quem trabalha nesta área tem de estar em aprendizado constante. Estou iniciando meus estudos em OOP no PHP e também aprofundando meu conhecimento no Adobe Flex, e tenho progredido bastante neste período.
Mas brother, vamos ao que interessa para este post, acabei escrevendo um código utilizando PHP e MySQL, onde o PHP gera um XML através de uma consulta na tabela para alimentar um ComboBox Component no Flash.
Alimentar um ComboBox é simples, mas resolvi que iremos alimetar dois ComboBox, onde, um irá alimentar o outro, utilizarei os estados do Brasil e suas cidades como exemplo.

1ª Etapa:
Aqui, definiremos nossas tabelas no MySQL.
Tabela estado

CREATE TABLE `estado` (
    `est_codigo` int(2) NOT NULL auto_increment,
    `est_nome` varchar(50),
    PRIMARY KEY  (`est_codigo`)
)
insert  into
    `estado`(`est_codigo`,`est_nome`)
values
    (1,'Santa Catarina'),
    (2,'Paraná'),
    (3,'Rio Grande do Sul'),
    (4,'São Paulo'),
    (5,'Rio de Janeiro');

Tabela cidade

CREATE TABLE `cidade` (
    `cid_codigo` int(5) NOT NULL auto_increment,
    `cid_est_codigo` int(2) default NULL,
    `cid_nome` varchar(70) default NULL,
    PRIMARY KEY  (`cid_codigo`)
)
insert  into
    `cidade`(`cid_codigo`,`cid_est_codigo`,`cid_nome`)
values
    (1,1,'Porto União'),
    (2,1,'Canoinhas'),
    (3,1,'Balneário Camboriú'),
    (4,1,'Caçador'),
    (5,1,'Florianópolis'),
    (6,2,'Curitiba'),
    (7,2,'União da Vitória'),
    (8,2,'Foz do Iguaçu'),
    (9,3,'Porto Alegre'),
    (10,3,'Canoas'),
    (11,3,'Caxias do Sul'),
    (12,4,'São Paulo'),
    (13,4,'Campinas'),
    (14,4,'Santos'),
    (15,4,'Ubatuba'),
    (16,5,'Rio de Janeiro'),
    (17,5,'Angra dos Reis'),
    (18,5,'Paraty');

2ª Etapa:
Precisaremos de uma conexão com nosso banco de dados, caso ja tenha ou saiba como criar uma pode passar para a próxima etapa.
Crie um novo arquivo PHP e salve-o com o nome de Conexao.php então escreveremos a classe Conexao.

<?php
class Conexao {
 
        // CONSTRUTOR
	function __construct() {
		return true;
	}
 
	/**
	 * FUNCTION CONEXAO
	 * @return $cnx
	 */
	function conectar() {
		$sHost      = 'nome-do-host';
		$sDB        = 'nome-do-db';
		$sUser      = 'nome-do-user-mysql';
		$sPassword  = 'senha-do-usuer';
		$cnx        = mysql_connect($sHost, $sUser, $sPassword);
		mysql_select_db($sDB, $cnx);
		return $cnx;
	}
}
?>

3ª Etapa
Nesta etapa definiremos as classes que irão gerar o XML para alimentar o ComboBox de estados que por sua vez irá alimentar o ComboBox de cidades.
Então crie um arquivo PHP chamado Estado.php e escreva a classe abaixo.

<?php
// INFORMAMOS QUE O DOCUMENTO SERA DO TIPO XML
header("Content-Type: text/xml; charset=UTF-8", true);
 
// CONEXAO
require_once('Conexao.php');
 
// CLASS ESTADO
class Estado {
 
	// CONSTRUTOR
	function __construct() {
		return true;
	}
 
	/**
	 * FUNCTION getEstado
	 * @return xml
	 */
	function getEstado() {
 
		// CONEXAO
		$conexao = new Conexao();
		$cnx     = $conexao->conectar();
 
		// SELECIONA ESTADO NO DB
		$sSQL = "SELECT est_codigo, est_nome FROM estado ORDER BY est_nome ASC";
		$qSQL = mysql_query($sSQL, $cnx) or die(mysql_error());
 
		// GERANDO XML
		echo "<?xml version='1.0' encoding='UTF-8'?> ";
		echo "<estados>";
			while( $aRow = mysql_fetch_array($qSQL) ) {
				echo "<estado>";
				echo "<codigo><![CDATA[" . $aRow['est_codigo'] . "]]></codigo>";
				echo "<nome><![CDATA["   . $aRow['est_nome']   . "]]></nome>";
				echo "</estado>";
			};
		echo "</estados>";
	}
 
}
 
// INICIA CLASSE
$estado = new Estado();
echo $estado->getEstado();
 
?>

Salve-o, e agora iremos criar a classe que alimentará as cidades.
A Classe de cidades é exibida de forma dinâmica, onde, ao selecionar o estado desejado passaremos o código dele como parametro para consultar somente as cidades que fazem referência a este estado.
Crie um novo arquivo PHP e salve-o como o nome Cidade.php, e escreva a classe para as cidades.

<?php
// INFORMAMOS QUE O DOCUMENTO SERA DO TIPO XML
header("Content-Type: text/xml; charset=UTF-8", true);
 
// CONEXAO
require_once('Conexao.php');
 
// CLASS CIDADE
class Cidade {
 
	// CONSTRUTOR
	function __construct() {
		return true;
	}
 
	/**
	 * FUNCTION getCidade
	 * @param Number codigo
	 * @return xml
	 */
	function getCidade($codigo) {
 
                // CONEXAO
		$conexao = new Conexao();
		$cnx     = $conexao->conectar();
 
		$nCodigo = $codigo;
		$sSQL    = "SELECT
		                cid_codigo, cid_nome
					FROM
					    cidade
					WHERE
						cid_est_codigo = $nCodigo
					ORDER BY
						cid_nome ASC";
		$qSQL    = mysql_query($sSQL, $cnx) or die(mysql_error());
 
		// GERANDO XML
		echo "<?xml version='1.0' encoding='UTF-8' ?>";
		echo "<cidades>";
			while ($aRow = mysql_fetch_array($qSQL)) {
				echo "<cidade>";
				echo "<codigo><![CDATA[" . $aRow['cid_codigo'] . "]]></codigo>";
				echo "<cidade><![CDATA[" . $aRow['cid_nome']   . "]]></cidade>";
				echo "</cidade>";
			}
		echo "</cidades>";
	}
}
 
/**
 * INICIAMOS A CLASSE E PASSAMOS O CODIGO DO
 * ESTADO COMO PARAMETRO PARA A CONSULTA
 */
$cidade = new Cidade();
echo $cidade->getCidade($_GET['codigo']);
?>

4ª Etapa
Nesta quarta e última etapa, criaremos e escreveremos nosso arquivo Flash.
Então, crie um novo arquivo Flash, e arraste dois Components ComboBox para o palco, de o nome de instância para eles de estado_cbx e cidade_cbx, também crie um campo de texto dinâmico com o nome de alerta_txt.
Abaixo temos a imagem de como ficará os objetos no palco.
populando-combobox
Agora, insira uma nova Layer para que possamos escrever nosso código ActionScript, onde, este por sua vez será o reponsável pelo carregamento e população dos ComboBox.

System.useCodepage = true;
 
/**
 * FUNCTION getEstado
 */
getEstado = function() {
	var xmlEstado:XML     = new XML();
	xmlEstado.ignoreWhite = true;
	xmlEstado.load("Estado.php");
	xmlEstado.onLoad = function(ok) {
		if (ok) {
 
			var aDados = Array();
			var nTotal = this.firstChild.childNodes.length;
 
			// PASSANDO DADOS DO XML PARA ARRAY
			for (var i = 0; i < nTotal; i++) {
				aNode     = this.firstChild.childNodes[i];
				aDados[i] = { data:aNode.childNodes[0].firstChild.nodeValue, label:aNode.childNodes[1].firstChild.nodeValue };
			}
 
			// POPULANDO COMBOBOX COM OS DADOS DO ARRAY
			estado_cbx.dataProvider = aDados;
		}
	};
 
	// LISTENER PARA ESTADO
	var objEstado:Object = new Object();
	objEstado.change = function() {
		sEstado         = estado_cbx.selectedItem.label;
		nCodigo         = estado_cbx.value;
		alerta_txt.text = sEstado;
		getCidade(nCodigo);
	};
	estado_cbx.addEventListener("change", objEstado);
}
getEstado();
 
/**
 * FUNCTION getCidade
 * @param Number nCodigo
 */
getCidade = function(nCodigo) {
 
	var xmlCidade:XML     = new XML();
	xmlCidade.ignoreWhite = true;
	xmlCidade.load("Cidade.php?codigo="+nCodigo);
	xmlCidade.onLoad = function(ok) {
		if (ok) {
 
			var aDados = Array();
			var nTotal = this.firstChild.childNodes.length;
 
			// PASSANDO DADOS DO XML PARA ARRAY
			for (var i = 0; i < nTotal; i++) {
				aNode     = this.firstChild.childNodes[i];
				aDados[i] = { data:aNode.childNodes[0].firstChild.nodeValue, label:aNode.childNodes[1].firstChild.nodeValue };
			}
 
			// POPULANDO COMBOBOX COM DADOS DO ARRAY
			cidade_cbx.dataProvider = aDados;
		}
	}
 
	// LISTENER PARA CIDADE
	var objCidade:Object = new Object();
	objCidade.change = function() {
		sEstado = estado_cbx.selectedItem.label;
		sCidade = cidade_cbx.selectedItem.label;		
		alerta_txt.text = sCidade + " - " + sEstado;
	};
	cidade_cbx.addEventListener("change", objCidade);
}

Agora, salve o arquivo Flash com qualquer nome, compile e teste-o.
Prontinho, nosso trabalho está feito, e com a certeza de que tiraremos bastante proveito dele.
O post ficou grande, porém tenho a certeza de que estou progredindo em meus estudos e em meu conhecimento também, e assim espero repassar o pouco do que estou aprendendo com os demais, pois, como nossa areá vive em constante apredizado e nem todos tem a oportunidade de estar aprendendo em uma sala de aula fica ai então a pequena contribuição. :)

Clique aqui e veja como ficou nossa pequena aplicação

Macanudo, finalizo este post ao som de Chromophobia, Gui Boratto. d(-_-)b

Chamando um Component baseado em FlexMDI

Posted by Andrews on dezembro 30th, 2008

Uma dica rápida de como chamar components baseados em FlexMDI via actionscript (Entendo que ja saiba trabalhar com Components no Adobe Flex).

Deve-se definir um container no arquivo principal para que este possa acondicionar os components baseado em FlexMDI, onde, também teremos um Button para executar a function.

<mx:Button label="Add Window" click="addWindow()"/>
<flexmdi:MDICanvas id="myMDI" width="100%" height="100%"/>

Também devemos criar o component lógico :P , então definimos que nosso component será do tipo MDIWindow e seu nome será window.
Após ter criado o component, escreveremos a function que o chamará.

private function addWindow():void {
     var myWindow:window = new window();
     myMDI.windowManager.add(myWindow);
}

Pronto! mais simples que isto impossível.
Veja como ficou nosso component, bem como o source

Um novo e rico projeto esta por vir

Posted by Andrews on dezembro 17th, 2008

Atualmente venho trabalhando e estudando fortemente com a ferramenta Adobe Flex (ferramenta para desenvolvimento de RIA – Rich Internet Application), a qual esta em grande crescimento no mercado.

Fui contratado para desenvolver o software da Domit Medicina, e como trata-se de um software altamente complexo e que necessita rodar através do browser, então não restou outra alternativa a não ser utilizar RIA para construi-lo. Desde então venho me dedicando ao máximo para que o software saia a altura de que meu cliente espera.

Assim que o sistema estiver finalizado postarei aqui mais detalhes sobre o mesmo, enquanto isso vamos gerar um pouco de suspense com a tela de login.

Domit Medicina

Curso de extensão em Adobe Flash

Posted by Andrews on dezembro 5th, 2008

Através de convite por parte de colegas de classe e amigos e após oficializado pelo professor André Weizmann coordenador do curso de Sistemas de Informação da Uniguaçu, realizei do dia 29/09 à 03/10/2008 um curso de extensão em Adobe Flash/Actionscript 2.0. Embora a idéia inicial era apenas mostrar o caminho das pedras para que os alunos pudessem ter idéia de como é trabalhar com a ferramenta, fiquei feliz em ver o desempenho e dedicação dos mesmos, pois em tão pouco tempo (20 horas) conseguiram se adaptar a ferramenta e trabalhar de forma simples com ela.
O que me deixa contente é a possibilidade de disseminar o conhecimento sobre a ferramenta Adobe Flash bastante utilizada nos dias de hoje e que em nossa região existem poucas pessoas qualificadas para tal.
Após o curso tive contato com alguns alunos os quais estão estudando/desenvolvendo com a ferramenta e o melhor, alguns ficaram tão interessados que estão buscando informações sobre desenvolvimento de jogos utilizando Adobe Flash e outros estão iniciando seus estudos em Adobe Flex.
Fiquei muito feliz em poder disseminar o pouco conhecimento que tenho com pessoas que estão buscando uma profissão para seu futuro profissional.
As poucas horas de estudo renderam no último dia de curso um mini site, o qual pode ser visto clicando aqui.

Então, demos um VIVA para o Adobe Flash!

Formatando texto no flash sem complicação

Posted by Andrews on novembro 8th, 2008

Velhos tempos onde se formatar um texto dinâmico no flash era coisa do outro mundo, criava-se stylos, definia-se configurações manualmente, e muitas vezes era um sofrimento acertar a formatação ideal.
Pois bem, acabaram-se os problemas (pelo menos os meus), a classe caurina resolve pra gente, como? através da propriedade especial TextShortcuts.
Crie um campo de texto do tipo Dynamic text e defina o Instance name para texto_txt.
Após ter criado o campo de texto dinâmico, basta apenas inserir algum texto dentro da caixa, digitar o script abaixo e testar para comprovar.

// IMPORT CLASSES: Tweener, TextShortcuts
import caurina.transitions.Tweener;
import caurina.transitions.properties.TextShortcuts;
 
// FUNCTION formatarTexto
formatarTexto = function() {
 
	// INIT TextShortcuts
	TextShortcuts.init();
 
	// DEFINE TEXT SIZE
	Tweener.addTween(texto_txt, {_text_size:25, time:0.5, transition:'linear'});
 
	// DEFINE COLOR
	Tweener.addTween(texto_txt, {_text_color:0x003366, time:1, transition:'linear'});
 
	// DEFINE INDENT
	Tweener.addTween(texto_txt, {_text_indent:100, time:1, transition:'linear'});
 
	// DEFINE LEADING
	Tweener.addTween(texto_txt, {_text_leading:10, time:1, transition:'linear'});
 
	// DEFINE MARGIN LEFT
	Tweener.addTween(texto_txt, {_text_leftMargin:20, time:1, transition:'linear'});
 
	// DEFINE RIGHT MARGIN
	Tweener.addTween(texto_txt, {_text_rightMargin:20, time:1, transition:'linear'});
 
	// DEFINE LETTERSPACING
	Tweener.addTween(texto_txt, {_text_letterSpacing:0.5, time:1, transition:'linear'});
 
}
formatarTexto();

Veja aqui o exemplo em funcionamento.

Mamão com açúcar não? então, um viva para a classe caurina!

Baixando a saturação em movieclips utilizando a classe caurina

Posted by Andrews on outubro 8th, 2008

Uma forma simples e rápida de baixar a saturação em movieclips ou imagens no flash é utilizar a classe caurina.
Bem, caso você ainda não tenha a classe caurina, poderá estar baixando a mesma aqui. Lembre-se que estamos utilizando actionscript 2.0, portanto a classe deverá ser para actionscript 2.0.

Após baixar a classe, descompacte-a e coloque-a dentro do diretório C:\Documents and Settings\nome-de-seu-computador\Configurações locais\Dados de aplicativos\Adobe\Flash CS3\en\Configuration\Classes (neste caso para quem utiliza Adobe Flash CS3). Fazendo desta forma não necessitaremos ter as classes no diretorio de nosso projeto, pois ela já estará visivel ao flash.

Após ter as classes instaladas/configuradas, criaremos o arquivo conforme a imagem abaixo.
Crie 6 (seis) movieclips com cores diferentes, e instancie-os com o seguinte nome, clip1_mc, … clip6_mc.

ColorShortcuts

Após criado e instânciados os movieclips, criaremos então o actionscript responsável por criar o efeito de saturação nos movieclips. Crie uma nova Layer, e digite o código abaixo.

/* IMPORTANDO AS CLASSES CAURINA: Tweener, ColorShortcuts */
import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;
 
/* INICIANDO A CLASSE ColorShortcuts */
ColorShortcuts.init();
 
/* CRIAMOS UM LOOP PARA SETAR A SATURACAO
 * EM TODOS OS CLIPS QUE ESTAO NO PALCO
 */
for (i=1; i&lt;=6; i++) {
 
	/* CLIPS RECEBEM A SATURACAO */
	Tweener.addTween(this['clip'+i+'_mc'],{_saturation:0, time:0.3, transition:"easeOutSine"});
 
	/* EVENTOS ONROLLOVER/ONROLLOUT PARA VISUALIZAR O EFEITO NOS CLIPS  */
	this['clip'+i+'_mc'].onRollOver = function() {
		Tweener.addTween(this, {_saturation:1, time:0.3, transition:"easeOutSine"});
	}
	this['clip'+i+'_mc'].onRollOut = function() {
		Tweener.addTween(this, {_saturation:0, time:0.3, transition:"easeOutSine"});
	}
}

Simples não!
Veja aqui o exemplo em funcionamento

Valeu!

Player em Flash para vídeos diretos do youtube

Posted by Andrews on setembro 3rd, 2008

Um de meus projetos necessitou a criação de um player de vídeos e agora estou compartilhando a idéia, ai tu me diz: ok Andrews, um player é simples de se fazer, só arrastar um componente e configurar a url do vídeo FLV! porém, o desafio era fazer um player com vídeos vindos diretos do YouTube e de forma randômica, que por sua vez a url destes vídeos estariam cadastrados em um banco de dados.

Então mãos a obra e vamos fazer este player, :)

Construindo a tabela para abrigar as url’s. Usaremos o MySQL como base de dados para abrigar estas url’s.

/* CRIANDO A TABELA */
CREATE TABLE `videos` (
          `vid_codigo` int(10) NOT NULL auto_increment,
          `vid_url` varchar(300) default NULL,
          PRIMARY KEY  (`vid_codigo`)
        )
 
/* INSERINDO URL'S DO YOUTUBE */
insert  into
  `videos`(`vid_codigo`, `vid_url`)
values
  (1,'http://br.youtube.com/watch?v=DJZUrTXPIBE'),
  (2,'http://br.youtube.com/watch?v=NfxtAcjYbX0'),
  (3,'http://br.youtube.com/watch?v=TGBZfhLsljY');

Criada a tabela, partiremos agora para o php, onde criaremos uma consulta para buscar as url’s dos vídeos nesta tabela. Também criaremos a função que faz a conversão da url do vídeo do YouTube, para que tenhamos a url final/verdadeira do vídeo FLV. Esta conversão se faz necessária devido a url apresentada quando estamos vendo o vídeo no YouTube não ser a url final/verdadeira do vídeo FLV, então se colocarmos esta url o player que criaremos não conseguirá encontrar o vídeo, caracterizando assim uma url inválida.

Criando a função para conexão com o banco de dados. Após escrever a função, salve-a com o nome de conexao.php.

function conexao() {
    $cnx = mysql_connect('nome-do-servidor', 'nome-do-usuario', 'senha');
    mysql_select_db('nome-da-tabela', $cnx);
    return $cnx;
}

Criaremos então a função para selecionar a url na tabela, e fazer a conversão para a url final/verdadeira do vídeo FLV. Após escrever a função, salve-a com o nome de video_url.php.

/* INCLUINDO O ARQUIVO DE CONEXAO*/
require_once('conexao.php');
 
/* VARIAVEL DE CONEXAO COM O DB */
$cnx = conexao();
 
/* CONSULTA TABELA VIDEOS */
$SQL_video = "SELECT vid_url FROM videos ORDER BY rand() LIMIT 1";
$q_video   = mysql_query($SQL_video, $cnx) or die(mysql_error());
$row_video = mysql_fetch_array($q_video);
 
   /* PASSANDO URL SELECIONADA PARA VARIAVEL */
   $url = $row_video['vid_url'];
 
   // ATIVADA (UPDATE EM 29-01-2009)
   $data = implode("", file($url));
 
   /* FUNCTION CRIADA DEVIDO A MEU SERVER BLOQUEAR A FUNCTION file() ACIMA,
    * ENTAO curl FAZ O SERVICO DO file() E TRAZ A URL EXTERNA.
    *
    * EXPERIMENTE TESTAR EM SEU SERVER A LINHA ACIMA, SE FUNCIONAR
    * PODE REMOVER O BLOCO DE CODIGO ONDE UTILIZA AS curl
    */
 
   // DESATIVADA (UPDATE EM 29-01-2009)
   /*$ch = curl_init();
   curl_setopt ($ch, CURLOPT_URL, $url);
   curl_setopt ($ch, CURLOPT_HEADER, 1);
   curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, 0);
   $data = curl_exec($ch);
   curl_close($ch);*/
 
   if (preg_match_all("/&amp;t=[^&amp;]*/", $data, $matches)) {
      $t = $matches[0][0];
      $t = preg_split("/=/", $t);
      $t = $t[1];
 
      $v = $url;
 
      // DESATIVADA (UPDATE EM 29-01-2009)
      //$v = preg_split("/?v=/", $v);
 
      $v = explode("?v=", $v);
      $v = $v[1];
      echo "&amp;Path=http://www.youtube.com/get_video.php?video_id=".$v . "&amp;t=".$t . "&amp;.flv";
   } else {
      echo "null";
   }
 
mysql_free_result($q_video);

Ja temos a função do php que faz a ponte para trazer as url’s verdadeiras pronta. Agora partiremos para o flash, onde faremos o player para tocar o vídeo.
Crie um novo arquivo no flash, podendo deixá-lo com os tamanhos padrões 550 x 400 pixels.
Agora, renomei a Layer 1 para “player”, arraste um componente “FLVPlayback” para o palco e para o nome de instância digite “my_vid”.

Player para vídeos do YouTube

Agora vamos criar as action que serão responsáveis por fazer a ligação com o arquivo php.
Crie uma nova Layer com o nome de “Action”, clique no Frame 1 e precissione a tecla F9.

Agora iremos escrever o código actionscript a seguir para que nosso player funcione.

// INFORMANDO AO FLASH QUE A COMUNICACAO (ARQUIVO) ESTA EM OUTRO DOMINIO
System.security.allowDomain("*");
var myvar:LoadVars = new LoadVars();
// CARREGANDO O ARQUIVO PHP
myvar.load("video_url.php");
myvar.onLoad = function() {
	// PASSANDO A URL VERDADEIRA DO YOUTUBE PARA O PLAYER
	my_vid.contentPath = myvar.Path + "&t=" + myvar.t + "&.flv";
};

Pronto! agora salve e compile seu arquivo flash, e pode testá-lo em seu servidor.

Veja aqui o player em funcionamento. Clique no botão de refresh para ver os vídeos de forma randômica.

Abraço. Espero que tenham aproveitado.


Feito com Wordpress
Copyright © 2008 Andrews Roberson.