Tutorial: Criando um sistema de Tickers

Atenção: versão mais atual disponível aqui

Montando um sistema de tickers com Flash + XML + PHP + MySQL

(isso mesmo! igual o do ig!)

Olá amigos e amigas! Esse tutorial abranje duas áreas distintas que se interligam pelo XML. A primeira delas será entre o Flash e o XML, a montagem final dos tickers. Depois explicarei como mudar esse XML dinamicamente através do cadastro em BD.

Veja nesse link uma prévia de como ficará o nosso sistema.

Segue agora a primeira parte:

Relacionando o Flash com XML

Esse tutorial é de nível básico-intermediário, pois alguns conceitos de Flash e de programação são exigidos.

Vamos ver agora como ler os dados do xml e transformar as informações em aplicações práticas.

1. Vamos criar o arquivo xml antes de tudo.

<?xml version="1.0" encoding="utf-8"?><tickers> <ticker>	<titulo>Uma vista</titulo>	<area>Montanhas</area>	<texto>Table Mountain and Cape Town</texto>	<foto>foto1.jpg</foto>	<link>[http://www.ponha-o-link-que-quiser.com.br](http://www.ponha-o-link-que-quiser.com.br) </ticker> <ticker>	<titulo>Manobra Radical</titulo>	<area>Esportes</area>	<texto>Inline Skater on Vertical Rise of Ramp</texto>	<foto>foto2.jpg</foto>	<link>[http://www.ponha-o-link-que-quiser.com.br](http://www.ponha-o-link-que-quiser.com.br) </ticker> <ticker>	<titulo>Com grande angular</titulo>	<area>Cidade</area>	<texto>View of Ibiza Town</texto>	<foto>foto3.jpg</foto>	<link>[http://www.ponha-o-link-que-quiser.com.br](http://www.ponha-o-link-que-quiser.com.br) </ticker></tickers>Providenciei um [zip](http://tutoriais.arpix.com.br/tickers/tickers.zip) com o xml e as fotos para ficar mais fácil. 

Reparem na estrutura do arquivo. Ele tem uma tag que cobre todas as outras e tags menores (<ticker>), cada uma com os dados de uma notícia, foto, ou qualquer coisa para que você utilize o sistema.

2. Agora nós vamos preparar a interface no flash. Abra um novo documento e adicione:

• Um botão com setinhas para a esquerda chamado "ant_btn".
• Um botão com setinhas para a direita chamado "prox_btn". Pode ser o outro botão espelhado. Arraste uma cópia dele e vá em Modify > Transform > Flip Horizontal. Recomendo isso porque economiza bytes.
• Um mc grandão que ocupará a área das fotos chamado "area_mc".

Misture bem até que se tenha uma massa homogênea e reserve. /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/tongue.gif&key=8d11c3c7c03c7a5a294e250694d100848a0423dc34ef2af8d774f49d1b969fde" alt="Imagem Postada" /> Dá uma olhada:

/applications/core/interface/imageproxy/imageproxy.php?img=http://tutoriais.arpix.com.br/tickers/screen1.jpg&key=09ffa9b4db7e0e0823f10589d3e105dde6bb161c56127f734fd519874b60694e" alt="Imagem Postada" />

2.1. Crie um quadradinho, que servirá de botão para o menu, e transforme-o num mc de nome de instância "menu". Dentro dele crie uma nova layer e coloque um botão invisível (com conteúdo apenas do frame HIT) do tamanho do quadradinho e chame-o de "botao". Numa layer mais acima coloque um Dynamic Text com o nome "numero_txt". Adicione esse mc que você acabou de criar no layout do flash (não importa o lugar).

/applications/core/interface/imageproxy/imageproxy.php?img=http://tutoriais.arpix.com.br/tickers/screen2.jpg&key=9d41bc8dbe449125bc3caa3720712cad9443c2e0dddad63c15d3c1cf95233deb" alt="Imagem Postada" />

2.2. A última coisa a ser criada agora é o mc da legenda. Desenhe um retângulo da largura das fotos (360 px) e transforme-o num mc chamado "fundo_mc". Agora pegue o fundo_mc e crie outro mc chamando-o de "legenda_mc". Dentro dele crie dois Dynamic Texts chamando-os de "titulo_txt" e "texto_txt". Crie uma camada acima e desenhe um quadrado que ocupará a área do fundo_mc, depois coloque o tipo da layer como Mask. Para ficar mais claro dê uma olhada na screen:

/applications/core/interface/imageproxy/imageproxy.php?img=http://tutoriais.arpix.com.br/tickers/screen3.jpg&key=33a2e77e97e593a3d619ac982b8d44321da1f12636917ffe6d55f8edae889ebe" alt="Imagem Postada" />

Agora posicione o legenda_mc no palco. O resultado final deverá ser esse:

/applications/core/interface/imageproxy/imageproxy.php?img=http://tutoriais.arpix.com.br/tickers/screen4.jpg&key=8e139312d639ae7a4de0b0fd1c3c45d6a209537a921fad11c01a09cb92cfe87c" alt="Imagem Postada" />

Ah! Todos os nomes de instância que eu falei devem ser grafados sem aspas, viu?

3. Enquanto o layout fica fermentando, vamos avançar na parte mais temida: a programação! Vou fazer aos poucos pra irmos entendendo a lógica do código.

3.1. Captando os dados do xml, importando classes e já ajustando os botões vai e volta. Na timeline principal crie uma layer chamada Actions e adicione:

//Importando as classes para fazer os movimentos dinâmicosimport mx.transitions.;import mx.transitions.easing.;//Criando o xml e fazendo ele ignorar espaços em brancovar tickersXML:XML = new XML();tickersXML.ignoreWhite = true;//Quando o xml carregar com sucesso executar as funçõestickersXML.onLoad = function(success:Boolean):Void { //(o xml é carregado na última linha do script) if (success) { //Número total de tickers n_tickers = tickersXML.firstChild.childNodes.length; /O ticker_atual será o último pois ao executar a função de proximoTicker() ele passará automaticamente para o 1º resultado/ ticker_atual = n_tickers; //Acertando as funções dos botões prox_btn.onRelease = function():Void { //Se o fade das fotos tiver terminado if (fotoIn.position == fotoIn.finish) { proximoTicker(); //Programando para chamar o próximo daqui e a cada 5 seg clearInterval(ticker_intervalo); ticker_intervalo = setInterval(proximoTicker, 5000); } }; ant_btn.onRelease = function():Void { if (fotoIn.position == fotoIn.finish) { anteriorTicker(); clearInterval(ticker_intervalo); ticker_intervalo = setInterval(proximoTicker, 5000); } }; /***************************************************** Códigos do passo 3.2 serão adicionados aqui ***************************************************/ //Chamando o primeiro ticker proximoTicker(); //Programando para chamar o próximo a cada 5 seg ticker_intervalo = setInterval(proximoTicker, 5000); } else { //Caso dê errado o carregamento, avise sobeLegenda(); legenda_mc.titulo_txt.text = "Ocorreu um erro"; legenda_mc.texto_txt.text = "Por favor entre em contato com a administração"; }};/*************************************************** Códigos do passo 3.3 em diante serão adicionados aqui*****************************************************///Carregando o XML e dando início ao processotickersXML.load("tickers.xml");Vamos às considerações sobre o AS até agora. Primeiro a gente cria o objeto XML e a função que será executada quando carregar. Nela vem a parte "se tudo der certo" e depois "se acontecer algum erro". Repare que nessa segunda parte existe uma função chamada sobeLegenda() que ainda não criamos, mas já dá pra ter a idéia de o que ela faz, certo?

Depois de carregarmos o XML contamos quantos tickers temos. A idéia é:

tickersXML - todo o documento

firstChild - o primeiro nó do xml (<tickers>) que contém todas as informações

childNodes - uma array que contém todos os nós com as informações (<ticker>)

length - o tamanho da array, ou seja, quantos ticker

Se ficar alguma dúvida faça testes com o trace(), e sempre! Por exemplo: trace(tickersXML.firstChild) Veja a diferença do resultado do trace quando vai se adicionando as palavras-chave.

Vejamos agora a função do prox_btn.onRelease. Ela é inteira dentro de um if, que verifica se o fade das fotos já terminou (para não dar mais de um fade ao mesmo tempo e dar pau). Se tiver terminado (o fade) ele passa para o próximo ticker e programa para que fique passando automaticamente para o próximo de 5 em 5 segundos. A mesma coisa é para o botão ant_btn, porém com a função de voltar um ticker.

Depois de programados os botões, o script chama o primeiro ticker e já vai programando a passagem dos outros.

3.2. Montando o menu para o internauta ir direto para algum dos tickers. Substitua o comentário do código anterior por:

//Criando o menu duplicando o quadradinho existente//Deixando o quadradinho base invisívelmenu._visible = false;//Criando um laço que gerará os botões do menu. Ele executa uma vez para cada ticker.for (var i:Number = 0; i < n_tickers; i++) { //Duplicando o movieclip menu //O depth é i+5 porque até o depth 4 existem mcs ocupando [fotomc1, fotomc2, legenda_mc, area_mc] var menubtn:MovieClip = menu.duplicateMovieClip("menu" + i, i + 5); //Movendo o botão duplicado no eixo x. O '+58' é a margem da esquerda menubtn._x = i 25 + 58; //Número do ticker menubtn.numero = i; //Texto do botãozinho menubtn.numero_txt.text = i + 1; //Quando apertar o botão, mudar para ticker indicado menubtn.botao.onRelease = function():Void { //Se o fade tiver terminado if (fotoIn.position == fotoIn.finish) { vaiParaTicker(this._parent.numero); clearInterval(ticker_intervalo); ticker_intervalo = setInterval(proximoTicker, 5000); } };}Dentro do laço for são criados cópias do botãozinho e são adicionadas as propriedades deles. Primeiro a gente move o botão para onde queremos. Funciona assim: da primeira vez que o for é executado a variavel i vale 0. Então o primeiro botãozinho será colocado na posição x=(0 25 + 58)=58. O segundo será colocado na posição x=(1 * 25 + 58)=83 e assim por diante.

Cada mc recebe uma variável (numero) com o numero do ticker que ele tem que chamar. Recebe também o texto que é colocado no DynamicText. O botão invisível funciona de modo parecido com o prox_btn. A diferença é que usa a função que vai direto para um ticker. Obs: o this._parent.numero pega a variável numero do pai do botão invisível, o mc.

3.3. As funções de avanço e retrocesso. Agora vamos finalmente criar as funções proximoTicker(), anteriorTicker() e vaiParaTicker(numero_ticker). Substitua o comentário do primeiro código por:

//Função que passa para o próximo tickerfunction proximoTicker():Void { //Se o ticker atual não for o último, aumenta em 1, se for ele vai para 0 ticker_atual < n_tickers - 1 ? ticker_atual++ : ticker_atual = 0; //Colocando titulo e texto na legenda legenda_mc.titulo_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[1].firstChild.nodeValue + " > " + tickersXML.firstChild.childNodes[ticker_atual].childNodes[0].firstChild.nodeValue; legenda_mc.texto_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[2].firstChild.nodeValue; //Carregando a foto carregaFoto(tickersXML.firstChild.childNodes[ticker_atual].childNodes[3].firstChild.nodeValue); //Definindo o link para quando clicar na foto area_mc.onRelease = function():Void { getURL(tickersXML.firstChild.childNodes[ticker_atual].childNodes[4].firstChild.nodeValue, "_self"); };}//Função que passa para o ticker anteriorfunction anteriorTicker():Void { //Mesmo esquema da outra função ticker_atual > 0 ? ticker_atual-- : ticker_atual = n_tickers - 1; legenda_mc.titulo_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[1].firstChild.nodeValue + " > " + tickersXML.firstChild.childNodes[ticker_atual].childNodes[0].firstChild.nodeValue; legenda_mc.texto_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[2].firstChild.nodeValue; carregaFoto(tickersXML.firstChild.childNodes[ticker_atual].childNodes[3].firstChild.nodeValue); area_mc.onRelease = function():Void { getURL(tickersXML.firstChild.childNodes[ticker_atual].childNodes[4].firstChild.nodeValue, "_self"); };}//Função que vai direto para um ticker, é o mesmo esquema das outrasfunction vaiParaTicker(numero_ticker:Number):Void { ticker_atual = numero_ticker; legenda_mc.titulo_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[1].firstChild.nodeValue + " > " + tickersXML.firstChild.childNodes[ticker_atual].childNodes[0].firstChild.nodeValue; legenda_mc.texto_txt.text = tickersXML.firstChild.childNodes[ticker_atual].childNodes[2].firstChild.nodeValue; carregaFoto(tickersXML.firstChild.childNodes[ticker_atual].childNodes[3].firstChild.nodeValue); area_mc.onRelease = function():Void { getURL(tickersXML.firstChild.childNodes[ticker_atual].childNodes[4].firstChild.nodeValue, "_self"); };}Vamos entender como funciona a primeira linha do próximoTicker(). Ela é na verdade um if(){}else{} reduzido. Veja ele "desenvolvido":

//Desenvolvidoif(ticker_atual < n_tickers - 1) { ticker_atual++;} else { ticker_atual = 0;}//Reduzidoticker_atual < n_tickers - 1 ? ticker_atual++ : ticker_atual = 0;Isso pode ser visto apenas como um capricho, mas acho interessante mostrar essa outra forma para que reconhecam-na caso vejam em outro código. As demais linhas da função seguem colocando os textos na legenda, o link no onRelease da area_mc e chamando a função de carregar a foto, a próxima que veremos. Para ir esclarecendo as dúvidas em relação ao endereçamento das informações no xml, use e abuse do trace(). Coloque só a primeira palavra-chave e depois vá testando adicionando as demais. Assim ficará mais fácil ter clareza de como o ActionScript trabalha.

As duas outras funções são bem parecidas com a primeira, exeto pela manipulação da variável ticker_atual.

3.4. Carregando as fotos. Essa parte é um pouco complicada, tem que sacar como funciona o esquema de dois movieclips para carregar as fotos e dar os fades. Adicione esse código embaixo do código do passo 3.3.

//Criando os dois movieclips para carregar as fotosthis.createEmptyMovieClip("fotomc1", 2);this.createEmptyMovieClip("fotomc2", 1);//Posicionando os mcs no palcofotomc1._x = fotomc2._x = 20;fotomc1._y = fotomc2._y = 15;//Definindo qual está em cima (por causa dos fades)fotoCima = fotomc1;//Colocando a legenda por cima das fotoslegenda_mc.swapDepths(3);//Função que carrega a foto e cria os fadesfunction carregaFoto(scr:String):Void { //Parando o fade da foto anterior caso ainda esteja ocorrendo fotoIn.stop(); //Criando o mcloader var mclFoto:MovieClipLoader = new MovieClipLoader(); //Carregando a foto mclFoto.loadClip(scr, fotoCima); //Quando terminar de carregar a foto this.onLoadInit = function():Void { //Fazer o fadeIn com a foto de cima fotoIn = new Tween(fotoCima, "_alpha", None.easeNone, 0, 100, 1, true); //Quando terminar a transição de fotos fotoIn.onMotionFinished = function():Void { //Pegar a foto de cima e jogar para trás if (fotoCima == fotomc1) { //Tirando o clip do fotomc2 que irá para frente mclFoto.unloadClip(fotomc2); fotomc1.swapDepths(fotomc2); //Ao ir pra frente estará preparado para receber outra foto fotoCima = fotomc2; } else { //Mesma coisa, caso seja o fotomc2 que estiver em cima mclFoto.unloadClip(fotomc1); fotomc2.swapDepths(fotomc1); fotoCima = fotomc1; } }; }; //Adicionando o listener ao mcloader mclFoto.addListener(this);}Primeiro criamos os mcs nos níveis 1 e 2, e colocamos a legenda por cima deles, no nível 4. Dentro da função nós criamos uma instância do MovieClipLoader. Dê uma lida nesse tutorial do portal iMasters para saber mais. Após isso mandamos o MCL carregar a foto e definimos que quando o carregamento terminar o fade deve ser executado. O fade é feito através da classe Tween, tem um tutorial do Imasters que explica essa classe bem detalhadamente também.

Quando o fade termina nós temos a seguinte situação:

• um movieclip por cima com a foto recém-carregada
• um movieclip por baixo com a foto antiga

Dependendo de qual estiver por cima, nós descarregamos a foto do mc que estiver atrás e trocamos os dois de lugar, assim a gente terá um mc vazio pronto para receber outra foto e dar o fade.

3.5. Finalizando o código com as funções da legenda. Vamos criar agora as funções de sobeLegenda() e desceLegenda(), além de configurar estados padrão e o aparecimento da legenda.

//Fazendo com que a legenda suba quando o mouse estiver em cima da fotoarea_mc.onRollOver = sobeLegenda;area_mc.onRollOut = desceLegenda;area_mc._alpha = 0;area_mc.swapDepths(4);//Função que esconde a legenda com Tweensfunction desceLegenda():Void { var desceTween1:Tween = new Tween(legenda_mc.fundo_mc, "_y", Strong.easeOut, legenda_mc.fundo_mc._y, 36, 1.5, true); var desceTween2:Tween = new Tween(legenda_mc.titulo_txt, "_y", Strong.easeOut, legenda_mc.titulo_txt._y, 36, 1.5, true); var desceTween3:Tween = new Tween(legenda_mc.texto_txt, "_y", Strong.easeOut, legenda_mc.texto_txt._y, 54, 1.5, true);}//Função que mostra a legenda com Tweensfunction sobeLegenda():Void { var sobeTween1:Tween = new Tween(legenda_mc.fundo_mc, "_y", Strong.easeOut, legenda_mc.fundo_mc._y, 0, 1.5, true); var sobeTween2:Tween = new Tween(legenda_mc.titulo_txt, "_y", Strong.easeOut, legenda_mc.titulo_txt._y, 0, 1.5, true); var sobeTween3:Tween = new Tween(legenda_mc.texto_txt, "_y", Strong.easeOut, legenda_mc.texto_txt._y, 18, 1.5, true);}//Abaixando a legenda por padrãolegenda_mc.fundo_mc._y = legenda_mc.titulo_txt._y = 36;legenda_mc.texto_txt._y = 54;Não tem muito segredo aqui. Apenas definimos quando a legenda aparece e como. Estude a classe Tween do Flash que você poderá aperfeiçoar e personalizar tanto o movimento da legenda quanto o aparecimento das fotos. É só trocar os parâmetros na hora de criar o Tween, o resto continua configurado. Prático, não?

Salve seu aquivo e dê um Ctrl+Enter para gerar e swf. Certifique-se de que o swf, as fotos e o xml estejam na mesma pasta. Agora está finalizada a parte de Flash! Pode testar que você verá seu lindo sisteminha já funcionando!

Uma observação sobre algumas medidas no AS. Na função desceLegenda, por exemplo, eu coloquei para o txt descer até o y:36, mas dependendo do seu layout o número com certeza vai mudar. O mesmo vale para o espaçamento dos botõezinhos do menu, o lugar dos mc fotomc1 e fotomc2, e também para o tempo de um ticker para o outro. Eu coloquei 5 segundos apenas para teste, é bem rapidinho. Pra colocar online mesmo é melhor aumentar esse tempo.

Outras observações sobre práticas de organização do AS. Esse pode não ser o exemplo mais (com o perdão da expressão) "webstandard" de Flash. Mas algumas coisas podem ser ressaltadas:

• Colocar sufixos nos nomes de instâncias (_mc, _txt, _btn). Além de facilitar a identificação de o que se trata, o flash lista automaticamente os métodos, eventos e propriedades desse objeto ajudando na hora de escrever seu script.
• Comentar o código. O comentário não serve só pra fazer tutoriais, serve para te orientar caso volte a trabalhar com o projeto e para orientar colegas de trabalho, se você trabalhar em equipes.
• Usar nome coerentes nas funções. Ajudam você a entender o código mais fácilmente (como o sobeLegenda, no começo da explicação do tuto).
• Usar uma variável para o número total no for, exemplo:

//Adequadon_tickers = tickersXML.firstChild.childNodes.length;for (var i:Number = 0; i < n_tickers; i++) {}//Não adequadofor (var i:Number = 0; i < tickersXML.firstChild.childNodes.length; i++) {}Isso aumenta o processamento desnecessariamente.- Usar uma variável para se referir a um mc dinamicamente:

//Recomendadovar menubtn:MovieClip = menu.duplicateMovieClip("menu" + i, i + 5);menubtn._x = i 25 + 58;//Não recomendadomenu.duplicateMovieClip("menu" + i, i + 5);_root["menu"+i]._x = i 25 + 58;Pela mesma razão de carregar o processador desnecessariamente.

Bom galera, espero que tenham curtido essa primeira parte do tutorial e que o aproveitem para muitas coisas, inclusive para criar uma galeria de fotos! Se quiser é só tirar as partes de chamar a função proximoTicker() automaticamente que você terá uma ótima opção para mostrar seu portifólio!

Mas ainda não acabou! Vamos ver agora como gerar o xml por PHP pegando dados do MySQL!

Gerando o XML com PHP e MySQL

Esse tutorial é de nível básico-intermediário, pois alguns conceitos de PHP e de MySQL são exigidos.

Bom galera, vamos começar criando e populando a nossa tabela. Baixe as instruções em SQL para ficar mais fácil.

Depois de ter a tabela configurada, vamos criar o arquivo PHP que gerará o xml:

<? //conectando ao mysql $conn = @mysql_connect("localhost", "SEU LOGIN","SUA SENHA"); $db = @mysql_select_db("SEU BD", $conn); //Selecionando todos os registros da tabela tickers $sql = "SELECT * FROM `tickers` ORDER BY `id` ASC"; //Executando a instrução sql $sql = @mysql_query($sql); //Pegando o numero de registros $rst = mysql_num_rows($sql); //Se tiver algum registro if($rst > 0) { //Abre/cria o arquivo tickers.xml com permissão para escrever	$xml = fopen("tickers.xml", "w");	//Escreve o cabeçalho e o primeiro nó do xml	fwrite($xml, "<?xml version="1.0" encoding="utf-8"?>rn");	fwrite($xml, "<tickers>rn");	//Para cada registro que tiver	for($i=0; $i<$rst; $i++) { //Pegamos o valor de cada registro $titulo = utf8_encode(mysql_result($sql,$i,"titulo")); $area = utf8_encode(mysql_result($sql,$i,"area")); $texto = utf8_encode(mysql_result($sql,$i,"texto")); $foto = utf8_encode(mysql_result($sql,$i,"foto")); $link = utf8_encode(mysql_result($sql,$i,"link")); //Guardamos na variavel $conteudo as tags e os valores do xml $conteudo = "<ticker>rn"; $conteudo .= "<titulo>$titulo</titulo>rn"; $conteudo .= "<area>$area</area>rn"; $conteudo .= "<texto>$texto</texto>rn"; $conteudo .= "<foto>$foto</foto>rn"; $conteudo .= "<link>$link</link>rn"; $conteudo .= "</ticker>rn"; //Escrevendo no tickers.xml fwrite($xml, $conteudo);	}	//Finalizando com a última tag	fwrite($xml, "</tickers>"); //Fechando o arquivo	fclose($xml); }?>Salve como xml.php e teste. Pronto, só isso. Depois você pode criar algum sistema para dar um update do MySQL e logo após chamar esse aquivo php para gerar novamente o XML. Mas não vou explicar isso aqui pois foge do objetivo do ticker em Flash. /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" /> 

Bom pessoal, agora está finalizado o tutorial! :clap:

Espero que tenham gostado e que aproveitem bastante.

Abraço, até a próxima! :graduated:

//Era:	fwrite($xml, "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\r\n");//Agora é:	fwrite($xml, "<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n");