Agora vamos converter o menu estático que nós criamos em um outro tutorial (nessa mesma seção) em um menu que deslize e responda à posição do cursor sobre o filme. Mover o mouse do meio do filme em direção à borda direita faz com que o menu deslizante role para a esquerda a uma taxa mais rápida, e vice versa. Baixe aqui o arquivo do outro tutorial.

Para fazer um movieclip que role continuamente

Com o objetivo de fazer uma rolagem contínua, precisamos duplicar o deslizador pelo menos uma vez (assim, uma borda escondida aparece imediatamente quando a rolagem começa). Selecione o retângulo cinza clicando o quadro 1 da camada Slider. Use a barra de prpriedades para configurar sua largura para 900 (dobre o que ela era).

   Clique no quadro 1 da camada thumbnails para selecionar todos os botões/miniaturas. Ctrl-c para copiar todos, e então ctrl-shift-v para colá-los no mesmolugar. Use barra de propriedades para movê-los para um novo local: x=456, y=191 (o y não muda). Agora você deve ter 10 miniaturas uniformemente espaçadas ao longo da dupla barra cinza. Clique no quadro 1 da camada Slider e dê um shift-clique no quadro 1 da camada thumbnails para selecionar a barra e as miniaturas. Clique F8, selecione Movieclip, e nomeie (nome de instância) o símbolo de sliderMC. Nessa janela de converter em símbolos há uma área chamada registro, que contém 9 quadradinhos. Selecione o do alto à esquerda para que o ponto de registro desse novo movieclip seja o canto esquerdo.

   Queremos ele no alto a esquerda, porque quando usamos as propriedades _x e _y do clip, estes se referem ao ponto de registro, e nosso código está escrito presumindo um ponto de registro superior esquerdo, como você vai ver.

O movieclip está agora na camada thumbnais, assim você pode re-nomear essa camada para slider e apagar a camada Slider original, que agora não tem mais conteúdo.

Para fazer o deslizador se mover para a esquerda

Para se xonseguir uma ação contínua em um movieclip, devemos usar o evento onClipEvent(enterFrame). Este são manipuladores de eventos para movieclips que disparam toda vez que os "playheads" entram no quadro corrente, o que farão continuadamente, desde que nosso clip esteja situado em um quadro do nosso filme de um quadro só. Assim, clique sobre o movieclip SliderMC para selecioná-lo e digite isto no painel Object Actions:

onClipEvent(enterFrame) {    this._x = this._x - 5; }

   "this" se refere ao movieclip no qual esse código reside (nosso movieclip silderMC). O comando this._x = this._x - 5 move o menu para a esquerda 5 pixels. Ele pode também ser abreviado para this._x -= 5.

   _x é uma propriedade de todos os movieclips que se referem à posição x do ponto de registro do movieclip no palco (ou na linha de tempo em que ele está, se estiver aninhado em outro movieclip). Igualmente _y é a posição y (onde 0,0 = o topo do palco).

  Teste seu filme neste ponto. Você poderá ver o menu se movendo lentamente para a esquerda. Caso você substitua 5 por 2, ele se moverá mais lentamente. Se você substituir por 15, ele se moverá mais rápido. Mas ainda permanecem dois problemas com essa implementação: 1) o menu sempre desliza da direita para a esquerda da tela (porque não tem nada que o impeça de fazer isso), e 2) clicar os botões já não faz nossas imagens grandes visíveis. Vamos focalizar antes o primeiro problema.

Adicione uma marca e retorne ao deslizador para fazer com que o movimento pareça contínuo

Para prevenir que nosso clip deslize para fora da borda esquerda, necessitamos marca-la e ver quando ela atinge o ponto onde está a ponto de sair e retorne o valor _x para 0. Aqui está o código, que você deve colocar no movieclip sliderMC.

onClipEvent (enterFrame) {    this._x -= 5;    // o menu está saindo do palco? mande-o para X=0    if (this._x<=-450) {       this._x = 0;    } }

Teste seu filme outra vez para certificar-se de que agora você tem uma rolagem contínua.

   Os cliques nos botões já não funcionam. Por que não? Este é o código que temos atualmente em nosso botão amarelo:

on (release) {    invisivel ();    grafico1.gotoAndStop("visivel"); }

   O problema é que o movieclip deslizante não encontra grafico1. O menu existe na linha de tempo principal, assim como o grafico1, assim temos que fornecer um caminho para nosso movieclip que permitirá que ele seja encontrado. Também temos que fornecer um caminho para a função se quisermos que ela execute corretamente. Assim, mudamos o código nos botões para:

on (release) {    _root.invisivel();    _root.invisivel.gotoAndStop("visivel"); }

   Veja se isso faz diferença. Você poderá utilizar também _parent, que se refere à linha de tempo na qual o movieclip está aninhado, ao invés de _root. De fato, é muitas vezes preferível usar um caminho relativo como _parent ao invés do caminho absoluto _root porque isto permite que aninhemos o clip dentro de outro, ou o carreguemos dentro de um nível, e ainda reter toda sua funcionalidade.

on (release) {    _parent.invisivel ();    _parent.invisil.gotoAndStop("visivel"); }

Control-Enter (teste o filme) para certificar-se de que todos os botões agora funcionam.

Use uma função e faça a variável de velocidade

Agora temos um movieclip se movendo numa direção a uma taxa fixa. Não com o movieclip que nós queremos exatamente. Precisamos de uma taxa variável, e necessitamos de movimento em ambas as direções. Para fazer isto, criaremos duas funções, moveLeft e moveRight. Cada uma terá um parâmetro nPixels, que diz para a função quantos pixels mover no clip em cada quadro, controlando assim efetivamente sua velocidade. Mas onde essas funções deveriam ir? Desde que elas controlarão o movieclip, faz sentido colocá-las como ações do movieclip. Mas não queremos redefinir as funções em todos os quadros (nós a chamaremos em todos os quadros, mas só necessitamos defini-las uma vez). Para isso, uma rotina onClipEvent diferente é ideal: onClipEvent(load), que é executada só uma vez, quando o clip é carregado pela primeira vez. Da linha de tempo principal, selecione o sliderMC, abra a janela de ações e coloque:

onClipEvent(load) {    nScreenWidth = 450;    // nPixels a velocidade do movimento    function moveLeft(nPixels) {       this._x -= nPixels;       if (this._x < 0-nScreenWidth) {          this._x = 0;       }    }    function moveRight(nPixels) {       this._x += nPixels;       if (this._x > 0) {          this._x = 0-nScreenWidth;       }    } } onClipEvent(enterFrame) {    moveLeft(5); }

Note que também fizemos uma variável nscreenWidth. Isto nos permite mudar facilmente seus valores (num lugar só!) se mudarmos a largura de nosso filme e ainda quisermos o código para trabalhar. Se você testar o filme agora, deve ver a mesma funcionalidade que antes, mas agora estamos chamando a função para fazer as ações para nós. Substitua a chamada para moveLeft por uma moveRight e você deve ver a mesma rolagem, mas na direção oposta.

Passo final: Controlar a velocidade de acordo com a posição do mouse

Queremos ajustar nosso valor nPixels de acordo com a posição do mouse no palco. A posição do mouse pode ser lida olhando-se para a propriedade _xmouse de um movieclip, neste caso _root. Se o mouse está no lado direito do palco, chamamos moveLeft e ajustamos nPixels para um valor entre nossa taxa mínima (0 pixels por quadro) e nossa taxa máxima (15 pixels por quadro) dependendo de onde o mouse está (entre 225 e 450). Idem, porém o oposto, para o mouse no lado esquerdo do palco. Aqui está o código para fazer isto (deixaremos você examiná-lo para ver como ele ajusta o nPixels relativo à posição):

onClipEvent(load) {    nScreenWidth = 450;    nMaxRate = 15;    // nPixels determines the speed of the slider movement    function moveLeft(nPixels) {       this._x -= nPixels;       if (this._x < 0-nScreenWidth) {          this._x = 0;       }    }    function moveRight(nPixels) {       this._x += nPixels;       if (this._x > 0) {          this._x = 0-nScreenWidth;       }    } } onClipEvent(enterFrame) {    // move slider with speed dependent on mouse position    if (_root._xmouse < nScreenWidth/2 && _root._xmouse > 0) {       moveRight(nMaxRate - _root._xmouse * nMaxRate/(nScreenWidth/2));    } else {       if (_root._xmouse > nScreenWidth/2 && _root._xmouse < nScreenWidth) {          moveLeft(_root._xmouse * nMaxRate/(nScreenWidth/2) - nMaxRate);       }    } }

E é isso aí! Rolagem variável, miniaturas "clicáveis", você está configurado! Muitas coisas podem ser adicionadas nesse filme para torná-lo melhor, como uns poucos quadros no começo que giram até que o filme esteja carregado antes de começar. A compressão nas imagens bitmap podem ser modificadas para obter imagens mais nítidas, ou tamanhos de arquivos menores (isto é configurado na aba do Flash nas configurações Publish, e eu a ajustei para 40 neste exemplo. A configuração padrão é 80).

 Baixe aqui o arquivo desse tutorial

Tradução:
Sérgio Ramalho