- 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