Aprenda a crear sitios web de Adobe Muse interactivos con animaciones y efectos de enrollado usando Edge Animate.

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.

Preparación de animaciones en Animate

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:

  1. Abra Animate. Aparecerá la ventana de introducción.

  2. Haga clic en Abrir archivo y, a continuación, busque y seleccione uno de los archivos de proyecto de ejemplo descargados, con la extensión de archivo .an. O bien, si lo prefiere, abra un archivo de Animate que haya creado.

    Adobe Muse le permite integrar las animaciones de Edge Animate.
    Haga clic en el vínculo Abrir archivo de la ventana Primeros pasos.

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

    Aparece el proyecto
    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.

    Opción Reproducción automática
    Seleccione la propiedad Reproducción automática para activar la reproducción automática.

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

    Cuadro delimitador azul
    Seleccione la imagen de fondo y elimínela.

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

    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.

  6. Seleccione Archivo > Guardar para guardar los cambios recientes.

  7. Seleccione Archivo > Configuración de publicación para abrir el cuadro de diálogo Configuración de publicación.

  8. En la columna de destino de publicación de la izquierda, anule la selección de la casilla Web y seleccione la opción del paquete de implementación de Animate.

  9. Haga clic en Guardar para guardar los cambios y cerrar el cuadro de diálogo Configuración de publicación.

  10. Seleccione Archivo > Publicar para publicar el proyecto.

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

  12. Copie el archivo .OAM y guárdelo en la carpeta del escritorio que contiene todas las demás imágenes y activos de sitio para el sitio web. Después de publicar la animación y guardar el archivo en la carpeta del sitio, vaya a la siguiente sección para colocar el contenido de Animate en una página.

Colocación de animaciones creadas con Animate en una página web de Muse

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

  1. Inicie Adobe Muse y abra el sitio que desea editar.

  2. En la vista Plan, haga doble clic en el nombre de la página a la que desea añadir la animación.

  3. Elija Archivo > Colocar... y, a continuación, busque y seleccione el archivo .OAM en la carpeta del sitio.

  4. Haga clic una vez en la página para colocar la animación.

    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.

  5. Utilice la herramienta Selección para colocar la animación en la ubicación deseada de la página. Tenga en cuenta que, aunque el fondo de la animación parece ser opaco en Muse, el fondo es transparente al previsualizar o publicar la página.

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

    La opción Volver a vincular actualiza el activo colocado para que coincida con el archivo de origen editado. Esta es la manera más sencilla de actualizar rápidamente la animación, en comparación con la eliminación y el reemplazo manuales de los archivos.

  7. Haga clic en el vínculo Publicar del panel de control. Elija las opciones que desee y haga clic en OK para publicar las actualizaciones del sitio.

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.

Incrustación de contenido multimedia para añadir animación al sitio

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

  2. Seleccione Archivo > Colocar. En el cuadro de diálogo Importar, navegue por la carpeta Kevins_Koffee_Kart y seleccione el archivo denominado logo.swf.

  3. Coloque el archivo SWF en la esquina superior izquierda de forma que coincida con la ubicación del archivo de imagen del logotipo existente.

  4. Cuando haya alineado la nueva ventana de SWF que acaba de colocar con el anterior logotipo estático, seleccione el logotipo estático y pulse la tecla Supr para eliminarlo.

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

Adición de efectos de desplazamiento a las animaciones

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.
Panel Efectos de desplazamiento
Configure la animación de Adobe Edge Animate para que empiece a reproducirse cuando la página se desplace hasta una ubicación específica o para que los fotogramas cambien cada vez que la página se desplaza hacia abajo hasta una distancia determinada (en píxeles).

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.

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

Ejemplo

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.
Las mismas posiciones clave y configuración de movimiento
Las brújulas ascienden hasta que la página se desplaza a su posición clave y, a continuación, permanecen en su sitio mientras la página continúa desplazándose hacia abajo.

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.

  1. 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.
Cambiar fotogramas cada 350 píxeles
Las brújulas de los laterales se han configurado para que cambien de fotograma cada 350 píxeles.

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.

  1. 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.
Cambiar fotogramas cada 400 píxeles
El archivo OAM central está configurado para cambiar de fotograma cada 400 píxeles.

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.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

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