[MXDesign]

alguem sabe fazer um mural de recados feito flash, semelhante ao do site antigo do hufersil?

[Micheeel]

alguem sabe fazer um mural de recados feito flash, semelhante ao do site antigo do hufersil?

Não sei como era o desse site ai, mas dá uma olhada em www.muky.com.br
Entra no idioma da sua preferencia e abre o mural. Veja lá se é isso que você imagina, que eu te explico como eu fiz... pode ser?

[]'s
Michel.

[rochester]

ô cara.. falaí como vc fez to predcisando disso XD

[Only Dust]

Curti demais isso ai, ficou show, eu curti mais ainda pq tem paginação, faz um tuto ai pra galera se for possivel.

Faloew.

[Micheeel]

Vou tentar fazer alguma coisa aqui... é complicado porque eu uso muitas classes e tudo mais, vou tentar deixar mais simples do que aquele do site...

Sem a rolagem por exemplo, que é complicadinha. E abstraindo como ler um XML, deixo por conta de vocês essa

[Micheeel]

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

[rbaialuna]

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!!!

[Micheeel]

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....

[rbaialuna]

lwgal, eu acho que ficaria legal.. quemja tem um conhecimento +/- consegue acompanhar.. ainda mais pois há tutors de attachMovie e tal no proprio MX Studio.. mas vc,como disse, tá afim de fazer um tuto detalhado, então melhor né =o)

abraços!

[R.I.A]

show de bola!
estamos no aguardo