Preloader para carregar imagens dinamicas

Olá, Pessoal! Estou iniciando aqui e espero ajudar e ser ajudado por todos aqueles que gostam desta incrível ferramenta que é o Macromedia Flash.

Continuando os exemplos de carregamento de imagens ou swf, vou apresentar para vocês como fazer um preload importando uma imagem dinâmicamente usando o evento onEnterFrame( Parte 1) e em outra matéria usando Listners (Parte 2). Essa imagem é um *.jpg (Não progressivo), lembrem-se de que o Flash não trabalha com imagens progressivas.

Bom, deixa de "lero lero" e vamos direto ao que interessa.

Crie um novo arquivo no Flash de width:400px e height:200px e crie inicialmente três camadas. A primeira camada chame-a de fundo , a segunda chame-a de barra e a terceira chame-a de acoes .

/applications/core/interface/imageproxy/imageproxy.php?img=http://i170.photobucket.com/albums/u270/viniciushf/img1.gif&key=a58fbff6fea7f1b1b9e2f034a851dee3fef3344033230d644402b84755130690" alt="Imagem Postada" />

Na camada(layer) fundo, desenhe um fundo qualquer, no caso eu desenhei um retângulo e pintei usando um gradial linear de cinza para branco.

Na camada barra, desenhe um retângulo e defina a parte de dentro do retângulo como MovieClip ( clique na parte de dentro do retângulo e aperte F8 e converta em MovieClip). Observe que quando você criar o MovieClip, vai aparecer uma caixinha do lado direito indicando o sentido do MovieClip, coloque ela para esquerda de acordo como esta a figura abaixo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i170.photobucket.com/albums/u270/viniciushf/img2.gif&key=add8c0899e39eae55e8ef6f6cbc6681dd86c985043029b6c0e646ce3f2c8d37d" alt="Imagem Postada" />

Após feito isso, clique novamente em cima do MovieClip barra_mc e dê seu nome de instância de barra .

/applications/core/interface/imageproxy/imageproxy.php?img=http://i170.photobucket.com/albums/u270/viniciushf/img4.gif&key=0c9a9aaa6d015f762ae28aa46af2ec8018c27f81acac2b1601e94c83f7fb42af" alt="Imagem Postada" />

Continuando, vá até a camada acoes, clique com o botao direito no 1º frame (quadro), escolha ações (actions) e digite o seguinte código:

//Código de carregamento de imagem

_root.createEmptyMovieClip("imagem", 1);

 

imagem.loadMovie("suaimagem.jpg");

 

barra.onEnterFrame = function() {

 

filmeTotal = imagem.getBytesTotal();

 

filmeBaixado = imagem.getBytesLoaded();

 

baixando = (filmeBaixado/filmeTotal)*100;

 

barra._xscale = int(baixando);

 

if(baixando= =100){

 

delete this.enterFrame();

 

};

 

};

/applications/core/interface/imageproxy/imageproxy.php?img=http://i170.photobucket.com/albums/u270/viniciushf/img5.gif&key=c87b60e5b7acaa1b95f2d917338ec4b5df52a96cef6f82ad0b4b0fa43941c081" alt="Imagem Postada" />

Comentário do Código

_root.createEmptyMovieClip("imagem",1);

//Estou criando um MovieClip dinâmicamente com o nome de imagem , no nível 1

imagem.loadMovie(" suaimagem.jpg ");

//Estou dizendo para o MovieClip Imagem que carregue a imagem suaimagem.jpg

//Dica: você também pode usar um arquivo .swf no lugar de .jpg

//Estou criando uma função que diz para o MovieClip Barra,quando ele for carregado, ele execute o código abaixo:

barra.onEnterFrame = function() {

filmeTotal = imagem.getBytesTotal(); //Carrega o total da imagem na variável filmeTota l

filmeBaixado = imagem.getBytesLoaded(); //Carrega o total baixado da imagem na variável filmeBaixado

baixando = (filmeBaixado/filmeTotal)*100; //Isso é a porcentagem sendo guardada na variável baixando

barra._xscale = int(baixando); //Faz com que o MovieClip barra ande da esquerda para direita

if(baixando = = 100){

delete this.enterFrame(); //Deletando o evento onEnterFrame quando baixando for 100

};

};

 

 

Detalhe: Se eu não tirar o evento onEnterFrame, ele ficará usando o processamento de sua máquina ou máquina do usuário. Portanto usem o delete this.enterFrame();