navegacion

Navegación Flash Cs 4

1

Tomado de aulaclic.es

Los Botones

Uno de los elementos que más nos van a ayudar a la hora de añadir interactividad en el diseño son los botones.

En el ejemplo nos hemos ayudado de los botones para crear la navegación entre las diferentes secciones.

Así que el primer paso, después de haber creado la interfaz de la película en una capa, será crear e insertar los botones en una nueva capa para trabajar con mayor facilidad.

Para asignarle una acción a un botón es necesario darle un nombre de instancia. Para ello (y como hemos

visto en unidades anteriores) escribimos el nombre que queramos (al cual nos referiremos más tarde para llamar al botón) en el Inspector de Propiedades, en este caso lo hemos llamado equipo.

Luego, creamos otra capa para poder insertar las acciones que necesitarán nuestros botones, abrimos el Panel Acciones y añadiremos el código que deberá realizar el botón.

Ésta es la parte más importante pues deberemos decidir a qué evento responderá el botón. Existen varios eventos que son capturados en Flash, nombraremos los más importantes:


2

MouseEvent.MOUSE_DOWN: ejecuta la acción al presionarse el botón.

MouseEvent.MOUSE_UP: ejecuta la acción al soltarse el botón (después de haberlo presionado).

MouseEvent.MOUSE_OVER: ejecuta la acción al desplazar el cursor dentro del botón

MouseEvent.MOUSE_OUT: ejecuta la acción al desplazar el cursor fuera del botón.

Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si escribes, por ejemplo, mouse_up no será reconocido.

Para capturar el evento tenemos que añadir un escuchador que se encargue de estar pendiente de si sucede

ese evento, al elemento correspondiente. En nuestro caso, al botón. Además del evento, debemos de indicar el nombre de una función, que será el código que se ejecute al producirse el evento.

Por tanto, si no hemos creado ya esa función, la tenemos que definir, con el mismo nombre y pasándole como

parámetro el evento. Como siempre, entre las llaves {} introduciremos el código que queremos que ejecute la función.

miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(e:MouseEvent):void

{

//código de la función

}

Puedes ver los todos los eventos de ratón en este avanzado . Los eventos de ratón no sólo afectan a botones,

pueden ser capturados por cualquier objeto de visualización (MovieClips, controles de formulario, imágenes, etc...).

Cuando capturamos un evento, lo que realmente estamos utilizando es un string, una cadena de texto. Por

ejemplo al escribir MouseEvent. CLICK, estamos accediendo a la propiedad CLICK de la calse MouseEvent, que nos devuelve un string cuyo valor es 'click'.

Por tanto, nos daria lo mismo capturar este ecento utilizando:


Que utilizar la cadena equivalente:

miBoton.addEventListener('click', miFuncion);


3

Únicamente comentamos esto porque puede que a alguien le sea más cómodo utilizarlo de una forma u otra, o que no se extrañe si en algún ejemplo lo ve así.

Veamos todos los eventos que que porduce el ratón. Sólo se se producirán cuando la acción se realize sobre el elemento que tiene el escuchador:

MouseEvent.CLICK ("click") - Se procue al hacer clic (pulsar y soltar el botón ratón).

MouseEvent.DOUBLE_CLICK ("doubleClick") - Se produce al hacer doble clic.

MouseEvent.MOUSE_DOWN ("mouseDown") - Se produce al pulsar el botón del ratón (antes de soltarlo).

MouseEvent.MOUSE_MOVE ("mouseMove") - Se produce cuando el ratón se mueve sobre el elemento.

MouseEvent.MOUSE_OUT ("mouseOut") - Se produce cuando se saca el cursor de encima del elemento.

MouseEvent.MOUSE_OVER ("mouseOver") - Se produce cuando el ratón se coloca sobre el objeto.

MouseEvent.MOUSE_UP ("mouseUp") - Se produce cuando se suelta el botón del ratón.

MouseEvent.MOUSE_WHEEL ("mouseWheel") - Se produce al presionar la rueda del cursor.

MouseEvent.ROLL_OUT ("rollOut") - Se produce cuando se mueve el ratón fuera del elemeto.

MouseEvent.ROLL_OVER ("rollOver") - Se produce cuandos e mueve el ratón sobre el elemento.

Por ejemplo, el flash que veremos a continuación tiene el siguiente código que hace que al producirse un

evento, se muestre su nombre:

texto.addEventListener(MouseEvent.CLICK, funcion);

texto.addEventListener(MouseEvent.DOUBLE_CLICK, funcion);

texto.addEventListener(MouseEvent.MOUSE_DOWN, funcion);

texto.addEventListener(MouseEvent.MOUSE_MOVE, funcion);

texto.addEventListener(MouseEvent.MOUSE_OUT, funcion);

texto.addEventListener(MouseEvent.MOUSE_OVER, funcion);

texto.addEventListener(MouseEvent.MOUSE_UP, funcion);

texto.addEventListener(MouseEvent.MOUSE_WHEEL, funcion);

texto.addEventListener(MouseEvent.ROLL_OUT, funcion);

texto.addEventListener(MouseEvent.ROLL_OVER, funcion);

function funcion (e:MouseEvent):void {

texto.text="\n"+e.type;


4

}

Observaras que no vemos todos los eventos, porque algunos se producen a la vez o my seguidos. Por ejemplo,

al abandonar el cuadro de texto se produce MOUSE_OUT y ROLL_OVER. Como este último se produce después, es el que aparece en la caja de texto.

Controladores de la línea de tiempo

Una vez insertados los botones y definidos los eventos sobre los que deben actuar, tendremos que decidir

qué queremos que hagan.

De esta forma podremos crear dinamismo entre nuestras secciones.

Imagina que tenemos la siguiente línea de tiempo:

Observa la capa Contenido. En ella se encuentran todo el contenido de las secciones.

De esta forma, si no aplicásemos ninguna acción sobre la línea de tiempo, todas las secciones se ejecutarían

una seguida de la otra. Lo que queremos conseguir es que se ejecute la primera (para mostrar la sección principal) y el cabezal se pare hasta nueva orden (para mostrar la segunda).

Para ello utilizaremos la función stop().

Esta función sirve para parar el cabezal de la línea de tiempo donde sea colocada. Así que seleccionamos el último fotograma de la sección y abrimos el Panel Acciones.

Allí deberemos escribir únicamente la línea:

stop();

Esto hará que cuando la animación llegue a ese punto se detenga a la espera de nueva orden.


5

Nosotros hemos colocado las acciones en una capa aparte llamada Acciones para así poder acceder más

rápido a ella. El método es el mismo, solamente habrá que crear fotogramas claves en aquellos sitios en los que queramos insertar un stop().

Ya hemos conseguido detener la presentación. Pero, ¿cómo hacemos que se muestre la segunda? Muy sencillo.

Los botones nos ayudarán a desplazar el cabezal por la línea de tiempo. Así que modificaremos el código de uno de los botones:

De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se desplazará hasta el fotograma que tiene la etiqueta "Encuentranos" y reproducirá a partir de allí.

Si añadimos un stop() en el último fotograma de la segunda sección, cuando éste se reproduzca se parará y el contenido permanecerá estático en espera de una nueva orden.

Existe otra forma, muy útil, para nombrar los fotogramas. Del mismo modo que dábamos un nombre de instancia a un botón lo haremos con un fotograma.

Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a éste:


6

Además de estos controladores podemos utilizar también:

gotoAndStop(fotograma), que situará el cabezal en el fotograma indicado y parará la reproducción.

play(), que hará que la reproducción prosiga en el fotograma en el que se encuentre el cabezal.

prevFrame(), que hará que el cabezal retroceda al fotograma anterior al que nos encontramos.

nextFrame(), que hará que el cabezal avance al fotograma siguiente al que nos encontramos.

Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a escenas anteriores o siguientes. Así que veremos qué son las escenas para poder utilizarlos también.

Las Escenas

Flash permite el uso de escenas para separar diferentes temas en una sola película. Se suelen utilizar sobre

todo en animaciones, donde una parte de la acción transcurre sobre un fondo y la siguiente sobre otro completamente diferente.

De este modo podemos usar las escenas para representar diferentes secciones muy diferentes en nuestra

película, por ejemplo, crear una escena para el cargador, otra para la película principal y una tercera para una

sección que se diferencie completamente del resto y nos sea más cómodo trabajar con ella independientemente.

A pesar del hecho de que las escenas se trabajan como líneas de tiempo diferentes, al crear el archivo SWF éstas se alinean en orden reproduciéndose una detrás de otra.

Por ello, al publicar el documento los fotogramas de las escenas se numerarán respecto a esto. Es decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda escena comenzará en el fotograma 51.

Todo esto hace que las escenas, en algunos casos estén desaconsejadas por las siguientes razones:

El uso de escenas obliga al usuario a descargar el documento en su totalidad, a pesar de que es posible que no navegue por todas las secciones. Existe la posibilidad, como veremos más adelante, de cargar en cualquier momento archivos SWF para reproducirlos en la pantalla principal. De esta forma emularíamos el uso de las escenas cargando diferentes documentos dependiendo de la sección a mostrar.


7

Cuando añadimos ActionScript a nuestras escenas el resultado puede ser, a veces, imprevisible. Como hemos explicado anteriormente, al crearse un archivo con una línea de tiempo continua las acciones a realizar pueden ser inesperadas.

En el Panel Escena (ábrelo desde Ventana → Otros paneles → Escena) podrás ver las escenas actuales de la

película.

En principio solamente encontrarás una (Escena 1), es posible añadir más escenas pulsando el botón Añadir

escena . Para cambiar el nombre de una escena haz doble clic sobre su nombre en el panel y escribe el que quieras.

Puedes eliminar una escena utilizando el botón Eliminar escena o duplicarla con el botón Duplicar escena .

Como hemos comentado antes (y si no existe código ActionScript que modifique esto) las escenas se

reproducen una después de la otra en el orden en el que se encuentran en el Panel Escena. Puedes cambiar este orden con solo arrastrar y colocar la escena en cuestión en su lugar correspondiente.

Trabajar con una escena es muy sencillo, basta con seleccionarla en el panel y su contenido se mostrará en el Escenario. Podrás trabajar con ella como si se tratase de una película independiente.

Pero veamos cómo podemos utilizar ActionScript para desplazarnos de escena a escena.

Antes hemos mencionado las funciones prevScene() y nextScene(). Estos comandos hacen que el cabezal de reproducción se desplace de una escena a otra en el orden en el que se encuentran en el Panel Escena.

Pero existe otra posibilidad.

Según el ejemplo que estamos siguiendo creamos una nueva escena llamada escena_otros. En el botón Otros

Restaurantes hemos añadido el siguiente código:

import flash.events.*;


function miFuncion(event:MouseEvent):void

{


8

gotoAndPlay("escena_otros", 1 );

}

Con esto estamos indicando que al soltarse el botón el cabezal se desplace al fotograma 1 de la escena escena_otros y empiece a reproducirse a partir de allí.

Los MovieClips

En el tema de Clips de Película vimos que se tratan de objetos con línea de tiempo propia.

Podemos utilizarlos para incluir elementos en nuestra película con una animación independiente. De este

modo aunque la película principal esté detenida el clip seguirá actuando según su propio cabezal de reproducción.

Existen métodos para manejar la línea de tiempo de los clips, idénticas a las anteriores, y que veremos a continuación.

Lo primero que deberemos aprender es a acceder a las propiedades y métodos de los objetos. Esto es un recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con un ejemplo.

Queremos que al pulsar un botón el movieclip avance en su línea de tiempo hasta su fotograma 20.

Fíjate en cómo hemos escrito la función. Primero hemos señalado el clip sobre el que queremos actuar escribiendo su nombre de instancia:

Y después de añadir un punto hemos indicado la función que se ejecutará.


function miFuncion(event:MouseEvent):void {

miClip.gotoAndPlay(20);

}


9

De esta forma (y como hemos visto en temas anteriores) podemos acceder a todas las propiedades del clip. Escribiendo esta línea haremos que el clip se haga invisible:


function miFuncion(event:MouseEvent):void { miClip.visible = false; }

Para hacerlo un poco más complicado podríamos encontrarnos en el siguiente supuesto. Imagina que tenemos

un movieclip llamado clipPadre. Dentro de este clip de película tendremos más símbolos y uno de ellos puede ser otro movieclip llamado clipHijo.

¿Cómo accedemos a las propiedades y funciones de clipHijo? Muy fácil. Suponiendo que estamos trabajando desde la película principal donde tenemos insertado el clipPadre, escribiremos lo siguiente:

Así haremos que la reproducción de clipHijo se reanude.

clipPadre.clipHijo.play();

Pero, ¿qué pasa si queremos ejecutar la orden desde dentro de clipPadre? Imagina que dentro del movieclip

hay un botón y el clip clipHijo. Queremos que al pulsar el botón se reproduzca el fotograma 20 de clipHijo, entonces deberíamos escribir lo siguiente en las acciones del botón:

import flash.events.*;



{

clipHijo.gotoAndPlay(20);

}

Como puedes ver esta vez no hemos mencionado a clipPadre en la línea de código. No es necesario porque ya nos encontramos dentro de él.


10

También podemos referenciarnos a elementos superiores utilizando la propiedad parent. De este modo si nos encontrásemos dentro de clipHijo y quisiésemos avanzar al fotograma 20 de clipPadre podríamos escribir:

with (parent) {

this.parent.gotoAndPlay(20);

}

Donde this indica el clip donde nos encontramos y parent hace que nos coloquemos en el nivel

inmediatamente superior.

De esta forma, sólo deberemos escribir la ruta de contenedores o padres hasta llegar al objeto del cual queremos modificar o ejecutar un método.

Podemos hacer que el elemento padre escuche eventos producidos dentro del hijo, con lo que denominamos propagación en burbuja. Puedes ver cómo en este avanzado .

Eventos de hijo a padre

Crear nuestros propios eventos

A parte de los eventos que tiene Flash, podemos producir los nuestros propios. Basta con utilizar el siguiente

código:

objeto.dispatchEvent(new Event("miNombreDeEvento"));

El método dispatchEvent es el que hace que se produzca el evento indicado como parámetro. Podemos pasarle un evento existente, o crear uno propio utilizando new Event indicando el nombre que le queramos dar.

En el ejemplo anterior, podemos capturar el evento como hemos visto hasta ahora:

this.addEventListener("miNombreDeEvento", miFuncion);

Propagación de eventos

Al crear un evento, podemos añadir un parámetro booleano más, la propagación. En resumen, cuando hay

propagación el evento se propaga fuera del MovieClip hacia los elementos padres, permitiendo así que estos puedan escuchar ese evento.


11

Por ejemplo, podemos lanzar un evento personalizado con propagación así:

objeto.dispatchEvent(new Event("miNombreDeEvento", true));

Esto resulta muy útil. Imaginemos que tenemos un MovieClip con varios botones, destinado a ser utilizado

dentro de otro MovieClip para navegar por él. Podríamos introducir el código directamente utilizando parent,

pero sólo nos serviría para una acción específica. ¿Pero y si queremos utilizar el mismo archivo en otros proyectos?

Con lo que hemos visto, bastaría con poner el siguiente código en cada botón:

botonAvanzar.addEventListener(MouseEvent.MOUSE_UP, miFuncion);


{

dispatchEvent(new Event("botonAvanzarPulsado", true));

}

Luego, en la película padre, bastaría con capturar el evento botonAvanzarPulsado como hemos visto hasta ahora, y dar la funcionalidad que queramos al botón.

Por ejemplo, esto es lo que hemos hecho en las páginas del periódico digital, ejercicio propuesto que encontrarás al final del tema.

Por lo demás, el funcionamiento de un clip no se diferencia en nada a la línea de tiempos de cualquier otra película. Podemos etiquetar los fotogramas de igual modo para llamarlos directamente por su nombre:

miClip.gotoAndStop("etiqueta");

Y saltar de fotograma a fotograma para manejar las animaciones de la forma en que nosotros queramos.

Igual que vimos antes con los botones, los movieclips tienen manejadores de eventos que nos permitirán ejecutar código dependiendo de los eventos que se produzcan sobre ellos.


12

Responden a los a todos los eventos de ratón que ya hemos visto, y cualquier evento que comparta con el resto de objetos de visualización (DisplayObject). Vamos a ver los eventos específicos del MovieClip:

Event.ADDED ("added") - Se produce cuando el movieclip se añade a la lista de visualización de un contenedor (contenedor.addChild(miClip)).

Event.ENTER_FRAME ("enterFrame") - Se produce cuando la cabeza lectora entra en un fotograma, pero también se produce constantemente si sólo hay un fotograma o si la reproducción está parada. En este caso, depende de la velocidad del MovieClip. Por ejemplo, un MovieClip que se reproduce a 24 FPS produce este evento 24 veces por segundo. Recuerda este evento porque es muy útil.

Event.EXIT_FRAME ("exitFrame") - Igual que el anterior, pero se produce al salir del fotograma.

Event.REMOVED ("removed") - Se produce cuando el MovieClip se quita de la lista de visualización de un contenedor (contenedor.removeChild(miClip)).

Las Variables

Las variables son contenedores donde podremos almacenar información para trabajar con ella. Esta

información puede ser modificada y leída.

Aunque parece un concepto muy complejo su uso es bastante sencillo.

En ActionScript existen muchos tipos diferentes de variables, de hecho en una variable podemos guardar

cualquier tipo de objeto. Vamos a ver ahora los más comunes, los que emplearemos para guardar texto, números o valores booleanos (verdadero - falso):

Boolean: o booleano, puede almacenar sólo dos valores, o true (verdadero) o false (falso).

Number: puede almacenar números enteros o decimales, positivos o negativos. El signo decimal en ActionScript es el punto (.). Podrás realizar operaciones matemáticas con estas variables.

String: puede almacenar cadenas de caracteres, es decir, un conjunto de caracteres alfanuméricos. Las variables de tipo String deben ir entre comillas dobles ("cadena") o ('cadena').

Array: en los arrays o matrices podemos almacenar distintos valores en distintas posiciones. A estas posiciones accedemos con un índice numérico (utilizando 0 para la primera posición) que indicamos entre corchetes tras el nombre del array (nombreArray[3]=valor;). Puedes ver un ejemplo práctico de los arrays en este básico.

Arrays

Crear un array

Como siempre, comenzamos declarando el array, con la sintaxis var miArray:Array. Después podemos asignarle los valores de varias formas:


13

//Asignando el valor a cada posición

var miMatriz1 :Array = new Array();

miMatriz1[0] = "Lunes";

miMatriz1[1] = "Martes";

miMatriz1[2] = "Miércoles";

miMatriz1[3] = "Jueves";

miMatriz1[4] = "Viernes";

miMatriz1[5] = "Sábado";

miMatriz1[6] = "Domingo";

//O asignándolos todos a la vez

var miMatriz2:Array = new Array("Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo");

var miMatriz3:Array = ["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];

En cualquiera de los casos anteriores obtenemos un array de 7 posiciones con los días de la semana.

Recorrer un array

Una forma cómoda de recorrre una Array es con un bucle for, como en el siguiente ejemplo:

var miMatriz:Array = ["Lunes","Martes","Miércoles",

"Jueves","Viernes","Sábado","Domingo"];

for (var i:Number = 0; i < miMatriz.length(); i++) {

trace(miMatriz[i]);

}

Lo que hacemos es declarar una variable i que hará de contador.


14

El array es un objeto con métodos. En este caso, el método length nos devuelve el número de elementos del

array. Ten el cuenta que el primer elemento del array es el elemento 0. Por tanto, para un array de 2 elementos, debemos recorrer las posiciones 0 y 1 . Por eso, iniciamos el contador en 0, y repetimos el bucle

mientras el contador sea menor que el número de elementos.

Como resultado, el se mostrará una vez cada elemento en el panel de salida.

Antes de utilizar una variable, tenemos que declararla. Para declarar (crear) una variable sólo tendrás que escribir la siguiente línea:

var nombreVariable:tipoVariable = valorVariable;

Veamos el ejemplo para verlo más claro. Haremos que el clic sobre el movieclip estrella sólo se ejecute si el detalle no está aún mostrado.

Y al revés. Que sólo se ejecute el código al hacer clic en el detalle si éste se encuentra fuera.

Fíjate en la primera líneas, se declaran la variable booleana, que dice si la estrella se encuentra activada.

var estrella_activada:Boolean = true;

estrella.addEventListener(MouseEvent.CLICK,funcion_desaparece);

function funcion_desaparece(event:MouseEvent):void {

if (estrella_activada==true) {

estrella.gotoAndPlay("desaparece");

detalle.gotoAndPlay("aparece");

estrella_activada=false;

}

}


15

detalle.addEventListener(MouseEvent.CLICK, funcion_aparece);

function funcion_aparece(event:MouseEvent):void {

if (estrella_activada==false) {

estrella.gotoAndPlay("aparece");

detalle.gotoAndPlay("desaparece");

estrella_activada=true;

}

}

Al hacer clic en el movieclip estrella se evalúa la variable estrella_activada si ésta es verdadera (true) entonces permite que se realicen las acciones. En caso contrario, sale de la condición.

Al entrar en la condición se desplazan los cabezales y se modifica el valor de la variable a falso para que la próxima vez que intente entrar no puedan ejecutarse las acciones.

En el click del clip detalle se evalúa de nuevo la variable. Esta vez debería estar en false porque si el detalle está fuera es porque ya se ha hecho clic sobre la estrella y ha pasado por el anterior bloque.

A medida que vayamos avanzando iremos usando otras variables de diferentes tipos. Verás que su uso no difiere mucho al que hemos explicado ahora.

Antes de terminar con este tema deberíamos ver algo muy importante: el ámbito de las variables.

Esto es, el sitio donde puedan utilizarse las variables.

Nota: Para explicar el ámbito de las variables utilizaremos la función trace(variable); que envía el contenido

de la variable al Panel Salida, lo que nos permitirá ver el valor que va tomando. Puedes abrir este panel desde Ventana → Salida.

Existen 2 ámbitos de variables: el local y el de línea de tiempo.

Las variables declaradas en la línea de tiempo pueden utilizarse en cualquier fotograma posterior y su contenido se mantendrá intacto.


16

Por ejemplo, declaramos la siguiente variable en el fotograma 1:

var miVariable:String = "Esta es mi variable";

Y en el fotograma 15 colocamos las siguientes líneas en el Panel Acciones:

trace(miVariable);

stop();

Verás como al probar la película en el Panel de Salida aparece escrito el Esta es mi variable, que es el texto que le hemos dado.

Ten en cuenta que si declaras la variable en el fotograma 2 no estará disponible en fotogramas

anteriores, es decir en el 1.

Las variables declaradas en un ámbito local sirven sólo para un bloque de función. Veamos este ejemplo:


var miVariable2:String = "Esta también lo es";

function miFuncion() {

var miVariable:Number = 1;

trace(miVariable);

trace(miVariable2);

miVariable2 = "La cambio";

var otraVariable:Number = 10;

trace(otraVariable);

}

miFuncion();


17

trace(miVariable);

trace(miVariable2);


Antes de la función, en la línea de tiempo definimos dos variables miVariable y miVariable2.

Después definimos una funcióndefinimos una función (hablaremos de ellas más a fondo en el siguiente apartado).

En esta función se declara una variable (miVariable). Tiene el mismo nombre que la variable de la línea de

tiempo, pero no es la misma variable, es local a la función. Si la enviamos al Panel Salida comprobaremos que

muestra el valor asignado dentro de la función (1 ). En cambio, si dentro de la función mostramos el contenido

de miVariable2, definida en la línea de tiempo veremos Esta también lo es que es su valor inicial, ya que no la

hemos reemplazado por otra local que se llame igual. Lo modificamos. Por último, hemos declarado y mostrado una última variable local (otraVariable) con valor 1 0.

Recuerda que la función no se ejecutará hasta que no la llamemos, y es lo que hacemos en la siguiente línea después de definirla.

A continuación, en la línea de tiempo mostramos el contenido de miVariable, y comprobamos que muestra el

valor inicial Esta es mi variable. La función no la ha alterado, ya que aunque compartían nombre, eran dos variables distintas.

En cambio al mostrar el valor de miVariable2 comprobamos que si que ha cambiado, mostrando La cambio. Como esta variable no es local a la función, si la alteramos si que cambia.

Por último mostramos el contenido de otraVariable. Como esta había sido definida dentro de la función, es una variable local, por lo que fuera de la función no existe, no está definida, por lo que muestra UNDEFINED.

Por tanto, las variables declaradas dentro de la función son locales, y sólo existen dentro de ésa

función. Si dentro de una función queremos emplear una variable definida en la línea de tiempo, no debemos de definir una variable local con el mismo nombre.

Las variables de ámbito global serían aquellas accesibles indistintamente desde cualquier parte del

proyecto, desde distintos MovieClips. En ActionScript 3 ya no se permite el uso de este tipo de variables, que

en la versión anterior se hacía precediendo el nombre de la variable con _global.. No obstante, podemos simular variables globales creando una clase, como se explica en este avanzado

http://www.aulaclic.es/flash-cs4/a_18_8_1.htm�


18

Una variable global es aquella a la que podemos acceder desde cualquier parte del proyecto.

En ActionScript 2 podíamos crear una variable global de la siguiente manera:

//Código ActionScript 2

_global.miVariable = "Esta es una variable global";

Esto ya no es válido en ActionScript 3. Pero en su lugar podemos crear una clase y guardar en ella estas variables.

La clase la escribimos en un archivo . as (Archivo → Nuevo → Archivo de ActionScript).

Aunque no es obligatorio, lo habitual es crear un patrón de diseño Singleton. No vamos a detallar que és. A

grandes rasgos, es una forma de escribir una clase de manera que no se creen objetos distintos, y se utilice

una instancioa única. Recordemos que si tenemos varios objetos, cada uno puede asignar valores distintos a sus variables.

Su estrucura en el archivo as (al que llamaremos variablesGlobales. as, el mismo nombre que daremos a la clase)sería la siguiente:

package {

public class variablesGlobales {

// Aquí declaramos nuestras variables

public var miVariableTexto:String = "Hola";

public var miVariableNumero:Number = 100;

///

private static var instancia:variablesGlobales;

public function variablesGlobales() {

}

public static function variables():variablesGlobales {

if (!instancia) {

instancia = new variablesGlobales();

}

http://es.wikipedia.org/wiki/Singleton�


19

return instancia;

}

}

}

Es importante declarar nuestras variables como public var para que puedan ser accedidas desde fuera.

Guardamos el archivo en la misma carpeta en la que estamos trabajando.

Ahora podemos acceder a enuestras variables con la siguiente sintaxis:

variablesGlobales.variables().nombreVariable

Por ejemplo:

trace(variablesGlobales.variables().miVariableTexto);

variablesGlobales.variables().miVariableNumero = 5;

Nota: en vez de variablesGlobales podemos emplear el nombre que queramos, cambiándolo en todos los sitios

donde corresponda. De igual manera, podemos cambiar el nombre del método con el que accedemos a las

variables (variables()). Lo habitual es llamarlo getInstance() porque lo que realmente hace es devolver la instancia única del objeto.

Existen 2 ámbitos de variables: el local y el de línea de tiempo.

Las variables declaradas en la línea de tiempo pueden utilizarse en cualquier fotograma posterior y su contenido se mantendrá intacto.

Por ejemplo, declaramos la siguiente variable en el fotograma 1:


Y en el fotograma 15 colocamos las siguientes líneas en el Panel Acciones:

trace(miVariable);


20

stop();

Verás como al probar la película en el Panel de Salida aparece escrito el Esta es mi variable, que es el texto que le hemos dado.

Ten en cuenta que si declaras la variable en el fotograma 2 no estará disponible en fotogramas

anteriores, es decir en el 1.

Las variables declaradas en un ámbito local sirven sólo para un bloque de función. Veamos este ejemplo:


var miVariable2:String = "Esta también lo es";

function miFuncion() {

var miVariable:Number = 1;

trace(miVariable);

trace(miVariable2);

miVariable2 = "La cambio";

var otraVariable:Number = 10;


}

miFuncion();

trace(miVariable);

trace(miVariable2);


Antes de la función, en la línea de tiempo definimos dos variables miVariable y miVariable2.


21

Después definimos una funcióndefinimos una función (hablaremos de ellas más a fondo en el siguiente apartado).

En esta función se declara una variable (miVariable). Tiene el mismo nombre que la variable de la línea de

tiempo, pero no es la misma variable, es local a la función. Si la enviamos al Panel Salida comprobaremos que

muestra el valor asignado dentro de la función (1 ). En cambio, si dentro de la función mostramos el contenido

de miVariable2, definida en la línea de tiempo veremos Esta también lo es que es su valor inicial, ya que no la

hemos reemplazado por otra local que se llame igual. Lo modificamos. Por último, hemos declarado y mostrado una última variable local (otraVariable) con valor 1 0.

Recuerda que la función no se ejecutará hasta que no la llamemos, y es lo que hacemos en la siguiente línea después de definirla.

A continuación, en la línea de tiempo mostramos el contenido de miVariable, y comprobamos que muestra el

valor inicial Esta es mi variable. La función no la ha alterado, ya que aunque compartían nombre, eran dos variables distintas.

En cambio al mostrar el valor de miVariable2 comprobamos que si que ha cambiado, mostrando La cambio. Como esta variable no es local a la función, si la alteramos si que cambia.

Por último mostramos el contenido de otraVariable. Como esta había sido definida dentro de la función, es una variable local, por lo que fuera de la función no existe, no está definida, por lo que muestra UNDEFINED.

Por tanto, las variables declaradas dentro de la función son locales, y sólo existen dentro de ésa

función. Si dentro de una función queremos emplear una variable definida en la línea de tiempo, no debemos de definir una variable local con el mismo nombre.

Las variables de ámbito global serían aquellas accesibles indistintamente desde cualquier parte del

proyecto, desde distintos MovieClips. En ActionScript 3 ya no se permite el uso de este tipo de variables,

que en la versión anterior se hacía precediendo el nombre de la variable con _global.. No obstante, podemos simular variables globales creando una clase, como se explica en este avanzado

Las Funciones

Como habrás visto en los ejemplos anteriores, una función es un bloque de código que podemos utilizar en

cualquier parte del archivo, siempre que haya sido definida en el mismo o en un fotograma anterior. Si definimos una función dentro de otra tendrá un ámbito local, como ocurría con las variables.

Como ya hemos visto, las funciones se definen con la palabra function. El ejemplo sencillo sería:


22

function saludar() {

trace('Hola');

}

Lo único que hace es mostrar Hola en el panel de salida.

Para que se ejecute la función, debemos de llamarla en alguna parte del código:

saludar();

Parámetros o argumentos

Como ves, crear funciones es bastante sencillo. Además podemos crear funciones un poco más complejas enviándole parámetros:

function saludar(nombre:String) {

trace('Hola '+nombre);

}

Observa que en el parámetro hemos indicado el tipo de dato que será, es este caso del tipo String.

Ahora para llamarla usaríamos por ejemplo:

saludar("Bruno"); //Escribiría: Hola Bruno

Podemos envair varios parámetros separados por comas. Si al parámetro le damos un valor, este se convertirá en un parámetro opcional, y podemos enviarlo al llamar a la función o no. Por ejemplo:

function saludar(nombre:String, pregunta:String='¿qué tal?') {

trace('Hola '+nombre+' '+pregunta);

}

Ahora podemos llamarla de dos formas: enviando todos los parámetros, o no enviando los parámetros opcionales, por lo que tomará el valor por defecto:


23

saludar("Bruno"); //Escribiría: Hola Bruno ¿qué tal?

saludar("Bruno", "¿cómo va?"); //Escribiría: Hola Bruno ¿cómo va?

Habrás observado que cuando creábamos una función para tratar un evento siempre recogemos un parámetro:


function miFuncion(e:MouseEvent):void {

gotoAndPlay(1);

}

El parámetro que recogemos es el evento. Cada evento tiene unos métodos que podemos emplear si definimos

su tipo. En el ejemplo anterior, declaramos el parámetro e que era del tipo MouseEvent. En las funciones

activadas por eventos siempre debemos de recoger ese parámetro, aunque si no lo pensamos usar no es necesario especificar su tipo.

Una propiedad muy útil es event.target (en el ejemplo anterior se usaría e.event.target) que nos indica el objeto que ha producido el evento.

Esto nos permite utilizar la misma función para varios objetos, pero que la función sólo modifique propiedades del elemento que la llama en cada momento.

Devolver valores.

En vez de que la función realice una acción, también podemos utilizarla para que devuelva valores u objetos. Por ejemplo:

function saludar(nombre:String):String {

return 'Hola '+nombre;

}

Observa que hemos indicado detrás de la función el tipo de valor a devolver (en este caso devolverá un String), tal como hacíamos con las variables.


24

En muchos ejemplos habrás visto que el tipo indicado es :void. Esto no es un tipo de datos, si no todo lo contrario. :void indica que esa función no devuelve ningún valor.

El valor que devuelve es lo indicado la instrucción return.

En el ejemplo anterior la función no realiza ninguna acción, sólo devuelve un valor:

saludar("amigo"); //No haría nada

trace(saludar("amigo")); //Mostraría en alida: Hola amigo

var saludo:String = saludar("amigo"); //Guarda en la variable saludo

//Lo que devuelve la función

Contenedores y listas de visualización

Con respecto a los elementos que vemos en nuestra película con ActionScript 3, tenemos que tener claros un

par de conceptos:

Los objetos que vemos son llamados objetos visibles o de visualización, y todos pertenecen a la calse DisplayObject o a una subclase heredada de esta. Siempre han de estar dentro de un contenedor para que se vean.

Los objetos están agrupados dentro de un contenedor, que hace de elemento padre. A su vez, dentro de un contenedor podemos tener otros contenedores con sus respectivos elementos. Los contenedores pertenecen a la clase DisplayObjectContainer, y aunque pueda parecer lioso, a su vez un contenedor es un objeto de visualización, y se puede tratar como tal.

La lista de visualización es cómo están ordenados los objetos dentro del contenedor, y establece el orden de apilamiento de los objetos.

Los contenedores:

En nuestra película podemos tener cuatro tipos de contenedores:

La escena (stage). Es el contenedor general de nuestra película. Todo lo que se ve, está dentro de la escena.

Loader. Nos permite cargar un archivo externo en él. Lo veremos en el siguiente apartado.

MovieClip. Aunque normalmente no lo tratamos como tal, un MovieClip contiene un archivo SWF con una línea de tiempo propia. Por ejemplo, dentro de él podemos acceder a los distintos símbolos que lo forman.

Sprite. Es como una carpeta, a la que podemos ir añadiendo y quitando objetos. Podemos crear tantos sprites como queramos.


25

El que más utilizaremos como contenedor será el Sprite, aunque en muchos casos lo hagamos directamente

sobre la escena.

Declararamos un Sprite como cualquier objeto:

var miContenedor:Sprite = new Sprite;

Ahora tenemos un contenedor, pero vacío. Podemos añdirle elementos que pasaran a ser elementos hijos del contenedor. Para ello podemos utilizar uno de los métodos de los contenedores:

miContenedor.addChild(miObjeto1);

miContenedor.addChild(miObjeto2);

Ahora tenemos el contenedor con dos objetos. Pero aún no se ven, porque no hemos añadido el contenedor

al elemento principal, a la escena. Vamos a hacerlo:

addChild(miContenedor);

Ahora ya vemos el contenedor. Bueno, realmente no vemos el contenedor, vemos los elementos de visualización que contiene.

Nuestro contenedor tiene una lista de visualización con dos elementos.

Listas de visualización:

Los elementos añadidos a un contenedor forman su lista de visualización. La posición dentro de esta lista

establece el orden de apilamiento. Es decir, los objetos con un índice menor se verán por debajo de los elementos con un índice mayor.

Vamos a ver cómo accedemos y tratamos estos elementos con los métodos y propiedades de

DisplayObjectContainer.

numChildren - Esta propiedad nos devuelve el número de elementos de la lista. En el ejemplo anterior, miContenedor.numChildren devuelve 2.

getChildIndex(objeto) - Nos permite conocer el índice de un elemento.

addChild(objeto) - Añade el elemento al final de la lista, encima del resto.

addChildAt(objeto, indice) - Añade un elemento y nos permite indicar en qué posición colocarlo. Por ejemplo, si tenemos el la lista el objeto3, y queremos añadir el objeto7 justo antes que este para que quede debajo, podemos emplear:


26

addChildAt(objeto7, getChildIndex(objeto3)); para saber el índice del objeto3 y colocar ahí el objeto7, desplazando el resto hacia el final.

setChildIndex(objeto, indice) - Nos permite cambiar el orden de un objeto dentro de la lista.

getChildByName(nombre_instancia) - Nos permite obtener un objeto conociendo su nombre de instancia.

getChildAt(índice) - Nos permite obtener un objeto conociendo su índice.

contains(objeto) - Devuelve verdadero si el objeto ya está en la lista.

removeChild(objeto) - Quita el objeto indicado de la lista.

removeChildAt(objeto) - Quita de la lista el objeto con el índice indicado.

Nota: Antes de quitar un objeto de la lista, es recomendable borrar sus eventos si los tiene, ya que

esto puede producir errores. Además, si no los quitamos, el objeto sigue ocupando memoria. Para borrar un

evento, utilizamos el método removeEventListener, con los mismos parámetros que empleamos en addEventListener. Por ejemplo:

objeto.removeEventListener(Event.ENTER_FRAME, miFuncion);

Cargando Archivos

Ahora veremos como modificar el contenido de un clip de película y cargar en él otro archivo SWF o

incluso una imagen con formato JPG, GIF o PNG.

carga.addEventListener(MouseEvent.MOUSE_UP, abrir);

function abrir (e:Event): void{

var miCargador:Loader = new Loader();

miCargador.load(new URLRequest("mapa.swf"));

miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE, insertMovie);

function insertMovie(evt:Event):void{

addChild(miCargador);

}

}

Vemos que empleamos un contenedor Loader para cargar el archivo, al que le indicamos el archivo a cargar en su método load.


27

var miCargador:Loader = new Loader(); miCargador.load(new URLRequest("mapa.swf"));

Una vez cargado, lo añadimos a un contenedor o directamente a la escena, como en el ejemplo, para que se visualice.

addChild(miCargador);

Pero esto no lo hemos hecho directamente, si no que lo hemos hecho en el siguiente evento:

miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE, insertMovie);

¿Por qué? Porque este evento se produce cuando el archivo está completamente cargado. Esto evita que intentemos mostrar un objeto que aún no se ha cargado del todo.

Utilizaremos un nuevo cargador si queremos añadir otro archivo. Por ejemplo, si queremos ir mostrando

imágenes en la misma posición, cada vez que queramos cambiar la imagen sólo habrá que volver llamar al método load(), que reemplazará el contenido actual del cargador por la nueva imagen.

Sigue el siguiente ejercicio paso a paso para ver cómo Crear una película cargando archivos

Ejercicio paso a paso.

Como siempre, utilizaremos el tipo de documento Archivo de flash (AS 3.0).

Vamos a crear el elemento con forma de estrella. Para el resto, seguiremos los mismos pasos:

1. Haz clic en el botón Nuevo Símbolo al pie de la Biblioteca.

2. Dale un nombre, en nuestro ejemplo estrella, y selecciona Clip de película.

3. Dibuja la forma que quieras mostrar en el escenario.

4. Con ayuda del panel Alinear (Ctrl + K) coloca la forma centrada con respecto al punto de referencia (mira el ejemplo).

5. Haz clic en Escena 1 en la línea de tiempo para volver a la película principal.


28

6. Arrastra el símbolo que acabamos de crear y añádelo al Escenario.

7. Dale un nombre de instancia significativo al cual nos referiremos más tarde, en nuestro ejemplo hemos usado estrella.

8. Crea una nueva capa y añade la siguiente línea en el Panel Acciones para el fotograma 1 de la película principal:

9. estrella.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);

10. function arrastrar(event):void { //Nombre de la nuestra función

11. estrella.startDrag(); //Nombre del símbolo

12. }

13.

14. estrella.addEventListener(MouseEvent.MOUSE_UP,soltar);

15. function soltar(event):void { //Nombre de la nuestra función

16. estrella.stopDrag(); //Nombre del símbolo

}

Este código hace que al pulsar el ratón, se comience a arrastrar el elemento, y al soltarlo deje de hacerlo.

17. Guarda el documento con el nombre estrella, publica la película desde Archivo → Publicar, y ciérralo.

18. Repite estos pasos para cada una de las formas que quieras añadir.

Ahora pasaremos a crear la película principal.

1. Abre un documento en blanco.

2. Dibuja un rectángulo y dale las dimensiones del documento utilizando el botón del Panel Alinear. Puedes hacer que tome un mapa de bits como fondo seleccionando Mapa de bits en el desplegable Tipo del Panel Color.

3. Ahora añadiremos los botones que utilizaremos. Nosotros hemos importado la biblioteca de los elementos anteriores para utilizar las mismas formas. Para ello haz clic en Archivo → Importar → Abrir biblioteca externa.

4. Seleccionar los archivos que quieras abrir y arrastra el símbolo al Escenario. En nuestro caso, comenzamos por estrella. fla.

5. Redimensiónalo con la herramienta Transformación Libre .

6. En el panel de Propiedades, le damos el nombre a la instancia. En nuestro ejemplo la hemos llamado btn_mostrarEstrella por ser el botón que mostrará la estrella.


29

7. También en el panel propiedades, especificamos el tipo Botón. Lo hacemos únicamente para que el cursor cambie a la mano al pasar sobre él.

8. Arrastra otro símbolo y colócalo al pie del Escenario (este será el que hará que rote el elemento).

9. Redimensiónalo si lo crees necesario, dale un nombre de instancia y conviértelo a botón. Nosotros lo hemos llamado btn_rotarEstrella.

10. Repite estos pasos para cada una de las formas que hayas creado, utilizando los nombres de instancia apropiados.

11. Una vez ya estén todos los botones en el Escenario pasaremos a escribir el código asociado. Para ver como hacerlo, vamsoa cargarlo los archivos publicados (swf) desde el código.

12. Crea una nueva capa pulsando el botón Insertar Capa .

13. En el fotograma 1 de la nueva capa escribe lo siguiente en el Panel Acciones, que afectará al símbolo estrella:

14. var estrella:Loader = new Loader();//Utilizamos un Loader para cargar archivos

15. estrella.load(new URLRequest("estrella. swf"));//Indicamos la ruta del archivo

16. var estrellaMC:MovieClip; //Un objeto MovieClip que será la estrella

17. estrella.contentLoaderInfo.addEventListener(Event.COMPLETE, insertarEstrella);

18. //Utilizamos este evento para asegurarnos de que se ha cargado completamente

19. //antes de agregarlo a la escena

20. function insertarEstrella(e:Event):void {

21. estrellaMC = e.target.content; //Almacenamos el elemento que produce el evento

22. //en nuestro movie clip

23. estrellaMC.visible = false; //Lo ocultamos para que no se vea por defecto

24. estrellaMC.x=100;

25. estrellaMC.y=80; //Le damos la posición inicial que queramos


30

26. addChild(estrellaMC) as MovieClip;//Añadimos el archivo cargado a la escena

27. //Aún no se verá porque visible=false

28. }

29.

30. btn_mostrarEstrella.addEventListener(MouseEvent.MOUSE_UP, mostrarOcultarEstrella);

31. //Detectamos cuando se pulsa el botón para mostrar/ocultar el elemento

32. function mostrarOcultarEstrella(e:Event):void {

33. estrellaMC.visible=! estrellaMC.visible;

34. //Al negar una propiedad booleana como esta la invertimos.

35. //por lo que cada al puslar el botón se mostrará si está oculta o

36. //o se ocultará si está visible

}

37. Guarda el proyecto y pruébalo (Control → Probar película) para ver que funciona.

38. Ahora escribiremos el código necesario para que al pulsar el otro botón (btn_rotarEstrella) el elemento gire:

39. btn_rotarEstrella.addEventListener(MouseEvent.CLICK, girarEstrella);

40. function girarEstrella(event):void {

41. //Para que gire, aumentamos la propiedad rotation

42. estrellaMC.getChildAt(0).rotation+=15;

43. //Utilizamos getChildAt porque en nuestro caso no queremos que rote todo

44. //el SWF, sólo el elemento que pusimos dentro como un símbolo, que al ser

45. //el único hijo, está en la posición 0

}


31

Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto en cuestión sólo es necesario escribir delante de la propiedad la variable que lo contiene. Definimos la función que al hacer clic girará nuestro objeto.

46. Repite estos pasos para cada uno de los botones. Recuerda escribir bien los nombres de instancia y los nombre de funciones.

47. Una vez terminado prueba la película desde Control → Probar película.

El uso de estas funciones es bastante sencillo y te ayudarán mucho en la eficiencia de tus películas. Ten en cuenta lo que decíamos antes de las escenas.

Así, cargaremos partes de la película sólo si el usuario accede a ellas.

Cargando información

En este apartado veremos cómo utilizar un cargador para recoger información de un archivo y mostrarla en una película Flash.

Observa la línea de tiempo:

En la capa de acciones escribiremos todo el código para que funcione la película. La capa diapositivas

contiene el efecto que hace que la imagen se desvanezca para volver a aparecer.

Ahora explicaremos cómo lo hemos hecho.

Antes que nada añadimos un stop() en el primer fotograma para detener la acción y reanudarla más tarde con cuando pulsemos el botón.

Igualmente hemos añadido un stop() en el fotograma 11, el último. para que se detenga la transición y espere a que se pulse de nuevo el botón.

La transición es muy sencilla. En la capa diapositivas hemos añadido un clip de película llamado contenedor

del tamaño de la película, que será donde carguemos las imágenes, y hemos incluido dos interpolaciones de


32

movimiento. En el fotograma 6 bajaremos la propiedad Alfa al 0% en el Panel Propiedades. Así conseguiremos el efecto de la transición.

Ahora que conocemos el funcionamiento veamos el código que hemos añadido en el fotograma 1.

// FOTOGRAMA 1

stop();

var total:Number=4;

var imagenActual:Number=0;

//Utilizamos un objeto Loader para cargar las imagenes

var cargadorImagen = new Loader();

contenedor.addChild(cargadorImagen);

//Para cargar datos (texto), emplearemos un objeto URLLoader

var cargadorTexto:URLLoader = new URLLoader();

//Indicamos el formato de los datos que leerá

cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;

//Y la ubicación del archivo

cargadorTexto.load(new URLRequest("diapositivas. txt"));

cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);

function textoCargado(ev:Event):void {

if (Event.COMPLETE) {

gotoAndPlay(6);

} else {

textoDiapositiva.descripcion_txt.text="No se ha podido cargar el texto";

textoDiapositiva.titulo_txt.text="Error";


33

}

}

boton.addEventListener(MouseEvent.MOUSE_UP, siguiente);

function siguiente(event):void {

gotoAndPlay(2);

}

Las variables que vamos a utilizar son:

La variable total almacena el número total de imágenes que vamos a mostrar. En nuestro caso, son 4.

La variable imagenActual almacenará el número de la imagen que vamos a mostrar, la inicializamos a 1 para mostrar la primera imagen.

Tenemos que ontener datos externos, para eso hemos empleados dos objetos:

Un Loader llamado cargadorImagen, donde cargaremos los archivos de imagen.

Un URLLoader, llamado cargadorTexto, que es un objeto que nos permite extraer datos de archivos. En nuestro caso, texto de un archivo de texto.

El Loader ya lo conocemos, y de momento sólo lo hemos añadido al MovieClip contenedor. Vamos a centrarnos en cómo utilizamamos el URLLoader.

var cargadorTexto:URLLoader = new URLLoader();

cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;

Tras declararlo, debemos indicar el formato de datos, con la propiedad cargadorTexto.dataFormat. Puede ser de tres valores:

URLLoaderDataFormat.TEXT, si el archivo que queremos cargar es todo texto, y queremos cargarlo como tal. Esta es la opción por defecto.

URLLoaderDataFormat.BINARY, si los datos son binarios sin formato.

URLLoaderDataFormat.VARIABLES, si los datos del archivo siguen el formato de las variables URL, cuya sintaxis sería variable1 =valor&variable2=valor&variable3=valor&variable4=valor. Es decir separamos cada variable y su valor por el signo = . Y separamos cada par variable=valor por el signo &.


34

Esta última es la opción que hemos elegido, porque aunque queremos cargar texto, lo tenemos dividido en

variables. Por lo tanto, escribimos en el archivo diapositivas. txt el texto que queremos mostrar con el siguiente formato:

titulo1=Los mejores sándwiches

&descripcion1=En sa cuina creamos los sándwiches mas originales y sabrosos de toda la ciudad.

&titulo2=Calidad Superior

&descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la máxima calidad.

&titulo3=Productos seleccionados

&descripcion3=Seleccionamos los productos uno a uno y de distribuidores de confianza.

&titulo4=Nuestras especialidades

&descripcion4=No olvides probar nuestras especialidades en ensaladas y postres.

Por tanto, lo siguiente ha sido indicar a nuestro URLLoader cuál es el archivo que contendrá esas variables.

cargadorTexto.load(new URLRequest("diapositivas. txt"));

cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);

function textoCargado(ev:Event):void {

if (Event.COMPLETE) {

gotoAndPlay(6);

} else {

textoDiapositiva.descripcion_txt.text="No se ha podido cargar el texto";

textoDiapositiva.titulo_txt.text="Error";

}

}

boton.addEventListener(MouseEvent.MOUSE_UP, siguiente);

function siguiente(event):void {

gotoAndPlay(2);


35

}

Y como ya vimos con los cargadores, hemos utilizado el evento Event.COMPLETE para saber si se ha cargado

correcta y completamente. Si no se ha cargado, mostramos un error. Si todo es correcto, pasamos al fotograma 6.

Al final, hemos añadidio el código necesario para que al pulsar en boton vayamos al fotograma 2.

Ahora, vamos al fotograma 6. Cada vez que se pase por aquí, cambiaremos la imagen y el texto. Hemos

elegido este fotograma porque aquí habíamos cambiado el valor de Alffa a 0. Es decir, aquí es donde ha

acabado de desvancerse la imagen y donde empieza a cargarse la siguiente. Veamos el código que hemos puesto:

if (imagenActual==total) { imagenActual=0; } imagenActual++; //Cambiamos el texto textoDiapositiva.titulo_txt.text=cargadorTexto.data['titulo'+imagenActual]; textoDiapositiva.descripcion_txt.text=cargadorTexto.data['descripcion'+imagenActual]; //Y cambiamos la imagen cargadorImagen.load(new URLRequest ("imagenes/imagen"+imagenActual+". jpg"));

Lo primero que hacemos es comprobar si hemos llegado a la última imagen (total), y si es así, volvemos a la primera. Aumentamos el contador de imágenes (imagenActual+ + ).

Ahora, tenemos que extraer los valores correspondientes del cargadorTexto. Podemos acceder al

contenido del archivo cargado con la propiedad .data. Si además ese archivo lo forman variables, como en

nuestro caso, podemos utilizar data como un array y acceder a una variable concreta escribiendo data['nombreVariable']. También podríamos hacerlo como una propiedad (data.nombreVariable).

En nuestro caso hemos extraído las variables con el título y la descripción y las hemos mostrado en los textos textoDiapositiva. titulo_txt y textoDiapositiva. descripcion_txt.

Y para acabar, hemos cargado la imagen con el método load del cargadorImagen. Por tanto, cada vez que pasemos por aquí, el cargador reemplazará la imagen que contiene.

Observa que hemos elegido unos nombres que contienen el número de imagen (tituloX y descripcionX para

las variables, e imagenes/imagenX. jpg). Esto nos facilita el trabajo, ya que sólo tenemos que cambiar la X por el número de imagen que corresponde.


36

.

navegacion

Documents

Transcript of navegacion