Adobe Edge Animate CC 2015

Ayuda de Adobe Edge Animate CC
Es posible que algunos vnculos redirijan a contenido en ingls.
Junio 2014
Novedades
Es posible que parte del contenido vinculado desde esta pgina est disponible nicamente en ingls.
Novedades de Edge Animate CC (versin 3.0; enero de 2014)

Compatibilidad de audio
Escala con resp.
Carga de scripts
Mejoras del trazado de movimiento
Nuevos comandos de distribucin
Centrado del escenario
Imagen de pster transparente para OAM
Opcin CDN para OAM
Nuevas lecciones
Actualizacin de jQuery
Ir al principio
Compatibilidad de audio
Hgase or con sus proyectos de Edge Animate gracias a la nueva capacidad de aadir 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 lnea de tiempo, aadir acciones de audio a
sus elementos y crear transiciones de audio para obtener efectos de sonido nicos.
Para obtener ms informacin sobre cmo comenzar a trabajar con audio, consulte Adicin de audio a animaciones.
Para ver un tutorial en vdeo, haga clic aqu.
Ir al principio
Escala con resp.
Realizar proyectos interactivos de Animate ahora es tan sencillo como hacer clic en un botn. Cuando est activada, esta opcin permite escalar
el escenario de Animate arriba y abajo mientras mantiene su proporcin 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. tambin se puede utilizar para incorporar un OAM a las aplicaciones compatibles de Adobe. Cambie el tamao del contenido del
marco del OAM y previsualcelo para ver los resultados.
Puede definir Escala con resp. en propiedades del escenario como anchura, altura o ambas para escalar la composicin completa
proporcionalmente. La proporcin de aspecto se mantiene y se determina por la proporcin de anchura y altura del escenario.
Opcin Escala con resp. en el panel Propiedades

Anchura cambia el tamao de la composicin solo cuando cambia la anchura de la ventana del documento.
Altura ajusta la composicin a la altura del documento.
'Ambos' cambian el tamao de la composicin en ambas direcciones.
El escalado se determina por el tamao principal del escenario. Si coloca el escenario en una pgina esttica, tambin debe establecer la altura y
la anchura principales del escenario.
Ahora es ms fcil colocar las composiciones en archivos estticos: la composicin se encaja en el flujo del documento.
Para ver un tutorial en vdeo, haga clic aqu.
Ir al principio
Carga de scripts
Incorpore JavaScript externo para ampliar Animate con sus scripts favoritos. Existen dos opciones de origen:
Carga de scripts en la biblioteca

Adicin de archivo JS desde disco
Importacin de archivos JS desde el sistema de archivos local. Al guardarlos estos archivos se incluyen en la carpeta js.
Archivo JS desde disco

Adicin de archivo JS desde URL
Enlaza a una versin 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 edicin de trazados de movimiento, lo que le permite modificar fcilmente los trazados de movimiento que se
aplican a los objetos.
Al colocar el ratn sobre un trazado de movimiento, ver las nuevas capas de informacin que proporcionan informacin sobre los comandos de
teclado disponibles para los controles del trazado de movimiento. Para activar la visualizacin de esta capa, pulse H.
Opcin (Mac); Alt (Windows) + clic y arrastre: Gira el trazado de movimiento.
Rotacin del trazado de movimiento

Cmd/Ctrl + Opcin (Mac); Ctrl + Alt (Windows) + clic y arrastre: Ajusta el trazado de movimiento.
Ajuste del trazado de movimiento
Ir al principio
Existen nuevos comandos de distribucin en el men Alinear para ayudarle con la alineacin y la ubicacin de los elementos del escenario.
Seleccione tres o ms objetos y, a continuacin, Modificar > Distribuir en el men para acceder a varias opciones de distribucin.
Para distribuir uniformemente los objetos de distintos tamaos horizontal o verticalmente, seleccione Distribuir > espacio horizontal o espacio
vertical.
Ir al principio
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:

Vertical: centra el escenario segn la anchura de la ventana grfica.
Horizontal: centra el escenario segn la altura de la ventana grfica.
Ambos: centra el escenario segn la altura y la anchura de la ventana grfica.
Ir al principio
Ahora tiene la opcin al publicar un archivo OAM de guardar la imagen de pster como un PNG transparente. Esta opcin resulta muy til para
incorporar contenido de Animate en Adobe InDesign o Adobe Muse si desea que un escenario transparente cubra el contenido del diseo del
documento.
Publicacin con imagen de pster transparente

Nota: Si selecciona esta opcin, OAM aparece como un marco vaco cuando se coloca dentro de otras aplicaciones de Adobe. Previsualice
siempre una muestra dinmica del proyecto para ver los resultados de reproduccin.
Asegrese tambin de definir el color del escenario como transparente antes de publicar.
Actualmente, esta funcin no es compatible con tipos de publicaciones en PDF cuando se publica en DPS. Para utilizar una imagen de pster
transparente, seleccione los tipos de publicacin Automtica, PNG o JPG.
Ir al principio
Opcin CDN para OAM
El alojamiento de los archivos del motor de ejecucin est ahora disponible como configuracin de publicacin 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 ejecucin y jQuery de Animate. Cuando se activa esta opcin, los archivos se descargan ms rpidamente con el alojamiento en cach.
Opcin CDN para OAM
Ir al principio
Nuevas lecciones
Estn disponibles dos nuevas lecciones (diseo y audio interactivos) que sirven de introduccin para las funciones disponibles en esta versin.
Consulte Introduccin en la pantalla de bienvenida o en Ventana > Lecciones para ver el panel de lecciones.
Ir al principio
Ahora, Edge Animate utiliza la versin 2.0.3 de jQuery.
Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Avisos legales | Poltica de privacidad en lnea
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)
Creacin de contenido e importacin de activos

Creacin de contenido para animacin
artculo (17 de junio de 2013)
Creacin de un proyecto e importacin de contenido (vdeo)

tutorial de vdeo (17 de junio de 2013)
Uso de hojas de sprites de Flash con Animate (tutorial)

tutorial de vdeo (17 de junio de 2013)
Aadir audio a las animaciones

Adobe Edge Animate ahora es compatible con audio nativo de HTML5 con el elemento <audio>: esto permite aadir sonidos a los proyectos de
animacin. Mediante HTML bsico y JavaScript, puede controlar la reproduccin de audio en las composiciones. Tambin puede enlazar
elementos de audio a eventos tctiles y del ratn, as como activar reproducciones de audio en la lnea 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 descripcin detallada de los tipos de audio compatibles, visite Formatos admitidos de audio y vdeo en HTML.
Para crear versiones de repuesto del archivo de audio, puede utilizar una aplicacin de conversin de audio como Adobe Audition, que se incluye
en su abono a Creative Cloud.
Aadir audio a las composiciones

Reproducir y controlar el audio
Ajuste del audio
Precarga de audio
Activacin del reproductor de audio predeterminado
Usar audio en dispositivos
Sugerencias y consideraciones de compatibilidad entre navegadores
Ir al principio
Aadir 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 automticamente en el grupo de audio cuando se sueltan en el proyecto.
Grupo de audio de la biblioteca

Haga clic en Aadir audio en su biblioteca de proyectos y busque el archivo de audio. A continuacin, arrastre el grupo de audio al
escenario.
Opcin Aadir audio de la biblioteca

Despus de aadir 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 reproduccin 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
Reproduccin automtica: Permite que el archivo de audio se reproduzca automticamente en la lnea 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

Lnea de tiempo
Reproducir: Reproduce el archivo de audio desde la posicin actual del cabezal de reproduccin.
Reproducir desde: Permite especificar el marcador de tiempo desde el que desea reproducir.
Pausar: Permite interrumpir la pista de audio. Utilice una funcin de reproduccin para reanudar la reproduccin.
Opciones de control de audio en la lnea de tiempo

Acciones de audio: Puede utilizar fragmentos de cdigo en Acciones para controlar la reproduccin de audio mediante eventos.
Consulte tambin
Acciones de audio
1. Haga clic en el {} situado junto al elemento de audio en la lnea 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 opcin", haga clic en Audio y despus haga clic en la accin deseada.
Acciones de audio en el Editor de acciones
4. En la seccin "Elegir un destino", haga clic en Escenario y, a continuacin, haga doble clic en el elemento al que deba aplicarse la accin
seleccionada.
5. Si es necesario, modifique el cdigo en la ventana de cdigo.
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. Pngase 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 lnea 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 estn disponibles en la mayora de dispositivos mviles. 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 composicin, seleccione "Precargar audio" en la seccin Precarga del panel
Propiedades del escenario.
Nota: La precarga de audio no est disponible en la mayora de los dispositivos mviles. Consulte Usar audio en dispositivos para ver las
restricciones.
Ir al principio
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 visualizacin del reproductor, seleccione el elemento de audio y, a continuacin, "Activado/a" en el panel
Propiedades.
11

La cartula del reproductor la procesa el navegador y aparece de forma diferente en funcin 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 aadir movimiento y transformar las propiedades del reproductor, al igual que aadirlas
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
Posicin y tamao
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 mvil y que se les cobre por unidad de
datos, las acciones de precarga, reproduccin automtica y reproduccin estn 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 ms informacin acerca
de las acciones de vdeo, 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 reproducan 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.
Sugerencias y consideraciones de compatibilidad entre navegadores
Ir al principio
Sincronizacin de audio
El audio se puede utilizar como sonido coreogrfico para las composiciones de escenario. Sin embargo, debido a su naturaleza web, las pistas de
audio pueden perder la sincronizacin con los elementos en movimiento del escenario. Puede experimentar latencia de reproduccin al coordinar
el movimiento con sonido, especialmente en las pistas ms largas.
Sprites de audio
El uso de sprites de audio permite crear un nico archivo de audio con las partes reproducibles separadas. Esta tcnica 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 smbolo y utilice marcadores de reproduccin para llamar a las secciones del
sprite.

12
Uso de Web Fonts

Puede aplicar Edge Web Fonts al texto directamente desde Edge Animate. Cuando selecciona una fuente desde el dilogo Edge Web Fonts, el
cdigo correspondiente para trasladar la fuente desde el servidor se incorpora automticamente al cdigo.
Edge Animate tambin 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 opcin Texto del panel Propiedades, haga clic en el botn + 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 segn 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 botn correspondiente.
4. Haga clic en Aadir fuente.
Las fuentes seleccionadas y aplicadas se aaden 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 utilizarn las fuentes de repuesto para la
visualizacin. 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.

14
Creacin de animaciones con la lnea de tiempo

Lnea de tiempo de Edge Animate
Tutorial de vdeo (13.12.2012)
Creacin de animaciones en Edge Animate

Animacin de texto
Aprovechamiento de las lneas de tiempo del smbolo independientes

Tutorial (12.12.2012)
Crear un logotipo animado

Tutorial (08.01.2013)
15
Utilizacin de la herramienta Pin, los fotogramas y las transiciones en

las animaciones
Crear animaciones con la herramienta Pin
Creacin de animaciones con fotogramas clave
Editar fotogramas clave individuales
Copiar transiciones
Ms informacin
Puede crear animaciones en Edge Animate utilizando mtodos de animacin tradicionales basados en fotogramas clave. Edge Animate tambin
proporciona un mtodo alternativo basado en la herramienta Pin para crear fotogramas clave.
Ir al principio
La herramienta Pin fija los valores de las propiedades de los elementos en un punto del tiempo en la lnea de tiempo. Cuando se realiza una
edicin, la herramienta Pin fija el valor actual mientras se cambian los valores de las propiedades en el cabezal de reproduccin. Edge Animate
genera los fotogramas clave y las transiciones al cabezal de reproduccin 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 lnea de tiempo.
2. Haga clic en el botn Alternar pin en el panel Lnea de tiempo.
Alternar pin
Para activar el pin, tambin puede hacer doble clic en el cabezal de reproduccin o presionar la P del teclado.
3. Arrastre el pin de la lnea de tiempo al punto de la lnea 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 patrn tipo "chevron" apunta al cabezal de reproduccin, los cambios se establecen en la ubicacin del cabezal de
reproduccin.
Adobe Edge Animate aade automticamente fotogramas clave y transiciones entre el cabezal de reproduccin y las posiciones del pin. No
tiene que aadir manualmente fotogramas clave o volver a colocar el cabezal de reproduccin en la lnea de tiempo.
5. Para obtener una vista previa de la animacin, haga clic en el botn Reproducir en el panel de la lnea de tiempo o presione la barra
espaciadora del teclado.
Para ver una leccin sobre la animacin 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 animacin se lleva a cabo con fotogramas clave,
se aade un fotograma clave a dos o ms ubicaciones en la lnea 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 reproduccin a la ubicacin en la lnea de tiempo en la que desea que comience la animacin.
3. En el panel de propiedades del elemento, haga clic en el botn Aadir fotograma clave (botn en forma de rombo) que hay junto a la
propiedad que desea cambiar con el tiempo.
Adicin de fotogramas clave
4. Mueva el cabezal de reproduccin a otra ubicacin en la lnea de tiempo y cambie el valor de la propiedad.
Edge aade automticamente un fotograma clave final y crea la transicin.
Para ver una leccin sobre la animacin con fotogramas clave:
2. Haga clic en Animar I: Fotogramas clave.
Ir al principio

1. Mueva el cabezal de reproduccin a un fotograma clave (icono en forma de rombo) en la lnea de tiempo.
2. Cambie el valor de la propiedad editable en el lado izquierdo del panel Lnea de tiempo.
Ir al principio
Copiar transiciones
Puede copiar una transicin y pegarla en la lnea de tiempo del mismo elemento o de otro elemento.
1. Haga clic en una transicin en la lnea de tiempo para seleccionarla. Cuando se selecciona esta opcin, aparece un borde de color naranja
alrededor de la barra de transicin en la lnea de tiempo.
2. Presione Ctrl+C (Windows) o Cmd+C (Macintosh) para copiar la transicin en el Portapapeles.
Tambin puede cortar la transicin desde el elemento con Ctrl+X (Windows) o Cmd+X (Macintosh).
3. Si desea copiar la transicin a otro elemento, seleccione el elemento en el escenario.
4. Mueva el cabezal de reproduccin a la ubicacin en la que desea que comience la transicin copiada.
5. Presione Ctrl+V (Windows) o Cmd+V (Macintosh) para pegar la transicin en la lnea de tiempo.
Ir al principio
Ms informacin
Creacin e importacin de activos
Creacin de animacin
Creacin de un diseo flexible

17
Crear animaciones anidadas con smbolos

Creacin de animaciones reutilizables con smbolos
Crear un smbolo
Animar los elementos de un smbolo
Exportar un smbolo
Importar un smbolo
Controlar los smbolos con JavaScript
Ms informacin
Cree animaciones anidadas con lneas de tiempo independientes y funciones interactivas. Los smbolos son elementos que contienen su propia
lnea de tiempo. Puede animar un smbolo como un elemento normal en el escenario; por ejemplo, puede moverlo de izquierda a derecha.
Tambin puede animar los elementos individuales que forman el smbolo. En otras palabras, puede crear una animacin dentro de otra animacin.
Los smbolos se pueden reutilizar y pueden controlarse con API y fragmentos de cdigo creados previamente.
Para ver una leccin sobre la animacin con smbolos:
2. Haga clic en Reutilizar.
Ir al principio
Crear un smbolo
1. En el panel Elementos, seleccione uno o varios elementos. La seleccin de varios elementos crea un nico smbolo de ellos.
Nota: Tambin puede seleccionar smbolos para crear smbolos anidados.
2. Haga clic con el botn derecho del ratn y seleccione Convertir en smbolo en el men contextual.
3. En el cuadro de dilogo Crear smbolo, defina el nombre de smbolo y haga clic en Aceptar.
Ir al principio

1. En el panel Elementos, haga clic con el botn derecho del ratn en el smbolo y seleccione Editar smbolo.
Tambin puede hacer clic con el botn derecho del ratn en el smbolo en el escenario.
2. Anime uno o varios de los elementos que componen el smbolo.
3. Para salir del modo de edicin de smbolos, haga clic en la palabra Escenario que hay en la parte superior de la ventana de vista previa.
Ir al principio
Exportar un smbolo
Puede copiar y pegar un smbolo de un proyecto a otro.
Tambin puede exportar los smbolos y sus propiedades como un solo archivo (.easym) que puede compartir e importar a otra composicin.
1. Haga clic con el botn derecho del ratn en el smbolo en el panel Elementos y seleccione Copiar.
2. Cambie a otro proyecto.
3. Haga clic con el botn derecho del ratn en el elemento del escenario en el panel de elementos y seleccione Pegar.
1. Seleccione los smbolos que desee exportar en el escenario o en el panel Biblioteca.
2. Haga clic con el botn derecho del ratn y seleccione Exportar smbolo.
Ir al principio
Importar un smbolo
1. Haga clic en el botn de signo ms (+) situado junto a la pestaa Smbolos de la biblioteca.
2. Busque y seleccione el archivo de smbolos (.easym) que se debe importar.
Ir al principio
18

Se puede utilizar JavaScript para controlar los smbolos. Para obtener ms informacin, consulte:
Adicin de interactividad con JavaScript
Trabajo con smbolos en la Gua de la API de Edge Animate
Ir al principio
Ms informacin

19
Animar HTML existente

Puede animar y aadir interactividad a los elementos de pginas HTML existentes. Debido a que el cdigo de animacin creado por Edge
Animate se almacena en un archivo independiente, se conserva la integridad de la pgina HTML.
1. Abra una pgina HTML existente en Edge (Archivo > Abrir).
Edge Animate solo abre cdigo compatible con los estndares. 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 extrao, pruebe a ejecutar la
pgina HTML a travs de un validador HTML.
2. Seleccione un elemento de la pgina en el escenario.
Tambin puede seleccionar un elemento de la pgina en el panel Elementos, que muestra el DOM (Modelo de objetos de documento) de la
pgina.
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 smbolos y no
tienen todas las propiedades de otros elementos. Si se producen errores o detecta un comportamiento extrao, pruebe a ejecutar la pgina
HTML a travs de un validador HTML.
Tambin puede aadir elementos como divs, texto e importar imgenes en Edge y, a continuacin, animar y aadir interactividad a dichos
elementos.

20
Aadir interactividad con JavaScript

Adicin de interactividad
Definir acciones
Utilizar el editor de cdigo
Aadir etiquetas a la lnea de tiempo
Aadir activadores a la lnea de tiempo
Ms informacin
Se puede utilizar JavaScript para aadir interactividad a las composiciones. Puede definir acciones para cada elemento mediante un cdigo
integrado en el editor de cdigo y la biblioteca de fragmentos. Las acciones son funciones que se pueden aadir para manejar un solo evento.
Ir al principio
Definir acciones
1. En la lnea de tiempo, haga clic en el botn Abrir acciones en el lado izquierdo del nombre de un smbolo o elemento.
Tambin puede hacer clic en el botn Abrir acciones en el lado izquierdo del nombre de un smbolo o elemento en el panel Elementos.
2. Seleccione un evento para activar la accin.
El editor de acciones aparece con un editor de cdigo y una lista de fragmentos de cdigo en la parte derecha.
3. Escriba el cdigo para el evento.
Puede escribir su propio cdigo o utilizar los fragmentos de cdigo para aadir funciones comunes. Para obtener ms informacin de
referencia, consulte la Gua de la API de Edge Animate.
Ir al principio
El editor de cdigo ofrece una visin completa del cdigo JavaScript de su proyecto. Tambin le permite ver el cdigo sin procesar para el archivo
de acciones.
1. Seleccione Ventana > Cdigo.
Tambin puede presionar Ctrl+E (Windows) o Cmd+E (Macintosh).
2. Para seleccionar un evento o un elemento, haga clic en el icono de signo ms (+) situado a la izquierda del escenario en la barra lateral
izquierda.
3. Para editar el archivo completo de JavaScript, haga clic en el botn Cdigo completo situado en la parte superior derecha del panel.
Ir al principio
Puede insertar las etiquetas en la lnea de tiempo y, a continuacin, utilizarlas como referencias de tiempo en parmetros de funcin. Puede
utilizar un nombre de etiqueta como un parmetro para cualquier funcin de reproduccin que espere un valor de cdigo de tiempo. Las etiquetas
permiten crear acciones como reproducir o buscar un punto en la lnea de tiempo.
21
Para aadir una etiqueta:

1. Mueva el cabezal de reproduccin a la ubicacin que desee.
2. Haga clic en el botn Insertar etiqueta en la esquina superior derecha de la lnea de tiempo.
Tambin puede presionar Ctrl+L (Windows) o Cmd+L (Macintosh).

3. Especifique un nombre para la etiqueta.
4. Al definir una accin para un elemento en el editor de cdigo, utilice el nombre de la etiqueta como un parmetro de funciones de
reproduccin que espere un valor de cdigo de tiempo.
Por ejemplo, en lugar de sym.play(1000), puede utilizar sym.play('mylabel').
Ir al principio

Puede colocar activadores en la lnea de tiempo para ejecutar cdigo JavaScript en un punto del tiempo.
Para aadir un activador:
2. Haga clic en el botn Insertar activador en la esquina superior derecha de la lnea de tiempo.
Tambin puede presionar Ctrl+T (Windows) o Cmd+T (Macintosh).

Aparece el panel Cdigo.
3. Defina la accin que se realizar en el activador. Para obtener ms informacin de referencia, consulte la Gua de la API de Edge Animate.
Puede modificar el cdigo para el activador en cualquier momento haciendo doble clic en el icono de activador en la lnea de tiempo.
Ir al principio
Ms informacin
Gua de la API de Edge Animate

22
Utilizar trazados de movimiento

Aprenda con los tutoriales de vdeo de Edge Animate
Adobe TV (16.01.2013)
Tutorial de vdeo
Aprenda los conceptos bsicos de Edge Animate CS6 con los tutoriales de introduccin y nuevas funciones creados por expertos en el
producto.

Tutorial (08.01.2013)
Animacin de texto
Utilizacin de archivos de Animate en InDesign o Muse

Introduccin a Edge Animate

Tutorial de vdeo
Utilizacin del archivo de Edge Animate en InDesign o Muse

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

Descargas de muestra del sitio de Chris Gannon

Ejemplo (12.12.2012)
Publicacin e integracin
23
Animacin en un trazado curvo

24
Novedades de Edge Animate CC

Descripcin general de las nuevas funciones
Rutas de movimiento
Publicacin optimizada con el host de CDN
Plantillas
Gestos de barrido
Herramienta Cuentagotas
Cdigo de color de los elementos
Panel Elementos y saltos en la lnea de tiempo
Volver al principio
Descripcin general de las nuevas funciones

Sarah Hunt, jefa de productos de Edge Animate, proporciona una breve descripcin 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
funcin, puede emular experiencias del mundo real mediante movimientos fluidos, basados en la fsica, 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 continuacin, haga clic en Trazados de movimiento del panel de propiedades contextual del men
desplegable Posicin y tamao.
Opcin Trazados de movimiento del panel de propiedades contextual
Para establecer las rutas de movimiento como mtodo predeterminado de movimiento para elementos nuevos en la composicin,
seleccione Animar con rutas de movimiento en la configuracin predeterminada del diseo.
25
Utilizacin de Trazados de movimiento como opcin predeterminada para los nuevos elementos
2. Cree una transicin de la forma habitual con fotogramas clave o la herramienta Pin. Al hacerlo, se observa una lnea dibujada entre dos
puntos de ancla (representados por tringulos) como se muestra a continuacin:
Elemento Bee que se va a mover
Ruta para el elemento Bee
Haga clic en cualquier punto de la lnea para ver los controladores que puede arrastrar para definir la ruta mediante la curva de
Bzier.Utilice la opcin de Orient auto para controlar la direccin del objeto cuando se mueve a lo largo de la ruta.
26
Haga clic en la ruta para ver los controladores de edicin
Ruta de movimiento definida usando la curva de Bzier
Para aadir un punto de ancla, coloque el puntero del ratn sobre la ruta y haga clic.
Para eliminar un punto de ancla, coloque el puntero del ratn en el ancla y, a continuacin, presione Cmd/Ctrl + clic.
Para convertir una Bzier en un punto enfocado, haga clic en el punto de ancla y, a continuacin, presione Opcin/Alt + clic.
Para desvincular los dos controladores que se encuentran en ambos lados de un punto de ancla y poder moverlos independientemente,
pulse Opcin/Alt + haga clic y arrastre.
Los fotogramas clave de ubicacin en la lnea 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 aceleracin 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 lnea de tiempo.
Para crear una ruta de movimiento contiguo, elimine un fotograma clave de ubicacin en la lnea 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 ajustarn para
conectar la ubicacin.
El objeto est ligado a la ruta por el origen de la transformacin. El origen de la transformacin se puede ajustar para que el objeto puede seguir
la ruta desplazado del centro.
Rutas de movimiento y diseos con capacidad de respuesta

En la implementacin actual, las rutas de movimiento no se pueden definir para utilizar diseos basados en porcentajes. Para evitar esto, defina
su objeto en ruta dentro de un grupo, principal o smbolo y defina el principal para usar posiciones basadas en porcentajes. Tambin puede
27
utilizar este mtodo para definir la ruta de movimiento relativa a la parte superior/derecha/abajo/izquierda.
Tutorial
Haga clic en Ventana > Lecciones y, a continuacin, haga clic en Rutas de movimiento para realizar un ejercicio prctico y guiado sobre cmo
usar rutas de movimiento en una composicin Animate.
Volver al principio

Puede enviar ms rpido su contenido con los archivos de ejecucin de Adobe Content Deliver Network (CDN). Para ello, seleccione la opcin
Alojar archivos de ejecucin en Adobe CDN en la Configuracin de publicacin. Los proyectos se descargan con ms rapidez gracias al
almacenamiento en cach, que no le supondr ningn coste.
Si el contenido debe ejecutarse sin conexin, anule la seleccin en la opcin Configuracin de publicacin. Esta opcin se activa de forma
predeterminada.
Publicacin con el host de CDN
Volver al principio
Plantillas
Ahora podr cargar, guardar y volver a utilizar las plantillas que se encuentran en una galera de plantillas. Esta funcin le permite cargar una
composicin Animate para patrones de archivo comunes.Las plantillas pueden capturar imgenes, texto, smbolos, fuentes y los cambios
personalizados en su composicin 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 galera de plantillas
puede importar, eliminar y crear una composicin nueva a partir de una plantilla.
28
Crear a partir de una opcin de plantilla en men Archivo
Los archivos de plantilla tienenla extensin .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 mviles. Puede asignar la accin
de barrido a cualquier elemento de su composicin. Puede asignar movimientos de barrido al escenario o aplicarlos a varios elementos para crear
experiencias mviles nicas.
Haga clic con el botn derecho en la lnea de tiempo, haga clic en Abrir acciones para <elemento> en el men y, a continuacin, haga clic en
swipeleft o swiperight.
Gestos de barrido
29
Volver al principio
La nueva herramienta Cuentagotas se introduce en los paneles de seleccin de color. Seleccione el icono cuentagotas para tomar muestras de
colores en el escenario.
Volver al principio
Cdigo de color de los elementos

Ahora puede asignar colores a los distintos elementos de su composicin para identificarlos fcilmente y trabajar con ellos. Puede hacer clic en la
paleta de colores en el panel Elementos o en la lnea de tiempo para asignar colores. Estos colores se reflejan tambin en las transiciones de la
lnea de tiempo.
Cdigo de color de los elementos en la lnea de tiempo
Cdigo de color en el panel Elementos
30
Volver al principio
Panel Elementos y saltos en la lnea de tiempo

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

31
Historial de versiones | Edge Animate CC

Edge Animate CC (3.0)
Audio
Hgase or con sus proyectos de Animate gracias a la nueva posibilidad de aadir audio a sus composiciones. Mediante las nuevas API de audio
Para obtener ms informacin sobre cmo comenzar a trabajar con audio, consulte Adicin de audio a animaciones.
Escala con respuesta
Realizar proyectos interactivos de Animate ahora es tan sencillo como hacer clic en un botn. Cuando est activada, esta opcin le permite
ampliar o reducir su escenario de Animate mientras se mantiene la proporcin de aspecto segn las dimensiones de la ventana del navegador o
del contenedor principal.
Carga de scripts
Aada 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 lnea para guardarlas con la composicin y empaquetarlas con archivos publicados.
Escala + Rotacin del trazado de movimiento
Se han realizado mejoras en la edicin de rutas de movimiento que le permiten escalar fcilmente el tamao de una ruta de movimiento y girarla
con respecto al origen de la transformacin. Coloque el ratn sobre un trazado de movimiento para ver los nuevos comandos o pulse H para
cerrar la capa.
Existen nuevos comandos de distribucin en el men de modificacin para ayudarle con la alineacin y la ubicacin de los elementos del
escenario. Seleccione dos o ms objetos y, a continuacin, Modificar > Distribuir en el men para acceder a varias opciones de distribucin.
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 verificacin en las propiedades del escenario.
Ahora tiene la opcin al publicar un archivo OAM de guardar la imagen de pster 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 diseo de su documento. Nota:
Cuando utilice esta opcin en una aplicacin que admite archivos OAM, el archivo colocado aparecer en blanco debido a la transparencia.
Actualmente, esta funcin no es compatible con publicaciones en PDF cuando se publica en DPS. Para utilizar una imagen de pster
transparente, seleccione los tipos de publicacin automtica, PNG o JPG.
Publicacin de CDN para OAM
Benefciese de una carga de proyectos de Animate ms rpida gracias al almacenamiento en cach, ahora disponible con la publicacin de OAM.
Active esta opcin si est creando contenido de Animate para uso en lnea (Muse, Dreamweaver o plugin de carga de terceros).
Nuevas lecciones
Estn disponibles dos nuevas lecciones (diseo y audio interactivos) que sirven de introduccin para las caractersticas disponibles en esta
versin. Consulte Introduccin en la pantalla de bienvenida o en Ventana > Lecciones para ver el panel de lecciones.
Animate ahora utiliza la versin 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 cdigo 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 actualizacin 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 actualizacin es necesaria para la
compatibilidad.
Para actualizar los proyectos, instale la actualizacin de Animate CC disponible aqu y vuelva a guardarlos. Para obtener ms informacin sobre
problemas relacionados con las direcciones de esta actualizacin, visite Animate Team Blog aqu.
32
Ir al principio
Edge Animate CC (2.0)

Rutas de movimiento
La incorporacin de rutas de movimiento le permitir agregar movimientos muy expresivos a elementos que siguen un trazado personalizado en
lnea curva. Esto hace posible que se puedan emular situaciones del mundo real mediante movimientos fluidos basados en la fsica que no se
podran conseguir a travs de un movimiento lineal.
El mtodo predeterminado para controlar la posicin sigue siendo la traslacin de x/y. Para controlar el movimiento con las rutas de movimiento
en cada elemento, seleccione el botn de opcin Rutas de movimiento en el panel Propiedades. Para establecer las rutas de movimiento como
mtodo predeterminado de movimiento para elementos nuevos en la composicin, seleccione Rutas de movimiento en la configuracin
predeterminada del diseo.
Aplique rutas de movimiento al objeto y cree una transicin tal y como lo hara 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 tringulos que apuntan en la direccin del movimiento del objeto.
Para controlar la duracin de una ruta de movimiento, aada un fotograma clave de ubicacin a la transicin de ubicacin en la lnea de tiempo.
De esta forma, se crearn dos rutas independientes con velocidad tambin independiente. Asimismo, puede aadir aceleracin a la ruta para
controlar la aceleracin y desaceleracin real del movimiento.
Marque la casilla de verificacin Orientacin automtica para rotar automticamente 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 composicin. Asigne una accin a un evento de barrido, de igual forma que lo hara para un clic, doble clic, etc. con el
botn Agregar acciones para un elemento.
Saque partido a la rapidez de descarga incrementada y a la gestin de resultados ms sencilla con el alojamiento en tiempo de ejecucin que
ofrece Adobe a travs de los servidores de Akamai. Desactive esta opcin si el contenido se debe ejecutar sin conexin o si prefiere utilizar su
propio alojamiento.
Plantillas
Ahora podr cargar, guardar y volver a utilizar las plantillas que se encuentran en una galera de plantillas. De esta forma, podr cargar una
composicin 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 galera de plantillas
puede importar, eliminar y crear una composicin 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 imgenes, texto, smbolos, fuentes y cualquier modificacin personalizada que haya efectuado en la
composicin actual. Puede cargar plantillas desde el cargador de plantillas visuales.
Explorar los paneles Elementos y Lnea de tiempo
Ahora, se puede desplazar por los paneles Elementos y Lnea de tiempo para mostrar los elementos seleccionados si el panel se est moviendo.
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 cdigo de colores de la lnea de tiempo
Si hace clic en la asignacin de color de un elemento, tanto en el panel Elementos como en el panel Lnea de tiempo, podr asignar un color, lo
que facilitar la segmentacin de color de los objetos. De esta forma, podr cambiar la asignacin de color en las transiciones de elementos y de
lnea 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 aparicin en Edge Animate.
Las siguientes funciones presentan compatibilidad con filtros de CSS:
Invertir
Rotacin de matiz
Contraste
Saturacin
33
Sepia
Escala de grises
Desenfoque
Sombra
Todas ellas estn 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 estn 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 caracterstica de
degradados permite hacer lo siguiente:
Aadir varios delimitadores de degradado a los elementos.
Crear interpolaciones de animacin para colores y posiciones de degradado.
Repetir degradados de forma infinita en funcin 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 diseo elptico hasta la esquina ms alejada, el circular hasta la esquina
ms alejada, etc.
Controlar la posicin de degradado en grados de rotacin en el caso de la degradacin lineal y por porcentajes x/y en el de la radial.
Tipografa avanzada con Edge Web Fonts
Ahora puede examinar la biblioteca Edge Web Fonts de Edge Animate y aplicar las fuentes de la coleccin 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 edicin 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 fcilmente 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.
Atenuacin de elementos bloqueados
Los elementos bloqueados aparecen ahora atenuados tanto en el Panel Elementos como en el panel Lnea de tiempo para distinguirlos con
claridad frente a los objetos editables.
Precargadores de Iframe fciles 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 ejecucin de la composicin, lo que permite
disfrutar de una carga previa normal en la publicidad.
Conservacin del modo de edicin de smbolos durante la vista previa
La composicin de Animate ya no regresa al escenario al usar la vista previa en el navegador. Animate mantendr el estado de edicin actual en
cada vista previa.
Ir al principio
Edge Animate 1.0.1

Esta actualizacin incluye la posibilidad de informar sobre datos annimos relativos al uso de funciones especficas en Edge
Animate. Est dirigido a comprender mejor las funciones ms relevantes para los usuarios de Edge Animate. Con esta
informacin, el equipo de Edge Animate podr tomar decisiones con mayor conocimiento de causa que le permitirn priorizar y
centrarse en caractersticas particulares. El equipo de Edge Animate colabor estrechamente con sus usuarios durante el
desarrollo de la versin 1.0. Sus comentarios influyeron enormemente en el producto. Gracias a esta actualizacin podr
comunicarse con Adobe a travs de sus acciones en la aplicacin.
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 correccin en iOS 6 para mltiples composiciones incrustadas a travs de iframe y Adobe DPS.
Se han aplicado varios parches para mejorar la estabilidad de la aplicacin.
34
35
Notas de la versin | Edge Animate CC

Le damos la bienvenida a Adobe Edge Animate CC
Novedades de Edge Animate CC (3.0)

Instalar el software
Requisitos mnimos del sistema
Problemas conocidos
Recursos tcnicos
Otros recursos
Ir al principio
Novedades de Edge Animate CC (3.0)
Audio
Hgase or con sus proyectos de Animate gracias a la nueva posibilidad de aadir audio a sus composiciones. Mediante las nuevas API de audio
Para obtener ms informacin sobre cmo comenzar a trabajar con audio, consulte Aadir audio a las animaciones.
Escala con respuesta
Realizar proyectos interactivos de Animate ahora es tan sencillo como hacer clic en un botn. Cuando est activada, esta opcin le permite
ampliar o reducir su escenario de Animate mientras se mantiene la proporcin de aspecto segn las dimensiones de la ventana del navegador o
del contenedor principal.
Carga de scripts
Aada 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 lnea para guardarlas con la composicin y empaquetarlas con archivos publicados.
Escala + Rotacin del trazado de movimiento
Se han realizado mejoras en la edicin de rutas de movimiento que le permiten escalar fcilmente el tamao de una ruta de movimiento y girarla
con respecto al origen de la transformacin. Coloque el ratn sobre un trazado de movimiento para ver los nuevos comandos o pulse H para
cerrar la capa.
Existen nuevos comandos de distribucin en el men de modificacin para ayudarle con la alineacin y la ubicacin de los elementos del
escenario. Seleccione dos o ms objetos y, a continuacin, Modificar > Distribuir en el men para acceder a varias opciones de distribucin.
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 verificacin en las propiedades del escenario.
Ahora tiene la opcin al publicar un archivo OAM de guardar la imagen de pster 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 diseo de su documento. Nota:
Cuando utilice esta opcin en una aplicacin que admite archivos OAM, el archivo colocado aparecer en blanco debido a la transparencia.
Actualmente, esta funcin no es compatible con publicaciones en PDF cuando se publica en DPS. Para utilizar una imagen de pster
transparente, seleccione los tipos de publicacin automtica, PNG o JPG.
Publicacin de CDN para OAM
Benefciese de una carga de proyectos de Animate ms rpida gracias al almacenamiento en cach, ahora disponible con la publicacin de OAM.
Active esta opcin si est creando contenido de Animate para uso en lnea (Muse, Dreamweaver o plugin de carga de terceros).
Nuevas lecciones
Estn disponibles dos nuevas lecciones (diseo y audio interactivos) que sirven de introduccin para las caractersticas disponibles en esta
versin. Consulte Introduccin en la pantalla de bienvenida o en Ventana > Lecciones para ver el panel de lecciones.
Animate ahora utiliza la versin 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 cdigo 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 caractersticas introducidas en las versiones anteriores.
36
Ir al principio
Instalar el software
1. Vaya a la pgina del producto Edge Animate en Adobe Creative Cloud en https://creative.adobe.com/es/products/animate
2. Haga clic en el botn Descargar.
3. Indique su ID de Adobe y las credenciales y haga clic en el botn Iniciar sesin si as se le indica.
4. Si an no dispone de una cuenta de Adobe Creative Cloud, haga clic en el botn Introduccin y seleccione una oferta de Creative Cloud.
Nota: Edge Animate se encuentra disponible en todas las ofertas de Creative Cloud, incluso en la suscripcin gratuita de la versin de
prueba.
5. La aplicacin de escritorio de Creative Cloud se iniciar, y descargar e instalar Edge Animate automticamente. Nota: Es posible que se
le pida introducir la contrasea de administrador de su ordenador.
6. Al final de la instalacin, haga clic en el vnculo de inicio de la aplicacin.
Ir al principio
Requisitos mnimos 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 instalacin
Pantalla de 1280 x 800 con tarjeta de vdeo de 16 bits
Se requiere conexin 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 instalacin
Pantalla de 1280 x 800 con tarjeta de vdeo de 16 bits
Se requiere conexin 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 composicin abierta de Animate. Para evitar el acceso a los archivos confidenciales a travs
del servidor de Animate, le recomendamos guardar las composiciones de Animate en su propia carpeta.
Ir al principio
Recursos tcnicos
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 lnea
Para obtener una ayuda completa, adems de inspiracin, 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

38
Utilizacin de la herramienta Pin, los fotogramas y las transiciones en

las animaciones
Creacin de animaciones con fotogramas clave
Copiar transiciones
Ms informacin
Puede crear animaciones en Edge Animate utilizando mtodos de animacin tradicionales basados en fotogramas clave. Edge Animate tambin
proporciona un mtodo alternativo basado en la herramienta Pin para crear fotogramas clave.
Ir al principio
La herramienta Pin fija los valores de las propiedades de los elementos en un punto del tiempo en la lnea de tiempo. Cuando se realiza una
edicin, la herramienta Pin fija el valor actual mientras se cambian los valores de las propiedades en el cabezal de reproduccin. Edge Animate
genera los fotogramas clave y las transiciones al cabezal de reproduccin 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 lnea de tiempo.
2. Haga clic en el botn Alternar pin en el panel Lnea de tiempo.
Alternar pin
Para activar el pin, tambin puede hacer doble clic en el cabezal de reproduccin o presionar la P del teclado.
3. Arrastre el pin de la lnea de tiempo al punto de la lnea 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 patrn tipo "chevron" apunta al cabezal de reproduccin, los cambios se establecen en la ubicacin del cabezal de
reproduccin.
Adobe Edge Animate aade automticamente fotogramas clave y transiciones entre el cabezal de reproduccin y las posiciones del pin. No
tiene que aadir manualmente fotogramas clave o volver a colocar el cabezal de reproduccin en la lnea de tiempo.
Para ver una leccin sobre la animacin con la herramienta Pin:
2. Haga clic en Animar II: El pin.
Los fotogramas clave especifican el valor de una propiedad en un punto del tiempo. Cuando la animacin se lleva a cabo con fotogramas clave,
se aade un fotograma clave a dos o ms ubicaciones en la lnea 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 reproduccin a la ubicacin en la lnea de tiempo en la que desea que comience la animacin.
3. En el panel de propiedades del elemento, haga clic en el botn Aadir fotograma clave (botn en forma de rombo) que hay junto a la
propiedad que desea cambiar con el tiempo.
Adicin de fotogramas clave
4. Mueva el cabezal de reproduccin a otra ubicacin en la lnea de tiempo y cambie el valor de la propiedad.
Edge aade automticamente un fotograma clave final y crea la transicin.
Para ver una leccin sobre la animacin con fotogramas clave:
2. Haga clic en Animar I: Fotogramas clave.
Ir al principio

1. Mueva el cabezal de reproduccin a un fotograma clave (icono en forma de rombo) en la lnea de tiempo.
2. Cambie el valor de la propiedad editable en el lado izquierdo del panel Lnea de tiempo.
Ir al principio
Copiar transiciones
Puede copiar una transicin y pegarla en la lnea de tiempo del mismo elemento o de otro elemento.
1. Haga clic en una transicin en la lnea de tiempo para seleccionarla. Cuando se selecciona esta opcin, aparece un borde de color naranja
alrededor de la barra de transicin en la lnea de tiempo.
2. Presione Ctrl+C (Windows) o Cmd+C (Macintosh) para copiar la transicin en el Portapapeles.
Tambin puede cortar la transicin desde el elemento con Ctrl+X (Windows) o Cmd+X (Macintosh).
3. Si desea copiar la transicin a otro elemento, seleccione el elemento en el escenario.
4. Mueva el cabezal de reproduccin a la ubicacin en la que desea que comience la transicin copiada.
5. Presione Ctrl+V (Windows) o Cmd+V (Macintosh) para pegar la transicin en la lnea de tiempo.
Ir al principio
Ms informacin
Creacin e importacin de activos
Creacin de animacin

40
Aadir interactividad con JavaScript

Definir acciones
Ms informacin
Se puede utilizar JavaScript para aadir interactividad a las composiciones. Puede definir acciones para cada elemento mediante un cdigo
integrado en el editor de cdigo y la biblioteca de fragmentos. Las acciones son funciones que se pueden aadir para manejar un solo evento.
Ir al principio
Definir acciones
1. En la lnea de tiempo, haga clic en el botn Abrir acciones en el lado izquierdo del nombre de un smbolo o elemento.
Tambin puede hacer clic en el botn Abrir acciones en el lado izquierdo del nombre de un smbolo o elemento en el panel Elementos.
2. Seleccione un evento para activar la accin.
El editor de acciones aparece con un editor de cdigo y una lista de fragmentos de cdigo en la parte derecha.
3. Escriba el cdigo para el evento.
Puede escribir su propio cdigo o utilizar los fragmentos de cdigo para aadir funciones comunes. Para obtener ms informacin de
referencia, consulte la Gua de la API de Edge Animate.
Ir al principio
El editor de cdigo ofrece una visin completa del cdigo JavaScript de su proyecto. Tambin le permite ver el cdigo sin procesar para el archivo
de acciones.
1. Seleccione Ventana > Cdigo.
Tambin puede presionar Ctrl+E (Windows) o Cmd+E (Macintosh).
2. Para seleccionar un evento o un elemento, haga clic en el icono de signo ms (+) situado a la izquierda del escenario en la barra lateral
izquierda.
3. Para editar el archivo completo de JavaScript, haga clic en el botn Cdigo completo situado en la parte superior derecha del panel.
Ir al principio
Puede insertar las etiquetas en la lnea de tiempo y, a continuacin, utilizarlas como referencias de tiempo en parmetros de funcin. Puede
utilizar un nombre de etiqueta como un parmetro para cualquier funcin de reproduccin que espere un valor de cdigo de tiempo. Las etiquetas
permiten crear acciones como reproducir o buscar un punto en la lnea de tiempo.
41
Para aadir una etiqueta:

2. Haga clic en el botn Insertar etiqueta en la esquina superior derecha de la lnea de tiempo.
Tambin puede presionar Ctrl+L (Windows) o Cmd+L (Macintosh).

3. Especifique un nombre para la etiqueta.
4. Al definir una accin para un elemento en el editor de cdigo, utilice el nombre de la etiqueta como un parmetro de funciones de
reproduccin que espere un valor de cdigo de tiempo.
Por ejemplo, en lugar de sym.play(1000), puede utilizar sym.play('mylabel').
Ir al principio

Puede colocar activadores en la lnea de tiempo para ejecutar cdigo JavaScript en un punto del tiempo.
Para aadir un activador:
2. Haga clic en el botn Insertar activador en la esquina superior derecha de la lnea de tiempo.
Tambin puede presionar Ctrl+T (Windows) o Cmd+T (Macintosh).

Aparece el panel Cdigo.
3. Defina la accin que se realizar en el activador. Para obtener ms informacin de referencia, consulte la Gua de la API de Edge Animate.
Puede modificar el cdigo para el activador en cualquier momento haciendo doble clic en el icono de activador en la lnea de tiempo.
Ir al principio
Ms informacin
Gua de la API de Edge Animate

42
Publicar el contenido
Optimizar el contenido para la Web
Publicar como paquete de implementacin de Animate (.oam)
Publicar en Apple iBooks Author
Ms informacin
Para publicar el contenido:
1. Especifique la configuracin de la publicacin. Consulte a continuacin para obtener ms informacin.
2. Seleccione Archivo > Publicar.
Ir al principio

1. Seleccione Archivo > Configuracin de publicacin.
2. En el cuadro de dilogo Configuracin de publicacin, asegrese de que Web est seleccionado como el destino de publicacin.
3. Anote o cambie el directorio de destino.
4. Establezca la preferencia Frameworks va CDN.
Seleccione esta opcin para descargar los activos jQuery asociados de la composicin de una red de entrega de contenido (CDN). Deje la
opcin sin seleccionar para empaquetar los activos con la composicin.
5. Establezca la preferencia Publicar contenido como cdigo HTML esttico.
Seleccione esta opcin para generar formato HTML en lugar de insertar contenido de Edge Animate en el documento a travs de
JavaScript. Esta opcin mejora el uso y la accesibilidad de SEO en algunas plataformas.
6. Haga clic en Guardar para guardar la configuracin de la publicacin, o bien haga clic en Publicar.
Ir al principio
Seleccione esta opcin de exportacin para crear un archivo de paquete del proyecto para su uso en otras herramientas de Adobe. Las
siguientes herramientas admiten paquetes de implementacin de Animate: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver
CS6 y Muse.
2. En el cuadro de dilogo Configuracin de publicacin, asegrese de que est seleccionado Paquete de implementacin de Animate como
destino de publicacin.
4. (Opcional) Especifique una imagen de pster.
Ir al principio

2. En el cuadro de dilogo Configuracin de publicacin, asegrese de iBook/OS X est seleccionado como destino de publicacin.
Ir al principio
Ms informacin
Mejore sus publicaciones de DPS con animaciones HTML mediante Adobe Edge
43
44
Novedades de Edge Animate 1.5

Importante: Adobe ya no admite Edge Animate 1.5 y no se recomienda su uso. Esta versin no incluye funciones importantes, como los trazados
de movimiento y la compatibilidad de audio, introducidos en versiones ms 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).
Aplicacin de degradados a objetos

Actualizaciones del panel de color
Uso de filtros CSS
Aprovechamiento de Edge Web Fonts para lograr una mejor tipografa
Modo de edicin de smbolos mantenido durante la vista previa
Fcil identificacin de los elementos bloqueados y desbloqueados
Ir al principio
Aplicacin de degradados a objetos
El panel de degradado que se introduce en esta versin le permite aadir degradados a los elementos de Edge Animate. Puede crear degradados
tanto lineales como radiales mediante las opciones del panel.
Adems, puede animar degradados. Sin embargo, no puede realizar animaciones entre un degradado radial y un degradado lineal.
Tutorial de vdeo
Aplicacin 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 ms alejado o el crculo hacia el lado
ms alejado, entre otras, mantenga pulsado el botn de degradado radial. Seleccione la opcin que desea aplicar.
Nota: Los degradados no son compatibles con la versin 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. Detencin de color F. Aadir
muestras de degradado G. Repetir patrn H. Botones de formato de color I. Regulador de luminosidad J. Regulador de color K. Regulador de
45
opacidad L. Aadir muestra de color M. Muestra de color N. Color seleccionado O. Color original P. Botn de degradado radial Q. Botn
Degradado R. Botn de degradado lineal
Para ver un tutorial de vdeo 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. Opcin para escribir cdigo de color B. Botn Color C. Opcin para quitar el color D. Muestra de color aadida E. Opcin para aadir 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
cdigo de color
Ir al principio
Uso de filtros CSS

Conocimiento de los efectos de los filtros CSS
Los filtros son una herramienta eficaz que
los autores web pueden utilizar para
conseguir interesantes efectos visuales. En
este artculo trataremos la historia de los
efectos de filtrado, para qu sirven y cmo
usarlos. ... Leer ms
de Alex Danilo
Contribuya a
Adobe Community Help
http://www.html5rocks.com/en/tutorials/filter...
Las opciones del panel Filtros le ayudan a aplicar rpidamente filtros CSS a smbolos, texto, etiquetas div e imgenes. Anteriormente, solo poda
aplicar estos efectos mediante un editor de imgenes.
Actualmente, los filtros CSS son compatibles con las versiones ms 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 segn sea preciso.
Para quitar un filtro del elemento, haga clic en el botn x correspondiente.
46
Para ver un tutorial de vdeo sobre el uso de filtros CSS en Edge Animate, haga clic aqu.
Aprovechamiento de Edge Web Fonts para lograr una mejor tipografa
Ir al principio
Edge Animate ayuda a aprovechar el potencial de la propiedad @font-face de CSS al proporcionarle un surtido de fuentes web para sus diseos.
Edge Web Fonts le permite llevar la experiencia tipogrfica 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 coleccin de fuentes de cdigo abierto.
Edge Web Fonts ofrece fuentes gratuitas que no requieren ninguna cuenta ni ningn kit de configuracin, 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 botn + situado junto al men de fuentes para ver el dilogo Edge Web Fonts. Seleccione la fuente
que desea utilizar de la lista y haga clic en Aadir fuente.
Puede filtrar las fuentes del panel segn 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 botn correspondiente. Para obtener ms informacin, consulte Uso de fuentes Web.
Tutorial de vdeo
Uso de fuentes Web en Edge Animate
Las fuentes seleccionadas y aplicadas se aaden 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 razn, no se puede aplicar la fuente seleccionada, se utilizarn las fuentes de
repuesto en funcin del orden en el que se enumeren.
47
Ir al principio
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
pgina web.
Para obtener ms informacin sobre el uso de precargadores, consulte API de JavaScript en Adobe Edge Animate.
Modo de edicin de smbolos mantenido durante la vista previa
Ir al principio
Animate mantiene su estado de edicin actual en cada vista previa. La composicin no vuelve al escenario cuando se realiza la vista previa en un
navegador.
Fcil identificacin de los elementos bloqueados y desbloqueados
Ir al principio
Los elementos bloqueados aparecen atenuados en la lnea de tiempo y en el panel Elementos, lo que le permite distinguirlos fcilmente de los
elementos desbloqueados.

48
Lecciones de aplicaciones
El panel Lecciones de Adobe Edge Animate proporciona tutoriales prcticos con activos de ejemplo que puede seguir dentro de la herramienta.
Panel Lecciones
Puede acceder al panel Lecciones desde la ficha Introduccin en la pantalla de bienvenida o en el men Ventana (Ventana > Lecciones).
Lecciones
49

50
Navegadores antiguos de destino

Compatibilidad de los navegadores antiguos con imgenes de pster
Compatibilidad de los navegadores antiguos con Google Chrome Frame
Adobe Edge Animate utiliza estndares web como HTML5, CSS3 y JavaScript para definir la animacin y la interactividad. Es posible que parte
de la funcionalidad no funcione o no se muestre en navegadores antiguos que no admitan estos estndares. An puede utilizar navegadores
antiguos como destino mediante la creacin de imgenes de pster. Tambin puede utilizar la extensin Google Chrome Frame para Internet
Explorer para los usuarios de Windows.
Ir al principio
Defina un estado de repuesto de su proyecto en forma de una imagen de pster o sus propias ilustraciones.
Cuando los visitantes vean el contenido en un navegador web heredado, se mostrar la imagen de pster.
1. En el panel Lnea de tiempo, coloque el cabezal de reproduccin 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 botn Capturar escenario como imagen de pster (icono de la cmara).
4. En el cuadro de dilogo Capturar una imagen de pster que aparece, haga clic en Capturar.
5. En el panel Propiedades, haga clic en el botn Editar de la propiedad del escenario de nivel inferior.
6. Haga clic en el botn 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
Google Chrome Frame es una extensin que puede instalarse en versiones anteriores de Internet Explorer. Habilita tecnologas HTML5 como las
que usa Edge Animate.
Consulte tambin Enable open web technologies in Internet Explorer (Habilitar tecnologas web abiertas en Internet Explorer) en el sitio web de
Google Developers.
3. Seleccione la opcin Utilizar Google Frame para IE 6, 7 y 8.
4. Acepte la opcin predeterminada del programa de instalacin de Chrome Frame "Sin mensajes".
5. Haga clic en Guardar para guardar la configuracin de la publicacin y volver a la composicin.
51
52
Crear animaciones anidadas con smbolos

Creacin de animaciones reutilizables con smbolos
Crear un smbolo
Exportar un smbolo
Importar un smbolo
Ms informacin
Cree animaciones anidadas con lneas de tiempo independientes y funciones interactivas. Los smbolos son elementos que contienen su propia
lnea de tiempo. Puede animar un smbolo como un elemento normal en el escenario; por ejemplo, puede moverlo de izquierda a derecha.
Tambin puede animar los elementos individuales que forman el smbolo. En otras palabras, puede crear una animacin dentro de otra animacin.
Los smbolos se pueden reutilizar y pueden controlarse con API y fragmentos de cdigo creados previamente.
Para ver una leccin sobre la animacin con smbolos:
2. Haga clic en Reutilizar.
Ir al principio
Crear un smbolo
1. En el panel Elementos, seleccione uno o varios elementos. La seleccin de varios elementos crea un nico smbolo de ellos.
Nota: Tambin puede seleccionar smbolos para crear smbolos anidados.
2. Haga clic con el botn derecho del ratn y seleccione Convertir en smbolo en el men contextual.
3. En el cuadro de dilogo Crear smbolo, defina el nombre de smbolo y haga clic en Aceptar.
Ir al principio

1. En el panel Elementos, haga clic con el botn derecho del ratn en el smbolo y seleccione Editar smbolo.
Tambin puede hacer clic con el botn derecho del ratn en el smbolo en el escenario.
2. Anime uno o varios de los elementos que componen el smbolo.
3. Para salir del modo de edicin de smbolos, haga clic en la palabra Escenario que hay en la parte superior de la ventana de vista previa.
Ir al principio
Exportar un smbolo
Puede copiar y pegar un smbolo de un proyecto a otro.
Tambin puede exportar los smbolos y sus propiedades como un solo archivo (.easym) que puede compartir e importar a otra composicin.
1. Haga clic con el botn derecho del ratn en el smbolo en el panel Elementos y seleccione Copiar.
2. Cambie a otro proyecto.
3. Haga clic con el botn derecho del ratn en el elemento del escenario en el panel de elementos y seleccione Pegar.
1. Seleccione los smbolos que desee exportar en el escenario o en el panel Biblioteca.
2. Haga clic con el botn derecho del ratn y seleccione Exportar smbolo.
Ir al principio
Importar un smbolo
1. Haga clic en el botn de signo ms (+) situado junto a la pestaa Smbolos de la biblioteca.
2. Busque y seleccione el archivo de smbolos (.easym) que se debe importar.
Ir al principio
53

Se puede utilizar JavaScript para controlar los smbolos. Para obtener ms informacin, consulte:
Adicin de interactividad con JavaScript
Trabajo con smbolos en la Gua de la API de Edge Animate
Ir al principio
Ms informacin

54
Uso de Web Fonts

Puede aplicar Edge Web Fonts al texto directamente desde Edge Animate. Cuando selecciona una fuente desde el dilogo Edge Web Fonts, el
cdigo correspondiente para trasladar la fuente desde el servidor se incorpora automticamente al cdigo.
Edge Animate tambin 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 opcin Texto del panel Propiedades, haga clic en el botn + 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 segn 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 botn correspondiente.
4. Haga clic en Aadir fuente.
Las fuentes seleccionadas y aplicadas se aaden 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 utilizarn las fuentes de repuesto para la
visualizacin. Las fuentes se eligen en el orden en que aparecen en la lista.
55

56
Animar HTML existente

Puede animar y aadir interactividad a los elementos de pginas HTML existentes. Debido a que el cdigo de animacin creado por Edge
Animate se almacena en un archivo independiente, se conserva la integridad de la pgina HTML.
1. Abra una pgina HTML existente en Edge (Archivo > Abrir).
Edge Animate solo abre cdigo compatible con los estndares. 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 extrao, pruebe a ejecutar la
pgina HTML a travs de un validador HTML.
2. Seleccione un elemento de la pgina en el escenario.
Tambin puede seleccionar un elemento de la pgina en el panel Elementos, que muestra el DOM (Modelo de objetos de documento) de la
pgina.
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 smbolos y no
tienen todas las propiedades de otros elementos. Si se producen errores o detecta un comportamiento extrao, pruebe a ejecutar la pgina
HTML a travs de un validador HTML.
Tambin puede aadir elementos como divs, texto e importar imgenes en Edge y, a continuacin, animar y aadir interactividad a dichos
elementos.

57
Notas de la versin
Notas de la versin de Edge Animate 1.5
Notas de la versin de Edge Code
58
Composicin y diseo
10.12.2012
Cree diseos de pginas web interactivos fluidos

Tutorial de vdeo ()
59
Navegadores antiguos de destino

Adobe Edge Animate utiliza estndares web como HTML5, CSS3 y JavaScript para definir la animacin y la interactividad. Es posible que parte
de la funcionalidad no funcione o no se muestre en navegadores antiguos que no admitan estos estndares. An puede utilizar navegadores
antiguos como destino mediante la creacin de imgenes de pster. Tambin puede utilizar la extensin Google Chrome Frame para Internet
Explorer para los usuarios de Windows.
Ir al principio
Defina un estado de repuesto de su proyecto en forma de una imagen de pster o sus propias ilustraciones.
Cuando los visitantes vean el contenido en un navegador web heredado, se mostrar la imagen de pster.
1. En el panel Lnea de tiempo, coloque el cabezal de reproduccin 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 botn Capturar escenario como imagen de pster (icono de la cmara).
4. En el cuadro de dilogo Capturar una imagen de pster que aparece, haga clic en Capturar.
5. En el panel Propiedades, haga clic en el botn Editar de la propiedad del escenario de nivel inferior.
6. Haga clic en el botn 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
Google Chrome Frame es una extensin que puede instalarse en versiones anteriores de Internet Explorer. Habilita tecnologas HTML5 como las
que usa Edge Animate.
Consulte tambin Enable open web technologies in Internet Explorer (Habilitar tecnologas web abiertas en Internet Explorer) en el sitio web de
Google Developers.
3. Seleccione la opcin Utilizar Google Frame para IE 6, 7 y 8.
4. Acepte la opcin predeterminada del programa de instalacin de Chrome Frame "Sin mensajes".
5. Haga clic en Guardar para guardar la configuracin de la publicacin y volver a la composicin.
60
61
Integracin y publicacin
API de tiempo de ejecucin de Adobe Edge Animate
Artculo (12.12.2012)
API de Twitter y Edge Animate

Artculo (12.12.2012)
Tutorial (12.12.2012)
Utilizacin de archivos de Animate en InDesign o Muse

Complemente su sitio de WordPress con Edge Animate

Tutorial de vdeo ()
Crear una aplicacin PhoneGap Build con Edge Animate

Tutorial de vdeo ()
Utilizacin del archivo de Edge Animate en InDesign o Muse

Ampliacin de Edge Animate con componentes web de terceros

Artculo (12.12.2012)
62
Publicar el contenido
Ms informacin
Para publicar el contenido:
1. Especifique la configuracin de la publicacin. Consulte a continuacin para obtener ms informacin.
2. Seleccione Archivo > Publicar.
Ir al principio

4. Establezca la preferencia Frameworks va CDN.
Seleccione esta opcin para descargar los activos jQuery asociados de la composicin de una red de entrega de contenido (CDN). Deje la
opcin sin seleccionar para empaquetar los activos con la composicin.
5. Establezca la preferencia Publicar contenido como cdigo HTML esttico.
Seleccione esta opcin para generar formato HTML en lugar de insertar contenido de Edge Animate en el documento a travs de
JavaScript. Esta opcin mejora el uso y la accesibilidad de SEO en algunas plataformas.
Ir al principio
Seleccione esta opcin de exportacin para crear un archivo de paquete del proyecto para su uso en otras herramientas de Adobe. Las
siguientes herramientas admiten paquetes de implementacin de Animate: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver
CS6 y Muse.
2. En el cuadro de dilogo Configuracin de publicacin, asegrese de que est seleccionado Paquete de implementacin de Animate como
destino de publicacin.
Ir al principio

2. En el cuadro de dilogo Configuracin de publicacin, asegrese de iBook/OS X est seleccionado como destino de publicacin.
Ir al principio
Ms informacin
63
64
Requisitos del sistema
65

Adobe Edge Animate CC 2015

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Adobe Edge Animate CC 2015

Transféré par

Droits d'auteur :

Formats disponibles

Ayuda de Adobe Edge Animate CC

Es posible que algunos vnculos redirijan a contenido en ingls.

Novedades de Edge Animate CC (versin 3.0; enero de 2014)

Escala con resp.

Opcin Escala con resp. en el panel Propiedades

Carga de scripts en la biblioteca

Archivo JS desde disco

Archivo JS desde URL

Mejoras del trazado de movimiento

Rotacin del trazado de movimiento

Ajuste del trazado de movimiento

Nuevos comandos de distribucin

Centrado del escenario

Centrado del escenario

Imagen de pster transparente para OAM

Publicacin con imagen de pster transparente

Opcin CDN para OAM

Opcin CDN para OAM

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Descarga de archivos de muestra

Descargas de muestra del sitio de Chris Gannon

Creacin de contenido e importacin de activos

Creacin de un proyecto e importacin de contenido (vdeo)

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

Aadir audio a las animaciones

Aadir audio a las composiciones

Aadir audio a las composiciones

Grupo de audio de la biblioteca

Opcin Aadir audio de la biblioteca

Audio en el panel Elementos.

Reproducir y controlar el audio

Opciones de control de audio en el panel Propiedades

Opciones de control de audio en la lnea de tiempo

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

Acciones de audio en el Editor de acciones

Ajuste del audio

Activacin del reproductor de audio predeterminado

Activacin del reproductor de audio predeterminado

Usar audio en dispositivos

Sugerencias y consideraciones de compatibilidad entre navegadores

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Uso de Web Fonts

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

Creacin de animaciones con la lnea de tiempo

Creacin de animaciones en Edge Animate

Aprovechamiento de las lneas de tiempo del smbolo independientes

Crear un logotipo animado

Utilizacin de la herramienta Pin, los fotogramas y las transiciones en

Crear animaciones con la herramienta Pin

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

Adicin de fotogramas clave

Editar fotogramas clave individuales

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Crear animaciones anidadas con smbolos

Animar los elementos de un smbolo

Controlar los smbolos con JavaScript

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Animar HTML existente

3. Anime el elemento. Consulte Crear animaciones.

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Aadir interactividad con JavaScript

Utilizar el editor de cdigo

Aadir etiquetas a la lnea de tiempo

Para aadir una etiqueta: