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.

DataGrid, List e ComboBox em Flash

Iae pessoal, como vão?

Aqui estou eu novamente pra postar algo a mais sobre programação em ActionScript 2.0.

Neste post irei mostrar a como utilizar os componentes DataGrid, List e ComboBox pra pegar valores de um array e mostrar nos componentes.

//

Criei 3 arrays normal, Nome, Cidade e Número. Depois mando pros componentes. Quando você clicar sobre um dado docomponente ele será impresso no Output, mostrando o conteúdo e indice do valor.

var palavras_1:Array = Array (“Kawano”, “Jorge”, “Gustavo”, “Wanderlei”, “Ana”, “Paula”, “João”, “Rafael”, “Sirlei”, “Alisson”, “Cláudio”, “Maria”, “Fernando”, “Cristiane”, “Michele”, “Júlio”, “Pedro”, “Érick”, “Jonatan”, “Nícolas”, “Leandro”, “Jhenifer”, “Tatiane”, “Pâmela”, “Thiago”, “Silvio”, “Liliane”);

var palavras_2:Array = Array (“Aracaju”, “Belém”, “Belo Horizonte”, “Boa Vista”, “Brasília”, “Campo Grande”, “Cuiabá”, “Curitiba”, “Florianópolis”, “Fortaleza”, “Goiânia”, “João Pessoa”, “Macapá”, “Maceió”, “Manaus”, “Natal”, “Palmas”, “Porto Alegre”, “Porto Velho”, “Recife”, “Rio Branco”, “Rio de Janeiro”, “Salvador”, “São Luís”, “São Paulo”, “Teresina”, “Vitória”);

var palavras_3:Array = Array (“282″, “153″, “869″, “850″, “543″, “400″, “260″, “384″, “907″, “216″, “57″, “789″, “329″, “839″, “218″, “565″, “342″, “893″, “46″, “118″, “730″, “666″, “351″, “579″, “612″, “434″, “515″);

var conteudoGrade:Array = new Array ();

/************************************
Passa valor para os componentes
************************************/

for (var a = 0; a < palavras_1.length; a++)
{
// Passando valores para o DataGrid
conteudoGrade.push ({Nome:palavras_1[a], Cidade:palavras_2[a], Numero:palavras_3[a]});
//
// Passando valores para o List
lista1.addItem ({label:palavras_1[a], data:a});
lista2.addItem ({label:palavras_2[a], data:a});
lista3.addItem ({label:palavras_3[a], data:a});
//
// Passando valores para o ComboBox
combo1.addItem ({label:palavras_1[a], data:a});
combo2.addItem ({label:palavras_2[a], data:a});
combo3.addItem ({label:palavras_3[a], data:a});

}

/************************************
Clicando no DataGrid
************************************/

var GridListener = new Object ();
GridListener.change = function (event)
{
// Quando clicar, mostra os dados da linha clicada.
trace (“\nData grid\n\tNome: ” + event.target.selectedItem.Nome + “\n\tCidade: ” + event.target.selectedItem.Cidade + “\n\tNúmero: ” + event.target.selectedItem.Numero);
};

// Add listener.
grade.addEventListener (“change”,GridListener);

// Passa conteúdo do vetor conteudoGrade pro DataGrid.
grade.dataProvider = conteudoGrade;

/************************************
Clicando no List
************************************/

var ListListener:Object = new Object ();
ListListener.change = function (evt_obj:Object)
{
// Display each property of the object.
var valores:String = “\nList -> “;

for (var i:String in evt_obj.target.selectedItem) {;

valores += ” ” + i + “: ‘” + evt_obj.target.selectedItem[i] + “‘”;

}
trace (valores);

};
// Add listener.
lista1.addEventListener (“change”,ListListener);

/************************************
Clicando no ComboBox
************************************/

var ComboBoxListener:Object = new Object ();
ComboBoxListener.change = function (evt_obj:Object)
{

var item_obj:Object = combo1.selectedItem;

trace (“\nComboBox”);

for (var i in item_obj)
{
trace (“\t” + i + “:\t” + item_obj[i]);
}
};
// Add listener.
combo1.addEventListener (“change”,ComboBoxListener);

Clique aqui pra abaixar o fonte do post.
Bom é isso, qualquer duvida é só mandar.
Abraço.

Lendo XML no Flash.

Depois de tanto tempo sem postar nada, não sei o que me deu, mas esse é o meu 3º post. Sim! Estou no trabalho! eheh

Bom! Vamos lá.

Utilizando o Flash, vamos ler um XML externo, com dados de dois nós.

// XML UTILIZADO. (dados.xml)
<?xml version=”1.0″ encoding=”utf-8″ ?>

<dados>
<lingua nome = “Masculino”>
<retorno valor = “João” />
<retorno valor = “Rafael” />
<retorno valor = “Cláudio”/>
<retorno valor = “Eduardo”/>
<retorno valor = “Alexandre”/>
</lingua>

<lingua nome=”Feminino”>
<retorno valor = “Maria”/>
<retorno valor = “Michele”/>
<retorno valor = “Fabiola”/>
<retorno valor = “Pâmela”/>
<retorno valor = “Tatiane”/>
</lingua>

</dados>

// Código Flash

import mx.transitions.Tween;

//

var dados_xml:XML = new XML ();
dados_xml.ignoreWhite = true;

dados_xml.onLoad = function (success:Boolean)
{
trace (“Lendo XML”);

// Vendo quantos itens tem no 1º nó do XML. ( length = 2 ‘Masculino e Feminino’)
for (var a = 0; a <= dados_xml.firstChild.childNodes.length – 1; a++)
{
// Pegando os dados do 1º nó do xml. (Atributo – nome = ‘Masculino e Feminino’)
trace (“\nTipo: ” + dados_xml.firstChild.childNodes[a].attributes.nome + “\n”);

// Passando em todos os itens do 1º nó e vendo o tamanho do conteúdo dentro dele.
// Length = 5, os 5 nomes no atributo valor.
for (var b = 0; b <= dados_xml.firstChild.childNodes[a].childNodes.length – 1; b++)
{
// Pega o conteúdo de dentro de cada nó e mostra. (Atributo = valor)
// Mostra os nomes das pessoas.
trace (“Nome: ” + dados_xml.firstChild.childNodes[a].childNodes[b].attributes.valor);
}
}

trace (“\nOU”);

trace (“\nTipo: ” + dados_xml.firstChild.childNodes[0].attributes.nome + “\n”);
trace (“Nome: ” + dados_xml.firstChild.childNodes[0].childNodes[0].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[0].childNodes[1].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[0].childNodes[2].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[0].childNodes[3].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[0].childNodes[4].attributes.valor);

trace (“\nTipo: ” + dados_xml.firstChild.childNodes[1].attributes.nome + “\n”);
trace (“Nome: ” + dados_xml.firstChild.childNodes[1].childNodes[0].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[1].childNodes[1].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[1].childNodes[2].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[1].childNodes[3].attributes.valor);
trace (“Nome: ” + dados_xml.firstChild.childNodes[1].childNodes[4].attributes.valor);
};

dados_xml.load (“dados.xml”);

Pra você ler um arquivo xml, você precisa acessar cada nó do xml e ler seu conteúdo. Como se fossem pastas e sub pastas com seu conteúdo respectivo.

// Saída do Código.

Lendo XML

Tipo: Masculino

Nome: João
Nome: Rafael
Nome: Cláudio
Nome: Eduardo
Nome: Alexandre

Tipo: Feminino

Nome: Maria
Nome: Michele
Nome: Fabiola
Nome: Pâmela
Nome: Tatiane

OU

Tipo: Masculino

Nome: João
Nome: Rafael
Nome: Cláudio
Nome: Eduardo
Nome: Alexandre

Tipo: Feminino

Nome: Maria
Nome: Michele
Nome: Fabiola
Nome: Pâmela
Nome: Tatiane

Bom pessoal é isso, se tudo rolar bem, ainda essa semana posto algo sobre Flex.

Abraço a todos.

Clique aqui para abaixar o código fonte do post.

Banner randômico em flash

Iae pessoal como vão?Depois de muito tempo aqui estou eu postando coisa nova pra vocês.

Peguei férias do trabalho e faculdade, ai viajei e não deu pra postar aqui no blog. Mas agora voltei e logo irei postar várias cosias sobre Flex.

Hoje irei mostrar como se faz um sisteminha de troca de banner em flash. É simples e funcional.

//

Nesse sistema de banner, será possível por pro banner fazer a troca randômica das imagens ou na sequência.

Crie um arquivo novo, com dimensões de 750 por 150.

Depois crie um retângulo com as mesmas dimensões do palco.
Com o retângulo selecionado, aperte F8 pra criarmos um movie clip.
Coloque o nome de “M_img_1” e o linkage “L_img_1“.

Repita esse processo para 6 imagens, pra diferenciar mude a cor dos retângulos, digite alguma coisa etc. Colocando os nomes na sequencia.M_img_1, M_img_2, M_img_3 e assim por diante, a mesma coisa com o linkage.

//

Abra a janela de action script apertando a tecla F9.
Depois cole esse código na janela do action script.

var intervaloID:Number;

// Tempo de troca das imagens do banner (1000 = 1s)
var duracao:Number = 3000; // 3 segundos

// Definir o número de imagens que serão usadas no banner.
var numeroDeImagens:Number = 6;

// Número que foi sorteado aleatóriamente.
var numeroRandomico:Number;

// Se deixar em true, as imagens no banner irão aparecer de forma aleatória.
var ativarRandomizacao:Boolean = false;

// contador pra forma não randomica.
var aux:Number = 1;

/*
As imagens deverão estar dentro de MovieClips, na biblioteca.
O Linkage dos movieClips, deverá ser. “L_img_1, L_img_2, L_img_3…”
*/

function chamaSetInterval ():Void
{
trace (“Set Interval”);
//
if (ativarRandomizacao)
{
// Removendo imagens do banner.
removeMovieClip (“I_img_” + numeroRandomico);

// Sorteando um número para a próxima imagem no banner.
numeroRandomico = Math.floor (Math.random () * (numeroDeImagens – 1 + 1)) + 1;

// Puxando a imagem da biblioteca.
attachMovie (“L_img_” + numeroRandomico,”I_img_” + numeroRandomico,this.getNextHighestDepth ());

}
else
{
// Removendo imagens do banner.
removeMovieClip (“I_img_” + (aux – 1));

// Puxando a imagem da biblioteca.
attachMovie (“L_img_” + aux,”I_img_” + aux,this.getNextHighestDepth ());
//
if (aux == 6)
{
aux = 1;
}
else
{
aux++;
}
}
}
intervaloID = setInterval (this, “chamaSetInterval”, duracao);

Agora é só você testar o arquivo.
Pra gerar o swf, aperta Ctrl + Enter.

Veja que o banner está trocando na ordem em que o linkage foi colocado.
L_img_1
L_img_2
L_img_3
L_img_4
L_img_5
L_img_6

Se você quiser que o banner troque as imagens aleatóriamente, mude a variável ativarRandomizacao para true.

É isso pessoal, espero que gostem.
Qualquer duvida é só perguntar.

Abraços!

Para abaixar o fonte do post clique aqui.

Histórico do ActionScript

A partir de hoje eu estarei dando inicio a uma série de matérias, artigos e tutorias tendo como base a linguagem de programação ActionScript. Para iniciar essa serie vou começar com um breve histórico desta linguagem.

ActionScript é uma linguagem de programação orientada à objetos baseada em ECMAScript, primariamente