Introdução

Neste tutorial vamos tentar ensinar-vos como fazer um dos menus mais populares em Flash, de uma maneira simples e eficaz. Este é um dos exemplos mais fáceis de criar.

Vamos então dar início ao nosso tutorial.

Downloads:

Ficheiro Fla Tutorial em PDF

1. Baixem e abram o ficheiro zip que vos é disponibilizado no nosso site. Depois de o baixarem abram o ficheiro infinite_menu.fla. Como poderão ver não existe nada no ficheiro, aparentemente, isto porque todo o material que por nós vai ser usado está contido na nossa livraria.

2. Vamos começar por abrir a nossa livraria do Flash. Para tal, deveremos pressionar as teclas de Ctrl+L. Como poderão ver, temos dentro da nossa livraria, dois ficheiros. O ficheiro de menu e o ficheiro de um botão. Este menu contem tudo o que precisamos já elaborado, e devem notar que o nosso registration point, está do lado esquerdo, o que é muito importante.

3. Necessitamos de criar duas Instances para que este efeito funcione. Devem colocar uma vez mais o menu na stage e colocá-lo juntamente com o outro menu, como esta descrito na seguinte figura:

4. Ajustemos então ambos os menus que temos na stage. O primeiro menu daremos a coordenada em X, com o valor de 0, e o segundo menu, terá a coordenada em X de 300. Surge então a necessidade de criar somente um Movie Clip. Vamos então seleccionar ambos os menus e pressionar a tecla de F8. Poderemos dar o nome de menu_principal e teremos de ter a registration à esquerda.

5. Estamos já a meio de criar o nosso menu de navegação. Precisamos de criar a funcionalidade de quando movemos o rato para a esquerda, o nosso menu deverá deslizar para a esquerda, e quando movemos o rato para a direita, o mesmo menu deverá deslizar para a direita. Assim sendo, deveremos fazer um pouco de programação em Actionscript para que tal aconteça.

O seguinte código, vai-nos então permitir que este tipo de deslizar do menu aconteça. Cliquem com o botao direito do rato sobre e copiem o seguinte código:

onClipEvent (load)
{
xcenter=150;
speed=1/10;
}
onClipEvent (enterFrame)
{
var distance=_root._xmouse-xcenter;
_x+=(distance*speed);
}

6. Se testarem o vosso projecto, vão ter a possibilidade de ver que o nosso menu já mexe de acordo com o esperado. Para tal devem pressionar as teclas de Ctrl+Enter.

7. Teremos nesta parte, de definir o nosso projecto de maneira a que se pareça com um menu rotativo contínuo. Devemos chamar a atenção para o facto, de que o valor de X ser 300 pixels, deve-se ao facto de o nosso menu ter somente o tamanho de 300 pixels, caso vocês tenham criado um menu a vosso gosto, não se esqueçam de dimensionar o filme de acordo com o tamanho do vosso menu.

8. Só nos falta fazer mais um passo, para que o nosso menu pareça-se com o menu que nos propusemos fazer. Vamos então criar mais uma layer, à qual daremos o nome de mask. Criem um rectângulo com o tamanho que vocês quiserem. Não se esqueçam que este rectângulo deverá ser criado na layer da mask.

9. Vamos então agora, mascarar o nosso filme. Sobre a layer de mask, vamos clicar com o botão direito do rato e escolher a opção de Mask.

10. Somente nos falta uma coisinha para que terminemos com este tutorial. No vosso código que inseriram na Actionscript, deveram substituir o código pelo seguinte:

Onde diz:

onClipEvent (enterFrame)
{
var distance=_root._xmouse-xcenter;
_x+=(distance*speed);

Substituir por:

onClipEvent (enterFrame)
{
var distance=_root._xmouse-xcenter;
_x+=(distance*speed);
if (_x > 0) _x=-300;
if (_x < -300) _x=0;
}

11. Chegamos ao fim do nosso menu. Testem agora o vosso menu e vejam como ficou. Para tal não se esqueçam que devem pressionar as teclas de Ctrl+Enter.