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/