Virtualize Interatividade Digital

Criando um pré-loader (loading)

Uma das tarefas mais comuns necessárias ao desenvolvimento de um site em flash é a criação de um pré-loader: sessãoonde o visitante aguarda o load do site.

É  fundamental que nessa sessão o visitante tenha um feedback sobre quanto do site já foi carregado, o que pode ser feito através de uma barra de load ou mesmo de uma percentagem textual.

Para criar um pré-loader, devemos dividir o nosso site em dois arquivos. No exemplo chamarei eles de “loading.fla” (sessão de load) e “site.fla” (o site propriamente dito).

O arquivo “loading.swf” deverá ser o mais simples possível, contendo apenas os elementos necessários à apresentação da sessão de load do site. Não queremos que esse arquivo seja grande, pois não haverá um pré-loader para ele. Se o arquivo for grande e demorar para carregar o visitante poderá achar que há algum problema com o site, perder a paciência e sair antes mesmo de visualisá-lo.

No meu exemplo, o arquivo “loading.fla” possuirá um MovieClip que será uma cortina em branco com transparência, do tamanho exato do stage, um texto dinamico (Dynamic Text) alinhado no canto inferior direito e um texto estático, conforme a figura a seguir (o código fonte desse artigo encontra-se no final):

Nomeei o texto dinâmico de percentagem_txt e a cortina de cortina_mc.  No arquivo “site.fla” adicionei várias imagens, apenas para que ele ganhasse tamanho, para que possamos testar o load.

Com a estrutura citada pronta, o código para funcionamento do load é apresentado a seguir:

// Criamos um objeto Loader. A classe Loader nos permite
// realizar o load de conteúdos externos.
var loader = new Loader();

// Associamos o evento COMPLETE a função ExibirSite. Assim, quando o load for
// terminado a função ExibirSite será invocada.
loader.contentLoaderInfo.addEventListener(Event.COMPLETE            , ExibirSite);

// Associamos o evento PROGRESS a função ProgressoLoad. Assim, sempre que o progresso do
// load do conteúdo for atualizado, essa função será invocada.
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS    , ProgressoLoad);

// Solicitamos o load do arquivo site.swf com o conteúdo principal
// do site.
loader.load(new URLRequest("site.swf"));

// Função ouvinte do evento PROGRESS.
function ProgressoLoad(evt: ProgressEvent)
{
	// Calculamos a percentagem de progresso do load.
	// bytesLoaded é uma propriedade do evento que nos fornece a quantidade de bytes que
	// já foram carregados enquanto bytesTotal nos fornece a quantidade total de bytes
	// do arquivo que está sendo carregado.
	var percentagem     = evt.bytesLoaded / evt.bytesTotal;

	// Definimos a largura da cortina de acordo com a percentagem carregada.
	cortina_mc.scaleX     = percentagem;

	// Definimos o texto da percentagem de progresso.
	percentagem_txt.text= Math.floor(percentagem * 100) + "%";
}

// Função ouvinte do evento COMPLETE.
function ExibirSite(evt: Event)
{
	// Adiciona ao stage (root) o conteúdo carregado.
	addChild(evt.target.content);
}

A propriedade scaleX (e também scaleY) nos permite definir a escala de um MovieClip nos eixos X e Y. O valor dessa propriedade varia entre 0 e 1, com 0 correspondendo a nenhuma largura (no caso do scaleX) e 1 correspondendo a largura original do MovieClip. Como o MovieClip cortina_mc possui a largura do stage, o código AS do exemplo, nos garantirá que quando a percentagem de load atingir 100% a cortina possuirá a largura do stage (tamanho original).

A função “Math.floor()” retorna o arredondamento para o inteiro inferior de um número fracionário. Dessa forma o comando “Math.floor(percentagem * 100)” nos retorna a percentagem, que originalmente está entre 0 e 1, no formato entre 0 e 100. Após isso, utilizamos o operador ‘+’ para concatenar o resultado com o caractere ‘%’.

Por fim, também usamos o método “addChild()”. Trata-se de um método da classe MovieClip que nos permite adicionar um elemento dentro do MovieClip (esse elemento pode ser um Bitmap, Shape ou outro MovieClip).

Para testar o loading de um site o Flash nos oferece uma ferramenta bastante útil. Rode o filme com Ctrl + ENTER e utilize o menu “View” -> “Simulate Download” para testar o download do seu site. Você ainda pode escolher a velocidade de conexão que deseja testar em “View” -> “Download Settings.”

Lembrem-se que para o exemplo funcionar corretamente, os dois arquivos devem estar na mesma pasta e que o arquivo site.fla deverá ser compilado (ctrl + enter) antes do loading.fla.

Nos próximos artigos continuaremos com exemplos bem práticos e úteis na programação Action Script 3. Caso tenha dúvidas sinta-se a vontade para perguntar!

Clique aqui para baixar os arquivos deste artigo

Tags: actionscript 3, criação de sites, loading, pré loader, tutorial action script, tutorial actionscript