1
Muito bem, vamos à festa? Agora que você já sabe como manejar suas layers, vamos definir algum comportamento para elas (Behaviors). Você já conhece o tema, e já sabe quais caminhos tomar. Vamos rever um pouco disso agora, com algumas novidades.
Certifique-se de que a paleta "Behaviors" esteja aberta (se não estiver pressione SHIFT+F3); insira uma imagem ou um texto em sua página, para que possamos usá-los como 'detonadores' dos 'Behaviors' que iremos estudar.

2
Selecione a imagem e/ou o texto; na paleta 'behaviors' clique no botão "+", logo acima do ítem 'Events' para abrir o menu de opções; clique sobre o ítem "Show-Hide Layers" (que só estará visível se você tiver uma layer inserida na página) - uma caixa de diálogo será aberta; clique sobre o nome da layer para a qual quer definir um comportamento (todas as layers disponíveis na página estarão aqui listadas) e escolha, na parte inferior da caixa, qual o comportamento que a layer deverá ter (vamos começar por "show" - mostrar). Veja o gráfico:

a layer "Campo" foi escolhida para ter um comportamento de 'tornar-se visível' (show) - assim que o botão 'Show' foi clicado, o comportamento escolhido foi inserido entre parêntesis adiante do nome da layer - clique OK para aceitar

3
Assim que você tiver concluído essa etapa, a paleta "Behaviors" irá refletir suas ações, apresentando um evento (no campo "Events") e uma ação (no campo "Actions") - no entanto, o ítem 'Events' será, provavelmente, diferente daquele que você desejou inicialmente (um 'evento' é o tipo de ação que vai acionar o comportamento que você escolheu,e que no nosso exercício, é o de mostrar a layer). Veja no gráfico abaixo, a imagem do que poderá ser apresentado na paleta 'behaviors' (e que você irá modificar, logo em seguida):

o evento "onBeforeUnload" foi definido por default - você irá escolher o evento desejado clicando sobre esse ítem para acionar o menu de opções

4
Como explicado na legenda do gráfico acima, clique em "onBeforeUnload" para selecionar o evento e disponibizar a seta escura ao lado do evento - clique sobre a seta para abrir o menu de opções com todos os eventos disponíveis, e escolha o que deseja: em nosso exercício optaremos pelo evento "(onClick)" - assim mesmo, entre parêntesis, para providenciar que ele seja compatível com outros Browsers, especialmente o Netscape (mas os parêntesis só estarão disponíveis se a ação estiver ligada a uma imagem - em caso de texto, apenas os ítens sem parêntesis estarão disponíveis). Portanto, nós faremos com que a layer "Campo", que está invisível em seu estado natural, seja mostrada ao seu visitante assim que ele "clicar" sobre a imagem ou o texto que foi anteriormente definido por você para 'detonar' esse comportamento.
Veja os gráficos:

a seta que vai acionar o menu de opções

na parte superior, muitos ítens sem parêntesis - na parte inferior, o ítem escolhido, entre parêntesis

5
Neste ponto você criou um 'behavior' para sua layer, e definiu a ação que irá acionar esse 'behavior'. Sua layer será visível todas as vezes que aquela imagem e/ou aquele texto pré-estabelecido receber um clique do mouse (poderia ser outra a ação - escolha aquela que mais lhe convier).
Confira no gráfico abaixo a paleta Behaviors com o evento já corrigido:

6
E agora, o que acontece? Se sua layer torna-se visível, talvez você queira que ela possa ser 'fechada', ou que volte a ser invisível depois de conferida pelo usuário de sua página. Uma solução bem simples para isso será inserir, dentro da layer, algo como um texto ou um botão linkado para fechar aquela janela. Como? Veja o próximo ítem.

7
Simplesmente defina para esse botão ou texto dentro da layer "Campo" do nosso exemplo, um comportamento quase idêntico ao que acabou de definir a partir de sua página - a única diferença é que você irá acessar a layer "Campo", editar seu conteúdo no sentido de inserir um botão ou um texto do tipo "Fechar" (por exemplo), vai selecionar o texto, e em seguida, seguindo os passos que acabou de aprender, vai criar um behavior para ele apenas clicando em "Hide", dentro da caixa de diálogo. Assim sendo, ao se clicar sobre o link que detonar o comportamento de abrir a layer, ela será mostrada (Show), e apresentará um link (fechar) que ao ser clicado irá acionar o comportamento de esconder (Hide) a layer.
Veja os gráficos:

se o comportamento estiver agregado a uma imagem, o ponteiro do mouse será 'hand' - se for um texto, será o default.

8
Mas o que acontece com o Behavior "Show" que eu havia definido anteriormente para a layer "Campo"? Foi substituído por "Hide"? De forma alguma! Você definiu um Behavior para a layer ser 'mostrada' (a partir de sua página, e um outro Behavior para a mesma layer ser 'escondida'', a partir do interior da própria layer. Portanto, a layer "Campo" tem dois Behaviors, "Show" e "Hide", cada um sendo acionado de um local diferente.
Veja como ficou, clicando no botão abaixo:

9
Neste nosso exercício aprendemos a definir o fechamento da layer com um Behavior (Hide) a ser acionado a partir do conteúdo da própria layer. Mas você poderá fazer diferente - faça o exercício algumas vezes, e teste outros Events e outras Actions sem medo de errar ou de não dar certo - afinal, você está aprendendo e esta é a hora de experimentar. Anote o que for bom para que possa reproduzir em seus projetos de websites, ok?
Em tempo: se quiser dar uma olhadinha em outra solução para o Behavior "Show-Hide Layers", clique em qualquer um dos links "Galeria Flutuante" na barra inferior desta página, e confira como é que eu definí os eventos e as ações para mostrar os meus desenhos.
IMPORTANTE: não se esqueça de que suas layers estarão posicionadas na página a partir de localização por pixels ou percentuais. Portanto, mudarão de lugar com definições de vídeo maiores ou menores. Fique esperto... e não perca nosso próximo tutorial - você vai ficar gostar demais!

Divirta-se!

Guacira Sampaio Rocha direitos reservados