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

RIA com Ajax

RIA com Ajax no Ajaxianos

Ajax é uma solução concorrente ao que o Flex faz, embora um pouco desorganizada para alguns devido ao número infinito de frameworks para criar interfaces e efeitos.

O blog dos nossos amigos do Ajaxianos está fazendo jus a palavra Ajax, eles estão com um conteúdo ótimo blog e sempre estão atualizando com vários tutoriais e dicas importantes para quem adora o mundo Ajax.

Eu particularmente venho usado no novo site que estamos fazendo para empresa, nosso preferido foi uma combinação de JQuery,MooTools.

Visitem o blog do Ajaxianos.

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 CS4/ Flex Builder 3

Como usar componentes padrão do Flash CS4 no Flex Builder 3

Últimamente eu venho fazendo alguns experimentos para aperfeiçoar as habilidades perdidas no Flash, já fazia tempo desde 2004 que não abria o Flash nem para fazer banner. Então esse ano voltei para ver como andava o Flash IDE suas novidades, tem muitos recursos que vai ser dificil acompanhar todos em pouco tempo.
Embora o Flash tenha ganhado tantos recursos em sua ferramenta de edição, o editor de actionscript 3.0 peca, é fraco, obsoleto e não tem todas as funções que um bom e básico editor de programação tem.
Isso deixa alguns que trabalham ainda com Flash tristes e com poucas opções. Felizmente em minhas andanças eu vi que muitos optavam por usar o Flex Builder como seu predileto editor de Actionscript.

O editor de actionscript é muito bom para quem trabalhava com Actionscript dentro do Flash IDE, é algo como de água para o vinho. Existe outro editor que também tem que é o FDT que é o campeão em edição de actionscript 3.0. Sem dúvidas é o melhor. Em fim, voltando ao nosso Flex Builder.
A única tarefa para fazer com que o Flex Builer edite seu actionscript não tem mistério, já que cada projeto feito no Flex Builder não passa de pastas administradas virtualmente, o Flex Builder só organiza.

Configurando o Flex Builder

1. Faça o download do Flex Builder stand alone ou plug-in para sua máquena.
2. Instale-o.
3. Crie um novo Actionscript 3.0 Project.
4. Crie um novo diretório chamado libs na raiz do projeto e não na pasta ‘src’, vamos fazer similar o que o Flex Builder faz para projetos Flex.
5. Após criado, clique com o botão direito do mouse sobre o projeto e vá até a opção ‘properties’.
6. Ao lado esquerdo do menu em lista, escolha a opção ‘Actionscript Build Path’.
7. Clique na aba com o nome ‘Library Path’ e clique no botão add SWC Folder.
8. Digite o nome da pasta, libs. Já que vai conter o diretório do mesmo projeto.

Pronto, com isso concluído, o seu projeto vai aceitar arquevos .SWC diretamente na pasta libs e irá refletir para todo seu projeto. Pulamos agora para o Flash CS4, vamos criar um swc por lá.

Configurando o Flash CS4
1. Faça o download do Flash CS4 Professional
2. Instale-o.
3. Crie um novo arquevo Flash para Actionscript 3.0
4. Após criá-lo, abra o painel de componentes. Para abrir vá em Window > Components.
5. Arraste quais componentes você quer para o palco de seu arquevo, e depois delete.
6. Automaticamente as classes, assets do componente arrastado é salvo na biblioteca do filme Flash, para verificar se eles estão por lá, combine CTRL+L, e você vai ver.
7.Depois disso, você vai precisar da seguinte opção, vá em File > Publish Settings > Desmarque a opção HTML.
8. Selecione a Aba Flash, na categoria ‘SWF Settings, marque a opção Export SWC.
9. Clique OK e pronto, seu SWC está pronto, basta agora arrastar para dentro da pasta libs que você criou lá no Flex Builder que será refletida as mudanças, caso não seja, no projeto lá do Flex Builder, pressione F5 depois que você adicionar o swc.

As vantagens de usar isso é que você pode usar o autocomplete com todas as propriedades dos componentes usados e a facilidade de montar uma interface em um projeto simples de Actionscript.

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();
				}
		}
	}
}
Actionscript/ Actionscript Frameworks/ AS 3.0/ Flash CS4

Trabalhando com DataProvider no Flash CS3/CS4

A sintaxe de programação para se trabalhar com DataProvider no Flash CS3 ou CS4 é um pouco diferente da que estamos acostumados no Flex. Entretanto o funcionamento é o mesmo.

O exemplo abaixo, popula um controle de ComboBox, e foi feito com Document Class, caso você queria setar um para rodar em sua máquena.

A primeira coisa que você faz para adicionar dados ao seu controle é justamente criar um objeto DataProvider e setar o source dele para o Array, XML ou coleção de objetos que você tenha. Ele parece muito com o comportamento do ICollectionView do Flex.

Exemplo:

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
package{
		import fl.controls.ComboBox;
		import fl.data.DataProvider;
		import flash.events.Event;
 
		import flash.display.MovieClip;
		[SWF(width="800",height="600", backgroundColor="0xcccccc", frameRate='40')]
		public class Main extends MovieClip {
 
			public var cbx:ComboBox;
			public var arr:Array = ['Sao Paulo','Recife','Rio de Janeiro','Brasilia'];
			public function Main() {
				var d:DataProvider = new DataProvider(arr);
					cbx = new ComboBox();
					cbx.dataProvider = d;
					addChild(cbx);
					cbx.x = 100;
					cbx.y = 100;
					cbx.addEventListener(Event.CHANGE,selecionado);
			}
			private function selecionado(e:Event):void{
				trace(e.target.selectedItem.data.toString());
			}
		}
}
Actionscript/ Actionscript Frameworks/ AS 3.0

Desenho com a Draw API do Actionscript 3.0

Desenhar com Actionscript é bem engraçado. Tem diferentes tipos de métodos e infinitas aplicações, exemplo disso é a gama de elementos, mascaras que o Flash Player suporta. Usando o Draw API que é uma parte do core-framework do Flash Player, onde existem vários métodos mágicos que faz todo o conjunto.

Usando a criatividade e algumas linhas de código, chega-se à um resultado como esse. Clique na área preta e começe a pintar.

Requer o Flash Player

Código do exemplo acima.

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
package {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
 
	public class as3Howto extends Sprite
	{
 
		public var arte:MovieClip;
		public function as3Howto()
		{
				arte = new MovieClip();
				addChild(arte);
 
				stage.addEventListener(MouseEvent.MOUSE_DOWN,iniciar);
				stage.addEventListener(MouseEvent.ROLL_OUT,fechar);
				stage.addEventListener(MouseEvent.MOUSE_UP,fechar);
		}
		public function iniciar(e:MouseEvent):void {
				stage.addEventListener(MouseEvent.MOUSE_MOVE,desenhar);
		}
		public function fechar(e:MouseEvent):void{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,desenhar);
		}
		public function desenhar(e:MouseEvent):void{
			if(e.buttonDown){
						arte.graphics.lineStyle(8,0xAA0000,1);
						arte.graphics.lineTo(stage.mouseX,stage.mouseY);
						arte.graphics.endFill();
			}
		}
 
	}
}
Actionscript/ Actionscript Frameworks/ AS 3.0

Como carregar um arquivo externo no Actionscript 3.0

Começando uma nova categoria aqui no site, para desenvolvedores Flash,AIR,Flash, independentemente de framework sendo SDK do Flex ou não.

O Código abaixo, mostra como carregar um arquevo de XML externo, esse arquevo pode ser um arquevo de texto também (txt).

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
package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.SecurityErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
 
	public class as3Howto extends Sprite
	{
 
		public var suaURL:String = "arquevo.xml";
		public var requesita:URLRequest;
		public var loader:URLLoader;
		public function as3Howto()
		{
 
			// montar os objetos
 
			requesita = new URLRequest(suaURL);
			loader = new URLLoader();
			loader.addEventListener(IOErrorEvent.IO_ERROR,ioHandler);
			loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR,segurancaHandler);
			loader.addEventListener(Event.COMPLETE,completoHandler);
			// inicia o processo
			loader.load(requesita);
		}
 
		private function ioHandler(e:IOErrorEvent):void{
				trace(e.text + 'n');
		}
		private function segurancaHandler(e:SecurityErrorEvent):void{
				trace('Erro de segurança'+e.text + 'n');
		}
		private function completoHandler(e:Event):void{
				trace('Carregado com sucesso'+'n');
		}
	}
}
Flex/ Flex 3/ Flex 3 how to

#6 Flex How to: Habilitando acesso da aplicação por teclado

Ter acesso à execução de operações por teclado em sua aplicação RIA com Flex é essencial, uma aplicação ótima tem que deixar isso de fácil uso para o usuário final.
No Flash Player a classe responsável por isso é o KeyBoard que possui várias variáveis, constantes pré-definidas que mapeiam todo seu teclado; A Classe está localizada em flash.ui.KeyBoard, outras classes existentes que também faz parte do esquema de teclado é a KeyEquevalent(Apenas para AIR) e KeyLocation.

Embora em Flex para web usemos apenas o KeyBoard e junto a ele os disparos de eventos pelo KeyBoardEvent que possuim duas constantes definidas(KEY_DOWN,KEY_UP), que faz a interpretação de teclas pressionadas ou não.
Cada tecla é mapeada por códigos únicos, esses códigos são universais em qualquer teclado multimídia ou normal, esses códigos por tecla estão descritos na classe KeyBoard.

Prática 01:
Exemplo abaixo mostra como capturar cada código no Flex. Nele adicionamos dois listeners de eventos um capturando o exato momento que a tecla está pressionada e quando ela é solta.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
 
		public function init():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN,teclaPressionada);
		    stage.addEventListener(KeyboardEvent.KEY_UP,teclaSolta);
		}
		private var check:Boolean = false;
		public function teclaPressionada(e:KeyboardEvent):void {
				if(!check){
					check = true;
					Alert.show('Codigo caracter : '+e.charCode +'n'+
					'Codigo da tecla : '+ e.keyCode.toString());
				}
		}
		private function teclaSolta(event:KeyboardEvent):void {
			check = false;
			Log.text += 'Tecla pressionada!'+ 'n';
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 02:

Como identifica a combinação de Ctrl + F1 para pedir ajuda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
 
		public function init():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN,teclaPressionada);
		    stage.addEventListener(KeyboardEvent.KEY_UP,teclaSolta);
		}
		public function teclaPressionada(e:KeyboardEvent):void {
				if(e.ctrlKey){
						if(e.keyCode == Keyboard.F1){
							Alert.show('Help');
						}
				}
		}
		private function teclaSolta(event:KeyboardEvent):void {
			Log.text += 'Help acionado';
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 03:

Verificando se a tecla CapsLock está ativa ou não. Isso é bem útil em telas de login.Onde você pode também colocar o listener no textInput quando o usuário for dar o focus, ou direto no stage da App.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
		import flash.ui.Keyboard;
 
		public function init():void {
			if(Keyboard.capsLock){
				Log.text +='Caps lock ativada' +'n';
			}else{
				Log.text += 'Caps lock desativada'+'n';
			}
			stage.addEventListener(KeyboardEvent.KEY_UP,verifica,true);
		}
		public function verifica(e:KeyboardEvent):void {
				if(e.keyCode == Keyboard.CAPS_LOCK){
						if(Keyboard.capsLock){
								Log.text +='Ativou'+'n';
						}else {
							Log.text +='Desativou'+'n';
						}
				}
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 04:

Como combinar clique de Mouse com Shift,Alt e Ctrl por exemplo, quando queremos selecionar um lote de itens.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import flash.ui.Keyboard;
		import mx.containers.Panel;
 
		public function init():void {
				 stage.addEventListener(KeyboardEvent.KEY_UP,deleta);
		}
		public var itens:ArrayCollection = new ArrayCollection();
		public function seleciona(event:MouseEvent):void {
				if(event.shiftKey){
						itens.addItem(event.currentTarget);
				}
				else{
					itens.removeAll();
				}
		}
		public function deleta(e:KeyboardEvent):void {
			if(e.keyCode == Keyboard.DELETE){
						if(itens.length <=0){
							Alert.show('Nada para deletar');
						}else{
							for each( var item:Object in itens){
								this.removeChild(item as DisplayObject);
						}
					}
			}
		}
	]]>
</mx>
 
 
		<mx :Panel title="a" click="seleciona(event)" width="100" height="100" x="59" y="76"/>
		<mx :Panel title="b" click="seleciona(event)" width="100" height="100" x="167" y="76"/>
		<mx :Panel title="c" click="seleciona(event)" width="100" height="100" x="275" y="76"/>
		<mx :Panel title="d" click="seleciona(event)" width="100" height="100" x="392" y="76"/>
Flex/ Flex 3 how to/ Flex 3 SDK

#5 Flex How to: Como popular um menu e aplicar icones e eventos

Tem muita gente com essa dúvida, andamos pesquesando os arquevos da lista da Flex-Brasil, e percebemos que teve um número considerável sobre esse tópico.
Criar menus dinâmicos ou não em Flex é fácil, a definição de estrutura de seus itens é feita por um XML, sela ele interno ou externo.

O formato do arquevo xml que o MenuBar ou Menu lê, é pré-definido com alguns atributos que ambos os componentes já interpretam. São elas:

  • enabled – Habilita ou desabilita um item do menu.
  • groupName – Quando um item haje como radio Button, ou check Button de um grupo de itens.
  • icon – Coloca um item como imagem, herdando de um asset do tipo Class.
  • label – Nome que aparece no item do menu.
  • toggled – Seleciona ou escolhe o tipo do item marcando na seleção do item.
  • type – Especifica o tipo do item do menu com seus valores (check, radio e separator)

Exemplo do meumenu.xml :



		
                
                
                	
                
                

            
            		
            		
            
            
                
                
                
            
            

Em alguns tags do exemplo acima usei as propriedades definidas do xml que é automaticamente interpretada pelo menu. Lembrando que se meu XML tem formato E4X , precisa-se setar o labelField do Menubar, que para acessar um atributo no XML só basta ler com @ e o nome da propriedade.

O resultado do XML acima pode ser aplicado dentro do Flex, como mostra o exemplo abaixo.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx><mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Para se usar com ícone, você deve setar a propriedade iconField no MenuBar, para que o próprio possa setar o valor da imagem. Lembrando que sempre com o tipo Class.
Auxiliando nesse ponto, você pode definir uma classe ou arquevo especificadamente para setar os icones de seu menu. Criei um arquevo simples que faz todo esse processo de Embed e converte para Class.

Como ficou o arquevo:

1
2
3
4
5
6
7
8
9
10
11
12
13
// ActionScript file
 
[Embed(source="./assets/dev.png")]
[Bindable]
public var iconeDev:Class;
 
[Embed(source="./assets/book.png")]
[Bindable]
public var iconeBook:Class;
 
[Embed(source="./assets/info.png")]
[Bindable]
public var iconeInfo:Class;

Depois que definir isso, só trato de verificar se o iconField, foi definido no MenuBar e também o atributo tem o nome específico setado pela variável criada no arquevo “includeIcones.as”.

Como fica o exemplo com ícones.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		include "includeIcones.as";
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Como fazer para selecionar Itens do Menu e atribuir Eventos a cada item?

Atribuir ao MenuBar o evento de click e saber qual ícone foi selecionado, fica a cargo da propriedade itemClick do MenuBar,Menu.

Veja exemplo:

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
        import mx.events.MenuEvent;
 
		include "includeIcones.as";
 
            private function handleItemClick(event:MenuEvent):void {
 
                Alert.show('Menu escolhido foi: '+ event.item.@label);
            }
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar itemClick="handleItemClick(event)" iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>