Flash AS2 09: Navegação

1. Três métodos de navegação

Uma das primeiras questões que devem ser resolvidas quando se pensa em projetar um website é a navegação. Se você já navegou bastante na web deve ter reparado que existem inúmeras maneiras de navegar, isto é, se deslocar entre um nó de conteúdo e outro. Na web, quando se está usando um navegador, geralmente se passa de um conteúdo a outro mudando de página… No caso do Flash não é assim que acontece: embora o Flash possa fazer links entre páginas (através do comando getURL) vamos navegar entre conteúdos de dentro do próprio arquivo Flash. Para isso, usaremos três técnicas diferentes, três exemplos de como isso pode ser feito. Não perca de vista, no entanto, que existem outros e que, se você é capaz de pensar em um jeito original de navegar, o Flash provavelmente é capaz de implementá-lo.

2. De frame em frame

Uma das maneiras mais básicas de dispor conteúdo dentro do Flash é usar cada frame como se fosse uma página web, e navegar entre elas. Vejamos como se faz isso.

Primeiro você cria um keyframe vazio em cada frame e coloca o conteúdo lá. Depois cria botões que mandam o leitor do Flash se deslocar até o frame desejado.



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


O código de cada botão é quase igual; só muda o número do frame de destino.

matisse.onRelease = function() {
  gotoAndStop(3);
}



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Não se esqueça de colocar um comando stop(); no primeiro frame para que a animação não dispare.

Existem alguns inconvenientes em se endereçar conteúdos pelo número do frame onde se encontra. Imagine, por exemplo, que tenho que incluir um conteúdo entre o primeiro e o segundo frame. Eu teria que modificar o código de vários botões para que funcionassem. Num site como o do exemplo, de 4 nós, isso não seria problema, mas em algo mais complexo, seria um trabalho enorme. Porisso, você pode achar mais conveniente nomear os frames e navegar referindo-se aos nomes. Assim, se o frame referente ao Magritte mudou de frame 2 para 42, não importa, desde que mantenha o mesmo nome de frame.

Você nomeia um frame selecionando-o e escrevendo um nome na caixa de propriedades. É bem parecido com nomear uma instância de objeto. Veja abaixo.



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Para mandar o Flash para o frame nomeado é só referir-se ao nome ao invés de ao número. Lembre-se de colocar o nome entre aspas. Veja o exemplo abaixo:

matisse.onRelease = function() {
  gotoAndStop("matisse");
}

3. Video, primeiro método

4. Navegação numa faixa horizontal

Imagine agora que você colocou o seu conteúdo num movie clip, e quer que este objeto se mova conforme você coloque o mouse mais à esquera ou mais à direita, como no exemplo.



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Usarei o evento onEnterFrame) para que o movie clip fique sempre verificando a posição do mouse.

Para que o Flash movimente o movie clip vamos usar a seguinte lógica: se o ponteiro do mouse estiver na parte direita da interface (_xmouse>200), vou mover o movie clip para a direita (diminuir o valor de _x). No caso oposto, se o mouse estiver no canto esquerdo (_xmouse<100), vou aumentar o valor de _x. Se estiver entre 100 e 200 o movie clip não se move.

painel.onEnterFrame=function() {
  if (_root._xmouse>200) {
    this._x -= 10;
  }
  if (_root._xmouse<100) {
    this._x += 10;
  }
}

Mas se o código ficar assim a faixa pode sair pelos dois lados… Para evitar que _x da faixa assuma valores indesejáveis, incluí estas outras condições:

painel.onEnterFrame=function() {
  if (_root._xmouse>200) {
    this._x -= 10;
  }
  if (_root._xmouse<100) {
    this._x += 10;
  }
  // evita vazamento à ESQ
  if (this._x>0) {
    this._x = 0;
  }
  // evita vazamento à DIR
  if (this._x<-900) {
    this._x = -900;
  }
}

5. Video, segundo método

6. Navegação por arraste

Na aula anterior vimos como arrastar objetos. Vamos imaginar agora que o conteúdo que queremos disponibilizar ao usuários está, como no exemplo acima, dentro de um movie clip, mas não só dentro de uma faixa horizontal, mas disposto um pouco mais livremente.

Se pudermos arrastar o movie clip arrastamos o conteúdo que está dentro dele ao mesmo tempo.

Veja o exemplo:



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


O código necessário para isso acontecer é o mesmo que vimos na aula passada.

painel.onPress=function() {
  startDrag(this);
}
painel.onRelease=function() {
  stopDrag();
}

Se deixarmos o código assim, tal como na versão da faixa, teríamos o inconveniente de deixar o conteúdo “vazar”…

Para evitar vazamentos, novamente usaremos o evento onClipEvent(enterFrame) para verificar a posição do clip a cada momento. Caso o clip tente adquirir um valor indesejado, corrigimos a situação imadiatamente, pelo uso do código abaixo.

painel.onPress=function() {
  startDrag(this);
}
 painel.onRelease=function() {
  stopDrag();
}
painel.onEnterFrame=function() {
  if (this._x>0) {
    this._x = 0;
  }
  if (this._y>0) {
    this._y = 0;
  }
  if (this._x<-300) {
    this._x = -300;
  }
  if (this._y<-300) {
    this._y = -300;
  }
}

Bem, estas são três maneiras de se navegar em um arquivo flash. Lembre-se que existem inúmeras. Tente achar uma que se adeque à sua proposta e ao seu conteúdo, e tente implementá-la usando variações do que aprendeu até agora.

7. Video, terceiro método