Silverlight 4 : WebCam, Microphone and much more…

After a long time finally got some time to pen down few things here, Bad time from past few weeks since weekends also got occupied and saga may continue for coming week or two.

Well, don’t want to waste this free time today, so started looking at Silverlight 4 again, Last time I broke my head over Bidi-RTL feature of silverlight where I shown demo(s) on how you can do arabic language integration etc. I hope that post was useful for you. Today I am going to discuss in short and to specific point on the WebCam and Microphone integration inside Silverlight application and possibilities because of that. All you need is good quality WebCam (maybe external or integrated inside your laptop) along with Microphone.

Code is very simple and you can implement it directly, there is no great learning as far as code is concern, but there are few things to be understood so as to use this functionality at best. Today we have following UI with us :

Today, I was playing with friend’s iPhone, I saw iPhone first time, It is good, and overall feel is also good, So I decided to use this as UI of our today’s POC, well frankly the code and discussion we are doing today has nothing to do with iPhone, so don’t get confuse,This iPhone UI is just to do something different that’s it,It has nothing to do with iPhone. we are just using this is as UI (Don’t even spend your valuable time in thinking :) ), Observe carefully that I have 4 buttons (Image Control) on bottom side as :

For Scan Devices

For Starting Camera

For Stopping Camera

For Capturing Snap/ Take a Snap

(All Images I got from internet while surfing, they carries their respective copyrights and owners,I am just using them for demos)

Scan for Devices :

It is important to detect the Audio and Video devices with the system, so as to use them further for capture. One simple way to identify is just right click and hit Silverlight option and then navigate to “WebCam/Mic” tab, you will get following screen :

We are doing this job via C# code and making use of Child window. I got one child window with me where I am showing Available Devices inside listbox as follows :

To display such list, I have written following piece of C# code :

void Devices_Loaded(object sender, RoutedEventArgs e)
        {
            ddlVoice.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
            ddlVideo.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();           
        }

Where ddlVoice and ddlVideo are my list for showing Collection of Audio and Video devices, Point to note here is that, GetAvailableAudioCaptureDevices() and GetAvailableVideoCaptureDevices() will return collection which can be bind to specific control. I can very well send values from Child Window to main page, but right now I am not giving stress on that functionality.

To call this popup, I wrote following C# inside my Image MouseLeftButton down event :

private void btnScan_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
          {
            Devices dv = new Devices();
            dv.Show();
          }

Start Camera :

Once I hit start camera, My default Video device should be in game. Well I can pick if I got many from collection which we talked about in above section of scanning devices. Right now I am not connecting my child window here, so I will go for default one like this :

private void btnStart_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
          {
              if (m_Camera != null)
            {
                m_Camera.Stop();

                VideoCaptureDevice vdo = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
                m_Camera.VideoCaptureDevice = vdo;
                VideoBrush vidBrush = new VideoBrush();
                vidBrush.SetSource(m_Camera);
                WebCamViewer.Fill = vidBrush;

                if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
                {
                    m_Camera.Start();
                }
            }
          }

So what is this m_Camera?? , Well this is a member declared as :

CaptureSource m_Camera;

CaptureSource Class provides methods for specific Audio/Video capture devices (Refer more in Silverlight documentation)

WebCamViewer is simple rectangle declared in XAML like this :

<Rectangle x:Name="WebCamViewer" Height="214" VerticalAlignment="Top" Width="200" />

GetDefaultVideoCaptureDevice() will allow you to capture default WebCam with System, Make note that, in case of multiple,its your job to choose correct one from collection (Do I need to tell how? :) ), Like other brushes, we have VideoBrush here which will help us to fill the captured output inside rectangle.

  if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
             { //Some Code..}

Many smart people will raise this question here, what is this and/or what if I ignore this? , Well this will allow access to use the specific devices which you seek via RequestDeviceAccess() and if at all you ignore this block thinking like you are using this one as “Spy Cam”..well your attempts will fail and you will get following screen :)

When all goes well, It will prompt you with typical Yes/No box like this :

Once you press “Yes” (Take the Red Pill and enter..Alice in Wonderland..Matrix movie ;-) ), you can see output like this :

Done !! :)

Stopping Camera :

To stop camera, you don’t need to do much beside this one liner C# :

private void btnStop_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
          {
               if (m_Camera != null)
              {
                  m_Camera.Stop();
              }
          }

Take a Snap ! :

It will be useless application if it does not allow you to take snap, so let’s take snap ! ( Folks, There are few damm good articles written by wonderful people like you and few of my MVP friends who have done nice things like Video recording and Applying Effects to images etc. Do check those articles too), Now you need a lambda as :

private void btnTakePic_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
          {
                if (m_Camera != null)
              {
                   m_Camera.AsyncCaptureImage((snapImage) =>
                  {
                      PhotoCam.Visibility = System.Windows.Visibility.Visible;
                      PhotoCam.Source = snapImage;
                      WebCamViewer.Visibility = System.Windows.Visibility.Collapsed;                     
                  });
              }
          }

Note that, AsycnCaptureImage() takes WritableBitmap as param, we are then assigning that to our Image Control PhotoCam declared in XAML as :

<Image x:Name="PhotoCam" Margin="191,115,199,196" Width="200" Height="214"/>

and we are just doing normal on/off of WebCamViewer which is our rectangle where we first started rendering, is now replaced by our Image, You can do twists and tricks here by your own imagination and get that output image in some viewbox etc. Well finally it will look like this :

So this is how you can integrate your Audio/Video devices smoothly inside silverlight which is new feature with Version 4 Beta. Possibilities with this feature are endless and many applications can be build on top of this, All you need is Imagination ! :) , Sayonara ! I will hit back here very soon with Printing and HTML hosting features and much more..with much more out of the box UI like we have today ..Muhaa haaa ! :D

Vikram.

Silverlight 4 : Crossing Language barriers aka BiDiRTL

I have already talked about launch of Silverlight 4 Beta in my last article. We all jumped on new Silverlight 4 Beta bits and I am sure you all must be ready to build next generation web applications.

Silverlight 4 ( We all know its in Beta, so I will not use the word “Beta” again) like its older versions from version 2,3, Supports multiple languages,confused? I am talking about C#,VB.NET,IronRuby etc. which can be use to develop Silverlight applications.

But this post is not about those languages, This post is about the language which we use to communicate. A great news for people who speak “Arabic” language. Silverlight 4 not only helps you to render your content but also now you can right it the way you want, mean to say, you have now “FlowDirection” attribute with which you can write your Arabic Text from Right to Left (A buzz word for above is BiDiRTL support). All you need is just set the FlowDirection attribute and you are done ! Don’t believe what I am saying? Ok, see this :

More clear you can see :

I do not speak Arabic,but I got it translated via “Bing Translator” (You are free to blame Translator if some mistakes are there :) )

Source Code ? Too Simple ! :

As you can see, For this Arabic language, I am not taking any help of Culture Class,Globalization-Localization or any other resource or xml, Simply I have copied the text and pasted in my designer.

For my Arabic friends, If you guys want to shift your complete portal into Silverlight with Arabic support, you can set “FlowDirection” attribute as “RightToLeft” to your UserControl directly, if you want some part as LeftToRight or RightToLeft then offcourse you can override anywhere by reseting FlowDirection attribute. So all you need is Language skill and FlowDirection attribute as and when required. There are so many languages in world which are different in tone and different when it comes to writing, Script I mean to say. I spend my 2 years in college to learn Japanese (“Sankyu” level they say), I find it bit difficult to write especially “Kanji”, I given try for Japanese with this methodology and it worked like charm !

---------------------------------------------------------------

A humble request to Microsoft :

A Complex Japanese script renders well in Silverlight 4 Beta RichTextArea control, but when tried, It fails to render any Indian language like Devnagari Scripts, We know that it does not support Devnagari script like Arabic or Japanese but please consider this as “Feedback” and really looking ahead for Hindi and other India Languages support for Silverlight in future. Attempt made to render but it fails like this :

You can see that it easily renders Katakana and Hiragana,Also render Arabic well, but when Devnagari Script is pasted,It just shows those alien blocks :(

Out of 1 billion Internet population in India, around 66% of people used to with Hindi and Devnagari script (approx)

---------------------------------------------------------------

Well, coming back to our discussion, So till the time you must have realize that there is nothing special skill require to implement this feature of Silverlight 4, Now its your call to use it wisely in your business applications. you can initially try with sample POCs or implementing this into your static content web pages. A must try out feature.

How can I keep my mouth shut without shouting about data binding and that too with my all time favorite DataGrid Control ? I finally given a try to push this feature in DataGrid, Believe me, Results are more than expected ! It rocks !! All you need is declare a class with some properties and just bind it like we do normally in our loaded += event like this :

public class sigheads
       {
           [Required(ErrorMessage = "Field Cannot be left Blank")]
           public string FirstName { get; set; }
           [Range(0, 999, ErrorMessage = "Invalid Age")]
           public int Age { get; set; }
           [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Invalid E-Mail ID")]
           public string Email { get; set; }
           public string Job { get; set; }
       }

Now write one method GetSIGHeads() like this :

public List<sigheads> GetSIGHeads()
       {
           List<sigheads> sglst = new List<sigheads>();

           sglst.Add(new sigheads() { FirstName = "فيكرام", Age = 27, Email = "vikram@dotnetcoe.com", Job = "مطور برمجيات" });
           sglst.Add(new sigheads() { FirstName = "أنيل", Age = 40, Email = "anil@dotnetcoe.com", Job = "إدارة المشروع" });
           sglst.Add(new sigheads() { FirstName = "حيدر", Age = 28, Email = "haider@dotnetcoe.com", Job = "نائب الرئيس" });
           sglst.Add(new sigheads() { FirstName = "أحمد", Age = 27, Email = "ahmed@dotnetcoe.com", Job = "مدير قاعدة البيانات" });
           return sglst;
       }

Point to make a note : I have hardcoded some values to my properties, In real situation, Data will be coming from Database (I am talking to few experts for this scenario especially in Silverlight, So may be in my coming articles, I could drop more light on the same)

Next step is bind this to grid and hit F5 and run for glass of Beer since you are going to see desired output on your screen :)

Happy ? I can see a bright smile on your face already ! :)

So I hope you like this article, As I told you, initially we will understand the concepts and features of these new bits and then we will hit hard as usual.

Moral of the Story : Arabic and other few languages now can easily get rendered inside your webpage,kudos to Team Silverlight for giving this feature, a milestone I should say.

Your valuable feedback is most welcome, Also, due to day to day boring life of 8hrs work, sometime it is not possible to do lot of research, so if anyone given try for Indian language and worked for them with these Silverlight 4 bits, do let me know, I will love to learn from you.

Vikram.

Silverlight 4 : A long term player

Well, I still not came out of those glorious demos of Silverlight 4 Beta shown by Scott Gu on eve of PDC09..My mind is still in that 2nd Day keynote at PDC..Wow !! Microsoft and Team Silverlight made it !!

You all must be wondering why this place is still silent despite Silverlight 4 Beta announced 2-3 days back, Nothing like that. I am already getting ready to give you lot of good stuff over next couple of weeks.I do blog about Silverlight with demos which I feel that you can use in your day to day business apps. Last time while Silverlight 3 Beta was announced, I wrote full series of articles. This time I am planning to put more concepts than code, Offcourse working code will be there in article, but main discussion will be around the actual practical application of features introduced in Silverlight 4.

Till the time I start filling my Silverlight 4 Beta articles here, A good thing will be to download environment and get ready to see the future !

A good place to visit : http://silverlight.net/getstarted/silverlight-4-beta/#tools

Here are few highlighted features of Silverlight 4 Beta in nutshell :

• Out of Browser Applications - Elevated Privileges Support,COM interop
• HTML Hosting Support
• WebCam/Mic Support (raw stream only)
• Printing Support
• Notification aka “Toast” API
• RichTextBox,Arabic and Hebrew Text Support
• MouseWheel Support on ScrollViewer, TextBox, ComboBox, Calendar, DatePicker
• DataBinding Support for DependencyObjects,IDataErrorInfo Support,StringFormat, TargetNullValue & FallBackValue Properties on Binding,IEditableCollectionView and Grouping support on CollectionViewSource
• Astoria 2.0 Support,MEF
• Expose Runtime Version to 3rd Party DLLs
• NGEN Support for Core Runtime Binaries

iPhone Streaming now available : http://www.iis.net/iPhone

Silverlight Media Framework : http://smf.codeplex.com/

So out of this Treasure Box what we are going to discuss here? Well, I will touch upon highlighted features like Printing,WebCam/Mic Support, HTML Hosting,RichTextBox and our all time happening discussion here..DataGrid :)

So take a long breath and get ready for yet another drive with Silverlight..Silverlight 4 (Beta)..A long term player in world of RIA/Web..Way to go !! :)

Vikram.

Bing Maps Silverlight Control .. Wait for Map Control is over !

Hello everyone, hope you enjoying Silverlight and Expression Studio all the time. Well, For a long from Silverlight 2 onwards,we all are waiting for Map Control in Silverlight, Till the time we had DeepEarth Project and various other third party stuff, But now I am happy to share that we now have our own Map Control for our applications, Its free and very much simple to use. Just to give all control in your hand to allow you to explore, I am giving all information in very short manner..A quick review you can say.

Yes ! Bing Maps Silverlight Control is now available. So what you need?

1. Silverlight 3 Setup + Visual Studio and Expression Blend (Expression is optional) (Sorry to say..But with Silverlight 2 it might not work..document says so)

2. Bing Maps Silverlight Control : You can download it from here :

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830

3. You need to have account with : (Live ID is must)

https://www.bingmapsportal.com/

Once you install Bing Maps Silverlight Control, It will show you CHM file (If you really read that CHM carefully, you don’t need to read rest of my post,but please don’t do so :) ). All information is there in place with all necessary code snippets.

Now your job is to take normal Silverlight Application Project Template. Add Reference to your Silverlight Project to following dlls :

1. Microsoft.Maps.MapControl.Common.dll

2. Microsoft.Maps.MapControl.dll

You will find them usually under Program Files -> Bing Maps Silverlight Control -> V1-> Libraries

Then you need to set reference like this in your XAML file :

xmlns:BingMap="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

Then you need to write following XAML :

<BingMap:Map CredentialsProvider="Your Key Here"/>

Wait !..One step is mandetory before this, First you need to create Account with https://www.bingmapsportal.com/

You will get following UI once you perform login :

Well, you can see 3 options there :

1. Create an account : You need to enroll your self (Typical “I Agree all the terms” kind of stuff :D )

2. Create or View Keys : This is something similar to Silverlight Live Streaming account procedure, you need to give some name to your application and URL where you want this etc. For testing purpose you can give any URL (Specific URL is recommended though)

3. Update or View Account Details : Typical Account information.

Below these three you can find links to SDK and Blogs and forums which talk about Bing Map Control. (Ajax Control is also there beside Silverlight, My ASP.NET friends should give try for that too)

Then now come back to Visual Studio, Inside your app now, Place that key to “CredentialsProvider” and you done. Now you will see the Control on your designer like this :

This even opens in Blend, If at all you want to place some design around it :

Control as such will not expose any properties which you can set-reset in Property windows, you need to play with XAML and C# Code.Now after all this just play with it by pressing F5 and you can see the output like this : (For this simple Hello World kind of example, there is no C# code, but once you start digging inside this control and Maps, you need to play with C#)

Not satisfied?? Want to have more stuff?..Want to handle its events? Want to place Videos,Images on it??..well you can do it easily by just few line of code !..No I am not taking that small pain..you can simply refer CHM along with it, For those CHM word does not make sense, it looks like this :

So, Now let it be your ASP.NET or HTML Page, Mapping with Bing Map Control will add value to your application and more important is that, Its Bing and its free..Bing Bing Bingo !! :)

Hope you like this post, I kept this small since this is very exciting and I don’t want to kill your excitement, Still if you feel I should drop some code snippets here, feel free to talk with me, Will then go for some more apps or another in depth post,Keep visiting here since very soon lot more new stuff is on your way !

Vikram.

Expression Encoder 3 Screen Capture : A small wonder…

Me and my other blogger friends all over the world already written many things about Expression Studio and Tools inside Expression Studio like Blend,Web,Encoder etc. With the launch of Expression Studio Version 3, Microsoft given us a simply amazing tool name as “Expression Encoder 3 Screen Capture” which though is not much talk about but already created wave in communities across the world.

While giving feedback to my articles here, Many suggested me that why I am not going for any screencasts here? Believe me, I still prefer typing long post over screencasts, But yes I am planning to have some screencasts in near future. When I took this activity and initiate it to hunt down a tool which will help me to do so, I found a big player in this arena as “Camtasia Studio”. My first impression was its freeware, then I realized that its paid software(They do give 30 days trial), well for good things cost hardly matters, But its always good to first look for other options. When I installed Expression Studio 3 on my machine, I was more keen towards Blend,Design and Encoder being a Silverlight enthusiast like you all, I totally neglected this Screen Capture that time (How dumb !).

Well, enough of story, now lets talk about Expression Encoder 3 Screen Capture. In a nutshell, Its a screen capturing utility introduce by Microsoft along with Expression Studio 3. You can find it in your start menu once you install Expression Studio 3. Once you click on that, you will find following on your screen :

You can see four basic buttons on this UI, Out of these first two belong to Audio and Video, Then other two are Settings and Recording respectively. Once you click on Settings,you will find following window :

You can see various Tabs here, each corresponds to some specific operation, Screen tab is only to set Bitrate and Frame rate, Camera Tab helps you to choose your Built-In Cam or attached cam for recording like this :

You will get all necessary settings option for your camera here. Moving ahead to Audio :

It will help you to choose Audio Options and even here you can set Bitrate and Format in corresponding dropdowns, HotKey Tab basically help you to configure this player and you can set your own hotkeys here,else it will take default :

Once all these setting are done, Another important Tab here is “Other” which will let you know where this screen capture going to get store and what other options are there like this :

After these steps, Once you you back to main screen, After clicking on “Record” button, It will show you a Red Box covering your screen along with two free guidelines which will allow you to select which part of screen you want to capture, Remember by default it is screen as capturing object and not camera, For camera you need to go to Camera and do the necessary settings there. It will look like this :

You have full freedom to set the size and/or some specific resolution by following option which you will get :

After your recording, you will see a Preview of what you capture on screen like this :

At this Preview player, you have 2 options, First is to save this project as XESC format or Second option is to encode this properly via Encoder(Still you have to save that file before going to encoder), Yes you do have Encoder option at right side bottom of this preview player, Then story is pretty straight, Encode and upload it wherever you want, On blogs, forums anywhere, Silverlight hosting is definitely a good option always.

So, do you like this new way of doing Screen Captures? Isn’t it useful for Screencasts, This is power by Expression Encoder,Big plus point about this tool is the “simplicity” which we always find in any Microsoft Product.(Attempt here is not to blindly compare with Camtasia Studio or other screen capturing tools, But to create awareness about it since its part of Expression family).Its quick,efficient and most important is small in size..hence I name this tool as “A small wonder…”, I hope you like this article, This is bit away from Silverlight and Expression Blend and Design which we talk here a lot, But I found this tool worth blogging and I feel it might be useful to most of you, So I made this attempt. I am now again will go back to our main arena of Silverlight from next article. Thanks and let me know your feedback as usual.

Vikram.

Expression Blend 3 SketchFlow : New era in Prototyping – Part 3

First of all sorry for delay in posting this last part of this series which is quick wrap up of first two, I was under heavy work load and rest of the time went into Windows 7 Party preparation which will be around next weekend.

In last part, we saw various aspects of SketchFlow and how we can improve our design with the SketchFlow controls, How we can program it and make it more real, We also saw how we can render that inside browser and navigate among various pages, Lastly we saw how we can give feedback with Ink tool provided to us and how it empower us to give correct feedback, We even went ahead and store feedback of that last example in a separate feedback file.

Now lets open that feedback file by going to Project->Add Existing Item.. Once you load that file you will see a Lamp kind of symbol inside Sketch Map and once you get your mouse pointer there, you will see the feedback available,Also you will see the corresponding feedback in your designer too like this :

So, once we import this particular feedback file, Designer will be able to see the changes and what all things he/she need to improve in the same. This is how its very interactive for Designers,Developers as well as to Clients/End Users who give feedback.

What add cherry on the cake kind of thing is the feature introduced by Microsoft to import your Adobe Photoshop and Illustrator work inside blend and on top of that, You can scan images and make your design(Do refer videos shown on Virtual Kitchen), You can also import your PowerPoint work inside blend, So for these all you need is to visit File menu and you will get following options :

Note that, for PowerPoint, there is no assurance that Animations inside PPT will work on Silverlight, This is a twist and there was lot many discussions went into community to have PPT with Animations directly exporting to Silverlight. Well, A paid solution is there, Check this out :

http://www.erain.com/products/convexion/default.asp?erain=cnvannc

Another question may come to your mind that, till this part of this article, I am talking all the scenarios happening on local machine, But how will one export that? A simple way to export this SketchFlow is just go to file Menu and choose “Package SketchFlow Project…” you will get following output :

Yes ! everything will be exported as a proper package and a TestPage is in place to check out.

Now for my designer friends, there is always a lot of pain to prepare documents and put these screens inside as specs, No wonder lot of efforts take place and time also get waste in that most of the time. But thanks to Microsoft who coming with new revolution in Blend and yes ! now you can create documentation of your design work. All you need is just save your work and go to File Menu-> “Export to Microsoft Word…” and see the magic ! :

Point to make a note here is that, if you open feedback file and export this to Word, you will not find the feedback reflected, So its a general export of your actual screen with a neat layout and schema in form of Microsoft Word Document (PDF?? well you need to take pain for that to export from doc/docx to PDF :) )

Well this was all about SketchFlow inputs I want to share with you and I am very sure this will help you a lot to move ahead in your prototype development, maybe in coming future I will try to build and demonstrate an end-to-end application via SketchFlow.

Meanwhile there is a must have book for SketchFlow which is a great refer which you can find it here :

http://www.dynamic-prototyping.com/

Another good resource you can find on my blogroll, Blog by Renuka Prasad, A fellow MVP in India and good friend of mine who have made some posts on Expression Blend SketchFlow, Check those too.

Thanks for your feedback and mails, I will soon back here with Silverlight and much more things.

Vikram.

Expression Blend 3 SketchFlow : New era in Prototyping – Part 2

Thanks for your wonderful response and emails for my Part 1 on Blend 3 SketchFlow. In last part basically I tried my best to put need of SketchFlow in front of you and things around that along with the initial steps to begin your SketchFlow work like how to add controls and what all options are there.

Today in this part, I am going to concentrate on Developing(coding) part along with navigation and much more till how to execute it etc. Maybe the exporting and other important features I will address in my part 3 (I don’t want my readers to feel sleepy with long long paragraphs :) ).

I assume here that, there are total 3 screens in my example application as Login->Welcome->Report, As arrow shows here the flow, without login you cannot move ahead. So flow starts from login screen and ends at Report.

For designers, good thing is that,they can give now smooth transition effects and small animations too while doing some functionality or screen change with something know as SketchFlow Animation like this :

More in-depth information you can find here. As we talking from Part 1, Sketch Flow is all about making prototype more real and interactive. So we can even take help of code behind to make it as if a working code snippet. Let’s say on this Login Screen,If I want to validate user, I can write code for this prototype and make it realistic like this :

I can even associate navigation by means of trigger too by attaching-detaching it,something like this :

<i:Interaction.Triggers>
   <i:EventTrigger x:Name="MyTrigs" EventName="Click">
        <pb:NavigateToScreenAction TargetScreen="SilverlightPrototype1Screens.Screen_1_1"/>
   </i:EventTrigger>
</i:Interaction.Triggers>

There is yet another way to connect to another screen, Let’s say you have normal navigation button where you directly want to throw user on some specific screen then you can choose “Navigate To” option by just Right Clicking on it like this :

Or directly associate particular screen via Map like this :

Note that One screen may connected to multiple screens and direction is not always one way, All depends on your vision of workflow among screens, So looping is common thing here.

Please make another note that, the Sketch Flow screens can be databound or you can have dummy data for them, How to DataBind screens in Blend, for this I have already written one article which you can refer here.

Now lets build this sample two screens and let’s now talk more on Output and execution part. So after building and executing project, you can see output in browser like this :

Now let’s talk more specifically to each aspects and parts which we can see in above output, Check panel on Left first. (Well if you try to view source,you will find nothing but routine object tag embedding this output, So nothing specific or special there in terms of rendering), now lets concentrate on left panel :

Now Part 1 which is highlighted in Red is nothing but shows us the navigation sequence of screens, you can jump on your own to each of them either by clicking in that list or using Home and back button given on top of it. You will also notice that, your SketchFlow animation is also getting on list here along with screens. Part 2 which is again highlighted in Red is nothing but a scale where you can zoom in and out for particular screen on right hand side. Now let’s talk about Options Map and Feedback on down panel of this, It look like this :

Highlighted icon may confuse you and you might think that it is for full screen, Actually this will overlap on your screen on right and there you can see the current selected screen and its position on map, which you can zoom in-out and can close too like this :

If you ask me..from my own experience in IT, Hardly there will be any client who will not give any feedback and give go ahead on the spot, So feedback has to be there to improve work and do it more better and better. For this, You have a Feedback tab on left which look like this :

With those pens and colors, you can draw or quote your remarks or feedback on screen on right like this :

Now not all the times these remark will help Designers to understand what exactly they are suppose to do, so we have a Text entry feature again made available which gives more information on what wrong on right side like this :

 

Now a question may come to your mind that, what if I/My Client close down the browser? Where will that feedback get stored? am I going into loss for not having that data? Well, Simple answer is you have something known as “Feedback File” where all this information get stored, So all you need is just to click on Folder like symbol on left panel bottom part at right most button and then choose option like this :

Click on Export Feedback…

and you are done ! You can then access that file from your drive or even you can transfer it wherever you want !

But what to do this Feedback file? and how will designer come to know feedback who might be sitting altogether at different location? Any other features where I can export my Output as Prototype? Well for all these questions, just wait for Part 3 where I will be talking about getting feedback file and how to extract feedback and make those changes along with much more powerful features..So be here once again for Part 3 with much more new things, I will take another day(Maybe on Tuesday) for Part 3 since as per my time zone,after few hours, it will be Monday Morning Blue for me !! :D

Like Part 1, I hope Part 2 will be helpful to take your development one step ahead, Do let me know your feedback.

Vikram.