Adobe Edge Animate CC 2015 Guide

Adobe Edge Animate CC (versión 2015) | Junio de 2015

Texto integrado

En las versiones anteriores de Edge Animate, se solía introducir el texto en una ventana emergente que aparecía más adelante en el escenario. En esta versión, puede escribir texto directamente en el escenario.

También se pueden dar formato a partes de texto (denominadas extensiones de texto), lo que en versiones anteriores no era posible.

Para añadir un elemento de texto a la composición, siga los siguientes pasos:

1. Haga clic en el icono “T” del menú.

Opción “Texto” del menú

2. Haga clic en el lugar que quiera insertar el texto, dentro del escenario.

3. Escriba el texto deseado.

En este caso, el cuadro de texto se ajusta automáticamente al texto que introduzca. Si quiere definir su propio cuadro de texto y, luego, escribir el texto, haga lo siguiente:

1. Haga clic en el icono “T” del menú. El cursor cambia a “+” en el escenario.

Arrastre el cursor en el escenario para delimitar el cuadro de texto.

Escriba el texto deseado.

Para dar formato a una parte del texto de forma diferente a la del resto, seleccione el texto deseado y utilice el panel Propiedades para modificarlo según precise.

Extensiones de texto

Las extensiones de texto se mantienen al transformar el texto (si se gira o se ajusta el tamaño).

Extensiones de texto giradas

Adobe Edge Animate CC 2014.1.1 | Noviembre de 2014

La versión 2014.1.1 de Adobe Edge Animate CC incluye numerosas correcciones de errores, incluido el error de bloqueo al usar la línea del tiempo y al reorganizar los elementos. Esta versión también incluye correcciones de varios problemas de audio y vídeo, y del flujo de trabajo de desplazamiento de efectos en

Adobe Muse, junto con las API, que incorporan nuevos tiempos de ejecución ( getSymbolTypeName

y symbol.seek

Privacidad Condiciones de uso Cookies Ad Choices

Adobe Edge Animate CC 2014.1 | Octubre de 2014

Disminución del tiempo de ejecución en un 55%

Las versiones anteriores del tiempo de ejecución de Edge Animate solían depender de jQuery internamente.

jQuery se ha añadido siempre como una dependencia de la composición, independientemente de si utiliza realmente alguna de las API de jQuery o no. Esta dependencia se ha quitado del último tiempo de ejecución de Edge Animate, lo que conlleva un menor tamaño de carga y un menor número de descargas necesarias para ejecutar las composiciones.

El requisito de un precargador de JS independiente también se ha quitado en esta versión. Edge Animate ahora genera un único archivo JS de la composición, que contiene el DOM completo y todo el código de la composición de Edge Animate.

Tamaño de carga reducido

El tamaño de carga es menor en comparación con las versiones anteriores

Número menor de descargas

El número de descargas de archivos para ejecutar sus composiciones es menor

Actualización de composiciones

Las composiciones creadas con versiones anteriores de Edge Animate se actualizan automáticamente cuando se abren con esta estructura. La composición actualizada junto con los archivos asociados se guarda en una carpeta independiente en la raíz de la carpeta del proyecto.

Por ejemplo, si la composición anterior se encuentra en la carpeta /user/MyProject, la composición actualizada estará en /user/MyProject_upgraded. Los activos a los que se hace referencia directamente en la composición se copian automáticamente en la carpeta de actualizaciones. Es posible que deba copiar manualmente el resto de los activos que no se utilicen directamente en la composición (por ejemplo, los archivos CSS adicionales y los activos que se utilicen únicamente mediante scripts).

Asimismo, debido a los nuevos cambios en el tiempo de ejecución que se describen a continuación, las dependencias de jQuery de las composiciones anteriores se añaden como scripts del usuario a la biblioteca en la composición actualizada.

Nota: dado que el nuevo tiempo de ejecución ya no depende de jQuery, puede intentar eliminar jQuery de las composiciones y probarlas si no utiliza ninguna de las API de jQuery.

Eliminación de dependencias de las bibliotecas de otros fabricantes

El tiempo de ejecución de Edge Animate ya no requiere jQuery para ejecutar sus composiciones. Sin embargo, aún puede utilizar algunas API de jQuery que estén disponibles en Edge Animate. Para obtener más detalles, consulte la documentación de referencia de la API de Edge Animate .

Guardado de imágenes, medios y scripts en carpetas personalizadas

Edge Animate ahora le permite especificar rutas de archivo adicionales para que pueda asignar las carpetas necesarias de cada tipo de activo mientras publica las composiciones en la Web. Dado que ahora puede especificar una ruta relativa de los activos, puede compartirlos en varias composiciones fácilmente.

Cuadro de diálogo Configuración de publicación con la opción Organización de activos

Las rutas de archivo son relativas al directorio de destino. Si escribe una ruta de archivo absoluta o utiliza el botón Examinar para asignar una carpeta de otra unidad (que no sea la del directorio de destino), se mostrará un error.

Error en la ruta de activos

Cambios en el cuadro de diálogo Guardar como

En las versiones anteriores de Edge Animate, cuando se guarda una composición, todos los archivos HTML y JS se guardan en el mismo directorio. Si guarda varias composiciones en la carpeta, se complicará la asignación de los activos a las composiciones correspondientes.

En esta versión de Edge Animate, el cuadro de diálogo Guardar como incluye una nueva opción, Guardar en una carpeta, que se selecciona de forma predeterminada para las composiciones que no se hayan guardado. Por lo tanto, de forma predeterminada, las composiciones ahora se guardan en una carpeta independiente con el nombre de la composición, junto con los archivos y los activos relacionados.

Opción Guardar en una carpeta

En el cuadro de diálogo Guardar como, si selecciona una carpeta con el ratón o el teclado y la opción

Guardar en una carpeta está seleccionada, se creará una subcarpeta en la carpeta seleccionada anteriormente.

Nueva opción de precargador

Para reducir el número de descargas, el DOM de precargador se incluye directamente en el HTML de la composición. Sin embargo, si desea que el DOM de precargador sea un archivo JS independiente, habilite la opción Publicar DOM precargado como un archivo distinto en Configuración de publicación tal y como se muestra a continuación:

Opción de precargador en el cuadro de diálogo Configuración de publicación

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Creative Cloud

OBTENER ASISTENCIA TÉCNICA > AYUDA DE CREATIVE CLOUD

Uso de la aplicación de escritorio de Creative Cloud para administrar aplicaciones y servicios

Se aplica a Creative Cloud

Contenido

Descarga aplicaciones, comparte archivos, busca fuentes e imágenes de stock y mucho más... desde la aplicación de escritorio de Creative Cloud.

En esta página

Descarga e instalación de aplicaciones

La aplicación de escritorio de Adobe Creative Cloud es tu plataforma central para administrar las docenas de aplicaciones y servicios que se incluyen en tu abono a Creative Cloud. También puedes sincronizar y compartir archivos, administrar miles de fuentes, acceder a bibliotecas de imágenes y activos de diseño de stock, así como mostrar y descubrir trabajos creativos en la comunidad. La aplicación de escritorio de Creative

Cloud es tu ventana a este maravilloso mundo creativo.

A continuación, te mostramos cómo descargar, instalar y actualizar tus aplicaciones a través de la aplicación de escritorio de Creative Cloud.

También puedes buscar aplicaciones por popularidad, categoría y versión.

La aplicación de escritorio de Creative Cloud se instala automáticamente cuando se descarga el primer producto de Creative Cloud. Si ya tienes instalado Adobe Application Manager, se actualiza automáticamente a la aplicación de escritorio de Creative Cloud.

Si no tienes la aplicación de escritorio de Creative Cloud instalada, puedes descargarla manualmente desde la página de la Aplicación de escritorio de Creative Cloud .

Sugerencia: si quieres descargar aplicaciones móviles en tu dispositivo móvil, consulta el catálogo de aplicaciones móviles .

1. Para acceder a la aplicación de escritorio de Creative Cloud, haz clic en el icono de Creative Cloud, situado en la barra de tareas (en

Windows) o en la barra de menús de Apple (en Mac OS).

Sugerencia: de forma predeterminada, la aplicación de escritorio de Creative Cloud se ejecuta cuando inicias sesión en el ordenador. Si no puedes ver el icono de Creative Cloud, es posible que hayas salido de la aplicación. Puedes reiniciarla de este modo:

Windows: selecciona Inicio > Programas > Adobe Creative Cloud.

Mac OS: selecciona Ir a > Aplicaciones > Adobe Creative Cloud > Adobe Creative Cloud.

2. Si no está seleccionada, haz clic en la ficha Apps. Las aplicaciones instaladas recientemente en el ordenador aparecen en la parte superior del panel. La lista puede incluir versiones anteriores instaladas.

3. Desplázate hacia abajo para ver más aplicaciones. También puedes filtrarlas por categoría o versión del software.

4. Haz clic en Instalar o Actualizar.

5. Para descargar e instalar una versión anterior de una aplicación, selecciona Versión anterior y elige una versión en el menú Instalar.

Sugerencia: según la velocidad de descarga de tu red, es posible que tarde algún tiempo en descargar la aplicación.

Para obtener información detallada, por ejemplo, sobre cómo iniciar una aplicación, consulta Descarga e instalación de las aplicaciones de Creative

Cloud .

Sincronización y uso compartido de archivos

Sincroniza archivos de tu ordenador con Creative Cloud y accede a ellos desde cualquier lugar. Los archivos estarán disponibles al instante en todos los ordenadores y dispositivos conectados, así como en tu carpeta de Creative Cloud Files. Para sincronizar archivos, descarga e instala la aplicación de escritorio de Creative Cloud en todos los ordenadores.

Para sincronizar archivos, realiza una de las siguientes acciones:

Copia, pega o mueve archivos al directorio o carpeta Creative Cloud Files de tu ordenador.

Puedes abrir el directorio o carpeta Creative Cloud Files desde la aplicación de escritorio de Creative Cloud. Solo tienes que hacer clic en la ficha Activos, luego, haz clic en el panel Archivos y, a continuación, selecciona Abrir carpeta.

En la aplicación, elige Archivo > Guardar o Archivo > Guardar como y dirígete al directorio o carpeta de Creative Cloud Files de tu ordenador.

Siempre dispondrás de los archivos originales en tu ordenador o dispositivo. Los archivos se sincronizan con todos los dispositivos conectados por medio de Creative Cloud.

Puedes verlos online en la página de Creative Cloud Assets . Una vez sincronizados los archivos, no es preciso que estés conectado a Internet, y puedes ver los archivos en la carpeta o en el directorio de Creative Cloud Files del ordenador.

Para obtener información sobre cómo trabajar con archivos cargados en Creative Cloud, consulta Gestión de activos y archivos .

Añadir fuentes de Typekit

Puedes usar las fuentes de Typekit en todas las aplicaciones de Creative Cloud y en otras aplicaciones de escritorio.

Elige una tipografía de uno de los numerosos partners diseñadores de Typekit y sincronízala con tu escritorio mediante Creative Cloud. Las fuentes sincronizadas pueden utilizarse en todas las aplicaciones de Creative Cloud y en otras aplicaciones de escritorio.

Debes disponer de un abono de Creative Cloud de pago o de una cuenta de Typekit válida para sincronizar fuentes con el ordenador de sobremesa.

El panel Fuentes muestra las fuentes sincronizadas con el ordenador. Para sincronizar fuentes, haz lo siguiente:

1. En la aplicación de escritorio de Creative Cloud, haz clic en la ficha Activos y, a continuación, en el panel Fuentes.

2. Haz clic en Añadir fuentes de Typekit. Se abrirá una ventana de Typekit en el navegador.

Si es la primera vez que usas Typekit, haz clic en Soy nuevo en Typekit y sigue las indicaciones que te ayudarán a configurar tu cuenta.

3. En la ventana de Typekit, desplaza el ratón sobre una tarjeta de fuentes y, a continuación, haz clic en + Utilizar fuentes.

4. Selecciona las fuentes de la familia seleccionada y haz clic en Sincronizar fuentes seleccionadas.

¿Tienes alguna pregunta sobre la sincronización de las fuentes? Aquí te indicamos paso a paso lo que tienes que hacer .

Búsqueda de recursos en Adobe Stock

Puedes buscar activos de imágenes en Adobe Stock justo desde la aplicación de escritorio de Creative Cloud.

Adobe Stock es un servicio que proporciona a los diseñadores y empresas acceso a 40 millones de imágenes, ilustraciones y gráficos vectoriales certificados, de gran calidad, y exentos de derechos de autor; justo lo que nuestros usuarios necesitan para completar sus proyectos creativos.

Puedes adquirir imágenes individuales según las vayas necesitando o puedes adquirir una suscripción de varias imágenes.

1. En la ficha Stock, escribe las palabras clave para realizar la búsqueda de imágenes de stock y haz clic en Ir.

2. Si se te solicita la fecha de nacimiento, introdúcela y haz clic en Actualizar.

Podrás observar una página del sitio web de Adobe Stock que mostrará las imágenes de stock relacionadas con tu búsqueda.

Adobe Stock y las Bibliotecas Creative Cloud

Puedes añadir a tus bibliotecas la vista previa de las imágenes con marca de agua desde el sitio web de Adobe Stock. En las aplicaciones de

Creative Cloud que sean compatibles con las Bibliotecas (Photoshop, Illustrator, InDesign, Premiere Pro y After Effects), solo tienes que arrastrar la imagen de stock con marca de agua desde el panel Bibliotecas hasta tu proyecto creativo. Cuando hayas elegido la imagen adecuada, puedes comprar la licencia de dicha imagen de stock desde el panel Bibliotecas de la aplicación de escritorio de Creative Cloud.

Al comprar la licencia de una imagen, las aplicaciones de Creative Cloud compatibles con los activos vinculados a las bibliotecas (como Photoshop,

Illustrator e InDesign) actualizarán automáticamente todas las instancias vinculadas de la imagen con la versión de alta resolución, con licencia y sin marca de agua que hayas adquirido.

Para obtener más información,

consulta

Uso de Adobe Stock

Búsqueda de activos de diseño con Market

Creative Cloud Market es una colección de contenido certificado de alta calidad diseñado por y para creativos. Desde Market, los suscriptores de

Creative Cloud pueden acceder de forma gratuita, desde un dispositivo móvil o de escritorio (a través de las aplicaciones conectadas de Creative

Cloud), a una amplia selección de gráficos vectoriales, iconos, patrones, kits de interfaz de usuario y mucho más. Asimismo, los suscriptores de

Creative Cloud podrán descargar de forma gratuita hasta 500 activos por mes. Este nuevo servicio permite a los creativos encontrar recursos que podrán modificar y manipular para usar como base de su proceso creativo.

Para obtener más información, consulta Activos de Creative Cloud Market .

Publicación y descubrimiento de contenido con Behance

Muestra y descubre trabajos creativos en Behance . Como miembro, puedes crear un portafolio de tu trabajo y difundirlo fácilmente a un gran número de usuarios. Asimismo, puedes descubrir los trabajos creativos más recientes de diseñadores de todo el mundo explorando trabajos populares o destacados en distintos campos.

Inicia sesión o regístrate para acceder a las opciones de fuente de actividades, portafolio, así como compartir y descubrir nuevos trabajos de

Behance. Si ya dispones de una cuenta, se te pedirá que inicies sesión. Si aún no dispones de una cuenta, el registro es rápido y sencillo.

Incluso aunque no tengas una cuenta de Behance, puedes explorar los proyectos y el trabajo en curso desde la aplicación de escritorio de

Creative Cloud a través del panel Comunidad.

Para obtener más información, consulta Compartir en Behance o visita el Foro de la comunidad de Adobe Behance.

Inicio y fuente de actividades

El flujo de actividad del panel Inicio de la aplicación de escritorio de Creative Cloud muestra tus interacciones con Creative Cloud. Aquí puedes ver los eventos y actividades como, por ejemplo, la disponibilidad, las actualizaciones y el estado de instalación de las nuevas aplicaciones.

Iniciar sesión para activar Creative Cloud

Activación y desactivación de Creative Cloud

Para activar Creative Cloud, solo tienes que iniciar sesión en Creative Cloud con tu Adobe ID. Al iniciar sesión, se activa la licencia de Creative

Cloud, así como todas las aplicaciones y servicios instalados que están asociados a tu Adobe ID. A continuación, podrás empezar a usar las aplicaciones y servicios.

Para iniciar sesión, haz clic en el icono de Creative Cloud que aparece atenuado en la barra de tareas (en Windows) o en la barra de menús de Apple (en Mac OS).

Introduce tu Adobe ID (suele ser tu dirección de correo electrónico) y tu contraseña, y haz clic en Iniciar sesión. (Si se abre la aplicación de escritorio de Creative Cloud, significa que has iniciado sesión correctamente).

A partir de ese momento, ya puedes utilizar los servicios de Creative Cloud, instalar las aplicaciones e iniciar las aplicaciones de Creative

Cloud que ya hayas instalado.

Para desactivar Creative Cloud, cierra sesión. Al cerrar sesión, se desactivan todas las aplicaciones y servicios instalados de Creative Cloud que están asociados a tu Adobe ID en el mismo equipo. Las aplicaciones siguen estando instaladas, pero no están conectadas a una licencia válida.

Para reactivar la licencia y utilizar las aplicaciones y servicios, vuelve a iniciar sesión.

Para cerrar sesión, abre la aplicación de escritorio de Creative Cloud, haz clic en el icono de la rueda dentada y elige Preferencias. Luego, haz clic en General y, a continuación, haz clic en Cerrar sesión.

Las aplicaciones y servicios de Creative Cloud que están asociados a tu Adobe ID se desactivarán en ese equipo.

Para obtener más información, consulta Inicio y cierre de sesión para activar las aplicaciones de Creative Cloud .

Preferencias

Para abrir el cuadro de diálogo Preferencias en la aplicación de escritorio de Creative Cloud, haz clic en el icono de la rueda dentada y selecciona Preferencias.

El cuadro de diálogo Preferencias te ofrece diferentes opciones para personalizar y trabajar con Creative Cloud; entre las que se incluyen el cambio del idioma de instalación del software, los ajustes en la configuración de los servicios de Creative cloud, así como el cierre de sesión en caso de que necesites desactivar temporalmente tu cuenta.

Para desactivar todas las aplicaciones y servicios de Creative Cloud asociados a tu Adobe ID, haz clic en General y, a continuación, haz clic en Cerrar sesión. Al cerrar sesión, se desactivan todas las aplicaciones y servicios instalados de Creative Cloud que están asociados a tu

Adobe ID.

Para activar las actualizaciones automáticas, selecciona Mantener actualizado Creative Cloud para escritorio.

Para cambiar el idioma o la ubicación de instalación del software, selecciona Preferencias > Creative Cloud > Aplicaciones. Para obtener instrucciones detalladas, consulta Cambiar la configuración de idioma de las aplicaciones de Creative Cloud .

Para conectarte a tus trabajos a través del repositorio de activos Adobe Experience Manager (AEM) Assets, selecciona Iniciar sesión en

activos AEM Assets. Para obtener más información, consulta Activos AEM Assets .

Utiliza las fichas Archivos, Fuentes y Behance para modificar las diferentes configuraciones.

Si quieres que se muestren las notificaciones de Adobe, selecciona la opción Mostrar notificaciones del SO en cada ficha.

Was this helpful?

Yes No

By clicking Submit, you accept the Adobe Terms of Use .

Volver arriba

Temas similares

Descarga e instalación de las aplicaciones de Creative Cloud

Actualización de las aplicaciones de Creative Cloud

Desinstalación o eliminación de las aplicaciones de Creative Cloud

Inicio y cierre de sesión para activar las aplicaciones de Creative Cloud

Ayuda de Creative Cloud

Consulta el manual online, examina los tutoriales o recibe ayuda. Más información .

¿Sigue necesitando ayuda?

Pregunte a la comunidad

Publique sus preguntas para que le respondan expertos en la materia.

Pregunta a la comunidad

Obtener ayuda

Tutoriales, manuales y otros usuarios que podrán echarle una mano.

Obtén asistencia técnica

Cambiar regiónEspaña (Cambiar)

Seleccionar región

Al seleccionar una región, se cambia el idioma y el contenido en Adobe.com.

Americas

Brasil Canada - English Canada - Français Latinoamérica México United States

Europe, Middle East and Africa

Africa -

English België Belgique Belgium - English Česká republika Cyprus - English Danmark Deutschland Eastern Europe -

English Eesti España France Greece - English Hrvatska Ireland Israel - English Italia Latvija Lietuva Luxembourg - Deutsch Luxembourg -

English Luxembourg - Français Magyarország Malta - English Middle East and North Africa - English Moyen-Orient et Afrique du Nord -

Français Nederland Norge Österreich Polska Portugal România Schweiz Slovenija Slovensko Srbija Suisse Suomi Sverige Svizzera Türkiye

United Kingdom България Россия Україна תירבע - לארשי

Asia - Pacific

Australia Hong Kong S.A.R. of China India - English New

Zealand Southeast Asia (Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam) - English

中国中國香港特別行政

區台

灣

日本

한국

Commonwealth of Independent States

Includes Armenia, Azerbaijan, Belarus, Georgia, Kazakhstan, Kyrgyzstan,

Moldova, Tajikistan, Turkmenistan, Ukraine, Uzbekistan

Productos Descargas Asistencia e información Empresa

Examinar, sincronizar y gestionar activos

Examinar activos

Sincronización o carga de archivos

Eliminar archivos

Planes y cuota de almacenamiento

Solución de problemas

Tu cuenta de Adobe Creative Cloud incluye almacenamiento online, por lo que tus archivos estarán a tu disposición en cualquier lugar, así como en cualquier dispositivo u ordenador. Puedes obtener una vista previa de muchos tipos de archivos creativos directamente en un navegador web en tu ordenador, tablet o smartphone. Estos tipos de archivo incluyen: PSD, AI, INDD, JPG, PDF, GIF, PNG, Photoshop Touch e

Ideas, entre otros.

Adobe Creative Cloud para escritorio mantiene todos los archivos sincronizados. De este modo, todas las adiciones, modificaciones o eliminaciones se verán reflejadas en todos los ordenadores y dispositivos conectados. Por ejemplo, si cargas un archivo .ai utilizando la página Creative Cloud Assets , se descargará automáticamente en todos los ordenadores conectados.

Examinar activos

Tus activos de Creative Cloud incluyen archivos sincronizados con tu escritorio, activos creados con apps para dispositivos móviles compatibles con Creative Cloud y las Bibliotecas Creative Cloud. Puedes examinar todos tus activos usando la página Creative Cloud Assets, que organiza los activos de la siguiente manera:

Archivos

muestra los archivos sincronizados con el directorio Creative Cloud Files en el escritorio

Creaciones móviles

Creative Cloud muestra los activos creados con las apps para dispositivos móviles compatibles con

Bibliotecas

muestra las bibliotecas de diseños que hayas creado

Nota:

mientras realizas algunas acciones en los activos del escritorio como renombrar, compartir, descargar, reemplazar y guardar (en Archivos), solo puedes ver los activos que hay en Creaciones móviles y

Bibliotecas, en la página Creative Cloud Assets.

Cuando haces clic en una categoría de activos, se expande y se muestran las subcategorías, en el caso de que las hubiera. Por ejemplo, los activos que hay en Archivos se organizan en Todo, Compartido y

Archivado.

Todo

: Muestra todos los archivos sincronizados con el directorio Creative Cloud

Files

Compartido

: Muestra los archivos que comparte con otros usuarios de

Creative Cloud

Archivado

: Muestra los archivos que se han eliminado

Asimismo, puedes examinar los activos creados con apps para dispositivos móviles de Creative Cloud en Creaciones móviles, donde se subclasifican en función de la app con la que se han creado.

Para obtener más información sobre Bibliotecas, consulta Bibliotecas Creative

Cloud.

Sincronización o carga de archivos

Para sincronizar archivos desde tu ordenador, realiza uno de los siguientes procedimientos:

Copia, pega o mueve archivos al directorio Creative Cloud Files de tu escritorio.

En la aplicación, selecciona Archivo > Guardar o Archivo > Guardar como y ve al directorio Creative Cloud Files.

Para abrir el directorio Creative Cloud Files en la aplicación de escritorio de Creative Cloud, selecciona

Activos > Archivos y haz clic en Abrir carpeta.

Nota:

no se sincronizarán los nombres de archivo que contengan caracteres especiales, como |, ", ?, <, >, /,

*, o :. Tampoco lo harán aquellos archivos con nombres reservados, como AUX o Com1. Si aparece un error, cambia el nombre del archivo para que pueda sincronizarse con Creative Cloud. Para obtener más información, consulta Error: Los archivos no se sincronizan con Creative Cloud.

Asimismo, puedes cargar archivos directamente en la página Creative Cloud Assets usando uno de los siguientes métodos.

Cargue y gestione sus archivos en Creative Cloud con el menú Acciones de la página Creative Cloud

Assets .

Arrastra y suelta los activos de tu escritorio en la página de Creative Cloud Assets .

Reemplazar un archivo

Al volver a cargar el archivo, se crea una versión del mismo y se sustituye el archivo existente por el nuevo.

Creative Cloud también guarda una copia de todos los cambios que realices en los archivos y los sincroniza a través de Photoshop Touch, Adobe Ideas y la aplicación de escritorio de Creative Cloud.

Para sustituir un archivo en la página Creative Cloud Assets, sigue estos pasos:

Nota

: el nuevo archivo debe ser del mismo tipo que el del archivo que se sustituye. Por ejemplo, no se puede sustituir un archivo .PSD por un archivo .AI.

Para obtener información sobre las versiones, consulta Preguntas frecuentes sobre las versiones.

1. Busca y abre el archivo para visualizarlo.

2. Selecciona Acciones > Reemplazar o arrastra el archivo de la carpeta a la ventana del navegador.

Eliminar archivos

Puedes eliminar archivos del sitio web de Creative Cloud o de Adobe Touch Apps. También puedes utilizar los comandos del sistema operativo para eliminar archivos del directorio Creative Cloud Files en tu escritorio.

Todas las eliminaciones se sincronizan con tu cuenta y los archivos se guardan en Creative Cloud. Los archivos originales están siempre en tu ordenador y dispones de una copia en Creative Cloud, de modo que puedes acceder a ellos en cualquier lugar.

Los archivos guardados siguen ocupando almacenamiento online. Puedes eliminar los archivos de forma permanente o bien restaurarlos desde la carpeta Archivo. La eliminación definitiva de los archivos libera la cuota de almacenamiento.

Eliminación permanente o restauración de archivos

La eliminación permanente de activos es un proceso de tres pasos:

También puedes restaurar un documento archivado:

1. Guarda un archivo del directorio Creative Cloud Files en tu escritorio, en apps para dispositivos móviles compatibles con Creative Cloud o en la página Creative Cloud

Assets . Los archivos guardados se trasladan a la categoría Archivado en Mis activos >

Archivos.

2. En la página Archivado, selecciona los archivos que deseas eliminar permanentemente y haz clic en Eliminar permanentemente.

3. En el cuadro de diálogo de confirmación, haz clic en Eliminar permanentemente.

1. En la página Archivado, selecciona los archivos que deseas restaurar y haz clic en

Restaurar.

2. En el cuadro de diálogo de confirmación, haz clic en Restaurar.

Planes y cuota de almacenamiento

La cuota de almacenamiento varía en función de tu abono a Creative Cloud.

Plan de abono

Plan gratuito

Creative Cloud (Plan fotográfico)

Creative Cloud (Plan completo y de aplicación

única)

Creative Cloud para equipos

Cuota de almacenamiento gratuito

2 GB

20 GB

100 GB

Puedes consultar el estado de almacenamiento en la ficha Archivos que se encuentra debajo del panel

Activos de la aplicación de Creative Cloud para escritorio o en la página Configuración de la página Actividad de Creative Cloud .

Estado del almacenamiento en la aplicación de escritorio de Creative Cloud

Estado del almacenamiento en la página

Configuración

Creative Cloud sincroniza hasta 1 GB de desbordamiento de cualquier dispositivo. Después, la aplicación para escritorio deja de sincronizar archivos nuevos y te informa de que has superado la cuota. Los archivos que no se pueden cargar se muestran con un signo de exclamación rojo. Aun así, puedes mover y eliminar archivos, así como cambiarles el nombre. Para seguir sincronizando archivos, elimina otros archivos de forma permanente para liberar espacio.

Nota:

una pequeña parte del almacenamiento se utiliza con fines administrativos. Por tanto, el espacio de almacenamiento real será ligeramente inferior al asignado. Varía de 100 KB a 500 KB en función del número de archivos del usuario.

Buscar y añadir fuentes desde Typekit

Solución de problemas

Pregunta a la comunidad

Publica, debate y forma parte de nuestra increíble comunidad

Ponte en contacto con nosotros

Comienza aquí para conectar con nuestro personal

Consulta también

Introducción a Creative Cloud

Assets

Compartir archivos y carpetas

Colaborar compartiendo carpetas

Sincronizar y compartir archivos con colaboradores

(vídeo, 10 min)

Estado de Adobe Creative

Cloud

Error: Los archivos no se sincronizan con Creative

Cloud

Preguntas frecuentes sobre las versiones

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Añadir fuentes de Typekit

Typekit es un servicio de suscripción que ofrece acceso a una amplia biblioteca de fuentes para su uso en aplicaciones de escritorio y sitios web.

Con tu suscripción a Creative Cloud se incluye un plan de portafolio de Typekit, y los miembros de Creative Cloud con abono gratuito pueden acceder a una selección de fuentes de Typekit para su uso en sistemas de escritorio y sitios web.

Suscríbete a Creative Cloud

(abono gratuito, plan completo o de aplicación única) o a un plan independiente de Typekit para sincronizar las fuentes con tu escritorio. Para obtener más información, consulta la página de producto de Typekit y las opciones de planes de Typekit .

Introducción

Utilizar fuentes sincronizadas

Gestionar la sincronización de fuentes

Introducción

Puedes seleccionar una tipografía de uno de los numerosos partners diseñadores de tipografías de Typekit y, a continuación, sincronizarlas en tu escritorio mediante Creative Cloud o utilizarlas en la Web. Las fuentes sincronizadas están disponibles para su uso en todas las aplicaciones de Creative Cloud como, por ejemplo,

Photoshop o InDesign, así como otras aplicaciones de escritorio, como MS Word.

La aplicación de Creative Cloud para escritorio debe estar instalada en el ordenador para sincronizar las fuentes. Si aún no la tienes instalada, descárgala e instálala. Para obtener más información, consulta Creative Cloud en el escritorio .

Typekit está activado de manera predeterminada para que pueda sincronizar las fuentes y usarlas en las aplicaciones de escritorio.

Llegados a este punto, si ya has seleccionado las fuentes para sincronizarlas en tu navegador web, empezarán a sincronizarse automáticamente con tu ordenador.

Buscar y añadir fuentes desde Typekit

Puedes acceder a la biblioteca de Typekit desde varios lugares. Usa la combinación de los siguientes métodos que mejor ajuste la selección de la nueva fuente en tu flujo de trabajo existente.

Desde la aplicación Creative

Cloud para escritorio

En la ficha Fuentes, haz clic en

Desde una aplicación integrada de Typekit

En el menú de fuente de la

Directamente en el sitio web de

Typekit.com

Usa tu Adobe ID y tu contraseña

Añadir fuentes de Typekit

. Se abrirá una ventana del navegador e iniciará sesión en Typekit.com.

aplicación, haz clic en

Añadir fuentes de Typekit

. Se abrirá una ventana del navegador directamente desde la aplicación.

para iniciar sesión en

Typekit.com

Puedes examinar fuentes y aplicar filtros para encontrar las fuentes que deseas. La disponibilidad de una fuente determinada se indica en la tarjeta de fuente.

Disponibilidad indicada en las tarjetas de fuentes

Web y escritorio

Web

Haz clic en una tarjeta de fuente individual para ver más detalles sobre la tipografía, incluidos los distintos tipos de todos los grosores y estilos disponibles.

Haz clic en

Utilizar fuentes

. En la ventana

Utilizar esta familia

, especifica dónde te gustaría sincronizar la fuente en tu escritorio o añádela a un kit para usarla en la Web.

Selecciona los estilos que necesites de la familia de fuentes y, a continuación, haz clic en

Sincronizar fuentes seleccionadas

Las fuentes se sincronizarán con todos los equipos donde esté instalada la aplicación de Creative Cloud.

Para ver las fuentes, abre la aplicación de Creative Cloud y haz clic en el panel

Fuentes

Utilizar fuentes sincronizadas

Para utilizar las fuentes que has sincronizado, solo tienes que abrir cualquier aplicación de escritorio e ir al menú de fuentes. Verás las fuentes sincronizadas en la lista de opciones. Algunas aplicaciones de escritorio, como Microsoft Office, pueden requerir un reinicio después de que se sincronice una fuente nueva.

Menú de fuentes de InDesign con las fuentes sincronizadas de Typekit

Para obtener más información sobre cómo trabajar con fuentes de Typekit en una aplicación de Creative

Cloud, consulta los siguientes recursos:

Trabajar con fuentes de

Typekit en InDesign CC

Trabajar con fuentes de

Typekit en Illustrator CC

Trabajar con fuentes de

Typekit en Photoshop

Trabajar con fuentes de

Typekit en Premiere Pro

Trabajar con fuentes de

Typekit en After Effects

Gestionar la sincronización de fuentes

Puedes ver las fuentes sincronizadas de tu ordenador con el panel Fuentes de la aplicación de Adobe

Creative Cloud o en la cuenta de Typekit.com.

Quitar fuentes sincronizadas

Para quitar fuentes sincronizadas de tu ordenador:

1. En el panel Fuentes de Adobe Creative Cloud, haz clic en Administrar fuentes. La página Fuentes sincronizadas se abrirá en una ventana del navegador. También puedes iniciar sesión en Typekit.com e ir directamente a tu página Fuentes sincronizadas.

2. A la derecha de las fuentes que ya no desees usar, haz clic en

Quitar

Desactivar Typekit

Puedes activar o desactivar la función Sincronizar fuentes. Si desactivas la función Sincronizar fuentes, dejarán de sincronizarse las fuentes y se eliminarán las que se hayan sincronizado en el equipo.

1. En la aplicación de escritorio de Creative Cloud, elige >

Preferencias > Creative

Cloud

2. Haz clic en

Fuentes

3. Para activar o desactivar la sincronización de fuentes, selecciona

Activar

Desactivar

en la configuración Activar/Desactivar de Typekit.

Usar Typekit sin conexión

Si se queda sin conexión mientras la aplicación de Creative Cloud está activada y con la sesión iniciada, las fuentes sincronizadas seguirán disponibles para el uso. Los cambios que hagas en la selección de sincronización de fuentes en Typekit.com no se reflejarán hasta que se reanude la conectividad.

Si inicias la aplicación de Creative Cloud estando sin conexión, las fuentes no estarán disponibles y no aparecerán en los menús de fuentes estándar.

Artículos relacionados

Sincronizar fuentes con el escritorio | Typekit.com

Añadir fuentes a las aplicaciones de escritorio mediante Creative Cloud

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Creative Cloud Market

Creative Cloud Market es una colección de contenido protegido de alta calidad diseñada por creativos para creativos, disponible para todos los usuarios de Creative Cloud de pago, excepto clientes de Plan fotográfico. Desde Market, los usuarios de Creative Cloud pueden acceder de forma gratuita, tanto desde aplicaciones móviles como de escritorio (a través de las aplicaciones conectadas de Creative Cloud), a una amplia selección de gráficos vectoriales, iconos, patrones, kits de interfaz de usuario y mucho más.

Asimismo, los suscriptores de Creative Cloud podrán descargar de forma gratuita hasta 500 activos por mes.

Este nuevo servicio te permitirá encontrar activos que podrás modificar y manipular para usar como base de tu proceso creativo.

Para tener acceso a Market, primero deberás instalar la aplicación de escritorio de Creative Cloud o una app móvil compatible, como Adobe Photoshop Sketch. Para obtener información de descarga, consulta Creative

Cloud para escritorio . Descubre más en este corto tutorial en vídeo: Acceso a activos de diseño de Creative

Cloud Market.

Descubrir y descargar activos creativos

Puedes examinar miles de activos de calidad desde la aplicación de Creative Cloud para escritorio. Elige

Assets > Market

. También puedes expandir el menú desplegable para buscar por categoría o por palabras claves para, de este modo, encontrar los activos más relevantes para tu proyecto.

1. En Creative Cloud para escritorio, elige

Assets > Market

2. Creative Cloud Market incluye una selección de contenido protegido de alta calidad que abarca las categorías siguientes:

Para la colocación

: plantillas fotográficas y digitales con capas organizadas y máscaras profesionales (archivos PSD).

Interfaces de usuario

: archivos PSD con capas que incluyen kits completos, formularios, gráficos, navegación y widgets para aplicaciones móviles y web

(archivos PSD).

Formas vectoriales

: objetos y formas escalables que se integran con Photoshop,

InDesign e Illustrator (archivos SVG).

Iconos

: serie de pictogramas, contornos, símbolos planos y en 3D para la impresión, la utilización en sitios web y la localización de contenido (archivos PNG/SVG).

Patrones

: patrones y fondos geométricos, ilustrados y con texturas repetibles

(archivos PNG/SVG).

Pinceles

: pinceles de Photoshop abstractos y de medios naturales de alta calidad

(archivos ABR/TPL).

Para filtrar activos, selecciona una categoría desde el menú emergente Market.

3. Para buscar activos, haz clic en y especifica un término de búsqueda.

Es posible filtrar y ordenar los resultados de búsqueda.

4. Haz clic en una miniatura de un recurso para ver información adicional junto con los detalles del recurso.

5. Haz clic en

Descargar

y escoge una biblioteca en la que descargar el activo. También puedes crear una biblioteca nueva. Para obtener más información, consulta Bibliotecas

Creative Cloud.

Además de la biblioteca, los activos también se descargan automáticamente a la carpeta

Descargas de Market

de la carpeta de

Creative Cloud Files

principal.

¿Cómo obtengo Creative Cloud Market?

Preguntas frecuentes

Creative Cloud Market está disponible para todos los abonados a Creative Cloud de pago, excepto para los clientes de planes fotográficos (Plan fotográfico de Photoshop y Plan fotográfico de Creative Cloud).

Durante un tiempo limitado, Adobe Creative Cloud Market es accesible para todos los miembros de

Creative Cloud a través de la aplicación de iPad Adobe Sketch . Los miembros que dispongan de abono gratuito a Creative Cloud y los miembros de planes fotográficos podrán examinar los activos de Market mediante Creative Cloud para escritorio, pero no podrán descargar contenido. Para descargar y utilizar contenido de Creative Cloud Market, actualiza al Plan de aplicación única o al Plan completo de Creative

Cloud.

¿Por qué los clientes de Plan fotográfico no tienen acceso a Creative Cloud Market?

Creative Cloud Market es un nuevo beneficio que se ha añadido a determinados planes de pago de

Creative Cloud y que no está incluido en las autorizaciones para clientes del Plan fotográfico. Algunos servicios de Creative Cloud, como Creative Cloud Market, Typekit o ProSite, solo están disponibles para el Plan de aplicación única o el Plan completo de Creative Cloud. Para descargar y utilizar contenido de

Creative Cloud Market, actualiza al Plan de aplicación única o al Plan completo de Creative Cloud.

¿Necesito un abono a Creative Cloud?

Creative Cloud Market está disponible para los abonados a Creative Cloud de pago. Los usuarios con los abonos de aplicación única y plan completo de cualquier plan (para particulares, equipos, el sector educativo o empresas) pueden optar a esta solución. Los usuarios pueden acceder a Creative Cloud

Market a través de la aplicación de Creative Cloud para escritorio.

Los usuarios del Plan fotográfico de Creative Cloud no pueden optar al acceso a Market mediante

Creative Cloud para escritorio. Los usuarios con abono gratuito podrán examinar los activos de Market mediante Creative Cloud para escritorio, pero no podrán descargar contenido.

¿Cuentan los activos descargados en la cuota de almacenamiento?

Sí. Los activos descargados se almacenan en la carpeta de Creative Cloud Files y cuentan para el almacenamiento. Si superas tu cuota de almacenamiento, ya no podrás descargar más activos a menos que elimines archivos antiguos y liberes espacio. Consulta Gestión y sincronización de archivos .

¿Puedo utilizar los activos en mis proyectos?

Sí. Los activos son exclusivos y se proporcionan de forma gratuita para la utilización en tus proyectos.

¿Puedo copiar o realizar copias de seguridad de los activos para su utilización en el futuro?

Sí, puedes realizar copias de seguridad de los activos obtenidos de Creative Cloud Market para su utilización en el futuro.

¿Puedo compartir los activos tras descargarlos?

No. Pese a que los activos se proporcionan de forma gratuita a los usuarios con abono a Creative Cloud para que puedan utilizarlos en sus publicaciones, producciones y proyectos, estos no se pueden compartir ni redistribuir.

¿De dónde procede el contenido que utiliza Adobe en Creative Cloud Market?

El contenido de Adobe mana del grupo de creativos de mayor talento de Behance, la plataforma online gratuita líder en el sector utilizada para mostrar y descubrir trabajos creativos.

¿Puede incluirse mi trabajo en Creative Cloud Market?

Para ampliar el alcance de tu trabajo, Adobe recomienda a todos los artistas potenciales utilizar Behance para publicar su trabajo. Adobe busca y protege el futuro contenido en Behance.

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Creative Cloud Extract

Utilice Creative Cloud Extract para crear el diseño de Photoshop con el fin de codificar el flujo de trabajo de manera más sencilla. Extract simplifica el proceso para los diseñadores web y los desarrolladores web y mejora en gran medida la eficiencia a la hora de transformar un diseño web en un código con el que se puede trabajar.

Las composiciones de Photoshop son un método muy utilizado para compartir especificaciones de diseño con desarrolladores web, quienes después tienen que convertir la interpretación del diseño en HTML y CSS.

En un flujo de trabajo normal, los diseñadores crean composiciones de Photoshop para un diseño web o destinado a dispositivos móviles. Después, los diseñadores de producción preparan el archivo PSD para los desarrolladores, dividen los activos y crean especificaciones de líneas rojas. Los desarrolladores web se encargan de tomar esos activos y elementos de diseño y convertirlos en código.

Extract reinventa este flujo de trabajo y permite que los diseñadores web exporten activos optimizados en tiempo récord en Photoshop CC y compartan sus archivos PSD con desarrolladores mediante Creative Cloud

Assets. Por tanto, pueden desbloquear información de diseño clave y descargar activos en sus navegadores.

Posteriormente, los desarrolladores pueden acceder a esta información y aplicarla cuando codifican en

Dreamweaver CC.

Extract se suministra a través de Creative Cloud y está disponible en diferentes lugares del diseño PSD para codificar el flujo de trabajo. Al utilizar Extract, tiene la libertad de seleccionar el lugar en el que se encuentre más cómodo con las herramientas y tecnologías y le permite convertir su diseño en realidad.

Los diseñadores pueden trabajar en el entorno conocido de Photoshop CC para definir y extraer activos de imágenes de capas o grupos de capas.

Los desarrolladores web pueden acceder al archivo PSD en Creative Cloud Assets y utilizar Extract para exportar activos de imágenes y estilos CSS. Después, se pueden utilizar estos activos y estilos CSS para convertir las composiciones de diseños en código.

Los desarrolladores y los diseñadores web pueden emplear Extract desde Dreamweaver, una solución propia completa que ofrece sugerencias de códigos contextuales y extracción de activos de manera más directa en el entorno de codificación.

Activos de Extract en Photoshop

Los diseñadores que crean composiciones de Photoshop pueden definir y empaquetar rápidamente activos de imágenes procedentes de capas individuales o grupos de capas usando una interfaz visual sencilla creada sobre Adobe

Generator. Esto acelera enormemente el tiempo de creación; por tanto, los diseñadores pueden emplear más tiempo en diseñar.

Extract en Creative Cloud Assets

Los diseñadores de páginas web tienen la opción de compartir archivos PSD directamente desde

Creative Cloud Assets para que los desarrolladores puedan extraer rápidamente la información de diseño en el navegador (colores, degradados, fuentes, texto, código

CSS y más), lo que les ayuda a convertir la composición en código.

Además, pueden exportar imágenes

PNG, SVG y JPG optimizadas para la Web.

Extract en Dreamweaver

Los desarrolladores y los diseñadores web ahora pueden ver archivos PSD en Dreamweaver y emplear las sugerencias de códigos contextuales para definir fácilmente fuentes, colores y degradados en su

CSS. Asimismo, pueden arrastrar y soltar imágenes optimizadas en la superficie de la vista en vivo, copiar texto y mucho más.

Extract for Brackets (Preview)

La integración de Extract en Brackets supone disponer de la potencia de

Extract en un editor de código moderno y ligero. Con Extract for

Brackets (Preview), puede extraer la información de diseño de un archivo

PSD en formato CSS limpio y mínimo mediante las sugerencias de código contextuales. También puede extraer capas como imágenes, utilizar información de un archivo PSD para definir variables de preprocesadores, así como visualizar las dimensiones y distancias entre objetos.

Puede simplificar más el flujo de trabajo de su diseño mediante otros servicios de Creative Cloud a fin de mantener sincronizados sus activos, como archivos, fuentes y colores, para que todos tengan acceso a los

últimos diseños.

Sincronización de archivos

Sincronice y almacene archivos

PSD e imágenes extraídas en

Creative Cloud Assets para poder acceder a los archivos actualizados en todos sus dispositivos

Compartir carpetas

Utilice Creative Cloud Assets para compartir carpetas y así todo el equipo estará trabajando en el mismo conjunto de archivos.

También puede revisar y añadir comentarios a archivos.

Asimismo, Creative Cloud Assets ofrece un control básico de versiones.

Sincronización de fuentes

Creative Cloud facilita el acceso a fuentes de Typekit y los abonados pueden descargarlas cuando el diseño lo requiera.

Pregunta a la

Más información comunidad

Contacto

Tutorial de Creative Cloud

Extract

Ver ahora >

Publique, debata y forme parte de nuestra increíble comunidad

Preguntar ahora >

Comience aquí para contactar con nuestro personal

Comenzar ahora >

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Bibliotecas Creative Cloud

Actualizado en la versión de Adobe Creative Cloud de 2015

Lo que puedes hacer con Bibliotecas

Ayuda para Bibliotecas en aplicaciones Creative Cloud

Introducción: Trabajar con Bibliotecas Creative Cloud

Añadir a la biblioteca

Reutilizar y crear

Uso compartido y colaboración

Adobe Stock y las Bibliotecas Creative Cloud

Preguntas frecuentes

Las Bibliotecas Creative Cloud, que cuentan con tecnología Adobe CreativeSync, te permiten acceder a tus activos favoritos en cualquier parte. Crea imágenes, colores, estilos de texto y mucho más en distintas aplicaciones de escritorio y para dispositivos móviles de Creative Cloud; después, accede fácilmente a tus creaciones desde otras aplicaciones de escritorio y para dispositivos móviles con el fin de lograr un flujo de trabajo creativo perfecto.

Para obtener un resumen, puedes ver Introducción a Bibliotecas Creative Cloud .

Lo que puedes hacer con Bibliotecas

Capturar

Bibliotecas Creative Cloud

Administrar

Puedes organizar los activos de

Reutilizar y crear

Reutiliza y crea diseños e

proporciona un mecanismo para capturar los activos de diseño desde diversas aplicaciones, sin limitarse solo a las de escritorio.

Puedes capturar la inspiración dondequiera que te llegue gracias a la familia de aplicaciones móviles de Creative Cloud o incluso descargar activos de

Adobe Stock o Creative Cloud

Market.

diseño en múltiples Bibliotecas

Creative Cloud. Pueden basarse en proyectos, tipos de activos o incluso en tus favoritos personales que reutilizas para crear tu estilo característico.

ilustraciones con objetos de

Bibliotecas Creative Cloud.

Ayuda para Bibliotecas en aplicaciones Creative Cloud

Apps para dispositivos móviles

Aplicación

Shape CC

Color CC

Brush CC

Illustrator

Draw

Photoshop

Sketch

Illustrator Line

Hue CC

Comp CC

Premiere Clip

Ayuda para guardar activos en

Bibliotecas

Ayuda para utilizar activos de Bibliotecas

Formas vectoriales

Temas de

Color

N/D

Pinceles

N/D

Imágenes y formas

Pinceles

Color y gráficos

N/D

Recursos con más información

Preguntas frecuentes de Adobe

Shape CC

Preguntas frecuentes de Adobe

Color CC

Preguntas frecuentes de Adobe

Brush CC

Preguntas frecuentes de Adobe

Illustrator Draw

Preguntas frecuentes de Adobe

Photoshop Sketch

Preguntas frecuentes de Adobe

Illustrator Line CC

Preguntas frecuentes de Adobe

Hue CC

Preguntas frecuentes de Adobe

Comp CC

Preguntas frecuentes de Adobe

Premiere Clip

Preguntas frecuentes de Adobe

Photoshop Mix

Photoshop

Mix

Aplicación móvil de

Creative

Cloud

N/D

Creative Cloud | Preguntas frecuentes

Aplicaciones de escritorio y para navegadores

Aplicación o servicio

Photoshop

Illustrator

InDesign

Premiere Pro

After Effects

Creative Cloud

Market

(mediante la aplicación de escritorio de

Creative Cloud)

Ayuda para guardar activos en

Bibliotecas

Ayuda para utilizar activos de

Bibliotecas

Recursos con más información

Aplicaciones de escritorio

Bibliotecas Creative Cloud en

Photoshop

Bibliotecas Creative Cloud en

Illustrator

Bibliotecas Creative Cloud en

InDesign

Bibliotecas Creative Cloud en

Premiere Pro

Bibliotecas Creative Cloud en

After Effects

N/D Creative Cloud Market

Creative Cloud

Assets

Navegador

Ver y administrar (cambiar nombre, eliminar)

únicamente

Creative Cloud Assets |

Almacenamiento y uso compartido de contenido

numerosa. Consulta los recursos de aprendizaje de la aplicación móvil

Introducción: Trabajar con Bibliotecas Creative Cloud

Añadir a la biblioteca

Bibliotecas Creative Cloud proporciona un mecanismo para capturar los activos de diseño desde diversas aplicaciones sin limitarse solo a las de escritorio. Puedes capturar la inspiración dondequiera que te llegue gracias a la familia de aplicaciones móviles de Creative Cloud o incluso descargar activos de Adobe Stock o

Creative Cloud Market.

Móviles

Puedes añadir activos a tu biblioteca con una familia de aplicaciones de Adobe para dispositivos móviles cada vez más

y descubre cómo hacerlo.

Escritorio

Añade activos a Bibliotecas

Creative Cloud en el ordenador mediante una aplicación de escritorio de Creative Cloud.

Arrastra activos al panel

Bibliotecas de la aplicación de escritorio. También puedes ver y examinar las bibliotecas en la página Creative Cloud Assets .

Consulta los recursos de aprendizaje de la aplicación de

Creative Cloud Market

Descubre y añade activos a las bibliotecas desde Creative Cloud

Market. Utiliza la aplicación de escritorio de Creative Cloud para examinar y añadir activos de

Creative Cloud Market . También puedes añadir activos a una biblioteca con las apps para dispositivos móviles de Creative.

escritorio de Creative Cloud para

obtener más información sobre cómo utilizar las bibliotecas con ella.

Reutilizar y crear

Escritorio

En una aplicación de escritorio que admita Bibliotecas, abre el panel Bibliotecas (Windows >

Bibliotecas) y arrastra objetos al lienzo.

Apps para dispositivos móviles

Selecciona un objeto de la biblioteca para colocarlo en tu proyecto mediante apps para dispositivos móviles.

Explorador

Examina y consulta las bibliotecas de la página Creative Cloud

Assets . También puedes eliminar una biblioteca.

Uso compartido y colaboración

Escritorio Explorador

Abre el panel de Bibliotecas (Windows > Bibliotecas) en una aplicación de escritorio que admita

Bibliotecas Creative Cloud. Ahora, en el menú desplegable del panel, selecciona Compartir vínculo o Colaborar .

En el panel izquierdo de Creative Cloud Assets , haz clic en Bibliotecas. Luego, en el menú de carpetas de la biblioteca, selecciona Enviar vínculo o Colaborar .

Adobe Stock y las Bibliotecas Creative Cloud

Adobe Stock está perfectamente integrado con las Bibliotecas Creative Cloud. Puedes añadir una vista previa con marca de agua de una imagen de stock a cualquiera de tus bibliotecas directamente desde el sitio web de Adobe Stock. Luego, en las apps de Creative Cloud que sean compatibles con las Bibliotecas

(Photoshop, Illustrator, InDesign, Premiere Pro y After Effects), puedes arrastrar la imagen de stock con marca de agua desde el panel Bibliotecas hasta tu proyecto creativo. Una vez que te hayas convencido de que esa imagen de stock es apropiada para tu proyecto, puedes comprar la licencia directamente desde el panel Bibliotecas.

Las aplicaciones de Creative Cloud compatibles con los activos enlazados a las bibliotecas, como

Photoshop, Illustrator e InDesign, llevan la integración a un nivel superior. Al comprar la licencia de la imagen de stock, todas las instancias vinculadas de esa imagen que estén incluidas en los documentos abiertos se actualizarán automáticamente a la imagen de stock con licencia y de alta resolución que hayas adquirido, y la marca de agua desaparecerá.

Para obtener más información, consulta

Uso de Adobe Stock

¿Cuántos elementos puedo añadir a una biblioteca?

Preguntas frecuentes

Una biblioteca puede contener hasta 1000 activos.

¿Existe algún límite en el número de bibliotecas que puedo crear?

No, no existe límite en el número de bibliotecas que puedes crear.

¿Todas las aplicaciones compatibles pueden utilizar todos los activos almacenados en

Bibliotecas?

Mientras trabajas en una aplicación, puedes ver y utilizar el contenido de Bibliotecas que corresponda a la aplicación que estés utilizando. Por ejemplo, aunque puedes añadir estilos de capa a una biblioteca, estos estilos solo corresponden a Photoshop.

¿Qué tipo de información de color se admite?

Las bibliotecas admiten datos de color para una única muestra o temas de color. Las bibliotecas solo admiten colores de cuatricromía. No se admiten las tintas planas, pero se añaden a las bibliotecas como colores de cuatricromía.

¿Se pueden reutilizar los activos almacenados en Bibliotecas en varias aplicaciones de escritorio de Creative Cloud?

La mayoría de los activos se puede reutilizar en distintas aplicaciones de escritorio. Los estilos de capa de Photoshop son una excepción destacable puesto que en estos momentos solo se pueden reutilizar en

Photoshop.

Si utilizas un activo de estilo de texto de InDesign en Illustrator o Photoshop, las aplicaciones intentarán asociar las propiedades del activo con las propiedades de los estilos de textos disponibles en la aplicación en la que quieras usarlos. Las propiedades que no se encuentren en la aplicación seleccionada se omitirán.

¿Dónde se almacenan los activos?

Tus activos se almacenan localmente en tu dispositivo y se sincronizan con Creative Cloud.

¿Puedo compartir una biblioteca con otras personas?

Sí. Consulta

Colaborar en bibliotecas

Algunas de las aplicaciones móviles integradas con Bibliotecas Creative Cloud, como Brush, Color y

Shape, aún no son compatibles con la colaboración en bibliotecas. Además, las bibliotecas ajenas que se compartan contigo no te aparecerán como disponibles al trabajar con las aplicaciones móviles. Sin embargo, si compartes una biblioteca con otros usuarios, la biblioteca sí aparecerá como disponible tanto en las aplicaciones de Creative Cloud para escritorio como en las móviles.

¿Necesito un abono a Creative Cloud?

Necesitarás un abono gratuito o de pago a Creative Cloud para utilizar Bibliotecas Creative Cloud.

¿Dónde puedo obtener más información sobre Bibliotecas Creative Cloud?

Puedes obtener más información sobre las bibliotecas con estos recursos:

Tutoriales en vídeo

Introducción a Bibliotecas Creative Cloud (resumen)

Bibliotecas Creative Cloud en Illustrator y dispositivos móviles

Bibliotecas Creative Cloud en Photoshop y dispositivos móviles

Tutoriales en vídeo donde se muestra Bibliotecas Creative Cloud en aplicaciones para dispositivos móviles

Shape CC

Brush CC

Color CC

Illustrator Draw

Photoshop Sketch

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Creación de contenido e importación de activos

Creación de contenido para animación

Referencia (12.12.2012)

Creación de un proyecto e importación de contenido (vídeo)

Tutorial: Vídeo (12.12.2012)

Crear recursos e importarlos en el proyecto de Edge Animate

Tutorial: Vídeo

Uso de hojas de sprites de Flash con Animate (tutorial)

Tutorial: Vídeo (12.12.2012)

Uso de Web Fonts

Puede aplicar Edge Web Fonts al texto directamente desde Edge Animate. Cuando selecciona una fuente desde el diálogo Edge Web Fonts, el código correspondiente para trasladar la fuente desde el servidor se incorpora automáticamente al código.

Edge Animate también le permite especificar las fuentes de repuesto cuando hay un problema con la descarga o utilizar Edge Web Fonts en el equipo del usuario.

1. Inserte texto en el lienzo de Edge Animate.

2. En la opción Texto del panel Propiedades, haga clic en el botón “+” situado junto al menú de fuentes.

3. Seleccione la fuente que desea utilizar. Se muestra una vista previa del texto con la fuente aplicada.

Puede filtrar las fuentes del panel según su tipo con los botones situados a la izquierda del panel. Por ejemplo, para ver

únicamente fuentes del tipo “sans serif” (sin serifa), haga clic en el botón correspondiente.

4. Haga clic en Añadir fuente.

Las fuentes seleccionadas y aplicadas se añaden a la biblioteca de fuentes de Edge Animate. Haga doble clic en la fuente de la biblioteca de fuentes para especificar las fuentes de repuesto.

En aquellos casos en los que exista un problema con la descarga de fuentes web del servidor, se utilizarán las fuentes de repuesto para la visualización. Las fuentes se eligen en el orden en que aparecen en la lista.

Las condiciones de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Añadir audio a las animaciones

Adobe Edge Animate ahora es compatible con audio nativo de HTML5 con el elemento <audio>: esto permite añadir sonidos a los proyectos de animación. Mediante HTML básico y JavaScript, puede controlar la reproducción de audio en las composiciones. También puede enlazar elementos de audio a eventos táctiles y del ratón, así como activar reproducciones de audio en la línea de tiempo. Las capacidades de audio de

Adobe Edge Animate se incrustan en el DOM de HTML. Por lo tanto, el sonido se reproduce en cualquier ordenador o dispositivo sin necesidad de utilizar un plug-in.

Puede importar los siguientes tipos de audio a Edge Animate:

.mp3

.ogg/.oga

.wav

.m4a

.aac

Para obtener la mejor compatibilidad entre navegadores, incluya los recursos .mp3 y .ogg de los elementos de audio del proyecto. Para obtener una descripción detallada de los tipos de audio compatibles, visite Formatos admitidos de audio y vídeo en HTML .

Para crear versiones de repuesto del archivo de audio, puede utilizar una aplicación de conversión de audio como Adobe Audition, que se incluye en su abono a Creative Cloud.

Añadir audio a las composiciones

Reproducir y controlar el audio

Ajuste del audio

Precarga de audio

Activación del reproductor de audio predeterminado

Usar audio en dispositivos

Sugerencias y consideraciones de compatibilidad entre navegadores

Añadir audio a las composiciones

Siga uno de estos procedimientos:

Arrastre y suelte los archivos de audio en el proyecto del sistema de archivos. Así, se crea un “grupo de audio” con el nombre del archivo de audio en la Biblioteca. Este grupo contiene el archivo de audio y el de repuesto para disfrutar de compatibilidad entre navegadores.

Nota

: Los archivos de repuesto se agrupan automáticamente en el grupo de audio cuando se sueltan en el proyecto.

Grupo de audio de la biblioteca

Haga clic en Añadir audio en su biblioteca de proyectos y busque el archivo de audio. A continuación, arrastre el grupo de audio al escenario.

Opción Añadir audio de la biblioteca

Después de añadir audio al proyecto, aparece un “elemento de audio” en el panel Elementos. Cuando selecciona el elemento de audio en el panel Elementos, aparecen las opciones para controlar la reproducción del audio.

Audio en el panel Elementos.

Reproducir y controlar el audio

Puede reproducir y controlar el audio mediante cualquiera de las siguientes opciones:

Panel Propiedades

Reproducción automática

: Permite que el archivo de audio se reproduzca automáticamente en la línea de tiempo.

Bucle

: Hace que el archivo de audio se vuelva a reproducir desde el principio cuando termine.

Opciones de control de audio en el panel Propiedades

Línea de tiempo

Reproducir

: Reproduce el archivo de audio desde la posición actual del cabezal de reproducción.

Reproducir desde

: Permite especificar el marcador de tiempo desde el que desea reproducir.

Pausar

: Permite interrumpir la pista de audio. Utilice una función de reproducción para reanudar la reproducción.

Opciones de control de audio en la línea de tiempo

Acciones de audio

: Puede utilizar fragmentos de código en Acciones para controlar la reproducción de audio mediante eventos.

Consulte también

Acciones de audio

1. Haga clic en el {} situado junto al elemento de audio en la línea de tiempo para abrir el Editor de acciones.

2. En la lista de eventos que aparece, haga clic en el activador requerido.

3. En la lista "Elegir una opción", haga clic en Audio y después haga clic en la acción deseada.

Acciones de audio en el Editor de acciones

4. En la sección "Elegir un destino", haga clic en Escenario y, a continuación, haga doble clic en el elemento al que deba aplicarse la acción seleccionada.

5. Si es necesario, modifique el código en la ventana de código.

Importante

: A veces, el audio se reproduce perfectamente de forma local, pero no se puede reproducir tras cargarlo en el servidor web. En estos casos, configure el archivo

.htaccess

de su sitio web para incluir los tipos MIME necesarios para la compatibilidad del audio. Póngase en contacto con el administrador del sitio web para obtener ayuda.

Usar audio en dispositivos

Ajuste del audio

Puede definir transiciones de fotogramas clave para controlar las transiciones de volumen de la línea de tiempo. Utilice las transiciones de volumen para crear efectos de audio únicos, por ejemplo, intensificar, desvanecer y mezclar varias pistas.

Nota:

Las transiciones de volumen del audio no están disponibles en la mayoría de dispositivos móviles. Consulte

para ver las restricciones.

Precarga de audio

Para cargar archivos de audio antes de que se cargue la composición, seleccione "Precargar audio" en la sección Precarga del panel

Propiedades del escenario.

Nota

: La precarga de audio no está disponible en la mayoría de los dispositivos móviles. Consulte Usar audio en dispositivos para ver las restricciones.

Activación del reproductor de audio predeterminado

Puede utilizar el Windows Media Player predeterminado del navegador para mostrar los controles de audio. El reproductor de audio está oculto de forma predeterminada. Para activar la visualización del reproductor, seleccione el elemento de audio y, a continuación, "Activado/a" en el panel

Propiedades.

Activación del reproductor de audio predeterminado

La carátula del reproductor la procesa el navegador y aparece de forma diferente en función del navegador en el que se visualice. Por ejemplo, el reproductor que se ve en Chrome es diferente del que se ve en Firefox. Consulte Acciones de audio para aprender a crear controles personalizados que puede utilizar para crear su propio reproductor.

Cuando se visualiza el reproductor en el escenario, puede añadir movimiento y transformar las propiedades del reproductor, al igual que añadirlas para otros objetos. Dado que <audio> es un tipo especial de elemento HTML, solo hay un subconjunto de propiedades disponible que las aplique:

Opacidad

Recorte

Posición y tamaño

Transformar

Usar audio en dispositivos

iOS

En Safari para iOS (en todos los dispositivos, incluido iPad), donde los usuarios pueden estar en una red móvil y que se les cobre por unidad de datos, las acciones de precarga, reproducción automática y reproducción están desactivadas. No se cargan datos hasta que el usuario reproduzca el audio.

Puede utilizar las acciones de audio para llamar a un elemento de audio activado por un evento de usuario. Para obtener más información acerca de las acciones de vídeo, consulte Acciones de audio .

Los fotogramas clave y el control de volumen configurados mediante la propiedad volumen no se admiten en dispositivos iOS. Los usuarios pueden ajustar el volumen con el control de volumen del propio dispositivo.

Antes de iOS 4.0, iPhone y iPod Touch no reproducían audio online. El audio se presentaba en modo de pantalla completa. Ahora, el audio se reproduce online en dispositivos iOS 4.0 y posteriores.

Android

Android normalmente tiene las mismas limitaciones del elemento de audio que iOS.

Activar el reproductor de vídeo predeterminado

Sugerencias y consideraciones de compatibilidad entre navegadores

Sincronización de audio

El audio se puede utilizar como sonido coreográfico para las composiciones de escenario. Sin embargo, debido a su naturaleza web, las pistas de audio pueden perder la sincronización con los elementos en movimiento del escenario. Puede experimentar latencia de reproducción al coordinar el movimiento con sonido, especialmente en las pistas más largas.

Sprites de audio

El uso de sprites de audio permite crear un único archivo de audio con las partes reproducibles separadas. Esta técnica se utiliza para descargar todo el audio en un único archivo y ahorrar así tiempo de descarga.

Para utilizar sprites de audio, convierta su elemento de audio en un símbolo y utilice marcadores de reproducción para llamar a las secciones del sprite.

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Añadir vídeo a las animaciones

Edge Animate admite vídeos nativos de HTML5, lo que facilita el uso de sus clips de vídeo favoritos en las composiciones. Puede controlar la reproducción de vídeos con acciones de reproducción básicas y JavaScript. Asimismo, puede vincular elementos de vídeo con eventos táctiles y de ratón para crear una experiencia interactiva completa.

El DOM de HTML admite capacidades de reproducción de vídeo. Esto significa que los vídeos se pueden reproducir en cualquier navegador de dispositivo o escritorio moderno sin necesidad de utilizar ningún plug-in.

Puede importar archivos .mp4 y .ogv a Edge Animate.

Para obtener una compatibilidad óptima entre los distintos navegadores, incluya los recursos .mp4 y .ogv de los elementos de vídeo en el proyecto. Para obtener una descripción detallada de los tipos de vídeo admitidos, visite Formatos admitidos de audio y vídeo en HTML .

Añadir vídeo a las composiciones

Reproducir y controlar el vídeo

Precargar vídeo

Usar vídeo en dispositivos

Añadir vídeo a las composiciones

Siga uno de estos procedimientos:

Haga clic en Archivo > Importar o arrastre y suelte los archivos de vídeo directamente en el Escenario desde el sistema de archivos. De este modo, se crea un “grupo de vídeo” con el nombre del archivo de vídeo en la biblioteca. Este grupo de vídeo contiene el archivo de vídeo y los archivos de repuesto que se añadan para disfrutar de la compatibilidad con distintos navegadores.

Nota

: Los archivos de repuesto se agrupan automáticamente en el grupo de vídeo cuando se importan a la composición.

Haga clic en Añadir vídeo en la biblioteca de proyectos y busque el archivo de vídeo. A continuación, arrastre el grupo de vídeos desde la biblioteca hasta el Escenario.

Opción Añadir vídeo de la biblioteca

Tras añadir un vídeo a la composición, aparecerá un “elemento de vídeo” en el panel Elementos. Las opciones para controlar la reproducción del vídeo aparecen cuando se selecciona el elemento de vídeo en el panel Propiedades.

Reproducir y controlar el vídeo

Puede reproducir y controlar el vídeo mediante cualquiera de las siguientes opciones:

Panel Propiedades

Reproducción automática

: Permite que el archivo de vídeo se reproduzca automáticamente en la línea de tiempo y en los navegadores de escritorio.

Bucle

: Hace que el archivo de vídeo se vuelva a reproducir desde el principio cuando termine.

Controles de vídeo en el panel Propiedades

Línea de tiempo

Reproducir

: Reproduce el archivo de vídeo desde la posición actual del cabezal de reproducción.

Reproducir desde

: Permite especificar el marcador de tiempo desde el que desea reproducir el vídeo.

Pausar

: Permite interrumpir el vídeo. Utilice una función de reproducción para reanudar la reproducción.

Opciones de reproducción de vídeo en la línea de tiempo

Acciones de vídeo

: Puede utilizar fragmentos de código en el Editor de acciones para controlar la reproducción de vídeo mediante eventos.

Acciones de vídeo

1. Abra el Editor de acciones haciendo clic en el {} que se encuentra junto a Escenario en la línea de tiempo.

2. Haga clic en un activador (evento).

3. En la lista "Elegir una opción", haga clic en Vídeo y después haga clic en la acción deseada.

También puede buscar una acción mediante el cuadro de búsqueda de la sección "Elegir una opción".

Acciones de vídeo en el Editor de acciones

4. En la sección "Elegir un destino", haga clic en Escenario y, a continuación, haga doble clic en el elemento o el símbolo a los que desea asignar la acción seleccionada.

También puede buscar el elemento o el símbolo mediante el cuadro de búsqueda de la sección "Elegir un destino".

Precargar vídeo

Para cargar archivos de vídeo antes de que se cargue la composición, seleccione "Precargar vídeo" en la sección Precarga del panel

Propiedades del escenario.

Nota

: La precarga de vídeo no está disponible en la mayoría de los dispositivos móviles. Consulte Usar vídeo en dispositivos para ver las restricciones.

Precargar vídeo

Activar el reproductor de vídeo predeterminado

Puede utilizar el reproductor multimedia predeterminado del navegador para mostrar los controles de vídeo. El reproductor de vídeo está oculto de forma predeterminada. Para activar el reproductor predeterminado, seleccione el elemento de vídeo y elija "Controles" en la sección Vídeo del panel Propiedades.

Activación del reproductor de vídeo predeterminado en el panel Propiedades

Cuando se visualiza el reproductor en el escenario, puede añadir movimiento y transformar las propiedades del reproductor, al igual que las añade a otros objetos.

Importar hojas de Sprite guardadas solo como archivos de imagen

Usar vídeo en dispositivos

iOS

Puede utilizar las acciones de vídeo para llamar a un elemento de vídeo activado por un evento de usuario. Para obtener más información acerca de las acciones de vídeo, consulte Acciones de vídeo .

Android

Android normalmente tiene las mismas limitaciones para vídeos que iOS.

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Importación de hojas de Sprite

Como diseñador es muy probable que utilice otras muchas herramientas o programas como Adobe Photoshop o Adobe Flash Professional para crear imágenes complejas y animaciones de personajes. Edge Animate permite reutilizar estas creaciones al admitir la importación de hojas de

Sprite generadas en estas herramientas.

Una hoja de Sprite es un archivo de imagen que contiene varios gráficos de menor tamaño dispuestos como una cuadrícula en mosaico.

Mediante la compilación de varios gráficos en un solo archivo, Edge Animate y otras aplicaciones pueden utilizar los gráficos teniendo que cargar solamente un archivo. Esta eficacia de carga puede resultar muy útil en situaciones como la creación de animaciones, donde el rendimiento es una clave importante.

La mayoría de las herramientas permiten exportar las hojas de Sprite solo como archivos de imagen (PNG/JPEG). Adobe Flash Professional CC

2014 y posteriores pueden generar hojas de Sprite específicas de Edge Animate. Puede importar ambos tipos de hojas de Sprite, PNG/JPEG y las que se generan a partir de Flash Professional, en Edge Animate.

Nota:

Si importa y utiliza hojas de Sprite de tamaño superior a 2048 x 2048 píxeles con composiciones de Edge Animate en dispositivos, podría observar problemas de rendimiento.

Importar hojas de Sprite generadas en Adobe Flash Professional

Importar hojas de Sprite guardadas solo como archivos de imagen

1. Antes de importar las hojas de Sprite en Edge Animate, asegúrese de lo siguiente:

Las dimensiones de las imágenes de la hoja de Sprite son iguales.

El relleno entre imágenes es uniforme.

2. Abra Edge Animate. En el panel Símbolos, haga clic con el botón derecho en + y, a continuación, haga clic en Importar hojas de Sprite.

También puede hacer clic en Archivo > Importar hojas de Sprite.

Importar hojas de Sprite desde el panel Símbolos

3. Busque la hoja de Sprite requerida y seleccione el archivo PNG o JPEG. Haga clic en OK.

Aparecerá el cuadro de diálogo “Definir azulejos de Sprite”.

Defina los mosaicos de Sprite: importación de hojas de Sprite en PNG o JPEG

Para previsualizar la animación, haga clic en Vista previa de la animación.

Especifique la duración y el FPS. En el caso de archivos PNG y JPEG, el FPS está configurado en 24 de manera predeterminada. Puede modificar el FPS según sea necesario.

Especifique el número de filas y columnas y las opciones de recorte.

4. Haga clic en Importar.

El archivo PNG o JPEG correspondiente a la hoja de Sprite se guarda en el panel Imágenes. Las imágenes que lo forman se guardan como símbolos independientes (denominados

spritesheet_name_n)

en el panel Símbolos.

5. Arrastre los símbolos necesarios del panel Símbolos al Escenario.

Importar hojas de Sprite generadas en Adobe Flash Professional

1. Asegúrese de que ha generado la hoja de Sprite eligiendo el formato de Edge Animate en Adobe Flash Professional CC

(2014 o posterior).

Para obtener información sobre la creación de hojas de Sprite en Adobe Flash Professional CC, consulte la ayuda de Adobe

Flash Professional CC .

2. En el panel Símbolos, haga clic con el botón derecho en + y, a continuación, haga clic en Importar hojas de Sprite.

También puede hacer clic en Archivo > Importar hoja de Sprite.

Crear animaciones con la herramienta Pin

Importación de hojas de Sprite desde el panel Símbolos

3. Busque la hoja de Sprite requerida y seleccione el archivo PNG o JPEG. Haga clic en OK.

Aparecerá el cuadro de diálogo “Definir azulejos de Sprite”.

Defina los mosaicos de Sprite: importación de hojas de Sprite de Flash

Para cargar el archivo EAS correspondiente al PNG o JPEG seleccionado, elija "Cargar un archivo EAS".

Para previsualizar la animación, haga clic en Vista previa de la animación.

Especifique la duración y el FPS. Para archivos de EAS, el FPS se hereda de origen. Puede modificar el FPS según sea necesario.

4. Haga clic en Importar.

El archivo PNG o JPEG correspondiente a la hoja de Sprite se guarda en el panel Imágenes. Las imágenes que lo forman se

guardan como símbolos independientes (denominados

spritesheet_name_n)

en el panel Símbolos.

5. Arrastre los símbolos necesarios del panel Símbolos al Escenario.

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Elementos de hipervínculo a artículos de Adobe DPS

Las revistas electrónicas publicadas con Adobe Digital Publishing Suite (DPS) pueden hacerse más atractivas e interesantes incluyendo composiciones de Edge Animate en ellas. Edge Animate permite publicar composiciones como archivos OAM que pueden incluirse fácilmente en

Adobe InDesign (parte de DPS).

Además, las composiciones de Edge Animate se pueden utilizar como ayudas de navegación dentro de una revista electrónica. Se pueden crear hipervínculos de los elementos de una composición a artículos concretos de la revista en la que se incrustará la animación. Los lectores pueden hacer clic en estos elementos hipervinculados para ir rápidamente al artículo que les interesa.

Puede establecer hipervínculos entre los elementos de una composición y los artículos de Adobe DPS requeridos directamente en Edge Animate.

A continuación, puede probar el vínculo publicando la animación como archivos OAM e incrustándolos dentro de los artículos.

Para crear hipervínculos de elementos a los artículos o páginas en un artículo de Adobe DPS:

1. Haga clic en el {} que se encuentra junto a Escenario en la línea de tiempo.

2. Seleccione un activador de la lista que aparece en el Editor de acciones. Se recomienda que elija el evento compositionready para configurar la navegación.

Editor de acciones con el evento compositionready

3. En la sección "Elegir una acción", haga clic en Adobe DPS y, a continuación, haga clic en Navegar por el artículo. Especifique el nombre del artículo y el número de la página a la que desea vincularlo. También puede editar el código para especificar estos detalles como se explica en el paso 5.

Opciones de acción de Adobe DPS en el Editor de acciones

4. En la sección "Elegir un destino", haga clic en Escenario y, a continuación, haga doble clic en el nombre del elemento que actúe como destino de la acción descrita anteriormente.

5. (Opcional) Edite el código para especificar una de las siguientes acciones:

Nombre del artículo en la publicación requerida en Adobe InDesign y número de página

Ejemplo:

1 sym.$("Rectangle").append('<a style="display:block;width:100%;height:100%;" href="navto://my_article_Name#my_page_number"/>');

Vínculo relativo a los artículos, como primero, último, siguiente, anterior o actual

Ejemplo:

Para ir a la última página del último artículo de la publicación, utilice navto://relative/last#last

1 sym.$("Rectangle").append('<a style="display:block;width:100%;height:100%;" href="navto://relative/last#last');

Para obtener más información sobre el uso de los hipervínculos navto relativos, consulte la documentación de Adobe DPS .

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Creación de animaciones con la línea de tiempo

Línea de tiempo de Edge Animate

Tutorial: Vídeo (13.12.2012)

Creación de animaciones en Edge Animate

Tutorial: Vídeo (13.12.2012)

Animación de texto

Tutorial: Vídeo (13.12.2012)

Aprovechamiento de las líneas de tiempo del símbolo independientes

Tutorial: Texto (12.12.2012)

Crear un logotipo animado

Tutorial: Texto (08.01.2013)

Utilización de la herramienta Pin, los fotogramas y las transiciones en las animaciones

Creación de animaciones con fotogramas clave

Editar fotogramas clave individuales

Copiar transiciones

Puede crear animaciones en Edge Animate utilizando métodos de animación tradicionales basados en fotogramas clave. Edge Animate también proporciona un método alternativo basado en la herramienta Pin para crear fotogramas clave.

Crear animaciones con la herramienta Pin

La herramienta Pin fija los valores de las propiedades de los elementos en un punto del tiempo en la línea de tiempo. Cuando se realiza una edición, la herramienta Pin fija el valor actual mientras se cambian los valores de las propiedades en el cabezal de reproducción. Edge Animate genera los fotogramas clave y las transiciones al cabezal de reproducción o desde este.

Para animar con la herramienta Pin:

1. Defina las propiedades del elemento que desee fijar a un punto del tiempo en la línea de tiempo.

2. Haga clic en el botón Alternar pin en el panel Línea de tiempo.

Alternar pin

Para activar el pin, también puede hacer doble clic en el cabezal de reproducción o presionar la P del teclado.

3. Arrastre el pin de la línea de tiempo al punto de la línea de tiempo en el que quiera fijar las propiedades del elemento.

4. Con las propiedades iniciales fijadas, cambie los valores de las propiedades del elemento.

Debido a que el patrón tipo "chevron" apunta al cabezal de reproducción, los cambios se establecen en la ubicación del cabezal de reproducción.

Adobe Edge Animate añade automáticamente fotogramas clave y transiciones entre el cabezal de reproducción y las posiciones del pin. No tiene que añadir manualmente fotogramas clave o volver a colocar el cabezal de reproducción en la línea de tiempo.

5. Para obtener una vista previa de la animación, haga clic en el botón Reproducir en el panel de la línea de tiempo o presione la barra espaciadora del teclado.

Para ver una lección sobre la animación con la herramienta Pin:

1. Seleccione Ventana > Lecciones en Edge Animate.

2. Haga clic en Animar II: El pin.

Los fotogramas clave especifican el valor de una propiedad en un punto del tiempo. Cuando la animación se lleva a cabo con fotogramas clave, se añade un fotograma clave a dos o más ubicaciones en la línea de tiempo y se definen las propiedades de los distintos elementos en cada lugar. Edge Animate utiliza los valores de la propiedad para animar el contenido entre los fotogramas clave.

Para animar con fotogramas clave:

1. Seleccione el elemento que desee animar en el escenario.

2. Mueva el cabezal de reproducción a la ubicación en la línea de tiempo en la que desea que comience la animación.

3. En el panel de propiedades del elemento, haga clic en el botón Añadir fotograma clave (botón en forma de rombo) que hay junto a la propiedad que desea cambiar con el tiempo.

Adición de fotogramas clave

4. Mueva el cabezal de reproducción a otra ubicación en la línea de tiempo y cambie el valor de la propiedad.

Edge añade automáticamente un fotograma clave final y crea la transición.

5. Para obtener una vista previa de la animación, haga clic en el botón Reproducir en el panel de la línea de tiempo o presione la barra espaciadora del teclado.

Para ver una lección sobre la animación con fotogramas clave:

1. Seleccione Ventana > Lecciones en Edge Animate.

2. Haga clic en Animar I: Fotogramas clave.

Editar fotogramas clave individuales

1. Mueva el cabezal de reproducción a un fotograma clave (icono en forma de rombo) en la línea de tiempo.

2. Cambie el valor de la propiedad editable en el lado izquierdo del panel Línea de tiempo.

Copiar transiciones

Puede copiar una transición y pegarla en la línea de tiempo del mismo elemento o de otro elemento.

1. Haga clic en una transición en la línea de tiempo para seleccionarla. Cuando se selecciona esta opción, aparece un borde de color naranja alrededor de la barra de transición en la línea de tiempo.

2. Presione Ctrl+C (Windows) o Cmd+C (Macintosh) para copiar la transición en el Portapapeles.

También puede cortar la transición desde el elemento con Ctrl+X (Windows) o Cmd+X (Macintosh).

3. Si desea copiar la transición a otro elemento, seleccione el elemento en el escenario.

4. Mueva el cabezal de reproducción a la ubicación en la que desea que comience la transición copiada.

5. Presione Ctrl+V (Windows) o Cmd+V (Macintosh) para pegar la transición en la línea de tiempo.

Changing Text-Specific Properties

Más información

Creación e importación de activos

Creación de animación

Creación de un diseño flexible

Crear un logotipo animado

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Adding text to your project (Tutorial)

Excerpted from “Adobe Edge Animate: The Missing Manual”

Learn how to add and animate text in your Adobe Edge project.... Read More http://shop.oreilly.com/product/0636920027553...

by Chris Grover

http://www.oreillynet.com/...

What's covered

Using Web Fonts

Adding Web Fonts to Your Composition

Changing Other Text Properties

Clipping Text Around the Edges

Making That Headline Drop In

Dealing with the Template

Adding Some Bounce

Using Animate’s Prebuilt Bounce

Building Your First Animation

Setting the Stage

Creating Art in Animate

Rectangles: Building a Basic Box

Aligning, Distributing, and Arranging Elements

Rulers and Manual Guides

Arranging Elements: Z-Order

A Rectangular Animation

Animating by Adding Property Keyframes

Rounded Rectangles: More than Meets the Eye

A Circle Is a Very Rounded Rectangle

Adding Drop Shadows to Graphics

Importing Art

Choosing between GIF, JPG, PNG and SVG

Introduction

There are three ways to add text to your Animate project:

Use the text tool.

In the Tools palette, click the big T (or use the shortcut key T), and then in your document, click and drag to create a text box. Initially, you don’t have to worry too much about positioning or sizing the text box. You can manage those details later. Just go ahead and start typing. Try the phrase “ON the EDGE.” The text you enter appears on the stage, as shown in Figure 1. If you want to create multiple paragraphs, just press Enter

(Return) as you would in your word processor. When you’re done, you can close the text window by pressing

Esc or clicking the X button in the upper-right corner.

Copy and paste.

If you’re working with large blocks of text, you may have already worked up a draft in a word processor or some other source. In that case, you can copy the text in your word processor, and then in Animate create a originally, but the text will be there. This process maintains some of the major formatting, such as paragraph breaks.

Open HTML with text.

Perhaps you have a web page already created in an HTML editor or some other web-building tool. You’d like to add some animation excitement to the static page. You can open that page in Animate using File Open and then use Animate to make the elements move. You’re limited in what you can do with text imported in this way. You can’t edit it or change its formatting. In essence, it’s just another graphic element you can use in an animation. One significant advantage to this method is that links within the text are maintained.

Changing Text-Specific Properties

Once you have text in your Animate project, there are several text-specific properties that you can use to change its appearance, as shown in Figure 2. These properties appear in the Text subpanel. Initially, some of the less-used options may be hidden. Click the button in the lower-left corner of the subpanel to show and hide additional properties. The names for each of these tools follow CSS (cascading style sheet) naming conventions, so they are lowercase with hyphens between words.

font-family.

You can choose from several different typefaces. You might not find all the same fonts that you have a way of providing the font with your project. For more details on fonts and typefaces, see the next section.

color.

Click the swatch, and the standard color picker appears where you can set the color for your text.

font-size.

Dial in font size by number. Next to font-size you see a button called Text Property Unit. Click this to change the method for specifying font-size.

font-unit.

Animate uses three different units for specifying font size: pixels (px) ems (em) and percentage

(%). Pixels are equivalent to a single dot on a monitor. An em is roughly the size of the letter M. Most web browsers give users the ability to adjust the size of text, so an em is a unit that changes according to the devices as well as desktop computers.

font-style.

Slants the text so it looks like italics.

font-weight

. Gives you several options such as Thin, Extra Light, Normal, and Extra Bold. The order of options and their accompanying numbers give you hints for comparing the different weights.

font-decoration.

Use this button to underline text.

text-align.

Just like your word processor, Animate lets you align text right, center, or left. Alignment affects all the text in the text box. So if you want to create one paragraph aligned right and one paragraph centered, they must be in separate text boxes.

text-indent.

Indents the first line within a text box. You can change the value in pixels. It doesn't accept

negative numbers to create hanging indents.

line-height.

Use to set the space between lines of text.

letter-spacing.

As the name implies, you can adjust the space between letters. Often used to create distinctive headlines or company logos, this effect should be used sparingly for normal body text.

word-spacing.

Varies the distance between words. Use carefully or you may end up with awkward, hard-toread text.

Using Web Fonts

There’s another way to increase the number of typefaces you use in your Animate animations. For years, web designers have been using web fonts. For programs, including web browsers, to display a specific font, they need to have access to the font description. Usually, that description resides on the same computer as the program— sometimes called the client. Web fonts work a little differently. For example, with Google’s web fonts

(www.google.com/webfonts), the definitions for the fonts are stored on Google’s servers. As a web designer, you can use these fonts by adding code to your pages that tell browsers where to find the font descriptions.

First, find the web font you want to use. Google web fonts are free and surprisingly easy to use, so they’re a great candidate for your first attempt. Here are the steps to selecting a Google web font and grabbing the code you need to identify it in your project: hundreds, so the widgets on the left help you filter the fonts. The buttons at the bottom of the page direct you to the three steps for a successful web font hunt: Choose, Review, and Use.

2. On the left, below the word Filters, click the drop-down menu. Choose from Serif, Sans-Serif, Display, and

Hand Writing. The menu uses checkboxes, so you can choose a combination of characteristics. For example, you could use Sans-Serif and Display.

3. If necessary, use the Thickness, Slant, and Width sliders to narrow your font search. With so many choices, it helps to thin the crowd of fonts displayed on the screen.

4. Use the tabs at the top of the font window to change the display to Word,

Sentence, or Paragraph.

If you’re looking for a font for headings, the Word or Sentence tab is the best choice. If you’re choosing a font for body text, make sure you check its appearance with the Paragraph option.

5. Click the blue “Add to Collection” button. You can have more than one font in a collection, but for pagerendering speed and good design, you’ll want to limit the number of fonts you use.

6. Click Review. This step may not always be necessary, but as the name implies, on this page you can take a closer look at your font in use as a headline or paragraph.

7. Click Use. A new page loads with instructions for using the fonts on your web site. Part way down the page is a blue box with the heading “Add this code to your website”; see Figure 3.

you’re ready and loaded for the second part of the process: adding the location for the font description to your Animate project.

Adding Web Fonts to Your Composition

Once you’ve chosen a Google or other brand web font and copied the code that identifies it, adding to your project easy in Animate. Here are the steps:

1. In the Library panel, on the bar that says Fonts, click the + button, as shown in Figure 4.

The Add Web Fonts dialog box appears.

2. Paste the code that identifies the location of your font in the lower “embed code” text box.

This code is provided by the same organization that hosts the web font. If you followed the previous steps, the code is stored on your clipboard.

3. Type the name of web font in the upper Font Fallback List along with the fonts that should be used if the web font isn’t available. If the client computer isn’t connected to the Internet, then the web font won’t be available.

4. Click the Add Font button. The font now appears in the Font Name drop-down menu when you’re working with text.

Changing Other Text Properties

Like any other element in Animate, you probably don’t expect your text to be static all the time. Fortunately for you, the designer, you don’t have to learn new tools to make your text dance around the screen. The X/Y Position properties determine where your text appears, and the W/H Size properties determine the dimensions of the text box. Keep in mind that the Size properties change the size of the text box, but they don’t change the size of the letters. To change the size of the letters, you can use the font-size properties or the Scale properties. Sometimes you'll want the size of your text to change depending on the size of the browser window. If that's the case, use %

(percentage) for the Text Properties Unit. As with drawings and photos, you can create property keyframes in the timeline to make text properties change over time.

Remember those fold, spindle, and mutilate tools? You can use the Transform properties on text, too. Go ahead and rotate or skew blocks of text for special effects as you add or remove them from the web page. Use the Scale properties to make the text box and the text inside bigger or smaller. Scale works on text the same way it works on a JPEG image: Dial in a percentage, and everything grows or shrinks. Keep in mind that text gets a bit blurry when it is enlarged using the Scale property.

Clipping Text Around the Edges

As with other graphic elements on the stage, you can use Clip properties to hide the edges of a text box. It’s a lot like cropping the edges of photograph. Suppose you want animate a text box so that at first only a pinpoint in the middle is visible, then it grows to display an entire block of text. Select your text and then look near the bottom of the Properties panel. Click the triangle button to expand the Clip subpanel. In the upper-right corner of the subpanel, click the button to turn on clipping. Edge Animate provides four controls that represent the top, bottom, left, and right edges of the element (Figure 7). Type or scrub in values in pixels (px).

As you make changes, you see the effect they have on your text box. Want to remove clip properties after you’ve applied them? Just right-click (Control-click) the clipped element and choose Remove Clip from the shortcut menu.

Making That Headline Drop In

In most cases, the purpose of text is to communicate a message, so it’s counterproductive to subject your audience to constantly moving and changing text. That doesn’t mean you can’t have a little bit of fun. For instance, you may want to have the heading on your web page drop down or bounce into place when the page first loads.

In this project, you create a banner at the top of the stage. When the web page loads, three words—“ON the

EDGE”—drop into place. In this case, you’re animating the phrase “ON the EDGE.” You break the words into three separate text boxes, so that you can move each word independently. In other cases, you may want to animate all the individual letters in a word or phrase. The toughest part of the trick is to get the letter or words to line up properly once they’re in place. You want letter spacing to look natural, and you want the text to sit evenly on a horizontal line. Often, when you’re animating words or letters like this, it helps to create a positioning template, and that’s exactly what you do in this project. The positioning template (Figure 8) is visible at design time to help you align those moving words and letters. When you’re done building the animation, you can remove the template.

Here are the steps to create a drop-in heading:

1. Create and save a new 550 x 400 document with a white background color. As usual, create a new folder to hold the HTML and JavaScript files for your project.

2. With the Rectangle tool (M), create a rectangle 550px x 100px and place it at X=0, Y=0. Set the background color to R=200, G=210, B=250 and A=100%. Set border color to none. Give the rectangle the ID BannerBG.

The quickest way to make a rectangle to spec is to drag out a quick box that’s any old shape and then type in the values in Properties. Make sure you click the link next to the W/H Size properties so you can enter nonproportional values.

3. In the Elements panel, click the Lock Element button next to BannerBG. A padlock appears next to BannerBG.

Now, you can’t accidentally select or move the blue box on the stage.

5. In Properties, give the text box the name OnEdgeTemplate. As with your graphics, you want to be able to identify different blocks of text in the timeline and the Elements panel. At this point, the properties for the text look like Figure 9.

location to X=0, Y=0. When you’re done, the top of the Animate stage should look like Figure 10. If for some reason the text is behind the blue box, you can change the Z-order in the Elements panel. Just drag

OnEdgeTemplate so that it’s above BannerBG.

7. Select OnEdgeTemplate and then press Ctrl+D (c-D). This duplicates the text, though you might not notice

right away because it is placed right on top of the previous text. However, you can see OnEdgeTemplateCopy in the Elements panel.

8. Drag OnEdgeTemplateCopy down to the middle of the stage. In the next steps, you’ll use this to create individual text boxes with separate words: “ON,” “the,” and “EDGE.” Before that, it’s a good idea to finish setting up the positioning template.

9. Select the original OnEdgeTemplate and then set the Text Color to red (#ff0000). As advertised, this text is being used for a positioning template. Later, the bright red color will make it easier to see if the text is correctly positioned.

10. In Elements, click the Lock Element button next to OnEdgeTemplate. This locks your positioning template in place so you can’t accidentally select or move it.

11. Select OnEdgeTemplateCopy and press Ctrl+D (c-D) twice. This creates two more copies of the entire banner text.

12. Double-click the first OnEdgeTemplateCopy. In the text edit box, delete everything except the word “ON.”

Then in Properties, rename the text ON. It’s best to eliminate extra spaces when you’re animating single words or letters and you should reduce the width the text box to fit the edited text.

13. Repeat step 12 to make text elements for the and EDGE. You now have three properly labeled words that you can identify and animate independently. You may want to resize the text boxes’ width to match the words, as shown in Figure 11.

14. Drag the word “ON” up so that it is above and slightly to the left of the stage. Drag the word “EDGE” so that it is above and slightly to the right of the stage. Drag the word the straight up so that it is above the stage.

These are the starting positions for each of the words. They should be completely offstage.

15. Select “ON” and change the Rotate property to -30. Select “EDGE” and set the rotation to 30 degrees. These two words will appear to drop in at an angle from their respective sides.

17. Drag the playhead to the half-second mark: 0:00.500. The entire animation will take a second, which is plenty of time for a simple animation like this. You don’t want to bore your audience. Each word will take a half-second to complete its move. Each word will start at a different moment.

18. Select “ON” and set the Rotate property back to 0, and move “ON” over the same word in the positioning template. If you want to review the motion, drag the playhead back and forth. If necessary, you can readjust the start or end point. Just move the playhead into position and tweak the word’s position.

19. Move the playhead to 0:00.250. Then select the word “the” and click the Location Add Keyframe button. The plan here is to start the word “the” moving before “ON” has finished its movement. However, you want the word “the” to remain motionless for the first quarter-second, so you must create two location keyframes with identical values at 0:00.000 and 0:00.250.

20. Drag the playhead to 0:00.750, and then move “the” over the same word in the positioning template. Use the Timeline Zoom slider to get a better view of the timeline. The units of measure at the top of the timeline change depending on the zoom level. (Figure 11)

No rotation is used for “the”, so this word will appear to drop straight down.

21. Move the playhead to 0:00.500. Select “EDGE” and click the Location and Rotate Add Keyframe buttons.

This keeps “EDGE” in place for the first half-second of the animation.

22. Move the playhead to 0:01, and then drag “EDGE” into place over the positioning template.

At the 1-second mark on the timeline, the words have finished their journey, and the first version of the animation is complete, except for removing the positioning template.

and then the space bar to get a look. If necessary, you can continue to tweak the starting and ending points for the animated words. For example, you might prefer it if “ON” and “EDGE” drop in first and the word “the” is added last.

Dealing with the Template

The red positioning template isn’t meant to be a permanent part of the animation. So if you’re happy with everything, you can remove it. First turn off the Lock Element button to make the Template selectable. Then you can select the template in either the Elements panel or on the stage and press Delete. As an alternative, you could turn the template into a drop shadow (Figure 13) or glow effect for the text.

For a drop shadow, set the text to a mid-gray tone and then adjust the opacity to taste. Something around

30 percent usually works well. You might want to keep the drop shadow hidden until the three words have finished moving. If that’s the case, set the opacity to zero until that point in the animation, and then bring it up.

For a glow effect, choose a yellow or orange color. Use the Scale control to make the text slightly larger than the text that drops in place. Again, you’ll probably want to use opacity to control the timing and appearance of the glow text. You might want the glow effect to fade in and then fade out, adding momentary emphasis on the heading.

Adding Some Bounce

If the previous example, where text drops into place, is too sedate for your web page, you might want to consider adding a little bounce to the action. Bounce makes it seem like your web page adheres to the laws of physics. Like a basketball, your text can start with a big bounce and then one or two smaller bounces until it settles into place.

properties that are part of the transition in the timeline.

Creating a Bounce Manually

word that you’ll animate. “BounceTemplate” (red text) is the positioning template. As in the previous example, this marks the final position for the animated text. The ground element is a gray rectangle that’s positioned at the bottom of the stage. You can think of this as the ground on which the text will bounce.

A bouncing motion is created in the timeline by adding keyframes with alternating up and down locations (Figure

14). With the playhead still at 0:00, select BOUNCE and click the “Add Keyframe for Y” button in Properties. This sets the starting point. For the next leg of the journey, drag the playhead to 1:00 and move BOUNCE so that it covers BounceTemplate.

Click “Add Keyframe for Y” to add new location keyframes. Drag the playhead to 1.75 and then move BOUNCE up near the middle of the stage. Move the playhead to 2.25 and then move BOUNCE back over the template. You can create a few more bounces using a shorter period for the motion—half a second, then a quarter second. With each bounce up, shorten the distance.

When you get tired of a straight up-and-down bounce, you can always add a little rotation to the movement, making it look like the word is bouncing back and forth off of the lower corners. If you reduce the vertical scale property when the text hits the ground, you can create a cartoon-like smooshing action, as if the text were compressing on impact with the ground.

Using Animate’s Prebuilt Bounce

First, a little background about transitions and the concept of easing. When you animate an element on the stage, by changing properties and creating keyframe properties in the timeline, you create transitions. Those transitions are shown visually as bars in the timeline. Like the elements on the stage, transitions have properties, too. One of the properties is called Easing. In the real world, when objects move, they accelerate and decelerate. You never realistic movement by automatically controlling an element’s transition. It just so happens that one of the easing options helps you to create a bouncing motion.

Here are some steps to explore transition properties:

1. Drag the playhead to 0:01, and then drag BOUNCE down so that it covers BounceTemplate. Animate creates a transition in the timeline.

2. In the timeline, click the transition lane next to BOUNCE. The transition in the timeline is highlighted.

3. At the top of the timeline, click the Easing button. The easing panel appears above the timeline. Initially, the tooltip for this button says Easing: Linear, because that is the easing method that’s applied. With linear easing, the transition is applied at a steady rate from beginning to end.

4. On left side of the Easing panel, click Ease Out. Then, on the right, click Bounce, as shown in Figure 15.

When you click Ease out, the panel displays a number of Ease Out methods. The graph gives you a visual representation of the easing method.

5. Click outside of the Easing panel. The panel closes and your easing method is applied to the selected transition.

6. Press Home and then the space bar.

When the animation plays, you’ll notice some nice bouncy action at the end of the motion. If you’d applied

EaseInBounce, the bouncing motion would have occurred at the beginning of the transition.

The easing properties for transitions can be a real timesaver. Animate includes a number of different transitions, but sometimes the names are a little cryptic. The best way to learn the different easing characteristics is to create a practice animation and apply different eases to identical elements and transitions.

Building Your First Animation

1. Start Animate and go to File New to create a new document. When you create a new document, you start off with an empty stage. You see “Stage” as the only element listed in the Elements and Properties windows.

As you see in the Properties panel, the stage has dimension, color, and other properties. You’ll learn more about each of these properties later.

2. Create a folder for your project and then choose File Save As to save your file with a name like Hello_World or First_Try.

You can create a folder outside of Animate using Windows Explorer or Finder, or you can create a new folder as part of a File Save As command. It’s a good practice to save your Animate project immediately with a helpful name. That way you won’t end up with a bunch of “untitled” projects that you don’t remember. Also, it makes it easy to save your work early and often with a quick Ctrl+S or Command-S. It’s best to save each

Animate project in its own folder because Animate creates several files and an edge_includes folder when you first save a project.

color (Figure 16). If you prefer a strictly visual approach, click the spectrum bar at the left for a basic hue and then click inside the square to fine-tune your selection. In some cases, you may have a specific color specification in RGB (red-green-blue) format or as a hexadecimal number.

4. When the color picker appears, choose a dark blue color to represent deep space. If in doubt, try R=30

G=45 B=90 A=100 for this project. Animate uses Adobe’s standard method for choosing numbers. When you see a highlighted number, that means you can either click and then type in a number, or you can click and drag to “scrub” in a number. Drag right to increase the number, left to decrease.

5. Still in the Stage properties panel, change the Overflow to hidden. The Overflow property controls the visibility of items when they are viewed in a web browser. On a web page, the stage may represent just a portion of the entire web page. You can control the visibility of elements outside of the stage's rectangle.

Change this property to hidden when you don't want to see elements that are offstage.

6. Choose File Import. Using the Import window that appears, find and select an image, like a planet earth, for example. Click Open to import the image into your project.

After you import a file to your Animate project, it is listed in the Elements window and is displayed on the stage. It’s automatically selected, so you see the properties for the newly imported element in the Properties window. The “planet_earth” has visibility properties at the top of the panel. Right below are Position and Size properties. Below those, you see the Transform properties that let you rotate, skew, and scale elements.

Below that, the source file is listed—a handy point to keep in mind when you’re trying to remember, “What the heck was the name of that file anyway?”

7. In the Properties panel, click the ID box at the very top and change planet_earth to World.

As Animate imports graphics, it names them using the file name. In some cases, that may be fine, but often you’ll want to rename the element inside of Animate. Keep in mind this doesn’t change the filename of your graphic. The ID World is used when you’re working in Animate. IDs serve an important function in HTML code, as you’ll learn later in this book. Notice that in the Elements panel your World appears with its new name. Because it’s on the stage, World also appears in the timeline.

8. In the timeline, make sure the playhead is at 0:00. If you haven’t made any timeline changes since you created this project, the playhead is at 0:00, marking the first moment or frame of the animation, as shown

You’ll learn more about the two-part playhead in the following steps.

9. Drag the World past the bottom of the stage. As mentioned in step 5, you can control whether offstage items are displayed on the web page. With Overflow set to hidden, when you're in the Animate workspace, offstage elements appear a little darker than usual. When the final project is viewed in a browser, these elements will be hidden.

10. In the timeline, make sure that the Auto-Keyframe Mode button is pressed. When the Auto-Keyframe Mode

button (Figure 17) is pressed, keyframes are automatically created in the timeline as you make changes to element properties. Keyframe markers look like diamonds.

11. In the timeline, make sure that the Auto-Transition Mode button is pressed. When this button is pressed,

Animate creates smooth transitions instead of abrupt changes. In this case, the World graphic will smoothly move from one position to another.

12. Drag playhead to 0:01 on the timeline. In the timeline, 0:01 marks 1 second into the animation. A red line extends downward from the playhead, providing a marker for all the element and property layers.

13. With the World still selected, in the Properties panel, go to Position and Size and click the diamond shaped buttons next to X and Y. Two diamond-shaped keyframes appear in the timeline marking the position for the clicking the diamond next to Location in the Properties panel, you manually recorded the World’s location on the stage. As a result, the World stays in the same X/Y position for the first second of the animation.

14. Click the Toggle Pin button, then drag the bottom, gold part of the playhead to 0:03. To animate an element, you change its properties over a specific period of time. The playhead and the pin let you mark two points in time, as shown in Figure 18.

15. Drag the World graphic so that Earth is visible on the stage. You can center the image on the stage, or you can choose some other eyepleasing layout.

16. Click the Toggle Pin button, then press the Home key and then press the space bar. When you press Home, the playhead returns to 0:00. Pressing the space bar plays your animation so you can preview the action on the stage.

17. Move the playhead back to 0:00, and then in the toolbar, click the letter T. The text tool is selected, and the cursor changes to a cross.

18. Click on the stage and type Hello World. When you're done, close the text window by pressing ESC or clicking the X button in the upper-right corner. The words “Hello World” appear on the stage, but they’re probably not positioned or formatted as you want.

19. In the Properties window, set the ID for the text box to HelloWorld. Naming your text makes it easier to identify in the timeline and the Elements panel. Animate doesn’t permit space in names, so you need to use

HelloWorld or Hello_World.

Black or another bold font. Adjust the size so it nearly fills the screen (72 px works well with Arial Black).

Animate notes each change to the text in the timeline, adding property layers and creating keyframes.

21. Position the text. If you’re not sure about the placement, try it centered horizontally and about a third of the way down the stage.

22. With the playhead still at 0:00, set the opacity to 0. The Opacity slider is at the top of the Properties panel.

This means the text will not be visible at the beginning of the animation. Only the selection box shows and that will disappear as soon as you click something else. Don’t worry, though—you can select any element, whether it’s visible or not, by clicking its name in the Elements panel.

23. Make sure Toggle Pin is turned off. When Toggle Pin is off, the button doesn’t appear pushed in and the pin moves with the playhead.

24. Drag the playhead to 0:02. With the text selected, click the diamond next to Opacity in the Properties panel.

As you drag the playhead, you see the World move on the stage. Filmmakers and animators refer to dragging the playhead as scrubbing, a quick and easy way to review a segment of your animation. Clicking the Opacity diamond creates a keyframe at the 2-second mark where the text is still invisible.

25. Turn Toggle Pin back on, then drag the playhead to the 0:03 mark. With the pin at 0:02 and the playhead at

0:03, you’re ready to create another transition.

26. With the HelloWorld text box selected, set its opacity to 100. Animate creates a transition so that the text gradually changes from 0 to 100 percent opacity between 0:02 and 0:03 in your animation.

28. Press Ctrl+S (Command-S) to save your work.

As explained earlier, Animate saves your animation as a collection of HTML and JavaScript files. The main

HTML file uses the name you provided in step 2, when you first saved your project. So, for example, you may see Hello_World .html in the project folder. When you imported the planet_earth.png image, Animate created an images folder and placed a copy of the graphic in the folder. Your simple animation is complete. You can

Setting the Stage

As the Bard said a few hundred years ago, “All the world’s a stage.” That’s certainly true in Edge Animate. As explained in Chapter 1, when you place an element on the stage, it’s visible to your audience. There are a couple of ways to hide or remove elements from the stage. If you have the stage Overflow properties set to hidden, then you can exit stage right, left, top, or bottom by moving the element off stage.

At least, it’s not visible when viewed in a browser. The stage that you work with in Edge Animate represents a portion of a web page when it’s viewed in a browser. The stage has a limited number of properties. The most

The ID, as you might guess, is the name of your animation. When you save a project, Animate creates a web page, also known as an HTML document. Most browsers show the ID of the web page in a tab or the window’s title bar.

Initially, stage dimensions are shown as W (width) and H (height) properties in pixels. No big surprises here.

You can type in or scrub in the width and height of the stage. The stage doesn’t have to appear in the upperleft corner of a web page. For example, if your Animate composition is a banner ad, you might create a tall, lock and unlock your stage’s aspect ratio. When Link Width and Height are unbroken, changing one dimension automatically changes the other so that the stage stays proportionate; when the link is broken, you can change W and H independently. You can change the measurement from pixels (px) to a percentage

(%). For example, if you set the stage width to 80%, the stage will be 80 percent the size of the web browser window that it’s viewed in. This feature is great if you’re developing a page for computers, tablets, and phones. What’s more, if the browser window is resized, the stage automatically adjusts to the new size.

The background color is set using a color picker. In the Properties panel, click the color swatch and a color picker appears, as shown in Figure 20. Click the bar (also called the spectrum) on the left to choose a hue, and then click in the larger square to fine-tune the shade. The circle is positioned over the selected color, and the swatch in the lower-right corner displays it. The three swatches at top right make it easy to quickly choose a white, black, or transparent background. If you work with a team, you may be given a color spec in

RGB or hexadecimal formats. On the other hand, if you’re calling the shots, you may want to specify a color for other designers.

Use Min W and Max W to set the minimum and maximum width for the stage. Web pages aren’t a fixed size.

Your page may be viewed on a smartphone or a big screen TV. On top of that, your audience may resize the browser window. You can gain some control over how your project looks by setting a minimum and maximum width. You can use pixels to set an absolute value or you can use a percentage for responsive designs. Initially, Max W is set to none. To turn it on, click the label and deselect none. At that point the value appears in the panel and you can make adjustments.

The Overflow menu controls the way elements appear when they’re offstage. Often, you’ll want to set this menu to hidden, which makes elements outside the stage’s rectangle invisible. The hidden option works well when you want to have elements enter and exit the stage. If you set the menu to visible, elements that move beyond the boundary of the stage remain visible as long as there’s room on the web page. The scroll option places scroll bars at the right and bottom of the stage, making it possible to view elements that move outside the specified dimensions of the stage. The auto option automatically adds scroll bars if content exists beyond the confines of the stage.

Use the Autoplay checkbox to tell your animation to automatically run when its web page is loaded in a browser. If the box is turned off, you must use a JavaScript trigger to run the animation.

The Composition ID is used to identify this particular stage and its accompanying timeline. This becomes important when you have more than one Animate composition on a single web page. You’ll learn more about this in the JavaScript chapters.

The Down-level Stage and Poster properties create alternative elements for web browsers that aren’t HTML5 savvy.

The Preloader is responsible for loading all the resources needed to display your composition on a web page.

Those resources include JavaScript libraries and graphics.

Creating Art in Animate

The next section describes in detail the properties of the rectangle. However, many of these properties are used by other objects, such as blocks of text and artwork that you import into Animate. So when you’re learning all about rotating, skewing, and scaling rectangles, keep in mind that you can rotate, skew, and scale text and photos, too.

Rectangles: Building a Basic Box

Using the Rectangle tool (M), you can add blocks of color to the stage. These blocks are great if you want to differentiate portions of the web page. For example, perhaps you want to make a sidebar. Add a rectangle, and then you can place text or graphics over the rectangle, setting it off from the rest of the page. Chances are you know the basic drill for creating a rectangle. Click the Rectangle tool on the Tools palette, and then click and drag on the stage to mark its shape. To create a square, hold the Shift key while you drag. The new element appears on the stage, and it’s automatically selected, so you see eight white squares around the border that represent handles (Figure 21). You can continue to change the size and shape of the rectangle after it’s drawn by dragging the handles. Here are the basic properties that describe your rectangles:

ID.

As soon as you draw a rectangle on the stage, it’s listed in the Elements panel. When the rectangle is selected, its properties appear in the Properties panel. As with all your Animate elements, you probably want to give your rectangle a meaningful ID, such as LeftSidebar or Header. Otherwise, you’ll be searching through Rectangle1, Rectangle2, and Rectangle3 trying to find the one you want. To rename your rectangle, select it and change the ID at the top of the Properties panel. As an alternative, you can double-click the name in the Elements panel.

Tag.

Check out Rectangle in the Elements panel and see <div> after the name. Your rectangle is elements. With other Elements, Edge Animate lets you choose different tags. For example, when you add a photo to your animation, there are good reasons to use a <img> tag instead of <div>.

Position.

Underneath the name in the Properties panel, you see the Position and Size properties. The upperleft corner of the stage is referenced as X=0, Y=0. Moving from left to right increases the X value. Moving from top to bottom increases the Y value. Initially, your rectangle’s position is referenced by the upper-left corner. You can change that reference point, using the “Relative to” tool. It looks like a box with a square at each corner. Suppose you need to position an element a certain distance from the lower-right corner of the stage: you may want to use the lower-right corner of your element as a reference point. In that case, just

click the lower-right square in the “Relative to” box.

Size.

Next to the Location properties are the Size properties: W (width) and H (height). These change automatically when you drag a rectangle’s handles. You can also type in or scrub in a specific number.

Initially for rectangles, the size properties use pixels as the unit of measure. However, you can change from pixels to percentage. So a rectangle with a width of 20% would be 20 percent of the width of the stage. Use the link next to the W and H properties to lock and unlock the aspect ratio for your rectangle. When the Link

Scale is unbroken, changing one dimension automatically changes the other so that the rectangle stays proportionate. When the link is broken, you can change W and H independently.

Display.

Some elements are always on stage while others may come and go. The Display menu gives you a way to easily hide an element until it is needed. Your three choices include: Always On, On, and Off.

Overflow.

The overflow control for your rectangle works like the one for your stage, except it explicitly applies to the rectangle.

Opacity.

Use the slider near the top of the Properties panel when want to control the Opacity of the entire rectangle. When you want to adjust the opacity of the border or background independently, click their color swatches (explained under Color) and change the A (alpha property).

Rectangles have two basic parts: border color and background color. Border color marks the outer edge of the rectangle, while background color is the color inside the box. (Other programs sometimes call these properties stroke and fill.) You can assign separate colors to the border and background, or you can make them transparent by setting the Alpha channel to zero. There are two additional properties for the stroke. You can set the size in pixels (px) and you can choose among a solid stroke, a dashed stroke, a dotted stroke, or none—no stroke at all. The toolbar at the top of the workspace gives you another way to quickly change the background and border color of a selected element. It works just like the color picker in the properties panel.

Aligning, Distributing, and Arranging Elements

The maxim that “everything has its place” is certainly true when it comes to animation. With more than one element on the stage, their relationship to each other is critical. Designers often have a specific grid in mind when they’re creating printed pages or web pages. It’s best when boxes of text or graphics are aligned with this invisible grid. When several elements are aligned, it usually looks best when there’s an equal distance between them. You can spend a lot of time eyeballing the stage to try to get everything just right, but fortunately, you don’t have to.

To experiment with Animate’s Arrange, Align, and Distribute tools, you may want to create three or four simple objects from the Rectangle and Rounded Rectangle tools like the ones shown in Figure 22. As you drag elements around the stage, you’ll notice magenta-colored lines sprouting from the edges and midpoints. These are Smart

Guides, and they can help you to quickly align one or more objects while you’re mid-move. In many cases, that may be all the help you need.

For more formal alignment needs, turn to the Modify Align menu. For align to work, you need to select at least two elements. One of those elements may be the stage. You can select the elements on the stage or you can use the Elements panel. To use these commands, select all the elements that you want to align and then choose one of the options:

Modify Align Left

Modify Align Horizontal Center

Modify Align Right

Modify Align Top

Modify Align Vertical Center

Modify Align Bottom You use the Modify Distribute commands to put equal distance between three or more elements on the stage. You can choose which part of your elements the distribute command uses for the process and whether the action takes place along the horizontal or vertical axis. The specific commands are:

Modify Distribute Left

Modify Distribute Horizontal Center Modify Distribute Right

Modify Distribute Top

Modify Distribute Vertical Center

Modify Distribute Bottom

Rulers and Manual Guides

The stage includes rulers that help you place elements with precision. You can show and hide the rulers using the

View menu (View Rulers) or with the shortcut key: Ctrl+R (Command-R). The rulers extend beyond the edges of the stage, but there are markers that indicate the stage’s current size. For help with alignment chores, create guides by clicking on either the horizontal or vertical ruler and dragging toward the stage. Your guide follows and stays in place when you release the mouse button. If that’s not the perfect spot, you can drag your guide to a new inadvertently selecting and moving a guide, use the View Lock Guides command.

This locks them in place until you use View Unlock Guides to free them again. For quick help with alignment work, turn on Snap to Guides (View Snap to Guides).

You can drag multiple guides onto the stage for various alignment duties and you can show and hide all the guides at once using the View Guides command (Ctrl+; or Command-;).

Arranging Elements: Z-Order

A Rectangular Animation

In addition to horizontal and vertical position, there’s another way you can arrange objects on your stage. As you create elements, you may notice that new elements appear to be in front of the older elements, and if you drag a new element to the same X/Y position on the stage, it hides an older one. If you’re familiar with Photoshop, you might think of this positioning as “layers.” In geek-speak, it’s often referred to as the Z-layer or the Z-order, because this third dimension is known as the Z axis.

You can examine the Z-order of the elements on the stage by simply looking at the Elements panel. Elements at the top of the list are closer to the front. If you want to change the order, just drag an element to a new position in the panel. Animate also gives you menu commands and shortcut keys to rearrange elements:

Modify Arrange Bring to Front (Ctrl+Shift+] or Shift-Command-])

Modify Arrange Bring Forward (Ctrl+] or Command -])

Modify Arrange Send Backward (Ctrl+[ or Command -[)

Modify Arrange Send to Back (Ctrl+Shift+[ or Shift- Command -[)

Roll up your sleeves. Enough theory, it’s time for some animation. In this exercise, you create four rectangles. You give them names, apply color, and skew them.

Then you position them on the stage and make them move, change shape, and then appear to dissolve. It’s the sort of effect that might be part of a banner ad or the introduction to a more complex animation.

This exercise is divided into two parts. In the first set of steps, you create and position the color bars:

1. Open and save a new Animate project with the name Color_Bars. Don’t forget to create a new folder for your project.

2. Set the stage color to white and the dimensions to W=550 px and H=400 px. Animate remembers the last

stage settings you used. So if you followed previous exercises or experimented on your own, you may need to make these changes.

3. In the timeline (Figure 23) make sure that the Auto Keyframe Mode and Auto Transition Mode buttons are pressed. If you move your cursor over the buttons, tooltips show their names. For example, at the top of the timeline you see: Auto-Keyframe Mode, Auto-Transition Mode, Toggle Pin, and Easing.

4. Draw a rectangle and in the Properties ID, type Red. The ID box appears at the top of the Properties panel when the rectangle is selected.

5. In Properties, click the background color and set it to pure red, and set the to none. When you’re done, the hex color number should be #ff0000.

6. Set the rectangle’s size to W=550px and H=100px. The quickest way to accomplish this is to type the dimensions in the Properties panel, but if you’re a mouse master, you can drag the rectangle’s handles. You may need to click the “link” button next to W and H to change the width and height independently.

7. Set the Skew (x) to 50 deg (degrees). The horizontal skew is the top setting. A positive number slides the top edge to the left and the bottom edge to the right.

8. Position your red, skewed rectangle in the top-left corner of the stage so that only its point tip is visible. The

Location properties should be X=-550px, Y=0px. Ideally, just a red triangle shows in the top-left corner of the stage.

9. With the Red rectangle selected, press Ctrl+D (Command-D). Change the ID of RedCopy to Green. Then, change the color to match. The hex value for solid green is #00ff00. You can change the background color of a selected element in the Properties Color subpanel or you can use the color swatches in the toolbar above the stage.

10. Line up the top of the green rectangle with the bottom of the red rectangle (Y=100px). Then, hold the Shift key down and slide Green to the right until only the tip shows (X=430px).

11. Create two more skewed rectangles, naming and coloring them Blue and Yellow. Position the rectangles on alternating sides of the stage. The blue color is #0000ff, and yellow color is #ffff00. When you’re done positioning the rectangles, the stage should look like Figure 23.

Animating by Adding Property Keyframes

Now that you’ve successfully created and positioned the color bars, it’s time to make them move. Chapter 1 showed how the position of elements on the stage is controlled by property keyframes in the timeline. When the

Auto-Keyframe Mode button is pressed, as shown in Figure 23, new property keyframes are created whenever you set or change a property. You can also create property keyframes manually by clicking the diamond-shaped buttons in the Properties panel. You want to lock in the Position, Size, and Opacity properties at the beginning of keyframes. The result will be animation magic.

1. Make sure the timeline’s playhead is at 0:00. Select the parallelogram named Red; then in the Properties panel, click the diamond-shaped buttons next to X, Y, W, H, and Opacity.

The X and Y properties are in the Position and Size subpanel. They control the position. The W and H buttons create keyframes for width and height. The Opacity slider is near the top of the Properties panel. The diamond buttons add property keyframes and individual property layers in the timeline as you can see in

Figure 24. Property keyframes anchor a specific property value at a specific point in time. In the timeline, you should see property keyframes and property layers for:

Left

Top

Width

Height

Opacity

If you don’t see all those keyframes and property timelines under Red, you should create them manually by clicking the diamond button next to the missing property.

2. Repeat step 1 for the Green, Blue, and Yellow color bars to create the property keyframes and property layers for each. To speed things up, you can select all three bars first and then click the keyframe buttons.

3. Make sure the Auto-Keyframe Mode and Auto-Transition Mode are on (pressed in) and the other buttons are not. When Auto-Keyframe is on, Animate automatically creates property keyframes as you change elements on the stage. It’s a two-step process. Move the playhead to a point in time and then change your element’s properties. You can make changes in the Properties panel or you can make changes on the stage with the

Selection and Transform tools.

4. In the timeline, drag the playhead to the 0:02 position. For this step, the pin should be toggled off (not pressed in).

5. Drag each of the rectangles across the stage until the tail end of the skewed rectangle is visible.

At this point, most of the stage is covered by the color bars, with white triangles of the stage showing through at the edges. Remember to press the Shift key as you drag if you want to steady the bars’ vertical position.

6. With all the rectangles selected, in Properties click the Add Key Keyframe for Opacity button. Drag the playhead back and forth to preview the animation. The opacity for each color bar is set to 100 percent at the

2 second point. Scrubbing the playhead gives you a quick look at the action.

7. Drag the playhead to the 0:03 marker. This position represents the point 3 seconds into your animation.

8. Select each rectangle and then change the height (H property) to 300 px and the opacity to 50 percent. This has the effect of making the rectangles grow, slicing vertically into one another, and at the same time start to blur. See Figure 25. Keep in mind, you may need to delink the W and H properties to change them independently.

9. Drag the playhead to the 0:04 marker. Then change each rectangle’s height to 500 px and the opacity to 0 percent. The effect is that the rectangles keep growing and blur out of view.

Rounded Rectangles: More than Meets the Eye

secret is that you can create all these shapes using the Rectangle tool and tweaking the properties. The reasons for this quirk have to do with the fact that JavaScript code is defining these shapes. You can check this by creating a shape with each tool and examining their properties. You can turn a rectangle into a rounded rectangle simply by adjusting the Corners Radius properties, as shown in Figure 26. Likewise, you can square off a rounded rectangle using the same tools. So here’s a look at how they work.

In a new Animate project, create a rectangle and leave it selected. Choose the Transform Tool (Q), then with the mouse, hover over the keyframe diamond in the rounded rectangle properties, and the tooltip explains that it will

“Add Keyframe for Border Radii.” The three buttons at the top of the panel are labeled 1, 4, and 8. Below, you see a square made up of buttons where you can individually select the four corners of a rectangle. There’s a number edged corners. Click on the number and drag to the right to round off the corners. The number box accepts only positive numbers, so you can’t drag left. Notice that as you drag, the black diamonds at the corners of your rectangle move to the center. These diamonds are control points for the corner radii. You can manually drag the diamonds on any rectangle to create and adjust rounded corners.

Reset your rectangle so that it’s square, and then click the upper-right corner in the Properties panel. Change the radius setting and this time, you notice that the upper-right corner remains square while the others take on the rounded style. When a corner button is pressed in, that deselects the corner from the rounded settings.

top of the corner properties. Four new number boxes appear next to each corner. Now you can set each corner independently with different radius values. This gives you the ability to create irregular shapes even though, technically, they still have four corners. Combine this with the skewing and scaling properties, and you can create some really interesting amoeba effects. Click the 8 button, and each corner has two control numbers. This gives you the ability to move the control point off center, making a corner that is flatter on one side compared to the other. Notice that when you adjust the settings, the black diamond control point moves, too. You can always adjust your corners using either the number boxes or the control points in the rectangle.

A Circle Is a Very Rounded Rectangle

You can experiment with the Corners Radius properties by turning Rectangles into ovals and circles. For example, here are the steps to turn a square into a circle:

1. Click the Rectangle tool and, while holding the Shift key, drag out a box. Holding the Shift key down constrains the rectangle so that all sides are equal.

2. In the Corners properties, click the 1 button. With this setting, all the corners share the same corner radius value.

3. Click and drag the border radius number box until the square turns into a circle, as shown in Figure 27.

It’s possible to drag the number so that the corner radii pass one another at the center, but that’s not necessary to create a circle. You can change and adjust your circle properties just as you would any other object that you create in Animate. By skewing your object, you can create ellipses. By scaling it, you can create ovals. And, of course, you can create anything in between a square and an ellipse with the right settings.

Adding Drop Shadows to Graphics

Drop shadows not only look cool, they give you a way to visually separate different elements. Apply a drop shadow to a graphic, and you make it look like it’s floating above the stage. Add a shadow to the interior of an element, and you give it a more three-dimensional appearance. Shadows are often used with buttons to create a different appearance for over, clicked, and selected states. Animate gives you an easy way to create drop shadows and modify them to your needs and taste.

For a subtle shadow that sets an element off from the background, try the following steps:

1. Draw three elements on the stage.

2. Select one and then in the Properties panel, scroll down to the Drop Shadow controls shown in Figure 28.

3. Click the color swatch and choose Black.

4. Click the horizontal offset and type 4.

5. Click the vertical offset and type 4.

6. Click the Blur radius and type 14.

7. Click Spread and type 2.

If you want one of the elements to look three dimensional, you can use the same settings but click the Inset button. Instead of appearing outside of the element, the shadow is created inside the element. As the name implies, the Spread property controls the size of the shadow making it spread in all directions. As with any other property, you can make the drop shadow change over time. With a little creativity, you can create the impression of the sun changing position in the sky, with shadows moving and changing shape. Shadows are an important tool for text, too: text is more readable over a busy background when separated by a shadow.

Importing Art

It’s easy enough to create basic shapes and text in Animate, but when it comes to complex artwork, you’ll probably turn to your favorite art creation tools. For elaborate drawings and line art, that may be Adobe Illustrator.

For photographs, you may use Photoshop, Lightroom, or iPhoto. Adobe Fireworks may be the ideal companion tool for Animate because both tools were designed to create Web content. No matter how you create JPEGs, GIFs,

PNGs, or SVGs, you can import them into Animate and then animate them by changing their position on the stage and their appearance.

Regardless of the file format, the process for importing artwork is the same. Go to File Import and then find the file you want to bring into your project. The Missing CD folder 02-2_Sliding_Show has three photos in JPEG format.

You can practice by creating a new project complete with a new folder named 02-2_Sliding_Show and import each of the photos. After you choose File Import, a standard file/folder window opens for your PC or Mac. If you want to import all three files at once, just Shift-click to select them. As usual, Animate imports the files and, as a handy timesaver, names them based on the filenames. In this case, you’ll find squirrel, farmhouse, and bike in your

Elements panel. Each image is also automatically placed at the 0,0 position on the stage. You’ll only see one of the images though, because they’re covering one another.

Choosing between GIF, JPG, PNG and SVG

Creación de animaciones reutilizables con símbolos

The world of 2D computer graphics offers two systems for storing and displaying images: bitmaps (technically called raster graphics) and vector graphics.

Computer programs store bitmaps as a bunch of pixels, identified by color and position. The term Bitmap graphics doesn’t refer to just files with the Windows bitmap (.bmp) extension; it refers to all images stored in bitmap format, including .gif, .jpg, .tiff, and .png.

The good thing about bitmap graphics is that they let you create super-realistic detail with complex colors,

gradients, and subtle shadings. On the downside, uncompressed bitmaps typically take up a whopping amount of disk space, and they’re not particularly scalable. For example, suppose you have a bitmap image of a car, and you tell a program to increase the size by 500 percent.

The program has to create new pixels for the bigger image, so it duplicates the pixels (colored dots) already in the blocky or pixelated.

Computers store vector graphics as a bunch of formulas. Compared to raster graphics, vector graphics are relatively modest in size, and they’re scalable. In other words, if you draw a tiny car and decide to scale it 500 percent, your scaled drawing will still have nice, crisp details.

The strengths and weaknesses of each format are important when you’re working with images. Bitmaps are better for photorealistic images with lots of colors and shades. Vector graphics are better for line art, charts, diagrams, and images that you’re going to scale to different sizes. Animate can import four types of graphics files—JPG, GIF,

PNG, and SVG—however, there are a couple of gotchas that might surprise you.

JPG files, also known as JPEGS, are the familiar bitmap format used on the web and in many cameras. The format was developed by the Joint Photographic Experts Group, hence the acronym. JPEGs use what is known as a lossy compression technique to create smaller file sizes. Image editors that work with JPEGs usually let you choose the degree of compression. If your image will only be viewed on a screen, you can crank up the compression. If it’s headed to a photo printer and you want it poster size, you’re going to need all those pixels.

GIF files were developed by CompuServe, one of the early online services. The acronym comes from Graphic

Interchange Format. GIFs’ popularity seems to be fading compared to JPEGs and PNGs, but you’ll still find them on result is that an image with big swaths of solid colors, like a company logo or a bar graph, might result in a very small file. On the other hand, a photographic image won’t compress as well and may not look as good in GIF as, say, in JPEG because of the limited number of colors. GIFs provide a couple of neat tricks. You can create animated GIFs using simple frame-by-frame animation. Programs like Adobe Fireworks and

Flash make the process fairly easy. GIFs also let you designate parts of the image as transparent. That’s great if you’re placing an irregular shape, like an animated character, over an already developed background, like a room’s interior.

abbreviation stands for Portable Network Graphics. The PNG format was designed to be used on the Web (as opposed to print graphics) and to improve upon features already popular in GIFs. PNGs use a lossless compression technique, provide a bigger color palette, can display animated sequences and can include transparency within the image. PNGs are well supported among modern web browsers, but there are probably still some older browsers out there that don’t handle the format. The PNG format works well with Animate, in part because both were developed with the Web in mind. SVG files are vector-based. The name stands for Scalable Vector Graphics. That means rather than recording a pixel-by-pixel map of an image, SVG files contain formulas that describe the lines, curves, shapes, and other details of an image. All modern web browsers support the SVG format, but older browsers’ support for SVG is inconsistent.

If you resize an SVG image when you're working in Animate, it's likely to start looking pixelated—that jagged stairstep appearance that graphics get when they're enlarged. When this modified image is viewed in a browser, the pixelation shows. It's interesting to note that if you don't change the image within Animate, it resizes gracefully in a browser window, when it gets larger and smaller.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices | Online Privacy Policy

Crear animaciones anidadas con símbolos

Crear un símbolo

Animar los elementos de un símbolo

Exportar un símbolo

Importar un símbolo

Controlar los símbolos con JavaScript

Cree animaciones anidadas con líneas de tiempo independientes y funciones interactivas. Los símbolos son elementos que contienen su propia línea de tiempo. Puede animar un símbolo como un elemento normal en el escenario; por ejemplo, puede moverlo de izquierda a derecha.

También puede animar los elementos individuales que forman el símbolo. En otras palabras, puede crear una animación dentro de otra animación.

Los símbolos se pueden reutilizar y pueden controlarse con API y fragmentos de código creados previamente.

Para ver una lección sobre la animación con símbolos:

1. Seleccione Ventana > Lecciones en Edge Animate.

2. Haga clic en Reutilizar.

Crear un símbolo

1. En el panel Elementos, seleccione uno o varios elementos. La selección de varios elementos crea un único símbolo de ellos.

Nota

: También puede seleccionar símbolos para crear símbolos anidados.

2. Haga clic con el botón derecho del ratón y seleccione Convertir en símbolo en el menú contextual.

3. En el cuadro de diálogo Crear símbolo, defina el nombre de símbolo y haga clic en Aceptar.

Animar los elementos de un símbolo

1. En el panel Elementos, haga clic con el botón derecho del ratón en el símbolo y seleccione Editar símbolo.

También puede hacer clic con el botón derecho del ratón en el símbolo en el escenario.

2. Anime uno o varios de los elementos que componen el símbolo.

3. Para salir del modo de edición de símbolos, haga clic en la palabra Escenario que hay en la parte superior de la ventana de vista previa.

4. Para obtener una vista previa de la animación, haga clic en el botón Reproducir en el panel de la línea de tiempo o presione la barra espaciadora del teclado.

Exportar un símbolo

Puede copiar y pegar un símbolo de un proyecto a otro.

También puede exportar los símbolos y sus propiedades como un solo archivo (.easym) que puede compartir e importar a otra composición.

1. Haga clic con el botón derecho del ratón en el símbolo en el panel Elementos y seleccione Copiar.

2. Cambie a otro proyecto.

3. Haga clic con el botón derecho del ratón en el elemento del escenario en el panel de elementos y seleccione Pegar.

1. Seleccione los símbolos que desee exportar en el escenario o en el panel Biblioteca.

2. Haga clic con el botón derecho del ratón y seleccione Exportar símbolo.

Importar un símbolo

1. Haga clic en el botón de signo más (+) situado junto a la pestaña Símbolos de la biblioteca.

2. Busque y seleccione el archivo de símbolos (.easym) que se debe importar.

Controlar los símbolos con JavaScript

Se puede utilizar JavaScript para controlar los símbolos. Para obtener más información, consulte:

Adición de interactividad con JavaScript

“Trabajo con símbolos” en la Guía de la API de Edge Animate

Más información

Aprovechamiento de las líneas de tiempo del símbolo independientes

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Añadir etiquetas a la línea de tiempo

Animar HTML existente

Puede animar y añadir interactividad a los elementos de páginas HTML existentes. Debido a que el código de animación creado por Edge

Animate se almacena en un archivo independiente, se conserva la integridad de la página HTML.

1. Abra una página HTML existente en Edge (Archivo > Abrir).

Edge Animate solo abre código compatible con los estándares. Por ejemplo, si tiene ID duplicados, la herramienta le advierte que el documento tiene ID duplicados y no abre el archivo. Si se producen errores o detecta un comportamiento extraño, pruebe a ejecutar la página HTML a través de un validador HTML.

2. Seleccione un elemento de la página en el escenario.

También puede seleccionar un elemento de la página en el panel Elementos, que muestra el DOM (Modelo de objetos de documento) de la página.

3. Anime el elemento. Consulte Crear animaciones .

Nota:

Existen limitaciones a lo que se puede hacer con elementos HTML. Los elementos HTML no se pueden convertir en símbolos y no tienen todas las propiedades de otros elementos. Si se producen errores o detecta un comportamiento extraño, pruebe a ejecutar la página HTML a través de un validador HTML.

También puede añadir elementos como divs, texto e importar imágenes en Edge y, a continuación, animar y añadir interactividad a dichos elementos.

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Añadir interactividad con JavaScript

Adición de interactividad

Definir acciones

Utilizar el editor de código

Añadir activadores a la línea de tiempo

Se puede utilizar JavaScript para añadir interactividad a las composiciones. Puede definir acciones para cada elemento mediante un código integrado en el editor de código y la biblioteca de fragmentos. Las acciones son funciones que se pueden añadir para manejar un solo evento.

Definir acciones

1. En la línea de tiempo, haga clic en el botón Abrir acciones en el lado izquierdo del nombre de un símbolo o elemento.

También puede hacer clic en el botón Abrir acciones en el lado izquierdo del nombre de un símbolo o elemento en el panel

Elementos.

2. Seleccione un evento para activar la acción.

El editor de acciones aparece con un editor de código y una lista de fragmentos de código en la parte derecha.

3. Escriba el código para el evento.

Puede escribir su propio código o utilizar los fragmentos de código para añadir funciones comunes. Para obtener más información de referencia, consulte la Guía de la API de Edge Animate .

Utilizar el editor de código

El editor de código ofrece una visión completa del código JavaScript de su proyecto. También le permite ver el código sin procesar para el archivo de acciones.

1. Seleccione Ventana > Código.

También puede presionar Ctrl+E (Windows) o Cmd+E (Macintosh).

2. Para seleccionar un evento o un elemento, haga clic en el icono de signo más (+) situado a la izquierda del escenario en la barra lateral izquierda.

3. Para editar el archivo completo de JavaScript, haga clic en el botón Código completo situado en la parte superior derecha del panel.

Añadir etiquetas a la línea de tiempo

Puede insertar las etiquetas en la línea de tiempo y, a continuación, utilizarlas como referencias de tiempo en parámetros de función. Puede utilizar un nombre de etiqueta como un parámetro para cualquier función de reproducción que espere un valor de código de tiempo. Las etiquetas permiten crear acciones como reproducir o buscar un punto en la línea de tiempo.

Para añadir una etiqueta:

1. Mueva el cabezal de reproducción a la ubicación que desee.

2. Haga clic en el botón Insertar etiqueta en la esquina superior derecha de la línea de tiempo.

También puede presionar Ctrl+L (Windows) o Cmd+L (Macintosh).

3. Especifique un nombre para la etiqueta.

4. Al definir una acción para un elemento en el editor de código, utilice el nombre de la etiqueta como un parámetro de funciones de reproducción que espere un valor de código de tiempo.

Por ejemplo, en lugar de sym.play(1000)

, puede utilizar sym.play('mylabel')

Añadir activadores a la línea de tiempo

Puede colocar activadores en la línea de tiempo para ejecutar código JavaScript en un punto del tiempo.

Para añadir un activador:

1. Mueva el cabezal de reproducción a la ubicación que desee.

2. Haga clic en el botón Insertar activador en la esquina superior derecha de la línea de tiempo.

También puede presionar Ctrl+T (Windows) o Cmd+T (Macintosh).

Aparece el panel Código.

3. Defina la acción que se realizará en el activador. Para obtener más información de referencia, consulte la Guía de la API de

Edge Animate .

Puede modificar el código para el activador en cualquier momento haciendo doble clic en el icono de activador en la línea de tiempo.

Descripción general de las nuevas funciones

Más información

Adición de interactividad

Guía de la API de Edge Animate

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Uso de trazados de movimiento

Animación en un trazado curvado

Tutorial: Vídeo (15.07.2014)

Resumen de las nuevas funciones

Edge Animate CC 2.0 (junio de 2013)

Actualización a Edge Animate CC disponible

Para obtener más información, consulte el resumen de las nuevas funciones .

Trazados de movimiento

Publicación optimizada con el host de CDN

Plantillas

Gestos de barrido

Herramienta Cuentagotas

Código de color de los elementos

Panel Elementos y saltos en la línea de tiempo

Descripción general de las nuevas funciones

Sarah Hunt, jefa de productos de Edge Animate, proporciona una breve descripción general de las funciones de Edge Animate CC.

Trazados de movimiento

Los trazados de movimiento le permiten añadir movimientos muy expresivos a elementos que siguen un trazado en curva personalizado. Con esta función, puede emular experiencias del mundo real mediante movimientos fluidos, basados en la física, que no se logran con movimiento lineal.

Para controlar el movimiento de un elemento con los trazados de movimiento, siga estos pasos:

1. Seleccione el elemento del escenario y, a continuación, haga clic en la opción Trazados de movimiento del panel de propiedades contextual del menú desplegable Posición y tamaño.

Opción Trazados de movimiento del panel de propiedades contextual

Para establecer los trazados de movimiento como método predeterminado de movimiento para elementos nuevos en la composición, seleccione la opción “Trazados de movimiento” en la configuración predeterminada del diseño.

Utilización de Trazados de movimiento como opción predeterminada para los nuevos elementos

2. Cree una transición de la forma habitual con fotogramas clave o la herramienta Pin. Al hacerlo, se observa una línea dibujada entre dos puntos de ancla (representados por triángulos) como se muestra a continuación:

Elemento “Bee” que se va a mover

Trazado del elemento “Bee”

Haga clic en cualquier punto de la línea para ver los controladores que puede arrastrar para definir el trazado mediante la curva de Bézier. Utilice la opción de orientación automática para controlar la dirección del objeto cuando se mueve a lo largo del trazdo.

Haga clic en el trazado para ver los controladores de edición

Trazado de movimiento definido usando la curva de Bézier

Para añadir un punto de ancla, coloque el puntero del ratón sobre el trazado y haga clic.

Para eliminar un punto de ancla, coloque el puntero del ratón sobre el ancla y, a continuación, pulse Cmd/Ctrl y haga clic a la vez.

Para convertir una curva de Bézier en un punto nítido, haga clic en el punto de ancla y, a continuación, pulse Opción/Alt y haga clic a la vez.

Para desvincular los dos controladores que se encuentran en ambos lados de un punto de ancla y poder moverlos de manera independiente, pulse Opción/Alt y haga clic a la vez, y arrastre.

Los fotogramas clave de ubicación en la línea de tiempo representan dos trazados de movimiento independientes. Agregue un fotograma clave para dividir el trazado en dos o elimine un fotograma clave para crear un trazado contiguo. La aceleración se puede aplicar a los trazados de movimiento y el efecto de suavizado se reproduce por trazado.

Para dividir un trazado de movimiento, añada un fotograma clave a la línea de tiempo.

Para crear un trazado de movimiento contiguo, elimine un fotograma clave de ubicación de la línea de tiempo.

Para dividir dos trazados de movimiento contiguos en el espacio, pulse Cmd/Ctrl y haga clic a la vez, y arrastre hasta un ancla de fotograma clave contiguo.

Para conectar dos anclas finales de trazados de movimiento independientes, arrastre las anclas a la vez; de este modo se ajustarán para conectar la ubicación.

El objeto está ligado al trazado por el origen de la transformación. El origen de la transformación se puede ajustar para que el objeto pueda seguir el trazado desplazado del centro.

Trazados de movimiento y diseños interactivos

En la implementación actual, los trazados de movimiento no se pueden definir para utilizar diseños basados en porcentajes. Para evitar esto, defina su objeto en trazado dentro de un grupo, principal o símbolo y defina el principal para usar posiciones basadas en porcentajes. También puede utilizar este método para definir el trazado de movimiento relativo a la parte superior/derecha/abajo/izquierda.

Tutorial

Haga clic en Ventana > Lecciones y, a continuación, haga clic en Trazados de movimiento para realizar un ejercicio práctico y guiado sobre cómo usar trazados de movimiento en una composición de Animate.

Publicación optimizada con el host de CDN

Puede enviar más rápido su contenido con los archivos de ejecución de Adobe Content Deliver Network (CDN). Para ello, seleccione la opción

Alojar archivos de ejecución en Adobe CDN en la Configuración de publicación. Los proyectos se descargan con más rapidez gracias al almacenamiento en caché, que no le supondrá ningún coste.

Si el contenido debe ejecutarse sin conexión, anule la selección en la opción Configuración de publicación. Esta opción se activa de forma predeterminada.

Publicación con el host de CDN

Plantillas

Ahora podrá cargar, guardar y volver a utilizar las plantillas que se encuentran en una galería de plantillas. Esta función le permite cargar una composición Animate para patrones de archivo comunes.Las plantillas pueden capturar imágenes, texto, símbolos, fuentes y los cambios personalizados en su composición actual. Puede cargar plantillas desde el cargador de plantillas visuales.

Acceda al menú de las plantillas desde la pantalla de bienvenida (“Crear con plantilla”) o desde el menú Archivo. Desde la galería de plantillas puede importar, eliminar y crear una composición nueva a partir de una plantilla.

Creación a partir de una opción de plantilla en el menú Archivo

Los archivos de plantilla tienenla extensión .

antmpl

y se pueden distribuir libremente y almacenar en cualquier lugar del sistema de archivos.

Gestos de barrido

Ahora puede enlazar elementos con acciones de barrido de izquierda y derecha para experiencias orientadas a móviles. Puede asignar la acción de barrido a cualquier elemento de su composición. Puede asignar movimientos de barrido al escenario o aplicarlos a varios elementos para crear experiencias móviles únicas.

Haga clic con el botón derecho en el elemento de la línea de tiempo, haga clic en las opción Abrir acciones para <elemento> del menú y, a continuación, haga clic en swipeleft o swiperight

Gestos de barrido

Herramienta Cuentagotas

La nueva herramienta Cuentagotas se introduce en los paneles de selección de color. Seleccione el icono cuentagotas para tomar muestras de colores en el escenario.

Herramienta Cuentagotas

Código de color de los elementos

Ahora puede asignar colores a los distintos elementos de su composición para identificarlos fácilmente y trabajar con ellos. Puede hacer clic en la paleta de colores en el panel Elementos o en la línea de tiempo para asignar colores. Estos colores se reflejan también en las transiciones de la línea de tiempo.

Código de color del panel Elementos

Código de color de los elementos de la línea de tiempo

Compatibilidad de los navegadores antiguos con imágenes de póster

Panel Elementos y saltos en la línea de tiempo

Ahora, se puede desplazar por el panel de elementos y por la línea de tiempo para ver los elementos seleccionados (si el panel se está desplazando).

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Composición y diseño

Creación de un diseño flexible

(10.12.2012)

Cree diseños de páginas web interactivos fluidos

Tutorial: Vídeo

100

Navegadores antiguos de destino

Compatibilidad de los navegadores antiguos con Google Chrome Frame

Adobe Edge Animate utiliza estándares web como HTML5, CSS3 y JavaScript para definir la animación y la interactividad. Es posible que parte de la funcionalidad no funcione o no se muestre en navegadores antiguos que no admitan estos estándares. Aún puede utilizar navegadores antiguos como destino mediante la creación de imágenes de póster. También puede utilizar la extensión Google Chrome Frame para Internet

Explorer para los usuarios de Windows.

Compatibilidad de los navegadores antiguos con imágenes de póster

Defina un estado de repuesto de su proyecto en forma de una imagen de póster o sus propias ilustraciones.

Cuando los visitantes vean el contenido en un navegador web heredado, se mostrará la imagen de póster.

1. En el panel Línea de tiempo, coloque el cabezal de reproducción en el estado final de todas las animaciones.

2. En el panel Elementos, seleccione el elemento Escenario.

3. En el panel Propiedades, haga clic en el botón Capturar escenario como imagen de póster (icono de la cámara).

4. En el cuadro de diálogo Capturar una imagen de póster que aparece, haga clic en Capturar.

5. En el panel Propiedades, haga clic en el botón Editar de la propiedad del escenario de nivel inferior.

6. Haga clic en el botón Insertar. La imagen capturada aparece en el escenario de nivel inferior.

Para utilizar sus propias ilustraciones, arrastre la imagen desde el panel Biblioteca al escenario de nivel inferior.

7. Para volver al escenario principal, haga clic en la ruta del escenario en la parte superior de la ventana de vista previa.

Publicar como paquete de implementación de Animate (.oam)

Compatibilidad de los navegadores antiguos con Google Chrome Frame

Google Chrome Frame es una extensión que puede instalarse en versiones anteriores de Internet Explorer. Habilita tecnologías HTML5 como las que usa Edge Animate.

Consulte también Enable open web technologies in Internet Explorer (Habilitar tecnologías web abiertas en Internet Explorer) en el sitio web de

Google Developers.

1. Seleccione Archivo > Configuración de publicación.

2. En el cuadro de diálogo Configuración de publicación, asegúrese de que Web está seleccionado como el destino de publicación.

3. Seleccione la opción Utilizar Google Frame para IE 6, 7 y 8.

101

4. Acepte la opción predeterminada del programa de instalación de Chrome Frame "Sin mensajes".

5. Haga clic en Guardar para guardar la configuración de la publicación y volver a la composición.

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

102

Integración y publicación

API de tiempo de ejecución de Adobe Edge Animate

Referencia (12.12.2012)

Publicación e integración

Tutorial: Vídeo (13.12.2012)

API de Twitter y Edge Animate

Referencia (12.12.2012)

Mejore sus publicaciones de DPS con animaciones HTML mediante Adobe Edge

Tutorial: Texto (12.12.2012)

Utilización de archivos de Animate en InDesign o Muse

Tutorial: Vídeo (13.12.2012)

Complemente su sitio de WordPress con Edge Animate

Tutorial: Vídeo

Crear una aplicación PhoneGap Build con Edge Animate

Tutorial: Vídeo

Utilización del archivo de Edge Animate en InDesign o Muse

Tutorial: Vídeo (13.12.2012)

Ampliación de Edge Animate con componentes web de terceros

Referencia (12.12.2012)

103

Publicar el contenido

Publicación e integración

Optimizar el contenido para la Web

Publicar en Apple iBooks Author

Para publicar el contenido:

1. Especifique la configuración de la publicación. Consulte a continuación para obtener más información.

2. Seleccione Archivo > Publicar.

Optimizar el contenido para la Web

1. Seleccione Archivo > Configuración de publicación.

2. En el cuadro de diálogo Configuración de publicación, asegúrese de que Web está seleccionado como el destino de publicación.

3. Anote o cambie el directorio de destino.

4. Establezca la preferencia Frameworks vía CDN.

Seleccione esta opción para descargar los activos jQuery asociados de la composición de una red de entrega de contenido

(CDN). Deje la opción sin seleccionar para empaquetar los activos con la composición.

5. Establezca la preferencia Publicar contenido como código HTML estático.

Seleccione esta opción para generar formato HTML en lugar de insertar contenido de Edge Animate en el documento a través de JavaScript. Esta opción mejora el uso y la accesibilidad de SEO en algunas plataformas.

6. Haga clic en Guardar para guardar la configuración de la publicación, o bien haga clic en Publicar.

Publicar como paquete de implementación de Animate (.oam)

Seleccione esta opción de exportación para crear un archivo de paquete del proyecto para su uso en otras herramientas de Adobe. Las siguientes herramientas admiten paquetes de implementación de Animate: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver

CS6 y Muse.

1. Seleccione Archivo > Configuración de publicación.

2. En el cuadro de diálogo Configuración de publicación, asegúrese de que está seleccionado Paquete de implementación de

Animate como destino de publicación.

3. Anote o cambie el directorio de destino.

4. (Opcional) Especifique una imagen de póster.

5. Haga clic en Guardar para guardar la configuración de la publicación, o bien haga clic en Publicar.

Publicar en Apple iBooks Author

1. Seleccione Archivo > Configuración de publicación.

2. En el cuadro de diálogo Configuración de publicación, asegúrese de iBook/OS X está seleccionado como destino de publicación.

104

3. Anote o cambie el directorio de destino.

4. (Opcional) Especifique una imagen de póster.

5. Haga clic en Guardar para guardar la configuración de la publicación, o bien haga clic en Publicar.

Más información

Mejore sus publicaciones de DPS con animaciones HTML mediante Adobe Edge

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales | Política de privacidad en línea

Requisitos del sistema para Edge Animate CC

105

Requisitos del sistema

106

Requisitos del sistema

Contenido

Edge Animate CC (versión de 2015)

Edge Animate CC (2014 y 2014.1)

Requisitos del sistema para Edge Animate 1.5

Requisitos del sistema para Edge Animate 1.0

Edge Animate CC (versión de 2015)

Windows

Procesador Intel® Pentium® 4 o AMD Athlon® 64

Sistema operativo Microsoft Windows® 7, Windows 8 o Windows 8.1

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y tarjeta de vídeo de 16 bits

Es preciso disponer de conexión a Internet y estar registrado para poder activar el software, validar las suscripciones y acceder a los servicios en línea.*

Mac OS

Procesador Intel Multicore

Mac OS X v10.9 o posterior

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y tarjeta de vídeo de 16 bits

Es preciso disponer de conexión a Internet y estar registrado para poder activar el software, validar las suscripciones y acceder a los servicios online.*

* AVISO A LOS USUARIOS: Es preciso estar conectado a Internet, disponer de un Adobe ID y aceptar el contrato de licencia para activar y usar este producto. El producto puede integrarse con determinados servicios en línea de Adobe o alojados por terceros y dar acceso a ellos. Los servicios de Adobe están disponibles únicamente para usuarios de 13 años en adelante y exigen la aceptación de condiciones adicionales de uso, así como de la política de privacidad en línea de Adobe (consulte http://www.adobe.com/es/aboutadobe/legal.html).

Es posible que las aplicaciones y los servicios no estén disponibles en todos los países o idiomas, y pueden estar sujetos a cambios o cancelaciones sin previo aviso.

Pueden aplicarse tasas o tarifas de suscripción adicionales.

Edge Animate CC (2014 y 2014.1)

107

Windows

Procesador Intel® Pentium® 4 o AMD Athlon® 64

Sistema operativo Windows® 7, Windows 8 o Windows 8.1

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y tarjeta de vídeo de 16 bits

Mac OS

Procesador Intel Multicore

Sistema operativo Mac OS X v10.7, v10.8 o v10.9

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y tarjeta de vídeo de 16 bits

Requisitos del sistema para Edge Animate CC

Windows

Procesador Intel® Pentium® 4 o AMD Athlon® 64

Sistema operativo Windows® 7 o Windows 8

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y tarjeta de vídeo de 16 bits

Mac OS

Procesador Intel Multicore

Sistema operativo Mac OS X v10.7 y posteriores

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y tarjeta de vídeo de 16 bits

Requisitos del sistema para Edge Animate 1.5

Windows

Procesador Intel® Pentium® 4 o AMD Athlon® 64

Sistema operativo Windows® 7, Windows 8 o Windows 8.1

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y adaptador de gráficos de 16 bits.

Mac OS

Procesador Intel Multicore

Sistema operativo Mac OS X v10.6, v10.7, v10.8 o v10.9

1 GB de RAM

200 MB de espacio disponible en el disco duro para la instalación

Pantalla con resolución de 1280 x 800 y adaptador de gráficos de 16 bits.

108