O nobre Ady levy, disponibilizou uma ferramenta que reduz  a imagem antes do upload. Ou seja, vc não vai usar sua banda de Internet para enviar aquela imagem de 4M e depois reduzi-la no server-side(php). O tamanho atual é de 640×480, o que significa que não teremos problemas quanto à qualidade. E tem mais um detalhes, o módulo foi feito para enviar multiplas imagens.

Ex.: EM USO

Meu trabalho foi traduzi-lo para nossa velha língua.

Façam bom proveito: Link para Download

Creditos: Ady Levy – Matéria: article

http://pt.kioskea.net/contents/internet/ftp.php3

Abraços,

Fernando Carvalho

Enviar dados pela URL é algo comum. Sejam eles criptografados ou não. Pois bem nesse texto falaremos sobre Como trabalhar com dados na URL e FLEX.

Para tal usei:

mx.managers.IBrowserManager;
mx.managers.BrowserManager;

Vejamos essa URL: http://fish.jpa.com.br/index.php#erro=799;id=4000;.

Para o Flex ha a seguinte divisão:

A base é considerada a parte “http://fish.jpa.com.br/index.php”.
Ja o dado é chamado de fragment , em nosso caso “erro=799;id=4000;”.

O divisor de “águas” será o “#”. Ou seja, se você quiser passar um dado por URL, o mesmo estará após a “#”.

Na área de  fragmento teremos organização em pares:
VARIAVEL = VALOR_DA_VARIAVEL;

Não esquecendo de escrever “;” ao final do par.

O exemplo abaixo descreve bem:

var dadosurl:IBrowserManager = BrowserManager.getInstance();
dadosurl.init();
 
//Obter fragmentos da url e tranformar em STRING
var o:Object = URLUtil.stringToObject(dadosurl.fragment);
 
//Alimentando variaveis com o valor dos dados
var erro:String = o.err;
var id:String= o.id
 
//Apresentar num "Alert"
Alert.show(erro, "Conteudo_do_erro:");
Alert.show(id, "Conteudo_do_id:");

O resultado da impressão será:

//primeira impressão
Conteudo_do_erro:
 
799
 
//segunda impressão
Conteudo_do_id:
 
4000

Espero ter Ajudado.
Abraços,
Fernando Carvalho

Pessoas,
Fiquei 2 dias trabalhando nessa classe. Fiz alguns testes e funcionou como esperado. Fiquem à vontade para Usá-la.

Função: Validar Sessão com FLEX, usando PHP como BACK-END.
Composição: Feita em ActionScript3, a classe abre uma conexão HTTP para um arquivo de validação de sessões em PHP. Se a resposta for positiva, no tunel http, retornará um token que confirmará a autenticidade da sessão. Caso contrário, enviará o cliente para uma tela de Autenticação:

OBS. Essa classe foi testada em sistema baseado em módulos. Para cada modulo use, pelomenos, as linhas abaixo, alterando para o componentes do seu módulo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 	< ?xml version="1.0" encoding="utf-8">
 
 		< | ![CDATA[
 			import mx.binding.utils.ChangeWatcher;
  			import mx.binding.utils.BindingUtils;
 			import br.com.jpa.fish.classes.*;
 
 			public function testando():void
  			{
 				var _nameWatcher:ChangeWatcher;
 				var validarsessao:Sessao = new Sessao();
 				_nameWatcher =BindingUtils.bindProperty(componentedomodulo,"visible" ,validarsessao,"visible");
 
 			}
 
 	...

Sessao.as

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

package br.com.jpa.fish.classes
{
	import flash.net.URLRequest;
 
	import mx.controls.Alert;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.HTTPService;
 
	public class Sessao
	{
 
		private var UrlAutenticador:URLRequest = new URLRequest("URL DO AUTENTICADOR");
   		private var UrlSessionPHP:String = "URL DO ARQUIVO PHP QUE VALIDA SESSIONS";
		private var token:String = "UM TOKEN QUE DEVE SER O MESMO NO ARQUIVO PHP, CASO A SESSAION SEJA VERDADEIRA";
	    [Bindable] public var visible:Boolean;
 
		//construtor
		public function Sessao():void{CheckSession()}
 
		//Dispara a funcao que trara a resposta da validacao
		public function CheckSession():void
		{
			httpRequest(UrlSessionPHP);
		}	
 
		//se vier um retorno diferente do token envie para a Autenticacao
		public function gerenciarRetorno(event:ResultEvent):void
		{
			if(event.result.toString()!=token)
			{
 
				visible=false;
				navigateToURL(UrlAutenticador,"_top");
			}else visible=true;
 
		}
 
		//Erros do sistema me retornem no Show Alert
		public function erroHTTP(resultado:FaultEvent):void
		{
			Alert.show(resultado.toString(), "Error");
		}
 
		//ir no arquivo PHP Validar a Session
		public function httpRequest(auth:String):void
		{
			var service:HTTPService;
			service = new HTTPService();
			service.url=auth;
        	service.resultFormat="text";
        	service.method = "POST";
        	service.addEventListener("fault", erroHTTP);
	        service.addEventListener("result", gerenciarRetorno);
	        service.send();
 
		}
 
	}
}

Agora, um módulo teste.

sessionteste.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< ?xml version="1.0" encoding="utf-8">
 
		< | ![CDATA[
			import mx.binding.utils.ChangeWatcher;
			import mx.binding.utils.BindingUtils;
			import br.com.jpa.fish.classes.*;
 
			public function testando():void
			{
				var _nameWatcher:ChangeWatcher;
				var validarsessao:Sessao = new Sessao();
				_nameWatcher =BindingUtils.bindProperty(formulario,"visible" ,validarsessao,"visible");
 
			}
 
		]|>

Para baixar os arquivos clique em: Session PHP e Flex. Espero ter ajudado.

Fernando Carvalho,
Abraços.

SoundManager – http://evolve.reintroducing.com/2008/07/15/news/as3-soundmanager/

Esta classe, padrão singleton, serve para fazer exactamente o que o titulo diz, um manager de som, o que torna o adicionar de som aos nosso projectos bem simples. Esta class depende do TweenLite para o fade de som.

Active Window Blur – http://blog.onebyonedesign.com/?p=81

Coloca um painel de blur sobre um video, imagem ou movieclip.

TweenMax – http://blog.greensock.com/tweenmaxas3/

Construído sobre a base do tweenLite e tweenFilterLite, esta classe aperfeiçoa os métodos de ambas as origens mostrando no final um motor de animação com mais algumas funções como pause/resume, sequências mais fáceis, animação e cor HEX e muito mais…

YouTube Class – http://labs.flexcubed.com/?p=13

Uma class que usa a API do google para devolver playlists e “featured” vídeos.

Pulse Particle System – http://rogue-development.com/pulseParticles.html

Um sistema que pode não parecer ter muita utilidade. Trabalha exclusivamente com partículas e AS3, para criar os mais variados efeitos como podem ver na pagina de exemplos.

Animated BitMap – http://blog.hexagonstar.com/animatedbitmapclass/

Uma das classes mais úteis, visto que o flex / flash não têm suporte a gif’s animados, esta class utiliza varias imagens fixas com apenas uma desviação de padrão para animar uma imagem, podem-se conseguir resultados fantásticos.

Queue Loader – http://code.google.com/p/queueloader-as3/wiki/QueueLoader

Um projecto que permite monitorizar o carregar de objectos e assets bem como monitorizar o seu processo de carregamento. Este projecto é Open Source e aceitam contribuidores, mais informações na sua pagina em cima.

Prioritization – http://www.danielhai.com/blog/?p=60

Uma class que funciona com Loader, URLLoader e Sound Objects, que permite indicar a prioridade de determinados métodos e objectos para que estes sejam executados na ordem que desejamos.

DistortImage – http://www.rubenswieringa.com/blog/distortimage

Um classe que permite fixar pontos e distorcer uma imagem consoante a nossa necessidade tudo isto em AS3.

Layout Class – http://www.senocular.com/?id=2.8

Uma colecção de 3 Classes, Layout, LayoutConstraint, LayoutManager, principalmente feita para o Flash CS, não deixa de ser interessante ver-la em funcionamento. Permite fixar um objecto sempre no centro do stage, definir width e height consoante o tamanho do stage, e mais alguns elementos importantes no layout. A nível de flex estas classes são implementadas nativamente.

Color Sampler – http://www.somerandomdude.net/blog/flash/actionscript-3-color-sampler-class-download/

Sistema que permite recolher de objectos o seu padrão RGB, hue, saturation e brightness. Muito util quando necessário trabalhar com imagens.

2D Character Rigging Classes – http://www.algorithmist.net/rigging.html

Uma classe que permite personalizar aspectos de caracteres 2d, ou seja, no exemplo de um boneco, permite personalizar a cara, braços, posição, afastamento, etc…

XML Loader Class – http://www.mediareason.com/blog/?p=20

Uma class que faze exactamente o que o proprio nome indica, carrega XML de uma maneira bem simples.

Style Collection – http://www.gskinner.com/blog/archives/2007/06/stylecollection.html

Uma class que permite criar grupos de estilos (styles) que são aplicados e automaticamente actualizados em diversos componentes. Principalmente orientado para Flash CS.

AS3 Easing – http://www.uza.lt/codex/as3-easing/

Mais uma class de animação/transição, com a diferença de permitir definir pontos de animação.

CSS Loader – http://www.rubenswieringa.com/blog/cssloader

Uma class que permite carregar ficheiros CSS de estilo para qualquer aplicação flex no seu arranque.

AutoComplete Text Field – http://asserttrue.com/articles/2006/04/09/actionscript-projects-in-flex-builder-2-0

Permite a criação de campos de texto com auto complete.

fZIP – http://wahlers.com.br/claus/blog/zip-it-up/

Uma classe que permite carregar arquivos .zip e abrir os ficheiros nele contidos mesmo antes de carregar o arquivo completo. Desenhado especialmente para projectos AIR, em alguns casos pode ser conseguido utiliza-a com projectos Flash/Flex se o arquivo zip for “injectado” com um Adler32 checksum (patch) este pode ser aberto no browser e funcionará correctamente, como podem ver no exemplo da pagina oficial.

Reflection Class -  http://www.adobe.com/devnet/flash/articles/reflect_class_as3.html

Uma class que permite criar reflexos de imagens.

Reflection Manager – http://www.wietseveenstra.nl/blog/2007/05/reflection-manager-10/

Uma classe derivada da anterior, mas muito mais completa.

Flex Loading Image – http://www.munkiihouse.com/?p=135

Implementa a class image do flex, e introduz uma barra de progresso que nos permite visializar o carregamento da imagem.

Audio Visualization  – http://blog.benstucki.net/?id=18

Permite criar varios estilos de analyser’s para audio, num componente bastante interessante como podem ver no seu explorer. Programado para o Flex.

FishEye – http://www.quietlyscheming.com/blog/components/fisheye-component/

Um conjunto de classes que permite criar uma apresentação/menu ao estilo do mac, embora de uma forma bem elaborada, permite o controlo absoluto da sua apresentação. Especialmente programado para o flex.

FlvWriter – http://www.zeropointnine.com/blog/simpleflvwriteras-as3-class-to-create-flvs

Uma class para aplicativos AIR que permite escrever/gravar um ficheiro flv (video).

Flex XLS Read/Write – http://adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1375018

Uma class que permite escrever e ler arquivos .xls no flex.

MP3 Player – http://msdevstudio.com/blog/2008/06/25/flex-action-script-mp3-player-equalizer/

Uma class AS3 programada para o flex, que permite a criação e controlo de um simples player de mp3 com um equalizador gráfico.

URLUtils – http://msdevstudio.com/blog/2008/05/13/flex-deep-linking-detalhes-browser/

Uma class que permite obter parametros do browser, como pagina actual, servidor, porta, caminhos relativos e absolutos…

DataGrid Colorize – http://msdevstudio.com/blog/2008/05/25/flex-datagrid-mudando-a-cor-de-uma-linhacoluna/

Permite colorir determinada linha/campo/coluna da tabela com as cores definidas pelo utilizador, permite também colorir apenas campos com determinado valor.

Feed Reader – http://msdevstudio.com/blog/2008/06/02/tutorial-package-flex-leitor-rss/

Uma class que le conteudo de um feed RSS e tranforma o seu conteudo num arrayColelction pronto a ser usado numa datagrid.

Password Generator – http://msdevstudio.com/blog/2008/06/13/flex-password-generator-criador-de-passwords/

Permite gerar Passwords/Strings aleatórias, podendo ou não usar caracteres especiais.

Fonte:TSW

mx.rpc.events.ResultEvent;
mx.rpc.events.FaultEvent;
mx.rpc.http.HTTPService;
mx.controls.Alert;
mx.managers.PopUpManager;

Exemplo
OBS. Login: blogdofish & Senha: teste123;

Mão na massa

No Adobe Flex Builder, File > New Flex Project. Digite um nome para o projeto, seu tipo como Web application (runs in Flash Player) e Finish.Abra o arquivo que se encontra na pasta src do seu projeto. O meu é Login_Blog.mxml.

< ?xml version="1.0" encoding="utf-8"?>

Inseri um Listener “creationComplete=”Login()””. Isso me garante, que ao iniciar a aplicação, a funcão “Login()” será executada automaticamente. Continuando…

	< ![CDATA[
		import mx.managers.PopUpManager;
		import componentes.lfishblog;
 
		public function Login():void{
			var loginPopUp : lfishblog = lfishblog(PopUpManager.createPopUp(this, componentes.lfishblog , true));
			loginPopUp.setFocus();
			PopUpManager.centerPopUp(loginPopUp);
 
		}
	]]>

Logo acima um Action Script básico. Nele temos os IMPORTS com os packages necessários.

		import mx.managers.PopUpManager;
		import componentes.lfishblog;

O “componentes.lfishblog” é o nosso componente Titlewindow. Falarei sobre ele. E claro, o “managers.PopUpManager” para nosso efeito PopUp. Ja falei de PopUp em um post anterior.

public function Login():void{
			var loginPopUp : lfishblog = lfishblog(PopUpManager.createPopUp(this, componentes.lfishblog , true));
			loginPopUp.setFocus();
			PopUpManager.centerPopUp(loginPopUp);
 
		}

Acima, nossa função do Listener cria um PopUp com o componente lfishblog focado. Agora, vamos criar uma pasta, dentro do diretório SRC da árvore do diretórios do projeto, com o nome componetes. Logo após, clique com o botão direito em cima da pasta componetes e escolha NEW>MXML Component. Uma janela irá aparecer para inserção de um nome para o novo componente. No campo BASED ON, escolha TitleWindow. O nome do meu componente é lfishblog.

		< ![CDATA[
		import mx.rpc.events.ResultEvent;
		import mx.rpc.events.FaultEvent;
                import mx.rpc.http.HTTPService;
		import mx.controls.Alert;
		import mx.managers.PopUpManager;
 
		 public function gerenciarRetorno(event:ResultEvent):void
	        {
	        	switch (event.result.toString()){
	        		 case "required":
        					Alert.show("Os campos de Login e Senha são requeridos","Required");
 
        					break;
 
	        		case "password":
	        				Alert.show("Password Invalido","Pass error");
	        				break;
 
	        		case "login":
	        				Alert.show("Login Invalido","Login");
	        				break;
 
	        		case "OK":
	        				PopUpManager.removePopUp(this);
 
	        	}
	        }

Aqui está a parte interessante. Veja que criei uma função chamada “gerenciarRetorno()”. Ele tem como parâmetro um evento do tipo ResultEvent. Nesse caso, o retorno que o PHP nos enviará. Na função de controle de fluxo switch, converti o dado para o tipo String.

switch (event.result.toString()){…

E como ja sabemos, o switch nos permite trabalhar entre os casos de retorno. Usei required, password, login e OK como códigos. Faça como achar melhor.

     case "OK":
	          PopUpManager.removePopUp(this);

Caso o código retornado seja OK, nós removeremos o PopUp e diponibilizamos as funções que, provavelmente, estariam ao fundo da tela.

  Alert.show("Os campos de Login e Senha são requeridos","Required");

O “Alert.show” será uma forma elegante de nos apresentar erros como ‘senha e campos requeridos’ e etc.

public function fault(event:FaultEvent):void
	        {
	           Alert.show(event.fault.faultString, "Error");
	        }

A função Fault terá o trabalho de “pegar” todos os erros no protocolo HTTP. Agora, iremos trabalhar no caminho para o PHP.

 
			{login.text}
			{senha.text}

Veja que o HTTPService é identifacado no sistema como “authHTTP”. URL será a localização do nosso codigo PHP.

		result="gerenciarRetorno(event);"
		fault="fault(event);"
		resultFormat="text">

No código acima temos o tratamento do resultudo com a funcão “gerenciarRetorno(event)”, o tratamento dos erros com “fault(event)” e o timpo do retorno resultFormat=”text”.

 
			{login.text}
			{senha.text}

Acima, uma uma propriedade que envia os campos com os dados para autenticação.

Por fim, 2 Labes e 2 TextInput e um Button. Eles receberão nome e senha. Ao clicar no Button a função “authHTTP.send()” enviará nossos dados. Não esqueçam de por “displayAsPassword=”true”” para o TextInput da senha.

Espero ter ajudado pessoal. O link dos arquivos, etrutura de projeto, inclusive o PHP  e etc estão em:Login com Flex e PHP.

Abraços para meus leitores,

Fernando Carvalho

mx.managers.PopUpManager
mx.effects.Parallel
mx.effects.easing.Bounce
mx.effects.Blur

Exemplo

obs. Coloquem o < antes de inicio de tags.

Passo-a-Passo

No Adobe Flex Builder, File > New Flex Project. Digite um nome para o projeto, seu tipo como Web application (runs in Flash Player) e Finish.

Abra o arquivo que se encontra na pasta src do seu projeto. No meu caso FishBlog.mxml.

< ?xml version="1.0" encoding="utf-8"?>
mx :Application  creationComplete="Join()"xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
 
/mx:Application>

Note que inseri um Listener “creationComplete=”Join()””. Isso me garante, que ao iniciar a aplicação, a funcão “Join()” será executada automaticamente. Vamos agora inserir o Action Script com os imports necessários para a aplicação, juntamente com a pasta COMP. Mais afrente explicarei o porquê dessa pasta.

< ?xml version="1.0" encoding="utf-8"?>
mx:Application  creationComplete="Join()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
mx:Script>
< ![CDATA[
import comp.test
import mx.managers.PopUpManager
import mx.effects.easing.Bounce
]]>
/mx:Script>
/mx:Application>

Agora, criaremos a função do Listener, citada acima. Observe que utilizei a variável COMPONENTE, do tipo TEST. A variavel COMPONETE será instanciada como um PopUP(PopUpManager.createPopUp) do tipo TEST.

< ?xml version="1.0" encoding="utf-8"?>
mx:Application creationComplete="Join()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
mx:Script>
< ![CDATA[
import comp.test
import mx.managers.PopUpManager
import mx.effects.easing.Bounce
public function Join():void{
var componente : test = test(PopUpManager.createPopUp(this, comp.test , true));
componente.setFocus();
PopUpManager.centerPopUp(componente);
efeitos.target=componente;
efeitos.play();
}
]]>
/mx:Script>
/mx:Application>

A Pasta COMP, possui uma classe chamada test. Essa classe será o tipo de objeto que iremos apresentar no PopUP. Nesse caso um TitleWindow. No trecho abaixo, eu configurei o foco do sistema para o objeto componete e centralizei o PopUP.

componente.setFocus();
PopUpManager.centerPopUp(componente);

O objeto “efeitos” é do tipo Parallel e contem outro elemento, o Sequence. O objeto Parallel contém efeitos que vão funcionar em determinado “alvo”, no nosso caso, “componete”. Ja o Sequence, irá executar os efeitos, de acordo com a disposição, em linha, no código. Ou seja, eles serão executados, um após o outro.

efeitos.target=componente;
efeitos.play();
}
 
]]>
/mx:Script>
mx:Parallel id="efeitos">
mx:WipeDown moveEasingFunction="Bounce.easeOut" duration="1500"/>
mx:Sequence>
mx:Blur duration="300" blurYFrom="1.0" blurYTo="20.0" />
mx:Blur duration="300" blurYFrom="20.0" blurYTo="1" />
/mx:Sequence>
/mx:Parallel>
/mx:Application>

Então, dentro do Parallel teremos o WipeDown(efeito de uma cortina caindo) e dentro do Sequence, o Blur(efeito de um terremoto no popup). No trecho moveEasingFunction=”Bounce.easeOut”, teremos aquele Bump(quando o WipeDown chegar ao fim do TileWindow, dará ums pulinhos). Coloquei valores altos para os efeitos fazerem a diferença.

Dentro da pasta SRC, no seu projeto, crie outra pasta com o nome comp. Nela adicione um MXML Component do tipo TitleWindow, com o nome test. Abaixo, o código do componente. Simplesmente adicionei um Button. Ao clicar no Button, a função fecharPopUp() será “chamada”. Nela teremos o metodo PopUpManager.removePopUp().

< ?xml version="1.0" encoding="utf-8"?>
mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="168" title="PopUp">
mx:Script>
< ![CDATA[
import mx.managers.PopUpManager
public function fecharPopUp():void{
PopUpManager.removePopUp(this);
}
]]>
/mx:Script>
mx:Button x="157" y="96" label="Fechar" id="TestButton" click="fecharPopUp()"/>
/mx:TitleWindow>

Ok galera, espero ter dado uma luz. Deus abençoe vocês.