Olá amigos e amigas! Para quem não me conhece, sou um dos moderadores do Fórum de Flash do iMasters e é com imenso prazer que publico meu primeiro artigo aqui no portal. Vamos lá!
Esse artigo 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 artigo é de nível 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. Criando o arquivo xml antes de tudo.
CODE
<?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</link>
</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</link>
</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</link>
</ticker>
</tickers> Providenciei um .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. Dê uma olhada:
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 abaixo coloque um Dynamic Text com o nome “numero_txt”. Adicione esse mc que você acabou de criar no layout do flash.
2.2. Desenhe um retângulo da largura das fotos (360 px no caso) e transforme-o num mc chamado “legenda_mc”. Agora entre no legenda_mc e crie uma layer. Nela, crie dois Dynamic Texts chamando-os de “titulo_txt” e “texto_txt”. Lembre-se de ativar os caracteres que for usar em Emded. Para ficar mais claro dê uma olhada na screen:
Agora posicione o legenda_mc no palco.
2.3. Por último, crie uma camada acima da legenda e desenhe um quadrado que ocupará a área do legenda_mc, depois transforme esse quadrado num movieclip chamando-o de “mascara_mc”. Coloque o tipo da layer como Mask. Adicione também uma layer acima de todas as outras, chamada Actions. O resultado final deverá ser esse:
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, na layer Actions, adicione:
CODE
//Importando as classes para fazer os movimentos dinâmicos
import mx.transitions.*;
import mx.transitions.easing.*;
//Criando o xml e fazendo ele ignorar espaços em branco
var tickersXML:XML = new XML();
tickersXML.ignoreWhite = true;
//Quando o xml carregar com sucesso executar as funções
tickersXML.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) {
//Vai para o próximo ticker
proximoTicker();
}
};
ant_btn.onRelease = function():Void {
if (fotoIn.position == fotoIn.finish) {
anteriorTicker();
}
};
//Chamando o primeiro ticker
proximoTicker();
/*******************************************************
Códigos do passo 3.2 serão adicionados aqui
*******************************************************/
} 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 processo
tickersXML.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 temos
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. É muito importante que você compreenda o que cada comando faz ao ler o XML.
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. 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.
3.2. Montando o menu para o internauta ir direto para algum dos tickers. Substitua o comentário do código anterior por:
CODE
//Criando o menu duplicando o quadradinho existente
//Deixando o quadradinho base invisível
menu._visible = false;
//Pegando a posição inicial _x do menu
var menu_x = menu._x;
//Definindo a distância entre os botões
var menu_dist = 25;
//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.
menubtn._x = i * menu_dist + menu_x;
//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);
}
};
} 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 (supondo que menu_x seja 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 número 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, ou seja, o mc menu.
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:
CODE
//Função que passa para o próximo ticker
function 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;
insereDados(ticker_atual);
//Limpando o intervalo de troca de tickers
clearInterval(ticker_intervalo);
}
//Função que passa para o ticker anterior
function anteriorTicker():Void {
//Mesmo esquema da outra função
ticker_atual > 0 ? ticker_atual-- : ticker_atual = n_tickers - 1;
insereDados(ticker_atual);
}
//Função que vai direto para um ticker, é o mesmo esquema das outras
function vaiParaTicker(numero_ticker:Number):Void {
ticker_atual = numero_ticker;
insereDados(ticker_atual);
}
//Função que insere os dados vindo do XML no nosso sitema
function insereDados(ticker_atual:Number):Void {
//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");
};
} Vamos entender como funciona a primeira linha do próximoTicker(). Ela é na verdade um if(){}else{} reduzido. Veja ele “desenvolvido”:
CODE
//Desenvolvido
if(ticker_atual < n_tickers - 1) {
ticker_atual++;
} else {
ticker_atual = 0;
}
//Reduzido
ticker_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-a 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.
Uma observação em relação a primeira função: o clearInterval é para limpar o intervalo que foi criado na função de adicionar a foto no palco. Isso garante que só depois que a foto foi carregada é que o sistema começa a contar o tempo para carregar a próxima foto.
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.
CODE
//Criando os dois movieclips para carregar as fotos
this.createEmptyMovieClip("fotomc1", 2);
this.createEmptyMovieClip("fotomc2", 1);
//Posicionando os mcs no palco
fotomc1._x = fotomc2._x = area_mc._x;
fotomc1._y = fotomc2._y = area_mc._y;
//Definindo qual está em cima (por causa dos fades)
fotoCima = fotomc1;
//Colocando a legenda por cima das fotos
legenda_mc.swapDepths(3);
//Função que carrega a foto e cria os fades
function 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 {
//Chamar o próximo ticker
clearInterval(ticker_intervalo);
ticker_intervalo = setInterval(proximoTicker, 5000);
//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);
} Inicialmente 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 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 que explica essa classe bem detalhadamente também.
Quando terminar o carregamento da foto, repare que chamamos a função proximoTicker depois de um intervalo de 5 segundos (5000 milisegundos). Esse número pode ser trocado sem problemas.
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.
CODE
//Fazendo com que a legenda suba quando o mouse estiver em cima da foto
area_mc.onRollOver = sobeLegenda;
area_mc.onRollOut = desceLegenda;
area_mc._alpha = 0;
area_mc.swapDepths(4);
//Pegando as posições da legenda
var leg_aparece = legenda_mc._y;
var leg_esconde = legenda_mc._y + legenda_mc._height + 1;
//Função que esconde a legenda com Tweens
function desceLegenda():Void {
var desceTween:Tween = new Tween(legenda_mc, "_y", Strong.easeOut, legenda_mc._y, leg_esconde, 1.5, true);
}
//Função que mostra a legenda com Tweens
function sobeLegenda():Void {
var sobeTween:Tween = new Tween(legenda_mc, "_y", Strong.easeOut, legenda_mc._y, leg_aparece, 1.5, true);
}
//Abaixando a legenda por padrão
legenda_mc._y = leg_esconde;
//Configurando a máscara da legenda
legenda_mc.setMask(mascara_mc); 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!
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 nomes 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:
CODE
//Adequado
n_tickers = tickersXML.firstChild.childNodes.length;
for (var i:Number = 0; i < n_tickers; i++) {}
//Não adequado
for (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:
CODE
//Recomendado
var menubtn:MovieClip = menu.duplicateMovieClip("menu" + i, i + 5);
menubtn._x = i * 25 + 58;
//Não recomendado
menu.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 a parte de chamar a função proximoTicker() automaticamente que você terá uma ótima opção para mostrar seu portifolio!
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:
CODE
<?
//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\"?>\r\n");
fwrite($xml, "<tickers>\r\n");
//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>\r\n";
$conteudo .= "<titulo>$titulo</titulo>\r\n";
$conteudo .= "<area>$area</area>\r\n";
$conteudo .= "<texto>$texto</texto>\r\n";
$conteudo .= "<foto>$foto</foto>\r\n";
$conteudo .= "<link>$link</link>\r\n";
$conteudo .= "</ticker>\r\n";
//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 (lembre-se que a pasta precisa de permissão para gravação). 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 escopo desse artigo.
Bom pessoal, agora está finalizado o artigo! Espero que tenham gostado e que aproveitem bastante.
Abraço, até a próxima!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?