Este blog esta em reforma no momento.

Experiência do usuário


Curioso pois a muito tempo eu aplicava minhas estratégias em elementos de media social dando menor atenção aos efeitos como forma de interação do usuário. No entanto surgiu a ideia da "tag cloud".
Literalmente "nuvem de tags" pela forma abstrata que as palavras tomam, resolvi usar uma variação bastante comum nos blogs de Wordpress, uma nuvem em 3D.


Com isso espero conseguir uma melhor interação do visitante no blog de projeto.

Ferramentas
Adobe Flex SDK, Adobe AS3 Language Referênce, Inkscape, My Paing, Gimp, Firefox, JQuery, Ubuntu Studio, Café

Artwork
Uma waccom na mão e uma idéia na cabeça

A arte final foi a parte mais demorada

De resto é speedy-paint puro.

Eu descobri depois de pronto que morguei...

Eu deveria ter feito um screen-cast, pensei que eu fosse começar e parar, mas fiz tudo numa sentada só.


Exportada para o Gimp é só acertar alguns detalhes, como o alpha das camadas, pois ao pintar rapidamente no programa de pintura as vezes deixamos umas áres meio translucidas (com pouca tinta). Até ai tudo bem, o importante é o programa agir como um pinciel de verdade.

E alguns retoques.

Salvei Cibele e uma imagem extra com a parte que pintei com luz (tudo foi pintado em camadas)


Um excelente programa para optimizar png é o opitpng... infelizmente o Gimp é pau-a-pau com ele, e quase sempre se mostra irrelevante aplica-lo.


Solucionei o problema do tamanho com algo que muitos não tem coragem de fazer... usei uma paleta de poucas cores na imagem. Alguns pixels evidentes, mas isso acaba deixando com mais cara de desenho animado e no carnaval da animação quase não é notado.

Essa questão é importante, pois muitos animadores web fixam seus olhos na qualidade e esquecem que muitas vezes aquele pequeno detalhe vai passar desapercebido do espectador. Mas a lentidão da carga não.

Coding
3D na unha, 3D por API nativa, 3D por biblioteca?
Entre as escolhas que eu iria fazer haviam essas 3.
3D na unha é uma das técnicas mais interesante para se aprender, onde você calcula a escala do objeto na tela apartir de calculos de projeção. Parece difícil, mas não é, o calculo é simples.
3D por biblioteca, Papervision3D é a solução pra todos os males, mas.... pesada em termos de uso de memória e kbytes adicionais.
3D por API nativa? Apartir da versão 10 o player do flash ja suporta transformações com eixo Z. E é leve pra rodar já que usa aceleração de hardware.
Escolhendo este ultimo, comecei a lembrar de meus estudos de matrizes, quaternions, vetores... o mais legal é que o o Flash 10 tem essas classes todas, não com o mesmo nome, e na verdade em versões simplificadas.

Matematica

Bom, a dificuldade estava agora em distribuir as tags ao longo da esfera, a primeira ideia foi calcular o volume da esfera que receberia as tags dividi-lo polo toal de tags e extrair-lhe a raiz quadrada. Assim eu teria um valor linear que poderia usar para ter o angulo fixo de distribuição. Demorei 1 hora para fazer o algoritimo e testar o calculo.


Como o primeiro método flhou completamente resolvi sair comer algo na cozinha respirar. Ai eu resolvi o problema em 15 min!!!!
Bastava dividir o raio da circuncerência (360º) e pela raiz quadrada do numero de tags! Assim eu teria um angulo fixo para repeti-las!


Em seguida determinei um raio mínimo para elas rotacionarem quando o mouse estiver fora do stage e um raio máximo  e depois notei que precisava também de um raio mediano para quando extivessem expandidas. Dá-lhe conta: v.z = t.min+t.med*f+t.adi*f;

Optimizando o sistema
Bom, tentei usar várias técnicas. A principal é o uso de opaqueBackground, oque não resultou muito certo. No fundo por exemplo, ficou uma borda preta quando dei o blur, ai deixei o default.
CacheAsBitmap em tudo que não for animado.
Outro recurso é nos filtros como o do rastro das tags. Ele trabalha com um buffer de acumulação que mede 1/4 do tamanho real do stage, como é um efeito de rastro ofuscado, isso não compromete a qualidade.

Paus insanos e inexplorados
Ao rodar pela primeira vez com Cibele tive a infeliz constatação que o sistema de desenho do movieclip tem uma falha com a transparência do PNG. Assim o rastro das tags ficava marcado na imagem sem ser apagado. Obviamente algum conflito com o color-filter que entende a imagem como um retângulo.
Descori também que manusear um sprite dinamicamente usando removeChild e addChild ocasionam um perdimento no sistema de desenho!


Assim tive que criar duas copias de Cibele, uma abaixo das tags e outra dentro.



A copia de dento é renderizada quando as tags extão expandindo e passam atraz dela. A que fica atráz das tags é renderizada quando elas se encolhem.
Eu tentei antes disso fazer com ela completamente dentro da nuvem de tags, mas issu resultou um efeito indesejado com o glow das tags

Até aqui eu desprendi 450% de tempo acima doque eu havia planejado! Só por causa desses inconvenientes.
E achei outro, um dos buffers de desenho que eu desenho a imagem das tags pra gerar o rastro não desenhava as tags com a escala visivel! Issu sim é um pau grave.
Fiz uma experiência, deixei o desenho do buffer em tamanho 1x1 com o stage, e vi que o problema estava na hora de desenhar no buffer, a matriz de transformação aplicada não computava os Sprites das tags em escala. Mas se fosse 1x1 funcionava (vai entender!)


Ai passei a usar um segundo buffer que desenho a imagem 1x1, apenas em memória, e em seguida desenho no buffer de saida em escala reduzida. E não apresentou perda de performance, que justificasse pensar em não usar.

Agora restou acertar detalhes.
Eu tinha planejado usar um sprite preto e branco com a iluminação. Mas como esse esquema falhou pelo problema de transparências citado acima fiz dois dezenhos de Cibele.


Com a luz externa e a luz interna concentrada.


Java Script

O Flash conta com uma poderosa API de conexão com o host do player e com JQuery bastou olhar no código gerado pelo Blogspot dos marcadores.
Infelizmente o Blogspot é terra-de-ninguem quando o assunto é estrutura de código legivel, por issu fui bastante meticuloso ao mandar pro flash a seção com a lista de nomes, por sorte este estava dentro do padrão: < ul >< li >elemento< /li >< /ul >

Para garantir performance recori à uma pratica pouco praticada (apesar de que o Youtube usa bastante).
Montei um script para enviar um sinal ao swf quando este não estiver em área visivel. Ele é acionado por scroll.
Agora como todos que trabalham com jogos sabem renderizar um objeto fora de tela é disperdicio de processador. É uma pratica comum em jogos, mas vejo pouca gente se preocupar com isso na web. "Mau costume" seria a melhor explicação, do culpar "prazo de entrega".
O player do flash não é burro, e automaticamente o ENTER_FRAME não desenha o resultado fora de tela, no entanto o swf continua processando as informações para que quando o usuário de scroll na janela do navegador o conteúdo do swf esteja atualizado.
Assim o sinal da java script faz o player pular qualquer processamento em background.
var wwp_tag_cloud_top = 0;

function wwp_tag_search()
{
var cont = $("#Label1 ul");
var xml = cont.html();
return xml;
}

function wwp_tag_cloud_getTop()
{
return String(  Number($("#wwp_tag_cloud_div").offset().top) - Number($(window).height()) );
}

function wwp_scroll_screen(e)
{
var top = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
try {
var wwp_tag_run = wwp_tag_cloud_obj().updateScroll(top);
} catch( e ) {}
$("#info").html( top + " / " + wwp_tag_run );

}

function wwp_tag_cloud_obj() {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window["wwp_tag_cloud"];
} else {
return document["wwp_tag_cloud"];
}
}

$(window).scroll(wwp_scroll_screen);
Tanks
Valew pela ajuda na PDJ e apesar de eu concordar com o FenrirBR sobre o problema de ordenação de valores vou manter o sistema em select-sort pois meu sentido de aranha diz que vou preisar desse conhecimento mais para a frente no sistema de jogo. E quem sabe eu consiga usar o Alchemy em reverso, afinal estou começando a estudar-lhe.
Se issu ainda estiver no ar podem ver a diferença aqui: http://www.8arte.net/testes/tagcloud/project.com.htm