Neste capítulo aprenderemos a criar botões.
Flash nos permite criar botões personalizados, de maneira muito rápida; e ainda nos ajuda a dar vida a nossas páginas web; em poucas palavras, nos ajuda a tornar mais atrativo nosso site e logicamente isso é o que queremos para aumentar o número de visitas em nosso website.
Comecemos:
1 - Primeiro, Desenhe um quadrado no palco:
2 - Logo em seguida, criaremos um novo símbolo, selecione todo o quadrado e precione a teclas: F8.
3 - Em Nome (Name), escreva "botao1", em Comportamento (Behavior) selecione a opção Botão (Button), finalmente clique em Aceitar (OK).
Automaticamente, seremos enviado desde a Cena 1 ao palco do símbolo "botão 1"; aí é onde criaremos um botão que será incluído em nossa biblioteca.
4 - Dê um duplo clique no botão criado:
5 - O palco unicamente para a criação de botões, será parecido com a seguinte imagem:
6 - Olhe para a linha do tempo (Timeline), como se pode notar é diferente à linha do tempo da Cena 1.
7 - A linha do tempo, do palco para criar botões é parecida com a seguinte imagem:
Expliquemos o gráfico anterior:
Devemos entender que Up (Repouso), Over (Sobre), Down (Pressionado) e Hit (Zona ativa) são os quatro estados de um botão. Vejamos a seguir, o que representa cada estado.
Up (Repouso): é quando o mouse não está colocado sobre nosso botão ou não se clicou sobre ele.
Over (Sobre): é quando o mouse está colocado sobre o botão, mas ainda não se clicou sobre ele.
Down (Pressionado): logicamente, é quando se clica sobre o botão.
Hit (Zona Ativa): como o próprio nome indica, é quando o botão está ativo.
Continuemos com a criação de nosso "botao1".
1 - Clique sobre a ferramenta de Retângulo (Rectangle Tool), que se encontra no Painel de Ferramentas.
2 - Desenhe um retângulo no centro da área de trabalho, e coloque a cor verde.
3- Depois pressione a tecla F6; isto fará com que a cabeça leitora na linha do tempo passe ao estado Over (Sobre).
4 - Repita o mesmo prossesso para Down (Pressionado), escolha a cor amarelo e precione F6
5 - Não iremos utilizar Hit (Zona ativa) que iremos esplicar no próximo capítulo. Deixe-o vazio.
6 - Agora volte para Scene 1 e precione Ctrl+Enter para executar o botão:
Veja o resultado:
Para utilizar a zona ativa (Hit) do botão:
1 - Clique em Text Tool
2 - No palco escreva uma palavra, exemplo: teste.
3 - Em propriedades escolha Static Text
4 - Precione F8 em Name escolha botao1 e em Folder escolha Button:
5 - Dê um duplo clique no botão criado:
6 - Precione F6 três vezes:
7 - Em Over escolha a cor azul para o texto
8 - Em Down escolha a cor vermelha
9 - Em Hit desenhe um retângulo em cima do texto
10 - Precione Ctrl + Enter
11 - Veja o resultado
Existe três formas de texto:
Static Text (Texto Estático = Parado) => Este tipo de texto é parado, quando passamos o mouse, o texto fica fixo, igual a uma imagem. Exemplo:
Dinamic Text (Texto Dinâmico) => Este tipo de texto é dinâmico, quando passamos o Mouse, podemos selecionar o texto. Exemplo:
Input Text (Caixa de Texto) => Quando clicamos nesse tipo de texto, podemos alterar o texto. Exemplo:
Para alterar um texto com um botão, siga este exemplo:
1 - Crie um botão como ensinado anteriormente
2 - Precione F8 para criar: Button
3 - Em Name digite botao1
4 - Em Instance Name digite: botao1
5 - Crie um texto ao lado do botão e em propiedades escolha Dinamic Text
6 - No texto dinâmico digite: Hello World
7 - Em Instance Name digite: hello.
8 - Precione F9:
9 - Insira na área de texto o código abaixo
botao1.addEventListener(MouseEvent.MOUSE_DOWN, botao);
function botao(event:MouseEvent):void {
hello.text = "Oi";
} |
10 - Veja o Resultado
1 - Crie um botão como ensinado anteriormente
2 - Precione F8 para criar: Button
3 - Em Name digite botao1
4 - Em Instance Name digite: botao1
5 - Crie um texto ao lado esquerdo do botão e em propiedades escolha Input Text
6 - Na caixa de texto digite: Hello World
7 - Em Instance Name digite: hello.
8 - Crie um texto ao lado direito do botão e em propriedade escolha Dinamic Text
9 - No texto dinâmico digite: Olá Mundo
10 - Em Instance Name digite: ola
8 - Precione F9:
9 - Insira na área de texto o código abaixo
botao1.addEventListener(MouseEvent.MOUSE_DOWN, botao);
function botao(event:MouseEvent):void {
ola.text = hello.text;
} |
10 - Veja o Resultado