ProInf.net

Material utilizado

• Software privativo
  • Adobe Flash
  • Adobe Photoshop
• Sofware libre
  • Navegador web Mozilla Firefox
  • Cliente FTP Filezilla
  • Editor de textos Notepad++

contador.xml

Este fichero se utilizará para almacenar el número de visitas.

1. Crear el siguiente fichero con el editor de textos y guardarlo como contador.xml

   <contador valor="0"></contador>

2. Subir este fichero a la raíz del servidor web con el cliente FTP y una vez subido otorgarle permisos de lectura y escritura
   

   

contador.fla y contador.swf

Este fichero se utilizará para mostrar el número de visitas

1. Crear una nueva película en Flash llamada contador.fla. Cambiar el tamaño de la película a 300×50 píxeles desde la ventana Propiedades.
2. Nombrar contador a la primera capa. Insertar en dicha capa un texto con la herramienta Texto y ajustar las siguientes propiedades:

   Tipo de texto:	Texto dinámico
   Variable asociada:	contador
   Es seleccionable:	no
   Fuente:	Tahoma
   Tamaño de la fuente:	30 puntos
   Caracteres embebidos:	Sólo números
   Ancho:	300 píxeles
   X:	0 píxeles
   Y:	0 píxeles

   Ver imagen de ejemplo

3. Crear una nueva capa llamada acciones. Hacer clic en el primer fotograma de dicha capa. Pulsar la tecla [F9] para que aparezca la ventana Acciones. Insertar el siguiente código ActionScript:
   

   var contador = 0;
var obj_xml = new XML ();
obj_xml.onLoad = function(success) {
  if (success && this.hasChildNodes()) {
    var raiz = obj_xml.firstChild;
    if (raiz.nodeName.toLowerCase() == "contador") {
      contador = raiz.attributes.valor;
    }
  }
  else {
    trace ("¡Falta contador.xml!");
  }
  obj_xml = null;
};
obj_xml.load ("contador.xml");

4. Pulsar las teclas [Control] y [Intro] para generar el fichero contador.swf. Subir dicho fichero al servidor web mediante el programa cliente FTP.

contador.php

Este fichero hace referencia a la película Flash y contiene el código PHP que incrementa el contador.

1. En el programa Flash abrir el fichero contador.fla
2. Pulsar las teclas [Control]+[Maýusculas] + [F12] para entrar en la Configuración de la publicación. Cambiar la versión del Flash generado a Flash player 7. De esta forma el fichero contador.swf resultante será más compatible con otros navegadores web.
3. Pulsar las teclas [Maýusculas] + [F12] para publicar la película y generar el fichero contador.html.
4. Cerrar el programa Flash.
5. Renombrar el fichero contador.html a contador.php
6. Con el editor de textos introducir el siguiente código PHP en el inicio de la página contador.php. Este código lee el contador actual de visitas del fichero contador.xml, lo incrementa en una unidad y lo guarda en el fichero.

   <?php  
  $contador = 0;
  if ($f = fopen("contador.xml", "r+")) {
    // Incrementar el contador en una unidad
    $bafer = fgets($f, 50);
    $primero = strpos($bafer, "\"");
    $ultimo = strrpos($bafer, "\"");
    $numero = substr($bafer, $primero + 1, $ultimo - $primero - 1);
    $contador = (int)$numero;
    $contador++;
    rewind ($f);
    fwrite ($f, "<contador valor=\"" . $contador . "\"></contador>");
    fclose ($f);
  }
?>

7. Subir el fichero al servidor web mediante el programa cliente FTP.

Probar el funcionamiento del contador

1. En el navegador web ir a la dirección de nuestro dominio y mostrar el fichero contador.php
   

   http://www.midominio.com/contador.php

2. Pulsar el botón actualizar o recargar la página para ver si el contador se incrementa.
3. Podemos ver la página de ejemplo del contador funcionando.

Película madre: index.fla, index.swf e index.php

La película index.fla vendría a ser nuestra película principal de Flash que deseamos mostrar en la web. Queremos que esta película contenga el contador.swf.

1. En esta película insertamos un símbolo clip de película llamado contador.
2. Este símbolo lo arrastramos de la biblioteca a la Escena1 y le damos el nombre de instancia contador en la ventana Propiedades.
3. Insertamos una capa llamado acciones con el siguiente código ActionScript:
   

   contador.loadMovie("contador.swf");

4. Pulsar las teclas [Maýusculas] + [F12] para publicar la película y generar los ficheros index.swf e index.html.
5. Renombramos el fichero index.html por index.php.
6. En el fichero index.php añadimos el código php que incrementa el contador.
7. Subimos por FTP los ficheros index.swf e index.php
8. Probamos el sitio yendo a nuestro dominio con el navegador web.
9. Podemos ver la página de ejemplo del contador embebido en la página index.

Ficheros generados

• contador.xml
• contador.fla, contador.swf y contador.php
• index.fla, index.swf e index.php

Todos los ficheros comprimidos en uno solo: contador.7z

Apéndice: Muchos más contadores

Modificando el fichero original contador.fla y con la ayuda del fichero digitos.psd de Photoshop podemos crear muchas versiones distintas del contador.

1. La imagen de los dígitos está realizada en Photoshop.
   1. Con la herramienta Sectores troceamos la imagen en sus distintos dígitos.
   2. Luego con la orden Guardar para la web exportamos una imagen por cada dígito troceado. El formato de las imágenes exportado es PNG de 24 bits con transparencia.
2. En el Flash
   1. Importamos a la biblioteca las diez imágenes de los dígitos creados previamente con Photoshop.
   2. Creamos un clip de película llamado digito con un stop al principio que contiene 10 fotogramas clave, uno por cada imagen.
   3. Luego creamos un clip de película llamado contador que contiene ocho instancias del clip digito llamadas mc_digito1, mc_digito2, etc.
   4. En la Escena1 insertamos una instancia de contador llamada mc_contador y en una capa llamada Acciones insertamos el siguiente código ActionScript:
      

   var contador = 0;var obj_xml = new XML ();
obj_xml.onLoad = function(success) {
  if (success && this.hasChildNodes()) {
    var raiz = obj_xml.firstChild;
    if (raiz.nodeName.toLowerCase() == "contador") {
      contador = raiz.attributes.valor;
      for (var digito=1; digito<=8; ++digito) {
        mc_contador["mc_digito" + digito].gotoAndStop(contador%10 + 1);
        contador = int(contador/10);
      }
    }
  }
  else {
    trace ("¡Falta Contador.xml!");
  }
  obj_xml = null;
};
obj_xml.load ("contador.xml");

• contador_00.fla y contador_00.swf
• contador_01.fla y contador_01.swf
• contador_02.fla y contador_02.swf
• contador_03.fla y contador_03.swf
• contador_04.fla y contador_04.swf