ZECA BALA (45 pts)

FLASHGURU (155 pts)

RODRIGO AMARAL (56 pts)

BÁRBARA TOSTES (64 pts)

GUILHERME SCHEIBE (49 pts)

NILTON BICALHO (61 pts)

AUTOR DESCONHECIDO (100 pts)

ALEXANDRE PORTO (1281 pts)

MUZAK (45 pts)

PANDOGO (82 pts)

JOÃO NETO (78 pts)

RICARDO FIGUEIRA (33 pts)
Treinamento PontoFlash de Flash e ActionScript

Tem como eu implementar a navegação de um filme do Flash pelos botões do browser?

Como deslocar um filme para um frame diferente dependendo de uma resposta?

Como concatenar um link javascript num Get Url sem dar problemas com as aspas?

Porque no meu campo de hora aparece 1,2, 3 etc e não 01, 02, 03?

Queria fazer uma ação no rollOuver, mas sem aparecer a mãozinha no mouse.

Alguém pode me dizer se há como inserir um som midi numa apresentação flash?

Criação de classes no Actionscript 2.

Gostaria de saber como criar um botão voltar e avançar? Como usar âncoras no Flash?

Problemas com redimensionamento e ponto de registro.

Tem como passar uma variável de uma função javascript para o Flash 5?

Tem como abrir um PDF (acrobat reader) entro do Flash? Pode ser com Delphi?

Como abrir uma janela pop-up tamanho fullscreen?

Qual é o melhor formato para importação de sons no Flash?

Quero fazer um box de notícias, em que os textos seriam puxados de um arquivo .txt, e que essas notícias ficariam passando no box.
Bolhas flutuantes.

Limitar por IP? Porque não utilizar o Shared Object do Flash?

Adicionar ao favoritos

Abrir PopUp no Flash com JS e ASP.

Níveis dentro do Flash - Load Movie e Load Variables (primeira parte)

Exibir páginas em html com o componente TextArea do FlashMX2004

Objeto Array

Tratamento de imagens e alguns efeitos no Fireworks

Aprendendo a interagir Flash e ASP

Time Delay

Rayoflight.

Atenuação (easing).
Lightball

Radio button 1

Menu XML

Text lights 2

Random blocks

Time left preloader

On Off Button

Calculando horas

Open background

Menu folder

Magnetismo

Efeito Matrix
HOME | TUTORIAIS
Aplicativo Dirigido por Dados com XML
por Leandro Amano

Conhecimentos: Este artigo pede um conhecimento básico de ActionScript, mas é necessário ter uma familiaridade com o Flash. Como por exemplo, já saber o uso adequado de instâncias. Não é necessário saber nada sobre XML.

A linguagem XML tem sido frequentemente utilizada por desenvolvedores como método de resposta do servidor. Mas o que é XML? Para que serve? Comentei que não precisamos saber XML para desenvolver esse tutorial, mas recomendo que leiam sobre isso mais a fundo, inclusive sobre DTD e XSLT.

Bom, XML é uma meta linguagem estruturada, que possui padrões que facilitam o desenvolvimento e o entendimento por diversas linguagens. Com um único arquivo podemos gerar várias saídas para várias linguagens, por exemplo, num editor de texto (recomendo o Dreamweaver 8, está muito bom para desenvolvimento XML, XHTML estrito e DTD), digito:

<agenda>
<pessoa nome="Leandro" sobrenome="Amano" email="amano@leandroamano.com.br">Deselvolvedor Macromedia ENG.... blablablabla</pessoa>
<pessoa nome="Tiago" sobrenome="Venegas" email="tiago@site.com.br">Deselvolvedor Macromedia, ENG, Vorttice.... blablablabla</pessoa>
<pessoa nome="Neto" sobrenome="Leal" email="neto@site.com.br">Deselvolvedor Macromedia IMedia.... blablablabla</pessoa>
<pessoa nome="Juliano" sobrenome="Polito" email="polito@site.com.br">Deselvolvedor Macromedia ENG.... blablablabla</pessoa>
</agenda>

Como observamos acima, não temos tags obrigatórias a seguir. Devido a sua estrutura de árvore, vamos chamar essas tags de nós. O único padrão que tivemos de seguir foi que ao iniciar devemos possuir um nó inicial no caso <agenda>. Dentro desse "pai" temos quatro "filhos", cada um com seu nó de nome pessoa, os quais também fechamos ao terminar de atribuir uma descrição para a pessoa.

Nesse exemplo nosso primeiro nó, agenda, pode ser acessado por firstChild, seu nome seria acessado por nodeName. Então firstChild.nodeName nos retorna agenda.

Com este único documento podemos gerar várias saídas, como por exemplo para um dispositível móvel, PDF, documentos Adobe como In Design. Essa meta linguagem é muito boa para compreensão também como entrada de dados, mas neste módulo não vamos falar sobre isso.

Há muitas formas do servidor responder a uma requisição e a maioria delas pode ser utilizada com aplicações Flash. Depende apenas da maneira como os dados de resposta são trabalhados pelo desenvolvedor Flash.

Vamos parar com o XML por aqui.

A partir dessas informações vamos testar algumas coisas no Flash. Não esquecendo que o XML deve vir de uma requisição http do servidor através de um ASP, PHP, ColdFusion, JSP, etc.
Salve o texto acima como xmlBasico.xml, defina a codificação Encoding: UTF-8, isso nos permitirá ler todos os acentos no Flash.

No Flash Document em branco:

Salvem o arquivo na mesma pasta do XML.

Farei todas as actions no frame 1 chamado AS, mas nada nos impede de fazer os textos dinâmicos desenhando-os. No layer AS, chamamos a janela de actions (F9) e nela colocamos o seguinte:

var leitor:XML = new XML();
leitor.load("
xmlBasico.xml");
leitor.onLoad = leia;
leitor.ignoreWhite = true;

Vamos entender as Actions, na primeira linha estou dizendo que leitor será um objeto XML.
Esse objeto XML irá ler o arquivo xmlBasico.xml.

Ao ler nosso objeto não faz nada, por isso inclui a ação onLoad, que diz que ao carregar o xml chamará a função leia.

Na quarta linha estamos dizendo que vamos ignorar os espaços em branco.... mas como assim ignorar espaços em branco? Sim, isso mesmo, devido ao Flash ler o XML a risca, cada tabulação ou quebra de linha é considerado como caractere de espaço, por isso vamos ignorá-los.

Abaixo deles vamos criar alguns textos. Vocês podem criar os textos no palco mesmo. Devem ser dinâmicos e conter os nomes nas instâncias e não na variável. Vou criar tudo dinamicamente mas não explicarei isso. Tentarei também criar do jeito mais simples possível, sem loop e sem duplicate.

var nome:TextField = _root.createTextField("texto", _root.getNextHighestDepth(), 20, 20, 0, 0);
var email:TextField = _root.createTextField("texto", _root.getNextHighestDepth(), 20, 40, 0, 0);
var descricao:TextField = _root.createTextField("texto", _root.getNextHighestDepth(), 20, 60, 0, 0);
nome.autoSize = true;
email.autoSize = true;
descricao.autoSize = true;

Estamos agora com três instâncias no palco, nome, email e descricao. Com esse código autoSize, qualquer texto ali inserido será automaticamente redimencionado.
Agora por último, mas não menos importante, vamos criar nossa função leia(), que é quem trará os códigos do XML para o Flash.

function leia():Void {
   ponteiro = leitor.firstChild.firstChild;
   nome.text = ponteiro.attributes.nome+" "+ponteiro.attributes.sobrenome;
   email.text = ponteiro.attributes.email;
   descricao.text = ponteiro.firstChild;
}

Bom, dentro da função criei um apontador para o caminho firstChild que pega o primeiro nó e mais um firstChild para pegar o segundo nó, onó dos dados da agenda. Nosso apontador funciona como um atalho e não como um apontador propriamente dito em outras linguagens de programação.

Na terceira linha, a instancia nome chamará um texto, por isso o .text que virá do nosso ponteiro mais o atributo nome. Após isso concatenamos com um simples espaço para separar nome do atributo sobrenome.

Na quarta linha, chamamos o atributo email e na quinta linha chamamos mais um filho, que é onde o texto da descrição se encontra. Com certeza poderíamos colocar como um atributo também, mas geralmente a descrição é um texto longo, onde ficaria difícil de entender a estrutura dos nós.

Para teste, aplique dentro da função leia, esses comandos:

trace(leitor.firstChild.nodeName); // traz o nome do primeiro nó, no cado agenda
trace(leitor.firstChild.childNodes.length); // traz o número de nós filhos de agenda, no caso 4

Uma última dica para acessar sua "irmãs" é com o nextSibling, em nossa estrutura. Para acessar os dados do Tiago Venegas, utilizamos firstChild.firstChild.nextSibling.
O código final fica assim:

var leitor:XML = new XML();
leitor.load("agenda.xml");
leitor.onLoad = leia;
leitor.ignoreWhite = true;
var nome:TextField = _root.createTextField("texto", _root.getNextHighestDepth(), 20, 20, 0, 0);
var email:TextField = _root.createTextField("texto", _root.getNextHighestDepth(), 20, 40, 0, 0);
var descricao:TextField = _root.createTextField("texto", _root.getNextHighestDepth(), 20, 60, 0, 0);
nome.autoSize = true;
email.autoSize = true;
descricao.autoSize = true;
function leia():Void {
   trace(leitor.firstChild.nodeName);
   trace(leitor.firstChild.childNodes.length);
   ponteiro = leitor.firstChild.firstChild;
   nome.text = ponteiro.attributes.nome+" "+ponteiro.attributes.sobrenome;
   email.text = ponteiro.attributes.email;
   descricao.text = ponteiro.firstChild;
   ponteiro2 = leitor.firstChild.firstChild.nextSibling;
   nome2.text = ponteiro2.attributes.nome+" "+ponteiro2.attributes.sobrenome;
   email2.text = ponteiro2.attributes.email;
   descricao2.text = ponteiro2.firstChild;
}

Nosso exemplo acaba por aqui. Cabe a você agora chamar os outros dois nomes ou mesmo alterar os nós e dados contidos neles.
Baixe aqui os rquivos desse tutorial.

A linguagem XML da pra ser aplicada em vários exemplos, desde websites a aplicativos ricos. Fiz um teste recente no meu próprio site http://www.leandroamano.com.br/. É um comboBox preenchido com XML para download de alguns arquivos. Caso não achem, procurem internamente no site, o arquivo estará lá (e meu blog estará pronto... =D).

Grande abraço e até a próxima!



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
1 comentário


Comentário de Márcio Giacomini
| 6/5/2010 - 20:37 |
http://www.marciogiacomini.com.br

Leandro muito bom sua explicação, porém estou tendo um problema numa variação desta ideia. No seu tutorial colocamos cada informação da agenda em um "texto dinâmico" especifico para ela. (ex. nome no text dinamico nome; e-mail no text dinamico email e assim por diante). O que estou tentando e sem sucesso e colocar no caso todas estas informações (nome e email) dentro de um unico texto dinâmico, seria possível? Se puderes colabora com sua opnião fico grato!






Visite o perfil de LEANDRO AMANO no portal PontoFlash

Atualmente é designer, Macromedia User Group Leader, sócio da Amano & Venegas, instrutor Macromedia na ENG DTP & Multimídia em São Paulo - SP e instrutor de Pós Graduação de Engenharia de WebSites na Unicsul - SP. Site pessoal www.leandroamano.com.br