Larback - Retornando conhecimento

Sempre pode piorar, use a imaginação.

Trabalhando com data e hora

Objetivos:

Mostrar como criar clipes de filme que exibam: data simples, data por extenso, relgio digital e relgio analgico.

Autor: Carlos Vitor de Castro

Vamos aprender neste tutorial a criar clipes de filme com data abreviada, data por extenso, relgio digital e relgio analgico, que podem ser colocados em qualquer lugar de uma pgina 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 opo 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 retngulo no centro da tela de edio do smbolo e clique na ferramenta de Seleo. 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 opo Var da janela Properties.

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

7. Digite o cdigo 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 palco.

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 opo 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 retngulo no centro da tela de edio do smbolo e clique na ferramenta de Seleo. 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 opo Var da janela Properties.

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

7. Digite o cdigo 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] = "maro" 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] = "tera-feira" semanas[3] = "quarta-feira" semanas[4] = "quinta-feira" semanas[5] = "sexta-feira" semanas[6] = "sbado" 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 aplicao.

Inserindo um relgio 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 opo 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 retngulo no centro da tela de edio do smbolo e clique na ferramenta de Seleo. 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 opo Var da janela Properties.

6. Clique no primeiro quadro da linha de tempo e digite o cdigo 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 cdigo serve para mostrar a hora, mas s ele no nos basta, pois ele exibe a hora apenas uma vez e no atualiza, para atualizar e funcionar como um relgio 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 cdigo 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 relgio analgico

O objetivo criar os trs ponteiros do relgio como movie clips e depois associ-los s variveis que capturam horas, minutos e segundos.

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

2. Desenhe um crculo 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 retngulos:

a. Ponteiro de segundos: 3 px de largura e 80 px de altura, converta-o em clipe de filme e d o nome da instncia 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 instncia 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 instncia de segundos.

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

6. Crie mais uma camada e insira o cdigo 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 relgio 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 cdigo.

gotoAndPlay(1) Este tutorial foi retirado na integra de http://www.juliobattisti.com.br/tutoriais/carloscastro/flash005.asp