GABRIEL SPORCH (53 pts)

FÁBIO DUARTE (79 pts)

ZEBEDIAH (35 pts)

JOTA LAGO (40 pts)

IRAPUAN MARTINEZ (45 pts)

RODRIGO AMARAL (56 pts)

JONAS GALVEZ (521 pts)

MAURO ROCHA TAVARES (40 pts)

EDUARDO PERROUD (52 pts)

DAUTON JANOTA (255 pts)

DENIS CARAVALHO (85 pts)

ILVA RUDEV (90 pts)
Treinamento PontoFlash de Flash e ActionScript

Como deletar a última palavra de um campo de texto?

Quero abrir uma janela popup do Flash.

Como alterar dinamicamente o tipo e o background de um campo de texto?

Como disparar um movieclip quando clico o mouse no palco?

É possível enviar variáveis de um movie clip para uma cena diferente?

Como eu faço para retornar um número inteiro?

Como verificar atravéz do flashMX a resolução do monitor do usuário?

Objeto flutuante e gravidade.

Como posso fazer para que um objeto possa rodar no palco?

Como fazer os botões desse site? http://themmgroup.com

Como verificar a resolução do usuário e abrir um filme compatível?

Como faço pra mudar a cor dos gradientes (degradê )?

Como fazer um objeto desfocado em movimento?

Quero que no mouseOver meu movieclip pare e no mouseOut ele se movimente.
Máscaras no Fireworks MX, o mistério!

TV Scan Lines - Fireworks

Aspectos Básicos das Ferramentas de Desenho.

Flash Turbine (integração Flash com PHP ou ASP)

Jogo de colorir.

Duplicate Movieclip.

Como enevoar as bordas de uma imagem no Fireworks.

Comunicação Flash-PHp-MySql - Editar banco de dados

Botões estilo Apple.com feito no PhotoShop

A história do Flash.

Alternando janelas no Flash.

Efeito lente (máscara e zoom)
BeeJay

Menu animado

Menu Silverado

Tornado

To Lower Case

Galinha

Triangulos2

Barneys menu

Rand letters

Chinese dragoon

Easy preloader

Plasma2D
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