LEANDRO AMANO (83 pts)

LUIZ AVANCI (51 pts)

MAURO ROCHA TAVARES (40 pts)

MARCELO SIQUEIRA (96 pts)

HELEN TRIOLO (444 pts)

NILTON BICALHO (61 pts)

ILVA RUDEV (90 pts)

RICARDO FIGUEIRA (33 pts)

AMAURY BENTES (123 pts)

KEN AWAMURA (130 pts)

JOTA LAGO (40 pts)

GUILHERME G.G. (137 pts)
Treinamento PontoFlash de Flash e ActionScript

Como eu faço para: se a palavra digitada for qualquer então vá para frame 20 senão, vá para frame 30.

Como defino uma pausa (delay) em meu filme?

Preciso fazer um movieclip rodar ao contrário (retroceder).

Criei o script para FullScreen e está abre o site em flash, mas o botão fechar criado no flash não funciona.

Porque as fotos de meu site ficam horríveis quando abertas em fullscreen?

Estou criando um combo works ou o famoso jogo de palavras.

Como faço para adicionar textura ou imagem ao invés de uma cor da paleta?

Como eu faço para editar gradientes pré definidos?

Com load movie into target, tem como carregar um SWF dentro de outro SWF?

Pra que serve o comando MovieClip.prototype?

Tenho um arquivo fla e gostaria de abrir um outro arquivo já feito quando esse fla estiver em execução.

Exemplo do uso de um compontente combobox.

Tenho muitas fotos e quero que a cada vez entre uma como background.

Tenho duas músicas no site, como crio um botão para mudar de música?
Comunicação Flash-PHp-MySql - introdução

Objeto Array: métodos sort() e reverse().

Tell Target e Linhas do tempo independentes

Componente Slideshow

Botões estilo Apple.com feito no PhotoShop

GetMySQLData para Flash5 (primeira parte)

3D Wireframe - segunda parte

Flash Studio Pro: Dando poderes ao Flash

LocalConnection

Máscara com gradiente.

Máscara percorrendo um caminho.

Detectando funções de browser usando ASP
Folha dobrada

Primeira letra maíscula

Sashacircle 3

Menu Flash e XML

Caçada

HitTest e SwapDepths

Menu vai e volta

On Off Button

Drag manchas

Relógioanalógico

Fill bitmap

3d bounce
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