[Tutorial] FLASH: Preloader

[redhotmustang]

Tutorial: Preloader para Flash

  1. Criar uma nova Scene, e posicioná-la em primeiro lugar na lista de Scenes.





   2. Nomear a layer 1 de "Mask". Na frame 1 - criar uma caixa STATIC TEXT, com o seguinte texto.

Código: [Seleccione]

A carregar...

   3. Criar uma nova layer 2 com o nome "Efeito" [posicioná-la por cima da Layer "Mask"].



      Na frame 1 - criar um rectângulo verde sem stroke e colocá-lo por cima do texto, anteriormente criado.

   4. Layer 1 "Mask" na frame 20 fazer F6. Bloquear e tornar invisível.



      Layer 2 "EFEITO" na frame 1 ir ao painel COLOR MIXER e criar um gradiente RADIAL, com a primeira cor VERMELHO e a segunda cor BRANCO e Alpha a 0%.



      Com a ferramenta PAINT BUCKET pintar o rectângulo com o gradiente criado anteriormente.

   5. Na Layer 2 "EFEITO" na frame 10, fazer F6; Frame 20, fazer F6.
      Na frame 10, sem nada seleccionado, usar a FILL TRANSFORM TOOL (no Flash 8 já se chama Gradient Fill Tool) para alterar zona de impacto do gradiente.



Basta arrastarem o centro do arco para os lados para a zona de impacto mudar.

   6. Layer 2 "EFEITO", na frame 1 fazer um TWEEN SHAPE.
      Na frame 10 novo TWEEN SHAPE.



   7. Aplicar Mask à layer "EFEITO". Bloquear as 2 layers.



   8. Criar uma nova layer "ACTIONS". Na frame 1 fazer F9. E colocar o seguinte código ActionScript:

Código: [Seleccione]

if (_framesloaded == _totalframes) {
      gotoAndStop ("menu",1)
      }else{
      gotoAndplay (1)
      }

   9. Criar uma nova layer "CONSOLA". Na frame 1, inserir caixa de texto do tipo DYNAMIC.
      Para duplicar esta caixa de texto fazer ALT+CLICK+ARRASTAR. Com as duas caixas seleccionadas, ir ao menu MODIFY > CONVERT TO SYMBOL > MOVIE CLIP > dar-lhe o nome "consola".
      Editar o novo movie clip (para entrar no modo de edição basta fazer duplo clique no movieclip criado, ou então abre-se a Library [CTRL+L] e duplo clique no movieclip consola).

      [Modo de edição do movie clip "consola"]
          * Na PROPERTIES da caixa 1 no campo VAR escrever "valor".



            Na PROPERTIES da caixa 2 no campo VAR escrever "percentagem".
          * Nomear a Layer 1 de "caixas".
            Criar uma nova Layer, nomeá-la como "ACTIONS". Na Frame 1 fazer F9. Inserir o seguinte código no painel das actions:

Código: [Seleccione]

  valor2 = _root.getBytesLoaded () / _root.getBytesTotal ()
            valor3 = valor2 * 100
            valor = Math.round (valor3)
          * Na Layer caixas, na frame 2 fazer F5.
            Fazer CTRL+ENTER > VIEW SIMULATE DOWNLOAD, alterar a velocidade de download para uma mais baixa para conseguir perceber se está tudo a funcionar.



          * Frame 1 da actions, fazer F9 e acrescentar o seguinte código ActionScript:
         

Código: [Seleccione]

percentagem = valor + " %"

          * Apagar a primeira caixa com a VAR: "valor".
      [/Modo de edição do movie clip "consola"]


  10. Voltar à scene "preload".



      Criar nova layer "barra".
      Na Frame 1, desenhar rectângulo com stroke. Seleccionar o limite (stroke), ir ao painel EDIT > CUT.
      Criar nova layer "limite da barra". Ir ao painel EDIT > PASTE IN PLACE.

  11. Na Layer "BARRA", seleccionar o FILL. Ir ao painel MODIFY > CONVERT TO SYMBOL > MOVIE CLIP, nomeá-lo como "barra". Escolher o 4º ponto de registo.






 No STAGE escrever "barra" no campo INSTANCE NAME.



  12. Editar movieclip "consola" Na Layer "actions", Frame 1 fazer F9. Acrescentar o seguinte código ActionScript:

Código: [Seleccione]

_root.barra._xscale = valor

Feito! Ver como ficaria em http://escape.do.sapo.pt

Glossário:
Noções de FILL e STROKE
Fill é interior de um objecto, ou melhor cor do seu interior. Por exemplo, um rectângulo amaralo com rebordo azul. O fill é amarelo e o STROKE (rebordo ou contorno) é azul.

Cumps.

[gimbras]

O preload eram fixes umas imagens dos passos.

O PHP ainda está muito incompleto, mas é mesmo para iniciados.

[redhotmustang]

Faltou dizer que ainda está em construção o do PHP.

As imagens muita falta de tempo, mesmo.

[redhotmustang]

Pronto as imagens já estão disponíveis para este tutorial.

Cumps.

[Devil]

eu n consigo!  :cry:
A barra preloader só aparece quaze no final
e a barra aparece logo xeia!

[gimbras]

Isso acontece porque tens o SWF no teu PC, ou então tens uma ligação rápida e ele faz logo o loading.

Quando testares o movie dentro do Flash (CTRL+Enter), ou Control > Test Movie tens lá um menu que diz Simulate Download aí escolhes a velocidade de um modem de 28.8kb para veres a barra a aumentar a essa velocidade. Dps volta testar de novo o filme com essa velocidade definida.

[Devil]

Isso acontece porque tens o SWF no teu PC, ou então tens uma ligação rápida e ele faz logo o loading.

Quando testares o movie dentro do Flash (CTRL+Enter), ou Control > Test Movie tens lá um menu que diz Simulate Download aí escolhes a velocidade de um modem de 28.8kb para veres a barra a aumentar a essa velocidade. Dps volta testar de novo o filme com essa velocidade definida.

Eu n sou assim tão noob!  :shock:  :wink:  :lol:

Eu pos akilo a 0.1kb e só vejo a barra toda cheia e o numero começa com o 98 ou 99!
Pk k n começa no 0?

[Grettir]

Heyas,

faz o seguinte, quando estiveres a testar o SWF, no menu "VIEW" clica em "Bandwith Profile".

Ve como esta a distribuiçao de "carga" nos frames. Se o frame 1 estiver GIGANTE, entao é esse o teu problema.

Fico a aguardar noticias.

[Devil]

Heyas,

faz o seguinte, quando estiveres a testar o SWF, no menu "VIEW" clica em "Bandwith Profile".

Ve como esta a distribuiçao de "carga" nos frames. Se o frame 1 estiver GIGANTE, entao é esse o teu problema.

Fico a aguardar noticias.

Yah a barra da carga está gigante!

[gimbras]

Isso está mal feito então Deves ter errado algum passo.

[Devil]

Isso está mal feito então Deves ter errado algum passo.

è k tive lá a ver o k tinha mal e axo k fiz td bem!
Vou tentar outra vez

[Grettir]

Tens de ver uma coisa, caso estejas a utilizar "linkages" para attachMovie ou attachSound, isso sera carregado no frame1...

Ve la o que se passa.

[gimbras]

Eu já revi o tutorial e não tem erros. Pelo menos não os encontro.

[Devil]

Boas!
Já consegui!
O problema é k n tinha editado a caixa consola no fim!  :lol:

[lmw]

talvez já conheçam mas de qq modo aqui vai um site onde se pode encontrar muitos e bons tutoriais:

http://www.flashkit.com