Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Cronômetro no Flash AS3 – Iniciar e Pausar Contador

Cronômetro no Flash AS3 – Iniciar e Pausar Contador
 

Lembrei que a muito tempo havia feito um contador de tempo para um jogo, decidi compartilhar caso alguém precise, para isso deixei mais genérico, criando 2 botões, um para iniciar o contador e outro para pausa-lo, assim acredito que todos que precisarem podem fazer o que quizer com ele.

A ideia é explicar o ActionScript 3, vou explicar a parte do botão do flash por cima e o As3 será explicado por comentários no código.

DOWNLOAD EXEMPLO CS4

DOWNLOAD EXEMPLO CS5

PASSO A PASSO

Primeiramente criamos um novo arquivo .fla ActionScript 3.
Criamos 2  botões e colocamos os nomes deles de iniciarBt e pausarBt
Criamos 2 Classes Actionscript3 com o nome de Main.as e Tempo.as
Associamos ao flash a Classe Main

CÓDIGO FONTE – EXPLICAÇÃO NOS COMENTÁRIOS

Dentro do arquivo Main.as colocamos o seguinte código:

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;

public class Main extends Sprite
{
// Variavel do tipo da nossa classe Tempo
private var tempo:Tempo;

public function Main()
{
// Carregando classe tempo e passando x e y para a construtora
tempo = new Tempo(65, 20);

// Adicionando texto ao palco
stage.addChild(tempo);

// Escutando botao iniciar, quando clicar chama funcao iniciarTempo
iniciarBt.addEventListener(MouseEvent.CLICK, iniciarTempo);

// Escutando botao pausar, quando clicar chama funcao pausarTempo
pausarBt.addEventListener(MouseEvent.CLICK, pausarTempo);
}

private function iniciarTempo(evento:MouseEvent) :void
{
// Chama dentro da classe Tempo a função iniciar
tempo.iniciar();
}

private function pausarTempo(evento:MouseEvent) :void
{
// Chama dentro da classe Tempo a função pausar
tempo.pausar();
}
}
}

Dentro do arquivo Tempo.as colocamos o seguinte código:

/**
* Arquivo responsavel pelo cronometro do tempo
* @author Ronie Neubauer
*/
package
{
import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;

public class Tempo extends Sprite
{
// Variavel publica do tipo Timer
public var temporizador:Timer;

// Variavel aonde vamos guardar quantos segundos passaram
public var segundos:Number = 0;

// Variavel para criacao de texto dinamico
var textButton:TextField = new TextField();

// Variavel de formatacao do nosso texto
var format:TextFormat = new TextFormat();

// Construtora da classe tempo, recebe x e y
public function Tempo(posX:Number, posY:Number)
{
// Configuramos algumas formatacoes como fonte, tamanho e italico
format.font = "Arial";
format.size = 25;
format.italic = true;

// Adicionamos texto inicial, x, y e altura
textButton.text = "00:00";
textButton.x = posX;
textButton.y = posY;
textButton.height = 30;

// Setamos a formatacao no nosso texto
textButton.setTextFormat(format);

// Adicionamos texto inicial ao palco 00:00
addChild(textButton);

// Configuramos para disparar um evento timer a cada 1 segundo
temporizador = new Timer( 1000 );

// Cada evento timer disparado, chama funcao atualizaTempo
temporizador.addEventListener( TimerEvent.TIMER, atualizaTempo );
}

private function atualizaTempo(temp:TimerEvent): void
{
// Somamos 1 segundo
segundos++;

// minuto = inteiro divisao segundos por 60
var min:Number 	= Math.floor(segundos / 60);

// minuto = resto divisao segundos por 60 arredondado
var seg:Number 	= Math.round(segundos % 60);

// Se minuto for menor que 10, adicionamos 0 a frente
var minStr:String = ((min < 10) ? "0" : "") + min.toString();

// Se segundo for menor que 10, adicionamos 0 a frente
var secStr:String = ((seg < 10) ? "0" : "") + seg.toString();

// Juntamos minuto com segundo separados pelo :
textButton.text = minStr + ":" + secStr;

// Aplicamos formatacao no texto
textButton.setTextFormat(format);
}

public function iniciar()
{
// Inicia o disparo do evento do timer
temporizador.start();
}

public function pausar()
{
// Pausa o disparo do evento do timer
temporizador.stop();
}
}
}

REGRESSIVO

Podemos fazer um contador regressivo de uma maneira muito fácil usando o que ja temos, basta somente no arquivo Tempo.as na linha 20 colocar quantos segundos desejamos iniciar (Ex: 300 = 5 minutos) e na linha 58 trocamos segundos++ por segundos– . Após isso só verificar quando segundo = 0 e pausar.

Espero que ajude, qualquer dúvida no código ou sugestão só me enviar um comentário que responderei o mais rapido possível.
Lembrando que coloquei no inicio do post todos os arquivos no formato Flash cs4 e cs5 para download.

Valews.


  1. Rety14:46:01 08/02/2011

    Tá trabalhando bagarai ae hein… =P hauhauha
    Massa massa o post! =D

    • Ronie Neubauer15:08:41 08/02/2011

      Hahaha, pior q sempre tem coisa pra fazer, mais tem aquela hora que o pensamento desvia, ae tento postar alguma coisa ou estudar nesse tempo haha.
      Sem falar que com música liberada consigo fazer mais coisas em menos tempo hauehuae, mente não desvia tanto.
      =)

  2. Fábio Tomio14:19:21 14/02/2011

    Faaala Ronie, gostei do post, uma solução bacana para essa aplicação. Mas rolou um questionamento, prq não usar o Date no lugar de um Number para contar o tempo? Acho que ele ajudaria em vc não precisar calcular as horas, minutos, segundos… Mas eu respondo em seguida, vou precisar implementar algo parecido aqui…
    Abraço

    • Ronie Neubauer15:18:21 14/02/2011

      Opa, na verdade fiz com um number mesmo para ter mais controle e deixa-lo mais genérico, mesmo quando pausar e resolver iniciar de novo o contador de onde parou, tanto normal quanto regressivo.

      Realmente da pra fazer com date, axei interessante a ideia, vou colocar depois como fazer usando date também =D.

  3. Maicom00:17:35 26/04/2011

    Olá Ronie, gostei desses posts e do site, está “manerasso”, parabéns. Queria aprender a passar dados de um textfield flash para um input text html usando actionscript/jquery. É fácil ou difícil?

    • ronieneubauer20:16:28 28/04/2011

      É fácil sim, esse final de semana eu vou escrever um post ensinando a passar os dados do flash para javascript e do javascript pro flash.

      Estou um pouco sem tempo por causa da faculdade, mas esse final de semana eu escrevo hehe.

  4. Thiago Neves16:29:41 02/05/2011

    Belo post, muito bem explicado.

    Queria uma dica sua. Estou criando uma animação em flash com linha do tempo dês de quando nasci e queria incrementar nela um contador que mostrasse ANO/MÊS/DIA, tipo assim: 24:05:02 tendo em vista que nascir no dia 04/09/1986 às 13:00 e a partir desses dados fazer um contador já pulando esses anos e começando no dia que de fato o site estiver no ar.

    Obirgado.

    • ronieneubauer14:19:02 04/05/2011

      Opa, desenvolvi um exemplo em AS3,te mandei por email e disponibilizei para download aqui no blog.

      Fiz um contador de tempo apartir de uma data usando a class Date. Baixe neste link abaixo:

      http://www.ronieneubauer.com/projeto/blog/Date.zip

      Vlw.

  5. DI11:37:34 13/07/2011

    Eu precisaria trocar o botão pausar, por um botão reiniciar!

Leave a Reply