Introdução

Com este tutorial, vamos tentar dar-vos a conhecer de como se podem obter as Hover Captions, sobre os ficheiros. Quando passam o rato, por cima dos botões, conseguem ver quase sempre um texto a especificar o nome de cada um dos botões, que a maioria das vezes, induz o que cada botão permite fazer.

A esse tipo de texto que nos permite saber o nome de cada botão, chamam-se de Hover Captions. Neste tutorial vamos aprender como se pode fazer este efeito com o nosso Flash MX. Prontos? Vamos por mãos à obra.

Downloads:

Ficheiro Fla Tutorial em PDF

Primeiro passo: Comecemos por criar o textos de Hover Caption

Nesta primeira parte, vamos aprender como fazer os rectângulos azuis que vão conter os textos associados a cada botão.

1. Comecemos por criar um novo projecto. Vamos ao menu File e depois escolhemos a opção de New.

2. Abram o ficheiro caption_user.fla que aqui vos disponibilizamos. O ficheiro simplesmente contém os ícones que vamos usar no nosso projecto.

3. Já abriram o ficheiro? Óptimo, vamos prosseguir então. Vamos continuar, começando por criar uma layer para as captions. Assim sendo, vamos criar uma nova layer à qual vamos chamar de Caption.

4. Assim que inserirem a layer nova, deveremos clicar na sua primeira frame. Deveremos então de seguida, criar um rectângulo que tenha a capacidade suficiente para conter o texto a dispor de acordo com o programa.

5. Uma vez desenhado o rectângulo, vamos pressionar o botão de F8 ou através do menu de Insert e escolhendo a sub-opção de Convert To Symbol. Deveremos então seleccionar a opção de Movie Clip e dar o nome de Rectângulo Caption.

6. O vosso rectângulo foi agora convertido para símbolo. Deveremos então com o botão direito do rato, clicar sobre o rectângulo e escolher a opção de Edit In Place. Insiram uma nova layer.

7. Cliquem na ferramenta de Text do Flash MX. Desenhem agora uma área para o texto, que deve estar nas proporções do rectângulo desenhado, não excedendo os seus limites. Assegurem-se de que o rectângulo tem tamanho suficiente para suportar o texto que queremos inserir. Se não conseguirem ver correctamente a área cliquem na lupa para aumentar o Zoom do ecrã.

8. É capaz de existir a necessidade de ajustarem vocês mesmos à mão o tamanho da caixa de texto. No nosso caso, tivemos de utilizar o Free Transform, para poder ajustar a caixa de texto.

9. Surge agora a necessidade de fazer algumas alterações na nossa Caixa de Texto. Para tal vamos clicar sobre a caixa de texto que acabamos de desenhar e vamos seguir com algumas alterações a ser feitas no painel de Properties. Devem seleccionar caso ainda não tenha sido feita, a opção de Dynamic Text. Os valores das coordenadas, não têm de ser exactamente estes que nós usamos. Podem ser outras coordenadas quaisquer por vós definidas.

10. Necessitamos agora de fazer algumas modificações que devem ser feitas. No mesmo painel das properties do Texto, façam as seguintes mudanças:

a. Font: Verdana
b. Ab: Selected
c. Size: 10
d. Style: Bold
e. Color: Black
f. Alignment: Centered
g. Var: Letras

11. A nossa caixa de texto está pronta! Vamos então voltar à cena anterior. Para tal vamos clicar sobre o link de Scene 1 ou no botão de retroceder.

Chegamos à parte em que precisamos de estabelecer uma correlação entre o rato e a nossa caixa de texto. Quando o nosso rato passar por cima dos nossos ícones, deveremos ter então a nossa caixa de texto a aparecer com o devido texto. Vamos por mãos à obra para que isto aconteça.

Segundo passo: O rato e a caixa de texto

Os passos que se vão seguir, vão-nos permitir que façamos com que a nossa caixa de texto siga o nosso rato.

1. Seleccionem a layer e o rectângulo onde se encontra o rectângulo que desenhamos. Devem de seguida dar o nome de Caption.

2. Vamos inserir uma nova layer na Timeline. Esta nova layer vai conter as nossas actions.

3. Cliquem sobre a frame 1 da layer que acabaram de criar e vão ao painel das actions. Copiem o seguinte código para o painel das actions:

startDrag(_root.Caption, true);

4. Se testarem o vosso filme, vão poder ver que o nosso rato, já é perseguido pelo rectângulo que desenhamos. Para testarem o vosso filme podem premir simultaneamente as teclas de Ctrl+Enter.

5. A nossa finalidade é que o rectângulo não esteja visível sempre, mas somente quando o rato está sobre um dos ícones. Cliquem com o botão direito do rato sobre o rectângulo e seleccionem a opção de Actions. Devem inserir o seguinte código no painel Actions – Movie Clip:

onClipEvent (enterFrame) {
if (_root.x==1) {
this._alpha = 50;
} else {
this._alpha = 0;
}
}

Terceiro passo: Visualizar o texto

Neste momento temos o rectângulo escondido quando deslizamos o rato no ecrã, de uma forma invisível. É claro que queremos que o rectângulo esteja visível, mas somente quando o rato passar sobre um dos ícones.

1. Vamos então tornar isto possível, mediante um pouco de programação. Assim sendo, deveremos copiar o seguinte texto para dentro do painel de Actions. Este código deve ser copiado quando estiverem seleccionados os 4 botões, ou pode ser copiado para cada botão individualmente.

on (rollOver) {

_root.x = 1;
_root.Caption.Letras = "Flash";
}
on (rollOut) {
_root.x = 0;
_root.Caption.Letras = " ";
}

2. Se tiverem em atenção ao código, vão poder notar que a linha _root.Caption.words = "Flash"; contém o texto que vai aparecer no nosso rectângulo. A palavra Flash será a nossa palavra chave na caixa de texto.

3. Caso estejam a copiar separadamente o código para cada um dos botões, é vos proposto que mudem o texto que vai aparecendo dentrodos rectângulos. As palavras a aparecerem ficam ao vosso total critério.

4. Quando terminarem de copiar o código para cada um dos botões, gravem o vosso projecto e de seguida testem-no uma vez mais.

5. Testem a vossa criação até ao momento no vosso browser.

Quarto passo: Mais umas modificações

Tecnicamente já acabamos com a parte do Hover Caption. Existe somente uma pequena coisa que vocês de certeza gostariam de ver modificada. O rato quando passo por cima de um dos ícones, tem por debaixo deles o rectângulo do rato, e de certeza que vocês gostariam de ver o rectângulo ao lado do rato. Se assim o quiserem, vamos a isto então!

Para podermos então corrigir este pequeno erro, vamos seguir estes passos:

1. Clicar com o botão direito do rato sobre o rectângulo e escolher Edit In Place.

2. Em primeiro lugar, certifiquem-se que ambas as layers não estão trancadas (não contêm o símbolo do aloquete). Uma vez que tenham a certeza de que estão sem o aloquete, deveram premir as telcas de Ctrl+A para seleccionar ambas as layers: o texto e o background.

3. Após terem seleccionado ambas as layers, deverão com as teclas de direcção, por o rectângulo e a caixa de texto no canto inferior esquerdo da cruz. Vejam o exemplo para fazerem igual no vosso projecto.

4. Está corrigido! Vamos voltar à Scene 1, clicando sobre o link de Scene 1 ou através da seta azul, como anteriormente foi visto. Guardem de seguida a vossa animação e testem-na. Se tudo estiver correcto, vão notar que o rato já tem a caixa de texto a aparecer no canto superior direito do vosso rato.