E. Importar activos externos

Hasta ahora en este libro, hemos visto varias formas de crear elementos dentro de un proyecto de Edge Animate utilizando las herramientas disponibles dentro de la propia aplicación. Aunque los rectángulos, las elipses y el texto son ciertamente útiles, la inclusión de activos de imagen externos dentro de un proyecto puede realmente llevar una composición al siguiente nivel.

En este capítulo, veremos cómo:

Importar gráficos vectoriales escalables
Importar tipos de archivos de mapa de bits
Ajustar las propiedades de los elementos importados

También examinaremos los métodos de exportación de activos desde una variedad de otras aplicaciones de Creative Suite para su uso en Adobe Edge Animate.

Importar activos externos

Además de la creación de elementos vectoriales y de texto básicos dentro de una composición de Edge Animate, también tenemos la posibilidad de importar activos externos para su uso en un proyecto. Estos activos pueden haber sido preparados en otra aplicación como Adobe Photoshop, Illustrator o Fireworks. Generalmente, querríamos utilizar estos activos importados más que las simples formas generadas por Edge Animate, pero esto dependerá del proyecto.

Los tipos de archivo que se pueden importar en Edge Animate incluyen:

SVG: Gráficos vectoriales escalables
PNG: Gráficos de red portátiles
JPEG: Grupo Conjunto de Expertos en Fotografía
GIF: Formato de intercambio de gráficos

Echaremos un vistazo a cada uno de estos formatos y luego veremos un breve ejemplo de uso.

Tenga en cuenta que, a diferencia de otros tipos de elementos, no hay herramientas para crear imágenes dentro de la propia aplicación Edge Animate. Adobe Edge Animate se basa en otras aplicaciones como Photoshop o Illustrator para la creación de activos de imagen externos.

Tipos de elementos de imagen

Los elementos importados en un proyecto de Edge Animate tendrán por defecto un elemento HTML <div>, pero en realidad se pueden cambiar para emplear alternativamente un elemento <img>.

Los posibles tipos de elementos de imagen importados son los siguientes

<div>: Define un elemento de división dentro de un documento HTML y se utiliza a menudo para elementos genéricos de nivel de bloque.
<img>: Permite incrustar un archivo de imagen dentro de HTML e incluye una serie de propiedades específicas para estos elementos.

Como podemos ver en estas definiciones de elementos, la mayoría de las diferencias aquí son simplemente semánticas, aunque el significado semántico es una consideración fundamental cuando se trata de contenido basado en HTML.

Estas definiciones de elementos de imagen también pueden ser útiles de otras maneras. Tal vez queramos aplicar una propiedad CSS3 avanzada a cualquier elemento <img> de nuestra composición. Esta característica facilita ese flujo de trabajo. Para ver un ejemplo de cómo hacerlo, consulte el Capítulo 11, Exploraciones adicionales con Adobe Edge Animate.

Al igual que otros elementos, los tratamientos de imagen avanzados también pueden ser simplemente renderizados desde un programa de edición de imágenes como SVG o imágenes de mapa de bits e incluidos dentro de una composición de Edge Animate de esa manera.

Propiedades exclusivas de los elementos de imagen

Hay ciertas propiedades que son exclusivas de los activos de imágenes importadas. Estas propiedades son idénticas sin importar el tipo de archivo que se haya importado.

Fuente de la imagen

En realidad, no es una propiedad que se pueda ajustar a través del panel Propiedades, pero muestra la ubicación del activo de imagen importado como referencia.

Cambiar imagen

Este botón mostrará una lista de imágenes dentro de la Biblioteca del proyecto. Al elegir una imagen de este cuadro de diálogo se sustituye la fuente de la imagen seleccionada.

Desplazamiento de la posición de fondo X

Un ajuste utilizado para desplazar el activo de imagen a lo largo del eje X dentro de la definición del elemento.

Desplazamiento de la posición de fondo Y

Un ajuste utilizado para desplazar el activo de imagen a lo largo del eje Y dentro de la definición del elemento.

Unidades de posición de fondo

Podemos elegir definir el desplazamiento de la fuente X e Y en función de las unidades de píxeles o porcentajes. Esto es útil para un diseño más sensible de los elementos.

Ancho del tamaño del fondo

Se utiliza para establecer el ancho del activo de imagen dentro de la definición del elemento.

Altura del tamaño del fondo

Se utiliza para establecer la altura del activo de imagen dentro de la definición del elemento.

Unidades de tamaño del fondo

Podemos elegir definir el Ancho y el Alto en función de las unidades de píxeles o porcentajes. Esto es útil para un diseño más sensible de los elementos.

Más sobre los elementos de imagen

Hay algunos otros elementos a tener en cuenta cuando se trata de activos de imagen y sus propiedades asociadas, que ahora vamos a abordar.

Revelar en el Finder/Explorador

Al hacer clic con el botón derecho del ratón sobre una imagen dentro del panel Biblioteca, podremos abrir el explorador de archivos del sistema operativo en la ubicación exacta del activo de fondo que se está utilizando en el elemento seleccionado.

El atributo alt

Este valor rellena el atributo alt de la imagen en HTML, proporcionando un texto alternativo para fines de accesibilidad. Se puede acceder a él a través del área de Accesibilidad del panel Propiedades.

Gráficos vectoriales escalables

Scalable Vector Graphics (SVG) es un formato de archivo basado en XML que describe cómo dibujar objetos vectoriales a través de definiciones de polígonos, trazados y rellenos. Estos objetos se describen de una manera que informa a los clientes con capacidad SVG de la estructura e informa a los clientes de cómo debe renderizarse todo visualmente.

SVG se diferencia de los formatos de mapa de bits como JPG o PNG en que los datos de la imagen se procesan según sea necesario en función de la información matemática contenida en el archivo SVG. Debido a esto, estos objetos vectoriales son fácilmente escalables y pueden representarse en muchos tamaños diferentes sin distorsión aparente mientras se utilizan los mismos datos base.

En el siguiente ejemplo, vemos el código SVG de un objeto generado a través de Adobe Illustrator. Este código se deriva del archivo star.svg, que se incluye en los activos de este libro. Para ver el objeto vectorial, simplemente arrastre este archivo a un navegador compatible con SVG y se renderizará en la pantalla.

A continuación se muestra un extracto de la estructura del archivo; si queremos ver la estructura completa, el archivo puede abrirse en un editor de texto como el Bloc de notas de Microsoft o Adobe Dreamweaver.

Para familiarizarse más con el formato de archivo SVG, se ha incluido una muestra llamada star.svg. Una parte de este archivo se muestra a continuación:

XML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640px" height="480px" viewBox="0 0 640 480" enablebackground="new 0 0 640 480" xml:space="preserve">
<g>
<polygon fill="#414042" points="303,67.781 357.435,178.078 479.153,195.764 391.076,281.617 411.869,402.845 303,345.609 194.131,402.845 214.923,281.617 126.847,195.764 248.565,178.078 "/>
<g>
<g>
<polygon fill="none" points="263.211,48.892 219.32,137.825 32.207,165.014 167.604,296.992 135.641,483.35 303,395.364 470.36,483.35 438.396,296.992 573.793,165.014 386.68,137.825 342.492,48.291 263.714,87.17 328.342,218.121 385.007,226.354 344.003,266.322 353.683,322.76 303,296.114 252.316,322.76 261.997,266.322 220.993,226.354 277.658,218.121 341.988,87.773 "/>
<!—BULK OF SVG CODE REMOVED FOR BREVITY -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M 84.896,167.553c0.984,0.127-2.648,0.475-1.372,0.811 c-1.828-0.145-6.564,0.724-7.481,0.252c-4.083,0.807-6.354,1.543-3.53,2.104c-3.976,1.05-9.76,1.867-15.31,2.416 c2.303,2.512,4.027,4.641,4.871,5.939c-0.943,1.146-5.629-1.925-11.134-6.977l-1.625-1.525 c4.788-0.735,10.509-1.232,15.706-1.723c5.208-0.492,9.901-0.978,12.924-1.731c3.188-0.285,11.81-1.521,16.417-1.814 c-0.303,0.429,0.396,0.217,1.244,0.547c-3.009,0.549-8.856,1.191-7.529,1.597C86.752,167.576,85.693,167.61,84.896,167.553z"/>
</g>
</g>
</g>
</svg>

Probablemente nunca querríamos escribir un código SVG a mano.

Importar imágenes SVG

Una vez que un archivo de imagen se importa en un proyecto de Edge Animate, se puede manipular, animar y escribir como cualquier otro elemento. Para importar un archivo SVG en Edge Animate, realizamos las siguientes acciones:

Navegue hasta el menú de la aplicación Edge Animate.
Seleccione Archivo | Importar....
Aparecerá un cuadro de diálogo del explorador de archivos del sistema. Navegue hasta el archivo .svg que desea importar.
Seleccione el archivo y haga clic en Abrir.
El archivo se colocará ahora en el Escenario y también se añadirá a la Biblioteca del proyecto en Activos. Desde aquí, podemos añadir varias instancias de este activo al Escenario.

Tenga en cuenta que la instancia del archivo colocada en el Escenario utilizará las dimensiones exactas del propio archivo importado, por lo que puede solaparse con los límites del Escenario. Esto se puede remediar mediante la manipulación de elementos utilizando el panel Propiedades. Es el mismo caso en lo que respecta a las imágenes de mapa de bits y no es exclusivo de SVG.

Ahora que el activo de imagen SVG ha sido importado y una instancia de este activo reside en el Escenario, podemos utilizar las herramientas de Selección y Transformación para realizar manipulaciones como redimensionar, escalar e inclinar, al igual que podemos hacerlo con los elementos de texto o rectángulo.

Dado que la animación es posible dentro de los archivos SVG y las composiciones de Edge Animate se basan en HTML, los archivos SVG animados son totalmente compatibles dentro de una composición de Edge Animate siempre que los navegadores de destino admitan archivos SVG animados. La animación dentro de un archivo SVG no es algo que se pueda controlar a través del propio Edge Animate, ya que es una parte del archivo SVG y por lo tanto actuará independientemente de la Línea de tiempo de Edge Animate. explorador de archivos del sistema en el Escenario. Esta acción tendrá el mismo efecto que se ha descrito anteriormente al trabajar con el comando Importar... de la aplicación.

Notificaciones SVG

Ciertas acciones realizadas dentro de una composición de Edge Animate activarán el sistema de notificación interno. Por ejemplo, cuando se emplean archivos SVG dentro de un proyecto, podemos ver que el pequeño icono de notificaciones azul aparece en la parte inferior derecha del Escenario. Esto nos permite conocer las incompatibilidades conocidas del navegador u otros puntos a tener en cuenta.

Imágenes de mapa de bits

También denominadas imágenes rasterizadas, las imágenes de mapa de bits son aquellas que están compuestas por una cuadrícula rectangular de píxeles individuales. Cada píxel de esta cuadrícula puede incluir tanto valores de color como, opcionalmente, valores de transparencia (dependiendo del formato de la imagen).

Las imágenes de mapa de bits son ideales para imágenes muy detalladas, como las fotografías, ya que definen los detalles a nivel de píxel. Tampoco requieren que el cliente realice cálculos pesados sobre los datos de la imagen para renderizarla a un estado visible, ya que esa información ya está presente en la cuadrícula de píxeles. El cliente simplemente tiene que leer los datos correctamente. A diferencia de SVG y otros formatos de gráficos vectoriales, las imágenes de mapa de bits dependen de la resolución. Esto significa que no se pueden escalar ni manipular de otro modo sin que se produzcan artefactos visuales significativos.

Tipos de imágenes de mapa de bits

Adobe Edge Animate puede importar cualquier tipo de archivo de imagen que se pueda utilizar en los flujos de trabajo generales de diseño web. Se trata de los mismos archivos de imagen PNG, JPG y GIF que se consideran universalmente utilizables en todos los navegadores modernos.

Hay una serie de diferencias a tener en cuenta entre estos tipos de archivos. Cada uno de ellos tiene aspectos que lo hacen adecuado para un uso particular y nos vendría bien entender algunas diferencias básicas.

Gráficos de red portátiles

Portable Network Graphics (PNG) es el más versátil de los formatos de imagen de mapa de bits debido al control presente sobre la calidad de la imagen y la transparencia. De todos los formatos que se presentan aquí, PNG es el único que incluye un canal completo de transparencia para una gama completa de valores de opacidad por píxel. La compresión utilizada en PNG también es sin pérdidas, lo que significa que, aunque la información presente en el archivo se comprime, no se elimina ningún dato.

Los archivos de imagen PNG tienden a ser más grandes que sus homólogos, por lo que es mejor tener cuidado con esto cuando se considera la carga general de la página.

Grupo Conjunto de Expertos en Fotografía

El formato de archivo Joint Photographic Experts Group (JPEG o JPG) se utiliza tradicionalmente para imágenes complejas como las fotografías. La calidad es variable, y la decisión sobre un ajuste de calidad al crear un JPG implica un equilibrio entre el tamaño del archivo y la prominencia de cualquier artefacto de imagen, que puede resultar en una mala renderización de la imagen.

La compresión utilizada en JPG difiere de PNG en que es un formato con pérdidas, lo que significa que los datos se eliminan realmente en la compresión. Los archivos JPG suelen ser mucho más pequeños que un PNG comparable, pero la calidad puede verse afectada. JPG no incluye ninguna opción de transparencia.

Formato de intercambio de gráficos

El tipo de archivo Graphics Interchange Format (GIF) es útil para colores sólidos y formas simples debido a las limitaciones en la paleta de colores asociada. Un archivo GIF está limitado a 256 colores, una drástica reducción de los millones de colores disponibles en PNG o JPG.

Los archivos GIF también se comprimen utilizando un algoritmo de compresión de archivos con pérdidas, pero incluyen un tipo simple de transparencia. La transparencia GIF difiere mucho de la utilizada en PNG porque cuando se utiliza GIF, los píxeles son totalmente opacos o totalmente transparentes, no hay ningún valor de transparencia por rango.

Un aspecto único del tipo de archivo GIF es que los archivos GIF pueden ser animados de una manera muy básica.

Adobe Edge Animate no tiene ningún problema en incorporar imágenes GIF animadas en una composición, ya que estamos tratando con HTML, dentro del cual las imágenes GIF animadas son totalmente compatibles.

En la imagen anterior, podemos ver las diferencias en las opciones de transparencia entre los formatos de archivo PNG, JPG y GIF. Un fondo a cuadros indica las áreas de la imagen que son transparentes.

Importar imágenes de mapa de bits

Una vez que un archivo de imagen se importa en un proyecto de Edge Animate, se puede manipular, animar y escribir como cualquier otro elemento. Para importar un archivo de imagen de mapa de bits en Edge Animate, realizamos las siguientes acciones:

Navegue hasta el menú de la aplicación Edge Animate.
Seleccione Archivo | Importar....
Aparecerá un cuadro de diálogo del explorador de archivos del sistema. Navegue hasta el archivo .png, .gif o .jpg que desee importar.
Seleccione el archivo y haga clic en Abrir.
El archivo se colocará ahora en el Escenario y también se añadirá a la Biblioteca del proyecto en Activos. Desde aquí, podemos añadir varias instancias de este activo al Escenario.

Tenga en cuenta que, al igual que los archivos SVG, la instancia del archivo de mapa de bits colocada en el Escenario utilizará las dimensiones exactas del propio archivo importado, por lo que puede solaparse con los límites del Escenario. Esto se puede remediar mediante la manipulación de elementos utilizando el panel Propiedades.

Ahora que el activo de imagen de mapa de bits se ha importado y una instancia de este activo reside en el Escenario, podemos utilizar las herramientas de Selección y Transformación para realizar manipulaciones como redimensionar, escalar e inclinar, al igual que podemos hacerlo con los elementos de texto o rectángulo. Sin embargo, a diferencia de los elementos basados en vectores, con los objetos de mapa de bits se producirán artefactos visibles, bloqueos y otras distorsiones. También es posible simplemente arrastrar y soltar un archivo .jpg, .png o .gif desde el explorador de archivos de nuestro sistema operativo al Escenario. Esta acción tendrá el mismo efecto que el descrito anteriormente cuando se trabaja con el comando Importar... de la aplicación, pero podremos colocar con precisión la imagen importada en el Escenario cuando empleemos la función de arrastrar y soltar.

Uso de GIF animados

Una de las mejores cosas del contenido de Edge Animate que se basa en los estándares web es que los tipos de archivo que se pueden admitir para su reproducción en un navegador web, serán compatibles con una composición de Edge Animate. Este es el caso de los archivos GIF animados y proporciona una dinámica interesante de integración de diferentes métodos de animación dentro de una composición.

Los GIF animados se pueden generar desde cualquier aplicación que admita estas animaciones simples basadas en fotogramas. Fireworks, Flash Professional y muchas herramientas disponibles gratuitamente admiten la creación y exportación de archivos GIF animados.

Tenga en cuenta que en Edge Animate no tenemos ningún control sobre cómo se reproduce la animación GIF. Este comportamiento se establece en el momento de la creación del GIF.

Trabajar con activos importados

Cualquier activo importado siempre estará disponible en el panel Biblioteca en Activos. Desde aquí, podemos arrastrar y soltar instancias en el Escenario para crear instancias de estos activos para su posterior manipulación. El grupo Activos dentro del panel Biblioteca de un proyecto ayuda a mantener las cosas organizadas y conserva los archivos importados, incluso cuando se eliminan todas las instancias del Escenario.

Consideraciones al trabajar con activos importados

Si se utilizan activos importados dentro de un proyecto de Edge Animate, estos activos se mueven automáticamente a su propio directorio al importarlos. Este directorio se etiqueta como imágenes y reside en la raíz de nuestro proyecto. Debemos asegurarnos, al subir los archivos de salida a un servidor, de que incluimos este directorio. Esto hace que sea bastante sencillo reemplazar cualquier activo de imagen sobrescribiéndolo dentro del directorio de imágenes. Siempre que las dimensiones de cada archivo de imagen sean las mismas, no debería haber problemas con esto.

Gestión de activos dentro de la Biblioteca

Una vez que tenemos activos de imagen dentro de una Biblioteca de proyecto, hay una serie de cosas interesantes que podemos hacer con ellos. Echemos un vistazo a algunas cosas interesantes que podemos hacer a través del panel Biblioteca.

Creación de instancias de activos

La presencia de la creación de instancias de activos dentro de la Biblioteca permite que las instancias de estos activos se creen en el Escenario a través de un simple proceso de arrastrar y soltar. Simplemente haga clic en el activo y arrástrelo al Escenario desde el panel Biblioteca. ¡El proceso no podría ser más sencillo!

Recuerde que también podemos arrastrar activos de imagen desde el sistema de archivos directamente al Escenario de la misma manera, pero si la imagen ya existe dentro de nuestro proyecto, creará entradas duplicadas dentro del panel Biblioteca. Queremos evitar esto, ya que puede causar confusión e hinchazón del proyecto.

Intercambio de activos

Al hacer clic en el botón de intercambio de activos en el panel Propiedades, podemos intercambiar el activo de imagen utilizado como fuente de un elemento de imagen. Cuando cambiamos una fuente de imagen, esta es la única propiedad que cambia; la posición, la escala, la ubicación x e y, el ancho y el alto, todas estas propiedades permanecen como estaban.

Importar bibliotecas de símbolos

También podemos importar archivos de símbolos de Edge Animate a nuestros proyectos mediante el uso de archivos de símbolos de Edge Animate. Estos archivos tienen la extensión .ansym (las versiones de vista previa más antiguas de Animate utilizaban la extensión .eglib, que en realidad todavía funciona en Animate 1.0) y se pueden importar a través de un mecanismo dentro de la Biblioteca del proyecto:

Examinaremos la creación de símbolos y cómo exportar archivos de la Biblioteca de Edge Animate en el Capítulo 8, Hacer uso de los símbolos, los elementos anidados y la agrupación. El formato de archivo de símbolos de Edge Animate es en realidad un archivo de almacenamiento especializado que Edge Animate entiende. Se puede abrir con cualquier programa de extracción de archivos. En la siguiente captura de pantalla, hemos abierto el archivo .ansym con la aplicación de código abierto 7-Zip ([invalid URL removed]):

Este sistema de archivos debería resultarle familiar si ya entiende cómo se estructuran los proyectos de Edge Animate. Observe cómo todo dentro de un archivo de la Biblioteca de Edge Animate está configurado como una mini composición.

Exportar activos desde otras aplicaciones de Creative Suite

Lo más probable es que si utilizamos Adobe Edge Animate, estemos familiarizados y utilicemos otras aplicaciones de Adobe Creative Suite. Esta parte del capítulo detallará los principales métodos para obtener activos de ciertas aplicaciones como Photoshop o Illustrator en Edge Animate como activos de imagen externos, sin importar el tipo de archivo.

Exportar desde Illustrator

Adobe Illustrator es una excelente opción para la creación y manipulación de arte vectorial como parte de Creative Suite. La exportación de activos de imagen desde Illustrator para su uso en Edge Animate se puede realizar de varias maneras, dependiendo de si necesitamos renderizaciones de mapa de bits o un archivo SVG para conservar toda la información vectorial.

Para exportar un activo de imagen de mapa de bits desde Illustrator, realice los siguientes pasos:

Suponiendo que su proyecto de Illustrator está abierto dentro de la aplicación; en el menú de la aplicación, elija Archivo | Guardar para Web....
Aparecerá el cuadro de diálogo Guardar para Web..., que nos permitirá tomar algunas decisiones sobre el formato de archivo que vamos a exportar.
Realice los ajustes necesarios en las opciones de exportación de nuestra imagen, incluyendo el tipo de archivo, la calidad, la paleta y la transparencia, dependiendo de si estamos exportando como JPG, PNG o GIF.
Una vez confirmados los ajustes de exportación, haga clic en Guardar....
Esto abrirá un explorador de archivos a través del cual podemos renombrar el archivo exportado y decidir su directorio de destino. Cuando esté listo, haga clic en Guardar para completar el proceso de exportación del archivo.

Para exportar un activo de imagen SVG desde Illustrator, realice los siguientes pasos:

Suponiendo que su proyecto de Illustrator está abierto dentro de la aplicación; en el menú de la aplicación, elija Archivo | Guardar como....
Aparecerá el cuadro de diálogo Guardar como, que nos permitirá tomar algunas decisiones sobre el formato de archivo que vamos a exportar.
Esto abrirá un explorador de archivos a través del cual podemos renombrar el archivo exportado y decidir su directorio de destino. Elija SVG (*.SVG) como formato y haga clic en Guardar para completar el proceso de exportación del archivo.

Una vez que el activo se ha guardado en el sistema de archivos, sólo tenemos que arrastrarlo y soltarlo en nuestro proyecto de Edge Animate o seguir el proceso de importación.

Tenga en cuenta que para conservar todos los aspectos de posicionamiento de uno o incluso varios activos exportados desde Illustrator, sólo tenemos que conservar el mismo tamaño de documento en todos nuestros activos de imagen, exportándolos uno a uno como capas individuales. Esto nos permite seleccionar todas las imágenes en el explorador de archivos de nuestro sistema operativo y arrastrarlas todas al Escenario de Edge Animate, alineándolas con su posición (0, 0) utilizando guías como se muestra en la captura de pantalla anterior.

Exportar desde Adobe Photoshop

Adobe Photoshop es la principal aplicación de composición y ajuste de imágenes de mapa de bits de Creative Suite. Exportar activos de imagen desde Photoshop para su uso en Edge Animate es bastante sencillo gracias a la opción Guardar para Web....

Para exportar un activo de imagen desde Photoshop, realice los siguientes pasos:

Suponiendo que su proyecto de Photoshop está abierto dentro de la aplicación, en el menú de la aplicación, elija Archivo | Guardar para Web....
Aparecerá el cuadro de diálogo Guardar para Web..., que nos permitirá tomar algunas decisiones sobre el formato de archivo que vamos a exportar.
Realice los ajustes necesarios en las opciones de exportación de nuestra imagen, incluyendo el tipo de archivo, la calidad, la paleta y la transparencia, dependiendo de si estamos exportando como JPG, PNG o GIF.
Una vez confirmados los ajustes de exportación, haga clic en Guardar....
Esto abrirá un explorador de archivos a través del cual podemos renombrar el archivo exportado y decidir su directorio de destino. Cuando esté listo, haga clic en Guardar para completar el proceso de exportación del archivo.

Una vez que el activo se ha guardado en el sistema de archivos, sólo tenemos que arrastrarlo y soltarlo en nuestro proyecto de Edge Animate o seguir el proceso de importación.

Exportar desde Fireworks

Adobe Fireworks es una excelente opción para el diseño de activos de imagen web y combina activos vectoriales y de mapa de bits de una manera realmente única. La exportación de activos es un poco diferente en Fireworks que en nuestros dos ejemplos anteriores, simplemente porque hay muchas opciones a considerar. Aquí vamos a mostrar la más sencilla.

Para exportar simplemente un documento de Fireworks como una imagen para la Web, realice los siguientes pasos:

Suponiendo que el documento está abierto, eche un vistazo al panel Propiedades, que por defecto reside en la parte inferior de la ventana de la aplicación.
Dentro de este panel, elija el formato de archivo que deseamos exportar como:
Si lo desea, podemos visitar el panel Ventana | Optimizar para realizar más ajustes.
En el menú de la aplicación, elija el comando Archivo | Exportar... | Sólo imágenes. Esto abrirá el cuadro de diálogo de exportación y exportará sólo las imágenes y no ningún HTML que las acompañe.
Navegue hasta la ubicación en la que deseamos guardar el archivo, opcionalmente renombre el archivo y haga clic en Guardar para completar el proceso de exportación.

Al igual que cualquier activo, una vez que el activo se ha guardado en el sistema de archivos, sólo tenemos que arrastrarlo y soltarlo en nuestro proyecto de Edge Animate o seguir el proceso de importación.

Utilizar la extensión Edge Animate para Fireworks

Una de las mejores cosas de Adobe Fireworks es la gran variedad de extensiones que la comunidad ha creado a lo largo de los años. La aplicación tiene realmente la mayor biblioteca de extensiones que existe y con nuevas extensiones que se publican todo el tiempo, hay mucho que gusta.

John Dunning ha creado una extensión para Fireworks que se vincula explícitamente con Edge Animate para un flujo de trabajo simplificado entre productos. Dado que se trata de una extensión, debe descargarse e instalarse por separado de Fireworks CS6. La descarga se puede encontrar visitando [invalid URL removed] Descargue el archivo .mxp a un disco local y luego ejecútelo para abrir automáticamente el Adobe Extension Manager.

Tenga en cuenta que si utiliza Windows, puede que tenga que ejecutar primero Adobe Extension Manager CS6 como administrador. Para ello, haga clic con el botón derecho del ratón en el acceso directo de Adobe Extension Manager CS6 y elija Ejecutar como administrador. A continuación, podemos hacer clic en instalar de forma normal.

Como alternativa a la ejecución del propio archivo .mxp, podemos abrir el Adobe Extension Manager y elegir Archivo | Instalar extensión y luego buscar el .mxp para instalarlo. Una vez instalada la extensión, podemos hacer clic en Fireworks CS6 en la barra lateral izquierda de Productos y ver la lista de extensiones instaladas, incluyendo la extensión para Edge Animate que acabamos de instalar. Ahora hemos terminado con Adobe Extension Manager CS6, que se puede cerrar.

Utilizar la extensión

El primer paso para utilizar la extensión Edge Animate de Fireworks es crear un diseño en Fireworks. Hay un ejemplo de diseño de banner incluido en los archivos de este libro en el directorio FireworksBanner.

Una vez que un diseño está listo para ser exportado a Edge Animate, elegimos Comandos en el menú de la aplicación Fireworks y seleccionamos Edge | Exportar a Edge. Esto abrirá un cuadro de diálogo de archivos que se puede utilizar para navegar a la carpeta donde queremos generar los archivos del proyecto de Edge Animate.

También podemos importar una composición de Edge Animate en Fireworks a través de este mismo menú. El ejemplo de este libro utiliza la extensión Edge Animate versión 0.2.0; es muy posible que las cosas mejoren o cambien en las nuevas versiones de la extensión. Una vez que el diseño de Fireworks ha sido exportado, podemos navegar a la ubicación elegida para ver lo que la extensión ha construido para nosotros. Curiosamente, encontraremos una estructura de directorios completa del proyecto Edge Animate y un conjunto completo de archivos de proyecto y activos esperándonos.

En la figura anterior, hemos exportado al mismo directorio que el archivo de autoría .fw.png, por lo que también lo vemos dentro del mismo directorio del proyecto. Observe que la extensión (en el momento de escribir esto) produce un archivo .edge (en lugar de .an). Esto está bien, se abrirá en Edge Animate sin problemas.

Ahora, simplemente necesitamos abrir el archivo .edge en Edge Animate y realizar cualquier animación o interactividad sobre el contenido generado. Podemos ver que la posición de los elementos se traslada perfectamente, al igual que el texto editable, los trazos, los rectángulos, los mapas de bits e incluso los símbolos. Observe que, aunque teníamos un patrón aplicado a nuestro rectángulo de fondo en Fireworks, esto no se trasladó a Edge Animate. La herramienta de exportación tiene ciertas limitaciones, que podemos sortear la mayoría de las veces renderizando cosas como imágenes de mapa de bits antes de exportar.

Exportar desde Flash Professional

La mayoría de la gente probablemente no piensa inmediatamente en Flash Professional como una herramienta de producción de activos de imagen, pero teniendo en cuenta todo el contenido que se ha creado utilizando Flash Professional durante la última década, hay una gran cantidad de activos contenidos en muchas colecciones de diseñadores de Flash Professional, contenido que podría ser reutilizado para su uso en Edge Animate.

Para exportar activos desde Flash Professional, primero debemos organizarlos en el Escenario de la forma en que deberían aparecer dentro de nuestro proyecto de Edge Animate:

Suponiendo que hemos abierto un proyecto de Flash Professional y hemos traído los elementos que deseamos exportar como imagen al Escenario, elija Archivo | Exportar | Exportar imagen... en el menú de la aplicación.
Aparecerá el cuadro de diálogo Exportar imagen, junto con una opción de tipo de archivo. Los tipos de archivo válidos para Edge Animate son PNG, JPG y GIF.
Ahora podemos navegar hasta la ubicación en la que deseamos guardar el archivo, opcionalmente renombrar el archivo y hacer clic en Guardar para completar el proceso de exportación.

Flash Professional CS6 también tiene la capacidad de exportar hojas de sprites y secuencias de imágenes completas, que se pueden utilizar en Edge Animate. Volveremos a esta aplicación y al tema de las hojas de sprites y las secuencias PNG en el Capítulo 9, Técnicas de animación avanzadas.

Resumen

En este capítulo, hemos examinado cómo importar activos creados por otras aplicaciones para llevarlos a un proyecto de Edge Animate y utilizarlos dentro de una composición. También hemos hecho un repaso de las diferencias entre las importaciones SVG y de mapa de bits y el uso de la Biblioteca de Edge Animate una vez que los activos se han importado a un proyecto. Por último, hemos visto cómo gestionar y anidar elementos dentro de una composición y varias opciones de flujo de trabajo desde otras aplicaciones de Creative Suite. En general, no importa cómo se cree cada uno de estos activos, todos ellos pueden emplearse dentro de una composición de Edge Animate de maneras muy similares.

En el siguiente capítulo, veremos cómo crear movimiento a través de la animación de estos elementos a lo largo de la Línea de tiempo de Edge Animate.

Buscar este blog

Animación Publicitaria 2024