Relógio em Flash usando ActionScript 3.0

• Tweet
• Sharebar

• Tweet

Neste artigo vou estar mostrando como manipular a classe Date do AS3.0, no artigo anterior mostrei como usar esta mesma classe na versão 2.0.

Basicamente não mudou nada, apenas a forma de chamar o evento enter frame.Vou seguir os mesmos passos do artigo anterior, explicando passo a passo. Faremos dois relógios, um analógico e outro digital.

Primeiro vamos entender a classe Date. Através desta classe podemos manipular todos os elementos relacionados a tempo, ou seja, hora, minuto, milésimos, dia, ano, etc. A utilização desta classe é muito simples e pode ser usado em qualquer trabalho que necessite de manipulação de tempo. Seja somente exibir a data e hora, como para algo mais especifico. Neste artigo vamos nos reter a somente fazer o relógio.

Primeiro passo: Precisar ter pelo menos o Flash CS3 instalado para poder trabalhar com o ActionScript 3.0.

Segundo passo: Desenhar o relógio, vou estar disponibilizando para download o design do relógio. Mas quem desejar criar o próprio, pode usar as ferramentas de desenho do flash, ou usar outro software. Vamos fazer dois relógios, um será somente analógico e o outro digital.

Obs.: O ponto de registro dos ponteiros devem ficar na parte central inferior, ou seja, a base do ponteiro, onde irá girar.

Terceiro passo: Após criar os relógios, vamos instanciar os ponteiros que devem ser movieClip e caxa de texto, campo dinâmico, para poder receber os eventos da classe Date.

Os ponteiros, dê os seguintes nomes:

• hora_mc
• minuto_mc,
• segundo_mc;

Caixas de textos:

• hora_txt,
• minutos_txt,
• segundo_txt,
• dia_txt, mes_txt,
• ano_txt,
• semana_txt;

Obs.: Os nomes devem estar sem acento!

Quarto passo: Após dar os respectivos nomes ao objetos, vamos a programação. Crie uma nova layer, e renomeie para ~AS3.0.

Quinto passo: Abra o painel Actions. Indo em Window > Actions ou apertando F9.

Sexto passo: A programação!

Com o painel Actions aberto, vamos inserir a primeira linha:

import flash.events.Event;

Nesta linha, importamos a classe Event, para podermos utilizar o ENTER_FRAME.

Nas próximas linhas vamos zerar a posição dos ponteiros para zero (0).

clockAnalogico_mc.horas_mc.rotation = 0;
clockAnalogico_mc.minutos_mc.rotation = 0;
clockAnalogico_mc.segundos_mc.rotation = 0;

Obs.: Os ponteiros, neste caso, se encontram dentro de um movieClip clockAnalogico_mc.

O próximo código, fará a chamada da função disparar_relogio.

this.addEventListener(Event.ENTER_FRAME, dispara_relogio);

Nesta linha, declaramos um “ouvinte” que chama o evento ENTER_FRAME através da função declarada dentro dos parênteses. Após está linha declaramos a função que receberá todo o corpo do código.

function dispara_relogio(e:Event):void
{
}

Dentro das chaves iremos por todo o código responsável por fazer o relógio funcionar. Primeiro declaramos o objeto da classe Date, com o nome time.

var time:Date = new Date();

Nas linhas seguintes, declaramos as variáveis que iram receber os eventos da classe Date.

var hora:Number;
var minuto:Number;
var segundo:Number;
var semana:Number;
var dia:Number;
var mes:Number;
var ano:Number;
var dataSemana:String;

Após declarado as variáveis, vamos instanciar os eventos as variáveis.

hora = time.getHours();
minuto = time.getMinutes();
segundo = time.getSeconds();
semana = time.getDay();
dia = time.getDate();
mes = time.getMonth();
ano = time.getFullYear();

Para simplificar, hora recebe a hora atual obtida pelo objeto time, que foi declarado no topo deste bloco, e através do método getHours() que obtemos a hora, isso ocorre para os outros eventos, mas obtendo seus respectivos valores.

Nos próximos passos que irmos dar funcionalidade ao relógio, primeiro o analógico.

// Análogico
clockAnalogico_mc.horas_mc.rotation = hora * 30;
clockAnalogico_mc.minutos_mc.rotation = minuto * 6;
clockAnalogico_mc.segundos_mc.rotation = segundo * 6;

Cada ponteiro recebe seu respectivo valor. Nome do objeto instanciado, e a propriedade rotation, que é responsável por fazer o ponteiro girar, como seu valor, recebe o evento hora multiplicado por 30, exemplo: se for 14h o ponteiro será rotacionado 420º em seu eixo, porque 14 * 30 = 420. Isso ocorre o mesmo para os minutos e os segundos, mas ao invés de 30, será multiplicado por 6. Por estar dentro de um evento ENTER_FRAME, o codigo contigo dentro desta função ficará se repetindo infinitamente, até que a aplicação seja fechada. Isso faz com que os ponteiros se movimentem.

E com isso concluímos o relógio analógico. Agora faremos o relógio digital.

Dando continuidade ao código, vamos inserir o código responsável por fazer o relógio digital.

// Digital
clockDigital_mc.hora_txt.text = hora;
clockDigital_mc.minuto_txt.text = minuto;
clockDigital_mc.segundo_txt.text = segundo;

Cada caixa de texto (que estão contidas dentro do movieClip clockDigital_mc) recebe seus respectivos valores, usando os mesmos eventos usados nos ponteiros, mas não iremos multiplicar por valor algum.

Basicamente nosso código está pronto, mas vamos manipular os eventos dia, mês, ano e dia da semana. Como já foi declarado anteriormente, vamos apenas manipulá-lo.

dataSemana = dia + "/" + mes + "/" + ano;
switch (semana)
{
case 1: clockDigital_mc.semana_txt.text = dataSemana + " - Segunda-feira"; break;
case 2: clockDigital_mc.semana_txt.text = dataSemana + " - Terça-feira"; break;
case 3: clockDigital_mc.semana_txt.text = dataSemana + " - Quarta-feira"; break;
case 4: clockDigital_mc.semana_txt.text = dataSemana + " - Quinta-feira"; break;
case 5: clockDigital_mc.semana_txt.text = dataSemana + " - Sexta-feira"; break;
case 6: clockDigital_mc.semana_txt.text = dataSemana + " - Sábado"; break;
default: clockDigital_mc.semana_txt.text = dataSemana + " - Domingo"; break;
}

A variável dataSemana que é do tipo String, recebe o arranjo de dia/mes/ano, para ser usado dentro da instrução switch, que detecta qual e o dia da semana, e escreve na caixa de texto semana_txt (que esta dentro do movieClip clockDigital_mc) o arranjo da data junto com o dia da semana. Os valores obtidos pelo método getDay() vai de zero (0) a seis (6), respectivamente, Domingo, segunda-feira,…

Nosso código completo fica assim:

import flash.events.Event;
clockAnalogico_mc.horas_mc.rotation = 0;
clockAnalogico_mc.minutos_mc.rotation = 0;
clockAnalogico_mc.segundos_mc.rotation = 0;
this.addEventListener(Event.ENTER_FRAME, dispara_relogio);
function dispara_relogio(e:Event):void
{
var time:Date = new Date();
var hora:Number;
var minuto:Number;
var segundo:Number;
var semana:Number;
var dia:Number;
var mes:Number;
var ano:Number;
var dataSemana:String;
hora = time.getHours();
minuto = time.getMinutes();
segundo = time.getSeconds();
semana = time.getDay();
dia = time.getDate();
mes = time.getMonth();
ano = time.getFullYear();
// Análogico
clockAnalogico_mc.horas_mc.rotation = hora * 30;
clockAnalogico_mc.minutos_mc.rotation = minuto * 6;
clockAnalogico_mc.segundos_mc.rotation = segundo * 6;
// Digital
clockDigital_mc.hora_txt.text = hora;
clockDigital_mc.minuto_txt.text = minuto;
clockDigital_mc.segundo_txt.text = segundo;
dataSemana = dia + "/" + mes + "/" + ano;
switch (semana)
{
case 1: clockDigital_mc.semana_txt.text = dataSemana + " - Segunda-feira"; break;
case 2: clockDigital_mc.semana_txt.text = dataSemana + " - Terça-feira"; break;
case 3: clockDigital_mc.semana_txt.text = dataSemana + " - Quarta-feira"; break;
case 4: clockDigital_mc.semana_txt.text = dataSemana + " - Quinta-feira"; break;
case 5: clockDigital_mc.semana_txt.text = dataSemana + " - Sexta-feira"; break;
case 6: clockDigital_mc.semana_txt.text = dataSemana + " - Sábado"; break;
default: clockDigital_mc.semana_txt.text = dataSemana + " - Domingo"; break;
}
}

É isso ai, duvidas só postar em comentários.

Arquivos: Design do Relógio.

Até++!

Escrito por Jean_Carlos on julho 13, 2010. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo