Tag Archives: actionscript
Gerador de Árvores em AS3 / Tree Generator AS3 Code
Posted on 12. Fev, 2011 by João Gonçalves.
Ultimamente tenho estado a ler um livro que considero um dos melhores livros de Design e programação de 2010, FORM+CODE, de Casey Reas , Chandler Williams, e LUST.
Se até à bem pouco tempo o “Código” era um domínio exclusivo de programadores, cada vez mais Designers, artistas, etc, iniciaram o seu percurso no dominio das linguagens de programação, criando novas frameworks de programação viradas para a Arte e o Design, como são o caso do Processing, criado por Casey Reas e Ben Fry, Open Frameworks, desenvolvido por Zach Lieberman, Theodore Watson, and Arturo Castro, ou até a framework HYPE de Joshua Davis e Branden Hall, para não falar em muitas outras.
Este livro mostra claramente como tirar partido destas ferramentas para criar trabalhos artisiticos nas várias áreas do Design e Visualização de Dados, gaming, Inteligência artificial, etc…, utilizando qualquer linguagem de programação.
Como bem sabem pelo menos aqueles que me conhecem melhor, o meu mundo é quase todo ele ocupado pela dedicação à plataforma FLASH e mais concretamente ao Actionscript, nos últimos tempos e fruto do Mestrado em Multimédia que estou a frequentar, tenho me interessado sobremaneira a visualização de dados (tema do meu projecto de Mestrado), e ao ler o livro peguei nos exemplos de Processing e resolvi brincar traduzindo alguns deles em Actionscript , pelo que deixo aqui um exemplo de como é fácil criar formas visuais usando algoritmos de repetição com recursividade.
Exemplo:
E o Código em As3 para os mais curiosos:
| actionscript3 | | copy code | | ? |
| 001 | package |
| 002 | {
|
| 003 | import flash.display.Sprite; |
| 004 | import flash.events.Event; |
| 005 | import flash.events.MouseEvent; |
| 006 | import flash.text.TextField; |
| 007 | import flash.text.TextFieldAutoSize; |
| 008 | |
| 009 | /** |
| 010 | * ... |
| 011 | * @author Joao Gonçalves |
| 012 | * http://joaogoncalves.net |
| 013 | * joao@joaogoncalves.net |
| 014 | */ |
| 015 | |
| 016 | [SWF(width='900', height='600', backgroundColor='#ffffff', framerate=1)] |
| 017 | public class Main extends Sprite |
| 018 | {
|
| 019 | |
| 020 | private var dotSize:Number = 9; |
| 021 | private var angleOffsetA:Number; |
| 022 | private var angleOffsetB:Number; |
| 023 | |
| 024 | private var instructions:TextField; |
| 025 | |
| 026 | |
| 027 | public function Main():void |
| 028 | {
|
| 029 | if (stage) init(); |
| 030 | else addEventListener(Event.ADDED_TO_STAGE, init); |
| 031 | } |
| 032 | |
| 033 | private function init(e:Event = null):void |
| 034 | {
|
| 035 | removeEventListener(Event.ADDED_TO_STAGE, init); |
| 036 | // entry point |
| 037 | |
| 038 | instructions = new TextField(); |
| 039 | instructions.text = "Click to generate a Tree, Double-Click to clear the stage."; |
| 040 | instructions.autoSize = TextFieldAutoSize.LEFT; |
| 041 | addChild(instructions); |
| 042 | |
| 043 | angleOffsetA = degToRad(1.5); |
| 044 | angleOffsetB = degToRad(50); |
| 045 | |
| 046 | stage.doubleClickEnabled = true; |
| 047 | stage.addEventListener(MouseEvent.CLICK, generateThree); |
| 048 | stage.addEventListener(MouseEvent.DOUBLE_CLICK, clearStage); |
| 049 | |
| 050 | } |
| 051 | |
| 052 | private function clearStage(e:MouseEvent):void |
| 053 | {
|
| 054 | this.graphics.clear(); |
| 055 | } |
| 056 | |
| 057 | private function generateThree(e:MouseEvent):void |
| 058 | {
|
| 059 | //this.graphics.beginFill(Math.random()*0xffffff); |
| 060 | seed1(dotSize, degToRad(270), mouseX, mouseY); |
| 061 | } |
| 062 | |
| 063 | private function seed1(dotSize:Number, angle:Number, xpos:Number, ypos:Number):void |
| 064 | {
|
| 065 | |
| 066 | this.graphics.beginFill(Math.random()*0x0000bb); |
| 067 | if (dotSize>1) |
| 068 | {
|
| 069 | // create random number between 0 and 1 |
| 070 | var r:Number = Math.random(); |
| 071 | |
| 072 | // 98% chances this will happen |
| 073 | if (r> 0.02) |
| 074 | {
|
| 075 | this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize); |
| 076 | var newX:Number = xpos + Math.cos(angle) * dotSize; |
| 077 | var newY:Number = ypos + Math.sin(angle) * dotSize; |
| 078 | seed1(dotSize * 0.99, angle- angleOffsetA, newX, newY); |
| 079 | } |
| 080 | // 2% chance this will happen |
| 081 | else |
| 082 | {
|
| 083 | this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize); |
| 084 | var newX:Number = xpos + Math.cos(angle); |
| 085 | var newY:Number = ypos + Math.sin(angle); |
| 086 | seed2(dotSize * 0.99, angle + angleOffsetA, newX, newY); |
| 087 | seed1(dotSize * 0.60, angle + angleOffsetB, newX, newY); |
| 088 | seed2(dotSize * 0.50, angle-angleOffsetB, newX, newY); |
| 089 | |
| 090 | } |
| 091 | } |
| 092 | } |
| 093 | |
| 094 | private function seed2(dotSize:Number, angle:Number, xpos:Number, ypos:Number):void |
| 095 | {
|
| 096 | if (dotSize>1) |
| 097 | {
|
| 098 | // create random number between 0 and 1 |
| 099 | var r:Number = Math.random(); |
| 100 | |
| 101 | // 95% chances this will happen |
| 102 | if (r> 0.05) |
| 103 | {
|
| 104 | this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize); |
| 105 | var newX:Number = xpos + Math.cos(angle) * dotSize; |
| 106 | var newY:Number = ypos + Math.sin(angle) * dotSize; |
| 107 | seed2(dotSize * 0.99, angle+ angleOffsetA, newX, newY); |
| 108 | } |
| 109 | // 5% chance this will happen |
| 110 | else |
| 111 | {
|
| 112 | this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize); |
| 113 | var newX:Number = xpos + Math.cos(angle); |
| 114 | var newY:Number = ypos + Math.sin(angle); |
| 115 | seed1(dotSize * 0.99, angle + angleOffsetA, newX, newY); |
| 116 | seed2(dotSize * 0.60, angle + angleOffsetB, newX, newY); |
| 117 | seed1(dotSize * 0.50, angle-angleOffsetB, newX, newY); |
| 118 | |
| 119 | } |
| 120 | } |
| 121 | } |
| 122 | |
| 123 | |
| 124 | private function degToRad(deg:Number):Number |
| 125 | {
|
| 126 | return deg * (Math.PI / 180); |
| 127 | } |
| 128 | |
| 129 | } |
| 130 | |
| 131 | } |
Continue Reading
somaUI – MVC Framework para FLASH
Posted on 27. Ago, 2009 by João Gonçalves.
Cada vez mais começam a aparecer projectos open-source no âmbito de desenvolvimento Web e RIA´s, nos ultimos dias foi lançada a versão beta da Framework somaUI, criada por Romuald Quantin.
a Soma Framework é uma framework MVC de Actionscript 3.0 essencialmente virada para o desenvolvimento de sites em Flash , além de que integra a construção do site com recurso a XML e técnicas recentes de SWFAdrress e DeepLinking, de forma a tornar uma site usável e pesquisável pelos vários motores de busca.
A Framework vem acompanhada de uma Interface Gráfica onde é facilmente criado todo a estrutura do site incluindo a integração de conteúdos (imagens, textos, vídeos, etc…), cria automaticamente toda a estrutura de ficheiros do projecto criando inclusive os ficheiros de html, css´s, xml, etc…, sendo posteriormente podemos acrescentar facilmente a estrutura de classes criadas (uma por página), quaisquer elementos que queiramos inserir via actionscript.
para mais informações vejam o site da Framework : Soma Framework, podem ainda ver um video demonstrativo da framework :
Esta framework vem ao encontro de outras já existentes e com maior projecção como é o exemplo da GAIA Framework, da qual ja falei (http://www.joaogoncalves.net/blog/2008/06/23/gaia-framework-para-flash/) , e aproveito aqui também para dar realce a uma framework desenvolvida por uma minha ex-aluna a Cátia Rodrigues, que como projecto final do curso técnico profissional de Multimédia desenvolveu a framework LUNULATA com o mesmo propósito e que lhe valeu uma das melhores notas de sempre do curso assim como um lugar de destaque no meu Blog Roll de alunos brilhantes , vale a pena tambem analisar.
Esperemos que apareçam mais.
Continue Reading
Passar VO(Value Objects) com recurso a uma Class Event
Posted on 03. Abr, 2009 by João Gonçalves.
Durante as minhas aulas de Actionscript em ambiente de FLASH, por norma verifico que os formandos têm alguma dificuldade em utilizar algumas das “best practices” mais comuns nomeadamente em relação á criação de Eventos personalizados, no entanto, e assim que conseguem ultrapassar essa barreira, a primeira questão que me colocam é sempre a mesma:
“então e se eu quiser enviar dados pelo meu Event Object, por forma a ……”
Eis que surge então a necessidade de passar o conceito de VO (Value Object) e criação de Classes de Eventos personalizadas.
Como tive hoje que criar alguns ficheiros para exemplificação do Conceito de Classe de Evento Personalizada para envio de dados de uma instância para outra, resolvi partilhar convosco neste Blog os mesmos Ficheiros na esperança que venha ainda a ser útil para alguns dos meus leitores, ou ainda servir de ponto de consulta e esclarecimento de dúvidas para aqueles que durante as aulas não perceberam o conceito. Sendo Assim vamos começar por analisar o pequeno problema que se coloca, e que servirá de “Case Study” para a criação de uma Class de Evento personalizada e do conceito de VO.
PROBLEMA:
- Temos um form onde a pessoa regista o seu nome, idade e situação laboral, e ao clicar num botão registar, pretende-se acrescentar a uma lista (Texto) os dados da pessoa.
RESOLUÇÃO:
- Criar uma Class PessoaVO, que irá servir para armazenar os dados da pessoa que forem inseridos no Form
- Criar uma Class PessoaEvent, que será uma subclass da Class Event, e que servirá para enviar um “Event Object” que incluirá uma instância da Class PessoaVO, com os dados anteriormente adquiridos no Form.
- A Aplicação principal estará á “escuta” da ocorrência do Evento PessoaEvent, e quando este for detectado, receberá pelo “Event Object” uma instância de PessoaVO com os dados da pessoa.
- A Aplicação após receber os dados da pessoa insere e actualiza a TextArea com os registos das pessoas.
Mãos á obra, vamos começar por criar um ficheiro em FLASH, com um form com duas instâncias de TextInputs, para o nome e idade, uma instância de CheckBox para o estado laboral e um botão de registo, ao lado criar uma Textarea para ir acrescentando os Registos, ou seja, qualquer coisa deste género(desculpem mas a designer estava de folga, lol):
Passo seguinte vamos criar a Class PessoaVO, que será uma classe Value Object, e por esse motivo terá somente propriedades, propriedades estas que servirão para guardar os dados do form de registo:
actionscript | copy code | ? 01
02 package {
03
04 public class PessoaVO {
05
06 public var nome:String;
07 public var idade:int;
08 public var empregado:Boolean;
09
10 }
11
12 }
13
actionscript | copy code | ? 01
02 package {
03 import flash.events.Event;
04 import PessoaVO;
05
06 public class PessoaEvent extends Event {
07
08 public static const PESSOA:String = "pessoa";
09 public var dadosPessoa:PessoaVO;
10
11 public function PessoaEvent(type:String, voPessoa:PessoaVO) {
12 super(type);
13 this.dadosPessoa = voPessoa;
14
15 }
16
17 public override function clone():Event {
18 return new PessoaEvent(type, dadosPessoa);
19 }
20 }
21 }
22
23
Esta Class começa por fazer o “extends” da Class Event, na linha 9, criamos uma constante do tipo de String que irá identificar o “type” do nosso evento para usar depois como por exemplo usamos o CLICK num MouseEvent, na linha 10 criamos uma instância de PessoaVO, para guardar os dados do form e posteriormente enviar os mesmos pela instância de evento criada. O constructor da Class é bastante simples e terá como parâmetros o “tipo ” de evento criado, e a instância, neste caso, de PessoaVO. na linha seguinte (13), chamamos o constructor da Class “Pai” para passar o tipo de evento criado, aqui não se passa qualquer parâmetro extra pois a Class “Event” não contêm parâmetros adicionais. Na linha 14 atribuímos á instância da class “dadosPessoa” os valores recebidos no parâmetro voPessoaConstructor da Class. Por fim é necessário efectuar o overrride do método clone da class Event, de forma a que esta instância de evento tenha um comportamentos normal de um evento como o “Bubbling” por exemplo, nesta definição retornamos o event criando a instância do novo evento e passando os dados armazenados na instância da PessoaVO. do
Por fim criamos a Document Class do nosso ficheiro:
actionscript | copy code | ? 01
02 package {
03 import flash.display.MovieClip;
04 import flash.events.MouseEvent;
05
06 public class MainEventPessoa extends MovieClip {
07
08 public var pessoa:PessoaVO;
09
10 public function MainEventPessoa() {
11 pessoa = new PessoaVO;
12
13 registarBtn.addEventListener(MouseEvent.CLICK, registar);
14 this.addEventListener(PessoaEvent.PESSOA, receberPessoa);
15
16 }
17
18 private function receberPessoa(e:PessoaEvent):void {
19 registosTa.appendText("\n------------------\n" +
20 "Nome: " + String(e.dadosPessoa.nome) + "\n" +
21 "Idade: " + String(e.dadosPessoa.idade) + "\n" +
22 "Nome: " + String(e.dadosPessoa.empregado) + "\n");
23 }
24
25 private function registar(e:MouseEvent):void {
26 pessoa.nome = nomeTi.text;
27 pessoa.idade = int(idadeTi.text);
28 pessoa.empregado = empregadoCb.selected;
29
30 dispatchEvent(new PessoaEvent("pessoa", pessoa));
31 }
32
33 }
34
35 }
36
Nesta Document Class, começamos por criar uma instância de PessoaVO, onde iremos atribuir os valores dos dados que irão ser preenchidos no FORM, na linha 13, definimos o evento click no botão registar que irá inicializar toda a sequência do script. o Listener do clicar em Registar vai associar os dados dos campos do form ás propriedades da instância de PEssoaVO (pessoa) linhas 26 a 28, na linha 30 “criamos” um evento do tipo PessoaEvent, onde iremos incluir nos parâmetros do constructor, o nosso PessoaVO com o nome “pessoa”. Na linha 14 a nossa Aplicação recebe o evento “PessoaEvent.PESSOA“, e chama o listener das linhas 18 a 22 que irá acrescentar(para os mais esquecidos deverão sempre usar o método appendText da Class TextField, e não o operador ” += ” para concatenar strings) á TextArea os dados que recebeu no “Evento Object” e que acedemos na propriedade “dadosPessoa” deste.
espero que este Post seja esclarecedor para muitos de vós, não hesitem em colocar questões ou sugestões para explicações futuras, deixo aqui tb um ficheiro zip com os ficheiros exemplificando o mini-tutorial.
Continue Reading
Realidade Aumentada em FLASH
Posted on 04. Fev, 2009 by João Gonçalves.
Quando falamos em realidade aumentada, referimo-nos a um sistema que combina elementos virtuais com elementos reais, criando interactividade entre ambos e com processamento em tempo real.
Actualmente o Japonês SAQOOSHA, desenvolveu uma Library em AS3, denominada por FLARToolKit, desenvolvida a partir de uma outra library de realidade aumentada desenvolvida em C, ARToolKit, oferecendo deste modo a capacidade aos developers de FLASH de criarem aplicações no âmbito da Realidade Aumentada, e que poderão ser aproveitadas nas mais diversas áreas, desde publicidade, engenharia, entretenimento, etc…
Sem dúvida uma grande mais valia, principalmente quando aliada as novas capacidades 3D do Flash Player 10, ou a outras frameworks como Papervision 3D.
Deixo aqui um vídeo demonstrativo, destas capacidades e daquilo que se poderá fazer no futuro em Realidade Aumentada, quanto a mim, espero que o curso que irei frequentar de Papervision 3D me comece a dar outras perspectivas de desenvolvimento de aplicações na Plataforma FLASH.




