Agregar interactividad

Modelar la interactividad (la interacción entre el usuario y una aplicación) permite mostrar las diferentes formas en que el usuario puede interactuar con una aplicación. Microsoft Expression Blend proporciona numerosas herramientas para mostrar el comportamiento interactivo de un prototipo. Por ejemplo, puede realizar una de las acciones siguientes:

  • Simular comportamiento interactivo usando animación.

  • Agregar navegación a elementos de un prototipo.

  • Crear prototipos de interfaces de usuario controladas por datos usando datos de ejemplo y enlace a datos.

  • Aplicar controles de comportamiento a elementos de un prototipo.

Para obtener más información sobre cómo agregar interactividad a un proyecto SketchFlow, vea esta página de Getting Started with SketchFlow Ee341387.xtlink_newWindow(es-es,Expression.40).png (Introducción a SketchFlow).

Animación

A veces, resulta útil agregar secuencias animadas a un prototipo para mostrar interacción. Puede usar las herramientas de animación con fotogramas clave, como las del panel Objetos y escala de tiempo, usar el panel Estados o usar el panel Animación SketchFlow para crear una sencilla secuencia animada.

Para obtener más información acerca del uso de estados, vea "Estados visuales", más adelante en este tema.

Animación de fotogramas clave

Use las herramientas de animación de fotogramas clave de Expression Blend para crear secuencias animadas en cualquiera de las pantallas de un proyecto SketchFlow. Puede usar animaciones de fotogramas clave junto con estados visuales (por ejemplo, una animación que se desencadene al alcanzar un estado concreto) o independientes de estados visuales (por ejemplo, cuando una acción desencadena una animación).

Para obtener más información acerca de la creación de animaciones en Expression Blend, vea Animar objetos.

En las aplicaciones de Windows Presentation Foundation (WPF), puede usar también guías de movimiento para crear secuencias animadas. Para obtener más información, vea Crear, modificar o eliminar una guía de movimiento.

Animación SketchFlow

Las animaciones de fotogramas clave puede ser muy útiles. Sin embargo, pueden ser también muy detallas y salirse del ámbito de un proyecto prototipo. Las animaciones SketchFlow son visitas guiadas de estilo guión gráfico que se pueden crear de un modo rápido y sencillo en el panel Animación SketchFlow. Al igual que las animaciones de fotogramas clave y los estados, las animaciones SketchFlow contribuyen a mostrar la interacción del usuario.

En una animación SketchFlow, use el panel Animación SketchFlow para crear una secuencia de instantáneas agregando un nuevo fotograma al panel y ajustando después la "escena" en la mesa de trabajo para ese fotograma. Puede ajustar fácilmente el tiempo de transición y el tiempo de espera de cada fotograma. Para ejecutar la secuencia de animación directamente en la ventana del documento, haga clic en Reproducir en el panel Animación SketchFlow o genere y ejecute el proyecto haciendo clic en F5 y reproduzca la animación en el Reproductor SketchFlow.

El siguiente es un ejemplo de animación SketchFlow. En los siguientes fotogramas, el puntero se mueve desde la esquina inferior derecha hasta la imagen "Halo 2" y se simula una acción de clic con un asterisco rojo. A continuación, la imagen "Halo 2" se mueve hacia la izquierda y el puntero hacia la derecha.

Ee341387.df44ecfb-df4c-40c8-aefb-16243eeea90b(es-es,Expression.40).pngEe341387.02c55e22-17c4-404d-90a4-2fd308993ad7(es-es,Expression.40).pngEe341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(es-es,Expression.40).pngEe341387.914aa328-b7ca-4484-82a6-b6a5b8c24d84(es-es,Expression.40).pngEe341387.fba8a139-19c5-4a84-b0d2-1bce67266301(es-es,Expression.40).png

Para crear esta animación SketchFlow

  1. Abra la pantalla a la que desea agregar animación. En el panel Animación SketchFlow, haga clic en Nueva animación SketchFlowEe341387.d68c6600-ebf7-4b74-8416-6179ce5ad38e(es-es,Expression.40).png para crear una nueva animación SketchFlow. Aparece un nuevo fotograma en el panel Animación SketchFlow.

    [!NOTA]

    Si no está visible el panel Animación SketchFlow, en el menú Ventana, haga clic en Animación SketchFlow.

    En este ejemplo, el estado Base (estado normal de la pantalla) es igual que el primer fotograma.

  2. Agregue un nuevo fotograma haciendo clic en Agregar estadoEe341387.46bc69ec-93a3-4f56-a3d2-9de601ada74d(es-es,Expression.40).png en el primer fotograma.

  3. Seleccione el objeto que desea mover y desplácelo hasta donde desee que aparezca el objeto. En este ejemplo, el puntero se mueve desde la esquina inferior derecha hasta la letra "o" de "Halo".

    Ee341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(es-es,Expression.40).png

  4. Opcionalmente, puede realizar una de las acciones siguientes:

    • Editar tiempo de espera    Para modificar el tiempo de espera (período de tiempo durante el que se muestra el estado actual) de un fotograma, sitúe el puntero sobre el fotograma hasta que aparezca el cuadro de diálogo Editar tiempo de espera. Haga doble clic en el fotograma y escriba un nuevo valor, o bien haga clic una vez y use las teclas FLECHA ARRIBA y FLECHA ABAJO para aumentar o disminuir el tiempo de espera.

    • Pausa y reanudación    Puede agregar funcionalidad de pausa y reanudación para la animación mediante el botón Pausa activada del panel Animación SketchFlow. La animación se detendrá cuando llega al fotograma en el que se ha agregado la funcionalidad de pausa y reanudación. Para reanudar la animación, haga clic en el título de la animación en el panel Navegar en el Reproductor SketchFlow.

      El botón Pausa activada aparece junto al cuadro Editar tiempo de espera cuando coloca el puntero sobre un marco de animación. Cuando se hace clic en el botón Pausa activadaIcono de activación de pausa de la animación de SketchFlow, el cuadro Editar tiempo de espera no está disponible.

      Cuadro Editar tiempo de espera y botón Pausa activada en un marco de animación

      Botón de tiempo de espera y activación de pausa de SketchFlowAnimation

    • Editar tiempo de transición    Para modificar el tiempo de transición entre fotogramas (período de tiempo que dura la transición de un fotograma a otro), haga clic en el cuadro de diálogo Editar tiempo de transición entre los fotogramas. Haga doble clic en el fotograma y escriba un nuevo valor, o bien haga clic una vez y use las teclas FLECHA ARRIBA y FLECHA ABAJO para aumentar o disminuir el tiempo de transición.

    • Efectos de transición    Puede aplicar un efecto TransitionEffect integrado en una animación SketchFlow cuando el tiempo de transición es mayor que 0. En el panel Animación SketchFlow, haga clic en Efectos de transiciónIcono de efecto de transición y, a continuación, seleccione el efecto de transición en la lista desplegable TransitionEffect. También puede modificar el tiempo de transición de TransitionEffect.

      Para obtener más información, vea Aplicar un efecto de transición a un cambio de estado visual.

    • Función de aceleración    También puede aplicar una función EasingFunction integrada haciendo clic en EasingFunctionEe341387.9718b395-a71d-40b2-9d08-8e29a225151f(es-es,Expression.40).png y, a continuación, seleccione la función de aceleración que desee en la lista desplegable EasingFunction.

  5. Una vez completada la animación SketchFlow, puede ver una vista previa realizando una de las acciones siguientes:

    • Haga clic en Reproducir en la barra de herramientas Animación SketchFlow.

      [!NOTA]

      Si ha usado la funcionalidad de pausa y reanudación en una animación SketchFlow, la pausa se reemplaza por un tiempo de espera de 1 segundo cuando se realiza la vista previa de la animación en el panel Animación SketchFlow.

    • Haga clic con el botón secundario en la mesa de trabajo, elija Reproducir animación SketchFlow y seleccione la animación que desea aplicar.

    • Genere y ejecute el proyecto presionando F5 y vea la animación en el Reproductor SketchFlow.

Barra de herramientas Animación SketchFlow

Use la barra de herramientas Animación SketchFlow para realizar las siguientes acciones en el panel Animación SketchFlow:

Ee341387.1afe5d56-20d8-400a-b643-13577ae593cd(es-es,Expression.40).png

Ir al primer fotograma.
Ee341387.0272e62e-0ad4-43ab-b0ac-f0767907e63b(es-es,Expression.40).png

Reproducir la animación.
Ee341387.d2d47333-c15d-4aa0-9633-95f39cb96ae0(es-es,Expression.40).png

Anclar editores de tiempo.
Ee341387.1ebe2b0a-5891-47f3-be05-fa90157b9312(es-es,Expression.40).png

Activar o desactivar el diseño fluido.

Para obtener más información, vea Pasar fácilmente por los cambios de diseño.
Ee341387.3308f172-fdae-40f8-ba84-17b679e94134(es-es,Expression.40).png

Use la doble flecha para abrir una animación SketchFlow de la lista desplegable.

Use el icono de signo más para agregar un nuevo guión gráfico.

Use la flecha sencilla para crear, eliminar o cerrar guiones gráficos.
Ee341387.c83900c7-5245-4075-8cbf-99e9015f234b(es-es,Expression.40).png

Use la barra de desplazamiento para moverse por los fotogramas de la animación.

Estados visuales

También puede mostrar interactividad en un prototipo usando estados visuales para definir diferentes alternativas de diseño para una misma pantalla. Son muchos los escenarios donde tener varios estados de una misma pantalla puede resultar muy útil para crear un prototipo, por ejemplo:

  • Una pantalla en una aplicación puede mostrar elementos de interfaz de usuario (UI) diferentes en función de si el usuario inició sesión o no. Puede usar estados visuales para crear dos opciones de visualización de una misma pantalla en un prototipo: una en la que el usuario inició sesión y otra en la que el usuario no inició sesión. Puede haber diferentes alternativas de diseño para una pantalla dada en un prototipo. Puede crear un estado para cada una de estas alternativas de diseño diferentes en la misma pantalla.

  • Puesto que los estados pueden contener animaciones, puede crear diferentes estados para la misma pantalla e incluir animaciones. La animación de un estado se puede desencadenar mostrando el estado de la pantalla que contiene la animación.

Cuando se ejecuta un proyecto SketchFlow en el Reproductor SketchFlow, los estados aparecen como comandos separados en el panel Navegar. En la imagen siguiente, Transitions es el grupo de estados y Close y Open son dos estados diferentes definidos para la pantalla.

Ee341387.c91a4238-54c4-43ac-b09b-3407eaf58d4e(es-es,Expression.40).png

Puesto que puede usar comandos para navegar entre estados, no es necesario que cree desencadenadores para cambiar entre estados que haya creado en la mesa de trabajo.

Para obtener más información acerca de los estados visuales, vea Definir distintos estados visuales para un control.

Controles de comportamiento

Los controles de comportamiento son fragmentos de código integrados que puede aplicar a un elemento de un modo fácil y rápido para crear interactividad. Pueden ser tan sencillos como acciones que se desencadenan cuando tiene lugar un evento (por ejemplo, cuando se hace clic en un botón, comienza una animación) o pueden encapsular varios eventos desencadenados por varias acciones.

Los controles de comportamiento son eficaces herramientas para crear prototipos. Por ejemplo, puede agregar un control a una pantalla y aplicar un control de comportamiento a ese control. A continuación, genere y ejecute el proyecto (F5), y el control al que agregó el comportamiento se comportará en la pantalla como si fuese una aplicación final.

Los controles de comportamiento SketchFlow integrados incluyen las opciones de navegación Atrás y Adelante, y también un control de comportamiento Desplazarse a que se pueden aplicar a un control en SketchFlow.

Para obtener más información, vea Trabajar con comportamientos de SketchFlow.

Cuando se ve un prototipo en el Reproductor SketchFlow, se puede navegar entre pantallas y desencadenar cambios de estado usando el panel NAVEGAR. Esta funcionalidad significa que puede navegar por un prototipo sin agregar código adicional ni elementos de interfaz de usuario, incluso si consta sólo de algunos bocetos preliminares.

También puede agregar de un modo rápido y sencillo controles de comportamiento SketchFlow que haya dibujado en la mesa de trabajo, y que le permitan navegar entre pantallas o reproducir animaciones que haya agregado al prototipo.

Para agregar un control de comportamiento Reproducir animación SketchFlow a un control

  • Haga clic con el botón secundario en el control al que desea agregar el control de comportamiento Reproducir animación SketchFlow, haga clic en Reproducir animación SketchFlow y elija la animación que desea reproducir cuando se haga clic en el control.

Datos de ejemplo

Muchas aplicaciones se basan en bases de datos para generar información. Puede ser difícil modelar comportamiento controlado por datos sin datos reales con los que crear un prototipo. Con Expression Blend, ahora puede crear un origen de datos de ejemplo y enlazar estos datos a controles. Puede usar datos de ejemplo en el prototipo para modelar interfaces de usuario controladas por datos que imiten la naturaleza dinámica de escenarios de usuario reales controlados por datos.

Para obtener más información, vea Crear datos de ejemplo.

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.

  • Last updated on