segunda-feira, 20 de abril de 2009

Menu com balão acompanhando o mouse

Passe o mouse nos quadrados. (link do fonte no final do post)

O balão cresce, mas não distorce, isso acontece por causa do "9-slice scaling" está habilitado, ele não aumenta as áreas marcadas com vermelho na imagem abaixo, uso apenas o scaleX no exemplo, mas se usasse o scaleY ele só iria crescer o que está em verde.


Para habilitar o "9-slice scaling", vá na propriedade do movieClip e marque a caixinha do "Enable guides for 9-slice scaling.


Código comentado
//importando a classe Tweener, ver mais em http://code.google.com/p/tweener/
import caurina.transitions.Tweener;


//adicionando o elemento balao, da library
var Balao:balao;
Balao = new balao;
//adicionando o balao ao palco
addChild(Balao);
//alpha = 0 =]
Balao.alpha = 0;

//ativando a famosa maozinha do botao
preto.buttonMode = true;
vermelho.buttonMode = true;

//criando um listener para escutar o movimento do mouse
addEventListener(MouseEvent.MOUSE_MOVE,mouseMover);

//funcao que é chamada sempre que o mouse se move
function mouseMover(e:Event):void{
//o movieclip balao segue o mouse de perto =]
Balao.x = mouseX;
Balao.y = mouseY;
}

//criando os listener dos botoes
preto.addEventListener(MouseEvent.MOUSE_OVER,pretoOver);
vermelho.addEventListener(MouseEvent.MOUSE_OVER,vermelhoOver);
preto.addEventListener(MouseEvent.MOUSE_OUT,pretoOut);
vermelho.addEventListener(MouseEvent.MOUSE_OUT,vermelhoOut);


function pretoOver(e:Event){
Tweener.addTween(Balao,{alpha:1,time:1});
//diminuindo o tamanho do balao para 80%
Tweener.addTween(Balao.bg,{scaleX:.8,time:1});
//adicionando o texto ao balao
Balao.texto.text = "PRETO";
}
function vermelhoOver(e:Event){
Tweener.addTween(Balao,{alpha:1,time:1});
//aumentando o tamanho do balao para 170%
Tweener.addTween(Balao.bg,{scaleX:1.7,time:1});
Balao.texto.text = "VERMELHO FERRARI";
}

//quando o mouse sair de cima de um botao o balao some
function pretoOut(e:Event){
Tweener.addTween(Balao,{alpha:0,time:1});
}
function vermelhoOut(e:Event){
Tweener.addTween(Balao,{alpha:0,time:1});
}


Baixar Fonte - clique aqui

4 comentários:

Anônimo disse...

Aeeeeeeeee, tava procurando isso a muito tempo, vlw mesmo ótimo site :)

Anônimo disse...

Bom demais, quem sabe sabe! Parabéns!

Danilo Soncini disse...

Bom mesmo!!!

Felipe disse...

cadê a classe :

import caurina.transitions.Tweener;


????????????