Menu Colorido Animado com AS3

Neste tutorial simples, vamos criar um menu horizontal colorido com o mouse sobre a animação usando Actionscript 3 e do motor TweenLite.

Por Softwares Pular para comentários

1. Crie um novo arquivo Flash (ActionScript 3.0) e salve-o como menu.fla.

2. Primeiro vamos criar o "template" bot?o que ir? usar para criar o menu.
Crie um Movie Clip (Insert> New Symbol) e dar-lhe um nome de MyBtn.
Exporta??o de bot?o para o ActionScript com um nome de classe MyBtn.
Dentro desse clipe de filme reproduz a mesma coisa, como mostrado abaixo:

http://www.oficinadanet.com.br//imagens/coluna/2912/1.gif


3. Abra o painel de a?es. N?s vamos utilizar o motor TweenLite ent?o primeiro se voc? n?o tiver j?
ir para http://blog.greensock.com/tweenlite/ para baixar a vers?o AS3.
Extraia o arquivo zip e obter o diret?rio com. Coloque esse diret?rio no mesmo n?vel do seu arquivo flash.
Primeiro escreva as seguintes instru?es para o uso TweenLite. Vamos usar o Matiz plugin para gerenciar as cores assim que n?s precisamos para ativ?-lo. (Mais informa?es em http://www.greensock.com/tweenlite/).
import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);


4. Armazenar os bot?es Next r?tulo em uma matriz e suas cores dentro de outra matriz.
var btnsArray:Array = ["Home", "News", "About", "Contact", "Info"];
var colors:Array= [0xFF0000,0x66CC00,0XFF9933,0x6633FF,0xFF33CC,0x660066];


5. Em seguida, escreva um createButtons () fun??o.
Loop atrav?s do btnsArray. Para cada bot?o, usamos a classe MyBtn que n?s previamente declarado e uso TweenLite para alterar a propriedade tonalidade do ret?ngulo do bot?o.
Montamos sua propriedades x e y e sua gravadora, definindo a propriedade de texto btn_label.
createButtons();

function createButtons ():void{
	for (var i :uint= 0; i < btnsArray.length; i++){
		var btn:MyBtn = new MyBtn();
		TweenLite.to (btn.btn_rect, 0, {tint: colors[i]});
		btn.x = i*115;
		btn.y = 0;
		btn.btn_label.text = btnsArray[i];

		btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
		btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
		btn.addEventListener(MouseEvent.CLICK, btnClick);

		btn.buttonMode = true;
		btn.mouseChildren = false;
		addChild (btn);
	}
}


Em seguida, adicione os ouvintes de eventos diferentes do mouse e adicionar o bot?o ? lista de exibi??o.

6. No btnOver () fun??o que mudar a cor do r?tulo do bot?o e aumentar a altura do ret?ngulo.
function btnOver (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0xFFFFFF});
	TweenLite.to (mc.btn_rect,.5, {height: 35});
}
}


7. No btnOut () fun??o que redefinir a cor da etiqueta btn para o preto e diminuir a altura do ret?ngulo.
function btnOut (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0x000000});
	TweenLite.to (mc.btn_rect, .5, {height: 5});
}


9. Finalmente, para o btnClick () fun??o que lhe permitem continuar a escrever seu pr?prio c?digo.
function btnClick(e:MouseEvent):void{
	//do your stuff here
}


10. ? isso. Aqui est? o c?digo final, testar seu filme para v?-lo em a??o.
import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

var btnsArray:Array = ["Home", "News", "About Me", "Infos","Contact",];
var colors:Array= [0xFF0000,0x66CC00,0XFF9933,0x6633FF,0xFF33CC,0x660066];

createButtons();

function createButtons ():void{
	for (var i :uint= 0; i < btnsArray.length; i++){
		var btn:MyBtn = new MyBtn();
		TweenLite.to (btn.btn_rect, 0, {tint: colors[i]});
		btn.x = i*115;
		btn.y = 0;
		btn.btn_label.text = btnsArray[i];

		btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
		btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
		btn.addEventListener(MouseEvent.CLICK, btnClick);

		btn.buttonMode = true;
		btn.mouseChildren = false;
		addChild (btn);
	}
}

function btnOver (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0xFFFFFF});
	TweenLite.to (mc.btn_rect,.5, {height: 35});
}

function btnOut (e:MouseEvent):void{
	var mc:MovieClip = e.currentTarget as MovieClip;
	TweenLite.to (mc.btn_label, .5, {tint: 0x000000});
	TweenLite.to (mc.btn_rect, .5, {height: 5});
}

function btnClick(e:MouseEvent):void{
	//do your stuff here
}


Arquivo anexo

Mais sobre: flash, menu, animado, colorido
Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, comente:
Carregar comentários