Um “Preloader” mais elaborado

1. Abra um novo documento do Flash e nomeie a primeira layer como loading bar

1. Desenhe um retângulo, sem bordas, de 150×5 pixel e centralize-o no palco (Ctrl+K)

1. Selecione-o e transforme-o em MovieClip. Observe que em “Registration” você deverá clicar no segundo quadradinho da esquerda, isso fará com que o movimento da barra seja crescente da esquerda para a direita

1. Instancie seu MC como “loadingBar”

1. “Lock” essa layer (coloque o cadeado nela), crie uma nova e nomeie como “bytes info”

1. Com a ferramenta Texto criaremos um texto dinâmico em baixo da barra com as especificações abaixo (o X e Y depende…rsss)

1. Texto dinâmico

2. “_sans” significa que um visitante entrar em seu site, o computador dele selecionará automaticamente as fontes “sans” de fábrica, Arial para Windows, Helvética para Mac

3. Selecione o alinhamento central para o texto

4. Provavelmente seu Flash já virá com Use device fonts marcado e sem chance de mexer

5. Deixe a seleção de texto (Selectable Text) em off

1. Dê o nome a instância de “bytesDisplay”

1. Crie uma nova layer, “lock Others” (botão direito do mouse sobre a layer que não será bloqueada) e nomeie como “Arrow indicator”

1. Desenhe um triângulo
   1. Desenhe um quadrado com a ferramenta retângulo selecionada apertando o Shift,
   2. Gire-o com a ferramenta Free Transform em 45º
   3. Crie uma linha de uma ponta à outra (observe se a opção snap to objects está selecionada, se na estiver, selecione)
   4. Selecione a parte de cima do triângulo e delete, faça o mesmo com a linha criada
   5. Faça o quadrado em uma proporção maior do que aquela que será usada e após feito o triângulo diminua-o de acordo com o tamanho necessário

1. Transforme o triângulo em MC e dê o nome de “moving percentage Field”

1. Dê um duplo clique no MC e nomeie a layer para “Arrow” (seta) — isso dentro do MC, certo?

1. Alinhe-a como na figura abaixo

1. “Lock” (lembra… o cadeado…) essa layer, e crie uma acima dela com o nome de “Text Field” (Campo do texto), selecione a ferramenta texto e desenhe um pequeno campo de texto acima da seta e instancie como “percentDisplay”

1. Volte à cena principal e faça os ajustes necessários como na figura abaixo

1. Instancie como “percentClip”, “Lock” essa layer

1. Crie uma nova layer acima de todas e nomeie como “content” (conteúdo), no frame 5 dessa layer insira um quadro chave (Keyframe) onde haverá o conteúdo a ser carregado, nesse caso uma foto. Carregue a foto nesse quadro. “Lock” essa layer e adicione mais uma com o nome de “Actions”
   1. Lembre-se que em um projeto real de website, você poderá ter quantos frames forem necessários até o carregamento do site, 5 é o mínimo para o carregamento, e lembre-se também que no primeiro frame sempre haverá os arquivos do “preloader”.

1. Clique no primeiro frame da Actions e dê F9 para abrir o painel das Actions, digite o seguinte código

stop();
loadingBar._xscale = 1;
var loadingCall:Number = setInterval(preloadSite, 50);
function preloadSite():Void {
var siteLoaded:Number = _root.getBytesLoaded();
var siteTotal:Number = _root.getBytesTotal();
var percentage:Number = Math.round(siteLoaded/siteTotal*100);
loadingBar._xscale = percentage;
percentClip.percentDisplay.text = percentage + “%”;
percentClip._x = loadingBar._x + loadingBar._width;
bytesDisplay.text = “loaded ” + siteLoaded + ” of ” + siteTotal + ” bytes”;
if (siteLoaded >= siteTotal) {
clearInterval(loadingCall);
gotoAndStop(5);
}
}

1. Ok, o próximo passo é testar, Crtl+Enter, ops, mais uma vez, Ctrl+Enter…

Abs

FC

OBS: Fragmentos do original “Making a complete internal preloader in Flash 8” encontrado no site www.lukamaras.com