Pré-carregando um filme em Flash

[Teodorico 0]

Como muitas pessoas perguntam como fazer um PreLoader, aqui vai um passo a passo:

 

1. Crie uma camada e chame-a de content;

 

2. Crie um keyframe vazio (F7) no uadro 10 da camada de conteúdo. Arraste uma instância de um símbolo gráfico previamente criado (por exemplo uma foto bem pesada que você transformou em símbolo e colocou na library, ela servirá como teste de carregamento). Centralize a instância no Stage. Selecione o quadro 20 da camada de conteúdo e pressione a tecla F5 para estender a camada desse quadro.

 

3. Crie uma nova camada e a renomeie como labels. Posicione essa camada na parte superior da pilha de camadas.

 

4. Adicione um keyframe ao quadro 2 da camada labels. No inspetor Porperty, atribua um rótulo preload para esse quadro.

 

5. Adicione um keyframe ao quadro 10 da camada de rótulos e denomine esse quadro como main no inspetor Property.

 

6. Crie uma nova camada e chame-a de loader. Coloque essa camada embaixo da camada de rótulos.

 

7. Com o quadro 1 da camada do utilitário de carga destacado, selecione a ferramenta Rectangle. Certifique-se de que você tem uma cor de traço e de preenchimento especificada na Caixa de Ferramentas. Desenhe um retângulo no Stage. No inspetor Property, dimensione o traço e o preenchimento do retângulo para 300 x 10. Esse retângulo será a barra de progresso que expandirá à medida que os bytes do filme forem carregados no Flash Player.

 

8. Com o traço e o preenchimento do retângulo selecionados, pressione a tecla F8. Na caixa de diálogo Convert to Symbol, escolha o comportamento Movie Clip. Nomeie o símbolo como loader e clique no centro esquerdo do ponto de registro (aquele quadradinho preto em Registration). Clique em OK.

 

9. Com a nova instância selecionada no Stage da Linha de tempo principal, nomeie a instância loader no inspetor Property.

 

10. Dê um clique duplo na instância loader no Stage. No modo Symbol Editing, renomeie a camada 1 do símbolo do utilitário de carga como bar. Crie outra camada e nomeie como frame. Certifique-se de que a camada de quadro esteja acima da camada Bar.

 

11. Selecione o traço do retângulo e recorte (Ctrl + X). Selecione o quadro 1 da camada de quadro e cole o traço no lugar (Edit > Paste in Place, ou Ctrl + Shift + V).

 

12. Na camada Bar, selecione o preenchimento do retângulo. Transforme esse preenchimento em um símbolo de clipe de filme denominado bar. Novamente, na caixa de diálogo Convert to Symbol, escolha o centro esquerdo do ponto de registro.

 

13. Com a nova instância selecionada no Stage do símbolo de utilitário de carga, nomeie a instância como bar no inspetor Property. No painel Transform, dimensione a largura da instância para 1 %. Quando o filme inicia o carregamento pela primeira vez, você não deseja que a instância bar seja dimensionada para o tamanho total (100%) - uma vez que os bytes do filme são carregados no Flash Player, o _xscale da instância bar aumentará. (Inseriremos o código para fazer isso mais tarde.)

 

14. Crie outra camada e a nomeie como textfield. Posicione essa camada na parte inferior da pilha de camadas.

 

15. Selecione a ferramenta Text e crie um campo de texto dinâmico no quadro 1 da camada de texto. Posicione o campo de texto embaixo da instância bar. No campo <Instance Name> do inspetor Property, denomine o campo de texto como percent. Você utilizará esse cmapo de texto para exibir a porcentagem atual do filme de Flash carregado. Você não precisa ativar Show Border (ou outras opções) para esse campo de texto.

 

16. Volte à Linha de tempo principal (isto é, Scene 1). Selecione o quadro 4 da camada do utilitário de carga e insira um keyframe vazio (F7). Você precisa que a instância do utilitário de carga apenas apareça enquanto o filme estiver pré-carregando.

 

17. Crie uma nova camada e a nomeie actions. Posicione essa cmada embaixo da camada de rótulos.

 

18. Selecione o quadro 3 da camada ações e insira um keyframe vazio (F7). Com esse quadro selecionado, abra o painel Action. No modo Expert, insira o seguinte código. Cada linha de código é explicada nos comentários dentro do código.

 

// lBytes armazena os bytes atuais que foram carregados

 

lBytes = _root.getBytesLoaded();

 

// tBytes armazena o total de bytes do filme

 

tBytes = _root.getBytesTotal();

 

// percentLoaded calcula o percentual do filme que

// foi carregado no Flash Player.

 

percentLoaded = Math.floor((lBytes/tBytes)*100);

 

// Aplica o valor de percentLoaded para a escala X da

// instância bar dentro da instância do utilitário de carga

 

loader.bar._xscale = percentLoaded;

 

// Preenche o campo de texto da porcentagem dentro da instância do utilitário de carga

// com o valor de percentLoaded seguido pelo texto

// "% de" e o total de kilobytes do filme. Por

// exemplo, quando metade de um filme de 64 K foi carregado, o campo de texto

// exibirá "50% de 64K carregados".

 

loader. percent.text = percentLoaded + "% de " + Math.floor(tBytes/1024) +  "K carregados.";

 

// Se o número de bytes carregados for maior ou igual ao

// total de bytes do filme e o total de bytes for

// maior que 0

 

if (lBytes >= tBytes && tBytes>0){

 

// Verifica se a variável count é maior que

// ou igual a 12. Se for, executa o código aninhado.

// Esse código if/else pausa o filme uma vez que 100% do

// filme foi carregado no Flash Player.

 

if (count >= 12){

 

// sai da seqüência de carregamento

// Obs.: a comparação com o 12 é por causa

// dos 12 frames por segundo!

 

gotoAndStop("main");

 

// caso contrário, se o filme foi completamente carregado e

// a contagem for menor que 12.

 

} else {

 

// adiciona 1 para a variável de contagem

 

count++;

 

// continua a fazer o loop na seqüência de carregamento

 

gotoAndPlay("preload");

 

}

 

// se o filme não terminou de carregar no Flash

// Player então execute esse código

 

} else {

 

// faz um loop de volta ao rótulo do quadro "preload"

 

gotoAndPlay("preload");

}

19. Salve o documento Flash como preloader.fla, por exemplo e teste-o (Ctrl + Enter). Quando inserir o modo Test Movie, escolha View > Show Streaming ou pressione Ctrl + Enter novamente. Você verá o progresso do download do filme refletido na propriedade xscale da instância bar, bem como um vlaor percentual da atualização e o tamanho total do arquivo no campo percent. Quando o filme estiver completamente carregado, o utilitário de carga pausará por cerca de um segundo e irá para o rótulo main.

 

Fonte: Flash MX - A Bíblia, Reinhardt & Dowd, Ed. Campus

 

Espero que este tutorial seja útil.

 

;)

[Erika Tavares 0]

Super 10!!!!Ficou show de bola a explicação!!Parabéns!![]'sÉrika Tavares. :lol: :lol: :lol: :lol:

[usinformatica 0]

Legal mesmo !!!Sempre apanhei para fazer preloaders ... agora acho que vai... heheheheValeu,Um abraço,Alexandre

[fernandocamilo 0]

Como muitas pessoas perguntam como fazer um PreLoader, aqui vai um passo a passo:

 

1. Crie uma camada e chame-a de content;

 

2. Crie um keyframe vazio (F7) no uadro 10 da camada de conteúdo. Arraste uma instância de um símbolo gráfico previamente criado (por exemplo uma foto bem pesada que você transformou em símbolo e colocou na library, ela servirá como teste de carregamento). Centralize a instância no Stage. Selecione o quadro 20 da camada de conteúdo e pressione a tecla F5 para estender a camada desse quadro.

 

3. Crie uma nova camada e a renomeie como labels. Posicione essa camada na parte superior da pilha de camadas.

 

4. Adicione um keyframe ao quadro 2 da camada labels. No inspetor Porperty, atribua um rótulo preload para esse quadro.

 

5. Adicione um keyframe ao quadro 10 da camada de rótulos e denomine esse quadro como main no inspetor Property.

 

6. Crie uma nova camada e chame-a de loader. Coloque essa camada embaixo da camada de rótulos.

 

7. Com o quadro 1 da camada do utilitário de carga destacado, selecione a ferramenta Rectangle. Certifique-se de que você tem uma cor de traço e de preenchimento especificada na Caixa de Ferramentas. Desenhe um retângulo no Stage. No inspetor Property, dimensione o traço e o preenchimento do retângulo para 300 x 10. Esse retângulo será a barra de progresso que expandirá à medida que os bytes do filme forem carregados no Flash Player.

 

8. Com o traço e o preenchimento do retângulo selecionados, pressione a tecla F8. Na caixa de diálogo Convert to Symbol, escolha o comportamento Movie Clip. Nomeie o símbolo como loader e clique no centro esquerdo do ponto de registro (aquele quadradinho preto em Registration). Clique em OK.

 

9. Com a nova instância selecionada no Stage da Linha de tempo principal, nomeie a instância loader no inspetor Property.

 

10. Dê um clique duplo na instância loader no Stage. No modo Symbol Editing, renomeie a camada 1 do símbolo do utilitário de carga como bar. Crie outra camada e nomeie como frame. Certifique-se de que a camada de quadro esteja acima da camada Bar.

 

11. Selecione o traço do retângulo e recorte (Ctrl + X). Selecione o quadro 1 da camada de quadro e cole o traço no lugar (Edit > Paste in Place, ou Ctrl + Shift + V).

 

12. Na camada Bar, selecione o preenchimento do retângulo. Transforme esse preenchimento em um símbolo de clipe de filme denominado bar. Novamente, na caixa de diálogo Convert to Symbol, escolha o centro esquerdo do ponto de registro.

 

13. Com a nova instância selecionada no Stage do símbolo de utilitário de carga, nomeie a instância como bar no inspetor Property. No painel Transform, dimensione a largura da instância para 1 %. Quando o filme inicia o carregamento pela primeira vez, você não deseja que a instância bar seja dimensionada para o tamanho total (100%) - uma vez que os bytes do filme são carregados no Flash Player, o _xscale da instância bar aumentará. (Inseriremos o código para fazer isso mais tarde.)

 

14. Crie outra camada e a nomeie como textfield. Posicione essa camada na parte inferior da pilha de camadas.

 

15. Selecione a ferramenta Text e crie um campo de texto dinâmico no quadro 1 da camada de texto. Posicione o campo de texto embaixo da instância bar. No campo <Instance Name> do inspetor Property, denomine o campo de texto como percent. Você utilizará esse cmapo de texto para exibir a porcentagem atual do filme de Flash carregado. Você não precisa ativar Show Border (ou outras opções) para esse campo de texto.

 

16. Volte à Linha de tempo principal (isto é, Scene 1). Selecione o quadro 4 da camada do utilitário de carga e insira um keyframe vazio (F7). Você precisa que a instância do utilitário de carga apenas apareça enquanto o filme estiver pré-carregando.

 

17. Crie uma nova camada e a nomeie actions. Posicione essa cmada embaixo da camada de rótulos.

 

18. Selecione o quadro 3 da camada ações e insira um keyframe vazio (F7). Com esse quadro selecionado, abra o painel Action. No modo Expert, insira o seguinte código. Cada linha de código é explicada nos comentários dentro do código.

 

 

// lBytes armazena os bytes atuais que foram carregados

 

lBytes = _root.getBytesLoaded();

 

// tBytes armazena o total de bytes do filme

 

tBytes = _root.getBytesTotal();

 

// percentLoaded calcula o percentual do filme que

// foi carregado no Flash Player.

 

percentLoaded = Math.floor((lBytes/tBytes)*100);

 

// Aplica o valor de percentLoaded para a escala X da

// instância bar dentro da instância do utilitário de carga

 

loader.bar._xscale = percentLoaded;

 

// Preenche o campo de texto da porcentagem dentro da instância do utilitário de carga

// com o valor de percentLoaded seguido pelo texto

// "% de" e o total de kilobytes do filme. Por

// exemplo, quando metade de um filme de 64 K foi carregado, o campo de texto

// exibirá "50% de 64K carregados".

 

loader. percent.text = percentLoaded + "% de " + Math.floor(tBytes/1024) +  "K carregados.";

 

// Se o número de bytes carregados for maior ou igual ao

// total de bytes do filme e o total de bytes for

// maior que 0

 

if (lBytes >= tBytes && tBytes>0){

 

// Verifica se a variável count é maior que

// ou igual a 12. Se for, executa o código aninhado.

// Esse código if/else pausa o filme uma vez que 100% do

// filme foi carregado no Flash Player.

 

if (count >= 12){

 

// sai da seqüência de carregamento

// Obs.: a comparação com o 12 é por causa

// dos 12 frames por segundo!

 

gotoAndStop("main");

 

// caso contrário, se o filme foi completamente carregado e

// a contagem for menor que 12.

 

} else {

 

// adiciona 1 para a variável de contagem

 

count++;

 

// continua a fazer o loop na seqüência de carregamento

 

gotoAndPlay("preload");

 

}

 

// se o filme não terminou de carregar no Flash

// Player então execute esse código

 

} else {

 

// faz um loop de volta ao rótulo do quadro "preload"

 

gotoAndPlay("preload");

}

19. Salve o documento Flash como preloader.fla, por exemplo e teste-o (Ctrl + Enter). Quando inserir o modo Test Movie, escolha View > Show Streaming ou pressione Ctrl + Enter novamente. Você verá o progresso do download do filme refletido na propriedade xscale da instância bar, bem como um vlaor percentual da atualização e o tamanho total do arquivo no campo percent. Quando o filme estiver completamente carregado, o utilitário de carga pausará por cerca de um segundo e irá para o rótulo main.

 

Fonte: Flash MX - A Bíblia, Reinhardt & Dowd, Ed. Campus

 

Espero que este tutorial seja útil.

 

;)

apenas uma duvida sou iniciante o que significa ( utilitário de carga ) que voce menciona no manual passo-a-passo

[fernandocamilo 0]

e camada de rótulos o que significa amigos.não estou conseguindo fazer este preloader, por causa que eu não sei o que significa ( camada de rótulos e nem camada do ultilitario de carga me dê uma mãozinha galéra desing

[RashDesign 0]

Como muitas pessoas perguntam como fazer um PreLoader, aqui vai um passo a passo:

 

1. Crie uma camada e chame-a de content;

 

2. Crie um keyframe vazio (F7) no uadro 10 da camada de conteúdo. Arraste uma instância de um símbolo gráfico previamente criado (por exemplo uma foto bem pesada que você transformou em símbolo e colocou na library, ela servirá como teste de carregamento). Centralize a instância no Stage. Selecione o quadro 20 da camada de conteúdo e pressione a tecla F5 para estender a camada desse quadro.

 

3. Crie uma nova camada e a renomeie como labels. Posicione essa camada na parte superior da pilha de camadas.

 

4. Adicione um keyframe ao quadro 2 da camada labels. No inspetor Porperty, atribua um rótulo preload para esse quadro.

 

5. Adicione um keyframe ao quadro 10 da camada de rótulos e denomine esse quadro como main no inspetor Property.

 

6. Crie uma nova camada e chame-a de loader. Coloque essa camada embaixo da camada de rótulos.

 

7. Com o quadro 1 da camada do utilitário de carga destacado, selecione a ferramenta Rectangle. Certifique-se de que você tem uma cor de traço e de preenchimento especificada na Caixa de Ferramentas. Desenhe um retângulo no Stage. No inspetor Property, dimensione o traço e o preenchimento do retângulo para 300 x 10. Esse retângulo será a barra de progresso que expandirá à medida que os bytes do filme forem carregados no Flash Player.

 

8. Com o traço e o preenchimento do retângulo selecionados, pressione a tecla F8. Na caixa de diálogo Convert to Symbol, escolha o comportamento Movie Clip. Nomeie o símbolo como loader e clique no centro esquerdo do ponto de registro (aquele quadradinho preto em Registration). Clique em OK.

 

9. Com a nova instância selecionada no Stage da Linha de tempo principal, nomeie a instância loader no inspetor Property.

 

10. Dê um clique duplo na instância loader no Stage. No modo Symbol Editing, renomeie a camada 1 do símbolo do utilitário de carga como bar. Crie outra camada e nomeie como frame. Certifique-se de que a camada de quadro esteja acima da camada Bar.

 

11. Selecione o traço do retângulo e recorte (Ctrl + X). Selecione o quadro 1 da camada de quadro e cole o traço no lugar (Edit > Paste in Place, ou Ctrl + Shift + V).

 

12. Na camada Bar, selecione o preenchimento do retângulo. Transforme esse preenchimento em um símbolo de clipe de filme denominado bar. Novamente, na caixa de diálogo Convert to Symbol, escolha o centro esquerdo do ponto de registro.

 

13. Com a nova instância selecionada no Stage do símbolo de utilitário de carga, nomeie a instância como bar no inspetor Property. No painel Transform, dimensione a largura da instância para 1 %. Quando o filme inicia o carregamento pela primeira vez, você não deseja que a instância bar seja dimensionada para o tamanho total (100%) - uma vez que os bytes do filme são carregados no Flash Player, o _xscale da instância bar aumentará. (Inseriremos o código para fazer isso mais tarde.)

 

14. Crie outra camada e a nomeie como textfield. Posicione essa camada na parte inferior da pilha de camadas.

 

15. Selecione a ferramenta Text e crie um campo de texto dinâmico no quadro 1 da camada de texto. Posicione o campo de texto embaixo da instância bar. No campo <Instance Name> do inspetor Property, denomine o campo de texto como percent. Você utilizará esse cmapo de texto para exibir a porcentagem atual do filme de Flash carregado. Você não precisa ativar Show Border (ou outras opções) para esse campo de texto.

 

16. Volte à Linha de tempo principal (isto é, Scene 1). Selecione o quadro 4 da camada do utilitário de carga e insira um keyframe vazio (F7). Você precisa que a instância do utilitário de carga apenas apareça enquanto o filme estiver pré-carregando.

 

17. Crie uma nova camada e a nomeie actions. Posicione essa cmada embaixo da camada de rótulos.

 

18. Selecione o quadro 3 da camada ações e insira um keyframe vazio (F7). Com esse quadro selecionado, abra o painel Action. No modo Expert, insira o seguinte código. Cada linha de código é explicada nos comentários dentro do código.

 

 

// lBytes armazena os bytes atuais que foram carregados

 

lBytes = _root.getBytesLoaded();

 

// tBytes armazena o total de bytes do filme

 

tBytes = _root.getBytesTotal();

 

// percentLoaded calcula o percentual do filme que

// foi carregado no Flash Player.

 

percentLoaded = Math.floor((lBytes/tBytes)*100);

 

// Aplica o valor de percentLoaded para a escala X da

// instância bar dentro da instância do utilitário de carga

 

loader.bar._xscale = percentLoaded;

 

// Preenche o campo de texto da porcentagem dentro da instância do utilitário de carga

// com o valor de percentLoaded seguido pelo texto

// "% de" e o total de kilobytes do filme. Por

// exemplo, quando metade de um filme de 64 K foi carregado, o campo de texto

// exibirá "50% de 64K carregados".

 

loader. percent.text = percentLoaded + "% de " + Math.floor(tBytes/1024) +  "K carregados.";

 

// Se o número de bytes carregados for maior ou igual ao

// total de bytes do filme e o total de bytes for

// maior que 0

 

if (lBytes >= tBytes && tBytes>0){

 

// Verifica se a variável count é maior que

// ou igual a 12. Se for, executa o código aninhado.

// Esse código if/else pausa o filme uma vez que 100% do

// filme foi carregado no Flash Player.

 

if (count >= 12){

 

// sai da seqüência de carregamento

// Obs.: a comparação com o 12 é por causa

// dos 12 frames por segundo!

 

gotoAndStop("main");

 

// caso contrário, se o filme foi completamente carregado e

// a contagem for menor que 12.

 

} else {

 

// adiciona 1 para a variável de contagem

 

count++;

 

// continua a fazer o loop na seqüência de carregamento

 

gotoAndPlay("preload");

 

}

 

// se o filme não terminou de carregar no Flash

// Player então execute esse código

 

} else {

 

// faz um loop de volta ao rótulo do quadro "preload"

 

gotoAndPlay("preload");

}

19. Salve o documento Flash como preloader.fla, por exemplo e teste-o (Ctrl + Enter). Quando inserir o modo Test Movie, escolha View > Show Streaming ou pressione Ctrl + Enter novamente. Você verá o progresso do download do filme refletido na propriedade xscale da instância bar, bem como um vlaor percentual da atualização e o tamanho total do arquivo no campo percent. Quando o filme estiver completamente carregado, o utilitário de carga pausará por cerca de um segundo e irá para o rótulo main.

 

Fonte: Flash MX - A Bíblia, Reinhardt & Dowd, Ed. Campus

 

Espero que este tutorial seja útil.

 

;)

pré carregando é quando aparece :

carregando... ou ainda loading...?

desculpe a igonracia mais so mei novo em flash

[skyxer 0]

Perfect! Funcionou perfeitamente aqui. D+ mesmo cara!Valew, ajudará muito!

[Existence 0]

show de bola, cara que preloader mais fino caramuito bom mesmo.

[matsubara 0]

S.O.SEu fiz todos os passos umas 4 vezes e em todas as vezes a porcentagem aparece certinho contudo a barra de loader nao avança ate o final, pra falar a verdade nem sai do lugar fica no 1% alguem poderia me dizer pq?Obrigado Matsubara

[Comucation 0]

que tal um preloader por extenso? =] fiz esses dias à pedido de um post aqui na imasters!

 

típo: um porcento, dez porcento, cinquenta e sete porcento.. etc

 

ai vai o código:

 

stop();total = getBytesTotal();this.createTextField("campoText", this.getNextHighestDepth(), 10, 10, 200, 22);numeros = ["zero", "um", "dois", "três", "quatro", "cinco", "seis", "sete", "oito", "nove", "dez", "onze", "doze", "treze", "quatorze", "quinze", "dezesseis", "dezessete", "dezoito", "dezenove"]numeros2 = ["vinte", "trinta", "quarenta", "cinquenta", "sessenta", "setenta", "oitenta", "noventa"]this.onEnterFrame = function() {	loaded = getBytesLoaded();	pct = Math.floor((loaded/total)*100);	if (pct<20) {		campoText.text = numeros[pct] + " porcento";	} else {		digito1 = Math.floor(pct/10);		digito2 = pct-(digito1*10);		if (digito2 != 0) {			campoText.text = numeros2[digito1-2] + " e " + numeros[digito2] + " porcento";		} else {			campoText.text = numeros2[digito1-2] + " porcento";		}	}	if (pct == 100) {		play();		delete this.onEnterFrame;		campoText.removeTextField();	}}

made by me

 

só não está personalizado neh.. tá secão.. fica ai pra vcs personalizarem como acharem melhor!

num posso explicar o código agora pq to trabalhando (funçando na imasters ilegamente hehehehehe)

abraço espero q gostem! ^^

 

para verem funcionar eh simples, faz 2 frames no .fla, no segundo coloca algo pesado pra carregar, no primeiro dah ctrl+c ctrl+v nesse código.

pronto xD

[naadler 0]

4. Adicione um keyframe ao quadro 2 da camada labels. No inspetor Porperty, atribua um rótulo preload para esse quadro.

Inspetor Porperty? onde fica isso?

[Eder Fortunato 15]

4. Adicione um keyframe ao quadro 2 da camada labels. No inspetor Porperty, atribua um rótulo preload para esse quadro.

Inspetor Porperty? onde fica isso?

 

aperte ALT + F7, que esse painel ira se abrir

[naadler 0]

7. Com o quadro 1 da camada do utilitário de carga destacado...

desculpem minha ignorância, mas não entendi!

Camada do utilitário de carga destacado? Qual é esta camada? qual é este utilitário?

 

 

Valeu!!!

[Teodorico 0]

Olá,

 

É a camada (layer) chamada Loader.

 

Abraço.

[naadler 0]

este carregamento serve para o flash 8?

 

valeu

[Eder Fortunato 15]

este carregamento serve para o flash 8?

 

valeu

 

até serve, mas no flash 8 existe a classe MovieClipLoader, é recomendável você usa-la

 

 

dá uma lida AQUI e AQUI

[naadler 0]

eu não entendo os codigos é só copiar e colar?

[Teodorico 0]

É só seguir o passo a passo...

[naadler 0]

passo a passo?

o que eu faço para entender isso, veio?

[Teodorico 0]

Olá, naadler

 

Talvez ler um livro básico sobre Flash ou alguma apostila pode ajudar, há diversas pela internet. Procure no Google que encontrará muito material básico.]

 

Outra alternativa é você situar onde está sua dúvida no Passo a Passo. Se as dúvidas forem globais, então somente minha primeira sugestão será viável...