Criando um relógio analógico com Flash

Nesse artigo sobre e o Flash, vamos mostrar os passos da criação de um relógio analógico com flash usando o Action Script 3. O resultado é impressionante, e você pode até colocá-lo em seu Website ou blog. Além disso, vamos transformar esse mesmo relógio em uma proteção de tela para seu sistema. Vamos começar!

Passo 1 – Resumo

Usando algumas ferramentas e propriedades do flash, vamos primeiramente criar as horas, minutos e segundos e na seqüência, usar a matemática para mostrar os dados obtidos no relógio analógico.

Passo 2 – Iniciando

Abra seu Flash e crie um novo documento (ACTION SCRIPT 3).

Criando um relógio analógico com Flash

Defina o tamanho do palco em 640×400 px e coloque um fundo cinza linear com as cores (#DBDBDD, #B3B2B7).

Passo 3 – Fundo do relógio

Vamos começar a criar o fundo do relógio. Selecione a ferramenta Oval (O) e desenhe um círculo com 250×250 px e crie um fundo preto linear (#313131, #000000). Use a “Gradient Transform Tool (F)” para fazer um ajuste como na seguinte imagem:

Criando um relógio analógico com Flash

Crie outro círculo, desta vez, 248×248 px com este gradiente linear (#595959,#000000). Novamente use a “Gradient Transform Tool (F)” para ajustar a inclinação.

Criando um relógio analógico com Flash

Passo 4 – Números

Neste passo colocaremos os números no nosso relógio. Selecione a ferramenta Texto (T), e escolha uma fonte de seu gosto e um tamanho adequado para o relógio. Usamos Myriad Pro Regular, 22 pt, # DDDDDD.

Depois disso, escreva os números dentro do circulo de nosso relógio. Isso pode ser um pouco difícil sem uma referência, para facilitar use linhas guias.

Horizontal:

Criando um relógio analógico com Flash

Vertical:

Passo 5 – Ponteiros do relógio

Selecione a Poly Star Tool (Clique e segure o botão Rectangle Tool), então no painel de propriedades (Tool Settings) altere o número de lados para 3.

Criando um relógio analógico com Flash

Crie um triângulo branco 20×70 px, e converta-o em um MovieClip com o nome de “hourHand”.

Repita esse processo para o ponteiro dos minutos, no entanto altera a altura para 110px. Lembre-se de definir o nome da instância para “minuteHand”.

Agora, selecione a ferramenta Oval e crie um pequeno círculo com 26×26 px, converta para MovieClip e aplique um filtro da seguinte forma:

Criando um relógio analógico com Flash

Para finalizar, combine com um círculo com 8×8 px e um retângulo com 2×116 px. Preencha os dois com esta cor #C90303.

Passo 6 – ActionScript

Crie um novo documento do ActionScript e salve-o como “Analog Clock.as”.

Passo 7 – Classes Necessárias

Estas são as classes que vamos precisar:

package

{

import flash.display.Sprite;

import flash.utils.Timer;

import flash.events.TimerEvent;

Passo 8 – Estendendo a classe

public class AnalogClock extends Sprite

{

Passo 9 – Váriaveis

Essas são as variáveis que vamos usar:

var date:Date = new Date();

/* váriaveis do tempo */

var hours:int = date.hours;
var minutes:* = date.minutes;
var seconds:* = date.seconds;

/* atualiza o tempo */

var timer:Timer = new Timer(1000);

Passo 10 – Função principal

Esta função é executada quando a classe é carregada.

public function AnalogClock():void

{

/* Este código irá acertar os ponteiros do relógio na posição correta com os dados do objeto Date */

hourHand.rotation = hours * 30 + (minutes * 0.5);
minuteHand.rotation = minutes * 6;
secondHand.rotation = seconds * 6;

timer.addEventListener(TimerEvent.TIMER, updateClock);

timer.start();

}

Passo 11 – Função Update

Essa função será lida com o relógio. Ela será executada a cada segundo.

private function updateClock(e:TimerEvent):void

{

date = new Date();

hours = date.hours;

minutes = date.minutes;

seconds = date.seconds;

hourHand.rotation = hours * 30 + (minutes * 0.5);

minuteHand.rotation = minutes * 6;

secondHand.rotation = seconds * 6;

}

Passo 12 – Classe do documento

Volte para o arquivo FLA. E no painel de propriedades e adicione “AnalogClock” no campo da classe:

Criando um relógio analógico com Flash

Passo 13 – Baixar o Screentime para o Flash

Screentime para o Flash é uma ferramenta criadora de tela, é rápido e fácil de usar. Você pode obter uma versão Trial no site. Nessa versão demo, os recursos são totalmente funcionais. Neste arquivo usamos a versão para Mac, o protetor de tela será Mac-only.

Passo 14 – Screensaver

Abra o “Screentime” e na guia Content, selecione o arquivo clicando no botão “…” e navegue até o arquivo compilado SWF. Em seguida coloque um nome para seu protetor de tela.

Criando um relógio analógico com Flash

Deixe as propriedades e guias de instalação como padrão, e em “Publish” escolha as opções desejadas. Depois disso, clique em “Build”.

Quando o processo estiver concluído, abra o instalador do aplicativo e instale-o normalmente. Agora você pode escolher o seu relógio criado no Flash como protetor de tela do seu Desktop.