Hoje estou lançando oficialmente a primeira versão do LightMVC, o mais novo framework Actionscript 3.0 baseado na arquitetura MVC. Trata-se basicamente de um conjunto de comandos que fazem seu projeto ser mais escalável, desacoplado e fácil de manter.
Mostrando postagens com marcador flash. Mostrar todas as postagens
Mostrando postagens com marcador flash. Mostrar todas as postagens
segunda-feira, 28 de março de 2011
segunda-feira, 7 de março de 2011
Exotic Wolrdelic 5ª Edição
Esse hot-site foi feito para a Exotic Wolrdelic em 2006, além da festa ter sido a mais animal de todas com djs tocando por 24 horas (fui um deles!), o site ficou bem bacana! Nesse, se eu me lembro bem, foi quando aprendi a fazer barra de progresso, e os textos das páginas vêem de TXTs externos. Todo em Actionscript 2.0!
No site onde está escrito "EXOTIC", era um contador de dias até a festa... Vale a pena ver a intro, ficou bem legal.
No site onde está escrito "EXOTIC", era um contador de dias até a festa... Vale a pena ver a intro, ficou bem legal.
Estou revirando aqui, se achar mais sites eu posto.
Idemax.net Pre-Releases
Continuando essa segunda-feira nostalgica de Carnaval, achei nos meus backups algumas versões antigas do Idemax.net, quando ainda era só dj. Foram feitas em Flash / Actionscript 2.0 e são bem legais...
Esse ai foi a primeira versão, quando eu aprendi como colocar som no Flash. Também ficou legal aqueles efeitos em volta da foto... Todo mundo falou que ficou "psy"! Rsss...
O segundo que achei ficou mais legal, e foi feito quando eu fui tocar na Exotic Worldelic (vou postar o site que fiz pra eles). Ficou animal com a grama e as transparências.
E o melhor, o site é em Flash e coloquei um botão dentro do Flash para você baixar o Flash Player caso não o tivesse. #FAIL!
Nostalgia nos Backups
Ontem a noite estava aqui, procurando por CDs e DVDs virgens nas pilhas infinitas de mídias que tenho, quando achei um backup (é muito bom achar backup!). Mas não era um backup qualquer, era O BACKUP. Lá estavam muitas coisas (que irei postar aqui), entre elas alguns sites que fiz em 2005 e 2006...
O primeiro foi o APGarcia.com, se tratava de um site de um apartamento no Guarujá da dona do AP que eu morava.
O primeiro foi o APGarcia.com, se tratava de um site de um apartamento no Guarujá da dona do AP que eu morava.
O segundo foi da produtora de eventos que me "patrocinava" em 2006. Era da GP Eventos, não chegou a ir pro ar, mas estava ficando... Laranja.
O terceiro foi o que me deu mais trabalho na época, era de uma preparadora de carros para competição. O topo eu fiz usando o Need For Speed Underground tirando print-screens das ruas e dos carros! Chamava MJ Preparações.
Rí muito quando ví esses sites... São muito antigos e da época que eu estava aprendendo o que era HTML, Javascript e Flash / Actionscript 2.0. O legal é ver o quando evoluimos (ainda bem!).
Obs.: Ainda tem mais por vir... Achei umas pérolas!
terça-feira, 28 de dezembro de 2010
CD Card Abimaq
Esse job já faz algum tempo que fiz, foi entre o final de 2008 e início de 2009.
Ele é bem interessante pois tive que fazer um algoritmo de busca em arquivos XML por expressão regular.
Clique aqui ou na imagem para baixar os arquivos e ver o CD Card.
Participação: Programação Actionscript 3.0.
Agência: Labclick
Ele é bem interessante pois tive que fazer um algoritmo de busca em arquivos XML por expressão regular.
Clique aqui ou na imagem para baixar os arquivos e ver o CD Card.
Participação: Programação Actionscript 3.0.
Agência: Labclick
quarta-feira, 1 de dezembro de 2010
Você já conhece o projeto Flash People?
Flash People Brasil é um projeto da Adobe com as comunidades Flash do mundo, e o bacana é que o projeto começa pelo Brasil. O objetivo do projeto é juntar em um local, todos os flash/flex/air developers e designers de cada país, através de um vídeo curto de 1 minuto de duração para cada pessoa. O objetivo é conseguir colocar uma “voz” e uma “cara” aos usernames que vemos todos os dias.
Participe você também e dê seu depoimento e concorra a um Adobe Creative Suite Design Premium no próximo Flash Camp Brasil. Participem!!!
Participe você também e dê seu depoimento e concorra a um Adobe Creative Suite Design Premium no próximo Flash Camp Brasil. Participem!!!
quarta-feira, 16 de dezembro de 2009
Badges Oficiais do FlashCamp Brasil
Saiu os badges oficiais para divulgar nessa reta final até o dia 15. Falta um mês... "Você não vai querer perder!"
Copie o código HTML entre as tags <BODY> e </BODY> de seu site, blog, etc...
Banner - 721x249
(clique na imagem para ampliar)
(clique na imagem para ampliar)
<iframe src="http://www.idemax.net/flashcamp/banner_712x249.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Flash Camp - 88x31
<iframe src="http://www.idemax.net/flashcamp/88x31.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Flash Camp - 125x125
<iframe src="http://www.idemax.net/flashcamp/flashcamp4.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Flash Camp - 125x125
<iframe src="http://www.idemax.net/flashcamp/flashcamp4ENG.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Badges Oficiais feito por mim:
Brasil - 88x31
<iframe src="http://www.idemax.net/flashcamp/brasil_88x31.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Brasil - 120x90
<iframe src="http://www.idemax.net/flashcamp/brasil_120x90.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Brasil - 125x125
<iframe src="http://www.idemax.net/flashcamp/brasil_125x125.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Eu vou e você?! - 120x60
<iframe src="http://www.idemax.net/flashcamp/eu_vou_120x60.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Eu vou e você?! - 120x90
<iframe src="http://www.idemax.net/flashcamp/eu_vou_120x90.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Eu vou e você?! - 125x125
<iframe src="http://www.idemax.net/flashcamp/eu_vou_125x125.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Bandeira - 120x60
<iframe src="http://www.idemax.net/flashcamp/flags_120x60.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Bandeira - 120x90
<iframe src="http://www.idemax.net/flashcamp/flags_120x90.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
Bandeira - 125x125
<iframe src="http://www.idemax.net/flashcamp/flags_125x125.html" allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" vspace="0"></iframe>
segunda-feira, 14 de dezembro de 2009
segunda-feira, 7 de dezembro de 2009
FlashCamp Brasil - 15 e 16 de Janeiro / 2010 em Maceió - AL - Brasil
Olá pessoal, mês que vem, Janeiro de 2010, vai acontecer no Brasil o primeiro FlashCamp Brasil. Este evento está sendo realizado pela ActionCreations, e será o evento mais importante para desenvolvedores e entusiastas em Adobe Flash Plataform.
Além do network que esse evento vai possibilitar, os palestrantes estão entre os maiores nomes em desenvolvimento RIA mundial. Como exemplo, Lee Brimelow, evangelísta Adobe focado em Flash, Flex e AIR, qual já fui numa palestra em São Paulo e foi excelente. E Daniel Dura, que vai palestrar sobre o Flash Player 10.1, que tem suporte a multitouch nativo! E muitos outros como Joshua Hirsch, Daniel Morena, Sam Rivello, Vicente Maciel Jr, Tiago Venegas, Cássio Souza, etc...
Na minha opnião, o evento será bom para os dois principais grupos no Brasil. Para desenvolvedores na área de publicidade, sobre novas funcionalidades do Flash CS5, e para desenvolvedores de aplicações enterprise, sobre o Flash Catalyst, Flash Builder 4, AIR 2.0 e o multitouch do Flash Player 10.1. Além também de apresentarem novidades sobre Flash Video, Live Streaming e HD com Flash Media Server.
Ouvir os cabeças mundiais falando sobre seu know-how em desenvolvimento não vai ter preço, e quem perder esse, só o ano que vem (provavelmente).
Para mais informções sobre o local, inscrição e preços. Acesse: www.flashcampbrasil.com.br
segunda-feira, 3 de agosto de 2009
Seguindo o Mouse com Trigonometria
Olá, esse poste de hoje foi baseado na dúvida do leitor Jefferson A. Pereira. Espero que gostem...
Se não leu meu post sobre Trigonometria em Actionscript, leia-o antes clicando aqui.
Vou ensinar hoje como usar a trigonometria em actionscript para fazer o olhos seguirem o ponteiro do mouse. Assim...
No método construtor, vamos adicionar o listener MouseEvent.MOUSE_MOVE no STAGE:
public function Main()
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}
No método listener, vamos limpar os riscos antigos dos triângulos que usamos para testar e executar a função que rotaciona o olho. Também forço o updateAfterEvent para que fique mais suave.
private function onMouseMoveHandler($event:MouseEvent):void
{
graphics.clear();
rotateEye(eye1);
rotateEye(eye2);
$event.updateAfterEvent();
}
No método rotateEye é onde faço os cálculos para que o olho seja rotacionado de forma que "siga" o mouse do usuário. Primeiro eu encontro os catetos adjacente e oposto para que possa encontrar a hipotenusa:
var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));
Com isso posso calcular o ângulo de abertura do triângulo em radianos:
var radians:Number = Math.asin(catOp / hipot);
E transformar em graus:
var degree:Number = radians * (180 / Math.PI);
Ok, até essa parte tudo bem. Mas como o actionscript trabalha com graus de forma diferente, temos que verificar se o mouse está a direita ou esquerda do nosso olho. Fazemos isso comparando se o cateto adjacente está positivo ou negativo:
if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}
Se for negativo, subtraimos o valor de 180º. Por exemplo: 180º - (-90º) = 180º + 90º = 270º. Ou seja, está apontando na direção norte.
E depois adicionamos as linhas de teste e o log:
log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);
graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);
O método rotateEye ficou assim:
private function rotateEye($eye:MovieClip):void
{
var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));
var radians:Number = Math.asin(catOp / hipot);
var degree:Number = radians * (180 / Math.PI);
if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}
log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);
graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);
}
Pronto!!!
Abaixo a classe Main inteira:
package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;
/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
public var eye1:MovieClip;
public var eye2:MovieClip;
public var log:TextField;
public function Main()
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}
private function onMouseMoveHandler($event:MouseEvent):void
{
graphics.clear();
rotateEye(eye1);
rotateEye(eye2);
$event.updateAfterEvent();
}
private function rotateEye($eye:MovieClip):void
{
var catAdj:Number = mouseX - $eye.x;
var catOp:Number = mouseY - $eye.y;
var hipot:Number = Math.sqrt((catAdj * catAdj) + (catOp * catOp));
var radians:Number = Math.asin(catOp / hipot);
var degree:Number = radians * (180 / Math.PI);
if (catAdj >= 0)
{
$eye.rotation = degree;
}
else
{
$eye.rotation = 180 - degree;
}
log.text = 'catAdj: ' + catAdj;
log.appendText('\ncatOp: ' + catOp);
log.appendText('\nhipot: ' + hipot);
log.appendText('\nradians: ' + radians);
log.appendText('\ndegree: ' + degree);
graphics.lineStyle(1, 0xff0000);
graphics.moveTo($eye.x, $eye.y);
graphics.lineTo(mouseX, mouseY);
graphics.lineStyle(1, 0xcccccc);
graphics.lineTo(mouseX, $eye.y);
graphics.lineTo($eye.x, $eye.y);
}
}
}
Clique abaixo para fazer o download dos arquivos:
quarta-feira, 15 de julho de 2009
Rotação 3D no Flash Player 10
Olá, quem me segue no Twitter, está lendo ultimamente que estou fazendo um Coverflow usando a rotação 3D nativa do Flash Player 10. Então resolvi fazer um post antes de dormir para mostrar como é fácil usar essa nova classe.
Abaixo é o teste simples que fiz no Flash:
Obs.: Caso não funcione, instale o Flash Player 10 clicando aqui.
E a classe Main:
package
{
import fl.controls.Slider;
import fl.events.SliderEvent;
import flash.display.MovieClip;
/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
public var avatar:MovieClip;
public var xAxis:Slider;
public var yAxis:Slider;
public var zAxis:Slider;
public function Main()
{
xAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
yAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
zAxis.addEventListener(SliderEvent.CHANGE, onSliderChange);
}
private function onSliderChange(event:SliderEvent):void
{
var slider:Slider = event.target as Slider;
switch(slider)
{
case xAxis:
avatar.rotationX = slider.value;
break;
case yAxis:
avatar.rotationY = slider.value;
break;
case zAxis:
avatar.rotationZ = slider.value;
break;
}
}
}
}
Clique abaixo para fazer o download dos arquivos:
quarta-feira, 1 de julho de 2009
Criando e Disparando Eventos Customizados - 2ª Parte
Olá, continuando a sequência de posts sobre criar e disparar eventos customizados, hoje vou ensinar como colocar também propriedades customizadas. Por exemplo, você tem três elementos na tela e três botões que giram esses elementos.
Para fazer isso de uma forma que seu código não fique acoplado e você possa futuramente mudar o efeito (no caso, girar) sem estragar outras partes do código, você precisar pensar genericamente. Para isso, teoricamente seu código deve ser assim:
- Cada botão no MouseEvent.CLICK dispara um evento dizendo que é para girar um certo elemento.
- O método listener do evento que o botão disparou verifica em qual elemento deve ser feito o bloco de comandos (no caso, girar)
É ai que entra o evento customizado com propriedades customizadas. No MouseEvent ou em qualquer evento nativo do actionscript não há propriedades disponíveis para que você passe qualquer tipo de informação extra, no caso de nosso exemplo, um MovieClip.
Se você não leu o meu primeiro post sobre eventos customizados, leia-o antes clicando aqui.
Há duas maneiras de fazer isso, na verdade, um é complemento do outro. O que vou mostrar hoje é a primeira fase, para que você entenda passo à passo como funciona o processo de customizar eventos com propriedades customizadas.
Inicialmente vamos criar nossa classe de evento customizado normalmente, como criamos no post passado:
package
{
import flash.events.Event;
/**
* ...
* @author www.idemax.net
*/
public class MeuEvento extends Event
{
public static const GIRAR_ELEMENTO:String = 'girarElemento';
public function MeuEvento(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
O que muda é o seguinte, como num classe qualquer, você irá criar variáveis públicas, além das constantes usadas para disparar o seu evento:
public var instancia:String;
public var elemento:MovieClip;
Vou usar dois tipos para deixar o exemplo mais completo. No meu evento customizado eu vou poder passar a instância do MovieClip (uma String) ou o próprio MovieClip.
Então a classe do nosso evento customizado com propriedades customizadas fica assim:
package
{
import flash.display.MovieClip;
import flash.events.Event;
/**
* ...
* @author www.idemax.net
*/
public class MeuEvento extends Event
{
public static const GIRAR_ELEMENTO:String = 'girarElemento';
public var instancia:String;
public var elemento:MovieClip;
public function MeuEvento(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
Pronto, agora vamos usá-lo! Vou cria minha classe Main que escutará o evento MouseEvent.CLICK nos botões e o meu evento customizado:
public function Main()
{
addEventListener(MeuEvento.GIRAR_ELEMENTO, onGirarElementoHandler);
btnAzul.addEventListener(MouseEvent.CLICK, onBtnClick);
btnVerde.addEventListener(MouseEvent.CLICK, onBtnClick);
btnVermelho.addEventListener(MouseEvent.CLICK, onBtnClick);
}
No listener onBtnClick, vou guardar qual botão está disparando esse evento pelo event.target:
var buttonClicked:Button = event.target as Button;
E vamos instanciar nosso evento customizado:
var evt:MeuEvento = new MeuEvento(MeuEvento.GIRAR_ELEMENTO);
Mas porque instânciar? A sua classe de eventos comporta-se como uma classe normal, por isso declaramos como public as propriedades customizadas.
Agora verificamos por um switch qual botão disparou o evento MouseEvent.CLICK para que seja guardado na propriedade de nosso evento customizado qual elemento ele deve girar:
switch(buttonClicked)
{
case btnAzul:
evt.elemento = azul;
break;
case btnVerde:
evt.instancia = 'verde';
break;
case btnVermelho:
evt.elemento = vermelho;
break;
}
Veja que eu acessei normalmente as propriedades "elemento" e "instancia" da classe MeuEvento. Na "elemento" eu passei o MovieClip direto, mas na "instancia" eu passei uma String com a instância do meu MovieClip.
Agora disparamos nosso evento:
dispatchEvent(evt);
O listener onBtnClick inteiro ficou assim:
private function onBtnClick(event:MouseEvent):void
{
var buttonClicked:Button = event.target as Button;
var evt:MeuEvento = new MeuEvento(MeuEvento.GIRAR_ELEMENTO);
switch(buttonClicked)
{
case btnAzul:
evt.elemento = azul;
break;
case btnVerde:
evt.instancia = 'verde';
break;
case btnVermelho:
evt.elemento = vermelho;
break;
}
dispatchEvent(evt);
}
Como o botão já disparou o evento com o elemento que ele quer que sejá girado, vamos tratar esse evento no listener onGirarElementoHandler que adicionamos na contrutora da classe.
Primeiro vamos tratar alguns possíveis erros que podem acontecer, caso seja passado nenhum elementos nas propriedades "elemento" e "instancia" ou seja passado em ambas.
if (event.elemento == null && event.instancia == null) return; // Se não for declarado algum elemento para ser girado
if (event.elemento != null && event.instancia != null) return; // Se os dois argumentos forem declarados, deve-se escolher um
Se estiver somente um das propriedades difernte de NULL, vamos verificar qual delas foi atribuída e guadar em uma variável:
var girarElemento:MovieClip;
if (event.elemento != null)
{
girarElemento = event.elemento as MovieClip;
}
else if (event.instancia != null)
{
girarElemento = this[event.instancia as String] as MovieClip;
}
Pronto! Agora fazemos o que devemos fazer com o elemento selecionado!
girarElemento.rotation = Math.random() * 360;
O listener onGirarElementoHandler inteiro ficou assim:
private function onGirarElementoHandler(event:MeuEvento):void
{
if (event.elemento == null && event.instancia == null) return; // Se não for declarado algum elemento para ser girado
if (event.elemento != null && event.instancia != null) return; // Se os dois argumentos forem declarados, deve-se escolher um
var girarElemento:MovieClip;
if (event.elemento != null)
{
girarElemento = event.elemento as MovieClip;
}
else if (event.instancia != null)
{
girarElemento = this[event.instancia as String] as MovieClip;
}
girarElemento.rotation = Math.random() * 360;
}
Agora você pode deixar sua aplicação mais rica e muito menos acoplada a um determido tipo de execução, e para mudar ou atualizar algum efeito ou processo, basta você mudar apenas um método!
A classe Main inteira ficou assim:
package
{
import fl.controls.Button;
import flash.display.MovieClip;
import flash.events.MouseEvent;
/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
public var vermelho:MovieClip;
public var verde:MovieClip;
public var azul:MovieClip;
public var btnVermelho:Button;
public var btnVerde:Button;
public var btnAzul:Button;
public function Main()
{
addEventListener(MeuEvento.GIRAR_ELEMENTO, onGirarElementoHandler);
btnAzul.addEventListener(MouseEvent.CLICK, onBtnClick);
btnVerde.addEventListener(MouseEvent.CLICK, onBtnClick);
btnVermelho.addEventListener(MouseEvent.CLICK, onBtnClick);
}
private function onBtnClick(event:MouseEvent):void
{
var buttonClicked:Button = event.target as Button;
var evt:MeuEvento = new MeuEvento(MeuEvento.GIRAR_ELEMENTO);
switch(buttonClicked)
{
case btnAzul:
evt.elemento = azul;
break;
case btnVerde:
evt.instancia = 'verde';
break;
case btnVermelho:
evt.elemento = vermelho;
break;
}
dispatchEvent(evt);
}
private function onGirarElementoHandler(event:MeuEvento):void
{
if (event.elemento == null && event.instancia == null) return; // Se não for declarado algum elemento para ser girado
if (event.elemento != null && event.instancia != null) return; // Se os dois argumentos forem declarados, deve-se escolher um
var girarElemento:MovieClip;
if (event.elemento != null)
{
girarElemento = event.elemento as MovieClip;
}
else if (event.instancia != null)
{
girarElemento = this[event.instancia as String] as MovieClip;
}
girarElemento.rotation = Math.random() * 360;
}
}
}
Clique aqui para ver um exemplo ou abaixo para fazer o download dos arquivos:
segunda-feira, 22 de junho de 2009
Criando e Disparando Eventos Customizados - 1ª Parte
Olá, esse post de hoje é o primeiro de uma série de três onde vou mostrar como se cria um evento customizado até a melhor maneira de usá-lo com argumentos customizados.
Nesse exemplo eu vou fazer um botão que gira a forma selecionada em dois RadioButtons, primeiramente vamos criar nossa classe de evento com o nome de MeuEvento que é subclasse da Event:
public class MeuEvento extends Event
E vamos crias as duas constantes que usaremos para disparar esses eventos:
public static const GIRAR_FORMA_AZUL:String = 'girarFormaAzul';
public static const GIRAR_FORMA_VERMELHA:String = 'girarFormaVermelha';
A classe do evento customizado fica assim:
package
{
import flash.events.Event;
/**
* ...
* @author www.idemax.net
*/
public class MeuEvento extends Event
{
public static const GIRAR_FORMA_AZUL:String = 'girarFormaAzul';
public static const GIRAR_FORMA_VERMELHA:String = 'girarFormaVermelha';
public function MeuEvento(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
Bom, agora vamos montar o exemplo, a classe principal será a Main que é subclasse de MovieClip:
public class Main extends MovieClip
No método construtor da classe eu vou adicionar o EventListener MouseEvent.CLICK no botão:
botao.addEventListener(MouseEvent.CLICK, onClickBotao);
E também os EventListener MeuEvento.GIRAR_FORMA_AZUL e MeuEvento.GIRAR_FORMA_VERMELHA direto no STAGE:
addEventListener(MeuEvento.GIRAR_FORMA_AZUL, girarFormaAzul);
addEventListener(MeuEvento.GIRAR_FORMA_VERMELHA, girarFormaVermelha);
O método listener do MouseEvent.CLICK do botão verifica o valor do RadioButtonGroup para disparar o evento de qual forma o usuário quer girar:
private function onClickBotao(event:MouseEvent):void
{
switch(radioButtonGroup.selection.value)
{
case 'forma1':
dispatchEvent(new MeuEvento(MeuEvento.GIRAR_FORMA_AZUL));
break;
case 'forma2':
dispatchEvent(new MeuEvento(MeuEvento.GIRAR_FORMA_VERMELHA));
break;
}
}
E nos métodos listeners que adicionamos no STAGE fazemos a rotação da forma que o usuário disparou o evento:
private function girarFormaAzul(event:MeuEvento):void
{
forma1.rotation += 45;
}
private function girarFormaVermelha(event:MeuEvento):void
{
forma2.rotation -= 45;
}
Pronto! Você deve estar se perguntando o porque de usar eventos customizados nesse exemplo ou em qualquer outra explicação. Os comando de rotacionar a forma poderiam sim estar no bloco de comando de cada CASE do SWITCH ou na necessidade de usar um método genérico, executar o método ao invés de disparar o evento.
Mas o uso do evento customizado te da oportunidade de ouví-lo de onde estiver, por exemplo, ao carregar um SWF externo ele faz uma animação de 3 segundos e depois para. Como você faria isso de uma forma que não seja necessário ter um método que seja executado quando essa animação acabar?
Resposta: Você dispara um evento quando a animação acabar para que internamente você execute o que quiser e também deixa diponível para quem estiver de fora, no caso, quem carregou esse SWF. Saber quando essa animação acabou. Isso deixa seu código mais desacoplado...
Classe Main completa:
package
{
import fl.controls.Button;
import fl.controls.CheckBox;
import fl.controls.RadioButton;
import fl.controls.RadioButtonGroup;
import flash.display.MovieClip;
import flash.events.MouseEvent;
/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
public var botao:Button;
public var radioButtonGroup:RadioButtonGroup = new RadioButtonGroup('radioButtonGroup');
public var radioButtonAzul:RadioButton;
public var radioButtonVermelho:RadioButton;
public var forma1:MovieClip;
public var forma2:MovieClip;
public function Main()
{
addEventListener(MeuEvento.GIRAR_FORMA_AZUL, girarFormaAzul);
addEventListener(MeuEvento.GIRAR_FORMA_VERMELHA, girarFormaVermelha);
botao.addEventListener(MouseEvent.CLICK, onClickBotao);
}
private function onClickBotao(event:MouseEvent):void
{
switch(radioButtonGroup.selection.value)
{
case 'forma1':
dispatchEvent(new MeuEvento(MeuEvento.GIRAR_FORMA_AZUL));
break;
case 'forma2':
dispatchEvent(new MeuEvento(MeuEvento.GIRAR_FORMA_VERMELHA));
break;
}
}
private function girarFormaAzul(event:MeuEvento):void
{
forma1.rotation += 45;
}
private function girarFormaVermelha(event:MeuEvento):void
{
forma2.rotation -= 45;
}
}
}
Clique aqui para ver um exemplo ou abaixo para fazer o download dos arquivos:
domingo, 17 de maio de 2009
Loader do Stage e de aquivos externos (Preloader)
Olá, ví alguns posts na internet sobre esse assunto mas sempre estavam faltando algo. Nesse post vou tentar mostrar os dois principais carregadores em actionscript 3.0, o carregamento do STAGE e de um arquivo externo, no caso, uma imagem JPEG.
Esse post também é dedicado ao meu amigo que está com dificuldades nesse assunto.
Segue abaixo o código da classe Main:
package
{
import fl.controls.ProgressBarMode;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
private var externalLoader:Loader;
public function Main()
{
stop();
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
loaderInfo.addEventListener(Event.INIT, onStageLoaderInit);
loaderInfo.addEventListener(ProgressEvent.PROGRESS, onStageLoaderProgress);
loaderInfo.addEventListener(Event.COMPLETE, onStageLoaderComplete);
}
/**
* Iniciou o carregamento do STAGE
* @param event
*/
private function onStageLoaderInit(event:Event):void
{
event.target.removeEventListener(Event.INIT, onStageLoaderInit);
stageLoader.label.text = '0%';
}
/**
* Enquando está carregando o STAGE
* @param event
*/
private function onStageLoaderProgress(event:ProgressEvent):void
{
var pct:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
stageLoader.label.text = pct + '%';
}
/**
* O STAGE acabou de carregar
* @param event
*/
private function onStageLoaderComplete(event:Event):void
{
event.target.removeEventListener(Event.COMPLETE, onStageLoaderComplete);
addFrameScript(1, onFrame2);
gotoAndStop(2);
}
/**
* Linha do tempo no FRAME 2
*/
private function onFrame2():void
{
botao.label = 'carregar imagem externa';
botao.addEventListener(MouseEvent.CLICK, onButtonClick);
externalLoader = new Loader();
externalLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onExternalLoaderProgress);
externalLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onExternalLoaderComplete);
}
/**
* Quando o botão de 'carregar imagem externa' é clicaco
* É iniciado o Loader
* @param event
*/
private function onButtonClick(event:MouseEvent):void
{
botao.enabled = false;
barra.mode = ProgressBarMode.MANUAL;
externalLoader.load(new URLRequest('imagem_externa.jpg'));
}
/**
* Enquando carrega a imagem externa
* @param event
*/
private function onExternalLoaderProgress(event:ProgressEvent):void
{
barra.setProgress(event.bytesLoaded, event.bytesTotal);
}
/**
* A imagem externa está carregada
* @param event
*/
private function onExternalLoaderComplete(event:Event):void
{
event.target.removeEventListener(Event.COMPLETE, onExternalLoaderComplete);
externalLoader.width = 550;
externalLoader.height = 400;
addChild(externalLoader);
}
}
}
Clique aqui para ver um exemplo on-line ou no link abaixo para fazer o download dos arquivos:
Paint em Actionscript 3.0
Olá, fiz um protótipo bem simples de "Paint" em Actionscript 3.0. Nele você pode escolher a cor, o tamanho do pincél e limpar a tela.
Classe principal:
package
{
import fl.controls.Button;
import fl.controls.ColorPicker;
import fl.controls.Slider;
import fl.events.ColorPickerEvent;
import fl.events.SliderEvent;
import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.ui.Mouse;
/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
private var margin:Number = 10;
private var rounding:Number = 20;
private var border:Number = 5;
private var defaultWord:String = 'desenhe na área branca acima';
private var brushMinimum:Number = 1;
private var brushCurrent:Number = 10;
private var brushMaximum:Number = 100;
private var drawEnable:Boolean = false;
private var startDrawingEnable:Boolean = false;
private var container:MovieClip;
private var panel:MovieClip;
private var panelTitle:TextField;
private var infoLabel:TextField;
private var drawStage:MovieClip;
private var tools:MovieClip;
private var toolsTitle:TextField;
private var labelColorPicker:TextField;
private var colorPicker:ColorPicker;
private var currentColor:uint;
private var slider:Slider;
private var labelSlider:TextField;
private var currentBrushSize:Number;
private var brushCicle:MovieClip;
private var drawMask:MovieClip;
private var drawContainer:MovieClip;
private var lineDraw:MovieClip;
private var button:Button;
private var linesDraw:Array;
private var drawMouseInspector:MovieClip;
/**
* Construtora da Classe
* Adiciona os listeners necessários e aplica as configurações básicas
* Os eventos "MainEvents" são personalizados
*/
public function Main()
{
loaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
stage.align = 'TL';
//stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, onResizeStage);
addEventListener(MouseEvent.ROLL_OUT, onRollOutApplication);
addEventListener(MainEvents.CREATE_PANEL, onCreatePanelHandler);
addEventListener(MainEvents.CREATE_TOOLS, onCreateToolsHandler);
addEventListener(MainEvents.UPDATE_INFO_LABEL, onUpdateInfoLabelHandler);
addEventListener(MainEvents.UPDATE_BRUSH, onUpdateBrushHandler);
addEventListener(MainEvents.UPDATE_COMPLETE_BRUSH, onUpdateCompleBrushHandler);
addEventListener(MainEvents.UPDATE_COMPLETE_INFO_LABEL, onUpdateCompleInfoLabelHandler);
addEventListener(MainEvents.DRAW_START, onDrawStartHandler);
addEventListener(MainEvents.DRAWING, onDrawingHandler);
addEventListener(MainEvents.DRAW_COMPLETE, onDrawCompleteHandler);
}
/**
* Inicia a criação da aplicação quando a mesma foi totalmente carregada
* @param e
*/
private function onCompleteHandler(e:Event):void
{
dispatchEvent(new MainEvents(MainEvents.CREATE_PANEL));
}
/**
* Re-cria a aplicação quando as dimensões do STAGE são alteradas
* OBS.: Se houver desenho, ele será perdido
* @param e
*/
private function onResizeStage(e:Event):void
{
dispatchEvent(new MainEvents(MainEvents.CREATE_PANEL));
}
/**
* ANTI-BUG: Se o usuário rolar para fora da aplicação ele para de desenhar se estiver do modo DESENHO
* @param e
*/
private function onRollOutApplication(e:MouseEvent):void
{
dispatchEvent(new MainEvents(MainEvents.DRAW_COMPLETE));
}
/**
* Cria e configura os listeners dos elementos visuais, exceto os componentes das ferramentas
* @param e
*/
private function onCreatePanelHandler(e:MainEvents):void
{
if (container != null)
{
removeChild(container);
container = null;
}
container = new MovieClip();
addChild(container);
panel = new MovieClip();
panel.graphics.beginFill(0xcccccc);
panel.graphics.drawRoundRect(0, 0, stage.stageWidth - (margin * 2), stage.stageHeight - (margin * 2), rounding, rounding);
panel.graphics.endFill();
panel.x = panel.y = margin;
container.addChild(panel);
panelTitle = new TextField();
panelTitle.autoSize = 'left';
panelTitle.htmlText = 'Desenhando com o actionscript 3.0';
panelTitle.x = panelTitle.y = margin;
panel.addChild(panelTitle);
infoLabel = new TextField();
infoLabel.autoSize = 'left';
infoLabel.text = defaultWord;
infoLabel.x = margin;
infoLabel.y = panel.height - infoLabel.textHeight - margin;
panel.addChild(infoLabel);
drawStage = new MovieClip();
drawStage.graphics.lineStyle(border, 0x000000, .25);
drawStage.graphics.beginFill(0xffffff);
drawStage.graphics.drawRoundRect(0, 0, stage.stageWidth / 100 * 75, infoLabel.y - (panelTitle.y + panelTitle.textHeight + (margin * 2)), rounding, rounding);
drawStage.graphics.endFill();
drawStage.x = margin;
drawStage.y = panelTitle.y + panelTitle.textHeight + margin;
panel.addChild(drawStage);
drawContainer = new MovieClip();
panel.addChild(drawContainer);
drawMask = new MovieClip();
drawMask.graphics.beginFill(0x000000);
drawMask.graphics.drawRoundRect(0, 0, stage.stageWidth / 100 * 75, infoLabel.y - (panelTitle.y + panelTitle.textHeight + (margin * 2)), rounding, rounding);
drawMask.graphics.endFill();
drawMask.x = margin;
drawMask.y = panelTitle.y + panelTitle.textHeight + margin;
panel.addChild(drawMask);
drawContainer.mask = drawMask;
drawMouseInspector = new MovieClip();
drawMouseInspector.addEventListener(MouseEvent.ROLL_OVER, onRollOverMouseInspector);
drawMouseInspector.addEventListener(MouseEvent.ROLL_OUT, onRollOutMouseInspector);
drawMouseInspector.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownMouseInspector);
drawMouseInspector.addEventListener(MouseEvent.MOUSE_UP, onMouseUpMouseInspector);
drawMouseInspector.graphics.beginFill(0xff0000, 0);
drawMouseInspector.graphics.drawRoundRect(0, 0, stage.stageWidth / 100 * 75, infoLabel.y - (panelTitle.y + panelTitle.textHeight + (margin * 2)), rounding, rounding);
drawMouseInspector.graphics.endFill();
drawMouseInspector.x = margin;
drawMouseInspector.y = panelTitle.y + panelTitle.textHeight + margin;
panel.addChild(drawMouseInspector);
tools = new MovieClip();
tools.graphics.lineStyle(border, 0x000000, .25);
tools.graphics.beginFill(0xffffff);
tools.x = drawStage.x + drawStage.width + margin;
tools.y = drawStage.y;
toolsTitle = new TextField();
toolsTitle.autoSize = 'left';
toolsTitle.htmlText = 'Ferramentas';
toolsTitle.x = toolsTitle.y = margin;
tools.addChild(toolsTitle);
container.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownContainer);
container.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveContainer);
container.addEventListener(MouseEvent.MOUSE_UP, onMouseUpContainer);
dispatchEvent(new MainEvents(MainEvents.CREATE_TOOLS));
}
/**
* Crias e configuras os listeners dos componentes das ferramentas
* @param e
*/
private function onCreateToolsHandler(e:MainEvents):void
{
linesDraw = new Array();
labelColorPicker = new TextField();
labelColorPicker.autoSize = 'left';
labelColorPicker.text = 'Selecione a cor:';
labelColorPicker.x = margin;
labelColorPicker.y = toolsTitle.y + toolsTitle.textHeight + (margin * 3);
tools.addChild(labelColorPicker);
colorPicker = new ColorPicker();
colorPicker.addEventListener(ColorPickerEvent.CHANGE, onColorPickerChange);
colorPicker.x = labelColorPicker.x + labelColorPicker.textWidth + margin;
colorPicker.y = labelColorPicker.y;
tools.addChild(colorPicker);
currentColor = colorPicker.selectedColor;
labelSlider = new TextField();
labelSlider.autoSize = 'left';
labelSlider.text = 'Tamanho do pincel:';
labelSlider.x = margin;
labelSlider.y = colorPicker.y + colorPicker.height + (margin * 3);
tools.addChild(labelSlider);
slider = new Slider();
slider.addEventListener(SliderEvent.CHANGE, onSliderChange);
slider.minimum = brushMinimum;
slider.maximum = brushMaximum;
slider.x = margin * 2;
slider.y = labelSlider.y + labelSlider.textHeight + margin;
slider.value = brushCurrent;
tools.addChild(slider);
currentBrushSize = slider.value;
button = new Button();
button.addEventListener(MouseEvent.CLICK, onClickButtonCleanScreean);
button.label = 'limpar tela';
button.x = margin;
button.y = slider.y + slider.height + (margin * 3);
tools.addChild(button);
tools.graphics.drawRoundRect(0, 0, stage.stageWidth - drawStage.width - (margin * 5), button.y + button.height + margin, rounding, rounding);
tools.graphics.endFill();
panel.addChild(tools);
}
/**
* O usuário rolou para dentro da área de desenho
* @param e
*/
private function onRollOverMouseInspector(e:MouseEvent):void
{
var mc:MovieClip = e.target as MovieClip;
mc.addEventListener(Event.ENTER_FRAME, onEnterFrameDrawStage);
}
/**
* O usuário rolou para fora da área de desenho
* @param e
*/
private function onRollOutMouseInspector(e:MouseEvent):void
{
var mc:MovieClip = e.target as MovieClip;
mc.removeEventListener(Event.ENTER_FRAME, onEnterFrameDrawStage);
dispatchEvent(new MainEvents(MainEvents.UPDATE_COMPLETE_BRUSH));
dispatchEvent(new MainEvents(MainEvents.UPDATE_COMPLETE_INFO_LABEL));
}
/**
* O usuário começa a desenhar na área de desenho
* @param e
*/
private function onMouseDownMouseInspector(e:MouseEvent):void
{
startDrawingEnable = true;
}
/**
* O usuário parou de desenhar
* @param e
*/
private function onMouseUpMouseInspector(e:MouseEvent):void
{
startDrawingEnable = false;
}
/**
* O usuário soltou o botão esquerdo do mouse dentro da aplicação
* @param e
*/
private function onMouseUpContainer(e:MouseEvent):void
{
dispatchEvent(new MainEvents(MainEvents.DRAW_COMPLETE));
}
/**
* O usuário está movimentando o mouse dentro da aplicação
* @param e
*/
private function onMouseMoveContainer(e:MouseEvent):void
{
dispatchEvent(new MainEvents(MainEvents.DRAWING));
}
/**
* O usuário tenta desenhar dentro da aplicação
* A aplicação verifica se o usuário está tentando
* dentro da área de desenho
* @param e
*/
private function onMouseDownContainer(e:MouseEvent):void
{
if (!startDrawingEnable) return;
dispatchEvent(new MainEvents(MainEvents.DRAW_START));
}
/**
* Dispara enquanto o usuário está com o mouse dentro da área de desenho
* @param e
*/
private function onEnterFrameDrawStage(e:Event):void
{
dispatchEvent(new MainEvents(MainEvents.UPDATE_INFO_LABEL));
dispatchEvent(new MainEvents(MainEvents.UPDATE_BRUSH));
}
/**
* Posiciona o ponteiro de desenho na mesma posição do mouse do usuário
* enquanto o mesmo se encontra na área de desenho
* @param e
*/
private function onUpdateBrushHandler(e:MainEvents):void
{
if (infoLabel == null) return;
if (brushCicle != null) drawContainer.removeChild(brushCicle);
Mouse.hide();
brushCicle = new MovieClip();
brushCicle.graphics.lineStyle(border, 0x000000, .5);
brushCicle.graphics.beginFill(currentColor);
brushCicle.graphics.drawCircle(drawContainer.mouseX, drawContainer.mouseY, currentBrushSize);
brushCicle.graphics.endFill();
drawContainer.addChild(brushCicle);
}
/**
* Atualiza o LOG de posição cartesiana do ponteiro do mouse na área de desenho
* enquanto o mesmo se encontra na área de desenho
* @param e
*/
private function onUpdateInfoLabelHandler(e:MainEvents):void
{
if (infoLabel == null) return;
infoLabel.text = 'x: ' + drawStage.mouseX + ' - y: ' + drawStage.mouseY;
}
/**
* Seta a mensagem padrão quando o usuário não está com o
* ponteiro do mouse sobre a área de desenho
* @param e
*/
private function onUpdateCompleInfoLabelHandler(e:MainEvents):void
{
infoLabel.text = defaultWord;
}
/**
* Quando o ponteiro do mouse sai da área de desenho, o ponteiro de desenho some
* e da lugar novamente ao ponteiro do mouse
* @param e
*/
private function onUpdateCompleBrushHandler(e:MainEvents):void
{
if (brushCicle != null)
{
drawContainer.removeChild(brushCicle);
brushCicle = null;
}
Mouse.show();
}
/**
* Fecha a linha desenhada pelo usuário e deixa a variável preparada para uma nova
* @param e
*/
private function onDrawCompleteHandler(e:MainEvents):void
{
drawEnable = false;
if (lineDraw == null) return;
lineDraw.graphics.endFill();
lineDraw = null;
}
/**
* Desenha as linhas referente ao ponteiro do mouse
* @param e
*/
private function onDrawingHandler(e:MainEvents):void
{
if (!drawEnable) return;
lineDraw.graphics.lineTo(drawContainer.mouseX, drawContainer.mouseY);
}
/**
* Cria um ponto caso o usuário somente queira pontilhar
* e inicia a nova linha
* @param e
*/
private function onDrawStartHandler(e:MainEvents):void
{
var dot:MovieClip = new MovieClip();
dot.graphics.beginFill(currentColor);
dot.graphics.drawCircle(drawContainer.mouseX, drawContainer.mouseY, currentBrushSize);
linesDraw.push(drawContainer.addChild(dot));
lineDraw = new MovieClip();
lineDraw.graphics.moveTo(drawContainer.mouseX, drawContainer.mouseY);
lineDraw.graphics.lineStyle(currentBrushSize * 2, currentColor);
linesDraw.push(drawContainer.addChild(lineDraw));
drawEnable = true;
}
/**
* Guarda a cor escolhida
* @param e
*/
private function onColorPickerChange(e:ColorPickerEvent):void
{
var cp:ColorPicker = e.target as ColorPicker;
currentColor = cp.selectedColor;
}
/**
* Guarda o tamanho do pincel escolhido
* @param e
*/
private function onSliderChange(e:SliderEvent):void
{
var sld:Slider = e.target as Slider;
currentBrushSize = sld.value;
}
/**
* Limpa os desenho feitos
* @param e
*/
private function onClickButtonCleanScreean(e:MouseEvent):void
{
for (var i:int = 0; i < linesDraw.length; i++)
{
var mc:MovieClip = linesDraw[i] as MovieClip;
drawContainer.removeChild(mc);
}
linesDraw = new Array();
}
}
}
Classe de eventos:
package
{
import flash.events.Event;
/**
* ...
* @author www.idemax.net
*/
public class MainEvents extends Event
{
public static const CREATE_PANEL:String = 'createPanel';
public static const CREATE_TOOLS:String = 'createTools';
public static const UPDATE_INFO_LABEL:String = 'updateInfoLabel';
public static const UPDATE_BRUSH:String = 'updateBrush';
public static const UPDATE_COMPLETE_INFO_LABEL:String = 'updateCompleteInfoLabel';
public static const UPDATE_COMPLETE_BRUSH:String = 'updateCompleteBrush';
public static const DRAW_START:String = 'drawStart';
public static const DRAWING:String = 'drawing';
public static const DRAW_COMPLETE:String = 'drawComplete';
public function MainEvents(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
Clique aqui para ver um exemplo on-line ou no link abaixo para fazer o download dos arquivos:
domingo, 5 de abril de 2009
Portal Pró-Amendoim
Participação: Estruturação de elementos e conteúdo com tabless, flash e javascript (Mootools).
Agência: Labclick
Link: www.proamendoim.com.br
terça-feira, 10 de fevereiro de 2009
Binding no Flash e no Flex
Olá, vou mostrar algumas diferenças do Flash para Flex.
Como primeiro exemplo, vou ligar dois TextFields, o que você digita no de cima, é copiado para o de baixo em tempo real.
No Flash:
package
{
import fl.controls.Label;
import fl.controls.TextInput;
import flash.display.Sprite;
import flash.events.Event;
public class Flash extends Sprite
{
private var textInput1:TextInput;
private var textInput2:TextInput;
private var labell:Label;
private var label2:Label;
public function Flash()
{
criaLabels();
criarTextInputs();
criaBindable();
}
private function criarTextInputs():void
{
textInput1 = new TextInput();
textInput2 = new TextInput();
textInput1.move(70, 10);
textInput2.move(70, 40);
addChild(textInput1);
addChild(textInput2);
}
private function criaLabels():void
{
labell = new Label();
label2 = new Label();
labell.move(10, 10);
label2.move(10, 40);
labell.text = "Campo 1:";
label2.text = "Campo 2:";
addChild(labell);
addChild(label2);
}
private function criaBindable():void
{
textInput1.addEventListener(Event.CHANGE, binding);
}
private function binding(e:Event):void
{
textInput2.text = textInput1.text;
}
}
}
No Flash tive que criar uma classe para meu SWF, usei o Sprite pois no Flex também não existe "timeline". Importei as classes necessárias para eu trabalhar com TextFields e Labels. Criei, configurei e adicionei no palco os componentes que queria usar.
Depois tive que fazer o "binding", criei um "listener" para ouvir quando o valor do campo de cima fosse alterado e um "callBack" para pegar o valor do campo de cima e atribuir ao de baixo.
Pronto, só isso... UFA!
Agora vamos ao Flex:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:TextInput id="campo1" x="79" y="10"/>
<mx:TextInput x="79" y="40" text="{campo1.text}"/>
<mx:Label x="10" y="12" text="Campo 1:"/>
<mx:Label x="10" y="42" text="Campo 2:"/>
</mx:Application>
Fiz tudo denovo, com excessão dos "imports" e que no Flash eu tive que arrastar os componetes na mão para a biblioteca. No Flex, por se tratar de um framework, ele já entende o que você está fazendo e importa os componentes e classes que serão necessários.
O "binding" são os "{" e "}", isso diz ao framework que quando o valor do "campo1" for atualizado, o valor do "campo2" será atualizado também.
Outra forma de fazer é programar actionscript 3 direto Flex, mas isso é assunto para outro post...
Download do arquivos:
quinta-feira, 29 de janeiro de 2009
quinta-feira, 18 de dezembro de 2008
segunda-feira, 15 de dezembro de 2008
Bebidas Ipiranga - Cartão Natal 2008
Assinar:
Postagens (Atom)