PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais ActionScript

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX
Dificuldade: Actionscript
Data de Publicação: 14/11/2003


Introdução

Este tutorial visa dar-vos a aprender como se desenvolve um preloader com percentagem, de maneira a que se possa ver a evolução do carregar de um ficheiro para a Internet ou para outro trabalho qualquer. Através de uma barra de progressão, é nos mostrado a percentagem de leitura.

Com o desenrolar da aprendizagem neste tutorial, vão poder ter a percepção de quão fácil é elaborar um preloader deste género. Assim sendo, mãos à obra.

Ficheiro Swf

Clique com o botão direito do rato sobre o filme para visualizar o menu de opções


Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF

1. Em primeiro lugar deveremos criar um novo documento, não tendo em conta quais as dimensões que estão a ser utilizadas. No nosso caso optamos por utilizar as dimensões de 320x200 px.

2. Para realmente começar-mos a trabalhar, deveremos começar por definir a barra de progressão. Nomeiem a nossa primeira layer de loadBar.

3. Vamos de seguida criar um rectângulo. No nosso caso decidimos usar um rectângulo de medidas de 100x10px e de côr cinzenta. Não se esqueçam de retirar as bordas do rectângulo (clicando sobre os extremos do rectângulo e pressionando a tecla de Delete).

4. Após termos realizado o passo número 3, deveremos clicar sobre o rectângulo e pressionar a tecla F8 de maneira a que nos abra a janela de Convert To Symbol. Deveremos então nomear o nosso o filme de loadBar, definir como sendo um Movie Clip e deveremos ter a Registration, feita à esquerda.

5. Não queremos que apareça uma barra do nada. Como tal, vamos criar as nossas próprias bordas do rectângulo. Assim sendo, criem uma nova layer e dêem-lhe o nome de borders.

6. Vamos utilizar a ferramenta do Flash, a linha (line), para desenhar-mos as bordas do nosso rectangulo. Tenham em atenção que devem ter a layer de borders, logo acima da layer de loadbar. So desta maneira poderão ver aquilo que estão a fazer.

7. Muito bem ! Já temos um barra de progressão devidamente elaborada. Devemos preocupar-nos agora com a nossa barra de percentagem de progressão. Criem uma nova layer e dêem-lhe o nome de loadText.

8. Com a ferramenta de texto do Flash, devem criar a área do tamanho que desejarem e onde desejarem para que possamos visualizar a nossa área de progressão. Aconselhamos a que não seja uma barra muito grande, pois somente vamos precisar de mostrar 4 caracteres dentro dela.

9. Com a caixa de texto seleccionada, deveremos dirigir-nos à barra de properties. Deveremos ter em atenção que estamos com a opção de Dynamic Text seleccionada. Após nos termos certificado da opção, deveremos nomear a nossa caixa de texto, como loadText, na Var.

10. Acreditem ou não, mas acabamos de fazer o nosso preloader. Agora somente teremos que inserir as actions, para que ele funcione. Vamos criar uma nova layer e dar-lhe o nome de Actions.

11. Cliquem na frame 2 e insiram uma Blank Keyframe. Desta maneira teremos a possibilidade de ter duas Keyframes em branco para podermos inserir as actions necessárias.

12. Nas outras duas layer deveremos inserir 2 frames, para que o nosso preloader possa prosseguir correctamente a sua finalidade. Para isso clicamos na frame 2, e pressionamos a tecla F5.

13. A vossa Timeline deve estar de acordo com a imagem em baixo. Simplesmente a imagem em baixo, contem uma frame a mais, que é frame para correr o meu filme. Por isso podem ignorá-la.

14. Vamos então prosseguir para a inserção do nosso código de action script.

15. Cliquem sobre a primeira frame e dirijam-se ao painel de Actions. Copiem e colem, na parte direita do painel das actions o seguinte código:

bytes_loaded = Math.round(this.getBytesLoaded());
bytes_total = Math.round(this.getBytesTotal());
getPercent = bytes_loaded/bytes_total;
this.loadBar._width = getPercent*100;
this.loadText = Math.round(getPercent*100)+"%";
if (bytes_loaded == bytes_total) {
this.gotoAndPlay(3);
}

16. Cliquem sob a segunda frame da layer actions e vamos colar da mesma maneira no painel das actions o seguinte código.

this.gotoAndPlay(1);

17. Testem o vosso preloader e vejam o que fizeram. Para tal pressionem duas vezes as teclas de Ctrl+Enter.

 
Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.
 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados