GUILHERME SCHEIBE (49 pts)

FLASHGURU (155 pts)

BÁRBARA TOSTES (64 pts)

KEN AWAMURA (130 pts)

MUZAK (45 pts)

NILTON BICALHO (61 pts)

AUTOR DESCONHECIDO (100 pts)

RICARDO TAKAHASHI (180 pts)

EDUARDO CARREGA (150 pts)

SASHA GUDEY (235 pts)

SÁVIO PONTE (39 pts)

DENIS CARAVALHO (85 pts)
Treinamento PontoFlash de Flash e ActionScript

Como se usa o NoCache?

Quero desenhar uma sombra enevoada em um botão!

Como reproduzo aquele efeito de espelho?

Qual é a melhor forma de carregar clips secundários? LoadMovie ou AttachMovie?

Alguém sabe como funciona os parâmetros do startdrag? StartDrag (beleza1, false, 70, 15, 70, 180);. O que seria estas medidas?

Como faço para carregar um movie clipe da cena 2 na cena1 do mesmo swf?

Problemas com variáveis importadas de um txt.

Como fazer uma linha criada via métodos de desenho ir crescendo da direita para a esquerda?

Como definir um loop num som tocado via actionscritp.

Vi que o único jeito de ter alguma coisinha legal no swift 3d e importando do illustrator?

Como faço pra adicionar uma site a meus favoritos via actionscript?

Quero montar algo como um Céu cheio de estrelas piscando.

Como faço o loading bem simples?

Como usar um loop FOR?
Adicionar ao favoritos

Aspectos Básicos das Ferramentas de Desenho.

Cadastro de usuários, com Flash+ASP

Tratamento de imagens e alguns efeitos no Fireworks

Objeto XML - introdução.

Flash Turbine (integração Flash com PHP ou ASP)

Fireworks, o patinho feio da Macromedia.

Como usar o Flash com o FrontPage?

Perspectiva 3D no Flash

Scroll - Rolagem de textos e Imagens

Context Menu - usando o botão direito do mouse

Jogo da Forca (segunda parte)
Alpha

Static

Spiral show

Drag manchas

Rolagem no over

Easy preloader

Code Elastic

Kaleidoscope

Drop Javascript

Check date

Efeito Matrix

3d zoom
HOME | TUTORIAIS
Menu deslizante.
por Helen Triolo

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



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
1 comentário


Comentário de rodrigo
| 28/4/2011 - 09:47 |


olá bom dia, curti o tutorial mas gostaria de saber como faço para que ele pare quando chegar ao final do filme. e nao continue infinitamente. grato!