Olá pessoal!

Depois de tando tempo sem escrever no meu blog, vou postar um tuturial que havia feito no começo do ano, de como fazer um relógio em actionscript 2.0. E muito simples de fazer.

Vamos lá ?

Bom, primeiramente devemos entender como vai funcionar nosso relógio, ele será digital e analógico, no digital além de mostrar a hora também irá exibir o dia da semana e a data.

Para começarmos a fazer nosso relógio, primeiro temos que fazer o desenho, podemos usar o próprio flash ou qualquer editor de imagem.

Depois de feito o desenho do relógio, vamos criar cinco campos de texto dinâmicos, instanciados como hora_texto, minuto_texto, segundo_texto, semana_texto e dia_texto, após isso vamos instanciar os ponteiros, ponteiro_hora, ponteiro_minuto e ponteiro_segundo.

Obs.: O ponto de registro dos ponteiros tem que estar como centralizado inferior.

Actionscript

O relógio será feito em um único frame, então devemos fazer para que o aplicativo atualize o tempo todo naquele único frame, para isso vamos usar o onEnterFrame que irá atualizar o código infinitamente, enquanto o relógio estiver aberto.

this.onEnterFrame = function()
{

};


Todo nosso código ira ficar dentro dessa função. Dentro da função vamos criar as variáveis onde irão conter os valores para que o relógio funcione.

this.onEnterFrame = function()
{
var horario:Date = new Date();
hora = horario.getHours();
minuto = horario.getMinutes();
segundo = horario.getSeconds();
};


Dentro da função foram inseridas quatro variáveis, onde a primeira recebe todos os valores da propriedade Date();, na segunda variável de nome ‘hora’ vai receber o valor getHours(); da variável horario, a variável ‘minuto’ receberá o valor getMinutes(); e ‘segundo’ receberá getSeconds(); também da variável horario.

Agora vamos chamar as variáveis dos ponteiros para ele funcionar, ficando assim:

this.onEnterFrame = function()
{
var horario:Date = new Date();
hora = horario.getHours();
minuto = horario.getMinutes();
segundo = horario.getSeconds();

_root.ponteiro_hora._rotation = hora * 30;
_root.ponteiro_minuto._rotation = minuto * 6;
_root.ponteiro_segundo._rotation = segundo * 6;
};


A instância ponteiro_hora recebe a variável hora que e multiplicada por 30. Para que o ponteiro_hora dê uma volta completa a cada 12 horas, vamos dividir 360° por 12 que e igual a 30, o mesmo será usado para os ponteiros minuto e segundo, só que ao invés de ser dividido por 12 será divido por 60 que será igual a 6.
A instância ponteiro_minuto recebe a variável minuto e a instância ponteiro_segundo recebe a variável segundo que são multiplicadas por 6.

Nosso relógio analógico está pronto. Agora vamos fazer a programação do relógio digital.

Para o digital funcionar, vamos chamar as variáveis hora, minuto e segundo nas instâncias hora_texto, minuto_texto e segundo_texto, ficando assim:

this.onEnterFrame = function()
{
var horario:Date = new Date();
hora = horario.getHours();
minuto = horario.getMinutes();
segundo = horario.getSeconds();

//Analógico
_root.ponteiro_hora._rotation = hora * 30;
_root.ponteiro_minuto._rotation = minuto * 6;
_root.ponteiro_segundo._rotation = segundo * 6;

//Digital
_root.hora_texto.text = hora;
_root.minuto_texto.text = minuto;
_root.segundo_texto.text = segundo;
};


Bom, basicamente nosso relógio já está pronto! Mas agora falta fazer o relógio exibir o dia da semana e a data, para fazer isso vamos utilizar um laço de repetição switch para verificar o dia da semana e exibir na caixa de texto. Primeiro vamos criar uma variável onde ira buscar o valor getDay();, assim:

semana = horario.getDay();
switch (semana)
{
  case 1 :
  _root.semana_texto.text = "Segunda";
  break;
  case 2 :
  _root.semana_texto.text = "Terça";
  break;
  case 3 :
  _root.semana_texto.text = "Quarta";
  break;
  case 4 :
  _root.semana_texto.text = "Quinta";
  break;
  case 5 :
  _root.semana_texto.text = "Sexta";
  break;
  case 6 :
  _root.semana_texto.text = "Sábado";
  break;
  default :
  _root.semana_texto.text = "Domingo";
  break;
}


Dentro de cada case a instância semana_texto recebe da variável semana um texto correspondente a cada dia da semana de acordo com o numero.
Ex.: 1 = segunda, 2 = terça etc

Agora só falta colocar o dia. Para isso vamos criar uma variável chamada dia onde recebera o valor getDate da variável horário. E colocar o valor da variável dia na instância dia_texto, ficando assim:


dia = horario.getDate();
_root.dia_texto.text = dia; 


Nosso código completo:

this.onEnterFrame = function()
{
var horario:Date = new Date();
hora = horario.getHours();
minuto = horario.getMinutes();
segundo = horario.getSeconds();

//Analógico
_root.ponteiro_hora._rotation = hora * 30;
_root.ponteiro_minuto._rotation = minuto * 6;
_root.ponteiro_segundo._rotation = segundo * 6;

//Digital
_root.hora_texto.text = hora;
_root.minuto_texto.text = minuto;
_root.segundo_texto.text = segundo;

  //Semama
  semana = horario.getDay();
  switch (semana)
  {
  case 1 :
  _root.semana_texto.text = "Segunda";
  break;
  case 2 :
  _root.semana_texto.text = "Terça";
  break;
  case 3 :
  _root.semana_texto.text = "Quarta";
  break;
  case 4 :
  _root.semana_texto.text = "Quinta";
  break;
  case 5 :
  _root.semana_texto.text = "Sexta";
  break;
  case 6 :
  _root.semana_texto.text = "Sábado";
  break;
  default :
  _root.semana_texto.text = "Domingo";
  break;
  }
  // Dia
  dia = horario.getDate();
  _root.dia_texto.text = dia; 

};



Bom pessoal ! é isso ai !
Espero que tenha gostado. Ate a próxima !