North Star Labs

Here’s my preferred method of drawing attention to screen elements in technical documentation.

Direct Link: Screen Shot Highlights

iPhone / iPod Direct Video Link

Procedure:

1. Copy window to clipboard with ALT+PrintScreen
2. Paste as a new image into the Gimp with CTRL+SHIFT+V
3. Use the rectangular selection tool to select the regions you want to draw attention to.
4. Feather the selection for effect.
5. Create a drop shadow if desired.
6. Insert a new, totally black layer named mask.
7. Keeping the selection in place, select the mask layer and delete the black pixels, creating a “hole” through the layer to the underlying image of the window.
8. Set the mask layer’s transparency appropriately.
9. Save the image, flattening the layers.
10. Insert the image into your word processor of choice.

The embedded screen cast was created with CamStudio, by converting the resulting AVI into an H.264 AVC MP4 file using the SUPER ffmpeg/x264 front end by eRightSoft.  The embedded player is JW FLV Media Player.  All tools are open source software.

I noticed that the embedded video I posted in my last post didn’t show up properly in my RSS feed reader, so this post is an attempt to get things right.

The goal here is an accessible, high quality embedded video that works properly on both this site, and through syndication.

First, the MPEG-4 AVC Video:

Second, the embedded youtube video:

Here’s hoping this works…

Edit: (2007-09-28 01:05 -0400) Added placeholder images for google reader, which will strip the flash object from the feed.

I noticed in my RSS feeds recently that the new version of the Adobe Flash Player browser plug-in supports H.264/MPEG-4 AVC and AAC audio, but I didn’t think much of it at the time. As it turns out, I’m really happy that Adobe supports standard MP4 files accessible through plain HTTP, as it cuts out the proprietary Flash Video (FLV) format.

Macs are wonderful when creating rich media since they now ship with iMovie, and relatively inexpensive tools such as ProfCast are out there. This rich media derives a lot of value from being represented in standard formats such as MPEG-4 AVC (H.264) video, and AAC audio, all rolled up into the standard MP4 container. However, it turns out to be incredibly difficult to publish this standards-compliant media to a web page player that “just works” like Youtube.com.

Until now, the only viable way to embed this content in a web site was to use the quicktime plug-in, which is a bit heavy for the task. With the most recent versions of Flash Player 9, we now can directly play high quality videos, in a standard format, produced with free tools.

Here’s an example using Jeroen Wijering’s excellent, and free (Creative Common’s Licensed) Flash Video Player. Check out how nice “The Machine is Us/ing Us” looks, compared to the Youtube version at: http://www.youtube.com/watch?v=6gmP4nk0EOE

The code for this is relatively simple, though a bit of a pain to get formatted correctly. And by “bit” I mean, it took me hours. If I start to do more video content, I’ll definitely look into a plug-in so the blog handles these details.

<embed src="/blog/flvplayer.swf">
  allowfullscreen="true"
  allowscriptaccess="always"
  flashvars="&displayheight=350&file=/blog/media/WeschWeb2v3.mp4&width=420&height=315"
  align="middle" height="315" width="420" />

The video is a conversion from a high quality Quicktime file to standard H.264/AAC video.

Hopefully we’ll start to see higher quality videos up on Youtube now. In the meantime, you’re able to do it yourself if you need to publish higher quality video in an easily accessible manner.