Java Flex Applications

Bom dia caro leitor…

Finalmente saiu o trial do CS5 e após alguns dias o baixei para comprovar suas melhorias, bom uma delas é utilizar o Flash Builder e o Flex Framework para desenvolver suas aplicações na IDE do Flash mesmo, é interessante porém não fiz algo relativamente grande para dizer “wow isso sim é que é vantagem!!!”, mas acredito que é uma força grande para quem estava acostumado em utilizar o Flex e quer aprender a fazer algumas animações ou outros que gostariam de adicionar o Flex Framework para desenvolver um sistema que contenha animações também.

Enfim, vou fazer um demonstrativo dessa integração baseado no tutorial da Adobe mesmo, caso tenha alguma dúvida estarei a disposição para ajuda-lo e caso você tenha interesse pode ver o tutorial original no site da Adobe aqui!.

Neste tutorial estou pressupondo que você já possui afinidade em criar animações com o Flash e também em utilizar o Flash Builder, mas se você, assim como eu, conhecia apenas o Flex Builder e o Flash CS4 e tinha um conhecimento básico de animação não terá dificuldades.

Baixe os arquivos do tutorial aqui!, estes arquivos são do tutorial da adobe, não possuo no momento um servidor para disponibilizar os arquivos que estou criando mas vou seguir meio a risca o que tem no site da Adobe mesmo.

Vamos criar um personagem que irá realizar alguns movimentos que executaremos por Action Script

Abra o Flash CS5 e crie um novo arquivo Action Script 3 e então precione ctrl+F8 para criar um novo simbolo e o nomeie Personagem (Character) sendo do tipo Movie Clip.

Selecione o Frame 50 do novo Simbolo e precione F5 para criar um frame na timeline.

Para melhores praticas vamos trabalhar com camadas (Layers) separando nosso serviço, então sua primeira camada se chamara Actions, pois será aonde colocaremos código Action Script. Selecione o primeiro frame de sua Layer e enão precione F9 para abrir as Actions e adicione o código stop(); para que o Simbolo não fique executando direto.

Em seguida adicione uma nova Layer e a nomeie como Imagens (Assets), aqui nesse ponto iremos adicionar imagens ao nosso personagem, caso você não tenha algumas imagens para colocar no seu personagem você pode baixar todos os arquivos de exemplo no inicio deste post. Adicione 5 imagens de diferentes posições do seu personagem (Uma imagem padrão, uma piscando, uma olhando para a direita, uma olhando para a esquerada e uma olhando para cima) na biblioteca, para melhor dividir o seu trabalho eu aconselho criar uma nova pasta na biblioteca com o nome Imagens ou Bitmaps, enfim como achar melhor, para colocar suas imagens separadas.

Selecione o primeiro frame e adicione a sua imagem padrão (Default) do personagem, selecione o frame 10 e precione F6 para adicionar uma KeyFrame e então adicione uma imagem de seu personagem piscando (Blink) e faça os mesmos procedimentos nos seguintes frames:

- Frame 20 olhando para a esquerda (Look Left);

- Frame 30 olhando para a direita (Look Rigth);

- Frame 40 olhando para cima (Look Up);

Adicione uma nova Layer e a nomeie Logo, aqui iremos adicionar no frame 1 uma logomarca ao lado do seu personagem.

Agora vamos criar nossa classe de personagem, precione ctrl+n ou vá em file>new e crie uma classe Action Script 3, note que agora você poderá selecionar se você quer criar a classe com o próprio flash ou utilizar o Flash Builder para isso, no caso selecione Flash Builder e de o nome da classe para Personagem (Character).

Note que no Flash Builder agora você terá os arquivos do flash ao seu lado, mas agora editando a classe Personagem utilizando o Flash Builder adicione o seguinte código:

import flash.display.MovieClip;
import mx.flash.UIMovieClip;

public class Personagem extends UIMovieClip{

    public function Personagem(){
        super();
    }

    //*******************
    // Constantes:

    static public const PADRAO:String = "padrao";
    static public const PISCANDO:String = "piscando";
    static public const OLHAR_ESQUERDA:String = "olhar_esquerda";
    static public const OLHAR_DIREITA:String = "olhar_direita";
    static public const OLHAR_CIMA:String = "olhar_cima";
    static public const PAUSE:String = "pause";

    //*******************
    // Metodos:

    public function mostrarEstado( label:String, play:Boolean=false ):void{

        // Pausa o estado atual...
        if( label == Personagem.PAUSE ){
            return;
        }
        if( play ){
            gotoAndPlay(label);
        }else{
            gotoAndStop(label);
        }
    }

    //---------------
    // atalhos
    public function padrao():void{
        mostrarEstado(Personagem.PADRAO);
    }

    public function piscando():void{
        mostrarEstado(Personagem.PISCANDO);
    }

    public function olharEsquerda():void{
        mostrarEstado(Personagem.OLHAR_ESQUERDA);
    }

    public function olharDireita():void{
        mostrarEstado(Personagem.OLHAR_DIREITA);
    }

    public function olharCima():void{
        mostrarEstado(Personagem.OLHAR_CIMA);
    }
}

Criado nossa classe de personagem vamos agora criar uma classe para fazer uma animação.

Retornando ao Flash CS5 vamos criar uma classe principal acessando as propriedades e clicando em editar ao lado do campo Class, ele vai imitir o erro informando que não existe classe e que você deve criar uma nova, crie uma nova classe chamada AnimacaoPersonagem e a edite no Flash Builder novamente adicionando o codigo a seguir:
import flash.display.MovieClip;
import flash.events.TimerEvent;
import flash.utils.Timer;

public class AnimacaoPersonagem extends MovieClip{

//*******************
// Propriedades:

public var target:Personagem;
public var states:Array;
public var state:uint = 0;
public var timer:Timer;
public var timerDelay:Number = 1000; // millisegundos

public function AnimacaoPersonagem(){

super();

target = new Personagem();
target.x = (stage.stageWidth - target.width) / 2;
target.y = (stage.stageHeight - target.height) / 2;
addChild(target);

// Cria nossa animação
states = new Array();
states = new Array();
states[0] = Personagem.PISCANDO;
states[1] = Personagem.PADRAO;
states[2] = Personagem.OLHAR_ESQUERDA;
states[3] = Personagem.OLHAR_DIREITA;
states[4] = Personagem.PADRAO;
states[5] = Personagem.PISCANDO;
states[6] = Personagem.OLHAR_CIMA;
states[7] = Personagem.PADRAO;
states[8] = Personagem.PISCANDO;
states[9] = Personagem.PADRAO;

// Cri um timer para executar nossa animação
timer = new Timer(timerDelay);
timer.addEventListener(TimerEvent.TIMER, onTimerTick);
timer.start();
}

//*******************
// Eventos:

private function onTimerTick(event:TimerEvent):void{

// Mostra nossa animacao
target.mostrarEstado(states[state]);

// Mostra o proximo estado
state++;

// Cria um loop para ficar executando
if( state == states.length ){
state = 0;
}
}
}

Agora precione ctrl+F5, no Flash Builder mesmo, que executará a nossa animação.

Em um outro momento com mais tempo vou concluir este tutorial, a principio seria isso até porque não queria me extender muito (o que já é um pouco tarde mas…) e deixarei para um proximo post criar uma iteratividade e utilizar o Flex Framework para isso (criar uns botões para fazer a animação, enfim).

Espero que tenha gostado e que eu tenha sido claro na explicação.

Tenha um bom dia e até a próxima!