Page view counter

Jesse Liberty - Silverlight Geek

More Signal Less Noise

Tip of the Day: How the Silverlight Videos Are Made

Creating A How Do I Video - Step By Step

Let me bring you behind the scenes and tell you how I create a video. I'm very open to suggestions, but remember that my goal is to create great videos but to create six of them a month..

  1. Decide what focused topic I'm going to demonstrate. The topic needs to be related to but build on something in the Silverlight Tutorials (these first few were too close to a repetition of what is in tutorials for my taste; the videos ought to extend the tutorials, not repeat them). 
  2. Create an example program that illustrates the point I wish to make with sufficient complexity not to leave anything out but sufficient simplicity that the focus is clear and not obscured by programmer slight of hand.
  3. With the working example on monitor 1, set monitor 2 to 1024x768 and fire up Camtasia 5.
  4. Mic Key to good sound: adjust my  Samson CO1U USB Condenser Mic sitting in its shock mount, placed on its floor stand. Set the balanceScottH equal at 80 and then use the Camtasia audio setting.

Key to good video (for picture in picture): Adjust my  Microsoft LifeCam (and one of these days follow Scott Hanselman's advice about cleaning up the clutter in my office!).

 

 

4. Set up all the programs I'll want to have appear in my video (typically Visual Studio, the Silverlight Help files, IE, etc. so that when "restored" they will open nicely in monitor #2, and set up the completed program in monitor #1.

5. Start recording, limiting the recording space to all of monitor #2 - do not use the wonderful utility Zoomit while recording - leave all zooming, callouts, etc. for post-production.

6. Turn picture in picture on and leave it on for the entire video (not to worry, we'll make me go away for most of the video, but we'll do that post-production; fortunately Camtasia has that on a separate track.

(Total set up time is about 1-2 hours)

7. Set up 30 frames per second (the videos up there now have 5-15 fps which is why the picture in picture is so poor!)

8. Record the video. Shoot for 30-40 minutes. Keep an eye on it; it is easy to go twice that!

9 Save the project and get ready to edit. Be sure to restore monitor #2 to full size

(Total Recording time is about 1 Hour)

10.. Two monitor editing, with the image on one monitor and the timeline/editor on the second. Edit with a light touch.

11. Leave minor errors in. Take egregious errors out. Take long waits out (e.g, waiting for Visual studio to set up,  waiting for the program to run the first time. But leave some time at the start and finish of the wait so that thMaxHere is no jerkiness. Fade out PIP early and fade back in late.Inject new video only when absolutely required. 

12. Take out long pauses between words, and dead air of over 1 second, but again don't over do it or you sound like Max Headroom.  

11. Add zoom for two purposes:
    a: to remove dead physical space and thus make larger the target space (e.g., the editing area) 
                     (do this frequently)
    b: to focus tightly on a very specific area to focus the user's attention
                     (do this as needed)  
    c: Zoom slowly, (1.5 seconds?) so the user doesn't become disoriented. (or sea-sick)
    d. Put some time between zooms - at lest 5 minutes if possible.

12. Make the cursor itself, and especially clicking obvious:
       I tried highlighting the cursor with a circle (yuck!). Next thing is just to try a bigger cursor. 
       I do use a quick double circle for each click  (Extra points if you know which button has which color!)

13. Use call outs (highlighting, arrows, etc.) sparingly, but use them. .

14. Produce the video as required by our production team

15. Pass to our production team for prep for the site.

(Post Production Time: Typically 4 -6 hours)

(Total time to create a Silverlight 2  HDI video averages about 8 hours or 1/2 a Microsoft Day)

My HDI Goals for Q2 2008

  • Improve Sound Quality by reducing ambient sounds
  • Remove background clutter during PIP (screen?)
  • Ensure steady and predictable pace of release (6/month)
  • HDI Topics complement but do not repeate Tutorial Topics
  • Guest Appearances (topic specialists)

-jesse

Comments

daveloper said:

Hey Jessse,

Interesting, this behind the scene peek.

The idea of guest appearances sounds great, I can't wait to hear Shawn Wildermuth talk about integrating Silverlight with ADO.NET Data Services ( I think thats what hes doing with www.silverlightdata.com)

Aslong as you keep shooting, I'll be glued to my laptop ;)

# March 8, 2008 2:45 PM

wisecarver said:

Impressive...Thanks. ;-)

# March 8, 2008 3:23 PM

BenHayat said:

An OT question Jesse;

Now that the NDA on SL has been lifted (and there is no excuse not to answer ;-)), could you please give us a blog that defines the infrastructure and guidelines how to create an application that has more than one page to show to end user? And how these "new" pages can communicate data to each other? i.e. One page that captures customer info, and another page that displays that info.

Just a simple app that has, let's say five pages (Home page, About us, Services, Contact Us, News) which the user can click on the home page menu and they can see a new page with info.

Thanks!

..Ben

# March 8, 2008 4:06 PM

Dew Drop - March 9, 2008 | Alvin Ashcraft's Morning Dew said:

Pingback from  Dew Drop - March 9, 2008 | Alvin Ashcraft's Morning Dew

# March 9, 2008 3:22 PM