Interligando Banco de Dados SQL com FLASH via XML

Uma coisa que ao meu ver da trabalho é vincular seu site em flash com algum banco de dados SQL, mas analisando até que é bem viável fazer isso, não é?

Foi por isso que resolvi dar um help ai para todos que acompanham meu blog e ensinar um jeito super legal de interagir qualquer tipo de Banco de dados utilizando FLASH + XML + ASP ou PHP

Até então eu pensava em utilizar algo como loadVars para tentar produzir o efeito desejado mas eu vi que o sistema do XML padroniza meu projeto e facilita pois eu posso capturar as variáveis através dos nós e não ter que puxar varias variaveis impressas no ASP via Response.Write nem no PHP via echo

O fato é que eu irei fazer com que o ASP ou PHP gerem um XML se baseando no Banco de Dados e o Flash o importe, isso facilita muito o processo além de torna-lo leve e dinâmico


Neste exemplo iremos criar uma Galeria


Começando

Antes de mais nada criem um Banco de Dados, no meu caso criei um utilizando MySQL para ser compativel com ASP e PHP, criem um banco de dados com uma tabela fotos com os campos titulo, detalhes e imagem

então criem o arquivo que irá retornar os dados deste banco de dados
 

ASP

<%
'Aqui nós criamos um objeto ADODB para se conectar ao nosso banco de dados
Set con = Server.CreateObject("ADODB.connection")
'abrimos o banco utilizando o servidor de acesso, nome do banco, login e senha
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=nome_do_banco;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
'função que irá codificar os textos para torna-los compatíveis com a codificação UTF8
Function Encode_UTF8(astr)

Encode_UTF8 = Server.HTMLEncode(astr)

End Function
%>
<%
'criamos um RecordSet para conectar a tabela fotos que já deve estar pronta lá no banco de dados
set fotos = server.CreateObject("ADODB.recordset")
' abrimos o recordset
fotos.open "SELECT * FROM fotos ORDER BY cod DESC",con
'configuramos o metodo response para torna-lo compativel com o texto XML
Response.ContentType="text/xml"
'iniciamos o processo imprimindo na tela a tag XML
response.Write "<?xml version='1.0' encoding='UTF-8'?>"+chr(10)

'abrimos a chave fotos
response.Write "<fotos>"+chr(10)

'criamos um loop para preencher com as ultimas 5 fotos, no caso serve para um sistema de noticias
for i=1 to 5
'verificamos se o banco de dados não está vazio
if not videos.eof and not videos.bof then
'inserimos a primeira foto
response.Write "<foto>"+chr(10)
'titulo da foto
response.Write "<tit>"
response.Write Encode_UTF8(fotos("titulo"))
response.Write "</tit>"+chr(10)
'link da foto
response.Write "<imagem>"
response.Write Encode_UTF8(fotos("imagem"))
response.Write"</imagem>"+chr(10)
'descrição da foto
response.Write "<texto>"
response.Write Encode_UTF8(fotos("detalhes"))
response.Write "</texto>"+chr(10)
response.Write "</foto>"+chr(10)
'fechamos e avançamos ao proximo
fotos.movenext()
end if
next
'encerra o XML
response.Write "</fotos>"
%>

salvem como fotos.asp e executem para ver como fica

Agora vem a parte do flash, confiram


Neste exemplo nós variamos utilizando no flash um componente muito legal chamado Loader ao inves do Movie Clip, isso facilita um pouco, porém no internet explorer a imagem não se auto ajusta e é necessário cortar a foto antes de coloca-la no Banco de Dados.

antes de começar criem um movie clip estanciado como vid1 e lá dentro um outro movie clip como ft e dentro desse movie clip um Loader (pode ser encontrado na janela components) estanciado como  cx e neste mesmo movieclipe e lá pelo 5º frame desse movie clipe coloque

cx.contentPath = foto

e logo no primeiro frame do Flash coloque

Flash AS2

cont=2;

System.useCodepage = true;
var MeuXML:XML = new XML();
// Ignoramos todas as quebras de linhas e espaços entre os nós para não atrapalhar na interpretação do XML.
MeuXML.ignoreWhite = true;

// Este método será executado ao fim do carregamento dos dados ou em caso de erro.
MeuXML.onLoad = function($sucesso){
if($sucesso){

//carrega no primeiro movie clip (o já pronto) a foto e os textos
_root.vid1.ft.foto = MeuXML.firstChild.childNodes[0].childNodes[1].childNodes[0].nodeValue
_root.vid1.tit.text = MeuXML.firstChild.childNodes[0].childNodes[0].childNodes[0].nodeValue
_root.vid1.texto.text = MeuXML.firstChild.childNodes[0].childNodes[2].childNodes[0].nodeValue





//cria um loop para duplicar o vid1 e carregar as demais fotos nos novos movie clips
for(i=1;i<6;i++) {
  _root. vid1.duplicateMovieClip("vid"+cont,cont);
    _root["vid"+cont].ft.foto = MeuXML.firstChild.childNodes[i].childNodes[1].childNodes[0].nodeValue
    _root["vid"+cont].tit.text = MeuXML.firstChild.childNodes[i].childNodes[0].childNodes[0].nodeValue
    _root["vid"+cont].texto.text = MeuXML.firstChild.childNodes[i].childNodes[2].childNodes[0].nodeValue
    _root["vid"+cont]._x = (880*i)
    cont++
}
}else{ // Em caso de erro
trace($sucesso);
trace("Ocorreu algum erro ao carregar os dados.");
}
}

// Carregar dados do XML.
MeuXML.load("fotos.asp");

Aqui está tudo pronto falta apenas certo acabamento, criar um slide de fotos etc.

Mas aqui eu disponibilizo o modelo pronto e completo para facilitar a vida da galera, porem o sistema que eu disponibilizo trata-se de videos, na verdade é a mesma coisa o que muda são os nomes dos campos. Copiem modifiquem e divulguem, só não esqueçam das fontes.

DOWNLOAD

Até a próxima