J. Publicar composiciones de Edge Animate

Este capítulo describe una serie de características con respecto a la preparación de composiciones de Edge Animate para su distribución. Hay varias formas en que Adobe Edge Animate facilita una buena experiencia para los usuarios finales al hacer que el código distribuido sea lo más ligero posible, proporcionándoles un precargador o notificación mientras se inicializa el contenido y teniendo en cuenta los navegadores que pueden no estar a la altura. para satisfacer las demandas de Edge Animate Runtime.

Exploraremos los siguientes temas a lo largo de este capítulo:

Configuración de publicación
Capturar una imagen de póster
El escenario de nivel inferior
Usar precargadores de proyectos
Publicar una composición

Publicar una composición de Edge Animate

Si bien es completamente posible simplemente implementar los archivos de Edge Animate que componen una composición sin realizar ningún tipo de actividad de publicación, esto no es ideal. ¿Por qué no? Porque todo el código que compone nuestra composición se puede ajustar y hacer mucho, mucho más ligero que con lo que trabajamos directamente en Edge Animate. También hay una serie de otras preocupaciones con la implementación, como la compatibilidad con navegadores no compatibles, el uso de una CDN para aligerar aún más la carga y el uso de precargadores al mostrar una composición. Los pasos para publicar una composición tienen en cuenta todas estas preocupaciones.

Configuración de publicación

El cuadro de diálogo Configuración de publicación nos proporciona una forma de tomar algunas decisiones importantes sobre cómo se empaquetará una composición de Edge Animate tras la publicación. Opciones sobre si apuntar a la web directamente o más bien publicar para la ingestión a través de alguna otra aplicación de Adobe, y la decisión de utilizar una red de entrega de contenido (CDN) para bibliotecas de JavaScript distribuidas o no. Todo esto se gestiona desde este cuadro de diálogo.

Dirigido a la Web / HTML optimizado

Como los proyectos de Edge Animate se basan en HTML, CSS y JavaScript, cuando la mayoría piensa en Adobe Edge Animate, inmediatamente piensa en algún sitio web como punto de distribución. En la mayoría de los casos, esto es probablemente bastante exacto, ya que este es el objetivo principal de Edge Animate (y del que más se habla).

Para apuntar a la Web al publicar un proyecto de Edge Animate:

En el menú de la aplicación, elija Archivo | Configuración de publicación.
Vemos una lista de entradas de Destino de publicación a lo largo del lado izquierdo. Elija Web. El destino de publicación ahora leerá Web / HTML optimizado.
El directorio de destino se puede ajustar si se desea. De forma predeterminada, Edge Animate publicará en un directorio. \ Publish \ web dentro de la raíz de un proyecto.
También podemos decidir utilizar los marcos distribuidos a través de CDN mediante el uso de una casilla de verificación, utilizar Google Chrome Frame para IE 6, 7 y 8, o Publicar contenido como HTML estático (más sobre estas opciones más adelante).
Cuando esté satisfecho, haga clic en Guardar para conservar estas opciones y publicar más tarde, o haga clic en Publicar para publicar inmediatamente de acuerdo con las opciones indicadas.

Usar la opción Frameworks via CDN

Elegir la opción Frameworks via CDN escribirá un enlace a la dirección de la red de distribución de contenido (CDN) de jQuery. Esto evita la necesidad de agrupar y distribuir la biblioteca jQuery junto con nuestra composición de Edge Animate y puede reducir bastante el tamaño total del archivo. Como esta URL se comparte entre cualquier aplicación que use jQuery sobre CDN, y estos archivos se almacenan en caché localmente, es muy probable que el usuario ya tenga los archivos jQuery necesarios almacenados localmente antes de que el navegador necesite hacer una solicitud para nuestra composición de Edge Animate.

Las bibliotecas de Edge Animate Runtime también se distribuyen a través de CDN y podemos optar por incluirlas al publicar. Si bien Edge Animate Runtime no está tan extendido como jQuery, esto todavía quita mucho peso de nuestra salida final, colocándolo en lo que puede ser una descarga única. Esto no solo beneficia a nuestra composición de Edge Animate publicada en visitas posteriores, sino que también hace que otras composiciones de Edge Animate distribuidas por la Web se beneficien de las bibliotecas ya descargadas y almacenadas en caché.

Usar la opción Google Chrome Frame para IE 6, 7 y 8

Google Chrome Frame es un complemento que permite a un usuario del navegador Microsoft Internet Explorer (IE) experimentar el contenido web dentro de ese navegador, pero renderizado como si se estuviera viendo en el navegador Chrome de Google. Esto es especialmente útil para versiones anteriores de IE, que no son compatibles con muchos de los avances recientes en tecnología web. Descargue el complemento Chrome Frame de Google en [invalid URL removed].

Seleccionar usar Chrome Frame solo se aplica a Internet Explorer 6, 7 y 8 en la plataforma Windows. Cuando un usuario de Internet Explorer intenta ver este proyecto de Edge Animate, se le presentará la opción de instalar Chrome Frame dentro de su navegador actual.

Publicar con esta opción seleccionada inyectará un pequeño fragmento de código en el HTML del proyecto, justo encima del JavaScript del precargador dentro de la <head> de nuestro documento:

HTML
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

Usar la opción Publicar contenido como HTML estático

La opción Publicar contenido como HTML estático representará los distintos elementos HTML que normalmente crea JavaScript y se inyectan en la composición en tiempo de ejecución. Esto se puede utilizar para mejorar la búsqueda y la indexación en determinadas plataformas.

Sin HTML estático seleccionado

A continuación, se muestra el HTML generado sin la opción HTML estático de Edge Animate seleccionada. Observe cómo hay simplemente un DIV que representa toda la composición:

HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>ClippingText</title>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<script type="text/javascript" charset="utf-8" src="ClippingText_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-415806110 { visibility:hidden; }
</style>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-415806110">
</div>
</body>
</html>

Con HTML estático seleccionado

A continuación, se muestra el HTML generado con la opción HTML estático de Edge Animate seleccionada. En este caso, no solo tenemos el escenario de composición renderizado como HTML, sino también una variedad de otros elementos que forman parte de nuestra composición:

HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>ClippingText</title>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<script type="text/javascript" charset="utf-8" src="ClippingText_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-415806110 { visibility:hidden; }
</style>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-415806110">
<div id="Stage_Background" class="edgeLoad-EDGE-415806110"></div>
<div id="Stage_Extra" class="edgeLoad-EDGE-415806110">using web standards</div>
<div id="Stage_Purpose" class="edgeLoad-EDGE-415806110">Rich Motion and Interactivity</div>
<div id="Stage_Logo" class="edgeLoad-EDGE-415806110"></div>
<div id="Stage_Title" class="edgeLoad-EDGE-415806110">Adobe Edge</div>
</div>
</body>
</html>

Tenga en cuenta que aunque estos elementos se inyectan en el HTML, no tienen estilo hasta que se inicializa el tiempo de ejecución. Eso todavía lo gestiona la biblioteca de Edge Animate Runtime.

Dirigido a InDesign / DPS / Muse

Adobe InDesign es una aplicación de software que nos permite diseñar y previsualizar diseños de página para impresión o distribución digital con el conjunto de herramientas creativas integrado. Incluye un control robusto sobre las imágenes y la tipografía y puede generar resultados en varios formatos.

Puede encontrar más información sobre InDesign en el sitio web de Adobe en: http://www.adobe.com/products/indesign.html.

Adobe Digital Publishing Suite (DPS) es una solución para productores de contenido que desean crear, distribuir, monetizar y optimizar contenido producido en InDesign para dispositivos tablet. Puede encontrar más información sobre DPS en el sitio web de Adobe en: [invalid URL removed].

Adobe Muse es una aplicación de software basada en Abobe AIR (Flash Platform) que nos permite diseñar y publicar sitios web mediante el uso de una interfaz y herramientas familiares para los diseñadores de impresión. Muse presenta una estrecha integración con otros servicios de Adobe, como TypeKit para una biblioteca de fuentes integrada y Business Catalyst para una publicación web sencilla.

Puede encontrar más información sobre Muse en el sitio web de Adobe en: http://www.adobe.com/products/muse.html.

Al especificar Animate Deployment Package como una entrada de Publish Target como se muestra en la siguiente captura de pantalla, Edge Animate publicará un archivo .oam que se puede usar dentro de InDesign CS6 para usar como parte de un proyecto más grande. La forma más sencilla de lograr esto es arrastrar el archivo .oam a InDesign CS6, lo que nos permitirá incrustar la composición completa de Edge Animate a través del comando Colocar como se hace normalmente con los activos externos.

Podemos especificar un directorio de destino de nuestra elección. De forma predeterminada, la salida se ubicará en la raíz de nuestro proyecto en / publish / animate package / ClippingText.oam. (El nombre publicado será diferente para su composición, que aquí es ClippingText).

Colocar una composición dentro de InDesign

Para insertar la composición de Edge Animate dentro de InDesign CS6, abrimos un documento de InDesign y elegimos Archivo | Colocar… | Paquete Edge en el menú de la aplicación. Busque el archivo .oam que deseamos incluir. Luego haga clic en el documento para colocar la composición como lo haríamos con una foto o cualquier otro tipo de archivo importado.

Una vez en InDesign, podemos utilizar las herramientas de flujo de trabajo de DPS incluidas para publicar en Adobe Digital Publishing Suite.

Colocar una composición dentro de Muse

Para insertar la composición de Edge Animate dentro de Adobe Muse, abrimos un documento de Muse y elegimos Archivo | Colocar… | Animación de borde en el menú de la aplicación. Busque el archivo .oam que deseamos incluir. Luego haga clic en el documento para colocar la composición como lo haríamos con una imagen o cualquier otro tipo de archivo importado que sea compatible con Muse.

Con Adobe Muse, podemos publicar un sitio web para cargarlo más tarde, a través del Protocolo de transferencia de archivos (FTP) o, alternativamente, publicar en la Web utilizando la plataforma integrada de Adobe Business Catalyst: [invalid URL removed].

Dirigido a iBooks / OS X

Apple iBooks Author (solo disponible en OS X) es una aplicación gratuita en la Mac App Store que permite a los usuarios crear libros de texto multitáctiles dirigidos al iPad (tenga en cuenta que iBooks Author solo está dirigido al iPad, ningún otro dispositivo tablet).

Puede encontrar más información sobre iBooks Author en el sitio web de Apple en http://www.apple.com/ibooks-author/.

Al especificar iBooks / OS X como una entrada de Destino de publicación, Edge Animate publicará un archivo .wdgt, que es básicamente un directorio de archivos sin comprimir para su consumo a través de iBooks Author. Estos widgets de iBooks son muy fáciles de usar. Simplemente podemos arrastrar y soltar el archivo .wdgt en iBooks Author o importarlo como un widget HTML dentro de nuestro proyecto de iBooks.

Como es el caso de Animate Deployment Package, podemos especificar una entrada de Directorio de destino de nuestra elección. De forma predeterminada, la salida se ubicará en la raíz de nuestro proyecto en / publish / iBooks / ClipingText.wdgt. (El nombre publicado será diferente para su composición, que aquí es ClippingText).

Capturar una imagen de póster

Una imagen de póster es un archivo de imagen aplanado que se utiliza en lugar del panel Escenario, para su uso en navegadores que no son compatibles con Edge Animate Runtime como marcador de posición o imagen de reserva. Esto se logra agregando una imagen de póster capturada al escenario de nivel inferior. El formato utilizado para una imagen de póster es PNG.

Esto es muy similar a la práctica de servir una imagen estática en lugar de un SWF cuando se detecta que el usuario no tiene Flash Player instalado en su máquina. Puede proporcionar un nivel mínimo de soporte o una advertencia, según el contenido.

Guardar una imagen de póster

Antes de que podamos usar una imagen de póster capturada en nuestro proyecto, primero debemos realizar la captura de imagen en sí. Para hacerlo, debemos completar los siguientes pasos:

Encuentre un lugar en la línea de tiempo que represente visualmente bien el proyecto actual.
Mueva el cabezal de reproducción a esa posición exacta. Este será el escenario capturado como una imagen.
Acceda al panel Propiedades para el escenario deseleccionando todos los demás elementos.
Dentro del panel Propiedades está la propiedad Póster, que tiene junto a él un pequeño icono que parece una cámara. Haga clic en este botón para invocar la superposición Capturar una imagen de póster.
La superposición ahora cambiará para hacernos saber que una instancia de Imagen de póster se ha capturado correctamente (la imagen se puede encontrar dentro de la Biblioteca en Activos) y nos presentará algunas opciones inmediatas.
Elija Configuración de publicación… para acceder al cuadro de diálogo Configuración de publicación.
Elija Editar nivel inferior… para ingresar al escenario de nivel inferior y tal vez colocar la imagen de póster recién adquirida dentro de él.

En caso de que este cuadro de diálogo se descarte antes de tiempo mediante un clic fuera de lugar, la configuración de publicación también se puede invocar desde el menú Archivo y el escenario de edición de nivel inferior se puede invocar desde el panel Propiedades con el documento seleccionado.

Tenga en cuenta que para ver realmente el panel Escenario de nivel inferior en acción, necesitaremos utilizar un navegador que no sea compatible con las composiciones de Adobe Edge Animate.

Escenario de nivel inferior

El panel Escenario de nivel inferior existe para navegadores más antiguos o menos compatibles que no pueden representar contenido normal de Edge Animate. Este es un mecanismo mediante el cual podemos presentar algún contenido (básicamente una imagen estática) al usuario. Esto permite que el usuario sepa que existe algo en el espacio que ocuparía nuestra composición completa de Edge Animate. Si lo desea, también se puede colocar un mensaje de texto dentro del panel Escenario de nivel inferior, alertando al usuario sobre su mala elección de navegador.

Editar el panel Escenario de nivel inferior

Para acceder y editar el panel Escenario de nivel inferior, debemos mirar el panel Propiedades sin nada más que el panel Escenario seleccionado para acceder a las propiedades del escenario. Haga clic en el botón etiquetado Editar… para ingresar al panel Escenario de nivel inferior para manipularlo:

Una vez dentro del escenario de nivel inferior, podemos usar algunas de las herramientas de Edge Animate para agregar contenido, insertar una imagen de póster capturada previamente desde el panel del escenario principal o usar una imagen importada para comunicarnos con el espectador. Como se ve en la siguiente captura de pantalla, podemos agregar texto al panel Escenario de nivel inferior usando la herramienta Texto, pero eso es todo, aparte de usar medios de imagen importados o capturados:

De forma predeterminada, el panel Escenario de nivel inferior se compone simplemente de un relleno blanco.

Usar una imagen de póster

Edge Animate facilita mucho las cosas cuando se trata de sustituir elementos para su uso en estos escenarios alternativos. Cualquier imagen de póster capturada se puede utilizar dentro del panel Escenario de nivel inferior simplemente eligiendo Insertar en el panel Propiedades (suponiendo que ya hayamos capturado una entrada de Imagen de póster).

Si ya tenemos una instancia de Imagen de póster en el panel Escenario de nivel inferior, el comando del botón Insertar no lo detecta; por lo tanto, si el usuario final vuelve a hacer clic en él, el comando insertará la última imagen de póster generada. En el peor de los casos, es fácil tener réplicas de una imagen de póster una encima de otra, lo cual es algo que debe evitarse.

En esta captura de pantalla, se inserta una instancia de Imagen de póster a partir de una instantánea de nuestra animación. Esto puede servir como contenido alternativo cuando el navegador de un usuario simplemente no puede mostrar composiciones de Edge Animate.

Propiedades de la imagen

Una vez que se ha agregado una instancia de Imagen de póster al panel Escenario de nivel inferior, podemos realizar ediciones en su ubicación, ancho y alto. También podemos cambiar su ID, intercambiarlo con otra imagen a través del icono Seleccionar imagen en el lado derecho de la propiedad Fuente, o incluso configurar alguna URL de enlace para activarla tras la interacción del usuario:

La URL del enlace posiblemente podría llevar al usuario a una página diferente en un sitio web o enviarlo a descargar un navegador web más moderno.

Propiedades del texto

Además de una instancia de Imagen de póster, también podemos insertar elementos de texto en el panel Escenario de nivel inferior utilizando la herramienta Texto. La herramienta Texto aquí funciona de manera muy similar a cuando se usa en el escenario principal de Edge Animate y los elementos de texto se crean utilizando exactamente el mismo proceso. Las principales diferencias aquí son simplemente limitaciones en lo que se puede ajustar en términos de las propiedades de estos elementos de texto.

Las propiedades del elemento de texto dentro del escenario de nivel inferior son mucho más limitadas que a las que estamos acostumbrados en un proyecto completo de Edge Animate. Esto se debe a que solo se abordan las opciones de soporte más básicas.

Crear un escenario de nivel inferior personalizado

No tenemos que limitarnos a utilizar una instancia básica de Imagen de póster con algunos elementos de texto con nuestro Escenario de nivel inferior. Se puede crear una imagen más compleja (o más personalizada) en algo como Adobe Photoshop y luego importarla a Edge Animate para usarla explícitamente con el panel Escenario de nivel inferior.

Para este ejemplo, crearemos una imagen en Photoshop del tamaño exacto de nuestro escenario de proyecto de Edge Animate. En el caso del proyecto de ejemplo, en la carpeta llamada CustomDLS, esta es una resolución de 650 x 350.

Para mantener la mayor compatibilidad posible, exportaremos esta imagen como un archivo JPG. La instancia de Imagen de póster producida por Edge Animate se guarda como un archivo PNG, que no es compatible con navegadores muy antiguos.

Para crear una imagen de póster totalmente personalizada para el panel Escenario de nivel inferior, realice los siguientes pasos:

Primero, creamos nuestra imagen en Photoshop (o lo que sea que se prefiera) y elegimos Archivo | Guardar para Web….
Cuando aparezca el cuadro de diálogo Guardar para Web, elija JPG y exporte el archivo de imagen.
Dentro de nuestro proyecto de Edge Animate, edite el escenario de nivel inferior accediendo al panel Propiedades con el escenario principal seleccionado y haga clic en el botón Editar… junto a Escenario de nivel inferior.
Ahora, arrastre y suelte el archivo de imagen JPG que acabamos de exportar desde Photoshop al panel Escenario de nivel inferior. Observe que también se agrega a la biblioteca de nuestro proyecto. Reposicione si es necesario.
Finalmente, como nuestra imagen indica que el usuario debe hacer clic para descargar Google Chrome, agreguemos un enlace a nuestra imagen importada. Con el elemento de imagen seleccionado, escriba https://www.google.com/chrome/ en la propiedad URL del enlace en el panel Propiedades.

Ahora tenemos un panel de escenario de nivel inferior personalizado que utiliza las imágenes y los efectos que queremos. Como se trata de una imagen aplanada, no dependemos de las limitaciones de las herramientas de Edge Animate y podemos hacer que nuestra imagen incluya efectos de composición, modos de fusión, sombras paralelas y cualquier otra cosa que se necesite para transmitir nuestro mensaje al usuario.

Usar precargadores de proyectos

La precarga es un mecanismo que se ha utilizado durante años en otros medios para descargar suficiente material para garantizar una buena experiencia de usuario, antes de que el usuario pueda ver o interactuar con el contenido principal. Esta función suele ir acompañada de un aviso o animación de precarga visual, que alerta al usuario de lo que está sucediendo y le asegura que solo necesita esperar un poco de tiempo antes de experimentar el contenido descargado. Esto ayuda enormemente con grandes piezas de contenido, ya que de lo contrario el usuario simplemente pensará que el contenido está roto, lo que nadie quiere que suceda.

Los usuarios de Adobe Flash Professional desde hace mucho tiempo sin duda han creado muchos precargadores a lo largo de los años. En Flash Professional, los precargadores deben crearse desde cero. En Edge Animate, tenemos esta capacidad integrada en Edge Animate Runtime, lo que simplifica todo el proceso.

Los precargadores en las composiciones de Edge Animate son una forma en la que podemos proporcionar este tipo de retroalimentación visual al usuario cuando espera que se cargue una cierta cantidad del contenido de la composición. Hay dos comportamientos que podemos aplicar a nuestro Precargador en Edge Animate, Inmediato o Cortés, con las siguientes características:

Preferencia	Descripción
Precarga cortés	Cuando está seleccionado, Edge Animate no cargará nada más allá del precargador hasta que ocurra el evento de carga del documento. En este punto, se cargará.
Precarga inmediata	Cuando está seleccionado, Edge Animate se cargará lo más rápido posible como si todo estuviera incrustado directamente como parte de la página web.

Usar un precargador integrado

Adobe Edge Animate incluye una serie de recursos de precarga bastante agradables que se pueden utilizar libremente en nuestros proyectos. Estos recursos son básicamente pequeños archivos GIF animados que están diseñados para indicar que algo se está cargando y que el usuario debe esperar. En esencia, estos son más parecidos a los recursos animados de "throbber" que a los verdaderos precargadores, pero hacen el trabajo.

Para utilizar un precargador integrado para nuestra composición:

Seleccione el escenario principal deseleccionando todos los demás elementos o seleccionando el escenario en el panel Elementos.
En el panel Propiedades, busque el área Precargador. Elegir Editar… nos permitirá editar el panel Precargador dentro de un escenario de precargador especial:
Desde el escenario del precargador, elija Insertar imágenes prediseñadas del precargador… en el panel Propiedades. Esto revelará un cuadro de diálogo de superposición que contiene una variedad de recursos de precarga preconstruidos para elegir:

También podemos controlar el peso de nuestro precargador desde el panel Propiedades. En el ejemplo anterior, nuestro Precargador solo contiene JavaScript y, por lo tanto, pesa 3 kB. Agregar recursos de precarga definitivamente aumentará el tamaño total del archivo del precargador.
Ahora podemos elegir el recurso de precarga que deseamos utilizar en nuestra composición haciendo clic en él y eligiendo el botón Insertar…. Se agregará automáticamente al centro de nuestro escenario de precargador.
Una vez que guardemos y publiquemos nuestra composición, si se necesita un precargador, se mostrará al usuario mientras el resto del código de la composición y los recursos se descargan para su reproducción:

Edge Animate viene con una serie de diferentes recursos de precarga preconstruidos que se pueden insertar fácilmente en una composición de Edge Animate. Al elegir un activo en particular de este menú, podemos ver las dimensiones y el tamaño del archivo junto con una vista previa estática.

Una vez que se ha seleccionado e insertado una imagen de precarga, aparecerá en el centro del escenario de precarga como se ve en la siguiente captura de pantalla:

Al insertar recursos de precarga, podremos obtener una vista previa completa del precargador en el escenario, agregar elementos de texto para describir lo que está sucediendo para el usuario y ver el tamaño del archivo del precargador modificado en el panel Propiedades.

Observe cómo estos activos adicionales agregan peso al precargador. Siempre debemos tener esto en cuenta.

Crear un precargador personalizado

Como los recursos de Precargador son básicamente archivos GIF animados simples, en realidad podemos crear nuestros propios recursos animados para usar en la construcción de un Precargador de Edge Animate. Cualquier aplicación capaz de crear animaciones y generar un GIF animado funcionará. En este ejemplo, usaremos Adobe Flash Professional CS6 para crear una pequeña animación y exportarla como un archivo GIF para incluirla en nuestro Precargador.

¡Asegúrese de no hacer que los recursos del precargador sean demasiado pesados en términos de tamaño de archivo, de lo contrario, anula todo el sentido de tener un precargador, ya que los propios recursos del precargador tardarán un tiempo excesivo en cargarse!

Para crear un recurso de precarga personalizado en Flash Professional para usar en nuestra composición de Edge Animate:

Abra Flash Professional y cree un nuevo documento a través de Archivo | Nuevo… (ActionScript 2.0 o ActionScript 3.0 estarán bien, ya que simplemente estamos generando un archivo GIF). En este ejemplo, guardaremos el documento como throbber.fla.
Cambie las dimensiones del escenario dentro del panel Propiedades a una resolución más pequeña; ¡recuerde que necesitamos archivos pequeños para nuestros recursos de precarga! En este ejemplo, cambiamos el escenario a un ancho de 350 px y una altura de 120 px.
Ahora seleccione la herramienta Texto en la barra de herramientas y cree un campo de texto en el escenario. Simplemente escriba el mensaje que deseamos transmitir a nuestros usuarios CARGANDO.
Luego accederemos al panel Ajustes preestablecidos de movimiento (Ventana | Ajustes preestablecidos de movimiento) con nuestro campo de texto seleccionado y elegiremos el ajuste preestablecido llamado pulso. Esto aplica automáticamente la animación a nuestro campo de texto. ¡Eso es todo al respecto! Por supuesto, si somos competentes en animar contenido dentro de Flash Professional, podemos optar por crear la animación de la forma que queramos.
Ahora que tenemos una animación rápida, necesitamos exportarla en un formato que Edge Animate pueda entender fácilmente. Elija Archivo | Exportar | Exportar película… para mostrar la ventana de diálogo Exportar película.
Querremos seleccionar GIF animado (*.gif) en el control desplegable Guardar como tipo. También podemos cambiar el nombre del archivo que se exportará desde esta ubicación antes de hacer clic en el botón Guardar.

Ahora aparecerá el cuadro de diálogo Exportar GIF, que nos permitirá ajustar las siguientes opciones:

La siguiente tabla describe las distintas propiedades disponibles para nosotros utilizando este método:

| Propiedad | Descripción | |---|---| | Ancho | Esto representa el ancho de nuestra imagen exportada. | | Altura | Esta es la altura de nuestra imagen exportada. | | Resolución | Los puntos o píxeles por pulgada (DPI) de nuestra imagen exportada. Un valor de 72 es normal para pantallas de escritorio y portátiles. Las pantallas móviles variarán. | | Colores | Elija una paleta de colores hecha de 4 a 256 colores. Recuerde que cuantos menos colores se utilicen, menor será el tamaño del archivo. | | Transparente | Determina si escribir píxeles transparentes o no en la salida final. | | Entrelazar | Determina si entrelazamos filas horizontales o no. | | Suave | Determina si aplicar un algoritmo de suavizado a nuestra salida o no. | | Tramado de colores sólidos | Determina si se debe utilizar el tramado al aproximar los colores. | | Animación | Determina el número de veces que se repite la animación. (0 para bucle sin fin.) |
Al hacer clic en el botón Aceptar se completará el proceso de exportación.
Ahora tenemos un archivo GIF animado que se puede importar a Edge Animate y utilizar como recurso de precarga. ¡Bonito!

Para utilizar realmente nuestro precargador personalizado dentro de una composición de Edge Animate:

Seleccione el panel Escenario principal deseleccionando todos los demás elementos o seleccionando el elemento Escenario en el panel Elementos.
En el panel Propiedades, busque el área Precargador. Elegir Editar… nos permitirá editar el Precargador dentro de un Escenario de precargador especial.
Ahora, simplemente arrastre el archivo GIF que acabamos de exportar desde Flash Professional al escenario del precargador. El archivo se agregará a la Biblioteca | Activos del proyecto y se agregará un elemento de imagen al panel Escenario que muestra nuestro recurso de precargador animado.
También podemos colocar elementos de texto o incluso más imágenes en el escenario del precargador; solo tenga cuidado de no hacer que el precargador sea demasiado grande, de lo contrario, tardará demasiado en cargarse y se volverá inútil.

En este ejemplo, hemos utilizado Flash Professional para crear y generar un archivo GIF animado. Cualquier aplicación que nos permita crear y exportar archivos GIF animados se puede utilizar de la misma manera. El proceso dentro de Edge Animate no cambia.

Publicar una composición

Para publicar realmente nuestra composición, incluida toda la Configuración de publicación definida, nuestro panel Escenario de nivel inferior y Precargador, debemos elegir Archivo | Publicar en el menú de la aplicación. Esto revisará y minimizará todo el código JavaScript del proyecto minimizando los archivos relevantes. Esto hará que nuestras composiciones sean más limpias y ligeras al considerar la distribución.

Los dos archivos JavaScript principales en un proyecto de Edge Animate son los archivos Edge.js y Edge Actions.js. Cada proyecto de Edge Animate antepondrá el nombre del proyecto a los archivos, ya que son únicos para cada proyecto, mientras que los archivos Edge Animate Runtime y jQuery no lo son y se pueden compartir localmente o mediante el uso de una CDN.

En la siguiente sección, podemos ver las diferencias en el tamaño del archivo al comparar estos dos archivos en un proyecto no publicado con esos mismos archivos en un proyecto publicado.

Antes de publicar

La siguiente tabla muestra el tamaño del archivo en bytes de los archivos Edge.js y EdgeActions.js antes de la publicación. El nombre del archivo de proyecto proporcionado por el usuario se representa entre llaves.

Archivo	Tamaño
{xxx} _Edge.js	6.301 bytes
{xxx} _EdgeActions.js	1.292 bytes

Después de publicar

La siguiente tabla muestra el tamaño del archivo en bytes de esos mismos archivos (del mismo proyecto) pero después de la publicación. El nombre del archivo de proyecto proporcionado por el usuario se representa entre llaves.

Archivo	Tamaño
{xxx} _Edge.js	2.689 bytes
{xxx} _EdgeActions.js	539 bytes

Resumen

En este capítulo, hemos visto todas las opciones disponibles para nosotros al publicar contenido a través de Edge Animate en la Web, en InDesign o en iBooks Author. También hemos explorado una variedad de opciones que se utilizan para que la experiencia del usuario sea un poco más agradable. Estos incluyen el uso del escenario de nivel inferior, la captura de imágenes de póster y el uso de precargadores dentro de nuestros proyectos.

El capítulo final del libro profundizará en algunos de los aspectos más aislados y menos aparentes de Edge Animate que aún no se han cubierto en los capítulos que lo han precedido.

Buscar este blog

Animación Publicitaria 2024