Player de Destaques + XML

Aug 28

Vocês já devem ter visto vários sites onde logo na capa são exibidos destaques, sejam imagens ou filmes em flash, que se alternam, exibindo uma legenda(chamada) e fornecendo um link.

Hoje vou ensinar e disponibilizar o código fonte de um player semelhante a estes:
Disponibilizado também na FlashPédia @ Orkut

Você precisa fazer o download do Flash Player para visualizar este conteúdo.

Características
Lê de um arquivo XML os dados:

Atualizado em maio/2009 (acrescentada a opção de definir o alvo do link)
O Arquivos a ser exibido (pode ser swf, jpg, gif, png)
A Legenda do arquivo (texto, chamada de matéria)
O link de redirecionamento

Classes necessárias:

MovieClipLoader (controla o carregamento)
XML (importa as informações externas)
TweenLite (transição http://blog.greensock.com)(Atualizado)

Pré-Requisitos
Classes TweenLite
http://blog.greensock.com/

O Objetivo:
Criar um player, que carregue destaques (imagens, filmes swf) a partir de uma lista XML e troque os destaques automaticamente, com intervalo de tempo definido, que mostre legenda e ao clicar redirecione para a url desejada e informada previamente no xml.
[Update: Usando agora TweenLite e arquivo simplificado]

Parte 1 – Layout XML

<code language="xml">
<?xml version="1.0" encoding="utf-8"?>
<lista>
  <item>
    <imagem>imagens/slide1.jpg</imagem>
    <legenda><![CDATA[Legenda imagem 1]]></legenda>
    <link>http://www.terra.com.br</link>
    <target>_blank</target>
  </item>
  <item>
    <imagem>imagens/slide2.jpg</imagem>
    <legenda><![CDATA[Legenda imagem 2 <b>Lorem ipsum</b><br>Lorem <a href="#"> ipsum</a> </br></b>]]></legenda>
    <link>http://www.uol.com.br</link>
    <target>_blank</target>
  </item>
  <item>
    <imagem>imagens/slide3.jpg</imagem>
    <legenda><![CDATA[Legenda imagem 3]]></legenda>
    <link>http://www.globo.com</link>
    <target>_blank</target>
  </item>
  <item>
    <imagem>imagens/slide4.jpg</imagem>
    <legenda><![CDATA[Legenda imagem 4]]></legenda>
    <link>http://www.ederlima.com.br</link>
    <target>_blank</target>
  </item>
</lista>

Parte 2 – Flash

Player XML - construção visual

O Alvo
Crie um movieclip de nome “container”, com ancoragem:
0xx
xxx
xxx

Dentro crie um movieclip de nome “target”, com ancoragem:
0xx
xxx
xxx
Ambos em _x:0, _y:0

A legenda
Crie um movieclip de nome “subm”, com ancoragem:

0xx
xxx
xxx
Posicione abaixo do filme.

Dentro crie uma caixa de texto dinâmico, multiline, de nome: “subtitle”

Parte 3 – O Action Script

/*==================================
/Player de Destaques em XML
/
/por Eder Lima (http://www.ederlima.com.br/)
/atualizado em 02/05/2009
/
/FlashPédia (use como quiser)
/*================================*/
 
//importando classes TweenLite
//
//TwenLite é uma Classe absolutamente útil Criada pelo greensock.com
//Você deve obter uma cópia atualizada diretamente no site
//
//http://blog.greensock.com/tweenliteas2
//
import gs.TweenLite;
import gs.easing.Strong;
//
//
 
 
//criando o moviecliploader
var ploader:MovieClipLoader = new MovieClipLoader();
//criando o ouvinte que controla o carregamento
var ol:Object = new Object();
//adicionando o ouvinte ao moviecliploader
ploader.addListener(ol);
 
//lista xml
//variável da quantidade de itens
var nodes:Number;
//criando objeto xml
var xmldata:XML = new XML();
//ignorando espaços em branco
xmldata.ignoreWhite = true;
//criando arrays
//array para imagem
var img:Array = new Array();
//array para legenda
var sub:Array = new Array();
//array para os links
var link:Array = new Array();
//array que recebe os alvos (janelas para abrir o link)
var itemTarget:Array = new Array();
//variável que informa a posição
var pos:Number = 0;
//configurando a caixa de texto da legenda como html
subm.subtitle.html = true;
 
//funções ao carregar o xml
xmldata.onLoad = function(ok) {
	if (ok) {
		//simplificando o caminho xmldata.firstChild para uma única variável
		var xmlNode:XMLNode = xmldata.firstChild;
		//contado a quantidade de itens (retorna 4)
		nodes = xmlNode.childNodes.length;
		//criando uma condição para enquanto ouver itens, ele receber e passar valores
		for (var item:Number = 0; item<nodes; item++) {
			//recebendo valores
			//recebendo o caminho da imagem
			img.push(String(xmlNode.childNodes[item].childNodes[0].childNodes[0].nodeValue));
			//recebendo a legenda
			sub.push(String(xmlNode.childNodes[item].childNodes[1].childNodes[0].nodeValue));
			//recebendo os links
			link.push(String(xmlNode.childNodes[item].childNodes[2].childNodes[0].nodeValue));
			//recebendo os alvos
			itemTarget.push(String(xmlNode.childNodes[item].childNodes[3].childNodes[0].nodeValue));
 
		}
		loadM(0);
	}
};
 
//criando controles do carregamento usando o ouvinte ol (ouvinte do ploader:MovieClipLoader)
//ao inciar
ol.onLoadStart = function() {
	TweenLite.to(loadertext,1,{_y:Stage.height/2, ease:Strong.easeOut});
	loadertext.text = "Aguarde...";
};
//durante o carregamento
ol.onLoadProgress = function(a:MovieClip, l:Number, t:Number) {
	//escrevendo o processo do carregamento no formato Carregando... xx%
	loadertext.text = "Carregando... "+Math.floor(l/t*100)+"%";
};
//ao término do carregamento
ol.onLoadComplete = function() {
	//move o container para o palco
	//executa função autoChange para troca automática
	//dessa forma o intervalo de tempo só conta após o filme carregado
	TweenLite.to(container,1,{_y:0, ease:Strong.easeOut, onComplete:autoChange});
	//move o loader para fora do palco
	TweenLite.to(loadertext,0.5,{_y:-28, ease:Strong.easeOut});
	//troca o texto (invisível quase)
	loadertext.text = "Carregado, exibindo...";
 
 
};
//tratando erro ao carregar
ol.onLoadError = function() {
	//caso aconteça erro, passa uma informação no trace apenas
	trace("não carregou: "+pos);
};
//funções de controle do carregamento e troca
//função de carregamento
function loadM(n:Number) {
	clearInterval(IntervalId);
	//tira o antigo alvo de cena
	TweenLite.to(container,1,{_y:Stage.height, ease:Strong.easeOut, onComplete:go});
	//ao completar o movimento
	function go() {
		//carrega o novo no mesmo alvo (o restante do evento fica no evento onLoadComplete do ploader)
		ploader.loadClip(img[n],container.target);
		//recebendo a legenda
		subm.subtitle.htmlText = String(sub[n]);
	}
}
 
//função de autotroca
//variável que recebe a função setInterval
var intervalId;
function autoChange() {
	clearInterval(intervalId);
	//função setInterval
	intervalId = setInterval(function () {
		//se posição <= a nodes-1 (posição xml = quantidade -1)
		if (pos<nodes-1) {
			//incrementa posição
			pos++;
			//carrega usando função loadM
			loadM(pos);
			//ou então se 
			//posição for >= nodes-1 (posição xml = quantidade -1) 
		} else if (pos>=nodes-1) {
			//volta pra posição 1 (node[0]
			pos = 0;
			//carrega usando função loadM
			loadM(pos);
		}
		//sempre limpa o intervalo de tempo 
		clearInterval(intervalId);
		//intervalo de tempo de 3 segundos
	}, 3000);
}
 
//eventos sobre o alvo
//ao passar o mouse
container.onRollOver = function() {
	//mostra a legenda
	TweenLite.to(subm,0.5,{_y:Stage.height-subm._height, ease:Back.easeOut});
	//ao tirar
	this.onRollOut = function() {
		//esconde a legenda
		TweenLite.to(subm,0.5,{_y:Stage.height, ease:Back.easeOut});
	};
};
//ao clicar
container.onRelease = function() {
	//redireciona para a url armazenada na variável link
	getURL(link[pos], itemTarget[pos]);
};
 
 
//carrega dados xml
var lista_xml:String = "itens.xml";
xmldata.load(lista_xml);

Download do arquivo fonte:

http://www.ederlima.com.br/arquivos/flash/player_xml/player_xml.rar
Observação importante:O Arquivo atualizado é apenas a versão para Flash CS3, pois não consigo salvar para Flash 8, portanto, quem tiver a versão 8, copie o código do post e substitua inteiro no seu arquivo fla, quem tem a versão CS3 basta substituir o arquivo e não esqueçam de substituir o XML.
Enjoy

26 Comentários para “Player de Destaques + XML”

Rafael Lima Disse:
August 28th, 2008 às 10:16 pm
Muito, bom!
Ademar Disse:
August 28th, 2008 às 10:59 pm
muito bom o artigo e a iniciativa de compartilhar conhecimento!!
parabéns Éder, continue assim.
Gilson Vargas Disse:
August 30th, 2008 às 10:24 am
Muito Bom Ederson!!!
Parabéns!
Felipe Prado Disse:
September 9th, 2008 às 9:47 am
Muito bom Eder

só que eu não intendi essa parte da classe..

tpw eu tenho que baixar elas e faze o que depois?

jogo na mesma pasta do meu arquivo fla com o xml e o swf?

me ajuda ai.. por favor..

Obrigado
Eder Lima Disse:
September 10th, 2008 às 2:58 pm
Olá Felipe.
Para baixar a classe vá no site http://blog.greensock.com e baixa a TweenMax AS2.
Depois de baixada, você pode descompactar a classe dentro da sua pasta, fazendo com que a pasta GS fique no mesmo local que o arquivo fla e o xml, mantendo a TweenMax dentro.
O Ideal é usar o ClassPath em edit > preferences > action script > language e adicionar a Pasta TweenMax.

Depois, basta seguir o tutorial, usando o comando import:
import gs.TweenMax
Fábio Disse:
October 6th, 2008 às 10:24 pm
olá, tem que mudar algo no action script? obrigado
Eder Lima Disse:
October 7th, 2008 às 8:15 am
Olá Fábio.

A única alteração necessária são nas duas últimas linhas:

var lista_xml:String = _root.lista;

xmldata.load(lista_xml);

Ali onde está “_root.lista” digita o caminho do seu xml entre aspas, ex: “itens.xml”.

Alterei esse player, fiz uma pequena alteração nele semana passada, baixa novamente o arquivo, está mais simples de usar.

Grande abraço.
Marcos_paiva Disse:
October 10th, 2008 às 7:29 am
Muito bom Eder!!!
Paulo Disse:
October 15th, 2008 às 11:09 am
Parabéns pelo post…. Muito bom mesmo, me ajudou muito aqui… faz tepo que eu tava procurando esse player .
Osíris Disse:
October 21st, 2008 às 6:46 pm
Otimo tutorial,funcionou direitinho.
Mas eu fiquei com uma duvida,existe muita diferença entre usar a class caurina e essa TweenMax?
Ana Disse:
December 11th, 2008 às 11:05 pm
Eder , tem como você ensinar sem complicações a criar um relógio digital ?
Wagner M araujo Disse:
January 23rd, 2009 às 1:03 pm
Eder, gostaria se pudesse me informar um pouco mais sobre o tweenlite, ele suporta o fla8, essas classes sou eu mesmo que crio?
Eder Lima Disse:
February 10th, 2009 às 5:30 pm
Osíris, existe diferença sim.
No site do criador existem comparativos que mostram que a TweenLite e a Max conseguem melhor desempenho quando usadas em larga escala.
Além disso as duas classes possuem mais métodos que aliados a tweengroup, outra classe para agrupar tweens e sequenciar, faz dessa família atualmente a melhor, na minha opinião. Existem outras classes e engines de animação, você pode dar uma procurada e escolher a que melhor se adapta a você.
Jhonattan S. Cruz Disse:
March 11th, 2009 às 2:16 pm
Ae Eder, primeiramente meus parabens pelos tutoriais, tds otimos!

Se puder me tirar uma dúvida,
gostaria de saber como faço pra manipular a imagem que é carregada no “target”. Gostaria de redimensiona-la dinamicamente, depois que é carregada, para que sua largura fique sempre do tamanho da janela do browser por exemplo.
desde ja agradeço..

grande abraço!
Hellington Disse:
March 20th, 2009 às 2:17 pm
criei ele mais, não consigo inserir no meu site.. como faço isso??

h.e.l.l.i.n.g.t.o.n@live.com
Eder Lima Disse:
March 20th, 2009 às 6:32 pm
Hellington, dê uma pesquisada no google por “inserir swf usando swfobject”.
Obrigado.
Marcelo Disse:
May 2nd, 2009 às 2:30 pm
Olá, gostei do seu tutorial por ser bastante simples. Tenho uma dúvida, como eu faço para que um dos links abra em nova janela?

Agradeço se você responder.
Eder Lima Disse:
May 2nd, 2009 às 2:38 pm
Olá Marcelo, obrigado pelo comentário.
Pergunta interessante a sua, é bastante simples a solução.
Só precisamos de mais uma linha no xml e mais um array, vou atualizar o post.
Kleber Disse:
May 18th, 2009 às 11:00 am
Estou tentando alterar o código usando o Flash CS4, porém quando vou iniciar o SWF nada acontece, a tela fica preta. Para o CS4, existe alguma alteração à fazer?
kleber.lehpamer@uol.com.br
Eder Lima Disse:
May 18th, 2009 às 1:37 pm
Provavelmente você não baixou a Classe TweenLite, que eu utilizo para fazer as transições.

Vá até http://blog.greensock.com e baixe a classe, tem mais informações no próprio post sobre como proceder para utilizar.
Kleber Disse:
May 20th, 2009 às 12:51 pm
Eu baixei a classe, coloquei o arquivo na FLA na mesma pasta, mas não roda… a tela fica preta somente. Fucei no código todo e não consegui encontrar nada que fizesse funcionar esse script. Alguém o utiliza com com o CS4?
Kleber Disse:
May 20th, 2009 às 1:00 pm
Os erros apresentados são esses:
http://img507.imageshack.us/img507/9535/erro.gif

Observe que dei um print também na pasta das classes.

Se puder dar uma verificada, agradeço.

Abraços!
Eder Lima Disse:
May 20th, 2009 às 2:02 pm
Kleber.
Olha a falta de atenção.
O Player é em escrito em Action Script 2, observa que você está utilizando o documento como AS3.
Olha na própria imagem que você mandou, do lado direito em ‘PUBLISH’, que o documento está configurando como AS3, é claro que não vai funcionar.

A virtual machine que roda o as3 não dá suporte a usar código as2.
Altera o perfil para as2, que aliás, é o perfil que está no documento.

Você deve ter modificado o perfil para as3 quando alterando as opções de publicação.
Kleber Disse:
May 26th, 2009 às 6:04 pm
Amigo, funcionou.
Modifiquei o AS3 para AS2. O que houve também foi que eu havia baixado o Tweenlite p/ AS3.
Obrigado!
Pablo Disse:
January 12th, 2010 às 4:28 pm
Ola, muito bom mesmo! so que tento editar a cor do fundo pra branco, para combinar com a pagina do meu site, so que quando vou salva como swf, apos salvo como swf fica tudo branco e não mostra nada..
A pergunta e!
algume consegue trocar a cor do fundo do swf?
Bruno Disse:
March 15th, 2010 às 9:50 am
to com uma duvida! eu não to com o flash aqui e outra eu sou meio leigo na programação e em todo caso axo que vc deveria enviar para a gente pronto com a pasta gs que vc fala! bom dai ai o meu pedido…

Deixe um comentário

Comentários recentes

Pedro Ivo Jovelli: Obrigado pela ajuda com o tutorial !!! Abs!...
Eder Lima: Olá Uriel. Cara, estranho, eu consigo entrar diretamente. V...
Uriel: Eder, porque quando tento acessar o endereço diretamente: h...
Stenio: Fala eder, bem interessante o tutorial. Tentei converter iss...
Rafael Iron: Desconsidera. burrice minha.. Ja consegui.. Valeu, pode apag...