El documento describe los pasos para crear una interfaz en AS3 que incluye diferentes capas y frames para mostrar información. Se asignan nombres a los frames y botones para vincularlos con el contenido correcto. El código detiene la animación inicial y agrega funciones de clic a los botones para navegar a los frames específicos asociados con cada tema.

1. Introducción a AS3 Navegar por contenidos

2. Como primeros elementos para trabajar en esta aplicación nos disponemos a crear una interfaz como la presentada anteriormente. La interfaz

3. 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 frames

4. 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 frames

5. Los 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:objetivos 18:justificacion 19:ejemplos El nombre corresponde al contenido presentado.

6. Los 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: btnIntro btnObjetivos btnJustificacion btnEjemplos

7. El 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();

8. El 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"); }

9. El 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.

10. El 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.

11. El 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.

12. El 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:

13. stop(); this.btnIntro.addEventListener("click",irIntroduccion); this.btnObjetivos.addEventListener("click",irObjetivos); this.btnJustificacion.addEventListener("click",irJustificacion); this.btnEjemplos.addEventListener("click",irEjemplos); function irIntroduccion(e:MouseEvent):void { this.gotoAndStop("introduccion"); } function irObjetivos(e:MouseEvent):void { this.gotoAndStop("objetivos"); } function irJustificacion(e:MouseEvent):void { this.gotoAndStop("justificacion"); } function irEjemplos(e:MouseEvent):void { this.gotoAndStop("ejemplos"); }

14. GRACIAS