Carregando...

(Loading em Flash)
Rodrigo Marini Hoje com 20 anos, mora no Tatuap (Zona Leste de So Paulo). Trabalha mais ou menos a 4 anos com as tcnologias Flash/Action Script, Cinema 4D, ASP, entre outros. Uma boa parte do seu conhecimento foi adquirido atravs de artigos e outros materiais disponibilizados na internet.

Ol. Meu nome Rodrigo Marini, este meu primeiro artigo aqui na PlugMasters. Ao longo do tempo iremos aprender fazer um site completo. Um mdulo por artigo. Vamos iniciar fazendo o sistema "Loading" do nosso futuro site. Com barra horizontal, porcentagem, total de KB e KB carregados. Primeiramente vamos criar um Layer e instacia-lo com o nome de "Aes". Ser necessrio criar algumas variveis ("nomes" escolhido pelo programador onde so guardadas informaes). VARIVEIS DESCRIO total carregado Guardar o total de Kb do swf. Guardar os Kb que ja foram carregados. Divide o total de Kb pelos Kb ja carregados e multiplica por 100, onde acharemos o percentual. Ento no primeiro frame

porcento

do layer "Aes", entra a seguinte Action.

//---------------------------------------------total = int(getBytesTotal()/1024); carregado = int(getBytesLoaded()/1024); porcento = Math.floor((total/carregado)*100); //---------------------------------------------Pronto as variveis foram criadas e dada as respectivas funes elas. Reparem que as variveis "total" e "carregado", foram dividas (representado pelo sinal " / ") por 1024, isso faz com que ao invs de bytes, tenhamos Kb. Agora criaremos a barra e logo aps, seu andamento. Vamos desenhar uma barra horizontal clicando na ferramenta "Rectangle Tool", ou apertando a tecla (R). Aps criada vamos transforma-la em um Movie Clip (F8), frisando que de extrema importncia alinha-la esquerda, como na imagem abaixo:

Agora criada a barra, vamos instancia-la com o nome de "barra_load", e no mesmo frame adicionar a seguinte Action: //----------------------------------------------barra_load._xscale = porcento=Math.floor((carregado/total) *100); //----------------------------------------------Essa action faz com que a barra cresa na horizontal, conforme a porcentagem contida na varivel "porcento", neste caso crescer para direita, pelo fato de termos alinhado a barra esquerda. Prximo passo criarmos duas caixas de texto dinmico (T) e instacialas. A primeira com o nome "porcento_txt" e a segunda "tamanho_txt", como na imagem abaixo:

Com os campos dinmicos criados, vamos adicionar a seguinte Action: //------------------------------------------------porcento_txt = porcento+"%"; tamanho_txt = carregado+" KB de "+total+" KB"; //------------------------------------------------Isso far com que os campos dinmicos recebam as respectivas informaes. Agora vamos criar uma Action para que quando a varivel "porcento" receber o valor "100", pare de executar a funo que ns acabamos de escrever. //-----------------------------if (porcento == 100) { gotoAndPlay(3); } //-----------------------------Terminada as Actions que devero ser escrita no primeiro frame do layer "Aes". Vamos criar um novo frame (frame 2), ainda no layer "Aes" e colocar a seguinte Action: //-----------------------gotoAndPlay(1); //-----------------------Isso far com que o swf fique dando "loop", ou seja, do frame 1 vai para o frame 2, e aps, retorna para o frame 1 e assim por diante. Feito isso, esta pronto nosso sistema "Loading". Lembrando que a partir do frame 3, que comearemos a desenvolver nosso site. Segue abaixo Cdigo completo do nosso "Loading". //-------------------------------------------------total = int(getBytesTotal()/1024); carregado = int(getBytesLoaded()/1024); porcento = Math.floor((total/carregado)*100); barra_load._xscale = porcento=Math.floor((carregado/total) *100); porcento_txt = porcento+"%"; tamanho_txt = carregado+" KB de "+total+" KB"; if (porcento == 100) { gotoAndPlay(3); } //-------------------------------------------------Dica: Para poder visualizar o nosso loading aps pronto, aperte as teclas "Ctrl" + "Enter". Aps abrir a vizualizao normal, aperte novamente as teclas "Ctrl" + "Enter". Assim conseguiremos visualizar o andamente da nossa barrinha, porcentagem e tamanho do swf. Espero ter sido til para a maioria de vocs! Lembrando que qualquer dvida que tenham, s entrar em contato diretamente comigo. Forte abrao todos.

Rodrigo Marini rodrigo_marini@hotmail.com http://www.rmarini.kit.net

Arquivos anexos ao artigo

l

Carregando.fla