- El archivo XML
- Los ActionScripts
- Cargar el archivo XML
- Volver a leer otra Noticia
- Las letras voladoras
- Creación y asignación de objetos
En este tutorial desarrollaremos una pequeña aplicación para desplegar noticias por medio del Flash y un archivo tipo XML. Como existen varios tutoriales al respecto, incluimos un efecto para las letras, el cual también será explicado.
La aplicación en si es bastante sencilla: consiste en leer un archivo XML, vaciarlo en un vector y desplegarlo. Procederemos a explicar el archivo XML, después analizaremos los ActionScripts y por último veremos el efecto aleatorio de las letras.
El XML es un lenguaje similar al HTML, de hecho se desarrollo como una extensión (eXtended Markup Lenguage). El XML no reconoce acentos, ni eñes. Para eso hay que utilizar ciertos caracteres de control.
Letra | Secuencia |
"á" | à |
"é" | é |
"í" | í |
"ó" | ó |
"ú" | ú |
"¿" | ¿ |
El archivo lo puede crear con cualquier procesador de palabra, sólo hay que salvarlo sin caracteres especiales y con la extensión XML. Si le apasiona este tema, puede consultar cualquier libro de referencia (que no es por desanimarlo, pero los libros de XML pesan como tres kilos).
Para evitar el problema con los caracteres especiales, se puede utilizar la etiqueta:
<?xml version='1.0' encoding='iso-8859-1'?>
Haga el ejercicio de quitarlo, y generará el explorador un error al encontrar acentos o "ñ". El problema de este parámetro (siempre hay un pero) es que se genera un registro en blanco, que lo solucionaremos por medio de código. Usted deberá evaluar si prefiere darle mantenimiento a su código o a su archivo y cambiar la palabra México por México.
El archivo de las noticias es el siguiente:
El código en esta película se encuentra en cuatro puntos:
- En el cuadro no. 1, el cual carga el archivo XML y tiene la función para desplegar las letras.
- En el cuadro no. 2, leemos la siguiente noticia y la desplegamos.
- En el último cuadro o frame, borramos el anuncio y regresamos al cuadro 2.
- En el objeto de las letras, que realiza el efecto. Del desplazamiento aleatorio (con este pequeño truco se pueden hacer varios efectos, los cuales los analizaremos en otro tutorial).
Las instrucciones necesarias para carga un archivo XML son "más o menos" iguales:
- Crear el objeto (Ojo: no es una variable urlXML, es un objeto como un MovieClip).
- Se le indica a Flash la rutina a ejecutarse al momento de la carga. En este caso es la función "inicio".
- Se efectúa la carga por medio de la instrucción urlXML.load. El archivo debe de residir en el mismo directorio que la película, de lo contrario debe de indicarle el camino donde se encuentra el archivo.
indice = 1;
urlXML = new XML();
urlXML.onLoad = inicioXML;
urlXML.load("noticias.xml");
function inicioXML()
{
numNodos = 0;
todoXML = new XML;
noticias = new Array;
todoXML = this.firstChild.nextSibling;
if (todoXML.nodeName.toLowerCase() == "noticias")
{
noticias = todoXML.childNodes;
numNodos = noticias.length;
textoNoticia = noticias[indice].firstChild.nodeValue;
despliegaCadena(textoNoticia);
}
}
En la función de inicio es donde el desarrollador debe de manejar, según sus necesidades, la información. El siguiente paso es "vaciar" la información del objeto a una variable, en este caso es la de "todoXML". En dicha variable se encontrará prácticamente TODO el archivo. Por simple curiosidad, teclee un "trace" a la variable.
Note que se está haciendo una validación de que se leerá el archivo que contiene las noticias.
La manera más habitual de manejar un archivo XML (mejor dicho, de las que yo he visto) es vaciar los nodos a un vector o array. En este vector NO se encuentra la información "limpia", sino que están los nodos. Si usamos la analogía de un árbol, en el vector vaciamos a cada una de las ramas. Para acceder a la información de las ramas, necesitamos usar las instrucciones propias de XML. Para que vea que no le estoy mintiendo, añada un trace al vector "noticias".
Por último, extraemos la noticia. Para ello utilizamos la siguiente instrucción:
textoNoticia = noticias[indice].firstChild.nodeValue;
Aquí le indicamos que obtenga el "Valor del nodo", del primer hijito de la rama (o sea, de la ramita).
Por último, desplegamos la noticia. Como podrá observar, el tiempo de la noticia en la pantalla está determinado por el número de cuadros o frames en la película. En este ejemplo, tenemos 55 cuadros a una relación de 12 cuadro por segundo, la noticia durará aprox. 4 segundos. Si desea ampliar o reducir el tiempo, aumente o quite cuadros.
Para ello solo aumentamos el índice del vector y regresamos al cuadro 2. Note que por el problema de haber cambiado el formato, tenemos a los espacios en blanco como nodos, por lo que debemos saltar de dos en dos.
indice = indice + 2;
if (indice > numNodos-2){
indice=1;
}
gotoAndPlay (2);
Si sobrepasamos el número de nodos, regresamos al nodo 1 para volver a desplegar las noticias desde el principio. No es una manera "elegante", pero es más sencilla que añadir los acentos según la tabla que se presentó más arriba.
El centro de este truco se encuentra en el MovieClip de la letra, que se encuentra a un costado del cuerpo de la película:
En este caso la inicialicé con la letra "W" pues es la letra más ancha en este tipo de letra."Comic Sans MS". Aquí empieza un poco la historia:
Como por lo general las letras, dentro de una misma tipografía, tienen diferentes anchos en píxeles (una "i" mide menos píxeles que una W) si no contamos con los anchos adecuados y los manejamos de forma uniforme (digamos 10 pixeles por letra) el enunciado se ve con espacios en blanco después de las ies o eles, y amontonado en las emes y doble ues. Para evitar este problema, puede utilizar topografía que sea "más o menos" uniforme, como la tipografía "curier" y que sus noticias se parejas pero un poco feas, o añadir código para que cada una tenga el ancho preciso.
Dentro del MovieClip de la letra tenemos el siguiente código:
onClipEvent(load){
n = 0;
startx = Math.random()*550;
starty = Math.random()*100;
this._x = startx;
this._y = starty;
}
onClipEvent(enterFrame){
n +=5;
if(n<=100){
this._x = this.x*n/100 + startx*(100-n)/100;
this._y = this.y*n/100 + starty*(100-n)/100;
}
}
La primera función le indica a Flash que al ser creada (load) sus coordenadas iniciales estarán entre los 500 pixeles del x y los 100 del eje y, es decir, muy probablemente fuera del cuerpo mismo de la película Flash.
La siguiente función le dice a Flash: Cada vez que avances un cuadro, mueve 5 pixeles a la letra hacia unas coordenadas que le daremos en el cuadro 2. Es esto lo que crea el efecto aleatorio.
Creación y asignación de objetos:
Para crear un objeto, es decir, un MovieClip, por cada una de las letras, utilizamos la función "despliegaCadena" en el cuadro dos.
function despliegaCadena(cadena) {
x = 50;
for (i=0;i<cadena.length;i++){
duplicateMovieClip("Letra","Letra"+i,i);
mc = _root["Letra"+i];
mc.letraTexto = cadena.substr(i,1);
mc.efecto = 2;
mc.y = 40;
salto = 10;
letra = mc.letraTexto;
if("ABCDEFGHJKSTUVXYZImwx".indexOf(letra,0)<>-1) {
salto = 14;
}
if("MNOQR".indexOf(letra,0)<>-1) {
salto = 17;
}
if("W".indexOf(letra,0)<>-1) {
salto = 19;
}
if("ilj".indexOf(letra,0)<>-1) {
salto = 8;
}
mc.x = x;
mc.estado = 0;
x = x + salto + 2;
}
}
Duplicamos el objeto letra por cada una de las letras del enunciado, incluyendo los espacios en blanco. Calculamos las coordenadas donde debe quedar cada letra, calculando los anchos según la tipografía que se seleccione.
Nota: Si cambia de tipo de letra, debe de variar los anchos de las letras.
Por último vaciamos la información en el objeto y ¡listo! Las letras volarán en su pantalla.
Con este pequeño "truco", usted puede hacer muchos efectos, por ejemplo, que sus letras suban o bajen o se muevan aleatoriamente. En otro tutorial trataremos sobre estos efectos.
Por
Francisco Arce