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.

Mejora de Adobe Muse CC 2015.1 | Febrero de 2016

Puede hacer el diseño más interesante y atractivo aplicando transiciones a los distintos objetos de la página web. También puede definir las opciones de demora, duración y temporización de cada transición de estado para cada uno de los objetos.

La transición de estado admite cambios en las opciones Bisel y Resplandor.

Explicación de los diferentes estados de objetos

El estado de un objeto determina su apariencia cuando un usuario interactúa con él. Estas interacciones pueden consistir en pasar el ratón sobre áreas (también llamadas rollover), en hacer clic, etc. Cuando se interactúa con un objeto, este cambia su estado predeterminado o normal a otro estado. Por este motivo, Adobe Muse añade transiciones fluidas para este tipo de interacciones.

En Adobe Muse, puede aplicar estados a los distintos tipos de objetos, como texto, contenedores de widgets (de todo tipo de widgets), imágenes, hipervínculos, botones, etc. Los estados pueden adoptar estilos gráficos, estilos de párrafo, estilos de caracteres y mucho más.

¿Cuáles son los distintos estados de un objeto en Adobe Muse?

Adobe Muse proporciona los siguientes estados, que permiten cambiar el estilo y el aspecto de un objeto en función de la interacción del usuario. 

  • Normal: el estado Normal determina la apariencia predeterminada de un objeto cuando se carga la página web. Asimismo, le permite definir el estado del objeto cuando no hay interacción. Un objeto cambia del estado Normal a otros estados.
  • Ratón pulsado: el estado Ratón pulsado determina el aspecto de un objeto cuando se hace clic y no se suelta. 
  • Rollover: el estado Rollover permite cambiar el aspecto de un objeto al pasar el cursor sobre dicho objeto. Usar el estado Rollover es una de las maneras más sencillas de distinguir entre un objeto interactivo y uno no interactivo en una página web.
  • Activo: el estado Activo define el aspecto de un objeto cuando está activo y ya se ha hecho clic en él. Por ejemplo, cuando hace clic en un botón o selecciona un menú.
    Cuando un objeto pasa al estado Activo, se indica que el objeto está en uso en ese momento. Los estados activos se pueden definir en todo tipo de objetos, incluidos los hipervínculos.

Asignación de estados a objetos

A todos los objetos se les asignan los cuatro estados de forma predeterminada. Aun así, Adobe Muse le permite personalizar cada uno de estos estados por separado en el panel Estados.

Nota:

Cuando se trabaja con estados, es importante realizar un seguimiento de las selecciones con el Indicador de selección. Esto se debe a que Adobe Muse le permite editar el estado Normal de un objeto de forma predeterminada. Esto significa que aunque se estuviera editando el estado Activo del Objeto A, luego seleccionase el Objeto B y, a continuación, volviese a seleccionar el Objeto A, se seguiría adoptando el estado Normal. Por lo tanto, es importante que siempre seleccione explícitamente el estado que desea editar en el panel Estados antes de diseñar el objeto.

De manera predeterminada, los cambios hechos a los objetos se guardan en el estado Normal. No obstante, Muse le permite cambiar a un estado diferente desde el panel Estados, así como modificar el estilo del objeto para personalizar aún más un estado. Para centrarse en el comportamiento del objeto en cada tipo de interacción, puede modificar por separado cada uno de los estados.

Para personalizar o modificar el estado de un objeto, haga lo siguiente:

  1. Haga clic en Ventana > Estados para abrir el panel Estados.
  2. Seleccione el objeto cuyo estado desea editar.
  3. Seleccione el Estado que desea editar y haga los cambios de estilo oportunos.
  4. En el panel Estados, seleccione Transición y elija la opción Desvanecer. Establezca las opciones de Demora, Duración y Velocidad de la transición. Al seleccionar Transición, el objeto pasa de un estado a otro de la forma que se indica en la configuración.
Al definir el estilo de un objeto, se puede seleccionar también un estado en la lista desplegable de Indicador de selección.

Asignación de estados a widgets y a contenedores de widgets

  1. Cierre el navegador y vuelva a Adobe Muse.

  2. Haga clic en el widget una vez para seleccionar el menú completo. Haga clic en el botón de comida una vez más para seleccionar el elemento del menú de comida. Si, accidentalmente, hace clic una tercera vez y el indicador de selección muestra la palabra Etiqueta, pulse la tecla Esc una vez para subir un nivel en la jerarquía, de forma que aparezca las palabra Elemento de menú.

    Como la opción Editar conjuntamente está activada en el panel Opciones, los cambios que se realicen en el aspecto de este elemento del menú de comida se aplicarán al resto de botones del widget de menú horizontal. Esto agiliza la edición. A menos que para un diseño sea necesario aplicar un estilo diferente a cada botón, mantenga activada la configuración predeterminada de la opción Editar conjuntamente.

    Indicador de selección definido como elemento de menú
  3. Abra el panel Estados mediante la selección de su ficha o en Ventana > Estados.

    Este panel le permite editar las distintas formas en las que se muestra el gráfico del botón, dependiendo de la actividad del cursor del visitante. Debe tener en cuenta que hay varios cuadros grises que definen la apariencia de cada estado.

    Al previsualizar el sitio, habrá observado que estado Normal se refiere al aspecto del menú cuando se carga la página y el visitante no interactúa con el mismo. Si el visitante sitúa el cursor sobre un botón, se muestran los estilos aplicados al estado de rollover. Si el visitante pulsa el botón, se muestran los estilos aplicados al estado Ratón pulsado. Y por último, si el visitante está en esa página actual del sitio (por ejemplo, si se hace clic en el elemento de menú Acerca de y aún está viendo esa página), el botón tendrá el mismo aspecto que se aplicó en el estado activo. Este último estado es opcional, pero es útil en algunos casos, ya que los visitantes podrán ver de un vistazo la página actual.

    Estados de un botón
  4. En el panel Estados, haga clic en cada elemento de la lista: estados normal, rollover, ratón pulsado y activo. Tenga en cuenta que al hacer clic en los estados del panel, el widget de menú de la página se actualiza para mostrar el aspecto predeterminado para ese estado.

  5. Vuelva a hacer clic en el estado Normal. Con el elemento del menú de inicio seleccionado, utilice el cuadrado de color de relleno para elegir un color completamente distinto, como el rojo. Cuando se establece un color diferente de relleno, todos los elementos de menú actualizan su estado Normal porque la opción Editar conjuntamente está activada.

    Opciones de estado de los botones
    Cuando se actualiza el color de relleno para uno de los estados del botón, el resto se actualiza automáticamente cuando se activa la opción Editar conjuntamente.

  6. Seleccione Transición y, a continuación, la opción Desvanecer. En la transición de un estado a otro, el objeto aparece o desaparece gradualmente, dependiendo de la configuración.

    Cuando se elige la transición de un estado a otro, se pueden definir las opciones siguientes:

    Demora: tiempo de demora de un estado a otro, en segundos.

    Duración: duración de la transición.

    Velocidad: esta opción permite establecer una transición lineal o suave de un estado al siguiente. También puede elegir las opciones Aceleración, Desaceleración o Acelerar/Desacelerar. La transición del objeto se acelerará o desacelerará, en función de la configuración elegida.

  7. Seleccione Archivo > Vista previa del sitio en el navegador de nuevo y observará que ha personalizado el estado Normal del botón. Al cargarse el menú, todos los botones, excepto el que describe la página actual, aparecerán de color rojo. A medida que pase el ratón sobre cada uno de los botones, se muestra el color gris de rollover, creando un efecto de rollover.

  8. Para este ejemplo, seleccione cada uno de los estados en el panel Estados (o seleccione cada estado mediante el menú Estados situado junto al indicador de selección del panel de control) y establezca el color de relleno en ninguno (el cuadrado blanco con la línea diagonal roja). Esta opción aparta de la vista los botones del elemento de menú de fondo, de manera que se hacen transparentes y permiten asomar al diseño de fondo.

Cuando se escribió este documento, el contenedor exterior del widget de menú horizontal era transparente de forma predeterminada. No obstante, si lo desea, puede utilizar el Selector de color de relleno para definir su color de relleno, al igual que los contenedores del botón del elemento de menú. Más tarde, cuando realice sus propias páginas, podrá experimentar y establecer un color de relleno para todo el widget y, a continuación, establecer un color de relleno distinto para los contenedores del botón. También puede probar a añadir una imagen de fondo a la hora de diseñar los botones.

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