loading

/ Tutoriais

Criando um pré-loader (loading)

Tutorial

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):

Estrutura do exemplo deste tutorial.

Estrutura do exemplo deste tutorial.

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:

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



Arivan Bastos

Analista de sistemas, desenvolvedor Web e de games. Possui domínio de PHP, SQL e ActionScript 3. Possui conhecimentos avançados em Starling Framework, Corona SDK e Yii Framework. Atua na Virtualize na criação de sites, desenvolvimento de jogos, desenvolvimento de aplicativos mobile e desenvolvimento de aplicativos para redes sociais.