Fazendo um relógio em flash com Actionscript 2.0

• Tweet
• Sharebar

• Tweet

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_txt, minuto_txt, segundo_txt, semana_txt e dia_txt, 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 nas entrâncias 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 instancia 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 instancia ponteiro_minuto recebe a variável minuto e a instancia 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 instancias hora_txt, minuto_txt e segundo_txt, 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_txt.text = hora;
_root.minuto_txt.text = minuto;
_root.segundo_txt.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_txt.text = “Segunda”;
break;
case 2 :
_root.semana_txt.text = “Terça”;
break;
case 3 :
_root.semana_txt.text = “Quarta”;
break;
case 4 :
_root.semana_txt.text = “Quinta”;
break;
case 5 :
_root.semana_txt.text = “Sexta”;
break;
case 6 :
_root.semana_txt.text = “Sábado”;
break;
default :
_root.semana_txt.text = “Domingo”;
break;
}

Dentro de cada case a instancia semana_txt 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 instancia dia_txt, ficando assim:

dia = horario.getDate();
_root.dia_txt.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_txt.text = hora;
_root.minuto_txt.text = minuto;
_root.segundo_txt.text = segundo;

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

};

Escrito por Jean_Carlos on abril 19, 2008. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo