1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    Padrão [Tutorial] Pre-carregador (Preloader)

    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    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:

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


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    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

    Código:
    // 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 + "%";
      }
    }


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  4. #4
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    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.

    Código:
    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)

    Código:
    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar