Preloader usando componente   - Tutorial passo a passo

Autor: Hugo Dias

Recursos:

• Para fazer este tutorial, antes faça o download do arquivo .fla inicial -> preloader_inicio.fla
• Confira a versão final do .fla -> preloader.fla

Organizando o arquivo

1. Provavelmente você gostaria de ver o resultado final do exercício aqui.
2. Abra o documento preloader_inicio.fla
3. Observe a camada Actions com stop();
4. A camada layout com um layout exemplo para o “site”
5. E a camada preloader que é onde vamos colocar o pré-carregador

Instalando o componente Bytes Based Preloader

O que é um componente?
(...)Components are built on version 2 of the Macromedia Component Architecture, which allows you to easily and quickly build robust applications with a consistent appearance and behavior. This book describes how to build applications with version 2 components. The related Components Language Reference describes each component's application programming interface (API). It includes usage scenarios and procedural samples for using the Flash version 2 components, as well as descriptions of the component APIs, in alphabetical order.(...) Macromedia LiveDocs

1. Faça o download do pacote de componentes Bytes Based Preloaders
2. Execute o arquivo MX655760_BytesPreloaders.mxp
3. Automáticamente o programa Macromedia Extension Manager será aberto
4. Aceite as condições de uso e prossiga.
5. Feche o Macromedia Flash e abra novamente.
6. abra o arquivo preloader_inicio.fla
7. Acesse o painel components no menu window > components
8. Repare que além dos componentes originais do Flash 8 temos a nova categoria Bytes Based Preloaders
   

Inserindo o componente

1. Arraste o keyframe 1 das camadas layout e actions para o frame 2
2. Trave as camadas layout e actions
   
3. Vá para o keyframe 1 da camada preloader
4. Arraste uma instância do componente progress bar para o meio do palco
   
5. Pressione Ctrl + enter para testar.
6. Repare que normalmente você não consegue visualizar o pré-carregador funcionando pois está usando a velocidade da sua máquina, que é quase instantânea.
7. Para simular um download em um modem de 56Kbps, na tela de preview (Ctrl + enter) acesse o menu View > Download Settings > 56k
8. Pressione Ctrl + enter novamente e veja o carregamento simulado na conexão de 56k.
   

Configurando o pré-carregador

1. Selecione o compomente no palco e modifique suas características na barra de propriedades, na aba parameters.
   

Resumão

1. Em 2 frames você configura o pré-carregador no primeiro e o site no segundo.
2. Configura a aparência do componente a partir dos ptros (não funciona transformação - aumentar, diminuir... pela ferramenta free transform).
3. Clica em Ctrl + enter 2x para testar em banda simulada
4. Você tem no total 4 tipos de preloaders no pacote, barra de progressso, regresso, círculo de progresso e contagem regressiva.
5. * Se quiser se aventurar pelo action script pode alterar a palavra LOADED para CARREGADO, clicando com botão da direita no componente no palco e depois em EDIT. Procure pela constante LOADED no primeiro keyframe da camada actions.

Conclusão

Espero que tenham aparoveitado. Dúvidas, sugestões e críticas -> escrevam para hugodias@meetweb.com.br