Mi primer proyecto SketchFlow
A pesar que los proyectos SketchFlow se originan en Expression Blend, y los dos comparten un mismo entorno de trabajo y herramientas, es necesario controlar que tipo de proyecto se esta creando.
1 Abrir el Expression Blend 3
2 Seleccione File > New Project, elegir Aplicación Silverlight 3 SketchFlow ponganlen un nombre
3 Para elegir donde guarder la aplicación selecciona el botón Browse y la carpeta correspondiente y presione OK
Creando nuevas pantallas de navegación
Las pantallas de navegación son la base para la creación de prototipos SketchFlow. Puede crear pantallas de navegación adicionales en la ventana Application Flow. Cada proyecto comienza con una pantalla de inicio. Pueden pensarlo como la pantalla de título de su proyecto. Vamos a ir creando la navegación.
- Ponga su cursor en el nodo Screen 1. Renombrelo y póngale Pantalla Inicio. Cuando el menú se expanda por debajo del nodo, clickee y arrastre el primer icono hacia la izquierda para crear una nueva pantalla de navegación.
- Clickee con el botón derecho elija renombrar y coloce Pantalla bienvenida. Esta será la pantalla de bienvenida de nuestra aplicación. Note que usted a creado automáticamente una nueva pantalla dentro del Project Panel.
- Cree una nueva pantalla conectada a la Pantalla de Bienvenida de la misma forma y nombrela Producto 1.
- Vuelva a la pantalla de Bienvenida y cree otra pantalla que se llame Producto 2.
- Vuelva a la pantalla de Bienvenida y cree otra pantalla que se llame Producto 3.
- Clickee en cualquier parte del SketchFlow Map sin seleccionar ningún screen y clickee botón derecho de su mouse seleccione Create New Screen, de esta forma podrá crear una pantalla que no esté conectada a ninguna de las que ya alla creado.
- Clickee dos veces el nombre y llámela Checkout
- Puede linkear una pantalla a otra clickeando un Screen Node, como el Producto 3, cuando el meun de abajo se expanda seleccione el segundo icono, llamado Connect an existing screen y arrástrelo a la screen Checkout.
Agregando Contenito a las Páginas de Navegación
Como lo mencionamos antes, SketchFlow está diseñado para realizar prototipos rápidos y fáciles. Como debe haber notado, agregar pantallas es fácil. Agregar el contenido a las mismas es igual de fácil. Comenzaremos por agregar algunos dibujos con la herramienta pincel, y luego agregar elementos de interfaz de usuario con el estilo SkectFlow.
1 Clickee dos veces el nodo de Start en el SketchFlow map para abrir la pantalla y del panel de herramientas, localice la herramienta pincel, luego clickee la tecla de abajo para expandirla y seleccione la herramienta lápiz.
2 Con la herramienta seleccionada, dibuje algún logo de su empresa, no se preocupe por la presicion es solo un prototipo después de todo.
3 Clickee la librería y localice la sección Styles, seleccione la flecha de expansión de la misma, y seleccione SketchStyles. Un menú aparece con la lista de elementos que puedes utilizar. Vamos a utilizar el SketchTitleCenter.
4 Clickee la herramienta de selección en el panel de herramientas, luego clickee y arrastre el titulo al lugar que desee.
5 Clickee dos veces el titulo para editar el texto y coloquen Bienvenido. De la misma forma coloque el titulo a cada una de las pantallas.
Creando conecciones adicionales
Ahora conectaremos las pantallas utilizando el mapa de sketchflow.
1 Del tercer producto seleccione el icono de Connect to an existing screen, arrástrela hacia la pantalla de producto 2. Esto creara una navegación de ida y vuelta.
2 Continue y cree este tipo de coneccion para todas las pantallas.
3 Guarde el proyect.
En el próximo post veremos como trabajar esto desde el SketchFlow Player…salu2