Flash Preloader

O objectivo principal do presente Tutorial, é transferir conhecimentos ao Formando/aluno, na preparação e elaboração de um PRELOADER.
O “Preloader” informa o utilizador/visitante que os arquivos relativos à página que está a consultar/visitar, estão a ser carregado no Browser. Por norma, o preloader funciona com um tipo de barra de progresso, associado a uma numeração de 1 a 100 (%). O progresso depende da velocidade da Internet/operador e dos arquivos da página que se visita.
Este preloader pode ser utilizado em todos os sites/paginas que futuro o Formando/aluno elabore.
Para que o Preloader funcione, é necessário conhecer algumas linhas de programação em AS 3.0 – Actionscript
Vamos dar inicio ao nosso Tutorial.
Comece por abrir a aplicação Flash CS4. Faça Crtl + J ou abra o painel de propriedades do documento. Nela defina a altura/height (500 pixel) e (600 pixel) de largura/width. Insira a seguinte cor #003300. O número de frames por segundo deve ser fixado em 35 – Frame rate 35 Ftp.

Seguidamente atribua um nome à Layer. Faça duplo clique e digite o nome. No nosso caso, optou-se por “Preloader”. Aproveite é faça um Save As do projecto, optando pelo nome de Preloader AS3.

Depois de efectuar as operações anteriores, seleccione a na barra de ferramentas do lado esquerdo do Flash CS4 a ferramenta de texto. Seguidamente faça Ctrl + F3 ou Window/properties. No painel das propriedades insira os seguintes dados: Defina o campo de texto como Static Text/Texto estático. A fonte de letra – Arial e tamanho 50. Defina a cor da letra a branco. Defina o Anti-alias: Anti-alias for Readability, de modo a facilitar a leitura.

Seguidamente seleccione o texto “A CARREGAR” e pressione F8 ou na barra de ferramentas Modify/Convert Symbol. Converta o texto em Movie Clip com o nome Carregar.

Após criar o Movie Clip e atribuir-lhe o nome, faça um duplo clique em cima dele. Seguidamente crie duas layers. Atribua à primeira layer o nome de texto e à segunda; percentagem. Faça F5 na frame 100 em ambas as layers.
Na layer percentagem seleccione a ferramenta texto que se encontra na barra de ferramentas lateral do Flash CS4. Nas propriedades/proprities opte por um campo de texto dinâmico – Dynamic Text. A tipo de letra pode ser Calibri tamanho 30 e cor vermelha. Defina o Anti-alias: Anti-alias for Readability, de modo a facilitar a leitura.

Ao objecto de texto “percentagem” no campo das propriedades/properties atribua-lhe o nome de (rodar), como se ilustra na imagem anterior.

Depois de atribuir o nome (rodar) faça F9 e digite o código AS 3.0 conforme se ilustra na imagem anterior. Faça Ctrl + Enter e teste o seu trabalho/Preloader.
Antes de fazer Download do projecto faça um utilizando o tutorial.
Recommended Posts

Galeria de Imagens – Botão anterior ”previous” e seguinte “next”
18 Setembro, 2011

Relógio Ponteiros – Flash CS4
18 Setembro, 2011

Flash – Color Picker
13 Setembro, 2011