No forum Ajuda na Web, onde eu modero a seção de Flash / ActionScrip, surgiu um post em que me perguntaram se eu tinha um source de exemplo sobre a explicação que eu havia dado. Pensei então: “Acho que é um bom começo para a seção coding do blog. E ainda soluciono o problema dele”. Posto isso, resolvi fazer esse post.
Não é algo muito complicado, mas é bastante comum em sites em flash esse tipo de menu, onde o botão ao ser ‘clicado’ mantem o estado ativo, o resultado final será algo assim:
hold_state_menu
Nesse post vou focar somente na função do menu, para não deixar o post cansativo… let’s have some fun =D
Crie um novo documento no Flash, para ActionScript 2.0 e vá em Modify -> Document e configure ele como na figura abaixo:
Então, nesse documento, crie um novo MovieClip (Insert -> New Symbol ) com o nome de Menu:
Dentro do movieClip menu crie mais um movieClip (Insert -> New Symbol ) com o nome de Botao:
Agora desenhe e faça as animações de ativação e desativação do botão (movieClip Botao).
No primeiro frame e no frame que a animação de ativação estiver completa, coloque o action:
stop();
Dê o nome de ‘over’ para o segundo frame e o nome de ‘out’ para o imediatamente próximo a frame do fim da animação de ativação ( no exemplo esse frame é o de número 7 sendo que o frame com o label ‘out’ é o de número 8 ).
Agora voltando ao movieClip Menu, duplique 4 vezes o botão que você acabou de fazer, instancie cada um desses botões inclusive o botão origial com os nomes de bt0, bt1, bt2, bt3, bt4 respectivamente ( no exemplo os botões foram instanciados sequencialmente, visando simplificar o código para um melhor entendimento do problema ).
Agora, no primeiro frame do movieClip Menu, adicione o código abaixo:
// variável auxiliar
var selectedItem:MovieClip = null;
// aplicamos o controle nos botões
applyHoldStateControl(bt0);
applyHoldStateControl(bt1);
applyHoldStateControl(bt2);
applyHoldStateControl(bt3);
applyHoldStateControl(bt4);
// função que aplica os controles de ‘HoldState’ nos botões
function applyHoldStateControl(bt:MovieClip):Void {
bt.onRollOver = function() {
// ignoramos a chamada se o botão atual for o selecionado
if (selectedItem != this) {
this.gotoAndPlay(‘over’);
}
};
bt.onRollOut = function() {
// ignoramos a chamada se o botão atual for o selecionado
if (selectedItem != this) {
this.gotoAndPlay(‘out’);
}
};
bt.onRelease = function() {
// ignoramos a chamada se o botão ‘clicado’ for o mesmo que já esta selecionado
if (selectedItem != this) {
// se existir um botão selecionado então fechamos ele.
if (selectedItem != null) {
selectedItem.gotoAndPlay(‘out’);
}
// definimos o botão selecionado como o atual
selectedItem = this;
// chamamos a função que executa as ações referentes a cada botão
callAction(this);
}
};
}
// function que é chamada quando se clica em um botão
function callAction(bt:MovieClip):Void {
switch (bt) {
case bt0 :// actions para botão 0
_root.imagens.gotoAndStop(2);
break;
case bt1 :// actions para botão 1
_root.imagens.gotoAndStop(3);
break;
case bt2 :// actions para botão N…
_root.imagens.gotoAndStop(4);
break;
case bt3 :
_root.imagens.gotoAndStop(5);
break;
case bt4 :
_root.imagens.gotoAndStop(6);
break;
}
_root.imagens.brilho.gotoAndPlay(2);
}
Agora abra o source desse tutorial e copie o movieClip imagens que esta na raiz do documento para o seu documento.
Agora aperte ctrl+enter e teste o seu Hold State Menu. ;)
É isso: um exemplo simples de como fazer um menu para começar a seção Coding. Se houver alguma dúvida deixem comentários ou mandem um email que tentarei ajudar da melhor forma possível.
Até a próxima.
Arquivo fonte desse tutorial: hold_state_menu
Imagens do Flickr: http://www.flickr.com/photos/vale-p/
(No Ratings Yet)
Loading ...
