RICARDO TAKAHASHI (180 pts)

STICKMAN (155 pts)

DAUTON JANOTA (255 pts)

MANGOOST (80 pts)

PEDRO CLAUDIO (50 pts)

DEN IVANOV (260 pts)

RICARDO TEIXEIRA (40 pts)

DEMIS BUCCI (50 pts)

RÔMULO NUNES (32 pts)

IRAPUAN MARTINEZ (45 pts)

SÁVIO PONTE (39 pts)

NETO LEAL (116 pts)
Treinamento PontoFlash de Flash e ActionScript

Como faço para dar um fade-out em um determinado momento de um som no Flash?

Classe preloader para carregar mais de um SWF?

É possível carregar um filme (loadmovie) numa cena determinada?

Como eu faço para alterar nome do .exe na barra de títulos e o ícone também?

Gostaria de saber como faço para um certo objeto seguir o mouse, mas não por toda a cena.

Método playBackwards para retroceder um movieclip.

Exemplo de digitação de texto, com simulação de backspace.

Como abrir uma janela pop-up tamanho fullscreen?

Como faço para importar uma variável e usa-la numa ação do Flash?

Um exemplo de um campo de texto formatado dinamicamente no Flash MX.

Quero calcular dinamicamente o valor de uma compra checando o preço e a quantidade comprada.

Função de um movie clip.

Como substituir uma letra de uma string?

Como setar o foco usando o setFocus e o onSetFocus e o onKillFocus?
A história do Flash.

Create TextField.

Objeto XML - importando para o Flash

Flash MX 2004 Updater

Formulário simples.

Pre-carregador (Preloader)

Pre-loader simples.

Limitar por IP? Porque não utilizar o Shared Object do Flash?

Aplicativo Dirigido por Dados com XML

Detecção do FlashPlayer.

Colisão (hitTest)

Variáveis do servidor ASP em ambiente flash
Abrir popup

Barra de navegação

Gravar dados

Cyber efect

To Upper Case

Quebra Cabeças

Velocidade

Arion 3

Relógioanalógico

Drag txt

Liga e desliga MX

Menu orbita
HOME | TUTORIAIS
Entendendo como funciona um preloader - Segunda parte
por Ricardo Takahashi

1 / 2 / 3

 

Bytes (conversão de unidades)
Vamos agora mostrar como converter os bytes para Kbytes, Mbytes ou deixar simplesmente bytes.

    Vamos utilizar a mesma base de preloader que haviamos utilizados antes. Faremos apenas algumas mudanças, como será vista abaixo.

onClipEvent (load) {
   total = _parent.getBytesTotal();
   _parent.stop();
   size = length(total);
   if (size>3 && size<=6) {
      unit = "Kbytes";
      divBy = Math.pow(10, 3);
   } else if (size>6) {
      unit = "Mbytes";
      divBy = Math.pow(10, 6);
   } else {
      unit = "bytes";
      divBy = Math.pow(10, 0);
   }

}

onClipEvent (enterFrame) {
   loaded = _parent.getBytesLoaded();
   pct = Math.floor((loaded/total)*100);
   status = "("+pct+"%) "+Math.floor(loaded/divBy)+unit+" de "+Math.floor(total/divBy)+unit;
     if (pct == 100) {
      _parent.play();
   }
}

 

 As partes destacadas em vermelho indicam onde foram feitas algumas alterações. Mas para que fique mais claro, vamos explicar o que foi feito.

size

Retorna o tamanho da variável total. Por exemplo, se o valor de total fosse 56980, o lenght dele seria 5.
if

Verifica o valor de size. Se o valor ficar entre 4 e 6 determina a unidade como sendo Kbytes e divide por 1000.

    1000 => lenght = 4
  10000 => lenght = 5
100000 => lenght = 6

K = kilo = 1000

else if

Caso o valor de size seja maior que 6, determina a unidade como sendo Mbytes e divide por 1000000.

1000000 => lenght = 7
10000000 => lenght = 8
...

M = mega = 1000000
Obs.: Dificilmente você terá algo maior que 1 Mbyte. Em se tratando de web, é preciso considerar que muitos ainda possuem uma conexão lenta (56 Kbps).

else Caso o valor de bytes não se encaixe em nenhum dos dois casos anteriores, determina a unidade como sendo bytes e divide por 1.
status Caixa de texto que vai exibir o valor. Repare que no exemplo o comando esta separado em duas linhas.
Math.pow Math.pow(x,y) é uma função matemática de potência. Ele eleva o número x à potência y.


Clique aqui e faça o download do terceiro exemplo.

Taxa de recepção (Bytes por segundo)

Talvez a parte mais complicada do nosso tutorial seja essa.

    O cálculo de bytes por segundos é feito com base nos bytes recebidos dividido pelo tempo (segundos) decorrido. Para tal, devemos iniciar uma variável com o valor inicial de tempo.
    A função que retorna o tempo no flash é o getTimer(). Porém, ele retorna o valor em milisegundos decorridos a partir do inicio da execução do filme. Para convertê-lo em segundos, basta dividi-lo por 1000. O próximo passo agora é calcular o tempo decorrido.

    O cálculo do tempo decorrido é feito subtraindo-se o tempo atual (getTimer()/1000) do tempo inicial. Em seguida, é feito o cálculo de bytes por segundos.

    Veja na ilustração o código.

 

onClipEvent (load) {
   total = _parent.getBytesTotal();
   _parent.stop();
   ini_time = getTimer()/1000;
}

onClipEvent (enterFrame) {
   loaded = _parent.getBytesLoaded();
   pct = Math.floor((loaded/total)*100);
   status = "("+pct+"%)";
   cur_time = (getTimer()/1000)-ini_time;
   bps = (loaded/cur_time)/1000;
   bps = substring(bps, 1, 4)+" Kbps";
   if (pct == 100) {
      _parent.play();
   }
}

Repare as linhas em destaque.
    No onClipEvent(load) nós iniciamos uma variável com o valor de getTimer() - "ini_timer". Esse valor é então dividido por 1000 para nós obtemos os segundos. Esse tempo é relativo ao inicial de exibição do filme.

    No onClipEvent(enterFrame) nós temos a segunda variável de tempo, com o total de segundos decorridos - "cur_timer".
    O cálculo de bytes por segundos é feito na linha 12.

    bps = (loaded/cur_time)/1000;

    Isso resulta em uma taxa de recepção de "x" Kbytes por segundos. Porém na linha abaixo, nós tratamos essa variável para que seja exibida somente 4 dígitos mais o texto " Kbps".


Clique aqui e faça o download desse exemplo.

Tempo restante

Nós já vimos como calcular a taxa de recepção de bytes, então agora nós vamos ver como calcular o tempo restante.

    Para calcular o tempo restante, nós vamos utilizar o valor de bps (retornados no exemplo anterior) e o total de bytes restantes.
    O total de bytes restantes não foi mencionado neste tutorial por se tratar de algo complemente simples. Basta saber um pouco de matemática para fazê-lo.

    Vamos analisar o código:

 

onClipEvent (load) {
   total = _parent.getBytesTotal();
   _parent.stop();
   ini_time = getTimer()/1000;
}

onClipEvent (enterFrame) {
   loaded = _parent.getBytesLoaded();
   pct = Math.floor((loaded/total)*100);
   status = "("+pct+"%)";
   cur_time = (getTimer()/1000)-ini_time;
   bps = loaded/cur_time;
   bytesLeft = total-loaded;
   timeLeft = Math.round(bytesLeft/bps);
   minutes = Math.floor(timeLeft/60);
   seconds = timeLeft-parseInt(minutes*60);
   if (minutes<10) {
      minutes = "0"+minutes;
   }
   if (seconds<10) {
      seconds = "0"+seconds;
   }
   timeLeft = minutes+":"+seconds;

   bps = substring(bps/1000, 1, 4)+" Kbps";
   if (pct == 100) {
      _parent.play();
   }
}

Em relação ao exemplo anterior, nós temos uma pequena diferença no cálculo de bps. Se você voltar um pouco a página verá que naquele exemplo, eu dividi o valor por 1000, enquanto que neste exemplo, eu só o faço no final do código. Isso porque o valor de bps será utilizado no cálculo de tempo restante e caso o valor tenha sido dividido, vai ser preciso multiplica-lo na outra linha.

    Na linha 13 nós temos a subtração de total menos loaded. Dessa subtração nos resultará o total de bytes restantes (bytesLeft).
    Na linha 14 nós calculamos o tempo restante. A função Math.round() utilizada aqui, retorna um valor inteiro arredondado para mais (.5 ~ .9) ou para menos (.0 ~ .4).

    A lógica aqui é simples. Basta se lembrar das aulas de física... Se um carro vai da cidade A para a cidade B em uma velocidade de 100 km/h, e a distância entre as cidades é de 350 km, qual o tempo estimado da viagem?

Velocidade(Km/h) / Distância (Km)
Tempo (horas)
100
1
350
x

100x = 350 <=> x = 350/100 <=> x = 3,5 horas

    Vamos aplicar agora isso no nosso preloader. Se você tem 250 Kbytes a serem baixados e recebe 2,5 kbytes/s qual o tempo estimado de transferência?

Tx de recepção(Kbytes) / Tamanho Total (Kbytes)
Tempo (segundos)
2,5
1
250
x

2,5x = 250 <=> x = 250/2,5 <=> x = 100 segundos (ou 1:40)

    Veja que na linha 15 nós convertemos esse valor em minutos. Então, da divisão do tempo restante (timeLeft) por 60, nós vamos aproveitar somente a parte inteira (obtido por meio da função Math.floor()).
    Na linha 16 nós obtemos os segundos restantes. Os segundos são obtidos, subtraindo-se o tempo restante (timeLeft) do total de minutos.

    Parece uma fórmula estranha -> "seconds = timeLeft - parseInt(minutes * 60)". Porém, analisando ela com alguns valores ela passa a fazer algum sentido:

timeLeft (sem formatação)

fórmula (seconds = timeLeft - parseInt(minutes*60))
para minutes = 6

segundos
400 seconds = 400 - parseInt(6*60) 40
380 seconds = 380 - parseInt(6*60) 20
360 seconds = 360 - parseInt(6*60) 0

O valor de segundos nunca será maior que 60.


    Nas linhas 17 e 18, nós temos apenas uma verificação, para caso o valor seja menor que 10 (9, 8, 7, ..., 0) ele acrescente um 0 (zero) a frente da variável.
    Na linha 19 nós temos então o valor disposto em minutos e segundos restantes.


Clique aqui e faça o download desse exemplo.

 



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário