Um “Preloader” básico

Aqui a técnica (e o código) básico de um pré-carregador passo-a-passo, nada difícil ou “tão complicado” e que pode ajudar bastante aos desenvolvedores.

 

 

  1. Abra o aplicativo Flash, escolha o tamanho do palco de acordo com o trabalho que estivermos fazendo, nomeie a primeira Layer (camada) como “preloader”

 

  1. Com a ferramenta Texto, crie uma “Label” (etiqueta), ou seja, crie um espaço vazio com a ferramenta que, de acordo com a programação posterior, receberá os dados. Deixe-a como “Dynamic Text” (Texto dinâmico) nas propriedades. Associe-a a variável “pct” (Var = pct)

 

  1. Converta essa “Label” para MovieClip (MC), instancie-o como “preloader”, dê dois cliques sobre a “Label” para editar o MC

 

  1. Nomeie a “Layer” do MC como “pct”

 

  1. Adicione mais duas “Layers” e nomeie-as como: contorno e barra

 

  1. Desenhe com a ferramenta retângulo um retângulo com borda na camada contorno

 

  1. Selecione o retângulo desenhado, sem as bordas, dê um Ctrl+X para cortá-lo

 

  1. Selecione a “Layer” barra e dê um Crtl+Shift+V para colar o retângulo no local correto, ou no menu Edit – Paste in Place

 

  1. Clique na barra (sem o contorno) e transforme-a em MC

 

  1. Peça um novo documento no Flash e abra um “ActionScript File” (Arquivo de ActionScript)

 

  1. Coloque nele o código a seguir:

 

var preloader:MovieClip;

// Nosso MovieClip

var numero:Number = new Number(0);

// Variável numero iniciada com o valor 0

function Init() {

// Função Init

_root.stop();

// Para o filme

onEnterFrame = function () {

// Ao entrar no quadro executar a função

var bl:Number = _root.getBytesLoaded();

// bl recebe os bytes carregados

var bt:Number = _root.getBytesTotal();

// bt recebe os bytes totais

if (bl>4 && bt>4 && bl>=bt) {

// Se os bytes carregados forem maior que 4 e os bytes totais forem maior que 4 e bytes carregados forem maior que bytes totais

delete onEnterFrame;

// Destrói o evento EnterFrame

_root.nextFrame();

// Vá para o próximo quadro

preloader.unloadMovie();

// Destrói o MovieClip preloader da memória

} else {

// Senão

numero = Math.floor(bl/bt*100);

// A variável numero vai receber o arredondamento dos bytes carregados divididos pelos bytes total multiplicados por 100

preloader.pct = numero+’%’;

// O campo dinâmico vai receber a variável numero mais o caracter %

preloader.barra._width = numero;

// O tamanho da barra será o valor da variável número

}

};

}

Init();

// Chamamos a função Init

 

 

  1. Salve o arquivo como “preloader.as” na mesma pasta onde estará o arquivo da cena principal

 

  1. Volte à cena principal e inclua mais duas “Layers”: Foto e Actions

 

  1. Insira um frame novo em cada “Layer” (F6)

 

  1. Ctrl+R e importe uma imagem coloque a imagem no segundo frame da “Layer” correspondente(Foto)

 

  1. Ctrl+K para alinhar a imagem ao palco

 

  1. No primeiro frame de Actions, coloque a seguinte ação:

#include “preloader.as” – esse nosso arquivo é chamado externamente

 

 

Para testar de um Crtl+Enter, provavelmente cairá diretamente na imagem, sem o efeito do carregador, na tela do “swf” aberta, dê novamente Crtl+Enter, ou vá em View e mande simular um download.

Se não funcionar, veja se todos os MCs estão instânciados corretamente, se a “Label” está como variante (Var=pct), etc…

 

A ação _root.getBytesLoaded(); como o nome já diz, faz a leitura do total de bytes carregados do seu swf, e o _root.getBytesTotal(); faz a leitura do total de bytes que tem o seu arquivo swf.

Abs

FC

Anúncios

3 comentários em “Um “Preloader” básico

    1. oi João,

      Vou tentar refazer e ver o que acontece, quando o publiquei fizemos em aula e tudo funcionou a contento… Não sei o que está havendo… Assim que eu refizer te posiciono, ok?

      Obrigado pela visita.
      FC

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s