• Tweet

• Tweet

Criar Preloader

Hoje em dia cada vez mais, existem sites criados em flash. Uma “característica” que os webmasters usam no site, são as preloaders. As preloaders serve para mostrar que o site está a ser carregado e normalmente a percentagem que vai. Existem preloaders mais complexas, em que essas mostram: o tempo restante, a velocidade de download, o tamanho total, tamanho transferido, entre outras opções. Eu neste tutorial, apenas vou ensinar a criar uma simples preloader, apenas mostrando a percentagem carregada. Brevemente postarei, outras formas de fazer preloaders (mais complexas).

Data: 06/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Flash.

2- Criar um novo documento.

3- Depois de criado o novo documento, na primeira frame vamos criar um campo de texto dinâmico (dynamic text) e com o nome de instância (Instance Name) “percentagem”. (Ver imagem )

4- Vamos agora seleccionar a frame 2 e vamos pressionar F7 para criarmos uma Blank keyframe. Agora nesta frame coloquem todo o contéudo que o site/animação irá conter. (No meu caso vou colocar uma imagem com um tamanho grande, para poderem ver o efeito)

5- Depois de terem adicionado o conteúdo, vamos voltar à frame 1, e pressionamos F9 para abrir o painel das Actions. Depois nas actions, colem o seguinte código:

ActionScript 2:

onEnterFrame = function () {

//pegamos o tamanho total e o tamanho carregado do arquivo
atualsize = _root.getBytesLoaded();
totalsize = _root.getBytesTotal();

//exibimos a percentagem carregada
percentagem.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != undefined && totalsize == atualsize) {
play();
delete this.onEnterFrame;
}

};

stop();

ActionScript 3:

this.addEventListener(“enterFrame”,onEnterFrame);
function onEnterFrame(e:Event) {

//pegamos o tamanho total e o tamanho carregado do arquivo
var atualsize = this.loaderInfo.bytesLoaded;
var totalsize = this.loaderInfo.bytesTotal;

//exibimos a porcentagem carregada
textload.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != null && totalsize == atualsize) {
this.removeEventListener(“enterFrame”, onEnterFrame);
play();
}

}
stop();

6- Depois basta pressionar Ctrl+Enter para testar e verem o resultado final.