Lesson 6 - Creating Interactive Navigation

En flash existen 3 tipos de símbolos: clíps de película, gráficos y botones.

El botón es un símbolo que contiene cuatro estados:

  • Reposo: aspecto del botón cuando está inactivo.
  • Sobre: aspecto del botón se pasa sobre el.
  • Presionado: aspecto del botón cuando recibe el evento que lo activa.
  • Zona Activa: delimita el area de efecto. No es visible.

Dentro del fotograma de cada uno de los primeros tres estados pueden incluirse clips de película que consten de animaciones.

Pueden crearse botones invisibles con el fotograma de Reposo vació pero con un area clickable en la Zona Activa.Para que un botón pueda funcionar con ActionScript, hay que poner a la instancia del símbolo en la escena un nombre concreto y único (panel propiedades) con el cual nos referiremos a dicho botón.

En el ejemplo de la izquierda, el script dice que el botón llamado "boton" al recibir un click activara la función "ostia", definida en la siguiente línea como "ir y reproducir el fotograma 13":

boton.addEventListener(MouseEvent.CLICK,ostia);
function ostia(event:MouseEvent):void {
gotoAndPlay(13);
}

Elementos de ActionScript:

  • Variables : una variable es un segmento de datos que puede ser constante o no. Al crear o denominar una variable, le asignamos un tipo de dato, que determina que tipo de cosa representa la variable.
  • Keyword : Una keyword es una palabra reservada que se usa para realizar una tarea específica.
  • Arguments : proporcionan detalles acerca de un comando. Son los valores entre paréntesis ().
  • Function : una función es un grupo de enunciados a los que se les asigna un nombre. Refiriéndonos a ese nombre podemos ejecutar todos los enunciados sin tener que reescribir el código, solo la función.
  • Objects : son datos que se han etiquetado para poder usar en el código. Hay de sonido, de botón...
  • Methods : métodos son los keywords asociados a cada tipo de objeto, y son los que generan las acciones.
    Por ejemplo, dos métodos asociados a un objeto de película son stop() y gotoAndPlay()
  • Properties : las propiedades describen un objeto.

Sintaxis:

  • El ; al final de las líneas indican a ActionScript que ese es el final de la línea de código y puede ir a pensarse el siguiente.
  • Todos los paréntesis (), llaves [] o corchetes {} que se abran en el código deben de cerrarse.
  • El operador del punto . sirve para establecer las propiedades y métodos de un objeto. El punto es una manera de seprar objetos, métodos y propiedades.
  • Cada vez que escribamos el nombre de una cadena (string) o un archivo se usan comillas " ".
  • Se pueden ecribir comentarios en el código entre las marcas /* */.
Eventos de Ratón:
  • MouseEvent.CLICK
  • MouseEvent.MOUSE_MOVE
  • MouseEvent.MOUSE_DOWN
  • MouseEvent.MOUSE_UP
  • MouseEvent.MOUSE_OVER
  • MouseEvent.MOUSE_OUT
Comandos de navegación:
  • stop();
  • play();
  • gotoAndStop(número de frame o "etiqueta");
  • gotoAndPlay(número de frame o "etiqueta");
  • nextFrame();
  • prevFrame();
>
-Actionscript 3.0-

Script del fotograma 1 del ejercicio:

stop();
/*Primero, para que la animación pare en el fotograma uno, añadimos una parada.
Una vez que la animación esté parada, debemos hacer que con un evento concreto sobre un botón, se desarrolle una función.
El evento será un click, y la función saltar a otro fotograma. wheretolisten.addEventListener(whatevent, responsetoevent);

wheretolisten -> el botón sobre el que sucede el evento
.addEventListener -> es el comando que añadimos para que determinado evento desate determinada función.
whatevent -> el evento que espera el listener y hará que suceda la función.
responsetoevent -> la función, que debemos definir.
En este ejercicio sería algo del tipo
nombredelboton.addEventListener(MouseEvent.CLICK, showimage1);
seguido de la función */

gabelloffel_btn.addEventListener(MouseEvent.CLICK,restaurant1);
function restaurant1(event:MouseEvent):void {
gotoAndPlay("label1");
}
/*El botón gabellofel_btn tiene un listener que con el evento CLICK
carga la función restaurant1 (ir al fotograma "label1" y reproducir).
El destino de la función puede ser un número de fotograma, o un fotograma etiquetado.
Un fotograma con etiqueta puede desplazarse en la línea de tiempo sin que se joda la animación.*/


garygari_btn.addEventListener(MouseEvent.CLICK,restaurant2);
function restaurant2(event:MouseEvent):void {
gotoAndPlay("label2");
}
ilpiatto_btn.addEventListener(MouseEvent.CLICK,restaurant3);
function restaurant3(event:MouseEvent):void {
gotoAndPlay("label3");
}
pierreplatters_btn.addEventListener(MouseEvent.CLICK,restaurant4);
function restaurant4(event:MouseEvent):void {
gotoAndPlay("label4");
}

/*Todos los botones tendrían ya su código, ahora toca crear los destinos
de las funciones en la línea de tiempo (capa contents).
De primeras no ha funcionado por por el nombre del evento CLICK en minúsculas. OJO!!!*/
/*BOTON MAIN MENU:
Hacer clic para ir al fotograma y detener
Al hacer clic en la instancia del símbolo especificado, la cabeza lectora se mueve hasta el fotograma especificado en la línea de tiempo y detiene la película.
Se puede utilizar en la línea de tiempo principal o en líneas de tiempo de clips de película. Instrucciones:
1. Reemplace el número 5 del siguiente código por el número de fotograma hasta el que quiere que se mueva la cabeza lectora cuando se haga clic en la instancia del símbolo.
*/

button_1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame);

function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void
{
gotoAndStop(1);
}


-HTML 5-

Problemas al pasar ActionScript a HTML5:

  • Problemas con el audio. No reproduce el archivo de sonido en .mp3.

Soluciones para hacer compatible el HTML5:

  • No tiene problemas en reproducir el sonido si proviene de un .wav, aunque pierde calidad.

NOTAS:


<- Volver al Índice