[Tutorial] Pre-carregador (Preloader)

[helldanger1]

Veremos como criar um pré-carregador com porcentagem em Flash totalmente personalizável. Utilizaremos um pré-carregador para ser usado na linha de tempo principal do filme. Para tanto, deveremos fazer o seguinte:

Agenda:
1) Criar um clipe de filme com a animação do pré-carregador
2) Colocar o código responsável pelo mecanismo do pré-carregador
--------------------------------------------------------------------------------------------


1) Primeiro passo: Criar um clipe de filme com a animação do pré-carregador

Enfatizo que a animação a ser criada para o pré-carregador pode ser qualquer uma, isso dependerá apenas da imaginação do caro leitor. Irei criar uma animação de um contador de giro do automóvel. Poderia ser uma bolha se enxendo, uma barra de porcentagem, uma figura se montando com máscara, enfim qualquer animação.

1.1) Crie um novo filme do flash (utilizei 400 x 280, mas as dimensões são livres)
1.2) Crie um clipe de filme com alguma animação (aqui eu criei um contador de giro do motor)

Nesta animação, coloquei na camada inferior uma imagem de um conta-giro e na superior, fiz a animação do filete vermelho girando sobre os números, indo do 0 até o número 7. Observe que não existem ações aqui por toda linha de tempo desse clipe de filme.

Caso tenha interesse para que apareça o percentual durante a exibição da animação, crie uma nova camada e insira uma caixa de texto dinâmica.

 

[helldanger1]

Coloque como caixa de texto dinâmica, abra a caixa para caber um texto com "100%", desmarque a opção do usuário poder selecioná-la e dê o nome de variável "percentual"

As demais formatações como fonte e alinhamento vão de acordo com o gosto do designer.

1.3) Termine a edição desse clipe de filme e coloque-o no primeiro quadro da linha de tempo principal desse SWF. Não é necessário colocar STOP() nesse quadro, todo o código estará no clipe de filme dessa animação.

1.4) Crie também um segundo quadro na linha do tempo principal e coloque o conteúdo desse SWF. O conteúdo não precisa estar concentrado no 2º quadro, apenas deve ser deixado o primeiro quadro para o pré-carregador.



2) Segundo passo: Colocar o código responsável pelo mecanismo do pré-carregador

2.1) Selecione o clipe de filme do pré-carregador e aperte F9 para exibir as ações do clipe.

2.2) Digite os trechos de códigos a seguir, observando os comentários e explicações sobre os mesmos

2.3) Precisamos parar a animação da linha de tempo principal:

// desativar a animacao da linha de tempo principal
onClipEvent (load) {
  _parent.stop();
}

 

[helldanger1]

Utilizamos o evento Load para que o STOP na linha de tempo principal seja a primeira coisa a ser executada pelo clipe de filme.


2.4) O código a seguir está responsável por executar devidamente a animação contida nesse clipe

// a cada fracao de segundo, animar de acordo com o total carregado
onClipEvent (enterFrame) {

  // calcular o percentual carregado
  var perc = _parent.getBytesLoaded() / _parent.getBytesTotal();

  // como o percentual esta entre 0 e 1, multiplicar por 100
  perc *= 100;

  // arredondar o valor
  perc = Math.round(perc);

  // testar se ja carregou 100%
  if (perc >= 100)
  {
    // em caso afirmativo, mover a linha de
    // tempo principal para o segundo quadro
    _parent.gotoAndStop(2);
  }
  else
  {
    // caso nao tenha carregado tudo:

    // animamos de acordo com o total carregado
    var proximoQuadro = Math.round(perc * _totalframes / 100);
    gotoAndStop(proximoQuadro);

    // mostramos o percentual carregado na caixa de texto
    percentual = perc + "%";
  }
}

 

[helldanger1]

Com isso terminamos o script necessário. Veja que a animação no interior do clipe pode ser qualquer uma, dependendo apenas da criatividade do designer. Utilizamos 50 quadros para a animação, não existe um limite, mas quanto mais quadros para a interpolação, melhor é o desenrolar do pré-carregador.

Apêndice A: gotoAndPlay() ou gotoAndStop() ? 
Caso deseja que a animação na linha do tempo principal se desenrole continuamente, em vez de usar _parent.gotoAndStop(2), utilize _parent.gotoAndPlay(2)

Apêndice B: Como trabalhar com vários SWFs sendo carregados por LoadMovie() ? 
É possível criar apenas um pré-carregador para vários SWFs através de ActionScript. Porém, não é o foco desse artigo. Para utilizar esse exemplo para vários SWFs que são carregados por LoadMovie(), coloque uma cópia do clipe de filme no primeiro quadro da linha de tempo principal de cada SWF.