Conheça também: Onmasters . Ofertas . Divulgue! . Vai.la . Geraboleto . Baixa.la . Assista.la . Bloghost

Avaliação: | Publicado em: 04/04/2007

Galeria de fotos com Flash, PHP e XML

Flavia Jobstraibizer é analista programadora, atuando há 6 anos no desenvolvimento de soluções online. Trabalha com Delphi, PHP, Mysql, PostgreSql, Sql Server, XML, Ajax, etc. Atualmente é Gerente de TI em uma empresa de tecnologia em São Paulo - SP.

Por um tempo procurei material parecido, para atender um cliente. Não achei nada dinâmico, apenas conversas entre flash e xml, estáticas. Como o flash deste artigo, cujo mesmo encontrei na net e mantenho os créditos.
O que fiz então neste artigo, é 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 sobre 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:

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` (`idfoto` INT( 5 ) NOT NULL AUTO_INCREMENT, `nomefoto` VARCHAR( 255 ) NOT NULL ,
`thumbfoto` VARCHAR( 255 ) NOT NULL , `titulofoto` VARCHAR( 255 ) NOT NULL ) ENGINE = MYISAM ;

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 ('', 'img3.jpg', 'thumb3.jpg', 'Tomatinho sendo cortado', ), ( '', 'img2.jpg', 'thumb2.jpg', 'Festa do morango');

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. ?>
<?php
mysql_select_db($database_testes, $testes);
$query_fotos = "SELECT * FROM galfotos";
$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'];
?>
<?
// gravando o documento XML e encapsulando o resultado na variável $xml
$xml = "<?xml version="1.0" encoding="iso-8859-1" ?> ";

// abrindo o nó principal
$xml .= "<fotos>";

// abrindo o while com os dados das fotos, isso delimita cada bloco de informações de fotos com seus respectivos dados(subnós) dentro deste nó

do {

// subnós de informações - nome da foto, thumbnail da foto, título de apresentação da foto
$xml .="<foto grande="$fotogrande" thumb="$thumbfoto" desc="$descfoto" />";

// fechando o while dos dados
} while ($row_fotos = mysql_fetch_assoc($fotos));

// fechando o nó principal
$xml .="</fotos>";

$fp = @fopen('galeria1.xml','w');
if(!$fp) {
die('Não foi possivel abrir o XML');
}
$write = fwrite($fp,$xml);
if(!$write) {
die('Não foi possivel gravar os dados no XML');
}else {
echo "Dados gravados com sucesso no XML galeria1.xml";
fclose($fp);
}

mysql_free_result($fotos);
?>

Agora que você gerou um xml com o conteúdo presente no banco de dados, você pode abrir o swf gerado (à partir do .fla que você baixou no início) e ver que todas as imagens presentes no XML, estão sendo mostradas no seu swf flash!
Clique aqui para ver o exemplo em funcionamento no meu site.

Se tiver dúvidas, escreva pra mim através do formulário de contato do meu site: www.flaviajobs.com.br
E não esqueça de mencionar o nome do artigo aqui do Plugmasters.
:)

• galeria1.fla

• "Clique aqui para ativar e usar este controle"

• http://www.flaviajobs.com.br/sistemas/revistaphp/galflash/