ÉMERSON ROCHA (85 pts)

EDUARDO CARREGA (150 pts)

SÁVIO PONTE (39 pts)

DEMIS BUCCI (50 pts)

LUIZ HERRERA (117 pts)

KEN AWAMURA (130 pts)

RICARDO TEIXEIRA (40 pts)

MANGOOST (80 pts)

DENIS CARAVALHO (85 pts)

EDUARDO WALMOTT (226 pts)

MAURO ROCHA TAVARES (40 pts)

DAUTON JANOTA (255 pts)
Treinamento PontoFlash de Flash e ActionScript

Preciso de um script para ver quantos usuários estão online.

Como fazer uma letra começar grande e ir diminuindo para dar a sensação de estar distanciando no Flash 5.

Como checar se o usuário escreveu um email válido certo no formulário?

Quero que quando terminar a animação de um movieclip, comece outro e assim sucessivamente.

Porque um botão dentro de um movie clip não envia comandos para uma cena?

Como tirar o menu do FlasPlayer que se abre quando se clica com o botão direito do mouse?

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

Como organizar um projeto para que o arquivo não fique grande?

Como adicionar um site aos favoritos num botão do Flash?

Uma grande dica para o uso do Prototype.

Como carregar uma imagem JPEG, com local e tamanho pré-definidos?

Botões em _levels inferiores continuam clicáveis.

Existe algum programa freeware que transforma um swf num protetor de tela?

Problemas com manter duas instâncias duplicadas na mesma cena.
Objeto Key

Post comments (Livro de Visitas)

Imagens transparentes usando PhotoShop, Fireworks e Flash.

Utilização da class XMLConnector

Família Macromedia Studio MX 2004

Load Movie into target (movieclip).

Jpeg, Gif, texto, gradientes X slices no Fireworks

Integração Flash X ColdFusion.

Inserir dados no ASP via formulário no Flash.

Event Handlers (identificadores de eventos).

Turbine seu Fireworks

Limitar por IP? Porque não utilizar o Shared Object do Flash?
Preloader avançado

Click determiner

Mapa - Países com E

Flash Banner

Cromatograma

Notícias

Colisao e swap

Multi text load

Validação de senha e login

Menu fmx

3d panels1

Mouse thingy
HOME | TUTORIAIS
Entendendo como funciona um preloader. Primeira parte.
por Ricardo Takahashi

1 / 2 / 3


 

Esta é uma versão revisada do tutorial original. Fiz algumas alterações (e correções) no texto, actions, imagens e exemplos. Além é claro de adicionar uma parte para a nova versão do flash, a versão MX.
Escrever um tutorial não é fácil, mas aos poucos a gente vai aprendendo e aprimorando mais e mais. Esta foi umas das minhas primeiras experiências ensiando flash, portanto erros são comuns. O retorno do pessoal que viu meu tutorial foi muito importante para esse aprimoramento!

O preloader pode ser apenas um detalhe na página. Porém, um bom preloader chama a atenção e faz com que o internauta continue na página esperando para ver o que vem depois.

    Mas como montar um preloader interessante?
    A resposta é simples: com criatividade.

    Como criatividade não se ensina, vou passar nesse tutorial o que você precisa saber para poder montar o seu. Com essa base, você já poderá montar um preloader próprio, da forma que você quiser.

A base do preloader

 Vou utilizar aqui as funções getBytesTotal() e getBytesLoaded(). Além dessas duas funções, há ainda a possibilidade de se trabalhar com _totalFrames, _framesLoaded e ifFrameLoaded(){} este último já não esta completamente obsoleto na versão MX.

    A vantagem de se trabalhar com os bytes recebidos (getBytesTotal() e getBytesLoaded()) é que você pode verificar/exibir o carregamento real do filme ao invés de se verificar apenas os frames carregados (_totalFrames e _framesLoaded). Ao se trabalhar com os bytes recebidos você pode mostrar o status atual de carregamento, ao passo que, ao se verificar os frames carregados você tem o problema de nem todos os frames terem o mesmo tamanho em bytes. Assim, se em um frame você tem 5Kbytes e no outro você tem 50Kbytes, você terá uma "pausa" no seu carregamento e dependendo da conexão do internauta, ele poderá pensar que tem alguma coisa errada.

    Agora que nós definimos qual o comando vamos usar e o porquê disso, vamos explicar o faz cada uma dessas funções.

    A função getBytesTotal() retorna o valor total de bytes do objeto. Observe que você não precisa necessariamente "pegar" o valor total de bytes do filme inteiro. Você pode indicar, por exemplo, um movieclip e retornar o seu tamanho em bytes.

    Ex.:

trace (movieclip.getBytesTotal());
// retornaototal de bytes do movieclip

    Porém isso não nos interessa. Esse exemplo foi colocado somente para demonstrar sua funcionalidade.

    A função getBytesLoaded() retorna o total de bytes carregados (até o momento, em cada execução). Para que se verifique os bytes carregados é necessário que esta função esteja em "looping" para que haja uma verificação constante desse valor.

    Além dessas funções, vamos trabalhar também com variáveis. A finalidade dessas variáveis é a de armazenar um determinado valor, além de facilitar a parte de programação.

    Para montar esse preloader, vamos trabalhar com um movieclip. Isso é uma decisão minha, mas você também poderia fazê-lo direto na timeline, isso fica a seu critério.

    Acredito que você já saiba como criar um movieclip, então vamos pular essa parte e ir direto a parte de actionscript (se você não souber criar um movieclip, não se preocupe, mais para frente está disponivel um exemplo para download).

01
02
03
04
05
06
07
08
09

  onClipEvent(load) {
    total = _parent.getBytesTotal();
    _parent.stop();
}

onClipEvent(enterFrame) {
   loaded = _parent.getBytesLoaded();
   if (loaded == total) _parent.play();
}

Explicando cada linha:

01

- Ao carregar o movieclip, executa...
02 Seta a variável "total" como sendo o valor total de bytes do filme. Utilizamos aqui junto a função getBytesTotal() o aliás _parent. Ele indica um caminho relativo do preloader em relação a timeline principal. Quer dizer, ele indica que o valor de bytes total é o da timeline principal, abaixo (_parent) da timeline do movieclip.
03 Pàra a execução do filme. A explicação do _parent é a mesmo da linha 2. Só que aqui, ao invés de retornar o total de bytes, ele está parando a execução da timeline um nível abaixo timeline do movieclip.
04 Encerra o evento load.
05 ...
06 Ao entrar no frame... Este seria o nosso looping, onde cada vez que ele executar o frame, ele atualizaria o valor da variável.
07 Seta a variável "loaded" como sendo o valor de bytes recebidos até o momento. A cada execução do looping esse valor é atualizado.
08 Faz um verificação de condicional. Caso o valor da variável total seja igual (== sinal de comparação) ao da variável loaded, executa o filme. Caso essa condicional não seja verdadeira, continua o looping.
09 Encerra o evento enterFrame.

       Esse é um exemplo básico de um preloader, o mais simples possível. Porém, não nos mostra o status atual (porcentagem, bytes carregados, etc...). O que você acha de "incrementar" esse preloader um pouco?! Isso é o que nós veremos a seguir.

Tornando o preloader mais atrativo

O preloader por si só precisa ter algo que chame a atenção do internauta. Algumas pessoas costumam colocar uma animação simples enquanto o filme vai sendo carregado, outras preferem mostrar a porcentagem carregada, outras colocam uma animação junto com a porcentagem, e por aí vai...

Porcentagem

Como mostrar a porcentagem de bytes carregados? Usando matemática, uma simples fórmula.

    Ou simplificando, pct = (loaded/total) * 100;

    Analisando a lógica dessa fórmula fica fácil entender como ela funciona. O valor de loaded vai ser sempre menor que total. Como todo mundo sabe, quando você divide um número por outro maior, o resultado é sempre menor que 1. Sendo assim, ao se multiplicar esse valor por 100, você obtem o valor da porcentagem.

    Um exemplo, supondo que seu filme tenha 250 Kbytes e que você esteja recebendo 25 kbytes/segundos você teria:

    Veja como ficaria o código:

onClipEvent(load) {
    total = _parent.getBytesTotal();
    _parent.stop();
}

onClipEvent(enterFrame) {
   loaded = _parent.getBytesLoaded();
   pct = Math.floor((loaded/total)*100) add "%";
   if (loaded == total) _parent.play();

 

Obs.1: O comando Math.floor, adicionado nesse exemplo, retorna somente a parte inteira de um número. Se você tivesse um valor como 43,32514 ele retornaria 43.

Obs.2: Repare que na condicional if, utilizamos um valor entre aspas ("100%"). Isso porque ao adicionarmos o símbolo "%" a variável pct deixa de ser um valor numérico e passa a ser uma string.


Clique aqui e faça o download desse exemplo.

Caso você queira adicionar uma barra, por exemplo, bastaria criar um retangulo, transformá-lo em símbolo (movieclip) e ajustar seu centro. Veja como ficaria.

    Passo 1:
    Crie um retângulo.

    Passo 2:
    Selecione o retângulo e transforme-o em um movieclip (F8).

    Passo 3:
    Duplo clique sobre o movieclip criado. Selecione o retângulo, pressione CTRL+K (alinhar). Ative a opção "To Stage" e alinhe o objeto à esquerda.

    Passo 4:
    Selecione o movieclip novamente e atribua uma instance a ele. Nesse exemplo eu utilizei "barra".

    Uma pequena alteração no código também é necessário:

 

onClipEvent (load) {
   total = _parent.getBytesTotal();
   _parent.stop();
   barra._xscale = 0;
}

onClipEvent (enterFrame) {
   loaded = _parent.getBytesLoaded();
   barra._xscale = pct=Math.floor((loaded/total)*100);
   if (pct == 100) {
      _parent.play();
   }
   pct = pct add "%";
}


As alterações feitas estão em destaque
(vermelho)

Este exemplo está bem fácil de se entender. As alterações estão nas linhas onde há uma referência ao movieclip barra (barra._xscale). Note que, como o movieclip barra está dentro do movieclip do preloader, não há a necessidade de se utilizar _root, _parent, tellTarget ou with.

    Na parte de verificação, agora o valor está sem aspas, isto é, ele verifica a variável como sendo um valor numérico e não mais uma string. Veja esse exemplo funcionando:


Pegue aqui o segundo exemplo

 



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
0 comentário