MARCOS JOSÉ PINTO (44 pts)

SYDNEY GANHO (60 pts)

ZECA BALA (45 pts)

STICKMAN (155 pts)

MAURO ROCHA TAVARES (40 pts)

RÔMULO NUNES (32 pts)

ZEBEDIAH (35 pts)

DANIELA PIRES (86 pts)

NETO LEAL (116 pts)

GABRIEL SPORCH (53 pts)

DEMIS BUCCI (50 pts)

RICARDO TAKAHASHI (180 pts)
Treinamento PontoFlash de Flash e ActionScript

Como colocar uns floquinhos de neve caindo somente com javascript?

Como fazer um menu que segue o mouse com easing como o do site do cantao.com.br?

Relógios no Flash e o horário de verão.

Como alterar dinamicamente o tipo e o background de um campo de texto?

Quero um cursor customizado apenas numa área específica.

Como faço para ter um efeito Lupa

Como fazer um load movie para um local específico?

Tem como encontrar um determinado texto numa string?

Eu gostaria de saber como faz o efeito de desfoque nos objetos!!

Num array de 44 elementos quero extrair 4 randomicamente, sem que eles se repitam.

Como fazer um link para fechar uma animação?

Como descarregar um SWF quando muda de cena?

Na função JS da janela popup, para que serve, o "void(0)"?

Estou tentando aplicar uma ação a um botão para fazer desaparecer um movieclip e quando clicar novamente ele mostrar o movie.
Compartilhando fontes

Flash MX 2004 Updater

Máscaras no Fireworks MX, o mistério!

Introdução ao Droptarget

Uso da tecla tab num formulário Flash.

Animação no Flash

Ação Imprimir.

Configurando texto via actionscript.

HTML no Flash 5 - A solução para formatação de textos longos.

GetMySQLData para Flash5 (segunda parte)

Plugins variados para seu trabalho em design

Troca de cor de imagens
campo de texto no Down

Typing

Particles

Flashdj

Velocidade

Loop FOR declarando variáveis

Menu móvel

Espanto

Mouse thingy

Lineas 2

Dottextsimple

Iluminação com foco
HOME | TUTORIAIS
Pre-carregador (Preloader)
por Thiago Prado

Olá a todos.

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


Nota: essa animação acima é apenas uma simulação de como o pré-carregador irá funcionar.

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.

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();
}

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 + "%";
  }
}

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.

Baixe aqui o arquivo desse tutorial



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
5 comentários


Comentário de pedro borin
| 21/10/2010 - 12:38 |


cara funcionou legal so q o percentual naum está aparecendo..



Comentário de Tec House
| 19/9/2010 - 19:48 |
http://www.techouse.com.br

Muito bom o carregador, vou utilizá-lo em algumas animações



Comentário de Yan costa
| 23/4/2010 - 08:26 |


Muito mal explicado =/



Comentário de daniel souza
| 13/4/2010 - 16:55 |


Affs vei tentei faze nao deu certo. quando baixei o arquivo a barrinha nem sobe ja aparece no filme carregado lol.



Comentário de daniel souza
| 13/4/2010 - 16:55 |


Affs vei tentei faze nao deu certo. quando baixei o arquivo a barrinha nem sobe ja aparece no filme carregado lol.