MENU VERTICAL

Neste tutorial veremos como criar um menu vertical usando ActionScript.

1.
Crie um novo documento Flash, navegue até Modify > Document (Ctrl+J) e configure Width para 450px e Height para 250px. Altere o Frame rate para 33 fps (Frames per Second).

2.
Dê um clique duplo na layer1 para renomeá-la como fundo. Crie uma nova layer e nomeie-a como menu. Depois disto, use a Rectangle Tool (R) , clique em Stroke color e escolha No stroke, configure Fill color como #A1958A e desenhe cinco retângulos com 88,5px x 250px que representarão um menu.

3.
Selecione a Tool (T), configure Fill Color como #FFFFFF e como primeiro item do menu, escreva “Home”.

4.
Navegue até Modify > Transform > Rotate 90° CW (Ctrl+Shift+9) e gire o item de menu que chamamos de Home. Reposicione-o como segue abaixo.

5.
Selecione o texto Home juntamente com o retângulo que é sua base e converta-os em Símbolo de Movie Clip, teclando F8.

6.
Com o novo MovieClip ainda selecionado, abra o Properties Panel (Ctrl+F3) e nomeie a instância dele como home_bt.

A animação

7.
Dê um clique duplo no MovieClip que acabamos de criar ou clique com o botão direito nele e escolha no menu de contexto Edit in Place.

8.
Selecione somente o texto (Home), pressione Ctrl+x (Cut), crie uma nova layer (Layer 2), selecione o frame 1 da mesma e pressione Ctrl+Shift+V (Paste in place).

9.
Clique no frame 20 da Layer 1 e tecle F6. Configure Fill color com #E16802. Depois disto, clique na Layer 1, abra o Properties Panel (Ctrl+F3) e configure Tween como Shape.

Obs.: Para que as propriedades acima do Properties Panel sejam mostradas você deverá clicar no frame 20 da Layer 2 e não no retângulo, ok?

10.
Trave a Layer 1, selecione a Layer 2, clique no frame 10, tecle F6 (Keyframe) e navegue até Modify > Transform > Rotate 90° CCW (Ctrl+Shift+7).

11.
Clique no frame 20 e pressione F6. Depois disto, usando o mouse, mova Home para cima da base de nosso item de menu.

12.
Selecione a Layer 2 e configure, no Properties Panel, o Tween como Motion.

Observe que o Tween foi inserido entre os três keyframes.

13.
Clique no frame 20 da Layer 2, abra o Action Script Panel (F9) e digite o seguinte código:

stop();

14.
Volte para a cena principal (Scene1), crie uma nova layer e renomeie-a como botão Invisível 1. Crie o Botão Invisível* sobre o primeiro botão.

(*) Botão invisível é um botão apenas com o Hit

A codificação

15.
Selecione o “Botão Invisível”, abra o Action Script Panel (F9) e digite o código a seguir:

on (rollOver) {
_root.mouse_over_home_bt = true;
}
on (rollOut) {
trace(fstartlse);
_root.mouse_over_home_bt = auxiliar; //esta variável é indefinida
}
on (release) {
getURL(“http://www.academiadexadrez.com/”, “blank”);
}

16.
Crie uma nova layer e nomeie-a como AS. Então, clique no primeiro frame, abra o Action Script Panel (F9) e digite o código:

_root.botao1.onEnterFrame = function() {
if (mouse_over_home_bt) {
_root.home_bt.nextFrame();
} else {
_root.home_bt.prevFrame();
}
};

Com isso terminamos o primeiro botão do menu. Siga o procedimento análogo para os outros botões.

Download Arquivo fonte (v8)

(Fonte: FlashVault)