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 introducción (puede estar en inglés).

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

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 SketchFlow 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 estado 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".

   

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

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

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

   • 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:

	Ir al primer fotograma.
	Reproducir la animación.
	Anclar editores de tiempo.
	Activar o desactivar el diseño fluido. Para obtener más información, vea Pasar fácilmente por los cambios de diseño.
	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.
	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.

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 Agregar controles de comportamiento a objetos.

Navegación y cambios de estado

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.