Tool Tip no Flash MX,

Quando passamos o mouse em algum botão no HTML, ou mesmo
em no windows abra aquelas janelinhas geralmente amarelas com uma menssagm dentro,
agora vamos aprender como fazer uma dessas para serem usadas em botões
dentro do flash, usando uma caixa de texto dinâmico, visibilidade, Drag
e redimencionando o tamanho das caixinhas de fundo, de acordo com o tamanho
do texto que vai aparecer, ou seja, vamos fazer uma caixinha só para
todos os botões.

Então vamos lá, vamos abrir o flash, e desenhar
um botão qquer conforme o gosto de cada um, lembrando que você
pode criar um botão criando no menu Insert >> New Symbol >>
Button, ou selecionando alguma forma no palco, apertando F8 e transformando
ele num botão. pra esse modelo eu usei apenas quatro botões conforme
a figura abaixo:

Então agora que fizemos os botões e arrastamos
4 cópias dele para o palco, é hora de fazer a caixinha Tool Tip
que irá aparecer quando massarmos o mouse sobre o botão, para
isso criaremos uma nova camadas, daí vamos no menu Insert >> New
Symbol >> Movie Clip, marque o nome do mocieclip como Tool tip e se abrirá
a time line desse movieClip, bem no centro do palco vocês verão
um sinal de “+” indicando o centro do movieclip, então alí
vamos desenhar na parte superior da direita desse + a nossa caixinha com mais
ou menos 120 px de largura por 25 px de altura, conforme a figura abaixo:

Agora o novo passo é selecionar essa caixinha que fizemos
de fundo e aertando a tecla F8, vamos transforma-la nu MovieClip com o nome
de fundo, assim que apertar ok, voltaremos pra timeline do movieclip Tool Tip,
então agora temos o movieclip Fundo dentro do Movieclip Tool Tip, que
está dentro da time line principal, agora fazemos o seguinte, colocaremos
o nome de instancia pra esse movieclip fundo exaamente de “fundo”
(sem aspas), agora vamos trancar esse layer, e criar mais um, para poder fazer
a caixa de texto dinamico que aparecerá dentro dessa caixinha.

Então vamos clicar na ferramenta de texto, e na caixinha
“Text Tool” , vamos alterar de Static Text para Dynamic Text, vamos
tambem marcar o tamanho da fonte para 18, e a cor da fonte para preto, senão
ela vaia aparecer na cor em que desenhamos a caixinha, daí vocês
vão esquentar a cabeça aí pensando que não funciona
o código, sendo que é a fonte que estará na mesma cor do
fundo. e mudar o seu alinhamento, colocando o texto para ser alinhado à
esquerda, e arrastar a ferramenta de texto por cima da caixinha de texto, podendo
se expandir bem pra fora do tamanho ca caixa de texto, confrome a figura abaixo:

Agora daremos um clique nesse campo de texto, e na barra de propriedades
onde tem o campo var, digitaremos “texto” (sem aspas), agora vamos
voltar pra time line principal, e puxar uma cópia desse movieclip Tool
Tip da Biblioteca para o palco, aproveitando, vamos dar o nome de instancia
pra ele de “tooltip” (sem aspas).

Vamos colocar essa ação no primeiro frame da nossa
animação para ver o efeito de Drag do nosso movieclip tooltip,
assm se testarmos o filme nessa hora já poderemos ver ele seguindo o
mouse e aparecendo conforme a posição que colocamos dentro do
movieClip em relação ai ponto central dele, a ação
será a seguinte:

startDrag(”tooltip”, true);

Então o que fizemos aí é fazer essa caixinha
seguir o mouse, com a posição que queremos que ela apareça
(parte superior direita), mas faremos assim por enquanto só pra ver a
funcionalidade do Start Drag, pois mais pra frente a lógica é
ela sumir e só aparecer quando rolar o mouse por cima de cada botão,
então terá uma adição de ações mais
pra frente nesse mesmo frame.

Agora vamos fazer aparecer o texto no primeiro botão,
então vamos colocar essa ação no botão:

on (rollOver) {
_root.tooltip._visible = 1;
_root.tooltip.fundo._width = 255;
_root.tooltip.texto = “Primeira mensagem de texto”;
}
on (rollOut) {
_root.tooltip._visible = 0;
}

Detalhando o código:

on (rollOver) {
//Ao rolar o mouse sobre o botão
_root.tooltip._visible = 1;
//Aqui procuraremos o movieclip tooltip que está dentro da timelime principal
(_root) e deixaremos ele visível
_root.tooltip.fundo._width = 255;
//Vamos definir o tamanho do fundo da caixa do texto conforme o tamanho do texto
(no meu caso o 255 foi a largura ideal)
_root.tooltip.texto = “Primeira mensagem de texto”;
//Aqui a caixa de texto dinâmico que está dentro do movieclip tooltip,
vai receber o texto entre aspas
}
on (rollOut) {
// Ao tirar o mouse do botão
_root.tooltip._visible = 0;
// Torne o movieClip tooltip invisívelS
}

Então no caso, no Rollout, não precisaremos fazer
o tamanho da caixa voltar ao normal, e nem apagar o texto, pois o movieclip
ficará invisível e só aparecerá com um novo texto
e novo tamanho criado por outro botão, agora a mesma ação
usaremos nos outros botões, só que com textos e tamanhos do fundo
da caixinha diferentes, o resultado deverá ser igual a essa amostra:

Agora está praticamente pronto nosso trabalho, só
precisamos fazer com que acaixa de texto já comece invisível,
para isso é só alterar aquele códigozinho que fizemos no
começo, é só adicionar uma linha de código para
torna-los invisível, entes era assim:

startDrag(”tooltip”, true);

Agora ficará assim:

_root.tooltip._visible = 0;
startDrag(”tooltip”, true);

Então nosso resultado final será esse:

Baixe aqui o fla desse exemplo zipado AQUI

Até a próxima !!!

Gustavo Henrique Carneirinho