Sunny Pixels

Expression Blend 3 + SketchFlow RC Overview

Last Friday we announced the public release of the Expression Blend 3 + SketchFlow Release Candidate and Silverlight 3 RTW. If you haven’t already installed it here’s your chance to get the latest build of Blend with all of the functionality including the first ever public release of SketchFlow!

• Download the Blend 3 + SketchFlow RC installer NOW!!! 
• Download Silverlight 3 =)
• Download the Deep Zoom Composer RC for building Silverlight 3 Deep Zoom content.
• Visit the Microsoft Expression Blend home page for product info.
• Check out the Expression Blend Community site.
• Post questions to the Expression Blend Forums
• Read more about Blend 3 + SketchFlow features on the Expression Blend team blog.

Overview of Features

Are you curious about the top reasons for using Blend 3 + SketchFlow? Here’s a brief summary of a prototype I created using many of the new features and ZERO code! In a subsequent post I will go into more detail for the individual features I used for this project.

In the planning stages for Deep Zoom Composer, a tool for creating Silverlight 3 Deep Zoom content, we wanted to begin with a prototype to explore the functionality we wanted to ship in the release candidate. You can download the final version of the Deep Zoom RC here.  You can see the Silverlight version of my prototype here which I will reference throughout the post :)

There are many *AMAZING* features that we worked on for Blend 3. We really hope to improve workflow, increase productivity, and really facilitate the creative process from prototype to production. In subsequent posts hopefully I’ll be able to cover more features but I’d have to say that my top four Blend 3 features are:

****drum roll please! :)****

• Prototyping
• Importing Design Assets
• Design Time Data
• Behaviors

Now for a quick summary of these features….feel free to leave a comment with questions btw :)

1.  Prototyping

In Blend 3 you can take your ideas from vision to reality by using SketchFlow to quickly and efficiently compose interactive sketch style prototypes. You can create and deploy your prototypes to leverage the underlying platforms, Silverlight for cross browser, cross platform deployment and WPF for the ultimate Windows client experience.

In the SketchFlow Map panel you can add screens to create a navigational flow for your prototype. Below you will see that I stated with a splash screen which connected to my “Import” screen. The rest of the connections indicate where the user can navigate to from each screen and what bits of reusable components (in green) I created.

I was able to very quickly mock up the interface using the provided controls in the Assets panel under SketchStyles:

Below is a snapshot of the beginning stages of my Deep Zoom Composer prototype. 

Christian Schormann has some great blog posts that talk about SketchFlow in detail.

2. Importing Design Assets

With the new Adobe Photoshop and Adobe Illustrator import features I was able to take a .psd file that my designer created and bring it into my prototype in Blend 3. Below is the splash screen for Deep Zoom Composer created in Adobe Photoshop.

You can easily import the .psd file with the File->Import Adobe Photoshop File… command. The following dialog will appear allowing you to apply settings to this file:

Below is the splash screen imported into Blend’s artboard:

You can read more details on importing .psd files in my related Photoshop Import blog posts here.

3. Design Time Data

In Blend 3 you now have the flexibility of designing your user interface through the effective use of sample data. I was able to use sample data to create a listbox of images on my design surface that also worked at runtime. Sample data helps designers visualize what the UI would look like at design time and in the browser for their prototype before they have live data set up.

The Data panel allows you to create sample data that can be configured and then dragged/dropped onto the design surface. As you can see above you can set the types and properties of each item in a collection. I was even able to point the location to a set of images instead of using the default images provided by Blend 3. 

Above is a view of my design surface using the sample data I created. In the browser when the user selects an item in the listbox on the right the selected item’s data is displayed in my details view on the left. Sample data can also be seamlessly switched to a live data feed at any time.

For more details be sure to check out  Unni’s blog on Sample Data in Blend 3 here. You can also see a variety of other databinding related posts here.

4. Behaviors

The last feature that you’ll find incredibly useful is behaviors. This new feature allows you to bring a project to life by adding interactivity with powerful building blocks of functionality without writing any code. Well somebody has to write the code, but it doesn’t have to be you! :) The idea is that designers are able to find behaviors online via our Expression Gallery or a developer on their team can write a behavior for them and they can reuse these bits of functionality across projects. Blend 3 also ships with a set of behaviors which you can find in the Assets panel. As you can see we provide you with various types of navigation behaviors, state and property related behaviors, as well as animation behaviors.



Behaviors were key in bringing my prototype to life since I really wanted to have a live preview of Deep Zoom content on the artboard that the user could interact with to zoom in/out. The workflow was really straight forward: 1. Kirupa, my awesome officemate & fellow Blend PM, wrote a few DeepZoom related behaviors for another project that he let me use. 2. I added the .cs code files to my project. 3. The behaviors appeared in my Assets panel in the “Behaviors section. 4. I dragged and dropped the behavior I wanted to use to individual objects on the object tree and set the multiScaleImage control as the target. I built the project, ran it and it all worked!!! I was able to save myself he time of having to write tons and tons of code. The great thing is that I can reuse these behaviors in other projects and share them with others :) 



Above you can see that I had a multiScaleImage control for displaying Deep Zoom content and three buttons for zooming in/out/home. Each button has a DeepZoom Behavior which I dragged and dropped from the Assets panel. You can select the behaviors in the object tree and edit properties in the Properties panel.



For the Deep Zoom “Zoom In” behavior the only properties I had to set was the TargetName to be the multiScaleImage and the ZoomInValue. Now when the user clicks on the “Zoom In” button the images will, you guessed it, zoom in :)

Below is a simple version of the Deep Zoom Composer prototype that I created in Silverlight with the Blend 3 features described above. Again, I didn’t have to write a single line of code :) I am preparing a tutorial to take you step by step through the creation of this project. Stay tuned for more updates. If you’d like to see the prototype in a separate window click here.

Note: The SketchFlow Player is exported automatically to view and navigate through your prototype in the browser for Silverlight SketchFlow projects. It has three panels: The “Navigate” panel allows you to click on the links screens and zoom the view in/out. The “Map” panel shows you the navigation flow of the prototype. The “Feedback” panel allows you provide feedback and view the author’s annotations. Be sure to click the annotations toggle to view my comments in the SketchFlow player:

 

To the left is the toggle to see annotations. To the right is an example of what annotations look like. Click the yellow icon “JP2” for example to expand and read my notes :)

Many, many more features!

This is really just a small set of the new features in Expression Blend 3. Stay tuned for more in depth tutorials and posts :) Let me know if you have any questions or things you would like included in the tutorials.

Smiles,
Janete