Flash e XML- Conteúdo em XML - Importando Dado.

Conteúdo em XML(Extensible Markup Language) - Importando Dado.

Olá pessoal.

Atendendo algumas sugestões sobre tutoriais em Flash, hoje vamos falar um pouco sobre como trabalhar com conteúdo em XML, importando os dados.

Abra um novo arquivo no Flash, com formato 400 x 400px e 18fps.

1- Crie dois layers chamado de AS e Interface

2- Em interface desenhe o seu palco.

3- Ainda em interface, crie um MovieClip que será o nosso menu.
Nele insira a sua imagem.

4- Duplique-os mais duas vezes, troque as fotos pelas desejadas e de novos nomes a cada um e ainda atribua o Linkage.

5- Atribuído o linkage, delete do palco.

Exemplo de nosso menu construído

6- Antes de escrever o XML, pegue as três imagens que usamos no menu e exportem na pasta img, no formato 180 x 148px;

7-Agora o Dreamweaver ou o Bloco de notas, pois agora vamos escrever o nosso XML.

XML:

Chamada da Primeira Imagem

Aqui inserimos o primeiro texto referente a primeira imagem

img1_gde.jpg

Chamada da Segunda Imagem

Aqui inserimos o segundo texto referente a segunda imagem

img2_gde.jpg

Chamada da Terceira Imagem

Aqui inserimos o terceiro texto referente a terceira imagem

img3_gde.jpg

Neste caso teremos 3 chamadas, três conteúdos de texto e três imagens.

A funcionalidade que darei na programação em Flash aqui é quando executar o filme randomizar a notícia e quando clicar no menu imagem carregar a notícia referente aquele botão.

Veja como está a nossa interface no Flash:

Action Script:

//Importar Classes

import mx.transitions.Tween;

import mx.transitions.easing.*;

//Atribui os MC ao palco - imagem pequena - depth de 1 a 3 //

_root.attachMovie("bt1","bt1_mc",1,{_x:83,_y:93});

_root.attachMovie("bt2","bt2_mc",2,{_x:200,_y:93});

_root.attachMovie("bt3","bt3_mc",3,{_x:320,_y:93});

/////////////////////////////////////////////////////////////////////////////////

//Criando os MC vazios para as imagem maiores - depth de 4 //

_root.createEmptyMovieClip("img_gde",4);

with(img_gde){

_x = 200;

_y = 232;

}

////////////////////////////////////////////////////////////////////////////////

//Conectando ao XML

//Criar o objeto

var xmlNoticias:XML = new XML();

//Carregar o arquivo

xmlNoticias.load("menu_xml.xml");

//Ignorar espaços em branco

xmlNoticias.ignoreWhite = true;

//Verificar carregamento do arquivo

xmlNoticias.onLoad = function ()

{ //Begin xmlNoticias

//Obter a quantidade de notícias

qtdNoticias = this.firstChild.childNodes.length

//Randomizar indice

indice = random(qtdNoticias)

//Exibir a primeira noticia

navega( indice )

}//End xmlNoticias

///////// Função para controle da navegação //////////

function navega (indice)

{

//Titulo da noticia

chamada.text = xmlNoticias.firstChild.childNodes[indice].childNodes[0].childNodes[0].nodeValue

//Texto da noticia

texto.text =xmlNoticias.firstChild.childNodes[indice].childNodes[1].childNodes[0].nodeValue

//Foto da noticia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[indice].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

///////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//Atribuindo função de botões no menu

bt1_mc.onRelease = function()

{

//Se a posição for maior que o máximo de noticias

chamada.text = xmlNoticias.firstChild.childNodes[0].childNodes[0].childNodes[0].nodeValue

//Texto da notícia

texto.text =xmlNoticias.firstChild.childNodes[0].childNodes[1].childNodes[0].nodeValue

//Foto da notícia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[0].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

bt2_mc.onRelease = function()

{

//Se a posição for maior que o máximo de noticias

chamada.text = xmlNoticias.firstChild.childNodes[1].childNodes[0].childNodes[0].nodeValue

//Texto da noticia

texto.text =xmlNoticias.firstChild.childNodes[1].childNodes[1].childNodes[0].nodeValue

//Foto da noticia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[1].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

bt3_mc.onRelease = function()

{

//Se a posição for maior que o máximo de noticias

chamada.text = xmlNoticias.firstChild.childNodes[2].childNodes[0].childNodes[0].nodeValue

//Texto da noticia

texto.text =xmlNoticias.firstChild.childNodes[2].childNodes[1].childNodes[0].nodeValue

//Foto da noticia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[2].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

Arquivos Gerados:

menu_xml.swf
menu_xml.xml
pasta img(com fotos grandes)

> clique aqui para visualizar o arquivo final

Espero que tenham gostado.

Dúvidas e sugestões é só falar.

Abraços.

Felipe Borges

Site:www.eduborgs.blogspot.com
Email:eduborgs@gmail.com