Flex 4, AS3, Java, Red5, C#, Fluorine!

Alem de estar a realmente enfiar a cara no Flex4, estou a levar muito na cabeça… olhem que a transição do flex 3 pro 4 não é nada facil (estou a falar-vos como Flex 3 Certified Expert), alem de milhares de mudanças no “core”, há os novos namespaces, componentes, hierarquias, separação de componentes, etc’s… mas é uma agradavel surpresa encontrar muitos elementos corrigidos e melhorados, a melhor notici é sem duvida a enorme (ja era grande) facilidade com que criamos os nossos componentes, embora agora tenhamos que os construir passo a passo: Base, Skin, Scrollers, Actions, Etc’s… mas com certeza vão surgir componentes fantasticos. Eu proprio ja tive que criar alguns, de entre eles um a que chamei de spark datagrid. (quem ja vasculhou no flex 4 a datagrid foi extinta no spark). E erram ao pensar que me levou muito tempo… foi até muito simples com os novos containers/elementos do flex4.

Alem de muito flex 4, um dos meus planos do ano passado para este ano era aprender Java, e acho que desta vai. (Ja fiz até o meu primeiro CRUD :p ), acabei por me envolver num projecto que requeria o uso do red5 como servidor de video/audio/sharedobjects. Ao principio hesitei, mas foi-me dada a liberdade de poder ao mesmo tempo que desenvolvia, podes estudar um pouco do red5 e suas app’s em java. Das app’s pro red5 até às simples app’s java o caminho é quase inexistente, visto que ambos usam java… foi então que dei uso à minha vontade de aprendizagem e começei a estudar um pouco de java e acabei desenvolvendo  o meu primeiro crud. Ainda existem muitas duvidas na minha cabeça, principalmente na hora de criar uma app java e na hora do seu deploy… a confusão começa simplemesmente no facto de existirem tantos deploys e app’s diferentes.. em simples class java,  jar, applet, jnlp, etc’s… mas bom, com calma la vou… se por acaso tiverem bons links de tutoriais, artigos, estudos sobre java e tambem sobre red5 é só mandaram… a comissão agradece (pode ser em inglês ou francês).

Outra parte que tambem me vi envolvido foi no c#, devido ao facto de ser necessario a migraçao de alguns elementos para o novo projecto, e acabei mesmo por me dedicar tambem um pouco ao c#, visual studio e sqlServer, isto junto com o flex 4 + Fluorine. Posso afirmar já de caras que fiquei espantado com a facilidade da integração, em em alguns casos mesmo com a rapidez de processamento do flex+fluorine + sqlserver.  Claro que a minha entrada no c# ficou bem facilitado por ter tido a iniciação do visual c e c++ no meu cursito à uns anos atras.. mas muito ja estava esquecido…

Espantei-me tambem foi com muitas semelhanças com o as3… alias, muito parecidos mesmo….

AS3: var variavel:String = “ola”;

Java: String variavel = “ola”;

C#: string variavel = “ola”;

Em breve vou tertando colocar alguns artigos sobre estes meus estudos…que neste momento são os meus focos, por isso, caros amigos, links, tutoriais e infos são bem vindos!!

Bom, acho que estou a dar inicio à minha meta do ano 2010 um pouco tarde, mas mais vale tarde do que nunca!!

Grande abraço!!

Nesta parte do tutorial vamos usar todo o conhecimento passado nos exemplos anteriores para criar um explorador de efeitos e animações…

Começando…

6.9.1. Exemplo de explorador de efeitos / animações

Para o teste de todos estes efeitos, fiz uma class que extende um canvas e nos vai permitir testar todos estes efeitos. No flex criem um novo projecto chamado  testAS3Effects e criem uma pasta dentro da vossa raiz «src» com o nome «com» e dentro dessa uma outra com o nome «msdevstudio», depois criem uma nova class action script com o nome eff e coloquem o seguinte código dentro desse mesmo ficheiro…

[coolcode language="actionscript" download="eff.as"]
package com.msdevstudio
{
import flash.events.TimerEvent;
import flash.utils.Timer;

import mx.containers.Canvas;
import mx.controls.Image;
import mx.effects.Blur;
import mx.effects.Fade;
import mx.effects.Glow;
import mx.effects.Move;
import mx.effects.Parallel;
import mx.effects.Resize;
import mx.effects.Rotate;
import mx.effects.Sequence;
import mx.effects.easing.*;
import mx.events.EffectEvent;
import mx.events.FlexEvent;

public class effects extends Canvas
{
private var imagem:Image;
private var originalSizeW:int;
private var originalSizeH:int;
private var timed:Timer = new Timer(10);
private var customMove:Move = new Move;
private var moveDir:String=”Up”;
private var isBlur:Boolean=false;
private var isGlow:Boolean=false;
private var angulo:int=0;
private var raio:int=50;
private var centroX:int;
private var centroY:int;
private var isMoving:Boolean=false;

[Embed(source="smile.jpg")]
private var img:Class;

[Embed(source="bomb.jpg")]
private var img2:Class;

public function effects()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, onReady, false, 0, true);
}

private function onReady(evt:FlexEvent):void {
imagem=new Image;
imagem.x=0;
imagem.y=(this.height/2)-70;
imagem.source=img;
addChild(imagem);
originalSizeW=128;
originalSizeH=128;
centroX=(this.width/2)-(originalSizeW/2);
centroY=(this.height/2)-(originalSizeH/2);
}

public function timedMovement():void {
reset();
timed.addEventListener(TimerEvent.TIMER, timedMove, false, 0, true);
timed.start();
}

private function timedMove(evt:TimerEvent):void {
if(((imagem.x+4)+imagem.width)
else {
timed.stop();
timed.removeEventListener(TimerEvent.TIMER, timedMove);
}
}

//limpa todos os efeitos
public function reset():void {
imagem.source=img;
imagem.x=0;
imagem.y=(this.height/2)-70;
imagem.height=originalSizeH;
imagem.width=originalSizeW;
customMove.removeEventListener(EffectEvent.EFFECT_END, doJump);
imagem.filters=[];
imagem.alpha=1;
if(isMoving==true) stopCircMove(); //caso esteja a mover

}

public function nativeMove():void {
var move:Move = new Move();
reset();
move.duration=2000;
move.target=imagem;
move.xTo=this.width-imagem.width;
move.play();

}

public function nativeMultiMove():void {
var move:Move = new Move();
reset();
imagem.source=img2;
move.duration=2000;
move.target=imagem;
move.xTo=this.width-imagem.width;
move.yTo=170;
move.play();
}

public function nativeSize():void {
//para não aumentar para fora do nosso canvas se varias vezes //clicado.
if((imagem.y+imagem.height+20)
var size:Resize=new Resize;
imagem.x=30; //como vai aumentar não vai para fora da area do //nosso canvas.
size.target=imagem;
size.heightTo=imagem.height+20;
size.widthTo=imagem.width+20
size.duration=500;
size.play();
}
}

public function nativeRotate(inverse:Boolean=false):void {
var rot:Rotate = new Rotate;
//rot.target=imagem;
reset();
imagem.x=(this.width/2)-(originalSizeW/2)
imagem.y=(this.height/2)-((originalSizeH/2)+50);
rot.angleTo=+360;
rot.duration=1000;
rot.play([imagem],inverse);
}

public function customJump():void {
moveDir=”Up”;
reset();
imagem.source=img2;
imagem.x=(this.width/2)-(originalSizeW/2);
imagem.y=this.height-originalSizeH;
customMove.target=imagem;
customMove.yTo=imagem.y-50;
customMove.addEventListener(EffectEvent.EFFECT_END, doJump,false,0,true);
customMove.play();

}
private function doJump(evt:EffectEvent):void {
if(moveDir==”Up”) {
customMove.yTo=imagem.y+50;
customMove.play();
moveDir=”Down”;
}
else
{
customMove.yTo=imagem.y-50;
customMove.play();
moveDir=”Up”;
}

}

//Utilização das classes easing / funções de animação
//Estão disponiveis muitos efeitos acedidos pelo package //mx.effects.easing.
//bastando escrever mx.effects.easing. e escolher da lista o efeito
/* exemplos
Bounce.easeIn / easeInOut / easeOut
Elastic.easeIn / easeInOut / easeOut
Circular.easeIn / easeInOut / easeOut
Back.easeIn / easeInOut / easeOut
etc…
*/

public function nativeDropBounce():void {
reset()
imagem.source=img2;
imagem.y=-originalSizeH+50;
imagem.x=(this.width/2)-(originalSizeW/2);

var move:Move = new Move;
move.target=imagem;
move.duration=1500;
move.yTo=(this.height-(originalSizeH));
//função de animação
move.easingFunction=Bounce.easeOut;
move.play();
}

public function nativeCircularMove():void {

reset();
var radians:Number= (angulo/180) * Math.PI;

imagem.x=0;
imagem.y=0;
imagem.source=img2;
customMove.target=imagem;
customMove.duration=5;
customMove.xTo = centroX + Math.cos(radians) * raio;
customMove.yTo = centroY + Math.sin(radians) * raio;
customMove.addEventListener(EffectEvent.EFFECT_END, moveCircNext);
customMove.play();
isMoving=true;

}

private function moveCircNext(evt:EffectEvent):void{
angulo-=5;
angulo%= 360;
var radians:Number= (angulo/180) * Math.PI;
customMove.xTo = centroX + Math.cos(radians) * raio;
customMove.yTo = centroY + Math.sin(radians) * raio;
customMove.play();

}

private function stopCircMove():void {
customMove.removeEventListener(EffectEvent.EFFECT_END, moveCircNext);
isMoving=false;
}

//utilização de efeitos paralelos e efeito Fade
public function nativeFadeMove():void {
reset();
imagem.x=0;
imagem.y=0;
var par:Parallel = new Parallel;
par.target=imagem;
par.duration=1500;
var move:Move = new Move;
move.xTo=this.width-originalSizeW;
move.yTo=this.height-originalSizeH;
par.addChild(move);
var fade:Fade = new Fade;
fade.alphaFrom=0;
fade.alphaTo=1;
par.addChild(fade);
par.play();
}

//utilização de efeitos em sequencia:

public function multipleEffects():void {
var seq:Sequence = new Sequence;
var move:Move = new Move;
var glow:Glow = new Glow;
var fade:Fade = new Fade;

reset()
imagem.source=img2;
imagem.y=-originalSizeH+50;
imagem.x=(this.width/2)-(originalSizeW/2);

move.duration=1500;
move.yTo=(this.height-(originalSizeH));
//função de animação
move.easingFunction=Bounce.easeOut;

seq.addChild(move);
//depois de mover vamos fazer o glow
glow.alphaFrom=0;
glow.alphaTo=1;
glow.blurXTo=30;
glow.blurYTo=30;
glow.color=0x43ADF0;
glow.duration=1500;

seq.addChild(glow);
//finalmente o nosso fade;
fade.alphaFrom=1;
fade.alphaTo=0;
fade.duration=1500;

seq.addChild(fade);

seq.target=imagem;
seq.play();

}
//mais efeitos nativos como blur, glow, dissolve, iris, zoom etc…
//bastanto aceder a eles declarando
// iris:Iris = new Iris
// dissolve:Dissolve = new Dissolve;
// zoom:Zoom = new Zoom;
//blur
public function nativeBlur():void {
reset();
imagem.source=img2;
imagem.x=(this.width/2)-(originalSizeW/2);
imagem.y=(this.height/2)-(originalSizeH/2);
var blur:Blur = new Blur;
blur.target=imagem;
blur.blurXTo=10;
blur.blurYTo=10;
blur.duration=100;
blur.play();
isBlur=true;
}

//glow
public function nativeGlow():void {
reset();
imagem.source=img2;
imagem.x=(this.width/2)-(originalSizeW/2);
imagem.y=(this.height/2)-(originalSizeH/2);
var glow:Glow = new Glow;
glow.target=imagem;
glow.alphaFrom=0;
glow.alphaTo=1;
glow.blurXTo=30;
glow.blurYTo=30;
glow.color=0x43ADF0;
glow.play();
isGlow=true;
}
}
}
[/coolcode]

Finalmente no vosso testAS3Effects.mxml coloquem o código:
[coolcode language="xml" download="testAS3Effects.mxml"]

[/coolcode]

E agora apenas têm que copiar estas duas imagens com os respectivos nomes para a mesma pasta do effects.as (com/msdevstudio)

Compilem o vosso projecto e vejam o nosso explorador de animação e efeitos a funcionar

Por hoje foi mais código, mas uma ótima forma de aprender a usar efeitos e animações, certo?
Podem ver o resultado final disponivel aqui.

(Notem que as imagens são diferentes, posem usar as que disponibilizei ou quaisquer outras. Os downloads dos códigos podem ser feitos nas caixas dos códigos em cima, mas devido a problemas de formatação por vezes podem apresentar caracteres estranhos que podem impedir o seu funcionamento correto.)

Duvidas? Pergunte aqui!

Abraço.

Hoje vamos tomar especial atenção à possibilidade de alterar uma classe “pai” para que possamos controlar, modificar ou até substituir os dados de determinada função dessa mesma class. No action script este tipo de operação pode ser feito usando a palavra override, é dela que vamos falar hoje.

5.4. Re-Escrever métodos em classes.

Outro ponto muito util é no caso de já termos uma class totalmente feita, mas necessitamos de outra igual mas que substitua ou invalide uma ou outra função da class pai. Este método chama-se override, quem em português será parecido com re-escrever, ou seja, escrever por cima / substituir determinados pontos. De notar que só é possivel utilizar este método override em funções que tenham sido declaradas como public, por exemplo:
[coolcode lang="actionscript"]
public function info():void{

}
[/coolcode]
Para demonstrar este método, teremos que fazer algumas alterações na nossa classe que criamos anteriormente, já que é esse exemplo que será usado.

Vamos inicar com o exemplo da nossa ultima class criada e vamos escrever o simples código:
[coolcode lang="actionscript"]
public  function painelInfo():String {
return PANEL_DATE + ” – ” + PANEL_H + “-” + PANEL_W + “-” + PANEL_TITLE;
}
[/coolcode]

Adicionando esta função a nossa class devolveria uma suposta string de informação do nosso painel.

Ficando a class assim:

[coolcode lang="actionscript"]
package  teste
{
public class fullDef extends def
{
public const PANEL_DATE:String = “20/09/2008″;

public function fullDef()
{

}

public function painelInfo():String {
return PANEL_DATE + ” – ” + PANEL_H + “-” + PANEL_W + “-” + PANEL_TITLE;
}
}
}
[/coolcode]
O meu objectivo vai ser criar uma class que irá extender esta anterior e evitar que ela devolva qualquer valor quando for chamada a função painelInfo() ou que devolva um valor por mim definido. Para efectuar esta acção exste um método chamado override que vou passar a explicar.

Criando uma nova class que irá extender esta, ficamos asism:

[coolcode lang="actionscript"]
package  teste
{
public class customFullDef extends fullDef
{
public function customFullDef()
{
super();
}
}
}
[/coolcode]
aqui a class apenas se encontra extendida, e se a função painelInfo() está disponivel nela e vai devolver:
[coolcode lang="actionscript"]
PANEL_DATE + ” – ” + PANEL_H + “-” + PANEL_W + “-” + PANEL_TITLE;
[/coolcode]
podem testar da seguinte forma:
[coolcode lang="actionscript"]
var cfdef:customFullDef = new customFullDeff();

trace  (“->”+cfdef.painelInfo());
//o resultado será “->20/09/2008 – 300 – 400 – Painel personalizado
[/coolcode]

Quando esta função for chamada, o que eu quero é evitar que esta se comporte da mesma maneira, para isso adiciono:
[coolcode lang="actionscript"]
override protected function painelInfo():String {
return “Painel Protegido / sem definições”;
}

[/coolcode]
à class, ficando assim:
[coolcode lang="actionscript"]
package  teste
{
public class customFullDef extends fullDef
{
public function customFullDef()
{
super();
}

override protected function painelInfo():String {
return “Painel Protegido / sem definições”;
}
}
}
[/coolcode]
se agora chamar a class:
[coolcode lang="actionscript"]
var cfdef:customFullDef = new customFullDeff();

trace  (“->”+cfdef.painelInfo());

//o resultado será “-> Painel Protegido / sem definições”
[/coolcode]
como podem ver podemos interceptar, substituir, incrementar ou até eliminar por completo a utilidade de uma função / metodos normais, mas devem ter em especial atenção que o override não funciona em nenhum dos seguintes tipos/objetos:

• Variaveis
• Constantes
• Objetos/Métodos static (estaticos)
• Métodos que implementam uma interface
• Métodos que sejam marcados como final.

No caso em cima foi substituida a resposta normal da nossa class de origem e atribuida uma nova resposta quando essa função for chamada.

Bom, por hoje é tudo, e não se esqueçam que podem ter acesso a todos os tutoriais até aqui escritos aqui.

Duvidas? Use o fórum.

Abraço.

Tutoriais Flash, Flex and AIR

 Bom, venho falar do The Tech Labs disponivel em http://www.thetechlabs.com que se dedica exclusivamente à publicação de tutoriais Flash, Flex e Air, embora seja em inglês, o seu conteudo é muito facil de entender, até porque disponibiliza em todos os seus exemplos o código fonte para download. 

De entre os artigos encontra de tudo, desde uma série de exemplos de como trabalhar com a framework alternativa3d, ou away3d até aplicações completas quer para Flash, Flex, Air ou até mesmo flash lite.

Recentemente também conta com a minha participação (se o facto de estar em inglês não agrada, talvez assim já mereça uma visita… huahuah) onde já coloquei 3 tutoriais, 2 dedicados ao Flex e um ao Flash (sim, também trabalho com flash) que têm como titulos:

Integrate Flex Builder 3.0 & Php easly with the fresh ZendAMF

Build a contact manager in Flex with ZendAMF; Part One – Layout; From Photoshop to Flex

Create real water effects with Flash CS4 & ActionScript 3.0

Dêm uma vista de olhos, e aproveitem para navegar pelo resto do site, de certeza que vão encontrar alguma coisa bem util! Abraço!

Depois da mudança de layout e a criação de alguns widgets para o blog, reparei que tenho 130 artigos publicados no blog e cerca de 560 comentários, o que dá uma media de quase 6 comentários por post, no entanto existem posts com muitos comentários que são duvidas sobre AS3 e Flex, algumas nem falam directamente do artigo/tutorial, pelo que houve necessidade de criar uma area onde possam ser discutidos alguns assuntos sobre o blog, artigos, novidades e ria’s em geral, e o forum msdevstudio nasceu precisamente para preencher essa necessidade. Algumas duvidas que surgam não ligadas ao artigo/post em causa serão respondidas no forum, pelo que passará a ser o local mais indicado para duvidas não relacionadas.

Podem aceder ao forum em forum.msdevstudio.com.

Registem-se, perguntem, partilhem e ajudem!

Abraço.
Mário Santos.

Apesar de englobar apenas os produtos cs3, tais como o Ilustrador, Photoshop, Fireworks, Bridge, Contribute, Flash e não dedicar muito ao desenvolvimento de ria’s, é interessantíssimo para todos, mesmo os programadores, para todos ficarmos a ganhar com interfaces e conhecimentos da grande vantagem do conhecimento dos produtos da adobe.

Os vídeos online resultam de uma parceria da adobe com a lynda.com que resultou num excelente trabalho.

Bom, os curiosos já estão fartos de ler, por isso aqui vai o desejado link para o “Adobe Video Workshop” e paciência para os cerca de 180 vídeos Flex Powered!!

http://www.adobe.com/designcenter/video_workshop/

Um pérola, não?!

Edit: Só agora que descobri mais referençias a esse video workshop que afinal já está online desde a segunda metade do ano passado… epah…!! ando atrasado!! mas é um boa noticia na mesma, pode ser que não seja o unico a nao saber!!

Abraço.

outros assuntos também muito interessantes:

http://www.webdesignfromscratch.com/real-web-20-design.cfm Explica o Conceito web 2.0 e explica (não consensual) que a web 2.0 não se trata de design mas sim de simplicidade.

http://www.masternewmedia.org/…/web-20-design-simple-social-design-components-20071017.htm Web 2.0 Social design Components.

http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/ 9 Princípios básicos para o bom web design

http://www.photoshoplab.com/web20-design-kit.html Web 2.0 Design Kit

Estes links, lidos atentamente, conseguem formar-nos para termos um pouco mais de cuidado a desenhar sites web 2.0 bem como a entender o seu conceito e a aprender como desenhar certos detalhes do nosso site.

Vele mesmo a pena lerem estes links, principalmente o 1, 2 e 4

Abraço.

Em Português / Brasileiro :

http://www.riapt.org/ Comunidade Portuguesa de Ria’s
http://www.vedovelli.com.br/ Site com alguns screecast’s.
http://www.flexbrasil.org Site oficial da lista flex-brasil do yahoo
http://www.igorcosta.com/blog/ Site do fundador do Flex-Brasil
http://www.wendelmaques.com.br/ Site sobre Ajax, extjs, air e flex.
http://leonardofranca.com.br/index.php/pt/ Site que fala de tudo um pouco sobre Ria’s
http://blog.zellen.com.br/ Site dedicado a Ria’s

Em Inglês/ Outros :

http://www.flex.org Site oficial do Flex
http://www.amfphp.com Biblioteca php/mysql/sql para comunicar com o flex/flash
http://www.person13.com/wordpress/ Fala de tudo um pouco…
http://flexed.wordpress.com/ Flex e ActionScript
http://labs.adobe.com/technologies/air/ Adobe Air
http://labs.adobe.com/technologies/flex/ Adobe Flex
http://silverlight.net/ Silverlight da Microsoft
http://www.microsoft.com/expression/ À volta do mundo Silverlight / Expression

http://www.thefreecountry.com/webmaster/ajax.shtml Ajax frameworks e tutoriais

Adobe Flex Explorers
Uma lista de explorares que mostra muito do que é possivel fazer com o Flex:

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html – Style Explorer (Construtor de css)
http://www.maclema.com/content/sek/ Style Explorer (o mesmo mas com suporte ao kuller -http://kuller.adobe.com- )
http://demo.quietlyscheming.com/ChartSampler/app.html (Charts Explorer, explorador de graficos/estatisticas)
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html (Demonstraçao de componentes drag & drop )
http://www.merhl.com/flex2_samples/filterExplorer/ (Filter Explorer, fade, alpha, glow, distort )
http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html (Primitive Explorer, graficos via actionscript, propriedades)
http://flexapps.macromedia.com/flex15/explorer/explorer.mxml?versionChecked=true (Samples Explorer, exemplos com codigo fonte)
http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html (Custom Easing Function Explorer, permite personalizar efeitos via actionscript)

Devem ter o flash player 9 update (disponivel aqui: http://labs.adobe.com/downloads/flashplayer9.html) caso nao consigam ver.

Espero que vos seja util :)