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