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)

clip_image001

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
  2. clip_image002

  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

clip_image003

  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

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s