A intenção deste artigo é criarmos um carregador ou preloader progressivo. No primeiro momento trabalharemos com: criação da interface, importação dos elementos do layout, desenho do preloader, etc. No segundo momento trabalharemos com a programação em AS3 (Action Script 3), fazendo com que o preloader execute seu trabalho.
Criando a interface
O primeiro passo é abrirmos o flash (no caso estou trabalhado com a versão cs5) e criarmos um novo documento: Create New -> ActionScript 3.0
Para adiantar nosso trabalho, criei a arte e anexei neste post os arquivos utilizados. Baixe os arquivos por meio do link no fim desse tutorial e, em seguida, faça o seguinte:
File > Import > Import to Stage – iremos escolher o arquivo arte.psd.
É importante destacar que nesta caixa de importação de arquivos do flash já podemos apontar que tipo de camada o flash irá reconhecer, ou seja, se a camada é um texto editável, um vetor ou uma imagem bitmap.
Faremos este processo, como na ilustração acima, para todas as layers de imagem. A compressão lossles,s, como o próprio nome já diz, é uma compressão sem perdas, evitando assim o serrilhamento das imagens. A camada de texto marcaremos como Editable Text. Feito isso, na caixa convert to layers, selecione a opção Flash Layers, e marque a opção “Place layers at original position“, clique em ok. Teremos o seguinte resultado:
No caso deletaremos a layer em branco e trancaremos todas as camadas exceto a camada “50% carregado e bg carregador”. Selecionaremos as duas layers e criaremos um MC (Movie Clip) por meio do comando: Modify > Convert to symbol. Podemos chamá-lo preloader_mc. Vamos deletar a camada vazia bg carregador, pois a mesma agora está dentro do Movie Clip. Neste momento já podemos criar a instância para o movie clip preloader_mc, conforme imagem abaixo:
Agora clicaremos duas vezes no movie clip preloader_mc para editarmos os símbolos. Repare que dentro do símbolo temos dois elementos: o texto e o bg carregador. Iremos separá-los em camadas. Para isso o flash dispõe um recurso interessante: selecione as duas layers no palco e clique com botão direito > distribute to layers; ele criará a seguinte situação:
Podemos trancar a camada bg carregador pois ela servirá somente como layout. É necessário mudar a camada de texto de classic text para Dynamic text e instanciá-lana na barra de propriedades da layer. Chamarei essa instância de preloader_txt. Nesse texto aparecerá o carregamento dinâmico.
Agora criaremos a barra de carregamento. Primeiro vou criar uma camada acima do bg carregador, vamos chamá-la de barra. Criei uma barra preenchendo todo o bg, desenhei um shape e usei um gradiente acompanhando o layout, conforme demonstra a figura abaixo:
Vou trancar a camada da barra e criarei um nova camada acima que será a máscara. A intenção é animarmos a máscara. Nesse caso, precisaremos criar um shape por cima da barra e uma instância que chamarei de mascara_mc.
Nesse momento é preciso atentarmos para a seguinte situação: dentro do preloader_mc temos dois objetos instanciados, o texto, que se chama preloader_txt, e a máscara, que se chama mascara_txt.
O próximo passo é mascararmos a camada. Para isso, iremos clicar com o botão direito na camada mascara e escolher a opção mask. Ok! A nossa interface está pronta. Agora é só clicar na Scene ou um dar duplo clique no palco para voltarmos um nível.
Action Script 3.0
Criarei, na cena principal, uma camada acima de todas com o nome de Actions. Nela vou inserir o seguinte script:
[code]stop();[/code]
Lembrando que o nosso conteúdo estará no segundo frame. Nesse caso, vamos estender nossa linha do tempo, somente os frames que realmente necessitam aparecer com exceção do preloader, caso contrário, quando o flash carregar seus arquivos, o preloader aparecerá por cima ou por baixo do conteúdo. Conforme abaixo:
No frame 2 iremos colocar o conteúdo, então importarei qualquer imagem para concluirmos o tutorial.
No frame 2 da camada de actions podemos inserir o mesmo script:
[code]stop();[/code]
No frame 1 da camada de actions iremos inserir o seguinte script:
[code lang=”js”] stop(); //stop para parar np primeiro frame loaderInfo.addEventListener(ProgressEvent.PROGRESS, percent); //criamos acima um ouvidor de progresso //abaixo a funcao do ouvidor, sempre respeitando o mesmo nome percent, ou seja qual for. function percent(event:ProgressEvent):void { var porcentagem:int=event.bytesLoaded/event.bytesTotal*100; /* criamos a variavel porcentagem que é inteira pegamos o evento do total de arquivos carregados e dividimos pelo total de bytes do nosso arquivo e multiplicamos por 100. nesse ponto é recomendado inserir a cláusula trace(percent); que retornará o valor da porcentagem também é bom testar a porcentagem, que retornará o carregamento trace(porcentagem); */ preloader_mc.preloader_txt.text=String(porcentagem)+” %” + ” carregado”; //precisamos agora pegar o valor da porcentagem e coloca-la no nosso campo de texto que é uma string //se quiser concatenar a porcentagem no action usa-se o sinal de + preloader_mc.mascara_mc.scaleX=(porcentagem/100); //para fazermos a barra de progresso funcionar temos que localiza-la aqui, como a instancia do movie clip //é loading e a instancia da mascara é mascara, fazemos a scala em x. if (porcentagem==100) { //dentro dessa condicao fazemos o teste que se caso nosso arquivo tiver 100% de carregamento, mandamos o vá para //o frame 2, onde se encontra nosso site ou qualquer que seja a aplicação. gotoAndStop(2); } } [/code]
É importante lembrarmos que existem vários métodos de carregamento no adobe flash. Podemos por exemplo criar um arquivo que irá carregar um texto externo, imagens externas, movie clips externos etc. Claro que todas as técnicas de carpreloaderregamento são interessantes, cada qual com suas particularidades.
No próximo artigo sobre flash veremos como usar o code snipets, que é uma novidade bem bacana. Nesse painel você encontra diversos códigos prontos para serem usados, eliminando a necessidade de ficar escrevendo sempre os mesmos códigos.
Clique aqui para baixar os arquivos utilizados nesse tutorial Aproveite os comentários abaixo para deixar suas dúvidas e sugestões, participe!
