Prototyping with SketchFlow: Module 6

Adding Navigation to Buttons in SketchFlow

If you or a client wish to bring your SketchFlow project closer to the behavior of a true application, this is easy to do. In this section, you will add common navigation to your navbar; this will make all the buttons in your application true links and allow the user to navigate using them instead of the SketchFlow player controls.

Using the Navigate To Command
In this exercise, you will take advantage of the behavior of Component screens and add common navigation to the four buttons in your navbar. The composition screen will automatically update all the connected pages to give you true interactive navigation.

1. Double-click the navbar composition screen to view it on the artboard.
   
   
   
   The navbar composition screen.
   
   
2. Click once on the Boards button to select it, then right-click, and from the resulting menu, choose Navigate To. From the submenu that appears, choose Boards.
3. Repeat these steps for the following three buttons (Boots, Bindings, Community). Right-click each, then, (from the Navigate to menu), choose the corresponding screen.
   
   
   
   
   
4. On each of the screens that have the navbar, the buttons are now enabled.
5. Press F5 to run the project and test the navigation. All the buttons now send the user to the corresponding pages.
6. Close the SketchFlow Player to return to the SketchFlow project.