flash -- preloader
04-05-2003




Moo
Vou tentar explicar como fazer um simples preloader no macromedia flash (actionscript) ja que ainda existe muita gente com dificuldades neste topico. Vou explicar como fazer o preloader na mesma 'Scene'.

Em primeiro lugar vamos ver qual o proposito do preloader. O preloader e usado pa mostrar determinada informação ao
utilizador, enquanto o browser faz o download do filme. Dizendo isto temos de pensar de maneira a criar um loop
ate que o numero de bytes carregado atinga o numero total de bytes.



1. Como obter estes valores ?
se usarem a Ajuda do flash, na letra 'G' verao que existe duas funcoes com os nomes de 'getBytesLoaded()' e 'getBytesTotal()'
que nos da o numero de bytes carregado e o total a carregar (o tamanho do filme) respectivamente.



2. Ok! ja temos os nosso valores. E agora ?
agora relembremos o loop de que falei acima. Se tens o numero de bytes carregado e o total so tens de comparar os dois 
valores e ver se o numero de bytes carregado e identico ao total:

var bytesLoaded = getBytesLoaded();
var bytesTotal = getBytesTotal();

if( bytesLoaded == bytesTotal )
{
	gotoAndPlay( frame_inicial_do_movie );
}

Penso que o codigo fala por si, mesmo assim vou explicar o porque do gotoAndPlay(...)
gotoAndPlay(...) simplesmente posiciona-nos num determinado frame da timeline quando o numero de bytes carregado e igual
ao numero total de bytes. E Obvio que quando os dois valores sao iguais, conseguimos carregar o 'movie' e estamos prontos
a começar!



3. Mas e o loop? falamos sobre criar um loop e aqui so vejo uma comparacao entre dois valores obtidos do flash ?
E simples! para conseguirmos carregar o movie completamente temos de pedir estes valores e fazer a comparaçao sucessivamente.
Como? usando um novo frame que nos mande para o frame corrente enquanto a comparacao nao e verdadeira, vejamos:


FRAME 1:

var bytesLoaded = getBytesLoaded();
var bytesTotal = getBytesTotal();

if( bytesLoaded == bytesTotal )
{
	gotoAndPlay( frame_inicial_do_movie );
}


FRAME 2:

gotoAndPlay( 1 );	// posiciona-nos no frame 1 enquanto a comparaçao seja falsa e nao nos mande para o inicio do 'movie'


E temos um preloader muito simples e que funciona ! :)



4. Uhmm, funciona! mas nao vejo nada mesmo assim. Como visualizo o numero de bytes carregado ?
Bom, para tal e so criares 2 textboxes do tipo 'Dynamic Text', das um nome a cada uma ex. "bLoaded" e "bTotal"
e no FRAME 1 passas os valores das variaveis para as textboxes:

bLoaded.text = bytesLoaded;    // bytesLoaded contem o valor de bytes carregado
bTotal.text = bytesTotal;    // bytesTotal contem o valor total de bytes

E teras os valores no ecran!



5. Fixe! e como posso criar uma barra a la windows ou como muitos sites usam ?
Nao posso fazer o trabalho todo, mas aqui vai uma simples explicação:
Crias um simbolo (F8) com uma barra de tamanho 100 pixeis e das-lhe um nome, ex. "barraPreload"
um simbolo tem varias propriedades, tal como a posicao no ecran (_x, _y), a altura (_height), comprimento (_width), etc.

Agora, podemos converter os nossos valores de bytes em percentagem e usando esse valor para dar o tamanho a nossa barra!
(Neste exemplo vamos fazer uma barra horizontal)


var bPercentagem = (bytesLoaded * 100) / bytesTotal;
barraPreload._width = bPercentagem;

Nao precisamos mais nada. ao Fazer o preload veras a barra crescer ate atingir o seu tamanho maximo, 100 pixeis que equivale
ao valor em percentagem (100%).


Espero que este tutorial seja de alguma ajuda para todos os iniciantes no flash.
Divirtam-se!



6. Exemplo:  http://www.pixelnerve.com/tutorials/preloader.zip



7. Contactos

vic@pixelnerve.com
www.pixelnerve.com