Introdução

Este tutorial que ensina a utilizar o UI Componente Check Box incorporado no Flash MX e definir as suas propriedades.

Downloads:

Ficheiro Fla Tutorial em PDF

Abre um novo documento e faz aparecer a janela dos "UI components", clica no elemento Check Box e leva-o até ao novo documento. Depois faz aparecer a janela das propriedades...

O que é uma Check Box ?

Uma check box é um elemento único, é independente ou pode estar ligado a acções particulares a efectuar. É um elemento clicável, e que pode ser definido por defeito com visto ou sem (true ou false).

Criação de uma check box

No nosso exemplo, definiremos "Inscrever-se na newsletter" como o texto ligado ao botão, e a nossa check box activada por defeito. Cada acção na check box terá como objectivo activar uma função muito simples que iremos criar e que irá assinalar o estado da check box.

No tab "parameters" da janela da propriedades, vamos definir todas as funcionalidades.

Começamos por nomear o nosso componente: "check1". Uma vez nomeado podemos alterar os outros parâmetros (alpha, texto da check box, valor por defeito, ...)
Depois vamos indicar o conteúdo do texto que será escrito e associado à check box. Assim no campo "Label" escrevemos: "Inscrever-se na newsletter".
A seguir clicamos no campo inferior "Initial Value", que está por defeito "false", e modificamos o valor por "true". Assim durante a animação, a check box estará activa por defeito.
Vai também reparar que a opção seguinte "Label Placement" define se o texto associado a check box fica situado a esquerda ou a direita. Neste exemplo deixamos a direita.
Por fim a última função deste elemento, o campo "Change Handler": é o campo no qual vamos indicar a que função estará associado cada clique. Escrevemos então "fn_check1" neste campo, é o nome da função que será executada em cada clique da check box.

Nota: Ao clicar no tab "Properties" encontrará a possibilidade de alterar a cor da check box.

Vamos notar um defeito que convém corrigir: o texto associado a check box ficou cortado, para isso existem duas soluções possíveis:
- Seleccionar a ferramenta "Free Transform" e deslocar a alça direita para a direita até ler-se o texto todo.
- Modificar directamente a largura da check box indicando um valor superior a actual, no campo "W" da janela das propriedades.

O nosso UI componente está então pronto a ser utilizado. Falta apenas escrever a função que será chamada pela check box.

Criação da função ligada a check box.

A nossa check box está colocada na "Layer 1". Vamos então criar mais uma layer para a função, para isso basta clicar em "Insert Layer" e aparece logo a "Layer 2". Com a "Layer 2" seleccionada abre a janela "Actions", e passa para o modo de edição "expert" (na parte superior esquerda da janela).

Escreve o seguinte:

function fn_check1() {
               trace(check1.getValue());
}

Neste momento a nossa pequena animação está pronta para uma publicação interna (Ctrl+Enter).

Durante a execução no leitor interno do Flash, a cada clique na check box um painel irá aparecer com o estado do elemento: true ou false.

Obter outras informações sobre a check box.

check1.getValue(); Devolve o valor true ou false, ( estado da check box).
check1.getLabel(); Devolve o conteúdo do campo de texto associado a check box.
check1.getEnabled(); Devolve se a check box está activa ou não.

Aqui está o primeiro elemento dos UI Componentes apresentado, descrito e utilizado.