Flash CS4 e pontos de fuga?

Eu, sempre preocupado com o mundo Apple, acabo nunca postando nada no TI Developer, mas ontem fiz umas pesquisas interessantes com Flash e resolvi compartilhar com os nobres leitores deste nobre blog.

Esse é um exemplo de um workflow de duas horas de trabalho com Flash CS4. Não funciona em CS3, nem pense nisso!

Ontem me deparei com uma situação interessante: a empresa onde trabalho está fazendo um layout mais arrojado para um desses sites cheios de flash e um dos recursos do layout envolve um quadrado que gira em torno do próprio eixo. Um lado do quadrado mostra um conteúdo, e outro lado mostra outro conteúdo. Simples, não? Não.
Um programador que trabalha comigo resolveu usar o Papervision 3D. A princípio ele fez 18 cubos com lateral 0. Os cubos eram idênticos a quadrados. A face da frente e a de trás possuiam um movieclip diferente cada. O efeito funcionou. Mas… (sempre tem um “mas”) o flash precisa renderizar quadro-a-quadro 18 cubos girando. Isso significa que o SWF ficou deveras pesadíssimo.

Como contornar isso? A primeira resolução foi acabar com essa folia de cubos. Cada “quadrado” tinha 4 faces inúteis e duas faces com movieclips quando poderíamos usar só uma. Acabar com esse POG deixou o negócio mais leve, mas ainda estava pesado demais para a web.

Então eu entrei na jogada. Por que usar Papervision? O flash CS4 já dá suporte a 3 dimensões. E girar uma droga dum quadradinho não deveria ser tão difícil! Girar 18 quadradinhos deveria dar no mesmo.
Eu sou um programador de ActionScript 2. Embora saiba programar em AS3, não gosto muito porque acho o AS3 muito enrolado com coisas óbvias. Mas enfim, resolvi fuçar os arquivos de ajuda atrás de uma solução mais simples.

Eis minha idéia:
Pegamos o conteúdo de cada face.
Criamos um MovieClip.
O MovieClip terá 2 quadros. Cada um vai comportar um dos dois conteúdos.
Quadrados são bidimensionais. Então sempre que girarmos o quadrado, poderemos nos deparar com 2 situações:
ou haverá um quadro em que ele ficará invisível ou, de um quadro para outro veremos uma e outra face, sem intermédios.
Justamente nessa mudança mudaremos do quadro 1 para o 2, dando a impressão que estamos vendo o verso do quadro, quando na verdade só vemos outro quadro. Entendeu? =D

Ok.. Você leu até aqui e não entendeu picas? Então vamos pôr a mão na massa e irás entender.

Estou usando Windows XP aqui no trabalho, então os atalhos de teclado aqui não valem para quem usa Mac, beleza?

Na maioria das vezes, quem usa mac só precisa trocar o [Ctrl] por [Command] e [Enter] por [Return]. Mas vá, se vc que lê isso tem flash, saberá se virar sozinho, certo?

1. Criando o MovieClip

Abri meu flash e criei um novo documento em AS3. Apertei [Ctrl+F8]. Dei o name de “bola”, type “MovieClip”. [Enter].
Apertei a tecla [R] do meu teclado para fazer um quadrado. No painel procurei o “fill and stroke” e deixei sem linhas, só preenchimento. Criei um retângulo. Cliquei depois nesse retângulo e deixei com H em -100, Y em -100 também, W em 200 e H em 200 também. Pronto. Um quadrado. Um quadrado chamado “bola”. “Quadrado” tem 8 letras. “Bola” tem 4 letras. Muito mais econômico.
Deixei meu quadrado vermelho “#FF0000″.
Então apertei [F6]. Meu quadro na linha do tempo foi duplicado. No quadro 2 deixei esse quadrado verde “#006600″.
Criei um novo layer na linha do tempo. Cliquei no quadro 1 desse novo layer, apertei [F9] e escrevi isso:

stop();

Pronto. Simples.

2. Posicionando o MovieClip

Voltei para o “Scene 1″. Apertei [Ctrl+L] para ver minha biblioteca e arrastei o MovieClip “bola” para o palco. Segurei [Ctrl+K]. Deixei a opção “To stage” acionada. Cliquei no MovieClip, apertei [Ctrl+Alt+2] e depois [Ctrl+Alt+5]. Agora meu quadrado está centralizado. Na janela properties eu instanciei ele como “bola”.
Criei um novo layer na linha do tempo. Cliquei no frame em branco desse layer. Apertei [F9] de novo. Agora… ActionScript!

3. Criando a animação

Primeiro vamos fuçar o método “Tween”.

Copiei e colei um código de animação e troquei o nome do MovieClip ali. Ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”x”,Regular.easeIn,0,100,2,true);

Vamos por partes então. Linhas 1 e 2 importam bibliotecas que vou usar no tween.
A linha 4 cria um objeto Tween. Ele vai incrementar a coordenada x do MovieClip chamado “bola”, de 0 a 100, em 2 segundos, usando uma suavização conhecida como “easeIn”. Ou seja, vai começar lento e terminar rápido.
Não quero esse ritmo, então trocarei por “None.easeNone”. Se eu der [Ctrl+Enter] eu verei meu quadrado percorrendo um certo espaço. Parece uma lesma.
Enfim… sei que posso usar qualquer propriedade do meu MovieClip na classe Tween. Vou substituir o “x” por “rotationY”, porque quero girá-lo. A propriedade “rotationY” usa o princípio de graus. Quero que meu quadrado vire ao contrário. Isso serão 180 graus. Então meu código ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,2,true);

Girou! Aêê! Quem precisa de PaperVision pra fazer isso?
Continuemos. Eu preciso mudar a face do bagulho quando chegar a 90 graus. Para isso vou construir um listener. Não quero usar “onEnterFrame” porque fica lerdo e ocupa memória. Então vou fazer o listener sobre o Tween.

t1.addEventListener(TweenEvent.MOTION_CHANGE, teste);

Simples né? Não funciona, pois não existe a função “teste” ainda. Então criei uma função “teste”:

function teste(e:Event):void {
trace(1);
}

Pronto. Agora quando o quadrado girar receberei o valor “1″ no output. Isso serve para eu ver se o listener funciona direitinho.
Vamos fazer isso ficar mais útil e me informar a posição do quadrado.
Ao invés de:

trace(1);

vou usar

trace(e.target.obj.rotationY);

Veja que interessante: e.target aponta para meu Tween. “obj” é o objeto que o Tween está alterando, no caso, “bola”; e “rotationY” é propriedade de “bola”.
Agora posso mudar o quadro quando chegar em 90 graus. Meu código ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,2,true);

t1.addEventListener(TweenEvent.MOTION_CHANGE, teste);

function teste(e:Event):void {
if (e.target.obj.rotationY>90) {
e.target.obj.gotoAndStop(2);
}
}

4. Corrigindo o ponto de fuga

Maravilha! Parece que mudou mesmo. Tudo certo? Então pronto.
Pronto nada. Tem um porém nessa coisa toda. Vamos mudar a posição desse MovieClip.
Ponho meu X em 434 e meu Y em 284. Agora vejamos. Percebe o que aconteceu? Não? Então vamos deixar mais lento.
Mude a linha 4 para ficar assim (olha o 5 ali):

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,5,true);

Agora execute de novo. Viu agora? O quadrado ficou verde antes dos 90 graus! Mas como isso!?
Muita calma nessa hora.
Em primeiro lugar o flash não mudou o quadro nem antes nem depois da hora que foi definida. Passou de 90 graus, é instantâneo. A pergunta não é “porque ele mudou antes dos 90 graus”, mas “por que os 90 graus não estão perpendiculares à ‘câmera’?”.
Simples: o Flash possui um ponto de fuga. Quando o MovieClip estava centralizado, o ponto de fuga ficava exatamente no meio do quadrado e ele mudava de cor exatamente no momento em que as face fica visível do lado oposto. Quando deslocamos o MovieClip para outro ponto no palco, o ponto de fuga mudou em relação a ele e a visão dos 90 graus mudou. Se você não entendeu isso, pegue uma carta de baralho e deixe-a na perpendicular até que ela pareça uma linha. Agora desloque o seu braço para a direita ou esquerda sem mudar a posição da carta em relação ao braço. Vê que uma face ficou mais visível né? Pois é. O flash simula perspectivas.

Meu POG falhou. Mas não desisto!
Pensando com meus botões concluí: deve existir um meio de mudar o ponto de fuga do movieclip!
E tem. Vamos lá:

Podemos declarar um objeto do tipo “PerspectiveProjection” (com p maiúsculo) e mudar o valor de seu “projectionCenter”.
O MovieClip ainda tem uma propriedade chamada “perspectiveProjection” (com p minúsculo). Se atribuirmos essa nova variável a seu resultado final, conseguimos mudar o ponto de fuga. Os novos valores serão o centro do objeto: as coordenadas x e y. Meu código ficou assim:

import fl.transitions.*;
import fl.transitions.easing.*;

var t1:Tween=new Tween(bola,”rotationY”,None.easeNone,0,180,5,true);

t1.addEventListener(TweenEvent.MOTION_CHANGE, teste);
var pp:PerspectiveProjection = new PerspectiveProjection();

function teste(e:Event):void {
pp.projectionCenter=new Point(e.target.obj.x,e.target.obj.y);
e.target.obj.transform.perspectiveProjection=pp;
if (e.target.obj.rotationY>90) {
e.target.obj.gotoAndStop(2);
}
}

Simples, apesar de tudo. Declarei uma variável, atribuí um valor e troquei uma propriedade. Só isso. Não se assuste com o tamanho do negócio, na verdade é só variáveis de nome grande, nada mais.

5. Corrigindo a inversão do MovieClip

Mas ainda não terminei. Preciso saber se meu MovieClip exibe o conteúdo corretamente.
Abrindo o MC “bola”, vou ao quadro 1 e ponho uma grande letra “R” no meio do quadrado. No quadro 2 eu ponho uma letra “K”.

Executando… Mas que diabos! A letra “K” inverteu!
É claro, eu girei o MC inteiro. Se houvesse só um quadro para ver, eu veria ele invertido, espelhado.
Eu pensei a princípio em fazer uma verificação do ângulo do quadrado e quando ele chegasse em 90 graus eu mudaria para -90 graus e terminaria em 0. Isso exigiria dois tweens diferentes. Mas tem uma solução muito mais simples. Vamos a ela:

No quadro 2, vou selecionar tudo. Quadrado e texto. Dou um [F8] para salvar como MovieClip. Ok. Voltano ao quadro 2… vamos dar um nome menos idiota a esse MC. Vou instanciá-lo como “mc”. Simples!
Agora dou um [F7] no quadro 2 do “Layer 2″. E agora [F9].
Escrevo assim ali:

this.mc.rotationY = 180;

Epa.. o quadrado verde foi pro outro lado. A solução também é simples. O “hotpoint” do MC está no topo, à esquerda. É só entrar no MC e alinhá-lo no meio.

Voilá.. um quadrado que gira e não ocupa muita memória e ainda funciona em todas as regiões do palco. =D

Divirtam-se com moderação.

Passos do Algoritmo de Huffman

David A. Huffman, nascido em Ohio, formou-se em Engenharia Elétrica em 1944, sua maior contribuição para a humanidade foi à técnica computacional conhecida como o Código de Huffman, o método para compactar informações que está presente neste momento no seu Ipod, na sua câmera digital, nos modems de Internet, nas TVs de alta definição e até em invenções mais antigas como o seu telefone ou fax do seu trabalho.

Este código foi desenvolvido durante seu doutorado, em 1951, no MIT (Massachussets Institute of Technology), uma das maiores universidades tecnológicas do mundo. Aos 26 anos, o genial Huffman superou o método ensinado em aula por seu autor, o professor Robert Fano, e criou seu proprio codigo para compactar dados.

Mas o que o algoritmo de Huffman faz ?

A compressão pelo algoritmo de Huffman reduz o tamanho do código usado para representar os símbolos de um alfabeto. Símbolos do alfabeto que ocorrem frequentemente são atribuídos por codigos mais curtos. A estratégia geral é permitir ao tamanho do código variar de caracter para caracter e de assegurar que o código utilizado seja menor.

A compressão de Huffman é feita através da construção de uma árvore binária usando um simples conjunto de exemplo. Isso é feito arranjando os símbolos do alfabeto em ordem decrescente de probabilidade. Então repetidamente adicionando duas menores probabilidades e reorganizando. Este processo se repete até a soma das probabilidades dos dois últimos símbolos ser igual a 1.

Se não for obtido uma probabilidade de 1 nos dois últimos símbolos, provavelmente existe um erro no processo.

Estes diagramas mostram como a árvore de codificação associada à codificação de Huffman é construída:

FFFFFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAEEEEEEEEEDDDDDDDDDDDDDDDDBBBBBBBBBBBBBCCCCCCCCCC
CC

fonte:

wiki

books.google

Orientação a Objetos – Parte 3

CONCEITO DE ENCAPSULAMENTO

• Encapsulamento é o mecanismo pelo qual podemos unir numa mesma estrutura de dados, dados e métodos.
• Por meio do encapsulamento pode-se ocultar os dados.
• O princípio do encapsulamento: “Princípio do Menor Privilégio” – disponibilize ao usuário somente aquilo que for necessário, o resto esconda.

CONCEITO DE HERANÇA

• Herança é o processo de definição de uma classe baseada em outra classe.
• Terminologia
  • Classe Base               Classe Derivada
  • Classe Mãe/Pai          Classe Filha
  • Super-classe              Sub-classe
  • Generalização            Especialização
• A classe derivada herda e incorpora todos os atributos e métodos da classe base.
• Podemos adicionar ou redefinir algum método ou adicionar atributos na classe derivada a fim de adaptar a definição à nova classe.

CONCEITO DE POLIMORFISMO

• O polimorfismo é caracterizado pela frase: “Uma interface, vários métodos”
• Caso se faça a sobreposição de métodos (com a mesma assinatura) em uma herança, será possível se aplicar o conceito de Polimorfismo.
• Tendo-se uma variável do tipo da classe mãe, pode-se criar uma instância para qualquer classe filha descendente da mesma e armazenar sua referência na variável.
• Como o método está definido na classe mãe e sobrecarregado na classe filha, o compilador irá escolher o método baseado no tipo da instância apontada pela referência e não pelo tipo da mesma.
• Permite uma interface ser usada para representar uma classe geral de ações.

Orientação a Objetos – Parte 2

ASSINATURA DE UM MÉTODO

• A definição do método é conhecida como a sua assinatura. O compilador irá localizar um código a ser executado Através da sua assinatura.
• Dois métodos são diferentes se possuírem assinaturas diferentes.
• Na assinatura de um método entram:
  • O nome do método;
  • A quantidade de parâmetros do mesmo;
  • O tipo de cada parâmetro;
  • A ordem desses parâmetros;
• Obs. – o tipo de retorno de um método não faz parte da assinatura do mesmo.

SOBRECARGA MÉTODOS

• A sobrecarga de métodos (overload) é a capacidade de definir mais de um método com o mesmo nome, mas com assinaturas diferentes em uma única classe.
• Métodos sobrecarregados possuem o mesmo nome, mas a lista de parâmetros formais é diferentes.
• Através da assinatura, o compilador irá selecionar o método certo a ser executado.

SOBRESCRITA DE MÉTODOS

• A sobreposição de métodos (override) é a capacidade de redefinir um método com a mesma assinatura em uma classe filha de outra classe. Sempre temos que ter herança na aplicação da sobreposição de métodos.
• O compilador irá escolher o método a ser executado baseado no tipo da instância utilizada na chamada e não no tipo da referência usada.

Orientação a Objetos – Parte 1

Continuando a saga Java, agora irei explicar os conceitos sobre Programação Orientada a Objeto (POO).

Pra este tópico não ficar muito extenso, vou dividir esse assunto em 3 partes.

TÓPICOS QUE SERÃO ABORDADOS:

• Vantagens da Orientação a Objetos.
• Conceito de objeto.
• Estado de um objeto.
• Conceito de classe.
• Assinatura de um método.
• Sobrecarga métodos.
• Sobrescrita de métodos.
• Conceito de encapsulamento.
• Conceito de herança.
• Conceito de polimorfismo.

VANTAGENS DA ORIENTAÇÃO A OBJETOS

• MODULARIDADE
  • Cada objeto pode ser desenvolvido independente dos outros, os outros objetos apenas precisam conhecer a interface do objeto (que mensagens o objeto aceita)
• ENCAPSULAÇÃO
  • Certos detalhes podem ser omitidos dos outros objetos. Existem estados e comportamentos internos que podem ser alterados sem interferir na interação com outros objetos.
• HERANÇAS
  • Novas classes podem ser criadas a partir de outras

CONCEITO DE OBJETO

• Um objeto é algo que possui um Estado, um Comportamento e uma Identidade
• Um objeto é uma entidade capaz de manter um estado, ou seja informação, e que oferece um número de operações que podem ser realizadas sobre o mesmo.
• As operações podem examinar ou alterar as informações (estado) do objeto.
• Todo objeto deve ser identificado unicamente no sistema.

ESTADO DE UM OBJETO

• O estado de um objeto é definido como sendo as propriedades do mesmo em um determinado instante de tempo.
• Os estados de um objeto são implementados através de Atributos.
• Um objeto pode ser
  • Estático ou Passivo
    • O seu estado quase não muda durante a sua existência no sistema.
    • Dinâmico ou Ativo
      • O estado do objeto está constantemente mudando devido a aplicação de alguma operação sobre o mesmo.
• O comportamento de um objeto é a maneira que o mesmo apresenta-se para o sistema.
• É o conjunto de operações possíveis de realizar-se sobre este objeto.
• O comportamento de um objeto é implementado através de Métodos.
• Os métodos podem:
  • Retornar algum valor de algum estado do objeto.
  • Pedir para o objeto fazer algo, alterando o seu estado.
  • Informar para o objeto alguma situação externa ocorrida e que irá influenciar o estado do mesmo.

CONCEITO DE CLASSE

• Uma classe é algo que define um estado e um comportamento.
• Uma classe serve de modelo o qual é capaz de descrever um estado e um comportamento.
• O modelo oferece operações que modificam o estado.
• O estado é representado pelos dados da classe e o comportamento pelo métodos da classe.