Nota:
Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.
Adobe Edge Animate es una herramienta de diseño interactiva que permite crear contenido animado para sitios web con estándares web, como HTML5. Puede utilizar la intuitiva interfaz de línea de tiempo de Animate para diseñar animaciones atractivas con HTML5 que se reproduzcan cuando se vean en todos los navegadores de hoy en día.
Antes de animar contenido en Muse, puede realizar una serie de cambios para preparar el archivo Animate, con el objetivo de que se incorpore a Muse sin problemas. Lleve a cabo el procedimiento siguiente:
-
Haga clic en Abrir para abrir el archivo .an y cerrar el cuadro de diálogo Abrir. El proyecto aparecerá en el espacio de trabajo de Animate.
El proyecto de Animate se muestra en el escenario.
Las animaciones creadas con Animate se puede reproducir automáticamente (reproducción automática) o precisarán que el usuario haga clic en una imagen estática para reproducir la animación conforme se carga. El ejemplo de SkyScraper está configurado para reproducirse automáticamente y no requiere la interacción del usuario. Sin embargo, cuando la reproducción automática está desactivada, se muestra una imagen estática en la página hasta que se hace clic en la animación. Para ver un ejemplo de una animación sin reproducción automática, vaya a Animate Showcase.
Nota:
para controlar si una animación se reproduce inmediatamente, seleccione el escenario y, a continuación, active o desactive la casilla de verificación Reproducción automática en el panel Propiedades.
Seleccione la propiedad Reproducción automática para activar la reproducción automática.
-
Haga clic en la imagen de fondo para seleccionarla en el escenario. Cuando está seleccionada, aparece un cuadro delimitador azul y el panel Propiedades situado a la izquierda muestra las propiedades de la imagen (denominada Image2 en este ejemplo). Pulse la tecla Retroceso (Windows) o la tecla para eliminar (Mac) para quitar el archivo de imagen de fondo.
Seleccione la imagen de fondo y elimínela.
-
Con el escenario todavía seleccionado, haga clic en el trozo de color del escenario en el panel Propiedades y defina la opción de transparencia.
Establezca la propiedad de fondo del escenario en transparente.
Nota:
el contenido del escenario muestra un fondo blanco; no verá el fondo transparente en el escenario a menos que exporte o previsualice la animación.
-
Cierre Animate. Utilice el Explorador de Windows (o Finder de Mac OS) para buscar la carpeta del proyecto de Animate en la unidad de disco duro. Cuando termine de publicar el proyecto, aparecerá una carpeta llamada Animate Package. El archivo .OAM de la carpeta se utiliza para añadir contenido de Animate al sitio de Muse.
-
Nota:
a diferencia de la colocación de imágenes, no se puede hacer clic y arrastrar al colocar una animación de Animate para cambiar su tamaño. Si desea colocar el contenido con un tamaño distinto, actualice el proyecto de Edge y vuelva a publicar el archivo .OAM.
-
Seleccione Archivo > Vista previa de página en navegador para asegurarse de que la animación se muestra como se espera. Si desea realizar algún cambio, vuelva a Muse y cambie la posición de los elementos de página. Si observa el panel Activos, verá que el archivo .OAM aparece ahora como un activo. Las animaciones de Edge Animate se pueden volver a vincular y actualizar del mismo modo que cualquier otro activo del sitio.
Por ejemplo, si vuelve a Animate, puede abrir el proyecto y cambiarlo. Más tarde, cuando vuelva a publicar el archivo .OAM y reemplace la versión en la carpeta de su sitio, el panel Activos muestra el icono de vínculo no actualizado. Esto indica que el archivo original se ha editado desde que se colocó el activo en una página.
Para actualizar el archivo que ha colocado, haga clic con el botón derecho del ratón en el nombre del archivo .OAM en el panel Activos y elija Reenlazar.
Para obtener más información sobre la creación de contenido web con formato HTML5 y animaciones con Adobe Edge Animate, eche un vistazo a los recursos de Adobe Edge Animate. Para obtener más sugerencias sobre el uso de Muse, visite la página Ayuda y tutoriales de Muse para ver tutoriales, o bien la página Muse Events (Eventos de Muse), donde encontrará diversos seminarios web en directo y tutoriales grabados en vídeo.
-
En la vista Plan, haga doble clic en la miniatura de MasterFlash para abrirla y editarla en la vista Diseño. Tenga en cuenta que, al haber duplicado anteriormente la página maestra A, la imagen de logotipo estático aún está allí. Resulta útil usar la imagen estática para hacer coincidir la colocación del rectángulo de la animación. Sin embargo, asegúrese de que elimina la imagen de logotipo estático que ha colocado después de incrustar el elemento de medios enriquecidos.
-
Para revisar la forma en que aparece todo el sitio con los nuevos cambios realizados en la página principal, seleccione Archivo > Vista previa de sitio en navegador para probar la visualización del logotipo en diferentes páginas. Sin publicar el sitio, puede trabajar localmente en el equipo y después ver la vista previa del sitio en un navegador para hacer clic por las páginas en los elementos de navegación del sitio. Tenga en cuenta que la animación (archivo SWF) aparece una vez y luego se detiene en la página principal. Si hace clic en otras páginas, solo aparece el logotipo estático.
Nota:
si elige Archivo > Vista previa de sitio en navegador, la nueva ventana del navegador se cargará más rápido para mostrar la página principal, pero solo verá la vista previa de la página activa (página principal). Elija esta opción si desea comprobar una página del sitio, en lugar de todo el sitio web.
Con Adobe Muse podrá añadir animaciones creadas con Adobe Edge Animate a cualquier página web. Para empezar a usar la función de efectos de desplazamiento de Adobe Edge Animate, cree una animación específicamente con este objetivo.
En Adobe Muse podrá añadir efectos de desplazamiento a archivos OAM y se aplicarán a las animaciones colocadas en la línea de tiempo principal. Puede diseñar la animación de manera estratégica, de modo que, solo los elementos que desee mover cuando se desplace la página se encuentren en la línea de tiempo principal, en la que puede crear animaciones interactivas. Se sobreentiende que el resto de los elementos se deben colocar en las líneas de tiempo anidadas. Mientras los visitantes se desplazan por la página, la configuración de los efectos de desplazamiento solo controla la reproducción de elementos animados en la línea de tiempo principal.
Para obtener más información sobre los efectos de desplazamiento de Adobe Muse, consulte Efectos de desplazamiento.
Siga estos pasos para usar la ficha Proyección de diapositivas en el panel Efectos de desplazamiento:
- Exporte el archivo OAM de Animate y guárdelo en la carpeta del sitio. Para obtener más información sobre cómo exportar archivos OAM desde Animate, consulte Colocación de animaciones en Adobe Muse.
- Inicie Muse y haga doble clic en una página para abrirla en la vista Diseño. Asegúrese de que la página es lo suficientemente larga como para desplazarse por ella. Para ello, actualice la configuración de altura mínima en el cuadro de diálogo Propiedades de la página.
- Seleccione Archivo > Colocar y busque el archivo OAM en la carpeta del sitio para seleccionarlo.
- Abra el panel Efectos de desplazamiento. Haga clic en la ficha Adobe Edge Animate (cuarta ficha de la izquierda) para revisar la configuración de esta sección.
- Con el archivo OAM seleccionado, active la casilla de verificación de Edge Animate.

En la imagen anterior, la posición clave se ha configurado a 700 píxeles. Puede arrastrar el control con forma de T o introducir un valor distinto en el campo Posición clave para ajustarlo.
Después de configurar la posición clave, puede controlar la reproducción de la animación mediante dos opciones:
- Reproducción automática: si esta opción se encuentra seleccionada, la animación en la línea de tiempo principal empieza a reproducirse cuando el navegador se desplaza hasta la posición clave, independientemente del número de fotogramas en la línea de tiempo principal. La reproducción de la animación continúa hasta que la página se desplaza por encima de la posición clave.
- Cambiar fotogramas cada: si esta opción se encuentra seleccionada, la animación de la línea de tiempo principal avanza fotograma cada vez que el desplazamiento de la página sobrepasa un número determinado de píxeles. Por ejemplo, si crea una página con una altura de 3000 píxeles e introduce el número 10, la animación de la línea de tiempo principal se reproducirá a una velocidad de 1 fotograma por cada 10 píxeles de desplazamiento de la página. Si el usuario desplaza la página hacia abajo más rápidamente, la velocidad de la animación aumenta.
Nota:
la configuración de Efectos de desplazamiento no afecta a los objetos animados anidados dentro de la línea de tiempo principal o vinculados a ella en la composición de Animate. Por tanto, puede elegir entre un fondo estático o elementos de repetición anidados que se trasladan constantemente, independientemente de la interacción del usuario para desplazar la página.
- Tras seleccionar Configuración en la ficha Adobe Edge Animate del panel Efectos de desplazamiento, seleccione Archivo > Vista previa de página en navegador (o haga clic en el botón Vista previa). Pruebe la página desplazándose hacia arriba y hacia abajo para reproducir el contenido de la animación de Adobe Edge Animate añadido a la línea de tiempo principal.
- Si necesita realizar cambios, regrese a Muse (o haga clic en el botón Diseño) y actualice la configuración del panel Efectos de desplazamiento.
Este ejemplo muestra cómo controlar archivos OAM exportados desde Adobe Edge Animate utilizando efectos de desplazamiento. En este ejemplo, la página se rellena con un degradado vertical que empieza con un color turquesa claro para pasar al azul oscuro. Puede descargar el archivo de ejemplo desde ScrollEffects.com.
Una combinación de ajustes aplicados a las etiquetas Movimiento y Adobe Edge Animate crea este efecto animado.
Tres instancias del mismo archivo OAM se colocan horizontalmente en paralelo para crear una fila de brújulas animadas. Cuando ve el sitio de muestra en un navegador, las tres brújulas ascienden para mostrarse y después se mantienen en su lugar. Cada una de las tres brújulas parece girar a diferentes velocidades, pero es la configuración en el panel Efectos de desplazamiento, no la creación del archivo de Adobe Edge Animate, la que consigue este efecto.
Siga estos pasos para crear un efecto similar con tres archivos OAM:
- En la vista Diseño, seleccione Página > Propiedades de la página. Configure el campo de altura mínima a un valor mucho mayor. En el sitio de muestra, la altura mínima de la página está configurada a 7465 píxeles.
- Seleccione las tres instancias de la brújula en la página. En la ficha Movimiento del panel Efectos de desplazamiento, puede ver que los tres archivos OAM tienen la misma configuración de movimiento y posición clave, ya que se muestran todos los valores.

Si realiza la vista previa de la muestra en un navegador, verá los tres elementos OAM saltar al unísono y mantenerse en fila como si estuvieran fijos.
- Haga clic lejos de las brújulas para anular la selección de las tres y, a continuación, seleccione solo la brújula de la izquierda. Mantenga pulsada la tecla Mayús mientras hace clic en la brújula de la derecha para seleccionar ambas. Abra la ficha Adobe Edge Animate del panel Efectos de desplazamiento y revise la configuración.

Las brújulas de los laterales están configuradas para repetirse a lo largo de la animación de la línea de tiempo y avanzar al siguiente fotograma cada vez que la página se desplaza hacia abajo hasta 350 píxeles.
- Anule la selección de las dos brújulas externas. Seleccione la brújula central y compruebe nuevamente en la ficha Adobe Edge Animate que el campo Cambiar fotogramas cada está configurado a 400 píxeles. Esta configuración hace que la animación central se desplace más despacio que las dos brújulas externas.

Puede crear interesantes efectos de animación en Adobe Edge Animate variando la velocidad de varias animaciones en relación con la velocidad de desplazamiento de la página. Por ejemplo, puede crear un banco de peces, un cielo gris con nubes desplazándose u otros efectos añadiendo varias repeticiones del mismo archivo OAM con diferentes configuraciones de efectos de desplazamiento.