Reloj de agujas en Flash
Explicaré como desarrollar un Reloj de agujas en Flash. Para lo cual, antes de meternos con flash debemos de diseñar el aspecto que deberá tener. Nos podemos valer de cualquier editor gráfico como Photoshop, Corel, siempre y cuando nos permita luego exportar a Flash el diseño terminado. En mi caso particular lo diseñe con Corel y salió algo como la imagen.
En este punto pueden jugar con su imaginación o tomar inspiración de algun diseño que encuentren por la red.
Es importante tener en cuenta que cuando diseñen las agujas deberán tener en cuenta que la posición inicial de las mismas estará a las 12:00 hs., ya que a partir de este punto calculamos el ángulo para darle la correcta rotación.
Una vez que contamos con el diseño ya podemos exportar el trabajo a flash. Para los que no están muy familiarizados con flash las extensión de los archivos es .fla, por lo que cuando exportamos desde corel u otro editor debemos buscar esta extensión.
Con el documento creado ya podemos abrir el flash para darle un poco de movimiento a nuestro reloj.
Creamos un documento nuevo en flash, luego Archivo–> Importar y buscamos el archivo exportado anteriormente con Corel.
Automáticamente flash nos separa en capas los objetos que conforman el diseño del reloj.
El siguiente paso es convertir en símbolo (F8) las manecillas de la hora, minuto y segundo. Este paso es importante, para luego, con un poco de código dar animación a las mismas.
En mi caso y como verán en el ejemplo les puse manecillaHoras, manecillaMinutos y manecillaSegundos.
Ahora solo nos resta agregar algo de código con actionscript para darle vida al diseño, para lo cual, vamos a insertar una capa donde creamos un fotograma donde irá todo el código.
Nos posicionamos en el fotograma creado y presionamos F9 y escribimos a continuación el código:
stop();
//este código se ejecutará contínuamente:
_root.onEnterFrame = function() {
//creamos un objeto Date con la fecha y hora actuales
fecha = new Date();
//extraemos del objeto la hora, minuto y segundo actuales
hora = fecha.getHours();
minuto = fecha.getMinutes();
segundo = fecha.getSeconds();
//establecemos la rotación de las manecillas, calculando el ángulo
//360 grados entre 12 horas, son 30 grados por hora.
//pero la manecilla de las horas va avanzando cada minuto, así que
//a esto hay que sumarle: 30 grados entre 60 minutos, que son 0.5
manecillaHoras._rotation = hora*30+minuto*0.5;
//360 grados entre 60 minutos, son 6 grados por minuto
manecillaMinutos._rotation = minuto*6;
//con los segundos, igual que con los minutos
manecillaSegundos._rotation = segundo*6;
};
Ahora solo nos resta probar la pelicula flash presionando Ctrl+Enter.
Como de costumbre les dejo la descarga de la Pelicula Flash y la Demo. Ante cualquier duda o sugerencia dejanos en los comentarios. Cordiales Saludos.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
No hay comentarios todavía.
Deja un Comentario