Aprenda a aplicar efectos de movimiento y de desplazamiento con opacidad en los elementos de página de Adobe Muse.

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.

Aplicación de efectos de desplazamiento a los elementos de página

El panel Efectos de desplazamiento contiene cuatro etiquetas diferentes para controlar el movimiento, la opacidad, widgets de presentaciones y el contenido de Adobe Edge Animate en función del modo de desplazamiento de la página. Cuando los efectos de desplazamiento se aplican combinados, o cuando también existen elementos fijos, con la anchura configurada al 100 % o dispuestos unos delante de otros utilizando el panel Capas, puede crear una gran variedad de efectos de lo más persuasivos.

Aplicación de efectos de desplazamiento de movimiento utilizando el panel Efectos de desplazamiento

La interfaz del panel Efectos de desplazamiento es similar a la del panel de efectos de desplazamiento de Relleno de navegador y relleno de fondo. Siga estos pasos para aplicar efectos de desplazamiento a un elemento de página empleando la ficha Movimiento del panel Efectos de desplazamiento:

  1. En Muse, cambie a la vista Diseño y seleccione Página > Propiedades de la página
  2. Defina el valor Altura mínima en un mínimo de 2000 píxeles para asegurarse de que la página es lo suficientemente larga como para desplazarse. 
  3. Haga clic en OK para guardar los cambios y cierre el cuadro de diálogo de Propiedades de la página.
  4. En la vista Diseño, dibuje un rectángulo o un marco de texto en la página.
  5. Utilice la ficha Relleno en el menú Relleno para añadir una imagen de fondo con o sin mosaico. O bien seleccione un color de relleno uniforme o de degradado.
  6. Seleccione Ventana > Efectos de desplazamiento para abrir el panel Efectos de desplazamiento.
Abra el panel Efectos de desplazamiento para acceder a la configuración de efectos de desplazamiento.
Abra el panel Efectos de desplazamiento para acceder a la configuración de efectos de desplazamiento.

  1. Activación de efectos de desplazamiento: en el panel Efectos de desplazamiento, se mostrará la ficha Movimiento (situada a la izquierda). Con el elemento de la página seleccionado, active la casilla de verificación Movimiento.

    Sugerencia: observe que la activación de la casilla de verificación de Movimiento añade un control con forma de T al elemento que se extiende por el borde superior. El control con forma de T representa la posición clave aplicada del efecto de desplazamiento aplicado al elemento. El efecto de desplazamiento comienza a tener efecto cuando un visitante alcanza la posición clave mientras realiza el desplazamiento.

    El control con forma de T aparece sobre el elemento, de forma predeterminada. Sin embargo, puede hacer clic y arrastrar el control para extenderlo hacia arriba o hacia abajo y alinearlo con el borde superior del elemento que está controlando, o arrastrarlo hacia abajo para colocarlo bajo el elemento.

  2. Colocación del control con forma de T para definir la posición clave: arrastre el control con forma de T para definir la posición clave. Esto permite establecer el movimiento que se producirá antes y después de que la página desplazada se encuentre con la parte superior del control con forma de T.

    De forma alternativa, puede introducir un valor numérico en el campo Posición clave en mitad del panel Efectos de desplazamiento con la ficha Movimiento activa. En la imagen anterior, la posición clave se ha configurado a 200 píxeles. 

    La ubicación del control con forma de T representa la posición clave del elemento. Cuando la página se desplaza verticalmente, la configuración de la sección Movimiento inicial se aplica de forma que la posición del elemento coincide con su ubicación, tal y como se muestra en la vista Diseño.

    Cuando el usuario se desplaza por la página o hace clic en un vínculo de anclaje para saltar más allá de la posición clave del elemento, se aplica la configuración de la sección Movimiento final.

    La sección Movimiento inicial incluye un conjunto de flechas de dirección vertical y horizontal, y opciones de velocidad.

  3. Configuración de la dirección vertical de Movimiento inicial: elija una dirección vertical (hacia arriba o hacia abajo) haciendo clic en los botones verticales. Introduzca un valor de velocidad en el campo situado junto a las flechas de dirección vertical para determinar la velocidad a la que se producirá el movimiento en relación con la velocidad de desplazamiento de la página. Si introduce 0, el elemento no se desplazará verticalmente. También puede introducir un porcentaje mediante una coma decimal. Por ejemplo, si introduce 0,5, el elemento se desplazará verticalmente a la mitad de la velocidad de desplazamiento de la página.

  4. Configuración de la dirección horizontal de Movimiento inicial: determine la dirección de desplazamiento horizontal (hacia la izquierda o la derecha) haciendo clic en la flecha izquierda o derecha para configurar la dirección en la que se desplazará el elemento antes de alcanzar la posición clave. En el campo situado a la derecha de las flechas horizontales, introduzca el valor de la velocidad de dirección horizontal. Si no desea que el elemento se mueva en sentido horizontal, configure el campo de velocidad horizontal inicial a 0.

  5. Repita los pasos 7 y 8 para configurar la dirección y la velocidad de movimiento para la sección Movimiento final.

En el ejemplo que se muestra a continuación, la posición clave se ha configurado a 500 píxeles. Cuando el navegador empieza a desplazarse, el elemento se desplaza hacia abajo, hasta su lugar, a 1 vez la velocidad de desplazamiento de la página, es decir, a la misma velocidad. El elemento alcanza su lugar al mismo tiempo que la página se desplaza hasta la posición clave. Cuando la página se desplaza más allá de la posición clave, el elemento se mueve hacia la derecha a 2 veces la velocidad de desplazamiento de la página.

Aplicación de la configuración de Movimiento para definir el efecto de desplazamiento en Adobe Muse
Aplicación de la configuración de movimiento para definir el efecto de desplazamiento

  1. Pulse Vista previa o seleccione Archivo > Vista previa de página en navegador para comprobar los efectos de desplazamiento. Desplace la página hacia abajo y de nuevo hacia arriba para comprobar cómo se mueve el elemento.
  2. Regrese a Muse o haga clic en el botón Diseño cuando termine la prueba para continuar editando la página.

Aplicación de efectos de desplazamiento con opacidad utilizando el panel Efectos de desplazamiento

En esta sección descubrirá cómo aplicar transformaciones que cambian la visibilidad de un elemento en función de las interacciones de desplazamiento del visitante. Esto resulta útil para mostrar y ocultar el contenido haciendo que los elementos se intensifiquen o se desvanezcan a medida que el visitante se desplaza hasta una nueva sección de página. Siga estos pasos para aplicar efectos de desplazamiento que afectan a la transparencia de un elemento de la página empleando la ficha Opacidad en el panel Efectos de desplazamiento:

  1. Mientras edita una página en la vista Diseño, compruebe que las propiedades de la página tienen un valor de píxeles en el campo de altura mínima superior a 2000 píxeles, la altura media de la mayoría de monitores. También puede añadir contenido de página a la página para garantizar que es lo suficientemente larga para desplazarse.
  2. En la vista Diseño, dibuje un rectángulo o un marco de texto en la página.
  3. Utilice la ficha Relleno del menú Relleno (o utilice el panel Relleno) para añadir una imagen de fondo con o sin mosaico al elemento de la página seleccionado; o determine un color de relleno uniforme o de degradado. (Si lo prefiere, añada un widget de proyección de diapositivas o coloque un archivo OAM de Adobe Edge Animate en la página).
  4. Con el elemento seleccionado, haga clic en la ficha Opacidad (segunda ficha por la izquierda) en el panel Efectos de desplazamiento y active la casilla de verificación de Opacidad.
Active la casilla de verificación de Opacidad para activar los efectos de desplazamiento con opacidad para el elemento seleccionado.
Active la casilla de verificación de Opacidad para activar los efectos de desplazamiento con opacidad para el elemento seleccionado.

La activación de la opción Opacidad hace que aparezca otro tipo de control en el elemento. Del mismo modo que utilizaba el control en forma de T para determinar la posición clave en la ficha Movimiento, puede hacer clic y arrastrar el nuevo control para colocarlo sobre el elemento, arrastrarlo hacia abajo para que coincida con el borde superior (o sobre cualquier parte del elemento) o colocarlo bajo el elemento. El control de Opacidad tiene tres partes diferenciadas que se pueden arrastrar por separado para configurar los valores de la posición clave, la posición de transición 1 y la posición de transición 2.

  1. Haga clic y arrastre la parte cuadrada central del control para determinar la posición clave. En el ejemplo que se muestra a continuación, la posición clave se ha establecido en 150 píxeles.
Configure la posición clave arrastrando el control cuadrado central en dirección vertical.
Configure la posición clave arrastrando el control cuadrado central en dirección vertical.

  1. Haga clic y arrastre la parte circular superior del control para colocarla en la ubicación deseada. En el ejemplo que se muestra a continuación, la posición de transición 1 se ha establecido en 100 píxeles.
Definición de la posición de transición 1 del control de Opacidad
Haga clic y arrastre la parte superior izquierda del control circular para configurar la primera posición que afectará a la transparencia del elemento.

  1. Haga clic y arrastre la parte circular inferior del control para colocarla en la posición deseada. En el ejemplo que se muestra a continuación, la posición de transición 2 se ha establecido en 200 píxeles.
Definición de la posición de transición 2 del control de Opacidad
Haga clic y arrastre la parte superior derecha del control circular para configurar la segunda posición que afectará a la transparencia del elemento.

Nota:

si lo desea, la posición clave puede arrastrarse junto con los controles de posición de transición y configurarse con el mismo valor. En lugar de arrastrar los controles, también puede introducir valores numéricos para cada uno de los campos en el panel Efectos de desplazamiento.

En este ejemplo, el elemento comienza siendo transparente y va oscureciéndose hasta quedar completamente opaco (el valor de Opacidad correspondiente a la posición clave está configurado al 100 %) cuando la página alcanza la posición clave. Cuando la página se desplaza por debajo de la posición clave, el elemento va aclarándose hasta quedar completamente transparente de nuevo, para desaparecer de la vista cuando la página desciende por debajo de los 200 píxeles.

Configuración del porcentaje de opacidad para los efectos de desplazamiento
Configure el porcentaje de opacidad (el 0% significa que es completamente transparente) en la ficha Opacidad del panel Efectos de desplazamiento.

  1. Pulse Vista previa o seleccione Archivo > Vista previa de página en navegador para comprobar los efectos de desplazamiento. Desplácese hacia abajo por la página y de nuevo hacia arriba para comprobar cómo cambia el grado de opacidad del elemento en función de su interacción.
  2. Regrese a Muse o haga clic en el botón Diseño cuando termine la prueba para continuar editando la página.

Funciones de la pestaña Proyección de diapositivas en el panel Efectos de desplazamiento

Otro uso común del movimiento de desplazamiento es la combinación de la interacción del movimiento de desplazamiento con la visualización de imágenes de una proyección de diapositivas. Puede añadir un widget de proyección de diapositivas a la página y, a continuación, usar la ficha Proyección de diapositivas del panel Efectos de desplazamiento para aplicar efectos de desplazamiento, como la visualización de una nueva imagen de la presentación automáticamente, cada vez que se desplaza hasta una ubicación específica de la página.

Haga clic en la ficha Proyección de diapositivas (tercera ficha de la izquierda) para revisar la configuración de esta sección.

El uso más común de esta parte de la interfaz de movimiento de desplazamiento es la fijación de un widget de proyección de diapositivas a la página. Por lo general, el widget de proyección de diapositivas se configurará (utilizando el menú Opciones) para mostrar solo el contenedor de proyecciones de diapositivas de mayor tamaño y ocultar las miniaturas, así como los botones Siguiente y Anterior.

La presentación de diapositivas en pantalla completa es especialmente adecuada para este efecto, aunque el tipo de widget de proyección de diapositivas que va a añadir dependerá en última instancia del diseño del sitio.

Siga estos pasos para aplicar efectos de desplazamiento a un widget de proyección de diapositivas:

  1. Actualice el campo de altura mínima en el cuadro de diálogo Propiedades de la página, de modo que la página sea lo suficientemente alta para el desplazamiento. De forma alternativa, añada contenido para crear una página más larga.
  2. Arrastre un widget de proyección de diapositivas desde la biblioteca de widgets hasta la página. Use el menú Opciones para configurar las opciones de la proyección de diapositivas. (Al aplicar efectos de desplazamiento en widgets de proyecciones de diapositivas, las opciones Siguiente, Anterior y Miniaturas suelen estar desactivadas).
  3. Añada imágenes al widget de proyección de diapositivas haciendo clic en la carpeta situada junto a la sección Imágenes del menú Opciones. Examine y seleccione las imágenes que desea añadir desde el equipo para llenar la galería de imágenes.
  4. Use la interfaz de fijación del panel de control para fijar la proyección de diapositivas a la posición actual en la ventana del navegador. Mientras la proyección de diapositivas está seleccionada, haga clic en una de las seis posiciones de fijación.
Aplicación de los efectos de desplazamiento en widgets de proyección de diapositivas
Fije el widget de proyección de diapositivas en una ubicación específica de modo que mantenga su posición en la ventana del navegador a medida que la página se desplaza.

Cuando haya añadido y configurado la proyección de diapositivas fija, puede añadir efectos de desplazamiento.

En la ficha Proyección de diapositivas, en el panel Efectos de desplazamiento, active la casilla de verificación de proyección de diapositivas mientras mantiene el widget de proyección de diapositivas seleccionado.

Active la opción Proyección de diapositivas en el panel Efectos de desplazamiento.
Seleccione el widget de proyección de diapositivas y active la opción Proyección de diapositivas en el panel Efectos de desplazamiento.

Observe que en cuanto se active la opción Proyección de diapositivas, el control de la posición clave se añadirá a la proyección de diapositivas en la vista Diseño. Si desea actualizar los valores de la posición de desplazamiento clave, puede arrastrar el lado izquierdo y derecho del control o introducir un número en el campo Posición de desplazamiento clave. También puede hacer clic en las flechas hacia arriba y hacia abajo en el panel Efectos de desplazamiento para aumentar o disminuir el valor numérico.

La ficha Proyección de diapositivas en el panel Efectos de desplazamiento contiene dos botones: 1 y 2, que ofrecen dos formas distintas de controlar la reproducción de las imágenes de proyecciones de diapositivas. Puede configurar la presentación para reproducirse de forma automática o para avanzar progresivamente por las imágenes a medida que se desplaza por la página.

En el primer caso deberá configurar la posición clave deseada y, a continuación, activar la casilla de reproducción automática.

Cuando la página se desplaza más allá de la posición clave (o cuando el usuario hace clic en un vínculo a una etiqueta de anclaje y salta a un punto de la página situado por debajo de la posición clave) se inicia la reproducción de la proyección de diapositivas. La función de reproducción automática continuará mostrando imágenes y repitiéndose hasta que el usuario se desplace de nuevo por encima de la posición clave de la página o abandone la página.

En el ejemplo mostrado en la imagen anterior, la proyección de diapositivas comienza a reproducirse cuando la página se desplaza hasta 100 píxeles (o hasta cualquier punto por debajo de la posición clave configurada). Si el visitante se desplaza nuevamente hacia arriba, la proyección de diapositivas deja de reproducirse cuando la página sobrepasa la posición clave (99 píxeles o menos).

La segunda forma de controlar el widget de proyección de diapositivas consiste en configurar la posición clave y, a continuación, activar el botón de opción Cambiar de diapositiva cada. En este flujo de trabajo, también puede configurar el número de píxeles en el campo situado bajo el botón de opción para indicar la frecuencia con la que avanzarán las imágenes de la proyección de diapositivas en función de cuánto se desplace hacia abajo por la página.

Por ejemplo, puede fijar un widget de proyección de diapositivas a una página más larga, de forma que permanezca en una ubicación fija mientras el resto de contenido de la página se desplaza. Al asignar un valor numérico a la opción Cambiar de diapositiva cada, puede configurar la proyección de diapositivas para que cambie a la siguiente imagen del grupo cada vez que la página se desplace hasta el número de píxeles especificado.

En la imagen anterior, la posición clave se ha establecido en 200 píxeles. Cuando la página sobrepasa los 200 píxeles desde la parte superior, se muestra la siguiente imagen de la serie en la proyección de diapositivas cada vez que la página se desplaza otros 30 píxeles.

Configuración de los efectos de desplazamiento para las proyecciones de diapositivas en Adobe Muse
Configure la proyección de diapositivas para avanzar a la siguiente imagen cada vez que la página se desplace hacia abajo hasta una distancia determinada (en píxeles).

Uso de la ficha Adobe Edge Animate en el panel Efectos de desplazamiento

Adobe Edge Animate es una herramienta de diseño intuitiva que permite crear animaciones web en HTML5. Desde la interfaz de Edge Animate puede crear composiciones de símbolos y gráficos con movimiento de repetición. Las animaciones creadas con Adobe Edge Animate pueden exportarse como archivos OAM y colocarse en las páginas de sitios de Muse. Las animaciones creadas en Edge Animate pueden reproducirse en un navegador sin necesidad de utilizar ningún plugin.

Al crear animaciones en Adobe Edge Animate, puede arrastrar los elementos al escenario y manipular el movimiento mediante una línea de tiempo. Además de añadir elementos directamente a la línea de tiempo principal, también puede crear elementos anidados con subelementos que se reproducen utilizando sus propias líneas de tiempo internas. Si desea obtener más información sobre el funcionamiento de Adobe Edge Animate, consulte la página de Adobe Edge Animate. Vea también los tutoriales en vídeo de Adobe Edge Animate en Adobe TV.

Para usar la función de movimiento de desplazamiento de Adobe Edge Animate, lo primero que debe hacer es diseñar una composición específicamente con este fin. Los efectos de desplazamiento se pueden aplicar a archivos OAM para que se desarrollen en las animaciones colocadas en la línea de tiempo principal. Puede crear animaciones interactivas mediante el diseño estratégico de la animación, dejando solo los elementos que desea desplazar junto con la página en la línea de tiempo principal y colocando el resto de la animación en líneas de tiempo de símbolos 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 información sobre cómo crear animaciones específicamente para añadirlas al sitio de Adobe Muse, consulte Adición de contenido de Adobe Edge Animate.

Siga estos pasos para usar la ficha Proyección de diapositivas en el panel Efectos de desplazamiento:

  1. Exporte el archivo OAM de Adobe Edge Animate y guárdelo en la carpeta del sitio.
  2. Inicie Muse y haga doble clic en una página para abrirla en la vista Diseño. Compruebe que la página es lo suficientemente larga para desplazarse por ella actualizando la configuración de altura mínima en el cuadro de diálogo Propiedades de la página, o añadiendo contenido de página para crear una página más larga.
  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 Adobe Edge Animate.
Configuración de los efectos de desplazamiento para las animaciones en Adobe Muse
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 50 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 1 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:

los objetos animados anidados o vinculados desde la línea de tiempo principal en la composición de Adobe Edge Animate no se ven afectados por la configuración de efecto de movimiento de desplazamiento. 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.

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