3. Creación y edición de símbolos

Descripción general de la lección

• Importar ilustraciones de Adobe Illustrator y Adobe Photoshop
• Crear y editar símbolos
• Comprender los símbolos y las instancias
• Posicionamiento de objetos en el escenario
• Ajustar la transparencia y el color, y activar o desactivar la visibilidad
• Aplicar efectos de fusión
• Aplicar efectos especiales con filtros
• Posicionar objetos en el espacio 3D

Esta lección tomará aproximadamente 90 minutos en completarse. Descarga los archivos del proyecto para esta lección . En la página de tu cuenta también encontrarás cualquier actualización de las lecciones o de los archivos de las lecciones. Los símbolos son activos reutilizables que se almacenan en el panel Biblioteca. Los símbolos de clip de película, gráfico y botón son tres tipos de símbolos que crearás y utilizarás a menudo para efectos especiales, animación e interactividad.

Introducción

Comienza viendo el proyecto final para ver lo que crearás a medida que aprendes a trabajar con símbolos.

1. Haz doble clic en el archivo 03End.html en la carpeta Lesson03/03End para ver el proyecto final en tu navegador. Necesitarás tener instalado Flash Player para que tu navegador pueda ver la película. Nota: Si aún no has descargado los archivos del proyecto para esta lección a tu computadora desde la página de tu cuenta, asegúrate de hacerlo ahora. Consulta "Introducción" al principio del libro.

El proyecto es una ilustración estática de un marco de dibujos animados. En esta lección, utilizarás archivos gráficos de Illustrator, archivos importados de Photoshop y símbolos para crear una imagen estática atractiva con efectos interesantes. Aprender a trabajar con símbolos es un paso esencial antes de crear cualquier animación o interactividad.

2. Cierra el archivo 03End.html.

3. En Adobe Animate CC, selecciona Archivo > Nuevo. En el cuadro de diálogo Nuevo documento, selecciona ActionScript 3.0.

4. En el lado derecho del cuadro de diálogo, cambia el escenario a 600 píxeles de ancho por 450 píxeles de alto y haz clic en Aceptar.

5. Selecciona Archivo > Guardar. Nombra el archivo 03_workingcopy.fla y guárdalo en la carpeta 03Start.

Importación de archivos de Adobe Illustrator

Como aprendiste en la Lección 2, puedes dibujar objetos en Animate utilizando las herramientas Rectángulo, Óvalo y otras. Sin embargo, también puedes crear ilustraciones originales en una variedad de aplicaciones e importarlas a Animate. Si estás más familiarizado con Adobe Illustrator, por ejemplo, puede que te resulte más fácil diseñar diseños en Illustrator y luego importarlos a Animate para añadir animación e interactividad. Nota: Para obtener más información sobre Adobe Illustrator, consulta Adobe Illustrator CC Classroom in a Book de Adobe Press. Para obtener más información, visita adobepress.com o peachpit.com.

Cuando importas un archivo de Illustrator guardado en formato AI, Animate reconocerá automáticamente las capas, los fotogramas y los símbolos. Puedes elegir cómo debe importar Animate las diferentes capas del archivo original y cómo importar el texto (consulta la sección "Uso de opciones de importación simples").

En este ejercicio, importarás un archivo de Illustrator que contiene todos los personajes para el marco de dibujos animados.

1. Selecciona Archivo > Importar > Importar al escenario.
2. Navega hasta la carpeta Lesson03/03Start y selecciona characters.ai.
3. Haz clic en Abrir.

Aparece el cuadro de diálogo Importar [nombre de archivo] al escenario.

Hay dos modos para importar activos de Illustrator a Animate: uno con opciones avanzadas y otro sin ellas. Las opciones avanzadas aparecen de forma predeterminada, pero puedes ocultar o mostrar las opciones avanzadas haciendo clic en el botón de la parte inferior del panel. Por ahora, mantén las opciones avanzadas mostradas.

4. En el lado izquierdo del cuadro de diálogo, Animate muestra los gráficos de cada capa del archivo de Illustrator. Los nombres de las capas y la jerarquía siguen siendo idénticos a los de las capas originales de Illustrator.

5. Haz clic en el botón Contraer todo.

Animate contrae las rutas y los grupos individuales para mostrar solo las dos capas llamadas héroe y robot.

6. Haz clic en la capa héroe y, en las Opciones de importación de capas de la derecha, selecciona Crear un clip de película.

Elegimos importar la capa héroe de Illustrator como un símbolo de clip de película porque un símbolo de clip de película admite una variedad de efectos visuales, incluso para imágenes de un solo fotograma. Si seleccionas la opción Importar como mapa de bits, Animate convertirá los gráficos de Illustrator en una imagen de mapa de bits en lugar de conservar las rutas vectoriales.

7. Selecciona la capa robot y, en las opciones de la derecha, no selecciones ninguna de las opciones de importación de capas. Verás cómo estas dos opciones de importación diferentes afectan a la forma en que tus activos entran en Animate.

8. Haz clic en Importar.

Las capas héroe y robot del archivo original de Illustrator se importan y se colocan en capas con los mismos nombres en Animate. El héroe se convierte en un símbolo de clip de película, que se guarda en el panel Biblioteca. El robot aún no es un símbolo de clip de película (aprenderás a crear un símbolo de clip de película dentro de Animate más adelante en esta lección).

Uso de opciones de importación simples

A menudo, no necesitas el control preciso para seleccionar capas individuales o gráficos individuales dentro de una capa para importar a Animate. Para un proceso de importación simple, rápido y fácil, haz clic en Ocultar opciones avanzadas en la esquina inferior izquierda del cuadro de diálogo y utiliza las siguientes opciones:

• Conversión de capas Seleccionar Mantener rutas y efectos editables te permite seguir editando el dibujo vectorial en Animate. La otra opción, Mapa de bits aplanado único, importa la ilustración de Illustrator como una imagen de mapa de bits.

• Conversión de texto. Seleccionar Texto editable deja el texto como texto para que puedas editarlo en Animate. La opción Contornos vectoriales convierte el texto en rutas vectoriales independientes de la resolución, que ya no son editables con la herramienta Texto. Utiliza esta opción si no tienes las fuentes correctas instaladas en tu ordenador para importar el texto. Seleccionar Imagen de mapa de bits aplanada convierte el texto en una imagen de mapa de bits, que no es editable.

• Convertir capas a Selecciona Capas de Animate para conservar las capas de Illustrator e importar cada capa de Illustrator a una capa en Animate. La opción Capa única de Animate aplana las capas de Illustrator en una sola capa de Animate, y la opción Fotogramas clave separa las capas de Illustrator en fotogramas clave individuales de Animate.

Copiar ilustraciones de Illustrator y pegarlas en Animate

Si no necesitas importar un archivo de Illustrator completo a Animate, puedes copiar partes del archivo de Illustrator y pegarlas en un documento de Animate.

Cuando copias y pegas (o arrastras y sueltas) ilustraciones de Illustrator en Animate, aparece el cuadro de diálogo Pegar. El cuadro de diálogo Pegar proporciona ajustes de importación para el archivo de Illustrator que estás copiando. Puedes pegar el archivo como un único objeto de mapa de bits, o puedes pegarlo utilizando las preferencias actuales para los archivos AI. Al igual que cuando importas el archivo al escenario o al panel Biblioteca, cuando pegas ilustraciones de Illustrator, puedes convertir las capas de Illustrator en capas de Animate.

Importación de archivos SVG

Animate también puede importar ilustraciones SVG (consulta la descripción del formato SVG en el capítulo anterior). Para importar un archivo SVG, simplemente arrastra y suelta el archivo en el escenario o utiliza uno de los comandos Archivo > Importar. En el proceso de importación, puedes elegir convertir las capas SVG en capas de Animate o en fotogramas clave, o aplanarlas en una sola capa de Animate.

Acerca de los símbolos

Un símbolo es un activo reutilizable que puedes utilizar para efectos especiales, animación o interactividad. Hay tres tipos de símbolos que puedes crear: el gráfico, el botón y el clip de película. Los símbolos pueden reducir el tamaño del archivo y el tiempo de descarga de muchas animaciones porque pueden reutilizarse. Puedes utilizar un símbolo innumerables veces en un proyecto, pero Animate incluye sus datos solo una vez.

Los símbolos se almacenan en el panel Biblioteca. Cuando arrastras un símbolo al escenario, Animate crea una instancia del símbolo, dejando el original en la biblioteca. Una instancia es una copia de un símbolo situada en el escenario. Puedes pensar en el símbolo como un negativo fotográfico original, y en las instancias del escenario como copias del negativo. Con un solo negativo, puedes crear varias copias.

También es útil pensar en los símbolos como contenedores. Los símbolos son simplemente contenedores para tu contenido. Un símbolo puede contener una imagen JPEG, un dibujo importado de Illustrator o un dibujo que hayas creado en Animate. En cualquier momento, puedes entrar en tu símbolo y editarlo, lo que significa editar o sustituir su contenido.

Cada uno de los tres tipos de símbolos de Animate se utiliza para un fin específico. Puedes saber si un símbolo es un gráfico ( ), un botón ( ) o un clip de película ( ) mirando el icono que aparece junto a él en el panel Biblioteca.

Símbolos de clip de película

El clip de película es uno de los tipos de símbolo más potentes y versátiles. Cuando creas una animación, normalmente utilizarás símbolos de clip de película. Puedes aplicar filtros, ajustes de color y modos de fusión a una instancia de clip de película para mejorar su aspecto con efectos especiales. Nota: A pesar de su nombre, un símbolo de clip de película no es necesariamente animado.

Un símbolo de clip de película también contiene su propia línea de tiempo independiente. Puedes tener una animación dentro de un símbolo de clip de película con la misma facilidad que puedes tener una animación en la línea de tiempo principal. Esto hace posible animaciones muy complejas; por ejemplo, una mariposa que vuela por el escenario puede moverse de izquierda a derecha, así como tener sus alas aleteando independientemente de su movimiento.

Lo más importante es que puedes controlar los clips de película con ActionScript para que respondan al usuario. Por ejemplo, puedes controlar la posición o la rotación de un clip de película para crear juegos de estilo arcade. O un clip de película puede tener un comportamiento de arrastrar y soltar, lo que resulta útil para construir un rompecabezas.

Símbolos de botón

Los símbolos de botón se utilizan para la interactividad. Contienen cuatro fotogramas clave únicos que describen cómo aparecen cuando el ratón interactúa con ellos. Sin embargo, los botones necesitan código para que hagan algo.

También puedes aplicar filtros, modos de fusión y ajustes de color a los botones. Aprenderás más sobre los botones en la Lección 8, cuando crees un esquema de navegación no lineal para permitir al usuario elegir qué ver.

Símbolos gráficos

Los símbolos gráficos son el tipo de símbolo más básico. A menudo se utilizan símbolos gráficos para construir símbolos de clip de película más complejos. No admiten ActionScript y no se pueden aplicar filtros ni modos de fusión a un símbolo gráfico. Sin embargo, los símbolos gráficos son útiles cuando tienes varias versiones de un dibujo entre las que quieres cambiar fácilmente; por ejemplo, al sincronizar los labios con el sonido, mantener todas las posiciones diferentes de la boca en fotogramas clave individuales de un símbolo gráfico facilita la sincronización de la voz. Los símbolos gráficos también se utilizan para sincronizar una animación dentro de un símbolo gráfico con la línea de tiempo principal.

Importación de símbolos

Trabajar con símbolos en Adobe Illustrator es similar a trabajar con ellos en Animate. De hecho, puedes utilizar muchos de los mismos atajos de teclado tanto en Illustrator como en Animate: pulsa F8 en cualquiera de las dos aplicaciones para crear un símbolo. Cuando creas un símbolo en Illustrator, el cuadro de diálogo Opciones de símbolo te permite nombrar el símbolo y establecer opciones específicas de Animate, incluyendo el tipo de símbolo (como clip de película) y la ubicación del punto de registro.

Si quieres editar un símbolo en Illustrator sin alterar nada más, haz doble clic en el símbolo para editarlo en modo de aislamiento. Illustrator atenúa todos los demás objetos de la mesa de trabajo. Al salir del modo de aislamiento, el símbolo del panel Símbolos (y todas las instancias del símbolo) se actualizan en consecuencia.

Utiliza el panel Símbolos o el panel Control de Illustrator para asignar nombres a las instancias de los símbolos, romper los vínculos entre los símbolos y las instancias, intercambiar una instancia de símbolo por otro símbolo o crear una copia del símbolo.

Creación de símbolos

Has aprendido a crear un símbolo de clip de película al importar activos de Illustrator. También puedes crear símbolos dentro de Animate. Hay dos formas principales de crear un símbolo. Ambos métodos son válidos; el que utilices dependerá de tu forma de trabajar preferida.

El primer método consiste en empezar sin nada seleccionado en el escenario y, a continuación, elegir Insertar > Nuevo símbolo. Animate te pondrá en modo de edición de símbolos, donde podrás empezar a dibujar o importar gráficos para tu símbolo.

El segundo método consiste en seleccionar los gráficos existentes en el escenario y luego convertirlos en símbolos. Lo que esté seleccionado se colocará automáticamente dentro de tu nuevo símbolo.

La mayoría de los diseñadores prefieren utilizar este segundo método porque pueden crear todos sus gráficos en el escenario y verlos juntos antes de convertir los componentes individuales en símbolos. Nota: Cuando utilizas el comando Convertir en símbolo, en realidad no estás "convirtiendo" nada; más bien, estás colocando lo que hayas seleccionado dentro de un símbolo.

Para esta lección, seleccionarás las diferentes partes del gráfico importado de Illustrator y luego convertirás las distintas piezas en símbolos.

1. En el escenario, selecciona solo el robot de dibujos animados de la capa robot.
2. Selecciona Modificar > Convertir en símbolo (F8).

Se abre el cuadro de diálogo Convertir en símbolo.

3. Nombra el símbolo robot y elige Clip de película en el menú Tipo.

4. Deja el resto de los ajustes como están. La cuadrícula de registro indica el punto central (x=0, y=0) y el punto de transformación de tu símbolo. Deja el registro en la esquina superior izquierda.

5. Haz clic en Aceptar. El símbolo del robot aparece en el panel Biblioteca. En el panel Biblioteca, haz clic en el triángulo desplegable junto a la carpeta characters.ai para mostrar el símbolo del héroe que se convirtió en un símbolo de clip de película al importarlo.

Ahora tienes dos símbolos de clip de película en tu biblioteca y una instancia de cada uno en el escenario también.

Importación de archivos de Adobe Photoshop

Ahora, importarás un archivo de Photoshop para el fondo. El archivo de Photoshop contiene dos capas con un efecto de fusión. Un efecto de fusión puede crear mezclas de colores especiales entre diferentes capas. Verás que Animate puede importar un archivo de Photoshop con todas las capas intactas y conservar también toda la información de fusión de capas. Nota: Para obtener más información sobre Adobe Photoshop, consulta Adobe Photoshop CC Classroom in a Book de Adobe Press. Para obtener más información, visita adobepress.com o peachpit.com.

Al igual que con las opciones para importar archivos de Illustrator, hay dos modos para importar activos de Photoshop a Animate: uno con opciones avanzadas y otro sin ellas. Y al igual que las opciones para importar archivos de Illustrator, el cuadro de diálogo Importar [nombre de archivo] al escenario muestra las opciones avanzadas cuando se abre.

1. Selecciona la capa superior de tu línea de tiempo.
2. Selecciona Archivo > Importar > Importar al escenario.
3. Navega hasta la carpeta Lesson03/03Start y selecciona background.psd.
4. Haz clic en Abrir.

Aparece el cuadro de diálogo Importar al escenario. Consejo: Si no puedes seleccionar el archivo PSD, elige Todos los archivos en el menú Activar. Si el menú Activar no está visible, haz clic en Opciones.

5. Haz clic en Mostrar opciones avanzadas en la parte inferior del cuadro de diálogo si las opciones avanzadas están ocultas.

Animate muestra dos capas diferentes del archivo de Photoshop, una llamada flare y la otra llamada Background.

6. Asegúrate de que ambas capas tienen una marca de verificación delante que indica que están seleccionadas. Si no es así, puedes hacer clic en la opción Seleccionar todas las capas.

7. Haz clic en la capa flare para resaltarla y, en las opciones de la derecha, selecciona Mapa de bits

8. 8. Selecciona la capa "Background" y, en las opciones de la derecha, selecciona Imagen de mapa de bits con estilos de capa editables.

   9. Deja todas las demás opciones en sus valores predeterminados y haz clic en Importar.

   Animate conserva las capas de Photoshop y crea capas con nombres idénticos en Animate.

   Las capas de Photoshop se convierten automáticamente en símbolos de clip de película y se guardan en tu biblioteca. Los símbolos de clip de película se encuentran en la carpeta llamada "background.psd Asset". Toda la información de fusión y transparencia se mantiene y se traduce de las capas de Photoshop a las propiedades de fusión de clip de película de Animate. Para ver esto, selecciona la capa "flare" en la línea de tiempo y luego haz clic en la imagen "flare" en el escenario para seleccionarla. Abre el panel Propiedades y, en la sección Pantalla, verás que Aclarar está seleccionado en el menú Fusión.

   La opción que no seleccionaste, Imagen de mapa de bits aplanada, habría importado una imagen de mapa de bits con sus efectos de fusión y transparencia fijados en la imagen. El efecto Aclarar se aplicaría permanentemente a la propia imagen de mapa de bits y no como una opción de fusión en el panel Propiedades.

   10. Arrastra las capas "robot" y "hero" a la parte superior de la línea de tiempo para que se superpongan a las capas de fondo.

   Consejo: Si deseas editar tus archivos de Photoshop, no tienes que volver a realizar todo el proceso de importación. Puedes editar cualquier imagen en el escenario o en el panel Biblioteca en Adobe Photoshop CC o en cualquier otra aplicación de edición de imágenes.

   Haz clic con el botón derecho en una imagen en el escenario o en una imagen en el panel Biblioteca y selecciona Editar con Adobe Photoshop para editar en Photoshop, o selecciona otra opción de Editar con para abrir el gráfico en tu aplicación preferida. Animate inicia la aplicación y, una vez que hayas guardado los cambios, la imagen se actualiza inmediatamente en Animate.

   Asegúrate de hacer clic con el botón derecho en una imagen en el escenario o en la biblioteca, y no en el clip de película. Esto suele ser más fácil de conseguir en el panel Biblioteca.

   Nota: Las opciones de importación simples para los archivos de Photoshop son idénticas a las de los archivos de Illustrator. Selecciona la configuración de las opciones Conversión de capas, Conversión de texto y Convertir capas a para un proceso de importación rápido y sencillo.

   Nota: También tienes la opción de cambiar el tamaño del escenario de Animate para que coincida con el lienzo de Photoshop. Sin embargo, el escenario actual ya está configurado con las dimensiones correctas (600 píxeles × 450 píxeles).

   Acerca de los formatos de imagen

   Animate admite múltiples formatos de imagen de mapa de bits para la importación. Animate puede manejar archivos JPEG, GIF, PNG y PSD (Photoshop). Utiliza archivos JPEG para imágenes que incluyan degradados y variaciones sutiles, como las que se producen en las fotografías. Los archivos GIF se utilizan para imágenes con grandes bloques sólidos de color o dibujos lineales en blanco y negro. Utiliza archivos PNG para imágenes que incluyan transparencia. Utiliza archivos PSD si deseas conservar toda la información de capas, transparencia y fusión de un archivo de Photoshop.

   Conversión de una imagen de mapa de bits en un gráfico vectorial

   A veces querrás convertir una imagen de mapa de bits en un gráfico vectorial. Animate maneja las imágenes de mapa de bits como una serie de puntos de color (o píxeles); los gráficos vectoriales se manejan como una serie de líneas y curvas. Esta información vectorial se renderiza sobre la marcha, por lo que la resolución de los gráficos vectoriales no es fija como una imagen de mapa de bits. Esto significa que puedes ampliar un gráfico vectorial y tu ordenador siempre lo mostrará de forma nítida y suave. La conversión de una imagen de mapa de bits a un vector a menudo tiene el efecto de hacer que parezca "posterizada" porque las gradaciones sutiles se convierten en bloques de color discretos y editables, lo que puede ser un efecto interesante.

   Para convertir un mapa de bits en un vector, importa la imagen de mapa de bits en Animate. Selecciona el mapa de bits y elige Modificar > Mapa de bits > Trazar mapa de bits. Las opciones determinan la fidelidad de la imagen vectorial al mapa de bits original.

   En la siguiente figura, la imagen de la izquierda es un mapa de bits original y la imagen de la derecha es un gráfico vectorial.

   Ten cuidado al utilizar el comando Trazar mapa de bits, porque un gráfico vectorial complicado suele requerir más memoria y procesador que la imagen de mapa de bits original.

   Edición y gestión de símbolos

   Ahora tienes varios símbolos de clip de película en tu biblioteca y varias instancias en el escenario. Puedes gestionar mejor los símbolos de tu biblioteca organizándolos en carpetas. También puedes editar cualquier símbolo en cualquier momento. Si decides que quieres cambiar el color de uno de los brazos del robot, por ejemplo, puedes entrar fácilmente en el modo de edición de símbolos y hacer ese cambio.

   Añadir carpetas y organizar la biblioteca

   El panel Biblioteca proporciona herramientas útiles para agilizar la organización de tu colección de símbolos.

   1. En el panel Biblioteca, haz clic con el botón derecho en un espacio vacío y selecciona Nueva carpeta en el menú contextual. También puedes hacer clic en el botón Nueva carpeta ( ) en la parte inferior del panel Biblioteca, o seleccionar Nueva carpeta en el menú del panel en la esquina superior derecha del panel.

   Se crea una nueva carpeta en tu biblioteca.

   2. Nombra la carpeta "characters".

   3. Arrastra los símbolos de clip de película "hero" y "robot" a la carpeta "characters". Puede que tengas que abrir la carpeta "characters.ai/hero" para encontrar el símbolo de clip de película "hero".

   4. Puedes contraer o expandir las carpetas para ocultar o ver su contenido y mantener tu panel Biblioteca organizado.

   Edición de un símbolo desde la biblioteca

   Puedes editar los símbolos directamente desde la biblioteca, tanto si se han utilizado en el escenario como si no.

   1. Haz doble clic en el icono del símbolo de clip de película "robot" en la biblioteca.

   Animate te pone en modo de edición de símbolos. En este modo, puedes ver el contenido de tu símbolo, en este caso, el robot en el escenario. Observa que la barra de edición en la parte superior del escenario te indica que ya no estás en la Escena 1, sino dentro del símbolo llamado "robot".

   2. Con la herramienta Selección activa, haz doble clic en el dibujo para editarlo.

   Animate profundiza un grupo más para mostrar todos los objetos de dibujo vectorial que componen el grupo.

   3. Haz clic en una parte vacía del escenario para deseleccionar todo.

   4. Selecciona la herramienta Bote de pintura. Selecciona un nuevo color de relleno y aplícalo a un grupo de dibujo del robot, por ejemplo, un panel concreto de su hombro.

   5. Haz clic en Escena 1 en la barra de edición situada encima del escenario para volver a la línea de tiempo principal.

   El símbolo de clip de película de la biblioteca refleja los cambios que has realizado. La instancia en el escenario también refleja los cambios que has realizado en el símbolo. Todas las instancias del símbolo cambiarán si editas el símbolo.

   Consejo: Puedes duplicar rápida y fácilmente los símbolos de la biblioteca. Selecciona el símbolo de la biblioteca, haz clic con el botón derecho y selecciona Duplicar. O bien, selecciona Duplicar en el menú del panel Biblioteca (en la esquina superior derecha del panel). Animate crea una copia exacta del símbolo seleccionado en tu biblioteca.

   Edición de un símbolo en contexto

   Es posible que desees editar un símbolo en contexto con los demás objetos del escenario. Puedes hacerlo haciendo doble clic en una instancia en el escenario. Entrarás en el modo de edición de símbolos, pero también podrás ver el entorno del símbolo. Este modo de edición se denomina edición en contexto.

   1. Con la herramienta Selección, haz doble clic en la instancia del clip de película "robot" en el escenario.

   Todos los demás objetos del escenario se atenúan y se te coloca en el modo de edición de símbolos. Observa que la barra de edición muestra que ya no estás en la Escena 1, sino dentro del símbolo llamado "robot".

   2. Haz doble clic en el grupo para editarlo.

   Se muestran los grupos de dibujo que componen el grupo dentro del símbolo. Observa que la barra de edición muestra que estás en un grupo dentro del símbolo llamado "robot".

   3. Selecciona la herramienta Bote de pintura. Selecciona un nuevo color de relleno y aplícalo a la placa del pecho del robot.

   4. Haz clic en Escena 1 en la barra de edición situada encima del escenario para volver a la línea de tiempo principal. También puedes hacer doble clic en cualquier parte del escenario fuera del gráfico con la herramienta Selección para volver al nivel de grupo superior.

   El símbolo de clip de película del panel Biblioteca refleja los cambios que has realizado. La instancia en el escenario también refleja los cambios que has realizado en el símbolo. Todas las instancias del símbolo cambiarán según las ediciones que realices en el símbolo.

   Separar una instancia de símbolo

   Si ya no quieres que un objeto del escenario sea una instancia de símbolo, puedes utilizar el comando Separar para devolverlo a su forma original.

   1. Utiliza la herramienta Selección para seleccionar la instancia "robot" en el escenario.

   2. Selecciona Modificar > Separar.

   Animate separa la instancia del clip de película "robot". Lo que queda en el escenario es un grupo, que tiene el mismo aspecto que la instancia del símbolo. Puedes separar el grupo aún más para editarlo.

   3. Selecciona Modificar > Separar una vez más.

   Animate separa el grupo en sus componentes individuales, que son los objetos de dibujo vectorial. Incluso podrías separar una vez más y tus objetos de dibujo se convertirán en formas.

   4. Selecciona Editar > Deshacer varias veces para devolver tu robot a una instancia de símbolo.

   Cambiar el tamaño y la posición de las instancias

   Puedes tener varias instancias del mismo símbolo en el escenario. Ahora añadirás unos cuantos robots más para crear un pequeño ejército de robots. Aprenderás a cambiar el tamaño y la posición (e incluso la rotación) de cada instancia individualmente.

   1. Selecciona la capa "robot" en la línea de tiempo.

   2. Arrastra otro símbolo de robot desde el panel Biblioteca hasta el escenario.

   Aparece una nueva instancia.

   3. Selecciona la herramienta Transformación libre.

   Aparecen controles alrededor de la instancia seleccionada.

   4. Arrastra el control de un lado de la selección para voltear el robot de modo que mire en la otra dirección.

   5. Arrastra el control de una esquina de la selección mientras mantienes pulsada la tecla Mayús para reducir el tamaño del robot. La tecla Mayús restringe la transformación para que el ancho y el alto cambien proporcionalmente.

   6. Arrastra un tercer robot desde el panel Biblioteca hasta el escenario. Con la herramienta Transformación libre, voltea el robot, cambia su tamaño y haz que se superponga al segundo robot. Mueve los personajes para que queden en una disposición atractiva.

   ¡El ejército de robots está creciendo! Observa cómo las transformaciones de una instancia no cambian el símbolo de la biblioteca ni las demás instancias. Por otro lado, las ediciones del símbolo de la biblioteca cambian todas sus instancias.

Uso de reglas y guías

Es posible que desees ser más preciso en la colocación de las instancias de tus símbolos. En la Lección 1, aprendiste a utilizar las coordenadas x e y del panel Propiedades para colocar objetos individuales. En la Lección 2, aprendiste a utilizar el panel Alinear para alinear varios objetos entre sí. Otra forma de colocar objetos en el escenario es utilizar reglas y guías. Las reglas aparecen en el borde superior e izquierdo de la mesa de trabajo para proporcionar medidas a lo largo de los ejes horizontal y vertical. Las guías son líneas verticales u horizontales que aparecen en el escenario pero no en la película final publicada.

1. Selecciona Ver > Reglas (Alt+Mayús+R/Opción+Mayús+Comando+R).

Aparecen reglas horizontales y verticales medidas en píxeles a lo largo de los bordes superior e izquierdo de la mesa de trabajo. Al mover los objetos en el escenario, las marcas de graduación indican las posiciones del cuadro delimitador en las reglas. Los puntos x=0 e y=0 comienzan en la esquina superior izquierda del escenario, con los valores de X aumentando hacia la derecha y los valores de Y aumentando hacia abajo.

2. Mueve el puntero del ratón sobre la regla horizontal superior y arrastra una guía hacia abajo hasta el escenario.

Aparece una línea de color en el escenario que puedes utilizar como guía para la alineación.

3. Haz doble clic en la guía con la herramienta Selección.

Aparece el cuadro de diálogo Mover guía.

4. Introduce 435 como nuevo valor en píxeles de la guía. Haz clic en Aceptar.

La guía se reposiciona a 435 píxeles del borde superior del escenario.

5. Selecciona Ver > Ajustar > Ajustar a guías y asegúrate de que Ajustar a guías está seleccionado.

Los objetos se ajustarán ahora a cualquier guía del escenario.

6. Arrastra la instancia del robot grande y la instancia del héroe para que sus bordes inferiores se alineen con la guía.

Consejo: Selecciona Ver > Guías > Bloquear guías para bloquear las guías. Esto evita que las muevas accidentalmente. Borra todas las guías seleccionando Ver > Guías > Borrar guías. Cambia el color de las guías y la precisión de ajuste seleccionando Ver > Guías > Editar guías.

Cambiar el efecto de color de una instancia

La opción Efecto de color del panel Propiedades te permite cambiar varias propiedades de cualquier instancia. Estas propiedades incluyen el brillo, el tinte (la coloración general) y el alfa.

Cambiar el brillo

El brillo controla lo oscura o clara que aparece la instancia en el escenario.

1. Con la herramienta Selección, haz clic en el robot más pequeño del escenario.

2. En el panel Propiedades, en la sección Efecto de color, selecciona Brillo en el menú Estilo.

3. Arrastra el control deslizante Brillo a -40%.

La instancia del robot en el escenario se vuelve más oscura y parece retroceder en la distancia.

Cambiar la transparencia

Alfa es una medida del nivel de opacidad. Disminuir el valor alfa disminuye la opacidad y aumenta la cantidad de transparencia.

1. Haz clic en el orbe brillante para seleccionarlo. En el panel Propiedades deberías ver "flare" seleccionado en el menú Instancia de.

2. En el panel Propiedades, en la sección Efecto de color, selecciona Alfa en el menú Estilo.

3. Arrastra el control deslizante Alfa a un valor de 50%.

El orbe de la capa "flare" del escenario se vuelve semitransparente.

Consejo: Para restablecer el efecto de color de cualquier instancia, selecciona Ninguno en el menú Estilo.

Comprender las opciones de visualización

La sección Visualización del panel Propiedades para clips de película ofrece opciones para controlar la visibilidad, la fusión y la renderización de una instancia.

Propiedad Visible para clips de película

La propiedad Visible hace que los objetos sean visibles o invisibles para el público. Puedes controlar directamente la propiedad Visible de las instancias de clip de película en el escenario seleccionando o deseleccionando la opción en el panel Propiedades.

1. Selecciona la herramienta Selección.

2. Selecciona una de las instancias de clip de película "robot" en el escenario.

3. En el panel Propiedades, en la sección Visualización, observa que la opción Visible está seleccionada por defecto, lo que significa que la instancia es visible.

4. Deselecciona la casilla de verificación Visible.

La instancia seleccionada se vuelve invisible. La instancia está presente en el escenario, y todavía puedes moverla a una nueva posición, pero el público no podrá verla. Utiliza la opción Visible para activar o desactivar las instancias durante el transcurso de tu película, en lugar de eliminarlas por completo. También puedes utilizar la opción Visible para colocar instancias invisibles en el escenario con el fin de hacerlas visibles más tarde con código.

5. Selecciona la opción Visible para que la instancia vuelva a ser visible en el escenario.

Efectos de fusión

La fusión se refiere a cómo interactúan los colores de una instancia con los colores que están debajo de ella. Has visto cómo la instancia de la capa "flare" tenía aplicada la opción Aclarar (traspasada desde Photoshop), que la integraba más con la instancia de la capa "Background".

Animate ofrece una variedad de opciones de fusión; las encontrarás en el menú Fusión de la sección Visualización del panel Propiedades. Algunas tienen resultados sorprendentes, dependiendo de los colores de la instancia y de los colores de las capas que están debajo de ella. Experimenta con todas las opciones para entender cómo funcionan. La siguiente figura muestra algunas de las opciones de fusión y sus efectos en la instancia del robot sobre un degradado azul-negro.

Exportar como mapa de bits

Los robots y el personaje héroe de esta lección son símbolos de clip de película que contienen gráficos vectoriales complejos importados de Illustrator. El arte vectorial puede requerir mucho procesador, y puede afectar al rendimiento y la reproducción. Una opción de renderización llamada Exportar como mapa de bits puede ayudar. La opción Exportar como mapa de bits renderiza el arte vectorial como un mapa de bits, reduciendo la carga de rendimiento (pero aumentando el uso de memoria). Sin embargo, el clip de película sigue consistiendo en gráficos vectoriales editables en el archivo FLA, por lo que todavía puedes modificar la ilustración.

1. Selecciona la herramienta Selección.

2. Selecciona la instancia del clip de película "hero" en el escenario.

3. En el panel Propiedades, en la sección Visualización, selecciona Exportar como mapa de bits en el menú Renderizar.

La instancia del clip de película "hero" aparece como se renderizará cuando se publique. Es posible que veas un ligero "suavizado" de la ilustración debido a la rasterización del arte.

4. En el menú Fondo de mapa de bits (debajo del menú Renderizar), asegúrate de que está seleccionado Transparente (por defecto).

La opción Transparente renderiza el fondo del símbolo de tu clip de película como transparente. Alternativamente, puedes elegir Opaco y seleccionar un color para el fondo del símbolo de tu clip de película.

Acerca de la accesibilidad

La sección Accesibilidad del panel Propiedades para clips de película proporciona opciones para los usuarios con discapacidad visual de tu contenido que utilizan Flash Player y Microsoft Active Accessibility (MSAA) (este último solo en Internet Explorer y Firefox en Windows). Al introducir nombres y descripciones para tus clips de película y objetos secundarios (clips de película dentro de clips de película) en el panel Propiedades, los lectores de pantalla pueden leerlos en voz alta y dar una identificación audible de tu contenido.

Para obtener más información y las mejores prácticas para hacer que tu contenido sea accesible, visita el sitio de Adobe sobre la creación de contenido accesible en https://helpx.adobe.com/animate/using/creating-accessible-content.html.

Aplicar filtros para efectos especiales

Utiliza los filtros para crear efectos especiales que puedes aplicar a las instancias de los clips de película. Hay varios filtros disponibles en la sección Filtros del panel Propiedades. Cada filtro tiene diferentes opciones que pueden refinar el efecto.

Aplicar un filtro de desenfoque

Aplicarás un filtro de desenfoque a algunas de las instancias para ayudar a dar a la escena una mayor sensación de profundidad.

1. Selecciona el orbe brillante de la capa "flare".

2. En el panel Propiedades, expande la sección Filtros.

3. Haz clic en Añadir filtro en la parte superior de la sección Filtros y selecciona Desenfoque en el menú.

Se muestran las propiedades y los valores del filtro Desenfoque.

4. Si no están vinculados ya, haz clic en los iconos de enlace junto a los valores de Desenfoque X y Desenfoque Y para vincular el efecto de desenfoque en ambas direcciones.

5. Establece el valor de Desenfoque X y Desenfoque Y en 10 píxeles.

La instancia en el escenario se vuelve borrosa, lo que ayuda a dar una perspectiva atmosférica a esta escena.

Nota: Es mejor mantener el ajuste de Calidad para los filtros en Baja. Los ajustes más altos requieren mucho procesador y pueden ralentizar el rendimiento, especialmente si has aplicado varios filtros.

Más opciones de filtro

En la esquina superior derecha de la sección Filtros hay un menú de comandos que te ayudan a gestionar y aplicar varios filtros.

Guardar como preajuste te permite guardar un filtro concreto y su configuración para poder aplicarlo a otra instancia. Copiar y Pegar te permiten copiar y pegar un filtro seleccionado o todos los filtros y aplicarlos a otras instancias. El comando Restablecer filtro restablece los valores del filtro seleccionado a los valores predeterminados. El botón Activar o desactivar filtro (el icono del ojo junto al nombre del filtro) te permite ver tu instancia con o sin el filtro aplicado.

Posicionamiento en el espacio 3D

También tienes la posibilidad de colocar y animar objetos en el espacio tridimensional real. Sin embargo, los objetos deben ser símbolos de clip de película para poder moverse en 3D. Hay dos herramientas que te permiten colocar objetos en 3D: la herramienta Rotación 3D y la herramienta Traslación 3D. El panel Transformar también proporciona información sobre la posición y la rotación.

Comprender el espacio de coordenadas 3D es esencial para la correcta colocación de los objetos en 3D. Animate divide el espacio utilizando tres ejes: los ejes x, y y z. El eje x se extiende horizontalmente por el escenario con x=0 en el borde izquierdo. El eje y se extiende verticalmente con y=0 en el borde superior. El eje z se extiende dentro y fuera del plano del escenario (hacia y desde el espectador) con z=0 en el plano del escenario.

Nota: Las herramientas Rotación 3D y Traslación 3D solo son compatibles con los documentos ActionScript 3.0 y AIR de Animate. En los documentos HTML5 Canvas y WebGL, las herramientas 3D están desactivadas.

Cambiar la rotación 3D de un objeto

Añadirás algo de texto a tu imagen, pero para añadir un poco más de interés, lo inclinarás para ponerlo en perspectiva. Piensa en la introducción de texto inicial de las películas de Star Wars, y mira si puedes conseguir un efecto similar.

1. Inserta una nueva capa en la parte superior de la pila de capas y renómbrala como "text".

2. Selecciona la herramienta Texto del panel Herramientas.

3. En el panel Propiedades, selecciona Texto estático en el menú Tipo de texto. Elige una fuente llamativa y configúrala con un tamaño grande y un color interesante que añada algo de dinamismo. Tu fuente puede tener un aspecto diferente al que se muestra en esta lección, dependiendo de las fuentes disponibles en tu ordenador.

4. Haz clic en el escenario en tu capa de texto y empieza a escribir tu título.

5. Para salir de la herramienta Texto, selecciona la herramienta Selección.

6. Con el objeto de texto todavía seleccionado, selecciona Modificar > Convertir en símbolo (F8).

7. En el cuadro de diálogo Convertir en símbolo, introduce "title" en Nombre y selecciona Clip de película en Tipo. Haz clic en Aceptar.

Tu texto se coloca en un símbolo de clip de película y una instancia permanece en el escenario.

8. Selecciona la herramienta Rotación 3D ( ). Aparece un objetivo circular multicolor en la instancia. Esta es una guía para la rotación 3D. Es útil pensar en las guías como líneas en un globo terráqueo. La línea longitudinal roja gira tu instancia alrededor del eje x. La línea verde a lo largo del ecuador gira tu instancia alrededor del eje y. La guía circular azul gira tu instancia alrededor del eje z.

9. Arrastra cualquiera de las guías para girar tu instancia en el espacio 3D. Se añadirá una etiqueta al puntero del ratón para mostrar qué eje estás manipulando.

   • Arrastra hacia la izquierda o hacia la derecha en la guía roja para girar alrededor del eje x.
   • Arrastra hacia arriba o hacia abajo en la guía verde para girar alrededor del eje y.
   • Arrastra alrededor del círculo en la guía azul para girar alrededor del eje z.

También puedes arrastrar la guía circular naranja exterior para girar libremente la instancia en las tres direcciones.

Cambiar la posición 3D de un objeto

Además de cambiar la rotación de un objeto en el espacio 3D, puedes moverlo a un punto específico del espacio 3D. Utiliza la herramienta Traslación 3D, que está oculta bajo la herramienta Rotación 3D.

1. Selecciona la herramienta Traslación 3D ( ).

2. Haz clic en tu texto para seleccionarlo.

Aparece una guía en la instancia. Esta es una guía para la traslación 3D. La guía roja representa el eje x, la verde el eje y y la azul el eje z.

3. Arrastra cualquiera de las guías para mover tu instancia en el espacio 3D. Observa que tu texto se mantiene en perspectiva mientras lo mueves por el escenario.
   • Arrastra hacia la izquierda o hacia la derecha en la guía roja para moverte a lo largo del eje x.
   • Arrastra hacia arriba o hacia abajo en la guía verde para moverte a lo largo del eje y.
   • Arrastra hacia arriba o hacia abajo en la guía azul para moverte a lo largo del eje z. Arrastrar hacia arriba se aleja de ti, más profundamente en la escena, y arrastrar hacia abajo se mueve hacia ti.

Transformaciones globales vs. locales

Cuando selecciones la herramienta Rotación 3D o Traslación 3D, ten en cuenta la opción Transformación global ( ), que se encuentra en la parte inferior del panel Herramientas cuando se selecciona una de las herramientas 3D. Cuando se selecciona Transformación global, la rotación y el posicionamiento de los objetos 3D son relativos al sistema de coordenadas global, o del escenario. La visualización 3D sobre el objeto que estás moviendo muestra los tres ejes en posición constante, sin importar cómo se gire o se mueva el objeto. Observa en la siguiente imagen cómo la visualización 3D es siempre perpendicular al escenario.

Sin embargo, cuando la opción Global está desactivada (el botón está levantado), la rotación y el posicionamiento son relativos al objeto. La visualización 3D muestra los tres ejes orientados en relación con el objeto, no con el escenario. Por ejemplo, en la siguiente imagen, observa que la herramienta Traslación 3D muestra el eje z apuntando hacia fuera desde el rectángulo, no desde el escenario.

Restablecer la transformación

Si has cometido un error en tus transformaciones 3D y quieres restablecer la rotación de tu instancia, puedes utilizar el panel Transformar.

1. Selecciona la herramienta Selección y selecciona la instancia que quieres restablecer.

2. Selecciona Ventana > Transformar para abrir el panel Transformar.

El panel Transformar muestra todos los valores de las rotaciones y posiciones x, y y z en el espacio 3D.

3. Haz clic en Eliminar transformación en la esquina inferior derecha del panel Transformar. La instancia seleccionada vuelve a su rotación original.

Comprender el punto de fuga y el ángulo de perspectiva

Los objetos en el espacio 3D representados en una superficie 2D (como la pantalla del ordenador) se renderizan con perspectiva para que aparezcan como lo hacen en la vida real. La perspectiva correcta depende de muchos factores, incluyendo el punto de fuga y el ángulo de perspectiva, ambos pueden ser cambiados en Animate.

El punto de fuga determina dónde convergen en el horizonte las líneas paralelas de un dibujo en perspectiva. Piensa en las vías del tren y en cómo las vías paralelas convergen en un único punto a medida que se alejan en la distancia. El punto de fuga suele estar a la altura de los ojos en el centro de tu campo de visión, por lo que los ajustes por defecto están exactamente en el centro del escenario. Sin embargo, puedes cambiar el ajuste del punto de fuga para que aparezca por encima o por debajo del nivel de los ojos, o a la derecha o a la izquierda.

El ángulo de perspectiva determina la rapidez con la que las líneas paralelas convergen en el punto de fuga. Cuanto mayor sea el ángulo, más rápida será la convergencia y, por lo tanto, más severa y distorsionada aparecerá la ilustración.

1. Selecciona un objeto en el escenario que se haya movido o girado en el espacio 3D.

2. En el panel Propiedades, expande la sección Posición y vista 3D.

3. Arrastra los valores X e Y de Posición del punto de fuga en la parte inferior de la sección Posición y vista 3D para cambiar el punto de fuga, que se indica en el escenario mediante líneas grises que se cruzan.

4. Para restablecer el punto de fuga a los valores predeterminados (al centro del escenario), haz clic en Restablecer.

5. 5. Arrastra el valor de Ángulo de perspectiva para cambiar la cantidad de distorsión. Cuanto mayor sea el ángulo, mayor será la distorsión.

   Crear una biblioteca de Adobe Creative Cloud para compartir recursos

   Las bibliotecas de Creative Cloud hacen que tus recursos favoritos estén disponibles en cualquier lugar. Puedes utilizar las bibliotecas CC para crear y compartir tus gráficos y mucho más, incluyendo colores, pinceles, símbolos e incluso documentos completos. Compártelos y accede a ellos en otras aplicaciones de Creative Cloud siempre que los necesites. También puedes compartir bibliotecas con cualquier persona que tenga una cuenta de Creative Cloud, por lo que es fácil colaborar, mantener la coherencia de los diseños e incluso crear guías de estilo para utilizarlas en todos los proyectos. Los recursos de tu biblioteca compartida están siempre actualizados y listos para usar. Las bibliotecas CC funcionan de forma muy parecida al panel Biblioteca de Animate que has utilizado en esta lección.

   Para crear una nueva biblioteca CC para compartir recursos, sigue estos pasos:

   1. Selecciona Ventana > Bibliotecas CC para abrir el panel Bibliotecas CC, o haz clic en el icono del panel Bibliotecas CC.

   Tu propio panel puede tener un aspecto diferente a este, dependiendo del contenido de tus bibliotecas CC.

   2. Haz clic en el menú del panel Biblioteca y selecciona Crear nueva biblioteca.

   Se abre el cuadro de diálogo Crear nueva biblioteca.

   3. Introduce un nuevo nombre para tu biblioteca y haz clic en Crear.

   Se crea tu nueva biblioteca CC. Haz clic en el botón Más en la parte inferior de la biblioteca para añadir recursos para compartir. Para compartir tu biblioteca CC, haz lo siguiente:

   • Abre el menú Opciones de bibliotecas y selecciona Colaborar o Compartir enlace.

   Si eliges Colaborar, se abrirá tu navegador y podrás invitar a otros a ver o editar tu biblioteca CC. Si eliges Compartir enlace, se creará un enlace público para que otros puedan descargar los recursos de tu biblioteca CC.

   Preguntas de repaso

   1. ¿Qué es un símbolo y en qué se diferencia de una instancia?
   2. Nombra tres formas de crear un símbolo.
   3. Cuando importas un archivo de Illustrator utilizando las opciones de importación simples, ¿qué ocurre si eliges convertir las capas en capas de Animate? ¿Y en fotogramas clave?
   4. ¿Cómo puedes cambiar la transparencia de una instancia en Animate?
   5. ¿Cuáles son las dos formas de editar los símbolos?

   Respuestas de repaso

   1. Un símbolo es un gráfico, un botón o un clip de película que se crea una vez en Animate y que luego se puede reutilizar en todo el documento o en otros documentos. Todos los símbolos se almacenan en el panel Biblioteca. Una instancia es una copia de un símbolo situada en el escenario.

   2. Puedes crear un símbolo seleccionando Insertar > Nuevo símbolo, o puedes seleccionar objetos existentes en el escenario y seleccionar Modificar > Convertir en símbolo. Una tercera forma de crear un símbolo es importar gráficos de Illustrator o Photoshop y crear un símbolo durante el proceso de importación.

   3. Cuando conviertes capas de un archivo de Illustrator en capas de Animate, Animate reconoce las capas del documento de Illustrator y las añade como capas separadas en la línea de tiempo. Cuando importas capas como fotogramas clave, Animate añade cada capa de Illustrator a un fotograma separado de la línea de tiempo y crea fotogramas clave para ellas.

   4. La transparencia de una instancia está determinada por su valor alfa. Para cambiar la transparencia, selecciona Alfa en el menú Efecto de color del panel Propiedades y, a continuación, cambia el porcentaje alfa.

   5. Para editar un símbolo, haz doble clic en el símbolo de la biblioteca para entrar en el modo de edición de símbolos, o haz doble clic en la instancia del escenario para editarla en contexto. La edición de un símbolo en contexto te permite ver los demás objetos que rodean a la instancia.