2_editable práctica animación en web

UNIVERSIDAD PERUANA DE LAS AMERICAS EXAMEN PARCIAL PARTE SEGUNDA

Practica 2 (Los Símbolos) TEMA: Símbolos, la biblioteca, y el explorador de películas

OBJETIVOS:

• ¿Qué son los símbolos? y por qué se deben ser utilizarlas • Diferencias entre los tipos de símbolos • Cómo utilizar la Biblioteca de Flash • Que es el explorador de películas y cómo usarlo • Cómo crear y reutilizar los símbolos • Cómo importar símbolos de otras bibliotecas • Cómo crear una biblioteca compartida

1. Abra el archivo Nombre_y_apellido1.fla (el último archivo que trabajó). 2. Seleccione la capa Vector Azul y asegúrese de que está desbloqueado. Utilice la Herramienta Flecha negra para

seleccionar la forma del vector agrupado a la izquierda, asegúrese de que el grupo de la derecha no este seleccionada. Convierta el grupo seleccionado a un símbolo seleccionando ir menú principal Insertar>Convertir en símbolo (F8).

3. Aparecerá el cuadro de diálogo Convertir en símbolo


4. Escriba Vector azul en el cuadro de texto. A continuación, establezca el comportamiento: Gráfico y haga clic en Aceptar.

5. La instancia del símbolo “Gráfico” en Vector Azul deberá estar ahora en el escenario, reemplazando el gráfico agrupado que seleccionó a convertir en un símbolo. Se puede identificar que es un símbolo gráfico, cuando aparece un pequeño “+” en el centro.

Sin símbolo gráfico. Símbolo gráfico.

6. Asegúrese de que la instancia símbolo Vector Azul gráfico en el escenario este selecciona y utilice el panel Información para

posicionar esta instancia en X: 10 Y: 10. Arrastre la capa proyectos a la parte superior del orden de apilamiento para ocultar los bordes superior e izquierdo de la instancia del símbolo Vector Azul Gráfico en el escenario.

7. Ocultar todas las capas excepto la capa Gráfico fondo. Para hacer esto de manera rápida, presione botón derecho sobre la capa y seleccionar en Ocultar otros.


8. Con la herramienta Flecha negra, seleccione Vector delfín que creó en el ejercicio anterior. Seleccione del menú principal Modificar>Convertir en símbolo (F8). Cuando aparezca el cuadro de diálogo Convertir símbolo, establezca su nombre en Delfín gráfico y darle Tipo (comportamiento): Gráfico. A continuación, haga clic en Aceptar.

9. Utilice la herramienta Flecha negra para seleccionar el mapa de bits undersea.jpg que se encuentra en la parte inferior de la pantalla y convertirlo en un símbolo gráfico con el nombre: Hotel Undersea.

10. Ocultar la capa de Fondo gráfico, y luego mostrar y desbloquear la capa Navegación bar. Con la herramienta Flecha negra, haga clic en el marco de color blanco en la capa para seleccionarla. Convertir en símbolo gráfico con el nombre Navegación bar.

11. Seleccione el texto “Sumérgete en el paraíso” de la capa Navegación bar y convertir ese texto en un símbolo gráfico con el nombre de eslogan.


12. Ocultar la capa de Navegación bar, a continuación, mostrar y desbloquear la capa Logo Neptuno. Seleccione el gráfico Logo Neptuno, utilizando la herramienta Flecha negra en el logotipo presione botón derecho sobre él y convertir el logo a un símbolo a clip de película con el nombre de Neptuno.

13. Ocultar y bloquear la capa Logo Neptuno. Mostrar y desbloquear la capa de Título. Haga clic en Neptune Resorts y Aventuras Submarinas para seleccionarlo. Conviértalo toda la caja de texto en un símbolo Gráfico con el nombre: Neptune Resorts.

14. Guarde el archivo como neptuno7.fla Observación: No es necesario tener algo ya en el escenario para crear un símbolo. Se puede crear un nuevo símbolo y luego poner la ilustración de arte directamente en él. En el siguiente ejercicio crearemos un símbolo: el botón.


Para crear un nuevo símbolo: 15. Asegúrese de que está todavía en neptune7.fla y elija Insertar>Nuevo símbolo o Control+F8.

16. Aparecerá el cuadro de diálogo Crear un nuevo símbolo. El nombre el nuevo símbolo del botón es“Gota de agua” y darle el comportamiento Tipo: Botón. A continuación, haga clic en Aceptar.

17. Aparecerá una nueva línea de tiempo del símbolo botón en el modo de edición de símbolos.

18. Ahora tendrá que importar una paleta de colores que tiene algunos degradados preestablecidos. Asegúrese de que el panel Muestras está abierto (Ventana> Muestras) o Control+F9.


alo que acaba de dibujar y utilizar el panel Alinear con centro en el escena

19. Para importar la paleta de colores, haga clic en la flecha en la esquina superior derecha del panel Muestras para abrir el menú Opciones y seleccione Reemplazar colores. En el cuadro de diálogo Importar muestra de color, busque gradient.clr en la carpeta Assets. Haga clic en Abrir.

20. En el panel Muestras, tenga en cuenta que ahora hay dos gradientes nuevos. Si usted no ve ninguna gradiente, es posible que necesite ampliar el panel Muestras.

21. Seleccione la herramienta Óvalo y crear un óvalo con los siguientes ajustes:

• Color del trazo: # 33FFFF • Trazo: 0,25 • Color de relleno: No Color Y en la paleta información • Ancho (W): 70 px • Altura (H): 50 px

22. A continuación, seleccione el contorno del óv rio horizontal y verticalmente.

Sugerencia: Utilice los modificadores en la barra de Herramientas Forma , junto con la paleta de propiedades de la herramienta óvalo y la paleta de información para manipular todos estos parámetros.

23. Seleccione la herramienta Cubo de pintura . En el panel Muestras, seleccione el gradiente de color turquesa brillante que

acaba de agregar. Haga clic en el interior del óvalo, arriba y a la derecha del punto central.

Centro de la forma oval Clic arriba a la derecha

Esto da el efecto de la luz que entra en la escena desde la parte superior derecha. 24. El botón se vería mejor si tuviera un efecto 3D. Puede conseguir este efecto mediante la adición de otro degradado en una

nueva capa. Cambiar el nombre de la capa a Base 1. Añadir una nueva capa sobre la capa de Base1 con el nombre de Gradiente superior.

25. Seleccione la ilustración de la capa Base 1 y elija en el menú principal Edición>Copiar.

26. Seleccione la capa Gradiente superior. En el menú principal, seleccione Edición> Pegar in situ ó (Control+Mayus+V).

27. Seleccione el relleno del óvalo en la capa Gradiente superior. Seleccione el nuevo segundo gradiente en el panel Muestras para aplicar el degradado a la forma ovalada.

Ahora tiene un estado Arriba agradable para su botón. No es muy excitante todavía, pero vamos a añadir algunos otros estados, entre ellos uno de animación, en la siguiente práctica.

28. Para volver a la película principal, realice una de las siguientes acciones: • Elija Edición> Editar documento en el menú principal. • Pulse las teclas Control + E • Haga clic en la Escena 1 etiqueta en la esquina superior izquierda de la línea de tiempo (ver figura siguiente).

29. Haga clic en la etiqueta Escena 1 para volver a la línea de tiempo principal. 30. Guarde el archivo como neptune8.fla.

Uso de la biblioteca Para utilizar la biblioteca: 31. Abra la ventana de biblioteca seleccionando Ventana> Biblioteca o pulsando Control + L (Windows)

32. La ventana de la biblioteca, como se muestra en la Figura. El nombre de su película Flash actual debería aparecer en la parte superior de la ventana de Biblioteca. Recuerda esto, porque puede utilizarse bibliotecas de otras películas y es importante saber que biblioteca se está utilizando.

Barra de ampliación

33. Seleccione el símbolo botón Gota del agua aparece en la columna: Nombre; de la ventana Biblioteca. Si no se ve, es posible que tenga que desplazarse a través de la biblioteca mediante la barra de ampliación en la parte inferior de la ventana o usar la barra de desplazamiento que se encuentra al lado derecho del panel.

Cuando se selecciona el símbolo, una representación gráfica de dicho símbolo aparece en la ventana Biblioteca.

34. Expanda la ventana, haga clic en Biblioteca de estado ancho en la parte derecha de la ventana. 35. Ahora debería ser capaz de ver el tipo, Vinculación, fecha de modificación y columnas, además de la columna Nombre.

36. Ordenar los símbolos por tipo, haga clic en el encabezado de la columna Tipo. Puede invertir el orden de clasificación volviendo hacer clic sobre el título de clasificación.

37. Dele clic sobre la barra de Nombre el símbolo gráfico Vector Azul debe aparecer en primer lugar puede que tenga que desplazarse hacia arriba en la ventana Biblioteca para verlo.

38. Seleccione el mapa de bits de delfines.jpg en la biblioteca y eliminarlo haciendo clic en Eliminar (tacho de basura) en la parte inferior de la ventana Biblioteca.

Nota: Ya no es necesario el mapa de bits delfín porque se convirtió en un gráfico vectorial en el ejercicio anterior. No borre el mapa de bits undersea.jpg. Debido a ese mapa de bits sigue intacta en el interior del símbolo Hotel undersea, Flash todavía tiene que estar vinculado al mapa de bits.

Organizar la biblioteca: 39. Abra la biblioteca (Ventana>Biblioteca) o Control +L. 40. Haga clic en Nueva carpeta, un botón situado en la esquina inferior izquierda de la ventana de biblioteca. Aparecerá una

nueva carpeta en la ventana de la biblioteca, con un nombre editable.

41. Escriba Gráficos fondo en la nueva carpeta y pulse Enter. La carpeta creada se ordenará automáticamente en orden alfabético con el resto de los contenidos de la biblioteca.

42. Crear otra nueva carpeta llamada Gráficos de cabecera.

43. Seleccione el mapa de bits undersea.jpg en la biblioteca y se arrastra sobre la carpeta Gráficos fondo. La carpeta se abre y el mapa de bits undersea.jpg se inserta debajo de la carpeta.

44. Arrastre los símbolos gráficos Delfín gráfico y Hotel Undersea en la carpeta Gráficos fondo y cierre la carpeta haciendo doble clic en la flecha que está al lado de ella.

45. Arrastre el símbolo Vector Azul en la carpeta Gráficos de cabecera y cerrar la carpeta haciendo doble clic en él.

46. Guarde el archivo como neptune9.fla. Mantenga la biblioteca abierta, porque lo va a seguir utilizarlo durante un tiempo más. Para utilizar otra biblioteca 47. Ir al menú principal, seleccione Archivo>Abrir. Cuando el Abra el cuadro diálogo, busque la carpeta Assets y seleccione el

archivo Nuevo arte.fla. Haga clic en Abrir.

48. La Biblioteca de Nuevo arte.fla también se abre.

49. Presione el botón de Nuevo panel de biblioteca y se abrirá paralelamente la biblioteca del documento Nuevo arte.fla

50. Seleccione el símbolo del Azul bebé de fondo en la Biblioteca Nuevo arte.fla y arrastrarlo a la carpeta de Gráfico fondo en la Biblioteca neptune9.fla. Recuerde buscar el nombre de la biblioteca antes de empezar a arrastrar.

51. El símbolo del Azul bebé de fondo debe aparecer sangrado debajo de la carpeta Gráfico fondo. 52. Repita el paso 50 con los gráficos: Buzo Gráfico, Sala de Arte Vector, Gráfico mundial y Mapa mundial, colocando cada

uno de estos símbolos en la carpeta Gráficos fondo de la Biblioteca neptune9.fla.

53. Arrastre el símbolo del Tiburón Ballena en la Biblioteca Nuevo arte.fla en la carpeta Gráficos de cabecera en la Biblioteca neptune9.fla.

54. Cierre la carpeta Gráficos fondo y carpetas Gráficos de cabecera en la carpeta neptune9.fla haciendo doble clic en cada uno de ellos. Cierre la ventana Biblioteca Nuevo arte.fla.

55. Guarde el archivo como neptune10.fla.

Para mover el logotipo de Neptuno en una biblioteca compartida: 56. Cree una nueva película de Flash en blanco (Archivo>Nuevo). Guarde el documento fla en la carpeta Assets con el nombre

compartido.fla. Asegúrese de que la biblioteca está abierta (Ventana> Biblioteca).

57. La biblioteca neptune10.fla está abierto. 58. Seleccione el logotipo de Neptuno en la Biblioteca neptune10.fla y arrastrarlo a la Biblioteca compartida.fla. A

continuación, cierre la Biblioteca neptune10.fla.

59. Seleccione el símbolo del logotipo de Neptuno en la Biblioteca compartido.fla y seleccione Propiedades en el menú Opciones de Biblioteca.

60. En el cuadro de diálogo Propiedades de simbolo, establezca la Vinculación con ActionScript : Exportar para ActionScript y Exportar en fotograma 1 y automáticamente en el campo Identificador se llena con Neptuno. Luego haga clic en Aceptar.

61. Antes de poder utilizar una Biblioteca del documento Compartido.fla, el archivo de la biblioteca debe ser publicado como un archivo SWF de Flash Player. Para eso debemos ir al menú principal, elija Control>Probar película>Probar para crear un archivo SWF y se mueven en el modo Probar película. Volviendo a la película, seleccione Archivo> Cerrar.

62. Guarde y cierre compartido.fla Ahora que ya tiene una biblioteca compartida para trabajar, tienes que volver a neptune10.fla y hay que enlazar la misma. Eso es lo que va a hacer a continuación.

Para establecer un vínculo a un símbolo en una biblioteca compartida: 63. Abra la neptune10.fla 64. Abra la biblioteca, si no está ya abierto (Ventana>Biblioteca). 65. Seleccione el símbolo del logotipo Neptuno en la biblioteca presione el botón derecho, aparecerá el cuadro de dialogo de

Propiedades de símbolo.

66. Establezca el vínculo de símbolo desde el archivo compartido.fla, hacendó un enlace a partir del botón: Archivo de origen ejecución y también en el botón: Símbolo, en el espacio debajo de esta opción. A continuación, haga clic en Aceptar.

67. Seleccione Control> Probar película para probar la película y asegúrese de que el símbolo se importa (puede hacerlo con otro archivo). Cuando termine de proyectarse, cierre esta ventana para regresar al modo de edición.

68. Guarde el archivo como neptune11.fla.

Si decide hacer un cambio en el logotipo de Neptuno, se debe realizar el cambio en el archivo compartido.fla y volver a publicar el archivo como SWF.

69. Mostrar y seleccionar la capa Vector Azul. Presione botón derecho sobre el símbolo y duplique.

70. Asegúrese que la biblioteca está abierta y que instancia del símbolo gráfico Vector Azul copia esta carpeta Gráficos de Cabecera.

71. Con la nueva instancia (Vector Azul copia) seleccionada, entre dentro del símbolo y elija en el menú principal Modificar> Transformar> Voltear Horizontal. Y volver a la Escena 1.

72. Hacer visible la capa Curvas y reemplazar el dibujo por la nueva instancia del símbolo Vector azul copia en la esquina superior derecha del rectángulo en contorno interior.

73. Mostrar el resto de las capas en la película y guardar el archivo como neptune12.fla.

Para utilizar el explorador de películas: 74. Abra el explorador de películas seleccionando Ventana> Explorador de películas.

75. Comience deseleccionando todos los botones de filtrado. Haga clic en un botón para activar o desactivar.

Antes Después

Nota: El filtrado se enciende cuando el botón aparece una depresión y el fondo es blanco. El explorador de películas deberían mostrar los dos contextos disponibles para ver el árbol jerárquico: los elementos de la película y las definiciones de los símbolos. Película elementos están organizados por escenas. Actualmente tiene una escena, por lo que el elemento de película sólo es la Escena 1.

76. Ahora haga clic en el primer botón de filtrado, el filtro Mostrar texto.

77. Tiene dos zonas de texto que está incrustado en un símbolo en la línea de eslogan y en el símbolo de Neptuno Resorts. 78. Si aún no está ampliado, haga clic en el signo más (+) junto al símbolo de Neptuno Resorts. Para contraer una definición de

símbolo, haga clic en el signo menos (-) junto a la definición ampliada.

79. El símbolo de Neptuno Resorts cuenta con dos elementos de texto incrustado en él. Seleccione el elemento de Neptuno Resorts.

80. Ahora puede modificar el texto este elemento en el escenario.

81. Si los paneles no están abiertos actualmente, haga doble clic (Windows) en el texto Neptuno Resorts en el panel explorador de películas para editar el símbolo.

82. El panel Propiedades de texto y de Información debe estar abierto.

83. Asegúrese de que tiene tanto Resorts Neptuno o Aventuras submarinas seleccionadas en el Explorador de películas. Cambiar el tamaño de fuente en el panel Propiedades de Carácter.

84. Active fotogramas y capas de filtro Mostrar en el explorador de películas (el quinto botón). Ahora puede ver todos los elementos de la película en las capas y fotogramas.

85. Se puede personalizar la pantalla de modo para que los fotogramas que necesitemos aparezcan. Haga clic en el último

botón de filtrado, que personalizará qué elementos desea Mostrar.

86. Con este botón se abre cuadro de diálogo de Configuración del explorador de películas. 87. Deseleccionarla Fotogramas y luego haga clic en Aceptar.

Ahora todo lo que veo son las capas y los elementos de su película seleccionada.

En el siguiente ejercicio vamos a usar la función Buscar para buscar elementos de película por su nombre.

88. Encienda todos los filtros (los primeros cinco botones) en el explorador de películas. En el cuadro Buscar, escriba Arial. Espere un segundo, mientras que la función Buscar revisa a través de los archivos en el explorador de películas.

89. Sólo debe ver los dos símbolos: eslogan y Neptune Resorts, que utilizan el tipo de letra Arial.

La ventana del explorador de películas, muestra los resultados de la búsqueda.

90. Para borrar el Buscar, elimine la palabra en el cuadro de texto. 91. Pruebe con una segunda búsqueda. Esta vez en el cuadro de texto poner Azul.

92. Usted debe ver a las dos instancias de la Vector Azul, Vector Azul copia que ha creado.

A continuación, ver lo fácil que es utilizar el Explorador de películas para reemplazar las cosas, en este caso, una fuente. Para reemplazar todos los resultados de búsqueda de una fuente en el escenario o en un símbolo con otro tipo de letra:

93. Repita la búsqueda que hizo en el ejercicio anterior, escriba la palabra Arial en el cuadro de texto Buscar. 94. Seleccione el elemento tipográfico en el símbolo en la Lista del panel. A continuación, con la tecla Control presionada

seleccione los elementos de fuente en el símbolo de Neptune Resorts. 95. Con los elementos seleccionados, utilice el Panel Propiedades de Carácter para cambiar el tipo de fuente (Libre). Y

después de haber experimentado con esto, volver a cambiar el tipo de fuente a Arial. 96. Guardarlo como NombreyApellido2.fla

2_editable práctica animación en web

Documents