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).
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:
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.
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:
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.
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:
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:
{
import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;
Passo 8 – Estendendo a classe
{
Passo 9 – Váriaveis
Essas são as variáveis que vamos usar:
/* 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.
{
/* 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.
{
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:
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.
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.
Resultado Final:
Grande abraço a todos e até a próxima!
