Comunidad de diseño web y desarrollo en internet online

Lector de noticias XML en Flash con imagenes

Veremos como crear un sencillo visualizador de noticias haciendo uso de un documento xml e imágenes jpg, para lo cual utilizaremos del objeto XML.

Requerimientos

  • Software: Macromedia Flash MX 2004 o una versión superior.
  • Conocimientos: Conocimientos previos de programación, nociones de documentos xml y DOM y conceptos básicos de programación ActionScript 2.0.
  • Archivos base: para este tutorial se utilizaran los siguientes archivos:
    • El archivo xml (noticias.xml): Este documento se utiliza para almacenar la información de las noticias (titulo, resumen y nombre de la imagen a mostrarse por cada noticia).
    • Imágenes jpg: Estas son las imágenes que se van a mostrar por cada noticia (intel.jpg, nave.jpg y vaticano.jpg)

¿Cómo funciona?

En el ejemplo tenemos tres noticias. Cuando el archivo de Flash se ejecuta, se carga la primera noticia (titulo, mensaje e imagen) y posteriormente podemos pasar a la siguiente y/o anterior haciendo uso de los botones ubicados en la parte superior (flechas de color verde).

Los textos (titulo y mensaje) y el nombre de la imagen, son recuperados del archivo noticias.xml, seguidamente la imagen es cargada de forma externa (archivos jpg).

Interfaz en flash

Crear la interfase de usuario en una capa llamada “elementos”: (dos botones, un clip de película y una cuadro de texto):

A) Botones de navegación: son utilizados para navegar por las noticias cargadas desde el documento xml (son dos copias de una instancia y una de ellas reflejada). Es importante asignar a ambos elementos el nombre de instancia: anterior_btn y siguiente_btn

Propiedades de instancias:

B) Clip de película: es utilizado como soporte para mostrar o cargar en el la imagen correspondiente a cada noticia. (nombre de instancia pantalla_mc)

Propiedades de instancia:

C) Cuadro de Texto dinámico: es utilizado para mostrar el titulo y resumen de la noticia previamente formateada:

Propiedades de instancia:

Nota: Para este tutorial es importante guardar todos los archivos en una misma carpeta así también como verificar los nombres de instancias de cada elemento.

Código

Colocar el código ActionScript en una capa llamada “codigo” o "Acciones". Pon atención a los comentarios, ahi está la explicación del código:

//Permite caracteres tradicionales como letras con tilde la ñ, etc.
System.useCodepage = true;
//Se declara la variable indice de tipo número (utilizada para referencia la noticia a mostrar)
var indice:Number;
//Se declara la variable noticias_xml de tipo XML (utilizada para almacenar el documento xml)
var noticias_xml:XML;
/*
Funcion cargarDatos (utilizada para cargar y cambiar las noticias en el documento)
Esta función recibe un parámetro "_indice" que corresponde al elemento noticia  a mostrar
*/
function cargarDatos(_indice:Number) {
        //Se inicializan variables utilizadas para almenar los datos de una noticia
        var fecha:String;
        var titulo:String;
        var mensaje:String;
        var imagen:String;
        //Recuperando datos del objeto xml
        //Se accede al primer elemento [noticia] y se recupera la fecha desde el atributo [fecha]
        fecha = noticias_xml.firstChild.childNodes[_indice].attributes.fecha;
        //Se accede al primer hijo de elemento [noticia] y se recupera al valor del primer elemento de [titulo]
        titulo = noticias_xml.firstChild.childNodes[_indice].firstChild.firstChild.nodeValue;
        //Se accede al segundo hijo de elemento [noticia] y se recupera el valor del primer elemento de [mensaje]
        mensaje = noticias_xml.firstChild.childNodes[_indice].firstChild.nextSibling.firstChild.nodeValue;
        //Se accede al último hijo de elemento [noticia] y se recupera el valor del primer elemento de [imagen]
        imagen = noticias_xml.firstChild.childNodes[_indice].lastChild.firstChild.nodeValue;
        //Mostrando los datos recuperados en el cuado de texto mensaje_txt y cargando la imagen en pantalla_mc
        _root.mensaje_txt.htmlText = "";
        _root.mensaje_txt.htmlText += "<p align='center'><font color='#006633' size='12'><b>"+titulo+"</b></font></p>";
        _root.mensaje_txt.htmlText += "<p><font size='10'>"+mensaje+"</font>";
        _root.mensaje_txt.htmlText += "<font color='#666666' size='10'>Publicado: "+fecha+"</font></p>";
        //Cargado la imagen JPG externa en el clip pantalla_mc con el valor recuperado del objeto xml
        _root.pantalla_mc.loadMovie(imagen);
}
//Función que permite avanzar a la [noticia] siguiente almacenada en el objeto xml
siguiente_btn.onPress = function() {
        //comprobando si existe el siguiente elemento [noticia]
        if (noticias_xml.firstChild.childNodes[indice+1] != null) {
                //retringue  a avanzar solo si hay una [noticia] siguiente
                indice++;
                //incrementado en uno el indice
                cargarDatos(indice);
                //recuprando y mostrando los datos y la imagen en la pantalla
        }
};
//Función que permite retroceder a la noticia anterior almacenada en el objeto xml      
anterior_btn.onPress = function() {
        //comprobando si existe una elemento [noticia] anterior
        if (noticias_xml.firstChild.childNodes[indice-1] != null) {
                //retringue  a avanzar solo si hay una [noticia] anterior
                indice--;
                //reducciendo en uno el indice
                cargarDatos(indice);
                //recuprando y mostrando los datos y la imagen en la pantalla
        }
};
//Inicializaciones
indice = 0;
//inicializando indice en 0 para mostrar la primera noticia
//creando el objeto noticias_xml de typo XML
noticias_xml = new XML();
//Permite que el objeto XML ignore los espacios en blanco entre marca y marca del documento XML
noticias_xml.ignoreWhite = true;
//El método load() permite cargar el documento xml "noticias.xml"
noticias_xml.load("noticias.xml");
//El evento onLoad de activa cuado se haya cargado el documento noticias.xml
noticias_xml.onLoad = function() {
        //Se llama a la funcion cragarDatos para mostar la primera noticia (esto por la variable indice en 0)
        cargarDatos(indice);
};

Una vez terminado y con los archivos arriba mencionados (XML e Imagenes) en la misma carpeta de nuestra pelicula .FLA, ejecutamos usando CTRL+ENTER y podemos verlo en funcionamiento.

¿Cómo mejorarlo?

Como se comento al inicio este es un ejemplo sencillo, lo ideal sería que a partir de este ejemplo podamos adicionar mejoras, como por ejemplo: un pre cargador para las imágenes, hacer que las noticias e imágenes cambien de forma automática pasado un tiempo, etc.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate