Uso do componente Button

O componente Button é um botão retangular redimensionável que o usuário pode pressionar com o mouse ou a barra de espaço para iniciar uma ação no aplicativo. Você pode adicionar um ícone personalizado a um botão. Também é possível alterar o comportamento de um botão de modo que ele deixe de ser um botão de ação para se tornar um botão de alternância. O botão de alternância permanece pressionado quando é clicado e retorna ao seu estado ativo quando é clicado novamente.

O botão é a parte fundamental de vários formulários e aplicativos da Web. Você poderá usar os botões sempre que um usuário tiver que iniciar um evento. Por exemplo, a maioria dos formulários têm um botão Enviar. Você também poderá adicionar os botões Anterior e Próximo a uma apresentação.

Interação do usuário com o componente Button

É possível ativar ou desativar um botão em um aplicativo. No estado desativado, um botão não recebe entradas de mouse nem de teclado. Um botão ativado receberá o foco se você clicar nele ou acessá-lo por meio da tecla tab. Quando uma ocorrência de Button estiver com o foco, você poderá usar as seguintes teclas para controlá-la:

Tecla

Descrição

Shift+Tab

Move o foco para o objeto anterior.

Barra de espaço

Pressiona ou solta o botão e aciona o evento click .

Tabulação

Move o foco para o próximo objeto.

Enter/Return

Move o foco para o objeto seguinte se um botão for definido como o botão padrão do FocusManager.

Para obter mais informações sobre o controle do foco, consulte a interface IFocusManager e a classe FocusManager na Referência do ActionScript 3.0 para Flash Professional e Trabalho com o FocusManager .

Uma visualização ao vivo de cada ocorrência de Button reflete as alterações feitas nos parâmetros no Inspetor de propriedades ou no Inspetor de componentes durante a criação.

Nota: Se um ícone for maior do que o botão, ele ultrapassará as bordas do botão.

Para designar um botão como botão de ação padrão em um aplicativo (o botão que recebe o evento click quando um usuário pressiona Enter), defina FocusManager.defaultButton . Por exemplo, o código a seguir define o botão padrão para ser uma ocorrência de Button chamada submitButton . 

FocusManager.defaultButton = submitButton;

Quando você adicionar o componente Button a um aplicativo, poderá torná-lo acessível a um leitor de tela adicionando as seguintes linhas do código do ActionScript: 

import fl.accessibility.ButtonAccImpl; 
 
ButtonAccImpl.enableAccessibility();

A acessibilidade de um componente é ativada somente uma vez, independentemente de quantas ocorrências são criadas.

Parâmetros do componente Button

Você pode definir os seguintes padrões de autoria no Inspetor de propriedades (Janela > Propriedades > Propriedades) ou no Inspetor de componentes (Janela > Inspetor de componentes) de cada instância de Button: emphasized , label , labelPlacement , selected e toggle . Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome. Ao atribuir um valor a esses parâmetros, você está definindo o estado inicial da propriedade no aplicativo. A definição da propriedade no ActionScript substitui o valor definido no parâmetro. Para obter informações sobre os possíveis valores desses parâmetros, consulte a classe Button na Referência do ActionScript 3.0 para Flash Professional .

Criar um aplicativo com o componente Button

O procedimento a seguir explica como adicionar um componente Button a um aplicativo durante a criação. Neste exemplo, Button altera o estado de um componente ColorPicker quando você clica nele.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um componente Button do painel Componentes para o Palco e digite os seguintes valores no Inspetor de propriedades:

    • Digite o nome de ocorrência aButton .

    • Digite Show como parâmetro label.

  3. Adicione um ColorPicker ao Palco e atribua a ele o nome de ocorrência aCp .

  4. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    aCp.visible = false; 
 
aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
     
    switch(event.currentTarget.label) { 
        case "Show": 
            aCp.visible = true; 
            aButton.label = "Disable"; 
            break; 
        case "Disable": 
            aCp.enabled = false; 
            aButton.label = "Enable"; 
            break; 
        case "Enable": 
            aCp.enabled = true; 
            aButton.label = "Hide"; 
            break; 
        case "Hide": 
            aCp.visible = false; 
            aButton.label = "Show"; 
            break; 
    } 
}

    A segunda linha do código registra a função clickHandler() como função de manipulador do evento MouseEvent.CLICK . O evento ocorre quando um usuário clica no botão, fazendo com que a função clickHandler() adote uma das seguintes ações, dependendo do valor do botão:

    • Mostrar faz com que o ColorPicker fique visível e altera o rótulo do botão para Desativar.

    • Desativar desativa o ColorPicker e altera o rótulo do botão para Ativar.

    • Ativar ativa o ColorPicker e altera o rótulo do botão para Ocultar.

    • Ocultar faz com que o ColorPicker fique invisível e altera o rótulo do botão para Mostrar.

  5. Selecione Controlar > Testar filme para executar o aplicativo.

Criar um aplicativo com o componente Button

O procedimento a seguir cria um botão de alternância por meio do ActionScript e exibe o tipo de evento no painel Saída quando você clica no botão. O exemplo cria a ocorrência de Button chamando o construtor da classe e a adiciona ao Palco chamando o método addChild .

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente Button do painel Componentes para o painel Biblioteca do documento atual.

    Esse procedimento adicionará o componente à biblioteca, mas não o tornará visível no aplicativo.

  3. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código para criar uma ocorrência de Button: 

    import fl.controls.Button; 
 
var aButton:Button = new Button(); 
addChild(aButton); 
aButton.label = "Click me"; 
aButton.toggle =true;  
aButton.move(50, 50);

    O método move() posiciona o botão no local 50 (coordenada x), 50 (coordenada y) no Palco.

  4. Agora, adicione o seguinte ActionScript para criar um ouvinte de evento e uma função de manipulador de evento: 

    aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    trace("Event type: " + event.type); 
}

  5. Selecione Controlar > Testar filme.

    Quando você clica no botão, o Flash exibe a mensagem “Tipo de evento: click” no painel Saída.