5a práctica animación en web

INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC) Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación Publicitaria

Lic. Mario Quiroz Martínez

Práctica 5a(Interactividad) TEMA: Agregar interactividad

OBJETIVOS: • Cómo añadir acciones a la película Flash • Cómo añadir una navegación sencilla a la película Flash • Cómo crear menús desplegables y botones invisibles • Cómo utilizar la acción Load Movie • ¿Cómo abrir una página Web desde una película Flash • Cómo crear un formulario en Flash • Cómo utilizar los clips inteligentes • ¿Cómo hacer un precargado y una música toggle

Para agregar una acción de parada a la película: 1. Abra nombre_y_apellido.fla 2. Seleccione en el menú principal. Control> Probar película (control+enter) 3. Elija Insertar>Línea de tiempo>Capa o haga clic en el botón Crear una capa para añadir una nueva capa. Nombra la nueva

capa enActions. Si esta capa no se crea en la parte superior del orden de apilamiento de capas, arrastre allí ahora.


Lic. Mario Quiroz Martínez • Nota: Mantener todas las acciones siempre en la misma capa. Hace que la solución de problemas y la edición más

sencilla.

4. Haga clic en el fotograma 20 de la capa Actions y elegir Insertar>línea de tiempo>Fotograma clave (o presione F6).

5. Con el fotograma 20 todavía seleccionado en la capa Actions, abra el panel Acciones, seleccione Ventana> Acciones(F9).

6. La acción detener es una código básico en Flash. Expandir la categoría Funciones globales>Control de la línea de

tiempo. A continuación, haga doble clic en la palabra Stop para activarlo.


Lic. Mario Quiroz Martínez 7. La siguiente aparece en la lista Acciones: stop ();

8. Tenga en cuenta que el fotograma 20 en la línea de tiempo principal ahora tiene un pequeño “a”.

9. Seleccione Control>Probar película>Probar(Control+ Intro)para ver qué pasa. Guarde el archivo como neptune28.fla. 10. La película debe correr a hasta fotograma 20 y parar, sin repetir más. 11. Por ahora, tiene una acción parada más que añadir. ¿Recuerda que el botón gota agua? Ya creado un clip de película

animada para el estado Sobre del botón gota agua en el ejercicio anterior. Esa línea de tiempo del clip de película es independiente de línea de tiempo del botón y de la línea de tiempo principal, por lo que al mover el puntero sobre la gota de agua, la animación mantiene una repetición. Es hora de detener la repetición.

Para mantener la imagen en movimiento de un bucle: 12. Ir a la biblioteca (Ventana> Biblioteca). 13. Haga doble clic en el icono situado a la izquierda del clip de película Agua en la biblioteca para abrirlo en el modo de edición

de símbolos.

14. Seleccione la Capa 1 y elija Insertar> Capa para agregar una nueva capa. Nombra la capa Acciones. Y agregar un

fotograma clave al fotograma 7.

15. Con fotograma 7activado en la capa Acciones, con panel Acciones abierto (Ventana> Acciones). Agregarle la acción de

detener, haga doble clic en Stop. 16. En la lista de acciones debe ver:

stop ();



17. Volver a la película principal. Pon a prueba la película Control>Probar película>Probar (Control+Intro). 18. Cuando la película se detiene en la página principal, mueva el puntero sobre el botón Gota agua. Debe correr una vez y se

detendrá.

19. Guardar su película como neptune29.fla

Para agregar las secciones Localización y Reservas: 20. Se va a añadir dos acciones más para la película Flash. En primer lugar, hay que ampliar la línea de tiempo de la película

principal, seleccione el fotograma 30 en todas las capas (haga clic en el fotograma 30 en la capa superior y luego presione mayus-clic en el fotograma 30 en la capa inferior). A continuación, elija Insertar>Línea de tiempo>Fotograma.



21. Seleccione la capa Texto Portada y arrastre la cabeza lectora al fotograma 25. Inserte un fotograma clave en blanco en el fotograma 25.

22. También hacer lo mismo en la capa Gráfico Fondo, insertar un fotograma clave en blanco, en el fotograma 25.

23. Abra el documento Activo.fla en la carpeta Assets y su biblioteca (Control+L). Vuelva a neptune29.fla seleccione el

fotograma 25 de la capa de Gráfico fondo (desbloquear la capa) y arrastre el gráfico Mapa Mundial de la Biblioteca al escenario. Este será el fondo para la sección Localización.

Arrastre el gráfico del mapa del mundo en el lugar en donde la guía izquierda y la barra de la navegación se intersectan.


Lic. Mario Quiroz Martínez 24. Seleccione el fotograma 30 de la capa de Gráfico fondo y elija Insertar> Fotograma clave en blanco. Aqui insertaras el

fondo para la sección de Reservas.

25. Ahora desde la biblioteca del archivo Assets.fla. Arrastre la instancia del símbolo Grafico de Reservaciones al escenario.

Arrástrelo a esquina superior izquierda y encájelo a las guías. A continuación, cierre la Biblioteca del archivo Assets.fla.

26. Seleccione el fotograma 25 de la capa Acciones e inserte un fotograma clave en blanco (Insertar> Fotograma clave en

blanco). Utilice el panel Acciones para agregar una acción de Detener (stop();) a este fotograma clave.


Lic. Mario Quiroz Martínez 27. Asegúrese de que todavía tiene fotograma 25 de la capa Acciones seleccionadas. Abra en panel Propiedades, en la

sección Etiqueta, poner en el cuadro de texto Nombre: Localización. Observe que ahora puede ver una bandera roja y el nombre de la etiqueta a la derecha del fotograma 25. La bandera roja indica que ha marcado una etiqueta.

28. Seleccione el fotograma 30 e inserta un fotograma clave en blanco (Insertar>Fotograma clave en blanco).

29. Utilice el panel Acciones para agregar una acción de Detener (stop();) a este fotograma clave, y use el panel Propiedades en

la sección Etiquetar escribir Reservas fotogramas clave.

30. Tenga en cuenta que esta vez no vea una bandera roja y el nombre de la Etiqueta a la derecha del fotograma 30. No hay

imágenes adicionales a la derecha del cuadro 30, por lo que Flash no puede mostrar el nombre de la Etiqueta.

31. Seleccione el fotograma 20 de la capa Acciones y etiquétela en el panel de propiedades con el nombre Portada.

32. Guarde el archivo como neptune30.fla.


Lic. Mario Quiroz Martínez Para configurar los botones de navegación: 33. Seleccione el fotograma 20 de la capa Navegación Bar. Asegúrese que la capa esté desbloqueado. 34. Seleccione el botón Localización en el escenario. Puede comprobar el panel de Propiedades para asegurarse de que el

botón está seleccionado, mostrará además el icono de un botón y al lado de ella un cuadro de texto que dice: <Nombre de instancia>, como se muestra en la Figura.

35. El panel de información con el botón Localización seleccionadas. 36. Agregaremos una acción de botón Localización que indique a Flash para avanzar a los fotogramas etiquetados. Abra el

panel Acciones o F9. 37. Se le añade más de una acción para su botón. En primer lugar un evento de ratón que activará el salto a la posición

Localización de la línea de tiempo. Ubique que en la lista del panel Acciones: Funciones globales. Desplácese hasta la otra carpeta Control de clip de película. Busque el siguiente código que dice:

on (release) { }

38. En el evento, tiene que ir a alguna orden de ubicación en la línea de tiempo. Vaya a la carpeta Control de clip de película y

haga doble clic en gotoAndPlay. El código en la lista de acciones ahora se ve así: on (release) { gotoAndPlay (1); }

39. Si lo deja así como esta, cuando llegas a la página principal y haga clic en el botón Localización, Flash se regresará hasta

el fotograma 1 de la película y empezar a correr de nuevo. Pero lo que se quiere saltar a la pantalla Localización.


Lic. Mario Quiroz Martínez 40. Con la línea gotoAndPlay en la lista Acciones seleccionadas, cambie los siguientes parámetros:

on (release) { gotoAndStop ("Localización"); }

41. Pon a prueba tu película Control+Intro. Al hacer clic en el botón Localización, la película debería ir directamente a la

pantalla Localización.

42. Repita los pasos 35-38 para el botón Reservas. Asegúrese de cambiar en el nombre de etiqueta a Reservas en el panel de

Propiedades para que funcione el segundo botón.


Lic. Mario Quiroz Martínez 43. Pon a prueba tu película de nuevo (Control+Intro). Intente hacer clic en el botón Reservas y luego en el botón

Localizaciones.

44. Guardar su película como neptune31.fla.

Para crear un botón invisible: 45. Seleccione la capa Guía: logotipo Neptuno.ai y elija Insertar>Línea de tiempo>Capa para agrega una nueva capa por

encima de ella. Nombre esta capa Botón inicio.

46. Seleccione el fotograma 20 de la capa Botón Inicio y elija Insertar> Insertar Fotograma clave en blanco.

47. Seleccione la herramienta Óvalo y cambie los siguientes ajustes en el panel Propiedades.

a. Trazo: No hay color b. Relleno: # FFFF00 (amarillo brillante)


Lic. Mario Quiroz Martínez 48. Con el fotograma 20 de la capa Botón inicio seleccionada, dibuje un círculo sobre el símbolo del logo neptuno.ai en la

esquina superior izquierda del escenario. El círculo debe cubrir completamente el logotipo. 49. Utilice la herramienta Flecha para seleccionar el círculo y elija Insertar>Convertir en símbolo.

50. En el cuadro de diálogo Propiedades de símbolo, poner como nombre botón Portal y darle el comportamiento Tipo:Botón al

símbolo. A continuación, haga clic en Aceptar.

51. Ahora tiene un gran botón amarillo feo que no hace nada, ocultando el logo neptuno. Ha llegado el momento que haga ese

botón invisible y asignar algunas acciones a la misma. 52. Haga doble clic en la instancia del símbolo del botón Inicio que está en el escenario en el fotograma 20 para abrirlo en el

modo de edición de símbolos. 53. Seleccione el fotograma de la Capa 1 con el nombre de Reposo y arrástrelo al fotograma del estado Zona activa.


Lic. Mario Quiroz Martínez 54. Dele clic sobre el botón Escena 1 para volver a la línea de tiempo principal. 55. Seleccione el botón Inicio en el escenario en el fotograma 20 de la capa Botón Inicio (es un círculo semi-transparente de

color agua). En el panel Acciones, añada el siguiente código ActionScript al botón: 56. on (release) { 57. gotoAndPlay ("Portada");

58. Pruebe la película (Control+Intro) 59. Guarde la película como neptune32.fla 60. En el siguiente ejercicio vamos a crear un menú desplegable en la sección Localización. Para crear un menú desplegable: 61. Seleccione la capa del Botón Inicio y elija Insertar> Capa para agregar una nueva capa por encima de ella. Nombre de la

nueva capa Menú Localización.

62. Inserte un fotograma clave (Insertar> Fotograma clave) en el fotograma 25 de la capa Menú Localización.

Inserte un fotograma clave (Insertar> Fotograma clave) en el fotograma 25 de la capa Menú Localización.



63. Elija en el menú principal Insertar> Nuevo símbolo. Cuando aparezca el cuadro de diálogo Propiedades de símbolo, escriba

Menú Localización y darle al símbolo comportamiento Clip de película. A continuación, haga clic en Aceptar.

64. Flash cambia automáticamente a modo de edición de símbolos y que debe estar dentro del clip de película Menú

Localización. 65. Cambiar el nombre de la Capa 1 a Menú y elija Insertar>Capa para agregar una nueva capa y nombra la nueva capa

Actions.

66. Agregar una acción de Detener (Stop) al fotograma 1 de la capa Actions

67. Abrir el archivo Activo.fla y su biblioteca, seleccione la capa Menú. Arrastre la instancia Botón escoja un lugar de la

Biblioteca al escenario del archivo neptune32.fla.



68. 69. Seleccione el botón que acaba de colocar en el escenario y abra el panel Información (Ventana> Información). Ubique el

marco del cuadrado del botón en la esquina superior izquierda para resaltarlo. Para precisar la ubicación de objeto, escriba estas coordenadas X: 74,4 Y: 13,8.

70. Esto posiciona el Botón Escoja un lugar. A lo que su esquina superior izquierda es aún con el punto de registro del clip de

película. 71. Inserte un fotograma clave en el fotograma 10 de la capa Actions. En el panel Propiedades en sección Etiqueta escribe el

nombre Desplegable.

74,4 13,8



72. Seleccione el fotograma 10 de la capa Menú y y con el botón derecho elegir Insertar Fotograma clave.

73. Elija la herramienta Rectángulo. Utilización del panel Muestras (Ventana> Muestras) con los siguientes ajustes:

• Relleno: # 000099 • Alfa: 50% • Opciones de rectángulo: 10, 0

0, 10

74. Dibuje un rectángulo en el escenario. Seleccione el rectángulo, asegúrese de seleccionar el relleno y utilizar el panel

Información para cambiar los siguientes ajustes: • W: 300 • H: 90 • X: 0 • Y: 30


Lic. Mario Quiroz Martínez 75. Haga clic en el escenario para deseleccionar el rectángulo. Arrastre cada uno de los botones que se encuentran en la

carpeta Botones Localizaciones de la Biblioteca activo.fla al escenario. Colóquelos sobre el rectángulo azul como se muestra en la Figura.

76. 77. Seleccione el Botón escoja un lugar en el fotograma 1 de la capa Menú. En el panel Acciones (F9), haga doble clic en

evento del ratón en Funciones globales>Control de clip de película y active los eventos seleccionado tanto Roll Over y Drag Over. Consecutivamente haga doble clic en la acción Ir y detener (gotoAndStop). Cambiar el tipo de etiqueta al fotograma con el nombre Desplegable.

78. Pon a prueba tu película (Control+Intro). Haga clic en el botón Localización para llegar a su menú desplegable. Cuando se

mueve el puntero sobre el botón Elija un Destino, en el menú desplegable debería aparecer. Pero no va a desaparecer. Esto se arreglará después.

79. Guardar su película como neptune33.fla

Ahora necesita desaparecer menú desplegable. 80. Para que el menú desplegable de desaparecer: 81. Haga doble clic clip de película Menú Localización en el escenario para abrirlo en el modo de edición de símbolos. 82. Dentro del símbolo Menú Localización inserte una nueva capa vaya al menú principal Insertar>Línea de tiempo>Capa

Asigne el nombre de Capa Invisible y arrástrelo debajo de todas las capas. Inserte un fotograma clave (Insertar> Línea de tiempo>Fotograma clave o F6) en el fotograma 10.



83. Seleccione la herramienta Rectángulo y, con el fotograma 10 de la capa Invisible seleccionada, dibuje varios rectángulos alrededor del menú desplegable.


Lic. Mario Quiroz Martínez 84. Seleccione la forma creada y seleccione Modoficar>Convertir en símbolo. En el cuadro de diálogo Propiedades de

símbolo, escriba Botón invisible. Cambiar el comportamiento tipo: Botón.

85. Ahora haga doble clic en el símbolo de Botón invisible para abrirlo en el modo de edición de símbolos. Seleccione el punto

del fotograma Arriba en la Capa 1 y arrástrelo al fotograma Zona activa.

86. Seleccione la instancia del símbolo de Botón invisible en el fotograma 10 y le dan las siguientes ordenes en el panel

Acciones: on (rollOver, rollOut) { gotoAndStop(1); }



87. Pon a prueba tu película (Control+ Intro). Haga clic en el botón Localización para acceder al menú desplegable. 88. Su menú debe aparecer al mover el puntero sobre el botón Escoja un Lugar y desaparecen cuando el mouse sale de la caja

delimitadora de los botones invisibles. 89. Guardar su película como neptune34.fla

Carga de películas externas de un archivo SWF: 90. Si el clip de película Menú Localización no está abierto, dele doble clic en el botón que está en el escenario.

91. Vaya al fotograma 10 de la capa Menú. Seleccione el botón de Hawaii y abra el panel Acciones. 92. Haga doble clic en la acción Load Movie para añadir el código ActionScript. En el panel Parámetros, cambie los siguientes

ajustes: • URL: hawaii.swf • Ubicación: Nivel 1 • Variables: No envíe

93. El código en la lista de acciones se verá así: on (release) { loadMovieNum ("hawaii.swf", 1); }

http://www.youtube.com/watch?v=f8GSkHjEX-c



94. Presione (Control+intro) el resultado es el siguiente:

95. Después de la película se ha cargado, es necesario tener que descargarlo si te vas a otra sección del sitio web. 96. Volver a la película principal y seleccione el botón de Reservas. En el panel Acciones, seleccione la línea gotoAndStop y

añadir una acción de carga unloadMovieNum. Establecer la ubicación en el Nivel 1. El código en la lista de acciones debería tener este aspecto:

on (release) { gotoAndStop ("reservas"); unloadMovieNum (1); }


Lic. Mario Quiroz Martínez 97. Añadir la misma acción para el botón Portal (el botón invisible que cubre el logo Neptuno).

98. Un detalle pequeño todavía aparece la barra del menú desplegable!!!!!. Que aparece en la etiqueta RESERVAS.

99. Seleccione el fotograma 30 en la capa Menú Localización e inserte un fotograma clave vacío. Así es.

100. Seleccione Control+Intro. Haga clic en el botón Localización para encontrar el menú desplegable. Al hacer clic en el botón

Hawai en el menú desplegable, hawaii.swf se debe cargar. 101. Guarde el archivo como neptune35.fla.

5a práctica animación en web

Spiritual

Transcript of 5a práctica animación en web