[Tutorial] Flash: Relógio digital

[redhotmustang]

Vamos construir um simples relógio digital em Flash.

1. Criamos um novo documento no Flash. Salvamo-lo como relogio_digital.fla

2. Criamos no Stage duas caixas de texto do tipo Dynamic. Damo-lhes os nomes de instância relogio1_txt e relogio2_txt, respectivamente para a primeira e segunda caixas.

3. Criamos uma nova layer, à qual chamamos "actions".

4. Começamos por digitar o seguinte código:

Código:

this.onEnterFrame = function(){

}

4.1 Todo o nosso código estará dentro das chavetas desta função.

4.2 Este código representa o evento onEnterFrame, o qual repetirá as instruções que estiverem dentro das chavetas (conhecidas em inglês como Curly Braces) a um ritmo constante. Esse ritmo é definido pelo número de frames por segundo que podemos definir nas propriedades do nosso documento Flash. (Para editar as propriedades do documento, fazemos CTRL+J e aí podemos definir outra quantidade de frames por segundo). Quanto maior o ritmo, maior o número de actualizações. No entanto, para este exemplo, podemos usar as 12 frames/segundo.

5. Agora vamos criar uma instância da classe Date. Vamos chamá-la de "relogio".

Código:

var relogio:Date = new Date();

5.1 No caso do ActionScript 2.0 é exigido sempre que coloquemos a palavra var antes do nome da nova instância.

5.2 Tal como no caso da importação de símbolos da biblioteca para o Stage, no qual nunca trabalhamos com o símbolo em si, mas sim com uma instância desse símbolo. Da mesma forma quando falamos em trabalhar com classes, trabalhamos sempre com instâncias dessas classes e nunca com as próprias classes.

5.3 A instância "relogio" herda, deste modo, todas as características da classe Date.

6. Se experimentarmos verificar o que contem, agora, essa instância. Para tal fazemos:

Código:

relogio1_txt.text = relogio;

6.1 Verificamos que apresenta um conjunto completo de informação relativa à classe Date. Teremos que manipular essa informação para termos só aquela que quisermos mostrar.

7. Vamos, em seguida, buscar o ano, mês e dia do computador do utilizador.

Código:

ano = relogio.getFullYear();
mes = relogio.getMonth()+1;
dia = relogio.getDate();

7.1 São criadas três variáveis: hora, mes e dia. Essas variáveis contêm a hora, mês e dia recuperados da instância relógio, através dos métodos getFullYear(), getMonth e getDate, respectivamente.
No caso da variável mes tivemos de adicionar 1 ao seu valor, porque a lista de meses começa em zero. Desse modo, conseguimos ter os meses listados de 1 a 12, em vez de 0 a 11.

8. Basta-nos, agora, juntar toda este informação, formatá-la e mostrá-la na caixa de texto relogio1_txt.

Código:

relogio1_formatado = dia + "/" + mes + "/" + ano;
relogio1_txt.text = relogio1_formatado;

8.1 Criámos uma variável "relogio1_formatado" que contém os valores das variáveis dia, mes e ano. O sinal + é usado para concatenar os valores que essas variáveis contêm com o caracter / (barra).

9. Agora passemos à segunda parte deste tutorial. Vamos recuperar os valores da hora, minutos e segundos. Continuamos a colocar este código das chavetas.

Código:

horas = relogio.getHours();
minutos = relogio.getMinutes();
segundos = relogio.getSeconds();

9.1 Não há muito a explicar neste código. As variáveis horas, minutos e segundos são criadas e os seus valores são recuperados da instância da classe Date através dos métodos getHours, getMinutes e getSeconds, respectivamente.

10. Estamos quase a concluir o nosso tutorial.
Queremos que o formato das nossas horas seja 00:00:00, no entanto se o relógio estiver nas 3 da manhã, seria apenas mostrado 3:00:00, em vez daquilo que desejamos, 03:00:00.
Para isso teremos de criar uma estrutura condicional. Ela vai dizer que se as horas e os minutos e os segundos forem menores que 10 (ou seja, se tiverem menos que dois digitos); o Flash terá de transformar esse valores em valores com dois digitos.
Isto é, por exemplo, se a hora for 3, terá de aparecer como 03.
E o código será o seguinte:

Código:

if(horas<10){
horas = "0" + horas;
}

if(minutos<10){
minutos = "0" + minutos;
}

if(segundos<10){
segundos = "0" + segundos;
}

10.1 Aqui é dito que as variáveis já criadas anteriormente são iguais ao valor 0, concatenado através do sinal + ao valor das próprias variáveis.
Cuidado aqui com esta "soma" de valores!
Se o código fosse horas = 0 + horas;, seria somado zero mais o valor das horas. Exemplificando: 0 + 3 = 3.
Ou seja, ficava tudo na mesma! Por isso o zero está entre aspas para ser considerado como uma string (texto) e, deste modo, ficaria lado a lado ao valor das horas: 03.

11. Para terminar, teremos de criar uma nova variável que irá formatar todos os dados horários. A seguir, definimos que a caixa de texto com o nome de instância relogio2_txt é igual ao conteúdo da variável horário.

Código:

horario = horas + ":" + minutos + ":" + segundos;
relogio2_txt.text = horario;

11.1 A variável horario contém o valor das horas, minutos e segundos e o sinal + concatena o caracter : com o valor das variáveis horas, minutos e segundos.

12. Aqui fica o código completo do tutorial.

Código:

this.onEnterFrame = function(){
var relogio:Date = new Date();
ano = relogio.getFullYear();
mes = relogio.getMonth()+1;
dia = relogio.getDate();
data_formatada = dia + "/" + mes + "/" + ano;
relogio1_txt.text = data_formatada;

horas = relogio.getHours();
minutos = relogio.getMinutes();
segundos = relogio.getSeconds();

if(horas<10){
horas = "0" + horas;
}

if(minutos<10){
minutos = "0" + minutos;
}

if(segundos<10){
segundos = "0" + segundos;
}

horario = horas + ":" + minutos + ":" + segundos;
relogio2_txt.text = horario;
}

E pronto está concluído o nosso tutorial!
Este tutorial foi analisado e debatido na nossa 2ª Conferência via MSN.
Foi debatido o uso do _root. e explicado que não convém muito teimar em usá-lo pois pode trazer problemas mais tarde. Nomeadamente, se se fizer um loadMovie deste SWF noutro SWF principal. Por isso, editei este código e troquei o _root. por this..

Cumps.