Introducción a AS3Introducción a AS3

Navegar por contenidosNavegar por contenidos

Como primeros elementos para trabajar en esta aplicación nos disponemos a crear una interfaz como

la presentada anteriormente.

La interfazLa interfaz

La interfaz, va a contener una estructura en la línea de tiempo como la expuesta en la imagen.La capa fondo no necesita presentación.La capa marcos, contiene los marcos que se aprecian en la imagen de la interfaz y los botones de navegación.

Los framesLos frames

La capa titulo, contiene el titulo de la aplicación.La capa infos, contiene toda la información que se muestra, ubicada en diferentes frames(los que tienen la banderita).Las capas Mascara, con mascaras para aplicar una animación al inicio de la aplicación.La capa Scripts(en el frame 16) contendrá el código de la aplicación.

Los framesLos frames

Los framesLos frames

A cada uno de los frames con “banderita” de la capa infos, se le asigna un nombre en las propiedades. Esto se logra seleccionando el frame y en las propiedades se le asigna un nombre.Los nombres correspondientes a los frames son:16:introduccion 17:objetivos18:justificacion 19:ejemplosEl nombre corresponde al contenido presentado.

Los botonesLos botones

Cada botón dentro de la interfaz ha sido diseñado como un símbolo de la biblioteca.Y a cada uno de ellos en el escenario le es asignado un nombre, dependiendo del contenido que debe mostrar. Es así como tenemos los siguientes nombres:

btnIntrobtnObjetivosbtnJustificacionbtnEjemplos

El códigoEl código

Para darle funcionalidad a la aplicación, seleccionamos el frame 16 y presionamos F9. Estos abrirá el editor de código.

Lo primero que hacemos con los scripts es detener la ejecución de la animación; para esto escribimos:stop();

El códigoEl código

Ahora procedemos a darle funcionalidad a los botones, para esto le asignamos funciones a los eventos “click” de cada botón.Para el botón btnIntro colocamos el siguiente código:

this.btnIntro.addEventListener("click",irIntroduccion);function irIntroduccion(e:MouseEvent):void{

this.gotoAndStop("introduccion");}

El códigoEl código

En el código anterior tenemos los siguientes elementos:

this: Esta instrucción siempre se refiere al objeto actual sobre el que se está trabajando; para este caso el escenario principal.addEventListener: Es una función de AS3 que permite asociar una función que será ejecutada cuando se produzca un evento.

El códigoEl código

click: Es el nombre del evento que deseamos capturar.MouseEvent: Es la clase que corresponde al tipo de evento que estamos evaluando, para este caso es un click que a su vez es un evento producido por el mouse.gotoAndStop: Mueve la cabeza lectora a un frame especifico y detiene la animación.

El códigoEl código

introduccion: Es el nombre del frame donde se encuentra el contenido referente a la introducción. Cabe anotar, que cuando se da gotoAndStop(“introduccion”) indicamos que se mueva al frame introduccion; pero esto puede ser reemplazado por gotoAndStop(16), ya que el frame con el nombre introduccion es el frame 16.

El códigoEl código

El código utilizado para para el botón btnIntro se puede utilizar de igual forma para los demás botones, solo hay que cambiar las asociaciones pertinentes.El código final debe quedar como se presenta a continuación:

stop();stop();this.btnIntro.addEventListener("click",irIntroduccion)this.btnIntro.addEventListener("click",irIntroduccion);;this.btnObjetivos.addEventListener("click",irObjetivothis.btnObjetivos.addEventListener("click",irObjetivos);s);this.btnJustificacion.addEventListener("click",irJustifithis.btnJustificacion.addEventListener("click",irJustificacion);cacion);this.btnEjemplos.addEventListener("click",irEjemplosthis.btnEjemplos.addEventListener("click",irEjemplos););

function irIntroduccion(e:MouseEvent):voidfunction irIntroduccion(e:MouseEvent):void{{

this.gotoAndStop("introduccion");this.gotoAndStop("introduccion");}}function irObjetivos(e:MouseEvent):voidfunction irObjetivos(e:MouseEvent):void{{

this.gotoAndStop("objetivos");this.gotoAndStop("objetivos");}}function irJustificacion(e:MouseEvent):voidfunction irJustificacion(e:MouseEvent):void{{

this.gotoAndStop("justificacion");this.gotoAndStop("justificacion");}}function irEjemplos(e:MouseEvent):voidfunction irEjemplos(e:MouseEvent):void{{

this.gotoAndStop("ejemplos");this.gotoAndStop("ejemplos");}}

GRACIASGRACIAS