PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais Avançados

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX
Dificuldade: Avançado
Data de Publicação: 15/11/2003


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.

Ficheiro Swf

Clique com o botão direito do rato sobre o filme para visualizar o menu de opções


Downloads:

Flash Player icon 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.

 
Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.
 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados