Início
Portal
Procurar
Últimas imagens
Registar
Entrar
![Fazendo um Relógio Digital [Flash] Empty](https://2img.net/i/empty.gif)
![Fazendo um Relógio Digital [Flash] Left_bar_bleue](https://2img.net/i/fa/i/left_bar_bleue.jpg){kind=small}
![Fazendo um Relógio Digital [Flash] Empty_bar_bleue](https://2img.net/i/fa/i/empty_bar_bleue.jpg){kind=small}
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:
E todos os outros q vierem a seguir deverão ser colokados dentro dessa função.
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". Coloke dentro das chavetas citadas acima
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:
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.
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.
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.
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:
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.
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:
E pronto está concluído o meu tutorial!
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..
Espero ter Ajudado
Cumps.
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:
E todos os outros q vierem a seguir deverão ser colokados dentro dessa função.
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". Coloke dentro das chavetas citadas acima
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:
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.
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.
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.
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:
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.
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 meu tutorial!
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..
Espero ter Ajudado
Cumps.
