mural de recados feito flash

Olá pessoal...
Respondendo o que algumas pessoas me pediram via MP e aqui no fórum também, vou fazer um GUIA, e não um tutorial de como fazer eu fiz o mural de recados do site da Muky.

Eu não posso fazer um tutorial no momento porque não disponho de tempo para fazer isto de imediato, então este vai ser um GUIA para vocês terem noção de como foi feito e de como vocês podem aplicar.

ALGUMAS CONSIDERAÇÕES:
Fazer este mural de recados com conteúdo dinâmico não é tão simples, também não é complexo. Mas requer um pouco de conhecimento avançado em Flash.

Você vai precisar saber como:
- Ler um arquivo XML, e trazer seu conteúdo para dentro de um Array (maior facilidade)
- Saber como fazer uma rolagem no Flash. No meu caso eu fiz minha própria classe p/ Rolagens em flash, visto que não gosto dos componentes do Flash. É um tanto quanto complicado fazer a rolagem, e requer alguns calculos matemáticos

PROBLEMAS:
Quando eu fiz esse mural eu pretendia fazer ele todo em OOP. Ou seja, todo orientado a objetos, seria muito mais fácil e simples para utiliza-lo novamente. Mas o tempo de desenvolvimento do site foi ficando curto e não tive tempo de melhorar esse código, e olha que dá pra melhorar MUITO isso ai.

Por exemplo, cada vez que o usuário clica em um botão pra mudar a página, ele apaga tudo que tá na tela (mensagens) e depois preenche tudo devolta, inclusive criando os botões de paginação, o que é totalmente desnecessário. Mas como disse, fiquei sem muito tempo para continuar e deixar isto programado melhor. Ele poderia ter sido feito sem comer tanto processamento ao trocar de página e tudo mais... Não é algo que eu me orgulhe muito de ter feito MAS, paciência

Outra hora vou voltar e fazer ele do jeito que me agrada de verdade.

O DESAFIO
O desafio é... fazer um mural de recados em flash com conteúdo dinâmico e com paginação.

É um pouco complicado. Para ler o XML eu usei uma classe em AS2 que eu mesmo fiz para facilitar, bem como citei anteriormente, também utilizei uma classe para a rolagem, onde eu só passo os movieclips das flechas e da rolagem e ele já cria tudo automático o quanto ele deve rolar baseado no tamanho do conteúdo atual, inclusive utilizando o scroll do mouse e o efeito de suavização no movimento.

Mas quanto a essa leitura do XML e a rolagem eu vou abstrair esta parte deste GUIA, visto que não é o foco do desafio/problema, deixo com vocês esta parte.

Começando...

ActionScript

var xml:Array = new Array();

O que precisa ser feito no primeiro frame, é ler um arquivo XML com os dados do mural, como mensagem, nome de quem enviou, para quem é a mensagem e a data em que foi enviada.

Existem vários tutoriais e posts no fórum de como ler e manipular XML no flash que podem ajudar vocês, mas fica aqui minha dica:

ActionScript

var xml_file:readXML = new readXML("mural.xml");
var xml_file:readXML = new readXML("mural.php?cache=" + getTimer());

Foi assim que eu fiz no site que citei anteriormente. Criei uma classe em AS2, em que você passa o arquivo XML para ler. A classe lê, interpreta o XML e depois você utiliza uma função de dentro da classe que retorna este Array montado certinho pra você.

Um outro detalhe é no PHP ali. Se você fizer, e provavelmente vai fazer o mural dinâmico utilizando PHP ou ASP para imprimir o xml para o Flash, então coloque o "?cache=" + getTimer()", pois desta forma você evita que os usuários vejam versões desatualisadas do XML, no caso, problemas de cache com o arquivo...

Bom, seguindo adiante, eu fiz o meu XML da seguinte forma...

CODE

- <mural>
- <recado>
<id>289</id>
<de>mamae</de>
<para>papai</para>
<mensagem>tchau tchau tchau</mensagem>
<data>06/07/2006 às 18:55</data>
</recado>
- <recado>
<id>289</id>
<de>papai</de>
<para>mamae</para>
<mensagem>oi oi oi oi</mensagem>
<data>06/07/2006 às 14:55</data>
</recado>
- <recado>
<id>289</id>
<de>xxxx</de>
<para>yyyy</para>
<mensagem>a aha ha hah a</mensagem>
<data>16/11/2007 às 14:55</data>
</recado>
- </mural>

O Array "xml" onde eu guardo as informações deste XML é um array multidimensional. Imaginando que esse ali em cima fosse todo nosso XML do mural, no array final ficaria assim:

// Primeira mensagem
xml[0][0] -> Guarda o <id> da primeira mensagem
xml[0][1] -> Guarda o <de> da primeira mensagem
xml[0][2] -> Guarda o <para> da primeira mensagem
xml[0][3] -> Guarda o <mensagem> da primeira mensagem
xml[0][4] -> Guarda o <data> da primeira mensagem
// Segunda mensagem
xml[1][0] -> Guarda o <id> da segunda mensagem
xml[1][1] -> Guarda o <de> da segunda mensagem
xml[1][2] -> Guarda o <para> da segunda mensagem
xml[1][3] -> Guarda o <mensagem> da segunda mensagem
xml[1][4] -> Guarda o <data> da segunda mensagem
// Terceira mensagem
xml[2][0] -> Guarda o <id> da terceira mensagem
xml[2][1] -> Guarda o <de> da terceira mensagem
xml[2][2] -> Guarda o <para> da terceira mensagem
xml[2][3] -> Guarda o <mensagem> da terceira mensagem
xml[2][4] -> Guarda o <data> da terceira mensagem

E assim por diante... você tem que ler o XML e montar o array multidimensional, onde você tem [X][Y] no array.
[X] é qual a mensagem você quer ler
[Y] você pega as informações do conteúdo desta mensagem

Após o arquivo XML ter sido carregado por completo e você ter criado o Array, aqui é onde a "coisa" acontece!!!

ActionScript

var pagina_atual:Number = 1;

atualizaPagina();

Aqui temos uma váriavel para a página atual, "pagina_atual", e setamos ela para 1, visto que é mais intuitivo começar pela página 1 do que pela página 0 como é comum ver em programação e chamamos a função "atualizaPagina()", que é a função que sempre é executada quando a pessoa clica em um botão de paginação no final, se existir quantidade suficiente para existir paginação.

ActionScript

function atualizaPagina() 
{
      	var i:Number;
      	var coluna:Number = 0; //controla a coluna atual dos movieclips
      	var linha:Number = 0; //controla a linha atual dos movieclips
      	var post:Number = 1; // controla o postit atual (amarelo/verde/azul)
      	
      	var txt_bold:TextFormat = new TextFormat(); 
      	      txt_bold.bold = true; 
      	
      	var qntd_por_pagina:Number = 15;
      	var total:Number = xml.length; //total de registros
      	var total_paginas:Number = Math.ceil(total / qntd_por_pagina);
      	var inicio:Number; //valor inicial que pega do array por pagina
      	var fim:Number; //valor final de cada array por pagina (até onde ele mostra em cada pagina)

Inicialização das variáveis primeiro, alguns comentarios referentes ao uso de cada uma delas.

ActionScript

	if (mcConteudo)
		mcConteudo.removeMovieClip();
	
	this.attachMovie("mcConteudo", "mcConteudo", -16377, {_x:31, _y:266});

Aqui temos o seguinte...
mcConteudo é um movieclip onde colocaremos todos os "postit" com as mensagens, logo a primeira coisa a se fazer é verificar se ele existe no palco. SE ele existir, devemos remove-lo pelo seguinte motivo: essa função é executada cada vez que a página é atualizada. Quando o usuário clicar no número da página que ele deseja, é esta a função que é chamada, então precisamos remover os "postits" atuais, e criar um novo vazio. Além do que, este movieClip é utilizado também para a rolagem do conteúdo, cuja qual não irei comentar aqui neste "guia".

Após a verificação, adicionamos uma nova area de conteudo com o comando attachMovie.

ActionScript

	if (total_paginas > 1)
	{
      		if ( total_paginas == (pagina_atual) )
      		{
            			inicio = (pagina_atual-1) * qntd_por_pagina;
            			fim = total;
      		} else {
            			inicio = (pagina_atual-1) * qntd_por_pagina;
            			fim = inicio + qntd_por_pagina;
      		}
	} else
	{
      		inicio = 0;
      		fim = xml.length;
	}

Aqui eu tenho a verificação para calcular quantas mensagens vão ser mostradas na tela. Então eu tenho a váriavel inicio que recebe o valor daonde eu devo começar a mostrar no nosso Array que veio do XML, e o fim que é a variavel que informar até onde ele deve ir.

ActionScript

	for (i = inicio; i < fim; i++) 
	{
      		//Sortear postits 
      		//post = Math.round(Math.random() * 2) + 1;
		mcConteudo.attachMovie("postit"+post, ["mcRecado"+i], mcConteudo.getNextHighestDepth(), {_x:coluna*217, _y:linha*210});
      		mcConteudo["mcRecado"+i].id = xml[i][0];
      		mcConteudo["mcRecado"+i].edtDe.text = xml[i][1];
      		mcConteudo["mcRecado"+i].edtPara.text = xml[i][2];
      		mcConteudo["mcRecado"+i].edtMensagem.text = xml[i][3];
      		mcConteudo["mcRecado"+i].edtData.text = xml[i][4];
                        
                        // variação dos post-its (1- amarelo, 2- verde, 3- azul)
      		if (post < 3) 
      		{
            			post++;
      		} else 
      		{
            			post = 1;
      		}
      		
      		// controle de 3 por linha e 1 por coluna
      		if (coluna < 2) 
      		{
            			coluna++;
      		} else 
      		{
            			coluna = 0;
            			linha++;
      		}
	}

Em seguida, nessa parte eu poderia sortear a cor dos "postits", amarelo/verde/azul, ou pegar na sequencia. Resolvi por pegar na sequencia, e mais abaixo eu faço o controle de quantos por linha e quantos por coluna eu vou ter. É matemática pura e simples.

ActionScript

	if (total_paginas > 1) 
	{
      		coluna = 0;
		mcConteudo.menu_paginacao.attachMovie("anterior", "anterior", mcConteudo.menu_paginacao.getNextHighestDepth(), {_x:0, _y:0});
      		
      		if (pagina_atual == 1)
      			mcConteudo.menu_paginacao.anterior._visible = false;
      			
      		for (i = 1; i <= total_paginas; i++)
      		{
      			mcConteudo.menu_paginacao.attachMovie("pagina", "pagina"+i, mcConteudo.menu_paginacao.getNextHighestDepth(), {_x:120 + (22 * coluna), _y:14});
            			mcConteudo.menu_paginacao["pagina"+i].id = i;
            			mcConteudo.menu_paginacao["pagina"+i].numeracao.text = i;
            			if (i != total_paginas)
      				mcConteudo.menu_paginacao.attachMovie("espacamento", "espacamento", mcConteudo.menu_paginacao.getNextHighestDepth(), {_x:129 + (22 * coluna), _y:15});
            			if (i == pagina_atual)
            				mcConteudo.menu_paginacao["pagina"+i].numeracao.setTextFormat(txt_bold);
            			
            			mcConteudo.menu_paginacao["pagina"+i].onRelease = function()
            			{
                  				pagina_atual = this.id;
                  				atualizaPagina();
            			}
            			
            			coluna++;
      		}
		mcConteudo.menu_paginacao.attachMovie("proximo", "proximo", mcConteudo.menu_paginacao.getNextHighestDepth(), {_x:338, _y:0});
      		
      		if (pagina_atual == total_paginas)
      			mcConteudo.menu_paginacao.proximo._visible = false;
      			
      		mcConteudo.menu_paginacao.proximo.onRelease = function()
      		{
            			pagina_atual++;
            			atualizaPagina();
      		}
      		mcConteudo.menu_paginacao.anterior.onRelease = function()
      		{
            			pagina_atual--;
            			atualizaPagina();
      		}
	}
	//mover menu na posicao correta
	if ( total_paginas == pagina_atual && (total % 3) != 0 )
		linha++;
	mcConteudo.menu_paginacao._y = linha * 210;
	mcConteudo.menu_paginacao._x = 100;
}

Nessa parte eu monto a paginação no final das mensagens. Eu verifico se o total de mensagens vai dar mais de uma página, se der, eu coloco no palco o botão voltar de "anterior" e escondo ele se for a primeira pagina com _visible = false;

Em seguida é feito toda paginação com os números. Eu coloco um movieclip com um campo de texto pra receber o valor das paginas (1, 2, 3, 4...) até a quantidade de páginas que vai existir. Cada um destes movieclips recebem um valor (id) p/ saber qual é a sua respectiva página quando o usuário clicar em cima dele, e logo após eu deixo em negrito a página em que o usuário está.

No final eu coloco o botão "proximo" na posição que ele deve aparecer, que é em seguida do número da última página, e coloco as ações nos botões "anterior" e "proximo", posicionando todo o movieclip dessa paginação pro seu devido lugar por último.

Espero ter ajudado um pouco, eu sei que é confuso olhando mas fazendo é bem mais fácil do que parece

OBS.: Eu não posso postar o fonte FLA do arquivo porque apesar de ter sido feito por mim, ele faz parte do site lá e pode dar algumas dores de cabeça. Se sobrar um tempo eu faço um genérico pra por aqui pra vocês.

Quem sabe nessa oportunidade eu até faça ele já programado como eu gostaria que fosse

QUOTE(rbaialuna @ 7/7/2006 13:07:56)

perfeito.. parabens! cria um arquivo html e manda isso para o juliano (jhaussen) ou fabioricotta.. eles colocam o tutorial no site.. o que seria mto bem vindo, pq tá show e bem explicado!!!

Poxa... na hora que eu fiz eu ia escrever um tutorial, porque ia estar começando, mas tinha tanta coisa pra entrar no meio, como XML e Rolagem em flash que acabei mudando pra GUIA, já que um tutorial seria bem mais detalhado e explicado p/ todos, inclusive leigos. O que no caso eu não ajudei muito, porque nem comentei o que faz cada linha e tudo mais, sem contar que não explica nem o attachMovie... não sei se precisaria, acho que sim.

Não vou mandar não. Não considerei que ficou bom pra um tutorial...
Como eu disse, a hora que der um tempo vou fazer um genérico, com FLA, imagens e tudo mais, ai sim eu mando. Só não sei se entro nos méritos de como ler XML, como eu fiz a classe da Rolagem....

Topic	Forum	Started By	Stats	Last Post Info
Flash 8 - Vetor - Trace Bitmap aprenda a usar essa ferramenta.	Tutoriais e Artigos	jvabreu	5 Replies 9403 Views	07 April 2006 - 01:15 AM By: SpyNew
centralizar animação em flash colocando ela sempre centralizada	Dreamweaver	Zumbido	2 Replies 1438 Views	26 February 2006 - 03:54 PM By: Zumbido
Tablet da Motorola será lançado nos EUA sem Flash	Notícias	Notícias	0 Replies 85 Views	22 February 2011 - 05:19 PM By: Notícias
DIVULGAÇÃO - Jogo em flash que eu fiz - Cuby	Desenvolvimento de Jogos	eeevee	2 Replies 716 Views	11 August 2009 - 10:56 AM By: eeevee
Alguem sabe fazer ? Formulário	Web Standards	elton pereira	2 Replies 984 Views	25 January 2008 - 12:42 PM By: Lucas Matheus
Vagas Programador Flash/Action script	Mercado / Vagas	kika01	2 Replies 1456 Views	24 September 2005 - 04:10 PM By: hufersil
Como eu faço um efeito de chão rachando? Eu vi isso num design ficou bom	Fireworks	Lespoul	1 Reply 2391 Views	17 March 2005 - 04:37 AM By: =RSV=
avaliem meus trabalhos por favor 3 sites em flash	Avaliação	tutom	4 Replies 1036 Views	17 August 2005 - 09:23 PM By: tutom

..:: MX Studio Fóruns ::..: mural de recados feito flash - ..:: MX Studio Fóruns ::..

Publicidade

ATENÇÃO