Working in the SketchFlow Player
Although this is a simple application at this point, you will now take a few moments to run your project in the SketchFlow Player. Before you package the application for a client, you will want to preview the application as they will see it. Doing so may uncover some flow issues early on.

1. Press F5 or choose Project > Run Project. The SketchFlow player appears within your web browser set to the Start Screen.
   
   
   
   The SketchFlow Player.
   
   
2. Click the Welcome line in the Navigate Panel; this was the only connection you created from the Start screen. On the Welcome page however, you have the three options you set as outgoing connections.
3. Click the Boards link in the Navigate panel. Notice that you only have incoming connections to this page, and no outgoing connections. That’s why there is nothing listed in the Navigate panel.
4. Immediately above the Navigate panel are controls allowing to perform basic navigation such as returning to the previous page. Click the White arrow immediately to the left of the Boards label to navigate back to the Welcome page.
5. Another way to navigate through the SketchFlow project is to use the Map panel. Click the Map panel in the bottom left corner of the player. The Map panel displays the Application Flow to the user and allows them to navigate through the project as well. Chances are your view is very small by default. You can increase the magnification by dragging the slider and then click and drag inside the Flow panel to move through the flow. However, a more efficient use of screen space is to show the entire flow as an overlay on your main screen.
6. Click the Toggle icon on the right-hand side of the Map panel. An overlay of your application flow appears. You can also click and drag the slider at the top left to increase or decrease magnification and click and drag the entire flow diagram on screen.
   
   
   
   An overlay of the application flow.
   
   
7. Click the Shopping Cart node and behind the overlay you will see the page appear. Using this Map overlay gives the user multiple levels of information about the application. Not only can we see that there are no outgoing links from the Checkout page, but the navbar has not been added either.
8. Click the Welcome node to return to this page. Note that the Navigate options are still available, and users can choose either method of navigation.
9. Click the Toggle button in the Map panel to remove the overlay. Place your cursor over one of the navigation buttons and there is a default rollover effect. This is also a pre-built effect. Of course the buttons don’t go anywhere when clicked, but let’s say you (or a client) want to add this functionality. Luckily, this is straightforward to do back in Expression Blend.
   Later in the module, you will learn about the Feedback feature in the SketchFlow player. For now, let’s return to the SketchFlow project. Close the SketchFlow Player.

Downloads

• Prototypen erstellen mit Hilfe von SketchFlow in Expression Blend 3 – Einführung
  http://go.microsoft.com/?linkid=9690582
  
  
• Browsergame mit Hilfe von Behaviors in Expression Blend 3 erstellen
  http://go.microsoft.com/?linkid=9690583
  
  
• Funktionen von SuperPreview in Expression Web 3 – Einführung
  http://go.microsoft.com/?linkid=9690584
  
  
• Silverlight Unterstützung in Expression Web 3
  http://go.microsoft.com/?linkid=9690585

Copyright © 2010 Microsoft Deutschland GmbH Alle Rechte vorbehalten.