Criando Banner Expancível - Parte 2

(continuação)

2 CRIANDO SÍMBOLO DE BOTÃO

Volte a Scene 1, clique na camada painel e adicione nova camada, atrinua o nome de botao. Com a ferramenta Retangulo selecionada crie um retãngulo na cor vermelha sólida (FF0000) sem borda com 145 x 64.


Clique sobre a forma retangular e selecione a tecla F8 para abrir a caixa de diálogo Convert to Symbol de-lhe o nome de botao e selecione type = Button e clique em OK.

Dê dois cliques sobre o botão para acessar a timeline do botão, adicione uma nova camada acima de Layer 1 com o nome texto, nessa camada no quadro Up selecionado, clique na ferramenta Texto, selecione cor branca (FFFFFF), Verdana, tamanho 12 e escreva "aprendofacil.com.br" e posicione em X = 11 e Y = 7.

Clique novamente na ferramenta Texto e escreva: "Veja todas as seções", posicione em X = 8 e Y = 32.

Trave a camada texto, volte a camada Layer 1, clique no quadro Hit e pressione F6 para inserir um quadro-chave.

Clique em Scene 1 e salve o documento.

Clique em Control > Test Movie



2.1 CRIANDO NOME DE INSTÂNCIA E ADICIONANDO CAMADA ACTION


Clique na camada painel, clique no painel, selecione o painel de propriedades e na caixa nome de instância dê-lhe o nome de "painel_mc".

Clique na camada botao, selecione o botao e na caixa nome de instância atribua o nome de instância "botao".

Clique na camada botao e adicione uma nova camada acima dela, atribua o nome de action a essa camada.

Proteja as camadas painel e botao. Clique na camada actions e no frame 1 digite o código abaixo:

Código:

import fl.transitions.*;
import fl.transitions.easing.*;

painel_mc.visible = false;

function abrePainel(Evento:MouseEvent): void {
TransitionManager.start(painel_mc, {type:Zoom, direction:Transition.IN, duration:1, easing:Strong.easeOut});
painel_mc.visible = true;
}

function fechaPainel(Evento:MouseEvent):void {
painel_mc.visible = false;
}

addEventListener(MouseEvent.ROLL_OVER, abrePainel);
addEventListener(MouseEvent.ROLL_OUT, fechaPainel);

Clique em Control > Test Movie (CTRL + Enter). Se tudo foi digitado corretamente, apenas o botão medindo 145 x 64 aparecerá. Ao passar o mouse sobre ele o painel maior aparece, ao retirar o mouse do painel o mesmo desaparece. Experimente. Só prossiga o tutorial se tudo estiver OK.


2.2 CRIANDO SÍMBOLOS DE BOTÕES ANINHADOS

Dê dois cliques sobre o painel, na camada botoes com a ferramenta Text selecionada, digite Home com os valores Verdana, 16 cor 333333. Clique sobre o texto e selecione Modify > Convert to Symbol. Na caixa de diálogo digite botaoHome, type = button e clique em OK.


2.3 ACESSANDO A TIMELINE DO BOTÃO HOME

Dê dois cliques sobre o texto Home para acessar a timeline do botão Home. Clique no estado Over e insira o quadro-chave (F6), selecione o texto Home e modifique-o para negrito, cor preta (000000), clique na ferramenta Retangulo selecione Stroke color preto (000000) e fill color sem preenchimento, finalmente crie um retângulo ao redor do texto Home com aproximadamente 60 x 30.


2.4 CONFIGURANDO ÁREA SENSÍVEL A CLIQUE

Clique no estado Hit, selecione a ferramenta Retângulo, na caixa Stroke color marque sem preenchimento, na caixa fill color marque verde (00FF00) e crie um retângulo ligeiramente menor que o contorno criado anteriormente.

Clique em Scene 1 e teste o arquivo (CTRL + Enter)



2.5 CRIANDO OUTROS BOTÕES

Na camada botoes com a ferramenta Text selecionada, digite Fórum com os valores Verdana, 16 cor 333333. Clique sobre o texto e selecione Modify > Convert to Symbol (F8). Na caixa de diálogo digite botaoForum, type = button e clique em OK.


Dê dois cliques sobre a palavra Fórum para acessar a timeline do botão. Clique no estado Over e insira um quadro-chave (F6), selecione o texto Fórum e modifique-o para negrito, cor preta (000000), clique na ferramenta Retangulo selecione Stroke color preto (000000) e fill color sem preenchimento e crie um retângulo ao redor do texto.

Clique no estado Hit, selecione a ferramenta Retângulo, na caixa Stroke color marque sem preenchimento, na caixa fill color marque verde (00FF00) e crie um retângulo ligeiramente menor que o contorno criado anteriormente a área desse retangulo será á área sensível a cliques.



2.6 DUPLICANDO BOTÕES

Abra o painel Library (Window > Library), clique com o botão direito sobre botaoForum e selecione Duplicate no menu de contexto. Na caixa de diálogo Duplicate Symbol digite botaoCurso e clique em OK.

Ainda no painel Library (Biblioteca) dê dois cliques sobre o botão recém criado para acessar sua timeline e modifique o texto de Fórum para Curso nos três estados (Up, Over e Hit). Certifique-se de alterar tamanho do retângulo que envolve o texto no estado Over e tamanho do retângulo que delimita a área sensível a clique. Em seguida clique em Scene 1 novamente.

Repita o procedimento acima para criar novos botões, são eles: Login, Tutoriais, Curso, Quiz, Download, Suporte Pesquisa, Divulgações, Mais Lidas, Últimas Notícias e Fale Conosco.


NOTA!

Não há necessidade de criar todos os botões e você pode usar outros textos de acordo com sua conveniência.

Obrigado a todos.