Making your mark: Branding the SketchFlow Player

After you have created a prototype using Expression Blend + SketchFlow, you can distribute the files so that stakeholders can view the project by using the SketchFlow Player. By default, the SketchFlow Player includes a branding area that displays the text “Microsoft SketchFlow Prototype.” You can customize this branding area to suit your needs. For example, you can replace the default text with your company name or a custom project name. By using special tags, you can further customize the text, and even include a custom image, such as your company logo.SketchFlow project settings are applied on a project-by-project basis, meaning that any changes you make will apply only to the project in which you are currently working.

To modify the branding area, on the Project menu, click SketchFlow Project Settings. In the SketchFlow Project Settings dialog box, in the Branding text box, type the text that you would like to have appear in the area. For example, include the project name, the client name, or your company name. You can also use the following tags to further modify the branding text:

  • {br} Inserts a line break.
  • {nm} Inserts the prototype filename.
  • {fg=#XXXXXXXX} Changes the text color. Use 16-bit hexadecimal color codes with the alpha component. For more information and a list of color codes, see Color Object on MSDN.

You can include up to four lines of text in the branding area.

You can also display a SketchFlow screen or UserControl in the branding area. For example, if you have included your logo as a SketchFlow screen or UserControl in the project, you can use {logo=namespace.classname} in the Branding text box to include that screen or UserControl in the branding area. Simply replace namespace.classname with the reference to the UserControl that you want to include. To locate the namespace.classname, open the screen or UserControl that you want to include in Split view. Locate the code that begins with x:Class. The code that follows is the code that you want to include in place of namespace.classname in {logo=namespace.classname}, for example SilverlightPrototype1Screens.Screen_5.

The branding area is 60 pixels high and 180 pixels wide. Screens or UserControls that exceed those dimensions may not display properly.

You can also include the prototype version number in the Branding text box by using {vr}. The version number has to be changed in the code, but will appear in the branding area of the SketchFlow Player. By default, the version number is 1.0.0.0.

To change the version number, in the Project panel, locate the Screens project (SilverlightPrototype1Screens, for example). In the Properties folder, open AssemblyInfo.cs and locate the following code:

// Version information for an assembly consists of the following four values:
//
// Major Version
// Minor Version
// Build Number
// Revision
//
// You can specify all the values or you can default the Build and Revision Numbers
// by using the ‘*’ as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

In [assembly: AssemblyVersion("1.0.0.0")], change the value to the desired value. The next time you build the project and launch the SketchFlow Player, the new version number will appear in the branding box.

<?php echo get_option('blogname'); ?> - Comments on <?php the_title(); ?>

Leave a Reply