 |
Lucas Ferreira (contato@lucasferreira.com) Lucas Ferreira é webdeveloper, atuante na área de web desde 2001. Com experiência em diversas linguagens, dentre as principais PHP, JS, AS, XHTML, HTML e CSS. Atualmente é sócio-diretor e desenvolvedor-chefe da Burn web.studio. |
Newsticker em Flash - Painel de Slides de destaque
Buenos,
Desenvolveremos hoje, uma painel muito usado em portais de informação e entretenimento, aquele que fica revesando os destaques e novidades.
Lembrando que, para que o mesmo funcione será necessário Flash 8(mx 2004 também rola). Também é interessante ter um nível intermediário de conhecimento da ferramenta.
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 :D 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 :D ...
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" href="link1.htm" title="Teste 1"><![CDATA[Slide um]]></slide>
<slide src="fotos/foto2.jpg" href="link2.htm" title="Teste 2"><![CDATA[Slide dois]]></slide>
<slide src="fotos/foto3.jpg" 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!
Clique aqui para baixar os arquivos de exemplo deste tutorial.
Até a próxima e abracetas... ;)