Principal

Aprendendo o ActionScript 3.0 (Parte 2)

Qua, 07/05/2008 - 19:19 — mozartpetter

Criando algo de verdade

No artigo anterior, vimos o que são pacotes, classes e objetos, e também como e porque usá-los.

Agora, vamos utilizar os conhecimentos que temos para criar novas coisas, coisas mais úteis (eu espero). Vamos começar por um cara que é figura batida em qualquer site: o botão.
Não importa pra que, sempre existe um botão em um site, e das mais variadas formas. E, por ser algo simples, ele é o exemplo perfeito para começarmos a nos habituar com a linguagem.

Quando falamos em botão no ActionScript, temos 2 tipos de classes relacionadas diretamente com os botões: a classe Button que é nada mais nada menos que o componente Button, a classe SimpleButton que representa toda e qualquer instância do tipo button criadas na IDE (Insert > New Symbol > Button). Temos ainda a classe ButtonBase, que tem como objetivo ser uma classe base para todos os botões, mas ela não existe no ActionScript para Flex, e é destinada apenas a componentes.

Button Class

Com a classe Button nós podemos adicionar, controlar e manipular uma instância do componente Button. O único requisito, no entanto, é que o componente Button esteja presente na biblioteca do nosso FLA.

Crie um novo arquivo Flash File (ActionScript 3.0). Abra o painel de componentes (Window > Components) e arraste o componente Button para a biblioteca.
Selecione o frame vazio da timeline e abra o painel de ações (Window > Actions).

import fl.controls.Button;   

// Nova instância de Button. 
var objButton:Button = new Button();   

// Definindo o label do botão. 
objButton.label = "Meu Botão";   

// Adicionando o botão ao palco. 
this.addChild(objButton);

Primeiro importamos a classe Button para que possamos utilizá-la. Em seguida, criamos uma nova instância da classe Button, definimos o texto do label e adicionamos o objeto criado ao palco.

Simples, não? Com a classe Button temos como alterar e manipular o nosso componente Button que está no palco. O componente já vem com diversas propriedades e métodos prontos, por isso seu uso é simples e rápido, pois ele já vem com muita coisa pronta.

Vamos alterar a cor da fonte do label do nosso botão:

import fl.controls.Button; 

// Nova instância de Button.
var objButton:Button = new Button(); 

// Objeto TextFormat.
var txtFormat:TextFormat = new TextFormat(); 

// Definindo a cor do texto.
txtFormat.color = 0x0099CC; 

// Definindo o label do botão.
objButton.label = "Meu Botão"; 

// Definindo o formato do texto ao botão.
objButton.setStyle("textFormat", txtFormat); 

// Adicionando o botão ao palco.
this.addChild(objButton);

Essas são algumas das muitas coisas que podemos fazer com a classe Button. Existe também como personalizar o formato do componente. Experimente ir na biblioteca, clicar com o botão direito sobre o componente e selecionar a opção Edit.

A tela que abrirá contém todos os estados do botão. Através dela você pode alterar a forma do componente, mas dependendo da forma desejada, isso pode se tornar uma tarefa um pouco mais complicada.

SimpleButton Class

Quando você cria, por exemplo, um quadrado em seu palco, e converte ele para um símbolo do tipo Button, você está na verdade criando uma instância da classe SimpleButton.

O bom e velho símbolo Button tem 4 estados, que você deve conhecer bem:

  • Up (upState): estado normal do botão.
  • Over (overState): estado quando o mouse passa sobre o botão.
  • Down (downState): estado quando o botão do mouse é pressionado sobre o botão.
  • Hit (hitTestState): estado que define a área clicável do botão.

Bom, se o símbolo do tipo Button é na verdade uma instância da classe SimpleButton, isso quer dizer que qualquer objeto do tipo SimpleButton terá esses 4 estados, certo? Vamos ver isso de perto.

Crie um novo Flash File (ActionScript 3.0). Crie no palco um retângulo de cor azul (por exemplo, se preferir outra cor fique à vontade), e em seguida transforme-o em um Símbolo (Modify > Convert to Symbol) e nomeie-o upState. Assinale a opção Export for Actionscript, e em seguida pressione OK.

Traga sua atenção para o campo Class que se habilita, trazendo o mesmo nome de seu elemento. Este campo, serve para indicar o nome da classe à qual o seu símbolo pertence. Se a classe definida não for reconhecida como uma classe externa, que é o caso, o Flash criará a classe internamente.

BaseClass é a classe na qual o objeto será baseado. Mais tarde você entenderá como isso funciona quando falarmos de Herança.

Dessa forma, se quisermos criar uma instância deste elemento dinâmicamente, utilizaremos new upState(). Lembre disso, pois utilizaremos mais adiante.

O que fizemos foi criar o primeiro estado (up) do nosso botão. Repita a mesma operação mais três vezes (utilizando cores diferentes) e nomeie os símbolos como downState, overState e hitState, respectivamente.

Feito isso, remova qualquer elemento que esteja no palco, e abra a biblioteca (Window > Library) e verá que todos os símbolos criados estarão lá. Cada símbolo representará um estado do botão. Agora, vamos através do ActionScript, criar uma instância da classe SimpleButton, e utilizar esses símbolos como seus estados.

Abra o painel de ações (Window > Actions) e insira o seguinte código:

import flash.display.SimpleButton; 

// Objeto SimpleButton.
// new SimpleButton(up state, over state, down state, hit state);
var objButton:SimpleButton = new SimpleButton(new upState(), new overState(), new downState(), new hitState()); 

// Posicionando objeto.
objButton.x = 150;
objButton.y = 50; 

// Adicionando objeto ao palco.
this.addChild(objButton);

Importamos a classe SimpleButton, em seguida criamos o objeto SimpleButton, passando como parâmetro os 4 objetos que a classe deve utilizar como estado. Lembre que upState é o nome da classe que definimos para nosso símbolo na biblioteca, mas como a classe não existe (em um caminho físico), o Flash a cria internamente.

Depois, só ajustamos a posição do objeto, pra dizer que fizemos algo além de criar um botão.

Teste o filme (Control > Teste Movie), e verá um belo exemplar de botão.

SimpleButton Class (parte 2)

Apesar de eu acreditar piamente que criar um botão 100% através do código, não seja uma das maneiras mais práticas, vou apresentar um exemplo com o intuito de praticar a linguagem.

Seguindo ainda na SimpleButton, crie um novo Flash File (ActionScript 3.0). Ao contrário do outro, o desafio aqui é não criar absolutamente 1 linha sem que seja pelo código. O primeiro passo é planejar o que vamos precisar para criar o nosso botão.

Como já sabemos, um objeto SimpleButton tem 4 estados (up, down, over e hit), e partindo deste princípio, precisaremos de algo que crie a forma do botão para os 4 estados. Eu sugiro criar uma classe chamada ButtonShape, que será responsável por "criar a forma" do nosso botão.
Fora isso, precisamos de uma classe que crie o objeto botão entre outras coisas. Essa classe será a classe ButtonItem.

No diretório onde você está gravando os exercícios (se é que está), crie uma pasta chamada app, e dentro desta uma nova pasta chamada display.

O que estamos fazendo é criando o pacote (as pastas pra organizar, como vimos na Parte 1) para as nossas novas classes. O pacote app contém as classes da aplicação (pacote principal), e o pacote display contém as classes para os elementos visuais (no caso, um botão) de nossa aplicação.

Crie um novo arquivo ActionScript File e salve-o dentro de app/display com o nome de ButtonShape.as.

package app.display
{
        import flash.display.Shape;
       
        public class ButtonShape extends Shape
        {
                // Cor do elemento.
                private var shapeColor:Number = 0;
               
                // Largura do elemento.
                private var shapeWidth:Number = 0;
               
                // Altura do elemento.
                private var shapeHeight:Number = 0;
               
                /**
                 * Construtor.
                 *
                 * @param Number w Largura do retangulo.
                 * @param Number h Altura do retangulo.
                 * @param Number c Cor do retangulo.
                 */
                public function ButtonShape(w:Number, h:Number, c:Number)
                {
                        this.shapeWidth = w;
                        this.shapeHeight = h;
                        this.shapeColor = c;
                       
                        // Desenhando retangulo
                        this.draw();
                }
               
                /**
                 * Desenha o retangulo.
                 *
                 * @return void
                 */
                private function draw():void
                {
                        // Adicionando a cor ao shape criado.
                        this.graphics.beginFill(this.shapeColor);
                       
                        // Desenhando o retangulo.
                        // drawRect(x, y, width, height);
                        this.graphics.drawRect(0, 0, this.shapeWidth, this.shapeHeight);
                       
                        // Finalizando desenho.
                        this.graphics.endFill();
                }
        }
       
}

Vamos analisar linha a linha o que fizemos aqui, para que você entenda bem.

  • 1 - Indicamos à qual pacote nossa classe pertence.
  • 3 - Importamos a classe Shape. A classe shape é utilizada para criarmos formas através do ActionScript, como o retângulo que criaremos para o nosso botão.
  • 5 - Declaramos a nossa classe ButtonShape e herdamos a classe Shape. Peraí?! Herdamos? Calma. Herança é um dos conceitos básicos da orientação à objetos. Da mesma forma que você herdou determinados genes de seus pais (os bons, eu espero), uma classe pode herdar determinados métodos e propriedades de outras classes. Desta forma, não precisamos re-implementar coisas que já existem em outras classes, pois nós herdamos (entenda como copiar, é mais didático) seus métodos e propriedades, e podemos assim, apenas adicionar novas funcionalidades e/ou alterar as funcionalidades que foram herdadas.
    No caso da nossa classe, herdamos a classe Shape para que possamos utilizar os seus métodos para desenho.
  • 8 - Declaramos a propriedade shapeColor, que armazenará a cor do nosso retângulo.
  • 11 e 14 - Propriedade shapeWidth, que armazena a largura, e shapeHeight, que armazena a altura.
  • 23 - Construtor da classe. Recebe 3 parâmetros que estão suficientemente descritos.
  • 30 - Chamada ao método draw, para dar início à criação do retângulo.
  • 38 - Método draw, responsável por desenhar o retângulo com o tamanho e cor definidos no construtor. O void indica que nossa função não retorna nada. É importante que você sempre especifique um tipo de retorno para suas funções, pois assim o programa sabe o tipo de valor que sua função deve retornar.

Bom, nossa classe para criar o formato está pronta, agora vamos à classe responsável por criar o nosso botão.

Crie um novo ActionScript File, e salve o arquivo em app/display com o nome de ButtonItem.as.

package app.display
{
        import app.display.ButtonShape;
        import flash.display.SimpleButton;
       
        public class ButtonItem extends SimpleButton
        {
                /**
                 * Definindo cores dos estados do botao (default).
                 */
                private var upColor:Number = 0x0099CC;
                private var overColor:Number = 0x00FF00;
                private var downColor:Number = 0xFF0000;
               
                /**
                 * Tamanho da area do botao a ser construída (default).
                 */
                private var shapeWidth:Number = 100;
                private var shapeHeight:Number = 20;
               
                /**
                 * Construtor.
                 */
                public function ButtonItem():void
                {
                        // Criando estado do botao.
                        this.createButtonStates();
                }
               
                /**
                 * Cria os estados do botao (up, over, down e hit).
                 *
                 * @return void
                 */
                private function createButtonStates():void
                {
                        // Definindo um novo objeto ButtonShape ao upState.
                        this.upState = new ButtonShape(this.shapeWidth, this.shapeHeight, this.upColor);
                       
                        // Definindo um novo objeto ButtonShape ao overState.
                        this.overState = new ButtonShape(this.shapeWidth, this.shapeHeight, this.overColor);
                       
                        // Definindo um novo objeto ButtonShape ao downState.
                        this.downState = new ButtonShape(this.shapeWidth, this.shapeHeight, this.downColor);
                       
                        // Definindo um novo objeto ButtonShape ao hitTestState.
                        this.hitTestState = new ButtonShape(this.shapeWidth, this.shapeHeight, this.downColor);
                }
               
        }
       
}

  • 1 - Declaramos o pacote de nossa classe (acho que isso já está bem entendido, correto?).
  • 3 e 4 - Importamos as classes necessárias.
  • 11, 12 e 13 - Declaramos as variáveis que armazenam as cores padrões dos estados.
  • 18 e 19 - Altura e largura padrões do botão.
  • 24 - Construtor.
  • 35 - Método createButtonStates responsável por criar os 4 estados do botão. Lembra quando criamos manualmente os símbolos para os 4 estados da SimpleButton no exemplo anterior? Aqui fazemos a mesma coisa, criamos os objetos ButtonShape e os passamos para as propriedades upState, overState, downState e hitTestState da nossa classe, que foram herdadas da classe SimpleButton.

Volte para o arquivo FLA, criado anteriormente, salve-o com o nome de SimpleButton2.fla junto do nosso pacote app (junto, não dentro do pacote).

No painel de ações (Window > Actions) insira o seguinte código:

import app.display.ButtonItem;

// Objeto ButtonItem.
var item:ButtonItem = new ButtonItem();

// Posicionando item.
item.x = 100;
item.y = 100;

// Adicionando o objeto ao palco.
this.addChild(item);

Teste o filme e verá um botão, semelhante ao do exercício anterior, mas criado completamente em ActionScript, e o melhor, utilizando classes.

A lógica, a princípio, pode parecer complicada, mas na verdade ela é bem simples. Neste exemplo utilizamos 2 classes, uma responsável por criar o formato do botão (ButtonShape) e outra responsável por criar o botão propriamente dito (ButtonItem).

Tudo que for relacionado a forma do botão, nós iremos alterar na ButtonShape, e tudo que for relacionado ao botão propriamente dito, nós iremos alterar na ButtonItem.

No final das contas é tudo uma questão de organizar o código, de uma forma que dê para reaproveitar o máximo o que já foi feito, evitando a repetição desnecessária. O conceito de herança ajuda significativamente nessa parte, uma vez que evitamos ter que reescrever tudo que já existia em uma outra classe.

Futuramente poderemos implementar novas funcionalidades em nossos botões, ao passo que formos aprendendo.

Mozart Petter

AnexoTamanho
Parte 2.zip1.08 MB

Comentários

Seg, 20/10/2008 - 12:55 — superFlash

Duvida sobre classes.

Olá,
Como sei quando o "this" esta referenciando o palco ou outro objeto?
E como faria para citar e adicionar objetos no palco diretamente da classe?

Qui, 07/08/2008 - 11:48 — krammstein

Parabéns

Cara, gostei muito desse artigo, parabéns.
Agora tenho uma dúvida.
Imaginamos que eu crie no photoshop todos os estágios do botão.
Como eu colocaria no código as imagens.png?
 
Se puder me tirar essa dúvida eu agradeço muito.
 
Show cara, parabéns novamente.
 
Abraço
 
 

Qua, 04/06/2008 - 12:03 — aguia

Meus parabens!!!

Cara, parabens pelo excelente tutorial, mais pessoas deveriam fazer tutoriais tao bons e em portugues na net, parabens pela iniciativa, continue assim, aguardo mais, quero mais!!!!!!!!