PontoFlash - tutoriais

a. Crie um novo arquivo de 550 x 400 pixels;
b. Crie dois MovieClips um no formato do objeto que será movimentado(H: 190, W: 120, X: 275 e Y: 232) e outro que será a barra de rolagem(H: 60, W:8, X: 275 e Y: 345);
c. Agora crie um botão no formato de seta, que será usado para indicar a direção(coloque onde for de sua preferência), duplique-o ao lado e clique em Menu/Modify/Transform/Flip Horizontal, assim você espelha a seta para que fique duas indicando as direções.

2 - Instanciando Objetos:

a. No MovieClip que será movimentado(o maior) coloque a instância - QAD ;
b. No MovieClip que será a barra de rolagem coloque a instância - ROLA ;
c. No Botão que será a seta para a direita coloque a instância - DIR ;
d. No Botão que será a seta para a esquerda coloque a instância - ESQ .

3 - Adicionando Actions:

a. Clique com o botão direito do mouse no primeiro frame(único frame) e abra o painel Ações;
b. Cole o código abaixo no frame:

ESQ.onRollOver = function() {
   QAD.onEnterFrame = function() {
      QAD._x -= 5;
      ROLA._x = QAD._x;
      if (QAD._x<94) {
         QAD._x = 94;
      }
   };
};
ESQ.onRollOut = function() {
   QAD.onEnterFrame = undefined;
};
DIR.onRollOver = function() {
   QAD.onEnterFrame = function() {
      QAD._x += 5;
      ROLA._x = QAD._x;
      if (QAD._x>454) {
         QAD._x = 454;
      }
   };
};
DIR.onRollOut = function() {
   QAD.onEnterFrame = undefined;
};
ROLA.onDragOut = function() {
   ROLA.onEnterFrame = function() {
      ROLA.startDrag(3, 94, 345, 454, 345);
      QAD._x = ROLA._x;
   };
};
ROLA.onRelease = function() {
   ROLA.onEnterFrame = function() {
      ROLA.stopDrag();
   };
};

4 - Explicando o código:

4.1 - Primeira parte:

ESQ.onRollOver = function() {
   QAD.onEnterFrame = function() {
      QAD._x -= 5;
      ROLA._x = QAD._x;
      if (QAD._x<94) {
         QAD._x = 94;
      }
   };
};

Ao passar o mouse por cima do botão ESQ o action desse para próxima linha e movimenta o objeto QAD, subtraindo 5 da sua coordenada "x". Depois o objeto ROLA recebe a coordenada do objeto QAD movimentando a barra de rolagem de acordo com o objeto ROLA. Por fim, verificamos se a coordenada o objeto QAD é menor que 94 se for, então QAD._x e igual a 94, para que ele não saia da área do palco.

4.2 - Segunda parte:

ESQ.onRollOut = function() {
QAD.onEnterFrame = undefined;

Ao passar o mouse fora do botão ESQ então "QAD.onEnterFrame" e indefinido, para que o objeto QAD pare ao tirar o mouse da seta.

4.3 - Terceira parte:

DIR.onRollOver = function() {
   QAD.onEnterFrame = function() {
      QAD._x += 5;
      ROLA._x = QAD._x;
      if (QAD._x>454) {
         QAD._x = 454;
      }
   };
};
DIR.onRollOut = function() {
   QAD.onEnterFrame = undefined;
};

Repetimos todo o código anterior e alteramos os valores das referências. Agora ao invés de movimentar o objeto QAD subtraindo cinco de sua coordenada "x", acrescentamos 5 para que se movimente à direita. Com isso tivemos também que alterar a referência que indicava o botão ESQ, indicando agora o botão DIR (botão que indica a direita). Já no comando "if" substituímos o valor "<94" pelo valor ">454", levando em consideração que nessa etapa o nosso objetivo é que ele (o objeto QAD) não ultrapasse os limites do palco à nossa direita.

4.4 - Quarta parte:

ROLA.onDragOut = function() {
   ROLA.onEnterFrame = function() {
      ROLA.startDrag(3, 94, 345, 454, 345);
      QAD._x = ROLA._x;
   };
};

Ativa o efeito de clicar e arrastar na barra de rolagem e define as coordenadas em que ela poderá ser movimentada (procurar por StartDrag). Informa que a coordenada "x"do objeto ROLA é a mesma do objeto QAD. Assim, quando movimentar o QAD pelas setas a barra de rolagem acompanha. Ao soltar a barra de rolagem (objeto ROLA), o comando startDrag, é substituído por, stopDrag (procurar por StopDrag). Para que a barra de rolagem só seja arrastada quando for pressionada.

Agora é só estudar, editar e desenvolver a sua versão do código. Baixe aqui o arquivo Source

Espero ter ajudado,

Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados

2 comentários

Comentário de adalberto
| 20/1/2013 - 22:03 |

eu gostaria de saber como faço uma barra de rolagem igual a sua mais qndo eu clicasse na seta me mostrasse a imagem q esta ao lado assim q eu querria o efeito igual a dashboard do xbox ou igual a do google chrome.

Comentário de Ivanildo Soares
| 31/3/2011 - 16:49 |

eu queria saber como faler um movieclip se mexer usando as setas do teclado... se souber me ensina aqui meu emasi ivanildovv@hotmail.com

Visite o perfil de MAURO ROCHA TAVARES no portal PontoFlash

POLÍTICA - Discurso de João Goulart na Reunião de Sargentos no Automóvel Clube, em 30 de Março De 1964

POLÍTICA - Alexandre Delijaicov e a utopia urbana paulistana (e para todo o país?)

MEIO AMBIENTE - Desmatamento na Amazônia cai 23% em 12 meses

POLÍTICA - O Longo Amanhecer - uma biografia de Celso Furtado

MÚSICA - No Barquinho, Maysa namora sim a Bossa Nova

MÚSICA - Eduardo Gudin, um compositor refinado e popular

ESPORTES - Botafogo x Santos - 1964 - 1° Tempo Completo

MÚSICA - Kalouv, uma ótima experiência