Inserindo data e hora no Flash

 

Objetivos:

 

Mostrar como criar clipes de filme que exibam: data simples, data por extenso, relógio digital e relógio analógico.

 

Autor: Carlos Vitor de Castro

 

Vamos aprender neste tutorial a criar clipes de filme com data abreviada, data por extenso, relógio digital e relógio analógico, que podem ser colocados em qualquer lugar de uma página feita em Flash ou HTML.

 

Inserindo data abreviada

 

1. Crie um novo arquivo com 760 pixels de largura e 420 pixels de altura.

 

2. Clique no menu Insert/New symbol. Marque a opção Movie clip e dê o nome de “data”.

 

 

3. Dê um clique na ferramenta Texto e na janela Properties e modifique o tipo da caixa de texto para Dynamic Text.

 

 

4. Com a ferramenta Texto desenhe um retângulo no centro da tela de edição do símbolo e clique na ferramenta de Seleção. Você vai notar que a caixa fica com uma borda azul, mantenha-a selecionada.

 

5. Com a caixa de texto selecionada, dê o nome de data a opção Var da janela Properties.

 

 

6. Clique no primeiro quadro da linha de tempo e pressione F9 para mostrar a paleta “Actions”.

 

7. Digite o código abaixo:

 

datahoje=new Date()

 

dia = datahoje.getDate()

mes = datahoje.getMonth()+1

ano = datahoje.getFullYear()

 

if (dia < 10)

      {dia = "0" + dia}

 

if (mes < 10)

      {mes = "0" + mes}

 

data = "Rio, " + dia + "/" + mes + "/" + ano + "."

 

8. Retorne a Cena 1, pressione F11 para mostrar a Library, e arraste seu clipe de filme para o Stage.

 

Inserindo data por extenso

 

1. Crie um novo arquivo com 760 pixels de largura e 420 pixels de altura.

 

2. Clique no menu Insert/New symbol. Marque a opção Movie clip e dê o nome de “data”.

 

 

3. Dê um clique na ferramenta Texto e na janela Properties e modifique o tipo da caixa de texto para Dynamic Text.

 

 

4. Com a ferramenta Texto desenhe um retângulo no centro da tela de edição do símbolo e clique na ferramenta de Seleção. Você vai notar que a caixa fica com uma borda azul, mantenha-a selecionada.

 

5. Com a caixa de texto selecionada, dê o nome de data a opção Var da janela Properties.

 

 

6. Clique no primeiro quadro da linha de tempo e pressione F9 para mostrar a paleta “Actions”.

 

7. Digite o código abaixo:

 

datahoje=new Date()

 

dia = datahoje.getDate()

mes = datahoje.getMonth()+1

ano = datahoje.getFullYear()

diasemana = datahoje.getDay()

 

meses = new Array(12)

meses[0] = "janeiro"

meses[1] = "fevereiro"

meses[2] = "março"

meses[3] = "abril"

meses[4] = "maio"

meses[5] = "junho"

meses[6] = "julho"

meses[7] = "agosto"

meses[8] = "setembro"

meses[9] = "outubro"

meses[10] = "novembro"

meses[11] = "dezembro"

semanas = new Array(7)

semanas[0] = "domingo"

semanas[1] = "segunda-feira"

semanas[2] = "terça-feira"

semanas[3] = "quarta-feira"

semanas[4] = "quinta-feira"

semanas[5] = "sexta-feira"

semanas[6] = "sábado"

 

data = "Rio de Janeiro, " + semanas[diasemana] + " , " + dia + " , de " + meses[mes] + " de " + ano

 

8. Volte para a cena principal, insira o movie clip no palco e teste sua aplicação.

 

Inserindo um relógio digital

 

1. Crie um novo arquivo com 760 pixels de largura e 420 pixels de altura.

 

2. Clique no menu Insert/New symbol. Marque a opção Movie clip e dê o nome de “hora”.

 

 

3. Dê um clique na ferramenta Texto e na janela Properties e modifique o tipo da caixa de texto para Dynamic Text.

 

4. Com a ferramenta Texto desenhe um retângulo no centro da tela de edição do símbolo e clique na ferramenta de Seleção. Você vai notar que a caixa fica com uma borda azul, mantenha-a selecionada.

 

5. Com a caixa de texto selecionada, dê o nome de hora a opção Var da janela Properties.

 

 

6. Clique no primeiro quadro da linha de tempo e digite o código abaixo:

 

agora = new Date()

 

horas = agora.getHours()

minutos = agora.getMinutes()

segundos  = agora.getSeconds()

 

if (horas<10)

      {

      horas = "0" + horas

      }

if (minutos<10)

      {

      minutos = "0" + minutos

      }

if (segundos<10)

      {

      segundos = "0" + segundos

      }

hora = horas + ":" + minutos + ":" + segundos

 

7. Este código serve para mostrar a hora, mas só ele não nos basta, pois ele exibe a hora apenas uma vez e não atualiza, para atualizar e funcionar como um relógio digital de verdade, devemos colocar um gotoAndPlay(1); no segundo quadro da linha de tempo.

 

8. Clique no segundo quadro da linha de tempo e pressione F7 para criar um quadro-chave em branco.

 

9. Pressione F9 para exibir a paleta Actions e digite o código abaixo:

 

gotoAndPlay(1);

 

Assim, o sistema roda o programa e a hora é exibida, quando passar para o segundo quadro, o sistema manda a linha de tempo retornar ao quadro um, e ai é exibida a hora atualizada.

 

Criando um relógio analógico

 

O objetivo é criar os três ponteiros do relógio como movie clips e depois associá-los às variáveis que capturam horas, minutos e segundos.

 

1. Crie um novo arquivo com 300 por 300 pixels.

 

2. Desenhe um círculo de 200 por 200 pixels de centralize-o no palco. Para centralizar clique em Windows/Design panels/Align e observe a imagem abaixo.

 

 

3. Bloqueie esta camada para evitar acidentes.

 

 

4. Crie outra camada, e nesta camada desenhe 3 retângulos:

 

a. Ponteiro de segundos: 3 px de largura e 80 px de altura, converta-o em clipe de filme e dê o nome da instância de segundos.

 

 

b. Ponteiro de minutos: 3 px de largura e 60 px de altura, converta-o em clipe de filme e dê o nome da instância de minutos.

 

c. Ponteiro de horas: 3 px de largura e 40 px de altura, converta-o em clipe de filme e dê o nome da instância de segundos.

 

5. Agora devemos mover o eixo de rotação de cada para a base, para fazer isto, selecione um dos ponteiros com a ferramenta de transformação e observe a figura abaixo.

 

 

6. Crie mais uma camada e insira o código abaixo no primeiro Frame desta camada.

 

totalhora = new Date();

segundo = totalhora.getSeconds();

minuto = totalhora.getMinutes();

hora = totalhora.getHours();

s = segundo*6;

m = minuto*6;

h = hora*30;

setProperty ("segundo", _rotation, s);

setProperty ("minuto", _rotation, m + int (segundo/10));

setProperty ("hora", _rotation, h + int (minuto/2));

 

7. Para fazer o relógio funcionar devemos inserir um gotoAndPlay(1); no quadro 2, para fazê-lo, selecione o quadro 2 de todas as camadas e pressione F6.

 

8. Clique no segundo quadro da camada que você colocou a action acima e digite o código.

 

gotoAndPlay(1)