How we made the BBAuth screencast

The news that seemed to get overlooked by the amazingness that became Hack Day was the release of a login API, BBAuth, or Browser-based Authentication. This new service allows any web site or web application to identify a user who has a Yahoo! ID with the user’s consent. Dan Theurer explains it on his blog:

…instead of creating your own sign-up flow, which requires users to pick yet another username and password, you can let them sign in with their existing Yahoo! account.

My mind keeps spinning thinking of the implications of this…more on that in a later post.

It was immediately obvious to me when I heard about it that this concept was going to be hard to fully grok without some visuals to explain it. So I sat with Dan yesterday to create a video walk-through that might help people digest it (myself included). Here is a 5 minute screencast talking about what it is and an example of it in action (also available on the YDN blog and on Yahoo! Video):

The screencast itself took only a few minutes in total to produce. Here’s how it went down:

1. I closed all my applications on my laptop other than my browser (or so I thought) and launched Camtasia
2. We spent 5 minutes discussing what we were going to say.
3. I clicked ‘record’.
4. We talked for 5 minutes.
5. I clicked ‘stop’.
6. I selected the output settings and it then produced a video file for me.
7. DONE. That part took about 20 minutes.

The next part, posting to a video sharing site, got a little sticky, but here’s what I learned:

• I tried Yahoo! Video, JumpCut and YouTube.
• Outputting my screencast in 320×240 resolution saves a lot of time for the video sharing sites
• Yahoo! Video liked the MPEG4 format most. YouTube claims the same, though it wasn’t obvious after trying a few formats which one it liked most.
• JumpCut was a snap to use, but the output quality was a little fuzzier
• Titles…I forgot the damn titles, and it just looked too weak without some kind of intro and outro. Camtasia gives you a couple of very simple options. I added an intro title in less than 5 minutes.
• Logo! Ugh. After encoding it about 8 times to get the right format I realized the logo really needed to be in there:
  1. I took a quick Snag-It screenshot of the YDN web site, played with it a bit and made a simple title screen.
  2. Saved it as a jpeg
  3. Imported into my Camtasia screencast
  4. Inserted the title image in the beginning and a variation of the same at the end
  5. Dropped a transition between the title frames and the video
  6. Titles DONE. That took less than 30 minutes…could have taken 2 seconds if I was prepared.
• Wait…the screen wasn’t big enough. You couldn’t see the graphic that Dan points to in his explanation because it’s too small. Not a problem. Camtasia includes a simple zoom tool:
  1. I played the screencast again and found where I needed to zoom.
  2. Inserted opening zoom marker
  3. Selected zoom size. Clicked done.
  4. Found the end of the segment where I wanted to zoom out.
  5. Inserted another zoom marker.
  6. Opened zoom window back up to full size.
  7. DONE. Maybe 15 minutes to do that.
• Output one last time
• Upload.
• DONE

Then all I had to do was write a blog post and embed the video in that post. That took about 10 minutes.

All in all, I probably spent close to 2 hours beginning to end producing this screencast, but most of that was learning a few tricks. Next time I do this, I bet I can complete the whole thing from launching Camtasia to posting on a blog in 45 minutes, possibly less.