Por: jmontoya + Otros tutoriales de jmontoya + 5 de Agosto del 2006
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.
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).
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.
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.
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.
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
