Actionscript/ AS 3.0/ Flash/ Flex/ Flex 3 how to/ Flex 3 SDK/ Flex Builder 3/ frameworks/ Labs

3D na sua aplicação Flex usando apenas os novos recursos do Flash Player 10

O título é enorme, mais o conteúdo é de se animar. Eu já havia postado aqui sobre a novidade, só não tinha dito como fazer.Trabalhar com efeitos 3D no Flex é fácil, divertido e te tira uma boa parte do seu tempo pela manhã.

Existem algumas(1) bibliotecas(2) gratuitas(3) que faz esse serviço para a versão do Flash Player 9, embora ainda funcionando no Flash Player 10. Mais esse conteúdo é direcionado apenas para quem já tem o Flash Player instalado e quer começar a brincar ou quem sabe aplicar os efeitos de 3D em sua aplicação Flex existente já usando os novos recursos de 3D do Flash Player 10.

Requesitos:

– Ter o Flash Player 10 instalado
– Ter o Adobe Flex Builder 3.0.2+
– Ter tempo disponível de 30 minutos.

Antes de mais nada, para começar você vai precisar alterar algumas coisas do seu Flex Builder 3.0.2, embora ele já venha atualizado, existe uma pequena configuração necessária para rodar. Notadamente essa configuração não terá mais valor para o Flex Builder 4, ou melhor “gumbo”,já que por padrão ela vem feita.

Passos para configurar:

1. Vá até o Flex Builder e crie um novo projeto.
2. Depois do projeto criado, clique com o botão direito do mouse sobre o projeto e escolha a opção do menu “Properties”.
3. Vai abrir a tela de propriedades do projeto. Nela você deve escolher a opção “Flex Build Path”.
3d

4. Clique em Flex 3.2 para expandir e delete a biblioteca playerglobal.swc, essa biblioteca é para o Flash Player 9.
5.Clique no botão Add SWC e procure dentro dos arquevos de instalação de sua máquena onde está o seguinte caminho.

C:Program FilesAdobeFlex Builder 3 Plug-insdks3.2.0frameworkslibsplayer10playerglobal.swc

Esse novo playerglobal.swc vai garantir que as classes do Player padrão que no caso será o 10, terá todas as classes requesitadas.

Após isso, volte no menu lateral e escolha a opção Flex Compiler, e adicione ao compilador o seguinte parâmetro “-target-player=10”. Com isso garantimos que o compilador vai adicionar as classes dependentes para isso.

Feito isso, caso você queira assegurar que o swf gerado seja enxergado e possa refletir as mudanças para o instalador automático, mude a versão do Flash Player que está ai de 9.0.24 para 10.0.0.

Passo final. Clique OK e está salvo as alterações, agora é só contigo.

Entendendo um pouco do 3D do Flash Player 10.

Toda classe do DisplayObject, MovieClip e Sprite, tem novas propriedades cada uma dessas novas propriedades faz a rotação do objeto em um eixo X,Y e Z. As propriedades são: rotationX,rotationY, rotationZ,transformX,transformY,transformZ,scaleX,scaleY,scaleZ, dentre outras classes. Quem trabalha com Flash CS4 pode ver em detalhe como funciona o 3D do Flash Player (em português).

Para quem trabalha com Flash tem-se uma vantagem que é definir o ponto de registro x,y de um objeto quando se está criando, o que você pode fazer com que seu objeto seja rotacionado no eixo existente e assim fazer um efeito conciso.

Já no Flex não temos essa vantagem o que podemos fazer é imitar o Flash IDE nessa parte, colocando qualquer um de nossos componentes como container do componente afetado, complicado né?! Não, por exemplo veja abaixo que apliquei diretamente o efeito de 3D à um painel, observe que ele vai rotacionar no eixo Y de onde os pontos x,y foram registrados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
 
	<mx :Panel  id="pa" x="451" y="141" width="208" height="196" title="Painel Rotativo">
 
	</mx>
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Agora comportando-se como no Flash IDE, adiciono o painel à um container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="300" height="300" x="513.5" y="223">
	</mx><mx :Panel horizontalCenter="0" x="-150" y="-150" width="300" height="300" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Onde depois você pode ir manipulando de uma só vez as três propriedades definidas. Exemplo abaixo:

3d2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="675" height="509">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationX:transformaX.value,rotationY:transformaY.value,rotationZ:transformaZ.value,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="150" height="150" x="486" y="212">
	</mx><mx :Panel horizontalCenter="0" x="-75" y="-75" width="150" height="150" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="29" y="257" label="Rotacionar" click="rotate()"/>
	<mx :Form x="20" y="85">
		</mx><mx :FormItem label="rotationX">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaX" />
		</mx>
		<mx :FormItem label="rotationY">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaY"/>
		</mx>
		<mx :FormItem label="rotationZ">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaZ"/>
		</mx>
Flash Player/ MAX 2008 SF

Flash Player 10 e Adobe AIR em dispositivos móveis

Não demorou muito tempo para isso se tornar realidade, uma das grandes novidades aguardada pelo público no MAX 2008 é sem dúvida o Flash Player para dispositivos móveis.

A Adobe trabalhou em conjunto com outras software houses para dá suporte para as seguintes plataformas:

Google Android – Roda nativamente Flash Player 10
Symbian S60 5th – Roda nativamente Flash Player 10
Windows Mobile 6.1 – Roda nativamente Flash Player 10

Isso quer em resumo, dizer que agora você desenvolvedor Flex pode criar aplicações para dispositivos móveis.

Informações oficiais por aqui.

Flex/ Flex 3 Open-Source/ Flex MVC

Aplicações modulares, sim ou não?

Está em andamento um debate bastante maduro na lista Flex-Brasil, sobre o uso de aplicações Flex com o uso de Módulos, e como ela se iniciou com um post antigo meu, gostaria de corrigir algumas coisas e re-passar aqui o que falei na lista.

O post é ultrapassado, não vale mais a pena tê-lo como referência já que me referia ao Flex SDK 3.0.184 que foi o primeiro release do SDK e ao Flash Player 9.0.26 que por questões técnicas visto ao fato de usar Module o time do Flash Player atualizou para a versão 9.0.115 que já elimina o problema.

O fato é que o Flex 3.0.2 em seu último nightly build se mostrou capaz de aguentar e suportar bem o uso de Modulos em aplicações que faz uso da técnica.

O MASAPI não usa muito esse argumento ja que não sofreu muita alteração e torna-se desnecessário para esse uso, ja que a falha em sí era do SDK e da versão do Flash Player 9.0.26

Hoje a Adobe lançou o Flash Player 10, fiz todos os testes nele no que diz a respeito de novidades, e todas funcionaram perfeitamente, só alguns picos de memória no Flash Player para o Firefox mais no sentido de uso do 3D e pixel blender juntos.

Voltando ao assunto dos Modules; Eu tentarei escrever como usar de formar racional tomando todos esses cuidados tanto no Flash Player 9.0.115 quanto no novíssimo Flash Player 10.0

Existe algum tipo de receita para criar algo fenomenal em aplicações de grande porte?

Existe sim, o bom censo. Se você tem o seu time de usabilidade, um arqueteto de plantão, use e abuse deste profissional, porém na realidade brasileira é dificil ter ja que muitos aqui são desenvolvedores autonomos ou pertencem a pequenas empresas.

Para solucionar todos esses aspectos de modularizar uma aplicação é preciso estudar qual o principal objetivo de sua ferramenta, o que ela faz de comum e que tipos de classes são mais usadas na aplicação, tendo só isso você ja anda ai meio caminho para fazer a coisa certa.

A dica que foi citada acima sobre fazer o split geral da aplicação rodando-as separadamente é uma alternativa que funciona, porém não aconselho, devido ao fato de tirar o brilho do Flex que é justamente a usabilidade do cliente final, esse tipo de comportamento é tipico de quem veio do Java e criou ou cria muito applets, na atual conjuntura do Flex e Flash Player não é necessario esse tipo de comportamento.

Para facilitar melhor o que eu posso dar como conselho, eu separei uma lista de perguntas que você pode acrescentar a esse tópico, eis que são:

1. Minha aplicação é pequena, eu posso usar Modulos?

R: Não é necessário, ja que ela não depende muito dessa função, porém se ela for pequena e ser usada por até 1mil usuários diários, você precisa usar o Profile do Flex para tentar reduzir o tamanho máximo que puder, Usar Framework cache para eliminar o mal uso de sua banda e por final usar RSL, essa gama de soluções podem trazer um bom censo final à sua aplicação, tendo ela um funcionamento redondo e eliminando ai as arestas de reclamações pelo usuário final.

2. Minha aplicação é de médio porte, O que devo usar?

R: Quando se fala em tamanho de aplicação, tem gente que estufa o peito e diz, minha aplicação tem 200 telas, 500 formulários e faz n operações. Lembre-se que o número de telas não conta na hora de medir o tamanho da aplicação, mais sim o número de operações que essa aplicação se resolve. Por exemplo eu já vi em uma empresa que fomos fazer consultoria usarem 10 telas para fazer 3 operações,isso é uso desnecessário de telas. Sempre que for desenvolver uma app que ela seja de caráter de no mínimo umas 100 operações, ela ja tem esse sobrenome de “médio”, procure enxugar ao máximo o número de telas para resolver essas operações, quanto menos telas, e mais objetividade que elas apresentam, melhor é a experiência do usuário com a sua aplicação.

Procure usar os mesmos recursos da primeira pergunta, e adicione a receita Módulos, LinkReport para reduzir, e enxugue ao máximo o uso de telas, remova as desnecessárias. Com isso você ganha mais.

3. Tenho uma aplicação de médio porte que usa um número N de telas e Módulos, como posso administra-las melhor?

R: Começe a usar um framework MVC, ele será seu melhor amigo nessa situação, embora muita gente se esqueve ao usar MVC, trantando assim ao grosso modo de usar apenas o padrão do flex para desenvolver a aplicação. De fato funciona, mais se alguém da equepe mudar de emprego, ou ter morte, você terá dores fortes de cabeça ao tentar advinhar o código ninja que ele fez para você. É sempre bom você seguir padrões de convenção(http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions) junto com sua equepe, quando falo de equepe eu me refiro no mínimo até 2 pessoas. Procure adotar os novos padrões do Flex, assim é menos prejuízo de tempo. Use as técnicas aplicadas no 1 e 2, elas te ajudaram a decidir melhor, juntamente com um framework MVC.

4. Minha aplicação é de grande porte e missão crítica o que posso fazer para melhora-lá?

R: Toda aplicação seja ela pequena ou grande, deve-se preocupar com questões de segurança, você sabe que o SWF é de formato aberto, então qualquer um pode descompilar seu swf mesmo vindo do Flex. Então nunca coloque algo que vá comprometer sua aplicação final. Sempre pense da seguinte forma:

* Nunca use dados importantes ou tente manipula-los diretamente do lado cliente
* Use uma camada de layer profissional com AMF3, pode ser em Java,C++,PHP,ColdFusion
* Trafegue ao máximo dados de importância encriptando-os em casos de operações bancárias
* Use o protocolo rtmp.
* Use as dicas do 1,2,3 para sua aplicação em adição ao fato de um boa arquetetura
* Procure reduzir o tamanho final do SWF principal ou carrega-lo em cache.
* Grande parte da regra de negócio da sua aplicação é melhor ficar no lado servidor
* Use sempre MVC

Em fim, tem um mar de infinidade de informações que te ajudam à melhorar a maneira como você cria as suas aplicações, sempre tente melhora-las mas nunca tire o foco da ferramenta em sí que é funcionar.
As dicas acima são parte de um documento nosso, então são casos hipotéticos e em alguns casos não é nossa opinião final sobre uma determinada coisa, já que são n fatores que definem essas regras.

Sim, aplicações modulares são aplicáveis, dependendo de cada caso como mostrado acima.

Flash CS4/ Flash Player/ Notícias/ Web 2.0

Flash Player 10 disponível

É sem dúvida o melhor Flash Player já lançado em um período de 18 meses na Adobe, Tem muitos recursos, 3D, pixel bender, dynamic sound, etc. Tanto que de uma só vez eles lançaram ao mesmo
tempo, para Linux,Mac e Windows.

Veja aqui as novidades do Flash Player 10, as 10 melhores novidades:

3D effects(novo)

Agora você pode criar animações intuitivas, interfaces elaboradas usando todos os recursos de 3D no Flash Player 10, mesmo você sendo um novato no mundo 3D você consegue fazer animações avançadas, a ferramenta para criar esse recurso de 3D por padrão vem com o Flash CS4, porém você também pode usar esses recursos diretamente no Flex Builder com o novo Flex Component Kit.

Custom filters and effects (Novo)

Crie em alta performance,efeitos em tempo real iguais a filmes de Hollywood, O Pixel Bender, que é a mesma tecnologia por tras dos efeitos do Adobe After Effects, esses efeitos dinâmicos e interativos podem ser usados em conjunto com o After Effects, em suma, você pode criar tanto no Flash CS4 quanto no After Effects.

Advanced text support (Novo)

A Adode pegou todo seu aprendizado em manipulação de textos durante ai sua jornada com o PDF e incorporou dentro do Flash Player 10, agora você pode ter textos que tragam melhor qualidade de impressão, ganhar mais controle sobre o layout do texto, ja que você pode usar ligaturas do texto por exibição em colunas, colocar textos ao redor de imagens, textos bi-direcionais, verticais, etc. E as novidades que mais gostei do Flash Player 10 foi a possibilidade de usar device fonts com anti-aliase, rotacionar, estilizar da maneira que você gosta. Tanto quanto criar seus próprios componentes de texto, Resumo geral é uma das melhores coisas que colocaram no Flash Player.

Dynamic sound generation (Novo)

Depois de um grande movimento pelo site , a Adobe mostrou-se madura em ouvir os requesitos da comunidade que usa suas ferramentas. Com o novo recurso e nova API para som que podem lhe dar a opção de gerar músicas, novos formatos de audio como também criar em tempo de execução sons para jogos. Você pode por exemplo extrair dados de um arquevo de MP3 carregado, filtrar esses dados, mixar e gerar assim nova música, que foi baseado praticamente em bibliotecas C++, como C++ é fácil manipular audio agora você tem esse recurso direto do Flash Player e o melhor acessando isso via actionscript 3.0.

Melhorias no Drawing API

Quando se fala em melhorias no Draw API do Flash Player, você bate a curiosidade e vai ver de perto o código fonte da nova API para ver o que mudou. E como todo mundo que trabalha em programação de certo é curioso, não fui diferente. A nova API para Draw foi bastante melhorada, devido ao fato que o Flash Player 10 suportar 3D, como antigamente tinhamos apenas os eixos x,y; Passamos agora a ter o eixo z, e isso com toda certeza afeta a maneira como desenhar. Com a nova API, você consegue desenhar de forma mais fácil, sem ter que ficar desenhando linha por linha como é feito hoje, também facilmente adaptado no caso de ambientes 3D para rendenização de texturas e o melhor disso tudo é sem perder performance.

Melhorias no Hardware acceleration

Como tem 3D, composição de bitmaps, filtros e blend modes, isso requerer e muito da máquena do cliente, só que não necessariamente isso tem que ser uma experiência ruim para o usuário final, as melhorias são significativas e você pode até ver redução do uso de memória da máquena para quem já tem o Flash Player 10 e usando recursos altamente consumidores de memória como por exemplo video overlay.

Vector data type (Novo)

Melhor performance para criar arrays, melhor efieciencia para checar erros.

Dynamic Streaming (Novo)

Imagina fazer stream de seu video e ele por sí, adaptar-se as condições de rede do cliente, como velocidade por exemplo. E como é streaming dinâmico você também poderá acessar métricas do video igual ao que é feito hoje com o Google Analytics para sites por exemplo.

Speex audio codec (Novo)

Esse é um tipo de recurso que permite você fazer encode de voz direto no Flash Player e gravar um arquevo de mp3 local por exemplo, é baseado no Speex, um projeto open-source para voice encode.

Melhorias File upload and download APIs

É muito aguardado por muitos, agora com o Flash Player 10, você pode carregar arquevos locais e salvar esses arquevos na máquena local. É sem dúvida uma ótima forma de fazer upload e download pelo Flash Player sem precisar de server-side para isso.

Quer saber mais sobre outras novidades do Flash Player 10? Visite aqui o site.

Flash Player/ Web 2.0

Arquivos SWF passarão a ser indexados pelo Google e Yahoo

Finalmente a tão famigerada e aguardada solução pelos desenvolvedores RIA e SEO especialistas vem a tona.
A Adobe juntou-se ao Google e Yahoo para criar logo agora na próxima versão do Flash Player 10 arquevos swf totalmente compatíveis com spiders do Google e Yahoo.

O que isso representa para os desenvolvedores e mais ainda para as empresas? Um maior surgimento de aplicações RIA baseadas na platforma interativa que o Flash Player proporciona e também futuros e-commerces dominados ai pela malha do ajax.

Hoje-se é possível deixar o swf compatível aos mecanismos de busca, alguns work-arrounds, como SWFObject, SWFAddress, Deeplink do Flex ajudam, mais perante ao olhar do spiders, robots indexadores o conteúdo desses arquevos são incógnita.

Saiba mais aqui.