sábado, 29 de setembro de 2007

Tutorial 13: Relógio analógico 3D com sombra

Outro relógio analógico, desta vez com efeito tridimensional e sombra.



Leia mais! * Montagem
Crie um símbolo para o ponteiro das horas (Ctrl+F8).
Nesse símbolo, desenhe o ponteiro das horas partindo do centro (cruz) para cima.
Crie outros símbolos para os ponteiros de minutos e segundos.
Crie um novo símbolo para o fundo do relógio (Ctrl+F8).
Desenhe o relógio sem ponteiros e sem preenchimento (apenas desenhe o círculo e os números).
Se utilizar caixa de texto para algum número, transforme-a em figura no menu Modify > Break Apart (Ctrl+B).
Crie um novo símbolo para o relógio completo (Ctrl+F8).
Na biblioteca de símbolos (Ctrl+L), instancie (clique e arraste) o símbolo do fundo do relógio, e os 3 ponteiros. Posicione os ponteiros no centro do relógio, marcando 12 horas.
Na janela de propriedades, altere o nome da instancia de cada ponteiro para 'hora', 'minuto' e 'segundo'.
Volte para o documento (Ctrl+E).
Instancie um relógio completo.
Clique na opção Free Transform Tool (Q) na caixa de ferramentas ou utilize o Modify > Transform para rotacionar e esticar seu relógio dando um aspecto 3D.
Instancie outro relógio completo.
Na janela de propriedades, altere o nome da nova instância do relógio para 'sombra'.
Utilize as ferramentas de transformação para esticar e rotacionar o novo relógio para o formato de uma sombra colorida.
Envie a sombra para trás com o menu Modify > Arrange > Send To Back.

* Programação
Abra a janela de ActionScript (F9).
Edite o relógio.
Na timeline do relógio, clique no frame 1:
onEnterFrame = function() {
tempo = new Date();
hora._rotation = tempo.getHours()%12*360/12;
minuto._rotation = tempo.getMinutes()*360/60;
segundo._rotation = tempo.getSeconds()*360/60;
}
Volte para o documento.
Na timeline do documento, clique no frame 1:
import flash.filters.ColorMatrixFilter;

var matrizCores:Array =
[0.2, 0.2, 0.2, 0, 0,
0.2, 0.2, 0.2, 0, 0,
0.2, 0.2, 0.2, 0, 0,
0, 0, 0, 0.2, 0];

var matrizFiltro = new ColorMatrixFilter(matrizCores);
sombra.filters = [matrizFiltro];