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/

Bom tudo começou com uma pergunta:

“Por que eu não consigo saber que conteúdos foram vistos ‘no nosso’ site?”

A resposta é simples, o site é em flash, e o google analytics por utilizar somente javascript na máquina do cliente, nao rastriea o conteúdo que está dentro dos arquivos swf.

Certo essa é uma resposta simples, mas que não resolve o problema, com isso veio a curiosidade:

“Será que não existe uma forma de fazer o google analytics rastrear o conteúdo dentro do flash?”

Com essa idéia em mente, fiz algumas pesquisas no google e logo encontrei a solução, que me surpreendeu pela simplicidade, não tive tempo de testar a fundo, mas nos primeiros testes essa solução funcionou bem, só achei um pouco enfadonho ter que colocar esse código em cada link que você deseja rastrear. Em um site antigo com uma estrutura de links não centralizada, isso pode se tornar um verdadeiro teste de força de vontade. =D

Abaixo o link com a documentação oficial do google com a solução para esse problema. Assim que tiver alguma aplicação prática ( mais elaborada ) utilizando essa idéia, posto aqui. Até lá, ‘documentação na veia’.

http://code.google.com/apis/analytics/docs/

http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55520