Painel de slides de destaque
1º Passo - Preparando o layout
Bom nada de difícil até aqui, criaremos um .fla novo, com as seguintes configurações:
Bom, o esquema das camadas também é interessante, duas apenas, actions e mcSlide
Depois podemos desenhar o primeiro MovieClip, instanciado e nomeado como mcAlvo:
O mcAlvo deve ser do tamanho de nossas fotos de preferência, ele vai ficar dentro do mcSlide ao final.
Agora desenharemos o mcInfo, responsável por exibir as informações textuais de cada slide. Dentro dele desenharemos dois TextFields, tTitulo e tDesc (instancias):
Por fim, colocaremos nossos MovieClips já feitos, dentro de nosso conteiner, no caso um mc novo, chamado e instanciado como mcSlide(no palco):
Para melhor compreensão recomendo baixar os arquivos no final do tutorial 
2º Passo - A classe Slide
Como de praxe, criei uma classe, devidamente comentada, para o controle das operações e também já praticarmos um pouco de OOP.
Classe Slide (Slide.as):
class Slide extends MovieClip {
//declaração das vars de nossa classe…
public var mcAlvo:MovieClip;
public var mcAlvo1:MovieClip;
public var mcAlvo2:MovieClip;
public var mcInfo:MovieClip;
//variáveis estáticas, na minha opnião, são mais fáceis
//de trabalhar em operações de tempo e assincronicidade…
public static var FIRST_SLIDE:Boolean = true;
public static var INIT_TIME:Date;
public static var LAST_TIME:Date;
public static var DATA:Array = new Array();
public static var INDEX_DATA:Number = 0;
public static var MCL_IMG:MovieClipLoader = new MovieClipLoader();
public static var SHOW_NEXT:Boolean = false;
public static var MC_ALVO:MovieClip;
public static var TIMER:Number;
public static var UPDATE_TIME:Number = 5;
//function Main, que é chamada na criação de nosso mc de slides…
function Slide(){
//setamos ao nosso MovieClipLoader comum, aonde estará seus eventos…
Slide.MCL_IMG.addListener(Slide);
//aqui criamos, apartir do mcAlvo desenhado no mc, os dois extras
//que usaremos para o carregamento dos slides. Com swapDepths, já os
//enviamos para trás do mc que conterá as informações…
(mcAlvo1 = mcAlvo.duplicateMovieClip(”mcAlvo1″, 1)).swapDepths(mcInfo);
(mcAlvo2 = mcAlvo.duplicateMovieClip(”mcAlvo2″, 2)).swapDepths(mcInfo);
Slide.MC_ALVO = mcAlvo1;
//aqui iniciamos o verificador de Timer para transição de slides
//o timer e responsavel, pela verificação de mc carregado e se já deu o
//tempo para exibirmos o próximo slide. A classe Delegate, é muito util
//para eventos e intervals, dado que podemos trabalhar facilmente com
//escopos (se não entenderam fica pra outra ….
Slide.TIMER = setInterval(mx.utils.Delegate.create(this, this.nextSlide), 10);
mcAlvo._visible = false;
}
public static function set dataProvider(data:Array):Void
{
//funçao simples, método set, usamos para definir nosso provider de dados…
Slide.DATA = data;
if(Slide.DATA.length > 0){
//data definida, se tiver algum slide no array, já começa a operação do primeiro slide…
//define em que slide estamos atualmente, o tempo que inicia para o timer, e também declara o tempo final
//para então iniciar, com MovieClipLoader, o carregamento dos slides…
Slide.INDEX_DATA = 0;
Slide.INIT_TIME = new Date();
Slide.MCL_IMG.loadClip(Slide.DATA[Slide.INDEX_DATA].src, Slide.MC_ALVO);
Slide.LAST_TIME = new Date();
}
}
public static function onLoadStart(mcAlvo:MovieClip):Void
{
//no início do carregamento do próximo slide, definimos que ainda não pode ser exibida a próxima imagem…
Slide.SHOW_NEXT = false;
}
public static function onLoadProgress(mcAlvo:MovieClip, bL:Number, bT:Number):Void
{
//caso necessite do evento de progresso no carregamento…
}
public static function onLoadComplete(mcAlvo:MovieClip):Void
{
//caso necessite do evento de carregamento completo…
}
public static function onLoadInit(mcAlvo:MovieClip):Void
{
//com o carregamento completo, e imagem já exibida no movieclip,
//podemos liberar a exibição, a função nextSlide, cuidará do timer…
Slide.SHOW_NEXT = true;
mcAlvo._parent.nextSlide();
}
public function nextSlide():Void
{
//fazendo as verificações se podemos passar para o próximo slide,
//primeiro se esta liberado o carregamento, depois se já deu o tempo de exibição…
if(Slide.SHOW_NEXT
&& (Slide.FIRST_SLIDE == true || (Slide.LAST_TIME - Slide.INIT_TIME) > (UPDATE_TIME * 1000))){
//existe uma exceção de ser o primeiro slide, pois não precisa esperar
//o timer, então logo após o primeiro, declaramos a var como false, para
//para que as próximas corram normalmente…
Slide.FIRST_SLIDE = false;
//esses objetos DATE são para a diff de time entre os slides…
Slide.INIT_TIME = new Date();
Slide.LAST_TIME = new Date();
//
//como podem notar, ocorre um revesamento entre dois mcs, para que exista um
//sempre um slide carregando no background. Abaixo ocorre o revesamento dos dois.
//É também nessa parte que podes implementar algum efeito de transição, fica a gosto…
Slide.MC_ALVO.swapDepths((Slide.MC_ALVO == mcAlvo1 ? mcAlvo2 : mcAlvo1));
//preenchendo as informações e setando o link…
mcInfo.tTitulo.text = Slide.DATA[Slide.INDEX_DATA].title;
mcInfo.tDesc.text = Slide.DATA[Slide.INDEX_DATA].desc;
Slide.MC_ALVO.link = Slide.DATA[Slide.INDEX_DATA].href;
Slide.MC_ALVO.onRelease = function():Void
{
getURL(this.link);
}
//
//bom abaixo, podemos ver que ocorre o coordenamento dos slides,
//em qual mc vai ser carregado a próxima foto, e em que slide estamos
//atualmente. Quando a esse index do slide, quando chegar ao último //logicamente, com o if, voltamos ao primeiro…
Slide.MC_ALVO = Slide.MC_ALVO == mcAlvo1 ? mcAlvo2 : mcAlvo1;
if(Slide.INDEX_DATA+1 >= Slide.DATA.length) {
Slide.INDEX_DATA = 0;
} else {
Slide.INDEX_DATA++;
}
//
//por fim carregamento o slide…
Slide.MCL_IMG.loadClip(Slide.DATA[INDEX_DATA].src, Slide.MC_ALVO);
} else {
//esse else é executado, quando a foto ainda não foi carregada
//ou quando ainda não teu o tempo de transição, ou as duas opções
//juntas 
Reparem que sempre atualizamos o objeto date para verificação
//de tempo…
Slide.LAST_TIME = new Date();
}
}
}
A Classe também será disponibilizada no final do artigo.
3º Passo - Voltemos ao Flash
De volta ao flash, na camada actions colocaremos o nosso código para carregar o XML, com o esquema de nosso slide:
//em nosso fla, a princípio fica apenas o código para carregarmos o XML com os dados…
var xmlDados:XML = new XML();
xmlDados.ignoreWhite = true;
//nada de novo, carregamento de XML externo normal…
xmlDados.onLoad = function(sucesso:Boolean):Void
{
if(sucesso){
var tempData:Array = new Array();
//listando nodes, transformando-as em objeto, e armazenando
//no nosso array de dados, esse aí acima …
var f:XMLNode = this.firstChild.childNodes[0];
do {
var tempObj:Object = {
src: f.attributes.src,
href: f.attributes.href,
title: f.attributes.title,
desc: f.childNodes[0].nodeValue
}
tempData.push(tempObj);
delete tempObj;
} while(f = f.nextSibling);
//
//agora sim, enviamos os dados a nossa Classe Controladora dos slides…
Slide.dataProvider = tempData;
}
}
xmlDados.load(”slides.xml”);
Agora nosso último passo no flash, que é definir ao mcSlide, sua classe.
Clique com o botão direito sobre o mcSlide na biblioteca(library), e vá em linkage, para configurar conforme abaixo:
4º Passo - XML
E para finalizar, nossa estrutura de XML, com os nosso dados para o painel, salve como slides.xml:
<?xml version=”1.0″ encoding=”UTF-8″?>
<slides>
<slide src=”fotos/foto1.jpg” mce_src=”fotos/foto1.jpg” href=”link1.htm” mce_href=”link1.htm” title=”Teste 1″><![CDATA[Slide um]]></slide>
<slide src=”fotos/foto2.jpg” mce_src=”fotos/foto2.jpg” href=”link2.htm” mce_href=”link2.htm” title=”Teste 2″><![CDATA[Slide dois]]></slide>
<slide src=”fotos/foto3.jpg” mce_src=”fotos/foto3.jpg” href=”link3.htm” mce_href=”link3.htm” title=”Teste 3″><![CDATA[Slide três]]></slide>
</slides>
Explicando o XML:
Cada nó (linha), é um slide nosso, o atributo src é a localização da imagem, href é o link do destaque, title é o título do mesmo e o conteudo do nó é a nossa chamada.
Nosso painel está pronto, agora é só testar!
Fonte:
