Loader no flash

Buenas!

Dou aula de webdesign e vou aproveitar a dúvida de alunos para fazer aqui um passo a passo de como criar um loader no flash. Acredito que seja necessário ter uma pequena base de actionscript e flash para desenvolver o loader, mas serei o mais claro possível.

O exemplo tratado é o loader que utilizei no meu portfolio: www.guilhermeserrano.com.br

O loader será um movie clip que vai estar posicionado no primeiro frame do seu filme e conterá ações que farão o filme parar, carregar 100% e aí sim, dar play.

Segue aqui as ações do movie clip criado:

onClipEvent (load) {
total = _parent.getBytesTotal();
_parent.stop();
barra._yscale = 0;
}


total
tamanho total do nosso filme

_parent.stop();
faz o filme parar

barra._yscale
deixa como 0 o tamanho Y da instância barra*

* Criei um elemento dentro do movie clipe e instanciei ele como barra (no meu caso barra é uma máscara)

Continuando com as actions do movie clip:

onClipEvent (enterFrame) {
loaded = _parent.getBytesLoaded();
pct = Math.floor((loaded/total)*100);
barra._yscale = pct;
if (pct eq 100) {
_parent.gotoAndStop(2);
}
pct = pct add "%";
}

onClipEvent (enterFrame)
faz as ações entre { e } serem executadas cada vez que entra neste frame, ou seja, vai ser criado um loop enquanto o filme estiver no frame 1

loaded
variável de quanto já foi foi carregado do filme

pct
divide o que já foi carregado (loaded) pelo tamanho total do filme (total) e multiplica por 100, isso resulta na porcentagem do carregamento

barra._yscale = pct;
essa linha faz a instância barra ganhar o tamanho em escala igual a porcentagem carregada. Por exemplo, quando 50% do filme estiver carregado a instância barra terá 50% do tamanho (no Y, que é altura). Esta linha que faz o "loader gráfico", da barra que vai andando por exemplo.

if (pct eq 100) {
se a variavel pct for 100 (isso acontece só quando todo o filme for carregado, claro) executa as ações dentro de chaves.

_parent.gotoAndStop(2);
o filme principal vai para o frame 2, que no meu caso é a capa do site.

pct = pct add "%"; = adiciono o símbolo % na variável pct. Uso isso pois dentro do movie clip eu tenho um texto dinâmico que exibe a variável pct, indicando quanto por cento do site foi carregado.

 

O resultado final do loader que eu fiz esta aqui no meu portfolio.
Bom, é isso, espero que tenha ajudado, críticas, melhoras e dúvidas é só comentar aí pessoal 😉


Publicado

em

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *