| Autor: |
Flash Web Training |
| Data de
Publicação: |
25/11/2003 |
|
|
Este tutorial vai tentar ensinar-vos de como fazer menus com um efeito
de desaparecer. O nome pode parecer um pouco estranho, mas à medida
que iremos desenvolver este tipo de menus, vamos ver que se torna bastante
engraçado para poder utilizar nos nossos projectos.
Clique com o botão direito do rato sobre o
filme para visualizar o menu de opções
Downloads:
1. Comecemos por criar um novo projecto no Flash. Após
o terem criado, escrevam texto ou desenhem uma shape com o texto que vocês
pretenderem.
2. Deveremos de seguida converter o texto ou a shape,
para Button. Poderemos dar o nome de Botao Principal e não se esqueçam
de seleccionar a opção de Button. Para converterem deverão
seleccionar o objecto e depois pressionar a tecla de F8.
3. Após terem convertido para Button, é-vos
agora pedido para que revoltem a converter para Movie Clip. Deverão
seleccionar desta vez o Botão e de seguida pressionar a tecla de
F8. O nome a ser indicado, deverá ser o de Menu Principal. Não
se esqueçam de clicar sobre a opção de Movie Clip.
Desta forma iremos ter o nosso botão criado, dentro de um Movie
Clip. Apartir deste momento, dêm dois cliques no Movie Clip, pois
necessitaremos de trabalhar dentro do mesmo.
4. Vamos criar 6 novas layers. Isto pode ser feito clicando
no botão de Insert Layer.
5. Deveremos arrastar uma das layers para a parte mais
baixa das layers. Para este momento, deveremos ter uma layer totalmente
em branco para criarmos o nosso efeito.
6. Teremos então de começar a identificar
cada uma das layers pelos seus nomes. Assim sendo, deveremos nomear as
layer por ordem de cima para baixo da seguinte forma: Actions, Labels,
Sobre, Produtos, Contactos, Menu Principal e Botao Invisivel.
7. Na layer de Actions, deveremos clicar sobre a frame
1, e arrastar até à frame 40.
8. Teremos de criar uma acção de Stop,
na frame 1 e 22, da layer de Actions. Para tal, sobre cada uma das frames,
clicamos com o botão direito do rato, e vamos escolher a opção
de Actions. Dentro do painel das Actions, escreveremos o seguinte código:
stop();
Na frame 22, deverá ser carregado na tecla F6 para que se insira
uma keyframe, de modo a que seja possível inserir outra instrução
de stop.
9. De seguida vamos criar duas labels sobre a layer
Labels. A primeira label deverá ser criada na frame 1 com o nome
de Normal. De novo iremos repetir o mesmo passo, mas sobre a frame 10,
onde lhe daremos o nome de Over.
10. Vamos pressionar a tecla de F6, sobre a frame 10
das seguintes layers: Contactos, Produtos e Sobre.
11. Sobre a frame 10 de cada uma das layers anteriores
deveremos criar um botão para cada uma delas. A nossa escolha recaiu
sobre a criação de botões com os mesmos nomes das
layers.
Não se esqueçam que para criar um botão deverão
criar o conteúdo no ecrã, e de seguida converter para botão,
pressionando a tecla de F8.
12. Alinhem de seguida os vossos botões com as
teclas de direcção, e com o painel de alinhamento do Flash.
13. Sobre as frames 14 das layers que contêm os
botões criados, vamos criar keyframes para cada uma delas.
14. Vamos seleccionar somente as frames 10 de cada uma
das layers com os botões. Para tal cliquem 1 vez sobre a primeira
frame 10 que quiserem e de seguida pressionando a tecla de Shift, cliquem
1 vez sobre a frame 10, de cada uma das layers restantes.
15. Com as frames 10 das 3 layers seleccionadas, movam
os botões com a tecla de direcção da esquerda, cerca
de 20 vezes.
16. Com as frames ainda seleccionadas, vamos tornar
o Alpha para 0%. A função de Alpha pode ser encontrada,
no painel do Color Mixer.
17. Ainda com as frames seleccionadas, vamos clicar
com o botão direito do rato sobre as frames seleccionadas, e escolher
a opção Motion Tween.
18. Teremos de seguida de trabalhar sobre as layers
de Produtos e Contactos. Sobre a layer de Produtos, vamos clicar sobre
a frame 10 e pressionando a tecla de Shift, clicamos na frame 14, de modo
a seleccionar todo o efeito de Motion Tween. De seguida vamos arrastar
esse mesmo conteúdo, para que comece na frame 14. O mesmo deverá
ser feito para a layer de Contactos, onde o efeito deverá ser arrastado
para a frame 18.
19. Criemos keyframes sobre as frames 22, das layers
de Sobre e Produtos. Para tal, deveremos clicar sobre a frame 22, e pressionar
a tecla de F6.
20. Desta vez sobre as 3 layers de Contactos, Sobre
e Produtos, vamos inserir keyframes sobre as frames 26 de cada uma delas.
21. Como feito num passo anterior, vamos seleccionar
as 3 layers na frame 26, e vamos colocar o valor de Alpha a 0%.
22. Ainda com as 3 layers seleccionadas, vamos puxar
para a esquerda, através da tecla de direcção umas
20 vezes.
23. Seleccionando as frames 22 de cada uma das layers
vamos criar um efeito de Motion Tweening como já foi explicado
anteriormente.
24. Vamos seleccionar desde a frame 22 até à
frame 26 da Layer de Contactos e de seguida arrasta-la de maneira a que
tenha o seu inicio na frame 26 e termine na frame 30. De igual forma deverá
ser feito o mesmo para o efeito da frame 26, da layer de Sobre.
25. Pressionando a tecla de F6 sobre a frame 22 da layer
de Menu Principal, vamos criar uma Keyframe.
26. Vamos clicar sobre a frame 1 da mesma layer e clicar
1 vez sobre o nosso botão previamente criado.
27. Cliquemos sobre a frame 26 da mesma layer, e vamos
com o botão direito do rato, seleccionar a sub-opção
de Actions. Nela vamos inserir no painel de Actions, o seguinte código:
on (rollover) {
gotoAndPlay(“over”);
}
28. Sobre a layer Botao Invisivel, deveremos criar uma
keyframe na frame 22.
29. Criamos então de seguida, um rectângulo
no total da stage, menos na área do menu. Deveremos ter em atenção
que há a necessidade de criar uma área em que o rectângulo
não deverá abranger, de forma a que o menu funcione. Para
tal após ter sido desenhado o rectângulo na nossa stage,
deveremos com a borracha apagar a área que queremos. Poderemos
ver na ilustração seguinte o que pretendemos.
30. Com o rectângulo que acabamos de criar seleccionado,
vamos converte-lo em botão, pressionando a tecla de F8. Poderemos
dar o nome de Rectangulo Botao.
31. Após termos convertido para botão
o rectângulo, vamos dar um duplo clique sobre o mesmo. Deveremos
então, arrastar a keyframe, do local de UP, para o local de HIT.
32. Cliquem sobre o botão de Scene 1 ou sobre
a seta azul, para podermos regressar ao BotaoPrincipal.
33. Seleccionem o Botao Invisivel que acabaram de criar,
e vamos inserir-lhe o seguinte código, no painel das Actions.
on (rollover) {
play();
}
34. Para finalizar vamos adicionar somente mais um linha
de código. Na frame 34, vamos adicionar no painel de Actions da
layer Actions.
gotoAndStop(“Normal”);
|
