A abordagem será uma galeria de fotos com arquivos que serão modificados usando formato XML. Poderão ser criadas novas pastas, nomes , e tipos de figuras automaticamente, apenas com uma simples alteração no documento XML.

Primeiramente você irá inserir uma ProgressBar (barra de progresso) que estará no Menu Windows -> Components. Assim aparecerá uma janela com diversos componentes e você irá arrastar a ProgressBar para a tela:

Clique na ProgressBar e dê o nome de: my_pb

Segundo passo

Você deve criar uma tela de loader (será a tela em que as imagens irão aparecer e nela você poderá definir o tamanho de exibição de imagens, arquivos swf, etc...)

Você deverá inserir um Loader (será a tela que será loadado os arquivos) que estará no Menu Windows > Components. Desta forma, aparecerá uma janela com diversos componentes e você irá arrastar o Loader para a tela:

Clique no Loader e dê o nome de: my_pb

Terceiro passo

Você deverá inserir um Tree (será a tela onde aparecerão os arquivos), que estará no menu Windows > Components. Assim aparecerá uma janela com diversos componentes e você irá arrastar o Tree para a tela:

Clique no Loader e dê o nome de: my_tree

Quarto passo

Insira essa ação na primeira frame layer 01:

// definição das variaveis
var my_pb:mx.controls.ProgressBar;
var my_ldr:mx.controls.Loader;
var my_tree:mx.controls.Tree;

// progressBar - barra de progresso no qual vimos acima e aqui ela vai adiquirir uma ação que é a de

//mostrar o estatus da exibição da Imagem

// Loader - area onde a figura irá aparecer

// tree - onde serão listados os arquivos do xml para que quando

//o usuário clicar neles eles sejam exibidos

my_pb._visible = false;
my_pb.indeterminate = true;
my_pb.setSize(160, 30);
my_pb.source = my_ldr;
my_pb.mode = "polled";
var pbListener:Object = new Object();
pbListener.complete = function(evt:Object) {
evt.target._visible = false;
};
my_pb.addEventListener("complete", pbListener);

// abertura do arquivo XML

var treeDP_xml:XML = new XML();
treeDP_xml.ignoreWhite = true;
treeDP_xml.onLoad = function(success:Boolean) {
if (success) {
my_tree.dataProvider = this.firstChild;
}
};

// Lista os objetos do arquivo XML

treeDP_xml.load("gallery_tree.xml");
var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
var treeNode:XMLNode = evt.target.selectedItem;
if (treeNode.attributes.src != undefined) {
my_pb._visible = true;
my_ldr.load(treeNode.attributes.src);
}
};
my_tree.addEventListener("change", treeListener);

// Fim da linha de codigo

Quinto passo

Inserir uma ação na segunda layer frame 01:

stop();

Sexto passo

Crie um documento XML chamado gallery_tree.xml. O conteudo dele será inicialmente de:

<?xml version="1.0" ?>
- <tree>
- <node label="Gallery SOM">

<node label="Hino Nacional" src="som nacional.swf" />

<node label="Som 02" src="som 01.swf" />

<node label="Som 03" src="DCP_0732.jpg" />

<node label="Som 04" src="DCP_0733.jpg" />

<node label="Som 05" src="DCP_0734.jpg" />

</node>

</tree>

Abaixo a visualização do socumento XML:

// abertura da arvore

// node fechamento do arquivo

<tree>

// Nome da Galeria que vc estará criando :

<node label="Gallery SOM">

// node label = nome do arquivo que o usuario irá visualizar

// src = será a localização do arquivo que aparecerá na tela quando o usuario clicar no nome , sendo que podem

//ser imagens, animações , arquivos .swf etc..

<node label="Hino Nacional" src="som nacional.swf" />

Obs: Você deverá inserir os arquivos no xml, o nome das pastas e a localização da mesma como no arquivo XML abaixo:

<node label="Som 03" src="DCP_0732.jpg" />

Download dos fontes deste artigo aqui.

Em breve vou postar alguns jogos como quebra-cabeça, solicitados pelos leitores, e algumas interações para usarmos na criação de sites, ok!

Agradeço a atenção de vocês e, qualquer coisa, estou disponível no e-mail. Vocês também podem postar comentários no próprio site!

Um abraço a todos!

Até Breve!

Fonte: Imasters
Por: F. Henrique