AS3 101: XML – Basix

Spanish (Español) translation by Ghea Deny Saputra (you can also view the original English article)

Bueno, bueno, abundante de ActionScript de jornalero! Muchos han atravesado un extraño paisaje tan lejos en los últimos 6 meses, pero si todo salió según el plan, emergió más fuerte y consolidarse afrontar el próximo desafío. Aquí con la 7ª entrega, a culminar con el tema de XML.

Introducción

Como hemos avanzado a través de la serie 101 de AS3, nos hemos dejado llegar cada vez más flexible, escribir programas que respondieron a las actualizaciones más suavemente que las anteriores. Aquí es donde se pone verdaderamente interesante: si podemos mantener los datos que la aplicación externa al SWF, entonces haciendo actualizaciones se convierte en una cuestión de editar un archivo de texto (o trabajar con una base de datos), en lugar de edición de ActionScript y volver a compilar el archivo SWF.

Esto no es nada nuevo, pero supongo que será que es nuevo para usted, y por eso Estás aquí. Voy a suponer que usted está cómodo con todo lo demás que hemos cubierto hasta ahora en la serie 101 de AS3 – temas de la lista de visualización, arreglos de discos y especialmente los lazos. Pero voy a suponer que necesitas una introducción formal a XML, y cómo trabajar con él en ActionScript.

Para ello, tomaremos esto en tres grandes partes. En primer lugar, analizaremos cómo XML está escrito. A continuación, analizaremos las técnicas disponibles para nosotros en ActionScript 3 para trabajar con XML. Por último, pondremos que todos juntos construir una función de producto basada en XML, una vista previa de la que es visible por debajo.

Paso 1: ¿Qué es XML?

Tenemos que empezar aquí. XML el acrónimo "Extensible Markup Language", y probablemente "XML" sonaba más frío que "EML". Un lenguaje de marcado es un lenguaje donde marcas de algún tipo se entremezclaron con el texto normal, dando la estructura del texto y atributos. Esto tiene el efecto de crear comentarios sobre el texto que son distintivas del texto sí mismo. Como siempre, Wikipedia tiene una descripción más completa y elegante de lenguajes de marcado

Usted está probablemente familiarizado con un lenguaje: HTML (acrónimo de Hyper Text Markup Language). En este caso, las etiquetas (los bits que comienzan con < y terminan con >) son el marcado. Si sabes HTML, entonces usted no tendrá ningún problema en escoger encima de XML, como la sintaxis es idéntica. De hecho, XML y HTML tienen un antepasado común en SGML. Y XHTML HTML simplemente reescrito para que cumpla con los estándares XML (HTML había sido mucho más goosey loosey sobre ciertas cosas, que no es XML).

El marcado en XML será familiar, pero esta idea "extensible" podría tomar algún. Lo esencial es que aún existen ciertas reglas de cómo se debe escribir el XML, no hay reglas en qué es el marcado real. Esto está en contraste con HTML, donde se define quees una etiqueta de párrafo, y <a>es una etiqueta de anclaje (o link). XML define no hay preselección etiquetas.</a> Llegar a escribir sus propias etiquetas y estructurarlos cómo le parezca. Esto le permite crear un documento XML que corresponde exactamente a sus necesidades de estructura de datos. Esto es lo que es extensible sobre XML.

Dicho esto, hay varios idiomas basado en XML que tienen etiquetas predefinidas. Uno ya se ha mencionado: XHTML. XHTML es sólo XML con cosas como y <a>etiquetas definidas. Otro lenguaje basado en XML que los desarrolladores de Flash pueden importan es MXML, la sintaxis de marcado que se utiliza para crear aplicaciones Flex. MXML es a XML, aunque viene con varias etiquetas predefinidas y tratar de utilizar una etiqueta que no tiene los resultados de una determinación de errores. Pero lo bueno es que una vez que el cuelgue de XML, no hace falta mucho que aprender lenguajes basados en XML.

Para una lectura más técnica en el lenguaje XML, vea especificación oficial de w3.

Paso 2: Un documento XML

Nos a escribir un documento XML en la primera mitad de este tutorial, que utilizaremos en la segunda mitad para cargar la Flash.

Abrir un nuevo archivo de texto y guardar en una ubicación de su elección como productos.Xml.

Lo primero que vamos a añadir es la declaración XML:

1	<?xml version="1.0" encoding="UTF-8"?>

Flash en realidad funcionará bien sin esta línea presente. Sin embargo, es buena forma para asegurarse de que está ahí. Esta es la placa de la caldera; cualquier editor que se precie tendrá una plantilla XML que proporciona esta línea para usted.

Que yo sepa, no hay otro valor para la versión, y la codificación será típicamente UTF-8. Sin embargo, vale la pena señalar que si su archivo de texto no está codificado en UTF-8, por ejemplo, ISO-8859-1, es posible que deba ajustar esa línea (o volver a codificar su archivo para que sea UTF-8). La codificación de texto es un tema más allá de los límites de este tutorial. Es un tema que debe ser revisado, sin embargo. Un programador vive con archivos de texto para ganarse la vida, y así es la ventaja de estar familiarizado con la codificación de texto. Más información de lo que pensaba siempre se mencionara acerca de codificación de texto se puede encontrar aquí.

Paso 3: Todo sobre los elementos

¿Qué es un elemento? Si conoces su jerga HTML, un elemento es que algo definido por un conjunto de etiquetas, tales como<div>. El elemento incluye todo, desde la etiqueta de apertura de la correspondiente etiqueta de cierre, por lo que el elemento contiene el marcado (el tag) y el contenido de esa etiqueta. Hay dos tipos principales de elementos: abrir elementos y cerrado.

Un elemento abierto viene con un conjunto correspondiente de las etiquetas, tales como...Dóndees la etiqueta de apertura, yes la etiqueta de cierre. Por lo tanto, un signo "menor que" (en lo sucesivo como una apertura ángulo soporte) es el primer carácter de una etiqueta. Viene luego el nombre del elemento (en nuestro ejemplo era "p", pero recuerde, ya que XML es extensible, el nombre puede ser prácticamente cualquier cosa que consta de letras, números, guiones y guiones bajos). La etiqueta se cierra con un signo "mayor que" (el cierre del ángulo refuerzo). La etiqueta en su conjunto abre el elemento. Allí puede estar contento después de la etiqueta de apertura, pero en algún momento debe cerrar el elemento.

Esto es importante: en HTML que puede utilizar para ser perezoso sobre el cierre de la etiqueta. XML no es tan indulgente. Cada elemento que se abre debe cerrarse.

Para cerrar un nodo, se crea otra etiqueta con el mismo nombre, solamente entre la apertura del ángulo soporte y el nombre de nodo, hay una barra:

Elementos deben estar cerrados en el orden en que se abren. Los elementos pueden anidarse, y hacer que usted necesita abrir un elemento y luego otro. Al cerrarlas, el segundo elemento consigue cerrado primero, luego el primer elemento. Por ejemplo:

1	<a>
2	<b>
3	<c>
4	</c>
5	</b>
6	</a>

Aviso abrimos el a elemento, entonces el elemento b y luego el elemento c. Cuando llega el momento de envolverlo todo, tenemos que cerrar en orden inverso: c, luego b y finalmente a.

Tenga en cuenta que es costumbre aplicar sangría a un elemento anidado, con un carácter de tabulación o un número determinado de espacios. Esto es a efectos de legibilidad, como es costumbre indentar el contenido de una función o el cuerpo de un bucle. Pero como en ActionScript, este espacio en blanco se ignora bastante, y lo anterior podría ser justo como legítimamente ser escrita como:

1	<a><b><c></c></b></a>

Como se mencionó al principio de este paso, hay una cosa tal como una etiqueta vacía, o una etiqueta de cierre. Esta es una etiqueta que no contiene ningún contenido. En HTML-tierra, tenemos las etiquetas de imagen y descanso como ejemplos:

1	<img src="http://activetuts.s3.amazonaws.com/tuts/044_AS3101XML/Tutorial/some.jpg" />

La sintaxis aquí es sólo una etiqueta única, con una barra como la última cosa antes de que el cierre del ángulo soporte. La etiqueta se abre y se cierra todo en un solo paso. Por lo tanto, no hay contenido puede anidarse dentro de. El "src =" http://activetuts.s3.amazonaws.com/tuts/044_AS3101XML/Tutorial/ poco no es realmente contenido, es un atributo. Conseguiremos que en un momento.

Paso 4: El elemento raíz

Cada documento XML debe tener uno y sólo uno, elemento de raíz. Este elemento encapsula todos los datos en el documento. Piensa en HTML: hay un solo elemento que envuelve la cosa entera. Este es el elemento raíz.

En este tutorial, vamos a hacer una lista de productos XML. Por lo tanto, a algo genéricamente refieren a todo el conjunto de datos, voy a escribir esto:

1	<products>
2
3	</products>

Realmente no importa ahora, pero tenga en cuenta que la segunda línea vacía realmente tiene un carácter de tabulación, para efectos de aplicar sangría a los elementos anidados.

Lo importante es saber que nuestro conjunto completo de datos quepan entre las etiquetas inicial y final de este elemento, las pestañas y todo. Como tal, no es una mala idea para reflexionar en el nombre del elemento. Sólo vamos a tener una lista de productos, así que "productos" hacen sentido. Pero si llegara a tener una lista de productos y una lista de categorías, entonces tal vez llamar a la raíz "productos" de elemento tiene menos sentido, como probablemente utilizaría "productos" de un elemento anidado para la lista de productos.

Que siendo no dicho, hay ninguna regla diciendo que no se vuelva a utilizar nombres de elementos. Es generalmente más fácil lectura en el largo plazo, sin embargo, si tienes nombres de elementos del bien-pensamiento-hacia fuera.

Paso 5: Un elemento del producto

Ahora vamos a empezar a añadir algunos datos. Vamos a añadir un elemento de producto único en el documento. Este elemento se consigue anidado en el elemento de los productos. El elemento que estamos agregando será este:

1	<product>
2
3	</product>

Una vez más, estamos dejando espacio para elementos anidados, para que la segunda línea tiene un carácter de tabulación. Cuando se añade a todo el documento, veremos algo como esto:

<products>
	<product>
 
	</product>	
</products>

Paso 6: Detalles del producto

Ahora podemos añadir algunos detalles sobre un producto determinado. Vamos a añadir un nombre, un enlace a los detalles del producto y una dirección URL de la imagen. Vamos a añadir una descripción en unos pocos pasos.

Simplemente te agregue elementos al elemento producto y dar a cada uno un valor:

<products>
	<product>
		<name>Falling Snow Effect</name>
		<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
		<image>falling-snow-effect.jpg</image>
	</product>	
</products>

Por lo que le estamos dando el producto algunos detalles. Porque el <name>, <link> , y<image>elementos están anidados dentro del <product>elemento, "pertenecen" a la <product>. En unos pocos pasos más, vamos a añadir más elementos de producto. Cada uno tendrá su propio nombre, link y elementos de imagen. La estructura de datos de nidificación de estos elementos mantenga cada nombre asociado con el producto adecuado.

Paso 7: entidades

Resulta que el <link> nodo será problemático, sin embargo. Si tienes un validador XML práctico, seguir adelante y ejecutarlo. Obtendrá un error al efecto de "esperado punto y coma." Estoy usando TextMate para mi edición de código y ejecutando el comando ordenado desde el paquete XML mostrará el siguiente error:

Paquete XML de TextMate también dispone de un comando de "Validar sintaxis" que va a desempeñar una función similar, sino que en última instancia, error en el hecho de que no hay ninguna DTD (declaración de tipo de documento). Ordenado, sin embargo, "limpiar" el archivo después de una validación exitosa, aplicar sangría a líneas y eliminar líneas vacías. Puede o no puede apreciar eso.

De hecho, usted puede también ver en la imagen de arriba que TextMate también pone de relieve la y comercial como no válido (con un fondo rojo sólido).

Esto es realmente la causa del error, debido a algo llamado entidades.

Probablemente ya está familiarizado con las entidades de HTML, incluso si no está familiarizado con el nombre. Son casi lo mismo en XML. Una entidad es un código especial que representa un carácter especial. Por ejemplo, en HTML usted puede teclear una vieja llave de comillas dobles regular y usted va a estar bien. Pero si usted quiere usar comillas "rizados", incluso si usted supiera cómo escribirlas (opción-izquierda-cuadrado-brace y Opción-Mayús-izquierda-cuadrado-brace en Mac), no se puede garantizar que el procesador XML que es abrir el archivo tratará el carácter correctamente (debido a texto codificaciones y otros magia negra... no te preocupes por eso ahora). En su lugar, puede escribir la entidad que representa las llaves:

&ldquo;

&rdquo;

Por ejemplo...

1	“That's what she said...”

De hecho, podríamos hacer esta afirmación aún más bonita con más entidades, para representar el apóstrofe y las elipsis (los tres períodos... la manera correcta de escribir es con un solo personaje llamado las elipses. Es punto y coma opción en Mac, por cierto).

1	“That's what she said…”

Ahora se ve feo, pero correr que a través de un HTML parser y obtendrá:

"Eso es lo que ella dijo..."

Que es sutilmente más legible de:

"Eso es lo que ella dijo..."

XML tiene un puñado de entidades incorporados, que básicamente a personajes que tienen un significado especial en la especificación de XML:, ", ', y y. Nota las comillas son "rectos", no "rizado".

Esto consigue finalmente el problema que estamos teniendo. El ampersand es un caracteres reservados en XML. Está reservada para indicar el comienzo de una entidad. Por suerte, la entidad comercial está predefinida, y basta para asegurarse de que reemplazamos el signo real con su entidad:

1	<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>

Las cinco entidades definidas por XML son los mismos que en HTML, pero aquí es una referencia rápida:

1	< <
2	> >
3	" &quo;
4	' '
5	& &

Como nota final sobre este tema, lo cool con entidades XML es que usted puede definir los suyos propios. No entramos en este tema, pero XML permite no solo carácter sustitución, sino incluso todo trozos de texto. Entidades pueden actuar como variables (o más exactamente, constantes) en este sentido; en lugar de escribir el nombre de un autor por cada vez ocurre, poner el nombre en una entidad y uso la entidad. Es fresco, pero más allá del alcance de nuestro tutorial (algunos podrían argumentar que este paso todo es más allá del alcance de nuestro tutorial).

Para obtener más información sobre las entidades, visitar Wikipedia.

Paso 8: CDATA

Como prometimos, vamos a añadir un elemento de Descripción el elemento producto. Pero en nuestro mundo ideal, a formato esa descripción con HTML para mostrar bastante en Flash. Pero piensa en esto por un momento... ¿Cómo separamos la estructura de datos XML desde el formato HTML que es en realidad parte de los datos, no la estructura? Es decir, si escribimos esto:

<product>
	<name>Falling Snow Effect</name>
	<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
	<image>falling-snow-effect.jpg</image>
<strong>	<description><font size="24">AS3 / AS2 Falling snow effect</font>
<p> This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.  <a href="http://activeden.net/item/as3-as2-falling-snow-effect/69077">View product details</a>.</p></description></strong>
</product>

Cómo sabe el analizador XML que <description>y <product>son XML y que , ,, y <a>son realmente parte del contenido?

(Nota que entiendo que el es obsoleto HTML, sino que es el tipo de HTML que Flash puede manejar, y que es nuestro destino final, por lo que estamos usando el etiqueta)

Los astutos entre ustedes están diciendo: "Podríamos utilizar entidades". Sí, podríamos. Se vería algo como esto:

&lt;description&gt;&lt;font size=&quot;24&quot;&gt;AS3 / AS2 Falling snow effect&lt;/font&gt;

&lt;p&gt; This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.  &lt;a href=&quot;http://activeden.net/item/as3-as2-falling-snow-effect/69077&quot;&gt;View product details&lt;/a&gt;.&lt;/p&gt;&lt;/description&gt;

Y que técnicamente podría funcionar. ¿Pero recuerda poco sobre XML es legible? Yo diría que lo anterior no es legible. Una o dos entidades... fino. Todas esas entidades... no es tanto.

Afortunadamente, hay otra manera. Y ya sabes el nombre del mismo ya porque has leído el título del paso. Se llama CDATA. CDATA es corto para los datos de carácter, y eso simplemente significa que algo especificado como CDATA se ignorarán como datos XML. En otras palabras, no procesar los caracteres, incluso si tienen significado en XML. CDATA es una etiqueta especial, que comienza así:

<![CDATA[

y termina así:

]]>

Y a lo largo de medio que puede poner en todo lo que desea, y el procesador XML lo ignorará. Así que podemos poner nuestro texto HTML con formato en XML como este:

<product>
<name>Falling Snow Effect</name>
	<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
	<image>falling-snow-effect.jpg</image>
	<description><![CDATA[<font size="24">AS3 / AS2 Falling snow effect</font>
<p> This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.  <a href="http://activeden.net/item/as3-as2-falling-snow-effect/69077">View product details</a>.</p>]]>
	</description>
</product>

Y eso es mucho más legible.

Tenga en cuenta que podríamos haber utilizado CDATA del elemento de enlace, así. De cualquier manera, usted gana. Elegir el método que mejor se adapte a la situación. Como dije, una o dos entidades al mismo tiempo es manejable. Más allá, considera CDATA.

Wikipedia, como siempre, tiene algunos detalles más en CDATA.

Paso 9: atributos

Necesitamos una manera de identificar internamente un producto. Asignaremos a un número de id para el elemento producto. Sin embargo, en lugar de agregar otro elemento, vamos a añadir como un atributo.

Un atributo es sólo otra forma de asociar los datos con un elemento, pero en lugar de anidamiento de un elemento dentro de otro elemento, podemos damos atributos a un elemento directamente. Cuando se utiliza el <img> elemento en HTML, en última instancia también se utilizan atributos para especificar la fuente. Atributos XML funcionan de la misma manera:

1	<product id="42">
2	…

Las reglas:

En primer lugar, el atributo debe estar contenido totalmente dentro de la etiqueta de apertura del elemento (o dentro de la etiqueta única de un elemento vacío)
Debe haber espacios en blanco antes del comienzo de una declaración de atributo (un solo espacio es normal, pero cualquier número de espacios, fichas o las devoluciones está muy bien. A menudo usar espacios en blanco para hacer más legible XML)
El nombre del atributo ("id" en este caso) debe seguir las mismas reglas para nombrar los elementos.
Inmediatamente después del nombre de atributo debe ser un signo de igual ("="). Ningún espacio en blanco permitida.
Inmediatamente después de firmar el es igual a, debe haber un par de frases que contienen los datos textuales contenidos en el atributo.
Dentro de las comillas, puede utilizar más texto, pero recuerde que los caracteres especiales definidos por XML. Utilizar entidades si es necesario. Aquí se permite espacio en blanco.
Si un elemento tiene más de un atributo, cada conjunto se separan con espacios en blanco, por ejemplo:

1	<product id="42" order="2">

Lo anterior es sólo para fines de demostración. Estaremos bien con solo un atributo de id.

¿Cuando se utiliza atributos y cuando utilizas elementos? Incumbe a usted. Mi regla principal es que pocos datos pueden ir en los atributos, y más datos pueden ir en elementos. Sin embargo, encontrar elementos vacíos conveniente, por lo que podría pecar de utilizando atributos si es posible. Por otra parte, es la sintaxis para la lectura de atributos en ActionScript 3 (si nunca tan ligeramente) más detallado que la lectura de los elementos, así que si tengo que utilizar un elemento por razones de longitud, te tiendo a utilizar elementos para el resto de los datos, así.

Paso 10: Replicar algunos productos

Ahora que tenemos un producto construido, podemos crear una lista de ellos escribiendo hacia fuera (o copiar y pegar) la misma estructura, sólo con datos diferentes. Una vista panorámica de la estructura tendrá el siguiente aspecto:

<products>
	<product>
		…
	</product>
	<product>
		…
	</product>
	<product>
		…
	</product>
	<product>
		…
	</product>
</products>

Cada elemento de producto individual representa un solo producto, por lo que tenemos cuatro productos en total. Cada uno tendrá datos diferentes, pero cada uno también seguirá la estructura que elaboramos con el primer producto. Aquí está el documento completo:

<?xml version="1.0" encoding="UTF-8"?>

<products>
	<product id="42">
		<name>Falling Snow Effect</name>
		<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
		<image>images/snow.jpg</image>
		<description><![CDATA[<p><font size="18">AS3 / AS2 Falling snow effect</font></p>
		<p>This is an editable flash snow effect. You can change the falling parameters in ActionScript panel without any ActionScript knowledge.</p>
		<p><a href="event:link">View product details</a></p>]]></description>
	</product>
 
	<product id="13">

		<name>Flash Banner Creator</name>
		<link>http://activeden.net/item/flash-banner-creator-and-rotator/49745?id=49745&ref=activetuts</link>
		<image>images/banners.jpg</image>
		<description><![CDATA[
			<p><font size="18">Flash Banner Creator and Rotator</font></p>
			<p>This is a very advanced tool to create professional looking dynamic flash banners, slideshows, ads and intros. You don’t need to know Flash or ActionScript to use the Flash Banner Creator and Rotator. You can create a flash banner simply by editing an XML file and adding your own assets. There are more than 10 different effects that can be applied to your images, text and swf files.</p>
			<p><a href="event:link">View product details</a></p>]]>
		</description>
	</product>
 
	<product id="75">
		<name>XML Countdown</name>
		<link>http://activeden.net/item/as3-as2-falling-snow-effect/69077?id=69077&ref=activetuts</link>
		<image>images/countdown.jpg</image>
		<description><![CDATA[
			<p><font size="18">XML Countdown</font></p>
			<p>A dynamic, customisable countdown, with universal time support: Everybody on the internet will countdown to the same moment. It’s flip-style animated: inspired by clocks on grand train stations. Modern stylish way to count down to a date up to 999 days in the future.</p>
			<p><a href="event:link">View product details</a></p>]]>
		</description>
	</product>
 
	<product id="8423">
		<name>XML Slideshow with Ken Burns Effect</name>
		<link>http://activeden.net/item/xml-slideshow-with-ken-burns-effect/32354?id=32354&ref=activetuts</link>
		<image>images/kenburns.jpg</image>
		<description><![CDATA[
			<p><font size="18">XML Slideshow with Ken Burns Effect</font></p>
			<p>MAIN FEATURES:</p>
			<ul>
				<li>Unlimited pictures</li>
				<li>Highly customizable design via XML only</li>
				<li>You can customize this slideshow in it’s smallest aspects: transitions, speeds, colors, sizes, etc, all via a well structured xml file.</li>
				<li>Awesome Ken Burns effect</li>
			</ul>
			<p>This can become the ultimate header, banner, gallery for your website.</p>
			<p><a href="event:link">View product details</a></p>]]>
		</description>
	</product>
</products>

Paso 11: Pasando a Flash

Para el resto del tutorial, estaremos creando una característica simple del producto que utilizará el documento XML que acabamos de crear. Tendrá pequeños botones que representan cada una de las funciones, que se pueden hacer clic para llenar el área principal con detalles sobre ese producto. Además, como un pequeño bono, las funciones avanzarán automáticamente a través de la lista.

Como de costumbre, omitiremos el proceso de creación de ilustraciones y le aconsejo que use el archivo de inicio que se encuentra en los archivos de descarga.

Si lo desea, puede usar la siguiente descripción del archivo de inicio como un recorrido de lo que ya está allí, o como una guía de lo que necesita construir por su cuenta, si decide rechazar el archivo de inicio.

Primero, hay una capa de fondo con un rectángulo en ella. No biggie

A continuación, hay un TextField dinámico llamado caption_tf. Esto está diseñado con un tamaño de fuente más grande, por lo que actúa como un título. Se coloca de modo que una fila de botones esté arriba y una imagen se cargue debajo. Tanto los botones como la imagen se colocarán programáticamente.

Luego tenemos otro campo de texto dinámico, llamado description_tf. Esto se establece en un tamaño más pequeño de la fuente más conveniente para la copia de cuerpo. El campo también se establece en varias líneas y tiene un área más grande para acomodar el texto un poco más. Se coloca para que se sientan debajo de la imagen.

Ambos campos tienen fuentes para incorporar, como va actualizando el texto dinámicamente mediante ActionScript.

Por último, hay un símbolo en la biblioteca llamada FeatureButton, y se encuentra a exportar para ActionScript. Su nombre de clase de ActionScript también es FeatureButton (este nombre es el importante), y se encuentra a exportar en primer fotograma. Una instancia de este botón se coloca en el escenario de una capa de guía llamada "símbolos vinculados" para la edición de conveniente. Esta capa no se incluirán en el SWF, sin embargo, puesto que es una capa de guía.

Paso 12: ActionScript 3, XML y E4X

Antes de llegar al código de práctica, quisiera traer el camino que ActionScript maneja XML. Para ser específicos, la forma de ActionScript 3 maneja XML. En ActionScript 2 (y 1), XML era sin duda posible y aún bastante común, pero la sintaxis involucrada en conseguir los datos de XML fue engorrosa. En Resumen, participan un montón de uso de la propiedad de "los niños" y fue bastante fácil perderse al hacer su camino a través de un documento complejo.

ActionScript 3 promueve el XML a un "ciudadano de primera clase," es decir, un objeto de nivel superior. Dicho de otra forma, XML es tan importante para AS3 que oficialmente es un tipo de datos nativo. No hay líneas de importación se requieren para que funcione, y lo loco es que realmente puede escribir XML en los archivos de ActionScript. Prueba esto: abre un nuevo archivo de Flash ActionScript 3 y añadir en el panel de secuencia de comandos siguiente:

1	var products:XML = <products>
2	<product id="42" />
3	<products>

Si lo desea, puede hacerlo todo el productos XML archivo que creamos anteriormente, pero el punto que estoy tratando de hacer es que funciona. Por lo general no utiliza este truco demasiado, pero es particularmente útil cuando se trabaja con datos ficticios. Es decir, cuando están empezando un proyecto y no tienes listos los archivos XML, puede conseguir cosas trabajando en ActionScript rápidamente por tropezar en algunos datos XML temporales como esta. En noticias relacionadas, cuando se necesita crear un archivo de prueba pequeño, copiar el XML a la derecha en el ActionScript puede ahorrar de tener que pasar por el proceso de carga del archivo XML cuando eso no es lo su prueba.

Por último, pero ciertamente no menos importante, ya que XML es un ciudadano de primera clase de ActionScript 3, tienen una sintaxis para obtener datos de objetos XML a través de algo llamado E4X (ECMAScript para XML; ActionScript 3 es un lenguaje compatible con ECMAScript y por lo tanto implementa E4X). E4X ofrece un simple-sintaxis con punto para recorrer la estructura de árbol XML. Si has usado XPath en XML, es similar a ese sistema. Vamos a llegar a los detalles como construimos nuestro pedazo de característica del producto, pero aquí es una muestra de E4X, utilizando el XML en ActionScript de hace dos párrafos:

1	trace(products.product.@id);

En Resumen, esta referencia al objeto principal de XML (productos), selecciona el elemento producto anidados (.product) y finalmente el valor del atributo id de ese elemento (.@id). Los detalles son un poco más complicados que eso, pero ojala ilustra la suavidad con ActionScript 3 puede trabajar con XML.

Puedes leer más sobre E4X en Wikipedia y ECMAScript así.

Si tienes curiosidad, puedes ya sea encender un archivo AS2 Flash y echa un vistazo al manejo de XML, o realmente puede utilizar un puerto de AS3 de la clase XML AS2. Buscar en la documentación de ayuda bajo el flash.xml.XMLDocument. Le aconsejo hacerlo sólo para académicos bien y satisfacer su apetito de curiosidad, como personalmente nunca desearía la sintaxis XML AS2 a hasta mi peor enemigo.

Paso 13: Crear unas Variables

Vamos a empezar. En primer lugar, vamos a necesitar algunas variables que se acostumbrará más tarde. Sólo a crearlas ahora y su propósito será explicado más plenamente como debemos usarlos.

En su función de archivo (hemos terminado con el temporal que creó en el último paso) del Flash, tenemos que poner un script en el primer fotograma de la capa acciones. En este script, que contienen toda la lógica de la pieza, empezar por declarar y colocar valores a unas variables:

var xml:XML;
var featureIds:Dictionary = new Dictionary();
var link:String;
var loader:Loader = new Loader();
addChild(loader);
loader.x = 10;
loader.y = 86;

Las variables xml y enlace obtendrá valores más adelante en el programa. El featuresIds debe ser un diccionario vacío por ahora, que conseguir llenará más adelante, también. El cargador debe ser creado y colocado en el escenario, pero otra vez, no cargamos nada hasta más tarde.

Paso 14: Carga un archivo XML

Quizás podamos escribir XML directamente en ActionScript, pero es más flexible para cargar en tiempo de ejecución desde un archivo XML externo. Así, podemos construir una pieza Flash que es lo suficientemente flexible para responder a los cambios en el XML, y luego realizar actualizaciones se convierte en una cuestión de actualizar el archivo XML y no el archivo Flash. Esta es la manera que debería funcionar; actualización de XML es fácil, actualizar archivos de Flash es menor.

Por lo tanto, tenemos que cargar el archivo XML. Usamos el objeto URLLoader para hacer esto. Añadir lo siguiente después de las declaraciones de variables existentes:

1	var xmlLoader:URLLoader = new URLLoader();
2	var url:URLRequest = new URLRequest("products.xml");
3	xmlLoader.load(url);
4	xmlLoader.addEventListener(Event.COMPLETE, onXmlLoad);

En primer lugar, creamos un URLLoader. Un URLLoader simplemente carga el contenido de cualquier URL dada. Esto es diferente del cargador (que conocimos en el tutorial AS3 101 objetos de visualización), que está diseñado especialmente para cargar los SWF y archivos de imagen de mapa de bits y viendo. El URLLoader cargará nada. En nuestro caso, queremos cargar un fichero de texto.

En la segunda línea creamos un objeto URLRequest que apunte a la URL del archivo XML que queremos cargar. En este caso, es una ruta relativa (y el archivo XML está en el mismo directorio que el SWF). Si lo desea, puede colocar el XML en otro lugar y ajustar la cadena en el URLRequest. Si lo desea incluso puede ser una ruta absoluta. Sin embargo, hay que tener en cuenta que las restricciones de seguridad ocurren cuando carga un archivo XML desde un dominio diferente del que reside el archivo SWF. Tratar con esto es más allá del alcance de este tutorial, pero es bueno ser consciente de la situación y saber que se puede buscar "crossdomain.xml" para cómo tratar con él.

La tercera línea dice el URLLoader para iniciar la carga de la URLRequest.

Agregamos un oyente de evento en la cuarta línea, asegurándose de que podemos actuar sobre los datos cargados una vez que ha cargado completamente. Nosotros no podemos hacer nada con el archivo XML antes de entonces. También, nosotros debemos configurar los controladores de eventos ProgressEvent.PROGRESS y IOErrorEvent.IO_ERROR (discutidos más plenamente en el tutorial AS3 101 en objetos de visualización), pero para los propósitos de este tutorial se los mencionan, pero no actúan sobre ellos.

Como parte final de este paso, debemos asegurarnos escribir (o al menos empezar a escribir) la función onXmlLoad que se ejecutará una vez que cargas el XML:

1	function onXmlLoad(e:Event):void {
2	trace("xml loaded");
3	}

En este punto, debe poder ejecutar el archivo y ver un rastro en el panel salida cuando el XML del archivo cargas (no tarda mucho). O si algo salió mal, podría ver un error en el panel salida, probablemente debido a un archivo XML fuera de lugar.

Paso 15: Creación de XML

Ahora que ya tenemos el archivo xml cargado, tenemos que convertir los datos de texto en un objeto xml. Esto se logra fácilmente añadiendo la siguiente línea a la función onXmlLoad:

1	function onXmlLoad(e:Event):void {
2	trace("xml loaded");
3	<strong>xml = new XML(xmlLoader.data);</strong>
4	}

Estamos utilizando la variable que creamos hace unos pasos. Existe fuera de la función para que persiste por la duración de la aplicación Flash. Ahora llegamos a utilizarlo.

Propiedad de data de URLLoader es simplemente el contenido del archivo que cargó. Es en este caso, los datos de texto, que pasa a ser datos XML y pasando una cadena con formato XML al constructor XML (XML()) nuevo analizará esa cadena en un objeto XML. Así que ahora tenemos un objeto XML apropiado en la variable xml. Usted puede probarlo con la siguiente línea al final de la función onXmlLoad:

1	trace(xml.toXMLString())

Si prueba ahora, debería ver el documento XML, más o menos, seran impresos en el panel salida.

Paso 16: Análisis de XML

Ahora para algunos magia E4X. Conseguiremos un montón de experiencia con esto, pero ahora que necesitamos todos cuatro (o sin embargo muchos) elementos de producto del XML para que podamos construir los botones cuatro (o sin embargo muchos). Utilizar expresiones de E4X será como "codicioso", como pueden, lo que significa que tome a tantos partidos como son válidas. Funciona para nuestra ventaja, como podemos escribir una expresión muy simple y tiene todos los elementos producto del gancho agarrador.

En este punto, el variable xml posee la totalidad del objeto XML. Como tal, haciendo referencia al xml variable significa que nos estamos refiriendo al elemento raíz del XML, es decir, la elemento. A partir de ahí, podemos utilizar expresiones de sintaxis con punto para profundizar en la estructura de datos. Si hacemos la siguiente la siguiente línea al final de la función onXmlLoad:

1	var productElements:XMLList = xml.product;

Vamos a llegar todos elementos secundarios directos del elemento raíz. Veremos más adelante cómo podemos ser más selectivos. Derecho, es importante tener en cuenta que una expresión E4X realmente devuelve un objeto XMLList, no un objeto XML. Un objeto XMLList es un objeto algo peculiar y puede comportarse como un objeto XML en varias situaciones. Se puede pensar como un elementos de la matriz de XML. En nuestro caso, tendrá las entradas individuales para cada uno de los cuatro elementos.

De hecho, podemos explorar el XMLList un poco antes de ir más lejos. Haga lo siguiente:

1	trace(productElements[2]);

Y usted debería ver la tercera elemento en el panel de salida (los índices, como los índices de Array y profundidades de DisplayObjects, están basados en 0).

También puede averiguar cuántos elementos están en la lista mediante el método length():

1	trace(productElements.length());

Es importante darse cuenta de que XMLLists son similares a arreglos de discos pero sin arreglos. Algo que tiende a me de viaje para arriba a menudo es que se me olvida que los Arrays tienen un myArray.length), y XMLLists tienen un myList.length()). Es una distinción necesaria porque XMLLists son capaces de procesar expresiones E4X, para que myList.length la escritura realmente buscaría elementos contenidos dentro de la lista.

Podemos juntar estos dos bits de información y lazo sobre el XMLList (eliminar los rastros anteriores):

var len:int = productElements.length();
for (var i:int = 0; i < len; i++) {
	trace("Element " + i);
	trace(productElements[i].toXMLString());
}

Nosotros sólo estamos rastreando, pero nos podemos ahora lazo sobre los datos, tanto como lo hicimos en el tutorial de bucle. Ahora nuestros datos están externos hacia fuera de la aplicación Flash. ¿Lo guay es?

Paso 17: Construcción de los botones

OK, nos estamos bucle. Vamos a hacer algo con los datos.

Como que lazo, crearemos un nuevo botón del símbolo de biblioteca, colocarlo y añadir a la lista de visualización. También a darle un nombre (por conveniencia) y asignar a un detector de eventos de clic.

var len:int = productElements.length();
var btn:FeatureButton;
for (var i:int = 0; i < len; i++) {
	btn = new FeatureButton();
	btn.x = 10 + i * 50;
	btn.y = 10;
	addChild(btn);
	btn.name = "btn" + i;
	btn.buttonMode = true;
	btn.addEventListener(MouseEvent.CLICK, onButtonClick);
}

Esto no es nada nuevo de lo que hemos cubierto en anteriores tutoriales de AS3 101. La propiedad buttonMode deba explicarse: por defecto un Sprite o MovieClip con botón como comportamiento no muestra ningún cursor especial. En la web, sin embargo, estamos acostumbrados a un cursor de dedo al rodar sobre algo activo, por lo que es bueno encender buttonMode, que hace exactamente eso: el cursor se transforma en un cursor del dedo cuando es el Sprite.

También, apagar la función de control de eventos:

1	function onButtonClick(me:MouseEvent):void {
2	trace("button clicked: " + me.target.name);
3	}

Si usted prueba ahora, debería ver cuatro botones muestran, cada uno, cuando se hace clic en, se traza su nombre.

Ahora, para la parte genial. Editar el documento XML; o eliminar un elemento (para que tengas 3) o añadir un extra (que tiene 5). Cuando usted probar su SWF nuevo (sólo publicarlo en Flash), se debe a que el número de botones coincide con el número de elementos. Admitir que es genial.

Paso 18: Clics de botón

Ahora tenemos que manejar el click más elegante. Qué vamos a hacer es asociar a cada uno atributo de identificador del elemento con una instancia de FeatureButton. Vamos a usar el diccionario (featureIds) hemos configurados anteriormente.

Ahora, en el lazo, necesitamos obtener el id de elemento XML y luego almacenar en el Diccionario junto a la FeatureButton.

for (var i:int = 0; i < len; i++) {
	btn = new FeatureButton();
	btn.x = 10 + i * 30;
	btn.y = 10;
	addChild(btn);
	btn.name = "btn" + i;
	btn.addEventListener(MouseEvent.CLICK, onButtonClick);
 
	var productElement:XML = productElements[i];
	var idString:String = productElement.@id;
	var id:int = parseInt(idString);
	featureIds[btn] = id;
}

Se desglosan los pasos. En la primera (nuevo) línea, simple obtenemos una referencia al elemento producto que nosotros actualmente estamos bucle con. A continuación, utilizamos E4X para agarrar el atributo id de ese elemento (recordar, la "@" símbolo nos mete en los atributos del elemento). Ahora, debido a datos XML siempre están una cadena, y nuestros ids son realmente números enteros, tenemos que convertir una cadena a un int, que es lo que hace la función parseInt.

Este último punto es importante recordar: sólo porque usted sabe que es un número (o valor booleano, o fecha o lo que sea), no quiere decir que ActionScript lo reconoce como tal. XML es realmente sólo datos de texto, así que todo lo que sale de él a través de una expresión E4X será una cadena. Si usted quiere ser algo más, necesita convertir explícitamente.

La última línea hace la conexión entre un botón y su identificación mediante el botón como clave en el diccionario, y asignando el id el valor.

Paso 19: Botón clics, parte 2

A continuación, necesitamos esa identificación remonta hacia fuera una vez un clic se produce. En la función onButtonClick:

1	function onButtonClick(me:MouseEvent):void {
2	trace("button clicked: " + featureIds[me.target]);
3	}

Si intenta esto, verá que obtendrá el correspondiente trazo de id por cada clic.

OK, con ese trabajo, podemos ahora procedemos a obtener el resto de los datos de producto. Aquí es donde E4X va de fresco a poderosos. Vamos a elegir de forma selectiva un elemento producto de nuestro todo documento XML basado en este id. Esto no a diferencia de la consulta de una base de datos para que una fila con una identificación, de cientos de filas. Este aspecto:

function onButtonClick(me:MouseEvent):void {
	var id:int = featureIds[me.target];
	trace("button clicked: " + id);
	var productElement:XML = xml.product.(@id==id)[0];
}

Hay unos trucos al mismo tiempo, realmente. La primera es la parte que se ve así: (@id == id). Los paréntesis permiten una selección condicional de elementos XML. Si sólo habíamos escrito xml.product.@id, recibiríamos un XMLList de todos los atributos de identificación contenidos en los elementos del producto. Sin embargo, con la expresión condicional en, E4X encuentra los elementos se basa en los criterios que en el paréntesis. En este caso, estamos mirando el atributo del elemento id y comparándolo contra nuestra identificación conocida del diccionario.

El segundo truco consiste en saltar la XMLList (una manera de hablar). Te recuerdo que una expresión E4X devuelve un XMLList, no un objeto XML. Bien, podemos estar razonablemente seguros de que cada producto tiene un id único (¿cómo? Bueno, vamos a asumir que contamos con algún mecanismo para asegurar, tanto como cómo bases de datos tienen formas de garantizar claves únicas para registros en la tabla). Por lo tanto, cada vez que se ejecuta esta expresión, probablemente devolverá un objeto XMLList que consiste en un objeto XML. Si no, sólo queremos uno para que podamos proceder con la visualización de los datos.

Por lo tanto, añadimos que [0] al final de la expresión. Nos podríamos haber escrito así:

1	var productElementMatch:XMLList = xml.product.(@id==id);
2	var productElement:XML = productElementMatch[0];

Que, sin duda, habrá comentarios discrepantes quejarse que yo estoy evangelizando técnica terrible. En ciertas situaciones, pueden preferir lo más detallado (dos líneas). En otras, pueden preferir la técnica taquigrafía para ahorrarse la línea y la creación de variables adicionales.

¿Por qué mostrarte esto? Hay dos razones por las que te muestro esto. Una es, simplemente, para mostrarte esto. Si nadie te dice estos detalles sutiles del lenguaje ActionScript, ¿cómo lo sabrás? La otra es que estoy razonablemente seguro de que nuestros ID serán únicos y preferiría la versión menos detallada del código.

Paso 20: Botón clics, parte 3

Por último, podemos hacer algo con estos datos. Desde aquí, es realmente bastante simple. Hacemos algunas expresiones E4X más sencillas para obtener los datos individuales del elemento del producto, y lo utilizamos para rellenar el contenido del área de características. Aquí está la completa función onButtonClick:

function onButtonClick(me:MouseEvent):void {
	var id:int = featureIds[me.target];
	trace("button clicked: " + featureIds[me.target]);
	var productElement:XML = xml.product.(@id==id);

	caption_tf.text = productElement.name.toString();
	description_tf.htmlText = productElement.description.toString();
	link = productElement.link.toString();
	loader.load(new URLRequest(productElement.image.toString()));
}

Las dos primeras líneas son bastante simples; simplemente toman cadenas del XML y las colocan en los dos campos de texto. La única variación es con la descripción TextField. Con eso, estamos usando la propiedad htmlText en lugar de la antigua propiedad de texto llano. Hacerlo así permite Flash rendir un simple conjunto de etiquetas HTML para efectos de formato de texto. Estas son las etiquetas que nos inserta en el <description>elemento, que requiere el uso de la etiqueta CDATA.

Simplemente estamos poniendo la cadena desde el XML <link> elemento en la variable de enlace hemos creado un tiempo atrás. Vamos a usar esto en el siguiente paso, cuando enganchamos la conexión en el campo de texto de descripción.

Por último, estamos otra vez usando el valor de cadena de la<image>elemento para cargar algo en el Loader, creamos al mismo tiempo como la variable de enlace. La URL de la cadena debe ser envuelto en un URLRequest, al igual que cuando carga el documento XML. Esta vez, sin embargo, estamos haciendo eso y cargar el archivo en un solo paso. Es un poco más obtuso, pero verás este estilo a menudo.

Si usted prueba ya a la venta, debe mirar muy bien!

Paso 21: Manejo de un enlace de texto

Tenemos etiquetas de <a>en nuestras descripciones, pero no mucho. Aquí presentamos otra técnica, la TextEvent.

Cuando un campo de texto contiene texto HTML, y HTML tiene una etiqueta de <a>, automáticamente se vuelve activo. Y si el valor del atributo href es un enlace, usted será llevado a la página en el navegador web al hacer clic en el enlace. Pero ActionScript proporciona un poco más de un hipervínculo simple; puede utilizar el enlace para activar ActionScript así.

En primer lugar, el valor del atributo href debe comenzar con "evento:" en lugar de "http://" o ser un enlace relativo. Usando el protocolo de pseudo eventos, podemos conseguir Flash para tratar el clic un poco diferente. Ya lo hemos hecho en el documento XML, pero lo menciono aquí como un paso necesario.

En segundo lugar, tenemos que añadir un detector de eventos para el campo de texto en cuestión:

1	description_tf.addEventListener(TextEvent.LINK, onTextLink);

Este es el evento que se envía cuando el href comienza con "evento:"

Por último, tenemos que escribir esa función. Recibirás un objeto TextEvent en los parámetros de la función, que tendrán el valor de href en la propiedad text. Estamos utilizando un valor de relleno, "enlace". En una aplicación más compleja, esto podría ser datos que debe ser actuado sobre, o un identificador que diferencia entre un enlace u otro. Simplemente queremos el evento de texto, luego usaremos el valor de la variable de enlace para saltar a una nueva página. Para ver qué pasa, sin embargo, intente lo siguiente:

1	function onTextLink(te:TextEvent):void {
2	trace(te.text);
3	}

Ahora, para terminar esto, reemplace esa traza con lo siguiente:

function onTextLink(te:TextEvent):void {

	navigateToURL(new URLRequest(link));
    
}

Pruebe la película y debería poder navegar usando el enlace "Ver detalles del producto".

Paso 22: Creando un estado inicial

En este momento, todo funciona, excepto que la página está bastante vacía cuando se carga por primera vez. Todo es genial después de hacer clic en un botón, pero probablemente deberíamos hacer que el primer producto aparezca de forma predeterminada. Esto se logra fácilmente simulando un clic de botón en el primer botón una vez que el XML se ha cargado.

Al final del bucle en la función onXmlLoad, agregue el siguiente código:

1	if (i == 0) {
2	btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
3	}

Toda la función debería verse así:

function onXmlLoad(e:Event):void {
	trace("xml loaded");
	xml = new XML(xmlLoader.data);
	//trace(xml.toXMLString())
	var productElements:XMLList = xml.product;
	//trace(productElements[2])
	//trace(productElements.length());
	var len:int = productElements.length();
	var btn:FeatureButton;
	for (var i:int = 0; i < len; i++) {
		btn = new FeatureButton();
		btn.x = 10 + i * 50;
		btn.y = 10;
		addChild(btn);
		btn.name = "btn" + i;
		btn.buttonMode = true;
		btn.addEventListener(MouseEvent.CLICK, onButtonClick);
 
		var productElement:XML = productElements[i];
		var idString:String = productElement.@id;
		var id:int = parseInt(idString);
 
		featureIds[btn] = id;
 
		if (i == 0) {
			btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
		}
	}
}

Esto es casi lo mismo que hacer clic en el primer botón (este código solo se ejecuta si i es 0, es decir, la primera vez que pasa por el ciclo cuando creamos el primer botón). La diferencia es que el evento CLICK no se genera a través de un clic del mouse por parte del usuario, sino que se llama manualmente dispatchEvent en el botón MovieClip Esta llamada dispatchEvent sucedería internamente cada vez que ocurre un clic real Esta no es una técnica apropiada en todos los casos, pero aquí está bien; Si ejecuta la película ahora, verá que la primera función aparece automáticamente.

Paso 23: Paso de bonificación: Estilo del campo de texto

Si conoces HTML, probablemente también conoces CSS. Al igual que Flash admite un conjunto limitado de HTML en sus TextFields, también admite un conjunto limitado de CSS para el estilo de texto HTML en su TextFields Este paso no está necesariamente relacionado con el uso de XML, pero incorporaremos inteligentemente algunos XML horneados para entregar algunos estilos a nuestro campo de texto, y en el proceso aprenderemos los conceptos básicos de cómo aplicar estilo a texto HTML dinámico con CSS.

Primero, tenemos que escribir nuestra hoja de estilo. Todo el siguiente código se puede colocar fácilmente al final de su script. Podemos crear una variable XML en línea (es decir, una incrustada en el script en lugar de cargar un documento externo) y luego colocar nuestro CSS en una etiqueta CDATA:

var css:XML = <style>
	<![CDATA[
		a {
			color:#992408;
		}
	]]>
</style>

Si desea ver que esto funciona, puede seguir esto con un seguimiento:

1	trace(css.toString());

A continuación, podemos crear un objeto StyleSheet:

1	var styles:StyleSheet = new StyleSheet();

Y luego tenemos que analizar el texto del "archivo" CSS en la hoja de estilo, así:

1	styles.parseCSS(css.toString());

Esto toma una cadena que contiene código CSS y lo hace utilizable como un objeto StyleSheet de ActionScript. Ahora podemos aplicar el StyleSheet a la descripción TextField:

1	description_tf.styleSheet = stylesheet;

Y si lo prueba ahora, debería ver que los enlaces de texto aparecen en un color rojizo:

Tenga en cuenta que parseCSS toma cualquier cadena, y podríamos haber hecho esto:

1	styles.parseCSS("a {color:#992408;}");

Para un estilo simple, es probable que esto sea viable, pero como usted probablemente sepa, los documentos CSS pueden ser largos, y el uso de espacios en blanco (nuevas líneas y sangría) hace que sea mucho más fácil trabajar con el archivo. Lo que estamos haciendo aquí es usar la capacidad de ActionScript para escribir datos XML directamente en un script, y usar CDATA de XML para producir una cadena que básicamente es código dentro del código (si cuenta el código XML también, entonces es código dentro del código dentro de código).

Esta técnica hace que sea realmente fácil lidiar con el escape de citas o nuevas líneas. Fácil, como en, no tienes que hacerlo. El uso de XML en línea con CDATA también es útil para escribir funciones de JavaScript que ejecute con ExternalInterface (una técnica que mencionaremos pero que no veremos aquí). ¡XML es más que solo almacenamiento de datos!

Tenga en cuenta que también puede cargar archivos CSS, del mismo modo que carga archivos XML. Fue más conciso codificar el CSS en ActionScript, además de permitir una tangente en el uso de XML. Busque "cargar CSS con ActionScript" para obtener instrucciones básicas sobre el uso de archivos CSS externos. Verás algunas similitudes entre eso y la carga de archivos XML externos.

Paso 24: Conclusión

En este punto, deberías tener una herramienta extremadamente poderosa en tu arsenal. XML es un formato extremadamente popular para almacenar datos en aplicaciones Flash. Hay otros métodos que tienen sus propias ventajas y desventajas, pero los conceptos siguen siendo los mismos. Aprender a controlar sus piezas Flash con activos y datos externos lo eleva oficialmente desde el nivel de principiante hasta el nivel intermedio.

Sí, es verdad. Si has seguido las siete partes de esta serie hasta ahora, probablemente ya no califiques como principiante. Ha aprendido sobre variables, funciones, lógica condicional, bucles y matrices, la lista de visualización de Flash y, finalmente, XML como fuente de datos externa. En este punto, los conceptos clave se han presentado e ilustrado, y si bien hay más detalles que conocer y técnicas más avanzadas que aprender, ahora debe tener el conocimiento necesario para manejar proyectos algo complejos. Espero que puedas volver al principio y sorprenderte de lo lejos que has llegado.

¿Qué sigue para AS3 101, te preguntarás? Creo que es hora de ponerlo en marcha. Busque algunos tutoriales sobre los conceptos básicos de la programación orientada a objetos para verlos pronto. Sin embargo, de vez en cuando volveremos a los temas "esenciales", así que no te preocupes si aún sientes que quedan algunos agujeros en la base .