Actionscript/ AS 3.0/ Comunidade/ Dicas/ Eventos/ Flex

É amanhã o Flex Mania 2011, preparados?

promo_flexmania_blogpost

Mais uma edição do Flex Mania e esse ano colocamos para quebrar com a qualidade das palestras, temos várias surpresas para anunciar nessa edição. Já conferiu a agenda?

Não precisa correr, cadastrar ou qualquer coisa do tipo, é grátis, basta entrar com seu nome e sobrenome e já está dentro da sala para assistir os melhores profissionais da indústria.

Te vejo por lá.

Actionscript/ AIR Mobile/ AS 3.0/ Flex/ Flex 4/ Flex Mobile Framework/ Tablets

5 Webcasts para você criar aplicações para o Playbook da RIM

Quer criar aplicativos para o tablet da RIM?

Domina o Adobe AIR /Flex / Actionscript 3.0?

Então, você facilmente irá criar uma aplicação do zero usando o Framework Adobe AIR para a plataforma da RIM.

O Playbook é a grande aposta da RIM para o mundo dos tablets, e vem com força total, um dos recursos é que mais agrada é o fato da FULL WEB, sem quadradinho do lego dizendo que Flash Player não está disponível e claro, reprodução de video em FULL HD 1080p, processador rápido e por ai vai.

Assista aqui os 5 webcasts para você começar a detonar no Playbook

Actionscript/ AIR Mobile/ Android

Aplicativo mobile usando actionscript 3.0 puro

Tirei umas 1 hora entre um suspiro e outro, acabei gravando um screencast rápido de pouco menos de 15 minutos de como criar uma aplicação simples no Adobe AIR para dispositivos móveis.

Assista e deixe seu comentário.

O código fonte está aqui:

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.TouchEvent;
	import flash.text.TextField;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;

	[SWF(frameRate="24",height="762",width="480")]
	public class ScreenMobileDraw extends Sprite
	{
		public function ScreenMobileDraw()
		{
			super();
			Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;



			var txt:TextField = new TextField();
			txt.text = "Hello World";

			var h:Number = stage.stageHeight;
			var w:Number = stage.stageWidth;

			addChild(txt);
			txt.x = w/2 - txt.width/2;
			txt.y = h/2 - txt.height/2;

			this.addEventListener(TouchEvent.TOUCH_MOVE,desenhar);
		}
		private function desenhar(e:TouchEvent):void
		{

			var circulo:Sprite = new Sprite();
			addChild(circulo);
			circulo.graphics.beginFill(Math.random()*0xffffff,1);
			circulo.graphics.drawCircle(e.stageX,e.stageY,100*e.pressure);
			circulo.graphics.endFill();

			circulo.x = e.touchPointID[0].x;
			circulo.y =  e.touchPointID[0].y;

		}
	}
}
Actionscript/ AS 3.0/ Dicas/ Flex/ Flex 3 how to/ Flex 4

Dica: Criando um componente de relógio para seu Flex 2/3 e até 4

Dando aquela geral nos e-mails não respondidos para finalizar o ano sem pendências, acabei achando relíquias nos arquivos, 4 grandes leitores tinham a mesma dúvida em comum. “Preciso criar um relógio para meu aplicativo Flex,sem que consuma memória e que seja elegante”. Quarto com a mesma dúvida? É o mesmo que matar 4 coelhos em uma cajadada só, esperto! Esperto mais ainda é se eu escrever isso aqui e daqui algum tempo alguém, esperto também use o mecanismo de busca do site para achar essa dica.

A mágica do relógio é super simples:

Ingredientes:

DateFormatter
Event.ENTER_FRAME
Global.Date;

Componente Relógio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ?xml version="1.0" encoding="utf-8"?>
<mx :Label enterFrame="showClock(event)" creationComplete="df.formatString = 'JJ:NN:SS'" xmlns:mx="http://www.adobe.com/2006/mxml">
 
	</mx><mx :Script>
		< ![CDATA[
			import mx.formatters.DateFormatter;
 
 
				private var df:DateFormatter = new DateFormatter();
 
				private function showClock(e:Event):void
				{
						this.text =  df.format(new Date());
				}
		]]>
	</mx>

Só copiar para dentro de seu projeto Flex, de preferência para seu diretório de componentes, e usar assim em seu aplicativo.

1
2
3
4
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:blogtips="br.com.igorcosta.blogtips.*">
	<blogtips :Relogio/>
</mx>

Explicando: Nem tem muito o que explicar do exemplo, já que o grande formatter ai do tipo DateFormatter, foi o responsável em geral por sempre formatar uma nova Date() object toda vez que entrar um novo Frame, e como por padrão o Frame do Flex é 24fps, então ele roda bem suave.

Da próxima vez que você ver alguém precisando de um relógio, avisa a ele deste post. Até a próxima.

Actionscript/ Eventos/ Flex/ Sexta-Flex Talkshow

Gravação da palestra Explorando Away3D com Rob Bateman

Na última sexta-feira Rob Bateman nos presenteou com uma excelente palestra sobre seu framework Away3D.
Quem não pode assistir pode acessar pela URL abaixo, a gravação da mesma.

http://experts.na3.acrobat.com/p33518163/

Por algum motivo que não conseguimos descobrir Rob teve alguns problemas com o audio da máquina dele. Então se você ver algum audio cortado, pedimos desculpas.

Actionscript/ Actionscript 3.0 Server-side/ Labs/ Notícias/ Open-source/ RIA

Actionscript 3.0 rodando no servidor e não dentro do SWF

redrocket

Em mais de 10 anos de Flash, logo depois Flash Plataforma, nunca tinha visto algo igual a isso.

A idéia principal do produto é habilitar você desenvolvedor Actionscript, escrever o código de server-side apenas em actionscript e conectar-se ou exibir o que seja para o seu aplicativo que fica dentro do SWF.

Ainda é esta em fase de teste e não tem nada disponível para download ou ser lido. Surge a idéia. Se você usar o botão direito do mouse e escolher ver código fonte. Fica claro que realmente foi usado um gerador redRocket.

Com toda certeza é uma grande evolução da plataforma Flash em anos de vida. E agrega valor não só ao Flash Player, mais à profissão de desenvolvedor da plataforma Flash.

Actionscript/ Dicas/ Flash Player/ Flex

Dica: Exibindo o consumo de memória do Flash Player em sua aplicação Flex

Duvida vinda por e-mail, bastante desaconselhado já que demoramos muito para responder os e-mails. Como essa dúvida era legal e única, eis aqui uma solução.

Quero exibir a quantidade de memória que minha aplicação Flex está consumindo no momento da execução. Bom dificilmente você vai saber quanto ela está consumindo se você estiver com algum site aberto ou até mesmo MSN Live que use o Flash Player. Já que para ler o consumo de memória mesmo é necessário estar apenas a aplicação rodando. Uma vez que a quantidade de memória acumulativa sendo consumida é medida pelo Flash player em geral e não apenas da aplicação. Se for nessas circunstâncias você pode exibir o consumo de memória para o usuário final. Caso contrário aconselho usar os recursos do Flex Builder como Profiler para tal.

Então como exibir?

Para facilitar eu criei uma classe utilitária chamada MemoriaUtil.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package
{
	import flash.system.System;
 
	public class MemoriaUtil
	{
		public function MemoriaUtil()
		{
		}
		public static function uso():String{
 
			 var memoria:String = Number(System.totalMemory/1024/1024).toFixed(2)+'MB';
 
			 return memoria;
		}
	}
}

E uso no Flex assim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< ?xml version="1.0" encoding="utf-8"?>
<application xmlns:"http://www.adobe.com/2006/mxml" layout="absolute">
 
	<script>
		< ![CDATA[
 
 
				public function testarMemoria():void{
 
						memoriatxt.text = 'Uso atual do seu Flash Player é de: '+MemoriaUtil.uso();
				}
		]]>
	</script>
		<label enterFrame="testarMemoria()" fontSize="20" x="100" y="100" id="memoriatxt"/>
</application>
Actionscript/ AS 3.0/ Dicas/ Flash/ Flash CS 3/ Flash CS4/ Flex

Suavizar imagem no Flex/Flash

Tivemos uma surpresa hoje pela manhã, chegaram 8 e-mails perguntando a mesma coisa, como deixar a imagem mais suave quando o container ou moviclip que será despejada é menor.

O que acontece é que enquanto o Bitmap não estive preenchido ou melhor completo ao processo de carregar a imagem, o Bitmap em sí fica null, não é somente no Flex mais também no Flash.

Para solucionar o problema no Flash, aconselho ler isso aqui no blog do GSkinner(inglês).

Para o Flex, é fácil, adicione no evento complete=”” ao campo de Imagem.

	

Feito isso você pode aliviar os pixels mal posicionados na tela, Essa opção mudou muito no Flash Player 10, ficando bem melhor o resultado do que no Flash Player 9.

Existem outros links de referências que valem o click:
http://www.kevin-fitzpatrick.net/blog/?p=10

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>
Actionscript/ Actionscript Frameworks/ AS 3.0/ Flash Componentes/ Flash CS 3/ Flash CS4

Criando um player de MP3 com Flash CS4 e actionscript 3.0

O exemplo abaixo, mostra como criar um player de música em actionscript 3.0 feito com alguns componentes básicos do Flash CS4, aquiles que vem por padrão no Flash CS3 e Flash CS4.
O projeto foi feito usando o Flex Builder, então procure nos arquevos do site como usar os componentes do Flash no Flex Builder.

Na atual versão do actionscript 3.0 é bem complicado usar a classe de som, para se ter uma idéia, foi necessário usar as classes Sound, SoundChannel,SoundTransform, só para dar o play e controlar o volume.
Em fim, segue abaixo o exemplo:

playermp3

Código:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
package {
	import fl.controls.Button;
	import fl.controls.Slider;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.media.Sound;
	import flash.media.SoundTransform;
	import flash.media.SoundChannel;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import fl.events.SliderEvent;
	import fl.controls.Label;
 
	[SWF(width="400",height="150",backgroundColor="0xF2F2F2",frameRate="25")]
	public class AS3Player extends Sprite
	{
		public var playButton:Button;
		public var stopButton:Button;
		public var volumeControl:Slider;
		public var urlSom:String = "mp3/seusom.mp3";
		public var MP3Request:URLRequest;
		private var musicaTransform:SoundTransform;
		private var musicaCanal:SoundChannel;
		private var musica:Sound;
		private var volLabel:Label;
 
 
		public function AS3Player()
		{
			super();
 
			MP3Request = new URLRequest(urlSom);
 
			musica = new Sound();
			musica.load(MP3Request);
			musicaCanal = new SoundChannel();
			musicaTransform = new SoundTransform(0.5,0);
 
 
 
			/**
			 * Montar os botões e Slider para controlar o som
			 *
			 * playButton - Toca o som;
			 * stopButton - Para o som;
			 * volumeControl - Aumenta e diminue o som;
			 * */
 
			playButton = new Button();
			playButton.label = "Tocar";
			playButton.x = 10;
			playButton.y = 20;
			addChild(playButton);
			playButton.addEventListener(MouseEvent.CLICK,SomAction);
 
			stopButton = new Button();
			stopButton.label = "Parar";
			stopButton.x = playButton.width + 20;
			stopButton.y = 20;
			addChild(stopButton);
			stopButton.addEventListener(MouseEvent.CLICK,SomAction);
 
			volumeControl = new Slider();
			volumeControl.direction = "horizontal"// ou vertical;
			volumeControl.minimum =0;
			volumeControl.maximum =1;
			volumeControl.doubleClickEnabled = true;
			volumeControl.tickInterval = .1;
			volumeControl.snapInterval = .1;
			volumeControl.value = musicaTransform.volume;
			volumeControl.liveDragging = true;
			volumeControl.x = 230;
			volumeControl.y = 20;
			addChild(volumeControl);
			volumeControl.addEventListener(SliderEvent.CHANGE,VolumeAction);
 
			volLabel = new Label();
			volLabel.text = "Volume";
			addChild(volLabel);
			volLabel.x = 250;
			volLabel.y = 40;
		}
 
		/**
		 * @public
		 * Controla o volume da música carregada;
		 * */
		public function VolumeAction(e:SliderEvent):void{
				musicaTransform.volume = volumeControl.value;
				musicaCanal.soundTransform = musicaTransform;
		}
 
		/**
		 * @public
		 * controla o som, play e stop;
		 * */
		public function SomAction(e:MouseEvent):void{
 
				var posicao:int = musicaCanal.position;
				if(playButton.label == "Tocar"){
					playButton.label = "Pausa";
					musicaCanal = musica.play(posicao);
				}else{
					musicaCanal.stop();
					playButton.label = "Tocar";
					musicaCanal.stop();
				}
		}
	}
}