Sie sind auf Seite 1von 66

Ayuda de Adobe® Edge Animate CC

Es posible que algunos vínculos redirijan a contenido en inglés.

Junio 2014
Novedades

Es posible que parte del contenido vinculado desde esta página esté disponible únicamente en inglés.

1
Novedades de Edge Animate CC (versión 3.0; enero de 2014)
Compatibilidad de audio
Escala con resp.
Carga de scripts
Mejoras del trazado de movimiento
Nuevos comandos de distribución
Centrado del escenario
Imagen de póster transparente para OAM
Opción CDN para OAM
Nuevas lecciones
Actualización de jQuery

Ir al principio
Compatibilidad de audio
Hágase oír con sus proyectos de Edge Animate gracias a la nueva capacidad de añadir audio a sus proyectos. Mediante las nuevas API de audio
HTML5 nativas disponibles en todos los navegadores actuales, puede asociar eventos de audio a la línea de tiempo, añadir acciones de audio a
sus elementos y crear transiciones de audio para obtener efectos de sonido únicos.

Para obtener más información sobre cómo comenzar a trabajar con audio, consulte Adición de audio a animaciones.

Para ver un tutorial en vídeo, haga clic aquí.

Ir al principio
Escala con resp.
Realizar proyectos interactivos de Animate ahora es tan sencillo como hacer clic en un botón. Cuando está activada, esta opción permite escalar
el escenario de Animate arriba y abajo mientras mantiene su proporción de aspecto. Utilice Escala con respuesta para el contenido independiente
de Animate o al incorporar composiciones de Edge Animate a un sitio web interactivo.

Escala con resp. también se puede utilizar para incorporar un OAM a las aplicaciones compatibles de Adobe. Cambie el tamaño del contenido del
marco del OAM y previsualícelo para ver los resultados.

Puede definir Escala con resp. en propiedades del escenario como “anchura”, “altura” o “ambas” para escalar la composición completa
proporcionalmente. La proporción de aspecto se mantiene y se determina por la proporción de anchura y altura del escenario.

Opción Escala con resp. en el panel Propiedades

“Anchura” cambia el tamaño de la composición solo cuando cambia la anchura de la ventana del documento.
“Altura” ajusta la composición a la altura del documento.
'Ambos' cambian el tamaño de la composición en ambas direcciones.

El escalado se determina por el tamaño principal del escenario. Si coloca el escenario en una página estática, también debe establecer la altura y
la anchura principales del escenario.

Ahora es más fácil colocar las composiciones en archivos estáticos: la composición se encaja en el flujo del documento.

Para ver un tutorial en vídeo, haga clic aquí.

Ir al principio
Carga de scripts
Incorpore JavaScript externo para ampliar Animate con sus scripts favoritos. Existen dos opciones de origen:

2
Carga de scripts en la biblioteca

Adición de archivo JS desde disco


Importación de archivos JS desde el sistema de archivos local. Al guardarlos estos archivos se incluyen en la carpeta “js”.

Archivo JS desde disco

Adición de archivo JS desde URL


Enlaza a una versión del archivo de script alojada online.

Archivo JS desde URL

Todos los scripts locales y sus referencias se incluyen al guardarlos, publicarlos y en las plantillas.

Ir al principio
Mejoras del trazado de movimiento
Se han realizado mejoras en la edición de trazados de movimiento, lo que le permite modificar fácilmente los trazados de movimiento que se
aplican a los objetos.

Al colocar el ratón sobre un trazado de movimiento, verá las nuevas capas de información que proporcionan información sobre los comandos de
teclado disponibles para los controles del trazado de movimiento. Para activar la visualización de esta capa, pulse “H”.

Opción (Mac); Alt (Windows) + clic y arrastre: Gira el trazado de movimiento.

3
Rotación del trazado de movimiento

Cmd/Ctrl + Opción (Mac); Ctrl + Alt (Windows) + clic y arrastre: Ajusta el trazado de movimiento.

Ajuste del trazado de movimiento

Ir al principio
Nuevos comandos de distribución
Existen nuevos comandos de distribución en el menú Alinear para ayudarle con la alineación y la ubicación de los elementos del escenario.
Seleccione tres o más objetos y, a continuación, Modificar > Distribuir en el menú para acceder a varias opciones de distribución.
Para distribuir uniformemente los objetos de distintos tamaños horizontal o verticalmente, seleccione Distribuir > espacio horizontal o espacio
vertical.

Ir al principio
Centrado del escenario
Puede centrar el escenario de Animate con una ventana del navegador o con cualquier contenedor principal en el que se encuentre. Elija entre
estas tres opciones:

4
Centrado del escenario

Vertical: centra el escenario según la anchura de la ventana gráfica.


Horizontal: centra el escenario según la altura de la ventana gráfica.
Ambos: centra el escenario según la altura y la anchura de la ventana gráfica.

Ir al principio
Imagen de póster transparente para OAM
Ahora tiene la opción al publicar un archivo OAM de guardar la imagen de póster como un PNG transparente. Esta opción resulta muy útil para
incorporar contenido de Animate en Adobe InDesign o Adobe Muse si desea que un escenario transparente cubra el contenido del diseño del
documento.

Publicación con imagen de póster transparente

Nota: Si selecciona esta opción, OAM aparece como un marco vacío cuando se coloca dentro de otras aplicaciones de Adobe. Previsualice
siempre una muestra dinámica del proyecto para ver los resultados de reproducción.

Asegúrese también de definir el color del escenario como transparente antes de publicar.

Actualmente, esta función no es compatible con tipos de publicaciones en PDF cuando se publica en DPS. Para utilizar una imagen de póster
transparente, seleccione los tipos de publicación Automática, PNG o JPG.

Ir al principio
Opción CDN para OAM
El alojamiento de los archivos del motor de ejecución está ahora disponible como configuración de publicación para OAM. Si crea contenido de
Animate con el fin de utilizarlo online (Adobe Muse o Adobe Dreamweaver), es posible que quiera beneficiarse del alojamiento CDN para el motor
de ejecución y jQuery de Animate. Cuando se activa esta opción, los archivos se descargan más rápidamente con el alojamiento en caché.

5
Opción CDN para OAM

Ir al principio
Nuevas lecciones
Están disponibles dos nuevas lecciones (diseño y audio interactivos) que sirven de introducción para las funciones disponibles en esta versión.
Consulte “Introducción” en la pantalla de bienvenida o en Ventana > Lecciones para ver el panel de lecciones.

Ir al principio
Actualización de jQuery
Ahora, Edge Animate utiliza la versión 2.0.3 de jQuery.

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

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

6
Descarga de archivos de muestra
Descargar muestras de html.adobe.com
ejemplo (21 de enero de 2014)

Descargas de muestra del sitio de Chris Gannon


ejemplo (17 de junio de 2013)

Es posible que parte del contenido vinculado desde esta página esté disponible únicamente en inglés.

7
Creación de contenido e importación de activos
Creación de contenido para animación
artículo (17 de junio de 2013)

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


tutorial de vídeo (17 de junio de 2013)

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


tutorial de vídeo (17 de junio de 2013)

Es posible que parte del contenido vinculado desde esta página esté disponible únicamente en inglés.

8
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

Ir al principio
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.

9
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.

Ir al principio
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.

10
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.

Ir al principio
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 Usar audio en dispositivos
para ver las restricciones.

Ir al principio
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.

Ir al principio
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.

11
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

Ir al principio
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.

Ir al principio
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

12
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.

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

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

14
Creación de animaciones con la línea de tiempo
Línea de tiempo de Edge Animate
Tutorial de vídeo (13.12.2012)

Creación de animaciones en Edge Animate


Tutorial de vídeo (13.12.2012)

Animación de texto
Tutorial de vídeo (13.12.2012)

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


Tutorial (12.12.2012)

Crear un logotipo animado


Tutorial (08.01.2013)

15
Utilización de la herramienta Pin, los fotogramas y las transiciones en
las animaciones
Crear animaciones con la herramienta Pin
Creación de animaciones con fotogramas clave
Editar fotogramas clave individuales
Copiar transiciones
Más información

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.

Ir al principio
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:

16
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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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

17
Crear animaciones anidadas con símbolos
Creación de animaciones reutilizables 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
Más información

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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.

Ir al principio

18
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

Ir al principio
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

19
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

20
Añadir interactividad con JavaScript
Adición de interactividad
Definir acciones
Utilizar el editor de código
Añadir etiquetas a la línea de tiempo
Añadir activadores a la línea de tiempo
Más información

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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.

21
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').

Ir al principio
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.

Ir al principio
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

22
Utilizar trazados de movimiento
Aprenda con los tutoriales de vídeo de Edge Animate
Adobe TV (16.01.2013)
Tutorial de vídeo
Aprenda los conceptos básicos de Edge Animate CS6 con los tutoriales de introducción y nuevas funciones creados por expertos en el
producto.

Crear un logotipo animado


Tutorial (08.01.2013)

Animación de texto
Tutorial de vídeo (13.12.2012)

Utilización de archivos de Animate en InDesign o Muse


Tutorial de vídeo (13.12.2012)

Introducción a Edge Animate


Tutorial de vídeo (12.12.2012)
Tutorial de vídeo

Utilización del archivo de Edge Animate en InDesign o Muse


Tutorial de vídeo (13.12.2012)

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


Tutorial de vídeo (12.12.2012)

Descargas de muestra del sitio de Chris Gannon


Ejemplo (12.12.2012)

Publicación e integración
Tutorial de vídeo (13.12.2012)

23
Animación en un trazado curvo

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

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

24
Novedades de Edge Animate CC
Descripción general de las nuevas funciones
Rutas 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

Volver al principio

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.

Volver al principio

Rutas de movimiento

Las rutas de movimiento le permiten agregar movimientos muy expresivos a elementos que siguen una ruta en curva personalizada. 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 las rutas de movimiento, realice los pasos siguientes:

1. Seleccione el elemento del escenario y, a continuación, haga clic en 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 las rutas de movimiento como método predeterminado de movimiento para elementos nuevos en la composición,
seleccione “Animar con rutas de movimiento” en la configuración predeterminada del diseño.

25
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

Ruta para el elemento “Bee”

Haga clic en cualquier punto de la línea para ver los controladores que puede arrastrar para definir la ruta mediante la curva de
Bézier.Utilice la opción de Orient auto para controlar la dirección del objeto cuando se mueve a lo largo de la ruta.

26
Haga clic en la ruta para ver los controladores de edición

Ruta de movimiento definida usando la curva de Bézier

Para añadir un punto de ancla, coloque el puntero del ratón sobre la ruta y haga clic.
Para eliminar un punto de ancla, coloque el puntero del ratón en el ancla y, a continuación, presione Cmd/Ctrl + clic.
Para convertir una Bézier en un punto enfocado, haga clic en el punto de ancla y, a continuación, presione Opción/Alt + clic.
Para desvincular los dos controladores que se encuentran en ambos lados de un punto de ancla y poder moverlos independientemente,
pulse Opción/Alt + haga clic y arrastre.

Los fotogramas clave de ubicación en la línea de tiempo representan dos rutas de movimiento independientes. Agregue un fotograma clave para
dividir la ruta en dos o elimine un fotograma clave para crear una ruta contigua. La aceleración se puede aplicar a la rutas de movimiento y el
efecto de suavizado se reproduce por ruta.

Para dividir una ruta de movimiento, agregue un fotograma clave en la línea de tiempo.
Para crear una ruta de movimiento contiguo, elimine un fotograma clave de ubicación en la línea de tiempo.
Para dividir dos rutas contiguas de movimiento en el espacio, presione Cmd/Ctrl, haga clic y arrastre hasta un ancla de fotograma clave
contiguo.
Para conectar dos anclas finales de rutas de movimiento independientes, arrastre las anclas a la vez; de este modo se ajustarán para
conectar la ubicación.

El objeto está ligado a la ruta por el origen de la transformación. El origen de la transformación se puede ajustar para que el objeto puede seguir
la ruta desplazado del centro.

Rutas de movimiento y diseños con capacidad de respuesta

En la implementación actual, las rutas de movimiento no se pueden definir para utilizar diseños basados en porcentajes. Para evitar esto, defina
su objeto en ruta dentro de un grupo, principal o símbolo y defina el principal para usar posiciones basadas en porcentajes. También puede

27
utilizar este método para definir la ruta de movimiento relativa a la parte superior/derecha/abajo/izquierda.

Tutorial

Haga clic en Ventana > Lecciones y, a continuación, haga clic en Rutas de movimiento para realizar un ejercicio práctico y guiado sobre cómo
usar rutas de movimiento en una composición Animate.

Volver al principio

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

Volver al principio

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.

28
Crear a partir de una opción de plantilla en menú Archivo

Los archivos de plantilla tienenla extensión .antmpl y se pueden distribuir libremente y almacenar en cualquier lugar del sistema de archivos.

Volver al principio

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 la línea de tiempo, haga clic en Abrir acciones para <elemento> en el menú y, a continuación, haga clic en
swipeleft o swiperight.

Gestos de barrido

29
Volver al principio

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

Volver al principio

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 de los elementos en la línea de tiempo

Código de color en el panel Elementos

30
Volver al principio

Panel Elementos y saltos en la línea de tiempo

Ahora, se puede desplazar por los paneles Elementos y por la línea de tiempo para mostrar los elementos seleccionados (si el panel se está
desplazando).

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

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

31
Historial de versiones | Edge Animate CC
Edge Animate CC (3.0)
Audio
Hágase oír con sus proyectos de Animate gracias a la nueva posibilidad de añadir audio a sus composiciones. Mediante las nuevas API de audio
HTML5 nativas disponibles en todos los navegadores actuales, puede asociar eventos de audio a la línea de tiempo, añadir acciones de audio a
sus elementos y crear transiciones de audio para obtener efectos de sonido únicos.
Para obtener más información sobre cómo comenzar a trabajar con audio, consulte Adición de audio a animaciones.
Escala con respuesta
Realizar proyectos interactivos de Animate ahora es tan sencillo como hacer clic en un botón. Cuando está activada, esta opción le permite
ampliar o reducir su escenario de Animate mientras se mantiene la proporción de aspecto según las dimensiones de la ventana del navegador o
del contenedor principal.
Carga de scripts
Añada sus bibliotecas de JavaScript favoritas para ampliar los proyectos de Animate con el nuevo panel de carga de scripts. Las bibliotecas se
pueden importar desde fuentes locales y en línea para guardarlas con la composición y empaquetarlas con archivos publicados.
Escala + Rotación del trazado de movimiento
Se han realizado mejoras en la edición de rutas de movimiento que le permiten escalar fácilmente el tamaño de una ruta de movimiento y girarla
con respecto al origen de la transformación. Coloque el ratón sobre un trazado de movimiento para ver los nuevos comandos o pulse H para
cerrar la capa.
Nuevos comandos de distribución
Existen nuevos comandos de distribución en el menú de modificación para ayudarle con la alineación y la ubicación de los elementos del
escenario. Seleccione dos o más objetos y, a continuación, Modificar > Distribuir en el menú para acceder a varias opciones de distribución.
Centrado del escenario
Puede centrar el escenario de Animate con una ventana del navegador o con cualquier contenedor principal en el que se encuentre. Puede elegir
centrar el escenario en horizontal, en vertical o de ambas formas con solo seleccionar una casilla de verificación en las propiedades del escenario.
Imagen de póster transparente para OAM
Ahora tiene la opción al publicar un archivo OAM de guardar la imagen de póster como un PNG transparente. Utilice este contenido incrustado de
Animate dentro de InDesign o Muse si desea que un escenario transparente se superponga al contenido del diseño de su documento. Nota:
Cuando utilice esta opción en una aplicación que admite archivos OAM, el archivo colocado aparecerá en blanco debido a la transparencia.
Actualmente, esta función no es compatible con publicaciones en PDF cuando se publica en DPS. Para utilizar una imagen de póster
transparente, seleccione los tipos de publicación automática, PNG o JPG.
Publicación de CDN para OAM
Benefíciese de una carga de proyectos de Animate más rápida gracias al almacenamiento en caché, ahora disponible con la publicación de OAM.
Active esta opción si está creando contenido de Animate para uso en línea (Muse, Dreamweaver o plugin de carga de terceros).
Nuevas lecciones
Están disponibles dos nuevas lecciones (diseño y audio interactivos) que sirven de introducción para las características disponibles en esta
versión. Consulte “Introducción” en la pantalla de bienvenida o en Ventana > Lecciones para ver el panel de lecciones.
Actualización de jQuery
Animate ahora utiliza la versión jQuery 2.0.3, actualizada a partir de jQuery 1.7.1.
Compatibilidad con mapas de origen
Ahora, al depurar composiciones de Animate con la vista previa en el navegador o en el CDN, podrá analizar el código disminuido de las
bibliotecas de jQuery y Animate cuando utiliza un navegador que admita mapas de origen como Google Chrome.

Ir al principio
Edge Animate CC (2.0.1)
Esta actualización de Edge Animate CC soluciona problemas de compatibilidad con Internet Explorer 11 y está recomendada para todos los
usuarios. El contenido producido con versiones anteriores de Animate no se podrá ejecutar en IE11 y esta actualización es necesaria para la
compatibilidad.
Para actualizar los proyectos, instale la actualización de Animate CC disponible aquí y vuelva a guardarlos. Para obtener más información sobre
problemas relacionados con las direcciones de esta actualización, visite Animate Team Blog aquí.

32
Ir al principio
Edge Animate CC (2.0)
Rutas de movimiento
La incorporación de rutas de movimiento le permitirá agregar movimientos muy expresivos a elementos que siguen un trazado personalizado en
línea curva. Esto hace posible que se puedan emular situaciones del mundo real mediante movimientos fluidos basados en la física que no se
podrían conseguir a través de un movimiento lineal.
El método predeterminado para controlar la posición sigue siendo la traslación de x/y. Para controlar el movimiento con las rutas de movimiento
en cada elemento, seleccione el botón de opción “Rutas de movimiento” en el panel Propiedades. Para establecer las rutas de movimiento como
método predeterminado de movimiento para elementos nuevos en la composición, seleccione “Rutas de movimiento” en la configuración
predeterminada del diseño.
Aplique rutas de movimiento al objeto y cree una transición tal y como lo haría con los fotogramas clave o el pin. Ahora verá una ruta de
movimiento en el escenario, entre los dos puntos de ancla, ya preparada para modificarse con curvas. Los puntos de ancla a los extremos se
representan mediante triángulos que apuntan en la dirección del movimiento del objeto.
Para controlar la duración de una ruta de movimiento, añada un fotograma clave de ubicación a la transición de ubicación en la línea de tiempo.
De esta forma, se crearán dos rutas independientes con velocidad también independiente. Asimismo, puede añadir aceleración a la ruta para
controlar la aceleración y desaceleración real del movimiento.
Marque la casilla de verificación Orientación automática para rotar automáticamente los elementos cuando se muevan por la ruta.
Gestos de barrido
Ahora podrá enlazar barridos de izquierda y derecha en elementos para lograr efectos centrados en el movimiento. El barrido se puede vincular a
cualquier elemento de la composición. Asigne una acción a un evento de barrido, de igual forma que lo haría para un clic, doble clic, etc. con el
botón Agregar acciones para un elemento.
Publicación optimizada con el host de CDN
Saque partido a la rapidez de descarga incrementada y a la gestión de resultados más sencilla con el alojamiento en tiempo de ejecución que
ofrece Adobe a través de los servidores de Akamai. Desactive esta opción si el contenido se debe ejecutar sin conexión o si prefiere utilizar su
propio alojamiento.
Plantillas
Ahora podrá cargar, guardar y volver a utilizar las plantillas que se encuentran en una galería de plantillas. De esta forma, podrá cargar una
composición de Animate para patrones de archivo comunes.
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.
Cuando se guarda una plantilla, se creará un archivo .antmpl que se puede distribuir libremente y puede ubicarse en cualquier parte del sistema
de archivos. Las plantillas pueden capturar imágenes, texto, símbolos, fuentes y cualquier modificación personalizada que haya efectuado en la
composición actual. Puede cargar plantillas desde el cargador de plantillas visuales.
Explorar los paneles Elementos y Línea de tiempo
Ahora, se puede desplazar por los paneles Elementos y Línea de tiempo para mostrar los elementos seleccionados si el panel se está moviendo.
Herramienta Cuentagotas
La nueva herramienta cuentagotas se encuentra en la ventana emergente Selector de color. Seleccione el icono de cuentagotas en la ventana
emergente Color para probar colores del escenario.
Elementos y código de colores de la línea de tiempo
Si hace clic en la asignación de color de un elemento, tanto en el panel Elementos como en el panel Línea de tiempo, podrá asignar un color, lo
que facilitará la segmentación de color de los objetos. De esta forma, podrá cambiar la asignación de color en las transiciones de elementos y de
línea de tiempo.
Otros niveles de zoom para el escenario
Ahora podrá controlar el nivel de zoom del escenario entre el 10 % y el 400 % para tener una mejor perspectiva general de los proyectos.

Ir al principio
Edge Animate 1.5
Compatibilidad con filtros de CSS
Las avanzadas capacidades de CSS han hecho su aparición en Edge Animate.
Las siguientes funciones presentan compatibilidad con filtros de CSS:
Invertir
Rotación de matiz
Contraste
Saturación

33
Sepia
Escala de grises
Desenfoque
Sombra
Todas ellas están disponibles en el panel de propiedades como efectos animables. Tenga en cuenta que los filtros de CSS se acaban de
incorporar a las especificaciones de CSS, por lo que solo están disponibles en Chrome 18 y versiones posteriores, Safari 6, iOS Safari 6 y
Blackberry 10.
Degradados
Aplique a sus elementos estilos de degradado de tipo radial y lineal con la nueva herramienta de degradado. La nueva característica de
degradados permite hacer lo siguiente:
Añadir varios delimitadores de degradado a los elementos.
Crear interpolaciones de animación para colores y posiciones de degradado.
Repetir degradados de forma infinita en función de los delimitadores de color definidos.
Los tipos de transiciones de degradado disponibles son lineal y radial (tenga en cuenta que ambos no pueden combinarse).
Especificar propiedades de CSS para degradados radiales, como el diseño elíptico hasta la esquina más alejada, el circular hasta la esquina
más alejada, etc.
Controlar la posición de degradado en grados de rotación en el caso de la degradación lineal y por porcentajes x/y en el de la radial.
Tipografía avanzada con Edge Web Fonts
Ahora puede examinar la biblioteca Edge Web Fonts de Edge Animate y aplicar las fuentes de la colección a sus composiciones. Es posible
buscar las fuentes por estilo y agregarlas a la biblioteca de fuentes en el documento.
Nuevo selector de color
Nuestro selector de color se ha actualizado para facilitar la edición de color.
Nuevos modos de color
Ahora es posible definir los colores tanto en los degradados como en los propios colores mediante RGBa, HSLa y HEX.
Reguladores de color
Es posible controlar y aplicar fácilmente el color gracias a los nuevos reguladores de color disponibles en los paneles de color y de degradado.
Muestras reutilizables
Las muestras se pueden guardar y volver a utilizar en el documento tanto en degradados como en colores.
Atenuación de elementos bloqueados
Los elementos bloqueados aparecen ahora atenuados tanto en el Panel Elementos como en el panel Línea de tiempo para distinguirlos con
claridad frente a los objetos editables.
Precargadores de Iframe fáciles de utilizar
La precarga se ha optimizado para trabajar en Iframes con el fin de cargar los recursos de forma coordinada. Así, las composiciones de Animate
incluidas en iframes pueden esperar a que se cargue el documento antes de que se indique la ejecución de la composición, lo que permite
disfrutar de una carga previa normal en la publicidad.
Conservación del modo de edición de símbolos durante la vista previa
La composición de Animate ya no regresa al escenario al usar la vista previa en el navegador. Animate mantendrá el estado de edición actual en
cada vista previa.

Ir al principio
Edge Animate 1.0.1
Esta actualización incluye la posibilidad de informar sobre datos anónimos relativos al uso de funciones específicas en Edge
Animate. Está dirigido a comprender mejor las funciones más relevantes para los usuarios de Edge Animate. Con esta
información, el equipo de Edge Animate podrá tomar decisiones con mayor conocimiento de causa que le permitirán priorizar y
centrarse en características particulares. El equipo de Edge Animate colaboró estrechamente con sus usuarios durante el
desarrollo de la versión 1.0. Sus comentarios influyeron enormemente en el producto. Gracias a esta actualización podrá
comunicarse con Adobe a través de sus acciones en la aplicación.
Asimismo, Adobe se ha encargado de diversos temas importantes del producto:
Se ha agregado compatibilidad con Edge Web Fonts.
Se ha mejorado el rendimiento en el contenido publicado.
Se ha incluido una corrección en iOS 6 para múltiples composiciones incrustadas a través de iframe y Adobe DPS.
Se han aplicado varios parches para mejorar la estabilidad de la aplicación.

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

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

35
Notas de la versión | Edge Animate CC
Le damos la bienvenida a Adobe® Edge Animate CC

Novedades de Edge Animate CC (3.0)


Instalar el software
Requisitos mínimos del sistema
Problemas conocidos
Recursos técnicos
Otros recursos

Ir al principio
Novedades de Edge Animate CC (3.0)
Audio
Hágase oír con sus proyectos de Animate gracias a la nueva posibilidad de añadir audio a sus composiciones. Mediante las nuevas API de audio
HTML5 nativas disponibles en todos los navegadores actuales, puede asociar eventos de audio a la línea de tiempo, añadir acciones de audio a
sus elementos y crear transiciones de audio para obtener efectos de sonido únicos.
Para obtener más información sobre cómo comenzar a trabajar con audio, consulte Añadir audio a las animaciones.
Escala con respuesta
Realizar proyectos interactivos de Animate ahora es tan sencillo como hacer clic en un botón. Cuando está activada, esta opción le permite
ampliar o reducir su escenario de Animate mientras se mantiene la proporción de aspecto según las dimensiones de la ventana del navegador o
del contenedor principal.
Carga de scripts
Añada sus bibliotecas de JavaScript favoritas para ampliar los proyectos de Animate con el nuevo panel de carga de scripts. Las bibliotecas se
pueden importar desde fuentes locales y en línea para guardarlas con la composición y empaquetarlas con archivos publicados.
Escala + Rotación del trazado de movimiento
Se han realizado mejoras en la edición de rutas de movimiento que le permiten escalar fácilmente el tamaño de una ruta de movimiento y girarla
con respecto al origen de la transformación. Coloque el ratón sobre un trazado de movimiento para ver los nuevos comandos o pulse H para
cerrar la capa.
Nuevos comandos de distribución
Existen nuevos comandos de distribución en el menú de modificación para ayudarle con la alineación y la ubicación de los elementos del
escenario. Seleccione dos o más objetos y, a continuación, Modificar > Distribuir en el menú para acceder a varias opciones de distribución.
Centrado del escenario
Puede centrar el escenario de Animate con una ventana del navegador o con cualquier contenedor principal en el que se encuentre. Puede elegir
centrar el escenario en horizontal, en vertical o de ambas formas con solo seleccionar una casilla de verificación en las propiedades del escenario.
Imagen de póster transparente para OAM
Ahora tiene la opción al publicar un archivo OAM de guardar la imagen de póster como un PNG transparente. Utilice este contenido incrustado de
Animate dentro de InDesign o Muse si desea que un escenario transparente se superponga al contenido del diseño de su documento. Nota:
Cuando utilice esta opción en una aplicación que admite archivos OAM, el archivo colocado aparecerá en blanco debido a la transparencia.
Actualmente, esta función no es compatible con publicaciones en PDF cuando se publica en DPS. Para utilizar una imagen de póster
transparente, seleccione los tipos de publicación automática, PNG o JPG.
Publicación de CDN para OAM
Benefíciese de una carga de proyectos de Animate más rápida gracias al almacenamiento en caché, ahora disponible con la publicación de OAM.
Active esta opción si está creando contenido de Animate para uso en línea (Muse, Dreamweaver o plugin de carga de terceros).
Nuevas lecciones
Están disponibles dos nuevas lecciones (diseño y audio interactivos) que sirven de introducción para las características disponibles en esta
versión. Consulte “Introducción” en la pantalla de bienvenida o en Ventana > Lecciones para ver el panel de lecciones.
Actualización de jQuery
Animate ahora utiliza la versión jQuery 2.0.3, actualizada a partir de jQuery 1.7.1.
Compatibilidad con mapas de origen
Ahora, al depurar composiciones de Animate con la vista previa en el navegador o en el CDN, podrá analizar el código disminuido de las
bibliotecas de jQuery y Animate cuando utiliza un navegador que admita mapas de origen como Google Chrome.
Consulte el historial de versiones para ver las características introducidas en las versiones anteriores.

36
Ir al principio
Instalar el software
1. Vaya a la página del producto Edge Animate en Adobe Creative Cloud en https://creative.adobe.com/es/products/animate
2. Haga clic en el botón Descargar.
3. Indique su ID de Adobe y las credenciales y haga clic en el botón Iniciar sesión si así se le indica.
4. Si aún no dispone de una cuenta de Adobe Creative Cloud, haga clic en el botón Introducción y seleccione una oferta de Creative Cloud.
Nota: Edge Animate se encuentra disponible en todas las ofertas de Creative Cloud, incluso en la suscripción gratuita de la versión de
prueba.
5. La aplicación de escritorio de Creative Cloud se iniciará, y descargará e instalará Edge Animate automáticamente. Nota: Es posible que se
le pida introducir la contraseña de administrador de su ordenador.
6. Al final de la instalación, haga clic en el vínculo de inicio de la aplicación.

Ir al principio
Requisitos mínimos del sistema

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 de 1280 x 800 con tarjeta de vídeo de 16 bits
Se requiere conexión a Internet de banda ancha

Mac OS
Procesador Intel Multicore
Sistema operativo Mac OS X v10.7, v10.8 y v10.9
1 GB de RAM
200 MB de espacio disponible en el disco duro para la instalación
Pantalla de 1280 x 800 con tarjeta de vídeo de 16 bits
Se requiere conexión a Internet de banda ancha

Ir al principio
Problemas conocidos
Para consultar la lista de problemas conocidos, vaya a: adobe.com/go/animate_knownissues_es
Consideraciones de seguridad al abrir proyectos de Animate desde el escritorio
Animate utiliza un servidor HTTP para proporcionar el contenido a su navegador cuando se utiliza la vista previa en el navegador. Animate utiliza
archivos con cualquier directorio que contenga una composición abierta de Animate. Para evitar el acceso a los archivos confidenciales a través
del servidor de Animate, le recomendamos guardar las composiciones de Animate en su propia carpeta.

Ir al principio
Recursos técnicos
Si necesita asistencia de Edge Animate, la puede encontrar en el foro de nuestra comunidad en: adobe.com/go/learn_animate_forum_es

Ir al principio
Otros recursos
Recursos en línea
Para obtener una ayuda completa, además de inspiración, instrucciones y asistencia de la comunidad, visite:
adobe.com/go/learn_animate_forum_es
Sitio web de Adobe
Adobe TV
API de Edge Animate

© 2013 Adobe Systems Incorporated. All rights reserved.

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

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

38
Utilización de la herramienta Pin, los fotogramas y las transiciones en
las animaciones
Crear animaciones con la herramienta Pin
Creación de animaciones con fotogramas clave
Editar fotogramas clave individuales
Copiar transiciones
Más información

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.

Ir al principio
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:

39
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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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

40
Añadir interactividad con JavaScript
Adición de interactividad
Definir acciones
Utilizar el editor de código
Añadir etiquetas a la línea de tiempo
Añadir activadores a la línea de tiempo
Más información

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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.

41
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').

Ir al principio
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.

Ir al principio
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

42
Publicar el contenido
Publicación e integración
Optimizar el contenido para la Web
Publicar como paquete de implementación de Animate (.oam)
Publicar en Apple iBooks Author
Más información

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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.
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.

Ir al principio
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.

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

44
Novedades de Edge Animate 1.5
Importante: Adobe ya no admite Edge Animate 1.5 y no se recomienda su uso. Esta versión no incluye funciones importantes, como los trazados
de movimiento y la compatibilidad de audio, introducidos en versiones más recientes, así como las mejoras de rendimiento y las soluciones de
errores (entre los que se incluyen problemas de compatibilidad con navegadores modernos que pueden dar lugar a resultados inesperados).

Aplicación de degradados a objetos


Actualizaciones del panel de color
Uso de filtros CSS
Aprovechamiento de Edge Web Fonts para lograr una mejor tipografía
Precargadores de Iframe fáciles de utilizar
Modo de edición de símbolos mantenido durante la vista previa
Fácil identificación de los elementos bloqueados y desbloqueados

Ir al principio
Aplicación de degradados a objetos
El panel de degradado que se introduce en esta versión le permite añadir degradados a los elementos de Edge Animate. Puede crear degradados
tanto lineales como radiales mediante las opciones del panel.
Además, puede animar degradados. Sin embargo, no puede realizar animaciones entre un degradado radial y un degradado lineal.

Tutorial de vídeo
Aplicación y degradados en Edge Animate

Puede llevar a cabo las siguientes acciones en el panel de degradados:


Utilizar detenciones de color para crear degradados complejos.
Crear degradados lineales o radiales.
En el caso de los degradados lineales, especificar el ángulo del degradado.
Guardar degradados personalizados como muestras.
Especificar un valor de color en cualquiera de los tres formatos: RGBa, hexadecimal o HSLa. La “a” hace referencia al valor de alfa o al
valor de la opacidad. Independientemente del formato que utilice para definir el color, Animate convierte los valores a formato RGB en última
instancia.
Para aplicar las propiedades de CSS al degradado radial como, por ejemplo, la elipse hacia el extremo más alejado o el círculo hacia el lado
más alejado, entre otras, mantenga pulsado el botón de degradado radial. Seleccione la opción que desea aplicar.
Nota: Los degradados no son compatibles con la versión 9 de Internet Explorer. Los degradados aplicados se sustituyen por el color de fondo.

A. Quitar color B. Ángulo de degradado lineal C. Muestra de degradado lineal D. Muestra de degradado radial E. Detención de color F. Añadir
muestras de degradado G. Repetir patrón H. Botones de formato de color I. Regulador de luminosidad J. Regulador de color K. Regulador de

45
opacidad L. Añadir muestra de color M. Muestra de color N. Color seleccionado O. Color original P. Botón de degradado radial Q. Botón
Degradado R. Botón de degradado lineal

Para ver un tutorial de vídeo sobre el uso de colores y degradados en Edge Animate, haga clic aquí.

Ir al principio
Actualizaciones del panel de color
En el panel de color, ahora puede hacer lo siguiente:
Utilizar el regulador de la barra de luminosidad para ajustar la intensidad del color seleccionado.
Utilizar el regulador de la barra de opacidad a fin de especificar la opacidad (transparencia) del color seleccionado.
Guardar los colores a medida como muestras para volver a utilizarlos.
Especificar un valor de color en cualquiera de los tres formatos: RGBa, hexadecimal o HSLa. La “a” hace referencia al valor de alfa o al
valor de la opacidad. Independientemente del formato que utilice para definir el color, Animate convierte los valores a formato RGB en última
instancia.

A. Opción para escribir código de color B. Botón Color C. Opción para quitar el color D. Muestra de color añadida E. Opción para añadir la
muestra de color F. Regulador de opacidad G. Regulador para la luminosidad del color H. Regulador para el color I. Opciones de formato de
código de color

Ir al principio
Uso de filtros CSS

Conocimiento de los efectos de los filtros CSS

Los filtros son una herramienta eficaz que de Alex Danilo


los autores web pueden utilizar para
conseguir interesantes efectos visuales. En
este artículo trataremos la historia de los Contribuya a
efectos de filtrado, para qué sirven y cómo Adobe Community Help

usarlos. ... Leer más


http://www.html5rocks.com/en/tutorials/filter...

Las opciones del panel Filtros le ayudan a aplicar rápidamente filtros CSS a símbolos, texto, etiquetas div e imágenes. Anteriormente, solo podía
aplicar estos efectos mediante un editor de imágenes.
Actualmente, los filtros CSS son compatibles con las versiones más recientes de Chrome, Safari, iOS6 y Blackberry 10.
Para aplicar un filtro CSS, seleccione un objeto del escenario y utilice las opciones del panel Filtros con fin el de aplicar los efectos deseados. Por
ejemplo, para aplicar filtros a la imagen insertada, seleccione la imagen y aplique los filtros según sea preciso.
Para quitar un filtro del elemento, haga clic en el botón “x” correspondiente.

46
Para ver un tutorial de vídeo sobre el uso de filtros CSS en Edge Animate, haga clic aquí.

Ir al principio
Aprovechamiento de Edge Web Fonts para lograr una mejor tipografía
Edge Animate ayuda a aprovechar el potencial de la propiedad @font-face de CSS al proporcionarle un surtido de fuentes web para sus diseños.
Edge Web Fonts le permite llevar la experiencia tipográfica de los medios impresos a la Web.
Edge Web Fonts cuenta con cientos de fuentes web de la biblioteca de Adobe, así como con una amplia colección de fuentes de código abierto.
Edge Web Fonts ofrece fuentes gratuitas que no requieren ninguna cuenta ni ningún kit de configuración, lo que facilita y acelera el comienzo.

Uso de Edge Web Fonts en Edge Animate


Al aplicar una fuente al texto, haga clic en el botón “+” situado junto al menú de fuentes para ver el diálogo Edge Web Fonts. Seleccione la fuente
que desea utilizar de la lista y haga clic en Añadir fuente.
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. Para obtener más información, consulte Uso de fuentes Web.

Tutorial de vídeo
Uso de fuentes Web en Edge Animate

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. Si, por alguna razón, no se puede aplicar la fuente seleccionada, se utilizarán las fuentes de
repuesto en función del orden en el que se enumeren.

47
Ir al principio
Precargadores de Iframe fáciles de utilizar
La precarga se ha optimizado para trabajar en Iframes con el fin de cargar los recursos de forma coordinada. Las composiciones de Animate
contenidas en Iframes esperan a que el documento se cargue antes de reproducir el archivo.
Los precargadores de Iframes le permiten realizar la carga previa de Iframes con un anuncio antes de que se descarguen el archivo Animate y la
página web.
Para obtener más información sobre el uso de precargadores, consulte API de JavaScript en Adobe Edge Animate.

Ir al principio
Modo de edición de símbolos mantenido durante la vista previa
Animate mantiene su estado de edición actual en cada vista previa. La composición no vuelve al escenario cuando se realiza la vista previa en un
navegador.

Ir al principio
Fácil identificación de los elementos bloqueados y desbloqueados
Los elementos bloqueados aparecen atenuados en la línea de tiempo y en el panel Elementos, lo que le permite distinguirlos fácilmente de los
elementos desbloqueados.

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

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

48
Lecciones de aplicaciones
El panel Lecciones de Adobe Edge Animate proporciona tutoriales prácticos con activos de ejemplo que puede seguir dentro de la herramienta.

Panel Lecciones

Puede acceder al panel Lecciones desde la ficha Introducción en la pantalla de bienvenida o en el menú Ventana (Ventana > Lecciones).

Lecciones

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

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

50
Navegadores antiguos de destino
Compatibilidad de los navegadores antiguos con imágenes de póster
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.

Ir al principio
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.

Ir al principio
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.
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.

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

52
Crear animaciones anidadas con símbolos
Creación de animaciones reutilizables 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
Más información

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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.

Ir al principio

53
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

Ir al principio
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

54
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.

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

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

56
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

57
Notas de la versión
Notas de la versión de Edge Animate 1.5

Notas de la versión de Edge Code

58
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 de vídeo ()

59
Navegadores antiguos de destino
Compatibilidad de los navegadores antiguos con imágenes de póster
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.

Ir al principio
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.

Ir al principio
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.
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.

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

61
Integración y publicación
API de tiempo de ejecución de Adobe Edge Animate
Artículo (12.12.2012)

Publicación e integración
Tutorial de vídeo (13.12.2012)

API de Twitter y Edge Animate


Artículo (12.12.2012)

Mejore sus publicaciones de DPS con animaciones HTML mediante Adobe Edge
Tutorial (12.12.2012)

Utilización de archivos de Animate en InDesign o Muse


Tutorial de vídeo (13.12.2012)

Complemente su sitio de WordPress con Edge Animate


Tutorial de vídeo ()

Crear una aplicación PhoneGap Build con Edge Animate


Tutorial de vídeo ()

Utilización del archivo de Edge Animate en InDesign o Muse


Tutorial de vídeo (13.12.2012)

Ampliación de Edge Animate con componentes web de terceros


Artículo (12.12.2012)

62
Publicar el contenido
Publicación e integración
Optimizar el contenido para la Web
Publicar como paquete de implementación de Animate (.oam)
Publicar en Apple iBooks Author
Más información

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.

Ir al principio
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.

Ir al principio
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.

Ir al principio
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.
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.

Ir al principio
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.

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

64
Requisitos del sistema

65