LEGALES
Programación con Flash Flash CS4/CS5 International Standards Autor: Carlos Zepeda Chehaibar Apoyo en actualización: Miguel Pérez Martínez Guillermo Larios Director del Libro: Carlos Zepeda Chehaibar Coordinación Editorial: Abraham Lule Oyervides Diseño Gráfico y editorial: Héctor Mendoza Suárez Abraham Lule Oyervides Guillermo Larios
Revisión de edición: Alfredo Salazar de la Vega Ilustración de portada: Ángel Gabriel Herrera Medina Jesús Arteaga Duarte
Editado por Grupo Educare S.A. de C.V. Av. San Mateo Nopala No. 96 Colonia Occipaco Naucalpan, Estado de México. C.P. 53250 ISBN 978-607-7642-64-0 1a. Edición Impreso en México, D. F. Abril 2011 Printed in Mexico
DERECHOS RESERVADOS © 2011 MMXI por Grupo Educare S. A. de C. V. Ésta es una obra protegida por las leyes internacionales de derechos de autor. Prohibida la reproducción total o parcial de esta obra y/o los recursos que la acompañan, por cualquier medio, sin autorización escrita de Grupo Educare S. A. de C. V. Grupo Educare, el logotipo de Grupo Educare, el logotipo del Programa de Informática Educativa, son propiedad de Grupo Educare S. A. de C. V. El diseño editorial y contenidos gráficos son propiedad exclusiva de Grupo Educare S.A. de C.V. Todos los nombres de empresas, productos, direcciones y nombres propios contenidos en esta obra, forman parte de ejemplos ficticios, a menos que se indique lo contrario. Las citas, imágenes y videogramas utilizados en esta obra se utilizan únicamente con fines didácticos, y para la crítica e investigación científica o artística, por lo que el autor y Grupo Educare S. A. de C. V. no asumen ninguna responsabilidad por el uso que se dé a esta información, ni infringen derecho de marca alguno, en conformidad al Artículo 148 de la Ley Federal del Derecho de Autor. Microsoft Office, MS DOS, MS Windows, Word, PowerPoint, Excel, FrontPage, Access y sus logotipos son marcas comerciales de Microsoft Corporation. Microsoft y el logo de Microsoft Office son marcas registradas de Microsoft Corporation en los Estados Unidos y/o en otros países. Microsoft no patrocina, endosa o aprueba esta obra. Flash, Illustrator, Fireworks, Freehand, Dreamweaver, Photoshop y sus logotipos son marcas registradas de Adobe Inc. Adobe no patrocina o endosa esta obra.
CONTENIDO
Programación con Flash CS4 / CS5 International Standards Propuesta Didáctica
7
Introducción a ActionScript ActionScript en Keyframes MID 01. Acciones en Keyframes Actividad 01. Agregando ActionScript a los Keyframes
13 14 16 17
ActionScript en botones MID 02. Acciones en botones Actividad 02. Identificando acciones Actividad 03. Programando un menú de Flash
18 20 20 21
ActionScript en MovieClips 24 MID 03. ActionScript en MovieClips 25 Actividad 04. Identificando eventos 26 Nombrar instancias 27 Actividad 05. Nombrando instancias 28 29 Sintaxis de punto Operadores 30 Operadores de Asignación 30 Operadores Aritméticos 31 Operadores de Comparación 31 32 Actividad 06. Reconociendo operadores Actividad 07. Modificando propiedades con ActionScript 33 Control de líneas de tiempo Actividad 08. Controlando la bicicleta
36 39
Variables 41 Actividad 09. Declarando variables 42 Ámbito de las variables 44 Estructuras Condicionales 44 MID 04. Condicional If y Else 45 Actividad 10. Escribiendo código en una condicional 45 Actividad 11. Efecto de máquina de escribir 47 Actividad 12. Máscaras dinámicas 49 Actividad 13. Simulación física de un rebote 50
CONTENIDO
Actividad 14. Mejorando el rebote
52
Publicación de proyectos de Flash MID 05. Publicación de proyectos Actividad 15. Recordando
52 54 54
Proyecto de Integración 1 Simulación de movimientos realistas Objetivo y plan de programación Actividad 01. Programando los giros Actividad 02. Generando el movimiento Actividad 03. Controlando la velocidad máxima Actividad 04. Mejorando la acción
57 57 57 58 58 61 63
Proyecto de integración 2 Portafolio Web Actividad 01. Creando botones del menú Actividad 02. Completando los botones Actividad 03. Marcando secciones Actividad 04. Animando la galería de fotos Actividad 05. Contenidos de información y contacto Proyecto de integración 3 El juego de la galería de tiro Actividad 01. Creando un pato Actividad 02. Preparando el escenario Actividad 03. Moviendo la tira de patos Actividad 04. El tendedero Actividad 05. Moviendo el tendedero Actividad 06. Llevando el puntaje Actividad 07. La mirilla Actividad 08. Limitando los tiros y cambiando de ronda Actividad 09. Perdiendo el juego
64 64 64 73 77 79 86 90 90 92 95 99 102 105 107 110 112 116
RECURSOS
Material Impreso Este material forma parte de un conjunto de recursos que conforman el Programa de Informática Educativa (PIE). Está organizado en bloques integrales que incluyen todo lo necesario para aprender, practicar y evaluar habilidades o competencias. Las explicaciones, imágenes, tablas, actividades, notas y tips, apoyadas con las láminas y tutoriales, permiten integrar la experiencia de aprendizaje desde múltiples perspectivas. Así, podemos afirmar que el PIE de Grupo Educare es la mejor manera de aprender haciendo.
El CD El CD que acompaña al material impreso contiene los Módulos de Instrucción Digital (MID´s) que te ayudarán a comprender los conceptos y a poner en práctica las habilidades adquiridas. Los MID´s incluyen una sección de aprendizaje y una sección de refuerzo interactivo. Adicionalmente encontrarás los archivos que se requieren para realizar las actividades, algunos documentos y aplicaciones útiles. No olvides que el CD es parte integral del programa, por lo que es muy importante que lo conozcas y utilices en el curso.
ICONOGRAFÍA
Actividad Este ícono nos indica un ejercicio que refuerza de manera práctica e inmediata la parte teórica de este material.
Nota Las notas que verás dentro de tu texto, puntualizan la teoría o los aspectos más importantes de un tema.
Tip Es una sugerencia que complementa un tema del material impreso, dando como panorama más amplio al alumno acerca de cómo ejecutar una actividad de manera más sencilla y práctica.
MID Es el material digital de los recursos del programa. La representación en video de la parte teórica de este volumen.
Lámina de apoyo La lámina es un recurso del profesor, que sirve como refuerzo dinámico e interactivo a un tema denso, que complementa la teoría del material impreso.
PROPUESTA DIDÁCTICA Programación con Flash CS4 / CS5
Propuesta didáctica
TIEMPO EN SEMANAS
TEMAS
Introducción a ActionScript
8
SUBTEMAS
ActionScript en Keyframes
COMPETENCIA Identifica a ActionScript como lenguaje de programación. Escribe correctamente la sintaxix de ActionScript. Inserta Keyframes en la Líne a de Tiempo y les agrega acciones.
ActionScript en botones
Diseña botones que ejecuten acciones. Lista los principales eventos a los que responde un botón. Identifica las acciones mediante su codigo fuente.
ActionScript en MovieClips
Lista los principales eventos de un Movie Clip Identifica y aplica eventos para Movie Clip, Botones o Keyframes. Escribe eventos respetando la sintaxis que le corresponde. Compara el lenguaje ActionScript con otros lenguajes de programación. Aplica operadores de Asignación Aritméticos y de Comparación en sus proyectos de animación.
Nombrar instancias Sintaxis de punto Operadores Operadores de Asignación Operadores Aritméticos Operadores de Comparación
Control de líneas de tiempo
Explica los conceptos de Jerarquia, Parent y Child dentro de una película Flash
Variables
Lista las reglas necesarias para declarar una variable en el entorno de Flash. Emplea la declaración de variables en Keyframes y MovieClips. Reconoce códigos condicional es If y Else
Ámbito de las variables Estructuras Condicionales
OBJETIVOS
1.- Reconocer ActionScript como el lenguaje de programación de Flash definiendo las principales acciones para animación.
ACTIVIDADES SUGERIDAS PARA EL ALUMNO (CONTENIDAS EN EL MATERIAL DE TRABAJO)
TUTORIAL SUGERIDO
RECURSOS Computadora.
Actividad 01. Agregando ActionScript MID 01. Acciones en a los Keyframes Keyframes
1.- Diseñar diferentes botones para emplearlos Actividad 02. Identificando acciones MID 02. Acciones en en animaciónes Flash programando diferentes Actividad 03. Programando un menú botones eventos. de Flash
Actividad 04. Identificando eventos 1.- Listar los principales eventos de un MovieClip Actividad 05. Nombrando instancias 2.- Recordar la sintaxis de las propiedades de un Actividad 06. Reconociendo objeto MID 03. ActionScript en operadores 3-. Identificar los Operadores como parte MovieClips Actividad 07. Modificando fundamental del lenguaje ActionScipt ysu propiedades con función a través de un ejemplo de uso. ActionScript
1.- Ensamblar animaciones con el método Motion Tween aplicando varias Instancias de un Actividad 08. Controlando la bicicleta MovieClip. Actividad 09. Declarando variables Actividad 10. Escribiendo código en una condicional 1.- Diseñar peliculas interactivas empleando Actividad 11. Efecto de máquina de la declaración de variables con estructuras MID 04. Condicional If escribir condicionales al conocer la definición y ambítos y Else Actividad 12. Máscaras dinámicas de variables y su sintaxis. Actividad 13. Simulación física de un rebote Actividad 14. Mejorando el rebote
Material de aopyo del alumno. CD del alumno. Computadora. Material de aopyo del alumno. CD del alumno.
Computadora. Material de aopyo del alumno. CD del alumno.
Computadora. Material de aopyo del alumno. CD del alumno.
Computadora. Material de aopyo del alumno. CD del alumno.
Propuesta Didáctica
9
TIEMPO EN SEMANAS
TEMAS
COMPETENCIA
Publicación de proyectos de Flash
Crea proyectos destinados a platoformas Mac y PC. Define los pasos para publicar sus proyectos.
Proyecto de Integración 1
Prepara sus proyectos por medio de mapas mentales o por escrito. Comprende el funcionamiento de Flash. Crea objetos y textos. Identifica Vectores y Mapa de Bits. Utiliza múltiples líneas de tiempo. Selecciona acciones ActionScript adecuadas para una tarea en específico. Crea Sitios Web y aplicaciones de alto impacto.
Proyecto de integración 2
Proyecto de integración 3
10
SUBTEMAS
Simulación de movimientos realistas Objetivo y plan de programación
Portafolio Web
El juego de la galería de tiro
Integra varios proyectos para publicarlos como uno solo. Reconoce los elementos del Panel de Propiedades. Aplica animaciones y efectos a los elementos del Escenario.
Emplea Herramientas de Dibujo Vectorial para elaborar las ilustraciones reuqeridas para el proyecto. Planea un proyecto para después realizarlo en Flash. Define comportamientos de un MovieClip. Categoriza los elementos de la Biblioteca de Símbolos. Integra imagenes, sonidos en una pelicula Flash. Publica películas Flash para diferentes plataformas. Reconoce la Sintaxis para definir variables condicionales.
OBJETIVOS
1.- Usar el cuadro de díalogo Configurar una publicación creando contenido para la Web y diferentes sistemas operativos.
ACTIVIDADES SUGERIDAS PARA EL ALUMNO (CONTENIDAS EN EL MATERIAL DE TRABAJO)
TUTORIAL SUGERIDO
RECURSOS Computadora.
Actividad 15. Recordando
MID 05. Publicación de proyectos
Material de aopyo del alumno. CD del alumno.
Actividad 01. Programando los giros 1.- Lograr que una nave espacial se desplace Actividad 02. Generando el controlada por las flechas de cursor del movimiento teclado aplicando los conocimientos adquiridos Actividad 03. Controlando la velocidad mediante la realización de las Actividades máxima anteriores. Actividad 04. Mejorando la acción
1.- Experimentar el intercambio de datos entre Flash y otras aplicaciones mediante otro lenguaje de programación al crear un portafolio virtual para la Web.
Actividad 01. Creando botones del menú Actividad 02. Completando los botones Actividad 03. Marcando secciones Actividad 04. Animando la galería de fotos Actividad 05. Contenidos de información y contacto
1.- Integrar todos los conocimientos adquiridos en el manejo de Flash creando un juego de galería de tiro.
Actividad 01. Creando un pato Actividad 02. Preparando el escenario Actividad 03. Moviendo la tira de patos Actividad 04. El tendedero Actividad 05. Moviendo el tendedero Actividad 06. Llevando el puntaje Actividad 07. La mirilla Actividad 08. Limitando los tiros y cambiando de ronda Actividad 09. Perdiendo el juego
Computadora. Material de aopyo del alumno. CD del alumno.
Computadora. Material de aopyo del alumno. CD del alumno.
Computadora. Material de aopyo del alumno. CD del alumno.
Propuesta Didáctica
11
12
Introducción a Action Script Action Script es el lenguaje de programación de Flash. Action Script permite dotar a las aplicaciones realizadas en Flash de una mayor interactividad, permite optimizar las animaciones, conectar con bases de datos y con todo tipo de lenguajes. Al programar en Action Script debe respetarse la sintaxis, es decir, el código que se escriba debe seguir siempre las reglas del lenguaje, como el uso adecuado de las mayúsculas, minúsculas, espacios y signos de puntuación que requiera cada caso. Por ejemplo, en Action Script no es lo mismo escribir key.isdown que Key.isDown. En este ejemplo la primera instrucción no funcionará porque no respeta la sintaxis del comando Key, que debe ir con mayúscula. Por esta razón, acostúmbrate a consultar la referencia de Action Script que incluye Flash y aprende a reconocer la ayuda visual del programa.
Diseño Multimedia
13
Existen tres versiones de ActionScript: ActionScript 1.0
Versión original diseñada para un fácil manejo con usuarios principiantes. ActionScript 2.0
Versión extendida diseñada por los desarrolladores de Flash que ofrece mucho más opciones a los programadores con experiencia. ActionScript 3.0
(Versión actual que tiene mucho en común con los lenguajes usados en Java, por lo que queda más allá del alcance de los principiantes).
Flash CS4 permite el uso de las versiones anteriores, esto lo defines al momento de crear un nuevo documento, pues debes seleccionar ActionScript 2.0 o ActionScript 3.0. Usar ActionScript 2.0 te permitirá utilizar también ActionScript 1.0 debes tomar en cuenta que una vez que has decidido que versión utilizarás, el programa no te permitirá cambiar de una versión a otra.
Tip
Al utilizar ActionScript 2.0, algunas herramientas de Flash CS4 como la cinemática invertida o las de 3D no podrán utilizarse, pues éstas sólo funcionan con ActionScript 3.0.
Las instrucciones o acciones en Flash se escriben en el panel Actions, que se despliega usando el Menú Window/Actions o bien presionando la tecla . En Flash las acciones pueden ir solamente en un Keyframe o en la instancia de un símbolo, ya sea un Movie Clip o un Botón. Es importante que hagas una costumbre el consultar el panel de ayuda de Action Script que se activa al presionar la tecla F1. Este panel te mostrará siempre la sintaxis correcta y ejemplos de uso de todos los comandos.
Action Script en Keyframes
Las instrucciones que escribas en un Keyframe se ejecutan en el momento en que la reproducción de la película llega a dicho Keyframe. Es común escribir instrucciones en un Keyframe cuando se quiere que algo ocurra siempre en una parte específica de la película.
14
Para escribir acciones en un Keyframe, debes seleccionarlo y después presionar la tecla . El panel de Acciones se abre, y se escribe ahí la instrucción. Una pequeña “a” en el keyframe indica que tiene asignada una o más instrucciones. Estas son las primeras acciones que estudiarás. Una de las primeras cosas que notarás, es que todas estas deben terminar con el símbolo de punto y coma(;). Acción stop();
Sirve para: Detiene la reproducción de la película.
play();
Continúa la reproducción de la película desde el cuadro donde se encuentra esta instrucción.
gotoAndStop();
La reproducción salta al cuadro indicado entre los paréntesis y detiene su reproducción ahí. Entre los paréntesis se puede introducir un número de cuadro o su nombre (si se ha etiquetado).
gotoAndPlay();
La reproducción salta al fotograma indicado entre los paréntesis y continúa su reproducción desde ahí. Entre los paréntesis se puede introducir un número de cuadro o su nombre (si se ha etiquetado).
nextScene();
Avanza la reproducción de la película a la siguiente escena, siempre y cuando exista más de una escena definida.
prevScene();
Regresa la reproducción de la película a la escena anterior, siempre y cuando exista más de una escena definida.
trace();
Se utiliza para mandar mensajes a una ventana especial de salida. Esta opción se utiliza durante la fase de programación para realizar pruebas o conocer resultados. Entre los paréntesis se teclea lo que deseas que se envíe a la ventana de salida, por ejemplo: trace(“este es el cuadro 45”);
Carga en el navegador de Internet la página que se getURL (“http://www.grupoeducare.com”); especifique entrecomillada dentro de los paréntesis. Observa que es importante incluir el protocolo (en este caso http://) para que la página se cargue correctamente.
Diseño Multimedia
15
Panel de Acciones de Flash CS4.
Tip
Uno de los errores más comunes cuando se está aprendiendo Action Script, es escribir código en el lugar incorrecto. Antes de escribir acciones, siempre revisa que quedarán en el cuadro o símbolo que se quiere. En el panel de acciones siempre verás el nombre de la capa y número de cuadro donde quedará el código, o bien el nombre del símbolo.
Flash 01
16
Acciones en Keyframe
Actividad 01
Agregando Action Script a los Keyframes
1. Abre un documento nuevo de Flash. Renombra la primera capa como “Capa acciones”. 2. Inserta un Keyframe en los cuadros 1, 5, 15, 25 y 30. 3. Selecciona el Keyframe 1 y abre el Panel de acciones con Menú Window/Actions o la tecla . Revisa que el panel indique “Capa acciones : 1”, para comprobar que escribirás código en la capa y cuadro que se requiere. 4. Inserta el siguiente código dentro del Panel de acciones: trace(“este es el frame 1”);
5. En la línea de tiempo selecciona el Keyframe 5 y utiliza el Panel de acciones para introducir el siguiente código. Revisa que el panel muestre la capa y cuadro correctos. trace(“este es el frame 5”);
6. Introduce un código similar para mostrar los mensajes cuando se llegue a los cuadros 15 y 25. No olvides los paréntesis, las comillas, y terminar cada línea con punto y coma. 7. En el Keyframe 30 introduce el comando: stop(); 8. Prueba la película y observa los resultados en la ventana Output. 9. Ahora cambia la instrucción del Keyframe 15 por esta, respetando mayúsculas y minúsculas: gotoAndPlay(7);
10. Prueba la película, describe lo que ocurre y lo que ves en la ventana de salida:
11. Guarda tu trabajo con el nombre ASframes21 en la carpeta de costumbre.
Diseño Multimedia
17
Tip
Cuando escribes instrucciones en el panel de acciones de Flash, las palabras reservadas aparecen en azul. Esta es una forma rápida de comprobar si estás utilizando la sintaxis correcta. Esta comprobación rápida, sin embargo, no detecta si te falta algún paréntesis, parámetro o punto y coma, pues éstos no aparecen en azul.
Action Script en Botones Hemos visto que las acciones que se escriben en un Keyframe se ejecutan cuando la reproducción de la película alcanza ese cuadro específico, pero ¿cuándo se ejecutan las acciones que se escriben en un botón? Las instrucciones en un botón se ejecutan cuando dicho botón detecta que ha ocurrido algo sobre él, como pasarle el puntero del ratón por encima, o hacerle un clic; a esto se le llama eventos del botón.
Siempre que se escribe código para un botón, debe hacerse dentro de un código manejador de eventos (handler), con el fin de especificar cuál es el evento que disparará las acciones. El manejador de eventos de un botón tiene la siguiente estructura:
on (evento){
acciones a ejecutar cuando ocurra el evento
}
Esta estructura se podría leer como: “cuando suceda este evento, se ejecutarán estas acciones”. Por ejemplo, si deseas que la reproducción de la película se detenga al hacer clic en un botón, el código que debes escribir en dicho símbolo es:
on (release){
stop();
}
Los principales eventos de un botón son:
18
Evento rollOver
Ocurre cuando... Ocurre si el puntero del ratón pasa sobre el área sensible del botón (Hit).
Press
Se dispara cuando se presiona el puntero del ratón sobre el botón.
Release
Ocurre cuando se deja de presionar el botón después de haberlo presionado.
ReleaseOutside
Sucede cuando, después de haber hecho clic sobre el botón y sin soltarlo, se mueve el puntero del ratón fuera del área sensible y entonces se deja de presionar.
rollOut
Sucede cuando, después de estar dentro, el puntero del ratón abandona el área sensible del botón.
dragOut
Sucede cuando el puntero del ratón está sobre el botón y se presiona sobre el mismo. Con el botón pulsado se mueve el cursor fuera de la superficie del botón.
dragOver
Ocurre cuando el puntero del ratón está sobre el botón y se presiona sobre el mismo; con el botón pulsado se mueve el cursor fuera de la superficie del botón y posteriormente de nuevo se coloca sobre el botón.
keyPress
Ocurre cuando se pulsa alguna tecla especificada entre comillas. Por ejemplo: on (keyPress “”)
Tip En general los botones en Windows en casi todas las aplicaciones, ejecutan sus acciones cuando los sueltas y no cuando los presionas, por eso un “clic” es la acción de presionar y luego soltar un botón. ¡Pruébalo con cualquier programa! Utiliza el evento release si deseas que un botón ejecute acciones cuando el usuario haga un clic sobre él.
Diseño Multimedia
19
Flash 02
Acciones en Botones
Actividad 02
Identificando Acciones
1. Para cada uno de los siguientes bloques de código que se escribirán en un botón, explica la función de acuerdo a la acción y evento. Debes ser específico y utilizar un lenguaje técnico apropiado. Si tienes dudas de la función de algún comando, búscala en la ayuda de Flash. Código on (rollOver) { stopAllSounds(); } on (press) { getURL(“http://www.un.org”); } on (release) { gotoAndStop(14); } on (rollOut) { trace (“¿a dónde vas?”); } on (keyPress “”){ _x = 200; } on (keyPress “”){ _x = 0; }
20
Función Cuando el puntero del ratón pasa sobre el botón, todos los sonidos que estén ejecutándose se detienen.
2. Sabemos que un botón tiene los estados Up, Over y Down (sin contar el Hit o área sensible del botón). Si relacionas estos estados con los eventos que puede detectar un botón, ¿cuándo se muestra cada uno?
Estado
Evento(s)
Up Over Down
Actividad 03
Programando un Menú en Flash
1. Inicia un documento nuevo de Flash y crea tres layers. Renombra los layers como acciones, objetos y botones, ordenados de arriba hacia abajo. 2. En el layer botones, crea un botón con forma de rectángulo. Edita el símbolo para cambiar el color del botón en los diferentes estados como sigue: Up de color verde oscuro, Over de color verde claro y Down de color amarillo. 3. Regresa a la línea de tiempo principal y verifica que el botón creado se encuentra en la biblioteca. Utiliza el símbolo para crear sobre el layer botones 5 instancias del botón. Coloca los 5 botones separados un poco, pero alienados en la parte superior de la película. 4. Utiliza el Panel de propiedades para nombrar cada instancia (Instance Name). Etiqueta los botones como: b1_btn, b2_btn, b3_btn, b4_btn y b5_btn, respectivamente. 5. Selecciona el cuadro 50 del layer botones e inserta un frame () para extender la duración de la película. 6. Ahora, en el layer objetos, inserta un Keyframe en los cuadros 11, 21, 31 y 41. Extiende hasta el cuadro 50 la duración del último Keyframe, insertando un frame en esa posición.
Diseño Multimedia
21
Crea 5 instancias del botón y extiende la película hasta el frame 50.
7. Utiliza la herramienta de texto para teclear un número 1 muy grande en el Keyframe 1 del layer objetos. De forma similar crea los textos 2, 3, 4 y 5, en los Keyframes 11, 21, 31 y 41 respectivamente. 8. Para terminar la estructura, en el layer acciones inserta un Keyframe en los cuadros 10, 20, 30, 40 y 50. 9. Selecciona el Keyframe 10 del layer acciones y abre el Panel de acciones con . Revisa que el panel muestra la etiqueta “acciones : 10” e introduce la instrucción: gotoAndPlay(1); Esta acción hará que la película se repita una y otra vez desde el cuadro 1 hasta el cuadro 10. 10. En el Keyframe 20 del layer acciones introduce el código: gotoAndPlay(11); Esta acción hará que la película se repita una y otra vez desde el cuadro 11 hasta el cuadro 20. 11. De forma similar introduce el código necesario en los Keyframes 30, 40 y 50 del layer acciones, para que la película se repita en rangos de 10 cuadros. 12. Contesta las siguientes preguntas: a. ¿Qué pasará si ejecutas la película en este momento?
b. ¿Por qué no se ven los textos 2, 3, 4 y 5?
c. ¿Cómo podrías hacer que se vean?
22
13. Ahora hay que escribir acciones en los botones. Selecciona el primer botón y abre el panel de acciones. Revisa que el panel muestra la etiqueta “b1_btn” e introduce el código:
on (release) {
gotoAndPlay(1);
}
Este código hará que la película salte al cuadro 1 siempre que se haga clic sobre el primer botón. 14. En el segundo botón escribe el código:
on (release) {
gotoAndPlay(11);
}
Este código hará que la película salte al cuadro 11 siempre que se haga clic sobre el segundo botón. 15. De forma similar escribe el código necesario para que la película salte a los cuadros 21, 31 y 41 cuando se haga clic en el tercero, cuarto y quinto botón, respectivamente. 16. Prueba la película. Contesta las siguientes preguntas: a. ¿Cuál es la función de la película?
b. ¿Qué aplicación real podría tener la estructura que has creado?
17. Guarda el archivo con el nombre ASbotones 23 en la carpeta que indique tu profesor.
Tip
En Action Script, todo lo que se escriba después de una doble diagonal // es un comentario, que sólo es útil al programador pero es ignorado por el programa. Por ejemplo: play(); //aquí inicia la reproducción de la línea de tiempo
Diseño Multimedia
23
Action Script en Movie clips Ya conoces que las instrucciones que escribes en un Keyframe se ejecutan cuando la reproducción de la película llega a un cuadro específico en la línea de tiempo. También sabes que las instrucciones en un botón se ejecutan cuando ocurre un evento sobre el botón. ¿Cuándo se ejecutan las instrucciones escritas en un Movie Clip? Un Movie Clip también es capaz de detectar eventos que ocurren en su entorno. Puede detectar todos los eventos que detecta un botón, pero además muchos otros exclusivos de los Movie Clips. Estos nuevos eventos se escriben dentro de un manejador que tiene la siguiente estructura:
onClipEvent (evento) {
acciones a ejecutar cuando ocurre el evento
}
Los principales eventos de un Movie Clip son:
Evento
24
Load
Ocurre cuando... Ocurre una sóla vez en el momento en que el movie clip se carga en la película.
Unload
Ocurre una sola vez cuando el Movie Clip se descarga en la película.
enterFrame
Este es un evento especial que ocurre en cada cuadro de la reproducción, mientras el Movie Clip exista en la película. Por ejemplo, si la película se reproduce a una velocidad de 12 cuadros por segundo, el evento enterFrame ocurre 12 veces cada segundo.
mouseDown
Se dispara cuando se presiona el botón del ratón sobre cualquier lugar del escenario.
mouseUp
Ocurre cuando se pulsa el botón del ratón y posteriormente se suelta sobre cualquier lugar del escenario.
mouseMove
Este evento sucede si se mueve el puntero del ratón. Este evento ocurre tantas veces como cuadros sean detectados, en los que la posición del ratón cambia con respecto al cuadro anterior.
keyDown
Sucede cuando se pulsa una tecla.
Evento keyUp
Ocurre cuando... Sucede cuando se suelta una tecla que estaba pulsada.
Data
Ocurre cuando termina de realizarse una acción LoadVariables o una acción LoadMovie.
Tip Aunque para el programador inexperto parecen lo mismo, los eventos de Movie Clip mouseDown y mouseUp, son diferentes a los eventos de botón press y release. La primera diferencia es que se deben escribir en manejadores (handlers) diferentes. onClipEvent (mouseDown) onClipEvent (mouseUp)
on (press) on (release)
La segunda diferencia es que los eventos mouseDown y mouseUp detectan acciones del ratón en cualquier lugar del escenario, mientras que los eventos press y release solo ocurren cuando el ratón actúa sobre el símbolo que contiene las instrucciones. Por último, en un botón sólo pueden usarse los manejadores para los eventos press y release, mientras que en un Movie Clip pueden utilizarse tanto handlers de botón como de Movie Clip.
Flash 03
Action Script en Movie Clips
Diseño Multimedia
25
Actividad 04
Identificando eventos
Contesta las siguientes preguntas, indicando a qué evento nos referimos y si se aplica en MovieClips, Botones o Keyframes.
1. Ocurre una sóla vez en el momento en que el movie clip se carga en la película. ¿A qué evento nos referimos y dónde se aplica?
2. Carga en el navegador de internet la página que se especifique entrecomillada dentro de los paréntesis. ¿A qué método nos referimos y dónde se aplica?
3. La reproducción salta al fotograma indicado entre los paréntesis y continúa su reproducción desde ahí. Entre los paréntesis se puede introducir un número de cuadro o su nombre (si se ha etiquetado). ¿A qué método nos referimos y dónde se aplica?
4. Ocurre cuando se deja de presionar el símbolo después de haberlo presionado. ¿A qué evento nos referimos y dónde se aplica?
26
5. Sucede cuando, después de estar dentro, el puntero del ratón abandona el área sensible del símbolo. ¿A qué evento nos referimos y dónde se aplica?
6. Ocurre cuando se pulsa el botón del ratón y posteriormente se suelta sobre cualquier lugar del escenario. ¿A qué evento nos referimos y dónde se aplica?
Nombrar instancias
Cuando piensas agregar Action Script para dar funcionalidad a los botones y Movie Clips de una película, es una buena práctica nombrar las instancias. Las instancias en el escenario se nombran utilizando el panel de propiedades (Instance Name). Es muy importante que des a las instancias un nombre que te permita identificarlas plenamente, ya que el nombre que des al objeto es el que se usará en la programación.
En Action Script se acostumbra agregar a todos los nombres de instancias de botones la terminación _btn, por ejemplo: option1_btn o reproducir_btn.
Similarmente, se acostumbra agregar a todos los nombres de instancias de Movie Clips la terminación _mc, como avion_mc o corredor_mc.
A las instancias de texto se les da la terminación _txt. Si sigues esta convención al nombrar las instancias de tus objetos, podrás además aprovechar la ayuda que Flash presenta al programador, ya que reconoce las terminaciones y sugiere acciones relacionadas con botones, Movie Clips o textos, según corresponda. A partir de esta sección, en explicaciones y actividades se usará la convención para nombrar las instancias que se ejemplificarón en los párrafos anteriores. De esta manera, podrás identificar fácilmente los nombres de instancias de cada tipo.
Diseño Multimedia
27
Nota Es muy importante nombrar las instancias antes de escribir la primera línea de código. Si ya hay código escrito y cambias el nombre de alguna instancia, el código no se actualiza para reflejar los cambios y la aplicación no funcionará. Al nombrar las instancias ten cuidado de no dejar espacios al final del nombre, no usar símbolos internacionales (como acentos o ñ), ni signos de puntuación.
Actividad 05
Nombrando Instancias
Nombra las instancias dependiendo la función que se indica con cada ícono. Observa el ejemplo resuelto.
Botón
28
a.
avión
c.
MovieClip
avion_mc
Texto
b.
inicio
siguiente
d.
adelante
e.
letrero
f.
dibujo
g.
texto
h.
animación
Sintaxis de punto
Las propiedades son atributos que definen un objeto. En Action Script las propiedades se identifican porque siempre llevan un guión bajo antes del nombre, por ejemplo _x, _height, _alpha o _visible. Cada propiedad determina alguna característica del objeto, como su posición, su altura, su transparencia o si está o no visible en el escenario. Es posible consultar el valor de una propiedad o asignar a una propiedad un valor. Para referirnos a la propiedad de un objeto, Action Script utiliza una sintaxis de punto que es común en muchos lenguajes de programación orientados a objetos. Cuando se usa esta sintaxis, una línea de instrucción siempre comienza con el nombre de un objeto seguido de un punto y de alguna propiedad de dicho objeto. objeto.propiedad; cv Por ejemplo, la propiedad _x de un Movie Clip se refiere a la posición horizontal del objeto en el escenario (coordenada x). Si tenemos un objeto llamado pelota_mc, entonces podemos usar el siguiente comando para que el objeto se ubique 50 pixeles a la derecha del extremo izquierdo del escenario: pelota_mc._x = 50;
O bien, podemos usar esta instrucción para que el Movie Clip se desplace 10 pixeles a la derecha de su posición actual: pelota_mc._x = pelota_mc._x + 10; o en su forma abreviada: pelota_mc._x+ = 10;
La sintaxis de punto también se utiliza para expresar los métodos de un objeto. Los métodos son cosas que el objeto puede realizar, como detener su reproducción, avanzar un cuadro o permitir ser arrastrado por el ratón. objeto.método;
Por ejemplo, si tenemos un Movie Clip animado, llamado pelota_mc, entonces podemos usar el siguiente comando para que el objeto detenga su reproducción: pelota_mc.stop();
Este tipo de instrucciones se pueden asignar a un keyframe o al evento de un objeto, tal y como se hizo en la actividad anterior.
Diseño Multimedia
29
Operadores Los operadores se utilizan para trabajar con los valores de las propiedades o las variables y son una parte fundamental del lenguaje Action Script. Flash permite utilizar una gran variedad de operadores, que se clasifican en tipos. En las siguientes tablas se enlistan los principales operadores y su función. Casi todos son muy comunes y se utilizan en diferentes lenguajes de computadora.
Operadores de Asignación
Operador =
+=
-=
Asigna a una variable el valor de esa misma variable más otro valor. Se usa mucho para incrementar el valor de una variable. Asigna a una variable el valor de esa misma variable menos otro valor. Se usa mucho para disminuir el valor de una variable.
Ejemplo de uso Pelota_mc._x = 13;
pelota_mc._x += 1; Costo += unidad;
pelota_mc._x -= 1; Costo -= descuento;
*=
Asigna a una variable el valor de esa misma variable multiplicado por otro valor.
Pelota_mc._height *= 3;
/=
Asigna a una variable el valor de esa misma variable dividido entre otro valor.
Pelota_mc._height /= 3;
++ --
30
Función Asigna el valor de una operación o una expresión en una variable. La asignación siempre es de derecha a izquierda.
Incrementa en uno el valor de una variable. Pelota_mc._rotation ++; Decrementa en uno el valor de una variable.
Pelota_mc._rotation --;
Operadores Aritméticos Operador +
-
Función Sirve para sumar dos expresiones o concatenar cadenas de texto.
Ejemplo de uso Total = A + B;
Se emplea para restar valor o asignar signo Total = A – 7; negativo a un número Multiplica dos expresiones numéricas
Total = A*3;
/
Divide dos expresiones generando decimales
Total = A/2;
%
Devuelve el residuo de la división de dos expresiones. Este operador se llama módulo.
Total = A%2
*
Operadores de comparación
Operador ==
Función Regresa un valor verdadero (true) si dos expresiones son iguales.
!=
Regresa un valor verdadero (true) si dos expresiones son diferentes
>
Regresa un valor verdadero (true) si la expresión de la izquierda es mayor que la de la derecha.
<
Regresa un valor verdadero (true) si la expresión de la izquierda es menor que la de la derecha.
Ejemplo de uso if (A==B) { play(); } if (A!=B) { play(); } if (A>B) { play(); }
if (A=
Función Regresa un valor verdadero (true) si la expresión de la izquierda es mayor o igual que la de la derecha. Regresa un valor verdadero (true) si la expresión de la izquierda es menor o igual que la de la derecha.
=B) { play(); }
if (AStage.width) { this._x = 0; } }
Diseño Multimedia
45
Si estas instrucciones se escriben en un Movie Clip:
a. ¿Cuándo ocurre el evento load?
b. ¿Para qué sirve la instrucción var i = 0;?
c. ¿Qué indica la palabra reservada this?
d. ¿Para qué sirve la instrucción this._x = 0;?
e. ¿Cuándo ocurre el evento enterFrame?
f. ¿Cuál es la finalidad de las dos líneas siguientes? this._x += i;
46
i += .01;
g. ¿Qué efecto tiene esta estructura condicional? if (this._x>Stage.width) {
this._x = 0;
}
2. Abre un nuevo documento de Flash y cambia su velocidad a 30 fps. 3. Dibuja un gráfico simple con forma de flecha que apunta hacia la derecha, de unos 30 pixeles por lado. 4. Convierte el gráfico a Movie Clip y asígnale un nombre a la instancia. 5. Utiliza el Panel de acciones para introducir el código completo en el Movie Clip. Asegúrate que el código queda asignado a este símbolo. 6. Prueba la película y observa las instrucciones en acción.
Actividad 11
Efecto de máquina de escribir
1. Abre un nuevo documento en Flash. Cambia la velocidad de reproducción a 30 fps. 2. Crea sobre el escenario un campo de texto y utiliza el Panel de propiedades para que sea de tipo dinámico (Dynamic text). El campo debe ser amplio, de lado a lado del escenario. 3. También en el Panel de propiedades puedes asignar una variable a ese texto utilizando el parámetro Var. Asígnale al texto una variable que se llame caja. Esto significa que el valor que tenga la variable caja, será desplegado en el texto dinámico.
Diseño Multimedia
47
4. Convierte el campo de texto en Movie Clip con cualquier nombre. Una vez creado, usa el Panel de propiedades para asignarle a la instancia el nombre: maquina. 5. Abre la línea de tiempo del Movie Clip maquina, haciendo doble clic sobre él. Inserta 3 frames en el único layer que hay. 6. Crea un nuevo layer en la línea de tiempo del Movie Clip. Convierte en Keyframes los tres frames del nuevo layer. 7. Aún en la línea de tiempo del clip maquina, posiciónate en el Keyframe 1 del layer 2 y abre el Panel de acciones. Declara una variable que se llame “t” e inicialízala con valor de 0. 8. Enseguida declara una variable que se llame texto e inicialízala con el valor “Cristobal Colón viajó a América en 1492”. El texto debe ir entrecomillado. 9. Introduce el siguiente código en el cuadro 2 del layer 2.
if (t=400) {
this._y = 400;
velocidad *= -.8;
}
}
5. Prueba la película y guarda el trabajo como rebote33 en la carpeta que indique tu profesor. 6. Escribe en la línea debajo de cada instrucción, la función que realiza:
onClipEvent (enterFrame) {
velocidad += fuerza;
this._y += velocidad;
if (this._y>=400) {
this._y = 400;
velocidad *= -.8;
}
Diseño Multimedia
51
Actividad 14
Mejorando el rebote
Para realizar esta actividad es necesario haber realizado correctamente la actividad anterior. 1. Abre el archivo terminado de la actividad anterior y guárdalo con el nombre rebote34 en la misma ubicación que el original. 2. Agrega el código necesario para que la pelota se mueva de izquierda a derecha, a una velocidad fija, mientras va rebotando por el escenario. Utiliza una variable para asignar la velocidad del movimiento horizontal. Prueba la película. 3. Modifica el código para que, cuando la pelota alcance el extremo derecho del escenario, regrese moviéndose de derecha a izquierda. Necesitarás un condicional que haga que la variable de la velocidad horizontal se vuelva negativa cuando la pelota llegue a la coordenada límite. Prueba la película. 4. Por último agrega el código necesario para que, si la pelota que va de regreso alcanza el extremo izquierdo del escenario, entonces rebote nuevamente hacia la derecha. 5. Afina los valores de las variables y parámetros para que parezca que la pelota rebota limpiamente dentro de un área rectangular. 6. Guarda los cambios.
Publicación de proyectos de flash Flash ofrece ocho formatos para la publicación de proyectos. Se pueden acceder utilizando el Menú File/ Publish Settings. Un proyecto puede ser publicado en varios formatos con un sólo comando, eligiendo los formatos deseados desde este cuadro de diálogo. Al seleccionar formatos de publicación, se crean fichas con opciones relacionadas con cada tipo de formato.
Dependiendo del objetivo y destino final del proyecto, se pueden elegir diferentes formas para publicar una película de Flash.
52
Flash (.swf) Genera el .swf estándar, que respeta todas las características de la película. Para ver una película swf es necesario tener instalado el Flash Player, que normalmente viene incluido con los navegadores de Internet, como el Internet Explorer. El Flash Player también se puede descargar de forma gratuita desde el sitio de Adobe. Html (.html). Genera un archivo .html que permite ligar la película .swf para visualizarla desde un navegador de Internet. Para ver la película en Internet debes publicar tanto en .swf como en .html y subir o distribuir ambos archivos. Windows proyector (.exe). Genera un archivo ejecutable (.exe) para plataformas Windows. Un archivo ejecutable de una película de Flash puede ejecutarse desde un CD o en modo local, sin necesidad del Flash Player. Macintosh proyector (.hqx). Genera un archivo ejecutable (.hqx) para plataformas Macintosh. Es un video que puede ser tratado por programas de edicion de video QuickTime (.mov). Genera un video en formato QuickTime. Sólo es una secuencia lineal y se pierden todas las características de interactividad o programación. Gif (.gif). Genera una secuencia de imágenes (cuadro por cuadro) de lo que se encuentra en el escenario. El formato Gif tiene un máximo de 256 colores y se usa sólo para crear pequeñas animaciones, como las usadas en los emoticons de los programas de chat.
Diseño Multimedia
53
Jpeg (.jpg) Genera una imagen única del frame de la película en el cual se encuentre la cabeza lectora. Png (.png) Genera una imagen única del frame de la película en el cual se encuentre la cabeza lectora. A diferencia del formato jpeg, este puede contener áreas transparentes.
Flash 05
Actividad 15
Publicacion de proyectos
Recordando
En cada pregunta marca el inciso con la respuesta correcta. 1. Las acciones de Action Script pueden escribirse en: a. b. c. d.
Frames, botones y Movie Clips. Frames y botones. Frames. Frames y Movie Clips.
2. La instrucción on() es un manejador de eventos para: a. b. c. d.
Botones. Movie Clips. Botones y Movie Clips. Frames, botones y Movie Clips.
3. La instrucción onClipEvent() es un manejador de eventos para: a. b. c. d.
54
Sólo Botones. Sólo Movie Clips. Botones y Movie Clips. Frames, botones y Movie Clips.
4. Para los siguientes eventos, anota en la línea si son manejados por el handler on() o por el handler onClipEvent(). a. release
b. KeyPress
c. mouseMove
d. press
e. rollOver
f. dragOut
g. enterFrame
h. load
i. rollOut
Diseño Multimedia
55
Explica con tus palabras, lo mejor posible, cada uno de los siguientes conceptos:
1. Handler o manejador de eventos.
2. Variable.
3. Variable local.
4. Variable de línea de tiempo.
5. _root.
6. _parent
56
EVALUACIÓN Proyecto de Integración Simulación de movimientos realistas La intención principal de todas las actividades anteriores es comprender el funcionamiento de Flash: crear objetos y textos, utilizar vectores, trabajar con sonido, crear símbolos, utilizar múltiples líneas de tiempo, hacer animación y programar con Action Script. La combinación de todas las técnicas anteriores, más una buena dosis de práctica y creatividad, te permitirá crear sitios web y aplicaciones de alto impacto. Lo más importante antes de iniciar cualquier proyecto, es comprender muy bien lo que quieres lograr, y tener un plan mental o escrito de cómo lograrlo.
Este proyecto se divide en 4 actividades secuenciales: 1. Programando los giros 2. Generando el movimiento 3. Controlando la velocidad máxima 4. Mejorando la acción Antes de iniciar con la primera actividad, revisa una muestra del proyecto terminado abriendo el archivo nave solucion.swf que se encuentra en la carpeta Nave de tu CD de trabajo o carpeta de actividades. Prueba el movimiento con las teclas de las flechas.
Objetivo y plan de programación:
El objetivo de este proyecto es lograr que una nave espacial en el escenario, llamada nave_mc, se desplace controlada por las flechas del teclado de la siguiente manera: Tecla de flecha Arriba Abajo
Acción La nave acelera La nave desacelera
Derecha Izquierda
La nave gira a la derecha La nave gira a la izquierda
Inicialmente la nave no se mueve y puedes hacerla girar sobre su propio eje con las flechas izquierda o derecha. Sólo al presionar las teclas arriba o abajo se inicia el movimiento.
Diseño Multimedia
57
EVALUACIÓN Utilizaremos el evento enterFrame para monitorear continuamente lo que ocurre en el entorno de la instancia nave_mc. Recuerda que el evento enterFrame ocurre cada cuadro de la película, mientras el Movie Clip exista. Por lo tanto, cualquier acción asignada al evento enterFrame de un Movie Clip se repetirá continuamente mientras el Movie Clip esté en el escenario. onClipEvent(enterFrame){
instrucciones
}
También usaremos la instrucción Key.isDown(), que permite detectar cuando se presiona alguna tecla en particular. El código de la tecla que se quiere detectar se pone entre los paréntesis.
if (Key.isDown(65)) {
instrucciones
// en este ejemplo las instrucciones ocurren
si se presiona la tecla “A”
// porque el código de la tecla “A” es 65.
}
Actividad 01 Fecha entrega
Programando los giros Comentarios y necesidades
% de éxito
1. Abre, de la carpeta Nave de tu CD de trabajo o carpeta de actividades, la película nave.fla. Guarda el archivo en la ubicación que indique tu profesor (Menú File/Save As) con el nombre nave01.fla. El resultado final de esta actividad será la base de la siguiente.
58
EVALUACIÓN
2. Arrastra al escenario una instancia del símbolo spaceship de la biblioteca de símbolos. Selecciona la instancia y usa el Panel de propiedades para darle el nombre nave_mc.
3. Con la instancia seleccionada, asigna el siguiente código en el panel de acciones: onClipEvent (load) { velocidad = 0; }
Estas instrucciones asignan a la variable velocidad el valor inicial de 0, en el instante en que la nave espacial aparece en la línea de tiempo. Como la variable se define dentro del código de nave_mc, entonces es una variable local y sólo es reconocida dentro de este Movie Clip.
4. La propiedad _rotation de un Movie Clip especifica su orientación en grados. Para girar la nave hacia la derecha podemos incrementar su propiedad _rotation. Agrega al Movie Clip el código que detecta continuamente si se presionó la tecla de la flecha derecha, para girar la nave si así fue. Analiza el código para comprenderlo.
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._rotation += 15;
}
} // el código de la tecla flecha derecha es Key.RIGHT
Diseño Multimedia
59
EVALUACIÓN
Cuidado: Recuerda siempre revisar en el Panel de acciones, que estás escribiendo el código en el lugar correcto, en este caso, la instancia nave_mc. 5. Dentro del mismo handler del evento enterFrame (antes de la llave final), asigna el código para verificar si la tecla presionada fue la flecha izquierda y girar el Movie Clip en esa dirección. El nuevo código se muestra en negritas:
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._rotation += 15;
}
if (Key.isDown(Key.LEFT)) {
this._rotation -= 15;
}
}
6. Prueba la película. Si has escrito bien el código, la nave debe girar sobre su propio eje en la dirección de la flecha que presiones en el teclado (izquierda o derecha). Revisa que hayas logrado este primer objetivo antes de continuar a la actividad 2. Guarda los avances.
Actividad 02 Fecha entrega
60
Generando el movimiento Comentarios y necesidades
% de éxito
EVALUACIÓN 1. Abre el archivo de la actividad anterior y guárdalo con el nombre nave02.fla. Selecciona la instancia de nave_mc y abre el panel de acciones. Agrega dentro del mismo handler del evento enterFrame las instrucciones necesarias para incrementar el valor de la variable velocidad en 1, si la tecla presionada es la flecha arriba.
if (Key.isDown(Key.UP)) {
velocidad+=1;
}
2. Dentro del mismo evento incluye el código para disminuir en 1 el valor de la variable velocidad, si la tecla presionada es la flecha abajo.
if (Key.isDown(Key.DOWN)) {
velocidad-=1;
}
3. Hasta ahora, si el usuario presiona las flechas arriba o abajo, la variable velocidad incrementa o disminuye su valor, pero falta relacionar el valor de esta variable con la posición de la nave. A continuación hay dos líneas de código que incrementan los valores de las propiedades _x y _y de la nave, determinando su posición en función de la velocidad y su orientación actual. Se usan funciones trigonométricas, que no explico por no ser objetivo de este curso. No te preocupes si no entiendes la función matemática, sólo comprende que la posición _x y la posición _y del Movie Clip se calcula en cada momento de acuerdo a su orientación y velocidad. // Este es el código que mueve la nave this._x+= Math.sin(_rotation*(Math.PI/180))*velocidad; this._y+= Math.cos(_rotation*(Math.PI/180))*velocidad*-1;
Estas líneas deben estar dentro del handler del evento enterFrame, justo antes de la llave final. 4. Prueba la película. Si has escrito bien el código, la nave debe acelerar cuando presionas la flecha arriba y desacelerar cuando presionas la flecha abajo. Revisa que hayas logrado este segundo objetivo antes de continuar. Guarda los avances.
Actividad 03
Controlando la velocidad máxima
Diseño Multimedia
61
EVALUACIÓN Fecha entrega
Comentarios y necesidades
% de éxito
1. Abre el archivo de la actividad anterior y guarda una copia con el nombre nave03.fla. El movimiento de la nave que hasta ahora has logrado tiene algunos problemas. El primero es que no hay límite en la aceleración, por lo tanto, cuando se acelera demasiado es muy fácil perder el control de la nave. Para limitar la velocidad de la nave basta agregar unas líneas antes de cambiar su posición _x y _y. La velocidad máxima será 20 por lo tanto podemos poner un condicional que iguale la velocidad a 20 si sobrepasa este valor. Las nuevas líneas se muestran en negritas: // Este es el código que mueve la nave
if (velocidad>20){
velocidad =20;
}
this._x+= Math.sin(_rotation*(Math.PI/180))*velocidad;
this._y+=Math.cos(_rotation*(Math.PI/180))*velocidad*-1;
2. Agrega también las líneas para que si la velocidad baja de -20, quede fija en este valor:
if (velocidad= 40) { _root.avance=0; _root.velocidad=0; } if (_root.avance == 2) { this._x -= 10;
82
EVALUACIÓN _root.velocidad++ } if (_root.velocidad >= 40) { _root.avance=0; _root.velocidad=0; } if (this._x>=100) { _root.adelante_bot.enabled = false; _root.adelante_bot._alpha = 30; } else { _root.adelante_bot.enabled = true; _root.adelante_bot._alpha = 100; } if (this._x = 40), la variable avance volverá a valer 0 como en un principio y, por lo tanto, ya que las fotografías solamente pueden avanzar cuando la variable valga 1 o 2, se detendrán. Después de que ocurra esto, la variable velocidad también volverá a valer cero para que cuando el usuario vuelva a dar click sobre cualquiera de los botones y de nuevo la variable avance valga 1 o 2, la variable velocidad pueda volver a aumentar un punto cada vez hasta llegar a los 40 puntos y hacer que el movimiento se detenga.
84
EVALUACIÓN Esta cantidad, 40, puede variar dependiendo de cómo hayas acomodado las fotografías. Si cuando pruebes la película y presiones cualquiera de los dos botones debajo de la tira de imágenes las fotografías no avanzan lo suficiente o, al contrario, avanzan más de la cuenta, puedes aumentar o disminuir esta cantidad para ajustar el movimiento.
Hasta ahora todo debería de funcionar bien. Si el usuario da click sobre cualquiera de los dos botones, la tira de imágenes avanza hacia la derecha o izquierda hasta detenerse sobre la siguiente fotografía. Pero, ¿Qué ocurre si llega a la última fotografía y vuelve a presionar el botón? La tira de imágenes continuaría avanzando aunque ya no hubiera más fotografías que ver. Es para esto que escribimos los últimos dos bloques del código. Si la tira de imágenes avanza más allá de los 100 pixeles hacia la derecha (if (this._x>=100)), que es más o menos el momento en que la última fotografía del lado izquierdo sería visible en el centro del escenario, entonces el botón que provoca que las fotografías avancen hacia la derecha, se desactivará para que el usuario ya no pueda volver a presionarlo ( _root.adelante_bot.enabled = false;). También, solamente como efecto visual, el botón se hará casi transparente, indicando gráficamente que está inactivo (_root.adelante_bot._alpha = 30;). Mientras esto no ocurra, es decir, mientras la tira de imágenes no esté más allá de los 100 pixeles sobre su eje X, el botón adelante_bot, continuará activo y completamente visible de modo que el usuario pueda seguir presionándolo. } else {
_root.adelante_bot.enabled = true;
_root.adelante_bot._alpha = 100;
}
Esta cantidad también puede variar. Si el botón se desactiva antes o después de tiempo, puedes aumentar o disminuir la cantidad según sea necesario. El último bloque, hace exactamente lo mismo pero con el botón que provoca que la tira de imágenes avance hacia la izquierda. En la línea de tiempo principal, bloquea todas las capas y asegúrate de que la Máscara esté visible. De las capas Máscara y Galería, selecciona todos los cuadros del tercero en adelante y bórralos (Shift+F5). Así solo quedará el primer cuadro vacío y el segundo cuadro que es aquél que contiene todos los elementos que añadimos en esta actividad. Prueba la película y si todo funciona como debería, guarda tu avance y pasa a la siguiente actividad. En esta última actividad crearemos el contenido de las secciones Información y Contacto. Estas secciones son mucho más simples que la de Portafolio, pero aprenderás algunos códigos muy útiles que podrás aplicar en cualquier otro proyecto de Flash. También insertaremos una imagen para el fondo de la sección principal.
Diseño Multimedia
85
EVALUACIÓN
Actividad 05 Fecha entrega
Contenidos de Información y Contacto Comentarios y necesidades
% de éxito
1. Dentro de la línea de tiempo principal desbloquea la capa Información y selecciona el tercer cuadro. De la Biblioteca de Símbolos arrastra el gráfico FondoInfo y colócalo en el centro del espacio del escenario. 2. Abre el Panel de Acciones del primer cuadro de la capa Acciones y asigna el siguiente código después de las líneas que ya existen: texto = “”
86
EVALUACIÓN 3. Selecciona de nuevo el tercer cuadro de la capa Información. Crea un cuadro de texto que se ajuste al pergamino y abre el Panel de Propiedades. Escribe texto_txt como nombre de instancia del cuadro de texto. Convierte el texto a Dynamic Text y abre el submenú Options. Dentro de la opción Variable escribe _root.texto. Selecciona una fuente que coincida con el estilo del proyecto y asígnale un tamaño de 24 puntos en color negro. Abre el Panel de Acciones del primer cuadro de la capa Acciones y prueba escribir algún texto entre las comillas de la variable texto. Prueba la película. Si has asignado correctamente los nombres de las variables, el texto que escribiste en la variable texto aparecerá sobre el pergamino.
4. Ahora escribe un texto de mucha mayor longitud dentro de la variable texto. Asegúrate de que tenga tantos caracteres, que una parte del escritono quepa en el cuadro de texto que está sobre el pergamino.
Corre la película y comprueba que una sección del texto quede fuera del espacio del cuadro de texto de manera que no pueda ser leído entero. Flash reconoce que el cuadro de texto contiene el escrito entero, pero ya que el espacio del cuadro es reducido, no puede desplegarlo completo.
Diseño Multimedia
87
EVALUACIÓN De la Biblioteca de Símbolos, arrastra una vez más el botón Boton_flecha y colócale sobre el escenario, del lado derecho del pergamino. Con la herramienta Free Transform Tool (Q) haz más pequeña la flecha y rótala noventa grados hacia la izquierda de modo que quede apuntando hacia arriba. Duplica la flecha presionando la tecla Control y arrastrando el botón hacia abajo. Rota el duplicado 180 grados hacia la derecha de modo que quede apuntando hacia el lado contrario y acomoda ambas flechas con una ligera separación entre ellas y centradas a la derecha del pergamino.
5. Abre el Panel de Acciones de la flecha superior y escribe el siguiente código: on (release) { _root.texto_txt.scroll--; }
Con este Script le estamos indicando a Flash que en el momento en que el usuario presione la flecha superior, el texto dentro del cuadro retroceda un punto. (_root.texto_txt.scroll--). Como antes le asignamos el nombre texto_txt al cuadro de texto, este código funciona específicamente para él. Asigna el siguiente código a la flecha que apunta hacia abajo: on (release) { _root.texto_txt.scroll++; }
Este código avanza el contenido del cuadro de texto un punto cada vez que el usuario presione la flecha inferior. Prueba la película. Si has escrito todo bien, el texto debería de avanzar y retroceder cuando presiones las flechas. Guarda los avances y continúa.
6. Ahora haremos el contenido de la sección Contacto.
88
EVALUACIÓN En la línea de tiempo principal, bloquea todas las capas y desbloquea Contacto. Selecciona el cuarto cuadro de esta capa. Desde la Biblioteca de Símbolos arrastra la imagen TarjetaContacto.jpg y céntrala en el espacio vacío del escenario.
7. Crea un cuadro de texto estático de 24 puntos de tamaño de fuente que cubra el primer espacio de la tarjeta de contacto. Escribe Nombre: y tu nombre. Copia este cuadro de texto en los siguientes tres espacios y reemplázalo con los datos que quieras, por ejemplo, el nombre de tu escuela, tu teléfono y tu dirección de correo electrónico.
Selecciona el último cuadro, el del correo electrónico y abre su Panel de Acciones. Dentro del submenú Options localiza la opción Link y escribe: mailto:
[email protected] reemplazando las X por tu dirección de correo. Con ésto hemos creado un link directo a enviarte un E-mail cuando el usuario presione el cuadro de texto. Por último, cambia el color de este texto por un color rojo o cualquier otro que resalte de modo que el usuario note a simple vista que existe alguna diferencia con este texto.
8. Para terminar este ejercicio, bloquea todas las capas de la línea de tiempo principal y desbloquea Índice. Selecciona el primer cuadro de esta capa, la que al principio llamamos Índice y que incluye los tres iconos de las secciones activos.
Diseño Multimedia
89
EVALUACIÓN
De la Biblioteca de Símbolos arrastra la imagen FondoIndice.jpg y colócala sobre el escenario. Prueba la película una última vez. Si todo funciona guarda el proyecto final y publícalo para poder manejarlo fuera de Flash.
Aquí termina el ejercicio Creación de un portafolio virtual. Si quisieras, podrías añadir un botón que regrese al usuario al índice desde cualquier sección, aumentar nuevas secciones e iconos, textos interactivos o refinar algunos de los códigos que escribimos para hacer más dinámica y exacta la navegación dentro del portafolio.
Proyecto de Integración 3 El juego de la galería de tiro La programación del juego de la galería de tiro te permitirá integrar todos los conocimientos que has adquirido en el manejo de Flash. Aprenderás y pondrás en práctica todos los procesos involucrados en la creación de un juego, como la planeación, el diseño de arte, creación de interfaz, programación y depuración.
90
EVALUACIÓN Antes de iniciar con la primera actividad, es importante que comprendas perfectamente los objetivos y reglas del juego. En la escena principal del juego se ve una galería de tiro de feria, con patos de metal que cruzan la pantalla. El encargado de la galería (el tendero) cruza por enfrente de los patos a una velocidad aleatoria.
En forma simple, el objetivo es disparar municiones a todos los patos de metal que se desplazan por el área de juego, sin pegarle al tendero. El movimiento de la mirilla de tiro se hace con el ratón y el clic se usa para disparar.
Por cada pato que tires obtienes 1,000 puntos, pero si le das al tendero pierdes 500 puntos. El juego avanza por rondas. En cada ronda tienes 5 tiros. Para pasar a la siguiente ronda debes alcanzar un puntaje mínimo, múltiplo de 4000, como indica la siguiente tabla: Para pasar a la ronda necesitas acumular: 1 2 3 4 5
4,000 puntos 8,000 puntos 12,000 puntos 16,000 puntos 20,000 puntos
6
24,000 puntos
etcétera
etcétera
En cada ronda aumenta la velocidad de los patos, incrementando así la dificultad del juego. El juego termina cuando no se alcanzan los puntos suficientes para pasar de ronda.
Puedes ver el juego terminado ShootOut.exe en la carpeta ShootOut de tu CD de trabajo o carpeta de actividades.
Diseño Multimedia
91
EVALUACIÓN Actividad 01
Fecha entrega
Creando un pato Comentarios y necesidades
% de éxito
1. Abre en Flash la película ShootOut.fla que se encuentra en la carpeta ShootOut de tu CD de trabajo o carpeta de actividades. Esta película tiene un único layer y un sólo cuadro con el diseño de fondo del juego. Abre la biblioteca y comprueba que existen algunos símbolos, que serán los que usarás en las actividades. Como en este juego trabajaremos con muy pocos frames, será más cómodo visualizar la línea de tiempo en su versión con cuadros grandes. Elige la opción Large del menú de control que está en el extremo superior derecho de la línea de tiempo.
2. Directamente en la esquina inferior izquierda de la biblioteca de símbolos, presiona el botón New Symbol. Dale al nuevo símbolo el nombre pato y define el comportamiento de MovieClip. 3. Al presionar el botón OK entrarás al modo de edición del nuevo Movie Clip. El Movie Clip tiene su propia línea de tiempo, que por ahora consta de un sólo layer con un sólo frame vacío. Renombra el layer existente como pato e inserta Keyframes (Menú Insert/Timeline/Keyframe o tecla ) en los cuadros 1, 2 y 3 de este layer. Observa la figura:
92
EVALUACIÓN
4. De la biblioteca arrastra el símbolo de patoUp hacia el área de trabajo, asegurándote que quede en el frame 1. Mueve la figura para que su base quede alineada con la pequeña cruz que aparece al centro del área de trabajo de Flash. 5. Para terminar de detallar la figura vamos a aplicar color al pico, la cabeza y al pecho del pato. Selecciona la herramienta Brush (Brocha) y en la parte inferior del Panel de herramientas, en la sección de opciones de las herramientas, selecciona el modo Paint Inside. En este modo, la brocha pinta únicamente dentro de las áreas en las que se aplica. Utiliza un grosor y color apropiados y pinta las sombras como se muestra en el ejemplo. Abre el símbolo y utiliza la herramienta Paint Bucket Tool (Cubeta) y/o el Panel de propiedades para darle color al pato. 6. Cuando tu primera imagen esté bien detallada, selecciónala con la herramienta de selección de Flash y cópiala al portapapeles. Después selecciona en la línea de tiempo el Keyframe 2 y pega la imagen utilizando las teclas o el Menú Edit/Paste in Place, para asegurarte que la copia queda exactamente en la misma posición que el original. 7. Ahora tienes la misma imagen en los Keyframes 1 y 2 del Movie Clip. Usaremos el Keyframe 2 para simular el instante en que un tiro le pega al pato, por lo que sólo hay que agregar el efecto de golpe. Colorea el símbolo de chispas utilizando colores amarillo y naranja y después arrastra el símbolo sobre el pato como muestra la figura.
8. Ahora selecciona el Keyframe 3 de la línea de tiempo del Movie Clip, que usaremos para mostrar el pato caído (arrastra el símbolo de patoDown al área de trabajo, asegúrate de alinear la figura a la base ayudándote de la cruz del centro). Abre el símbolo patoDown y dale detalles de la misma manera que hiciste con el pato en posición normal.
Diseño Multimedia
93
EVALUACIÓN 9. Selecciona el keyframe 2 en la línea de tiempo y utiliza el Panel de propiedades para asignar el sonido a este frame. 10. Para que cuando tires el pato, permanezca un tiempo así antes de levantarse de nuevo, selecciona el cuadro 6 en la línea de tiempo del pato e inserta un frame con Menú Insert/Timeline/Frame o la tecla . Prueba de nuevo el movimiento con la tecla .
11. Ya casi está terminado el pato con su efecto de caída, sólo falta agregar un poco de código. Inserta un nuevo layer y nómbralo Acciones. En el nuevo layer inserta un Keyframe en el cuadro 6. Selecciona el Keyframe 6 del nuevo layer y abre el Panel de acciones para insertar la acción stop();. 12. Regresa a la línea de tiempo principal presionando el botón Scene1 en la parte superior de la línea de tiempo. Comprueba que el Movie Clip pato ha quedado en la Biblioteca de símbolos. 13. Ahora crea un nuevo símbolo. Directamente en la esquina inferior izquierda de la Biblioteca de símbolos, presiona el botón New Symbol. Dale al nuevo símbolo el nombre pato_btn y define el comportamiento de botón. 14. Al presionar el botón Ok entrarás al modo de edición del nuevo botón. Un botón tiene su propia línea de tiempo con cuatro estados predefinidos que son: Up (estado inactivo, cuando el puntero no toca el botón), Over (cuando el puntero del mouse está encima del botón), Down (cuando se ha dado click sobre el botón) y Hit (el área sobre la cual se puede activar el botón).
94
EVALUACIÓN Para este ejercicio necesitamos colocar la instancia patoUp en las dos primeras casillas de nuestro botón (Up y Over) y dentro del tercer cuadro (Down) el Movie Clip de la animación del pato cayendo que creamos anteriormente. Crea un Keyframe para cada una de las cuatro casillas (F6), selecciona el cuadro 1 y arrastra desde la biblioteca el símbolo patoUp. Centra el dibujo usando como guía la cruz en el escenario. Repite este paso para la segunda casilla (Over). Da click en el tercer frame y arrastra de la biblioteca el MovieClip pato. Asegúrate que esté en la misma posición que las imágenes de los cuadros anteriores. Por último, da click sobre el cuarto fame y arrastra de nuevo patoUp al centro del escenario. Ahora hemos definido los cuatro estados en que se puede encontrar el botón en cualquier momento, de modo que la animación del pato cayendo no corra hasta que el jugador dé click sobre el botón.
15. Prueba la película con . Si has realizado bien los pasos de esta actividad, al hacer clic sobre el pato en el escenario, éste se cae y después de un instante se levanta mientras se escucha el efecto de golpe. Si has logrado este objetivo, guarda los avances en tu carpeta personal, con el nombre ShootOut01.fla. Utilizarás esta película en la siguiente actividad.
Actividad 02
Fecha entrega
Preparando el escenario Comentarios y necesidades
% de éxito
1. Abre el archivo terminado de la actividad anterior. Elimina el pato que colocaste en el escenario para probar esa actividad y asegúrate que sólo que de el fondo sobre el escenario. 2. Selecciona el frame 4 en la línea de tiempo e inserta un frame con el Menú Insert/Timeline/Frame. Esto simplemente alarga la duración del fondo a 4 cuadros. Bloquea el layer Fondo para que ya no se modifique.
Diseño Multimedia
95
EVALUACIÓN 3. Inserta un nuevo layer y nómbralo Patos. Inserta un tercer layer y nómbralo Acciones. En el layer Acciones, inserta un Keyframe en los cuadros 1, 2, 3 y 4. Utiliza el Panel de propiedades para etiquetar cada Keyframe del layer Acciones como se indica a continuación: Keyframe 1: inicio Keyframe 2: instrucciones Keyframe 3: juego Keyframe 4: pierdes De ahora en adelante nos referiremos a cada Keyframe por su nombre. Por ejemplo, si se te pide seleccionar el frame pierdes del layer Acciones, debes seleccionar el cuadro 4 de ese layer. 4. Selecciona el Keyframe juego (cuadro 3) del layer Acciones y en su Panel de acciones agrega la instrucción stop(); para detener en este punto la reproducción de la película. 5. Selecciona el frame juego del layer Patos e inserta un Keyframe con el Menú Insert/Timeline/Keyframe o la tecla . Con este Keyframe seleccionado en la línea de tiempo, arrastra de la biblioteca al escenario una instancia del símbolo pato_btn. 6. Escala la imagen del pato y acomódala sobre el fondo en un extremo de la línea que representa el primer carril. 7. Después utiliza el Menú Edit/Duplicate para obtener 4 copias del pato. Acomódalas sobre el fondo como se muestra en la figura, de modo que ocupen todo el ancho de la escena. Trata de dejar 80 píxeles entre pato y pato. Puedes mostrar las reglas con Menú View/Rulers para guiarte mejor.
96
EVALUACIÓN
8. Selecciona los 4 patos en el escenario y alinea sus bases con el Menú Modify/Align/Bottom. Aún con los patos seleccionados, utiliza el Menú Modify/Align/Distribute Widths para que las figuras queden igualmente espaciadas entre sí. En este punto puedes probar la película y comprobar que los patos (por ahora estáticos) pueden tirarse haciendo un clic sobre ellos. Comprueba este objetivo parcial antes de continuar. 9. Ahora, vamos a programar una ingeniosa forma de simular el movimiento continuo de los patos sobre el carril. Antes de realizar cada paso analiza y entiende lo que se va a hacer. Vas a crear un símbolo que contenga el primer grupo de 4 patos y que se llamará simplemente patos. Para ello, primero selecciona los 4 patos sobre el escenario y conviértelos a Movie Clip con el Menú Modify/Convert to Symbol. Dale al símbolo el nombre patos, como se muestra en la figura.
Ahora en el escenario hay una instancia del símbolo patos. Utiliza el Panel de propiedades para darle a esta instancia el nombre patos_mc. Recuerda que nombrar las instancias es muy importante, porque los nombres se utilizan en la programación. 10. Después vas a crear otro Movie Clip con el nombre tiradepatos, que contenga al Movie Clip patos_mc. Simplemente, selecciona la instancia patos_mc que ya está en el escenario y utiliza de nuevo el Menú Modify/Convert to Symbol, dando al nuevo símbolo el nombre tiradepatos. Para evitar confusiones, selecciona la nueva instancia y dale, en el Panel de propiedades, el nombre tiradepatos_mc.
En este punto tendrás entonces 3 Movie Clips anidados: El Movie Clip tiradepatos_mc, que contiene al Movie Clip patos_mc, que contiene 4 instancias del botón pato_btn.
Diseño Multimedia
97
EVALUACIÓN
11. Te preguntarás para qué hemos creado el Movie Clip tiradepatos_mc, que contiene al Movie Clip patos_mc. La razón es que usaremos código para duplicar el Movie Clip interno dentro del Movie Clip que lo contiene. De esta forma, tiradepatos_mc servirá como un contenedor, dentro del cual existirá 2 veces patos_mc. Selecciona la instancia tiradepatos_mc que está en el escenario. Abre el Panel de acciones de esta instancia y asigna el siguiente código, revisando (como siempre) que lo estás aplicando al objeto adecuado (tiradepatos_mc): onClipEvent (load) { patos_mc.duplicateMovieClip(“patos2_mc”,100); patos2_mc._x = patos_mc._x+patos_mc._width+80; }
Analicemos este código. Como las instrucciones están dentro del handler del evento load, se ejecutarán tan pronto como el objeto tiradepatos_mc aparezca en el escenario. La primera instrucción indica que el objeto patos_mc (que está dentro del objeto en que estás escribiendo el código) se debe duplicar. La copia tendrá el nombre patos2_mc. La segunda instrucción indica que la coordenada X (posición en el eje horizontal) del objeto patos2_mc (la copia), será igual a la coordenada X del objeto patos_mc más el ancho de este objeto más 80 píxeles. Los 80 píxeles se suman para que el último pato del primer grupo no quede pegado al primer pato del segundo grupo. 12. Prueba la película con . Ajusta el tamaño horizontal de la ventana de modo que, si has nombrado bien las instancias y escrito correctamente las instrucciones, debes ver que el Movie Clip tiradepatos_mc contiene ahora 2 veces a patos_mc, es decir, verás 8 patos en el escenario. Como todos provienen del objeto original, comprueba que puedes hacer clic sobre ellos para tirarlos.
13. Guarda la película probada en tu carpeta personal, con el nombre ShootOut02.fla. Esta película se requiere en la siguiente fase del proyecto.
98
EVALUACIÓN Actividad 03
Fecha entrega
Moviendo la tira de patos Comentarios y necesidades
% de éxito
1. Abre el archivo de la actividad anterior. En esta fase del proyecto de la galería de tiro vamos a hacer que se mueva la tira de patos que creaste en esa actividad. Selecciona el Movie Clip tiradepatos_mc que está en el frame juego del layer Patos. No escribas código en este punto. Sólo comprende lo que se va a realizar.
Recuerda que el Movie Clip tiradepatos_mc duplica dentro de sí mismo al Movie Clip patos_mc, dando como resultado una tira de 8 patos en el escenario. Ahora hay que mover horizontalmente por el escenario al Movie Clip tiradepatos_mc, de derecha a izquierda. Cuando los primeros 4 patos hayan salido de escena, colocaremos nuevamente a tiradepatos_mc en su posición de partida: 2. Primero, necesitamos guardar la posición de partida en una variable que llamaremos inicio. Dentro del handler del evento load de la instancia tiradepatos_mc, agrega la siguiente instrucción. La nueva línea se muestra en negritas. onClipEvent (load) { patos_mc.duplicateMovieClip(“patos2_mc”,100); patos2_mc._x = patos_mc._x+patos_mc._width+80; inicio=this._x; }
Diseño Multimedia
99
EVALUACIÓN 3. Para que tiradepatos_mc se mueva continuamente, escribiremos el código que cambia su posición X dentro del handler del evento enterFrame de este objeto. En el Panel de acciones agrega el siguiente código. Las nuevas instrucciones se muestran seleccionadas en la figura:
Estas simples líneas indican que la posición X del Movie Clip donde se escribe el código (por eso se usa la palabra this) disminuirá su valor en 10 unidades constantemente, moviéndose a la izquierda en consecuencia. Quizás te preguntes por qué debería moverse la tira de patos si se colocó un stop(); en el cuadro 3 de la línea de tiempo principal y la película está detenida. La razón es que, aunque la película en efecto está detenida, el Movie Clip tiradepatos_mc en el escenario se sigue reproduciendo porque su propia línea de tiempo no está detenida. Por lo tanto, el Movie Clip continúa disparando su evento enterFrame constantemente. Si lo deseas, puedes probar la película en este punto y comprobar el movimiento de la tira de patos.Hasta ahora, no hemos especificado ningún límite, por lo que los patos seguirán moviéndose a la izquierda hasta perderse. 4. Con el fin de controlar posteriormente la velocidad del movimiento de la tira de patos, en vez de utilizar un valor fijo usaremos una variable llamada velocidad. Inicialmente, la variable velocidad tendrá un valor 10, pero más adelante se incrementará en el juego. Agrega en el handler del evento load de tiradepatos_mc la instrucción para inicializar la variable. Cambia también el valor de 10 en la instrucción del desplazamiento, por la variable velocidad. onClipEvent (load) { patos_mc.duplicateMovieClip(“patos2_mc”,100); patos2_mc._x = patos_mc._x+patos_mc._width+80; inicio=this._x; velocidad=10; }
onClipEvent (enterFrame) { this._x-=velocidad;
} 100
EVALUACIÓN 5. Ahora, hay que agregar un condicional que verifique si la tira de patos se ha desplazado el equivalente al ancho de un Movie Clip patos_mc, en cuyo caso debe regresar a la posición inicial (al valor de la variable inicio que se registró en el evento load). Observa la figura:
Dentro del handler del evento enterFrame, después de la instrucción de movimiento, agrega las siguientes líneas. Las nuevas instrucciones se muestran en negritas:
onClipEvent (enterFrame) {
this._x-=velocidad;
if (this._x= (inicio+patos_mc._width)){ this._x=inicio+80-velocidad; } }
Diseño Multimedia
101
EVALUACIÓN
8. Prueba la película. Debes comprobar que las dos tiras de patos se mueven de forma continua en direcciones opuestas y que el movimiento parece sin fin. Si has logrado este objetivo puedes guardar el avance con el nombre ShootOut03.fla y pasar a la siguiente actividad.
Actividad 04
Fecha entrega
El tendero Comentarios y necesidades
% de éxito
1. Abre el archivo de la actividad anterior. Hasta este punto, tienes los blancos desplazándose por el escenario. Incluso puedes hacer clic sobre cualquiera para ver cómo se caen. Antes de agregar instrucciones para llevar un puntaje, vamos a crear al tendero que cruza constantemente por la galería para dificultar el juego. 2. Directamente en la Biblioteca de símbolos, en la esquina inferior izquierda, presiona el botón New Symbol. Dale al nuevo símbolo el nombre tendero y define el comportamiento de Movie Clip.
102
EVALUACIÓN Al presionar el botón OK entrarás al modo de edición del nuevo Movie Clip. El Movie Clip tiene su propia línea de tiempo, que por ahora consta de un sólo layer con un sólo frame vacío. Renombra el layer existente como tendero e inserta un keyframe (Menú Insert/Timeline/Keyframe) en los cuadros 1 y 2 de este layer. 3. Abre el símbolo del tendero1 de la biblioteca y utiliza la herramienta Paint Bucket Tool (cubeta) y/o el Panel de propiedades para darle color. Con la herramienta Brush (brocha), en su modo Paint Inside, aplica sombras para detallar la figura. Haz lo mismo con el símbolo tendero2. Una vez que tengas detalladas las imágenes, selecciona de la biblioteca el Movie Clip de tendero. Selecciona el keyframe1 y arrastra el símbolo del tendero1 al área de trabajo. Mueve la figura para que quede alineada con la pequeña cruz que aparece al centro del área de trabajo.
4. Ahora selecciona el keyframe 2 de la línea de tiempo del Movie Clip, que usaremos para mostrar al tendero adolorido. Arrastra de la biblioteca la silueta del tendero en esta posición (tendero2) al área de trabajo de Flash. Centra la figura ayudándote de la cruz guía. 5. Para alargar la duración del tendero en su segunda posición, selecciona el cuadro 5 en la línea de tiempo e inserta un frame con Menú Insert/Timeline/Frame. Prueba de nuevo el movimiento con la tecla . 6. Selecciona el keyframe 2 en la línea de tiempo y utiliza el Panel de propiedades para asignar el sonido ouch.wav a este frame.
7. Ya casi está terminado el tendero con su efecto de dolor. Inserta un nuevo layer y nómbralo Acciones. En el nuevo layer, inserta un keyframe en el cuadro 6. Selecciona el keyframe 6 del nuevo layer y abre el Panel de acciones para insertar la acción stop();. 8. Regresa a la línea de tiempo principal presionando el botón [Scene1] en la parte superior de la línea de tiempo. Comprueba que el Movie Clip tendero ha quedado en la Biblioteca de símbolos. Crea primero un nuevo layer en la línea de tiempo principal y nómbralo Tendero. El layer Tendero debe quedar arriba del layer Patos, ya que nuestro personaje pasará por enfrente de los patos durante el juego.
Diseño Multimedia
103
EVALUACIÓN
9. Directamente en la esquina inferior izquierda de la Biblioteca de Símbolos, presiona el botón New Symbol. Dale al nuevo símbolo el nombre Tendero_btn y define el comportamiento de botón. Presiona OK. Al igual que el botón del pato, tenemos que definir las imágenes que se mostrarán en los diferentes estados del botón. Crea un KeyFrame para cada uno de los cuatro cuadros y arrastra desde la biblioteca el símbolo tendero 1 al área de trabajo para el frame 1, 2 y 4, e inserta el Movie Clip tendero en el frame 3. Asegurate de que las imágenes de los cuatro cuadros estén en la misma posición.
Regresa a la línea de tiempo principal, e inserta un Keyframe en el tercer cuadro (juego) del layer tendero. Con este nuevo Keyframe seleccionado arrastra el símbolo tendero_btn de la biblioteca a cualquier lugar del escenario.
10. Para este ejercicio es necesario que nuestro botón tendero_btn tenga algunos comportamientos de Movie Clip. Selecciona la instancia de tendero_btn y presiona F8 para volverlo a convertirlo en símbolo. Asígnale el nombre tendero_mc y define el comportamiento de Movie Clip. Usando el panel de propiedades asígnale de nuevo el nombre tendero_mc como nombre de instancia. 11. Prueba la película con . Si has realizado bien los pasos de esta actividad, al hacer clic sobre el tendero en el escenario, éste se queja y cambia de posición para regresar poco después a su estado original. Si has logrado este objetivo, guarda los avances en tu carpeta personal, con el nombre ShootOut04.fla. Utilizarás esta película en la siguiente actividad.
104
EVALUACIÓN Actividad 05
Fecha entrega
Moviendo al tendero Comentarios y necesidades
% de éxito
1. Abre el archivo terminado de la actividad anterior. Ubica en la línea de tiempo el frame juego del layer Tendero. Si es necesario, cambia el tamaño del tendero en el escenario para que al pasar alcance a bloquear los patos de arriba y los de abajo, sin que se vea desproporcionado. Alínealo con el fondo para que parezca que pasa detrás del mostrador de la galería de tiro. 2. Ahora hay que definir el movimiento de este Movie Clip. Antes que nada, revisa en el Panel de propiedades que la instancia del tendero en el escenario tiene el nombre tendero_mc. Nunca olvides la importancia de nombrar las instancias de símbolos que haya en el escenario. Una vez nombrada la instancia, hay que ubicarla en su punto de partida, fuera del área de juego. Como el área de juego es de 640 píxeles, puedes usar el Panel de propiedades para colocar al tendero en la coordenada X= 680 y así asegurarte que queda fuera.
Diseño Multimedia
105
EVALUACIÓN
3. Antes de agregar el código de movimiento, trata de entender muy bien lo que se quiere hacer. El código se agregará en el siguiente paso. En el momento en que el tendero aparezca en la línea de tiempo (aunque esté fuera del área de juego), hay que inicializar una variable llamada velocidad. Al inicio del juego la velocidad del tendero será 20, pero en cada recorrido que haga cambiará aleatoriamente. Usaremos el evento enterFrame para mover continuamente la instancia y revisar si ya recorrió toda el área de juego. El ancho del tendero es aproximadamente 200 píxeles, por lo que podemos estar seguros que ha cruzado el extremo izquierdo del escenario si su coordenada X es menor que -250 píxeles. También, en el caso de que el tendero haya completado un recorrido, se recalculará la velocidad de forma aleatoria. En Action Script, la instrucción Math.random() se utiliza para generar un número aleatorio entre 0 y 1. Si quisieras obtener un número aleatorio entre 0 y un valor máximo dado, basta multiplicar Math.random() por ese valor máximo. En nuestro caso, usaremos la instrucción Math.random()*40 para generar un número aleatorio entre 0 y 40. Pero para que la velocidad del tendero nunca sea menor a 20, sumamos este valor en Math.random()*40 +20 para generar un número aleatorio entre 20 y 60.
4. Si has comprendido el paso anterior, agrega a la instancia tendero_mc el siguiente código:
onClipEvent (load) {
velocidad=20;
}
onClipEvent (enterFrame) {
this._x-=velocidad;
if (this._x< -250){
velocidad=Math.random()*40+20;
this._x=650;
}
106
}
EVALUACIÓN
5. Prueba la película. La instancia tendero_mc debe cruzar de derecha a izquierda hasta abandonar el área de juego, después debe reaparecer por la derecha avanzando a una velocidad diferente; si lo deseas, puedes modificar los valores en el código para ajustar la velocidad mínima o máxima como te parezca mejor. Prueba también que puedes hacer clic sobre el personaje y ver su reacción. 6. Revisa que hayas alcanzado los objetivos de esta fase. Detalla y corrige cualquier problema antes de continuar. Guarda la película como ShootOut05.fla para seguir a la próxima fase.
Actividad 06 Fecha entrega
Llevando el puntaje Comentarios y necesidades
% de éxito
1. Abre la película revisada en la actividad anterior. En este punto debes tener una agradable interfaz de juego, con patos móviles y la figura del tendero que pasa frente a ellos continuamente. Sin embargo, el juego no es divertido si no tiene un reto. Lo primero que harás será llevar el puntaje del juego. Para ello, hay que crear un texto dinámico al que se le asigna el valor de una variable. Cada vez que le das a un pato, la variable se incrementa en 1,000 puntos y cada vez que le das al tendero la variable baja 500 puntos. Empecemos a trabajar.
Diseño Multimedia
107
EVALUACIÓN 2. Inserta un nuevo layer y nómbralo Estatus. Para mayor facilidad ubica este layer justo encima del layer Fondo. En el nuevo layer, selecciona el frame juego (cuadro 3) e inserta un Keyframe. Utiliza la herramienta de texto para crear 3 textos estáticos en el escenario, con las palabras “Puntos:”, “Ronda:” y “Tiros:”, respectivamente. Ubica estos textos en el borde del mostrador de la galería, como se muestra en la figura:
3. A un lado del texto “Puntos:” inserta un texto dinámico, que posteriormente usaremos para desplegar la puntuación del juego. Para que el texto sea dinámico, al crearlo selecciona Dynamic text en el Panel de propiedades. Después dale a este texto el nombre puntos_txt. Es importante nombrar el texto para usarlo en la programación. De manera similar, crea junto al texto “Ronda:” otro texto dinámico que debes nombrar ronda_txt. Observa las siguientes figuras: 4. Ahora hay que asignar código. El puntaje se guardará en una variable global que llamaremos score. Recuerda que una variable global puede reconocerse desde cualquier objeto y cualquier línea de tiempo, lo que permitirá referirnos a ella desde un frame, desde un pato o desde el tendero. Selecciona el frame juego del layer Acciones y abre el Panel de acciones para agregar la instrucción que inicializa la variable global score en 0. Esta instrucción se ejecutará cuando la película llegue a este cuadro, es decir, cuando inicie el juego. Además, agrega una acción que asigne al texto dinámico puntos_txt el valor de la variable score. El contenido de un texto dinámico se define por medio de su propiedad text, por lo tanto, las nuevas líneas quedan así: _global.score=0;
puntos_txt.text= _global.score;
stop();
Prueba en este punto la película y comprueba que en el texto puntos_txt aparece el valor inicial de la variable score, es decir, un cero.
108
EVALUACIÓN 5. Selecciona la instancia tendero_mc, da click derecho sobre ella y presiona editar. Dentro del símbolo da click derecho sobre tendero_btn y abre su Panel de acciones. Agrega una instrucción que baje en 500 el valor de la variable score. Si pones la instrucción en el evento press, ocurrirá sólo cuando hagas clic sobre el personaje.
on (press){
_global.score -=500;
_root.puntos_txt.text =_global.score;
}
Observa que además de disminuir la variable score, se incluyó la acción que asigna su valor al texto dinámico puntos_txt. Nota que se antepuso la palabra _root al nombre del texto dinámico. Esto es necesario porque el código se está creando dentro de un objeto (tendero_mc) y el texto dinámico no está en la línea de tiempo de ese objeto, sino en la línea de tiempo principal. La palabra _root siempre hace referencia a la línea de tiempo principal. 6. Prueba la película y revisa que el puntaje que se muestra en el texto dinámico baja 500 puntos cada vez que haces clic sobre el tendero. No sigas adelante hasta haber logrado este objetivo parcial. 7. Ahora hay que aplicar un código similar a los patos. Recuerda que en el escenario hay un Movie Clip llamado tiradepatos_mc, dentro del cual está el Movie Clip patos_mc y dentro del cual están 4 instancias del símbolo pato. El código que incrementa el puntaje cuando haces clic en los patos debe asignarse a cada instancia del símbolo pato_btn. Para ello, haz doble clic sobre tiradepatos_mc para abrir el símbolo y ver dentro patos_mc. Haz luego doble clic sobre patos_mc y se abrirá este símbolo con cada instancia del símbolo pato_btn en su interior. Revisa que estás en el nivel adecuado observando los botones de la parte superior de la línea de tiempo. La línea de tiempo que ves es la del último símbolo abierto. 8. Selecciona el primer pato y abre su Panel de acciones. Agrega el código que hará que la variable global score aumente 1,000 puntos cuando se haga clic sobre el objeto. Incluye también la línea que actualiza el valor del texto dinámico. on(press){
_global.score +=1000;
_root.puntos_txt.text =_global.score;
}
Diseño Multimedia
109
EVALUACIÓN De manera similar, antes de regresar a la línea de tiempo principal, asigna el mismo código a los demás patos contenidos en patos_mc. Sólo necesitarás aplicar el código a los 4 primeros patos, ya que los demás son copias.
9. Regresa a la escena principal y prueba la película. Si todo es correcto, debes ver un incremento de 1,000 puntos en el texto dinámico cada que haces clic sobre un pato (cualquiera). Revisa de nuevo que pierdes 500 puntos por cada tiro al tendero. Una vez cumplidos estos objetivos, guarda la película como ShootOut06.fla para pasar a la siguiente actividad.
Actividad 07 Fecha entrega
La mirilla Comentarios y necesidades
% de éxito
1. Abre la película terminada de la actividad anterior. En esta fase del proyecto de la galería vas a sustituir el puntero estándar del ratón por la mirilla de tiro. La mirilla será un Movie Clip sobre el escenario y sólo se requerirán dos acciones. Primero, harás que la mirilla se pegue al puntero del ratón, de manera que ésta se mueva a donde muevas aquél. Después se oculta el puntero estándar del ratón para que sólo se vea la mirilla.
110
EVALUACIÓN
2. Crea un nuevo layer y nómbralo Mirilla. Es importante que el layer Mirilla quede arriba de los layers de los patos y el tendero, para que la mira siempre este al frente. Selecciona el frame “juego” (cuadro 3) del layer Mirilla e insera un Keyframe. Para mejor control, bloquea todos los layers excepto el de la mirilla y deja seleccionado el Keyframe juego de este último layer. 3. Arrastra de la biblioteca el símbolo de mira hacia cualquier lugar sobre el escenario. Si lo consideras necesario, cambia el tamaño de la mirilla para que mida aproximadamente dos tercios de la altura de los patos. 4. Convierte la mirilla a Movie Clip con el Menú Modify/Convert to Symbol o la tecla . Dale al nuevo símbolo el nombre mirilla y asegúrate que eliges el punto central de registro, para que el centro del símbolo sea el centro de la mirilla. Esto es importante ya que este centro será el punto de disparo. 5. Lo que tienes ahora en el escenario es una instancia del nuevo Movie Clip creado. Selecciónala y usa el Panel de propiedades para darle el nombre mirilla_mc. 6. Ahora vamos a agregar un sonido de disparo a la línea de tiempo de la mirilla. Directamente en la biblioteca, haz doble clic sobre el símbolo mirilla para ver su línea de tiempo, que por ahora tiene un sólo layer y un sólo frame. Inserta un keyframe en el cuadro 2 de su línea de tiempo. Asigna al keyframe 2 de la línea del tiempo del símbolo, el sonido de tiro.wav. 7. En la línea de tiempo del símbolo de la mirilla, inserta un nuevo layer y nómbralo Acciones. Asigna al primer cuadro de este layer la acción stop(); para que la reproducción interna de la mirilla se detenga en el cuadro 1 y no se escuche el sonido normalmente. 8. Después de asignar la acción, regresa a la escena principal y selecciona la mirilla en el escenario. Abre su Panel de acciones para agregar el siguiente código:
onClipEvent(mouseDown){
this.play();
}
Diseño Multimedia
111
EVALUACIÓN ¿Qué es lo que acabas de hacer? Cuando se presiona el botón del ratón ocurre el evento mouseDown en el Movie Clip mirilla_mc. La instrucción this.play(); indica que se reproduzca la línea de tiempo propia de este objeto, que es donde agregaste el sonido. Si en este momento pruebas la película, debes comprobar que se escucha el sonido de disparo siempre que haces un clic, ya sea que le des o no a los patos o al tendero. Antes de continuar asegúrate de cumplir este objetivo. Guarda tu archivo como ShootOut07.fla. Ahora selecciona la instancia mirilla_mc en el escenario y abre su Panel de acciones. Asigna al handler del evento load, las dos instrucciones que se explicaron en el paso 1 de esta actividad. La primera acción hace que la mirilla se pegue al puntero del ratón, de modo que se muevan juntos. La segunda acción oculta el puntero del ratón.
onClipEvent (load) {
this.startDrag(true);
Mouse.hide();
}
Prueba la película y comprueba que el puntero original del ratón está oculto. Además el Movie Clip mirilla_mc debe moverse con el ratón. Prueba disparar a los patos. Cuando hayas logrado este primer objetivo continúa con el siguiente paso.
Actividad 08
Fecha entrega
Limitando los tiros y cambiando la ronda Comentarios y necesidades
% de éxito
1. Abre la película terminada de la actividad anterior. Para que el juego sea interesante hay que agregar un reto más. Al inicio del juego se tendrán solamente 5 tiros disponibles. Cada que se hace un disparo se descuenta un tiro. Después de 5 disparos, si el puntaje que está en la variable global score es igual o superior a 4,000 puntos, entonces el juego cambia de ronda y se tienen nuevamente 5 tiros disponibles.
112
EVALUACIÓN 2. El juego continúa sólo si en cada ronda se alcanza un puntaje mínimo múltiplo de 4,000, es decir, 4,000 en la ronda uno, 8,000 en la ronda dos, 12,000 en la ronda tres, etcétera. Notarás que el puntaje mínimo de la ronda actual es igual a 4,000 multiplicado por el número de ronda. Lo primero que harás será definir una nueva variable global llamada ronda, que servirá para saber en qué nivel se está jugando. Inicialmente tendrá el valor de 0. Selecciona el frame juego del layer Acciones y agrega la línea que inicializa la variable y la línea que asigna su valor al texto dinámico ronda_txt. Las nuevas instrucciones se muestran en negritas:
_global.score=0;
puntos_txt.text= _global.score=0;
_global.ronda=0;
ronda_txt.text= _global.ronda;
stop();
3. Ahora, vamos a crear un nuevo Movie Clip que muestre gráficamente, a un lado del texto estático “Tiros:”, los tiros disponibles en la ronda actual. Selecciona el frame juego del layer Estatus. Arrastra de la biblioteca el símbolo esfera y colócalo en el área de trabajo. Ahora duplica 4 veces la esfera que copiaste al escenario y acomoda las 5 esferas como se muestra en la figura. Utiliza el Menú Modify/ Align/Vertical Center para alinear las esferas y distribúyelas uniformemente con el Menú Modify/ Align/Distribute Widths. 4. Teniendo seleccionadas las 5 esferas, conviértelas a Movie Clip con la tecla o el Menú Modify/ Convert to Symbol. Dale al nuevo símbolo el nombre tiros. Ahora tienes en el escenario una instancia de este nuevo símbolo. Usa el Panel de propiedades para nombrar la instancia como tiros_mc. 5. Haz doble clic sobre el símbolo para entrar a su línea de tiempo, que inicialmente tiene un sólo layer con un frame. Inserta un Keyframe en el cuadro 2 de esta línea de tiempo. Ahora tienes el mismo contenido en los Keyframes 1 y 2 de la línea de tiempo del símbolo tiros. El Keyframe uno servirá para mostrar los 5 tiros disponibles. Déjalo como está. En el keyframe 2 se verán 4 tiros disponibles. Selecciona el Keyframe 2 y elimina la última esfera. Inserta un Keyframe en el cuadro 3 de la línea de tiempo y elimina una esfera más para mostrar 3 tiros disponibles. Después inserta un Keyframe en el cuadro 4 y deja sólo 2 esferas. Inserta Keyframes en los cuadros 5 y 6 para dejar una y ninguna esfera, respectivamente. Presiona la tecla varias veces para simular cómo irán bajando los tiros disponibles.
Diseño Multimedia
113
EVALUACIÓN
6. Ahora bien, si dejas el Movie Clip de los tiros tal y como está, verás que corre continuamente y no sólo cuando se dispara. Lo primero que debes hacer es detener la reproducción interna del Movie Clip. Agrega un layer y nómbralo Acciones. En el cuadro 1 del nuevo layer asigna la instrucción stop(); para que inicialmente sólo se muestre el primer cuadro del Movie Clip (5 tiros disponibles). 7. Para terminar de definir este Movie Clip, falta asignar las instrucciones que deben ocurrir cuando se agotan los tiros. Inserta un Keyframe en el cuadro 6 del layer Acciones de la línea de tiempo del símbolo tiros. Selecciona este nuevo Keyframe y abre el Panel de acciones para asignar código. Sabemos que al agotarse los tiros hay incrementar en 1 el número de ronda y mostrar el nuevo valor en el texto dinámico ronda_txt. Esto se logra agregando las siguientes líneas:
_global.ronda +=1;
_root.ronda_txt.text=_global.ronda;
Observa que se antepuso la palabra _root al nombre del texto dinámico, porque éste se encuentra en la línea de tiempo principal y no en la línea de tiempo del Movie Clip donde estás escribiendo el código. Cuando se agoten los tiros también hay que revisar si la puntuación del juego es igual o mayor a 4,000 multiplicado por el número de ronda actual. Si se alcanzó el puntaje mínimo de la ronda (_global. score>=_global.ronda*4000), entonces hay que hacer dos cosas: a. Regresar al cuadro 1 de la línea de tiempo de los tiros, para mostrar las 5 esferas disponibles. gotoAndStop(1);
b. Incrementar la velocidad de las dos tiras de patos en 5 unidades: _root.tiradepatos_mc.velocidad +=5; _root.tiradepatos2_mc.velocidad +=5;
114
EVALUACIÓN Si no (else) se alcanza el puntaje mínimo de la ronda, entonces el juego termina. También es necesario regresar al cuadro 1 de la secuencia para que cuando se cargue de nuevo el juego se vean las balas. El mensaje de fin de juego estará en la línea de tiempo principal (_root), en el frame etiquetado como “pierdes”. El código completo se muestra en la figura. Asegúrate que se asigna al frame 6 del layer de Acciones del símbolo tiros, es decir, al cuadro que representa que los tiros disponibles se han agotado. _root.ronda_txt.text = _global.ronda; if (_global.score>=_global.ronda*4000){ gotoAndStop(1);
_root.tiradepatos_mc.velocidad +=5;
_root.tiradepatos2_mc.velocidad +=5;
_global.ronda += 1;
} else { _root.gotoAndStop(“pierdes”); gotoAndStop(1); }
8. Para terminar de definir el Movie Clip de los tiros, vamos a agregar un sonido al cuadro 1 de la línea de tiempo. Como el sonido se escuchará cada que la línea de tiempo regrese al cuadro 1 (5 tiros disponibles), será un indicador de que se ha cambiado de ronda. Para hacer esto, asigna al cuadro 1 de la línea de tiempo del Movie Clip el sonido otraRonda.wav. 9. Revisa bien el código y regresa a la escena principal. Ahora sólo falta que la línea de tiempo del Movie Clip tiros_mc avance un cuadro cada que se haga un disparo. Selecciona la instancia mirilla_mc en el escenario y abre su Panel de acciones. En el handler del evento MouseDown agrega la siguiente acción, que hará que la línea de tiempo de tiros_mc avance un cuadro. La nueva instrucción se muestra en negritas: onClipEvent(mouseDown){
this.play();
_root.tiros_mc.nextFrame();
}
Diseño Multimedia
115
EVALUACIÓN 10. Prueba la película. Trata de dispararle a 4 patos sin fallar y no pegarle al tendero, para que alcances los 4,000 puntos mínimos necesarios para cambiar de ronda. Comprueba que si cambias de ronda tienes de nuevo 5 tiros disponibles. La velocidad de las tiras de patos debe aumentar al cambiar de ronda. El número de ronda debe mostrarse en el texto dinámico ronda_txt. Por el mo- mento, si pierdes el juego no te darás cuenta. Sólo verás que los tiros no se recuperan y que no cambias de ronda. Si ya has alcanzado todas estas metas, puedes pasar a la siguiente actividad. Guarda la película como ShootOut08.fla.
Actividad 09
Fecha entrega
Perdiendo el juego Comentarios y necesidades
% de éxito
1. Abre el archivo terminado de la actividad anterior. Ubica el frame pierdes (cuadro 4) en la línea de tiempo, a donde la película pasa cuando se agotan los tiros y no se alcanzó el puntaje mínimo de la ronda. En esta actividad vamos a quitar los elementos que no deben estar en este cuadro y agregar los mensajes del fin del juego. 2. Primero hay que volver a mostrar el puntero del ratón que está oculto. Selecciona el frame pierdes del layer Acciones y abre su Panel de acciones para asignar el siguiente código: Mouse.show(); stop();
3. Ahora hay que eliminar algunos objetos que no se requieren en este cuadro. Selecciona el frame pierdes (cuadro 4) del layer Mirilla y elimina el cuadro con Menú Edit/Timeline/Remove Frames o las teclas .
116
EVALUACIÓN 4. De manera similar, elimina el último cuadro en los layers Tendero y Patos, ya que no queremos que se vean al perder el juego. 5. Agrega un nuevo layer y nómbralo Mensajes. El nuevo layer debe quedar encima del fondo. Inserta un keyframe en el cuadro pierdes del layer Mensajes y agrega un texto estático que indique que se terminó el juego. Dale un formato adecuado al texto. 6. Si en este momento pruebas el juego puedes comprobar lo que ocurre si pierdes. El juego está ya terminado y sólo falta agregar algunos detalles agradables. Inserta un Keyframe en los cuadros inicio, instrucciones y juego del layer Mensajes (cuadros 1, 2 y 3). En el Keyframe 1 del layer Mensajes agrega los textos para el título del juego y un mensaje de bienvenida. En el Keyframe 2 del layer Mensajes agrega los textos de las intrucciones. 7. Agrega una instrucción stop(); en el frame inicio del layer Acciones. Agrega otro stop(); en el frame instrucciones del mismo layer. 8. Sólo falta agregar los botones que están en la Biblioteca de Símbolos. Al Keyframe 1 del layer Mensajes arrastra los botones instrucciones_btn y jugar_btn. Acomódalos en el escenario en la posición adecuada. Selecciona el botón de instrucciones_btn y en su Panel de acciones escribe el código:
on(release){
gotoAndPlay(“instrucciones”);
}
Similarmente, dentro del Panel de acciones del botón jugar_btn introduce el código:
on(release){
gotoAndPlay(“juego”);
}
Diseño Multimedia
117
EVALUACIÓN 9. En el frame instrucciones del layer Mensajes sólo coloca el botón juego_btn. Puedes copiarlo del frame inicio para que no tengas que escribir nuevamente el código y pegarlo con para que quede en la misma posición. 10. En el frame pierdes del layer Mensajes coloca los dos botones. 11. Asigna el sonido musicLoop.wav al primer cuadro del layer Fondo. Para que el sonido funcione correctamente cambia su sincronía en el Panel de propiedades a Start y activa la opción Loop. 12. Prueba el juego terminado. Revisa toda la funcionalidad. Comprueba que los nuevos botones hacen lo que deben hacer. Guarda el juego terminado como ShootOut09.fla. Si lo deseas, puedes publicarlo como Windows Projector (.exe) para ejecutarlo como programa independiente. También puedes exportarlo como SWF y HTML para colocar el juego en un sitio Web y jugarlo en línea.
Recuerda que la finalidad de estos ejercicios es que aprendas algunas de las funciones, códigos y métodos más utilizados en Flash, pero siempre es útil que pruebes modificar algunos de los parámetros o utilices estos conocimientos en proyectos de tu propia creación.
Probando se aprende.
118