macromedia’ tian )%4 P< ACTIONSCRIPT AVANZADONEL a} Cr) CCU © Interfaz més intuitiva. * Conjuntos de paneles para el disefiador y el desarrollador. * Nuevo panel Referencia. * ActionScript mejorado. * El Panel Acciones es ahora totalmente intuitivo: de acuerdo al elemento seleccionado despliega las acciones correspondientes al botén, fotograma o clip de pelicula; indica el numero de fotogramas y capas o nombre de la instancia y del simbolo en la Biblioteca. También incluye un ment desplegable para poder seleccionar desde é! cualquier fotograma, botén o simbolo que se encuentre en el mismo fotograma de cualquier capa en un acomodo vertical. * Ofrece soporte para video incluido en el swf. Los formatos que acepta son: MPG, DVD (Video Digital), MOV (QuickTime) y AVI. * Carga dinamica de imagenes JPG y sonido MP3 directo al Flash Player sin necesidad de crear un swf para dichos archivos. * Nuevo inspector Propiedades sensible al contexto. * Compatibilidad con Flash 5. * Linea de tiempo mejorada, en la cual se pueden crear carpetas para incluir capas. * Nuevo panel Componentes, con elementos para crear botones, casillas de verificacion, etcétera. * Mejoras en la comunicacién con las bases de datos. * Herramientas nuevas como Transformacién libre y Transformacién de relleno. * Cuadro de didlogo Convertir en simbolo mejorado con acceso a punto de registro y opciones avanzadas. * Cambios relevantes en los atajos de teclado, como F9, para abrir el Panel Acciones (antes era Ctrl+Alt+A en Windows y Cmd+Alt+A en Mac) y Alt+F8 para crear un nuevo simboloA macromedia’ FLASH RA 3< ACTIONSCRIPT AVANZADO ENTRENANDO CON MACROMEDIA Derek Franklin Jobe Makar TRADUCCION: Ricardo Miguel Sénchez Durén Disefiador Grafico Certificado como Desarrollador en Flash MX por Macromedia México + Argentina + Brasil» Colombia * Costa Rica + Chile « Ecuador [Espafia « Guatemala + Panami + Peri + Puerto Rico » Uruguay *Venezucla‘Datos de catlogacisn bibliogrtica Franklin, Derek y Makar, Jobe Entrenando con Macromedia PEARSON EDUCACION, México, 2003 ISBN: 970-26.0384-6 rea: Computaciéa Formato: 20% 25.5 em Péginas: 616 EDICION EN ESPAROL: Editor de computacién: Daniel Gonzalez Pineda daniel.gonzalez@pearsoned.com Supervisor de traduccl6n: Miguel B. Gutiérrez Hernandez Supervisor de preduccién: Enrique Trejo Herndndez ‘Mactomediae Flash® MX. ActionScript Avanzado. Entrenando con Macromedia, Versién en espatiol dela obra titulada Macromedia® Flash® MX ActionScripting: Advanced Training from the Source, de Derek Franklin y Jobe Makar, publicada orginaimente en inglés por Macromedia Press, una division de Pearson Education, Inc Esta eden en espafol es la Ginica autorizada, ‘Authorized transation from the English language edition, entitled Macromedia® Flash® MX ActionScrpting: ‘Advanced Training from the Source published by Macromedia Press, Copyright © 2002. All cights reserved. No part ofthis book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval ‘system, without permission from the Publisher. Spanish language edition published by Pearson Educacion de México, S.A. de C.. [translator] Copyright © 2003 Primera Edicion 0.8. © 2003 por Pearson Educacion de México, S.A. de C.. ‘Atlacomulco 500-Sto, piso Industrial Atoto 53519 Naucalpan de Juérez, Edo. de México cémara Nacional de la Industria Editorial Mexicana, Registro No. 1031, ‘Macromedia y Flash son marcas registradas de Macromedia Inc. Prentice Hally Pearson Educacién son marcas reistradas de Pearson Educacién de México, S.A. de CV. Reservados todos los derechos. Na totalidad ni parte de esta publicacin pueden reproducirse, registrarse o transmitirse, por un sistema de recuperacion de informactén, en ninguna forma ni por hingin mecto, sea electrnico, mecénico, fotogufmico, magnétic 0 elecro6ptica, por fotocopia, frabaci6n o evalquer oto, sin permiso previo por escrito del editor. EL préstamo, alquiler 0 cualquier otra forma de cesi6n de uso de este ejemplar requeriré también la autorizacion del editor o de sus representantes. ISBN 970-26-0384-6 de la versin en espanol ISBN 020-17-7022-9 de la version en inglés Impreso en México. Printed in Mexico Prentice-Hall es una marca registrada por Peatson Educacion de México, SA. de CV. EDICION EN INGLES: Coordinador del equipo de produccién Myra Viadic, Bad Dog Graphics Composicion Rick Gordon, Emerald Valley Graphics Debbie Robert, Espresso Graphics Editores Jill Marts Lodwig, Wendy Sharp, Jil Simonsen Indizadura Emily Glossbrenner Revisor técnico Bentley Wolfe, Director de Soporte técnico, MacromediaAGRADECIMIENTOS Estoy muy agradecido con toda la gente que, de alguna forma, me ha ayudado a lo largo de mi vida. A Kathy y Ashlie, su comprensi6n y largo sufrimiento no pasaron desapercibidos. Las amo a las dos. Jobe, no puedo pensar en alguien mas que quisiera tener a mi lado. Tienes una maestria en ActionScript que es puro ger Jill Marts Lodwig, estoy muy feliz de que hayamos trabajado juntos de nuevo. Jill Simonsen, tu determinaci6n e inteligentes sugerencias han marcado una mejoria Rotoria en este libro. Wendy Sharp, siento si alguna vez te hice dudar acerca de este libro. Estoy en continuo agradecimiento con Marjorie Baer, A toda la demés gente de Peachpit Press que hicieron este libro algo de lo cual me siento orgulloso, quiero decirles iGracias! Y un reconocimiento especial a Justin Bratton, Edeltraud Rothmeler y Sue Stailey (son mis mas grandes admiradores), y a mi querido abuelo, Roy Franklin, quien falleci6 inesperadamente el afio pasado. iLo extrafio y lo quiero mucho! Derek Este libro no habria sido posible sin la constante ayuda y apoyo de mucha gente. ‘Ami hermosa esposa Kelly, tu infinito apoyo y comentarios constructivos te han hecho ganar el titulo de iE mas grande apoyo! Derek, el trabajo de este libro es pura hechiceria y tu escritura ibrillante! Fue un placer trabajar contigo desde el concepto al disefio. Jill Marts Lodwig, ha sido un largo y escabroso camino. Gracias, Por tu majestuosa edicién, valiosos consejos y constante comprensién. También quiero agradecer a Wendy Sharp y Jill Simonsen por hacer que el texto tuviera coherencia. Los archivos de este libro requirieron integracién del lado del servidor, la cual no habria sido posible sin la ayuda de Mike Grundving de www.electrotank.com, iGracias Mike! Gracias también a Branden Hall de figleaf.com por permitirnos usar tun AquaServer, un socket de servidor de cédigo abierto. Y finalmente, Free, sigues siendo mi velludo soporte. iGracias por mantener mis pies calientes! ~JobeINTRODUCCION 1 LECCION 1 INTRODUCCION A ACTIONSCRIPT 6 Aprender ActionScript, para qué? Elementos de ActionScript El proceso de planeacién Escriba su primer Script Pruebe su primer Script LECCION 2 USO DE CONTROLADORES DE EVENTOS 32 Qué hacen los controladores de eventos Seleccién del controlador de evento adecuado Uso de los eventos de ratén ‘Aprovechamiento maximo de anexién de eventos de ratén a clips de peliculas Uso de eventos de fotograma Uso de eventos de clip Orquestacién de varios eventos Métodos de controladores de eventos Uso de métodos de controladores de eventos Uso de “detectores”LECCION 3 RUTAS DE DESTINO 84 Uso de miiltiples lineas de tiempo La pelicula en uso como destino La pelicula principal (root) como destino Una pelicula principal como destino Clips de pelicula como destino Pelfculas en niveles como destino Clips de pelicula en niveles como destinos ‘Comprensién de identidades multiples Greacién y referencias de elementos globales LECCION 4 DEFINICION Y USO DE OBJETOS 122 Qué son los objetos y para qué sirven? Tipos de objetos Uso det objeto color Uso del objeto Key para agregar interactividad ‘Trabajo con los objetos String y Selection LECCION 5 USO DE FUNCIONES 150 Creaci6n de funciones Adicién de pardmetros a funciones Uso de variables locales y creacién de funciones capaces de devolver resultados LECCION 6 PERSONALIZACION DE OBJETOS 172 ‘Mecénica de los objetos Definicién de una clase personalizada y creaci6n de instancias de la misma Programacién “genética” de un objeto mediante la personalizacién de su prototipo Propiedades a nivel de instancia Creacién de subclases Creacién de métodos personalizados para clases personalizadas Vigilancia de propiedades Mejoramiento de métodos existentes de objetos Definicién de métodos personalizados para objetos preconstruidos Registro de clases v ‘TABLA DE CONTENIDOvi ‘TABLA DE CONTENIDO LECCION 7 USO DE DATOS DINAMICOS Creacién de variables Greacién de matrices Creaci6n de campos de texto dinémicos y recuperaciGn de datos Recuperacién de los datos LECCION 8 MANIPULACION DE DATOS Tipos de datos Construccién de expresiones Operadores Manipulacién de datos numéricos con el uso del objeto Math Manipulacién de cadenas LECCION 9 USO DE LOGICA CONDICIONAL Control del flujo de los Scripts Especificacién de condiciones Reacci6n a varias condiciones Definicién de limites Activar/desactivar la enengfa Reaccién a la interaccién del usuario Deteccién de colisiones LECCION 10 AUTOMATIZACION DE SCRIPTS CON BUCLES ra qué sirven los Bucles? ‘Tipos de Bucles Definicién de las condiciones del Bucle Bucles anidados Excepciones de Bucle LECCION 11 TRANSFERENCIA DE DATOS DESDE Y HACIA FLASH Fuentes de datos y formatos de datos Get y Post Uso del objeto loadvars Uso de objetos compartidos 236 264 310 336LECCION 12 USO DE XML CON FLASH Fundamentos de XML Uso del objeto XML, Introduccién @ los servidores Socket Uso del objeto XMLSocket LECCION 13 VALIDACION Y FORMATEO DE DATOS Logica de la validacion de datos Uso de rutinas de validacién Manejo de errores Validacién de cadenas de caracteres, Validacién de secuencias Validacién por medio de una lista de opciones Validacién de ntimeros Formateo dinémico de texto con HTML, Creacién y control de cajas de texto con ActionScript Uso de objetos textFormat LECCION 14 CONTROL DINAMICO DE CLIPS DE PELICULA Creacién dindmica de instancias de clip de pelfcula Uso de attachMovie() Creacién de botones de alimentacién continua Uso de ActionScript para trazar lineas dinémicamente Uso de los métodos de dibujo Creacién dindmica de figuras rellenas Ordenamiento z de instancias de clip de pelicula Arrastre y colocacién de instancias de clip de pelicula Bliminacién de contenido creado dinémicamente LECCION 15 DINAMISMO BASADO EN TIEMPO Y FOTOGRAMA El uso del tiempo en Flash Determinacién de la fecha y la hora en curso Determinacién del paso del tiempo Control de la velocidad y direccién de reproduccién de una linea de tiempo Despliegue del progreso de reproduccién y transferencia 366 494 vu TABLA DE CONTENIDOwi ‘TABLA DE CONTENIDO ae LECCION 16 SCRIPTS PARA SONIDO. Control del sonido con ActionScript Creacién de un objeto Sound Arrastre de una instancia de clip de pelicula dentro de limites Control de volumen Control del balance Anexién de sonidos y control de la reproduccién LECCION 17 CARGA DE RECURSOS EXTERNOS Pormenores de cargar recursos externos Carga de peliculas dentro de un destino Carga dindmica de imagenes JPG Greacién de un mareador interactivo Carga de peliculas dentro de niveles Control de una pelicula en un nivel Garga dinémica de archivos MP3 Reacciones a archivos MP3 cargados dinémicamente APENDICE A RECURSOS INDICE 524 556 594 596ActionScript es el lenguaje de programaci6n que le permite usar Macromedia Flash ara crear avanzados sitios Web multimedia e interactivos, demostraciones de productos, material didactico y mucho més. Si ha trabajado con otros lenguajes de programacién (como JavaScript), ActionScript le resultard familiar. Si, en cambio, apenas comienza en la creaci6n de scripts, probablemente desearé haber empezado antes, especialmente cuando comience a entender el lenguaje y todo lo que puede lograr con él. Al terminar de leer este libro, usted poseerd profundos conocimientos sobre ActionScript que le permitiré expresarse en formas que nunca antes habia imaginado. Este libro lo introduce a ActionScript y lo gufa paso a paso a través de proyectos que explican no s6lo lo que est pasando, sino cémo y por qué. Con el fin de que no se distraiga en tareas secundarias (dado que el objetivo central de cada proyecto es ensefiarle ActionScript), hemos preparado los elementos gréficos y objetos involucrados en cada proyecto, indicdndole por qué los incluimos y, si es necesario, qué hacen. Le tomard de 20 a 25 horas completar el plan de estudio de este 4 libro, que consta de las siguientes lecciones: Leccién 1: Leceién 2: Leccién 3: Leccién 4: Leccién Leccin 6: Leceién 7: Leccién Leccién 9: Introduccién a ActionScript Uso de controladores de eventos Rutas de destino Definicién y uso de objetos Uso de funciones Personalizacién de objetos Uso de datos dinamicos ‘Manipulacién de datosLecci6n 10: Automatizacién de scripts con bucles Leccién 11: Transferencia de datos desde y hacia Flash Leccién 12: Uso de XML con Flash Leccién 13: Validacién y formateo de datos Leceién 14: Control dinémico de clips de pelicula Leceién 15: Dinamismo basado en tiempo y fotograma Leceién 16: Scripts para sonido Leecién 17: Carga de recursos externos Cada lecci6n comienza con una visién general del contenido y los objetivos a alcanzar, y se divide en tareas que ejemplifican el uso de las caracteristicas de! lenguaje relacionadas con el tema de la lecci6n, Lo que distingue a este libro de otros sobre Flash es que oftece més informacién conceptual, andlisis més profundos y mas explicaciones sobre las caracteristicas especiales; y ademas: Tips. Sugerencias que ofrecen procedimientos abreviados para solucionar contratiempos comunes, asi como propuestas para usar los conocimientos aprendidos en la resolucién de problemas frecuentes. Notas. informacién adicional perteneciente a la tarea en proceso. Alfinal, el Apéndice A, Recursos, presenta una lista de recursos Web relacionados con scripts, disefio, animaci6n y otros aspectos de Flash. Este curso esté disefiado para que usted desarrolle sus conocimientos a medida que efectide los ejercicios de cada leccién. Al terminarlo, comprendera la sintaxis de ActionScript, sus capacidades y su \6gica, y seré capaz de crear contenido dinémico de Flash altamente interactivo. ECD adjunto contiene todos los archivos necesarios para llevar a cabo los ejercicios que se plantean en el libro. A cada leccién corresponde una carpeta y dentro de ella hay dos subcarpetas: Recursos y Terminados. La carpeta Recursos contiene los archivos (sonido, imagenes, animaciones, etc.) necesarios para completar los ejercicios, ast como el archivo inicial de Flash. La carpeta Terminados incluye los archivos ya completados, con la idea de que usted pueda comparar su resultado final, 0, silo desea saber qué es lo que obtendré. Le sugerimos crear una carpeta en su disco duro y poner ahi todos los archivos de las lecciones antes de comenzar el curso. Esto porque cuando usted prueba su trabajo con el comando Probar Pelicula, de Flash, se crea un archivo temporal en el mismo directorio donde se encuentra el documento abierto .fla. Esto implica que si usted abrié el archivo de trabajo desde el CD, Flash intentaré crear la peliculatemporal (de prueba) en esa unidad, lo que casi siempre es imposible, por lo que obtendra un mensaje de error. Las lecciones en este libro asumen que: ‘+ Sabe usar mends, y abrir y guardar documentos, ya sea en Windows o en Macintosh. * Tiene instalado Flash MX en su maquina y que su computadora cumple con los requerimientos de sistema listados mas adelante. * Esta familiarizado con la interfaz de Flash, ast como con la generaci6n de peliculas y la creacién y el uso de sus elementos constituyentes; sabe cémo funciona la \inea de tiempo y las acciones basicas, y —especialmente— con el uso del panel ‘Acciones. De no ser asi, probablemente deba leer un libro introductorio sobre Flash MX 0 el libro Aprendiendo Flash 5, de Fillip Kerman, editado también por Pearson Educacién. Un colage de algunos de los muchos proyectos que crearé en este curso.iTRODUCCION Qué APRENDERA En este curso: # Plancard un proyecto interactivo * Comprenderé la sintaxis de ActionScript y su funcionamiento ‘* Usaré los numerosos controladores de eventos para producir interactividad de, varios tipos ‘* Aprenderd a apuntar peliculas usando rutas de destino absolutas y relativas ‘+ Comprender y usaré objetos, propiedades y métodos integrados ‘* Usaré funciones para optimizar su cédigo * Crear objetos’y métodos personalizados * Manejaré textos y niimeros dindmicamente para efectuar tareas especficas ‘© Usara l6gica condicional para permitir que su pelicula tome decisiones y reaccione a condiciones variables ‘© Usaré bucles para automatizar tarcas en scripts , * Importaré y exportard datos a Flash usando campos de texto y XML, * Aprenderi a conectarse a un socket de servidor para transferir datos en tiempo real ‘© Validard y formateard todos los tipos de datos ‘+ Sabré e6mo controlar pelfculas dindémicamente mediante scripts (y no mediante la Tinea de tiempo) ‘© Aprenderé a cargar y descargar recursos * Generari scripts de sonido + Empleard interactividad basada en fecha, hora y fotogramas ‘+ Usard metodologias de cronometrar pruebas para crear aplicaciones dinémicasREQUERIMIENTOS MINIMOS DEL SISTEMA Windows ‘Macintosh * Procesador Intel Pentium ‘+ Mac OS 9.1 0 Mac OS X 10.1, 200 MHz o superior * Windows 98 SE, Windows + 64 MB disponibles en RAM . Me, Windows NT4, Windows 2000 (128 MB recomendados) 0 Windows XP ‘* 85 MB libres disponibles en ‘+ 64 MB disponibles en RAM disco duro (128 MB recomendados) * Monitor a 1024 x 768, con color * 85 MB disponibles en disco duro 4 16 bits (miles de colores) * Monitor a 1024 x 768, con color © de mejor resolucién 4 16 bits (miles de colores) 0 de * Unidad de CD-ROM mejor resolucién * Unidad de CD-ROM Para Uevar a cabo el eercicin de la lection 12, Uso de XML con Flash, necestard tener acceso a un servidor Windows. Ademéds, los usuarios de Macintosh OS 9.1, Windows Me-y Windows NT no podrdn completar las eercicos \ntroduccién a los servidores socket y Uso del objeto XML Socket, zambitn de la lecién 12 INTRODUCCIONLECCION 1 Una buena presentacién constituye el principio de una gran relaci6n. Preparese, entonces, para ser presentado con su nuevo mejor amigo: ActionScript. Creemos que en ActionScript encontraré una compafifa muy provechosa, especialmente cuando lo conozca mejor. Aunque quizé no esté entre sus planes escribir scripts como un esfuerzo creativo, el conocimiento practico de ActionScript puede inspirarle todo tipo de ideas que le permitiran crear contenido dinémico capaz de interactuar con sus usuarios en miltiples niveles. Y lo mejor de todo es que tendra la satisfaccién de ver cémo sus ideas se convierten en modelos de trabajo que cumplen con los objetivos de un proyecto. Planearemos, ‘crearemos y probaremos un ‘sistema Interactivo de ‘Pago por ‘suministro rere ‘eléctrico, owEn esta leccin, le presentaremos algunas razones de peso para aprender . ActionScript, asi como algunas caracteristicas que lo hacen sobresalir. Y, para no dar més rodeos, lo mejor sera que entremos de lleno, creando y probando un proyecto interactivo en esta lecci6n. QUE APRENDERA En esta lecci6n: * Descubriré los beneficios de usar ActionScript * Aprendera acerca de los elementos del s Planearé un proyecto Eseribird su primer seript Probaré su script TIEMPO APROXIMADO ARCHIVOS DE LA LECCION Completar esta leccién toma ‘Archivos externas: 1 hora aproximadamente. Ninguso Archivos de inicio: Leccion01/Recursos|FacturaE lectrical fla Proyectos terminados: FacturaE lectrica2 fla Facturak kectrica3.fla Doe INTRODUCCION A ACTIONSCRIPTLeccrOn 4 APRENDER ACTIONSCRIPT, , +, ~) *, &8, etc.) y son usados para conectar dos elementos de un script de varias maneras, Revise los siguientes ejemplos: impuestosPorcentaje = .06; //asigna el valor .06 a la variable llamada impuestosPorcentase cantidadA < cantidadB //pregunta si cantidadA es menor que eantidadB valorl * 500 //multiplica el valori 500 veces PALABRAS CLAVE Son palabras reservadas para propésitos especificos dentro de la sintaxis de ‘ActionScript. Por ello, no pueden ser usadas como variables, funciones 0 nombres de etiquetas. Por ejemplo, la palabra on cs una palabra clave y s6lo puede ser usada cen un script para designar un evento que dispare un script, como on(press), ‘on(re1lover), on(rot0ut), etcétera, Si intenta usar las palabras clave en su script para cualquier otro propésito, se produciré un error. (Otras palabras clave son break, case, continue, delete, do, for, function, if, in, instanceOf, new, return, switch, this, typeOf, var, votd, while y with.) Datos Un script dinémico crea, usa o actualiza varios elementos de datos durante su ejecucién. Las variables son los elementos més comunes de datos dinémicos de scripts y representan elementos de datos a los cuales se les ha dado un nombre ‘exclusive. Una vez que las variables han sido creadas y se les ha asignado un valor, puede accederse a ese valor desde cualquier lugar del script, simplemente escribiendo su nombre. En nuestro script de ejemplo, asignamos a la variable costoTaza el valor 5.00. Después, en el script, se menciona el nombre de la variable para referirse al valor que contiene.Luaves En términos gencrales, cualquier cosa que se encuentre entre la llave de apertura y la de cierre enuncia una o varias acciones que el script debe ejecutar cuando es activado, Usted usard las llaves para construir una instrucci6n del tipo “Como resultado de esto — {haz esto}”, Por ejemplo: on (release){ // Tiga el costo de 1a taza costoTaza = 5.00; // fifa el porcentaje de impuestos AmpuestosPorcentaje = .06; } Punto ¥ COMA Se usa para cerrar la mayoria de las lineas de los scripts (dentro de las llaves) y tiene ‘como fin separar varias acciones que deban ser ejecutadas como resultado de un evento (€s similar al uso de comas, en un enunciado comin, para separar pensamientos). El siguiente ejemplo incluye seis acciones separadas por punto y coma: “ costoTaza = 5.003 AmpuestosPorcentaje = .06; ‘totalImpuestos = costoTaza * impuestosPorcentase; costoTotal = costoTaza + total Impuestos; miCuadroTexto.text = “El costo total de su transaccion es * + costoTotal; cajaRegistradora.gotoAndPlay (50); Sinraxis pet punto (.) Los puntos (.) se usan dentro de los scripts de un par de formas: para especificar la ruta de destino para una linea de tiempo especifica. Por ejemplo, _~foot.mexico.lcon.guanajuato apunta a un clip de pelicula de la linea principal de tiempo (_r0ot) llamado “mexico” que contiene un clip de pelicula llamado “leon”, cl cual contiene un clip de pelfcula llamado “guanajuato” Como ActionSeript es un lenguaje orientado a objetos, la mayorfa de las tareas interactivas son efectuadas cambiando alguna caracteristica (propiedad) de un objeto, © bien, instruyendo al objeto para que haga algo (invocando un método). Cuando se ‘cambia una propiedad 0 sc invoca un método, los puntos se emplean para separar los nombres de objetos de la propiedad o método a modi para fijar la propiedad de rotacién de una instancia de clip de pelicula llamada “rueda” (los clips de pelicula son objetos), se usaria la siguiente sincaxis: ar 0 invocat. Por ejemplo, rueda. rotation = 90; Observe cémo el punto separa la propiedad a fijar del nombre de la instancia del objeto. 1 INTRODUCCION A ACTIONSCRIPT2 LECCION 1 Para indicar a la misma instancia del clip de pelicula que se reproduzca (invocando el método play()), se usarfa la siguiente sintaxi rueda.play() ‘Otra vez, un punto separa el nombre del objeto del método invocado. PARENTESIS Son usados de varias maneras en ActionScript. En la mayorfa de los casos, el script, los emplea para fijar una cantidad especifica que la accién usar durante su ejecucidn. Observe la tiltima linea del script de ejemplo, en donde se le indica a la instancia del clip de pelicula eajaRegistradora que vaya al Fotograma 50 y ahi se reproduzca: cajaRegistradora.gotoAndPlay (50); Si el valor entre paréntesis cambia de 50 a 20, la accién seguir efectuando la misma tarea basica (es decir, moverse sobre la Kinea de tiempo a un forograma especificado); solo que lo hard de acuerdo al nuevo valor. Los paréntesis son la manera de decirle a una accién que se efectiie de acuerdo con el valor especificado entre ellos. ‘COMILLAS- Se emplean para especificar datos textuales en el script. Dado que el script consiste de texto, las comillas proporcionan el tinico medio para indicar la diferencia entre instrucciones (elementos de datos) y palabras que deben tomarse literalmente, Por cjemplo, Derek, sin comillas, es el nombre de un elemento de datos; “Derek”, por otro lado, significa la palabra real Deret. ComeNTaRIOS Son Iineas en el script precedidas por dos diagonales (//). Cuando se ejecuta el script, Flash ignora las Ifneas de comentarios. Esta es una forma de insertar notas descriprivas acerca de lo que esti haciendo el script en ese punto. El uso de comentarios le permite revisar el seript meses después de haberlo escrito y tener tuna idea clara de su l6gica fundamental. ‘SANGRIA/ESPACIADO Aunque no son indispensables, es recomendable insertar sangrfas y espaciados en su c6digo. Por ejemplo: on(retease) { costoTaza = 5.00; }Es igual que: on (release) { costoTaza = 5.00; } Sin embargo, las sangrias aurentan la legibilidad del eédigo. Es recomendable sangrar cualquier segmento de c6digo encerrado entre llaves, con el fin de distinguirlo como un dlogue que serd ejecutado al mismo tieinpo (la funcién de formato automético de Flash MX se encargaré de esto). Usted podré anidar bloques de c6digo dentro de otros, un concepto que le quedaré claro conforme eve a cabo los ejercicios. En general, dentro del script se ignoran los espacios en blanco. Asi la siguiente linea de c6digo: costoTotal = costoTaza + totalImpuestos ; Se ejecutard de igual forma que la siguiente: costoTotal=costoTazattotal Impuestoss Algunos programadores sienten que los espacios en blanco hacen su cédigo mas legible; otros, creen que insertar los espacios retrasa su trabajo. En cualquier caso, la decision es suya. Existen, sin embargo, un par de excepciones en las que hay que tener cuidado: los nombres de variables no pueden contener espacios, y no puede poner un espacio entre el nombre del objeto y su propiedad 0 método asociado. De esta forma, lo siguiente es aceptable: miObjeto.nonbrePropiedad Mientras que esto no lo es: mi0bjeto. nombrePropiedad EL PROCESO DE PLANEACION Cuando se crea un proyecto que contendré una gran cantidad de ActionScript, es prudente hacer algo de planeacién al principio, Encarar problemas en la etapa de la concepcién de la idea es mas recomendable que hacerlo en la de desarrollo, en donde se requiere més tiempo y se expone més a la frustracién. Le garantizamos ‘que, a la larga, ahorraré tiempo. Es necesario tener previstos muchos elementos antes de abrir Flash y empezar a escribir el script. Una buena manera de hacer esto es responderse a una serie de preguntas. 3 INTRODUCCION A ACTIONSCRIPT4 LECCION 1 QUE DESEA QUE OCURRA? Esta es la pregunta mas importante en la fase de planeacién del script. Debe ser claro, informativo y grafico en su respuesta, pero no debe detallar demasiado. Para el proyecto que crearemos en este ejercicio, queremos crear una escena que actde como mostrador virtual para el pago de su factura eléctrica. Queremos que la cantidad a pagar sea cargada en la pelicula desde una fuente externa constituida por. un archivo de texto. También deseamos permitirle al usuario que ingrese una cantidad a pagar en un cuadro de texto. Cuando se oprima cierto bot6n, la cantidad que el usuario desee pagar seré comparada con la cantidad a pagar tomada del archivo de texto; el resultado tendré una representacién visual y textual (un mensaje): pago de més, pago de menos y pago justo. Queremos que cuando el usuario suelte el bot6n, los elementos visuales y textuales de la escena regresen a su estado original. El script que lleve a cabo esto seré el script principal del proyecto. 2 Qué ELEMENTOS DE DATOS DEBE CONTROLAR? En otras palabras, :cudles nimeros o valores de la aplicacién son inherentes a esta funcién? En nuestro caso, el dato es la cantidad de la factura eléctrica: $60. También necesitamos Ilevar pista de la diferencia entre lo que el usuario debi6 pagar y lo que 1 pagé, para que podamos desplegar ese valor en un mensaje personalizado. 2QUE DEBE PASAR EN LA PELICULA ANTES DE QUE EL SCRIPT ‘SEA DISPARADO? En nuestro proyecto, la cantidad de la factura eléctrica debe de ser establecida en la pelicula primero que todo. Dado que el objetivo principal de nuestro proyecto es comparar Ia factura eléctrica con la cantidad que el usuario escoja pagar, si la cantidad de la factura eléctrica no esté establecida cuando la pelicula se ejecute por primera vez, no habré nada para comprar cuando el script sea ejecutado. A la accién de crear y fijar los datos antes de que el script sea ejecutado, o cuando la pelfeula corra por primera ver, se le conoce como inicializacién de datos, una préctica comin en la codificacién y algo que usualmente es transparente para el usuario. En este punto usted debe comenzar a pensar en cémo el dato (Ia cantidad de la factura cléctrica) se ingresars a la pelicula, Puede ponerlo dentro de la pelicula al momento de crearla o cargarlo de una fuente externa (por ejemplo, un servidor o un documento de texto) cuando la pelicula se ejecute. Para nuestro proyecto, nos inclinamos por la tiltima opci6n: usaremos un script simple para cargar en la pelicula el archivo de texto que contiene la cantidad de la factura cléctrica ($60). Este archivo de texto es un ejemplo de lo que se conoce como fuente de datos:CUAL EVENTO SERA EL QUE DISPARE EL SCRIPT? ‘ En nuestro caso, la respuesta es obvia: Ia opresiGn de cierto botén. Cualquicr evento especificado puede disparar un script dentro de Flash, asf que es importante pensar en alguno para este caso. Es necesario que algo suceda cuando el usuario mueva, presione o libere el ratén, 0 cuando presione una tecla?, o cuando un clip de pelicula aparezca por primera vez en escena?, ‘se necesita que el evento suceda oe continuamente (todo el tiempo que la pelicula se reproduce)? Analizaremos esos eventos detalladamente en la siguiente leccién. HAY DECISIONES QUE DEBAN TOMARSE CUANDO EL SCRIPT PRINCIPAL SE DISPARE? Guando el script principal de nuestra pelicula se dispare, la cantidad que el usuario ingrese debe ser comparada con la cantidad que debe, con el fin de determinar si la cantidad pagada es excesiva, deficiente o suficiente. La respuesta a estas preguntas determinan el mensaje personalizado a desplegar, asi como lo que se despliega en pantalla, ECUALES ELEMENTOS CONSTITUYEN LA ESCENA? 2COMO FUNCIONAN?- Nuestra escena constaré de varios elementos, algunos de los cuales deberemos denominar para que ActionScript pueda usarlos, controlarlos e interactuar con ellos. Para disparar el script, nuestra escena necesitaré un interruptor de pared que haremos aparecer en posicién de encendido o de apagado segin se seleccione 0 se suelte. ‘También requeriremos de un campo de texto dinémico donde se despliegue la cantidad a pagar, al cual llamaremos campo de texto debida. Ademis, necesitamos un campo de Introduccién de texto donde el usuario pueda introducir la cantidad que desea pagar; llamaremos a este campo de texto pagada. También es necesario tun campo de texto dinémico para desplegar el mensaje personalizado gencrado por el script; Ilamaremos a este campo de texto mensaje. Por diltimo, con fines grificos, agregaremos un gran foco a la escena. Inicialmente, y si el usuario no paga demasiado, apareceré apagado. El foco se prenderd con una luz clara si el ust agado la cantidad exacta, y con una de color muy vivo si el usuario paga de més. Este foco sera una instancia de un clip de pelicula llamada, simplemente, 1uz. io ha 15 INTRODUCCION A ACTIONSCRIPT16 Leccion 4 angered fay toe Setar yi amare Guard ol bein o> 2COMO SE VERA NUESTRA ESCENA? Use lo que desee, un programa de ilustracién o una servilleta, para crear una representacién simple de su escena (cual seré su apariencia y d6nde se levaré a cabo la accién). Incluya toda la informacién que tenga en este punto. Esta parte importante en el proceso de planeacién es més conocida como boceto (storyboard). "| <—— frente ce Date Brisa de tet) A ca dente de arta Sere a pefesn Cando Cfremese ge eae Senne ‘thie ctfoore oh eu eewato. we comme menses mmmoayes (Q)Usted fay ta fata shin, compte” a derespe J Dl vsted pags x pros Je men en a0 fasten elcchien” rusted ad» pos de whe ones facrve Conforme adquiera mas habilidad en ActionScript y desarrolle proyectos adicionales, seré capaz. de preguntarse (y responder) esas preguntas intuitivamente, Pero independientemente de su nivel de conocimientos, el boceto ser siempre una parte esencial del proceso de planeacién. ESCRIBA SU PRIMER SCRIPT Ahora que tenemos tanto la informacién necesaria como el boceto de nuestro proyecto, comencemos a ensamblarlo. 1) Abra el bloc de notas en Windows, o Simple Text en Apple, para crear un archivo de texto, y teclee lo siguiente: &facturaElectrica=60.&facturaElectrica-60 En la primera parte del ejerci cerearemos la fuente de datos a ser cargados dentro de su pelfcula cuando se ejecute. Para nuestro proyecto, esta fuente de datos contiene el valor de la cantidad a pagar en la factura eléctrica. Cuando Flash carga este archivo de texto, interpreta esta linea de texto y crea dentro de la pelicula una variable (un elemento de datos) llamada facturaElectrica y le asigna el valor de 60. Nuestro proyecto emplears el valor de esta variable en varias formas. ‘La carga dentro de Flash desde fuentes externas se analiza detalladamente nla lecsién 11, Exportaciin eimportacion de datos en Flash. Las variables son deseritas a decale en ta leciin 7, Uso de datos dindmicos. 2) Denomine at archivo de texto Factura_Electrica.txt y guérdelo en la carpeta que contiene los archivos de esta leccién. Abra el archivo FacturaElectricai.fla, ubicado en la carpeta Leccion01/Recursos. Dado que el objetivo fundamental de este libro es ActionScript, y no el uso de Flash, encontraré que con excepci6n de los scripts, los elementos de nuestro proyecto estén ya preparados. La linea de tiempo principal de nuestro proyecto contiene cinco capas, cada tuna con 10 fotogramas de duracién, Las capas estén denominadas de manera que su contenido sea evidente. En este punto, la capa Acciones esté vacta, 3) Abra el inspector de propiedades y seleccione el campo de texto de la esquina superior izquierda de la escena, justo abajo del texto “La cantidad que debe es:”. En el inspector de propledades, asigne al campo de texto el nombre de instancia debida, Puesto que este campo de texto ser usado para desplegar la cantidad de la factura eléctrica, lo hemos llamado debida, 17 INTRODUCCION A ACTIONSCRIPT18 LEccION 1 EERE Frist 5, asignarles nombres de variables alos campos de texto era la forma de idemifcarlos en ActionScript. En Flack MX, sin embargo, los campos de texto son inslancias del nuevo objeto TextField. Como tal, ahora som idenifados usando nombres de instancas, Aunque puede eur asignando nombres de variables a las campos de teo, algunas elas nuevas funcionaldades proporconadas alos objeos TextField no etartn disponibles si do hace. Asi ex mejor usar nombres de intancia para idenificar os campos de testo. « 4) Con el inspector de propiedades todavia abierto, seleccione el campo de texto debajo del texto que se lee “La cantidad que desea pagar es:”. En el inspector de propledades, asignele a este campo de texto el nombre de instancia de pagada. Observando cl inspector de propiedades, se dari cuenta de que éste es un campo de Introduccién de ‘Texto. Serd usado para aceptar la introduccién de datos del usuario; en este caso, la cantidad que desee pagar de la factura eléctrica. Hemos especificado cero (0), asf que este valor aparecerd en este campo cuando la pelicula comience a reproducirse. 5) Con el inspector de propiedades todavia abierto, seleccione el campo de texto de la parte baja de la escena, debajo del bot6n interruptor. En el inspector de propiedades, asignele a este campo de texto el nombre de instancia mensaje. Este campo de texto ser usado para desplegar el mensaje personalizado al usuario, dependiendo de cusnto escoja pagar. 6) Seleccione la instancia del clip de pelicula del foco y denominela luz. Con el fin de que podamos instruir a nuestro script qué hacer con ella, debemos asignarle un nombre. Esta instancia de clip de pelicula tiene tres etiquetas de fotograma en su linea de tiempo (apagado, encendide y caliente) que representan cémo se veri en distintas condiciones. Inicialmente, aparecerd como apagado.En nuestro script (el cual configuraremos en un momento), queremos que el clip de pelicula se quede en esta etiqueta si el usuario paga menos de lo que debe, es decir, el foco no se encenderé porque el usuario no ha pagado suficiente. Si el usuario aga la cantidad exacta, mandaremos la Iinea de tiempo a la etiqueta de forograma cencendido, para que el foco se encienda. Si el usuario paga demasiado, descamos que la Iinea de tiempo del clip se desplace al fotograma con la etiqueta caliente, ara que parezca que'el foco esté recibiendo més potencia de Ia que requiere. Ahora que todos los clementos de nuestra escena tienen nombre, estamos listos ara comenzar el script; empezaremos por indicarle a nuestra pelfcula que cargue los datos de nuestro archivo de texto externo. 7) Con el panel Acclones abierto (en el Modo Experto), seleccione el fotograma 1 de la capa Acciones, y escriba: VoadVartablesNum ("Factura_Electrica.txt", 0); Sugerimos que dee el panel Accionesen el Modo Expertoporyue representa la : ‘manera sencilla de escribir los scripts analixados en el libro. Esta linea de script carga la variable desde el archivo Factura_Electrica.cxt (el cual ereamos antes) en el Nivel 0, que es el archivo de pelicula en el cual estamos trabajando, El archivo Factura_Electrica.txt contiene una sola variable llamada facturaElectrica con un valor de 60. Asi, después de que se ejecute esta linea de cédigo, nuestra pelicula contendré una variable facturaElectrica con un valor de 60. Este simple proceso transfiere las variables del archivo de texto a la pelicula. VoadVartablekum() cs una accién. Hacemos que trabaje de una manera especifica colocando un tnico parimetro dentro de los paréntesis. Esta accién particular tiene dos valores de pardmetros, separados por una coma, El primero se emplea para indicar la fuente que conticne cl dato externo; el segundo, para indicar en cusl linea de tiempo se cargarsn los datos. Encontraré que muchos elementos de ActionScript pueden aceptar miltiples parimetros de una forma similar. Pusimos este script en el Fotograma 1 de nuestra pelicula para que sea ejecutado en ‘cuanto ésta empiece a reproducirse. Esto es importante dado que nuestra pelfcula necesita el valor de facturaElectrica para que funcione el script que seri agregado al bot6n interruptor. 19 INTRODUCCION A ACTIONSCRIPT20 LECCION 1 8) Agregue un fotograma clave al fotograma 10 de la capa Acciones. Con el panel Acciones abierto, escriba el siguiente script en ese fotograma clave: debida.text = facturaElectric stop Os Como lo configuré en el paso anterior, el fotograma 1 contiene la las variables contenidas en el archivo Factura_Electrica.txt. La linea de tiempo continiia ejecuténdose cuando el archivo de texto se carga; cuando Ilega al fotograma 10, la acci6n anterior se ejecu La primera accién determina que el valor desplegado en la instancia del campo de texto debida sca igual al valor de la variable facturatlectrica, Recuerde que debida es el nombre d nuestro proyecto, y la variable facturaElectrica se carg6 desde el archivo de texto con un valor de 60. Asi, esta linea de cédigo hace que el ntimero 60 aparezca en el campo de texto debtda, stancia del campo de texto de la esquina superior izquierda de ‘Como mencionamos antes, los campos de texto son considerados objetos en Flash MX y, en tal cardcter, tienen muchas propiedades. Una de ellas es la propiedad text, la cual se emplea para designar el texto a desplegar en la instancia. El script anterior demuestra cémo se utiliza esta propiedad para fijar el texto a desplegar en la instancia del campo de texto debtda. Observe c6mo un punto (.) separa el nombre del objeto de su propicdad. En ActionScript, ésta es la manera de indicar que usted quiere trabajar con algo en especifico concerniente al objeto (en este caso, una de sus propiedades).La primera Ifnea también demuestra cl uso de un operador entre dos elementos, una propiedad de objeto y una variable (y su valor). Aqui, el signo de igual (=) es usado para indicarle al script que asigne el valor de la variable facturaElectrica a la propiedad text de la instancia del campo de texto debida. La tiltima accién en el script simplemente detiene Ia linea de tiempo para que deje de reproducirse, Dado que esta accién no requiere un valor de parimetro, los paréntesis de la izquierda estén vactos. Ya habré notado que hay un espacio de varios fotogramas entre el que contiene la ‘ccién para cargar las variables del archivo de texto y el fotograma 10, cuya accién usa a variable facturaEtectritca cargada, Esto deja un tiempo suficient para que el archivo de texto sea cargado. Si tratamos de usar la variable facturatlectrtca antes de que cl archivo de texto termine de cargarse, nos topartamos con un problema. De hecho, nuestra ‘pelicula podria actuar como sel archiva de texto nunca se hubiera cargado. Un colckin de Jotogramas, como el creado agi, es una manera de citar ese problema; analizaremos otras ‘en capttulos posteriores. Ahora es tiempo de configurar el script para el bot6n interruptor. 9) Con el panel Acciones abierto, seleccione el botén interruptor y escriba el siguiente script: on (press) { cantidadPagada = Number (pagada. text) ; cantidadDebida = Number (debida. text) } Lo primero a notar con respecto a este script es que se ejecuta cuando se selecciona (cuando se “oprime”) el botén al cual esté anexado, Después de este evento se encuentra una llave de apertura ((), un par de lineas de script, y una llave de cierre (). Estas llaves son usadas para indicar “Realiza estas dos cosas como resultado de que el bot6n sea presionado” El script lleva a cabo dos tareas: primero, crea una variable llamada cant idad cuyo valor se fija en uno igual al desplegado en Ia instancia de campo de texto pagada, aunque con una particularidad. Normalmente, cualquier cosa contenida en un campo de texto es considerada texto. Asf, aunque el valor de 100 aparezca en el campo de texto como un niimero, se considera un texto (que consiste de los caracteres 1, 0 0, 0 “100” con comillas) en lugar del niimero 100 (sin comillas). 21 INTRODUCCION A ACTIONSCRIPT2 en El hecho de que Flash trate como testo a todo elemento introducido en un campo de texto es un comportamiemto predeterminado. Aungue el usuario no escriba el texto entrecomillado, Flash se acupa de agregar comillas invisiblemente, para indicar a la pelicula que el valores un text. La funcién Number) es una herramienta especializada que le permite converti el valor de texto en valor numérico para que ActionScript lo reconozca como ntimero. Es necesario poner el texto que desee convertir entre los paréntesis de la funci6n, Por ejemplo: miNumero = Nunber ("945"); Esto convierte el texto “945” en el niimero 945 (sin comillas) y asigna ese valor numérico a la variable llamada miNuero. En el script anterior, usamos la funcién Nunber() y colocamos, entre los paréntesis, una referencia al valor de texto a convertir. Asi si cl usuario teclea “54” (inicialmente texto) dentro del campo de texto pagadd, la funcién Nunber permite que cant idadPagada tenga un valor de 54 (sin comillas, es decir, el nimero 54). ‘ La funcién Mmber() tiene sus limitantes: en primero lugar, sblo puede usarse (para converir algo que sea potencialmente un nimero. Por Gemplo, Mmber ("perro") da ‘por resultado NaN (no un nero), porgue la concersién numérica noes posible. La siguiente linea del script hace esencialmente lo mismo, s6lo que el valor de cant idadDebida se fija en uno igual al valor (convertido a ntimero) desplegado en la instancia de campo de texto debida. Recordar que esta instancia de campo de texto despliega la cantidad de facturaElectrica, 0 “60”. Asf, después de que la conversion se lleva a cabo, la variable cantidadDebida obtiene el valor de 60. Se convierten los valores de los campos de texto de esta manera porque el resto del script los estard usando para hacer evaluaciones y célculos mateméticos, lo que implica la necesidad de considerarlos como mtimeros, y no como textos. En resumen, cuando se presiona el bot6n, los valores de texto desplegados en los campo de texto pagada y debida son convertidos a néimeros. Esos valores numéricos son asignados a las variables llamadas cant dadPagada y cantidadDebida, respectivamente. Seguiremos usando los valores de estas variables en el resto del script.10) Con el panel Acciones todavia abierto, agregue las siguientes lineas al script creado en el paso anterior. Agregue estas lineas entre las llaves ({)), justo debajo de donde dice cantidadDebida = Number (debida.text);: Af (cantidadPagadacantidaddebida) { diferencia = cantidadDebida-cantidadPagada; luz.gotoAndstop("cal tente") ; mensaje.text = "Usted pag6 "s#diferenciat* pesos de mis en su factura eléctrica."; } else { uz. gotoAndStop(“encendido" mensaje.text = "Usted pagé Ia factura eléctrica comleta."; } Como agregamos estas lineas dentro de las llaves ({}) del evento on (press), serin ejecutadas cuando el botén sea presionado. Esta parte del script esté compuesta por tres partes esenciales, identificadas por las siguientes lineas: if (cantidadPagada < cantidadDebida) else {f (cantidadpagada > cantidadDebida) else F (CanbioxPopataccntiaatDebiaa) { ‘fereneta = cant dodDebico-canttdadPopada; luz. gotedstop("hoogao") nereaje.tert = “Usted pogS “sdieronctos" pesca de sence en su factura eléctrica."; Estas tres lineas representan una serie de condiciones que el script analiza cuando ¢s ejecutado. La condicién a ser analizada esté especificada dentro de los paréntesis. Por debajo de esas tres Ifneas en el script (entre las llaves adicionales) estén varias 2 INTRODUCCION A ACTIONSCRIPTLecciOn 4 Iineas de cédigo con sangrfa, las cuales representan las acciones que serdn ejecutadas si se cumple esa condici6n particular. He aqui cémo trabaja: Cuando nuestro botén interruptor es presionado, el script determina si la cantidad la cantidad debida. Esto es 0 que las tres condiciones del script analizan. Revisemos la primera condici6n, la cual luce asf: ‘ que el usuario introdujo es mayor, menor o igual Af (cantidadPagada < cantidadDebida) { diferencia = cantidadDebida-cantidadPagada; Tuz.gotoAndstop (“apagado") ; mensaje.text = "Usted pagé "+ diferencia +" pesos de menos en su factura eléctrica, + La primera linea emplea el operador menor que (<) para comparar el valor de una variable con el de otra. Basicamente indica, “Si la cantidad que el usuario ingresa en pagada (cantidadPagada) es menor a la cantidad debida (cant idadbebtda), roma las acciones siguientes.” Estas acciones se ejecutan sélo si esta condicién es verdadera (true). Ademés, si son ejecutadas, se ejecutan como un grupo; es por esto que estén ubicadas dentro de su propio par de Haves ({}). La primera accién crea la variable Hamada diferencia y le asigna el valor de cantidadebida menos el de cantidadPagada. Si, por ejemplo, el usuario introduce 40 como la cantidad a pagar, diferencia tendrd un valor de 20 (cantidadDebida ~ cantidadPagada, 0 60 ~ 40). Es importance hacer notar que cualquier ecuacién del lado derecho del signo de igual es calculada antes de asignar el valor calculado al elemento de Ia izquierda. La siguiente linea indica a la instancia de clip de pelicula uz que vaya y se detenga en cl foograma con etiqueta “Apagado”. Como esta accién s6lo se ejecutar si el usuario paga de menos, es apropiado que la luz. permanezca apagada. La Glkima linea genera un mensaje personalizado que se desplegaré cn el campo de texto mensaje. Llamamos personalizado a este mensaje por la forma en que esté construido dentro del script. Observe el uso de la variable diferencia cn esta linea: el valor de diferencia cs inscrtado en la mitad de este mensaje, en medio de dos segmentos de texto entrecomillados y los signos de suma (+). Si diferencia tienc el valor de 20 (como se describe arriba), este mensaje se Ieerd de la siguiente forma: “Usted pagé 20 pesos de menos en su factura eléctrica.”; Recuerde que cualquier cosa entre comillas se considera texto simple. Como diferencia no csté entre comillas, ActionScript sabe que se refiere a una variable con ese nombre y por ello insertard el valor correspondiente abt. Bl signo de suma (+) es usado para concatenar (unir) cualquier cosa para crear un solo mensaje. El signo de igual (=) es usado para asignar el valor concatenado final a la propiedad text del campo de texto mensaje.Si la cantidad que el usuario ingresa en pagada es la misma o mayor a la debida, esta Parte del script es ignorada y se pasa a la siguiente parte del script, que se lee como sigue: else if (cantidadPagada>cantidadDebida) { diferencia = cantidaddebida-cantidadPag luz.gotoAndstop ("caliente") ; a mensaje.text = "Usted pagé " + diferencia +" pesos de mis en su factura eléctrica."; + La primera I{nea declara, “Si la cantidad que el usuario ingresa en pagada es mayor que la cantidad que debe, toma las acciones de abajo.” Las acciones ejecutadas aqui son s6lo variaciones de las analizadas anteriormente, con un par de pequefias diferencias: la primera consiste en que la instancia del clip de pelicula Tuz se manda al fotograma etiquetado “caliente”, el cual despliega al foco recibiendo demasiada energia, para dar a entender que el usuario ha pagado de més. La segunda diferencia son las palabras del mensaje personalizado. En lugar de decir pagé de menos, dice pagé de mds, Las acciones en esta seccién sélo se cjecutan si el usuario a aga més de lo que debe. Si ése no es el caso, estas acciones son ignoradas y se analiza la wltima parte del script. Esta parte se lee como sigue: else { lur.gotoAndStop (“encendido*) : mensaje.text = "Usted pagé Ja factura eléctrica completa."; } Notaré que el script no empieza preguntando si cant idadPagada es mayor o menor a cantidadbebida (como lo hicieron las dos primeras secciones). Esto es porque el script no estarfa analizando esta parte si el usuario no hubiera ingresado la cantidad exacta de lo debido; es decir, esta parte del script sélo se ejecutard si la primera y la segunda no se ejecutaron. Al final, cuando el boron es presionado, se ejecuta sélo una de esas tres acciones. Como resultado, la instancia del clip de pelicula uz aparecer de alguna manera, y se desplegaré un mensaje personalizado en el campo de texto mensase. Queremos que cuando se suelte el botén interrupror se restauren los elementos en ‘uestra escena para que aparezcan como lo hicieron al momento de correr por primera ver la pelicula. Vamos a agregar esa funcionalidad. 25 INTRODUCCION A ACTIONSCRIPT11) Con el panel Acciones abierto y el botén interruptor seleccionado, escriba el siguiente script: fon (release) { luz.gotoAndStop (“apagado") mensaje.text = "* fon (ese) ¢ ‘cant dndPogedn > Hones (pogudn. cert) Cnnviadbentan > Mec (Gabuae. ext)? TP tonmeiedbegndnconneonabenitn) Siteceacia = castidedbenian-cantionaPegnt: Seanejectere © “oeted poy! Teditacencias” pesos de menoe an ou facture eldccetsn.*y ) eine at (cantiandPageaascantsanabebise) Gersgoccdndocap(tomtenee")? Maajeccene © Svaved pepe “sdigerencine” pesos de mie en ou factie elctciem cenenjectent = "Uscea pogo te £4ccure eléctricn com Este script es disparado cuando se suelta el bot6n y mandari a la instancia del clip de pelicula Tuz al forograma etiquetado como “Apagado”, ademas de vaciar el campo de texto mensaje, regresando los elementos de la escena a su estado original 12) Guarde el archivo como FacturaElectrica2,fla. 4 Usaremos este documento en el siguiente ejercicio de la leecién, 26 LECCION 1 i,PRUEBE SU PRIMER SCRIPT Es un suefio creer que ActionScript siempre trabaja exactamente como lo plane6. ‘Tan fécil como olvidar una coma o escribir mal una palabra en una carta, es cometer errores cuando se escriben scripts, sin importar cusn familiarizado esté con ActionScript, Sin embargo, a diferencia de quien recibe una carta, Flash no perdona los errotes de escritura dentro de un script. En los scripts, los errores constituyen oo defectos (bugs), y éstos implican que su script no funcionard en absoluto, 0 por lo ‘menos, no como lo plane6. Por suerte, Flash oftece ayuda para probar los scripts y marcar los defectos. 1) Si facturaelectrica2.fla no continGa abierto, ébralo ahora (es el archivo del ejercicio pasado). En este ejercicio probaremos la funcionalidad del proyecto desde el entorno de prueba de Flash, 2) De la barra de menGs de Flash, escoja Control » Probar Pelicula. Este comando crea una versiGn provisional completamente funcional de su pelicula exportada y la desplicga en el entomo de prueba de Flash. Aunque hay muchas formas de probar su pelicula en este entorno (para determinar el tamafio final del archivo, su fluidez y su apariencia), nosotros estamos interesados en probar las caracteristicas interactivas, lo que implica hacer todo lo que podamos para confundir ala pelicula, FIED corcensa o tants amigos colegas como le sea posible de probar su proyecto. De «sta forma tendrd un mayor espectro de posibilidades de prucba en distintos escenarios y le serd mds fdcil encontrar todos Ios defectos potenciales 3) Ingrese varias cantidades en el campo de texto “La cantidad que desea pagar €s:” y presione el botén interruptor. * Ingrese una cantidad menor a 60. Si ingresa 35 en este campo de texto, el mensaje que debe aparecer deberi decir “Usted pagé 25 pesos de menos cn su faccura eléctrica”, y la instancia de clip de pelicula Lux debe permanecer apagada, ‘+ Ingrese una cantidad mayor a 60. Si ingresa 98 en este campo de texto, el , mensaje que debe aparecer es “Usted pago 38 pesos de més en su factura cléctrica”, y la instancia del clip de pelicula Luz debe mostrar una apariencia sobrecargada (es decir, en el estado visual de! fotograma etiquetado Caliente). Como Io mencionamos antes, esto es lo que debe pasar; lo que realmente sucede €s que el mensaje muestra un sobrepago de ~38 pesos, jno de 38 pesos! Marcaremos esto como un defecto y continuaremos probando. * Ingrese la cantidad exacta de 60. Si ingresa 60 en este campo de texto, el mensaje que debe aparecer es “Usted pagé la factura eléctrica completa,” y la Instancia del clip de pelicula Luz debe aparecer encendida. 27 INTRODUCCION A ACTIONSCRIPTLEcCION 1 «© Borre todo en este campo de texto. Si hace esto y presiona el bot6n Interruptor, obtendra un mensaje que dice “Usted pag6 la factura eléctrica completa,” y la Instancia del clip de pelicula Luz apareceré encendida. Obviamente, esto esté mal, Marcaremos esto como un defecto y continuaremos probando. « Ingrese algdn texto. Si ingresa cualquier cosa comenzando con una letra y presiona el bot6n Interruptor, obtendré el mensaje que se lee “Usted pagé la + factura eléctrica completa”, y Ia instancia del clip de pelfcula Luz aparecerd encendida, otro error obvio, el cual marcaremos como defecto. HERE ceneratmente, exando se encuentran defects, es mejor detener la prueba y comensar «a corregirlos a medida que se detectan, en ves de esperar a marcar todos los errores para comenzar a solucionarlos. La rasén es que cuando se intenta timinar un defecto puede introducirse otro nuevo accidentalmente. Ast, al intentar corregir una gran cantidad de defectos a la ves, puede resultar otra cantidad de defectos nucvos. En cambio, al corregir dos defectos uno a la vex, es posible concentrarse mejor en su soluci6n y se reduce el riesgo de cometer otros. ‘ Como aprendié anteriormente, nuestro proyecto contiene los siguientes defectos: © Sil usuario paga de mis, el sobrepago se muestra como un ntimero negativo en cel mensaje personalizado. * Sil usuario escoge no pagar nada, nuestro proyecto funciona incorrectamente. «© Siel usuario ingresa texto en lugar de un valor numérico, nuestro proyecto funciona incorrectamente. Ahora tratemos de encontrar el origen de esos defectos. En el caso del primero, sabemos que el valor numérico incluido en este mensaje dindmico corresponde a la variable di ferencta, y que es determinado cuando el script se ejecuta. Adicionalmente, sbemos que este defecto sélo sucede si el usuario paga una cantidad mayor a la especificada en la factura. Entonces, el problema debe de radicar en la manera en que diferencia cs calculada cuando el usuario paga de mis. Revisaremos esa parte de nuestro seript. En lo que respecta a los otros dos casos, nuestro script esté configurado para que actie de varias maneras al ser ejecutado, dependiendo de la cantidad a pagar que el usuario introduzea. Sin embargo, olvidamos la posibilidad de que el usuario no ingrese nada, 0 de que ingresen texto, lo que produce un funcionamiento imprevisto. Le haremos una ligera adici6n a nuestro script para corregir esto.4) Clerre el entorno de prueba y regresé al de creacién. Seleccione el botén interruptor y modifique la linea 9 del script, la cual se lee actualmente asi: diferencia = cantidadDebida-cantidadPagada; a que se lea diferencia = cant idadPagada-cantidadDebi metosie.cert = "Unted pegt *HGiterenciae” pesos de manos en su facture eltcecicn.*> 3 eine sz iousisnchagntaocene tencbenicn) t meneaje.tent = "Oaced pag “Hdiserenciae” te mo en ou tncvura elteteice.*: Al revisar la secci6n del script que determina lo que sucede cuando cantidadPagada excede a eantidadDebida, descubrimos que diferencia sc calcula de la resta de cantidaddebida menos cantidadPagada. :Cémo esto constituye un problema? Si el usuario paga 84 pesos, la diferencia se calcula restando 60 menos 84 (0 cant idadDebida menos cantidadPagada). Al restar un ntimero mayor a un nimero menor se tiene como resultado un ntimero negativo. Para solucionar el problema, simplemente cambiamos la posicin de cantidadbebida y cantidadPagada en la linea del script que fija el valor de diferencia, Ahora, cl ntimero menor es restado del ntimero mayor, dando como resultado un ntimero positivo. FERRE 0 ecesiza mocicar ta otra rea del serps donde se fija el valor de diferencia, porque se ejecutard sélo si el usuario paga menos de lo que debe, en cuyo caso el valor estd tien caleulado. 29 INTRODUCCION A ACTIONSCRIPT5) Con el botén interruptor seleccionado y el panel Acciones abierto, haga la siguiente adicién y modificacién a la declaraci6n if: Adici if (isMaN (cantidadPagada)) { mensaje.text = "No ingresé una cantidad apropiada en pesos. Anténtelo nuevanente } YY modifique la declaraci6n if, de manera que quede de esta form: Por favor, else {f (cantidadpagadaccantidadDebida) { diferencia = cantidadDebida—cant idadPagadas ‘uz.gotoAndStop (“apagado")* mensaje.text = “Usted pagd " + diferencia +" pesos de menos en su factura eléctrica."; } ‘Notaré que con estas rectificaciones, lo que era la primera condicional, ahora es la segunda. Modificar el script de esta manera provoca que la nueva eondicional sea analizada primero. ADICION MODIFICACION Esta adicién permite al script tratar con la contingencia de que el usuario no ingrese nada o ingrese texto en la cantidad a pagat. Esto indica que cuando ¢! botén interruptor sea presionado, si la cantidadPagada no es un niémero (0 isNaN), no se haga nada en la escena, pero despliega un mensaje que le pide al usuario ingrese una cantidad apropiada en pesos. Si la cantidad ingresada no puede ser convertida a valores numéricos (por ejemplo, “rana”) 0 el campo es dejado en blanco, esta parte del script se ejecuta. La funcién #sNaN() es otra herramienta especial que ActionScript prove para encargarse de tareas criticas. Observe que en lugar de insertar un valor literal entre los paréntesis de esta funci6n (como “gato” 0 57), hhicimos referencia al nombre de una variable. Esto provoca que se analice el valor contenido en Ia variable.La funcibn tsWaN() se cubre con detalle después en el libro. Hicimos que ésta fuera la primera condicién a analizarse porque es la cosa més 6gica a revisar cuando el script se ejecuta por primera vez. Si el usuario ingresa un valor numérico, esta parte del script es ignorada y el resto continga trabajando como se describié anteriormente. . 6) De la barra de menGs de Flash escoja Control » Probar Pelicula. En el archivo de Prueba exportado, escriba varias cantidades en el campo de texto “La cantidad que desea pagar es:” y presione el botén interruptor. En este momento su pelicula debe trabajar bien en todas las circunstancias. 7) Cierre el entorno de prueba y regrese al entorno de autoria. Guarde el archivo como facturaElectrica3.fla. Felicidades. |Ha completado su primera leccién! QUE APRENDIO Enesta lecclon: * Se familiariz6 con los varios elementos que constituyen un script (paginas 8-13) * Plane6 y desarroll6 un proyecto de ActionScript (paginas 13-16) ‘* Escribi6 el script de su proyecto (piginas 16-26) ‘+ Prob6 su script, en busca de defectos (paginas 27-28) * Corrigis los defectos para completar el proyecto (paginas 29-31) a1 INTRODUCCION A ACTIONSCRIPTLECCION 2 Es de conocimiento comin que a cada acci6n corresponde una reacci6n. En el mundo fisico, suceden cosas alrededor de nosotros todo el tiempo, generalmente : ‘como resultado de acciones especificas. Presionamos botones, presionamos gente; incluso, presionamos los botones de la gente, y todo con un simple propésito: solicitar una respuesta. En Flash, se dice que a cada evento corresponde una acci6n. En el entorno de Flash, las respuestas que vienen de presionar, sostener, mover, introducir, salir, etcétera, son disparadas por los controladores de eventos. Ellos con ryen el primer paso para lograr que su pelicula sea interactiva; por ello, comprenderlos completamente es importantisimo. CCrearemes vorios proyectos en esta leccién, incluyendo esta presentacién autoejecutable que usa eventos de fotogramas ‘para proporcionar ‘un funcionariento sin intervencién del usuario.QUE APRENDERA En esta leccién: * Aprenderd a usar los controladores de eventos en scripts © Determinar el mejor controlador de evento para un trabajo dado ‘* Usard eventos de rat6n y de botén para controlar la interactividad ‘* Agregara control desde el teclado a un proyecto * Creard una presentacién autoejecutable usando eventos de fotograma '* Usard los eventos de clips para crear un proyecto interactivo * Orquestard miltiples eventos para completar una tarea * Definiré y emplearé métodos de controladores de eventos * Aprenderd acerca de los detectores y cémo se usan, TIEMPO APROXIMADO ARCHIVOS DE LA LECCION . Completar esta leccién toma Archivos externo: 2 horas aproximadamente. Ninguno Archivos de inicio: Leccion02|Recursos|BventosRaton fla Leccion02|Recursos|EventosP otogramal fla Leccion02|Recursos|EventosClip! fla Leccion02/Recursos|OrquestarEventos! fla Leccion02[Recursos|PartesAutol fla Proyectos terminados: EventosRaton? fla EventosPotograma? fla EventosClip2 fla OnquestarEventos? fla PartesAuto? fla 3B {USO DE CONTROLADORES DE EVENTOS.QUE HACEN LOS CONTROLADORES DE EVENTOS, Los controladores de eventos orquestan la interactividad de sus peliculas al determinar cudndo se disparan los scripts. Los controladores de eventos dan la “serial” a un script para que se ejecute sélo al ocurtr algo especifico, ‘Todos los scripts de su pelicula son disparados por eventos: un usuario que pasa el puntero sobre un bot6n u oprime una tecla, una linea de tiempo que llega a un forograma dado, eteétera. " En ActionScript, los controladores de eventos (con excepcién de los eventos de fotograma) gencralmente constituyen la primera linea del script. Por ejemplo: Cuando pase esto (controladorEvento) { haz esto: haz esto; } Los eventos de fotograma suceden cuando Ia linea de tiempo llega a un fotograma que contiene un script. Al ubicar un script en un fotograma, se hace innecesario identificar el evento fotograma para disparar el script, porque esto sucede en cuanto Ia linea de tiempo llega al fotograma en cuestién. Ast, si ubicéramos el script, anterior en un fotograma, se parecerta a esto: haz estos haz est Mientras mejor comprenda los controladores de eventos, més control tendré sobre la ‘experiencia del usuario; mediante el uso apropiado de los controladores de eventos podri crear entomos a los cuales éste se integraré fécilmente. Muchos programas de computadora permiten al usuario arrastrar y colocar clementos en pantalla, redimensionar ventanas, hacer ajustes con deslizadores y crear obras de arte con herramientas “virtuales”. Todos los modos de interaccién, estin determinados por la manera en que fue programado el sofeware para reaccionar a diferentes eventos (presionar el bot6n del rat6n, mover el rat6n, introducir informacién a través del teclado, eteétera). ‘SELECCION DEL CONTROLADOR DE EVENTO ADECUADO Usar los controladores de eventos adecuados representa uno de los més grandes retos para los usuarios de ActionScript, tal vez. porque la mayoria de nosotros no prestamos atenci6n a la forma en que pasan las cosas alrededor nuestro y, en consecuencia, no conocemos la forma de crear entornos interactivos. Comprender ‘cémo suceden las cosas y c6mo interactéa la gente en el mundo real puede ayudarle mucho a aprender a recrear esas interacciones en las pelfculas de Flash, Al presentarle los controladores de eventos de Flash, examinaremos algunas formas de producir, mediante su uso, eventos reales. Cuando revise esos eventos, recuerde Jo que ha aprendido al principio de esta lecci6n: en Flash, para cada evento, hay una accién (o reaccién).LERLS Afcs adelante, en esta misma leccion, analisaremos los métodos de controladores de eventos, que son una extensién de los controladores de eventos esténdar. USO DE LOS EVENTOS DE RATON Los eventos del ratén controlan la ejecuciGn de los scripts cuando el ratén (o més precisamente, el puntero del ratén) interactia con un bot6n o con una instancia de a: un clip de pelfcula. En esos casos, usted emula acciones que Hlevaria a cabo con sus manos. ‘Si estd familiarisado con la instramentaci6n de eventos de ratén en Flash 5, sabré que sélo puede usarlos mediante botones. En Flash MX, sin embargo, también puede ‘anexar eventos de ratén a instancias de clips de pelicula (lo cual analizaremos dealladamente més adelante en este mismo ejercicio). Hacer contacto: on (press) En el mundo fisico, cuando toca o presiona algo —sea eso una persona o un cubo de hielo— usted espera una reaccién: la persona responde y el cubo de hielo comienza a derretirse. El controlador de evento on (press) funciona maravillosamente para cemular el toque, el agarre o la presién (asi como el resultado de cualquiera de esas acciones). Puede usar este controlador de evento para disparar un script cuando el puntero esté encima de un bot6n (o la instancia de un clip de pelfeula) y se oprima el botén del ratén. Soltar: on (release) Cuando usted suelta algo o deja de hacer contacto con algo, usualmente ha terminado de interactuar con el objeto y esté listo para proseguir. Este controlador de evento, el cual emule el liberar algo (o soltarlo), es la forma més directa de permitir al usuario accionar su pelicula. Es lo més usado en botones o instancias de clip de pelfcula para disparar acciones. Puede usarlo para disparar un script cuando el botén del ratén se suelta (si éste fue presionado primero sobre un botén la instancia de un clip de pelicula). @ x {USO DE CONTROLADORES DE EVENTOSucciOn 2 Jalary soltar fuera: on (releaseQutside) ‘Imagine una baraja en una mesa y que usted presiona la carta de arriba con su dedo, lo arrastra fuera de la baraja y entonces levanta el dedo. En Flash, esta baraja puede representar un bot6n que un usuario presiona, arrastra hacia fuera y suelta. Puede usar este controlador de evento para disparar un script cuando su usuario ha presionado un bot6n o una instancia de clip de pelicula y ha soltado el bot6n del rat6n fuera del objeto. Controlar mediante el teclado: on (keyPress) Puede usar este evento para programar su pelicula de forma que active un script ‘cuando el usuario presione una tecla de letra, niimero, signo de puntuacién, simbolo, flecha, barra espaciadora, Insertar, Inicio, Fin, Pagina Arriba o Pégina Abajo. Pasar por encima sin tocar: on (rol 10ver) Puede poner su mano sobre una hornilla, sin tocarla, y sentir el calor, Este controlador de evento puede emplearse para emular la manera en que algunos objetos son afectados por otro (un bot6n o instancia de clip de pelfcula) que irradia calor, frfo, luz, aire, etc. También sirve para desplegar informacién acerca de lo que realizard un bot6n o una instancia de clip de pelicula antes de ser presionada (de manera similar a una leyenda de informaciGn sobre una herramienta de Windows o un grifico con zonas sensibles en HTML). Emplee este controlador de evento para disparar un script cuando el usuario ubique su rat6n sobre un bot6n o una instancia de clip de pelicula. a Quitar de encima: on (ro110ut) Obviamente, cuando quita su mano de encima de esa homnilla, deja de sentir el calor y su mano se enfrfa de nuevo. Esto es lo que emula este controlador de evento: puede usarlo para disparar un script cuando el usuario quite el puntero de encima de un bot6n o una instancia de clip de pelicula sobre la cual estaba.a ‘Surcos, altibajos, frotar: on (dragOver) a El acto de frotar implica un movimiento alternado hacia atrds y hacia delante sobre tuna superficie. Al abrillantar un zapato con un pafio, por ejemplo, en cada pasada va adquiriendo més brillo (accién); dragOver le permite emular este tipo de accién en su pelicula activando un script cada vez que el puntero pasa por encima del mismo botén © instancia de clip de pelicula, mientras mantiene presionado el bot6n del rat6n. e+ ae Rozar, tocar fugazmente: on (dragQut) Este evento le permite emular lo que sucede al presionar 0 tocar fugazmente, como ‘cuando roza a alguna persona, es decir, cuando toca a alguien y retira répidamente su mano, Puede usar este controlador de evento para disparar un script cuando el usuario ubica el puntero sobre un botén o una instancia de clip de pelicula, presiona cl botén del ratén y lo arrastra fuera del bot6n o instancia de clip de pelicula (sin soltar el bot6n). ¢ wY Enel siguiente ejercicio, crearemos un escéner de huellas digitales con el que el usuario interactuard de varias maneras. En el proceso, aprenderé varios usos. teativos para los controladores de los eventos descritos, emulando las acciones correspondientes (frotar y jalar, entre otras). 1) Abra el archivo EventosRaton1 fla de la carpeta Leccion2/Recursos. ‘Abra el panel Escena y el inspector de propiedades. Puesto que nuestro objetivo es aprender ActionScript, muchos de los elementos necesarios para este proyecto ya estén en su lugar. Vamos a familiarizarnos con lo que hay en el escenario, EI pane! Escena muestra que nuestro proyecto contiene dos escenas, Escaner Huellas ¥ CuartoDeJuegos. Comenzaremos nuestro trabajo en la escena EscanerHuellas, la cual contiene cinco capas denominadas de acuerdo con su contenido. 37 USO DE CONTROLADORES DE EVENTOS'’ 38 LecciON 2 Si selecciona el cuadro de la parte inferior de la pantalla, verd en el inspector de propiedades que se trata de un campo de Texto Dindmico con el nombre de instancia mensaje. Si selecciona la imagen de la mano, notard en el inspector de propiedades que es tuna instancia de clip de pelicula llamada mano. El cuadro negro de la parte media de Ja pantalla también es una instancia de clip de pelicula, éste llamado escaner. Enda parte superior de esta instancia de clip de pelicula hay un bot6n que aparenta ser una pieza rectangular de vidrio; pronto le anexaremos varios scripts. oC elas 2) Bloque la capa BotonEscaner, y haga doble cllc sobre la instancia de clip de pelicula de la parte media de la escena para editarla en el lugar. Se desplegaré la Iinea de tiempo de este clip de pelicula; su funcionamiento general no es importante (aunque, si lo desea, puede mover la cabeza de reproduccién para ver cémo luce en distintos puntos). Es importante, sin embargo, estar conciente de las seis ctiquetas de fotograma de esta linea de tiempo. Una de las funciones de los diversos scripts que anexaremos al botén de vidrio (en la linea de tiempo principal) serd mover la linea de tiempo de este clip de pelicula a algunas de esas etiquetas cuando suceda algin evento del ratén en particular, 3) Regrese a la linea principal de tiempo. Con el panel Acciones abierto, seleccione el fotograma 1 de la capa Acciones y agregue el siguiente script: stop (05 Mouse-hide()s startDrag("nano", true); mensaje.text = "Por favor coloque su dedo en el esciner y presione. Quitelo después de 2 segundos.La primera acci6n evita que la pelicula pase de esta escena hasta que nosotros le demos la instruccién. La siguiente, oculta el puntero porque usaremos la instancia mano como puntero personalizado, La siguiente instruccién le dice a Flash que permita el arrastre de esta instancia por la pantalla como si fuera el puntero normal. La ileima accién coloca el texto en el campo de texto llamado mensade. Puesto que estas acciones estan en el fotograma 1 de la primera escena, ocurririn tan pronto como se empiece a reproducir la pelfcula 4) Con el panel Acciones todavia abierto, desbloquee la capa BotonEscaner yseleccione el bot6n que hay en esa capa (el cual aparece como una lamina cuadrada de vidrio) y agregue el siguiente script: fon (roltover) { escaner.gotoAndPlay (*activo") mensaje.text = "Por favor, presione en la pantalla para continua. mouse event eacaner. gotoAndPlay("Activo") : mensaje.text = "Por favor presione en 1s pantalla para cont: 39 {USO DE CONTROLADORES DE EVENTOSQueremos dar la impresién, cuando la mano se mueva sobre cl bot6n vidrio, de que empieza a ser “detectada” por el escéner. El evento rol10ver nos permite hacer esto disparando dos acciones cuando la mano pasa sobre el bot6n: por una parte, mueve Ja instancia del clip de pelicula escaner al fotograma activo, en donde una animacién breve indica visualmente que el eseéiner est activo y isto para ser presionado; por otra, cambia el texto que se despliega en el campo de texto mensaje. 5) Agregue el siguiente script debajo del que acaba de escribir: on (rollout) { escaner.gotoAndPlay ("inactivo"); mensaje.text = "Por favor, coloque su dedo en el escéner y presione. Quitelo después de 2 segundos."; } Como podré ver al hacer esta adicién, un bot6n puede responder a varios eventos. Este script (y el evento rollout que lo dispara) agrega la accién que se lleva a cabo cuando el rat6n se mueve fuera del botén sin haberlo presionado, En este caso, Ia instancia del clip de pelfcula eseaner va al fotograma inactive, donde una breve animacién indica visualmente que el escéner se estd restableciendo. La siguiente accién on este script cambia el texto desplegado en el campo de texto mensaje. Este es el mismo texto que aparece cuando la pelicula se reproduce por primera ocasi6n, dando la impresién, nuevamente, de que el esedner ha sido restablecido. 6) Agregue el siguiente script debajo del anterior: on (press) { ‘escaner.gotoAndPlay ("digital izando") nensaje.text = "Digitalizando huella. , Cuando el usuario oprime el bot6n y lo mantiene presionado, se dispara este script. La primera accién manda la instancia de clip de pelicula escaner al forograma etiquetado digital izando, donde una breve pero repetitiva animacién de lineas que se mucven arriba y abajo en el escéner, indica visualmente que el proceso de digitalizaci6n se est llevando a cabo. La siguiente accién en el script cambia el texto desplegado en el campo de texto mensaje. | | | | \ | |7) Agregue el siguiente script abajo del anterior: fon (dragdut) { escaner.gotoAndPlay (*Error*); mensaje.text = "Ocurrié un error. quité el dedo antes de que el proceso terminara. Por favor, intente de nuevo."; } oa Este script y el evento dragdut quc lo dispara controlan lo que sucede cuando el Puntero estd sobre el bot6n con el bot6n del ratén presionado, y luego se arrastra fuera del mismo sin soltar el bot6n del ratén. Esto maneja la eventualidad de que el usuario oprima el botén de la escena para iniciar la digitalizacién pero quite abruptamente el puntero, abortando la operacién. Como resultado, la de clip de pelicula eseaner se dirigiré al fotograma error, donde una animacién breve indica visualmente que hubo un error en el procedimiento. stank La siguiente accién en el script cambia el texto desplegado en el campo de texto wens 8) Agregue el siguiente script debajo del script actual: ‘on (release) { escaner.gotoAndPlay (“proceso” Wensaje.text = "Procesando 1a digital izacién... } Este script se dispara cuando el usuario presiona el bot6n y después lo suelta. La Primera accién manda la instancia de clip de pelicula al fotograma etiquetado como proceso, donde una animacién breve indica que la huella estd en proceso de identificaci6n. Al final de esta animaci6n, una accién de fotograma le indica a la linea principal de tiempo que vaya al fotograma euarte y se detenga. Esta etiqueta de fotograma esté en el fotograma 1 de la escena CuartoDeJueges, la siguiente escena de nuestro proyecto, Esta funcionalidad permite a una acci6n dentro de la linea de tiempo de un clip de pelicula mover la linea de tiempo principal entre escenas. La siguiente accién en el script cambia el texto desplegado en el campo de texto mensaje. Ha terminado de configurar esta escena. Durante la reproduccién, con la apropiada interaccin del usuario, nuestro proyecto debe pasar a la escena CuartoDeduegos. Comencemos a trabajar abi. a {USO DE CONTROLADORES DE EVENTOS.9) Con el panel Escena ablerto, haga clic en el nombre de la escena CuartoDeJuegos: Esta escena contiene siete capas, denominadas de acuerdo con su contenido. En esta escena, anexaremos eventos del ratén a instancias de clips de pelfculas para facilitar la interactividad, y para demostrarle c6mo puede emplear eventos de ratén casi de la misma forma que usa botones y instancias de clips de pelicula. En la parte superior izquierda del érea de trabajo, justo arriba del escenario, vers un pequefio cfrculo que representa una instancia de clip de pelicula vacfo (sin ningtin elemento grfico). Anexaremos un par de eventos de rat6n a esta instancia, En la parte media del trozo de madera hay un trozo mis pequefio, el cual es una instancia de clip de pelicula llamada protuberancia, Ubicaremos un evento de rat6n en esta instancia para permitimos emular Ia eliminacién de esta protuberancia mediante lijado. La carta del lado derecho del escenario es una instancia de clip de pelicula. Le agregaremos un script mediante el cual pueda “caer en su lugat” al hacer clic sobre * ella y arrastrarla a2 7 LeceiON 210) Con el panel Acciones abierto, seleccione el fotograma 1 de la capa Acciones ‘ yagregue el sigulente script: startDrag ("mano", true) Esta acci6n es la misma que en la escena anterior permitié a la instancia del clip de pelicula mano ser arrastrada por el escenario. Aunque el puntero permanece oculto 5 cuando la linea de tiempo se mueve de una escena a otra (como nuestro proyecto esté configurado para hacerlo), necesitamos continuar arrastrando los objetos cada que Ia escena cambie; ése es el objetivo de esta acciGn. 11) Con et panel Acciones ablerto, seleccione ta protuberancia y agregue el siguiente script: on (dragover) { this. alpha = this. alpha - 10; } Sicl usuario presiona y sostiene oprimido el bot6n del rat6n mientras mueve el cursor hacia delante y atrés sobre esta instancia, la opacidad de la protuberancia ird decreciendo 10 por ciento por pasada (dragOver); después de 10 pasadas, ésta seré invisible, produciendo el efecto de eliminacién por lijado. La manera en que este script trabaja es simple: con cada evento dragOut, fijamos el valor de la propiedad alfa (transparencia) de la instancia en el que tenga menos 10. El término this es una referencia contextual al objeto al cual esté anexado el script. Para mds informacion acerca del término thts, ast como de otras rutas de destino, vea la lecin 3, Ratas de destino, 12) Con el panel Acciones todavia abierto, seleccione la instancla del clip de pelicula carta y agregue el siguiente scri on (releaseOutside) { this._x = _root. mouse: this._y * root. _ymouse; } El script se ejecutard si el puntero es colocado sobre Ia instancia con el bot6n del rat6n presionado, después se saca de la misma (sin soltar el bot6n) y entonces se libera. Bl script cambiaré la posicién x y y de la instancia del clip de pelicula carta de modo que concuerde con la posicién x y y en el momento en que se suelte el bot6n del ratén. En otras palabras, suponga que la instancia de clip de pelicula carta se encuentra en el lado izquierdo del escenario; siel usuario coloca el puntero sobre la instancia, presiona el bot6n del ratén, lo mantiene presionado, arrastra el cursor fuera de Ia instancia (digamos al lado derecho del escenario) y entonces libera 1 bot6n del ratén, la instancia de clip de pelicula carta “caeré sobre” 0 “salearé a” la posicién de! puntero en el momento de soltar el bot6n del ratén. 43 USO DE CONTROLADORES DE EVENTOSLecciOn 2 13) Con el panel Acclones abierto, seleccione la instancia de clip de pelicula vacfa que se encuentra arriba del escenario y agregue el siguiente script: fon (KeyPress "") { “Foot. protuberancia._alpha = 100; } fon (keyPress “") { oe _root.gotosndStop (1); } fon (reyPrese "") ( “root. protwberancia. alpha = 100: > fon (keyPrese "") ( “Feet .gotoAndStop 1} + Hemos agregado dos eventos keyPress a esta instancia de clip de pelicula. Observe que no es necesario ubicar la instancia en una porci6n visible del escenario, dado que es la presidn sobre una de dos teclas del teclado, y no la interaccién del puntero, lo que dispara las acciones anexadas a ella. El primer evento keyPress se dispara cuando el usuario presiona la barra ‘espaciadora. Cuando esto ocurre, Ia transparencia de Ia instancia de! clip de pelicula protuberancia cs restaurada al 100 por ciento, haciéndola completamente visible de nuevo (en el caso de haya sido “lijada” hasta desaparecer). EI segundo evento keyPress se dispara cuando el usuario presiona la tecla de flecha iaquierda. En ese caso, la linea principal de tiempo (_reet) se mueve al forograma 1, ‘el cual contiene Ia escena Escanerfuel las, en donde el usuario debe digitalizar su hhuella digital de nuevo para regresar al cuarto de juegos. Estos son todos los scripts de su proyecto. 14) Seleccione Control > Probar Pelicula desde la barra de mend para ver su pelicula en accién. Use el esciner y los elementos del cuarto de juegos para consolidar su comprensién de c6mo trabajan esos eventos.15) Clerre el entorno de prueba y regrese al entorno de creacién. Guarde ‘su proyecto como EventosRaton2.fla. Con esto termina su ejercicio, Ahora tiene una completa comprensién de cémo funcionan Jos eventos del rat6n y las formas en que puede usatlas para mejorar sus proyectos. APROVECHAMIENTO MAXIMO DE ANEXION DE EVENTOS DE RATON A CLIPS DE PELICULAS En Flash 5 y versiones anteriores, era posible anexar eventos de rat6n solamente a las instancias de botones. En Flash MX, sin embargo, también las instancias de clips de pelicula pueden tener anexados eventos de rat6n (como lo mostramos en el ejercicio anterior). Para aprovechar al maximo la mayorfa de estas nuevas y potentes funciones, debe tomar conciencia de algunas caracteristicas, especialmente si usted se familiariz6 primero con el manejo que de botones y eventos del ratén hacian las versiones anteriores de Flash: ‘+ Para hacer que un clip de pelicula sea tratado como un botén, simplemente anéxele un evento de rat6n. En la mayoria de los casos, no es posible anexar tanto eventos de clip como eventos de ratén a una misma instancia; sin embargo, puede usar métodos de controladores de eventos (que analizaremos més adelante, en cesta misma leccién) para hacer que una instancia de clip de pelicula reaccione a ambos eventos. © Cuando a una instancia de clip de pelicula se le asigna un evento de rat6n para que Flash lo reconozca como botén, ésta conserva toda la funcionalidad de un clip de pelicula. ‘+ Cuando a una instancia de clip de pelicula sc le asigna un evento de ratén para que Flash la reconozca como bot6n, el puntero se transforma en una mano cuando el usuario lo ubica sobre ella. Si desea que una instancia de clip de pelicula actiie como un bot6n, pero no desea que la mano aparezea, fije la propiedad de uselandCursor de la instancia en false con un evento rel Over, como se muestra a continuaci fon (rol1over) { this.useHandCursor = falses } ‘También es posible fijar la propiedad useHandCursor en instancias de bot6n (vea més adelante). ‘+ Aunque puede anexar eventos de ratén a instancias de clips de pelfcula, no puede anexar eventos de clips a instancias de botones (como lo analizaremos mis adelante en esta misma leccién). + Alas instancias de botén se les puede asignar, en esta versin de Flash, nombres de instancia, y pueden tener propiedades similares a las instancias de clips de pelicula (por ejemplo, _alpha, rotation, _y, etcétera). Asf, si le asigna un nombre de instancia a un bot6n, como miBoton, puede cambiar su transparencia usando miBoton,_alpha = 50. 45 USO DE CONTROLADORES DE EVENTOSLecciON 2 Aunque puede asignar nombres de instancia a los botones (y tratarlos de manera similar a los clips de pelicula, empleando propiedades y métodos), los borones no son Iineas de tiempo independientes (como lo clips de pelicula), algo muy importante a considerar cuando use el término thts como ruta de destino. Por ‘ejemplo: si usted ubicara el siguiente script en una instancia de clip de pelfeula, la instancia en sf rotarfa: ‘on(press){ this.rotation = 30; } Sin embargo, si anexara el mismo script a un bot6n, el nivel superior del boron rotarfa, Véalo ast: las instancias de clip de pelicula som lineas de tiempo, aunque cuando se les anexen eventos de rat6n, Flash los reconozca como botones. ‘Aun cuando en esta versién es posible darles nombres de instancias a los botones, ¥y tener propiedades y métodos, siguen siendo residentes de una linea de tiemps no Iineas de tiempo en sf. De hecho, debe de estarse preguntando: ya que ahora los clips de pelicula pueden ser tratados como botones sin perder sus amplias capacidades de clip de pelfcula, apor qué seguir usando botones normales? Bueno, primordialmente porque los estados del botén (en reposo, presionado y con el puntero encima) siguen siendo mucho més féciles de recrear e instrumentar usando botones estandar, Por ello, para crear un bot6n répido y con funcionamiento normal, use las instancias de bot6n. Para lograr una funcionalidad de bot6n muy compleja, use una instancia de clip de pelicula con eventos de ratén anexados. ‘Si usa una instancia de clip de pelicula como bot6n, puede colocar tres etiquetas de forograma especiales (_up, _over, down) en la Iinca de tiempo del clip de pelicula para facilitar Ia apariencia del clip de pelfeula cuando el puntero interactiie con ella (aunque no es necesario hacer esto para poder usar una instancia de clip de pelfcula como botén). De manera predeterminada, la zona activa de un borén clip de pelicula sera Ia forma y el drea del gréfico que contenga, pero puede cambiar la zona activa en cualquier ‘momento con la definicién de la propiedad hitArea, Por cjemplo, el siguiente script fijarfa una instancia de clip de pelicula como la zona activa de un clip borén. miBotonClip.hithrea = "_root.miAreaCl ip" Esta propiedad esté disponible sélo para los botones clips de pelicula, y no para los botones esténdar.USO DE EVENTOS DE FOTOGRAMA. Los eventos de fotograma son, probablemente, los mis sencillos de entender. (Cuando anexa una serie de acciones a un fotograma clave en la linea de tiempo, Flash ejecuta esas acciones cuando la pelicula alcanza ese fotograma durante la Teproduccién. Los eventos de fotograma son adecuados para disparar acciones basadas en el paso del tiempo, o acciones que deban estar sincronizadas con ‘elementos visibles del escenario. Para que un proyecto dinémico pueda comensar a reproducirse debe tener varias cosas ubicadas en su lugar. Este proceso, conocido como inicializaci6n, generalmente implica datos de creac6n o de etablecmiento de algunos aspects dela funcionalidad de la pelicula, Por esta raxin, muchos desarrolladorescolocan varias aciomes en el fotograma 1 dela lea rinipal de tempo para lewar a cabo la inicializacion. Estas accones son usadas para crear variables y matrices, ast como para definir funciones, todo lo cual ser neceario ‘ara iniciar la reproduccin de la pelicula, En el siguiente ejercicio, crearemos una presentaci6n autorreproductble y ‘ autoejecutable, capaz de desplegar imégenes y texto en secuencia usando eventos de fotograma. 1) Abra el archivo EventosFotogramat fla de la carpeta Lecclon02/Recursos. Después abra el inspector de propiedades. Primero, familiaricese con lo que hay en el escenario, Esta escena de 200 fotogramas tiene seis capas (denominadas de acuerdo con su contenido), cinco campos de texto, tres botones y dos instancias de clip de pelicula, La pelicula comenzaré a reproducirse en el fotograma 1, desplegando una imagen y un texto relacionados en la pantalla. En el fotograma 200 colocaremos acciones que hhagan avanzar la imagen y regresen la linea de tiempo al fotograma 1, para comenzar todo el proceso de nuevo. Dado que nuestra pelicula esté configurada para correr a 20 fotogramas por segundo, cada imagen (y la informacién que contiene) serd visible por 10 segundos (que resultan de 200 forogramas divididos entre 20 fotogramas por segundo) antes de cambiarse. Si selecciona la imagen de la Parte media del lado izquierdo del escenario, notaré en el inspector de propiedades que es una instancia de clip de pelfcula llamada imagen, que en si misma contiene varias imagenes; ésta es la base de nuestra presentacién de diapositivas. Pronto agregaremos eventos de fotograma a la linea de tiempo de este clip. La otra instancia de clip de pelicula, indieador, aparece como un pequefio circulo blanco ubicado cerca de la esquina inferior derecha del escenario. Esta instancia contiene una breve animaci6n que indica al usuario que la imagen esté a punto de cambiar (en caso de que desee pausar la presentacién). ar USO DE CONTROLADORES DE EVENTOSHay tres campos de texto a la derecha de la instancia de clip de pelicula imagen. Esos campos tienen los nombres de instancias (en el orden de las manecillas del reloj) Fecha, patsy leyenda, Llenaremos estos campos con infofmacién relativa a la imagen presentada usando eventos de fotogramas. Los otros dos campos de texto aparecen arriba y a la izquierda de los botones de control (para rebobinar, detener y reproducit). El campo de texto situado arriba de esos botones se llama alarma, porque es ahi donde apareceré el texto indicando que la imagen est a punto de ‘cambiar, A la izquierda de los botones de control hay un campo de texto llamado globo. Cuando el usuario se sive sobre los borones de control, la funcién del born se mostrard aqui ais IMAGEN FECHA LEYENDA GLOBO ALARMA INDICADOR 2) Haga doble clic en la instancia de clip de pelicula imagen en medio del escenario para editarla en el lugar. Ahora esté viendo Is linea de tiempo de este clip de pelfeula. Contiene dos eapas cetiquetadas Accfones y Fotos. La capa Fotos contiene cinco fotogramas clave, cada uno con una imagen diferente (si lo desea, puede mover la cabeza de reproduccién para ver las imagenes). La capa Acciones contiene seis fotogramas clave vacfos (explicaremos después por qué esta capa tiene un fotograma clave més que la capa Fotos). — <<7 Ahora llenemos esos fotogramas clave con scripts. 3) Con el panel Acciones abierto, seleccione el fotograma 1 en la capa Acciones yagregue este script: stop (0s root. fecha.text = "15 de junio"; Troot.pats.text = "Escocta"s Troot leyenda.text = "INo es un bello Tugar?*; La primera acciGn impide que este clip de pelicula comience a reproducirse mas allé del fotograma 1, hasta que le demos la instruccién de hacerlo. Las siguientes tres acciones colocan texto en los campos de texto apropiados en la linea principal de tiempo. Esta informacién explica la imagen que aparece cn cl fotograma 1 de la capa Fotos en esta Iinea de tiempo. En otras palabras, siempre que esta Iinea de tiempo esté en este fotograma, la imagen visible y el texto desplegado en los campos de texto coinciden. 4) Con el panel Acciones abierto, seleccione el fotograma 2 en la capa Acciones y agregue este script: _Poot.fecha.text = "16 de junio"; “root.pais.text = "Italia “root. leyenda.text = “La comida fue excelenti Cuando la linea de tiempo de este clip de pelicula se mueva al fotograma 2, estas, ttes acciones actualizarin el texto en los campos apropiados de la I{nea principal de tiempo. Esta informaci6n describe la imagen que aparece en el fotograma 2 de la ‘capa Fotos en esta linea de tiempo. 49 USO DE CONTROLADORES DE EVENTOS50 LecciOn 2 5) Con el panel Acciones abierto, seleccione los fotogramas 3, 4 y 5 en la capa ‘Acciones y agregue los siguientes scripts, respectivamente: Al fotograma 3: “root. fecha.text = "17 de junio"; “root.pais.text = "Grecia"; “root. leyenda.text = "Dinos un paseo en bote.. Al fotograma 4: _root.fecha.text = "18 de Junto"; “root.pats.text = “Francia: Troot.leyenda.text = "...y luego otro."s Al fotograma 5: _reot.fecha.text = "19 de junio"; Troot.pais.text = "Winac Troot.leyenda.text = "iLas montafias son asonbrosas!"; Cada una de estas acciones tiene el mismo efecto; la tinica diferencia es que se disparan cuando la I{nea de tiempo del clip de pelicula es movido a los fotogramas 3, 4 y 5, respectivamente. rrooe-paie-vexe = "Mnaco":6) Con el panel Acciones abierto, seleccione el fotograma 6 en la capa Acciones y agregue este script: gotoAndStop (1); Como vers pronto, avanzaremos dindmicamente a través de los fotogramas de este clip de pelicula, simplemente indicando a Flash que vaya al siguiente fotograma de D la Ifnea de tiempo, sin usar etiquetas de fotogramas 0 nimeros. Cuando terminemos de reproducir las imagenes hasta el fotograma 5, se activaré este script cuando el clip de pelicula avance al siguiente fotograma (el 6), devolviendo la Iinea de tiempo al fotograma 1 (la primera imagen). De esta manera, la presentacién dard vueltas a través de esos cinco grificos hasta que la presentacién sea detenida o el usuario salga de ella. De la forma en que esto esté configurado, es facil agregar imagenes adicionales y texto a la presentacién. Ahora configuraremos la funcién que hace avanzar nuestra presentacién a través de 508 grficos. 7) Regrese a la linea principal de tiempo. Con el panel Acciones abierto seleccione el fotograma clave en el fotograma 140 y agregue el siguiente script: alarma.text = "La imagen cambiaré en 3 segundos Indicador.gotoAndPlay (“encendido") ; El fotograma 200 contendré el script para hacer avanzar la imagen desplegada. Como nuestra pelicula esté configurada para correr a 20 fotogramas por segundo, ubicar este script en el fotograma 140 causard que se ejecute 3 segundos (200 fotogramas menos 140 fotogramas es igual a 60 fotogramas, o 3 segundos) antes de que la imagen cambie. La primera accién desplicga un mensaje de alarma en Ia instancia de campo de texto alarma, indicando que la imagen cambiar en tres segundos. La siguiente acci6n manda a la instancia de clip de pelicula tndteador al forograma etiquetado encendido, donde una breve animacién actia como indicacién visual de que la imagen esté a punto de cambiar. 8) Con el panel Acciones abierto, seleccione el fotograma clave del fotograma 160 Y agregue el siguiente script: alarma.text = "La imagen canbiaré en 2 segundos."; Esta accién simplemente actualiza el mensaje en el campo de texto alarma, para indicar que la imagen cambiara en dos segundos. 9) Con el panel Acciones abierto, seleccione el fotograma clave del fotograma 180 ¥ agregue el siguiente script: alarma.text = "La imagen cambiaré en 1 segundo."; 51 USO DE CONTROLADORES DE EVENTOS52 es Esta acci6n simplemente actualiza el mensaje en el campo de texto alarma para indicar que la imagen cambiari en un segundo. 10) Con el panel Acciones abierto, seleccione el fotograma 200 y agregue el siguiente script: ‘Amagen.nextFrame(); ne alarma.text = gotoAndPlay (1) dmagen.nextFeame () 7 elerme.cext =": jgocoAndPiay (2)? Este conjunto de acciones constituye la base del funcionamiento de nuestra presentacién. Si consideramos como un ciclo al acto de desplegar una imagen y su texto asociado por 10 segundos, estas acciones se ejecutarin al final de cada ciclo. La primera acci6n hace avanzar la instancia del clip de pelfeula 4magen al siguiente fotograma en la linea de tiempo. Esto provoca que la siguiente imagen sea desplegada y la acci6n de fotograma en este fotograma sea disparada. Ademés, también se despliega el texto informativo de Ia imagen. La siguiente accién limpia el campo de texto alarma cuando la fase de alerta es completada, por Io menos por unos segundos. La Giltima accién devuelve Ia Iinea de tiempo al fotograma 1, la cual contintia reproduciéndose, y el proceso completo es repetido. Puesto que queremos dejar al usuario que controle la reproduccién de la presentacién, ése seri nuestro punto de atencién en los siguientes pasos.11) Con el panel Acciones abierto, seleccione el botén triangular del panel 4 de control para reproducir y agregue el siguiente script: on (release) { play()s } on (rollover) { D globo.text = “Reproductr"s } on (rotiout) { globo.text = ? Aqui puede ver que este botn responde a tres eventos: cuando es presionado y liberado, la linea principal de tiempo comienza a reproducirse (obviamente, s6lo si 4a presentaci6n se ha detenido antes); cuando se coloca el puntero sobre el bot6n, aparecerd la palabra Reproducir en el campo de texto globe (para indicar al usuario la funcién del bot6n), cuando el puntero deja de estar encima del botén, el campo de texto globo queda vacfo. 12) Con el panel Acciones ablerto, seleccione el botén cuadrado, el que sirve para detener la reproduccién, en el panel de control y agregue el siguiente script: fon (release) { stop()s } on (rollover) { globo.text = "Detener™; } on (rollout) { globo.text ="; } Este botén también esté configurado para responder a tres eventos: cuando el botén es presionado y liberado, la linea de tiempo se detendri (s6lo si se esté reproduciendo); cuando el puntero se sitia sobre el bot6n, la palabra Detener se despliega en el campo de texto globo (para indicar al usuario la funcién del botén), y cuando el ratén se sitda fucra del érea del botén, el campo de texto globo queda vacio. 53 USO DE CONTROLADORES DE EVENTOS13) Con el panel Acciones abierto, seleccione el bot6n de dos triéngulos, el de rebobinar, en panel de control y agregue el siguiente script: fon (release) { gotoAndPlay (1); Amagen.gotoAndStop (1); alarma.text = , on (rovover) { globo.text = "Rebobin y on (rott0ut) { globo.text = } Cuando este bot6n ¢s presionado y liberado, la linea principal de tiempo y la instancia de clip de pelicula imagen son enviadas al fotograma 1. Esto restaura la presentacién ‘asu estado original, sin importar el progreso que se tenga. La siguiente accién despliega la palabra Rebobinar en el campo de texto globe cuando el puntero se sitta sobre el bot6n (para indicar al usuario la funcién del bot6n). El evento rol Tout vacfa cel campo de texto globo cuando el puntero se quita del botén. 14) Seleccione Control > Probar Pelicula de la barra de mends para ver a pelicula en accién. ‘Vea la presentacién desde el inicio a fin para ver su funcionamiento. Use los botones para controlar la reproduccién. 15) Cierre el entorno de prueba para regresar al entorno de creacién. Guarde su trabajo como EventosFotograma2.fla. Ha terminado el ejercicio. Como podré ver, el uso apropiado de eventos de fotograma le permite crear presentaciones interactivas facilmente. USO DE EVENTOS DE CLIP Cuando una instancia de clip de pelfcula con acciones anexadas entra en escena, esa escena puede adquirir una apariencia y funciones nuevas a través del uso de eventos de clips. Esos eventos permiten que las acciones sean disparadas cuando tuna instancia entra o sale de una escena, cuando el puntero se mueva dentro de la misma y de varias otras maneras. ‘Accontinuaci6n, describiremos varios eventos de clip y los vincularemos con ejemplos de uso en el mundo real. Observe que s6lo puede usar los eventos de anexados a instancias de clips de pelicula.Presencia: onClipEvent (load) 4 Cuando alguien o algo entra a un cuarto 0 a un rea, puede desencadenarse toda una serie de efectos: el comportamiento de la gente puede cambiar, el entomo puede ser afectado de alguna manera, la persona (0 cosa) entrante puede cambiar dependiendo de lo que haya dentro, etcétera. Este controlador de evento provoca una respuesta similar, disparando un script cuando una instancia de clip de pelicula entra a escena; es dil para inicializar el clip de pelicula, para que sea afectado por elentorno al entrar 0 para que éste afecte al entomo al ingresar. ‘Ausencla: onClipEvent. (unLoad) Sila instancia de clip de pelicula puede afectar la escena cuando entra, también puede hacerlo al salir (algunas veces de forma inversa). Puede usar este controlador de evento para disparar un script cuando una instancia de clip de pelicula salga de escena, Potencia, energfa: onCl ipEvent (enterFrame) Generalmente, se surninistra energia continuamente a algo para que funcione de manera continua. Considere un reloj: sin energfa se quedarfa inmévil e intitil. Si se le provee de energia, comienza a hacer tictac, las manecillas comienzan a moverse y puede usarse para seguir el paso del tiempo. Este controlador de evento se emplea para disparar un script continuamente, al mismo paso que corra una pelicula. Si la velocidad de la pelicula es de 20 fotogramas por segundo, este controlador de evento dispara un script 20 veces por segundo. Existen muchas titiles aplicaciones para este controlador de evento, como lo aprenderé a lo largo de este libro. Movimiento: onClipEvent (mouseHove) Este evento es como un detector de movimiento dentro de su pelicula. Si una instancia de clip de pelicula est presente en la escena y tiene anexado este controlador de evento, es posible ejecutar un conjunto de acciones cada vez que el usuario mueva el rat6n (incluso un solo pixel). Esto le permite crear interactividad basada en el movimiento; por ejemplo, la capacidad de detectar la direccién del movimiento (derecha, izquierda, arriba y abajo), la posicién del puntero en ‘un momento dado y mis. Interaccién a través de ratén y teclado: onClipEvent (mouseDown), onC1 ipEvent (mouseUp), onClipEvent (keyDown), onClipEvent (keyUp) Dado que el ratén y el teclado estan diseflados para inceractuat con computadoras, estos eventos de clip no tienen una equivalencia con el mundo real. Sin embargo, Proveen un medio para ejecutar scripts con una tecla espectfica 0 cuando el botén del ratén es presionado (o liberado). A pesar de que esos eventos pueden sonar similares a los eventos de rat6n press, release, y keyPress descritos antes en esta leccién, éstos son un poco més versitiles. El uso de los eventos de clip keyUp y ‘eybown permite crear combinaciones de teclas, 0 métodos abreviados de teclado, en su aplicacién, de forma que una accién se leve a cabo cuando se oprima una secuencia de teclas. En contraste, el evento del ratén keyPress permite que s6lo 55 {USO DE CONTROLADORES DE EVENTOS56 ueceiOu 2 tuna tecla inicie una accién. Los eventos de clip mouseUp y mouseDown son diferentes a Jos eventos de rat6n press y release, porque mientras los iltimos disparan un script s6lo cuando el usuario interactia directamente con un bot6n, los eventos mousedown ¥y mouseUp disparan scripts cuando el botén del ratén se presiona o suelta en cualquier parte del escenario. Recepcién de instrucciones: onClipEvent (data) oo En la vida real, las instrucciones incompletas pueden causar problemas, y lo mismo sucede en Flash, Dado que Flash le permite cargar varios tipos de datos (variables, SWEs externos, JPGs) de fuentes externas dentro de las instancias de clips de pelicula, este controlador de evento juega un papel vital porque activa un script anexado a una instancia, sélo después de que los datos han sido completamente cargados de su fuente. Al hacer esto, este evento evita el tipo de errores que resultan de instrucciones incompletas. Puede usar este evento para reejecutar acciones (refrescar) si los datos son cargados dentro del clip mas de una vez. [x] LO Esta es una representaci6n de cémo se disparan los eventos de clips. La flecha hacia ‘abajo representa la accién de presionar et botén del ratén; (a flecha hacia arriba, Ia acci6n de soltarlo, El asterisco ilustra la ocurrencia del evento,En el siguiente ejercicio, crearemos un proyecto que simule a un ladrén siendo sorprendido en el acto. La presencia del ladrén (0 ausencia) determina c6mo se reproduce la escena; el ladrén mismo ser programado para responder al entorno de distineas formas usando los eventos de clip. 1) Abra EventosClip1.fla de la carpeta Leccion02/Recursos. Abra el inspector de propiedades. Este proyecto contiene una sola escena que incluye siete capas, cada una etiquetada de acuerdo con su contenido. Observe con cuidado los dos fotogramas con etiquetas: cletiquetado Timpto, representa la escena sin el ladrén, y el ctiquetado Tadron introduce al ladrén a la escena (mueva la cabeza de reproduccién entre esos dos ; 5 USO DE CONTROLADORES DE EVENTOSLeceiOn 2 fotogramas para tener idea de este concepto, puesto que serd critico para el éxito del nuestro proyecto). La imagen del ladrén es una instancia de clip de pelicula llamada ladron, y contendri la mayor parte de scripts que controlan la interactividad de esta pelicula (mis informacién al respecto un poco més adelante). La instancia de clip de pelicula ladron es el tinico elemento de la pelicula que aparece y desaparece cuando se navega entre los dos fotogramas etiquetados; todos los demés estén, presentes constantemente. Echémosles un vistazo. . En la parte superior derecha del escenario hay cuatro botones. El que muestra al ladrén cancetado con el signo internacional de No (el circulo rojo cruzado por tuna linea), seré configurado para mover la escena al fotograma limpio, eliminando asf al ladrén de la escena. Los otros tres botones, minimo, pequefio y normal, seri ‘usados para determinar el tamafio del ladr6n. Debajo de esos botones hay un cfrculo verde claro; es una instancia de clip de pelicula llamada crononetro. Programaremos al crononetre para girar cuando el adrén esté en escena, con el fin de dar la sensacién de que se da seguimiento al tiempo. Debajo de la instancia de clip de pelicula cronometro hay un campo de texto Hamado transcurrido. Aqui, inerementaremos un niimero mientras el ladrén esté presente, una vez més para dar la sensaci6n de que se le da seguimiento al tiempo. Debajo de este campo de texto hay dos campos de texto més, uno con una X aun lado, y el otro con una Y. Como programaremos al ladr6n para seguir el movimiento del puntero en el escenario, usaremos estos campo de texto, llamados posictonkRaton 'y posicionYRaton, respectivamente, para desplegar las coordenadas X y Y de la instancia de clip de pelicula Yadron segin cambie de posicién, Debajo de ese campo de texto se encuentra el iltimo campo de texto, mensaje, en cl cual se desplegard cl estado del entorno (“Todo sereno”, “jALERTAI”, etc). [Nuestra escena conticne s6lo dos elementos més, ambos instancias de clip de pelicula que necesitan ser examinados a fondo para comprenderlos. 2) Haga doble clic en el circulo de ta parte superior izquierda del area de trabajo, justo arriba del escenario, para editar este clip de pelicula en el lugar. Este clip de pelicula tiene una instancia llamada sirena. Con esta linea de tiempo visible, puede ver que consta de tres capas y dos etiquetas de forograma. En el fotograma etiquetado encendida hay un sonido de sirena en la linea de tiempo. ‘Cuando esta Iinea de tiempo es enviada a esa etiqueta de fotograma, el sonido se reproducird. Esto puede ser usado para simular una alarma que empieza a sonar. El otro fotograma con etiqueta en esta linea de tiempo, apagada, no contiene sonido; as{, cuando la Ifnea de tiempo es mandada a este fotograma, la alarma deja de sonar.3) Regrese a la linea de tiempo principal. En ta capa Luces, presione el bot6n Mostrar Capa (X roja) para revelar un gran cuadro negro que cubre el escenario por completo. Haga doble clic en este clip de pelicula para editarto en el lugar. Este clip tiene una instancia llamada luces y puede ver que esté compuesta por cuatro capas y cinco etiquetas de fotograma. Este clip de pelicula es usado para simular varios angulos de luz. en la pelicula. Iremos insertando scripts en nuestro proyecto para que cuando el ladrén se mueva a un 4rea en particular de la pantalla, 42 luz apropiada se prenda, Por ejemplo, si se mueve a la izquicrda, la luz izquierda se encenderd (fotograma etiquetado “izquierda”). En la capa Sonido, colocamos un sonido en cada uno de los forogramas con etiquetas para dar el efecto de audio de tun gran interruptor (simulando que se acciona para encender la luz). J Ahora que la introduccién esté completa, es tiempo de comencar a insertar scripts. ‘4) Regrese a la linea principal de tiempo. En la capa Luces, presione el botén Esconder Capa para esconder la gran drea negra que constituye a instancia de clip de pelicula luces. Con el panel Acciones abierto, seleccione el fotograma 1 de la capa Acciones y anexe el siguiente seri mensaje.text = "Todo sereno."; stop La primera accién coloca el texto “Todo sereno.” en el campo de texto mensaje al inicio de Ia reproduccién de la pelicula. Ademés, cada vez que la linea de tiempo sea devuelta a esta etiqueta de fotograma, esta accién se ejecutard nuevamente. Conociendo esto, podemos deducir que siempre que “Todo sereno.” aparezca en el campo de texto mensaje, la linea de tiempo estaré en el fotograma 1 y el ladrén se hallard ausente. La comprensién de esta funcionalidad resultaré muy importante mis adelante. La siguiente accién detiene la linea de tiempo para que no pase de este fotograma hasta que se lo indiquemos. 59 USO DE CONTROLADORES DE EVENTOS