Tutorial completo de XML en Flash MX 2004

Autor: freddie® | Otros tutoriales de freddie®

5 de Abril del 2004

Infomación adicional:

freddie®

Mensajes: 242
Tutoriales: 9
Ejemplos(.FLA): 4

Ejemplo del tutorial

Archivos del tutorial
¿Preguntas de este tutorial?

Introducción
XML se convirtió con éxito en el estándar de las comunicaciones por Internet; lo que antes se
transmitía en formatos propietarios ahora es fácilmente interoperable gracias al lenguaje XML.
XML esta presente en forma de sitio web cuando descargamos una pagina que cumpla con los
estándares (XHTML) o cuando usamos un servicio web, como Google API o el traductor
Babelfish de Altavista, por debajo esas aplicaciones se comunican con otras por medio de
XML; inclusive la ultima versión de la suite de Microsoft, Office 2003, usa XML (Aunque no el
estándar, sino uno creado por ellos mismos) para el formato de sus documentos de Word,
Excel y demás.
Este tutorial espera cubrir la introducción a los conceptos de XML y su manejo en Flash MX
2004.

Requerimientos
Conocimientos previos de programación
Manejo básico de Flash MX 2004
Este tutorial fue hecho con " Macromedia Flash MX 2004 Professional" y en ese formato se
incluyen los ejemplos y demás archivos.
Conocimientos de HTML, de preferencia (Pero no obligatoria) saber XHTML
Nota: Para aquellos que ya conozcan del lenguaje XML y sepan sus ventajas y fundamentos o
quienes quieres directamente entrar al tema, pueden iniciar el tutorial sin ningún problema
desde "Cargando XML dentro de Flash".
Si eres principiante en XML y quieres saber que es y como se aplica en las comunicaciones en
Internet y con Flash, es recomendable que leas todo el tutorial.

Índice
1. ¿Que es XML?
2. Que ventajas conlleva trabajar con XML; XML vs. LoadVars
3. Cargando XML dentro de Flash

¿Que es XML?
XML o eXtensible Markup Language (Lenguaje extensivo de etiquetas), es un lenguaje basado
en las mismas teorías de HTML, con etiquetas que abren y cierran y un contenido en ellas,
estas etiquetas pueden tener atributos especiales que las diferencien de otras etc!.
¿Que es lo que diferencia a XML de HTML?, ¿Para que usar XML si ya HTML existe?, ¿Mis
paginas web se verán mejor en XML que en HTML?.
La respuesta a esas preguntas es simple, HTML solo tiene que ver con XML en cuanto a
sintaxis se refiere, porque ambos están pensados para cosas distintas; HTML es un lenguaje
de modelado de documentos pensado para mostrar paginas web en un navegador sea cual
sea, en cambio, XML es un lenguaje de transferencia de información, pensado para crear una
sintaxis única que pudiera usar cualquier programa para leer archivos de otro, y que fuera
estándar.
No podrás crear paginas web con XML, aunque XHTML es una derivación de XML y con el si
puedes, ya que, combinado con CSS, crea paginas web usando la misma teoría de HTML, pero
en vez de colocar cualquier etiqueta de apariencia gráfica (Colores, fuentes) dentro del
archivo .html, lo hacen 100% en CSS; una prueba de una pagina así es la misma Cristalab :D.
En síntesis XML nos sirve para cualquier tipo de transferencia de datos que queramos hacer,
sobre todo si estamos conectando bases de datos entre varias aplicaciones; por ejemplo, una
base de datos de revistas; puedo pasarle a Flash un XML con los datos registrados en mi base
de datos de una revista cualquiera, así:
<revista>
<codigo>0220357</codigo>
<nombre>Revista Dinero</nombre>
<titulo>La promesa de las instituciones globales</titulo>
<precio>5200</precio>
<numero>12</numero>
</revista>
Hay una etiqueta madre de todas llamada "revista", dentro de esta etiqueta encontramos otras
que componen la descripción básica de nuestra revista, como un código interno, el nombre de
la revista, el titulo principal, el precio y el numero de esa edición; estos datos son fáciles de leer
y manejar para nosotros; sabemos bien donde empieza y donde termina el código por sus
etiquetas de apertura y de cierre, además usamos nuestro propio lenguaje para definir las
etiquetas.
Si miráramos este ejemplo en forma de un árbol, quedaría de la siguiente manera:

Siendo la raíz la etiqueta "Revista" y todas sus subetiquetas internas se convierten en nodos;
la información de cada etiqueta es simplemente información de un nodo.

Que ventajas conlleva trabajar con XML; XML vs. LoadVars

Esta es una de las preguntas del examen de certificación "Flash MX 2004 Developer", que
cobra especial importancia al decidirnos por que tipo de objeto usaremos al conectarnos con
fuentes externas de datos desde Flash.
Para los que hayan leído el tutorial completo del objeto LoadVars, habrán notado su
simpleza en la composición de los archivos, su fácil manejo y su rápida adaptación a un
proyecto, manejando otros lenguajes intermedios como ASP o PHP para conexiones a bases
de datos, el problema viene cuando queremos comunicar datos complejos o datos
estructurados (Verbosity Data), para estos casos, XML es la solución.

LoadVars es el objeto adecuado cuando los datos que queremos cargar son simples y no
tienen mayor estructuración; por ejemplo, si queremos que en el home de nuestra web
aparezca en Flash una "frase del día" de una base de datos de frases será mucho mas
conveniente el uso de LoadVars, ya que es solo un dato que cargaríamos fácilmente; sí en
cambio, necesitamos obtener todos los datos de un usuario para una pagina de "Perfil del
usuario", que requiera la foto del usuario, el nombre, la contraseña, algunos datos personales,
etc!, nos será difícil poder definir esto en un archivo de texto simple, mientras que con XML y su
forma de organizarlo todo en forma de árbol (como vimos arriba) seria muy sencillo lograrlo; a
esto es a lo que se le conoce como datos estructurados o "Verbosity Data".

Así que si queremos hacer una transferencia de datos considerable (como al conectarnos con
una base de datos) lo mejor siempre será usar XML y delegar a LoadVars para los envíos de
formularios y otro tipo de cosas mucho mas sencillas (Para mas información ver este tutorial).

Cargando XML dentro de Flash

Entrando en materia, Flash usa dentro de ActionScript el objeto XML para la carga de este tipo
de archivos, sus métodos de carga son similares a los del objeto Loadvars.
Cargaremos un XML dentro de Flash y haremos que aparezca en campos de texto separados.

Tendremos dos archivos, uno llamado XMLBase.fla que será nuestra película y otro llamado
texto.xml que son los datos que cargaremos a Flash.
Este debe ser el contenido de texto.xml:
<mensaje>
<asunto>Aviso de suspensión</asunto>
<correo>webmaster@cristalab.com</correo>
<cuerpo>Su servicio sera suspendido a partir de la fecha</cuerpo>
<remitente>servicios@empresa.com</remitente>
</mensaje>
Como ven, nuestro XML da apariencia de que sera un mensaje de correo electrónico guardado
que luego cargaremos a Flash, para, por ejemplo, colocar dentro de una aplicación de correo.

Ahora, una pequeña explicación de XML; como pudieron ver en el árbol de arriba, los objetos
XML se organizan desde una raíz y a partir de ella debemos acceder; cuando creamos un
objeto XML, este será siempre la raíz del árbol y por medio de sus propiedades y métodos
accederemos a las ramas inferiores.
Tomando como punto de partida el XML de este ejemplo, así seria su relación con un objeto
XML:

Explicación gráfica del objeto XML relacionado con un archivo XML

La raíz siempre será el objeto XML, tiene una propiedad para acceder dentro de el llamada
firstChild (Primer Hijo), esta nos devuelve la primera raíz del objeto, ya que un objeto XML
puede tener varias (aunque no es ni común ni recomendado); en nuestro caso nos devolverá
todo el árbol que cuelga de <mensaje>.
El árbol mensaje tiene 4 ramas, estas son colocadas en un Array (O Matriz) llamado
childNodes (Nodos hijos), que viene indexado desde cero como se ve en la gráfica. Cada una
de estas ramas es otro objeto XML, pero es mas conveniente llamarlo un XMLNode (Nodo
XML), aunque tiene las mismas propiedades y métodos de un objeto XML.
Cuando accedemos a uno de los objetos del array de ramas, encontraremos que al igual que al
principio podemos acceder a su raíz por medio de firstChild.
Lo que nos interesa es el contenido de ese nodo, podemos conocerlo por medio de su
propiedad nodeValue (Valor del nodo).
Si el nombre de nuestro objeto XML fuera objXML, el código para saber el valor de la rama
<ASUNTO> seria:
var valor = objXML.firstChild.childNodes[0].firstChild.nodeValue;
trace(valor);
Lo que mostraría en pantalla, si nuestro archivo fuera el XML de arriba, "Aviso de
suspensión"

Ahora haremos la interfaz de Flash que constara de :

• Un campo de texto de tipo TextInput (El componente) llamado correo_txt

• Un campo de texto de tipo TextInput llamado asunto_txt
• Un campo de texto de tipo TextInput llamado remitente_txt
• Un campo de texto de tipo TextArea llamado cuerpo_txt
• Un campo de texto de tipo Dynamic Text llamado mensaje_txt

Cuya apariencia quedara similar a esta:

Al dar click sobre el botón"CARGARxml", nuestro código deberá abrir y mostrar en pantalla los
datos del XML seccionados en cada uno de los campos de texto. Asi, al dar click sobre el botón
se llamara a una función que cargue el XML. Este es el código que debe ir en el botón:
on (release) {
//Llamamos a la función de carga del archivo XML
cargarXML();
}
Ahora, en el primer keyFrame colocaremos el siguiente código:
//Declara la variable "obj_xml" como un objeto XML
var obj_xml:XML = new XML();
/*Esta linea es EXTREMADAMENTE necesaria
Es la que nos permite colocar espacios entre etiquetas
Sin ella, tendriamos que mantener completamentepegado nuestro XML
Y se parsearia mal dentro de Flash
*/
obj_xml.ignoreWhite = true;
//Función que se ejecuta en el momento en el que Flash cargue el XML
obj_xml.onLoad = function(exito) {
//La variable exito sera "true" si se cargo bien y "false" si
hubo
//algun error
if (exito) {
//Le asigna al campo del asunto la primera rama del
árbol, como veran la #0
asunto_txt.text =
obj_xml.firstChild.childNodes[0].firstChild.nodeValue;
//Asigna al campo de destino el valor de la segunda
rama, la #1
destino_txt.text =
obj_xml.firstChild.childNodes[1].firstChild.nodeValue;
//Asigna al campo de cuerpo el valor de la tercera
rama, la #2
cuerpo_txt.text =
obj_xml.firstChild.childNodes[2].firstChild.nodeValue;
//Asigna al campo remitente el valor de la cuarta rama,
la #3
remitente_txt.text =
obj_xml.firstChild.childNodes[3].firstChild.nodeValue;
} else {
//Muestra un mensaje de error en caso de que algo
fallara
 cuerpo_txt.text = "Error";
}
};
//Esta es la función que llama el botón
function cargarXML() {
//Invoca a la función "load" del objeto XML, pasandole por
parametro
//La ruta de nuestro archivo XML
obj_xml.load("texto.xml");
}
Solo basta dar click al botón"CARGARxml" y veremos como Flash nos muestra de la manera
en que lo programamos, los datos de nuestro archivo XML:

Resultado Final después de dar click al botón

Conclusión
Cargamos a un nivel básico un XML dentro de Flash, que podemos utilizar para mas cosas, no
solo para colocar datos en campos de texto; también para cargar datos de configuración,
variables de entorno, datos de bases de datos y un sinfín de situaciones que solo XML puede
hacer realidad.
Cualquier pregunta referente a XML puedes dirigirla al foro

Freddie® Cristalab
webmaster@cristalab.com