RICARDO FIGUEIRA (33 pts)

ALEXANDRE PORTO (1281 pts)

GUILHERME G.G. (137 pts)

PANDOGO (82 pts)

PEDRO CLAUDIO (50 pts)

JOÃO NETO (78 pts)

DANIELA PIRES (86 pts)

EDUARDO WALMOTT (226 pts)

LUIZ HERRERA (117 pts)

AMAURY BENTES (123 pts)

LUI FERNANDO (151 pts)

ÉMERSON ROCHA (85 pts)
Treinamento PontoFlash de Flash e ActionScript

Quero que executar uma ação dinamicamente, usando uma variável importada de um TXT.

Como fazer um efeito embaçado (efeito blur) no Flash?

FlashDecompiler

Como setar _alpha para um texto criado dinamicamente no FlashMX?

O que é e como utilizar o Change Handler dos componentes do Flash?

Para que serve o evento DATA?

Porque quando inserimos movie clip na cena principal, o mesmo vai representado apenas por uma bolinha?

Estou tentando utilizar o objeto sound do flash, mas não consegui ainda.

Como deixar minhas fontes legíveis (não embaçadas) no Flash?

Não consigo abrir um txt de um filme aberto no level1.

Como fazer um objeto isqueiro acender quando arrasto sobre outro (fogão)?

Como alterar a cor de um texto dinâmico dependendo do foco?

Plugin do Flash Player

Gostaria de arrastar um objeto em apenas uma área determinada da página.
Site da banda os Titãs - Avaliação de sites

Introdução ao Droptarget

Adicionar ao favoritos

Tornando movieclips arrastáveis (drag movieclip)

Formulário de e-mail com CGI.

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

Como usar o Flash com o FrontPage?

Objeto array - Classificar uma array (sorting) e e arrays multidimensionais

A história do Flash.

Guias de movimento (motion guide)

Redimensionar um filme no modo de edição

Conceitos de Programação e ActionScript.
Swap Movieclips

Colision balls

Worm

Texto com scroll

Nudemask1

Complex swap

Shared Object

Rotating dna

Radio button 1

Combobox

Scroll velo over

Condições
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