Trabajando con Estados en SketchFlow
El rol de los estados en las aplicaciones interactivas
Las aplicaciones interactivas se estan convirtiendo en algo muy requerido estos dias y deberia ser possible representar en un prototipo los diferentes estados posibles con sitios webs con ajax o aplicaciones silverilght. Esto es algo difícil de hacer con bocetos tradicionales como uno podría ilustrar una animación o una transición por ejemplo
SketchFlow resuelve este problema permitiendote grabar varios estados de la pantalla. Trabajaremos con un pequeño ejemplo de una ventana de chat ahora. El estado defecto es una pantalla en la cual la ventana de chat aparece invisible. El siguiente estado es en el cual la pantalla de chat aparece luego que el usuario a cilckeado un botón.
Creando una ventana de chat animado utilizando Estados
En este ejercicio, usted creará una simple animación que muestra una ventana de chat cuando el usuario clickee el boton de chat en vivo.
1 Para trabajar vamos a crear un botón en la pantalla bienvenido (del proyecto que venimos trabajando en los post anteriores), y un componente que se llame chat.
2 Clickee dos veces el component chat y dele el siguiente diseño..
3 En el Map Panel, clickee dos veces la pantalla de bienvenida para abrirla. Localice el componente de chat In the SketchFlow Map panel y arrastrelo encima de la pantalla de bienvenida.
4 Clickee y arrastre el component de chat a la parte superior del boton de chat que haya agregado.
5 Usted ve ahora el estado por defecto de la pantalla. Esto significa que necesita ocultar la pantalla inicialmente. Hará esto con Opacidad. Con el componente de chat aun seleccionado localice la opacidad y cambiela de 100 a 0%.
6 Elija Window>States panel si aún no está abierto. Luego clickee el botón New State Group y nombrelo AparicionChat.
Un State Group es una colección de estados que define la apareicion de su pantalla basandose en la interacción del usuario. Agregará ahora el primer estado.
7 Clickee el boton Add State y su estado de grabado se prenderá. ( Sean cuidadosos en este momento por que cualquier cambio que usted realice será grabado)
Tipee defecto, luego clickee el Add State nuevamente y nombre este estado AparecerChat_on
8 Regrese al panel de propiedades y cambie la opacidad a 100%..
9 En el States Panel, clickee el estado defecto y el AparecerChat_on unos minutos para cambiar la visibilidad unos segundos.
10 Presione F5 para abrir testear el proyecto y en la pantalla de bienvenida, seleccione el estado defecto,.
11 Clickee el estado AparecerChat_on y la ventana de chat aparecerá. Controlando los estados de navegacion permite que pueda tener diferentes vistas de una misma pantalla.
Trabajando con Estados de Transición
El States panel le permite controlar no simplemente las apariciones de estados sino tambien la transiciones entre ellos. Por ejemplo, si desea que la ventana de chat aparezca en forma gradual en vez de pop up, puede hacerlo fácilmente.
1 Regrese a SketchFlow y al States Panel. Localice la transicion por defecto y especificamente el valor 0 segundos.
2 Clickee adentro de este campo y tipee 1 y presione regresar. Esto habilita la transición de 1 segundo.
La transicion defecto es una propiedad global para todos los estados de transicion. Por ejemplo, cuando el chat aparezca tomara 1 segundo y cuando desaparezca tomara 1 segundo.
3 En el States panel, clickee Base en la parte superior para salir de la grabación del estado.
4 Precione F5 para testear el proyecto. Navegue a la pagina de bienvenida y clickee AparecerChat_on. La ventana de chat aparecerá en 1 segundo.
Activar estados con el Boton
A pesar de que pueda ser útil ver los diferentes estados de una pantalla utilizando el panel de navegación, habrá veces en las cuales querra replica en forma más cercana el comportamiento de usuario. Esto es ua tarea sencilla de hacer utilizando la característica de “Activate State” .
1 Regrese a SketchFlow y clickee con el boton derecho el component de chat en la pantalla de bienvenida.
2 Del menu de context que aparece seleccione Activate State y de ahi seleccione Pantalla de Bienvenida>AparecerChat_on
3 Presione F5 para testear la navegación