Criando uma galeria de fotos dinâmica com Flash, PHP, Mysql e Xml
Por um tempo procurei material parecido, para atender um cliente. Não achei nada dinâmico, apenas conversas entre flash e xml, estáticas.
Então neste artigo, vou abordar o uso do xml, utilizando php e banco de dados mysql, para gerar uma galeria de fotos dinâmica em flash. Não vou falar aqui, do visual da sua galeria. Isso quem decide é você. Vou falar dobre o action script que entende, abre e lê o xml, cujo mesmo é gerado pelo php, que realiza as consultas no mysql. Parece complicado? Mas não é!
O primeiro passo é obter o arquivo .fla de exemplo. Você pode fazer isso, clicando aqui: http://www.flaviajobs.com.br/sistemas/revistaphp/galflash/galeria1.fla
Entre as actions de animação ao mostrar a fotografia, layers de nome do site, etc, vamos direto ao ponto principal, a action do XML. No simbolo "tudo", na layer1, você vai encontrar do que vamos tratar agora.
// criando o objeto XML
var meuXML:XML = new XML();
// ignorando os espaços em branco
meuXML.ignoreWhite = true;
// carregando o XML
meuXML.onLoad = function():Void{
// variável que retorna a altura de todos os thumbs juntos, para calcular a barra de rolagem
altura = (thumb._height*meuXML.childNodes[0].childNodes.length+meuXML.childNodes[0].childNodes.length*2);
// criando um loop for
for(i=0;i<meuXML.childNodes[0].childNodes.length;i++){
// duplicando o movieclip thumb, para cada registro encontrado
duplicateMovieClip("thumb","thumb"+i,i+1);
thumbs = _root.tudo_mc["thumb"+i];
// posição de cada thumb
thumbs._y += (thumb._height+2)*i;
// criando uma instância da classe MovieClipLoader
var MCL1:MovieClipLoader = new MovieClipLoader();
// carregando um arquivo no objeto MCL1, de acordo com o primeiro nó do XML, o nó filho atual (i) do atributo thumb, movieclip alvo: thumbs.mostra
MCL1.loadClip(meuXML.childNodes[0].childNodes[i].attributes.thumb,thumbs.mostra);
thumbs.onEnterFrame = function():Void{
// variável que checa o progresso do objeto MCL1
progresso1 = MCL1.getProgress(this.mostra);
// texto do campo pct_thumb: bytes carregados / bytes totais * 100 + o sinal de porcentagem
this.pct_thumb.text = Math.ceil(progresso1.bytesLoaded / progresso1.bytesTotal * 100) + "%";
// se os bytes carregados forem iguais ao bytes totais, deixa o campo de texto invisível, se não, ele continua visível
progresso1.bytesLoaded == progresso1.bytesTotal ? this.pct_thumb._visible = false : this.pct_thumb._visible = true;
}
// variável de referência, que indica o nó atual
thumbs.atual = i;
// texto do campo de texto "campo"
thumbs.campo.text = i+1;
// retirando a mãozinha do mouse
thumbs.btn.useHandCursor = false;
// quando clicar no movieclip
thumbs.btn.onRelease = function():Void{
// outra instância da classe MovieClipLoader
var MCL2:MovieClipLoader = new MovieClipLoader();
// carregando o arquivo
MCL2.loadClip(meuXML.childNodes[0].childNodes[this._parent.atual].attributes.grande,_root.mc);
// mesma lógica do MCL1
this.onEnterFrame = function():Void{
progresso2 = MCL2.getProgress(_root.mc);
_root.pct.text = Math.round(progresso2.bytesLoaded/progresso2.bytesTotal*100) + "%";
progresso2.bytesLoaded == progresso2.bytesTotal ? _root.pct._visible = false : _root.pct._visible = true;
}
// definindo o texto do campo de texto descrição, de acordo com o nó atual do atributo desc
_root.descricao.text = meuXML.childNodes[0].childNodes[this._parent.atual].attributes.desc;
}
// ao passar o mouse
thumbs.btn.onRollOver = function():Void{
// pequena mudança de contraste
_root.tudo_mc["thumb"+this._parent.atual].mostra.contrastTo(50,1);
}
// ao tirar o mouse
thumbs.btn.onRollOut = function():Void{
// voltando ao normal
_root.tudo_mc["thumb"+this._parent.atual].mostra.contrastTo(100,1);
}
}
// criando as ações para a barra de rolagem
_root.rolagem.drag.onPress = function():Void{
var xmin = this._x;
var xmax = this._x;
var ymin = 0;
var ymax = this._parent.fundo._height - this._height;
this.startDrag(false, xmin, ymin, xmax, ymax);
this.onRelease = this.onReleaseOutside = function():Void{
stopDrag();
delete this.onMouseMove();
}
this.onEnterFrame = function():Void{
_root.tudo_mc._y += (-Math.round((this._y / ymax) * (altura - _root.rolagem._height)) - _root.tudo_mc._y)/3;
}
}
}
// carregando o arquivo XML externo, gerado através de php e mysql
meuXML.load("galeria1.xml");
Não tem muito o que inventar nesta parte. Você está executando ações básicas para dar um loop nas imagens encontradas no xml, exibindo, etc. Vamos falar sobre a geração do xml, através do PHP.
Note que no último trecho do código acima, temos:
meuXML.load("galeria1.xml");
É sobre a geração deste XML que vou falar agora.
Então o segundo passo, é ter uma tabela de onde puxar as informações das fotos. Imagens, Thumbnails, Titulos das fotos.
Veja o exemplo da minha tabela "galfotos" :
CREATE TABLE `galfotos` (
Onde:
"nomefoto" = nomedafoto.jpg
"thumbfoto" = thumb_dafoto.jpg
"titulofoto" = Titulo dado à imagem
Inclua alguns registros nesta tabela, como abaixo:
INSERT INTO `galfotos` ( `idfoto` , `nomefoto` , `thumbfoto` , `titulofoto` )
VALUES (
Baseado nisso, crie um arquivo chamado "pegafotos", com a extensão .php, para começarmos a trazer desta tabela do banco de dados, os resultados que serão gravados no XML, e que consequentemente, serão lidos pelo flash.
pegafotos.php :
<?php require_once('../../../Connections/testes.php'); // conexão padrão do Dreamweaver, que qualquer um sabe fazer ?>
<?php
mysql_select_db($database_testes, $testes);
// fazendo um select
$query_fotos = "SELECT * FROM galfotos ORDER BY idfoto ASC";
$fotos = mysql_query($query_fotos, $testes) or die(mysql_error());
$row_fotos = mysql_fetch_assoc($fotos);
$totalRows_fotos = mysql_num_rows($fotos);
$fotogrande = $row_fotos['nomefoto'];
$thumbfoto = $row_fotos['thumbfoto'];
$descfoto = $row_fotos['titulofoto'];
?>