| Autor: |
Flash Web Training |
| 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.
Clique com o botão direito do rato sobre o
filme para visualizar o menu de opções
Downloads:
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.
|
