Tutorial FLASH - Crear una cuenta atrás con ActionScript 3.0.

Versión Flash: CS3 y superiores   |   Compatible con ActionScript 3.0   |   Nivel: Medio   |   Hits: 60424

En este tutorial vamos a explicar como crear con ActionScript 3.0 una cuenta atrás progresiva que indica el tiempo que queda hasta una fecha dada.

COMO HACERLO.
El código va en el primer y único fotograma y no se necesitan archivos ni clases adicionales. El usuario introducirá la fecha final de la cuenta atrás en los campos de texto de entrada que hay en el escenario. La cuenta atrás se creará en un sprite vacío llamado contador_sp. Dentro de este sprite crearemos los dígitos a partir de la clase celdaMC que es una subclase de la clase Movieclip.

celdaMC está en la librería con estas opciones de vinculación:

Este sistema es el equivalente a los clips con vinculación de AS 2.0.

La primera parte del código define las variables básicas para el funcionamiento del ejemplo. Se definen entre otras cosas: la posición del contador, la separación entre dígitos, un array que almacenará los dígitos y los objetos Date necesarios.

Cuando pulse en el botón iniciar_btn se ejecutará la función empezarCuenta, donde, en primer lugar, se comprobará que la fecha introducida sea válida y que sea posterior a la fecha actual.

Esta comprobación la realizaremos con la ayuda de la función esFechaValida.

Después se invoca la función crearContador que como su propio nombre indica crea el contador y lo deja listo con los clips de los dígitos necesarios para mostrar la cuenta atrás.

Por último repetimos en el tiempo la ejecución de la función actualizarContador empleando una función setInterval.

A continuación os mostramos el código completo comentado en ActionScript 3.0. Al final del tutorial podeís descargar el archivo fla del ejemplo.

// coordenadas donde se ubicará el contador
var x0:Number = 382;
var y0:Number = 104;
// variable que almacena la fecha final
var fecha_final:Date;
// variable que almacena la fecha actual
var ahora:Date = new Date();
// variable para actualizar la cuenta con setInterval
// (dentro de función empezarCuenta)
var intervalo:uint;
// matriz donde almaceno los movieclips de los dígitos
var digitos_array:Array=new Array();
// variables que indican la separación entre
// digítos y entre grupos de dígitos
var separacion_digitos:uint = 17;
var separacion_grupos:uint = 10;
var contador_sp:Sprite = new Sprite();
contador_sp.x = x0;
contador_sp.y = y0;
addChild (contador_sp);
// ocultamos de inicio los rótulos
lDias_mc.visible = false;
lHoras_mc.visible = false;
lMin_mc.visible = false;
lSeg_mc.visible = false;
quedan_mc.visible = false;
// asignamos al botón del iniciar la
// función empezarCuenta, que es la que
// inicia el proceso
iniciar_btn.addEventListener (MouseEvent.CLICK, empezarCuenta);
// y aquí la función en s
function empezarCuenta (e):void {
  // primero comprobamos
  // si la fecha introducida es válida
  if (esFechaValida()) {
    trace("entro");
    // creamos el contador con las posiciones de dígitos
    // necesarias para mostrar la cuenta atrás según la
    // fecha introducida por el usuario
    crearContador ();
    // detenemos la ejecución repetida de la funcion
    // actualizarControlador, si existiese
    clearInterval (intervalo);
    // ejecutamos la función actualizarControlador
    // cada 200 milisegundos, es decir 5 veces por segundo
    intervalo = setInterval(actualizarContador, 200);
  } else {
    trace("no entro");
    // si la fecha introducida no es válida paramos
    // la ejecución y reseteamos el contador a ceros
    clearInterval (intervalo);
    if (digitos_array.length >= 1) {
      for (var j:Number = 0; digitos_array[j]; j++) {
        digitos_array[j].num_txt.text = "0";
      }
    }
  }
}
// en esta función calculamos la diferencia entre
// la fecha introducida por el usuario y la fecha
// actual, para poder determinar el número de dígitos
// necesarios
function crearContador ():void {
  // inicializamos el array que contendrá los
  // clips de los dígitos
  digitos_array = new Array();
  // eliminamos los digitos que pueda haber dentro
  // del contador
  resetClip (contador_sp);
  // mostramos los rótulos
  quedan_mc.visible = true;
  lHoras_mc.visible = true;
  lMin_mc.visible = true;
  lSeg_mc.visible = true;
  // variable auxiliar para posicionar
  // horizontalmente los clips de los dígitos
  var proximaPosicionX:uint = 0;
  // diferencia en segundos entre las dos fechas
  var diffSegundos:uint = Math.round((fecha_final.getTime() - ahora.getTime()) / 1000);
  // obtengo el número de días
  var numDias:uint = Math.floor(diffSegundos / 86400);
  // si el número de días es mayor que cero
  if (numDias > 0) {
    lDias_mc.visible = true;
    lDias_mc.x = x0;
    var numDias_str:String = numDias.toString();
    // si el número de días es de dos o más cifras
    // añadimos al clip contador cada uno de los clips
    // de los dígitos
    if (numDias_str.length > 1) {
      for (var i:Number = 0; i < numDias_str.length; i++) {
        var clipCelda:MovieClip =new celdaMC();
        // posicionamos el dígito
        clipCelda.x = proximaPosicionX;
        proximaPosicionX += separacion_digitos;
        contador_sp.addChild (clipCelda);
        // añadimos el dígito a la matriz
        digitos_array.push (clipCelda);
      }
    } else {
      // si es de una cifra sólo, añadimos un dígito con el cero antes
      var clipDia0:MovieClip = new celdaMC();
      clipDia0.x = proximaPosicionX;
      proximaPosicionX += separacion_digitos;
      contador_sp.addChild (clipDia0);
      digitos_array.push (clipDia0);
      // añadimos la cifra del número de días
      var clipDia1:MovieClip = new celdaMC();
      clipDia1.x = proximaPosicionX;
      proximaPosicionX += separacion_digitos;
      contador_sp.addChild (clipDia1);
      digitos_array.push (clipDia1);
    }
    // etiqueta dias
    proximaPosicionX += separacion_grupos;
  } else {
    lDias_mc.visible = false;
  }
  // calculamos el número de horas
  var restoHoras:Number = Math.round(diffSegundos % 86400);
  var numHoras:Number = Math.floor(restoHoras / 3600);
  // creamos los digitos de las horas de igual modo
  var clipHora0:MovieClip = new celdaMC();
  clipHora0.x = proximaPosicionX;
  lHoras_mc.x = clipHora0.x + x0;
  proximaPosicionX += separacion_digitos;
  contador_sp.addChild (clipHora0);
  digitos_array.push (clipHora0);
  var clipHora1:MovieClip = new celdaMC();
  clipHora1.x = proximaPosicionX;
  proximaPosicionX += separacion_digitos;
  contador_sp.addChild (clipHora1);
  digitos_array.push (clipHora1);
  proximaPosicionX += separacion_grupos;
  // creamos los digitos de los minutos de igual modo
  var restoMinutos:Number = Math.round(restoHoras % 3600);
  var numMinutos:Number = Math.floor(restoMinutos / 60);
  lMin_mc.visible = true;
  var clipMin0:MovieClip = new celdaMC();
  clipMin0.x = proximaPosicionX;
  lMin_mc.x = clipMin0.x + x0;
  proximaPosicionX += separacion_digitos;
  contador_sp.addChild (clipMin0);
  digitos_array.push (clipMin0);
  var clipMin1:MovieClip = new celdaMC();
  clipMin1.x = proximaPosicionX;
  proximaPosicionX += separacion_digitos;
  contador_sp.addChild (clipMin1);
  digitos_array.push (clipMin1);
  proximaPosicionX += separacion_grupos;
  // creamos los digitos de los segundos de igual modo
  var numSegundos:Number = Math.round(restoMinutos % 60);
  lSeg_mc.visible = true;
  var clipSeg1:MovieClip = new celdaMC();
  clipSeg1.x = proximaPosicionX;
  lSeg_mc.x = clipSeg1.x + x0;
  proximaPosicionX += separacion_digitos;
  contador_sp.addChild (clipSeg1);
  digitos_array.push (clipSeg1);
  var clipSeg2:MovieClip = new celdaMC();
  clipSeg2.x = proximaPosicionX;
  contador_sp.addChild (clipSeg2);
  digitos_array.push (clipSeg2);
}
// esta es la funcion que se ejecuta a intervalos regulares
// de tiempo y que actualiza los dígitos del contador
// con los nuevos datos de la cuenta atrás
function actualizarContador ():void {
  var contador_str:String = "";
  var ahora_actualizado:Date = new Date();
  var diffSegundos:Number = Math.round((fecha_final.getTime() - ahora_actualizado.getTime()) / 1000);
  var numDias:Number = Math.floor(diffSegundos / 86400);
  if (numDias > 0) {
    contador_str += dosDigitos(numDias);
  }
  var restoHoras:Number = Math.round(diffSegundos % 86400);
  var numHoras:Number = Math.floor(restoHoras / 3600);
  contador_str += dosDigitos(numHoras);
  var restoMinutos:Number = Math.round(restoHoras % 3600);
  var numMinutos:Number = Math.floor(restoMinutos / 60);
  contador_str += dosDigitos(numMinutos);
  var numSegundos:Number = Math.round(restoMinutos % 60);
  contador_str += dosDigitos(numSegundos);
  for (var j:Number = 0; digitos_array[j]; j++) {
    digitos_array[j].num_txt.text = contador_str.charAt(j);
  }
}
// funciones auxiliares --------------------
// para comprobar que la fecha introducida es válida y posterior a la actual
function esFechaValida ():Boolean {
  fecha_final = new Date(2000 + uint(anio_txt.text), uint(mes_txt.text) - 1, uint(dia_txt.text));
  //trace(fecha_final.toString());
  if (uint(dia_txt.text)<=31 && uint(mes_txt.text)<=12 && fecha_final > ahora) {
    trace("si");
    return true;
  } else {
    trace("no");
    return false;
  }
}
// función para añadir un 0 delante en el
// caso de que sólo tenga una cifra
function dosDigitos (valor:uint):String {
  if (valor > 9) {
    return valor.toString();
  } else {
    return ("0" + valor.toString());
  }
}
//
function resetClip (clip:DisplayObjectContainer):void {
  while (clip.numChildren > 0) {
    clip.removeChildAt (0);
  }
}

En este enlace está a vuestra disposición el archivo fla para Flash CS3.