Menu dinámico en Flash con ActionScript y XPath

3 05 2007

Hace algunos días, modifique un script realizado en Macromedia Flash de un menú estilo acordeón, desarrollado por un experto en Flash y publicado en un sitio dedicado a proveer imagenes, videos y animaciones Flash. Por razones de derechos de autor, no publicaré dicho script. Sin embargo, si me atrevo a estudiar su funcionamiento y a publicar los resultados a la comunidad.

Este tutorial, describirá la administración de archivos XML y algunas propiedades interesantes que el autor del script original utilizó para generar una estructura dinámica. A continuación describo los pasos en el código:

System.useCodepage = true;
import mx.xpath.XPathAPI;

xmlDocument = "dotpress.xml";

var xmlParser:XML = new XML();
    xmlParser.load(xmlDocument);
xmlParser.ignoreWhite = true;

La primera línea indica que el modo de codificación de caracteres será UTF-8. La segunda, importa la API de manejo XPath. XPath es una descripción de lenguaje XML, aprobada por la W3C para el manejo de archivos XML. La particularidad de XPath es que, como su nombre lo indica, el parseo de los elementos es parecido a la estructura de archivos (paths), en donde los nodos pasan a ser una especie de carpetas.

Posteriormente se crea el objeto de tipo XML y se carga el documento. El atributo ignoreWhite le indica al parser que ignore nodos con valores vacíos.

Hasta este punto todo será igual para cualquier estructura de menu. Ahora bien, para este ejemplo consideremos una variante de archivo XML, parecida al siguiente ejemplo:

<?xml version = "1.0" encoding = "iso-8859-9"?>
<dotpress>
    <section caption = "3D" />
    <section caption = "Web Development" href = "/web-development/">
        <subsection caption = "CSS" href = "css/" />
        <subsection caption = "Flash" href = "flash/" >
            <subsection caption = "ActionScript" />
        </subsection>
        <subsection caption = "HTML" href = "html/" />
    </section>
</dotpress>

Una estructura de menu, podría describir desde una estructura de un nivel hasta una estrucutura más compleja de multiniveles. Todo dependería entonces de nuestra habilidad para crear los controles desde Flash y saber manejar los eventos y objetos. Ahora, viene el momento de obtener el primer nivel de nodos del archivo XML..

xmlParser.onLoad = function(xmlLoaded) {
    if (xmlLoaded) {
        xmlDotPress = mx.xpath.XPathAPI.selectNodeList(
                      xmlParser.firstChild, "dotpress/section");
    }
}

El atributo xmlLoaded es un valor booleano que indica que el documento ha sido cargado. De ser así, el contenido de todos los nodos hijos del primer elemento (en este caso el nodo dotpress) será volcado sobre cualquier variable que nosotros queramos, através de la funcion selectNodeList que recibe dos argumentos: la referencia del nodo y la ruta XPath.

Una vez obtenido los datos, la variable a la que se volcó la información puede ser tratada como un Array de objetos, con varias propiedades y funciones que a continuación describo:

// <– Devuelve la longitud del Arreglo
xmlDotPress.length;

// <– Devuelve el valor de determinado atributo
xmlDotPress.attributes.attrib_name;

// <– Contiene la referencia del arreglo de objetos "hijos"
xmlDotPress[_index].childNodes;

Estas son las referencias principales de funciones para manipulación de objetos utilizando la API de XPath para ActionScript. En el siguiente artículo de esta serie, me centraré en las funciones de manipulación de los objetos en Flash con ActionScript.

Para más información acerca de la API de XPath para ActionScript puede ver la documentación de Flash o ver el artículo en: http://www.macromedia.com/go/xpathapi.

Articulos Relacionados:


Acciones

Information

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: