Adición de contenido animado en 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:

Siga estos pasos para añadir la animación de a una página del sitio web de Muse:

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.

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:

1. 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.
2. 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.
3. Seleccione Archivo > Colocar y busque el archivo OAM en la carpeta del sitio para seleccionarlo.
4. 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.
5. 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.
  

6. 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.
7. 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:

1. 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.
2. 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.

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

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