Um aplicativo simples

Esta seção descreve as etapas para a criação de um aplicativo simples do ActionScript 3.0 usando componentes Flash e a ferramenta de autoria do Flash. O exemplo é fornecido como um arquivo FLA, com o código do ActionScript incluído na Linha do tempo, e também como um arquivo de classe externo do ActionScript, com um arquivo FLA que contém somente os componentes na biblioteca. De forma geral, é provável que você queira desenvolver aplicativos maiores usando arquivos de classe externos, para poder compartilhar código entre classes e aplicativos e facilitar a manutenção dos seus aplicativos. Para obter mais informações sobre a programação com o ActionScript 3,0, consulte Programação do ActionScript 3.0 .

Design do aplicativo

Nosso primeiro exemplo de aplicativo com componentes do ActionScript é uma variação do aplicativo “Hello World” padrão, com um design bastante simples:

  • O aplicativo será chamado de Greetings.

  • Ele utiliza uma TextArea para exibir uma saudação que é, inicialmente, Hello World.

  • Ele utiliza um ColorPicker que permite alterar a cor do texto.

  • Ele utiliza três RadioButtons que permitem definir o tamanho do texto como pequeno, grande ou muito grande.

  • Ele utiliza uma ComboBox que permite selecionar uma saudação diferente em uma lista suspensa.

  • O aplicativo utiliza componentes do painel Componentes, e também cria elementos do aplicativo com o código do ActionScript.

    A partir dessa definição, você pode começar a criar o aplicativo.

Criar o aplicativo Greetings

As etapas a seguir criam o aplicativo Greetings usando a ferramenta de autoria do Flash para criar um arquivo FLA, inserir componentes no Palco e adicionar código do ActionScript à Linha do tempo.

Criar o aplicativo Greetings em um arquivo FLA:

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.

    Uma nova janela do Flash é aberta.

  3. Selecione Arquivo > Salvar, nomeie o arquivo Flash como Greetings.fla e clique no botão Salvar.

  4. No painel Componentes do Flash, selecione um componente TextArea e arraste-o para o Palco.

  5. Na janela Propriedades, com a TextArea selecionada no Palco, digite aTa como nome da ocorrência e insira as seguintes informações:

    • Digite 230 como valor L (largura).

    • Digite 44 como valor A (altura).

    • Digite 165 como valor X (posição horizontal).

    • Digite 57 como valor Y (posição vertical).

    • Digite Hello World! para o parâmetro de texto, na guia Parâmetros.

  6. Arraste um componente ColorPicker para o Palco, insira-o à esquerda da TextArea e atribua a ele um nome de ocorrência de txtCp. Digite as seguintes informações no Inspetor de propriedades:

    • Digite 96 como valor X.

    • Digite 72 como valor Y.

  7. Arraste três componentes RadioButton para o Palco, um de cada vez, e atribua a eles os nomes de ocorrência de smallRb , largerRb e largestRb . Digite as seguintes informações no Inspetor de propriedades:

    • Digite 100 como valor L e 22 para o valor A de cada um deles.

    • Digite 155 como valor X.

    • Digite 120 como valor Y de smallRb, 148 para largerRb e 175 para largestRb.

    • Digite fontRbGrp para o parâmetro groupName de cada um deles.

    • Digite na guia Parâmetros os rótulos Small , Larger , Largest .

  8. Arraste uma ComboBox para o Palco e atribua a ela o nome de ocorrência de msgCb . Digite as seguintes informações no Inspetor de propriedades:

    • Digite 130 como valor L.

    • Digite 265 como valor X.

    • Digite 120 como valor Y.

    • Na guia Parâmetros, digite Greetings para o parâmetro do prompt.

    • Clique duas vezes no campo de texto do parâmetro dataProvider para abrir a caixa de diálogo Valores.

    • Clique no sinal de adição e substitua o valor do rótulo por Hello World!

    • Repita a etapa anterior para adicionar os valores de rótulos Have a nice day! e Top of the Morning!

    • Clique em OK para fechar a caixa de diálogo Valores.

  9. Salve o arquivo.

  10. Abra o painel Ações, se ainda não estiver aberto, pressionando F9 ou selecionando Ações no menu Janela. Clique no Quadro 1 da Linha do tempo principal e insira o seguinte código no painel Ações:

    import flash.events.Event; 
    import fl.events.ComponentEvent; 
    import fl.events.ColorPickerEvent; 
    import fl.controls.RadioButtonGroup; 
     
    var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); 
    rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
    txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
    msgCb.addEventListener(Event.CHANGE, cbHandler);

    As três primeiras linhas importam as classes de eventos usadas pelo aplicativo. Um evento ocorre quando um usuário interage com um dos componentes. As cinco linhas seguintes registram manipuladores de eventos para os eventos que o aplicativo deseja monitorar. Um evento click ocorre em um RadioButton quando um usuário clica nele. Um evento change ocorre quando um usuário seleciona uma cor diferente no ColorPicker. Um evento change ocorre na ComboBox quando um usuário escolhe uma saudação diferente na lista suspensa.

    A quarta linha importa a classe RadioButtonGroup, de forma que o aplicativo possa atribuir um ouvinte de eventos ao grupo de RadioButtons, em vez de atribuir o ouvinte a cada botão individualmente.

  11. Adicione a linha de código a seguir ao painel Ações para criar o objeto TextFormat tf , que o aplicativo usa para alterar as propriedades de estilo size e color do texto na TextArea.

    var tf:TextFormat = new TextFormat();
  12. Adicione o código a seguir para criar a função de manipulação de eventos rbHandler . Essa função manipula um evento click quando um usuário clica em um dos componentes RadioButton.

    function rbHandler(event:MouseEvent):void { 
        switch(event.target.selection.name) { 
            case "smallRb": 
                tf.size = 14; 
                break; 
            case "largerRb": 
                tf.size = 18; 
                break; 
            case "largestRb": 
                tf.size = 24; 
                break; 
            } 
            aTa.setStyle("textFormat", tf); 
    }

    Essa função usa uma instrução switch para examinar a propriedade target do objeto event , a fim de determinar qual RadioButton acionou o evento. A propriedade currentTarget contém o nome do objeto que acionou o evento. Dependendo do RadioButton no qual o usuário clicou, o aplicativo altera o tamanho do texto na TextArea para 14, 18 ou 24 pontos.

  13. Adicione o código a seguir para implementar a função cpHandler() , que manipula uma alteração no valor do ColorPicker:

    function cpHandler(event:ColorPickerEvent):void { 
        tf.color = event.target.selectedColor; 
        aTa.setStyle("textFormat", tf); 
    }

    Essa função define a propriedade color do objeto TextFormat tf como a cor selecionada no ColorPicker, e depois chama setStyle() para aplicá-la ao texto na ocorrência de TextArea aTa .

  14. Adicione o código a seguir para implementar a função cbHandler() , que manipula uma alteração na seleção na ComboBox:

    function cbHandler(event:Event):void { 
        aTa.text = event.target.selectedItem.label; 
    }

    Essa função simplesmente substitui o texto na TextArea pelo texto selecionado na ComboBox, event.target.selectedItem.label .

  15. Selecione Controlar > Testar filme ou pressione Control+Enter para compilar o código e testar o aplicativo Greetings.

    A próxima seção mostra como criar o mesmo aplicativo com uma classe ActionScript externa e um arquivo FLA que tem apenas os componentes necessários na biblioteca.

Criar o aplicativo Greetings2 com um arquivo de classe externo:

  1. Selecione Arquivo > Novo.

  2. Na caixa de diálogo Novo documento, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.

    Uma nova janela do Flash é aberta.

  3. Selecione Arquivo > Salvar, nomeie o arquivo Flash como Greetings2.fla e clique no botão Salvar.

  4. Arraste cada um dos seguintes componentes do painel Componentes para a biblioteca:

    • ColorPicker

    • ComboBox

    • RadioButton

    • TextArea

      O arquivo SWF compilado utilizará todos esses ativos. Então, você precisa adicioná-los à biblioteca. Arraste os componentes para a parte inferior do painel Biblioteca. Conforme você adiciona esses componentes à biblioteca, outros ativos (como List, TextInput e UIScrollBox) são adicionados automaticamente.

  5. Na janela Propriedades, em Classe do documento, digite Greetings2 .

    Se o Flash exibir um aviso informando que " não foi possível localizar uma definição para a classe do documento", ignore-o. Você definirá a classe de Greetings2 nas etapas seguintes. Essa classe define a função principal do aplicativo.

  6. Salve o arquivo Greetings2.fla.

  7. Selecione Arquivo > Novo.

  8. Na caixa de diálogo Novo documento, selecione Arquivo ActionScript e clique em OK.

    Uma nova janela de script é aberta.

  9. Adicione o código a seguir à janela de script:

    package { 
        import flash.display.Sprite; 
        import flash.events.Event; 
        import flash.events.MouseEvent; 
        import flash.text.TextFormat; 
        import fl.events.ComponentEvent; 
        import fl.events.ColorPickerEvent; 
        import fl.controls.ColorPicker; 
        import fl.controls.ComboBox; 
        import fl.controls.RadioButtonGroup; 
        import fl.controls.RadioButton; 
        import fl.controls.TextArea; 
        public class Greetings2 extends Sprite { 
            private var aTa:TextArea; 
            private var msgCb:ComboBox; 
            private var smallRb:RadioButton; 
            private var largerRb:RadioButton; 
            private var largestRb:RadioButton; 
            private var rbGrp:RadioButtonGroup; 
            private var txtCp:ColorPicker; 
            private var tf:TextFormat = new TextFormat(); 
            public function Greetings2() {    

    O script define uma classe do ActionScript 3.0 denominada Greetings2. O script faz o seguinte:

    • Importa classes que serão usadas no arquivo. Normalmente, você adicionaria essas instruções import à medida que fizesse referência às diferentes classes no código. Mas, para abreviar o processo, este exemplo importa todas em uma só etapa.

    • Declara variáveis representando os diversos tipos de objetos componentes que serão acrescentados ao código. Outra variável cria o objeto TextFormat tf .

    • Define uma função de construtor, Greetings2() , para a classe. Nas etapas seguintes, adicionaremos linhas a essa função e outros métodos à classe.

  10. Selecione Arquivo > Salvar, nomeie o arquivo como Greetings2.fla e clique no botão Salvar.

  11. Adicione as seguintes linhas de código à função Greeting2() :

        createUI(); 
        setUpHandlers(); 
    }

    Agora, a função deve ter a seguinte aparência:

    public function Greetings2() { 
        createUI(); 
        setUpHandlers(); 
    }
  12. Adicione as linhas de código a seguir depois da chave de fechamento do método Greeting2() :

    private function createUI() { 
        bldTxtArea(); 
        bldColorPicker(); 
        bldComboBox(); 
        bldRadioButtons(); 
    } 
    private function bldTxtArea() { 
        aTa = new TextArea(); 
        aTa.setSize(230, 44); 
        aTa.text = "Hello World!"; 
        aTa.move(165, 57); 
        addChild(aTa); 
    } 
    private function bldColorPicker() { 
        txtCp = new ColorPicker(); 
        txtCp.move(96, 72); 
        addChild(txtCp); 
    } 
    private function bldComboBox() { 
        msgCb = new ComboBox(); 
        msgCb.width = 130; 
        msgCb.move(265, 120); 
        msgCb.prompt = "Greetings"; 
        msgCb.addItem({data:"Hello.", label:"English"});             
        msgCb.addItem({data:"Bonjour.", label:"Français"});             
        msgCb.addItem({data:"¡Hola!", label:"Español"});             
        addChild(msgCb); 
    } 
    private function bldRadioButtons() { 
        rbGrp = new RadioButtonGroup("fontRbGrp"); 
        smallRb = new RadioButton(); 
        smallRb.setSize(100, 22); 
        smallRb.move(155, 120); 
        smallRb.group = rbGrp; //"fontRbGrp"; 
        smallRb.label = "Small"; 
        smallRb.name = "smallRb"; 
        addChild(smallRb); 
        largerRb = new RadioButton(); 
        largerRb.setSize(100, 22); 
        largerRb.move(155, 148); 
        largerRb.group = rbGrp; 
        largerRb.label = "Larger"; 
        largerRb.name = "largerRb"; 
        addChild(largerRb); 
        largestRb = new RadioButton(); 
        largestRb.setSize(100, 22); 
        largestRb.move(155, 175); 
        largestRb.group = rbGrp; 
        largestRb.label = "Largest"; 
        largestRb.name = "largestRb"; 
        addChild(largestRb); 
    }

    Essas linhas fazem o seguinte:

    • Instanciam os componentes usados no aplicativo.

    • Definem o tamanho, a posição e as propriedades de cada componente.

    • Adicionam todos os componentes ao Palco usando o método addChild() .

  13. Depois da chave de fechamento do método bldRadioButtons() , adicione o seguinte código ao método setUpHandlers() :

    private function setUpHandlers():void { 
        rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
        txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
        msgCb.addEventListener(Event.CHANGE, cbHandler); 
    } 
    private function rbHandler(event:MouseEvent):void { 
        switch(event.target.selection.name) { 
            case "smallRb": 
                tf.size = 14; 
                break; 
            case "largerRb": 
                tf.size = 18; 
                break; 
            case "largestRb": 
                tf.size = 24; 
                break; 
        } 
        aTa.setStyle("textFormat", tf); 
    } 
    private function cpHandler(event:ColorPickerEvent):void { 
        tf.color = event.target.selectedColor; 
        aTa.setStyle("textFormat", tf); 
    } 
    private function cbHandler(event:Event):void { 
        aTa.text = event.target.selectedItem.data; 
    } 
    } 
    }

    Essas funções definem manipuladores de eventos para os componentes.

  14. Selecione Arquivo > Salvar para salvar o arquivo.

  15. Selecione Controlar > Testar filme ou pressione Control+Enter para compilar o código e testar o aplicativo Greetings2.

Desenvolver e executar os exemplos subseqüentes

Tendo desenvolvido e executado o aplicativo Greetings, você conta com o conhecimento básico necessário para executar os outros exemplos de código apresentados neste livro. O código relevante do ActionScript 3.0 em cada exemplo será destacado e debatido, e você deverá ser capaz de recortar e colar em um arquivo FLA, compilar e executar cada um dos exemplos deste livro.