Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mauro Nigro

problema (pre-loader)

Recommended Posts

tipo eu fui num site de aulas de flash ( pontoflash.com.br) ai tipo tem uma parte qe nao to entendendo qe é aprte do AS

 

 

 

 

 

Aqui esta a aula ( sendo qe ta sem as imagens e na parte 2 eu implaquei) Alguem me ajuda a interpretar de um jeito mais facil ?

 

 

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

É indispensável que informe qual a versão do actionscript do arquivo onde deseja inserir o preloader.

Minha sugestão inicial, dê uma olhada nos artigos publicados pelos colegas do fórum.

Deixo o link para você conferir: tutoriais imasters

Outra opção é digitar no Google --> "templates flash", ou termos semelhantes, e baixar gratuitamente um arquivo para que você visualize o funcionamento de um preloader. Tecle "Ctrl + Enter" --> 2 vezes, para observar a barra, movie clip ou porcentagem (ou combinações destes objetos) exibidos durante o carregamento.

Um site com muitos exemplos é o ffiles.com, basta efetuar um cadastro para baixar os arquivos. Uso e recomendo.

 

Fique atento para o "instance name" (no painel properties) declarados no código, isso vale para caixa de texto dinâmico usado para exibir a porcentagem, e também para o movie clip de carregamento. Nome do símbolo é uma coisa, nome da instância (instance name) é o que faz a coisa funcionar no actionscript.

 

Depois disso, certamente a única dúvida será referente ao movie clip para a barra de carregamento (ou também pode ser apenas uma animação, como nos vídeos do YouTube), fácil de resolver.

outra possibilidade ... é quando o arquivo que deseja carregar exigir outras soluções mais avançadas.

Mas aí, já é outra história.

Abs.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.