UNIVERSIDAD AUTÓNOMA METROPOLITANA
UNIDAD IZTAPALAPA
DIVISIÓN DE CIENCIAS BÁSICAS E INGENIERÍA
CD ROM INTERACTIVO CON FLASH DEMACROMEDIA SOBRE EL LOBOMEXICANO, ENFOCADO A LOS
JUEGOS CON PROGRAMACIÓN AC
T E S I SQUE PARA OBTENER EL TITULO DE :
LICENCIADO EN SISTEMAS COMPUTACIONALES
P R E S E N T A :
M A R I O B L A N C A R T E A Y A L A
DIRECTOR DE TESIS: MAESTRO LUIS MARTÍN ROJAS CÁRDENAS
MEXICO, D.F. 2004
1
Agradecimientos
Me gustaría empezar escribiendo que uno nunca acaba de decir lo quequiere expresar en su totalidad, en mi caso quiero comentar que tengo muchopor decir y agradecer y que por ende nunca acabaría, pero agradeceré lo másbreve posible.
Empezaré dando gracias a Dios Padre e Hijo, que independientemente delo que crea o no crea, todos estamos encaminados hacia un lugar, aunque seaimportante ese lugar también sé que lo es como vivas ese camino, gracias por sertan trascendentales en mi vida.
Mí familia, mis padres gracias a su amor incondicional, comprensión,cariño, paciencia y ayuda en todos los aspectos, logramos conseguir una metamás de mi vida. Mis hermanos Bety y Fabricio que son un apoyo increíble en mivida, con ellos e aprendido a disfrutar más las cosas de la vida.
Mis familiares como mi abuelitos Mary y Melesio, tíos Jesús, José, Cuca,Juan, Héctor y Vicky así como todos los primos.
A mi amigo Jorge Torner Castillo, gracias por ser tú y darme tu apoyoincondicional cuando más lo necesite, haz sido y serás muy importante en mivida.
A mis amistades muy apegadas de ayer que me han ayudado a ser comosoy, a mis amigos de infancia de los condominios y de escuelas en especial aRadfort Moreno, Abraham, Alejandro, Luis Mario, Steve, Alonso, Gerardo,Violeta, las gemelas Magali y Meliza, Gabriela, Mariana y otros; a mis amigos deadolescencia a Alam Aguilar Platas y su mamá, Eduardo García de la Teja, RubénRodríguez, Fedra, Angélica, Marcela Millán Luna, Elizabeth y otros; a todos miscompañeros y maestros de la Salle en especial a Nallely Cobarrubias y Claudia; yen el Colegio México a todas las amistades que logré tener en especial al maestroLongoria que Dios lo tenga en su gloria, a todos ellos muchas gracias, siempretendré esas experiencias en mi mente.
Gracias a Hazel Guerrero por darme unas gratas vivencias y el de tener laoportunidad de seguirte conociendo.
A mis compañeros de la Alberca Olímpica, sus esfuerzos y esmeros porlograr metas me motivo mucho para seguir adelante.
A Rosario Vargas Morales y padres un agradecimiento enorme, Rosariogracias por dejarme conocerte, me enseñaste que la vida no es sólo conseguirmetas, que sí existe la felicidad y tristeza en ella, gracias por todos esosmomentos grandiosos, gracias por haber sido una persona esencial en mi vida.
2
Al grupo de Contra Marea en especial a Sagrario, Cuahutemóc y Berenicegracias por dejar entrar en sus vidas, a los organizadores porque gracias a suesfuerzo he aprendido y vuelto a recordar los valores que nos engrandecen comohumanos y sobre todo a formar más mi carácter.
Mis amistades de la Universidad Autónoma Metropolitana empezando porBety Carrasco una chica excepcional, Lisset, Marissa, Melina, Osvaldo un granamigo, Juan Manuel, Karla, Claudia Hernández, Liliana, Alejandra, Vicky contigoaprendí y pase muchos momentos grandiosos, al gran grupo de amigos de SuperComputo los que están aun y estuvieron en él, muchas gracias y los otroscompañeros a todos ellos un agradecimiento enorme porque me han enseñado aver otros tipos de vida y de ideas, y que en la vida nunca hay que claudicar pormuy difícil que sea.
Un especial agradecimiento al Dr. Miguel Ángel Armella perteneciente a laDivisión de Ciencias Biológicas quien me dio pauta y la ayuda para la terminaciónde mi proyecto.
Al equipo desarrollador de alumnos muchas gracias por dejarme ser partede este bonito proyecto.
Sobre todo a mi asesor el profesor Luis Martín Rojas Cárdenas una personacon un gran carisma que creyó en mí y me dio la confianza y el entusiasmo derealizar este proyecto, muchas gracias.
si el pasado es quien no soy y el presente es quien no fui dime simañana soy el pretexto del que hoy conocí que un día ha de ser lasombra del que por miedo nunca fui... más he tirado el miedo, veoen quien me convertí... por fin!
PABLO NERUDA
3
ÍndicePágina
INTRODUCCION 4
CAPÍTULO I
1.1 Objetivo general 51.2 Descripción del CD-ROM Interactivo en Flash 61.3 Estructuración de la sección ¡Juegos! 7
CAPÍTULO II
2.1 Metodología 82.2 Porque usar Flash y programación en Actionscript 8 2.2.1 ¿Qué es Macromedia Flash? 8 2.2.2 Animaciones con Streaming (flujo continuo de datos) 9 2.2.3 Gráficos basados en vectores 9 2.2.4 Películas interactivas y multimedios 10 2.2.5 El reproductor Macromedia Flash Player 11 2.2.6 Formatos de archivo de Flash 11 2.2.7 Requisitos del sistema para la creación de Flash 12 2.2.8 Requisitos del sistema para Flash Player 12 2.2.9 Guía de los medios de aprendizaje 12
CAPÍTULO III
3.1 Introducción a la sección de ¡Juegos! 143.2 Desarrollo 15
3.2.1 Juego de memoria 15 3.2.2 Juego de Lupus 37 3.2.3 Juego de números 67 3.2.4 Index 82
ACTIONSCRIPT I. Referencia 99 II. Terminología 100 III. Diccionario 103
WEB-GRAFÍA 130BIBLIOGRAFÍA 130
4
INTRODUCCIÓN
El proyecto Lobo Mexicano UAM-I es un esfuerzo de la UniversidadAutónoma Metropolitana Iztapalapa por colaborar con el gobierno federal ydiferentes agencias que tienen bajo su responsabilidad el programa para larecuperación del lobo mexicano, que es un programa binacional México-U.S.A.para regresar al lobo mexicano a su hábitat natural. El programa binacionalactualmente cuenta con el apoyo de más de 15 instituciones, principalmentezoológicos que se dedican a la cría de esta especie.
El proyecto Lobo Mexicano UAMI que esta cargo del Dr. Miguel ÁngelArmella junto con el departamento de Biología perteneciente a la División deCiencias Biológicas pretende dar información horizontal, esto es comparandodiferentes ejemplares de lobo que viven actualmente en México sobre suconducta y fisiología reproductiva, sin embargo, partiendo del principio de queno es posible lograr nada si no educamos a las personas hemos decidido iniciar unprograma de educación dirigido a niños de escuelas primarias con el fin de quepuedan conocer mas la vida de los lobos.
En conjunto con el Dr. Luis Martín Rojas Cárdenas y del Laboratorio deTécnicas y Aplicaciones para la Multimedia Distribuida de la División de CienciasBásicas e Ingeniería a decidido apoyar esta idea desarrollando dos esquemas deeste proyecto en CD-ROMs interactivos uno utilizando una aplicación comercialllamada Macromedia Flash con programación ActionScript que es el estándarprofesional para la creación de animaciones profesionales a nivel mundial paraeventos, presentaciones, exposiciones etc. usándose en proyectores,computadoras de escritorio así como también en la web, y otro CD-ROMinteractivo desarrollándose bajo el lenguaje de programación en Java.
Nos basaremos en el CD-ROM interactivo utilizando Macromedia Flash conprogramación ActionScript, esto con el fin de atraer más la atención, no sólo alos niños sino a la gente en general y el poder fomentar el conocimiento sobreesta especie en extinción el lobo gris mexicano, aprovechando las técnicasactuales de la multimedia capacidades basadas en imágenes, audio, animación yvídeo.
5
CAPÍTULO I
1.1 Objetivo General
Es la de presentar un proyecto en un CD-ROM interactivo animadoaprovechando las grandes ventajas que nos ofrece el programa de diseñoMacromedia Flash con el afán de poder ayudar en la cultura y enseñanza denuestro país en el conocimiento del lobo mexicano, este CD-ROM interactivo estaorientado en la educación hacia los niños de entre seis y ocho años de edad conel motivo de que haya una conciencia ecologista temprana sobre los animales ysu hábitat en este caso el lobo gris mexicano.
El CD-ROM interactivo consta de cinco partes: Acerca de, vídeos, ¿Quécomen los lobos?, ¿Cómo es la anatomía? y ¡Juegos! nos enfocaremos sólo a estaúltima parte, usando el lenguaje de programación que usa Macromedia Flash elActionScript.
Las ventajas son más notorias y aprovechables al usar el lenguaje deprogramación que tiene el programa de diseño digital de Macromedia Flash elActionScript ya que su uso central está en la interactividad en los efectos, lasediciones etc. sobre las imágenes, el sonidos, las animaciones y el vídeo,muchísimas aplicaciones en proyecciones y en la red, es un lenguaje basado enscripts que permite compartir con otros lenguajes basados en scripts como eljavascript entre otros, otra ventaja más son los archivos ejecutables que lograntener menor peso en memoria con el fin de tener una rápida ejecución.
Más adelante hablaremos del aprovechamiento de estos recursos en cuantoal uso del programa de Macromedia Flash y de su lenguaje el ActionScript engeneral y sobre la parte a realizar llamada ¡Juegos!
6
1.2 Descripción del CD-ROM Interactivo en Flash
El proyecto se desarrollo en la plataforma de Windows, El CD-ROMinteractivo muestra un archivo final con extensión ejecutable para aplicacionesde escritorio (.EXE) para tener una mayor facilidad a la hora de proyectarlo enuna computadora de escritorio o móvil comúnmente con plataforma Windows,más adelante hablaremos de los modos y las ventajas que tiene Flash en laexportación y publicación de sus archivos.
Al ejecutarse el CD-ROM interactivo muestra una introducción llamativallegando a una sección a la que llamaremos como la principal o menú inicial, enesta sección a su vez esta dividida en cinco partes:
• Acerca de• Videos• ¿Qué comen los lobos?• ¿Cómo es la anatomía?• ¡Juegos!
Cada una de estas partes está animada, empleando imágenes conextensiones (.JPEG y .GIF), gráficos vectoriales y rasterizados o de mapa de bits,también podemos encontrar animación en video, encontramos el uso de sonido ymúsica con formato o extensión (.MP3 y .WAV), más adelante hablaremos más deestos aspectos.
Es un proyecto hecho en equipo por tres integrantes, mi parte sólo incluyeparte del diseño de la sección ¿Cómo es la anatomía? y toda la sección de¡Juegos! la estructura, diseño y concepto. Nos enfocaremos sólo en la sección
de ¡Juegos! puesto que me interesa más explicar el uso de la programación enActionScript y el desarrollo del mismo.
Esta sección educativa en particular es con el motivo de hacer el CD-ROMinteractivo más atractivo y llamativo mostrando cierto interés particular sobrelos lobos mexicanos en los niños, como también el fomentar sus conocimientos,agilidad y destreza mental.
7
1.3 Estructuración de la sección ¡Juegos!
La estructura de la sección de ¡Juegos! está comprendida de la siguientemanera en la figura 1.
Nivel 1 Nivel 2 Nivel 3
Figura 1
Dentro de ¡Juegos! empieza con una sección principal a la que llamaremosInicio o Index que comprende el Nivel 1, en esta parte nos muestra
animaciones a detalle de las tres partes que está comprendida, una secciónllamada memoria y dos secciones más llamadas Lupus y cuadritos denúmeros comprendidas en Nivel 2, cada una de estas dos últimas, tienen dossecciones internas más, llamadas sección 1 y sección 2 en Nivel 3. En elcapitulo III hablaremos más profundamente del desarrollo de toda la estructuraque comprende la sección de ¡Juegos!
Cabe mencionar que la sección principal inicio tiene una opción comobotón de regresar a la parte o sección principal o menú inicial del CD-ROMinteractivo, así como cada sección interna de inicio tiene en todo momento unbotón de regreso a la sección principal inicio de ¡Juegos!
8
CAPÍTULO II
2.1 Metodología
Al tener un marco teórico de los conceptos y una estructuración a obteneren cuestión de diseño, animación digital e interactividad vimos que la solución adesarrollarse para obtener dicho proyecto fue la de realizarlo con el programa deMacromedia Flash, ya que nos da todas las herramientas exigidas para dichodesarrollo. Esas herramientas y ventajas de su uso están expuestas acontinuación.
2.2 ¿Por qué usar Macromedia Flash y programaciónActionScript?
Para entender el porque del uso de este software expondremos variospuntos donde nos darán la respuesta.
2.2.1 ¿Qué es Macromedia Flash?
Macromedia Flash es la solución profesional para producir experiencias deinteractividad de alto impacto. Con Flash podemos crear aplicaciones deescritorio y sitios de Web interactivos basados en vectores. La Interfaz de usuariode Macromedia es familiar y permite crear fácilmente gráficos impactantes yproducir rápidamente animaciones complejas, controles de navegación e inclusositios de Web totalmente multimedios.
Podemos utilizar Macromedia Flash para crear aplicaciones avanzadas parala interactividad aprovechando sus características de codificación, formularios yconectividad del lado del servidor. Flash le permita a los diseñadores ydesarrolladores integrar video, texto, audio y gráficos en experiencias eficacespara presentaciones interactivas, aprendizaje electrónico.
Demos un vistazo a algunas de las características más importantes deFlash: su capacidad de streaming (flujo continuo de datos), uso de gráficosbasados en vectores y sus posibilidades interactivas y multimedios.
9
2.2.2 Animaciones con Streaming (flujo continuo de datos)
El reproductor Macromedia Flash Player permite descargar las películas deFlash utilizando un proceso de "streaming", es decir, con un flujo continuo dedatos. Esto significa que la animación empieza a reproducirse en la pantalla delusuario antes de descargarse totalmente. Si creamos correctamente nuestraspelículas de Flash, los visitantes de nuestro sitio podrán empezar a verlas encuestión de segundos, sin tener que esperar a que se descarguencompletamente. Esto les permitirá observar parte de la imagen de manerainmediata, evitando que perdamos el interés del visitante y que navegue haciaotro sitio, es una ventaja más que nos ofrece el programa solamente sí se llegaráa exponer el trabajo en web.
2.2.3 Gráficos basados en vectores
Flash es compatible con dos tipos de formatos de imagen (de vectores yrasterizadas). Los gráficos de vectores se crean con líneas y curvas y condescripciones de sus propiedades. Comandos dentro del gráfico vectorial leordenan a la computadora la manera de presentar las líneas y formas, los coloresa usar, el ancho de las líneas, etc.
Las imágenes rasterizadas, también llamadas imágenes de mapa de bits(bitmaps en inglés), están creadas con píxeles. Cuando creamos una imagenrasterizada, estamos definiendo la posición y color de cada píxel y el mapa debits resultante es lo que vemos en la pantalla.
El término "mapa de bits" se utiliza comúnmente para referirse a losgráficos rasterizados. Adicionalmente, es el nombre para un tipo de imagen demapa de bits, el formato Windows Bitmap (BMP).
Los gráficos vectoriales ofrecen beneficios importantes su tamaño dearchivo es pequeño y pueden escalarse maravillosamente. Sin embargo, tambiénpresentan algunas limitaciones (los gráficos vectoriales muy complejos puedentener tamaños de archivo muy grandes, y los vectores no son muy útiles cuandose trata de producir arte con calidad fotográfica).
Con Flash, podemos utilizar las herramientas de dibujo para producir todosnuestros gráficos vectoriales, pero también podemos importar arte vectorial deotras aplicaciones. Flash puede utilizar los formatos de vectores de MacromediaFreeHand (desde la versión 7), Adobe Illustrator (EPS,AI), AutoCAD DXF (DXF),Enhanced Metafile (EMF), Windows Metafile (WMF) y Flash Player (SWF, SPL). Apesar de que Flash es una herramienta basada en vectores, también nos permiteusar imágenes de mapa de bits.
10
A diferencia de los gráficos vectoriales, las imágenes de mapa de bits noson muy escalables.
Las imágenes de mapa de bits simples normalmente tienen un tamaño dearchivo más grande que los gráficos vectoriales simples, pero las imágenes demapa de bits complejas (por ejemplo fotografías) son comúnmente más pequeñasque los gráficos vectoriales comparables. Flash puede usar los formatos de mapade bits Bitmap (BMP), imagen GIF, JPEG, PNG, Macintosh PICT, MacPaint (PNT) yTIFF.
Una de las ventajas de emplear gráficos vectoriales en lugar de mapas debits es que podemos escalar fácilmente los gráficos vectoriales sin distorsionar laimagen. Cuando escalamos una imagen de mapa de bits, tenemos como resultadoel famoso pixelado , lo cual no sucede en el gráfico vectorial que continúamanteniendo sus contornos suaves, un gráfico vectorial escalado conserva suscontornos suaves, pero una imagen de mapa de bits no.
2.2.4 Películas interactivas y multimedios
Podemos crear películas de Macromedia Flash con un alto grado deinteractividad si utilizamos programación ActionScript, una serie de acciones oinstrucciones que el reproductor Flash Player entiende y lleva a cabo.ActionScript nos permite añadir elementos interactivos que ocurrirán al presionarun botón o al tocar una tecla. También nos permite establecer el momento enque deben ocurrir las acciones por ejemplo, al mover el ratón a través de lapelícula o a medida que se reciben los datos. ActionScript tiene muchasfunciones y convenciones de sintaxis que lo hacen similar en lo fundamental allenguaje de programación JavaScript.
Podemos usar ActionScript para programar funciones y hacer cálculos enuna película de Flash para obtener un alto grado de flexibilidad e interactividad.Podemos configurar muchas acciones sin necesitar de una gran experiencia enprogramación, y si bien algunas acciones requerirán de cierta familiaridad con loslenguajes de programación, éstas están orientadas al desarrollo avanzado.
La Asociación de Fabricantes de PCs Europea (ECMA, European ComputersManufacturers Association) publicó un documento llamado ECMA-262 que sederiva de JavaScript y que sirve como el estándar internacional para el lenguajeJavaScript. ActionScript está basado en la especificación ECMA-262 que seencuentra disponible en http://www.ecma.ch. Netscape DevEdge Online tieneun centro de desarrollo de JavaScript (JavaScript Developer Centralhttp://developer.netscape.com/tech/javascript/index.html) que contienedocumentación y artículos útiles para comprender ActionScript.
El recurso más valioso es el manual Core JavaScript Guide que seencuentra en la dirección:
11
http://developer.netscape.com/docs/manuals/js/core/jsguide/index.htm.
¡Pero Flash no se limita a la creación de animaciones! Las películas deFlash pueden ser multimedios. Podemos importar archivos de sonido paraañadirles efectos de sonido y música. Flash puede importar una variedad dearchivos de sonido, como WAV, MP3, AIFF y Sun AU. En Flash, podemos repetirlos sonidos de manera continua (ciclos), reproducirlos independientemente delTimeline (Línea de tiempo) principal, hacer que aparezcan o desaparezcangradualmente (fade in y fade out), entre otras posibilidades. También podemossincronizar nuestra animación con una pista de sonido.
2.2.5 El reproductor Macromedia Flash Player
El contenido de Flash requiere de un reproductor para poder servisualizado y más que nada en la Web. El reproductor Macromedia Flash Playergoza de una distribución muy amplia ya que se incluye con las versiones másrecientes de los navegadores y sistemas operativos. Este reproductor es ademásun archivo muy pequeño que podemos descargar fácil y rápidamente del sitio deWeb de Macromedia.
Si queremos visualizar nuestros archivos en una computadora de escritorio,no necesitaremos del reproductor Flash Player. En este caso, lo único quedebemos hacer es convertir nuestra película de Flash en un proyector. Elproyector es una versión ejecutable de la película. Macromedia Flash incluye laversión independiente del Flash Player para que los desarrolladores puedanprevisualizar sus películas sin tener que usar un navegador de Web o crearproyectores de sus películas.
2.2.6 Formatos de archivo de Flash
Cuando nos encontremos desarrollando nuestras animaciones de Flash parala Web o para computadoras de escritorio, estaremos creándolas dentro delentorno de autoría de Macromedia FlashI. En este punto, el archivo será unarchivo FLA que podrá visualizarse solamente dentro de Flash. Una vez queestemos listos podemos reproducirlo con el Flash Player ó publicar nuestrapelícula como una plantilla Macromedia Generator Template (SWT), HTML,imagen GIF, JPEG, PNG, Windows Projector, Macintosh Projector, películaQuickTime o Real Player. Sin embargo, algunos de estos formatos, como losformatos de imágenes de mapa de bits, no conservan las capacidades interactivas
I Macromedia® FLASH Copyright © 2000 Macromedia, Inc. Quedan reservados todos los derechos.No se permite la copia, fotocopia, reproducción, traducción o conversión mediante ningún medioelectrónico o mecánico, ya sea de forma total o parcial, sin la previa autorización por escrito deMacromedia, Inc.
12
y multimedios de la película de Flash (no hay sonido, los botones no trabajan, losclips de película no se reproducen apropiadamente).
2.2.7 Requisitos del sistema para la creación de Flash
Para la instalación del programa se requiere que su equipo tenga:
Para Microsoft Windows : Un procesador Intel Pentium® 133 Mhz o equivalente(se recomienda 200Mhz) con Windows 95 o posterior (incluyendo Windows 2000)o NT versión 4.0 o posterior; 32 MB de RAM (se recomiendan 64 MB); 40 MB deespacio en disco disponibles; un monitor a color con una resolución de 800 por600 y una unidad de CD-ROM.
Para Macintosh ®: Un Power Macintosh (se recomienda G3 o superior) conSystem 8.5 o posterior; 32 MB de RAM de memoria de aplicaciones libre, ademásde 40 MB de espacio en disco disponible; un monitor a color con una resoluciónde 800 por 600 y una unidad de CD-ROM.
2.2.8 Requisitos del sistema para Flash Player
Para reproducir películas con Flash Player en un navegador se requiere elsiguiente equipo y software:
Microsoft Windows 95, NT 4.0 o posterior; o un PowerPC con System 8.1 oposterior. El módulo adicional de Netscape que funciona con Netscape 3 o posterior
(Windows 95 y Macintosh). Si se ejecutan los controles de ActiveX, es necesario Microsoft Internet Explorer
3.02 o posterior (Windows 95). Si se ejecuta la edición Java de Flash Player es necesario un navegador
habilitado para Java.
2.2.9 Guía de los medios de aprendizaje
La Utilización de Flash contiene instrucciones e información para el uso detodas las herramientas y comandos de Flash. Se suministra como Ayuda en línea ycomo manual impreso. La Ayuda en línea contiene diversas películas de FlashPlayer que muestran sus efectos y funciones.
El Guía de consulta de ActionScript contiene instrucciones e informaciónacerca de ActionScript, incluyendo la programación de ActionScript, la creaciónde interactividad con ActionScript y un completo diccionario de ActionScript. Sesuministra como Ayuda en línea y como manual impreso. La ayuda dentro del
13
programa de Flash contiene tres sistemas de ayuda: Utilización de Flash, Guía deConsulta de ActionScript y Diccionario de ActionScript.
Para obtener los mejores resultados del uso de la Ayuda en línea de Flash,Macromedia recomienda encarecidamente la utilización de Netscape Navigator4.0 o posterior o Microsoft Internet Explorer 4.0 o posterior en Windows, yNetscape Navigator 4.0 o posterior en Macintosh. Si se utiliza el navegador 3.0,puede accederse a todo el contenido de las películas y a la Ayuda de Flash, peroalgunas funciones (como la de búsqueda) no funcionan. Para ejecutar Flash y laAyuda de Flash al mismo tiempo en Macintosh pueden ser necesarios hasta 32 MBde memoria, según los requisitos de memoria del navegador.
Ahora bien, se puede consultar también directamente por web, encualquier buscador se podrá encontrar el uso y empleo de esta herramienta en sutotalidad.
La repetición es uno de los fundamentos de la claridad
Dale Carnegie
14
CAPÍTULO III
3.1 Introducción a la sección de ¡Juegos!
En este capitulo hablaremos de toda la creación, conceptualización,diseño, programación e interactividad de la sección de ¡Juegos!
Esta sección comprende ocho partes realmente: la sección principalllamada Inicio del nivel 1, las tres del nivel 2 Lupus, memoria y cuadritos denúmeros así como las del nivel 3 sección 1 y sección 2.
Inicialmente se hablo de la construcción de la sección de juegos en dondese contemplaron tres juegos interactivos cada uno diferente, se hablo que losjuegos deberían estar orientados hacia el lobo gris mexicano, hacerlos educativosy sobre todo entretenidos.
Se esbozo el proyecto en papel primero de cómo debería ir cada juegodentro del CD-ROM interactivo puesto que solo faltaba esta sección. Esto tieneaspectos importantes puesto que el formato de exportación ya se tenía hecho,esta sección se tenía que basar en ese formato así como el tamaño de lasimágenes de escritorio a tratar y las características de diseño tanto del ambientecomo de los personajes que se contemplaron desde el inicio del proyecto.
El trabajo se estructuró genéricamente como se ve en la figura 2:
Secciones principales
Figura 2
15
Donde la sección principal de ¡Juegos! Puede ir a juego 1, juego 2 y juego3, y viceversa cada juego tiene la opción de regresar a la sección principal¡Juegos!
Cabe mencionar que primero se diseño la estructura interna de cadasección de ¡Juegos!, se realizaron las ideas y conceptos de los juegos que son laparte esencial y tardada del interactivo dejando al final el diseño de la secciónprincipal.
3.2 Desarrollo
3.2.1 Juego de memoria
El concepto de este juego de memoria ya se tenía pero se contemplogracias al hacer una prueba con varios chicos de entre seis y ocho años de edad,se idealizaron cuatro opciones para que fuese un buen juego y que fuesen juegosde mesa, las opciones son:
• ¿Qué juegos de mesa te gusta más jugar o conoces?• ¿Qué juegos de mesa conoces con muchos colores, formas y figuras?• ¿Qué juegos de mesa conoces que no duren mucho tiempo?• ¿Qué juegos de mesa conoces que te sorprendan de repente al jugarlo?
Se llego a un acierto en su mayoría de este juego elegido por los niñosdando pauta a la realización en sí de la idea ya que es un juego muy atrayente ysobre todo que fomenta los conocimientos, agilidad y destreza mental.
Después el juego de memoria se sugirió en la propuesta y se quedo. Estejuego de mesa comienza con una cantidad de barajas de figuras volteadas y serevuelven, es para varios jugadores dependiendo del número de barajas por loregular son para dos a ocho jugadores, el jugador tiene que voltear una carta ydespués otra si la segunda volteada coincide con la primera las retirasacumulando un par o ciertos puntos y sigue jugando retirando otro par, si nocoinciden se voltean nuevamente dejándolas en el mismo lugar y se cambia elturno a otro jugador que puede escoger las cartas que volteo el jugador anterioru otras, la idea es hacer pares y retirarlas para acumular puntos, gana quientenga más pares o puntos al acabarse todas las barajas que están revueltas.
Para empezar el juego dentro del programa de Flash lo que primero sehizo es configurar el tamaño de la hoja de escritorio o escenario a usar figura 3,como se había mencionado antes ya se tenia esto de las secciones principales.
16
Espacio para los fotogramas
Barra de menús Línea de tiempo
Panel de herramienta de dibujo
Escenario
Figura 3
Esto es con el motivo a que el trabajo da mayor calidad a la presentación yno se pierda calidad en cuanto a proporciones de imágenes, animaciones y vídeo.Se trabajo con una dimensión de 1024 píxeles de ancho por 768 píxeles de altoque es la resolución optima para monitores de 17 pulgadas.
NOTA: Solo hay que tomar en cuenta las dimensiones, los datos extras deesta figura 3 quedan al estudio del lector, así como lo sugerido más adelante.
Cabe mencionar que cada juego tendrá una introducción antes de empezara jugar y unos una parte final que muestra los resultados.
Se comenzó con el diseño y la estructura general así que el diseño inicialde este juego es la figura 4:
17
Figura 4
En esta imagen de la figura 4 es el ejecutable con extensión .SWF llamadomemoria0.SWF que nos muestra el programa de Flash, podemos ver ya el diseñocon algunas imágenes de las barajas ya tratadas, podemos ver una explicaciónsencilla del juego en la parte central, se aprecia algunos diseños de las seccionesanteriores como las huellas del lobo, un contador para ver en cuanto tiempo setermino el juego y dos botones, uno que es para empezar el juego y otro pararegresar.
Se hace referir que el botón de regresar nos lleva a la sección de Index unasección aun no realizada.
Ambos botones están animados y programados como se muestra acontinuación. El botón de juego realiza los siguientes cambios como se muestraen la siguiente figura 5:
Figura 5
18
En esta figura 5 se muestra una ventana llamada línea de tiempo(Timeline) en donde en modo de opción de configuración de botón podemos vercuatro estados; reposo (up), sobre (over), presionando (down) y zona activa(hit).
En el primer estado up se aprecian dos capas (layer) en ellos podemostrabajar diseñando cualquier imagen, en este caso tenemos la siguiente figura 6y figura 7:
Figura 6 Figura 7
En la figura 6 el layer 1 muestra solo la palabra jugar mientras que ellayer 2 muestra el círculo negro, esta figura en estado up siempre apareceráhasta que el puntero del ratón toque el circulo negro que es cuando cambiará alestado siguiente over, como se aprecia en la figura 7 cambio, el layer 2 se leagrego un circulo blanco y el layer 1 se agrando la palabra, se le puso un signo deadmiración y se le cambio de color.
El siguiente estado down no fue necesario y el último estado zona activasiempre es importante usarlo pues nos dará la parte que queremos que haga loscambios el puntero sobre la figura que queramos.
Ahora el diseño del botón de regresar figura 8, figura 9, figura 10 y figura11 es un poco diferente pues es un botón animado.
19
Figura 10 Figura 11
Figura 8 Figura 9
Se puede apreciar el modo que siempre se verá en la figura 8 en esemismo layer esta diseñado tanto la palabra en texto como la huella en imagen,en el modo over figura 9 cambia la estructura la palabra cambio de color y lahuella ya no es imagen es un objeto animado llamado movie clip o clip depelícula, se puede apreciar en la figura 10 que el movie clip es independiente dela configuración del botón, se puede ver tres tipos de estado en el layer 1, labarra en azul mostrando tres puntos negros, el primer punto es el tamañooriginal de la huella, en el segundo punto figura 11 la huella cambio de tamañose redujo y en el tercer punto retorna a su tamaño original, así que cuando secorra el movie clip aparecerá una animación que se hace pequeña y vuelve a suestado inicial cuando el ratón pase por encima de la imagen, en el siguienteestado no hace cambio alguno y el último estado ya se explicó anteriormente.
Esto es sólo el diseño a continuación mostraremos la programación de losbotones.
Para la programación se utiliza una ventana llamada acciones o actions enella podemos trabajar de dos maneras en modo experto o modo normal, ladiferencia es que en modo normal nos ofrece una ayuda más sobre los comandosa usar, como se ve en la programación del botón de jugar en la figura 12 y figura13 respectivamente:
20
Figura 12 modo experto Figura 13 modo normal
Se puede notar que al seleccionar un comando en modo normal en estecaso la función 1 se abre una lista de opciones del ratón, en este caso de ayudanos muestra una cantidad de opciones que se sugiere a esta función, sólo estapalomeado cuando se presione (press), se pueden agregar más opciones ocambiar esa es la ventaja en este modo y en el modo experto, al usuario lo dejanescribir sin estar escogiendo las opciones. El código se inserta en esta ventana aldar click en la figura o imagen de jugar que esta en el escenario.
Lo que nos dice el código es lo siguiente:
on (press) { loadMovieNum("memoria1.swf", 0);
}
Nos dice que cuando se presione o da click con el puntero en la imagen ofigura, se cargará una nueva película o movie con el nombre "memoria1.swf queestá en el nivel 0 que corresponde al orden en que fueron cargadas las películas.
21
La programación del botón de regresar figura 14 es similar a la figuraanterior:
Figura 14
Téngase muy en cuenta que esta programación aun no se realiza pues sedejo al final la película o movie index_juegos.swf que en realidad es la seccióninicial llamada ¡Juegos! y también que en cada película tiene el botón deregresar por lo que no se mostrará más como la ventana de acciones, se mostraráel código de la programación de actionscript directamente en texto.
Pasemos al juego en sí, como se había mencionado antes, el juego se tieneque basar en las secciones principales del menú inicial, así que las imágenes delas barajas se basaron en todas ellas siendo las siguientes:
22
En total son 36 barajas dando así 18 dibujos diferentes para poder realizarel juego en un cuadro central, en donde irán desapareciendo las cartas alrealizar los pares. Estas imágenes se guardan en una ventana llamada librería, enella se va guardando todas las imágenes, sonidos, clips de película y botones quese utilizarán en el archivo final de este juego, figura 15:
Figura 15
En esta figura 15 podemos apreciar una parte del contenido del archivo deeste juego, vemos símbolos como botones, clips de películas, sonidos y fólderes.
23
La ventaja de utilizar programación actionscript es que se reducen losframes o fotogramas donde en cada uno de estos podemos crear cualquier figurao diseño dentro de la línea de tiempo y así tener un menor peso en memoria alfinal de importar el archivo como se mencionó en el capitulo II y lo podemos veren la figura 16:
Figura 16
Podemos observar que en esta figura 16 consta de muchos layers o capaspero sólo de dos columnas de fotogramas o frames como se ve en la línea detiempo, vemos que en la primera columna de fotogramas el diseño general de laescena es como se ve en la figura 16 pero no se ven las imágenes de las barajasvolteadas, eso es porque están guardadas en la librería y se ponenautomáticamente con la programación dentro del recuadro central en orden, esaprogramación esta contenida en la capa nombrada como layer 1, el fotograma deesta capa muestra una letra especificando que contiene programaciónactionscript, a su vez se ve un contador que comienza en ceros su programaciónse encuentra en la capa llamada contador, también hay una capa llamada textoen ella muestra una animación de letras y se encuentra arriba del contador con
24
la palabra Juego de memoria y una animación de huellas pequeñas que apareceny desaparecen moviéndose alrededor del contador contenidas en la capahuellas_marco y hay un sonido en modo loop o bucle que se genera al comenzarel juego.
La programación de la capa layer 1 y su explicación están documentados de lasiguiente manera:
//función a emplearinitGame();
//este stop para la línea de tiempo en el fotograma 1, para que solo lo haga avanzar la condición//del contador que se menciona más abajostop();
//crea un nuevo sonido llamado s3 que son aplausos y que esta contenido en la librerías = new Sound();s.attachSound("s3");s.start();
// variable "z" usada para detener el contadorz=0;
function initGame() {
// crea una lista de cartas que serán barajeadas cardsListOrdered = []; for (i=1; i<=18; i++) { cardsListOrdered.push(i, i); }
// barajea la lista de cartas cardsListSorted = []; while (cardsListOrdered.length>0) { r = int(Math.random()*cardsListOrdered.length); cardsListSorted.push(cardsListOrdered[r]); cardsListOrdered.splice(r, 1); }
// crea las cartas y les asigna los dibujos x = 0; y = 0; for (i=0; i<36; i++) { attachMovie("Card", "Card"+i, i); _root["Card"+i].picture = cardsListSorted[i];
//da las posicion en coordenadas de las cartas_root["Card"+i]._x = x*60+290;
_root["Card"+i]._y = y*60+200;// mueve la siguiente carta
x++;
25
if (x>5) { x = 0; y++; } } firstclip = 0; }
function clickCard(clip) {
// ve si dos cartas son iguales if (secondclip != 0) {
// vuelve a tapar ambas cartas firstclip.gotoAndStop(1); secondclip.gotoAndStop(1); firstClip = 0; secondClip = 0; }
// se voltea la primera carta if (firstclip == clip) {
// voltea la carta firstclip.gotoAndStop(1); firstClip = 0; } else
if (firstclip == 0) {
// se le asigna una imagen a la 1a carta, y un sonido al escogerla clip.gotoAndStop(clip.picture+1); firstclip = clip; s = new Sound(); s.attachSound("s1"); s.start();
// por lo menos una carta debe verse }
else {// voltea una segunda carta
clip.gotoAndStop(clip.picture+1); secondClip = clip;
// ve si dos cartas coinciden if (firstclip.picture == secondClip.picture) {
// remueve ambas cartas y se oye un sonido asertivo firstClip.removeMovieClip(); secondClip.removeMovieClip(); firstClip = 0; secondClip = 0; s = new Sound(); s.attachSound("s2"); s.start();
26
z=z+1; }
// si no son iguales no las remueve, pero se oye un sonido chusco else {
s = new Sound(); s.attachSound("s4"); s.start(); } }
//se mueve la línea de tiempo al siguiente frame y //para el contador en el fotograma para dentro del clip if (z == 18){ _root.t.gotoAndStop ("para"); gotoAndStop(2); } }
Como se vio no difiere mucho la programación de otros lenguajes y tienela ventaja de que hay funciones y comandos específicos creando así los scripts.Se hace referir que esta programación emplea llamadas a un clip de películanombrado card figura 17:
Figura 17
27
Se puede ver que en este clip de película están contenidas las imágenes dela baraja en cada fotograma de la capa llamada imágenes como la programaciónde la capa botón de cuando están volteadas.
Además al darle click al contador en la figura 16 mostrada en la siguienteimagen, nos muestra la ventana de propiedades que la instancia se llamatimer_mc y es un movie clip con nombre t esto es porque en la programaciónanterior se hace referir a esta parte para su uso, en la parte final que dice:
if (z == 18){ _root.t.gotoAndStop ("para"); gotoAndStop(2); }
Más adelante veremos dentro del movie clip del contador llamadotimer_mc el fotograma para. La programación del contador se muestra en lafigura 18 comenzando en el fotograma dos:
28
Figura 18
El contador en sí es un clip de película que contiene tres capas una conprogramación llamada A otra con frame label o nombre de fotogramas llamada Ly una capa llamada layer 2 donde se encuentra el diseño del contador.
Se menciona que el diseño del contador en el escenario comprende dospartes el de segundos y el de minutos, cuando se da click al recuadro de cadauno, en la ventana de propiedades o properties nos muestra el nombre delrecuadro que se hará llamar en variables, por medio de la programación de lacapa A como se muestra en seguida:
29
Cuando se señala el recuadro de los minutos en la ventana de propiedadesse le da el nombre printMin en variables.
Cuando se señala el recuadro de los segundos en la ventana depropiedades se le da el nombre printSec en variables.
Ahora la siguiente programación de la capa A en el fotograma tres es lafigura 19:
Figura 19Nos muestra como se usan los nombres de las variables anteriores para que
se muestren en los recuadros el uso del contador, la condición if sólo es parallevar un orden de dos números en el segundero donde si el número es menor adiez segundos se une el número con un cero a su lado derecho y cuando seamayor quite el cero.
En la siguiente figura 20 nos dice que cuando llegue al siguiente fotogramaregrese al fotograma nombrado start que está en la capa L.
30
Figura 20
La capa L muestra los frames labels o nombres de fotogramas, en estecaso se empleo de un modo alternativo para poder saltar de un fotograma a otro.
En las siguientes imágenes veremos los nombres de cada fotograma en lacapa L, cuando se le da un nombre a un fotograma aparece una banderita. Elfotograma dos se llama init en el fotograma tres start el cuatro loop y el cincopara.
31
El texto animado que está arriba del contador y que hace nombrar al juegocomo Juego de memoria se detalla de la siguiente manera en la figura 21:
Figura 21
Es un movie clip independiente llamado txt_juego_memoria insertado enel primer fotograma de la capa de texto de la figura 16, este clip esta compuestoa su vez de noventa fotogramas en los cuales los veintinueve primeros crean unefecto de aparición de las palabras, como se ve en la figura 21, la línea detiempo se encuentra en el fotograma veintidós se muestra como van apareciendolas palabras.
En la figura 22 se muestra que desde el fotograma treinta al sesenta esuna imagen continua, se uso esa distancia para que cuando pase la línea detiempo de una cantidad en tiempo de espera a que vuelva a hacer otro efectocomo en la figura 23 un efecto de explosión:
Figura 22
32
Figura 23
Se puede ver que en el último fotograma no tiene una acción de parar, loque hace entonces es que se vuelve a repetir continuamente dando un efecto debucle.
Hay también un clip de película llamado patitas este clip está contenidoen la capa huellas_marco de la figura 16, lo que hace es girar alrededor delcontador, su estructura es la siguiente figura 24:
onion skin opapel de cebolla
Figura 24
33
Como se puede apreciar es un clip que contiene cinco capas llamadasdesde el número cinco al nueve, se puede ver que la línea de tiempo seencuentra en la capa nueve, mostrándonos la imagen de la patita de hasta arribabien lucida y se ven las otras papitas medio trasparentes debajo de está, queestán en las demás capas, esto es debido a que está activada una función deFlash que se llama onion skin o papel de cebolla, que lo que hace es mostrartodo fotograma comprendido en un rango dado por unos corchetes negros queestán en la línea de tiempo ver figura 24.
Para darle el efecto de las huellas alrededor del contador figura 16 sóloponemos cuatro veces la figura en las esquinas formando un cuadrado y se hacegirar cada cuadro para que siga un sentido y a la hora de correr la animacióndará un efecto continuó alrededor del contador.
Se mencionó que hay al comienzo del juego hay una música continua, esetipo de música le llamaremos loop o bucle de sonido que quiere decir que elsonido se repetirá varias veces. El sonido empleado es un sonido con formato.WAV importado a la librería donde se le da tratamiento para su edición queconsta de mejorar la calidad de audio, reducir su peso en memoria y ponerefectos al mismo.
Difiere en la programación pues se prefirió poner como fotograma en lacapa layer 1 de la figura 16 ya que cada vez que acabe sonará nuevamenteindeterminadamente, cabe mencionar que hay muchas formas de hacer loop desonido.
34
Ahora volviendo a la figura 16 y escogiendo la columna dos de fotogramasse muestra la figura 25:
Figura 25
Nos muestra en esta figura la programación del botón jugar de nuevo, quellama de nuevo el mismo archivo comenzando desde la introducción, también semuestra el tiempo hecho al terminar el juego, en su parte de atrás se muestrauna animación de destellos de la figura en amarillo y el botón nuevamente deregresar comentado anteriormente.
El botón de jugar de nuevo, está hecho en un movie clip con dos capas unacapa llamada layer 1 y otra siendo una mascara de capa llamada layer 2, como seve a continuación:
35
Después se ve la siguiente etapa cando avanza la línea de tiempo:
Hasta llegar al final de la línea de tiempo:
36
Este movie clip es usado en la siguiente imagen:
Como se ve en el modo up así aparece siempre pero cuando pasa alsiguiente modo over aquí utiliza el movie clip anterior donde se usa la capa demascara, lo que hace esta animación es la de bajar la pestaña cuando se posa elpuntero sobre la misma mostrando algo oculto por detrás, en este caso unapalabra, pero no pierde la propiedad de botón.
37
En otra parte se muestra una animación de destellos por detrás delcontador, esta animación es muy sencilla como se ve en la figura 26:
Acción destop();
Figura 26
Es una sola imagen donde la línea de tiempo al avanzar muestrasalteadamente la imagen haciéndola aparecer en destellos, al final tiene uncódigo muy sencillo que es el comando stop(); que lo único que hace es la deparar la animación. Y por último, nuevamente aparece el botón animadoregresar que ya fue explicado en la figura 8.
3.2.2 Juego de Lupus
Esta idea surgió gracias a las secciones principales, que nos muestran comose comporta el lobo gris mexicano en su hábitat, el juego Lupus es un juego vistode arriba a abajo donde el lobo Lupus se encuentra perdido y tiene que llegar alotro lado del mapa (recuadro) a la única salida, lo interesante de llevar a Lupuspor el camino es que si tocas cualquier objeto inmóvil o movible regresa Lupus adonde empezó, otra característica es la del movimiento de Lupus, se mueve conla ayuda de las teclas de flecha: arriba, abajo, izquierda, derecha y suscombinaciones en diagonal.
Una característica más pero no menos importante es el uso de uncontador, así que es otro juego de tiempo, además se pensó en un sólo diseño demapa pero se realizó una segunda versión más y mejorada dando pauta a que sepueden hacer infinidad de mapas diferentes y con diferentes propiedades dediseño, veamos como se fue desarrollando.
38
En la primera parte tenemos el diseño de la introducción figura 27:
Figura 27
En este diseño podemos ver que sólo consta de una columna de fotogramasy hay una capa que tiene acciones o programación, la única acción comprendidaes el stop(); pues sólo se desea que ocurra una vez y se pare en el mismofotograma, se ve también un recuadro principal donde nos explica como jugar eljuego de Lupus, vemos diseños translucidos como la imagen de Lupus, vemostambién el mapa del juego por detrás del recuadro y las imágenes de Lupus, se
39
ve claramente dos opciones de botones llamados mapa1 de color azul y mapa2 decolor amarillo y por último se ve el botón de la huella regresar.
La programación de los botones mapa1 y mapa2 incluyen animación, sólose explicará el primero, pues el otro botón es similar, sólo cambia el color, elnúmero y en programación el nombre a donde se redireccione figura 28:
Figura 28
40
Podemos ver que al darle click al cuadro de mapa 1 se selecciona la capadonde se encuentra en mapas, vemos también en la ventana de propiedades elnombre del clip dado por la instancia que es but1_, al entrar a las propiedadesdel clip dando doble click al cuadro azul vemos como se conforma el botón consu animación ver la figura 29:
acción stop();
Figura 29
Podemos ver que es una secuencia corta animada mostrada por losfotogramas en azul en la capa nombrada layer 1, vemos que el primer fotogramatiene una acción de alto, es decir no avanzará la línea de tiempo por su cuenta,después damos click a la imagen del cuadro en azul figura 30 y vemos que laimagen tiene acciones con propiedades de botón:
on (rollOver) { }
Que quiere decir que cuando el puntero del ratón este encima de laimagen haga una acción que debe estar entre los corchetes:
on (rollOver) { nextFrame();
}
41
Es decir vaya al siguiente fotograma, al fotograma dos, figura 31:
Figura 30
Figura 31
El fotograma dos, tiene una acción llamada play(); que lo que hace es darcontinuidad a moverse la línea de tiempo mostrando el efecto animado figura 33
42
de la interpolación animada en azul, hasta llegar a una acción de alto, al darleclick a la imagen estando en el fotograma dos tiene ahora diferentes accionesveamos figura 32:
Figura 32
Estas acciones muestran que cuando se da click a la imagen se cargue unanueva película llamada lupus1.swf .
Figura 33
43
En la figura 33 podemos ver la interpolación de la animación hasta quellega al fotograma siete, donde hay una acción llamada stop(); como se ve en lafigura 34:
Figura 34
Ahora nuevamente damos click a la imagen para ver sus nuevas acciones estandoen el fotograma siete figura 35:
Figura 35
44
Estando sobre la imagen sin salirnos de ella tenemos dos opciones comonos muestra las acciones, una es que sí oprimimos el botón, carga un nuevo clipde película llamado lupus1.swf y la otra es que si el puntero del ratón se salede la imagen hará que la línea de tiempo vaya al siguiente fotograma figura 36donde sólo tiene una acción play(); que hace que corra de nuevo la línea detiempo con un efecto de animación como se muestra en la siguiente figura 37:
Figura 36
Figura 37
45
Hasta llegar al último fotograma que tiene por acción regresar al primerfotograma figura 39:
Figura 39
Se hace mencionar que esta explicación es igual para el botón mapa 2 sólocambia las explicaciones ya mencionadas.
Ahora pasamos al juego en sí, como ya se comentó hay dos mapas,pasemos al primer mapa, en el mapa 1 podemos ver que consta de dos columnasde fotogramas y varias capas, vemos que en la primera columna hay unfotograma con programación vemos que es la capa llamada acción podemos veren la figura 40 que la única acción comprendida, es la de parar la línea detiempo, se ve también la estructura del juego, se ve el contador dos vecesmostrado, se ve el titulo animado cambiando de forma y color como tambiénimágenes de Lupus a sus extremos, se ve al lobo Lupus de una vista de arriba aabajo y el mapa que tiene que recorrer, como también se ve una breveexplicación en la parte inferior y el botón de regresar.
NOTA: el punto en blanco que aparece en la parte superior izquierda delescenario es el loop o bucle de sonido que tiene está película, al darle dobleclick al punto se entra en el clip del loop.
46
Figura 40
La programación esencial de este juego se encuentra al darle click al loboLupus, la programación es la siguiente:
//cuando se cargue el evento escogido hará que se mueva con cierto nivel con la variable speedonClipEvent (load) { speed = 5;}
//cuando se entre en el fotograma del evento elegido hará uso de las teclasonClipEvent (enterFrame) {
//cuando se seleccione la tecla derecha se moverá con cierta velocidad al mismo lado if (key.isdown(key.RIGHT)) {
play();
//al escoger la tecla derecha haremos que se mueva hacia el mismo lado _rotation = 90;
47
//hace referencia a las coordenadas X _x+= speed; } if (key.isdown(key.LEFT)) { play(); _rotation = 270; _x-= speed; } if (key.isdown(key.UP)) { play(); _rotation = 0;
//hace referencia a la coordenada Y_y-= speed;
} if (key.isdown(key.DOWN)) { play(); _rotation = 180; _y+= speed; }
//aquí une dos teclas para hacer el movimiento en diagonalif (key.isdown(key.RIGHT) && key.isdown(key.UP)) {
_rotation = 45; } if (key.isdown(key.LEFT) && key.isdown(key.UP)) { _rotation = 315; } if (key.isdown(key.RIGHT) && key.isdown(key.DOWN)) { _rotation = 135; } if (key.isdown(key.LEFT) && key.isdown(key.DOWN)) { _rotation = 225; }
//si el lobo toca la imagen llamada tierra (mapa), se oye un sonido//y regresa a las coordenadas puestasif (_root.tierra.hitTest(_x+x, _y+y, true)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120 this._y = 200 } }
//el t y tt son usados como nombres para los dos contadores sincronizados que cuando el lobo//toque la imagen llamada meta que esta transparente se paren ambos contadores al ir al//fotograma llamado para, aparte se irá a la segunda columna de fotogramas donde un//fotograma se llama meta1situado en la capa llamada acciónonClipEvent (enterFrame) { if (this.hitTest(_root.meta)) { _root.t.gotoAndStop ("para"); _root.tt.gotoAndStop ("para"); _root.gotoAndStop("meta1");} }
48
Como vemos dentro de la programación de Lupus se hace referencia a cuatromovie clips; tierra, meta, t y tt. Enseguida se explicará cuales son esas películas.
La película llamada tierra es el recuadro central o mapa a recorrer porLupus figura 41:
capa
mapa o recuadro central
Figura 41
Podemos ver que al seleccionar el mapa o recuadro central el nombre delmovie clip es tierra situado en la capa llamada camino_lupus.
La película llamada meta es un rectángulo transparente situado en laúnica salida del mapa o recuadro central figura 42, podemos ver que alseleccionarla en la ventana de propiedades nos aparece con el nombre de metasituado en la capa llamada texto.
49
capa
rectángulotransparente
Figura 42
La película llamada t y tt pertenecen a cada uno de los dos contadoressincronizados ver figura 44. Se hace mencionar que cuando se selecciona loscontadores, están unidos ambos mostrando que pertenecen a la capa contadorfigura 43:
capa
selección al dar click
Figura 43
50
Ahora sí, para entrar al movie figura 44 se tiene que dar doble click,podemos ver que al seleccionar el primer recuadro del contador (lado izquierdo)en la ventana de propiedades nos muestra que el nombre del clip es t y por endeel de la derecha es tt.
Figura 44
Veremos ahora la animación del texto que comprende el titulo del juego,figura 45:
Figura 45
51
Como podemos ver al seleccionar el texto del titulo no tiene nombre elclip, no es necesario porque no hay programación que lo mande a llamar, encambio al entrar al movie del mismo podemos ver como se forma la animaciónque crea, figura 46 y 47:
Figura 46
Figura 47
Se observa que la interpolación de la animación es corta (fotogramas enazul), esto es para darle un efecto de cambio rápido a la hora de correr la líneade tiempo que a su vez se repetirá continuamente al no haber una acción de altoal final de los fotogramas.
Recuerde que la estructura y programación del contador ya se dijoanteriormente, como la del botón regresar y el loop o bucle de sonido.
52
En la figura 48 se observa la segunda columna de fotogramas, donde aldarle click en el primer fotograma, donde hay una acción vemos que tiene unalto de línea de tiempo, vemos a su vez que el fotograma es llamado meta1 en laventana de propiedades, en la capa llamada loop se ha insertado directamenteun archivo .WAV sólo se oirá una vez limitado por la acción alto de la capaacción, vemos también el diseño estructural del final del juego, vemos una fotode Lupus opaca en un recuadro central sobre ella vemos un contador, estecontador como se mencionó en la programación dejo de correr, parándose eltiempo al tocar el rectángulo transparente llamado meta e ir a su fotogramallamado para, también se ve la animación del resplandor ya comentado, se veuna explicación sencilla y dos botones, estos botones ya se han mencionadoanteriormente, también se ven unas caritas de la imagen de Lupus y nuevamenteel botón de regresar.
capa click
acción
Figura 48
contador
botones
53
Como vemos en la figura anterior hay otra forma de ir al segundo mapacon el botón mapa2 en amarillo de este mismo juego figura 49:
acción
Figura 49
El juego de este mapa es muy atractivo e interesante, porque hay objetosmovibles, en la figura 49 vemos que contiene cinco columnas de fotogramas,podemos adelantar que en la capa de acciones todos los fotogramas contienenuna acción de alto y nombres diferentes en el primer caso vemos que se llamainicio, aparece de nuevo la capa llamada contador donde se encuentran amboscontadores sincronizados ya vistos, vemos la capa llamada camino_lupus ya vistopero ahora tiene un diferente diseño, se ve también la capa del botón deregresar y la capa llamada loop donde se encuentra en sus fotogramas el archivo
54
de sonido .WAV a usar, vamos a concentrarnos en las otras capas e ir explicandocolumna por columna, pero antes veamos la programación esencial que tiene aldarle click al lobo Lupus en la primera columna de fotogramas:
onClipEvent (load) { speed = 5;}onClipEvent (enterFrame) { if (key.isdown(key.RIGHT)) { play(); _rotation = 90; _x+= speed; } if (key.isdown(key.LEFT)) { play(); _rotation = 270; _x-= speed; } if (key.isdown(key.UP)) { play(); _rotation = 0; _y-= speed; } if (key.isdown(key.DOWN)) { play(); _rotation = 180; _y+= speed; } if (key.isdown(key.RIGHT) && key.isdown(key.UP)) { _rotation = 45; } if (key.isdown(key.LEFT) && key.isdown(key.UP)) { _rotation = 315; } if (key.isdown(key.RIGHT) && key.isdown(key.DOWN)) { _rotation = 135; } if (key.isdown(key.LEFT) && key.isdown(key.DOWN)) { _rotation = 225; }
if (_root.tierra.hitTest(_x+x, _y+y, true)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start(); this._x = 120 this._y = 200 }}
55
onClipEvent (enterFrame) {
//lo anterior es igual en la programación que en el primer mapa
//si el lobo toca el clip llamado bala1 que es un rectángulo transparente que está en el camino//que recorrerá Lupus, irá a la segunda columna de fotogramas donde llama al fotograma//llamado bala_1 que está en la capa llamada acción
if (this.hitTest(_root.bala1)) { _root.gotoAndPlay("bala_1"); } }
//los siguientes entradas de eventos de fotogramas se refieren a los obstáculos en movimiento
onClipEvent (enterFrame) {
//si el lobo toca la película llamada trampa1a, se oirá el sonido regresa_lupus y el lobo irá a la//posición inicial dada por los valores de coordenadas X y Y if (this.hitTest(_root.trampa1a)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) {
//si el lobo toca la película llamada trampa1b, se oirá el sonido regresa_lupus y el lobo irá a la//posición inicial dada por los valores de coordenadas X y Y if (this.hitTest(_root.trampa1b)) {
s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) {
//si el lobo toca la película llamada trampa1c, se oirá el sonido regresa_lupus y el lobo irá a la//posición inicial dada por los valores de coordenadas X y Y
if (this.hitTest(_root.trampa1c)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) {
//si el lobo toca la película llamada trampa1d, se oirá el sonido regresa_lupus y el lobo irá a la//posición inicial dada por los valores de coordenadas X y Y
if (this.hitTest(_root.trampa1d)) { s = new Sound(); s.attachSound("regresa_lupus");
56
s.start();this._x = 120;this._y = 200;
}}
Vemos que la programación es muy parecida a la del primer mapa excepto laúltima parte donde se hacen llamadas, en el primer caso se hace una llamada aun fotograma con el nombre de bala1, este nombre es puesto a un rectángulotransparente que se encuentra en el camino, al momento que el lobo toque elrectángulo la línea de tiempo irá a la segunda columna de fotogramas dado quehay un fotograma llamado bala_1 en la capa acción.
En los siguientes casos hace llamadas a objetos que están en movimiento(obstáculos), estos objetos son películas si el lobo los llegará a tocar se oirá elsonido regresa_lupus y se irá a la posición dada por las coordenadas. Las cuatropelículas que están en movimiento (obstáculos) se encuentran en el fotograma dela primera columna en la capa texto_trampas, recuerde que en cada columna defotogramas en la capa texto_trampas todos los fotogramas son diferentes, esdecir hay diferentes obstáculos.
2ª columna
Figura 50
57
En la figura 50 podemos ver a la hora de la animación que las primerascuatro trampas desaparecieron y aparecen seis nuevas, esto es porque lasprimeras cuatro están contenidas en el fotograma de la primera columna en lacapa de texto_trampas y las seis nuevas están en la segunda columna en lamisma capa. Veamos la programación del lobo lupus en esta segunda columna:
onClipEvent (load) { speed = 5;}onClipEvent (enterFrame) { if (key.isdown(key.RIGHT)) { play(); _rotation = 90; _x+= speed; } if (key.isdown(key.LEFT)) { play(); _rotation = 270; _x-= speed; } if (key.isdown(key.UP)) { play(); _rotation = 0; _y-= speed; } if (key.isdown(key.DOWN)) { play(); _rotation = 180; _y+= speed; } if (key.isdown(key.RIGHT) && key.isdown(key.UP)) { _rotation = 45; } if (key.isdown(key.LEFT) && key.isdown(key.UP)) { _rotation = 315; } if (key.isdown(key.RIGHT) && key.isdown(key.DOWN)) { _rotation = 135; } if (key.isdown(key.LEFT) && key.isdown(key.DOWN)) { _rotation = 225; }
if (_root.tierra.hitTest(_x+x, _y+y, true)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start(); this._x = 120 this._y = 200 }
}
58
onClipEvent (enterFrame) {
//si el lobo toca el clip llamado bala2 que es un rectángulo transparente que está en el camino//que recorrerá Lupus, irá a la tercera columna de fotogramas donde llama al fotograma//bala_2 que está en la capa llamada acción
if (this.hitTest(_root.bala2)) { _root.gotoAndStop("bala_2"); }}onClipEvent (enterFrame) {
//si el lobo toca la película llamada trampa2a, trampa2b, trampa2c, trampa2d, trampa2e,//trampa2f se oirá el sonido regresa_lupus y el lobo irá a la posición inicial dada por los//valores de coordenadas X y Y
if (this.hitTest(_root.trampa2a)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) { if (this.hitTest(_root.trampa2b)) {
s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) { if (this.hitTest(_root.trampa2c)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) { if (this.hitTest(_root.trampa2d)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) { if (this.hitTest(_root.trampa2e)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}onClipEvent (enterFrame) { if (this.hitTest(_root.trampa2f)) { s = new Sound(); s.attachSound("regresa_lupus");
59
s.start();this._x = 120;this._y = 200;
}}
Podemos empezar a darnos cuenta de la secuencia de avance del lobo, conlos obstáculos, veamos la figura 51:
Figura 51
En esta figura vemos el nombre bala_2 que le corresponde al tercerfotograma de la capa acción y vemos que no hay obstáculos, la programación dellobo en el tercer fotograma es la siguiente:
onClipEvent (load) { speed = 5;}onClipEvent (enterFrame) { if (key.isdown(key.RIGHT)) { play(); _rotation = 90;
60
_x+= speed; } if (key.isdown(key.LEFT)) { play(); _rotation = 270; _x-= speed; } if (key.isdown(key.UP)) { play(); _rotation = 0; _y-= speed; } if (key.isdown(key.DOWN)) { play(); _rotation = 180; _y+= speed; } if (key.isdown(key.RIGHT) && key.isdown(key.UP)) { _rotation = 45; } if (key.isdown(key.LEFT) && key.isdown(key.UP)) { _rotation = 315; } if (key.isdown(key.RIGHT) && key.isdown(key.DOWN)) { _rotation = 135; } if (key.isdown(key.LEFT) && key.isdown(key.DOWN)) { _rotation = 225; }
if (_root.tierra.hitTest(_x+x, _y+y, true)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start(); this._x = 120 this._y = 200 }
}
onClipEvent (enterFrame) {
//si el lobo toca el clip llamado bala3 que es un rectángulo transparente que está en el camino//que recorrerá Lupus, irá a la cuarta columna de fotogramas donde llama al fotograma bala_3//que está en la capa llamada acción if (this.hitTest(_root.bala3)) { _root.gotoAndPlay("bala_3"); }}
61
Ahora veremos la siguiente columna, figura 52:
Figura 52
En está cuarta columna vemos que el nombre del fotograma es bala_3, laprogramación del lobo en esta columna es:
onClipEvent (load) { speed = 5;}onClipEvent (enterFrame) { if (key.isdown(key.RIGHT)) { play(); _rotation = 90; _x+= speed; } if (key.isdown(key.LEFT)) { play(); _rotation = 270; _x-= speed; }
62
if (key.isdown(key.UP)) { play(); _rotation = 0; _y-= speed; } if (key.isdown(key.DOWN)) { play(); _rotation = 180; _y+= speed; } if (key.isdown(key.RIGHT) && key.isdown(key.UP)) { _rotation = 45; } if (key.isdown(key.LEFT) && key.isdown(key.UP)) { _rotation = 315; } if (key.isdown(key.RIGHT) && key.isdown(key.DOWN)) { _rotation = 135; } if (key.isdown(key.LEFT) && key.isdown(key.DOWN)) { _rotation = 225; }
if (_root.tierra.hitTest(_x+x, _y+y, true)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start(); this._x = 120 this._y = 200 }
}onClipEvent (enterFrame) {
//sí cuando toque el lobo el rectángulo llamado meta irá la línea de tiempo al quinto fotograma//llamado meta1 y los contadores t y tt en sus películas la línea de tiempo irá al fotograma//llamado para esto es para que se detengan los contadores if (this.hitTest(_root.meta)) { _root.t.gotoAndStop ("para"); _root.tt.gotoAndStop ("para"); _root.gotoAndStop("meta1"); }
}
onClipEvent (enterFrame) {
//si el lobo toca la película llamada trampa4a, trampa4b, trampa4c, trampa4d se oirá el sonido//regresa_lupus y el lobo irá a la posición inicial dada por los valores de coordenadas X y Y
if (this.hitTest(_root.trampa4a)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}
63
onClipEvent (enterFrame) { if (this.hitTest(_root.trampa4b)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}
onClipEvent (enterFrame) { if (this.hitTest(_root.trampa4c)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}
onClipEvent (enterFrame) { if (this.hitTest(_root.trampa4d)) { s = new Sound(); s.attachSound("regresa_lupus"); s.start();
this._x = 120;this._y = 200;
}}
Recuerde que los rectángulos llamados bala1, bala2, bala3 y meta seencuentran en cada uno de los fotogramas de la capa texto_trampas, tambiénrecuerde que cuando llegue a tocar cualquier obstáculo o parte del caminoempezará en las coordenadas dadas en la programación y que no volverá la líneade tiempo al inicio es decir no verá de nuevo los primeros obstáculos.
En la figura 53 en la última columna de fotogramas en la capa txt_final,podemos ver que en el escenario, la estructura final es similar a la del primermapa mencionado anteriormente, podemos ver que al darle click en el últimofotograma de la capa acción, en la ventana de propiedades el nombre de estefotograma es meta1, también vemos que se ha insertado un archivo de sonido.WAV llamado aplausos y otro archivo de sonido llamado animo en el fotogramaparche contador, vemos de nuevo el recuadro donde aparece la imagen de Lupuscon algún texto explicativo, vemos también los dos botones de colores que nosenviarán a jugar de nuevo en los mapas y el botón de regresar que nos enviará ala película principal de los juegos al Index, aún no creada.
64
sonidos
Figura 53
La capa llamada parche_contador sólo tiene un fotograma al final deljuego que es un rectángulo de color verde utilizado para tapar uno de loscontadores, ya que hemos dicho, que al seleccionarlos están unidos, y esa uniónse debe a la interpolación que tiene la capa contador en sus dos últimosfotogramas.
Las animaciones internas de este juego son las siguientes, para generar elmovimiento de Lupus se diseño la siguiente película, figura 54 y 55, donde en elprimer fotograma hay una acción de alto o stop vemos que hasta el cuartofotograma cambia la imagen como esta en la figura 55, entonces cada vez quecorra la línea de tiempo se parará en el primer fotograma.
65
Figura 54 Figura 55
Y por último las animaciones de las trampas, se mostrarán las imágenes delas secuencias, ayudados por la herramienta de papel de cebolla podemos ver lassecuencias de las animaciones, figura 56 trampa_1a, figura 57 trampa_1b, figura58 trampa_1c y figura 59 trampa_1d:
papel cebolla
Figura 56
66
Figura 57
Figura 58
67
Figura 59
Queda del lector checar la realización de las diferentes interpolaciones demovimiento, sí está la línea de tiempo en el primer fotograma entonces el iniciodel movimiento se puede ver en el escenario con la imagen más detallada y esahí en donde empieza el movimiento.
3.2.3 Números
Este es un juego clásico de agilidad y destreza mental, muy llamativo porgentes de todas edades sobre todo es un juego muy entretenido.
Es un juego mostrando varias fichitas en forma de cuadrados dentro de uncuadro grande, cada fichita tiene dibujado un número y una parte de una imagencompleta en la cual hay que ordenarlos de varias formas ya sea por números ocomo se vaya formando la imagen, estas fichitas aparecen desordenadas dediferentes formas cada vez que se desee comenzar un juego nuevo. Comencemosexplicando la primera parte de este juego, figura 60:
68
Figura 60
Se puede ver que la película principal formada por una sola columna defotogramas y cuatro capas, en la primera capa llamada txt se encuentra el textoexplicativo del juego, en la capa recuadro se encuentra el cuadro en amarillo yel botón jugar, en la capa fondo se encuentra la estructura del juego en sí mediotransparente y el botón de regresar, y en la última capa background seencuentra un rectángulo que engloba todo el escenario de color naranja.
Veamos la programación del botón jugar, figura 61:
69
acción
Figura 61
Recuerde que está película está comprendido en el fotograma de la caparecuadro, como vemos tiene una estructura muy similar a los botones mapa1 enazul y mapa2 en amarillo del juego Lupus en donde el primer fotograma tieneuna acción de alto, al darle click a la palabra jugar! vemos su programación verfigura 62:
Figura 62
click
70
Al pasar al segundo fotograma vemos que empieza la interpolación demovimiento o la animación ese fotograma tiene una acción de play o seguir,figura 63:
Figura 63
Al darle click a la palabra vemos otro código, figura 64:
Figura 64
Vemos que este código nos dice que si le damos click mostrará una nuevapelícula llamada puzzle2.swf, este código afecta desde el fotograma dos hasta elsiete en donde hay una acción de alto, figura 65:
71
Figura 65
Vemos que lo que hizo la animación fue agrandar la palabra y cambiarle decolor, al darle click a la palabra el código cambia, figura 66:
Figura 66
Como vemos aún conserva el botón la dirección de la nueva película acargar, recuerde que sí el puntero se sale de la imagen o palabra apuntada, lalínea de tiempo irá al siguiente fotograma, figura 67:
72
Figura 67
Aquí solo aparece una acción, la de seguir o play, en donde la línea detiempo avanzará la animación haciendo que la imagen retorne al tamaño y colorinicial, ver figura 68:
Figura 68
En este último fotograma la acción es retornar al primer fotograma.
73
Empecemos a ver la siguiente fase, la estructura y diseño del juego,sabemos que hay dos versiones de este juego, al entrar al juego siempreempezaremos por el llamado puzzle2.swf, si queremos entrar al otro primeropasaremos por este, figura 69:
Botón ayuda
Figura 69
Podemos observar que consta de dos columnas de fotogramas, veamos lascapas, de arriba abajo podemos ver la capa loop, en ella se encuentra el archivode sonido, vea que se encuentra en la segunda columna el archivo pues másadelante se verá que cuando empiece la película la línea de tiempo no se detieneen la primera columna sino en la segunda también se encuentra el texto deltitulo, uno de los botones en amarillo el uno y el botón comenzar_de_nuevo queredirecciona a la misma película, en la capa huellas en ella están las imágenesde las patitas y el botón regresar, después está la capa botón_ayuda en ella seencuentra como el nombre lo dice la animación del botón de ayuda, veamoscomo se realizo figura 70:
74
Figura 70
Podemos darnos cuenta de las facetas del botón y que este estácomprendido dentro de clip llamado ayuda y este puesto dentro de la escena,veamos el clip figura 71 y 72:
acción
on (press) { gotoAndStop(2);
}Figura 71
75
Figura 72
Vemos que en la primera columna figura 71 hay una acción de alto vemosque no pasa nada, pero al darle click al botón, nos dice que la línea de tiempo semueve a la segunda columna de fotogramas figura 72, vea los cambiosmostrados.
Regresando a la figura 69, la capa llamada marco_2 comprende el dibujode la rejilla central, la capa marco_1 son los dibujos a usar como fichas y unbotón en amarillo donde ya hemos visto su realización, en esta parte cada dibujode las fichitas tiene un código similar veamos figura 73, en ella vemos que aldarle click a la ficha o dibujo uno, en la ventana de propiedades nos informa quetiene propiedades de ser botón y es llamado cuadro1, el código lo podemos ver asu derecha, para verlo bien en el programa se recorre la barra deslizadora,debajo de la figura 74 detallamos el código que contiene la primer ficha.
76
Figura 73
on (press) { comparacion_cuadro16x=_root.cuadro16._x; comparacion_cuadro16y=_root.cuadro16._y;comparacion_cuadro1x=_root.cuadro1._x;comparacion_cuadro1y=_root.cuadro1._y;
if ((comparacion_cuadro1x==comparacion_cuadro16x-80comparacion_cuadro1y==comparacion_cuadro16y)
or (comparacion_cuadro1x==comparacion_cuadro16x+80comparacion_cuadro1y==comparacion_cuadro16y)
or (comparacion_cuadro1x==comparacion_cuadro16xcomparacion_cuadro1y==comparacion_cuadro16y-80)
or (comparacion_cuadro1x==comparacion_cuadro16xcomparacion_cuadro1y==comparacion_cuadro16y+80))
{
77
_root.movimiento(comparacion_cuadro1x,comparacion_cuadro1y,1,comparacion_cuadro16x,comparacion_cuadro16y) }}
Lo que hace este código es generar el movimiento de esta ficha, ya seahacia arriba, abajo, izquierda o derecha, eso lo hace con la función_root.moviento, lo hará si cumple la condición del if que es una comparación conla ficha 16, que es la de color negro o la vacía dado al crear las variables al inicioy asignarles los comandos de coordenadas tanto X y Y.
Veamos el código ahora para el segundo botón:
on (press) { comparacion_cuadro16x=_root.cuadro16._x; comparacion_cuadro16y=_root.cuadro16._y;comparacion_cuadro2x=_root.cuadro1._x;comparacion_cuadro2y=_root.cuadro1._y;
if ((comparacion_cuadro2x==comparacion_cuadro16x-80comparacion_cuadro2y==comparacion_cuadro16y)
or (comparacion_cuadro2x==comparacion_cuadro16x+80comparacion_cuadro2y==comparacion_cuadro16y)
or (comparacion_cuadro2x==comparacion_cuadro16xcomparacion_cuadro2y==comparacion_cuadro16y-80)
or (comparacion_cuadro2x==comparacion_cuadro16xcomparacion_cuadro2y==comparacion_cuadro16y+80))
{_root.movimiento(comparacion_cuadro2x,comparacion_cuadro2y,1,comparacion_cuadro16x,comparacion_cuadro16y) }}
Es muy similar al primero, solo cambia las variables a usar en cada caso yrecuerde que el nombre cambia en la ventana de propiedades cuadro1, cuadro2etc. según sea el caso por ende todos los botones tienen un código similar.
Volviendo a la figura 69 la siguiente capa es la de movimiento en ella seencuentra el código de la función de movimiento de la ficha negra o 16 y elmovimiento de otro número a emplear, este código comprende las dos columnasde fotogramas, mostrado de la siguiente manera y en la figura 74:
function movimiento (movimiento16x,movimiento16y,numcuadro,movcuadrox,movcuadroy) {_root.cuadro16._x=movimiento16x;_root.cuadro16._y=movimiento16y;_root["cuadro"+numcuadro]._x=movcuadrox;_root["cuadro"+numcuadro]._y=movcuadroy;
// reconoce sonido al movimiento de ficha s = new Sound(); s.attachSound("s1"); s.start();};
78
acción movimiento
Figura 74
La siguiente capa es layer 2, emplea también códigos, pero vea que esdiferente del fotograma uno que el dos, figura 75 y 76:
Figura 75
79
El código detallado del primer fotograma de la capa layer 2 es el siguiente:
//posiciones tanto para la x como para la ubicación y de los botonesmatriz_x=[200,280,360,440];contenedor=[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false];
//ordena aleatoriamente los elementos de la matriz_xposicion = new Array(); for (a=0; a<4; a++) { num = (random(matriz_X.length)); value=matriz_x[num]; posicion.splice(1,0,value); matriz_x.splice(num,1); } numero=1; pos_x=0;function orden_inicial(){ for (a=0;a<16;a++) { if (pos_x<4) { _root["cuadro"+numero]._x=posicion[pos_x]; pos_y=0; for (m=0;m<4;m++) { _root["cuadro"+numero]._x=posicion[pos_x] _root["cuadro"+numero]._y=posicion[pos_y]; numero++; pos_y++; } pos_x++ } }}//chequea ubicación del cuadro 16function ubicacion_cuadro_16 (eje_x,eje_y,numero_de_cuadro) { if (eje_x==200 && eje_y==200){contenedor[0]=true; }else if(eje_x==200 && eje_y==280){contenedor[1]=true; }else if(eje_x==200 && eje_y==360){contenedor[2]=true; }else if(eje_x==200 && eje_y==440){contenedor[3]=true;
//2da fila }else if (eje_x==140 && eje_y==200){contenedor[4]=true; }else if(eje_x==140 && eje_y==280){contenedor[5]=true; }else if(eje_x==140 && eje_y==360){contenedor[6]=true; }else if(eje_x==140 && eje_y==440){contenedor[7]=true;
//3ra fila }else if (eje_x==220 && eje_y==200){contenedor[8]=true; }else if(eje_x==220 && eje_y==280){contenedor[9]=true; }else if(eje_x==220 && eje_y==360){contenedor[10]=true; }else if(eje_x==220 && eje_y==440){contenedor[11]=true;
80
//4ta fila }else if(eje_x==300 && eje_y==200){contenedor[12]=true; }else if(eje_x==300 && eje_y==280){contenedor[13]=true; }else if(eje_x==300 && eje_y==360){contenedor[14]=true; }else if(eje_x==300 && eje_y==440){contenedor[15]=true; }}
acción
Figura 76
El código empleado en el segundo fotograma son dos renglones como se veen la figura 76 donde llama a la función orden_inicial(); que se encuentra en elprimer fotograma y el comando de alto, recuerde que el punto blanco es elarchivo de sonido.
Y por último la capa background es un rectángulo de color naranja usadapara hacer más grande el trabajo en el escenario.
La segunda versión de este mismo juego tiene el mismo concepto, lamisma estructura y la misma programación, sólo el diseño de imágenes, las fichas
81
y del escenario cambian al igual que los colores de los botones, vea la diferenciaen las siguientes imágenes.
Puzzle 1
Puzzle 2
82
3.2.4 Index
La parte principal de los juegos es llamado inicio o Index, está se dejo alfinal para sólo enlazar los demás juegos a esta parte, veamos la estructura y eldiseño de está sección, figura 77:
Figura 77
La estructura parece ser muy sencilla con una sola columna de fotogramascon nueve capas, analicemos las capas de abajo a arriba, en la capa backgroundcomo lo hemos mencionado es un rectángulo de color naranja usada para hacermás grande el trabajo en el escenario, en la capa niño y niña son las imágenesmedio transparentes de ellos respectivamente, puestos detrás de los demásobjetos, en la capa flechas_loop se encuentran algunas flechas estáticasseguidoras, es decir que cuando se mueve el puntero estás siguen la dirección del
83
puntero y además se incluye un archivo de sonido, en la capa bot_tringulo seencuentra la animación del botón triángulo en amarillo del juego Lupus, en lacapa txt_juegos se encuentra la animación del titulo y algunas flechas estáticasseguidoras, en la capa bot_return se encuentra el botón de regresar, en la capabot_cuadrado está la animación del botón cuadrado en azul del juego cuadritosde números y por último en la capa bot_circulo se encuentra la animación delbotón circulo en rojo del juego memoria.
Veamos la capa flechas_loop, vemos que para que las flechas tengan esemovimiento de seguir al puntero deben tener algún código, veamos la figura 78:
loop
click
Figura 78
El código es muy sencillo, definen variables al emplear comandos muysencillos, en el anexo veremos las descripciones, sintaxis y parámetros de loscomandos empleados.
La animación del botón de la capa bot_tringulo está en la figura 79, enella se ven otras interpolaciones de animación como la palabra Lupus que está enla capa txt y aparece dentro del triángulo, la capa layer 4 que tiene dos palabras
84
iguales Lupus a los lados del triángulo y la carita de Lupus que está en la capaimagen y aparece dentro del triángulo. Podemos ver que en la primera columnade fotogramas hay una acción de alto pero al darle click al triangulo estando enel mismo el código cambia vea figura 80,
click
Figura 79
Figura 80
click
85
Al pasar a la segunda columna la acción dada es de avanzar la línea detiempo, al darle click a la figura sigue estando igual que en la figura anterior sólosin la función rollOver, vea la figura 81 y 82:
click
Figura 81
Figura 82
click
86
Vemos que en la figura anterior aparece las palabras de Lupus a los ladosdel triángulo, eso es porque en la línea de tiempo entro el fotograma de la capalayer 4, como también empezó a entrar la capa triángulo donde la interpolaciónhará que se agrande el triángulo, veamos la figura 83 y 84:
clickFigura 83
Figura 84
click
87
En la figura anterior tanto la capa txt e imagen aparecen y son la palabraLupus y el dibujo del lobo Lupus, ambos dentro del triángulo.
NOTA: contemple que la animación del botón y la programación deltriángulo es similar a los botones vistos de cuadros en amarillo y azul.
Después pasamos al octavo fotograma, donde aparece la acción play veasefigura 85:
click
Figura 85
Aquí al darle click al triángulo ya no aparece código pues no es necesarioya que está última parte hará retornar a su estado inicial, la acción en estefotograma hará avanzar la línea de tiempo, haciendo que la animación retornecomo al estado del primer fotograma, es decir hacer el mismo tamaño altriángulo y hará desaparecer la imagen de Lupus y las palabras, avanzará hasta elúltimo fotograma donde su código hará retornar el primer fotograma, figura 86:
88
Figura 86
Volviendo a la figura 77 la animación de la capa txt_juegos comprendealgunas flechas estáticas seguidoras ya visto y el titulo, de este último podemosver que la estructura está compuesta por una sola capa y 30 fotogramas figura87,88 y 89:
Figura 87
89
Figura 88
Figura 89
Podemos ver en estas tres figuras la faceta por donde pasa la línea detiempo, vemos que es un tipo de animación, cambiando la palabra de forma y decolor a la vez que usa un efecto de transparencia, podemos darnos cuenta que nohay código en ninguna parte por lo que la línea de tiempo hará que se repitainfinitamente es decir se hará un bucle.
90
Regresando nuevamente a la figura 77, la siguiente capa bot_return es lade regresar ya visto muy atrás, la capa a mostrar es bot_cuadrado vea figura 90:
Figura 90
Vea que es muy similar al botón del triángulo, pero la estructura de laanimación es totalmente diferente.
Expliquemos las capas de esta película, de abajo a arriba tenemos la capalayer 1, esta capa tiene la misma funcionalidad que el botón anterior tanto enhacerse grande como pequeño y en la programación es igual sólo que sedirecciona a una película diferente figura 91, la capa layer 8,5 y 6 son loscuadritos pequeños en azul que empiezan a aparecer vea figura 92, en la capalayer 7 se encuentra la película de los cuadritos dando vueltas en circulo veafigura 93a,93b y 93c, en la capa txt aparece el texto en el cuadrado y la capatxt_esquinas aparece los textos en la parte superior, a los lados del titulocentral, más adelante veremos como es la animación de los textos.
91
Figura 91
Figura 92
92
Figura 93a
Figura 93b
Figura 93c
93
La capa txt y la capa txt_esquinas contienen un texto en común pero laanimación es diferente, veamos como son, empecemos con la capa txt figura94a, 94b y 94c:
Figura 94a
Figura 94b
Figura 94c
94
Ahora veamos los efectos en la animación de la capa txt_esquinas figura95a, 95b y 95c:
Figura 94a
Figura 94b
Figura 94c
95
Tanto para las animaciones de los textos de las capas txt y txt_esquinasambas se repetirán constantemente
Volviendo por última vez a la figura 77, a la última capa bot_circulo suestructura es más sencilla figura 95:
Figura 95
La capa layer 1 comprende lo mismo que en los botones anteriores tantoen programación como alguna similitud en la interpolación de la animación, sediferencia sólo en la dirección de película al darle click al botón, al acercarse lalínea de tiempo al fotograma siete va desapareciendo el circulo rojo figura 96, yestando en el fotograma siete aparece la capa layer 2 y layer 3, la capa layer 2es una animación del circulo haciendo hacia atrás figura 97a, 97b y 97c la capalayer 3 es la animación del texto que aparece dentro del circulo figura 98a, 98by 98c.
Figura 96
96
Figura 97a
Figura 97b
Figura 97c
97
Figura 98a
Figura 98b
Figura 98c
98
Como se ha visto las ventajas que nos ofrece el programa de MacromediaFlash son muy grandes y sobre todo usando a la vez el lenguaje de ActionScriptlas ventajas se vuelven inmensamente grandes.
El haber hecho este trabajo con el lenguaje de programación ActionScripten el programa de Macromedia Flash, nos a ofrecido la posibilidad, el podersacarle aun más provecho y de darle mayor calidad al proyecto realizado entodas sus perspectivas, es un programa que está creciendo a pasos gigantescos anivel mundial y sobre todo en su uso en la red.
Cabe mencionar que para llegar a una comprensión más exacta de larealización de este proyecto se debe guiar con el archivo creado en todas susetapas.
Es bueno decir que los juegos están abiertos en el sentido de que se puedecontinuar mejorándolos tanto en el diseño, estructura y en la programación comodando también la posibilidad de crear nuevos juegos y sobre todo nuevos diseños,recuerde que la imaginación no tiene fin.
Algunas nuevas creaciones, provienen de una o varias creaciones
Mario Blancarte Ayala
99
I. Referencia
Edición de textoPuede introducir scripts directamente en el panel Acciones en Modo Experto.También puede elegir elementos de un menú emergente o de una lista de la cajade herramientas como lo hacía en Flash 4.
Sintaxis de puntoPuede utilizar la sintaxis de punto para obtener y establecer las propiedades ylos métodos de un objeto, incluidas instancias y variables de clip de película.Puede utilizar la sintaxis de punto en lugar de la sintaxis de barras que seutilizaba en Flash 4. Ya no se utiliza la sintaxis de barras, pero aún la admiteFlash Player.
Tipos de datosEl lenguaje ActionScript de Flash 5 admite los siguientes tipos de datos: cadena,número, booleano, objeto y clip de película. Los distintos tipos de datos lepermiten utilizar diferentes tipos de información en ActionScript. Por ejemplo,puede crear matrices y matrices asociativas.
Variables localesPuede declarar variables locales que expiran al final de la lista de acciones o dela llamada de función. Esto le permite gestionar la memoria y volver a utilizar losnombres de variables. Todas las variables de Flash 4 eran permanentes; inclusolas variables temporales como los contadores de bucle que permanecían en lapelícula hasta que finalizaba.
Funciones definidas por el usuarioPuede definir funciones con parámetros que devuelven valores. Esto le permitevolver a utilizar los bloques de código en los scripts. En Flash 4, podía volver autilizar el código mediante la acción call pero no podía pasar parámetros nidevolver valores.
Objetos predefinidosPuede utilizar los objetos predefinidos para acceder y manipular ciertos tipos deinformación. A continuación se muestran algunos de los objetos predefinidos:
El objeto Math dispone de un complemento completo de constantes y funcionesmatemáticas integradas como E (constante de Euler), cos (Coseno), y atan (arcotangente).
El objeto Date le permite obtener información sobre la fecha y la hora delsistema en el que se esté ejecutando Flash Player. El objeto Sound le permite agregar sonidos a una película y controlar los
sonidos en una película a medida que se reproduce. Por ejemplo, puede ajustarel volumen ( setVolume ), o el balance ( setPan ).
100
El objeto Mouse le permite ocultar el cursor estándar para que pueda utilizarun cursor personalizado.
El objeto MovieClip le permite controlar clips de película sin utilizar unaacción envolvente como tellTarget. Puede llamar a un método como play,loadMovie, o duplicateMovieClip desde un nombre de instancia utilizando lasintaxis de punto (por ejemplo, myMovieClip.play() ).
Acciones de clipPuede utilizar la acción onClipEvent para asignar acciones directamente ainstancias de clip de película en el Escenario. La acción onClipEvent dispone deeventos como load, enterFrame, mouseMove y data que le permiten crearnuevas clases de interactividad avanzada.
Acciones nuevasPuede utilizar acciones nuevas como do..while y for para crear bucles complejos.Otras acciones nuevas se implementan como métodos del objeto MovieClip; porejemplo, getBounds, attachMovie, hitTest, swapDepths, y globalToLocal.
Clips inteligentesLos Clips inteligentes tienen scripts internos que el usuario, u otro autor, puedecambiar sin utilizar el panel Acciones. Puede pasar valores a un Clip inteligentepor medio de los parámetros de clip que puede definir en la Biblioteca.
II. TERMINOLOGÍA
Al igual que cualquier lenguaje de creación de scripts, ActionScript utilizaterminología específica y está sujeta a determinadas reglas sintácticas. Lasiguiente lista introduce términos importantes de ActionScript, en ordenalfabético.
Acciones: son sentencias que ordenan a una película efectuar alguna accióndurante su reproducción. Por ejemplo, gotoAndStop envía la cabeza lectora a unfotograma o etiqueta determinados.
Argumentos: también llamados parámetros, actúan como contenedores quepermiten pasar valores a las funciones. Por ejemplo, la siguiente función,denominada welcome, utiliza dos valores que recibe como argumentos firstNamey hobby:
function welcome(firstName, hobby) { welcomeText = "Hello, " + firstName + "I see you enjoy " + hobby;}
101
Clases: son un tipo de datos que pueden emplearse para definir un nuevo tipo deobjeto. Para definir una clase de objeto, debe utilizarse una funciónconstructora.
Constantes: son elementos cuyo valor no cambia. Por ejemplo, la constante TABtiene siempre el mismo significado. Las constantes son útiles para compararvalores.
Constructores: son funciones que se utilizan para definir las propiedades ymétodos de una clase. Por ejemplo, el siguiente código crea una nueva claseCircle mediante una función constructora denominada Circle:
function Circle(x, y, radius){this.x = x;this.y = y;this.radius = radius;}
Tipos de datos: son conjuntos de valores y las operaciones que pueden realizarsesobre ellos, e incluyen cadenas, números, los valores booleanos true y false,objetos y clips de película
Clips de película: es el único tipo de datos que hace referencia aelementos gráficos y permite controlar los clips empleados los métodos delobjeto MovieClip . El punto (.) se utilizará para invocar a dichosmétodos.
Objetos: es un grupo de propiedades, cada una de ellas con un nombreidentificador y un valor asociado. Podrá anidar objetos empleando elpunto (.) como separador.
Eventos: son acciones que ocurren durante la reproducción de una película. Porejemplo, cuando se carga un clip de película se generan diferentes eventos: lacabeza lectora accede a un fotograma, el usuario hace clic en un botón o clip depelícula, o el usuario introduce información mediante el teclado.
Expresiones: son las partes de una sentencia que generan valores. Por ejemplo,2 + 2 es una expresión.
Funciones: son bloques de código reutilizables, que aceptan argumentos(parámetros) y pueden devolver valores. Por ejemplo, la función getPropertyacepta como parámetro el nombre de una propiedad y el nombre de instancia deun clip de película y como resultado devuelve el valor de la propiedad. Lafunción getVersion devuelve la versión de Flash Player que está reproduciendo lapelícula en un momento dado.
102
Controladores: son acciones especiales que controlan o administran unevento, como mouseDown o load. Por ejemplo, on (onMouseEvent) y onClipEventson controladores de ActionScript.
Identificadores: son nombres que se utilizan para identificar una variable,propiedad, objeto, función o método. El primer carácter debe ser una letra,símbolo de subrayado (_) o símbolo de dólar ($). Los siguientes caracterespueden ser letras, números, símbolos de subrayado (_) o símbolos de dólar ($).Por ejemplo, firstName es el nombre de una variable.
Instancias: son objetos que pertenecen a una determinada clase. Cada instanciade una clase contiene todas las propiedades y métodos de dicha clase. Todos losclips de película son instancias con propiedades (por ejemplo, _alpha y _visible)y métodos (por ejemplo, gotoAndPlay y getURL) de la clase MovieClip.
Nombres de instancias: son nombres únicos que permiten controlar instancias declips de película a través de scripts. Por ejemplo, un símbolo maestro de laBiblioteca podría llamarse counter y las dos instancias de dicho símbolo que seutilizan en la película podrían nombrarse instancia scorePlayer1 y scorePlayer2.En el siguiente código se utilizan los nombres de instancia para establecer unavariable llamada score en cada instancia de un clip de película:
_root.scorePlayer1.score += 1_root.scorePlayer2.score -= 1
Palabras clave: son palabras reservadas que tienen un significado especial. Porejemplo, var es una palabra clave que se utiliza para declarar variables locales.
Métodos: son funciones que han sido asignadas a un objeto. Una vez que se haasignado una función se puede realizar un llamado a la misma como método deese objeto. Por ejemplo, en el siguiente código, clear se convierte en un métododel objeto controller:
function Reset(){x_pos = 0;x_pos = 0;}controller.clear = Reset;controller.clear();
Objetos: son conjuntos de propiedades; cada objeto posee su propio nombre yvalor. Los objetos permiten acceder a un determinado tipo de información. Porejemplo, el objeto predefinido Date ofrece información procedente del reloj delsistema.
Operadores: son términos que calculan un nuevo valor a partir de uno o másvalores. Por ejemplo, el operador suma (+) suma dos o más valores y arroja comoresultado un nuevo valor.
103
Rutas de destino: son direcciones jerárquicas de nombres de instancias de clipsde película, o bien variables y objetos en una película. Para asignar nombre auna instancia de clip de película se utiliza el panel Instancia. El nombre de laLínea de tiempo principal es siempre _root. Se puede usar una ruta de destinopara dirigir una acción a un clip de película, o para obtener o establecer el valorde una variable. Por ejemplo, la siguiente sentencia establece una ruta dedestino a la variable volume dentro del clip de película stereoControl:
_root.stereoControl.volume
Propiedades: son atributos que definen a un objeto. Por ejemplo, _visible es unapropiedad de todos los clips de película que define si el clip está visible o si seencuentra oculto.
Variables: son identificadores que almacenan valores de cualquier tipo de datos.Las variables pueden crearse, modificarse y actualizarse. Los valoresalmacenados en una variable pueden recuperarse para ser utilizados en scripts.En el siguiente ejemplo, los identificadores situados a la izquierda de los signosigual son variables:
x = 5;name = "Lolo";customer.address = "66 7th Street";c = new Color(mcinstanceName);
III. DICCIONARIO
Sólo contemplaremos los elementos usados en el proyecto y relacionados.
Array.length
SintaxismyArray.length;
ArgumentosNinguno.
DescripciónPropiedad; contiene la longitud de la matriz. Esta propiedad se actualizaautomáticamente cuando se agregan nuevos elementos a la matriz. Durante laasignación myArray[index] = value; si Index es un número y Index+1 es mayor quela propiedad length, la propiedad length se actualiza a Index + 1.
104
ReproductorFlash 5 o posterior.
EjemploEl código siguiente explica como se actualiza la propiedad length.
//initial length is 0myArray = new Array();
//myArray.length is updated to 1myArray[0] = 'a'
//myArray.length is updated to 2myArray[1] = 'b'
//myArray.length is updated to 10myArray[9] = 'c'
Array.push
SintaxismyArray.push(valor,...);
Argumentosvalor Uno o más valores que se anexan a la matriz.
DescripciónMétodo; agrega uno o más elementos al final de una matriz y devuelve la nuevalongitud de la matriz.
ReproductorFlash 5 o posterior.
EjemploEl código siguiente crea la matriz myPets que contiene dos elementos, después leagrega dos elementos. Después de que se ejecute el código, pushed contiene 4.
myPets = ["cat", "dog"];pushed = myPets.push("bird", "fish")
Array.splice
SintaxismyArray.splice(inicio, Cuenta_elim, valor0,valor1...valorN);
105
Argumentosinicio El índice del elemento de la matriz donde comienza la inserción y/o elborrado.
Cuenta_elim El número de elementos que se van a borrar. Este número incluye elelemento especificado en el argumento inicio. Si no se especifica valor paraCuenta_elim, el método borra todos los valores desde el elemento inicio hasta elúltimo elemento de la matriz.
valor Cero o más valores que se van a insertar en la matriz en el punto deinserción especificado en el argumento inicio. Este argumento es opcional.
DescripciónMétodo; agrega y/o elimina elementos de una matriz. Este método modifica lapropia matriz sin hacer una copia.
ReproductorFlash 5 o posterior.
for
Sintaxisfor(inic; condición; siguiente); {sentencia;}
Argumentosinic Una expresión a evaluar antes de que comience la secuencia de bucle,normalmente una expresión de asignación. Una sentencia var también estápermitida para este argumento.
condición Una condición que evalúa como true o false. La condición se evalúaantes de cada repetición del bucle, el bucle sale cuando la condición se evalúacomo false.
siguiente Una expresión a evaluar después de cada repetición del bucle;normalmente se trata de una expresión de asignación que utiliza los operadores++ (incremento) o -- (disminución).
sentencia Una sentencia dentro del cuerpo del bucle que se ejecuta.
DescripciónAcción; una construcción de bucle que evalúa la expresión init (inicializar) unavez y después comienza una secuencia de bucle por medio de la cual, mientrasque la condición evalúe como true, sentencia se ejecuta y se evalúa la siguiente
106
expresión. Algunas propiedades no pueden ser evaluadas por las acciones for ofor...in.
Por ejemplo, los métodos incorporados del objeto Array (Array.sort yArray.reverse) no se incluyen en la enumeración de un objeto Array y laspropiedades de clip de película, como _x y _y, no se enumeran.
ReproductorFlash 5 o posterior.
EjemploEl ejemplo siguiente utiliza for para agregar los elementos de una matriz.
for(i=0; i<10; i++) {array [i] = (i + 5)*10;}
Devuelve la matriz siguiente:[50, 60, 70, 80, 90, 100, 110, 120, 130, 140]
A continuación se muestra un ejemplo de la utilización de for para realizar lamisma acción repetidamente. En el código siguiente el bucle for agrega losnúmeros de 1 a 100.
var sum = 0;for (var i=1; i<=100; i++) {sum = sum + i;}
function
Sintaxisfunction nombre_func ([argumento0, argumento1,...argumentoN]){sentencia(s)}
function ([argument0, argumento1,...argumentoN]){sentencia(s)}
Argumentosnombre_func El nombre de la nueva función.
argumento Cero o más cadenas, números u objetos para pasar a la función.
sentencias Cero o más sentencias de ActionScript que ha definido para el cuerpode la función.
107
DescripciónAcción; un conjunto de sentencias que define para realizar una determinadatarea. Puede declarar o definir una función en una ubicación y llamarla, oinvocarla, desde diferentes scripts de una película. Cuando defina una función,también puede especificar argumentos para la función. Los argumentos sonmarcadores de lugar para los valores sobre los que operarán las funciones. Puedepasar diferentes argumentos a una función, también llamados parámetros, cadavez que la llame. Utilice la acción return en la sentencia de una sentencia(s)función para hacer que la función devuelva, o genere, un valor.
Sintaxis 1: Declara una función con el especificado nombre_func, argumentos ysentencia(s). Cuando se llama a una función, se invoca la declaración de función.Se permite la referencia hacia delante; dentro de la misma lista de Acciones,puede declararse una función después de que ha sido llamada. Una declaraciónde función sustituye a cualquier declaración anterior de la misma función. Puedeutilizar esta sintaxis siempre que esté permitido un argumento.
Sintaxis 2: Crea una función anónima y la devuelve. Esta sintaxis se utiliza enexpresiones y es muy útil para instalar métodos en objetos.
ReproductorFlash 5 o posterior.
Ejemplo(Sintaxis 2) El ejemplo siguiente define la función sqr, que acepta un argumentoy devuelve el square(x*x) del argumento. Observe que la función se declara yutiliza en el mismo script, la declaración de función puede aparecer tras lautilización de la función.
y=sqr(3);function sqr(x) {return x*x;}
(Sintaxis 2) El ejemplo siguiente define un objeto Círculo:
function Circle(radius) {this.radius = radius;}
getTimer
SintaxisgetTimer();
108
ArgumentosNinguno.
DescripciónFunción; devuelve el número de milisegundos que han transcurrido desde que lapelícula comenzó a reproducirse.
ReproductorFlash 4 o posterior.
gotoAndPlay
SintaxisgotoAndPlay(escena, fotograma);
Argumentosescena El nombre de escena a la que se envía la cabeza lectora.
fotograma El número de fotograma al que se envía la cabeza lectora.
DescripciónAcción; envía la cabeza lectora al fotograma especificado en una escena yreproduce a partir de ese fotograma. Si no se especifica escena, la cabezalectora va el fotograma especificado en la escena actual.
ReproductorFlash 2 o posterior.
EjemploCuando el usuario hace clic sobre un botón la acción gotoAndPlay se asigna,se envía la cabeza lectora al fotograma 16 y comienza a reproducirse.
on(release) {gotoAndPlay(16);}
gotoAndStop
SintaxisgotoAndStop(escena, fotograma);
Argumentosescena El nombre de escena a la que se envía la cabeza lectora.
fotograma El número de fotograma al que se envía la cabeza lectora.
109
DescripciónAcción; envía la cabeza lectora al fotograma especificado en una escena y lodetiene. Si no se especifica ninguna escena, la cabeza lectora se envía alfotograma en la escena actual.
ReproductorFlash 2 o posterior.
EjemploCuando el usuario hace clic sobre un botón la acción gotoAndStop se asigna,se envía la cabeza lectora al fotograma 5 y deja de reproducirse.on(release) {gotoAndStop(5);}
if
Sintaxisif(condición) {sentencia;}
Argumentoscondición Una expresión que evalúa como true o false. Por ejemplo, if(name =="Erica"), evalúa la variable name para ver si es "Erica".
sentencia Las instrucciones que se deben ejecutar si o cuando la condiciónevalúa como true.
DescripciónAcción; evalúa una condición para determinar la siguiente acción en unapelícula. Si la condición es true, Flash ejecuta la sentencia que va acontinuación. Utilice if parta crear lógica de ramas en sus scripts.
ReproductorFlash 4 o posterior.
ifFrameLoaded
SintaxisifFrameLoaded(scene, fotograma) {sentencia;}
ifFrameLoaded(fotograma) {sentencia;}
110
Argumentosescena La escena que se está consultando.
fotograma El número o etiqueta de fotograma que se va a cargar antes de que seejecute la sentencia siguiente.
DescripciónAcción; comprueba si el contenido de un fotograma específico está disponiblelocalmente. Utilice ifFrameLoaded para empezar a reproducir una animaciónsencilla mientras que se descarga el resto de la película en el sistema local. Ladiferencia entre utilizar _framesloaded y ifFrameLoaded es que _framesloaded lepermite agregar sentencias if, o else, mientras que la acción ifFrameLoaded lepermite especificar un número de fotogramas en una sentencia sencilla.
ReproductorFlash 3 o posterior. La acción ifFrameLoaded se ha desestimado en Flash 5; serecomienda la utilización de la acción _framesloaded.
int
Sintaxisint(valor);
Argumentosvalor Un número que se va a redondear en un número entero.
DescripciónFunción; convierte un número decimal en su valor de número entero máscercano.
ReproductorFlash 4 o posterior. Esta función se ha desestimado en Flash 5; se recomienda lautilización del método Math.floor.
Key (objeto)
El objeto Key es un objeto de nivel superior al que puede acceder sin utilizar unconstructor. Utilice los métodos del objeto Key para crear una interfaz quepueda ser controlada por cualquier usuario con un teclado estándar. Laspropiedades del objeto Key son constantes que representan las teclas que seutilizan con mayor frecuencia para controlar juegos.
EjemploonClipEvent (enterFrame) {if(Key.isDown(Key.RIGHT)) {setProperty ("", _x, _x+10);
111
}}oronClipEvent (enterFrame) {if(Key.isDown(39)) {setProperty("", _x, _x+10);}}
Resumen de las propiedades de un objeto KeyTodas las propiedades del objeto Key son constantes.
Propiedad DescripciónBACKSPACE Constante asociada con el valor del código de tecla para la
tecla Retroceso (9).
CAPSLOCK Constante asociada con el valor del código de tecla para latecla Bloq Mayús (20).
CONTROL Constante asociada con el valor del código de tecla para latecla Control (17).
DELETEKEY Constante asociada con el valor del código de tecla para latecla Supr (46).
DOWN Constante asociada con el valor del código de tecla para latecla Flecha abajo (40).
END Constante asociada con el valor del código de tecla para latecla Fin (35).
ENTER Constante asociada con el valor del código de tecla para latecla Intro (13).
ESCAPE Constante asociada con el valor del código de tecla para latecla Escape (27).
HOME Constante asociada con el valor del código de tecla para latecla Inicio (36).
INSERT Constante asociada con el valor del código de tecla para latecla Insert (45).
LEFT Constante asociada con el valor del código de tecla para latecla Flecha izquierda (37).
PGDN Constante asociada con el valor del código de tecla para latecla Av Pág (34).
112
PGUP Constante asociada con el valor del código de tecla para latecla Re Pág (33).
RIGHT Constante asociada con el valor del código de tecla para latecla Flecha derecha (39).
SHIFT Constante asociada con el valor del código de tecla para latecla Mayús (16).
SPACE Constante asociada con el valor del código de tecla para laBarra espaciadora (32).
TAB Constante asociada con el valor del código de tecla para latecla Tabulador (9).
UP Constante asociada con el valor del código de tecla para latecla Flecha arriba (38).
length
Sintaxislength(expresión);length(variable);
Argumentosexpresión Cualquier cadena.
variable El nombre de una variable.
DescripciónFunción de cadena; devuelve la longitud de la cadena o nombre de variableespecificado.
ReproductorFlash 4 o posterior. Esta función, junto con todas las funciones de cadena se hadesestimado en Flash 5. Se le recomienda que utilice los métodos y la propiedadlength del objeto String para realizar las mismas operaciones.
EjemploEl ejemplo siguiente devuelve el valor de la cadena Hello:
length("Hello")
El resultado es 5.
113
loadMovie
SintaxisloadMovie(url [,ubicación/destino, variables]]);
Argumentosurl Una URL absoluta o relativa para el archivo SWF que se va a cargar. Una rutarelativa debe ser relativa respecto al SWF. La URL debe estar en el mismosubdominio que la URL donde reside actualmente la película. Para utilizarlos enFlash Player o para realizar pruebas en el modo de prueba de película en elentorno de creación de Flash, todos los archivos SWF tienen que guardarse en lamisma carpeta y los nombres de archivo no pueden incluir especificaciones decarpeta ni de unidad de disco.
destino Un argumento opcional que especifica un clip de película de destino quese sustituirá con la película cargada. La película cargada hereda las propiedadesde posición, rotación y escala del clip de película de destino. Especificar destinoes lo mismo que especificar el (nivel) ubicación de una película de destino, nodebería especificar ambos.
ubicación Un argumento opcional que especifica el nivel en el que la películaestá cargada. La película cargada hereda las propiedades de posición, rotación yescala del clip de película de destino. Para cargar una nueva película además delas películas existentes, especifique un nivel que no esté ocupado por otrapelícula. Para sustituir una película existente con la película cargada,especifique un nivel que esté actualmente ocupado por otra película. Parasustituir la película original y descargar todos los niveles, cargue la nuevapelícula en el nivel 0. La película del nivel 0 establece la velocidad de losfotogramas, el color de fondo y el tamaño de los fotogramas de todas las demáspelículas cargadas.variables Un argumento opcional que especifica un método para enviar variablesasociadas con la película que se va a cargar. El argumento debe ser la cadenaGET o POST . Si no hay variables, omita este argumento; en caso contrario,
especifique si se cargan las variables utilizando un método GET o POST. GETanexa las variables al final de la URL y se utiliza para un número pequeño devariables. POST envía las variables en un encabezado HTTP aparte y se utilizapara cadenas largas de variables.
DescripciónAcción; reproduce películas adicionales sin cerrar Flash Player. Por lo general,Flash Player muestra una sola película de Flash Player (archivo SWF) y después secierra. La acción loadMovie permite ver varias películas al mismo tiempo ocambiar entre películas sin cargar otro documento HTML. Puede cargar películasen los niveles que ya tienen archivos SWF cargados. Al hacerlo, la nueva películasustituye al archivo SWF existente. Si carga una nueva película en el nivel 0,todos los niveles se descargarán y el nivel 0 se sustituirá por el nuevo archivo.Utilice la acción loadVariables para mantener la película activa y actualizar las
114
variables con nuevos valores. Utilice la acción unloadMovie para eliminarpelículas cargadas con la acción loadMovie.
ReproductorFlash 3 o posterior.
EjemploEsta sentencia loadMovie está anexada a un botón de navegación con la etiquetaProductos. Hay un clip de película invisible en el Escenario con el nombre deinstancia dropZone. La acción loadMovie utiliza este clip de película comoparámetro de destino para cargar los productos del archivo SWF, en la posicióncorrecta del Escenario.
on(release) {loadMovie("products.swf",_root.dropZone);}
Matemáticas (objeto)El objeto Math es un objeto de nivel superior al que puede acceder sin utilizar unconstructor. Utilice los métodos y propiedades de este objeto para acceder ymanipular constantes y funciones matemáticas. Todas las propiedades y métodosdel objeto Math son estáticos y deben llamarse utilizando la sintaxisMath.method(argumento) o Math.constant. En ActionScript, las constantes sedefinen con la máxima precisión de números con coma flotante IEEE-754 dedoble precisión. El objeto Math está admitido por completo en Flash Player 5. EnFlash Player 4, los métodos del objeto Math funcionan, pero se emulan usandoaproximaciones y es posible que no sean tan precisos como las funcionesmatemáticas no emuladas que soporta Flash Player 5. Algunos de los métodos delobjeto Math toman el radián de un ángulo como argumento. Puede utilizar laecuación siguiente para calcular valores de radianes o sencillamente pase laecuación (introduciendo un valor para grados) para el argumento radián. Paracalcular un valor de radián, utilice esta fórmula:
radián = Math.PI/180 * grado
A continuación se muestra un ejemplo de pasar una ecuación como argumentopara calcular el seno de un ángulo de 45 grados:
Math.SIN(Math.PI/180 * 45) es lo mismo que Math.SIN(.7854)
Resumen de los métodos del objeto Math
Método Descripción
atan2 Calcula un ángulo desde el eje x hasta el punto.
115
floor Redondea un número al entero más cercano hacia abajo.
Resumen de las propiedades de un objeto MathTodas las propiedades del objeto Math son constantes.
Propiedad Descripción
PI La relación entre la circunferencia de un círculo y su diámetro(aproximadamente 3,14159).
MovieClip.attachMovie
SintaxisanyMovieClip.attachMovie(id_Nombre, nuevo_nombre, profundidad);
Argumentosid_Nombre El nombre de la película de la biblioteca que se va a anexar. Este esel nombre introducido en el campo identificador en el cuadro de diálogoPropiedades de vínculos de símbolos. nuevo_nombre Un nombre de instanciaúnico para el clip de película que se está anexando.
profundidad Un número entero que especifica el nivel de profundidad en el queestá la película.
DescripciónMétodo; crea un nuevo nombre de instancia de una película de la biblioteca y leanexa a la película especificada por anyMovieClip. Utilice la acción o métodoremoveMovieClip o unloadMovie para eliminar una película anexada conattachMovie.
ReproductorFlash 5 o posterior.
MovieClip.hitTest
SintaxisanyMovieClip.hitTest(x, y, indicador_forma);anyMovieClip.hitTest(destino);
Argumentosx La coordenada x de la zona activa en el Escenario.y La coordenada y de la zona activa en el Escenario.
Las coordenadas x e y se definen en el espacio de coordenadas global.
116
destino La ruta de destino de la zona activa que puede cruzarse o solaparse conla instancia especificada por anyMovieClip. destino normalmente representa unbotón o un campo de introducción de texto.
indicador_forma Un valor Booleano que especifica si se evalúa toda la forma dela instancia especificada (true), o solamente la delimitación (false). Esteargumento sólo puede especificarse si la zona activa se identifica utilizando losargumentos de coordenadas x e y.
DescripciónMétodo; evalúa la instancia especificada por anyMovieClip para ver si se solapa ocruza con la zona activa identificada por los argumentos de coordenadas destinoo x e y. La Sintaxis 1 compara las coordenadas x e y con la forma o ladelimitación de la instancia especificada, según la configuración deindicador_forma. Si indicador_forma está establecido en true, solamente el áreaocupada actualmente por la instancia en el Escenario se evalúa y si x e y sesolapan en algún punto, se devuelve un valor de true. Esto es muy útil paradeterminar si el clip de película se encuentra dentro de la zona activa o puntocaliente especificado. La Utilización 2 evalúa las delimitaciones de destino y dela instancia especificada y devuelve true si se solapan o cruzan en cualquierpunto.
ReproductorFlash 5 o posterior.
nextFrame
SintaxisnextFrame();
ArgumentosNinguno.
DescripciónAcción; envía la cabeza lectora al fotograma siguiente y la detiene.
ReproductorFlash 2 o posterior.
EjemploCuando el usuario hace clic sobre un botón la acción nextFrame se asigna, seenvía la cabeza lectora al fotograma siguiente.
on (release) {nextFrame(5);}
117
onClipEvent
SintaxisonClipEvent(movieEvent);{...}
ArgumentosUna movieEvent es un evento desencadenante que ejecuta acciones que estánasignadas a una instancia de clip de película. Cualquiera de los valores siguientespueden especificarse para el argumento movieEvent.
load La acción se inicia en cuanto se instancia el clip de película y aparece enla Línea de tiempo.
unload La acción se inicia en el primer fotograma después de que se haeliminado el clip de película de la Línea de tiempo. Estas acciones estánasociadas con el evento de clip de película Unload se procesan antes quecualquiera de las acciones anexadas al fotograma afectado.
enterFrame La acción se inicia según se reproduce cada fotograma, es similar alas acciones anexadas a un clip de película. Estas acciones están asociadas con elevento de clip de película OnEnterFrame se procesan después que cualquiera delas acciones anexadas a los fotogramas afectados.
mouseMove La acción se inicia cada vez que se mueve el ratón. Utilice laspropiedades _xmouse y _ymouse para determinar la posición actual del ratón.
mouseDown La acción se inicia cada vez que se presiona el botón izquierdo delratón.
mouseUp La acción se inicia cada vez que se suelta el botón izquierdo delratón.
keyDown La acción se inicia cuando se presiona una tecla. Utilice el métodoKey.getCode para recuperar información sobre la última tecla presionada.
keyUp La acción se inicia cuando se suelta una tecla. Utilice el métodoKey.getCode para recuperar información sobre la última tecla presionada.
data La acción se inicia cuando se reciben datos en una acción loadVariables oloadMovie. Cuando se especifica con una acción loadVariables, el evento data seproduce una sola vez, cuando se carga la última variable. Cuando se especificacon una acción loadMovie, el evento data se produce repetidamente, según serecupera cada sección de datos.
118
DescripciónControlador; desencadena acciones para una instancia específica de un clip depelícula.
ReproductorFlash 5 o posterior.
EjemploLa sentencia siguiente incluye el script de un archivo externo cuando se carga lainstancia del clip de película y aparece por primera vez en la Línea de tiempo.
onClipEvent(load) {#include "myScript.as"}
El ejemplo siguiente utiliza onClipEvent con el evento de película keyDown. Elevento de película keyDown se utiliza habitualmente junto con uno o másmétodos y propiedades asociadas con el objeto Key. En el script siguiente,key.getCode se utiliza para averiguar que tecla ha presionado el usuario, el valordevuelto se asocia con las propiedades RIGHT o LEFT del objeto Key y la películase dirige en consecuencia.
onClipEvent(keyDown) {if (Key.getCode() == Key.RIGHT) {} _parent.nextFrame();else if (Key.getCode() == Key.LEFT){_parent.prevFrame();}
El ejemplo siguiente utiliza onClipEvent con el evento de película mouseMove.Las propiedades xmouse y ymouse realizan un seguimiento de la posición delratón.
onClipEvent(mouseMove) {stageX=_root.xmouse;stageY=_root.ymouse;}
on(mouseEvent)
Sintaxison(mouseEvent) {sentencia;}
Argumentossentencia Las instrucciones que se van a ejecutar cuando tiene lugarmouseEvent.
119
Una acción mouseEvent puede tener uno de los siguientes argumentos:
press Se ha presionado el botón del ratón mientras el puntero se encuentrasobre el botón.
release Se ha soltado el botón del ratón mientras el puntero se encuentra sobreel botón.
releaseOutside Se ha soltado el botón del ratón mientras el puntero seencuentra fuera del botón.
rollOver El puntero del ratón se sitúa sobre el botón.
rollOut El puntero se sitúa sobre el área del botón.
dragOver Mientras el puntero se encuentra sobre el botón se ha presionado elbotón del ratón, se ha situado fuera del botón y a vuelto a situarse sobrem elbotón.
dragOut Mientras el puntero se encuentra sobre el botón se ha presionado elbotón del ratón y después se sitúa fuera del área del botón.
keyPress ( tecla ) La tecla especificada se ha presionado.
DescripciónControlador; especifica el evento de ratón o las presiones de tecla quedesencadenan una acción.
ReproductorFlash 2 o posterior.
EjemploEn el script siguiente, la acción startDrag se ejecuta cuando se presiona el ratóny el script condicional se ejecuta cuando se suelta el ratón y se suelta el objeto.
on(press) {startDrag("rabbit");}on(release) {if(getproperty("", _droptarget) == target) {setProperty ("rabbit", _x, _root.rabbit_x);setProperty ("rabbit", _y, _root.rabbit_y);} else {_root.rabbit_x = getProperty("rabbit", _x);_root.rabbit_y = getProperty("rabbit", _y);_root.target = "pasture";}trace(_root.rabbit_y);trace(_root.rabbit_x);
120
stopDrag();}
_parent
Sintaxis_parent.propiedad = x_parent._parent.propiedad = x
Argumentospropiedad La propiedad que se especifica para el clip de película actual y para elprincipal. x El valor establecido para la propiedad. Este es un argumentoopcional y puede que no necesite establecerlo en la propiedad.
DescripciónPropiedad; especifica o devuelve una referencia al clip de película que contieneel clip de película actual. El clip de película actual es el clip de película quecontiene los scripts que se están ejecutando actualmente. Utilice _parent paraespecificar una ruta de acceso relativa.
ReproductorFlash 4 o posterior.
EjemploEn el ejemplo siguiente el clip de película desk es un elemento secundario delclip de película classroom. Cuando el script siguiente se ejecuta dentro del clipde película desk, la cabeza lectora saltará al fotograma 10 de la Línea de tiempodel clip de película classroom.
_parent.gotoAndStop(10);
play
Sintaxisplay();
ArgumentosNinguno.
DescripciónAcción; desplaza la cabeza lectora hacia delante en la Línea de tiempo.
ReproductorFlash 2 o posterior.
121
EjemploEl código siguiente utiliza la sentencia if para comprobar el valor de un nombreque introduce el usuario. Si el usuario introduce Steve, se llama a la acción playy la cabeza lectora avanza en la Línea de tiempo. Si el usuario introducecualquier cosa diferente de Steve, la película no se reproduce y aparece uncampo de texto con el nombre de variable alert.
stop();if (name = "Steve") {play();} else {alert = "You are not Steve!";}
random
Sintaxisrandom();
Argumentosvalor El número entero mayor para el que random devolverá un valor.
DescripciónFunción; devuelve un número entero aleatorio entre 0 y el número enteroespecificado en el argumento valor.
ReproductorFlash 4. Esta función se ha desestimado en Flash 5; se recomienda la utilizacióndel método Math.random.
EjemploLa utilización de random que se muestra a continuación devuelve un valor de 0,1, 2, 3 o 4.
random(5);
removeMovieClip
SintaxisremoveMovieClip(destino);
Argumentosdestino La ruta de destino de una instancia de clip de película creada conduplicateMovieClip, o el nombre de instancia de un clip de película creado conlos métodos attachMovie o duplicateMovie del objeto MovieClip.
122
DescripciónAcción; elimina una instancia de clip de película creada con los métodosattachMovie o duplicateMovieClip del objeto MovieClip o con la acciónattachMovie.
ReproductorFlash 4 o posterior.
_root
Sintaxis_root;_root.movieClip;_root.acción;
ArgumentosmovieClip El nombre de instancia de un clip de película.
acción El valor establecido para la propiedad. Este es un argumento opcional ypuede que no necesite establecerlo en la propiedad.
DescripciónPropiedad; especifica o devuelve una referencia a la Línea de tiempo de lapelícula raíz. Si una película tiene varios niveles, la Línea de tiempo de lapelícula raíz está en el nivel que contiene el script que se está ejecutandoactualmente. Por ejemplo, si un script en el nivel 1 evalúa _root, se devuelve elnivel 1. Especificar _root es lo mismo que utilizar la notación de barras / paran especificar una ruta relativa dentro del nivel actual.
ReproductorFlash 4 o posterior.
EjemploEl ejemplo siguiente detiene la Línea de tiempo del nivel que contiene el scriptque se está ejecutando actualmente.
_rootl.stop();
El ejemplo siguiente envía la Línea de tiempo del nivel actual al fotograma 3.
_root.gotoAndStop(3);
123
_rotation
Sintaxisnombre_instancia._rotationnombre_instancia._rotation = entero
Argumentosentero El número de grados que se va a girar el clip de película.
nombre_instancia El clip de película que se va a girar.
DescripciónPropiedad; especifica la rotación del clip de película en grados.
ReproductorFlash 4 o posterior.
Sound (objeto)El objeto Sound le permite establecer y controlar los sonidos de una instancia declip de película particular, o para la Línea de tiempo global, si no especifica undestino cuando crea un nuevo objeto Sound. Debe utilizar el constructor newSound para crear una instancia del objeto Sound antes de llamar a los métodosdel objeto Sound.
Constructor del objeto Sound.
Sintaxisnew Sound();new Sound(destino);
Argumentosdestino La instancia del clip de película a la que se aplica el objeto Sound.Este argumento es opcional.
DescripciónMétodo; crea un nuevo objeto Sound para un clip de película especificado. Si noespecifica un destino, el objeto Sound controla todos los sonidos de la Línea detiempo global.
ReproductorFlash 5 o posterior.
Ejemplo
GlobalSound = new Sound();MovieSound = new Sound(mymovie);
124
Sound.attachSound
SintaxismySound.attachSound("idName");
ArgumentosidName El nombre de la nueva instancia del sonido. Este es el mismo nombreintroducido en el identificador en el cuadro de diálogo Propiedades de vínculosde símbolos. Este argumento debe aparecer encerrado entre " " (comillas).
DescripciónMétodo; anexa el sonido especificado en el argumento idName al objeto Soundespecificado. El sonido debe estar en la biblioteca de la película actual y debeestar especificado para la exportación en el cuadro de diálogo Propiedades devínculos de símbolos. Debe llamar a Sound.start para comenzar a reproducir elsonido.
ReproductorFlash 5 o posterior.
Sound.start
SintaxismySound.start();mySound.start([segundo_desplaz, bucle]);
segundo_desplaz Un argumento opcional que le permite comenzar a reproducir elsonido en un punto específico. Por ejemplo, si tiene un sonido de 30 segundos ydesea que el sonido comience a reproducirse a la mitad, especifique 15 para elargumento segundo_desplaz. El sonido no se retrasa 15 segundos, sino quecomienza a reproducirse en la marca de 15 segundos.
bucle Un argumento opcional que le permite especificar el número de veces queel sonido debe realizar un bucle.
DescripciónMétodo; comienza a reproducir el último sonido anexado, desde el principio si nose especifican argumentos o comenzando en el punto del sonido especificado porel argumento segundo_desplaz.
ReproductorFlash 5 o posterior.
125
stop
Sintaxisstop;
ArgumentosNinguno.
DescripciónAcción; detiene el clip de película que se está reproduciendo actualmente. Lautilización más corriente de esta acción es para controlar los clips de películacon botones.
ReproductorFlash 3 o posterior.
this
Sintaxisthis
ArgumentosNinguno.
DescripciónPalabra clave; hace referencia a una instancia de objeto o de clip de película. Lapalabra clave this tiene el mismo objetivo y función en ActionScript que enJavaScript, con algunas funciones adicionales. En ActionScript, cuando se ejecutaun script, this hace referencia a la instancia de clip de película que contiene elscript. Cuando se utiliza con una invocación de método, this contiene unareferencia al objeto que contiene el método ejecutado.
ReproductorFlash 5 o posterior.
EjemploEn el ejemplo siguiente, la palabra clave this hace referencia al objeto Círculo.
function Circle(radius){this.radius = radius;this.area = math.PI * radius * radius;}
En la sentencia siguiente asignada a un fotograma, la palabra clave this hacereferencia al clip de película actual.
//sets the alpha property of the current movie clip to 20.this._alpha = 20;
126
En la sentencia siguiente dentro de un controlador onClipEvent, la palabra clavethis hace referencia al clip de película actual.
//when the movie clip loads, a startDrag operation is initiated for the current //movie clip.onClipEvent (load) {startDrag (this, true);}
updateAfterEvent
SintaxisupdateAfterEvent(movie clip event);
Argumentosmovie clip event Puede especificar uno de los valores siguientes como un eventode clip de película:
mouseMove La acción se inicia cada vez que se mueve el ratón. Utilice laspropiedades _xmouse y _ymouse para determinar la posición actual del ratón.
mouseDown La acción se inicia si se presiona el botón izquierdo del ratón.
mouseUp La acción se inicia si se suelta el botón izquierdo del ratón.
keyDown La acción se inicia cuando se presiona una tecla. Utilice el métodoKey.getCode para recuperar información sobre la última tecla presionada.
keyUp La acción se inicia cuando se suelta una tecla. Utilice el métodokey.getCode para recuperar información sobre la última tecla presionada.
DescripciónAcción; actualiza la visualización (independientemente de los fotogramas porsegundo establecidos para la película) después de que se haya completado elevento de clip especificado en los argumentos. Esta acción no aparece en la listadel panel Acciones de Flash. Utilizando updateAfterEvent con acciones dearrastre que especifican las propiedades _x y _y durante el movimiento delratón, permite arrastrar los objetos suavemente sin el efecto de parpadeo de lapantalla.
ReproductorFlash 5 o posterior.
127
while
Sintaxiswhile(condición) {sentencia(s);}
Argumentoscondición La sentencia que se vuelve a evaluar cada vez que se ejecuta la acciónwhile. Si la sentencia evalúa como true, se ejecuta la expresión de lasentencia(s).
sentencia(s) La expresión que se ejecutará si la condición evalúa como true.DescripciónAcción; ejecuta una sentencia o una serie de sentencias repetidamente en unbucle mientras que el argumento de la condición es true. Al final de cada acciónwhile, Flash reinicia el bucle volviendo a comprobar la condición. Si la condiciónes false o igual a 0, Flash se salta la primera sentencia después de la acciónwhile. Los bucles se utilizan con frecuencia para realizar una acción mientrasque una variable de contador es menor que un valor especificado. Al final decada bucle, el contador se incrementa, hasta que se alcanza el valor umbral, lacondición ya no es true y el bucle finaliza.
ReproductorFlash 4 o posterior.
EjemploEste ejemplo duplica cinco clips de película en el Escenario, cada uno con unaposición x e y generadas aleatoriamente, xscale y yscale y la propiedad _alphapara conseguir un efecto de dispersión. La variable foo se inicializa con el valor0. El argumento condición está establecido de tal modo que el bucle while seejecuta cinco veces o mientras que el valor de la variable foo es menor que 5.Dentro del bucle while, se duplica un clip de película y se utiliza setPropertypara ajustar las diferentes propiedades del clip de película duplicado. La últimasentencia del bucle incrementa foo de modo que cuando el valor llega a 5, elargumento condición evalúa como false y el bucle no se ejecutará.
on(release) {foo = 0;while(foo < 5) {duplicateMovieClip("/flower", "mc" + foo, foo);setProperty("mc" + foo, _x, random(275));setProperty("mc" + foo, _y, random(275));setProperty("mc" + foo, _alpha, random(275));setProperty("mc" + foo, _xscale, random(200));setProperty("mc" + foo, _yscale, random(200));foo = foo + 1;}}
128
_x
Sintaxisnombre_instancia._xnombre_instancia._x = entero
Argumentosentero La coordenada local x de la película.
nombre_instancia El nombre de una instancia de clip de película.
DescripciónPropiedad; establece la coordenada x de la película relativa a las coordenadaslocales del clip de película principal. Si un clip de película está en la Línea detiempo principal, su sistema de coordenadas hace referencia a la esquinasuperior izquierda del Escenario como (0, 0). Si el clip de película se encuentradentro de otro clip de película que tiene transformaciones, el clip de películaestá en el sistema de coordenadas local del clip de película que lo contiene. Así,para un clip de película girado 90 grados en sentido contrario a las agujas delreloj, el clip de película secundario hereda un sistema de coordenadas girado 90grados en sentido contrario a las agujas del reloj. Las coordenadas del clip depelícula hacen referencia a la posición del punto de registro.
ReproductorFlash 3 o posterior.
_xmouse
Sintaxisnombre_instancia._xmouse
Argumentosnombre_instancia El nombre de una instancia de clip de película.
DescripciónPropiedad (de sólo lectura); devuelve la coordenada x de la posición del ratón.
ReproductorFlash 5 o posterior.
_y
Sintaxisnombre_instancia._ynombre_instancia._y = entero;
129
Argumentosentero La coordenada local y del clip de película.
nombre_instancia El nombre de una instancia de clip de película.
DescripciónPropiedad; establece la coordenada y de la película en relación a lascoordenadas locales del clip de película principal. Si un clip de película está enla Línea de tiempo principal, su sistema de coordenadas hace referencia a laesquina superior izquierda del Escenario como (0, 0). Si el clip de película seencuentra dentro de otro clip de película que tiene transformaciones, el clip depelícula está en el sistema de coordenadas local del clip de película que locontiene. Así, para un clip de película girado 90 grados en sentido contrario a lasagujas del reloj, el clip de película secundario hereda un sistema de coordenadasgirado 90 grados en sentido contrario a las agujas del reloj. Las coordenadas delclip de película hacen referencia a la posición del punto de registro.
ReproductorFlash 3 o posterior.
_ymouse
Sintaxisnombre_instancia._ymouse
Argumentosnombre_instancia El nombre de una instancia de clip de película.
DescripciónPropiedad (de sólo lectura); indica la coordenada y de la posición del ratón.
ReproductorFlash 5 o posterior.
130
BIBLIOGRAFÍA
1. CROS Ferrándiz, Jordi, Flash 5 Curso de Iniciación- Ed. Infoorbook´s, S.LBarcelona, España, 1ª edición 2001.
2. FENCZIK Peter, Rosana Francescato, Ann Szabla, Macromedia® FLASH 5Utilización de Flash- Ed. Macromedia, Inc. San Francisco, CA 94103 (EE.UU.)
1a edición Septiembre 2000.
3. FENCZIK Peter, Rosana Francescato, Ann Szabla, Macromedia® FLASH 5 -Guíade Consulta de ActionScript- Ed. Macromedia, Inc. San Francisco, CA 94103(EE.UU.) 1a edición Septiembre 2000.
4. KRIESINGER, Petra, -Macromedia ® FlashTM 5- Ed. Boixareu 2001.
5. VIDAL, Ma. Del Carmen y Jaime Peñal, Flash MX Práctico Guía de Aprendizaje-Ed. Mc Graw Hill 2002.
WEB-GRAFÍA
Página principal de Macromedia Flash, en ella encontraremos muchos ejemplos.http://www.macromedia.com
Página con buenos tutoriales, sobre varias versiones de Flash.http://www.ultrashock.com/
En está página podemos encontrar varios artículos, tips y tutoriales sobre Flash.http://scriptsearch.com/Flash/
Página dedicada no sólo a la programación en ActionScript, tiene de todoreferente a Flash de Macromediahttp://www.actionscript.com
Nos ofrece una cantidad no muy grande de ejemplos hechos con Flash.http://www.flash-db.com/Tutorials/
Aparte de enseñar otros lenguajes y programas, nos ofrece un directorio decursos mostrándonos muchas ligas.http://www.aulaclic.net/cursos/mostrar.php?id=17&texto=Flash
![EL SAGRARIO METROPOLITANO, WENDEL DIETTERLIN, AND THE … · 2012. 6. 18. · EL SAGRARIO METROPOLITANO, ETC. 327 [because (2)] ornamenting the walls was more important than defining](https://static.documents.pub/doc/80x56/60d67c922736550cad0377d6/el-sagrario-metropolitano-wendel-dietterlin-and-the-2012-6-18-el-sagrario.jpg)
